@yr3/ui 1.0.3 → 1.0.4

package/dist/index.js

@@ -1371,16 +1371,72 @@ var Image = ({
   );
 };
 
-// src/components/Input/Input.tsx
+// src/components/ImageDropzone/ImageDropzone.tsx
 import * as React11 from "react";
+import { jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
+var ImageDropzone = ({ onChange, multiple, ui, style, propsComponent, bordered, component, defaultImage, variant = "outlined" }) => {
+  const [dragging, setDragging] = React11.useState(false);
+  const [files, setFiles] = React11.useState([]);
+  const inputRef = React11.useRef(null);
+  const handleFiles = (fileList) => {
+    if (!fileList) return;
+    const newFiles = Array.from(fileList);
+    setFiles((prev) => {
+      const updated = multiple ? [...prev, ...newFiles] : newFiles;
+      onChange?.(updated);
+      return updated;
+    });
+  };
+  const classes = bem("yr3Dropzone");
+  const classComponent = classes(void 0, { "dragging": !!dragging, "bordered": !!bordered, variant });
+  return /* @__PURE__ */ jsx22(Box, { as: "div", position: "relative", content: "center", ...propsComponent?.box, children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: classComponent,
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setDragging(false);
+        handleFiles(e.dataTransfer.files);
+      },
+      onClick: () => inputRef.current?.click(),
+      style: composeStyles(ui, style),
+      children: [
+        /* @__PURE__ */ jsx22(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            hidden: true,
+            multiple,
+            accept: "image/*",
+            onChange: (e) => handleFiles(e.target.files)
+          }
+        ),
+        isEmpty(files) && /* @__PURE__ */ jsx22("div", { className: "yr3Dropzone--content", children: /* @__PURE__ */ jsx22(Text, { variant: "helper", color: "disabled", ...propsComponent?.text, children: propsComponent?.text?.primary || "Drag and drop an image here, or click to select one" }) }),
+        multiple && /* @__PURE__ */ jsx22("div", { className: "yr3Dropzone--previews", children: files.map((file, i) => /* @__PURE__ */ jsx22("img", { src: URL.createObjectURL(file) }, i)) }),
+        !multiple && /* @__PURE__ */ jsx22("div", { className: "yr3Dropzone--preview", children: files.map((file, i) => /* @__PURE__ */ jsx22("img", { src: URL.createObjectURL(file) }, i)) }),
+        !!defaultImage && /* @__PURE__ */ jsx22("div", { className: "yr3Dropzone--preview", children: /* @__PURE__ */ jsx22("img", { src: defaultImage }) }),
+        component
+      ]
+    }
+  ) });
+};
+
+// src/components/Input/Input.tsx
+import * as React12 from "react";
 
 // src/components/Label/Label.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "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__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "span",
     {
       className: classnames,
@@ -1432,7 +1488,7 @@ var inputVariants = createVariants({
 });
 
 // src/components/Input/Input.tsx
-import { jsx as jsx23, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
 var initiaPropsComponent = {
   label: {
     display: true,
@@ -1440,7 +1496,7 @@ var initiaPropsComponent = {
     style: {}
   }
 };
-var Input = React11.forwardRef(
+var Input = React12.forwardRef(
   ({
     label,
     value,
@@ -1455,9 +1511,9 @@ var Input = React11.forwardRef(
     color = "primary",
     ...props
   }, ref) => {
-    const [focused, setFocused] = React11.useState(false);
-    const [internalValue, setInternalValue] = React11.useState(defaultValue);
-    const [internalError, setInternalError] = React11.useState(null);
+    const [focused, setFocused] = React12.useState(false);
+    const [internalValue, setInternalValue] = React12.useState(defaultValue);
+    const [internalError, setInternalError] = React12.useState(null);
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const isActive = focused || !!currentValue;
@@ -1487,8 +1543,8 @@ var Input = React11.forwardRef(
       onChange?.(e, newValue);
     };
     const classes = inputVariants({ color, label: propsComponent?.label?.display });
-    return /* @__PURE__ */ jsxs5(Control, { variant, color, label: propsComponent?.label?.display, children: [
-      propsComponent?.label?.display && /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs6(Control, { variant, color, label: propsComponent?.label?.display, children: [
+      propsComponent?.label?.display && /* @__PURE__ */ jsx24(
         Label,
         {
           text: label || "",
@@ -1497,7 +1553,7 @@ var Input = React11.forwardRef(
           ...propsComponent.label
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         "input",
         {
           ref,
@@ -1513,36 +1569,36 @@ var Input = React11.forwardRef(
           "data-testid": "yr3Input"
         }
       ),
-      /* @__PURE__ */ jsx23(Text, { variant: "helper", "data-testid": "yr3Input-helper", children: error || internalError || "" })
+      /* @__PURE__ */ jsx24(Text, { variant: "helper", "data-testid": "yr3Input-helper", children: error || internalError || "" })
     ] });
   }
 );
 
 // src/components/Input/InputPhone.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 
 // src/components/Select/Selector.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 
 // src/Icons/IconDown.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var IconDown = (props) => {
-  return /* @__PURE__ */ jsx24("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__ */ jsx24("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx25("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "yr3Icons", children: /* @__PURE__ */ jsx25("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 };
 
 // src/components/Select/Selector.tsx
-import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
 var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon }) => {
-  const [open, setOpen] = React12.useState(false);
-  const [valueState, setValueState] = React12.useState(value || defaultValue || null);
-  const ref = React12.useRef(null);
+  const [open, setOpen] = React13.useState(false);
+  const [valueState, setValueState] = React13.useState(value || defaultValue || null);
+  const ref = React13.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ jsxs6("div", { className: "yr3Selector-wrapper", ref, children: [
-    /* @__PURE__ */ jsx25("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ jsxs6("div", { className: "yr3Selector--control", children: [
-      /* @__PURE__ */ jsx25("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ jsx25(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
+  return /* @__PURE__ */ jsxs7("div", { className: "yr3Selector-wrapper", ref, children: [
+    /* @__PURE__ */ jsx26("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ jsxs7("div", { className: "yr3Selector--control", children: [
+      /* @__PURE__ */ jsx26("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ jsx26(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
       valueState
     ] }) }),
-    open && /* @__PURE__ */ jsx25("div", { className: "yr3Select--menu", children: options.map((opt) => /* @__PURE__ */ jsx25(
+    open && /* @__PURE__ */ jsx26("div", { className: "yr3Select--menu", children: options.map((opt) => /* @__PURE__ */ jsx26(
       "div",
       {
         className: "yr3Select--option",
@@ -1572,19 +1628,19 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
 var Selector_default = Selector;
 
 // src/theme/ThemeProvider.tsx
-import * as React13 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var ThemeContext = React13.createContext(null);
+import * as React14 from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var ThemeContext = React14.createContext(null);
 var ThemeProvider = ({ theme, children }) => {
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     applyTheme(theme);
   }, [theme]);
-  return /* @__PURE__ */ jsx26(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx26(BackdropProvider, { children }) });
+  return /* @__PURE__ */ jsx27(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx27(BackdropProvider, { children }) });
 };
-var useTheme = () => React13.useContext(ThemeContext);
+var useTheme = () => React14.useContext(ThemeContext);
 
 // src/components/Input/InputPhone.tsx
-import { jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs8 } from "react/jsx-runtime";
 var Phone = ({
   name,
   value,
@@ -1594,8 +1650,8 @@ var Phone = ({
   countries = [],
   propsComponent
 }) => {
-  const [prefixValue, setPrefixValue] = React14.useState(prefix);
-  const [number, setNumber] = React14.useState(Number(value) || null);
+  const [prefixValue, setPrefixValue] = React15.useState(prefix);
+  const [number, setNumber] = React15.useState(Number(value) || null);
   const theme = useTheme();
   const handleChange = (newPrefix, newNumber) => {
     const full = `${newPrefix}${newNumber.toString()}`;
@@ -1607,10 +1663,10 @@ var Phone = ({
     };
     onChange?.(event, full);
   };
-  return /* @__PURE__ */ jsxs7(Control, { variant: "outlined", children: [
-    /* @__PURE__ */ jsx27(Label, { text: label, className: "yr3Input--active" }),
-    /* @__PURE__ */ jsx27("div", { className: "yr3PhoneInput", "data-testid": "yr3Phone", children: /* @__PURE__ */ jsxs7(Flex, { variant: "row", container: true, center: true, children: [
-      /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs8(Control, { variant: "outlined", children: [
+    /* @__PURE__ */ jsx28(Label, { text: label, className: "yr3Input--active" }),
+    /* @__PURE__ */ jsx28("div", { className: "yr3PhoneInput", "data-testid": "yr3Phone", children: /* @__PURE__ */ jsxs8(Flex, { variant: "row", container: true, center: true, children: [
+      /* @__PURE__ */ jsx28(
         Selector_default,
         {
           options: countries.map((c) => ({
@@ -1630,8 +1686,8 @@ var Phone = ({
           style: propsComponent?.selector?.style
         }
       ),
-      /* @__PURE__ */ jsx27(Divider, { orientation: "vertical", ...propsComponent?.divider }),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx28(Divider, { orientation: "vertical", ...propsComponent?.divider }),
+      /* @__PURE__ */ jsx28(
         Input,
         {
           type: "phone",
@@ -1648,22 +1704,127 @@ var Phone = ({
   ] });
 };
 
+// src/components/InputArea/InputArea.tsx
+import * as React16 from "react";
+
+// src/components/InputArea/inputAreaVariants.ts
+var inputAreaVariants = createVariants({
+  base: "yr3InputArea",
+  variants: {
+    variant: {
+      filled: "yr3InputArea--filled",
+      outlined: "yr3InputArea--outlined",
+      base: "yr3InputArea--base",
+      lined: "yr3InputArea--lined"
+    },
+    color: {
+      primary: "yr3InputArea--color-primary",
+      secondary: "yr3InputArea--color-secondary",
+      success: "yr3InputArea--color-success",
+      text: "yr3InputArea--color-text",
+      disabled: "yr3InputArea--color-disabled"
+    },
+    size: {
+      auto: "yr3InputArea--size-auto",
+      full: "yr3InputArea--size-full"
+    },
+    rounded: {
+      true: "yr3InputArea--rounded"
+    },
+    disabled: {
+      true: "yr3InputArea--disabled"
+    },
+    animated: {
+      true: "yr3InputArea--animated"
+    }
+  }
+});
+
+// src/components/InputArea/InputArea.tsx
+import { jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
+var initiaPropsComponent2 = {
+  label: {
+    display: true,
+    ui: {},
+    style: {}
+  },
+  helperText: ""
+};
+var InputArea = ({
+  value,
+  defaultValue = "",
+  onChange,
+  rows = 1,
+  ui,
+  style,
+  label,
+  validate,
+  color = "primary",
+  maxLength = 0,
+  resize = "vertical",
+  variant = "outlined",
+  rounded = false,
+  propsComponent = initiaPropsComponent2
+}) => {
+  const ref = React16.useRef(null);
+  const [internalValue, setInternalValue] = React16.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(e, newValue);
+  };
+  const el = ref.current;
+  if (el) {
+    el.style.height = "auto";
+    el.style.height = el.scrollHeight + "px";
+    el.style.resize = resize;
+  }
+  const classes = inputAreaVariants({ variant, color, rounded });
+  return /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
+    propsComponent?.label?.display && /* @__PURE__ */ jsx29(
+      Label,
+      {
+        text: label || "",
+        className: "yr3Input--active",
+        ...propsComponent.label
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "textarea",
+      {
+        className: classes,
+        ref,
+        value: currentValue,
+        rows,
+        onChange: handleChange,
+        style: composeStyles(ui, style),
+        "data-testid": "yr3InputArea"
+      }
+    ),
+    /* @__PURE__ */ jsx29(Text, { variant: "helper", color: currentValue.length > maxLength ? "error" : "disabled", ui: { textAlign: "right" }, "data-testid": "yr3InputAreaError", children: validate && maxLength ? `${currentValue.length}/${maxLength}` || propsComponent.helperText : "" })
+  ] });
+};
+
 // src/components/Modal/Modal.tsx
-import * as React15 from "react";
+import * as React17 from "react";
 
 // src/components/Modal/ModalContainer.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var ModalContainer = ({ children, size = "sm", ui, style }) => {
   const classes = bem("yr3Modal-container");
   const classComponent = classes(void 0, { [`${size}`]: !!size });
-  return /* @__PURE__ */ jsx28("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
+  return /* @__PURE__ */ jsx30("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx29, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
 var Modal = ({ open, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
-  React15.useEffect(() => {
+  React17.useEffect(() => {
     if (open) {
       show();
     } else {
@@ -1672,9 +1833,9 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
   }, [open, show]);
   const classes = bem("yr3Modal");
   const classComponent = classes(void 0, { "open": !!open });
-  return /* @__PURE__ */ jsx29("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ jsx29(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ jsxs8(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
+  return /* @__PURE__ */ jsx31("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ jsx31(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ jsxs10(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
     children,
-    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ jsx29(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
+    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ jsx31(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
   ] }) }) });
 };
 
@@ -1714,15 +1875,15 @@ var notistackVariants = createVariants({
 });
 
 // src/components/Notistack/Notistack.tsx
-import { jsx as jsx30, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs11 } 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__ */ jsxs9("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
-    /* @__PURE__ */ jsx30("span", { style: containerStyle, children: message }),
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs11("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
+    /* @__PURE__ */ jsx32("span", { style: containerStyle, children: message }),
+    /* @__PURE__ */ jsx32(
       "div",
       {
         className: "yr3Notistack--progress",
@@ -1756,7 +1917,7 @@ var pendingVariants = createVariants({
 });
 
 // src/components/Pending/Pending.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Pending = ({
   variant,
   width,
@@ -1769,7 +1930,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__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: pendingVariants({ variant, color }),
@@ -1798,7 +1959,7 @@ var radioVariant = createVariants({
 });
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx32, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs12 } from "react/jsx-runtime";
 var Radio = ({
   checked,
   value,
@@ -1814,8 +1975,8 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  return /* @__PURE__ */ jsxs10("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs12("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
+    /* @__PURE__ */ jsx34(
       "input",
       {
         type: "radio",
@@ -1827,8 +1988,8 @@ var Radio = ({
       }
     ),
     iconChecked && checked ? iconChecked : !checked && iconUnchecked ? iconUnchecked : null,
-    !iconChecked && !iconUnchecked && /* @__PURE__ */ jsx32("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
-    typeof label === "string" && /* @__PURE__ */ jsx32(
+    !iconChecked && !iconUnchecked && /* @__PURE__ */ jsx34("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
+    typeof label === "string" && /* @__PURE__ */ jsx34(
       "span",
       {
         className: "yr3Radio--label",
@@ -1841,15 +2002,15 @@ var Radio = ({
 };
 
 // src/components/Select/Select.tsx
-import * as React16 from "react";
-import { jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
+import * as React18 from "react";
+import { jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
 var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
-  const [open, setOpen] = React16.useState(false);
-  const [valueState, setValueState] = React16.useState(value || defaultValue || null);
-  const ref = React16.useRef(null);
+  const [open, setOpen] = React18.useState(false);
+  const [valueState, setValueState] = React18.useState(value || defaultValue || null);
+  const ref = React18.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ jsxs11(Control, { ...propsComponent?.control, children: [
-    /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs13(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ jsx35(
       Label,
       {
         ...propsComponent?.label,
@@ -1857,10 +2018,10 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         className: open || valueState ? "yr3Input--active" : ""
       }
     ),
-    /* @__PURE__ */ jsxs11("div", { className: "yr3Select-wrapper", ref, children: [
-      /* @__PURE__ */ jsxs11("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
-        /* @__PURE__ */ jsx33("div", { className: "yr3Select--control", children: valueState }),
-        /* @__PURE__ */ jsx33("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsxs13("div", { className: "yr3Select-wrapper", ref, children: [
+      /* @__PURE__ */ jsxs13("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
+        /* @__PURE__ */ jsx35("div", { className: "yr3Select--control", children: valueState }),
+        /* @__PURE__ */ jsx35("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ jsx35(
           IconDown,
           {
             width: propsComponent?.icon?.style?.width || 26,
@@ -1870,13 +2031,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
           }
         ) })
       ] }),
-      open && /* @__PURE__ */ jsx33(
+      open && /* @__PURE__ */ jsx35(
         "div",
         {
           className: "yr3Select--menu",
           style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
           "data-testid": "yr3Select-menu",
-          children: options.map((opt) => /* @__PURE__ */ jsx33(
+          children: options.map((opt) => /* @__PURE__ */ jsx35(
             "div",
             {
               className: "yr3Select--option",
@@ -1908,8 +2069,8 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 };
 
 // src/components/Slide/Slide.tsx
-import * as React17 from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import * as React19 from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Slide = ({
   in: inProp,
   children,
@@ -1923,7 +2084,7 @@ var Slide = ({
     [direction]: true,
     "in": !!inProp
   });
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -1933,19 +2094,19 @@ var Slide = ({
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
   const uiStyleContent = uiStyle({ ...propsComponent?.slide?.ui, transitionDuration: `${duration}ms` });
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: "yr3Slide",
       style: uiStyle({ position: "relative", zIndex: 4, overflow: "hidden" }),
       "data-testid": "yr3Slide",
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx36(
         "div",
         {
           className: classNameContent,
           style: composeStyles(uiStyleContent, propsComponent?.slide?.style || {}),
           "data-testid": "yr3Slide-content",
-          children: /* @__PURE__ */ jsx34(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
+          children: /* @__PURE__ */ jsx36(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
         }
       )
     }
@@ -1953,7 +2114,7 @@ var Slide = ({
 };
 
 // src/components/Switch/Switch.tsx
-import * as React18 from "react";
+import * as React20 from "react";
 
 // src/components/Switch/switch.variants.ts
 var switchVariants = createVariants({
@@ -1982,7 +2143,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx35, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
 var Switch = ({
   checked,
   defaultChecked,
@@ -1992,7 +2153,7 @@ var Switch = ({
   size = "sm",
   label
 }) => {
-  const [internal, setInternal] = React18.useState(defaultChecked || false);
+  const [internal, setInternal] = React20.useState(defaultChecked || false);
   const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal });
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : internal;
@@ -2000,13 +2161,13 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "label",
     {
       className: classname,
       "data-testid": "yr3Switch",
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx37(
           "input",
           {
             type: "checkbox",
@@ -2015,17 +2176,17 @@ var Switch = ({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx35("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx35("span", { className: "yr3Switch--thumb" }) }),
-        /* @__PURE__ */ jsx35("span", { className: "yr3Switch--label", "data-testid": "yr3Switch-label", children: label })
+        /* @__PURE__ */ jsx37("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx37("span", { className: "yr3Switch--thumb" }) }),
+        /* @__PURE__ */ jsx37("span", { className: "yr3Switch--label", "data-testid": "yr3Switch-label", children: label })
       ]
     }
   );
 };
 
 // src/Icons/IconSearch.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var IconSearch = (props) => {
-  return /* @__PURE__ */ jsx36("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__ */ jsx36(
+  return /* @__PURE__ */ jsx38("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__ */ jsx38(
     "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",
@@ -2056,11 +2217,11 @@ var baseTokens = {
 };
 
 // src/theme/notistackContext.tsx
-import * as React19 from "react";
-import { jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
-var NotistackContext = React19.createContext(null);
+import * as React21 from "react";
+import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
+var NotistackContext = React21.createContext(null);
 var NotistackProvider = ({ children }) => {
-  const [snacks, setSnacks] = React19.useState([]);
+  const [snacks, setSnacks] = React21.useState([]);
   const enqueueNotistack = (snack) => {
     const id = Date.now();
     setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
@@ -2075,23 +2236,23 @@ var NotistackProvider = ({ children }) => {
       setSnacks((prev) => prev.filter((s) => s.id !== id));
     }, duration + exitDuration);
   };
-  return /* @__PURE__ */ jsxs13(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
+  return /* @__PURE__ */ jsxs15(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
     children,
-    /* @__PURE__ */ jsx37("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx37(Notistack, { ...snack }, snack.id)) })
+    /* @__PURE__ */ jsx39("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx39(Notistack, { ...snack }, snack.id)) })
   ] });
 };
-var useNotistack = () => React19.useContext(NotistackContext);
+var useNotistack = () => React21.useContext(NotistackContext);
 
 // src/theme/useMediaQuery.tsx
-import * as React20 from "react";
+import * as React22 from "react";
 function useMediaQuery(query) {
   const theme = useTheme();
   const computedQuery = typeof query === "function" ? query(theme) : query;
-  const [matches, setMatches] = React20.useState(() => {
+  const [matches, setMatches] = React22.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(computedQuery).matches;
   });
-  React20.useEffect(() => {
+  React22.useEffect(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(computedQuery);
     const listener = () => setMatches(media.matches);
@@ -2140,7 +2301,9 @@ export {
   IconDown,
   IconSearch,
   Image,
+  ImageDropzone,
   Input,
+  InputArea,
   Label,
   Modal,
   ModalContainer,