@phillips/seldon 1.175.0 → 1.176.0

package/dist/index.d.ts

@@ -90,5 +90,6 @@ export * from './patterns/BidSnapshot';
 export * from './patterns/FilterMenu';
 export * from './patterns/ObjectTile';
 export * from './utils/hooks';
+export * from './patterns/CountryPicker';
 export * from './components/DescriptiveRadioButton';
 export * from './components/DescriptiveRadioButtonGroup';

package/dist/index.js

@@ -1,9 +1,9 @@
-import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as c, useNormalizedInputProps as g } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
-import { SSRMediaQuery as B, ssrMediaQueryStyle as P } from "./providers/SeldonProvider/utils.js";
+import { SSRMediaQuery as P, ssrMediaQueryStyle as B } from "./providers/SeldonProvider/utils.js";
 import { usePendingState as A } from "./utils/hooks.js";
-import { AuctionStatus as V, LotStatus as b, SupportedLanguages as v } from "./types/commonTypes.js";
-import { default as h } from "./components/Button/Button.js";
+import { AuctionStatus as V, LotStatus as b, SupportedLanguages as y } from "./types/commonTypes.js";
+import { default as v } from "./components/Button/Button.js";
 import { ButtonVariants as w } from "./components/Button/types.js";
 import { default as F } from "./components/IconButton/IconButton.js";
 import { default as M } from "./components/Accordion/Accordion.js";
@@ -25,14 +25,14 @@ import { default as de } from "./components/ContentPeek/ContentPeek.js";
 import { HeightUnits as pe } from "./components/ContentPeek/utils.js";
 import { default as ie } from "./components/Detail/Detail.js";
 import { default as ne } from "./components/Drawer/Drawer.js";
-import { default as ce } from "./components/Dropdown/Dropdown.js";
+import { default as ge } from "./components/Dropdown/Dropdown.js";
 import { default as Ce } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as Be } from "./components/Grid/Grid.js";
+import { default as Pe } from "./components/Grid/Grid.js";
 import { default as Ie } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as Le } from "./components/GridItem/types.js";
 import { default as be } from "./components/Input/Input.js";
-import { default as ye } from "./components/Link/Link.js";
-import { LinkVariants as ke } from "./components/Link/types.js";
+import { default as ke } from "./components/Link/Link.js";
+import { LinkVariants as he } from "./components/Link/types.js";
 import { default as De } from "./components/LinkBlock/LinkBlock.js";
 import { default as He } from "./components/LinkList/LinkList.js";
 import { default as Ne } from "./components/Modal/Modal.js";
@@ -51,14 +51,14 @@ import { default as st } from "./components/SplitPanel/SplitPanel.js";
 import { default as dt } from "./components/Tabs/TabsContainer.js";
 import { default as pt } from "./components/Tabs/TabsContent.js";
 import { Tag as it, default as xt } from "./components/Tags/Tags.js";
-import { TextAlignments as gt, TextVariants as ct } from "./components/Text/types.js";
+import { TextAlignments as ct, TextVariants as gt } from "./components/Text/types.js";
 import { default as Ct } from "./components/Text/Text.js";
-import { TextSymbolVariants as Bt } from "./components/TextSymbol/types.js";
+import { TextSymbolVariants as Pt } from "./components/TextSymbol/types.js";
 import { default as It } from "./components/TextSymbol/TextSymbol.js";
 import { default as Lt } from "./components/Video/Video.js";
 import { default as bt } from "./patterns/DetailList/DetailList.js";
-import { DetailListAlignment as yt } from "./patterns/DetailList/types.js";
-import { default as kt } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
+import { DetailListAlignment as kt } from "./patterns/DetailList/types.js";
+import { default as ht } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
 import { default as Dt } from "./patterns/HeroBanner/HeroBanner.js";
 import { default as Ht } from "./patterns/LanguageSelector/LanguageSelector.js";
 import { default as Nt } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
@@ -77,14 +77,14 @@ import { default as so } from "./components/ExitGateCard/ExitGateCard.js";
 import { default as mo } from "./components/Loader/Loader.js";
 import { default as uo } from "./components/PageContentWrapper/PageContentWrapper.js";
 import { default as xo } from "./components/PhoneNumberPicker/PhoneNumberPicker.js";
