@uva-glass/component-library 3.55.0 → 3.55.2

package/dist/EmptyStateDataDisplay-D0QiI8nE.js

@@ -0,0 +1,46 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import './assets/EmptyStateDataDisplay.css';//#region src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.module.css
+var i = {
+	"empty-state-data-display_wrapper": "_empty-state-data-display_wrapper_1ayed_1",
+	"empty-state-data-display_icon-frame": "_empty-state-data-display_icon-frame_1ayed_9",
+	"empty-state-data-display_wrapper--invert-colors": "_empty-state-data-display_wrapper--invert-colors_1ayed_19",
+	"empty-state-data-display_wrapper--slim": "_empty-state-data-display_wrapper--slim_1ayed_23",
+	"empty-state-data-display_icon-frame--invert-colors": "_empty-state-data-display_icon-frame--invert-colors_1ayed_28",
+	"empty-state-data-display_icon-frame--slim": "_empty-state-data-display_icon-frame--slim_1ayed_32",
+	"empty-state-data-display_text-content": "_empty-state-data-display_text-content_1ayed_37",
+	"empty-state-data-display_label": "_empty-state-data-display_label_1ayed_43",
+	"empty-state-data-display_paragraph": "_empty-state-data-display_paragraph_1ayed_47"
+}, a = 24, o = 16;
+function s({ label: s, paragraph: c, invertColors: l, variant: u = "regular" }) {
+	return /* @__PURE__ */ r("div", {
+		className: e(i["empty-state-data-display_wrapper"], {
+			[i["empty-state-data-display_wrapper--invert-colors"]]: l,
+			[i["empty-state-data-display_wrapper--slim"]]: u === "slim"
+		}),
+		children: [/* @__PURE__ */ n("div", {
+			className: e(i["empty-state-data-display_icon-frame"], {
+				[i["empty-state-data-display_icon-frame--invert-colors"]]: l,
+				[i["empty-state-data-display_icon-frame--slim"]]: u === "slim"
+			}),
+			children: /* @__PURE__ */ n(t, {
+				name: "CubeTransparent",
+				size: u === "regular" ? a : o
+			})
+		}), /* @__PURE__ */ r("div", {
+			className: i["empty-state-data-display_text-content"],
+			children: [/* @__PURE__ */ n("label", {
+				className: i["empty-state-data-display_label"],
+				children: s
+			}), c && /* @__PURE__ */ n("p", {
+				className: i["empty-state-data-display_paragraph"],
+				children: c
+			})]
+		})]
+	});
+}
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=EmptyStateDataDisplay-D0QiI8nE.js.map

