@yr3/ui 1.0.22 → 1.0.24

package/dist/index.js

@@ -828,10 +828,10 @@ var buttonVariant = createVariants({
 });
 
 // src/components/Button/Button.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Button = ({ children, color = "text", variant = "text", animated, disabled, gradientBorder = false, size = "auto", ui, style, propsComponent, ...props }) => {
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button = ({ icon, children, color = "text", variant = "text", animated, disabled, gradientBorder = false, size = "auto", ui, style, propsComponent, ...props }) => {
   const buttonClassname = buttonVariant({ variant, color, animated, disabled, gradientBorder, size });
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
       className: buttonClassname,
@@ -839,7 +839,10 @@ var Button = ({ children, color = "text", variant = "text", animated, disabled,
       "data-testid": "yr3Button",
       ...props,
       style: composeStyles(ui, style),
-      children: /* @__PURE__ */ jsx6(Text, { variant: propsComponent?.text?.variant || "button", ...propsComponent?.text, children })
+      children: [
+        icon && /* @__PURE__ */ jsx6("span", { className: "yr3Button--icon", children: icon }),
+        /* @__PURE__ */ jsx6(Text, { variant: propsComponent?.text?.variant || "button", ...propsComponent?.text, children })
+      ]
     }
   );
 };
@@ -896,7 +899,7 @@ var calendarDayVariants = createVariants({
 });
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 dayjs2.extend(weekday);
 var initalPropsComponent = {
   displayButtons: true,
@@ -946,13 +949,13 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
       onMonthChange && onMonthChange(currentMonth);
     }
   }, [currentMonth]);
