@uva-glass/component-library 3.55.1 → 3.55.2

package/dist/LinkContextMenu-DZlKfbg1.js

@@ -0,0 +1,101 @@
+import { Icon as e } from "./components/Icon/Icon.js";
+import { Button as t } from "./components/Buttons/Button.js";
+import { n } from "./helpers-DcFTH1J1.js";
+import { useTranslation as r } from "./components/RteEditor/hooks/useTranslation.js";
+import { forwardRef as i, useImperativeHandle as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import './assets/LinkContextMenu.css';//#region src/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.module.css
+var f = {
+	"link-context-menu__wrapper": "_link-context-menu__wrapper_njt00_1",
+	"link-context-menu__input": "_link-context-menu__input_njt00_7",
+	"link-context-menu__button": "_link-context-menu__button_njt00_25",
+	"link-context-menu__actions": "_link-context-menu__actions_njt00_36"
+}, p = i(({ url: i, onSave: p, onDelete: m, onClose: h }, g) => {
+	let _ = r(), [v, y] = c(i), [b, x] = c(!1), S = s(null), C = () => {
+		y(i), x(!1), S.current?.blur();
+	}, w = () => {
+		p(v), C();
+	}, T = () => {
+		m(), y(""), C();
+	}, E = () => {
+		C(), h();
+	}, D = () => {
+		window.open(n(i), "_blank");
+	};
+	return a(g, () => ({ clearForm: C })), o(() => {
+		y(i);
+		let e = (e) => {
+			e.ctrlKey && e.shiftKey && e.key === "L" && (e.preventDefault(), x(!0), setTimeout(() => S.current?.focus(), 0)), e.ctrlKey && e.shiftKey && e.code === "Digit1" && (e.preventDefault(), D(), setTimeout(() => S.current?.focus(), 0)), e.ctrlKey && e.shiftKey && e.key === "Q" && (e.preventDefault(), T(), setTimeout(() => S.current?.focus(), 0));
+		};
+		return window.addEventListener("keydown", e), () => {
+			window.removeEventListener("keydown", e);
+		};
+	}, [i]), /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
+		className: f["link-context-menu__wrapper"],
+		children: [
+			/* @__PURE__ */ u("input", {
+				type: "text",
+				value: v,
+				onChange: (e) => y(e.target.value),
+				className: f["link-context-menu__input"],
+				disabled: !b,
+				ref: S
+			}),
+			!b && /* @__PURE__ */ u("button", {
+				type: "button",
+				className: f["link-context-menu__button"],
+				onClick: () => x(!0),
+				title: _.links.linkEdittip,
+				"aria-label": _.aria.labels.link,
+				"aria-keyshortcuts": _.aria.keyshortcuts.editlink,
+				children: /* @__PURE__ */ u(e, {
+					name: "Pencil",
+					size: 20
+				})
+			}),
+			/* @__PURE__ */ u("button", {
+				type: "button",
+				className: f["link-context-menu__button"],
+				onClick: D,
+				title: _.links.linkTesttip,
+				"aria-label": _.aria.labels.link,
+				"aria-keyshortcuts": _.aria.keyshortcuts.testlink,
+				children: /* @__PURE__ */ u(e, {
+					name: "ArrowTopRightOnSquare",
+					size: 20
+				})
+			}),
+			/* @__PURE__ */ u("button", {
+				type: "button",
+				className: f["link-context-menu__button"],
+				onClick: T,
+				title: _.links.linkDeletetip,
+				"aria-label": _.aria.labels.link,
+				"aria-keyshortcuts": _.aria.keyshortcuts.deletelink,
+				children: /* @__PURE__ */ u(e, {
+					name: "LinkSlash",
+					size: 20
+				})
+			})
+		]
+	}), b && /* @__PURE__ */ d("div", {
+		className: f["link-context-menu__actions"],
+		children: [/* @__PURE__ */ u(t, {
+			variant: "secondary",
+			onClick: E,
+			"aria-label": _.common.cancel,
+			type: "button",
+			children: _.common.cancel
+		}), /* @__PURE__ */ u(t, {
+			variant: "primary",
+			onClick: w,
+			"aria-label": _.aria.labels.linkOkButton,
+			type: "button",
+			children: _.links.addLink
+		})]
+	})] });
+});
+//#endregion
+export { p as t };
+
+//# sourceMappingURL=LinkContextMenu-DZlKfbg1.js.map

