@yr3/ui 1.0.17 → 1.0.18

package/dist/index.cjs

@@ -49,8 +49,10 @@ __export(index_exports, {
   Flex: () => Flex,
   Grid: () => Grid,
   Group: () => Group,
+  IconCalendar: () => IconCalendar,
   IconClose: () => IconClose,
   IconDown: () => IconDown,
+  IconLeft: () => IconLeft,
   IconSearch: () => IconSearch,
   Image: () => Image,
   ImageDropzone: () => ImageDropzone,
@@ -60,6 +62,7 @@ __export(index_exports, {
   Loader: () => Loader,
   Modal: () => Modal,
   ModalContainer: () => ModalContainer,
+  MonthSelector: () => MonthSelector,
   Notistack: () => Notistack,
   NotistackContext: () => NotistackContext,
   NotistackProvider: () => NotistackProvider,
@@ -68,6 +71,7 @@ __export(index_exports, {
   PlacesAutocomplete: () => PlacesAutocomplete,
   Radio: () => Radio,
   Select: () => Select,
+  Selector: () => Selector,
   Slide: () => Slide,
   Switch: () => Switch,
   Text: () => Text,
@@ -92,6 +96,7 @@ __export(index_exports, {
   getCountryCodePhone: () => getCountryCodePhone,
   getDialPhone: () => getDialPhone,
   getMonthCalendar: () => getMonthCalendar,
+  getMonthCalendarProps: () => getMonthCalendarProps,
   getNumberPhone: () => getNumberPhone,
   hexToRgb: () => hexToRgb,
   initTheme: () => initTheme,
@@ -220,6 +225,20 @@ function getMonthCalendar(year, month, startIndex, selected, props) {
     currentDay: dayCurrent
   };
 }
+function getMonthCalendarProps({ year, years, month, formatMonth, monthsDisabled }) {
+  const startIndex = (0, import_dayjs.default)().year(year).month().valueOf();
+  return {
+    month: (0, import_dayjs.default)().set("m", month).format(formatMonth || "MMM"),
+    year,
+    startIndex,
+    years,
+    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)
+    }))
+  };
+}
 
 // src/utils/color.ts
 var rgbToHex = (r, g, b) => {
@@ -1500,9 +1519,347 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
   );
 };
 
-// src/components/Fade/Fade.tsx
+// src/components/Input/Input.tsx
 var React9 = __toESM(require("react"), 1);
+
+// src/components/Label/Label.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var Label = ({ text: text2, children, className, color = "primary", ui, style }) => {
+  const classes = bem("yr3Label");
+  const classComponent = classes(void 0, { color: `color-${color}` });
+  const classnames = bemMerge(classComponent, className);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "span",
+    {
+      className: classnames,
+      "data-testid": "yr3Label",
+      style: composeStyles(ui, style),
+      children: text2 ? text2 : children
+    }
+  );
+};
+
+// src/components/Input/input.variants.ts
+var inputVariants = createVariants({
+  base: "yr3Input",
+  variants: {
+    variant: {
+      filled: "yr3Input--filled",
+      outlined: "yr3Input--outlined",
+      base: "yr3Input--base",
+      lined: "yr3Input--lined"
+    },
+    color: {
+      primary: "yr3Input--color-primary",
+      secondary: "yr3Input--color-secondary",
+      success: "yr3Input--color-success",
+      text: "yr3Input--color-text",
+      disabled: "yr3Input--color-disabled",
+      background: "yr3Input--color-background",
+      error: "yr3Input--color-error",
+      warning: "yr3Input--color-warning",
+      info: "yr3Input--color-info",
+      common: "yr3Input--color-common"
+    },
+    size: {
+      auto: "yr3Input--size-auto",
+      full: "yr3Input--size-full"
+    },
+    rounded: {
+      true: "yr3Input--rounded"
+    },
+    disabled: {
+      true: "yr3Input--disabled"
+    },
+    animated: {
+      true: "yr3Input--animated"
+    },
+    label: {
+      true: "yr3Input--label"
+    }
+  }
+});
+
+// src/components/Input/Input.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var initiaPropsComponent = {
+  label: {
+    display: true,
+    ui: {},
+    style: {}
+  },
+  control: {}
+};
+var Input = React9.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue,
+    onChange,
+    variant = "outlined",
+    error = "ce un errore",
+    separatorCurrency = ",",
+    ui,
+    style,
+    propsComponent = initiaPropsComponent,
+    pattern = "text",
+    color = "primary",
+    size = "auto",
+    ...props
+  }, ref) => {
+    const [focused, setFocused] = React9.useState(false);
+    const [internalValue, setInternalValue] = React9.useState(defaultValue);
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const isActive = focused || !!currentValue;
+    const checkPattern = (type, value2) => {
+      switch (type) {
+        case "email":
+          return /^[\w.-]+@[\w.-]+\.\w{2,}$/.test(value2);
+        case "phone":
+          return /^\d{10}$/.test(value2);
+        case "number":
+          return /^\d+$/.test(value2);
+        case "currency":
+          if (separatorCurrency === ",") return /^\d+(\,\d{0,2})?$/.test(value2);
+          if (separatorCurrency === ".") return /^\d+(\.\d{0,2})?$/.test(value2);
+        default:
+          return true;
+      }
+    };
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      if (newValue && !checkPattern(pattern, newValue)) return;
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(e, newValue);
+    };
+    const classes = inputVariants({ color, label: propsComponent?.label?.display });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Control, { variant, color, label: propsComponent?.label?.display, ...propsComponent.control, children: [
+      propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Label,
+        {
+          text: label || "",
+          className: !!isActive ? "yr3Input--active" : "",
+          color,
+          ...propsComponent.label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "input",
+        {
+          ref,
+          value: currentValue,
+          inputMode: pattern === "currency" ? "numeric" : pattern === "phone" ? "tel" : void 0,
+          autoComplete: "off",
+          type: "text",
+          onChange: handleChange,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          className: classes,
+          style: composeStyles(ui, style),
+          ...props,
+          "data-testid": "yr3Input"
+        }
+      )
+    ] });
+  }
+);
+
+// src/components/Date/MonthSelector.tsx
+var React10 = __toESM(require("react"), 1);
+
+// src/Icons/IconSearch.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var IconSearch = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "path",
+    {
+      d: "M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z",
+      stroke: props.stroke || "#fff",
+      strokeWidth: props.strokeWidth || "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+};
+
+// src/Icons/IconDown.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var IconDown = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+};
+
+// src/Icons/IconCalendar.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var IconCalendar = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { width: props.width || "24px", height: props.height || "24px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" }) });
+};
+
+// src/Icons/IconLeft.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var IconLeft = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { width: props.width || "24px", height: props.height || "24px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M15 7L10 12L15 17", stroke: props.stroke || "currentColor", strokeWidth: props.strokeWidth || "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+};
+
+// src/components/Date/month.variants.ts
+var monthSelectorIconVariants = createVariants({
+  base: "yr3MonthSelector--icon",
+  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"
+    },
+    animated: {
+      true: "yr3MonthSelector--icon-animated"
+    },
+    open: {
+      true: "yr3MonthSelector--icon-open"
+    }
+  }
+});
+
+// src/Icons/IconRight.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var IconRight = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: props.width || "24px", height: props.height || "24px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "path",
+    {
+      d: "M9 7L14 12L9 17",
+      stroke: props.stroke || "currentColor",
+      strokeWidth: props.strokeWidth || "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+};
+
+// src/components/Date/MonthSelector.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var initialPropsComponent3 = {
+  control: {
+    variant: "outlined",
+    color: "primary",
+    ui: {},
+    style: {}
+  },
+  label: {
+    display: true,
+    color: "primary",
+    ui: {},
+    style: {}
+  },
+  wrapper: {
+    ui: {},
+    style: {}
+  },
+  icon: {
+    color: "primary",
+    style: {},
+    svg: {
+      width: 20,
+      height: 20
+    },
+    component: void 0
+  }
+};
+var MonthSelector = ({ label, year, month, value, defaultValue, propsComponent, years, language, formatMonth = "MMM", monthsDisabled }) => {
+  const [open, setOpen] = React10.useState(false);
+  const [valueState, setValueState] = React10.useState(value || defaultValue || null);
+  const [yearSelected, setYearSelected] = React10.useState(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]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      Input,
+      {
+        label,
+        variant: "base",
+        disabled: true,
+        value: valueState || "",
+        propsComponent: {
+          control: properties?.control,
+          label: properties?.label
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        className: iconClasses,
+        style: properties?.icon?.style,
+        onClick: () => setOpen((prev) => !prev),
+        "data-testid": "yr3MonthSelector--icon",
+        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          IconCalendar,
+          {
+            width: properties?.icon?.svg?.width,
+            height: properties?.icon?.svg?.height,
+            stroke: "currentColor",
+            style: properties?.icon?.svg
+          }
+        )
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        className: "yr3MonthSelector--wrapper",
+        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)(
+            "button",
+            {
+              type: "button",
+              disabled: m.disabled,
+              className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month-disabled" : ""}`,
+              onClick: () => {
+                setValueState(`${m.value}-${years[yearSelected]}`);
+                setOpen(false);
+              },
+              children: m.label
+            },
+            "month-" + m.value
+          )) })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/Fade/Fade.tsx
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Fade = ({
   in: inProp,
   children,
@@ -1510,7 +1867,7 @@ var Fade = ({
   onTransitionEnd,
   style
 }) => {
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -1519,7 +1876,7 @@ var Fade = ({
     }
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: `yr3Fade ${inProp ? "yr3Fade--in" : ""}`,
@@ -1556,7 +1913,7 @@ var flexVariants = createVariants({
 var flex_variants_default = flexVariants;
 
 // src/components/Flex/Flex.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Flex = ({
   container = false,
   spacing: spacing2 = 1,
@@ -1571,7 +1928,7 @@ var Flex = ({
   ...props
 }) => {
   const classes = flex_variants_default({ variant, container, center, between, bordered, spacing: spacing2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: classes,
@@ -1584,7 +1941,7 @@ var Flex = ({
 };
 
 // src/components/Grid/Grid.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Grid = ({
   container = false,
   spacing: spacing2 = 0,
@@ -1617,7 +1974,7 @@ var Grid = ({
   }
   const classes = bem("yr3Grid");
   const className = classes(void 0, { container, [`spacing-${spacing2}`]: center, span: item && `Col-${size}` });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       className,
@@ -1630,7 +1987,7 @@ var Grid = ({
 };
 
 // src/components/Group/Group.tsx
-var React10 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 
 // src/components/Group/group.variants.ts
 var groupVariants = createVariants({
@@ -1661,7 +2018,7 @@ var groupVariants = createVariants({
 });
 
 // src/components/Group/Group.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var initialComponents = (color) => ({
   group: {
     ui: {},
@@ -1694,9 +2051,9 @@ var Group = ({
     initialComponents(type === "rounded" ? "text" : color),
     propsComponent || {}
   );
-  const [internalValue, setInternalValue] = React10.useState(null);
+  const [internalValue, setInternalValue] = React12.useState(null);
   const isControlled = value !== void 0;
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (isControlled) {
       setInternalValue(value);
     }
@@ -1707,7 +2064,7 @@ var Group = ({
     active: !exclude ? Array.isArray(value) ? value.includes(item?.value) : internalValue === item.value : false,
     exclude: exclude && Array.isArray(value) ? !value.includes(item?.value) : ""
   });
-  const mappingStyle = React10.useMemo(() => {
+  const mappingStyle = React12.useMemo(() => {
     if (variant !== "filled") return options.map((opt, index) => ({
       ...opt,
       index,
@@ -1738,13 +2095,13 @@ var Group = ({
       }
     }));
   }, [exclude, value, options, type]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       className: groupVariants({ variant, color, type }),
       "data-testid": "yr3Group",
       style: composeStyles(properties.group?.ui, properties.group?.style),
-      children: options.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: options.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           "data-testid": "yr3Group-item",
@@ -1762,7 +2119,7 @@ var Group = ({
               ...mappingStyle?.find((o) => o.value === opt.value)?.style
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Text,
             {
               ...properties.item?.text,
@@ -1778,14 +2135,14 @@ var Group = ({
 };
 
 // src/components/Image/Image.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Image = ({
   src,
   alt = "",
   ui,
   style
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "img",
     {
       src,
@@ -1798,9 +2155,9 @@ var Image = ({
 };
 
 // src/components/ImageDropzone/ImageDropzone.tsx
-var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var initialPropsComponent3 = {
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var initialPropsComponent4 = {
   box: {},
   text: {},
   container: {},
@@ -1808,10 +2165,10 @@ var initialPropsComponent3 = {
   content: {}
 };
 var ImageDropzone = ({ onChange, multiple, propsComponent, bordered, component, defaultImage, variant = "outlined" }) => {
-  const properties = mergeDeep(initialPropsComponent3, propsComponent || {});
-  const [dragging, setDragging] = React11.useState(false);
-  const [files, setFiles] = React11.useState([]);
-  const inputRef = React11.useRef(null);
+  const properties = mergeDeep(initialPropsComponent4, propsComponent || {});
+  const [dragging, setDragging] = React13.useState(false);
+  const [files, setFiles] = React13.useState([]);
+  const inputRef = React13.useRef(null);
   const handleFiles = (fileList) => {
     if (!fileList) return;
     const newFiles = Array.from(fileList);
@@ -1823,7 +2180,7 @@ var ImageDropzone = ({ onChange, multiple, propsComponent, bordered, component,
   };
   const classes = bem("yr3Dropzone");
   const classComponent = classes(void 0, { "dragging": !!dragging, "bordered": !!bordered, variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { as: "div", position: "relative", content: "center", ...properties?.box, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { as: "div", position: "relative", content: "center", ...properties?.box, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: classComponent,
@@ -1840,7 +2197,7 @@ var ImageDropzone = ({ onChange, multiple, propsComponent, bordered, component,
       onClick: () => inputRef.current?.click(),
       style: composeStyles(properties?.container?.ui, properties?.container?.style),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "input",
           {
             ref: inputRef,
@@ -1851,166 +2208,18 @@ var ImageDropzone = ({ onChange, multiple, propsComponent, bordered, component,
             onChange: (e) => handleFiles(e.target.files)
           }
         ),
-        isEmpty(files) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--content", style: composeStyles(properties?.content?.ui, properties?.content?.style), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { variant: "helper", color: "disabled", ...propsComponent?.text, children: propsComponent?.text?.primary || "Drag and drop an image here, or click to select one" }) }),
-        multiple && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--previews", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: URL.createObjectURL(file) }, i)) }),
-        !multiple && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--preview", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: URL.createObjectURL(file) }, i)) }),
-        !!defaultImage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--preview", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: defaultImage }) }),
+        isEmpty(files) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "yr3Dropzone--content", style: composeStyles(properties?.content?.ui, properties?.content?.style), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { variant: "helper", color: "disabled", ...propsComponent?.text, children: propsComponent?.text?.primary || "Drag and drop an image here, or click to select one" }) }),
+        multiple && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "yr3Dropzone--previews", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: URL.createObjectURL(file) }, i)) }),
+        !multiple && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "yr3Dropzone--preview", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: URL.createObjectURL(file) }, i)) }),
+        !!defaultImage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "yr3Dropzone--preview", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: defaultImage }) }),
         component
       ]
     }
   ) });
 };
 
-// src/components/Input/Input.tsx
-var React12 = __toESM(require("react"), 1);
-
-// src/components/Label/Label.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Label = ({ text: text2, children, className, color = "primary", ui, style }) => {
-  const classes = bem("yr3Label");
-  const classComponent = classes(void 0, { color: `color-${color}` });
-  const classnames = bemMerge(classComponent, className);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    "span",
-    {
-      className: classnames,
-      "data-testid": "yr3Label",
-      style: composeStyles(ui, style),
-      children: text2 ? text2 : children
-    }
-  );
-};
-
-// src/components/Input/input.variants.ts
-var inputVariants = createVariants({
-  base: "yr3Input",
-  variants: {
-    variant: {
-      filled: "yr3Input--filled",
-      outlined: "yr3Input--outlined",
-      base: "yr3Input--base",
-      lined: "yr3Input--lined"
-    },
-    color: {
-      primary: "yr3Input--color-primary",
-      secondary: "yr3Input--color-secondary",
-      success: "yr3Input--color-success",
-      text: "yr3Input--color-text",
-      disabled: "yr3Input--color-disabled",
-      background: "yr3Input--color-background",
-      error: "yr3Input--color-error",
-      warning: "yr3Input--color-warning",
-      info: "yr3Input--color-info",
-      common: "yr3Input--color-common"
-    },
-    size: {
-      auto: "yr3Input--size-auto",
-      full: "yr3Input--size-full"
-    },
-    rounded: {
-      true: "yr3Input--rounded"
-    },
-    disabled: {
-      true: "yr3Input--disabled"
-    },
-    animated: {
-      true: "yr3Input--animated"
-    },
-    label: {
-      true: "yr3Input--label"
-    }
-  }
-});
-
-// src/components/Input/Input.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var initiaPropsComponent = {
-  label: {
-    display: true,
-    ui: {},
-    style: {}
-  },
-  control: {}
-};
-var Input = React12.forwardRef(
-  ({
-    label,
-    value,
-    defaultValue,
-    onChange,
-    variant = "outlined",
-    error = "ce un errore",
-    separatorCurrency = ",",
-    ui,
-    style,
-    propsComponent = initiaPropsComponent,
-    pattern = "text",
-    color = "primary",
-    size = "auto",
-    ...props
-  }, ref) => {
-    const [focused, setFocused] = React12.useState(false);
-    const [internalValue, setInternalValue] = React12.useState(defaultValue);
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
-    const isActive = focused || !!currentValue;
-    const checkPattern = (type, value2) => {
-      switch (type) {
-        case "email":
-          return /^[\w.-]+@[\w.-]+\.\w{2,}$/.test(value2);
-        case "phone":
-          return /^\d{10}$/.test(value2);
-        case "number":
-          return /^\d+$/.test(value2);
-        case "currency":
-          if (separatorCurrency === ",") return /^\d+(\,\d{0,2})?$/.test(value2);
-          if (separatorCurrency === ".") return /^\d+(\.\d{0,2})?$/.test(value2);
-        default:
-          return true;
-      }
-    };
-    const handleChange = (e) => {
-      const newValue = e.target.value;
-      if (newValue && !checkPattern(pattern, newValue)) return;
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-      onChange?.(e, newValue);
-    };
-    const classes = inputVariants({ color, label: propsComponent?.label?.display });
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Control, { variant, color, label: propsComponent?.label?.display, ...propsComponent.control, children: [
-      propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        Label,
-        {
-          text: label || "",
-          className: !!isActive ? "yr3Input--active" : "",
-          color,
-          ...propsComponent.label
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        "input",
-        {
-          ref,
-          value: currentValue,
-          inputMode: pattern === "currency" ? "numeric" : pattern === "phone" ? "tel" : void 0,
-          autoComplete: "off",
-          type: "text",
-          onChange: handleChange,
-          onFocus: () => setFocused(true),
-          onBlur: () => setFocused(false),
-          className: classes,
-          style: composeStyles(ui, style),
-          ...props,
-          "data-testid": "yr3Input"
-        }
-      )
-    ] });
-  }
-);
-
 // src/components/InputArea/InputArea.tsx
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 
 // src/components/InputArea/inputAreaVariants.ts
 var inputAreaVariants = createVariants({
@@ -2051,7 +2260,7 @@ var inputAreaVariants = createVariants({
 });
 
 // src/components/InputArea/InputArea.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var initiaPropsComponent2 = {
   label: {
     display: true,
@@ -2076,8 +2285,8 @@ var InputArea = ({
   rounded = false,
   propsComponent = initiaPropsComponent2
 }) => {
-  const ref = React13.useRef(null);
-  const [internalValue, setInternalValue] = React13.useState(defaultValue);
+  const ref = React14.useRef(null);
+  const [internalValue, setInternalValue] = React14.useState(defaultValue);
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value : internalValue;
   const handleChange = (e) => {
@@ -2094,8 +2303,8 @@ var InputArea = ({
     el.style.resize = resize;
   }
   const classes = inputAreaVariants({ variant, color, rounded });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { position: "relative" }, children: [
-    propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: { position: "relative" }, children: [
+    propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Label,
       {
         text: label || "",
@@ -2103,7 +2312,7 @@ var InputArea = ({
         ...propsComponent.label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "textarea",
       {
         className: classes,
@@ -2115,7 +2324,7 @@ var InputArea = ({
         "data-testid": "yr3InputArea"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { variant: "helper", color: currentValue.length > maxLength ? "error" : "disabled", ui: { textAlign: "right" }, "data-testid": "yr3InputAreaError", children: validate && maxLength ? `${currentValue.length}/${maxLength}` || propsComponent.helperText : "" })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { variant: "helper", color: currentValue.length > maxLength ? "error" : "disabled", ui: { textAlign: "right" }, "data-testid": "yr3InputAreaError", children: validate && maxLength ? `${currentValue.length}/${maxLength}` || propsComponent.helperText : "" })
   ] });
 };
 
@@ -2149,8 +2358,8 @@ var loaderSpinnerVariants = createVariants({
 });
 
 // src/components/Loader/Loader.tsx
-var React14 = __toESM(require("react"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var React15 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var initialComponents2 = {
   loader: {
     ui: {},
@@ -2178,29 +2387,29 @@ var Loader = ({ component, loading = false, propsComponent }) => {
     size: properties?.spinner?.size
   });
   if (!loading) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "yr3Loader", style: composeStyles(properties?.loader?.ui, properties?.loader?.style), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Flex, { ...properties?.container, children: component || /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: classSpinner, children: properties?.spinner?.type === "dots" && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(React14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {})
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "yr3Loader", style: composeStyles(properties?.loader?.ui, properties?.loader?.style), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { ...properties?.container, children: component || /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: classSpinner, children: properties?.spinner?.type === "dots" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(React15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {})
   ] }) }) }) });
 };
 
 // src/components/Modal/Modal.tsx
-var React15 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 
 // src/components/Modal/ModalContainer.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var ModalContainer = ({ children, size = "sm", ui, style }) => {
   const classes = bem("yr3Modal-container");
   const classComponent = classes(void 0, { [`${size}`]: !!size });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
 };
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Modal = ({ open, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (open) {
       show("modal");
     } else {
@@ -2209,9 +2418,9 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
   }, [open]);
   const classes = bem("yr3Modal");
   const classComponent = classes(void 0, { "open": !!open });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
     children,
-    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
+    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
   ] }) }) });
 };
 
@@ -2251,15 +2460,15 @@ var notistackVariants = createVariants({
 });
 
 // src/components/Notistack/Notistack.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: containerStyle, children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: containerStyle, children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         className: "yr3Notistack--progress",
@@ -2294,7 +2503,7 @@ var pendingVariants = createVariants({
 });
 
 // src/components/Pending/Pending.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Pending = ({
   variant,
   width,
@@ -2307,7 +2516,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__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       className: pendingVariants({ variant, color }),
@@ -2318,19 +2527,11 @@ var Pending = ({
 };
 
 // src/components/Phone/Phone.tsx
-var React17 = __toESM(require("react"), 1);
-
-// src/components/Selector/Selector.tsx
-var React16 = __toESM(require("react"), 1);
-
-// src/Icons/IconDown.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var IconDown = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-};
+var React18 = __toESM(require("react"), 1);
 
 // src/components/Selector/Selector.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var React17 = __toESM(require("react"), 1);
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var initalPropsComponent2 = {
   text: {
     variant: "caption",
@@ -2343,16 +2544,16 @@ var initalPropsComponent2 = {
   }
 };
 var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon, propsComponent = initalPropsComponent2 }) => {
-  const [open, setOpen] = React16.useState(false);
-  const [valueState, setValueState] = React16.useState(value || defaultValue || null);
-  const ref = React16.useRef(null);
+  const [open, setOpen] = React17.useState(false);
+  const [valueState, setValueState] = React17.useState(value || defaultValue || null);
+  const ref = React17.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "yr3Selector-wrapper", ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "yr3Selector--control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
+  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 }) }),
       valueState
     ] }) }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "yr3Selector--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent.menu?.style), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    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)(
       "div",
       {
         className: "yr3Selector--option",
@@ -2373,16 +2574,15 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
           };
           onChange?.(event, opt.value);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
       },
       opt.value
     )) })
   ] });
 };