-  return /* @__PURE__ */ jsxs2("div", { className: "yr3Calendar", "data-testid": "yr3Calendar", children: [
-    propsComponent?.displayButtons && /* @__PURE__ */ jsxs2("div", { className: "yr3Calendar--header", "data-testid": "yr3CalendarHeader", style: composeStyles(propsComponent?.header?.ui, propsComponent?.header?.style), children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "yr3Calendar", "data-testid": "yr3Calendar", children: [
+    propsComponent?.displayButtons && /* @__PURE__ */ jsxs3("div", { className: "yr3Calendar--header", "data-testid": "yr3CalendarHeader", style: composeStyles(propsComponent?.header?.ui, propsComponent?.header?.style), children: [
       /* @__PURE__ */ jsx7(Button, { disabled: propsComponent?.buttonBack?.disabled || false, color: propsComponent.header?.color || "primary", onClick: () => setCurrentMonth(currentMonth - 1), ui: { justifyContent: "flex-start" }, children: propsComponent?.buttonBack?.label }),
       /* @__PURE__ */ jsx7(Text, { variant: "h6", color: propsComponent.header?.color || "primary", ui: { textTransform: "uppercase", textAlign: "center" }, children: program?.monthLabel }),
       /* @__PURE__ */ jsx7(Button, { disabled: propsComponent?.buttonNext?.disabled, color: propsComponent?.header?.color || "primary", onClick: () => setCurrentMonth(currentMonth + 1), ui: { justifyContent: "flex-end" }, children: propsComponent?.buttonNext?.label })
     ] }),
-    propsComponent?.displayCalendar && /* @__PURE__ */ jsxs2("div", { className: "yr3Calendar--container", children: [
+    propsComponent?.displayCalendar && /* @__PURE__ */ jsxs3("div", { className: "yr3Calendar--container", children: [
       program?.daysContainer.map((i) => /* @__PURE__ */ jsx7("div", { className: "yr3Calendar--month", style: composeStyles(propsComponent?.month?.ui, propsComponent?.month?.style), children: /* @__PURE__ */ jsx7(
         Text,
         {
@@ -962,7 +965,7 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
           children: dayjs2().day(i + 1).format("dd")
         }
       ) }, `month_day_${i}`)),
-      times(program.calendar.length, (i) => /* @__PURE__ */ jsx7(React3.Fragment, { children: times(program.calendar[i].length, (j) => /* @__PURE__ */ jsxs2(
+      times(program.calendar.length, (i) => /* @__PURE__ */ jsx7(React3.Fragment, { children: times(program.calendar[i].length, (j) => /* @__PURE__ */ jsxs3(
         "div",
         {
           className: calendarDayVariants({
@@ -1004,7 +1007,7 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
 
 // src/components/Checkbox/Checkbox.tsx
 import * as React4 from "react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var initialPropsComponent = {
   checkbox: {
     ui: {
@@ -1041,7 +1044,7 @@ var Checkbox = ({
   const classes = bemClasse(void 0, { color: `color-${color}`, disabled, variant: `variant-${variant}`, type: `type-${type}` });
   const boxClasses = bem("yr3Checkbox-box");
   const classesBox = boxClasses(void 0, { checked: !!value });
-  return /* @__PURE__ */ jsxs3("label", { className: classes, style: uiStyle(properties?.checkbox?.ui), "data-testid": "yr3Checkbox", children: [
+  return /* @__PURE__ */ jsxs4("label", { className: classes, style: uiStyle(properties?.checkbox?.ui), "data-testid": "yr3Checkbox", children: [
     /* @__PURE__ */ jsx8(
       "input",
       {
@@ -1105,7 +1108,7 @@ var IconClose = (props) => {
 };
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var initialChipProps = {
   label: {
     ui: {},
@@ -1123,7 +1126,7 @@ var initialChipProps = {
 var Chip = ({ label, variant, color, icon, deleted, onDelete, rounded, size = "medium", propsComponent, ...props }) => {
   const properties = mergeDeep(initialChipProps, propsComponent);
   const className = chip_variants_default({ variant, colors: color, rounded, size });
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className,
@@ -1257,7 +1260,7 @@ var Control = ({
     error,
     disabled
   };
-  const classes = controlVariants({ variant, color, label, size });
+  const classes = controlVariants({ variant, color, label, size, disabled });
   return /* @__PURE__ */ jsx13(ControlContext.Provider, { value, children: /* @__PURE__ */ jsx13(
     "div",
     {
@@ -1466,7 +1469,7 @@ var inputVariants = createVariants({
 });
 
 // src/components/Input/Input.tsx
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
 var initiaPropsComponent = {
   label: {
     display: true,
@@ -1490,6 +1493,7 @@ var Input = React9.forwardRef(
     pattern = "text",
     color = "primary",
     size = "auto",
+    disabled = false,
     ...props
   }, ref) => {
     const [focused, setFocused] = React9.useState(false);
@@ -1521,7 +1525,7 @@ var Input = React9.forwardRef(
       onChange?.(e, newValue);
     };
     const classes = inputVariants({ color, label: propsComponent?.label?.display });
-    return /* @__PURE__ */ jsxs5(Control, { variant, color, label: propsComponent?.label?.display, ...propsComponent.control, children: [
+    return /* @__PURE__ */ jsxs6(Control, { variant, color, label: propsComponent?.label?.display, disabled, ...propsComponent.control, children: [
       propsComponent?.label?.display && /* @__PURE__ */ jsx18(
         Label,
         {
@@ -1539,6 +1543,7 @@ var Input = React9.forwardRef(
           inputMode: pattern === "currency" ? "numeric" : pattern === "phone" ? "tel" : void 0,
           autoComplete: "off",
           type: "text",
+          disabled,
           onChange: handleChange,
           onFocus: () => setFocused(true),
           onBlur: () => setFocused(false),
@@ -1589,6 +1594,17 @@ var IconLeft = (props) => {
 };
 
 // src/components/Date/month.variants.ts
+var monthSelectorVariants = createVariants({
+  base: "yr3MonthSelector",
+  variants: {
+    wrapper: {
+      true: "yr3MonthSelector--wrapper"
+    },
+    disabled: {
+      true: "yr3MonthSelector--disabled"
+    }
+  }
+});
 var monthSelectorIconVariants = createVariants({
   base: "yr3MonthSelector--icon",
   variants: {
@@ -1646,7 +1662,7 @@ var IconRight = (props) => {
 };
 
 // src/components/Date/MonthSelector.tsx
-import { jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var initialPropsComponent3 = {
   control: {
     variant: "outlined",
@@ -1698,17 +1714,24 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
   const getData = React10.useMemo(() => {
     return 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 || null);
-  }, [value]);
-  React10.useEffect(() => {
-    if (onChange && valueState) onChange(valueState);
-  }, [valueState, onChange]);
-  return /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector", ref, children: [
+  const handleYearChange = (newIndex) => {
+    setYearSelected(newIndex);
+  };
+  const handleMonthChange = (month) => {
+    const newValue = `${month}-${data.years[yearSelected]}`;
+    setValueState(newValue);
+    onChange(newValue);
+    const nextData = getMonthCalendarProps({
+      year: data.years[yearSelected],
+      data,
+      daysFormat,
+      value: newValue
+    });
+    onNext?.(nextData.prev);
+    onLast?.(nextData.last);
+  };
+  const classes = monthSelectorVariants({ wrapper: true, disabled });
+  return /* @__PURE__ */ jsxs7("div", { className: classes, ref, children: [
     /* @__PURE__ */ jsx24(
       Input,
       {
@@ -1727,7 +1750,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
       {
         className: iconClasses,
         style: properties?.icon?.style,
-        onClick: () => !disabled && setOpen((prev) => !prev),
+        onClick: () => !disabled && setOpen(true),
         "data-testid": "yr3MonthSelector--icon",
         children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx24(
           IconCalendar,
@@ -1746,8 +1769,8 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
         className: "yr3MonthSelector--wrapper",
         style: composeStyles(properties?.wrapper?.ui, properties?.wrapper?.style),
         "data-testid": "yr3MonthSelector--wrapper",
-        children: /* @__PURE__ */ jsxs6("div", { className: "yr3MonthSelector--component", children: [
-          /* @__PURE__ */ jsxs6(
+        children: /* @__PURE__ */ jsxs7("div", { className: "yr3MonthSelector--component", children: [
+          /* @__PURE__ */ jsxs7(
             "div",
             {
               className: containerClasses,
@@ -1759,11 +1782,11 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
                     disabled: disabled || yearSelected === 0,
                     type: "button",
                     className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
-                    onClick: () => setYearSelected(yearSelected - 1),
+                    onClick: () => handleYearChange(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: [
+                /* @__PURE__ */ jsx24("div", { className: `yr3MonthSelector--year-option`, children: /* @__PURE__ */ jsxs7(Text, { variant: "body1", color: "primary", children: [
                   data.years[yearSelected],
                   " "
                 ] }) }),
@@ -1773,7 +1796,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
                     disabled: 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),
+                    onClick: () => handleYearChange(yearSelected + 1),
                     children: /* @__PURE__ */ jsx24(IconRight, { width: 20, height: 30, stroke: "currentColor" })
                   }
                 )
@@ -1788,8 +1811,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
               disabled: m.disabled,
               className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month--disabled" : ""} ${m.selected ? "yr3MonthSelector--month--selected" : ""}`,
               onClick: () => {
-                setValueState(`${m.value}-${data.years[yearSelected]}`);
-                setOpen(false);
+                handleMonthChange(m.value);
               },
               children: /* @__PURE__ */ jsx24(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
             },
@@ -2100,7 +2122,7 @@ var Image = ({
 
 // src/components/ImageDropzone/ImageDropzone.tsx
 import * as React13 from "react";
-import { jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs8 } from "react/jsx-runtime";
 var initialPropsComponent4 = {
   box: {},
   text: {},
@@ -2124,7 +2146,7 @@ var ImageDropzone = ({ onChange, multiple, propsComponent, bordered, component,
   };
   const classes = bem("yr3Dropzone");
   const classComponent = classes(void 0, { "dragging": !!dragging, "bordered": !!bordered, variant });
-  return /* @__PURE__ */ jsx30(Box, { as: "div", position: "relative", content: "center", ...properties?.box, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx30(Box, { as: "div", position: "relative", content: "center", ...properties?.box, children: /* @__PURE__ */ jsxs8(
     "div",
     {
       className: classComponent,
@@ -2204,7 +2226,7 @@ var inputAreaVariants = createVariants({
 });
 
 // src/components/InputArea/InputArea.tsx
-import { jsx as jsx31, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs9 } from "react/jsx-runtime";
 var initiaPropsComponent2 = {
   label: {
     display: true,
@@ -2247,7 +2269,7 @@ var InputArea = ({
     el.style.resize = resize;
   }
   const classes = inputAreaVariants({ variant, color, rounded });
-  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
     propsComponent?.label?.display && /* @__PURE__ */ jsx31(
       Label,
       {
@@ -2303,7 +2325,7 @@ var loaderSpinnerVariants = createVariants({
 
 // src/components/Loader/Loader.tsx
 import * as React15 from "react";
-import { jsx as jsx32, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs10 } from "react/jsx-runtime";
 var initialComponents2 = {
   loader: {
     ui: {},
@@ -2331,7 +2353,7 @@ var Loader = ({ component, loading = false, propsComponent }) => {
     size: properties?.spinner?.size
   });
   if (!loading) return null;
-  return /* @__PURE__ */ jsx32("div", { className: "yr3Loader", style: composeStyles(properties?.loader?.ui, properties?.loader?.style), children: /* @__PURE__ */ jsx32(Flex, { ...properties?.container, children: component || /* @__PURE__ */ jsx32("div", { className: classSpinner, children: properties?.spinner?.type === "dots" && /* @__PURE__ */ jsxs9(React15.Fragment, { children: [
+  return /* @__PURE__ */ jsx32("div", { className: "yr3Loader", style: composeStyles(properties?.loader?.ui, properties?.loader?.style), children: /* @__PURE__ */ jsx32(Flex, { ...properties?.container, children: component || /* @__PURE__ */ jsx32("div", { className: classSpinner, children: properties?.spinner?.type === "dots" && /* @__PURE__ */ jsxs10(React15.Fragment, { children: [
     /* @__PURE__ */ jsx32("span", {}),
     /* @__PURE__ */ jsx32("span", {}),
     /* @__PURE__ */ jsx32("span", {})
@@ -2350,7 +2372,7 @@ var ModalContainer = ({ children, size = "sm", ui, style }) => {
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx34, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs11 } from "react/jsx-runtime";
 var Modal = ({ open, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
   React16.useEffect(() => {
@@ -2362,7 +2384,7 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
   }, [open]);
   const classes = bem("yr3Modal");
   const classComponent = classes(void 0, { "open": !!open });
-  return /* @__PURE__ */ jsx34("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ jsx34(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ jsxs10(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
+  return /* @__PURE__ */ jsx34("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ jsx34(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ jsxs11(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
     children,
     propsComponent?.close ? propsComponent.close : /* @__PURE__ */ jsx34(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
   ] }) }) });
@@ -2404,13 +2426,13 @@ var notistackVariants = createVariants({
 });
 
 // src/components/Notistack/Notistack.tsx
-import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs12 } from "react/jsx-runtime";
 var Notistack = ({ message, duration = 3e3, variant = "info", color, propsComponent, anchor, exiting = false }) => {
   const classes = notistackVariants({ type: variant, color, exiting, direction: `${anchor?.vertical || "bottom"}-${anchor?.horizontal || "right"}` });
   const containerStyle = composeStyles(propsComponent?.container?.ui, propsComponent?.container?.style);
   const notistackStyle = composeStyles(propsComponent?.notistack?.ui, propsComponent?.notistack?.style);
   const progressStyle = composeStyles(propsComponent?.progress?.ui, propsComponent?.progress?.style);
-  return /* @__PURE__ */ jsxs11("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
+  return /* @__PURE__ */ jsxs12("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
     /* @__PURE__ */ jsx35("span", { style: containerStyle, children: message }),
     /* @__PURE__ */ jsx35(
       "div",
@@ -2531,7 +2553,7 @@ var PickerIconVariants = createVariants({
 });
 
 // src/components/Picker/Picker.tsx
-import { jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
 var initiaPropsComponent3 = {
   control: {
     variant: "outlined",
@@ -2581,7 +2603,7 @@ var Picker = ({ label, variant, color, children, name, value, onChange, propsCom
       onChange({ event: {}, target: { name, value: valueState }, currentTarget: { name, value: valueState } }, valueState);
     }
   }, [valueState, onChange, name]);
-  return /* @__PURE__ */ jsxs12("div", { className: classes, ref, children: [
+  return /* @__PURE__ */ jsxs13("div", { className: classes, ref, children: [
     /* @__PURE__ */ jsx37(
       Input,
       {
@@ -2634,7 +2656,7 @@ import * as React19 from "react";
 
 // src/components/Selector/Selector.tsx
 import * as React18 from "react";
-import { jsx as jsx38, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
 var initalPropsComponent2 = {
   text: {
     variant: "caption",
@@ -2651,8 +2673,8 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
   const [valueState, setValueState] = React18.useState(value || defaultValue || null);
   const ref = React18.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  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: [
+  return /* @__PURE__ */ jsxs14("div", { className: "yr3Selector-wrapper", ref, children: [
+    /* @__PURE__ */ jsx38("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ jsxs14("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
     ] }) }),
@@ -2685,7 +2707,7 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
 };
 
 // src/components/Phone/Phone.tsx
-import { jsx as jsx39, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
 var Phone = ({
   name,
   value,
@@ -2722,9 +2744,9 @@ var Phone = ({
     setPrefix(val);
     onChange?.(null, `${val}${number}`);
   };
-  return /* @__PURE__ */ jsxs14(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs15(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__ */ jsxs15(Flex, { variant: "row", container: true, center: true, children: [
       /* @__PURE__ */ jsx39(
         Selector,
         {
@@ -2764,7 +2786,7 @@ var Phone = ({
 // src/components/Places/PlacesAutocomplete.tsx
 import * as React20 from "react";
 import { useAutocompletePlaces } from "@yr3/autocomplete-places";
-import { jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
 var initPropsComponent = {
   label: {
     display: true,
@@ -2846,7 +2868,7 @@ var PlacesAutocomplete = ({
       onChangeForm({ target: { value } });
     }
   }, [onChangeForm]);
-  return /* @__PURE__ */ jsxs15(Control, { ...propsComponent?.control, children: [
+  return /* @__PURE__ */ jsxs16(Control, { ...propsComponent?.control, children: [
     /* @__PURE__ */ jsx40(
       Input,
       {
@@ -2889,7 +2911,7 @@ var radioVariant = createVariants({
 });
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var Radio = ({
   checked,
   value,
@@ -2905,7 +2927,7 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  return /* @__PURE__ */ jsxs16("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
+  return /* @__PURE__ */ jsxs17("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
     /* @__PURE__ */ jsx41(
       "input",
       {
@@ -2947,6 +2969,9 @@ var selectVariants = createVariants({
       base: "yr3Select--base",
       lined: "yr3Select--lined"
     },
+    disabled: {
+      true: "yr3Select--disabled"
+    },
     color: {
       primary: "yr3Select--color-primary",
       secondary: "yr3Select--color-secondary",
@@ -2992,7 +3017,7 @@ var selectIconVariants = createVariants({
 });
 
 // src/components/Select/Select.tsx
-import { jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var initiaPropsComponent4 = {
   control: {
     variant: "outlined",
@@ -3031,15 +3056,15 @@ var initiaPropsComponent4 = {
     component: void 0
   }
 };
-var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
+var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent, disabled }) => {
   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(initiaPropsComponent4, propsComponent || {});
   const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
-  const classes = selectVariants({ wrapper: true });
-  return /* @__PURE__ */ jsxs17("div", { className: classes, ref, children: [
+  const classes = selectVariants({ wrapper: true, disabled });
+  return /* @__PURE__ */ jsxs18("div", { className: classes, ref, children: [
     /* @__PURE__ */ jsx42(
       Input,
       {
@@ -3058,7 +3083,7 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
       {
         className: classesIcon,
         style: properties?.icon?.style,
-        onClick: () => setOpen((prev) => !prev),
+        onClick: () => !disabled && setOpen((prev) => !prev),
         "data-testid": "yr3Select-icon",
         children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx42(
           IconDown,
@@ -3110,13 +3135,40 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 
 // src/components/Slide/Slide.tsx
 import * as React22 from "react";
+
+// src/components/Slide/variants.slide.ts
+var variantsSlide = createVariants({
+  base: "yr3Slide--content",
+  variants: {
+    direction: {
+      left: "yr3Slide--content--left",
+      right: "yr3Slide--content--right",
+      top: "yr3Slide--content--top",
+      bottom: "yr3Slide--content--bottom"
+    },
+    open: {
+      true: "yr3Slide--in",
+      false: "yr3Slide--out"
+    }
+  }
+});
+
+// src/components/Slide/Slide.tsx
 import { jsx as jsx43 } from "react/jsx-runtime";
 var initialPropsComponent5 = {
   slide: {
     ui: {},
     style: {}
   },
-  box: {}
+  content: {
+    ui: {},
+    style: {}
+  },
+  box: {
+    as: "div",
+    ui: {},
+    style: {}
+  }
 };
 var Slide = ({
   in: inProp,
@@ -3127,33 +3179,29 @@ var Slide = ({
   propsComponent
 }) => {
   const properties = mergeDeep(initialPropsComponent5, propsComponent || {});
-  const bemContent = bem("yr3Slide--content");
-  const classNameContent = bemContent(void 0, {
-    [direction]: true,
-    "in": !!inProp,
-    "out": !inProp
-  });
+  const stateRef = React22.useRef(inProp ? "in" : "out");
   React22.useEffect(() => {
-    let timeoutId;
-    if (inProp) {
-      timeoutId = setTimeout(() => {
-        onTransitionEnd && onTransitionEnd();
-      }, duration);
-    }
-    return () => clearTimeout(timeoutId);
-  }, [inProp, duration, onTransitionEnd]);
-  const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
+    stateRef.current = inProp ? "in" : "out";
+  }, [inProp]);
+  const classesContent = variantsSlide({ direction, open: !!inProp ? "true" : "false" });
+  const uiStyleSlider = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
+  const uiStyleContent = uiStyle({ ...properties?.content?.ui, transitionDuration: `${duration}ms` });
   return /* @__PURE__ */ jsx43(
     "div",
     {
       className: "yr3Slide",
-      style: composeStyles(),
+      style: composeStyles(uiStyleSlider, properties?.slide?.style || {}),
       "data-testid": "yr3Slide",
       children: /* @__PURE__ */ jsx43(
         "div",
         {
-          className: classNameContent,
-          style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
+          className: classesContent,
+          onTransitionEnd: (e) => {
+            if (e.target === e.currentTarget && e.propertyName === "transform") {
+              onTransitionEnd?.(stateRef?.current);
+            }
+          },
+          style: composeStyles(uiStyleContent, properties?.content?.style || {}),
           "data-testid": "yr3Slide-content",
           children: /* @__PURE__ */ jsx43(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
         }
@@ -3200,7 +3248,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
 var Switch = ({
   checked,
   defaultChecked,
@@ -3220,7 +3268,7 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "label",
     {
       className: classname,
@@ -3255,7 +3303,7 @@ import * as React25 from "react";
 
 // src/theme/notistackContext.tsx
 import * as React24 from "react";
-import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
 var NotistackContext = React24.createContext(null);
 var NotistackProvider = ({ children }) => {
   const [snacks, setSnacks] = React24.useState([]);
@@ -3273,7 +3321,7 @@ var NotistackProvider = ({ children }) => {
       setSnacks((prev) => prev.filter((s) => s.id !== id));
     }, duration + exitDuration);
   };
-  return /* @__PURE__ */ jsxs19(NotistackContext.Provider, { value: { notistack }, children: [
+  return /* @__PURE__ */ jsxs20(NotistackContext.Provider, { value: { notistack }, children: [
     children,
     /* @__PURE__ */ jsx45("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx45(Notistack, { ...snack }, snack.id)) })
   ] });