@yr3/ui 1.0.18 → 1.0.20

package/dist/index.js

@@ -29,6 +29,8 @@ var bemMerge = (...args) => {
 
 // src/utils/calendar.ts
 import dayjs from "dayjs";
+import updatelocale from "dayjs/plugin/updateLocale";
+dayjs.extend(updatelocale);
 function getMonthCalendar(year, month, startIndex, selected, props) {
   const today = dayjs().startOf("day");
   const startOfMonth = dayjs().year(year).month(month).startOf("month");
@@ -102,17 +104,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 = dayjs().year(year).month().valueOf();
+  dayjs.updateLocale("en", {
+    months: daysFormat?.months || ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"]
+  });
   return {
-    month: dayjs().set("m", month).format(formatMonth || "MMM"),
     year,
     startIndex,
-    years,
+    years: data.years,
+    value,
+    last: !value ? "" : dayjs().year(Number(value?.split("-")[1])).month(Number(value?.split("-")[0]) - 2).format("MM-YYYY"),
+    prev: !value ? "" : dayjs().year(Number(value?.split("-")[1])).month(Number(value?.split("-")[0])).format("MM-YYYY"),
     months: Array.from({ length: 12 }, (_, i) => ({
-      label: dayjs().month(i).format(formatMonth || "MMM"),
-      value: dayjs().month(i).format("MM"),
-      disabled: dayjs().year(year).month(i).isAfter(dayjs(), "month") || monthsDisabled && monthsDisabled.includes(i)
+      label: dayjs().month(i).format(daysFormat?.month || "MMM"),
+      value: dayjs().month(i).format(daysFormat?.value || "MM"),
+      disabled: dayjs().year(year).month(i).isAfter(dayjs(), "month") || data.exclude.find((e) => e.year === year)?.months.includes(i),
+      selected: !data.selected ? false : dayjs().year(year).month(Number(value?.split("-")[0]) - 1).format("MM") === dayjs().month(i).format(daysFormat?.value || "MM")
     }))
   };
 }
@@ -1604,6 +1612,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
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -1647,17 +1672,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__ */ jsxs6("div", { className: "yr3MonthSelector", ref, children: [
     /* @__PURE__ */ jsx24(
       Input,
@@ -1697,34 +1742,42 @@ var MonthSelector = ({ label, year, month, value, defaultValue, propsComponent,
         style: composeStyles(properties?.wrapper?.ui, properties?.wrapper?.style),
         "data-testid": "yr3MonthSelector--wrapper",
         children: /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector--component", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector--year-options", children: [
-            /* @__PURE__ */ jsx24("button", { disabled: yearSelected === 0, type: "button", className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `, onClick: () => setYearSelected(yearSelected - 1), children: /* @__PURE__ */ jsx24(IconLeft, { width: 20, height: 20, stroke: "currentColor" }) }),
-            /* @__PURE__ */ jsx24("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ jsxs6(Text, { variant: "body1", color: "primary", children: [
-              years[yearSelected],
-              " "
-            ] }) }),
-            /* @__PURE__ */ jsx24(
-              "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__ */ jsx24(IconRight, { width: 20, height: 30, stroke: "currentColor" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx24("div", { className: "yr3MonthSelector--months", children: data.months.map((m) => /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: containerClasses,
+              style: composeStyles(properties?.container?.ui, properties?.container?.style),
+              children: [
+                /* @__PURE__ */ jsx24("button", { disabled: yearSelected === 0, type: "button", className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `, onClick: () => setYearSelected(yearSelected - 1), children: /* @__PURE__ */ jsx24(IconLeft, { width: 20, height: 20, stroke: "currentColor" }) }),
+                /* @__PURE__ */ jsx24("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ jsxs6(Text, { variant: "body1", color: "primary", children: [
+                  data.years[yearSelected],
+                  " "
+                ] }) }),
+                /* @__PURE__ */ jsx24(
+                  "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__ */ jsx24(IconRight, { width: 20, height: 30, stroke: "currentColor" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx24("div", { className: "yr3MonthSelector--months", children: getData.months.map((m) => /* @__PURE__ */ jsx24(
             "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__ */ jsx24(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
             },
             "month-" + m.value
           )) })
