@udixio/ui-react 0.0.1 → 0.1.0

package/dist/index.js

@@ -0,0 +1,2820 @@
+import { jsx as i, jsxs as P, Fragment as te } from "react/jsx-runtime";
+import { extendTailwindMerge as xe } from "tailwind-merge";
+import W, { useState as S, useEffect as $, useRef as O, useLayoutEffect as ie, isValidElement as we, cloneElement as ve, useMemo as be } from "react";
+import { motion as U, AnimatePresence as z, useScroll as Ne, useMotionValueEvent as oe, motionValue as ue, useTransform as re } from "motion/react";
+import { createPortal as Le } from "react-dom";
+import Ee from "react-textarea-autosize";
+function fe(e) {
+  var t, r, n = "";
+  if (typeof e == "string" || typeof e == "number") n += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var l = e.length;
+    for (t = 0; t < l; t++) e[t] && (r = fe(e[t])) && (n && (n += " "), n += r);
+  } else for (r in e) e[r] && (n && (n += " "), n += r);
+  return n;
+}
+function de() {
+  for (var e, t, r = 0, n = "", l = arguments.length; r < l; r++) (e = arguments[r]) && (t = fe(e)) && (n && (n += " "), n += t);
+  return n;
+}
+const me = xe({
+  override: {
+    classGroups: {
+      "text-color": [
+        {
+          text: [
+            (e) => !e.startsWith("display-") && !e.startsWith("headline-") && !e.startsWith("title-") && !e.startsWith("body-") && !e.startsWith("label-")
+          ]
+        }
+      ]
+    }
+  },
+  extend: {
+    classGroups: {
+      font: [
+        {
+          text: [
+            (e) => e.startsWith("display-") || e.startsWith("headline-") || e.startsWith("title-") || e.startsWith("body-") || e.startsWith("label-")
+          ]
+        }
+      ]
+    },
+    conflictingClassGroups: {
+      font: ["font"]
+    }
+  }
+}), f = (...e) => me(de(e)), Ie = (...e) => me(de(e));
+function ke(e) {
+  return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+const Me = (e) => {
+  const t = {};
+  e.classNameList.forEach((n) => {
+    var l;
+    if (n)
+      if (typeof n == "string")
+        (t[l = e.default] ?? (t[l] = [])).push(n);
+      else {
+        const c = n(e.states);
+        Object.entries(c).map((o) => {
+          const [s, d] = o;
+          (t[s] ?? (t[s] = [])).push(d);
+        });
+      }
+  });
+  const r = t;
+  return Object.entries(t).map((n) => {
+    let [l, c] = n;
+    c = c.reverse(), l == e.default && c.unshift("relative"), c.unshift(ke(l)), r[l] = Ie(...c);
+  }), r;
+}, H = (e, t) => (r) => Me({
+  classNameList: [r.className, t],
+  default: e,
+  states: r
+}), Re = H(
+  "button",
+  ({
+    variant: e,
+    disabled: t,
+    iconPosition: r,
+    icon: n,
+    loading: l,
+    shape: c,
+    size: o,
+    allowShapeTransformation: s
+  }) => ({
+    button: f(
+      "group flex items-center cursor-pointer",
+      o === "xSmall" && "py-2",
+      o === "small" && "py-1",
+      e === "text" && [
+        o === "xSmall" && "-my-2",
+        o === "small" && "-my-1"
+      ]
+    ),
+    container: f(
+      " relative outline-none overflow-hidden inline-block flex  justify-center   items-center  ",
+      o === "xSmall" && "text-label-large px-3 py-1.5 gap-1",
+      o === "small" && "text-label-large px-4 py-2.5 gap-2",
+      o === "medium" && "text-title-medium px-6 py-4 gap-2",
+      o === "large" && "text-headline-small px-12 py-8 gap-3",
+      o === "xLarge" && "text-headline-large px-16 py-12 gap-4",
+      c === "rounded" && {
+        "rounded-[30px]": o === "xSmall" || o == "small",
+        "rounded-[40px]": o === "medium",
+        "rounded-[70px]": o === "large" || o == "xLarge"
+      },
+      c === "squared" && {
+        "rounded-[12px]": o === "xSmall" || o == "small",
+        "rounded-[16px]": o === "medium",
+        "rounded-[28px]": o === "large" || o == "xLarge"
+      },
+      s && !t && {
+        "group-active:rounded-[12px]": o === "xSmall" || o == "small",
+        "group-active:rounded-[16px]": o === "medium",
+        "group-active:rounded-[28px]": o === "large" || o == "xLarge"
+      },
+      e === "elevated" && {
+        "bg-surface-container-low  shadow-1 hover:shadow-2": !t
+      },
+      e === "filled" && {
+        "bg-primary hover:shadow-1": !t
+      },
+      e === "filledTonal" && {
+        "bg-secondary-container hover:shadow-1": !t
+      },
+      e === "outlined" && [
+        " border",
+        {
+          "border-on-surface/[0.12]": t,
+          " border-outline focus:border-primary": !t
+        }
+      ],
+      e === "text" && [
+        "w-fit",
+        {
+          "text-primary": !t,
+          "text-on-surface/[0.38]": t
+        },
+        o === "xSmall" && "-mx-3 ",
+        o === "small" && "-mx-4 ",
+        o === "medium" && "-mx-6 ",
+        o === "large" && "-mx-12",
+        o === "xLarge" && "-mx-16 "
+        // size === 'small' && ' -my-2.5',
+        // size === 'medium' && ' -my-4',
+        // size === 'large' && '-my-8',
+        // size === 'xLarge' && ' -my-12',
+      ],
+      t && "cursor-default"
+    ),
+    stateLayer: f(
+      "state-layer min-h-full min-w-full absolute top-0 left-0 ",
+      e === "elevated" && {
+        "bg-on-surface/[0.12]": t,
+        "group-state-primary": !t
+      },
+      e === "filled" && {
+        "bg-on-surface/[0.12]": t,
+        "group-state-on-primary": !t
+      },
+      e === "filledTonal" && {
+        "bg-on-surface/[0.12]": t,
+        "group-state-on-secondary-container ": !t
+      },
+      e === "outlined" && {
+        "group-state-primary  group-state-primary": !t
+      },
+      e === "text" && {
+        "group-state-primary": !t
+      }
+    ),
+    label: f(
+      { invisible: l },
+      e === "elevated" && {
+        "text-primary": !t,
+        "text-on-surface/[38%]": t
+      },
+      e === "filled" && {
+        "text-on-primary": !t,
+        "text-on-surface/[38%]": t
+      },
+      e === "filledTonal" && {
+        "text-on-secondary-container": !t,
+        "text-on-surface/[0.38]": t
+      },
+      e === "outlined" && {
+        "text-primary": !t,
+        "text-on-surface/[0.38]": t
+      },
+      e === "text" && {
+        "text-primary": !t,
+        "text-on-surface/[0.38]": t
+      }
+    ),
+    icon: f(
+      { invisible: l },
+      o === "xSmall" && "size-5",
+      o === "small" && "size-5",
+      o === "medium" && "size-6",
+      o === "large" && "size-8",
+      o === "xLarge" && "size-10",
+      e === "elevated" && {
+        "text-primary": !t,
+        "text-on-surface/[38%]": t
+      },
+      e === "filled" && {
+        "text-on-primary": !t,
+        "text-on-surface/[38%]": t
+      },
+      e === "filledTonal" && {
+        "text-on-secondary-container": !t,
+        "text-on-surface/[0.38]": t
+      },
+      e === "outlined" && {
+        "text-primary": !t,
+        "text-on-surface/[0.38]": t
+      },
+      e === "text" && {
+        "text-primary": !t,
+        "text-on-surface/[0.38]": t
+      }
+    )
+  })
+), Se = H(
+  "card",
+  ({ variant: e, isInteractive: t }) => ({
+    card: f(
+      "card group/card rounded-xl overflow-hidden z-10",
+      e === "outlined" && "bg-surface",
+      e === "elevated" && "bg-surface-container-low shadow-1",
+      e === "filled" && "bg-surface-container-highest",
+      e !== "filled" && "border border-outline-variant"
+    ),
+    stateLayer: f([
+      "w-full top-0 left-0 h-full absolute -z-10",
+      {
+        " group-hover/card:hover-state-on-surface group-focus-visible/card:focus-state-on-surface": t
+      }
+    ])
+  })
+), Ce = H(
+  "carouselItem",
+  () => ({
+    carouselItem: f("rounded-[28px] overflow-hidden flex-none")
+  })
+), Ve = H(
+  "carousel",
+  () => ({
+    carousel: f(["w-full h-[400px]"]),
+    track: f(
+      "grid grid-flow-col h-full transition-transform  ease-out w-fit"
+    )
+  })
+), Be = H(
+  "divider",
+  ({ orientation: e }) => ({
+    divider: f(
+      "border-outline-variant ",
+      {
+        "h-fit w-full border-t": e === "horizontal"
+      },
+      {
+        "h-auto self-stretch w-fit border-l": e === "vertical"
+      }
+    )
+  })
+), De = H(
+  "fab",
+  ({ size: e, variant: t, isExtended: r }) => ({
+    fab: f(
+      "flex shadow-3 hover:shadow-4 group overflow-hidden outline-none items-center cursor-pointer",
+      {
+        "rounded-[12px]": e == "small" && !r,
+        "rounded-[16px]": e == "medium" || r,
+        "rounded-[28px]": e == "large" && !r
+      },
+      {
+        "p-2": e == "small" && !r,
+        "p-4": e == "medium" || r,
+        "p-[30px]": e == "large" && !r
+      },
+      t === "surface" && "bg-surface-container",
+      t === "primary" && "bg-primary-container",
+      t === "secondary" && "bg-secondary-container",
+      t === "tertiary" && "bg-tertiary-container"
+    ),
+    stateLayer: f(
+      "absolute w-full h-full overflow-hidden left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2",
+      t === "surface" && "group-hover:hover-state-primary group-focus:focus-state-primary",
+      t === "primary" && "group-hover:hover-state-on-primary-container group-focus-visible:focus-state-on-primary-container",
+      t === "secondary" && "group-hover:hover-state-on-secondary-container group-focus-visible:focus-state-on-secondary-container",
+      t === "tertiary" && "group-hover:hover-state-on-tertiary-container group-focus-visible:focus-state-on-tertiary-container"
+    ),
+    icon: f(
+      {
+        "size-6": e == "small" || e == "medium" || r,
+        "size-9": e == "large" && !r
+      },
+      t === "surface" && "text-primary",
+      t === "primary" && "text-on-primary-container",
+      t === "secondary" && "text-on-secondary-container",
+      t === "tertiary" && "text-on-tertiary-container"
+    ),
+    label: f(
+      "text-title-medium text-nowrap",
+      t === "surface" && "text-primary",
+      t === "primary" && "text-on-primary-container",
+      t === "secondary" && "text-on-secondary-container",
+      t === "tertiary" && "text-on-tertiary-container"
+    )
+  })
+), $e = H(
+  "iconButton",
+  ({
+    variant: e,
+    disabled: t,
+    onToggle: r,
+    isActive: n,
+    size: l,
+    width: c,
+    shape: o,
+    allowShapeTransformation: s
+  }) => ({
+    iconButton: f(
+      "group  min-h-12 flex items-center cursor-pointer",
+      {
+        "cursor-default": t
+      }
+    ),
+    container: f(
+      "rounded-full relative flex overflow-hidden transition-all duration-300",
+      (o === "rounded" || o === "squared" && r && !t && n && s) && {
+        "rounded-[30px]": l === "xSmall" || l == "small",
+        "rounded-[40px]": l === "medium",
+        "rounded-[70px]": l === "large" || l == "xLarge"
+      },
+      (o === "squared" || o === "rounded" && r && !t && n && s) && {
+        "rounded-[12px]": l === "xSmall" || l == "small",
+        "rounded-[16px]": l === "medium",
+        "rounded-[28px]": l === "large" || l == "xLarge"
+      },
+      s && !t && {
+        "group-active:rounded-[12px]": l === "xSmall" || l == "small",
+        "group-active:rounded-[16px]": l === "medium",
+        "group-active:rounded-[28px]": l === "large" || l == "xLarge"
+      },
+      e === "filled" && [
+        !t && {
+          "bg-surface-container": !n && !!r,
+          "bg-primary": n || !r
+        },
+        !!t && "bg-on-surface/[0.12]"
+      ],
+      e === "tonal" && [
+        !t && {
+          "bg-surface-container": !n && !!r,
+          "bg-secondary-container": n || !r
+        },
+        !!t && "bg-on-surface/[0.12]"
+      ],
+      e === "outlined" && [
+        !t && {
+          "border border-outline": !n,
+          "border border-transparent bg-inverse-surface": n
+        },
+        !!t && {
+          "border border-on-surface/[0.12]": !n,
+          "border border-transparent bg-on-surface/[0.12]": n
+        }
+      ]
+    ),
+    stateLayer: f(
+      "absolute top-0 left-0 h-full w-full ",
+      !t && [
+        e === "standard" && {
+          "state-on-surface-variant": !n,
+          "state-primary": n
+        },
+        e === "filled" && {
+          "state-primary": !n && !!r,
+          "state-inverse-on-surface": n || !r
+        },
+        e === "tonal" && {
+          "state-on-surface-variant": !n && !!r,
+          "state-on-secondary-container": n || !r
+        },
+        e === "outlined" && {
+          "state-on-surface-variant": !n,
+          "state-on-primary": n
+        }
+      ]
+    ),
+    icon: f(
+      "  transition-all duration-300",
+      { "size-5 p-1.5": l === "xSmall" },
+      { "size-6 p-2": l === "small" },
+      { "size-6 p-4": l === "medium" },
+      { "size-8 p-8": l === "large" },
+      { "size-10 p-12": l === "xLarge" },
+      c == "narrow" && [
+        { "px-1": l === "xSmall" },
+        { "px-1": l === "small" },
+        { "px-3": l === "medium" },
+        { "px-4": l === "large" },
+        { "px-8": l === "xLarge" }
+      ],
+      c == "wide" && [
+        { "px-2.5": l === "xSmall" },
+        { "px-3.5": l === "small" },
+        { "px-6": l === "medium" },
+        { "px-12": l === "large" },
+        { "px-[72px]": l === "xLarge" }
+      ],
+      !t && [
+        e === "standard" && {
+          "text-on-surface-variant": !n,
+          "text-primary": n
+        },
+        e === "filled" && {
+          "text-primary": !n && !!r,
+          "text-on-primary": n || !r
+        },
+        e === "tonal" && {
+          "text-on-surface-variant": !n && !!r,
+          "text-on-secondary-container": n || !r
+        },
+        e === "outlined" && {
+          "text-on-surface-variant": !n,
+          "text-inverse-on-surface": n
+        }
+      ],
+      !!t && "text-on-surface/[0.38]"
+    )
+  })
+), We = H(
+  "progressIndicator",
+  ({ variant: e, isVisible: t }) => ({
+    progressIndicator: f(
+      (e === "linear-determinate" || e == "linear-indeterminate") && "flex w-full"
+    ),
+    track: "h-full rounded-full bg-primary rounded-l-full",
+    activeIndicator: f(
+      (e === "linear-determinate" || e == "linear-indeterminate") && "h-full flex-1 rounded-full bg-primary-container",
+      (e === "circular-determinate" || e == "circular-indeterminate") && [
+        "stroke-primary fill-transparent ",
+        {
+          "stroke-[4px]": t,
+          "stroke-[0px]": !t
+        }
+      ]
+    ),
+    stop: "absolute right-0 bg-primary rounded-full"
+  })
+), Pe = H(
+  "slider",
+  ({ isChanging: e }) => ({
+    slider: f([
+      "relative w-full h-11 flex items-center rounded gap-x-1.5 cursor-pointer"
+    ]),
+    activeTrack: f([
+      "h-4 relative transition-all duration-100 bg-primary overflow-hidden rounded-l-full "
+    ]),
+    inactiveTrack: f([
+      "h-4 relative transition-all duration-100 bg-primary-container rounded-r-full overflow-hidden"
+    ]),
+    handle: f([
+      "transform transition-all duration-100 bg-primary h-full rounded-full ",
+      { "w-0.5": e, "w-1": !e }
+    ]),
+    valueIndicator: f([
+      "absolute select-none bg-inverse-surface text-inverse-on-surface py-3 px-4 text-label-large rounded-full bottom-[calc(100%+4px)] transform left-1/2 -translate-x-1/2"
+    ]),
+    dot: f([
+      "h-1 w-1 absolute transform -translate-y-1/2 -translate-x-1/2 top-1/2 rounded-full"
+    ])
+  })
+), Ue = H(
+  "snackbar",
+  () => ({
+    snackbar: f(" rounded bg-inverse-surface "),
+    container: f(
+      "pl-4 pr-2 max-w-full py-1 flex items-center flex-wrap"
+    ),
+    supportingText: f("text-body-medium text-inverse-on-surface "),
+    icon: f(" ml-auto mr-0 text-inverse-on-surface block dark")
+  })
+), je = H(
+  "switch",
+  ({ isSelected: e, disabled: t, inactiveIcon: r }) => ({
+    switch: f(
+      "group w-[52px] h-[32px] outline-none rounded-full  border-2 flex items-center",
+      { "bg-on-surface/[0.12] border-transparent": t },
+      !t && [
+        "cursor-pointer ",
+        { "bg-primary  border-primary": e },
+        { "bg-surface-container border-outline": !e }
+      ]
+      // { 'justify-start': !isSelected },
+      // { 'justify-end': isSelected },
+    ),
+    handleContainer: f(
+      "flex items-center justify-center absolute",
+      { "left-[14px]": !e },
+      { "right-[14px]": e }
+    ),
+    handle: f(
+      "transition-all duration-100  z-10 rounded-full  flex items-center justify-center",
+      { "w-[16px] h-[16px]": !e && !r },
+      { "w-[24px] h-[24px]": !(!e && !r) },
+      !t && [
+        "cursor-pointer group-active:h-[28px] group-active:w-[28px]",
+        { "bg-on-primary group-hover:bg-primary-container": e },
+        { "bg-outline group-hover:bg-on-surface-variant": !e }
+      ],
+      { "bg-surface": t }
+    ),
+    handleStateLayer: f(
+      "w-[40px] h-[40px] -z-10 rounded-full absolute",
+      { "group-state-primary": !t }
+    ),
+    icon: f(
+      "w-[16px] h-[16px]",
+      !t && [
+        { "text-on-primary-container": e },
+        { "text-on-primary": !e }
+      ],
+      { "text-on-surface/[0.38]": t }
+    )
+  })
+), Oe = H(
+  "tab",
+  ({ isSelected: e, icon: t, label: r, variant: n }) => ({
+    tab: f(
+      "bg-surface flex-1 group outline-none flex px-4 justify-center items-center cursor-pointer",
+      { "z-10": e },
+      !!(t && r) && n === "primary" && "h-16",
+      !(t && r && n === "primary") && "h-12"
+    ),
+    stateLayer: f(
+      "absolute w-full h-full overflow-hidden left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2",
+      n === "primary" && {
+        "group-hover:hover-state-on-surface group-focus-visible:focus-state-on-surface": !e,
+        "group-hover:hover-state-primary group-focus-visible:focus-state-primary": e
+      },
+      n === "secondary" && "group-hover:hover-state-on-surface group-focus-visible:focus-state-on-surface"
+    ),
+    content: f(
+      "flex  gap-0.5 h-full justify-center",
+      {
+        relative: n == "primary"
+      },
+      {
+        "": !!(r && !t)
+      },
+      n === "primary" && "flex-col items-center",
+      n === "secondary" && {
+        "flex-col items-center": !(r && t),
+        "flex-row items-center gap-2": !!(r && t)
+      }
+    ),
+    icon: f(
+      "h-6 w-6 p-0.5 !box-border",
+      n === "primary" && {
+        "text-on-surface-variant": !e,
+        "text-primary": e
+      },
+      n === "secondary" && {
+        "text-on-surface-variant": !e,
+        "text-on-surface": e
+      }
+    ),
+    label: f(
+      "text-title-small  text-nowrap",
+      n === "primary" && {
+        "text-on-surface-variant": !e,
+        "text-primary": e
+      },
+      n === "secondary" && {
+        "text-on-surface-variant": !e,
+        "text-on-surface": e
+      }
+    ),
+    underline: f(
+      "bg-primary  absolute w-full left-0 bottom-0",
+      n === "primary" && "h-[3px] rounded-t",
+      n === "secondary" && "h-0.5"
+    )
+  })
+), Xe = H(
+  "tabs",
+  ({ scrollable: e }) => ({
+    tabs: f(
+      "border-b border-surface-container-highest",
+      "flex relative ",
+      { "overflow-x-auto": e }
+    )
+  })
+), Fe = H(
+  "textField",
+  ({
+    disabled: e,
+    leadingIcon: t,
+    trailingIcon: r,
+    variant: n,
+    errorText: l,
+    isFocused: c,
+    value: o,
+    suffix: s,
+    textLine: d
+  }) => ({
+    textField: f({
+      "opacity-[.38]": e
+    }),
+    content: f(
+      "group  transition-border duration-200 relative  flex  items-center ",
+      { "h-14": d == "singleLine" },
+      {
+        "border-on-surface-variant": !(l != null && l.length) && !c && n == "filled",
+        "border-outline": !(l != null && l.length) && !c && n == "outlined",
+        "border-primary": !(l != null && l.length) && c,
+        "border-error": !!(l != null && l.length)
+      },
+      { "bg-on-surface/[0.04]": e },
+      n == "filled" && [
+        "rounded-t overflow-hidden border-b",
+        { "bg-surface-container-highest": !e }
+      ],
+      n == "outlined" && [
+        "border rounded box-border",
+        {
+          "border-[3px]": c
+        }
+      ]
+    ),
+    stateLayer: f(
+      "absolute -z-10 w-full h-full top-0 left-0",
+      {
+        hidden: n == "outlined"
+      },
+      {
+        "group-state-on-surface": !e,
+        "focus-state-on-surface": c
+      }
+    ),
+    label: f(
+      "inline-flex outline-none  whitespace-nowrap",
+      { "text-on-surface-variant": !e && !(l != null && l.length) },
+      { "text-on-surface": e },
+      { "text-error": !!(l != null && l.length) },
+      { "text-primary": !(l != null && l.length) && c }
+    ),
+    input: f(
+      "w-full resize-none px-4 text-body-large bg-[inherit] outline-none autofill:transition-colors autofill:duration-[5000000ms]",
+      {
+        " text-on-surface placeholder:text-on-surface-variant": !e,
+        "placeholder:text-on-surface text-on-surface": e
+      },
+      {
+        "pr-0": !!s
+      },
+      n == "filled" && " pb-2 pt-6",
+      n == "outlined" && "py-4 relative z-10"
+    ),
+    activeIndicator: f(
+      "absolute w-0 inset-x-0 border-rounded mx-auto bottom-0",
+      n == "filled" && [
+        "h-[2px] transition-all duration-300",
+        { "bg-primary": !(l != null && l.length) },
+        { "bg-error": !!(l != null && l.length) },
+        { "!w-full": c }
+      ]
+    ),
+    supportingText: f(
+      " text-body-small px-4 pt-1",
+      { "text-on-surface-variant": !e && !(l != null && l.length) },
+      { "text-on-surface": e },
+      { "!w-full": c },
+      { "text-error": !!(l != null && l.length) }
+    ),
+    leadingIcon: f([
+      "h-12 ml-3 flex items-center justify-center",
+      { "cursor-text": !W.isValidElement(t) }
+    ]),
+    trailingIcon: f("h-12 w-12 flex items-center justify-center", {
+      "cursor-text": !W.isValidElement(r)
+    }),
+    suffix: f(
+      "text-on-surface-variant pl-0 pr-4",
+      n == "filled" && " pb-2 pt-6",
+      n == "outlined" && "py-4 relative z-10"
+    )
+  })
+), Ke = H(
+  "toolTip",
+  ({ position: e, variant: t }) => ({
+    toolTip: f(
+      " pointer-events-auto w-max z-10  absolute  m-1 w-max-content max-w-[312px]",
+      {
+        "bottom-full left-1/2 -translate-x-1/2": e == "top",
+        "top-full left-1/2 -translate-x-1/2": e == "bottom",
+        "right-full top-1/2 -translate-y-1/2": e == "left",
+        "left-full top-1/2 -translate-y-1/2": e == "right",
+        "bottom-full right-full": e == "top-left",
+        "bottom-full left-full": e == "top-right",
+        "top-full right-full": e == "bottom-left",
+        "top-full left-full": e == "bottom-right"
+      }
+    ),
+    container: f(
+      "pb-2",
+      t == "rich" && "bg-surface-container rounded-2xl text-on-surface-container px-4 pt-3 shadow-2",
+      t == "plain" && "bg-inverse-surface rounded text-inverse-on-surface px-2 py-1"
+    ),
+    actions: f(
+      "flex gap-10 px-1 mt-2",
+      t == "plain" && "hidden"
+    ),
+    subHead: f(
+      "text-title-small mb-1",
+      t == "plain" && "hidden"
+    ),
+    supportingText: f("")
+  })
+), J = ({ icon: e, colors: t = [], className: r }) => {
+  const { icon: n } = e, [l, c, , , o] = n || [], s = (d) => {
+    switch (d.length) {
+      case 2:
+        return {
+          "--fa-primary-color": d[0] || "inherit",
+          "--fa-secondary-color": d[1] || "inherit"
+        };
+      case 1:
+        return { color: d[0] };
+      default:
+        return {};
+    }
+  };
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      className: f("size-5 box-content", r),
+      style: {
+        ...s(t)
+      },
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${l} ${c}`,
+      role: "img",
+      "aria-hidden": "true",
+      children: typeof o == "string" ? /* @__PURE__ */ i("path", { className: "fill-current", d: o }) : o.map((d, u) => /* @__PURE__ */ i("path", { d }, u))
+    }
+  );
+}, Ge = ({
+  variant: e = "linear-determinate",
+  minHeight: t = 4,
+  value: r = 0,
+  transitionDuration: n = 1e3,
+  className: l,
+  ...c
+}) => {
+  const [o, s] = S(r), [d, u] = S(1.5);
+  $(() => {
+    r > 100 && (r = 100), r < 0 && (r = 0), s(r);
+  }, [r]);
+  const [p, w] = S(!0), a = () => p ? d : d * 0.5;
+  $(() => {
+    if ((e === "circular-indeterminate" || e === "linear-indeterminate") && o !== 100) {
+      const L = setInterval(() => {
+        s(p ? 10 : 90), w(!p);
+      }, a() * 1e3);
+      return () => clearInterval(L);
+    }
+  }, [e, p, o]);
+  const [y, v] = S(!1);
+  $(() => {
+    if (o >= 100) {
+      const L = setTimeout(() => {
+        v(!1);
+      }, n);
+      return () => {
+        clearTimeout(L);
+      };
+    } else
+      v(!0);
+  }, [o, n]);
+  const b = We({
+    className: l,
+    variant: e,
+    value: r,
+    transitionDuration: n,
+    isVisible: y,
+    minHeight: t
+  });
+  return /* @__PURE__ */ P(te, { children: [
+    (e === "linear-determinate" || e == "linear-indeterminate") && /* @__PURE__ */ P(
+      "div",
+      {
+        style: { height: `${t}px` },
+        className: b.progressIndicator,
+        ...c,
+        children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                height: y ? `${t}px` : "0px",
+                width: `${o}%`,
+                transition: `width 1ms ease-in-out ${o == 100 ? ", height 200ms 0.5s ease-in-out" : ""}`
+              },
+              className: b.track
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                height: y ? `${t}px` : "0px",
+                marginLeft: o != 100 ? "6px" : "0px",
+                transition: `width ${n}ms ease-in-out ${o == 100 ? `, height 200ms 0.5s ease-in-out, margin-left ${n}ms ${n / 1.5}ms` : ""}`
+              },
+              className: b.activeIndicator
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                height: y ? `${t}px` : "0px",
+                width: `${t}px`,
+                transition: `width ${n}ms ease-in-out, height 200ms 0.5s ease-in-out`
+              },
+              className: b.stop
+            }
+          )
+        ]
+      }
+    ),
+    (e === "circular-determinate" || e == "circular-indeterminate") && /* @__PURE__ */ i(
+      U.svg,
+      {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        initial: { rotate: -90 },
+        animate: { rotate: 270 },
+        transition: {
+          repeat: 1 / 0,
+          duration: a(),
+          ease: "linear"
+        },
+        className: b.progressIndicator,
+        ...c,
+        children: /* @__PURE__ */ i(
+          U.circle,
+          {
+            cx: "50%",
+            cy: "50%",
+            r: y ? "calc(50% - 2px)" : "50%",
+            style: {
+              strokeLinecap: "round"
+            },
+            initial: "hidden",
+            animate: "visible",
+            className: b.activeIndicator,
+            variants: {
+              hidden: {
+                pathLength: p ? 10 / 100 : 90 / 100
+              },
+              visible: {
+                pathLength: p ? 90 / 100 : 10 / 100
+              }
+            },
+            transition: {
+              pathLength: {
+                type: "tween",
+                ease: "linear",
+                duration: a(),
+                bounce: 0
+              }
+            }
+          }
+        )
+      },
+      p + ""
+    )
+  ] });
+}, ne = ({
+  colorName: e = "on-surface",
+  triggerRef: t
+}) => {
+  const r = {
+    initial: {
+      opacity: 0,
+      borderRadius: "50%",
+      width: "25%",
+      height: "25%"
+    },
+    animate: {
+      opacity: 1,
+      borderRadius: 0,
+      width: "200%",
+      height: "200%",
+      transition: {
+        duration: 0.3,
+        borderRadius: { duration: 0.3, delay: 0.3 }
+      }
+    }
+  }, [n, l] = S(!0), [c, o] = S(!1), [s, d] = S({ x: 0, y: 0 });
+  $(() => {
+    c && (l(!0), l(!1));
+  }, [c]), $(() => {
+    const a = t == null ? void 0 : t.current;
+    if (a)
+      return a.addEventListener("mousedown", u), a.addEventListener("mouseup", w), a.addEventListener("mouseleave", p), () => {
+        a.removeEventListener("mousedown", u), a.removeEventListener("mouseup", w), a.removeEventListener("mouseleave", p);
+      };
+  }, [t]);
+  const u = (a) => {
+    const y = t == null ? void 0 : t.current, v = y.getBoundingClientRect();
+    o(!0), d({
+      x: (a.clientX - v.left) / y.clientWidth * 100,
+      y: (a.clientY - v.top) / y.clientHeight * 100
+    });
+  }, p = (a) => {
+    o(!1);
+  }, w = (a) => {
+    o(!1);
+  };
+  return /* @__PURE__ */ i(z, { mode: "wait", children: (c || !c && !n) && /* @__PURE__ */ i(
+    U.div,
+    {
+      style: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: s.y + "%",
+        left: s.x + "%",
+        background: `color-mix(in srgb, var(--color-${e}) 12%, transparent)`,
+        pointerEvents: "none"
+      },
+      variants: r,
+      initial: "initial",
+      animate: "animate",
+      exit: { opacity: 0, transition: { duration: 0 } },
+      onAnimationComplete: () => l(!0),
+      className: "transform -translate-x-1/2 -translate-y-1/2"
+    }
+  ) });
+};
+function qe(e, t, r) {
+  var n = {}, l = n.noTrailing, c = l === void 0 ? !1 : l, o = n.noLeading, s = o === void 0 ? !1 : o, d = n.debounceMode, u = d === void 0 ? void 0 : d, p, w = !1, a = 0;
+  function y() {
+    p && clearTimeout(p);
+  }
+  function v(L) {
+    var E = L || {}, m = E.upcomingOnly, N = m === void 0 ? !1 : m;
+    y(), w = !N;
+  }
+  function b() {
+    for (var L = arguments.length, E = new Array(L), m = 0; m < L; m++)
+      E[m] = arguments[m];
+    var N = this, I = Date.now() - a;
+    if (w)
+      return;
+    function k() {
+      a = Date.now(), t.apply(N, E);
+    }
+    function C() {
+      p = void 0;
+    }
+    !s && u && !p && k(), y(), u === void 0 && I > e ? s ? (a = Date.now(), c || (p = setTimeout(u ? C : k, e))) : k() : c !== !0 && (p = setTimeout(u ? C : k, u === void 0 ? e - I : e));
+  }
+  return b.cancel = v, b;
+}
+const He = H(
+  "customScroll",
+  ({ orientation: e, draggable: t, isDragging: r }) => ({
+    customScroll: f(
+      "flex h-full w-full",
+      t && [
+        "[&::-webkit-scrollbar-track]:rounded-full",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        "[&::-webkit-scrollbar-thumb]:rounded-full",
+        {
+          "[&::-webkit-scrollbar-thumb]:bg-outline": r,
+          "[&::-webkit-scrollbar-thumb]:bg-transparent": !r
+        },
+        { "[&::-webkit-scrollbar]:h-2": e === "horizontal" },
+        { "[&::-webkit-scrollbar]:w-2": e === "vertical" }
+      ],
+      {
+        "overflow-y-scroll flex-col": e === "vertical",
+        "overflow-x-scroll  flex-row": e === "horizontal",
+        "cursor-grab": t && !r,
+        "cursor-grabbing": t && r
+      }
+    ),
+    track: f("overflow-hidden flex-none sticky", {
+      "left-0 h-full": e === "horizontal",
+      "top-0 w-full": e === "vertical"
+    })
+  })
+), pe = ({
+  children: e,
+  orientation: t = "vertical",
+  scrollSize: r,
+  onScroll: n,
+  className: l,
+  draggable: c = !1,
+  throttleDuration: o = 75
+}) => {
+  var V, X;
+  const s = O(null), d = O(null), [u, p] = S({
+    width: null,
+    height: null
+  });
+  $(() => {
+    if (!s.current) return;
+    const M = new ResizeObserver((F) => {
+      for (const K of F)
+        K.target === s.current && p({
+          width: K.contentRect.width,
+          height: K.contentRect.height
+          // On observe aussi la hauteur maintenant
+        });
+    });
+    return M.observe(s.current), () => {
+      M.disconnect();
+    };
+  }, [s]);
+  const w = O(null), a = O(null), y = () => {
+    const M = d.current;
+    return M ? {
+      width: r ?? M.scrollWidth,
+      height: r ?? M.scrollHeight
+    } : null;
+  }, v = () => {
+    const M = s.current;
+    return M ? {
+      width: M.clientWidth,
+      height: M.clientHeight
+      // Correction ici pour retourner la bonne hauteur
+    } : null;
+  }, { scrollYProgress: b, scrollXProgress: L } = Ne({
+    container: s
+  }), E = O(null);
+  E.current || (E.current = qe(
+    o,
+    (M, F) => {
+      !a.current || !w.current || n && (t === "horizontal" && F === "x" && n({
+        scrollProgress: M,
+        scroll: M * w.current.width,
+        scrollTotal: w.current.width,
+        scrollVisible: a.current.width
+      }), t === "vertical" && F === "y" && n({
+        scrollProgress: M,
+        scroll: M * w.current.height,
+        scrollTotal: w.current.height,
+        scrollVisible: a.current.height
+      }));
+    }
+  ));
+  const m = (M, F) => {
+    E.current && E.current(M, F);
+  };
+  $(() => {
+    u.width && m(L.get(), "x"), u.height && m(b.get(), "y");
+  }, [u]), oe(L, "change", (M) => {
+    m(M, "x");
+  }), oe(b, "change", (M) => {
+    m(M, "y");
+  });
+  const [N, I] = S(!1);
+  ie(() => {
+    N || !a.current || !w.current || !n || (n({
+      scrollProgress: 0,
+      scroll: 0,
+      scrollTotal: t == "vertical" ? w.current.height : w.current.width,
+      scrollVisible: t == "vertical" ? a.current.height : a.current.width
+    }), I(!0));
+  }, [a, w, n]), w.current = y(), a.current = v();
+  const [k, C] = S(!1), B = He({
+    isDragging: k,
+    children: e,
+    className: l,
+    onScroll: n,
+    orientation: t,
+    scrollSize: r,
+    draggable: c,
+    throttleDuration: o
+  }), [D, R] = S(0), [h, j] = S(0), A = (M) => {
+    if (!c) return;
+    const F = s.current;
+    if (!F || D == null) return;
+    const Z = (M.pageX - F.offsetLeft - D) * 1.5;
+    F.scrollLeft = h - Z;
+  }, q = (M) => {
+    const F = s.current;
+    F && (C(!0), R(M.pageX - F.offsetLeft), j(F.scrollLeft));
+  }, Y = (M) => {
+    k && (M.preventDefault(), A(M));
+  }, G = () => {
+    C(!1);
+  }, Q = () => {
+    C(!1);
+  }, x = (M) => {
+    M.preventDefault();
+  }, g = O(null);
+  return $(() => () => {
+    g.current && clearTimeout(g.current);
+  }, []), /* @__PURE__ */ P(
+    "div",
+    {
+      className: B.customScroll,
+      ref: s,
+      onMouseDown: q,
+      onMouseMove: Y,
+      onMouseUp: G,
+      onMouseLeave: Q,
+      onDragStart: x,
+      onScroll: (M) => {
+        k || (R(null), C(!0), g.current && clearTimeout(g.current), g.current = setTimeout(() => {
+          C(!1);
+        }, 1e3));
+      },
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            ref: d,
+            style: t === "vertical" ? { height: ((V = a == null ? void 0 : a.current) == null ? void 0 : V.height) ?? "100%" } : { width: ((X = a == null ? void 0 : a.current) == null ? void 0 : X.width) ?? "100%" },
+            className: B.track,
+            children: e
+          }
+        ),
+        a.current && w.current && /* @__PURE__ */ P(te, { children: [
+          t === "vertical" && w.current.height > a.current.height && /* @__PURE__ */ i(
+            U.div,
+            {
+              className: "flex-none",
+              style: {
+                height: w.current.height - a.current.height
+              }
+            }
+          ),
+          t === "horizontal" && w.current.width > a.current.width && /* @__PURE__ */ i(
+            U.div,
+            {
+              className: "flex-none",
+              style: {
+                width: w.current.width - a.current.width
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, mt = ({
+  children: e,
+  transition: t = ".5s",
+  orientation: r = "vertical",
+  throttleDuration: n = 25,
+  ...l
+}) => {
+  const [c, o] = S(null), s = ue((c == null ? void 0 : c.scrollProgress) ?? 0), d = re(
+    s,
+    [0, 1],
+    [0, 1 - ((c == null ? void 0 : c.scrollVisible) ?? 0) / ((c == null ? void 0 : c.scrollTotal) ?? 0)]
+  ), u = re(
+    d,
+    (a) => `${-a * 100}%`
+  ), p = (a) => {
+    s.set(a.scrollProgress), a.scrollTotal > 0 && o(a);
+  }, w = O(null);
+  return oe(u, "change", (a) => {
+    const y = performance.now();
+    if (w.current !== null) {
+      const v = y - w.current;
+      console.log(`Delta temps : ${v} ms`);
+    }
+    w.current = y, console.log(a);
+  }), /* @__PURE__ */ i(
+    pe,
+    {
+      onScroll: p,
+      throttleDuration: n,
+      ...l,
+      children: /* @__PURE__ */ i(
+        U.div,
+        {
+          className: f("transition-transform  ease-out", {
+            "w-fit h-full": r === "horizontal",
+            "h-fit w-full": r === "vertical"
+          }),
+          style: {
+            transitionDuration: t,
+            ...r == "vertical" ? { y: u } : { x: u }
+          },
+          children: e
+        }
+      )
+    }
+  );
+}, _e = ({
+  targetRef: e,
+  children: t
+}) => {
+  const [r, n] = S(null), l = O(null), c = () => {
+    const o = e.current;
+    if (!o) return;
+    const s = o.getBoundingClientRect();
+    console.log(o), n({
+      position: "fixed",
+      top: s.top,
+      left: s.left,
+      width: s.width,
+      height: s.height,
+      pointerEvents: "none",
+      // si le wrapper ne doit pas capter les events
+      zIndex: 999
+      // personnalise si besoin
+    });
+  };
+  return $(() => {
+    const o = e.current;
+    if (o)
+      return c(), window.addEventListener("scroll", c, !0), window.addEventListener("resize", c), l.current = new ResizeObserver(c), l.current.observe(o), () => {
+        var s;
+        window.removeEventListener("scroll", c, !0), window.removeEventListener("resize", c), (s = l.current) == null || s.disconnect();
+      };
+  }, [e]), r ? Le(/* @__PURE__ */ i("div", { style: r, children: t }), document.body) : null;
+}, Ae = ({
+  variant: e = "filled",
+  disabled: t = !1,
+  icon: r,
+  href: n,
+  label: l,
+  className: c,
+  iconPosition: o = "left",
+  loading: s = !1,
+  shape: d = "rounded",
+  onClick: u,
+  ref: p,
+  size: w = "medium",
+  allowShapeTransformation: a = !0,
+  transition: y,
+  ...v
+}) => {
+  const b = n ? "a" : "button", L = O(null), E = p || L, m = Re({
+    allowShapeTransformation: a,
+    size: w,
+    shape: d,
+    href: n,
+    disabled: t,
+    icon: r,
+    iconPosition: o,
+    label: l,
+    loading: s,
+    variant: e,
+    transition: y,
+    className: c
+  }), N = r ? /* @__PURE__ */ i(J, { icon: r, className: m.icon }) : /* @__PURE__ */ i(te, {});
+  return y = { duration: 0.3, ...y }, /* @__PURE__ */ i(
+    b,
+    {
+      ref: E,
+      href: n,
+      className: m.button,
+      ...v,
+      onClick: (I) => {
+        t ? I.preventDefault() : u && u(I);
+      },
+      disabled: t,
+      children: /* @__PURE__ */ P(
+        "div",
+        {
+          className: m.container,
+          style: { transition: y.duration + "s" },
+          children: [
+            /* @__PURE__ */ i("div", { className: m.stateLayer, children: !t && /* @__PURE__ */ i(
+              ne,
+              {
+                colorName: e === "elevated" && "primary" || e === "filled" && "on-primary" || e === "filledTonal" && "on-secondary-container" || e === "outlined" && "primary" || e === "text" && "primary" || "",
+                triggerRef: E
+              }
+            ) }),
+            o === "left" && N,
+            s && /* @__PURE__ */ i(
+              "div",
+              {
+                className: "!absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2",
+                children: /* @__PURE__ */ i(
+                  Ge,
+                  {
+                    className: () => ({
+                      progressIndicator: "h-6 w-6",
+                      activeIndicator: f(
+                        {
+                          "!stroke-primary": e === "elevated" && !t,
+                          "!stroke-on-surface/[38%]": e === "elevated" && t
+                        },
+                        {
+                          "!stroke-on-primary": e === "filled" && !t,
+                          "!stroke-on-surface/[38%]": e === "filled" && t
+                        },
+                        {
+                          "!stroke-on-secondary-container": e === "filledTonal" && !t,
+                          "!stroke-on-surface/[38%]": e === "filledTonal" && t
+                        },
+                        {
+                          "!stroke-primary": e === "outlined" && !t,
+                          "!stroke-on-surface/[38%]": e === "outlined" && t
+                        },
+                        {
+                          "!stroke-primary": e === "text" && !t,
+                          "!stroke-on-surface/[38%]": e === "text" && t
+                        }
+                      )
+                    }),
+                    variant: "circular-indeterminate"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ i("span", { className: m.label, children: l }),
+            o === "right" && N
+          ]
+        }
+      )
+    }
+  );
+}, pt = ({
+  variant: e = "outlined",
+  className: t,
+  children: r,
+  isInteractive: n = !1,
+  ref: l,
+  ...c
+}) => {
+  const o = Se({ className: t, isInteractive: n, variant: e }), s = O(null), d = l || s;
+  return /* @__PURE__ */ P("div", { ...c, ref: d, className: o.card, children: [
+    /* @__PURE__ */ i("div", { className: o.stateLayer, children: n && /* @__PURE__ */ i(ne, { colorName: "on-surface", triggerRef: d }) }),
+    r
+  ] });
+}, Ye = (e, t, r = [0, 1]) => {
+  const [n, l] = t, [c, o] = r, d = (Math.max(n, Math.min(e, l)) - n) / (l - n);
+  return c + d * (o - c);
+}, Ze = ({
+  className: e,
+  children: t,
+  width: r = 1,
+  index: n = 0,
+  ref: l,
+  ...c
+}) => {
+  const o = O(null), s = l || o, d = Ce({
+    className: e,
+    index: n,
+    width: r,
+    children: t
+  });
+  return /* @__PURE__ */ i(
+    U.div,
+    {
+      ref: s,
+      animate: { width: r + "px" },
+      transition: {
+        duration: 0.5,
+        ease: "linear"
+      },
+      className: d.carouselItem,
+      ...c,
+      children: t
+    }
+  );
+}, ht = ({
+  variant: e = "hero",
+  className: t,
+  children: r,
+  ref: n,
+  marginPourcent: l = 0,
+  inputRange: c = [0.21, 0.65],
+  outputRange: o = [42, 300],
+  gap: s = 8,
+  onChange: d,
+  scrollSensitivity: u = 1.25,
+  ...p
+}) => {
+  var G, Q;
+  const w = O(null), a = n || w, y = Ve({
+    className: t,
+    children: r,
+    variant: e,
+    inputRange: c,
+    outputRange: o,
+    marginPourcent: l,
+    onChange: d,
+    gap: s,
+    scrollSensitivity: u
+  }), v = W.Children.toArray(r).filter(
+    (x) => W.isValidElement(x) && x.type === Ze
+  ), b = O(null), [L, E] = S([]), [m, N] = S(null), I = () => {
+    var F;
+    if (!b.current || !a.current || !m) return [];
+    const { scrollVisible: x, scrollProgress: g } = m;
+    function V(K, Z) {
+      return K.map(
+        (T) => (T - Z) / Math.abs(K[1] - K[0])
+      );
+    }
+    let X = v.map((K, Z) => {
+      if (!k[Z].current || !b.current) return 0;
+      let ee = Z / (v.length - 1);
+      return ee > 1 && (ee = 1), ee < 0 && (ee = 0), ee;
+    });
+    X = V(X, g);
+    let M = ((((F = a.current) == null ? void 0 : F.clientWidth) ?? x) - (o[0] + s)) / (o[1] + s);
+    return X.map((K, Z) => ({ value: Math.abs(K), originalIndex: Z })).sort((K, Z) => K.value - Z.value).forEach((K, Z) => {
+      Z === 0 && B(K.originalIndex);
+      let T = Ye(M, [0, 1], [0, o[1]]);
+      T < o[0] && (T = o[0]), M--, X[K.originalIndex] = T;
+    }), X;
+  }, k = O([]).current, [C, B] = S(0);
+  $(() => {
+    d && d(C);
+  }, [C]), k.length !== v.length && v.forEach((x, g) => {
+    k[g] || (k[g] = W.createRef());
+  });
+  const D = v.map((x, g) => W.cloneElement(
+    x,
+    {
+      width: L[g],
+      ref: k[g],
+      key: g,
+      index: g
+    }
+  )), R = ue((m == null ? void 0 : m.scrollProgress) ?? 0), h = re(
+    R,
+    [0, 1],
+    [
+      0,
+      1 - (((G = a.current) == null ? void 0 : G.clientWidth) ?? 0) / (((Q = b == null ? void 0 : b.current) == null ? void 0 : Q.clientWidth) ?? 0)
+    ]
+  ), j = re(
+    h,
+    (x) => `${-x * 100}%`
+  ), A = (x) => {
+    x.scrollTotal > 0 && N(x);
+  };
+  $(() => {
+    const x = I();
+    E(x);
+  }, [m]);
+  const [q, Y] = S(0);
+  return ie(() => {
+    let x = o[1];
+    m && x > m.scrollVisible && (x = m.scrollVisible);
+    const g = (x + s) * D.length / u;
+    Y(g);
+  }, [a, k, m]), /* @__PURE__ */ i("div", { className: y.carousel, ref: a, ...p, children: /* @__PURE__ */ i(
+    pe,
+    {
+      draggable: !0,
+      orientation: "horizontal",
+      onScroll: A,
+      scrollSize: q,
+      children: /* @__PURE__ */ i(
+        U.div,
+        {
+          className: y.track,
+          ref: b,
+          style: {
+            transitionDuration: "0.5s",
+            transitionTimingFunction: "ease-out",
+            gap: `${s}px`,
+            x: j
+          },
+          children: D
+        }
+      )
+    }
+  ) });
+}, yt = ({
+  orientation: e = "horizontal",
+  className: t,
+  ...r
+}) => {
+  const n = Be({ orientation: e, className: t });
+  return /* @__PURE__ */ i("hr", { className: n.divider, ...r });
+}, _ = [];
+for (let e = 0; e < 256; ++e)
+  _.push((e + 256).toString(16).slice(1));
+function Je(e, t = 0) {
+  return (_[e[t + 0]] + _[e[t + 1]] + _[e[t + 2]] + _[e[t + 3]] + "-" + _[e[t + 4]] + _[e[t + 5]] + "-" + _[e[t + 6]] + _[e[t + 7]] + "-" + _[e[t + 8]] + _[e[t + 9]] + "-" + _[e[t + 10]] + _[e[t + 11]] + _[e[t + 12]] + _[e[t + 13]] + _[e[t + 14]] + _[e[t + 15]]).toLowerCase();
+}
+let le;
+const Qe = new Uint8Array(16);
+function ze() {
+  if (!le) {
+    if (typeof crypto > "u" || !crypto.getRandomValues)
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    le = crypto.getRandomValues.bind(crypto);
+  }
+  return le(Qe);
+}
+const Te = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), se = { randomUUID: Te };
+function ae(e, t, r) {
+  var l;
+  if (se.randomUUID && !e)
+    return se.randomUUID();
+  e = e || {};
+  const n = e.random ?? ((l = e.rng) == null ? void 0 : l.call(e)) ?? ze();
+  if (n.length < 16)
+    throw new Error("Random bytes length must be >= 16");
+  return n[6] = n[6] & 15 | 64, n[8] = n[8] & 63 | 128, Je(n);
+}
+const he = ({
+  variant: e = "plain",
+  buttons: t,
+  className: r,
+  children: n,
+  title: l,
+  text: c,
+  position: o,
+  targetRef: s,
+  ref: d,
+  trigger: u = ["hover", "focus"],
+  ...p
+}) => {
+  if (!n && !s)
+    throw new Error("ToolTip must have a child or a targetRef");
+  Array.isArray(u) || (u = [u]), t && !Array.isArray(t) && (t = [t]);
+  const w = O(null), a = s || w, [y, v] = S(null), [b] = S(ae()), [L, E] = S(!1), m = O(null);
+  $(() => {
+    const h = (j) => {
+      v(j.detail);
+    };
+    return document.addEventListener("tooltip-update", h), () => {
+      document.removeEventListener(
+        "tooltip-update",
+        h
+      );
+    };
+  }, []), $(() => {
+    m.current && clearTimeout(m.current), y ? E(y === b) : m.current = setTimeout(() => {
+      E(!1);
+    }, 1200);
+  }, [y, b]);
+  const N = () => {
+    if (u.includes("hover")) {
+      const h = new CustomEvent("tooltip-update", { detail: b });
+      document.dispatchEvent(h);
+    }
+  }, I = () => {
+    if (u.includes("hover")) {
+      const h = new CustomEvent("tooltip-update", { detail: null });
+      document.dispatchEvent(h);
+    }
+  }, k = () => {
+    if (u.includes("click")) {
+      const h = new CustomEvent("tooltip-update", {
+        detail: L ? null : b
+      });
+      document.dispatchEvent(h);
+    }
+  }, C = () => {
+    if (u.includes("focus")) {
+      const h = new CustomEvent("tooltip-update", { detail: b });
+      document.dispatchEvent(h);
+    }
+  }, B = () => {
+    if (u.includes("focus")) {
+      const h = new CustomEvent("tooltip-update", { detail: null });
+      document.dispatchEvent(h);
+    }
+  };
+  $(() => {
+    if (a != null && a.current) {
+      const h = a.current;
+      return h.addEventListener("mouseenter", N), h.addEventListener("mouseleave", I), h.addEventListener("click", k), h.addEventListener("focus", C), h.addEventListener("blur", B), () => {
+        h.removeEventListener("mouseenter", N), h.removeEventListener("mouseleave", I), h.removeEventListener("click", k), h.removeEventListener("focus", C), h.removeEventListener("blur", B);
+      };
+    }
+  }, [a, u, b, L]);
+  const D = !s && we(n) ? ve(n, { ref: w }) : n;
+  if (!o && typeof window < "u" && a != null && a.current && !o) {
+    const h = a.current.getBoundingClientRect(), j = window.innerWidth, A = window.innerHeight, q = h.left / j, Y = h.top / A;
+    e === "plain" ? q < 1 / 3 ? o = "right" : q > 2 / 3 ? o = "left" : o = Y > 0.5 ? "top" : "bottom" : q < 1 / 2 && Y < 1 / 2 ? o = "bottom-right" : q > 1 / 2 && Y < 1 / 2 ? o = "bottom-left" : q > 1 / 2 && Y > 1 / 2 ? o = "top-left" : q < 1 / 2 && Y > 1 / 2 && (o = "top-right");
+  }
+  const R = Ke({
+    variant: e,
+    buttons: t,
+    className: r,
+    title: l,
+    text: c,
+    position: o,
+    trigger: u,
+    targetRef: s,
+    children: n
+  });
+  return /* @__PURE__ */ P(te, { children: [
+    D,
+    /* @__PURE__ */ i(z, { children: L && /* @__PURE__ */ i(_e, { targetRef: a, children: /* @__PURE__ */ i(
+      U.div,
+      {
+        initial: { opacity: y ? 1 : 0 },
+        animate: { opacity: 1 },
+        transition: { duration: y ? 0 : 0.3 },
+        exit: { opacity: y ? 1 : 0 },
+        className: R.toolTip,
+        ...p,
+        onMouseEnter: N,
+        onMouseLeave: I,
+        children: /* @__PURE__ */ P(
+          U.div,
+          {
+            className: R.container,
+            layoutId: "tool-tip",
+            transition: {
+              type: "spring",
+              stiffness: 200,
+              damping: 20
+            },
+            children: [
+              l && /* @__PURE__ */ i("div", { className: R.subHead, children: l }),
+              /* @__PURE__ */ i("div", { className: R.supportingText, children: c }),
+              t && /* @__PURE__ */ i("div", { className: R.actions, children: Array.isArray(t) && t.map((h, j) => /* @__PURE__ */ i(
+                Ae,
+                {
+                  size: "small",
+                  variant: "text",
+                  ...h
+                },
+                j
+              )) })
+            ]
+          }
+        )
+      }
+    ) }) })
+  ] });
+}, ce = ({
+  className: e,
+  label: t,
+  variant: r = "primary",
+  size: n = "medium",
+  href: l,
+  type: c,
+  icon: o,
+  isExtended: s = !1,
+  ref: d,
+  transition: u,
+  ...p
+}) => {
+  const w = l ? "a" : "button", a = De({
+    href: l,
+    icon: o,
+    isExtended: s,
+    label: t,
+    size: n,
+    variant: r,
+    className: e,
+    transition: u
+  });
+  u = { duration: 0.3, ...u };
+  const y = O(null), v = d || y, b = {
+    visible: {
+      width: "auto",
+      marginLeft: 12,
+      opacity: 1,
+      transition: {
+        ...u,
+        opacity: {
+          duration: u.duration / 2,
+          delay: u.duration - u.duration / 2
+        }
+      }
+    },
+    hidden: {
+      width: 0,
+      marginLeft: 0,
+      opacity: 0,
+      transition: {
+        ...u,
+        marginLeft: {
+          duration: u.duration / 2,
+          delay: u.duration - u.duration / 2
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ P(
+    w,
+    {
+      ...p,
+      ref: v,
+      href: l,
+      "aria-label": s ? void 0 : t,
+      className: a.fab,
+      children: [
+        /* @__PURE__ */ i(
+          he,
+          {
+            trigger: s ? null : void 0,
+            text: t,
+            targetRef: v
+          }
+        ),
+        /* @__PURE__ */ i("span", { className: a.stateLayer, children: /* @__PURE__ */ i(
+          ne,
+          {
+            colorName: f({
+              primary: r == "surface",
+              "on-primary-container": r == "primary",
+              "on-secondary-container": r == "secondary",
+              "on-tertiary-container": r == "tertiary"
+            }),
+            triggerRef: v
+          }
+        ) }),
+        /* @__PURE__ */ i(J, { icon: o, className: a.icon }),
+        /* @__PURE__ */ i(z, { children: s && /* @__PURE__ */ i(
+          U.span,
+          {
+            variants: b,
+            initial: "hidden",
+            animate: "visible",
+            exit: "hidden",
+            className: a.label,
+            children: t
+          }
+        ) })
+      ]
+    }
+  );
+}, ye = ({
+  variant: e = "standard",
+  href: t,
+  disabled: r = !1,
+  type: n = "button",
+  title: l,
+  arialLabel: c,
+  onToggle: o,
+  activated: s = !1,
+  onClick: d,
+  icon: u,
+  size: p = "medium",
+  iconSelected: w,
+  className: a,
+  ref: y,
+  width: v = "default",
+  shape: b = "rounded",
+  allowShapeTransformation: L = !0,
+  transition: E,
+  ...m
+}) => {
+  l || (l = c);
+  const [N, I] = W.useState(s);
+  let k;
+  o ? o && (k = (h) => {
+    r && h.preventDefault(), I(!N), o(!!N);
+  }, u = N && w || u) : k = (h) => {
+    r && h.preventDefault(), d && d(h);
+  }, $(() => {
+    I(s);
+  }, [s]);
+  const C = t ? "a" : "button", B = $e({
+    transition: E,
+    shape: b,
+    allowShapeTransformation: L,
+    width: v,
+    href: t,
+    activated: s,
+    arialLabel: c,
+    iconSelected: w,
+    isActive: N,
+    onToggle: o,
+    disabled: r,
+    icon: u,
+    variant: e,
+    className: a,
+    size: p,
+    ...m
+  }), D = O(null), R = y || D;
+  return E = { duration: 0.3, ...E }, /* @__PURE__ */ P(
+    C,
+    {
+      disabled: r,
+      href: t,
+      className: B.iconButton,
+      "aria-label": c,
+      ...m,
+      title: void 0,
+      onClick: k,
+      ref: R,
+      children: [
+        /* @__PURE__ */ i(
+          he,
+          {
+            targetRef: R,
+            trigger: r ? null : void 0,
+            text: l
+          }
+        ),
+        /* @__PURE__ */ P(
+          "div",
+          {
+            style: { transition: E.duration + "s" },
+            className: B.container,
+            children: [
+              /* @__PURE__ */ i("div", { className: B.stateLayer, children: !r && /* @__PURE__ */ i(
+                ne,
+                {
+                  colorName: f(
+                    e === "standard" && {
+                      "on-surface-variant": !N,
+                      primary: N
+                    },
+                    e === "filled" && {
+                      primary: !N && !!o,
+                      "inverse-on-surface": N || !o
+                    },
+                    e === "tonal" && {
+                      "on-surface-variant": !N && !!o,
+                      "on-secondary-container": N || !o
+                    },
+                    e === "outlined" && {
+                      "on-surface-variant": !N,
+                      "on-primary": N
+                    }
+                  ),
+                  triggerRef: R
+                }
+              ) }),
+              u && /* @__PURE__ */ i(J, { icon: u, className: B.icon })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, gt = ({
+  className: e,
+  valueFormatter: t,
+  step: r = 10,
+  name: n,
+  value: l = 0,
+  min: c = 0,
+  max: o = 100,
+  marks: s = [
+    {
+      value: 0,
+      label: "0"
+    },
+    {
+      value: 100,
+      label: "100"
+    }
+  ],
+  ref: d,
+  onChange: u,
+  ...p
+}) => {
+  const w = (x) => {
+    const g = y(), V = a();
+    return x === 1 / 0 ? 100 : x === -1 / 0 ? 0 : (x - g) / (V - g) * 100;
+  }, a = (x = !1) => x ? o : o == 1 / 0 ? s[(s == null ? void 0 : s.length) - 1].value : o, y = (x = !1) => x ? c : c == -1 / 0 ? s[0].value : c, v = (x) => {
+    const g = y(!1);
+    return (a(!1) - g) * x / 100 + g;
+  }, [b, L] = S(!1), E = O(null), m = d || E, [N, I] = S(l), [k, C] = S(w(l)), [B, D] = S(!1), R = (x) => {
+    D(!0), L(!0), A(x);
+  }, h = () => {
+    D(!1), L(!1);
+  };
+  $(() => (B ? (window.addEventListener("mouseup", h), window.addEventListener("mousemove", A), window.addEventListener("touchend", h), window.addEventListener("touchmove", A)) : (window.removeEventListener("mouseup", h), window.removeEventListener("mousemove", A), window.removeEventListener("touchend", h), window.removeEventListener("touchmove", A)), () => {
+    window.removeEventListener("mouseup", h), window.removeEventListener("mousemove", A), window.removeEventListener("touchend", h), window.removeEventListener("touchmove", A);
+  }), [B]);
+  const j = Pe({
+    className: e,
+    isChanging: b,
+    marks: s,
+    max: o,
+    min: c,
+    name: n,
+    step: r,
+    value: N,
+    valueFormatter: t,
+    onChange: u
+  }), A = (x) => {
+    const g = m == null ? void 0 : m.current;
+    if (g) {
+      const V = g.getBoundingClientRect().left, M = ((x.type === "touchmove" || x.type === "touchstart" ? x.touches[0].clientX : x.clientX) - V) / g.offsetWidth * 100;
+      q({ pourcent: M });
+    }
+  }, q = ({
+    pourcent: x,
+    value: g
+  }) => {
+    if (x) {
+      if (x >= 100) {
+        I(a(!0)), C(100);
+        return;
+      }
+      if (x <= 0) {
+        I(y(!0)), C(0);
+        return;
+      }
+      g = v(x), g == y() && (g = y(!0)), g == a() && (g = a(!0));
+    } else if (g != null) {
+      if (g >= a()) {
+        I(a(!0)), C(100);
+        return;
+      }
+      if (g <= y()) {
+        I(y(!0)), C(0);
+        return;
+      }
+      x = w(g);
+    } else
+      return;
+    r != null ? g = Math.round((g - y()) / r) * r + y() : s && (g = s.reduce((V, X, M) => {
+      let F = X.value === 1 / 0 ? a() : X.value === -1 / 0 ? y() : X.value, K = V.value === 1 / 0 ? a() : V.value === -1 / 0 ? y() : V.value;
+      return F = Math.abs(F - g), K = Math.abs(K - g), F < K ? X : V;
+    }).value), g >= a() && (g = a(!0)), g <= y() && (g = y(!0)), x = w(g), I(g), C(x), u && u(g);
+  }, [Y, G] = S(0);
+  return $(() => {
+    const x = () => {
+      m.current && G(m.current.offsetWidth);
+    };
+    return x(), window.addEventListener("resize", x), () => {
+      window.removeEventListener("resize", x);
+    };
+  }, []), /* @__PURE__ */ P(
+    "div",
+    {
+      tabIndex: 0,
+      onKeyDown: (x) => {
+        switch (x.key) {
+          case "ArrowRight":
+            if (r)
+              q({ value: N + r });
+            else if (s) {
+              const g = s.find((V) => V.value > N);
+              g && q({ value: g.value });
+            }
+            break;
+          case "ArrowLeft":
+            if (r)
+              q({ value: N - r });
+            else if (s) {
+              const g = s.slice(0).reverse().find((V, X, M) => N === 1 / 0 ? X === 1 : V.value < N);
+              g && q({ value: g.value });
+            }
+            break;
+          default:
+            return;
+        }
+      },
+      role: "slider",
+      "aria-valuemin": y(!0),
+      "aria-valuemax": a(!0),
+      "aria-valuenow": N,
+      "aria-valuetext": N.toString(),
+      className: j.slider,
+      onMouseDown: R,
+      onClick: A,
+      ref: m,
+      onTouchStart: R,
+      onDragStart: (x) => x.preventDefault(),
+      ...p,
+      children: [
+        /* @__PURE__ */ i("input", { type: "hidden", name: n, value: N }),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: j.activeTrack,
+            style: { flex: k / 100 }
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: j.handle, children: /* @__PURE__ */ i(z, { children: b && /* @__PURE__ */ i(
+          U.div,
+          {
+            className: j.valueIndicator,
+            initial: "hidden",
+            animate: "visible",
+            exit: "hidden",
+            style: {
+              translate: "-50%",
+              transformOrigin: "center bottom",
+              textWrap: "nowrap"
+            },
+            variants: {
+              visible: { opacity: 1, scale: 1 },
+              hidden: { opacity: 1, scale: 0 }
+            },
+            transition: { duration: 0.1 },
+            children: t ? t(N) : N
+          }
+        ) }) }),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: j.inactiveTrack,
+            style: { flex: 1 - k / 100 }
+          }
+        ),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: "w-[calc(100%-12px)] h-full absolute -translate-x-1/2 transform left-1/2",
+            children: s && s.map((x, g) => {
+              let V = null;
+              const X = (b ? 9 : 10) / Y * 100, M = w(x.value);
+              return M <= k - X ? V = !0 : M >= k + X && (V = !1), /* @__PURE__ */ i(
+                "div",
+                {
+                  className: f(j.dot, {
+                    "bg-primary-container": V != null && V,
+                    "bg-primary": V != null && !V
+                  }),
+                  style: {
+                    left: `${w(x.value)}%`
+                  }
+                },
+                g
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+const et = {
+  prefix: "fas",
+  iconName: "bars",
+  icon: [448, 512, ["navicon"], "f0c9", "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]
+}, tt = {
+  prefix: "fas",
+  iconName: "circle-exclamation",
+  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"]
+}, ge = {
+  prefix: "fas",
+  iconName: "xmark",
+  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"]
+}, xt = ({
+  supportingText: e,
+  className: t,
+  duration: r,
+  closeIcon: n = ge,
+  onClose: l,
+  ...c
+}) => {
+  const [o, s] = S(!0), d = Ue({
+    className: t,
+    closeIcon: n,
+    duration: r,
+    isVisible: o,
+    onClose: l,
+    supportingText: e
+  });
+  $(() => {
+    r && setTimeout(() => {
+      u();
+    }, r);
+  }, [r]);
+  const u = () => {
+    s(!1), l == null || l();
+  };
+  return /* @__PURE__ */ i(z, { children: o && /* @__PURE__ */ i(
+    U.div,
+    {
+      initial: { height: 0 },
+      animate: { height: "auto" },
+      exit: { height: 0 },
+      transition: { duration: 0.1 },
+      className: d.snackbar,
+      ...c,
+      children: /* @__PURE__ */ P("div", { className: d.container, children: [
+        /* @__PURE__ */ i("p", { className: d.supportingText, children: e }),
+        /* @__PURE__ */ i(
+          ye,
+          {
+            onClick: () => u(),
+            className: d.icon,
+            icon: n,
+            arialLabel: "close the snackbar"
+          }
+        )
+      ] })
+    }
+  ) });
+}, wt = ({
+  selected: e = !1,
+  className: t,
+  activeIcon: r,
+  disabled: n = !1,
+  inactiveIcon: l,
+  onChange: c,
+  onClick: o,
+  onKeyDown: s,
+  ref: d,
+  ...u
+}) => {
+  const [p, w] = S(e), a = (m) => {
+    n || (v(), o && o(m));
+  }, y = (m) => {
+    n || ((m.key === " " || m.key === "Enter") && (m.preventDefault(), v()), s && s(m));
+  }, v = () => {
+    w(!p), c == null || c(!p);
+  }, b = je({
+    className: t,
+    isSelected: p,
+    activeIcon: r,
+    inactiveIcon: l,
+    disabled: n,
+    selected: p,
+    onChange: c
+  }), L = O(null), E = d || L;
+  return /* @__PURE__ */ P(
+    U.div,
+    {
+      role: "switch",
+      "aria-checked": p,
+      tabIndex: n ? -1 : 0,
+      onKeyDown: y,
+      onClick: a,
+      ref: E,
+      className: b.switch,
+      ...u,
+      children: [
+        /* @__PURE__ */ i("input", { type: "hidden", value: p ? "1" : "0" }),
+        /* @__PURE__ */ P(
+          U.div,
+          {
+            layout: !0,
+            style: { translate: p ? "50%" : "-50%" },
+            transition: {
+              type: "spring",
+              stiffness: 700,
+              damping: 30
+            },
+            className: b.handleContainer,
+            children: [
+              /* @__PURE__ */ i("div", { className: b.handle, children: (p ? r : l) && /* @__PURE__ */ i(
+                J,
+                {
+                  className: b.icon,
+                  icon: p ? r : l
+                }
+              ) }),
+              /* @__PURE__ */ i("div", { className: b.handleStateLayer })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, nt = ({
+  className: e,
+  onClick: t,
+  label: r,
+  variant: n = "primary",
+  href: l,
+  icon: c,
+  selectedTab: o,
+  setSelectedTab: s,
+  tabsId: d,
+  index: u,
+  onTabSelected: p,
+  scrollable: w = !1,
+  selected: a = !1,
+  ref: y,
+  ...v
+}) => {
+  const b = O(null), L = y || b, [E, m] = S(a);
+  $(() => {
+    a && o == null ? m(!0) : m(o == u && u != null);
+  }, [o]), $(() => {
+    o == u && p && p({
+      ref: L,
+      index: u || 0,
+      label: r,
+      icon: c
+    });
+  }, [o]);
+  const N = l ? "a" : "button", I = (C) => {
+    s && s(u ?? null), t && t(C);
+  }, k = Oe({
+    className: e,
+    onTabSelected: p,
+    scrollable: w,
+    selectedTab: o,
+    index: u,
+    tabsId: d,
+    selected: E,
+    variant: n,
+    icon: c,
+    label: r,
+    isSelected: E,
+    setSelectedTab: s,
+    href: l
+  });
+  return /* @__PURE__ */ P(
+    N,
+    {
+      ...v,
+      role: "tab",
+      "aria-selected": E,
+      ref: L,
+      href: l,
+      className: k.tab,
+      onClick: I,
+      ...v,
+      children: [
+        /* @__PURE__ */ i("span", { className: k.stateLayer, children: /* @__PURE__ */ i(
+          ne,
+          {
+            colorName: n === "primary" && E ? "primary" : "on-surface",
+            triggerRef: L
+          }
+        ) }),
+        /* @__PURE__ */ P("span", { className: k.content, children: [
+          c && /* @__PURE__ */ i(J, { icon: c, className: k.icon }),
+          /* @__PURE__ */ i("span", { className: k.label, children: r }),
+          E && /* @__PURE__ */ i(
+            U.span,
+            {
+              layoutId: `underline-${d}`,
+              className: k.underline,
+              transition: { duration: 0.3 }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, vt = ({
+  variant: e = "primary",
+  onTabSelected: t,
+  children: r,
+  className: n,
+  selectedTab: l,
+  setSelectedTab: c,
+  scrollable: o = !1
+}) => {
+  const [s, d] = S(
+    null
+  );
+  let u;
+  l == 0 || l != null ? u = l : u = s;
+  const p = c || d, w = W.Children.toArray(r).filter(
+    (L) => W.isValidElement(L) && L.type === nt
+  ), a = W.useRef(null), y = (L) => {
+    if (t == null || t(L), o) {
+      const E = a.current, m = L.ref.current;
+      if (E && m) {
+        const N = m.offsetLeft + m.offsetWidth / 2 - E.offsetWidth / 2;
+        E.scrollTo({ left: N, behavior: "smooth" });
+      }
+    }
+  }, v = be(() => ae(), []), b = Xe({
+    children: r,
+    onTabSelected: t,
+    scrollable: o,
+    selectedTab: u,
+    setSelectedTab: p,
+    className: n,
+    variant: e
+  });
+  return /* @__PURE__ */ i("div", { ref: a, role: "tablist", className: b.tabs, children: w.map((L, E) => W.cloneElement(L, {
+    key: E,
+    index: E,
+    variant: e,
+    selectedTab: u,
+    setSelectedTab: p,
+    tabsId: v,
+    onTabSelected: y,
+    scrollable: o
+  })) });
+}, bt = ({
+  variant: e = "filled",
+  disabled: t = !1,
+  errorText: r,
+  placeholder: n,
+  suffix: l,
+  name: c,
+  label: o,
+  className: s,
+  supportingText: d,
+  trailingIcon: u,
+  leadingIcon: p,
+  type: w = "text",
+  textLine: a = "singleLine",
+  autoComplete: y = "on",
+  onChange: v,
+  value: b,
+  showSupportingText: L = !1,
+  ...E
+}) => {
+  const [m, N] = S(b ?? ""), [I, k] = S(!1), [C, B] = S(!1), [D, R] = S(
+    L
+  );
+  $(() => {
+    N(b ?? "");
+  }, [b]), $(() => {
+    r != null && r.length ? B(!0) : B(!1);
+  }, [r]), $(() => {
+    L ? R(L) : d != null && d.length ? R(!0) : R(!1);
+  }, [D, d]), $(() => {
+    I && B(!1);
+  }, [I]);
+  const h = W.useRef(null), j = () => {
+    h.current && !I && h.current.focus();
+  }, A = () => {
+    k(!0);
+  }, q = (V) => {
+    const X = V.target.value;
+    N(X), B(!1), typeof v == "function" && v(X);
+  }, Y = () => {
+    k(!1);
+  }, G = Fe({
+    showSupportingText: D,
+    isFocused: I,
+    showErrorIcon: C,
+    disabled: t,
+    name: c,
+    label: o,
+    autoComplete: y,
+    className: s,
+    onChange: v,
+    placeholder: n,
+    supportingText: d,
+    type: w,
+    leadingIcon: p,
+    trailingIcon: u,
+    variant: e,
+    errorText: r,
+    value: m,
+    suffix: l,
+    textLine: a
+  }), [Q] = S(ae());
+  let x, g;
+  switch (a) {
+    case "multiLine":
+      g = Ee, x = {};
+      break;
+    case "textAreas":
+      g = "textarea", x = {};
+      break;
+    case "singleLine":
+    default:
+      g = "input", x = { type: w };
+      break;
+  }
+  return /* @__PURE__ */ P("div", { className: G.textField, ...E, children: [
+    /* @__PURE__ */ P("fieldset", { onClick: j, className: G.content, children: [
+      /* @__PURE__ */ i("div", { className: G.stateLayer }),
+      p && /* @__PURE__ */ i("div", { className: G.leadingIcon, children: W.isValidElement(p) ? p : /* @__PURE__ */ i(J, { className: "w-5 h-5", icon: p }) }),
+      !(!I && !m.length || e == "filled") && /* @__PURE__ */ i(
+        U.legend,
+        {
+          variants: {
+            hidden: { width: 0, padding: 0 },
+            visible: { width: "auto", padding: "0 8px" }
+          },
+          initial: "hidden",
+          animate: !I && !m.length ? "hidden" : "visible",
+          className: "max-w-full ml-2 px-2 text-body-small h-0",
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ i("span", { className: "transform inline-flex -translate-y-1/2", children: /* @__PURE__ */ i(
+            U.span,
+            {
+              className: G.label,
+              transition: { duration: 0.3 },
+              layoutId: Q,
+              children: o
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ P("div", { className: "flex-1 relative", children: [
+        (!I && !m.length || e == "filled") && /* @__PURE__ */ i(
+          U.label,
+          {
+            htmlFor: c,
+            className: f(
+              "absolute left-4  transition-all duration-300",
+              {
+                "text-body-small top-2": e == "filled" && !(!I && !m.length),
+                "text-body-large top-1/2 transform -translate-y-1/2": !(e == "filled" && !(!I && !m.length))
+              }
+            ),
+            transition: { duration: 0.3 },
+            children: /* @__PURE__ */ i(
+              U.span,
+              {
+                className: G.label,
+                transition: { duration: 0.3 },
+                layoutId: e == "outlined" ? Q : void 0,
+                children: o
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i(
+          g,
+          {
+            ref: h,
+            value: m,
+            onChange: q,
+            className: G.input,
+            id: c,
+            name: c,
+            placeholder: I ? n ?? void 0 : "",
+            onFocus: A,
+            onBlur: Y,
+            disabled: t,
+            autoComplete: y,
+            "aria-invalid": !!(r != null && r.length),
+            "aria-label": o,
+            ...x
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("div", { className: G.activeIndicator }),
+      !C && /* @__PURE__ */ P(te, { children: [
+        u && /* @__PURE__ */ i(
+          "div",
+          {
+            onClick: (V) => {
+              V.stopPropagation();
+            },
+            className: G.trailingIcon,
+            children: W.isValidElement(u) ? u : /* @__PURE__ */ i(J, { className: "h-5", icon: u })
+          }
+        ),
+        !u && l && /* @__PURE__ */ i("span", { className: G.suffix, children: l })
+      ] }),
+      C && /* @__PURE__ */ i(
+        "div",
+        {
+          className: f(G.trailingIcon, {
+            " absolute right-0": !u
+          }),
+          children: /* @__PURE__ */ i(
+            J,
+            {
+              className: "h-5 text-error",
+              icon: tt
+            }
+          )
+        }
+      )
+    ] }),
+    D && /* @__PURE__ */ i("p", { className: G.supportingText, children: r != null && r.length ? r : d != null && d.length ? d : " " })
+  ] });
+}, rt = H(
+  "navigationRailItem",
+  ({ isSelected: e, icon: t, label: r, variant: n }) => ({
+    navigationRailItem: f(" group flex flex-col  pt-1 pb-1.5 cursor-pointer", {
+      "text-on-surface-variant": !e,
+      "text-on-secondary-container": e,
+      "gap-2  h-[68px]": n == "vertical",
+      "gap-0  h-[66px]": n == "horizontal"
+    }),
+    container: f(
+      " w-fit flex justify-center  relative rounded-full items-center mx-5",
+      {
+        "bg-secondary-container overflow-hidden": e,
+        "gap-2 ": n == "horizontal",
+        "gap-0 ": n == "vertical",
+        "p-4": !r
+      },
+      r && [
+        "px-4",
+        {
+          "py-1 ": n == "vertical",
+          "py-4 ": n == "horizontal"
+        }
+      ]
+    ),
+    stateLayer: f(
+      "  absolute w-full rounded-full h-full left-0 top-0  ",
+      {
+        "group-state-on-surface": !e,
+        "group-state-on-secondary-container": e
+      }
+    ),
+    icon: f("size-6 flex"),
+    label: f("w-fit mx-auto", {
+      "text-label-large ": n == "horizontal",
+      "text-label-medium": n == "vertical"
+    })
+  })
+), lt = ({ label: e }) => /* @__PURE__ */ i("div", { className: " h-9 flex items-center mx-9 mt-3", children: /* @__PURE__ */ i("p", { className: "text-label-large text-on-surface-variant", children: e }) }), ot = ({
+  className: e,
+  onClick: t,
+  label: r,
+  variant: n = "vertical",
+  href: l,
+  icon: c,
+  selectedItem: o,
+  setSelectedItem: s,
+  index: d,
+  onItemSelected: u,
+  selected: p = !1,
+  ref: w,
+  transition: a,
+  isExtended: y,
+  iconSelected: v,
+  style: b,
+  extendedOnly: L,
+  ...E
+}) => {
+  const m = O(null), N = w || m, [I, k] = S(p);
+  $(() => {
+    p && o == null ? k(!0) : k(o == d && d != null);
+  }, [o]), $(() => {
+    o == d && u && u({
+      ref: N,
+      index: d || 0,
+      label: r,
+      icon: c
+    });
+  }, [o]);
+  const C = l ? "a" : "button", B = (R) => {
+    s && s(d ?? null), t && t(R);
+  }, D = rt({
+    isExtended: y,
+    extendedOnly: L,
+    className: e,
+    onItemSelected: u,
+    selectedItem: o,
+    index: d,
+    transition: a,
+    selected: I,
+    variant: n,
+    icon: c,
+    label: r,
+    isSelected: I,
+    setSelectedItem: s,
+    href: l,
+    iconSelected: v
+  });
+  return a = { duration: 0.3, ...a }, L && !y ? null : (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    /* @__PURE__ */ P(
+      C,
+      {
+        ...E,
+        role: "tab",
+        "aria-selected": I,
+        ref: N,
+        href: l,
+        className: D.navigationRailItem,
+        onClick: B,
+        style: { transition: a.duration + "s", ...b },
+        children: [
+          /* @__PURE__ */ P(
+            U.div,
+            {
+              style: {
+                transition: n == "horizontal" ? a.duration + `s, gap ${a.duration / 2}s ${a.duration - a.duration / 2}s` : a.duration + `s, gap ${a.duration / 3}s ${a.duration - a.duration / 3}s`
+              },
+              transition: a,
+              className: D.container,
+              children: [
+                /* @__PURE__ */ i(U.div, { layout: !0, className: D.stateLayer }),
+                c && /* @__PURE__ */ i(
+                  J,
+                  {
+                    icon: I ? v : c,
+                    className: D.icon
+                  }
+                ),
+                /* @__PURE__ */ i(z, { children: n == "horizontal" && (() => {
+                  const R = {
+                    width: 0,
+                    opacity: 0,
+                    transition: {
+                      ...a
+                    }
+                  }, h = {
+                    width: "auto",
+                    opacity: 1,
+                    transition: {
+                      ...a,
+                      opacity: {
+                        duration: a.duration / 2,
+                        delay: a.duration - a.duration / 2
+                      }
+                    }
+                  };
+                  return /* @__PURE__ */ i(
+                    U.span,
+                    {
+                      initial: R,
+                      animate: h,
+                      exit: R,
+                      className: D.label,
+                      children: r
+                    }
+                  );
+                })() })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(z, { children: n == "vertical" && (() => {
+            const R = {
+              height: 0,
+              opacity: 0,
+              transition: {
+                ...a,
+                opacity: {
+                  duration: 0
+                }
+              }
+            }, h = {
+              height: "auto",
+              opacity: 1,
+              transition: {
+                ...a,
+                opacity: {
+                  duration: a.duration / 3,
+                  delay: a.duration - a.duration / 3
+                }
+              }
+            };
+            return /* @__PURE__ */ i(
+              U.span,
+              {
+                initial: R,
+                animate: h,
+                exit: R,
+                className: D.label,
+                transition: a,
+                children: r
+              }
+            );
+          })() })
+        ]
+      }
+    )
+  );
+}, at = H(
+  "navigationRail",
+  ({ isExtended: e, alignment: t }) => ({
+    navigationRail: f("flex flex-col  left-0 h-full top-0 pt-11", {
+      "w-fit max-w-24": !e,
+      "w-fit min-w-[220px] max-w-[360px]": e,
+      "justify-between": t == "middle",
+      "justify-start": t == "top"
+    }),
+    header: f("flex flex-col gap-1 items-start"),
+    menuIcon: "mx-5",
+    segments: f(" flex flex-col  overflow-auto min-w-full mt-10", {
+      "w-full": !e,
+      "w-fit  items-start": e
+    })
+  })
+), Nt = ({
+  variant: e = "standard",
+  onItemSelected: t,
+  children: r,
+  className: n,
+  selectedItem: l,
+  extended: c,
+  alignment: o = "top",
+  menu: s = {
+    closed: {
+      icon: et,
+      label: "Open menu"
+    },
+    opened: {
+      icon: ge,
+      label: "Close menu"
+    }
+  },
+  style: d,
+  onExtendedChange: u,
+  transition: p,
+  setSelectedItem: w
+}) => {
+  const [a, y] = S(null), [v, b] = S(c);
+  let L;
+  l == 0 || l != null ? L = l : L = a;
+  const E = w || y, m = W.useRef(null), N = (R) => {
+    t == null || t(R);
+  };
+  function I(R) {
+    const h = [];
+    return W.Children.forEach(R, (j) => {
+      W.isValidElement(j) && j.type === W.Fragment ? h.push(...I(j.props.children)) : h.push(j);
+    }), h;
+  }
+  const k = I(r), C = k.filter(
+    (R) => W.isValidElement(R) && R.type === ce
+  ), B = at({
+    children: r,
+    onItemSelected: t,
+    selectedItem: L,
+    setSelectedItem: E,
+    className: n,
+    variant: e,
+    extended: v,
+    isExtended: v,
+    alignment: o,
+    menu: s,
+    transition: p,
+    onExtendedChange: u
+  });
+  p = { duration: 0.3, ...p };
+  const D = O(!1);
+  return D.current = !1, $(() => {
+    u == null || u(v ?? !1);
+  }, [v]), /* @__PURE__ */ P(
+    "div",
+    {
+      style: { transition: p.duration + "s", ...d },
+      ref: m,
+      className: B.navigationRail,
+      children: [
+        /* @__PURE__ */ P("div", { className: B.header, children: [
+          /* @__PURE__ */ i(
+            ye,
+            {
+              onClick: () => b(!v),
+              arialLabel: v ? s == null ? void 0 : s.opened.label : s == null ? void 0 : s.closed.label,
+              className: B.menuIcon,
+              icon: v ? s.opened.icon : s == null ? void 0 : s.closed.icon
+            }
+          ),
+          C.length > 0 && W.cloneElement(
+            C[0],
+            {
+              transition: p,
+              isExtended: v,
+              className: "!shadow-none mx-5 " + C[0].props.className
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { className: B.segments, children: (() => {
+          let R = 0;
+          return k.map((h) => W.isValidElement(h) && h.type === ot ? W.cloneElement(
+            h,
+            {
+              key: R,
+              index: R++,
+              // Utilise et incrémente le compteur dédié
+              variant: v ? "horizontal" : "vertical",
+              selectedItem: L,
+              setSelectedItem: E,
+              onItemSelected: N,
+              transition: p,
+              extendedOnly: D.current,
+              isExtended: v
+            }
+          ) : W.isValidElement(h) && h.type === ce ? null : W.isValidElement(h) && h.type === lt ? (D.current = !0, v ? W.cloneElement(
+            h,
+            {}
+          ) : null) : h);
+        })() }),
+        /* @__PURE__ */ i("div", { className: "flex-1 max-h-[160px]" })
+      ]
+    }
+  );
+};
+export {
+  Ae as Button,
+  pt as Card,
+  ht as Carousel,
+  Ze as CarouselItem,
+  pe as CustomScroll,
+  yt as Divider,
+  ce as Fab,
+  J as Icon,
+  ye as IconButton,
+  Nt as NavigationRail,
+  ot as NavigationRailItem,
+  lt as NavigationRailSection,
+  Ge as ProgressIndicator,
+  ne as RippleEffect,
+  gt as Slider,
+  mt as SmoothScroll,
+  xt as Snackbar,
+  wt as Switch,
+  _e as SyncedFixedWrapper,
+  nt as Tab,
+  vt as Tabs,
+  bt as TextField,
+  he as ToolTip,
+  Re as buttonStyle,
+  Se as cardStyle,
+  Ce as carouselItemStyle,
+  Ve as carouselStyle,
+  f as classNames,
+  Ie as classnames,
+  He as customScrollStyle,
+  H as defaultClassNames,
+  Be as dividerStyle,
+  De as fabStyle,
+  Me as getClassNames,
+  $e as iconButtonStyle,
+  Ye as normalize,
+  We as progressIndicatorStyle,
+  Pe as sliderStyle,
+  Ue as snackbarStyle,
+  je as switchStyle,
+  Oe as tabStyle,
+  Xe as tabsStyle,
+  Fe as textFieldStyle,
+  Ke as toolStyle
+};