@uva-glass/component-library 3.55.7 → 3.55.8

package/dist/components/SelectListbox/SelectListbox.d.ts

@@ -33,6 +33,6 @@ export interface SelectListboxProps {
 }
 /** Represents a component to render a select list box. */
 export declare const SelectListbox: {
-    ({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, dividerAfter, notValid, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
-    SelectOption: ({ option, index, dividerAfter, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+    ({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, dividerAfter, notValid, children, }: PropsWithChildren<SelectListboxProps>): import("react").JSX.Element;
+    SelectOption: ({ option, index, dividerAfter, children }: SelectOptionProps) => import("react").JSX.Element;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectListbox.js","names":[],"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' | 'roundedLeft' | 'roundedRight';\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 options in the select option box. */\n  dividerAfter?: number;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\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  notValid = false,\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          notValid={notValid}\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"],"mappings":";;;;;;;;;AA8CA,IAAa,KAAiB,EAC5B,YACA,YACA,eAAY,IACZ,UAAO,WACP,wBACA,kBAAe,IACf,oBACA,aACA,qBAAkB,SAClB,oBACA,aACA,iBACA,cAAW,IACX,kBAC2C;CAC3C,IAAM,CAAC,GAAiB,KAAsB,EAA6B,KAAK,EAC1E,CAAC,GAAkB,KAAuB,EAA6B,KAAK,EAC5E,EAAE,OAAO,MAAkB,EAAsB,GAAiB,GAAkB;EACxF,YAAY;EACZ,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,oBAAoB,IAAsB,UAAU;EACpD,kBAAkB;EAClB;EACD,CAAC;CAEF,OACE,kBAAC,GAAD;EAAyB;EAAuB;YAC9C,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACY;GACO;GACA;GACR;GACH;GACI;GACA;GACV,KAAK;GACL,CAAA,EAEF,kBAAC,GAAD;GAAiB,KAAK;GAAoB,GAAI;aAC3C,EAAS,IAAI,IAAW,GAAO,MAC1B,EAAkC,EAAM,GACnC,EAAa,GAAO;IACzB;IACA,KAAK;IACN,CAAC,GAEG,EACP;GACc,CAAA,CACF,EAAA,CAAA;EACH,CAAA;;AAIrB,EAAc,eAAe"}
+{"version":3,"file":"SelectListbox.js","names":[],"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' | 'roundedLeft' | 'roundedRight';\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 options in the select option box. */\n  dividerAfter?: number;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\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  notValid = false,\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          notValid={notValid}\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"],"mappings":";;;;;;;;;AA8CA,IAAa,KAAiB,EAC5B,YACA,YACA,eAAY,IACZ,UAAO,WACP,wBACA,kBAAe,IACf,oBACA,aACA,qBAAkB,SAClB,oBACA,aACA,iBACA,cAAW,IACX,kBAC2C;CAC3C,IAAM,CAAC,GAAiB,KAAsB,EAA6B,IAAI,GACzE,CAAC,GAAkB,KAAuB,EAA6B,IAAI,GAC3E,EAAE,OAAO,MAAkB,EAAsB,GAAiB,GAAkB;EACxF,YAAY;EACZ,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,oBAAoB,IAAsB,UAAU;EACpD,kBAAkB;EAClB;CACF,CAAC;CAED,OACE,kBAAC,GAAD;EAAyB;EAAuB;YAC9C,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACY;GACO;GACA;GACR;GACH;GACI;GACA;GACV,KAAK;EACN,CAAA,GAED,kBAAC,GAAD;GAAiB,KAAK;GAAoB,GAAI;aAC3C,EAAS,IAAI,IAAW,GAAO,MAC1B,EAAkC,CAAK,IAClC,EAAa,GAAO;IACzB;IACA,KAAK;GACP,CAAC,IAEI,CACR;EACc,CAAA,CACF,EAAA,CAAA;CACH,CAAA;AAEpB;AAEA,EAAc,eAAe"}

package/dist/components/SelectListbox/SelectProvider.d.ts

@@ -23,6 +23,6 @@ interface Props {
     options: OptionValue[];
     defaultValue: SelectValue;
 }
-export declare const SelectProvider: ({ options, defaultValue, children }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectProvider: ({ options, defaultValue, children }: PropsWithChildren<Props>) => import("react").JSX.Element;
 export declare const useSelect: () => SelectListboxContext;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.js","names":[],"sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } 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  isDirty: boolean;\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 [isDirty, setIsDirty] = useState(false);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n    setIsDirty(false);\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, isDefault = false) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n    setIsDirty(!isDefault);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue), true);\n  }\n\n  useEffect(() => {\n    const newLabel = getValue(value.value || defaultValue).label;\n    if (newLabel !== value.label) {\n      setSelectedValue(getValue(value.value || defaultValue));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options, defaultValue]);\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        isDirty,\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"],"mappings":";;;AA0BA,IAAM,IAAgB,EAAoC,EAAE,CAAyB,EAOxE,KAAkB,EAAE,YAAS,iBAAc,kBAAyC;CAC/F,IAAM,CAAC,GAAO,KAAY,EAAsB;EAAE,OAAO;EAAI,OAAO;EAAI,CAAC,EACnE,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAY,EAAe,GAAO,CAAC,EAEnC,UAAsB;EAE1B,AADA,GAAW,MAAW,CAAC,EAAO,EAC9B,EAAW,GAAM;IAGb,KAAY,MAEd,EAAQ,MAAM,MAAW,EAAO,UAAU,EAAM,IAAI;EAClD,OAAO;EACP,OAAO;EACP,eAAe;EAChB,EAIC,KAAoB,GAAoB,IAAY,OAAU;EAKlE,AAHA,EADsB,EAAQ,WAAW,MAAW,EAAO,UAAU,EAAM,MAC5D,CAAc,EAC7B,EAAS,EAAM,EACf,EAAU,GAAM,EAChB,EAAW,CAAC,EAAU;;CAexB,OAZI,MAAiB,MAAM,CAAC,EAAM,SAChC,EAAiB,EAAS,EAAa,EAAE,GAAK,EAGhD,QAAgB;EAEd,AADiB,EAAS,EAAM,SAAS,EAAa,CAAC,UACtC,EAAM,SACrB,EAAiB,EAAS,EAAM,SAAS,EAAa,CAAC;IAGxD,CAAC,GAAS,EAAa,CAAC,EAGzB,kBAAC,EAAc,UAAf;EACE,OAAO;GACL;GACA,eAAe;GACf;GACA;GACA;GACA;GACA;GACA;GACA;GACA,WAAW,EAAU;GACrB;GACD;EAEA;EACsB,CAAA;GAIhB,UAAkB;CAC7B,IAAM,IAAU,EAAW,EAAc;CAEzC,IAAI,MAAY,KAAA,GAAW,MAAU,MAAM,kDAAkD;CAE7F,OAAO"}
+{"version":3,"file":"SelectProvider.js","names":[],"sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } 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  isDirty: boolean;\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 [isDirty, setIsDirty] = useState(false);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n    setIsDirty(false);\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, isDefault = false) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n    setIsDirty(!isDefault);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue), true);\n  }\n\n  useEffect(() => {\n    const newLabel = getValue(value.value || defaultValue).label;\n    if (newLabel !== value.label) {\n      setSelectedValue(getValue(value.value || defaultValue));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options, defaultValue]);\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        isDirty,\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"],"mappings":";;;AA0BA,IAAM,IAAgB,EAAoC,CAAC,CAAyB,GAOvE,KAAkB,EAAE,YAAS,iBAAc,kBAAyC;CAC/F,IAAM,CAAC,GAAO,KAAY,EAAsB;EAAE,OAAO;EAAI,OAAO;CAAG,CAAC,GAClE,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,CAAC,GAAa,KAAkB,EAAS,EAAE,GAC3C,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAY,EAAe,EAAM,CAAC,GAElC,UAAsB;EAE1B,AADA,GAAW,MAAW,CAAC,CAAM,GAC7B,EAAW,EAAK;CAClB,GAEM,KAAY,MAEd,EAAQ,MAAM,MAAW,EAAO,UAAU,CAAK,KAAK;EAClD,OAAO;EACP,OAAO;EACP,eAAe;CACjB,GAIE,KAAoB,GAAoB,IAAY,OAAU;EAKlE,AAHA,EADsB,EAAQ,WAAW,MAAW,EAAO,UAAU,EAAM,KAC5D,CAAa,GAC5B,EAAS,CAAK,GACd,EAAU,EAAK,GACf,EAAW,CAAC,CAAS;CACvB;CAcA,OAZI,MAAiB,MAAM,CAAC,EAAM,SAChC,EAAiB,EAAS,CAAY,GAAG,EAAI,GAG/C,QAAgB;EAEd,AADiB,EAAS,EAAM,SAAS,CAAY,EAAE,UACtC,EAAM,SACrB,EAAiB,EAAS,EAAM,SAAS,CAAY,CAAC;CAG1D,GAAG,CAAC,GAAS,CAAY,CAAC,GAGxB,kBAAC,EAAc,UAAf;EACE,OAAO;GACL;GACA,eAAe;GACf;GACA;GACA;GACA;GACA;GACA;GACA;GACA,WAAW,EAAU;GACrB;EACF;EAEC;CACqB,CAAA;AAE5B,GAEa,UAAkB;CAC7B,IAAM,IAAU,EAAW,CAAa;CAExC,IAAI,MAAY,KAAA,GAAW,MAAU,MAAM,iDAAiD;CAE5F,OAAO;AACT"}

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

