@bosonprotocol/react-kit 0.33.0-alpha.9 → 0.33.1-alpha.0

package/dist/esm/lib/const/chainInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chainInfo.d.ts","sourceRoot":"","sources":["../../../../src/lib/const/chainInfo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAElE,eAAO,MAAM,qBAAqB,QAAY,CAAC;AAE/C,oBAAY,WAAW;IACrB,EAAE,IAAA;IACF,EAAE,IAAA;CACH;AACD,UAAU,aAAa;IACrB,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAC3C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,UAAU,WAAY,SAAQ,aAAa;IACzC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC;IACrC,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,UAAU,WAAY,SAAQ,aAAa;IACzC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC;IACrC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CACjC;AAwED,wBAAgB,YAAY,CAC1B,OAAO,EAAE,kBAAkB,EAC3B,YAAY,CAAC,EAAE,MAAM,CACnB,OAAO,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,MAAM,EAC1D,OAAO,CACR,GACA,WAAW,CAAC;AACf,wBAAgB,YAAY,CAC1B,OAAO,EAAE,kBAAkB,EAC3B,YAAY,CAAC,EAAE,MAAM,CACnB,OAAO,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,MAAM,EAC1D,OAAO,CACR,GACA,WAAW,CAAC;AACf,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,EAChB,YAAY,CAAC,EAAE,MAAM,CACnB,OAAO,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,MAAM,EAC1D,OAAO,CACR,GACA,WAAW,GAAG,WAAW,CAAC;AAC7B,wBAAgB,YAAY,CAC1B,OAAO,EACH,OAAO,GACP,kBAAkB,GAClB,kBAAkB,GAClB,MAAM,GACN,SAAS,EACb,YAAY,CAAC,EAAE,MAAM,CACnB,OAAO,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,MAAM,EAC1D,OAAO,CACR,GACA,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC"}
+{"version":3,"file":"chainInfo.d.ts","sourceRoot":"","sources":["../../../../src/lib/const/chainInfo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,OAAO,EAAgB,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEhF,eAAO,MAAM,qBAAqB,QAAY,CAAC;AAE/C,oBAAY,WAAW;IACrB,EAAE,IAAA;IACF,EAAE,IAAA;CACH;AACD,UAAU,aAAa;IACrB,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAC3C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,UAAU,WAAY,SAAQ,aAAa;IACzC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC;IACrC,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,UAAU,WAAY,SAAQ,aAAa;IACzC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC;IACrC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CACjC;AAiFD,wBAAgB,YAAY,CAC1B,OAAO,EAAE,kBAAkB,EAC3B,YAAY,CAAC,EAAE,MAAM,CACnB,OAAO,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,MAAM,EAC1D,OAAO,CACR,GACA,WAAW,CAAC;AACf,wBAAgB,YAAY,CAC1B,OAAO,EAAE,kBAAkB,EAC3B,YAAY,CAAC,EAAE,MAAM,CACnB,OAAO,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,MAAM,EAC1D,OAAO,CACR,GACA,WAAW,CAAC;AACf,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,EAChB,YAAY,CAAC,EAAE,MAAM,CACnB,OAAO,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,MAAM,EAC1D,OAAO,CACR,GACA,WAAW,GAAG,WAAW,CAAC;AAC7B,wBAAgB,YAAY,CAC1B,OAAO,EACH,OAAO,GACP,kBAAkB,GAClB,kBAAkB,GAClB,MAAM,GACN,SAAS,EACb,YAAY,CAAC,EAAE,MAAM,CACnB,OAAO,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,MAAM,EAC1D,OAAO,CACR,GACA,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC"}

package/dist/esm/lib/const/chainInfo.js

@@ -4,6 +4,7 @@ import polygonCircleLogoUrl from "../../assets/polygonCircle.png";
 import polygonMaticLogo from "../../assets/svg/polygon-matic-logo.svg";
 import polygonSquareLogoUrl from "../../assets/svg/polygon_square_logo.svg";
 import ms from "ms";
+import { LocalChainId } from "./chains";
 export const AVERAGE_L1_BLOCK_TIME = ms(`12s`);
 export var NetworkType;
 (function (NetworkType) {
@@ -71,6 +72,15 @@ const CHAIN_INFO = {
             symbol: "aMATIC",
             decimals: 18
         }
+    },
+    [LocalChainId]: {
+        networkType: NetworkType.L1,
+        docs: "https://docs.uniswap.org/",
+        explorer: "https://etherscan.io/",
+        infoLink: "https://info.uniswap.org/#/",
+        label: "Local",
+        logoUrl: ethereumLogoUrl,
+        nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 }
     }
 };
 /**

package/dist/esm/lib/const/chainInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"chainInfo.js","sourceRoot":"","sources":["../../../../src/lib/const/chainInfo.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chainInfo.js","sourceRoot":"","sources":["../../../../src/lib/const/chainInfo.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.33.0-alpha.9",
+  "version": "0.33.1-alpha.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,9 +15,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.40.5-alpha.8",
-    "@bosonprotocol/ethers-sdk": "^1.14.5-alpha.8",
-    "@bosonprotocol/ipfs-storage": "^1.11.4-alpha.3",
+    "@bosonprotocol/core-sdk": "^1.40.5",
+    "@bosonprotocol/ethers-sdk": "^1.14.5",
+    "@bosonprotocol/ipfs-storage": "^1.11.4",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
     "@glidejs/glide": "3.6.0",
@@ -188,5 +188,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "5216b979eadca6b29a51ca4ede8a4e3cd1664a7f"
+  "gitHead": "f584204fef7d4089c9f7e8b1aadccd2a74569472"
 }

package/src/components/buttons/BaseButton.tsx

@@ -19,6 +19,7 @@ const colors = theme.colors.light;
 const ButtonWithThemeProps = styled.button<{
   size: ButtonSizeProp;
   fill: boolean | undefined;
+  theme: BaseButtonTheme;
 }>`
   ${() => Styles.button};
   ${(props) => Styles[props.size as keyof typeof Styles]}
@@ -26,6 +27,8 @@ const ButtonWithThemeProps = styled.button<{
   border-color: ${(props) => props.theme?.borderColor || "transparent"};
   border-width: ${(props) => props.theme?.borderWidth || 0}px;
   border-radius: ${(props) => props.theme?.borderRadius || 0}px;
+  ${(props) =>
+    props.theme?.boxShadow ? `box-shadow: ${props.theme.boxShadow}` : ""};
   color: ${(props) => props.theme?.color || "#000000"};
   background-color: ${(props) => props.theme?.background || "transparent"};
   svg {
@@ -110,6 +113,7 @@ export type BaseButtonTheme = {
   borderColor?: CSSProperties["borderColor"];
   borderRadius?: CSSProperties["borderRadius"];
   borderWidth?: CSSProperties["borderWidth"];
+  boxShadow?: CSSProperties["boxShadow"];
   color?: CSSProperties["color"];
   padding?: CSSProperties["padding"];
   gap?: CSSProperties["gap"];

package/src/components/buttons/CommitButtonView.tsx

@@ -56,6 +56,10 @@ const Wrapper = styled.div`
 
   ${StyledButton} {
     transition: background 150ms ease-in-out;
+    padding: 0.75rem 0.625rem;
+    svg {
+      max-width: 100%;
+    }
   }
 `;
 

package/src/components/error/SimpleError.tsx

@@ -13,7 +13,7 @@ const StyledGrid = styled(Grid)<{
   background-color: ${({ $background }) => $background};
 `;
 
-export type SimpleProps = GridProps & {
+export type SimpleErrorProps = GridProps & {
   errorMessage?: string;
   children?: ReactNode;
   backgroundColor?: CSSProperties["backgroundColor"];
@@ -26,7 +26,7 @@ export function SimpleError({
   backgroundColor = colors.lightGrey,
   warningColor = colors.darkOrange,
   ...rest
-}: SimpleProps) {
+}: SimpleErrorProps) {
   return (
     <StyledGrid
       justifyContent="flex-start"

package/src/components/form/BaseCheckbox.tsx

@@ -0,0 +1,50 @@
+import { useField } from "formik";
+import { Check } from "phosphor-react";
+import React, { useEffect, useRef } from "react";
+
+import Error from "./Error";
+import { CheckboxWrapper } from "./Field.styles";
+import type { CheckboxProps } from "./types";
+
+export type BaseCheckboxProps = CheckboxProps;
+export function BaseCheckbox({
+  name,
+  text,
+  theme,
+  hideError,
+  ...props
+}: BaseCheckboxProps) {
+  const [field, meta, helpers] = useField(name);
+  const ref = useRef(field.value);
+  const errorMessage = meta.error && meta.touched ? meta.error : "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
+  const checkboxId = `checkbox-${name}`;
+
+  useEffect(() => {
+    if (ref.current !== field.value) {
+      if (!meta.touched) {
+        helpers.setTouched(true);
+      }
+    }
+  }, [field.value]); // eslint-disable-line
+
+  return (
+    <>
+      <CheckboxWrapper htmlFor={checkboxId} $error={errorMessage} theme={theme}>
+        <input
+          hidden
+          id={checkboxId}
+          type="checkbox"
+          {...props}
+          {...field}
+          checked={field.value}
+        />
+        <div>
+          <Check size={16} />
+        </div>
+        <b>{text}</b>
+      </CheckboxWrapper>
+      <Error display={!hideError && displayError} message={errorMessage} />
+    </>
+  );
+}

package/src/components/form/Checkbox.tsx

@@ -1,43 +1,20 @@
-import { useField } from "formik";
-import { Check } from "phosphor-react";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 
-import Error from "./Error";
-import { CheckboxWrapper } from "./Field.styles";
-import type { CheckboxProps } from "./types";
+import { theme } from "../../theme";
+import { BaseCheckbox, BaseCheckboxProps } from "./BaseCheckbox";
 
-export default function Checkbox({ name, text, ...props }: CheckboxProps) {
-  const [field, meta, helpers] = useField(name);
-  const ref = useRef(field.value);
-  const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError = typeof errorMessage === "string" && errorMessage !== "";
-  const checkboxId = `checkbox-${name}`;
-
-  useEffect(() => {
-    if (ref.current !== field.value) {
-      if (!meta.touched) {
-        helpers.setTouched(true);
-      }
-    }
-  }, [field.value]); // eslint-disable-line
-
-  return (
-    <>
-      <CheckboxWrapper htmlFor={checkboxId} error={errorMessage}>
-        <input
-          hidden
-          id={checkboxId}
-          type="checkbox"
-          {...props}
-          {...field}
-          checked={field.value}
-        />
-        <div>
-          <Check size={16} />
-        </div>
-        <b>{text || "Checkbox"}</b>
-      </CheckboxWrapper>
-      <Error display={displayError} message={errorMessage} />
-    </>
-  );
+const colors = theme.colors.light;
+export const bosonCheckboxTheme = {
+  backgroundColor: colors.lightGrey,
+  borderColor: colors.border,
+  hover: {
+    borderColor: colors.secondary
+  },
+  error: {
+    borderColor: colors.orange
+  }
+} satisfies BaseCheckboxProps["theme"];
+export type CheckboxProps = Omit<BaseCheckboxProps, "theme">;
+export function Checkbox(props: CheckboxProps) {
+  return <BaseCheckbox {...props} theme={bosonCheckboxTheme} />;
 }

package/src/components/form/CountrySelect.tsx

@@ -4,18 +4,31 @@ import { GlobeHemisphereWest } from "phosphor-react";
 import React, { forwardRef, useState, useEffect } from "react";
 import type { Country as CountryCode } from "react-phone-number-input";
 import PhoneInput from "react-phone-number-input";
-import Select, { GroupBase, StylesConfig, components } from "react-select";
+import Select, {
+  CSSObjectWithLabel,
+  GroupBase,
+  StylesConfig,
+  components
+} from "react-select";
 import styled, { CSSProperties } from "styled-components";
 import { zIndex } from "../ui/zIndex";
 import Error from "./Error";
 import type { InputProps } from "./types";
 import { SelectDataProps } from "./types";
 import { theme as importedTheme } from "../../theme";
+import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
 export type { Country as CountryCode } from "react-phone-number-input";
 
 const colors = importedTheme.colors.light;
-const customStyles = {
-  control: (provided: any, state: any) => {
+const customStyles = (
+  error: unknown,
+  customTheme: CountrySelectProps["theme"]
+): StylesConfig<
+  SelectDataProps<string>,
+  false,
+  GroupBase<SelectDataProps<string>>
+> => ({
+  control: (provided, state: any) => {
     const before = state.selectProps.label
       ? {
           ":before": {
@@ -25,26 +38,27 @@ const customStyles = {
           }
         }
       : null;
-    const { theme } = state;
     return {
       ...provided,
-      borderRadius: theme.borderRadius,
-      height: theme.controlHeight,
       alignContent: "center",
       padding: "0.4rem 1rem",
       boxShadow: "none",
+      background: colors.lightGrey,
+      ...customTheme?.control,
+      border: state.isFocused
+        ? customTheme?.control?.focus?.border ?? `1px solid ${colors.secondary}`
+        : !checkIfValueIsEmpty(error)
+          ? customTheme?.control?.error?.border ?? `1px solid ${colors.orange}`
+          : customTheme?.control?.border ?? `1px solid ${colors.border}`,
       ":hover": {
-        borderColor: theme.colors.controlHoverBorderColor,
-        borderWidth: "1px"
+        borderColor: colors.secondary,
+        borderWidth: "1px",
+        ...customTheme?.control?.hover
       },
-      background: theme.colors.controlBackground,
-      border: state.isFocused
-        ? `1px solid ${theme.colors.controlFocusBorderColor}`
-        : `1px solid ${theme.colors.controlUnfocusedBorderColor}`,
       ...before
     };
   },
-  container: (provided: any, state: any) => {
+  container: (provided, state) => {
     return {
       ...provided,
       zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
@@ -52,34 +66,56 @@ const customStyles = {
       width: "100%"
     };
   },
-  option: (provided: any, state: any) => {
-    const { theme } = state;
+  option: (provided, state: any) => {
     return {
       ...provided,
+      ...customTheme?.option,
       cursor: state.isDisabled ? "not-allowed" : "pointer",
-      opacity: state.isDisabled ? "0.5" : "1",
+      opacity: state.isDisabled
+        ? customTheme?.option?.disabled?.opacity ?? "0.5"
+        : customTheme?.option?.opacity ?? "1",
       background:
         state.isOptionSelected || state.isSelected || state.isFocused
-          ? theme.colors.selectedOptionBackground
-          : theme.colors.unselectedOptionBackground,
+          ? customTheme?.option?.selected?.background ?? colors.lightGrey
+          : customTheme?.option?.background ?? colors.white,
       color:
         state.isOptionSelected || state.isSelected
-          ? theme.colors.selectedOptionColor
-          : theme.colors.unselectedOptionColor
+          ? customTheme?.option?.selected?.color ?? colors.secondary
+          : customTheme?.option?.color ?? colors.black,
+      ...(state.isDisabled && customTheme?.option?.disabled),
+      ...((state.isOptionSelected || state.isSelected) &&
+        customTheme?.option?.selected),
+      ...(state.isFocused && customTheme?.option?.focus),
+      ...(!checkIfValueIsEmpty(error) && customTheme?.option?.error)
+    };
+  },
+  menu: (provided) => {
+    return {
+      ...provided,
+      overflow: "hidden",
+      ...customTheme?.menu,
+      ...(!checkIfValueIsEmpty(error) && customTheme?.menu?.error)
     };
   },
-  menu: (provided) => ({
-    ...provided,
-    overflow: "hidden"
-  }),
   indicatorSeparator: () => ({
     display: "none"
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    ...customTheme?.placeholder,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.placeholder?.error)
+  }),
+  input: (provided) => ({
+    ...provided,
+    ...customTheme?.input,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.input?.error)
+  }),
+  singleValue: (provided) => ({
+    ...provided,
+    ...customTheme?.singleValue,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.singleValue?.error)
   })
-} satisfies StylesConfig<
-  SelectDataProps<string>,
-  false,
-  GroupBase<SelectDataProps<string>>
->;
+});
 
 const ControlGrid = styled.div`
   display: flex;
@@ -88,6 +124,7 @@ const ControlGrid = styled.div`
   align-items: center;
   justify-content: space-between;
   .PhoneInputCountryIcon {
+    max-width: fit-content;
     min-width: 40px;
     display: inline;
     height: 27px;
@@ -95,6 +132,9 @@ const ControlGrid = styled.div`
       max-width: 40px;
     }
   }
+  svg {
+    max-width: 40px;
+  }
 `;
 const OptionGrid = styled.div`
   display: grid;
@@ -122,38 +162,57 @@ const PhoneWrapper = styled.div`
 
 export type CountrySelectProps = InputProps & {
   countries?: CountryCode[];
+  fieldValueIsCountryCode?: boolean; // if true, the field.value will be the countryCodeOrName, otherwise the country name
   theme?: Partial<{
-    controlHeight: CSSProperties["height"];
-    borderRadius: CSSProperties["borderRadius"];
-    controlHoverBorderColor: CSSProperties["borderColor"];
-    controlBackground: CSSProperties["background"];
-    controlFocusBorderColor: CSSProperties["borderColor"];
-    controlUnfocusedBorderColor: CSSProperties["borderColor"];
-    selectedOptionBackground: CSSProperties["background"];
-    unselectedOptionBackground: CSSProperties["background"];
-    selectedOptionColor: CSSProperties["color"];
-    unselectedOptionColor: CSSProperties["color"];
+    control: Partial<CSSProperties> &
+      Partial<{
+        hover: Partial<CSSProperties>;
+        focus: Partial<CSSProperties>;
+        error: Partial<CSSProperties>;
+      }>;
+    option: Partial<CSSProperties> &
+      Partial<{
+        selected: Partial<CSSProperties>;
+        disabled: Partial<CSSProperties>;
+        focus: Partial<CSSProperties>;
+        error: CSSProperties;
+      }>;
+    placeholder: Partial<CSSProperties> &
+      Partial<{ error: CSSObjectWithLabel }>;
+    input: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+    singleValue: Partial<CSSProperties> &
+      Partial<{ error: CSSObjectWithLabel }>;
+    menu: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
   }>;
 };
-
+type CountryName = string;
 export function CountrySelect({
   name,
   countries,
   theme: selectTheme,
+  fieldValueIsCountryCode,
   ...rest
 }: CountrySelectProps) {
   const { status } = useFormikContext();
   const [initialized, setInitialized] = useState<boolean>(false);
   const [field, meta, helpers] = useField(name);
-  const errorText = meta.error || status?.[name];
-  const errorMessage = errorText && meta.touched ? errorText : "";
-  const displayError = typeof errorMessage === "string" && errorMessage !== "";
+  const errorMessage = meta.error || status?.[name];
+  const displayErrorMessage =
+    meta.error && meta.touched && !errorMessage
+      ? meta.error
+      : meta.error && meta.touched && errorMessage
+        ? errorMessage
+        : "";
+  const displayError =
+    typeof displayErrorMessage === "string" && displayErrorMessage !== "";
   const [phone, setPhone] = useState<string | undefined>(undefined);
-  const [countryCode, setCountryCode] = useState<CountryCode | undefined>();
+  const [countryCodeOrName, setCountryCodeOrName] = useState<
+    CountryCode | CountryName | undefined
+  >();
 
   useEffect(() => {
     if (!initialized && field.value) {
-      setCountryCode(field.value as CountryCode);
+      setCountryCodeOrName(field.value);
       setInitialized(true);
     }
   }, [field.value, initialized]); // eslint-disable-line
@@ -167,94 +226,83 @@ export function CountrySelect({
             <div></div>
           ))}
           addInternationalOption={false}
-          country={countryCode}
+          country={countryCodeOrName}
           value={phone}
           onChange={(value) => setPhone((value || "").replace(/\+/g, ""))}
           countries={countries}
-          countrySelectComponent={({ iconComponent: Icon, ...props }) => (
-            <>
-              <div>
-                <Select
-                  {...rest}
-                  {...props}
-                  isDisabled={rest.disabled}
-                  theme={(theme) => ({
-                    ...theme,
-                    controlHeight: selectTheme?.controlHeight,
-                    borderRadius: selectTheme?.borderRadius || 0,
-                    colors: {
-                      ...theme.colors,
-                      controlHoverBorderColor:
-                        selectTheme?.controlHoverBorderColor ||
-                        colors.secondary,
-                      controlBackground:
-                        selectTheme?.controlBackground || colors.lightGrey,
-                      controlFocusBorderColor:
-                        selectTheme?.controlFocusBorderColor ||
-                        colors.secondary,
-                      controlUnfocusedBorderColor:
-                        selectTheme?.controlUnfocusedBorderColor ||
-                        colors.border,
-                      selectedOptionBackground:
-                        selectTheme?.selectedOptionBackground ||
-                        colors.lightGrey,
-                      unselectedOptionBackground:
-                        selectTheme?.unselectedOptionBackground || colors.white,
-                      selectedOptionColor:
-                        selectTheme?.selectedOptionColor || colors.secondary,
-                      unselectedOptionColor:
-                        selectTheme?.unselectedOptionColor || colors.black
-                    }
-                  })}
-                  styles={customStyles}
-                  name="countrySelect"
-                  value={(props?.options || []).find(
-                    (o: SelectDataProps) => o.value === countryCode
-                  )}
-                  onChange={(o: SelectDataProps) => {
-                    setCountryCode(o.value as CountryCode);
-                    helpers.setValue(o.label);
-                  }}
-                  components={{
-                    Control: (props) => {
-                      const country =
-                        (props?.getValue()[0] as any)?.value || null;
-                      return (
-                        <components.Control {...props}>
-                          <ControlGrid>
-                            {country ? (
-                              <Icon country={country as CountryCode} label="" />
-                            ) : (
-                              <GlobeHemisphereWest />
-                            )}
-                            {props.children as any}
-                          </ControlGrid>
-                        </components.Control>
-                      );
-                    },
-                    Option: (props) => {
-                      const country = (props?.data as any)?.value || null;
-                      return (
-                        <components.Option {...props}>
-                          <OptionGrid>
-                            {country ? (
-                              <Icon
-                                country={country as CountryCode}
-                                label={props.label}
-                              />
-                            ) : (
-                              <GlobeHemisphereWest />
-                            )}
-                            {props.label}
-                          </OptionGrid>
-                        </components.Option>
-                      );
-                    }
-                  }}
-                />
-              </div>
-            </>
-          )}
+          countrySelectComponent={({ iconComponent: Icon, ...props }) => {
+            const value = (props?.options || []).find((o: SelectDataProps) =>
+              fieldValueIsCountryCode
+                ? o.value === countryCodeOrName
+                : o.label === countryCodeOrName
+            );
+            return (
+              <>
+                <div>
+                  <Select
+                    {...rest}
+                    {...props}
+                    isDisabled={rest.disabled}
+                    styles={customStyles(displayErrorMessage, selectTheme)}
+                    name="countrySelect"
+                    value={value}
+                    onChange={(o: SelectDataProps) => {
+                      if (!meta.touched) {
+                        helpers.setTouched(true);
+                      }
+                      const value = fieldValueIsCountryCode ? o.value : o.label;
+                      setCountryCodeOrName(value);
+                      helpers.setValue(value);
+                    }}
+                    onBlur={() => {
+                      if (!meta.touched) {
+                        helpers.setTouched(true);
+                      }
+                    }}
+                    components={{
+                      Control: (props) => {
+                        const country =
+                          (props?.getValue()[0] as any)?.value || null;
+                        return (
+                          <components.Control {...props}>
+                            <ControlGrid>
+                              {country ? (
+                                <Icon
+                                  country={country as CountryCode}
+                                  label=""
+                                />
+                              ) : (
+                                <GlobeHemisphereWest />
+                              )}
+                              {props.children as any}
+                            </ControlGrid>
+                          </components.Control>
+                        );
+                      },
+                      Option: (props) => {
+                        const country = (props?.data as any)?.value || null;
+                        return (
+                          <components.Option {...props}>
+                            <OptionGrid>
+                              {country ? (
+                                <Icon
+                                  country={country as CountryCode}
+                                  label={props.label}
+                                />
+                              ) : (
+                                <GlobeHemisphereWest />
+                              )}
+                              {props.label}
+                            </OptionGrid>
+                          </components.Option>
+                        );
+                      }
+                    }}
+                  />
+                </div>
+              </>
+            );
+          }}
         />
       </PhoneWrapper>
       <Error display={!rest.hideError && displayError} message={errorMessage} />