@uva-glass/component-library 3.29.0 → 3.30.0

package/dist/components/SelectListbox/SelectListbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\nimport type { SelectOptionProps } from './components/SelectOption';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** The size of the select box. */\n  size?: 'small' | 'medium' | 'default';\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  /** The breakpoint at which to switch to the mobile view. */\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  /** The callback function that is invoked when an option is selected. */\n  onChange?: (option: OptionValue) => void;\n  /** Option to add a devider after a given amout of ouptions in the select option box. */\n  dividerAfter?: number;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n  options,\n  variant,\n  fullWidth = false,\n  size = 'default',\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  dividerAfter,\n  children,\n}: PropsWithChildren<SelectListboxProps>) => {\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          size={size}\n          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {Children.map(children, (child, index) => {\n            if (isValidElement<SelectOptionProps>(child)) {\n              return cloneElement(child, {\n                dividerAfter,\n                key: index,\n              });\n            }\n            return child;\n          })}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","dividerAfter","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","Children","child","index","isValidElement","cloneElement","SelectOption"],"mappings":";;;;;;;;AA4CO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IAEZ,QAAQ;AAAA,IACR,gBAAgBV;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACG,gBAAAkB,EAAAC,GAAA,EAAe,SAAArB,GAAkB,cAAAK,GAChC,4BAACiB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAhB;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKO;AAAA,MAAA;AAAA,IACP;AAAA,IAEA,gBAAAG,EAACI,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAO,EAAS,IAAIb,GAAU,CAACc,GAAOC,MAC1BC,EAAkCF,CAAK,IAClCG,EAAaH,GAAO;AAAA,MACzB,cAAAf;AAAA,MACA,KAAKgB;AAAA,IAAA,CACN,IAEID,CACR,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA3B,EAAc,eAAe+B;"}
+{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\nimport type { SelectOptionProps } from './components/SelectOption';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** The size of the select box. */\n  size?: 'small' | 'medium' | 'default';\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  /** The breakpoint at which to switch to the mobile view. */\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  /** The callback function that is invoked when an option is selected. */\n  onChange?: (option: OptionValue) => void;\n  /** Option to add a devider after a given amout of ouptions in the select option box. */\n  dividerAfter?: number;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n  options,\n  variant,\n  fullWidth = false,\n  size = 'default',\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  dividerAfter,\n  children,\n}: PropsWithChildren<SelectListboxProps>) => {\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          size={size}\n          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {Children.map(children, (child, index) => {\n            if (isValidElement<SelectOptionProps>(child)) {\n              return cloneElement(child, {\n                dividerAfter,\n                key: index,\n              });\n            }\n            return child;\n          })}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","dividerAfter","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","Children","child","index","isValidElement","cloneElement","SelectOption"],"mappings":";;;;;;;;AA4CO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IAEZ,QAAQ;AAAA,IACR,gBAAgBV;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACE,gBAAAkB,EAACC,GAAA,EAAe,SAAArB,GAAkB,cAAAK,GAChC,4BAACiB,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAhB;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGP,gBAAAG,EAACI,GAAA,EAAgB,KAAKV,GAAqB,GAAGI,GAC3C,UAAAO,EAAS,IAAIb,GAAU,CAACc,GAAOC,MAC1BC,EAAkCF,CAAK,IAClCG,EAAaH,GAAO;AAAA,MACzB,cAAAf;AAAA,MACA,KAAKgB;AAAA,IAAA,CACN,IAEID,CACR,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA3B,EAAc,eAAe+B;"}

package/dist/components/SelectListbox/SelectProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAC/B,GAEMC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,GAIEc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EACjB;AAEA,SAAIN,MAAiB,MAAM,CAACE,EAAM,SACfc,EAAAF,EAASd,CAAY,CAAC,GAIvC,gBAAAkB;AAAA,IAACtB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EACH;AAEJ,GAEakB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAWzB,CAAa;AAExC,MAAIwB,MAAY,OAAiB,OAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}
+{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AAC/F,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAC1B,IAAAN,EAAU,CAACO,MAAW,CAACA,CAAM;AAAA,EAAA,GAGzBC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EAAA,GAKfc,IAAmB,CAACd,MAAuB;AAC/C,UAAMe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EAAA;AAGjB,SAAIN,MAAiB,MAAM,CAACE,EAAM,SAChCc,EAAiBF,EAASd,CAAY,CAAC,GAIvC,gBAAAkB;AAAA,IAACtB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MAAA;AAAA,MAGtB,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEakB,IAAY,MAAM;AAC7B,QAAMC,IAAUC,EAAWzB,CAAa;AAExC,MAAIwB,MAAY,OAAW,OAAM,IAAI,MAAM,iDAAiD;AAE5F,SAAOA;AACT;"}

package/dist/components/SelectListbox/components/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const isFirstRender = useRef(true);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    isOpen\n      ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n      : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    isFirstRender.current = false;\n\n    return () => {\n      isFirstRender.current = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (onChange) onChange(selectedValue);\n  }, [onChange, selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AACrF,QAAA,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAU,IAAAP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,CAAC,GAE1GC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,KAAK,IAC/D,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB,MAAM;AAAA,EAAA,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,EAAE,GAELY,EAAU,MAAM;AACV,IAAAlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAK,EAAA,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const isFirstRender = useRef(true);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    isOpen\n      ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n      : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    isFirstRender.current = false;\n\n    return () => {\n      isFirstRender.current = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (onChange) onChange(selectedValue);\n  }, [onChange, selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AAC3F,QAAM,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAA,IAAUP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAA,KAAe,CAAA,GAEzGC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAEH,YADAA,EAAM,eAAA,GACF,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAA,GACNJ,EAAeC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EACJ;AAGF,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,KAAA,IAC1D,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB,MAAA;AAAA,EAAM,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAAA,IAEzB,EAAE,GAELY,EAAU,MAAM;AACd,IAAIlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAA,EAAK,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAA;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

package/dist/components/SelectListbox/components/SelectContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContainer.js","sources":["../../../../src/components/SelectListbox/components/SelectContainer.tsx"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport const SelectContainer = ({ children }: PropsWithChildren) => {\n  const { isOpen, setIsOpen } = useSelect();\n  const listboxRef = useRef<HTMLDivElement>(null);\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !listboxRef.current) return;\n\n      if (!listboxRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\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['select-listbox-container']} ref={listboxRef}>\n      {children}\n    </div>\n  );\n};\n"],"names":["SelectContainer","children","isOpen","setIsOpen","useSelect","listboxRef","useRef","onMouseEventOutside","useCallback","target","useEffect","jsx","styles"],"mappings":";;;;AAOO,MAAMA,IAAkB,CAAC,EAAE,UAAAC,QAAkC;AAClE,QAAM,EAAE,QAAAC,GAAQ,WAAAC,EAAU,IAAIC,EAAU,GAClCC,IAAaC,EAAuB,IAAI,GAExCC,IAAsBC;AAAA,IAC1B,CAAC,EAAE,QAAAC,EAAA,MAAiC;AAClC,MAAI,CAACA,KAAU,CAACJ,EAAW,WAEtBA,EAAW,QAAQ,SAASI,CAAc,KAC7CN,EAAU,EAAK;AAAA,IAEnB;AAAA,IACA,CAACA,CAAS;AAAA,EACZ;AAEA,SAAAO,EAAU,MAAM;AACd,QAAKR;AAEI,sBAAA,iBAAiB,SAASK,GAAqB,EAAI,GACnD,SAAA,iBAAiB,UAAUA,GAAqB,EAAI,GAEtD,MAAM;AACF,iBAAA,oBAAoB,SAASA,GAAqB,EAAI,GACtD,SAAA,oBAAoB,UAAUA,GAAqB,EAAI;AAAA,MAClE;AAAA,EAAA,GACC,CAACA,GAAqBL,CAAM,CAAC,GAG9B,gBAAAS,EAAC,SAAI,WAAWC,EAAO,0BAA0B,GAAG,KAAKP,GACtD,UAAAJ,GACH;AAEJ;"}
+{"version":3,"file":"SelectContainer.js","sources":["../../../../src/components/SelectListbox/components/SelectContainer.tsx"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport const SelectContainer = ({ children }: PropsWithChildren) => {\n  const { isOpen, setIsOpen } = useSelect();\n  const listboxRef = useRef<HTMLDivElement>(null);\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !listboxRef.current) return;\n\n      if (!listboxRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\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['select-listbox-container']} ref={listboxRef}>\n      {children}\n    </div>\n  );\n};\n"],"names":["SelectContainer","children","isOpen","setIsOpen","useSelect","listboxRef","useRef","onMouseEventOutside","useCallback","target","useEffect","jsx","styles"],"mappings":";;;;AAOO,MAAMA,IAAkB,CAAC,EAAE,UAAAC,QAAkC;AAClE,QAAM,EAAE,QAAAC,GAAQ,WAAAC,EAAA,IAAcC,EAAA,GACxBC,IAAaC,EAAuB,IAAI,GAExCC,IAAsBC;AAAA,IAC1B,CAAC,EAAE,QAAAC,EAAA,MAAiC;AAClC,MAAI,CAACA,KAAU,CAACJ,EAAW,WAEtBA,EAAW,QAAQ,SAASI,CAAc,KAC7CN,EAAU,EAAK;AAAA,IACjB;AAAA,IAEF,CAACA,CAAS;AAAA,EAAA;AAGZ,SAAAO,EAAU,MAAM;AACd,QAAKR;AAEL,sBAAS,iBAAiB,SAASK,GAAqB,EAAI,GAC5D,SAAS,iBAAiB,UAAUA,GAAqB,EAAI,GAEtD,MAAM;AACX,iBAAS,oBAAoB,SAASA,GAAqB,EAAI,GAC/D,SAAS,oBAAoB,UAAUA,GAAqB,EAAI;AAAA,MAAA;AAAA,EAClE,GACC,CAACA,GAAqBL,CAAM,CAAC,GAG9B,gBAAAS,EAAC,SAAI,WAAWC,EAAO,0BAA0B,GAAG,KAAKP,GACtD,UAAAJ,GACH;AAEJ;"}

package/dist/components/SelectListbox/components/SelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string | number;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AACtF,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAQ,IAAIC,EAAU,GAEzGC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EACjB,GAEMK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAIjB,MAAUM,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAEtE,GAAA,CAACb,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACV,IAAAT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAIzD,gBAAAa,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGxB,MAAUM;AAAA,UACrD,CAACkB,EAAO,gCAAgC,CAAC,GAAGxB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAClD;AAAA,QACA,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAWtB;AAAA,IACCC,IAAQ,MAAMC,KAAiB,gBAAAqB,EAAA,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAO,CAAA;AAAA,EAAA,GACtG;AAEJ;"}
+{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string | number;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AAC5F,QAAMC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAA,GAE/FC,IAAqB,CAACC,MAAmB;AAC7C,IAAAL,EAAiBE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACFX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAA,GACF,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAA,GACFL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAA,GACNN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EACJ;AAGF,SAAAO,EAAU,MAAM;;AACd,IAAIjB,MAAUM,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EACvE,GACC,CAACb,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACd,IAAIT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAa,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGxB,MAAUM;AAAA,UACrD,CAACkB,EAAO,gCAAgC,CAAC,GAAGxB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAAA;AAAA,QAElD,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAAA;AAAA,IAYrBC,IAAQ,MAAMC,KAAgB,gBAAAqB,EAAC,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAA,CAAO;AAAA,EAAA,GACtG;AAEJ;"}

package/dist/components/SelectListbox/components/SelectOptionBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOptionBox.js","sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  style: CSSProperties;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n  const { style, children } = props;\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  return (\n    <div\n      className={styles['select-listbox__wrapper']}\n      style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n      {...(ref && { ref: ref })}\n    >\n      <ul\n        className={styles['select-listbox']}\n        role=\"listbox\"\n        ref={selectOptionBoxRef}\n        id={listboxId}\n        tabIndex={-1}\n        style={{ maxHeight: style.maxHeight }}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"names":["SelectOptionBox","forwardRef","props","ref","style","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAkBC,EAAiD,CAACC,GAAOC,MAAQ;AACxF,QAAA,EAAE,OAAAC,GAAO,UAAAC,EAAA,IAAaH,GACtB,EAAE,WAAAI,GAAW,QAAAC,EAAO,IAAIC,EAAU,GAClCC,IAAqBC,EAAyB,IAAI;AAGtD,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,yBAAyB;AAAA,MAC3C,OAAO,EAAE,GAAGR,GAAO,YAAYG,IAAS,YAAY,SAAS;AAAA,MAC5D,GAAIJ,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO,gBAAgB;AAAA,UAClC,MAAK;AAAA,UACL,KAAKH;AAAA,UACL,IAAIH;AAAA,UACJ,UAAU;AAAA,UACV,OAAO,EAAE,WAAWF,EAAM,UAAU;AAAA,UAEnC,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"SelectOptionBox.js","sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  style: CSSProperties;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n  const { style, children } = props;\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  return (\n    <div\n      className={styles['select-listbox__wrapper']}\n      style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n      {...(ref && { ref: ref })}\n    >\n      <ul\n        className={styles['select-listbox']}\n        role=\"listbox\"\n        ref={selectOptionBoxRef}\n        id={listboxId}\n        tabIndex={-1}\n        style={{ maxHeight: style.maxHeight }}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"names":["SelectOptionBox","forwardRef","props","ref","style","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAkBC,EAAiD,CAACC,GAAOC,MAAQ;AAC9F,QAAM,EAAE,OAAAC,GAAO,UAAAC,EAAA,IAAaH,GACtB,EAAE,WAAAI,GAAW,QAAAC,EAAA,IAAWC,EAAA,GACxBC,IAAqBC,EAAyB,IAAI;AAExD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,yBAAyB;AAAA,MAC3C,OAAO,EAAE,GAAGR,GAAO,YAAYG,IAAS,YAAY,SAAA;AAAA,MACnD,GAAIJ,KAAO,EAAE,KAAAA,EAAA;AAAA,MAEd,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO,gBAAgB;AAAA,UAClC,MAAK;AAAA,UACL,KAAKH;AAAA,UACL,IAAIH;AAAA,UACJ,UAAU;AAAA,UACV,OAAO,EAAE,WAAWF,EAAM,UAAA;AAAA,UAEzB,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/Sortable/Sortable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.js","sources":["../../../src/components/Sortable/Sortable.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableItemProps } from './components/SortableItem';\n\nimport { SortableItem } from './components/SortableItem';\nimport { SortableProvider } from './SortableProvider';\n\nexport type Index = string | number;\n\nexport interface SortableProps {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The placement of each item Handle (6 dots 2x3). */\n  ItemHandlePlacement?: SortableItemProps['handlePlacement'];\n  /** If true, a scrollable version of the list will be rendered (max height 21rem/336px). */\n  scrollable?: boolean;\n  /** If true, the sorting will be disabled. */\n  disabled?: boolean;\n  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: (string | ReactElement)[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = ({ children, ItemHandlePlacement = 'left', scrollable, disabled, onSort }: SortableProps) => {\n  return (\n    <SortableProvider\n      items={children}\n      scrollable={scrollable}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {children.map((child, index) => (\n        <SortableItem\n          handlePlacement={ItemHandlePlacement}\n          disabled={disabled || Children.count(children) <= 1}\n          index={index}\n          key={`sortable-item-${index}`}\n        >\n          {child}\n        </SortableItem>\n      ))}\n    </SortableProvider>\n  );\n};\n"],"names":["Sortable","children","ItemHandlePlacement","scrollable","disabled","onSort","jsx","SortableProvider","child","index","SortableItem","Children"],"mappings":";;;;AAwBa,MAAAA,IAAW,CAAC,EAAE,UAAAC,GAAU,qBAAAC,IAAsB,QAAQ,YAAAC,GAAY,UAAAC,GAAU,QAAAC,QAErF,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAON;AAAA,IACP,YAAAE;AAAA,IACA,QAAAE;AAAA,IAGC,UAASJ,EAAA,IAAI,CAACO,GAAOC,MACpB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,iBAAiBR;AAAA,QACjB,UAAUE,KAAYO,EAAS,MAAMV,CAAQ,KAAK;AAAA,QAClD,OAAAQ;AAAA,QAGC,UAAAD;AAAA,MAAA;AAAA,MAFI,iBAAiBC,CAAK;AAAA,IAI9B,CAAA;AAAA,EAAA;AAAA,EAXI,0BAA0BE,EAAS,MAAMV,CAAQ,CAAC;AAYzD;"}
+{"version":3,"file":"Sortable.js","sources":["../../../src/components/Sortable/Sortable.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableItemProps } from './components/SortableItem';\n\nimport { SortableItem } from './components/SortableItem';\nimport { SortableProvider } from './SortableProvider';\n\nexport type Index = string | number;\n\nexport interface SortableProps {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The placement of each item Handle (6 dots 2x3). */\n  ItemHandlePlacement?: SortableItemProps['handlePlacement'];\n  /** If true, a scrollable version of the list will be rendered (max height 21rem/336px). */\n  scrollable?: boolean;\n  /** If true, the sorting will be disabled. */\n  disabled?: boolean;\n  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: (string | ReactElement)[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = ({ children, ItemHandlePlacement = 'left', scrollable, disabled, onSort }: SortableProps) => {\n  return (\n    <SortableProvider\n      items={children}\n      scrollable={scrollable}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {children.map((child, index) => (\n        <SortableItem\n          handlePlacement={ItemHandlePlacement}\n          disabled={disabled || Children.count(children) <= 1}\n          index={index}\n          key={`sortable-item-${index}`}\n        >\n          {child}\n        </SortableItem>\n      ))}\n    </SortableProvider>\n  );\n};\n"],"names":["Sortable","children","ItemHandlePlacement","scrollable","disabled","onSort","jsx","SortableProvider","child","index","SortableItem","Children"],"mappings":";;;;AAwBO,MAAMA,IAAW,CAAC,EAAE,UAAAC,GAAU,qBAAAC,IAAsB,QAAQ,YAAAC,GAAY,UAAAC,GAAU,QAAAC,QAErF,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAON;AAAA,IACP,YAAAE;AAAA,IACA,QAAAE;AAAA,IAGC,UAAAJ,EAAS,IAAI,CAACO,GAAOC,MACpB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,iBAAiBR;AAAA,QACjB,UAAUE,KAAYO,EAAS,MAAMV,CAAQ,KAAK;AAAA,QAClD,OAAAQ;AAAA,QAGC,UAAAD;AAAA,MAAA;AAAA,MAFI,iBAAiBC,CAAK;AAAA,IAAA,CAI9B;AAAA,EAAA;AAAA,EAXI,0BAA0BE,EAAS,MAAMV,CAAQ,CAAC;AAAA;"}

package/dist/components/Sortable/Sortable.stories.d.ts

@@ -2,6 +2,6 @@ import { Meta } from '@storybook/react';
 import { SortableProps } from './Sortable';
 declare const _default: Meta<SortableProps>;
 export default _default;
-export declare const SortableExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
-export declare const withHandleRight: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
-export declare const WithComplexChildren: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
+export declare const SortableExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
+export declare const withHandleRight: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;
+export declare const WithComplexChildren: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SortableProps>;

package/dist/components/Sortable/Sortable.stories.js

@@ -1,12 +1,12 @@
 import { jsx as e, jsxs as m, Fragment as i } from "react/jsx-runtime";
-import { fn as s } from "../../index-Dwqes6RH.js";
+import { W as s } from "../../index-Di9WPZUe.js";
 import { Sortable as o } from "./Sortable.js";
 import { InputField as c } from "../InputField/InputField.js";
 import { Icon as d } from "../Icon/Icon.js";
 import { Button as p } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
 import "@react-aria/button";
-const b = "<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {children} </ Sortable>", j = {
+const b = "<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {children} </ Sortable>", W = {
   title: "Organisms/Sortable",
   component: o,
   argTypes: {
@@ -25,29 +25,29 @@ const b = "<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlac
     inspectComponent: o,
     codeString: b
   }
-}, l = {
+}, r = {
   ItemHandlePlacement: "left",
   onSort: s()
-}, r = ["Item-1", "Item-2", "Item-3", "Item-4", "Item-5"], a = (n) => /* @__PURE__ */ e(o, { ...n, children: r }), h = a.bind({});
+}, n = ["Item-1", "Item-2", "Item-3", "Item-4", "Item-5"], a = (l) => /* @__PURE__ */ e(o, { ...l, children: n }), h = a.bind({});
 h.args = {
-  ...l
+  ...r
 };
-const f = a.bind({});
-f.args = {
-  ...l,
+const I = a.bind({});
+I.args = {
+  ...r,
   ItemHandlePlacement: "right"
 };
-const I = (n) => /* @__PURE__ */ e(o, { ...n, children: r.map((t) => /* @__PURE__ */ m(i, { children: [
+const f = (l) => /* @__PURE__ */ e(o, { ...l, children: n.map((t) => /* @__PURE__ */ m(i, { children: [
   /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(c, { id: t, placeholder: t }, t) }),
   /* @__PURE__ */ e(p, { variant: "blank-icon", children: /* @__PURE__ */ e(d, { name: "Trash", color: "#a0002aff" }) })
-] }, t)) }), g = I.bind({});
+] }, t)) }), g = f.bind({});
 g.args = {
-  ...l
+  ...r
 };
 export {
   h as SortableExample,
   g as WithComplexChildren,
-  j as default,
-  f as withHandleRight
+  W as default,
+  I as withHandleRight
 };
 //# sourceMappingURL=Sortable.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sortable.stories.js","sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString =\n  '<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {children} </ Sortable>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/Sortable',\n  component: Sortable,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    ItemHandlePlacement: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Sortable,\n    codeString: codeString,\n  },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n  ItemHandlePlacement: 'left',\n  onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n  ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n  ...defaultArgs,\n  ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n  <Sortable {...args}>\n    {mockItems.map((item) => (\n      <Fragment key={item}>\n        <div style={{ width: '100%' }}>\n          <InputField key={item} id={item} placeholder={item} />\n        </div>\n        <Button variant=\"blank-icon\">\n          <Icon name=\"Trash\" color=\"#a0002aff\" />\n        </Button>\n      </Fragment>\n    ))}\n  </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","Sortable_stories","Sortable","defaultArgs","fn","mockItems","Template","args","SortableExample","withHandleRight","TemplateComplex","jsx","item","jsxs","Fragment","InputField","Button","Icon","WithComplexChildren"],"mappings":";;;;;;;;AAYA,MAAMA,IACJ,oJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,QAAQC,EAAG;AACb,GAEMC,IAAY,CAAC,UAAU,UAAU,UAAU,UAAU,QAAQ,GAE7DC,IAAmC,CAACC,wBAAUL,GAAU,EAAA,GAAGK,GAAO,UAAUF,GAAA,GAErEG,IAAkBF,EAAS,KAAK,CAAE,CAAA;AAC/CE,EAAgB,OAAO;AAAA,EACrB,GAAGL;AACL;AAEO,MAAMM,IAAkBH,EAAS,KAAK,CAAE,CAAA;AAC/CG,EAAgB,OAAO;AAAA,EACrB,GAAGN;AAAA,EACH,qBAAqB;AACvB;AAEA,MAAMO,IAA0C,CAACH,MAC/C,gBAAAI,EAACT,GAAU,EAAA,GAAGK,GACX,UAAAF,EAAU,IAAI,CAACO,MACd,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAH,EAAC,OAAI,EAAA,OAAO,EAAE,OAAO,OAAO,GAC1B,UAAC,gBAAAA,EAAAI,GAAA,EAAsB,IAAIH,GAAM,aAAaA,EAAA,GAA7BA,CAAmC,GACtD;AAAA,EACA,gBAAAD,EAACK,GAAO,EAAA,SAAQ,cACd,UAAA,gBAAAL,EAACM,KAAK,MAAK,SAAQ,OAAM,YAAY,CAAA,EACvC,CAAA;AAAA,KANaL,CAOf,CACD,GACH,GAGWM,IAAsBR,EAAgB,KAAK,CAAE,CAAA;AAC1DQ,EAAoB,OAAO;AAAA,EACzB,GAAGf;AACL;"}
+{"version":3,"file":"Sortable.stories.js","sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString =\n  '<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {children} </ Sortable>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/Sortable',\n  component: Sortable,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    ItemHandlePlacement: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Sortable,\n    codeString: codeString,\n  },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n  ItemHandlePlacement: 'left',\n  onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n  ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n  ...defaultArgs,\n  ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n  <Sortable {...args}>\n    {mockItems.map((item) => (\n      <Fragment key={item}>\n        <div style={{ width: '100%' }}>\n          <InputField key={item} id={item} placeholder={item} />\n        </div>\n        <Button variant=\"blank-icon\">\n          <Icon name=\"Trash\" color=\"#a0002aff\" />\n        </Button>\n      </Fragment>\n    ))}\n  </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","Sortable_stories","Sortable","defaultArgs","fn","mockItems","Template","args","SortableExample","withHandleRight","TemplateComplex","jsx","item","jsxs","Fragment","InputField","Button","Icon","WithComplexChildren"],"mappings":";;;;;;;;AAYA,MAAMA,IACJ,oJAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,QAAQC,EAAA;AACV,GAEMC,IAAY,CAAC,UAAU,UAAU,UAAU,UAAU,QAAQ,GAE7DC,IAAmC,CAACC,wBAAUL,GAAA,EAAU,GAAGK,GAAO,UAAAF,GAAU,GAErEG,IAAkBF,EAAS,KAAK,CAAA,CAAE;AAC/CE,EAAgB,OAAO;AAAA,EACrB,GAAGL;AACL;AAEO,MAAMM,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,GAAGN;AAAA,EACH,qBAAqB;AACvB;AAEA,MAAMO,IAA0C,CAACH,MAC/C,gBAAAI,EAACT,GAAA,EAAU,GAAGK,GACX,UAAAF,EAAU,IAAI,CAACO,MACd,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAH,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,OAAA,GACnB,UAAA,gBAAAA,EAACI,GAAA,EAAsB,IAAIH,GAAM,aAAaA,EAAA,GAA7BA,CAAmC,GACtD;AAAA,EACA,gBAAAD,EAACK,GAAA,EAAO,SAAQ,cACd,UAAA,gBAAAL,EAACM,KAAK,MAAK,SAAQ,OAAM,YAAA,CAAY,EAAA,CACvC;AAAA,KANaL,CAOf,CACD,GACH,GAGWM,IAAsBR,EAAgB,KAAK,CAAA,CAAE;AAC1DQ,EAAoB,OAAO;AAAA,EACzB,GAAGf;AACL;"}

package/dist/components/Sortable/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","sources":["../../../src/components/Sortable/actions.ts"],"sourcesContent":["import {\n  CLEAR_DRAGGING_SOURCE,\n  CLEAR_DRAGGING_TARGET,\n  DRAG_END,\n  DRAG_START,\n  DROP,\n  MOVE_TO_POSITION,\n  RESET,\n  SET_CLONE,\n  SET_DRAGGING_SOURCE,\n  SET_DRAGGING_TARGET,\n} from './constants';\n\ntype ClearDraggingSourceAction = {\n  type: typeof CLEAR_DRAGGING_SOURCE;\n};\n\ntype ClearDraggingTargetAction = {\n  type: typeof CLEAR_DRAGGING_TARGET;\n};\n\ntype DragEndAction = {\n  type: typeof DRAG_END;\n};\n\ntype DragStartAction = {\n  type: typeof DRAG_START;\n  payload: number;\n};\n\ntype DropAction = {\n  type: typeof DROP;\n  payload: number;\n};\n\ntype MoveToPositionAction = {\n  type: typeof MOVE_TO_POSITION;\n  payload: number;\n};\n\ntype ResetAction = {\n  type: typeof RESET;\n};\n\ntype SetCloneAction = {\n  type: typeof SET_CLONE;\n  payload: Element;\n};\n\ntype SetDraggingSourceAction = {\n  type: typeof SET_DRAGGING_SOURCE;\n  payload: number;\n};\n\ntype SetDraggingTargetAction = {\n  type: typeof SET_DRAGGING_TARGET;\n  payload: number;\n};\n\nexport type Actions =\n  | ClearDraggingSourceAction\n  | ClearDraggingTargetAction\n  | DragEndAction\n  | DragStartAction\n  | DropAction\n  | MoveToPositionAction\n  | ResetAction\n  | SetCloneAction\n  | SetDraggingSourceAction\n  | SetDraggingTargetAction;\n\nexport const setClone = (payload: SetCloneAction['payload']): SetCloneAction => ({\n  type: SET_CLONE,\n  payload,\n});\n\nexport const clearDraggingSource = (): ClearDraggingSourceAction => ({ type: CLEAR_DRAGGING_SOURCE });\n\nexport const clearDraggingTarget = (): ClearDraggingTargetAction => ({ type: CLEAR_DRAGGING_TARGET });\n\nexport const dragEnd = (): DragEndAction => ({ type: DRAG_END });\n\nexport const dragStart = (draggingItemIndex: DragStartAction['payload']): DragStartAction => ({\n  type: DRAG_START,\n  payload: draggingItemIndex,\n});\n\nexport const drop = (targetItemIndex: DropAction['payload']): DropAction => ({\n  type: DROP,\n  payload: targetItemIndex,\n});\n\nexport const moveToPosition = (targetItemIndex: MoveToPositionAction['payload']): MoveToPositionAction => ({\n  type: MOVE_TO_POSITION,\n  payload: targetItemIndex,\n});\n\nexport const reset = (): ResetAction => ({ type: RESET });\n\nexport const setDraggingSource = (sourceItemIndex: SetDraggingSourceAction['payload']): SetDraggingSourceAction => ({\n  type: SET_DRAGGING_SOURCE,\n  payload: sourceItemIndex,\n});\n\nexport const setDraggingTarget = (targetItemIndex: SetDraggingTargetAction['payload']): SetDraggingTargetAction => ({\n  type: SET_DRAGGING_TARGET,\n  payload: targetItemIndex,\n});\n"],"names":["setClone","payload","SET_CLONE","clearDraggingSource","CLEAR_DRAGGING_SOURCE","clearDraggingTarget","CLEAR_DRAGGING_TARGET","dragEnd","DRAG_END","dragStart","draggingItemIndex","DRAG_START","drop","targetItemIndex","DROP","moveToPosition","MOVE_TO_POSITION","reset","RESET","setDraggingSource","sourceItemIndex","SET_DRAGGING_SOURCE","setDraggingTarget","SET_DRAGGING_TARGET"],"mappings":";AAuEa,MAAAA,IAAW,CAACC,OAAwD;AAAA,EAC/E,MAAMC;AAAA,EACN,SAAAD;AACF,IAEaE,IAAsB,OAAkC,EAAE,MAAMC,EAAsB,IAEtFC,IAAsB,OAAkC,EAAE,MAAMC,EAAsB,IAEtFC,IAAU,OAAsB,EAAE,MAAMC,EAAS,IAEjDC,IAAY,CAACC,OAAoE;AAAA,EAC5F,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAO,CAACC,OAAwD;AAAA,EAC3E,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAiB,CAACF,OAA4E;AAAA,EACzG,MAAMG;AAAA,EACN,SAASH;AACX,IAEaI,IAAQ,OAAoB,EAAE,MAAMC,EAAM,IAE1CC,IAAoB,CAACC,OAAkF;AAAA,EAClH,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAoB,CAACT,OAAkF;AAAA,EAClH,MAAMU;AAAA,EACN,SAASV;AACX;"}
+{"version":3,"file":"actions.js","sources":["../../../src/components/Sortable/actions.ts"],"sourcesContent":["import {\n  CLEAR_DRAGGING_SOURCE,\n  CLEAR_DRAGGING_TARGET,\n  DRAG_END,\n  DRAG_START,\n  DROP,\n  MOVE_TO_POSITION,\n  RESET,\n  SET_CLONE,\n  SET_DRAGGING_SOURCE,\n  SET_DRAGGING_TARGET,\n} from './constants';\n\ntype ClearDraggingSourceAction = {\n  type: typeof CLEAR_DRAGGING_SOURCE;\n};\n\ntype ClearDraggingTargetAction = {\n  type: typeof CLEAR_DRAGGING_TARGET;\n};\n\ntype DragEndAction = {\n  type: typeof DRAG_END;\n};\n\ntype DragStartAction = {\n  type: typeof DRAG_START;\n  payload: number;\n};\n\ntype DropAction = {\n  type: typeof DROP;\n  payload: number;\n};\n\ntype MoveToPositionAction = {\n  type: typeof MOVE_TO_POSITION;\n  payload: number;\n};\n\ntype ResetAction = {\n  type: typeof RESET;\n};\n\ntype SetCloneAction = {\n  type: typeof SET_CLONE;\n  payload: Element;\n};\n\ntype SetDraggingSourceAction = {\n  type: typeof SET_DRAGGING_SOURCE;\n  payload: number;\n};\n\ntype SetDraggingTargetAction = {\n  type: typeof SET_DRAGGING_TARGET;\n  payload: number;\n};\n\nexport type Actions =\n  | ClearDraggingSourceAction\n  | ClearDraggingTargetAction\n  | DragEndAction\n  | DragStartAction\n  | DropAction\n  | MoveToPositionAction\n  | ResetAction\n  | SetCloneAction\n  | SetDraggingSourceAction\n  | SetDraggingTargetAction;\n\nexport const setClone = (payload: SetCloneAction['payload']): SetCloneAction => ({\n  type: SET_CLONE,\n  payload,\n});\n\nexport const clearDraggingSource = (): ClearDraggingSourceAction => ({ type: CLEAR_DRAGGING_SOURCE });\n\nexport const clearDraggingTarget = (): ClearDraggingTargetAction => ({ type: CLEAR_DRAGGING_TARGET });\n\nexport const dragEnd = (): DragEndAction => ({ type: DRAG_END });\n\nexport const dragStart = (draggingItemIndex: DragStartAction['payload']): DragStartAction => ({\n  type: DRAG_START,\n  payload: draggingItemIndex,\n});\n\nexport const drop = (targetItemIndex: DropAction['payload']): DropAction => ({\n  type: DROP,\n  payload: targetItemIndex,\n});\n\nexport const moveToPosition = (targetItemIndex: MoveToPositionAction['payload']): MoveToPositionAction => ({\n  type: MOVE_TO_POSITION,\n  payload: targetItemIndex,\n});\n\nexport const reset = (): ResetAction => ({ type: RESET });\n\nexport const setDraggingSource = (sourceItemIndex: SetDraggingSourceAction['payload']): SetDraggingSourceAction => ({\n  type: SET_DRAGGING_SOURCE,\n  payload: sourceItemIndex,\n});\n\nexport const setDraggingTarget = (targetItemIndex: SetDraggingTargetAction['payload']): SetDraggingTargetAction => ({\n  type: SET_DRAGGING_TARGET,\n  payload: targetItemIndex,\n});\n"],"names":["setClone","payload","SET_CLONE","clearDraggingSource","CLEAR_DRAGGING_SOURCE","clearDraggingTarget","CLEAR_DRAGGING_TARGET","dragEnd","DRAG_END","dragStart","draggingItemIndex","DRAG_START","drop","targetItemIndex","DROP","moveToPosition","MOVE_TO_POSITION","reset","RESET","setDraggingSource","sourceItemIndex","SET_DRAGGING_SOURCE","setDraggingTarget","SET_DRAGGING_TARGET"],"mappings":";AAuEO,MAAMA,IAAW,CAACC,OAAwD;AAAA,EAC/E,MAAMC;AAAA,EACN,SAAAD;AACF,IAEaE,IAAsB,OAAkC,EAAE,MAAMC,EAAA,IAEhEC,IAAsB,OAAkC,EAAE,MAAMC,EAAA,IAEhEC,IAAU,OAAsB,EAAE,MAAMC,EAAA,IAExCC,IAAY,CAACC,OAAoE;AAAA,EAC5F,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAO,CAACC,OAAwD;AAAA,EAC3E,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAiB,CAACF,OAA4E;AAAA,EACzG,MAAMG;AAAA,EACN,SAASH;AACX,IAEaI,IAAQ,OAAoB,EAAE,MAAMC,EAAA,IAEpCC,IAAoB,CAACC,OAAkF;AAAA,EAClH,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAoB,CAACT,OAAkF;AAAA,EAClH,MAAMU;AAAA,EACN,SAASV;AACX;"}

package/dist/components/Sortable/components/SortableHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","sources":["../../../../src/components/Sortable/components/SortableHandle.tsx"],"sourcesContent":["import { Icon } from 'components/Icon';\nimport styles from 'components/Sortable/Sortable.module.css';\n\nexport interface SortableHandleProps {\n  placement: 'left' | 'right';\n}\n\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\n\nexport function SortableHandle({ placement }: SortableHandleProps) {\n  if (noSupportTouch) return null;\n\n  return (\n    <div className={`${styles['sortable__handle']} ${styles[`sortable__handle--${placement}`]}`}>\n      <Icon name=\"Dots\" />\n    </div>\n  );\n}\n"],"names":["noSupportTouch","SortableHandle","placement","styles","Icon"],"mappings":";;;AAOA,MAAMA,IAAiB,kBAAkB,WAAW,SAAS;AAE7C,SAAAC,EAAe,EAAE,WAAAC,KAAkC;AACjE,SAAIF,IAAuB,yBAGxB,OAAI,EAAA,WAAW,GAAGG,EAAO,gBAAmB,IAAIA,EAAO,qBAAqBD,CAAS,EAAE,CAAC,IACvF,4BAACE,GAAK,EAAA,MAAK,OAAO,CAAA,GACpB;AAEJ;"}
+{"version":3,"file":"SortableHandle.js","sources":["../../../../src/components/Sortable/components/SortableHandle.tsx"],"sourcesContent":["import { Icon } from 'components/Icon';\nimport styles from 'components/Sortable/Sortable.module.css';\n\nexport interface SortableHandleProps {\n  placement: 'left' | 'right';\n}\n\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\n\nexport function SortableHandle({ placement }: SortableHandleProps) {\n  if (noSupportTouch) return null;\n\n  return (\n    <div className={`${styles['sortable__handle']} ${styles[`sortable__handle--${placement}`]}`}>\n      <Icon name=\"Dots\" />\n    </div>\n  );\n}\n"],"names":["noSupportTouch","SortableHandle","placement","styles","Icon"],"mappings":";;;AAOA,MAAMA,IAAiB,kBAAkB,WAAW,SAAS;AAEtD,SAASC,EAAe,EAAE,WAAAC,KAAkC;AACjE,SAAIF,IAAuB,yBAGxB,OAAA,EAAI,WAAW,GAAGG,EAAO,gBAAmB,IAAIA,EAAO,qBAAqBD,CAAS,EAAE,CAAC,IACvF,4BAACE,GAAA,EAAK,MAAK,QAAO,GACpB;AAEJ;"}

package/dist/components/Sortable/components/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\n\nimport { Icon } from 'components/Icon';\nimport { SortableHandle } from 'components/Sortable/components/SortableHandle';\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport interface SortableItemProps {\n  children: ReactNode;\n  handlePlacement: SortableHandleProps['placement'];\n  disabled?: boolean;\n  index: number;\n}\n\nconst ACCESS_KEYS = ['Space', 'ArrowDown', 'ArrowUp'];\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\nconst dragImage = new Image(0, 0);\n\ndragImage.src =\n  // 1px transparent png\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';\n\nexport function SortableItem({ children, handlePlacement, disabled, index }: SortableItemProps) {\n  const {\n    clone,\n    dragEnd,\n    draggingSource,\n    draggingTarget,\n    dragStart,\n    drop,\n    maxIndex,\n    moveToPosition,\n    setClone,\n    setDraggingSource,\n  } = useSortable();\n  const [grabbing, setGrabbing] = useState(false);\n  const [moving, setmoving] = useState(false);\n  const itemRef = useRef<HTMLDivElement>(null);\n  const hasIndex = index !== undefined && index >= 0;\n\n  useEffect(() => {\n    if (!itemRef.current) return;\n    if (globalThis.document.activeElement === itemRef.current) return;\n\n    if (index === draggingTarget && draggingTarget === draggingSource) {\n      // Manually setting focus after an item has been moved with the keyboard; focus is lost after rerender\n      itemRef.current.focus();\n      setmoving(true);\n    } else {\n      setmoving(false);\n    }\n  }, [index, draggingTarget, draggingSource, setDraggingSource]);\n\n  function handleDragStart(event: DragEvent<HTMLDivElement>) {\n    event.stopPropagation();\n\n    event.dataTransfer.effectAllowed = 'move';\n    event.dataTransfer.setDragImage(dragImage, 0, 0);\n\n    if (itemRef.current) {\n      const cloned = itemRef.current.cloneNode(true) as Element;\n\n      cloned.classList.add(styles['sortable__sort-item--ghost']);\n\n      setClone(cloned);\n    }\n\n    if (hasIndex) dragStart(index);\n    setGrabbing(true);\n  }\n\n  function handleDragEnd() {\n    if (grabbing) return;\n\n    if (clone) document.body.removeChild(clone);\n\n    setGrabbing(false);\n    dragEnd();\n  }\n\n  function handleKeyUp(event: ReactKeyboardEvent<HTMLDivElement>) {\n    const { code } = event;\n\n    if (code === 'Tab' && draggingSource !== undefined) {\n      dragEnd();\n      return;\n    }\n\n    if (ACCESS_KEYS.includes(code) === false) return;\n\n    if (!hasIndex) return;\n\n    if (code === 'Space') {\n      if (moving) {\n        setmoving(false);\n        dragEnd();\n      } else {\n        setmoving(true);\n        dragStart(index);\n      }\n\n      return;\n    }\n\n    if (draggingSource === undefined) return;\n\n    const newTarget = code === 'ArrowUp' ? index - 1 : index + 1;\n\n    if (newTarget < 0 || newTarget > maxIndex) return;\n\n    moveToPosition(newTarget);\n  }\n\n  function handleMove(event: MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n\n    if (!hasIndex) return;\n\n    dragStart(index);\n\n    const { direction } = event.currentTarget.dataset;\n    const newTarget = direction === 'up' ? index - 1 : index + 1;\n\n    drop(newTarget);\n  }\n\n  return (\n    <div\n      className={styles['sortable__sort-item']}\n      draggable={!disabled}\n      onDragEnd={handleDragEnd}\n      onDragStart={handleDragStart}\n      onKeyUpCapture={handleKeyUp}\n      ref={itemRef}\n      role=\"presentation\"\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n    >\n      <div\n        className={`${styles['sortable__sort-item__contents']} ${styles[`sortable__sort-item__contents--handle-${handlePlacement}`]}`}\n      >\n        {handlePlacement === 'left' && <SortableHandle placement=\"left\" />}\n        {children}\n        {handlePlacement === 'right' && <SortableHandle placement=\"right\" />}\n      </div>\n\n      <div className={styles['sortable__sort-item__button-container']} data-touch={noSupportTouch}>\n        {!disabled && hasIndex && (\n          <>\n            {hasIndex && (\n              <>\n                {index > 0 && (\n                  <button\n                    className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--up']}`}\n                    data-direction=\"up\"\n                    onClickCapture={handleMove}\n                  >\n                    <div className={styles['sortable__sort-item__handle--icon']}>\n                      <Icon name=\"CheveronDown\" />\n                    </div>\n                    <span className={styles['sortable__visually-hidden']}>Move up</span>\n                  </button>\n                )}\n\n                {index < maxIndex && (\n                  <button\n                    className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--down']}`}\n                    data-direction=\"down\"\n                    onClickCapture={handleMove}\n                  >\n                    <div className={styles['sortable__sort-item__handle--icon']}>\n                      <Icon name=\"CheveronDown\" />\n                    </div>\n                    <span className={styles['sortable__visually-hidden']}>Move down</span>\n                  </button>\n                )}\n              </>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ACCESS_KEYS","noSupportTouch","dragImage","SortableItem","children","handlePlacement","disabled","index","clone","dragEnd","draggingSource","draggingTarget","dragStart","drop","maxIndex","moveToPosition","setClone","setDraggingSource","useSortable","grabbing","setGrabbing","useState","moving","setmoving","itemRef","useRef","hasIndex","useEffect","handleDragStart","event","cloned","styles","handleDragEnd","handleKeyUp","code","newTarget","handleMove","direction","jsxs","jsx","SortableHandle","Fragment","Icon"],"mappings":"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"}
+{"version":3,"file":"SortableItem.js","sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\n\nimport { Icon } from 'components/Icon';\nimport { SortableHandle } from 'components/Sortable/components/SortableHandle';\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport interface SortableItemProps {\n  children: ReactNode;\n  handlePlacement: SortableHandleProps['placement'];\n  disabled?: boolean;\n  index: number;\n}\n\nconst ACCESS_KEYS = ['Space', 'ArrowDown', 'ArrowUp'];\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\nconst dragImage = new Image(0, 0);\n\ndragImage.src =\n  // 1px transparent png\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';\n\nexport function SortableItem({ children, handlePlacement, disabled, index }: SortableItemProps) {\n  const {\n    clone,\n    dragEnd,\n    draggingSource,\n    draggingTarget,\n    dragStart,\n    drop,\n    maxIndex,\n    moveToPosition,\n    setClone,\n    setDraggingSource,\n  } = useSortable();\n  const [grabbing, setGrabbing] = useState(false);\n  const [moving, setmoving] = useState(false);\n  const itemRef = useRef<HTMLDivElement>(null);\n  const hasIndex = index !== undefined && index >= 0;\n\n  useEffect(() => {\n    if (!itemRef.current) return;\n    if (globalThis.document.activeElement === itemRef.current) return;\n\n    if (index === draggingTarget && draggingTarget === draggingSource) {\n      // Manually setting focus after an item has been moved with the keyboard; focus is lost after rerender\n      itemRef.current.focus();\n      setmoving(true);\n    } else {\n      setmoving(false);\n    }\n  }, [index, draggingTarget, draggingSource, setDraggingSource]);\n\n  function handleDragStart(event: DragEvent<HTMLDivElement>) {\n    event.stopPropagation();\n\n    event.dataTransfer.effectAllowed = 'move';\n    event.dataTransfer.setDragImage(dragImage, 0, 0);\n\n    if (itemRef.current) {\n      const cloned = itemRef.current.cloneNode(true) as Element;\n\n      cloned.classList.add(styles['sortable__sort-item--ghost']);\n\n      setClone(cloned);\n    }\n\n    if (hasIndex) dragStart(index);\n    setGrabbing(true);\n  }\n\n  function handleDragEnd() {\n    if (grabbing) return;\n\n    if (clone) document.body.removeChild(clone);\n\n    setGrabbing(false);\n    dragEnd();\n  }\n\n  function handleKeyUp(event: ReactKeyboardEvent<HTMLDivElement>) {\n    const { code } = event;\n\n    if (code === 'Tab' && draggingSource !== undefined) {\n      dragEnd();\n      return;\n    }\n\n    if (ACCESS_KEYS.includes(code) === false) return;\n\n    if (!hasIndex) return;\n\n    if (code === 'Space') {\n      if (moving) {\n        setmoving(false);\n        dragEnd();\n      } else {\n        setmoving(true);\n        dragStart(index);\n      }\n\n      return;\n    }\n\n    if (draggingSource === undefined) return;\n\n    const newTarget = code === 'ArrowUp' ? index - 1 : index + 1;\n\n    if (newTarget < 0 || newTarget > maxIndex) return;\n\n    moveToPosition(newTarget);\n  }\n\n  function handleMove(event: MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n\n    if (!hasIndex) return;\n\n    dragStart(index);\n\n    const { direction } = event.currentTarget.dataset;\n    const newTarget = direction === 'up' ? index - 1 : index + 1;\n\n    drop(newTarget);\n  }\n\n  return (\n    <div\n      className={styles['sortable__sort-item']}\n      draggable={!disabled}\n      onDragEnd={handleDragEnd}\n      onDragStart={handleDragStart}\n      onKeyUpCapture={handleKeyUp}\n      ref={itemRef}\n      role=\"presentation\"\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n    >\n      <div\n        className={`${styles['sortable__sort-item__contents']} ${styles[`sortable__sort-item__contents--handle-${handlePlacement}`]}`}\n      >\n        {handlePlacement === 'left' && <SortableHandle placement=\"left\" />}\n        {children}\n        {handlePlacement === 'right' && <SortableHandle placement=\"right\" />}\n      </div>\n\n      <div className={styles['sortable__sort-item__button-container']} data-touch={noSupportTouch}>\n        {!disabled && hasIndex && (\n          <>\n            {hasIndex && (\n              <>\n                {index > 0 && (\n                  <button\n                    className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--up']}`}\n                    data-direction=\"up\"\n                    onClickCapture={handleMove}\n                  >\n                    <div className={styles['sortable__sort-item__handle--icon']}>\n                      <Icon name=\"CheveronDown\" />\n                    </div>\n                    <span className={styles['sortable__visually-hidden']}>Move up</span>\n                  </button>\n                )}\n\n                {index < maxIndex && (\n                  <button\n                    className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--down']}`}\n                    data-direction=\"down\"\n                    onClickCapture={handleMove}\n                  >\n                    <div className={styles['sortable__sort-item__handle--icon']}>\n                      <Icon name=\"CheveronDown\" />\n                    </div>\n                    <span className={styles['sortable__visually-hidden']}>Move down</span>\n                  </button>\n                )}\n              </>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ACCESS_KEYS","noSupportTouch","dragImage","SortableItem","children","handlePlacement","disabled","index","clone","dragEnd","draggingSource","draggingTarget","dragStart","drop","maxIndex","moveToPosition","setClone","setDraggingSource","useSortable","grabbing","setGrabbing","useState","moving","setmoving","itemRef","useRef","hasIndex","useEffect","handleDragStart","event","cloned","styles","handleDragEnd","handleKeyUp","code","newTarget","handleMove","direction","jsxs","jsx","SortableHandle","Fragment","Icon"],"mappings":"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"}

package/dist/components/Sortable/sortableReducer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sortableReducer.js","sources":["../../../src/components/Sortable/sortableReducer.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Actions } from './actions';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport {\n  CLEAR_DRAGGING_SOURCE,\n  CLEAR_DRAGGING_TARGET,\n  DRAG_END,\n  DRAG_START,\n  DROP,\n  MOVE_TO_POSITION,\n  RESET,\n  SET_CLONE,\n  SET_DRAGGING_SOURCE,\n  SET_DRAGGING_TARGET,\n} from './constants';\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\nexport interface SortableStateType {\n  clone?: Element;\n  draggingSource?: number;\n  draggingTarget?: number;\n  indices: number[];\n  itemsBeforeDrag: SortableItems;\n  maxIndex: number;\n  sortableItems: SortableItems;\n}\n\n// When dragging has started, draggingSource is a number value and not undefined any more\ntype SortableStateWithSource = SortableStateType & {\n  draggingSource: number;\n};\n\nexport const initialState = {\n  clone: undefined,\n  draggingSource: undefined,\n  draggingTarget: undefined,\n  indices: [],\n  itemsBeforeDrag: [],\n  maxIndex: 0,\n  sortableItems: [],\n};\n\nconst getReorderedList = (from: number, to: number, ...arr: SortableItems) =>\n  from === to ? arr : (arr.splice(to, 0, ...arr.splice(from, 1)), arr);\n\nfunction getReorderedListWithPlaceholder(from: number, to: number, ...arr: SortableItems) {\n  arr.splice(from, 1);\n\n  return [...arr.splice(to, 0, <span />), ...arr];\n}\n\nexport const sortableReducer = (state: SortableStateType = initialState, action: Actions): SortableStateType => {\n  const stateWithSource = state as SortableStateWithSource;\n\n  switch (action.type) {\n    case SET_CLONE: {\n      return {\n        ...state,\n        clone: action.payload,\n      };\n    }\n\n    case DRAG_START: {\n      return {\n        ...state,\n        draggingSource: action.payload,\n        itemsBeforeDrag: state.sortableItems,\n      };\n    }\n\n    case DRAG_END: {\n      return {\n        ...state,\n        draggingSource: undefined,\n        draggingTarget: undefined,\n      };\n    }\n\n    case RESET: {\n      return {\n        ...state,\n        draggingTarget: undefined,\n        sortableItems: state.itemsBeforeDrag,\n      };\n    }\n\n    case DROP: {\n      const sortableItems = getReorderedList(stateWithSource.draggingSource, action.payload, ...state.itemsBeforeDrag);\n      const indices = sortableItems.map(({ props }) => props.index);\n\n      return {\n        ...state,\n        clone: undefined,\n        draggingSource: undefined,\n        draggingTarget: undefined,\n        indices,\n        sortableItems,\n      };\n    }\n\n    case SET_DRAGGING_TARGET: {\n      return {\n        ...state,\n        draggingTarget: action.payload,\n        sortableItems: getReorderedListWithPlaceholder(\n          stateWithSource.draggingSource,\n          action.payload,\n          ...state.itemsBeforeDrag\n        ),\n      };\n    }\n\n    case SET_DRAGGING_SOURCE: {\n      return {\n        ...state,\n        draggingSource: action.payload,\n      };\n    }\n\n    case MOVE_TO_POSITION: {\n      return {\n        ...state,\n        draggingTarget: action.payload,\n        draggingSource: action.payload,\n        sortableItems: getReorderedList(stateWithSource.draggingSource, action.payload, ...state.sortableItems),\n      };\n    }\n\n    case CLEAR_DRAGGING_TARGET:\n      return {\n        ...state,\n        draggingTarget: undefined,\n      };\n\n    case CLEAR_DRAGGING_SOURCE:\n      return {\n        ...state,\n        draggingSource: undefined,\n      };\n\n    default:\n      return state;\n  }\n};\n"],"names":["initialState","getReorderedList","from","to","arr","getReorderedListWithPlaceholder","jsx","sortableReducer","state","action","stateWithSource","SET_CLONE","DRAG_START","DRAG_END","RESET","DROP","sortableItems","indices","props","SET_DRAGGING_TARGET","SET_DRAGGING_SOURCE","MOVE_TO_POSITION","CLEAR_DRAGGING_TARGET","CLEAR_DRAGGING_SOURCE"],"mappings":";;AAkCO,MAAMA,IAAe;AAAA,EAC1B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,SAAS,CAAC;AAAA,EACV,iBAAiB,CAAC;AAAA,EAClB,UAAU;AAAA,EACV,eAAe,CAAA;AACjB,GAEMC,IAAmB,CAACC,GAAcC,MAAeC,OACrDF,MAASC,KAAYC,EAAI,OAAOD,GAAI,GAAG,GAAGC,EAAI,OAAOF,GAAM,CAAC,CAAC,GAAGE;AAElE,SAASC,EAAgCH,GAAcC,MAAeC,GAAoB;AACpF,SAAAA,EAAA,OAAOF,GAAM,CAAC,GAEX,CAAC,GAAGE,EAAI,OAAOD,GAAI,GAAG,gBAAAG,EAAC,QAAK,CAAA,CAAA,CAAE,GAAG,GAAGF,CAAG;AAChD;AAEO,MAAMG,IAAkB,CAACC,IAA2BR,GAAcS,MAAuC;AAC9G,QAAMC,IAAkBF;AAExB,UAAQC,EAAO,MAAM;AAAA,IACnB,KAAKE;AACI,aAAA;AAAA,QACL,GAAGH;AAAA,QACH,OAAOC,EAAO;AAAA,MAChB;AAAA,IAGF,KAAKG;AACI,aAAA;AAAA,QACL,GAAGJ;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,iBAAiBD,EAAM;AAAA,MACzB;AAAA,IAGF,KAAKK;AACI,aAAA;AAAA,QACL,GAAGL;AAAA,QACH,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,MAClB;AAAA,IAGF,KAAKM;AACI,aAAA;AAAA,QACL,GAAGN;AAAA,QACH,gBAAgB;AAAA,QAChB,eAAeA,EAAM;AAAA,MACvB;AAAA,IAGF,KAAKO,GAAM;AACH,YAAAC,IAAgBf,EAAiBS,EAAgB,gBAAgBD,EAAO,SAAS,GAAGD,EAAM,eAAe,GACzGS,IAAUD,EAAc,IAAI,CAAC,EAAE,OAAAE,EAAM,MAAMA,EAAM,KAAK;AAErD,aAAA;AAAA,QACL,GAAGV;AAAA,QACH,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,SAAAS;AAAA,QACA,eAAAD;AAAA,MACF;AAAA,IAAA;AAAA,IAGF,KAAKG;AACI,aAAA;AAAA,QACL,GAAGX;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,eAAeJ;AAAA,UACbK,EAAgB;AAAA,UAChBD,EAAO;AAAA,UACP,GAAGD,EAAM;AAAA,QAAA;AAAA,MAEb;AAAA,IAGF,KAAKY;AACI,aAAA;AAAA,QACL,GAAGZ;AAAA,QACH,gBAAgBC,EAAO;AAAA,MACzB;AAAA,IAGF,KAAKY;AACI,aAAA;AAAA,QACL,GAAGb;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,gBAAgBA,EAAO;AAAA,QACvB,eAAeR,EAAiBS,EAAgB,gBAAgBD,EAAO,SAAS,GAAGD,EAAM,aAAa;AAAA,MACxG;AAAA,IAGF,KAAKc;AACI,aAAA;AAAA,QACL,GAAGd;AAAA,QACH,gBAAgB;AAAA,MAClB;AAAA,IAEF,KAAKe;AACI,aAAA;AAAA,QACL,GAAGf;AAAA,QACH,gBAAgB;AAAA,MAClB;AAAA,IAEF;AACS,aAAAA;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"sortableReducer.js","sources":["../../../src/components/Sortable/sortableReducer.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Actions } from './actions';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport {\n  CLEAR_DRAGGING_SOURCE,\n  CLEAR_DRAGGING_TARGET,\n  DRAG_END,\n  DRAG_START,\n  DROP,\n  MOVE_TO_POSITION,\n  RESET,\n  SET_CLONE,\n  SET_DRAGGING_SOURCE,\n  SET_DRAGGING_TARGET,\n} from './constants';\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\nexport interface SortableStateType {\n  clone?: Element;\n  draggingSource?: number;\n  draggingTarget?: number;\n  indices: number[];\n  itemsBeforeDrag: SortableItems;\n  maxIndex: number;\n  sortableItems: SortableItems;\n}\n\n// When dragging has started, draggingSource is a number value and not undefined any more\ntype SortableStateWithSource = SortableStateType & {\n  draggingSource: number;\n};\n\nexport const initialState = {\n  clone: undefined,\n  draggingSource: undefined,\n  draggingTarget: undefined,\n  indices: [],\n  itemsBeforeDrag: [],\n  maxIndex: 0,\n  sortableItems: [],\n};\n\nconst getReorderedList = (from: number, to: number, ...arr: SortableItems) =>\n  from === to ? arr : (arr.splice(to, 0, ...arr.splice(from, 1)), arr);\n\nfunction getReorderedListWithPlaceholder(from: number, to: number, ...arr: SortableItems) {\n  arr.splice(from, 1);\n\n  return [...arr.splice(to, 0, <span />), ...arr];\n}\n\nexport const sortableReducer = (state: SortableStateType = initialState, action: Actions): SortableStateType => {\n  const stateWithSource = state as SortableStateWithSource;\n\n  switch (action.type) {\n    case SET_CLONE: {\n      return {\n        ...state,\n        clone: action.payload,\n      };\n    }\n\n    case DRAG_START: {\n      return {\n        ...state,\n        draggingSource: action.payload,\n        itemsBeforeDrag: state.sortableItems,\n      };\n    }\n\n    case DRAG_END: {\n      return {\n        ...state,\n        draggingSource: undefined,\n        draggingTarget: undefined,\n      };\n    }\n\n    case RESET: {\n      return {\n        ...state,\n        draggingTarget: undefined,\n        sortableItems: state.itemsBeforeDrag,\n      };\n    }\n\n    case DROP: {\n      const sortableItems = getReorderedList(stateWithSource.draggingSource, action.payload, ...state.itemsBeforeDrag);\n      const indices = sortableItems.map(({ props }) => props.index);\n\n      return {\n        ...state,\n        clone: undefined,\n        draggingSource: undefined,\n        draggingTarget: undefined,\n        indices,\n        sortableItems,\n      };\n    }\n\n    case SET_DRAGGING_TARGET: {\n      return {\n        ...state,\n        draggingTarget: action.payload,\n        sortableItems: getReorderedListWithPlaceholder(\n          stateWithSource.draggingSource,\n          action.payload,\n          ...state.itemsBeforeDrag\n        ),\n      };\n    }\n\n    case SET_DRAGGING_SOURCE: {\n      return {\n        ...state,\n        draggingSource: action.payload,\n      };\n    }\n\n    case MOVE_TO_POSITION: {\n      return {\n        ...state,\n        draggingTarget: action.payload,\n        draggingSource: action.payload,\n        sortableItems: getReorderedList(stateWithSource.draggingSource, action.payload, ...state.sortableItems),\n      };\n    }\n\n    case CLEAR_DRAGGING_TARGET:\n      return {\n        ...state,\n        draggingTarget: undefined,\n      };\n\n    case CLEAR_DRAGGING_SOURCE:\n      return {\n        ...state,\n        draggingSource: undefined,\n      };\n\n    default:\n      return state;\n  }\n};\n"],"names":["initialState","getReorderedList","from","to","arr","getReorderedListWithPlaceholder","jsx","sortableReducer","state","action","stateWithSource","SET_CLONE","DRAG_START","DRAG_END","RESET","DROP","sortableItems","indices","props","SET_DRAGGING_TARGET","SET_DRAGGING_SOURCE","MOVE_TO_POSITION","CLEAR_DRAGGING_TARGET","CLEAR_DRAGGING_SOURCE"],"mappings":";;AAkCO,MAAMA,IAAe;AAAA,EAC1B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,SAAS,CAAA;AAAA,EACT,iBAAiB,CAAA;AAAA,EACjB,UAAU;AAAA,EACV,eAAe,CAAA;AACjB,GAEMC,IAAmB,CAACC,GAAcC,MAAeC,OACrDF,MAASC,KAAYC,EAAI,OAAOD,GAAI,GAAG,GAAGC,EAAI,OAAOF,GAAM,CAAC,CAAC,GAAGE;AAElE,SAASC,EAAgCH,GAAcC,MAAeC,GAAoB;AACxF,SAAAA,EAAI,OAAOF,GAAM,CAAC,GAEX,CAAC,GAAGE,EAAI,OAAOD,GAAI,GAAG,gBAAAG,EAAC,QAAA,CAAA,CAAK,CAAE,GAAG,GAAGF,CAAG;AAChD;AAEO,MAAMG,IAAkB,CAACC,IAA2BR,GAAcS,MAAuC;AAC9G,QAAMC,IAAkBF;AAExB,UAAQC,EAAO,MAAA;AAAA,IACb,KAAKE;AACH,aAAO;AAAA,QACL,GAAGH;AAAA,QACH,OAAOC,EAAO;AAAA,MAAA;AAAA,IAIlB,KAAKG;AACH,aAAO;AAAA,QACL,GAAGJ;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,iBAAiBD,EAAM;AAAA,MAAA;AAAA,IAI3B,KAAKK;AACH,aAAO;AAAA,QACL,GAAGL;AAAA,QACH,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,MAAA;AAAA,IAIpB,KAAKM;AACH,aAAO;AAAA,QACL,GAAGN;AAAA,QACH,gBAAgB;AAAA,QAChB,eAAeA,EAAM;AAAA,MAAA;AAAA,IAIzB,KAAKO,GAAM;AACT,YAAMC,IAAgBf,EAAiBS,EAAgB,gBAAgBD,EAAO,SAAS,GAAGD,EAAM,eAAe,GACzGS,IAAUD,EAAc,IAAI,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,KAAK;AAE5D,aAAO;AAAA,QACL,GAAGV;AAAA,QACH,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,SAAAS;AAAA,QACA,eAAAD;AAAA,MAAA;AAAA,IACF;AAAA,IAGF,KAAKG;AACH,aAAO;AAAA,QACL,GAAGX;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,eAAeJ;AAAA,UACbK,EAAgB;AAAA,UAChBD,EAAO;AAAA,UACP,GAAGD,EAAM;AAAA,QAAA;AAAA,MACX;AAAA,IAIJ,KAAKY;AACH,aAAO;AAAA,QACL,GAAGZ;AAAA,QACH,gBAAgBC,EAAO;AAAA,MAAA;AAAA,IAI3B,KAAKY;AACH,aAAO;AAAA,QACL,GAAGb;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,gBAAgBA,EAAO;AAAA,QACvB,eAAeR,EAAiBS,EAAgB,gBAAgBD,EAAO,SAAS,GAAGD,EAAM,aAAa;AAAA,MAAA;AAAA,IAI1G,KAAKc;AACH,aAAO;AAAA,QACL,GAAGd;AAAA,QACH,gBAAgB;AAAA,MAAA;AAAA,IAGpB,KAAKe;AACH,aAAO;AAAA,QACL,GAAGf;AAAA,QACH,gBAAgB;AAAA,MAAA;AAAA,IAGpB;AACE,aAAOA;AAAA,EAAA;AAEb;"}