package/dist/EmptyStateDataDisplay-D0QiI8nE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateDataDisplay-D0QiI8nE.js","names":[],"sources":["../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.module.css","../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":[".empty-state-data-display_wrapper {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  display: flex;\n  gap: 1.5rem;\n  padding: 1.5rem;\n}\n\n.empty-state-data-display_icon-frame {\n  align-items: center;\n  background-color: var(--color-grey-200);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  min-height: 4rem;\n  min-width: 4rem;\n}\n\n.empty-state-data-display_wrapper--invert-colors {\n  background-color: var(--color-grey-200);\n}\n\n.empty-state-data-display_wrapper--slim {\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.empty-state-data-display_icon-frame--invert-colors {\n  background-color: var(--color-uva-white);\n}\n\n.empty-state-data-display_icon-frame--slim {\n  min-height: 2rem;\n  min-width: 2rem;\n}\n\n.empty-state-data-display_text-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.empty-state-data-display_label {\n  font-weight: var(--semibold);\n}\n\n.empty-state-data-display_paragraph {\n  color: var(--color-grey-700);\n  margin: 0;\n}\n","import { clsx } from 'clsx';\n\nimport type { UISizeVariant } from 'types/UserInterface';\n\nimport styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n  /** The main text to display. */\n  label: string;\n  /** The sub-text to display. */\n  paragraph?: string;\n  /** The colors of the wrapper and icon background are inverted. */\n  invertColors?: boolean;\n  /** The display variant. */\n  variant?: UISizeVariant;\n}\n\nconst ICON_SIZE_REGULAR = 24;\nconst ICON_SIZE_SLIM = 16;\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({\n  label,\n  paragraph,\n  invertColors,\n  variant = 'regular',\n}: EmptyStateDataDisplayProps) {\n  return (\n    <div\n      className={clsx(styles['empty-state-data-display_wrapper'], {\n        [styles['empty-state-data-display_wrapper--invert-colors']]: invertColors,\n        [styles['empty-state-data-display_wrapper--slim']]: variant === 'slim',\n      })}\n    >\n      <div\n        className={clsx(styles['empty-state-data-display_icon-frame'], {\n          [styles['empty-state-data-display_icon-frame--invert-colors']]: invertColors,\n          [styles['empty-state-data-display_icon-frame--slim']]: variant === 'slim',\n        })}\n      >\n        <Icon name=\"CubeTransparent\" size={variant === 'regular' ? ICON_SIZE_REGULAR : ICON_SIZE_SLIM} />\n      </div>\n      <div className={styles['empty-state-data-display_text-content']}>\n        <label className={styles['empty-state-data-display_label']}>{label}</label>\n        {paragraph && <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;GCmBM,IAAoB,IACpB,IAAiB;AAGvB,SAAgB,EAAsB,EACpC,UACA,cACA,iBACA,aAAU,aACmB;AAC7B,QACE,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,qCAAqC;IACzD,EAAO,qDAAqD;IAC5D,EAAO,4CAA4C,MAAY;GACjE,CAAC;YAJJ,CAME,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,wCAAwC;KAC5D,EAAO,wDAAwD;KAC/D,EAAO,+CAA+C,MAAY;IACpE,CAAC;aAEF,kBAAC,GAAD;IAAM,MAAK;IAAkB,MAAM,MAAY,YAAY,IAAoB;IAAkB,CAAA;GAC7F,CAAA,EACN,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,SAAD;IAAO,WAAW,EAAO;cAAoC;IAAc,CAAA,EAC1E,KAAa,kBAAC,KAAD;IAAG,WAAW,EAAO;cAAwC;IAAc,CAAA,CACrF;KACF"}

package/dist/ExpandableInfoPanel-CnBVVNlJ.js

@@ -0,0 +1,58 @@
+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/ExpandableInfoPanel.css';//#region src/components/ExpandableInfoPanel/ExpandableInfoPanel.module.css
+var o = {
+	"expandable-info-panel_wrapper": "_expandable-info-panel_wrapper_bsdzd_1",
+	"expandable-info-panel_header": "_expandable-info-panel_header_bsdzd_7",
+	"expandable-info-panel_trigger": "_expandable-info-panel_trigger_bsdzd_16",
+	"expandable-info-panel_trigger--active": "_expandable-info-panel_trigger--active_bsdzd_46",
+	"expandable-info-panel_content-wrapper": "_expandable-info-panel_content-wrapper_bsdzd_68",
+	"expandable-info-panel_content-with-note-container": "_expandable-info-panel_content-with-note-container_bsdzd_77",
+	"expandable-info-panel_note": "_expandable-info-panel_note_bsdzd_83"
+}, s = ({ triggerLabel: s, mainHeader: c, collapseLabel: l = "", expandLabel: u = "", content: d, note: f = "", defaultOpen: p = !1 }) => {
+	let [m, h] = r(p), g = n();
+	return /* @__PURE__ */ a("div", {
+		className: o["expandable-info-panel_wrapper"],
+		children: [/* @__PURE__ */ a("div", {
+			className: o["expandable-info-panel_header"],
+			children: [c, /* @__PURE__ */ a("button", {
+				className: e(o["expandable-info-panel_trigger"], { [o["expandable-info-panel_trigger--active"]]: m }),
+				type: "button",
+				"aria-expanded": m,
+				"aria-controls": g,
+				"aria-label": `${s} - ${m ? l : u}`,
+				onClick: () => h(!m),
+				children: [
+					/* @__PURE__ */ i(t, {
+						name: m ? "SquareInfoSolid" : "SquareInfo",
+						size: 24
+					}),
+					s,
+					/* @__PURE__ */ i(t, {
+						name: m ? "CheveronUp" : "CheveronDown",
+						size: 16
+					})
+				]
+			})]
+		}), m && /* @__PURE__ */ a("div", {
+			id: g,
+			className: o["expandable-info-panel_content-wrapper"],
+			children: [/* @__PURE__ */ i(t, {
+				name: "SquareInfo",
+				size: 24
+			}), f ? /* @__PURE__ */ a("div", {
+				className: o["expandable-info-panel_content-with-note-container"],
+				children: [/* @__PURE__ */ i("div", { children: d }), /* @__PURE__ */ i("div", {
+					className: o["expandable-info-panel_note"],
+					children: f
+				})]
+			}) : /* @__PURE__ */ i("div", { children: d })]
+		})]
+	});
+};
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=ExpandableInfoPanel-CnBVVNlJ.js.map

package/dist/ExpandableInfoPanel-CnBVVNlJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableInfoPanel-CnBVVNlJ.js","names":[],"sources":["../src/components/ExpandableInfoPanel/ExpandableInfoPanel.module.css","../src/components/ExpandableInfoPanel/ExpandableInfoPanel.tsx"],"sourcesContent":[".expandable-info-panel_wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.expandable-info-panel_header {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-bottom: 0.5rem;\n  width: 100%;\n}\n\n.expandable-info-panel_trigger {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  border-radius: 0.25rem;\n  display: flex;\n  font: inherit;\n  font-size: var(--font-size-default);\n  gap: 0.5rem;\n  height: 2.75rem;\n  margin-bottom: 0;\n  outline: none;\n  padding: 0.5rem;\n  position: relative;\n  width: fit-content;\n  cursor: pointer;\n}\n\n.expandable-info-panel_trigger:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n  text-decoration: underline;\n}\n\n.expandable-info-panel_trigger:hover {\n  background-color: var(--color-grey-200);\n  text-decoration: underline;\n}\n\n.expandable-info-panel_trigger--active {\n  background-color: var(--color-navy-200);\n  border-radius: 0.25rem 0.25rem 0 0;\n}\n\n.expandable-info-panel_trigger--active:after {\n  background-color: var(--color-navy-200);\n  content: \"\";\n  display: block;\n  height: 0.5rem;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 100%;\n  z-index: -1;\n}\n\n.expandable-info-panel_trigger--active:hover,\n.expandable-info-panel_trigger--active:hover:after {\n  background-color: var(--color-navy-300);\n}\n\n.expandable-info-panel_content-wrapper {\n  align-items: start;\n  background-color: var(--color-navy-200);\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: 1.5rem 1fr;\n  padding: 1.5rem;\n}\n\n.expandable-info-panel_content-with-note-container {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: space-between;\n}\n\n.expandable-info-panel_note {\n  background-color: var(--color-navy-100);\n  padding: 1rem;\n  /* both min and max width needed as not all react elements repect width */\n  /* if react node contenct is placed next to \"note\" it may squish a pure \"width\" note */\n  min-width: 15.875rem;\n  max-width: 15.875rem;\n}\n","import { useState, type ReactNode } from 'react';\r\nimport { clsx } from 'clsx';\r\nimport { useId } from 'react';\r\n\r\nimport styles from './ExpandableInfoPanel.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ExpandableInfoPanelProps {\r\n  /** Label for the trigger button that toggles the expandable panel. */\r\n  triggerLabel: string;\r\n  /** Main header displayed inline left of the trigger button. */\r\n  mainHeader?: ReactNode | string;\r\n  /** Aria-label for the button when the panel is collapsed. */\r\n  collapseLabel?: string;\r\n  /** Aria-label for the button when the panel is expanded. */\r\n  expandLabel?: string;\r\n  /** Content to be displayed inside the expandable panel. */\r\n  content: ReactNode | string;\r\n  /** Optional content area on in seperate box on right side of expanded content. */\r\n  note?: ReactNode | string;\r\n  /** Optional state, if true; sets the expandable panel as 'open' by default. */\r\n  defaultOpen?: boolean;\r\n}\r\n\r\nexport const ExpandableInfoPanel = ({\r\n  triggerLabel,\r\n  mainHeader,\r\n  collapseLabel = '',\r\n  expandLabel = '',\r\n  content,\r\n  note = '',\r\n  defaultOpen = false,\r\n}: ExpandableInfoPanelProps) => {\r\n  const [active, setActive] = useState(defaultOpen);\r\n  const contentId = useId();\r\n\r\n  return (\r\n    <div className={styles['expandable-info-panel_wrapper']}>\r\n      <div className={styles['expandable-info-panel_header']}>\r\n        {mainHeader}\r\n        <button\r\n          className={clsx(styles['expandable-info-panel_trigger'], {\r\n            [styles['expandable-info-panel_trigger--active']]: active,\r\n          })}\r\n          type=\"button\"\r\n          aria-expanded={active}\r\n          aria-controls={contentId}\r\n          aria-label={`${triggerLabel} - ${active ? collapseLabel : expandLabel}`}\r\n          onClick={() => setActive(!active)}\r\n        >\r\n          <Icon name={active ? 'SquareInfoSolid' : 'SquareInfo'} size={24} />\r\n          {triggerLabel}\r\n          <Icon name={active ? 'CheveronUp' : 'CheveronDown'} size={16} />\r\n        </button>\r\n      </div>\r\n      {active && (\r\n        <div id={contentId} className={styles['expandable-info-panel_content-wrapper']}>\r\n          <Icon name=\"SquareInfo\" size={24} />\r\n          {!note ? (\r\n            <div>{content}</div>\r\n          ) : (\r\n            <div className={styles['expandable-info-panel_content-with-note-container']}>\r\n              <div>{content}</div>\r\n              <div className={styles['expandable-info-panel_note']}>{note}</div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;;GCyBa,KAAuB,EAClC,iBACA,eACA,mBAAgB,IAChB,iBAAc,IACd,YACA,UAAO,IACP,iBAAc,SACgB;CAC9B,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAY,EAC3C,IAAY,GAAO;AAEzB,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,GACD,kBAAC,UAAD;IACE,WAAW,EAAK,EAAO,kCAAkC,GACtD,EAAO,2CAA2C,GACpD,CAAC;IACF,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,cAAY,GAAG,EAAa,KAAK,IAAS,IAAgB;IAC1D,eAAe,EAAU,CAAC,EAAO;cARnC;KAUE,kBAAC,GAAD;MAAM,MAAM,IAAS,oBAAoB;MAAc,MAAM;MAAM,CAAA;KAClE;KACD,kBAAC,GAAD;MAAM,MAAM,IAAS,eAAe;MAAgB,MAAM;MAAM,CAAA;KACzD;MACL;MACL,KACC,kBAAC,OAAD;GAAK,IAAI;GAAW,WAAW,EAAO;aAAtC,CACE,kBAAC,GAAD;IAAM,MAAK;IAAa,MAAM;IAAM,CAAA,EAClC,IAGA,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,OAAD,EAAA,UAAM,GAAc,CAAA,EACpB,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAgC;KAAW,CAAA,CAC9D;QALN,kBAAC,OAAD,EAAA,UAAM,GAAc,CAAA,CAOlB;KAEJ"}

