@uoguelph/react-components 1.3.7 → 1.3.8

package/dist/blockquote-author-link.js

@@ -1,14 +1,15 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Link as u } from "./link.js";
-function k({
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import { Link as i } from "./link.js";
+function a({
   as: o,
   children: t,
   className: n,
-  href: r,
-  ...e
+  href: e,
+  ...r
 }) {
-  return /* @__PURE__ */ m(u, { ...e, href: r, as: o ?? "a", className: `uofg-blockquote-author-link ${n}`, children: t });
+  return /* @__PURE__ */ u(i, { ...r, href: e, as: o ?? "a", className: `uofg-blockquote-author-link ${n}`, children: t });
 }
 export {
-  k as BlockquoteAuthorLink
+  a as BlockquoteAuthorLink
 };

package/dist/blockquote-author-name.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx as r } from "react/jsx-runtime";
 import { twMerge as u } from "tailwind-merge";
-function c({ children: o, className: t, ...e }) {
+function m({ children: o, className: t, ...e }) {
   return /* @__PURE__ */ r("cite", { ...e, className: u("uofg-blockquote-author-name uog:not-italic uog:font-bold", t), children: o });
 }
 export {
-  c as BlockquoteAuthorName
+  m as BlockquoteAuthorName
 };

package/dist/blockquote-author-title.js

@@ -1,8 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
+"use client";
+import { jsx as r } from "react/jsx-runtime";
 import { twMerge as u } from "tailwind-merge";
-function a({ children: o, className: t, ...r }) {
-  return /* @__PURE__ */ e("span", { ...r, className: u("uofg-blockquote-author-title uog:italic", t), children: o });
+function c({ children: t, className: o, ...e }) {
+  return /* @__PURE__ */ r("span", { ...e, className: u("uofg-blockquote-author-title uog:italic", o), children: t });
 }
 export {
-  a as BlockquoteAuthorTitle
+  c as BlockquoteAuthorTitle
 };

package/dist/blockquote-author.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as l } from "react/jsx-runtime";
 import { useContext as u } from "react";
-import { twMerge as g } from "tailwind-merge";
-import { tv as s } from "tailwind-variants";
-import { BlockquoteContext as m } from "./blockquote-context.js";
+import { twMerge as s } from "tailwind-merge";
+import { tv as g } from "tailwind-variants";
+import { BlockquoteContext as c } from "./blockquote-context.js";
 function p({ className: r, children: t }) {
-  const o = u(m), e = s({
+  const o = u(c), e = g({
     base: "uofg-blockquote-author uog:border-l-4 uog:pl-4 uog:flex uog:flex-col uog:gap-1 uog:items-start uog:font-light",
     variants: {
       color: {
@@ -13,7 +14,7 @@ function p({ className: r, children: t }) {
       }
     }
   });
-  return /* @__PURE__ */ l("div", { className: g(e({ color: (o == null ? void 0 : o.color) ?? "yellow" }), r), children: t });
+  return /* @__PURE__ */ l("div", { className: s(e({ color: (o == null ? void 0 : o.color) ?? "yellow" }), r), children: t });
 }
 export {
   p as BlockquoteAuthor

package/dist/blockquote-content.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as t, jsx as e, Fragment as n } from "react/jsx-runtime";
 import { f as a, a as m } from "./solid-D19hAF5t.js";
 import { FontAwesomeIcon as s } from "@fortawesome/react-fontawesome";

package/dist/blockquote.js

@@ -1,20 +1,21 @@
+"use client";
 import { jsx as o } from "react/jsx-runtime";
 import { twMerge as u } from "tailwind-merge";
-import { BlockquoteContext as m } from "./blockquote-context.js";
-import { BlockquoteAuthor as q } from "./blockquote-author.js";
+import { BlockquoteContext as c } from "./blockquote-context.js";
+import { BlockquoteAuthor as n } from "./blockquote-author.js";
 import { BlockquoteAuthorLink as B } from "./blockquote-author-link.js";
 import { BlockquoteAuthorName as h } from "./blockquote-author-name.js";
-import { BlockquoteAuthorTitle as s } from "./blockquote-author-title.js";
+import { BlockquoteAuthorTitle as d } from "./blockquote-author-title.js";
 import { BlockquoteContent as g } from "./blockquote-content.js";
-function c({ className: e, hideQuotationMarks: t, children: r, color: l = "yellow" }) {
-  return /* @__PURE__ */ o(m.Provider, { value: { color: l, hideQuotationMarks: t }, children: /* @__PURE__ */ o("div", { className: `uofg-blockquote ${u("flex flex-col gap-2", e)}`, children: r }) });
+function m({ className: e, hideQuotationMarks: t, children: r, color: l = "yellow" }) {
+  return /* @__PURE__ */ o(c.Provider, { value: { color: l, hideQuotationMarks: t }, children: /* @__PURE__ */ o("div", { className: `uofg-blockquote ${u("flex flex-col gap-2", e)}`, children: r }) });
 }
-c.displayName = "Blockquote";
+m.displayName = "Blockquote";
 export {
-  c as Blockquote,
-  q as BlockquoteAuthor,
+  m as Blockquote,
+  n as BlockquoteAuthor,
   B as BlockquoteAuthorLink,
   h as BlockquoteAuthorName,
-  s as BlockquoteAuthorTitle,
+  d as BlockquoteAuthorTitle,
   g as BlockquoteContent
 };

package/dist/card-content.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as i } from "react/jsx-runtime";
-import { useContext as g } from "react";
-import { twMerge as n } from "tailwind-merge";
+import { useContext as n } from "react";
+import { twMerge as g } from "tailwind-merge";
 import { tv as s } from "tailwind-variants";
 import { CardContext as u } from "./card-context.js";
 function a({ children: t, className: r }) {
-  const o = g(u), e = s({
+  const o = n(u), e = s({
     base: "uog:flex uog:flex-col uog:flex-1 uog:gap-2 uog:bg-grey-light-bg uog:p-5 uog:text-grey-light-contrast",
     variants: {
       isLink: {
@@ -12,7 +13,7 @@ function a({ children: t, className: r }) {
       }
     }
   });
-  return /* @__PURE__ */ i("div", { className: `uofg-card-content ${n(e({ isLink: (o == null ? void 0 : o.isLink) ?? !1 }), r)}`, children: t });
+  return /* @__PURE__ */ i("div", { className: `uofg-card-content ${g(e({ isLink: (o == null ? void 0 : o.isLink) ?? !1 }), r)}`, children: t });
 }
 a.displayName = "CardContent";
 export {

package/dist/card-footer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as a } from "react/jsx-runtime";
 import { useContext as g } from "react";
 import { twMerge as i } from "tailwind-merge";

package/dist/card-image.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as r } from "react/jsx-runtime";
 import { useContext as f } from "react";
 import { twMerge as p } from "tailwind-merge";
@@ -26,8 +27,8 @@ function h({
         }
       }
     }
-  }), { container: d, wrapper: l, image: c } = u({ isLink: (o == null ? void 0 : o.isLink) ?? !1 });
-  return /* @__PURE__ */ r("div", { className: `uofg-card-image-container ${d()}`, children: /* @__PURE__ */ r("div", { className: `uofg-card-image-wrapper ${l()}`, children: /* @__PURE__ */ r(
+  }), { container: l, wrapper: c, image: d } = u({ isLink: (o == null ? void 0 : o.isLink) ?? !1 });
+  return /* @__PURE__ */ r("div", { className: `uofg-card-image-container ${l()}`, children: /* @__PURE__ */ r("div", { className: `uofg-card-image-wrapper ${c()}`, children: /* @__PURE__ */ r(
     g,
     {
       ...s,
@@ -35,7 +36,7 @@ function h({
       alt: i,
       width: n,
       height: t,
-      className: `uofg-card-image ${p(c(), m)}`
+      className: `uofg-card-image ${p(d(), m)}`
     }
   ) }) });
 }

package/dist/card-title.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as i } from "react/jsx-runtime";
-import { useContext as a } from "react";
-import { twMerge as m } from "tailwind-merge";
-import { tv as n } from "tailwind-variants";
+import { useContext as n } from "react";
+import { twMerge as a } from "tailwind-merge";
+import { tv as m } from "tailwind-variants";
 import { CardContext as s } from "./card-context.js";
-function d({ children: t, className: r }) {
-  const e = a(s), o = n({
+function u({ children: t, className: r }) {
+  const e = n(s), o = m({
     base: "uog:flex uog:font-bold uog:text-lg",
     variants: {
       centered: {
@@ -12,9 +13,9 @@ function d({ children: t, className: r }) {
       }
     }
   });
-  return /* @__PURE__ */ i("div", { className: `uofg-card-title ${m(o({ centered: (e == null ? void 0 : e.centered) ?? !1 }), r)}`, children: t });
+  return /* @__PURE__ */ i("div", { className: `uofg-card-title ${a(o({ centered: (e == null ? void 0 : e.centered) ?? !1 }), r)}`, children: t });
 }
-d.displayName = "CardTitle";
+u.displayName = "CardTitle";
 export {
-  d as CardTitle
+  u as CardTitle
 };

package/dist/card.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as t } from "react/jsx-runtime";
 import { Children as f } from "react";
 import { twMerge as l } from "tailwind-merge";

package/dist/embedded-video-modal-button.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { g as i } from "./solid-D19hAF5t.js";
 import { FontAwesomeIcon as s } from "@fortawesome/react-fontawesome";

package/dist/embedded-video.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as c, Fragment as p, jsx as n } from "react/jsx-runtime";
 import { useState as w } from "react";
 import { twMerge as f } from "tailwind-merge";
@@ -44,48 +45,48 @@ function N(l) {
   return { type: e, id: t };
 }
 function m({ src: l, title: e, transcript: t, className: o }) {
-  const { id: d, type: i } = N(l), r = g({
+  const { id: i, type: d } = N(l), u = g({
     slots: {
       base: f("uog:flex uog:flex-col", o),
       iframe: "uog:w-full uog:h-full uog:aspect-video",
       transcriptButton: "uog:p-3 uog:w-full"
     }
-  }), { base: a, iframe: u, transcriptButton: s } = r();
-  return /* @__PURE__ */ c("div", { className: a(), children: [
-    i === "youtube" && d && /* @__PURE__ */ n(
+  }), { base: s, iframe: r, transcriptButton: a } = u();
+  return /* @__PURE__ */ c("div", { className: s(), children: [
+    d === "youtube" && i && /* @__PURE__ */ n(
       "iframe",
       {
-        className: u(),
+        className: r(),
         allowFullScreen: !0,
-        src: `https://www.youtube.com/embed/${d}`,
+        src: `https://www.youtube.com/embed/${i}`,
         title: e ?? "YouTube Embedded Video Player"
       }
     ),
-    i === "vimeo" && d && /* @__PURE__ */ n(
+    d === "vimeo" && i && /* @__PURE__ */ n(
       "iframe",
       {
-        className: u(),
+        className: r(),
         allowFullScreen: !0,
-        src: `https://player.vimeo.com/video/${d}`,
+        src: `https://player.vimeo.com/video/${i}`,
         title: e ?? "Vimeo Embedded Video Player"
       }
     ),
-    t && /* @__PURE__ */ n(h, { as: "a", color: "black", className: s(), href: t, download: !0, children: "Download Transcript" })
+    t && /* @__PURE__ */ n(h, { as: "a", color: "black", className: a(), href: t, download: !0, children: "Download Transcript" })
   ] });
 }
-function E({ src: l, title: e, transcript: t, className: o, children: d }) {
-  const [i, r] = w(!1);
-  if (d) {
-    const a = g({
+function E({ src: l, title: e, transcript: t, className: o, children: i }) {
+  const [d, u] = w(!1);
+  if (i) {
+    const s = g({
       slots: {
         container: "uog:bg-grey-dark-bg uog:flex uog:w-screen uog:max-w-6xl uog:lg:max-w-7xl uog:flex-col uog:gap-4 uog:p-4 uog:text-grey-dark-contrast",
         video: "uog:w-full",
         title: "uog:text-xl uog:font-bold"
       }
-    }), { container: u, video: s, title: v } = a();
+    }), { container: r, video: a, title: v } = s();
     return /* @__PURE__ */ c(p, { children: [
-      /* @__PURE__ */ n(y.Provider, { value: { modalOpen: i, setModalOpen: r }, children: d }),
-      /* @__PURE__ */ n(x, { open: i, onClose: () => r(!1), children: /* @__PURE__ */ c("div", { className: `uofg-embedded-video-container ${u()}`, children: [
+      /* @__PURE__ */ n(y.Provider, { value: { modalOpen: d, setModalOpen: u }, children: i }),
+      /* @__PURE__ */ n(x, { open: d, onClose: () => u(!1), children: /* @__PURE__ */ c("div", { className: `uofg-embedded-video-container ${r()}`, children: [
         /* @__PURE__ */ n("span", { className: `uofg-embedded-video-title ${v()}`, children: e }),
         /* @__PURE__ */ n(
           m,
@@ -93,7 +94,7 @@ function E({ src: l, title: e, transcript: t, className: o, children: d }) {
             src: l,
             title: e,
             transcript: t,
-            className: `uofg-embedded-video ${f(s(), o)}`
+            className: `uofg-embedded-video ${f(a(), o)}`
           }
         )
       ] }) })

package/dist/hero-caption.js

@@ -1,6 +1,7 @@
-import { jsx as e } from "react/jsx-runtime";
-function r({ children: o, className: t }) {
-  return /* @__PURE__ */ e("p", { className: `uofg-hero-caption uog:text-xl ${t}`, children: o });
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+function r({ children: o, className: e }) {
+  return /* @__PURE__ */ t("p", { className: `uofg-hero-caption uog:text-xl ${e}`, children: o });
 }
 r.displayName = "HeroCaption";
 export {

package/dist/hero-content.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as t } from "react/jsx-runtime";
 import { useContext as n } from "react";
 import { tv as i } from "tailwind-variants";

package/dist/hero-link.js

@@ -1,26 +1,27 @@
-import { jsx as m } from "react/jsx-runtime";
-import { twMerge as i } from "tailwind-merge";
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { twMerge as m } from "tailwind-merge";
 import { Button as p } from "./button.js";
-function a({
+function l({
   as: o,
-  href: r,
-  children: t,
-  className: e,
+  href: e,
+  children: r,
+  className: t,
   ...n
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ i(
     p,
     {
       ...n,
       as: o ?? "a",
       color: "yellow",
-      href: r,
-      className: `uofg-hero-link ${i("uog:p-3 uog:w-fit", e)}`,
-      children: t
+      href: e,
+      className: `uofg-hero-link ${m("uog:p-3 uog:w-fit", t)}`,
+      children: r
     }
   );
 }
-a.displayName = "HeroLink";
+l.displayName = "HeroLink";
 export {
-  a as HeroLink
+  l as HeroLink
 };

package/dist/hero-title.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx as l } from "react/jsx-runtime";
 import { useContext as m } from "react";
-import { twMerge as g } from "tailwind-merge";
-import { tv as u } from "tailwind-variants";
+import { twMerge as u } from "tailwind-merge";
+import { tv as g } from "tailwind-variants";
 import { HeroContext as f } from "./hero-context.js";
 function p({
   as: o,
@@ -9,7 +10,7 @@ function p({
   className: r,
   ...i
 }) {
-  const t = m(f), s = o ?? "h1", n = u({
+  const t = m(f), s = o ?? "h1", n = g({
     base: "uog:font-serif uog:font-bold uog:text-3xl uog:w-fit",
     variants: {
       variant: {
@@ -17,7 +18,7 @@ function p({
         basic: "uog:bg-yellow uog:md:text-4xl uog:text-yellow-contrast uog:p-1"
       }
     }
-  }), a = `uofg-hero-title ${g(n({ variant: t == null ? void 0 : t.variant }), r)}`;
+  }), a = `uofg-hero-title ${u(n({ variant: t == null ? void 0 : t.variant }), r)}`;
   return /* @__PURE__ */ l(s, { ...i, className: a, children: e });
 }
 p.displayName = "HeroTitle";

package/dist/hero-video.js

@@ -1,12 +1,13 @@
+"use client";
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { g as p } from "./solid-D19hAF5t.js";
-import { FontAwesomeIcon as l } from "@fortawesome/react-fontawesome";
+import { g as l } from "./solid-D19hAF5t.js";
+import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
 import { useContext as u } from "react";
 import { tv as f } from "tailwind-variants";
 import { EmbeddedVideo as s } from "./embedded-video.js";
 import { HeroContext as g } from "./hero-context.js";
 import { EmbeddedVideoModalButton as m } from "./embedded-video-modal-button.js";
-function c({ src: r, title: t, transcript: a, children: n }) {
+function c({ src: t, title: r, transcript: a, children: n }) {
   const o = u(g), i = `uofg-hero-video ${f({
     base: "",
     variants: {
@@ -16,10 +17,10 @@ function c({ src: r, title: t, transcript: a, children: n }) {
       }
     }
   })({ variant: o == null ? void 0 : o.variant })}`;
-  return (o == null ? void 0 : o.variant) === "spotlight" ? /* @__PURE__ */ e(s, { src: r, title: t, transcript: a, children: /* @__PURE__ */ d(m, { type: "yellow", className: i, children: [
-    /* @__PURE__ */ e(l, { icon: p }),
+  return (o == null ? void 0 : o.variant) === "spotlight" ? /* @__PURE__ */ e(s, { src: t, title: r, transcript: a, children: /* @__PURE__ */ d(m, { type: "yellow", className: i, children: [
+    /* @__PURE__ */ e(p, { icon: l }),
     /* @__PURE__ */ e("span", { children: n })
-  ] }) }) : /* @__PURE__ */ e(s, { src: r, title: t, transcript: a, children: /* @__PURE__ */ e(m, { type: "play-button", className: i }) });
+  ] }) }) : /* @__PURE__ */ e(s, { src: t, title: r, transcript: a, children: /* @__PURE__ */ e(m, { type: "play-button", className: i }) });
 }
 c.displayName = "HeroVideo";
 export {

package/dist/hero.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import { tv as h } from "tailwind-variants";
 import { HeroCaption as k } from "./hero-caption.js";

package/dist/link-carousel-content.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as n } from "react/jsx-runtime";
 import { useContext as u } from "react";
 import { twMerge as s } from "tailwind-merge";
 import { tv as l } from "tailwind-variants";
-import { LinkCarouselContext as a } from "./link-carousel-context.js";
+import { LinkCarouselContext as i } from "./link-carousel-context.js";
 function k({ children: t, className: e }) {
-  const o = u(a), r = l({
+  const o = u(i), r = l({
     base: "uog:relative uog:h-full uog:hidden uog:md:block",
     variants: {
       stack: {

package/dist/link-carousel-item.js

@@ -1,18 +1,19 @@
+"use client";
 import { jsx as t, Fragment as a } from "react/jsx-runtime";
-import { useContext as g } from "react";
-import { twMerge as l } from "tailwind-merge";
+import { useContext as l } from "react";
+import { twMerge as g } from "tailwind-merge";
 import { tv as m } from "tailwind-variants";
 import { LinkCarouselContext as n } from "./link-carousel-context.js";
-function k({ id: e, children: i, className: r }) {
-  const o = g(n), u = m({
+function k({ id: e, children: i, className: u }) {
+  const o = l(n), r = m({
     base: "uog:w-full uog:hidden uog:bg-white",
     variants: {
       isActive: { true: "uog:block uog:relative uog:animate-fade-in uog:z-10" },
       wasActive: { true: "uog:block uog:absolute uog:z-0 uog:top-0 uog:left-0" }
     }
-  }), s = l(
-    u({ isActive: (o == null ? void 0 : o.activeId) === e, wasActive: (o == null ? void 0 : o.previousActiveId) === e }),
-    r
+  }), s = g(
+    r({ isActive: (o == null ? void 0 : o.activeId) === e, wasActive: (o == null ? void 0 : o.previousActiveId) === e }),
+    u
   );
   return /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t("div", { className: `uofg-link-carousel-item ${s}`, children: i }) });
 }

package/dist/link-carousel-link.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as l, jsx as m } from "react/jsx-runtime";
 import { c } from "./solid-D19hAF5t.js";
 import { FontAwesomeIcon as f } from "@fortawesome/react-fontawesome";
@@ -9,8 +10,8 @@ const b = "a";
 function x({
   as: t,
   id: e,
-  children: r,
-  className: n,
+  children: n,
+  className: r,
   href: s,
   ...i
 }) {
@@ -27,12 +28,12 @@ function x({
     {
       ...i,
       href: s,
-      className: `uofg-link-carousel-link ${k(a({ stack: o == null ? void 0 : o.stack }), n)}`,
+      className: `uofg-link-carousel-link ${k(a({ stack: o == null ? void 0 : o.stack }), r)}`,
       onMouseEnter: () => {
         o == null || o.setActiveId(e);
       },
       children: [
-        r,
+        n,
         /* @__PURE__ */ m(f, { icon: c })
       ]
     }

package/dist/link-carousel-links.js

@@ -1,10 +1,11 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useContext as i } from "react";
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useContext as r } from "react";
 import { twMerge as e } from "tailwind-merge";
 import { tv as l } from "tailwind-variants";
-import { LinkCarouselContext as a } from "./link-carousel-context.js";
-function p({ children: r, className: s }) {
-  const o = i(a), t = l({
+import { LinkCarouselContext as n } from "./link-carousel-context.js";
+function p({ children: s, className: t }) {
+  const o = r(n), u = l({
     base: "uog:flex uog:flex-col uog:gap-2 uog:w-full uog:top-0 uog:md:w-1/3 uog:md:z-20",
     variants: {
       stack: {
@@ -17,7 +18,7 @@ function p({ children: r, className: s }) {
       }
     }
   })({ stack: o == null ? void 0 : o.stack, direction: o == null ? void 0 : o.direction });
-  return /* @__PURE__ */ u("div", { className: `uofg-link-carousel-links ${e(t, s)}`, children: r });
+  return /* @__PURE__ */ i("div", { className: `uofg-link-carousel-links ${e(u, t)}`, children: s });
 }
 export {
   p as LinkCarouselLinks

package/dist/statistics-item-image.js

@@ -1,12 +1,13 @@
+"use client";
 import { jsx as t } from "react/jsx-runtime";
 import { twMerge as r } from "tailwind-merge";
 const g = "img";
-function f({
+function u({
   as: e,
   src: s,
   alt: m,
-  width: a,
-  height: i,
+  width: i,
+  height: a,
   className: o,
   ...c
 }) {
@@ -16,14 +17,14 @@ function f({
     {
       src: s,
       alt: m,
-      width: a,
-      height: i,
+      width: i,
+      height: a,
       className: `uofg-statistics-item-image ${l}`,
       ...c
     }
   ) });
 }
-f.displayName = "StatisticsItemImage";
+u.displayName = "StatisticsItemImage";
 export {
-  f as StatisticsItemImage
+  u as StatisticsItemImage
 };

package/dist/statistics-item-represents.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as o } from "react/jsx-runtime";
 import { twMerge as r } from "tailwind-merge";
 function i({ children: t, className: e }) {

package/dist/statistics-item-value.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx as s } from "react/jsx-runtime";
 import { twMerge as a } from "tailwind-merge";
-function i({ children: t, className: o }) {
-  const e = a("uog:break-auto uog:p-6 uog:pb-0 uog:text-3xl uog:leading-tight uog:font-bold", o);
-  return /* @__PURE__ */ s("dt", { className: `uofg-statistics-item-value ${e}`, children: t });
+function i({ children: t, className: e }) {
+  const o = a("uog:break-auto uog:p-6 uog:pb-0 uog:text-3xl uog:leading-tight uog:font-bold", e);
+  return /* @__PURE__ */ s("dt", { className: `uofg-statistics-item-value ${o}`, children: t });
 }
 i.displayName = "StatisticsItemValue";
 export {

package/dist/statistics-item.js

@@ -1,14 +1,15 @@
+"use client";
 import { jsx as l } from "react/jsx-runtime";
 import { useContext as g, useEffect as u } from "react";
 import { twMerge as s } from "tailwind-merge";
 import { tv as a } from "tailwind-variants";
 import { StatisticsContext as i } from "./statistics-context.js";
-function n({ children: t, className: r }) {
+function n({ children: t, className: e }) {
   const o = g(i);
   u(() => {
     o == null || o.incrementCount();
   }, []);
-  const e = a({
+  const r = a({
     base: "uog:relative uog:flex uog:flex-1 uog:flex-col uog:justify-around uog:gap-2",
     variants: {
       variant: {
@@ -53,7 +54,7 @@ function n({ children: t, className: r }) {
       }
     ]
   });
-  return /* @__PURE__ */ l("div", { className: `uofg-statistics-item ${s(e({ variant: o == null ? void 0 : o.variant }), r)}`, children: t });
+  return /* @__PURE__ */ l("div", { className: `uofg-statistics-item ${s(r({ variant: o == null ? void 0 : o.variant }), e)}`, children: t });
 }
 n.displayName = "StatisticsItem";
 export {

package/dist/statistics.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e } from "react/jsx-runtime";
 import { useState as a } from "react";
 import { twMerge as m } from "tailwind-merge";
@@ -9,7 +10,7 @@ import { StatisticsItemImage as F } from "./statistics-item-image.js";
 import { StatisticsItemRepresents as N } from "./statistics-item-represents.js";
 import { StatisticsItemValue as j } from "./statistics-item-value.js";
 function v({ children: t, variant: o, className: r }) {
-  const [s, l] = a(0), [u, i] = n(), g = f({
+  const [s, l] = a(0), [u, i] = n(), c = f({
     base: "uog:mx-auto uog:my-0 uog:flex uog:flex-col uog:flex-wrap uog:sm:flex-row",
     variants: {
       divisibleByTwo: {
@@ -46,8 +47,8 @@ function v({ children: t, variant: o, className: r }) {
         class: "uog:grid uog:grid-cols-1 uog:sm:grid-cols-3"
       }
     ]
-  }), c = m(
-    g({
+  }), g = m(
+    c({
       variant: o,
       divisibleByTwo: s % 2 === 0,
       divisibleByThree: s % 3 === 0,
@@ -65,7 +66,7 @@ function v({ children: t, variant: o, className: r }) {
       children: /* @__PURE__ */ e(
         "dl",
         {
-          className: `uofg-statistics ${c}`,
+          className: `uofg-statistics ${g}`,
           style: (
             /* @ts-expect-error TypeScript doesn't like CSS Variables */
             o === "solid-colors-full" ? { "--statistic-bg-width": (i == null ? void 0 : i.contentRect.width) + "px" } : void 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {
@@ -85,5 +85,5 @@
   "bugs": {
     "url": "https://github.com/ccswbs/uofg-components/issues"
   },
-  "gitHead": "b1dbcaf5256a9b00946c016a1d9215790e12d6ef"
+  "gitHead": "5bcd9074d13e70ef452549bdf8945efca70aa895"
 }