@yr3/ui 1.0.18 → 1.0.20

package/dist/index.cjs

@@ -68,6 +68,7 @@ __export(index_exports, {
   NotistackProvider: () => NotistackProvider,
   Pending: () => Pending,
   Phone: () => Phone,
+  Picker: () => Picker,
   PlacesAutocomplete: () => PlacesAutocomplete,
   Radio: () => Radio,
   Select: () => Select,
@@ -152,6 +153,8 @@ var bemMerge = (...args) => {
 
 // src/utils/calendar.ts
 var import_dayjs = __toESM(require("dayjs"), 1);
+var import_updateLocale = __toESM(require("dayjs/plugin/updateLocale"), 1);
+import_dayjs.default.extend(import_updateLocale.default);
 function getMonthCalendar(year, month, startIndex, selected, props) {
   const today = (0, import_dayjs.default)().startOf("day");
   const startOfMonth = (0, import_dayjs.default)().year(year).month(month).startOf("month");
@@ -225,17 +228,23 @@ function getMonthCalendar(year, month, startIndex, selected, props) {
     currentDay: dayCurrent
   };
 }
-function getMonthCalendarProps({ year, years, month, formatMonth, monthsDisabled }) {
+function getMonthCalendarProps({ year, data, value, daysFormat }) {
   const startIndex = (0, import_dayjs.default)().year(year).month().valueOf();
+  import_dayjs.default.updateLocale("en", {
+    months: daysFormat?.months || ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"]
+  });
   return {
-    month: (0, import_dayjs.default)().set("m", month).format(formatMonth || "MMM"),
     year,
     startIndex,
-    years,
+    years: data.years,
+    value,
+    last: !value ? "" : (0, import_dayjs.default)().year(Number(value?.split("-")[1])).month(Number(value?.split("-")[0]) - 2).format("MM-YYYY"),
+    prev: !value ? "" : (0, import_dayjs.default)().year(Number(value?.split("-")[1])).month(Number(value?.split("-")[0])).format("MM-YYYY"),
     months: Array.from({ length: 12 }, (_, i) => ({
-      label: (0, import_dayjs.default)().month(i).format(formatMonth || "MMM"),
-      value: (0, import_dayjs.default)().month(i).format("MM"),
-      disabled: (0, import_dayjs.default)().year(year).month(i).isAfter((0, import_dayjs.default)(), "month") || monthsDisabled && monthsDisabled.includes(i)
+      label: (0, import_dayjs.default)().month(i).format(daysFormat?.month || "MMM"),
+      value: (0, import_dayjs.default)().month(i).format(daysFormat?.value || "MM"),
+      disabled: (0, import_dayjs.default)().year(year).month(i).isAfter((0, import_dayjs.default)(), "month") || data.exclude.find((e) => e.year === year)?.months.includes(i),
+      selected: !data.selected ? false : (0, import_dayjs.default)().year(year).month(Number(value?.split("-")[0]) - 1).format("MM") === (0, import_dayjs.default)().month(i).format(daysFormat?.value || "MM")
     }))
   };
 }
@@ -1727,6 +1736,23 @@ var monthSelectorIconVariants = createVariants({
     }
   }
 });
+var monthSelectorContainerVariants = createVariants({
+  base: "yr3MonthSelector--year-options",
+  variants: {
+    color: {
+      primary: "yr3MonthSelector--icon-color-primary",
+      secondary: "yr3MonthSelector--icon-color-secondary",
+      success: "yr3MonthSelector--icon-color-success",
+      text: "yr3MonthSelector--icon-color-text",
+      disabled: "yr3MonthSelector--icon-color-disabled",
+      background: "yr3MonthSelector--icon-color-background",
+      error: "yr3MonthSelector--icon-color-error",
+      warning: "yr3MonthSelector--icon-color-warning",
+      info: "yr3MonthSelector--icon-color-info",
+      common: "yr3MonthSelector--icon-color-common"
+    }
+  }
+});
 
 // src/Icons/IconRight.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -1770,17 +1796,37 @@ var initialPropsComponent3 = {
       height: 20
     },
     component: void 0
+  },
+  text: {
+    variant: "caption",
+    color: "primary",
+    ui: {},
+    style: {},
+    button: {}
+  },
+  container: {
+    color: "primary",
+    ui: {},
+    style: {}
   }
 };