package/dist/FeedbackBar-ByKp32HE.js

@@ -0,0 +1,43 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { t as n } from "./Repeater-BhkTEUai.js";
+import { useEffect as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import './assets/FeedbackBar.css';//#region src/components/FeedbackBar/FeedbackBar.module.css
+var s = {
+	"feedback-bar": "_feedback-bar_1wc39_1",
+	"feedback-bar--visible": "_feedback-bar--visible_1wc39_15",
+	"feedback-bar__icon": "_feedback-bar__icon_1wc39_21",
+	"feedback-bar__close-button": "_feedback-bar__close-button_1wc39_25"
+}, c = ({ children: c }) => {
+	let [l, u] = i(!1);
+	r(() => {
+		u(!0);
+	}, []);
+	let d = () => {
+		u(!1);
+	};
+	return /* @__PURE__ */ o("div", {
+		className: e(s["feedback-bar"], { [s["feedback-bar--visible"]]: l }),
+		role: "alert",
+		children: [/* @__PURE__ */ o(n, {
+			flexDirection: "row",
+			children: [/* @__PURE__ */ a(t, {
+				className: e(s["feedback-bar__icon"]),
+				name: "CheckCircle"
+			}), c]
+		}), /* @__PURE__ */ a("button", {
+			className: e(s["feedback-bar__close-button"]),
+			type: "button",
+			onClick: d,
+			children: /* @__PURE__ */ a(t, {
+				name: "Cross",
+				size: 24
+			})
+		})]
+	});
+};
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=FeedbackBar-ByKp32HE.js.map

package/dist/FeedbackBar-ByKp32HE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackBar-ByKp32HE.js","names":[],"sources":["../src/components/FeedbackBar/FeedbackBar.module.css","../src/components/FeedbackBar/FeedbackBar.tsx"],"sourcesContent":[".feedback-bar {\n  background-color: var(--color-forest-100);\n  border: 1px solid var(--color-forest-800);\n  border-radius: 0.5rem;\n  display: flex;\n  font-weight: var(--semibold);\n  gap: 0.5rem;\n  justify-content: space-between;\n  max-height: 0;\n  opacity: 0;\n  padding: 0 1rem;\n  transition: all 0.5s;\n}\n\n.feedback-bar--visible {\n  max-height: 6.625rem;\n  opacity: 1;\n  padding: 1rem;\n}\n\n.feedback-bar__icon {\n  color: var(--color-forest-800);\n}\n\n.feedback-bar__close-button {\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  color: var(--color-uva-black);\n  display: inline-flex;\n  height: 1.5rem;\n  justify-content: center;\n  transition: var(--transition-colors);\n  width: 1.5rem;\n}\n\n.feedback-bar__close-button:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.feedback-bar__close-button:hover {\n  background-color: var(--color-forest-600);\n  cursor: pointer;\n  outline: 0;\n}\n\n/* make the clickable area of the overlay close button 42x42px simmilar to a regular button */\n\n.feedback-bar__close-button::after {\n  content: \" \";\n  height: 2.625rem;\n  position: absolute;\n  width: 2.625rem;\n}\n","import classNames from 'clsx';\nimport { useEffect, useState, type PropsWithChildren } from 'react';\n\nimport styles from './FeedbackBar.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Repeater } from 'components/Repeater';\n\n/** Represents a component to show feedback within a Page. */\nexport const FeedbackBar = ({ children }: PropsWithChildren) => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    setIsVisible(true);\n  }, []);\n\n  const close = () => {\n    setIsVisible(false);\n  };\n\n  return (\n    <div className={classNames(styles['feedback-bar'], { [styles['feedback-bar--visible']]: isVisible })} role=\"alert\">\n      <Repeater flexDirection=\"row\">\n        <Icon className={classNames(styles['feedback-bar__icon'])} name=\"CheckCircle\" />\n        {children}\n      </Repeater>\n      <button className={classNames(styles['feedback-bar__close-button'])} type=\"button\" onClick={close}>\n        <Icon name=\"Cross\" size={24} />\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;GCSa,KAAe,EAAE,kBAAkC;CAC9D,IAAM,CAAC,GAAW,KAAgB,EAAS,GAAM;AAEjD,SAAgB;AACd,IAAa,GAAK;IACjB,EAAE,CAAC;CAEN,IAAM,UAAc;AAClB,IAAa,GAAM;;AAGrB,QACE,kBAAC,OAAD;EAAK,WAAW,EAAW,EAAO,iBAAiB,GAAG,EAAO,2BAA2B,GAAW,CAAC;EAAE,MAAK;YAA3G,CACE,kBAAC,GAAD;GAAU,eAAc;aAAxB,CACE,kBAAC,GAAD;IAAM,WAAW,EAAW,EAAO,sBAAsB;IAAE,MAAK;IAAgB,CAAA,EAC/E,EACQ;MACX,kBAAC,UAAD;GAAQ,WAAW,EAAW,EAAO,8BAA8B;GAAE,MAAK;GAAS,SAAS;aAC1F,kBAAC,GAAD;IAAM,MAAK;IAAQ,MAAM;IAAM,CAAA;GACxB,CAAA,CACL"}

package/dist/FeedbackBox-Bu7uB9DP.js

@@ -0,0 +1,29 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import './assets/FeedbackBox.css';//#region src/components/FeedbackBox/FeedbackBox.module.css
+var i = {
+	"feedback-box": "_feedback-box_tsf5c_1",
+	"feedback-box__success": "_feedback-box__success_tsf5c_15",
+	"feedback-box__warning": "_feedback-box__warning_tsf5c_19",
+	"feedback-box__error": "_feedback-box__error_tsf5c_23"
+}, a = {
+	success: "CheckCircle",
+	warning: "ExclamationCircle",
+	error: "ExclamationTriangleMini"
+}, o = ({ id: o, level: s, feedback: c }) => /* @__PURE__ */ r("div", {
+	className: e(i["feedback-box"], {
+		[i["feedback-box__success"]]: s === "success",
+		[i["feedback-box__warning"]]: s === "warning",
+		[i["feedback-box__error"]]: s === "error"
+	}),
+	id: o,
+	children: [/* @__PURE__ */ n(t, {
+		name: a[s],
+		size: 16
+	}), c]
+});
+//#endregion
+export { o as t };
+
+//# sourceMappingURL=FeedbackBox-Bu7uB9DP.js.map

package/dist/FeedbackBox-Bu7uB9DP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackBox-Bu7uB9DP.js","names":[],"sources":["../src/components/FeedbackBox/FeedbackBox.module.css","../src/components/FeedbackBox/FeedbackBox.tsx"],"sourcesContent":[".feedback-box {\n  background-color: var(--color-uva-white);\n  display: flex;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem 0.75rem 0.5rem;\n}\n\n.feedback-box > svg {\n  flex-shrink: 0;\n  height: 1rem;\n  margin-top: 0.25rem;\n  width: 1rem;\n}\n\n.feedback-box__success {\n  background-color: var(--color-forest-100);\n}\n\n.feedback-box__warning {\n  background-color: var(--color-orange-100);\n}\n\n.feedback-box__error {\n  background-color: var(--color-red-100);\n}\n","import { clsx } from 'clsx';\n\nimport type { ReactElement } from 'react';\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './FeedbackBox.module.css';\n\nimport { Icon } from 'components/Icon';\n\ntype FeedbackLevel = 'success' | 'warning' | 'error';\n\nconst LEVEL_ICON_MAP: Record<FeedbackLevel, IconProps['name']> = {\n  success: 'CheckCircle',\n  warning: 'ExclamationCircle',\n  error: 'ExclamationTriangleMini',\n};\n\nexport interface FeedbackBoxProps {\n  /** The id of the element. */\n  id?: string;\n  /** The feedback level, indicates what icon is used. */\n  level: FeedbackLevel;\n  /** The feedback value. */\n  feedback: string | ReactElement;\n}\n\n/** Represents a component to show feedback. */\nexport const FeedbackBox = ({ id, level, feedback }: FeedbackBoxProps) => (\n  <div\n    className={clsx(styles['feedback-box'], {\n      [styles['feedback-box__success']]: level === 'success',\n      [styles['feedback-box__warning']]: level === 'warning',\n      [styles['feedback-box__error']]: level === 'error',\n    })}\n    id={id}\n  >\n    <Icon name={LEVEL_ICON_MAP[level]} size={16} />\n    {feedback}\n  </div>\n);\n"],"mappings":";;;;;;;;;GCWM,IAA2D;CAC/D,SAAS;CACT,SAAS;CACT,OAAO;CACR,EAYY,KAAe,EAAE,OAAI,UAAO,kBACvC,kBAAC,OAAD;CACE,WAAW,EAAK,EAAO,iBAAiB;GACrC,EAAO,2BAA2B,MAAU;GAC5C,EAAO,2BAA2B,MAAU;GAC5C,EAAO,yBAAyB,MAAU;EAC5C,CAAC;CACE;WANN,CAQE,kBAAC,GAAD;EAAM,MAAM,EAAe;EAAQ,MAAM;EAAM,CAAA,EAC9C,EACG"}

package/dist/FieldHint-D0HtbTnt.js

@@ -0,0 +1,16 @@
+import { t as e } from "./Spinner-D8tWqg9j.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import './assets/FieldHint.css';//#region src/components/FieldHint/FieldHint.module.css
+var i = { "field-hint": "_field-hint_f5ej1_1" };
+//#endregion
+//#region src/components/FieldHint/FieldHint.tsx
+function a({ value: a, spinnerAriaValueText: o, loading: s }) {
+	return /* @__PURE__ */ r("span", {
+		className: i["field-hint"],
+		children: [a && /* @__PURE__ */ n(t, { children: a }), !a && s && /* @__PURE__ */ n(e, { ariaValueText: o })]
+	});
+}
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=FieldHint-D0HtbTnt.js.map

package/dist/FieldHint-D0HtbTnt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHint-D0HtbTnt.js","names":[],"sources":["../src/components/FieldHint/FieldHint.module.css","../src/components/FieldHint/FieldHint.tsx"],"sourcesContent":[".field-hint {\n  font-size: 0.875rem;\n}\n","import styles from './FieldHint.module.css';\n\nimport { Spinner } from 'components/Spinner/Spinner';\n\nexport interface FieldHintProps {\n  /** The value to display. */\n  value?: string;\n  /** The aria-valuetext value of the spinner component. */\n  spinnerAriaValueText: string;\n  /** true if the field hint is loading; otherwise, false. The default is false. */\n  loading?: boolean;\n}\n\n/** Represents a component to show a hint for an input element. */\nexport function FieldHint({ value, spinnerAriaValueText, loading }: FieldHintProps) {\n  return (\n    <span className={styles['field-hint']}>\n      {value && <>{value}</>}\n      {!value && loading && <Spinner ariaValueText={spinnerAriaValueText} />}\n    </span>\n  );\n}\n"],"mappings":";;;;;;ACcA,SAAgB,EAAU,EAAE,UAAO,yBAAsB,cAA2B;AAClF,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACG,KAAS,kBAAA,GAAA,EAAA,UAAG,GAAS,CAAA,EACrB,CAAC,KAAS,KAAW,kBAAC,GAAD,EAAS,eAAe,GAAwB,CAAA,CACjE"}

package/dist/Fieldset-CoNu_Owa.js

@@ -0,0 +1,23 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import './assets/Fieldset.css';//#region src/components/Fieldset/Fieldset.module.css
+var r = "_fieldset_1pmtm_1", i = "_fieldset__legend_1pmtm_15", a = "_fieldset__description_1pmtm_20", o = {
+	fieldset: r,
+	"fieldset--inline": "_fieldset--inline_1pmtm_10",
+	fieldset__legend: i,
+	fieldset__description: a
+}, s = ({ inline: r, legend: i, description: a, descriptionId: s, children: c }) => /* @__PURE__ */ n("fieldset", {
+	className: e(o.fieldset, { [o["fieldset--inline"]]: r }),
+	children: [/* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("legend", {
+		className: o.fieldset__legend,
+		children: i
+	}), a && /* @__PURE__ */ t("p", {
+		className: o.fieldset__description,
+		id: s,
+		children: a
+	})] }), c]
+});
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=Fieldset-CoNu_Owa.js.map