@@ -1,7 +1,7 @@
-import { t as e } from "../../../clsx-BD2qMUU1.js";
+import { t as e } from "../../../clsx-BWCAbrjV.js";
 import { Icon as t } from "../../Icon/Icon.js";
 import { useSelect as n } from "../SelectProvider.js";
-import { t as r } from "../../../SelectListbox.module-HaPs1CLD.js";
+import { t as r } from "../../../SelectListbox.module-Df90DNyN.js";
 import { forwardRef as i, useEffect as a, useRef as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/SelectListbox/components/SelectButton.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","names":[],"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' | 'roundedLeft' | 'roundedRight';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n  notValid?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const {\n    variant,\n    size = 'default',\n    onChange,\n    buttonLabelProp = 'label',\n    buttonLabelBold,\n    disabled = false,\n    notValid = false,\n  } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n    useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        if (!isOpen) setIsOpen(true);\n        event.preventDefault();\n        return;\n      }\n    }\n\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    if (isOpen) {\n      (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selectedValue);\n    }\n\n    isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [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          [styles['select-listbox-trigger--not-valid']]: notValid,\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"],"mappings":";;;;;;;AAoBA,IAAa,IAAe,GAAkD,GAAO,MAAQ;CAC3F,IAAM,EACJ,YACA,UAAO,WACP,aACA,qBAAkB,SAClB,oBACA,cAAW,IACX,cAAW,OACT,GACE,IAAgB,EAAwB,KAAK,EAC7C,EAAE,cAAW,WAAQ,kBAAe,kBAAe,cAAW,mBAAgB,YAAS,eAC3F,GAAW,IAAI,EAAE,EAEb,KAAoB,MAA4C;EACpE,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,mBAAmB,EACnC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,mBAAmB,CAAC,WAAW,EAAI,CACjF;GACD,IAAI,MAA6B,IAAI;IAGnC,AAFA,EAAe,EAAyB,EACnC,KAAQ,EAAU,GAAK,EAC5B,EAAM,gBAAgB;IACtB;;;EAIJ,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,IADA,EAAM,gBAAgB,EAClB,CAAC,GAAQ;KACX,EAAU,GAAK;KACf;;IAEF;GACF,KAAK;IACH,AAAI,MACF,EAAM,iBAAiB,EACvB,EAAe,EAAQ,WAAW,MAAW,EAAO,UAAU,GAAe,MAAM,CAAC,EACpF,EAAU,GAAM;IAElB;;;CAoBN,OAhBA,QAAgB;EACd,AAAI,MACD,EAAc,SAAS,SAAS,IAAyB,MAAM;IAEjE,CAAC,EAAO,CAAC,EAEZ,QAAgB;EAKd,AAJI,KACF,EAAS,EAAc,EAGzB,MAAY,EAAc,SAAS,SAAS,IAAyB,OAAO;IAG3E,CAAC,EAAc,CAAC,EAGjB,kBAAC,QAAD;EAAM,KAAK;YACT,kBAAC,UAAD;GACE,WAAW,EAAK,EAAO,2BAA2B,EAAO,2BAA2B,MAAS;KAC1F,EAAO,2BAA2B,OAAa;KAC/C,EAAO,kCAAkC;KACzC,EAAO,uCAAuC;IAChD,CAAC;GACF,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,iBAAc;GACd,cAAY,GAAG,EAAc;GACnB;GACV,iBAAe;GACf,GAAK,KAAO,EAAO,QAAK;aAd1B,CAgBE,kBAAC,QAAD;IAAM,WAAW,EAAO;cACrB,EAAc;IACV,CAAA,EAEP,kBAAC,GAAD;IACE,WAAW,EAAK,EAAO,gCAAgC,GACpD,EAAO,uCAAuC,GAChD,CAAC;IACF,MAAK;IACL,MAAM;IACN,CAAA,CACK;;EACJ,CAAA;EAET"}
+{"version":3,"file":"SelectButton.js","names":[],"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' | 'roundedLeft' | 'roundedRight';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n  notValid?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const {\n    variant,\n    size = 'default',\n    onChange,\n    buttonLabelProp = 'label',\n    buttonLabelBold,\n    disabled = false,\n    notValid = false,\n  } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n    useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        if (!isOpen) setIsOpen(true);\n        event.preventDefault();\n        return;\n      }\n    }\n\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    if (isOpen) {\n      (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selectedValue);\n    }\n\n    isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [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          [styles['select-listbox-trigger--not-valid']]: notValid,\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"],"mappings":";;;;;;;AAoBA,IAAa,IAAe,GAAkD,GAAO,MAAQ;CAC3F,IAAM,EACJ,YACA,UAAO,WACP,aACA,qBAAkB,SAClB,oBACA,cAAW,IACX,cAAW,OACT,GACE,IAAgB,EAAwB,IAAI,GAC5C,EAAE,cAAW,WAAQ,kBAAe,kBAAe,cAAW,mBAAgB,YAAS,eAC3F,EAAU,KAAK,CAAC,GAEZ,KAAoB,MAA4C;EACpE,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,kBAAkB,GAClC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,kBAAkB,EAAE,WAAW,CAAG,CACjF;GACA,IAAI,MAA6B,IAAI;IAGnC,AAFA,EAAe,CAAwB,GAClC,KAAQ,EAAU,EAAI,GAC3B,EAAM,eAAe;IACrB;GACF;EACF;EAEA,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,IADA,EAAM,eAAe,GACjB,CAAC,GAAQ;KACX,EAAU,EAAI;KACd;IACF;IACA;GACF,KAAK;IACH,AAAI,MACF,EAAM,gBAAgB,GACtB,EAAe,EAAQ,WAAW,MAAW,EAAO,UAAU,GAAe,KAAK,CAAC,GACnF,EAAU,EAAK;IAEjB;EACJ;CACF;CAkBA,OAhBA,QAAgB;EACd,AAAI,MACD,EAAc,SAAS,SAAS,IAAyB,KAAK;CAEnE,GAAG,CAAC,CAAM,CAAC,GAEX,QAAgB;EAKd,AAJI,KACF,EAAS,CAAa,GAGxB,MAAY,EAAc,SAAS,SAAS,IAAyB,MAAM;CAG7E,GAAG,CAAC,CAAa,CAAC,GAGhB,kBAAC,QAAD;EAAM,KAAK;YACT,kBAAC,UAAD;GACE,WAAW,EAAK,EAAO,2BAA2B,EAAO,2BAA2B,MAAS;KAC1F,EAAO,2BAA2B,OAAa;KAC/C,EAAO,kCAAkC;KACzC,EAAO,uCAAuC;GACjD,CAAC;GACD,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,iBAAc;GACd,cAAY,GAAG,EAAc;GACnB;GACV,iBAAe;GACf,GAAK,KAAO,EAAO,OAAI;aAdzB,CAgBE,kBAAC,QAAD;IAAM,WAAW,EAAO;cACrB,EAAc;GACX,CAAA,GAEN,kBAAC,GAAD;IACE,WAAW,EAAK,EAAO,gCAAgC,GACpD,EAAO,uCAAuC,EACjD,CAAC;IACD,MAAK;IACL,MAAM;GACP,CAAA,CACK;;CACJ,CAAA;AAEV,CAAC"}

package/dist/components/SelectListbox/components/SelectContainer.d.ts

@@ -1,2 +1,2 @@
 import { PropsWithChildren } from 'react';