package/dist/LinkContextMenu-DZlKfbg1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkContextMenu-DZlKfbg1.js","names":[],"sources":["../src/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.module.css","../src/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.tsx"],"sourcesContent":[".link-context-menu__wrapper {\n  align-items: center;\n  display: flex;\n  justify-content: flex-start;\n}\n\n.link-context-menu__input {\n  appearance: none;\n  background-color: transparent;\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.5rem;\n  color: var(--color-uva-black);\n  font-family: inherit;\n  font-size: inherit;\n  height: 2.5rem;\n  margin: 0 0.5rem 0 0;\n  min-width: 20rem;\n  padding: 0 0.5rem;\n}\n\n.link-context-menu__input:disabled {\n  border-color: transparent;\n}\n\n.link-context-menu__button {\n  aspect-ratio: 1;\n  background-color: transparent;\n  border: none;\n  border-radius: 0.5rem;\n  color: var(--color-uva-black);\n  cursor: pointer;\n  font-size: inherit;\n  height: 2.5rem;\n}\n\n.link-context-menu__actions {\n  align-items: center;\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n  margin-top: 1rem;\n}\n","import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';\n\nimport styles from './LinkContextMenu.module.css';\n\nimport { ensureHttps } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { Button } from 'components/Buttons';\n\ninterface LinkContextMenuProps {\n  url: string;\n  onSave: (url: string) => void;\n  onDelete: () => void;\n  onClose: () => void;\n}\n\nexport interface linkFormMethods {\n  clearForm: () => void;\n}\n\nexport const LinkContextMenu = forwardRef(({ url, onSave, onDelete, onClose }: LinkContextMenuProps, ref) => {\n  const t = useTranslation();\n  const [link, setLink] = useState(url);\n  const [editable, setEditable] = useState(false);\n  const linkRef = useRef<HTMLInputElement>(null);\n\n  const reset = () => {\n    setLink(url);\n    setEditable(false);\n    linkRef.current?.blur();\n  };\n\n  const handleSave = () => {\n    onSave(link);\n    reset();\n  };\n\n  const handleDelete = () => {\n    onDelete();\n    setLink('');\n    reset();\n  };\n\n  const handleClose = () => {\n    reset();\n    onClose();\n  };\n\n  const handlePreview = () => {\n    window.open(ensureHttps(url), '_blank');\n  };\n\n  useImperativeHandle(ref, () => ({\n    clearForm: reset,\n  }));\n\n  useLayoutEffect(() => {\n    setLink(url);\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.ctrlKey && event.shiftKey && event.key === 'L') {\n        event.preventDefault();\n        setEditable(true);\n        setTimeout(() => linkRef.current?.focus(), 0);\n      }\n\n      if (event.ctrlKey && event.shiftKey && event.code === 'Digit1') {\n        event.preventDefault();\n        handlePreview();\n        setTimeout(() => linkRef.current?.focus(), 0);\n      }\n\n      if (event.ctrlKey && event.shiftKey && event.key === 'Q') {\n        event.preventDefault();\n        handleDelete();\n        setTimeout(() => linkRef.current?.focus(), 0);\n      }\n    };\n\n    window.addEventListener('keydown', handleKeydown);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeydown);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [url]);\n\n  return (\n    <>\n      <div className={styles['link-context-menu__wrapper']}>\n        <input\n          type=\"text\"\n          value={link}\n          onChange={(event) => setLink(event.target.value)}\n          className={styles['link-context-menu__input']}\n          disabled={!editable}\n          ref={linkRef}\n        />\n        {!editable && (\n          <button\n            type=\"button\"\n            className={styles['link-context-menu__button']}\n            onClick={() => setEditable(true)}\n            title={t.links.linkEdittip}\n            aria-label={t.aria.labels.link}\n            aria-keyshortcuts={t.aria.keyshortcuts.editlink}\n          >\n            <Icon name=\"Pencil\" size={20} />\n          </button>\n        )}\n        <button\n          type=\"button\"\n          className={styles['link-context-menu__button']}\n          onClick={handlePreview}\n          title={t.links.linkTesttip}\n          aria-label={t.aria.labels.link}\n          aria-keyshortcuts={t.aria.keyshortcuts.testlink}\n        >\n          <Icon name=\"ArrowTopRightOnSquare\" size={20} />\n        </button>\n        <button\n          type=\"button\"\n          className={styles['link-context-menu__button']}\n          onClick={handleDelete}\n          title={t.links.linkDeletetip}\n          aria-label={t.aria.labels.link}\n          aria-keyshortcuts={t.aria.keyshortcuts.deletelink}\n        >\n          <Icon name=\"LinkSlash\" size={20} />\n        </button>\n      </div>\n      {editable && (\n        <div className={styles['link-context-menu__actions']}>\n          <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\n            {t.common.cancel}\n          </Button>\n          <Button variant={'primary'} onClick={handleSave} aria-label={t.aria.labels.linkOkButton} type=\"button\">\n            {t.links.addLink}\n          </Button>\n        </div>\n      )}\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;GCoBa,IAAkB,GAAY,EAAE,QAAK,WAAQ,aAAU,cAAiC,MAAQ;CAC3G,IAAM,IAAI,GAAgB,EACpB,CAAC,GAAM,KAAW,EAAS,EAAI,EAC/B,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAU,EAAyB,KAAK,EAExC,UAAc;AAGlB,EAFA,EAAQ,EAAI,EACZ,EAAY,GAAM,EAClB,EAAQ,SAAS,MAAM;IAGnB,UAAmB;AAEvB,EADA,EAAO,EAAK,EACZ,GAAO;IAGH,UAAqB;AAGzB,EAFA,GAAU,EACV,EAAQ,GAAG,EACX,GAAO;IAGH,UAAoB;AAExB,EADA,GAAO,EACP,GAAS;IAGL,UAAsB;AAC1B,SAAO,KAAK,EAAY,EAAI,EAAE,SAAS;;AAsCzC,QAnCA,EAAoB,UAAY,EAC9B,WAAW,GACZ,EAAE,EAEH,QAAsB;AACpB,IAAQ,EAAI;EAEZ,IAAM,KAAiB,MAAyB;AAa9C,GAZI,EAAM,WAAW,EAAM,YAAY,EAAM,QAAQ,QACnD,EAAM,gBAAgB,EACtB,EAAY,GAAK,EACjB,iBAAiB,EAAQ,SAAS,OAAO,EAAE,EAAE,GAG3C,EAAM,WAAW,EAAM,YAAY,EAAM,SAAS,aACpD,EAAM,gBAAgB,EACtB,GAAe,EACf,iBAAiB,EAAQ,SAAS,OAAO,EAAE,EAAE,GAG3C,EAAM,WAAW,EAAM,YAAY,EAAM,QAAQ,QACnD,EAAM,gBAAgB,EACtB,GAAc,EACd,iBAAiB,EAAQ,SAAS,OAAO,EAAE,EAAE;;AAMjD,SAFA,OAAO,iBAAiB,WAAW,EAAc,QAEpC;AACX,UAAO,oBAAoB,WAAW,EAAc;;IAGrD,CAAC,EAAI,CAAC,EAGP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB;GACE,kBAAC,SAAD;IACE,MAAK;IACL,OAAO;IACP,WAAW,MAAU,EAAQ,EAAM,OAAO,MAAM;IAChD,WAAW,EAAO;IAClB,UAAU,CAAC;IACX,KAAK;IACL,CAAA;GACD,CAAC,KACA,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,eAAe,EAAY,GAAK;IAChC,OAAO,EAAE,MAAM;IACf,cAAY,EAAE,KAAK,OAAO;IAC1B,qBAAmB,EAAE,KAAK,aAAa;cAEvC,kBAAC,GAAD;KAAM,MAAK;KAAS,MAAM;KAAM,CAAA;IACzB,CAAA;GAEX,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,SAAS;IACT,OAAO,EAAE,MAAM;IACf,cAAY,EAAE,KAAK,OAAO;IAC1B,qBAAmB,EAAE,KAAK,aAAa;cAEvC,kBAAC,GAAD;KAAM,MAAK;KAAwB,MAAM;KAAM,CAAA;IACxC,CAAA;GACT,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,SAAS;IACT,OAAO,EAAE,MAAM;IACf,cAAY,EAAE,KAAK,OAAO;IAC1B,qBAAmB,EAAE,KAAK,aAAa;cAEvC,kBAAC,GAAD;KAAM,MAAK;KAAY,MAAM;KAAM,CAAA;IAC5B,CAAA;GACL;KACL,KACC,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,GAAD;GAAQ,SAAS;GAAa,SAAS;GAAa,cAAY,EAAE,OAAO;GAAQ,MAAK;aACnF,EAAE,OAAO;GACH,CAAA,EACT,kBAAC,GAAD;GAAQ,SAAS;GAAW,SAAS;GAAY,cAAY,EAAE,KAAK,OAAO;GAAc,MAAK;aAC3F,EAAE,MAAM;GACF,CAAA,CACL;IAEP,EAAA,CAAA;EAEL"}

package/dist/MenuLink-Cm1yZO_5.js

@@ -0,0 +1,21 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t } from "react/jsx-runtime";
+import { NavLink as n, useLocation as r } from "react-router";
+import './assets/MenuLink2.css';//#region src/components/MenuLink/MenuLink.module.css
+var i = {
+	"menu-link": "_menu-link_8gjhh_1",
+	"menu-link--active": "_menu-link--active_8gjhh_8"
+}, a = ({ overrideDefault: a, ...o }) => {
+	let s = r(), c = (e) => e.replace(/s$/, ""), l = (e) => {
+		let t = s.pathname.split("/").filter(Boolean), n = e.split("/").filter(Boolean).slice(-1)[0], r = c(n);
+		return t.some((e) => c(e) === r);
+	};
+	return /* @__PURE__ */ t(n, {
+		...o,
+		className: ({ isActive: t }) => e(i["menu-link"], { [i["menu-link--active"]]: a ? "" : t || l(o.to) })
+	});
+};
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=MenuLink-Cm1yZO_5.js.map

