@dmsi/wedgekit-react 1.0.1 → 2.0.1

package/dist/components/ProductImagePreview/ProductPrimaryImage.js

@@ -0,0 +1,138 @@
+import { jsxs as b, jsx as Y } from "react/jsx-runtime";
+import { useRef as M, useState as _, useMemo as G, useCallback as d, useEffect as J } from "react";
+const R = "/placeholder.svg";
+function Q({
+  image: p,
+  width: u,
+  height: f,
+  zoomEnabled: n = !1,
+  zoomLensSize: c = 140,
+  scrollToZoomEnabled: m = !1,
+  className: W = "",
+  isPlaceholder: y = !1,
+  onImageError: j,
+  onZoomPositionChange: s,
+  onScrollZoom: N
+}) {
+  const h = M(null), i = M(null), g = M(null), [a, P] = _(!1), [, X] = _(0), o = G(() => p?.src, [p?.src]), k = () => {
+    g.current == null && (g.current = requestAnimationFrame(() => {
+      g.current = null, X((t) => t + 1);
+    }));
+  }, A = d(() => {
+    if (!n) return;
+    P(!0);
+    const t = h.current;
+    if (t) {
+      const r = t.getBoundingClientRect(), e = i.current;
+      s?.(
+        e ? { ...e, w: r.width, h: r.height, lensSize: c } : null,
+        !0
+      );
+    }
+  }, [n, s, c]), B = d(() => {
+    n && (P(!1), i.current = null, s?.(null, !1));
+  }, [n, s]), F = d(
+    (t) => {
+      if (y || !n || !a || t.pointerType === "touch") return;
+      const r = h.current;
+      if (!r) return;
+      const e = r.getBoundingClientRect(), x = (t.clientX - e.left) / e.width, I = (t.clientY - e.top) / e.height, l = c ?? 140, q = Math.max(
+        0,
+        Math.min(e.width - l, x * e.width - l / 2)
+      ), D = Math.max(
+        0,
+        Math.min(e.height - l, I * e.height - l / 2)
+      ), T = (q + l / 2) / e.width, U = (D + l / 2) / e.height;
+      i.current = {
+        x: T,
+        y: U
+      }, k(), s?.(
+        i.current ? {
+          ...i.current,
+          w: e.width,
+          h: e.height,
+          lensSize: c
+        } : null,
+        !0
+      );
+    },
+    [y, n, a, c, s]
+  );
+  J(() => {
+    const t = h.current;
+    if (!t || !m) return;
+    const r = (e) => {
+      if (e.preventDefault(), e.stopPropagation(), !n || !a) return;
+      const x = e.deltaY > 0 ? -0.2 : 0.2;
+      N?.(x);
+    };
+    return t.addEventListener("wheel", r, { passive: !1 }), () => {
+      t.removeEventListener("wheel", r);
+    };
+  }, [m, n, a, N]);
+  const H = d(
+    (t) => {
+      j?.(o);
+      const r = t.currentTarget;
+      r.src !== R && (r.src = R);
+    },
+    [o, j]
+  ), v = i.current;
+  let w;
+  if (v && a && n) {
+    const t = c, r = v.x * u - t / 2, e = v.y * f - t / 2;
+    w = {
+      width: t,
+      height: t,
+      left: Math.max(0, Math.min(u - t, r)),
+      top: Math.max(0, Math.min(f - t, e))
+    };
+  }
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: h,
+      className: [
+        "relative overflow-hidden bg-white rounded flex items-center justify-center select-none",
+        n ? "cursor-crosshair" : "",
+        W
+      ].join(" "),
+      onPointerEnter: A,
+      onPointerLeave: B,
+      onPointerMove: F,
+      children: [
+        /* @__PURE__ */ Y(
+          "img",
+          {
+            src: o ?? R,
+            alt: p?.alt || "Product image",
+            style: {
+              maxWidth: u,
+              maxHeight: f,
+              minWidth: u,
+              minHeight: f,
+              aspectRatio: "1 / 1",
+              objectFit: "contain",
+              userSelect: "none"
+            },
+            draggable: !1,
+            loading: "lazy",
+            onError: H
+          },
+          o
+        ),
+        n && a && w && /* @__PURE__ */ Y(
+          "div",
+          {
+            "aria-hidden": !0,
+            className: "absolute pointer-events-none border border-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.15)] rounded-md bg-white/10 backdrop-blur-[1px]",
+            style: w
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Q as ProductPrimaryImage
+};

package/dist/components/ProductImagePreview/Thumbnail.d.ts

@@ -6,6 +6,7 @@ export type ThumbnailProps = {
     isActive?: boolean;
     isPlaceholder?: boolean;
     onClick?: () => void;
+    onImageError?: (src: string) => void;
 };
-export declare function Thumbnail({ width, height, src, alt, isActive, onClick, isPlaceholder, }: ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+export declare function Thumbnail({ width, height, src, alt, isActive, onClick, isPlaceholder, onImageError, }: ThumbnailProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Thumbnail.d.ts.map

package/dist/components/ProductImagePreview/Thumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../../src/components/ProductImagePreview/Thumbnail.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,EACH,QAAQ,EACR,OAAO,EACP,aAAqB,GACtB,EAAE,cAAc,2CAiChB"}
+{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../../src/components/ProductImagePreview/Thumbnail.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,EACH,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,YAAY,GACb,EAAE,cAAc,2CAkChB"}

package/dist/components/ProductImagePreview/Thumbnail.js

@@ -0,0 +1,46 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { ImagePlaceholder as g } from "../ImagePlaceholder.js";
+function h({
+  width: a,
+  height: n,
+  src: o,
+  alt: i,
+  isActive: t,
+  onClick: l,
+  isPlaceholder: e = !1,
+  onImageError: s
+}) {
+  const [f, m] = u(!1);
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      onClick: l,
+      className: [
+        "cursor-pointer relative overflow-hidden rounded aspect-square w-full",
+        // base radius, square when no explicit size
+        "focus:outline-none",
+        t && !e && "ring-[3px] ring-offset-1 ring-border-action-normal ring-offset-white opacity-70"
+      ].join(" "),
+      style: { maxWidth: a, maxHeight: n, aspectRatio: "1 / 1" },
+      "aria-pressed": t && !e ? "true" : "false",
+      children: e ? /* @__PURE__ */ r(g, { width: 115, height: 115 }) : /* @__PURE__ */ r(
+        "img",
+        {
+          src: f ? "/placeholder.svg" : o,
+          alt: i,
+          className: "object-contain w-full h-full select-none",
+          draggable: !1,
+          loading: "lazy",
+          onError: () => {
+            s?.(o), m(!0);
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  h as Thumbnail
+};

package/dist/components/ProductImagePreview/ZoomWindow.js

@@ -0,0 +1,74 @@
+import { jsx as x } from "react/jsx-runtime";
+import { useMemo as Y } from "react";
+import { Surface as $ } from "../Surface.js";
+function N({
+  image: i,
+  width: u,
+  height: w,
+  pointer: e,
+  active: S,
+  zoomFactor: c = 2,
+  scaleFactor: z = 2,
+  primaryImagePosition: t,
+  offset: o = 10,
+  className: g = ""
+}) {
+  const a = Y(() => i?.src, [i?.src]);
+  if (!i || !S || !e) return null;
+  const n = e.lensSize * z, r = e.w || u, h = e.h || w, v = r * c, W = h * c, b = e.x * r * c, m = e.y * h * c, H = n / 2 - b, j = n / 2 - m;
+  return /* @__PURE__ */ x(
+    $,
+    {
+      elevation: 16,
+      className: g,
+      style: {
+        width: n,
+        height: n,
+        position: "fixed",
+        zIndex: 999,
+        overflow: "hidden",
+        pointerEvents: "none",
+        userSelect: "none",
+        ...(() => {
+          if (!t)
+            return {
+              position: "fixed",
+              zIndex: 999,
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)"
+            };
+          const d = t.left + e.x * t.width - e.lensSize / 2, f = t.top + e.y * t.height - e.lensSize / 2;
+          let s = d + e.lensSize + o, l = f;
+          const { innerWidth: O, innerHeight: X } = window;
+          return s + n > O && (s = d - n - o), l + n > X && (l = f + e.lensSize - n), l < 0 && (l = f), s < 0 && (s = d + e.lensSize + o), {
+            position: "fixed",
+            zIndex: 999,
+            left: s,
+            top: l
+          };
+        })()
+      },
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ x(
+        "img",
+        {
+          src: a,
+          alt: "",
+          className: "pointer-events-none select-none max-w-none object-cover",
+          style: {
+            width: v,
+            height: W,
+            transform: `translate(${H}px, ${j}px)`
+          },
+          draggable: !1,
+          loading: "lazy"
+        },
+        a
+      )
+    }
+  );
+}
+export {
+  N as ZoomWindow
+};

package/dist/components/ProductImagePreview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProductImagePreview/index.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAMF,8GAA8G;AAC9G,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kDAuKlE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProductImagePreview/index.tsx"],"names":[],"mappings":"AAwBA,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,8GAA8G;AAC9G,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kDAqMlE"}

package/dist/components/ProductImagePreview/index.js

@@ -0,0 +1,189 @@
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { Thumbnail as x } from "./Thumbnail.js";
+import { Stack as $ } from "../Stack.js";
+import { Grid as D } from "../Grid.js";
+import { ProductPrimaryImage as G } from "./ProductPrimaryImage.js";
+import { ZoomWindow as K } from "./ZoomWindow.js";
+import { CarouselPagination as L } from "./CarouselPagination.js";
+import { MobileImageCarousel as U } from "./MobileImageCarousel.js";
+import { useMatchesMobile as V } from "../../hooks/useMatchesMedia.js";
+import { useState as q, useMemo as P, useCallback as B, useEffect as H } from "react";
+import { useProductImagePreview as J } from "./useProductImagePreview.js";
+const y = "/placeholder.svg";
+function Q(c) {
+  const a = c?.trim();
+  return !!a && a !== y && !a.endsWith("/placeholder.svg") && !a.includes("/placeholder.svg?");
+}
+function me(c) {
+  const {
+    width: a = 483,
+    height: d = 483,
+    thumbsPerRow: h = 4,
+    zoomEnabled: g = !1,
+    scrollToZoomEnabled: u = !1,
+    images: l,
+    currentIndex: z,
+    onChangeIndex: w,
+    zoomLensSize: E,
+    zoomFactor: S = 2,
+    zoomWindowScaleFactor: C = 2.5,
+    zoomWindowOffset: Z = 10,
+    testid: k
+  } = c, [f, p] = q([]), F = P(
+    () => l.map((e) => e.src).join("|"),
+    [l]
+  ), t = P(
+    () => l.filter(
+      (e) => Q(e.src) && f.indexOf(e.src) === -1
+    ),
+    [f, l]
+  ), n = B((e) => {
+    e && p(
+      (o) => o.indexOf(e) >= 0 ? o : [...o, e]
+    );
+  }, []);
+  H(() => {
+    p([]);
+  }, [F]);
+  const i = V(), {
+    zoomPoint: W,
+    zoomActive: T,
+    currentZoomFactor: j,
+    primaryImagePosition: M,
+    safeIndex: m,
+    active: I,
+    primaryImageRef: N,
+    handleSelect: s,
+    handleZoomPositionChange: A,
+    handleScrollZoom: O
+  } = J({
+    images: t,
+    currentIndex: z,
+    zoomEnabled: g,
+    zoomFactor: S,
+    scrollToZoomEnabled: u,
+    onChangeIndex: w,
+    isMobile: i
+  });
+  if (typeof i > "u") return null;
+  if (i && !t.length)
+    return /* @__PURE__ */ r(
+      "img",
+      {
+        src: y,
+        alt: "Placeholder Image",
+        draggable: !1,
+        loading: "eager",
+        style: {
+          aspectRatio: "1 / 1",
+          objectFit: "cover",
+          height: "100%",
+          width: "100%"
+        }
+      }
+    );
+  const b = g && !i, R = t.length > 1;
+  return /* @__PURE__ */ v(
+    $,
+    {
+      sizing: "layout-group",
+      style: { width: a, position: "relative" },
+      testid: k,
+      children: [
+        /* @__PURE__ */ r("div", { className: "hidden md:block", children: /* @__PURE__ */ v("div", { className: "flex gap-4 items-start", children: [
+          /* @__PURE__ */ r("div", { ref: N, children: /* @__PURE__ */ r(
+            G,
+            {
+              image: I,
+              width: a,
+              height: d,
+              zoomEnabled: b,
+              zoomLensSize: E,
+              scrollToZoomEnabled: u && !i,
+              onZoomPositionChange: A,
+              onScrollZoom: O,
+              isPlaceholder: t.length === 0,
+              onImageError: n
+            }
+          ) }),
+          b && /* @__PURE__ */ r(
+            K,
+            {
+              image: I,
+              width: a,
+              height: d,
+              pointer: W,
+              active: T,
+              zoomFactor: j,
+              scaleFactor: C,
+              primaryImagePosition: M,
+              offset: Z
+            }
+          )
+        ] }) }),
+        i && /* @__PURE__ */ r(
+          U,
+          {
+            images: t,
+            currentIndex: m,
+            width: a,
+            height: d,
+            onChangeIndex: s,
+            onImageError: n
+          }
+        ),
+        R && /* @__PURE__ */ r("div", { className: "hidden md:block", children: t.length <= 3 ? /* @__PURE__ */ r(
+          "div",
+          {
+            className: "flex justify-center gap-4",
+            style: { width: "100%", maxWidth: a },
+            "aria-label": "Product image thumbnails",
+            children: t.map((e, o) => /* @__PURE__ */ r("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ r(
+              x,
+              {
+                src: e.src,
+                alt: e.alt || `Thumbnail ${o + 1}`,
+                isActive: o === m,
+                onClick: () => s(o),
+                onImageError: n
+              }
+            ) }, e.src + o))
+          }
+        ) : /* @__PURE__ */ r(
+          D,
+          {
+            sizing: "layout-group",
+            "aria-label": "Product image thumbnails",
+            style: {
+              width: "100%",
+              maxWidth: a
+            },
+            columns: h > 12 ? 12 : h < 1 ? 1 : h,
+            children: t.map((e, o) => /* @__PURE__ */ r(
+              x,
+              {
+                src: e.src,
+                alt: e.alt || `Thumbnail ${o + 1}`,
+                isActive: o === m,
+                onClick: () => s(o),
+                onImageError: n
+              },
+              e.src + o
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          L,
+          {
+            images: t,
+            currentIndex: m,
+            onSelect: s
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  me as ProductImagePreview
+};

package/dist/components/ProductImagePreview/useProductImagePreview.js

@@ -0,0 +1,85 @@
+import { useMemo as O, useState as u, useRef as P, useEffect as Z, useCallback as i } from "react";
+function B(b) {
+  const {
+    images: o,
+    currentIndex: m,
+    zoomEnabled: E = !1,
+    zoomFactor: d = 2,
+    scrollToZoomEnabled: p = !1,
+    onChangeIndex: s,
+    isMobile: a = !1
+  } = b, r = !!o?.length, n = r && m >= 0 && m < o.length ? m : 0, x = O(() => r ? o[n] : void 0, [r, o, n]), [z, F] = u(null), [C, R] = u(!1), [f, g] = u(d), [A, L] = u(null), v = P(null), l = P(null), h = E && !a, w = p && !a;
+  Z(() => {
+    if (!h) return;
+    const e = () => {
+      const t = v.current;
+      if (!t) return;
+      const c = () => {
+        t && L(t.getBoundingClientRect());
+      };
+      c();
+      const I = new ResizeObserver(c);
+      I.observe(t), window.addEventListener("scroll", c), window.addEventListener("resize", c), l.current = () => {
+        I.disconnect(), window.removeEventListener("scroll", c), window.removeEventListener("resize", c);
+      };
+    };
+    if (v.current)
+      e();
+    else {
+      const t = requestAnimationFrame(e);
+      return () => cancelAnimationFrame(t);
+    }
+    return () => {
+      l.current && (l.current(), l.current = null);
+    };
+  }, [h]);
+  const M = i(
+    (e) => {
+      e !== n && s(e);
+    },
+    [n, s]
+  ), S = i(() => {
+    if (!r) return;
+    const e = (n + 1) % o.length;
+    s(e);
+  }, [r, n, o.length, s]), y = i(() => {
+    if (!r) return;
+    const e = n === 0 ? o.length - 1 : n - 1;
+    s(e);
+  }, [r, n, o.length, s]), T = i(
+    (e, t) => {
+      a || (F(e), R(t));
+    },
+    [a]
+  ), k = i(
+    (e) => {
+      if (!w) return;
+      const t = Math.max(1, Math.min(5, f + e));
+      g(t);
+    },
+    [w, f]
+  );
+  return Z(() => {
+    g(d);
+  }, [d]), {
+    // State
+    zoomPoint: z,
+    zoomActive: C,
+    currentZoomFactor: f,
+    primaryImagePosition: A,
+    hasImages: r,
+    safeIndex: n,
+    active: x,
+    // Refs
+    primaryImageRef: v,
+    // Handlers
+    handleSelect: M,
+    handleZoomPositionChange: T,
+    handleScrollZoom: k,
+    handleNext: S,
+    handlePrevious: y
+  };
+}
+export {
+  B as useProductImagePreview
+};

package/dist/components/ProjectBar.d.ts

@@ -7,6 +7,6 @@ type ProjectBarProps = {
     id?: string;
     testid?: string;
 };
-export declare function ProjectBar({ left, right, mobileLeft, mobileRight, id, testid, }: ComponentProps<"div"> & ProjectBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectBar({ left, right, mobileLeft, mobileRight, id, testid, }: ComponentProps<'div'> & ProjectBarProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ProjectBar.d.ts.map

package/dist/components/ProjectBar.js

@@ -0,0 +1,54 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { clsx as r } from "../node_modules/clsx/dist/clsx.js";
+import { layoutGroupGap as a, paddingYUsingLayoutGroupGap as s, containerPaddingX as p, layoutGap as v } from "../classNames.js";
+import { useMatchesMobile as u } from "../hooks/useMatchesMedia.js";
+import "react";
+function g({
+  left: c,
+  right: e,
+  mobileLeft: i,
+  mobileRight: l,
+  id: t,
+  testid: n
+}) {
+  const d = u() ? {
+    "--color-background-primary-normal": "var(--color-brand-400)",
+    "--color-background-action-primary-normal": "var(--color-neutral-000)",
+    "--color-background-action-primary-hover": "var(--color-critical-100)",
+    "--color-background-action-primary-active": "var(--color-neutral-200)",
+    "--color-background-action-secondary-normal": "var(--color-brand-400)",
+    "--color-background-action-secondary-hover": "var(--color-critical-100)",
+    "--color-text-on-action-primary-normal": "var(--color-brand-400)",
+    "--color-text-primary-normal": "var(--color-neutral-000)",
+    "--color-text-action-primary-normal": "var(--color-neutral-000)",
+    "--color-text-action-primary-hover": "var(--color-critical-500)",
+    "--color-text-action-primary-active": "var(--color-critical-300)",
+    "--color-border-action-normal": "var(--color-neutral-000)",
+    "--color-border-action-hover": "var(--color-critical-500)",
+    "--color-border-action-active": "var(--color-critical-300)"
+  } : {};
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      id: t,
+      "data-testid": n,
+      style: { ...d },
+      className: r(
+        "flex items-center justify-between",
+        "bg-background-primary-normal text-text-primary-normal",
+        s,
+        p,
+        v
+      ),
+      children: [
+        /* @__PURE__ */ o("div", { className: r("hidden desktop:block flex-1 leading-[1]"), children: c }),
+        /* @__PURE__ */ o("div", { className: r("hidden desktop:flex items-center", a), children: e }),
+        /* @__PURE__ */ o("div", { className: r("flex flex-col desktop:hidden"), children: i }),
+        /* @__PURE__ */ o("div", { className: r("flex items-center desktop:hidden", a), children: l })
+      ]
+    }
+  );
+}
+export {
+  g as ProjectBar
+};