trepur_components 2.3.9 → 2.3.11

package/lib/components/Carousel/index.js

@@ -0,0 +1,159 @@
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as L, forwardRef as p, useState as j, useMemo as O, useContext as b } from "react";
+import { Icon as D } from "../Icon/index.js";
+import { faChevronRight as T, faChevronLeft as $, faCircle as M } from "@fortawesome/fontawesome-free-solid";
+import v from "clsx";
+import "../../node_modules/keen-slider/keen-slider.min.css.js";
+import { useKeenSlider as W } from "../../node_modules/keen-slider/react.js";
+import { WheelControls as q } from "./utils.js";
+const N = L(null), P = p(
+  ({
+    breakpoints: l,
+    children: c,
+    className: n,
+    loop: t,
+    perView: a,
+    rubberband: r,
+    spacing: u,
+    ...e
+  }, i) => {
+    const [h, d] = j(1), [x, y] = j(!1), [f, o] = W(
+      {
+        breakpoints: l,
+        loop: t,
+        rubberband: r,
+        slideChanged(m) {
+          d(m.track.details.rel);
+        },
+        created() {
+          y(!0);
+        },
+        slides: {
+          spacing: u,
+          perView: a
+        }
+      },
+      [q]
+    ), w = O(
+      () => ({
+        sliderRef: f,
+        instanceRef: o,
+        currentSlide: h,
+        setCurrentSlide: d,
+        perView: a,
+        ...e
+      }),
+      [
+        e,
+        f,
+        o.current,
+        h,
+        d,
+        a,
+        x
+      ]
+    ), g = (m) => {
+      var C;
+      m.key === "Tab" && ((C = o.current) == null || C.next());
+    };
+    return /* @__PURE__ */ s(N.Provider, { value: w, children: /* @__PURE__ */ s(
+      "div",
+      {
+        onKeyDown: g,
+        className: v("navigation-wrapper w-full", n),
+        ref: i,
+        ...e,
+        children: c
+      }
+    ) });
+  }
+), R = p(({ children: l, className: c, ...n }, t) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: t,
+    className: v(
+      "navigation-wrapper flex w-full justify-between gap-4",
+      c
+    ),
+    ...n,
+    children: l
+  }
+)), z = p(({ className: l, children: c, rightArrow: n = !1, ...t }) => {
+  const { sliderRef: a } = b(N) || {};
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      className: v("keen-slider w-full pb-4", l),
+      ...t,
+      children: c
+    }
+  );
+}), I = p(({ className: l, children: c, rightArrow: n = !1, ...t }, a) => {
+  const { instanceRef: r } = b(N) || {};
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      className: v(
+        "my-auto text-carousel-arrow-default hover:cursor-pointer hover:text-carousel-arrow-hover",
+        l
+      ),
+      onClick: (u) => {
+        var e, i;
+        n ? u.stopPropagation() !== void 0 || ((e = r.current) == null || e.next()) : u.stopPropagation() !== void 0 || ((i = r.current) == null || i.prev());
+      },
+      ...t,
+      children: /* @__PURE__ */ s("a", { children: /* @__PURE__ */ s(D, { icon: n ? T : $, size: "3x" }) })
+    }
+  );
+}), K = p(({ className: l, children: c, onClick: n, ...t }, a) => {
+  var d, x, y, f;
+  const {
+    instanceRef: r,
+    loop: u,
+    currentSlide: e = 1,
+    perView: i = 1
+  } = b(N) || {}, h = (f = (y = (x = (d = r == null ? void 0 : r.current) == null ? void 0 : d.track) == null ? void 0 : x.details) == null ? void 0 : y.slides) == null ? void 0 : f.length;
+  return /* @__PURE__ */ s("div", { className: "flex justify-center", children: [...Array(h).keys()].map((o) => {
+    var m, C, k, S;
+    const w = ((S = (k = (C = (m = r == null ? void 0 : r.current) == null ? void 0 : m.track) == null ? void 0 : C.details) == null ? void 0 : k.slides) == null ? void 0 : S.length) ?? 1, g = u ? e + i <= w ? o >= e && o < e + i : o >= e || e + i - w - 1 >= o : e === o;
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        onClick: () => {
+          var A;
+          (A = r.current) == null || A.moveToIdx(o);
+        },
+        "aria-label": `carousel-button${t.id ? `-${t.id}` : ""}`,
+        children: /* @__PURE__ */ s(
+          D,
+          {
+            className: v(
+              "hover:text-carousel-dots-hover",
+              g ? "text-carousel-dots-active" : "text-carousel-dots-default"
+            ),
+            icon: M,
+            size: "2x"
+          }
+        )
+      }
+    );
+  }) });
+});
+P.displayName = "Carousel";
+R.displayName = "Carousel.Content";
+I.displayName = "Carousel.Arrow";
+K.displayName = "Carousel.Dots";
+z.displayName = "Carousel.Slides";
+const X = Object.assign(P, {
+  Content: R,
+  Arrow: I,
+  Dots: K,
+  Slides: z
+});
+export {
+  X as Carousel
+};

