@uoguelph/react-components 1.0.0-rc.0

package/dist/media-caption.js

@@ -0,0 +1,129 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { twMerge as a } from "tailwind-merge";
+import { tv as y } from "tailwind-variants";
+import { EmbeddedVideo as x } from "./embedded-video.js";
+const v = "img";
+function h({
+  as: e,
+  size: t = "small",
+  position: s = "left",
+  background: r = "none",
+  children: n,
+  src: l,
+  className: c,
+  mediaClassName: d,
+  ...p
+}) {
+  const i = e ?? v;
+  t = (i instanceof x ? "video" : "image") === "video" && t === "small" ? "medium" : t;
+  const m = y({
+    slots: {
+      base: "tw:flex tw:flex-col",
+      mediaWrapper: "",
+      media: "tw:w-full tw:object-cover",
+      caption: "tw:p-4"
+    },
+    variants: {
+      size: {
+        small: {},
+        medium: {},
+        large: {}
+      },
+      position: {
+        left: {
+          base: "tw:md:grid"
+        },
+        right: {
+          base: "tw:md:grid",
+          mediaWrapper: "tw:col-start-2 tw:row-start-1",
+          caption: "tw:col-start-1 tw:row-start-1"
+        },
+        above: {
+          caption: "tw:flex-1"
+        }
+      },
+      background: {
+        "light-grey": {
+          caption: "tw:bg-light-grey-bg tw:text-body-copy"
+        },
+        "dark-grey": {
+          caption: "tw:bg-dark-grey-bg tw:text-body-copy-on-dark"
+        },
+        none: {}
+      }
+    },
+    compoundVariants: [
+      {
+        size: "small",
+        position: "left",
+        class: {
+          base: "tw:grid-cols-[1fr_4fr]"
+        }
+      },
+      {
+        size: "medium",
+        position: "left",
+        class: {
+          base: "tw:grid-cols-[1fr_2fr]"
+        }
+      },
+      {
+        size: "large",
+        position: "left",
+        class: {
+          base: "tw:grid-cols-[1fr_1fr]"
+        }
+      },
+      {
+        size: "small",
+        position: "right",
+        class: {
+          base: "tw:grid-cols-[4fr_1fr]"
+        }
+      },
+      {
+        size: "medium",
+        position: "right",
+        class: {
+          base: "tw:grid-cols-[2fr_1fr]"
+        }
+      },
+      {
+        size: "large",
+        position: "right",
+        class: {
+          base: "tw:grid-cols-[1fr_1fr]"
+        }
+      },
+      {
+        background: "none",
+        position: "left",
+        class: {
+          caption: "tw:md:px-4 tw:py-0"
+        }
+      },
+      {
+        background: "none",
+        position: "right",
+        class: {
+          caption: "tw:md:px-4 tw:py-0"
+        }
+      },
+      {
+        background: "none",
+        position: "above",
+        class: {
+          caption: "tw:px-0"
+        }
+      }
+    ]
+  }), { base: g, mediaWrapper: w, media: f, caption: b } = m({ size: t, position: s, background: r });
+  return /* @__PURE__ */ u("div", { className: a(g(), c), children: [
+    /* @__PURE__ */ o("div", { className: w(), children: /* @__PURE__ */ o(i, { ...p, src: l, className: a(f(), d) }) }),
+    /* @__PURE__ */ o("div", { className: b(), children: n })
+  ] });
+}
+h.displayName = "MediaCaption";
+export {
+  h as MediaCaption
+};

package/dist/modal.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+export declare function Modal({ open, onClose, role, labelledBy, centered, children }: ModalProps): JSX.Element;
+
+export declare namespace Modal {
+    var displayName: string;
+}
+
+export declare type ModalProps = PropsWithChildren<{
+    open: boolean;
+    onClose?: () => void;
+    role?: 'dialog' | 'alertdialog';
+    labelledBy?: string;
+    centered?: boolean;
+}>;
+
+export { }

package/dist/modal.js