package/dist/MenuLink-Cm1yZO_5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLink-Cm1yZO_5.js","names":[],"sources":["../src/components/MenuLink/MenuLink.module.css","../src/components/MenuLink/MenuLink.tsx"],"sourcesContent":[".menu-link {\n  border-bottom: 0.125rem solid transparent;\n  text-decoration: none;\n  transition: var(--transition-colors) var(--default-duration) var(--default-easing-function);\n}\n\n.menu-link:hover,\n.menu-link--active {\n  border-bottom-color: inherit;\n  color: unset;\n}\n\n.menu-link--active {\n  font-weight: var(--semibold);\n}\n","import classNames from 'clsx';\nimport { NavLink, useLocation } from 'react-router';\n\nimport type { NavLinkProps } from 'react-router';\n\nimport styles from './MenuLink.module.css';\n\n/** Represents a component for a [NavLink](https://reactrouter.com/en/main/components/nav-link) with styling. */\n// Omit style so it cannot be accidentally used\nexport interface MenuLinkProps extends Omit<NavLinkProps, 'style'> {\n  overrideDefault?: boolean;\n}\n\nexport const MenuLink = ({ overrideDefault, ...props }: MenuLinkProps) => {\n  const location = useLocation();\n\n  // Helper function to remove trailing 's' from a string\n  const singularize = (str: string) => str.replace(/s$/, '');\n\n  // Check if 'to' path (singular version) matches any segment (singular version)\n  const isActiveSingular = (to: string) => {\n    const currentSegments = location.pathname.split('/').filter(Boolean);\n    const latestToPath = to.split('/').filter(Boolean).slice(-1)[0]; // return only lates path removing any prepend path\n    const singularizedToPath = singularize(latestToPath);\n\n    return currentSegments.some((segment) => singularize(segment) === singularizedToPath);\n  };\n\n  return (\n    <NavLink\n      {...props}\n      className={({ isActive }) =>\n        classNames(styles['menu-link'], {\n          [styles['menu-link--active']]: overrideDefault ? '' : isActive || isActiveSingular(props.to as string),\n        })\n      }\n    />\n  );\n};\n"],"mappings":";;;;;;;GCaa,KAAY,EAAE,oBAAiB,GAAG,QAA2B;CACxE,IAAM,IAAW,GAAa,EAGxB,KAAe,MAAgB,EAAI,QAAQ,MAAM,GAAG,EAGpD,KAAoB,MAAe;EACvC,IAAM,IAAkB,EAAS,SAAS,MAAM,IAAI,CAAC,OAAO,QAAQ,EAC9D,IAAe,EAAG,MAAM,IAAI,CAAC,OAAO,QAAQ,CAAC,MAAM,GAAG,CAAC,IACvD,IAAqB,EAAY,EAAa;AAEpD,SAAO,EAAgB,MAAM,MAAY,EAAY,EAAQ,KAAK,EAAmB;;AAGvF,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,YAAY,EAAE,kBACZ,EAAW,EAAO,cAAc,GAC7B,EAAO,uBAAuB,IAAkB,KAAK,KAAY,EAAiB,EAAM,GAAa,EACvG,CAAC;EAEJ,CAAA"}

package/dist/MetaDataBar-C4QO9oBV.js

@@ -0,0 +1,23 @@
+import { Icon as e } from "./components/Icon/Icon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import './assets/MetaDataBar.css';//#region src/components/MetaDataBar/MetaDataBar.module.css
+var r = {
+	"meta-data-bar": "_meta-data-bar_1kexb_1",
+	"meta-data-bar__item": "_meta-data-bar__item_1kexb_12"
+}, i = ({ itemData: i }) => /* @__PURE__ */ t("div", {
+	className: r["meta-data-bar"],
+	children: i.map(({ iconName: i, itemLabel: a }) => a.indexOf("undefined") === -1 && /* @__PURE__ */ n("div", {
+		className: r["meta-data-bar__item"],
+		children: [/* @__PURE__ */ t(e, {
+			name: i,
+			size: 16
+		}), /* @__PURE__ */ t("span", {
+			className: r["meta-data-bar__item-label"],
+			children: a
+		})]
+	}, a))
+});
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=MetaDataBar-C4QO9oBV.js.map