package/lib/components/Carousel/utils.d.ts

@@ -0,0 +1 @@
+export declare function WheelControls(slider: any): void;

package/lib/components/Carousel/utils.js

@@ -0,0 +1,38 @@
+function h(n) {
+  let i, t, a;
+  function o(e, s) {
+    t.x -= e.deltaX, t.y -= e.deltaY, n.container.dispatchEvent(
+      new CustomEvent(s, {
+        detail: {
+          x: t.x,
+          y: t.y
+        }
+      })
+    );
+  }
+  function c(e) {
+    t = {
+      x: e.pageX,
+      y: e.pageY
+    }, o(e, "ksDragStart");
+  }
+  function l(e) {
+    o(e, "ksDrag");
+  }
+  function u(e) {
+    o(e, "ksDragEnd");
+  }
+  function r(e) {
+    a || (c(e), a = !0), l(e), clearTimeout(i), i = setTimeout(() => {
+      a = !1, u(e);
+    }, 50);
+  }
+  n.on("created", () => {
+    n.container.addEventListener("wheel", r, {
+      passive: !0
+    });
+  });
+}
+export {
+  h as WheelControls
+};

package/lib/components/CarouselThumbnail/CarouselThumbnail.stories.d.ts

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react';
+import { CarouselThumbnail } from './';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').CarouselThumbnailContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Slides: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Slide: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLImageElement> & {
+            src: string;
+        } & import('react').RefAttributes<HTMLImageElement>>;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+        loop: true;
+        drag: true;
+        rubberband: true;
+        spacing: number;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CarouselThumbnail>;
+export declare const Default: Story;

package/lib/components/CarouselThumbnail/const.d.ts

@@ -0,0 +1 @@
+export declare const breakpointsToRender: any;

package/lib/components/CarouselThumbnail/const.js

@@ -0,0 +1,20 @@
+const i = {
+  "(min-width: 320px)": {
+    slides: { perView: 1, spacing: 25 }
+  },
+  "(max-width: 500px)": {
+    slides: { perView: 1, spacing: 25 }
+  },
+  "(min-width: 768px)": {
+    slides: { perView: 1, spacing: 25 }
+  },
+  "(min-width: 1024px)": {
+    slides: { perView: 2, spacing: 20 }
+  },
+  "(min-width: 1280px)": {
+    slides: { perView: 2, spacing: 10 }
+  }
+};
+export {
+  i as breakpointsToRender
+};

package/lib/components/CarouselThumbnail/index.d.ts

