@uoguelph/react-components 1.2.12 → 1.2.13

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

package/dist/tab-panels.js

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

package/dist/tab.js

@@ -23,7 +23,7 @@ function r({ children: o, className: e }) {
     "uog:flex-1",
     e
   );
-  return /* @__PURE__ */ u(t, { className: g, children: o });
+  return /* @__PURE__ */ u(t, { className: `uofg-tab ${g}`, children: o });
 }
 r.displayName = "Tab";
 export {

package/dist/tabs.js

@@ -1,19 +1,19 @@
 import { jsx as t } from "react/jsx-runtime";
-import { TabGroup as e } from "@headlessui/react";
-import { twMerge as s } from "tailwind-merge";
+import { TabGroup as s } from "@headlessui/react";
+import { twMerge as e } from "tailwind-merge";
 import { Tab as n } from "./tab.js";
 import { TabList as l } from "./tab-list.js";
-import { TabPanel as u } from "./tab-panel.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: a, children: o });
+  const a = e("uofg-tabs", r);
+  return /* @__PURE__ */ t(s, { className: `uofg-tabs ${a}`, children: o });
 }
 m.displayName = "Tabs";
 export {
   n as Tab,
   l as TabList,
-  u as TabPanel,
+  c as TabPanel,
   N as TabPanels,
   m as Tabs
 };

package/dist/text-input.js

@@ -1,18 +1,18 @@
-import { jsxs as s, jsx as u } from "react/jsx-runtime";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import { h as w } from "./regular-DmWV6rTj.js";
 import { FontAwesomeIcon as h } from "@fortawesome/react-fontawesome";
 import { Field as v, Label as y, Input as N } from "@headlessui/react";
-import { useState as j, useRef as B } from "react";
-import { tv as E } from "tailwind-variants";
-function T({
-  initialValue: i = "",
+import { useState as $, useRef as j } from "react";
+import { tv as B } from "tailwind-variants";
+function O({
+  initialValue: s = "",
   type: c = "text",
   placeholder: a = "",
   onInput: n,
-  children: l,
+  children: i,
   ...g
 }) {
-  const [r, p] = j(i), e = B(null), m = E({
+  const [u, p] = $(s), e = j(null), f = B({
     slots: {
       base: "uog:flex uog:flex-col uog:gap-0.5",
       wrapper: "uog:text-input uog:border-grey-light uog:flex uog:rounded-md uog:border uog:px-4 uog:py-2 uog:transition-colors uog:focus-within:border-blue uog:focus:outline-none uog:bg-white",
@@ -26,41 +26,41 @@ function T({
         }
       }
     }
-  }), { base: f, wrapper: b, input: d, clearButton: x } = m({ empty: (r == null ? void 0 : r.length) === 0 });
-  return /* @__PURE__ */ s(v, { className: f(), children: [
-    l && /* @__PURE__ */ u(y, { children: l }),
-    /* @__PURE__ */ s("div", { className: b(), children: [
-      /* @__PURE__ */ u(
+  }), { base: m, wrapper: x, input: b, clearButton: d } = f({ empty: (u == null ? void 0 : u.length) === 0 });
+  return /* @__PURE__ */ l(v, { className: `uofg-text-input-field ${m()}`, children: [
+    i && /* @__PURE__ */ r(y, { className: "uofg-text-input-label", children: i }),
+    /* @__PURE__ */ l("div", { className: `uofg-text-input-wrapper ${x()}`, children: [
+      /* @__PURE__ */ r(
         N,
         {
           ...g,
           ref: e,
-          value: r,
+          value: u,
           type: c,
           placeholder: a,
           onInput: (t) => {
             var o;
             p((o = t == null ? void 0 : t.target) == null ? void 0 : o.value), n == null || n(t);
           },
-          className: d()
+          className: `uofg-text-input ${b()}`
         }
       ),
-      /* @__PURE__ */ u(
+      /* @__PURE__ */ r(
         "button",
         {
-          className: x(),
+          className: `uofg-text-input-clear-button ${d()}`,
           onClick: () => {
             var o;
             if (!e.current) return;
             const t = (o = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : o.set;
             t == null || t.call(e.current, ""), e.current.dispatchEvent(new Event("input", { bubbles: !0 })), e.current.focus();
           },
-          children: /* @__PURE__ */ u(h, { icon: w })
+          children: /* @__PURE__ */ r(h, { icon: w })
         }
       )
     ] })
   ] });
 }
 export {
-  T as TextInput
+  O as TextInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {
@@ -84,5 +84,5 @@
   "bugs": {
     "url": "https://github.com/ccswbs/uofg-components/issues"
   },
-  "gitHead": "79252819d4c0d25e47e6bfcd9698129d3551e397"
+  "gitHead": "d6c612240262aa418ea533d8abf435ab8b172036"
 }