@@ -2403,12 +2456,171 @@ var Pending = ({
   );
 };
 
+// src/components/Picker/Picker.tsx
+import * as React17 from "react";
+
+// 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
+import { jsx as jsx37, jsxs as jsxs12 } from "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__ */ jsxs12("div", { className: classes, ref, children: [
+    /* @__PURE__ */ jsx37(
+      Input,
+      {
+        label,
+        variant: "base",
+        disabled: true,
+        color,
+        value: valueState || "",
+        propsComponent: {
+          control: {
+            variant,
+            color
+          },
+          label: properties?.label
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx37(
+      "div",
+      {
+        className: classesIcon,
+        style: properties?.icon?.style,
+        onClick: () => setOpen((prev) => !prev),
+        "data-testid": "yr3Picker--icon",
+        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx37(
+          IconDown,
+          {
+            width: properties?.icon?.style?.width,
+            height: properties?.icon?.style?.height,
+            stroke: "currentColor",
+            style: properties?.icon?.style
+          }
+        )
+      }
+    ),
+    open && /* @__PURE__ */ jsx37(
+      "div",
+      {
+        className: "yr3Picker--container",
+        style: composeStyles(properties?.wrapper?.ui, properties?.wrapper?.style),
+        "data-testid": "yr3Picker-container",
+        children
+      }
+    )
+  ] });
+};
+
 // src/components/Phone/Phone.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 
 // src/components/Selector/Selector.tsx