-var Selector_default = Selector;
 
 // src/components/Phone/Phone.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Phone = ({
   name,
   value,
@@ -2394,13 +2594,13 @@ var Phone = ({
 }) => {
   const isControlled = value !== void 0;
   const initial = value || defaultValue || "";
-  const [prefix, setPrefix] = React17.useState(
+  const [prefix, setPrefix] = React18.useState(
     getDialPhone(initial, countries) || countries[0].dial
   );
-  const [number, setNumber] = React17.useState(
+  const [number, setNumber] = React18.useState(
     getNumberPhone(initial, prefix) || ""
   );
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (isControlled && value) {
       const dial = getDialPhone(value, countries);
       const num = getNumberPhone(value, dial);
@@ -2419,11 +2619,11 @@ var Phone = ({
     setPrefix(val);
     onChange?.(null, `${val}${number}`);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label, { text: label, className: "yr3Input--active" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        Selector_default,
+  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)(
+        Selector,
         {
           options: countries.map((c) => ({
             value: c.dial,
@@ -2434,7 +2634,7 @@ var Phone = ({
           ...propsComponent?.selector
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         Divider,
         {
           orientation: "vertical",
@@ -2443,7 +2643,7 @@ var Phone = ({
           ...propsComponent?.divider
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         Input,
         {
           type: "number",
@@ -2459,9 +2659,9 @@ var Phone = ({
 };
 
 // src/components/Places/PlacesAutocomplete.tsx
-var React18 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var import_autocomplete_places = require("@yr3/autocomplete-places");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var initPropsComponent = {
   label: {
     display: true,
@@ -2501,9 +2701,9 @@ var PlacesAutocomplete = ({
   keyApi,
   propsComponent = initPropsComponent
 }) => {
-  const [value, setValue] = React18.useState(null);
-  const inputRef = React18.useRef(null);
-  const [anchorEl, setAnchorEl] = React18.useState(null);
+  const [value, setValue] = React19.useState(null);
+  const inputRef = React19.useRef(null);
+  const [anchorEl, setAnchorEl] = React19.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);
@@ -2523,12 +2723,12 @@ var PlacesAutocomplete = ({
     setValue(place.address);
     setAnchorEl(null);
   };
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (defaultLocation) {
       setValue(defaultLocation);
     }
   }, [defaultLocation]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (value === "") {
       onSelect(null);
     }
@@ -2538,13 +2738,13 @@ var PlacesAutocomplete = ({
     setAnchorEl(e.target.value ? inputRef.current : null);
   };
   const open = suggestions.length > 0 && Boolean(anchorEl);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (onChangeForm) {
       onChangeForm({ target: { value } });
     }
   }, [onChangeForm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Control, { ...propsComponent?.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Input,
       {
         ref: inputRef,
@@ -2558,7 +2758,7 @@ var PlacesAutocomplete = ({
       },
       "input-places"
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
+    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)) }) })
   ] });
 };
 
@@ -2586,7 +2786,7 @@ var radioVariant = createVariants({
 });
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Radio = ({
   checked,
   value,
@@ -2602,8 +2802,8 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  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)(
       "input",
       {
         type: "radio",
@@ -2615,8 +2815,8 @@ var Radio = ({
       }
     ),
     iconChecked && checked ? iconChecked : !checked && iconUnchecked ? iconUnchecked : null,
-    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
-    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
+    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "span",
       {
         className: "yr3Radio--label",
@@ -2629,7 +2829,7 @@ var Radio = ({
 };
 
 // src/components/Select/Select.tsx
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 
 // src/components/Select/select.variants.ts
 var selectVariants = createVariants({
@@ -2689,7 +2889,7 @@ var selectIconVariants = createVariants({
 });
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var initiaPropsComponent3 = {
   control: {
     variant: "outlined",
@@ -2729,15 +2929,15 @@ var initiaPropsComponent3 = {
   }
 };
 var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
-  const [open, setOpen] = React19.useState(false);
-  const [valueState, setValueState] = React19.useState(value || defaultValue || null);
-  const ref = React19.useRef(null);
+  const [open, setOpen] = React20.useState(false);
+  const [valueState, setValueState] = React20.useState(value || defaultValue || null);
+  const ref = React20.useRef(null);
   useClickAway(ref, () => setOpen(false));
   const properties = mergeDeep(initiaPropsComponent3, propsComponent || {});
   const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
   const classes = selectVariants({ wrapper: true });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: classes, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: classes, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Input,
       {
         label,
@@ -2750,14 +2950,14 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime36.jsx)(
+        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           IconDown,
           {
             width: properties?.icon?.style?.width,
@@ -2768,13 +2968,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         )
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime36.jsx)(
+        children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "div",
           {
             className: "yr3Select--option",
@@ -2796,7 +2996,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_runtime36.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_runtime41.jsx)(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
           },
           opt.value
         ))
@@ -2806,9 +3006,9 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 };
 
 // src/components/Slide/Slide.tsx
-var React20 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var initialPropsComponent4 = {
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var initialPropsComponent5 = {
   slide: {
     ui: {},
     style: {}
@@ -2823,14 +3023,14 @@ var Slide = ({
   onTransitionEnd,
   propsComponent
 }) => {
-  const properties = mergeDeep(initialPropsComponent4, propsComponent || {});
+  const properties = mergeDeep(initialPropsComponent5, propsComponent || {});
   const bemContent = bem("yr3Slide--content");
   const classNameContent = bemContent(void 0, {
     [direction]: true,
     "in": !!inProp,
     "out": !inProp
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -2840,19 +3040,19 @@ var Slide = ({
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
   const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
       className: "yr3Slide",
       style: composeStyles(),
       "data-testid": "yr3Slide",
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "div",
         {
           className: classNameContent,
           style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
           "data-testid": "yr3Slide-content",
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
         }
       )
     }
@@ -2860,7 +3060,7 @@ var Slide = ({
 };
 
 // src/components/Switch/Switch.tsx
-var React21 = __toESM(require("react"), 1);
+var React22 = __toESM(require("react"), 1);
 
 // src/components/Switch/switch.variants.ts
 var switchVariants = createVariants({
@@ -2897,7 +3097,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var Switch = ({
   checked,
   defaultChecked,
@@ -2909,7 +3109,7 @@ var Switch = ({
   placement = "end",
   propsComponent
 }) => {
-  const [internal, setInternal] = React21.useState(defaultChecked || false);
+  const [internal, setInternal] = React22.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;
@@ -2917,13 +3117,13 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "label",
     {
       className: classname,
       "data-testid": "yr3Switch",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "input",
           {
             type: "checkbox",
@@ -2932,8 +3132,8 @@ var Switch = ({
             disabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--thumb" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__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)(
           "span",
           {
             className: "yr3Switch--label",
@@ -2947,30 +3147,15 @@ var Switch = ({
   );
 };
 
-// src/Icons/IconSearch.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var IconSearch = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    "path",
-    {
-      d: "M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z",
-      stroke: props.stroke || "#fff",
-      strokeWidth: props.strokeWidth || "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-};
-
 // src/theme/ThemeProvider.tsx
-var React23 = __toESM(require("react"), 1);
+var React24 = __toESM(require("react"), 1);
 
 // src/theme/notistackContext.tsx
-var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var NotistackContext = React22.createContext(null);
+var React23 = __toESM(require("react"), 1);
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var NotistackContext = React23.createContext(null);
 var NotistackProvider = ({ children }) => {
-  const [snacks, setSnacks] = React22.useState([]);
+  const [snacks, setSnacks] = React23.useState([]);
   const notistack = (snack) => {
     const id = Date.now();
     setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
@@ -2985,13 +3170,13 @@ var NotistackProvider = ({ children }) => {
       setSnacks((prev) => prev.filter((s) => s.id !== id));
     }, duration + exitDuration);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Notistack, { ...snack }, snack.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Notistack, { ...snack }, snack.id)) })
   ] });
 };
 var useNotistack = () => {
-  const ctx = React22.useContext(NotistackContext);
+  const ctx = React23.useContext(NotistackContext);
   if (!ctx) {
     throw new Error("NotistackProvider missing");
   }
@@ -2999,15 +3184,15 @@ var useNotistack = () => {
 };
 
 // src/theme/ThemeProvider.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var ThemeContext = React23.createContext(null);
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var ThemeContext = React24.createContext(null);
 var ThemeProvider = ({ theme, children }) => {
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     applyTheme(theme);
   }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BackdropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NotistackProvider, { children }) }) });
+  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 }) }) });
 };
-var useTheme = () => React23.useContext(ThemeContext);
+var useTheme = () => React24.useContext(ThemeContext);
 
 // src/theme/tokens.ts
 var baseTokens = {
@@ -3028,15 +3213,15 @@ var baseTokens = {
 };
 
 // src/theme/useMediaQuery.tsx
-var React24 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 function useMediaQuery(query) {
   const theme = useTheme();
   const computedQuery = typeof query === "function" ? query(theme) : query;
-  const [matches, setMatches] = React24.useState(() => {
+  const [matches, setMatches] = React25.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(computedQuery).matches;
   });
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(computedQuery);
     const listener = () => setMatches(media.matches);
@@ -3070,7 +3255,7 @@ var usePlaces = ({ input, language, apiKey, provider }) => {
 };
 
 // src/hooks/useBreakpoint.ts
-var React25 = __toESM(require("react"), 1);
+var React26 = __toESM(require("react"), 1);
 var breakUp = (bp) => `(min-width: ${bp}px)`;
 var breakDown = (bp) => `(max-width: ${bp}px)`;
 function useBreakpoint(queryInput) {
@@ -3080,8 +3265,8 @@ function useBreakpoint(queryInput) {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   };
-  const [matches, setMatches] = React25.useState(getMatch);
-  React25.useEffect(() => {
+  const [matches, setMatches] = React26.useState(getMatch);
+  React26.useEffect(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
     const listener = (e) => {
@@ -3127,8 +3312,10 @@ initTheme();
   Flex,
   Grid,
   Group,
+  IconCalendar,
   IconClose,
   IconDown,
+  IconLeft,
   IconSearch,
   Image,
   ImageDropzone,
@@ -3138,6 +3325,7 @@ initTheme();
   Loader,
   Modal,
   ModalContainer,
+  MonthSelector,
   Notistack,
   NotistackContext,
   NotistackProvider,
@@ -3146,6 +3334,7 @@ initTheme();
   PlacesAutocomplete,
   Radio,
   Select,
+  Selector,
   Slide,
   Switch,
   Text,
@@ -3170,6 +3359,7 @@ initTheme();
   getCountryCodePhone,
   getDialPhone,
   getMonthCalendar,
+  getMonthCalendarProps,
   getNumberPhone,
   hexToRgb,
   initTheme,