@uva-glass/component-library 3.57.3 → 3.57.5

package/dist/{AddCatalogueLinkForm-Di0xm7Ep.js → AddCatalogueLinkForm-CvJoaUFz.js}

@@ -1,6 +1,6 @@
 import { Button as e } from "./components/Buttons/Button.js";
 import { t } from "./Label-52ny6d06.js";
-import { t as n } from "./Repeater-BAEfOMZI.js";
+import { t as n } from "./Repeater-DUo13Mq6.js";
 import { t as r } from "./FormField-ByjTkKKq.js";
 import { t as i } from "./InputField-asFsxHvx.js";
 import { useLanguage as a } from "./components/RteEditor/Providers/LanguageProvider.js";
@@ -113,4 +113,4 @@ import './assets/AddCatalogueLinkForm.css';var f = {
 //#endregion
 export { p as t };
 
-//# sourceMappingURL=AddCatalogueLinkForm-Di0xm7Ep.js.map
+//# sourceMappingURL=AddCatalogueLinkForm-CvJoaUFz.js.map

package/dist/{AddCatalogueLinkForm-Di0xm7Ep.js.map → AddCatalogueLinkForm-CvJoaUFz.js.map}

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

package/dist/{DataTable-Cgn_RKTA.js → DataTable-UslvEf3c.js}

@@ -4,27 +4,28 @@ import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState a
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import './assets/DataTable.css';//#region src/components/DataTable/DataTable.module.css
 var l = {
-	"data-table__container": "_data-table__container_rlt5w_1",
-	"data-table__spacer": "_data-table__spacer_rlt5w_8",
-	"data-table": "_data-table_rlt5w_1",
-	"data-table--virtualized": "_data-table--virtualized_rlt5w_21",
-	"data-table__row": "_data-table__row_rlt5w_30",
-	"data-table__header-row": "_data-table__header-row_rlt5w_31",
-	"data-table__row--active": "_data-table__row--active_rlt5w_40",
-	"data-table__cell": "_data-table__cell_rlt5w_48",
-	"data-table__sticky-header": "_data-table__sticky-header_rlt5w_56",
-	"data-table__empty-state": "_data-table__empty-state_rlt5w_75"
-}, u = 4, d = ({ data: d, columns: f, stickyHeader: p = !1, virtualize: m = null, activeKeys: h = [], noDataMessage: g = "No data to display" }) => {
-	let _ = a(null), v = a(null), y = a(null), b = a(null), { visibleItems: x, totalHeight: S, offsetTop: C, onScroll: w, setContainerHeight: T } = t({
+	"data-table__container": "_data-table__container_16fjc_1",
+	"data-table__spacer": "_data-table__spacer_16fjc_8",
+	"data-table": "_data-table_16fjc_1",
+	"data-table--virtualized": "_data-table--virtualized_16fjc_21",
+	"data-table__row": "_data-table__row_16fjc_30",
+	"data-table__header-row": "_data-table__header-row_16fjc_31",
+	"data-table__row--hoverable": "_data-table__row--hoverable_16fjc_46",
+	"data-table__row--active": "_data-table__row--active_16fjc_50",
+	"data-table__cell": "_data-table__cell_16fjc_58",
+	"data-table__sticky-header": "_data-table__sticky-header_16fjc_65",
+	"data-table__empty-state": "_data-table__empty-state_16fjc_84"
+}, u = 4, d = ({ data: d, columns: f, stickyHeader: p = !1, virtualize: m = null, activeKeys: h = [], noDataMessage: g = "No data to display", noHover: _ = !1 }) => {
+	let v = a(null), y = a(null), b = a(null), x = a(null), { visibleItems: S, totalHeight: C, offsetTop: w, onScroll: T, setContainerHeight: E } = t({
 		rowHeight: m?.rowHeight ?? 0,
 		buffer: m?.buffer ?? u,
 		totalItems: d.length
-	}), E = a(!1), D = a(!1), [O, k] = o([]), A = i(() => {
+	}), D = a(!1), O = a(!1), [k, A] = o([]), j = i(() => {
 		if (!f) return {
 			visibleRows: d,
 			rowsToRender: d
 		};
-		let e = m ? x.map((e) => d[e]) : d;
+		let e = m ? S.map((e) => d[e]) : d;
 		return {
 			visibleRows: e.map((e) => {
 				let t = {};
@@ -38,44 +39,44 @@ var l = {
 		f,
 		d,
 		m,
-		x
-	]), j = n((e) => {
+		S
+	]), M = n((e) => {
 		if (!m) return;
 		let t = e.currentTarget.scrollTop;
-		E.current || (E.current = !0, requestAnimationFrame(() => {
-			w({ currentTarget: { scrollTop: t } }), E.current = !1;
+		D.current || (D.current = !0, requestAnimationFrame(() => {
+			T({ currentTarget: { scrollTop: t } }), D.current = !1;
 		}));
-	}, [m, w]), M = (e, t) => typeof e == "function" ? e(t) : e;
+	}, [m, T]), N = (e, t) => typeof e == "function" ? e(t) : e;
 	return r(() => {
-		if (!m || !_.current) return;
+		if (!m || !v.current) return;
 		let e = () => {
-			let e = _.current?.parentElement?.clientHeight ?? 0;
-			D.current || (D.current = !0, requestAnimationFrame(() => {
-				T(e), D.current = !1;
+			let e = v.current?.parentElement?.clientHeight ?? 0;
+			O.current || (O.current = !0, requestAnimationFrame(() => {
+				E(e), O.current = !1;
 			}));
 		};
 		return window.addEventListener("resize", e), () => {
 			window.removeEventListener("resize", e);
 		};
-	}, [m, T]), r(() => {
-		_.current && T(_.current.parentElement?.clientHeight ?? 0);
-	}, [T]), r(() => {
-		_.current?.scrollTo({ top: 0 });
+	}, [m, E]), r(() => {
+		v.current && E(v.current.parentElement?.clientHeight ?? 0);
+	}, [E]), r(() => {
+		v.current?.scrollTo({ top: 0 });
 	}, [d]), r(() => {
-		if (!p || !b.current) return;
+		if (!p || !x.current) return;
 		let e = () => {
-			let e = b.current?.querySelector("tr");
+			let e = x.current?.querySelector("tr");
 			if (!e) return;
-			let t = e.querySelectorAll("td");
-			k(Array.from(t).map((e) => e.getBoundingClientRect().width));
+			let t = e.querySelectorAll("td"), n = Array.from(t).map((e) => e.getBoundingClientRect().width);
+			A(n);
 		}, t = new ResizeObserver(() => {
 			requestAnimationFrame(e);
 		});
-		return t.observe(b.current), e(), () => t.disconnect();
-	}, [p, A.visibleRows]), d.length ? /* @__PURE__ */ c("div", {
+		return t.observe(x.current), e(), () => t.disconnect();
+	}, [p, j.visibleRows]), d.length ? /* @__PURE__ */ c("div", {
 		className: l["data-table__container"],
-		onScroll: j,
-		ref: _,
+		onScroll: M,
+		ref: v,
 		children: [
 			m && p && f && /* @__PURE__ */ s("table", {
 				className: l["data-table--virtualized"],
@@ -83,9 +84,9 @@ var l = {
 					className: l["data-table__sticky-header"],
 					children: /* @__PURE__ */ s("tr", {
 						className: l["data-table__header-row"],
-						ref: y,
+						ref: b,
 						children: f && f.map((e, t) => {
-							let n = O[t] ? `${O[t]}px` : e.fixedWidth;
+							let n = k[t] ? `${k[t]}px` : e.fixedWidth;
 							return /* @__PURE__ */ s("th", {
 								className: l["data-table__cell"],
 								style: {
@@ -93,7 +94,7 @@ var l = {
 									minWidth: n,
 									maxWidth: n
 								},
-								children: M(e?.label)
+								children: N(e?.label)
 							}, e.key);
 						})
 					})
@@ -101,32 +102,35 @@ var l = {
 			}),
 			/* @__PURE__ */ s("div", {
 				className: l["data-table__spacer"],
-				style: { height: S }
+				style: { height: C }
 			}),
 			/* @__PURE__ */ c("table", {
 				className: l["data-table"],
-				style: m ? { transform: `translateY(${C}px)` } : void 0,
+				style: m ? { transform: `translateY(${w}px)` } : void 0,
 				children: [/* @__PURE__ */ s("thead", {
 					className: e({ [l["data-table__sticky-header"]]: p }),
-					ref: v,
+					ref: y,
 					children: /* @__PURE__ */ s("tr", {
 						className: l["data-table__header-row"],
 						children: !m || !p ? f && f.map((e, t) => {
-							let n = O[t] ? `${O[t]}px` : e.fixedWidth;
+							let n = k[t] ? `${k[t]}px` : e.fixedWidth;
 							return /* @__PURE__ */ s("th", {
 								className: l["data-table__cell"],
 								style: { width: n },
-								children: M(e?.label)
+								children: N(e?.label)
 							}, e.key);
 						}) : /* @__PURE__ */ s("th", {
 							colSpan: f?.length,
-							style: { height: y.current?.clientHeight }
+							style: { height: b.current?.clientHeight }
 						})
 					})
 				}), /* @__PURE__ */ s("tbody", {
-					ref: b,
-					children: A.visibleRows.map((t, n) => /* @__PURE__ */ s("tr", {
-						className: e(l["data-table__row"], { [l["data-table__row--active"]]: h?.includes(A.rowsToRender[n].id) }),
+					ref: x,
+					children: j.visibleRows.map((t, n) => /* @__PURE__ */ s("tr", {
+						className: e(l["data-table__row"], {
+							[l["data-table__row--active"]]: h.includes(j.rowsToRender[n].id),
+							[l["data-table__row--hoverable"]]: !_
+						}),
 						children: Object.entries(t).map(([e]) => {
 							let t = f?.find((t) => t.key === e);
 							return /* @__PURE__ */ s("td", {
@@ -136,10 +140,10 @@ var l = {
 									height: m ? m.rowHeight : void 0,
 									maxHeight: m ? m.rowHeight : void 0
 								},
-								children: M(t?.cell, A.rowsToRender[n])
+								children: N(t?.cell, j.rowsToRender[n])
 							}, e);
 						})
-					}, A.rowsToRender[n].id))
+					}, j.rowsToRender[n].id))
 				})]
 			})
 		]
@@ -151,4 +155,4 @@ var l = {
 //#endregion
 export { d as t };
 
-//# sourceMappingURL=DataTable-Cgn_RKTA.js.map
+//# sourceMappingURL=DataTable-UslvEf3c.js.map

package/dist/DataTable-UslvEf3c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable-UslvEf3c.js","names":[],"sources":["../src/components/DataTable/DataTable.module.css","../src/components/DataTable/DataTable.tsx"],"sourcesContent":[".data-table__container {\n  height: 100%;\n  overflow-y: auto;\n  position: relative;\n  width: 100%;\n}\n\n.data-table__spacer {\n  background-color: transparent;\n  width: 0.0625rem;\n}\n\n.data-table {\n  border-collapse: collapse;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.data-table--virtualized {\n  border-collapse: collapse;\n  left: 0;\n  position: sticky;\n  top: 0;\n  width: 100%;\n  z-index: 10;\n}\n\n.data-table__row,\n.data-table__header-row {\n  background-color: var(--color-uva-white);\n  border-bottom: 0.0625rem solid var(--color-grey-300);\n}\n\n.data-table__header-row {\n  border-left: 0.0625rem solid transparent;\n  border-right: 0.0625rem solid transparent;\n}\n\n.data-table__row {\n  border-left: 0.0625rem solid var(--color-grey-300);\n  border-right: 0.0625rem solid var(--color-grey-300);\n}\n\n.data-table__row--hoverable:hover {\n  background-color: var(--color-grey-200);\n}\n\n.data-table__row--active {\n  background-color: var(--color-navy-100);\n}\n\n.data-table__row--active.data-table__row--hoverable:hover {\n  background-color: var(--color-navy-200);\n}\n\n.data-table__cell {\n  overflow: hidden;\n  padding: 0.6875rem 0.75rem;\n  text-align: left;\n  vertical-align: baseline;\n}\n\n.data-table__sticky-header {\n  background-color: var(--color-uva-white);\n  left: 0;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.data-table__sticky-header::after {\n  border-bottom: 0.0625rem solid var(--color-grey-300);\n  content: \"\";\n  display: block;\n  height: 0.0625rem;\n  left: 0;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n}\n\n.data-table__empty-state {\n  color: var(--color-grey-600);\n  font-size: 1rem;\n  padding: 2rem;\n  text-align: center;\n}\n","import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport styles from './DataTable.module.css';\r\nimport { useVirtualScroll } from './hooks/useVirtualScroll';\r\n\r\ntype DataTablePrimitive = string | number | boolean | null | undefined;\r\ntype DataTableRow = Record<string, DataTablePrimitive>;\r\nexport type DataTableColumnContent<TRow extends object> = ReactNode | ((row: TRow) => ReactNode);\r\ntype DataTableColumn<TRow extends object> = {\r\n  key: Extract<keyof TRow, string>;\r\n  label?: ReactNode | ((row: TRow) => ReactNode);\r\n  cell?: ReactNode | ((row: TRow) => ReactNode);\r\n  fixedWidth?: string;\r\n};\r\ntype DataRow<TRow extends object> = { visibleRows: Partial<TRow>[]; rowsToRender: TRow[] };\r\n\r\nexport type DataTableProps<TRow extends { id: string | number } = DataTableRow & { id: string | number }> = {\r\n  /** The data to be displayed in the table */\r\n  data: TRow[];\r\n  /** The columns configuration for the table */\r\n  columns?: DataTableColumn<TRow>[];\r\n  /** Whether the table header should be sticky */\r\n  stickyHeader?: boolean;\r\n  /** Virtualization settings for the table */\r\n  virtualize?: {\r\n    /** The height of each row in pixels */\r\n    rowHeight: number;\r\n    /** The number of additional rows to render above and below the visible area for smoother scrolling */\r\n    buffer?: number;\r\n  } | null;\r\n  /** The keys in the data objects that indicate whether a row is active (for styling purposes) */\r\n  activeKeys?: (string | number)[];\r\n  /** Message to display when there is no data */\r\n  noDataMessage?: string;\r\n  /** Disable hover styling on rows */\r\n  noHover?: boolean;\r\n};\r\n\r\nconst DEFAULT_BUFFER = 4;\r\n\r\nexport const DataTable = <TRow extends { id: string | number } = DataTableRow & { id: string | number }>({\r\n  data,\r\n  columns,\r\n  stickyHeader = false,\r\n  virtualize = null,\r\n  activeKeys = [],\r\n  noDataMessage = 'No data to display',\r\n  noHover = false,\r\n}: DataTableProps<TRow>) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const headerRef = useRef<HTMLTableSectionElement>(null);\r\n  const headerRowRef = useRef<HTMLTableRowElement>(null);\r\n  const tbodyRef = useRef<HTMLTableSectionElement>(null);\r\n  const { visibleItems, totalHeight, offsetTop, onScroll, setContainerHeight } = useVirtualScroll({\r\n    rowHeight: virtualize?.rowHeight ?? 0,\r\n    buffer: virtualize?.buffer ?? DEFAULT_BUFFER,\r\n    totalItems: data.length,\r\n  });\r\n  const throttling = useRef(false);\r\n  const resizeThrottling = useRef(false);\r\n  const [columnWidths, setColumnWidths] = useState<number[]>([]);\r\n\r\n  const tableData: DataRow<TRow> = useMemo(() => {\r\n    if (!columns) return { visibleRows: data, rowsToRender: data };\r\n    const rowsToRender = virtualize ? visibleItems.map((index) => data[index]) : data;\r\n    const visibleRows = rowsToRender.map((row) => {\r\n      const newRow: Partial<TRow> = {};\r\n      columns.forEach((col) => {\r\n        newRow[col.key] = row[col.key];\r\n      });\r\n      return newRow;\r\n    });\r\n    return { visibleRows, rowsToRender };\r\n  }, [columns, data, virtualize, visibleItems]);\r\n\r\n  const handleScroll = useCallback(\r\n    (event: UIEvent<HTMLDivElement>) => {\r\n      if (!virtualize) return;\r\n\r\n      const scrollTop = event.currentTarget.scrollTop;\r\n\r\n      if (!throttling.current) {\r\n        throttling.current = true;\r\n\r\n        requestAnimationFrame(() => {\r\n          onScroll({ currentTarget: { scrollTop } } as UIEvent<HTMLElement>);\r\n          throttling.current = false;\r\n        });\r\n      }\r\n    },\r\n    [virtualize, onScroll]\r\n  );\r\n\r\n  const onRenderValue = (value: ((row: TRow) => ReactNode) | ReactNode, row?: TRow) =>\r\n    typeof value === 'function' ? value(row!) : value;\r\n\r\n  useEffect(() => {\r\n    if (!virtualize || !containerRef.current) {\r\n      return;\r\n    }\r\n\r\n    const handleResize = () => {\r\n      const containerHeight = containerRef.current?.parentElement?.clientHeight ?? 0;\r\n\r\n      if (!resizeThrottling.current) {\r\n        resizeThrottling.current = true;\r\n\r\n        requestAnimationFrame(() => {\r\n          setContainerHeight(containerHeight);\r\n          resizeThrottling.current = false;\r\n        });\r\n      }\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n\r\n    return () => {\r\n      window.removeEventListener('resize', handleResize);\r\n    };\r\n  }, [virtualize, setContainerHeight]);\r\n\r\n  useEffect(() => {\r\n    if (containerRef.current) {\r\n      setContainerHeight(containerRef.current.parentElement?.clientHeight ?? 0);\r\n    }\r\n  }, [setContainerHeight]);\r\n\r\n  useEffect(() => {\r\n    containerRef.current?.scrollTo({ top: 0 });\r\n  }, [data]);\r\n\r\n  useEffect(() => {\r\n    if (!stickyHeader || !tbodyRef.current) return;\r\n\r\n    const measureWidths = () => {\r\n      const firstRow = tbodyRef.current?.querySelector('tr');\r\n      if (!firstRow) return;\r\n\r\n      const cells = firstRow.querySelectorAll('td');\r\n      const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);\r\n\r\n      setColumnWidths(widths);\r\n    };\r\n\r\n    const observer = new ResizeObserver(() => {\r\n      requestAnimationFrame(measureWidths);\r\n    });\r\n\r\n    observer.observe(tbodyRef.current);\r\n\r\n    measureWidths();\r\n\r\n    return () => observer.disconnect();\r\n  }, [stickyHeader, tableData.visibleRows]);\r\n\r\n  return data.length ? (\r\n    <div className={styles['data-table__container']} onScroll={handleScroll} ref={containerRef}>\r\n      {/* sticky header if virtualized  */}\r\n      {virtualize && stickyHeader && columns && (\r\n        <table className={styles['data-table--virtualized']}>\r\n          <thead className={styles['data-table__sticky-header']}>\r\n            <tr className={styles['data-table__header-row']} ref={headerRowRef}>\r\n              {columns &&\r\n                columns.map((column, index) => {\r\n                  const forcedWidth = columnWidths[index] ? `${columnWidths[index]}px` : column.fixedWidth;\r\n                  return (\r\n                    <th\r\n                      key={column.key}\r\n                      className={styles['data-table__cell']}\r\n                      style={{\r\n                        width: forcedWidth,\r\n                        minWidth: forcedWidth,\r\n                        maxWidth: forcedWidth,\r\n                      }}\r\n                    >\r\n                      {onRenderValue(column?.label)}\r\n                    </th>\r\n                  );\r\n                })}\r\n            </tr>\r\n          </thead>\r\n        </table>\r\n      )}\r\n\r\n      <div className={styles['data-table__spacer']} style={{ height: totalHeight }} />\r\n      <table\r\n        className={styles['data-table']}\r\n        style={virtualize ? { transform: `translateY(${offsetTop}px)` } : undefined}\r\n      >\r\n        {/* header */}\r\n        <thead className={clsx({ [styles['data-table__sticky-header']]: stickyHeader })} ref={headerRef}>\r\n          <tr className={styles['data-table__header-row']}>\r\n            {!virtualize || !stickyHeader ? (\r\n              columns &&\r\n              columns.map((column, index) => {\r\n                const forcedWidth = columnWidths[index] ? `${columnWidths[index]}px` : column.fixedWidth;\r\n                return (\r\n                  <th key={column.key} className={styles['data-table__cell']} style={{ width: forcedWidth }}>\r\n                    {onRenderValue(column?.label)}\r\n                  </th>\r\n                );\r\n              })\r\n            ) : (\r\n              <th colSpan={columns?.length} style={{ height: headerRowRef.current?.clientHeight }} />\r\n            )}\r\n          </tr>\r\n        </thead>\r\n\r\n        {/* data rows */}\r\n        <tbody ref={tbodyRef}>\r\n          {tableData.visibleRows.map((row, index) => (\r\n            <tr\r\n              key={tableData.rowsToRender[index].id}\r\n              className={clsx(styles['data-table__row'], {\r\n                [styles['data-table__row--active']]: activeKeys.includes(tableData.rowsToRender[index].id),\r\n                [styles['data-table__row--hoverable']]: !noHover,\r\n              })}\r\n            >\r\n              {Object.entries(row as Record<string, unknown>).map(([key]) => {\r\n                const column = columns?.find((col) => col.key === key);\r\n                return (\r\n                  <td\r\n                    key={key}\r\n                    className={styles['data-table__cell']}\r\n                    style={{\r\n                      width: column?.fixedWidth,\r\n                      height: virtualize ? virtualize.rowHeight : undefined,\r\n                      maxHeight: virtualize ? virtualize.rowHeight : undefined,\r\n                    }}\r\n                  >\r\n                    {onRenderValue(column?.cell, tableData.rowsToRender[index])}\r\n                  </td>\r\n                );\r\n              })}\r\n            </tr>\r\n          ))}\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  ) : (\r\n    <div className={styles['data-table__empty-state']}>{noDataMessage}</div>\r\n  );\r\n};\r\n"],"mappings":"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"}

package/dist/{FeedbackBar-DEDpoNy7.js → FeedbackBar-DsOWAAGt.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-C67XSbzZ.js";
 import { Icon as t } from "./components/Icon/Icon.js";
-import { t as n } from "./Repeater-BAEfOMZI.js";
+import { t as n } from "./Repeater-DUo13Mq6.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
@@ -40,4 +40,4 @@ var s = {
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=FeedbackBar-DEDpoNy7.js.map
+//# sourceMappingURL=FeedbackBar-DsOWAAGt.js.map

package/dist/{FeedbackBar-DEDpoNy7.js.map → FeedbackBar-DsOWAAGt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBar-DEDpoNy7.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,EAAK;CAEhD,QAAgB;EACd,EAAa,EAAI;CACnB,GAAG,CAAC,CAAC;CAEL,IAAM,UAAc;EAClB,EAAa,EAAK;CACpB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW,EAAO,iBAAiB,GAAG,EAAO,2BAA2B,EAAU,CAAC;EAAG,MAAK;YAA3G,CACE,kBAAC,GAAD;GAAU,eAAc;aAAxB,CACE,kBAAC,GAAD;IAAM,WAAW,EAAW,EAAO,qBAAqB;IAAG,MAAK;GAAe,CAAA,GAC9E,CACO;MACV,kBAAC,UAAD;GAAQ,WAAW,EAAW,EAAO,6BAA6B;GAAG,MAAK;GAAS,SAAS;aAC1F,kBAAC,GAAD;IAAM,MAAK;IAAQ,MAAM;GAAK,CAAA;EACxB,CAAA,CACL;;AAET"}
+{"version":3,"file":"FeedbackBar-DsOWAAGt.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,EAAK;CAEhD,QAAgB;EACd,EAAa,EAAI;CACnB,GAAG,CAAC,CAAC;CAEL,IAAM,UAAc;EAClB,EAAa,EAAK;CACpB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW,EAAO,iBAAiB,GAAG,EAAO,2BAA2B,EAAU,CAAC;EAAG,MAAK;YAA3G,CACE,kBAAC,GAAD;GAAU,eAAc;aAAxB,CACE,kBAAC,GAAD;IAAM,WAAW,EAAW,EAAO,qBAAqB;IAAG,MAAK;GAAe,CAAA,GAC9E,CACO;MACV,kBAAC,UAAD;GAAQ,WAAW,EAAW,EAAO,6BAA6B;GAAG,MAAK;GAAS,SAAS;aAC1F,kBAAC,GAAD;IAAM,MAAK;IAAQ,MAAM;GAAK,CAAA;EACxB,CAAA,CACL;;AAET"}