@@ -0,0 +1,51 @@
+import { KeenSliderInstance, KeenSliderHooks, KeenSliderOptions } from 'keen-slider/react';
+import { HTMLAttributes } from 'react';
+
+export interface CarouselThumbnailContextProps {
+    slideWrapperClassName?: string;
+    breakpoints?: Record<string, Omit<KeenSliderOptions<{}, {}, KeenSliderHooks>, 'breakpoints'>>;
+    defaultAnimation?: {
+        duration?: number;
+        easing?: (t: number) => number;
+    };
+    disabled?: boolean;
+    drag?: boolean;
+    dragSpeed?: number;
+    initial?: number;
+    loop?: boolean;
+    mode?: 'snap' | 'free' | 'free-snap';
+    range?: {
+        align?: boolean;
+        min?: number;
+        max?: number;
+    };
+    renderMode?: 'precision' | 'performance' | 'custom';
+    rtl?: boolean;
+    rubberband?: boolean;
+    slides?: any[];
+    vertical?: boolean;
+    animationStarted?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    animationStopped?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    animationEnded?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    created?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    destroyed?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    detailsChanged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    dragged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    dragStarted?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    dragChecked?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    dragEnded?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    beforeOptionsChanged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    optionsChanged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    slideChanged?: boolean;
+    updated?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
+    spacing?: number;
+    number?: number;
+    origin?: number | 'auto' | 'center';
+}
+declare const CarouselThumbnail: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & CarouselThumbnailContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Slides: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Slide: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLImageElement> & {
+        src: string;
+    } & import('react').RefAttributes<HTMLImageElement>>;
+};
+export { CarouselThumbnail };

package/lib/components/CarouselThumbnail/index.js

@@ -0,0 +1,74 @@
+import { jsx as l, jsxs as f, Fragment as C } from "react/jsx-runtime";
+import { createContext as T, forwardRef as o, useMemo as x, useContext as v } from "react";
+import t from "clsx";
+import "../../node_modules/keen-slider/keen-slider.min.css.js";
+import { useKeenSlider as a } from "../../node_modules/keen-slider/react.js";
+import { breakpointsToRender as N } from "./const.js";
+import { WheelControls as S, ThumbnailPlugin as g } from "./utils.js";
+const m = T(null), u = o(({ children: i, className: e, ...r }, s) => {
+  const n = x(
+    () => ({
+      ...r
+    }),
+    [r]
+  );
+  return /* @__PURE__ */ l(m.Provider, { value: n, children: /* @__PURE__ */ l(
+    "div",
+    {
+      ref: s,
+      className: t("navigation-wrapper w-full", e),
+      ...r,
+      children: i
+    }
+  ) });
+}), d = o(({ className: i, children: e }) => {
+  const { rubberband: r, loop: s, ...n } = v(m) || {}, [b, p] = a(
+    {
+      breakpoints: N,
+      loop: s,
+      rubberband: r
+    },
+    [S]
+  ), [h] = a(
+    {
+      initial: 0,
+      slides: {
+        perView: 4,
+        spacing: 10
+      }
+    },
+    [g(p)]
+  );
+  return /* @__PURE__ */ f(C, { children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        ref: b,
+        className: t(
+          "keen-slider h-96 w-full rounded-t-2xl pb-4",
+          i
+        ),
+        ...n,
+        children: e
+      }
+    ),
+    /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l("div", { ref: h, className: "keen-slider thumbnail h-24 w-16", children: e }) })
+  ] });
+}), c = o(({ src: i, ...e }) => /* @__PURE__ */ l(
+  "img",
+  {
+    className: "keen-slider__slide rounded-t-2xl object-cover",
+    src: i,
+    ...e
+  }
+));
+u.displayName = "CarouselThumbnail";
+d.displayName = "CarouselThumbnail.Slides";
+c.displayName = "CarouselThumbnail.Slide";
+const F = Object.assign(u, {
+  Slides: d,
+  Slide: c
+});
+export {
+  F as CarouselThumbnail
+};

package/lib/components/CarouselThumbnail/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function WheelControls(slider: any): void;
+export declare function ThumbnailPlugin(mainRef: any): (slider: any) => void;

