@uoguelph/react-components 1.2.12 → 1.2.14

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/select-button.js

@@ -1,40 +1,41 @@
-import { jsx as t, jsxs as m, Fragment as c } from "react/jsx-runtime";
-import { h as a } from "./solid-D4xgBves.js";
-import { FontAwesomeIcon as f } from "@fortawesome/react-fontawesome";
-import { ListboxButton as p } from "@headlessui/react";
-import { twMerge as l } from "tailwind-merge";
-import { tv as b } from "tailwind-variants";
-function d({ children: o, className: e, ...n }) {
-  const r = b({
+import { jsx as t, jsxs as i, Fragment as m } from "react/jsx-runtime";
+import { h as c } from "./solid-D4xgBves.js";
+import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
+import { ListboxButton as a } from "@headlessui/react";
+import { twMerge as f } from "tailwind-merge";
+import { tv as l } from "tailwind-variants";
+function b({ children: o, className: u, ...e }) {
+  const n = l({
     slots: {
       button: [
         "uofg-select-button",
-        "ui-open:rounded-b-none",
-        "ui-open:border-blue",
-        "flex",
-        "w-full",
-        "items-center",
-        "justify-between",
-        "rounded-md",
-        "border",
-        "border-gray-300",
-        "bg-white",
-        "px-4",
-        "py-2",
-        "shadow-sm",
-        "transition-colors",
-        "group-focus-within:border-blue",
-        "group-focus-within:outline-none"
+        "uog:ui-open:rounded-b-none",
+        "uog:ui-open:border-blue",
+        "uog:flex",
+        "uog:w-full",
+        "uog:items-center",
+        "uog:justify-between",
+        "uog:rounded-md",
+        "uog:border",
+        "uog:border-grey-light",
+        "uog:bg-white",
+        "uog:px-4",
+        "uog:py-2",
+        "uog:shadow-sm",
+        "uog:transition-colors",
+        "uog:group-focus-within:border-blue",
+        "uog:group-focus-within:outline-none",
+        "uog:gap-2"
       ],
-      icon: "ui-open:rotate-180 h-5 w-5 text-gray-400 transition-transform"
+      icon: "uog:ui-open:rotate-180 uog:h-5 uog:w-5 uog:text-body-copy uog:transition-transform"
     }
-  }), { button: s, icon: i } = r();
-  return /* @__PURE__ */ t(p, { ...n, className: l(s(), e), children: (u) => /* @__PURE__ */ m(c, { children: [
-    typeof o == "function" ? o(u) : o,
-    /* @__PURE__ */ t(f, { className: i(), icon: a })
+  }), { button: r, icon: g } = n();
+  return /* @__PURE__ */ t(a, { ...e, className: f(r(), u), children: (s) => /* @__PURE__ */ i(m, { children: [
+    typeof o == "function" ? o(s) : /* @__PURE__ */ t("span", { children: o }),
+    /* @__PURE__ */ t(p, { className: g(), icon: c })
   ] }) });
 }
-d.displayName = "SelectButton";
+b.displayName = "SelectButton";
 export {
-  d as SelectButton
+  b as SelectButton
 };

package/dist/select-option.js

@@ -1,11 +1,11 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { d as l } from "./regular-DmWV6rTj.js";
-import { FontAwesomeIcon as m } from "@fortawesome/react-fontawesome";
-import { ListboxOption as p } from "@headlessui/react";
-import { twMerge as f } from "tailwind-merge";
-import { tv as b } from "tailwind-variants";
-function x({ children: o, className: r, ...i }) {
-  const s = b({
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { d as m } from "./regular-DmWV6rTj.js";
+import { FontAwesomeIcon as f } from "@fortawesome/react-fontawesome";
+import { ListboxOption as b } from "@headlessui/react";
+import { twMerge as x } from "tailwind-merge";
+import { tv as v } from "tailwind-variants";
+function y({ children: o, className: r, ...i }) {
+  const n = v({
     slots: {
       option: [
         "uofg-select-option",
@@ -22,9 +22,12 @@ function x({ children: o, className: r, ...i }) {
         "uog:hover:bg-gray-100",
         "uog:focus:bg-gray-100",
         "uog:focus:outline-none",
-        "uog:ui-active:bg-gray-100"
+        "uog:ui-active:bg-gray-100",
+        "uog:gap-2"
       ],
-      icon: "uog:h-5 uog:w-5 uog:text-blue-600"
+      icon: "uog:h-5 uog:w-5 uog:text-blue-600",
+      wrapper: "uog:flex uog:items-center",
+      content: "uog:flex-1"
     },
     variants: {
       selected: {
@@ -36,13 +39,13 @@ function x({ children: o, className: r, ...i }) {
         }
       }
     }
-  }), { option: n, icon: u } = s();
-  return /* @__PURE__ */ e(p, { ...i, className: f(n(), r), children: ({ focus: g, selected: t, ...c }) => /* @__PURE__ */ a("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e("span", { className: "flex-1", children: typeof o == "function" ? o({ focus: g, selected: t, ...c }) : o }),
-    /* @__PURE__ */ e(m, { icon: l, className: u({ selected: t }) })
+  }), { option: s, icon: g, wrapper: u, content: a } = n();
+  return /* @__PURE__ */ e(b, { ...i, className: x(s(), r), children: ({ focus: c, selected: t, ...p }) => /* @__PURE__ */ l("div", { className: u(), children: [
+    /* @__PURE__ */ e("span", { className: a(), children: typeof o == "function" ? o({ focus: c, selected: t, ...p }) : o }),
+    /* @__PURE__ */ e(f, { icon: m, className: g({ selected: t }) })
   ] }) });
 }
-x.displayName = "SelectOptions";
+y.displayName = "SelectOptions";
 export {
-  x as SelectOption
+  y as SelectOption
 };

package/dist/select-options.js

@@ -10,7 +10,7 @@ function s({ children: o, className: u, ...e }) {
     "uog:rounded-b-md",
     "uog:border",
     "uog:border-t-0",
-    "uog:border-gray-300",
+    "uog:border-grey-light",
     "uog:bg-white",
     "uog:shadow-md",
     "uog:group-focus-within:border-blue",

package/dist/select.js

@@ -1,9 +1,15 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Listbox as r } from "@headlessui/react";
-function i({ children: t, ...e }) {
-  return /* @__PURE__ */ o(r, { ...e, children: t });
+import { SelectButton as f } from "./select-button.js";
+import { SelectOption as u } from "./select-option.js";
+import { SelectOptions as n } from "./select-options.js";
+function l({ children: e, ...t }) {
+  return /* @__PURE__ */ o(r, { className: "uofg-select uog:relative uog:w-full", ...t, as: "div", children: e });
 }
-i.displayName = "Select";
+l.displayName = "Select";
 export {
-  i as Select
+  l as Select,
+  f as SelectButton,
+  u as SelectOption,
+  n as SelectOptions
 };

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
 };

package/dist/story-background-image.js

@@ -10,8 +10,18 @@ function f({
   className: n,
   ...s
 }) {
-  const a = o ?? l, m = c("uofg-story-background-image uog:h-full uog:w-full uog:brightness-50", n);
-  return /* @__PURE__ */ u(a, { ...s, src: t, alt: e, width: r, height: g, className: m });
+  const a = o ?? l, m = c("uog:h-full uog:w-full uog:brightness-50", n);
+  return /* @__PURE__ */ u(
+    a,
+    {
+      ...s,
+      src: t,
+      alt: e,
+      width: r,
+      height: g,
+      className: `uofg-story-background-image ${m}`
+    }
+  );
 }
 f.displayName = "StoryBackgroundImage";
 export {

package/dist/story-background.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { twMerge as a } from "tailwind-merge";
 function g({ children: o, className: u }) {
-  const r = a("uofg-story-background uog:absolute uog:z-0 uog:h-full uog:max-h-full uog:w-full", u);
-  return /* @__PURE__ */ t("div", { className: r, children: o });
+  const r = a("uog:absolute uog:z-0 uog:h-full uog:max-h-full uog:w-full", u);
+  return /* @__PURE__ */ t("div", { className: `uofg-story-background ${r}`, children: o });
 }
 g.displayName = "StoryBackground";
 export {

package/dist/story-body.js

@@ -2,10 +2,10 @@ import { jsx as t } from "react/jsx-runtime";
 import { twMerge as s } from "tailwind-merge";
 function u({ children: o, className: e }) {
   const r = s(
-    "uofg-story-body uog:relative uog:flex uog:w-full uog:items-center uog:justify-center uog:overflow-hidden",
+    "uog:relative uog:flex uog:w-full uog:items-center uog:justify-center uog:overflow-hidden",
     e
   );
-  return /* @__PURE__ */ t("div", { className: r, children: o });
+  return /* @__PURE__ */ t("div", { className: `uofg-story-body ${r}`, children: o });
 }
 u.displayName = "StoryBody";
 export {

package/dist/story-footer.js

@@ -5,11 +5,11 @@ import { Container as g } from "./container.js";
 function c({ children: t, className: e }) {
   const r = i({
     slots: {
-      base: "uofg-story-footer uog:flex uog:w-full uog:items-center uog:justify-center uog:bg-black uog:p-4 uog:text-white",
-      container: "uofg-story-footer-container uog:flex uog:items-center uog:justify-center uog:p-2 uog:text-xl"
+      base: "uog:flex uog:w-full uog:items-center uog:justify-center uog:bg-black uog:p-4 uog:text-white",
+      container: "uog:flex uog:items-center uog:justify-center uog:p-2 uog:text-xl"
     }
   }), { base: s, container: u } = r();
-  return /* @__PURE__ */ o("div", { className: n(s(), e), children: /* @__PURE__ */ o(g, { className: u(), children: t }) });
+  return /* @__PURE__ */ o("div", { className: `uofg-story-footer ${n(s(), e)}`, children: /* @__PURE__ */ o(g, { className: `uofg-story-footer-container ${u()}`, children: t }) });
 }
 c.displayName = "StoryFooter";
 export {

package/dist/story-foreground-content.js

@@ -1,11 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { twMerge as n } from "tailwind-merge";
 function u({ children: o, className: r }) {
-  const t = n(
-    "uofg-story-foreground-content uog:flex uog:w-full uog:justify-center uog:px-8 uog:lg:w-1/2 uog:lg:p-0",
-    r
-  );
-  return /* @__PURE__ */ e("div", { className: t, children: o });
+  const t = n("uog:flex uog:w-full uog:justify-center uog:px-8 uog:lg:w-1/2 uog:lg:p-0", r);
+  return /* @__PURE__ */ e("div", { className: `uofg-story-foreground-content ${t}`, children: o });
 }
 u.displayName = "StoryForegroundContent";
 export {

package/dist/story-foreground-image.js

@@ -13,11 +13,21 @@ function p({
 }) {
   const a = e ?? d, n = c({
     slots: {
-      base: "uofg-story-foreground-image-container uog:flex uog:w-full uog:justify-center uog:lg:mt-auto uog:lg:w-1/2",
-      image: "uofg-story-foreground-image uog:w-full uog:h-full"
+      base: "uog:flex uog:w-full uog:justify-center uog:lg:mt-auto uog:lg:w-1/2",
+      image: "uog:w-full uog:h-full"
     }
   }), { base: l, image: f } = n();
-  return /* @__PURE__ */ o("div", { className: l(), children: /* @__PURE__ */ o(a, { ...m, src: r, alt: t, width: g, height: u, className: i(f(), s) }) });
+  return /* @__PURE__ */ o("div", { className: `uofg-story-foreground-image-container ${l()}`, children: /* @__PURE__ */ o(
+    a,
+    {
+      ...m,
+      src: r,
+      alt: t,
+      width: g,
+      height: u,
+      className: `uofg-story-foreground-image ${i(f(), s)}`
+    }
+  ) });
 }
 p.displayName = "StoryForegroundImage";
 export {

package/dist/story-foreground.js

@@ -2,10 +2,10 @@ import { jsx as g } from "react/jsx-runtime";
 import { twMerge as u } from "tailwind-merge";
 function t({ children: o, className: r }) {
   const e = u(
-    "uofg-story-foreground uog:max-w-[137rem] uog:z-10 uog:flex uog:w-full uog:flex-col uog:items-center uog:gap-6 uog:px-4 uog:lg:flex-row",
+    "uog:max-w-[137rem] uog:z-10 uog:flex uog:w-full uog:flex-col uog:items-center uog:gap-6 uog:px-4 uog:lg:flex-row",
     r
   );
-  return /* @__PURE__ */ g("div", { className: e, children: o });
+  return /* @__PURE__ */ g("div", { className: `uofg-story-foreground ${e}`, children: o });
 }
 t.displayName = "StoryForeground";
 export {

package/dist/story.js

@@ -8,8 +8,8 @@ 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("uofg-story uog:flex uog:w-full uog:flex-col", r);
-  return /* @__PURE__ */ e("div", { className: t, children: o });
+  const t = m("uog:flex uog:w-full uog:flex-col", r);
+  return /* @__PURE__ */ e("div", { className: `uofg-story ${t}`, children: o });
 }
 f.displayName = "Story";
 export {

package/dist/tab-list.js

@@ -1,12 +1,12 @@
-import { jsx as t } from "react/jsx-runtime";
-import { TabList as e } from "@headlessui/react";
-import { twMerge as a } from "tailwind-merge";
-function l({ children: o, className: r }) {
-  const s = a(
+import { jsx as s } from "react/jsx-runtime";
+import { TabList as a } from "@headlessui/react";
+import { twMerge as e } from "tailwind-merge";
+function l({ children: o, className: t }) {
+  const r = e(
     "uofg-tab-list uog:flex uog:gap-1 uog:border-b-4 uog:border-yellow uog:w-full uog:flex-col uog:md:flex-row",
-    r
+    t
   );
-  return /* @__PURE__ */ t(e, { className: s, children: o });
+  return /* @__PURE__ */ s(a, { className: `uofg-tab-list ${r}`, children: o });
 }
 l.displayName = "TabList";
 export {

package/dist/tab-panel.js

@@ -1,11 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
-import { TabPanel as n } from "@headlessui/react";
-import { twMerge as s } from "tailwind-merge";
-function t({ children: a, className: e }) {
-  const o = s("uofg-tab-panel uog:py-4", e);
-  return /* @__PURE__ */ r(n, { className: o, children: a });
+import { jsx as n } from "react/jsx-runtime";
+import { TabPanel as r } from "@headlessui/react";
+import { twMerge as t } from "tailwind-merge";
+function l({ children: a, className: e }) {
+  const o = t("uofg-tab-panel uog:py-4", e);
+  return /* @__PURE__ */ n(r, { className: `uofg-tab-panel ${o}`, children: a });
 }
-t.displayName = "TabPanel";
+l.displayName = "TabPanel";
 export {
-  t as TabPanel
+  l as TabPanel
 };