-export declare const SelectContainer: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectContainer: ({ children }: PropsWithChildren) => import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { useSelect as e } from "../SelectProvider.js";
-import { t } from "../../../SelectListbox.module-HaPs1CLD.js";
+import { t } from "../../../SelectListbox.module-Df90DNyN.js";
 import { useCallback as n, useEffect as r, useRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/SelectListbox/components/SelectContainer.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"SelectContainer.js","names":[],"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"],"mappings":";;;;;AAOA,IAAa,KAAmB,EAAE,kBAAkC;CAClE,IAAM,EAAE,WAAQ,iBAAc,GAAW,EACnC,IAAa,EAAuB,KAAK,EAEzC,IAAsB,GACzB,EAAE,gBAAiC;EAC9B,CAAC,KAAU,CAAC,EAAW,WAEtB,EAAW,QAAQ,SAAS,EAAe,IAC9C,EAAU,GAAM;IAGpB,CAAC,EAAU,CACZ;CAcD,OAZA,QAAgB;EACT,OAKL,OAHA,SAAS,iBAAiB,SAAS,GAAqB,GAAK,EAC7D,SAAS,iBAAiB,UAAU,GAAqB,GAAK,QAEjD;GAEX,AADA,SAAS,oBAAoB,SAAS,GAAqB,GAAK,EAChE,SAAS,oBAAoB,UAAU,GAAqB,GAAK;;IAElE,CAAC,GAAqB,EAAO,CAAC,EAG/B,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA6B,KAAK;EACtD;EACG,CAAA"}
+{"version":3,"file":"SelectContainer.js","names":[],"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"],"mappings":";;;;;AAOA,IAAa,KAAmB,EAAE,kBAAkC;CAClE,IAAM,EAAE,WAAQ,iBAAc,EAAU,GAClC,IAAa,EAAuB,IAAI,GAExC,IAAsB,GACzB,EAAE,gBAAiC;EAC9B,CAAC,KAAU,CAAC,EAAW,WAEtB,EAAW,QAAQ,SAAS,CAAc,KAC7C,EAAU,EAAK;CAEnB,GACA,CAAC,CAAS,CACZ;CAcA,OAZA,QAAgB;EACT,OAKL,OAHA,SAAS,iBAAiB,SAAS,GAAqB,EAAI,GAC5D,SAAS,iBAAiB,UAAU,GAAqB,EAAI,SAEhD;GAEX,AADA,SAAS,oBAAoB,SAAS,GAAqB,EAAI,GAC/D,SAAS,oBAAoB,UAAU,GAAqB,EAAI;EAClE;CACF,GAAG,CAAC,GAAqB,CAAM,CAAC,GAG9B,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA6B,KAAK;EACtD;CACE,CAAA;AAET"}

package/dist/components/SelectListbox/components/SelectOption.d.ts

@@ -7,4 +7,4 @@ export interface SelectOptionProps {
     dividerAfter?: number;
     children: ReactNode;
 }
-export declare const SelectOption: ({ option, index, dividerAfter, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectOption: ({ option, index, dividerAfter, children }: SelectOptionProps) => import("react").JSX.Element;

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

@@ -1,6 +1,6 @@
-import { t as e } from "../../../clsx-BD2qMUU1.js";
+import { t as e } from "../../../clsx-BWCAbrjV.js";
 import { useSelect as t } from "../SelectProvider.js";
-import { t as n } from "../../../SelectListbox.module-HaPs1CLD.js";
+import { t as n } from "../../../SelectListbox.module-Df90DNyN.js";
 import { useEffect as r, useRef as i } from "react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/SelectListbox/components/SelectOption.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","names":[],"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    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        event.preventDefault();\n        return;\n      }\n    }\n\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"],"mappings":";;;;;;AAiBA,IAAa,KAAgB,EAAE,WAAQ,UAAO,iBAAc,kBAAkC;CAC5F,IAAM,IAAkB,EAAsB,KAAK,EAC7C,EAAE,WAAQ,gBAAa,mBAAgB,kBAAe,qBAAkB,cAAW,eAAY,GAAW,EAE1G,KAAsB,MAAmB;EAE7C,AADA,EAAiB,EAAQ,GAAQ,EACjC,EAAU,GAAM;IAGZ,KAAmB,MAAwC;EAC/D,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,mBAAmB,EACnC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,mBAAmB,CAAC,WAAW,EAAI,CACjF;GACD,IAAI,MAA6B,IAAI;IAEnC,AADA,EAAe,EAAyB,EACxC,EAAM,gBAAgB;IACtB;;;EAIJ,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,AADA,EAAM,gBAAgB,EAClB,KACF,EAAU,GAAM;IAElB;GACF,KAAK;GACL,KAAK;IAEH,IADA,EAAM,gBAAgB,EAClB,CAAC,GACH;IAKF,AAHI,EAAM,QAAQ,eAAe,IAAc,EAAQ,SAAS,KAC9D,EAAe,IAAc,EAAE,EAE7B,EAAM,QAAQ,aAAa,IAAc,KAC3C,EAAe,IAAc,EAAE;IAEjC;GACF,KAAK;IAEH,AADA,EAAM,gBAAgB,EAClB,GAAS,UAAU,IAAc,MAAM,CAAC,EAAQ,GAAa,YAC/D,EAAmB,EAAY;IAEjC;GACF,KAAK;IACH,AAAI,MACF,EAAM,iBAAiB,EACvB,EAAU,GAAM;IAElB;;;CAgBN,OAZA,QAAgB;EACd,AAAI,MAAU,MACZ,IAAS,EAAgB,SAAS,OAAO,GAAG,EAAgB,SAAS,MAAM;IAE5E;EAAC;EAAa;EAAO;EAAO,CAAC,EAEhC,QAAgB;EACd,AAAI,EAAc,UAAU,EAAO,SACjC,EAAe,EAAM;IAEtB;EAAC;EAAO,EAAO;EAAO,EAAc;EAAO;EAAe,CAAC,EAG5D,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,0BAA0B;IAC9C,EAAO,mCAAmC,MAAU;IACpD,EAAO,oCAAoC,IAAQ,MAAM;GAC3D,CAAC;EAEF,GAAK,CAAC,EAAO,YAAY;GACvB,eAAe,EAAiB,EAAO;GACvC,WAAW;GACX,UAAU;GACV,MAAM;GACN,iBAAiB,EAAc,UAAU,EAAO;GACjD;EACD,KAAK;EAEJ;EACE,EAXE,GAAG,EAAO,QAWZ,EACJ,IAAQ,MAAM,KAAgB,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA2B,eAAY;EAAS,CAAA,CACrG,EAAA,CAAA"}
+{"version":3,"file":"SelectOption.js","names":[],"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    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        event.preventDefault();\n        return;\n      }\n    }\n\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"],"mappings":";;;;;;AAiBA,IAAa,KAAgB,EAAE,WAAQ,UAAO,iBAAc,kBAAkC;CAC5F,IAAM,IAAkB,EAAsB,IAAI,GAC5C,EAAE,WAAQ,gBAAa,mBAAgB,kBAAe,qBAAkB,cAAW,eAAY,EAAU,GAEzG,KAAsB,MAAmB;EAE7C,AADA,EAAiB,EAAQ,EAAO,GAChC,EAAU,EAAK;CACjB,GAEM,KAAmB,MAAwC;EAC/D,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,kBAAkB,GAClC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,kBAAkB,EAAE,WAAW,CAAG,CACjF;GACA,IAAI,MAA6B,IAAI;IAEnC,AADA,EAAe,CAAwB,GACvC,EAAM,eAAe;IACrB;GACF;EACF;EAEA,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,AADA,EAAM,eAAe,GACjB,KACF,EAAU,EAAK;IAEjB;GACF,KAAK;GACL,KAAK;IAEH,IADA,EAAM,eAAe,GACjB,CAAC,GACH;IAKF,AAHI,EAAM,QAAQ,eAAe,IAAc,EAAQ,SAAS,KAC9D,EAAe,IAAc,CAAC,GAE5B,EAAM,QAAQ,aAAa,IAAc,KAC3C,EAAe,IAAc,CAAC;IAEhC;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACjB,GAAS,UAAU,IAAc,MAAM,CAAC,EAAQ,GAAa,YAC/D,EAAmB,CAAW;IAEhC;GACF,KAAK;IACH,AAAI,MACF,EAAM,gBAAgB,GACtB,EAAU,EAAK;IAEjB;EACJ;CACF;CAcA,OAZA,QAAgB;EACd,AAAI,MAAU,MACZ,IAAS,EAAgB,SAAS,MAAM,IAAI,EAAgB,SAAS,KAAK;CAE9E,GAAG;EAAC;EAAa;EAAO;CAAM,CAAC,GAE/B,QAAgB;EACd,AAAI,EAAc,UAAU,EAAO,SACjC,EAAe,CAAK;CAExB,GAAG;EAAC;EAAO,EAAO;EAAO,EAAc;EAAO;CAAc,CAAC,GAG3D,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,0BAA0B;IAC9C,EAAO,mCAAmC,MAAU;IACpD,EAAO,oCAAoC,IAAQ,MAAM;EAC5D,CAAC;EAED,GAAK,CAAC,EAAO,YAAY;GACvB,eAAe,EAAiB,CAAM;GACtC,WAAW;GACX,UAAU;GACV,MAAM;GACN,iBAAiB,EAAc,UAAU,EAAO;EAClD;EACA,KAAK;EAEJ;CACC,GAXG,GAAG,EAAO,OAWb,GACH,IAAQ,MAAM,KAAgB,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA2B,eAAY;CAAQ,CAAA,CACrG,EAAA,CAAA;AAEN"}

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