@@ -0,0 +1,39 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { g as f } from "./solid-DM6GVhkF.js";
+import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
+import { Dialog as x, DialogBackdrop as g, CloseButton as h, DialogPanel as y } from "@headlessui/react";
+import { tv as N } from "tailwind-variants";
+function v({ open: r, onClose: a = () => {
+}, role: o = "dialog", labelledBy: l, centered: w, children: s }) {
+  const i = N({
+    slots: {
+      base: "tw:ease-out tw:relative tw:z-50 tw:transition tw:duration-300 tw:data-[closed]:opacity-0",
+      backdrop: "tw:ease-out tw:fixed tw:inset-0 tw:bg-black/40 tw:transition tw:duration-300 tw:data-[closed]:opacity-0",
+      wrapper: "tw:fixed tw:inset-0 tw:flex tw:w-screen tw:justify-center tw:md:p-4",
+      panelWrapper: "tw:relative tw:w-full tw:flex tw:flex-col tw:items-center",
+      panel: "",
+      closeButton: "tw:bg-dark-grey-bg tw:md:absolute tw:border-b tw:border-white/40 tw:top-0 tw:right-0 tw:flex tw:h-9 tw:w-full tw:md:w-9 tw:items-center tw:justify-center tw:md:rounded-full tw:text-xl tw:text-white tw:transition-colors tw:hover:bg-red tw:gap-1"
+    },
+    variants: {
+      centered: {
+        true: {
+          panelWrapper: "tw:justify-center"
+        }
+      }
+    }
+  }), { base: n, backdrop: c, wrapper: d, panelWrapper: p, panel: m, closeButton: u } = i({ centered: w });
+  return /* @__PURE__ */ e(x, { transition: !0, open: r, role: o, onClose: a, className: n(), "aria-labelledby": l, children: [
+    /* @__PURE__ */ t(g, { transition: !0, className: c() }),
+    /* @__PURE__ */ t("div", { className: d(), children: /* @__PURE__ */ e("div", { className: p(), children: [
+      /* @__PURE__ */ e(h, { onClick: a, className: u(), children: [
+        /* @__PURE__ */ t(b, { icon: f }),
+        /* @__PURE__ */ t("span", { className: "tw:md:sr-only tw:text-base", children: "Close Modal" })
+      ] }),
+      /* @__PURE__ */ t(y, { className: m(), children: s })
+    ] }) })
+  ] });
+}
+v.displayName = "Modal";
+export {
+  v as Modal
+};

package/dist/navigation-link.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare const defaultElement = "a";
+
+export declare function NavigationLink<T extends NavigationLinkElementType = typeof defaultElement>({ as, active, href, children, className, ...rest }: NavigationLinkProps<T>): JSX.Element;
+
+export declare namespace NavigationLink {
+    var displayName: string;
+}
+
+declare type NavigationLinkElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+export declare type NavigationLinkProps<T extends NavigationLinkElementType = typeof defaultElement> = PropsWithChildren<{
+    /** The element to render the link as */
+    as?: T;
+    /** If true, the link will be styled as active */
+    active?: boolean;
+    /** The href of the link */
+    href: string;
+    /** Additional classes to add the link */
+    className?: string;
+} & ComponentPropsWithoutRef<T>>;
+
+export { }

package/dist/navigation-link.js

