@uoguelph/react-components 1.0.0-rc.0

package/README.md

@@ -0,0 +1,3 @@
+# @uoguelph/react-components
+
+A collection of components for use in React projects following University of Guelph brand guidelines.

package/dist/accordion-button.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The AccordionButton component is a button used to toggle the visibility of an accordion panel. */
+export declare function AccordionButton({ children, className }: AccordionButtonProps): JSX.Element;
+
+export declare namespace AccordionButton {
+    var displayName: string;
+}
+
+export declare type AccordionButtonProps = PropsWithChildren<{
+    /** Additional classes to apply to the accordion button */
+    className?: string;
+}>;
+
+export { }

package/dist/accordion-button.js

@@ -0,0 +1,42 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { f as u, a as l } from "./regular-CYeGUuiO.js";
+import { FontAwesomeIcon as w } 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 g({ children: n, className: e }) {
+  const t = b(p), i = m({
+    slots: {
+      button: "tw:group tw:mb-1 tw:inline-flex tw:w-full tw:cursor-pointer tw:items-center tw:justify-between tw:gap-2 tw:p-2.5 tw:px-5 tw:text-left tw:text-xl tw:transition-colors tw:focus:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-blue tw:focus-visible:ring-offset-2 tw:hocus-visible:bg-blue tw:hocus-visible:text-blue-contrast",
+      icon: "tw:h-[1em] tw:text-blue-on-light tw:group-hocus-visible:text-blue-contrast tw:transition"
+    },
+    variants: {
+      open: {
+        true: {
+          button: "tw:bg-blue tw:text-blue-contrast",
+          icon: "tw:text-blue-contrast"
+        },
+        false: {
+          icon: "tw:rotate-90",
+          button: "tw:bg-light-grey-bg tw:text-blue-on-light"
+        }
+      }
+    }
+  }), { button: s, icon: r } = i({ open: t == null ? void 0 : t.isOpen });
+  return /* @__PURE__ */ c(a, { className: `uofg-accordion-button ${f(e, s())}`, children: [
+    /* @__PURE__ */ o("span", { className: "uofg-accordion-button-content", children: n }),
+    /* @__PURE__ */ o(
+      w,
+      {
+        icon: t != null && t.isOpen ? u : l,
+        className: `uofg-accordion-button-icon ${r()}`
+      }
+    )
+  ] });
+}
+g.displayName = "AccordionButton";
+export {
+  g as AccordionButton
+};

package/dist/accordion-content.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+export declare function AccordionContent({ children, className }: AccordionContentProps): JSX.Element;
+
+export declare namespace AccordionContent {
+    var displayName: string;
+}
+
+export declare type AccordionContentProps = PropsWithChildren<{
+    /** Additional classes to apply to the accordion button */
+    className?: string;
+}>;
+
+export { }

package/dist/accordion-content.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { DisclosurePanel as i } from "@headlessui/react";
+import { useContext as c } from "react";
+import m from "react-animate-height";
+import { twMerge as a } from "tailwind-merge";
+import { AccordionContext as s } from "./accordion-context.js";
+function p({ children: r, className: e }) {
+  const o = c(s), n = a("tw:border-l-4 tw:border-yellow tw:py-3 tw: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 }) });
+}
+p.displayName = "AccordionContent";
+export {
+  p as AccordionContent
+};

package/dist/accordion-context.d.ts

@@ -0,0 +1,9 @@
+import { Context } from 'react';
+
+export declare const AccordionContext: Context<AccordionContextValue | undefined>;
+
+export declare type AccordionContextValue = {
+    isOpen: boolean;
+};
+
+export { }

package/dist/accordion-context.js

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

package/dist/accordion.d.ts

@@ -0,0 +1,42 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/**
+ * The Accordion component is used for organizing information into collapsible sections which respond to user
+ * interaction.
+ */
+export declare function Accordion({ children, className }: AccordionProps): JSX.Element;
+
+export declare namespace Accordion {
+    var displayName: string;
+}
+
+/** The AccordionButton component is a button used to toggle the visibility of an accordion panel. */
+export declare function AccordionButton({ children, className }: AccordionButtonProps): JSX.Element;
+
+export declare namespace AccordionButton {
+    var displayName: string;
+}
+
+declare type AccordionButtonProps = PropsWithChildren<{
+    /** Additional classes to apply to the accordion button */
+    className?: string;
+}>;
+
+export declare function AccordionContent({ children, className }: AccordionContentProps): JSX.Element;
+
+export declare namespace AccordionContent {
+    var displayName: string;
+}
+
+declare type AccordionContentProps = PropsWithChildren<{
+    /** Additional classes to apply to the accordion button */
+    className?: string;
+}>;
+
+export declare type AccordionProps = PropsWithChildren<{
+    /** Additional classes to apply to the accordion. */
+    className?: string;
+}>;
+
+export { }

package/dist/accordion.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Disclosure as n } 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 h } from "./accordion-content.js";
+function d({ children: r, className: c }) {
+  const t = e("tw:my-2 tw:[&_p:last-child]:mb-0", c);
+  return /* @__PURE__ */ o(n, { children: ({ open: i }) => /* @__PURE__ */ o("div", { className: `uofg-accordion ${t}`, children: /* @__PURE__ */ o(m.Provider, { value: { isOpen: i }, children: r }) }) });
+}
+d.displayName = "Accordion";
+export {
+  d as Accordion,
+  x as AccordionButton,
+  h as AccordionContent
+};

