@yr3/ui 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2148 @@
+// src/style-inject.ts
+var ID = "yr3@ui";
+function injectStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(ID)) return;
+  if (typeof document !== "undefined" && typeof import.meta !== "undefined") {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = new URL("./styles/index.css", import.meta.url).toString();
+    document.head.appendChild(link);
+  }
+}
+
+// src/utils/bem.ts
+var bem = (block) => {
+  return (element, modifiers) => {
+    const base = element ? `${block}__${element}` : block;
+    const classes = [base];
+    if (modifiers) {
+      Object.entries(modifiers).forEach(([key, value]) => {
+        if (!value) return;
+        if (typeof value === "boolean") {
+          classes.push(`${base}--${key}`);
+        } else {
+          classes.push(`${base}--${value}`);
+        }
+      });
+    }
+    return classes.join(" ");
+  };
+};
+var bemMerge = (...args) => {
+  return args.flatMap((arg) => {
+    if (!arg) return [];
+    if (typeof arg === "string") return [arg];
+    if (typeof arg === "object") {
+      return Object.entries(arg).filter(([_, v]) => v).map(([k]) => k);
+    }
+    return [];
+  }).join(" ");
+};
+
+// src/utils/calendar.ts
+import dayjs from "dayjs";
+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");
+  let dayCurrent = {};
+  let startDay = startOfMonth.day();
+  startDay = startDay === 0 ? 6 : startDay - 1;
+  const daysInMonth = endOfMonth.date();
+  const calendar = [];
+  let week = [];
+  for (let i = 0; i < startDay; i++) {
+    week.push(null);
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = startOfMonth.date(day);
+    const key = date.format("YYYY-MM-DD");
+    const isToday = date.isSame(today, "day");
+    const isPast = date.isBefore(today, "day");
+    const isFuture = date.isAfter(today, "day");
+    if (date.isSame(today, "day")) {
+      dayCurrent = {
+        day,
+        date,
+        isToday,
+        isPast,
+        isFuture,
+        isCurrentMonth: true,
+        selected: true,
+        data: props ? props[key] || null : null
+      };
+    }
+    week.push({
+      day,
+      date,
+      isToday,
+      isPast,
+      isFuture,
+      isCurrentMonth: true,
+      selected: selected ? date.isSame(selected?.date, "day") : false,
+      data: props ? props[key] || null : null
+    });
+    if (week.length === 7) {
+      calendar.push(week);
+      week = [];
+    }
+  }
+  if (week.length > 0) {
+    while (week.length < 7) {
+      week.push(null);
+    }
+    calendar.push(week);
+  }
+  function getDaysContainer() {
+    const base = [0, 1, 2, 3, 4, 5, 6];
+    return [
+      ...base.slice(startIndex),
+      ...base.slice(0, startIndex)
+    ];
+  }
+  return {
+    calendar,
+    month,
+    date: startOfMonth,
+    daysContainer: getDaysContainer(),
+    monthLabel: startOfMonth.format("MMMM"),
+    yearLabel: startOfMonth.format("YYYY"),
+    days: startOfMonth.daysInMonth(),
+    weeks: calendar.length,
+    isWeekend: startOfMonth.day() === 0 || startOfMonth.day() === 6,
+    selected: selected ? Object.assign({}, selected) : null,
+    currentDay: dayCurrent
+  };
+}
+
+// src/utils/color.ts
+var adjustColor = (hex, amount) => {
+  const num = parseInt(hex.replace("#", ""), 16);
+  let r = (num >> 16) + amount;
+  let g = (num >> 8 & 255) + amount;
+  let b = (num & 255) + amount;
+  r = Math.max(Math.min(255, r), 0);
+  g = Math.max(Math.min(255, g), 0);
+  b = Math.max(Math.min(255, b), 0);
+  return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
+};
+var getContrast = (hex) => {
+  const c = hex.substring(1);
+  const rgb = parseInt(c, 16);
+  const r = rgb >> 16 & 255;
+  const g = rgb >> 8 & 255;
+  const b = rgb & 255;
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+};
+var createPaletteColor = (main) => {
+  return {
+    main,
+    light: adjustColor(main, 40),
+    dark: adjustColor(main, -40),
+    contrastText: getContrast(main)
+  };
+};
+
+// src/utils/common.ts
+function isEmpty(value) {
+  if (value == null) return true;
+  if (typeof value === "string") return value.trim().length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  if (value instanceof Map || value instanceof Set) {
+    return value.size === 0;
+  }
+  if (typeof value === "object") {
+    return Object.keys(value).length === 0;
+  }
+  return false;
+}
+function times(n, iteratee) {
+  const result = [];
+  for (let i = 0; i < n; i++) {
+    result.push(iteratee(i));
+  }
+  return result;
+}
+
+// src/utils/cx.ts
+var cx = (...args) => {
+  return args.flatMap((arg) => {
+    if (!arg) return [];
+    if (typeof arg === "string") return [arg];
+    if (typeof arg === "object") {
+      return Object.entries(arg).filter(([_, value]) => value).map(([key]) => key);
+    }
+    return [];
+  }).join(" ");
+};
+
+// src/utils/ui.ts
+var spacing = (value) => `${value * 8}px`;
+var uiStyle = (styles = {}) => {
+  const result = {};
+  Object.entries(styles).forEach(([key, value]) => {
+    switch (key) {
+      case "mt":
+        result.marginTop = spacing(value);
+        break;
+      case "mb":
+        result.marginBottom = spacing(value);
+        break;
+      case "mx":
+        result.marginLeft = spacing(value);
+        result.marginRight = spacing(value);
+        break;
+      case "my":
+        result.marginTop = spacing(value);
+        result.marginBottom = spacing(value);
+        break;
+      case "p":
+        result.padding = spacing(value);
+        break;
+      case "px":
+        result.paddingLeft = spacing(value);
+        result.paddingRight = spacing(value);
+        break;
+      case "pt":
+        result.paddingTop = spacing(value);
+        break;
+      case "pb":
+        result.paddingBottom = spacing(value);
+        break;
+      case "py":
+        result.paddingTop = spacing(value);
+        result.paddingBottom = spacing(value);
+        break;
+      case "bg":
+        result.backgroundColor = `var(--color-${value})`;
+        break;
+      case "color":
+        result.color = `var(--color-${value})`;
+        break;
+      case "radius":
+        result.borderRadius = `${value * 4}px`;
+        break;
+      case "flex":
+        if (value) result.display = "flex";
+        break;
+      case "center":
+        if (value) {
+          result.display = "flex";
+          result.alignItems = "center";
+          result.justifyContent = "center";
+        }
+        break;
+      default:
+        result[key] = value;
+    }
+  });
+  return result;
+};
+var composeStyles = (ui, style) => {
+  return {
+    ...style,
+    ...uiStyle(ui)
+  };
+};
+
+// src/utils/variants.ts
+var createVariants = (config) => {
+  return (props = {}) => {
+    const classes = [config.base];
+    if (config.variants) {
+      Object.entries(config.variants).forEach(([key, map]) => {
+        const value = props[key];
+        if (value && map[value]) {
+          classes.push(map[value]);
+        }
+      });
+    }
+    return classes.join(" ");
+  };
+};
+
+// src/theme/breakpoint.ts
+var breakpoints = {
+  xs: 0,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536
+};
+
+// src/theme/text.ts
+var text = {
+  h1: {
+    fontSize: "40px",
+    fontWeight: 700,
+    lineHeight: 1.2
+  },
+  h2: {
+    fontSize: "32px",
+    fontWeight: 600
+  },
+  h3: {
+    fontSize: "24px",
+    fontWeight: 500
+  },
+  h4: {
+    fontSize: "20px",
+    fontWeight: 500
+  },
+  h5: {
+    fontSize: "18px",
+    fontWeight: 500
+  },
+  h6: {
+    fontSize: "16px",
+    fontWeight: 500
+  },
+  title: {
+    fontSize: "20px",
+    fontWeight: 500
+  },
+  subtitle: {
+    fontSize: "18px",
+    fontWeight: 400
+  },
+  body1: {
+    fontSize: "16px",
+    fontWeight: 400
+  },
+  body2: {
+    fontSize: "14px",
+    fontWeight: 400
+  },
+  caption: {
+    fontSize: "12px",
+    fontWeight: 400
+  },
+  button: {
+    fontSize: "14px",
+    fontWeight: 500
+  },
+  helper: {
+    fontSize: "12px",
+    fontWeight: 400
+  }
+};
+
+// src/theme/createTheme.ts
+var createTheme = (props) => {
+  const defaultTheme = {
+    colors: {
+      primary: createPaletteColor("#9262fb"),
+      secondary: createPaletteColor("#52f4a6"),
+      success: createPaletteColor("#28a745"),
+      error: createPaletteColor("#dc3545"),
+      warning: createPaletteColor("#ffc107"),
+      info: createPaletteColor("#17a2b8"),
+      disabled: "#aeaeae84",
+      background: {
+        default: "#0f0f1a",
+        surface: "#1a1a2e"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#2e2f2f"
+      }
+    },
+    breakpoints,
+    text,
+    fontFamily: "Inter, sans-serif"
+  };
+  return {
+    ...defaultTheme,
+    ...props,
+    colors: {
+      ...defaultTheme.colors,
+      ...props?.colors
+    },
+    breakpoints: {
+      ...defaultTheme.breakpoints,
+      ...props?.breakpoints
+    },
+    text: {
+      ...defaultTheme.text,
+      ...props?.text
+    },
+    fontFamily: props?.fontFamily || defaultTheme.fontFamily
+  };
+};
+var applyTheme = (theme, target) => {
+  const root = target || document.documentElement;
+  Object.entries(theme.colors).forEach(([key, value]) => {
+    if (typeof value === "object" && "main" in value) {
+      root.style.setProperty(`--color-${key}`, value.main);
+      root.style.setProperty(`--color-${key}-light`, value.light);
+      root.style.setProperty(`--color-${key}-dark`, value.dark);
+      root.style.setProperty(`--color-${key}-contrast`, value.contrastText);
+    }
+  });
+  if (theme.colors.background?.default) {
+    root.style.setProperty("--color-bg", theme.colors.background.default);
+  }
+  if (theme.colors.background?.surface) {
+    root.style.setProperty("--color-surface", theme.colors.background?.surface);
+  }
+  if (theme.colors.disabled) {
+    root.style.setProperty("--color-disabled", theme.colors.disabled);
+  }
+  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.breakpoints) {
+    Object.entries(theme.breakpoints).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(
+        `--breakpoint-${key}`,
+        `${value}px`
+      );
+    });
+  }
+  Object.entries(theme.text).forEach(([key, value]) => {
+    Object.entries(value).forEach(([prop, val]) => {
+      document.documentElement.style.setProperty(
+        `--typo-${key}-${prop}`,
+        String(val)
+      );
+    });
+  });
+  if (theme.fontFamily) {
+    document.documentElement.style.setProperty(
+      "--font-family-base",
+      theme.fontFamily
+    );
+  }
+};
+
+// src/theme/initTheme.ts
+function initTheme() {
+  if (typeof document === "undefined") return;
+  applyTheme(createTheme());
+}
+
+// src/components/Avatar/Avatar.tsx
+import * as React from "react";
+
+// src/components/Avatar/avatar.variants.ts
+var avatarVariants = createVariants({
+  base: "yr3Avatar",
+  variants: {
+    color: {
+      primary: "yr3Avatar--color-primary",
+      secondary: "yr3Avatar--color-secondary",
+      success: "yr3Avatar--color-success",
+      disabled: "yr3Avatar--color-disabled",
+      text: "yr3Avatar--color-text",
+      warning: "yr3Avatar--color-warning",
+      info: "yr3Avatar--color-info",
+      error: "yr3Avatar--color-error"
+    },
+    size: {
+      sm: "yr3Avatar--sm",
+      md: "yr3Avatar--md",
+      lg: "yr3Avatar--lg"
+    },
+    variant: {
+      circle: "yr3Avatar--circle",
+      square: "yr3Avatar--square",
+      rounded: "yr3Avatar--rounded"
+    },
+    bordered: {
+      true: "yr3Avatar--bordered"
+    },
+    shadow: {
+      0: "",
+      1: "yr3Avatar--shadow-1",
+      2: "yr3Avatar--shadow-2",
+      3: "yr3Avatar--shadow-3"
+    },
+    floating: {
+      true: "yr3Avatar--floating"
+    }
+  }
+});
+var avatar_variants_default = avatarVariants;
+
+// src/components/Avatar/Avatar.tsx
+import { jsx } from "react/jsx-runtime";
+var Avatar = ({
+  src,
+  alt,
+  children,
+  size = "sm",
+  variant = "circle",
+  color = "primary",
+  label,
+  bordered = true,
+  ui,
+  shadow = 0,
+  onClick,
+  floating = false,
+  role
+}) => {
+  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(
+    "img",
+    {
+      src,
+      alt,
+      onError: () => setError(true)
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: "yr3Avatar--fallback", "data-testid": "yr3Avatar-fallback", children: children || label }) });
+};
+
+// src/components/Backdrop/Backdrop.tsx
+import { createPortal } from "react-dom";
+
+// src/theme/backdropContext.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs } from "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: [
+    children,
+    /* @__PURE__ */ jsx2(Backdrop, {})
+  ] });
+};
+var useBackdrop = () => {
+  const ctx = React2.useContext(BackdropContext);
+  if (!ctx) throw new Error("BackdropProvider missing");
+  return ctx;
+};
+
+// src/components/Backdrop/Backdrop.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Backdrop = () => {
+  const { open } = useBackdrop();
+  return createPortal(
+    /* @__PURE__ */ jsx3("div", { className: `yr3Backdrop  ${open ? "yr3Backdrop--open" : ""}`, "data-testid": "yr3Backdrop" }),
+    document.body
+  );
+};
+
+// src/components/Box/box.variants.ts
+var boxVariants = createVariants({
+  base: "yr3Box",
+  variants: {
+    content: {
+      start: "yr3Box--content-start",
+      center: "yr3Box--content-center",
+      end: "yr3Box--content-end"
+    },
+    drawer: {
+      true: "yr3Box--drawer"
+    },
+    position: {
+      relative: "yr3Box--position-relative",
+      absolute: "yr3Box--position-absolute",
+      fixed: "yr3Box--position-fixed",
+      sticky: "yr3Box--position-sticky"
+    }
+  }
+});
+
+// src/components/Box/Box.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Box = ({
+  content = "start",
+  children,
+  drawer = false,
+  ui,
+  style,
+  as: Component = "div",
+  position = "relative",
+  ...props
+}) => {
+  const classes = boxVariants({ content, drawer, position });
+  return /* @__PURE__ */ jsx4(
+    Component,
+    {
+      className: classes,
+      style: composeStyles(ui, style),
+      ...props,
+      "data-testid": "yr3Box",
+      children
+    }
+  );
+};
+
+// src/components/Text/Text.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Text = ({
+  children,
+  variant = "inherit",
+  color = "text",
+  as: Component = "p",
+  weight = "regular",
+  gutters = [0, 0],
+  ui = {},
+  style,
+  onClick
+}) => {
+  const styleUI = uiStyle({ ...ui, marginTop: gutters[0] || 0, marginBottom: gutters[1] || 0 });
+  return /* @__PURE__ */ jsx5(
+    Component,
+    {
+      className: `
+        yr3Text 
+        yr3Text--${variant}
+        yr3Text--${color}
+        ${weight ? `yr3Text--${weight}` : ""}
+
+      `,
+      style: composeStyles(styleUI, style),
+      onClick,
+      "data-testid": "yr3Text",
+      children
+    }
+  );
+};
+
+// src/components/Button/Button.variants.ts
+var buttonVariant = createVariants({
+  base: "yr3Button",
+  variants: {
+    variant: {
+      filled: "yr3Button--filled",
+      outlined: "yr3Button--outlined",
+      text: "yr3Button--text"
+    },
+    color: {
+      primary: "yr3Button--color-primary",
+      secondary: "yr3Button--color-secondary",
+      success: "yr3Button--color-success",
+      text: "yr3Button--color-text",
+      disabled: "yr3Button--color-disabled"
+    },
+    size: {
+      auto: "yr3Button--size-auto",
+      full: "yr3Button--size-full"
+    },
+    gradientBorder: {
+      true: "yr3Button--gradientBorder"
+    },
+    disabled: {
+      true: "yr3Button--disabled"
+    },
+    animated: {
+      true: "yr3Button--animated"
+    }
+  }
+});
+
+// src/components/Button/Button.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Button = ({ children, color = "text", variant = "text", animated, disabled, gradientBorder = false, size = "auto", ui, style, propsComponent, ...props }) => {
+  const buttonClassname = buttonVariant({ variant, color, animated, disabled, gradientBorder, size });
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      className: buttonClassname,
+      disabled,
+      "data-testid": "yr3Button",
+      ...props,
+      style: composeStyles(ui, style),
+      children: /* @__PURE__ */ jsx6(Text, { variant: propsComponent?.text?.variant || "button", children })
+    }
+  );
+};
+
+// src/components/Calendar/Calendar.tsx
+import * as React3 from "react";
+import dayjs2 from "dayjs";
+
+// 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
+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 initalPropsComponent = {
+  action: {
+    displayButtons: true,
+    displayCalendar: true,
+    day: {
+      background: "transparent",
+      borderColor: "transparent",
+      ui: {}
+    },
+    buttonNext: {
+      disabled: false,
+      label: "next"
+    },
+    buttonBack: {
+      disabled: false,
+      label: "back"
+    }
+  }
+};
+var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar, onMonthChange }) => {
+  const month = dayjs2().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);
+  }, [selected, currentMonth, mapCalendar]);
+  React3.useEffect(() => {
+    if (selected) {
+      onSelect && onSelect(selected);
+    } else {
+      onSelect && onSelect(program.currentDay);
+    }
+  }, [selected, program, onSelect]);
+  React3.useEffect(() => {
+    if (currentMonth) {
+      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 })
+    ] }),
+    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,
+        {
+          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,
+          },
+          "data-testid": "yr3CalendarDay",
+          onClick: () => {
+            if (selected === program.calendar[i][j]) {
+              setSelected(null);
+            } else {
+              setSelected(program.calendar[i][j]);
+            }
+          },
+          children: /* @__PURE__ */ jsx9(
+            Text,
+            {
+              variant: "body2",
+              color: program.calendar[i][j]?.isFuture ? "text" : "text",
+              children: program.calendar[i][j]?.day || ""
+            }
+          )
+        },
+        j
+      )) }, i))
+    ] })
+  ] });
+};
+
+// src/components/Checkbox/Checkbox.tsx
+import * as React4 from "react";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var Checkbox = ({
+  checked,
+  defaultChecked,
+  onChange,
+  label,
+  color = "primary",
+  disabled,
+  propsComponent,
+  variant = "text"
+}) => {
+  const [internal, setInternal] = React4.useState(defaultChecked || false);
+  const isControlled = checked !== void 0;
+  const value = isControlled ? checked : internal;
+  const handleChange = (e) => {
+    if (!isControlled) setInternal(e.target.checked);
+    onChange?.(e, e.target.checked);
+  };
+  const bemClasse = bem("yr3Checkbox");
+  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(
+      "input",
+      {
+        type: "checkbox",
+        checked: value,
+        onChange: handleChange,
+        disabled,
+        "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 })
+  ] });
+};
+
+// src/components/Chip/chip.variants.ts
+var chipVariants = createVariants({
+  base: "yr3Chip",
+  variants: {
+    size: {
+      small: "yr3Chip--small",
+      medium: "yr3Chip--medium",
+      large: "yr3Chip--large"
+    },
+    variant: {
+      outlined: "yr3Chip--outlined",
+      filled: "yr3Chip--filled"
+    },
+    colors: {
+      primary: "yr3Chip--primary",
+      secondary: "yr3Chip--secondary",
+      success: "yr3Chip--success",
+      error: "yr3Chip--error",
+      warning: "yr3Chip--warning",
+      info: "yr3Chip--info"
+    },
+    rounded: {
+      true: "yr3Chip--rounded",
+      false: "yr3Chip--square"
+    }
+  }
+});
+var chip_variants_default = chipVariants;
+
+// src/Icons/IconClose.tsx
+import { jsx as jsx11 } from "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(
+    "path",
+    {
+      d: "M16 16L12 12M12 12L8 8M12 12L16 8M12 12L8 16",
+      stroke: props.stroke || "#fff",
+      strokeWidth: props.strokeWidth || "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+};
+
+// src/components/Chip/Chip.tsx
+import { jsx as jsx12, jsxs as jsxs4 } from "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(
+    "div",
+    {
+      className,
+      "data-testid": "yr3Chip",
+      ...props,
+      style: {
+        ...style,
+        ...uiStyle(ui)
+      },
+      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 }) })
+      ]
+    }
+  );
+};
+
+// src/components/Collapse/Collapse.tsx
+import * as React5 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Collapse = ({ children, open, anchor }) => {
+  const ref = React5.useRef(null);
+  const [height, setHeight] = React5.useState(0);
+  React5.useEffect(() => {
+    if (ref.current) {
+      if (open) {
+        setHeight(ref.current.scrollHeight);
+      } else {
+        setHeight(0);
+      }
+    }
+  }, [open, children]);
+  return /* @__PURE__ */ jsx13("div", { className: `yr3Collapse yr3Collapse--${anchor}`, style: { height }, "data-testid": "yr3Collapse", children: /* @__PURE__ */ jsx13("div", { ref, className: "yr3Collapse__inner", children }) });
+};
+
+// src/components/Container/Container.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Container = ({
+  children,
+  maxWidth = "sm",
+  ui,
+  style,
+  fixed = false
+}) => {
+  const containerClassName = bem("yr3Container");
+  const classes = containerClassName(void 0, { maxWidth, static: fixed });
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      className: classes,
+      style: composeStyles(ui, style),
+      "data-testid": "yr3Container",
+      children
+    }
+  );
+};
+
+// src/theme/controlContext.tsx
+import * as React6 from "react";
+var ControlContext = React6.createContext(null);
+var useControl = () => React6.useContext(ControlContext);
+
+// src/components/Control/Control.tsx
+import * as React7 from "react";
+
+// src/components/Control/control.variants.ts
+var controlVariants = createVariants({
+  base: "yr3Control",
+  variants: {
+    variant: {
+      filled: "yr3Control--filled",
+      outlined: "yr3Control--outlined",
+      base: "yr3Control--base",
+      lined: "yr3Control--lined"
+    },
+    color: {
+      primary: "yr3Control--color-primary",
+      secondary: "yr3Control--color-secondary",
+      success: "yr3Control--color-success",
+      text: "yr3Control--color-text",
+      disabled: "yr3Control--color-disabled",
+      info: "yr3Control--color-info",
+      warning: "yr3Control--color-warning",
+      error: "yr3Control--color-error"
+    },
+    size: {
+      auto: "yr3Control--size-auto",
+      full: "yr3Control--size-full"
+    },
+    rounded: {
+      true: "yr3Control--rounded"
+    },
+    disabled: {
+      true: "yr3Control--disabled"
+    },
+    animated: {
+      true: "yr3Control--animated"
+    },
+    label: {
+      true: "yr3Control--label"
+    }
+  }
+});
+
+// src/components/Control/Control.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Control = ({
+  children,
+  error = false,
+  disabled = false,
+  variant = "outlined",
+  style,
+  ui,
+  color = "primary",
+  label = true
+}) => {
+  const [focused, setFocused] = React7.useState(false);
+  const value = {
+    focused,
+    setFocused,
+    error,
+    disabled
+  };
+  const classes = controlVariants({ variant, color, label });
+  return /* @__PURE__ */ jsx15(ControlContext.Provider, { value, children: /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: classes,
+      style: composeStyles(ui, style),
+      "data-testid": "yr3Control",
+      children
+    }
+  ) });
+};
+
+// src/components/Divider/dividerVariants.ts
+var dividerVariants = createVariants({
+  base: "yr3Divider",
+  variants: {
+    orientation: {
+      horizontal: "yr3Divider--horizontal",
+      vertical: "yr3Divider--vertical"
+    },
+    align: {
+      left: "yr3Divider--left",
+      center: "yr3Divider--center",
+      right: "yr3Divider--right"
+    },
+    withText: {
+      true: "yr3Divider--withText"
+    },
+    color: {
+      primary: "yr3Divider--color-primary",
+      secondary: "yr3Divider--color-secondary",
+      success: "yr3Divider--color-success",
+      disabled: "yr3Divider--color-disabled",
+      text: "yr3Divider--color-text",
+      warning: "yr3Divider--color-warning",
+      info: "yr3Divider--color-info",
+      error: "yr3Divider--color-error"
+    }
+  }
+});
+var dividerVariants_default = dividerVariants;
+
+// src/components/Divider/Divider.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Divider = ({
+  orientation = "horizontal",
+  text: text2,
+  align = "center",
+  ui,
+  style,
+  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 }) });
+};
+
+// src/components/Drawer/Drawer.tsx
+import * as React8 from "react";
+
+// src/components/Drawer/DrawerContainer.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var DrawerContainer = ({ children, ui, style, props, onClose }) => {
+  const { hide } = useBackdrop();
+  const handleClose = () => {
+    if (props === "container") {
+      hide();
+      onClose && onClose();
+    }
+    return;
+  };
+  return /* @__PURE__ */ jsx17("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 useClickAway = (ref, callback) => {
+  useEffect3(() => {
+    const handleClick = (e) => {
+      if (!ref.current || ref.current.contains(e.target)) return;
+      callback();
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [ref, callback]);
+};
+
+// src/components/Drawer/Drawer.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
+  const { show, hide } = useBackdrop();
+  const ref = React8.useRef(null);
+  React8.useEffect(() => {
+    if (open) {
+      show();
+    }
+  }, [open]);
+  useClickAway(ref, () => {
+    if (!open || propsComponent?.closing === null) return;
+    if (propsComponent?.closing === "drawer") {
+      hide();
+      onClose();
+    }
+    ;
+  });
+  React8.useEffect(() => {
+    if (propsComponent?.onClose) {
+      hide();
+      onClose();
+    }
+  }, [propsComponent?.onClose]);
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: `yr3Drawer ${anchor && `yr3Drawer--${anchor}`} ${open && "yr3Drawer--open"}`,
+      style: propsComponent?.drawer,
+      onClick: (e) => e.stopPropagation(),
+      ref,
+      "data-testid": "yr3Drawer",
+      children: /* @__PURE__ */ jsx18(
+        DrawerContainer_default,
+        {
+          children,
+          ...propsComponent?.container,
+          props: propsComponent?.closing,
+          onClose: () => propsComponent?.closing === "container" ? onClose() : console.log("closing null")
+        }
+      )
+    },
+    "drawer_" + anchor
+  );
+};
+
+// src/components/Fade/Fade.tsx
+import * as React9 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Fade = ({
+  in: inProp,
+  children,
+  duration = 200,
+  onTransitionEnd,
+  style
+}) => {
+  React9.useEffect(() => {
+    let timeoutId;
+    if (inProp) {
+      timeoutId = setTimeout(() => {
+        onTransitionEnd && onTransitionEnd();
+      }, duration);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [inProp, duration, onTransitionEnd]);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: `yr3Fade ${inProp ? "yr3Fade--in" : ""}`,
+      style: { ...style, transitionDuration: `${duration}ms` },
+      "data-testid": "yr3Fade",
+      children
+    }
+  );
+};
+
+// src/components/Group/Group.tsx
+import * as React10 from "react";
+
+// src/components/Group/group.variants.ts
+var groupVariants = createVariants({
+  base: "yr3Group",
+  variants: {
+    variant: {
+      filled: "yr3Group--filled",
+      outlined: "yr3Group--outlined",
+      text: "yr3Group--text"
+    },
+    color: {
+      primary: "yr3Group--color-primary",
+      secondary: "yr3Group--color-secondary",
+      success: "yr3Group--color-success",
+      error: "yr3Group--color-error",
+      warning: "yr3Group--color-warning",
+      info: "yr3Group--color-info",
+      disabled: "yr3Group--color-disabled",
+      text: "yr3Group--color-text",
+      background: "yr3Group--color-background"
+    }
+  }
+});
+
+// src/components/Group/Group.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var initialComponents = {
+  group: {
+    ui: {},
+    style: {}
+  },
+  item: {
+    ui: {},
+    style: {}
+  }
+};
+var Group = ({
+  options,
+  value,
+  onChange,
+  variant,
+  color = "primary",
+  propsComponent = initialComponents
+}) => {
+  const [internalValue, setInternalValue] = React10.useState(null);
+  const isControlled = value !== void 0;
+  React10.useEffect(() => {
+    if (isControlled) {
+      setInternalValue(value);
+    }
+  }, [value, isControlled]);
+  const classItems = bem("yr3Group--item");
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: groupVariants({ variant, color }),
+      "data-testid": "yr3Group",
+      style: composeStyles(propsComponent.group?.ui, propsComponent.group?.style),
+      children: options.map((opt) => /* @__PURE__ */ jsx20(
+        "div",
+        {
+          "data-testid": "yr3Group-item",
+          className: classItems(void 0, { item: !!opt, active: internalValue === opt.value || Array.isArray(value) && value.includes(opt.value) }),
+          onClick: () => onChange?.(opt.value),
+          style: composeStyles(propsComponent.item?.ui, propsComponent.item?.style),
+          children: opt.label
+        },
+        opt.value
+      ))
+    }
+  );
+};
+
+// src/components/Image/Image.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Image = ({
+  src,
+  alt = "",
+  ui,
+  style
+}) => {
+  return /* @__PURE__ */ jsx21(
+    "img",
+    {
+      src,
+      alt,
+      className: "yr3Image",
+      style: composeStyles(ui, style),
+      "data-testid": "yr3Image"
+    }
+  );
+};
+
+// src/components/Input/Input.tsx
+import * as React11 from "react";
+
+// src/components/Label/Label.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Label = ({ text: text2, children, className, color = "primary", ui, style }) => {
+  const classes = bem("yr3Label");
+  const classComponent = classes(void 0, { color: `color-${color}` });
+  const classnames = bemMerge(classComponent, className);
+  return /* @__PURE__ */ jsx22(
+    "span",
+    {
+      className: classnames,
+      "data-testid": "yr3Label",
+      style: composeStyles(ui, style),
+      children: text2 ? text2 : children
+    }
+  );
+};
+
+// src/components/Input/input.variants.ts
+var inputVariants = createVariants({
+  base: "yr3Input",
+  variants: {
+    variant: {
+      filled: "yr3Input--filled",
+      outlined: "yr3Input--outlined",
+      base: "yr3Input--base",
+      lined: "yr3Input--lined"
+    },
+    color: {
+      primary: "yr3Input--color-primary",
+      secondary: "yr3Input--color-secondary",
+      success: "yr3Input--color-success",
+      text: "yr3Input--color-text",
+      disabled: "yr3Input--color-disabled",
+      background: "yr3Input--color-background",
+      error: "yr3Input--color-error",
+      warning: "yr3Input--color-warning",
+      info: "yr3Input--color-info"
+    },
+    size: {
+      auto: "yr3Input--size-auto",
+      full: "yr3Input--size-full"
+    },
+    rounded: {
+      true: "yr3Input--rounded"
+    },
+    disabled: {
+      true: "yr3Input--disabled"
+    },
+    animated: {
+      true: "yr3Input--animated"
+    },
+    label: {
+      true: "yr3Input--label"
+    }
+  }
+});
+
+// src/components/Input/Input.tsx
+import { jsx as jsx23, jsxs as jsxs5 } from "react/jsx-runtime";
+var initiaPropsComponent = {
+  label: {
+    display: true,
+    ui: {},
+    style: {}
+  }
+};
+var Input = React11.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue,
+    onChange,
+    variant = "outlined",
+    error = null,
+    ui,
+    style,
+    propsComponent = initiaPropsComponent,
+    type = "text",
+    color = "primary",
+    ...props
+  }, ref) => {
+    const [focused, setFocused] = React11.useState(false);
+    const [internalValue, setInternalValue] = React11.useState(defaultValue);
+    const [internalError, setInternalError] = React11.useState(null);
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const isActive = focused || !!currentValue;
+    const checkPattern = (type2, value2) => {
+      switch (type2) {
+        case "email":
+          return /^[\w.-]+@[\w.-]+\.\w{2,}$/.test(value2);
+        case "phone":
+          return /^\d{10}$/.test(value2);
+        case "number":
+          return /^\d+$/.test(value2);
+        default:
+          return true;
+      }
+    };
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      const isValid = checkPattern(type, newValue);
+      if (!isValid) {
+        setInternalError("Valore non valido");
+      } else {
+        setInternalError(null);
+      }
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      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(
+        Label,
+        {
+          text: label || "",
+          className: !!isActive ? "yr3Input--active" : "",
+          color,
+          ...propsComponent.label
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        "input",
+        {
+          ref,
+          value: currentValue,
+          type,
+          autoComplete: "off",
+          onChange: handleChange,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          className: classes,
+          style: composeStyles(ui, style),
+          ...props,
+          "data-testid": "yr3Input"
+        }
+      ),
+      /* @__PURE__ */ jsx23(Text, { variant: "helper", "data-testid": "yr3Input-helper", children: error || internalError || "" })
+    ] });
+  }
+);
+
+// src/components/Input/InputPhone.tsx
+import * as React14 from "react";
+
+// src/components/Select/Selector.tsx
+import * as React12 from "react";
+
+// src/Icons/IconDown.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var IconDown = (props) => {
+  return /* @__PURE__ */ jsx24("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "yr3Icons", children: /* @__PURE__ */ jsx24("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+};
+
+// src/components/Select/Selector.tsx
+import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
+var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon }) => {
+  const [open, setOpen] = React12.useState(false);
+  const [valueState, setValueState] = React12.useState(value || defaultValue || null);
+  const ref = React12.useRef(null);
+  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 }) }),
+      valueState
+    ] }) }),
+    open && /* @__PURE__ */ jsx25("div", { className: "yr3Select--menu", children: options.map((opt) => /* @__PURE__ */ jsx25(
+      "div",
+      {
+        className: "yr3Select--option",
+        onClick: (e) => {
+          e.stopPropagation();
+          setValueState(opt.value);
+          setOpen(false);
+          const event = {
+            event: e,
+            target: {
+              name,
+              value: opt.value
+            },
+            currentTarget: {
+              name,
+              value: opt.value
+            }
+          };
+          onChange?.(event, opt.value);
+        },
+        children: opt.label
+      },
+      opt.value
+    )) })
+  ] });
+};
+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 ThemeProvider = ({ theme, children }) => {
+  React13.useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsx26(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx26(BackdropProvider, { children }) });
+};
+var useTheme = () => React13.useContext(ThemeContext);
+
+// src/components/Input/InputPhone.tsx
+import { jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
+var Phone = ({
+  name,
+  value,
+  onChange,
+  prefix = "+39",
+  label = "Phone",
+  countries = [],
+  propsComponent
+}) => {
+  const [prefixValue, setPrefixValue] = React14.useState(prefix);
+  const [number, setNumber] = React14.useState(Number(value) || null);
+  const theme = useTheme();
+  const handleChange = (newPrefix, newNumber) => {
+    const full = `${newPrefix}${newNumber.toString()}`;
+    const event = {
+      target: {
+        name,
+        value: full
+      }
+    };
+    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(
+        Selector_default,
+        {
+          options: countries.map((c) => ({
+            value: c.dial,
+            label: c.code
+          })),
+          value: prefixValue,
+          onChange: (_, val) => {
+            setPrefixValue(val);
+            handleChange(val, number);
+          },
+          ...propsComponent?.selector,
+          ui: {
+            ...propsComponent?.selector?.ui,
+            padding: 4
+          },
+          style: propsComponent?.selector?.style
+        }
+      ),
+      /* @__PURE__ */ jsx27(Divider, { orientation: "vertical", ...propsComponent?.divider }),
+      /* @__PURE__ */ jsx27(
+        Input,
+        {
+          type: "phone",
+          variant: "base",
+          value: number,
+          ...propsComponent?.input,
+          onChange: (e, value2) => {
+            setNumber(value2);
+            handleChange(prefixValue, value2);
+          }
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// 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/Modal/Modal.tsx
+import * as React16 from "react";
+
+// src/components/Modal/ModalContainer.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var ModalContainer = ({ children, size = "sm", ui, style }) => {
+  const classes = bem("yr3Modal-container");
+  const classComponent = classes(void 0, { [`${size}`]: !!size });
+  return /* @__PURE__ */ jsx29("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 Modal = ({ open, onClose, children, propsComponent }) => {
+  const { show, hide } = useBackdrop();
+  React16.useEffect(() => {
+    if (open) {
+      show();
+    } else {
+      hide();
+    }
+  }, [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: [
+    children,
+    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ jsx30(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
+  ] }) }) });
+};
+
+// src/components/Notistack/notistack.variants.ts
+var notistackVariants = createVariants({
+  base: "yr3Notistack",
+  variants: {
+    type: {
+      info: "yr3Notistack--info",
+      success: "yr3Notistack--success",
+      warning: "yr3Notistack--warning",
+      error: "yr3Notistack--error"
+    },
+    color: {
+      primary: "yr3Notistack--color-primary",
+      secondary: "yr3Notistack--color-secondary",
+      success: "yr3Notistack--color-success",
+      disabled: "yr3Notistack--color-disabled",
+      text: "yr3Notistack--color-text",
+      warning: "yr3Notistack--color-warning",
+      info: "yr3Notistack--color-info",
+      error: "yr3Notistack--color-error"
+    },
+    direction: {
+      "top-left": "yr3Notistack--top-left",
+      "top-center": "yr3Notistack--top-center",
+      "top-right": "yr3Notistack--top-right",
+      "bottom-left": "yr3Notistack--bottom-left",
+      "bottom-center": "yr3Notistack--bottom-center",
+      "bottom-right": "yr3Notistack--bottom-right"
+    },
+    exiting: {
+      true: "yr3Notistack--exit",
+      false: "yr3Notistack--enter"
+    }
+  }
+});
+
+// src/components/Notistack/Notistack.tsx
+import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
+var Notistack = ({ message, duration = 3e3, variant = "info", color, propsComponent, anchor, exiting = false }) => {
+  const classes = notistackVariants({ type: variant, color, exiting, direction: `${anchor?.vertical || "bottom"}-${anchor?.horizontal || "right"}` });
+  const containerStyle = composeStyles(propsComponent?.container?.ui, propsComponent?.container?.style);
+  const notistackStyle = composeStyles(propsComponent?.notistack?.ui, propsComponent?.notistack?.style);
+  const progressStyle = composeStyles(propsComponent?.progress?.ui, propsComponent?.progress?.style);
+  return /* @__PURE__ */ jsxs10("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
+    /* @__PURE__ */ jsx31("span", { style: containerStyle, children: message }),
+    /* @__PURE__ */ jsx31(
+      "div",
+      {
+        className: "yr3Notistack--progress",
+        style: { ...progressStyle, animationDuration: `${duration}ms` }
+      }
+    )
+  ] });
+};
+
+// src/components/Pending/pending.variants.ts
+var pendingVariants = createVariants({
+  base: "yr3Pending",
+  variants: {
+    variant: {
+      rect: "yr3Pending--rect",
+      circle: "yr3Pending--circle",
+      text: "yr3Pending--text"
+    },
+    color: {
+      primary: "yr3Pending--color-primary",
+      secondary: "yr3Pending--color-secondary",
+      error: "yr3Pending--color-error",
+      success: "yr3Pending--color-success",
+      disabled: "yr3Pending--color-disabled",
+      text: "yr3Pending--color-text",
+      info: "yr3Pending--color-info",
+      background: "yr3Pending--color-background",
+      warning: "yr3Pending--color-warning"
+    }
+  }
+});
+
+// src/components/Pending/Pending.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Pending = ({
+  variant,
+  width,
+  height,
+  size,
+  ui,
+  color = "disabled",
+  style
+}) => {
+  const widthStyle = variant === "circle" ? size : width;
+  const heightStyle = variant === "circle" ? size : height;
+  const uiStylePending = uiStyle({ width: widthStyle, height: heightStyle, ...ui });
+  return /* @__PURE__ */ jsx32(
+    "div",
+    {
+      className: pendingVariants({ variant, color }),
+      style: composeStyles(uiStylePending, style),
+      "data-testid": "yr3Pending"
+    }
+  );
+};
+
+// src/components/Radio/radio.variants.ts
+var radioVariant = createVariants({
+  base: "yr3Radio",
+  variants: {
+    variant: {
+      circle: "yr3Radio--variant-circle",
+      square: "yr3Radio--variant-square"
+    },
+    color: {
+      primary: "yr3Radio--color-primary",
+      secondary: "yr3Radio--color-secondary",
+      success: "yr3Radio--color-success",
+      text: "yr3Radio--color-text",
+      disabled: "yr3Radio--color-disabled"
+    }
+  }
+});
+
+// src/components/Radio/Radio.tsx
+import { jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
+var Radio = ({
+  checked,
+  value,
+  name,
+  onChange,
+  label,
+  color = "primary",
+  variant = "circle",
+  iconChecked,
+  iconUnchecked,
+  propsComponent
+}) => {
+  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(
+      "input",
+      {
+        type: "radio",
+        checked,
+        name,
+        value,
+        onChange: (e) => onChange?.(e, value),
+        "data-testid": "yr3Radio-input"
+      }
+    ),
+    iconChecked && checked ? iconChecked : !checked && iconUnchecked ? iconUnchecked : null,
+    !iconChecked && !iconUnchecked && /* @__PURE__ */ jsx33("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
+    typeof label === "string" && /* @__PURE__ */ jsx33(
+      "span",
+      {
+        className: "yr3Radio--label",
+        "data-testid": "yr3Radio-label",
+        style: composeStyles(propsComponent?.label?.ui, propsComponent?.label?.style),
+        children: label
+      }
+    ) || label
+  ] });
+};
+
+// src/components/Select/Select.tsx
+import * as React17 from "react";
+import { jsx as jsx34, jsxs as jsxs12 } from "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);
+  useClickAway(ref, () => setOpen(false));
+  return /* @__PURE__ */ jsxs12(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ jsx34(
+      Label,
+      {
+        ...propsComponent?.label,
+        text: label || "seleziona",
+        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(
+          IconDown,
+          {
+            width: propsComponent?.icon?.style?.width || 26,
+            height: propsComponent?.icon?.style?.height || 26,
+            stroke: propsComponent?.icon?.style?.stroke || "currentColor",
+            style: propsComponent?.icon?.style
+          }
+        ) })
+      ] }),
+      open && /* @__PURE__ */ jsx34(
+        "div",
+        {
+          className: "yr3Select--menu",
+          style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
+          "data-testid": "yr3Select-menu",
+          children: options.map((opt) => /* @__PURE__ */ jsx34(
+            "div",
+            {
+              className: "yr3Select--option",
+              onClick: (e) => {
+                e.stopPropagation();
+                setValueState(opt.value);
+                setOpen(false);
+                const event = {
+                  event: e,
+                  target: {
+                    name,
+                    value: opt.value
+                  },
+                  currentTarget: {
+                    name,
+                    value: opt.value
+                  }
+                };
+                onChange?.(event, opt.value);
+              },
+              children: opt.label
+            },
+            opt.value
+          ))
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/Slide/Slide.tsx
+import * as React18 from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Slide = ({
+  in: inProp,
+  children,
+  direction = "left",
+  duration = 300,
+  onTransitionEnd,
+  propsComponent
+}) => {
+  const bemContent = bem("yr3Slide--content");
+  const classNameContent = bemContent(void 0, {
+    [direction]: true,
+    "in": !!inProp
+  });
+  React18.useEffect(() => {
+    let timeoutId;
+    if (inProp) {
+      timeoutId = setTimeout(() => {
+        onTransitionEnd && onTransitionEnd();
+      }, duration);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [inProp, duration, onTransitionEnd]);
+  const uiStyleContent = uiStyle({ ...propsComponent?.slide?.ui, transitionDuration: `${duration}ms` });
+  return /* @__PURE__ */ jsx35(
+    "div",
+    {
+      className: "yr3Slide",
+      style: uiStyle({ position: "relative", zIndex: 4, overflow: "hidden" }),
+      "data-testid": "yr3Slide",
+      children: /* @__PURE__ */ jsx35(
+        "div",
+        {
+          className: classNameContent,
+          style: composeStyles(uiStyleContent, propsComponent?.slide?.style || {}),
+          "data-testid": "yr3Slide-content",
+          children: /* @__PURE__ */ jsx35(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
+        }
+      )
+    }
+  );
+};
+
+// src/components/Switch/Switch.tsx
+import * as React19 from "react";
+
+// src/components/Switch/switch.variants.ts
+var switchVariants = createVariants({
+  base: "yr3Switch",
+  variants: {
+    colors: {
+      primary: "yr3Switch--color-primary",
+      secondary: "yr3Switch--color-secondary",
+      success: "yr3Switch--color-success",
+      text: "yr3Switch--color-text",
+      disabled: "yr3Switch--color-disabled",
+      warning: "yr3Switch--color-warning"
+    },
+    size: {
+      sm: "yr3Switch--sm",
+      md: "yr3Switch--md",
+      lg: "yr3Switch--lg"
+    },
+    disabled: {
+      true: "yr3Switch--disabled"
+    },
+    checked: {
+      true: "yr3Switch--checked"
+    }
+  }
+});
+
+// src/components/Switch/Switch.tsx
+import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
+var Switch = ({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  color = "primary",
+  size = "sm",
+  label
+}) => {
+  const [internal, setInternal] = React19.useState(defaultChecked || false);
+  const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal });
+  const isControlled = checked !== void 0;
+  const value = isControlled ? checked : internal;
+  const handleChange = (e) => {
+    if (!isControlled) setInternal(e.target.checked);
+    onChange?.(e, e.target.checked);
+  };
+  return /* @__PURE__ */ jsxs13(
+    "label",
+    {
+      className: classname,
+      "data-testid": "yr3Switch",
+      children: [
+        /* @__PURE__ */ jsx36(
+          "input",
+          {
+            type: "checkbox",
+            checked: value,
+            onChange: handleChange,
+            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 })
+      ]
+    }
+  );
+};
+
+// src/Icons/IconSearch.tsx
+import { jsx as jsx37 } from "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(
+    "path",
+    {
+      d: "M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z",
+      stroke: props.stroke || "#fff",
+      strokeWidth: props.strokeWidth || "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+};
+
+// src/theme/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/notistackContext.tsx
+import * as React20 from "react";
+import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
+var NotistackContext = React20.createContext(null);
+var NotistackProvider = ({ children }) => {
+  const [snacks, setSnacks] = React20.useState([]);
+  const enqueueNotistack = (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__ */ jsxs14(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
+    children,
+    /* @__PURE__ */ jsx38("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx38(Notistack, { ...snack }, snack.id)) })
+  ] });
+};
+var useNotistack = () => React20.useContext(NotistackContext);
+
+// src/theme/useMediaQuery.tsx
+import * as React21 from "react";
+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/index.ts
+injectStyles();
+initTheme();
+export {
+  Avatar,
+  Backdrop,
+  BackdropContext,
+  BackdropProvider,
+  Box,
+  Button,
+  Calendar,
+  Checkbox,
+  Chip,
+  Collapse,
+  Container,
+  Control,
+  ControlContext,
+  Divider,
+  Drawer,
+  Fade,
+  Flex,
+  Grid,
+  Group,
+  IconClose,
+  IconDown,
+  IconSearch,
+  Image,
+  Input,
+  Label,
+  Modal,
+  ModalContainer,
+  Notistack,
+  NotistackProvider,
+  Pending,
+  Phone,
+  Radio,
+  Select,
+  Slide,
+  Switch,
+  Text,
+  ThemeContext,
+  ThemeProvider,
+  adjustColor,
+  applyTheme,
+  baseTokens,
+  bem,
+  bemMerge,
+  breakpoints,
+  composeStyles,
+  createPaletteColor,
+  createTheme,
+  createVariants,
+  cx,
+  getContrast,
+  getMonthCalendar,
+  initTheme,
+  isEmpty,
+  text,
+  times,
+  uiStyle,
+  useBackdrop,
+  useBreakpointValue,
+  useClickAway,
+  useControl,
+  useMediaQuery,
+  useNotistack,
+  useTheme
+};