@@ -0,0 +1,40 @@
+import { jsx as e } from "react/jsx-runtime";
+import { twMerge as g } from "tailwind-merge";
+import { tv as m } from "tailwind-variants";
+const b = "a";
+function f({
+  as: o,
+  active: t,
+  href: n,
+  children: i,
+  className: l,
+  ...r
+}) {
+  const w = o ?? b, s = m({
+    slots: {
+      listItem: "tw:contents tw:flex-1",
+      link: "tw:rounded-t-sm tw:bg-light-grey-bg tw:font-bold tw:hocus-visible:bg-light-grey tw:mb-1 tw:flex tw:items-center tw:justify-center tw:px-4 tw:py-3 tw:text-center tw:text-lg tw:text-black tw:transition-colors tw:focus:outline-none tw:flex-1"
+    },
+    variants: {
+      active: {
+        true: {
+          link: "tw:mb-0 tw:border-2 tw:border-yellow tw:bg-yellow tw:text-yellow-contrast tw:hocus-visible:bg-yellow"
+        }
+      }
+    }
+  }), { listItem: a, link: c } = s({ active: t });
+  return /* @__PURE__ */ e("li", { className: a(), children: /* @__PURE__ */ e(
+    w,
+    {
+      ...r,
+      href: n,
+      className: `uofg-navigation-link ${g(c(), l)}`,
+      "aria-current": t ? "page" : void 0,
+      children: i
+    }
+  ) });
+}
+f.displayName = "NavigationLink";
+export {
+  f as NavigationLink
+};

package/dist/navigation.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare const defaultElement = "a";
+
+export declare function Navigation({ className, children }: NavigationProps): JSX.Element;
+
+export declare namespace Navigation {
+    var displayName: string;
+}
+
+export declare function NavigationLink<T extends NavigationLinkElementType = typeof defaultElement>({ as, active, href, children, className, ...rest }: NavigationLinkProps<T>): JSX.Element;
+
+export declare namespace NavigationLink {
+    var displayName: string;
+}
+
+declare type NavigationLinkElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+declare type NavigationLinkProps<T extends NavigationLinkElementType = typeof defaultElement> = PropsWithChildren<{
+    /** The element to render the link as */
+    as?: T;
+    /** If true, the link will be styled as active */
+    active?: boolean;
+    /** The href of the link */
+    href: string;
+    /** Additional classes to add the link */
+    className?: string;
+} & ComponentPropsWithoutRef<T>>;
+
+export declare type NavigationProps = PropsWithChildren<{
+    /** Additional classes to add the navigation */
+    className?: string;
+}>;
+
+export { }

package/dist/navigation.js

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

package/dist/radio-context.d.ts

@@ -0,0 +1,9 @@
+import { Context } from 'react';
+
+export declare const RadioContext: Context<RadioContextValue<any> | undefined>;
+
+export declare type RadioContextValue<T> = {
+    setSelected: (value: T) => void;
+};
+
+export { }

package/dist/radio-context.js

@@ -0,0 +1,5 @@
+import { createContext as o } from "react";
+const e = o(void 0);
+export {
+  e as RadioContext
+};

package/dist/radio-group.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+export declare function Radio<T>({ selected, children, value }: RadioProps<T>): JSX.Element;
+
+export declare function RadioGroup<T>({ name, inline, onChange, children }: RadioGroupProps<T>): JSX.Element;
+
+export declare namespace RadioGroup {
+    var displayName: string;
+}
+
+export declare type RadioGroupProps<T> = PropsWithChildren<{
+    /** The name of the radio group. This is used for when the radio group is part of a form. */
+    name?: string;
+    /** Whether the radios should be displayed inline or not. */
+    inline?: boolean;
+    /** The callback to call when the selected radio changes. */
+    onChange?: (value: T | null) => void;
+}>;
+
+declare type RadioProps<T> = PropsWithChildren<{
+    /** Whether the radio is selected or not initially. */
+    selected?: boolean;
+    /** The value of the radio. */
+    value: T;
+}>;
+
+export { }

package/dist/radio-group.js

@@ -0,0 +1,37 @@
+import { jsx as r } from "react/jsx-runtime";
+import { RadioGroup as c } from "@headlessui/react";
+import { useState as f, useMemo as u } 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, t] = f(null), m = u(() => ({ setSelected: t }), [t]), p = n({
+    slots: {
+      base: "tw:flex tw:gap-2"
+    },
+    variants: {
+      inline: {
+        false: {
+          base: "tw:flex-col"
+        }
+      }
+    }
+  }), { base: d } = p({ inline: a });
+  return /* @__PURE__ */ r(
+    c,
+    {
+      name: s,
+      value: l,
+      onChange: (e) => {
+        t(e), o == null || o(e);
+      },
+      className: d(),
+      children: /* @__PURE__ */ r(x.Provider, { value: m, children: i })
+    }
+  );
+}
+R.displayName = "RadioGroup";
+export {
+  y as Radio,
+  R as RadioGroup
+};