package/dist/alert-footer.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The AlertFooter component is used to display additional information or actions at the bottom of an alert. */
+export declare function AlertFooter({ children, className }: AlertFooterProps): JSX.Element;
+
+export declare namespace AlertFooter {
+    var displayName: string;
+}
+
+export declare type AlertFooterProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert footer */
+    className?: string;
+}>;
+
+export { }

package/dist/alert-footer.js

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

package/dist/alert-message.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The AlertMessage component is used to display the main content of an alert. */
+export declare function AlertMessage({ children, className }: AlertMessageProps): JSX.Element;
+
+export declare namespace AlertMessage {
+    var displayName: string;
+}
+
+export declare type AlertMessageProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert message */
+    className?: string;
+}>;
+
+export { }

package/dist/alert-message.js

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

package/dist/alert-subtitle.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The AlertSubtitle component is used to display a subtitle for an alert. */
+export declare function AlertSubtitle({ children, className }: AlertSubtitleProps): JSX.Element;
+
+export declare namespace AlertSubtitle {
+    var displayName: string;
+}
+
+export declare type AlertSubtitleProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert subtitle */
+    className?: string;
+}>;
+
+export { }

package/dist/alert-subtitle.js

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

package/dist/alert-title.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The AlertTitle component is used to display the title of an alert. */
+export declare function AlertTitle({ color, className, children }: AlertTitleProps): JSX.Element;
+
+export declare namespace AlertTitle {
+    var displayName: string;
+}
+
+export declare type AlertTitleProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert title */
+    className?: string;
+    /**
+     * The background color of the alert title
+     *
+     * @default 'red'
+     */
+    color?: 'red' | 'yellow' | 'blue' | 'green' | 'light-grey' | 'dark-grey' | 'black' | 'white';
+}>;
+
+export { }

package/dist/alert-title.js

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

package/dist/alert.d.ts

