@uva-glass/component-library 3.55.7 → 3.55.8

package/dist/{Accordion-DvblEUVu.js → Accordion-DaCqVof1.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BD2qMUU1.js";
+import { t as e } from "./clsx-BWCAbrjV.js";
 import { Icon as t } from "./components/Icon/Icon.js";
 import { forwardRef as n, useId as r, useImperativeHandle as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -65,4 +65,4 @@ import './assets/Accordion.css';var c = {
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=Accordion-DvblEUVu.js.map
+//# sourceMappingURL=Accordion-DaCqVof1.js.map

package/dist/{Accordion-DvblEUVu.js.map → Accordion-DaCqVof1.js.map}

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

package/dist/{AccordionCard-BXy-plB7.js → AccordionCard-CD5H9gR1.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BD2qMUU1.js";
+import { t as e } from "./clsx-BWCAbrjV.js";
 import { Icon as t } from "./components/Icon/Icon.js";
 import { useId as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
@@ -40,4 +40,4 @@ var o = {
 //#endregion
 export { s as t };
 
-//# sourceMappingURL=AccordionCard-BXy-plB7.js.map
+//# sourceMappingURL=AccordionCard-CD5H9gR1.js.map

package/dist/{AccordionCard-BXy-plB7.js.map → AccordionCard-CD5H9gR1.js.map}

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

package/dist/{ActionList-O9w1hqNg.js → ActionList-C0hD9noC.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BD2qMUU1.js";
+import { t as e } from "./clsx-BWCAbrjV.js";
 import { Icon as t } from "./components/Icon/Icon.js";
 import { MenuButton as n } from "./components/Buttons/MenuButton.js";
 import { Children as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
@@ -92,4 +92,4 @@ function p({ label: p, prefixIcon: m, iconName: h, variant: g = "secondary", chi
 //#endregion
 export { p as t };
 
-//# sourceMappingURL=ActionList-O9w1hqNg.js.map
+//# sourceMappingURL=ActionList-C0hD9noC.js.map

package/dist/{ActionList-O9w1hqNg.js.map → ActionList-C0hD9noC.js.map}

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

package/dist/{AddCatalogueLinkForm-rph4K9P0.js → AddCatalogueLinkForm-DNv2tEdF.js}

@@ -1,8 +1,8 @@
 import { Button as e } from "./components/Buttons/Button.js";
-import { t } from "./Label-o0BcWTUS.js";
-import { t as n } from "./Repeater-BhkTEUai.js";
-import { t as r } from "./FormField-BZSoQdp9.js";
-import { t as i } from "./InputField-BWAy19w9.js";
+import { t } from "./Label-D0ACrYG3.js";
+import { t as n } from "./Repeater-Bnoqqz0X.js";
+import { t as r } from "./FormField-CcV84TfI.js";
+import { t as i } from "./InputField-T01uazlI.js";
 import { useLanguage as a } from "./components/RteEditor/Providers/LanguageProvider.js";
 import { useTranslation as o } from "./components/RteEditor/hooks/useTranslation.js";
 import { useEffect as s, useId as c, useRef as l } from "react";
@@ -113,4 +113,4 @@ import './assets/AddCatalogueLinkForm.css';var f = {
 //#endregion
 export { p as t };
 
-//# sourceMappingURL=AddCatalogueLinkForm-rph4K9P0.js.map
+//# sourceMappingURL=AddCatalogueLinkForm-DNv2tEdF.js.map

package/dist/{AddCatalogueLinkForm-rph4K9P0.js.map → AddCatalogueLinkForm-DNv2tEdF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AddCatalogueLinkForm-rph4K9P0.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":";;;;;;;;;;;;;;;;;;GCqCa,KAAwB,EACnC,aACA,mBACA,oBACA,mBACA,kBAC+B;CAC/B,IAAM,IAAI,GAAgB,EACpB,IAAW,UAAU,GAAO,IAC5B,IAAiB,EAAyB,KAAK,EAC/C,IAAgB,EAAuB,KAAK,EAC5C,EAAE,uBAAoB,GAAa,EAEnC,KAAgB,MAA+C;EACnE,IAAM,IAAQ,EAAM,OAAO;EAC3B,AAAI,KACF,EAAgB,GAAO,EAAS;IAI9B,UAAoB;EACxB,GAAgB;IAGZ,KAAiB,MAA2C;EAChE,AAAI,EAAM,QAAQ,gBAChB,EAAM,gBAAgB,GACJ,EAAc,SACE,cAA2B,SAAS,GACtD,OAAO;IAIrB,KACJ,GACA,GACA,GACA,MACG;EACH,QAAQ,EAAM,KAAd;GACE,KAAK;IAGH,AAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,GAAa;IACb;GACF,KAAK;IAEH,AADA,EAAM,gBAAgB,EACtB,KAAY,EAAS,GAAM,GAAM,EAAS;IAC1C;GACF,KAAK;IAIH,AAHA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EAEvB,EAD0B,cAAc,oBACJ,OAAO;IAC3C;GAEF,KAAK;IAIH,AAHA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EAEvB,EAD8B,cAAc,wBACJ,OAAO;IAC/C;GAEF,KAAK;IAEH,AADA,EAAM,gBAAgB,EACtB,GAAa;IACb;GACF;IACE,EAAM,gBAAgB;IACtB;;;CAaN,OATA,QAAgB;EACd,AAAI,EAAe,YACjB,EAAgB,IAAI,EAAS,EAC7B,EAAe,QAAQ,QAAQ,IAC/B,EAAe,QAAQ,OAAO;IAG/B,EAAE,CAAC,EAGJ,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,GAAD;GAAU,KAAI;aAAd;IACE,kBAAC,GAAD;KAAW,WAAW,EAAO;eAA7B,CACE,kBAAC,GAAD;MAAO,SAAS;gBACb,EAAE,eAAe,MAAa,WAAW,2BAA2B;MAC/D,CAAA,EACR,kBAAC,OAAD;MAAK,WAAW,EAAO;gBACrB,kBAAC,GAAD;OACE,IAAI;OACJ,aAAa,EAAE,eAAe;OAC9B,UAAU;OACV,WAAW;OACX,KAAK;OACL,cAAY,EAAE,KAAK,OAAO;OAC1B,CAAA;MACE,CAAA,CACI;;IACX,KAAkB,EAAe,UAAU,aAC1C,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAoC,EAAE,eAAe;KAAc,CAAA;IAE3F,KAAkB,EAAe,QAAQ,WAAW,KAAK,EAAe,UAAU,WACjF,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAoC,EAAE,eAAe;KAAgB,CAAA;IAE7F,KAAkB,EAAe,QAAQ,SAAS,KACjD,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACE,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,QAAD,EAAA,UAEI,EAAE,eACA,MAAa,WAAW,kCAAkC,qCAGzD,CAAA,EACP,kBAAC,QAAD,EAAA,UAAO,EAAE,eAAe,gBAAsB,CAAA,CAC1C;SACN,kBAAC,OAAD;MAAK,WAAW,EAAO;MAA4B,KAAK;gBACrD,EAAe,QAAQ,KAAK,EAAE,OAAI,SAAM,cACvC,kBAAC,UAAD;OAEE,MAAK;OACL,WAAW,EAAO;OAClB,eAAe,KAAY,EAAS,GAAM,EAAK,IAAkB,EAAS;OAC1E,YAAY,MAAU,EAAgB,GAAO,GAAM,EAAK,IAAkB,EAAS;OACnF,UAAU;OACV,cAAY,GAAG,EAAK,GAAG,EAAK;iBAP9B,CASE,kBAAC,QAAD,EAAA,UAAO,GAAY,CAAA,EACnB,kBAAC,QAAD,EAAA,UAAO,EAAK,IAAwB,CAAA,CAC7B;SAVF,EAUE,CACT;MACE,CAAA,CACF;;IAEC;MACX,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,GAAD;IAAQ,SAAS;IAAa,SAAS;IAAa,cAAY,EAAE,OAAO;IAAQ,MAAK;cACnF,EAAE,OAAO;IACH,CAAA;GACL,CAAA,CACF"}
+{"version":3,"file":"AddCatalogueLinkForm-DNv2tEdF.js","names":[],"sources":["../src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.module.css","../src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.tsx"],"sourcesContent":[".courselinkform {\n  font-family: inherit;\n  font-size: inherit;\n  width: 30rem;\n}\n\n.courselinkform__input-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.courselinkform__footer {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n  margin-top: 1rem;\n}\n\n.courselinkform__results-wrapper {\n  position: relative;\n}\n\n.courselinkform__results-header {\n  align-items: center;\n  display: flex;\n  font-size: var(--font-size-text-base);\n  gap: 0.5rem;\n  padding: 0.5rem;\n  text-align: left;\n  width: 100%;\n}\n\n.courselinkform__results {\n  border: 1px solid var(--color-grey-300);\n  border-radius: 0.25rem;\n  max-height: 10rem;\n  overflow-y: auto;\n}\n\n.courselinkform__result-message {\n  align-items: center;\n  color: var(--color-grey-600);\n  display: flex;\n  font-size: var(--font-size-text-non-essential);\n  height: 2rem;\n  justify-content: flex-start;\n  padding: 0 0.5rem;\n}\n\n.courselinkform__result-item {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-text-base);\n  gap: 0.5rem;\n  min-height: 2.5rem;\n  padding: 0.5rem;\n  text-align: left;\n  width: 100%;\n}\n\n.courselinkform__results-header span,\n.courselinkform__result-item span {\n  line-height: 1.4;\n  width: calc(100% - 9rem);\n}\n\n.courselinkform__results-header span:first-child,\n.courselinkform__result-item span:first-child {\n  width: 9rem;\n}\n\n.courselinkform__result-item:focus-visible {\n  background-color: var(--color-grey-300);\n  outline: none;\n}\n\n.courselinkform__result-item:hover,\n.courselinkform__result-item:focus-visible {\n  background-color: var(--color-grey-300);\n}\n\n.courselinkform__result-item:not(:last-child) {\n  border-bottom: 1px solid var(--color-grey-300);\n}\n","import { useEffect, useId, useRef } from 'react';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\n\r\nimport styles from './AddCatalogueLinkForm.module.css';\r\n\r\nimport { Button } from 'components/Buttons';\r\nimport { FormField } from 'components/FormField';\r\nimport { Label } from 'components/Label';\r\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\r\nimport { InputField } from 'components/InputField';\r\nimport { useLanguage } from 'components/RteEditor/Providers/LanguageProvider';\r\nimport { Repeater } from 'components/Repeater';\r\n\r\ntype SearchResult = {\r\n  code: string;\r\n  id: string;\r\n  name: {\r\n    EN: string;\r\n    NL: string;\r\n  };\r\n  programmeType: string;\r\n};\r\n\r\nexport type SearchResponse = {\r\n  state: 'idle' | 'pending' | 'ready';\r\n  results: SearchResult[];\r\n};\r\n\r\ninterface AddCatalogueLinkFormProps {\r\n  linkType: 'course' | 'programme';\r\n  onCloseHandler: () => void;\r\n  onSearchHandler: (query: string, type: 'course' | 'programme') => void;\r\n  searchResponse?: SearchResponse;\r\n  onSelect?: (code: string, label: string, type: 'course' | 'programme') => void;\r\n}\r\n\r\nexport const AddCatalogueLinkForm = ({\r\n  linkType,\r\n  onCloseHandler,\r\n  onSearchHandler,\r\n  searchResponse,\r\n  onSelect,\r\n}: AddCatalogueLinkFormProps) => {\r\n  const t = useTranslation();\r\n  const searchId = `search_${useId()}`;\r\n  const searchFieldRef = useRef<HTMLInputElement>(null);\r\n  const resultListRef = useRef<HTMLDivElement>(null);\r\n  const { currentLanguage } = useLanguage();\r\n\r\n  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const query = event.target.value;\r\n    if (onSearchHandler) {\r\n      onSearchHandler(query, linkType);\r\n    }\r\n  };\r\n\r\n  const handleClose = () => {\r\n    onCloseHandler();\r\n  };\r\n\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n    if (event.key === 'ArrowDown') {\r\n      event.preventDefault();\r\n      const container = resultListRef.current;\r\n      const firstFocusable = container?.querySelector<HTMLElement>('button');\r\n      firstFocusable?.focus();\r\n    }\r\n  };\r\n\r\n  const onResultKeyDown = (\r\n    event: KeyboardEvent<HTMLButtonElement>,\r\n    code: string,\r\n    name: string,\r\n    linkType: 'course' | 'programme'\r\n  ) => {\r\n    switch (event.key) {\r\n      case 'Escape':\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        handleClose();\r\n        break;\r\n      case 'Enter':\r\n        event.preventDefault();\r\n        onSelect && onSelect(code, name, linkType);\r\n        break;\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        const nextElement = event.currentTarget.nextElementSibling;\r\n        (nextElement as HTMLButtonElement)?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        const previousElement = event.currentTarget.previousElementSibling;\r\n        (previousElement as HTMLButtonElement)?.focus();\r\n        break;\r\n      }\r\n      case 'Tab':\r\n        event.preventDefault();\r\n        handleClose();\r\n        break;\r\n      default:\r\n        event.preventDefault();\r\n        break;\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (searchFieldRef.current) {\r\n      onSearchHandler('', linkType);\r\n      searchFieldRef.current.value = '';\r\n      searchFieldRef.current.focus();\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  return (\r\n    <div className={styles['courselinkform']}>\r\n      <Repeater gap=\"050\">\r\n        <FormField className={styles['courselinkform__input-field']}>\r\n          <Label htmlFor={searchId}>\r\n            {t.cataloguelinks[linkType === 'course' ? 'searchCourseFieldLabel' : 'searchProgrammeFieldLabel']}\r\n          </Label>\r\n          <div className={styles['linkform__input-url-wrapper']}>\r\n            <InputField\r\n              id={searchId}\r\n              placeholder={t.cataloguelinks.searchFieldPlaceholder}\r\n              onChange={handleSearch}\r\n              onKeyDown={handleKeyDown}\r\n              ref={searchFieldRef}\r\n              aria-label={t.aria.labels.searchField}\r\n            />\r\n          </div>\r\n        </FormField>\r\n        {searchResponse && searchResponse.state === 'pending' && (\r\n          <div className={styles['courselinkform__result-message']}>{t.cataloguelinks.loading}</div>\r\n        )}\r\n        {searchResponse && searchResponse.results.length === 0 && searchResponse.state === 'ready' && (\r\n          <div className={styles['courselinkform__result-message']}>{t.cataloguelinks.noResults}</div>\r\n        )}\r\n        {searchResponse && searchResponse.results.length > 0 && (\r\n          <div className={styles['courselinkform__results-wrapper']}>\r\n            <div className={styles['courselinkform__results-header']}>\r\n              <span>\r\n                {\r\n                  t.cataloguelinks[\r\n                    linkType === 'course' ? 'resultCourseListCatalogNumber' : 'resultProgrammeListCatalogNumber'\r\n                  ]\r\n                }\r\n              </span>\r\n              <span>{t.cataloguelinks.resultListName}</span>\r\n            </div>\r\n            <div className={styles['courselinkform__results']} ref={resultListRef}>\r\n              {searchResponse.results.map(({ id, code, name }) => (\r\n                <button\r\n                  key={id}\r\n                  type=\"button\"\r\n                  className={styles['courselinkform__result-item']}\r\n                  onClick={() => onSelect && onSelect(code, name[currentLanguage], linkType)}\r\n                  onKeyDown={(event) => onResultKeyDown(event, code, name[currentLanguage], linkType)}\r\n                  tabIndex={0}\r\n                  aria-label={`${code} ${name[currentLanguage]}`}\r\n                >\r\n                  <span>{code}</span>\r\n                  <span>{name[currentLanguage]}</span>\r\n                </button>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        )}\r\n      </Repeater>\r\n      <div className={styles['courselinkform__footer']}>\r\n        <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\r\n          {t.common.cancel}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"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"}

package/dist/{AppStatusBar-Bca0KFDR.js → AppStatusBar-BK0yaC4G.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BD2qMUU1.js";
+import { t as e } from "./clsx-BWCAbrjV.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/AppStatusBar.css';//#region src/components/AppStatusBar/AppStatusBar.module.css
 var n = {
@@ -17,4 +17,4 @@ var n = {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=AppStatusBar-Bca0KFDR.js.map
+//# sourceMappingURL=AppStatusBar-BK0yaC4G.js.map

package/dist/{AppStatusBar-Bca0KFDR.js.map → AppStatusBar-BK0yaC4G.js.map}

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

package/dist/{Attention-Bq5UU9I8.js → Attention-xqGAJ7-T.js}

@@ -10,4 +10,4 @@ import './assets/Attention.css';var r = { attention: "_attention_kdl29_1" }, i =
 //#endregion
 export { i as t };
 
-//# sourceMappingURL=Attention-Bq5UU9I8.js.map
+//# sourceMappingURL=Attention-xqGAJ7-T.js.map

package/dist/{Attention-Bq5UU9I8.js.map → Attention-xqGAJ7-T.js.map}

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

package/dist/{Backdrop-D8AHeuBn.js → Backdrop-bQ8kXsge.js}

@@ -7,4 +7,4 @@ import './assets/Backdrop2.css';var t = { backdrop: "_backdrop_e539q_1" }, n = (
 //#endregion
 export { n as t };
 
-//# sourceMappingURL=Backdrop-D8AHeuBn.js.map
+//# sourceMappingURL=Backdrop-bQ8kXsge.js.map

package/dist/{Backdrop-D8AHeuBn.js.map → Backdrop-bQ8kXsge.js.map}

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

package/dist/{Button.module-DJlNwQUj.js → Button.module-BkAiXo3V.js}

@@ -13,4 +13,4 @@ import './assets/Button.css';var e = {
 //#endregion
 export { e as t };
 
-//# sourceMappingURL=Button.module-DJlNwQUj.js.map
+//# sourceMappingURL=Button.module-BkAiXo3V.js.map

package/dist/{Button.module-DJlNwQUj.js.map → Button.module-BkAiXo3V.js.map}

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

package/dist/{ButtonGroup-DR80lTLz.js → ButtonGroup-ZqGGZ1rz.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BD2qMUU1.js";
+import { t as e } from "./clsx-BWCAbrjV.js";
 import { Children as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
 import './assets/ButtonGroup.css';//#region src/components/ButtonGroup/ButtonGroup.module.css
@@ -18,4 +18,4 @@ var r = {
 //#endregion
 export { i as t };
 
-//# sourceMappingURL=ButtonGroup-DR80lTLz.js.map
+//# sourceMappingURL=ButtonGroup-ZqGGZ1rz.js.map

package/dist/{ButtonGroup-DR80lTLz.js.map → ButtonGroup-ZqGGZ1rz.js.map}

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

package/dist/{Card-DMFyuTmy.js → Card-BH1ySOiP.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./clsx-BD2qMUU1.js";
-import { t } from "./SectionNotification-CQqwPTqP.js";
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { t } from "./SectionNotification-BT0Z2edJ.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import './assets/Card.css';var i = {
 	card: "_card_1m1jk_1",
@@ -29,4 +29,4 @@ import './assets/Card.css';var i = {
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=Card-DMFyuTmy.js.map
+//# sourceMappingURL=Card-BH1ySOiP.js.map

package/dist/{Card-DMFyuTmy.js.map → Card-BH1ySOiP.js.map}

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

package/dist/{Checkbox-D6-b_4dC.js → Checkbox-sAt4To2B.js}

@@ -9,4 +9,4 @@ import './assets/Checkbox.css';var n = { checkbox: "_checkbox_rbntw_1" }, r = e(
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=Checkbox-D6-b_4dC.js.map
+//# sourceMappingURL=Checkbox-sAt4To2B.js.map

package/dist/{Checkbox-D6-b_4dC.js.map → Checkbox-sAt4To2B.js.map}

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

package/dist/{CheckboxButtonBar-5UMIFMKH.js → CheckboxButtonBar-DpNnwLzI.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./clsx-BD2qMUU1.js";
-import { t } from "./Label-o0BcWTUS.js";
-import { t as n } from "./FeedbackBox-Bu7uB9DP.js";
-import { t as r } from "./ControlsButton-B1XRpMUM.js";
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { t } from "./Label-D0ACrYG3.js";
+import { t as n } from "./FeedbackBox-CaSxB4uc.js";
+import { t as r } from "./ControlsButton-9uR_zW_F.js";
 import { useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import './assets/CheckboxButtonBar.css';//#region src/components/CheckboxButtonBar/CheckboxButtonBar.module.css
@@ -76,4 +76,4 @@ var s = {
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=CheckboxButtonBar-5UMIFMKH.js.map
+//# sourceMappingURL=CheckboxButtonBar-DpNnwLzI.js.map

package/dist/{CheckboxButtonBar-5UMIFMKH.js.map → CheckboxButtonBar-DpNnwLzI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButtonBar-5UMIFMKH.js","names":[],"sources":["../src/components/CheckboxButtonBar/CheckboxButtonBar.module.css","../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":[".checkbox-button-bar__container {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.checkbox-button-bar__container--label-left {\n  align-items: baseline;\n  flex-direction: row;\n  gap: 1rem;\n}\n\n.checkbox-button-bar__container--label-top {\n  align-items: flex-start;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.checkbox-button-bar__row-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.checkbox-button-bar__row-container--segmented {\n  flex-direction: row;\n}\n\n.checkbox-button-bar__row {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-700);\n  border-radius: 0.5rem;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.checkbox-button-bar__row--not-valid {\n  border-color: var(--color-red-600);\n}\n\n.checkbox-button-bar__sub-text {\n  color: var(--color-grey-700);\n  font-size: var(--font-size-text-non-essential);\n}\n","import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n  label: string | ReactNode;\n  value: string;\n  prefix?: string;\n  tooltip?: ReactNode;\n  tooltipPosition?: 'left' | 'center' | 'right';\n  disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n  /** array with objects with label, value, prefix and disabled*/\n  checkboxes: CheckboxProps[];\n  //** array with value(s) */\n  defaultValues?: string[];\n  label?: string;\n  /** optional sub-label text (only displayed when label is positioned 'top') */\n  subLabel?: string;\n  /** 'top' | 'left' */\n  labelPosition?: 'top' | 'left';\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n  /** error text to display under the bar */\n  notValidatedText?: string;\n  /** returns an array with only one value */\n  actAsRadioButtonBar?: boolean;\n  /** optional footer text */\n  footerText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  /** `true` to sepearte each button in their own bordered container */\n  segmented?: boolean;\n  /** `true` sets forceSquared on all buttons */\n  forceSquared?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  subLabel = '',\n  labelPosition = 'top',\n  required = false,\n  notValid = false,\n  notValidatedText = '',\n  actAsRadioButtonBar = false,\n  footerText = '',\n  disableGroup = false,\n  segmented = false,\n  forceSquared = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const [currentValues, setCurrentValues] = useState<string[]>(\n    defaultValues && !actAsRadioButtonBar\n      ? defaultValues.map(String)\n      : defaultValues && actAsRadioButtonBar\n        ? defaultValues.slice(0, 1)\n        : []\n  );\n\n  const handleChange = (value: string) => {\n    let values = currentValues;\n\n    if (actAsRadioButtonBar) {\n      setCurrentValues([value]);\n      onSetValues([value]);\n    } else {\n      if (values.includes(value)) {\n        values = values.filter((val) => val !== value);\n      } else {\n        values = [...values, value];\n      }\n      setCurrentValues(values);\n      onSetValues(values);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        styles['checkbox-button-bar__container'],\n        styles[`checkbox-button-bar__container--label-${labelPosition}`]\n      )}\n    >\n      {(label || subLabel) && (\n        <div>\n          {label && (\n            <Label htmlFor=\"\" required={required}>\n              {label}\n            </Label>\n          )}\n\n          {subLabel && labelPosition === 'top' && (\n            <div className={styles['checkbox-button-bar__sub-text']}>{subLabel}</div>\n          )}\n        </div>\n      )}\n\n      <div\n        className={clsx(styles['checkbox-button-bar__row-container'], {\n          [styles['checkbox-button-bar__row-container--segmented']]: segmented,\n        })}\n      >\n        {segmented ? (\n          checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n            <div\n              key={value}\n              className={clsx(styles['checkbox-button-bar__row'], {\n                [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n              })}\n            >\n              <ControlsButton\n                type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n                label={label}\n                prefix={prefix}\n                tooltip={tooltip}\n                tooltipPosition={tooltipPosition}\n                forceSquared={forceSquared}\n                value={value}\n                checked={currentValues.includes(value)}\n                disabled={disabled || disableGroup}\n                onSetValue={(event) => handleChange(event.target.value)}\n              />\n            </div>\n          ))\n        ) : (\n          <div\n            className={clsx(styles['checkbox-button-bar__row'], {\n              [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n            })}\n          >\n            {checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n              <ControlsButton\n                key={value}\n                type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n                label={label}\n                prefix={prefix}\n                tooltip={tooltip}\n                tooltipPosition={tooltipPosition}\n                forceSquared={forceSquared}\n                value={value}\n                checked={currentValues.includes(value)}\n                disabled={disabled || disableGroup}\n                onSetValue={(event) => handleChange(event.target.value)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n\n      {footerText && <div className={styles['checkbox-button-bar__sub-text']}>{footerText}</div>}\n      {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;GCiDa,KAAqB,EAChC,eACA,kBACA,UACA,cAAW,IACX,mBAAgB,OAChB,cAAW,IACX,cAAW,IACX,sBAAmB,IACnB,yBAAsB,IACtB,gBAAa,IACb,kBAAe,IACf,eAAY,IACZ,kBAAe,IACf,qBAC4B;CAC5B,IAAM,CAAC,GAAe,KAAoB,EACxC,KAAiB,CAAC,IACd,EAAc,IAAI,OAAO,GACzB,KAAiB,IACf,EAAc,MAAM,GAAG,EAAE,GACzB,EAAE,CACT,EAEK,KAAgB,MAAkB;EACtC,IAAI,IAAS;EAEb,AAAI,KACF,EAAiB,CAAC,EAAM,CAAC,EACzB,EAAY,CAAC,EAAM,CAAC,KAEpB,AAGE,IAHE,EAAO,SAAS,EAAM,GACf,EAAO,QAAQ,MAAQ,MAAQ,EAAM,GAErC,CAAC,GAAG,GAAQ,EAAM,EAE7B,EAAiB,EAAO,EACxB,EAAY,EAAO;;CAIvB,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,mCACP,EAAO,yCAAyC,KACjD;YAJH;IAMI,KAAS,MACT,kBAAC,OAAD,EAAA,UAAA,CACG,KACC,kBAAC,GAAD;IAAO,SAAQ;IAAa;cACzB;IACK,CAAA,EAGT,KAAY,MAAkB,SAC7B,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAmC;IAAe,CAAA,CAEvE,EAAA,CAAA;GAGR,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,uCAAuC,GAC3D,EAAO,mDAAmD,GAC5D,CAAC;cAED,IACC,EAAW,KAAK,EAAE,UAAO,UAAO,WAAQ,YAAS,oBAAiB,kBAChE,kBAAC,OAAD;KAEE,WAAW,EAAK,EAAO,6BAA6B,GACjD,EAAO,yCAAyC,KAAY,GAC9D,CAAC;eAEF,kBAAC,GAAD;MACE,MAAM,IAAsB,UAAU;MAC/B;MACC;MACC;MACQ;MACH;MACP;MACP,SAAS,EAAc,SAAS,EAAM;MACtC,UAAU,KAAY;MACtB,aAAa,MAAU,EAAa,EAAM,OAAO,MAAM;MACvD,CAAA;KACE,EAjBC,EAiBD,CACN,GAEF,kBAAC,OAAD;KACE,WAAW,EAAK,EAAO,6BAA6B,GACjD,EAAO,yCAAyC,KAAY,GAC9D,CAAC;eAED,EAAW,KAAK,EAAE,UAAO,UAAO,WAAQ,YAAS,oBAAiB,kBACjE,kBAAC,GAAD;MAEE,MAAM,IAAsB,UAAU;MAC/B;MACC;MACC;MACQ;MACH;MACP;MACP,SAAS,EAAc,SAAS,EAAM;MACtC,UAAU,KAAY;MACtB,aAAa,MAAU,EAAa,EAAM,OAAO,MAAM;MACvD,EAXK,EAWL,CACF;KACE,CAAA;IAEJ,CAAA;GAEL,KAAc,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAmC;IAAiB,CAAA;GACzF,MAAqB,MAAM,kBAAC,GAAD;IAAa,OAAM;IAAQ,UAAU;IAAoB,CAAA;GACjF"}
+{"version":3,"file":"CheckboxButtonBar-DpNnwLzI.js","names":[],"sources":["../src/components/CheckboxButtonBar/CheckboxButtonBar.module.css","../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":[".checkbox-button-bar__container {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.checkbox-button-bar__container--label-left {\n  align-items: baseline;\n  flex-direction: row;\n  gap: 1rem;\n}\n\n.checkbox-button-bar__container--label-top {\n  align-items: flex-start;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.checkbox-button-bar__row-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.checkbox-button-bar__row-container--segmented {\n  flex-direction: row;\n}\n\n.checkbox-button-bar__row {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-700);\n  border-radius: 0.5rem;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.checkbox-button-bar__row--not-valid {\n  border-color: var(--color-red-600);\n}\n\n.checkbox-button-bar__sub-text {\n  color: var(--color-grey-700);\n  font-size: var(--font-size-text-non-essential);\n}\n","import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n  label: string | ReactNode;\n  value: string;\n  prefix?: string;\n  tooltip?: ReactNode;\n  tooltipPosition?: 'left' | 'center' | 'right';\n  disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n  /** array with objects with label, value, prefix and disabled*/\n  checkboxes: CheckboxProps[];\n  //** array with value(s) */\n  defaultValues?: string[];\n  label?: string;\n  /** optional sub-label text (only displayed when label is positioned 'top') */\n  subLabel?: string;\n  /** 'top' | 'left' */\n  labelPosition?: 'top' | 'left';\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n  /** error text to display under the bar */\n  notValidatedText?: string;\n  /** returns an array with only one value */\n  actAsRadioButtonBar?: boolean;\n  /** optional footer text */\n  footerText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  /** `true` to sepearte each button in their own bordered container */\n  segmented?: boolean;\n  /** `true` sets forceSquared on all buttons */\n  forceSquared?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  subLabel = '',\n  labelPosition = 'top',\n  required = false,\n  notValid = false,\n  notValidatedText = '',\n  actAsRadioButtonBar = false,\n  footerText = '',\n  disableGroup = false,\n  segmented = false,\n  forceSquared = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const [currentValues, setCurrentValues] = useState<string[]>(\n    defaultValues && !actAsRadioButtonBar\n      ? defaultValues.map(String)\n      : defaultValues && actAsRadioButtonBar\n        ? defaultValues.slice(0, 1)\n        : []\n  );\n\n  const handleChange = (value: string) => {\n    let values = currentValues;\n\n    if (actAsRadioButtonBar) {\n      setCurrentValues([value]);\n      onSetValues([value]);\n    } else {\n      if (values.includes(value)) {\n        values = values.filter((val) => val !== value);\n      } else {\n        values = [...values, value];\n      }\n      setCurrentValues(values);\n      onSetValues(values);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        styles['checkbox-button-bar__container'],\n        styles[`checkbox-button-bar__container--label-${labelPosition}`]\n      )}\n    >\n      {(label || subLabel) && (\n        <div>\n          {label && (\n            <Label htmlFor=\"\" required={required}>\n              {label}\n            </Label>\n          )}\n\n          {subLabel && labelPosition === 'top' && (\n            <div className={styles['checkbox-button-bar__sub-text']}>{subLabel}</div>\n          )}\n        </div>\n      )}\n\n      <div\n        className={clsx(styles['checkbox-button-bar__row-container'], {\n          [styles['checkbox-button-bar__row-container--segmented']]: segmented,\n        })}\n      >\n        {segmented ? (\n          checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n            <div\n              key={value}\n              className={clsx(styles['checkbox-button-bar__row'], {\n                [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n              })}\n            >\n              <ControlsButton\n                type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n                label={label}\n                prefix={prefix}\n                tooltip={tooltip}\n                tooltipPosition={tooltipPosition}\n                forceSquared={forceSquared}\n                value={value}\n                checked={currentValues.includes(value)}\n                disabled={disabled || disableGroup}\n                onSetValue={(event) => handleChange(event.target.value)}\n              />\n            </div>\n          ))\n        ) : (\n          <div\n            className={clsx(styles['checkbox-button-bar__row'], {\n              [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n            })}\n          >\n            {checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n              <ControlsButton\n                key={value}\n                type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n                label={label}\n                prefix={prefix}\n                tooltip={tooltip}\n                tooltipPosition={tooltipPosition}\n                forceSquared={forceSquared}\n                value={value}\n                checked={currentValues.includes(value)}\n                disabled={disabled || disableGroup}\n                onSetValue={(event) => handleChange(event.target.value)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n\n      {footerText && <div className={styles['checkbox-button-bar__sub-text']}>{footerText}</div>}\n      {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;GCiDa,KAAqB,EAChC,eACA,kBACA,UACA,cAAW,IACX,mBAAgB,OAChB,cAAW,IACX,cAAW,IACX,sBAAmB,IACnB,yBAAsB,IACtB,gBAAa,IACb,kBAAe,IACf,eAAY,IACZ,kBAAe,IACf,qBAC4B;CAC5B,IAAM,CAAC,GAAe,KAAoB,EACxC,KAAiB,CAAC,IACd,EAAc,IAAI,MAAM,IACxB,KAAiB,IACf,EAAc,MAAM,GAAG,CAAC,IACxB,CAAC,CACT,GAEM,KAAgB,MAAkB;EACtC,IAAI,IAAS;EAEb,AAAI,KACF,EAAiB,CAAC,CAAK,CAAC,GACxB,EAAY,CAAC,CAAK,CAAC,MAEnB,AAGE,IAHE,EAAO,SAAS,CAAK,IACd,EAAO,QAAQ,MAAQ,MAAQ,CAAK,IAEpC,CAAC,GAAG,GAAQ,CAAK,GAE5B,EAAiB,CAAM,GACvB,EAAY,CAAM;CAEtB;CAEA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,mCACP,EAAO,yCAAyC,IAClD;YAJF;IAMI,KAAS,MACT,kBAAC,OAAD,EAAA,UAAA,CACG,KACC,kBAAC,GAAD;IAAO,SAAQ;IAAa;cACzB;GACI,CAAA,GAGR,KAAY,MAAkB,SAC7B,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAmC;GAAc,CAAA,CAEvE,EAAA,CAAA;GAGP,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,uCAAuC,GAC3D,EAAO,mDAAmD,EAC7D,CAAC;cAEA,IACC,EAAW,KAAK,EAAE,UAAO,UAAO,WAAQ,YAAS,oBAAiB,kBAChE,kBAAC,OAAD;KAEE,WAAW,EAAK,EAAO,6BAA6B,GACjD,EAAO,yCAAyC,KAAY,EAC/D,CAAC;eAED,kBAAC,GAAD;MACE,MAAM,IAAsB,UAAU;MAC/B;MACC;MACC;MACQ;MACH;MACP;MACP,SAAS,EAAc,SAAS,CAAK;MACrC,UAAU,KAAY;MACtB,aAAa,MAAU,EAAa,EAAM,OAAO,KAAK;KACvD,CAAA;IACE,GAjBE,CAiBF,CACN,IAED,kBAAC,OAAD;KACE,WAAW,EAAK,EAAO,6BAA6B,GACjD,EAAO,yCAAyC,KAAY,EAC/D,CAAC;eAEA,EAAW,KAAK,EAAE,UAAO,UAAO,WAAQ,YAAS,oBAAiB,kBACjE,kBAAC,GAAD;MAEE,MAAM,IAAsB,UAAU;MAC/B;MACC;MACC;MACQ;MACH;MACP;MACP,SAAS,EAAc,SAAS,CAAK;MACrC,UAAU,KAAY;MACtB,aAAa,MAAU,EAAa,EAAM,OAAO,KAAK;KACvD,GAXM,CAWN,CACF;IACE,CAAA;GAEJ,CAAA;GAEJ,KAAc,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAmC;GAAgB,CAAA;GACxF,MAAqB,MAAM,kBAAC,GAAD;IAAa,OAAM;IAAQ,UAAU;GAAmB,CAAA;EACjF;;AAET"}

package/dist/{Chip-DJHvFToV.js → Chip-9XnXFhoJ.js}

@@ -19,4 +19,4 @@ import './assets/Chip.css';var r = {
 //#endregion
 export { i as t };
 
-//# sourceMappingURL=Chip-DJHvFToV.js.map
+//# sourceMappingURL=Chip-9XnXFhoJ.js.map

package/dist/{Chip-DJHvFToV.js.map → Chip-9XnXFhoJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Chip-DJHvFToV.js","names":[],"sources":["../src/components/Chip/Chip.module.css","../src/components/Chip/Chip.tsx"],"sourcesContent":[".chip {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-400);\n  border-radius: 1rem;\n  cursor: pointer;\n  display: grid;\n  font-family: inherit;\n  grid-template-columns: auto 1fr;\n  min-height: 2rem;\n  padding: 0 0 0 1rem;\n  user-select: none;\n  width: fit-content;\n}\n\n.chip:hover {\n  background-color: var(--color-grey-400);\n}\n\n.chip:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.chip__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.chip__close-button {\n  margin: 0 0.5rem;\n}\n","import styles from './Chip.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface ChipProps {\n  /** Text on the chip */\n  label: string;\n  /** Function to remove chip from chip-list on label-text*/\n  onDelete: (label: string) => void;\n}\n\nexport const Chip = ({ label, onDelete }: ChipProps) => {\n  return (\n    <button className={styles['chip']} onClick={() => onDelete(label)}>\n      <span className={styles['chip__label']}>{label}</span>\n      <Icon name=\"Cross\" size={20} className={styles['chip__close-button']} />\n    </button>\n  );\n};\n"],"mappings":";;;;;;GCWa,KAAQ,EAAE,UAAO,kBAE1B,kBAAC,UAAD;CAAQ,WAAW,EAAO;CAAS,eAAe,EAAS,EAAM;WAAjE,CACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAiB;EAAa,CAAA,EACtD,kBAAC,GAAD;EAAM,MAAK;EAAQ,MAAM;EAAI,WAAW,EAAO;EAAyB,CAAA,CACjE"}
+{"version":3,"file":"Chip-9XnXFhoJ.js","names":[],"sources":["../src/components/Chip/Chip.module.css","../src/components/Chip/Chip.tsx"],"sourcesContent":[".chip {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-400);\n  border-radius: 1rem;\n  cursor: pointer;\n  display: grid;\n  font-family: inherit;\n  grid-template-columns: auto 1fr;\n  min-height: 2rem;\n  padding: 0 0 0 1rem;\n  user-select: none;\n  width: fit-content;\n}\n\n.chip:hover {\n  background-color: var(--color-grey-400);\n}\n\n.chip:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.chip__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.chip__close-button {\n  margin: 0 0.5rem;\n}\n","import styles from './Chip.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface ChipProps {\n  /** Text on the chip */\n  label: string;\n  /** Function to remove chip from chip-list on label-text*/\n  onDelete: (label: string) => void;\n}\n\nexport const Chip = ({ label, onDelete }: ChipProps) => {\n  return (\n    <button className={styles['chip']} onClick={() => onDelete(label)}>\n      <span className={styles['chip__label']}>{label}</span>\n      <Icon name=\"Cross\" size={20} className={styles['chip__close-button']} />\n    </button>\n  );\n};\n"],"mappings":";;;;;;GCWa,KAAQ,EAAE,UAAO,kBAE1B,kBAAC,UAAD;CAAQ,WAAW,EAAO;CAAS,eAAe,EAAS,CAAK;WAAhE,CACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAiB;CAAY,CAAA,GACrD,kBAAC,GAAD;EAAM,MAAK;EAAQ,MAAM;EAAI,WAAW,EAAO;CAAwB,CAAA,CACjE"}

package/dist/{ClipboardButton-geHjMl2J.js → ClipboardButton-Cg6LGUiD.js}

@@ -40,4 +40,4 @@ var n = { "clipboard-button": "_clipboard-button_1ihmb_1" }, r = 2e3, i = ({ tex
 //#endregion
 export { i as t };
 
-//# sourceMappingURL=ClipboardButton-geHjMl2J.js.map
+//# sourceMappingURL=ClipboardButton-Cg6LGUiD.js.map

package/dist/{ClipboardButton-geHjMl2J.js.map → ClipboardButton-Cg6LGUiD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton-geHjMl2J.js","names":[],"sources":["../src/storyComponents/ClipboardButton/ClipboardButton.module.css","../src/storyComponents/ClipboardButton/ClipboardButton.tsx"],"sourcesContent":[".clipboard-button {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: #000;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: 0.875rem;\n  font-weight: 500;\n  height: 1.5rem;\n  justify-content: center;\n  outline: none;\n  transition: all 0.15s;\n  width: 1.5rem;\n}\n\n.clipboard-button:focus-visible {\n  box-shadow: 0 0 0 0.125rem #000;\n  outline: 2px solid #000;\n}\n\n.clipboard-button:hover {\n  color: #bd0032;\n}\n\n.clipboard-button:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n","import { useState } from 'react';\n\nimport styles from './ClipboardButton.module.css';\n\ninterface ClipboardButtonProps {\n  text: string;\n}\n\nconst DELAY = 2000;\n\nexport const ClipboardButton = ({ text }: ClipboardButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopyClick = () => {\n    if (!isCopied) {\n      void navigator.clipboard.writeText(text).then(() => {\n        setIsCopied(true);\n        setTimeout(() => {\n          setIsCopied(false);\n        }, DELAY);\n      });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <button onClick={handleCopyClick} className={styles['clipboard-button']} aria-label={`Copy ${text}`}>\n        <svg\n          width=\"15\"\n          height=\"15\"\n          viewBox=\"0 0 15 15\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"h-3 w-3\"\n        >\n          {isCopied ? (\n            <path\n              d=\"M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          ) : (\n            <path\n              d=\"M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          )}\n        </svg>\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;6DCQM,IAAQ,KAED,KAAmB,EAAE,cAAiC;CACjE,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM;CAa/C,OACE,kBAAC,OAAD;EAAK,OAAO,EAAE,UAAU,YAAY;YAClC,kBAAC,UAAD;GAAQ,eAbkB;IAC5B,AAAK,KACH,UAAe,UAAU,UAAU,EAAK,CAAC,WAAW;KAElD,AADA,EAAY,GAAK,EACjB,iBAAiB;MACf,EAAY,GAAM;QACjB,EAAM;MACT;;GAMgC,WAAW,EAAO;GAAqB,cAAY,QAAQ;aAC3F,kBAAC,OAAD;IACE,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,OAAM;IACN,WAAU;cAET,IACC,kBAAC,QAAD;KACE,GAAE;KACF,MAAK;KACL,UAAS;KACT,UAAS;KACT,CAAA,GAEF,kBAAC,QAAD;KACE,GAAE;KACF,MAAK;KACL,UAAS;KACT,UAAS;KACT,CAAA;IAEA,CAAA;GACC,CAAA;EACL,CAAA"}
+{"version":3,"file":"ClipboardButton-Cg6LGUiD.js","names":[],"sources":["../src/storyComponents/ClipboardButton/ClipboardButton.module.css","../src/storyComponents/ClipboardButton/ClipboardButton.tsx"],"sourcesContent":[".clipboard-button {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: #000;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: 0.875rem;\n  font-weight: 500;\n  height: 1.5rem;\n  justify-content: center;\n  outline: none;\n  transition: all 0.15s;\n  width: 1.5rem;\n}\n\n.clipboard-button:focus-visible {\n  box-shadow: 0 0 0 0.125rem #000;\n  outline: 2px solid #000;\n}\n\n.clipboard-button:hover {\n  color: #bd0032;\n}\n\n.clipboard-button:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n","import { useState } from 'react';\n\nimport styles from './ClipboardButton.module.css';\n\ninterface ClipboardButtonProps {\n  text: string;\n}\n\nconst DELAY = 2000;\n\nexport const ClipboardButton = ({ text }: ClipboardButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopyClick = () => {\n    if (!isCopied) {\n      void navigator.clipboard.writeText(text).then(() => {\n        setIsCopied(true);\n        setTimeout(() => {\n          setIsCopied(false);\n        }, DELAY);\n      });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <button onClick={handleCopyClick} className={styles['clipboard-button']} aria-label={`Copy ${text}`}>\n        <svg\n          width=\"15\"\n          height=\"15\"\n          viewBox=\"0 0 15 15\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"h-3 w-3\"\n        >\n          {isCopied ? (\n            <path\n              d=\"M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          ) : (\n            <path\n              d=\"M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          )}\n        </svg>\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;6DCQM,IAAQ,KAED,KAAmB,EAAE,cAAiC;CACjE,IAAM,CAAC,GAAU,KAAe,EAAS,EAAK;CAa9C,OACE,kBAAC,OAAD;EAAK,OAAO,EAAE,UAAU,WAAW;YACjC,kBAAC,UAAD;GAAQ,eAbkB;IAC5B,AAAK,KACH,UAAe,UAAU,UAAU,CAAI,EAAE,WAAW;KAElD,AADA,EAAY,EAAI,GAChB,iBAAiB;MACf,EAAY,EAAK;KACnB,GAAG,CAAK;IACV,CAAC;GAEL;GAIsC,WAAW,EAAO;GAAqB,cAAY,QAAQ;aAC3F,kBAAC,OAAD;IACE,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,OAAM;IACN,WAAU;cAET,IACC,kBAAC,QAAD;KACE,GAAE;KACF,MAAK;KACL,UAAS;KACT,UAAS;IACV,CAAA,IAED,kBAAC,QAAD;KACE,GAAE;KACF,MAAK;KACL,UAAS;KACT,UAAS;IACV,CAAA;GAEA,CAAA;EACC,CAAA;CACL,CAAA;AAET"}

package/dist/{Column-BwKEOOuL.js → Column-BwCVSZrG.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BD2qMUU1.js";
+import { t as e } from "./clsx-BWCAbrjV.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/Column.css';//#region src/components/GridRow/GridRow.module.css
 var n = {
@@ -81,4 +81,4 @@ var n = {
 //#endregion
 export { n, r as t };
 
-//# sourceMappingURL=Column-BwKEOOuL.js.map
+//# sourceMappingURL=Column-BwCVSZrG.js.map

package/dist/{Column-BwKEOOuL.js.map → Column-BwCVSZrG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Column-BwKEOOuL.js","names":[],"sources":["../src/components/GridRow/GridRow.module.css","../src/components/GridRow/Column/Column.tsx"],"sourcesContent":[".page-grid__row {\n  --grid-cols: 12;\n\n  display: flex;\n  flex-wrap: wrap;\n  min-width: 100%;\n}\n\n.page-grid__row-mt-0 {\n  margin-top: 0;\n}\n\n.page-grid__row-mt-025 {\n  margin-top: 0.25rem;\n}\n\n.page-grid__row-mt-050 {\n  margin-top: 0.5rem;\n}\n\n.page-grid__row-mt-075 {\n  margin-top: 0.75rem;\n}\n\n.page-grid__row-mt-100 {\n  margin-top: 1rem;\n}\n\n.page-grid__row-mt-125 {\n  margin-top: 1.25rem;\n}\n\n.page-grid__row-mt-150 {\n  margin-top: 1.5rem;\n}\n\n.page-grid__row-mt-175 {\n  margin-top: 1.75rem;\n}\n\n.page-grid__row-mt-200 {\n  margin-top: 2rem;\n}\n\n.page-grid__row-mt-250 {\n  margin-top: 2.5rem;\n}\n\n.page-grid__row-mt-300 {\n  margin-top: 3rem;\n}\n\n.page-grid__row-mt-350 {\n  margin-top: 3.5rem;\n}\n\n.page-grid__row-mb-0 {\n  margin-bottom: 0;\n}\n\n.page-grid__row-mb-025 {\n  margin-bottom: 0.25rem;\n}\n\n.page-grid__row-mb-050 {\n  margin-bottom: 0.5rem;\n}\n\n.page-grid__row-mb-075 {\n  margin-bottom: 0.75rem;\n}\n\n.page-grid__row-mb-100 {\n  margin-bottom: 1rem;\n}\n\n.page-grid__row-mb-125 {\n  margin-bottom: 1.25rem;\n}\n\n.page-grid__row-mb-150 {\n  margin-bottom: 1.5rem;\n}\n\n.page-grid__row-mb-175 {\n  margin-bottom: 1.75rem;\n}\n\n.page-grid__row-mb-200 {\n  margin-bottom: 2rem;\n}\n\n.page-grid__row-mb-250 {\n  margin-bottom: 2.5rem;\n}\n\n.page-grid__row-mb-300 {\n  margin-bottom: 3rem;\n}\n\n.page-grid__row-mb-350 {\n  margin-bottom: 3.5rem;\n}\n\n[class^=\"page-grid__col\"] {\n  position: relative;\n}\n\n.page-grid__col-12,\n.page-grid__col {\n  flex-basis: 100%;\n  max-width: 100%;\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-1 {\n  --collspan: 1;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-2 {\n  --collspan: 2;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-3 {\n  --collspan: 3;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-4 {\n  --collspan: 4;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-5 {\n  --collspan: 5;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-6 {\n  --collspan: 6;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-7 {\n  --collspan: 7;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-8 {\n  --collspan: 8;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-9 {\n  --collspan: 9;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-10 {\n  --collspan: 10;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-11 {\n  --collspan: 11;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-12 {\n  --collspan: 12;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n/* Medium 1024px */\n\n@media only screen and (max-width: 64rem) {\n  .page-grid__col-md-1 {\n    --collspan: 1;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-2 {\n    --collspan: 2;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-3 {\n    --collspan: 3;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-4 {\n    --collspan: 4;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-5 {\n    --collspan: 5;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-6 {\n    --collspan: 6;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-7 {\n    --collspan: 7;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-8 {\n    --collspan: 8;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-9 {\n    --collspan: 9;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-10 {\n    --collspan: 10;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-11 {\n    --collspan: 11;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-12 {\n    --collspan: 12;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n}\n\n.page-grid__col-start-position-1 {\n  margin-left: calc((1 / 12 * 100%));\n}\n\n.page-grid__col-start-position-2 {\n  margin-left: calc((2 / 12 * 100%));\n}\n\n.page-grid__col-start-position-3 {\n  margin-left: calc((3 / 12 * 100%));\n}\n\n.page-grid__col-start-position-4 {\n  margin-left: calc((4 / 12 * 100%));\n}\n\n.page-grid__col-start-position-5 {\n  margin-left: calc((5 / 12 * 100%));\n}\n\n.page-grid__col-start-position-6 {\n  margin-left: calc((6 / 12 * 100%));\n}\n\n.page-grid__col-start-position-7 {\n  margin-left: calc((7 / 12 * 100%));\n}\n\n.page-grid__col-start-position-8 {\n  margin-left: calc((8 / 12 * 100%));\n}\n\n.page-grid__col-start-position-9 {\n  margin-left: calc((9 / 12 * 100%));\n}\n\n.page-grid__col-start-position-10 {\n  margin-left: calc((10 / 12 * 100%));\n}\n\n.page-grid__col-start-position-11 {\n  margin-left: calc((11 / 12 * 100%));\n}\n\n/* Medium 1024px */\n\n@media only screen and (max-width: 64rem) {\n  .page-grid__col-md-start-position-1 {\n    margin-left: calc((1 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-2 {\n    margin-left: calc((2 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-3 {\n    margin-left: calc((3 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-4 {\n    margin-left: calc((4 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-5 {\n    margin-left: calc((5 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-6 {\n    margin-left: calc((6 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-7 {\n    margin-left: calc((7 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-8 {\n    margin-left: calc((8 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-9 {\n    margin-left: calc((9 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-10 {\n    margin-left: calc((10 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-11 {\n    margin-left: calc((11 / 12 * 100%));\n  }\n}\n\n/* Small 640px */\n\n@media only screen and (max-width: 40rem) {\n  .page-grid__col-1,\n  .page-grid__col-2,\n  .page-grid__col-3,\n  .page-grid__col-4,\n  .page-grid__col-5,\n  .page-grid__col-6,\n  .page-grid__col-7,\n  .page-grid__col-8,\n  .page-grid__col-9,\n  .page-grid__col-10,\n  .page-grid__col-11 {\n    flex-basis: 100%;\n    margin-left: 0;\n    max-width: 100%;\n  }\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from 'components/GridRow/GridRow.module.css';\n\ntype columnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';\n\nexport interface ColumnProps {\n  size?: columnSize;\n  mediumSize?: columnSize;\n  startPositon?: columnSize;\n  mediumStartPosition?: columnSize;\n  position?: 'start' | 'center' | 'end';\n}\n\nexport const Column = ({\n  size,\n  mediumSize,\n  startPositon,\n  mediumStartPosition,\n  position,\n  children,\n}: PropsWithChildren<ColumnProps>) => {\n  return (\n    <div\n      className={clsx(\n        styles['page-grid__col'],\n        size && styles[`page-grid__col-${size}`],\n        mediumSize && styles[`page-grid__col-md-${mediumSize}`],\n        startPositon && styles[`page-grid__col-start-position-${startPositon}`],\n        mediumStartPosition && styles[`page-grid__col-md-start-position-${mediumStartPosition}`],\n        position && styles[`page-grid__col-${position}`]\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCgBa,KAAU,EACrB,SACA,eACA,iBACA,wBACA,aACA,kBAGE,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,mBACP,KAAQ,EAAO,kBAAkB,MACjC,KAAc,EAAO,qBAAqB,MAC1C,KAAgB,EAAO,iCAAiC,MACxD,KAAuB,EAAO,oCAAoC,MAClE,KAAY,EAAO,kBAAkB,KACtC;CAEA;CACG,CAAA"}
+{"version":3,"file":"Column-BwCVSZrG.js","names":[],"sources":["../src/components/GridRow/GridRow.module.css","../src/components/GridRow/Column/Column.tsx"],"sourcesContent":[".page-grid__row {\n  --grid-cols: 12;\n\n  display: flex;\n  flex-wrap: wrap;\n  min-width: 100%;\n}\n\n.page-grid__row-mt-0 {\n  margin-top: 0;\n}\n\n.page-grid__row-mt-025 {\n  margin-top: 0.25rem;\n}\n\n.page-grid__row-mt-050 {\n  margin-top: 0.5rem;\n}\n\n.page-grid__row-mt-075 {\n  margin-top: 0.75rem;\n}\n\n.page-grid__row-mt-100 {\n  margin-top: 1rem;\n}\n\n.page-grid__row-mt-125 {\n  margin-top: 1.25rem;\n}\n\n.page-grid__row-mt-150 {\n  margin-top: 1.5rem;\n}\n\n.page-grid__row-mt-175 {\n  margin-top: 1.75rem;\n}\n\n.page-grid__row-mt-200 {\n  margin-top: 2rem;\n}\n\n.page-grid__row-mt-250 {\n  margin-top: 2.5rem;\n}\n\n.page-grid__row-mt-300 {\n  margin-top: 3rem;\n}\n\n.page-grid__row-mt-350 {\n  margin-top: 3.5rem;\n}\n\n.page-grid__row-mb-0 {\n  margin-bottom: 0;\n}\n\n.page-grid__row-mb-025 {\n  margin-bottom: 0.25rem;\n}\n\n.page-grid__row-mb-050 {\n  margin-bottom: 0.5rem;\n}\n\n.page-grid__row-mb-075 {\n  margin-bottom: 0.75rem;\n}\n\n.page-grid__row-mb-100 {\n  margin-bottom: 1rem;\n}\n\n.page-grid__row-mb-125 {\n  margin-bottom: 1.25rem;\n}\n\n.page-grid__row-mb-150 {\n  margin-bottom: 1.5rem;\n}\n\n.page-grid__row-mb-175 {\n  margin-bottom: 1.75rem;\n}\n\n.page-grid__row-mb-200 {\n  margin-bottom: 2rem;\n}\n\n.page-grid__row-mb-250 {\n  margin-bottom: 2.5rem;\n}\n\n.page-grid__row-mb-300 {\n  margin-bottom: 3rem;\n}\n\n.page-grid__row-mb-350 {\n  margin-bottom: 3.5rem;\n}\n\n[class^=\"page-grid__col\"] {\n  position: relative;\n}\n\n.page-grid__col-12,\n.page-grid__col {\n  flex-basis: 100%;\n  max-width: 100%;\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-1 {\n  --collspan: 1;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-2 {\n  --collspan: 2;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-3 {\n  --collspan: 3;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-4 {\n  --collspan: 4;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-5 {\n  --collspan: 5;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-6 {\n  --collspan: 6;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-7 {\n  --collspan: 7;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-8 {\n  --collspan: 8;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-9 {\n  --collspan: 9;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-10 {\n  --collspan: 10;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-11 {\n  --collspan: 11;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-12 {\n  --collspan: 12;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n/* Medium 1024px */\n\n@media only screen and (max-width: 64rem) {\n  .page-grid__col-md-1 {\n    --collspan: 1;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-2 {\n    --collspan: 2;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-3 {\n    --collspan: 3;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-4 {\n    --collspan: 4;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-5 {\n    --collspan: 5;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-6 {\n    --collspan: 6;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-7 {\n    --collspan: 7;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-8 {\n    --collspan: 8;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-9 {\n    --collspan: 9;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-10 {\n    --collspan: 10;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-11 {\n    --collspan: 11;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-12 {\n    --collspan: 12;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n}\n\n.page-grid__col-start-position-1 {\n  margin-left: calc((1 / 12 * 100%));\n}\n\n.page-grid__col-start-position-2 {\n  margin-left: calc((2 / 12 * 100%));\n}\n\n.page-grid__col-start-position-3 {\n  margin-left: calc((3 / 12 * 100%));\n}\n\n.page-grid__col-start-position-4 {\n  margin-left: calc((4 / 12 * 100%));\n}\n\n.page-grid__col-start-position-5 {\n  margin-left: calc((5 / 12 * 100%));\n}\n\n.page-grid__col-start-position-6 {\n  margin-left: calc((6 / 12 * 100%));\n}\n\n.page-grid__col-start-position-7 {\n  margin-left: calc((7 / 12 * 100%));\n}\n\n.page-grid__col-start-position-8 {\n  margin-left: calc((8 / 12 * 100%));\n}\n\n.page-grid__col-start-position-9 {\n  margin-left: calc((9 / 12 * 100%));\n}\n\n.page-grid__col-start-position-10 {\n  margin-left: calc((10 / 12 * 100%));\n}\n\n.page-grid__col-start-position-11 {\n  margin-left: calc((11 / 12 * 100%));\n}\n\n/* Medium 1024px */\n\n@media only screen and (max-width: 64rem) {\n  .page-grid__col-md-start-position-1 {\n    margin-left: calc((1 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-2 {\n    margin-left: calc((2 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-3 {\n    margin-left: calc((3 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-4 {\n    margin-left: calc((4 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-5 {\n    margin-left: calc((5 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-6 {\n    margin-left: calc((6 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-7 {\n    margin-left: calc((7 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-8 {\n    margin-left: calc((8 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-9 {\n    margin-left: calc((9 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-10 {\n    margin-left: calc((10 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-11 {\n    margin-left: calc((11 / 12 * 100%));\n  }\n}\n\n/* Small 640px */\n\n@media only screen and (max-width: 40rem) {\n  .page-grid__col-1,\n  .page-grid__col-2,\n  .page-grid__col-3,\n  .page-grid__col-4,\n  .page-grid__col-5,\n  .page-grid__col-6,\n  .page-grid__col-7,\n  .page-grid__col-8,\n  .page-grid__col-9,\n  .page-grid__col-10,\n  .page-grid__col-11 {\n    flex-basis: 100%;\n    margin-left: 0;\n    max-width: 100%;\n  }\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from 'components/GridRow/GridRow.module.css';\n\ntype columnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';\n\nexport interface ColumnProps {\n  size?: columnSize;\n  mediumSize?: columnSize;\n  startPositon?: columnSize;\n  mediumStartPosition?: columnSize;\n  position?: 'start' | 'center' | 'end';\n}\n\nexport const Column = ({\n  size,\n  mediumSize,\n  startPositon,\n  mediumStartPosition,\n  position,\n  children,\n}: PropsWithChildren<ColumnProps>) => {\n  return (\n    <div\n      className={clsx(\n        styles['page-grid__col'],\n        size && styles[`page-grid__col-${size}`],\n        mediumSize && styles[`page-grid__col-md-${mediumSize}`],\n        startPositon && styles[`page-grid__col-start-position-${startPositon}`],\n        mediumStartPosition && styles[`page-grid__col-md-start-position-${mediumStartPosition}`],\n        position && styles[`page-grid__col-${position}`]\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCgBa,KAAU,EACrB,SACA,eACA,iBACA,wBACA,aACA,kBAGE,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,mBACP,KAAQ,EAAO,kBAAkB,MACjC,KAAc,EAAO,qBAAqB,MAC1C,KAAgB,EAAO,iCAAiC,MACxD,KAAuB,EAAO,oCAAoC,MAClE,KAAY,EAAO,kBAAkB,IACvC;CAEC;AACE,CAAA"}