package/dist/radio.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+export declare function Radio<T>({ selected, children, value }: RadioProps<T>): JSX.Element;
+
+export declare type RadioProps<T> = PropsWithChildren<{
+    /** Whether the radio is selected or not initially. */
+    selected?: boolean;
+    /** The value of the radio. */
+    value: T;
+}>;
+
+export { }

package/dist/radio.js

@@ -0,0 +1,36 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Field as w, Radio as f, Label as m } from "@headlessui/react";
+import { useContext as b, useEffect as u, Fragment as p } from "react";
+import { tv as g } from "tailwind-variants";
+import { RadioContext as h } from "./radio-context.js";
+function j({ selected: i, children: s, value: r }) {
+  const t = b(h);
+  u(() => {
+    i && (t == null || t.setSelected(r));
+  }, [t, i, r]);
+  const a = g({
+    slots: {
+      field: "tw:flex tw:items-center tw:gap-2",
+      radio: "tw:block tw:aspect-square tw:rounded-full tw:border tw:border-blue tw:p-1.5 tw:focus-visible:ring-2 tw:focus-visible:ring-blue tw:focus-visible:ring-offset-2",
+      circle: "tw:block tw:h-2 tw:w-2 tw:rounded-full"
+    },
+    variants: {
+      checked: {
+        true: {
+          radio: "tw:bg-blue",
+          circle: "tw:bg-white"
+        },
+        false: {
+          circle: "tw:bg-transparent"
+        }
+      }
+    }
+  }), { field: l, radio: c, circle: n } = a();
+  return /* @__PURE__ */ d(w, { className: l(), children: [
+    /* @__PURE__ */ e(f, { value: r, as: p, children: ({ checked: o }) => /* @__PURE__ */ e("span", { className: c({ checked: o }), children: /* @__PURE__ */ e("span", { className: n({ checked: o }) }) }) }),
+    /* @__PURE__ */ e(m, { children: s })
+  ] });
+}
+export {
+  j as Radio
+};

package/dist/regular-CYeGUuiO.js