package/dist/Fieldset-CoNu_Owa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset-CoNu_Owa.js","names":[],"sources":["../src/components/Fieldset/Fieldset.module.css","../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":[".fieldset {\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin: 0;\n  padding: 0;\n}\n\n.fieldset--inline {\n  column-gap: 1.5rem;\n  flex-direction: row;\n}\n\n.fieldset__legend {\n  font-weight: var(--semibold);\n  padding: 0;\n}\n\n.fieldset__description {\n  margin: 0;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Fieldset.module.css';\n\nexport interface FieldsetProps {\n  /** The description to render. */\n  description?: ReactNode;\n  /** The id of the description element. Used together with the description property. */\n  descriptionId?: string;\n  /** true if the form fields should render inline; otherwise, false. The default is false. */\n  inline?: boolean;\n  /** The legend to render. */\n  legend: string;\n}\n\n/** Represents a component to show a collection of form field elements. */\nexport const Fieldset = ({\n  inline,\n  legend,\n  description,\n  descriptionId,\n  children,\n}: PropsWithChildren<FieldsetProps>) => (\n  <fieldset\n    className={clsx(styles['fieldset'], {\n      [styles['fieldset--inline']]: inline,\n    })}\n  >\n    <div>\n      <legend className={styles['fieldset__legend']}>{legend}</legend>\n      {description && (\n        <p className={styles['fieldset__description']} id={descriptionId}>\n          {description}\n        </p>\n      )}\n    </div>\n    {children}\n  </fieldset>\n);\n"],"mappings":";;;;;;;;GCkBa,KAAY,EACvB,WACA,WACA,gBACA,kBACA,kBAEA,kBAAC,YAAD;CACE,WAAW,EAAK,EAAO,UAAa,GACjC,EAAO,sBAAsB,GAC/B,CAAC;WAHJ,CAKE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;EAAQ,WAAW,EAAO;YAAsB;EAAgB,CAAA,EAC/D,KACC,kBAAC,KAAD;EAAG,WAAW,EAAO;EAA0B,IAAI;YAChD;EACC,CAAA,CAEF,EAAA,CAAA,EACL,EACQ"}

package/dist/Flyout-DEpzfZOC.js

@@ -0,0 +1,18 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/Flyout.css';var n = {
+	flyout__wrapper: "_flyout__wrapper_14wn0_1",
+	flyout__header: "_flyout__header_14wn0_14"
+}, r = e(({ position: e, visible: r, children: i }, a) => r && /* @__PURE__ */ t("div", {
+	className: n.flyout__wrapper,
+	style: {
+		top: e.top,
+		left: e.left
+	},
+	ref: a,
+	children: i
+}));
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=Flyout-DEpzfZOC.js.map