-import { default as go } from "./patterns/FiltersInline/FiltersInline.js";
+import { default as co } from "./patterns/FiltersInline/FiltersInline.js";
 import { FilterButtonIconType as So, FilterButtonType as Co } from "./patterns/FiltersInline/types.js";
-import { default as Bo } from "./patterns/SaleCard/SaleCard.js";
+import { default as Po } from "./patterns/SaleCard/SaleCard.js";
 import { SaleCardActions as Io } from "./patterns/SaleCard/SaleCardActions.js";
 import { SaleCardVariants as Lo } from "./patterns/SaleCard/types.js";
 import { default as bo } from "./patterns/ViewingDetails/ViewingDetails.js";
-import { default as yo } from "./components/ProgressIndicator/ProgressIndicator.js";
-import { default as ko } from "./site-furniture/Footer/Footer.js";
+import { default as ko } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { default as ho } from "./site-furniture/Footer/Footer.js";
 import { default as Do } from "./site-furniture/Header/Header.js";
 import { default as Ho } from "./components/AddToCalendar/AddToCalendar.js";
 import { default as No } from "./components/Article/Article.js";
@@ -103,11 +103,12 @@ import { useToast as sr } from "./components/Toast/useToast.js";
 import { default as dr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
 import { default as pr } from "./patterns/BidSnapshot/BidSnapshot.js";
 import { default as ir } from "./patterns/BidSnapshot/BidMessage.js";
-import { BidMessageVariants as nr, BidStatusEnum as gr } from "./patterns/BidSnapshot/types.js";
+import { BidMessageVariants as nr, BidStatusEnum as cr } from "./patterns/BidSnapshot/types.js";
 import { default as Sr } from "./patterns/FilterMenu/FilterMenu.js";
 import { default as Tr } from "./patterns/ObjectTile/ObjectTile.js";
-import { default as Pr } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
-import { default as Ar } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
+import { default as Br } from "./patterns/CountryPicker/CountryPicker.js";
+import { default as Ar } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
+import { default as Vr } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
 export {
   M as Accordion,
   E as AccordionItem,
@@ -121,9 +122,9 @@ export {
   ir as BidMessage,
   nr as BidMessageVariants,
   pr as BidSnapshot,
-  gr as BidStatusEnum,
+  cr as BidStatusEnum,
   Q as Breadcrumb,
-  h as Button,
+  v as Button,
   w as ButtonVariants,
   Y as Carousel,
   q as CarouselArrows,
@@ -139,17 +140,18 @@ export {
   pe as ContentPeekHeightUnits,
   Go as Countdown,
   Uo as CountdownVariants,
-  Pr as DescriptiveRadioButton,
-  Ar as DescriptiveRadioButtonGroup,
+  Br as CountryPicker,
+  Ar as DescriptiveRadioButton,
+  Vr as DescriptiveRadioButtonGroup,
   ie as Detail,
   bt as DetailList,
-  yt as DetailListAlignment,
+  kt as DetailListAlignment,
   Qo as Divider,
   ne as Drawer,
-  ce as Dropdown,
+  ge as Dropdown,
   Ce as ErrorBoundary,
   so as ExitGateCard,
-  kt as FavoritesCollectionTile,
+  ht as FavoritesCollectionTile,
   zo as FavoritingTileButton,
   Yo as Filter,
   So as FilterButtonIconType,
@@ -157,9 +159,9 @@ export {
   Ko as FilterHeader,
   qo as FilterInput,
   Sr as FilterMenu,
-  go as FiltersInline,
-  ko as Footer,
-  Be as Grid,
+  co as FiltersInline,
+  ho as Footer,
+  Pe as Grid,
   Ie as GridItem,
   Le as GridItemAlign,
   Do as Header,
@@ -168,10 +170,10 @@ export {
   F as IconButton,
   be as Input,
   Ht as LanguageSelector,
-  ye as Link,
+  ke as Link,
   De as LinkBlock,
   He as LinkList,
-  ke as LinkVariants,
+  he as LinkVariants,
   mo as Loader,
   b as LotStatus,
   Ne as Modal,
@@ -187,10 +189,10 @@ export {
   xo as PhoneNumberPicker,
   _o as Pictogram,
   qe as PinchZoom,
-  yo as ProgressIndicator,
+  ko as ProgressIndicator,
   Ke as Row,
-  B as SSRMediaQuery,
-  Bo as SaleCard,
+  P as SSRMediaQuery,
+  Po as SaleCard,
   Io as SaleCardActions,
   Lo as SaleCardVariants,
   Nt as SaleHeaderBanner,
@@ -206,17 +208,17 @@ export {
   Kt as StatefulViewingsList,
   Qt as Subscribe,
   zt as SubscriptionState,
-  v as SupportedLanguages,
+  y as SupportedLanguages,
   dt as TabsContainer,
   pt as TabsContent,
   it as Tag,
   xt as TagsList,
   Ct as Text,
-  gt as TextAlignments,
+  ct as TextAlignments,
   er as TextArea,
-  Bt as TextSymbolVariants,
+  Pt as TextSymbolVariants,
   It as TextSymbols,
-  ct as TextVariants,
+  gt as TextVariants,
   or as Toast,
   ar as ToastProvider,
   qt as UserManagement,
@@ -232,9 +234,9 @@ export {
   i as generatePaddingClassName,
   x as getCommonProps,
   n as noOp,
-  g as px,
-  P as ssrMediaQueryStyle,
-  c as useNormalizedInputProps,
+  c as px,
+  B as ssrMediaQueryStyle,
+  g as useNormalizedInputProps,
   A as usePendingState,
   sr as useToast
 };

package/dist/patterns/CountryPicker/CountryPicker.d.ts

@@ -0,0 +1,14 @@
+import { CountryPickerTriggerProps } from './CountryPickerTrigger';
+import { CountryPickerModalProps } from './CountryPickerModal';
+import { CommonProps, PrependTrigger, PhoneConfig, CountryConfig } from './types';
+/**
+ * Props for the CountryPicker component.
+ * Combines:
+ * - CommonProps (excluding variantConfig, which is provided by PhoneConfig or CountryConfig)
+ * - Discriminated union for picker mode (PhoneConfig | CountryConfig)
+ * - Modal props
+ * - PrependTrigger utility for trigger props
+ */
+export type CountryPickerProps = Omit<CommonProps, 'variantConfig'> & (PhoneConfig | CountryConfig) & CountryPickerModalProps & PrependTrigger<Omit<CountryPickerTriggerProps, 'baseClassName'>>;
+declare const CountryPicker: import('react').ForwardRefExoticComponent<CountryPickerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default CountryPicker;

package/dist/patterns/CountryPicker/CountryPicker.js

@@ -0,0 +1,71 @@
+import { jsxs as h, Fragment as v, jsx as e } from "react/jsx-runtime";
+import { forwardRef as N, useState as j } from "react";
+import M from "./CountryPickerTrigger.js";
+import O from "./CountryPickerModal.js";
+import { getCommonProps as T } from "../../utils/index.js";
+import { toConfig as m } from "./types.js";
+const w = N(
+  ({
+    triggerLabelText: l,
+    hasTriggerError: c,
+    triggerErrorMsg: u,
+    triggerDisplayValue: f,
+    modalTitle: p,
+    searchInputLabel: d,
+    searchInputPlaceholder: C,
+    selectButtonLabel: y,
+    inputName: o,
+    baseClassName: k = "CountryPicker",
+    value: t,
+    onChange: s,
+    isPhone: P,
+    ...a
+  }, g) => {
+    const [x, i] = j(!1), { className: n } = T(a, k), b = {
+      modalTitle: p,
+      searchInputLabel: d,
+      searchInputPlaceholder: C,
+      selectButtonLabel: y,
+      inputName: o,
+      ...a
+    }, r = P ? m(!0, t, s) : m(!1, t, s);
+    return /* @__PURE__ */ h(v, { children: [
+      /* @__PURE__ */ e(
+        M,
+        {
+          ref: g,
+          labelText: l,
+          displayValue: f,
+          onClick: () => i(!0),
+          hasError: c,
+          errorMsg: u,
+          variantConfig: r,
+          baseClassName: n
+        }
+      ),
+      /* @__PURE__ */ e(
+        O,
+        {
+          ...b,
+          isOpen: x,
+          onClose: () => i(!1),
+          variantConfig: r,
+          baseClassName: n
+        }
+      ),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "hidden",
+          name: o || "value",
+          value: r.value ?? "",
+          "data-testid": "country-picker-hidden-input"
+        }
+      )
+    ] });
+  }
+);
+w.displayName = "CountryPicker";
+export {
+  w as default
+};

package/dist/patterns/CountryPicker/CountryPicker.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/react';
+import { default as CountryPicker, CountryPickerProps } from './CountryPicker';
+declare const meta: Meta<typeof CountryPicker>;
+export default meta;
+export declare const Playground: {
+    (props: CountryPickerProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        modalTitle: string;
+        searchLabel: string;
+        searchPlaceholder: string;
+        selectButtonLabel: string;
+    };
+};
+export declare const CountryPhoneCodePicker: (props: CountryPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/CountryPicker/CountryPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/patterns/CountryPicker/CountryPickerCountryList.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { CommonProps, Country } from './types';
+/**
+ * Props for the country list in the picker modal.
+ * Includes prioritized and grouped countries, styling, and refs for keyboard navigation.
+ */
+type CountryPickerCountryListProps = CommonProps & {
+    /**
+     * List of prioritized countries to display first (e.g., US, GB).
+     */
+    filteredPrioritized: Country[];
+    /**
+     * Grouped countries by first letter for display with headers.
+     */
+    groupedCountries: Record<string, Country[]>;
+    /**
+     * Base class name for styling.
+     */
+    baseClassName?: string;
+    /**
+     * Title for the modal, used for aria-label.
+     */
+    modalTitle: string;
+    /**
+     * Ref to the list container for keyboard navigation.
+     */
+    listRef: React.RefObject<HTMLDivElement>;
+    /**
+     * Name attribute for radio inputs.
+     */
+    inputName: string;
+};
+export declare const CountryPickerCountryList: ({ filteredPrioritized, groupedCountries, baseClassName, modalTitle, listRef, variantConfig, inputName, }: CountryPickerCountryListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/patterns/CountryPicker/CountryPickerCountryList.js

@@ -0,0 +1,66 @@
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import x from "../../components/Text/Text.js";
+import { TextVariants as k } from "../../components/Text/types.js";
+import { CountryPickerOption as v } from "./CountryPickerOption.js";
+const j = ({
+  filteredPrioritized: y,
+  groupedCountries: f,
+  baseClassName: e,
+  modalTitle: m,
+  listRef: i,
+  variantConfig: c,
+  inputName: d
+}) => {
+  const { isPhone: p, value: h } = c, s = a(
+    (r) => r.map(({ name: t, code: n }) => /* @__PURE__ */ l(
+      v,
+      {
+        code: n,
+        name: t,
+        isChecked: h === (p ? n : t),
+        inputName: d,
+        baseClassName: e,
+        variantConfig: c
+      },
+      n
+    )),
+    [h, p, d, e, c]
+  ), _ = (r) => {
+    if (!i.current) return;
+    const t = Array.from(i.current.querySelectorAll('input[type="radio"]')), n = t.findIndex((o) => o === document.activeElement);
+    if (r.key === "ArrowDown" || r.key === "ArrowRight") {
+      r.preventDefault();
+      const o = (n + 1) % t.length;
+      t[o]?.focus();
+    } else if (r.key === "ArrowUp" || r.key === "ArrowLeft") {
+      r.preventDefault();
+      const o = (n - 1 + t.length) % t.length;
+      t[o]?.focus();
+    }
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: `${e}__list`,
+      ref: i,
+      tabIndex: -1,
+      onKeyDown: _,
+      role: "radiogroup",
+      "aria-label": m,
+      children: [
+        s(y),
+        Object.entries(f).map(([r, t]) => /* @__PURE__ */ u("div", { className: `${e}__group`, children: [
+          /* @__PURE__ */ u("div", { className: `${e}__letter-header`, children: [
+            /* @__PURE__ */ l(x, { variant: k.heading2, className: `${e}__letter-text`, children: r }),
+            /* @__PURE__ */ l("div", { className: `${e}__letter-line` })
+          ] }),
+          s(t)
+        ] }, r))
+      ]
+    }
+  );
+};
+export {
+  j as CountryPickerCountryList
+};

package/dist/patterns/CountryPicker/CountryPickerCountryList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/patterns/CountryPicker/CountryPickerModal.d.ts

@@ -0,0 +1,24 @@
+export type CountryPickerModalProps = {
+    /**
+     * The title displayed at the top of the modal.
+     */
+    modalTitle: string;
+    /**
+     * The label for the search input field.
+     */
+    searchInputLabel: string;
+    /**
+     * Placeholder text for the search input field.
+     */
+    searchInputPlaceholder: string;
+    /**
+     * Label for the button used to confirm the selection.
+     */
+    selectButtonLabel: string;
+    /**
+     * The name attribute for a hidden input field, if applicable.
+     */
+    inputName?: string;
+};
+declare const CountryPickerModal: import('react').ForwardRefExoticComponent<import('./types').CommonProps & import('./types').ModalStateProps & CountryPickerModalProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CountryPickerModal;

package/dist/patterns/CountryPicker/CountryPickerModal.js

@@ -0,0 +1,117 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as j, useState as S, useEffect as H, useRef as V, useMemo as f } from "react";
+import N from "../../components/Button/Button.js";
+import U from "../../components/Input/Input.js";
+import G from "../../components/Modal/Modal.js";
+import K from "../../components/Text/Text.js";
+import { TextVariants as L } from "../../components/Text/types.js";
+import { countries as v } from "./constants.js";
+import { getSafeCountryCallingCode as O } from "./utils.js";
+import { ButtonVariants as Z } from "../../components/Button/types.js";
+import q from "../../components/Icon/Icon.js";
+import { CountryPickerCountryList as A } from "./CountryPickerCountryList.js";
+const w = ["US", "GB", "HK", "CH"], z = (n, l) => {
+  if (!l) return n;
+  const d = l.replace(/[.*?^${}()|[\]\\]/g, "\\$&").replace(/\+/g, "");
+  if (!d) return n;
+  const i = new RegExp(d, "gi");
+  return n.filter((u) => {
+    const h = u.name, t = u.code, p = O(t).replace(/\+/g, "");
+    return i.test(h) || i.test(t) || i.test(p) || i.test("+" + p);
+  });
+}, J = j(
+  ({
+    isOpen: n = !1,
+    onClose: l,
+    modalTitle: m,
+    searchInputLabel: d,
+    searchInputPlaceholder: i,
+    selectButtonLabel: u,
+    inputName: h = "value",
+    baseClassName: t,
+    variantConfig: _
+  }, p) => {
+    const { value: g, onChange: C, isPhone: E } = _, [c, I] = S(g), x = (e) => v.some((a) => a.code === e);
+    H(() => {
+      I(g);
+    }, [n, g]);
+    const [s, B] = S(""), D = V(null), F = V(null), [P, R] = f(() => {
+      const e = w.map((r) => v.filter(($) => $.code === r)).flat(), a = v.filter((r) => !w.includes(r.code));
+      return [
+        e,
+        // keep original order for prioritized
+        a.sort((r, $) => r.name.localeCompare($.name))
+      ];
+    }, []), M = f(() => z(P, s), [P, s]), k = f(() => z(R, s), [R, s]), T = f(() => {
+      const e = {};
+      return k.forEach((a) => {
+        const r = a.name[0].toUpperCase();
+        e[r] || (e[r] = []), e[r].push(a);
+      }), e;
+    }, [k]);
+    return /* @__PURE__ */ o(
+      G,
+      {
+        isOpen: n,
+        onClose: l,
+        "data-testid": "country-picker-modal",
+        className: `${t}__modal`,
+        ref: p,
+        children: /* @__PURE__ */ y("div", { className: `${t}__wrapper`, children: [
+          /* @__PURE__ */ y("div", { className: `${t}__header`, children: [
+            /* @__PURE__ */ o(K, { variant: L.heading3, className: `${t}__header-text`, children: m }),
+            /* @__PURE__ */ y("div", { className: `${t}__input-wrapper`, children: [
+              /* @__PURE__ */ o("span", { className: `${t}__input-icon`, "aria-hidden": "true", children: /* @__PURE__ */ o(q, { icon: "Search", width: 16, height: 16, color: "currentColor" }) }),
+              /* @__PURE__ */ o(
+                U,
+                {
+                  id: "countrySearch",
+                  type: "search",
+                  labelText: d,
+                  placeholder: i,
+                  value: s,
+                  onChange: (e) => {
+                    B(e.target.value);
+                  },
+                  autoFocus: !0,
+                  className: `${t}__input`
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ o(
+            A,
+            {
+              filteredPrioritized: M,
+              groupedCountries: T,
+              baseClassName: t,
+              modalTitle: m,
+              listRef: F,
+              variantConfig: _,
+              inputName: h
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: `${t}__button-container`, children: /* @__PURE__ */ o(
+            N,
+            {
+              onClick: () => {
+                c && (E ? x(c) && C(c) : x(c) || C(c), l?.());
+              },
+              className: `${t}__button`,
+              "data-testid": "country-picker-modal-select-button",
+              ref: D,
+              type: "button",
+              variant: Z.secondary,
+              isDisabled: !c,
+              children: u
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+J.displayName = "CountryPickerModal";
+export {
+  J as default
+};

package/dist/patterns/CountryPicker/CountryPickerModal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/patterns/CountryPicker/CountryPickerOption.d.ts

@@ -0,0 +1,20 @@
+import { Country, ModalBaseProps } from './types';
+/**
+ * Props for a single country option in the picker.
+ * Extends Country and adds selection state and input name.
+ */
+export type CountryPickerOptionProps = Country & {
+    /**
+     * Indicates whether the option is currently selected.
+     */
+    isChecked: boolean;
+    /**
+     * The name attribute for the input element.
+     */
+    inputName: string;
+};
+/**
+ * Renders a single country option for selection.
+ * Handles both country and phone picker modes via discriminated union.
+ */
+export declare const CountryPickerOption: ({ code, name, isChecked, inputName, baseClassName, variantConfig, }: ModalBaseProps & CountryPickerOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/CountryPicker/CountryPickerOption.js

@@ -0,0 +1,62 @@
+import { jsxs as _, jsx as p } from "react/jsx-runtime";
+import $ from "../../components/Text/Text.js";
+import { TextVariants as d } from "../../components/Text/types.js";
+import e from "../../node_modules/classnames/index.js";
+import { getSafeCountryCallingCode as g } from "./utils.js";
+const v = ({
+  code: t,
+  name: n,
+  isChecked: r,
+  inputName: f,
+  baseClassName: o,
+  variantConfig: h
+}) => {
+  const c = `${o}__radio-${t}`, { isPhone: i, onChange: l } = h;
+  return /* @__PURE__ */ _(
+    "label",
+    {
+      htmlFor: c,
+      className: e(`${o}__option`, {
+        [`${o}__option--selected`]: r,
+        [`${o}__option--is-phone`]: i
+      }),
+      "aria-label": i ? `${n} +${g(t)}` : n,
+      children: [
+        /* @__PURE__ */ p(
+          "input",
+          {
+            type: "radio",
+            id: c,
+            name: f,
+            checked: r,
+            className: e(`${o}__radio`, {
+              [`${o}__radio--selected`]: r,
+              [`${o}__radio--visually-hidden`]: i
+            }),
+            onChange: () => {
+              l(i ? t : n);
+            }
+          }
+        ),
+        /* @__PURE__ */ _("span", { className: `${o}__option-content`, children: [
+          /* @__PURE__ */ p($, { variant: d.string2, className: `${o}__option-name`, children: n }),
+          i && /* @__PURE__ */ _($, { variant: d.string2, className: `${o}__option-code`, children: [
+            "+",
+            g(t)
+          ] })
+        ] }),
+        /* @__PURE__ */ p(
+          "img",
+          {
+            src: `https://flagcdn.com/24x18/${t.toLowerCase()}.png`,
+            alt: `${n} flag`,
+            className: `${o}__option-flag`
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  v as CountryPickerOption
+};

package/dist/patterns/CountryPicker/CountryPickerOption.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/patterns/CountryPicker/CountryPickerTrigger.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export type CountryPickerTriggerProps = {
+    /**
+     * The label text displayed above the button.
+     */
+    labelText: string;
+    /**
+     * The value displayed inside the button (e.g., selected country name or phone code).
+     */
+    displayValue: string;
+    /**
+     * Optional flag to indicate if there is an error.
+     */
+    hasError?: boolean;
+    /**
+     * Optional error message to display when there is an error.
+     */
+    errorMsg?: string;
+};
+declare const CountryPickerTrigger: React.ForwardRefExoticComponent<import('./types').CommonProps & import('./types').ModalStateProps & CountryPickerTriggerProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+export default CountryPickerTrigger;