@@ -1,5 +1,5 @@
 import { useSelect as e } from "../SelectProvider.js";
-import { t } from "../../../SelectListbox.module-HaPs1CLD.js";
+import { t } from "../../../SelectListbox.module-Df90DNyN.js";
 import { forwardRef as n, useRef as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/SelectListbox/components/SelectOptionBox.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOptionBox.js","names":[],"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"],"mappings":";;;;;AAYA,IAAa,IAAkB,GAAkD,GAAO,MAAQ;CAC9F,IAAM,EAAE,UAAO,gBAAa,GACtB,EAAE,cAAW,cAAW,GAAW,EACnC,IAAqB,EAAyB,KAAK;CAEzD,OACE,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;GAAE,GAAG;GAAO,YAAY,IAAS,YAAY;GAAU;EAC9D,GAAK,KAAO,EAAO,QAAK;YAExB,kBAAC,MAAD;GACE,WAAW,EAAO;GAClB,MAAK;GACL,KAAK;GACL,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,WAAW,EAAM,WAAW;GAEpC;GACE,CAAA;EACD,CAAA;EAER"}
+{"version":3,"file":"SelectOptionBox.js","names":[],"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"],"mappings":";;;;;AAYA,IAAa,IAAkB,GAAkD,GAAO,MAAQ;CAC9F,IAAM,EAAE,UAAO,gBAAa,GACtB,EAAE,cAAW,cAAW,EAAU,GAClC,IAAqB,EAAyB,IAAI;CAExD,OACE,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;GAAE,GAAG;GAAO,YAAY,IAAS,YAAY;EAAS;EAC7D,GAAK,KAAO,EAAO,OAAI;YAEvB,kBAAC,MAAD;GACE,WAAW,EAAO;GAClB,MAAK;GACL,KAAK;GACL,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,WAAW,EAAM,UAAU;GAEnC;EACC,CAAA;CACD,CAAA;AAET,CAAC"}

package/dist/components/Slider/Slider.d.ts

@@ -11,4 +11,4 @@ export interface SliderProps {
     disabled?: boolean;
     onChange?: (value: number) => void;
 }
