@uva-glass/component-library 1.48.0 → 1.49.0

package/dist/components/FormField/FormField.d.ts

@@ -1,6 +1,9 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
 export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** true if a margin at the top and bottom should be added; otherwise, false. The default is false. */
     outerSpace?: boolean;
+    /** true if the label and input field should be rendered on the same row; otherwise, false. The default is false. */
     inline?: boolean;
 }
+/** Represents an element to wrap a label and input field. */
 export declare const FormField: ({ children, outerSpace, inline, ...rest }: PropsWithChildren<FormFieldProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport styles from './FormField.module.css';\n\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  outerSpace?: boolean;\n  inline?: boolean;\n}\n\nexport const FormField = ({ children, outerSpace, inline, ...rest }: PropsWithChildren<FormFieldProps>) => (\n  <div\n    className={classNames(styles['form-field'], {\n      [styles['form-field--outerspace']]: outerSpace,\n      [styles['form-field--inline']]: inline,\n    })}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n"],"names":["FormField","children","outerSpace","inline","rest","jsx","classNames","styles"],"mappings":";;;;;;GAWaA,IAAY,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAC3D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,YAAY,GAAG;AAAA,MAC1C,CAACA,EAAO,wBAAwB,CAAC,GAAGL;AAAA,MACpC,CAACK,EAAO,oBAAoB,CAAC,GAAGJ;AAAA,IAAA,CACjC;AAAA,IACA,GAAGC;AAAA,IAEH,UAAAH;AAAA,EAAA;AACH;"}
+{"version":3,"file":"FormField.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport styles from './FormField.module.css';\n\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** true if a margin at the top and bottom should be added; otherwise, false. The default is false. */\n  outerSpace?: boolean;\n  /** true if the label and input field should be rendered on the same row; otherwise, false. The default is false. */\n  inline?: boolean;\n}\n\n/** Represents an element to wrap a label and input field. */\nexport const FormField = ({ children, outerSpace, inline, ...rest }: PropsWithChildren<FormFieldProps>) => (\n  <div\n    className={classNames(styles['form-field'], {\n      [styles['form-field--outerspace']]: outerSpace,\n      [styles['form-field--inline']]: inline,\n    })}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n"],"names":["FormField","children","outerSpace","inline","rest","jsx","classNames","styles"],"mappings":";;;;;;GAcaA,IAAY,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAC3D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,YAAY,GAAG;AAAA,MAC1C,CAACA,EAAO,wBAAwB,CAAC,GAAGL;AAAA,MACpC,CAACK,EAAO,oBAAoB,CAAC,GAAGJ;AAAA,IAAA,CACjC;AAAA,IACA,GAAGC;AAAA,IAEH,UAAAH;AAAA,EAAA;AACH;"}

package/dist/components/FormField/FormField.stories.js

