@yr3/ui 1.0.4 → 1.0.6

package/dist/index.js

@@ -250,6 +250,49 @@ var createVariants = (config) => {
   };
 };
 
+// src/utils/phone.ts
+var normalizePhone = (phone, dial) => {
+  if (!phone) return null;
+  let clean = phone.replace(/[^\d+]/g, "");
+  let number = clean;
+  if (clean.startsWith(dial)) {
+    number = clean.slice(dial.length);
+  } else if (clean.startsWith("+")) {
+    const match = clean.match(/^\+\d{1,3}(.*)$/);
+    if (match) {
+      number = match[1];
+    }
+  }
+  number = number.replace(/^0+/, "");
+  return {
+    number,
+    full: `${dial}${number}`
+  };
+};
+var getDialPhone = (phone, countries) => {
+  for (const country of countries) {
+    console.log("checking", phone, "against", country.dial);
+    if (phone.startsWith(country.dial)) {
+      return country.dial;
+    }
+  }
+  return null;
+};
+var getCountryCodePhone = (phone, countries) => {
+  for (const country of countries) {
+    if (phone.startsWith(country.dial)) {
+      return country.code;
+    }
+  }
+  return null;
+};
+var getNumberPhone = (phone, dial) => {
+  if (phone.startsWith(dial)) {
+    return phone.slice(dial.length);
+  }
+  return phone;
+};
+
 // src/theme/breakpoint.ts
 var breakpoints = {
   xs: 0,
@@ -413,6 +456,9 @@ function initTheme() {
   applyTheme(createTheme());
 }
 
+// src/index.ts
+export * from "@yr3/autocomplete-places";
+
 // src/components/Avatar/Avatar.tsx
 import * as React from "react";
 
@@ -1569,143 +1615,13 @@ var Input = React12.forwardRef(
           "data-testid": "yr3Input"
         }
       ),
-      /* @__PURE__ */ jsx24(Text, { variant: "helper", "data-testid": "yr3Input-helper", children: error || internalError || "" })
+      /* @__PURE__ */ jsx24(Text, { variant: "helper", color: "disabled", "data-testid": "yr3Input-helper", ui: { position: "absolute", bottom: -18, left: 0 }, children: error || internalError || "" })
     ] });
   }
 );
 
-// src/components/Input/InputPhone.tsx
-import * as React15 from "react";
-
-// src/components/Select/Selector.tsx
-import * as React13 from "react";
-
-// src/Icons/IconDown.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var IconDown = (props) => {
-  return /* @__PURE__ */ jsx25("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "yr3Icons", children: /* @__PURE__ */ jsx25("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-};
-
-// src/components/Select/Selector.tsx
-import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
-var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon }) => {
-  const [open, setOpen] = React13.useState(false);
-  const [valueState, setValueState] = React13.useState(value || defaultValue || null);
-  const ref = React13.useRef(null);
-  useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ jsxs7("div", { className: "yr3Selector-wrapper", ref, children: [
-    /* @__PURE__ */ jsx26("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ jsxs7("div", { className: "yr3Selector--control", children: [
-      /* @__PURE__ */ jsx26("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ jsx26(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
-      valueState
-    ] }) }),
-    open && /* @__PURE__ */ jsx26("div", { className: "yr3Select--menu", children: options.map((opt) => /* @__PURE__ */ jsx26(
-      "div",
-      {
-        className: "yr3Select--option",
-        onClick: (e) => {
-          e.stopPropagation();
-          setValueState(opt.value);
-          setOpen(false);
-          const event = {
-            event: e,
-            target: {
-              name,
-              value: opt.value
-            },
-            currentTarget: {
-              name,
-              value: opt.value
-            }
-          };
-          onChange?.(event, opt.value);
-        },
-        children: opt.label
-      },
-      opt.value
-    )) })
-  ] });
-};
-var Selector_default = Selector;
-
-// src/theme/ThemeProvider.tsx
-import * as React14 from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var ThemeContext = React14.createContext(null);
-var ThemeProvider = ({ theme, children }) => {
-  React14.useEffect(() => {
-    applyTheme(theme);
-  }, [theme]);
-  return /* @__PURE__ */ jsx27(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx27(BackdropProvider, { children }) });
-};
-var useTheme = () => React14.useContext(ThemeContext);
-
-// src/components/Input/InputPhone.tsx
-import { jsx as jsx28, jsxs as jsxs8 } from "react/jsx-runtime";
-var Phone = ({
-  name,
-  value,
-  onChange,
-  prefix = "+39",
-  label = "Phone",
-  countries = [],
-  propsComponent
-}) => {
-  const [prefixValue, setPrefixValue] = React15.useState(prefix);
-  const [number, setNumber] = React15.useState(Number(value) || null);
-  const theme = useTheme();
-  const handleChange = (newPrefix, newNumber) => {
-    const full = `${newPrefix}${newNumber.toString()}`;
-    const event = {
-      target: {
-        name,
-        value: full
-      }
-    };
-    onChange?.(event, full);
-  };
-  return /* @__PURE__ */ jsxs8(Control, { variant: "outlined", children: [
-    /* @__PURE__ */ jsx28(Label, { text: label, className: "yr3Input--active" }),
-    /* @__PURE__ */ jsx28("div", { className: "yr3PhoneInput", "data-testid": "yr3Phone", children: /* @__PURE__ */ jsxs8(Flex, { variant: "row", container: true, center: true, children: [
-      /* @__PURE__ */ jsx28(
-        Selector_default,
-        {
-          options: countries.map((c) => ({
-            value: c.dial,
-            label: c.code
-          })),
-          value: prefixValue,
-          onChange: (_, val) => {
-            setPrefixValue(val);
-            handleChange(val, number);
-          },
-          ...propsComponent?.selector,
-          ui: {
-            ...propsComponent?.selector?.ui,
-            padding: 4
-          },
-          style: propsComponent?.selector?.style
-        }
-      ),
-      /* @__PURE__ */ jsx28(Divider, { orientation: "vertical", ...propsComponent?.divider }),
-      /* @__PURE__ */ jsx28(
-        Input,
-        {
-          type: "phone",
-          variant: "base",
-          value: number,
-          ...propsComponent?.input,
-          onChange: (e, value2) => {
-            setNumber(value2);
-            handleChange(prefixValue, value2);
-          }
-        }
-      )
-    ] }) })
-  ] });
-};
-
 // src/components/InputArea/InputArea.tsx
