@uva-glass/component-library 1.48.0 → 1.49.0

package/dist/components/InputField/InputField.stories.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
-import { fn as i } from "../../index-MQ0yPLdl.js";
-import { InputField as l } from "./InputField.js";
+import { fn as l } from "../../index-MQ0yPLdl.js";
+import { InputField as a } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
 import { Icon as f } from "../Icon/Icon.js";
 import "@react-aria/button";
@@ -26,7 +26,7 @@ const C = `
   return { ...t, variant: e.toString() };
 }, z = {
   title: "Atoms/InputField",
-  component: l,
+  component: a,
   argTypes: {
     variant: {
       options: ["large"],
@@ -46,16 +46,17 @@ const C = `
     }
   },
   parameters: {
+    inspectComponent: a,
     codeString: C
   }
-}, a = (t) => {
-  const [e, n] = d(""), p = g(null), s = (c) => {
-    n(c.target.value), i()("handleChange");
+}, o = (t) => {
+  const [e, i] = d(""), p = g(null), s = (c) => {
+    i(c.target.value), l()("handleChange");
   }, m = () => {
-    n(""), i()("handleClear");
+    i(""), l()("handleClear");
   };
   return /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
-    l,
+    a,
     {
       ...h(t),
       value: e,
@@ -64,22 +65,22 @@ const C = `
       ref: p
     }
   ) });
-}, o = {
+}, n = {
   type: "text",
   variant: void 0,
   id: "4f9ca77d"
-}, v = a.bind({});
+}, v = o.bind({});
 v.args = {
-  ...o
+  ...n
 };
-const b = a.bind({});
+const b = o.bind({});
 b.args = {
-  ...o,
+  ...n,
   clearTrigger: "Clear"
 };
-const y = a.bind({});
+const y = o.bind({});
 y.args = {
-  ...o,
+  ...n,
   clearTrigger: /* @__PURE__ */ r(f, { name: "Cross" })
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n  value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAL;AAAA,EACF;AACF,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
+{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n  value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: InputField,\n    codeString: codeString,\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EACF;AACF,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}

package/dist/components/Label/Label.d.ts

@@ -1,6 +1,11 @@
 import { LabelHTMLAttributes } from 'react';
 export interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {
+    /** The id of the element for which the label is intended. */
     htmlFor: string;
+    /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */
     noFontWeight?: boolean;
+    /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
+    required?: boolean;
 }
-export declare const Label: ({ children, htmlFor, noFontWeight, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+/** Represents a component that renders a label for an input element. */
+export declare const Label: ({ children, htmlFor, noFontWeight, required, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Label/Label.js

@@ -1,20 +1,22 @@
 import { jsx as b } from "react/jsx-runtime";
-import { c as o } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Label.css';const n = "_label_1b4r9_1", l = {
+import { c as r } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Label.css';const n = "_label_ok9qo_1", e = {
   label: n,
-  "label--unset-font-weight": "_label--unset-font-weight_1b4r9_6"
-}, _ = ({ children: e, htmlFor: t, noFontWeight: s, ...a }) => /* @__PURE__ */ b(
+  "label--required": "_label--required_ok9qo_6",
+  "label--unset-font-weight": "_label--unset-font-weight_ok9qo_14"
+}, c = ({ children: l, htmlFor: o, noFontWeight: a, required: t = !1, ...s }) => /* @__PURE__ */ b(
   "label",
   {
-    ...a,
-    htmlFor: t,
-    className: o(l.label, {
-      [l["label--unset-font-weight"]]: s
+    ...s,
+    htmlFor: o,
+    className: r(e.label, {
+      [e["label--unset-font-weight"]]: a,
+      [e["label--required"]]: t
     }),
-    children: e
+    children: l
   }
 );
 export {
-  _ as Label
+  c as Label
 };
 //# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n  htmlFor: string;\n  noFontWeight?: boolean;\n}\n\nexport const Label = ({ children, htmlFor, noFontWeight, ...restProps }: LabelProps) => (\n  <label\n    {...restProps}\n    htmlFor={htmlFor}\n    className={clsx(styles['label'], {\n      [styles['label--unset-font-weight']]: noFontWeight,\n    })}\n  >\n    {children}\n  </label>\n);\n"],"names":["Label","children","htmlFor","noFontWeight","restProps","jsx","clsx","styles"],"mappings":";;;;;GAWaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,cAAAC,GAAc,GAAGC,QAC1D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAAAF;AAAA,IACA,WAAWI,EAAKC,EAAO,OAAU;AAAA,MAC/B,CAACA,EAAO,0BAA0B,CAAC,GAAGJ;AAAA,IAAA,CACvC;AAAA,IAEA,UAAAF;AAAA,EAAA;AACH;"}
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n  /** The id of the element for which the label is intended. */\n  htmlFor: string;\n  /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n  noFontWeight?: boolean;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n}\n\n/** Represents a component that renders a label for an input element. */\nexport const Label = ({ children, htmlFor, noFontWeight, required = false, ...restProps }: LabelProps) => (\n  <label\n    {...restProps}\n    htmlFor={htmlFor}\n    className={clsx(styles['label'], {\n      [styles['label--unset-font-weight']]: noFontWeight,\n      [styles['label--required']]: required,\n    })}\n  >\n    {children}\n  </label>\n);\n"],"names":["Label","children","htmlFor","noFontWeight","required","restProps","jsx","clsx","styles"],"mappings":";;;;;;GAgBaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,cAAAC,GAAc,UAAAC,IAAW,IAAO,GAAGC,EAAA,MAC5E,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAAAH;AAAA,IACA,WAAWK,EAAKC,EAAO,OAAU;AAAA,MAC/B,CAACA,EAAO,0BAA0B,CAAC,GAAGL;AAAA,MACtC,CAACK,EAAO,iBAAiB,CAAC,GAAGJ;AAAA,IAAA,CAC9B;AAAA,IAEA,UAAAH;AAAA,EAAA;AACH;"}

package/dist/components/Label/Label.stories.js

@@ -15,6 +15,7 @@ const a = `
     }
   },
   parameters: {
+    inspectComponent: t,
     codeString: a
   }
 }, e = (l) => /* @__PURE__ */ r(t, { ...l }), o = {

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

@@ -1 +1 @@
-{"version":3,"file":"Label.stories.js","sources":["../../../src/components/Label/Label.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { LabelProps } from './Label';\n\nimport { Label } from './Label';\n\nconst codeString = `\n// Has all LabelHTMLAttributes props available except \"className\" and \"style\" \n <Label htmlFor={htmlFor}>{children}</Label>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Label',\n  component: Label,\n  argTypes: {\n    htmlFor: {\n      control: 'text',\n    },\n    children: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<LabelProps>;\n\nconst Template: StoryFn<LabelProps> = (args) => <Label {...args} />;\n\nconst defaultArgs: Partial<LabelProps> = {\n  children: 'Lorem Ipsum',\n  htmlFor: 'bd79f7ec',\n};\n\nexport const LabelExample = Template.bind({});\nLabelExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithNoFontWeight = Template.bind({});\nWithNoFontWeight.args = {\n  ...defaultArgs,\n  noFontWeight: true,\n};\n"],"names":["codeString","Label_stories","Label","Template","args","jsx","defaultArgs","LabelExample","WithNoFontWeight"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAgC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAO,GAAGE,EAAM,CAAA,GAE3DE,IAAmC;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAeJ,EAAS,KAAK,EAAE;AAC5CI,EAAa,OAAO;AAAA,EAClB,GAAGD;AACL;AAEO,MAAME,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,GAAGF;AAAA,EACH,cAAc;AAChB;"}
+{"version":3,"file":"Label.stories.js","sources":["../../../src/components/Label/Label.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { LabelProps } from './Label';\n\nimport { Label } from './Label';\n\nconst codeString = `\n// Has all LabelHTMLAttributes props available except \"className\" and \"style\" \n <Label htmlFor={htmlFor}>{children}</Label>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Label',\n  component: Label,\n  argTypes: {\n    htmlFor: {\n      control: 'text',\n    },\n    children: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: Label,\n    codeString: codeString,\n  },\n} as Meta<LabelProps>;\n\nconst Template: StoryFn<LabelProps> = (args) => <Label {...args} />;\n\nconst defaultArgs: Partial<LabelProps> = {\n  children: 'Lorem Ipsum',\n  htmlFor: 'bd79f7ec',\n};\n\nexport const LabelExample = Template.bind({});\nLabelExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithNoFontWeight = Template.bind({});\nWithNoFontWeight.args = {\n  ...defaultArgs,\n  noFontWeight: true,\n};\n"],"names":["codeString","Label_stories","Label","Template","args","jsx","defaultArgs","LabelExample","WithNoFontWeight"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAgC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAO,GAAGE,EAAM,CAAA,GAE3DE,IAAmC;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAeJ,EAAS,KAAK,EAAE;AAC5CI,EAAa,OAAO;AAAA,EAClB,GAAGD;AACL;AAEO,MAAME,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,GAAGF;AAAA,EACH,cAAc;AAChB;"}

package/dist/components/MenuButton/MenuButton.d.ts

@@ -4,8 +4,12 @@ import { MouseEvent, RefObject } from 'react';
 import { UIButtonVariant } from 'types/UserInterface';
 export interface MenuButtonProps extends AriaButtonProps<'button'> {
     buttonRef: RefObject<HTMLButtonElement>;
+    /** The variant of the button. */
     variant: UIButtonVariant;
+    /** The icon to show. */
     iconName?: IconProps['name'];
+    /** The callback function that is invoked when the button is clicked. */
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
+/** Represents a button that is used to open a menu. */
 export declare function MenuButton({ buttonRef, variant, iconName, children, ...restProps }: MenuButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MenuButton/MenuButton.js

@@ -1,8 +1,8 @@
 import { jsxs as e, jsx as p } from "react/jsx-runtime";
 import { useButton as c } from "@react-aria/button";
 import { c as f } from "../../clsx-OuTLNxxd.js";
-import { s as r } from "../../Button.module-Gr3KvBvb.js";
 import { Icon as i } from "../Icon/Icon.js";
+import { s as r } from "../../Button.module-Gr3KvBvb.js";
 function B({ buttonRef: t, variant: s, iconName: o, children: n, ...m }) {
   const { buttonProps: u } = c(m, t);
   return /* @__PURE__ */ e("button", { ...u, ref: t, className: f(r.button, r[`button--${s}`]), children: [

package/dist/components/MenuButton/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import { useButton } from '@react-aria/button';\nimport { clsx } from 'clsx';\n\nimport type { AriaButtonProps } from '@react-aria/button';\nimport type { IconProps } from 'components/Icon';\nimport type { MouseEvent, RefObject } from 'react';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from 'components/Button/Button.module.css';\nimport { Icon } from 'components/Icon';\n\nexport interface MenuButtonProps extends AriaButtonProps<'button'> {\n  buttonRef: RefObject<HTMLButtonElement>;\n  variant: UIButtonVariant;\n  iconName?: IconProps['name'];\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport function MenuButton({ buttonRef, variant, iconName, children, ...restProps }: MenuButtonProps) {\n  const { buttonProps } = useButton(restProps, buttonRef);\n\n  return (\n    <button {...buttonProps} ref={buttonRef} className={clsx(styles['button'], styles[`button--${variant}`])}>\n      {children}\n      {iconName && <Icon name={iconName} />}\n    </button>\n  );\n}\n"],"names":["MenuButton","buttonRef","variant","iconName","children","restProps","buttonProps","useButton","clsx","styles","jsx","Icon"],"mappings":";;;;;AAkBgB,SAAAA,EAAW,EAAE,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,KAA8B;AACpG,QAAM,EAAE,aAAAC,EAAgB,IAAAC,EAAUF,GAAWJ,CAAS;AAEtD,2BACG,UAAQ,EAAA,GAAGK,GAAa,KAAKL,GAAW,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWP,CAAO,EAAE,CAAC,GACpG,UAAA;AAAA,IAAAE;AAAA,IACAD,KAAY,gBAAAO,EAACC,GAAK,EAAA,MAAMR,EAAU,CAAA;AAAA,EACrC,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"MenuButton.js","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import { useButton } from '@react-aria/button';\nimport { clsx } from 'clsx';\n\nimport type { AriaButtonProps } from '@react-aria/button';\nimport type { IconProps } from 'components/Icon';\nimport type { MouseEvent, RefObject } from 'react';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/Button/Button.module.css';\n\nexport interface MenuButtonProps extends AriaButtonProps<'button'> {\n  buttonRef: RefObject<HTMLButtonElement>;\n  /** The variant of the button. */\n  variant: UIButtonVariant;\n  /** The icon to show. */\n  iconName?: IconProps['name'];\n  /** The callback function that is invoked when the button is clicked. */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/** Represents a button that is used to open a menu. */\nexport function MenuButton({ buttonRef, variant, iconName, children, ...restProps }: MenuButtonProps) {\n  const { buttonProps } = useButton(restProps, buttonRef);\n\n  return (\n    <button {...buttonProps} ref={buttonRef} className={clsx(styles['button'], styles[`button--${variant}`])}>\n      {children}\n      {iconName && <Icon name={iconName} />}\n    </button>\n  );\n}\n"],"names":["MenuButton","buttonRef","variant","iconName","children","restProps","buttonProps","useButton","clsx","styles","jsx","Icon"],"mappings":";;;;;AAsBgB,SAAAA,EAAW,EAAE,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,KAA8B;AACpG,QAAM,EAAE,aAAAC,EAAgB,IAAAC,EAAUF,GAAWJ,CAAS;AAEtD,2BACG,UAAQ,EAAA,GAAGK,GAAa,KAAKL,GAAW,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWP,CAAO,EAAE,CAAC,GACpG,UAAA;AAAA,IAAAE;AAAA,IACAD,KAAY,gBAAAO,EAACC,GAAK,EAAA,MAAMR,EAAU,CAAA;AAAA,EACrC,EAAA,CAAA;AAEJ;"}

package/dist/components/MenuButton/MenuButton.stories.js

@@ -1,12 +1,12 @@
-import { jsxs as l, Fragment as s, jsx as n } from "react/jsx-runtime";
+import { jsxs as s, Fragment as l, jsx as n } from "react/jsx-runtime";
 import { fn as c } from "../../index-MQ0yPLdl.js";
-import { MenuButton as a } from "./MenuButton.js";
+import { MenuButton as e } from "./MenuButton.js";
 const d = `
 // Has all LabelHTMLAttributes props available except "className" and "style" 
  <MenuButton variant={variant} onClick={onClickFunction} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={buttonRef}>{children}</MenuButton>
 `, b = {
   title: "Atoms/MenuButton",
-  component: a,
+  component: e,
   argTypes: {
     variant: {
       options: ["primary", "secondary", "destructive-primary", "destructive-secondary", "blank", "blank-icon"],
@@ -14,23 +14,24 @@ const d = `
     }
   },
   parameters: {
+    inspectComponent: e,
     codeString: d
   }
-}, r = (o) => /* @__PURE__ */ n(a, { ...o }), i = {
+}, r = (a) => /* @__PURE__ */ n(e, { ...a }), o = {
   variant: "primary",
   onClick: c()
 }, p = r.bind({});
 p.args = {
   children: "Click me!",
-  ...i
+  ...o
 };
-const e = r.bind({});
-e.args = {
-  ...i,
+const t = r.bind({});
+t.args = {
+  ...o,
   iconName: "EllipsisVertical"
 };
-e.argTypes = {
-  ...e.argTypes,
+t.argTypes = {
+  ...t.argTypes,
   children: {
     table: {
       disable: !0
@@ -38,16 +39,16 @@ e.argTypes = {
     }
   }
 };
-const t = r.bind({});
-t.args = {
-  ...i,
-  children: /* @__PURE__ */ l(s, { children: [
+const i = r.bind({});
+i.args = {
+  ...o,
+  children: /* @__PURE__ */ s(l, { children: [
     /* @__PURE__ */ n("div", { children: "Child 1" }),
     /* @__PURE__ */ n("div", { children: "Child 2" })
   ] })
 };
-t.argTypes = {
-  ...t.argTypes,
+i.argTypes = {
+  ...i.argTypes,
   children: {
     table: {
       disable: !0
@@ -57,8 +58,8 @@ t.argTypes = {
 };
 export {
   p as MenuButtonExample,
-  e as WithIconChildren,
-  t as WithMultipleChildren,
+  t as WithIconChildren,
+  i as WithMultipleChildren,
   b as default
 };
 //# sourceMappingURL=MenuButton.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.stories.js","sources":["../../../src/components/MenuButton/MenuButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MenuButtonProps } from './MenuButton';\n\nimport { MenuButton } from './MenuButton';\n\nconst codeString = `\n// Has all LabelHTMLAttributes props available except \"className\" and \"style\" \n <MenuButton variant={variant} onClick={onClickFunction} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={buttonRef}>{children}</MenuButton>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/MenuButton',\n  component: MenuButton,\n  argTypes: {\n    variant: {\n      options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n      control: { type: 'radio' },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<MenuButtonProps>;\n\nconst Template: StoryFn<MenuButtonProps> = (args) => <MenuButton {...args} />;\n\nconst defaultArgs: Partial<MenuButtonProps> = {\n  variant: 'primary',\n  onClick: fn(),\n};\n\nexport const MenuButtonExample = Template.bind({});\nMenuButtonExample.args = {\n  children: 'Click me!',\n  ...defaultArgs,\n};\n\nexport const WithIconChildren = Template.bind({});\nWithIconChildren.args = {\n  ...defaultArgs,\n  iconName: 'EllipsisVertical',\n};\n\nWithIconChildren.argTypes = {\n  ...WithIconChildren.argTypes,\n  children: {\n    table: {\n      disable: true, // Disable children controls for this specific story\n    },\n  },\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n  ...defaultArgs,\n  children: (\n    <>\n      <div>Child 1</div>\n      <div>Child 2</div>\n    </>\n  ),\n};\n\nWithMultipleChildren.argTypes = {\n  ...WithMultipleChildren.argTypes,\n  children: {\n    table: {\n      disable: true, // Disable children controls for this specific story\n    },\n  },\n};\n"],"names":["codeString","MenuButton_stories","MenuButton","Template","args","jsx","defaultArgs","fn","MenuButtonExample","WithIconChildren","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAqC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAY,GAAGE,EAAM,CAAA,GAErEE,IAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,SAASC,EAAG;AACd,GAEaC,IAAoBL,EAAS,KAAK,EAAE;AACjDK,EAAkB,OAAO;AAAA,EACvB,UAAU;AAAA,EACV,GAAGF;AACL;AAEO,MAAMG,IAAmBN,EAAS,KAAK,EAAE;AAChDM,EAAiB,OAAO;AAAA,EACtB,GAAGH;AAAA,EACH,UAAU;AACZ;AAEAG,EAAiB,WAAW;AAAA,EAC1B,GAAGA,EAAiB;AAAA,EACpB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IACX;AAAA,EACF;AACF;AAEO,MAAMC,IAAuBP,EAAS,KAAK,EAAE;AACpDO,EAAqB,OAAO;AAAA,EAC1B,GAAGJ;AAAA,EACH,UAEI,gBAAAK,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAP,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,IACZ,gBAAAA,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,EAAA,GACd;AAEJ;AAEAK,EAAqB,WAAW;AAAA,EAC9B,GAAGA,EAAqB;AAAA,EACxB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IACX;AAAA,EACF;AACF;"}
+{"version":3,"file":"MenuButton.stories.js","sources":["../../../src/components/MenuButton/MenuButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MenuButtonProps } from './MenuButton';\n\nimport { MenuButton } from './MenuButton';\n\nconst codeString = `\n// Has all LabelHTMLAttributes props available except \"className\" and \"style\" \n <MenuButton variant={variant} onClick={onClickFunction} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={buttonRef}>{children}</MenuButton>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/MenuButton',\n  component: MenuButton,\n  argTypes: {\n    variant: {\n      options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n      control: { type: 'radio' },\n    },\n  },\n  parameters: {\n    inspectComponent: MenuButton,\n    codeString: codeString,\n  },\n} as Meta<MenuButtonProps>;\n\nconst Template: StoryFn<MenuButtonProps> = (args) => <MenuButton {...args} />;\n\nconst defaultArgs: Partial<MenuButtonProps> = {\n  variant: 'primary',\n  onClick: fn(),\n};\n\nexport const MenuButtonExample = Template.bind({});\nMenuButtonExample.args = {\n  children: 'Click me!',\n  ...defaultArgs,\n};\n\nexport const WithIconChildren = Template.bind({});\nWithIconChildren.args = {\n  ...defaultArgs,\n  iconName: 'EllipsisVertical',\n};\n\nWithIconChildren.argTypes = {\n  ...WithIconChildren.argTypes,\n  children: {\n    table: {\n      disable: true, // Disable children controls for this specific story\n    },\n  },\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n  ...defaultArgs,\n  children: (\n    <>\n      <div>Child 1</div>\n      <div>Child 2</div>\n    </>\n  ),\n};\n\nWithMultipleChildren.argTypes = {\n  ...WithMultipleChildren.argTypes,\n  children: {\n    table: {\n      disable: true, // Disable children controls for this specific story\n    },\n  },\n};\n"],"names":["codeString","MenuButton_stories","MenuButton","Template","args","jsx","defaultArgs","fn","MenuButtonExample","WithIconChildren","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAqC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAY,GAAGE,EAAM,CAAA,GAErEE,IAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,SAASC,EAAG;AACd,GAEaC,IAAoBL,EAAS,KAAK,EAAE;AACjDK,EAAkB,OAAO;AAAA,EACvB,UAAU;AAAA,EACV,GAAGF;AACL;AAEO,MAAMG,IAAmBN,EAAS,KAAK,EAAE;AAChDM,EAAiB,OAAO;AAAA,EACtB,GAAGH;AAAA,EACH,UAAU;AACZ;AAEAG,EAAiB,WAAW;AAAA,EAC1B,GAAGA,EAAiB;AAAA,EACpB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IACX;AAAA,EACF;AACF;AAEO,MAAMC,IAAuBP,EAAS,KAAK,EAAE;AACpDO,EAAqB,OAAO;AAAA,EAC1B,GAAGJ;AAAA,EACH,UAEI,gBAAAK,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAP,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,IACZ,gBAAAA,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,EAAA,GACd;AAEJ;AAEAK,EAAqB,WAAW;AAAA,EAC9B,GAAGA,EAAqB;AAAA,EACxB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IACX;AAAA,EACF;AACF;"}

package/dist/components/MenuLink/MenuLink.d.ts

@@ -1,2 +1,3 @@
 import { NavLinkProps } from 'react-router-dom';
+/** Represents a component for a [NavLink](https://reactrouter.com/en/main/components/nav-link) with styling. */
 export declare const MenuLink: (props: Omit<NavLinkProps, "style">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MenuLink/MenuLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuLink.js","sources":["../../../src/components/MenuLink/MenuLink.tsx"],"sourcesContent":["import classNames from 'clsx';\nimport { NavLink } from 'react-router-dom';\n\nimport type { NavLinkProps } from 'react-router-dom';\n\nimport styles from './MenuLink.module.css';\n\n// Omit style so it cannot be accidentally used\nexport const MenuLink = (props: Omit<NavLinkProps, 'style'>) => (\n  <NavLink\n    {...props}\n    className={({ isActive }) => classNames(styles['menu-link'], { [styles['menu-link--active']]: isActive })}\n  />\n);\n"],"names":["MenuLink","props","jsx","NavLink","isActive","classNames","styles"],"mappings":";;;;;;GAQaA,IAAW,CAACC,MACvB,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,WAAW,CAAC,EAAE,UAAAG,EAAS,MAAMC,EAAWC,EAAO,WAAW,GAAG,EAAE,CAACA,EAAO,mBAAmB,CAAC,GAAGF,GAAU;AAAA,EAAA;AAC1G;"}
+{"version":3,"file":"MenuLink.js","sources":["../../../src/components/MenuLink/MenuLink.tsx"],"sourcesContent":["import classNames from 'clsx';\nimport { NavLink } from 'react-router-dom';\n\nimport type { NavLinkProps } from 'react-router-dom';\n\nimport styles from './MenuLink.module.css';\n\n/** Represents a component for a [NavLink](https://reactrouter.com/en/main/components/nav-link) with styling. */\n// Omit style so it cannot be accidentally used\nexport const MenuLink = (props: Omit<NavLinkProps, 'style'>) => (\n  <NavLink\n    {...props}\n    className={({ isActive }) => classNames(styles['menu-link'], { [styles['menu-link--active']]: isActive })}\n  />\n);\n"],"names":["MenuLink","props","jsx","NavLink","isActive","classNames","styles"],"mappings":";;;;;;GASaA,IAAW,CAACC,MACvB,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,WAAW,CAAC,EAAE,UAAAG,EAAS,MAAMC,EAAWC,EAAO,WAAW,GAAG,EAAE,CAACA,EAAO,mBAAmB,CAAC,GAAGF,GAAU;AAAA,EAAA;AAC1G;"}

package/dist/components/MenuLink/MenuLink.stories.js

@@ -1,20 +1,21 @@
 import { jsx as e } from "react/jsx-runtime";
 import { MemoryRouter as o } from "react-router-dom";
-import { MenuLink as i } from "./MenuLink.js";
+import { MenuLink as t } from "./MenuLink.js";
 import '../../assets/MenuLink2.css';const r = `
 // Can only be used wrapped in a 'react-router-dom' <MemoryRouter />
  <MenuLink to={linkUrl}>{children}</MenuLink>
 `, s = {
   title: "Atoms/MenuLink",
-  component: i,
+  component: t,
   parameters: {
+    inspectComponent: t,
     codeString: r
   }
-}, t = [
+}, i = [
   { to: "/menu-link-1", title: "Menu Link One" },
   { to: "/menu-link-2", title: "Menu Link Two" },
   { to: "/menu-link-3", title: "Menu Link Three" }
-], m = () => /* @__PURE__ */ e(o, { initialEntries: t.map((n) => n.to), initialIndex: 0, children: /* @__PURE__ */ e("nav", { className: "navbar", children: t.map((n) => /* @__PURE__ */ e(i, { to: n.to, children: n.title }, n.to)) }) }), c = m.bind({});
+], m = () => /* @__PURE__ */ e(o, { initialEntries: i.map((n) => n.to), initialIndex: 0, children: /* @__PURE__ */ e("nav", { className: "navbar", children: i.map((n) => /* @__PURE__ */ e(t, { to: n.to, children: n.title }, n.to)) }) }), c = m.bind({});
 export {
   c as MenuLinkExample,
   s as default

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

@@ -1 +1 @@
-{"version":3,"file":"MenuLink.stories.js","sources":["../../../src/components/MenuLink/MenuLink.stories.tsx"],"sourcesContent":["import { MemoryRouter, type NavLinkProps } from 'react-router-dom';\n\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { MenuLink } from './MenuLink';\n\nimport './MenuLink.stories.css';\n\nconst codeString = `\n// Can only be used wrapped in a 'react-router-dom' <MemoryRouter />\n <MenuLink to={linkUrl}>{children}</MenuLink>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/MenuLink',\n  component: MenuLink,\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<Omit<NavLinkProps, 'style'>>;\n\nconst menuLinks = [\n  { to: '/menu-link-1', title: 'Menu Link One' },\n  { to: '/menu-link-2', title: 'Menu Link Two' },\n  { to: '/menu-link-3', title: 'Menu Link Three' },\n];\n\nconst Template: StoryFn<Omit<NavLinkProps, 'style'>> = () => {\n  return (\n    <MemoryRouter initialEntries={menuLinks.map((link) => link.to)} initialIndex={0}>\n      <nav className=\"navbar\">\n        {menuLinks.map((link) => (\n          <MenuLink key={link.to} to={link.to}>\n            {link.title}\n          </MenuLink>\n        ))}\n      </nav>\n    </MemoryRouter>\n  );\n};\n\nexport const MenuLinkExample = Template.bind({});\n"],"names":["codeString","MenuLink_stories","MenuLink","menuLinks","Template","jsx","MemoryRouter","link","MenuLinkExample"],"mappings":";;;AAQA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAY;AAAA,EAChB,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,kBAAkB;AACjD,GAEMC,IAAiD,MAElD,gBAAAC,EAAAC,GAAA,EAAa,gBAAgBH,EAAU,IAAI,CAACI,MAASA,EAAK,EAAE,GAAG,cAAc,GAC5E,4BAAC,OAAI,EAAA,WAAU,UACZ,UAAAJ,EAAU,IAAI,CAACI,MACd,gBAAAF,EAACH,KAAuB,IAAIK,EAAK,IAC9B,UAAAA,EAAK,SADOA,EAAK,EAEpB,CACD,GACH,EACF,CAAA,GAISC,IAAkBJ,EAAS,KAAK,CAAE,CAAA;"}
+{"version":3,"file":"MenuLink.stories.js","sources":["../../../src/components/MenuLink/MenuLink.stories.tsx"],"sourcesContent":["import { MemoryRouter, type NavLinkProps } from 'react-router-dom';\n\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { MenuLink } from './MenuLink';\n\nimport './MenuLink.stories.css';\n\nconst codeString = `\n// Can only be used wrapped in a 'react-router-dom' <MemoryRouter />\n <MenuLink to={linkUrl}>{children}</MenuLink>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/MenuLink',\n  component: MenuLink,\n  parameters: {\n    inspectComponent: MenuLink,\n    codeString: codeString,\n  },\n} as Meta<Omit<NavLinkProps, 'style'>>;\n\nconst menuLinks = [\n  { to: '/menu-link-1', title: 'Menu Link One' },\n  { to: '/menu-link-2', title: 'Menu Link Two' },\n  { to: '/menu-link-3', title: 'Menu Link Three' },\n];\n\nconst Template: StoryFn<Omit<NavLinkProps, 'style'>> = () => {\n  return (\n    <MemoryRouter initialEntries={menuLinks.map((link) => link.to)} initialIndex={0}>\n      <nav className=\"navbar\">\n        {menuLinks.map((link) => (\n          <MenuLink key={link.to} to={link.to}>\n            {link.title}\n          </MenuLink>\n        ))}\n      </nav>\n    </MemoryRouter>\n  );\n};\n\nexport const MenuLinkExample = Template.bind({});\n"],"names":["codeString","MenuLink_stories","MenuLink","menuLinks","Template","jsx","MemoryRouter","link","MenuLinkExample"],"mappings":";;;AAQA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAY;AAAA,EAChB,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,kBAAkB;AACjD,GAEMC,IAAiD,MAElD,gBAAAC,EAAAC,GAAA,EAAa,gBAAgBH,EAAU,IAAI,CAACI,MAASA,EAAK,EAAE,GAAG,cAAc,GAC5E,4BAAC,OAAI,EAAA,WAAU,UACZ,UAAAJ,EAAU,IAAI,CAACI,MACd,gBAAAF,EAACH,KAAuB,IAAIK,EAAK,IAC9B,UAAAA,EAAK,SADOA,EAAK,EAEpB,CACD,GACH,EACF,CAAA,GAISC,IAAkBJ,EAAS,KAAK,CAAE,CAAA;"}

package/dist/components/MetaDataList/MetaDataList.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 export interface MetaDataListProps {
+    /** A list of key value pairs to display. The value is be a [ReactNode](https://reactnative.dev/docs/react-node). */
     items: Record<string, ReactNode>;
 }
+/** Represents a component of a list of key value pairs. */
 export declare const MetaDataList: ({ items }: MetaDataListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MetaDataList/MetaDataList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetaDataList.js","sources":["../../../src/components/MetaDataList/MetaDataList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from './MetaDataList.module.css';\n\nexport interface MetaDataListProps {\n  items: Record<string, ReactNode>;\n}\n\nexport const MetaDataList = ({ items }: MetaDataListProps) => (\n  <dl className={styles['meta-data-list']}>\n    {Object.entries(items).map(([term, description]) => (\n      <div key={term} className={styles['meta-data-list__item']}>\n        <dt className={styles['meta-data-list__term']}>{term}</dt>\n        <dd className={styles['meta-data-list__description']}>{description}</dd>\n      </div>\n    ))}\n  </dl>\n);\n"],"names":["MetaDataList","items","jsx","styles","term","description","jsxs"],"mappings":";;;;;;GAQaA,IAAe,CAAC,EAAE,OAAAC,EAAM,MAClC,gBAAAC,EAAA,MAAA,EAAG,WAAWC,EAAO,gBAAgB,GACnC,UAAO,OAAA,QAAQF,CAAK,EAAE,IAAI,CAAC,CAACG,GAAMC,CAAW,MAC5C,gBAAAC,EAAC,OAAe,EAAA,WAAWH,EAAO,sBAAsB,GACtD,UAAA;AAAA,EAAA,gBAAAD,EAAC,MAAG,EAAA,WAAWC,EAAO,sBAAsB,GAAI,UAAKC,GAAA;AAAA,oBACpD,MAAG,EAAA,WAAWD,EAAO,6BAA6B,GAAI,UAAYE,GAAA;AAAA,EAF3D,GAAAD,CAGV,CACD,EACH,CAAA;"}
+{"version":3,"file":"MetaDataList.js","sources":["../../../src/components/MetaDataList/MetaDataList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from './MetaDataList.module.css';\n\nexport interface MetaDataListProps {\n  /** A list of key value pairs to display. The value is be a [ReactNode](https://reactnative.dev/docs/react-node). */\n  items: Record<string, ReactNode>;\n}\n\n/** Represents a component of a list of key value pairs. */\nexport const MetaDataList = ({ items }: MetaDataListProps) => (\n  <dl className={styles['meta-data-list']}>\n    {Object.entries(items).map(([term, description]) => (\n      <div key={term} className={styles['meta-data-list__item']}>\n        <dt className={styles['meta-data-list__term']}>{term}</dt>\n        <dd className={styles['meta-data-list__description']}>{description}</dd>\n      </div>\n    ))}\n  </dl>\n);\n"],"names":["MetaDataList","items","jsx","styles","term","description","jsxs"],"mappings":";;;;;;GAUaA,IAAe,CAAC,EAAE,OAAAC,EAAM,MAClC,gBAAAC,EAAA,MAAA,EAAG,WAAWC,EAAO,gBAAgB,GACnC,UAAO,OAAA,QAAQF,CAAK,EAAE,IAAI,CAAC,CAACG,GAAMC,CAAW,MAC5C,gBAAAC,EAAC,OAAe,EAAA,WAAWH,EAAO,sBAAsB,GACtD,UAAA;AAAA,EAAA,gBAAAD,EAAC,MAAG,EAAA,WAAWC,EAAO,sBAAsB,GAAI,UAAKC,GAAA;AAAA,oBACpD,MAAG,EAAA,WAAWD,EAAO,6BAA6B,GAAI,UAAYE,GAAA;AAAA,EAF3D,GAAAD,CAGV,CACD,EACH,CAAA;"}

package/dist/components/MetaDataList/MetaDataList.stories.js

@@ -1,13 +1,14 @@
-import { jsx as t } from "react/jsx-runtime";
-import { MetaDataList as e } from "./MetaDataList.js";
+import { jsx as e } from "react/jsx-runtime";
+import { MetaDataList as t } from "./MetaDataList.js";
 import { Container as o } from "../../storyComponents/Container/Container.js";
 const i = "<MetaDataList items={items} />", c = {
   title: "Atoms/MetaDataList",
-  component: e,
+  component: t,
   parameters: {
+    inspectComponent: t,
     codeString: i
   }
-}, s = (a) => /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(e, { ...a }) }), m = s.bind({});
+}, s = (a) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(t, { ...a }) }), m = s.bind({});
 m.args = {
   items: {
     "item one": "foo",

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

@@ -1 +1 @@
-{"version":3,"file":"MetaDataList.stories.js","sources":["../../../src/components/MetaDataList/MetaDataList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { MetaDataListProps } from './MetaDataList';\n\nimport { MetaDataList } from './MetaDataList';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<MetaDataList items={items} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/MetaDataList',\n  component: MetaDataList,\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<MetaDataListProps>;\n\nconst Template: StoryFn<MetaDataListProps> = (args) => (\n  <Container>\n    <MetaDataList {...args} />\n  </Container>\n);\n\nexport const MetaDataListExample = Template.bind({});\nMetaDataListExample.args = {\n  items: {\n    'item one': 'foo',\n    'item two': 'bar',\n    'item three': 'baz',\n  },\n};\n"],"names":["codeString","MetaDataList_stories","MetaDataList","Template","args","jsx","Container","MetaDataListExample"],"mappings":";;;AAOA,MAAMA,IAAa,kCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAC5C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,EAC1B,CAAA,GAGWG,IAAsBJ,EAAS,KAAK,EAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;"}
+{"version":3,"file":"MetaDataList.stories.js","sources":["../../../src/components/MetaDataList/MetaDataList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { MetaDataListProps } from './MetaDataList';\n\nimport { MetaDataList } from './MetaDataList';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<MetaDataList items={items} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/MetaDataList',\n  component: MetaDataList,\n  parameters: {\n    inspectComponent: MetaDataList,\n    codeString: codeString,\n  },\n} as Meta<MetaDataListProps>;\n\nconst Template: StoryFn<MetaDataListProps> = (args) => (\n  <Container>\n    <MetaDataList {...args} />\n  </Container>\n);\n\nexport const MetaDataListExample = Template.bind({});\nMetaDataListExample.args = {\n  items: {\n    'item one': 'foo',\n    'item two': 'bar',\n    'item three': 'baz',\n  },\n};\n"],"names":["codeString","MetaDataList_stories","MetaDataList","Template","args","jsx","Container","MetaDataListExample"],"mappings":";;;AAOA,MAAMA,IAAa,kCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAC5C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,EAC1B,CAAA,GAGWG,IAAsBJ,EAAS,KAAK,EAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;"}

package/dist/components/ModalDialog/ModalDialog.d.ts

@@ -1,23 +1,42 @@
-import { AriaDialogProps } from '@react-types/dialog';
 import { FormHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { AriaDialogProps } from '@react-types/dialog';
 export interface ModalDialogProps {
+    /** The buttons of the dialog. */
     buttons?: ReactNode;
+    /** `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. */
     isDismissable?: boolean;
+    /** `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. */
     isKeyboardDismissDisabled?: boolean;
+    /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. */
     isLoading?: boolean;
+    /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. */
     spinnerAriaValueText?: string;
+    /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` */
     closeButtonAriaValueText?: string;
+    /** `true` to render the dialog opened; otherwise, `false`. The default is `false`. */
     isOpen: boolean;
+    /** `true` to disable form validation; otherwise, `false`. The default is `false`. */
     noValidate?: boolean;
+    /** The callback function that is invoked when the dialog is closed. */
     onClose?(): void;
+    /** The callback function that is invoked when the form is submitted. */
     onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];
+    /** The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. */
     role?: AriaDialogProps['role'];
+    /** The title of the dialog. */
     title?: string;
+    /** The contents of the dialog header. */
     headerContent?: ReactNode;
+    /** The variant of the dialog. */
     variant?: 'confirm' | 'dialog';
+    /** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */
     padded?: boolean;
+    /** `true` to display the dialog in a slimmer form; otherwise, `false`. The default is `false`. */
     slim?: boolean;
+    /** `true` to display the dialog in a wider form; otherwise, `false`. The default is `false`. */
     wide?: boolean;
+    /** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */
     noButtonBorder?: boolean;
 }
+/** Represents a component for a modal dialog. */
 export declare function ModalDialog(props: PropsWithChildren<ModalDialogProps>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ModalDialog/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { AriaDialogProps } from '@react-types/dialog';\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n  buttons?: ReactNode;\n  isDismissable?: boolean;\n  isKeyboardDismissDisabled?: boolean;\n  isLoading?: boolean;\n  spinnerAriaValueText?: string;\n  closeButtonAriaValueText?: string;\n  isOpen: boolean;\n  noValidate?: boolean;\n  onClose?(): void;\n  onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n  role?: AriaDialogProps['role'];\n  title?: string;\n  headerContent?: ReactNode;\n  variant?: 'confirm' | 'dialog';\n  padded?: boolean;\n  slim?: boolean;\n  wide?: boolean;\n  noButtonBorder?: boolean;\n}\n\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n  const {\n    buttons,\n    children,\n    isDismissable = true,\n    isKeyboardDismissDisabled = !isDismissable,\n    isLoading,\n    spinnerAriaValueText = 'Loading',\n    closeButtonAriaValueText = 'Close',\n    isOpen,\n    noValidate = false,\n    onClose,\n    onSubmit,\n    role = 'dialog',\n    title,\n    headerContent,\n    variant = 'dialog',\n    padded,\n    slim,\n    wide,\n    noButtonBorder = false,\n  } = props;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const formRef = useRef<HTMLFormElement>(null);\n  const [isScrollable, setIsScrollable] = useState(false);\n  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n  const { dialogProps, titleProps } = useDialog({ role }, ref);\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n    ref\n  );\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    const formElement = formRef.current;\n\n    function checkScrollable() {\n      if (formElement) {\n        const scrollHeight = formElement.scrollHeight;\n        const clientHeight = formElement.clientHeight;\n        const scrollTop = formElement.scrollTop;\n\n        setIsScrollable(scrollHeight > clientHeight);\n        setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n      }\n    }\n\n    function handleScrollAndResize() {\n      checkScrollable();\n    }\n\n    if (formElement) {\n      formElement.addEventListener('scroll', handleScrollAndResize);\n      window.addEventListener('resize', handleScrollAndResize);\n    }\n\n    const timeoutId = setTimeout(() => {\n      checkScrollable();\n    }, 0);\n\n    return () => {\n      if (formElement) {\n        formElement.removeEventListener('scroll', handleScrollAndResize);\n      }\n      window.removeEventListener('resize', handleScrollAndResize);\n      clearTimeout(timeoutId);\n    };\n  }, [isOpen, headerContent]);\n\n  function onKeyUp(event: KeyboardEvent) {\n    event.stopPropagation();\n  }\n\n  if (!isOpen) return null;\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        {isLoading ? (\n          <Spinner ariaValueText={spinnerAriaValueText} />\n        ) : (\n          <>\n            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n            <FocusScope autoFocus contain restoreFocus>\n              <div\n                {...dialogProps}\n                {...modalProps}\n                {...overlayProps}\n                className={classNames(styles['modal-dialog'], {\n                  [styles['modal-dialog--confirm']]: variant === 'confirm',\n                  [styles['modal-dialog--padded']]: padded,\n                  [styles['modal-dialog--slim']]: slim,\n                  [styles['modal-dialog--wide']]: wide,\n                })}\n                onKeyUp={onKeyUp}\n                role=\"presentation\"\n                ref={ref}\n              >\n                {(title || headerContent) && variant === 'dialog' && (\n                  <>\n                    {title && (\n                      <h1 {...titleProps} className={styles['modal-dialog__title']}>\n                        {title}\n                      </h1>\n                    )}\n                    {headerContent}\n                    {variant === 'dialog' && (\n                      <span className={styles['modal-dialog__close']}>\n                        <OverlayCloseButton\n                          aria-label={closeButtonAriaValueText}\n                          onClick={onClose}\n                          paddedModal={padded}\n                        />\n                      </span>\n                    )}\n                  </>\n                )}\n                <form\n                  className={classNames(styles['modal-dialog__content'], {\n                    [styles['modal-dialog--content-with-buttons']]: buttons,\n                  })}\n                  onSubmit={onSubmit}\n                  noValidate={noValidate}\n                  ref={formRef}\n                >\n                  <div className={classNames({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n                  {buttons && (\n                    <div\n                      className={classNames(styles['modal-dialog__buttons'], {\n                        [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n                        [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n                      })}\n                    >\n                      {buttons}\n                    </div>\n                  )}\n                </form>\n              </div>\n            </FocusScope>\n          </>\n        )}\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","slim","wide","noButtonBorder","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","classNames","styles","OverlayCloseButton"],"mappings":"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"}
+{"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\nimport type { AriaDialogProps } from '@react-types/dialog';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n  /** The buttons of the dialog. */\n  buttons?: ReactNode;\n  /** `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. */\n  isDismissable?: boolean;\n  /** `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. */\n  isKeyboardDismissDisabled?: boolean;\n  /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. */\n  isLoading?: boolean;\n  /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. */\n  spinnerAriaValueText?: string;\n  /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` */\n  closeButtonAriaValueText?: string;\n  /** `true` to render the dialog opened; otherwise, `false`. The default is `false`. */\n  isOpen: boolean;\n  /** `true` to disable form validation; otherwise, `false`. The default is `false`. */\n  noValidate?: boolean;\n  /** The callback function that is invoked when the dialog is closed. */\n  onClose?(): void;\n  /** The callback function that is invoked when the form is submitted. */\n  onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n  /** The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. */\n  role?: AriaDialogProps['role'];\n  /** The title of the dialog. */\n  title?: string;\n  /** The contents of the dialog header. */\n  headerContent?: ReactNode;\n  /** The variant of the dialog. */\n  variant?: 'confirm' | 'dialog';\n  /** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */\n  padded?: boolean;\n  /** `true` to display the dialog in a slimmer form; otherwise, `false`. The default is `false`. */\n  slim?: boolean;\n  /** `true` to display the dialog in a wider form; otherwise, `false`. The default is `false`. */\n  wide?: boolean;\n  /** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */\n  noButtonBorder?: boolean;\n}\n\n/** Represents a component for a modal dialog. */\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n  const {\n    buttons,\n    children,\n    isDismissable = true,\n    isKeyboardDismissDisabled = !isDismissable,\n    isLoading,\n    spinnerAriaValueText = 'Loading',\n    closeButtonAriaValueText = 'Close',\n    isOpen,\n    noValidate = false,\n    onClose,\n    onSubmit,\n    role = 'dialog',\n    title,\n    headerContent,\n    variant = 'dialog',\n    padded,\n    slim,\n    wide,\n    noButtonBorder = false,\n  } = props;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const formRef = useRef<HTMLFormElement>(null);\n  const [isScrollable, setIsScrollable] = useState(false);\n  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n  const { dialogProps, titleProps } = useDialog({ role }, ref);\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n    ref\n  );\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    const formElement = formRef.current;\n\n    function checkScrollable() {\n      if (formElement) {\n        const scrollHeight = formElement.scrollHeight;\n        const clientHeight = formElement.clientHeight;\n        const scrollTop = formElement.scrollTop;\n\n        setIsScrollable(scrollHeight > clientHeight);\n        setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n      }\n    }\n\n    function handleScrollAndResize() {\n      checkScrollable();\n    }\n\n    if (formElement) {\n      formElement.addEventListener('scroll', handleScrollAndResize);\n      window.addEventListener('resize', handleScrollAndResize);\n    }\n\n    const timeoutId = setTimeout(() => {\n      checkScrollable();\n    }, 0);\n\n    return () => {\n      if (formElement) {\n        formElement.removeEventListener('scroll', handleScrollAndResize);\n      }\n      window.removeEventListener('resize', handleScrollAndResize);\n      clearTimeout(timeoutId);\n    };\n  }, [isOpen, headerContent]);\n\n  function onKeyUp(event: KeyboardEvent) {\n    event.stopPropagation();\n  }\n\n  if (!isOpen) return null;\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        {isLoading ? (\n          <Spinner ariaValueText={spinnerAriaValueText} />\n        ) : (\n          <>\n            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n            <FocusScope autoFocus contain restoreFocus>\n              <div\n                {...dialogProps}\n                {...modalProps}\n                {...overlayProps}\n                className={classNames(styles['modal-dialog'], {\n                  [styles['modal-dialog--confirm']]: variant === 'confirm',\n                  [styles['modal-dialog--padded']]: padded,\n                  [styles['modal-dialog--slim']]: slim,\n                  [styles['modal-dialog--wide']]: wide,\n                })}\n                onKeyUp={onKeyUp}\n                role=\"presentation\"\n                ref={ref}\n              >\n                {(title || headerContent) && variant === 'dialog' && (\n                  <>\n                    {title && (\n                      <h1 {...titleProps} className={styles['modal-dialog__title']}>\n                        {title}\n                      </h1>\n                    )}\n                    {headerContent}\n                    {variant === 'dialog' && (\n                      <span className={styles['modal-dialog__close']}>\n                        <OverlayCloseButton\n                          aria-label={closeButtonAriaValueText}\n                          onClick={onClose}\n                          paddedModal={padded}\n                        />\n                      </span>\n                    )}\n                  </>\n                )}\n                <form\n                  className={classNames(styles['modal-dialog__content'], {\n                    [styles['modal-dialog--content-with-buttons']]: buttons,\n                  })}\n                  onSubmit={onSubmit}\n                  noValidate={noValidate}\n                  ref={formRef}\n                >\n                  <div className={classNames({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n                  {buttons && (\n                    <div\n                      className={classNames(styles['modal-dialog__buttons'], {\n                        [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n                        [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n                      })}\n                    >\n                      {buttons}\n                    </div>\n                  )}\n                </form>\n              </div>\n            </FocusScope>\n          </>\n        )}\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","slim","wide","noButtonBorder","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","classNames","styles","OverlayCloseButton"],"mappings":"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"}

package/dist/components/ModalDialog/ModalDialog.stories.js

@@ -1,8 +1,8 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { ModalProvider as n } from "@react-aria/overlays";
+import { ModalProvider as l } from "@react-aria/overlays";
 import { fn as i } from "../../index-MQ0yPLdl.js";
-import { ModalDialog as o } from "./ModalDialog.js";
-import { Button as l } from "../Button/Button.js";
+import { ModalDialog as t } from "./ModalDialog.js";
+import { Button as n } from "../Button/Button.js";
 import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
 import { FormField as r } from "../FormField/FormField.js";
 import { InputField as d } from "../InputField/InputField.js";
@@ -14,7 +14,7 @@ const p = `
     onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>
 `, F = {
   title: "Molecules/ModalDialog",
-  component: o,
+  component: t,
   argTypes: {
     isOpen: {
       table: {
@@ -45,9 +45,10 @@ const p = `
     }
   },
   parameters: {
+    inspectComponent: t,
     codeString: p
   }
-}, u = (t) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(o, { ...t, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
+}, u = (o) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
   /* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
   /* @__PURE__ */ e(d, { id: "text-field" })
 ] }) }) }), s = {
@@ -63,8 +64,8 @@ const p = `
   onSubmit: i(),
   onClose: i(),
   buttons: /* @__PURE__ */ a(m, { reversed: !0, children: [
-    /* @__PURE__ */ e(l, { variant: "primary", onClick: i(), children: "OK" }),
-    /* @__PURE__ */ e(l, { variant: "secondary", onClick: i(), children: "Cancel" })
+    /* @__PURE__ */ e(n, { variant: "primary", onClick: i(), children: "OK" }),
+    /* @__PURE__ */ e(n, { variant: "secondary", onClick: i(), children: "Cancel" })
   ] }),
   isOpen: !0
 }, b = u.bind({});
@@ -77,7 +78,7 @@ g.args = {
   isLoading: !0,
   spinnerAriaValueText: "Loading"
 };
-const f = (t) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(o, { ...t, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
+const f = (o) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
   /* @__PURE__ */ e("div", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla. Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod. Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae ultrices erat." }),
   /* @__PURE__ */ e("div", { children: "Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut sapien tempor, a ornare ipsum faucibus." })
 ] }) }) }), h = f.bind({});