@uva-glass/component-library 2.1.0 → 2.2.0

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

@@ -14,7 +14,9 @@ export interface SelectListboxProps {
     /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */
     buttonLabelBold?: boolean;
     /** The variant of the select box. */
-    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
+    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';
+    /** If true sets the option dropdown min-width to the width of the select button. */
+    fullWidth?: boolean;
     /** The size of the select box. */
     size?: 'small' | 'medium' | 'default';
     /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */
@@ -26,6 +28,6 @@ export interface SelectListboxProps {
 }
 /** Represents a component to render a select list box. */
 export declare const SelectListbox: {
-    ({ options, variant, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
+    ({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
     SelectOption: ({ option, index, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/SelectListbox/SelectListbox.js

@@ -1,50 +1,52 @@
-import { jsx as e, jsxs as E } from "react/jsx-runtime";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
 import { useState as t } from "react";
-import { SelectProvider as b } from "./SelectProvider.js";
-import { SelectButton as P } from "./components/SelectButton.js";
-import { SelectContainer as B } from "./components/SelectContainer.js";
-import { SelectOptionBox as O } from "./components/SelectOptionBox.js";
-import { SelectOption as g } from "./components/SelectOption.js";
-import { usePositionedFloaters as j } from "../hooks/usePositionedFloaters.js";
-const k = ({
+import { SelectProvider as P } from "./SelectProvider.js";
+import { SelectButton as B } from "./components/SelectButton.js";
+import { SelectContainer as O } from "./components/SelectContainer.js";
+import { SelectOptionBox as g } from "./components/SelectOptionBox.js";
+import { SelectOption as j } from "./components/SelectOption.js";
+import { usePositionedFloaters as k } from "../hooks/usePositionedFloaters.js";
+const v = ({
   options: o,
   variant: i,
-  size: r = "default",
-  optionPositionRight: n,
-  defaultValue: l = -1,
-  maxOptionHeight: m,
-  disabled: s,
+  fullWidth: r = !1,
+  size: n = "default",
+  optionPositionRight: l,
+  defaultValue: m = -1,
+  maxOptionHeight: s,
+  disabled: f,
   buttonLabelProp: c = "label",
-  buttonLabelBold: f,
-  onChange: p,
+  buttonLabelBold: p,
+  onChange: a,
   children: S
 }) => {
-  const [a, u] = t(null), [x, d] = t(null), { style: h } = j(a, x, {
+  const [u, x] = t(null), [d, h] = t(null), { style: E } = k(u, d, {
     mouseEvent: "click",
     position: "bottomLeft",
     offset: 4,
-    maxFixedHeight: m,
-    horizontalPosition: n ? "right" : "left",
-    mobileBreakpoint: "28rem"
+    maxFixedHeight: s,
+    horizontalPosition: l ? "right" : "left",
+    mobileBreakpoint: "28rem",
+    fullWidth: r
   });
-  return /* @__PURE__ */ e(b, { options: o, defaultValue: l, children: /* @__PURE__ */ E(B, { children: [
+  return /* @__PURE__ */ e(P, { options: o, defaultValue: m, children: /* @__PURE__ */ b(O, { children: [
     /* @__PURE__ */ e(
-      P,
+      B,
       {
-        disabled: s,
+        disabled: f,
         buttonLabelProp: c,
-        buttonLabelBold: f,
+        buttonLabelBold: p,
         variant: i,
-        size: r,
-        onChange: p,
-        ref: d
+        size: n,
+        onChange: a,
+        ref: h
       }
     ),
-    /* @__PURE__ */ e(O, { ref: u, ...h, children: S })
+    /* @__PURE__ */ e(g, { ref: x, ...E, children: S })
   ] }) });
 };
-k.SelectOption = g;
+v.SelectOption = j;
 export {
-  k as SelectListbox
+  v as SelectListbox
 };
 //# sourceMappingURL=SelectListbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\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';\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}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n  options,\n  variant,\n  size = 'default',\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\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  });\n\n  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          size={size}\n          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {children}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAuCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,EAAA,CACnB;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAnB,GAAkB,cAAAI,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAP;AAAA,QACA,MAAAC;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAX,EAAc,eAAewB;"}
+{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** The size of the select box. */\n  size?: 'small' | 'medium' | 'default';\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n  /** The breakpoint at which to switch to the mobile view. */\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  /** The callback function that is invoked when an option is selected. */\n  onChange?: (option: OptionValue) => void;\n}\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  children,\n}: PropsWithChildren<SelectListboxProps>) => {\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          size={size}\n          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {children}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAyCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACG,gBAAAiB,EAAAC,GAAA,EAAe,SAAApB,GAAkB,cAAAK,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAZ,EAAc,eAAeyB;"}

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

@@ -1,6 +1,6 @@
 import { OptionValue } from 'components/SelectListbox/SelectProvider';
 export interface SelectButtonProps {
-    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
+    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';
     size?: 'small' | 'medium' | 'default';
     onChange?: (option: OptionValue) => void;
     buttonLabelProp?: string;

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

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as C } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-OuTLNxxd.js";
 import { forwardRef as E, useRef as g, useEffect as c } from "react";
-import { s as t } from "../../../SelectListbox.module-ByNtXEyE.js";
+import { s as t } from "../../../SelectListbox.module-BWavTmq8.js";
 import { Icon as L } from "../../Icon/Icon.js";
 import { useSelect as N } from "../SelectProvider.js";
 const O = E((d, u) => {

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

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

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

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useRef as i, useCallback as u, useEffect as l } from "react";
 import { useSelect as m } from "../SelectProvider.js";
-import { s as f } from "../../../SelectListbox.module-ByNtXEyE.js";
+import { s as f } from "../../../SelectListbox.module-BWavTmq8.js";
 const E = ({ children: o }) => {
   const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
     ({ target: s }) => {

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

@@ -2,7 +2,7 @@ import { jsx as d } from "react/jsx-runtime";
 import { c as v } from "../../../clsx-OuTLNxxd.js";
 import { useRef as D, useEffect as p } from "react";
 import { useSelect as y } from "../SelectProvider.js";
-import { s as b } from "../../../SelectListbox.module-ByNtXEyE.js";
+import { s as b } from "../../../SelectListbox.module-BWavTmq8.js";
 const S = ({ option: t, index: l, children: m }) => {
   const o = D(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: u, setIsOpen: i, options: a } = y(), w = (e) => {
     u(a[e]), i(!1);

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

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as m, useRef as x } from "react";
-import { s as i } from "../../../SelectListbox.module-ByNtXEyE.js";
+import { s as i } from "../../../SelectListbox.module-BWavTmq8.js";
 import { useSelect as a } from "../SelectProvider.js";
 const h = m((l, e) => {
   const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);

package/dist/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,15 @@
+import { InputHTMLAttributes } from 'react';
+export interface ToggleSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'className'> {
+    /** The label for the toggle switch. */
+    label: string;
+    /** Boolean value if label should be visible. */
+    labelVisible?: boolean;
+    /** Selection for label placement compared to toggle switch. */
+    labelPosition?: 'before' | 'after';
+    /** Boolean value to be used if the toggle mutates. If true the toggle is disabled in a loading state. */
+    loading?: boolean;
+    /** Boolean value if extra gap is needed on left of component. */
+    extraLeftGap?: boolean;
+}
+/** Represents a component for a toggle switch. */
+export declare function ToggleSwitch({ label, labelPosition, labelVisible, loading, extraLeftGap, ...restProps }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,66 @@
+import { jsx as l, jsxs as _ } from "react/jsx-runtime";
+import { c as a } from "../../clsx-OuTLNxxd.js";
+import '../../assets/ToggleSwitch.css';const t = {
+  "toggle-switch": "_toggle-switch_1df21_1",
+  "toggle-switch__visible": "_toggle-switch__visible_1df21_9",
+  "toggle-switch--disabled": "_toggle-switch--disabled_1df21_54",
+  "toggle-switch--loading": "_toggle-switch--loading_1df21_64",
+  "toggle-switch--visually-hidden": "_toggle-switch--visually-hidden_1df21_74",
+  "toggle-switch--disabled-label": "_toggle-switch--disabled-label_1df21_87",
+  "toggle-switch--loading-cursor": "_toggle-switch--loading-cursor_1df21_91",
+  "toggle-switch--extra-left-gap": "_toggle-switch--extra-left-gap_1df21_95"
+};
+function n({
+  condition: i,
+  wrapper: g,
+  children: e
+}) {
+  return i ? g(e) : e;
+}
+function f({
+  label: i,
+  labelPosition: g = "after",
+  labelVisible: e = !0,
+  loading: o = !1,
+  extraLeftGap: d,
+  ...s
+}) {
+  const c = /* @__PURE__ */ l(
+    "span",
+    {
+      className: a(
+        { [t["toggle-switch--visually-hidden"]]: !e },
+        { [t["toggle-switch--disabled-label"]]: s.disabled }
+      ),
+      children: i
+    }
+  );
+  return /* @__PURE__ */ l(
+    n,
+    {
+      condition: o,
+      wrapper: (h) => /* @__PURE__ */ l("div", { className: t["toggle-switch--loading-cursor"], children: h }),
+      children: /* @__PURE__ */ _(
+        "label",
+        {
+          className: a(
+            t["toggle-switch"],
+            { [t["toggle-switch--disabled"]]: s.disabled },
+            { [t["toggle-switch--loading"]]: o },
+            { [t["toggle-switch--extra-left-gap"]]: d }
+          ),
+          children: [
+            g === "before" && c,
+            /* @__PURE__ */ l("input", { className: t["toggle-switch--visually-hidden"], ...s, type: "checkbox" }),
+            /* @__PURE__ */ l("span", { className: t["toggle-switch__visible"], title: e ? "" : i }),
+            g === "after" && c
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  f as ToggleSwitch
+};
+//# sourceMappingURL=ToggleSwitch.js.map

package/dist/components/ToggleSwitch/ToggleSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.js","sources":["../../../src/components/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ToggleSwitch.module.css';\n\nexport interface ToggleSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'className'> {\n  /** The label for the toggle switch. */\n  label: string;\n  /** Boolean value if label should be visible. */\n  labelVisible?: boolean;\n  /** Selection for label placement compared to toggle switch. */\n  labelPosition?: 'before' | 'after';\n  /** Boolean value to be used if the toggle mutates. If true the toggle is disabled in a loading state. */\n  loading?: boolean;\n  /** Boolean value if extra gap is needed on left of component. */\n  extraLeftGap?: boolean;\n}\n\nfunction ConditionalWrapper({\n  condition,\n  wrapper,\n  children,\n}: {\n  condition: boolean;\n  wrapper: (children: ReactNode) => ReactNode;\n  children: ReactNode;\n}) {\n  return condition ? wrapper(children) : children;\n}\n\n/** Represents a component for a toggle switch. */\nexport function ToggleSwitch({\n  label,\n  labelPosition = 'after',\n  labelVisible = true,\n  loading = false,\n  extraLeftGap,\n  ...restProps\n}: ToggleSwitchProps) {\n  const labelComponent = (\n    <span\n      className={classNames(\n        { [styles['toggle-switch--visually-hidden']]: !labelVisible },\n        { [styles['toggle-switch--disabled-label']]: restProps.disabled }\n      )}\n    >\n      {label}\n    </span>\n  );\n\n  return (\n    <ConditionalWrapper\n      condition={loading}\n      wrapper={(children) => <div className={styles['toggle-switch--loading-cursor']}>{children}</div>}\n    >\n      <label\n        className={classNames(\n          styles['toggle-switch'],\n          { [styles['toggle-switch--disabled']]: restProps.disabled },\n          { [styles['toggle-switch--loading']]: loading },\n          { [styles['toggle-switch--extra-left-gap']]: extraLeftGap }\n        )}\n      >\n        {labelPosition === 'before' && labelComponent}\n        <input className={styles['toggle-switch--visually-hidden']} {...restProps} type=\"checkbox\" />\n        <span className={styles['toggle-switch__visible']} title={!labelVisible ? label : ''} />\n        {labelPosition === 'after' && labelComponent}\n      </label>\n    </ConditionalWrapper>\n  );\n}\n"],"names":["ConditionalWrapper","condition","wrapper","children","ToggleSwitch","label","labelPosition","labelVisible","loading","extraLeftGap","restProps","labelComponent","jsx","classNames","styles","jsxs"],"mappings":";;;;;;;;;;;;AAmBA,SAASA,EAAmB;AAAA,EAC1B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AACF,GAIG;AACM,SAAAF,IAAYC,EAAQC,CAAQ,IAAIA;AACzC;AAGO,SAASC,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAAC,IAAe;AAAA,EACf,SAAAC,IAAU;AAAA,EACV,cAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMC,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACT,EAAE,CAACC,EAAO,gCAAgC,CAAC,GAAG,CAACP,EAAa;AAAA,QAC5D,EAAE,CAACO,EAAO,+BAA+B,CAAC,GAAGJ,EAAU,SAAS;AAAA,MAClE;AAAA,MAEC,UAAAL;AAAA,IAAA;AAAA,EACH;AAIA,SAAA,gBAAAO;AAAA,IAACZ;AAAA,IAAA;AAAA,MACC,WAAWQ;AAAA,MACX,SAAS,CAACL,MAAa,gBAAAS,EAAC,SAAI,WAAWE,EAAO,+BAA+B,GAAI,UAAAX,GAAS;AAAA,MAE1F,UAAA,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF;AAAAA,YACTC,EAAO,eAAe;AAAA,YACtB,EAAE,CAACA,EAAO,yBAAyB,CAAC,GAAGJ,EAAU,SAAS;AAAA,YAC1D,EAAE,CAACI,EAAO,wBAAwB,CAAC,GAAGN,EAAQ;AAAA,YAC9C,EAAE,CAACM,EAAO,+BAA+B,CAAC,GAAGL,EAAa;AAAA,UAC5D;AAAA,UAEC,UAAA;AAAA,YAAAH,MAAkB,YAAYK;AAAA,YAC/B,gBAAAC,EAAC,WAAM,WAAWE,EAAO,gCAAgC,GAAI,GAAGJ,GAAW,MAAK,YAAW;AAAA,YAC3F,gBAAAE,EAAC,QAAK,EAAA,WAAWE,EAAO,wBAAwB,GAAG,OAAQP,IAAuB,KAARF,EAAY,CAAA;AAAA,YACrFC,MAAkB,WAAWK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChC;AAAA,EACF;AAEJ;"}

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ToggleSwitchProps } from './ToggleSwitch';
+declare const _default: Meta<ToggleSwitchProps>;
+export default _default;
+export declare const ToggleSwitchExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ToggleSwitchProps>;

package/dist/components/ToggleSwitch/ToggleSwitch.stories.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import { fn as l } from "../../index-DWzkl4aY.js";
+import { ToggleSwitch as e } from "./ToggleSwitch.js";
+const n = `
+// Has all InputHTMLAttributes props available except "className" and "style" 
+<ToggleSwitch onChange={onChangeFunction} checked={checked} label={label} />
+`, p = {
+  title: "Atoms/ToggleSwitch",
+  component: e,
+  parameters: {
+    inspectComponent: e,
+    codeString: n
+  }
+}, a = (t) => /* @__PURE__ */ o(e, { ...t }), s = {
+  label: "Toggle switch example",
+  labelPosition: "before",
+  onChange: l()
+}, c = a.bind({});
+c.args = {
+  ...s
+};
+export {
+  c as ToggleSwitchExample,
+  p as default
+};
+//# sourceMappingURL=ToggleSwitch.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.stories.js","sources":["../../../src/components/ToggleSwitch/ToggleSwitch.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ToggleSwitchProps } from './ToggleSwitch';\n\nimport { ToggleSwitch } from './ToggleSwitch';\n\nconst codeString = `\n// Has all InputHTMLAttributes props available except \"className\" and \"style\" \n<ToggleSwitch onChange={onChangeFunction} checked={checked} label={label} />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/ToggleSwitch',\n  component: ToggleSwitch,\n  parameters: {\n    inspectComponent: ToggleSwitch,\n    codeString: codeString,\n  },\n} as Meta<ToggleSwitchProps>;\n\nconst Template: StoryFn<ToggleSwitchProps> = (args) => {\n  return <ToggleSwitch {...args} />;\n};\n\nconst defaultArgs: Partial<ToggleSwitchProps> = {\n  label: 'Toggle switch example',\n  labelPosition: 'before',\n  onChange: fn(),\n};\n\nexport const ToggleSwitchExample = Template.bind({});\nToggleSwitchExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","ToggleSwitch_stories","ToggleSwitch","Template","args","jsx","defaultArgs","fn","ToggleSwitchExample"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MACrC,gBAAAC,EAACH,GAAc,EAAA,GAAGE,EAAM,CAAA,GAG3BE,IAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAUC,EAAG;AACf,GAEaC,IAAsBL,EAAS,KAAK,CAAE,CAAA;AACnDK,EAAoB,OAAO;AAAA,EACzB,GAAGF;AACL;"}

package/dist/components/ToggleSwitch/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleSwitch';

package/dist/components/ToggleSwitch/index.js

@@ -0,0 +1,5 @@
+import { ToggleSwitch as g } from "./ToggleSwitch.js";
+export {
+  g as ToggleSwitch
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ToggleSwitch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/hooks/usePositionedFloaters.d.ts

@@ -13,6 +13,7 @@ interface optionProps {
     maxFixedHeight?: `${number}${'px' | 'rem'}`;
     horizontalPosition?: 'left' | 'right';
     mobileBreakpoint?: `${number}${'px' | 'rem'}`;
+    fullWidth: boolean;
 }
 export declare function usePositionedFloaters<T extends HTMLElement = HTMLElement>(positionedElement: T | null, referenceElement: T | null, options: optionProps): positionProps;
 export {};

package/dist/components/hooks/usePositionedFloaters.js

@@ -1,62 +1,64 @@
-import { useState as L, useEffect as F } from "react";
-import { useDebounce as y } from "./useDebounce.js";
-const a = 10, B = 45, l = 300, W = 0, k = 768, D = 2;
+import { useState as L, useEffect as p } from "react";
+import { useDebounce as F } from "./useDebounce.js";
+const a = 10, y = 45, r = 300, B = 0, k = 768, D = 2;
 function S(d, e, n) {
-  const [m, H] = L(!1), v = {
+  const [m, H] = L(!1), w = {
     inset: "0 auto auto 0",
     opacity: 0,
     maxHeight: "100%",
     maxWidth: "100%",
+    minWidth: r,
     overflowX: "hidden",
     overflowY: "auto",
     margin: "0rem"
-  }, [c, w] = L(v), h = (t) => {
+  }, [h, v] = L(w), l = (t) => {
     const o = parseFloat(getComputedStyle(document.documentElement).fontSize);
     return t.indexOf("rem") !== -1 ? parseFloat(t) * o : parseFloat(t);
   }, b = (t, o) => {
     if (!t) return 0;
     const i = o === "bottom" ? window.innerHeight - t.bottom - n.offset - a : t.top - n.offset - a;
-    return !n.maxFixedHeight || h(n.maxFixedHeight) > i ? i : h(n.maxFixedHeight);
-  }, p = (t, o) => {
+    return !n.maxFixedHeight || l(n.maxFixedHeight) > i ? i : l(n.maxFixedHeight);
+  }, W = (t, o) => {
     if (!t) return 0;
     const i = o === "left" ? window.innerWidth - t.left - a : t.right - a;
-    return i <= l ? l : i;
+    return i <= r ? r : i;
   }, P = (t, o, i) => i ? `${t.left - Math.abs(o.width - t.width) / D}px` : `${t.left}px`, x = () => {
     const t = d == null ? void 0 : d.getBoundingClientRect(), o = e == null ? void 0 : e.getBoundingClientRect();
     let i = "bottom", u = "left";
     const f = window.matchMedia(
-      `(max-width: ${n.mobileBreakpoint ? h(n.mobileBreakpoint) : k}px)`
+      `(max-width: ${n.mobileBreakpoint ? l(n.mobileBreakpoint) : k}px)`
     ).matches;
-    return !o || !t ? v : (window.innerHeight - o.bottom - a < B && (i = "top"), (window.innerWidth - o.left - a < l || n.horizontalPosition === "right") && !f && (u = "right"), {
+    return !o || !t ? w : (window.innerHeight - o.bottom - a < y && (i = "top"), (window.innerWidth - o.left - a < r || n.horizontalPosition === "right") && !f && (u = "right"), {
       inset: `${i === "bottom" ? o[i] + "px" : "auto"}
               ${u === "right" ? window.innerWidth - o[u] + "px" : "auto"}
               ${i === "top" ? window.innerHeight - o[i] + "px" : "auto"}
               ${u === "left" ? P(o, t, f) : "auto"}`,
       maxHeight: `${b(o, i)}px`,
-      maxWidth: `${p(o, u)}px`,
+      maxWidth: `${W(o, u)}px`,
+      minWidth: n.fullWidth ? o.width : r,
       overflowX: "hidden",
       overflowY: "auto",
       opacity: 1,
       margin: `${n.offset}px 0`
     });
-  }, r = () => {
-    w({
-      ...c,
+  }, c = () => {
+    v({
+      ...h,
       ...x()
     }), H(!0);
   }, $ = () => {
-    m && w({
-      ...c,
+    m && v({
+      ...h,
       ...x()
     });
   }, s = (t) => {
     !e || e.contains(t.target) || !d || d.contains(t.target);
-  }, g = y($, W);
-  return F(() => (e !== null && (n.mouseEvent === "click" ? e.addEventListener("click", r) : (e.addEventListener("mouseenter", r), e.addEventListener("mouseleave", s)), document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), window.addEventListener("resize", g)), () => {
-    e !== null && (n.mouseEvent === "click" ? e.removeEventListener("click", r) : (e.removeEventListener("mouseenter", r), e.removeEventListener("mouseleave", s)), document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s), window.removeEventListener("resize", g));
+  }, g = F($, B);
+  return p(() => (e !== null && (n.mouseEvent === "click" ? e.addEventListener("click", c) : (e.addEventListener("mouseenter", c), e.addEventListener("mouseleave", s)), document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), window.addEventListener("resize", g)), () => {
+    e !== null && (n.mouseEvent === "click" ? e.removeEventListener("click", c) : (e.removeEventListener("mouseenter", c), e.removeEventListener("mouseleave", s)), document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s), window.removeEventListener("resize", g));
   })), {
     style: {
-      style: c
+      style: h
     },
     status: m
   };

package/dist/components/hooks/usePositionedFloaters.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  status: boolean;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 45;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    margin: '0rem',\n  };\n\n  const [style, setStyle] = useState(defaultStyle);\n\n  const sizeToPx = (size: `${number}${'px' | 'rem'}`): number => {\n    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n  };\n\n  const setHeight = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _maxHeight =\n      pos === 'bottom'\n        ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n        : refRect.top - options.offset - BODY_PADDING;\n\n    return !options.maxFixedHeight || sizeToPx(options.maxFixedHeight) > _maxHeight\n      ? _maxHeight\n      : sizeToPx(options.maxFixedHeight);\n  };\n\n  const setWidth = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _availableWidth =\n      pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n    return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n  };\n\n  const setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n    if (isMobile) {\n      return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n    } else {\n      return `${refRect.left}px`;\n    }\n  };\n\n  const calcPosition = (): typeof defaultStyle => {\n    const positionedRect = (positionedElement as HTMLElement | null)?.getBoundingClientRect();\n    const referenceRect = (referenceElement as HTMLElement | null)?.getBoundingClientRect();\n    let yPos = 'bottom';\n    let xPos = 'left';\n\n    const isMobile = window.matchMedia(\n      `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n    ).matches;\n\n    if (!referenceRect || !positionedRect) {\n      return defaultStyle;\n    }\n\n    if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n      yPos = 'top';\n    }\n\n    if (\n      (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') &&\n      !isMobile\n    ) {\n      xPos = 'right';\n    }\n\n    return {\n      inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n              ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'left' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n      maxHeight: `${setHeight(referenceRect, yPos)}px`,\n      maxWidth: `${setWidth(referenceRect, xPos)}px`,\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      opacity: 1,\n      margin: `${options.offset}px 0`,\n    };\n  };\n\n  const handleMouseEvent = (): void => {\n    setStyle({\n      ...style,\n      ...calcPosition(),\n    });\n    setStatus(true);\n  };\n\n  const updatePosition = (): void => {\n    if (status) {\n      setStyle({\n        ...style,\n        ...calcPosition(),\n      });\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', debouncedUpdatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', debouncedUpdatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    status,\n  };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":"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"}
+{"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  status: boolean;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  fullWidth: boolean;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 45;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    minWidth: MIN_WIDTH,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    margin: '0rem',\n  };\n\n  const [style, setStyle] = useState(defaultStyle);\n\n  const sizeToPx = (size: `${number}${'px' | 'rem'}`): number => {\n    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n  };\n\n  const setHeight = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _maxHeight =\n      pos === 'bottom'\n        ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n        : refRect.top - options.offset - BODY_PADDING;\n\n    return !options.maxFixedHeight || sizeToPx(options.maxFixedHeight) > _maxHeight\n      ? _maxHeight\n      : sizeToPx(options.maxFixedHeight);\n  };\n\n  const setWidth = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _availableWidth =\n      pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n    return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n  };\n\n  const setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n    if (isMobile) {\n      return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n    } else {\n      return `${refRect.left}px`;\n    }\n  };\n\n  const calcPosition = (): typeof defaultStyle => {\n    const positionedRect = (positionedElement as HTMLElement | null)?.getBoundingClientRect();\n    const referenceRect = (referenceElement as HTMLElement | null)?.getBoundingClientRect();\n    let yPos = 'bottom';\n    let xPos = 'left';\n\n    const isMobile = window.matchMedia(\n      `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n    ).matches;\n\n    if (!referenceRect || !positionedRect) {\n      return defaultStyle;\n    }\n\n    if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n      yPos = 'top';\n    }\n\n    if (\n      (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') &&\n      !isMobile\n    ) {\n      xPos = 'right';\n    }\n\n    return {\n      inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n              ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'left' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n      maxHeight: `${setHeight(referenceRect, yPos)}px`,\n      maxWidth: `${setWidth(referenceRect, xPos)}px`,\n      minWidth: options.fullWidth ? referenceRect.width : MIN_WIDTH,\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      opacity: 1,\n      margin: `${options.offset}px 0`,\n    };\n  };\n\n  const handleMouseEvent = (): void => {\n    setStyle({\n      ...style,\n      ...calcPosition(),\n    });\n    setStatus(true);\n  };\n\n  const updatePosition = (): void => {\n    if (status) {\n      setStyle({\n        ...style,\n        ...calcPosition(),\n      });\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', debouncedUpdatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', debouncedUpdatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    status,\n  };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -44,4 +44,5 @@ export * from './SelectListbox/SelectProvider';
 export * from './Sortable';
 export * from './Spinner';
 export * from './StatusPill';
+export * from './ToggleSwitch';
 export * from './Tooltip';

package/dist/components/index.js

@@ -9,14 +9,14 @@ import { Button as B } from "./Buttons/Button.js";
 import { LinkButton as b } from "./Buttons/LinkButton.js";
 import { MenuButton as C } from "./Buttons/MenuButton.js";
 import { Card as L } from "./Card/Card.js";
-import { Checkbox as I } from "./Checkbox/Checkbox.js";
-import { CheckboxButton as A } from "./CheckboxButton/CheckboxButton.js";
-import { CheckboxButtonBar as R } from "./CheckboxButtonBar/CheckboxButtonBar.js";
-import { CheckboxTree as h } from "./CheckboxTree/CheckboxTree.js";
+import { Checkbox as g } from "./Checkbox/Checkbox.js";
+import { CheckboxButton as P } from "./CheckboxButton/CheckboxButton.js";
+import { CheckboxButtonBar as A } from "./CheckboxButtonBar/CheckboxButtonBar.js";
+import { CheckboxTree as R } from "./CheckboxTree/CheckboxTree.js";
 import { Drawer as v } from "./Drawer/Drawer.js";
-import { EmptyStateDataDisplay as E } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
-import { FeedbackBox as H } from "./FeedbackBox/FeedbackBox.js";
-import { FieldHint as T } from "./FieldHint/FieldHint.js";
+import { EmptyStateDataDisplay as T } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
+import { FeedbackBox as G } from "./FeedbackBox/FeedbackBox.js";
+import { FieldHint as O } from "./FieldHint/FieldHint.js";
 import { Fieldset as N } from "./Fieldset/Fieldset.js";
 import { FormField as q } from "./FormField/FormField.js";
 import { FormInput as K } from "./FormInput/FormInput.js";
@@ -36,17 +36,18 @@ import { OverlayCloseButton as So } from "./OverlayCloseButton/OverlayCloseButto
 import { PageOverlay as ko } from "./PageOverlay/PageOverlay.js";
 import { Periods as Fo } from "./Periods/Periods.js";
 import { PeriodSelector as Mo } from "./PeriodSelector/PeriodSelector.js";
-import { ProgrammeCard as Po } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as Do } from "./RadioButton/RadioButton.js";
-import { Repeater as go } from "./Repeater/Repeater.js";
+import { ProgrammeCard as Io } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as ho } from "./RadioButton/RadioButton.js";
+import { Repeater as Do } from "./Repeater/Repeater.js";
 import { Rte as yo, RteEditor as vo } from "./RteEditor/RteEditor.js";
-import { SectionNotification as Eo } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as Ho } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as To, useSelect as zo } from "./SelectListbox/SelectProvider.js";
+import { SectionNotification as To } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as Go } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as Oo, useSelect as zo } from "./SelectListbox/SelectProvider.js";
 import { Sortable as jo } from "./Sortable/Sortable.js";
 import { Spinner as Jo } from "./Spinner/Spinner.js";
 import { StatusPill as Qo } from "./StatusPill/StatusPill.js";
-import { Tooltip as Vo } from "./Tooltip/Tooltip.js";
+import { ToggleSwitch as Vo } from "./ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as Xo } from "./Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AccordionCard,
@@ -57,14 +58,14 @@ export {
   B as Button,
   d as ButtonGroup,
   L as Card,
-  I as Checkbox,
-  A as CheckboxButton,
-  R as CheckboxButtonBar,
-  h as CheckboxTree,
+  g as Checkbox,
+  P as CheckboxButton,
+  A as CheckboxButtonBar,
+  R as CheckboxTree,
   v as Drawer,
-  E as EmptyStateDataDisplay,
-  H as FeedbackBox,
-  T as FieldHint,
+  T as EmptyStateDataDisplay,
+  G as FeedbackBox,
+  O as FieldHint,
   N as Fieldset,
   q as FormField,
   K as FormInput,
@@ -86,18 +87,19 @@ export {
   ko as PageOverlay,
   Mo as PeriodSelector,
   Fo as Periods,
-  Po as ProgrammeCard,
-  Do as RadioButton,
-  go as Repeater,
+  Io as ProgrammeCard,
+  ho as RadioButton,
+  Do as Repeater,
   yo as Rte,
   vo as RteEditor,
-  Eo as SectionNotification,
-  Ho as SelectListbox,
-  To as SelectProvider,
+  To as SectionNotification,
+  Go as SelectListbox,
+  Oo as SelectProvider,
   jo as Sortable,
   Jo as Spinner,
   Qo as StatusPill,
-  Vo as Tooltip,
+  Vo as ToggleSwitch,
+  Xo as Tooltip,
   zo as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}