@uoguelph/react-components 1.2.12 → 1.2.13

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

@@ -1,23 +1,40 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { g as i } from "./solid-D4xgBves.js";
 import { FontAwesomeIcon as s } from "@fortawesome/react-fontawesome";
 import { useContext as m } from "react";
 import { twMerge as l } from "tailwind-merge";
-import { Button as g } from "./button.js";
-import { EmbeddedVideoContext as a } from "./embedded-video-context.js";
-function f({ type: e, children: u, className: r }) {
-  const o = m(a);
-  if (e === "play-button") {
-    const n = l(
+import { Button as a } from "./button.js";
+import { EmbeddedVideoContext as g } from "./embedded-video-context.js";
+function f({ type: t, children: r, className: u }) {
+  const o = m(g);
+  if (t === "play-button") {
+    const d = l(
       "uog:flex uog:aspect-square uog:w-24 uog:items-center uog:justify-center uog:rounded-full uog:bg-red uog:text-4xl uog:text-white uog:transition-colors uog:hover:bg-red-focus uog:focus:bg-red-focus",
-      r
+      u
+    );
+    return /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: `uofg-embedded-video-play-button ${d}`,
+        onClick: () => o == null ? void 0 : o.setModalOpen(!0),
+        children: [
+          /* @__PURE__ */ e(s, { icon: i }),
+          /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Video" })
+        ]
+      }
     );
-    return /* @__PURE__ */ d("button", { type: "button", className: n, onClick: () => o == null ? void 0 : o.setModalOpen(!0), children: [
-      /* @__PURE__ */ t(s, { icon: i }),
-      /* @__PURE__ */ t("span", { className: "sr-only", children: "Show Video" })
-    ] });
   }
-  return /* @__PURE__ */ t(g, { type: "button", color: e, className: r, onClick: () => o == null ? void 0 : o.setModalOpen(!0), children: u });
+  return /* @__PURE__ */ e(
+    a,
+    {
+      type: "button",
+      color: t,
+      className: `uofg-embedded-video-play-button ${u}`,
+      onClick: () => o == null ? void 0 : o.setModalOpen(!0),
+      children: r
+    }
+  );
 }
 f.displayName = "EmbeddedVideoModalButton";
 export {

package/dist/hero.js

@@ -1,11 +1,11 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { tv as x } from "tailwind-variants";
-import { HeroCaption as y } from "./hero-caption.js";
-import { HeroContent as d } from "./hero-content.js";
-import { HeroContext as h } from "./hero-context.js";
-import { HeroLink as I } from "./hero-link.js";
-import { HeroTitle as P } from "./hero-title.js";
-import { HeroVideo as V } from "./hero-video.js";
+import { tv as h } from "tailwind-variants";
+import { HeroCaption as k } from "./hero-caption.js";
+import { HeroContent as x } from "./hero-content.js";
+import { HeroContext as d } from "./hero-context.js";
+import { HeroLink as E } from "./hero-link.js";
+import { HeroTitle as L } from "./hero-title.js";
+import { HeroVideo as T } from "./hero-video.js";
 const v = "img";
 function H({
   as: r,
@@ -15,10 +15,10 @@ function H({
   width: i,
   height: m,
   alignment: s,
-  children: l,
-  ...g
+  children: g,
+  ...l
 }) {
-  const c = r ?? v, u = x({
+  const u = r ?? v, c = h({
     slots: {
       base: "uog:relative uog:flex uog:w-full uog:flex-col uog:overflow-hidden",
       image: "uog:aspect-[16/9] uog:w-full uog:object-cover uog:md:aspect-[2.625]"
@@ -35,18 +35,18 @@ function H({
         }
       }
     }
-  }), { base: n, image: f } = u({ variant: e });
-  return /* @__PURE__ */ p("div", { className: n(), children: [
-    /* @__PURE__ */ o(c, { ...g, src: t, alt: a, width: i, height: m, className: f() }),
-    /* @__PURE__ */ o(h.Provider, { value: { variant: e }, children: /* @__PURE__ */ o(d, { alignment: s, children: l }) })
+  }), { base: f, image: n } = c({ variant: e });
+  return /* @__PURE__ */ p("div", { className: `uofg-hero ${f()}`, children: [
+    /* @__PURE__ */ o(u, { ...l, src: t, alt: a, width: i, height: m, className: `uofg-hero-img ${n()}` }),
+    /* @__PURE__ */ o(d.Provider, { value: { variant: e }, children: /* @__PURE__ */ o(x, { alignment: s, children: g }) })
   ] });
 }
 H.displayName = "Hero";
 export {
   H as Hero,
-  y as HeroCaption,
-  d as HeroContent,
-  I as HeroLink,
-  P as HeroTitle,
-  V as HeroVideo
+  k as HeroCaption,
+  x as HeroContent,
+  E as HeroLink,
+  L as HeroTitle,
+  T as HeroVideo
 };

package/dist/image-overlay.js

@@ -1,22 +1,22 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { twMerge as k } from "tailwind-merge";
 import { tv as w } from "tailwind-variants";
 const z = "img";
 function x({
-  as: a,
+  as: t,
   src: r,
-  width: l,
-  height: g,
-  alt: n,
-  children: i,
+  width: g,
+  height: l,
+  alt: i,
+  children: n,
   className: u,
   verticalAlignment: s = "center",
   horizontalAlignment: c = "center",
-  overlay: t = "none",
+  overlay: o = "none",
   blurred: m = !1,
   ...v
 }) {
-  const d = a ?? z, f = w({
+  const d = t ?? z, f = w({
     slots: {
       base: "uog:min-h-[50rem] uog:relative uog:flex uog:h-fit uog:w-full uog:flex-col",
       imageWrapper: "uog:absolute uog:z-10 uog:h-full uog:w-full",
@@ -113,29 +113,29 @@ function x({
       }
     ]
   }), {
-    base: h,
-    imageWrapper: y,
+    base: y,
+    imageWrapper: h,
     image: b,
     overlay: p,
     container: A
-  } = f({ blurred: m, overlay: t, verticalAlignment: s, horizontalAlignment: c });
-  return /* @__PURE__ */ o("div", { className: h(), children: [
-    /* @__PURE__ */ o("div", { className: y(), children: [
+  } = f({ blurred: m, overlay: o, verticalAlignment: s, horizontalAlignment: c });
+  return /* @__PURE__ */ a("div", { className: `uofg-image-overlay ${y()}`, children: [
+    /* @__PURE__ */ a("div", { className: `uofg-image-overlay-wrapper ${h()}`, children: [
       /* @__PURE__ */ e(
         d,
         {
           ...v,
-          className: k(b(), u),
+          className: `uofg-image-overlay-image ${k(b(), u)}`,
           src: r,
-          width: l,
-          height: g,
-          alt: n,
+          width: g,
+          height: l,
+          alt: i,
           sizes: "100vw"
         }
       ),
-      t !== "none" && /* @__PURE__ */ e("div", { className: p() })
+      o !== "none" && /* @__PURE__ */ e("div", { className: `uofg-image-overlay-overlay ${p()}` })
     ] }),
-    /* @__PURE__ */ e("div", { className: A(), children: i })
+    /* @__PURE__ */ e("div", { className: `uofg-image-overlay-content ${A()}`, children: n })
   ] });
 }
 x.displayName = "ImageOverlay";

package/dist/info.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { tv as g } from "tailwind-variants";
-function u({ children: r, color: o = "red" }) {
+function u({ children: o, color: r = "red" }) {
   const e = g({
     base: "uog:flex uog:flex-col uog:gap-1 uog:border-l-4 uog:pl-4",
     variants: {
@@ -16,7 +16,7 @@ function u({ children: r, color: o = "red" }) {
       }
     }
   });
-  return /* @__PURE__ */ l("div", { className: e({ color: o }), children: r });
+  return /* @__PURE__ */ l("div", { className: `uofg-info ${e({ color: r })}`, children: o });
 }
 u.displayName = "Info";
 export {

package/dist/layout-content.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
 import { twMerge as a } from "tailwind-merge";
-import { Container as m } from "./container.js";
+import { Container as u } from "./container.js";
 function c({ children: t, className: e, container: r = !0 }) {
-  const o = a("uofg-layout-content uog:pb-4 uog:flex-1", e);
-  return r ? /* @__PURE__ */ n(m, { id: "content", as: "main", className: o, children: t }) : /* @__PURE__ */ n("main", { id: "content", className: o, children: t });
+  const o = `uofg-layout-content ${a("uofg-layout-content uog:pb-4 uog:flex-1", e)}`;
+  return r ? /* @__PURE__ */ n(u, { id: "content", as: "main", className: o, children: t }) : /* @__PURE__ */ n("main", { id: "content", className: o, children: t });
 }
 export {
   c as LayoutContent

package/dist/layout.js

@@ -1,10 +1,10 @@
 import { jsxs as t, Fragment as u, jsx as o } from "react/jsx-runtime";
-import { Transition as l } from "@headlessui/react";
-import { tv as s } from "tailwind-variants";
-import { LoadingIndicator as c } from "./loading-indicator.js";
+import { Transition as g } from "@headlessui/react";
+import { tv as c } from "tailwind-variants";
+import { LoadingIndicator as s } from "./loading-indicator.js";
 import { LayoutContent as y } from "./layout-content.js";
 function a({ children: n, loading: e }) {
-  const r = s({
+  const r = c({
     slots: {
       placeholder: [
         "uog:text-uog-color-red",
@@ -39,12 +39,12 @@ function a({ children: n, loading: e }) {
         "uog:focus:px-2"
       ]
     }
-  }), { placeholder: i, skipLink: g } = r();
+  }), { placeholder: i, skipLink: l } = r();
   return /* @__PURE__ */ t(u, { children: [
-    /* @__PURE__ */ o(l, { show: !!e, children: /* @__PURE__ */ o("div", { className: i(), children: /* @__PURE__ */ o(c, { children: typeof e != "boolean" && e }) }) }),
+    /* @__PURE__ */ o(g, { show: !!e, children: /* @__PURE__ */ o("div", { className: `uofg-layout-placeholder ${i()}`, children: /* @__PURE__ */ o(s, { children: typeof e != "boolean" && e }) }) }),
     !e && /* @__PURE__ */ t(u, { children: [
-      /* @__PURE__ */ o("a", { className: g(), href: "#content", children: "Skip to main content" }),
-      /* @__PURE__ */ o("div", { className: "flex flex-1 flex-col", children: n })
+      /* @__PURE__ */ o("a", { className: l(), href: "#content", children: "Skip to main content" }),
+      /* @__PURE__ */ o("div", { className: "uofg-layout flex flex-1 flex-col", children: n })
     ] })
   ] });
 }

package/dist/link-carousel-link.js

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { jsxs as l, jsx as m } from "react/jsx-runtime";
 import { c } from "./solid-D4xgBves.js";
 import { FontAwesomeIcon as f } from "@fortawesome/react-fontawesome";
 import { useContext as g } from "react";
@@ -14,7 +14,7 @@ function x({
   href: s,
   ...i
 }) {
-  const a = t ?? b, o = g(C), u = p({
+  const u = t ?? b, o = g(C), a = p({
     base: "uog:w-full uog:flex-1 uog:text-2xl uog:bg-black uog:flex uog:items-center uog:justify-between uog:text-black-contrast uog:p-6",
     variants: {
       stack: {
@@ -22,18 +22,18 @@ function x({
       }
     }
   });
-  return /* @__PURE__ */ m(
-    a,
+  return /* @__PURE__ */ l(
+    u,
     {
       ...i,
       href: s,
-      className: k(u({ stack: o == null ? void 0 : o.stack }), n),
+      className: `uofg-link-carousel-link ${k(a({ stack: o == null ? void 0 : o.stack }), n)}`,
       onMouseEnter: () => {
         o == null || o.setActiveId(e);
       },
       children: [
         r,
-        /* @__PURE__ */ l(f, { icon: c })
+        /* @__PURE__ */ m(f, { icon: c })
       ]
     }
   );

package/dist/link.js

@@ -8,9 +8,9 @@ function b({
   color: n = "base",
   children: e,
   className: t,
-  ...r
+  ...l
 }) {
-  const s = o ?? a, l = c({
+  const r = o ?? a, s = c({
     base: "uog:inline-flex uog:gap-[1em] uog:underline uog:decoration-current uog:transition-colors uog:hover:decoration-transparent uog:focus:ring-2 uog:focus-visible:ring-offset-2 uog:focus-visible:outline-none uog:text-body-copy-link",
     variants: {
       color: {
@@ -20,7 +20,7 @@ function b({
       }
     }
   });
-  return /* @__PURE__ */ u(s, { ...r, href: i, className: g(l({ color: n }), t), children: e });
+  return /* @__PURE__ */ u(r, { ...l, href: i, className: `uofg-link ${g(s({ color: n }), t)}`, children: e });
 }
 b.displayName = "Link";
 export {

package/dist/list-item.js

@@ -1,9 +1,9 @@
 import { jsx as o } from "react/jsx-runtime";
-import { twMerge as r } from "tailwind-merge";
-function m({ className: t, children: e, ...i }) {
-  return /* @__PURE__ */ o("li", { ...i, className: r("uog:relative uog:h-fit uog:w-full", t), children: e });
+import { twMerge as m } from "tailwind-merge";
+function r({ className: t, children: e, ...i }) {
+  return /* @__PURE__ */ o("li", { ...i, className: `uofg-list-item ${m("uog:relative uog:h-fit uog:w-full", t)}`, children: e });
 }
-m.displayName = "ListItem";
+r.displayName = "ListItem";
 export {
-  m as ListItem
+  r as ListItem
 };

package/dist/list.js

@@ -55,7 +55,7 @@ function v({
     level: l.parent === e ? l.level % 3 : 0,
     nested: l.level > 0
   });
-  return /* @__PURE__ */ t(o, { ...a, className: c(u, r), children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(o, { ...a, className: `uofg-list ${c(u, r)}`, children: /* @__PURE__ */ t(
     s.Provider,
     {
       value: {

package/dist/modal.js

@@ -1,10 +1,10 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { e as f } from "./solid-D4xgBves.js";
 import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
-import { Dialog as x, DialogBackdrop as h, CloseButton as w, DialogPanel as y } from "@headlessui/react";
+import { Dialog as x, DialogBackdrop as w, CloseButton as h, DialogPanel as y } from "@headlessui/react";
 import { tv as N } from "tailwind-variants";
-function v({ open: t, onClose: a = () => {
-}, role: u = "dialog", labelledBy: r, centered: g, children: l }) {
+function k({ open: u, onClose: a = () => {
+}, role: r = "dialog", labelledBy: t, centered: l, children: g }) {
   const s = N({
     slots: {
       base: "uog:ease-out uog:relative uog:z-50 uog:transition uog:duration-300 uog:data-[closed]:opacity-0",
@@ -21,19 +21,30 @@ function v({ open: t, onClose: a = () => {
         }
       }
     }
-  }), { base: i, backdrop: n, wrapper: c, panelWrapper: d, panel: p, closeButton: m } = s({ centered: g });
-  return /* @__PURE__ */ e(x, { transition: !0, open: t, role: u, onClose: a, className: i(), "aria-labelledby": r, children: [
-    /* @__PURE__ */ o(h, { transition: !0, className: n() }),
-    /* @__PURE__ */ o("div", { className: c(), children: /* @__PURE__ */ e("div", { className: d(), children: [
-      /* @__PURE__ */ e(w, { onClick: a, className: m(), children: [
-        /* @__PURE__ */ o(b, { icon: f }),
-        /* @__PURE__ */ o("span", { className: "uog:md:sr-only uog:text-base", children: "Close Modal" })
-      ] }),
-      /* @__PURE__ */ o(y, { className: p(), children: l })
-    ] }) })
-  ] });
+  }), { base: i, backdrop: n, wrapper: d, panelWrapper: c, panel: p, closeButton: m } = s({ centered: l });
+  return /* @__PURE__ */ e(
+    x,
+    {
+      transition: !0,
+      open: u,
+      role: r,
+      onClose: a,
+      className: `uofg-modal ${i()}`,
+      "aria-labelledby": t,
+      children: [
+        /* @__PURE__ */ o(w, { transition: !0, className: `uofg-modal-backdrop ${n()}` }),
+        /* @__PURE__ */ o("div", { className: `uofg-modal-wrapper ${d()}`, children: /* @__PURE__ */ e("div", { className: `uofg-modal-panel-wrapper ${c()}`, children: [
+          /* @__PURE__ */ e(h, { onClick: a, className: `uofg-modal-close-button ${m()}`, children: [
+            /* @__PURE__ */ o(b, { icon: f }),
+            /* @__PURE__ */ o("span", { className: "uog:md:sr-only uog:text-base", children: "Close Modal" })
+          ] }),
+          /* @__PURE__ */ o(y, { className: `uofg-modal-panel ${p()}`, children: g })
+        ] }) })
+      ]
+    }
+  );
 }
-v.displayName = "Modal";
+k.displayName = "Modal";
 export {
-  v as Modal
+  k as Modal
 };

package/dist/radio-group.js

@@ -1,11 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { RadioGroup as d } from "@headlessui/react";
-import { useState as c, useMemo as f } from "react";
+import { useState as f, useMemo as c } from "react";
 import { tv as n } from "tailwind-variants";
 import { RadioContext as x } from "./radio-context.js";
-import { Radio as y } from "./radio.js";
-function R({ name: s, inline: a = !1, onChange: o, children: i }) {
-  const [l, e] = c(null), m = f(() => ({ setSelected: e }), [e]), u = n({
+import { Radio as j } from "./radio.js";
+function R({ name: a, inline: s = !1, onChange: o, children: i }) {
+  const [l, e] = f(null), u = c(() => ({ setSelected: e }), [e]), m = n({
     slots: {
       base: "uog:flex uog:gap-2"
     },
@@ -16,22 +16,22 @@ function R({ name: s, inline: a = !1, onChange: o, children: i }) {
         }
       }
     }
-  }), { base: p } = u({ inline: a });
-  return /* @__PURE__ */ r(
+  }), { base: p } = m({ inline: s });
+  return /* @__PURE__ */ t(
     d,
     {
-      name: s,
+      name: a,
       value: l,
-      onChange: (t) => {
-        e(t), o == null || o(t);
+      onChange: (r) => {
+        e(r), o == null || o(r);
       },
-      className: p(),
-      children: /* @__PURE__ */ r(x.Provider, { value: m, children: i })
+      className: `uofg-radio-group ${p()}`,
+      children: /* @__PURE__ */ t(x.Provider, { value: u, children: i })
     }
   );
 }
 R.displayName = "RadioGroup";
 export {
-  y as Radio,
+  j as Radio,
   R as RadioGroup
 };

package/dist/radio.js

@@ -1,9 +1,9 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { Field as n, Radio as d, Label as f } from "@headlessui/react";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Field as d, Radio as f, Label as n } from "@headlessui/react";
 import { useContext as m, useEffect as b, Fragment as p } from "react";
 import { tv as h } from "tailwind-variants";
 import { RadioContext as x } from "./radio-context.js";
-function k({ selected: i, children: u, value: r }) {
+function j({ selected: i, children: u, value: r }) {
   const o = m(x);
   b(() => {
     i && (o == null || o.setSelected(r));
@@ -25,12 +25,12 @@ function k({ selected: i, children: u, value: r }) {
         }
       }
     }
-  }), { field: l, radio: g, circle: t } = a();
-  return /* @__PURE__ */ c(n, { className: l(), children: [
-    /* @__PURE__ */ e(d, { value: r, as: p, children: ({ checked: s }) => /* @__PURE__ */ e("span", { className: g({ checked: s }), children: /* @__PURE__ */ e("span", { className: t({ checked: s }) }) }) }),
-    /* @__PURE__ */ e(f, { children: u })
+  }), { field: l, radio: g, circle: c } = a();
+  return /* @__PURE__ */ t(d, { className: `uofg-radio-field ${l()}`, children: [
+    /* @__PURE__ */ e(f, { value: r, as: p, children: ({ checked: s }) => /* @__PURE__ */ e("span", { className: `uofg-radio ${g({ checked: s })}`, children: /* @__PURE__ */ e("span", { className: `uofg-radio-circle ${c({ checked: s })}` }) }) }),
+    /* @__PURE__ */ e(n, { className: "uofg-radio-label", children: u })
   ] });
 }
 export {
-  k as Radio
+  j as Radio
 };

package/dist/statistics-item-image.js

@@ -10,8 +10,18 @@ function f({
   className: o,
   ...c
 }) {
-  const n = e ?? g, l = r("uofg-statistics-item-image uog:w-full", o);
-  return /* @__PURE__ */ t("dd", { className: "contents", children: /* @__PURE__ */ t(n, { src: s, alt: m, width: a, height: i, className: l, ...c }) });
+  const n = e ?? g, l = r("uog:w-full", o);
+  return /* @__PURE__ */ t("dd", { className: "contents", children: /* @__PURE__ */ t(
+    n,
+    {
+      src: s,
+      alt: m,
+      width: a,
+      height: i,
+      className: `uofg-statistics-item-image ${l}`,
+      ...c
+    }
+  ) });
 }
 f.displayName = "StatisticsItemImage";
 export {

package/dist/statistics-item-represents.js

@@ -1,11 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
 import { twMerge as r } from "tailwind-merge";
 function i({ children: t, className: e }) {
-  const s = r(
-    "uofg-statistics-item-represents uog:text-normal uog:p-6 uog:pt-0 uog:text-lg uog:font-normal",
-    e
-  );
-  return /* @__PURE__ */ o("dd", { className: s, children: t });
+  const s = r("uog:text-normal uog:p-6 uog:pt-0 uog:text-lg uog:font-normal", e);
+  return /* @__PURE__ */ o("dd", { className: `uofg-statistics-item-represents ${s}`, children: t });
 }
 i.displayName = "StatisticsItemRepresents";
 export {

package/dist/statistics-item-value.js

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

package/dist/statistics-item.js

@@ -9,7 +9,7 @@ function n({ children: t, className: r }) {
     o == null || o.incrementCount();
   }, []);
   const e = a({
-    base: "uofg-statistics-item uog:relative uog:flex uog:flex-1 uog:flex-col uog:justify-around uog:gap-2",
+    base: "uog:relative uog:flex uog:flex-1 uog:flex-col uog:justify-around uog:gap-2",
     variants: {
       variant: {
         "solid-colors-full": [
@@ -53,7 +53,7 @@ function n({ children: t, className: r }) {
       }
     ]
   });
-  return /* @__PURE__ */ l("div", { className: s(e({ variant: o == null ? void 0 : o.variant }), r), children: t });
+  return /* @__PURE__ */ l("div", { className: `uofg-statistics-item ${s(e({ variant: o == null ? void 0 : o.variant }), r)}`, children: t });
 }
 n.displayName = "StatisticsItem";
 export {

package/dist/statistics.js

@@ -1,16 +1,16 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useState as d } from "react";
-import { twMerge as a } from "tailwind-merge";
-import { tv as m } from "tailwind-variants";
-import { u as f } from "./use-resize-observer-DmddO4OQ.js";
-import { StatisticsContext as n } from "./statistics-context.js";
-import { StatisticsItem as T } from "./statistics-item.js";
+import { jsx as e } from "react/jsx-runtime";
+import { useState as a } from "react";
+import { twMerge as m } from "tailwind-merge";
+import { tv as f } from "tailwind-variants";
+import { u as n } from "./use-resize-observer-DmddO4OQ.js";
+import { StatisticsContext as p } from "./statistics-context.js";
+import { StatisticsItem as I } from "./statistics-item.js";
 import { StatisticsItemImage as F } from "./statistics-item-image.js";
-import { StatisticsItemRepresents as R } from "./statistics-item-represents.js";
-import { StatisticsItemValue as V } from "./statistics-item-value.js";
-function p({ children: e, variant: o, className: r }) {
-  const [i, l] = d(0), [u, s] = f(), g = m({
-    base: "uofg-statistics uog:mx-auto uog:my-0 uog:flex uog:flex-col uog:flex-wrap uog:sm:flex-row",
+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({
+    base: "uog:mx-auto uog:my-0 uog:flex uog:flex-col uog:flex-wrap uog:sm:flex-row",
     variants: {
       divisibleByTwo: {
         true: ""
@@ -46,42 +46,42 @@ function p({ children: e, variant: o, className: r }) {
         class: "uog:grid uog:grid-cols-1 uog:sm:grid-cols-3"
       }
     ]
-  });
-  return /* @__PURE__ */ t(
-    n.Provider,
+  }), c = m(
+    g({
+      variant: o,
+      divisibleByTwo: s % 2 === 0,
+      divisibleByThree: s % 3 === 0,
+      divisibleByFour: s % 4 === 0
+    }),
+    r
+  );
+  return /* @__PURE__ */ e(
+    p.Provider,
     {
       value: {
         variant: o,
-        incrementCount: () => l((c) => c + 1)
+        incrementCount: () => l((d) => d + 1)
       },
-      children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ e(
         "dl",
         {
-          className: a(
-            g({
-              variant: o,
-              divisibleByTwo: i % 2 === 0,
-              divisibleByThree: i % 3 === 0,
-              divisibleByFour: i % 4 === 0
-            }),
-            r
-          ),
+          className: `uofg-statistics ${c}`,
           style: (
             /* @ts-expect-error TypeScript doesn't like CSS Variables */
-            o === "solid-colors-full" ? { "--statistic-bg-width": (s == null ? void 0 : s.contentRect.width) + "px" } : void 0
+            o === "solid-colors-full" ? { "--statistic-bg-width": (i == null ? void 0 : i.contentRect.width) + "px" } : void 0
           ),
           ref: u,
-          children: e
+          children: t
         }
       )
     }
   );
 }
-p.displayName = "Statistics";
+v.displayName = "Statistics";
 export {
-  p as Statistics,
-  T as StatisticsItem,
+  v as Statistics,
+  I as StatisticsItem,
   F as StatisticsItemImage,
-  R as StatisticsItemRepresents,
-  V as StatisticsItemValue
+  N as StatisticsItemRepresents,
+  j as StatisticsItemValue
 };