@@ -0,0 +1,70 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The Alert component is used to display critical feedback, such as warnings, errors, or informational messages. */
+export declare function Alert({ children, className }: AlertProps): JSX.Element;
+
+export declare namespace Alert {
+    var displayName: string;
+}
+
+/** The AlertFooter component is used to display additional information or actions at the bottom of an alert. */
+export declare function AlertFooter({ children, className }: AlertFooterProps): JSX.Element;
+
+export declare namespace AlertFooter {
+    var displayName: string;
+}
+
+declare type AlertFooterProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert footer */
+    className?: string;
+}>;
+
+/** The AlertMessage component is used to display the main content of an alert. */
+export declare function AlertMessage({ children, className }: AlertMessageProps): JSX.Element;
+
+export declare namespace AlertMessage {
+    var displayName: string;
+}
+
+declare type AlertMessageProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert message */
+    className?: string;
+}>;
+
+export declare type AlertProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert */
+    className?: string;
+}>;
+
+/** The AlertSubtitle component is used to display a subtitle for an alert. */
+export declare function AlertSubtitle({ children, className }: AlertSubtitleProps): JSX.Element;
+
+export declare namespace AlertSubtitle {
+    var displayName: string;
+}
+
+declare type AlertSubtitleProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert subtitle */
+    className?: string;
+}>;
+
+/** The AlertTitle component is used to display the title of an alert. */
+export declare function AlertTitle({ color, className, children }: AlertTitleProps): JSX.Element;
+
+export declare namespace AlertTitle {
+    var displayName: string;
+}
+
+declare type AlertTitleProps = PropsWithChildren<{
+    /** Additional classes to apply to the alert title */
+    className?: string;
+    /**
+     * The background color of the alert title
+     *
+     * @default 'red'
+     */
+    color?: 'red' | 'yellow' | 'blue' | 'green' | 'light-grey' | 'dark-grey' | 'black' | 'white';
+}>;
+
+export { }

package/dist/alert.js

@@ -0,0 +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 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("tw:flex tw:flex-col", r);
+  return /* @__PURE__ */ o("div", { className: `uofg-alert ${t}`, children: e });
+}
+f.displayName = "Alert";
+export {
+  f as Alert,
+  i as AlertFooter,
+  A as AlertMessage,
+  n as AlertSubtitle,
+  g as AlertTitle
+};

package/dist/blockquote.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The Blockquote component is used to highlight a quote or excerpt from another source. */
+export declare function Blockquote({ className, children, color }: BlockquoteProps): JSX.Element;
+
+export declare namespace Blockquote {
+    var displayName: string;
+}
+
+export declare type BlockquoteProps = PropsWithChildren<{
+    /** Additional classes to apply to the blockquote */
+    className?: string;
+    /**
+     * The color of the blockquote quotation marks
+     *
+     * @default 'yellow'
+     */
+    color?: 'yellow' | 'red' | 'blue';
+}>;
+
+export { }

package/dist/blockquote.js

@@ -0,0 +1,43 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { f as a, a as m } from "./solid-DM6GVhkF.js";
+import { FontAwesomeIcon as e } from "@fortawesome/react-fontawesome";
+import { twMerge as u } from "tailwind-merge";
+import { tv as f } from "tailwind-variants";
+function w({ className: l, children: c, color: i = "yellow" }) {
+  const s = f({
+    slots: {
+      base: u("tw:font-light tw:block tw:w-full tw:text-center tw:text-3xl tw:italic", l),
+      icons: "tw:inline-block tw:h-[1em]"
+    },
+    variants: {
+      color: {
+        red: {
+          icons: "tw:text-red"
+        },
+        yellow: {
+          icons: "tw:text-yellow"
+        },
+        blue: {
+          icons: "tw:text-blue"
+        }
+      },
+      direction: {
+        left: {
+          icons: "tw:mr-[0.3em]"
+        },
+        right: {
+          icons: "tw:ml-[0.25em]"
+        }
+      }
+    }
+  }), { base: n, icons: o } = s({ color: i });
+  return /* @__PURE__ */ r("blockquote", { className: `uofg-blockquote ${n()}`, children: [
+    /* @__PURE__ */ t(e, { icon: a, className: `uofg-blockquote-left-quote ${o({ direction: "left" })}` }),
+    /* @__PURE__ */ t("span", { className: "uofg-blockquote-content", children: c }),
+    /* @__PURE__ */ t(e, { icon: m, className: `uofg-blockquote-right-quote ${o({ direction: "right" })}` })
+  ] });
+}
+w.displayName = "Blockquote";
+export {
+  w as Blockquote
+};

