@uva-glass/component-library 3.55.1 → 3.55.3

package/dist/RadioGroup-JeTjVp5B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup-JeTjVp5B.js","names":[],"sources":["../src/components/RadioGroup/RadioGroup.module.css","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".radio-group__wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.radio-group__header {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: var(--line-height-s);\n  margin: 0;\n}\n\n.radio-group {\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-600);\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n\n.radio-group__option {\n  cursor: pointer;\n  display: flex;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.radio-group__option:not(:last-of-type) {\n  border-bottom: 1px solid var(--color-grey-400);\n}\n\n.radio-group__option:hover {\n  background-color: var(--color-grey-300);\n}\n\n.radio-group__option--disabled {\n  cursor: default;\n  pointer-events: none;\n}\n","import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './RadioGroup.module.css';\n\nimport { RadioButton } from 'components/RadioButton/RadioButton';\n\ntype Option = {\n  id: string;\n  titleLabel: string;\n  descriptionLabel?: string;\n  value: string;\n};\n\nexport interface RadioGroupProps {\n  /** The label of the radio group */\n  label: string;\n  /** Radio options. */\n  options: Option[];\n  /** Returns selected values as string */\n  onChange: (value: string) => void;\n  /** If true, the whole group will be disabled. */\n  disabled?: boolean;\n}\n\n/** Represents a component for dispalying grouped styled radio buttons. */\nexport const RadioGroup = ({ label, options, onChange, disabled }: RadioGroupProps) => {\n  const [selectedValue, setSelectedValue] = useState<string | null>(null);\n\n  const handleSelection = (value: string) => {\n    if (!disabled) {\n      setSelectedValue(value);\n      onChange(value);\n    }\n  };\n\n  return (\n    <div className={styles['radio-group__wrapper']}>\n      <h2 className={styles['radio-group__header']}>{label}</h2>\n      <div className={styles['radio-group']}>\n        {options.map(({ id, descriptionLabel, titleLabel, value }) => (\n          <div\n            className={clsx(styles['radio-group__option'], {\n              [styles['radio-group__option--disabled']]: disabled,\n            })}\n            key={id}\n            onClick={() => handleSelection(value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                handleSelection(value);\n              }\n            }}\n            role=\"presentation\"\n          >\n            <RadioButton\n              id={id}\n              label={titleLabel}\n              description={descriptionLabel}\n              name={label}\n              onChange={(event) => {\n                handleSelection(event.target.value);\n              }}\n              value={value}\n              checked={selectedValue === value}\n              disabled={disabled}\n              gap=\"large\"\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;GC0Ba,KAAc,EAAE,UAAO,YAAS,aAAU,kBAAgC;CACrF,IAAM,CAAC,GAAe,KAAoB,EAAwB,KAAK,EAEjE,KAAmB,MAAkB;AACzC,EAAK,MACH,EAAiB,EAAM,EACvB,EAAS,EAAM;;AAInB,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,MAAD;GAAI,WAAW,EAAO;aAAyB;GAAW,CAAA,EAC1D,kBAAC,OAAD;GAAK,WAAW,EAAO;aACpB,EAAQ,KAAK,EAAE,OAAI,qBAAkB,eAAY,eAChD,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,wBAAwB,GAC5C,EAAO,mCAAmC,GAC5C,CAAC;IAEF,eAAe,EAAgB,EAAM;IACrC,YAAY,MAAU;AACpB,MAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,QACzC,EAAgB,EAAM;;IAG1B,MAAK;cAEL,kBAAC,GAAD;KACM;KACJ,OAAO;KACP,aAAa;KACb,MAAM;KACN,WAAW,MAAU;AACnB,QAAgB,EAAM,OAAO,MAAM;;KAE9B;KACP,SAAS,MAAkB;KACjB;KACV,KAAI;KACJ,CAAA;IACE,EAtBC,EAsBD,CACN;GACE,CAAA,CACF"}

package/dist/Repeater-BhkTEUai.js

