@asdp/ferryui 0.1.22-dev.9201 → 0.1.22-dev.9209

package/dist/index.js

@@ -2766,7 +2766,8 @@ var useStyles8 = reactComponents.makeStyles({
   phoneInputWrapper: {
     width: "100%",
     "& .react-tel-input": {
-      width: "100%"
+      width: "100%",
+      fontFamily: reactComponents.tokens.fontFamilyBase
     },
     "& .react-tel-input .form-control": {
       width: "100%",
@@ -2814,6 +2815,128 @@ var useStyles8 = reactComponents.makeStyles({
     },
     "& .react-tel-input .flag-dropdown.open .selected-flag": {
       backgroundColor: "transparent"
+    },
+    // --- Country dropdown list: match react-select styling ---
+    "& .react-tel-input .country-list": {
+      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+      borderRadius: reactComponents.tokens.borderRadiusMedium,
+      boxShadow: `0 4px 11px rgba(0, 0, 0, 0.1)`,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+      margin: "4px 0 0 0",
+      padding: 0,
+      width: "300px",
+      maxHeight: "300px",
+      overflowY: "auto",
+      fontFamily: reactComponents.tokens.fontFamilyBase
+    },
+    // Scrollbar matching react-select
+    "& .react-tel-input .country-list::-webkit-scrollbar": {
+      width: "8px",
+      display: "block"
+    },
+    "& .react-tel-input .country-list::-webkit-scrollbar-track": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground2,
+      borderRadius: "4px"
+    },
+    "& .react-tel-input .country-list::-webkit-scrollbar-thumb": {
+      backgroundColor: reactComponents.tokens.colorNeutralStroke2,
+      borderRadius: "4px"
+    },
+    "& .react-tel-input .country-list::-webkit-scrollbar-thumb:hover": {
+      backgroundColor: reactComponents.tokens.colorBrandBackground
+    },
+    "& .react-tel-input .country-list::-webkit-scrollbar-thumb:active": {
+      backgroundColor: reactComponents.tokens.colorBrandBackgroundPressed
+    },
+    // Country option items
+    "& .react-tel-input .country-list .country": {
+      padding: "8px 12px",
+      cursor: "pointer",
+      transition: "background-color 0.15s ease",
+      display: "flex",
+      alignItems: "center",
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400,
+      fontWeight: reactComponents.tokens.fontWeightRegular,
+      color: reactComponents.tokens.colorNeutralForeground1,
+      backgroundColor: "transparent"
+    },
+    "& .react-tel-input .country-list .country:hover": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+    },
+    "& .react-tel-input .country-list .country.highlight": {
+      backgroundColor: reactComponents.tokens.colorBrandBackground,
+      color: reactComponents.tokens.colorNeutralForegroundOnBrand
+    },
+    "& .react-tel-input .country-list .country.highlight .dial-code": {
+      color: reactComponents.tokens.colorNeutralForegroundOnBrand
+    },
+    "& .react-tel-input .country-list .country .country-name": {
+      marginRight: "6px",
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400,
+      fontWeight: reactComponents.tokens.fontWeightRegular,
+      color: "inherit"
+    },
+    "& .react-tel-input .country-list .country .dial-code": {
+      color: reactComponents.tokens.colorNeutralForeground3,
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400,
+      fontWeight: reactComponents.tokens.fontWeightRegular
+    },
+    "& .react-tel-input .country-list .country .flag": {
+      marginRight: "8px",
+      marginTop: "2px"
+    },
+    // Search box - match react-select search input
+    "& .react-tel-input .country-list .search": {
+      position: "sticky",
+      top: 0,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+      padding: "8px 12px",
+      zIndex: 1
+    },
+    "& .react-tel-input .country-list .search-box": {
+      width: "100%",
+      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+      borderRadius: reactComponents.tokens.borderRadiusMedium,
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400,
+      lineHeight: reactComponents.tokens.lineHeightBase400,
+      padding: "6px 10px",
+      outline: "none",
+      color: reactComponents.tokens.colorNeutralForeground1,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+      boxSizing: "border-box",
+      marginLeft: 0
+    },
+    "& .react-tel-input .country-list .search-box:focus": {
+      borderTopColor: reactComponents.tokens.colorBrandStroke1,
+      borderRightColor: reactComponents.tokens.colorBrandStroke1,
+      borderBottomColor: reactComponents.tokens.colorBrandStroke1,
+      borderLeftColor: reactComponents.tokens.colorBrandStroke1,
+      boxShadow: `0 0 0 1px ${reactComponents.tokens.colorBrandStroke1}`
+    },
+    "& .react-tel-input .country-list .search-box::placeholder": {
+      color: reactComponents.tokens.colorNeutralForeground3,
+      fontFamily: reactComponents.tokens.fontFamilyBase
+    },
+    // Search emoji (magnifying glass) - hide for cleaner look
+    "& .react-tel-input .country-list .search-emoji": {
+      display: "none"
+    },
+    // Divider between preferred countries and rest
+    "& .react-tel-input .country-list .divider": {
+      borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+      marginBottom: 0,
+      paddingBottom: 0
+    },
+    // No results message
+    "& .react-tel-input .country-list .no-entries-message": {
+      padding: "8px 12px",
+      color: reactComponents.tokens.colorNeutralForeground3,
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400
     }
   },
   // Appearance: underline
@@ -3140,13 +3263,26 @@ var InputDynamic = ({
       }),
       placeholder: (provided) => ({
         ...provided,
-        color: reactComponents.tokens.colorNeutralForeground3
+        color: reactComponents.tokens.colorNeutralForeground3,
         // fontSize: tokens.fontSizeBase400,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
       }),
       singleValue: (provided) => ({
         ...provided,
-        color: reactComponents.tokens.colorNeutralForeground1
+        color: reactComponents.tokens.colorNeutralForeground1,
         // fontSize: tokens.fontSizeBase400,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }),
+      valueContainer: (provided) => ({
+        ...provided,
+        flexWrap: "nowrap",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
       })
     };
   };