package/dist/breadcrumb-home.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare type BreadcrumbElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+export declare function BreadcrumbHome<T extends BreadcrumbElementType = typeof defaultBreadcrumbElement>({ href, children, // eslint-disable-line @typescript-eslint/no-unused-vars
+    className, ...rest }: BreadcrumbProps<T>): JSX.Element;
+
+export declare namespace BreadcrumbHome {
+    var displayName: string;
+}
+
+declare type BreadcrumbProps<T extends BreadcrumbElementType = typeof defaultBreadcrumbElement> = PropsWithChildren<{
+    /**
+     * The element to render the breadcrumb as
+     *
+     * @default 'a'
+     */
+    as?: T;
+    /** The URL to link to */
+    href?: string;
+    /** Additional classes to apply to the breadcrumb */
+    className?: string;
+} & ComponentPropsWithoutRef<T>>;
+
+declare const defaultBreadcrumbElement = "a";
+
+export { }

package/dist/breadcrumb-home.js

@@ -0,0 +1,21 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { c as n } from "./regular-CYeGUuiO.js";
+import { FontAwesomeIcon as a } from "@fortawesome/react-fontawesome";
+import { twJoin as s } from "tailwind-merge";
+function t({
+  href: r = "/",
+  children: l,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  className: e,
+  ...m
+}) {
+  const c = s("tw:h-[1em] tw:fill-black");
+  return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ i("a", { ...m, href: r, className: e, children: [
+    /* @__PURE__ */ o(a, { icon: n, className: c }),
+    /* @__PURE__ */ o("span", { className: "tw:sr-only", children: "U of G Homepage" })
+  ] }) });
+}
+t.displayName = "BreadcrumbHome";
+export {
+  t as BreadcrumbHome
+};

package/dist/breadcrumb.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The Breadcrumb component is used to display a single breadcrumb in a Breadcrumbs component. */
+export declare function Breadcrumb<T extends BreadcrumbElementType = typeof defaultBreadcrumbElement>({ as, children, className, href, ...rest }: BreadcrumbProps<T>): JSX.Element;
+
+export declare namespace Breadcrumb {
+    var displayName: string;
+}
+
+export declare type BreadcrumbElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+export declare type BreadcrumbProps<T extends BreadcrumbElementType = typeof defaultBreadcrumbElement> = PropsWithChildren<{
+    /**
+     * The element to render the breadcrumb as
+     *
+     * @default 'a'
+     */
+    as?: T;
+    /** The URL to link to */
+    href?: string;
+    /** Additional classes to apply to the breadcrumb */
+    className?: string;
+} & ComponentPropsWithoutRef<T>>;
+
+export declare const defaultBreadcrumbElement = "a";
+
+export { }

package/dist/breadcrumb.js

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

package/dist/breadcrumbs.d.ts

@@ -0,0 +1,54 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The Breadcrumb component is used to display a single breadcrumb in a Breadcrumbs component. */
+export declare function Breadcrumb<T extends BreadcrumbElementType = typeof defaultBreadcrumbElement>({ as, children, className, href, ...rest }: BreadcrumbProps<T>): JSX.Element;
+
+export declare namespace Breadcrumb {
+    var displayName: string;
+}
+
+declare type BreadcrumbElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+export declare function BreadcrumbHome<T extends BreadcrumbElementType = typeof defaultBreadcrumbElement>({ href, children, // eslint-disable-line @typescript-eslint/no-unused-vars
+    className, ...rest }: BreadcrumbProps<T>): JSX.Element;
+
+export declare namespace BreadcrumbHome {
+    var displayName: string;
+}
+
+declare type BreadcrumbProps<T extends BreadcrumbElementType = typeof defaultBreadcrumbElement> = PropsWithChildren<{
+    /**
+     * The element to render the breadcrumb as
+     *
+     * @default 'a'
+     */
+    as?: T;
+    /** The URL to link to */
+    href?: string;
+    /** Additional classes to apply to the breadcrumb */
+    className?: string;
+} & ComponentPropsWithoutRef<T>>;
+
+/**
+ * The Breadcrumbs component is a navigational aid that displays a trail of links representing the user's path within a
+ * website or application.
+ */
+export declare function Breadcrumbs({ className, children }: BreadcrumbsProps): JSX.Element;
+
+export declare namespace Breadcrumbs {
+    var displayName: string;
+}
+
+export declare type BreadcrumbsProps = PropsWithChildren<{
+    /** Additional classes to apply to the breadcrumbs */
+    className?: string;
+}>;
+
+declare const defaultBreadcrumbElement = "a";
+
+export { }