@@ -0,0 +1,22 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/Repeater.css';var n = {
+	repeater: "_repeater_12czp_1",
+	"repeater--row": "_repeater--row_12czp_5",
+	"repeater--row-reverse": "_repeater--row-reverse_12czp_9",
+	"repeater--column": "_repeater--column_12czp_13",
+	"repeater--column-reverse": "_repeater--column-reverse_12czp_17",
+	"repeater--gap-025": "_repeater--gap-025_12czp_21",
+	"repeater--gap-050": "_repeater--gap-050_12czp_25",
+	"repeater--gap-075": "_repeater--gap-075_12czp_29",
+	"repeater--gap-100": "_repeater--gap-100_12czp_33",
+	"repeater--gap-150": "_repeater--gap-150_12czp_37",
+	"repeater--gap-200": "_repeater--gap-200_12czp_41"
+}, r = ({ children: r, flexDirection: i = "column", gap: a = "050" }) => /* @__PURE__ */ t("div", {
+	className: e(n.repeater, n[`repeater--${i}`], n[`repeater--gap-${a}`]),
+	children: r
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=Repeater-BhkTEUai.js.map

package/dist/Repeater-BhkTEUai.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Repeater-BhkTEUai.js","names":[],"sources":["../src/components/Repeater/Repeater.module.css","../src/components/Repeater/Repeater.tsx"],"sourcesContent":[".repeater {\n  display: flex;\n}\n\n.repeater--row {\n  flex-direction: row;\n}\n\n.repeater--row-reverse {\n  flex-direction: row-reverse;\n}\n\n.repeater--column {\n  flex-direction: column;\n}\n\n.repeater--column-reverse {\n  flex-direction: column-reverse;\n}\n\n.repeater--gap-025 {\n  gap: 0.25rem;\n}\n\n.repeater--gap-050 {\n  gap: 0.5rem;\n}\n\n.repeater--gap-075 {\n  gap: 0.75rem;\n}\n\n.repeater--gap-100 {\n  gap: 1rem;\n}\n\n.repeater--gap-150 {\n  gap: 1.5rem;\n}\n\n.repeater--gap-200 {\n  gap: 2rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Repeater.module.css';\n\nexport interface RepeaterProps {\n  /** The direction of the items. */\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** The gap between the items. */\n  gap?: '025' | '050' | '075' | '100' | '150' | '200';\n}\n\n/** Represents a component to show a list of items. */\nexport const Repeater = ({ children, flexDirection = 'column', gap = '050' }: PropsWithChildren<RepeaterProps>) => {\n  return (\n    <div className={clsx(styles['repeater'], styles[`repeater--${flexDirection}`], styles[`repeater--gap-${gap}`])}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;GCca,KAAY,EAAE,aAAU,mBAAgB,UAAU,SAAM,YAEjE,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,UAAa,EAAO,aAAa,MAAkB,EAAO,iBAAiB,KAAO;CAC3G;CACG,CAAA"}

package/dist/RteEditor.module-Jk80F1FA.js

@@ -0,0 +1,42 @@
+import './assets/RteEditor.css';//#region src/components/RteEditor/RteEditor.module.css
+var e = "_editor__container_17vay_1", t = "_editor__header_17vay_6", n = "_editor_17vay_1", r = "_editor__field_17vay_36", i = "_editor__toolbar_17vay_44", a = "_editor__placeholder_17vay_202", o = {
+	editor__container: e,
+	editor__header: t,
+	"editor__header-word-count": "_editor__header-word-count_17vay_14",
+	"editor__header-word-count--alert": "_editor__header-word-count--alert_17vay_23",
+	editor: n,
+	editor__field: r,
+	"not-valid": "_not-valid_17vay_40",
+	editor__toolbar: i,
+	"editor__toolbar-flyout-wrapper": "_editor__toolbar-flyout-wrapper_17vay_53",
+	"editor__toolbar-button-group": "_editor__toolbar-button-group_17vay_66",
+	"editor__toolbar-button-group--text": "_editor__toolbar-button-group--text_17vay_73",
+	"editor__toolbar-button": "_editor__toolbar-button_17vay_66",
+	"editor__toolbar-button--active": "_editor__toolbar-button--active_17vay_105",
+	"editor__toolbar-button--text": "_editor__toolbar-button--text_17vay_112",
+	"editor__toolbar-button--bold": "_editor__toolbar-button--bold_17vay_132",
+	"editor__toolbar-button--italic": "_editor__toolbar-button--italic_17vay_136",
+	"editor__toolbar-button-flyoutwrapper": "_editor__toolbar-button-flyoutwrapper_17vay_155",
+	"editor__field-wrapper": "_editor__field-wrapper_17vay_159",
+	editor__placeholder: a,
+	"guide-text-ltr": "_guide-text-ltr_17vay_212",
+	"guide-text-rtl": "_guide-text-rtl_17vay_216",
+	"guide-text-paragraph": "_guide-text-paragraph_17vay_220",
+	"guide-text__text--bold": "_guide-text__text--bold_17vay_225",
+	"guide-text__text--italic": "_guide-text__text--italic_17vay_229",
+	"guide-text__list--ul": "_guide-text__list--ul_17vay_233",
+	"guide-text__list--ol": "_guide-text__list--ol_17vay_234",
+	"guide-text__list--listitem": "_guide-text__list--listitem_17vay_246",
+	"guide-text__list--nested-listitem": "_guide-text__list--nested-listitem_17vay_255",
+	"guide-text__list--ul2": "_guide-text__list--ul2_17vay_265",
+	"guide-text__list--ul3": "_guide-text__list--ul3_17vay_269",
+	"guide-text__list--ul4": "_guide-text__list--ul4_17vay_273",
+	"guide-text__list--ul5": "_guide-text__list--ul5_17vay_277",
+	"guide-text__table-wrapper": "_guide-text__table-wrapper_17vay_309",
+	"guide-text__table": "_guide-text__table_17vay_309",
+	"guide-text__course-catalogue-link": "_guide-text__course-catalogue-link_17vay_358"
+};
+//#endregion
+export { o as t };
+
+//# sourceMappingURL=RteEditor.module-Jk80F1FA.js.map

package/dist/RteEditor.module-Jk80F1FA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RteEditor.module-Jk80F1FA.js","names":[],"sources":["../src/components/RteEditor/RteEditor.module.css"],"sourcesContent":[".editor__container {\n  display: flex;\n  flex-direction: column;\n}\n\n.editor__header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n  min-height: 1.5rem;\n}\n\n.editor__header-word-count {\n  align-self: flex-end;\n  font-size: 0.875rem;\n  margin-left: 0.5rem;\n  text-align: right;\n  white-space: nowrap;\n  width: 4.5rem;\n}\n\n.editor__header-word-count--alert {\n  color: var(--color-red-600);\n  font-weight: bold;\n}\n\n.editor {\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-600);\n  border-radius: 4px;\n  margin-bottom: 0.5rem;\n  padding: 0.25rem;\n}\n\n.editor:has(.editor__field:focus-visible) {\n  outline: 1px solid var(--color-navy-600);\n}\n\n.editor.not-valid {\n  border-color: var(--color-red-600);\n}\n\n.editor__toolbar {\n  align-items: center;\n  display: flex;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  margin-bottom: 0.5rem;\n  padding: 0.25rem;\n}\n\n.editor__toolbar-flyout-wrapper {\n  background-color: var(--color-uva-white);\n  border-radius: 0.25rem;\n  box-shadow: 0 3px 6px rgba(0 0 0 / 40%);\n  display: flex;\n  flex-direction: column;\n  left: 0;\n  padding: 1rem;\n  position: fixed;\n  top: calc(100% + 0.25rem);\n  z-index: 1500;\n}\n\n.editor__toolbar-button-group {\n  align-items: center;\n  display: flex;\n  gap: 0.125rem;\n  justify-content: center;\n}\n\n.editor__toolbar-button-group--text {\n  align-items: center;\n  display: flex;\n  gap: 0.5rem;\n  justify-content: center;\n}\n\n.editor__toolbar-button {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  justify-content: center;\n  min-height: 2rem;\n  width: 2rem;\n}\n\n.editor__toolbar-button:hover {\n  background-color: var(--color-grey-400);\n  border: 1px solid var(--color-grey-700);\n}\n\n.editor__toolbar-button:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n  z-index: 1;\n}\n\n.editor__toolbar-button--active,\n.editor__toolbar-button:active {\n  background-color: var(--color-uva-black);\n  border-color: var(--color-uva-black);\n  color: var(--color-uva-white);\n}\n\n.editor__toolbar-button--text {\n  border: 1px solid transparent;\n  font-size: 1rem;\n  padding: 0.25rem 0.5rem;\n  width: auto;\n}\n\n.editor__toolbar-button:disabled {\n  border-color: var(--color-grey-300);\n  color: var(--color-grey-400);\n  cursor: not-allowed;\n}\n\n.editor__toolbar-button:hover:disabled {\n  background-color: var(--color-grey-300);\n  border-color: var(--color-grey-300);\n  color: var(--color-grey-500);\n  cursor: not-allowed;\n}\n\n.editor__toolbar-button--bold {\n  font-weight: bold;\n}\n\n.editor__toolbar-button--italic {\n  font-style: italic;\n}\n\n.editor__toolbar-button:active:hover {\n  color: var(--color-uva-white);\n}\n\n.editor__toolbar-button--active:hover {\n  color: var(--color-uva-black);\n}\n\n.editor__toolbar-button--active:disabled {\n  background-color: var(--color-grey-300);\n  border-color: var(--color-grey-300);\n  color: var(--color-grey-500);\n  cursor: not-allowed;\n}\n\n.editor__toolbar-button-flyoutwrapper {\n  position: relative;\n}\n\n.editor__field-wrapper {\n  position: relative;\n}\n\n.editor__field-wrapper::before {\n  border-top: 1px solid var(--color-grey-600);\n  content: \"\";\n  display: block;\n  height: 0;\n  margin-left: -0.25rem;\n  margin-top: -0.3rem;\n  width: calc(100% + 0.5rem);\n}\n\n.editor__field {\n  background-color: var(--color-uva-white);\n  margin-top: 0.5rem;\n  min-height: 8rem;\n  overflow-x: hidden;\n  padding: 0 0.5rem 0.5rem;\n  position: relative;\n}\n\n.editor__field::-webkit-scrollbar {\n  cursor: default;\n  width: 12px;\n}\n\n.editor__field::-webkit-scrollbar-track {\n  background: var(--color-uva-white);\n}\n\n.editor__field::-webkit-scrollbar-thumb {\n  background-color: var(--color-grey-500);\n  border: 3px solid var(--color-uva-white);\n  border-radius: 20px;\n  cursor: default;\n}\n\n.editor__field:focus-visible {\n  outline: none;\n}\n\n.editor__placeholder {\n  color: var(--color-grey-500);\n  left: 0.45rem;\n  pointer-events: none;\n  position: absolute;\n  top: 0.55rem;\n}\n\n/* Editor theme blockstyles */\n\n.guide-text-ltr {\n  text-align: left;\n}\n\n.guide-text-rtl {\n  text-align: right;\n}\n\n.guide-text-paragraph {\n  margin: 0;\n  position: relative;\n}\n\n.guide-text__text--bold {\n  font-weight: bold;\n}\n\n.guide-text__text--italic {\n  font-style: italic;\n}\n\n.guide-text__list--ul,\n.guide-text__list--ol {\n  list-style-position: inside;\n  margin: 0 0 0 -0.25rem;\n  padding: 0.25rem;\n}\n\n.guide-text__list--ol {\n  list-style-position: outside;\n  list-style-type: decimal;\n  margin: 0 0 0 0.25rem;\n}\n\n.guide-text__list--ul .guide-text__list--listitem {\n  margin: 0;\n}\n\n.guide-text__list--ol .guide-text__list--listitem {\n  margin-left: 0.35rem;\n  padding-left: 0.55rem;\n}\n\n.guide-text__list--ol .guide-text__list--nested-listitem,\n.guide-text__list--ul .guide-text__list--nested-listitem {\n  list-style-type: none;\n  margin-left: 1.5rem;\n}\n\n.guide-text__list--ol .guide-text__list--nested-listitem {\n  margin-left: 1rem;\n}\n\n.guide-text__list--ul2 .guide-text__list--listitem {\n  list-style-type: circle;\n}\n\n.guide-text__list--ul3 .guide-text__list--listitem {\n  list-style-type: square;\n}\n\n.guide-text__list--ul4 .guide-text__list--listitem {\n  list-style-type: disc;\n}\n\n.guide-text__list--ul5 .guide-text__list--listitem {\n  list-style-type: circle;\n}\n\nul .guide-text__list--nested-listitem ol {\n  list-style-position: outside;\n  list-style-type: decimal;\n  margin-left: 0;\n  padding: 0.25rem 0.25rem 0.25rem 0.55rem;\n}\n\nul .guide-text__list--nested-listitem ol .guide-text__list--listitem {\n  list-style-type: decimal;\n  margin-left: 0.35rem;\n  padding-left: 0.55rem;\n}\n\nol .guide-text__list--nested-listitem ul .guide-text__list--listitem {\n  list-style-type: disc;\n  margin-left: 0.35rem;\n  padding-left: 0.55rem;\n}\n\nul .guide-text__list--nested-listitem {\n  list-style-type: none !important;\n}\n\nol .guide-text__list--nested-listitem ul {\n  margin-left: -1.5rem;\n  padding-left: 0.55rem;\n}\n\n.guide-text__table-wrapper {\n  margin: 0 1rem 0.5rem 0;\n  overflow-x: auto;\n}\n\n.guide-text__table {\n  border: 2px solid var(--color-grey-400);\n  border-collapse: collapse;\n  border-collapse: collapse;\n  border-spacing: 0;\n  margin: 0.5rem 0;\n  overflow-x: scroll;\n  overflow-y: scroll;\n  table-layout: fixed;\n  width: fit-content;\n}\n\n/* CSS counts the <colgroup> tag as the first \"row\" in the table. \nTherefore, to apply zebra striping to the actual odd rows, \nthe CSS must target the even rows instead. */\n\n.guide-text__table > tr:nth-child(even) {\n  background-color: var(--color-grey-100);\n}\n\n.guide-text__table > tr td {\n  border: 1px dotted var(--color-grey-400);\n  padding: 0.25rem 0.5rem;\n  position: relative;\n  vertical-align: top;\n}\n\ntd .guide-text__table-wrapper {\n  margin: 0;\n}\n\ntd:has(.guide-text__table-wrapper) {\n  padding: 0 !important;\n}\n\ntd:has(.guide-text__table-wrapper) table {\n  border: 0;\n  margin: 0;\n}\n\ntd:has(.guide-text__table-wrapper) table tr {\n  background-color: transparent !important;\n}\n\n.guide-text__course-catalogue-link {\n  color: var(--color-grey-800);\n  cursor: default;\n  text-decoration: dotted underline;\n}\n"],"mappings":""}

package/dist/SearchField.module-BgxjHaPG.js

