@uva-glass/component-library 1.48.1 → 1.50.0

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

@@ -1,18 +1,30 @@
 import { PropsWithChildren } from 'react';
 import { OptionValue, SelectValue } from './SelectProvider';
 export interface SelectListboxProps {
+    /** The possible options to select. */
     options: OptionValue[];
+    /** The selected value by default. */
     defaultValue?: SelectValue;
+    /** The max height of the options. */
     maxOptionHeight?: `${number}${'px' | 'rem'}`;
+    /** `true` to disable the select box; otherwise, `false`. The default is `false`. */
     disabled?: boolean;
+    /** The name of the property in the options structure that contains the label of the options. */
     buttonLabelProp?: string;
+    /** `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';
+    /** The size of the select box. */
     size?: 'small' | 'default';
+    /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */
     optionPositionRight?: boolean;
+    /** The breakpoint at which to switch to the mobile view. */
     mobileBreakpoint?: `${number}${'px' | 'rem'}`;
+    /** The callback function that is invoked when an option is selected. */
     onChange?: (option: OptionValue) => void;
 }
+/** 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;
     SelectOption: ({ option, index, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectListbox/SelectListbox.js

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as E } from "react/jsx-runtime";
 import { useState as t } from "react";
-import { SelectButton as b } from "./components/SelectButton.js";
-import { SelectContainer as P } from "./components/SelectContainer.js";
-import { SelectOptionBox as B } from "./components/SelectOptionBox.js";
-import { SelectOption as O } from "./components/SelectOption.js";
-import { SelectProvider as g } from "./SelectProvider.js";
+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 = ({
   options: o,
@@ -27,9 +27,9 @@ const k = ({
     horizontalPosition: n ? "right" : "left",
     mobileBreakpoint: "28rem"
   });
-  return /* @__PURE__ */ e(g, { options: o, defaultValue: l, children: /* @__PURE__ */ E(P, { children: [
+  return /* @__PURE__ */ e(b, { options: o, defaultValue: l, children: /* @__PURE__ */ E(B, { children: [
     /* @__PURE__ */ e(
-      b,
+      P,
       {
         disabled: s,
         buttonLabelProp: c,
@@ -40,10 +40,10 @@ const k = ({
         ref: d
       }
     ),
-    /* @__PURE__ */ e(B, { ref: u, ...h, children: S })
+    /* @__PURE__ */ e(O, { ref: u, ...h, children: S })
   ] }) });
 };
-k.SelectOption = O;
+k.SelectOption = g;
 export {
   k as SelectListbox
 };

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 { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\nimport { SelectProvider } from './SelectProvider';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  options: OptionValue[];\n  defaultValue?: SelectValue;\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  disabled?: boolean;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  size?: 'small' | 'default';\n  optionPositionRight?: boolean;\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  onChange?: (option: OptionValue) => void;\n}\n\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":";;;;;;;;AA2BO,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,GACH;AAAA,EAAA,EACF,CAAA,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';\n  /** The size of the select box. */\n  size?: 'small' | '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,GACH;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEAX,EAAc,eAAewB;"}

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

@@ -1,6 +1,8 @@
 export interface SpinnerProps {
+    /** The `aria-valuetext` of the spinner. */
     ariaValueText: string;
-    /** Delay in milliseconds after which the spinner becomes visible. The default is 250. */
+    /** Delay in milliseconds after which the spinner becomes visible. The default is `250`. */
     showAfterMs?: number;
 }
+/** Represents a component to display a spinner. */
 export declare const Spinner: ({ ariaValueText, showAfterMs }: SpinnerProps) => import("react/jsx-runtime").JSX.Element | null;

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { Spinner as e } from "./Spinner.js";
-const a = "<Spinner ariaValueText={ariaValueText} />", p = {
+const n = "<Spinner ariaValueText={ariaValueText} />", p = {
   title: "Atoms/Spinner",
   component: e,
   argTypes: {
@@ -12,9 +12,10 @@ const a = "<Spinner ariaValueText={ariaValueText} />", p = {
     }
   },
   parameters: {
-    codeString: a
+    inspectComponent: e,
+    codeString: n
   }
-}, n = (t) => /* @__PURE__ */ r(e, { ...t }), o = n.bind({});
+}, a = (t) => /* @__PURE__ */ r(e, { ...t }), o = a.bind({});
 o.args = {
   ariaValueText: "Example value text",
   showAfterMs: 250

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

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

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

@@ -1,6 +1,10 @@
 export interface StatusPillProps {
+    /** The status to convey. */
     status: 'possible' | 'impossible' | 'new';
+    /** The variant of the pill. */
     variant?: 'default' | 'bar';
+    /** A description of the status. */
     label: string;
 }
+/** Represents a component for a status pill. */
 export declare function StatusPill({ status, variant, label }: StatusPillProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,13 +1,14 @@
-import { jsx as t } from "react/jsx-runtime";
-import { StatusPill as a } from "./StatusPill.js";
+import { jsx as a } from "react/jsx-runtime";
+import { StatusPill as t } from "./StatusPill.js";
 import { Container as s } from "../../storyComponents/Container/Container.js";
-const e = "<StatusPill  status={status} label={label} variant={variant}/>", m = {
+const e = "<StatusPill  status={status} label={label} variant={variant}/>", p = {
   title: "Molecules/StatusPill",
-  component: a,
+  component: t,
   parameters: {
+    inspectComponent: t,
     codeString: e
   }
-}, i = (l) => /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t(a, { ...l }) }), o = i.bind({});
+}, i = (l) => /* @__PURE__ */ a(s, { children: /* @__PURE__ */ a(t, { ...l }) }), o = i.bind({});
 o.args = {
   status: "possible",
   variant: "default",
@@ -15,6 +16,6 @@ o.args = {
 };
 export {
   o as StatusPillExample,
-  m as default
+  p as default
 };
 //# sourceMappingURL=StatusPill.stories.js.map

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

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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,9 +1,15 @@
 import { ReactNode } from 'react';
 export interface TooltipProps {
+    /** The element which triggers the tooltip on hover. */
     element: ReactNode;
+    /** The id of the tooltip element. */
     id: string;
+    /** The contents of the tooltip. */
     text: string;
+    /** The size of the tooltip. */
     size?: 'small' | 'medium' | 'large';
+    /** <span style="color: red">**Obsolete**</span>. Used by Lens only, and should be refactored */
     openUnderTrigger?: boolean;
 }
+/** Represents a component for a custom tooltip. */
 export declare function Tooltip({ element, id, text, size, openUnderTrigger }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n  element: ReactNode;\n  id: string;\n  text: string;\n  size?: 'small' | 'medium' | 'large';\n  openUnderTrigger?: boolean;\n}\n\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  /* eslint-disable @typescript-eslint/no-magic-numbers */\n  const topOffset = (size === 'small' && 20) || (size === 'large' && 35) || 27;\n  const leftOffset = (size === 'small' && 25) || (size === 'large' && 70) || 47;\n  /* eslint-enable @typescript-eslint/no-magic-numbers */\n\n  const calculatePosition = useCallback(() => {\n    if (containerRef.current && tooltipRef.current) {\n      const triggerRect = containerRef.current.getBoundingClientRect();\n      const tooltipRect = tooltipRef.current.getBoundingClientRect();\n      const scrollY = window.scrollY;\n      const scrollX = window.scrollX;\n      let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n      // Adjust top position to account for page scrolling\n      top -= scrollY;\n\n      // Position tooltip below if it would be above the viewport\n      if (top < 0) {\n        top = triggerRect.bottom + scrollY;\n      }\n\n      setPosition({ top, left });\n    }\n  }, [leftOffset, topOffset]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  function show() {\n    setIsOpen(true);\n  }\n\n  function hide() {\n    setIsOpen(false);\n  }\n\n  function toggle() {\n    if (isOpen) setIsOpen(false);\n    else setIsOpen(true);\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const tooltipContainerRef = containerRef.current;\n\n    tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n    return () => {\n      tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n    };\n  }, [onKeyUp]);\n\n  useEffect(() => {\n    calculatePosition();\n    window.addEventListener('resize', calculatePosition);\n    return () => {\n      window.removeEventListener('resize', calculatePosition);\n    };\n  }, [calculatePosition]);\n\n  useEffect(() => {\n    // Recalculate position when isOpen changes\n    if (isOpen && !openUnderTrigger) {\n      calculatePosition();\n    }\n  }, [isOpen, openUnderTrigger, calculatePosition]);\n\n  return (\n    <div\n      className={styles['tooltip-container']}\n      onBlur={hide}\n      onFocus={show}\n      onMouseEnter={show}\n      onMouseLeave={hide}\n      onMouseUp={toggle}\n      ref={containerRef}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n      {isOpen && (\n        <span\n          ref={tooltipRef}\n          className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n          id={id}\n          role=\"tooltip\"\n          style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n        >\n          {text}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Tooltip","element","id","text","size","openUnderTrigger","containerRef","useRef","tooltipRef","isOpen","setIsOpen","useState","position","setPosition","topOffset","leftOffset","calculatePosition","useCallback","triggerRect","tooltipRect","scrollY","scrollX","top","left","onKeyUp","event","show","hide","toggle","useEffect","tooltipContainerRef","jsxs","styles","jsx"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n  /** The element which triggers the tooltip on hover. */\n  element: ReactNode;\n  /** The id of the tooltip element. */\n  id: string;\n  /** The contents of the tooltip. */\n  text: string;\n  /** The size of the tooltip. */\n  size?: 'small' | 'medium' | 'large';\n  /** <span style=\"color: red\">**Obsolete**</span>. Used by Lens only, and should be refactored */\n  openUnderTrigger?: boolean;\n}\n\n/** Represents a component for a custom tooltip. */\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  /* eslint-disable @typescript-eslint/no-magic-numbers */\n  const topOffset = (size === 'small' && 20) || (size === 'large' && 35) || 27;\n  const leftOffset = (size === 'small' && 25) || (size === 'large' && 70) || 47;\n  /* eslint-enable @typescript-eslint/no-magic-numbers */\n\n  const calculatePosition = useCallback(() => {\n    if (containerRef.current && tooltipRef.current) {\n      const triggerRect = containerRef.current.getBoundingClientRect();\n      const tooltipRect = tooltipRef.current.getBoundingClientRect();\n      const scrollY = window.scrollY;\n      const scrollX = window.scrollX;\n      let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n      // Adjust top position to account for page scrolling\n      top -= scrollY;\n\n      // Position tooltip below if it would be above the viewport\n      if (top < 0) {\n        top = triggerRect.bottom + scrollY;\n      }\n\n      setPosition({ top, left });\n    }\n  }, [leftOffset, topOffset]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  function show() {\n    setIsOpen(true);\n  }\n\n  function hide() {\n    setIsOpen(false);\n  }\n\n  function toggle() {\n    if (isOpen) setIsOpen(false);\n    else setIsOpen(true);\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const tooltipContainerRef = containerRef.current;\n\n    tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n    return () => {\n      tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n    };\n  }, [onKeyUp]);\n\n  useEffect(() => {\n    calculatePosition();\n    window.addEventListener('resize', calculatePosition);\n    return () => {\n      window.removeEventListener('resize', calculatePosition);\n    };\n  }, [calculatePosition]);\n\n  useEffect(() => {\n    // Recalculate position when isOpen changes\n    if (isOpen && !openUnderTrigger) {\n      calculatePosition();\n    }\n  }, [isOpen, openUnderTrigger, calculatePosition]);\n\n  return (\n    <div\n      className={styles['tooltip-container']}\n      onBlur={hide}\n      onFocus={show}\n      onMouseEnter={show}\n      onMouseLeave={hide}\n      onMouseUp={toggle}\n      ref={containerRef}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n      {isOpen && (\n        <span\n          ref={tooltipRef}\n          className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n          id={id}\n          role=\"tooltip\"\n          style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n        >\n          {text}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Tooltip","element","id","text","size","openUnderTrigger","containerRef","useRef","tooltipRef","isOpen","setIsOpen","useState","position","setPosition","topOffset","leftOffset","calculatePosition","useCallback","triggerRect","tooltipRect","scrollY","scrollX","top","left","onKeyUp","event","show","hide","toggle","useEffect","tooltipContainerRef","jsxs","styles","jsx"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.stories.js

@@ -1,14 +1,14 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Tooltip as t } from "./Tooltip.js";
-import { Container as r } from "../../storyComponents/Container/Container.js";
-const i = "<Tooltip element={element} id={id} text={text} size={size} />", a = {
+import { jsx as t } from "react/jsx-runtime";
+import { Tooltip as e } from "./Tooltip.js";
+import { Container as i } from "../../storyComponents/Container/Container.js";
+const r = "<Tooltip element={element} id={id} text={text} size={size} />", c = {
   title: "Atoms/Tooltip",
-  component: t,
+  component: e,
   argTypes: {
     element: {
       control: "text"
     },
-    // Disable openUnderTrigger controls as this as this is a Lens specific prop that we should not use in other places.
+    // Disable openUnderTrigger controls as this is a Lens specific prop that we should not use in other places.
     // This is still needed until Lens structure is reworked.
     openUnderTrigger: {
       table: {
@@ -17,9 +17,10 @@ const i = "<Tooltip element={element} id={id} text={text} size={size} />", a = {
     }
   },
   parameters: {
-    codeString: i
+    inspectComponent: e,
+    codeString: r
   }
-}, n = (o) => /* @__PURE__ */ e(r, { centerContent: !0, children: /* @__PURE__ */ e(t, { ...o }) }), l = n.bind({});
+}, n = (o) => /* @__PURE__ */ t(i, { centerContent: !0, children: /* @__PURE__ */ t(e, { ...o }) }), l = n.bind({});
 l.args = {
   element: "Tooltip Trigger",
   id: "52fcc9e9",
@@ -27,6 +28,6 @@ l.args = {
 };
 export {
   l as TooltipExample,
-  a as default
+  c as default
 };
 //# sourceMappingURL=Tooltip.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.js","sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { TooltipProps } from './Tooltip';\n\nimport { Tooltip } from './Tooltip';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Tooltip element={element} id={id} text={text} size={size} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Tooltip',\n  component: Tooltip,\n  argTypes: {\n    element: {\n      control: 'text',\n    },\n    // Disable openUnderTrigger controls as this as this is a Lens specific prop that we should not use in other places.\n    // This is still needed until Lens structure is reworked.\n    openUnderTrigger: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<TooltipProps>;\n\nconst Template: StoryFn<TooltipProps> = (args) => (\n  <Container centerContent>\n    <Tooltip {...args} />\n  </Container>\n);\n\nexport const TooltipExample = Template.bind({});\nTooltipExample.args = {\n  element: 'Tooltip Trigger',\n  id: '52fcc9e9',\n  text: 'Here is your Tooltip',\n};\n"],"names":["codeString","Tooltip_stories","Tooltip","Template","args","jsx","Container","TooltipExample"],"mappings":";;;AAOA,MAAMA,IAAa,iEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA;AAAA;AAAA,IAGA,kBAAkB;AAAA,MAChB,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAkC,CAACC,MACtC,gBAAAC,EAAAC,GAAA,EAAU,eAAa,IACtB,UAAC,gBAAAD,EAAAH,GAAA,EAAS,GAAGE,EAAM,CAAA,EACrB,CAAA,GAGWG,IAAiBJ,EAAS,KAAK,EAAE;AAC9CI,EAAe,OAAO;AAAA,EACpB,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AACR;"}
+{"version":3,"file":"Tooltip.stories.js","sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { TooltipProps } from './Tooltip';\n\nimport { Tooltip } from './Tooltip';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Tooltip element={element} id={id} text={text} size={size} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Tooltip',\n  component: Tooltip,\n  argTypes: {\n    element: {\n      control: 'text',\n    },\n    // Disable openUnderTrigger controls as this is a Lens specific prop that we should not use in other places.\n    // This is still needed until Lens structure is reworked.\n    openUnderTrigger: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Tooltip,\n    codeString: codeString,\n  },\n} as Meta<TooltipProps>;\n\nconst Template: StoryFn<TooltipProps> = (args) => (\n  <Container centerContent>\n    <Tooltip {...args} />\n  </Container>\n);\n\nexport const TooltipExample = Template.bind({});\nTooltipExample.args = {\n  element: 'Tooltip Trigger',\n  id: '52fcc9e9',\n  text: 'Here is your Tooltip',\n};\n"],"names":["codeString","Tooltip_stories","Tooltip","Template","args","jsx","Container","TooltipExample"],"mappings":";;;AAOA,MAAMA,IAAa,iEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA;AAAA;AAAA,IAGA,kBAAkB;AAAA,MAChB,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAkC,CAACC,MACtC,gBAAAC,EAAAC,GAAA,EAAU,eAAa,IACtB,UAAC,gBAAAD,EAAAH,GAAA,EAAS,GAAGE,EAAM,CAAA,EACrB,CAAA,GAGWG,IAAiBJ,EAAS,KAAK,EAAE;AAC9CI,EAAe,OAAO;AAAA,EACpB,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AACR;"}

package/dist/components/index.d.ts

@@ -7,6 +7,8 @@ export * from './Button';
 export * from './ButtonGroup';
 export * from './Card';
 export * from './Checkbox';
+export * from './CheckboxButton';
+export * from './CheckboxButtonBar';
 export * from './CheckboxTree';
 export * from './Drawer';
 export * from './EmptyStateDataDisplay';
@@ -29,6 +31,7 @@ export * from './ModalDialog';
 export * from './MultiSelect';
 export * from './OverlayCloseButton';
 export * from './Periods';
+export * from './PeriodSelector';
 export * from './ProgrammeCard';
 export * from './RadioButton';
 export * from './Repeater';

package/dist/components/index.js

@@ -1,84 +1,90 @@
 import { Accordion as t } from "./Accordion/Accordion.js";
 import { ActionList as p } from "./ActionList/ActionList.js";
-import { AppStatusBar as x } from "./AppStatusBar/AppStatusBar.js";
+import { AppStatusBar as m } from "./AppStatusBar/AppStatusBar.js";
 import { Attention as i } from "./Attention/Attention.js";
 import { Backdrop as n } from "./Backdrop/Backdrop.js";
 import { Button as c } from "./Button/Button.js";
 import { ButtonGroup as d } from "./ButtonGroup/ButtonGroup.js";
 import { Card as B } from "./Card/Card.js";
-import { Checkbox as M } from "./Checkbox/Checkbox.js";
-import { CheckboxTree as L } from "./CheckboxTree/CheckboxTree.js";
-import { Drawer as k } from "./Drawer/Drawer.js";
-import { EmptyStateDataDisplay as D } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
-import { FeedbackBox as A } from "./FeedbackBox/FeedbackBox.js";
-import { FieldHint as g } from "./FieldHint/FieldHint.js";
-import { Fieldset as R } from "./Fieldset/Fieldset.js";
-import { FormField as v } from "./FormField/FormField.js";
-import { GridRow as G } from "./GridRow/GridRow.js";
-import { HorizontalList as T } from "./HorizontalList/HorizontalList.js";
-import { Icon as E } from "./Icon/Icon.js";
-import { IconButton as O } from "./IconButton/IconButton.js";
-import { InfoMessage as q } from "./InfoMessage/InfoMessage.js";
-import { Input as K } from "./Input/Input.js";
-import { InputField as U } from "./InputField/InputField.js";
-import { Label as W } from "./Label/Label.js";
-import { MenuButton as Y } from "./MenuButton/MenuButton.js";
-import { MenuLink as _ } from "./MenuLink/MenuLink.js";
-import { MetaDataList as oo } from "./MetaDataList/MetaDataList.js";
-import { ModalDialog as to } from "./ModalDialog/ModalDialog.js";
-import { M as po } from "../MultiSelect-Ckf3uGw5.js";
-import { OverlayCloseButton as xo } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { Periods as io } from "./Periods/Periods.js";
-import { ProgrammeCard as no } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as co } from "./RadioButton/RadioButton.js";
-import { Repeater as so } from "./Repeater/Repeater.js";
-import { SectionNotification as So } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as Fo } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as bo, useSelect as ko } from "./SelectListbox/SelectProvider.js";
-import { Spinner as Do } from "./Spinner/Spinner.js";
-import { StatusPill as Ao } from "./StatusPill/StatusPill.js";
-import { Tooltip as go } from "./Tooltip/Tooltip.js";
+import { Checkbox as b } from "./Checkbox/Checkbox.js";
+import { CheckboxButton as C } from "./CheckboxButton/CheckboxButton.js";
+import { CheckboxButtonBar as F } from "./CheckboxButtonBar/CheckboxButtonBar.js";
+import { CheckboxTree as D } from "./CheckboxTree/CheckboxTree.js";
+import { Drawer as P } from "./Drawer/Drawer.js";
+import { EmptyStateDataDisplay as A } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
+import { FeedbackBox as y } from "./FeedbackBox/FeedbackBox.js";
+import { FieldHint as v } from "./FieldHint/FieldHint.js";
+import { Fieldset as G } from "./Fieldset/Fieldset.js";
+import { FormField as T } from "./FormField/FormField.js";
+import { GridRow as E } from "./GridRow/GridRow.js";
+import { HorizontalList as O } from "./HorizontalList/HorizontalList.js";
+import { Icon as q } from "./Icon/Icon.js";
+import { IconButton as K } from "./IconButton/IconButton.js";
+import { InfoMessage as U } from "./InfoMessage/InfoMessage.js";
+import { Input as W } from "./Input/Input.js";
+import { InputField as Y } from "./InputField/InputField.js";
+import { Label as _ } from "./Label/Label.js";
+import { MenuButton as oo } from "./MenuButton/MenuButton.js";
+import { MenuLink as to } from "./MenuLink/MenuLink.js";
+import { MetaDataList as po } from "./MetaDataList/MetaDataList.js";
+import { ModalDialog as mo } from "./ModalDialog/ModalDialog.js";
+import { M as io } from "../MultiSelect-Ckf3uGw5.js";
+import { OverlayCloseButton as no } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { Periods as co } from "./Periods/Periods.js";
+import { PeriodSelector as so } from "./PeriodSelector/PeriodSelector.js";
+import { ProgrammeCard as So } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as ko } from "./RadioButton/RadioButton.js";
+import { Repeater as Mo } from "./Repeater/Repeater.js";
+import { SectionNotification as Lo } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as Io } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as ho, useSelect as Ao } from "./SelectListbox/SelectProvider.js";
+import { Spinner as yo } from "./Spinner/Spinner.js";
+import { StatusPill as vo } from "./StatusPill/StatusPill.js";
+import { Tooltip as Go } from "./Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as ActionList,
-  x as AppStatusBar,
+  m as AppStatusBar,
   i as Attention,
   n as Backdrop,
   c as Button,
   d as ButtonGroup,
   B as Card,
-  M as Checkbox,
-  L as CheckboxTree,
-  k as Drawer,
-  D as EmptyStateDataDisplay,
-  A as FeedbackBox,
-  g as FieldHint,
-  R as Fieldset,
-  v as FormField,
-  G as GridRow,
-  T as HorizontalList,
-  E as Icon,
-  O as IconButton,
-  q as InfoMessage,
-  K as Input,
-  U as InputField,
-  W as Label,
-  Y as MenuButton,
-  _ as MenuLink,
-  oo as MetaDataList,
-  to as ModalDialog,
-  po as MultiSelect,
-  xo as OverlayCloseButton,
-  io as Periods,
-  no as ProgrammeCard,
-  co as RadioButton,
-  so as Repeater,
-  So as SectionNotification,
-  Fo as SelectListbox,
-  bo as SelectProvider,
-  Do as Spinner,
-  Ao as StatusPill,
-  go as Tooltip,
-  ko as useSelect
+  b as Checkbox,
+  C as CheckboxButton,
+  F as CheckboxButtonBar,
+  D as CheckboxTree,
+  P as Drawer,
+  A as EmptyStateDataDisplay,
+  y as FeedbackBox,
+  v as FieldHint,
+  G as Fieldset,
+  T as FormField,
+  E as GridRow,
+  O as HorizontalList,
+  q as Icon,
+  K as IconButton,
+  U as InfoMessage,
+  W as Input,
+  Y as InputField,
+  _ as Label,
+  oo as MenuButton,
+  to as MenuLink,
+  po as MetaDataList,
+  mo as ModalDialog,
+  io as MultiSelect,
+  no as OverlayCloseButton,
+  so as PeriodSelector,
+  co as Periods,
+  So as ProgrammeCard,
+  ko as RadioButton,
+  Mo as Repeater,
+  Lo as SectionNotification,
+  Io as SelectListbox,
+  ho as SelectProvider,
+  yo as Spinner,
+  vo as StatusPill,
+  Go as Tooltip,
+  Ao 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}