@uva-glass/component-library 3.56.0 → 3.57.0

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

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.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-DaCqVof1.js.map
+//# sourceMappingURL=Accordion-DQNoRsg_.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Accordion-DQNoRsg_.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-CD5H9gR1.js → AccordionCard-C4k8EI39.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.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-CD5H9gR1.js.map
+//# sourceMappingURL=AccordionCard-C4k8EI39.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"AccordionCard-C4k8EI39.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-C0hD9noC.js → ActionList-D2GC2qPX.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.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-C0hD9noC.js.map
+//# sourceMappingURL=ActionList-D2GC2qPX.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"ActionList-D2GC2qPX.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-DNv2tEdF.js → AddCatalogueLinkForm-Di0xm7Ep.js}

@@ -1,8 +1,8 @@
 import { Button as e } from "./components/Buttons/Button.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 { t } from "./Label-52ny6d06.js";
+import { t as n } from "./Repeater-BAEfOMZI.js";
+import { t as r } from "./FormField-ByjTkKKq.js";
+import { t as i } from "./InputField-asFsxHvx.js";
 import { useLanguage as a } from "./components/RteEditor/Providers/LanguageProvider.js";
 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-DNv2tEdF.js.map
+//# sourceMappingURL=AddCatalogueLinkForm-Di0xm7Ep.js.map

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

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