@@ -0,0 +1,19 @@
+import './assets/SearchField.css';//#region src/components/SearchField/SearchField.module.css
+var e = {
+	"search-field__input-wrapper": "_search-field__input-wrapper_ung4q_1",
+	"search-field__input-field": "_search-field__input-field_ung4q_8",
+	"search-field__icon": "_search-field__icon_ung4q_35",
+	"search-field__result-wrapper": "_search-field__result-wrapper_ung4q_43",
+	"search-field__input-container": "_search-field__input-container_ung4q_57",
+	"search-field__input-container--hidden": "_search-field__input-container--hidden_ung4q_62",
+	"search-field__input-container--visible": "_search-field__input-container--visible_ung4q_66",
+	"search-field__compact-button": "_search-field__compact-button_ung4q_76",
+	"search-field__compact-icon": "_search-field__compact-icon_ung4q_93",
+	"search-field__result-list": "_search-field__result-list_ung4q_97",
+	"search-field__result-item": "_search-field__result-item_ung4q_110",
+	"search-field__result-info": "_search-field__result-info_ung4q_128"
+};
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=SearchField.module-BgxjHaPG.js.map

package/dist/SearchField.module-BgxjHaPG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.module-BgxjHaPG.js","names":[],"sources":["../src/components/SearchField/SearchField.module.css"],"sourcesContent":[".search-field__input-wrapper {\n  display: flex;\n  justify-content: flex-end;\n  position: relative;\n  width: 100%;\n}\n\n.search-field__input-field {\n  appearance: none;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-400);\n  border-radius: 0.25rem;\n  color: var(--color-uva-black);\n  flex: 1;\n  font-family: inherit;\n  font-size: inherit;\n  height: 2.35rem;\n  margin: 0;\n  padding: 0 2.75rem 0 1rem;\n  text-align: inherit;\n  width: 100%;\n}\n\n.search-field__input-field::placeholder {\n  color: var(--color-grey-700);\n  font-size: inherit;\n  opacity: 1;\n}\n\n.search-field__input-field:focus-visible {\n  background-color: var(--color-grey-300);\n  outline: 1px solid var(--color-grey-700);\n}\n\n.search-field__icon {\n  color: var(--color-grey-700);\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.search-field__result-wrapper {\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-700);\n  border-radius: 0.25rem;\n  display: flex;\n  flex-direction: column;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  top: calc(100% + 0.25rem);\n  width: clamp(22rem, 100%, 24rem);\n  z-index: 10;\n}\n\n.search-field__input-container {\n  position: relative;\n  width: 100%;\n}\n\n.search-field__input-container--hidden {\n  display: none;\n}\n\n.search-field__input-container--visible {\n  display: block;\n  max-width: 22rem;\n  min-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.search-field__compact-button {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-400);\n  border-radius: 0.25rem;\n  color: var(--color-uva-black);\n  cursor: pointer;\n  display: flex;\n  height: 2.35rem;\n  justify-content: center;\n  margin: 0;\n  text-align: inherit;\n  width: 2.35rem;\n}\n\n.search-field__compact-icon {\n  color: var(--color-grey-700);\n}\n\n.search-field__result-list {\n  border-bottom: 1px solid var(--color-grey-700);\n  list-style: none;\n  margin: 0;\n  max-height: min(23.75rem, 50vh);\n  overflow-y: auto;\n  padding: 0;\n}\n\n.search-field__result-list:empty {\n  display: none;\n}\n\n.search-field__result-item {\n  font-size: inherit;\n  max-width: 100%;\n  padding: 0.5rem 1rem;\n  white-space: nowrap;\n}\n\n.search-field__result-item:focus-visible {\n  background-color: var(--color-grey-300);\n  outline: none;\n}\n\n.search-field__result-item:hover,\n.search-field__result-item:focus-visible {\n  background-color: var(--color-grey-300);\n  cursor: pointer;\n}\n\n.search-field__result-info {\n  background-color: var(--color-uva-white);\n  border-radius: 0 0 0.25rem 0.25rem;\n  border-top: 1px solid var(--color-grey-400);\n  font-size: inherit;\n  max-width: 100%;\n  padding: 0.5rem 1rem;\n  white-space: nowrap;\n}\n"],"mappings":""}

package/dist/SectionNotification-CQqwPTqP.js

