@udixio/ui-react 0.4.2 → 1.0.0

package/dist/index.js

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