@uva-glass/component-library 3.22.0 → 3.23.0

package/dist/components/MultiSelectBox/MultiSelectBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\r\nimport clsx from 'clsx';\r\n\r\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\r\n\r\nimport styles from './MultiSelectBox.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { Checkbox } from 'components/Checkbox';\r\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\r\n\r\nexport type MultiSelectData = {\r\n  label: string;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n};\r\n\r\nexport interface MultiSelectBoxProps {\r\n  /** Array of label, values pairs */\r\n  selectData: MultiSelectData[];\r\n  /** Retuns selected label, values */\r\n  onChange: (values: MultiSelectData[]) => void;\r\n  /** Array of label, value pairs that should be check by default */\r\n  defaultSelectedItems?: MultiSelectData[];\r\n  /** Suffix label in the selectbutton '[count] selected' */\r\n  labelSuffix?: string;\r\n  /** Disables the multiselect */\r\n  disabled?: boolean;\r\n  /** If true sets the option dropdown min-width to the width of the select button. */\r\n  fullWidth?: boolean;\r\n  /** The max height of the options. */\r\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\r\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\r\n  optionPositionRight?: boolean;\r\n}\r\n\r\nexport const MultiSelectBox = ({\r\n  selectData,\r\n  onChange,\r\n  defaultSelectedItems,\r\n  labelSuffix = 'geselecteerd',\r\n  disabled = false,\r\n  fullWidth = false,\r\n  maxOptionHeight,\r\n  optionPositionRight,\r\n}: MultiSelectBoxProps) => {\r\n  const multiselectboxId = useId();\r\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\r\n  const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState(-1);\r\n  const wrapperRef = useRef<HTMLDivElement>(null);\r\n  const optionListRef = useRef<HTMLUListElement>(null);\r\n\r\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\r\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\r\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\r\n    mouseEvent: 'click',\r\n    position: 'bottomLeft',\r\n    offset: 4,\r\n    maxFixedHeight: maxOptionHeight,\r\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\r\n    mobileBreakpoint: '28rem',\r\n    fullWidth,\r\n  });\r\n\r\n  const onMouseEventOutside = useCallback(\r\n    ({ target }: Event | MouseEvent) => {\r\n      if (!target || !wrapperRef.current) return;\r\n\r\n      if (!wrapperRef.current.contains(target as Node)) {\r\n        setIsOpen(false);\r\n      }\r\n    },\r\n    [setIsOpen]\r\n  );\r\n\r\n  const onTriggerKeyDown = useCallback(\r\n    (event: KeyboardEvent<HTMLButtonElement>) => {\r\n      switch (event.key) {\r\n        case 'Enter':\r\n          event.preventDefault();\r\n          setIsOpen(true);\r\n          break;\r\n        case 'Escape':\r\n          if (isOpen) {\r\n            event.stopPropagation();\r\n            setIsOpen(false);\r\n          }\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    },\r\n    [isOpen]\r\n  );\r\n\r\n  const onOptionKeyDown = useCallback(\r\n    (event: KeyboardEvent<HTMLLIElement>) => {\r\n      if (!isOpen) return;\r\n\r\n      switch (event.key) {\r\n        case 'ArrowDown':\r\n          event.preventDefault();\r\n          setActiveIndex((prev) => {\r\n            let nextIndex = prev;\r\n            do {\r\n              nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\r\n            } while (selectData[nextIndex]?.disabled);\r\n            return nextIndex;\r\n          });\r\n          break;\r\n        case 'ArrowUp':\r\n          event.preventDefault();\r\n          setActiveIndex((prev) => {\r\n            let nextIndex = prev;\r\n            do {\r\n              nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\r\n            } while (selectData[nextIndex]?.disabled);\r\n            return nextIndex;\r\n          });\r\n          break;\r\n        case 'Enter': {\r\n          event.preventDefault();\r\n          const selectedItem = selectData[activeIndex];\r\n          if (!selectedItem || selectedItem.disabled) break;\r\n          const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\r\n          const updatedSelectedItems = isAlreadySelected\r\n            ? selectedItems.filter((item) => item.value !== selectedItem.value)\r\n            : [...selectedItems, selectedItem];\r\n\r\n          setSelectedItems(updatedSelectedItems);\r\n          setSelectedItemsCount(updatedSelectedItems.length);\r\n          onChange(updatedSelectedItems);\r\n          break;\r\n        }\r\n        case 'Tab':\r\n          event.preventDefault();\r\n          setIsOpen(false);\r\n          break;\r\n        case 'Escape':\r\n          event.stopPropagation();\r\n          setIsOpen(false);\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    },\r\n    [activeIndex, isOpen, selectData, selectedItems, onChange]\r\n  );\r\n\r\n  const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\r\n    if (option.disabled) return;\r\n\r\n    // Prevent toggle if click originated from the checkbox\r\n    if ((event.target as HTMLElement).tagName === 'INPUT') return;\r\n\r\n    const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\r\n    const updatedSelectedItems = isAlreadySelected\r\n      ? selectedItems.filter((item) => item.value !== option.value)\r\n      : [...selectedItems, option];\r\n\r\n    setSelectedItems(updatedSelectedItems);\r\n    setSelectedItemsCount(updatedSelectedItems.length);\r\n    onChange(updatedSelectedItems);\r\n  };\r\n\r\n  const handleSelect = useCallback(\r\n    (event: ChangeEvent<HTMLInputElement>) => {\r\n      const { checked, value } = event.target;\r\n      let updatedSelectedItems = [...selectedItems];\r\n\r\n      if (checked) {\r\n        const selectedItem = selectData.find((item) => item.value === value);\r\n        if (selectedItem) {\r\n          updatedSelectedItems.push(selectedItem);\r\n        }\r\n      } else {\r\n        updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\r\n      }\r\n\r\n      setSelectedItems(updatedSelectedItems);\r\n      setSelectedItemsCount(updatedSelectedItems.length);\r\n      onChange(updatedSelectedItems);\r\n    },\r\n    [selectData, selectedItems, onChange]\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      setActiveIndex(0);\r\n    }\r\n  }, [isOpen]);\r\n\r\n  useEffect(() => {\r\n    const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\r\n    activeOption?.focus();\r\n  }, [activeIndex]);\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n\r\n    document.addEventListener('click', onMouseEventOutside, true);\r\n    document.addEventListener('scroll', onMouseEventOutside, true);\r\n\r\n    return () => {\r\n      document.removeEventListener('click', onMouseEventOutside, true);\r\n      document.removeEventListener('scroll', onMouseEventOutside, true);\r\n    };\r\n  }, [onMouseEventOutside, isOpen]);\r\n\r\n  return (\r\n    <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\r\n      <button\r\n        className={styles['multi-select-box-trigger']}\r\n        type=\"button\"\r\n        onClick={() => {\r\n          setIsOpen(!isOpen);\r\n        }}\r\n        onKeyDown={onTriggerKeyDown}\r\n        aria-expanded={isOpen}\r\n        aria-haspopup=\"listbox\"\r\n        aria-label={`${selectedItemsCount} ${labelSuffix}`}\r\n        disabled={disabled}\r\n        {...(isOpen && { 'aria-controls': multiselectboxId })}\r\n        ref={setReferenceElement}\r\n      >\r\n        <span className={styles['multi-select-box-trigger-label']}>\r\n          {selectedItemsCount} {labelSuffix}\r\n        </span>\r\n        <Icon\r\n          className={clsx(styles['multi-select-box-trigger-icon'], {\r\n            [styles['multi-select-box-trigger-icon--open']]: isOpen,\r\n          })}\r\n          name=\"CheveronDown\"\r\n          size={16}\r\n        />\r\n      </button>\r\n\r\n      <div\r\n        id={multiselectboxId}\r\n        className={clsx(styles['multi-select-box-listbox--wrapper'])}\r\n        style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\r\n        role=\"listbox\"\r\n        ref={setPositionElement}\r\n      >\r\n        <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\r\n          {selectData.map(({ label, value, disabled }, index) => (\r\n            <li\r\n              className={clsx(styles['multi-select-box-listbox-option'], {\r\n                [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\r\n                [styles['multi-select-box-listbox-option--disabled']]: disabled,\r\n              })}\r\n              key={value}\r\n              role=\"option\"\r\n              onKeyDown={onOptionKeyDown}\r\n              onClick={(event) => onOptionClick(event, { label, value, disabled })}\r\n              onMouseOver={() => setActiveIndex(index)}\r\n              onFocus={() => setActiveIndex(index)}\r\n              tabIndex={0}\r\n              aria-selected={selectedItems.some((item) => item.value === value)}\r\n            >\r\n              <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\r\n                <Checkbox\r\n                  id={`${label}-${multiselectboxId}`}\r\n                  onChange={handleSelect}\r\n                  value={value}\r\n                  tabIndex={-1}\r\n                  disabled={disabled}\r\n                  checked={selectedItems.some((item) => item.value === value)}\r\n                />\r\n                <span>{label}</span>\r\n              </label>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","jsx","Icon","clsx","label","index","Checkbox"],"mappings":"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"}
+{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport clsx from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n  /** Array of label, values pairs */\n  selectData: MultiSelectData[];\n  /** Retuns selected label, values */\n  onChange: (values: MultiSelectData[]) => void;\n  /** Array of label, value pairs that should be check by default */\n  defaultSelectedItems?: MultiSelectData[];\n  /** Suffix label in the selectbutton '[count] selected' */\n  labelSuffix?: string;\n  /** Disables the multiselect */\n  disabled?: boolean;\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n  selectData,\n  onChange,\n  defaultSelectedItems,\n  labelSuffix = 'geselecteerd',\n  disabled = false,\n  fullWidth = false,\n  maxOptionHeight,\n  optionPositionRight,\n}: MultiSelectBoxProps) => {\n  const multiselectboxId = useId();\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n  const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const optionListRef = useRef<HTMLUListElement>(null);\n\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !wrapperRef.current) return;\n\n      if (!wrapperRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  const onTriggerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>) => {\n      switch (event.key) {\n        case 'Enter':\n          event.preventDefault();\n          setIsOpen(true);\n          break;\n        case 'Escape':\n          if (isOpen) {\n            event.stopPropagation();\n            setIsOpen(false);\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [isOpen]\n  );\n\n  const onOptionKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (!isOpen) return;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'Enter': {\n          event.preventDefault();\n          const selectedItem = selectData[activeIndex];\n          if (!selectedItem || selectedItem.disabled) break;\n          const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n          const updatedSelectedItems = isAlreadySelected\n            ? selectedItems.filter((item) => item.value !== selectedItem.value)\n            : [...selectedItems, selectedItem];\n\n          setSelectedItems(updatedSelectedItems);\n          setSelectedItemsCount(updatedSelectedItems.length);\n          onChange(updatedSelectedItems);\n          break;\n        }\n        case 'Tab':\n          event.preventDefault();\n          setIsOpen(false);\n          break;\n        case 'Escape':\n          event.stopPropagation();\n          setIsOpen(false);\n          break;\n        default:\n          break;\n      }\n    },\n    [activeIndex, isOpen, selectData, selectedItems, onChange]\n  );\n\n  const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n    if (option.disabled) return;\n\n    // Prevent toggle if click originated from the checkbox\n    if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n    const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n    const updatedSelectedItems = isAlreadySelected\n      ? selectedItems.filter((item) => item.value !== option.value)\n      : [...selectedItems, option];\n\n    setSelectedItems(updatedSelectedItems);\n    setSelectedItemsCount(updatedSelectedItems.length);\n    onChange(updatedSelectedItems);\n  };\n\n  const handleSelect = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { checked, value } = event.target;\n      let updatedSelectedItems = [...selectedItems];\n\n      if (checked) {\n        const selectedItem = selectData.find((item) => item.value === value);\n        if (selectedItem) {\n          updatedSelectedItems.push(selectedItem);\n        }\n      } else {\n        updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n      }\n\n      setSelectedItems(updatedSelectedItems);\n      setSelectedItemsCount(updatedSelectedItems.length);\n      onChange(updatedSelectedItems);\n    },\n    [selectData, selectedItems, onChange]\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      setActiveIndex(0);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n    activeOption?.focus();\n  }, [activeIndex]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    document.addEventListener('click', onMouseEventOutside, true);\n    document.addEventListener('scroll', onMouseEventOutside, true);\n\n    return () => {\n      document.removeEventListener('click', onMouseEventOutside, true);\n      document.removeEventListener('scroll', onMouseEventOutside, true);\n    };\n  }, [onMouseEventOutside, isOpen]);\n\n  return (\n    <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n      <button\n        className={styles['multi-select-box-trigger']}\n        type=\"button\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedItemsCount} ${labelSuffix}`}\n        disabled={disabled}\n        {...(isOpen && { 'aria-controls': multiselectboxId })}\n        ref={setReferenceElement}\n      >\n        <span className={styles['multi-select-box-trigger-label']}>\n          {selectedItemsCount} {labelSuffix}\n        </span>\n        <Icon\n          className={clsx(styles['multi-select-box-trigger-icon'], {\n            [styles['multi-select-box-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n\n      <div\n        id={multiselectboxId}\n        className={clsx(styles['multi-select-box-listbox--wrapper'])}\n        style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n        role=\"listbox\"\n        ref={setPositionElement}\n      >\n        <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n          {selectData.map(({ label, value, disabled }, index) => (\n            <li\n              className={clsx(styles['multi-select-box-listbox-option'], {\n                [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n                [styles['multi-select-box-listbox-option--disabled']]: disabled,\n              })}\n              key={value}\n              role=\"option\"\n              onKeyDown={onOptionKeyDown}\n              onClick={(event) => onOptionClick(event, { label, value, disabled })}\n              onMouseOver={() => setActiveIndex(index)}\n              onFocus={() => setActiveIndex(index)}\n              tabIndex={0}\n              aria-selected={selectedItems.some((item) => item.value === value)}\n            >\n              <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n                <Checkbox\n                  id={`${label}-${multiselectboxId}`}\n                  onChange={handleSelect}\n                  value={value}\n                  tabIndex={-1}\n                  disabled={disabled}\n                  checked={selectedItems.some((item) => item.value === value)}\n                />\n                <span>{label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","jsx","Icon","clsx","label","index","Checkbox"],"mappings":"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"}

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\r\n\r\nimport { MultiSelectBox } from './MultiSelectBox';\r\n\r\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Organisms/MultiSelectBox',\r\n  component: MultiSelectBox,\r\n  argTypes: {},\r\n  parameters: {\r\n    inspectComponent: MultiSelectBox,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<MultiSelectBoxProps>;\r\n\r\nconst mockItems = [\r\n  { label: 'A.B. Docent', value: '1' },\r\n  { label: 'B.C. Docent met lange achternaam', value: '2' },\r\n  {\r\n    label: 'prof. F.G. Docent met lang achternaam',\r\n    value: '3',\r\n  },\r\n  { label: 'H.I. Docent', value: '4' },\r\n  { label: 'K.L. Docent ', value: '5' },\r\n  { label: 'A.B. Docent', value: '6' },\r\n  { label: 'B.C. Docent met lange achternaam', value: '7' },\r\n  {\r\n    label: 'prof. F.G. Docent met lang achternaam',\r\n    value: '8',\r\n  },\r\n  { label: 'H.I. Docent', value: '9' },\r\n  { label: 'K.L. Docent ', value: '10' },\r\n];\r\n\r\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\r\n  return (\r\n    <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\r\n      <MultiSelectBox {...args} />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\r\n  fullWidth: false,\r\n  labelSuffix: 'geselecteerd',\r\n  maxOptionHeight: '20rem',\r\n  optionPositionRight: false,\r\n  disabled: false,\r\n  selectData: mockItems,\r\n  onChange: fn(),\r\n};\r\n\r\nexport const MultiSelectBoxExample = Template.bind({});\r\nMultiSelectBoxExample.args = {\r\n  ...defaultArgs,\r\n};\r\n\r\nexport const WithDefaultSelectedItems = Template.bind({});\r\nWithDefaultSelectedItems.args = {\r\n  ...defaultArgs,\r\n  defaultSelectedItems: [\r\n    { label: 'A.B. Docent', value: '1' },\r\n    { label: 'H.I. Docent', value: '4' },\r\n    { label: 'A.B. Docent', value: '6' },\r\n  ],\r\n};\r\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,IAAI;AAAA,EACpC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,KAAK;AACvC,GAEMC,IAAyC,CAACC,MAE3C,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAgB,EAAA,GAAGG,EAAM,CAAA,GAC5B,GAIEE,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYJ;AAAA,EACZ,UAAUK,EAAG;AACf,GAEaC,IAAwBL,EAAS,KAAK,CAAE,CAAA;AACrDK,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2BN,EAAS,KAAK,CAAE,CAAA;AACxDM,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EAAA;AAEvC;"}
+{"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelectBox',\n  component: MultiSelectBox,\n  argTypes: {},\n  parameters: {\n    inspectComponent: MultiSelectBox,\n    codeString: codeString,\n  },\n} as Meta<MultiSelectBoxProps>;\n\nconst mockItems = [\n  { label: 'A.B. Docent', value: '1' },\n  { label: 'B.C. Docent met lange achternaam', value: '2' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '3',\n  },\n  { label: 'H.I. Docent', value: '4' },\n  { label: 'K.L. Docent ', value: '5' },\n  { label: 'A.B. Docent', value: '6' },\n  { label: 'B.C. Docent met lange achternaam', value: '7' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '8',\n  },\n  { label: 'H.I. Docent', value: '9' },\n  { label: 'K.L. Docent ', value: '10' },\n];\n\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\n  return (\n    <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\n      <MultiSelectBox {...args} />\n    </div>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\n  fullWidth: false,\n  labelSuffix: 'geselecteerd',\n  maxOptionHeight: '20rem',\n  optionPositionRight: false,\n  disabled: false,\n  selectData: mockItems,\n  onChange: fn(),\n};\n\nexport const MultiSelectBoxExample = Template.bind({});\nMultiSelectBoxExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDefaultSelectedItems = Template.bind({});\nWithDefaultSelectedItems.args = {\n  ...defaultArgs,\n  defaultSelectedItems: [\n    { label: 'A.B. Docent', value: '1' },\n    { label: 'H.I. Docent', value: '4' },\n    { label: 'A.B. Docent', value: '6' },\n  ],\n};\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,IAAI;AAAA,EACpC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,KAAK;AACvC,GAEMC,IAAyC,CAACC,MAE3C,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAgB,EAAA,GAAGG,EAAM,CAAA,GAC5B,GAIEE,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYJ;AAAA,EACZ,UAAUK,EAAG;AACf,GAEaC,IAAwBL,EAAS,KAAK,CAAE,CAAA;AACrDK,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2BN,EAAS,KAAK,CAAE,CAAA;AACxDM,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EAAA;AAEvC;"}