package/lib/components/CarouselThumbnail/utils.js

@@ -0,0 +1,65 @@
+function l(a) {
+  let e, c, o;
+  function r(t, d) {
+    c.x -= t.deltaX, c.y -= t.deltaY, a.container.dispatchEvent(
+      new CustomEvent(d, {
+        detail: {
+          x: c.x,
+          y: c.y
+        }
+      })
+    );
+  }
+  function n(t) {
+    c = {
+      x: t.pageX,
+      y: t.pageY
+    }, r(t, "ksDragStart");
+  }
+  function i(t) {
+    r(t, "ksDrag");
+  }
+  function u(t) {
+    r(t, "ksDragEnd");
+  }
+  function s(t) {
+    o || (n(t), o = !0), i(t), clearTimeout(e), e = setTimeout(() => {
+      o = !1, u(t);
+    }, 50);
+  }
+  a.on("created", () => {
+    a.container.addEventListener("wheel", s, {
+      passive: !0
+    });
+  });
+}
+function v(a) {
+  return (e) => {
+    function c() {
+      e.slides.forEach((n) => {
+        n.classList.remove("active");
+      });
+    }
+    function o(n) {
+      e.slides[n].classList.add("active");
+    }
+    function r() {
+      e.slides.forEach((n, i) => {
+        n.addEventListener("click", () => {
+          a.current && a.current.moveToIdx(i);
+        });
+      });
+    }
+    e.on("created", () => {
+      a.current && (o(e.track.details.rel), r(), a.current.on("animationStarted", (n) => {
+        c();
+        const i = n.animator.targetIdx || 0;
+        o(n.track.absToRel(i)), e.moveToIdx(Math.min(e.track.details.maxIdx, i));
+      }));
+    });
+  };
+}
+export {
+  v as ThumbnailPlugin,
+  l as WheelControls
+};

package/lib/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+import { Checkbox } from './';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLabelElement> & import('./').CheckboxProps & import('react').RefAttributes<HTMLLabelElement>> & {
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLSpanElement> & import('./').CheckboxProps & import('react').RefAttributes<HTMLSpanElement>>;
+    };
+    args: {
+        onClick: import('@storybook/addon-actions').HandlerFunction;
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Checked: Story;
+export declare const Unchecked: Story;

package/lib/components/Checkbox/index.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+
+export interface CheckboxProps {
+    label?: string;
+    onClick?: (isChecked: boolean) => void;
+    checked?: boolean;
+}
+declare const Checkbox: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLabelElement> & CheckboxProps & import('react').RefAttributes<HTMLLabelElement>> & {
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & CheckboxProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export { Checkbox };

package/lib/components/Checkbox/index.js

@@ -0,0 +1,28 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { forwardRef as a, useState as d } from "react";
+const c = a(({ children: e, checked: s, onClick: o }, h) => {
+  const [r, b] = d(s);
+  return /* @__PURE__ */ p("label", { ref: h, className: "flex items-center gap-4 hover:cursor-pointer", children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        className: "h-6 w-6 rounded border-2",
+        onChange: () => {
+          b(!r);
+        },
+        onClick: () => o == null ? void 0 : o(!r),
+        type: "checkbox",
+        checked: r
+      }
+    ),
+    e
+  ] });
+}), n = a(({ children: e }, s) => /* @__PURE__ */ t("span", { ref: s, children: e }));
+c.displayName = "Checkbox";
+n.displayName = "Checkbox.Label";
+const l = Object.assign(c, {
+  Label: n
+});
+export {
+  l as Checkbox
+};

package/lib/components/Collapsible/Collapsible.stories.d.ts

