@uva-glass/component-library 3.55.0 → 3.55.2

package/dist/Accordion-BpnBHYIx.js

@@ -0,0 +1,69 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { forwardRef as n, useId as r, useImperativeHandle as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import './assets/Accordion.css';//#region src/components/Accordion/Accordion.module.css
+var c = "_accordion_19w0n_1", l = "_accordion__title_19w0n_6", u = "_accordion__content_19w0n_66", d = {
+	accordion: c,
+	accordion__title: l,
+	"accordion__title-icon": "_accordion__title-icon_19w0n_21",
+	"accordion__title-icon-right": "_accordion__title-icon-right_19w0n_22",
+	"accordion__title-icon--margin-0": "_accordion__title-icon--margin-0_19w0n_28",
+	"accordion__title-icon--margin-025": "_accordion__title-icon--margin-025_19w0n_32",
+	"accordion__title-icon--margin-050": "_accordion__title-icon--margin-050_19w0n_36",
+	"accordion__title-icon--margin-075": "_accordion__title-icon--margin-075_19w0n_40",
+	"accordion__title-icon--margin-100": "_accordion__title-icon--margin-100_19w0n_44",
+	"accordion__title-icon--margin-150": "_accordion__title-icon--margin-150_19w0n_48",
+	"accordion__title-icon--margin-200": "_accordion__title-icon--margin-200_19w0n_52",
+	"accordion__title-icon--expanded": "_accordion__title-icon--expanded_19w0n_60",
+	"accordion__title-icon-right--expanded": "_accordion__title-icon-right--expanded_19w0n_61",
+	accordion__content: u,
+	"accordion__content--expanded": "_accordion__content--expanded_19w0n_70"
+}, f = n(({ title: n, content: c, expanded: l = !1, cheveronPlacement: u = "right", cheveronMargin: f = "050" }, p) => {
+	let [m, h] = a(l), g = r();
+	function _(e) {
+		let { code: t } = e;
+		(t === "Enter" || t === "Space") && h(!m);
+	}
+	let v = () => {
+		h(!1);
+	}, y = () => {
+		h(!0);
+	};
+	return i(p, () => ({
+		closeContent: v,
+		openContent: y
+	})), /* @__PURE__ */ o("div", { children: /* @__PURE__ */ s("div", {
+		className: d.accordion,
+		children: [/* @__PURE__ */ s("div", {
+			className: d.accordion__title,
+			id: g,
+			role: "button",
+			tabIndex: 0,
+			onClick: () => h(!m),
+			onKeyUp: _,
+			"aria-expanded": m,
+			children: [
+				u === "left" && /* @__PURE__ */ o(t, {
+					className: e(d["accordion__title-icon"], d[`accordion__title-icon--margin-${f}`], { [d["accordion__title-icon--expanded"]]: m }),
+					name: "CheveronLeft",
+					size: 16
+				}),
+				n,
+				u === "right" && /* @__PURE__ */ o(t, {
+					className: e(d["accordion__title-icon-right"], d[`accordion__title-icon--margin-${f}`], { [d["accordion__title-icon-right--expanded"]]: m }),
+					name: "CheveronLeft",
+					size: 16
+				})
+			]
+		}), /* @__PURE__ */ o("div", {
+			"aria-labelledby": g,
+			className: e(d.accordion__content, { [d["accordion__content--expanded"]]: m }),
+			children: c
+		})]
+	}) });
+});
+//#endregion
+export { f as t };
+
+//# sourceMappingURL=Accordion-BpnBHYIx.js.map

package/dist/Accordion-BpnBHYIx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion-BpnBHYIx.js","names":[],"sources":["../src/components/Accordion/Accordion.module.css","../src/components/Accordion/Accordion.tsx"],"sourcesContent":[".accordion {\n  overflow: hidden;\n  position: relative;\n}\n\n.accordion__title {\n  align-items: center;\n  display: flex;\n  gap: 0.5rem;\n}\n\n.accordion__title:hover {\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n.accordion__title:focus-visible {\n  text-decoration: underline;\n}\n\n.accordion__title-icon,\n.accordion__title-icon-right {\n  transform: rotate(-90deg);\n  transition: transform 300ms ease-in;\n  margin-right: 0.25rem;\n}\n\n.accordion__title-icon--margin-0 {\n  margin: 0;\n}\n\n.accordion__title-icon--margin-025 {\n  margin: 0 0.25rem;\n}\n\n.accordion__title-icon--margin-050 {\n  margin: 0 0.5rem;\n}\n\n.accordion__title-icon--margin-075 {\n  margin: 0 0.75rem;\n}\n\n.accordion__title-icon--margin-100 {\n  margin: 0 1rem;\n}\n\n.accordion__title-icon--margin-150 {\n  margin: 0 1.5rem;\n}\n\n.accordion__title-icon--margin-200 {\n  margin: 0 2rem;\n}\n\n.accordion__title-icon-right {\n  margin-left: auto;\n}\n\n.accordion__title-icon--expanded,\n.accordion__title-icon-right--expanded {\n  transform: rotate(90deg);\n  transition: transform 300ms ease-out;\n}\n\n.accordion__content {\n  display: none;\n}\n\n.accordion__content--expanded {\n  display: block;\n}\n","import { clsx } from 'clsx';\nimport { forwardRef, useId, useImperativeHandle, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n  /** Clickable title (always visible). */\n  title: ReactNode;\n  /** Main content (hidden when expanded is false). */\n  content: ReactNode;\n  /** Indicator if Accordion should be expanded by default.*/\n  expanded?: boolean;\n  /** Indicator for cheveron icon placement.*/\n  cheveronPlacement?: 'left' | 'right';\n  /** Indicator for cheveron icon margin. By default '050'. */\n  cheveronMargin?: '0' | '025' | '050' | '075' | '100' | '150' | '200';\n}\n\nexport interface AccordionMethods {\n  closeContent: () => void;\n  openContent: () => void;\n}\n\n/** A controller for accordion display toggling of content with click on a title. */\nexport const Accordion = forwardRef<AccordionMethods, AccordionProps>(\n  ({ title, content, expanded = false, cheveronPlacement = 'right', cheveronMargin = '050' }, ref) => {\n    const [isExpanded, setIsExpanded] = useState(expanded);\n    const accordionId = useId();\n\n    function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n      const { code } = event;\n\n      if (code === 'Enter' || code === 'Space') {\n        setIsExpanded(!isExpanded);\n      }\n    }\n\n    const closeContent = () => {\n      setIsExpanded(false);\n    };\n\n    const openContent = () => {\n      setIsExpanded(true);\n    };\n\n    useImperativeHandle(ref, () => ({\n      closeContent,\n      openContent,\n    }));\n\n    return (\n      <div>\n        <div className={styles['accordion']}>\n          <div\n            className={styles['accordion__title']}\n            id={accordionId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={() => setIsExpanded(!isExpanded)}\n            onKeyUp={onKeyUp}\n            aria-expanded={isExpanded}\n          >\n            {cheveronPlacement === 'left' && (\n              <Icon\n                className={clsx(\n                  styles['accordion__title-icon'],\n                  styles[`accordion__title-icon--margin-${cheveronMargin}`],\n                  {\n                    [styles['accordion__title-icon--expanded']]: isExpanded,\n                  }\n                )}\n                name=\"CheveronLeft\"\n                size={16}\n              />\n            )}\n\n            {title}\n            {cheveronPlacement === 'right' && (\n              <Icon\n                className={clsx(\n                  styles['accordion__title-icon-right'],\n                  styles[`accordion__title-icon--margin-${cheveronMargin}`],\n                  {\n                    [styles['accordion__title-icon-right--expanded']]: isExpanded,\n                  }\n                )}\n                name=\"CheveronLeft\"\n                size={16}\n              />\n            )}\n          </div>\n          <div\n            aria-labelledby={accordionId}\n            className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n          >\n            {content}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;GC4Ba,IAAY,GACtB,EAAE,UAAO,YAAS,cAAW,IAAO,uBAAoB,SAAS,oBAAiB,SAAS,MAAQ;CAClG,IAAM,CAAC,GAAY,KAAiB,EAAS,EAAS,EAChD,IAAc,GAAO;CAE3B,SAAS,EAAQ,GAAsC;EACrD,IAAM,EAAE,YAAS;AAEjB,GAAI,MAAS,WAAW,MAAS,YAC/B,EAAc,CAAC,EAAW;;CAI9B,IAAM,UAAqB;AACzB,IAAc,GAAM;IAGhB,UAAoB;AACxB,IAAc,GAAK;;AAQrB,QALA,EAAoB,UAAY;EAC9B;EACA;EACD,EAAE,EAGD,kBAAC,OAAD,EAAA,UACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,OAAD;GACE,WAAW,EAAO;GAClB,IAAI;GACJ,MAAK;GACL,UAAU;GACV,eAAe,EAAc,CAAC,EAAW;GAChC;GACT,iBAAe;aAPjB;IASG,MAAsB,UACrB,kBAAC,GAAD;KACE,WAAW,EACT,EAAO,0BACP,EAAO,iCAAiC,MACxC,GACG,EAAO,qCAAqC,GAC9C,CACF;KACD,MAAK;KACL,MAAM;KACN,CAAA;IAGH;IACA,MAAsB,WACrB,kBAAC,GAAD;KACE,WAAW,EACT,EAAO,gCACP,EAAO,iCAAiC,MACxC,GACG,EAAO,2CAA2C,GACpD,CACF;KACD,MAAK;KACL,MAAM;KACN,CAAA;IAEA;MACN,kBAAC,OAAD;GACE,mBAAiB;GACjB,WAAW,EAAK,EAAO,oBAAoB,GAAG,EAAO,kCAAkC,GAAY,CAAC;aAEnG;GACG,CAAA,CACF;KACF,CAAA;EAGX"}

package/dist/AccordionCard-BXy-plB7.js

@@ -0,0 +1,43 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { useId as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import './assets/AccordionCard.css';//#region src/components/AccordionCard/AccordionCard.module.css
+var o = {
+	"accordion-card": "_accordion-card_60o6f_1",
+	"accordion-card__title": "_accordion-card__title_60o6f_7",
+	"accordion-card__title-icon": "_accordion-card__title-icon_60o6f_25",
+	"accordion-card__title-icon--expanded": "_accordion-card__title-icon--expanded_60o6f_30",
+	"accordion-card__content": "_accordion-card__content_60o6f_35",
+	"accordion-card__content--expanded": "_accordion-card__content--expanded_60o6f_40"
+}, s = ({ title: s, content: c, expanded: l = !1 }) => {
+	let [u, d] = r(l), f = n();
+	return /* @__PURE__ */ a("div", {
+		className: o["accordion-card"],
+		children: [/* @__PURE__ */ a("div", {
+			className: o["accordion-card__title"],
+			id: f,
+			role: "button",
+			tabIndex: 0,
+			onClick: () => d(!u),
+			onKeyUp: (e) => {
+				let { code: t } = e;
+				(t === "Enter" || t === "Space") && d(!u);
+			},
+			"aria-expanded": u,
+			children: [/* @__PURE__ */ i(t, {
+				className: e(o["accordion-card__title-icon"], { [o["accordion-card__title-icon--expanded"]]: u }),
+				name: "CheveronLeft",
+				size: 16
+			}), /* @__PURE__ */ i("h3", { children: s })]
+		}), /* @__PURE__ */ i("div", {
+			"aria-labelledby": f,
+			className: e(o["accordion-card__content"], { [o["accordion-card__content--expanded"]]: u }),
+			children: c
+		})]
+	});
+};
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=AccordionCard-BXy-plB7.js.map

package/dist/AccordionCard-BXy-plB7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionCard-BXy-plB7.js","names":[],"sources":["../src/components/AccordionCard/AccordionCard.module.css","../src/components/AccordionCard/AccordionCard.tsx"],"sourcesContent":[".accordion-card {\n  background-color: var(--color-grey-200);\n  overflow: hidden;\n  position: relative;\n}\n\n.accordion-card__title {\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-start;\n  padding: 1.5rem 1rem;\n  user-select: none;\n}\n\n.accordion-card__title h3 {\n  margin: 0;\n}\n\n.accordion-card__title:focus-visible {\n  text-decoration: underline;\n}\n\n.accordion-card__title-icon {\n  transform: rotate(-90deg);\n  transition: transform 300ms ease-in;\n}\n\n.accordion-card__title-icon--expanded {\n  transform: rotate(90deg);\n  transition: transform 300ms ease-out;\n}\n\n.accordion-card__content {\n  display: none;\n  margin: 0.5rem 2.5rem 2.5rem;\n}\n\n.accordion-card__content--expanded {\n  display: block;\n}\n","import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './AccordionCard.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionCardProps {\n  /** Clickable title (always visible). */\n  title: ReactNode;\n  /** Main content (hidden when expanded is false). */\n  content: ReactNode;\n  /** Indicator if Accordion should be expanded by default.*/\n  expanded?: boolean;\n}\n\nexport const AccordionCard = ({ title, content, expanded = false }: AccordionCardProps) => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n  const accordionId = useId();\n\n  const onKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n    const { code } = event;\n\n    if (code === 'Enter' || code === 'Space') {\n      setIsExpanded(!isExpanded);\n    }\n  };\n\n  return (\n    <div className={styles['accordion-card']}>\n      <div\n        className={styles['accordion-card__title']}\n        id={accordionId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={() => setIsExpanded(!isExpanded)}\n        onKeyUp={onKeyUp}\n        aria-expanded={isExpanded}\n      >\n        <Icon\n          className={clsx(styles['accordion-card__title-icon'], {\n            [styles['accordion-card__title-icon--expanded']]: isExpanded,\n          })}\n          name=\"CheveronLeft\"\n          size={16}\n        />\n        <h3>{title}</h3>\n      </div>\n      <div\n        aria-labelledby={accordionId}\n        className={clsx(styles['accordion-card__content'], {\n          [styles['accordion-card__content--expanded']]: isExpanded,\n        })}\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;GCkBa,KAAiB,EAAE,UAAO,YAAS,cAAW,SAAgC;CACzF,IAAM,CAAC,GAAY,KAAiB,EAAS,EAAS,EAChD,IAAc,GAAO;AAU3B,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,OAAD;GACE,WAAW,EAAO;GAClB,IAAI;GACJ,MAAK;GACL,UAAU;GACV,eAAe,EAAc,CAAC,EAAW;GAChC,UAhBE,MAAyC;IACxD,IAAM,EAAE,YAAS;AAEjB,KAAI,MAAS,WAAW,MAAS,YAC/B,EAAc,CAAC,EAAW;;GAaxB,iBAAe;aAPjB,CASE,kBAAC,GAAD;IACE,WAAW,EAAK,EAAO,+BAA+B,GACnD,EAAO,0CAA0C,GACnD,CAAC;IACF,MAAK;IACL,MAAM;IACN,CAAA,EACF,kBAAC,MAAD,EAAA,UAAK,GAAW,CAAA,CACZ;MACN,kBAAC,OAAD;GACE,mBAAiB;GACjB,WAAW,EAAK,EAAO,4BAA4B,GAChD,EAAO,uCAAuC,GAChD,CAAC;aAED;GACG,CAAA,CACF"}

package/dist/ActionList-O9w1hqNg.js

@@ -0,0 +1,95 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { MenuButton as n } from "./components/Buttons/MenuButton.js";
+import { Children as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import './assets/ActionList.css';//#region src/components/ActionList/ActionList.module.css
+var u = {
+	"action-list": "_action-list_ocnrd_1",
+	"action-list--open": "_action-list--open_ocnrd_13",
+	"action-list-container": "_action-list-container_ocnrd_17"
+}, d = -1, f = 1;
+function p({ label: p, prefixIcon: m, iconName: h, variant: g = "secondary", children: _ }) {
+	let v = a(), y = o(null), b = o(null), x = o(null), S = r.count(_), [C, w] = s(d), [T, E] = s(!1);
+	function D() {
+		E(!0), document.addEventListener("click", M, {
+			once: !0,
+			capture: !0
+		});
+	}
+	function O(e) {
+		e && x.current && !x.current.contains(e.target) || (w(d), E(!1), document.removeEventListener("click", M, { capture: !0 }));
+	}
+	function k() {
+		T ? O() : D();
+	}
+	function A(e) {
+		T && ([
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End"
+		].includes(e.code) && e.preventDefault(), e.code === "Tab" && O());
+	}
+	function j(e) {
+		(e.code === "Space" || e.key === "Enter") && (e.target === y.current ? k() : e.key === "Enter" && e.target !== b.current && "firstChild" in e.target && e.target.firstChild.click()), e.code === "Escape" && O(), e.code === "ArrowUp" && w((e) => e === 0 ? S - f : e - f), e.code === "ArrowDown" && w((e) => e === S - f ? 0 : e + f), e.code === "Home" && w(0), e.code === "End" && w(S - f);
+	}
+	let M = (e) => {
+		let { target: t } = e;
+		!t || !x.current || x.current.contains(t) || O();
+	};
+	return i(() => {
+		if (C < 0 || !b.current) return;
+		let e = b.current.children.item(C);
+		e && e.focus();
+	}, [C]), i(() => {
+		!b.current || !b.current.hasChildNodes() || Array.from(b.current.children).filter((e) => e.nodeType === Node.ELEMENT_NODE && e.hasChildNodes()).forEach((e) => {
+			Array.from(e.children).filter((e) => e.nodeType === Node.ELEMENT_NODE).forEach((e) => {
+				e.setAttribute("tabIndex", "-1");
+			});
+		});
+	}, [_]), /* @__PURE__ */ l("div", {
+		className: u["action-list-container"],
+		ref: x,
+		children: [/* @__PURE__ */ l(n, {
+			onClick: k,
+			onKeyDown: A,
+			onKeyUp: j,
+			buttonRef: y,
+			variant: g,
+			children: [
+				m && /* @__PURE__ */ c(t, {
+					size: 24,
+					name: m
+				}),
+				p,
+				h ? /* @__PURE__ */ c(t, {
+					size: 24,
+					name: h
+				}) : /* @__PURE__ */ c(t, {
+					size: 16,
+					name: T ? "CheveronUp" : "CheveronDown"
+				})
+			]
+		}), /* @__PURE__ */ c("div", {
+			"aria-activedescendant": `${v}-child-${C}`,
+			"aria-label": p,
+			className: e(u["action-list"], { [u["action-list--open"]]: T }),
+			onClickCapture: O,
+			onKeyDown: A,
+			onKeyUp: j,
+			ref: b,
+			role: "menu",
+			tabIndex: -1,
+			children: r.map(_, (e, t) => /* @__PURE__ */ c("div", {
+				role: "menuitem",
+				tabIndex: -1,
+				children: e
+			}, `${v}-child-${t}`))
+		})]
+	});
+}
+//#endregion
+export { p as t };
+
+//# sourceMappingURL=ActionList-O9w1hqNg.js.map

package/dist/ActionList-O9w1hqNg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionList-O9w1hqNg.js","names":[],"sources":["../src/components/ActionList/ActionList.module.css","../src/components/ActionList/ActionList.tsx"],"sourcesContent":[".action-list {\n  background-color: var(--color-uva-white);\n  border-radius: 0.5rem;\n  box-shadow: 0 0 6px 2px rgb(0 0 0 / 15%);\n  display: none;\n  padding: 0.25rem;\n  position: absolute;\n  right: 0;\n  top: calc(100% + 0.5rem);\n  z-index: 100;\n}\n\n.action-list--open {\n  display: block;\n}\n\n.action-list-container {\n  position: relative;\n}\n\n.action-list [role=\"menuitem\"] > * {\n  background: 0;\n  border: 0;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: block;\n  font: inherit;\n  margin: 0;\n  padding: 0.5rem 0.75rem;\n  text-align: left;\n  white-space: pre;\n  width: 100%;\n}\n\n.action-list [role=\"menuitem\"] > *:not(:last-of-type) {\n  border-bottom: 1px solid var(--color-grey-300);\n}\n\n.action-list [role=\"menuitem\"] > *:hover {\n  background-color: var(--color-grey-200);\n}\n","import { clsx } from 'clsx';\nimport { Children, useEffect, useId, useRef, useState } from 'react';\n\nimport type { KeyboardEvent, MouseEvent as ReactMouseEvent, ReactElement, RefObject } from 'react';\nimport type { IconProps } from 'components/Icon';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './ActionList.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { MenuButton } from 'components/Buttons';\n\nexport interface ActionListProps {\n  /** The label that is displayed before the icon. */\n  label: string;\n  /** The icon that is shown in front of the label. */\n  prefixIcon?: IconProps['name'];\n  /** The icon that is shown to toggle the menu. If none is specified, CheveronUp and CheveronDown is used depending on whether the menu is opened or closed. */\n  iconName?: IconProps['name'];\n  /** Determines the button variant. */\n  variant?: UIButtonVariant;\n  /** The child component(s). */\n  children: ReactElement | ReactElement[];\n}\n\nconst inactiveIndex = -1;\nconst indexIncrement = 1;\n\n/** A component to show an action list to toggle a menu. */\nexport function ActionList({ label, prefixIcon, iconName, variant = 'secondary', children }: ActionListProps) {\n  const listId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const numberOfChildren = Children.count(children);\n\n  const [activeIndex, setActiveIndex] = useState(inactiveIndex);\n  const [isOpen, setIsOpen] = useState(false);\n\n  function open() {\n    setIsOpen(true);\n\n    document.addEventListener('click', onClickOutside, { once: true, capture: true });\n  }\n\n  function close(event?: ReactMouseEvent<HTMLDivElement>) {\n    // When a click occurs on an element that is not an immediate descendant of the action list container\n    // (can happen when a modal window is triggered from a button in the action list), the setIsOpen state\n    // handler should not be called, because this causes a re-render of the entire component and can lead\n    // to undesired effects, like a select element closing immediately after it has been clicked.\n    if (event && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n      return;\n    }\n\n    setActiveIndex(inactiveIndex);\n    setIsOpen(false);\n\n    document.removeEventListener('click', onClickOutside, { capture: true });\n  }\n\n  function toggle() {\n    if (isOpen) close();\n    else open();\n  }\n\n  function onKeyDown(event: KeyboardEvent) {\n    if (!isOpen) return;\n\n    const eventPreventCodes = ['ArrowUp', 'ArrowDown', 'Home', 'End'];\n\n    if (eventPreventCodes.includes(event.code)) {\n      // prevent page from scrolling when navigating through items in list\n      event.preventDefault();\n    }\n\n    if (event.code === 'Tab') {\n      close();\n    }\n  }\n\n  function onKeyUp(event: KeyboardEvent) {\n    if (event.code === 'Space' || event.key === 'Enter') {\n      if (event.target === triggerRef.current) {\n        toggle();\n      } else if (event.key === 'Enter' && event.target !== listRef.current) {\n        if ('firstChild' in event.target) {\n          const firstChild = event.target.firstChild as HTMLButtonElement;\n\n          firstChild.click();\n        }\n      }\n    }\n\n    if (event.code === 'Escape') close();\n\n    if (event.code === 'ArrowUp') {\n      setActiveIndex((prevState) => {\n        if (prevState === 0) return numberOfChildren - indexIncrement;\n\n        return prevState - indexIncrement;\n      });\n    }\n\n    if (event.code === 'ArrowDown') {\n      setActiveIndex((prevState) => {\n        if (prevState === numberOfChildren - indexIncrement) return 0;\n\n        return prevState + indexIncrement;\n      });\n    }\n\n    if (event.code === 'Home') {\n      setActiveIndex(0);\n    }\n\n    if (event.code === 'End') {\n      setActiveIndex(numberOfChildren - indexIncrement);\n    }\n  }\n\n  const onClickOutside = (event: MouseEvent) => {\n    const { target } = event;\n\n    if (!target || !containerRef.current) return;\n\n    if (!containerRef.current.contains(target as Node)) {\n      close();\n    }\n  };\n\n  useEffect(() => {\n    if (activeIndex < 0 || !listRef.current) return;\n\n    const listItem = listRef.current.children.item(activeIndex);\n\n    if (listItem) {\n      (listItem as HTMLDivElement).focus();\n    }\n  }, [activeIndex]);\n\n  useEffect(() => {\n    if (!listRef.current || !listRef.current.hasChildNodes()) return;\n\n    Array.from(listRef.current.children)\n      .filter((overlayChild) => overlayChild.nodeType === Node.ELEMENT_NODE && overlayChild.hasChildNodes())\n      .forEach((overlayChild) => {\n        Array.from(overlayChild.children)\n          .filter((childOfChild) => childOfChild.nodeType === Node.ELEMENT_NODE)\n          .forEach((childOfChild) => {\n            // internal children may be buttons and can get focus when tab is pressed; preventing those elements\n            // from getting focus so that list can be tabbed over and traversed with arrow keys\n            childOfChild.setAttribute('tabIndex', '-1');\n          });\n      });\n  }, [children]);\n\n  return (\n    <div className={styles['action-list-container']} ref={containerRef}>\n      <MenuButton\n        onClick={toggle}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        buttonRef={triggerRef as RefObject<HTMLButtonElement>}\n        variant={variant}\n      >\n        {prefixIcon && <Icon size={24} name={prefixIcon} />}\n        {label}\n        {iconName ? (\n          <Icon size={24} name={iconName} />\n        ) : (\n          <Icon size={16} name={isOpen ? 'CheveronUp' : 'CheveronDown'} />\n        )}\n      </MenuButton>\n      <div\n        aria-activedescendant={`${listId}-child-${activeIndex}`}\n        aria-label={label}\n        className={clsx(styles['action-list'], {\n          [styles['action-list--open']]: isOpen,\n        })}\n        onClickCapture={close}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        ref={listRef}\n        role=\"menu\"\n        tabIndex={-1}\n      >\n        {Children.map(children, (child, index) => (\n          <div key={`${listId}-child-${index}`} role=\"menuitem\" tabIndex={-1}>\n            {child}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/AddCatalogueLinkForm-Cy6fPNvN.js

@@ -0,0 +1,117 @@
+import { Button as e } from "./components/Buttons/Button.js";
+import { t } from "./Label-o0BcWTUS.js";
+import { t as n } from "./Repeater-BhkTEUai.js";
+import { t as r } from "./FormField-BZSoQdp9.js";
+import { t as i } from "./InputField-BWAy19w9.js";
+import { useLanguage as a } from "./components/RteEditor/Providers/LanguageProvider.js";
+import { useTranslation as o } from "./components/RteEditor/hooks/useTranslation.js";
+import { useEffect as s, useId as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import './assets/AddCatalogueLinkForm.css';//#region src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.module.css
+var f = "_courselinkform_16a4f_1", p = "_courselinkform__footer_16a4f_13", m = "_courselinkform__results_16a4f_20", h = {
+	courselinkform: f,
+	"courselinkform__input-field": "_courselinkform__input-field_16a4f_7",
+	courselinkform__footer: p,
+	"courselinkform__results-wrapper": "_courselinkform__results-wrapper_16a4f_20",
+	"courselinkform__results-header": "_courselinkform__results-header_16a4f_24",
+	courselinkform__results: m,
+	"courselinkform__result-message": "_courselinkform__result-message_16a4f_41",
+	"courselinkform__result-item": "_courselinkform__result-item_16a4f_51"
+}, g = ({ linkType: f, onCloseHandler: p, onSearchHandler: m, searchResponse: g, onSelect: _ }) => {
+	let v = o(), y = `search_${c()}`, b = l(null), x = l(null), { currentLanguage: S } = a(), C = (e) => {
+		let t = e.target.value;
+		m && m(t, f);
+	}, w = () => {
+		p();
+	}, T = (e) => {
+		e.key === "ArrowDown" && (e.preventDefault(), (x.current?.querySelector("button"))?.focus());
+	}, E = (e, t, n, r) => {
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault(), e.stopPropagation(), w();
+				break;
+			case "Enter":
+				e.preventDefault(), _ && _(t, n, r);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), e.stopPropagation(), e.currentTarget.nextElementSibling?.focus();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), e.stopPropagation(), e.currentTarget.previousElementSibling?.focus();
+				break;
+			case "Tab":
+				e.preventDefault(), w();
+				break;
+			default:
+				e.preventDefault();
+				break;
+		}
+	};
+	return s(() => {
+		b.current && (m("", f), b.current.value = "", b.current.focus());
+	}, []), /* @__PURE__ */ d("div", {
+		className: h.courselinkform,
+		children: [/* @__PURE__ */ d(n, {
+			gap: "050",
+			children: [
+				/* @__PURE__ */ d(r, {
+					className: h["courselinkform__input-field"],
+					children: [/* @__PURE__ */ u(t, {
+						htmlFor: y,
+						children: v.cataloguelinks[f === "course" ? "searchCourseFieldLabel" : "searchProgrammeFieldLabel"]
+					}), /* @__PURE__ */ u("div", {
+						className: h["linkform__input-url-wrapper"],
+						children: /* @__PURE__ */ u(i, {
+							id: y,
+							placeholder: v.cataloguelinks.searchFieldPlaceholder,
+							onChange: C,
+							onKeyDown: T,
+							ref: b,
+							"aria-label": v.aria.labels.searchField
+						})
+					})]
+				}),
+				g && g.state === "pending" && /* @__PURE__ */ u("div", {
+					className: h["courselinkform__result-message"],
+					children: v.cataloguelinks.loading
+				}),
+				g && g.results.length === 0 && g.state === "ready" && /* @__PURE__ */ u("div", {
+					className: h["courselinkform__result-message"],
+					children: v.cataloguelinks.noResults
+				}),
+				g && g.results.length > 0 && /* @__PURE__ */ d("div", {
+					className: h["courselinkform__results-wrapper"],
+					children: [/* @__PURE__ */ d("div", {
+						className: h["courselinkform__results-header"],
+						children: [/* @__PURE__ */ u("span", { children: v.cataloguelinks[f === "course" ? "resultCourseListCatalogNumber" : "resultProgrammeListCatalogNumber"] }), /* @__PURE__ */ u("span", { children: v.cataloguelinks.resultListName })]
+					}), /* @__PURE__ */ u("div", {
+						className: h.courselinkform__results,
+						ref: x,
+						children: g.results.map(({ id: e, code: t, name: n }) => /* @__PURE__ */ d("button", {
+							type: "button",
+							className: h["courselinkform__result-item"],
+							onClick: () => _ && _(t, n[S], f),
+							onKeyDown: (e) => E(e, t, n[S], f),
+							tabIndex: 0,
+							"aria-label": `${t} ${n[S]}`,
+							children: [/* @__PURE__ */ u("span", { children: t }), /* @__PURE__ */ u("span", { children: n[S] })]
+						}, e))
+					})]
+				})
+			]
+		}), /* @__PURE__ */ u("div", {
+			className: h.courselinkform__footer,
+			children: /* @__PURE__ */ u(e, {
+				variant: "secondary",
+				onClick: w,
+				"aria-label": v.common.cancel,
+				type: "button",
+				children: v.common.cancel
+			})
+		})]
+	});
+};
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=AddCatalogueLinkForm-Cy6fPNvN.js.map

package/dist/AddCatalogueLinkForm-Cy6fPNvN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddCatalogueLinkForm-Cy6fPNvN.js","names":[],"sources":["../src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.module.css","../src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.tsx"],"sourcesContent":[".courselinkform {\n  font-family: inherit;\n  font-size: inherit;\n  width: 30rem;\n}\n\n.courselinkform__input-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.courselinkform__footer {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n  margin-top: 1rem;\n}\n\n.courselinkform__results-wrapper {\n  position: relative;\n}\n\n.courselinkform__results-header {\n  align-items: center;\n  display: flex;\n  font-size: var(--font-size-text-base);\n  gap: 0.5rem;\n  padding: 0.5rem;\n  text-align: left;\n  width: 100%;\n}\n\n.courselinkform__results {\n  border: 1px solid var(--color-grey-300);\n  border-radius: 0.25rem;\n  max-height: 10rem;\n  overflow-y: auto;\n}\n\n.courselinkform__result-message {\n  align-items: center;\n  color: var(--color-grey-600);\n  display: flex;\n  font-size: var(--font-size-text-non-essential);\n  height: 2rem;\n  justify-content: flex-start;\n  padding: 0 0.5rem;\n}\n\n.courselinkform__result-item {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-text-base);\n  gap: 0.5rem;\n  min-height: 2.5rem;\n  padding: 0.5rem;\n  text-align: left;\n  width: 100%;\n}\n\n.courselinkform__results-header span,\n.courselinkform__result-item span {\n  line-height: 1.4;\n  width: calc(100% - 9rem);\n}\n\n.courselinkform__results-header span:first-child,\n.courselinkform__result-item span:first-child {\n  width: 9rem;\n}\n\n.courselinkform__result-item:focus-visible {\n  background-color: var(--color-grey-300);\n  outline: none;\n}\n\n.courselinkform__result-item:hover,\n.courselinkform__result-item:focus-visible {\n  background-color: var(--color-grey-300);\n}\n\n.courselinkform__result-item:not(:last-child) {\n  border-bottom: 1px solid var(--color-grey-300);\n}\n","import { useEffect, useId, useRef } from 'react';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\n\r\nimport styles from './AddCatalogueLinkForm.module.css';\r\n\r\nimport { Button } from 'components/Buttons';\r\nimport { FormField } from 'components/FormField';\r\nimport { Label } from 'components/Label';\r\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\r\nimport { InputField } from 'components/InputField';\r\nimport { useLanguage } from 'components/RteEditor/Providers/LanguageProvider';\r\nimport { Repeater } from 'components/Repeater';\r\n\r\ntype SearchResult = {\r\n  code: string;\r\n  id: string;\r\n  name: {\r\n    EN: string;\r\n    NL: string;\r\n  };\r\n  programmeType: string;\r\n};\r\n\r\nexport type SearchResponse = {\r\n  state: 'idle' | 'pending' | 'ready';\r\n  results: SearchResult[];\r\n};\r\n\r\ninterface AddCatalogueLinkFormProps {\r\n  linkType: 'course' | 'programme';\r\n  onCloseHandler: () => void;\r\n  onSearchHandler: (query: string, type: 'course' | 'programme') => void;\r\n  searchResponse?: SearchResponse;\r\n  onSelect?: (code: string, label: string, type: 'course' | 'programme') => void;\r\n}\r\n\r\nexport const AddCatalogueLinkForm = ({\r\n  linkType,\r\n  onCloseHandler,\r\n  onSearchHandler,\r\n  searchResponse,\r\n  onSelect,\r\n}: AddCatalogueLinkFormProps) => {\r\n  const t = useTranslation();\r\n  const searchId = `search_${useId()}`;\r\n  const searchFieldRef = useRef<HTMLInputElement>(null);\r\n  const resultListRef = useRef<HTMLDivElement>(null);\r\n  const { currentLanguage } = useLanguage();\r\n\r\n  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const query = event.target.value;\r\n    if (onSearchHandler) {\r\n      onSearchHandler(query, linkType);\r\n    }\r\n  };\r\n\r\n  const handleClose = () => {\r\n    onCloseHandler();\r\n  };\r\n\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n    if (event.key === 'ArrowDown') {\r\n      event.preventDefault();\r\n      const container = resultListRef.current;\r\n      const firstFocusable = container?.querySelector<HTMLElement>('button');\r\n      firstFocusable?.focus();\r\n    }\r\n  };\r\n\r\n  const onResultKeyDown = (\r\n    event: KeyboardEvent<HTMLButtonElement>,\r\n    code: string,\r\n    name: string,\r\n    linkType: 'course' | 'programme'\r\n  ) => {\r\n    switch (event.key) {\r\n      case 'Escape':\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        handleClose();\r\n        break;\r\n      case 'Enter':\r\n        event.preventDefault();\r\n        onSelect && onSelect(code, name, linkType);\r\n        break;\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        const nextElement = event.currentTarget.nextElementSibling;\r\n        (nextElement as HTMLButtonElement)?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        const previousElement = event.currentTarget.previousElementSibling;\r\n        (previousElement as HTMLButtonElement)?.focus();\r\n        break;\r\n      }\r\n      case 'Tab':\r\n        event.preventDefault();\r\n        handleClose();\r\n        break;\r\n      default:\r\n        event.preventDefault();\r\n        break;\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (searchFieldRef.current) {\r\n      onSearchHandler('', linkType);\r\n      searchFieldRef.current.value = '';\r\n      searchFieldRef.current.focus();\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  return (\r\n    <div className={styles['courselinkform']}>\r\n      <Repeater gap=\"050\">\r\n        <FormField className={styles['courselinkform__input-field']}>\r\n          <Label htmlFor={searchId}>\r\n            {t.cataloguelinks[linkType === 'course' ? 'searchCourseFieldLabel' : 'searchProgrammeFieldLabel']}\r\n          </Label>\r\n          <div className={styles['linkform__input-url-wrapper']}>\r\n            <InputField\r\n              id={searchId}\r\n              placeholder={t.cataloguelinks.searchFieldPlaceholder}\r\n              onChange={handleSearch}\r\n              onKeyDown={handleKeyDown}\r\n              ref={searchFieldRef}\r\n              aria-label={t.aria.labels.searchField}\r\n            />\r\n          </div>\r\n        </FormField>\r\n        {searchResponse && searchResponse.state === 'pending' && (\r\n          <div className={styles['courselinkform__result-message']}>{t.cataloguelinks.loading}</div>\r\n        )}\r\n        {searchResponse && searchResponse.results.length === 0 && searchResponse.state === 'ready' && (\r\n          <div className={styles['courselinkform__result-message']}>{t.cataloguelinks.noResults}</div>\r\n        )}\r\n        {searchResponse && searchResponse.results.length > 0 && (\r\n          <div className={styles['courselinkform__results-wrapper']}>\r\n            <div className={styles['courselinkform__results-header']}>\r\n              <span>\r\n                {\r\n                  t.cataloguelinks[\r\n                    linkType === 'course' ? 'resultCourseListCatalogNumber' : 'resultProgrammeListCatalogNumber'\r\n                  ]\r\n                }\r\n              </span>\r\n              <span>{t.cataloguelinks.resultListName}</span>\r\n            </div>\r\n            <div className={styles['courselinkform__results']} ref={resultListRef}>\r\n              {searchResponse.results.map(({ id, code, name }) => (\r\n                <button\r\n                  key={id}\r\n                  type=\"button\"\r\n                  className={styles['courselinkform__result-item']}\r\n                  onClick={() => onSelect && onSelect(code, name[currentLanguage], linkType)}\r\n                  onKeyDown={(event) => onResultKeyDown(event, code, name[currentLanguage], linkType)}\r\n                  tabIndex={0}\r\n                  aria-label={`${code} ${name[currentLanguage]}`}\r\n                >\r\n                  <span>{code}</span>\r\n                  <span>{name[currentLanguage]}</span>\r\n                </button>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        )}\r\n      </Repeater>\r\n      <div className={styles['courselinkform__footer']}>\r\n        <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\r\n          {t.common.cancel}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"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"}

package/dist/AppStatusBar-Bca0KFDR.js

@@ -0,0 +1,20 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/AppStatusBar.css';//#region src/components/AppStatusBar/AppStatusBar.module.css
+var n = {
+	"app-status-bar": "_app-status-bar_12hif_1",
+	"app-status-bar__message": "_app-status-bar__message_12hif_9",
+	"app-status-bar--info": "_app-status-bar--info_12hif_13",
+	"app-status-bar--warning": "_app-status-bar--warning_12hif_17",
+	"app-status-bar--error": "_app-status-bar--error_12hif_21"
+}, r = ({ message: r, severity: i }) => /* @__PURE__ */ t("div", {
+	className: e(n["app-status-bar"], n[`app-status-bar--${i.toLowerCase()}`]),
+	children: /* @__PURE__ */ t("p", {
+		className: n["app-status-bar__message"],
+		dangerouslySetInnerHTML: { __html: r }
+	})
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=AppStatusBar-Bca0KFDR.js.map

package/dist/AppStatusBar-Bca0KFDR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatusBar-Bca0KFDR.js","names":[],"sources":["../src/components/AppStatusBar/AppStatusBar.module.css","../src/components/AppStatusBar/AppStatusBar.tsx"],"sourcesContent":[".app-status-bar {\n  overflow: hidden;\n  padding: 0 2rem;\n  position: relative;\n  text-align: center;\n  z-index: 20;\n}\n\n.app-status-bar__message {\n  margin: 0.75rem 0;\n}\n\n.app-status-bar--info {\n  background-color: var(--color-grey-300);\n}\n\n.app-status-bar--warning {\n  background-color: var(--color-orange-500);\n}\n\n.app-status-bar--error {\n  background-color: var(--color-red-600);\n  color: var(--color-uva-white);\n}\n","import classNames from 'clsx';\n\nimport styles from './AppStatusBar.module.css';\n\nexport interface AppStatusBarProps {\n  /** The message to be displayed in the status bar. */\n  message: string;\n  /** Determines the color of the bar. */\n  severity: 'info' | 'warning' | 'error';\n}\n\n/** A component to display a general status. */\nexport const AppStatusBar = ({ message, severity }: AppStatusBarProps) => (\n  <div className={classNames(styles['app-status-bar'], styles[`app-status-bar--${severity.toLowerCase()}`])}>\n    <p className={styles['app-status-bar__message']} dangerouslySetInnerHTML={{ __html: message }} />\n  </div>\n);\n"],"mappings":";;;;;;;;;GCYa,KAAgB,EAAE,YAAS,kBACtC,kBAAC,OAAD;CAAK,WAAW,EAAW,EAAO,mBAAmB,EAAO,mBAAmB,EAAS,aAAa,IAAI;WACvG,kBAAC,KAAD;EAAG,WAAW,EAAO;EAA4B,yBAAyB,EAAE,QAAQ,GAAS;EAAI,CAAA;CAC7F,CAAA"}

package/dist/Attention-Bq5UU9I8.js

@@ -0,0 +1,13 @@
+import { Icon as e } from "./components/Icon/Icon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import './assets/Attention.css';var r = { attention: "_attention_kdl29_1" }, i = ({ children: i }) => /* @__PURE__ */ n("div", {
+	className: r.attention,
+	children: [/* @__PURE__ */ t(e, {
+		name: "ExclamationCircleFillMini",
+		size: 24
+	}), i]
+});
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=Attention-Bq5UU9I8.js.map

package/dist/Attention-Bq5UU9I8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attention-Bq5UU9I8.js","names":[],"sources":["../src/components/Attention/Attention.module.css","../src/components/Attention/Attention.tsx"],"sourcesContent":[".attention {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.attention > svg {\n  flex-shrink: 0;\n  height: 1.5rem;\n  width: 1.5rem;\n}\n","import type { PropsWithChildren } from 'react';\n\nimport styles from './Attention.module.css';\n\nimport { Icon } from 'components/Icon';\n\n/** Shows the ExclamationCircleFillMini icon with children */\nexport const Attention = ({ children }: PropsWithChildren) => (\n  <div className={styles['attention']}>\n    <Icon name=\"ExclamationCircleFillMini\" size={24} />\n    {children}\n  </div>\n);\n"],"mappings":";;6CCOa,KAAa,EAAE,kBAC1B,kBAAC,OAAD;CAAK,WAAW,EAAO;WAAvB,CACE,kBAAC,GAAD;EAAM,MAAK;EAA4B,MAAM;EAAM,CAAA,EAClD,EACG"}

package/dist/Backdrop-D8AHeuBn.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import './assets/Backdrop2.css';var t = { backdrop: "_backdrop_e539q_1" }, n = ({ children: n, ...r }) => /* @__PURE__ */ e("div", {
+	...r,
+	className: t.backdrop,
+	children: n
+});
+//#endregion
+export { n as t };
+
+//# sourceMappingURL=Backdrop-D8AHeuBn.js.map

package/dist/Backdrop-D8AHeuBn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop-D8AHeuBn.js","names":[],"sources":["../src/components/Backdrop/Backdrop.module.css","../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":[".backdrop {\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 100;\n}\n\n.backdrop::after {\n  background-color: var(--color-uva-black);\n  content: \"\";\n  inset: 0;\n  opacity: 0.5;\n  pointer-events: none; /* Allow clicks to pass through ::after element */\n}\n\n/*\n    Only flex the content when the backdrop is actually showing. The min-height\n    and min-width here, correspond to the values in overlay.module.css\n  */\n@media (min-width: 28rem) and (min-height: 28rem) {\n  .backdrop {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n  }\n\n  .backdrop::after {\n    position: absolute;\n  }\n\n  .backdrop > * {\n    position: relative;\n    z-index: 1;\n  }\n}\n","import type { HTMLAttributes } from 'react';\n\nimport styles from './Backdrop.module.css';\n\nexport type BackdropProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;\n\n/** Represents a component to dim the screen, used in combination with a modal dialog. Accepts normal HTML attributes, except className and style. */\nexport const Backdrop = ({ children, ...restProps }: BackdropProps) => (\n  <div {...restProps} className={styles['backdrop']}>\n    {children}\n  </div>\n);\n"],"mappings":";2CCOa,KAAY,EAAE,aAAU,GAAG,QACtC,kBAAC,OAAD;CAAK,GAAI;CAAW,WAAW,EAAO;CACnC;CACG,CAAA"}

package/dist/Button.module-DJlNwQUj.js

@@ -0,0 +1,16 @@
+import './assets/Button.css';var e = {
+	button: "_button_w17f1_1",
+	"button--blank": "_button--blank_w17f1_35",
+	"button--blank-subtle": "_button--blank-subtle_w17f1_36",
+	"button--blank-icon": "_button--blank-icon_w17f1_37",
+	"button--primary": "_button--primary_w17f1_82",
+	"button--secondary": "_button--secondary_w17f1_98",
+	"button--destructive-primary": "_button--destructive-primary_w17f1_114",
+	"button--destructive-secondary": "_button--destructive-secondary_w17f1_132",
+	"button--destructive-secondary-transparent": "_button--destructive-secondary-transparent_w17f1_150",
+	"button--wide-column": "_button--wide-column_w17f1_168"
+};
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=Button.module-DJlNwQUj.js.map

package/dist/Button.module-DJlNwQUj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module-DJlNwQUj.js","names":[],"sources":["../src/components/Buttons/Button.module.css"],"sourcesContent":[".button {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-default);\n  gap: 0.5rem;\n  height: 2.75rem;\n  justify-content: center;\n  line-height: inherit;\n  margin: 0;\n  padding: 0.75rem 1rem;\n  transition: var(--transition-colors);\n  white-space: nowrap;\n}\n\n.button[href] {\n  text-decoration: none;\n}\n\n.button:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.button:hover {\n  background-color: var(--color-grey-300);\n  outline: 0;\n}\n\n.button--blank,\n.button--blank-subtle,\n.button--blank-icon {\n  border: 0;\n  border-radius: 0;\n  gap: 0;\n  height: auto;\n  padding: 0;\n  text-decoration: underline;\n  vertical-align: middle;\n}\n\n.button--blank,\n.button--blank-icon {\n  color: var(--color-uva-black);\n}\n\n.button--blank-subtle {\n  color: var(--color-grey-700);\n}\n\n.button--blank-icon {\n  border: 1px solid transparent;\n  border-radius: 0.5rem;\n  height: 2.5rem;\n  width: 2.5rem;\n}\n\n.button--blank:focus,\n.button--blank:not([disabled]):hover {\n  background: none;\n  text-decoration: underline;\n}\n\n.button--blank-subtle:focus,\n.button--blank-subtle:not([disabled]):hover {\n  background: none;\n  color: var(--color-uva-black);\n  text-decoration: underline;\n}\n\n.button--blank-icon:focus,\n.button--blank-icon:not([disabled]):hover {\n  background-color: var(--color-grey-300);\n  border-color: var(--color-grey-600);\n}\n\n.button--primary {\n  background-color: var(--color-uva-black);\n  border-color: var(--color-uva-black);\n  color: var(--color-uva-white);\n}\n\n.button--primary:hover {\n  background-color: var(--color-grey-700);\n  border-color: var(--color-grey-700);\n}\n\n.button--primary[disabled] {\n  background-color: var(--color-uva-black);\n  color: var(--color-uva-white);\n}\n\n.button--secondary {\n  background-color: transparent;\n  border-color: var(--color-uva-black);\n  color: var(--color-uva-black);\n}\n\n.button--secondary:hover {\n  background-color: var(--color-uva-black);\n  color: var(--color-uva-white);\n}\n\n.button--secondary[disabled] {\n  background-color: transparent;\n  color: var(--color-uva-black);\n}\n\n.button--destructive-primary {\n  background-color: var(--color-red-600);\n  border-color: var(--color-red-600);\n  color: var(--color-uva-white);\n}\n\n.button--destructive-primary:hover {\n  background-color: var(--color-red-800);\n  border-color: var(--color-red-800);\n  color: var(--color-uva-white);\n}\n\n.button--destructive-primary[disabled] {\n  background-color: var(--color-red-600);\n  border-color: var(--color-red-600);\n  color: var(--color-uva-white);\n}\n\n.button--destructive-secondary {\n  background-color: var(--color-uva-white);\n  border-color: var(--color-red-600);\n  color: var(--color-red-600);\n}\n\n.button--destructive-secondary:hover {\n  background-color: var(--color-red-600);\n  border-color: var(--color-red-600);\n  color: var(--color-uva-white);\n}\n\n.button--destructive-secondary[disabled] {\n  background-color: var(--color-uva-white);\n  border-color: var(--color-red-600);\n  color: var(--color-red-600);\n}\n\n.button--destructive-secondary-transparent {\n  background-color: transparent;\n  border-color: var(--color-red-600);\n  color: var(--color-red-600);\n}\n\n.button--destructive-secondary-transparent:hover {\n  background-color: var(--color-red-600);\n  border-color: var(--color-red-600);\n  color: var(--color-uva-white);\n}\n\n.button--destructive-secondary-transparent[disabled] {\n  background-color: transparent;\n  border-color: var(--color-grey-700);\n  color: var(--color-grey-700);\n}\n\n.button--wide-column {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--font-size-text-non-essential);\n  gap: 0.25rem;\n  height: unset;\n  padding: 0.5rem 0.25rem;\n  width: 100%;\n}\n\n/*\n  A disabled button trumps all and does not distinguish between\n  primary/secondary/destructive appearances in any form\n*/\n\n.button[disabled] {\n  cursor: unset;\n  opacity: 0.4;\n  text-decoration: none;\n  transition-delay: 250ms;\n  /* avoid always flickering to gray */\n}\n"],"mappings":""}

package/dist/ButtonGroup-DR80lTLz.js

@@ -0,0 +1,21 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Children as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import './assets/ButtonGroup.css';//#region src/components/ButtonGroup/ButtonGroup.module.css
+var r = {
+	"button-group": "_button-group_1ti4e_1",
+	"button-group--stacked": "_button-group--stacked_1ti4e_8",
+	"button-group--reversed": "_button-group--reversed_1ti4e_12",
+	"button-group--reversed-stacked": "_button-group--reversed-stacked_1ti4e_17"
+}, i = ({ children: i, stacked: a, reversed: o }) => t.count(i) > 0 ? /* @__PURE__ */ n("div", {
+	className: e(r["button-group"], {
+		[r["button-group--stacked"]]: a,
+		[r["button-group--reversed"]]: o,
+		[r["button-group--reversed-stacked"]]: a && o
+	}),
+	children: i
+}) : null;
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=ButtonGroup-DR80lTLz.js.map

package/dist/ButtonGroup-DR80lTLz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup-DR80lTLz.js","names":[],"sources":["../src/components/ButtonGroup/ButtonGroup.module.css","../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":[".button-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  justify-content: flex-end;\n}\n\n.button-group--stacked {\n  flex-direction: column;\n}\n\n.button-group--reversed {\n  flex-flow: row-reverse wrap-reverse;\n  justify-content: flex-start;\n}\n\n.button-group--reversed-stacked {\n  flex-direction: column-reverse;\n}\n","import classNames from 'clsx';\nimport { Children } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './ButtonGroup.module.css';\n\nexport interface ButtonGroupProps {\n  /** true to render the buttons from top to bottom; otherwise, false. The default is false. */\n  stacked?: boolean;\n  /** true to render the buttons in reverse order; otherwise, false. The default is false. */\n  reversed?: boolean;\n}\n\n/** Represents a component that contains a group of buttons. */\nexport const ButtonGroup = ({ children, stacked, reversed }: PropsWithChildren<ButtonGroupProps>) =>\n  // only render a <ButtonGroup> when there are children\n  Children.count(children) > 0 ? (\n    <div\n      className={classNames(styles['button-group'], {\n        [styles['button-group--stacked']]: stacked,\n        [styles['button-group--reversed']]: reversed,\n        [styles['button-group--reversed-stacked']]: stacked && reversed,\n      })}\n    >\n      {children}\n    </div>\n  ) : null;\n"],"mappings":";;;;;;;;;GCea,KAAe,EAAE,aAAU,YAAS,kBAE/C,EAAS,MAAM,EAAS,GAAG,IACzB,kBAAC,OAAD;CACE,WAAW,EAAW,EAAO,iBAAiB;GAC3C,EAAO,2BAA2B;GAClC,EAAO,4BAA4B;GACnC,EAAO,oCAAoC,KAAW;EACxD,CAAC;CAED;CACG,CAAA,GACJ"}

package/dist/Card-DMFyuTmy.js

@@ -0,0 +1,32 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { t } from "./SectionNotification-CQqwPTqP.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import './assets/Card.css';var i = {
+	card: "_card_1m1jk_1",
+	"card--regular": "_card--regular_1m1jk_7",
+	"card--large": "_card--large_1m1jk_8",
+	"card--small": "_card--small_1m1jk_13",
+	"card-header": "_card-header_1m1jk_26",
+	"card--high-contrast": "_card--high-contrast_1m1jk_33",
+	"card--align-center": "_card--align-center_1m1jk_37"
+}, a = ({ children: a, header: o, highContrast: s, notification: c, padding: l = "regular", alignCenter: u = !1 }) => /* @__PURE__ */ r("div", {
+	className: e(i.card, {
+		[i["card--high-contrast"]]: s,
+		[i["card--regular"]]: l === "regular",
+		[i["card--small"]]: l === "small",
+		[i["card--large"]]: l === "large",
+		[i["card--align-center"]]: u
+	}),
+	children: [
+		c && /* @__PURE__ */ n(t, { children: c }),
+		o && /* @__PURE__ */ n("div", {
+			className: i["card-header"],
+			children: o
+		}),
+		a
+	]
+});
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=Card-DMFyuTmy.js.map

package/dist/Card-DMFyuTmy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DMFyuTmy.js","names":[],"sources":["../src/components/Card/Card.module.css","../src/components/Card/Card.tsx"],"sourcesContent":[".card {\n  background-color: var(--color-grey-200);\n  display: flex;\n  flex-direction: column;\n}\n\n.card--regular,\n.card--large {\n  gap: 1.5rem;\n  padding: 1.5rem;\n}\n\n.card--small {\n  gap: 1rem;\n  padding: 1rem;\n}\n\n/* adjusted styling on screens larger than 448px/28rem */\n@media (min-width: 28rem) and (min-height: 28rem) {\n  .card--large {\n    gap: 3rem;\n    padding: 3rem;\n  }\n}\n\n.card-header {\n  align-items: center;\n  display: flex;\n  gap: 1.5rem;\n  justify-content: space-between;\n}\n\n.card--high-contrast {\n  background-color: var(--color-uva-white);\n}\n\n.card--align-center {\n  align-items: center;\n}\n","import classNames from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Card.module.css';\n\nimport { SectionNotification } from 'components/SectionNotification';\n\nexport interface CardProps {\n  /** The element to use as a header. */\n  header?: ReactNode;\n  /** true to render the card with high contrast colors; otherwise, false. The default is false. */\n  highContrast?: boolean;\n  /** An optional notification to render. */\n  notification?: ReactNode;\n  /** The padding to use for the card. */\n  padding?: 'small' | 'regular' | 'large';\n  /** true to align the contents in the center; otherwise, false. */\n  alignCenter?: boolean;\n}\n\n/** Represents a component to render a card. */\nexport const Card = ({\n  children,\n  header,\n  highContrast,\n  notification,\n  padding = 'regular',\n  alignCenter = false,\n}: PropsWithChildren<CardProps>) => (\n  <div\n    className={classNames(styles['card'], {\n      [styles['card--high-contrast']]: highContrast,\n      [styles['card--regular']]: padding === 'regular',\n      [styles['card--small']]: padding === 'small',\n      [styles['card--large']]: padding === 'large',\n      [styles['card--align-center']]: alignCenter,\n    })}\n  >\n    {notification && <SectionNotification>{notification}</SectionNotification>}\n    {header && <div className={styles['card-header']}>{header}</div>}\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;;;GCsBa,KAAQ,EACnB,aACA,WACA,iBACA,iBACA,aAAU,WACV,iBAAc,SAEd,kBAAC,OAAD;CACE,WAAW,EAAW,EAAO,MAAS;GACnC,EAAO,yBAAyB;GAChC,EAAO,mBAAmB,MAAY;GACtC,EAAO,iBAAiB,MAAY;GACpC,EAAO,iBAAiB,MAAY;GACpC,EAAO,wBAAwB;EACjC,CAAC;WAPJ;EASG,KAAgB,kBAAC,GAAD,EAAA,UAAsB,GAAmC,CAAA;EACzE,KAAU,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAiB;GAAa,CAAA;EAC/D;EACG"}

package/dist/Checkbox-D6-b_4dC.js

@@ -0,0 +1,12 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/Checkbox.css';var n = { checkbox: "_checkbox_rbntw_1" }, r = e(({ ...e }, r) => /* @__PURE__ */ t("input", {
+	...e,
+	type: "checkbox",
+	className: n.checkbox,
+	ref: r
+}));
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=Checkbox-D6-b_4dC.js.map

package/dist/Checkbox-D6-b_4dC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-D6-b_4dC.js","names":[],"sources":["../src/components/Checkbox/Checkbox.module.css","../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n  accent-color: var(--color-uva-black);\n  height: 1rem;\n  margin: 0;\n  padding: 0;\n  width: 1rem;\n}\n","import { forwardRef, type InputHTMLAttributes } from 'react';\n\nimport styles from './Checkbox.module.css';\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;\n\n/** Represents a checkbox component. */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ ...restProps }: CheckboxProps, Ref) => (\n  <input {...restProps} type=\"checkbox\" className={styles['checkbox']} ref={Ref} />\n));\n"],"mappings":";;2CCOa,IAAW,GAA6C,EAAE,GAAG,KAA4B,MACpG,kBAAC,SAAD;CAAO,GAAI;CAAW,MAAK;CAAW,WAAW,EAAO;CAAa,KAAK;CAAO,CAAA,CACjF"}