@yr3/ui 1.0.13 → 1.0.14

package/dist/index.cjs

@@ -57,6 +57,7 @@ __export(index_exports, {
   Input: () => Input,
   InputArea: () => InputArea,
   Label: () => Label,
+  Loader: () => Loader,
   Modal: () => Modal,
   ModalContainer: () => ModalContainer,
   Notistack: () => Notistack,
@@ -73,6 +74,7 @@ __export(index_exports, {
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
   adjustColor: () => adjustColor,
+  alpha: () => alpha,
   applyTheme: () => applyTheme,
   baseTokens: () => baseTokens,
   bem: () => bem,
@@ -85,14 +87,19 @@ __export(index_exports, {
   createTheme: () => createTheme,
   createVariants: () => createVariants,
   cx: () => cx,
+  darken: () => darken,
   getContrast: () => getContrast,
   getCountryCodePhone: () => getCountryCodePhone,
   getDialPhone: () => getDialPhone,
   getMonthCalendar: () => getMonthCalendar,
   getNumberPhone: () => getNumberPhone,
+  hexToRgb: () => hexToRgb,
   initTheme: () => initTheme,
   isEmpty: () => isEmpty,
+  lighten: () => lighten,
+  mergeDeep: () => mergeDeep,
   normalizePhone: () => normalizePhone,
+  rgbToHex: () => rgbToHex,
   text: () => text,
   times: () => times,
   uiStyle: () => uiStyle,
@@ -214,6 +221,20 @@ function getMonthCalendar(year, month, startIndex, selected, props) {
 }
 
 // src/utils/color.ts
+var rgbToHex = (r, g, b) => {
+  return "#" + [r, g, b].map(
+    (v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")
+  ).join("");
+};
+var hexToRgb = (hex) => {
+  const clean = hex.replace("#", "");
+  const num = parseInt(clean, 16);
+  return {
+    r: num >> 16 & 255,
+    g: num >> 8 & 255,
+    b: num & 255
+  };
+};
 var adjustColor = (hex, amount) => {
   const num = parseInt(hex.replace("#", ""), 16);
   let r = (num >> 16) + amount;
@@ -241,6 +262,26 @@ var createPaletteColor = (main) => {
     contrastText: getContrast(main)
   };
 };
+var lighten = (hex, amount) => {
+  const { r, g, b } = hexToRgb(hex);
+  return rgbToHex(
+    r + (255 - r) * amount,
+    g + (255 - g) * amount,
+    b + (255 - b) * amount
+  );
+};
+var darken = (hex, amount) => {
+  const { r, g, b } = hexToRgb(hex);
+  return rgbToHex(
+    r * (1 - amount),
+    g * (1 - amount),
+    b * (1 - amount)
+  );
+};
+var alpha = (hex, opacity) => {
+  const { r, g, b } = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
 
 // src/utils/common.ts
 function isEmpty(value) {
@@ -402,6 +443,24 @@ var getNumberPhone = (phone, dial) => {
   return phone;
 };
 
+// src/utils/merge.ts
+function mergeDeep(target, source) {
+  if (!source) return target;
+  const output = { ...target };
+  Object.keys(source).forEach((key) => {
+    const k = key;
+    if (typeof source[k] === "object" && source[k] !== null && !Array.isArray(source[k])) {
+      output[k] = mergeDeep(
+        target[k] || {},
+        source[k]
+      );
+    } else {
+      output[k] = source[k];
+    }
+  });
+  return output;
+}
+
 // src/theme/breakpoint.ts
 var breakpoints = {
   xs: 0,
@@ -479,6 +538,7 @@ var createTheme = (props) => {
       warning: createPaletteColor("#ffc107"),
       info: createPaletteColor("#17a2b8"),
       disabled: "#aeaeae84",
+      backdrop: "rgba(0, 0, 0, 0.5)",
       background: {
         default: "#0f0f1a",
         surface: "#1a1a2e"
@@ -486,6 +546,10 @@ var createTheme = (props) => {
       text: {
         primary: "#ffffff",
         secondary: "#2e2f2f"
+      },
+      common: {
+        white: "#ffffff",
+        black: "#000000"
       }
     },
     breakpoints,
@@ -520,6 +584,9 @@ var applyTheme = (theme, target) => {
       root.style.setProperty(`--color-${key}-contrast`, value.contrastText);
     }
   });
+  if (theme.colors.backdrop) {
+    root.style.setProperty("--color-backdrop", theme.colors.backdrop);
+  }
   if (theme.colors.background?.default) {
     root.style.setProperty("--color-bg", theme.colors.background.default);
   }
@@ -529,12 +596,21 @@ var applyTheme = (theme, target) => {
   if (theme.colors.disabled) {
     root.style.setProperty("--color-disabled", theme.colors.disabled);
   }
+  if (theme.colors.text?.primary) {
+    root.style.setProperty("--color-text", theme.colors.text?.primary);
+  }
   if (theme.colors.text?.primary) {
     root.style.setProperty("--color-text-primary", theme.colors.text?.primary);
   }
   if (theme.colors.text?.secondary) {
     root.style.setProperty("--color-text-secondary", theme.colors.text?.secondary);
   }
+  if (theme.colors.common?.white) {
+    root.style.setProperty("--color-white", theme.colors.common.white);
+  }
+  if (theme.colors.common?.black) {
+    root.style.setProperty("--color-black", theme.colors.common.black);
+  }
   if (theme.breakpoints) {
     Object.entries(theme.breakpoints).forEach(([key, value]) => {
       document.documentElement.style.setProperty(
@@ -580,7 +656,8 @@ var avatarVariants = createVariants({
       text: "yr3Avatar--color-text",
       warning: "yr3Avatar--color-warning",
       info: "yr3Avatar--color-info",
-      error: "yr3Avatar--color-error"
+      error: "yr3Avatar--color-error",
+      common: "yr3Avatar--color-common"
     },
     size: {
       sm: "yr3Avatar--sm",
@@ -590,10 +667,11 @@ var avatarVariants = createVariants({
     variant: {
       circle: "yr3Avatar--circle",
       square: "yr3Avatar--square",
-      rounded: "yr3Avatar--rounded"
+      rounded: "yr3Avatar--rounded",
+      bordered: "yr3Avatar--bordered"
     },
     bordered: {
-      true: "yr3Avatar--bordered"
+      true: "yr3Avatar--border-active"
     },
     shadow: {
       0: "",
@@ -618,7 +696,7 @@ var Avatar = ({
   variant = "circle",
   color = "primary",
   label,
-  bordered = true,
+  bordered = false,
   ui,
   shadow = 0,
   onClick,
@@ -746,7 +824,8 @@ var textVariants = createVariants({
       warning: "yr3Text--color-warning",
       error: "yr3Text--color-error",
       info: "yr3Text--color-info",
-      background: "yr3Text--color-background"
+      background: "yr3Text--color-background",
+      common: "yr3Text--color-common"
     },
     weight: {
       light: "yr3Text--weight-light",
@@ -806,7 +885,8 @@ var buttonVariant = createVariants({
       info: "yr3Button--color-info",
       error: "yr3Button--color-error",
       background: "yr3Button--color-background",
-      warning: "yr3Button--color-warning"
+      warning: "yr3Button--color-warning",
+      common: "yr3Button--color-common"
     },
     size: {
       auto: "yr3Button--size-auto",
@@ -1002,6 +1082,19 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
 // src/components/Checkbox/Checkbox.tsx
 var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var initialPropsComponent = {
+  checkbox: {
+    ui: {
+      color: "primary"
+    }
+  },
+  content: {
+    variant: "caption",
+    color: "primary",
+    ui: {},
+    style: {}
+  }
+};
 var Checkbox = ({
   checked,
   defaultChecked,
@@ -1010,6 +1103,7 @@ var Checkbox = ({
   color = "primary",
   disabled,
   propsComponent,
+  type = "default",
   variant = "text"
 }) => {
   const [internal, setInternal] = React4.useState(defaultChecked || false);
@@ -1019,11 +1113,12 @@ var Checkbox = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
+  const properties = mergeDeep(initialPropsComponent, propsComponent || {});
   const bemClasse = bem("yr3Checkbox");
-  const classes = bemClasse(void 0, { color: `color-${color}`, disabled, variant: `variant-${variant}` });
+  const classes = bemClasse(void 0, { color: `color-${color}`, disabled, variant: `variant-${variant}`, type: `type-${type}` });
   const boxClasses = bem("yr3Checkbox-box");
   const classesBox = boxClasses(void 0, { checked: !!value });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: classes, style: uiStyle(propsComponent?.checkbox?.ui), "data-testid": "yr3Checkbox", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: classes, style: uiStyle(properties?.checkbox?.ui), "data-testid": "yr3Checkbox", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "input",
       {
@@ -1035,7 +1130,7 @@ var Checkbox = ({
       }
     ),
     /* @__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 })
+    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { variant: "caption", color: !value ? properties?.content?.color : color, ...properties?.content, children: label })
   ] });
 };
 
@@ -1058,7 +1153,10 @@ var chipVariants = createVariants({
       success: "yr3Chip--success",
       error: "yr3Chip--error",
       warning: "yr3Chip--warning",
-      info: "yr3Chip--info"
+      info: "yr3Chip--info",
+      common: "yr3Chip--common",
+      background: "yr3Chip--background",
+      disabled: "yr3Chip--disabled"
     },
     rounded: {
       true: "yr3Chip--rounded",
@@ -1085,7 +1183,22 @@ var IconClose = (props) => {
 
 // src/components/Chip/Chip.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Chip = ({ label, variant, color, icon, onDelete, rounded, size = "medium", ui, style, ...props }) => {
+var initialChipProps = {
+  label: {
+    ui: {},
+    style: {}
+  },
+  delete: {
+    ui: {},
+    style: {}
+  },
+  icon: {
+    width: 20,
+    height: 20
+  }
+};
+var Chip = ({ label, variant, color, icon, deleted, onDelete, rounded, size = "medium", propsComponent, ...props }) => {
+  const properties = mergeDeep(initialChipProps, propsComponent);
   const className = chip_variants_default({ variant, colors: color, rounded, size });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
@@ -1093,14 +1206,21 @@ var Chip = ({ label, variant, color, icon, onDelete, rounded, size = "medium", u
       className,
       "data-testid": "yr3Chip",
       ...props,
-      style: {
-        ...style,
-        ...uiStyle(ui)
-      },
+      style: composeStyles(properties.chip?.ui, properties.chip?.style),
       children: [
         icon,
-        /* @__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 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "yr3Chip__label", style: composeStyles(properties?.label?.ui, properties?.label?.style), children: label }),
+        deleted && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            className: "yr3Chip__delete",
+            onClick: onDelete,
+            role: "button",
+            "aria-label": "delete",
+            style: composeStyles(properties?.delete?.ui, properties?.delete?.style),
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconClose, { ...properties?.icon, stroke: color })
+          }
+        )
       ]
     }
   );
@@ -1172,7 +1292,8 @@ var controlVariants = createVariants({
       disabled: "yr3Control--color-disabled",
       info: "yr3Control--color-info",
       warning: "yr3Control--color-warning",
-      error: "yr3Control--color-error"
+      error: "yr3Control--color-error",
+      common: "yr3Control--color-common"
     },
     size: {
       auto: "yr3Control--size-auto",
@@ -1249,7 +1370,8 @@ var dividerVariants = createVariants({
       text: "yr3Divider--color-text",
       warning: "yr3Divider--color-warning",
       info: "yr3Divider--color-info",
-      error: "yr3Divider--color-error"
+      error: "yr3Divider--color-error",
+      common: "yr3Divider--color-common"
     }
   }
 });
@@ -1304,33 +1426,42 @@ var useClickAway = (ref, callback) => {
 
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var initialPropsComponent2 = {
+  drawer: {},
+  closing: null,
+  container: {},
+  onClose: false
+};
 var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
   const ref = React8.useRef(null);
+  const properties = mergeDeep(initialPropsComponent2, propsComponent);
   React8.useEffect(() => {
-    if (open) {
+    if (!!open) {
       show();
+    } else {
+      hide();
     }
   }, [open]);
   useClickAway(ref, () => {
-    if (!open || propsComponent?.closing === null) return;
-    if (propsComponent?.closing === "drawer") {
+    if (!open || properties?.closing === null) return;
+    if (properties?.closing === "drawer") {
       hide();
       onClose();
     }
     ;
   });
   React8.useEffect(() => {
-    if (propsComponent?.onClose) {
+    if (properties?.onClose) {
       hide();
       onClose();
     }
-  }, [propsComponent?.onClose]);
+  }, [properties?.onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: `yr3Drawer ${anchor && `yr3Drawer--${anchor}`} ${open && "yr3Drawer--open"}`,
-      style: propsComponent?.drawer,
+      style: properties?.drawer,
       onClick: (e) => e.stopPropagation(),
       ref,
       "data-testid": "yr3Drawer",
@@ -1338,9 +1469,9 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
         DrawerContainer_default,
         {
           children,
-          ...propsComponent?.container,
-          props: propsComponent?.closing,
-          onClose: () => propsComponent?.closing === "container" ? onClose() : {}
+          ...properties?.container,
+          props: properties?.closing,
+          onClose: () => properties?.closing === "container" ? onClose() : {}
         }
       )
     },
@@ -1498,7 +1629,12 @@ var groupVariants = createVariants({
       info: "yr3Group--color-info",
       disabled: "yr3Group--color-disabled",
       text: "yr3Group--color-text",
-      background: "yr3Group--color-background"
+      background: "yr3Group--color-background",
+      common: "yr3Group--color-common"
+    },
+    type: {
+      rounded: "yr3Group--type-rounded",
+      square: "yr3Group--type-square"
     }
   }
 });
@@ -1520,6 +1656,7 @@ var Group = ({
   value,
   onChange,
   variant,
+  type = "rounded",
   color = "primary",
   propsComponent = initialComponents
 }) => {
@@ -1534,7 +1671,7 @@ var Group = ({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
-      className: groupVariants({ variant, color }),
+      className: groupVariants({ variant, color, type }),
       "data-testid": "yr3Group",
       style: composeStyles(propsComponent.group?.ui, propsComponent.group?.style),
       children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -1575,7 +1712,15 @@ 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" }) => {
+var initialPropsComponent3 = {
+  box: {},
+  text: {},
+  container: {},
+  preview: {},
+  content: {}
+};
+var ImageDropzone = ({ onChange, multiple, propsComponent, bordered, component, defaultImage, variant = "outlined" }) => {
+  const properties = mergeDeep(initialPropsComponent3, propsComponent || {});
   const [dragging, setDragging] = React11.useState(false);
   const [files, setFiles] = React11.useState([]);
   const inputRef = React11.useRef(null);
@@ -1590,7 +1735,7 @@ var ImageDropzone = ({ onChange, multiple, ui, style, propsComponent, bordered,
   };
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { as: "div", position: "relative", content: "center", ...properties?.box, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: classComponent,
@@ -1605,7 +1750,7 @@ var ImageDropzone = ({ onChange, multiple, ui, style, propsComponent, bordered,
         handleFiles(e.dataTransfer.files);
       },
       onClick: () => inputRef.current?.click(),
-      style: composeStyles(ui, style),
+      style: composeStyles(properties?.container?.ui, properties?.container?.style),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
@@ -1618,10 +1763,10 @@ var ImageDropzone = ({ onChange, multiple, ui, style, propsComponent, bordered,
             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 }) }),
+        isEmpty(files) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--content", style: composeStyles(properties?.content?.ui, properties?.content?.style), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { variant: "helper", color: "disabled", ...propsComponent?.text, children: propsComponent?.text?.primary || "Drag and drop an image here, or click to select one" }) }),
+        multiple && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--previews", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: URL.createObjectURL(file) }, i)) }),
+        !multiple && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--preview", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: URL.createObjectURL(file) }, i)) }),
+        !!defaultImage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yr3Dropzone--preview", style: composeStyles(properties?.preview?.ui, properties?.preview?.style), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: defaultImage }) }),
         component
       ]
     }
@@ -1667,7 +1812,8 @@ var inputVariants = createVariants({
       background: "yr3Input--color-background",
       error: "yr3Input--color-error",
       warning: "yr3Input--color-warning",
-      info: "yr3Input--color-info"
+      info: "yr3Input--color-info",
+      common: "yr3Input--color-common"
     },
     size: {
       auto: "yr3Input--size-auto",
@@ -1788,7 +1934,12 @@ var inputAreaVariants = createVariants({
       secondary: "yr3InputArea--color-secondary",
       success: "yr3InputArea--color-success",
       text: "yr3InputArea--color-text",
-      disabled: "yr3InputArea--color-disabled"
+      disabled: "yr3InputArea--color-disabled",
+      background: "yr3InputArea--color-background",
+      error: "yr3InputArea--color-error",
+      warning: "yr3InputArea--color-warning",
+      info: "yr3InputArea--color-info",
+      common: "yr3InputArea--color-common"
     },
     size: {
       auto: "yr3InputArea--size-auto",
@@ -1875,22 +2026,88 @@ var InputArea = ({
   ] });
 };
 
-// src/components/Modal/Modal.tsx
+// src/components/Loader/loader.variants.ts
+var loaderSpinnerVariants = createVariants({
+  base: "yr3Loader--spinner",
+  variants: {
+    color: {
+      primary: "yr3Loader--spinner-color-primary",
+      secondary: "yr3Loader--spinner-color-secondary",
+      success: "yr3Loader--spinner-color-success",
+      error: "yr3Loader--spinner-color-error",
+      warning: "yr3Loader--spinner-color-warning",
+      info: "yr3Loader--spinner-color-info",
+      disabled: "yr3Loader--spinner-color-disabled",
+      text: "yr3Loader--spinner-color-text",
+      background: "yr3Loader--spinner-color-background",
+      common: "yr3Loader--spinner-color-common"
+    },
+    size: {
+      sm: "yr3Loader--spinner-size-sm",
+      md: "yr3Loader--spinner-size-md",
+      lg: "yr3Loader--spinner-size-lg"
+    },
+    type: {
+      default: "yr3Loader--spinner-default",
+      dots: "yr3Loader--spinner-dots",
+      fancy: "yr3Loader--spinner-fancy"
+    }
+  }
+});
+
+// src/components/Loader/Loader.tsx
 var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var initialComponents2 = {
+  loader: {
+    ui: {},
+    style: {}
+  },
+  spinner: {
+    size: "sm",
+    color: "primary",
+    type: "default"
+  },
+  container: {
+    center: true,
+    container: true,
+    ui: {
+      width: "100%",
+      height: "100%"
+    }
+  }
+};
+var Loader = ({ component, loading = false, propsComponent }) => {
+  const properties = mergeDeep(initialComponents2, propsComponent || {});
+  const classSpinner = loaderSpinnerVariants({
+    color: properties?.spinner?.color,
+    type: properties?.spinner?.type,
+    size: properties?.spinner?.size
+  });
+  if (!loading) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "yr3Loader", style: composeStyles(properties?.loader?.ui, properties?.loader?.style), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Flex, { ...properties?.container, children: component || /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: classSpinner, children: properties?.spinner?.type === "dots" && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(React14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {})
+  ] }) }) }) });
+};
+
+// src/components/Modal/Modal.tsx
+var React15 = __toESM(require("react"), 1);
 
 // src/components/Modal/ModalContainer.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var ModalContainer = ({ children, size = "sm", ui, style }) => {
   const classes = bem("yr3Modal-container");
   const classComponent = classes(void 0, { [`${size}`]: !!size });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
 };
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Modal = ({ open, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (open) {
       show();
     } else {
@@ -1899,9 +2116,9 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
   }, [open, show]);
   const classes = bem("yr3Modal");
   const classComponent = classes(void 0, { "open": !!open });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
     children,
-    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
+    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
   ] }) }) });
 };
 
@@ -1941,15 +2158,15 @@ var notistackVariants = createVariants({
 });
 
 // src/components/Notistack/Notistack.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Notistack = ({ message, duration = 3e3, variant = "info", color, propsComponent, anchor, exiting = false }) => {
   const classes = notistackVariants({ type: variant, color, exiting, direction: `${anchor?.vertical || "bottom"}-${anchor?.horizontal || "right"}` });
   const containerStyle = composeStyles(propsComponent?.container?.ui, propsComponent?.container?.style);
   const notistackStyle = composeStyles(propsComponent?.notistack?.ui, propsComponent?.notistack?.style);
   const progressStyle = composeStyles(propsComponent?.progress?.ui, propsComponent?.progress?.style);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: containerStyle, children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: containerStyle, children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         className: "yr3Notistack--progress",
@@ -1977,13 +2194,14 @@ var pendingVariants = createVariants({
       text: "yr3Pending--color-text",
       info: "yr3Pending--color-info",
       background: "yr3Pending--color-background",
-      warning: "yr3Pending--color-warning"
+      warning: "yr3Pending--color-warning",
+      common: "yr3Pending--color-common"
     }
   }
 });
 
 // src/components/Pending/Pending.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Pending = ({
   variant,
   width,
@@ -1996,7 +2214,7 @@ var Pending = ({
   const widthStyle = variant === "circle" ? size : width;
   const heightStyle = variant === "circle" ? size : height;
   const uiStylePending = uiStyle({ width: widthStyle, height: heightStyle, ...ui });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: pendingVariants({ variant, color }),
@@ -2007,19 +2225,19 @@ var Pending = ({
 };
 
 // src/components/Phone/Phone.tsx
-var React16 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 
 // src/components/Selector/Selector.tsx
-var React15 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 
 // src/Icons/IconDown.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var IconDown = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "yr3Icons", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 };
 
 // src/components/Selector/Selector.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var initalPropsComponent2 = {
   text: {
     variant: "caption",
@@ -2032,16 +2250,16 @@ var initalPropsComponent2 = {
   }
 };
 var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon, propsComponent = initalPropsComponent2 }) => {
-  const [open, setOpen] = React15.useState(false);
-  const [valueState, setValueState] = React15.useState(value || defaultValue || null);
-  const ref = React15.useRef(null);
+  const [open, setOpen] = React16.useState(false);
+  const [valueState, setValueState] = React16.useState(value || defaultValue || null);
+  const ref = React16.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "yr3Selector-wrapper", ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "yr3Selector--control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "yr3Selector-wrapper", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "yr3Selector--control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
       valueState
     ] }) }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "yr3Selector--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent.menu?.style), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "yr3Selector--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent.menu?.style), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         className: "yr3Selector--option",
@@ -2062,7 +2280,7 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
           };
           onChange?.(event, opt.value);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
       },
       opt.value
     )) })
@@ -2071,7 +2289,7 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
 var Selector_default = Selector;
 
 // src/components/Phone/Phone.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Phone = ({
   name,
   value,
@@ -2083,13 +2301,13 @@ var Phone = ({
 }) => {
   const isControlled = value !== void 0;
   const initial = value || defaultValue || "";
-  const [prefix, setPrefix] = React16.useState(
+  const [prefix, setPrefix] = React17.useState(
     getDialPhone(initial, countries) || countries[0].dial
   );
-  const [number, setNumber] = React16.useState(
+  const [number, setNumber] = React17.useState(
     getNumberPhone(initial, prefix) || ""
   );
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (isControlled && value) {
       const dial = getDialPhone(value, countries);
       const num = getNumberPhone(value, dial);
@@ -2108,10 +2326,10 @@ var Phone = ({
     setPrefix(val);
     onChange?.(null, `${val}${number}`);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Label, { text: label, className: "yr3Input--active" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label, { text: label, className: "yr3Input--active" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Selector_default,
         {
           options: countries.map((c) => ({
@@ -2123,7 +2341,7 @@ var Phone = ({
           ...propsComponent?.selector
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Divider,
         {
           orientation: "vertical",
@@ -2132,7 +2350,7 @@ var Phone = ({
           ...propsComponent?.divider
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Input,
         {
           type: "number",
@@ -2148,9 +2366,9 @@ var Phone = ({
 };
 
 // src/components/Places/PlacesAutocomplete.tsx
-var React17 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_autocomplete_places = require("@yr3/autocomplete-places");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var initPropsComponent = {
   label: {
     display: true,
@@ -2190,9 +2408,9 @@ var PlacesAutocomplete = ({
   keyApi,
   propsComponent = initPropsComponent
 }) => {
-  const [value, setValue] = React17.useState(null);
-  const inputRef = React17.useRef(null);
-  const [anchorEl, setAnchorEl] = React17.useState(null);
+  const [value, setValue] = React18.useState(null);
+  const inputRef = React18.useRef(null);
+  const [anchorEl, setAnchorEl] = React18.useState(null);
   const { suggestions, selectPlace } = (0, import_autocomplete_places.useAutocompletePlaces)({ input: value, apiKey: keyApi, language, provider });
   const handleSelect = async (id) => {
     const place = await selectPlace(id);
@@ -2212,12 +2430,12 @@ var PlacesAutocomplete = ({
     setValue(place.address);
     setAnchorEl(null);
   };
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (defaultLocation) {
       setValue(defaultLocation);
     }
   }, [defaultLocation]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (value === "") {
       onSelect(null);
     }
@@ -2227,13 +2445,13 @@ var PlacesAutocomplete = ({
     setAnchorEl(e.target.value ? inputRef.current : null);
   };
   const open = suggestions.length > 0 && Boolean(anchorEl);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (onChangeForm) {
       onChangeForm({ target: { value } });
     }
   }, [onChangeForm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Control, { ...propsComponent?.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Input,
       {
         ref: inputRef,
@@ -2247,7 +2465,7 @@ var PlacesAutocomplete = ({
       },
       "input-places"
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
+    open && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
   ] });
 };
 
@@ -2264,13 +2482,18 @@ var radioVariant = createVariants({
       secondary: "yr3Radio--color-secondary",
       success: "yr3Radio--color-success",
       text: "yr3Radio--color-text",
-      disabled: "yr3Radio--color-disabled"
+      disabled: "yr3Radio--color-disabled",
+      background: "yr3Radio--color-background",
+      error: "yr3Radio--color-error",
+      warning: "yr3Radio--color-warning",
+      info: "yr3Radio--color-info",
+      common: "yr3Radio--color-common"
     }
   }
 });
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Radio = ({
   checked,
   value,
@@ -2286,8 +2509,8 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "input",
       {
         type: "radio",
@@ -2299,8 +2522,8 @@ var Radio = ({
       }
     ),
     iconChecked && checked ? iconChecked : !checked && iconUnchecked ? iconUnchecked : null,
-    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
-    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
+    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "span",
       {
         className: "yr3Radio--label",
@@ -2313,7 +2536,104 @@ var Radio = ({
 };
 
 // src/components/Select/Select.tsx
-var React18 = __toESM(require("react"), 1);
+var React22 = __toESM(require("react"), 1);
+
+// src/theme/ThemeProvider.tsx
+var React20 = __toESM(require("react"), 1);
+
+// src/theme/notistackContext.tsx
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var NotistackContext = React19.createContext(null);
+var NotistackProvider = ({ children }) => {
+  const [snacks, setSnacks] = React19.useState([]);
+  const notistack = (snack) => {
+    const id = Date.now();
+    setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
+    const duration = snack.duration || 3e3;
+    const exitDuration = 300;
+    setTimeout(() => {
+      setSnacks(
+        (prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
+      );
+    }, duration);
+    setTimeout(() => {
+      setSnacks((prev) => prev.filter((s) => s.id !== id));
+    }, duration + exitDuration);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Notistack, { ...snack }, snack.id)) })
+  ] });
+};
+var useNotistack = () => {
+  const ctx = React19.useContext(NotistackContext);
+  if (!ctx) {
+    throw new Error("NotistackProvider missing");
+  }
+  return ctx;
+};
+
+// src/theme/ThemeProvider.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var ThemeContext = React20.createContext(null);
+var ThemeProvider = ({ theme, children }) => {
+  React20.useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BackdropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NotistackProvider, { children }) }) });
+};
+var useTheme = () => React20.useContext(ThemeContext);
+
+// src/theme/tokens.ts
+var baseTokens = {
+  colors: {
+    primary: "#6C5CE7",
+    secondary: "#00CEC9",
+    background: "#0f0f1a",
+    surface: "#1a1a2e",
+    textPrimary: "#ffffff",
+    textSecondary: "#b2bec3"
+  },
+  spacing: (factor) => `${factor * 8}px`,
+  radius: {
+    sm: "6px",
+    md: "12px",
+    lg: "20px"
+  }
+};
+
+// src/theme/useMediaQuery.tsx
+var React21 = __toESM(require("react"), 1);
+function useMediaQuery(query) {
+  const theme = useTheme();
+  const computedQuery = typeof query === "function" ? query(theme) : query;
+  const [matches, setMatches] = React21.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(computedQuery).matches;
+  });
+  React21.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(computedQuery);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [computedQuery]);
+  return matches;
+}
+function useBreakpointValue(values) {
+  const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
+  const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
+  const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
+  const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
+  const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
+  if (xl && values.xl !== void 0) return values.xl;
+  if (lg && values.lg !== void 0) return values.lg;
+  if (md && values.md !== void 0) return values.md;
+  if (sm && values.sm !== void 0) return values.sm;
+  if (xs && values.xs !== void 0) return values.xs;
+  return void 0;
+}
 
 // src/components/Select/select.variants.ts
 var selectVariants = createVariants({
@@ -2337,17 +2657,43 @@ var selectVariants = createVariants({
       background: "yr3Select--color-background",
       error: "yr3Select--color-error",
       warning: "yr3Select--color-warning",
-      info: "yr3Select--color-info"
+      info: "yr3Select--color-info",
+      common: "yr3Select--color-common"
     },
     animated: {
       true: "yr3Select--animated"
+    },
+    icon: {
+      true: "yr3Select--icon"
+    }
+  }
+});
+var selectIconVariants = createVariants({
+  base: "yr3Select--icon",
+  variants: {
+    color: {
+      primary: "yr3Select--icon-color-primary",
+      secondary: "yr3Select--icon-color-secondary",
+      success: "yr3Select--icon-color-success",
+      text: "yr3Select--icon-color-text",
+      disabled: "yr3Select--icon-color-disabled",
+      background: "yr3Select--icon-color-background",
+      error: "yr3Select--icon-color-error",
+      warning: "yr3Select--icon-color-warning",
+      info: "yr3Select--icon-color-info",
+      common: "yr3Select--icon-color-common"
+    },
+    animated: {
+      true: "yr3Select--icon-animated"
+    },
+    open: {
+      true: "yr3Select--icon-open"
     }
   }
 });
-var select_variants_default = selectVariants;
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var initiaPropsComponent3 = {
   control: {
     variant: "outlined",
@@ -2357,6 +2703,7 @@ var initiaPropsComponent3 = {
   },
   label: {
     display: true,
+    color: "primary",
     ui: {},
     style: {}
   },
@@ -2379,20 +2726,23 @@ var initiaPropsComponent3 = {
   icon: {
     style: {
       width: 24,
-      height: 24,
-      stroke: "currentColor"
+      height: 24
     },
+    color: "primary",
     component: void 0
   }
 };
-var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent = initiaPropsComponent3 }) => {
-  const [open, setOpen] = React18.useState(false);
-  const [valueState, setValueState] = React18.useState(value || defaultValue || null);
-  const ref = React18.useRef(null);
+var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
+  const [open, setOpen] = React22.useState(false);
+  const [valueState, setValueState] = React22.useState(value || defaultValue || null);
+  const ref = React22.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  const classes = select_variants_default({ wrapper: true });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: classes, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  const theme = useTheme();
+  const properties = mergeDeep(initiaPropsComponent3, propsComponent || {});
+  const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
+  const classes = selectVariants({ wrapper: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: classes, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Input,
       {
         label,
@@ -2400,27 +2750,36 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         disabled: true,
         value: valueState,
         propsComponent: {
-          control: propsComponent?.control,
-          label: propsComponent?.label
+          control: properties?.control,
+          label: properties?.label
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `yr3Select--icon ${open ? "yr3Select--icon--open" : ""}`, onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      IconDown,
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "div",
       {
-        width: propsComponent?.icon?.style?.width,
-        height: propsComponent?.icon?.style?.height,
-        stroke: propsComponent?.icon?.style?.stroke || "currentColor",
-        style: propsComponent?.icon?.style
+        className: classesIcon,
+        style: properties?.icon?.style,
+        onClick: () => setOpen((prev) => !prev),
+        "data-testid": "yr3Select-icon",
+        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          IconDown,
+          {
+            width: properties?.icon?.style?.width,
+            height: properties?.icon?.style?.height,
+            stroke: "currentColor",
+            style: properties?.icon?.style
+          }
+        )
       }
-    ) }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "div",
       {
         className: "yr3Select--menu",
-        style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
+        style: composeStyles(properties?.menu?.ui, properties?.menu?.style),
         "data-testid": "yr3Select-menu",
-        children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "div",
           {
             className: "yr3Select--option",
@@ -2441,8 +2800,8 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
               };
               onChange?.(event, opt.value);
             },
-            style: composeStyles(propsComponent?.menu?.options?.ui, propsComponent?.menu?.options?.style),
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "span", variant: "caption", color: propsComponent?.menu?.options?.text?.color || "primary", ...propsComponent?.menu?.options?.text, children: opt.label })
+            style: composeStyles(properties?.menu?.options?.ui, properties?.menu?.options?.style),
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
           },
           opt.value
         ))
@@ -2452,8 +2811,8 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 };
 
 // src/components/Slide/Slide.tsx
-var React19 = __toESM(require("react"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var React23 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Slide = ({
   in: inProp,
   children,
@@ -2467,7 +2826,7 @@ var Slide = ({
     [direction]: true,
     "in": !!inProp
   });
-  React19.useEffect(() => {
+  React23.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -2477,19 +2836,19 @@ var Slide = ({
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
   const uiStyleContent = uiStyle({ ...propsComponent?.slide?.ui, transitionDuration: `${duration}ms` });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       className: "yr3Slide",
       style: uiStyle({ position: "relative", zIndex: 4, overflow: "hidden" }),
       "data-testid": "yr3Slide",
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "div",
         {
           className: classNameContent,
           style: composeStyles(uiStyleContent, propsComponent?.slide?.style || {}),
           "data-testid": "yr3Slide-content",
-          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
         }
       )
     }
@@ -2497,7 +2856,7 @@ var Slide = ({
 };
 
 // src/components/Switch/Switch.tsx
-var React20 = __toESM(require("react"), 1);
+var React24 = __toESM(require("react"), 1);
 
 // src/components/Switch/switch.variants.ts
 var switchVariants = createVariants({
@@ -2509,7 +2868,11 @@ var switchVariants = createVariants({
       success: "yr3Switch--color-success",
       text: "yr3Switch--color-text",
       disabled: "yr3Switch--color-disabled",
-      warning: "yr3Switch--color-warning"
+      warning: "yr3Switch--color-warning",
+      info: "yr3Switch--color-info",
+      error: "yr3Switch--color-error",
+      background: "yr3Switch--color-background",
+      common: "yr3Switch--color-common"
     },
     size: {
       sm: "yr3Switch--sm",
@@ -2530,7 +2893,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Switch = ({
   checked,
   defaultChecked,
@@ -2542,7 +2905,7 @@ var Switch = ({
   placement = "end",
   propsComponent
 }) => {
-  const [internal, setInternal] = React20.useState(defaultChecked || false);
+  const [internal, setInternal] = React24.useState(defaultChecked || false);
   const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : internal;
@@ -2550,13 +2913,13 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "label",
     {
       className: classname,
       "data-testid": "yr3Switch",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "input",
           {
             type: "checkbox",
@@ -2565,8 +2928,8 @@ var Switch = ({
             disabled
           }
         ),
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "yr3Switch--thumb" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "span",
           {
             className: "yr3Switch--label",
@@ -2581,9 +2944,9 @@ var Switch = ({
 };
 
 // src/Icons/IconSearch.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var IconSearch = (props) => {
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.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",
@@ -2595,103 +2958,6 @@ var IconSearch = (props) => {
   ) });
 };
 
-// src/theme/ThemeProvider.tsx
-var React22 = __toESM(require("react"), 1);
-
-// src/theme/notistackContext.tsx
-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] = React21.useState([]);
-  const notistack = (snack) => {
-    const id = Date.now();
-    setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
-    const duration = snack.duration || 3e3;
-    const exitDuration = 300;
-    setTimeout(() => {
-      setSnacks(
-        (prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
-      );
-    }, duration);
-    setTimeout(() => {
-      setSnacks((prev) => prev.filter((s) => s.id !== id));
-    }, duration + exitDuration);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
-    children,
-    /* @__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 = () => {
-  const ctx = React21.useContext(NotistackContext);
-  if (!ctx) {
-    throw new Error("NotistackProvider missing");
-  }
-  return ctx;
-};
-
-// src/theme/ThemeProvider.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var ThemeContext = React22.createContext(null);
-var ThemeProvider = ({ theme, children }) => {
-  React22.useEffect(() => {
-    applyTheme(theme);
-  }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BackdropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NotistackProvider, { children }) }) });
-};
-var useTheme = () => React22.useContext(ThemeContext);
-
-// src/theme/tokens.ts
-var baseTokens = {
-  colors: {
-    primary: "#6C5CE7",
-    secondary: "#00CEC9",
-    background: "#0f0f1a",
-    surface: "#1a1a2e",
-    textPrimary: "#ffffff",
-    textSecondary: "#b2bec3"
-  },
-  spacing: (factor) => `${factor * 8}px`,
-  radius: {
-    sm: "6px",
-    md: "12px",
-    lg: "20px"
-  }
-};
-
-// src/theme/useMediaQuery.tsx
-var React23 = __toESM(require("react"), 1);
-function useMediaQuery(query) {
-  const theme = useTheme();
-  const computedQuery = typeof query === "function" ? query(theme) : query;
-  const [matches, setMatches] = React23.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(computedQuery).matches;
-  });
-  React23.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const media = window.matchMedia(computedQuery);
-    const listener = () => setMatches(media.matches);
-    media.addEventListener("change", listener);
-    return () => media.removeEventListener("change", listener);
-  }, [computedQuery]);
-  return matches;
-}
-function useBreakpointValue(values) {
-  const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
-  const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
-  const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
-  const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
-  const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
-  if (xl && values.xl !== void 0) return values.xl;
-  if (lg && values.lg !== void 0) return values.lg;
-  if (md && values.md !== void 0) return values.md;
-  if (sm && values.sm !== void 0) return values.sm;
-  if (xs && values.xs !== void 0) return values.xs;
-  return void 0;
-}
-
 // src/hooks/usePlaces.ts
 var import_autocomplete_places2 = require("@yr3/autocomplete-places");
 var usePlaces = ({ input, language, apiKey, provider }) => {
@@ -2703,7 +2969,7 @@ var usePlaces = ({ input, language, apiKey, provider }) => {
 };
 
 // src/hooks/useBreakpoint.ts
-var React24 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 var breakUp = (bp) => `(min-width: ${bp}px)`;
 var breakDown = (bp) => `(max-width: ${bp}px)`;
 function useBreakpoint(queryInput) {
@@ -2713,8 +2979,8 @@ function useBreakpoint(queryInput) {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   };
-  const [matches, setMatches] = React24.useState(getMatch);
-  React24.useEffect(() => {
+  const [matches, setMatches] = React25.useState(getMatch);
+  React25.useEffect(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
     const listener = (e) => {
@@ -2768,6 +3034,7 @@ initTheme();
   Input,
   InputArea,
   Label,
+  Loader,
   Modal,
   ModalContainer,
   Notistack,
@@ -2784,6 +3051,7 @@ initTheme();
   ThemeContext,
   ThemeProvider,
   adjustColor,
+  alpha,
   applyTheme,
   baseTokens,
   bem,
@@ -2796,14 +3064,19 @@ initTheme();
   createTheme,
   createVariants,
   cx,
+  darken,
   getContrast,
   getCountryCodePhone,
   getDialPhone,
   getMonthCalendar,
   getNumberPhone,
+  hexToRgb,
   initTheme,
   isEmpty,
+  lighten,
+  mergeDeep,
   normalizePhone,
+  rgbToHex,
   text,
   times,
   uiStyle,