@yr3/ui 1.0.2 → 1.0.4

package/dist/{index.mjs → index.cjs}

@@ -1,3 +1,103 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Avatar: () => Avatar,
+  Backdrop: () => Backdrop,
+  BackdropContext: () => BackdropContext,
+  BackdropProvider: () => BackdropProvider,
+  Box: () => Box,
+  Button: () => Button,
+  Calendar: () => Calendar,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip,
+  Collapse: () => Collapse,
+  Container: () => Container,
+  Control: () => Control,
+  ControlContext: () => ControlContext,
+  Divider: () => Divider,
+  Drawer: () => Drawer,
+  Fade: () => Fade,
+  Flex: () => Flex,
+  Grid: () => Grid,
+  Group: () => Group,
+  IconClose: () => IconClose,
+  IconDown: () => IconDown,
+  IconSearch: () => IconSearch,
+  Image: () => Image,
+  ImageDropzone: () => ImageDropzone,
+  Input: () => Input,
+  InputArea: () => InputArea,
+  Label: () => Label,
+  Modal: () => Modal,
+  ModalContainer: () => ModalContainer,
+  Notistack: () => Notistack,
+  NotistackProvider: () => NotistackProvider,
+  Pending: () => Pending,
+  Phone: () => Phone,
+  Radio: () => Radio,
+  Select: () => Select,
+  Slide: () => Slide,
+  Switch: () => Switch,
+  Text: () => Text,
+  ThemeContext: () => ThemeContext,
+  ThemeProvider: () => ThemeProvider,
+  adjustColor: () => adjustColor,
+  applyTheme: () => applyTheme,
+  baseTokens: () => baseTokens,
+  bem: () => bem,
+  bemMerge: () => bemMerge,
+  breakpoints: () => breakpoints,
+  composeStyles: () => composeStyles,
+  createPaletteColor: () => createPaletteColor,
+  createTheme: () => createTheme,
+  createVariants: () => createVariants,
+  cx: () => cx,
+  getContrast: () => getContrast,
+  getMonthCalendar: () => getMonthCalendar,
+  initTheme: () => initTheme,
+  isEmpty: () => isEmpty,
+  text: () => text,
+  times: () => times,
+  uiStyle: () => uiStyle,
+  useBackdrop: () => useBackdrop,
+  useBreakpointValue: () => useBreakpointValue,
+  useClickAway: () => useClickAway,
+  useControl: () => useControl,
+  useMediaQuery: () => useMediaQuery,
+  useNotistack: () => useNotistack,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
 // src/utils/bem.ts
 var bem = (block) => {
   return (element, modifiers) => {
@@ -28,11 +128,11 @@ var bemMerge = (...args) => {
 };
 
 // src/utils/calendar.ts
-import dayjs from "dayjs";
+var import_dayjs = __toESM(require("dayjs"), 1);
 function getMonthCalendar(year, month, startIndex, selected, props) {
-  const today = dayjs().startOf("day");
-  const startOfMonth = dayjs().year(year).month(month).startOf("month");
-  const endOfMonth = dayjs().year(year).month(month).endOf("month");
+  const today = (0, import_dayjs.default)().startOf("day");
+  const startOfMonth = (0, import_dayjs.default)().year(year).month(month).startOf("month");
+  const endOfMonth = (0, import_dayjs.default)().year(year).month(month).endOf("month");
   let dayCurrent = {};
   let startDay = startOfMonth.day();
   startDay = startDay === 0 ? 6 : startDay - 1;
@@ -414,7 +514,7 @@ function initTheme() {
 }
 
 // src/components/Avatar/Avatar.tsx
-import * as React from "react";
+var React = __toESM(require("react"), 1);
 
 // src/components/Avatar/avatar.variants.ts
 var avatarVariants = createVariants({
@@ -457,7 +557,7 @@ var avatarVariants = createVariants({
 var avatar_variants_default = avatarVariants;
 
 // src/components/Avatar/Avatar.tsx
-import { jsx } from "react/jsx-runtime";
+var import_jsx_runtime = require("react/jsx-runtime");
 var Avatar = ({
   src,
   alt,
@@ -476,30 +576,30 @@ var Avatar = ({
   const [error, setError] = React.useState(false);
   const showFallback = !src || error;
   const className = avatar_variants_default({ size, variant, color, bordered, shadow, floating });
-  return /* @__PURE__ */ jsx("div", { className, style: uiStyle(ui), "data-testid": "yr3Avatar", role, onClick, children: !showFallback ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: uiStyle(ui), "data-testid": "yr3Avatar", role, onClick, children: !showFallback ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "img",
     {
       src,
       alt,
       onError: () => setError(true)
     }
-  ) : /* @__PURE__ */ jsx("span", { className: "yr3Avatar--fallback", "data-testid": "yr3Avatar-fallback", children: children || label }) });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "yr3Avatar--fallback", "data-testid": "yr3Avatar-fallback", children: children || label }) });
 };
 
 // src/components/Backdrop/Backdrop.tsx
-import { createPortal } from "react-dom";
+var import_react_dom = require("react-dom");
 
 // src/theme/backdropContext.tsx
-import * as React2 from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var BackdropContext = React2.createContext(null);
 var BackdropProvider = ({ children }) => {
   const [open, setOpen] = React2.useState(false);
   const show = () => setOpen(true);
   const hide = () => setOpen(false);
-  return /* @__PURE__ */ jsxs(BackdropContext.Provider, { value: { open, show, hide }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BackdropContext.Provider, { value: { open, show, hide }, children: [
     children,
-    /* @__PURE__ */ jsx2(Backdrop, {})
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Backdrop, {})
   ] });
 };
 var useBackdrop = () => {
@@ -509,11 +609,11 @@ var useBackdrop = () => {
 };
 
 // src/components/Backdrop/Backdrop.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Backdrop = () => {
   const { open } = useBackdrop();
-  return createPortal(
-    /* @__PURE__ */ jsx3("div", { className: `yr3Backdrop  ${open ? "yr3Backdrop--open" : ""}`, "data-testid": "yr3Backdrop" }),
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `yr3Backdrop  ${open ? "yr3Backdrop--open" : ""}`, "data-testid": "yr3Backdrop" }),
     document.body
   );
 };
@@ -540,7 +640,7 @@ var boxVariants = createVariants({
 });
 
 // src/components/Box/Box.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Box = ({
   content = "start",
   children,
@@ -552,7 +652,7 @@ var Box = ({
   ...props
 }) => {
   const classes = boxVariants({ content, drawer, position });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Component,
     {
       className: classes,
@@ -565,7 +665,7 @@ var Box = ({
 };
 
 // src/components/Text/Text.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Text = ({
   children,
   variant = "inherit",
@@ -578,7 +678,7 @@ var Text = ({
   onClick
 }) => {
   const styleUI = uiStyle({ ...ui, marginTop: gutters[0] || 0, marginBottom: gutters[1] || 0 });
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Component,
     {
       className: `
@@ -629,10 +729,10 @@ var buttonVariant = createVariants({
 });
 
 // src/components/Button/Button.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Button = ({ 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__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     {
       className: buttonClassname,
@@ -640,143 +740,99 @@ 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", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { variant: propsComponent?.text?.variant || "button", children })
     }
   );
 };
 
 // src/components/Calendar/Calendar.tsx
-import * as React3 from "react";
-import dayjs2 from "dayjs";
+var React3 = __toESM(require("react"), 1);
+var import_dayjs2 = __toESM(require("dayjs"), 1);
+var import_weekday = __toESM(require("dayjs/plugin/weekday"), 1);
 
-// src/components/Flex/flex.variants.ts
-var flexVariants = createVariants({
-  base: "yr3Flex",
+// src/components/Calendar/calendar.variants.ts
+var calendarVariants = createVariants({
+  base: "yr3Calendar",
   variants: {
     variant: {
-      row: "yr3Flex--row",
-      column: "yr3Flex--column",
-      wrap: "yr3Flex--wrap"
+      default: "yr3Calendar--default",
+      compact: "yr3Calendar--compact"
     },
-    container: {
-      true: "yr3Flex--container"
+    size: {
+      sm: "yr3Calendar--size-sm",
+      md: "yr3Calendar--size-md",
+      lg: "yr3Calendar--size-lg"
+    }
+  }
+});
+var calendarDayVariants = createVariants({
+  base: "yr3Calendar-day",
+  variants: {
+    isFuture: {
+      true: "yr3Calendar-day--future"
     },
-    center: {
-      true: "yr3Flex--center"
+    isPast: {
+      true: "yr3Calendar-day--past"
     },
-    between: {
-      true: "yr3Flex--between"
+    isToday: {
+      true: "yr3Calendar-day--today"
+    },
+    isSelected: {
+      true: "yr3Calendar-day--selected"
     },
     bordered: {
-      true: "yr3Flex--bordered"
+      true: "yr3Calendar-day--bordered"
+    },
+    color: {
+      primary: "yr3Calendar-day--color-primary",
+      secondary: "yr3Calendar-day--color-secondary",
+      success: "yr3Calendar-day--color-success",
+      text: "yr3Calendar-day--color-text",
+      disabled: "yr3Calendar-day--color-disabled",
+      info: "yr3Calendar-day--color-info",
+      warning: "yr3Calendar-day--color-warning",
+      error: "yr3Calendar-day--color-error"
     }
   }
 });
-var flex_variants_default = flexVariants;
-
-// src/components/Flex/Flex.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Flex = ({
-  container = false,
-  spacing: spacing2 = 1,
-  children,
-  ui,
-  gap,
-  variant = "column",
-  center = false,
-  between = false,
-  style,
-  bordered = false,
-  ...props
-}) => {
-  const classes = flex_variants_default({ variant, container, center, between, bordered, spacing: spacing2 });
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: classes,
-      style: composeStyles(ui, style),
-      ...props,
-      "data-testid": "yr3Flex",
-      children
-    }
-  );
-};
-
-// src/components/Grid/Grid.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Grid = ({
-  container = false,
-  spacing: spacing2 = 0,
-  children,
-  columns = 12,
-  span = 1,
-  ui,
-  style,
-  item = false,
-  size = 0,
-  center = false,
-  ...props
-}) => {
-  if (item) {
-    columns = 0;
-  }
-  if (container) {
-    columns = 0;
-    ui = {
-      ...ui,
-      gridTemplateColumns: `repeat(${columns}, 1fr)`
-    };
-  }
-  if (center) {
-    ui = {
-      ...ui,
-      justifyContent: "center",
-      alignItems: "center"
-    };
-  }
-  const classes = bem("yr3Grid");
-  const className = classes(void 0, { container, [`spacing-${spacing2}`]: center, span: item && `Col-${size}` });
-  return /* @__PURE__ */ jsx8(
-    "div",
-    {
-      className,
-      style: composeStyles(ui, style),
-      "data-testid": "yr3Grid",
-      ...props,
-      children
-    }
-  );
-};
 
 // src/components/Calendar/Calendar.tsx
-import weekday from "dayjs/plugin/weekday";
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-dayjs2.extend(weekday);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+import_dayjs2.default.extend(import_weekday.default);
 var initalPropsComponent = {
-  action: {
-    displayButtons: true,
-    displayCalendar: true,
-    day: {
-      background: "transparent",
-      borderColor: "transparent",
-      ui: {}
-    },
-    buttonNext: {
-      disabled: false,
-      label: "next"
-    },
-    buttonBack: {
-      disabled: false,
-      label: "back"
-    }
+  displayButtons: true,
+  displayCalendar: true,
+  header: {
+    color: "primary",
+    ui: {},
+    style: {}
+  },
+  month: {
+    color: "primary",
+    ui: {},
+    style: {}
+  },
+  day: {
+    color: "primary",
+    bordered: true,
+    ui: {},
+    style: {}
+  },
+  buttonNext: {
+    disabled: false,
+    label: "next"
+  },
+  buttonBack: {
+    disabled: false,
+    label: "back"
   }
 };
 var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar, onMonthChange }) => {
-  const month = dayjs2().month();
+  const month = (0, import_dayjs2.default)().month();
   const [currentMonth, setCurrentMonth] = React3.useState(month);
   const [selected, setSelected] = React3.useState(null);
   const program = React3.useMemo(() => {
-    return getMonthCalendar(dayjs2().year(), currentMonth, 0, selected, mapCalendar);
+    return getMonthCalendar((0, import_dayjs2.default)().year(), currentMonth, 0, selected, mapCalendar);
   }, [selected, currentMonth, mapCalendar]);
   React3.useEffect(() => {
     if (selected) {
@@ -790,37 +846,36 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
       onMonthChange && onMonthChange(currentMonth);
     }
   }, [currentMonth]);
-  return /* @__PURE__ */ jsxs2(Flex, { container: true, center: true, variant: "column", gap: 2, "data-testid": "yr3Calendar", children: [
-    propsComponent.action?.displayButtons && /* @__PURE__ */ jsxs2(Flex, { variant: "row", container: true, ui: { justifyContent: "space-between", marginBottom: 16, width: "80dvw" }, children: [
-      /* @__PURE__ */ jsx9(Button, { disabled: propsComponent.action?.buttonBack?.disabled || false, color: "primary", onClick: () => setCurrentMonth(currentMonth - 1), children: propsComponent.action?.buttonBack?.label }),
-      /* @__PURE__ */ jsx9(Text, { variant: "h6", ui: { textTransform: "uppercase" }, children: program?.monthLabel }),
-      /* @__PURE__ */ jsx9(Button, { disabled: propsComponent.action?.buttonNext?.disabled, color: "primary", onClick: () => setCurrentMonth(currentMonth + 1), children: propsComponent.action?.buttonNext?.label })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "yr3Calendar", "data-testid": "yr3Calendar", children: [
+    propsComponent?.displayButtons && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "yr3Calendar--header", "data-testid": "yr3CalendarHeader", style: composeStyles(propsComponent?.header?.ui, propsComponent?.header?.style), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { disabled: propsComponent?.buttonBack?.disabled || false, color: propsComponent.header?.color || "primary", onClick: () => setCurrentMonth(currentMonth - 1), ui: { justifyContent: "flex-start" }, children: propsComponent?.buttonBack?.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { variant: "h6", color: propsComponent.header?.color || "primary", ui: { textTransform: "uppercase", textAlign: "center" }, children: program?.monthLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { disabled: propsComponent?.buttonNext?.disabled, color: propsComponent?.header?.color || "primary", onClick: () => setCurrentMonth(currentMonth + 1), ui: { justifyContent: "flex-end" }, children: propsComponent?.buttonNext?.label })
     ] }),
-    propsComponent.action?.displayCalendar && /* @__PURE__ */ jsxs2(Grid, { container: true, columns: 7, ui: { alignItems: "flex-start", justifyContent: "flex-start", width: "80dvw" }, spacing: 0, children: [
-      program?.daysContainer.map((i) => /* @__PURE__ */ jsx9(Flex, { variant: "wrap", center: true, ui: { width: 40, marginBottom: 5 }, children: /* @__PURE__ */ jsx9(Text, { variant: "caption", color: "primary", ui: { opacity: 0.7, textTransform: "uppercase" }, children: dayjs2().day(i + 1).format("dd") }) }, i)),
-      times(program.calendar.length, (i) => /* @__PURE__ */ jsx9(React3.Fragment, { children: times(program.calendar[i].length, (j) => /* @__PURE__ */ jsx9(
-        Flex,
+    propsComponent?.displayCalendar && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "yr3Calendar--container", children: [
+      program?.daysContainer.map((i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "yr3Calendar--month", style: composeStyles(propsComponent?.month?.ui, propsComponent?.month?.style), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Text,
         {
-          center: true,
-          ui: {
-            width: 40,
-            height: 20,
-            marginBottom: 5,
-            borderRadius: 4,
-            opacity: program.calendar[i][j]?.isPast ? 0.6 : 1,
-            border: "1px solid transparent",
-            background: propsComponent.action?.day?.background || "transparent",
-            borderColor: propsComponent.action?.day?.borderColor || "transparent",
-            ...propsComponent.action?.day?.ui
-            // background: program.calendar[i][j]?.isToday ? theme?.colors?.disabled  as never:
-            //         program.calendar[i][j]?.data ? theme?.colors?.secondary?.dark : 
-            //         'transparent',
-            // borderColor: !program.calendar[i][j] ? 'transparent' : 
-            //        !selected && program.calendar[i][j]?.isToday ? theme?.colors?.primary?.main  :
-            //         program.calendar[i][j]?.selected ?  theme?.colors.secondary?.main  :
-            //         !!program.calendar[i][j]?.isFuture ?  theme?.colors.primary?.light  : 
-            //         theme?.colors.disabled,
-          },
+          variant: "caption",
+          color: propsComponent?.month?.color || "primary",
+          ui: { ...propsComponent?.month?.ui, opacity: 0.7, textTransform: "uppercase" },
+          children: (0, import_dayjs2.default)().day(i + 1).format("dd")
+        }
+      ) }, `month_day_${i}`)),
+      times(program.calendar.length, (i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(React3.Fragment, { children: times(program.calendar[i].length, (j) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          className: calendarDayVariants({
+            isToday: program.calendar[i][j]?.isToday,
+            isSelected: program.calendar[i][j]?.selected,
+            isPast: program.calendar[i][j]?.isPast,
+            isFuture: program.calendar[i][j]?.isFuture,
+            isCurrentMonth: program.calendar[i][j]?.isCurrentMonth,
+            ui: propsComponent?.day?.ui,
+            bordered: !!program.calendar[i][j] && propsComponent?.day?.bordered,
+            color: propsComponent?.day?.color || "primary"
+          }),
+          style: composeStyles(propsComponent?.day?.ui, propsComponent?.day?.style),
           "data-testid": "yr3CalendarDay",
           onClick: () => {
             if (selected === program.calendar[i][j]) {
@@ -829,7 +884,7 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
               setSelected(program.calendar[i][j]);
             }
           },
-          children: /* @__PURE__ */ jsx9(
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Text,
             {
               variant: "body2",
@@ -838,15 +893,15 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
             }
           )
         },
-        j
+        `day-${i}-${j}`
       )) }, i))
     ] })
   ] });
 };
 
 // src/components/Checkbox/Checkbox.tsx
-import * as React4 from "react";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Checkbox = ({
   checked,
   defaultChecked,
@@ -868,8 +923,8 @@ var Checkbox = ({
   const classes = bemClasse(void 0, { color: `color-${color}`, disabled, variant: `variant-${variant}` });
   const boxClasses = bem("yr3Checkbox-box");
   const classesBox = boxClasses(void 0, { checked: !!value });
-  return /* @__PURE__ */ jsxs3("label", { className: classes, style: uiStyle(propsComponent?.checkbox?.ui), "data-testid": "yr3Checkbox", children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: classes, style: uiStyle(propsComponent?.checkbox?.ui), "data-testid": "yr3Checkbox", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "input",
       {
         type: "checkbox",
@@ -879,8 +934,8 @@ var Checkbox = ({
         "data-testid": "yr3Checkbox-input"
       }
     ),
-    /* @__PURE__ */ jsx10("span", { className: classesBox, "data-testid": "yr3Checkbox-box" }),
-    label && /* @__PURE__ */ jsx10(Text, { variant: "caption", color: !value ? propsComponent?.content?.color : color, ...propsComponent?.content, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: classesBox, "data-testid": "yr3Checkbox-box" }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { variant: "caption", color: !value ? propsComponent?.content?.color : color, ...propsComponent?.content, children: label })
   ] });
 };
 
@@ -914,9 +969,9 @@ var chipVariants = createVariants({
 var chip_variants_default = chipVariants;
 
 // src/Icons/IconClose.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var IconClose = (props) => {
-  return /* @__PURE__ */ jsx11("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__ */ jsx11(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
     "path",
     {
       d: "M16 16L12 12M12 12L8 8M12 12L16 8M12 12L8 16",
@@ -929,10 +984,10 @@ var IconClose = (props) => {
 };
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Chip = ({ label, variant, color, icon, onDelete, rounded, size = "medium", ui, style, ...props }) => {
   const className = chip_variants_default({ variant, colors: color, rounded, size });
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className,
@@ -944,16 +999,16 @@ var Chip = ({ label, variant, color, icon, onDelete, rounded, size = "medium", u
       },
       children: [
         icon,
-        /* @__PURE__ */ jsx12("span", { className: "yr3Chip__label", children: label }),
-        onDelete && /* @__PURE__ */ jsx12("span", { className: "yr3Chip__delete", onClick: onDelete, role: "button", "aria-label": "delete", children: /* @__PURE__ */ jsx12(IconClose, { width: 20, height: 20, stroke: color }) })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "yr3Chip__label", children: label }),
+        onDelete && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "yr3Chip__delete", onClick: onDelete, role: "button", "aria-label": "delete", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconClose, { width: 20, height: 20, stroke: color }) })
       ]
     }
   );
 };
 
 // src/components/Collapse/Collapse.tsx
-import * as React5 from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Collapse = ({ children, open, anchor }) => {
   const ref = React5.useRef(null);
   const [height, setHeight] = React5.useState(0);
@@ -966,11 +1021,11 @@ var Collapse = ({ children, open, anchor }) => {
       }
     }
   }, [open, children]);
-  return /* @__PURE__ */ jsx13("div", { className: `yr3Collapse yr3Collapse--${anchor}`, style: { height }, "data-testid": "yr3Collapse", children: /* @__PURE__ */ jsx13("div", { ref, className: "yr3Collapse__inner", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `yr3Collapse yr3Collapse--${anchor}`, style: { height }, "data-testid": "yr3Collapse", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, className: "yr3Collapse__inner", children }) });
 };
 
 // src/components/Container/Container.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Container = ({
   children,
   maxWidth = "sm",
@@ -980,7 +1035,7 @@ var Container = ({
 }) => {
   const containerClassName = bem("yr3Container");
   const classes = containerClassName(void 0, { maxWidth, static: fixed });
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       className: classes,
@@ -992,12 +1047,12 @@ var Container = ({
 };
 
 // src/theme/controlContext.tsx
-import * as React6 from "react";
+var React6 = __toESM(require("react"), 1);
 var ControlContext = React6.createContext(null);
 var useControl = () => React6.useContext(ControlContext);
 
 // src/components/Control/Control.tsx
-import * as React7 from "react";
+var React7 = __toESM(require("react"), 1);
 
 // src/components/Control/control.variants.ts
 var controlVariants = createVariants({
@@ -1039,7 +1094,7 @@ var controlVariants = createVariants({
 });
 
 // src/components/Control/Control.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Control = ({
   children,
   error = false,
@@ -1058,7 +1113,7 @@ var Control = ({
     disabled
   };
   const classes = controlVariants({ variant, color, label });
-  return /* @__PURE__ */ jsx15(ControlContext.Provider, { value, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ControlContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       className: classes,
@@ -1100,7 +1155,7 @@ var dividerVariants = createVariants({
 var dividerVariants_default = dividerVariants;
 
 // src/components/Divider/Divider.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Divider = ({
   orientation = "horizontal",
   text: text2,
@@ -1110,14 +1165,14 @@ var Divider = ({
   color = "primary"
 }) => {
   const classname = dividerVariants_default({ orientation, align, withText: !!text2, color });
-  return /* @__PURE__ */ jsx16("div", { className: classname, style: composeStyles(ui, style), "data-testid": "yr3Divider", children: text2 && /* @__PURE__ */ jsx16("span", { className: "yr3Divider--text", "data-testid": "yr3Divider-text", children: text2 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classname, style: composeStyles(ui, style), "data-testid": "yr3Divider", children: text2 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "yr3Divider--text", "data-testid": "yr3Divider-text", children: text2 }) });
 };
 
 // src/components/Drawer/Drawer.tsx
-import * as React8 from "react";
+var React8 = __toESM(require("react"), 1);
 
 // src/components/Drawer/DrawerContainer.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DrawerContainer = ({ children, ui, style, props, onClose }) => {
   const { hide } = useBackdrop();
   const handleClose = () => {
@@ -1127,14 +1182,14 @@ var DrawerContainer = ({ children, ui, style, props, onClose }) => {
     }
     return;
   };
-  return /* @__PURE__ */ jsx17("div", { className: "yr3Drawer--container", style: composeStyles(ui, style), onClick: handleClose, "data-testid": "yr3Drawer-container", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "yr3Drawer--container", style: composeStyles(ui, style), onClick: handleClose, "data-testid": "yr3Drawer-container", children });
 };
 var DrawerContainer_default = DrawerContainer;
 
 // src/hooks/useClickAway.ts
-import { useEffect as useEffect3 } from "react";
+var import_react = require("react");
 var useClickAway = (ref, callback) => {
-  useEffect3(() => {
+  (0, import_react.useEffect)(() => {
     const handleClick = (e) => {
       if (!ref.current || ref.current.contains(e.target)) return;
       callback();
@@ -1147,7 +1202,7 @@ var useClickAway = (ref, callback) => {
 };
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
   const ref = React8.useRef(null);
@@ -1170,7 +1225,7 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
       onClose();
     }
   }, [propsComponent?.onClose]);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: `yr3Drawer ${anchor && `yr3Drawer--${anchor}`} ${open && "yr3Drawer--open"}`,
@@ -1178,13 +1233,13 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
       onClick: (e) => e.stopPropagation(),
       ref,
       "data-testid": "yr3Drawer",
-      children: /* @__PURE__ */ jsx18(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         DrawerContainer_default,
         {
           children,
           ...propsComponent?.container,
           props: propsComponent?.closing,
-          onClose: () => propsComponent?.closing === "container" ? onClose() : console.log("closing null")
+          onClose: () => propsComponent?.closing === "container" ? onClose() : {}
         }
       )
     },
@@ -1193,8 +1248,8 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
 };
 
 // src/components/Fade/Fade.tsx
-import * as React9 from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Fade = ({
   in: inProp,
   children,
@@ -1211,7 +1266,7 @@ var Fade = ({
     }
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       className: `yr3Fade ${inProp ? "yr3Fade--in" : ""}`,
@@ -1222,8 +1277,107 @@ var Fade = ({
   );
 };
 
+// src/components/Flex/flex.variants.ts
+var flexVariants = createVariants({
+  base: "yr3Flex",
+  variants: {
+    variant: {
+      row: "yr3Flex--row",
+      column: "yr3Flex--column",
+      wrap: "yr3Flex--wrap"
+    },
+    container: {
+      true: "yr3Flex--container"
+    },
+    center: {
+      true: "yr3Flex--center"
+    },
+    between: {
+      true: "yr3Flex--between"
+    },
+    bordered: {
+      true: "yr3Flex--bordered"
+    }
+  }
+});
+var flex_variants_default = flexVariants;
+
+// src/components/Flex/Flex.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Flex = ({
+  container = false,
+  spacing: spacing2 = 1,
+  children,
+  ui,
+  gap,
+  variant = "column",
+  center = false,
+  between = false,
+  style,
+  bordered = false,
+  ...props
+}) => {
+  const classes = flex_variants_default({ variant, container, center, between, bordered, spacing: spacing2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      className: classes,
+      style: composeStyles(ui, style),
+      ...props,
+      "data-testid": "yr3Flex",
+      children
+    }
+  );
+};
+
+// src/components/Grid/Grid.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Grid = ({
+  container = false,
+  spacing: spacing2 = 0,
+  children,
+  columns = 12,
+  span = 1,
+  ui,
+  style,
+  item = false,
+  size = 0,
+  center = false,
+  ...props
+}) => {
+  if (item) {
+    columns = 0;
+  }
+  if (container) {
+    columns = 0;
+    ui = {
+      ...ui,
+      gridTemplateColumns: `repeat(${columns}, 1fr)`
+    };
+  }
+  if (center) {
+    ui = {
+      ...ui,
+      justifyContent: "center",
+      alignItems: "center"
+    };
+  }
+  const classes = bem("yr3Grid");
+  const className = classes(void 0, { container, [`spacing-${spacing2}`]: center, span: item && `Col-${size}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      className,
+      style: composeStyles(ui, style),
+      "data-testid": "yr3Grid",
+      ...props,
+      children
+    }
+  );
+};
+
 // src/components/Group/Group.tsx
-import * as React10 from "react";
+var React10 = __toESM(require("react"), 1);
 
 // src/components/Group/group.variants.ts
 var groupVariants = createVariants({
@@ -1249,7 +1403,7 @@ var groupVariants = createVariants({
 });
 
 // src/components/Group/Group.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var initialComponents = {
   group: {
     ui: {},
@@ -1276,13 +1430,13 @@ var Group = ({
     }
   }, [value, isControlled]);
   const classItems = bem("yr3Group--item");
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: groupVariants({ variant, color }),
       "data-testid": "yr3Group",
       style: composeStyles(propsComponent.group?.ui, propsComponent.group?.style),
-      children: options.map((opt) => /* @__PURE__ */ jsx20(
+      children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
         {
           "data-testid": "yr3Group-item",
@@ -1298,14 +1452,14 @@ var Group = ({
 };
 
 // src/components/Image/Image.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Image = ({
   src,
   alt = "",
   ui,
   style
 }) => {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "img",
     {
       src,
@@ -1317,16 +1471,72 @@ var Image = ({
   );
 };
 
+// src/components/ImageDropzone/ImageDropzone.tsx
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("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__ */ (0, import_jsx_runtime22.jsx)(Box, { as: "div", position: "relative", content: "center", ...propsComponent?.box, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "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__ */ (0, import_jsx_runtime22.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            hidden: true,
+            multiple,
+            accept: "image/*",
+            onChange: (e) => handleFiles(e.target.files)
+          }
+        ),
+        isEmpty(files) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--content", 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", 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", 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", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: defaultImage }) }),
+        component
+      ]
+    }
+  ) });
+};
+
 // src/components/Input/Input.tsx
-import * as React11 from "react";
+var React12 = __toESM(require("react"), 1);
 
 // src/components/Label/Label.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+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__ */ jsx22(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "span",
     {
       className: classnames,
@@ -1378,7 +1588,7 @@ var inputVariants = createVariants({
 });
 
 // src/components/Input/Input.tsx
-import { jsx as jsx23, jsxs as jsxs5 } from "react/jsx-runtime";
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var initiaPropsComponent = {
   label: {
     display: true,
@@ -1386,7 +1596,7 @@ var initiaPropsComponent = {
     style: {}
   }
 };
-var Input = React11.forwardRef(
+var Input = React12.forwardRef(
   ({
     label,
     value,
@@ -1401,9 +1611,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;
@@ -1433,8 +1643,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__ */ (0, import_jsx_runtime24.jsxs)(Control, { variant, color, label: propsComponent?.label?.display, children: [
+      propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Label,
         {
           text: label || "",
@@ -1443,7 +1653,7 @@ var Input = React11.forwardRef(
           ...propsComponent.label
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "input",
         {
           ref,
@@ -1459,36 +1669,36 @@ var Input = React11.forwardRef(
           "data-testid": "yr3Input"
         }
       ),
-      /* @__PURE__ */ jsx23(Text, { variant: "helper", "data-testid": "yr3Input-helper", children: error || internalError || "" })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { variant: "helper", "data-testid": "yr3Input-helper", children: error || internalError || "" })
     ] });
   }
 );
 
 // src/components/Input/InputPhone.tsx
-import * as React14 from "react";
+var React15 = __toESM(require("react"), 1);
 
 // src/components/Select/Selector.tsx
-import * as React12 from "react";
+var React13 = __toESM(require("react"), 1);
 
 // src/Icons/IconDown.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+var import_jsx_runtime25 = require("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__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("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";
+var import_jsx_runtime26 = require("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__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "yr3Selector-wrapper", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "yr3Selector--control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(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__ */ (0, import_jsx_runtime26.jsx)("div", { className: "yr3Select--menu", children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         className: "yr3Select--option",
@@ -1518,19 +1728,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);
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("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__ */ (0, import_jsx_runtime27.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(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";
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Phone = ({
   name,
   value,
@@ -1540,8 +1750,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()}`;
@@ -1553,10 +1763,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__ */ (0, import_jsx_runtime28.jsxs)(Control, { variant: "outlined", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label, { text: label, className: "yr3Input--active" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "yr3PhoneInput", "data-testid": "yr3Phone", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Selector_default,
         {
           options: countries.map((c) => ({
@@ -1576,8 +1786,8 @@ var Phone = ({
           style: propsComponent?.selector?.style
         }
       ),
-      /* @__PURE__ */ jsx27(Divider, { orientation: "vertical", ...propsComponent?.divider }),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Divider, { orientation: "vertical", ...propsComponent?.divider }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Input,
         {
           type: "phone",
@@ -1594,27 +1804,127 @@ var Phone = ({
   ] });
 };
 
-// src/components/Input/InputPlaces.tsx
-import * as React15 from "react";
-import { useAutocompletePlaces } from "@yr3/autocomplete-places";
-import { jsx as jsx28, jsxs as jsxs8 } from "react/jsx-runtime";
+// src/components/InputArea/InputArea.tsx
+var React16 = __toESM(require("react"), 1);
+
+// 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
+var import_jsx_runtime29 = require("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__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { position: "relative" }, children: [
+    propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      Label,
+      {
+        text: label || "",
+        className: "yr3Input--active",
+        ...propsComponent.label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "textarea",
+      {
+        className: classes,
+        ref,
+        value: currentValue,
+        rows,
+        onChange: handleChange,
+        style: composeStyles(ui, style),
+        "data-testid": "yr3InputArea"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(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 React16 from "react";
+var React17 = __toESM(require("react"), 1);
 
 // src/components/Modal/ModalContainer.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+var import_jsx_runtime30 = 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__ */ jsx29("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx30, jsxs as jsxs9 } from "react/jsx-runtime";
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Modal = ({ open, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (open) {
       show();
     } else {
@@ -1623,9 +1933,9 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
   }, [open, show]);
   const classes = bem("yr3Modal");
   const classComponent = classes(void 0, { "open": !!open });
-  return /* @__PURE__ */ jsx30("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ jsx30(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ jsxs9(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
     children,
-    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ jsx30(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
+    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
   ] }) }) });
 };
 
@@ -1665,15 +1975,15 @@ var notistackVariants = createVariants({
 });
 
 // src/components/Notistack/Notistack.tsx
-import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
+var import_jsx_runtime32 = 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__ */ jsxs10("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
-    /* @__PURE__ */ jsx31("span", { style: containerStyle, children: message }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: containerStyle, children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         className: "yr3Notistack--progress",
@@ -1707,7 +2017,7 @@ var pendingVariants = createVariants({
 });
 
 // src/components/Pending/Pending.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Pending = ({
   variant,
   width,
@@ -1720,7 +2030,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__ */ jsx32(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       className: pendingVariants({ variant, color }),
@@ -1749,7 +2059,7 @@ var radioVariant = createVariants({
 });
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Radio = ({
   checked,
   value,
@@ -1765,8 +2075,8 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  return /* @__PURE__ */ jsxs11("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
-    /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "input",
       {
         type: "radio",
@@ -1778,8 +2088,8 @@ var Radio = ({
       }
     ),
     iconChecked && checked ? iconChecked : !checked && iconUnchecked ? iconUnchecked : null,
-    !iconChecked && !iconUnchecked && /* @__PURE__ */ jsx33("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
-    typeof label === "string" && /* @__PURE__ */ jsx33(
+    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
+    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "span",
       {
         className: "yr3Radio--label",
@@ -1792,15 +2102,15 @@ var Radio = ({
 };
 
 // src/components/Select/Select.tsx
-import * as React17 from "react";
-import { jsx as jsx34, jsxs as jsxs12 } from "react/jsx-runtime";
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
-  const [open, setOpen] = React17.useState(false);
-  const [valueState, setValueState] = React17.useState(value || defaultValue || null);
-  const ref = React17.useRef(null);
+  const [open, setOpen] = React18.useState(false);
+  const [valueState, setValueState] = React18.useState(value || defaultValue || null);
+  const ref = React18.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ jsxs12(Control, { ...propsComponent?.control, children: [
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Label,
       {
         ...propsComponent?.label,
@@ -1808,10 +2118,10 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         className: open || valueState ? "yr3Input--active" : ""
       }
     ),
-    /* @__PURE__ */ jsxs12("div", { className: "yr3Select-wrapper", ref, children: [
-      /* @__PURE__ */ jsxs12("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
-        /* @__PURE__ */ jsx34("div", { className: "yr3Select--control", children: valueState }),
-        /* @__PURE__ */ jsx34("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "yr3Select-wrapper", ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "yr3Select--control", children: valueState }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           IconDown,
           {
             width: propsComponent?.icon?.style?.width || 26,
@@ -1821,13 +2131,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
           }
         ) })
       ] }),
-      open && /* @__PURE__ */ jsx34(
+      open && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "div",
         {
           className: "yr3Select--menu",
           style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
           "data-testid": "yr3Select-menu",
-          children: options.map((opt) => /* @__PURE__ */ jsx34(
+          children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "div",
             {
               className: "yr3Select--option",
@@ -1859,8 +2169,8 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 };
 
 // src/components/Slide/Slide.tsx
-import * as React18 from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Slide = ({
   in: inProp,
   children,
@@ -1874,7 +2184,7 @@ var Slide = ({
     [direction]: true,
     "in": !!inProp
   });
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -1884,19 +2194,19 @@ var Slide = ({
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
   const uiStyleContent = uiStyle({ ...propsComponent?.slide?.ui, transitionDuration: `${duration}ms` });
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       className: "yr3Slide",
       style: uiStyle({ position: "relative", zIndex: 4, overflow: "hidden" }),
       "data-testid": "yr3Slide",
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "div",
         {
           className: classNameContent,
           style: composeStyles(uiStyleContent, propsComponent?.slide?.style || {}),
           "data-testid": "yr3Slide-content",
-          children: /* @__PURE__ */ jsx35(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
         }
       )
     }
@@ -1904,7 +2214,7 @@ var Slide = ({
 };
 
 // src/components/Switch/Switch.tsx
-import * as React19 from "react";
+var React20 = __toESM(require("react"), 1);
 
 // src/components/Switch/switch.variants.ts
 var switchVariants = createVariants({
@@ -1933,7 +2243,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Switch = ({
   checked,
   defaultChecked,
@@ -1943,7 +2253,7 @@ var Switch = ({
   size = "sm",
   label
 }) => {
-  const [internal, setInternal] = React19.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;
@@ -1951,13 +2261,13 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "label",
     {
       className: classname,
       "data-testid": "yr3Switch",
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "input",
           {
             type: "checkbox",
@@ -1966,17 +2276,17 @@ var Switch = ({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx36("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx36("span", { className: "yr3Switch--thumb" }) }),
-        /* @__PURE__ */ jsx36("span", { className: "yr3Switch--label", "data-testid": "yr3Switch-label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--thumb" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--label", "data-testid": "yr3Switch-label", children: label })
       ]
     }
   );
 };
 
 // src/Icons/IconSearch.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var IconSearch = (props) => {
-  return /* @__PURE__ */ jsx37("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__ */ jsx37(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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",
@@ -2007,11 +2317,11 @@ var baseTokens = {
 };
 
 // src/theme/notistackContext.tsx
-import * as React20 from "react";
-import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
-var NotistackContext = React20.createContext(null);
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var NotistackContext = React21.createContext(null);
 var NotistackProvider = ({ children }) => {
-  const [snacks, setSnacks] = React20.useState([]);
+  const [snacks, setSnacks] = React21.useState([]);
   const enqueueNotistack = (snack) => {
     const id = Date.now();
     setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
@@ -2026,23 +2336,23 @@ var NotistackProvider = ({ children }) => {
       setSnacks((prev) => prev.filter((s) => s.id !== id));
     }, duration + exitDuration);
   };
-  return /* @__PURE__ */ jsxs14(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
     children,
-    /* @__PURE__ */ jsx38("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx38(Notistack, { ...snack }, snack.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Notistack, { ...snack }, snack.id)) })
   ] });
 };
-var useNotistack = () => React20.useContext(NotistackContext);
+var useNotistack = () => React21.useContext(NotistackContext);
 
 // src/theme/useMediaQuery.tsx
-import * as React21 from "react";
+var React22 = __toESM(require("react"), 1);
 function useMediaQuery(query) {
   const theme = useTheme();
   const computedQuery = typeof query === "function" ? query(theme) : query;
-  const [matches, setMatches] = React21.useState(() => {
+  const [matches, setMatches] = React22.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(computedQuery).matches;
   });
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(computedQuery);
     const listener = () => setMatches(media.matches);
@@ -2067,7 +2377,8 @@ function useBreakpointValue(values) {
 
 // src/index.ts
 initTheme();
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   Avatar,
   Backdrop,
   BackdropContext,
@@ -2091,7 +2402,9 @@ export {
   IconDown,
   IconSearch,
   Image,
+  ImageDropzone,
   Input,
+  InputArea,
   Label,
   Modal,
   ModalContainer,
@@ -2131,4 +2444,4 @@ export {
   useMediaQuery,
   useNotistack,
   useTheme
-};
+});