-import * as React17 from "react";
-import { jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
+import * as React18 from "react";
+import { jsx as jsx38, jsxs as jsxs13 } from "react/jsx-runtime";
 var initalPropsComponent2 = {
   text: {
     variant: "caption",
@@ -2421,16 +2633,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__ */ jsxs12("div", { className: "yr3Selector-wrapper", ref, children: [
-    /* @__PURE__ */ jsx37("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ jsxs12("div", { className: "yr3Selector--control", children: [
-      /* @__PURE__ */ jsx37("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ jsx37(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
+  return /* @__PURE__ */ jsxs13("div", { className: "yr3Selector-wrapper", ref, children: [
+    /* @__PURE__ */ jsx38("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ jsxs13("div", { className: "yr3Selector--control", children: [
+      /* @__PURE__ */ jsx38("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ jsx38(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
       valueState
     ] }) }),
-    open && /* @__PURE__ */ jsx37("div", { className: "yr3Selector--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent.menu?.style), children: options.map((opt) => /* @__PURE__ */ jsx37(
+    open && /* @__PURE__ */ jsx38("div", { className: "yr3Selector--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent.menu?.style), children: options.map((opt) => /* @__PURE__ */ jsx38(
       "div",
       {
         className: "yr3Selector--option",
@@ -2451,7 +2663,7 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
           };
           onChange?.(event, opt.value);
         },
-        children: /* @__PURE__ */ jsx37(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
+        children: /* @__PURE__ */ jsx38(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
       },
       opt.value
     )) })
@@ -2459,7 +2671,7 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
 };
 
 // src/components/Phone/Phone.tsx
-import { jsx as jsx38, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs14 } from "react/jsx-runtime";
 var Phone = ({
   name,
   value,
@@ -2471,13 +2683,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);
@@ -2496,10 +2708,10 @@ var Phone = ({
     setPrefix(val);
     onChange?.(null, `${val}${number}`);
   };
-  return /* @__PURE__ */ jsxs13(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
-    /* @__PURE__ */ jsx38(Label, { text: label, className: "yr3Input--active" }),
-    /* @__PURE__ */ jsxs13(Flex, { variant: "row", container: true, center: true, children: [
-      /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs14(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
+    /* @__PURE__ */ jsx39(Label, { text: label, className: "yr3Input--active" }),
+    /* @__PURE__ */ jsxs14(Flex, { variant: "row", container: true, center: true, children: [
+      /* @__PURE__ */ jsx39(
         Selector,
         {
           options: countries.map((c) => ({
@@ -2511,7 +2723,7 @@ var Phone = ({
           ...propsComponent?.selector
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         Divider,
         {
           orientation: "vertical",
@@ -2520,7 +2732,7 @@ var Phone = ({
           ...propsComponent?.divider
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         Input,
         {
           type: "number",
@@ -2536,9 +2748,9 @@ var Phone = ({
 };
 
 // src/components/Places/PlacesAutocomplete.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { useAutocompletePlaces } from "@yr3/autocomplete-places";
-import { jsx as jsx39, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
 var initPropsComponent = {
   label: {
     display: true,
@@ -2578,9 +2790,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 } = useAutocompletePlaces({ input: value, apiKey: keyApi, language, provider });
   const handleSelect = async (id) => {
     const place = await selectPlace(id);
@@ -2600,12 +2812,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);
     }
@@ -2615,13 +2827,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__ */ jsxs14(Control, { ...propsComponent?.control, children: [
-    /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs15(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ jsx40(
       Input,
       {
         ref: inputRef,
@@ -2635,7 +2847,7 @@ var PlacesAutocomplete = ({
       },
       "input-places"
     ),
-    open && /* @__PURE__ */ jsx39("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ jsx39(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ jsx39(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ jsx39(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
+    open && /* @__PURE__ */ jsx40("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ jsx40(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ jsx40(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ jsx40(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
   ] });
 };
 
@@ -2663,7 +2875,7 @@ var radioVariant = createVariants({
 });
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
 var Radio = ({
   checked,
   value,
@@ -2679,8 +2891,8 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  return /* @__PURE__ */ jsxs15("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs16("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
+    /* @__PURE__ */ jsx41(
       "input",
       {
         type: "radio",
@@ -2692,8 +2904,8 @@ var Radio = ({
       }
     ),
     iconChecked && checked ? iconChecked : !checked && iconUnchecked ? iconUnchecked : null,
-    !iconChecked && !iconUnchecked && /* @__PURE__ */ jsx40("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
-    typeof label === "string" && /* @__PURE__ */ jsx40(
+    !iconChecked && !iconUnchecked && /* @__PURE__ */ jsx41("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
+    typeof label === "string" && /* @__PURE__ */ jsx41(
       "span",
       {
         className: "yr3Radio--label",
@@ -2706,7 +2918,7 @@ var Radio = ({
 };
 
 // src/components/Select/Select.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 
 // src/components/Select/select.variants.ts
 var selectVariants = createVariants({
@@ -2766,8 +2978,8 @@ var selectIconVariants = createVariants({
 });
 
 // src/components/Select/Select.tsx
-import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
-var initiaPropsComponent3 = {
+import { jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
+var initiaPropsComponent4 = {
   control: {
     variant: "outlined",
     color: "primary",
@@ -2806,15 +3018,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__ */ jsxs16("div", { className: classes, ref, children: [
-    /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs17("div", { className: classes, ref, children: [
+    /* @__PURE__ */ jsx42(
       Input,
       {
         label,
@@ -2827,14 +3039,14 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         }
       }
     ),
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(
       "div",
       {
         className: classesIcon,
         style: properties?.icon?.style,
         onClick: () => setOpen((prev) => !prev),
         "data-testid": "yr3Select-icon",
-        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx41(
+        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx42(
           IconDown,
           {
             width: properties?.icon?.style?.width,
@@ -2845,13 +3057,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         )
       }
     ),
-    open && /* @__PURE__ */ jsx41(
+    open && /* @__PURE__ */ jsx42(
       "div",
       {
         className: "yr3Select--menu",
         style: composeStyles(properties?.menu?.ui, properties?.menu?.style),
         "data-testid": "yr3Select-menu",
-        children: options.map((opt) => /* @__PURE__ */ jsx41(
+        children: options.map((opt) => /* @__PURE__ */ jsx42(
           "div",
           {
             className: "yr3Select--option",
@@ -2873,7 +3085,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__ */ jsx41(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
+            children: /* @__PURE__ */ jsx42(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
           },
           opt.value
         ))
@@ -2883,8 +3095,8 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 };
 
 // src/components/Slide/Slide.tsx
-import * as React21 from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import * as React22 from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var initialPropsComponent5 = {
   slide: {
     ui: {},
@@ -2907,7 +3119,7 @@ var Slide = ({
     "in": !!inProp,
     "out": !inProp
   });
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -2917,19 +3129,19 @@ var Slide = ({
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
   const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: "yr3Slide",
       style: composeStyles(),
       "data-testid": "yr3Slide",
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         "div",
         {
           className: classNameContent,
           style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
           "data-testid": "yr3Slide-content",
-          children: /* @__PURE__ */ jsx42(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
+          children: /* @__PURE__ */ jsx43(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
         }
       )
     }
@@ -2937,7 +3149,7 @@ var Slide = ({
 };
 
 // src/components/Switch/Switch.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 
 // src/components/Switch/switch.variants.ts
 var switchVariants = createVariants({
@@ -2974,7 +3186,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
 var Switch = ({
   checked,
   defaultChecked,
@@ -2986,7 +3198,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;
@@ -2994,13 +3206,13 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "label",
     {
       className: classname,
       "data-testid": "yr3Switch",
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "input",
           {
             type: "checkbox",
@@ -3009,8 +3221,8 @@ var Switch = ({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx43("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx43("span", { className: "yr3Switch--thumb" }) }),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx44("span", { className: "yr3Switch--thumb" }) }),
+        /* @__PURE__ */ jsx44(
           "span",
           {
             className: "yr3Switch--label",
@@ -3025,14 +3237,14 @@ var Switch = ({
 };
 
 // src/theme/ThemeProvider.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 
 // src/theme/notistackContext.tsx
-import * as React23 from "react";
-import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
-var NotistackContext = React23.createContext(null);
+import * as React24 from "react";
+import { jsx as jsx45, jsxs as jsxs19 } from "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 }]);
@@ -3047,13 +3259,13 @@ var NotistackProvider = ({ children }) => {
       setSnacks((prev) => prev.filter((s) => s.id !== id));
     }, duration + exitDuration);
   };
-  return /* @__PURE__ */ jsxs18(NotistackContext.Provider, { value: { notistack }, children: [
+  return /* @__PURE__ */ jsxs19(NotistackContext.Provider, { value: { notistack }, children: [
     children,
-    /* @__PURE__ */ jsx44("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx44(Notistack, { ...snack }, snack.id)) })
+    /* @__PURE__ */ jsx45("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx45(Notistack, { ...snack }, snack.id)) })
   ] });
 };
 var useNotistack = () => {
-  const ctx = React23.useContext(NotistackContext);
+  const ctx = React24.useContext(NotistackContext);
   if (!ctx) {
     throw new Error("NotistackProvider missing");
   }
@@ -3061,15 +3273,15 @@ var useNotistack = () => {
 };
 
 // src/theme/ThemeProvider.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
-var ThemeContext = React24.createContext(null);
+import { jsx as jsx46 } from "react/jsx-runtime";
+var ThemeContext = React25.createContext(null);
 var ThemeProvider = ({ theme, children }) => {
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     applyTheme(theme);
   }, [theme]);
-  return /* @__PURE__ */ jsx45(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx45(BackdropProvider, { children: /* @__PURE__ */ jsx45(NotistackProvider, { children }) }) });
+  return /* @__PURE__ */ jsx46(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx46(BackdropProvider, { children: /* @__PURE__ */ jsx46(NotistackProvider, { children }) }) });
 };
-var useTheme = () => React24.useContext(ThemeContext);
+var useTheme = () => React25.useContext(ThemeContext);
 
 // src/theme/tokens.ts
 var baseTokens = {
@@ -3090,15 +3302,15 @@ var baseTokens = {
 };
 
 // src/theme/useMediaQuery.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 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);
@@ -3132,7 +3344,7 @@ var usePlaces = ({ input, language, apiKey, provider }) => {
 };
 
 // src/hooks/useBreakpoint.ts
-import * as React26 from "react";
+import * as React27 from "react";
 var breakUp = (bp) => `(min-width: ${bp}px)`;
 var breakDown = (bp) => `(max-width: ${bp}px)`;
 function useBreakpoint(queryInput) {
@@ -3142,8 +3354,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) => {
@@ -3207,6 +3419,7 @@ export {
   NotistackProvider,
   Pending,
   Phone,
+  Picker,
   PlacesAutocomplete,
   Radio,
   Select,