package/dist/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n  /** The `aria-valuetext` of the spinner. */\n  ariaValueText: string;\n  /** Delay in milliseconds after which the spinner becomes visible. The default is `250`. */\n  showAfterMs?: number;\n}\n\n/** Represents a component to display a spinner. */\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n  const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n  useEffect(() => {\n    if (showAfterMs === 0) {\n      return;\n    }\n    const t = window.setTimeout(() => {\n      setVisible(true);\n    }, showAfterMs);\n\n    return () => {\n      window.clearTimeout(t);\n    };\n  });\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <div className={styles['spinner-container']}>\n      <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n    </div>\n  );\n};\n"],"names":["DEFAULT_DELAY_IN_MS","Spinner","ariaValueText","showAfterMs","visible","setVisible","useState","useEffect","t","styles"],"mappings":";;;;;GAIMA,IAAsB,KAUfC,IAAU,CAAC,EAAE,eAAAC,GAAe,aAAAC,IAAcH,QAAwC;AACvF,QAAA,CAACI,GAASC,CAAU,IAAIC,EAAS,MAAOH,MAAgB,CAAiB;AAe/E,SAbAI,EAAU,MAAM;AACd,QAAIJ,MAAgB;AAClB;AAEI,UAAAK,IAAI,OAAO,WAAW,MAAM;AAChC,MAAAH,EAAW,EAAI;AAAA,OACdF,CAAW;AAEd,WAAO,MAAM;AACX,aAAO,aAAaK,CAAC;AAAA,IACvB;AAAA,EAAA,CACD,GAEIJ,sBAKF,OAAI,EAAA,WAAWK,EAAO,mBAAmB,GACxC,4BAAC,OAAI,EAAA,WAAWA,EAAO,SAAY,MAAK,eAAc,cAAW,WAAU,kBAAgBP,EAAe,CAAA,GAC5G,IANO;AAQX;"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n  /** The `aria-valuetext` of the spinner. */\n  ariaValueText: string;\n  /** Delay in milliseconds after which the spinner becomes visible. The default is `250`. */\n  showAfterMs?: number;\n}\n\n/** Represents a component to display a spinner. */\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n  const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n  useEffect(() => {\n    if (showAfterMs === 0) {\n      return;\n    }\n    const t = window.setTimeout(() => {\n      setVisible(true);\n    }, showAfterMs);\n\n    return () => {\n      window.clearTimeout(t);\n    };\n  });\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <div className={styles['spinner-container']}>\n      <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n    </div>\n  );\n};\n"],"names":["DEFAULT_DELAY_IN_MS","Spinner","ariaValueText","showAfterMs","visible","setVisible","useState","useEffect","t","styles"],"mappings":";;;;;GAIMA,IAAsB,KAUfC,IAAU,CAAC,EAAE,eAAAC,GAAe,aAAAC,IAAcH,QAAwC;AAC7F,QAAM,CAACI,GAASC,CAAU,IAAIC,EAAS,MAAOH,MAAgB,CAAiB;AAe/E,SAbAI,EAAU,MAAM;AACd,QAAIJ,MAAgB;AAClB;AAEF,UAAMK,IAAI,OAAO,WAAW,MAAM;AAChC,MAAAH,EAAW,EAAI;AAAA,IAAA,GACdF,CAAW;AAEd,WAAO,MAAM;AACX,aAAO,aAAaK,CAAC;AAAA,IAAA;AAAA,EACvB,CACD,GAEIJ,sBAKF,OAAA,EAAI,WAAWK,EAAO,mBAAmB,GACxC,4BAAC,OAAA,EAAI,WAAWA,EAAO,SAAY,MAAK,eAAc,cAAW,WAAU,kBAAgBP,GAAe,GAC5G,IANO;AAQX;"}

