@opengovsg/oui 0.0.45 → 0.0.46

package/dist/types/phone-number-field/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/phone-number-field/i18n.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAghCI,CAAA"}

package/dist/types/phone-number-field/index.d.ts

@@ -0,0 +1,9 @@
+export { PhoneNumberField, CountrySelect, FlagComponent, PhoneInput, } from "./phone-number-field";
+export type { PhoneNumberFieldProps, CountrySelectProps, FlagComponentProps, PhoneInputProps, } from "./phone-number-field";
+export { formatPhoneNumber, formatPhoneNumberIntl, parsePhoneNumber, isPossiblePhoneNumber, 
+/**
+ * @deprecated Use `isPossiblePhoneNumber` instead. The rationale is that telephone numbering plans can and sometimes do change, meaning that `isValidPhoneNumber()` function may one day become outdated on a website that isn't actively maintained anymore.
+ */
+isValidPhoneNumber, } from "react-phone-number-input";
+export type { Value as E164Number } from "react-phone-number-input";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/phone-number-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/phone-number-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,GAChB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB;AACrB;;GAEG;AACH,kBAAkB,GACnB,MAAM,0BAA0B,CAAA;AAEjC,YAAY,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/types/phone-number-field/phone-number-field.d.ts

@@ -0,0 +1,42 @@
+import type { FocusEvents } from "react-aria";
+import type { InputProps as AriaInputProps, TextFieldProps, ValidationResult } from "react-aria-components";
+import type { Props as ComponentPhoneInputProps, Country, Value as E164Number, ExternalValue, FlagProps } from "react-phone-number-input";
+import type { SetOptional } from "type-fest";
+import type { PhoneNumberFieldSlots, PhoneNumberFieldVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { InputProps } from "../input";
+import type { BasePhoneInputProps } from "./types";
+export interface PhoneInputProps extends InputProps {
+    onClear?: () => void;
+}
+export declare const PhoneInput: ({ onClear, onKeyDown, ...props }: PhoneInputProps) => import("react/jsx-runtime").JSX.Element;
+export interface PhoneNumberFieldProps extends Omit<Partial<ComponentPhoneInputProps<Omit<AriaInputProps, "size">>>, "disabled">, BasePhoneInputProps, PhoneNumberFieldVariantProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode | ((validation: ValidationResult) => string);
+    isInvalid?: TextFieldProps["isInvalid"];
+    classNames?: SlotsToClasses<PhoneNumberFieldSlots>;
+    defaultValue?: ExternalValue | E164Number;
+    /**
+     * Whether to use the international phone input with country select (default) or a non-international phone input with a fixed country code.
+     * When the variant is `local`, the formatting of the phone number will be based on the `defaultCountry` prop.
+     */
+    variant?: PhoneNumberFieldVariantProps["variant"];
+}
+export declare const PhoneNumberField: (originalProps: PhoneNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+type CountryItem = {
+    label: string;
+    value: Country | undefined;
+};
+export interface CountrySelectProps extends Pick<FocusEvents, "onBlur" | "onFocus"> {
+    value: string;
+    options: CountryItem[];
+    onChange: (country: Country) => void;
+    disabled?: boolean;
+}
+export declare function CountrySelect(props: CountrySelectProps): import("react/jsx-runtime").JSX.Element;
+export interface FlagComponentProps extends SetOptional<FlagProps, "country"> {
+    className?: string;
+}
+export declare const FlagComponent: ({ country, countryName, className, }: FlagComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=phone-number-field.d.ts.map

package/dist/types/phone-number-field/phone-number-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-number-field.d.ts","sourceRoot":"","sources":["../../../src/phone-number-field/phone-number-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,KAAK,EACV,UAAU,IAAI,cAAc,EAC5B,cAAc,EACd,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EACV,KAAK,IAAI,wBAAwB,EACjC,OAAO,EACP,KAAK,IAAI,UAAU,EACnB,aAAa,EACb,SAAS,EACV,MAAM,0BAA0B,CAAA;AACjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAO5C,OAAO,KAAK,EACV,qBAAqB,EACrB,4BAA4B,EAC5B,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAYlD,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,eAAO,MAAM,UAAU,qCAIpB,eAAe,4CA2DjB,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CACR,OAAO,CAAC,wBAAwB,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,EAC/D,UAAU,CACX,EACD,mBAAmB,EACnB,4BAA4B;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAE3E,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IAEvC,UAAU,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAA;IAClD,YAAY,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IAEzC;;;OAGG;IACH,OAAO,CAAC,EAAE,4BAA4B,CAAC,SAAS,CAAC,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,kBAAmB,qBAAqB,4CAiIpE,CAAA;AAED,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAA;AAEhE,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA0EtD;AAED,MAAM,WAAW,kBAAmB,SAAQ,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,yCAIvB,kBAAkB,4CAMpB,CAAA"}

package/dist/types/phone-number-field/types.d.ts

@@ -0,0 +1,21 @@
+import type { Country } from "react-phone-number-input";
+export interface BasePhoneInputProps {
+    /**
+     * Set the input's placeholder to an example number for the selected country,
+     * and update it if the country changes.
+     *
+     * By default it is set to "polite", which means it will only set the
+     * placeholder if the input doesn't already have one. You can also set it to
+     * "aggressive", which will replace any existing placeholder, or "off" to not
+     * show any example numbers in the placeholder.
+     */
+    placeholderMode?: "polite" | "aggressive" | "off";
+    /**
+     * Examples to retrieve placeholder number from, if any. Defaults to
+     * `MOBILE_EXAMPLES` if none provided.
+     */
+    examples?: {
+        [country in Country]: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/phone-number-field/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/phone-number-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAEvD,MAAM,WAAW,mBAAmB;IAClC;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,KAAK,CAAA;IAEjD;;;OAGG;IACH,QAAQ,CAAC,EAAE;SAAG,OAAO,IAAI,OAAO,GAAG,MAAM;KAAE,CAAA;CAC5C"}

package/dist/types/select/i18n.d.ts

@@ -0,0 +1,19 @@
+export declare const i18nStrings: {
+    "en-SG": {
+        "Search...": string;
+        "Search options": string;
+    };
+    "zh-SG": {
+        "Search...": string;
+        "Search options": string;
+    };
+    "ms-SG": {
+        "Search...": string;
+        "Search options": string;
+    };
+    "ta-SG": {
+        "Search...": string;
+        "Search options": string;
+    };
+};
+//# sourceMappingURL=i18n.d.ts.map

package/dist/types/select/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/select/i18n.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;CAiBI,CAAA"}

package/dist/types/select/select.d.ts

@@ -1,6 +1,8 @@
-import type { SelectProps as AriaSelectProps, ListBoxProps, ListLayoutOptions, ValidationResult } from "react-aria-components";
+import type { SelectProps as AriaSelectProps, ListBoxProps, ListLayoutOptions, SelectValueRenderProps, ValidationResult } from "react-aria-components";
 import type { SelectVariantSlots, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
 import { selectStyles } from "@opengovsg/oui-theme";
+import type { PopoverProps } from "../popover";
+import type { ChildrenOrFunction } from "../system/react-utils/children";
 export interface SelectProps<T> extends Omit<AriaSelectProps, "children">, VariantProps<typeof selectStyles> {
     classNames?: SlotsToClasses<SelectVariantSlots | "error">;
     /**
@@ -27,6 +29,14 @@ export interface SelectProps<T> extends Omit<AriaSelectProps, "children">, Varia
      * Icon to display in the search field. If not provided, no icon will be displayed.
      */
     searchIcon?: React.ReactNode;
+    /**
+     * Custom renderer for the selected value displayed in the trigger button.
+     * If not provided, the default renderer will display the selected option's text.
+     * The render prop function receives the same props as the children of SelectValue.
+     * You can use these props to conditionally render based on the selected option's state (e.g. isPlaceholder).
+     */
+    renderSelectValue?: ChildrenOrFunction<SelectValueRenderProps<T>>;
+    popoverProps?: Partial<PopoverProps>;
 }
 export declare function Select<T extends object>({ label, description, classNames, errorMessage, ...originalProps }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=select.d.ts.map

package/dist/types/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAiB9B,OAAO,KAAK,EAEV,kBAAkB,EAClB,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAA0B,YAAY,EAAE,MAAM,sBAAsB,CAAA;AA2B3E,MAAM,WAAW,WAAW,CAAC,CAAC,CAC5B,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,UAAU,CAAC,EAAE,cAAc,CAAC,kBAAkB,GAAG,OAAO,CAAC,CAAA;IAEzD;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IAErC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAEpC,YAAY,CAAC,EACT,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAEvD,2CAA2C;IAC3C,KAAK,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;IAE7C,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IAEtC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAeD,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EACvC,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,GAAG,aAAa,EACjB,EAAE,WAAW,CAAC,CAAC,CAAC,2CA+IhB"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,YAAY,EACZ,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAiB9B,OAAO,KAAK,EAEV,kBAAkB,EAClB,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAA0B,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AASxE,MAAM,WAAW,WAAW,CAAC,CAAC,CAC5B,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,UAAU,CAAC,EAAE,cAAc,CAAC,kBAAkB,GAAG,OAAO,CAAC,CAAA;IAEzD;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IAErC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAEpC,YAAY,CAAC,EACT,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAEvD,2CAA2C;IAC3C,KAAK,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;IAE7C,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IAEtC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE5B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAA;IAEjE,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;CACrC;AAeD,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EACvC,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,GAAG,aAAa,EACjB,EAAE,WAAW,CAAC,CAAC,CAAC,2CA+JhB"}

package/dist/types/system/l10n.d.ts

@@ -0,0 +1,10 @@
+import type { LocalizedString, LocalizedStrings } from "@internationalized/string";
+import { LocalizedStringFormatter } from "@internationalized/string";
+/**
+ * Provides localized string formatting for the current locale. Supports interpolating variables,
+ * selecting the correct pluralization, and formatting numbers. Automatically updates when the locale changes.
+ *
+ * @param strings - A mapping of languages to localized strings by key.
+ */
+export declare function useLocalizedStringFormatter<K extends string = string, T extends LocalizedString = string>(strings: LocalizedStrings<K, T>, packageName?: string): LocalizedStringFormatter<K, T>;
+//# sourceMappingURL=l10n.d.ts.map

package/dist/types/system/l10n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"l10n.d.ts","sourceRoot":"","sources":["../../../src/system/l10n.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,2BAA2B,CAAA;AAElC,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAIpE;;;;;GAKG;AACH,wBAAgB,2BAA2B,CACzC,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,CAAC,SAAS,eAAe,GAAG,MAAM,EAElC,OAAO,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAC/B,WAAW,CAAC,EAAE,MAAM,GACnB,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAOhC"}

package/dist/types/system/react-utils/sizing.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from "react";
+/**
+ * Extracted from Select.tsx in react-aria-components. Used as a workaround for https://github.com/adobe/react-spectrum/issues/9451
+ *
+ * @see https://github.com/adobe/react-spectrum/blob/245a7031367d5f1d1264071b5dd84cc7b367513e/packages/react-aria-components/src/Select.tsx#L166-L176
+ */
+export declare function useElementWidth(ref: RefObject<Element | null> | undefined): string | null;
+//# sourceMappingURL=sizing.d.ts.map

package/dist/types/system/react-utils/sizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,SAAS,iBAezE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/oui",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -50,14 +50,15 @@
     "storybook": "10.1.10",
     "tsx": "^4.21.0",
     "typescript": "5.7.3",
-    "@opengovsg/oui-theme": "0.0.45",
+    "@opengovsg/oui-theme": "0.0.46",
     "@oui/chromatic": "0.0.0",
-    "@oui/prettier-config": "0.0.0",
     "@oui/eslint-config": "0.0.0",
+    "@oui/prettier-config": "0.0.0",
     "@oui/typescript-config": "0.0.0"
   },
   "dependencies": {
     "@internationalized/date": "^3.10.1",
+    "@internationalized/string": "^3.2.7",
     "@react-aria/calendar": "^3.9.2",
     "@react-aria/focus": "^3.21.2",
     "@react-aria/i18n": "^3.12.13",
@@ -76,6 +77,7 @@
     "nanoid": "^5.1.5",
     "react-aria": "^3.41.1",
     "react-dropzone": "^14.3.8",
+    "react-phone-number-input": "^3.4.14",
     "react-stately": "^3.41.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "sonner": "^2.0.7",
@@ -88,7 +90,7 @@
     "motion": ">=11.12.0 || >=12.0.0-alpha.1",
     "react": ">= 18",
     "react-aria-components": "^1.14.0",
-    "@opengovsg/oui-theme": "0.0.45"
+    "@opengovsg/oui-theme": "0.0.46"
   },
   "scripts": {
     "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",