package/dist/Flyout-DEpzfZOC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flyout-DEpzfZOC.js","names":[],"sources":["../src/components/RteEditor/hooks/components/Flyout.module.css","../src/components/RteEditor/hooks/components/Flyout.tsx"],"sourcesContent":[".flyout__wrapper {\n  background-color: var(--color-uva-white);\n  border-radius: 0.25rem;\n  box-shadow: 0 3px 6px rgba(0 0 0 / 40%);\n  display: flex;\n  flex-direction: column;\n  left: 0;\n  padding: 1rem;\n  position: fixed;\n  top: calc(100% + 0.25rem);\n  z-index: 1500;\n}\n\n.flyout__header {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 0.5rem;\n  width: 100%;\n}\n","import { forwardRef } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Flyout.module.css';\n\ninterface FlyoutProps {\n  position: { top: number; left: number };\n  visible: boolean;\n  children: ReactNode;\n}\n\nexport const Flyout = forwardRef<HTMLDivElement, FlyoutProps>(\n  ({ position, visible, children }: FlyoutProps, ref) =>\n    visible && (\n      <div className={styles['flyout__wrapper']} style={{ top: position.top, left: position.left }} ref={ref}>\n        {children}\n      </div>\n    )\n);\n"],"mappings":";;;;;GCYa,IAAS,GACnB,EAAE,aAAU,YAAS,eAAyB,MAC7C,KACE,kBAAC,OAAD;CAAK,WAAW,EAAO;CAAoB,OAAO;EAAE,KAAK,EAAS;EAAK,MAAM,EAAS;EAAM;CAAO;CAChG;CACG,CAAA,CAEX"}

package/dist/FormField-BZSoQdp9.js