package/dist/components/Spinner/Spinner.stories.d.ts

@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
 import { SpinnerProps } from './Spinner';
 declare const _default: Meta<SpinnerProps>;
 export default _default;
-export declare const SpinnerExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SpinnerProps>;
+export declare const SpinnerExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SpinnerProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.js","sources":["../../../src/components/Spinner/Spinner.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { SpinnerProps } from './Spinner';\n\nimport { Spinner } from './Spinner';\n\nconst codeString = '<Spinner ariaValueText={ariaValueText} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Spinner',\n  component: Spinner,\n  argTypes: {\n    ariaValueText: {\n      control: 'text',\n    },\n    showAfterMs: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: Spinner,\n    codeString: codeString,\n  },\n} as Meta<SpinnerProps>;\n\nconst Template: StoryFn<SpinnerProps> = (args) => <Spinner {...args} />;\n\nexport const SpinnerExample = Template.bind({});\nSpinnerExample.args = {\n  ariaValueText: 'Example value text',\n  showAfterMs: 250,\n};\n"],"names":["codeString","Spinner_stories","Spinner","Template","args","jsx","SpinnerExample"],"mappings":";;AAKA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAkC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAS,GAAGE,GAAM,GAExDE,IAAiBH,EAAS,KAAK,CAAE,CAAA;AAC9CG,EAAe,OAAO;AAAA,EACpB,eAAe;AAAA,EACf,aAAa;AACf;"}
+{"version":3,"file":"Spinner.stories.js","sources":["../../../src/components/Spinner/Spinner.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { SpinnerProps } from './Spinner';\n\nimport { Spinner } from './Spinner';\n\nconst codeString = '<Spinner ariaValueText={ariaValueText} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Spinner',\n  component: Spinner,\n  argTypes: {\n    ariaValueText: {\n      control: 'text',\n    },\n    showAfterMs: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: Spinner,\n    codeString: codeString,\n  },\n} as Meta<SpinnerProps>;\n\nconst Template: StoryFn<SpinnerProps> = (args) => <Spinner {...args} />;\n\nexport const SpinnerExample = Template.bind({});\nSpinnerExample.args = {\n  ariaValueText: 'Example value text',\n  showAfterMs: 250,\n};\n"],"names":["codeString","Spinner_stories","Spinner","Template","args","jsx","SpinnerExample"],"mappings":";;AAKA,MAAMA,IAAa,6CAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAkC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAS,GAAGE,GAAM,GAExDE,IAAiBH,EAAS,KAAK,CAAA,CAAE;AAC9CG,EAAe,OAAO;AAAA,EACpB,eAAe;AAAA,EACf,aAAa;AACf;"}