@@ -0,0 +1,57 @@
+import { Collapsible } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').CollapsibleContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        HeaderContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Image: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('../Image').ImageProps & import('react').RefAttributes<HTMLDivElement>>;
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Subtitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    };
+    parameters: {};
+    argTypes: {
+        id: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+export declare const Default: Story;

package/lib/components/Collapsible/index.d.ts

@@ -0,0 +1,19 @@
+import { ImageProps } from '../Image';
+import { HTMLAttributes } from 'react';
+
+export interface CollapsibleContextProps {
+    loading?: boolean;
+    expanded?: boolean;
+    setExpanded?: (expanded: boolean) => void;
+}
+declare const Collapsible: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & CollapsibleContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    HeaderContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Image: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ImageProps & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Subtitle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+};
+export { Collapsible };

package/lib/components/Collapsible/index.js

@@ -0,0 +1,87 @@
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { createContext as w, forwardRef as o, useState as H, useMemo as T, useContext as p } from "react";
+import { Icon as I } from "../Icon/index.js";
+import { Image as S } from "../Image/index.js";
+import { faChevronDown as j, faChevronUp as L } from "@fortawesome/fontawesome-free-solid";
+import k from "clsx";
+const n = w(null), c = o(({ id: e, className: l, children: t, loading: s, ...i }, v) => {
+  const [r, m] = H(!1), y = T(
+    () => ({
+      loading: s,
+      expanded: r,
+      setExpanded: m
+    }),
+    [s, r, m]
+  );
+  return /* @__PURE__ */ a(n.Provider, { value: y, children: /* @__PURE__ */ a(
+    "div",
+    {
+      id: e,
+      className: "w-full rounded-2xl bg-white hover:cursor-pointer",
+      ref: v,
+      ...i,
+      children: t
+    }
+  ) });
+}), d = o(({ children: e, ...l }, t) => {
+  const { expanded: s, setExpanded: i } = p(n) || {};
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: "flex h-24 pr-4 sm:pr-8",
+      onClick: () => i == null ? void 0 : i(!s),
+      ref: t,
+      ...l,
+      children: [
+        e,
+        /* @__PURE__ */ a("div", { className: "my-auto flex-none", children: /* @__PURE__ */ a(I, { icon: s ? j : L }) })
+      ]
+    }
+  );
+}), x = o(({ children: e, ...l }, t) => /* @__PURE__ */ a("div", { className: "mx-4 my-auto grid w-full", ref: t, ...l, children: e })), C = o(({ children: e, src: l, ...t }, s) => /* @__PURE__ */ a("div", { className: "aspect-square flex-none p-4", children: /* @__PURE__ */ a(S, { src: l, className: "h-full rounded-2xl", ...t }) })), b = o(({ ...e }, l) => /* @__PURE__ */ a(
+  "p",
+  {
+    className: "text-xxs text-light-grey truncate md:text-xs",
+    ref: l,
+    ...e
+  }
+)), u = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "md:text-md truncate text-sm", ref: l, ...e })), N = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "truncate text-xs md:text-sm", ref: l, ...e })), f = o(({ children: e, ...l }, t) => {
+  const { expanded: s } = p(n) || {};
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: k(
+        "w-auto overflow-scroll px-4 transition-max-height duration-300",
+        {
+          "max-h-32": s,
+          "max-h-0": !s
+        }
+      ),
+      ref: t,
+      ...l,
+      children: e
+    }
+  );
+}), h = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "text-xs md:text-sm", ref: l, ...e }));
+c.displayName = "Collapsible";
+d.displayName = "Collapsible.Header";
+f.displayName = "Collapsible.Content";
+C.displayName = "Collapsible.Image";
+b.displayName = "Collapsible.Label";
+u.displayName = "Collapsible.Title";
+N.displayName = "Collapsible.Subtitle";
+x.displayName = "Collapsible.HeaderContent";
+h.displayName = "Collapsible.Text";
+const U = Object.assign(c, {
+  Header: d,
+  HeaderContent: x,
+  Image: C,
+  Label: b,
+  Title: u,
+  Subtitle: N,
+  Content: f,
+  Text: h
+});
+export {
+  U as Collapsible
+};