package/dist/components/MultiSelectBox/MultiSelectBox.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.test.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\r\nimport { render, screen, fireEvent } from '@testing-library/react';\r\n\r\nimport { MultiSelectBox } from './MultiSelectBox';\r\n\r\nconst onChangeSpy = jest.fn();\r\n\r\nconst mockSelectData = [\r\n  { label: 'Option 1', value: '1' },\r\n  { label: 'Option 2', value: '2' },\r\n  { label: 'Option 3', value: '3' },\r\n];\r\n\r\ndescribe('MultiSelectBox', () => {\r\n  it('renders the component with default props', () => {\r\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\r\n    const button = screen.getByRole('button');\r\n    expect(button).toBeInTheDocument();\r\n    expect(button).toHaveAttribute('aria-expanded', 'false');\r\n  });\r\n\r\n  it('opens the dropdown when the button is clicked', () => {\r\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\r\n    const button = screen.getByRole('button');\r\n    fireEvent.click(button);\r\n    expect(button).toHaveAttribute('aria-expanded', 'true');\r\n    expect(screen.getByRole('listbox')).toBeInTheDocument();\r\n  });\r\n\r\n  it('closes the dropdown when clicking outside', () => {\r\n    render(\r\n      <>\r\n        <MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />\r\n        <div data-testid=\"outside-element\">Outside</div>\r\n      </>\r\n    );\r\n\r\n    const button = screen.getByRole('button');\r\n    fireEvent.click(button);\r\n    expect(button).toHaveAttribute('aria-expanded', 'true');\r\n    const outsideElement = screen.getByTestId('outside-element');\r\n    fireEvent.click(outsideElement);\r\n    expect(button).toHaveAttribute('aria-expanded', 'false');\r\n  });\r\n});\r\n"],"names":["onChangeSpy","mockSelectData","render","jsx","MultiSelectBox","button","screen","fireEvent","jsxs","Fragment","outsideElement"],"mappings":";;;;AAKA,MAAMA,IAAc,KAAK,GAAG,GAEtBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAClC;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AAC5C,IAAAC,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACjC,WAAAD,CAAM,EAAE,kBAAkB,GACjC,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACjD,IAAAH,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MAEI,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QACzF,gBAAAG,EAAA,OAAA,EAAI,eAAY,mBAAkB,UAAO,UAAA,CAAA;AAAA,MAAA,EAC5C,CAAA;AAAA,IACF;AAEM,UAAAE,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AAChD,UAAAK,IAAiBJ,EAAO,YAAY,iBAAiB;AAC3D,IAAAC,EAAU,MAAMG,CAAc,GAC9B,OAAOL,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD;AACH,CAAC;"}
+{"version":3,"file":"MultiSelectBox.test.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst onChangeSpy = jest.fn();\n\nconst mockSelectData = [\n  { label: 'Option 1', value: '1' },\n  { label: 'Option 2', value: '2' },\n  { label: 'Option 3', value: '3' },\n];\n\ndescribe('MultiSelectBox', () => {\n  it('renders the component with default props', () => {\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\n    const button = screen.getByRole('button');\n    expect(button).toBeInTheDocument();\n    expect(button).toHaveAttribute('aria-expanded', 'false');\n  });\n\n  it('opens the dropdown when the button is clicked', () => {\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\n    const button = screen.getByRole('button');\n    fireEvent.click(button);\n    expect(button).toHaveAttribute('aria-expanded', 'true');\n    expect(screen.getByRole('listbox')).toBeInTheDocument();\n  });\n\n  it('closes the dropdown when clicking outside', () => {\n    render(\n      <>\n        <MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />\n        <div data-testid=\"outside-element\">Outside</div>\n      </>\n    );\n\n    const button = screen.getByRole('button');\n    fireEvent.click(button);\n    expect(button).toHaveAttribute('aria-expanded', 'true');\n    const outsideElement = screen.getByTestId('outside-element');\n    fireEvent.click(outsideElement);\n    expect(button).toHaveAttribute('aria-expanded', 'false');\n  });\n});\n"],"names":["onChangeSpy","mockSelectData","render","jsx","MultiSelectBox","button","screen","fireEvent","jsxs","Fragment","outsideElement"],"mappings":";;;;AAKA,MAAMA,IAAc,KAAK,GAAG,GAEtBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAClC;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AAC5C,IAAAC,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACjC,WAAAD,CAAM,EAAE,kBAAkB,GACjC,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACjD,IAAAH,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MAEI,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QACzF,gBAAAG,EAAA,OAAA,EAAI,eAAY,mBAAkB,UAAO,UAAA,CAAA;AAAA,MAAA,EAC5C,CAAA;AAAA,IACF;AAEM,UAAAE,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AAChD,UAAAK,IAAiBJ,EAAO,YAAY,iBAAiB;AAC3D,IAAAC,EAAU,MAAMG,CAAc,GAC9B,OAAOL,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD;AACH,CAAC;"}

package/dist/components/OverlayStepBar/OverlayStepBar.js

@@ -1,12 +1,12 @@
 import { jsx as s, jsxs as l } from "react/jsx-runtime";
 import { c as o } from "../../clsx-OuTLNxxd.js";
 import '../../assets/OverlayStepBar.css';const r = {
-  "overlay-step-bar__container": "_overlay-step-bar__container_olxm1_1",
-  "overlay-step-bar__step-wrapper": "_overlay-step-bar__step-wrapper_olxm1_10",
-  "overlay-step-bar__step": "_overlay-step-bar__step_olxm1_10",
-  "overlay-step-bar__step--label": "_overlay-step-bar__step--label_olxm1_56",
-  "overlay-step-bar__step--index": "_overlay-step-bar__step--index_olxm1_62",
-  "overlay-step-bar__step--active": "_overlay-step-bar__step--active_olxm1_87"
+  "overlay-step-bar__container": "_overlay-step-bar__container_j9bq4_1",
+  "overlay-step-bar__step-wrapper": "_overlay-step-bar__step-wrapper_j9bq4_10",
+  "overlay-step-bar__step": "_overlay-step-bar__step_j9bq4_10",
+  "overlay-step-bar__step--label": "_overlay-step-bar__step--label_j9bq4_56",
+  "overlay-step-bar__step--active": "_overlay-step-bar__step--active_j9bq4_66",
+  "overlay-step-bar__step--index": "_overlay-step-bar__step--index_j9bq4_70"
 }, v = ({ stepLabels: _, activeStep: a = 0, onStepClick: t }) => (a > _.length && console.error("activeStep is greater than the number of steps"), /* @__PURE__ */ s("div", { className: r["overlay-step-bar__container"], children: _.length && _.map((p, e) => /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step-wrapper"], children: /* @__PURE__ */ l(
   "button",
   {

package/dist/components/PageOverlay/PageOverlay.js

@@ -3,47 +3,47 @@ import { useDialog as A } from "@react-aria/dialog";
 import { FocusScope as C } from "@react-aria/focus";
 import { useModal as K, useOverlay as M, usePreventScroll as U, OverlayContainer as V } from "@react-aria/overlays";
 import { c as i } from "../../clsx-OuTLNxxd.js";
-import { useRef as m, useState as d, useEffect as q } from "react";
+import { useRef as m, useState as f, useEffect as q } from "react";
 import { OverlayCloseButton as G } from "../OverlayCloseButton/OverlayCloseButton.js";
 import { Spinner as J } from "../Spinner/Spinner.js";
 import { Backdrop as O } from "../Backdrop/Backdrop.js";
 import '../../assets/PageOverlay.css';const e = {
-  "page-overlay__container": "_page-overlay__container_1wy1h_1",
-  "page-overlay": "_page-overlay_1wy1h_1",
-  "page-overlay--full-screen": "_page-overlay--full-screen_1wy1h_18",
-  "page-overlay--with-gutters": "_page-overlay--with-gutters_1wy1h_22",
-  "page-overlay__content": "_page-overlay__content_1wy1h_27",
-  "page-overlay__content--grey": "_page-overlay__content--grey_1wy1h_38",
-  "page-overlay__content--white": "_page-overlay__content--white_1wy1h_42",
-  "page-overlay__children": "_page-overlay__children_1wy1h_46",
-  "page-overlay__title-wrapper": "_page-overlay__title-wrapper_1wy1h_50",
-  "page-overlay__title": "_page-overlay__title_1wy1h_50",
-  "page-overlay__buttons-bar": "_page-overlay__buttons-bar_1wy1h_61",
-  "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_1wy1h_87",
-  "page-overlay__close": "_page-overlay__close_1wy1h_92"
+  "page-overlay__container": "_page-overlay__container_1oudu_1",
+  "page-overlay": "_page-overlay_1oudu_1",
+  "page-overlay--full-screen": "_page-overlay--full-screen_1oudu_19",
+  "page-overlay--with-gutters": "_page-overlay--with-gutters_1oudu_23",
+  "page-overlay__content": "_page-overlay__content_1oudu_28",
+  "page-overlay__content--grey": "_page-overlay__content--grey_1oudu_39",
+  "page-overlay__content--white": "_page-overlay__content--white_1oudu_43",
+  "page-overlay__children": "_page-overlay__children_1oudu_47",
+  "page-overlay__title-wrapper": "_page-overlay__title-wrapper_1oudu_51",
+  "page-overlay__title": "_page-overlay__title_1oudu_51",
+  "page-overlay__buttons-bar": "_page-overlay__buttons-bar_1oudu_62",
+  "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_1oudu_88",
+  "page-overlay__close": "_page-overlay__close_1oudu_94"
 };
 function le({
   buttons: t,
-  children: f,
-  isLoading: w,
-  spinnerAriaValueText: b = "Loading",
+  children: h,
+  isLoading: b,
+  spinnerAriaValueText: w = "Loading",
   closeButtonAriaValueText: S = "Close",
   isOpen: a,
   noValidate: N = !1,
-  onClose: p,
+  onClose: u,
   onSubmit: P,
   title: _,
   headerContent: n,
-  variant: y = "full-screen",
+  variant: p = "full-screen",
   contentBackgroundColor: T = "grey"
 }) {
-  const s = m(null), g = m(null), [E, x] = d(!1), [L, B] = d(!1), { dialogProps: F, titleProps: H } = A({ role: "dialog" }, s), { modalProps: k } = K({ isDisabled: !a }), { overlayProps: z, underlayProps: D } = M({ isOpen: a, onClose: p }, s);
+  const s = m(null), g = m(null), [E, x] = f(!1), [L, B] = f(!1), { dialogProps: F, titleProps: H } = A({ role: "dialog" }, s), { modalProps: k } = K({ isDisabled: !a }), { overlayProps: z, underlayProps: D } = M({ isOpen: a, onClose: u }, s);
   U({ isDisabled: !a }), q(() => {
     const r = g.current;
     if (!r) return;
     function v() {
-      const u = r.scrollHeight, h = r.clientHeight, j = r.scrollTop;
-      x(u > h), B(j + h >= u);
+      const d = r.scrollHeight, y = r.clientHeight, j = r.scrollTop;
+      x(d > y), B(j + y >= d);
     }
     function l() {
       v();
@@ -59,14 +59,14 @@ function le({
   function I(r) {
     r.stopPropagation();
   }
-  return a ? /* @__PURE__ */ o(V, { className: e["page-overlay__container"], children: /* @__PURE__ */ o(O, { ...D, children: w ? /* @__PURE__ */ o(J, { ariaValueText: b }) : /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
+  return a ? /* @__PURE__ */ o(V, { className: e["page-overlay__container"], children: /* @__PURE__ */ o(O, { ...D, children: b ? /* @__PURE__ */ o(J, { ariaValueText: w }) : /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
     "div",
     {
       ...F,
       ...k,
       ...z,
       className: i(e["page-overlay"], {
-        [e[`page-overlay--${y}`]]: y
+        [e[`page-overlay--${p}`]]: p
       }),
       onKeyUp: I,
       role: "presentation",
@@ -75,7 +75,7 @@ function le({
         (_ || n) && /* @__PURE__ */ c("div", { className: e["page-overlay__title-wrapper"], children: [
           _ && /* @__PURE__ */ o("h1", { ...H, className: e["page-overlay__title"], children: _ }),
           n,
-          /* @__PURE__ */ o("span", { className: e["page-overlay__close"], children: /* @__PURE__ */ o(G, { "aria-label": S, onClick: p }) })
+          /* @__PURE__ */ o("span", { className: e["page-overlay__close"], children: /* @__PURE__ */ o(G, { "aria-label": S, onClick: u }) })
         ] }),
         /* @__PURE__ */ c(
           "form",
@@ -91,7 +91,7 @@ function le({
             noValidate: N,
             ref: g,
             children: [
-              /* @__PURE__ */ o("div", { className: e["page-overlay__children"], children: f }),
+              /* @__PURE__ */ o("div", { className: e["page-overlay__children"], children: h }),
               t && /* @__PURE__ */ o(
                 "div",
                 {

package/dist/components/PeriodSelector/PeriodSelector.js

@@ -17,7 +17,7 @@ import "../Input/Input.js";
 import "../InputField/InputField.js";
 import { Label as B } from "../Label/Label.js";
 import "react-router";
-import "../../TablePlugin-CrCof8yO.js";
+import "../../TablePlugin-Bj5FObQ_.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -25,7 +25,7 @@ import "../../index-DllfJcv4.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-B3_u0pKv.js";
+import "../../SortableProvider-CwX1lFMa.js";
 import '../../assets/PeriodSelector.css';const l = {
   "period-selector__container": "_period-selector__container_d1p0j_1",
   "period-selector__container--label-left": "_period-selector__container--label-left_d1p0j_6",

package/dist/components/ProgrammeCard/ProgrammeCard.stories.js

@@ -17,7 +17,7 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
-import "../../TablePlugin-CrCof8yO.js";
+import "../../TablePlugin-Bj5FObQ_.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -25,7 +25,7 @@ import "../../index-DllfJcv4.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-B3_u0pKv.js";
+import "../../SortableProvider-CwX1lFMa.js";
 const p = "<ProgrammeCard key={key} header={header} details={details} href={href} />", J = {
   title: "Atoms/ProgrammeCard",
   component: o,

package/dist/components/RadioTabSelector/RadioTabSelector.js

@@ -17,7 +17,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-CrCof8yO.js";
+import "../../TablePlugin-Bj5FObQ_.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -25,7 +25,7 @@ import "../../index-DllfJcv4.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-B3_u0pKv.js";
+import "../../SortableProvider-CwX1lFMa.js";
 import '../../assets/RadioTabSelector.css';const t = {
   "radio-tab-selector-button-bar__container": "_radio-tab-selector-button-bar__container_a4wnc_1",
   "radio-tab-selector-button-bar__container--label-left": "_radio-tab-selector-button-bar__container--label-left_a4wnc_6",

package/dist/components/RteEditor/EditorHeader/EditorHeader.js

@@ -4,7 +4,7 @@ import "../../Buttons/Button.js";
 import "../../Buttons/LinkButton.js";
 import "@react-aria/button";
 import "../../Checkbox/Checkbox.js";
-import { Label as n } from "../../Label/Label.js";
+import { Label as _ } from "../../Label/Label.js";
 import "@react-aria/dialog";
 import "@react-aria/focus";
 import "@react-aria/overlays";
@@ -14,7 +14,7 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import "../../../TablePlugin-CrCof8yO.js";
+import "../../../TablePlugin-Bj5FObQ_.js";
 import "../Providers/LanguageProvider.js";
 import "../Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../hooks/components/Flyout.js";
@@ -22,15 +22,15 @@ import "../../../index-DllfJcv4.js";
 import "../../SelectListbox/SelectListbox.js";
 import "../../SelectListbox/SelectProvider.js";
 import "../../Sortable/components/SortableItem.js";
-import "../../../SortableProvider-B3_u0pKv.js";
+import "../../../SortableProvider-CwX1lFMa.js";
 import '../../../assets/EditorHeader.css';const t = {
-  "editor-header__container": "_editor-header__container_nsi6h_1",
-  "editor-header__info": "_editor-header__info_nsi6h_10"
-}, A = ({ label: i, info: o = "", required: e = !1 }) => {
+  "editor-header__container": "_editor-header__container_9khdz_1",
+  "editor-header__info": "_editor-header__info_9khdz_10"
+}, A = ({ label: o, info: i = "", required: e = !1 }) => {
   const m = `info_${d()}`;
   return /* @__PURE__ */ p("div", { className: t["editor-header__container"], children: [
-    i !== "" && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { htmlFor: m, required: e, children: i }) }),
-    o !== "" && /* @__PURE__ */ r("div", { className: t["editor-header__info"], children: o })
+    o !== "" && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(_, { htmlFor: m, required: e, children: o }) }),
+    i !== "" && /* @__PURE__ */ r("div", { className: t["editor-header__info"], children: i })
   ] });
 };
 export {

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js

@@ -4,7 +4,7 @@ import { c as f } from "../../../../clsx-OuTLNxxd.js";
 import { N as _, c as p, M as h } from "../../../../Lexical.prod-DOV_uwol.js";
 import { useState as l, useEffect as k } from "react";
 import { Icon as I } from "../../../Icon/Icon.js";
-import { s as a } from "../../../../RteEditor.module-45648CA2.js";
+import { s as a } from "../../../../RteEditor.module-B_3uFnFu.js";
 import { useTranslation as B } from "../../hooks/useTranslation.js";
 const C = {
   bold: "Bold",

package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js

@@ -17,8 +17,8 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../TablePlugin-CrCof8yO.js";
-import { s as r } from "../../../../RteEditor.module-45648CA2.js";
+import "../../../../TablePlugin-Bj5FObQ_.js";
+import { s as r } from "../../../../RteEditor.module-B_3uFnFu.js";
 import { useTranslation as x } from "../../hooks/useTranslation.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../hooks/components/Flyout.js";
@@ -27,7 +27,7 @@ import "../../../../index-DllfJcv4.js";
 import "../../../SelectListbox/SelectListbox.js";
 import "../../../SelectListbox/SelectProvider.js";
 import "../../../Sortable/components/SortableItem.js";
-import "../../../../SortableProvider-B3_u0pKv.js";
+import "../../../../SortableProvider-CwX1lFMa.js";
 const Z = () => {
   const o = x(), [t] = h(), [p, d] = s(!1), [l, c] = s(!1), u = () => {
     t.dispatchCommand(y, void 0);

package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { A as D } from "../../../../../TablePlugin-CrCof8yO.js";
+import { A as D } from "../../../../../TablePlugin-Bj5FObQ_.js";
 import "../../../../../helpers-DxxBlpKs.js";
 import "../../../../Icon/Icon.js";
 import "../../../../Buttons/Button.js";
@@ -27,7 +27,7 @@ import "../../../../../index-DllfJcv4.js";
 import "../../../../SelectListbox/SelectListbox.js";
 import "../../../../SelectListbox/SelectProvider.js";
 import "../../../../Sortable/components/SortableItem.js";
-import "../../../../../SortableProvider-B3_u0pKv.js";
+import "../../../../../SortableProvider-CwX1lFMa.js";
 export {
   D as AddLinkForm
 };

package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js

@@ -4,7 +4,7 @@ import { c as q } from "../../../../clsx-OuTLNxxd.js";
 import { p as U, k as G, N as J } from "../../../../LexicalLink.prod-XYC56-_H.js";
 import { useRef as a, useState as Q, useEffect as m } from "react";
 import { Y as Z, N as f, n as $, ap as tt, c as N, L as et, y as ot, X as rt } from "../../../../Lexical.prod-DOV_uwol.js";
-import { A as nt } from "../../../../TablePlugin-CrCof8yO.js";
+import { A as nt } from "../../../../TablePlugin-Bj5FObQ_.js";
 import { e as it } from "../../../../helpers-DxxBlpKs.js";
 import { LinkContextMenu as st } from "./LinkContextMenu/LinkContextMenu.js";
 import { useFlyout as ct } from "../../hooks/useFlyout.js";
@@ -23,14 +23,14 @@ import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
 import { setScrollableContainers as z, removeScrollableContainers as at } from "../../helpers.js";
-import { s as h } from "../../../../RteEditor.module-45648CA2.js";
+import { s as h } from "../../../../RteEditor.module-B_3uFnFu.js";
 import { useTranslation as ut } from "../../hooks/useTranslation.js";
 import "../../Providers/LanguageProvider.js";
 import "../../../../index-DllfJcv4.js";
 import "../../../SelectListbox/SelectListbox.js";
 import "../../../SelectListbox/SelectProvider.js";
 import "../../../Sortable/components/SortableItem.js";
-import "../../../../SortableProvider-B3_u0pKv.js";
+import "../../../../SortableProvider-CwX1lFMa.js";
 const mt = 200, I = (p) => {
   let n = p;
   for (; n; ) {

package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js

@@ -6,7 +6,7 @@ import { useState as p, useEffect as I } from "react";
 import { c as O } from "../../../../clsx-OuTLNxxd.js";
 import { ap as U, L as w, V as B, N as b, c as h, I as E, P as $ } from "../../../../Lexical.prod-DOV_uwol.js";
 import { Icon as j } from "../../../Icon/Icon.js";
-import { s as l } from "../../../../RteEditor.module-45648CA2.js";
+import { s as l } from "../../../../RteEditor.module-B_3uFnFu.js";
 import { useTranslation as z } from "../../hooks/useTranslation.js";
 const V = {
   bullet: "BulletList",

package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { b as B } from "../../../../TablePlugin-CrCof8yO.js";
+import { b as B } from "../../../../TablePlugin-Bj5FObQ_.js";
 import "../../../Buttons/Button.js";
 import "../../../Buttons/LinkButton.js";
 import "@react-aria/button";
@@ -25,7 +25,7 @@ import "../../../../index-DllfJcv4.js";
 import "../../../SelectListbox/SelectListbox.js";
 import "../../../SelectListbox/SelectProvider.js";
 import "../../../Sortable/components/SortableItem.js";
-import "../../../../SortableProvider-B3_u0pKv.js";
+import "../../../../SortableProvider-CwX1lFMa.js";
 export {
   B as AddTableForm
 };

package/dist/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.js

@@ -5,28 +5,28 @@ import { o as $ } from "../../../../../LexicalComposerContext.prod-DLlRM5wP.js";
 import { Icon as k } from "../../../../Icon/Icon.js";
 import { useTranslation as H } from "../../../hooks/useTranslation.js";
 import '../../../../../assets/TableCellContextMenu.css';const n = {
-  "context-menu__wrapper": "_context-menu__wrapper_17pea_1",
-  "context-menu__button": "_context-menu__button_17pea_10",
-  "context-menu": "_context-menu_17pea_1",
-  "context-menu--open": "_context-menu--open_17pea_38",
-  "context-menu__item": "_context-menu__item_17pea_43",
-  "context-menu__item-divider": "_context-menu__item-divider_17pea_57",
-  "context-menu__wrapper--hidden": "_context-menu__wrapper--hidden_17pea_61"
-}, O = 25, N = 10, f = 4, A = 25, M = (u) => {
-  const r = u.cloneNode(!0);
+  "context-menu__wrapper": "_context-menu__wrapper_6m871_1",
+  "context-menu__button": "_context-menu__button_6m871_10",
+  "context-menu": "_context-menu_6m871_1",
+  "context-menu--open": "_context-menu--open_6m871_38",
+  "context-menu__item": "_context-menu__item_6m871_43",
+  "context-menu__item-divider": "_context-menu__item-divider_6m871_57",
+  "context-menu__wrapper--hidden": "_context-menu__wrapper--hidden_6m871_61"
+}, O = 25, N = 10, f = 4, A = 25, M = (a) => {
+  const r = a.cloneNode(!0);
   r.style.height = "auto", r.style.left = "-3000px", document.body.appendChild(r);
   const b = r.getBoundingClientRect().height;
   return document.body.removeChild(r), b;
-}, W = ({ position: u, parentScrollPosition: r, onAction: b }) => {
-  const t = H(), [T, p] = _(!1), [E, x] = _(!1), [c, B] = _({ xPos: 0, yPos: 0, height: 0 }), [m, I] = _(0), C = d(0), i = d(null), s = d(null), o = d(null), [v] = $(), a = (l) => {
+}, W = ({ position: a, parentScrollPosition: r, onAction: b }) => {
+  const t = H(), [T, p] = _(!1), [E, x] = _(!1), [c, B] = _({ xPos: 0, yPos: 0, height: 0 }), [m, I] = _(0), C = d(0), i = d(null), s = d(null), o = d(null), [v] = $(), u = (l) => {
     b(l), p(!1);
   }, g = () => {
     const l = i.current ? i.current.getBoundingClientRect().width : 0;
     s.current && i.current && o.current && (c.xPos < l && s.current ? (s.current.style.left = `${l - c.xPos + N}px`, o.current.style.right = `${l - c.xPos + f + N}px`) : (s.current.style.left = "0px", o.current.style.right = `${f}px`), m || I(M(i.current)), m > document.documentElement.clientHeight - c.yPos ? (s.current.style.top = `-${m + c.height}px`, o.current.style.top = `${m + f}px`, o.current.style.transform = "rotate(180deg)") : (s.current.style.top = "0px", o.current.style.top = `-${A}px`, o.current.style.transform = "none"));
   }, P = () => (g(), `translate(${((c == null ? void 0 : c.xPos) ?? 0) - (i.current ? i.current.getBoundingClientRect().width : 0)}px, ${c.yPos - (r - C.current)}px)`);
   return R(() => {
-    B(u), u && (C.current = r), p(!1), x(!1);
-  }, [u]), R(() => {
+    B(a), a && (C.current = r), p(!1), x(!1);
+  }, [a]), R(() => {
     if (o.current) {
       const l = o.current.getBoundingClientRect(), h = v.getRootElement();
       if (!h) return;
@@ -56,7 +56,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("insertRowAbove"),
+              onClick: () => u("insertRowAbove"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableInsertRowAbove,
               children: t.table.insertRowAbove
@@ -66,7 +66,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("insertRowBelow"),
+              onClick: () => u("insertRowBelow"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableInsertRowBelow,
               children: t.table.insertRowBelow
@@ -76,7 +76,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("deleteRow"),
+              onClick: () => u("deleteRow"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableDeleteRow,
               children: t.table.deleteRow
@@ -86,7 +86,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("insertColumnLeft"),
+              onClick: () => u("insertColumnLeft"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableInsertColumnLeft,
               children: t.table.insertColumnLeft
@@ -96,7 +96,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("insertColumnRight"),
+              onClick: () => u("insertColumnRight"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableInsertColumnRight,
               children: t.table.insertColumnRight
@@ -106,7 +106,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("deleteColumn"),
+              onClick: () => u("deleteColumn"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableDeleteColumn,
               children: t.table.deleteColumn
@@ -116,7 +116,7 @@ import '../../../../../assets/TableCellContextMenu.css';const n = {
             "button",
             {
               type: "button",
-              onClick: () => a("deleteTable"),
+              onClick: () => u("deleteTable"),
               className: n["context-menu__item"],
               "aria-label": t.aria.labels.tableDeleteTable,
               children: t.table.deleteTable

package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js

@@ -4,7 +4,7 @@ import "../../../../clsx-OuTLNxxd.js";
 import "../../../../LexicalTable.prod-M0HiIwBZ.js";
 import "../../../../Lexical.prod-DOV_uwol.js";
 import "react";
-import { T as F } from "../../../../TablePlugin-CrCof8yO.js";
+import { T as F } from "../../../../TablePlugin-Bj5FObQ_.js";
 import "./helpers.js";
 import "../../hooks/useFlyout.js";
 import "../../../Icon/Icon.js";
@@ -21,7 +21,7 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../RteEditor.module-45648CA2.js";
+import "../../../../RteEditor.module-B_3uFnFu.js";
 import "../../hooks/useTranslation.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../Providers/LanguageProvider.js";
@@ -29,7 +29,7 @@ import "../../../../index-DllfJcv4.js";
 import "../../../SelectListbox/SelectListbox.js";
 import "../../../SelectListbox/SelectProvider.js";
 import "../../../Sortable/components/SortableItem.js";
-import "../../../../SortableProvider-B3_u0pKv.js";
+import "../../../../SortableProvider-CwX1lFMa.js";
 export {
   F as TablePlugin
 };

package/dist/components/RteEditor/Plugins/TablePlugin/index.js

@@ -1,4 +1,4 @@
-import { T as o } from "../../../../TablePlugin-CrCof8yO.js";
+import { T as o } from "../../../../TablePlugin-Bj5FObQ_.js";
 import { TableCellContextMenu as t } from "./TableCellContextMenu/TableCellContextMenu.js";
 export {
   t as TableCellContextMenu,

package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js

@@ -7,9 +7,9 @@ import { BlockFormatPlugin as T } from "../BlockFormatPlugin/BlockFormatPlugin.j
 import { ListPlugin as k } from "../ListPlugin/ListPlugin.js";
 import { LinkPlugin as x } from "../LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as B } from "../HistoryPlugin/HistoryPlugin.js";
-import { T as S } from "../../../../TablePlugin-CrCof8yO.js";
+import { T as S } from "../../../../TablePlugin-Bj5FObQ_.js";
 import { TableCellContextMenu as z } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
-import { s as A } from "../../../../RteEditor.module-45648CA2.js";
+import { s as A } from "../../../../RteEditor.module-B_3uFnFu.js";
 import { setScrollableContainers as w, removeScrollableContainers as K } from "../../helpers.js";
 const O = ({ editorScrollPosition: d }) => {
   const [t] = P(), [i, s] = L(null), u = E(null), f = N(() => {