@@ -0,0 +1,14 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/SectionNotification.css';//#region src/components/SectionNotification/SectionNotification.module.css
+var n = {
+	"section-notification": "_section-notification_1hgo5_1",
+	"section-notification--fullwidth": "_section-notification--fullwidth_1hgo5_10"
+}, r = ({ fullWidth: r = !1, children: i }) => /* @__PURE__ */ t("div", {
+	className: e(n["section-notification"], { [n["section-notification--fullwidth"]]: r }),
+	children: i
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=SectionNotification-CQqwPTqP.js.map

package/dist/SectionNotification-CQqwPTqP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNotification-CQqwPTqP.js","names":[],"sources":["../src/components/SectionNotification/SectionNotification.module.css","../src/components/SectionNotification/SectionNotification.tsx"],"sourcesContent":[".section-notification {\n  align-items: center;\n  background-color: var(--color-orange-100);\n  display: flex;\n  gap: 0.5rem;\n  justify-content: center;\n  padding: 0.75rem 1rem;\n}\n\n.section-notification--fullwidth {\n  width: 100%;\n}\n","import classNames from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './SectionNotification.module.css';\n\nexport interface SectionNotificationProps {\n  /** `true` if the notification bar should be full width; otherwise, `false`. */\n  fullWidth?: boolean;\n}\n\n/** Represents a component to show notifications within a [Card](/story/atoms-card--card-example). */\nexport const SectionNotification = ({ fullWidth = false, children }: PropsWithChildren<SectionNotificationProps>) => (\n  <div\n    className={classNames(styles['section-notification'], {\n      [styles['section-notification--fullwidth']]: fullWidth,\n    })}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;GCYa,KAAuB,EAAE,eAAY,IAAO,kBACvD,kBAAC,OAAD;CACE,WAAW,EAAW,EAAO,yBAAyB,GACnD,EAAO,qCAAqC,GAC9C,CAAC;CAED;CACG,CAAA"}

package/dist/SelectListbox.module-HaPs1CLD.js

@@ -0,0 +1,30 @@
+import './assets/SelectListbox.css';//#region src/components/SelectListbox/SelectListbox.module.css
+var e = {
+	"select-listbox-container": "_select-listbox-container_2e5w6_1",
+	"select-listbox__wrapper": "_select-listbox__wrapper_2e5w6_5",
+	"select-listbox-trigger": "_select-listbox-trigger_2e5w6_15",
+	"select-listbox-trigger--default": "_select-listbox-trigger--default_2e5w6_30",
+	"select-listbox-trigger--small": "_select-listbox-trigger--small_2e5w6_34",
+	"select-listbox-trigger--medium": "_select-listbox-trigger--medium_2e5w6_38",
+	"select-listbox-trigger-label": "_select-listbox-trigger-label_2e5w6_43",
+	"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_2e5w6_52",
+	"select-listbox-trigger--bold": "_select-listbox-trigger--bold_2e5w6_56",
+	"select-listbox-trigger--pill": "_select-listbox-trigger--pill_2e5w6_60",
+	"select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_2e5w6_65",
+	"select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_2e5w6_70",
+	"select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_2e5w6_75",
+	"select-listbox-trigger--roundedLeft": "_select-listbox-trigger--roundedLeft_2e5w6_79",
+	"select-listbox-trigger--roundedRight": "_select-listbox-trigger--roundedRight_2e5w6_83",
+	"select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_2e5w6_97",
+	"select-listbox-trigger--not-valid": "_select-listbox-trigger--not-valid_2e5w6_101",
+	"select-listbox-trigger-icon": "_select-listbox-trigger-icon_2e5w6_113",
+	"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_2e5w6_118",
+	"select-listbox": "_select-listbox_2e5w6_1",
+	"select-listbox-option": "_select-listbox-option_2e5w6_132",
+	"select-listbox-option--active": "_select-listbox-option--active_2e5w6_145",
+	"select-listbox-divider": "_select-listbox-divider_2e5w6_155"
+};
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=SelectListbox.module-HaPs1CLD.js.map

package/dist/SelectListbox.module-HaPs1CLD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectListbox.module-HaPs1CLD.js","names":[],"sources":["../src/components/SelectListbox/SelectListbox.module.css"],"sourcesContent":[".select-listbox-container {\n  position: relative;\n}\n\n.select-listbox__wrapper {\n  border-radius: 0.25rem;\n  box-shadow: 0 0 0.25rem 0 rgba(0 0 0 / 25%);\n  height: auto;\n  overflow: hidden;\n  position: fixed;\n  width: auto;\n  z-index: 20;\n}\n\n.select-listbox-trigger {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-400);\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  justify-content: space-between;\n  line-height: inherit;\n  overflow: hidden;\n  padding: 0.4rem 2rem 0.4rem 1rem;\n  width: 100%;\n}\n\n.select-listbox-trigger--default {\n  padding: 0.75rem 2rem 0.75rem 1rem;\n}\n\n.select-listbox-trigger--small {\n  padding: 0.4rem 2rem 0.4rem 1rem;\n}\n\n.select-listbox-trigger--medium {\n  height: 2.75rem;\n  padding: 0.5rem 2rem 0.5rem 1rem;\n}\n\n.select-listbox-trigger-label {\n  min-height: 0.65rem;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.select-listbox__wrapper--align-right {\n  right: 0;\n}\n\n.select-listbox-trigger--bold {\n  font-weight: var(--semibold);\n}\n\n.select-listbox-trigger--pill {\n  border-radius: 6.25rem;\n  padding: 0.5rem 1.5rem;\n}\n\n.select-listbox-trigger--pillLeft {\n  border-radius: 6.25rem 0 0 6.25rem;\n  padding-left: 1.5rem;\n}\n\n.select-listbox-trigger--pillRight {\n  border-radius: 0 6.25rem 6.25rem 0;\n  padding-right: 1.25rem;\n}\n\n.select-listbox-trigger--darkBorder {\n  border-color: var(--color-uva-black);\n}\n\n.select-listbox-trigger--roundedLeft {\n  border-radius: 0.25rem 0 0 0.25rem;\n}\n\n.select-listbox-trigger--roundedRight {\n  border-radius: 0 0.25rem 0.25rem 0;\n}\n\n.select-listbox-trigger:focus-visible {\n  background-color: var(--color-grey-300);\n  outline: 1px solid var(--color-grey-700);\n}\n\n.select-listbox-trigger:focus-visible,\n.select-listbox-trigger:hover {\n  background-color: var(--color-grey-300);\n}\n\n.select-listbox-trigger--noborder {\n  border: none;\n}\n\n.select-listbox-trigger--not-valid {\n  border-color: var(--color-red-600);\n}\n\n.select-listbox-trigger--pillLeft + .select-listbox__wrapper {\n  left: 1rem;\n}\n\n.select-listbox-trigger--pillRight + .select-listbox__wrapper--align-right {\n  right: 1rem;\n}\n\n.select-listbox-trigger-icon {\n  position: absolute;\n  right: 0.875rem;\n}\n\n.select-listbox-trigger-icon--open {\n  transform: rotate(180deg);\n}\n\n.select-listbox {\n  background-color: var(--color-uva-white);\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 4px;\n  width: fit-content;\n}\n\n.select-listbox-option {\n  align-items: center;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  padding: 0.5rem 0.75rem;\n  position: relative;\n  user-select: none;\n}\n\n/* keyword active is styling that cover both on mouse:hover and keyboard:focus */\n\n.select-listbox-option--active,\n.select-listbox-option:hover {\n  background-color: var(--color-grey-300);\n  box-shadow: 0 0 0 1px var(--color-uva-white);\n}\n\n.select-listbox-option[aria-selected=\"true\"] {\n  font-weight: var(--semibold);\n}\n\n.select-listbox-divider {\n  background-color: var(--color-grey-400);\n  height: 1px;\n  margin: 1px -0.25rem;\n  /* minus side margin to bleed over listbox padding */\n}\n"],"mappings":""}

package/dist/Slider-BlLyrET9.js

@@ -0,0 +1,102 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { useEffect as n, useEffectEvent as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import './assets/Slider.css';var c = {
+	slider_wrapper: "_slider_wrapper_8wxrb_1",
+	slider_button: "_slider_button_8wxrb_8",
+	slider_trackwrapper: "_slider_trackwrapper_8wxrb_38",
+	slider_balloon: "_slider_balloon_8wxrb_44",
+	slider_input: "_slider_input_8wxrb_53"
+}, l = .5, u = 100, d = 16, f = 16, p = ({ min: p, max: m, value: h, step: g = 1, units: _, navigationLabels: v, disabled: y = !1, onChange: b }) => {
+	let [x, S] = a(h === void 0 ? (p + m) * l : h), [C, w] = a(""), T = i(null), E = i(null), D = i(null), O = (e) => {
+		let t = x + e * g;
+		t >= p && t <= m && (S(t), A(t), j(t), b && b(t));
+	}, k = (e) => {
+		let t = Number(e.target.value);
+		S(t), A(t), j(t), b && b(t);
+	}, A = (e) => {
+		if (!T.current) return;
+		let t = (e - p) / (m - p) * u;
+		y ? T.current.style.background = `linear-gradient(
+         to right, 
+         var(--color-grey-700) 0%, 
+         var(--color-grey-700) ${t}%, 
+         var(--color-grey-400) ${t}%, 
+         var(--color-grey-400) 100%)` : T.current.style.background = `linear-gradient(
+         to right, 
+         var(--color-navy-600) 0%, 
+         var(--color-navy-600) ${t}%, 
+         var(--color-grey-400) ${t}%, 
+         var(--color-grey-400) 100%)`;
+	}, j = (e) => {
+		if (E.current && D.current) {
+			let t = D.current.clientWidth, n = E.current.clientWidth - d, r = (e - p) / (m - p) * n - (t - d) * l;
+			w(`${Math.max(0, Math.min(r, n - t + d * l))}px`);
+		}
+	}, M = r((e) => {
+		S(e), A(e), j(e);
+	});
+	return n(() => {
+		h !== void 0 && M(h);
+	}, [h, y]), /* @__PURE__ */ s("div", {
+		className: c.slider_wrapper,
+		children: [
+			/* @__PURE__ */ o("button", {
+				type: "button",
+				className: c.slider_button,
+				onClick: () => O(-1),
+				"aria-label": v?.decrease ? v.decrease : "Verlaag waarde",
+				disabled: y,
+				children: /* @__PURE__ */ o(t, {
+					name: "Minus",
+					size: 20
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: c.slider_trackwrapper,
+				ref: E,
+				children: [/* @__PURE__ */ s("div", {
+					className: e(c.slider_balloon, { [c["slider_balloon--disabled"]]: y }),
+					style: { left: C },
+					ref: D,
+					children: [x, _ && /* @__PURE__ */ o("span", {
+						className: c.slider_units,
+						children: _
+					})]
+				}), /* @__PURE__ */ o("input", {
+					type: "range",
+					className: c.slider_input,
+					min: p,
+					max: m,
+					step: g,
+					value: x,
+					onChange: k,
+					ref: T,
+					style: { "--thumb-size": `${d / f}rem` },
+					"aria-valuemin": p,
+					"aria-valuemax": m,
+					"aria-valuenow": x,
+					"aria-valuetext": _ ? `${x} ${_}` : `${x}`,
+					"aria-label": "Slider",
+					disabled: y
+				})]
+			}),
+			/* @__PURE__ */ o("button", {
+				type: "button",
+				className: c.slider_button,
+				onClick: () => O(1),
+				"aria-label": v?.increase ? v.increase : "Verhoog waarde",
+				disabled: y,
+				children: /* @__PURE__ */ o(t, {
+					name: "Plus",
+					size: 20
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { p as t };
+
+//# sourceMappingURL=Slider-BlLyrET9.js.map

package/dist/Slider-BlLyrET9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-BlLyrET9.js","names":[],"sources":["../src/components/Slider/Slider.module.css","../src/components/Slider/Slider.tsx"],"sourcesContent":[".slider_wrapper {\n  align-items: center;\n  display: flex;\n  gap: 1rem;\n  width: 100%;\n}\n\n.slider_button {\n  align-items: center;\n  appearance: none;\n  aspect-ratio: 1 / 1;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  color: var(--color-uva-black);\n  cursor: pointer;\n  display: flex;\n  height: 2rem;\n  justify-content: center;\n  width: 2rem;\n}\n\n.slider_button:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.slider_button:hover {\n  border-color: var(--color-grey-700);\n}\n\n.slider_button:disabled,\n.slider_button:disabled:hover {\n  border: none;\n  cursor: not-allowed;\n}\n\n.slider_trackwrapper {\n  display: flex;\n  position: relative;\n  width: 100%;\n}\n\n.slider_balloon {\n  color: var(--color-uva-black);\n  font-weight: var(--semibold);\n  position: absolute;\n  text-align: center;\n  top: -1.8125rem;\n  white-space: nowrap;\n}\n\n.slider_input {\n  appearance: none;\n  background: var(--color-grey-400);\n  flex-grow: 1;\n  height: 0.25rem;\n}\n\n.slider_input:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.slider_input:disabled {\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-runnable-track {\n  appearance: none;\n  color: var(--color-navy-600);\n  cursor: pointer;\n  height: 2rem;\n  margin-top: -0.125rem;\n}\n\n.slider_input:disabled::-webkit-slider-runnable-track {\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(0.5rem + 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-webkit-slider-thumb,\n.slider_input:disabled:hover::-webkit-slider-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-moz-range-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(-0.25rem - 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-moz-range-thumb,\n.slider_input:hover:disabled::-moz-range-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-ms-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(-0.25rem - 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-ms-thumb,\n.slider_input:hover:disabled::-ms-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-moz-range-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-ms-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-moz-range-progress {\n  background-color: var(--color-navy-600);\n}\n\n.slider_input::-moz-range-track {\n  background-color: var(--color-grey-400);\n}\n\n.slider_input::-ms-fill-lower {\n  background-color: var(--color-navy-600);\n}\n\n.slider_input::-ms-fill-upper {\n  background-color: var(--color-grey-400);\n}\n","import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n  /* The minimum value of the slider */\r\n  min: number;\r\n  /* The maximum value of the slider */\r\n  max: number;\r\n  /* The current value of the slider */\r\n  value?: number;\r\n  /* The step value of the slider */\r\n  step?: number;\r\n  /* The units to display next to the value */\r\n  units?: string;\r\n  /* aria-label labels for navigation buttons  */\r\n  navigationLabels?: { increase: string; decrease: string };\r\n  /* Whether the slider is disabled */\r\n  disabled?: boolean;\r\n  /* Callback function when the value changes */\r\n  onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n  min,\r\n  max,\r\n  value,\r\n  step = 1,\r\n  units,\r\n  navigationLabels,\r\n  disabled = false,\r\n  onChange,\r\n}: SliderProps) => {\r\n  const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n  const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n  const sliderRef = useRef<HTMLInputElement>(null);\r\n  const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n  const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleButtonClick = (direction: number) => {\r\n    const newValue = sliderValue + direction * step;\r\n    if (newValue >= min && newValue <= max) {\r\n      setSliderValue(newValue);\r\n      paintValueOnTrack(newValue);\r\n      setFloaterPosition(newValue);\r\n      if (onChange) {\r\n        onChange(newValue);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const newValue = Number(event.target.value);\r\n    setSliderValue(newValue);\r\n    paintValueOnTrack(newValue);\r\n    setFloaterPosition(newValue);\r\n    if (onChange) {\r\n      onChange(newValue);\r\n    }\r\n  };\r\n\r\n  const paintValueOnTrack = (valueToPaint: number) => {\r\n    if (!sliderRef.current) return;\r\n    const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n    if (disabled) {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--color-grey-700) 0%, \r\n         var(--color-grey-700) ${percentage}%, \r\n         var(--color-grey-400) ${percentage}%, \r\n         var(--color-grey-400) 100%)`;\r\n    } else {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--color-navy-600) 0%, \r\n         var(--color-navy-600) ${percentage}%, \r\n         var(--color-grey-400) ${percentage}%, \r\n         var(--color-grey-400) 100%)`;\r\n    }\r\n  };\r\n\r\n  const setFloaterPosition = (value: number) => {\r\n    if (trackWrapperRef.current && balloonRef.current) {\r\n      const balloonWidth = balloonRef.current.clientWidth;\r\n      const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n      const position = ((value - min) / (max - min)) * trackWidth;\r\n      const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n      const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n      setBalloonLeftPosition(`${clampedLeft}px`);\r\n    }\r\n  };\r\n\r\n  const initializeSlider = useEffectEvent((value: number) => {\r\n    setSliderValue(value);\r\n    paintValueOnTrack(value);\r\n    setFloaterPosition(value);\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (value !== undefined) {\r\n      initializeSlider(value);\r\n    }\r\n  }, [value, disabled]);\r\n\r\n  return (\r\n    <div className={styles['slider_wrapper']}>\r\n      <button\r\n        type=\"button\"\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(-1)}\r\n        aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Minus\" size={20} />\r\n      </button>\r\n      <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n        <div\r\n          className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n          style={{ left: balloonLeftPosition }}\r\n          ref={balloonRef}\r\n        >\r\n          {sliderValue}\r\n          {units && <span className={styles['slider_units']}>{units}</span>}\r\n        </div>\r\n        <input\r\n          type=\"range\"\r\n          className={styles['slider_input']}\r\n          min={min}\r\n          max={max}\r\n          step={step}\r\n          value={sliderValue}\r\n          onChange={handleSliderChange}\r\n          ref={sliderRef}\r\n          style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n          aria-valuemin={min}\r\n          aria-valuemax={max}\r\n          aria-valuenow={sliderValue}\r\n          aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n          aria-label=\"Slider\"\r\n          disabled={disabled}\r\n        />\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(1)}\r\n        aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Plus\" size={20} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;GC4BM,IAAY,IACZ,IAAU,KACV,IAAa,IACb,IAAM,IAEC,KAAU,EACrB,QACA,QACA,UACA,UAAO,GACP,UACA,qBACA,cAAW,IACX,kBACiB;CACjB,IAAM,CAAC,GAAa,KAAkB,EAAS,MAAU,KAAA,KAAqB,IAAM,KAAO,IAAtB,EAAgC,EAC/F,CAAC,GAAqB,KAA0B,EAAS,GAAG,EAC5D,IAAY,EAAyB,KAAK,EAC1C,IAAkB,EAAuB,KAAK,EAC9C,IAAa,EAAuB,KAAK,EAEzC,KAAqB,MAAsB;EAC/C,IAAM,IAAW,IAAc,IAAY;AAC3C,EAAI,KAAY,KAAO,KAAY,MACjC,EAAe,EAAS,EACxB,EAAkB,EAAS,EAC3B,EAAmB,EAAS,EACxB,KACF,EAAS,EAAS;IAKlB,KAAsB,MAA+C;EACzE,IAAM,IAAW,OAAO,EAAM,OAAO,MAAM;AAI3C,EAHA,EAAe,EAAS,EACxB,EAAkB,EAAS,EAC3B,EAAmB,EAAS,EACxB,KACF,EAAS,EAAS;IAIhB,KAAqB,MAAyB;AAClD,MAAI,CAAC,EAAU,QAAS;EACxB,IAAM,KAAe,IAAe,MAAQ,IAAM,KAAQ;AAC1D,EAAI,IACF,EAAU,QAAQ,MAAM,aAAa;;;iCAGV,EAAW;iCACX,EAAW;wCAGtC,EAAU,QAAQ,MAAM,aAAa;;;iCAGV,EAAW;iCACX,EAAW;;IAKpC,KAAsB,MAAkB;AAC5C,MAAI,EAAgB,WAAW,EAAW,SAAS;GACjD,IAAM,IAAe,EAAW,QAAQ,aAClC,IAAa,EAAgB,QAAQ,cAAc,GAEnD,KADa,IAAQ,MAAQ,IAAM,KAAQ,KAChB,IAAe,KAAc;AAE9D,KAAuB,GADH,KAAK,IAAI,GAAG,KAAK,IAAI,GAAc,IAAa,IAAe,IAAa,EAAU,CAAC,CACrE,IAAI;;IAIxC,IAAmB,GAAgB,MAAkB;AAGzD,EAFA,EAAe,EAAM,EACrB,EAAkB,EAAM,EACxB,EAAmB,EAAM;GACzB;AAQF,QANA,QAAgB;AACd,EAAI,MAAU,KAAA,KACZ,EAAiB,EAAM;IAExB,CAAC,GAAO,EAAS,CAAC,EAGnB,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB;GACE,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,eAAe,EAAkB,GAAG;IACpC,cAAY,GAAkB,WAAW,EAAiB,WAAW;IAC3D;cAEV,kBAAC,GAAD;KAAM,MAAK;KAAQ,MAAM;KAAM,CAAA;IACxB,CAAA;GACT,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAwB,KAAK;cAApD,CACE,kBAAC,OAAD;KACE,WAAW,EAAK,EAAO,gBAAmB,GAAG,EAAO,8BAA8B,GAAU,CAAC;KAC7F,OAAO,EAAE,MAAM,GAAqB;KACpC,KAAK;eAHP,CAKG,GACA,KAAS,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAkB;MAAa,CAAA,CAC7D;QACN,kBAAC,SAAD;KACE,MAAK;KACL,WAAW,EAAO;KACb;KACA;KACC;KACN,OAAO;KACP,UAAU;KACV,KAAK;KACL,OAAO,EAAE,gBAAgB,GAAG,IAAa,EAAI,MAAM;KACnD,iBAAe;KACf,iBAAe;KACf,iBAAe;KACf,kBAAgB,IAAQ,GAAG,EAAY,GAAG,MAAU,GAAG;KACvD,cAAW;KACD;KACV,CAAA,CACE;;GACN,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,eAAe,EAAkB,EAAE;IACnC,cAAY,GAAkB,WAAW,EAAiB,WAAW;IAC3D;cAEV,kBAAC,GAAD;KAAM,MAAK;KAAO,MAAM;KAAM,CAAA;IACvB,CAAA;GACL"}

package/dist/Sortable.module-BTUOSbOU.js

@@ -0,0 +1,27 @@
+import './assets/Sortable.css';//#region src/components/Sortable/Sortable.module.css
+var e = "_sortable__wrapper_1jxfw_1", t = "_sortable__container_1jxfw_13", n = "_sortable__handle_1jxfw_159", r = {
+	sortable__wrapper: e,
+	"sortable__wrapper--scrollable": "_sortable__wrapper--scrollable_1jxfw_5",
+	sortable__container: t,
+	"sortable__drop-target": "_sortable__drop-target_1jxfw_24",
+	"sortable__drop-target--no-number": "_sortable__drop-target--no-number_1jxfw_41",
+	"sortable__sort-item": "_sortable__sort-item_1jxfw_59",
+	"sortable__sort-item--grey-200": "_sortable__sort-item--grey-200_1jxfw_70",
+	"sortable__sort-item--white": "_sortable__sort-item--white_1jxfw_74",
+	"sortable__sort-item--ghost": "_sortable__sort-item--ghost_1jxfw_82",
+	"sortable__sort-item__handle": "_sortable__sort-item__handle_1jxfw_93",
+	"sortable__sort-item__button-container": "_sortable__sort-item__button-container_1jxfw_103",
+	"sortable__sort-item__handle--icon": "_sortable__sort-item__handle--icon_1jxfw_122",
+	"sortable__sort-item__handle--up": "_sortable__sort-item__handle--up_1jxfw_129",
+	"sortable__sort-item__handle--down": "_sortable__sort-item__handle--down_1jxfw_130",
+	"sortable__sort-item--dragging": "_sortable__sort-item--dragging_1jxfw_141",
+	"sortable__sort-item__contents": "_sortable__sort-item__contents_1jxfw_145",
+	"sortable__sort-item__contents--handle-right": "_sortable__sort-item__contents--handle-right_1jxfw_154",
+	sortable__handle: n,
+	"sortable__handle--right": "_sortable__handle--right_1jxfw_165",
+	"sortable__visually-hidden": "_sortable__visually-hidden_1jxfw_184"
+};
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=Sortable.module-BTUOSbOU.js.map

package/dist/Sortable.module-BTUOSbOU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sortable.module-BTUOSbOU.js","names":[],"sources":["../src/components/Sortable/Sortable.module.css"],"sourcesContent":[".sortable__wrapper {\n  position: relative;\n}\n\n.sortable__wrapper--scrollable {\n  border-bottom: 1px solid var(--color-grey-300);\n  border-top: 1px solid var(--color-grey-300);\n  margin-bottom: 1rem;\n  max-height: 21rem;\n  overflow-y: auto;\n}\n\n.sortable__container {\n  --item-min-height: 3.75rem;\n  counter-reset: container;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  list-style: none;\n  margin: 1rem 1rem 1rem 0;\n  padding: 0;\n}\n\n.sortable__drop-target {\n  display: flex;\n  gap: 1rem;\n  min-height: var(--item-min-height);\n  position: relative;\n}\n\n.sortable__drop-target::before {\n  align-items: center;\n  content: counter(container);\n  counter-increment: container;\n  display: flex;\n  opacity: 1;\n  position: relative;\n  transition: opacity 0.25s;\n}\n\n.sortable__drop-target--no-number::before {\n  content: none;\n}\n\n.sortable__drop-target::after {\n  content: \"\";\n  display: block;\n  height: 1px;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 1;\n}\n\n.sortable__drop-target:last-child::after {\n  display: inline;\n}\n\n.sortable__sort-item {\n  align-items: center;\n  border-radius: 0.5rem;\n  display: flex;\n  gap: 1rem;\n  min-height: var(--item-min-height);\n  position: relative;\n  width: 100%;\n  z-index: 0;\n}\n\n.sortable__sort-item--grey-200 {\n  background-color: var(--color-grey-200);\n}\n\n.sortable__sort-item--white {\n  background-color: var(--color-uva-white);\n}\n\n.sortable__sort-item:focus {\n  z-index: 2;\n}\n\n.sortable__sort-item--ghost {\n  -webkit-user-drag: none;\n  margin: 0 1rem;\n  opacity: 0.5;\n  padding: 0.5rem 0;\n  pointer-events: none;\n  position: fixed;\n  visibility: hidden;\n  z-index: 2;\n}\n\n.sortable__sort-item__handle {\n  appearance: none;\n  background: none;\n  background-color: var(--color-uva-white);\n  border: 0;\n  cursor: grab;\n  height: 2.625rem;\n  width: 2.625rem;\n}\n\n.sortable__sort-item__button-container {\n  align-items: center;\n  background-color: var(--color-grey-300);\n  border-left: 1px solid var(--color-grey-300);\n  border-radius: 0 0.5rem 0.5rem 0;\n  display: flex;\n  flex-direction: column;\n  inset: 0 0 0 auto;\n  margin-right: 1px;\n  overflow: hidden;\n  position: absolute;\n  width: 2.625rem;\n  z-index: 20;\n}\n\n.sortable__sort-item__button-container[data-touch=\"false\"] {\n  display: none;\n}\n\n.sortable__sort-item__handle--icon {\n  align-items: center;\n  display: flex;\n  height: 1rem;\n  width: 1rem;\n}\n\n.sortable__sort-item__handle--up,\n.sortable__sort-item__handle--down {\n  color: black;\n  display: none;\n  height: 100%;\n  right: 0.5rem;\n}\n\n.sortable__sort-item__handle--up {\n  transform: rotate(180deg);\n}\n\n.sortable__sort-item--dragging .sortable__sort-item__handle {\n  cursor: grabbing;\n}\n\n.sortable__sort-item__contents {\n  align-items: center;\n  color: var(--color-uva-black);\n  display: flex;\n  gap: 0.5rem;\n  padding: 0.5rem;\n  width: 100%;\n}\n\n.sortable__sort-item__contents--handle-right {\n  padding-left: 1rem;\n  padding-right: 2.5rem;\n}\n\n.sortable__handle {\n  color: var(--color-grey-700);\n  cursor: grab;\n  display: flex;\n}\n\n.sortable__handle--right {\n  position: absolute;\n  right: 0.5rem;\n}\n\n/** Target touch enabled devices and screen readers */\n\n.sortable__sort-item__button-container[data-touch=\"true\"] {\n  gap: 1px;\n  justify-content: center;\n}\n\n.sortable__sort-item__button-container[data-touch=\"true\"] .sortable__sort-item__handle--up,\n.sortable__sort-item__button-container[data-touch=\"true\"] .sortable__sort-item__handle--down {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n\n.sortable__visually-hidden {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0 -1px -1px 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n"],"mappings":""}

package/dist/SortableProvider-Dc7hwkb5.js

@@ -0,0 +1,147 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { t } from "./Sortable.module-BTUOSbOU.js";
+import { initialState as n, sortableReducer as r } from "./components/Sortable/sortableReducer.js";
+import { clearDraggingSource as i, clearDraggingTarget as a, dragEnd as o, dragStart as s, drop as c, moveToPosition as l, reset as u, setClone as d, setDraggingSource as f, setDraggingTarget as p } from "./components/Sortable/actions.js";
+import { cloneElement as m, createContext as h, useContext as g, useEffect as _, useReducer as v, useRef as y } from "react";
+import { jsx as b } from "react/jsx-runtime";
+//#region src/components/Sortable/components/SortableContainer.tsx
+function x({ scrollable: n, hideNumbers: r, onSort: i }) {
+	let { clone: a, draggingTarget: o, drop: s, sortableItems: c, setDraggingTarget: l, reset: u, indices: d } = E(), f = y(null), p = y(null), h = y(d);
+	function g(e) {
+		let t = f.current;
+		if (!t?.hasChildNodes()) return;
+		let n = e.currentTarget;
+		return Array.from(t.childNodes).findIndex((e) => e.isEqualNode(n));
+	}
+	function v(e) {
+		let t = g(e);
+		t !== void 0 && (a && p.current && p.current.removeChild(a), s(t));
+	}
+	function x(e) {
+		if (e.preventDefault(), e.dataTransfer.dropEffect = "move", a) {
+			let { clientX: t, clientY: n } = e, { x: r, y: i, width: o, height: s } = e.currentTarget.getBoundingClientRect(), c = s / 2 - (n - i);
+			a.setAttribute("style", `
+        left: ${t - (t - r)}px;
+        top: ${i - c}px;
+        height: ${s}px;
+        width: ${o}px;
+        visibility: visible;
+      `);
+		}
+		let t = g(e);
+		t === void 0 || t === o || l(t);
+	}
+	function S(e) {
+		let { relatedTarget: t } = e;
+		t !== null && f.current?.contains(t) || (u(), a && a.setAttribute("style", "visibility: hidden;"));
+	}
+	return _(() => {
+		if (!(!a || !p.current)) return p.current.appendChild(a), function() {
+			a.remove();
+		};
+	}, [a]), _(() => {
+		i && d.valueOf() !== h.current.valueOf() && (i(d), h.current = d);
+	}, [
+		d,
+		h,
+		i
+	]), /* @__PURE__ */ b("div", {
+		className: e(t.sortable__wrapper, { [t["sortable__wrapper--scrollable"]]: n }),
+		ref: p,
+		children: /* @__PURE__ */ b("ul", {
+			className: e(t.sortable__container, { [t["sortable__container--drag-over"]]: a !== void 0 }),
+			onDragLeave: S,
+			ref: f,
+			role: "presentation",
+			children: c.map((n, i) => /* @__PURE__ */ b("li", {
+				className: e(t["sortable__drop-target"], { [t["sortable__drop-target--no-number"]]: r }),
+				draggable: !1,
+				onDragOver: x,
+				onDrop: v,
+				role: "presentation",
+				children: m(n, { index: i })
+			}, i))
+		})
+	});
+}
+//#endregion
+//#region src/components/Sortable/SortableProvider.tsx
+var S = h(void 0);
+function C(e) {
+	return typeof e != "string";
+}
+var w = (e) => {
+	let t = e.filter(C);
+	return {
+		...n,
+		indices: t.map(({ props: e }) => e.index),
+		maxIndex: t.length - 1,
+		sortableItems: t
+	};
+};
+function T({ renderItems: e, dataItems: t, scrollable: n, hideNumbers: m, onSort: h }) {
+	let g = y(t), [_, C] = v(r, e, w);
+	function T(e) {
+		C(f(e));
+	}
+	function E(e) {
+		C(p(e));
+	}
+	function D(e) {
+		C(l(e));
+	}
+	function O() {
+		C(a());
+	}
+	function k() {
+		C(i());
+	}
+	function A(e) {
+		C(c(e));
+	}
+	function j(e) {
+		C(s(e));
+	}
+	function M() {
+		C(o());
+	}
+	function N() {
+		C(u());
+	}
+	function P(e) {
+		C(d(e));
+	}
+	function F(e) {
+		let t = e.map((e) => g.current[e]);
+		h && h(t);
+	}
+	return /* @__PURE__ */ b(S.Provider, {
+		value: {
+			..._,
+			clearDraggingSource: k,
+			clearDraggingTarget: O,
+			dragEnd: M,
+			dragStart: j,
+			drop: A,
+			moveToPosition: D,
+			reset: N,
+			setClone: P,
+			setDraggingSource: T,
+			setDraggingTarget: E
+		},
+		children: /* @__PURE__ */ b(x, {
+			scrollable: n,
+			hideNumbers: m,
+			onSort: F
+		})
+	});
+}
+function E() {
+	let e = g(S);
+	if (e === void 0) throw Error("useSortable must be used within a SortableProvider");
+	return e;
+}
+//#endregion
+export { E as n, x as r, T as t };
+
+//# sourceMappingURL=SortableProvider-Dc7hwkb5.js.map

package/dist/SortableProvider-Dc7hwkb5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableProvider-Dc7hwkb5.js","names":[],"sources":["../src/components/Sortable/components/SortableContainer.tsx","../src/components/Sortable/SortableProvider.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent } from 'react';\n\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport type OnSort = (indices: number[]) => void;\n\ninterface SortableContainerProps {\n  scrollable?: boolean;\n  hideNumbers?: boolean;\n  onSort?: OnSort;\n}\n\nexport function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps) {\n  const { clone, draggingTarget, drop, sortableItems, setDraggingTarget, reset, indices } = useSortable();\n  const containerRef = useRef<HTMLUListElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const indicesRef = useRef<number[]>(indices);\n\n  function getTargetIndex(event: DragEvent<HTMLLIElement>) {\n    const sortableContainer = containerRef.current;\n\n    if (!sortableContainer?.hasChildNodes()) return;\n\n    const listItemNode = event.currentTarget;\n    const childNodes = Array.from(sortableContainer.childNodes);\n    const targetIndex = childNodes.findIndex((node) => node.isEqualNode(listItemNode));\n\n    return targetIndex;\n  }\n\n  function handleDrop(event: DragEvent<HTMLLIElement>) {\n    const targetIndex = getTargetIndex(event);\n\n    if (targetIndex === undefined) return;\n\n    if (clone && wrapperRef.current) wrapperRef.current.removeChild(clone);\n\n    drop(targetIndex);\n  }\n\n  function handleDragOver(event: DragEvent<HTMLLIElement>) {\n    // Prevent default to allow drop\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'move';\n\n    if (clone) {\n      const { clientX, clientY } = event;\n      const { x, y, width, height } = event.currentTarget.getBoundingClientRect();\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const grabPosition = height / 2 - (clientY - y);\n\n      // lock drag image movement to x-axis and mouse pointer\n      clone.setAttribute(\n        'style',\n        `\n        left: ${clientX - (clientX - x)}px;\n        top: ${y - grabPosition}px;\n        height: ${height}px;\n        width: ${width}px;\n        visibility: visible;\n      `\n      );\n    }\n\n    const targetIndex = getTargetIndex(event);\n\n    if (targetIndex === undefined || targetIndex === draggingTarget) return;\n\n    setDraggingTarget(targetIndex);\n  }\n\n  function handleContainerDragLeave(event: DragEvent<HTMLUListElement>) {\n    const { relatedTarget } = event;\n\n    const within = relatedTarget !== null && containerRef.current?.contains(relatedTarget as Node);\n\n    if (!within) {\n      reset();\n\n      if (clone) {\n        clone.setAttribute('style', 'visibility: hidden;');\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (!clone || !wrapperRef.current) return;\n\n    wrapperRef.current.appendChild(clone);\n\n    return function () {\n      clone.remove();\n    };\n  }, [clone]);\n\n  useEffect(() => {\n    if (!onSort) return;\n\n    if (indices.valueOf() !== indicesRef.current.valueOf()) {\n      onSort(indices);\n\n      indicesRef.current = indices;\n    }\n  }, [indices, indicesRef, onSort]);\n\n  return (\n    <div\n      className={clsx(styles['sortable__wrapper'], { [styles['sortable__wrapper--scrollable']]: scrollable })}\n      ref={wrapperRef}\n    >\n      <ul\n        className={clsx(styles['sortable__container'], {\n          [styles['sortable__container--drag-over']]: clone !== undefined,\n        })}\n        onDragLeave={handleContainerDragLeave}\n        ref={containerRef}\n        role=\"presentation\"\n      >\n        {sortableItems.map((child, index) => (\n          <li\n            className={clsx(styles['sortable__drop-target'], {\n              [styles['sortable__drop-target--no-number']]: hideNumbers,\n            })}\n            draggable={false}\n            key={index}\n            onDragOver={handleDragOver}\n            onDrop={handleDrop}\n            role=\"presentation\"\n          >\n            {cloneElement(child, { index })}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n","import { createContext, useContext, useReducer, useRef } from 'react';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport type { SortableStateType } from './sortableReducer';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport { sortableReducer, initialState } from './sortableReducer';\nimport { SortableContainer } from './components/SortableContainer';\nimport * as actions from './actions';\n\ntype SortableContextType = {\n  clearDraggingSource: () => void;\n  clearDraggingTarget: () => void;\n  dragEnd: () => void;\n  dragStart: (index: number) => void;\n  drop: (index: number) => void;\n  moveToPosition: (index: number) => void;\n  reset: () => void;\n  setClone: (node: Element) => void;\n  setDraggingSource: (index: number) => void;\n  setDraggingTarget: (index: number) => void;\n};\n\nconst SortableContext = createContext<(SortableContextType & SortableStateType) | undefined>(undefined);\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\ninterface Props<T = unknown> {\n  renderItems: SortableItems;\n  dataItems: T[];\n  scrollable?: boolean;\n  hideNumbers?: boolean;\n  onSort?: (items: T[]) => void;\n  children?: ReactNode;\n}\n\nfunction isReactElementWithIndex(value: string | ReactElement): value is ReactElement<{ index: number }> {\n  return typeof value !== 'string';\n}\n\nconst init = (renderItems: SortableItems): SortableStateType => {\n  const reactChildren = renderItems.filter(isReactElementWithIndex);\n\n  return {\n    ...initialState,\n    indices: reactChildren.map(({ props }) => props.index),\n    maxIndex: reactChildren.length - 1,\n    sortableItems: reactChildren,\n  };\n};\n\nexport function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>) {\n  const persistentItems = useRef(dataItems);\n\n  const [state, dispatch] = useReducer(sortableReducer, renderItems, init);\n\n  function setDraggingSource(index: number) {\n    dispatch(actions.setDraggingSource(index));\n  }\n\n  function setDraggingTarget(index: number) {\n    dispatch(actions.setDraggingTarget(index));\n  }\n\n  function moveToPosition(index: number) {\n    dispatch(actions.moveToPosition(index));\n  }\n\n  function clearDraggingTarget() {\n    dispatch(actions.clearDraggingTarget());\n  }\n\n  function clearDraggingSource() {\n    dispatch(actions.clearDraggingSource());\n  }\n\n  function drop(index: number) {\n    dispatch(actions.drop(index));\n  }\n\n  function dragStart(index: number) {\n    dispatch(actions.dragStart(index));\n  }\n\n  function dragEnd() {\n    dispatch(actions.dragEnd());\n  }\n\n  function reset() {\n    dispatch(actions.reset());\n  }\n\n  function setClone(node: Element) {\n    dispatch(actions.setClone(node));\n  }\n\n  function onHandleSort(sortedIndices: number[]) {\n    const sortedData = sortedIndices.map((index) => persistentItems.current[index]);\n    onSort && onSort(sortedData);\n  }\n\n  return (\n    <SortableContext.Provider\n      value={{\n        ...state,\n        clearDraggingSource,\n        clearDraggingTarget,\n        dragEnd,\n        dragStart,\n        drop,\n        moveToPosition,\n        reset,\n        setClone,\n        setDraggingSource,\n        setDraggingTarget,\n      }}\n    >\n      <SortableContainer scrollable={scrollable} hideNumbers={hideNumbers} onSort={onHandleSort} />\n    </SortableContext.Provider>\n  );\n}\n\nexport function useSortable() {\n  const context = useContext(SortableContext);\n\n  if (context === undefined) {\n    throw new Error('useSortable must be used within a SortableProvider');\n  }\n\n  return context;\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,EAAkB,EAAE,eAAY,gBAAa,aAAkC;CAC7F,IAAM,EAAE,UAAO,mBAAgB,SAAM,kBAAe,sBAAmB,UAAO,eAAY,GAAa,EACjG,IAAe,EAAyB,KAAK,EAC7C,IAAa,EAAuB,KAAK,EACzC,IAAa,EAAiB,EAAQ;CAE5C,SAAS,EAAe,GAAiC;EACvD,IAAM,IAAoB,EAAa;AAEvC,MAAI,CAAC,GAAmB,eAAe,CAAE;EAEzC,IAAM,IAAe,EAAM;AAI3B,SAHmB,MAAM,KAAK,EAAkB,WAAW,CAC5B,WAAW,MAAS,EAAK,YAAY,EAAa,CAAC;;CAKpF,SAAS,EAAW,GAAiC;EACnD,IAAM,IAAc,EAAe,EAAM;AAErC,QAAgB,KAAA,MAEhB,KAAS,EAAW,WAAS,EAAW,QAAQ,YAAY,EAAM,EAEtE,EAAK,EAAY;;CAGnB,SAAS,EAAe,GAAiC;AAKvD,MAHA,EAAM,gBAAgB,EACtB,EAAM,aAAa,aAAa,QAE5B,GAAO;GACT,IAAM,EAAE,YAAS,eAAY,GACvB,EAAE,MAAG,MAAG,UAAO,cAAW,EAAM,cAAc,uBAAuB,EAErE,IAAe,IAAS,KAAK,IAAU;AAG7C,KAAM,aACJ,SACA;gBACQ,KAAW,IAAU,GAAG;eACzB,IAAI,EAAa;kBACd,EAAO;iBACR,EAAM;;QAGhB;;EAGH,IAAM,IAAc,EAAe,EAAM;AAErC,QAAgB,KAAA,KAAa,MAAgB,KAEjD,EAAkB,EAAY;;CAGhC,SAAS,EAAyB,GAAoC;EACpE,IAAM,EAAE,qBAAkB;AAI1B,EAFe,MAAkB,QAAQ,EAAa,SAAS,SAAS,EAAsB,KAG5F,GAAO,EAEH,KACF,EAAM,aAAa,SAAS,sBAAsB;;AAyBxD,QApBA,QAAgB;AACV,SAAC,KAAS,CAAC,EAAW,SAI1B,QAFA,EAAW,QAAQ,YAAY,EAAM,EAE9B,WAAY;AACjB,KAAM,QAAQ;;IAEf,CAAC,EAAM,CAAC,EAEX,QAAgB;AACT,OAED,EAAQ,SAAS,KAAK,EAAW,QAAQ,SAAS,KACpD,EAAO,EAAQ,EAEf,EAAW,UAAU;IAEtB;EAAC;EAAS;EAAY;EAAO,CAAC,EAG/B,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,mBAAsB,GAAG,EAAO,mCAAmC,GAAY,CAAC;EACvG,KAAK;YAEL,kBAAC,MAAD;GACE,WAAW,EAAK,EAAO,qBAAwB,GAC5C,EAAO,oCAAoC,MAAU,KAAA,GACvD,CAAC;GACF,aAAa;GACb,KAAK;GACL,MAAK;aAEJ,EAAc,KAAK,GAAO,MACzB,kBAAC,MAAD;IACE,WAAW,EAAK,EAAO,0BAA0B,GAC9C,EAAO,sCAAsC,GAC/C,CAAC;IACF,WAAW;IAEX,YAAY;IACZ,QAAQ;IACR,MAAK;cAEJ,EAAa,GAAO,EAAE,UAAO,CAAC;IAC5B,EANE,EAMF,CACL;GACC,CAAA;EACD,CAAA;;;;AClHV,IAAM,IAAkB,EAAqE,KAAA,EAAU;AAavG,SAAS,EAAwB,GAAwE;AACvG,QAAO,OAAO,KAAU;;AAG1B,IAAM,KAAQ,MAAkD;CAC9D,IAAM,IAAgB,EAAY,OAAO,EAAwB;AAEjE,QAAO;EACL,GAAG;EACH,SAAS,EAAc,KAAK,EAAE,eAAY,EAAM,MAAM;EACtD,UAAU,EAAc,SAAS;EACjC,eAAe;EAChB;;AAGH,SAAgB,EAAoB,EAAE,gBAAa,cAAW,eAAY,gBAAa,aAAoB;CACzG,IAAM,IAAkB,EAAO,EAAU,EAEnC,CAAC,GAAO,KAAY,EAAW,GAAiB,GAAa,EAAK;CAExE,SAAS,EAAkB,GAAe;AACxC,IAAS,EAA0B,EAAM,CAAC;;CAG5C,SAAS,EAAkB,GAAe;AACxC,IAAS,EAA0B,EAAM,CAAC;;CAG5C,SAAS,EAAe,GAAe;AACrC,IAAS,EAAuB,EAAM,CAAC;;CAGzC,SAAS,IAAsB;AAC7B,IAAS,GAA6B,CAAC;;CAGzC,SAAS,IAAsB;AAC7B,IAAS,GAA6B,CAAC;;CAGzC,SAAS,EAAK,GAAe;AAC3B,IAAS,EAAa,EAAM,CAAC;;CAG/B,SAAS,EAAU,GAAe;AAChC,IAAS,EAAkB,EAAM,CAAC;;CAGpC,SAAS,IAAU;AACjB,IAAS,GAAiB,CAAC;;CAG7B,SAAS,IAAQ;AACf,IAAS,GAAe,CAAC;;CAG3B,SAAS,EAAS,GAAe;AAC/B,IAAS,EAAiB,EAAK,CAAC;;CAGlC,SAAS,EAAa,GAAyB;EAC7C,IAAM,IAAa,EAAc,KAAK,MAAU,EAAgB,QAAQ,GAAO;AAC/E,OAAU,EAAO,EAAW;;AAG9B,QACE,kBAAC,EAAgB,UAAjB;EACE,OAAO;GACL,GAAG;GACH,qBAAA;GACA,qBAAA;GACA,SAAA;GACA,WAAA;GACA,MAAA;GACA,gBAAA;GACA,OAAA;GACA,UAAA;GACA,mBAAA;GACA,mBAAA;GACD;YAED,kBAAC,GAAD;GAA+B;GAAyB;GAAa,QAAQ;GAAgB,CAAA;EACpE,CAAA;;AAI/B,SAAgB,IAAc;CAC5B,IAAM,IAAU,EAAW,EAAgB;AAE3C,KAAI,MAAY,KAAA,EACd,OAAU,MAAM,qDAAqD;AAGvE,QAAO"}

package/dist/Spinner-D8tWqg9j.js

@@ -0,0 +1,31 @@
+import { useEffect as e, useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import './assets/Spinner.css';//#region src/components/Spinner/Spinner.module.css
+var r = "_spinner_n7kdw_11", i = "_spin_n7kdw_11", a = {
+	"spinner-container": "_spinner-container_n7kdw_11",
+	spinner: r,
+	spin: i
+}, o = 250, s = ({ ariaValueText: r, showAfterMs: i = o }) => {
+	let [s, c] = t(() => i === 0);
+	return e(() => {
+		if (i === 0) return;
+		let e = window.setTimeout(() => {
+			c(!0);
+		}, i);
+		return () => {
+			window.clearTimeout(e);
+		};
+	}), s ? /* @__PURE__ */ n("div", {
+		className: a["spinner-container"],
+		children: /* @__PURE__ */ n("div", {
+			className: a.spinner,
+			role: "progressbar",
+			"aria-label": "Spinner",
+			"aria-valuetext": r
+		})
+	}) : null;
+};
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=Spinner-D8tWqg9j.js.map

package/dist/Spinner-D8tWqg9j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner-D8tWqg9j.js","names":[],"sources":["../src/components/Spinner/Spinner.module.css","../src/components/Spinner/Spinner.tsx"],"sourcesContent":["@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.spinner-container {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.spinner {\n  height: 2rem;\n  width: 2rem;\n}\n\n.spinner::after {\n  border: 0.25rem solid hsl(0deg 0% 0% / 10%);\n  border-radius: 50%;\n  content: \" \";\n  display: block;\n  height: 100%;\n  transform-origin: 50% 50%;\n  width: 100%;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .spinner::after {\n    animation: spin 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;\n    border-left-color: var(--color-uva-black);\n  }\n}\n","import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n  /** The `aria-valuetext` of the spinner. */\n  ariaValueText: string;\n  /** Delay in milliseconds after which the spinner becomes visible. The default is `250`. */\n  showAfterMs?: number;\n}\n\n/** Represents a component to display a spinner. */\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n  const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n  useEffect(() => {\n    if (showAfterMs === 0) {\n      return;\n    }\n    const t = window.setTimeout(() => {\n      setVisible(true);\n    }, showAfterMs);\n\n    return () => {\n      window.clearTimeout(t);\n    };\n  });\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <div className={styles['spinner-container']}>\n      <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;GCIM,IAAsB,KAUf,KAAW,EAAE,kBAAe,iBAAc,QAAwC;CAC7F,IAAM,CAAC,GAAS,KAAc,QAAgB,MAAgB,EAAkB;AAmBhF,QAjBA,QAAgB;AACd,MAAI,MAAgB,EAClB;EAEF,IAAM,IAAI,OAAO,iBAAiB;AAChC,KAAW,GAAK;KACf,EAAY;AAEf,eAAa;AACX,UAAO,aAAa,EAAE;;GAExB,EAEG,IAKH,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAY,MAAK;GAAc,cAAW;GAAU,kBAAgB;GAAqB,CAAA;EAC5G,CAAA,GANC"}

package/dist/StatusBage-DQDOF5-U.js

@@ -0,0 +1,13 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/StatusBage.css';var n = {
+	statusbadge: "_statusbadge_1irx5_1",
+	"statusbadge--high-contrast": "_statusbadge--high-contrast_1irx5_14"
+}, r = ({ label: r, highContrast: i = !1 }) => /* @__PURE__ */ t("div", {
+	className: e(n.statusbadge, [i && n["statusbadge--high-contrast"]]),
+	children: r
+});
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=StatusBage-DQDOF5-U.js.map

package/dist/StatusBage-DQDOF5-U.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBage-DQDOF5-U.js","names":[],"sources":["../src/components/StatusBadge/StatusBadge.module.css","../src/components/StatusBadge/StatusBage.tsx"],"sourcesContent":[".statusbadge {\n  align-items: center;\n  background-color: var(--color-grey-200);\n  color: var(--color-grey-700);\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-text-non-essential);\n  height: 1.5rem;\n  padding: 0 0.5rem;\n  white-space: nowrap;\n  width: fit-content;\n}\n\n.statusbadge--high-contrast {\n  background-color: var(--color-uva-white);\n}\n","import { clsx } from 'clsx';\n\nimport styles from './StatusBadge.module.css';\n\nexport interface StatusBadgeProps {\n  /** Text on the badge */\n  label: string;\n  /** true to render the card with high contrast colors; otherwise, false. The default is false. */\n  highContrast?: boolean;\n}\n\nexport const StatusBadge = ({ label, highContrast = false }: StatusBadgeProps) => {\n  return (\n    <div className={clsx(styles['statusbadge'], [highContrast && styles['statusbadge--high-contrast']])}>{label}</div>\n  );\n};\n"],"mappings":";;;;;GCWa,KAAe,EAAE,UAAO,kBAAe,SAEhD,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,aAAgB,CAAC,KAAgB,EAAO,8BAA8B,CAAC;WAAG;CAAY,CAAA"}