-export declare const Slider: ({ min, max, value, step, units, navigationLabels, disabled, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Slider: ({ min, max, value, step, units, navigationLabels, disabled, onChange, }: SliderProps) => import("react").JSX.Element;

package/dist/components/Slider/Slider.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Slider-BlLyrET9.js";
+import { t as e } from "../../Slider-dCmT0VM2.js";
 export { e as Slider };

package/dist/components/Slider/Slider.stories.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../Slider-BlLyrET9.js";
+import { t as e } from "../../Slider-dCmT0VM2.js";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 var i = {
 	title: "Atoms/Slider",

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","names":[],"sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n  '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/Slider',\r\n  component: Slider,\r\n  argTypes: {\r\n    onChange: {\r\n      action: 'Slider value',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: Slider,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n  const handleSliderChange = (value: number) => {\r\n    if (args.onChange) {\r\n      args.onChange(value);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div style={{ width: '150px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} />\r\n      </div>\r\n      <div style={{ width: '300px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={40} />\r\n      </div>\r\n      <div style={{ width: '600px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={60} />\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n  min: 0,\r\n  max: 100,\r\n  step: 5,\r\n  units: '%',\r\n  value: 80,\r\n};\r\n"],"mappings":";;AASA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO,EACL,SAAS,IACV;EACF,EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAwBY,MAtB2B,MAAS;CAC/C,IAAM,KAAsB,MAAkB;EAC5C,AAAI,EAAK,YACP,EAAK,SAAS,EAAM;;CAIxB,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,OAAO,EAAE,OAAO,SAAS;aAC5B,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAsB,CAAA;GAC9C,CAAA;EACN,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;IAAQ;aAC/C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;IAAM,CAAA;GACzD,CAAA;EACN,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;IAAQ;aAC/C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;IAAM,CAAA;GACzD,CAAA;EACL,EAAA,CAAA;GAI+B,KAAK,EAAE,CAAC;AAC9C,EAAc,OAAO;CACnB,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;CACR"}
+{"version":3,"file":"Slider.stories.js","names":[],"sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n  '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/Slider',\r\n  component: Slider,\r\n  argTypes: {\r\n    onChange: {\r\n      action: 'Slider value',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: Slider,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n  const handleSliderChange = (value: number) => {\r\n    if (args.onChange) {\r\n      args.onChange(value);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div style={{ width: '150px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} />\r\n      </div>\r\n      <div style={{ width: '300px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={40} />\r\n      </div>\r\n      <div style={{ width: '600px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={60} />\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n  min: 0,\r\n  max: 100,\r\n  step: 5,\r\n  units: '%',\r\n  value: 80,\r\n};\r\n"],"mappings":";;AASA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO,EACL,SAAS,GACX;CACF,EACF;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAwBa,MAtB2B,MAAS;CAC/C,IAAM,KAAsB,MAAkB;EAC5C,AAAI,EAAK,YACP,EAAK,SAAS,CAAK;CAEvB;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,OAAO,EAAE,OAAO,QAAQ;aAC3B,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;GAAqB,CAAA;EAC9C,CAAA;EACL,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;GAAO;aAC9C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;GAAK,CAAA;EACzD,CAAA;EACL,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;GAAO;aAC9C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;GAAK,CAAA;EACzD,CAAA;CACL,EAAA,CAAA;AAEN,GAEsC,KAAK,CAAC,CAAC;AAC7C,EAAc,OAAO;CACnB,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;AACT"}

package/dist/components/Slider/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Slider-BlLyrET9.js";
+import { t as e } from "../../Slider-dCmT0VM2.js";
 export { e as Slider };

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

@@ -20,4 +20,4 @@ export interface SortableProps<T = unknown> {
     /** The callback function that is invoked when new sorting takes place. */
     onSort?: (items: T[]) => void;
 }
-export declare const Sortable: <T>({ children, childrenData, ItemHandlePlacement, scrollable, disabled, onSort, hideNumbers, sortableItemColor, }: SortableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Sortable: <T>({ children, childrenData, ItemHandlePlacement, scrollable, disabled, onSort, hideNumbers, sortableItemColor, }: SortableProps<T>) => import("react").JSX.Element;

package/dist/components/Sortable/Sortable.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../SortableProvider-8HYiBXJS.js";
+import { t as e } from "../../SortableProvider-DV6gWmq_.js";
 import { SortableItem as t } from "./components/SortableItem.js";
 import { Children as n } from "react";
 import { jsx as r } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"Sortable.js","names":[],"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;\nexport type SortableItemColors = 'grey-200' | 'white';\n\nexport interface SortableProps<T = unknown> {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The data objects that are actually being sorted. */\n  childrenData?: T[];\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  /** Hide the numbers shown next to the sortable elements. */\n  hideNumbers?: boolean;\n  /** Change the color of the SortableItem wrapper. */\n  sortableItemColor?: SortableItemColors;\n  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: T[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = <T,>({\n  children,\n  childrenData,\n  ItemHandlePlacement = 'left',\n  scrollable,\n  disabled,\n  onSort,\n  hideNumbers,\n  sortableItemColor = 'grey-200',\n}: SortableProps<T>) => {\n  const sortableData: T[] = childrenData ?? (children as unknown as T[]);\n\n  const wrappedItems = children.map((child, index) => (\n    <SortableItem\n      handlePlacement={ItemHandlePlacement}\n      disabled={disabled || Children.count(children) <= 1}\n      sortableItemColor={sortableItemColor}\n      index={index}\n      key={`sortable-item-${index}`}\n    >\n      {child}\n    </SortableItem>\n  ));\n\n  return (\n    <SortableProvider\n      renderItems={wrappedItems}\n      dataItems={sortableData}\n      scrollable={scrollable}\n      hideNumbers={hideNumbers}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {wrappedItems}\n    </SortableProvider>\n  );\n};\n"],"mappings":";;;;;AA+BA,IAAa,KAAgB,EAC3B,aACA,iBACA,yBAAsB,QACtB,eACA,aACA,WACA,gBACA,uBAAoB,iBACE;CACtB,IAAM,IAAoB,KAAiB,GAErC,IAAe,EAAS,KAAK,GAAO,MACxC,kBAAC,GAAD;EACE,iBAAiB;EACjB,UAAU,KAAY,EAAS,MAAM,EAAS,IAAI;EAC/B;EACZ;YAGN;EACY,EAHR,iBAAiB,IAGT,CACf;CAEF,OACE,kBAAC,GAAD;EACE,aAAa;EACb,WAAW;EACC;EACC;EACL;YAGP;EACgB,EAHZ,0BAA0B,EAAS,MAAM,EAAS,GAGtC"}
+{"version":3,"file":"Sortable.js","names":[],"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;\nexport type SortableItemColors = 'grey-200' | 'white';\n\nexport interface SortableProps<T = unknown> {\n  /** The elements to show inside the Sortable. */\n  children: ReactElement[] | string[];\n  /** The data objects that are actually being sorted. */\n  childrenData?: T[];\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  /** Hide the numbers shown next to the sortable elements. */\n  hideNumbers?: boolean;\n  /** Change the color of the SortableItem wrapper. */\n  sortableItemColor?: SortableItemColors;\n  /** The callback function that is invoked when new sorting takes place. */\n  onSort?: (items: T[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = <T,>({\n  children,\n  childrenData,\n  ItemHandlePlacement = 'left',\n  scrollable,\n  disabled,\n  onSort,\n  hideNumbers,\n  sortableItemColor = 'grey-200',\n}: SortableProps<T>) => {\n  const sortableData: T[] = childrenData ?? (children as unknown as T[]);\n\n  const wrappedItems = children.map((child, index) => (\n    <SortableItem\n      handlePlacement={ItemHandlePlacement}\n      disabled={disabled || Children.count(children) <= 1}\n      sortableItemColor={sortableItemColor}\n      index={index}\n      key={`sortable-item-${index}`}\n    >\n      {child}\n    </SortableItem>\n  ));\n\n  return (\n    <SortableProvider\n      renderItems={wrappedItems}\n      dataItems={sortableData}\n      scrollable={scrollable}\n      hideNumbers={hideNumbers}\n      onSort={onSort}\n      key={`sortable-with-children-${Children.count(children)}`}\n    >\n      {wrappedItems}\n    </SortableProvider>\n  );\n};\n"],"mappings":";;;;;AA+BA,IAAa,KAAgB,EAC3B,aACA,iBACA,yBAAsB,QACtB,eACA,aACA,WACA,gBACA,uBAAoB,iBACE;CACtB,IAAM,IAAoB,KAAiB,GAErC,IAAe,EAAS,KAAK,GAAO,MACxC,kBAAC,GAAD;EACE,iBAAiB;EACjB,UAAU,KAAY,EAAS,MAAM,CAAQ,KAAK;EAC/B;EACZ;YAGN;CACW,GAHP,iBAAiB,GAGV,CACf;CAED,OACE,kBAAC,GAAD;EACE,aAAa;EACb,WAAW;EACC;EACC;EACL;YAGP;CACe,GAHX,0BAA0B,EAAS,MAAM,CAAQ,GAGtC;AAEtB"}

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

@@ -1,7 +1,7 @@
-import { r as e } from "../../test-Pa9Lwbsq.js";
+import { r as e } from "../../test-CpW02epT.js";
 import { Icon as t } from "../Icon/Icon.js";
 import { Button as n } from "../Buttons/Button.js";
-import { t as r } from "../../InputField-BWAy19w9.js";
+import { t as r } from "../../InputField-T01uazlI.js";
 import { Sortable as i } from "./Sortable.js";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 var c = {

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

@@ -1 +1 @@
-{"version":3,"file":"Sortable.stories.js","names":[],"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 = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} \n    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { 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  childrenData: [\n    { title: 'item-1', value: 1 },\n    { title: 'item-2', value: 2 },\n    { title: 'item-3', value: 3 },\n    { title: 'item-4', value: 4 },\n    { title: 'item-5', value: 5 },\n  ],\n};\n"],"mappings":";;;;;;AAgBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,qBAAqB,EACnB,OAAO,EACL,SAAS,IACV,EACF;EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAEK,IAAsC;CAC1C,qBAAqB;CACrB,QAAQ,GAAI;CACb,EAEK,IAAY;CAAC;CAAU;CAAU;CAAU;CAAU;CAAS,EAE9D,KAAoC,MAAS,kBAAC,GAAD;CAAU,GAAI;WAAO;CAAqB,CAAA,EAEhF,IAAkB,EAAS,KAAK,EAAE,CAAC;AAChD,EAAgB,OAAO,EACrB,GAAG,GACJ;AAED,IAAa,IAAkB,EAAS,KAAK,EAAE,CAAC;AAChD,EAAgB,OAAO;CACrB,GAAG;CACH,qBAAqB;CACtB;AAiBD,IAAa,MAfoC,MAC/C,kBAAC,GAAD;CAAU,GAAI;WACX,EAAU,KAAK,MACd,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,OAAO,EAAE,OAAO,QAAQ;YAC3B,kBAAC,GAAD;GAAuB,IAAI;GAAM,aAAa;GAAQ,EAArC,EAAqC;EAClD,CAAA,EACN,kBAAC,GAAD;EAAQ,SAAQ;YACd,kBAAC,GAAD;GAAM,MAAK;GAAQ,OAAM;GAAc,CAAA;EAChC,CAAA,CACA,EAAA,EAPI,EAOJ,CACX;CACO,CAAA,EAGsC,KAAK,EAAE,CAAC;AAC3D,EAAoB,OAAO;CACzB,GAAG;CACH,cAAc;EACZ;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC9B;CACF"}
+{"version":3,"file":"Sortable.stories.js","names":[],"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 = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} \n    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { 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  childrenData: [\n    { title: 'item-1', value: 1 },\n    { title: 'item-2', value: 2 },\n    { title: 'item-3', value: 3 },\n    { title: 'item-4', value: 4 },\n    { title: 'item-5', value: 5 },\n  ],\n};\n"],"mappings":";;;;;;AAgBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,UAAU,EACR,OAAO,EACL,SAAS,GACX,EACF;EACA,qBAAqB,EACnB,OAAO,EACL,SAAS,GACX,EACF;CACF;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAEM,IAAsC;CAC1C,qBAAqB;CACrB,QAAQ,EAAG;AACb,GAEM,IAAY;CAAC;CAAU;CAAU;CAAU;CAAU;AAAQ,GAE7D,KAAoC,MAAS,kBAAC,GAAD;CAAU,GAAI;WAAO;AAAoB,CAAA,GAE/E,IAAkB,EAAS,KAAK,CAAC,CAAC;AAC/C,EAAgB,OAAO,EACrB,GAAG,EACL;AAEA,IAAa,IAAkB,EAAS,KAAK,CAAC,CAAC;AAC/C,EAAgB,OAAO;CACrB,GAAG;CACH,qBAAqB;AACvB;AAiBA,IAAa,MAfoC,MAC/C,kBAAC,GAAD;CAAU,GAAI;WACX,EAAU,KAAK,MACd,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,OAAO,EAAE,OAAO,OAAO;YAC1B,kBAAC,GAAD;GAAuB,IAAI;GAAM,aAAa;EAAO,GAApC,CAAoC;CAClD,CAAA,GACL,kBAAC,GAAD;EAAQ,SAAQ;YACd,kBAAC,GAAD;GAAM,MAAK;GAAQ,OAAM;EAAa,CAAA;CAChC,CAAA,CACA,EAAA,GAPK,CAOL,CACX;AACO,CAAA,GAGuC,KAAK,CAAC,CAAC;AAC1D,EAAoB,OAAO;CACzB,GAAG;CACH,cAAc;EACZ;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;CAC9B;AACF"}

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

@@ -22,6 +22,6 @@ interface Props<T = unknown> {
     onSort?: (items: T[]) => void;
     children?: ReactNode;
 }
-export declare function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>): import("react").JSX.Element;
 export declare function useSortable(): SortableContextType & SortableStateType;
 export {};

package/dist/components/Sortable/SortableProvider.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../SortableProvider-8HYiBXJS.js";
+import { n as e, t } from "../../SortableProvider-DV6gWmq_.js";
 export { t as SortableProvider, e as useSortable };

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

@@ -1 +1 @@
-{"version":3,"file":"actions.js","names":[],"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"],"mappings":";;AAuEA,IAAa,KAAY,OAAwD;CAC/E,MAAM;CACN;CACD,GAEY,WAAwD,EAAE,MAAM,GAAuB,GAEvF,WAAwD,EAAE,MAAM,GAAuB,GAEvF,WAAgC,EAAE,MAAM,GAAU,GAElD,KAAa,OAAoE;CAC5F,MAAM;CACN,SAAS;CACV,GAEY,KAAQ,OAAwD;CAC3E,MAAM;CACN,SAAS;CACV,GAEY,KAAkB,OAA4E;CACzG,MAAM;CACN,SAAS;CACV,GAEY,WAA4B,EAAE,MAAM,GAAO,GAE3C,KAAqB,OAAkF;CAClH,MAAM;CACN,SAAS;CACV,GAEY,KAAqB,OAAkF;CAClH,MAAM;CACN,SAAS;CACV"}
+{"version":3,"file":"actions.js","names":[],"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"],"mappings":";;AAuEA,IAAa,KAAY,OAAwD;CAC/E,MAAM;CACN;AACF,IAEa,WAAwD,EAAE,MAAM,EAAsB,IAEtF,WAAwD,EAAE,MAAM,EAAsB,IAEtF,WAAgC,EAAE,MAAM,EAAS,IAEjD,KAAa,OAAoE;CAC5F,MAAM;CACN,SAAS;AACX,IAEa,KAAQ,OAAwD;CAC3E,MAAM;CACN,SAAS;AACX,IAEa,KAAkB,OAA4E;CACzG,MAAM;CACN,SAAS;AACX,IAEa,WAA4B,EAAE,MAAM,EAAM,IAE1C,KAAqB,OAAkF;CAClH,MAAM;CACN,SAAS;AACX,IAEa,KAAqB,OAAkF;CAClH,MAAM;CACN,SAAS;AACX"}

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

@@ -4,5 +4,5 @@ interface SortableContainerProps {
     hideNumbers?: boolean;
     onSort?: OnSort;
 }
-export declare function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps): import("react").JSX.Element;
 export {};

package/dist/components/Sortable/components/SortableContainer.js

@@ -1,2 +1,2 @@
-import { r as e } from "../../../SortableProvider-8HYiBXJS.js";
+import { r as e } from "../../../SortableProvider-DV6gWmq_.js";
 export { e as SortableContainer };

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

@@ -1,4 +1,4 @@
 export interface SortableHandleProps {
     placement: 'left' | 'right';
 }
-export declare function SortableHandle({ placement }: SortableHandleProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SortableHandle({ placement }: SortableHandleProps): import("react").JSX.Element | null;

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

@@ -1,5 +1,5 @@
 import { Icon as e } from "../../Icon/Icon.js";
-import { t } from "../../../Sortable.module-8SoaHfuE.js";
+import { t } from "../../../Sortable.module-CgDMpWM8.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/Sortable/components/SortableHandle.tsx
 var r = "ontouchstart" in globalThis.document.documentElement;

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

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","names":[],"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"],"mappings":";;;;AAOA,IAAM,IAAiB,kBAAkB,WAAW,SAAS;AAE7D,SAAgB,EAAe,EAAE,gBAAkC;CAGjE,OAFI,IAAuB,OAGzB,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAO,iBAAoB,GAAG,EAAO,qBAAqB;YAC3E,kBAAC,GAAD,EAAM,MAAK,QAAS,CAAA;EAChB,CAAA"}
+{"version":3,"file":"SortableHandle.js","names":[],"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"],"mappings":";;;;AAOA,IAAM,IAAiB,kBAAkB,WAAW,SAAS;AAE7D,SAAgB,EAAe,EAAE,gBAAkC;CAGjE,OAFI,IAAuB,OAGzB,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAO,iBAAoB,GAAG,EAAO,qBAAqB;YAC3E,kBAAC,GAAD,EAAM,MAAK,OAAQ,CAAA;CAChB,CAAA;AAET"}

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

@@ -8,4 +8,4 @@ export interface SortableItemProps {
     sortableItemColor: SortableItemColors;
     index: number;
 }
-export declare function SortableItem({ children, handlePlacement, disabled, sortableItemColor, index }: SortableItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableItem({ children, handlePlacement, disabled, sortableItemColor, index }: SortableItemProps): import("react").JSX.Element;

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

@@ -1,8 +1,8 @@
-import { t as e } from "../../../clsx-BD2qMUU1.js";
+import { t as e } from "../../../clsx-BWCAbrjV.js";
 import { Icon as t } from "../../Icon/Icon.js";
-import { t as n } from "../../../Sortable.module-8SoaHfuE.js";
+import { t as n } from "../../../Sortable.module-CgDMpWM8.js";
 import { SortableHandle as r } from "./SortableHandle.js";
-import { n as i } from "../../../SortableProvider-8HYiBXJS.js";
+import { n as i } from "../../../SortableProvider-DV6gWmq_.js";
 import { useEffect as a, useRef as o, useState as s } from "react";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/Sortable/components/SortableItem.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\nimport type { SortableItemColors } from 'components/Sortable/Sortable';\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  sortableItemColor: SortableItemColors;\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, sortableItemColor, 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={clsx(styles['sortable__sort-item'], styles[`sortable__sort-item--${sortableItemColor}`])}\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"],"mappings":";;;;;;;;AAoBA,IAAM,IAAc;CAAC;CAAS;CAAa;CAAU,EAC/C,IAAiB,kBAAkB,WAAW,SAAS,iBACvD,IAAY,IAAI,MAAM,GAAG,EAAE;AAEjC,EAAU,MAER;AAEF,SAAgB,EAAa,EAAE,aAAU,oBAAiB,aAAU,sBAAmB,YAA4B;CACjH,IAAM,EACJ,UACA,YACA,mBACA,mBACA,cACA,SACA,aACA,mBACA,aACA,yBACE,GAAa,EACX,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAU,EAAuB,KAAK,EACtC,IAAW,MAAU,KAAA,KAAa,KAAS;CAEjD,QAAgB;EACT,EAAQ,WACT,WAAW,SAAS,kBAAkB,EAAQ,YAE9C,MAAU,KAAkB,MAAmB,KAEjD,EAAQ,QAAQ,OAAO,EACvB,EAAU,GAAK,IAEf,EAAU,GAAM;IAEjB;EAAC;EAAO;EAAgB;EAAgB;EAAkB,CAAC;CAE9D,SAAS,EAAgB,GAAkC;EAMzD,IALA,EAAM,iBAAiB,EAEvB,EAAM,aAAa,gBAAgB,QACnC,EAAM,aAAa,aAAa,GAAW,GAAG,EAAE,EAE5C,EAAQ,SAAS;GACnB,IAAM,IAAS,EAAQ,QAAQ,UAAU,GAAK;GAI9C,AAFA,EAAO,UAAU,IAAI,EAAO,8BAA8B,EAE1D,EAAS,EAAO;;EAIlB,AADI,KAAU,EAAU,EAAM,EAC9B,EAAY,GAAK;;CAGnB,SAAS,IAAgB;EACnB,MAEA,KAAO,SAAS,KAAK,YAAY,EAAM,EAE3C,EAAY,GAAM,EAClB,GAAS;;CAGX,SAAS,EAAY,GAA2C;EAC9D,IAAM,EAAE,YAAS;EAEjB,IAAI,MAAS,SAAS,MAAmB,KAAA,GAAW;GAClD,GAAS;GACT;;EAKF,IAFI,EAAY,SAAS,EAAK,KAAK,MAE/B,CAAC,GAAU;EAEf,IAAI,MAAS,SAAS;GACpB,AAAI,KACF,EAAU,GAAM,EAChB,GAAS,KAET,EAAU,GAAK,EACf,EAAU,EAAM;GAGlB;;EAGF,IAAI,MAAmB,KAAA,GAAW;EAElC,IAAM,IAAY,MAAS,YAAY,IAAQ,IAAI,IAAQ;EAEvD,IAAY,KAAK,IAAY,KAEjC,EAAe,EAAU;;CAG3B,SAAS,EAAW,GAAsC;EAGxD,IAFA,EAAM,gBAAgB,EAElB,CAAC,GAAU;EAEf,EAAU,EAAM;EAEhB,IAAM,EAAE,iBAAc,EAAM,cAAc;EAG1C,EAFkB,MAAc,OAAO,IAAQ,IAAI,IAAQ,EAE5C;;CAGjB,OACE,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,wBAAwB,EAAO,wBAAwB,KAAqB;EACnG,WAAW,CAAC;EACZ,WAAW;EACX,aAAa;EACb,gBAAgB;EAChB,KAAK;EACL,MAAK;EAEL,UAAU;YATZ,CAWE,kBAAC,OAAD;GACE,WAAW,GAAG,EAAO,iCAAiC,GAAG,EAAO,yCAAyC;aAD3G;IAGG,MAAoB,UAAU,kBAAC,GAAD,EAAgB,WAAU,QAAS,CAAA;IACjE;IACA,MAAoB,WAAW,kBAAC,GAAD,EAAgB,WAAU,SAAU,CAAA;IAChE;MAEN,kBAAC,OAAD;GAAK,WAAW,EAAO;GAA0C,cAAY;aAC1E,CAAC,KAAY,KACZ,kBAAA,GAAA,EAAA,UACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,UAAD;IACE,WAAW,GAAG,EAAO,+BAA+B,GAAG,EAAO;IAC9D,kBAAe;IACf,gBAAgB;cAHlB,CAKE,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD,EAAM,MAAK,gBAAiB,CAAA;KACxB,CAAA,EACN,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA8B;KAAc,CAAA,CAC7D;OAGV,IAAQ,KACP,kBAAC,UAAD;IACE,WAAW,GAAG,EAAO,+BAA+B,GAAG,EAAO;IAC9D,kBAAe;IACf,gBAAgB;cAHlB,CAKE,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD,EAAM,MAAK,gBAAiB,CAAA;KACxB,CAAA,EACN,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA8B;KAAgB,CAAA,CAC/D;MAEV,EAAA,CAAA,EAEJ,CAAA;GAED,CAAA,CACF"}
+{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\nimport type { SortableItemColors } from 'components/Sortable/Sortable';\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  sortableItemColor: SortableItemColors;\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, sortableItemColor, 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={clsx(styles['sortable__sort-item'], styles[`sortable__sort-item--${sortableItemColor}`])}\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"],"mappings":";;;;;;;;AAoBA,IAAM,IAAc;CAAC;CAAS;CAAa;AAAS,GAC9C,IAAiB,kBAAkB,WAAW,SAAS,iBACvD,IAAY,IAAI,MAAM,GAAG,CAAC;AAEhC,EAAU,MAER;AAEF,SAAgB,EAAa,EAAE,aAAU,oBAAiB,aAAU,sBAAmB,YAA4B;CACjH,IAAM,EACJ,UACA,YACA,mBACA,mBACA,cACA,SACA,aACA,mBACA,aACA,yBACE,EAAY,GACV,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAU,EAAuB,IAAI,GACrC,IAAW,MAAU,KAAA,KAAa,KAAS;CAEjD,QAAgB;EACT,EAAQ,WACT,WAAW,SAAS,kBAAkB,EAAQ,YAE9C,MAAU,KAAkB,MAAmB,KAEjD,EAAQ,QAAQ,MAAM,GACtB,EAAU,EAAI,KAEd,EAAU,EAAK;CAEnB,GAAG;EAAC;EAAO;EAAgB;EAAgB;CAAiB,CAAC;CAE7D,SAAS,EAAgB,GAAkC;EAMzD,IALA,EAAM,gBAAgB,GAEtB,EAAM,aAAa,gBAAgB,QACnC,EAAM,aAAa,aAAa,GAAW,GAAG,CAAC,GAE3C,EAAQ,SAAS;GACnB,IAAM,IAAS,EAAQ,QAAQ,UAAU,EAAI;GAI7C,AAFA,EAAO,UAAU,IAAI,EAAO,6BAA6B,GAEzD,EAAS,CAAM;EACjB;EAGA,AADI,KAAU,EAAU,CAAK,GAC7B,EAAY,EAAI;CAClB;CAEA,SAAS,IAAgB;EACnB,MAEA,KAAO,SAAS,KAAK,YAAY,CAAK,GAE1C,EAAY,EAAK,GACjB,EAAQ;CACV;CAEA,SAAS,EAAY,GAA2C;EAC9D,IAAM,EAAE,YAAS;EAEjB,IAAI,MAAS,SAAS,MAAmB,KAAA,GAAW;GAClD,EAAQ;GACR;EACF;EAIA,IAFI,EAAY,SAAS,CAAI,MAAM,MAE/B,CAAC,GAAU;EAEf,IAAI,MAAS,SAAS;GACpB,AAAI,KACF,EAAU,EAAK,GACf,EAAQ,MAER,EAAU,EAAI,GACd,EAAU,CAAK;GAGjB;EACF;EAEA,IAAI,MAAmB,KAAA,GAAW;EAElC,IAAM,IAAY,MAAS,YAAY,IAAQ,IAAI,IAAQ;EAEvD,IAAY,KAAK,IAAY,KAEjC,EAAe,CAAS;CAC1B;CAEA,SAAS,EAAW,GAAsC;EAGxD,IAFA,EAAM,eAAe,GAEjB,CAAC,GAAU;EAEf,EAAU,CAAK;EAEf,IAAM,EAAE,iBAAc,EAAM,cAAc;EAG1C,EAFkB,MAAc,OAAO,IAAQ,IAAI,IAAQ,CAE7C;CAChB;CAEA,OACE,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,wBAAwB,EAAO,wBAAwB,IAAoB;EAClG,WAAW,CAAC;EACZ,WAAW;EACX,aAAa;EACb,gBAAgB;EAChB,KAAK;EACL,MAAK;EAEL,UAAU;YATZ,CAWE,kBAAC,OAAD;GACE,WAAW,GAAG,EAAO,iCAAiC,GAAG,EAAO,yCAAyC;aAD3G;IAGG,MAAoB,UAAU,kBAAC,GAAD,EAAgB,WAAU,OAAQ,CAAA;IAChE;IACA,MAAoB,WAAW,kBAAC,GAAD,EAAgB,WAAU,QAAS,CAAA;GAChE;MAEL,kBAAC,OAAD;GAAK,WAAW,EAAO;GAA0C,cAAY;aAC1E,CAAC,KAAY,KACZ,kBAAA,GAAA,EAAA,UACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,UAAD;IACE,WAAW,GAAG,EAAO,+BAA+B,GAAG,EAAO;IAC9D,kBAAe;IACf,gBAAgB;cAHlB,CAKE,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD,EAAM,MAAK,eAAgB,CAAA;IACxB,CAAA,GACL,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA8B;IAAa,CAAA,CAC7D;OAGT,IAAQ,KACP,kBAAC,UAAD;IACE,WAAW,GAAG,EAAO,+BAA+B,GAAG,EAAO;IAC9D,kBAAe;IACf,gBAAgB;cAHlB,CAKE,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD,EAAM,MAAK,eAAgB,CAAA;IACxB,CAAA,GACL,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA8B;IAAe,CAAA,CAC/D;KAEV,EAAA,CAAA,EAEJ,CAAA;EAED,CAAA,CACF;;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"sortableReducer.js","names":[],"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"],"mappings":";;;AAkCA,IAAa,IAAe;CAC1B,OAAO,KAAA;CACP,gBAAgB,KAAA;CAChB,gBAAgB,KAAA;CAChB,SAAS,EAAE;CACX,iBAAiB,EAAE;CACnB,UAAU;CACV,eAAe,EAAE;CAClB,EAEK,KAAoB,GAAc,GAAY,GAAG,OACrD,MAAS,KAAY,EAAI,OAAO,GAAI,GAAG,GAAG,EAAI,OAAO,GAAM,EAAE,CAAC,EAAhD;AAEhB,SAAS,EAAgC,GAAc,GAAY,GAAG,GAAoB;CAGxF,OAFA,EAAI,OAAO,GAAM,EAAE,EAEZ,CAAC,GAAG,EAAI,OAAO,GAAI,GAAG,kBAAC,QAAD,EAAQ,CAAA,CAAC,EAAE,GAAG,EAAI;;AAGjD,IAAa,KAAmB,IAA2B,GAAc,MAAuC;CAC9G,IAAM,IAAkB;CAExB,QAAQ,EAAO,MAAf;EACE,KAAK,GACH,OAAO;GACL,GAAG;GACH,OAAO,EAAO;GACf;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,iBAAiB,EAAM;GACxB;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GACjB;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GAChB,eAAe,EAAM;GACtB;EAGH,KAAK,GAAM;GACT,IAAM,IAAgB,EAAiB,EAAgB,gBAAgB,EAAO,SAAS,GAAG,EAAM,gBAAgB,EAC1G,IAAU,EAAc,KAAK,EAAE,eAAY,EAAM,MAAM;GAE7D,OAAO;IACL,GAAG;IACH,OAAO,KAAA;IACP,gBAAgB,KAAA;IAChB,gBAAgB,KAAA;IAChB;IACA;IACD;;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,eAAe,EACb,EAAgB,gBAChB,EAAO,SACP,GAAG,EAAM,gBACV;GACF;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACxB;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,gBAAgB,EAAO;GACvB,eAAe,EAAiB,EAAgB,gBAAgB,EAAO,SAAS,GAAG,EAAM,cAAc;GACxG;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GACjB;EAEH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GACjB;EAEH,SACE,OAAO"}
+{"version":3,"file":"sortableReducer.js","names":[],"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"],"mappings":";;;AAkCA,IAAa,IAAe;CAC1B,OAAO,KAAA;CACP,gBAAgB,KAAA;CAChB,gBAAgB,KAAA;CAChB,SAAS,CAAC;CACV,iBAAiB,CAAC;CAClB,UAAU;CACV,eAAe,CAAC;AAClB,GAEM,KAAoB,GAAc,GAAY,GAAG,OACrD,MAAS,KAAY,EAAI,OAAO,GAAI,GAAG,GAAG,EAAI,OAAO,GAAM,CAAC,CAAC,GAA/C;AAEhB,SAAS,EAAgC,GAAc,GAAY,GAAG,GAAoB;CAGxF,OAFA,EAAI,OAAO,GAAM,CAAC,GAEX,CAAC,GAAG,EAAI,OAAO,GAAI,GAAG,kBAAC,QAAD,CAAO,CAAA,CAAC,GAAG,GAAG,CAAG;AAChD;AAEA,IAAa,KAAmB,IAA2B,GAAc,MAAuC;CAC9G,IAAM,IAAkB;CAExB,QAAQ,EAAO,MAAf;EACE,KAAK,GACH,OAAO;GACL,GAAG;GACH,OAAO,EAAO;EAChB;EAGF,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,iBAAiB,EAAM;EACzB;EAGF,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;EAClB;EAGF,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GAChB,eAAe,EAAM;EACvB;EAGF,KAAK,GAAM;GACT,IAAM,IAAgB,EAAiB,EAAgB,gBAAgB,EAAO,SAAS,GAAG,EAAM,eAAe,GACzG,IAAU,EAAc,KAAK,EAAE,eAAY,EAAM,KAAK;GAE5D,OAAO;IACL,GAAG;IACH,OAAO,KAAA;IACP,gBAAgB,KAAA;IAChB,gBAAgB,KAAA;IAChB;IACA;GACF;EACF;EAEA,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,eAAe,EACb,EAAgB,gBAChB,EAAO,SACP,GAAG,EAAM,eACX;EACF;EAGF,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;EACzB;EAGF,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,gBAAgB,EAAO;GACvB,eAAe,EAAiB,EAAgB,gBAAgB,EAAO,SAAS,GAAG,EAAM,aAAa;EACxG;EAGF,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;EAClB;EAEF,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;EAClB;EAEF,SACE,OAAO;CACX;AACF"}

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

@@ -5,4 +5,4 @@ export interface SpinnerProps {
     showAfterMs?: number;
 }
 /** Represents a component to display a spinner. */
-export declare const Spinner: ({ ariaValueText, showAfterMs }: SpinnerProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Spinner: ({ ariaValueText, showAfterMs }: SpinnerProps) => import("react").JSX.Element | null;

package/dist/components/Spinner/Spinner.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Spinner-BpElTDIu.js";
+import { t as e } from "../../Spinner-BmPjd2Bv.js";
 export { e as Spinner };

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

@@ -1,4 +1,4 @@
-import { t as e } from "../../Spinner-BpElTDIu.js";
+import { t as e } from "../../Spinner-BmPjd2Bv.js";
 import { jsx as t } from "react/jsx-runtime";
 var n = {
 	title: "Atoms/Spinner",

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.js","names":[],"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"],"mappings":";;AAQA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,eAAe,EACb,SAAS,QACV;EACD,aAAa,EACX,SAAS,UACV;EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAIY,MAF4B,MAAS,kBAAC,GAAD,EAAS,GAAI,GAAQ,CAAA,EAEhC,KAAK,EAAE,CAAC;AAC/C,EAAe,OAAO;CACpB,eAAe;CACf,aAAa;CACd"}
+{"version":3,"file":"Spinner.stories.js","names":[],"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"],"mappings":";;AAQA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,eAAe,EACb,SAAS,OACX;EACA,aAAa,EACX,SAAS,SACX;CACF;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAIa,MAF4B,MAAS,kBAAC,GAAD,EAAS,GAAI,EAAO,CAAA,GAE/B,KAAK,CAAC,CAAC;AAC9C,EAAe,OAAO;CACpB,eAAe;CACf,aAAa;AACf"}

package/dist/components/Spinner/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Spinner-BpElTDIu.js";
+import { t as e } from "../../Spinner-BmPjd2Bv.js";
 export { e as Spinner };

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

@@ -1,4 +1,4 @@
-import { t as e } from "../../StatusBage-DQDOF5-U.js";
+import { t as e } from "../../StatusBage-CfEIuIPa.js";
 import { jsx as t } from "react/jsx-runtime";
 var n = {
 	title: "Atoms/StatusBadge",

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.stories.js","names":[],"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"],"mappings":";;AAQA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAEK,KAAuC,MAAS,kBAAC,GAAD,EAAa,GAAI,GAAQ,CAAA,EAEzE,IAAgC;CACpC,OAAO;CACP,cAAc;CACf,EAEY,IAAqB,EAAS,KAAK,EAAE,CAAC;AAEnD,EAAmB,OAAO,EACxB,GAAG,GACJ"}
+{"version":3,"file":"StatusBadge.stories.js","names":[],"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"],"mappings":";;AAQA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAEM,KAAuC,MAAS,kBAAC,GAAD,EAAa,GAAI,EAAO,CAAA,GAExE,IAAgC;CACpC,OAAO;CACP,cAAc;AAChB,GAEa,IAAqB,EAAS,KAAK,CAAC,CAAC;AAElD,EAAmB,OAAO,EACxB,GAAG,EACL"}

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

@@ -1,6 +1,6 @@
-import "../../dist-V_v3kC0L.js";
-import { t as e } from "../../StatusBage-DQDOF5-U.js";
-import { i as t, n } from "../../react.esm-CweFe1CK.js";
+import "../../dist-Cxk2-lJw.js";
+import { t as e } from "../../StatusBage-CfEIuIPa.js";
+import { i as t, n } from "../../react.esm-GvSawg5E.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/StatusBadge/StatusBadge.test.tsx
 describe("StatusBadge", () => {

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.test.js","names":[],"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"],"mappings":";;;;;AAKA,SAAS,qBAAqB;CAM5B,AALA,GAAG,oCAAoC;EAErC,AADA,EAAO,kBAAC,GAAD,EAAa,OAAM,kBAAmB,CAAA,CAAC,EAC9C,OAAO,EAAO,UAAU,iBAAiB,CAAC,CAAC,mBAAmB;GAC9D,EAEF,GAAG,yCAAyC;EAE1C,AADA,EAAO,kBAAC,GAAD;GAAa,OAAM;GAAiB,cAAc;GAAQ,CAAA,CAAC,EAClE,OAAO,EAAO,UAAU,iBAAiB,CAAC,CAAC,YAAY,6BAA6B;GACpF;EACF"}
+{"version":3,"file":"StatusBadge.test.js","names":[],"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"],"mappings":";;;;;AAKA,SAAS,qBAAqB;CAM5B,AALA,GAAG,oCAAoC;EAErC,AADA,EAAO,kBAAC,GAAD,EAAa,OAAM,iBAAkB,CAAA,CAAC,GAC7C,OAAO,EAAO,UAAU,gBAAgB,CAAC,EAAE,kBAAkB;CAC/D,CAAC,GAED,GAAG,yCAAyC;EAE1C,AADA,EAAO,kBAAC,GAAD;GAAa,OAAM;GAAiB,cAAc;EAAO,CAAA,CAAC,GACjE,OAAO,EAAO,UAAU,gBAAgB,CAAC,EAAE,YAAY,4BAA4B;CACrF,CAAC;AACH,CAAC"}