-import * as React16 from "react";
+import * as React13 from "react";
 
 // src/components/InputArea/inputAreaVariants.ts
 var inputAreaVariants = createVariants({
@@ -1741,7 +1657,7 @@ var inputAreaVariants = createVariants({
 });
 
 // src/components/InputArea/InputArea.tsx
-import { jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
 var initiaPropsComponent2 = {
   label: {
     display: true,
@@ -1766,8 +1682,8 @@ var InputArea = ({
   rounded = false,
   propsComponent = initiaPropsComponent2
 }) => {
-  const ref = React16.useRef(null);
-  const [internalValue, setInternalValue] = React16.useState(defaultValue);
+  const ref = React13.useRef(null);
+  const [internalValue, setInternalValue] = React13.useState(defaultValue);
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value : internalValue;
   const handleChange = (e) => {
@@ -1784,8 +1700,8 @@ var InputArea = ({
     el.style.resize = resize;
   }
   const classes = inputAreaVariants({ variant, color, rounded });
-  return /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
-    propsComponent?.label?.display && /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs7("div", { style: { position: "relative" }, children: [
+    propsComponent?.label?.display && /* @__PURE__ */ jsx25(
       Label,
       {
         text: label || "",
@@ -1793,7 +1709,7 @@ var InputArea = ({
         ...propsComponent.label
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx25(
       "textarea",
       {
         className: classes,
@@ -1805,26 +1721,26 @@ var InputArea = ({
         "data-testid": "yr3InputArea"
       }
     ),
-    /* @__PURE__ */ jsx29(Text, { variant: "helper", color: currentValue.length > maxLength ? "error" : "disabled", ui: { textAlign: "right" }, "data-testid": "yr3InputAreaError", children: validate && maxLength ? `${currentValue.length}/${maxLength}` || propsComponent.helperText : "" })
+    /* @__PURE__ */ jsx25(Text, { variant: "helper", color: currentValue.length > maxLength ? "error" : "disabled", ui: { textAlign: "right" }, "data-testid": "yr3InputAreaError", children: validate && maxLength ? `${currentValue.length}/${maxLength}` || propsComponent.helperText : "" })
   ] });
 };
 
 // src/components/Modal/Modal.tsx
-import * as React17 from "react";
+import * as React14 from "react";
 
 // src/components/Modal/ModalContainer.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ModalContainer = ({ children, size = "sm", ui, style }) => {
   const classes = bem("yr3Modal-container");
   const classComponent = classes(void 0, { [`${size}`]: !!size });
-  return /* @__PURE__ */ jsx30("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
+  return /* @__PURE__ */ jsx26("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
 var Modal = ({ open, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
-  React17.useEffect(() => {
+  React14.useEffect(() => {
     if (open) {
       show();
     } else {
@@ -1833,9 +1749,9 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
   }, [open, show]);
   const classes = bem("yr3Modal");
   const classComponent = classes(void 0, { "open": !!open });
-  return /* @__PURE__ */ jsx31("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ jsx31(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ jsxs10(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
+  return /* @__PURE__ */ jsx27("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ jsx27(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ jsxs8(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
     children,
-    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ jsx31(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
+    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ jsx27(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
   ] }) }) });
 };
 
@@ -1875,15 +1791,15 @@ var notistackVariants = createVariants({
 });
 
 // src/components/Notistack/Notistack.tsx
-import { jsx as jsx32, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
 var Notistack = ({ message, duration = 3e3, variant = "info", color, propsComponent, anchor, exiting = false }) => {
   const classes = notistackVariants({ type: variant, color, exiting, direction: `${anchor?.vertical || "bottom"}-${anchor?.horizontal || "right"}` });
   const containerStyle = composeStyles(propsComponent?.container?.ui, propsComponent?.container?.style);
   const notistackStyle = composeStyles(propsComponent?.notistack?.ui, propsComponent?.notistack?.style);
   const progressStyle = composeStyles(propsComponent?.progress?.ui, propsComponent?.progress?.style);
-  return /* @__PURE__ */ jsxs11("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
-    /* @__PURE__ */ jsx32("span", { style: containerStyle, children: message }),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs9("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
+    /* @__PURE__ */ jsx28("span", { style: containerStyle, children: message }),
+    /* @__PURE__ */ jsx28(
       "div",
       {
         className: "yr3Notistack--progress",
@@ -1917,7 +1833,7 @@ var pendingVariants = createVariants({
 });
 
 // src/components/Pending/Pending.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var Pending = ({
   variant,
   width,
@@ -1930,7 +1846,7 @@ var Pending = ({
   const widthStyle = variant === "circle" ? size : width;
   const heightStyle = variant === "circle" ? size : height;
   const uiStylePending = uiStyle({ width: widthStyle, height: heightStyle, ...ui });
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       className: pendingVariants({ variant, color }),
@@ -1940,6 +1856,249 @@ var Pending = ({
   );
 };
 
+// src/components/Phone/Phone.tsx
+import * as React16 from "react";
+
+// src/components/Selector/Selector.tsx
+import * as React15 from "react";
+
+// src/Icons/IconDown.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+var IconDown = (props) => {
+  return /* @__PURE__ */ jsx30("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "yr3Icons", children: /* @__PURE__ */ jsx30("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+};
+
+// src/components/Selector/Selector.tsx
+import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
+var initalPropsComponent2 = {
+  text: {
+    variant: "caption",
+    color: "primary",
+    children: void 0
+  }
+};
+var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon, propsComponent = initalPropsComponent2 }) => {
+  const [open, setOpen] = React15.useState(false);
+  const [valueState, setValueState] = React15.useState(value || defaultValue || null);
+  const ref = React15.useRef(null);
+  useClickAway(ref, () => setOpen(false));
+  return /* @__PURE__ */ jsxs10("div", { className: "yr3Selector-wrapper", ref, children: [
+    /* @__PURE__ */ jsx31("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ jsxs10("div", { className: "yr3Selector--control", children: [
+      /* @__PURE__ */ jsx31("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ jsx31(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
+      valueState
+    ] }) }),
+    open && /* @__PURE__ */ jsx31("div", { className: "yr3Selector--menu", children: options.map((opt) => /* @__PURE__ */ jsx31(
+      "div",
+      {
+        className: "yr3Selector--option",
+        onClick: (e) => {
+          e.stopPropagation();
+          setValueState(opt.value);
+          setOpen(false);
+          const event = {
+            event: e,
+            target: {
+              name,
+              value: opt.value
+            },
+            currentTarget: {
+              name,
+              value: opt.value
+            }
+          };
+          onChange?.(event, opt.value);
+        },
+        children: /* @__PURE__ */ jsx31(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
+      },
+      opt.value
+    )) })
+  ] });
+};
+var Selector_default = Selector;
+
+// src/components/Phone/Phone.tsx
+import { jsx as jsx32, jsxs as jsxs11 } from "react/jsx-runtime";
+var Phone = ({
+  name,
+  value,
+  onChange,
+  label = "Phone",
+  countries,
+  propsComponent,
+  defaultValue
+}) => {
+  const [prefixValue, setPrefixValue] = React16.useState(countries?.[0].dial);
+  const [internalValue, setInternalValue] = React16.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const checkPattern = (type, value2) => {
+    switch (type) {
+      case "phone":
+        return /^\d{10}$/.test(value2);
+      default:
+        return true;
+    }
+  };
+  React16.useEffect(() => {
+    if (internalValue && countries.length > 0) {
+      const dial = getDialPhone(internalValue, countries) || null;
+      setPrefixValue(dial);
+    }
+  }, [internalValue, countries]);
+  const handleChange = (e, value2) => {
+    const newValue = value2;
+    const isValid = checkPattern("phone", newValue);
+    if (!isValid) {
+      return;
+    }
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(e, normalizePhone(currentValue, prefixValue)?.full);
+  };
+  return /* @__PURE__ */ jsxs11(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
+    /* @__PURE__ */ jsx32(Label, { text: label, className: "yr3Input--active" }),
+    /* @__PURE__ */ jsx32("div", { className: "yr3PhoneInput", "data-testid": "yr3Phone", children: /* @__PURE__ */ jsxs11(Flex, { variant: "row", container: true, center: true, children: [
+      /* @__PURE__ */ jsx32(
+        Selector_default,
+        {
+          options: countries.map((c) => ({
+            value: c.dial,
+            label: c.code
+          })),
+          value: prefixValue,
+          onChange: (_, val) => {
+            setPrefixValue(val);
+          },
+          ...propsComponent?.selector,
+          ui: {
+            ...propsComponent?.selector?.ui,
+            padding: 4
+          },
+          style: propsComponent?.selector?.style
+        }
+      ),
+      /* @__PURE__ */ jsx32(Divider, { orientation: "vertical", color: "primary", ui: { height: 50 - 1, mb: -1 }, ...propsComponent?.divider }),
+      /* @__PURE__ */ jsx32(
+        Input,
+        {
+          type: "phone",
+          variant: "base",
+          name,
+          value: normalizePhone(currentValue, prefixValue)?.number.toString() || "",
+          ...propsComponent?.input,
+          onChange: handleChange
+        },
+        currentValue
+      )
+    ] }) })
+  ] }, prefixValue);
+};
+
+// src/components/Places/PlacesAutocomplete.tsx
+import * as React17 from "react";
+import { useAutocompletePlaces } from "@yr3/autocomplete-places";
+import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
+var initPropsComponent = {
+  label: {
+    display: true,
+    ui: {},
+    style: {}
+  },
+  control: {
+    variant: "outlined",
+    color: "primary",
+    label: true,
+    ui: {},
+    style: {}
+  },
+  input: {
+    variant: "outlined",
+    color: "primary",
+    ui: { width: "90dvw" },
+    style: {}
+  },
+  menu: {
+    ui: {},
+    style: {},
+    text: {
+      variant: "body2",
+      color: "primary",
+      ui: {},
+      style: {}
+    }
+  }
+};
+var PlacesAutocomplete = ({
+  onSelect,
+  onChangeForm,
+  language = "en",
+  provider = "google",
+  defaultLocation,
+  keyApi,
+  propsComponent = initPropsComponent
+}) => {
+  const [value, setValue] = React17.useState(null);
+  const inputRef = React17.useRef(null);
+  const [anchorEl, setAnchorEl] = React17.useState(null);
+  const { suggestions, selectPlace } = useAutocompletePlaces({ input: value, apiKey: keyApi, language, provider });
+  const handleSelect = async (id) => {
+    const place = await selectPlace(id);
+    const locationData = {
+      name: place.name || "",
+      address: place.address,
+      city: place.city || "",
+      country: place.country || "",
+      zip: place.zip || "",
+      lat: place.lat,
+      lng: place.lng,
+      code: place.code || "",
+      phone: place.phone || "",
+      placeId: id
+    };
+    onSelect(locationData);
+    setValue(place.address);
+    setAnchorEl(null);
+  };
+  React17.useEffect(() => {
+    if (defaultLocation) {
+      setValue(defaultLocation);
+    }
+  }, [defaultLocation]);
+  React17.useEffect(() => {
+    if (value === "") {
+      onSelect(null);
+    }
+  }, [value]);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    setAnchorEl(e.target.value ? inputRef.current : null);
+  };
+  const open = suggestions.length > 0 && Boolean(anchorEl);
+  React17.useEffect(() => {
+    if (onChangeForm) {
+      onChangeForm({ target: { value } });
+    }
+  }, [onChangeForm]);
+  return /* @__PURE__ */ jsxs12(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ jsx33(
+      Input,
+      {
+        ref: inputRef,
+        type: "text",
+        value,
+        onChange: handleChange,
+        propsComponent: {
+          label: propsComponent.label
+        },
+        ...propsComponent?.input
+      },
+      "input-places"
+    ),
+    open && /* @__PURE__ */ jsx33("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ jsx33(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ jsx33(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ jsx33(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
+  ] });
+};
+
 // src/components/Radio/radio.variants.ts
 var radioVariant = createVariants({
   base: "yr3Radio",
@@ -1959,7 +2118,7 @@ var radioVariant = createVariants({
 });
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx34, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 var Radio = ({
   checked,
   value,
@@ -1975,7 +2134,7 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  return /* @__PURE__ */ jsxs12("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
+  return /* @__PURE__ */ jsxs13("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
     /* @__PURE__ */ jsx34(
       "input",
       {
@@ -2003,13 +2162,13 @@ var Radio = ({
 
 // src/components/Select/Select.tsx
 import * as React18 from "react";
-import { jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
 var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
   const [open, setOpen] = React18.useState(false);
   const [valueState, setValueState] = React18.useState(value || defaultValue || null);
   const ref = React18.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ jsxs13(Control, { ...propsComponent?.control, children: [
+  return /* @__PURE__ */ jsxs14(Control, { ...propsComponent?.control, children: [
     /* @__PURE__ */ jsx35(
       Label,
       {
@@ -2018,8 +2177,8 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         className: open || valueState ? "yr3Input--active" : ""
       }
     ),
-    /* @__PURE__ */ jsxs13("div", { className: "yr3Select-wrapper", ref, children: [
-      /* @__PURE__ */ jsxs13("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
+    /* @__PURE__ */ jsxs14("div", { className: "yr3Select-wrapper", ref, children: [
+      /* @__PURE__ */ jsxs14("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
         /* @__PURE__ */ jsx35("div", { className: "yr3Select--control", children: valueState }),
         /* @__PURE__ */ jsx35("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ jsx35(
           IconDown,
@@ -2143,7 +2302,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var Switch = ({
   checked,
   defaultChecked,
@@ -2161,7 +2320,7 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "label",
     {
       className: classname,
@@ -2198,6 +2357,18 @@ var IconSearch = (props) => {
   ) });
 };
 
+// src/theme/ThemeProvider.tsx
+import * as React21 from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var ThemeContext = React21.createContext(null);
+var ThemeProvider = ({ theme, children }) => {
+  React21.useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsx39(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx39(BackdropProvider, { children }) });
+};
+var useTheme = () => React21.useContext(ThemeContext);
+
 // src/theme/tokens.ts
 var baseTokens = {
   colors: {
@@ -2217,11 +2388,11 @@ var baseTokens = {
 };
 
 // src/theme/notistackContext.tsx
-import * as React21 from "react";
-import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
-var NotistackContext = React21.createContext(null);
+import * as React22 from "react";
+import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
+var NotistackContext = React22.createContext(null);
 var NotistackProvider = ({ children }) => {
-  const [snacks, setSnacks] = React21.useState([]);
+  const [snacks, setSnacks] = React22.useState([]);
   const enqueueNotistack = (snack) => {
     const id = Date.now();
     setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
@@ -2236,23 +2407,23 @@ var NotistackProvider = ({ children }) => {
       setSnacks((prev) => prev.filter((s) => s.id !== id));
     }, duration + exitDuration);
   };
-  return /* @__PURE__ */ jsxs15(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
+  return /* @__PURE__ */ jsxs16(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
     children,
-    /* @__PURE__ */ jsx39("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx39(Notistack, { ...snack }, snack.id)) })
+    /* @__PURE__ */ jsx40("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx40(Notistack, { ...snack }, snack.id)) })
   ] });
 };
-var useNotistack = () => React21.useContext(NotistackContext);
+var useNotistack = () => React22.useContext(NotistackContext);
 
 // src/theme/useMediaQuery.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 function useMediaQuery(query) {
   const theme = useTheme();
   const computedQuery = typeof query === "function" ? query(theme) : query;
-  const [matches, setMatches] = React22.useState(() => {
+  const [matches, setMatches] = React23.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(computedQuery).matches;
   });
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(computedQuery);
     const listener = () => setMatches(media.matches);
@@ -2311,6 +2482,7 @@ export {
   NotistackProvider,
   Pending,
   Phone,
+  PlacesAutocomplete,
   Radio,
   Select,
   Slide,
@@ -2330,9 +2502,13 @@ export {
   createVariants,
   cx,
   getContrast,
+  getCountryCodePhone,
+  getDialPhone,
   getMonthCalendar,
+  getNumberPhone,
   initTheme,
   isEmpty,
+  normalizePhone,
   text,
   times,
   uiStyle,