@uoguelph/react-components 1.6.0-rc.7 → 1.6.0-rc.9

package/dist/carousel.js

@@ -1,49 +1,49 @@
 "use client";
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { d as k, e as I } from "./solid-CwgZbR1c.js";
-import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
-import { Children as $, useRef as x, useState as A, useEffect as F } from "react";
-import { tv as L } from "tailwind-variants";
-import { l as S, b as q, m as w, c as M } from "./math-utils-CnAd98v6.js";
-const R = (c, h, t) => {
-  const o = c.scrollLeft, n = performance.now();
-  return new Promise((r) => {
-    const f = (e) => {
-      const u = e - n, i = q(Math.min(u / t, 1), 0.25, 0, 0.25, 1);
-      c.scrollLeft = S(o, h, i), u < t ? requestAnimationFrame(f) : r();
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { d as I, e as $ } from "./solid-CwgZbR1c.js";
+import { FontAwesomeIcon as w } from "@fortawesome/react-fontawesome";
+import { Children as A, useRef as b, useState as F, useEffect as L } from "react";
+import { tv as S } from "tailwind-variants";
+import { l as q, b as M, m as C, c as R } from "./math-utils-CnAd98v6.js";
+const z = (l, a, f) => {
+  const t = l.scrollLeft, r = performance.now();
+  return new Promise((n) => {
+    const o = (h) => {
+      const e = h - r, d = M(Math.min(e / f, 1), 0.25, 0, 0.25, 1);
+      l.scrollLeft = q(t, a, d), e < f ? requestAnimationFrame(o) : n();
     };
-    requestAnimationFrame(f);
+    requestAnimationFrame(o);
   });
 };
-function G({ children: c, display: h = 1, loop: t = "none" }) {
-  const o = $.count(c), n = Math.max(h, 1), r = x(null), f = x(0), [e, u] = A(0), i = o - n, d = x(!1);
-  F(() => {
+function H({ id: l, children: a, display: f = 1, loop: t = "none" }) {
+  const r = A.count(a), n = Math.max(f, 1), o = b(null), h = b(0), [e, d] = F(0), u = r - n, x = b(!1);
+  L(() => {
     var s;
-    if (!r.current)
+    if (!o.current)
       return;
-    const l = ((s = r.current) == null ? void 0 : s.offsetWidth) / n;
-    (t === "jump" || t === "none") && (d.current = !0, R(r.current, l * e, 250).then(() => {
-      d.current = !1;
-    })), f.current = e;
-  }, [e, t, i, n]);
-  const b = (l) => {
-    if (d.current) return;
+    const i = ((s = o.current) == null ? void 0 : s.offsetWidth) / n;
+    (t === "jump" || t === "none") && (x.current = !0, z(o.current, i * e, 250).then(() => {
+      x.current = !1;
+    })), h.current = e;
+  }, [e, t, u, n]);
+  const v = (i) => {
+    if (x.current) return;
     let s;
     switch (t) {
       case "none":
-        s = M(e + l, 0, i);
+        s = R(e + i, 0, u);
         break;
       case "jump":
-        s = w(e + l, i + 1);
+        s = C(e + i, u + 1);
         break;
       case "continuous":
-        s = w(e + l, o);
+        s = C(e + i, r);
         break;
       default:
         s = 0;
     }
-    u(s);
-  }, C = L({
+    d(s);
+  }, y = S({
     slots: {
       base: "relative flex h-fit min-h-[7rem] w-full flex-col-reverse",
       contentContainer: "grid w-full flex-1 grid-cols-[repeat(var(--items),calc(100%/var(--display)))] overflow-x-hidden [&>*]:[grid-row:1]",
@@ -68,47 +68,47 @@ function G({ children: c, display: h = 1, loop: t = "none" }) {
         }
       }
     }
-  }), v = o > n, { base: y, contentContainer: N, controlContainer: j, control: p } = C({ showControls: v });
-  return /* @__PURE__ */ m("div", { className: `uofg-carousel ${y()}`, children: [
-    v && /* @__PURE__ */ m("div", { className: `uofg-carousel-control-container ${j()}`, children: [
+  }), p = r > n, { base: N, contentContainer: j, controlContainer: k, control: g } = y({ showControls: p });
+  return /* @__PURE__ */ m("div", { id: l, className: `uofg-carousel ${N()}`, children: [
+    p && /* @__PURE__ */ m("div", { className: `uofg-carousel-control-container ${k()}`, children: [
       /* @__PURE__ */ m(
         "button",
         {
-          onClick: () => b(-1),
-          className: `uofg-carousel-shift-left ${p({ showControls: !(t === "none" && e === 0), direction: "left" })}`,
+          onClick: () => v(-1),
+          className: `uofg-carousel-shift-left ${g({ showControls: !(t === "none" && e === 0), direction: "left" })}`,
           children: [
-            /* @__PURE__ */ a("span", { className: "sr-only", children: "Shift left" }),
-            /* @__PURE__ */ a(g, { icon: k })
+            /* @__PURE__ */ c("span", { className: "sr-only", children: "Shift left" }),
+            /* @__PURE__ */ c(w, { icon: I })
           ]
         }
       ),
       /* @__PURE__ */ m(
         "button",
         {
-          onClick: () => b(1),
-          className: `uofg-carousel-shift-right ${p({ showControls: !(t === "none" && e === i), direction: "right" })}`,
+          onClick: () => v(1),
+          className: `uofg-carousel-shift-right ${g({ showControls: !(t === "none" && e === u), direction: "right" })}`,
           children: [
-            /* @__PURE__ */ a("span", { className: "sr-only", children: "Shift right" }),
-            /* @__PURE__ */ a(g, { icon: I })
+            /* @__PURE__ */ c("span", { className: "sr-only", children: "Shift right" }),
+            /* @__PURE__ */ c(w, { icon: $ })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ c(
       "div",
       {
-        className: `uofg-carousel-content-container ${N()}`,
-        ref: r,
+        className: `uofg-carousel-content-container ${j()}`,
+        ref: o,
         style: {
           // Define CSS variables for the grid layout
-          "--items": o,
+          "--items": r,
           "--display": n
         },
-        children: c
+        children: a
       }
     )
   ] });
 }
 export {
-  G as Carousel
+  H as Carousel
 };

package/dist/components/carousel/carousel.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 export type CarouselProps = PropsWithChildren<{
+    id?: string;
     /**
      * The number of items to display at once
      *
@@ -17,4 +18,4 @@ export type CarouselProps = PropsWithChildren<{
  * The Carousel component is used to display a series of items in a horizontal row, allowing the user to scroll through
  * them.
  */
-export declare function Carousel({ children, display, loop }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ id, children, display, loop }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/contact/contact.d.ts

@@ -4,6 +4,7 @@ import { ContactName } from './contact-name';
 import { ContactPhone } from './contact-phone';
 import { ContactTitle } from './contact-title';
 export type ContactProps = PropsWithChildren<{
+    id?: string;
     /** Additional classes to apply to the contact */
     className?: string;
 }>;
@@ -11,7 +12,7 @@ export type ContactProps = PropsWithChildren<{
  * The Contact component is a container used to group contact information like name, title, phone number, and email
  * address in a styled, organized layout
  */
-export declare function Contact({ children, className }: ContactProps): import("react/jsx-runtime").JSX.Element;
+export declare function Contact({ id, children, className }: ContactProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Contact {
     var displayName: string;
 }

package/dist/components/grid/grid.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 type Breakpoints = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type GridProps = PropsWithChildren<{
+    id?: string;
     /** Extra CSS classes to add to the grid container (optional). */
     className?: string;
     /**
@@ -32,7 +33,7 @@ export type GridProps = PropsWithChildren<{
         y: number | string;
     };
 }>;
-export declare function Grid({ template, major, gap, alignment, children, className }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ id, template, major, gap, alignment, children, className }: GridProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Grid {
     var displayName: string;
 }

package/dist/components/info/info.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 export type InfoProps = PropsWithChildren<{
+    id?: string;
     /**
      * The color of the left border in the info component.
      *
@@ -7,7 +8,7 @@ export type InfoProps = PropsWithChildren<{
      */
     color?: 'red' | 'yellow' | 'blue' | 'green' | 'grey-light' | 'grey-dark' | 'black' | 'white';
 }>;
-export declare function Info({ children, color }: InfoProps): import("react/jsx-runtime").JSX.Element;
+export declare function Info({ id, children, color }: InfoProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Info {
     var displayName: string;
 }

package/dist/components/link-carousel/link-carousel.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 export type LinkCarouselProps = PropsWithChildren<{
+    id?: string;
     /** Additional classes to apply to the link carousel. */
     className?: string;
     /** Whether the carousel links should stack on top of the content, rather than beside it. */
@@ -18,7 +19,7 @@ export type LinkCarouselProps = PropsWithChildren<{
  * and is not focus friendly. If your content doesn't match this criteria, use the Carousel component instead, or find
  * another way to display your content.
  */
-export declare function LinkCarousel({ children, className, stack, direction }: LinkCarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkCarousel({ id, children, className, stack, direction }: LinkCarouselProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace LinkCarousel {
     var displayName: string;
 }

package/dist/components/navigation/navigation.d.ts

@@ -1,9 +1,10 @@
 import { PropsWithChildren } from 'react';
 export type NavigationProps = PropsWithChildren<{
+    id?: string;
     /** Additional classes to add the navigation */
     className?: string;
 }>;
-export declare function Navigation({ className, children }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Navigation({ id, className, children }: NavigationProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Navigation {
     var displayName: string;
 }

package/dist/components/statistics/statistics.d.ts

@@ -1,12 +1,13 @@
 import { PropsWithChildren } from 'react';
 export type StatisticsProps = PropsWithChildren<{
+    id?: string;
     /** The variant of the statistics */
     variant: 'solid-colors-full' | 'solid-colors-no-gap' | 'solid-colors' | 'light-grey' | 'left-border';
     /** Additional classes to apply to the statistics */
     className?: string;
 }>;
 /** The Statistic component is used to display a list of statistics in a grid layout. */
-export declare function Statistics({ children, variant, className }: StatisticsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Statistics({ id, children, variant, className }: StatisticsProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Statistics {
     var displayName: string;
 }

package/dist/components/story/story.d.ts

@@ -1,9 +1,10 @@
 import { PropsWithChildren } from 'react';
 export type StoryProps = PropsWithChildren<{
+    id?: string;
     /** Additional classes to apply to the component. */
     className?: string;
 }>;
-export declare function Story({ children, className }: StoryProps): import("react/jsx-runtime").JSX.Element;
+export declare function Story({ id, children, className }: StoryProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Story {
     var displayName: string;
 }

package/dist/components/tabs/tabs.d.ts

@@ -1,9 +1,10 @@
 import { PropsWithChildren } from 'react';
 export type TabsProps = PropsWithChildren<{
+    id?: string;
     /** Additional classes to apply to the component. */
     className?: string;
 }>;
-export declare function Tabs({ children, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ id, children, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Tabs {
     var displayName: string;
 }

package/dist/contact.js

@@ -1,18 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import { twMerge as c } from "tailwind-merge";
-import { ContactEmail as i } from "./contact-email.js";
-import { ContactName as x } from "./contact-name.js";
-import { ContactPhone as C } from "./contact-phone.js";
-import { ContactTitle as b } from "./contact-title.js";
-function a({ children: t, className: o }) {
-  const e = c("mb-2 flex flex-col bg-grey-light-bg p-4 text-body-copy-on-light", o);
-  return /* @__PURE__ */ r("div", { className: `uofg-contact ${e}`, children: t });
+import { jsx as c } from "react/jsx-runtime";
+import { twMerge as a } from "tailwind-merge";
+import { ContactEmail as l } from "./contact-email.js";
+import { ContactName as g } from "./contact-name.js";
+import { ContactPhone as s } from "./contact-phone.js";
+import { ContactTitle as y } from "./contact-title.js";
+function n({ id: t, children: o, className: e }) {
+  const r = a("mb-2 flex flex-col bg-grey-light-bg p-4 text-body-copy-on-light", e);
+  return /* @__PURE__ */ c("div", { id: t, className: `uofg-contact ${r}`, children: o });
 }
-a.displayName = "Contact";
+n.displayName = "Contact";
 export {
-  a as Contact,
-  i as ContactEmail,
-  x as ContactName,
-  C as ContactPhone,
-  b as ContactTitle
+  n as Contact,
+  l as ContactEmail,
+  g as ContactName,
+  s as ContactPhone,
+  y as ContactTitle
 };

package/dist/grid.js

@@ -1,8 +1,8 @@
-import { jsx as c } from "react/jsx-runtime";
-import { twMerge as g } from "tailwind-merge";
-import { tv as f } from "tailwind-variants";
-function h({ template: r, major: t = "column", gap: e, alignment: s, children: l, className: m }) {
-  const a = f({
+import { jsx as g } from "react/jsx-runtime";
+import { twMerge as f } from "tailwind-merge";
+import { tv as h } from "tailwind-variants";
+function n({ id: l, template: r, major: t = "column", gap: e, alignment: s, children: m, className: a }) {
+  const i = h({
     base: "grid gap-x-(--uofg-grid-gap-x) gap-y-(--uofg-grid-gap-y)",
     variants: {
       major: { row: "grid-flow-col", column: "" },
@@ -97,25 +97,26 @@ function h({ template: r, major: t = "column", gap: e, alignment: s, children: l
     has2XlTemplate: r["2xl"] !== void 0,
     alignmentX: (s == null ? void 0 : s.x) ?? "start",
     alignmentY: (s == null ? void 0 : s.y) ?? "start"
-  }), i = Object.entries(r).reduce(
-    (o, [u, d]) => (o[`--uofg-grid-${u}-template-${t}`] = d.join(" "), o),
+  }), u = Object.entries(r).reduce(
+    (o, [d, c]) => (o[`--uofg-grid-${d}-template-${t}`] = c.join(" "), o),
     {}
   );
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: `uofg-grid ${g(a, m)}`,
+      id: l,
+      className: `uofg-grid ${f(i, a)}`,
       style: {
-        ...i,
+        ...u,
         // @ts-ignore
         "--uofg-grid-gap-x": typeof (e == null ? void 0 : e.x) == "string" ? e == null ? void 0 : e.x : `${e == null ? void 0 : e.x}px`,
         "--uofg-grid-gap-y": typeof (e == null ? void 0 : e.y) == "string" ? e == null ? void 0 : e.y : `${e == null ? void 0 : e.y}px`
       },
-      children: l
+      children: m
     }
   );
 }
-h.displayName = "Grid";
+n.displayName = "Grid";
 export {
-  h as Grid
+  n as Grid
 };

package/dist/info.js

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

package/dist/link-carousel.js

@@ -1,28 +1,28 @@
 "use client";
 import { jsx as u } from "react/jsx-runtime";
-import { useMemo as p, useState as d, useRef as v, Children as k, isValidElement as C } from "react";
-import { twMerge as I } from "tailwind-merge";
-import { tv as L } from "tailwind-variants";
-import { LinkCarouselContext as x } from "./link-carousel-context.js";
-import { LinkCarouselLink as A } from "./link-carousel-link.js";
-import { LinkCarouselContent as F } from "./link-carousel-content.js";
-import { LinkCarouselItem as S } from "./link-carousel-item.js";
-import { LinkCarouselLinks as $ } from "./link-carousel-links.js";
-function w(r) {
-  let t = null;
-  function o(i) {
-    k.forEach(i, (e) => {
-      if (t) return;
-      const n = C(e);
-      n && e.type === A ? t = e.props.id : n && e.props.children && o(e.props.children);
+import { useMemo as d, useState as v, useRef as k, Children as C, isValidElement as I } from "react";
+import { twMerge as L } from "tailwind-merge";
+import { tv as x } from "tailwind-variants";
+import { LinkCarouselContext as A } from "./link-carousel-context.js";
+import { LinkCarouselLink as w } from "./link-carousel-link.js";
+import { LinkCarouselContent as R } from "./link-carousel-content.js";
+import { LinkCarouselItem as V } from "./link-carousel-item.js";
+import { LinkCarouselLinks as q } from "./link-carousel-links.js";
+function h(i) {
+  let r = null;
+  function t(n) {
+    C.forEach(n, (e) => {
+      if (r) return;
+      const o = I(e);
+      o && e.type === w ? r = e.props.id : o && e.props.children && t(e.props.children);
     });
   }
-  return o(r), t;
+  return t(i), r;
 }
-function h({ children: r, className: t, stack: o = !1, direction: i = "left" }) {
-  const e = p(() => w(r), [r]), [n, l] = d(e), s = v(null), f = (c) => {
-    l((m) => (s.current = m, c));
-  }, a = L({
+function g({ id: i, children: r, className: t, stack: n = !1, direction: e = "left" }) {
+  const o = d(() => h(r), [r]), [l, f] = v(o), s = k(null), a = (m) => {
+    f((p) => (s.current = p, m));
+  }, c = x({
     base: "relative flex h-fit w-full overflow-hidden",
     variants: {
       direction: {
@@ -31,15 +31,15 @@ function h({ children: r, className: t, stack: o = !1, direction: i = "left" })
       }
     }
   });
-  return /* @__PURE__ */ u("div", { className: `uofg-link-carousel ${I(a({ direction: i }), t)}`, children: /* @__PURE__ */ u(
-    x.Provider,
+  return /* @__PURE__ */ u("div", { id: i, className: `uofg-link-carousel ${L(c({ direction: e }), t)}`, children: /* @__PURE__ */ u(
+    A.Provider,
     {
       value: {
         previousActiveId: s.current,
-        activeId: n,
-        setActiveId: f,
-        stack: o ?? !1,
-        direction: i,
+        activeId: l,
+        setActiveId: a,
+        stack: n ?? !1,
+        direction: e,
         clearPreviousActiveId: () => {
           s.current = null;
         }
@@ -48,11 +48,11 @@ function h({ children: r, className: t, stack: o = !1, direction: i = "left" })
     }
   ) });
 }
-h.displayName = "LinkCarousel";
+g.displayName = "LinkCarousel";
 export {
-  h as LinkCarousel,
-  F as LinkCarouselContent,
-  S as LinkCarouselItem,
-  A as LinkCarouselLink,
-  $ as LinkCarouselLinks
+  g as LinkCarousel,
+  R as LinkCarouselContent,
+  V as LinkCarouselItem,
+  w as LinkCarouselLink,
+  q as LinkCarouselLinks
 };

package/dist/navigation.js

@@ -1,12 +1,12 @@
 import { jsx as o } from "react/jsx-runtime";
-import { twMerge as e } from "tailwind-merge";
-import { NavigationLink as g } from "./navigation-link.js";
-function n({ className: a, children: i }) {
-  const t = e("flex w-full flex-col gap-1 border-b-4 border-yellow md:flex-row", a);
-  return /* @__PURE__ */ o("nav", { className: "uofg-navigation contents", children: /* @__PURE__ */ o("ul", { className: `uofg-navigation-list ${t}`, children: i }) });
+import { twMerge as n } from "tailwind-merge";
+import { NavigationLink as m } from "./navigation-link.js";
+function r({ id: a, className: i, children: t }) {
+  const e = n("flex w-full flex-col gap-1 border-b-4 border-yellow md:flex-row", i);
+  return /* @__PURE__ */ o("nav", { id: a, className: "uofg-navigation contents", children: /* @__PURE__ */ o("ul", { className: `uofg-navigation-list ${e}`, children: t }) });
 }
-n.displayName = "Navigation";
+r.displayName = "Navigation";
 export {
-  n as Navigation,
-  g as NavigationLink
+  r as Navigation,
+  m as NavigationLink
 };

package/dist/statistics.js

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

package/dist/story.js

@@ -1,24 +1,24 @@
-import { jsx as e } from "react/jsx-runtime";
-import { twMerge as m } from "tailwind-merge";
-import { StoryBackground as a } from "./story-background.js";
-import { StoryBackgroundImage as s } from "./story-background-image.js";
-import { StoryBody as S } from "./story-body.js";
-import { StoryFooter as l } from "./story-footer.js";
-import { StoryForeground as i } from "./story-foreground.js";
-import { StoryForegroundContent as B } from "./story-foreground-content.js";
-import { StoryForegroundImage as w } from "./story-foreground-image.js";
-function f({ children: o, className: r }) {
-  const t = m("flex w-full flex-col", r);
-  return /* @__PURE__ */ e("div", { className: `uofg-story ${t}`, children: o });
+import { jsx as m } from "react/jsx-runtime";
+import { twMerge as f } from "tailwind-merge";
+import { StoryBackground as g } from "./story-background.js";
+import { StoryBackgroundImage as u } from "./story-background-image.js";
+import { StoryBody as d } from "./story-body.js";
+import { StoryFooter as c } from "./story-footer.js";
+import { StoryForeground as F } from "./story-foreground.js";
+import { StoryForegroundContent as k } from "./story-foreground-content.js";
+import { StoryForegroundImage as I } from "./story-foreground-image.js";
+function y({ id: o, children: r, className: t }) {
+  const e = f("flex w-full flex-col", t);
+  return /* @__PURE__ */ m("div", { id: o, className: `uofg-story ${e}`, children: r });
 }
-f.displayName = "Story";
+y.displayName = "Story";
 export {
-  f as Story,
-  a as StoryBackground,
-  s as StoryBackgroundImage,
-  S as StoryBody,
-  l as StoryFooter,
-  i as StoryForeground,
-  B as StoryForegroundContent,
-  w as StoryForegroundImage
+  y as Story,
+  g as StoryBackground,
+  u as StoryBackgroundImage,
+  d as StoryBody,
+  c as StoryFooter,
+  F as StoryForeground,
+  k as StoryForegroundContent,
+  I as StoryForegroundImage
 };

package/dist/tabs.js

@@ -1,20 +1,20 @@
 "use client";
-import { jsx as t } from "react/jsx-runtime";
-import { TabGroup as e } from "@headlessui/react";
-import { twMerge as s } from "tailwind-merge";
-import { Tab as T } from "./tab.js";
-import { TabList as u } from "./tab-list.js";
-import { TabPanel as c } from "./tab-panel.js";
-import { TabPanels as N } from "./tab-panels.js";
-function m({ children: o, className: r }) {
-  const a = s("uofg-tabs", r);
-  return /* @__PURE__ */ t(e, { className: `uofg-tabs ${a}`, children: o });
+import { jsx as e } from "react/jsx-runtime";
+import { TabGroup as s } from "@headlessui/react";
+import { twMerge as m } from "tailwind-merge";
+import { Tab as l } from "./tab.js";
+import { TabList as x } from "./tab-list.js";
+import { TabPanel as g } from "./tab-panel.js";
+import { TabPanels as P } from "./tab-panels.js";
+function f({ id: o, children: r, className: a }) {
+  const t = m("uofg-tabs", a);
+  return /* @__PURE__ */ e(s, { id: o, className: `uofg-tabs ${t}`, children: r });
 }
-m.displayName = "Tabs";
+f.displayName = "Tabs";
 export {
-  T as Tab,
-  u as TabList,
-  c as TabPanel,
-  N as TabPanels,
-  m as Tabs
+  l as Tab,
+  x as TabList,
+  g as TabPanel,
+  P as TabPanels,
+  f as Tabs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.6.0-rc.7",
+  "version": "1.6.0-rc.9",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {
@@ -78,5 +78,5 @@
   "bugs": {
     "url": "https://github.com/ccswbs/uofg-components/issues"
   },
-  "gitHead": "5175082e5ba9bc5268a85820e6b6c60a25ec79be"
+  "gitHead": "6c25126bfb94174d37db1f4aa32ceffec0081689"
 }