@@ -0,0 +1,21 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/FormField.css';//#region src/components/FormField/FormField.module.css
+var n = {
+	"form-field": "_form-field_hcyqx_1",
+	"form-field--outerspace": "_form-field--outerspace_hcyqx_7",
+	"form-field--inline": "_form-field--inline_hcyqx_11",
+	"form-field--align-start": "_form-field--align-start_hcyqx_16"
+}, r = ({ children: r, outerSpace: i, inline: a, alignStart: o, ...s }) => /* @__PURE__ */ t("div", {
+	className: e(n["form-field"], {
+		[n["form-field--outerspace"]]: i,
+		[n["form-field--inline"]]: a,
+		[n["form-field--align-start"]]: o
+	}),
+	...s,
+	children: r
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=FormField-BZSoQdp9.js.map

package/dist/FormField-BZSoQdp9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField-BZSoQdp9.js","names":[],"sources":["../src/components/FormField/FormField.module.css","../src/components/FormField/FormField.tsx"],"sourcesContent":[".form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem 1rem;\n}\n\n.form-field--outerspace {\n  margin: 1.5rem 0;\n}\n\n.form-field--inline {\n  align-items: center;\n  flex-direction: row;\n}\n\n.form-field--align-start {\n  align-items: flex-start;\n}\n","import classNames from 'clsx';\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport styles from './FormField.module.css';\n\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** true if a margin at the top and bottom should be added; otherwise, false. The default is false. */\n  outerSpace?: boolean;\n  /** true if the label and input field should be rendered on the same row; otherwise, false. The default is false. */\n  inline?: boolean;\n  /** to be used in combination with 'inline'; true if the label and input field should be rendered on start of the same row; otherwise, false. The default is false. */\n  alignStart?: boolean;\n}\n\n/** Represents an element to wrap a label and input field. */\nexport const FormField = ({ children, outerSpace, inline, alignStart, ...rest }: PropsWithChildren<FormFieldProps>) => (\n  <div\n    className={classNames(styles['form-field'], {\n      [styles['form-field--outerspace']]: outerSpace,\n      [styles['form-field--inline']]: inline,\n      [styles['form-field--align-start']]: alignStart,\n    })}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;GCgBa,KAAa,EAAE,aAAU,eAAY,WAAQ,eAAY,GAAG,QACvE,kBAAC,OAAD;CACE,WAAW,EAAW,EAAO,eAAe;GACzC,EAAO,4BAA4B;GACnC,EAAO,wBAAwB;GAC/B,EAAO,6BAA6B;EACtC,CAAC;CACF,GAAI;CAEH;CACG,CAAA"}

package/dist/HorizontalList-C22DaDz-.js

@@ -0,0 +1,20 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import './assets/HorizontalList.css';//#region src/components/HorizontalList/HorizontalList.module.css
+var n = {
+	"horizontal-list-wrapper": "_horizontal-list-wrapper_oivby_1",
+	"horizontal-list-value": "_horizontal-list-value_oivby_6",
+	"horizontal-list-separator": "_horizontal-list-separator_oivby_11"
+}, r = ({ values: r, separator: i = "•" }) => /* @__PURE__ */ e("div", {
+	className: n["horizontal-list-wrapper"],
+	children: r.map((a, o) => /* @__PURE__ */ t("span", {
+		className: n["horizontal-list-value"],
+		children: [a, o < r.length - 1 && /* @__PURE__ */ e("span", {
+			className: n["horizontal-list-separator"],
+			children: i
+		})]
+	}, `${a?.toString()}-${o}`))
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=HorizontalList-C22DaDz-.js.map

package/dist/HorizontalList-C22DaDz-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalList-C22DaDz-.js","names":[],"sources":["../src/components/HorizontalList/HorizontalList.module.css","../src/components/HorizontalList/HorizontalList.tsx"],"sourcesContent":[".horizontal-list-wrapper {\n  display: flex;\n  margin: 0;\n}\n\n.horizontal-list-value {\n  align-items: center;\n  display: flex;\n}\n\n.horizontal-list-separator {\n  align-items: center;\n  display: flex;\n  margin: 0 0.5rem;\n}\n","import type { ReactNode } from 'react';\n\nimport styles from './HorizontalList.module.css';\n\nexport interface HorizontalListProps {\n  /** The items to display. */\n  values: ReactNode[];\n  /** The separator to use. */\n  separator?: ReactNode;\n}\n\n/** Represents a component to show text separated by a given separator in a horizontal direction. */\nexport const HorizontalList = ({ values, separator = '•' }: HorizontalListProps) => {\n  return (\n    <div className={styles['horizontal-list-wrapper']}>\n      {values.map((value, index) => (\n        <span className={styles['horizontal-list-value']} key={`${value?.toString()}-${index}`}>\n          {value}\n          {index < values.length - 1 && <span className={styles['horizontal-list-separator']}>{separator}</span>}\n        </span>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;GCYa,KAAkB,EAAE,WAAQ,eAAY,UAEjD,kBAAC,OAAD;CAAK,WAAW,EAAO;WACpB,EAAO,KAAK,GAAO,MAClB,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACG,GACA,IAAQ,EAAO,SAAS,KAAK,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA+B;GAAiB,CAAA,CACjG;IAHgD,GAAG,GAAO,UAAU,CAAC,GAAG,IAGxE,CACP;CACE,CAAA"}

package/dist/IconButton-CWCMH9uf.js

@@ -0,0 +1,24 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import './assets/IconButton.css';//#region src/components/IconButton/IconButton.module.css
+var r = {
+	"icon-button": "_icon-button_j5fle_1",
+	"icon-button--destructive": "_icon-button--destructive_j5fle_27",
+	"icon-button--no-border": "_icon-button--no-border_j5fle_35",
+	"icon-button--wide": "_icon-button--wide_j5fle_44"
+}, i = t(({ children: t, type: i = "button", variant: a, noBorder: o, wide: s, ...c }, l) => /* @__PURE__ */ n("button", {
+	...c,
+	className: e(r["icon-button"], {
+		[r["icon-button--destructive"]]: a === "destructive",
+		[r["icon-button--no-border"]]: o,
+		[r["icon-button--wide"]]: s
+	}),
+	ref: l,
+	type: i,
+	children: t
+}));
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=IconButton-CWCMH9uf.js.map

package/dist/IconButton-CWCMH9uf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-CWCMH9uf.js","names":[],"sources":["../src/components/IconButton/IconButton.module.css","../src/components/IconButton/IconButton.tsx"],"sourcesContent":[".icon-button {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: 0.5rem;\n  color: var(--color-uva-black);\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-default);\n  gap: 0.25rem;\n  height: 2.75rem;\n  justify-content: center;\n  margin: 0;\n  outline: 0;\n  padding: 0;\n  position: relative;\n  white-space: nowrap;\n  width: 2.75rem;\n}\n\n.icon-button:focus-visible {\n  border-color: currentcolor;\n}\n\n.icon-button--destructive {\n  color: var(--color-red-600);\n}\n\n.icon-button:hover:not(:disabled) {\n  border-color: currentcolor;\n}\n\n.icon-button--no-border:focus-visible,\n.icon-button--no-border:hover:not(:disabled) {\n  background-color: var(--color-grey-300);\n}\n\n.icon-button--no-border:hover:not(:focus-visible, :disabled) {\n  border-color: transparent;\n}\n\n.icon-button--wide {\n  min-width: 2.75rem;\n  padding: 0 0.75rem;\n  width: unset;\n}\n\n.icon-button > svg {\n  pointer-events: none;\n}\n\n.icon-button[disabled] {\n  cursor: unset;\n  opacity: 0.4;\n}\n\n/*\nOn displays without hover such as smart phones and tablets, make the tappable\narea 0.5rem (8px) bigger in all directions.\n*/\n@media (hover: none) {\n  .icon-button::after {\n    bottom: -0.5rem;\n    content: \" \";\n    left: -0.5rem;\n    position: absolute;\n    right: -0.5rem;\n    top: -0.5rem;\n  }\n}\n","import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  /** The value of the aria-label. */\n  'aria-label': string;\n  /** The variant of the button. */\n  variant?: 'destructive';\n  /** true if the button should be rendered without a border; otherwise, false. The default is false. */\n  noBorder?: boolean;\n  /** true to render the button a bit wider; otherwise, false. The default is false. */\n  wide?: boolean;\n}\n\n/** Represents a component for a button with an icon. */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ children, type = 'button', variant, noBorder, wide, ...restProps }: IconButtonProps, forwardedRef) => (\n    <button\n      {...restProps}\n      className={clsx(styles['icon-button'], {\n        [styles['icon-button--destructive']]: variant === 'destructive',\n        [styles['icon-button--no-border']]: noBorder,\n        [styles['icon-button--wide']]: wide,\n      })}\n      ref={forwardedRef}\n      type={type}\n    >\n      {children}\n    </button>\n  )\n);\n"],"mappings":";;;;;;;;;GCmBa,IAAa,GACvB,EAAE,aAAU,UAAO,UAAU,YAAS,aAAU,SAAM,GAAG,KAA8B,MACtF,kBAAC,UAAD;CACE,GAAI;CACJ,WAAW,EAAK,EAAO,gBAAgB;GACpC,EAAO,8BAA8B,MAAY;GACjD,EAAO,4BAA4B;GACnC,EAAO,uBAAuB;EAChC,CAAC;CACF,KAAK;CACC;CAEL;CACM,CAAA,CAEZ"}

package/dist/InfoBanner-DyznQLGr.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/InfoBanner.css';var r = { infobanner_wrapper: "_infobanner_wrapper_1010z_1" }, i = ({ iconName: i, content: a }) => /* @__PURE__ */ n("div", {
+	className: r.infobanner_wrapper,
+	children: [i && /* @__PURE__ */ t(e, {
+		name: i,
+		size: 24
+	}), a]
+});
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=InfoBanner-DyznQLGr.js.map

package/dist/InfoBanner-DyznQLGr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoBanner-DyznQLGr.js","names":[],"sources":["../src/components/InfoBanner/InfoBanner.module.css","../src/components/InfoBanner/InfoBanner.tsx"],"sourcesContent":[".infobanner_wrapper {\n  align-items: center;\n  background-color: var(--color-grey-300);\n  border-left: 0.5rem solid var(--color-grey-600);\n  display: flex;\n  gap: 1rem;\n  padding: 1rem;\n  width: 100%;\n}\n","import type { ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './InfoBanner.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface InfoBannerProps {\r\n  /** The name of the icon to display in the banner. */\r\n  iconName?: IconProps['name'];\r\n  /** Content or message as sting or react component. */\r\n  content?: string | ReactNode;\r\n}\r\n\r\nexport const InfoBanner = ({ iconName, content }: InfoBannerProps) => {\r\n  return (\r\n    <div className={styles['infobanner_wrapper']}>\r\n      {iconName && <Icon name={iconName} size={24} />}\r\n      {content}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;+DCca,KAAc,EAAE,aAAU,iBAEnC,kBAAC,OAAD;CAAK,WAAW,EAAO;WAAvB,CACG,KAAY,kBAAC,GAAD;EAAM,MAAM;EAAU,MAAM;EAAM,CAAA,EAC9C,EACG"}

package/dist/InfoMessage-I-VlwxVc.js

@@ -0,0 +1,19 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import './assets/InfoMessage.css';//#region src/components/InfoMessage/InfoMessage.module.css
+var i = {
+	"info-message": "_info-message_1h497_1",
+	"info-message__container": "_info-message__container_1h497_6",
+	"info-message__icon": "_info-message__icon_1h497_11"
+}, a = ({ message: a, hasOwnContainer: o = !1 }) => /* @__PURE__ */ r("div", {
+	className: e(i["info-message"], { [i["info-message__container"]]: o }),
+	children: [/* @__PURE__ */ n(t, {
+		name: "InformationCircleFillMini",
+		className: i["info-message__icon"]
+	}), a]
+});
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=InfoMessage-I-VlwxVc.js.map

package/dist/InfoMessage-I-VlwxVc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessage-I-VlwxVc.js","names":[],"sources":["../src/components/InfoMessage/InfoMessage.module.css","../src/components/InfoMessage/InfoMessage.tsx"],"sourcesContent":[".info-message {\n  display: flex;\n  margin-top: 0.5rem;\n}\n\n.info-message__container {\n  background-color: var(--color-uva-white);\n  padding: 1.5rem;\n}\n\n.info-message__icon {\n  color: var(--color-navy-600);\n  margin-right: 0.25rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './InfoMessage.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface InfoMessageProps {\n  /** The message to show. */\n  message: string | ReactNode;\n  /** `true` if the info message should be wrapped in a container; otherwise, `false`. */\n  hasOwnContainer?: boolean;\n}\n\n/** Represents a component to show an info message. */\nexport const InfoMessage = ({ message, hasOwnContainer = false }: PropsWithChildren<InfoMessageProps>) => (\n  <div\n    className={clsx(styles['info-message'], {\n      [styles['info-message__container']]: hasOwnContainer,\n    })}\n  >\n    <Icon name=\"InformationCircleFillMini\" className={styles['info-message__icon']} />\n    {message}\n  </div>\n);\n"],"mappings":";;;;;;;;GCgBa,KAAe,EAAE,YAAS,qBAAkB,SACvD,kBAAC,OAAD;CACE,WAAW,EAAK,EAAO,iBAAiB,GACrC,EAAO,6BAA6B,GACtC,CAAC;WAHJ,CAKE,kBAAC,GAAD;EAAM,MAAK;EAA4B,WAAW,EAAO;EAAyB,CAAA,EACjF,EACG"}

package/dist/Input-Bn-arMaC.js

@@ -0,0 +1,25 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import './assets/Input.css';var r = {
+	input: "_input_1utsi_1",
+	"input--numeric": "_input--numeric_1utsi_13",
+	"input--error": "_input--error_1utsi_18",
+	"input--full-with": "_input--full-with_1utsi_23"
+}, i = t(function({ id: t, appearance: i, type: a = "text", isNumeric: o, fullWidth: s, ...c }, l) {
+	return /* @__PURE__ */ n("input", {
+		...c,
+		ref: l,
+		id: t,
+		className: e(r.input, {
+			[r["input--error"]]: i === "error",
+			[r["input--full-with"]]: s,
+			[r["input--numeric"]]: o
+		}),
+		type: a
+	});
+});
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=Input-Bn-arMaC.js.map

package/dist/Input-Bn-arMaC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-Bn-arMaC.js","names":[],"sources":["../src/components/Input/Input.module.css","../src/components/Input/Input.tsx"],"sourcesContent":[".input {\n  appearance: none;\n  background-color: transparent;\n  border: 1px solid var(--color-uva-black);\n  color: var(--color-uva-black);\n  font-family: inherit;\n  font-size: inherit;\n  height: 2rem;\n  margin: 0;\n  padding: 0 0.5rem;\n}\n\n.input--numeric {\n  text-align: right;\n  width: 8rem;\n}\n\n.input--error,\n.input:invalid {\n  border-color: var(--color-red-600);\n}\n\n.input--full-with {\n  min-width: 100%;\n  width: 0; /* Reset the default width of the input */\n}\n\n.input::placeholder {\n  color: var(--color-grey-700);\n  font-size: inherit;\n  opacity: 1;\n}\n\n.input[type=\"file\"] {\n  border: none;\n}\n\n.input:disabled {\n  color: var(--color-grey-700);\n}\n","import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './Input.module.css';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The appearance of the element. Possible values: `error`. */\n  appearance?: 'error';\n  /** The type of the input element. */\n  type?: 'text' | 'search' | 'password' | 'email' | 'file';\n  /** `true` if the element should render at full width of its container; otherwise, `false`. The default is `false`. */\n  fullWidth?: boolean;\n  /** The id of the element. */\n  id: string;\n  /** `true` if the element is used for numeric values; otherwise, `false`. The default is `false`. */\n  isNumeric?: boolean;\n}\n\n/** Represents a component for an input element. */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { id, appearance, type = 'text', isNumeric, fullWidth, ...restProps }: InputProps,\n  forwardedRef\n) {\n  return (\n    <input\n      {...restProps}\n      ref={forwardedRef}\n      id={id}\n      className={clsx(styles['input'], {\n        [styles['input--error']]: appearance === 'error',\n        [styles['input--full-with']]: fullWidth,\n        [styles['input--numeric']]: isNumeric,\n      })}\n      type={type}\n    />\n  );\n});\n"],"mappings":";;;;;;;;GCqBa,IAAQ,EAAyC,SAC5D,EAAE,OAAI,eAAY,UAAO,QAAQ,cAAW,cAAW,GAAG,KAC1D,GACA;AACA,QACE,kBAAC,SAAD;EACE,GAAI;EACJ,KAAK;EACD;EACJ,WAAW,EAAK,EAAO,OAAU;IAC9B,EAAO,kBAAkB,MAAe;IACxC,EAAO,sBAAsB;IAC7B,EAAO,oBAAoB;GAC7B,CAAC;EACI;EACN,CAAA;EAEJ"}

package/dist/InputField-BWAy19w9.js

@@ -0,0 +1,51 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { forwardRef as t, useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import './assets/InputField.css';//#region src/components/InputField/InputField.module.css
+var s = {
+	"input-field-wrapper": "_input-field-wrapper_13cvp_1",
+	"input-field": "_input-field_13cvp_1",
+	"input-field--large": "_input-field--large_13cvp_22",
+	"input-field--small": "_input-field--small_13cvp_26",
+	"input-field--compact": "_input-field--compact_13cvp_30",
+	"input-field--white": "_input-field--white_13cvp_34",
+	"input-field--not-valid": "_input-field--not-valid_13cvp_38",
+	"input-field__clear-button": "_input-field__clear-button_13cvp_46"
+}, c = t(({ autoComplete: t = "off", id: c, value: l, variant: u, width: d, type: f = "text", background: p, clearTrigger: m, notValid: h = !1, onClear: g, ..._ }, v) => {
+	let [y, b] = i(0), x = r(null);
+	n(() => {
+		x.current && b(x.current.offsetWidth);
+	}, [l]);
+	let S = () => {
+		g && v && "current" in v && v.current && (g(), v.current.focus());
+	};
+	return /* @__PURE__ */ o("div", {
+		className: s["input-field-wrapper"],
+		children: [/* @__PURE__ */ a("input", {
+			..._,
+			autoComplete: t,
+			ref: v,
+			id: c,
+			className: e(s["input-field"], {
+				[s["input-field--large"]]: u === "large",
+				[s[`input-field--${d}`]]: d,
+				[s[`input-field--${p}`]]: p,
+				[s["input-field--not-valid"]]: h
+			}),
+			type: f,
+			value: l,
+			style: { paddingRight: l && m ? y : void 0 }
+		}), !!l && m && /* @__PURE__ */ a("button", {
+			type: "button",
+			className: s["input-field__clear-button"],
+			onClick: S,
+			ref: x,
+			"aria-label": `clear trigger for ${c}`,
+			children: m
+		})]
+	});
+});
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=InputField-BWAy19w9.js.map

package/dist/InputField-BWAy19w9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField-BWAy19w9.js","names":[],"sources":["../src/components/InputField/InputField.module.css","../src/components/InputField/InputField.tsx"],"sourcesContent":[".input-field-wrapper {\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.input-field {\n  appearance: none;\n  background-color: transparent;\n  border: 1px solid;\n  border-radius: 0.5rem;\n  color: var(--color-uva-black);\n  flex: 1;\n  font-family: inherit;\n  font-size: inherit;\n  height: 2.75rem;\n  margin: 0;\n  padding: 0 1rem;\n  text-align: inherit;\n}\n\n.input-field--large {\n  height: 3rem;\n}\n\n.input-field--small {\n  max-width: 5.25rem;\n}\n\n.input-field--compact {\n  max-width: 6.25rem;\n}\n\n.input-field--white {\n  background-color: var(--color-uva-white);\n}\n\n.input-field--not-valid {\n  border-color: var(--color-red-600);\n}\n\n.input-field:disabled {\n  color: var(--color-grey-700);\n}\n\n.input-field__clear-button {\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 1rem 0 0.5rem;\n  position: absolute;\n  right: 0;\n}\n","import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The variant to render. */\n  variant?: 'large';\n  /** The width to render. */\n  width?: 'small' | 'compact';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The background color of the input. InputField is by default transparent. */\n  background?: 'white';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      autoComplete = 'off',\n      id,\n      value,\n      variant,\n      width,\n      type = 'text',\n      background,\n      clearTrigger,\n      notValid = false,\n      onClear,\n      ...restProps\n    }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n            [styles[`input-field--${width}`]]: width,\n            [styles[`input-field--${background}`]]: background,\n            [styles[`input-field--not-valid`]]: notValid,\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {Boolean(value) && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;;;GC2Ba,IAAa,GAEtB,EACE,kBAAe,OACf,OACA,UACA,YACA,UACA,UAAO,QACP,eACA,iBACA,cAAW,IACX,YACA,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAkB,KAAuB,EAAiB,EAAE,EAC7D,IAAiB,EAA0B,KAAK;AAEtD,SAAgB;AACd,EAAI,EAAe,WACjB,EAAoB,EAAe,QAAQ,YAAY;IAExD,CAAC,EAAM,CAAC;CAEX,IAAM,UAAgC;AACpC,EAAI,KAAW,KAAgB,aAAa,KAAgB,EAAa,YACvE,GAAS,EACT,EAAa,QAAQ,OAAO;;AAIhC,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,SAAD;GACE,GAAI;GACU;GACd,KAAK;GACD;GACJ,WAAW,EAAK,EAAO,gBAAgB;KACpC,EAAO,wBAAwB,MAAY;KAC3C,EAAO,gBAAgB,OAAW;KAClC,EAAO,gBAAgB,OAAgB;KACvC,EAAO,4BAA4B;IACrC,CAAC;GACI;GACC;GACP,OAAO,EAAE,cAAc,KAAS,IAAe,IAAmB,KAAA,GAAW;GAC7E,CAAA,EACD,EAAQ,KAAU,KACjB,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,SAAS;GACT,KAAK;GACL,cAAY,qBAAqB;aAEhC;GACM,CAAA,CAEP;;EAGX"}

package/dist/Label-o0BcWTUS.js

@@ -0,0 +1,21 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/Label.css';var n = {
+	label: "_label_i3lyd_1",
+	"label--required": "_label--required_i3lyd_6",
+	"label--unset-font-weight": "_label--unset-font-weight_i3lyd_14",
+	"label--align-right": "_label--align-right_i3lyd_18"
+}, r = ({ children: r, htmlFor: i, noFontWeight: a, required: o = !1, alignRight: s, ...c }) => /* @__PURE__ */ t("label", {
+	...c,
+	htmlFor: i,
+	className: e(n.label, {
+		[n["label--unset-font-weight"]]: a,
+		[n["label--required"]]: o,
+		[n["label--align-right"]]: s
+	}),
+	children: r
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=Label-o0BcWTUS.js.map

package/dist/Label-o0BcWTUS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label-o0BcWTUS.js","names":[],"sources":["../src/components/Label/Label.module.css","../src/components/Label/Label.tsx"],"sourcesContent":[".label {\n  font-weight: var(--semibold);\n  text-align: left;\n}\n\n.label--required::after {\n  color: var(--color-red-600);\n  content: \"\\2605\";\n  font-size: 0.5rem;\n  margin-left: 0.25rem;\n  vertical-align: top;\n}\n\n.label--unset-font-weight {\n  font-weight: unset;\n}\n\n.label--align-right {\n  text-align: right;\n}\n","import { clsx } from 'clsx';\n\nimport type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n  /** The id of the element for which the label is intended. */\n  htmlFor: string;\n  /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n  noFontWeight?: boolean;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to align text right; otherwise, `false`. */\n  alignRight?: boolean;\n}\n\n/** Represents a component that renders a label for an input element. */\nexport const Label = ({ children, htmlFor, noFontWeight, required = false, alignRight, ...restProps }: LabelProps) => (\n  <label\n    {...restProps}\n    htmlFor={htmlFor}\n    className={clsx(styles['label'], {\n      [styles['label--unset-font-weight']]: noFontWeight,\n      [styles['label--required']]: required,\n      [styles['label--align-right']]: alignRight,\n    })}\n  >\n    {children}\n  </label>\n);\n"],"mappings":";;;;;;;GCkBa,KAAS,EAAE,aAAU,YAAS,iBAAc,cAAW,IAAO,eAAY,GAAG,QACxF,kBAAC,SAAD;CACE,GAAI;CACK;CACT,WAAW,EAAK,EAAO,OAAU;GAC9B,EAAO,8BAA8B;GACrC,EAAO,qBAAqB;GAC5B,EAAO,wBAAwB;EACjC,CAAC;CAED;CACK,CAAA"}