package/dist/components/StatusBadge/StatusBadge.stories.d.ts

@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
 import { StatusBadgeProps } from 'components/StatusBadge';
 declare const _default: Meta<StatusBadgeProps>;
 export default _default;
-export declare const StatusBadgeExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, StatusBadgeProps>;
+export declare const StatusBadgeExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, StatusBadgeProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.stories.js","sources":["../../../src/components/StatusBadge/StatusBadge.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusBadgeProps } from 'components/StatusBadge';\n\nimport { StatusBadge } from 'components/StatusBadge';\n\nconst codeString = '<InfoBadge highContrast=[boolean]>{label}</InfoBadge>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/StatusBadge',\n  component: StatusBadge,\n  parameters: {\n    inspectComponent: StatusBadge,\n    codeString: codeString,\n  },\n} as Meta<StatusBadgeProps>;\n\nconst Template: StoryFn<StatusBadgeProps> = (args) => <StatusBadge {...args} />;\n\nconst defaultArgs: StatusBadgeProps = {\n  label: 'This is example badge',\n  highContrast: false,\n};\n\nexport const StatusBadgeExample = Template.bind({});\n\nStatusBadgeExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","StatusBadge_stories","StatusBadge","Template","args","jsx","defaultArgs","StatusBadgeExample"],"mappings":";;AAKA,MAAMA,IAAa,yDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAa,GAAGE,GAAM,GAEvEE,IAAgC;AAAA,EACpC,OAAO;AAAA,EACP,cAAc;AAChB,GAEaC,IAAqBJ,EAAS,KAAK,CAAE,CAAA;AAElDI,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;"}
+{"version":3,"file":"StatusBadge.stories.js","sources":["../../../src/components/StatusBadge/StatusBadge.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusBadgeProps } from 'components/StatusBadge';\n\nimport { StatusBadge } from 'components/StatusBadge';\n\nconst codeString = '<InfoBadge highContrast=[boolean]>{label}</InfoBadge>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/StatusBadge',\n  component: StatusBadge,\n  parameters: {\n    inspectComponent: StatusBadge,\n    codeString: codeString,\n  },\n} as Meta<StatusBadgeProps>;\n\nconst Template: StoryFn<StatusBadgeProps> = (args) => <StatusBadge {...args} />;\n\nconst defaultArgs: StatusBadgeProps = {\n  label: 'This is example badge',\n  highContrast: false,\n};\n\nexport const StatusBadgeExample = Template.bind({});\n\nStatusBadgeExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","StatusBadge_stories","StatusBadge","Template","args","jsx","defaultArgs","StatusBadgeExample"],"mappings":";;AAKA,MAAMA,IAAa,yDAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAa,GAAGE,GAAM,GAEvEE,IAAgC;AAAA,EACpC,OAAO;AAAA,EACP,cAAc;AAChB,GAEaC,IAAqBJ,EAAS,KAAK,CAAA,CAAE;AAElDI,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;"}

