@bikdotai/bik-component-library 0.0.825-5 → 0.0.825-beta.0

package/dist/esm/components/connected-app-dialog/ConnectedAppDialog.js

@@ -0,0 +1,195 @@
+import { jsx as e, jsxs as r, Fragment as V } from "react/jsx-runtime";
+import { useState as i, useRef as Y, useEffect as _ } from "react";
+import { DropdownPopover as H } from "../dropdown/DropdownPopover/index.js";
+import { Modal as J } from "../modals/Modal.js";
+import { TitleMedium as Q, BodySecondary as B, Caption as R, TitleSmall as U } from "../TypographyStyle.js";
+import { COLORS as c } from "../../constants/Theme.js";
+import { OverviewContainer as X, ConnectedBadge as Z, AboutApp as ee, IconAndText as te, IconBg as oe, ContactSupport as re, SupportLink as ne, StepstoAdd as ie, PopOverContainer as ce, RightBody as le, SuccessStateWrapper as k, CredsWrapper as ae, CredentialsContainer as de } from "./ConnectedAppDialog.styled.js";
+import { ConnectedAppSkeleton as se } from "./ConnectedAppSkeleton.js";
+import { Tag as pe } from "../tag/Tag.js";
+import me from "../../icons/Informational/Common UI/Placeholder.js";
+import he from "../../icons/Informational/General/Info.js";
+import { IconButton as ue } from "../icon-button/IconButton.js";
+import ge from "../../icons/Informational/Common UI/MoreVertical.js";
+import { StateComponent as T, ButtonTypes as fe, StateInterface as E } from "../states/StateComponent.js";
+import { Button as Se } from "../button/Button.js";
+const Fe = ({
+  open: m,
+  onClose: I,
+  name: l,
+  logoUrl: C,
+  description: L,
+  supportEmail: x,
+  supportLink: a,
+  menuOptions: d,
+  credentials: s,
+  fetchCredentials: h,
+  connectedMessage: M,
+  statusSection: F,
+  footerButton: u,
+  width: N = "70%",
+  height: O = "71%",
+  "data-test": n
+}) => {
+  const b = !!(s && s.length > 0), g = (s ?? []).map((t) => t.key).join("|"), f = b && !!h, [j, S] = i({}), [z, y] = i(!1), [w, v] = i(!1), [K, P] = i(null), [$, D] = i(0), A = Y(h);
+  A.current = h, _(() => {
+    if (!m || !f)
+      return;
+    const t = A.current;
+    if (!t)
+      return;
+    let o = !0;
+    return y(!0), v(!1), S({}), t().then((p) => {
+      o && (S(p || {}), P(g), y(!1));
+    }).catch(() => {
+      o && (S({}), v(!0), y(!1));
+    }), () => {
+      o = !1;
+    };
+  }, [m, g, $, f]);
+  const W = f && (z || K !== g && !w), q = (d ?? []).map(
+    (t, o) => ({
+      label: t.label,
+      value: String(o),
+      "data-test": t["data-test"]
+    })
+  ), G = (t) => {
+    const o = Array.isArray(t) ? t[0] : t, p = Number(o?.value);
+    Number.isNaN(p) || d?.[p]?.onClick();
+  };
+  return /* @__PURE__ */ e(
+    J,
+    {
+      open: m,
+      onClose: I,
+      closeOnOutsideClick: !0,
+      centralContainerStyles: { width: N, height: O },
+      "data-test": n,
+      children: W ? /* @__PURE__ */ e(se, {}) : /* @__PURE__ */ r(X, { children: [
+        /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(pe, { type: "positive", tagText: "Connected" }) }),
+        /* @__PURE__ */ r(ee, { children: [
+          /* @__PURE__ */ r(te, { children: [
+            /* @__PURE__ */ e(oe, { children: C ? /* @__PURE__ */ e(
+              "img",
+              {
+                style: {
+                  height: "64px",
+                  width: "64px",
+                  objectFit: "cover",
+                  borderRadius: "8px"
+                },
+                src: C,
+                alt: l + " logo"
+              }
+            ) : /* @__PURE__ */ e(me, { size: 40, color: c.content.placeholder }) }),
+            /* @__PURE__ */ e(Q, { style: { marginTop: 20 }, children: l }),
+            /* @__PURE__ */ e(
+              B,
+              {
+                style: { marginTop: 8, textAlign: "center", width: "50%" },
+                children: L
+              }
+            )
+          ] }),
+          (x || a) && /* @__PURE__ */ r(re, { children: [
+            /* @__PURE__ */ e(he, { size: 16, color: c.content.secondary }),
+            /* @__PURE__ */ r(
+              R,
+              {
+                style: { marginLeft: 8, color: c.content.secondary },
+                children: [
+                  "For ",
+                  l,
+                  " support contact -",
+                  " ",
+                  a ? /* @__PURE__ */ e(
+                    ne,
+                    {
+                      href: a.url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      children: a.text
+                    }
+                  ) : x
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r(ie, { children: [
+          d && d.length > 0 && /* @__PURE__ */ e(ce, { children: /* @__PURE__ */ e(
+            H,
+            {
+              options: q,
+              onSelect: G,
+              placement: "bottom-end",
+              width: "220px",
+              "data-test": n ? n + "-menu" : "connected-app-menu",
+              children: /* @__PURE__ */ e(
+                ue,
+                {
+                  Icon: ge,
+                  iconColor: c.content.secondary,
+                  "data-test": n ? n + "-menu-trigger" : "connected-app-menu-trigger"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ e(le, { children: w ? /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
+            T,
+            {
+              width: 400,
+              states: E.ERROR,
+              heading: "Couldn't load account details",
+              subline: "Something went wrong while fetching your credentials.",
+              size: "SMALL",
+              isButtonEnabled: !0,
+              type: fe.SINGLE,
+              buttonText: "Retry",
+              onButtonClick: () => D((t) => t + 1)
+            }
+          ) }) : b ? /* @__PURE__ */ r(V, { children: [
+            /* @__PURE__ */ e(U, { style: { marginBottom: "16px" }, children: "Account details" }),
+            /* @__PURE__ */ e(ae, { children: (s ?? []).map((t, o) => /* @__PURE__ */ r(de, { children: [
+              /* @__PURE__ */ e(
+                B,
+                {
+                  style: { marginBottom: 4 },
+                  color: c.content.secondary,
+                  children: t.label
+                }
+              ),
+              /* @__PURE__ */ e(R, { style: { marginBottom: 16 }, children: j?.[t.key] })
+            ] }, `${t.key}-${o}`)) })
+          ] }) : /* @__PURE__ */ r(k, { children: [
+            /* @__PURE__ */ e(
+              T,
+              {
+                width: 400,
+                states: E.SUCCESS,
+                heading: M ?? `Your account is connected to ${l}`,
+                subline: "",
+                isButtonEnabled: !1,
+                size: "SMALL"
+              }
+            ),
+            F
+          ] }) }),
+          u && /* @__PURE__ */ e(
+            Se,
+            {
+              buttonType: "text",
+              buttonText: u.text,
+              onClick: u.onClick,
+              style: { alignSelf: "center", marginTop: "12px" }
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Fe as ConnectedAppDialog
+};
+//# sourceMappingURL=ConnectedAppDialog.js.map

package/dist/esm/components/connected-app-dialog/ConnectedAppDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectedAppDialog.js","sources":["../../../../src/components/connected-app-dialog/ConnectedAppDialog.tsx"],"sourcesContent":["import { Info, MoreVertical, Placeholder } from '@src/icons';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { IconButton } from '@src/components/icon-button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tButtonTypes,\n\tStateComponent,\n\tStateInterface,\n} from '@src/components/states';\nimport { Tag } from '@src/components/tag';\nimport {\n\tBodySecondary,\n\tCaption,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport * as Sc from './ConnectedAppDialog.styled';\nimport { ConnectedAppSkeleton } from './ConnectedAppSkeleton';\nimport { ConnectedAppDialogProps } from './model';\n\nexport const ConnectedAppDialog: React.FC<ConnectedAppDialogProps> = ({\n\topen,\n\tonClose,\n\tname,\n\tlogoUrl,\n\tdescription,\n\tsupportEmail,\n\tsupportLink,\n\tmenuOptions,\n\tcredentials,\n\tfetchCredentials,\n\tconnectedMessage,\n\tstatusSection,\n\tfooterButton,\n\twidth = '70%',\n\theight = '71%',\n\t'data-test': dataTest,\n}) => {\n\tconst areCredsRequired = !!(credentials && credentials.length > 0);\n\t// Signature of the credential set — changes when the app (and thus its keys) changes,\n\t// which is what should trigger a refetch (not the unstable fetchCredentials identity).\n\tconst credKeySig = (credentials ?? []).map((c) => c.key).join('|');\n\tconst willFetch = areCredsRequired && !!fetchCredentials;\n\n\tconst [creds, setCreds] = useState<Record<string, string>>({});\n\tconst [loading, setLoading] = useState(false);\n\tconst [credsError, setCredsError] = useState(false);\n\tconst [fetchedSig, setFetchedSig] = useState<string | null>(null);\n\tconst [reloadKey, setReloadKey] = useState(0);\n\n\t// Hold the latest callback in a ref so the effect need not depend on its (usually inline,\n\t// unstable) identity — avoids a refetch-every-render loop without disabling exhaustive-deps.\n\tconst fetchRef = useRef(fetchCredentials);\n\tfetchRef.current = fetchCredentials;\n\n\tuseEffect(() => {\n\t\tif (!open || !willFetch) {\n\t\t\treturn;\n\t\t}\n\t\tconst fetcher = fetchRef.current;\n\t\tif (!fetcher) {\n\t\t\treturn;\n\t\t}\n\t\tlet active = true;\n\t\tsetLoading(true);\n\t\tsetCredsError(false);\n\t\tsetCreds({});\n\t\tfetcher()\n\t\t\t.then((res) => {\n\t\t\t\tif (!active) return;\n\t\t\t\tsetCreds(res || {});\n\t\t\t\tsetFetchedSig(credKeySig);\n\t\t\t\tsetLoading(false);\n\t\t\t})\n\t\t\t.catch(() => {\n\t\t\t\tif (!active) return;\n\t\t\t\tsetCreds({});\n\t\t\t\tsetCredsError(true);\n\t\t\t\tsetLoading(false);\n\t\t\t});\n\t\treturn () => {\n\t\t\tactive = false;\n\t\t};\n\t}, [open, credKeySig, reloadKey, willFetch]);\n\n\t// Show the skeleton whenever a fetch is pending OR the data on hand isn't for the current\n\t// app yet — the latter prevents a first-frame flash of empty/previous-app values on (re)open.\n\tconst showSkeleton =\n\t\twillFetch && (loading || (fetchedSig !== credKeySig && !credsError));\n\n\tconst dropdownOptions: DropdownOption[] = (menuOptions ?? []).map(\n\t\t(opt, idx) => ({\n\t\t\tlabel: opt.label,\n\t\t\tvalue: String(idx),\n\t\t\t'data-test': opt['data-test'],\n\t\t}),\n\t);\n\n\tconst handleMenuSelect = (selected: DropdownOption | DropdownOption[]) => {\n\t\tconst option = (\n\t\t\tArray.isArray(selected) ? selected[0] : selected\n\t\t) as SingleOption;\n\t\tconst idx = Number(option?.value);\n\t\tif (!Number.isNaN(idx)) {\n\t\t\tmenuOptions?.[idx]?.onClick();\n\t\t}\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tonClose={onClose}\n\t\t\tcloseOnOutsideClick\n\t\t\tcentralContainerStyles={{ width, height }}\n\t\t\tdata-test={dataTest}\n\t\t>\n\t\t\t{showSkeleton ? (\n\t\t\t\t<ConnectedAppSkeleton />\n\t\t\t) : (\n\t\t\t\t<Sc.OverviewContainer>\n\t\t\t\t\t<Sc.ConnectedBadge>\n\t\t\t\t\t\t<Tag type=\"positive\" tagText=\"Connected\" />\n\t\t\t\t\t</Sc.ConnectedBadge>\n\t\t\t\t\t<Sc.AboutApp>\n\t\t\t\t\t\t<Sc.IconAndText>\n\t\t\t\t\t\t\t<Sc.IconBg>\n\t\t\t\t\t\t\t\t{logoUrl ? (\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: '64px',\n\t\t\t\t\t\t\t\t\t\t\twidth: '64px',\n\t\t\t\t\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tsrc={logoUrl}\n\t\t\t\t\t\t\t\t\t\talt={name + ' logo'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Placeholder size={40} color={COLORS.content.placeholder} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Sc.IconBg>\n\t\t\t\t\t\t\t<TitleMedium style={{ marginTop: 20 }}>{name}</TitleMedium>\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{ marginTop: 8, textAlign: 'center', width: '50%' }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</Sc.IconAndText>\n\t\t\t\t\t\t{(supportEmail || supportLink) && (\n\t\t\t\t\t\t\t<Sc.ContactSupport>\n\t\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.secondary} />\n\t\t\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\t\t\tstyle={{ marginLeft: 8, color: COLORS.content.secondary }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tFor {name} support contact -{' '}\n\t\t\t\t\t\t\t\t\t{supportLink ? (\n\t\t\t\t\t\t\t\t\t\t<Sc.SupportLink\n\t\t\t\t\t\t\t\t\t\t\thref={supportLink.url}\n\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{supportLink.text}\n\t\t\t\t\t\t\t\t\t\t</Sc.SupportLink>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\tsupportEmail\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t</Sc.ContactSupport>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Sc.AboutApp>\n\n\t\t\t\t\t<Sc.StepstoAdd>\n\t\t\t\t\t\t{menuOptions && menuOptions.length > 0 && (\n\t\t\t\t\t\t\t<Sc.PopOverContainer>\n\t\t\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\t\t\tonSelect={handleMenuSelect}\n\t\t\t\t\t\t\t\t\tplacement={'bottom-end'}\n\t\t\t\t\t\t\t\t\twidth={'220px'}\n\t\t\t\t\t\t\t\t\tdata-test={\n\t\t\t\t\t\t\t\t\t\tdataTest ? dataTest + '-menu' : 'connected-app-menu'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\tIcon={MoreVertical}\n\t\t\t\t\t\t\t\t\t\ticonColor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\tdata-test={\n\t\t\t\t\t\t\t\t\t\t\tdataTest\n\t\t\t\t\t\t\t\t\t\t\t\t? dataTest + '-menu-trigger'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'connected-app-menu-trigger'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t\t\t</Sc.PopOverContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Sc.RightBody>\n\t\t\t\t\t\t\t{credsError ? (\n\t\t\t\t\t\t\t\t<Sc.SuccessStateWrapper>\n\t\t\t\t\t\t\t\t\t<StateComponent\n\t\t\t\t\t\t\t\t\t\twidth={400}\n\t\t\t\t\t\t\t\t\t\tstates={StateInterface.ERROR}\n\t\t\t\t\t\t\t\t\t\theading={\"Couldn't load account details\"}\n\t\t\t\t\t\t\t\t\t\tsubline={\n\t\t\t\t\t\t\t\t\t\t\t'Something went wrong while fetching your credentials.'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsize={'SMALL'}\n\t\t\t\t\t\t\t\t\t\tisButtonEnabled\n\t\t\t\t\t\t\t\t\t\ttype={ButtonTypes.SINGLE}\n\t\t\t\t\t\t\t\t\t\tbuttonText={'Retry'}\n\t\t\t\t\t\t\t\t\t\tonButtonClick={() => setReloadKey((k) => k + 1)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Sc.SuccessStateWrapper>\n\t\t\t\t\t\t\t) : areCredsRequired ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<TitleSmall style={{ marginBottom: '16px' }}>\n\t\t\t\t\t\t\t\t\t\tAccount details\n\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t<Sc.CredsWrapper>\n\t\t\t\t\t\t\t\t\t\t{(credentials ?? []).map((cred, idx) => (\n\t\t\t\t\t\t\t\t\t\t\t<Sc.CredentialsContainer key={`${cred.key}-${idx}`}>\n\t\t\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginBottom: 4 }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{cred.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t\t\t<Caption style={{ marginBottom: 16 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{creds?.[cred.key]}\n\t\t\t\t\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t\t\t\t\t</Sc.CredentialsContainer>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Sc.CredsWrapper>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Sc.SuccessStateWrapper>\n\t\t\t\t\t\t\t\t\t<StateComponent\n\t\t\t\t\t\t\t\t\t\twidth={400}\n\t\t\t\t\t\t\t\t\t\tstates={StateInterface.SUCCESS}\n\t\t\t\t\t\t\t\t\t\theading={\n\t\t\t\t\t\t\t\t\t\t\tconnectedMessage ?? `Your account is connected to ${name}`\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsubline={''}\n\t\t\t\t\t\t\t\t\t\tisButtonEnabled={false}\n\t\t\t\t\t\t\t\t\t\tsize={'SMALL'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{statusSection}\n\t\t\t\t\t\t\t\t</Sc.SuccessStateWrapper>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Sc.RightBody>\n\t\t\t\t\t\t{footerButton && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\t\t\tbuttonText={footerButton.text}\n\t\t\t\t\t\t\t\tonClick={footerButton.onClick}\n\t\t\t\t\t\t\t\tstyle={{ alignSelf: 'center', marginTop: '12px' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Sc.StepstoAdd>\n\t\t\t\t</Sc.OverviewContainer>\n\t\t\t)}\n\t\t</Modal>\n\t);\n};\n"],"names":["ConnectedAppDialog","open","onClose","name","logoUrl","description","supportEmail","supportLink","menuOptions","credentials","fetchCredentials","connectedMessage","statusSection","footerButton","width","height","dataTest","areCredsRequired","credKeySig","c","willFetch","creds","setCreds","useState","loading","setLoading","credsError","setCredsError","fetchedSig","setFetchedSig","reloadKey","setReloadKey","fetchRef","useRef","useEffect","fetcher","active","res","showSkeleton","dropdownOptions","opt","idx","handleMenuSelect","selected","option","jsx","Modal","ConnectedAppSkeleton","jsxs","Sc.OverviewContainer","Sc.ConnectedBadge","Tag","Sc.AboutApp","Sc.IconAndText","Sc.IconBg","Placeholder","COLORS","TitleMedium","BodySecondary","Sc.ContactSupport","Info","Caption","Sc.SupportLink","Sc.StepstoAdd","Sc.PopOverContainer","DropdownPopover","IconButton","MoreVertical","Sc.RightBody","Sc.SuccessStateWrapper","StateComponent","StateInterface","ButtonTypes","k","Fragment","TitleSmall","Sc.CredsWrapper","cred","Sc.CredentialsContainer","Button"],"mappings":"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"}

package/dist/esm/components/connected-app-dialog/ConnectedAppDialog.styled.d.ts

@@ -0,0 +1,18 @@
+export declare const OverviewContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const AboutApp: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconAndText: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconBg: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContactSupport: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StepstoAdd: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** Scrollable content region between the kebab row and the pinned footer. */
+export declare const RightBody: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** Absolute-positioned wrapper for the "Connected" Tag in the top-left of the card. */
+export declare const ConnectedBadge: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const PopOverContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CredentialsContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CredsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SupportLink: import('styled-components').StyledComponent<"a", any, {}, never>;
+export declare const SuccessStateWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SkeletonMain: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SkeletonAppInfo: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SkeletonCredsInfo: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/esm/components/connected-app-dialog/ConnectedAppDialog.styled.js

@@ -0,0 +1,143 @@
+import e from "styled-components";
+import { COLORS as i } from "../../constants/Theme.js";
+const o = e.div`
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	cursor: default;
+	overflow: hidden;
+	border-radius: 4px;
+	box-sizing: border-box;
+`, d = e.div`
+	display: flex;
+	height: 100%;
+	width: 45%;
+	box-sizing: border-box;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-top: 74px;
+	background: ${i.surface.subdued};
+`, r = e.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`, c = e.div`
+	height: 80px;
+	width: 80px;
+	background: ${i.surface.hovered};
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 8px;
+	padding: 8px;
+`, l = e.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	background: ${i.surface.hovered};
+	min-height: 40px;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 12px;
+	margin-top: auto;
+`, s = e.div`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 55%;
+	box-sizing: border-box;
+	background: ${i.surface.standard};
+	padding: 18px 28px 18px 18px;
+	overflow: hidden;
+`, a = e.div`
+	flex: 1 1 auto;
+	min-height: 0;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	overflow-x: hidden;
+	overflow-y: auto;
+`, x = e.div`
+	position: absolute;
+	margin-top: 20px;
+	margin-left: 24px;
+	z-index: 1;
+`, p = e.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	z-index: 2;
+	width: 100%;
+	padding-right: 24px;
+`, f = e.div`
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 16px;
+`, g = e.div`
+	display: flex;
+	flex-direction: column;
+	margin-top: 24px;
+	width: 100%;
+`, u = e.a`
+	color: inherit;
+	text-decoration: underline;
+`, h = e.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	flex: 1;
+	width: 100%;
+`, b = e.div`
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+	box-sizing: border-box;
+`, m = e.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 45%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 24px;
+	background: ${i.surface.subdued};
+`, v = e.div`
+	display: flex;
+	flex-direction: column;
+	width: 55%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 24px;
+	background: ${i.surface.standard};
+`;
+export {
+  d as AboutApp,
+  x as ConnectedBadge,
+  l as ContactSupport,
+  f as CredentialsContainer,
+  g as CredsWrapper,
+  r as IconAndText,
+  c as IconBg,
+  o as OverviewContainer,
+  p as PopOverContainer,
+  a as RightBody,
+  m as SkeletonAppInfo,
+  v as SkeletonCredsInfo,
+  b as SkeletonMain,
+  s as StepstoAdd,
+  h as SuccessStateWrapper,
+  u as SupportLink
+};
+//# sourceMappingURL=ConnectedAppDialog.styled.js.map

package/dist/esm/components/connected-app-dialog/ConnectedAppDialog.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectedAppDialog.styled.js","sources":["../../../../src/components/connected-app-dialog/ConnectedAppDialog.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const OverviewContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: 100%;\n\theight: 100%;\n\tcursor: default;\n\toverflow: hidden;\n\tborder-radius: 4px;\n\tbox-sizing: border-box;\n`;\n\nexport const AboutApp = styled.div`\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 45%;\n\tbox-sizing: border-box;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding-top: 74px;\n\tbackground: ${COLORS.surface.subdued};\n`;\n\nexport const IconAndText = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n`;\n\nexport const IconBg = styled.div`\n\theight: 80px;\n\twidth: 80px;\n\tbackground: ${COLORS.surface.hovered};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 8px;\n\tpadding: 8px;\n`;\n\nexport const ContactSupport = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\ttext-align: center;\n\tbackground: ${COLORS.surface.hovered};\n\tmin-height: 40px;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tpadding: 12px;\n\tmargin-top: auto;\n`;\n\nexport const StepstoAdd = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 55%;\n\tbox-sizing: border-box;\n\tbackground: ${COLORS.surface.standard};\n\tpadding: 18px 28px 18px 18px;\n\toverflow: hidden;\n`;\n\n/** Scrollable content region between the kebab row and the pinned footer. */\nexport const RightBody = styled.div`\n\tflex: 1 1 auto;\n\tmin-height: 0;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n`;\n\n/** Absolute-positioned wrapper for the \"Connected\" Tag in the top-left of the card. */\nexport const ConnectedBadge = styled.div`\n\tposition: absolute;\n\tmargin-top: 20px;\n\tmargin-left: 24px;\n\tz-index: 1;\n`;\n\nexport const PopOverContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-end;\n\tz-index: 2;\n\twidth: 100%;\n\tpadding-right: 24px;\n`;\n\nexport const CredentialsContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-bottom: 16px;\n`;\n\nexport const CredsWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-top: 24px;\n\twidth: 100%;\n`;\n\nexport const SupportLink = styled.a`\n\tcolor: inherit;\n\ttext-decoration: underline;\n`;\n\nexport const SuccessStateWrapper = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tflex-direction: column;\n\tflex: 1;\n\twidth: 100%;\n`;\n\n// Skeleton layout ---------------------------------------------------------\n\nexport const SkeletonMain = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tborder-radius: 4px;\n\tbox-sizing: border-box;\n`;\n\nexport const SkeletonAppInfo = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 45%;\n\theight: 100%;\n\tbox-sizing: border-box;\n\tpadding: 24px;\n\tbackground: ${COLORS.surface.subdued};\n`;\n\nexport const SkeletonCredsInfo = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 55%;\n\theight: 100%;\n\tbox-sizing: border-box;\n\tpadding: 24px;\n\tbackground: ${COLORS.surface.standard};\n`;\n"],"names":["OverviewContainer","styled","AboutApp","COLORS","IconAndText","IconBg","ContactSupport","StepstoAdd","RightBody","ConnectedBadge","PopOverContainer","CredentialsContainer","CredsWrapper","SupportLink","SuccessStateWrapper","SkeletonMain","SkeletonAppInfo","SkeletonCredsInfo"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAW3BC,IAAWD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShBE,EAAO,QAAQ,OAAO;AAAA,GAGxBC,IAAcH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOrBI,IAASJ,EAAO;AAAA;AAAA;AAAA,eAGdE,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBG,IAAiBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMtBE,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBI,IAAaN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMlBE,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,GAMzBK,IAAYP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYnBQ,IAAiBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOxBS,IAAmBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU1BU,IAAuBV,EAAO;AAAA;AAAA;AAAA;AAAA,GAM9BW,IAAeX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOtBY,IAAcZ,EAAO;AAAA;AAAA;AAAA,GAKrBa,IAAsBb,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAW7Bc,IAAed,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUtBe,IAAkBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASvBE,EAAO,QAAQ,OAAO;AAAA,GAGxBc,IAAoBhB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOzBE,EAAO,QAAQ,QAAQ;AAAA;"}

package/dist/esm/components/connected-app-dialog/ConnectedAppSkeleton.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+/** Two-column loading skeleton shown while credentials are being fetched. */
+export declare const ConnectedAppSkeleton: React.FC;

package/dist/esm/components/connected-app-dialog/ConnectedAppSkeleton.js

@@ -0,0 +1,38 @@
+import { jsxs as x, jsx as p } from "react/jsx-runtime";
+import { SkeletonMain as h, SkeletonAppInfo as t, SkeletonCredsInfo as e } from "./ConnectedAppDialog.styled.js";
+import { BikShimmer as i } from "../shimmer/ShimmerComponent/BikShimmer.js";
+const g = () => /* @__PURE__ */ x(h, { children: [
+  /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(
+    i,
+    {
+      boxes: [
+        {
+          height: "80px",
+          width: "80px",
+          marginTop: "0px",
+          borderRadius: "8px"
+        },
+        { height: "20px", width: "140px", marginTop: "20px" },
+        { height: "14px", width: "220px", marginTop: "12px" },
+        { height: "14px", width: "180px", marginTop: "6px" },
+        { height: "14px", width: "200px", marginTop: "48px" }
+      ]
+    }
+  ) }),
+  /* @__PURE__ */ p(e, { children: /* @__PURE__ */ p(
+    i,
+    {
+      boxes: [
+        { height: "18px", width: "120px", marginTop: "8px" },
+        { height: "12px", width: "90px", marginTop: "32px" },
+        { height: "16px", width: "180px", marginTop: "8px" },
+        { height: "12px", width: "90px", marginTop: "24px" },
+        { height: "16px", width: "180px", marginTop: "8px" }
+      ]
+    }
+  ) })
+] });
+export {
+  g as ConnectedAppSkeleton
+};
+//# sourceMappingURL=ConnectedAppSkeleton.js.map

package/dist/esm/components/connected-app-dialog/ConnectedAppSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectedAppSkeleton.js","sources":["../../../../src/components/connected-app-dialog/ConnectedAppSkeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { BikShimmer } from '@src/components/shimmer';\nimport {\n\tSkeletonAppInfo,\n\tSkeletonCredsInfo,\n\tSkeletonMain,\n} from './ConnectedAppDialog.styled';\n\n/** Two-column loading skeleton shown while credentials are being fetched. */\nexport const ConnectedAppSkeleton: React.FC = () => {\n\treturn (\n\t\t<SkeletonMain>\n\t\t\t<SkeletonAppInfo>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\theight: '80px',\n\t\t\t\t\t\t\twidth: '80px',\n\t\t\t\t\t\t\tmarginTop: '0px',\n\t\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ height: '20px', width: '140px', marginTop: '20px' },\n\t\t\t\t\t\t{ height: '14px', width: '220px', marginTop: '12px' },\n\t\t\t\t\t\t{ height: '14px', width: '180px', marginTop: '6px' },\n\t\t\t\t\t\t{ height: '14px', width: '200px', marginTop: '48px' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</SkeletonAppInfo>\n\t\t\t<SkeletonCredsInfo>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{ height: '18px', width: '120px', marginTop: '8px' },\n\t\t\t\t\t\t{ height: '12px', width: '90px', marginTop: '32px' },\n\t\t\t\t\t\t{ height: '16px', width: '180px', marginTop: '8px' },\n\t\t\t\t\t\t{ height: '12px', width: '90px', marginTop: '24px' },\n\t\t\t\t\t\t{ height: '16px', width: '180px', marginTop: '8px' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</SkeletonCredsInfo>\n\t\t</SkeletonMain>\n\t);\n};\n"],"names":["ConnectedAppSkeleton","SkeletonMain","jsx","SkeletonAppInfo","BikShimmer","SkeletonCredsInfo"],"mappings":";;;AASO,MAAMA,IAAiC,wBAE3CC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EACA,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN;AAAA,UACC,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,UACX,cAAc;AAAA,QAAA;AAAA,QAEf,EAAE,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAA;AAAA,QAC7C,EAAE,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAA;AAAA,QAC7C,EAAE,QAAQ,QAAQ,OAAO,SAAS,WAAW,MAAA;AAAA,QAC7C,EAAE,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAA;AAAA,MAAO;AAAA,IACrD;AAAA,EAAA,GAEF;AAAA,oBACCC,GAAA,EACA,UAAA,gBAAAH;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,EAAE,QAAQ,QAAQ,OAAO,SAAS,WAAW,MAAA;AAAA,QAC7C,EAAE,QAAQ,QAAQ,OAAO,QAAQ,WAAW,OAAA;AAAA,QAC5C,EAAE,QAAQ,QAAQ,OAAO,SAAS,WAAW,MAAA;AAAA,QAC7C,EAAE,QAAQ,QAAQ,OAAO,QAAQ,WAAW,OAAA;AAAA,QAC5C,EAAE,QAAQ,QAAQ,OAAO,SAAS,WAAW,MAAA;AAAA,MAAM;AAAA,IACpD;AAAA,EAAA,EACD,CACD;AAAA,GACD;"}

package/dist/esm/components/connected-app-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ConnectedAppDialog';
+export * from './model';

package/dist/esm/components/connected-app-dialog/model.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+/** A single action shown in the dialog's kebab (overflow) menu. */
+export interface ConnectedAppMenuOption {
+    /** Label rendered in the menu. */
+    label: string;
+    /** Invoked when the option is selected. */
+    onClick: () => void;
+    /** Optional test hook. */
+    'data-test'?: string;
+}
+/** A credential row to display. The value is import 'react-toastify/dist/ReactToastify.css';looked up by `key` from the fetched map. */
+export interface ConnectedAppCredential {
+    /** Key used to read the value out of the fetched credentials map. */
+    key: string;
+    /** Human-readable label rendered above the value. */
+    label: string;
+}
+export interface ConnectedAppDialogProps {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Called when the dialog requests to close (cross / overlay / escape). */
+    onClose: () => void;
+    /** App name, shown as the title and used in default copy. */
+    name: string;
+    /** App logo URL. */
+    logoUrl?: string;
+    /** App description shown under the title. */
+    description?: string;
+    /** Support email shown in the contact row. Ignored when `supportLink` is set. */
+    supportEmail?: string;
+    /** When set, the contact row renders this link instead of `supportEmail`. */
+    supportLink?: {
+        text: string;
+        url: string;
+    };
+    /** Overflow-menu options. The menu is hidden when this is empty/omitted. */
+    menuOptions?: ConnectedAppMenuOption[];
+    /**
+     * Credential rows to display. When present (non-empty), the dialog renders the
+     * "Account details" section and calls `fetchCredentials` on open. When absent,
+     * the dialog renders the connected success state instead.
+     */
+    credentials?: ConnectedAppCredential[];
+    /**
+     * Resolves the credential values as a `{ [key]: value }` map. Called once when the
+     * dialog opens (and `credentials` is non-empty). A loading skeleton shows until it resolves.
+     */
+    fetchCredentials?: () => Promise<Record<string, string>>;
+    /** Heading for the connected success state. Defaults to `Your account is connected to ${name}`. */
+    connectedMessage?: string;
+    /** Optional UI rendered below the success state (e.g. an activate/status area). */
+    statusSection?: React.ReactNode;
+    /** Optional text button pinned at the bottom of the right column. */
+    footerButton?: {
+        text: string;
+        onClick: () => void;
+    };
+    /** Dialog width. @default '70%' */
+    width?: string;
+    /** Dialog height. @default '71%' */
+    height?: string;
+    /** Test hook forwarded to the underlying modal. */
+    'data-test'?: string;
+}

package/dist/esm/components/country-code-picker/CountryCodePicker.d.ts

@@ -2,7 +2,7 @@ import { Placement, PositioningStrategy } from '@popperjs/core';
 import { default as React } from 'react';
 import { CountryCode } from './CountryCodePicker.modal';
 export declare const CountryCodePicker: React.FC<{
-    version: '1.0' | '2.0' | '3.0';
+    version: '1.0' | '2.0';
     onCountrySelect: (country: CountryCode) => void;
     selectedCountry: CountryCode;
     popoverWidth?: string;

package/dist/esm/components/country-code-picker/CountryCodePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' | '2.0' | '3.0';\n\tonCountrySelect: (country: CountryCode) => void;\n\tselectedCountry: CountryCode;\n\tpopoverWidth?: string;\n\theight?: string;\n\tplacement?: Placement;\n\tplacementStrategy?: PositioningStrategy;\n\tdisabled?: boolean;\n\thideFlagImage?: boolean;\n\tcontainerStyles?: React.CSSProperties;\n\tcodeColor?: string;\n\tdialColor?: string;\n\tcountryTextStyle?: React.CSSProperties;\n\tonDropdownClick?: () => void;\n}> = (props) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<{\n\t\tname: string;\n\t\tdial: string;\n\t\tcode: string;\n\t}>(\n\t\tprops.selectedCountry ?? {\n\t\t\tname: 'India',\n\t\t\tdial: '+91',\n\t\t\tcode: 'IN',\n\t\t},\n\t);\n\tconst selectedFlag = `https://flagcdn.com/${selectedCountry.code?.toLowerCase()}.svg`;\n\n\tuseEffect(() => {\n\t\tif (props.selectedCountry) {\n\t\t\tsetSelectedCountry(props.selectedCountry);\n\t\t}\n\t}, [props.selectedCountry?.code]);\n\n\tconst getCountryOptions = (): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.dial,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryPickerOption>\n\t\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={flag}\n\t\t\t\t\t\t\t\tclassName=\"country-flag__option\"\n\t\t\t\t\t\t\t\talt={country.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.codeColor ?? COLORS.text.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.code}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{'  '}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.dialColor ?? COLORS.text.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.dial}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</StyledCountryPickerOption>\n\t\t\t\t),\n\t\t\t\tselected: selectedCountry.code === country.code,\n\t\t\t};\n\t\t});\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={props.version}\n\t\t\tisSearchable\n\t\t\twidth={props.popoverWidth ?? '200px'}\n\t\t\tplacement={props.placement ?? 'bottom-start'}\n\t\t\tstrategy={props.placementStrategy ?? 'absolute'}\n\t\t\toptions={getCountryOptions()}\n\t\t\tdisabled={props.disabled}\n\t\t\tonSelect={(option) => {\n\t\t\t\tconst matchingOption = CountriesData.filter(\n\t\t\t\t\t(country) => country.code === (option as SingleOption).value,\n\t\t\t\t);\n\t\t\t\tsetSelectedCountry(matchingOption[0]);\n\t\t\t\tprops.onCountrySelect(matchingOption[0]);\n\t\t\t}}\n\t\t>\n\t\t\t<StyledCountryPickerWrapper\n\t\t\t\theight={props.height}\n\t\t\t\tstyle={props.containerStyles}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log('hello');\n\t\t\t\t\tprops.onDropdownClick?.();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\tclassName=\"country-flag__selected-option\"\n\t\t\t\t\t\t\talt={selectedCountry.name}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t{selectedCountry.dial}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t<DownIcon width={24} height={24} color={COLORS.content.primary} />\n\t\t\t</StyledCountryPickerWrapper>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryCodePicker","props","selectedCountry","setSelectedCountry","useState","selectedFlag","useEffect","getCountryOptions","CountriesData","country","flag","StyledCountryPickerOption","jsx","BodySecondary","COLORS","DropdownPopover","option","matchingOption","jsxs","StyledCountryPickerWrapper","DownIcon"],"mappings":"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"}
+{"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' | '2.0';\n\tonCountrySelect: (country: CountryCode) => void;\n\tselectedCountry: CountryCode;\n\tpopoverWidth?: string;\n\theight?: string;\n\tplacement?: Placement;\n\tplacementStrategy?: PositioningStrategy;\n\tdisabled?: boolean;\n\thideFlagImage?: boolean;\n\tcontainerStyles?: React.CSSProperties;\n\tcodeColor?: string;\n\tdialColor?: string;\n\tcountryTextStyle?: React.CSSProperties;\n\tonDropdownClick?: () => void;\n}> = (props) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<{\n\t\tname: string;\n\t\tdial: string;\n\t\tcode: string;\n\t}>(\n\t\tprops.selectedCountry ?? {\n\t\t\tname: 'India',\n\t\t\tdial: '+91',\n\t\t\tcode: 'IN',\n\t\t},\n\t);\n\tconst selectedFlag = `https://flagcdn.com/${selectedCountry.code?.toLowerCase()}.svg`;\n\n\tuseEffect(() => {\n\t\tif (props.selectedCountry) {\n\t\t\tsetSelectedCountry(props.selectedCountry);\n\t\t}\n\t}, [props.selectedCountry?.code]);\n\n\tconst getCountryOptions = (): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.dial,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryPickerOption>\n\t\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={flag}\n\t\t\t\t\t\t\t\tclassName=\"country-flag__option\"\n\t\t\t\t\t\t\t\talt={country.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.codeColor ?? COLORS.text.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.code}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{'  '}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.dialColor ?? COLORS.text.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.dial}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</StyledCountryPickerOption>\n\t\t\t\t),\n\t\t\t\tselected: selectedCountry.code === country.code,\n\t\t\t};\n\t\t});\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={props.version}\n\t\t\tisSearchable\n\t\t\twidth={props.popoverWidth ?? '200px'}\n\t\t\tplacement={props.placement ?? 'bottom-start'}\n\t\t\tstrategy={props.placementStrategy ?? 'absolute'}\n\t\t\toptions={getCountryOptions()}\n\t\t\tdisabled={props.disabled}\n\t\t\tonSelect={(option) => {\n\t\t\t\tconst matchingOption = CountriesData.filter(\n\t\t\t\t\t(country) => country.code === (option as SingleOption).value,\n\t\t\t\t);\n\t\t\t\tsetSelectedCountry(matchingOption[0]);\n\t\t\t\tprops.onCountrySelect(matchingOption[0]);\n\t\t\t}}\n\t\t>\n\t\t\t<StyledCountryPickerWrapper\n\t\t\t\theight={props.height}\n\t\t\t\tstyle={props.containerStyles}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log('hello');\n\t\t\t\t\tprops.onDropdownClick?.();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\tclassName=\"country-flag__selected-option\"\n\t\t\t\t\t\t\talt={selectedCountry.name}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t{selectedCountry.dial}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t<DownIcon width={24} height={24} color={COLORS.content.primary} />\n\t\t\t</StyledCountryPickerWrapper>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryCodePicker","props","selectedCountry","setSelectedCountry","useState","selectedFlag","useEffect","getCountryOptions","CountriesData","country","flag","StyledCountryPickerOption","jsx","BodySecondary","COLORS","DropdownPopover","option","matchingOption","jsxs","StyledCountryPickerWrapper","DownIcon"],"mappings":"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"}

package/dist/esm/components/country-code-picker/CountryPicker.d.ts

@@ -8,7 +8,7 @@ export interface CountryPickerProps {
     /**
      * Version of the dropdown popover to use
      */
-    version: '1.0' | '2.0' | '3.0';
+    version: '1.0' | '2.0';
     /**
      * Callback function when a country is selected
      */

package/dist/esm/components/country-code-picker/CountryPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/**\n * Props for the CountryPicker component\n */\nexport interface CountryPickerProps {\n\t/**\n\t * Version of the dropdown popover to use\n\t */\n\tversion: '1.0' | '2.0' | '3.0';\n\t/**\n\t * Callback function when a country is selected\n\t */\n\tonCountrySelect: (country: CountryCode) => void;\n\t/**\n\t * Currently selected country\n\t */\n\tselectedCountry?: CountryCode;\n\t/**\n\t * Width of the popover dropdown\n\t * @default \"300px\"\n\t */\n\tpopoverWidth?: string;\n\t/**\n\t * Height of the picker container\n\t */\n\theight?: string;\n\t/**\n\t * Placement of the dropdown relative to the trigger\n\t * @default \"bottom-start\"\n\t */\n\tplacement?: Placement;\n\t/**\n\t * Positioning strategy for the dropdown\n\t * @default \"absolute\"\n\t */\n\tplacementStrategy?: PositioningStrategy;\n\t/**\n\t * Whether the picker is disabled\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Whether to hide the flag image\n\t * @default false\n\t */\n\thideFlagImage?: boolean;\n\t/**\n\t * Custom styles for the container\n\t */\n\tcontainerStyles?: React.CSSProperties;\n\t/**\n\t * Placeholder text when no country is selected\n\t * @default \"Select a country\"\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Whether to show country code alongside name\n\t * @default true\n\t */\n\tshowCountryCode?: boolean;\n\t/**\n\t * Custom text style for the country name\n\t */\n\tcountryTextStyle?: React.CSSProperties;\n\t/**\n\t * Callback when dropdown is clicked\n\t */\n\tonDropdownClick?: () => void;\n}\n\nexport const CountryPicker: React.FC<CountryPickerProps> = ({\n\tversion,\n\tonCountrySelect,\n\tselectedCountry,\n\tpopoverWidth = '300px',\n\theight,\n\tplacement = 'bottom-start',\n\tplacementStrategy = 'absolute',\n\tdisabled = false,\n\thideFlagImage = false,\n\tcontainerStyles,\n\tplaceholder = 'Select a country',\n\tshowCountryCode = true,\n\tcountryTextStyle,\n\tonDropdownClick,\n}) => {\n\tconst [internalSelectedCountry, setInternalSelectedCountry] = useState<\n\t\tCountryCode | undefined\n\t>(selectedCountry);\n\n\t// Derive the current selected country (controlled vs uncontrolled)\n\tconst currentCountry = selectedCountry ?? internalSelectedCountry;\n\n\tconst selectedFlag = currentCountry\n\t\t? `https://flagcdn.com/${currentCountry.code?.toLowerCase()}.svg`\n\t\t: undefined;\n\n\tconst getCountryOptions = useMemo((): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.name,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryOption>\n\t\t\t\t\t\t{!hideFlagImage && (\n\t\t\t\t\t\t\t<img src={flag} className=\"country-flag\" alt={country.name} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"country-info\">\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\n\t\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t{showCountryCode && (\n\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{country.code}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</StyledCountryOption>\n\t\t\t\t),\n\t\t\t\tselected: currentCountry?.code === country.code,\n\t\t\t};\n\t\t});\n\t}, [currentCountry?.code, hideFlagImage, showCountryCode, countryTextStyle]);\n\n\tconst handleCountrySelect = (option: SingleOption) => {\n\t\tconst matchingCountry = CountriesData.find(\n\t\t\t(country) => country.code === option.value,\n\t\t);\n\t\tif (matchingCountry) {\n\t\t\t// Only update internal state if in uncontrolled mode\n\t\t\tif (selectedCountry === undefined) {\n\t\t\t\tsetInternalSelectedCountry(matchingCountry);\n\t\t\t}\n\t\t\tonCountrySelect(matchingCountry);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={version}\n\t\t\tisSearchable\n\t\t\twidth={popoverWidth}\n\t\t\tplacement={placement}\n\t\t\tstrategy={placementStrategy}\n\t\t\toptions={getCountryOptions}\n\t\t\tdisabled={disabled}\n\t\t\tonSelect={(option) => handleCountrySelect(option as SingleOption)}\n\t\t>\n\t\t\t<StyledCountryPickerContainer\n\t\t\t\theight={height}\n\t\t\t\tstyle={containerStyles}\n\t\t\t\tonClick={onDropdownClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{currentCountry ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!hideFlagImage && selectedFlag && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\t\t\tclassName=\"country-flag\"\n\t\t\t\t\t\t\t\t\talt={currentCountry.name}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<BodySecondary style={countryTextStyle}>\n\t\t\t\t\t\t\t\t{currentCountry.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.text.disabled,\n\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<DownIcon\n\t\t\t\t\twidth={24}\n\t\t\t\t\theight={24}\n\t\t\t\t\tcolor={disabled ? COLORS.text.disabled : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</StyledCountryPickerContainer>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryPicker","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","getCountryOptions","useMemo","CountriesData","country","flag","StyledCountryOption","jsxs","jsx","BodySecondary","COLORS","handleCountrySelect","option","matchingCountry","DropdownPopover","StyledCountryPickerContainer","Fragment","DownIcon"],"mappings":"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"}
+{"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/**\n * Props for the CountryPicker component\n */\nexport interface CountryPickerProps {\n\t/**\n\t * Version of the dropdown popover to use\n\t */\n\tversion: '1.0' | '2.0';\n\t/**\n\t * Callback function when a country is selected\n\t */\n\tonCountrySelect: (country: CountryCode) => void;\n\t/**\n\t * Currently selected country\n\t */\n\tselectedCountry?: CountryCode;\n\t/**\n\t * Width of the popover dropdown\n\t * @default \"300px\"\n\t */\n\tpopoverWidth?: string;\n\t/**\n\t * Height of the picker container\n\t */\n\theight?: string;\n\t/**\n\t * Placement of the dropdown relative to the trigger\n\t * @default \"bottom-start\"\n\t */\n\tplacement?: Placement;\n\t/**\n\t * Positioning strategy for the dropdown\n\t * @default \"absolute\"\n\t */\n\tplacementStrategy?: PositioningStrategy;\n\t/**\n\t * Whether the picker is disabled\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Whether to hide the flag image\n\t * @default false\n\t */\n\thideFlagImage?: boolean;\n\t/**\n\t * Custom styles for the container\n\t */\n\tcontainerStyles?: React.CSSProperties;\n\t/**\n\t * Placeholder text when no country is selected\n\t * @default \"Select a country\"\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Whether to show country code alongside name\n\t * @default true\n\t */\n\tshowCountryCode?: boolean;\n\t/**\n\t * Custom text style for the country name\n\t */\n\tcountryTextStyle?: React.CSSProperties;\n\t/**\n\t * Callback when dropdown is clicked\n\t */\n\tonDropdownClick?: () => void;\n}\n\nexport const CountryPicker: React.FC<CountryPickerProps> = ({\n\tversion,\n\tonCountrySelect,\n\tselectedCountry,\n\tpopoverWidth = '300px',\n\theight,\n\tplacement = 'bottom-start',\n\tplacementStrategy = 'absolute',\n\tdisabled = false,\n\thideFlagImage = false,\n\tcontainerStyles,\n\tplaceholder = 'Select a country',\n\tshowCountryCode = true,\n\tcountryTextStyle,\n\tonDropdownClick,\n}) => {\n\tconst [internalSelectedCountry, setInternalSelectedCountry] = useState<\n\t\tCountryCode | undefined\n\t>(selectedCountry);\n\n\t// Derive the current selected country (controlled vs uncontrolled)\n\tconst currentCountry = selectedCountry ?? internalSelectedCountry;\n\n\tconst selectedFlag = currentCountry\n\t\t? `https://flagcdn.com/${currentCountry.code?.toLowerCase()}.svg`\n\t\t: undefined;\n\n\tconst getCountryOptions = useMemo((): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.name,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryOption>\n\t\t\t\t\t\t{!hideFlagImage && (\n\t\t\t\t\t\t\t<img src={flag} className=\"country-flag\" alt={country.name} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"country-info\">\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\n\t\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t{showCountryCode && (\n\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{country.code}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</StyledCountryOption>\n\t\t\t\t),\n\t\t\t\tselected: currentCountry?.code === country.code,\n\t\t\t};\n\t\t});\n\t}, [currentCountry?.code, hideFlagImage, showCountryCode, countryTextStyle]);\n\n\tconst handleCountrySelect = (option: SingleOption) => {\n\t\tconst matchingCountry = CountriesData.find(\n\t\t\t(country) => country.code === option.value,\n\t\t);\n\t\tif (matchingCountry) {\n\t\t\t// Only update internal state if in uncontrolled mode\n\t\t\tif (selectedCountry === undefined) {\n\t\t\t\tsetInternalSelectedCountry(matchingCountry);\n\t\t\t}\n\t\t\tonCountrySelect(matchingCountry);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={version}\n\t\t\tisSearchable\n\t\t\twidth={popoverWidth}\n\t\t\tplacement={placement}\n\t\t\tstrategy={placementStrategy}\n\t\t\toptions={getCountryOptions}\n\t\t\tdisabled={disabled}\n\t\t\tonSelect={(option) => handleCountrySelect(option as SingleOption)}\n\t\t>\n\t\t\t<StyledCountryPickerContainer\n\t\t\t\theight={height}\n\t\t\t\tstyle={containerStyles}\n\t\t\t\tonClick={onDropdownClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{currentCountry ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!hideFlagImage && selectedFlag && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\t\t\tclassName=\"country-flag\"\n\t\t\t\t\t\t\t\t\talt={currentCountry.name}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<BodySecondary style={countryTextStyle}>\n\t\t\t\t\t\t\t\t{currentCountry.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.text.disabled,\n\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<DownIcon\n\t\t\t\t\twidth={24}\n\t\t\t\t\theight={24}\n\t\t\t\t\tcolor={disabled ? COLORS.text.disabled : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</StyledCountryPickerContainer>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryPicker","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","getCountryOptions","useMemo","CountriesData","country","flag","StyledCountryOption","jsxs","jsx","BodySecondary","COLORS","handleCountrySelect","option","matchingCountry","DropdownPopover","StyledCountryPickerContainer","Fragment","DownIcon"],"mappings":"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"}

package/dist/esm/components/dropdown/Dropdown.d.ts

@@ -19,7 +19,5 @@ export type DropdownProps = OpenDropdownProps & {
     backgroundColor?: string;
     value?: string;
     showSelected?: boolean;
-    /** Fired when the dropdown opens/closes. Runs alongside internal open state. */
-    onDropdownVisbilityChange?: (isOpen: boolean) => void;
 };
 export declare const Dropdown: React.FC<DropdownProps>;