@phillips/seldon 1.210.1 → 1.210.2

package/dist/components/Countdown/Countdown.stories.d.ts

@@ -39,7 +39,14 @@ export declare const Seconds: {
         };
     };
 };
-export declare const Compact: (props: CountdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Compact: {
+    (props: CountdownProps): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
 export declare const ClosingCountdown: {
     (props: CountdownProps): import("react/jsx-runtime").JSX.Element;
     argTypes: {
@@ -48,4 +55,9 @@ export declare const ClosingCountdown: {
             options: CountdownVariants[];
         };
     };
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
 };

package/dist/components/Text/Text.stories.d.ts

@@ -32,6 +32,11 @@ export declare const TextWithSkeleton: {
         variant: TextVariants;
         isSkeletonLoading: boolean;
     };
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
     argTypes: {
         variant: {
             options: typeof TextVariants;

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

@@ -12,3 +12,7 @@ export declare const Playground: {
     };
 };
 export declare const CountryPhoneCodePicker: (props: CountryPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PreSelectedCountry: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react';
+import { default as CountryPickerModal, CountryPickerModalProps } from './CountryPickerModal';
+import { ModalBaseProps } from './types';
+declare const meta: Meta<typeof CountryPickerModal>;
+export default meta;
+export declare const DefaultOpen: {
+    (props: ModalBaseProps & CountryPickerModalProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        modalTitle: string;
+        searchInputLabel: string;
+        searchInputPlaceholder: string;
+        selectButtonLabel: string;
+        baseClassName: string;
+        isOpen: boolean;
+    };
+};

package/dist/patterns/CountryPicker/CountryPickerOption.js

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

package/dist/patterns/CountryPicker/CountryPickerTrigger.js

@@ -1,9 +1,9 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import y from "../../components/Icon/Icon.js";
 import { TextVariants as k } from "../../components/Text/types.js";
-import P from "../../components/Text/Text.js";
+import w from "../../components/Text/Text.js";
 import t from "../../node_modules/classnames/index.js";
-import { countries as w } from "./constants.js";
+import { countries as P } from "./constants.js";
 import { forwardRef as I } from "react";
 import { useNormalizedInputProps as T, px as b } from "../../utils/index.js";
 const j = I(
@@ -17,17 +17,17 @@ const j = I(
     id: e,
     className: f,
     baseClassName: r,
-    variantConfig: u
-  }, v) => {
-    const { isPhone: a, value: c } = u, n = T({
+    variantConfig: h
+  }, u) => {
+    const { isPhone: c, value: a } = h, n = T({
       id: "country-picker-trigger-input",
       invalid: o,
       invalidText: s,
       type: "text"
-    }), $ = n.invalidId, g = a ? c : w.filter((x) => x.name === c)?.[0]?.code, h = () => n.validation ? n.validation : /* @__PURE__ */ i("p", { className: `${b}-input__validation`, children: " " });
+    }), $ = n.invalidId, g = c ? a : P.filter((x) => x.name === a)?.[0]?.code, v = () => n.validation ? n.validation : /* @__PURE__ */ i("p", { className: `${b}-input__validation`, children: " " });
     return /* @__PURE__ */ d("div", { className: t(`${r}__trigger`, f), children: [
       /* @__PURE__ */ i(
-        P,
+        w,
         {
           variant: k.string2,
           className: t(`${r}__trigger-label`, {
@@ -40,33 +40,34 @@ const j = I(
       /* @__PURE__ */ d(
         "button",
         {
-          ref: v,
+          ref: u,
           type: "button",
           "aria-label": p,
           "aria-invalid": n.invalid,
           "aria-describedby": $,
           className: t(`${r}__trigger-btn`, {
             [`${r}__trigger-btn--error`]: o,
-            [`${r}__trigger-btn--is-phone`]: a
+            [`${r}__trigger-btn--is-phone`]: c
           }),
           onClick: _,
           "data-testid": "country-picker-trigger",
           id: e,
           children: [
-            g && /* @__PURE__ */ i(
+            g && /* @__PURE__ */ i("span", { className: `${r}__trigger-flag`, children: /* @__PURE__ */ i(
               "img",
               {
-                src: `https://flagcdn.com/24x18/${g.toLowerCase()}.png`,
-                alt: `${c} flag`,
-                className: `${r}__trigger-flag`
+                src: `https://flagcdn.com/h20/${g.toLowerCase()}.png`,
+                srcSet: `https://flagcdn.com/h40/${g.toLowerCase()}.png 2x`,
+                alt: `${a} flag`,
+                className: `${r}__trigger-flag-img`
               }
-            ),
+            ) }),
             /* @__PURE__ */ i("span", { className: t(`${r}__trigger-text`), children: m }),
             /* @__PURE__ */ i("span", { className: t(`${r}__trigger-icon`), children: /* @__PURE__ */ i(y, { icon: "ChevronDown", color: "black-100", width: 16, height: 16 }) })
           ]
         }
       ),
-      !a && h()
+      !c && v()
     ] });
   }
 );

package/dist/scss/patterns/CountryPicker/_countryPickerOption.scss

@@ -39,9 +39,24 @@
     }
 
     &-flag {
+      align-items: center;
+      display: flex;
       height: 1rem;
+      justify-content: center;
       margin-right: $spacing-sm;
-      vertical-align: middle;
+      overflow: hidden;
+      width: 1.5rem;
+
+      @media (min-width: $breakpoint-md) {
+        height: 1.25rem;
+        width: 1.75rem;
+      }
+
+      &-img {
+        display: block;
+        height: 100%;
+        width: auto;
+      }
     }
   }
   .#{$px}-country-picker__radio {

package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss

@@ -74,8 +74,24 @@
     }
 
     &-flag {
+      align-items: center;
+      display: flex;
       height: 1rem;
+      justify-content: center;
       margin-right: $spacing-sm;
+      overflow: hidden;
+      width: 1.5rem;
+
+      @media (min-width: $breakpoint-md) {
+        height: 1.25rem;
+        width: 1.75rem;
+      }
+
+      &-img {
+        display: block;
+        height: 100%;
+        width: auto;
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.210.1",
+  "version": "1.210.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"