-var MonthSelector = ({ label, year, month, value, defaultValue, propsComponent, years, language, formatMonth = "MMM", monthsDisabled }) => {
+var MonthSelector = ({ label, value, defaultValue, propsComponent, data, daysFormat, onNext, onLast }) => {
   const [open, setOpen] = React10.useState(false);
   const [valueState, setValueState] = React10.useState(value || defaultValue || null);
-  const [yearSelected, setYearSelected] = React10.useState(0);
+  const [yearSelected, setYearSelected] = React10.useState(data?.years.findIndex((y) => data.year) || 0);
   const ref = React10.useRef(null);
   useClickAway(ref, () => setOpen(false));
   const properties = mergeDeep(initialPropsComponent3, propsComponent || {});
   const iconClasses = monthSelectorIconVariants({ color: properties?.icon?.color });
-  const data = React10.useMemo(() => getMonthCalendarProps({ year, month, years, language, formatMonth, monthsDisabled }), [year, month, years, language, formatMonth, monthsDisabled]);
+  const containerClasses = monthSelectorContainerVariants({ color: properties?.container?.color });
+  const getData = React10.useMemo(() => getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState }), [yearSelected, data, daysFormat, valueState]);
+  React10.useEffect(() => {
+    if (onNext) onNext(getData.prev);
+    if (onLast) onLast(getData.last);
+  }, [getData]);
+  React10.useEffect(() => {
+    setValueState(value || defaultValue || null);
+  }, [value, defaultValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector", ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Input,
@@ -1820,34 +1866,42 @@ var MonthSelector = ({ label, year, month, value, defaultValue, propsComponent,
         style: composeStyles(properties?.wrapper?.ui, properties?.wrapper?.style),
         "data-testid": "yr3MonthSelector--wrapper",
         children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector--component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector--year-options", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { disabled: yearSelected === 0, type: "button", className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `, onClick: () => setYearSelected(yearSelected - 1), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLeft, { width: 20, height: 20, stroke: "currentColor" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Text, { variant: "body1", color: "primary", children: [
-              years[yearSelected],
-              " "
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              "button",
-              {
-                disabled: yearSelected === years.length - 1,
-                type: "button",
-                className: `yr3MonthSelector--year-button-next ${yearSelected === years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
-                onClick: () => setYearSelected(yearSelected + 1),
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconRight, { width: 20, height: 30, stroke: "currentColor" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "yr3MonthSelector--months", children: data.months.map((m) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "div",
+            {
+              className: containerClasses,
+              style: composeStyles(properties?.container?.ui, properties?.container?.style),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { disabled: yearSelected === 0, type: "button", className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `, onClick: () => setYearSelected(yearSelected - 1), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLeft, { width: 20, height: 20, stroke: "currentColor" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Text, { variant: "body1", color: "primary", children: [
+                  data.years[yearSelected],
+                  " "
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  "button",
+                  {
+                    disabled: yearSelected === data.years.length - 1,
+                    type: "button",
+                    className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
+                    onClick: () => setYearSelected(yearSelected + 1),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconRight, { width: 20, height: 30, stroke: "currentColor" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "yr3MonthSelector--months", children: getData.months.map((m) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "button",
             {
               type: "button",
+              style: properties?.text?.button,
               disabled: m.disabled,
-              className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month-disabled" : ""}`,
+              className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month--disabled" : ""} ${m.selected ? "yr3MonthSelector--month--selected" : ""}`,
               onClick: () => {
-                setValueState(`${m.value}-${years[yearSelected]}`);
+                setValueState(`${m.value}-${data.years[yearSelected]}`);
                 setOpen(false);
               },
-              children: m.label
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
             },
             "month-" + m.value
           )) })
@@ -2526,12 +2580,171 @@ var Pending = ({
   );
 };
 
+// src/components/Picker/Picker.tsx
+var React17 = __toESM(require("react"), 1);
+
+// src/components/Picker/picker.variants.ts
+var PickerVariants = createVariants({
+  base: "yr3Picker",
+  variants: {
+    variant: {
+      filled: "yr3Picker--filled",
+      outlined: "yr3Picker--outlined",
+      base: "yr3Picker--base",
+      lined: "yr3Picker--lined"
+    },
+    color: {
+      primary: "yr3Picker--color-primary",
+      secondary: "yr3Picker--color-secondary",
+      success: "yr3Picker--color-success",
+      text: "yr3Picker--color-text",
+      disabled: "yr3Picker--color-disabled",
+      background: "yr3Picker--color-background",
+      error: "yr3Picker--color-error",
+      warning: "yr3Picker--color-warning",
+      info: "yr3Picker--color-info",
+      common: "yr3Picker--color-common"
+    },
+    animated: {
+      true: "yr3Picker--animated"
+    },
+    icon: {
+      true: "yr3Picker--icon"
+    },
+    wrapper: {
+      true: "yr3Picker--wrapper"
+    }
+  }
+});
+var PickerIconVariants = createVariants({
+  base: "yr3Picker--icon",
+  variants: {
+    color: {
+      primary: "yr3Picker--icon-color-primary",
+      secondary: "yr3Picker--icon-color-secondary",
+      success: "yr3Picker--icon-color-success",
+      text: "yr3Picker--icon-color-text",
+      disabled: "yr3Picker--icon-color-disabled",
+      background: "yr3Picker--icon-color-background",
+      error: "yr3Picker--icon-color-error",
+      warning: "yr3Picker--icon-color-warning",
+      info: "yr3Picker--icon-color-info",
+      common: "yr3Picker--icon-color-common"
+    },
+    animated: {
+      true: "yr3Picker--icon-animated"
+    },
+    open: {
+      true: "yr3Picker--icon-open"
+    }
+  }
+});
+
+// src/components/Picker/Picker.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var initiaPropsComponent3 = {
+  control: {
+    variant: "outlined",
+    color: "primary",
+    ui: {},
+    style: {}
+  },
+  label: {
+    display: true,
+    color: "primary",
+    ui: {},
+    style: {}
+  },
+  wrapper: {
+    ui: {},
+    style: {}
+  },
+  icon: {
+    style: {
+      width: 24,
+      height: 24
+    },
+    color: "primary",
+    component: void 0
+  }
+};
+var Picker = ({ label, variant, color, children, name, value, onChange, propsComponent, closeOnSelect }) => {
+  const [open, setOpen] = React17.useState(false);
+  const [valueState, setValueState] = React17.useState(value || null);
+  const ref = React17.useRef(null);
+  useClickAway(ref, () => setOpen(false));
+  const properties = mergeDeep(initiaPropsComponent3, propsComponent || {});
+  const classesIcon = PickerIconVariants({ color: properties?.icon?.color, animated: open, open });
+  const classes = PickerVariants({ wrapper: true, variant, color });
+  React17.useEffect(() => {
+    if (value !== void 0) {
+      setValueState(value);
+    }
+  }, [value]);
+  React17.useEffect(() => {
+    if (closeOnSelect && valueState) {
+      setOpen(false);
+    }
+  }, [valueState, closeOnSelect]);
+  React17.useEffect(() => {
+    if (valueState !== null && onChange) {
+      onChange({ event: {}, target: { name, value: valueState }, currentTarget: { name, value: valueState } }, valueState);
+    }
+  }, [valueState, onChange, name]);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: classes, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      Input,
+      {
+        label,
+        variant: "base",
+        disabled: true,
+        color,
+        value: valueState || "",
+        propsComponent: {
+          control: {
+            variant,
+            color
+          },
+          label: properties?.label
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "div",
+      {
+        className: classesIcon,
+        style: properties?.icon?.style,
+        onClick: () => setOpen((prev) => !prev),
+        "data-testid": "yr3Picker--icon",
+        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          IconDown,
+          {
+            width: properties?.icon?.style?.width,
+            height: properties?.icon?.style?.height,
+            stroke: "currentColor",
+            style: properties?.icon?.style
+          }
+        )
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "div",
+      {
+        className: "yr3Picker--container",
+        style: composeStyles(properties?.wrapper?.ui, properties?.wrapper?.style),
+        "data-testid": "yr3Picker-container",
+        children
+      }
+    )
+  ] });
+};
+
 // src/components/Phone/Phone.tsx
-var React18 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 
 // src/components/Selector/Selector.tsx
-var React17 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var initalPropsComponent2 = {
   text: {
     variant: "caption",
@@ -2544,16 +2757,16 @@ var initalPropsComponent2 = {
   }
 };
 var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon, propsComponent = initalPropsComponent2 }) => {
-  const [open, setOpen] = React17.useState(false);
-  const [valueState, setValueState] = React17.useState(value || defaultValue || null);
-  const ref = React17.useRef(null);
+  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__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "yr3Selector-wrapper", ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "yr3Selector--control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "yr3Selector-wrapper", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "yr3Selector--control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
       valueState
     ] }) }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "yr3Selector--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent.menu?.style), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "yr3Selector--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent.menu?.style), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "div",
       {
         className: "yr3Selector--option",
@@ -2574,7 +2787,7 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
           };
           onChange?.(event, opt.value);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
       },
       opt.value
     )) })