package/dist/MetaDataBar-C4QO9oBV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaDataBar-C4QO9oBV.js","names":[],"sources":["../src/components/MetaDataBar/MetaDataBar.module.css","../src/components/MetaDataBar/MetaDataBar.tsx"],"sourcesContent":[".meta-data-bar {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  color: var(--color-grey-700);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1.5rem;\n  padding: 1rem;\n  width: fit-content;\n}\n\n.meta-data-bar__item {\n  align-items: center;\n  display: flex;\n  font-size: var(--font-size-text-non-essential);\n  gap: 0.5rem;\n  line-height: 1.5rem;\n  white-space: nowrap;\n}\n","import type { IconProps } from 'components/Icon';\n\nimport styles from './MetaDataBar.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type itemType = {\n  iconName: IconProps['name'];\n  itemLabel: string;\n};\n\nexport interface MetaDataBarProps {\n  /** A array of itemType object's to display in the bar. itemType { iconName: IconProps['name']; itemLabel: string; } */\n  itemData: itemType[];\n}\n\n/** Represents a component that displays a array of data in a bar. */\nexport const MetaDataBar = ({ itemData }: MetaDataBarProps) => {\n  return (\n    <div className={styles['meta-data-bar']}>\n      {itemData.map(({ iconName, itemLabel }) => {\n        return (\n          itemLabel.indexOf('undefined') === -1 && (\n            <div className={styles['meta-data-bar__item']} key={itemLabel}>\n              <Icon name={iconName} size={16} />\n              <span className={styles['meta-data-bar__item-label']}>{itemLabel}</span>\n            </div>\n          )\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;GCiBa,KAAe,EAAE,kBAE1B,kBAAC,OAAD;CAAK,WAAW,EAAO;WACpB,EAAS,KAAK,EAAE,aAAU,mBAEvB,EAAU,QAAQ,YAAY,KAAK,MACjC,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,GAAD;GAAM,MAAM;GAAU,MAAM;GAAM,CAAA,EAClC,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA+B;GAAiB,CAAA,CACpE;IAH8C,EAG9C,CAGV;CACE,CAAA"}

package/dist/MetaDataList-CAR1HTYs.js

@@ -0,0 +1,24 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import './assets/MetaDataList.css';//#region src/components/MetaDataList/MetaDataList.module.css
+var n = {
+	"meta-data-list": "_meta-data-list_1kah2_1",
+	"meta-data-list__item": "_meta-data-list__item_1kah2_5",
+	"meta-data-list__term": "_meta-data-list__term_1kah2_16",
+	"meta-data-list__description": "_meta-data-list__description_1kah2_20"
+}, r = ({ items: r }) => /* @__PURE__ */ e("dl", {
+	className: n["meta-data-list"],
+	children: Object.entries(r).map(([r, i]) => /* @__PURE__ */ t("div", {
+		className: n["meta-data-list__item"],
+		children: [/* @__PURE__ */ e("dt", {
+			className: n["meta-data-list__term"],
+			children: r
+		}), /* @__PURE__ */ e("dd", {
+			className: n["meta-data-list__description"],
+			children: i
+		})]
+	}, r))
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=MetaDataList-CAR1HTYs.js.map

package/dist/MetaDataList-CAR1HTYs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaDataList-CAR1HTYs.js","names":[],"sources":["../src/components/MetaDataList/MetaDataList.module.css","../src/components/MetaDataList/MetaDataList.tsx"],"sourcesContent":[".meta-data-list {\n  margin: 0;\n}\n\n.meta-data-list__item {\n  display: flex;\n  gap: 1rem;\n  justify-content: space-between;\n  padding: 0.5rem 0;\n}\n\n.meta-data-list__item:not(:last-of-type) {\n  border-bottom: 1px solid var(--color-grey-400);\n}\n\n.meta-data-list__term {\n  color: var(--color-grey-700);\n}\n\n.meta-data-list__description {\n  align-items: center;\n  display: inline-flex;\n  font-weight: var(--semibold);\n  margin: 0;\n  text-align: right;\n}\n","import type { ReactNode } from 'react';\n\nimport styles from './MetaDataList.module.css';\n\nexport interface MetaDataListProps {\n  /** A list of key value pairs to display. The value is be a [ReactNode](https://reactnative.dev/docs/react-node). */\n  items: Record<string, ReactNode>;\n}\n\n/** Represents a component of a list of key value pairs. */\nexport const MetaDataList = ({ items }: MetaDataListProps) => (\n  <dl className={styles['meta-data-list']}>\n    {Object.entries(items).map(([term, description]) => (\n      <div key={term} className={styles['meta-data-list__item']}>\n        <dt className={styles['meta-data-list__term']}>{term}</dt>\n        <dd className={styles['meta-data-list__description']}>{description}</dd>\n      </div>\n    ))}\n  </dl>\n);\n"],"mappings":";;;;;;;GCUa,KAAgB,EAAE,eAC7B,kBAAC,MAAD;CAAI,WAAW,EAAO;WACnB,OAAO,QAAQ,EAAM,CAAC,KAAK,CAAC,GAAM,OACjC,kBAAC,OAAD;EAAgB,WAAW,EAAO;YAAlC,CACE,kBAAC,MAAD;GAAI,WAAW,EAAO;aAA0B;GAAU,CAAA,EAC1D,kBAAC,MAAD;GAAI,WAAW,EAAO;aAAiC;GAAiB,CAAA,CACpE;IAHI,EAGJ,CACN;CACC,CAAA"}

package/dist/ModalDialog-HUkDdAJ-.js

@@ -0,0 +1,114 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { t } from "./Backdrop-D8AHeuBn.js";
+import { t as n } from "./OverlayCloseButton-rttFbAM_.js";
+import { t as r } from "./Spinner-D8tWqg9j.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useDialog as u } from "@react-aria/dialog";
+import { FocusScope as d } from "@react-aria/focus";
+import { OverlayContainer as f, useModal as p, useOverlay as m, usePreventScroll as h } from "@react-aria/overlays";
+import './assets/ModalDialog.css';//#region src/components/ModalDialog/ModalDialog.module.css
+var g = {
+	"modal-dialog": "_modal-dialog_15zh0_1",
+	"modal-dialog--padded": "_modal-dialog--padded_15zh0_18",
+	"modal-dialog__content": "_modal-dialog__content_15zh0_22",
+	"modal-dialog__children": "_modal-dialog__children_15zh0_33",
+	"modal-dialog__title": "_modal-dialog__title_15zh0_37",
+	"modal-dialog--confirm": "_modal-dialog--confirm_15zh0_44",
+	"modal-dialog__buttons": "_modal-dialog__buttons_15zh0_48",
+	"modal-dialog__buttons--border": "_modal-dialog__buttons--border_15zh0_61",
+	"modal-dialog__buttons--shadow": "_modal-dialog__buttons--shadow_15zh0_78",
+	"modal-dialog__close": "_modal-dialog__close_15zh0_82",
+	"modal-dialog--small": "_modal-dialog--small_15zh0_99",
+	"modal-dialog--regular": "_modal-dialog--regular_15zh0_103",
+	"modal-dialog--medium": "_modal-dialog--medium_15zh0_107",
+	"modal-dialog--large": "_modal-dialog--large_15zh0_111",
+	"modal-dialog--content-with-buttons": "_modal-dialog--content-with-buttons_15zh0_125"
+};
+//#endregion
+//#region src/components/ModalDialog/ModalDialog.tsx
+function _(_) {
+	let { buttons: v, children: y, isDismissable: b = !0, isKeyboardDismissDisabled: x = !b, isLoading: S, spinnerAriaValueText: C = "Loading", closeButtonAriaValueText: w = "Close", isOpen: T, noValidate: E = !1, onClose: D, onSubmit: O, role: k = "dialog", title: A, headerContent: j, variant: M = "dialog", padded: N, size: P = "regular", noButtonBorder: F = !1 } = _, I = a(null), L = a(null), [R, z] = o(!1), [B, V] = o(!1), { dialogProps: H, titleProps: U } = u({ role: k }, I), { modalProps: W } = p({ isDisabled: !T }), { overlayProps: G, underlayProps: K } = m({
+		isDismissable: b,
+		isKeyboardDismissDisabled: x,
+		isOpen: T,
+		onClose: D
+	}, I);
+	h({ isDisabled: !T }), i(() => {
+		let e = L.current;
+		function t() {
+			if (e) {
+				let t = e.scrollHeight, n = e.clientHeight, r = e.scrollTop;
+				z(t > n), V(r + n >= t);
+			}
+		}
+		function n() {
+			t();
+		}
+		e && (e.addEventListener("scroll", n), window.addEventListener("resize", n));
+		let r = setTimeout(() => {
+			t();
+		}, 0);
+		return () => {
+			e && e.removeEventListener("scroll", n), window.removeEventListener("resize", n), clearTimeout(r);
+		};
+	}, [T, j]);
+	function q(e) {
+		e.stopPropagation();
+	}
+	return T ? /* @__PURE__ */ c(f, { children: /* @__PURE__ */ c(t, {
+		...K,
+		children: S ? /* @__PURE__ */ c(r, { ariaValueText: C }) : /* @__PURE__ */ c(s, { children: /* @__PURE__ */ c(d, {
+			autoFocus: !0,
+			contain: !0,
+			restoreFocus: !0,
+			children: /* @__PURE__ */ l("div", {
+				...H,
+				...W,
+				...G,
+				className: e(g["modal-dialog"], [g[`modal-dialog--${P}`]], {
+					[g["modal-dialog--confirm"]]: M === "confirm",
+					[g["modal-dialog--padded"]]: N
+				}),
+				onKeyUp: q,
+				role: "presentation",
+				ref: I,
+				children: [(A || j) && M === "dialog" && /* @__PURE__ */ l(s, { children: [
+					A && /* @__PURE__ */ c("h1", {
+						...U,
+						className: g["modal-dialog__title"],
+						children: A
+					}),
+					j,
+					M === "dialog" && /* @__PURE__ */ c("span", {
+						className: g["modal-dialog__close"],
+						children: /* @__PURE__ */ c(n, {
+							"aria-label": w,
+							onClick: D,
+							paddedModal: N
+						})
+					})
+				] }), /* @__PURE__ */ l("form", {
+					className: e(g["modal-dialog__content"], { [g["modal-dialog--content-with-buttons"]]: v }),
+					onSubmit: O,
+					noValidate: E,
+					ref: L,
+					children: [/* @__PURE__ */ c("div", {
+						className: e({ [g["modal-dialog__children"]]: !F }),
+						children: y
+					}), v && /* @__PURE__ */ c("div", {
+						className: e(g["modal-dialog__buttons"], {
+							[g["modal-dialog__buttons--border"]]: !F,
+							[g["modal-dialog__buttons--shadow"]]: R && !B
+						}),
+						children: v
+					})]
+				})]
+			})
+		}) })
+	}) }) : null;
+}
+//#endregion
+export { _ as t };
+
+//# sourceMappingURL=ModalDialog-HUkDdAJ-.js.map

package/dist/ModalDialog-HUkDdAJ-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialog-HUkDdAJ-.js","names":[],"sources":["../src/components/ModalDialog/ModalDialog.module.css","../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":[".modal-dialog {\n  --modal-dialog-padding: 1.5rem;\n  --modal-dialog-padding-mobile: 1.25rem;\n\n  background: var(--color-uva-white);\n  box-shadow:\n    0 2px 2px hsl(0deg 0% 0% / 6%),\n    0 4px 3px hsla(0deg 0% 0% / 7%);\n  display: flex;\n  flex-direction: column;\n\n  /* dynamic view height needed to adapt for possible auto hiding of mobile address bar */\n  height: 100dvh;\n  position: relative;\n  width: 100vw;\n}\n\n.modal-dialog--padded {\n  padding: 0;\n}\n\n.modal-dialog__content {\n  display: flex;\n  flex-direction: column;\n  height: 100svh;\n  justify-content: space-between;\n  overflow: hidden;\n  overflow-y: auto;\n  padding: 0 var(--modal-dialog-padding-mobile);\n  width: 100%;\n}\n\n.modal-dialog__children {\n  padding-bottom: var(--modal-dialog-padding-mobile);\n}\n\n.modal-dialog__title {\n  font-size: var(--font-size-m);\n  line-height: var(--line-height-m);\n  margin: 0 var(--modal-dialog-padding-mobile) 0 0;\n  padding: var(--modal-dialog-padding-mobile);\n}\n\n.modal-dialog--confirm {\n  padding: var(--modal-dialog-padding-mobile) 0 0;\n}\n\n.modal-dialog__buttons {\n  background-color: var(--color-uva-white);\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  justify-content: flex-start;\n  margin: 0 calc(-1 * var(--modal-dialog-padding-mobile));\n  padding: var(--modal-dialog-padding-mobile);\n  position: sticky;\n  right: 0;\n}\n\n.modal-dialog__buttons--border {\n  border-top: 1px solid var(--color-grey-300);\n}\n\n.modal-dialog__buttons::before {\n  background: linear-gradient(to top, rgba(0 0 0 / 30%), rgba(0 0 0 / 0%));\n  bottom: 100%;\n  content: \"\";\n  height: 10px;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  transition: opacity 0.4s ease-out;\n}\n\n.modal-dialog__buttons--shadow::before {\n  opacity: 1; /* Show the shadow when content is scrollable and not scrolled to the bottom */\n}\n\n.modal-dialog__close {\n  position: absolute;\n  right: var(--modal-dialog-padding-mobile);\n  top: var(--modal-dialog-padding-mobile);\n}\n\n@media (min-width: 28rem) and (min-height: 28rem) {\n  .modal-dialog {\n    height: unset;\n    max-height: 100svh;\n    max-width: 100vw;\n  }\n\n  .modal-dialog--padded {\n    width: 34.25rem;\n  }\n\n  .modal-dialog--small {\n    width: 27.5rem;\n  }\n\n  .modal-dialog--regular {\n    width: 30rem;\n  }\n\n  .modal-dialog--medium {\n    width: 36rem;\n  }\n\n  .modal-dialog--large {\n    width: 65.375rem;\n  }\n\n  .modal-dialog__title {\n    margin-right: var(--modal-dialog-padding);\n    padding: var(--modal-dialog-padding);\n  }\n\n  .modal-dialog__content {\n    height: unset;\n    padding: 0 var(--modal-dialog-padding);\n  }\n\n  .modal-dialog--content-with-buttons {\n    margin-bottom: 5.75rem;\n  }\n\n  .modal-dialog__children {\n    padding-bottom: var(--modal-dialog-padding);\n  }\n\n  .modal-dialog--confirm {\n    padding: var(--modal-dialog-padding) 0 0;\n  }\n\n  .modal-dialog__buttons {\n    margin: unset;\n    padding: var(--modal-dialog-padding);\n    position: absolute;\n    width: inherit;\n  }\n\n  .modal-dialog__close {\n    position: absolute;\n    right: var(--modal-dialog-padding);\n    top: var(--modal-dialog-padding);\n  }\n}\n","import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\nimport type { AriaDialogProps } from '@react-types/dialog';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n  /** The buttons of the dialog. */\n  buttons?: ReactNode;\n  /** `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. */\n  isDismissable?: boolean;\n  /** `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. */\n  isKeyboardDismissDisabled?: boolean;\n  /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. */\n  isLoading?: boolean;\n  /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. */\n  spinnerAriaValueText?: string;\n  /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` */\n  closeButtonAriaValueText?: string;\n  /** `true` to render the dialog opened; otherwise, `false`. The default is `false`. */\n  isOpen: boolean;\n  /** `true` to disable form validation; otherwise, `false`. The default is `false`. */\n  noValidate?: boolean;\n  /** The callback function that is invoked when the dialog is closed. */\n  onClose?(): void;\n  /** The callback function that is invoked when the form is submitted. */\n  onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n  /** The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. */\n  role?: AriaDialogProps['role'];\n  /** The title of the dialog. */\n  title?: string;\n  /** The contents of the dialog header. */\n  headerContent?: ReactNode;\n  /** The variant of the dialog. */\n  variant?: 'confirm' | 'dialog';\n  /** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */\n  padded?: boolean;\n  /** Size of the dialog. */\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  /** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */\n  noButtonBorder?: boolean;\n}\n\n/** Represents a component for a modal dialog. */\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n  const {\n    buttons,\n    children,\n    isDismissable = true,\n    isKeyboardDismissDisabled = !isDismissable,\n    isLoading,\n    spinnerAriaValueText = 'Loading',\n    closeButtonAriaValueText = 'Close',\n    isOpen,\n    noValidate = false,\n    onClose,\n    onSubmit,\n    role = 'dialog',\n    title,\n    headerContent,\n    variant = 'dialog',\n    padded,\n    size = 'regular',\n    noButtonBorder = false,\n  } = props;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const formRef = useRef<HTMLFormElement>(null);\n  const [isScrollable, setIsScrollable] = useState(false);\n  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n  const { dialogProps, titleProps } = useDialog({ role }, ref);\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n    ref\n  );\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    const formElement = formRef.current;\n\n    function checkScrollable() {\n      if (formElement) {\n        const scrollHeight = formElement.scrollHeight;\n        const clientHeight = formElement.clientHeight;\n        const scrollTop = formElement.scrollTop;\n\n        setIsScrollable(scrollHeight > clientHeight);\n        setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n      }\n    }\n\n    function handleScrollAndResize() {\n      checkScrollable();\n    }\n\n    if (formElement) {\n      formElement.addEventListener('scroll', handleScrollAndResize);\n      window.addEventListener('resize', handleScrollAndResize);\n    }\n\n    const timeoutId = setTimeout(() => {\n      checkScrollable();\n    }, 0);\n\n    return () => {\n      if (formElement) {\n        formElement.removeEventListener('scroll', handleScrollAndResize);\n      }\n      window.removeEventListener('resize', handleScrollAndResize);\n      clearTimeout(timeoutId);\n    };\n  }, [isOpen, headerContent]);\n\n  function onKeyUp(event: KeyboardEvent) {\n    event.stopPropagation();\n  }\n\n  if (!isOpen) return null;\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        {isLoading ? (\n          <Spinner ariaValueText={spinnerAriaValueText} />\n        ) : (\n          <>\n            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n            <FocusScope autoFocus contain restoreFocus>\n              <div\n                {...dialogProps}\n                {...modalProps}\n                {...overlayProps}\n                className={clsx(styles['modal-dialog'], [styles[`modal-dialog--${size}`]], {\n                  [styles['modal-dialog--confirm']]: variant === 'confirm',\n                  [styles['modal-dialog--padded']]: padded,\n                })}\n                onKeyUp={onKeyUp}\n                role=\"presentation\"\n                ref={ref}\n              >\n                {(title || headerContent) && variant === 'dialog' && (\n                  <>\n                    {title && (\n                      <h1 {...titleProps} className={styles['modal-dialog__title']}>\n                        {title}\n                      </h1>\n                    )}\n                    {headerContent}\n                    {variant === 'dialog' && (\n                      <span className={styles['modal-dialog__close']}>\n                        <OverlayCloseButton\n                          aria-label={closeButtonAriaValueText}\n                          onClick={onClose}\n                          paddedModal={padded}\n                        />\n                      </span>\n                    )}\n                  </>\n                )}\n                <form\n                  className={clsx(styles['modal-dialog__content'], {\n                    [styles['modal-dialog--content-with-buttons']]: buttons,\n                  })}\n                  onSubmit={onSubmit}\n                  noValidate={noValidate}\n                  ref={formRef}\n                >\n                  <div className={clsx({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n                  {buttons && (\n                    <div\n                      className={clsx(styles['modal-dialog__buttons'], {\n                        [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n                        [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n                      })}\n                    >\n                      {buttons}\n                    </div>\n                  )}\n                </form>\n              </div>\n            </FocusScope>\n          </>\n        )}\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACqDA,SAAgB,EAAY,GAA4C;CACtE,IAAM,EACJ,YACA,aACA,mBAAgB,IAChB,+BAA4B,CAAC,GAC7B,cACA,0BAAuB,WACvB,8BAA2B,SAC3B,WACA,gBAAa,IACb,YACA,aACA,UAAO,UACP,UACA,kBACA,aAAU,UACV,WACA,UAAO,WACP,oBAAiB,OACf,GAEE,IAAM,EAAuB,KAAK,EAClC,IAAU,EAAwB,KAAK,EACvC,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAoB,KAAyB,EAAS,GAAM,EAE7D,EAAE,gBAAa,kBAAe,EAAU,EAAE,SAAM,EAAE,EAAI,EACtD,EAAE,kBAAe,EAAS,EAAE,YAAY,CAAC,GAAQ,CAAC,EAClD,EAAE,iBAAc,qBAAkB,EACtC;EAAE;EAAe;EAA2B;EAAQ;EAAS,EAC7D,EACD;AAID,CAFA,EAAiB,EAAE,YAAY,CAAC,GAAQ,CAAC,EAEzC,QAAgB;EACd,IAAM,IAAc,EAAQ;EAE5B,SAAS,IAAkB;AACzB,OAAI,GAAa;IACf,IAAM,IAAe,EAAY,cAC3B,IAAe,EAAY,cAC3B,IAAY,EAAY;AAG9B,IADA,EAAgB,IAAe,EAAa,EAC5C,EAAsB,IAAY,KAAgB,EAAa;;;EAInE,SAAS,IAAwB;AAC/B,MAAiB;;AAGnB,EAAI,MACF,EAAY,iBAAiB,UAAU,EAAsB,EAC7D,OAAO,iBAAiB,UAAU,EAAsB;EAG1D,IAAM,IAAY,iBAAiB;AACjC,MAAiB;KAChB,EAAE;AAEL,eAAa;AAKX,GAJI,KACF,EAAY,oBAAoB,UAAU,EAAsB,EAElE,OAAO,oBAAoB,UAAU,EAAsB,EAC3D,aAAa,EAAU;;IAExB,CAAC,GAAQ,EAAc,CAAC;CAE3B,SAAS,EAAQ,GAAsB;AACrC,IAAM,iBAAiB;;AAKzB,QAFK,IAGH,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAU,GAAI;YACX,IACC,kBAAC,GAAD,EAAS,eAAe,GAAwB,CAAA,GAEhD,kBAAA,GAAA,EAAA,UAEE,kBAAC,GAAD;GAAY,WAAA;GAAU,SAAA;GAAQ,cAAA;aAC5B,kBAAC,OAAD;IACE,GAAI;IACJ,GAAI;IACJ,GAAI;IACJ,WAAW,EAAK,EAAO,iBAAiB,CAAC,EAAO,iBAAiB,KAAQ,EAAE;MACxE,EAAO,2BAA2B,MAAY;MAC9C,EAAO,0BAA0B;KACnC,CAAC;IACO;IACT,MAAK;IACA;cAVP,EAYI,KAAS,MAAkB,MAAY,YACvC,kBAAA,GAAA,EAAA,UAAA;KACG,KACC,kBAAC,MAAD;MAAI,GAAI;MAAY,WAAW,EAAO;gBACnC;MACE,CAAA;KAEN;KACA,MAAY,YACX,kBAAC,QAAD;MAAM,WAAW,EAAO;gBACtB,kBAAC,GAAD;OACE,cAAY;OACZ,SAAS;OACT,aAAa;OACb,CAAA;MACG,CAAA;KAER,EAAA,CAAA,EAEL,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,0BAA0B,GAC9C,EAAO,wCAAwC,GACjD,CAAC;KACQ;KACE;KACZ,KAAK;eANP,CAQE,kBAAC,OAAD;MAAK,WAAW,EAAK,GAAG,EAAO,4BAA4B,CAAC,GAAgB,CAAC;MAAG;MAAe,CAAA,EAC9F,KACC,kBAAC,OAAD;MACE,WAAW,EAAK,EAAO,0BAA0B;QAC9C,EAAO,mCAAmC,CAAC;QAC3C,EAAO,mCAAmC,KAAgB,CAAC;OAC7D,CAAC;gBAED;MACG,CAAA,CAEH;OACH;;GACK,CAAA,EACZ,CAAA;EAEI,CAAA,EACM,CAAA,GAnED"}

package/dist/MultiSelectBox-Cuh_o-A1.js

@@ -0,0 +1,189 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { t as n } from "./Checkbox-D6-b_4dC.js";
+import { usePositionedFloaters as r } from "./components/hooks/usePositionedFloaters.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import './assets/MultiSelectBox.css';//#region src/components/MultiSelectBox/MultiSelectBox.module.css
+var d = {
+	"multi-select-box-wrapper": "_multi-select-box-wrapper_wvuay_1",
+	"multi-select-box-trigger": "_multi-select-box-trigger_wvuay_5",
+	"multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--darkBorder_wvuay_22",
+	"multi-select-box-trigger--not-valid": "_multi-select-box-trigger--not-valid_wvuay_26",
+	"multi-select-box-trigger-label": "_multi-select-box-trigger-label_wvuay_40",
+	"multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_wvuay_54",
+	"multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_wvuay_59",
+	"multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_wvuay_63",
+	"multi-select-box-listbox": "_multi-select-box-listbox_wvuay_63",
+	"multi-select-box-listbox-option": "_multi-select-box-listbox-option_wvuay_90",
+	"multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_wvuay_101",
+	"multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_wvuay_112",
+	"multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_wvuay_126"
+}, f = ({ selectData: f, onChange: p, defaultSelectedItems: m, labelSuffix: h = "geselecteerd", disabled: g = !1, fullWidth: _ = !1, darkBorder: v = !1, notValid: y = !1, maxOptionHeight: b, optionPositionRight: x }) => {
+	let S = o(), [C, w] = c(m || []), [T, E] = c(m?.length || 0), [D, O] = c(!1), [k, A] = c(-1), j = s(null), M = s(null), [N, P] = c(null), [F, I] = c(null), { style: L, updatePosition: R } = r(N, F, {
+		mouseEvent: "click",
+		position: "bottomLeft",
+		offset: 4,
+		maxFixedHeight: b,
+		horizontalPosition: x ? "right" : "left",
+		mobileBreakpoint: "28rem",
+		fullWidth: _
+	}), z = i(({ target: e }) => {
+		!e || !j.current || j.current.contains(e) || O(!1);
+	}, [O]), B = i((e) => {
+		switch (e.key) {
+			case "Enter":
+				e.preventDefault(), O(!0);
+				break;
+			case "Escape":
+				D && (e.stopPropagation(), O(!1));
+				break;
+			default: break;
+		}
+	}, [D]), V = i((e) => {
+		if (D) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), A((e) => {
+					let t = e;
+					do
+						t = t < f.length - 1 ? t + 1 : 0;
+					while (f[t]?.disabled);
+					return t;
+				});
+				break;
+			case "ArrowUp":
+				e.preventDefault(), A((e) => {
+					let t = e;
+					do
+						t = t <= 0 ? f.length - 1 : t - 1;
+					while (f[t]?.disabled);
+					return t;
+				});
+				break;
+			case "Enter": {
+				e.preventDefault();
+				let t = f[k];
+				if (!t || t.disabled) break;
+				let n = C.some((e) => e.value === t.value) ? C.filter((e) => e.value !== t.value) : [...C, t];
+				w(n), E(n.length), p(n);
+				break;
+			}
+			case "Tab":
+				e.preventDefault(), O(!1);
+				break;
+			case "Escape":
+				e.stopPropagation(), O(!1);
+				break;
+			default: break;
+		}
+	}, [
+		k,
+		D,
+		f,
+		C,
+		p
+	]), H = (e, t) => {
+		if (t.disabled || e.target.tagName === "INPUT") return;
+		let n = C.some((e) => e.value === t.value) ? C.filter((e) => e.value !== t.value) : [...C, t];
+		w(n), E(n.length), p(n), R();
+	}, U = i((e) => {
+		let { checked: t, value: n } = e.target, r = [...C];
+		if (t) {
+			let e = f.find((e) => e.value === n);
+			e && r.push(e);
+		} else r = r.filter((e) => e.value !== n);
+		w(r), E(r.length), p(r), R();
+	}, [
+		f,
+		C,
+		p
+	]);
+	return a(() => {
+		D && A(0);
+	}, [D]), a(() => {
+		(M.current?.children[k])?.focus();
+	}, [k]), a(() => {
+		if (D) return document.addEventListener("click", z, !0), document.addEventListener("scroll", z, !0), () => {
+			document.removeEventListener("click", z, !0), document.removeEventListener("scroll", z, !0);
+		};
+	}, [z, D]), /* @__PURE__ */ u("div", {
+		className: d["multi-select-box-wrapper"],
+		ref: j,
+		children: [/* @__PURE__ */ u("button", {
+			className: e(d["multi-select-box-trigger"], {
+				[d["multi-select-box-trigger--darkBorder"]]: v,
+				[d["multi-select-box-trigger--not-valid"]]: y
+			}),
+			type: "button",
+			onClick: () => {
+				O(!D);
+			},
+			onKeyDown: B,
+			"aria-expanded": D,
+			"aria-haspopup": "listbox",
+			"aria-label": `${T} ${h}`,
+			disabled: g,
+			...D && { "aria-controls": S },
+			ref: I,
+			children: [/* @__PURE__ */ u("span", {
+				className: d["multi-select-box-trigger-label"],
+				children: [
+					T,
+					" ",
+					h
+				]
+			}), /* @__PURE__ */ l(t, {
+				className: e(d["multi-select-box-trigger-icon"], { [d["multi-select-box-trigger-icon--open"]]: D }),
+				name: "CheveronDown",
+				size: 16
+			})]
+		}), /* @__PURE__ */ l("div", {
+			id: S,
+			className: e(d["multi-select-box-listbox--wrapper"]),
+			style: {
+				...L.style,
+				visibility: D ? "visible" : "hidden"
+			},
+			role: "listbox",
+			ref: P,
+			children: /* @__PURE__ */ l("ul", {
+				className: d["multi-select-box-listbox"],
+				ref: M,
+				children: f.map(({ label: t, value: r, disabled: i }, a) => /* @__PURE__ */ l("li", {
+					className: e(d["multi-select-box-listbox-option"], {
+						[d["multi-select-box-listbox-option--active"]]: a === k,
+						[d["multi-select-box-listbox-option--disabled"]]: i
+					}),
+					role: "option",
+					onKeyDown: V,
+					onClick: (e) => H(e, {
+						label: t,
+						value: r,
+						disabled: i
+					}),
+					onMouseOver: () => A(a),
+					onFocus: () => A(a),
+					tabIndex: 0,
+					"aria-selected": C.some((e) => e.value === r),
+					children: /* @__PURE__ */ u("label", {
+						htmlFor: t,
+						className: d["multi-select-box-listbox-option-content"],
+						tabIndex: -1,
+						children: [/* @__PURE__ */ l(n, {
+							id: `${t}-${S}`,
+							onChange: U,
+							value: r,
+							tabIndex: -1,
+							disabled: i,
+							checked: C.some((e) => e.value === r)
+						}), /* @__PURE__ */ l("span", { children: t })]
+					})
+				}, r))
+			})
+		})]
+	});
+};
+//#endregion
+export { f as t };
+
+//# sourceMappingURL=MultiSelectBox-Cuh_o-A1.js.map

package/dist/MultiSelectBox-Cuh_o-A1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectBox-Cuh_o-A1.js","names":[],"sources":["../src/components/MultiSelectBox/MultiSelectBox.module.css","../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":[".multi-select-box-wrapper {\n  position: relative;\n}\n\n.multi-select-box-trigger {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-500);\n  border-radius: 0.5rem;\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  height: 2.75rem;\n  justify-content: space-between;\n  line-height: inherit;\n  overflow: hidden;\n  padding: 0.4rem 2rem 0.4rem 1rem;\n  position: relative;\n  width: 100%;\n}\n\n.multi-select-box-trigger--darkBorder {\n  border-color: var(--color-uva-black);\n}\n\n.multi-select-box-trigger--not-valid {\n  border-color: var(--color-red-600);\n}\n\n.multi-select-box-trigger:focus-visible {\n  background-color: var(--color-grey-300);\n  outline: 1px solid var(--color-grey-300);\n}\n\n.multi-select-box-trigger:focus-visible,\n.multi-select-box-trigger:hover {\n  background-color: var(--color-grey-300);\n}\n\n.multi-select-box-trigger-label {\n  min-height: 0.65rem;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.multi-select-box-trigger:disabled:hover {\n  background-color: var(--color-uva-white);\n  cursor: not-allowed;\n}\n\n.multi-select-box-trigger-icon {\n  position: absolute;\n  right: 0.875rem;\n}\n\n.multi-select-box-trigger-icon--open {\n  transform: rotate(180deg);\n}\n\n.multi-select-box-listbox--wrapper {\n  border-radius: 0.5rem;\n  box-shadow: 0 0 0.25rem 0 rgba(0 0 0 / 25%);\n  display: flex;\n  height: auto;\n  margin: 0.25rem 0;\n  overflow: hidden;\n  position: fixed;\n  width: auto;\n  z-index: 20;\n}\n\n.multi-select-box-listbox {\n  background-color: var(--color-uva-white);\n  border-radius: var(--border-radius);\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0.25rem;\n  white-space: nowrap;\n  width: fit-content;\n}\n\n.multi-select-box-listbox-option {\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: flex;\n  height: 2.5rem;\n  justify-content: flex-start;\n  position: relative;\n  user-select: none;\n  width: 100%;\n}\n\n.multi-select-box-listbox-option--active,\n.multi-select-box-listbox-option:hover {\n  background-color: var(--color-grey-300);\n  box-shadow: 0 0 0 1px var(--color-uva-white);\n}\n\n.multi-select-box-listbox-option:focus-visible,\n.multi-select-box-listbox-option:hover {\n  background-color: var(--color-grey-300);\n}\n\n.multi-select-box-listbox-option-content {\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  gap: 1rem;\n  padding: 0.75rem;\n  width: 100%;\n}\n\n.multi-select-box-listbox-option:focus-visible {\n  background-color: var(--color-grey-300);\n  outline: 1px solid var(--color-grey-700);\n}\n\n.multi-select-box-listbox-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n","import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n  /** Array of label, values pairs */\n  selectData: MultiSelectData[];\n  /** Retuns selected label, values */\n  onChange: (values: MultiSelectData[]) => void;\n  /** Array of label, value pairs that should be check by default */\n  defaultSelectedItems?: MultiSelectData[];\n  /** Suffix label in the selectbutton '[count] selected' */\n  labelSuffix?: string;\n  /** Disables the multiselect */\n  disabled?: boolean;\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** Dark border. */\n  darkBorder?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n  selectData,\n  onChange,\n  defaultSelectedItems,\n  labelSuffix = 'geselecteerd',\n  disabled = false,\n  fullWidth = false,\n  darkBorder = false,\n  notValid = false,\n  maxOptionHeight,\n  optionPositionRight,\n}: MultiSelectBoxProps) => {\n  const multiselectboxId = useId();\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n  const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const optionListRef = useRef<HTMLUListElement>(null);\n\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const { style: positionStyle, updatePosition } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !wrapperRef.current) return;\n\n      if (!wrapperRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  const onTriggerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>) => {\n      switch (event.key) {\n        case 'Enter':\n          event.preventDefault();\n          setIsOpen(true);\n          break;\n        case 'Escape':\n          if (isOpen) {\n            event.stopPropagation();\n            setIsOpen(false);\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [isOpen]\n  );\n\n  const onOptionKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (!isOpen) return;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'Enter': {\n          event.preventDefault();\n          const selectedItem = selectData[activeIndex];\n          if (!selectedItem || selectedItem.disabled) break;\n          const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n          const updatedSelectedItems = isAlreadySelected\n            ? selectedItems.filter((item) => item.value !== selectedItem.value)\n            : [...selectedItems, selectedItem];\n\n          setSelectedItems(updatedSelectedItems);\n          setSelectedItemsCount(updatedSelectedItems.length);\n          onChange(updatedSelectedItems);\n          break;\n        }\n        case 'Tab':\n          event.preventDefault();\n          setIsOpen(false);\n          break;\n        case 'Escape':\n          event.stopPropagation();\n          setIsOpen(false);\n          break;\n        default:\n          break;\n      }\n    },\n    [activeIndex, isOpen, selectData, selectedItems, onChange]\n  );\n\n  const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n    if (option.disabled) return;\n\n    // Prevent toggle if click originated from the checkbox\n    if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n    const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n    const updatedSelectedItems = isAlreadySelected\n      ? selectedItems.filter((item) => item.value !== option.value)\n      : [...selectedItems, option];\n\n    setSelectedItems(updatedSelectedItems);\n    setSelectedItemsCount(updatedSelectedItems.length);\n    onChange(updatedSelectedItems);\n    updatePosition();\n  };\n\n  const handleSelect = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { checked, value } = event.target;\n      let updatedSelectedItems = [...selectedItems];\n\n      if (checked) {\n        const selectedItem = selectData.find((item) => item.value === value);\n        if (selectedItem) {\n          updatedSelectedItems.push(selectedItem);\n        }\n      } else {\n        updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n      }\n\n      setSelectedItems(updatedSelectedItems);\n      setSelectedItemsCount(updatedSelectedItems.length);\n      onChange(updatedSelectedItems);\n      updatePosition();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectData, selectedItems, onChange]\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      setActiveIndex(0);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n    activeOption?.focus();\n  }, [activeIndex]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    document.addEventListener('click', onMouseEventOutside, true);\n    document.addEventListener('scroll', onMouseEventOutside, true);\n\n    return () => {\n      document.removeEventListener('click', onMouseEventOutside, true);\n      document.removeEventListener('scroll', onMouseEventOutside, true);\n    };\n  }, [onMouseEventOutside, isOpen]);\n\n  return (\n    <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n      <button\n        className={clsx(styles['multi-select-box-trigger'], {\n          [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n          [styles['multi-select-box-trigger--not-valid']]: notValid,\n        })}\n        type=\"button\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedItemsCount} ${labelSuffix}`}\n        disabled={disabled}\n        {...(isOpen && { 'aria-controls': multiselectboxId })}\n        ref={setReferenceElement}\n      >\n        <span className={styles['multi-select-box-trigger-label']}>\n          {selectedItemsCount} {labelSuffix}\n        </span>\n        <Icon\n          className={clsx(styles['multi-select-box-trigger-icon'], {\n            [styles['multi-select-box-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n\n      <div\n        id={multiselectboxId}\n        className={clsx(styles['multi-select-box-listbox--wrapper'])}\n        style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n        role=\"listbox\"\n        ref={setPositionElement}\n      >\n        <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n          {selectData.map(({ label, value, disabled }, index) => (\n            <li\n              className={clsx(styles['multi-select-box-listbox-option'], {\n                [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n                [styles['multi-select-box-listbox-option--disabled']]: disabled,\n              })}\n              key={value}\n              role=\"option\"\n              onKeyDown={onOptionKeyDown}\n              onClick={(event) => onOptionClick(event, { label, value, disabled })}\n              onMouseOver={() => setActiveIndex(index)}\n              onFocus={() => setActiveIndex(index)}\n              tabIndex={0}\n              aria-selected={selectedItems.some((item) => item.value === value)}\n            >\n              <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n                <Checkbox\n                  id={`${label}-${multiselectboxId}`}\n                  onChange={handleSelect}\n                  value={value}\n                  tabIndex={-1}\n                  disabled={disabled}\n                  checked={selectedItems.some((item) => item.value === value)}\n                />\n                <span>{label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/MultiSelectItem-BF5xRjz5.js

@@ -0,0 +1,36 @@
+import { t as e } from "./Checkbox-D6-b_4dC.js";
+import { t } from "./Label-o0BcWTUS.js";
+import { useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import './assets/MultiSelectItem.css';//#region src/components/MultiSelect/MultiSelect.module.css
+var a = {
+	"multi-select": "_multi-select_140gs_1",
+	"multi-select--no-border": "_multi-select--no-border_140gs_7",
+	"multi-select__header": "_multi-select__header_140gs_12",
+	"multi-select__list": "_multi-select__list_140gs_18",
+	"multi-select__list--scrollable": "_multi-select__list--scrollable_140gs_27",
+	"multi-select__item": "_multi-select__item_140gs_32"
+};
+//#endregion
+//#region src/components/MultiSelect/components/MultiSelectItem.tsx
+function o({ label: o, value: s, checked: c, disabled: l = !1, onChange: u }) {
+	let d = n();
+	return /* @__PURE__ */ i("li", {
+		className: a["multi-select__item"],
+		children: [/* @__PURE__ */ r(e, {
+			id: d,
+			value: s,
+			checked: c,
+			onChange: u,
+			disabled: l
+		}), /* @__PURE__ */ r(t, {
+			htmlFor: d,
+			noFontWeight: !c,
+			children: o
+		})]
+	});
+}
+//#endregion
+export { a as n, o as t };
+
+//# sourceMappingURL=MultiSelectItem-BF5xRjz5.js.map

package/dist/MultiSelectItem-BF5xRjz5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectItem-BF5xRjz5.js","names":[],"sources":["../src/components/MultiSelect/MultiSelect.module.css","../src/components/MultiSelect/components/MultiSelectItem.tsx"],"sourcesContent":[".multi-select {\n  border: 1px solid var(--color-uva-black);\n  border-radius: var(--border-radius-default);\n  padding: 0.75rem;\n}\n\n.multi-select--no-border {\n  border: none;\n  padding: 0;\n}\n\n.multi-select__header {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n}\n\n.multi-select__list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.multi-select__list--scrollable {\n  max-height: 8.75rem;\n  overflow: auto;\n}\n\n.multi-select__item {\n  align-items: start;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  user-select: none;\n}\n\n.multi-select__item input[type=\"checkbox\"] {\n  margin-right: 0.75rem;\n  margin-top: 0.25rem;\n}\n\n.multi-select__item input[type=\"checkbox\"]:disabled + label {\n  color: var(--color-grey-500);\n}\n","import { useId } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Checkbox } from 'components/Checkbox';\nimport { Label } from 'components/Label';\n\nexport interface MultiSelectItemProps {\n  label: string;\n  value: string | number;\n  checked: boolean;\n  disabled?: boolean;\n  onChange(event: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport function MultiSelectItem({ label, value, checked, disabled = false, onChange }: MultiSelectItemProps) {\n  const id = useId();\n\n  return (\n    <li className={styles['multi-select__item']}>\n      <Checkbox id={id} value={value} checked={checked} onChange={onChange} disabled={disabled} />\n      <Label htmlFor={id} noFontWeight={!checked}>\n        {label}\n      </Label>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;ACgBA,SAAgB,EAAgB,EAAE,UAAO,UAAO,YAAS,cAAW,IAAO,eAAkC;CAC3G,IAAM,IAAK,GAAO;AAElB,QACE,kBAAC,MAAD;EAAI,WAAW,EAAO;YAAtB,CACE,kBAAC,GAAD;GAAc;GAAW;GAAgB;GAAmB;GAAoB;GAAY,CAAA,EAC5F,kBAAC,GAAD;GAAO,SAAS;GAAI,cAAc,CAAC;aAChC;GACK,CAAA,CACL"}