@uva-glass/component-library 3.42.2 → 3.42.3

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.stories.js","sources":["../../../src/components/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { useState } from 'react';\n\nimport type { ChangeEvent, PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n  // MultiSelectHeader can be added optionally\n  <MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />\n  <MultiSelect noBorder={noBorder} scrollable={scrollable}>\n    {mockItems.map(({ itemName, itemValue, disabled }) => (\n      <MultiSelect.MultiSelectItem key={itemName} label={itemName} value={itemValue}\n        checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />\n    ))}\n  </MultiSelect>\n  `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelect',\n  component: MultiSelect,\n  argTypes: {\n    header: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: MultiSelect,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<MultiSelectProps>>;\n\nconst Template: StoryFn<PropsWithChildren<MultiSelectProps>> = (args) => {\n  const [items, setItems] = useState<string[]>([]);\n\n  const mockItems = [\n    { itemName: 'AItem 1', itemValue: '1', disabled: true },\n    { itemName: 'BItem 2', itemValue: '2' },\n    { itemName: 'Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3', itemValue: '3' },\n    { itemName: 'CItem 4', itemValue: '4' },\n    { itemName: 'DItem 5', itemValue: '5' },\n    { itemName: 'EItem 6', itemValue: '6' },\n  ];\n\n  const handleClear = () => {\n    setItems([]);\n    fn()();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    setItems((prevState) => {\n      const newItems = checked ? [...prevState, value] : prevState.filter((itemValue) => itemValue !== value);\n      fn()(newItems);\n      return newItems;\n    });\n  };\n\n  return (\n    <Container>\n      {/* header added under separate boolean arg here for storybook purpose, \n      it should be added as direct arg to MultiSelect when used in application */}\n      {args.header && (\n        <MultiSelect.MultiSelectHeader\n          label=\"Item list\"\n          clearTrigger={items.length > 0 ? 'Clear Selection' : ''}\n          onClear={handleClear}\n        />\n      )}\n      <MultiSelect {...args}>\n        {mockItems.map(({ itemName, itemValue, disabled }) => (\n          <MultiSelect.MultiSelectItem\n            key={itemName}\n            label={itemName}\n            value={itemValue}\n            checked={items.includes(itemValue)}\n            onChange={handleChange}\n            disabled={disabled}\n          />\n        ))}\n      </MultiSelect>\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectProps> = {\n  scrollable: true,\n  noBorder: false,\n};\n\nexport const MultiSelectExample = Template.bind({});\nMultiSelectExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithHeader = Template.bind({});\nWithHeader.args = {\n  ...defaultArgs,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n\nexport const WithheaderAndWithoutScrollContainerAndBorder = Template.bind({});\nWithheaderAndWithoutScrollContainerAndBorder.args = {\n  scrollable: false,\n  noBorder: true,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n"],"names":["codeString","MultiSelect_stories","MultiSelect","Template","args","items","setItems","useState","mockItems","handleClear","fn","handleChange","event","checked","value","prevState","newItems","itemValue","Container","jsx","itemName","disabled","defaultArgs","MultiSelectExample","WithHeader","WithheaderAndWithoutScrollContainerAndBorder"],"mappings":";;;;;AAWA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAA,CAAE,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,WAAW,WAAW,KAAK,UAAU,GAAA;AAAA,IACjD,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,oFAAoF,WAAW,IAAA;AAAA,IAC3G,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,EAAI,GAGlCC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAA,CAAE,GACXI,IAAG;AAAA,EAAE,GAGDC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,EAAA,IAAUF,EAAM;AACjC,IAAAN,EAAS,CAACS,MAAc;AACtB,YAAMC,IAAWH,IAAU,CAAC,GAAGE,GAAWD,CAAK,IAAIC,EAAU,OAAO,CAACE,MAAcA,MAAcH,CAAK;AACtGJ,aAAAA,EAAA,EAAKM,CAAQ,GACNA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,2BACGE,GAAA,EAGE,UAAA;AAAA,IAAAd,EAAK,UACJ,gBAAAe;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QACC,OAAM;AAAA,QACN,cAAcG,EAAM,SAAS,IAAI,oBAAoB;AAAA,QACrD,SAASI;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,gBAAAU,EAACjB,GAAA,EAAa,GAAGE,GACd,UAAAI,EAAU,IAAI,CAAC,EAAE,UAAAY,GAAU,WAAAH,GAAW,UAAAI,EAAA,MACrC,gBAAAF;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QAEC,OAAOkB;AAAA,QACP,OAAOH;AAAA,QACP,SAASZ,EAAM,SAASY,CAAS;AAAA,QACjC,UAAUN;AAAA,QACV,UAAAU;AAAA,MAAA;AAAA,MALKD;AAAA,IAAA,CAOR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ,GAEME,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBpB,EAAS,KAAK,CAAA,CAAE;AAClDoB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAarB,EAAS,KAAK,CAAA,CAAE;AAC1CqB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CtB,EAAS,KAAK,CAAA,CAAE;AAC5EsB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}
+{"version":3,"file":"MultiSelect.stories.js","sources":["../../../src/components/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { useState } from 'react';\n\nimport type { ChangeEvent, PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n  // MultiSelectHeader can be added optionally\n  <MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />\n  <MultiSelect noBorder={noBorder} scrollable={scrollable}>\n    {mockItems.map(({ itemName, itemValue, disabled }) => (\n      <MultiSelect.MultiSelectItem key={itemName} label={itemName} value={itemValue}\n        checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />\n    ))}\n  </MultiSelect>\n  `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelect',\n  component: MultiSelect,\n  argTypes: {\n    header: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: MultiSelect,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<MultiSelectProps>>;\n\nconst Template: StoryFn<PropsWithChildren<MultiSelectProps>> = (args) => {\n  const [items, setItems] = useState<string[]>([]);\n\n  const mockItems = [\n    { itemName: 'AItem 1', itemValue: '1', disabled: true },\n    { itemName: 'BItem 2', itemValue: '2' },\n    { itemName: 'Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3', itemValue: '3' },\n    { itemName: 'CItem 4', itemValue: '4' },\n    { itemName: 'DItem 5', itemValue: '5' },\n    { itemName: 'EItem 6', itemValue: '6' },\n  ];\n\n  const handleClear = () => {\n    setItems([]);\n    fn()();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    setItems((prevState) => {\n      const newItems = checked ? [...prevState, value] : prevState.filter((itemValue) => itemValue !== value);\n      fn()(newItems);\n      return newItems;\n    });\n  };\n\n  return (\n    <Container>\n      {/* header added under separate boolean arg here for storybook purpose, \n      it should be added as direct arg to MultiSelect when used in application */}\n      {args.header && (\n        <MultiSelect.MultiSelectHeader\n          label=\"Item list\"\n          clearTrigger={items.length > 0 ? 'Clear Selection' : ''}\n          onClear={handleClear}\n        />\n      )}\n      <MultiSelect {...args}>\n        {mockItems.map(({ itemName, itemValue, disabled }) => (\n          <MultiSelect.MultiSelectItem\n            key={itemName}\n            label={itemName}\n            value={itemValue}\n            checked={items.includes(itemValue)}\n            onChange={handleChange}\n            disabled={disabled}\n          />\n        ))}\n      </MultiSelect>\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectProps> = {\n  scrollable: true,\n  noBorder: false,\n};\n\nexport const MultiSelectExample = Template.bind({});\nMultiSelectExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithHeader = Template.bind({});\nWithHeader.args = {\n  ...defaultArgs,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n\nexport const WithheaderAndWithoutScrollContainerAndBorder = Template.bind({});\nWithheaderAndWithoutScrollContainerAndBorder.args = {\n  scrollable: false,\n  noBorder: true,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n"],"names":["codeString","MultiSelect_stories","MultiSelect","Template","args","items","setItems","useState","mockItems","handleClear","fn","handleChange","event","checked","value","prevState","newItems","itemValue","Container","jsx","itemName","disabled","defaultArgs","MultiSelectExample","WithHeader","WithheaderAndWithoutScrollContainerAndBorder"],"mappings":";;;;;AAWA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAA,CAAE,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,WAAW,WAAW,KAAK,UAAU,GAAA;AAAA,IACjD,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,oFAAoF,WAAW,IAAA;AAAA,IAC3G,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,EAAI,GAGlCC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAA,CAAE,GACXI,IAAG;AAAA,EACL,GAEMC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,EAAA,IAAUF,EAAM;AACjC,IAAAN,EAAS,CAACS,MAAc;AACtB,YAAMC,IAAWH,IAAU,CAAC,GAAGE,GAAWD,CAAK,IAAIC,EAAU,OAAO,CAACE,MAAcA,MAAcH,CAAK;AACtGJ,aAAAA,EAAA,EAAKM,CAAQ,GACNA;AAAA,IACT,CAAC;AAAA,EACH;AAEA,2BACGE,GAAA,EAGE,UAAA;AAAA,IAAAd,EAAK,UACJ,gBAAAe;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QACC,OAAM;AAAA,QACN,cAAcG,EAAM,SAAS,IAAI,oBAAoB;AAAA,QACrD,SAASI;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,gBAAAU,EAACjB,GAAA,EAAa,GAAGE,GACd,UAAAI,EAAU,IAAI,CAAC,EAAE,UAAAY,GAAU,WAAAH,GAAW,UAAAI,EAAA,MACrC,gBAAAF;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QAEC,OAAOkB;AAAA,QACP,OAAOH;AAAA,QACP,SAASZ,EAAM,SAASY,CAAS;AAAA,QACjC,UAAUN;AAAA,QACV,UAAAU;AAAA,MAAA;AAAA,MALKD;AAAA,IAAA,CAOR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ,GAEME,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBpB,EAAS,KAAK,CAAA,CAAE;AAClDoB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAarB,EAAS,KAAK,CAAA,CAAE;AAC1CqB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CtB,EAAS,KAAK,CAAA,CAAE;AAC5EsB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}

package/dist/components/MultiSelect/components/MultiSelectHeader.js

@@ -16,12 +16,12 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import { a as A } from "../../../TablePlugin-cMMBdz-x.js";
+import { a as A } from "../../../TablePlugin-FQQwnq2m.js";
 import "../../RteEditor/Providers/LanguageProvider.js";
 import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../RteEditor/hooks/components/Flyout.js";
 import "react-dom";
-import "../../../index-nrPtQ1dv.js";
+import "../../../index-yEhaxKq-.js";
 import "../../SelectListbox/SelectListbox.js";
 import "../../SelectListbox/SelectProvider.js";
 import "../../Sortable/components/SortableItem.js";

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { M as l } from "../../TablePlugin-cMMBdz-x.js";
+import { M as l } from "../../TablePlugin-FQQwnq2m.js";
 export {
   l as MultiSelect
 };

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';\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  /** Dark border. */\n  darkBorder?: 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  darkBorder = 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, updatePosition } = 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      updatePosition();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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={clsx(styles['multi-select-box-trigger'], {\n          [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n        })}\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","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","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  /** Dark border. */\n  darkBorder?: 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  darkBorder = 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, updatePosition } = 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      updatePosition();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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={clsx(styles['multi-select-box-trigger'], {\n          [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n        })}\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","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { l as n } from "../../index-BYGu3RV5.js";
+import { l as n } from "../../index-BamlKH-k.js";
 import { MultiSelectBox as e } from "./MultiSelectBox.js";
 const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", f = {
   title: "Organisms/MultiSelectBox",

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

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as d, Fragment as r } from "react/jsx-runtime";
-import "../../index-BwBhYsdx.js";
-import { r as n, s as t, f as a } from "../../react.esm-CJKnSGEF.js";
+import "../../index-B32mP_-H.js";
+import { r as n, s as t, f as a } from "../../react.esm-WLX_DeH0.js";
 import { MultiSelectBox as l } from "./MultiSelectBox.js";
 const i = jest.fn(), c = [
   { label: "Option 1", value: "1" },

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';\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,GAAA,GAEnBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAA;AAAA,EAC5B,EAAE,OAAO,YAAY,OAAO,IAAA;AAAA,EAC5B,EAAE,OAAO,YAAY,OAAO,IAAA;AAC9B;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AACnD,IAAAC,EAAO,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AACnG,UAAMK,IAASC,EAAO,UAAU,QAAQ;AACxC,WAAOD,CAAM,EAAE,kBAAA,GACf,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACxD,IAAAH,EAAO,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AACnG,UAAMK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAA;AAAA,EAAkB,CACvD,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MACE,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QAC1F,gBAAAG,EAAC,OAAA,EAAI,eAAY,mBAAkB,UAAA,UAAA,CAAO;AAAA,MAAA,EAAA,CAC5C;AAAA,IAAA;AAGF,UAAME,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AACtD,UAAMK,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,GAAA,GAEnBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAA;AAAA,EAC5B,EAAE,OAAO,YAAY,OAAO,IAAA;AAAA,EAC5B,EAAE,OAAO,YAAY,OAAO,IAAA;AAC9B;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AACnD,IAAAC,EAAO,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AACnG,UAAMK,IAASC,EAAO,UAAU,QAAQ;AACxC,WAAOD,CAAM,EAAE,kBAAA,GACf,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EACzD,CAAC,GAED,GAAG,iDAAiD,MAAM;AACxD,IAAAH,EAAO,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AACnG,UAAMK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAA;AAAA,EACtC,CAAC,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MACE,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QAC1F,gBAAAG,EAAC,OAAA,EAAI,eAAY,mBAAkB,UAAA,UAAA,CAAO;AAAA,MAAA,EAAA,CAC5C;AAAA,IAAA;AAGF,UAAME,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AACtD,UAAMK,IAAiBJ,EAAO,YAAY,iBAAiB;AAC3D,IAAAC,EAAU,MAAMG,CAAc,GAC9B,OAAOL,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EACzD,CAAC;AACH,CAAC;"}

package/dist/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Notification.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type NotificationVariant = 'default' | 'bar';\nexport type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';\n\nexport interface NotificationProps {\n  title?: string;\n  subtitle?: string;\n  action?: ReactNode;\n  variant?: NotificationVariant;\n  level: NotificationLevel;\n  onClose?: () => void;\n}\n\nexport const Notification = ({ title, subtitle, action, variant = 'default', level, onClose }: NotificationProps) => {\n  const isBar = variant === 'bar';\n\n  function setIconName(toastType: NotificationLevel) {\n    if (toastType === 'neutral') return 'CalendarEdit';\n    if (toastType === 'information') return 'SquareInfo';\n    if (toastType === 'success') return 'CheckCircle';\n    return 'ExclamationTriangleMini';\n  }\n\n  return (\n    <div className={clsx(styles['notification'], styles[`notification--${variant}`], styles[`notification--${level}`])}>\n      <div className={styles['notification-content']}>\n        <Icon name={setIconName(level)} />\n        <div className={styles['notification-content--text']}>\n          {title && <p className={styles['notification-title']}>{title}</p>}\n          {subtitle && <p className={styles['notification-subtitle']}>{subtitle}</p>}\n          {action && <div className={styles['notification-action']}>{action}</div>}\n        </div>\n      </div>\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label=\"close\"\n          className={clsx(styles['notification-close-button'], styles[`notification-close-button--${level}`], {\n            [styles[`notification-close-button--bar--${level}`]]: isBar,\n          })}\n        >\n          <Icon name=\"Cross\" size={24} />\n        </button>\n      )}\n    </div>\n  );\n};\n"],"names":["Notification","title","subtitle","action","variant","level","onClose","isBar","setIconName","toastType","clsx","styles","jsxs","jsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBaA,IAAe,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,GAAO,SAAAC,QAAiC;AACnH,QAAMC,IAAQH,MAAY;AAE1B,WAASI,EAAYC,GAA8B;AACjD,WAAIA,MAAc,YAAkB,iBAChCA,MAAc,gBAAsB,eACpCA,MAAc,YAAkB,gBAC7B;AAAA,EAAA;AAGT,2BACG,OAAA,EAAI,WAAWC,EAAKC,EAAO,cAAiBA,EAAO,iBAAiBP,CAAO,EAAE,GAAGO,EAAO,iBAAiBN,CAAK,EAAE,CAAC,GAC/G,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,sBAAsB,GAC3C,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAMN,EAAYH,CAAK,EAAA,CAAG;AAAA,MAChC,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GAChD,UAAA;AAAA,QAAAV,uBAAU,KAAA,EAAE,WAAWU,EAAO,oBAAoB,GAAI,UAAAV,GAAM;AAAA,QAC5DC,KAAY,gBAAAW,EAAC,KAAA,EAAE,WAAWF,EAAO,uBAAuB,GAAI,UAAAT,GAAS;AAAA,QACrEC,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAWF,EAAO,qBAAqB,GAAI,UAAAR,EAAA,CAAO;AAAA,MAAA,EAAA,CACpE;AAAA,IAAA,GACF;AAAA,IACCG,KACC,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWH,EAAKC,EAAO,2BAA2B,GAAGA,EAAO,8BAA8BN,CAAK,EAAE,GAAG;AAAA,UAClG,CAACM,EAAO,mCAAmCN,CAAK,EAAE,CAAC,GAAGE;AAAA,QAAA,CACvD;AAAA,QAED,UAAA,gBAAAM,EAACC,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/B,GAEJ;AAEJ;"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Notification.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type NotificationVariant = 'default' | 'bar';\nexport type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';\n\nexport interface NotificationProps {\n  title?: string;\n  subtitle?: string;\n  action?: ReactNode;\n  variant?: NotificationVariant;\n  level: NotificationLevel;\n  onClose?: () => void;\n}\n\nexport const Notification = ({ title, subtitle, action, variant = 'default', level, onClose }: NotificationProps) => {\n  const isBar = variant === 'bar';\n\n  function setIconName(toastType: NotificationLevel) {\n    if (toastType === 'neutral') return 'CalendarEdit';\n    if (toastType === 'information') return 'SquareInfo';\n    if (toastType === 'success') return 'CheckCircle';\n    return 'ExclamationTriangleMini';\n  }\n\n  return (\n    <div className={clsx(styles['notification'], styles[`notification--${variant}`], styles[`notification--${level}`])}>\n      <div className={styles['notification-content']}>\n        <Icon name={setIconName(level)} />\n        <div className={styles['notification-content--text']}>\n          {title && <p className={styles['notification-title']}>{title}</p>}\n          {subtitle && <p className={styles['notification-subtitle']}>{subtitle}</p>}\n          {action && <div className={styles['notification-action']}>{action}</div>}\n        </div>\n      </div>\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label=\"close\"\n          className={clsx(styles['notification-close-button'], styles[`notification-close-button--${level}`], {\n            [styles[`notification-close-button--bar--${level}`]]: isBar,\n          })}\n        >\n          <Icon name=\"Cross\" size={24} />\n        </button>\n      )}\n    </div>\n  );\n};\n"],"names":["Notification","title","subtitle","action","variant","level","onClose","isBar","setIconName","toastType","clsx","styles","jsxs","jsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBaA,IAAe,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,GAAO,SAAAC,QAAiC;AACnH,QAAMC,IAAQH,MAAY;AAE1B,WAASI,EAAYC,GAA8B;AACjD,WAAIA,MAAc,YAAkB,iBAChCA,MAAc,gBAAsB,eACpCA,MAAc,YAAkB,gBAC7B;AAAA,EACT;AAEA,2BACG,OAAA,EAAI,WAAWC,EAAKC,EAAO,cAAiBA,EAAO,iBAAiBP,CAAO,EAAE,GAAGO,EAAO,iBAAiBN,CAAK,EAAE,CAAC,GAC/G,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,sBAAsB,GAC3C,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAMN,EAAYH,CAAK,EAAA,CAAG;AAAA,MAChC,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GAChD,UAAA;AAAA,QAAAV,uBAAU,KAAA,EAAE,WAAWU,EAAO,oBAAoB,GAAI,UAAAV,GAAM;AAAA,QAC5DC,KAAY,gBAAAW,EAAC,KAAA,EAAE,WAAWF,EAAO,uBAAuB,GAAI,UAAAT,GAAS;AAAA,QACrEC,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAWF,EAAO,qBAAqB,GAAI,UAAAR,EAAA,CAAO;AAAA,MAAA,EAAA,CACpE;AAAA,IAAA,GACF;AAAA,IACCG,KACC,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWH,EAAKC,EAAO,2BAA2B,GAAGA,EAAO,8BAA8BN,CAAK,EAAE,GAAG;AAAA,UAClG,CAACM,EAAO,mCAAmCN,CAAK,EAAE,CAAC,GAAGE;AAAA,QAAA,CACvD;AAAA,QAED,UAAA,gBAAAM,EAACC,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/B,GAEJ;AAEJ;"}

package/dist/components/Notification/Notification.stories.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { l as a } from "../../index-BYGu3RV5.js";
+import { l as a } from "../../index-BamlKH-k.js";
 import { Notification as t } from "./Notification.js";
 const l = `<Notification title={title} subtitle={subtitle} action={action} 
   level={level} variant={variant} onClose={() => {}} />`, m = {

package/dist/components/Notification/Notification.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-BwBhYsdx.js";
-import { r as i, s as t } from "../../react.esm-CJKnSGEF.js";
+import "../../index-B32mP_-H.js";
+import { r as i, s as t } from "../../react.esm-WLX_DeH0.js";
 import { Notification as n } from "./Notification.js";
 describe("Notification", () => {
   it("renders title and subtitle", () => {

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.test.js","sources":["../../../src/components/Notification/Notification.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { Notification } from './Notification';\n\ndescribe('Notification', () => {\n  it('renders title and subtitle', () => {\n    render(<Notification level=\"information\" title=\"Info title\" subtitle=\"Info subtitle\" />);\n    expect(screen.getByText('Info title')).toBeInTheDocument();\n    expect(screen.getByText('Info subtitle')).toBeInTheDocument();\n  });\n\n  it('renders bar variant', () => {\n    render(<Notification level=\"danger\" variant=\"bar\" title=\"Danger title\" />);\n    expect(screen.getByText('Danger title')).toBeInTheDocument();\n  });\n});\n"],"names":["render","jsx","Notification","screen"],"mappings":";;;;AAKA,SAAS,gBAAgB,MAAM;AAC7B,KAAG,8BAA8B,MAAM;AACrC,IAAAA,EAAO,gBAAAC,EAACC,KAAa,OAAM,eAAc,OAAM,cAAa,UAAS,iBAAgB,CAAE,GACvF,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAA,GACvC,OAAOA,EAAO,UAAU,eAAe,CAAC,EAAE,kBAAA;AAAA,EAAkB,CAC7D,GAED,GAAG,uBAAuB,MAAM;AAC9B,IAAAH,EAAO,gBAAAC,EAACC,KAAa,OAAM,UAAS,SAAQ,OAAM,OAAM,gBAAe,CAAE,GACzE,OAAOC,EAAO,UAAU,cAAc,CAAC,EAAE,kBAAA;AAAA,EAAkB,CAC5D;AACH,CAAC;"}
+{"version":3,"file":"Notification.test.js","sources":["../../../src/components/Notification/Notification.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { Notification } from './Notification';\n\ndescribe('Notification', () => {\n  it('renders title and subtitle', () => {\n    render(<Notification level=\"information\" title=\"Info title\" subtitle=\"Info subtitle\" />);\n    expect(screen.getByText('Info title')).toBeInTheDocument();\n    expect(screen.getByText('Info subtitle')).toBeInTheDocument();\n  });\n\n  it('renders bar variant', () => {\n    render(<Notification level=\"danger\" variant=\"bar\" title=\"Danger title\" />);\n    expect(screen.getByText('Danger title')).toBeInTheDocument();\n  });\n});\n"],"names":["render","jsx","Notification","screen"],"mappings":";;;;AAKA,SAAS,gBAAgB,MAAM;AAC7B,KAAG,8BAA8B,MAAM;AACrC,IAAAA,EAAO,gBAAAC,EAACC,KAAa,OAAM,eAAc,OAAM,cAAa,UAAS,iBAAgB,CAAE,GACvF,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAA,GACvC,OAAOA,EAAO,UAAU,eAAe,CAAC,EAAE,kBAAA;AAAA,EAC5C,CAAC,GAED,GAAG,uBAAuB,MAAM;AAC9B,IAAAH,EAAO,gBAAAC,EAACC,KAAa,OAAM,UAAS,SAAQ,OAAM,OAAM,gBAAe,CAAE,GACzE,OAAOC,EAAO,UAAU,cAAc,CAAC,EAAE,kBAAA;AAAA,EAC3C,CAAC;AACH,CAAC;"}

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { l as t } from "../../index-BYGu3RV5.js";
+import { l as t } from "../../index-BamlKH-k.js";
 import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
 import { Container as a } from "../../storyComponents/Container/Container.js";
 const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {

package/dist/components/OverlayStepBar/OverlayStepBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n  /** Array of strings. */\n  stepLabels: string[];\n  /** activeStep number starting with 1. */\n  activeStep: number;\n  /** Array of prefix numbers to not show in the steplabels */\n  disabledCountPrefix?: number[];\n  /** navigate to step. */\n  onStepClick?: (step: number) => void;\n}\n\nexport const OverlayStepBar = ({\n  stepLabels,\n  activeStep = 0,\n  disabledCountPrefix = [],\n  onStepClick,\n}: OverlayStepBarProps) => {\n  if (activeStep > stepLabels.length) {\n    console.error('activeStep is greater than the number of steps');\n  }\n\n  const getStepDisplayNumber = (stepIndex: number): string => {\n    const stepNumber = stepIndex + 1;\n\n    if (disabledCountPrefix.includes(stepNumber)) {\n      return '';\n    }\n\n    const enabledStepsBefore = Array.from({ length: stepIndex }, (_, count) => count + 1).filter(\n      (step) => !disabledCountPrefix.includes(step)\n    ).length;\n\n    return String(enabledStepsBefore + 1);\n  };\n\n  return (\n    <div className={styles['overlay-step-bar__container']}>\n      {stepLabels.length &&\n        stepLabels.map((label, index) => (\n          <span key={`${index}_${label}`} className={styles[`overlay-step-bar__step-wrapper`]}>\n            <button\n              className={clsx(styles[`overlay-step-bar__step`], [\n                index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n              ])}\n              {...(onStepClick && { onClick: () => onStepClick(index + 1) })}\n              type=\"button\"\n              aria-label={`Step ${index + 1}`}\n              aria-current={index === activeStep - 1 ? 'step' : undefined}\n              disabled={index === activeStep - 1}\n            >\n              <span className={styles[`overlay-step-bar__step--index`]}>{getStepDisplayNumber(index)}</span>\n              <span\n                className={clsx(\n                  styles[`overlay-step-bar__step--label`],\n                  disabledCountPrefix.includes(index + 1) && styles[`overlay-step-bar__step--label-show`]\n                )}\n              >\n                {label}\n              </span>\n            </button>\n          </span>\n        ))}\n    </div>\n  );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","disabledCountPrefix","onStepClick","getStepDisplayNumber","stepIndex","stepNumber","enabledStepsBefore","_","count","step","styles","label","index","jsx","jsxs","clsx"],"mappings":";;;;;;;;;;GAeaA,IAAiB,CAAC;AAAA,EAC7B,YAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,qBAAAC,IAAsB,CAAA;AAAA,EACtB,aAAAC;AACF,MAA2B;AACzB,EAAIF,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD;AAGhE,QAAMI,IAAuB,CAACC,MAA8B;AAC1D,UAAMC,IAAaD,IAAY;AAE/B,QAAIH,EAAoB,SAASI,CAAU;AACzC,aAAO;AAGT,UAAMC,IAAqB,MAAM,KAAK,EAAE,QAAQF,KAAa,CAACG,GAAGC,MAAUA,IAAQ,CAAC,EAAE;AAAA,MACpF,CAACC,MAAS,CAACR,EAAoB,SAASQ,CAAI;AAAA,IAAA,EAC5C;AAEF,WAAO,OAAOH,IAAqB,CAAC;AAAA,EAAA;AAGtC,2BACG,OAAA,EAAI,WAAWI,EAAO,6BAA6B,GACjD,YAAW,UACVX,EAAW,IAAI,CAACY,GAAOC,MACrB,gBAAAC,EAAC,UAA+B,WAAWH,EAAO,gCAAgC,GAChF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,QAChDE,MAAUZ,IAAa,KAAKU,EAAO,gCAAgC;AAAA,MAAA,CACpE;AAAA,MACA,GAAIR,KAAe,EAAE,SAAS,MAAMA,EAAYU,IAAQ,CAAC,EAAA;AAAA,MAC1D,MAAK;AAAA,MACL,cAAY,QAAQA,IAAQ,CAAC;AAAA,MAC7B,gBAAcA,MAAUZ,IAAa,IAAI,SAAS;AAAA,MAClD,UAAUY,MAAUZ,IAAa;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAWH,EAAO,+BAA+B,GAAI,UAAAP,EAAqBS,CAAK,EAAA,CAAE;AAAA,QACvF,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACTL,EAAO,+BAA+B;AAAA,cACtCT,EAAoB,SAASW,IAAQ,CAAC,KAAKF,EAAO,oCAAoC;AAAA,YAAA;AAAA,YAGvF,UAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,KAnBO,GAAGC,CAAK,IAAID,CAAK,EAqB5B,CACD,GACL;AAEJ;"}
+{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n  /** Array of strings. */\n  stepLabels: string[];\n  /** activeStep number starting with 1. */\n  activeStep: number;\n  /** Array of prefix numbers to not show in the steplabels */\n  disabledCountPrefix?: number[];\n  /** navigate to step. */\n  onStepClick?: (step: number) => void;\n}\n\nexport const OverlayStepBar = ({\n  stepLabels,\n  activeStep = 0,\n  disabledCountPrefix = [],\n  onStepClick,\n}: OverlayStepBarProps) => {\n  if (activeStep > stepLabels.length) {\n    console.error('activeStep is greater than the number of steps');\n  }\n\n  const getStepDisplayNumber = (stepIndex: number): string => {\n    const stepNumber = stepIndex + 1;\n\n    if (disabledCountPrefix.includes(stepNumber)) {\n      return '';\n    }\n\n    const enabledStepsBefore = Array.from({ length: stepIndex }, (_, count) => count + 1).filter(\n      (step) => !disabledCountPrefix.includes(step)\n    ).length;\n\n    return String(enabledStepsBefore + 1);\n  };\n\n  return (\n    <div className={styles['overlay-step-bar__container']}>\n      {stepLabels.length &&\n        stepLabels.map((label, index) => (\n          <span key={`${index}_${label}`} className={styles[`overlay-step-bar__step-wrapper`]}>\n            <button\n              className={clsx(styles[`overlay-step-bar__step`], [\n                index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n              ])}\n              {...(onStepClick && { onClick: () => onStepClick(index + 1) })}\n              type=\"button\"\n              aria-label={`Step ${index + 1}`}\n              aria-current={index === activeStep - 1 ? 'step' : undefined}\n              disabled={index === activeStep - 1}\n            >\n              <span className={styles[`overlay-step-bar__step--index`]}>{getStepDisplayNumber(index)}</span>\n              <span\n                className={clsx(\n                  styles[`overlay-step-bar__step--label`],\n                  disabledCountPrefix.includes(index + 1) && styles[`overlay-step-bar__step--label-show`]\n                )}\n              >\n                {label}\n              </span>\n            </button>\n          </span>\n        ))}\n    </div>\n  );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","disabledCountPrefix","onStepClick","getStepDisplayNumber","stepIndex","stepNumber","enabledStepsBefore","_","count","step","styles","label","index","jsx","jsxs","clsx"],"mappings":";;;;;;;;;;GAeaA,IAAiB,CAAC;AAAA,EAC7B,YAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,qBAAAC,IAAsB,CAAA;AAAA,EACtB,aAAAC;AACF,MAA2B;AACzB,EAAIF,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD;AAGhE,QAAMI,IAAuB,CAACC,MAA8B;AAC1D,UAAMC,IAAaD,IAAY;AAE/B,QAAIH,EAAoB,SAASI,CAAU;AACzC,aAAO;AAGT,UAAMC,IAAqB,MAAM,KAAK,EAAE,QAAQF,KAAa,CAACG,GAAGC,MAAUA,IAAQ,CAAC,EAAE;AAAA,MACpF,CAACC,MAAS,CAACR,EAAoB,SAASQ,CAAI;AAAA,IAAA,EAC5C;AAEF,WAAO,OAAOH,IAAqB,CAAC;AAAA,EACtC;AAEA,2BACG,OAAA,EAAI,WAAWI,EAAO,6BAA6B,GACjD,YAAW,UACVX,EAAW,IAAI,CAACY,GAAOC,MACrB,gBAAAC,EAAC,UAA+B,WAAWH,EAAO,gCAAgC,GAChF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,QAChDE,MAAUZ,IAAa,KAAKU,EAAO,gCAAgC;AAAA,MAAA,CACpE;AAAA,MACA,GAAIR,KAAe,EAAE,SAAS,MAAMA,EAAYU,IAAQ,CAAC,EAAA;AAAA,MAC1D,MAAK;AAAA,MACL,cAAY,QAAQA,IAAQ,CAAC;AAAA,MAC7B,gBAAcA,MAAUZ,IAAa,IAAI,SAAS;AAAA,MAClD,UAAUY,MAAUZ,IAAa;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAWH,EAAO,+BAA+B,GAAI,UAAAP,EAAqBS,CAAK,EAAA,CAAE;AAAA,QACvF,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACTL,EAAO,+BAA+B;AAAA,cACtCT,EAAoB,SAASW,IAAQ,CAAC,KAAKF,EAAO,oCAAoC;AAAA,YAAA;AAAA,YAGvF,UAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,KAnBO,GAAGC,CAAK,IAAID,CAAK,EAqB5B,CACD,GACL;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString =\n  '<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {\n    activeStep: { control: 'number' },\n    stepLabels: { control: 'object' },\n    disabledCountPrefix: {\n      table: {\n        disable: true,\n      },\n    },\n    onStepClick: { action: 'stepClicked' },\n  },\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n  const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n  return (\n    <OverlayStepBar\n      {...args}\n      activeStep={activeStep}\n      onStepClick={(step) => {\n        setActiveStep(step);\n        args.onStepClick?.(step);\n      }}\n    />\n  );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['Basic Details', 'Lecturers', 'Period Planning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n  activeStep: 2,\n};\n\nexport const OverlayStepBarHidePrifix = Template.bind({});\nOverlayStepBarHidePrifix.args = {\n  ...defaultArgs,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  disabledCountPrefix: [1, 6],\n  activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","defaultArgs","OverlayStepBarExample","OverlayStepBarHidePrifix"],"mappings":";;;AAOA,MAAMA,IACJ,4HAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,aAAa,EAAE,QAAQ,cAAA;AAAA,EAAc;AAAA,EAEvC,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAEjE,SACE,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;AACrB,QAAAH,EAAcG,CAAI,GAClBL,EAAK,cAAcK,CAAI;AAAA,MAAA;AAAA,IACzB;AAAA,EAAA;AAGN,GAEMC,IAA4C;AAAA,EAChD,YAAY,CAAC,iBAAiB,aAAa,mBAAmB,cAAc,iBAAiB,UAAU;AACzG,GAEaC,IAAwBR,EAAS,KAAK,CAAA,CAAE;AACrDQ,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;AAEO,MAAME,IAA2BT,EAAS,KAAK,CAAA,CAAE;AACxDS,EAAyB,OAAO;AAAA,EAC9B,GAAGF;AAAA;AAAA,EAEH,qBAAqB,CAAC,GAAG,CAAC;AAAA,EAC1B,YAAY;AACd;"}
+{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString =\n  '<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {\n    activeStep: { control: 'number' },\n    stepLabels: { control: 'object' },\n    disabledCountPrefix: {\n      table: {\n        disable: true,\n      },\n    },\n    onStepClick: { action: 'stepClicked' },\n  },\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n  const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n  return (\n    <OverlayStepBar\n      {...args}\n      activeStep={activeStep}\n      onStepClick={(step) => {\n        setActiveStep(step);\n        args.onStepClick?.(step);\n      }}\n    />\n  );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['Basic Details', 'Lecturers', 'Period Planning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n  activeStep: 2,\n};\n\nexport const OverlayStepBarHidePrifix = Template.bind({});\nOverlayStepBarHidePrifix.args = {\n  ...defaultArgs,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  disabledCountPrefix: [1, 6],\n  activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","defaultArgs","OverlayStepBarExample","OverlayStepBarHidePrifix"],"mappings":";;;AAOA,MAAMA,IACJ,4HAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,aAAa,EAAE,QAAQ,cAAA;AAAA,EAAc;AAAA,EAEvC,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAEjE,SACE,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;AACrB,QAAAH,EAAcG,CAAI,GAClBL,EAAK,cAAcK,CAAI;AAAA,MACzB;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMC,IAA4C;AAAA,EAChD,YAAY,CAAC,iBAAiB,aAAa,mBAAmB,cAAc,iBAAiB,UAAU;AACzG,GAEaC,IAAwBR,EAAS,KAAK,CAAA,CAAE;AACrDQ,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;AAEO,MAAME,IAA2BT,EAAS,KAAK,CAAA,CAAE;AACxDS,EAAyB,OAAO;AAAA,EAC9B,GAAGF;AAAA;AAAA,EAEH,qBAAqB,CAAC,GAAG,CAAC;AAAA,EAC1B,YAAY;AACd;"}

package/dist/components/PageOverlay/PageOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageOverlay.js","sources":["../../../src/components/PageOverlay/PageOverlay.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames, { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './PageOverlay.module.css';\n\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\nimport { Backdrop } from 'components/Backdrop';\n\nexport interface PageOverlayProps {\n  /** The buttons of the dialog. */\n  buttons?: ReactNode;\n  /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. */\n  isLoading?: boolean;\n  /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. Used together with `isLoading`. */\n  spinnerAriaValueText?: string;\n  /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. */\n  closeButtonAriaValueText?: string;\n  /** `true` to render the dialog opened; otherwise, `false`. */\n  isOpen: boolean;\n  /** `true` to disable form validation; otherwise, `false`. */\n  noValidate?: boolean;\n  /** The callback function that is invoked when the dialog is closed. */\n  onClose?(): void;\n  /** The callback function that is invoked when the form is submitted. */\n  onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n  /** The title of the dialog. */\n  title?: string;\n  /** The contents of the dialog header. */\n  headerContent?: ReactNode;\n  /** The variant styling of the dialog. */\n  variant?: 'full-screen' | 'with-gutters';\n  /** The content background color of the dialog. Default grey-300*/\n  contentBackgroundColor?: 'grey' | 'white';\n}\n\n/** Represents a component for a modal dialog. */\nexport function PageOverlay({\n  buttons,\n  children,\n  isLoading,\n  spinnerAriaValueText = 'Loading',\n  closeButtonAriaValueText = 'Close',\n  isOpen,\n  noValidate = false,\n  onClose,\n  onSubmit,\n  title,\n  headerContent,\n  variant = 'full-screen',\n  contentBackgroundColor = 'grey',\n}: PropsWithChildren<PageOverlayProps>) {\n  const ref = useRef<HTMLDivElement>(null);\n  const formRef = useRef<HTMLFormElement>(null);\n  const [isScrollable, setIsScrollable] = useState(false);\n  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n  const { dialogProps, titleProps } = useDialog({ role: 'dialog' }, ref);\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose }, ref);\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    const formElement = formRef.current;\n\n    if (!formElement) return;\n\n    function checkScrollable() {\n      const scrollHeight = formElement!.scrollHeight;\n      const clientHeight = formElement!.clientHeight;\n      const scrollTop = formElement!.scrollTop;\n\n      setIsScrollable(scrollHeight > clientHeight);\n      setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n    }\n\n    function handleScrollAndResize() {\n      checkScrollable();\n    }\n\n    formElement.addEventListener('scroll', handleScrollAndResize);\n    window.addEventListener('resize', handleScrollAndResize);\n\n    const timeoutId = setTimeout(() => {\n      checkScrollable();\n    }, 0);\n\n    return () => {\n      formElement.removeEventListener('scroll', handleScrollAndResize);\n\n      window.removeEventListener('resize', handleScrollAndResize);\n      clearTimeout(timeoutId);\n    };\n  }, [isOpen, headerContent]);\n\n  function onKeyUp(event: KeyboardEvent) {\n    event.stopPropagation();\n  }\n\n  if (!isOpen) return null;\n\n  return (\n    <OverlayContainer className={styles['page-overlay__container']}>\n      <Backdrop {...underlayProps}>\n        {isLoading ? (\n          <Spinner ariaValueText={spinnerAriaValueText} />\n        ) : (\n          <>\n            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n            <FocusScope autoFocus contain restoreFocus>\n              <div\n                {...dialogProps}\n                {...modalProps}\n                {...overlayProps}\n                className={clsx(styles['page-overlay'], {\n                  [styles[`page-overlay--${variant}`]]: variant,\n                })}\n                onKeyUp={onKeyUp}\n                role=\"presentation\"\n                ref={ref}\n              >\n                {(title || headerContent) && (\n                  <div className={styles['page-overlay__title-wrapper']}>\n                    {title && (\n                      <h1 {...titleProps} className={styles['page-overlay__title']}>\n                        {title}\n                      </h1>\n                    )}\n                    {headerContent}\n                    {\n                      <span className={styles['page-overlay__close']}>\n                        <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onClose} />\n                      </span>\n                    }\n                  </div>\n                )}\n                <form\n                  className={classNames(\n                    styles['page-overlay__content'],\n                    styles[`page-overlay__content--${contentBackgroundColor}`],\n                    {\n                      [styles['page-overlay--content-with-buttons']]: buttons,\n                    }\n                  )}\n                  onSubmit={onSubmit}\n                  noValidate={noValidate}\n                  ref={formRef}\n                >\n                  <div className={styles['page-overlay__children']}>{children}</div>\n                  {buttons && (\n                    <div\n                      className={classNames(styles['page-overlay__buttons-bar'], {\n                        [styles['page-overlay__buttons-bar--shadow']]: isScrollable && !isScrolledToBottom,\n                      })}\n                    >\n                      {buttons}\n                    </div>\n                  )}\n                </form>\n              </div>\n            </FocusScope>\n          </>\n        )}\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["PageOverlay","buttons","children","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","title","headerContent","variant","contentBackgroundColor","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","styles","Backdrop","Spinner","Fragment","FocusScope","jsxs","clsx","OverlayCloseButton","classNames"],"mappings":"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"}
+{"version":3,"file":"PageOverlay.js","sources":["../../../src/components/PageOverlay/PageOverlay.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames, { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './PageOverlay.module.css';\n\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\nimport { Backdrop } from 'components/Backdrop';\n\nexport interface PageOverlayProps {\n  /** The buttons of the dialog. */\n  buttons?: ReactNode;\n  /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. */\n  isLoading?: boolean;\n  /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. Used together with `isLoading`. */\n  spinnerAriaValueText?: string;\n  /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. */\n  closeButtonAriaValueText?: string;\n  /** `true` to render the dialog opened; otherwise, `false`. */\n  isOpen: boolean;\n  /** `true` to disable form validation; otherwise, `false`. */\n  noValidate?: boolean;\n  /** The callback function that is invoked when the dialog is closed. */\n  onClose?(): void;\n  /** The callback function that is invoked when the form is submitted. */\n  onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n  /** The title of the dialog. */\n  title?: string;\n  /** The contents of the dialog header. */\n  headerContent?: ReactNode;\n  /** The variant styling of the dialog. */\n  variant?: 'full-screen' | 'with-gutters';\n  /** The content background color of the dialog. Default grey-300*/\n  contentBackgroundColor?: 'grey' | 'white';\n}\n\n/** Represents a component for a modal dialog. */\nexport function PageOverlay({\n  buttons,\n  children,\n  isLoading,\n  spinnerAriaValueText = 'Loading',\n  closeButtonAriaValueText = 'Close',\n  isOpen,\n  noValidate = false,\n  onClose,\n  onSubmit,\n  title,\n  headerContent,\n  variant = 'full-screen',\n  contentBackgroundColor = 'grey',\n}: PropsWithChildren<PageOverlayProps>) {\n  const ref = useRef<HTMLDivElement>(null);\n  const formRef = useRef<HTMLFormElement>(null);\n  const [isScrollable, setIsScrollable] = useState(false);\n  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n  const { dialogProps, titleProps } = useDialog({ role: 'dialog' }, ref);\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose }, ref);\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    const formElement = formRef.current;\n\n    if (!formElement) return;\n\n    function checkScrollable() {\n      const scrollHeight = formElement!.scrollHeight;\n      const clientHeight = formElement!.clientHeight;\n      const scrollTop = formElement!.scrollTop;\n\n      setIsScrollable(scrollHeight > clientHeight);\n      setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n    }\n\n    function handleScrollAndResize() {\n      checkScrollable();\n    }\n\n    formElement.addEventListener('scroll', handleScrollAndResize);\n    window.addEventListener('resize', handleScrollAndResize);\n\n    const timeoutId = setTimeout(() => {\n      checkScrollable();\n    }, 0);\n\n    return () => {\n      formElement.removeEventListener('scroll', handleScrollAndResize);\n\n      window.removeEventListener('resize', handleScrollAndResize);\n      clearTimeout(timeoutId);\n    };\n  }, [isOpen, headerContent]);\n\n  function onKeyUp(event: KeyboardEvent) {\n    event.stopPropagation();\n  }\n\n  if (!isOpen) return null;\n\n  return (\n    <OverlayContainer className={styles['page-overlay__container']}>\n      <Backdrop {...underlayProps}>\n        {isLoading ? (\n          <Spinner ariaValueText={spinnerAriaValueText} />\n        ) : (\n          <>\n            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n            <FocusScope autoFocus contain restoreFocus>\n              <div\n                {...dialogProps}\n                {...modalProps}\n                {...overlayProps}\n                className={clsx(styles['page-overlay'], {\n                  [styles[`page-overlay--${variant}`]]: variant,\n                })}\n                onKeyUp={onKeyUp}\n                role=\"presentation\"\n                ref={ref}\n              >\n                {(title || headerContent) && (\n                  <div className={styles['page-overlay__title-wrapper']}>\n                    {title && (\n                      <h1 {...titleProps} className={styles['page-overlay__title']}>\n                        {title}\n                      </h1>\n                    )}\n                    {headerContent}\n                    {\n                      <span className={styles['page-overlay__close']}>\n                        <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onClose} />\n                      </span>\n                    }\n                  </div>\n                )}\n                <form\n                  className={classNames(\n                    styles['page-overlay__content'],\n                    styles[`page-overlay__content--${contentBackgroundColor}`],\n                    {\n                      [styles['page-overlay--content-with-buttons']]: buttons,\n                    }\n                  )}\n                  onSubmit={onSubmit}\n                  noValidate={noValidate}\n                  ref={formRef}\n                >\n                  <div className={styles['page-overlay__children']}>{children}</div>\n                  {buttons && (\n                    <div\n                      className={classNames(styles['page-overlay__buttons-bar'], {\n                        [styles['page-overlay__buttons-bar--shadow']]: isScrollable && !isScrolledToBottom,\n                      })}\n                    >\n                      {buttons}\n                    </div>\n                  )}\n                </form>\n              </div>\n            </FocusScope>\n          </>\n        )}\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["PageOverlay","buttons","children","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","title","headerContent","variant","contentBackgroundColor","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","styles","Backdrop","Spinner","Fragment","FocusScope","jsxs","clsx","OverlayCloseButton","classNames"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PageOverlay.stories.js","sources":["../../../node_modules/@react-stately/utils/dist/useControlledState.mjs","../../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.mjs","../../../src/components/PageOverlay/PageOverlay.stories.tsx"],"sourcesContent":["import {useState as $3whtM$useState, useRef as $3whtM$useRef, useEffect as $3whtM$useEffect, useCallback as $3whtM$useCallback} from \"react\";\n\n/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \nfunction $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {\n    let [stateValue, setStateValue] = (0, $3whtM$useState)(value || defaultValue);\n    let isControlledRef = (0, $3whtM$useRef)(value !== undefined);\n    let isControlled = value !== undefined;\n    (0, $3whtM$useEffect)(()=>{\n        let wasControlled = isControlledRef.current;\n        if (wasControlled !== isControlled && process.env.NODE_ENV !== 'production') console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);\n        isControlledRef.current = isControlled;\n    }, [\n        isControlled\n    ]);\n    let currentValue = isControlled ? value : stateValue;\n    let setValue = (0, $3whtM$useCallback)((value, ...args)=>{\n        let onChangeCaller = (value, ...onChangeArgs)=>{\n            if (onChange) {\n                if (!Object.is(currentValue, value)) onChange(value, ...onChangeArgs);\n            }\n            if (!isControlled) // If uncontrolled, mutate the currentValue local variable so that\n            // calling setState multiple times with the same value only emits onChange once.\n            // We do not use a ref for this because we specifically _do_ want the value to\n            // reset every render, and assigning to a ref in render breaks aborted suspended renders.\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            currentValue = value;\n        };\n        if (typeof value === 'function') {\n            if (process.env.NODE_ENV !== 'production') console.warn('We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320');\n            // this supports functional updates https://reactjs.org/docs/hooks-reference.html#functional-updates\n            // when someone using useControlledState calls setControlledState(myFunc)\n            // this will call our useState setState with a function as well which invokes myFunc and calls onChange with the value from myFunc\n            // if we're in an uncontrolled state, then we also return the value of myFunc which to setState looks as though it was just called with myFunc from the beginning\n            // otherwise we just return the controlled value, which won't cause a rerender because React knows to bail out when the value is the same\n            let updateFunction = (oldValue, ...functionArgs)=>{\n                let interceptedValue = value(isControlled ? currentValue : oldValue, ...functionArgs);\n                onChangeCaller(interceptedValue, ...args);\n                if (!isControlled) return interceptedValue;\n                return oldValue;\n            };\n            setStateValue(updateFunction);\n        } else {\n            if (!isControlled) setStateValue(value);\n            onChangeCaller(value, ...args);\n        }\n    }, [\n        isControlled,\n        currentValue,\n        onChange\n    ]);\n    return [\n        currentValue,\n        setValue\n    ];\n}\n\n\nexport {$458b0a5536c1a7cf$export$40bfa8c7b0832715 as useControlledState};\n//# sourceMappingURL=useControlledState.module.js.map\n","import {useCallback as $hnMvi$useCallback} from \"react\";\nimport {useControlledState as $hnMvi$useControlledState} from \"@react-stately/utils\";\n\n/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \n\nfunction $fc909762b330b746$export$61c6a8c84e605fb6(props) {\n    let [isOpen, setOpen] = (0, $hnMvi$useControlledState)(props.isOpen, props.defaultOpen || false, props.onOpenChange);\n    const open = (0, $hnMvi$useCallback)(()=>{\n        setOpen(true);\n    }, [\n        setOpen\n    ]);\n    const close = (0, $hnMvi$useCallback)(()=>{\n        setOpen(false);\n    }, [\n        setOpen\n    ]);\n    const toggle = (0, $hnMvi$useCallback)(()=>{\n        setOpen(!isOpen);\n    }, [\n        setOpen,\n        isOpen\n    ]);\n    return {\n        isOpen: isOpen,\n        setOpen: setOpen,\n        open: open,\n        close: close,\n        toggle: toggle\n    };\n}\n\n\nexport {$fc909762b330b746$export$61c6a8c84e605fb6 as useOverlayTriggerState};\n//# sourceMappingURL=useOverlayTriggerState.module.js.map\n","import { OverlayProvider } from '@react-aria/overlays';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { PageOverlayProps } from './PageOverlay';\n\nimport { PageOverlay } from './PageOverlay';\n\nimport { Button } from 'components/Buttons';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { InputField } from 'components/InputField';\nimport { GridRow } from 'components/GridRow';\nimport { Repeater } from 'components/Repeater';\n\nconst codeString = `\n  <PageOverlay isOpen={isOpen} title={title} onClose={onCloseFunction}\n    onSubmit={onSubmitFunction} buttons={buttons}> {children} </PageOverlay>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/PageOverlay',\n  component: PageOverlay,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    noValidate: {\n      control: 'boolean',\n    },\n    onSubmit: {\n      table: {\n        disable: true,\n      },\n    },\n    onClose: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: PageOverlay,\n    codeString: codeString,\n  },\n} as Meta<PageOverlayProps>;\n\nconst Template: StoryFn<PageOverlayProps> = (args: PageOverlayProps) => {\n  const { open, close, isOpen } = useOverlayTriggerState({});\n  return (\n    <OverlayProvider>\n      <Button variant=\"primary\" onClick={() => open()}>\n        Open PageOverlay\n      </Button>\n      <PageOverlay\n        {...args}\n        isOpen={isOpen}\n        buttons={\n          <ButtonGroup reversed>\n            <Button variant=\"primary\" onClick={() => close()}>\n              OK\n            </Button>\n            <Button variant=\"secondary\" onClick={() => close()}>\n              Cancel\n            </Button>\n          </ButtonGroup>\n        }\n        onClose={() => close()}\n      >\n        Your content goes here\n      </PageOverlay>\n    </OverlayProvider>\n  );\n};\n\nconst defaultArgs: Partial<PageOverlayProps> = {\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n  noValidate: false,\n};\n\nexport const PageOverlayExample = Template.bind({});\nPageOverlayExample.args = {\n  ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n  ...defaultArgs,\n  isLoading: true,\n  spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<PageOverlayProps> = (args: PageOverlayProps) => {\n  const { open, close, isOpen } = useOverlayTriggerState({});\n  return (\n    <OverlayProvider>\n      <Button variant=\"primary\" onClick={() => open()}>\n        Open PageOverlay\n      </Button>\n      <PageOverlay\n        {...args}\n        isOpen={isOpen}\n        buttons={\n          <GridRow>\n            <GridRow.Column size=\"8\" mediumSize=\"9\" startPositon=\"2\" mediumStartPosition=\"3\">\n              <ButtonGroup reversed>\n                <Button variant=\"primary\" onClick={() => close()}>\n                  OK\n                </Button>\n                <Button variant=\"secondary\" onClick={() => close()}>\n                  Cancel\n                </Button>\n              </ButtonGroup>\n            </GridRow.Column>\n          </GridRow>\n        }\n        onClose={() => close()}\n      >\n        <GridRow marginTop=\"100\">\n          <GridRow.Column size=\"8\" mediumSize=\"9\" startPositon=\"2\" mediumStartPosition=\"3\">\n            <Repeater gap=\"100\">\n              <div>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id\n                nulla. Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac\n                erat. Ut fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et\n                ultrices posuere cubilia curae; Gijs molestie ante ac magna ornare rhoncus non at quam. Mauris elementum\n                luctus euismod. Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi\n                blandit lacus sit amet dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In\n                nunc tortor, mollis ac molestie dignissim, elementum sed quam. Suspendisse mollis venenatis Laura,\n                pellentesque vestibulum elit consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit\n                augue tristique. Quisque cursus neque vel justo tristique, eget semper turpis elementum. Etiam venenatis\n                mattis sapien ac mattis. Mauris vitae ultrices erat.\n              </div>\n              <div>\n                Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat\n                nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus\n                risus. Pien ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac\n                euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet.\n                Proin semper enim ut sapien tempor, a ornare ipsum faucibus.\n              </div>\n              <Button variant=\"primary\">Test Button</Button>\n              <div>\n                Cras bibendum arcu vitae nulla venenatis, at cursus urna dapibus. In hac habitasse platea dictumst. In\n                porttitor at lectus nec rhoncus. In hac habitasse platea dictumst. Sed nec lectus neque. Aliquam erat\n                volutpat. Morbi elit orci, ultricies a porttitor eget, eleifend eu metus. Maarten sollicitudin vitae\n                massa a tempor. Aliquam dignissim metus id sem sollicitudin, eget lacinia nulla imperdiet. Nullam nec\n                vestibulum eros, ut aliquam libero. Nulla hendrerit cursus ante id auctor. Curabitur condimentum\n                malesuada maximus. Aliquam felis diam, gravida nec eleifend quis, placerat et orci.\n              </div>\n              <div>\n                Nulla leo ligula, hendrerit vel egestas in, suscipit vitae erat. Vivamus interdum quam lacinia, egestas\n                felis non, volutpat velit. Vestibulum orci diam, tincidunt ac mattis quis, ornare posuere magna. Aliquam\n                erat volutpat. Maecenas facilisis lacus id ante efficitur, non dignissim lorem suscipit. Praesent at\n                posuere velit. Nulla imperdiet, dui rhoncus volutpat feugiat, eros mauris cursus justo, a tincidunt\n                ipsum ipsum eu nisl. Nulla eu dui Thierry. Aliquam vitae risus ut velit fringilla sodales nec id lacus.\n                Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ullamcorper purus quis nunc\n                placerat, vel bibendum urna mollis. Nulla facilisi. Phasellus sed erat nec ex ullamcorper viverra.\n                Phasellus convallis nibh sed dolor vulputate convallis. Phasellus ac posuere sapien, et elementum ipsum.\n              </div>\n              <InputField id=\"test-input\" placeholder=\"Test Input\" />\n              <div>\n                Sed malesuada ut nulla ut maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,\n                per inceptos himenaeos. Morten in libero rhoncus, maximus tortor sit amet, molestie ex. Mauris rhoncus\n                et erat dapibus aliquam. Vestibulum placerat quam eget lorem tempor, vel venenatis lorem malesuada. Duis\n                ut venenatis arcu. Cras lacinia mi ac dui sollicitudin semper sit amet eget nisl. Fusce viverra ex eget\n                tortor molestie dictum. Cras ullamcorper faucibus nisi in congue. Sanne in tristique est. Praesent id\n                rhoncus ligula, ut porta dui. Sed tincidunt, mi nec varius auctor, nunc diam venenatis felis, at\n                facilisis tortor sem et magna. Aliquam erat volutpat.\n              </div>\n              <div>\n                Proin ipsum ante, auctor id consectetur a, pulvinar id nibh. Phasellus molestie quam eu mi lacinia\n                condimentum. Nullam fermentum id diam eu pharetra. Donec dictum sem vitae Jos scelerisque semper.\n                Suspendisse sed facilisis orci. Sed ut scelerisque odio. Curabitur felis felis, finibus ac orci at,\n                pellentesque efficitur risus. Sed et leo ac orci mollis tincidunt et pulvinar velit. Duis non nibh\n                tincidunt, lacinia urna a, fringilla augue. Benjamin fermentum, massa a mollis cursus, ex dui tincidunt\n                tellus, ut sollicitudin ex neque ac sapien.\n              </div>\n              <div>\n                Nunc rhoncus imperdiet leo. Fusce interdum malesuada aliquet. Aenean porttitor, tortor et volutpat\n                blandit, sapien diam scelerisque massa, ac facilisis metus turpis id quam. Donec ac elementum augue,\n                congue pulvinar arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras tempor\n                convallis elit, id vehicula Robin semper nec. Sed ut ultrices nulla. Cras nec dolor justo. Proin mollis\n                mauris ligula, luctus faucibus dolor ultrices ac. Nunc quis mauris fringilla, pellentesque massa nec,\n                dictum metus. Praesent odio ligula, tincidunt ultrices maximus quis, accumsan ut odio. Nullam iaculis\n                molestie nulla quis ultrices. Praesent quam velit, sagittis eget auctor a, dignissim ut massa. Donec\n                mollis at lorem sit amet accumsan. Praesent nec nulla laoreet nunc pretium egestas. Malesuada Wim arcu\n                pharetra, dictum nibh a, facilisis risus.\n              </div>\n            </Repeater>\n          </GridRow.Column>\n        </GridRow>\n      </PageOverlay>\n    </OverlayProvider>\n  );\n};\n\nexport const WithLongComplexContent = LongContentTemplate.bind({});\nWithLongComplexContent.args = {\n  ...defaultArgs,\n};\n"],"names":["$458b0a5536c1a7cf$export$40bfa8c7b0832715","value","defaultValue","onChange","stateValue","setStateValue","$3whtM$useState","isControlledRef","$3whtM$useRef","isControlled","$3whtM$useEffect","wasControlled","currentValue","setValue","$3whtM$useCallback","args","onChangeCaller","onChangeArgs","oldValue","functionArgs","interceptedValue","$fc909762b330b746$export$61c6a8c84e605fb6","props","isOpen","setOpen","$hnMvi$useControlledState","open","$hnMvi$useCallback","close","toggle","codeString","PageOverlay_stories","PageOverlay","Template","useOverlayTriggerState","OverlayProvider","jsx","Button","jsxs","ButtonGroup","defaultArgs","PageOverlayExample","Loading","LongContentTemplate","GridRow","Repeater","InputField","WithLongComplexContent"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"PageOverlay.stories.js","sources":["../../../node_modules/@react-stately/utils/dist/useControlledState.mjs","../../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.mjs","../../../src/components/PageOverlay/PageOverlay.stories.tsx"],"sourcesContent":["import {useState as $3whtM$useState, useRef as $3whtM$useRef, useEffect as $3whtM$useEffect, useCallback as $3whtM$useCallback} from \"react\";\n\n/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \nfunction $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {\n    let [stateValue, setStateValue] = (0, $3whtM$useState)(value || defaultValue);\n    let isControlledRef = (0, $3whtM$useRef)(value !== undefined);\n    let isControlled = value !== undefined;\n    (0, $3whtM$useEffect)(()=>{\n        let wasControlled = isControlledRef.current;\n        if (wasControlled !== isControlled && process.env.NODE_ENV !== 'production') console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);\n        isControlledRef.current = isControlled;\n    }, [\n        isControlled\n    ]);\n    let currentValue = isControlled ? value : stateValue;\n    let setValue = (0, $3whtM$useCallback)((value, ...args)=>{\n        let onChangeCaller = (value, ...onChangeArgs)=>{\n            if (onChange) {\n                if (!Object.is(currentValue, value)) onChange(value, ...onChangeArgs);\n            }\n            if (!isControlled) // If uncontrolled, mutate the currentValue local variable so that\n            // calling setState multiple times with the same value only emits onChange once.\n            // We do not use a ref for this because we specifically _do_ want the value to\n            // reset every render, and assigning to a ref in render breaks aborted suspended renders.\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            currentValue = value;\n        };\n        if (typeof value === 'function') {\n            if (process.env.NODE_ENV !== 'production') console.warn('We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320');\n            // this supports functional updates https://reactjs.org/docs/hooks-reference.html#functional-updates\n            // when someone using useControlledState calls setControlledState(myFunc)\n            // this will call our useState setState with a function as well which invokes myFunc and calls onChange with the value from myFunc\n            // if we're in an uncontrolled state, then we also return the value of myFunc which to setState looks as though it was just called with myFunc from the beginning\n            // otherwise we just return the controlled value, which won't cause a rerender because React knows to bail out when the value is the same\n            let updateFunction = (oldValue, ...functionArgs)=>{\n                let interceptedValue = value(isControlled ? currentValue : oldValue, ...functionArgs);\n                onChangeCaller(interceptedValue, ...args);\n                if (!isControlled) return interceptedValue;\n                return oldValue;\n            };\n            setStateValue(updateFunction);\n        } else {\n            if (!isControlled) setStateValue(value);\n            onChangeCaller(value, ...args);\n        }\n    }, [\n        isControlled,\n        currentValue,\n        onChange\n    ]);\n    return [\n        currentValue,\n        setValue\n    ];\n}\n\n\nexport {$458b0a5536c1a7cf$export$40bfa8c7b0832715 as useControlledState};\n//# sourceMappingURL=useControlledState.module.js.map\n","import {useCallback as $hnMvi$useCallback} from \"react\";\nimport {useControlledState as $hnMvi$useControlledState} from \"@react-stately/utils\";\n\n/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \n\nfunction $fc909762b330b746$export$61c6a8c84e605fb6(props) {\n    let [isOpen, setOpen] = (0, $hnMvi$useControlledState)(props.isOpen, props.defaultOpen || false, props.onOpenChange);\n    const open = (0, $hnMvi$useCallback)(()=>{\n        setOpen(true);\n    }, [\n        setOpen\n    ]);\n    const close = (0, $hnMvi$useCallback)(()=>{\n        setOpen(false);\n    }, [\n        setOpen\n    ]);\n    const toggle = (0, $hnMvi$useCallback)(()=>{\n        setOpen(!isOpen);\n    }, [\n        setOpen,\n        isOpen\n    ]);\n    return {\n        isOpen: isOpen,\n        setOpen: setOpen,\n        open: open,\n        close: close,\n        toggle: toggle\n    };\n}\n\n\nexport {$fc909762b330b746$export$61c6a8c84e605fb6 as useOverlayTriggerState};\n//# sourceMappingURL=useOverlayTriggerState.module.js.map\n","import { OverlayProvider } from '@react-aria/overlays';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { PageOverlayProps } from './PageOverlay';\n\nimport { PageOverlay } from './PageOverlay';\n\nimport { Button } from 'components/Buttons';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { InputField } from 'components/InputField';\nimport { GridRow } from 'components/GridRow';\nimport { Repeater } from 'components/Repeater';\n\nconst codeString = `\n  <PageOverlay isOpen={isOpen} title={title} onClose={onCloseFunction}\n    onSubmit={onSubmitFunction} buttons={buttons}> {children} </PageOverlay>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/PageOverlay',\n  component: PageOverlay,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    noValidate: {\n      control: 'boolean',\n    },\n    onSubmit: {\n      table: {\n        disable: true,\n      },\n    },\n    onClose: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: PageOverlay,\n    codeString: codeString,\n  },\n} as Meta<PageOverlayProps>;\n\nconst Template: StoryFn<PageOverlayProps> = (args: PageOverlayProps) => {\n  const { open, close, isOpen } = useOverlayTriggerState({});\n  return (\n    <OverlayProvider>\n      <Button variant=\"primary\" onClick={() => open()}>\n        Open PageOverlay\n      </Button>\n      <PageOverlay\n        {...args}\n        isOpen={isOpen}\n        buttons={\n          <ButtonGroup reversed>\n            <Button variant=\"primary\" onClick={() => close()}>\n              OK\n            </Button>\n            <Button variant=\"secondary\" onClick={() => close()}>\n              Cancel\n            </Button>\n          </ButtonGroup>\n        }\n        onClose={() => close()}\n      >\n        Your content goes here\n      </PageOverlay>\n    </OverlayProvider>\n  );\n};\n\nconst defaultArgs: Partial<PageOverlayProps> = {\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n  noValidate: false,\n};\n\nexport const PageOverlayExample = Template.bind({});\nPageOverlayExample.args = {\n  ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n  ...defaultArgs,\n  isLoading: true,\n  spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<PageOverlayProps> = (args: PageOverlayProps) => {\n  const { open, close, isOpen } = useOverlayTriggerState({});\n  return (\n    <OverlayProvider>\n      <Button variant=\"primary\" onClick={() => open()}>\n        Open PageOverlay\n      </Button>\n      <PageOverlay\n        {...args}\n        isOpen={isOpen}\n        buttons={\n          <GridRow>\n            <GridRow.Column size=\"8\" mediumSize=\"9\" startPositon=\"2\" mediumStartPosition=\"3\">\n              <ButtonGroup reversed>\n                <Button variant=\"primary\" onClick={() => close()}>\n                  OK\n                </Button>\n                <Button variant=\"secondary\" onClick={() => close()}>\n                  Cancel\n                </Button>\n              </ButtonGroup>\n            </GridRow.Column>\n          </GridRow>\n        }\n        onClose={() => close()}\n      >\n        <GridRow marginTop=\"100\">\n          <GridRow.Column size=\"8\" mediumSize=\"9\" startPositon=\"2\" mediumStartPosition=\"3\">\n            <Repeater gap=\"100\">\n              <div>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id\n                nulla. Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac\n                erat. Ut fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et\n                ultrices posuere cubilia curae; Gijs molestie ante ac magna ornare rhoncus non at quam. Mauris elementum\n                luctus euismod. Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi\n                blandit lacus sit amet dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In\n                nunc tortor, mollis ac molestie dignissim, elementum sed quam. Suspendisse mollis venenatis Laura,\n                pellentesque vestibulum elit consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit\n                augue tristique. Quisque cursus neque vel justo tristique, eget semper turpis elementum. Etiam venenatis\n                mattis sapien ac mattis. Mauris vitae ultrices erat.\n              </div>\n              <div>\n                Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat\n                nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus\n                risus. Pien ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac\n                euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet.\n                Proin semper enim ut sapien tempor, a ornare ipsum faucibus.\n              </div>\n              <Button variant=\"primary\">Test Button</Button>\n              <div>\n                Cras bibendum arcu vitae nulla venenatis, at cursus urna dapibus. In hac habitasse platea dictumst. In\n                porttitor at lectus nec rhoncus. In hac habitasse platea dictumst. Sed nec lectus neque. Aliquam erat\n                volutpat. Morbi elit orci, ultricies a porttitor eget, eleifend eu metus. Maarten sollicitudin vitae\n                massa a tempor. Aliquam dignissim metus id sem sollicitudin, eget lacinia nulla imperdiet. Nullam nec\n                vestibulum eros, ut aliquam libero. Nulla hendrerit cursus ante id auctor. Curabitur condimentum\n                malesuada maximus. Aliquam felis diam, gravida nec eleifend quis, placerat et orci.\n              </div>\n              <div>\n                Nulla leo ligula, hendrerit vel egestas in, suscipit vitae erat. Vivamus interdum quam lacinia, egestas\n                felis non, volutpat velit. Vestibulum orci diam, tincidunt ac mattis quis, ornare posuere magna. Aliquam\n                erat volutpat. Maecenas facilisis lacus id ante efficitur, non dignissim lorem suscipit. Praesent at\n                posuere velit. Nulla imperdiet, dui rhoncus volutpat feugiat, eros mauris cursus justo, a tincidunt\n                ipsum ipsum eu nisl. Nulla eu dui Thierry. Aliquam vitae risus ut velit fringilla sodales nec id lacus.\n                Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ullamcorper purus quis nunc\n                placerat, vel bibendum urna mollis. Nulla facilisi. Phasellus sed erat nec ex ullamcorper viverra.\n                Phasellus convallis nibh sed dolor vulputate convallis. Phasellus ac posuere sapien, et elementum ipsum.\n              </div>\n              <InputField id=\"test-input\" placeholder=\"Test Input\" />\n              <div>\n                Sed malesuada ut nulla ut maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,\n                per inceptos himenaeos. Morten in libero rhoncus, maximus tortor sit amet, molestie ex. Mauris rhoncus\n                et erat dapibus aliquam. Vestibulum placerat quam eget lorem tempor, vel venenatis lorem malesuada. Duis\n                ut venenatis arcu. Cras lacinia mi ac dui sollicitudin semper sit amet eget nisl. Fusce viverra ex eget\n                tortor molestie dictum. Cras ullamcorper faucibus nisi in congue. Sanne in tristique est. Praesent id\n                rhoncus ligula, ut porta dui. Sed tincidunt, mi nec varius auctor, nunc diam venenatis felis, at\n                facilisis tortor sem et magna. Aliquam erat volutpat.\n              </div>\n              <div>\n                Proin ipsum ante, auctor id consectetur a, pulvinar id nibh. Phasellus molestie quam eu mi lacinia\n                condimentum. Nullam fermentum id diam eu pharetra. Donec dictum sem vitae Jos scelerisque semper.\n                Suspendisse sed facilisis orci. Sed ut scelerisque odio. Curabitur felis felis, finibus ac orci at,\n                pellentesque efficitur risus. Sed et leo ac orci mollis tincidunt et pulvinar velit. Duis non nibh\n                tincidunt, lacinia urna a, fringilla augue. Benjamin fermentum, massa a mollis cursus, ex dui tincidunt\n                tellus, ut sollicitudin ex neque ac sapien.\n              </div>\n              <div>\n                Nunc rhoncus imperdiet leo. Fusce interdum malesuada aliquet. Aenean porttitor, tortor et volutpat\n                blandit, sapien diam scelerisque massa, ac facilisis metus turpis id quam. Donec ac elementum augue,\n                congue pulvinar arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras tempor\n                convallis elit, id vehicula Robin semper nec. Sed ut ultrices nulla. Cras nec dolor justo. Proin mollis\n                mauris ligula, luctus faucibus dolor ultrices ac. Nunc quis mauris fringilla, pellentesque massa nec,\n                dictum metus. Praesent odio ligula, tincidunt ultrices maximus quis, accumsan ut odio. Nullam iaculis\n                molestie nulla quis ultrices. Praesent quam velit, sagittis eget auctor a, dignissim ut massa. Donec\n                mollis at lorem sit amet accumsan. Praesent nec nulla laoreet nunc pretium egestas. Malesuada Wim arcu\n                pharetra, dictum nibh a, facilisis risus.\n              </div>\n            </Repeater>\n          </GridRow.Column>\n        </GridRow>\n      </PageOverlay>\n    </OverlayProvider>\n  );\n};\n\nexport const WithLongComplexContent = LongContentTemplate.bind({});\nWithLongComplexContent.args = {\n  ...defaultArgs,\n};\n"],"names":["$458b0a5536c1a7cf$export$40bfa8c7b0832715","value","defaultValue","onChange","stateValue","setStateValue","$3whtM$useState","isControlledRef","$3whtM$useRef","isControlled","$3whtM$useEffect","wasControlled","currentValue","setValue","$3whtM$useCallback","args","onChangeCaller","onChangeArgs","oldValue","functionArgs","interceptedValue","$fc909762b330b746$export$61c6a8c84e605fb6","props","isOpen","setOpen","$hnMvi$useControlledState","open","$hnMvi$useCallback","close","toggle","codeString","PageOverlay_stories","PageOverlay","Template","useOverlayTriggerState","OverlayProvider","jsx","Button","jsxs","ButtonGroup","defaultArgs","PageOverlayExample","Loading","LongContentTemplate","GridRow","Repeater","InputField","WithLongComplexContent"],"mappings":";;;;;;;;;;;AAaA,SAASA,EAA0CC,GAAOC,GAAcC,GAAU;AAC9E,MAAI,CAACC,GAAYC,CAAa,IAAQC,EAAiBL,KAASC,CAAY,GACxEK,IAAsBC,EAAeP,MAAU,MAAS,GACxDQ,IAAeR,MAAU;AAC7B,EAAIS,EAAkB,MAAI;AACtB,QAAIC,IAAgBJ,EAAgB;AACpC,IAAII,MAAkBF,KAAgB,QAAQ,IAAI,aAAa,gBAAc,QAAQ,KAAK,kCAAkCE,IAAgB,eAAe,cAAc,OAAOF,IAAe,eAAe,cAAc,GAAG,GAC/NF,EAAgB,UAAUE;AAAA,EAC9B,GAAG;AAAA,IACCA;AAAA,EACR,CAAK;AACD,MAAIG,IAAeH,IAAeR,IAAQG,GACtCS,IAAeC,EAAoB,CAACb,MAAUc,MAAO;AACrD,QAAIC,IAAiB,CAACf,MAAUgB,MAAe;AAC3C,MAAId,MACK,OAAO,GAAGS,GAAcX,CAAK,KAAGE,EAASF,GAAO,GAAGgB,CAAY,IAEnER,MAKLG,IAAeX;AAAA,IACnB;AACA,IAAI,OAAOA,KAAU,cACb,QAAQ,IAAI,aAAa,gBAAc,QAAQ,KAAK,2HAA2H,GAYnLI,EANqB,CAACa,MAAaC,MAAe;AAC9C,UAAIC,IAAmBnB,EAAMQ,IAAeG,IAAeM,GAAU,GAAGC,CAAY;AAEpF,aADAH,EAAeI,GAAkB,GAAGL,CAAI,GACnCN,IACES,IADmBE;AAAA,IAE9B,CAC4B,MAEvBX,KAAcJ,EAAcJ,CAAK,GACtCe,EAAef,GAAO,GAAGc,CAAI;AAAA,EAErC,GAAG;AAAA,IACCN;AAAA,IACAG;AAAA,IACAT;AAAA,EACR,CAAK;AACD,SAAO;AAAA,IACHS;AAAA,IACAC;AAAA,EACR;AACA;ACjDA,SAASQ,EAA0CC,GAAO;AACtD,MAAI,CAACC,GAAQC,CAAO,IAAQC,EAA2BH,EAAM,QAAQA,EAAM,eAAe,IAAOA,EAAM,YAAY;AACnH,QAAMI,IAAWC,EAAoB,MAAI;AACrC,IAAAH,EAAQ,EAAI;AAAA,EAChB,GAAG;AAAA,IACCA;AAAA,EACR,CAAK,GACKI,IAAYD,EAAoB,MAAI;AACtC,IAAAH,EAAQ,EAAK;AAAA,EACjB,GAAG;AAAA,IACCA;AAAA,EACR,CAAK,GACKK,IAAaF,EAAoB,MAAI;AACvC,IAAAH,EAAQ,CAACD,CAAM;AAAA,EACnB,GAAG;AAAA,IACCC;AAAA,IACAD;AAAA,EACR,CAAK;AACD,SAAO;AAAA,IACH,QAAQA;AAAA,IACR,SAASC;AAAA,IACT,MAAME;AAAA,IACN,OAAOE;AAAA,IACP,QAAQC;AAAA,EAChB;AACA;AC1BA,MAAMC,IAAa;AAAA;AAAA;AAAA,GAMnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAAClB,MAA2B;AACtE,QAAM,EAAE,MAAAW,GAAM,OAAAE,GAAO,QAAAL,MAAWW,EAAuB,CAAA,CAAE;AACzD,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAO,SAAQ,WAAU,SAAS,MAAMX,EAAA,GAAQ,UAAA,oBAEjD;AAAA,IACA,gBAAAU;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGjB;AAAA,QACJ,QAAAQ;AAAA,QACA,SACE,gBAAAe,EAACC,GAAA,EAAY,UAAQ,IACnB,UAAA;AAAA,UAAA,gBAAAH,EAACC,KAAO,SAAQ,WAAU,SAAS,MAAMT,EAAA,GAAS,UAAA,MAElD;AAAA,UACA,gBAAAQ,EAACC,KAAO,SAAQ,aAAY,SAAS,MAAMT,EAAA,GAAS,UAAA,SAAA,CAEpD;AAAA,QAAA,GACF;AAAA,QAEF,SAAS,MAAMA,EAAA;AAAA,QAChB,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ,GAEMY,IAAyC;AAAA,EAC7C,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AACd,GAEaC,IAAqBR,EAAS,KAAK,CAAA,CAAE;AAClDQ,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAUT,EAAS,KAAK,CAAA,CAAE;AACvCS,EAAQ,OAAO;AAAA,EACb,GAAGF;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;AAEA,MAAMG,IAAiD,CAAC5B,MAA2B;AACjF,QAAM,EAAE,MAAAW,GAAM,OAAAE,GAAO,QAAAL,MAAWW,EAAuB,CAAA,CAAE;AACzD,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAO,SAAQ,WAAU,SAAS,MAAMX,EAAA,GAAQ,UAAA,oBAEjD;AAAA,IACA,gBAAAU;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGjB;AAAA,QACJ,QAAAQ;AAAA,QACA,SACE,gBAAAa,EAACQ,GAAA,EACC,4BAACA,EAAQ,QAAR,EAAe,MAAK,KAAI,YAAW,KAAI,cAAa,KAAI,qBAAoB,KAC3E,UAAA,gBAAAN,EAACC,GAAA,EAAY,UAAQ,IACnB,UAAA;AAAA,UAAA,gBAAAH,EAACC,KAAO,SAAQ,WAAU,SAAS,MAAMT,EAAA,GAAS,UAAA,MAElD;AAAA,UACA,gBAAAQ,EAACC,KAAO,SAAQ,aAAY,SAAS,MAAMT,EAAA,GAAS,UAAA,SAAA,CAEpD;AAAA,QAAA,EAAA,CACF,GACF,GACF;AAAA,QAEF,SAAS,MAAMA,EAAA;AAAA,QAEf,4BAACgB,GAAA,EAAQ,WAAU,OACjB,UAAA,gBAAAR,EAACQ,EAAQ,QAAR,EAAe,MAAK,KAAI,YAAW,KAAI,cAAa,KAAI,qBAAoB,KAC3E,UAAA,gBAAAN,EAACO,GAAA,EAAS,KAAI,OACZ,UAAA;AAAA,UAAA,gBAAAT,EAAC,SAAI,UAAA,68BAAA,CAWL;AAAA,UACA,gBAAAA,EAAC,SAAI,UAAA,udAAA,CAML;AAAA,UACA,gBAAAA,EAACC,GAAA,EAAO,SAAQ,WAAU,UAAA,eAAW;AAAA,UACrC,gBAAAD,EAAC,SAAI,UAAA,+kBAAA,CAOL;AAAA,UACA,gBAAAA,EAAC,SAAI,UAAA,szBAAA,CASL;AAAA,UACA,gBAAAA,EAACU,GAAA,EAAW,IAAG,cAAa,aAAY,cAAa;AAAA,UACrD,gBAAAV,EAAC,SAAI,UAAA,8pBAAA,CAQL;AAAA,UACA,gBAAAA,EAAC,SAAI,UAAA,kiBAAA,CAOL;AAAA,UACA,gBAAAA,EAAC,SAAI,UAAA,o1BAAA,CAUL;AAAA,QAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ,GAEaW,IAAyBJ,EAAoB,KAAK,CAAA,CAAE;AACjEI,EAAuB,OAAO;AAAA,EAC5B,GAAGP;AACL;","x_google_ignoreList":[0,1]}

package/dist/components/PeriodSelector/PeriodSelector.js

@@ -18,12 +18,12 @@ import "../Input/Input.js";
 import "../InputField/InputField.js";
 import { Label as D } from "../Label/Label.js";
 import "react-router";
-import "../../TablePlugin-cMMBdz-x.js";
+import "../../TablePlugin-FQQwnq2m.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
 import "react-dom";
-import "../../index-nrPtQ1dv.js";
+import "../../index-yEhaxKq-.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";

package/dist/components/PeriodSelector/PeriodSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n  /** Indicates how many periods are shown. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  maxPeriods: 6 | 7;\n  /** array of period values [3, 5 ...] */\n  defaultValues?: number[];\n  label?: string;\n  labelPosition?: 'top' | 'left';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n  const result: number[][] = [];\n  for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n    result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n  }\n  return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n  maxPeriods = MAX_PERIODS,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidatedText = '',\n  onChange,\n}: PeriodSelectorProps) => {\n  const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n  const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n  const checkboxItems = chunkedPeriods.map((periods, semester) => {\n    return periods.map((period) => ({\n      label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n      value: period.toString(),\n    }));\n  });\n\n  const returnValues = useRef<number[][]>(\n    chunkedPeriods.map((semester) =>\n      semester.reduce((periods, period) => {\n        if (defaultValues?.includes(period)) periods.push(period);\n        return periods;\n      }, [] as number[])\n    )\n  );\n  const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n  const disableGroups = (selects: number[][]) => {\n    if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n    if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n    return [];\n  };\n\n  const handleChange = (values: string[], index: number) => {\n    returnValues.current[index] = values.map((num) => Number(num));\n    setDisableSemesters(disableGroups(returnValues.current));\n    onChange([...returnValues.current.flat()].sort());\n  };\n\n  useEffect(() => {\n    setDisableSemesters(disableGroups(returnValues.current));\n  }, []);\n\n  return (\n    <div\n      className={clsx(\n        styles['period-selector__container'],\n        styles[`period-selector__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['period-selector__selector-container']}>\n        <div className={styles['period-selector__selector-row']}>\n          {checkboxItems.map((checkboxes, semester) => (\n            <CheckboxButtonBar\n              key={`group_${semester}`}\n              checkboxes={checkboxes}\n              defaultValues={returnValues.current[semester].map((num) => num.toString())}\n              disableGroup={disableSemesters.includes(semester)}\n              required={required}\n              onSetValues={(event) => handleChange(event, semester)}\n              notValidated={notValidatedText !== ''}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}
+{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n  /** Indicates how many periods are shown. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  maxPeriods: 6 | 7;\n  /** array of period values [3, 5 ...] */\n  defaultValues?: number[];\n  label?: string;\n  labelPosition?: 'top' | 'left';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n  const result: number[][] = [];\n  for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n    result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n  }\n  return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n  maxPeriods = MAX_PERIODS,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidatedText = '',\n  onChange,\n}: PeriodSelectorProps) => {\n  const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n  const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n  const checkboxItems = chunkedPeriods.map((periods, semester) => {\n    return periods.map((period) => ({\n      label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n      value: period.toString(),\n    }));\n  });\n\n  const returnValues = useRef<number[][]>(\n    chunkedPeriods.map((semester) =>\n      semester.reduce((periods, period) => {\n        if (defaultValues?.includes(period)) periods.push(period);\n        return periods;\n      }, [] as number[])\n    )\n  );\n  const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n  const disableGroups = (selects: number[][]) => {\n    if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n    if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n    return [];\n  };\n\n  const handleChange = (values: string[], index: number) => {\n    returnValues.current[index] = values.map((num) => Number(num));\n    setDisableSemesters(disableGroups(returnValues.current));\n    onChange([...returnValues.current.flat()].sort());\n  };\n\n  useEffect(() => {\n    setDisableSemesters(disableGroups(returnValues.current));\n  }, []);\n\n  return (\n    <div\n      className={clsx(\n        styles['period-selector__container'],\n        styles[`period-selector__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['period-selector__selector-container']}>\n        <div className={styles['period-selector__selector-row']}>\n          {checkboxItems.map((checkboxes, semester) => (\n            <CheckboxButtonBar\n              key={`group_${semester}`}\n              checkboxes={checkboxes}\n              defaultValues={returnValues.current[semester].map((num) => num.toString())}\n              disableGroup={disableSemesters.includes(semester)}\n              required={required}\n              onSetValues={(event) => handleChange(event, semester)}\n              notValidated={notValidatedText !== ''}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}

package/dist/components/PeriodSelector/PeriodSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as t } from "../../index-BYGu3RV5.js";
+import { l as t } from "../../index-BamlKH-k.js";
 import { PeriodSelector as e } from "./PeriodSelector.js";
 const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition={} required={} onChange={} />", m = {
   title: "Organisms/PeriodSelector",

package/dist/components/Periods/Periods.js.map

@@ -1 +1 @@
-{"version":3,"file":"Periods.js","sources":["../../../src/components/Periods/Periods.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport styles from './Periods.module.css';\n\ninterface Period {\n  id: string;\n  number: number;\n  semesterNumber: number;\n  periodInSemester: number;\n}\n\ninterface TooltipTranslations {\n  period: string;\n  periods: string;\n  and: string;\n}\n\nexport interface PeriodsProps {\n  /** Indicates which periods are selected. */\n  periods: Period[] | number[];\n  /** Indicates the maximum number of periods to show in the selector. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  maxPeriods?: 6 | 7;\n  /** A object of translations for the tooltip. */\n  tooltipTranslations?: TooltipTranslations;\n}\n\nconst MAX_PERIODS = 6;\n\n/** Represents a component for a period indicator. */\nexport const Periods = ({ periods, tooltipTranslations, maxPeriods = MAX_PERIODS }: PeriodsProps) => {\n  const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n  const idPrefix = useId();\n\n  const isArrayOfNumbers = periods.some((value) => {\n    return typeof value === 'number';\n  });\n\n  const getTitles = (tooltipTranslations: TooltipTranslations): string => {\n    const semesterPeriods: Record<number, number[]> = {};\n\n    // Group periods by semester\n    isArrayOfNumbers\n      ? periods.forEach((period) => {\n          if (typeof period === 'number') {\n            // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n            const groupKey = Math.ceil(period / 3); // Determine the semester (1, 2, or 3)\n            // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n            const mappedValue = ((period - 1) % 3) + 1; // Map period to semester\n\n            if (!semesterPeriods[groupKey]) {\n              semesterPeriods[groupKey] = [];\n            }\n            semesterPeriods[groupKey].push(mappedValue);\n          }\n        })\n      : periods.forEach((period) => {\n          const { semesterNumber, periodInSemester } = period as Period;\n\n          if (!semesterPeriods[semesterNumber]) {\n            semesterPeriods[semesterNumber] = [];\n          }\n          semesterPeriods[semesterNumber].push(periodInSemester);\n        });\n\n    // Build the title string\n    const title = Object.keys(semesterPeriods).reduce((acc, semesterKey, index) => {\n      const semesterNumber = Number(semesterKey);\n      const periodsInSemester = semesterPeriods[semesterNumber];\n      let periodTitle = '';\n\n      // Determine if we need singular or plural form for \"period\"\n      const blokLabel = periodsInSemester.length > 1 ? tooltipTranslations.periods : tooltipTranslations.period;\n\n      // Build period sequence for the current semester\n      if (periodsInSemester.length > 1) {\n        const lastPeriod = periodsInSemester.pop();\n        periodTitle = `Semester ${semesterNumber} ${blokLabel} ${periodsInSemester.join(', ')} ${tooltipTranslations.and} ${lastPeriod}`;\n      } else {\n        periodTitle = `Semester ${semesterNumber} ${blokLabel} ${periodsInSemester[0]}`;\n      }\n\n      // Add proper spacing and periods\n      return `${acc}${index > 0 ? '. ' : ''}${periodTitle}`;\n    }, '');\n\n    return title.trim() + '.';\n  };\n\n  const isPeriodActive = (periodIndex: number): boolean => {\n    if (isArrayOfNumbers) {\n      return (periods as number[]).includes(periodIndex);\n    } else {\n      return periods.find((period) => (period as Period).number === periodIndex) ? true : false;\n    }\n  };\n\n  return (\n    <div className={styles['periods__container']} title={tooltipTranslations ? getTitles(tooltipTranslations) : ''}>\n      {maxPeriodsList.map((periodIndex) => {\n        return (\n          <span\n            className={clsx(\n              styles['periods__item'],\n              isPeriodActive(periodIndex) ? styles['periods__item--active'] : ''\n            )}\n            key={`${idPrefix}-${periodIndex}`}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["MAX_PERIODS","Periods","periods","tooltipTranslations","maxPeriods","maxPeriodsList","_","index","idPrefix","useId","isArrayOfNumbers","value","getTitles","semesterPeriods","period","groupKey","mappedValue","semesterNumber","periodInSemester","acc","semesterKey","periodsInSemester","periodTitle","blokLabel","lastPeriod","isPeriodActive","periodIndex","jsx","styles","clsx"],"mappings":";;;;;;;GA4BMA,IAAc,GAGPC,IAAU,CAAC,EAAE,SAAAC,GAAS,qBAAAC,GAAqB,YAAAC,IAAaJ,QAAgC;AACnG,QAAMK,IAAiB,MAAM,KAAK,EAAE,QAAQD,EAAA,GAAc,CAACE,GAAGC,MAAUA,IAAQ,CAAC,GAC3EC,IAAWC,EAAA,GAEXC,IAAmBR,EAAQ,KAAK,CAACS,MAC9B,OAAOA,KAAU,QACzB,GAEKC,IAAY,CAACT,MAAqD;AACtE,UAAMU,IAA4C,CAAA;AAGlD,WAAAH,IACIR,EAAQ,QAAQ,CAACY,MAAW;AAC1B,UAAI,OAAOA,KAAW,UAAU;AAE9B,cAAMC,IAAW,KAAK,KAAKD,IAAS,CAAC,GAE/BE,KAAgBF,IAAS,KAAK,IAAK;AAEzC,QAAKD,EAAgBE,CAAQ,MAC3BF,EAAgBE,CAAQ,IAAI,CAAA,IAE9BF,EAAgBE,CAAQ,EAAE,KAAKC,CAAW;AAAA,MAAA;AAAA,IAC5C,CACD,IACDd,EAAQ,QAAQ,CAACY,MAAW;AAC1B,YAAM,EAAE,gBAAAG,GAAgB,kBAAAC,EAAA,IAAqBJ;AAE7C,MAAKD,EAAgBI,CAAc,MACjCJ,EAAgBI,CAAc,IAAI,CAAA,IAEpCJ,EAAgBI,CAAc,EAAE,KAAKC,CAAgB;AAAA,IAAA,CACtD,GAGS,OAAO,KAAKL,CAAe,EAAE,OAAO,CAACM,GAAKC,GAAab,MAAU;AAC7E,YAAMU,IAAiB,OAAOG,CAAW,GACnCC,IAAoBR,EAAgBI,CAAc;AACxD,UAAIK,IAAc;AAGlB,YAAMC,IAAYF,EAAkB,SAAS,IAAIlB,EAAoB,UAAUA,EAAoB;AAGnG,UAAIkB,EAAkB,SAAS,GAAG;AAChC,cAAMG,IAAaH,EAAkB,IAAA;AACrC,QAAAC,IAAc,YAAYL,CAAc,IAAIM,CAAS,IAAIF,EAAkB,KAAK,IAAI,CAAC,IAAIlB,EAAoB,GAAG,IAAIqB,CAAU;AAAA,MAAA;AAE9H,QAAAF,IAAc,YAAYL,CAAc,IAAIM,CAAS,IAAIF,EAAkB,CAAC,CAAC;AAI/E,aAAO,GAAGF,CAAG,GAAGZ,IAAQ,IAAI,OAAO,EAAE,GAAGe,CAAW;AAAA,IAAA,GAClD,EAAE,EAEQ,SAAS;AAAA,EAAA,GAGlBG,IAAiB,CAACC,MAClBhB,IACMR,EAAqB,SAASwB,CAAW,IAE1C,EAAAxB,EAAQ,KAAK,CAACY,MAAYA,EAAkB,WAAWY,CAAW;AAI7E,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAuB,OAAOzB,IAAsBS,EAAUT,CAAmB,IAAI,IACzG,UAAAE,EAAe,IAAI,CAACqB,MAEjB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE;AAAA,QACTD,EAAO;AAAA,QACPH,EAAeC,CAAW,IAAIE,EAAO,uBAAuB,IAAI;AAAA,MAAA;AAAA,IAClE;AAAA,IACK,GAAGpB,CAAQ,IAAIkB,CAAW;AAAA,EAAA,CAGpC,GACH;AAEJ;"}
+{"version":3,"file":"Periods.js","sources":["../../../src/components/Periods/Periods.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport styles from './Periods.module.css';\n\ninterface Period {\n  id: string;\n  number: number;\n  semesterNumber: number;\n  periodInSemester: number;\n}\n\ninterface TooltipTranslations {\n  period: string;\n  periods: string;\n  and: string;\n}\n\nexport interface PeriodsProps {\n  /** Indicates which periods are selected. */\n  periods: Period[] | number[];\n  /** Indicates the maximum number of periods to show in the selector. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  maxPeriods?: 6 | 7;\n  /** A object of translations for the tooltip. */\n  tooltipTranslations?: TooltipTranslations;\n}\n\nconst MAX_PERIODS = 6;\n\n/** Represents a component for a period indicator. */\nexport const Periods = ({ periods, tooltipTranslations, maxPeriods = MAX_PERIODS }: PeriodsProps) => {\n  const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n  const idPrefix = useId();\n\n  const isArrayOfNumbers = periods.some((value) => {\n    return typeof value === 'number';\n  });\n\n  const getTitles = (tooltipTranslations: TooltipTranslations): string => {\n    const semesterPeriods: Record<number, number[]> = {};\n\n    // Group periods by semester\n    isArrayOfNumbers\n      ? periods.forEach((period) => {\n          if (typeof period === 'number') {\n            // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n            const groupKey = Math.ceil(period / 3); // Determine the semester (1, 2, or 3)\n            // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n            const mappedValue = ((period - 1) % 3) + 1; // Map period to semester\n\n            if (!semesterPeriods[groupKey]) {\n              semesterPeriods[groupKey] = [];\n            }\n            semesterPeriods[groupKey].push(mappedValue);\n          }\n        })\n      : periods.forEach((period) => {\n          const { semesterNumber, periodInSemester } = period as Period;\n\n          if (!semesterPeriods[semesterNumber]) {\n            semesterPeriods[semesterNumber] = [];\n          }\n          semesterPeriods[semesterNumber].push(periodInSemester);\n        });\n\n    // Build the title string\n    const title = Object.keys(semesterPeriods).reduce((acc, semesterKey, index) => {\n      const semesterNumber = Number(semesterKey);\n      const periodsInSemester = semesterPeriods[semesterNumber];\n      let periodTitle = '';\n\n      // Determine if we need singular or plural form for \"period\"\n      const blokLabel = periodsInSemester.length > 1 ? tooltipTranslations.periods : tooltipTranslations.period;\n\n      // Build period sequence for the current semester\n      if (periodsInSemester.length > 1) {\n        const lastPeriod = periodsInSemester.pop();\n        periodTitle = `Semester ${semesterNumber} ${blokLabel} ${periodsInSemester.join(', ')} ${tooltipTranslations.and} ${lastPeriod}`;\n      } else {\n        periodTitle = `Semester ${semesterNumber} ${blokLabel} ${periodsInSemester[0]}`;\n      }\n\n      // Add proper spacing and periods\n      return `${acc}${index > 0 ? '. ' : ''}${periodTitle}`;\n    }, '');\n\n    return title.trim() + '.';\n  };\n\n  const isPeriodActive = (periodIndex: number): boolean => {\n    if (isArrayOfNumbers) {\n      return (periods as number[]).includes(periodIndex);\n    } else {\n      return periods.find((period) => (period as Period).number === periodIndex) ? true : false;\n    }\n  };\n\n  return (\n    <div className={styles['periods__container']} title={tooltipTranslations ? getTitles(tooltipTranslations) : ''}>\n      {maxPeriodsList.map((periodIndex) => {\n        return (\n          <span\n            className={clsx(\n              styles['periods__item'],\n              isPeriodActive(periodIndex) ? styles['periods__item--active'] : ''\n            )}\n            key={`${idPrefix}-${periodIndex}`}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["MAX_PERIODS","Periods","periods","tooltipTranslations","maxPeriods","maxPeriodsList","_","index","idPrefix","useId","isArrayOfNumbers","value","getTitles","semesterPeriods","period","groupKey","mappedValue","semesterNumber","periodInSemester","acc","semesterKey","periodsInSemester","periodTitle","blokLabel","lastPeriod","isPeriodActive","periodIndex","jsx","styles","clsx"],"mappings":";;;;;;;GA4BMA,IAAc,GAGPC,IAAU,CAAC,EAAE,SAAAC,GAAS,qBAAAC,GAAqB,YAAAC,IAAaJ,QAAgC;AACnG,QAAMK,IAAiB,MAAM,KAAK,EAAE,QAAQD,EAAA,GAAc,CAACE,GAAGC,MAAUA,IAAQ,CAAC,GAC3EC,IAAWC,EAAA,GAEXC,IAAmBR,EAAQ,KAAK,CAACS,MAC9B,OAAOA,KAAU,QACzB,GAEKC,IAAY,CAACT,MAAqD;AACtE,UAAMU,IAA4C,CAAA;AAGlD,WAAAH,IACIR,EAAQ,QAAQ,CAACY,MAAW;AAC1B,UAAI,OAAOA,KAAW,UAAU;AAE9B,cAAMC,IAAW,KAAK,KAAKD,IAAS,CAAC,GAE/BE,KAAgBF,IAAS,KAAK,IAAK;AAEzC,QAAKD,EAAgBE,CAAQ,MAC3BF,EAAgBE,CAAQ,IAAI,CAAA,IAE9BF,EAAgBE,CAAQ,EAAE,KAAKC,CAAW;AAAA,MAC5C;AAAA,IACF,CAAC,IACDd,EAAQ,QAAQ,CAACY,MAAW;AAC1B,YAAM,EAAE,gBAAAG,GAAgB,kBAAAC,EAAA,IAAqBJ;AAE7C,MAAKD,EAAgBI,CAAc,MACjCJ,EAAgBI,CAAc,IAAI,CAAA,IAEpCJ,EAAgBI,CAAc,EAAE,KAAKC,CAAgB;AAAA,IACvD,CAAC,GAGS,OAAO,KAAKL,CAAe,EAAE,OAAO,CAACM,GAAKC,GAAab,MAAU;AAC7E,YAAMU,IAAiB,OAAOG,CAAW,GACnCC,IAAoBR,EAAgBI,CAAc;AACxD,UAAIK,IAAc;AAGlB,YAAMC,IAAYF,EAAkB,SAAS,IAAIlB,EAAoB,UAAUA,EAAoB;AAGnG,UAAIkB,EAAkB,SAAS,GAAG;AAChC,cAAMG,IAAaH,EAAkB,IAAA;AACrC,QAAAC,IAAc,YAAYL,CAAc,IAAIM,CAAS,IAAIF,EAAkB,KAAK,IAAI,CAAC,IAAIlB,EAAoB,GAAG,IAAIqB,CAAU;AAAA,MAChI;AACE,QAAAF,IAAc,YAAYL,CAAc,IAAIM,CAAS,IAAIF,EAAkB,CAAC,CAAC;AAI/E,aAAO,GAAGF,CAAG,GAAGZ,IAAQ,IAAI,OAAO,EAAE,GAAGe,CAAW;AAAA,IACrD,GAAG,EAAE,EAEQ,SAAS;AAAA,EACxB,GAEMG,IAAiB,CAACC,MAClBhB,IACMR,EAAqB,SAASwB,CAAW,IAE1C,EAAAxB,EAAQ,KAAK,CAACY,MAAYA,EAAkB,WAAWY,CAAW;AAI7E,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAuB,OAAOzB,IAAsBS,EAAUT,CAAmB,IAAI,IACzG,UAAAE,EAAe,IAAI,CAACqB,MAEjB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE;AAAA,QACTD,EAAO;AAAA,QACPH,EAAeC,CAAW,IAAIE,EAAO,uBAAuB,IAAI;AAAA,MAAA;AAAA,IAClE;AAAA,IACK,GAAGpB,CAAQ,IAAIkB,CAAW;AAAA,EAAA,CAGpC,EAAA,CACH;AAEJ;"}

package/dist/components/ProgrammeCard/ProgrammeCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgrammeCard.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.tsx"],"sourcesContent":["import { useNavigate } from 'react-router';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './ProgrammeCard.module.css';\n\nexport interface ProgrammeCardProps {\n  /** The URL to navigate to when the card is clicked. */\n  href: string;\n  /** The header contents. */\n  header?: ReactNode;\n  /** The programme details. */\n  details?: ReactNode;\n}\n\n/** Represents a component to render a card for a programme. */\nexport const ProgrammeCard = ({ href, header, details }: ProgrammeCardProps) => {\n  const navigate = useNavigate();\n\n  return (\n    <a\n      className={styles['programme-card']}\n      href={href}\n      onClick={(event) => {\n        // lets browser handle new tab\n        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {\n          return;\n        }\n        event.preventDefault();\n        // lets react-router handle SPA-style navigation\n        navigate(href);\n      }}\n    >\n      {header}\n      {details && <hr className={styles['programme-card__divider']} />}\n      {details}\n    </a>\n  );\n};\n"],"names":["ProgrammeCard","href","header","details","navigate","useNavigate","jsxs","styles","event","jsx"],"mappings":";;;;;GAgBaA,IAAgB,CAAC,EAAE,MAAAC,GAAM,QAAAC,GAAQ,SAAAC,QAAkC;AAC9E,QAAMC,IAAWC,EAAA;AAEjB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,gBAAgB;AAAA,MAClC,MAAAN;AAAA,MACA,SAAS,CAACO,MAAU;AAElB,QAAIA,EAAM,WAAWA,EAAM,WAAWA,EAAM,YAAYA,EAAM,UAAUA,EAAM,WAAW,MAGzFA,EAAM,eAAA,GAENJ,EAASH,CAAI;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAAC;AAAA,QACAC,KAAW,gBAAAM,EAAC,MAAA,EAAG,WAAWF,EAAO,yBAAyB,GAAG;AAAA,QAC7DJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"ProgrammeCard.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.tsx"],"sourcesContent":["import { useNavigate } from 'react-router';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './ProgrammeCard.module.css';\n\nexport interface ProgrammeCardProps {\n  /** The URL to navigate to when the card is clicked. */\n  href: string;\n  /** The header contents. */\n  header?: ReactNode;\n  /** The programme details. */\n  details?: ReactNode;\n}\n\n/** Represents a component to render a card for a programme. */\nexport const ProgrammeCard = ({ href, header, details }: ProgrammeCardProps) => {\n  const navigate = useNavigate();\n\n  return (\n    <a\n      className={styles['programme-card']}\n      href={href}\n      onClick={(event) => {\n        // lets browser handle new tab\n        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {\n          return;\n        }\n        event.preventDefault();\n        // lets react-router handle SPA-style navigation\n        navigate(href);\n      }}\n    >\n      {header}\n      {details && <hr className={styles['programme-card__divider']} />}\n      {details}\n    </a>\n  );\n};\n"],"names":["ProgrammeCard","href","header","details","navigate","useNavigate","jsxs","styles","event","jsx"],"mappings":";;;;;GAgBaA,IAAgB,CAAC,EAAE,MAAAC,GAAM,QAAAC,GAAQ,SAAAC,QAAkC;AAC9E,QAAMC,IAAWC,EAAA;AAEjB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,gBAAgB;AAAA,MAClC,MAAAN;AAAA,MACA,SAAS,CAACO,MAAU;AAElB,QAAIA,EAAM,WAAWA,EAAM,WAAWA,EAAM,YAAYA,EAAM,UAAUA,EAAM,WAAW,MAGzFA,EAAM,eAAA,GAENJ,EAASH,CAAI;AAAA,MACf;AAAA,MAEC,UAAA;AAAA,QAAAC;AAAA,QACAC,KAAW,gBAAAM,EAAC,MAAA,EAAG,WAAWF,EAAO,yBAAyB,GAAG;AAAA,QAC7DJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -18,12 +18,12 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
-import "../../TablePlugin-cMMBdz-x.js";
+import "../../TablePlugin-FQQwnq2m.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
 import "react-dom";
-import "../../index-nrPtQ1dv.js";
+import "../../index-yEhaxKq-.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";