@@ -2582,7 +2795,7 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
 };
 
 // src/components/Phone/Phone.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Phone = ({
   name,
   value,
@@ -2594,13 +2807,13 @@ var Phone = ({
 }) => {
   const isControlled = value !== void 0;
   const initial = value || defaultValue || "";
-  const [prefix, setPrefix] = React18.useState(
+  const [prefix, setPrefix] = React19.useState(
     getDialPhone(initial, countries) || countries[0].dial
   );
-  const [number, setNumber] = React18.useState(
+  const [number, setNumber] = React19.useState(
     getNumberPhone(initial, prefix) || ""
   );
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (isControlled && value) {
       const dial = getDialPhone(value, countries);
       const num = getNumberPhone(value, dial);
@@ -2619,10 +2832,10 @@ var Phone = ({
     setPrefix(val);
     onChange?.(null, `${val}${number}`);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label, { text: label, className: "yr3Input--active" }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { text: label, className: "yr3Input--active" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Selector,
         {
           options: countries.map((c) => ({
@@ -2634,7 +2847,7 @@ var Phone = ({
           ...propsComponent?.selector
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Divider,
         {
           orientation: "vertical",
@@ -2643,7 +2856,7 @@ var Phone = ({
           ...propsComponent?.divider
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Input,
         {
           type: "number",
@@ -2659,9 +2872,9 @@ var Phone = ({
 };
 
 // src/components/Places/PlacesAutocomplete.tsx
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 var import_autocomplete_places = require("@yr3/autocomplete-places");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var initPropsComponent = {
   label: {
     display: true,
@@ -2701,9 +2914,9 @@ var PlacesAutocomplete = ({
   keyApi,
   propsComponent = initPropsComponent
 }) => {
-  const [value, setValue] = React19.useState(null);
-  const inputRef = React19.useRef(null);
-  const [anchorEl, setAnchorEl] = React19.useState(null);
+  const [value, setValue] = React20.useState(null);
+  const inputRef = React20.useRef(null);
+  const [anchorEl, setAnchorEl] = React20.useState(null);
   const { suggestions, selectPlace } = (0, import_autocomplete_places.useAutocompletePlaces)({ input: value, apiKey: keyApi, language, provider });
   const handleSelect = async (id) => {
     const place = await selectPlace(id);
@@ -2723,12 +2936,12 @@ var PlacesAutocomplete = ({
     setValue(place.address);
     setAnchorEl(null);
   };
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (defaultLocation) {
       setValue(defaultLocation);
     }
   }, [defaultLocation]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (value === "") {
       onSelect(null);
     }
@@ -2738,13 +2951,13 @@ var PlacesAutocomplete = ({
     setAnchorEl(e.target.value ? inputRef.current : null);
   };
   const open = suggestions.length > 0 && Boolean(anchorEl);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (onChangeForm) {
       onChangeForm({ target: { value } });
     }
   }, [onChangeForm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Control, { ...propsComponent?.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Input,
       {
         ref: inputRef,
@@ -2758,7 +2971,7 @@ var PlacesAutocomplete = ({
       },
       "input-places"
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
+    open && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
   ] });
 };
 
@@ -2786,7 +2999,7 @@ var radioVariant = createVariants({
 });
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Radio = ({
   checked,
   value,
@@ -2802,8 +3015,8 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "input",
       {
         type: "radio",
@@ -2815,8 +3028,8 @@ var Radio = ({
       }
     ),
     iconChecked && checked ? iconChecked : !checked && iconUnchecked ? iconUnchecked : null,
-    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
-    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
+    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "span",
       {
         className: "yr3Radio--label",
@@ -2829,7 +3042,7 @@ var Radio = ({
 };
 
 // src/components/Select/Select.tsx
-var React20 = __toESM(require("react"), 1);
+var React21 = __toESM(require("react"), 1);
 
 // src/components/Select/select.variants.ts
 var selectVariants = createVariants({
@@ -2889,8 +3102,8 @@ var selectIconVariants = createVariants({
 });
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var initiaPropsComponent3 = {
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var initiaPropsComponent4 = {
   control: {
     variant: "outlined",
     color: "primary",
@@ -2929,15 +3142,15 @@ var initiaPropsComponent3 = {
   }
 };
 var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
-  const [open, setOpen] = React20.useState(false);
-  const [valueState, setValueState] = React20.useState(value || defaultValue || null);
-  const ref = React20.useRef(null);
+  const [open, setOpen] = React21.useState(false);
+  const [valueState, setValueState] = React21.useState(value || defaultValue || null);
+  const ref = React21.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  const properties = mergeDeep(initiaPropsComponent3, propsComponent || {});
+  const properties = mergeDeep(initiaPropsComponent4, propsComponent || {});
   const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
   const classes = selectVariants({ wrapper: true });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: classes, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: classes, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Input,
       {
         label,
@@ -2950,14 +3163,14 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
         className: classesIcon,
         style: properties?.icon?.style,
         onClick: () => setOpen((prev) => !prev),
         "data-testid": "yr3Select-icon",
-        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           IconDown,
           {
             width: properties?.icon?.style?.width,
@@ -2968,13 +3181,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         )
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
         className: "yr3Select--menu",
         style: composeStyles(properties?.menu?.ui, properties?.menu?.style),
         "data-testid": "yr3Select-menu",
-        children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "div",
           {
             className: "yr3Select--option",
@@ -2996,7 +3209,7 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
               onChange?.(event, opt.value);
             },
             style: composeStyles(properties?.menu?.options?.ui, properties?.menu?.options?.style),
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
           },
           opt.value
         ))
@@ -3006,8 +3219,8 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 };
 
 // src/components/Slide/Slide.tsx
-var React21 = __toESM(require("react"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var initialPropsComponent5 = {
   slide: {
     ui: {},
@@ -3030,7 +3243,7 @@ var Slide = ({
     "in": !!inProp,
     "out": !inProp
   });
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -3040,19 +3253,19 @@ var Slide = ({
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
   const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       className: "yr3Slide",
       style: composeStyles(),
       "data-testid": "yr3Slide",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "div",
         {
           className: classNameContent,
           style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
           "data-testid": "yr3Slide-content",
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
         }
       )
     }
@@ -3060,7 +3273,7 @@ var Slide = ({
 };
 
 // src/components/Switch/Switch.tsx
-var React22 = __toESM(require("react"), 1);
+var React23 = __toESM(require("react"), 1);
 
 // src/components/Switch/switch.variants.ts
 var switchVariants = createVariants({
@@ -3097,7 +3310,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var Switch = ({
   checked,
   defaultChecked,
@@ -3109,7 +3322,7 @@ var Switch = ({
   placement = "end",
   propsComponent
 }) => {
-  const [internal, setInternal] = React22.useState(defaultChecked || false);
+  const [internal, setInternal] = React23.useState(defaultChecked || false);
   const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : internal;
@@ -3117,13 +3330,13 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "label",
     {
       className: classname,
       "data-testid": "yr3Switch",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "input",
           {
             type: "checkbox",
@@ -3132,8 +3345,8 @@ var Switch = ({
             disabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "yr3Switch--thumb" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "yr3Switch--thumb" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "span",
           {
             className: "yr3Switch--label",
@@ -3148,14 +3361,14 @@ var Switch = ({
 };
 
 // src/theme/ThemeProvider.tsx
-var React24 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 
 // src/theme/notistackContext.tsx
-var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var NotistackContext = React23.createContext(null);
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var NotistackContext = React24.createContext(null);
 var NotistackProvider = ({ children }) => {
-  const [snacks, setSnacks] = React23.useState([]);
+  const [snacks, setSnacks] = React24.useState([]);
   const notistack = (snack) => {
     const id = Date.now();
     setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
@@ -3170,13 +3383,13 @@ var NotistackProvider = ({ children }) => {
       setSnacks((prev) => prev.filter((s) => s.id !== id));
     }, duration + exitDuration);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Notistack, { ...snack }, snack.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Notistack, { ...snack }, snack.id)) })
   ] });
 };
 var useNotistack = () => {
-  const ctx = React23.useContext(NotistackContext);
+  const ctx = React24.useContext(NotistackContext);
   if (!ctx) {
     throw new Error("NotistackProvider missing");
   }
@@ -3184,15 +3397,15 @@ var useNotistack = () => {
 };
 
 // src/theme/ThemeProvider.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var ThemeContext = React24.createContext(null);
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var ThemeContext = React25.createContext(null);
 var ThemeProvider = ({ theme, children }) => {
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     applyTheme(theme);
   }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BackdropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(NotistackProvider, { children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(BackdropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(NotistackProvider, { children }) }) });
 };
-var useTheme = () => React24.useContext(ThemeContext);
+var useTheme = () => React25.useContext(ThemeContext);
 
 // src/theme/tokens.ts
 var baseTokens = {
@@ -3213,15 +3426,15 @@ var baseTokens = {
 };
 
 // src/theme/useMediaQuery.tsx
-var React25 = __toESM(require("react"), 1);
+var React26 = __toESM(require("react"), 1);
 function useMediaQuery(query) {
   const theme = useTheme();
   const computedQuery = typeof query === "function" ? query(theme) : query;
-  const [matches, setMatches] = React25.useState(() => {
+  const [matches, setMatches] = React26.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(computedQuery).matches;
   });
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(computedQuery);
     const listener = () => setMatches(media.matches);
@@ -3255,7 +3468,7 @@ var usePlaces = ({ input, language, apiKey, provider }) => {
 };
 
 // src/hooks/useBreakpoint.ts
-var React26 = __toESM(require("react"), 1);
+var React27 = __toESM(require("react"), 1);
 var breakUp = (bp) => `(min-width: ${bp}px)`;
 var breakDown = (bp) => `(max-width: ${bp}px)`;
 function useBreakpoint(queryInput) {
@@ -3265,8 +3478,8 @@ function useBreakpoint(queryInput) {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   };
-  const [matches, setMatches] = React26.useState(getMatch);
-  React26.useEffect(() => {
+  const [matches, setMatches] = React27.useState(getMatch);
+  React27.useEffect(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
     const listener = (e) => {
@@ -3331,6 +3544,7 @@ initTheme();
   NotistackProvider,
   Pending,
   Phone,
+  Picker,
   PlacesAutocomplete,
   Radio,
   Select,