@@ -1,11 +1,11 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { FormField as r } from "./FormField.js";
-import { InputField as i } from "../InputField/InputField.js";
-import { Label as t } from "../Label/Label.js";
-import { Container as a } from "../../storyComponents/Container/Container.js";
-const n = "<FormField>{children}</FormField>", b = {
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { FormField as o } from "./FormField.js";
+import { InputField as t } from "../InputField/InputField.js";
+import { Label as i } from "../Label/Label.js";
+import { Container as n } from "../../storyComponents/Container/Container.js";
+const a = "<FormField>{children}</FormField>", b = {
   title: "Atoms/FormField",
-  component: r,
+  component: o,
   argTypes: {
     outerSpace: {
       control: "boolean"
@@ -15,16 +15,17 @@ const n = "<FormField>{children}</FormField>", b = {
     }
   },
   parameters: {
-    codeString: n
+    inspectComponent: o,
+    codeString: a
   }
-}, m = (l) => /* @__PURE__ */ o(a, { children: [
-  /* @__PURE__ */ o(r, { ...l, children: [
-    /* @__PURE__ */ e(t, { htmlFor: "d6aa53fd", children: "Example label 1" }),
-    /* @__PURE__ */ e(i, { id: "d6aa53fd" })
+}, m = (l) => /* @__PURE__ */ r(n, { children: [
+  /* @__PURE__ */ r(o, { ...l, children: [
+    /* @__PURE__ */ e(i, { htmlFor: "d6aa53fd", children: "Example label 1" }),
+    /* @__PURE__ */ e(t, { id: "d6aa53fd" })
   ] }),
-  /* @__PURE__ */ o(r, { ...l, children: [
-    /* @__PURE__ */ e(t, { htmlFor: "4e7a2f22", children: "Example label 2" }),
-    /* @__PURE__ */ e(i, { id: "4e7a2f22" })
+  /* @__PURE__ */ r(o, { ...l, children: [
+    /* @__PURE__ */ e(i, { htmlFor: "4e7a2f22", children: "Example label 2" }),
+    /* @__PURE__ */ e(t, { id: "4e7a2f22" })
   ] })
 ] }), d = {
   outerSpace: !1,

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.stories.js","sources":["../../../src/components/FormField/FormField.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FormFieldProps } from './FormField';\n\nimport { FormField } from './FormField';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FormField>{children}</FormField>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FormField',\n  component: FormField,\n  argTypes: {\n    outerSpace: {\n      control: 'boolean',\n    },\n    inline: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FormFieldProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FormFieldProps>> = (args) => (\n  <Container>\n    <FormField {...args}>\n      <Label htmlFor=\"d6aa53fd\">Example label 1</Label>\n      <InputField id=\"d6aa53fd\" />\n    </FormField>\n    <FormField {...args}>\n      <Label htmlFor=\"4e7a2f22\">Example label 2</Label>\n      <InputField id=\"4e7a2f22\" />\n    </FormField>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FormFieldProps>> = {\n  outerSpace: false,\n  inline: false,\n};\n\nexport const FormFieldExample = Template.bind({});\nFormFieldExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","FormField_stories","FormField","Template","args","jsxs","Container","jsx","Label","InputField","defaultArgs","FormFieldExample"],"mappings":";;;;;AAUA,MAAMA,IAAa,qCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuD,CAACC,MAC5D,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACA,gBAAAJ,EAACH,GAAW,EAAA,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACF,CAAA,GAGIC,IAA0D;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ;AACV,GAEaC,IAAmBR,EAAS,KAAK,EAAE;AAChDQ,EAAiB,OAAO;AAAA,EACtB,GAAGD;AACL;"}
+{"version":3,"file":"FormField.stories.js","sources":["../../../src/components/FormField/FormField.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FormFieldProps } from './FormField';\n\nimport { FormField } from './FormField';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FormField>{children}</FormField>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FormField',\n  component: FormField,\n  argTypes: {\n    outerSpace: {\n      control: 'boolean',\n    },\n    inline: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    inspectComponent: FormField,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FormFieldProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FormFieldProps>> = (args) => (\n  <Container>\n    <FormField {...args}>\n      <Label htmlFor=\"d6aa53fd\">Example label 1</Label>\n      <InputField id=\"d6aa53fd\" />\n    </FormField>\n    <FormField {...args}>\n      <Label htmlFor=\"4e7a2f22\">Example label 2</Label>\n      <InputField id=\"4e7a2f22\" />\n    </FormField>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FormFieldProps>> = {\n  outerSpace: false,\n  inline: false,\n};\n\nexport const FormFieldExample = Template.bind({});\nFormFieldExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","FormField_stories","FormField","Template","args","jsxs","Container","jsx","Label","InputField","defaultArgs","FormFieldExample"],"mappings":";;;;;AAUA,MAAMA,IAAa,qCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuD,CAACC,MAC5D,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACA,gBAAAJ,EAACH,GAAW,EAAA,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACF,CAAA,GAGIC,IAA0D;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ;AACV,GAEaC,IAAmBR,EAAS,KAAK,EAAE;AAChDQ,EAAiB,OAAO;AAAA,EACtB,GAAGD;AACL;"}

package/dist/components/GridRow/GridRow.d.ts

@@ -1,10 +1,14 @@
 import { PropsWithChildren } from 'react';
 type spacing = '0' | '025' | '050' | '075' | '100' | '125' | '150' | '175' | '200' | '250' | '300' | '350';
 export interface GridRowProps {
+    /** The horizontal padding between columns. */
     gutter?: spacing;
+    /** The vertical padding (at the bottom) between rows. */
     marginBottom?: spacing;
+    /** The vertical padding (at the top) between rows. */
     marginTop?: spacing;
 }
+/** Represents a component for a grid. */
 export declare const GridRow: {
     ({ gutter, marginBottom, marginTop, children, }: PropsWithChildren<GridRowProps>): import("react/jsx-runtime").JSX.Element;
     Column: ({ size, mediumSize, startPositon, mediumStartPosition, position, children, }: PropsWithChildren<import('./Column').ColumnProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GridRow/GridRow.js

@@ -1,5 +1,5 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as p } from "../../clsx-OuTLNxxd.js";
+import { jsx as p } from "react/jsx-runtime";
+import { c as i } from "../../clsx-OuTLNxxd.js";
 import { s as r, C as d } from "../../Column-BUyVh2Oo.js";
 const s = {
   0: { "--grid-gap": "0.25rem" },
@@ -19,10 +19,10 @@ const s = {
   marginBottom: e = "0",
   marginTop: m = "0",
   children: a
-}) => /* @__PURE__ */ i(
+}) => /* @__PURE__ */ p(
   "div",
   {
-    className: p(
+    className: i(
       r["page-grid__row"],
       e && r[`page-grid__row-mb-${e}`],
       m && r[`page-grid__row-mt-${m}`]

package/dist/components/GridRow/GridRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridRow.js","sources":["../../../src/components/GridRow/GridRow.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { CSSProperties, PropsWithChildren } from 'react';\n\nimport { Column } from './Column';\nimport styles from './GridRow.module.css';\n\ntype spacing = '0' | '025' | '050' | '075' | '100' | '125' | '150' | '175' | '200' | '250' | '300' | '350';\nexport interface GridRowProps {\n  gutter?: spacing;\n  marginBottom?: spacing;\n  marginTop?: spacing;\n}\n\nconst gabStyles = {\n  '0': { '--grid-gap': '0.25rem' },\n  '025': { '--grid-gap': '0.25rem' },\n  '050': { '--grid-gap': '0.5rem' },\n  '075': { '--grid-gap': '0.75rem' },\n  '100': { '--grid-gap': '1rem' },\n  '125': { '--grid-gap': '1.25rem' },\n  '150': { '--grid-gap': '1.5rem' },\n  '175': { '--grid-gap': '1.75rem' },\n  '200': { '--grid-gap': '2rem' },\n  '250': { '--grid-gap': '2.5rem' },\n  '300': { '--grid-gap': '3rem' },\n  '350': { '--grid-gap': '3.5rem' },\n};\n\nexport const GridRow = ({\n  gutter = '200',\n  marginBottom = '0',\n  marginTop = '0',\n  children,\n}: PropsWithChildren<GridRowProps>) => {\n  return (\n    <div\n      className={clsx(\n        styles['page-grid__row'],\n        marginBottom && styles[`page-grid__row-mb-${marginBottom}`],\n        marginTop && styles[`page-grid__row-mt-${marginTop}`]\n      )}\n      style={gutter && (gabStyles[gutter] as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n};\n\nGridRow.Column = Column;\n"],"names":["gabStyles","GridRow","gutter","marginBottom","marginTop","children","jsx","clsx","styles","Column"],"mappings":";;;AAcA,MAAMA,IAAY;AAAA,EAChB,GAAK,EAAE,cAAc,UAAU;AAAA,EAC/B,OAAO,EAAE,cAAc,UAAU;AAAA,EACjC,OAAO,EAAE,cAAc,SAAS;AAAA,EAChC,OAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,SAAS;AAAA,EAChC,KAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,SAAS;AAAA,EAChC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,SAAS;AAClC,GAEaC,IAAU,CAAC;AAAA,EACtB,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACTC,EAAO,gBAAgB;AAAA,MACvBL,KAAgBK,EAAO,qBAAqBL,CAAY,EAAE;AAAA,MAC1DC,KAAaI,EAAO,qBAAqBJ,CAAS,EAAE;AAAA,IACtD;AAAA,IACA,OAAOF,KAAWF,EAAUE,CAAM;AAAA,IAEjC,UAAAG;AAAA,EAAA;AAAA;AAKPJ,EAAQ,SAASQ;"}
+{"version":3,"file":"GridRow.js","sources":["../../../src/components/GridRow/GridRow.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { CSSProperties, PropsWithChildren } from 'react';\n\nimport { Column } from './Column';\nimport styles from './GridRow.module.css';\n\ntype spacing = '0' | '025' | '050' | '075' | '100' | '125' | '150' | '175' | '200' | '250' | '300' | '350';\nexport interface GridRowProps {\n  /** The horizontal padding between columns. */\n  gutter?: spacing;\n  /** The vertical padding (at the bottom) between rows. */\n  marginBottom?: spacing;\n  /** The vertical padding (at the top) between rows. */\n  marginTop?: spacing;\n}\n\nconst gapStyles = {\n  '0': { '--grid-gap': '0.25rem' },\n  '025': { '--grid-gap': '0.25rem' },\n  '050': { '--grid-gap': '0.5rem' },\n  '075': { '--grid-gap': '0.75rem' },\n  '100': { '--grid-gap': '1rem' },\n  '125': { '--grid-gap': '1.25rem' },\n  '150': { '--grid-gap': '1.5rem' },\n  '175': { '--grid-gap': '1.75rem' },\n  '200': { '--grid-gap': '2rem' },\n  '250': { '--grid-gap': '2.5rem' },\n  '300': { '--grid-gap': '3rem' },\n  '350': { '--grid-gap': '3.5rem' },\n};\n\n/** Represents a component for a grid. */\nexport const GridRow = ({\n  gutter = '200',\n  marginBottom = '0',\n  marginTop = '0',\n  children,\n}: PropsWithChildren<GridRowProps>) => {\n  return (\n    <div\n      className={clsx(\n        styles['page-grid__row'],\n        marginBottom && styles[`page-grid__row-mb-${marginBottom}`],\n        marginTop && styles[`page-grid__row-mt-${marginTop}`]\n      )}\n      style={gutter && (gapStyles[gutter] as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n};\n\nGridRow.Column = Column;\n"],"names":["gapStyles","GridRow","gutter","marginBottom","marginTop","children","jsx","clsx","styles","Column"],"mappings":";;;AAiBA,MAAMA,IAAY;AAAA,EAChB,GAAK,EAAE,cAAc,UAAU;AAAA,EAC/B,OAAO,EAAE,cAAc,UAAU;AAAA,EACjC,OAAO,EAAE,cAAc,SAAS;AAAA,EAChC,OAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,SAAS;AAAA,EAChC,KAAO,EAAE,cAAc,UAAU;AAAA,EACjC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,SAAS;AAAA,EAChC,KAAO,EAAE,cAAc,OAAO;AAAA,EAC9B,KAAO,EAAE,cAAc,SAAS;AAClC,GAGaC,IAAU,CAAC;AAAA,EACtB,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACTC,EAAO,gBAAgB;AAAA,MACvBL,KAAgBK,EAAO,qBAAqBL,CAAY,EAAE;AAAA,MAC1DC,KAAaI,EAAO,qBAAqBJ,CAAS,EAAE;AAAA,IACtD;AAAA,IACA,OAAOF,KAAWF,EAAUE,CAAM;AAAA,IAEjC,UAAAG;AAAA,EAAA;AAAA;AAKPJ,EAAQ,SAASQ;"}

package/dist/components/GridRow/GridRow.stories.js

@@ -36,6 +36,7 @@ import '../../assets/GridRow.css';const n = {
     }
   },
   parameters: {
+    inspectComponent: e,
     codeString: m
   }
 }, t = (o) => /* @__PURE__ */ r("div", { className: "page-wrapper", style: o.gutter && n[o.gutter], children: [

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

@@ -1 +1 @@
-{"version":3,"file":"GridRow.stories.js","sources":["../../../src/components/GridRow/GridRow.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { GridRowProps } from './GridRow';\nimport type { CSSProperties } from 'react';\n\nimport { GridRow } from './GridRow';\n\nimport './GridRow.stories.css';\n\nconst gapStyles = {\n  '0': { '--grid-gap': '0.25rem' },\n  '025': { '--grid-gap': '0.25rem' },\n  '050': { '--grid-gap': '0.5rem' },\n  '075': { '--grid-gap': '0.75rem' },\n  '100': { '--grid-gap': '1rem' },\n  '125': { '--grid-gap': '1.25rem' },\n  '150': { '--grid-gap': '1.5rem' },\n  '175': { '--grid-gap': '1.75rem' },\n  '200': { '--grid-gap': '2rem' },\n  '250': { '--grid-gap': '2.5rem' },\n  '300': { '--grid-gap': '3rem' },\n  '350': { '--grid-gap': '3.5rem' },\n};\n\nconst codeString = `\n  <GridRow gutter={gutter} marginTop={marginTop} marginBottom={marginBottom}>\n    // Up to 12 GridRow.Column's can be added as needed.\n    <GridRow.Column size={size} mediumSize={mediumSize} startPositon={startPositon}\n      mediumStartPosition={mediumStartPosition}> {children} </GridRow.Column> </GridRow>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/GridRow',\n  component: GridRow,\n  argTypes: {\n    gutter: {\n      options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n      control: { type: 'select' },\n    },\n    marginBottom: {\n      options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n      control: { type: 'select' },\n    },\n    marginTop: {\n      options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n      control: { type: 'select' },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<GridRowProps>;\n\nconst Template: StoryFn<GridRowProps> = (args) => (\n  <div className=\"page-wrapper\" style={args.gutter && (gapStyles[args.gutter] as CSSProperties)}>\n    <GridRow {...args}>\n      <GridRow.Column>Col-12</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"1\">Col-1</GridRow.Column>\n      <GridRow.Column size=\"11\">Col-11</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"2\">Col-2</GridRow.Column>\n      <GridRow.Column size=\"10\">Col-10</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"3\">Col-3</GridRow.Column>\n      <GridRow.Column size=\"9\">Col-9</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"4\">Col-4</GridRow.Column>\n      <GridRow.Column size=\"8\">Col-8</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"5\">Col-5</GridRow.Column>\n      <GridRow.Column size=\"7\">Col-7</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"6\">Col-6</GridRow.Column>\n      <GridRow.Column size=\"6\">Col-6</GridRow.Column>\n    </GridRow>\n  </div>\n);\n\nconst defaultArgs: Partial<GridRowProps> = {\n  gutter: '200',\n  marginBottom: '050',\n  marginTop: '0',\n};\n\nexport const GridRowExample = Template.bind({});\nGridRowExample.args = {\n  ...defaultArgs,\n};\n\nconst TemplateMedium: StoryFn<GridRowProps> = (args) => (\n  <div className=\"page-wrapper\" style={args.gutter && (gapStyles[args.gutter] as CSSProperties)}>\n    <GridRow {...args}>\n      <GridRow.Column size=\"4\" mediumSize=\"6\">\n        L: 4, Md: 6, S: 12\n      </GridRow.Column>\n      <GridRow.Column size=\"4\" mediumSize=\"6\">\n        L: 4, Md: 6, S: 12\n      </GridRow.Column>\n      <GridRow.Column size=\"4\" mediumSize=\"12\">\n        L: 4, Md: 12\n      </GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"3\" mediumSize=\"6\">\n        L: 3, Md: 6, S: 12\n      </GridRow.Column>\n      <GridRow.Column size=\"3\" mediumSize=\"6\">\n        L: 3, Md: 12\n      </GridRow.Column>\n      <GridRow.Column size=\"6\" mediumSize=\"12\">\n        L: 6, Md: 12, S: 12\n      </GridRow.Column>\n    </GridRow>\n  </div>\n);\n\nexport const WithMediumBreakpoint = TemplateMedium.bind({});\nGridRowExample.args = {\n  ...defaultArgs,\n};\n"],"names":["gapStyles","codeString","GridRow_stories","GridRow","Template","args","jsxs","jsx","defaultArgs","GridRowExample","TemplateMedium","WithMediumBreakpoint"],"mappings":"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"}
+{"version":3,"file":"GridRow.stories.js","sources":["../../../src/components/GridRow/GridRow.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { GridRowProps } from './GridRow';\nimport type { CSSProperties } from 'react';\n\nimport { GridRow } from './GridRow';\n\nimport './GridRow.stories.css';\n\nconst gapStyles = {\n  '0': { '--grid-gap': '0.25rem' },\n  '025': { '--grid-gap': '0.25rem' },\n  '050': { '--grid-gap': '0.5rem' },\n  '075': { '--grid-gap': '0.75rem' },\n  '100': { '--grid-gap': '1rem' },\n  '125': { '--grid-gap': '1.25rem' },\n  '150': { '--grid-gap': '1.5rem' },\n  '175': { '--grid-gap': '1.75rem' },\n  '200': { '--grid-gap': '2rem' },\n  '250': { '--grid-gap': '2.5rem' },\n  '300': { '--grid-gap': '3rem' },\n  '350': { '--grid-gap': '3.5rem' },\n};\n\nconst codeString = `\n  <GridRow gutter={gutter} marginTop={marginTop} marginBottom={marginBottom}>\n    // Up to 12 GridRow.Column's can be added as needed.\n    <GridRow.Column size={size} mediumSize={mediumSize} startPositon={startPositon}\n      mediumStartPosition={mediumStartPosition}> {children} </GridRow.Column> </GridRow>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/GridRow',\n  component: GridRow,\n  argTypes: {\n    gutter: {\n      options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n      control: { type: 'select' },\n    },\n    marginBottom: {\n      options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n      control: { type: 'select' },\n    },\n    marginTop: {\n      options: ['0', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '350'],\n      control: { type: 'select' },\n    },\n  },\n  parameters: {\n    inspectComponent: GridRow,\n    codeString: codeString,\n  },\n} as Meta<GridRowProps>;\n\nconst Template: StoryFn<GridRowProps> = (args) => (\n  <div className=\"page-wrapper\" style={args.gutter && (gapStyles[args.gutter] as CSSProperties)}>\n    <GridRow {...args}>\n      <GridRow.Column>Col-12</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"1\">Col-1</GridRow.Column>\n      <GridRow.Column size=\"11\">Col-11</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"2\">Col-2</GridRow.Column>\n      <GridRow.Column size=\"10\">Col-10</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"3\">Col-3</GridRow.Column>\n      <GridRow.Column size=\"9\">Col-9</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"4\">Col-4</GridRow.Column>\n      <GridRow.Column size=\"8\">Col-8</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"5\">Col-5</GridRow.Column>\n      <GridRow.Column size=\"7\">Col-7</GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"6\">Col-6</GridRow.Column>\n      <GridRow.Column size=\"6\">Col-6</GridRow.Column>\n    </GridRow>\n  </div>\n);\n\nconst defaultArgs: Partial<GridRowProps> = {\n  gutter: '200',\n  marginBottom: '050',\n  marginTop: '0',\n};\n\nexport const GridRowExample = Template.bind({});\nGridRowExample.args = {\n  ...defaultArgs,\n};\n\nconst TemplateMedium: StoryFn<GridRowProps> = (args) => (\n  <div className=\"page-wrapper\" style={args.gutter && (gapStyles[args.gutter] as CSSProperties)}>\n    <GridRow {...args}>\n      <GridRow.Column size=\"4\" mediumSize=\"6\">\n        L: 4, Md: 6, S: 12\n      </GridRow.Column>\n      <GridRow.Column size=\"4\" mediumSize=\"6\">\n        L: 4, Md: 6, S: 12\n      </GridRow.Column>\n      <GridRow.Column size=\"4\" mediumSize=\"12\">\n        L: 4, Md: 12\n      </GridRow.Column>\n    </GridRow>\n    <GridRow {...args}>\n      <GridRow.Column size=\"3\" mediumSize=\"6\">\n        L: 3, Md: 6, S: 12\n      </GridRow.Column>\n      <GridRow.Column size=\"3\" mediumSize=\"6\">\n        L: 3, Md: 12\n      </GridRow.Column>\n      <GridRow.Column size=\"6\" mediumSize=\"12\">\n        L: 6, Md: 12, S: 12\n      </GridRow.Column>\n    </GridRow>\n  </div>\n);\n\nexport const WithMediumBreakpoint = TemplateMedium.bind({});\nGridRowExample.args = {\n  ...defaultArgs,\n};\n"],"names":["gapStyles","codeString","GridRow_stories","GridRow","Template","args","jsxs","jsx","defaultArgs","GridRowExample","TemplateMedium","WithMediumBreakpoint"],"mappings":"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"}

package/dist/components/HorizontalList/HorizontalList.d.ts

@@ -1,5 +1,8 @@
 export interface HorizontalListProps {
+    /** The items to display. */
     values: string[];
+    /** The separator to use. */
     separator?: string;
 }
+/** Represents a component to show text separated by a given separator in a horizontal direction. */
 export declare const HorizontalList: ({ values, separator }: HorizontalListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/HorizontalList/HorizontalList.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalList.js","sources":["../../../src/components/HorizontalList/HorizontalList.tsx"],"sourcesContent":["import styles from './HorizontalList.module.css';\n\nexport interface HorizontalListProps {\n  values: string[];\n  separator?: string;\n}\n\nexport const HorizontalList = ({ values, separator = '&bull;' }: HorizontalListProps) => {\n  return (\n    <div className={styles['horizontal-list-wrapper']}>\n      {values.map((string, index) => (\n        <span key={`${string.replace(' ', '-')}_${index}`}>\n          {string}\n          {index < values.length - 1 && (\n            <span className={styles['horizontal-list-separator']} dangerouslySetInnerHTML={{ __html: separator }} />\n          )}\n        </span>\n      ))}\n    </div>\n  );\n};\n"],"names":["HorizontalList","values","separator","jsx","styles","string","index","jsxs"],"mappings":";;;;GAOaA,IAAiB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,IAAY,eAEhD,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,yBAAyB,GAC7C,UAAOH,EAAA,IAAI,CAACI,GAAQC,MACnB,gBAAAC,EAAC,QACE,EAAA,UAAA;AAAA,EAAAF;AAAA,EACAC,IAAQL,EAAO,SAAS,uBACtB,QAAK,EAAA,WAAWG,EAAO,2BAA2B,GAAG,yBAAyB,EAAE,QAAQF,EAAa,EAAA,CAAA;AAH/F,EAAA,GAAA,GAAGG,EAAO,QAAQ,KAAK,GAAG,CAAC,IAAIC,CAAK,EAK/C,CACD,EACH,CAAA;"}
+{"version":3,"file":"HorizontalList.js","sources":["../../../src/components/HorizontalList/HorizontalList.tsx"],"sourcesContent":["import styles from './HorizontalList.module.css';\n\nexport interface HorizontalListProps {\n  /** The items to display. */\n  values: string[];\n  /** The separator to use. */\n  separator?: string;\n}\n\n/** Represents a component to show text separated by a given separator in a horizontal direction. */\nexport const HorizontalList = ({ values, separator = '&bull;' }: HorizontalListProps) => {\n  return (\n    <div className={styles['horizontal-list-wrapper']}>\n      {values.map((string, index) => (\n        <span key={`${string.replace(' ', '-')}_${index}`}>\n          {string}\n          {index < values.length - 1 && (\n            <span className={styles['horizontal-list-separator']} dangerouslySetInnerHTML={{ __html: separator }} />\n          )}\n        </span>\n      ))}\n    </div>\n  );\n};\n"],"names":["HorizontalList","values","separator","jsx","styles","string","index","jsxs"],"mappings":";;;;GAUaA,IAAiB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,IAAY,eAEhD,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,yBAAyB,GAC7C,UAAOH,EAAA,IAAI,CAACI,GAAQC,MACnB,gBAAAC,EAAC,QACE,EAAA,UAAA;AAAA,EAAAF;AAAA,EACAC,IAAQL,EAAO,SAAS,uBACtB,QAAK,EAAA,WAAWG,EAAO,2BAA2B,GAAG,yBAAyB,EAAE,QAAQF,EAAa,EAAA,CAAA;AAH/F,EAAA,GAAA,GAAGG,EAAO,QAAQ,KAAK,GAAG,CAAC,IAAIC,CAAK,EAK/C,CACD,EACH,CAAA;"}

package/dist/components/HorizontalList/HorizontalList.stories.js

@@ -1,6 +1,6 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { HorizontalList as t } from "./HorizontalList.js";
-const a = '<HorizontalList values={values} separator="•" />', u = {
+const a = '<HorizontalList values={values} separator="•" />', p = {
   title: "Atoms/HorizontalList",
   component: t,
   argTypes: {
@@ -9,17 +9,18 @@ const a = '<HorizontalList values={values} separator="•" />', u = {
     }
   },
   parameters: {
+    inspectComponent: t,
     codeString: a
   }
-}, r = (s) => /* @__PURE__ */ o(t, { ...s }), e = {
+}, e = (o) => /* @__PURE__ */ s(t, { ...o }), r = {
   values: ["Curabitur consequat", "Lectus sit amet luctus vulputate", "Nisi semi mattis"],
   separator: "&bull;"
-}, i = r.bind({});
+}, i = e.bind({});
 i.args = {
-  ...e
+  ...r
 };
 export {
   i as HorizontalListExample,
-  u as default
+  p as default
 };
 //# sourceMappingURL=HorizontalList.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalList.stories.js","sources":["../../../src/components/HorizontalList/HorizontalList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { HorizontalListProps } from './HorizontalList';\n\nimport { HorizontalList } from './HorizontalList';\n\nconst codeString = '<HorizontalList values={values} separator=\"•\" />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/HorizontalList',\n  component: HorizontalList,\n  argTypes: {\n    separator: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<HorizontalListProps>;\n\nconst Template: StoryFn<HorizontalListProps> = (args) => <HorizontalList {...args} />;\n\nconst defaultArgs: Partial<HorizontalListProps> = {\n  values: ['Curabitur consequat', 'Lectus sit amet luctus vulputate', 'Nisi semi mattis'],\n  separator: '&bull;',\n};\n\nexport const HorizontalListExample = Template.bind({});\nHorizontalListExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","HorizontalList_stories","HorizontalList","Template","args","jsx","defaultArgs","HorizontalListExample"],"mappings":";;AAKA,MAAMA,IAAa,oDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,EAAM,CAAA,GAE7EE,IAA4C;AAAA,EAChD,QAAQ,CAAC,uBAAuB,oCAAoC,kBAAkB;AAAA,EACtF,WAAW;AACb,GAEaC,IAAwBJ,EAAS,KAAK,EAAE;AACrDI,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AACL;"}
+{"version":3,"file":"HorizontalList.stories.js","sources":["../../../src/components/HorizontalList/HorizontalList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { HorizontalListProps } from './HorizontalList';\n\nimport { HorizontalList } from './HorizontalList';\n\nconst codeString = '<HorizontalList values={values} separator=\"•\" />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/HorizontalList',\n  component: HorizontalList,\n  argTypes: {\n    separator: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: HorizontalList,\n    codeString: codeString,\n  },\n} as Meta<HorizontalListProps>;\n\nconst Template: StoryFn<HorizontalListProps> = (args) => <HorizontalList {...args} />;\n\nconst defaultArgs: Partial<HorizontalListProps> = {\n  values: ['Curabitur consequat', 'Lectus sit amet luctus vulputate', 'Nisi semi mattis'],\n  separator: '&bull;',\n};\n\nexport const HorizontalListExample = Template.bind({});\nHorizontalListExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","HorizontalList_stories","HorizontalList","Template","args","jsx","defaultArgs","HorizontalListExample"],"mappings":";;AAKA,MAAMA,IAAa,oDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,EAAM,CAAA,GAE7EE,IAA4C;AAAA,EAChD,QAAQ,CAAC,uBAAuB,oCAAoC,kBAAkB;AAAA,EACtF,WAAW;AACb,GAEaC,IAAwBJ,EAAS,KAAK,EAAE;AACrDI,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AACL;"}

package/dist/components/Icon/Icon.d.ts

@@ -2,9 +2,13 @@ import { ReactNode, SVGAttributes } from 'react';
 import { Icons } from './icons';
 type IconName = keyof typeof Icons;
 export interface IconProps extends Omit<SVGAttributes<SVGElement>, 'height' | 'width'> {
+    /** The name of the icon to render. */
     name: IconName;
+    /** The size (in pixels) of the icon to render. */
     size?: 16 | 20 | 24 | 32 | 48 | 64 | 96 | 128;
+    /** The title used for a tooltip. */
     title?: string;
 }
+/** Represents a component to render an icon. */
 export declare const Icon: ({ name, size, title, ...restProps }: IconProps) => ReactNode;
 export {};

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { ReactNode, SVGAttributes } from 'react';\n\nimport { Icons } from './icons';\n\ntype IconName = keyof typeof Icons;\n\nexport interface IconProps extends Omit<SVGAttributes<SVGElement>, 'height' | 'width'> {\n  name: IconName;\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  size?: 16 | 20 | 24 | 32 | 48 | 64 | 96 | 128;\n  title?: string;\n}\n\nconst defaultSize = 24;\n\nexport const Icon = ({ name, size = defaultSize, title, ...restProps }: IconProps): ReactNode => {\n  const Icon = Icons[name];\n\n  return <Icon aria-hidden={true} height={size} width={size} title={title} {...restProps} />;\n};\n"],"names":["defaultSize","Icon","name","size","title","restProps","Icons","jsx"],"mappings":";;AAaA,MAAMA,IAAc,IAEPC,IAAO,CAAC,EAAE,MAAAC,GAAM,MAAAC,IAAOH,GAAa,OAAAI,GAAO,GAAGC,QAAsC;AACzFJ,QAAAA,IAAOK,EAAMJ,CAAI;AAEhB,SAAA,gBAAAK,EAACN,GAAA,EAAK,eAAa,IAAM,QAAQE,GAAM,OAAOA,GAAM,OAAAC,GAAe,GAAGC,EAAW,CAAA;AAC1F;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { ReactNode, SVGAttributes } from 'react';\n\nimport { Icons } from './icons';\n\ntype IconName = keyof typeof Icons;\n\nexport interface IconProps extends Omit<SVGAttributes<SVGElement>, 'height' | 'width'> {\n  /** The name of the icon to render. */\n  name: IconName;\n  /** The size (in pixels) of the icon to render. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  size?: 16 | 20 | 24 | 32 | 48 | 64 | 96 | 128;\n  /** The title used for a tooltip. */\n  title?: string;\n}\n\nconst defaultSize = 24;\n\n/** Represents a component to render an icon. */\nexport const Icon = ({ name, size = defaultSize, title, ...restProps }: IconProps): ReactNode => {\n  const Icon = Icons[name];\n\n  return <Icon aria-hidden={true} height={size} width={size} title={title} {...restProps} />;\n};\n"],"names":["defaultSize","Icon","name","size","title","restProps","Icons","jsx"],"mappings":";;AAgBA,MAAMA,IAAc,IAGPC,IAAO,CAAC,EAAE,MAAAC,GAAM,MAAAC,IAAOH,GAAa,OAAAI,GAAO,GAAGC,QAAsC;AACzFJ,QAAAA,IAAOK,EAAMJ,CAAI;AAEhB,SAAA,gBAAAK,EAACN,GAAA,EAAK,eAAa,IAAM,QAAQE,GAAM,OAAOA,GAAM,OAAAC,GAAe,GAAGC,EAAW,CAAA;AAC1F;"}

package/dist/components/Icon/Icon.stories.js

@@ -9,6 +9,7 @@ import '../../assets/Icon.css';const s = "_icon__wrapper_lse0u_1", p = "_icon__i
   title: "Atoms/Icon",
   component: i,
   parameters: {
+    inspectComponent: i,
     codeString: a
   }
 }, m = (e) => /* @__PURE__ */ o(i, { ...e }), _ = m.bind({});

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","sources":["../../../src/components/Icon/Icon.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { IconProps } from './Icon';\n\nimport { Icon } from './Icon';\nimport { Icons } from './icons';\nimport styles from './story.module.css';\n\nimport { ClipboardButton } from 'storyComponents/ClipboardButton/';\n\nconst codeString = '<Icon name={iconName} size={size} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Icon',\n  component: Icon,\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<IconProps>;\n\nconst Template: StoryFn<IconProps> = (args) => <Icon {...args} />;\n\nexport const IconExample = Template.bind({});\nIconExample.args = {\n  name: 'ArrowDownOnSquare',\n  size: 32,\n  title: 'Optional Icon title',\n};\n\nexport const IconOverview = () => {\n  return (\n    <div\n      style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(4, 1fr)',\n        gridGap: '1rem',\n        padding: '1rem',\n        maxWidth: '1024px',\n      }}\n    >\n      {Object.keys(Icons).map((name) => (\n        <div key={name} className={styles.icon__wrapper}>\n          <Icon name={name as keyof typeof Icons} size={48} />\n          <div className={styles.icon__item}>\n            <span>{name}</span>\n            <ClipboardButton text={`<Icon icon={${name}} />`} />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["codeString","Icon_stories","Icon","Template","args","jsx","IconExample","IconOverview","Icons","name","jsxs","styles","ClipboardButton"],"mappings":";;;;;;;GASMA,IAAa,wCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAA+B,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAM,GAAGE,EAAM,CAAA,GAElDE,IAAcH,EAAS,KAAK,EAAE;AAC3CG,EAAY,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAMC,IAAe,MAExB,gBAAAF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAO;AAAA,MACL,SAAS;AAAA,MACT,qBAAqB;AAAA,MACrB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,IAEC,UAAA,OAAO,KAAKG,CAAK,EAAE,IAAI,CAACC,MACtB,gBAAAC,EAAA,OAAA,EAAe,WAAWC,EAAO,eAChC,UAAA;AAAA,MAAC,gBAAAN,EAAAH,GAAA,EAAK,MAAAO,GAAkC,MAAM,GAAI,CAAA;AAAA,MACjD,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,YACrB,UAAA;AAAA,QAAA,gBAAAN,EAAC,UAAM,UAAKI,EAAA,CAAA;AAAA,QACX,gBAAAJ,EAAAO,GAAA,EAAgB,MAAM,eAAeH,CAAI,QAAQ;AAAA,MAAA,GACpD;AAAA,IAAA,EAAA,GALQA,CAMV,CACD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Icon.stories.js","sources":["../../../src/components/Icon/Icon.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { IconProps } from './Icon';\n\nimport { Icon } from './Icon';\nimport { Icons } from './icons';\nimport styles from './story.module.css';\n\nimport { ClipboardButton } from 'storyComponents/ClipboardButton/';\n\nconst codeString = '<Icon name={iconName} size={size} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Icon',\n  component: Icon,\n  parameters: {\n    inspectComponent: Icon,\n    codeString: codeString,\n  },\n} as Meta<IconProps>;\n\nconst Template: StoryFn<IconProps> = (args) => <Icon {...args} />;\n\nexport const IconExample = Template.bind({});\nIconExample.args = {\n  name: 'ArrowDownOnSquare',\n  size: 32,\n  title: 'Optional Icon title',\n};\n\nexport const IconOverview = () => {\n  return (\n    <div\n      style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(4, 1fr)',\n        gridGap: '1rem',\n        padding: '1rem',\n        maxWidth: '1024px',\n      }}\n    >\n      {Object.keys(Icons).map((name) => (\n        <div key={name} className={styles.icon__wrapper}>\n          <Icon name={name as keyof typeof Icons} size={48} />\n          <div className={styles.icon__item}>\n            <span>{name}</span>\n            <ClipboardButton text={`<Icon icon={${name}} />`} />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["codeString","Icon_stories","Icon","Template","args","jsx","IconExample","IconOverview","Icons","name","jsxs","styles","ClipboardButton"],"mappings":";;;;;;;GASMA,IAAa,wCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAA+B,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAM,GAAGE,EAAM,CAAA,GAElDE,IAAcH,EAAS,KAAK,EAAE;AAC3CG,EAAY,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAMC,IAAe,MAExB,gBAAAF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAO;AAAA,MACL,SAAS;AAAA,MACT,qBAAqB;AAAA,MACrB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,IAEC,UAAA,OAAO,KAAKG,CAAK,EAAE,IAAI,CAACC,MACtB,gBAAAC,EAAA,OAAA,EAAe,WAAWC,EAAO,eAChC,UAAA;AAAA,MAAC,gBAAAN,EAAAH,GAAA,EAAK,MAAAO,GAAkC,MAAM,GAAI,CAAA;AAAA,MACjD,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,YACrB,UAAA;AAAA,QAAA,gBAAAN,EAAC,UAAM,UAAKI,EAAA,CAAA;AAAA,QACX,gBAAAJ,EAAAO,GAAA,EAAgB,MAAM,eAAeH,CAAI,QAAQ;AAAA,MAAA,GACpD;AAAA,IAAA,EAAA,GALQA,CAMV,CACD;AAAA,EAAA;AAAA;"}

package/dist/components/IconButton/IconButton.d.ts

@@ -1,8 +1,13 @@
 import { ButtonHTMLAttributes } from 'react';
 export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    /** The value of the aria-label. */
     'aria-label': string;
+    /** The variant of the button. */
     variant?: 'destructive';
+    /** true if the button should be rendered without a border; otherwise, false. The default is false. */
     noBorder?: boolean;
+    /** true to render the button a bit wider; otherwise, false. The default is false. */
     wide?: boolean;
 }
+/** Represents a component for a button with an icon. */
 export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  'aria-label': string;\n  variant?: 'destructive';\n  noBorder?: boolean;\n  wide?: boolean;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ children, type = 'button', variant, noBorder, wide, ...restProps }: IconButtonProps, forwardedRef) => (\n    <button\n      {...restProps}\n      className={clsx(styles['icon-button'], {\n        [styles['icon-button--destructive']]: variant === 'destructive',\n        [styles['icon-button--no-border']]: noBorder,\n        [styles['icon-button--wide']]: wide,\n      })}\n      ref={forwardedRef}\n      type={type}\n    >\n      {children}\n    </button>\n  )\n);\n"],"names":["IconButton","forwardRef","children","type","variant","noBorder","wide","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;GAcaA,IAAaC;AAAA,EACxB,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,UAAAC,GAAU,MAAAC,GAAM,GAAGC,KAA8BC,MACtF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG,EAAKC,EAAO,aAAa,GAAG;AAAA,QACrC,CAACA,EAAO,0BAA0B,CAAC,GAAGP,MAAY;AAAA,QAClD,CAACO,EAAO,wBAAwB,CAAC,GAAGN;AAAA,QACpC,CAACM,EAAO,mBAAmB,CAAC,GAAGL;AAAA,MAAA,CAChC;AAAA,MACD,KAAKE;AAAA,MACL,MAAAL;AAAA,MAEC,UAAAD;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  /** The value of the aria-label. */\n  'aria-label': string;\n  /** The variant of the button. */\n  variant?: 'destructive';\n  /** true if the button should be rendered without a border; otherwise, false. The default is false. */\n  noBorder?: boolean;\n  /** true to render the button a bit wider; otherwise, false. The default is false. */\n  wide?: boolean;\n}\n\n/** Represents a component for a button with an icon. */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ children, type = 'button', variant, noBorder, wide, ...restProps }: IconButtonProps, forwardedRef) => (\n    <button\n      {...restProps}\n      className={clsx(styles['icon-button'], {\n        [styles['icon-button--destructive']]: variant === 'destructive',\n        [styles['icon-button--no-border']]: noBorder,\n        [styles['icon-button--wide']]: wide,\n      })}\n      ref={forwardedRef}\n      type={type}\n    >\n      {children}\n    </button>\n  )\n);\n"],"names":["IconButton","forwardRef","children","type","variant","noBorder","wide","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;GAmBaA,IAAaC;AAAA,EACxB,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,UAAAC,GAAU,MAAAC,GAAM,GAAGC,KAA8BC,MACtF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG,EAAKC,EAAO,aAAa,GAAG;AAAA,QACrC,CAACA,EAAO,0BAA0B,CAAC,GAAGP,MAAY;AAAA,QAClD,CAACO,EAAO,wBAAwB,CAAC,GAAGN;AAAA,QACpC,CAACM,EAAO,mBAAmB,CAAC,GAAGL;AAAA,MAAA,CAChC;AAAA,MACD,KAAKE;AAAA,MACL,MAAAL;AAAA,MAEC,UAAAD;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/IconButton/IconButton.stories.js

@@ -1,12 +1,12 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { fn as r } from "../../index-MQ0yPLdl.js";
-import { IconButton as n } from "./IconButton.js";
+import { IconButton as t } from "./IconButton.js";
 import { Icon as i } from "../Icon/Icon.js";
 const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>
   <Icon name={iconName} size={size} />
   </IconButton>`, b = {
   title: "Atoms/IconButton",
-  component: n,
+  component: t,
   argTypes: {
     variant: {
       options: ["destructive"],
@@ -36,11 +36,12 @@ const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClic
     }
   },
   parameters: {
+    inspectComponent: t,
     codeString: l
   }
-}, s = (t) => {
-  const e = t.variant ?? [], a = { ...t, variant: e.toString() };
-  return /* @__PURE__ */ o(n, { ...a });
+}, s = (o) => {
+  const e = o.variant ?? [], a = { ...o, variant: e.toString() };
+  return /* @__PURE__ */ n(t, { ...a });
 }, c = s.bind({});
 c.args = {
   "aria-label": "Trash",
@@ -48,7 +49,7 @@ c.args = {
   noBorder: !1,
   wide: !1,
   disabled: !1,
-  children: /* @__PURE__ */ o(i, { name: "Trash" }),
+  children: /* @__PURE__ */ n(i, { name: "Trash" }),
   onClick: r()
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.js","sources":["../../../src/components/IconButton/IconButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { IconButtonProps } from 'components/IconButton';\n\nimport { IconButton } from 'components/IconButton';\nimport { Icon } from 'components/Icon';\n\nconst codeString = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>\n  <Icon name={iconName} size={size} />\n  </IconButton>`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/IconButton',\n  component: IconButton,\n  argTypes: {\n    variant: {\n      options: ['destructive'],\n      control: { type: 'check' },\n    },\n    noBorder: {\n      control: 'boolean',\n      default: false,\n    },\n    wide: {\n      control: 'boolean',\n      default: false,\n    },\n    'aria-label': {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      options: ['button', 'submit', 'reset'],\n      control: { type: 'select' },\n    },\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<IconButtonProps>;\n\nconst Template: StoryFn<IconButtonProps> = (args) => {\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  const iconButtonArgs = { ...args, ...{ variant: variantArray.toString() } } as IconButtonProps;\n\n  return <IconButton {...iconButtonArgs} />;\n};\n\nexport const IconButtonExample = Template.bind({});\nIconButtonExample.args = {\n  'aria-label': 'Trash',\n  variant: 'destructive',\n  noBorder: false,\n  wide: false,\n  disabled: false,\n  children: <Icon name=\"Trash\" />,\n  onClick: fn(),\n};\n"],"names":["codeString","IconButton_stories","IconButton","Template","args","variantArray","iconButtonArgs","jsx","IconButtonExample","Icon","fn"],"mappings":";;;;AAQA,MAAMA,IAAa;AAAA;AAAA,kBAKJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,aAAa;AAAA,MACvB,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU,UAAU,OAAO;AAAA,MACrC,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAqC,CAACC,MAAS;AAE7C,QAAAC,IAAgBD,EAAK,WAAmC,IACxDE,IAAiB,EAAE,GAAGF,GAAW,SAASC,EAAa,SAAS;AAE/D,SAAA,gBAAAE,EAACL,GAAY,EAAA,GAAGI,EAAgB,CAAA;AACzC,GAEaE,IAAoBL,EAAS,KAAK,EAAE;AACjDK,EAAkB,OAAO;AAAA,EACvB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU,gBAAAD,EAACE,GAAK,EAAA,MAAK,QAAQ,CAAA;AAAA,EAC7B,SAASC,EAAG;AACd;"}
+{"version":3,"file":"IconButton.stories.js","sources":["../../../src/components/IconButton/IconButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { IconButtonProps } from 'components/IconButton';\n\nimport { IconButton } from 'components/IconButton';\nimport { Icon } from 'components/Icon';\n\nconst codeString = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>\n  <Icon name={iconName} size={size} />\n  </IconButton>`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/IconButton',\n  component: IconButton,\n  argTypes: {\n    variant: {\n      options: ['destructive'],\n      control: { type: 'check' },\n    },\n    noBorder: {\n      control: 'boolean',\n      default: false,\n    },\n    wide: {\n      control: 'boolean',\n      default: false,\n    },\n    'aria-label': {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      options: ['button', 'submit', 'reset'],\n      control: { type: 'select' },\n    },\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: IconButton,\n    codeString: codeString,\n  },\n} as Meta<IconButtonProps>;\n\nconst Template: StoryFn<IconButtonProps> = (args) => {\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  const iconButtonArgs = { ...args, ...{ variant: variantArray.toString() } } as IconButtonProps;\n\n  return <IconButton {...iconButtonArgs} />;\n};\n\nexport const IconButtonExample = Template.bind({});\nIconButtonExample.args = {\n  'aria-label': 'Trash',\n  variant: 'destructive',\n  noBorder: false,\n  wide: false,\n  disabled: false,\n  children: <Icon name=\"Trash\" />,\n  onClick: fn(),\n};\n"],"names":["codeString","IconButton_stories","IconButton","Template","args","variantArray","iconButtonArgs","jsx","IconButtonExample","Icon","fn"],"mappings":";;;;AAQA,MAAMA,IAAa;AAAA;AAAA,kBAKJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,aAAa;AAAA,MACvB,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU,UAAU,OAAO;AAAA,MACrC,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAqC,CAACC,MAAS;AAE7C,QAAAC,IAAgBD,EAAK,WAAmC,IACxDE,IAAiB,EAAE,GAAGF,GAAW,SAASC,EAAa,SAAS;AAE/D,SAAA,gBAAAE,EAACL,GAAY,EAAA,GAAGI,EAAgB,CAAA;AACzC,GAEaE,IAAoBL,EAAS,KAAK,EAAE;AACjDK,EAAkB,OAAO;AAAA,EACvB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU,gBAAAD,EAACE,GAAK,EAAA,MAAK,QAAQ,CAAA;AAAA,EAC7B,SAASC,EAAG;AACd;"}

package/dist/components/InfoMessage/InfoMessage.d.ts

@@ -1,6 +1,9 @@
 import { PropsWithChildren } from 'react';
 export interface InfoMessageProps {
+    /** The message to show. */
     message: string;
+    /** `true` if the info message should be wrapped in a container; otherwise, `false`. */
     hasOwnContainer?: boolean;
 }
+/** Represents a component to show an info message. */
 export declare const InfoMessage: ({ message, hasOwnContainer }: PropsWithChildren<InfoMessageProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InfoMessage/InfoMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.js","sources":["../../../src/components/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './InfoMessage.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface InfoMessageProps {\n  message: string;\n  hasOwnContainer?: boolean;\n}\n\nexport const InfoMessage = ({ message, hasOwnContainer = false }: PropsWithChildren<InfoMessageProps>) => (\n  <div\n    className={clsx(styles['info-message'], {\n      [styles['info-message__container']]: hasOwnContainer,\n    })}\n  >\n    <Icon name=\"InformationCircleFillMini\" className={styles['info-message__icon']} />\n    {message}\n  </div>\n);\n"],"names":["InfoMessage","message","hasOwnContainer","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;GAaaA,IAAc,CAAC,EAAE,SAAAC,GAAS,iBAAAC,IAAkB,GACvD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGH;AAAA,IAAA,CACtC;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAI,EAACC,KAAK,MAAK,6BAA4B,WAAWF,EAAO,oBAAoB,GAAG;AAAA,MAC/EJ;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"InfoMessage.js","sources":["../../../src/components/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './InfoMessage.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface InfoMessageProps {\n  /** The message to show. */\n  message: string;\n  /** `true` if the info message should be wrapped in a container; otherwise, `false`. */\n  hasOwnContainer?: boolean;\n}\n\n/** Represents a component to show an info message. */\nexport const InfoMessage = ({ message, hasOwnContainer = false }: PropsWithChildren<InfoMessageProps>) => (\n  <div\n    className={clsx(styles['info-message'], {\n      [styles['info-message__container']]: hasOwnContainer,\n    })}\n  >\n    <Icon name=\"InformationCircleFillMini\" className={styles['info-message__icon']} />\n    {message}\n  </div>\n);\n"],"names":["InfoMessage","message","hasOwnContainer","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;GAgBaA,IAAc,CAAC,EAAE,SAAAC,GAAS,iBAAAC,IAAkB,GACvD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGH;AAAA,IAAA,CACtC;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAI,EAACC,KAAK,MAAK,6BAA4B,WAAWF,EAAO,oBAAoB,GAAG;AAAA,MAC/EJ;AAAA,IAAA;AAAA,EAAA;AACH;"}

package/dist/components/InfoMessage/InfoMessage.stories.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { InfoMessage as e } from "./InfoMessage.js";
-const a = "<InfoMessage message={message} />", g = {
+const n = "<InfoMessage message={message} />", g = {
   title: "Atoms/InfoMessage",
   component: e,
   argTypes: {
@@ -12,9 +12,10 @@ const a = "<InfoMessage message={message} />", g = {
     }
   },
   parameters: {
-    codeString: a
+    inspectComponent: e,
+    codeString: n
   }
-}, n = (s) => /* @__PURE__ */ o(e, { ...s }), t = n.bind({});
+}, a = (s) => /* @__PURE__ */ o(e, { ...s }), t = a.bind({});
 t.args = {
   message: "This is an example info message",
   hasOwnContainer: !1

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

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.stories.js","sources":["../../../src/components/InfoMessage/InfoMessage.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InfoMessageProps } from './InfoMessage';\n\nimport { InfoMessage } from './InfoMessage';\n\nconst codeString = '<InfoMessage message={message} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InfoMessage',\n  component: InfoMessage,\n  argTypes: {\n    message: {\n      control: 'text',\n    },\n    hasOwnContainer: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<InfoMessageProps>;\n\nconst Template: StoryFn<InfoMessageProps> = (args) => <InfoMessage {...args} />;\n\nexport const InfoMessageExample = Template.bind({});\nInfoMessageExample.args = {\n  message: 'This is an example info message',\n  hasOwnContainer: false,\n};\n"],"names":["codeString","InfoMessage_stories","InfoMessage","Template","args","jsx","InfoMessageExample"],"mappings":";;AAKA,MAAMA,IAAa,qCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAa,GAAGE,EAAM,CAAA,GAEhEE,IAAqBH,EAAS,KAAK,EAAE;AAClDG,EAAmB,OAAO;AAAA,EACxB,SAAS;AAAA,EACT,iBAAiB;AACnB;"}
+{"version":3,"file":"InfoMessage.stories.js","sources":["../../../src/components/InfoMessage/InfoMessage.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InfoMessageProps } from './InfoMessage';\n\nimport { InfoMessage } from './InfoMessage';\n\nconst codeString = '<InfoMessage message={message} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InfoMessage',\n  component: InfoMessage,\n  argTypes: {\n    message: {\n      control: 'text',\n    },\n    hasOwnContainer: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    inspectComponent: InfoMessage,\n    codeString: codeString,\n  },\n} as Meta<InfoMessageProps>;\n\nconst Template: StoryFn<InfoMessageProps> = (args) => <InfoMessage {...args} />;\n\nexport const InfoMessageExample = Template.bind({});\nInfoMessageExample.args = {\n  message: 'This is an example info message',\n  hasOwnContainer: false,\n};\n"],"names":["codeString","InfoMessage_stories","InfoMessage","Template","args","jsx","InfoMessageExample"],"mappings":";;AAKA,MAAMA,IAAa,qCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAa,GAAGE,EAAM,CAAA,GAEhEE,IAAqBH,EAAS,KAAK,EAAE;AAClDG,EAAmB,OAAO;AAAA,EACxB,SAAS;AAAA,EACT,iBAAiB;AACnB;"}

package/dist/components/Input/Input.d.ts

@@ -1,9 +1,15 @@
 import { InputHTMLAttributes } from 'react';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
+    /** The appearance of the element. Possible values: `error`. */
     appearance?: 'error';
+    /** The type of the input element. */
     type?: 'text' | 'search' | 'password' | 'email' | 'file';
+    /** `true` if the element should render at full width of its container; otherwise, `false`. The default is `false`. */
     fullWidth?: boolean;
+    /** The id of the element. */
     id: string;
+    /** `true` if the element is used for numeric values; otherwise, `false`. The default is `false`. */
     isNumeric?: boolean;
 }
+/** Represents a component for an input element. */
 export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './Input.module.css';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  appearance?: 'error';\n  type?: 'text' | 'search' | 'password' | 'email' | 'file';\n  fullWidth?: boolean;\n  id: string;\n  isNumeric?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { id, appearance, type = 'text', isNumeric, fullWidth, ...restProps }: InputProps,\n  forwardedRef\n) {\n  return (\n    <input\n      {...restProps}\n      ref={forwardedRef}\n      id={id}\n      className={clsx(styles['input'], {\n        [styles['input--error']]: appearance === 'error',\n        [styles['input--full-with']]: fullWidth,\n        [styles['input--numeric']]: isNumeric,\n      })}\n      type={type}\n    />\n  );\n});\n"],"names":["Input","forwardRef","id","appearance","type","isNumeric","fullWidth","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;GAeaA,IAAQC,EAAyC,SAC5D,EAAE,IAAAC,GAAI,YAAAC,GAAY,MAAAC,IAAO,QAAQ,WAAAC,GAAW,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;AAEE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAKC;AAAA,MACL,IAAAN;AAAA,MACA,WAAWQ,EAAKC,EAAO,OAAU;AAAA,QAC/B,CAACA,EAAO,cAAc,CAAC,GAAGR,MAAe;AAAA,QACzC,CAACQ,EAAO,kBAAkB,CAAC,GAAGL;AAAA,QAC9B,CAACK,EAAO,gBAAgB,CAAC,GAAGN;AAAA,MAAA,CAC7B;AAAA,MACD,MAAAD;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './Input.module.css';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The appearance of the element. Possible values: `error`. */\n  appearance?: 'error';\n  /** The type of the input element. */\n  type?: 'text' | 'search' | 'password' | 'email' | 'file';\n  /** `true` if the element should render at full width of its container; otherwise, `false`. The default is `false`. */\n  fullWidth?: boolean;\n  /** The id of the element. */\n  id: string;\n  /** `true` if the element is used for numeric values; otherwise, `false`. The default is `false`. */\n  isNumeric?: boolean;\n}\n\n/** Represents a component for an input element. */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { id, appearance, type = 'text', isNumeric, fullWidth, ...restProps }: InputProps,\n  forwardedRef\n) {\n  return (\n    <input\n      {...restProps}\n      ref={forwardedRef}\n      id={id}\n      className={clsx(styles['input'], {\n        [styles['input--error']]: appearance === 'error',\n        [styles['input--full-with']]: fullWidth,\n        [styles['input--numeric']]: isNumeric,\n      })}\n      type={type}\n    />\n  );\n});\n"],"names":["Input","forwardRef","id","appearance","type","isNumeric","fullWidth","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;GAqBaA,IAAQC,EAAyC,SAC5D,EAAE,IAAAC,GAAI,YAAAC,GAAY,MAAAC,IAAO,QAAQ,WAAAC,GAAW,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;AAEE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAKC;AAAA,MACL,IAAAN;AAAA,MACA,WAAWQ,EAAKC,EAAO,OAAU;AAAA,QAC/B,CAACA,EAAO,cAAc,CAAC,GAAGR,MAAe;AAAA,QACzC,CAACQ,EAAO,kBAAkB,CAAC,GAAGL;AAAA,QAC9B,CAACK,EAAO,gBAAgB,CAAC,GAAGN;AAAA,MAAA,CAC7B;AAAA,MACD,MAAAD;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/Input/Input.stories.js

@@ -1,6 +1,6 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { Input as t } from "./Input.js";
-const n = `
+const r = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>
 `, u = {
@@ -21,16 +21,17 @@ const n = `
     type: "text"
   },
   parameters: {
-    codeString: n
+    inspectComponent: t,
+    codeString: r
   }
-}, e = (a) => /* @__PURE__ */ r(t, { ...a }), p = e.bind({});
+}, e = (a) => /* @__PURE__ */ n(t, { ...a }), p = e.bind({});
 p.args = {};
-const i = e.bind({});
-i.args = {
-  fullWidth: !0
-};
 const o = e.bind({});
 o.args = {
+  fullWidth: !0
+};
+const i = e.bind({});
+i.args = {
   isNumeric: !0
 };
 const s = e.bind({});
@@ -38,9 +39,9 @@ s.args = {
   appearance: "error"
 };
 export {
-  i as FullWidth,
+  o as FullWidth,
   p as InputExample,
-  o as Numeric,
+  i as Numeric,
   s as WithErrorAppearance,
   u as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Input',\n  component: Input,\n  argTypes: {\n    appearance: {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      control: 'inline-radio',\n    },\n  },\n  args: {\n    id: '30daa7c7',\n    type: 'text',\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n  return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n  fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n  isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n  appearance: 'error',\n};\n"],"names":["codeString","Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAgC,CAACC,MAC9B,gBAAAC,EAACH,GAAO,EAAA,GAAGE,EAAM,CAAA,GAGbE,IAAeH,EAAS,KAAK,EAAE;AAC5CG,EAAa,OAAO,CAAA;AAEb,MAAMC,IAAYJ,EAAS,KAAK,EAAE;AACzCI,EAAU,OAAO;AAAA,EACf,WAAW;AACb;AAEO,MAAMC,IAAUL,EAAS,KAAK,EAAE;AACvCK,EAAQ,OAAO;AAAA,EACb,WAAW;AACb;AAEO,MAAMC,IAAsBN,EAAS,KAAK,EAAE;AACnDM,EAAoB,OAAO;AAAA,EACzB,YAAY;AACd;"}
+{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Input',\n  component: Input,\n  argTypes: {\n    appearance: {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      control: 'inline-radio',\n    },\n  },\n  args: {\n    id: '30daa7c7',\n    type: 'text',\n  },\n  parameters: {\n    inspectComponent: Input,\n    codeString: codeString,\n  },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n  return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n  fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n  isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n  appearance: 'error',\n};\n"],"names":["codeString","Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAgC,CAACC,MAC9B,gBAAAC,EAACH,GAAO,EAAA,GAAGE,EAAM,CAAA,GAGbE,IAAeH,EAAS,KAAK,EAAE;AAC5CG,EAAa,OAAO,CAAA;AAEb,MAAMC,IAAYJ,EAAS,KAAK,EAAE;AACzCI,EAAU,OAAO;AAAA,EACf,WAAW;AACb;AAEO,MAAMC,IAAUL,EAAS,KAAK,EAAE;AACvCK,EAAQ,OAAO;AAAA,EACb,WAAW;AACb;AAEO,MAAMC,IAAsBN,EAAS,KAAK,EAAE;AACnDM,EAAoB,OAAO;AAAA,EACzB,YAAY;AACd;"}

package/dist/components/InputField/InputField.d.ts

@@ -1,9 +1,15 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
+    /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */
     variant?: 'large';
+    /** The type of the input element. */
     type?: 'text' | 'password' | 'email';
+    /** The id of the input element. */
     id: string;
+    /** An element that represents a clear button. */
     clearTrigger?: ReactNode;
+    /** The callback that is invoked when the clear button is triggered. */
     onClear?: () => void;
 }
+/** Represents a component that renders an input field which can have a clear button. */
 export declare const InputField: import('react').ForwardRefExoticComponent<InputFieldProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useState, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  variant?: 'large';\n  type?: 'text' | 'password' | 'email';\n  id: string;\n  clearTrigger?: ReactNode;\n  onClear?: () => void;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    { autoComplete = 'off', id, value, variant, type = 'text', clearTrigger, onClear, ...restProps }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;GAeaA,IAAaC;AAAA,EACxB,CACE,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,QAAQ,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GACrFC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACV,CAAK,CAAC;AAEV,UAAMa,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,KACRE,EAAa,QAAQ;IACvB;AAGF,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAP;AAAA,UACA,KAAKQ;AAAA,UACL,IAAAP;AAAA,UACA,WAAWkB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGd,MAAY;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAF;AAAA,UACA,OAAO,EAAE,cAAcA,KAASG,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCP,KAASG,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBX,CAAE;AAAA,UAElC,UAAAI;AAAA,QAAA;AAAA,MACH;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */\n  variant?: 'large';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    { autoComplete = 'off', id, value, variant, type = 'text', clearTrigger, onClear, ...restProps }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;GAqBaA,IAAaC;AAAA,EACxB,CACE,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,QAAQ,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GACrFC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACV,CAAK,CAAC;AAEV,UAAMa,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,KACRE,EAAa,QAAQ;IACvB;AAGF,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAP;AAAA,UACA,KAAKQ;AAAA,UACL,IAAAP;AAAA,UACA,WAAWkB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGd,MAAY;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAF;AAAA,UACA,OAAO,EAAE,cAAcA,KAASG,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCP,KAASG,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBX,CAAE;AAAA,UAElC,UAAAI;AAAA,QAAA;AAAA,MACH;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}