@tampadevs/react 0.1.0

package/dist/index17.js

@@ -0,0 +1,269 @@
+import { jsxs as n, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { clsx as N } from "./index28.js";
+function j(i, e, d, r, a) {
+  if (i) return i;
+  if (e)
+    switch (d) {
+      case "youtube": {
+        const o = new URLSearchParams({
+          autoplay: r || a ? "1" : "0",
+          rel: "0",
+          modestbranding: "1"
+        });
+        return `https://www.youtube.com/embed/${e}?${o}`;
+      }
+      case "vimeo": {
+        const o = new URLSearchParams({
+          autoplay: r || a ? "1" : "0"
+        });
+        return `https://player.vimeo.com/video/${e}?${o}`;
+      }
+      default:
+        return "";
+    }
+  return "";
+}
+function $(i, e, d) {
+  return i || (e && d === "youtube" ? `https://img.youtube.com/vi/${e}/maxresdefault.jpg` : "");
+}
+function z(i) {
+  const [e, d] = i.split("/").map(Number);
+  return e && d ? `${d / e * 100}%` : "56.25%";
+}
+function S({
+  src: i = "",
+  videoId: e = "",
+  provider: d = "youtube",
+  title: r = "Video",
+  thumbnail: a = "",
+  aspectRatio: o = "16/9",
+  autoplay: h = !1,
+  lazyLoad: b = !0,
+  className: v
+}) {
+  const [s, x] = u(!1), [_, m] = u(!1), f = j(i, e, d, h, s), p = $(a, e, d), w = b && !s && p, c = () => {
+    m(!0), x(!0);
+  }, y = () => {
+    m(!1);
+  }, k = (l) => {
+    (l.key === "Enter" || l.key === " ") && (l.preventDefault(), c());
+  };
+  return /* @__PURE__ */ n(g, { children: [
+    /* @__PURE__ */ t("div", { className: N("td-video-embed", v), children: /* @__PURE__ */ n(
+      "div",
+      {
+        className: "td-video-embed__aspect",
+        style: { paddingBottom: z(o) },
+        children: [
+          (s || !b) && /* @__PURE__ */ n(g, { children: [
+            /* @__PURE__ */ t(
+              "iframe",
+              {
+                className: "td-video-embed__iframe",
+                src: f,
+                title: r,
+                allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+                allowFullScreen: !0,
+                onLoad: y
+              }
+            ),
+            _ && /* @__PURE__ */ t("div", { className: "td-video-embed__loading", children: /* @__PURE__ */ t("div", { className: "td-video-embed__spinner" }) })
+          ] }),
+          w && /* @__PURE__ */ n(
+            "div",
+            {
+              className: "td-video-embed__thumbnail",
+              onClick: c,
+              onKeyDown: k,
+              role: "button",
+              tabIndex: 0,
+              "aria-label": `Play video: ${r}`,
+              children: [
+                /* @__PURE__ */ t(
+                  "img",
+                  {
+                    className: "td-video-embed__thumbnail-img",
+                    src: p,
+                    alt: "",
+                    loading: "lazy"
+                  }
+                ),
+                /* @__PURE__ */ t("div", { className: "td-video-embed__gradient" }),
+                /* @__PURE__ */ t("div", { className: "td-video-embed__play-btn", children: /* @__PURE__ */ t("svg", { fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t("path", { d: "M8 5v14l11-7z" }) }) }),
+                r && /* @__PURE__ */ t("div", { className: "td-video-embed__title", children: r })
+              ]
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(L, {})
+  ] });
+}
+function L() {
+  return /* @__PURE__ */ t("style", { children: `
+      .td-video-embed {
+        position: relative;
+        width: 100%;
+        background: #000;
+        border-radius: 0.875rem;
+        overflow: hidden;
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      }
+
+      .td-video-embed__aspect {
+        position: relative;
+        width: 100%;
+      }
+
+      .td-video-embed__iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+
+      .td-video-embed__thumbnail {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        background: #000;
+      }
+
+      .td-video-embed__thumbnail-img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.2s ease;
+      }
+
+      .td-video-embed__thumbnail:hover .td-video-embed__thumbnail-img {
+        transform: scale(1.05);
+      }
+
+      .td-video-embed__gradient {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.1) 0%,
+          rgba(0, 0, 0, 0.3) 50%,
+          rgba(0, 0, 0, 0.5) 100%
+        );
+      }
+
+      .td-video-embed__play-btn {
+        position: relative;
+        z-index: 1;
+        width: 80px;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0.2) 0%,
+          rgba(255, 255, 255, 0.08) 50%,
+          rgba(255, 255, 255, 0.05) 100%
+        );
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        border-radius: 50%;
+        border: 1.5px solid rgba(255, 255, 255, 0.25);
+        transition: all 0.15s ease;
+        box-shadow:
+          0 8px 32px rgba(0, 0, 0, 0.2),
+          0 4px 12px rgba(0, 0, 0, 0.1),
+          inset 0 1px 2px rgba(255, 255, 255, 0.2),
+          inset 0 -2px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      .td-video-embed__thumbnail:hover .td-video-embed__play-btn {
+        transform: scale(1.1);
+        border-color: rgba(255, 255, 255, 0.4);
+        background: linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0.3) 0%,
+          rgba(255, 255, 255, 0.12) 50%,
+          rgba(255, 255, 255, 0.08) 100%
+        );
+      }
+
+      .td-video-embed__play-btn svg {
+        position: relative;
+        z-index: 1;
+        width: 32px;
+        height: 32px;
+        color: white;
+        margin-left: 4px;
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
+      }
+
+      .td-video-embed__title {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 1.5rem;
+        color: white;
+        font-weight: 600;
+        font-size: 1.125rem;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+        z-index: 1;
+      }
+
+      .td-video-embed__loading {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(28, 36, 56, 0.9);
+      }
+
+      .td-video-embed__spinner {
+        width: 48px;
+        height: 48px;
+        border: 3px solid rgba(255, 255, 255, 0.1);
+        border-top-color: #E85A4F;
+        border-radius: 50%;
+        animation: td-video-embed-spin 1s linear infinite;
+      }
+
+      @keyframes td-video-embed-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @media (max-width: 640px) {
+        .td-video-embed__play-btn {
+          width: 60px;
+          height: 60px;
+        }
+
+        .td-video-embed__play-btn svg {
+          width: 24px;
+          height: 24px;
+          margin-left: 3px;
+        }
+
+        .td-video-embed__title {
+          font-size: 1rem;
+          padding: 1rem;
+        }
+      }
+    ` });
+}
+export {
+  S as VideoEmbed
+};
+//# sourceMappingURL=index17.js.map

package/dist/index17.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index17.js","sources":["../src/components/VideoEmbed.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { clsx } from 'clsx';\n\nexport type VideoProvider = 'youtube' | 'vimeo' | 'custom';\n\nexport interface VideoEmbedProps {\n  src?: string;\n  videoId?: string;\n  provider?: VideoProvider;\n  title?: string;\n  thumbnail?: string;\n  aspectRatio?: string;\n  autoplay?: boolean;\n  lazyLoad?: boolean;\n  className?: string;\n}\n\nfunction getEmbedUrl(\n  src: string,\n  videoId: string,\n  provider: VideoProvider,\n  autoplay: boolean,\n  isLoaded: boolean\n): string {\n  if (src) return src;\n\n  if (videoId) {\n    switch (provider) {\n      case 'youtube': {\n        const params = new URLSearchParams({\n          autoplay: autoplay || isLoaded ? '1' : '0',\n          rel: '0',\n          modestbranding: '1',\n        });\n        return `https://www.youtube.com/embed/${videoId}?${params}`;\n      }\n      case 'vimeo': {\n        const params = new URLSearchParams({\n          autoplay: autoplay || isLoaded ? '1' : '0',\n        });\n        return `https://player.vimeo.com/video/${videoId}?${params}`;\n      }\n      default:\n        return '';\n    }\n  }\n\n  return '';\n}\n\nfunction getThumbnailUrl(thumbnail: string, videoId: string, provider: VideoProvider): string {\n  if (thumbnail) return thumbnail;\n  if (videoId && provider === 'youtube') {\n    return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;\n  }\n  return '';\n}\n\nfunction getAspectPadding(aspectRatio: string): string {\n  const [width, height] = aspectRatio.split('/').map(Number);\n  if (width && height) {\n    return `${(height / width) * 100}%`;\n  }\n  return '56.25%';\n}\n\nexport function VideoEmbed({\n  src = '',\n  videoId = '',\n  provider = 'youtube',\n  title = 'Video',\n  thumbnail = '',\n  aspectRatio = '16/9',\n  autoplay = false,\n  lazyLoad = true,\n  className,\n}: VideoEmbedProps) {\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const embedUrl = getEmbedUrl(src, videoId, provider, autoplay, isLoaded);\n  const thumbnailUrl = getThumbnailUrl(thumbnail, videoId, provider);\n  const showThumbnail = lazyLoad && !isLoaded && thumbnailUrl;\n\n  const handlePlayClick = () => {\n    setIsLoading(true);\n    setIsLoaded(true);\n  };\n\n  const handleIframeLoad = () => {\n    setIsLoading(false);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      handlePlayClick();\n    }\n  };\n\n  return (\n    <>\n      <div className={clsx('td-video-embed', className)}>\n        <div\n          className=\"td-video-embed__aspect\"\n          style={{ paddingBottom: getAspectPadding(aspectRatio) }}\n        >\n          {(isLoaded || !lazyLoad) && (\n            <>\n              <iframe\n                className=\"td-video-embed__iframe\"\n                src={embedUrl}\n                title={title}\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                allowFullScreen\n                onLoad={handleIframeLoad}\n              />\n              {isLoading && (\n                <div className=\"td-video-embed__loading\">\n                  <div className=\"td-video-embed__spinner\" />\n                </div>\n              )}\n            </>\n          )}\n\n          {showThumbnail && (\n            <div\n              className=\"td-video-embed__thumbnail\"\n              onClick={handlePlayClick}\n              onKeyDown={handleKeyDown}\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Play video: ${title}`}\n            >\n              <img\n                className=\"td-video-embed__thumbnail-img\"\n                src={thumbnailUrl}\n                alt=\"\"\n                loading=\"lazy\"\n              />\n              <div className=\"td-video-embed__gradient\" />\n              <div className=\"td-video-embed__play-btn\">\n                <svg fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path d=\"M8 5v14l11-7z\" />\n                </svg>\n              </div>\n              {title && <div className=\"td-video-embed__title\">{title}</div>}\n            </div>\n          )}\n        </div>\n      </div>\n      <VideoEmbedStyles />\n    </>\n  );\n}\n\nfunction VideoEmbedStyles() {\n  return (\n    <style>{`\n      .td-video-embed {\n        position: relative;\n        width: 100%;\n        background: #000;\n        border-radius: 0.875rem;\n        overflow: hidden;\n        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n      }\n\n      .td-video-embed__aspect {\n        position: relative;\n        width: 100%;\n      }\n\n      .td-video-embed__iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n      }\n\n      .td-video-embed__thumbnail {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        background: #000;\n      }\n\n      .td-video-embed__thumbnail-img {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.2s ease;\n      }\n\n      .td-video-embed__thumbnail:hover .td-video-embed__thumbnail-img {\n        transform: scale(1.05);\n      }\n\n      .td-video-embed__gradient {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(\n          to bottom,\n          rgba(0, 0, 0, 0.1) 0%,\n          rgba(0, 0, 0, 0.3) 50%,\n          rgba(0, 0, 0, 0.5) 100%\n        );\n      }\n\n      .td-video-embed__play-btn {\n        position: relative;\n        z-index: 1;\n        width: 80px;\n        height: 80px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: linear-gradient(\n          135deg,\n          rgba(255, 255, 255, 0.2) 0%,\n          rgba(255, 255, 255, 0.08) 50%,\n          rgba(255, 255, 255, 0.05) 100%\n        );\n        backdrop-filter: blur(16px);\n        -webkit-backdrop-filter: blur(16px);\n        border-radius: 50%;\n        border: 1.5px solid rgba(255, 255, 255, 0.25);\n        transition: all 0.15s ease;\n        box-shadow:\n          0 8px 32px rgba(0, 0, 0, 0.2),\n          0 4px 12px rgba(0, 0, 0, 0.1),\n          inset 0 1px 2px rgba(255, 255, 255, 0.2),\n          inset 0 -2px 6px rgba(0, 0, 0, 0.1);\n      }\n\n      .td-video-embed__thumbnail:hover .td-video-embed__play-btn {\n        transform: scale(1.1);\n        border-color: rgba(255, 255, 255, 0.4);\n        background: linear-gradient(\n          135deg,\n          rgba(255, 255, 255, 0.3) 0%,\n          rgba(255, 255, 255, 0.12) 50%,\n          rgba(255, 255, 255, 0.08) 100%\n        );\n      }\n\n      .td-video-embed__play-btn svg {\n        position: relative;\n        z-index: 1;\n        width: 32px;\n        height: 32px;\n        color: white;\n        margin-left: 4px;\n        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));\n      }\n\n      .td-video-embed__title {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        padding: 1.5rem;\n        color: white;\n        font-weight: 600;\n        font-size: 1.125rem;\n        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);\n        z-index: 1;\n      }\n\n      .td-video-embed__loading {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: rgba(28, 36, 56, 0.9);\n      }\n\n      .td-video-embed__spinner {\n        width: 48px;\n        height: 48px;\n        border: 3px solid rgba(255, 255, 255, 0.1);\n        border-top-color: #E85A4F;\n        border-radius: 50%;\n        animation: td-video-embed-spin 1s linear infinite;\n      }\n\n      @keyframes td-video-embed-spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      @media (max-width: 640px) {\n        .td-video-embed__play-btn {\n          width: 60px;\n          height: 60px;\n        }\n\n        .td-video-embed__play-btn svg {\n          width: 24px;\n          height: 24px;\n          margin-left: 3px;\n        }\n\n        .td-video-embed__title {\n          font-size: 1rem;\n          padding: 1rem;\n        }\n      }\n    `}</style>\n  );\n}\n"],"names":["getEmbedUrl","src","videoId","provider","autoplay","isLoaded","params","getThumbnailUrl","thumbnail","getAspectPadding","aspectRatio","width","height","VideoEmbed","title","lazyLoad","className","setIsLoaded","useState","isLoading","setIsLoading","embedUrl","thumbnailUrl","showThumbnail","handlePlayClick","handleIframeLoad","handleKeyDown","e","jsxs","Fragment","jsx","clsx","VideoEmbedStyles"],"mappings":"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"}

package/dist/index18.js

@@ -0,0 +1,147 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { clsx as _ } from "./index28.js";
+function f({
+  logos: t,
+  title: o,
+  speed: m = 40,
+  direction: s = "left",
+  logoHeight: d = "50px",
+  gap: g = "3rem",
+  pauseOnHover: c = !0,
+  color: u = !1,
+  className: p
+}) {
+  const l = (e, a) => {
+    const i = /* @__PURE__ */ r(
+      "img",
+      {
+        src: e.src,
+        alt: e.alt,
+        className: "td-logo-marquee__logo",
+        style: { height: d }
+      }
+    );
+    return e.href ? /* @__PURE__ */ r(
+      "a",
+      {
+        href: e.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "td-logo-marquee__item",
+        children: i
+      },
+      `${e.src}-${a}`
+    ) : /* @__PURE__ */ r("div", { className: "td-logo-marquee__item", children: i }, `${e.src}-${a}`);
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: _(
+        "td-logo-marquee",
+        c && "td-logo-marquee--pause-on-hover",
+        u && "td-logo-marquee--color",
+        s === "right" && "td-logo-marquee--reverse",
+        p
+      ),
+      style: {
+        "--marquee-speed": `${m}s`,
+        "--marquee-gap": g
+      },
+      children: [
+        o && /* @__PURE__ */ r("h3", { className: "td-logo-marquee__title", children: o }),
+        /* @__PURE__ */ n("div", { className: "td-logo-marquee__wrapper", children: [
+          /* @__PURE__ */ r("div", { className: "td-logo-marquee__track", children: t.map(l) }),
+          /* @__PURE__ */ r("div", { className: "td-logo-marquee__track", "aria-hidden": "true", children: t.map((e, a) => l(e, a + t.length)) })
+        ] }),
+        /* @__PURE__ */ r("style", { children: `
+        .td-logo-marquee {
+          overflow: hidden;
+        }
+
+        .td-logo-marquee__title {
+          font-size: 0.875rem;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.1em;
+          color: rgba(255, 255, 255, 0.6);
+          text-align: center;
+          margin: 0 0 1.5rem 0;
+        }
+
+        .td-logo-marquee__wrapper {
+          display: flex;
+          width: max-content;
+          animation: td-marquee var(--marquee-speed, 40s) linear infinite;
+          mask-image: linear-gradient(
+            to right,
+            transparent,
+            black 5%,
+            black 95%,
+            transparent
+          );
+          -webkit-mask-image: linear-gradient(
+            to right,
+            transparent,
+            black 5%,
+            black 95%,
+            transparent
+          );
+        }
+
+        .td-logo-marquee__track {
+          display: flex;
+          gap: var(--marquee-gap, 3rem);
+          padding-right: var(--marquee-gap, 3rem);
+          flex-shrink: 0;
+        }
+
+        .td-logo-marquee--reverse .td-logo-marquee__wrapper {
+          animation-direction: reverse;
+        }
+
+        .td-logo-marquee--pause-on-hover:hover .td-logo-marquee__wrapper {
+          animation-play-state: paused;
+        }
+
+        @keyframes td-marquee {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(-50%);
+          }
+        }
+
+        .td-logo-marquee__item {
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .td-logo-marquee__logo {
+          width: auto;
+          object-fit: contain;
+          filter: grayscale(100%) brightness(2);
+          opacity: 0.7;
+          transition: all 0.2s ease;
+        }
+
+        .td-logo-marquee--color .td-logo-marquee__logo {
+          filter: none;
+          opacity: 1;
+        }
+
+        .td-logo-marquee__item:hover .td-logo-marquee__logo {
+          filter: grayscale(0%) brightness(1);
+          opacity: 1;
+        }
+      ` })
+      ]
+    }
+  );
+}
+export {
+  f as LogoMarquee
+};
+//# sourceMappingURL=index18.js.map

package/dist/index18.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index18.js","sources":["../src/components/LogoMarquee.tsx"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\n\nexport interface MarqueeLogo {\n  src: string;\n  alt: string;\n  href?: string;\n}\n\nexport interface LogoMarqueeProps {\n  logos: MarqueeLogo[];\n  title?: string;\n  speed?: number;\n  direction?: 'left' | 'right';\n  logoHeight?: string;\n  gap?: string;\n  pauseOnHover?: boolean;\n  color?: boolean;\n  className?: string;\n}\n\nexport function LogoMarquee({\n  logos,\n  title,\n  speed = 40,\n  direction = 'left',\n  logoHeight = '50px',\n  gap = '3rem',\n  pauseOnHover = true,\n  color = false,\n  className,\n}: LogoMarqueeProps) {\n  const renderLogo = (logo: MarqueeLogo, index: number) => {\n    const img = (\n      <img\n        src={logo.src}\n        alt={logo.alt}\n        className=\"td-logo-marquee__logo\"\n        style={{ height: logoHeight }}\n      />\n    );\n\n    if (logo.href) {\n      return (\n        <a\n          key={`${logo.src}-${index}`}\n          href={logo.href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"td-logo-marquee__item\"\n        >\n          {img}\n        </a>\n      );\n    }\n\n    return (\n      <div key={`${logo.src}-${index}`} className=\"td-logo-marquee__item\">\n        {img}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={clsx(\n        'td-logo-marquee',\n        pauseOnHover && 'td-logo-marquee--pause-on-hover',\n        color && 'td-logo-marquee--color',\n        direction === 'right' && 'td-logo-marquee--reverse',\n        className\n      )}\n      style={{\n        '--marquee-speed': `${speed}s`,\n        '--marquee-gap': gap,\n      } as React.CSSProperties}\n    >\n      {title && <h3 className=\"td-logo-marquee__title\">{title}</h3>}\n      <div className=\"td-logo-marquee__wrapper\">\n        <div className=\"td-logo-marquee__track\">\n          {logos.map(renderLogo)}\n        </div>\n        <div className=\"td-logo-marquee__track\" aria-hidden=\"true\">\n          {logos.map((logo, i) => renderLogo(logo, i + logos.length))}\n        </div>\n      </div>\n\n      <style>{`\n        .td-logo-marquee {\n          overflow: hidden;\n        }\n\n        .td-logo-marquee__title {\n          font-size: 0.875rem;\n          font-weight: 600;\n          text-transform: uppercase;\n          letter-spacing: 0.1em;\n          color: rgba(255, 255, 255, 0.6);\n          text-align: center;\n          margin: 0 0 1.5rem 0;\n        }\n\n        .td-logo-marquee__wrapper {\n          display: flex;\n          width: max-content;\n          animation: td-marquee var(--marquee-speed, 40s) linear infinite;\n          mask-image: linear-gradient(\n            to right,\n            transparent,\n            black 5%,\n            black 95%,\n            transparent\n          );\n          -webkit-mask-image: linear-gradient(\n            to right,\n            transparent,\n            black 5%,\n            black 95%,\n            transparent\n          );\n        }\n\n        .td-logo-marquee__track {\n          display: flex;\n          gap: var(--marquee-gap, 3rem);\n          padding-right: var(--marquee-gap, 3rem);\n          flex-shrink: 0;\n        }\n\n        .td-logo-marquee--reverse .td-logo-marquee__wrapper {\n          animation-direction: reverse;\n        }\n\n        .td-logo-marquee--pause-on-hover:hover .td-logo-marquee__wrapper {\n          animation-play-state: paused;\n        }\n\n        @keyframes td-marquee {\n          from {\n            transform: translateX(0);\n          }\n          to {\n            transform: translateX(-50%);\n          }\n        }\n\n        .td-logo-marquee__item {\n          flex-shrink: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .td-logo-marquee__logo {\n          width: auto;\n          object-fit: contain;\n          filter: grayscale(100%) brightness(2);\n          opacity: 0.7;\n          transition: all 0.2s ease;\n        }\n\n        .td-logo-marquee--color .td-logo-marquee__logo {\n          filter: none;\n          opacity: 1;\n        }\n\n        .td-logo-marquee__item:hover .td-logo-marquee__logo {\n          filter: grayscale(0%) brightness(1);\n          opacity: 1;\n        }\n      `}</style>\n    </div>\n  );\n}\n"],"names":["LogoMarquee","logos","title","speed","direction","logoHeight","gap","pauseOnHover","color","className","renderLogo","logo","index","img","jsx","jsxs","clsx","i"],"mappings":";;AAsBO,SAASA,EAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,KAAAC,IAAM;AAAA,EACN,cAAAC,IAAe;AAAA,EACf,OAAAC,IAAQ;AAAA,EACR,WAAAC;AACF,GAAqB;AACnB,QAAMC,IAAa,CAACC,GAAmBC,MAAkB;AACvD,UAAMC,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKH,EAAK;AAAA,QACV,KAAKA,EAAK;AAAA,QACV,WAAU;AAAA,QACV,OAAO,EAAE,QAAQN,EAAA;AAAA,MAAW;AAAA,IAAA;AAIhC,WAAIM,EAAK,OAEL,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAMH,EAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QAET,UAAAE;AAAA,MAAA;AAAA,MANI,GAAGF,EAAK,GAAG,IAAIC,CAAK;AAAA,IAAA,IAY7B,gBAAAE,EAAC,OAAA,EAAiC,WAAU,yBACzC,UAAAD,KADO,GAAGF,EAAK,GAAG,IAAIC,CAAK,EAE9B;AAAA,EAEJ;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAT,KAAgB;AAAA,QAChBC,KAAS;AAAA,QACTJ,MAAc,WAAW;AAAA,QACzBK;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,mBAAmB,GAAGN,CAAK;AAAA,QAC3B,iBAAiBG;AAAA,MAAA;AAAA,MAGlB,UAAA;AAAA,QAAAJ,KAAS,gBAAAY,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAZ,GAAM;AAAA,QACxD,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,UAAA,gBAAAD,EAAC,SAAI,WAAU,0BACZ,UAAAb,EAAM,IAAIS,CAAU,GACvB;AAAA,4BACC,OAAA,EAAI,WAAU,0BAAyB,eAAY,QACjD,UAAAT,EAAM,IAAI,CAACU,GAAMM,MAAMP,EAAWC,GAAMM,IAAIhB,EAAM,MAAM,CAAC,EAAA,CAC5D;AAAA,QAAA,GACF;AAAA,0BAEC,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAmFN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGR;"}