@@ -0,0 +1,91 @@
+var a = {
+  prefix: "far",
+  iconName: "check",
+  icon: [
+    448,
+    512,
+    [10003, 10004],
+    "f00c",
+    "M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z"
+  ]
+}, e = {
+  prefix: "far",
+  iconName: "circle-plus",
+  icon: [
+    512,
+    512,
+    ["plus-circle"],
+    "f055",
+    "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344c0 13.3 10.7 24 24 24s24-10.7 24-24l0-64 64 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-64 0 0-64c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 64-64 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l64 0 0 64z"
+  ]
+}, l = {
+  prefix: "far",
+  iconName: "spinner",
+  icon: [
+    512,
+    512,
+    [],
+    "f110",
+    "M288 32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0 448a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM448 256a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zM32 288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM75 437a32 32 0 1 0 45.3-45.3A32 32 0 1 0 75 437zm316.8 0A32 32 0 1 0 437 391.8 32 32 0 1 0 391.8 437zM75 75a32 32 0 1 0 45.3 45.3A32 32 0 1 0 75 75z"
+  ]
+}, i = {
+  prefix: "far",
+  iconName: "chevron-right",
+  icon: [
+    320,
+    512,
+    [9002],
+    "f054",
+    "M305 239c9.4 9.4 9.4 24.6 0 33.9L113 465c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l175-175L79 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L305 239z"
+  ]
+}, c = {
+  prefix: "far",
+  iconName: "house",
+  icon: [
+    576,
+    512,
+    [63498, 63500, 127968, "home", "home-alt", "home-lg-alt"],
+    "f015",
+    "M303.5 5.7c-9-7.6-22.1-7.6-31.1 0l-264 224c-10.1 8.6-11.3 23.7-2.8 33.8s23.7 11.3 33.8 2.8L64 245.5 64 432c0 44.2 35.8 80 80 80l288 0c44.2 0 80-35.8 80-80l0-186.5 24.5 20.8c10.1 8.6 25.3 7.3 33.8-2.8s7.3-25.3-2.8-33.8l-264-224zM112 432l0-227.2L288 55.5 464 204.8 464 432c0 17.7-14.3 32-32 32l-48 0 0-152c0-22.1-17.9-40-40-40l-112 0c-22.1 0-40 17.9-40 40l0 152-48 0c-17.7 0-32-14.3-32-32zm128 32l0-144 96 0 0 144-96 0z"
+  ]
+}, r = c, f = {
+  prefix: "far",
+  iconName: "envelope",
+  icon: [
+    512,
+    512,
+    [9993, 61443, 128386],
+    "f0e0",
+    "M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"
+  ]
+}, n = {
+  prefix: "far",
+  iconName: "circle-exclamation",
+  icon: [
+    512,
+    512,
+    ["exclamation-circle"],
+    "f06a",
+    "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+  ]
+}, o = {
+  prefix: "far",
+  iconName: "circle-minus",
+  icon: [
+    512,
+    512,
+    ["minus-circle"],
+    "f056",
+    "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z"
+  ]
+};
+export {
+  e as a,
+  n as b,
+  r as c,
+  i as d,
+  a as e,
+  o as f,
+  f as g,
+  l as h
+};

package/dist/solid-DM6GVhkF.js

@@ -0,0 +1,80 @@
+var a = {
+  prefix: "fas",
+  iconName: "chevron-right",
+  icon: [
+    320,
+    512,
+    [9002],
+    "f054",
+    "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
+  ]
+}, l = {
+  prefix: "fas",
+  iconName: "chevron-left",
+  icon: [
+    320,
+    512,
+    [9001],
+    "f053",
+    "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
+  ]
+}, e = {
+  prefix: "fas",
+  iconName: "quote-left",
+  icon: [
+    448,
+    512,
+    [8220, "quote-left-alt"],
+    "f10d",
+    "M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z"
+  ]
+}, c = {
+  prefix: "fas",
+  iconName: "xmark",
+  icon: [
+    384,
+    512,
+    [215, 10005, 10006, 10060, 128473, "close", "multiply", "remove", "times"],
+    "f00d",
+    "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+  ]
+}, f = c, s = {
+  prefix: "fas",
+  iconName: "play",
+  icon: [
+    384,
+    512,
+    [9654],
+    "f04b",
+    "M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"
+  ]
+}, i = {
+  prefix: "fas",
+  iconName: "quote-right",
+  icon: [
+    448,
+    512,
+    [8221, "quote-right-alt"],
+    "f10e",
+    "M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z"
+  ]
+}, o = {
+  prefix: "fas",
+  iconName: "phone",
+  icon: [
+    512,
+    512,
+    [128222, 128379],
+    "f095",
+    "M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"
+  ]
+};
+export {
+  i as a,
+  l as b,
+  a as c,
+  o as d,
+  s as e,
+  e as f,
+  f as g
+};

package/dist/typography.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare const defaultElement = "span";
+
+/** The Typography component is a typographic component used to display headings or blocks of text. */
+export declare function Typography<T extends TypographyElementType = typeof defaultElement>({ type, children, className, as, ...rest }: TypographyProps<T>): JSX.Element;
+
+export declare namespace Typography {
+    var displayName: string;
+}
+
+export declare type TypographyElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';
+
+export declare type TypographyProps<T extends TypographyElementType = typeof defaultElement> = PropsWithChildren<{
+    /**
+     * The element to render the text as.
+     *
+     * @default 'span'
+     */
+    as?: T;
+    /** The text style */
+    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body';
+    /** Additional classes to apply to the text. */
+    className?: string;
+} & ComponentPropsWithoutRef<T>>;
+
+export { }