package/dist/{AppStatusBar-BK0yaC4G.js → AppStatusBar-DW-w7Nzp.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.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-BK0yaC4G.js.map
+//# sourceMappingURL=AppStatusBar-DW-w7Nzp.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"AppStatusBar-DW-w7Nzp.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/{ButtonGroup-ZqGGZ1rz.js → ButtonGroup-D2z5UWTR.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.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-ZqGGZ1rz.js.map
+//# sourceMappingURL=ButtonGroup-D2z5UWTR.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"ButtonGroup-D2z5UWTR.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-BH1ySOiP.js → Card-DENYj3eR.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./SectionNotification-BT0Z2edJ.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
+import { t } from "./SectionNotification-CN-NdGL8.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-BH1ySOiP.js.map
+//# sourceMappingURL=Card-DENYj3eR.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Card-DENYj3eR.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/{CheckboxButtonBar-DpNnwLzI.js → CheckboxButtonBar-OrJSqUTN.js}

@@ -1,7 +1,7 @@
-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 { t as e } from "./clsx-C67XSbzZ.js";
+import { t } from "./Label-52ny6d06.js";
+import { t as n } from "./FeedbackBox-BpOf_dxg.js";
+import { t as r } from "./ControlsButton-Byx4XQtB.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-DpNnwLzI.js.map
+//# sourceMappingURL=CheckboxButtonBar-OrJSqUTN.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"CheckboxButtonBar-OrJSqUTN.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/{Column-BwCVSZrG.js → Column-jJBZgP8m.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.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-BwCVSZrG.js.map
+//# sourceMappingURL=Column-jJBZgP8m.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Column-jJBZgP8m.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"}

package/dist/{Container-DK25h_-f.js → Container-DOcrVe7u.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 import './assets/Container.css';var i = {
 	container: "_container_1tf56_1",
@@ -28,4 +28,4 @@ import './assets/Container.css';var i = {
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=Container-DK25h_-f.js.map
+//# sourceMappingURL=Container-DOcrVe7u.js.map

package/dist/{Container-DK25h_-f.js.map → Container-DOcrVe7u.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Container-DK25h_-f.js","names":[],"sources":["../src/storyComponents/Container/Container.module.css","../src/storyComponents/Container/Container.tsx"],"sourcesContent":[".container {\n  background-color: var(--color-uva-white);\n  border: 2px dotted var(--color-uva-black);\n  overflow: auto;\n  position: relative;\n}\n\n.container--padded {\n  padding: 1rem;\n}\n\n.container--small {\n  height: 10rem;\n  width: 10rem;\n}\n\n.container--medium {\n  height: 30rem;\n  width: 30rem;\n}\n\n.container--large {\n  height: 50rem;\n  width: 50rem;\n}\n\n.container--large-full-height {\n  width: 50rem;\n}\n\n.container--hidden {\n  display: none;\n}\n\n.container--centered-content {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Container.module.css';\n\ninterface ContainerProps {\n  size?: 'small' | 'medium' | 'large' | 'large-full-height';\n  visible?: boolean;\n  centerContent?: boolean;\n  padded?: boolean;\n}\n\nexport const Container = ({\n  children,\n  size = 'medium',\n  centerContent = false,\n  visible = true,\n  padded = true,\n}: PropsWithChildren<ContainerProps>) => {\n  const label = padded ? 'Storybook container with 1rem padding' : 'Storybook container';\n\n  return (\n    <>\n      <label htmlFor=\"container\">{label}</label>\n      <div\n        id=\"container\"\n        className={clsx(styles['container'], {\n          [styles['container--small']]: size === 'small',\n          [styles['container--medium']]: size === 'medium',\n          [styles['container--large']]: size === 'large',\n          [styles['container--large-full-height']]: size === 'large-full-height',\n          [styles['container--padded']]: padded,\n          [styles['container--centered-content']]: centerContent,\n          [styles['container--hidden']]: !visible,\n        })}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;GCaa,KAAa,EACxB,aACA,UAAO,UACP,mBAAgB,IAChB,aAAU,IACV,YAAS,SAKP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;CAAO,SAAQ;WAJL,IAAS,0CAA0C;AAIpB,CAAA,GACzC,kBAAC,OAAD;CACE,IAAG;CACH,WAAW,EAAK,EAAO,WAAc;GAClC,EAAO,sBAAsB,MAAS;GACtC,EAAO,uBAAuB,MAAS;GACvC,EAAO,sBAAsB,MAAS;GACtC,EAAO,kCAAkC,MAAS;GAClD,EAAO,uBAAuB;GAC9B,EAAO,iCAAiC;GACxC,EAAO,uBAAuB,CAAC;CAClC,CAAC;CAEA;AACE,CAAA,CACL,EAAA,CAAA"}
+{"version":3,"file":"Container-DOcrVe7u.js","names":[],"sources":["../src/storyComponents/Container/Container.module.css","../src/storyComponents/Container/Container.tsx"],"sourcesContent":[".container {\n  background-color: var(--color-uva-white);\n  border: 2px dotted var(--color-uva-black);\n  overflow: auto;\n  position: relative;\n}\n\n.container--padded {\n  padding: 1rem;\n}\n\n.container--small {\n  height: 10rem;\n  width: 10rem;\n}\n\n.container--medium {\n  height: 30rem;\n  width: 30rem;\n}\n\n.container--large {\n  height: 50rem;\n  width: 50rem;\n}\n\n.container--large-full-height {\n  width: 50rem;\n}\n\n.container--hidden {\n  display: none;\n}\n\n.container--centered-content {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Container.module.css';\n\ninterface ContainerProps {\n  size?: 'small' | 'medium' | 'large' | 'large-full-height';\n  visible?: boolean;\n  centerContent?: boolean;\n  padded?: boolean;\n}\n\nexport const Container = ({\n  children,\n  size = 'medium',\n  centerContent = false,\n  visible = true,\n  padded = true,\n}: PropsWithChildren<ContainerProps>) => {\n  const label = padded ? 'Storybook container with 1rem padding' : 'Storybook container';\n\n  return (\n    <>\n      <label htmlFor=\"container\">{label}</label>\n      <div\n        id=\"container\"\n        className={clsx(styles['container'], {\n          [styles['container--small']]: size === 'small',\n          [styles['container--medium']]: size === 'medium',\n          [styles['container--large']]: size === 'large',\n          [styles['container--large-full-height']]: size === 'large-full-height',\n          [styles['container--padded']]: padded,\n          [styles['container--centered-content']]: centerContent,\n          [styles['container--hidden']]: !visible,\n        })}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;GCaa,KAAa,EACxB,aACA,UAAO,UACP,mBAAgB,IAChB,aAAU,IACV,YAAS,SAKP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;CAAO,SAAQ;WAJL,IAAS,0CAA0C;AAIpB,CAAA,GACzC,kBAAC,OAAD;CACE,IAAG;CACH,WAAW,EAAK,EAAO,WAAc;GAClC,EAAO,sBAAsB,MAAS;GACtC,EAAO,uBAAuB,MAAS;GACvC,EAAO,sBAAsB,MAAS;GACtC,EAAO,kCAAkC,MAAS;GAClD,EAAO,uBAAuB;GAC9B,EAAO,iCAAiC;GACxC,EAAO,uBAAuB,CAAC;CAClC,CAAC;CAEA;AACE,CAAA,CACL,EAAA,CAAA"}

package/dist/{ControlsButton-9uR_zW_F.js → ControlsButton-Byx4XQtB.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { Icon as t } from "./components/Icon/Icon.js";
 import { useId as n } from "react";
 import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
@@ -60,4 +60,4 @@ import './assets/ControlsButton.css';var o = {
 //#endregion
 export { s as t };
 
-//# sourceMappingURL=ControlsButton-9uR_zW_F.js.map
+//# sourceMappingURL=ControlsButton-Byx4XQtB.js.map

package/dist/{ControlsButton-9uR_zW_F.js.map → ControlsButton-Byx4XQtB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ControlsButton-9uR_zW_F.js","names":[],"sources":["../src/components/ControlsButton/ControlsButton.module.css","../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":[".controls-input {\n  aspect-ratio: unset;\n  cursor: pointer;\n  height: 0;\n  opacity: 0;\n  position: absolute;\n  width: 0;\n}\n\n.controls-input:focus-visible + label {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.controls-input:checked + label,\n[type=\"radio\"]:checked:hover + label {\n  background-color: var(--color-navy-600);\n  color: var(--color-uva-white);\n  font-weight: var(--semibold);\n}\n\n.controls-input:disabled + label,\n.controls-input:disabled:hover + label {\n  background-color: var(--color-grey-400);\n  color: var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.controls-input:disabled:checked + label {\n  background-color: var(--color-grey-500);\n  color: var(--color-grey-900);\n  font-weight: var(--semibold);\n}\n\n.controls-input:hover + label {\n  background-color: var(--color-grey-300);\n  color: var(--color-uva-black);\n}\n\n.controls-button {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-default);\n  height: 2.25rem;\n  justify-content: center;\n  min-width: 2.25rem;\n  padding: 0.5rem;\n  position: relative;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.controls-button--squared {\n  width: 2.25rem;\n}\n\n.controls-button::after {\n  content: \"\";\n  min-height: 2.625rem;\n  min-width: 2.625rem;\n  position: absolute;\n  width: 100%;\n}\n\n.controls-button--with-prefix {\n  height: auto;\n  padding: 0.125rem 0.5rem;\n  width: auto;\n}\n\n.controls-button--with-icon {\n  gap: 0.5rem;\n}\n\n.controls-button__wrapper {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n}\n\n.controls-button__prefix {\n  color: var(--color-uva-700);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.controls-button__tooltip {\n  background-color: var(--color-uva-white);\n  box-shadow: 0 0 0.25rem 0 rgba(0 0 0 / 25%);\n  color: var(--color-grey-700);\n  display: none;\n  font-size: var(--font-size-text-non-essential);\n  font-style: italic;\n  font-weight: normal;\n  padding: 0.5rem 1rem;\n  position: absolute;\n  text-align: center;\n  top: calc(100% + 0.5rem);\n  z-index: 1;\n}\n\n.controls-button__tooltip--left {\n  left: 0rem;\n}\n\n.controls-button__tooltip--center {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.controls-button__tooltip--right {\n  right: 0rem;\n}\n\n.controls-button__tooltip::before {\n  border-color: transparent transparent var(--color-grey-400) transparent;\n  border-style: solid;\n  border-width: 0.5rem;\n  bottom: calc(100% + 0.125rem);\n  content: \"\";\n  filter: blur(0.125rem);\n  position: absolute;\n  z-index: -1;\n}\n\n.controls-button__tooltip::after {\n  border-color: transparent transparent var(--color-uva-white) transparent;\n  border-style: solid;\n  border-width: 0.5rem;\n  bottom: 100%;\n  content: \"\";\n  position: absolute;\n}\n\n.controls-button:hover .controls-button__tooltip,\n.controls-input:focus-visible + label .controls-button__tooltip {\n  display: block;\n}\n\n.controls-button__tooltip--left::before,\n.controls-button__tooltip--left::after {\n  left: 0.5rem;\n}\n\n.controls-button__tooltip--center::before,\n.controls-button__tooltip--center::after {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.controls-button__tooltip--right::before,\n.controls-button__tooltip--right::after {\n  right: 0.5rem;\n}\n\n.controls-button--checked span.periods__item,\n.controls-button--checked [data-period-item] {\n  border: 1px solid var(--color-uva-white) !important;\n}\n","import { useId } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { ChangeEvent, ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ControlsButtonProps {\r\n  /** to set type/behaviour of input radio or checkbox */\r\n  type?: 'radio' | 'checkbox';\r\n  /** button label */\r\n  label: string | ReactNode;\r\n  /** button value */\r\n  value: string;\r\n  /** set if icon is needed in font of label */\r\n  iconName?: IconProps['name'];\r\n  /** set if prefix is needed above of label */\r\n  prefix?: string;\r\n  /** set tooltip */\r\n  tooltip?: ReactNode;\r\n  /** set horizontal position of the tooltip */\r\n  tooltipPosition?: 'left' | 'center' | 'right';\r\n  /** set if used as radiogroup */\r\n  name?: string;\r\n  /** `true` to set squared button; otherwise, `false`. The default is `false`. Note: hides icon */\r\n  forceSquared?: boolean;\r\n  /** to set default status */\r\n  checked?: boolean;\r\n  /** `true` to disable the button; otherwise, `false`. The default is `false`. */\r\n  disabled?: boolean;\r\n  /** The callback function that is invoked when the radio button changes value. */\r\n  onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n  type = 'checkbox',\r\n  label,\r\n  value,\r\n  iconName,\r\n  prefix,\r\n  tooltip,\r\n  tooltipPosition = 'center',\r\n  name,\r\n  forceSquared = false,\r\n  checked,\r\n  disabled,\r\n  onSetValue,\r\n}: ControlsButtonProps) => {\r\n  const idPrefix = useId();\r\n  const labelString = typeof label === 'string' ? label : value;\r\n  const sanitizedLabel = labelString.replace(/\\s+/g, '_');\r\n  const baseId = `${idPrefix}${sanitizedLabel}`;\r\n  const tooltipId = `${baseId}-tooltip`;\r\n\r\n  return (\r\n    <>\r\n      <input\r\n        type={type}\r\n        id={baseId}\r\n        name={name ?? sanitizedLabel}\r\n        disabled={disabled}\r\n        value={value}\r\n        checked={checked}\r\n        onChange={onSetValue}\r\n        className={styles['controls-input']}\r\n        aria-describedby={tooltip ? tooltipId : undefined}\r\n      />\r\n      <label\r\n        htmlFor={baseId}\r\n        className={clsx(styles['controls-button'], [\r\n          forceSquared && styles['controls-button--squared'],\r\n          prefix && styles['controls-button--with-prefix'],\r\n          iconName && styles['controls-button--with-icon'],\r\n          checked && styles['controls-button--checked'],\r\n        ])}\r\n      >\r\n        {iconName && <Icon name={iconName} size={20} />}\r\n        <div className={styles['controls-button__wrapper']}>\r\n          {prefix && <div className={styles['controls-button__prefix']}>{prefix}</div>}\r\n          {label}\r\n        </div>\r\n        {tooltip && (\r\n          <div\r\n            id={tooltipId}\r\n            role=\"tooltip\"\r\n            className={clsx(styles['controls-button__tooltip'], styles[`controls-button__tooltip--${tooltipPosition}`])}\r\n          >\r\n            {tooltip}\r\n          </div>\r\n        )}\r\n      </label>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;;;;;;;GCqCa,KAAkB,EAC7B,UAAO,YACP,UACA,UACA,aACA,WACA,YACA,qBAAkB,UAClB,SACA,kBAAe,IACf,YACA,aACA,oBACyB;CACzB,IAAM,IAAW,EAAM,GAEjB,KADc,OAAO,KAAU,WAAW,IAAQ,GACrB,QAAQ,QAAQ,GAAG,GAChD,IAAS,GAAG,IAAW,KACvB,IAAY,GAAG,EAAO;CAE5B,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;EACQ;EACN,IAAI;EACJ,MAAM,KAAQ;EACJ;EACH;EACE;EACT,UAAU;EACV,WAAW,EAAO;EAClB,oBAAkB,IAAU,IAAY,KAAA;CACzC,CAAA,GACD,kBAAC,SAAD;EACE,SAAS;EACT,WAAW,EAAK,EAAO,oBAAoB;GACzC,KAAgB,EAAO;GACvB,KAAU,EAAO;GACjB,KAAY,EAAO;GACnB,KAAW,EAAO;EACpB,CAAC;YAPH;GASG,KAAY,kBAAC,GAAD;IAAM,MAAM;IAAU,MAAM;GAAK,CAAA;GAC9C,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,KAAU,kBAAC,OAAD;KAAK,WAAW,EAAO;eAA6B;IAAY,CAAA,GAC1E,CACE;;GACJ,KACC,kBAAC,OAAD;IACE,IAAI;IACJ,MAAK;IACL,WAAW,EAAK,EAAO,6BAA6B,EAAO,6BAA6B,IAAkB;cAEzG;GACE,CAAA;EAEF;GACP,EAAA,CAAA;AAEN"}
+{"version":3,"file":"ControlsButton-Byx4XQtB.js","names":[],"sources":["../src/components/ControlsButton/ControlsButton.module.css","../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":[".controls-input {\n  aspect-ratio: unset;\n  cursor: pointer;\n  height: 0;\n  opacity: 0;\n  position: absolute;\n  width: 0;\n}\n\n.controls-input:focus-visible + label {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.controls-input:checked + label,\n[type=\"radio\"]:checked:hover + label {\n  background-color: var(--color-navy-600);\n  color: var(--color-uva-white);\n  font-weight: var(--semibold);\n}\n\n.controls-input:disabled + label,\n.controls-input:disabled:hover + label {\n  background-color: var(--color-grey-400);\n  color: var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.controls-input:disabled:checked + label {\n  background-color: var(--color-grey-500);\n  color: var(--color-grey-900);\n  font-weight: var(--semibold);\n}\n\n.controls-input:hover + label {\n  background-color: var(--color-grey-300);\n  color: var(--color-uva-black);\n}\n\n.controls-button {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-default);\n  height: 2.25rem;\n  justify-content: center;\n  min-width: 2.25rem;\n  padding: 0.5rem;\n  position: relative;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.controls-button--squared {\n  width: 2.25rem;\n}\n\n.controls-button::after {\n  content: \"\";\n  min-height: 2.625rem;\n  min-width: 2.625rem;\n  position: absolute;\n  width: 100%;\n}\n\n.controls-button--with-prefix {\n  height: auto;\n  padding: 0.125rem 0.5rem;\n  width: auto;\n}\n\n.controls-button--with-icon {\n  gap: 0.5rem;\n}\n\n.controls-button__wrapper {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n}\n\n.controls-button__prefix {\n  color: var(--color-uva-700);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.controls-button__tooltip {\n  background-color: var(--color-uva-white);\n  box-shadow: 0 0 0.25rem 0 rgba(0 0 0 / 25%);\n  color: var(--color-grey-700);\n  display: none;\n  font-size: var(--font-size-text-non-essential);\n  font-style: italic;\n  font-weight: normal;\n  padding: 0.5rem 1rem;\n  position: absolute;\n  text-align: center;\n  top: calc(100% + 0.5rem);\n  z-index: 1;\n}\n\n.controls-button__tooltip--left {\n  left: 0rem;\n}\n\n.controls-button__tooltip--center {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.controls-button__tooltip--right {\n  right: 0rem;\n}\n\n.controls-button__tooltip::before {\n  border-color: transparent transparent var(--color-grey-400) transparent;\n  border-style: solid;\n  border-width: 0.5rem;\n  bottom: calc(100% + 0.125rem);\n  content: \"\";\n  filter: blur(0.125rem);\n  position: absolute;\n  z-index: -1;\n}\n\n.controls-button__tooltip::after {\n  border-color: transparent transparent var(--color-uva-white) transparent;\n  border-style: solid;\n  border-width: 0.5rem;\n  bottom: 100%;\n  content: \"\";\n  position: absolute;\n}\n\n.controls-button:hover .controls-button__tooltip,\n.controls-input:focus-visible + label .controls-button__tooltip {\n  display: block;\n}\n\n.controls-button__tooltip--left::before,\n.controls-button__tooltip--left::after {\n  left: 0.5rem;\n}\n\n.controls-button__tooltip--center::before,\n.controls-button__tooltip--center::after {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.controls-button__tooltip--right::before,\n.controls-button__tooltip--right::after {\n  right: 0.5rem;\n}\n\n.controls-button--checked span.periods__item,\n.controls-button--checked [data-period-item] {\n  border: 1px solid var(--color-uva-white) !important;\n}\n","import { useId } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { ChangeEvent, ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ControlsButtonProps {\r\n  /** to set type/behaviour of input radio or checkbox */\r\n  type?: 'radio' | 'checkbox';\r\n  /** button label */\r\n  label: string | ReactNode;\r\n  /** button value */\r\n  value: string;\r\n  /** set if icon is needed in font of label */\r\n  iconName?: IconProps['name'];\r\n  /** set if prefix is needed above of label */\r\n  prefix?: string;\r\n  /** set tooltip */\r\n  tooltip?: ReactNode;\r\n  /** set horizontal position of the tooltip */\r\n  tooltipPosition?: 'left' | 'center' | 'right';\r\n  /** set if used as radiogroup */\r\n  name?: string;\r\n  /** `true` to set squared button; otherwise, `false`. The default is `false`. Note: hides icon */\r\n  forceSquared?: boolean;\r\n  /** to set default status */\r\n  checked?: boolean;\r\n  /** `true` to disable the button; otherwise, `false`. The default is `false`. */\r\n  disabled?: boolean;\r\n  /** The callback function that is invoked when the radio button changes value. */\r\n  onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n  type = 'checkbox',\r\n  label,\r\n  value,\r\n  iconName,\r\n  prefix,\r\n  tooltip,\r\n  tooltipPosition = 'center',\r\n  name,\r\n  forceSquared = false,\r\n  checked,\r\n  disabled,\r\n  onSetValue,\r\n}: ControlsButtonProps) => {\r\n  const idPrefix = useId();\r\n  const labelString = typeof label === 'string' ? label : value;\r\n  const sanitizedLabel = labelString.replace(/\\s+/g, '_');\r\n  const baseId = `${idPrefix}${sanitizedLabel}`;\r\n  const tooltipId = `${baseId}-tooltip`;\r\n\r\n  return (\r\n    <>\r\n      <input\r\n        type={type}\r\n        id={baseId}\r\n        name={name ?? sanitizedLabel}\r\n        disabled={disabled}\r\n        value={value}\r\n        checked={checked}\r\n        onChange={onSetValue}\r\n        className={styles['controls-input']}\r\n        aria-describedby={tooltip ? tooltipId : undefined}\r\n      />\r\n      <label\r\n        htmlFor={baseId}\r\n        className={clsx(styles['controls-button'], [\r\n          forceSquared && styles['controls-button--squared'],\r\n          prefix && styles['controls-button--with-prefix'],\r\n          iconName && styles['controls-button--with-icon'],\r\n          checked && styles['controls-button--checked'],\r\n        ])}\r\n      >\r\n        {iconName && <Icon name={iconName} size={20} />}\r\n        <div className={styles['controls-button__wrapper']}>\r\n          {prefix && <div className={styles['controls-button__prefix']}>{prefix}</div>}\r\n          {label}\r\n        </div>\r\n        {tooltip && (\r\n          <div\r\n            id={tooltipId}\r\n            role=\"tooltip\"\r\n            className={clsx(styles['controls-button__tooltip'], styles[`controls-button__tooltip--${tooltipPosition}`])}\r\n          >\r\n            {tooltip}\r\n          </div>\r\n        )}\r\n      </label>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;;;;;;;GCqCa,KAAkB,EAC7B,UAAO,YACP,UACA,UACA,aACA,WACA,YACA,qBAAkB,UAClB,SACA,kBAAe,IACf,YACA,aACA,oBACyB;CACzB,IAAM,IAAW,EAAM,GAEjB,KADc,OAAO,KAAU,WAAW,IAAQ,GACrB,QAAQ,QAAQ,GAAG,GAChD,IAAS,GAAG,IAAW,KACvB,IAAY,GAAG,EAAO;CAE5B,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;EACQ;EACN,IAAI;EACJ,MAAM,KAAQ;EACJ;EACH;EACE;EACT,UAAU;EACV,WAAW,EAAO;EAClB,oBAAkB,IAAU,IAAY,KAAA;CACzC,CAAA,GACD,kBAAC,SAAD;EACE,SAAS;EACT,WAAW,EAAK,EAAO,oBAAoB;GACzC,KAAgB,EAAO;GACvB,KAAU,EAAO;GACjB,KAAY,EAAO;GACnB,KAAW,EAAO;EACpB,CAAC;YAPH;GASG,KAAY,kBAAC,GAAD;IAAM,MAAM;IAAU,MAAM;GAAK,CAAA;GAC9C,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,KAAU,kBAAC,OAAD;KAAK,WAAW,EAAO;eAA6B;IAAY,CAAA,GAC1E,CACE;;GACJ,KACC,kBAAC,OAAD;IACE,IAAI;IACJ,MAAK;IACL,WAAW,EAAK,EAAO,6BAA6B,EAAO,6BAA6B,IAAkB;cAEzG;GACE,CAAA;EAEF;GACP,EAAA,CAAA;AAEN"}

package/dist/{CopyableText-hSqhyUWx.js → CopyableText-BKsM-TuS.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { Icon as t } from "./components/Icon/Icon.js";
 import { useEffect as n, useRef as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
@@ -54,4 +54,4 @@ var s = {
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=CopyableText-hSqhyUWx.js.map
+//# sourceMappingURL=CopyableText-BKsM-TuS.js.map

package/dist/{CopyableText-hSqhyUWx.js.map → CopyableText-BKsM-TuS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CopyableText-hSqhyUWx.js","names":[],"sources":["../src/components/CopyableText/CopyableText.module.css","../src/components/CopyableText/CopyableText.tsx"],"sourcesContent":[".copyable-text-container {\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  width: fit-content;\n}\n\n.copyable-text-copy-button {\n  align-items: center;\n  background-color: var(--color-grey-300);\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  gap: 0.25rem;\n  inset: calc(-0.25rem + 1px) auto auto -0.5rem;\n  justify-content: center;\n  padding: 0.25rem 0.5rem;\n  position: absolute;\n  transition: opacity 150ms ease;\n  white-space: nowrap;\n  z-index: 10;\n}\n\n.copyable-text-container:focus-within {\n  outline: none;\n}\n\n.copyable-text-copy-visually-hidden {\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { clsx } from 'clsx';\r\nimport { useState, useRef, useEffect } from 'react';\r\n\r\nimport type { KeyboardEvent, MouseEvent } from 'react';\r\n\r\nimport styles from './CopyableText.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface CopyableTextProps {\r\n  /** The text to be copied */\r\n  text: string;\r\n  /** Additional class name to style the text so it suits the design */\r\n  additionalClassName?: string;\r\n  /** ARIA label for the copy button */\r\n  ariaLabelCopy?: string;\r\n  /** ARIA label for the copied state */\r\n  ariaLabelHasBeenCopied?: string;\r\n  /** custom value to be copied in place of the display text */\r\n  customCopyValue?: string;\r\n}\r\n\r\nconst COPYTIME = 2000;\r\n\r\nexport const CopyableText = ({\r\n  text,\r\n  additionalClassName = '',\r\n  ariaLabelCopy,\r\n  ariaLabelHasBeenCopied,\r\n  customCopyValue,\r\n}: CopyableTextProps) => {\r\n  const [isCopying, setIsCopying] = useState(false);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\r\n  const [buttonActive, setButtonActive] = useState(false);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const handleCopy = (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLSpanElement>) => {\r\n    // prevent event bubbling if placed inside another clikable element\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n\r\n    setIsCopying(true);\r\n    timeoutRef.current = setTimeout(() => {\r\n      setIsCopying(false);\r\n      setButtonActive(false);\r\n    }, COPYTIME);\r\n    navigator.clipboard.writeText(customCopyValue ?? text).catch(() => setIsCopying(false));\r\n  };\r\n\r\n  return (\r\n    <span\r\n      className={clsx(styles['copyable-text-container'], additionalClassName)}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n      onFocus={() => setButtonActive(true)}\r\n      onBlur={() => !isCopying && setButtonActive(false)}\r\n      onKeyDown={(event) => {\r\n        setButtonActive(true);\r\n        if (event.key === 'Enter' || event.key === ' ') {\r\n          event.preventDefault();\r\n          handleCopy(event);\r\n        }\r\n      }}\r\n      onMouseEnter={() => setButtonActive(true)}\r\n      onMouseLeave={() => !isCopying && setButtonActive(false)}\r\n    >\r\n      {text}\r\n      {buttonActive && (\r\n        <button\r\n          ref={buttonRef}\r\n          className={clsx(styles['copyable-text-copy-button'], additionalClassName)}\r\n          onClick={handleCopy}\r\n          type=\"button\"\r\n          aria-keyshortcuts=\"Enter Space\"\r\n          aria-label={isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          tabIndex={-1}\r\n        >\r\n          {text}\r\n          <Icon name={isCopying ? 'CheckSmall' : 'Copy'} size={20} />\r\n          <span className={styles['copyable-text-copy-visually-hidden']} aria-live=\"polite\">\r\n            {isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          </span>\r\n        </button>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;GCsBM,IAAW,KAEJ,KAAgB,EAC3B,SACA,yBAAsB,IACtB,kBACA,2BACA,yBACuB;CACvB,IAAM,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAa,EAA6C,IAAI,GAC9D,IAAY,EAAiC,IAAI,GACjD,CAAC,GAAc,KAAmB,EAAS,EAAK;CAEtD,cACe;EACX,AAAI,EAAW,WAAS,aAAa,EAAW,OAAO;CACzD,GACC,CAAC,CAAC;CAEL,IAAM,KAAc,MAA0E;EAU5F,AARA,EAAM,gBAAgB,GACtB,EAAM,eAAe,GAErB,EAAa,EAAI,GACjB,EAAW,UAAU,iBAAiB;GAEpC,AADA,EAAa,EAAK,GAClB,EAAgB,EAAK;EACvB,GAAG,CAAQ,GACX,UAAU,UAAU,UAAU,KAAmB,CAAI,EAAE,YAAY,EAAa,EAAK,CAAC;CACxF;CAEA,OACE,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,4BAA4B,CAAmB;EACtE,MAAK;EACL,UAAU;EACV,eAAe,EAAgB,EAAI;EACnC,cAAc,CAAC,KAAa,EAAgB,EAAK;EACjD,YAAY,MAAU;GAEpB,AADA,EAAgB,EAAI,IAChB,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAW,CAAK;EAEpB;EACA,oBAAoB,EAAgB,EAAI;EACxC,oBAAoB,CAAC,KAAa,EAAgB,EAAK;YAdzD,CAgBG,GACA,KACC,kBAAC,UAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,CAAmB;GACxE,SAAS;GACT,MAAK;GACL,qBAAkB;GAClB,cAAY,IAAa,KAA0B,WAAa,KAAiB;GACjF,UAAU;aAPZ;IASG;IACD,kBAAC,GAAD;KAAM,MAAM,IAAY,eAAe;KAAQ,MAAM;IAAK,CAAA;IAC1D,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAuC,aAAU;eACtE,IAAa,KAA0B,WAAa,KAAiB;IAClE,CAAA;GACA;IAEN;;AAEV"}
+{"version":3,"file":"CopyableText-BKsM-TuS.js","names":[],"sources":["../src/components/CopyableText/CopyableText.module.css","../src/components/CopyableText/CopyableText.tsx"],"sourcesContent":[".copyable-text-container {\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  width: fit-content;\n}\n\n.copyable-text-copy-button {\n  align-items: center;\n  background-color: var(--color-grey-300);\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  gap: 0.25rem;\n  inset: calc(-0.25rem + 1px) auto auto -0.5rem;\n  justify-content: center;\n  padding: 0.25rem 0.5rem;\n  position: absolute;\n  transition: opacity 150ms ease;\n  white-space: nowrap;\n  z-index: 10;\n}\n\n.copyable-text-container:focus-within {\n  outline: none;\n}\n\n.copyable-text-copy-visually-hidden {\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { clsx } from 'clsx';\r\nimport { useState, useRef, useEffect } from 'react';\r\n\r\nimport type { KeyboardEvent, MouseEvent } from 'react';\r\n\r\nimport styles from './CopyableText.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface CopyableTextProps {\r\n  /** The text to be copied */\r\n  text: string;\r\n  /** Additional class name to style the text so it suits the design */\r\n  additionalClassName?: string;\r\n  /** ARIA label for the copy button */\r\n  ariaLabelCopy?: string;\r\n  /** ARIA label for the copied state */\r\n  ariaLabelHasBeenCopied?: string;\r\n  /** custom value to be copied in place of the display text */\r\n  customCopyValue?: string;\r\n}\r\n\r\nconst COPYTIME = 2000;\r\n\r\nexport const CopyableText = ({\r\n  text,\r\n  additionalClassName = '',\r\n  ariaLabelCopy,\r\n  ariaLabelHasBeenCopied,\r\n  customCopyValue,\r\n}: CopyableTextProps) => {\r\n  const [isCopying, setIsCopying] = useState(false);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\r\n  const [buttonActive, setButtonActive] = useState(false);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const handleCopy = (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLSpanElement>) => {\r\n    // prevent event bubbling if placed inside another clikable element\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n\r\n    setIsCopying(true);\r\n    timeoutRef.current = setTimeout(() => {\r\n      setIsCopying(false);\r\n      setButtonActive(false);\r\n    }, COPYTIME);\r\n    navigator.clipboard.writeText(customCopyValue ?? text).catch(() => setIsCopying(false));\r\n  };\r\n\r\n  return (\r\n    <span\r\n      className={clsx(styles['copyable-text-container'], additionalClassName)}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n      onFocus={() => setButtonActive(true)}\r\n      onBlur={() => !isCopying && setButtonActive(false)}\r\n      onKeyDown={(event) => {\r\n        setButtonActive(true);\r\n        if (event.key === 'Enter' || event.key === ' ') {\r\n          event.preventDefault();\r\n          handleCopy(event);\r\n        }\r\n      }}\r\n      onMouseEnter={() => setButtonActive(true)}\r\n      onMouseLeave={() => !isCopying && setButtonActive(false)}\r\n    >\r\n      {text}\r\n      {buttonActive && (\r\n        <button\r\n          ref={buttonRef}\r\n          className={clsx(styles['copyable-text-copy-button'], additionalClassName)}\r\n          onClick={handleCopy}\r\n          type=\"button\"\r\n          aria-keyshortcuts=\"Enter Space\"\r\n          aria-label={isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          tabIndex={-1}\r\n        >\r\n          {text}\r\n          <Icon name={isCopying ? 'CheckSmall' : 'Copy'} size={20} />\r\n          <span className={styles['copyable-text-copy-visually-hidden']} aria-live=\"polite\">\r\n            {isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          </span>\r\n        </button>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;GCsBM,IAAW,KAEJ,KAAgB,EAC3B,SACA,yBAAsB,IACtB,kBACA,2BACA,yBACuB;CACvB,IAAM,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAa,EAA6C,IAAI,GAC9D,IAAY,EAAiC,IAAI,GACjD,CAAC,GAAc,KAAmB,EAAS,EAAK;CAEtD,cACe;EACX,AAAI,EAAW,WAAS,aAAa,EAAW,OAAO;CACzD,GACC,CAAC,CAAC;CAEL,IAAM,KAAc,MAA0E;EAU5F,AARA,EAAM,gBAAgB,GACtB,EAAM,eAAe,GAErB,EAAa,EAAI,GACjB,EAAW,UAAU,iBAAiB;GAEpC,AADA,EAAa,EAAK,GAClB,EAAgB,EAAK;EACvB,GAAG,CAAQ,GACX,UAAU,UAAU,UAAU,KAAmB,CAAI,EAAE,YAAY,EAAa,EAAK,CAAC;CACxF;CAEA,OACE,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,4BAA4B,CAAmB;EACtE,MAAK;EACL,UAAU;EACV,eAAe,EAAgB,EAAI;EACnC,cAAc,CAAC,KAAa,EAAgB,EAAK;EACjD,YAAY,MAAU;GAEpB,AADA,EAAgB,EAAI,IAChB,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAW,CAAK;EAEpB;EACA,oBAAoB,EAAgB,EAAI;EACxC,oBAAoB,CAAC,KAAa,EAAgB,EAAK;YAdzD,CAgBG,GACA,KACC,kBAAC,UAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,CAAmB;GACxE,SAAS;GACT,MAAK;GACL,qBAAkB;GAClB,cAAY,IAAa,KAA0B,WAAa,KAAiB;GACjF,UAAU;aAPZ;IASG;IACD,kBAAC,GAAD;KAAM,MAAM,IAAY,eAAe;KAAQ,MAAM;IAAK,CAAA;IAC1D,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAuC,aAAU;eACtE,IAAa,KAA0B,WAAa,KAAiB;IAClE,CAAA;GACA;IAEN;;AAEV"}

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

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { useVirtualScroll as t } from "./components/DataTable/hooks/useVirtualScroll.js";
 import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -151,4 +151,4 @@ var l = {
 //#endregion
 export { d as t };
 
-//# sourceMappingURL=DataTable-C46IkAmF.js.map
+//# sourceMappingURL=DataTable-Cgn_RKTA.js.map