@uoguelph/react-components 1.3.13 → 1.4.0

package/dist/accordion-button.js

@@ -1,38 +1,38 @@
 "use client";
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { f as g, a as c } from "./regular-DmWV6rTj.js";
-import { FontAwesomeIcon as l } from "@fortawesome/react-fontawesome";
-import { DisclosureButton as a } from "@headlessui/react";
-import { useContext as b } from "react";
-import { twMerge as f } from "tailwind-merge";
-import { tv as m } from "tailwind-variants";
-import { AccordionContext as p } from "./accordion-context.js";
-function x({ children: u, className: n }) {
-  const o = b(p), e = m({
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { f as u, a as l } from "./regular-DmWV6rTj.js";
+import { FontAwesomeIcon as a } from "@fortawesome/react-fontawesome";
+import { DisclosureButton as b } from "@headlessui/react";
+import { useContext as f } from "react";
+import { twMerge as m } from "tailwind-merge";
+import { tv as p } from "tailwind-variants";
+import { AccordionContext as g } from "./accordion-context.js";
+function x({ children: n, className: e }) {
+  const o = f(g), i = p({
     slots: {
-      button: "uog:group uog:mb-1 uog:inline-flex uog:w-full uog:cursor-pointer uog:items-center uog:justify-between uog:gap-2 uog:p-2.5 uog:px-5 uog:text-left uog:text-xl uog:transition-colors uog:focus:outline-none uog:focus-visible:ring-2 uog:focus-visible:ring-blue uog:focus-visible:ring-offset-2 uog:hocus-visible:bg-blue uog:hocus-visible:text-blue-contrast",
-      icon: "uog:h-[1em] uog:text-blue-on-light uog:group-hocus-visible:text-blue-contrast uog:transition"
+      button: "group mb-1 inline-flex w-full cursor-pointer items-center justify-between gap-2 p-2.5 px-5 text-left text-xl transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue focus-visible:ring-offset-2 hocus-visible:bg-blue hocus-visible:text-blue-contrast",
+      icon: "h-[1em] text-blue-on-light transition group-hocus-visible:text-blue-contrast"
     },
     variants: {
       open: {
         true: {
-          button: "uog:bg-blue uog:text-blue-contrast",
-          icon: "uog:text-blue-contrast"
+          button: "bg-blue text-blue-contrast",
+          icon: "text-blue-contrast"
         },
         false: {
-          icon: "uog:rotate-90",
-          button: "uog:bg-grey-light-bg uog:text-blue-on-light"
+          icon: "rotate-90",
+          button: "bg-grey-light-bg text-blue-on-light"
         }
       }
     }
-  }), { button: i, icon: s } = e({ open: o == null ? void 0 : o.isOpen });
-  return /* @__PURE__ */ r(a, { className: `uofg-accordion-button ${f(n, i())}`, children: [
-    /* @__PURE__ */ t("span", { className: "uofg-accordion-button-content", children: u }),
+  }), { button: s, icon: r } = i({ open: o == null ? void 0 : o.isOpen });
+  return /* @__PURE__ */ c(b, { className: `uofg-accordion-button ${m(e, s())}`, children: [
+    /* @__PURE__ */ t("span", { className: "uofg-accordion-button-content", children: n }),
     /* @__PURE__ */ t(
-      l,
+      a,
       {
-        icon: o != null && o.isOpen ? g : c,
-        className: `uofg-accordion-button-icon ${s()}`
+        icon: o != null && o.isOpen ? u : l,
+        className: `uofg-accordion-button-icon ${r()}`
       }
     )
   ] });

package/dist/accordion-content.js

@@ -4,12 +4,12 @@ import { DisclosurePanel as i } from "@headlessui/react";
 import { useContext as c } from "react";
 import m from "react-animate-height";
 import { twMerge as s } from "tailwind-merge";
-import { AccordionContext as u } from "./accordion-context.js";
-function a({ children: r, className: e }) {
-  const o = c(u), n = s("uog:border-l-4 uog:border-yellow uog:py-3 uog:pl-5", e);
+import { AccordionContext as a } from "./accordion-context.js";
+function p({ children: r, className: e }) {
+  const o = c(a), n = s("border-l-4 border-yellow py-3 pl-5", e);
   return /* @__PURE__ */ t(m, { height: o != null && o.isOpen ? "auto" : 0, duration: 200, easing: "ease-in-out", children: /* @__PURE__ */ t(i, { static: !0, className: `uofg-accordion-content ${n}`, children: r }) });
 }
-a.displayName = "AccordionContent";
+p.displayName = "AccordionContent";
 export {
-  a as AccordionContent
+  p as AccordionContent
 };

package/dist/accordion.js

@@ -4,14 +4,14 @@ import { Disclosure as t } from "@headlessui/react";
 import { twMerge as e } from "tailwind-merge";
 import { AccordionContext as m } from "./accordion-context.js";
 import { AccordionButton as x } from "./accordion-button.js";
-import { AccordionContent as g } from "./accordion-content.js";
+import { AccordionContent as h } from "./accordion-content.js";
 function d({ children: r, className: c }) {
-  const i = e("uog:my-2 uog:[&_p:last-child]:mb-0", c);
+  const i = e("my-2 [&_p:last-child]:mb-0", c);
   return /* @__PURE__ */ o(t, { children: ({ open: n }) => /* @__PURE__ */ o("div", { className: `uofg-accordion ${i}`, children: /* @__PURE__ */ o(m.Provider, { value: { isOpen: n }, children: r }) }) });
 }
 d.displayName = "Accordion";
 export {
   d as Accordion,
   x as AccordionButton,
-  g as AccordionContent
+  h as AccordionContent
 };

package/dist/alert-footer.js

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { twMerge as g } from "tailwind-merge";
-function l({ children: o, className: r }) {
-  const e = g("uog:flex uog:bg-grey-light uog:px-4 uog:py-2", r);
-  return /* @__PURE__ */ t("div", { className: `uofg-alert-footer ${e}`, children: o });
+import { twMerge as l } from "tailwind-merge";
+function a({ children: r, className: e }) {
+  const o = l("flex bg-grey-light px-4 py-2", e);
+  return /* @__PURE__ */ t("div", { className: `uofg-alert-footer ${o}`, children: r });
 }
-l.displayName = "AlertFooter";
+a.displayName = "AlertFooter";
 export {
-  l as AlertFooter
+  a as AlertFooter
 };

package/dist/alert-message.js

@@ -1,13 +1,10 @@
-import { jsx as g } from "react/jsx-runtime";
-import { twMerge as s } from "tailwind-merge";
-function t({ children: e, className: o }) {
-  const r = s(
-    "uog:flex uog:flex-col uog:border-x uog:border-b uog:border-grey-light uog:bg-white uog:px-4 uog:py-3",
-    o
-  );
-  return /* @__PURE__ */ g("div", { className: `uofg-alert-message ${r}`, children: e });
+import { jsx as t } from "react/jsx-runtime";
+import { twMerge as o } from "tailwind-merge";
+function a({ children: e, className: r }) {
+  const s = o("flex flex-col border-x border-b border-grey-light bg-white px-4 py-3", r);
+  return /* @__PURE__ */ t("div", { className: `uofg-alert-message ${s}`, children: e });
 }
-t.displayName = "AlertMessage";
+a.displayName = "AlertMessage";
 export {
-  t as AlertMessage
+  a as AlertMessage
 };

package/dist/alert-subtitle.js

@@ -1,10 +1,10 @@
-import { jsx as l } from "react/jsx-runtime";
-import { twMerge as r } from "tailwind-merge";
-function u({ children: t, className: e }) {
-  const o = r("uog:font-bold uog:mb-4 uog:text-xl", e);
-  return /* @__PURE__ */ l("span", { className: `uofg-alert-subtitle ${o}`, children: t });
+import { jsx as r } from "react/jsx-runtime";
+import { twMerge as o } from "tailwind-merge";
+function i({ children: t, className: e }) {
+  const l = o("mb-4 text-xl font-bold", e);
+  return /* @__PURE__ */ r("span", { className: `uofg-alert-subtitle ${l}`, children: t });
 }
-u.displayName = "AlertSubtitle";
+i.displayName = "AlertSubtitle";
 export {
-  u as AlertSubtitle
+  i as AlertSubtitle
 };

package/dist/alert-title.js

@@ -1,50 +1,50 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { e as l } from "./regular-DmWV6rTj.js";
-import { FontAwesomeIcon as u } from "@fortawesome/react-fontawesome";
-import { twMerge as s } from "tailwind-merge";
-import { tv as m } from "tailwind-variants";
-function x({ color: e = "red", className: o, children: r }) {
-  const n = m({
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { e as s } from "./regular-DmWV6rTj.js";
+import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
+import { twMerge as m } from "tailwind-merge";
+import { tv as x } from "tailwind-variants";
+function b({ color: e = "red", className: r, children: o }) {
+  const n = x({
     slots: {
-      container: "uog:flex uog:items-center uog:gap-2 uog:p-4 uog:text-xl",
-      icon: "uog:h-[1.5em]",
+      container: "flex items-center gap-2 p-4 text-xl",
+      icon: "h-[1.5em]",
       text: ""
     },
     variants: {
       color: {
         red: {
-          container: "uog:bg-red uog:text-red-contrast"
+          container: "bg-red text-red-contrast"
         },
         yellow: {
-          container: "uog:bg-yellow uog:text-yellow-contrast"
+          container: "bg-yellow text-yellow-contrast"
         },
         blue: {
-          container: "uog:bg-blue uog:text-blue-contrast"
+          container: "bg-blue text-blue-contrast"
         },
         green: {
-          container: "uog:bg-green uog:text-green-contrast"
+          container: "bg-green text-green-contrast"
         },
         "grey-light": {
-          container: "uog:bg-grey-light uog:text-grey-light-contrast"
+          container: "bg-grey-light text-grey-light-contrast"
         },
         "grey-dark": {
-          container: "uog:bg-grey-dark uog:text-grey-dark-contrast"
+          container: "bg-grey-dark text-grey-dark-contrast"
         },
         black: {
-          container: "uog:bg-black uog:text-black-contrast"
+          container: "bg-black text-black-contrast"
         },
         white: {
-          container: "uog:bg-white uog:text-white-contrast"
+          container: "bg-white text-white-contrast"
         }
       }
     }
-  }), { container: g, icon: a, text: i } = n({ color: e });
-  return /* @__PURE__ */ c("div", { className: `uofg-alert-title-container ${s(g(), o)}`, children: [
-    /* @__PURE__ */ t(u, { className: `uofg-alert-title-icon ${a()}`, icon: l }),
-    /* @__PURE__ */ t("div", { className: `uofg-alert-title ${i()}`, children: r })
+  }), { container: a, icon: i, text: c } = n({ color: e });
+  return /* @__PURE__ */ l("div", { className: `uofg-alert-title-container ${m(a(), r)}`, children: [
+    /* @__PURE__ */ t(g, { className: `uofg-alert-title-icon ${i()}`, icon: s }),
+    /* @__PURE__ */ t("div", { className: `uofg-alert-title ${c()}`, children: o })
   ] });
 }
-x.displayName = "AlertTitle";
+b.displayName = "AlertTitle";
 export {
-  x as AlertTitle
+  b as AlertTitle
 };

package/dist/alert.js

@@ -1,18 +1,18 @@
 import { jsx as o } from "react/jsx-runtime";
 import { twMerge as l } from "tailwind-merge";
 import { AlertFooter as i } from "./alert-footer.js";
-import { AlertMessage as u } from "./alert-message.js";
-import { AlertSubtitle as g } from "./alert-subtitle.js";
-import { AlertTitle as n } from "./alert-title.js";
+import { AlertMessage as A } from "./alert-message.js";
+import { AlertSubtitle as n } from "./alert-subtitle.js";
+import { AlertTitle as g } from "./alert-title.js";
 function f({ children: e, className: r }) {
-  const t = l("uog:flex uog:flex-col", r);
+  const t = l("flex flex-col", r);
   return /* @__PURE__ */ o("div", { className: `uofg-alert ${t}`, children: e });
 }
 f.displayName = "Alert";
 export {
   f as Alert,
   i as AlertFooter,
-  u as AlertMessage,
-  g as AlertSubtitle,
-  n as AlertTitle
+  A as AlertMessage,
+  n as AlertSubtitle,
+  g as AlertTitle
 };

package/dist/blockquote-author-name.js

@@ -2,7 +2,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { twMerge as u } from "tailwind-merge";
 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 });
+  return /* @__PURE__ */ r("cite", { ...e, className: u("uofg-blockquote-author-name font-bold not-italic", t), children: o });
 }
 export {
   m as BlockquoteAuthorName

package/dist/blockquote-author-title.js

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

package/dist/blockquote-author.js

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

package/dist/blockquote-content.js

@@ -1,34 +1,34 @@
 "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 { f as u, a as m } from "./solid-D19hAF5t.js";
 import { FontAwesomeIcon as s } from "@fortawesome/react-fontawesome";
 import { useContext as f } from "react";
-import { twMerge as g } from "tailwind-merge";
-import { tv as k } from "tailwind-variants";
-import { BlockquoteContext as b } from "./blockquote-context.js";
-function p({ className: u, children: c }) {
-  const o = f(b), i = k({
+import { twMerge as k } from "tailwind-merge";
+import { tv as b } from "tailwind-variants";
+import { BlockquoteContext as p } from "./blockquote-context.js";
+function q({ className: c, children: i }) {
+  const o = f(p), r = b({
     slots: {
-      base: "uog:font-light uog:block uog:w-full uog:text-center uog:text-3xl uog:italic",
-      icons: "uog:inline-block uog:h-[1em]"
+      base: "block w-full text-center text-3xl font-light italic",
+      icons: "inline-block h-[1em]"
     },
     variants: {
       color: {
         yellow: {
-          icons: "uog:text-yellow"
+          icons: "text-yellow"
         },
         blue: {
-          icons: "uog:text-blue"
+          icons: "text-blue"
         }
       }
     }
-  }), { base: r, icons: l } = i({ color: (o == null ? void 0 : o.color) ?? "yellow" });
-  return /* @__PURE__ */ t("blockquote", { className: `uofg-blockquote-content ${g(r(), u)}`, children: [
+  }), { base: a, icons: l } = r({ color: (o == null ? void 0 : o.color) ?? "yellow" });
+  return /* @__PURE__ */ t("blockquote", { className: `uofg-blockquote-content ${k(a(), c)}`, children: [
     !(o != null && o.hideQuotationMarks) && /* @__PURE__ */ t(n, { children: [
-      /* @__PURE__ */ e(s, { icon: a, className: `uofg-blockquote-content-left-quote ${l()}` }),
+      /* @__PURE__ */ e(s, { icon: u, className: `uofg-blockquote-content-left-quote ${l()}` }),
       " "
     ] }),
-    /* @__PURE__ */ e("span", { className: "uofg-blockquote-content-text", children: c }),
+    /* @__PURE__ */ e("span", { className: "uofg-blockquote-content-text", children: i }),
     " ",
     !(o != null && o.hideQuotationMarks) && /* @__PURE__ */ t(n, { children: [
       " ",
@@ -36,7 +36,7 @@ function p({ className: u, children: c }) {
     ] })
   ] });
 }
-p.displayName = "BlockquoteContent";
+q.displayName = "BlockquoteContent";
 export {
-  p as BlockquoteContent
+  q as BlockquoteContent
 };

package/dist/breadcrumb-home.js

@@ -9,10 +9,10 @@ function n({
   className: m,
   ...r
 }) {
-  const a = l("uog:h-[1em] uog:fill-black");
+  const a = l("h-[1em] fill-black");
   return /* @__PURE__ */ o("li", { className: "uofg-breadcrumb-home-list-item", children: /* @__PURE__ */ c("a", { ...r, href: e, className: `uofg-breadcrumb-home ${m}`, children: [
     /* @__PURE__ */ o(i, { icon: s, className: a }),
-    /* @__PURE__ */ o("span", { className: "uog:sr-only", children: "U of G Homepage" })
+    /* @__PURE__ */ o("span", { className: "sr-only", children: "U of G Homepage" })
   ] }) });
 }
 n.displayName = "BreadcrumbHome";

package/dist/breadcrumb.js

@@ -1,9 +1,9 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { c as g } from "./regular-DmWV6rTj.js";
-import { FontAwesomeIcon as d } from "@fortawesome/react-fontawesome";
-import { twMerge as b } from "tailwind-merge";
-import { tv as p } from "tailwind-variants";
-const f = "a";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { c as d } from "./regular-DmWV6rTj.js";
+import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
+import { twMerge as p } from "tailwind-merge";
+import { tv as f } from "tailwind-variants";
+const g = "a";
 function x({
   as: n,
   children: r,
@@ -11,20 +11,20 @@ function x({
   href: e,
   ...a
 }) {
-  const c = n ?? f, i = p({
+  const c = n ?? g, i = f({
     slots: {
-      container: "uog:flex uog:items-center uog:gap-2",
-      icon: "uog:h-[.75em]",
-      link: "uog:underline uog:decoration-transparent uog:decoration-1 uog:transition-colors uog:hocus-visible:decoration-black"
+      container: "flex items-center gap-2",
+      icon: "h-[.75em]",
+      link: "underline decoration-transparent decoration-1 transition-colors hocus-visible:decoration-black"
     }
-  }), { container: m, icon: s, link: u } = i();
-  return /* @__PURE__ */ l("li", { className: `uofg-breadcrumb-list-item ${m()}`, children: [
-    /* @__PURE__ */ o(d, { icon: g, className: s() }),
-    e ? /* @__PURE__ */ o(c, { ...a, className: `uofg-breadcrumb ${b(u(), t)}`, href: e, children: r }) : /* @__PURE__ */ o("span", { children: r })
+  }), { container: m, icon: s, link: l } = i();
+  return /* @__PURE__ */ u("li", { className: `uofg-breadcrumb-list-item ${m()}`, children: [
+    /* @__PURE__ */ o(b, { icon: d, className: s() }),
+    e ? /* @__PURE__ */ o(c, { ...a, className: `uofg-breadcrumb ${p(l(), t)}`, href: e, children: r }) : /* @__PURE__ */ o("span", { children: r })
   ] });
 }
 x.displayName = "Breadcrumb";
 export {
   x as Breadcrumb,
-  f as defaultBreadcrumbElement
+  g as defaultBreadcrumbElement
 };

package/dist/breadcrumbs.js

@@ -1,15 +1,15 @@
 import { jsx as r } from "react/jsx-runtime";
-import { twJoin as u, twMerge as t } from "tailwind-merge";
-import { Container as a } from "./container.js";
+import { twJoin as t, twMerge as a } from "tailwind-merge";
+import { Container as c } from "./container.js";
 import { Breadcrumb as b } from "./breadcrumb.js";
-import { BreadcrumbHome as g } from "./breadcrumb-home.js";
-function c({ className: o, children: e }) {
-  const m = u("uog:flex uog:w-full uog:flex-wrap uog:items-center uog:gap-2");
-  return /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r("ol", { className: `uofg-breadcrumbs ${t(m, o)}`, children: e }) });
+import { BreadcrumbHome as l } from "./breadcrumb-home.js";
+function f({ className: e, children: m }) {
+  const o = t("flex w-full flex-wrap items-center gap-2");
+  return /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r("ol", { className: `uofg-breadcrumbs ${a(o, e)}`, children: m }) });
 }
-c.displayName = "Breadcrumbs";
+f.displayName = "Breadcrumbs";
 export {
   b as Breadcrumb,
-  g as BreadcrumbHome,
-  c as Breadcrumbs
+  l as BreadcrumbHome,
+  f as Breadcrumbs
 };