package/dist/components/StatusBadge/StatusBadge.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-BqLi4tOb.js";
-import { r as t, s } from "../../react.esm-CsMDid07.js";
+import "../../index-DV47hRzi.js";
+import { r as t, s } from "../../react.esm-CFMwGdo5.js";
 import { StatusBadge as a } from "./StatusBage.js";
 describe("StatusBadge", () => {
   it("should render with message", () => {

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.test.js","sources":["../../../src/components/StatusBadge/StatusBadge.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { StatusBadge } from './StatusBage';\n\ndescribe('StatusBadge', () => {\n  it('should render with message', () => {\n    render(<StatusBadge label=\"Status message\" />);\n    expect(screen.getByText('Status message')).toBeInTheDocument();\n  });\n\n  it('should render with highContract', () => {\n    render(<StatusBadge label=\"Status message\" highContrast={true} />);\n    expect(screen.getByText('Status message')).toHaveClass('statusbadge--high-contrast');\n  });\n});\n"],"names":["render","jsx","StatusBadge","screen"],"mappings":";;;;AAKA,SAAS,eAAe,MAAM;AAC5B,KAAG,8BAA8B,MAAM;AACrC,IAAAA,EAAQ,gBAAAC,EAAAC,GAAA,EAAY,OAAM,iBAAiB,CAAA,CAAE,GAC7C,OAAOC,EAAO,UAAU,gBAAgB,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC9D,GAED,GAAG,mCAAmC,MAAM;AAC1C,IAAAH,oBAAQE,GAAY,EAAA,OAAM,kBAAiB,cAAc,IAAM,CAAE,GACjE,OAAOC,EAAO,UAAU,gBAAgB,CAAC,EAAE,YAAY,4BAA4B;AAAA,EAAA,CACpF;AACH,CAAC;"}
+{"version":3,"file":"StatusBadge.test.js","sources":["../../../src/components/StatusBadge/StatusBadge.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { StatusBadge } from './StatusBage';\n\ndescribe('StatusBadge', () => {\n  it('should render with message', () => {\n    render(<StatusBadge label=\"Status message\" />);\n    expect(screen.getByText('Status message')).toBeInTheDocument();\n  });\n\n  it('should render with highContract', () => {\n    render(<StatusBadge label=\"Status message\" highContrast={true} />);\n    expect(screen.getByText('Status message')).toHaveClass('statusbadge--high-contrast');\n  });\n});\n"],"names":["render","jsx","StatusBadge","screen"],"mappings":";;;;AAKA,SAAS,eAAe,MAAM;AAC5B,KAAG,8BAA8B,MAAM;AACrC,IAAAA,EAAO,gBAAAC,EAACC,GAAA,EAAY,OAAM,iBAAA,CAAiB,CAAE,GAC7C,OAAOC,EAAO,UAAU,gBAAgB,CAAC,EAAE,kBAAA;AAAA,EAAkB,CAC9D,GAED,GAAG,mCAAmC,MAAM;AAC1C,IAAAH,oBAAQE,GAAA,EAAY,OAAM,kBAAiB,cAAc,IAAM,CAAE,GACjE,OAAOC,EAAO,UAAU,gBAAgB,CAAC,EAAE,YAAY,4BAA4B;AAAA,EAAA,CACpF;AACH,CAAC;"}

package/dist/components/StatusBadge/StatusBage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBage.js","sources":["../../../src/components/StatusBadge/StatusBage.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './StatusBadge.module.css';\n\nexport interface StatusBadgeProps {\n  /** Text on the badge */\n  label: string;\n  /** true to render the card with high contrast colors; otherwise, false. The default is false. */\n  highContrast?: boolean;\n}\n\nexport const StatusBadge = ({ label, highContrast = false }: StatusBadgeProps) => {\n  return (\n    <div className={clsx(styles['statusbadge'], [highContrast && styles['statusbadge--high-contrast']])}>{label}</div>\n  );\n};\n"],"names":["StatusBadge","label","highContrast","jsx","clsx","styles"],"mappings":";;;;;GAWaA,IAAc,CAAC,EAAE,OAAAC,GAAO,cAAAC,IAAe,SAE/C,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAKC,EAAO,aAAgB,CAACH,KAAgBG,EAAO,4BAA4B,CAAC,CAAC,GAAI,UAAMJ,GAAA;"}
+{"version":3,"file":"StatusBage.js","sources":["../../../src/components/StatusBadge/StatusBage.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport styles from './StatusBadge.module.css';\n\nexport interface StatusBadgeProps {\n  /** Text on the badge */\n  label: string;\n  /** true to render the card with high contrast colors; otherwise, false. The default is false. */\n  highContrast?: boolean;\n}\n\nexport const StatusBadge = ({ label, highContrast = false }: StatusBadgeProps) => {\n  return (\n    <div className={clsx(styles['statusbadge'], [highContrast && styles['statusbadge--high-contrast']])}>{label}</div>\n  );\n};\n"],"names":["StatusBadge","label","highContrast","jsx","clsx","styles"],"mappings":";;;;;GAWaA,IAAc,CAAC,EAAE,OAAAC,GAAO,cAAAC,IAAe,SAEhD,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAKC,EAAO,aAAgB,CAACH,KAAgBG,EAAO,4BAA4B,CAAC,CAAC,GAAI,UAAAJ,GAAM;"}

package/dist/components/StatusPill/StatusPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusPill.js","sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n  /** The status to convey. */\n  status: 'possible' | 'impossible' | 'new';\n  /** The variant of the pill. */\n  variant?: 'default' | 'bar';\n  /** A description of the status. */\n  label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n  possible: 'CheckCircleFillMini',\n  impossible: 'CrossCircleFillMini',\n};\n\n/** Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n  return (\n    <span\n      className={clsx(\n        styles['status-pill'],\n        styles[`status-pill__${status}`],\n        variant !== 'default' && styles[`status-pill--${variant}`]\n      )}\n    >\n      {status !== 'new' && <Icon name={iconNameMap[status]!} title={status} size={16} />}\n      {label}\n    </span>\n  );\n}\n"],"names":["iconNameMap","StatusPill","status","variant","label","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;GAiBMA,IAA6E;AAAA,EACjF,UAAU;AAAA,EACV,YAAY;AACd;AAGO,SAASC,EAAW,EAAE,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,KAA0B;AAEhF,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,aAAa;AAAA,QACpBA,EAAO,gBAAgBL,CAAM,EAAE;AAAA,QAC/BC,MAAY,aAAaI,EAAO,gBAAgBJ,CAAO,EAAE;AAAA,MAC3D;AAAA,MAEC,UAAA;AAAA,QAAWD,MAAA,SAAU,gBAAAM,EAAAC,GAAA,EAAK,MAAMT,EAAYE,CAAM,GAAI,OAAOA,GAAQ,MAAM,GAAI,CAAA;AAAA,QAC/EE;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"StatusPill.js","sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n  /** The status to convey. */\n  status: 'possible' | 'impossible' | 'new';\n  /** The variant of the pill. */\n  variant?: 'default' | 'bar';\n  /** A description of the status. */\n  label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n  possible: 'CheckCircleFillMini',\n  impossible: 'CrossCircleFillMini',\n};\n\n/** Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n  return (\n    <span\n      className={clsx(\n        styles['status-pill'],\n        styles[`status-pill__${status}`],\n        variant !== 'default' && styles[`status-pill--${variant}`]\n      )}\n    >\n      {status !== 'new' && <Icon name={iconNameMap[status]!} title={status} size={16} />}\n      {label}\n    </span>\n  );\n}\n"],"names":["iconNameMap","StatusPill","status","variant","label","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;GAiBMA,IAA6E;AAAA,EACjF,UAAU;AAAA,EACV,YAAY;AACd;AAGO,SAASC,EAAW,EAAE,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,KAA0B;AAClF,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,aAAa;AAAA,QACpBA,EAAO,gBAAgBL,CAAM,EAAE;AAAA,QAC/BC,MAAY,aAAaI,EAAO,gBAAgBJ,CAAO,EAAE;AAAA,MAAA;AAAA,MAG1D,UAAA;AAAA,QAAAD,MAAW,SAAS,gBAAAM,EAACC,GAAA,EAAK,MAAMT,EAAYE,CAAM,GAAI,OAAOA,GAAQ,MAAM,GAAA,CAAI;AAAA,QAC/EE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/StatusPill/StatusPill.stories.d.ts

@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
 import { StatusPillProps } from './StatusPill';
 declare const _default: Meta<StatusPillProps>;
 export default _default;
-export declare const StatusPillExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, StatusPillProps>;
+export declare const StatusPillExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, StatusPillProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"StatusPill.stories.js","sources":["../../../src/components/StatusPill/StatusPill.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusPillProps } from './StatusPill';\n\nimport { StatusPill } from './StatusPill';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<StatusPill  status={status} label={label} variant={variant}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/StatusPill',\n  component: StatusPill,\n  parameters: {\n    inspectComponent: StatusPill,\n    codeString: codeString,\n  },\n} as Meta<StatusPillProps>;\n\nconst Template: StoryFn<StatusPillProps> = (args) => (\n  <Container>\n    <StatusPill {...args} />\n  </Container>\n);\n\nexport const StatusPillExample = Template.bind({});\nStatusPillExample.args = {\n  status: 'possible',\n  variant: 'default',\n  label: 'Example Status Pill',\n};\n"],"names":["codeString","StatusPill_stories","StatusPill","Template","args","jsx","Container","StatusPillExample"],"mappings":";;;AAOA,MAAMA,IAAa,kEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MAC1C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAY,GAAGE,EAAA,CAAM,EACxB,CAAA,GAGWG,IAAoBJ,EAAS,KAAK,CAAE,CAAA;AACjDI,EAAkB,OAAO;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AACT;"}
+{"version":3,"file":"StatusPill.stories.js","sources":["../../../src/components/StatusPill/StatusPill.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusPillProps } from './StatusPill';\n\nimport { StatusPill } from './StatusPill';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<StatusPill  status={status} label={label} variant={variant}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/StatusPill',\n  component: StatusPill,\n  parameters: {\n    inspectComponent: StatusPill,\n    codeString: codeString,\n  },\n} as Meta<StatusPillProps>;\n\nconst Template: StoryFn<StatusPillProps> = (args) => (\n  <Container>\n    <StatusPill {...args} />\n  </Container>\n);\n\nexport const StatusPillExample = Template.bind({});\nStatusPillExample.args = {\n  status: 'possible',\n  variant: 'default',\n  label: 'Example Status Pill',\n};\n"],"names":["codeString","StatusPill_stories","StatusPill","Template","args","jsx","Container","StatusPillExample"],"mappings":";;;AAOA,MAAMA,IAAa,kEAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MAC1C,gBAAAC,EAACC,KACC,UAAA,gBAAAD,EAACH,GAAA,EAAY,GAAGE,EAAA,CAAM,EAAA,CACxB,GAGWG,IAAoBJ,EAAS,KAAK,CAAA,CAAE;AACjDI,EAAkB,OAAO;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AACT;"}

package/dist/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          {label && <span className={styles['text-area__label']}>{label}</span>}\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;AAgBgB,SAAAA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AAC3F,QAAAC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACFA,EAAA,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEpDG,EAAAH,EAAY,QAAQ,MAAM,MAAM,GAClDJ,EAASI,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACG,gBAAAM,EAAA,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAV,KAASC,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACvC,UAAA;AAAA,MAAAV,uBAAU,QAAK,EAAA,WAAWU,EAAO,kBAAkB,GAAI,UAAMV,GAAA;AAAA,MAC7DC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAc,CAAC,GACjG,UACHI,EAAA,CAAA;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAChB,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          {label && <span className={styles['text-area__label']}>{label}</span>}\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;AAgBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AACjG,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDJ,EAASI,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAC3C;AAGF,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAV,KAASC,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACvC,UAAA;AAAA,MAAAV,uBAAU,QAAA,EAAK,WAAWU,EAAO,kBAAkB,GAAI,UAAAV,GAAM;AAAA,MAC7DC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAA,CAAe,GACjG,UAAAI,EAAA,CACH;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/TextArea/TextArea.stories.d.ts

@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
 import { TextAreaProps } from './TextArea';
 declare const _default: Meta<TextAreaProps>;
 export default _default;
-export declare const TextAreaExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
+export declare const TextAreaExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;

package/dist/components/TextArea/TextArea.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { fn as r } from "../../index-Dwqes6RH.js";
+import { W as r } from "../../index-Di9WPZUe.js";
 import { TextArea as e } from "./TextArea.js";
 const l = `
   <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, p = {

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    maxCharacters: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: TextArea,\n    codeString: codeString,\n  },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,mFAIJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAE,CAAA;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUC,EAAG;AACf;"}
+{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    maxCharacters: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: TextArea,\n    codeString: codeString,\n  },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,mFAInBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,eAAe;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUC,EAAA;AACZ;"}