@uva-glass/component-library 3.7.0 → 3.9.0

package/dist/assets/FormField.css

@@ -1 +1 @@
-._form-field_18714_1{display:flex;flex-direction:column;gap:.5rem 1rem}._form-field--outerspace_18714_7{margin:1.5rem 0}._form-field--inline_18714_11{align-items:center;flex-direction:row}
+._form-field_hcyqx_1{display:flex;flex-direction:column;gap:.5rem 1rem}._form-field--outerspace_hcyqx_7{margin:1.5rem 0}._form-field--inline_hcyqx_11{align-items:center;flex-direction:row}._form-field--align-start_hcyqx_16{align-items:flex-start}

package/dist/components/FeedbackBox/FeedbackBox.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 type FeedbackLevel = 'success' | 'warning' | 'error';
 export interface FeedbackBoxProps {
     /** The id of the element. */
@@ -5,7 +6,7 @@ export interface FeedbackBoxProps {
     /** The feedback level, indicates what icon is used. */
     level: FeedbackLevel;
     /** The feedback value. */
-    feedback: string;
+    feedback: string | ReactElement;
 }
 /** Represents a component to show feedback. */
 export declare const FeedbackBox: ({ id, level, feedback }: FeedbackBoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FeedbackBox/FeedbackBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBox.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './FeedbackBox.module.css';\n\nimport { Icon } from 'components/Icon';\n\ntype FeedbackLevel = 'success' | 'warning' | 'error';\n\nconst LEVEL_ICON_MAP: Record<FeedbackLevel, IconProps['name']> = {\n  success: 'CheckCircle',\n  warning: 'ExclamationCircle',\n  error: 'ExclamationTriangleMini',\n};\n\nexport interface FeedbackBoxProps {\n  /** The id of the element. */\n  id?: string;\n  /** The feedback level, indicates what icon is used. */\n  level: FeedbackLevel;\n  /** The feedback value. */\n  feedback: string;\n}\n\n/** Represents a component to show feedback. */\nexport const FeedbackBox = ({ id, level, feedback }: FeedbackBoxProps) => (\n  <div\n    className={clsx(styles['feedback-box'], {\n      [styles['feedback-box__success']]: level === 'success',\n      [styles['feedback-box__warning']]: level === 'warning',\n      [styles['feedback-box__error']]: level === 'error',\n    })}\n    id={id}\n  >\n    <Icon name={LEVEL_ICON_MAP[level]} size={16} />\n    {feedback}\n  </div>\n);\n"],"names":["LEVEL_ICON_MAP","FeedbackBox","id","level","feedback","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAUMA,IAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAYaC,IAAc,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,UAAAC,EACvC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,qBAAqB,CAAC,GAAGJ,MAAU;AAAA,IAAA,CAC5C;AAAA,IACD,IAAAD;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAM,EAACC,KAAK,MAAMT,EAAeG,CAAK,GAAG,MAAM,IAAI;AAAA,MAC5CC;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"FeedbackBox.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactElement } from 'react';\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './FeedbackBox.module.css';\n\nimport { Icon } from 'components/Icon';\n\ntype FeedbackLevel = 'success' | 'warning' | 'error';\n\nconst LEVEL_ICON_MAP: Record<FeedbackLevel, IconProps['name']> = {\n  success: 'CheckCircle',\n  warning: 'ExclamationCircle',\n  error: 'ExclamationTriangleMini',\n};\n\nexport interface FeedbackBoxProps {\n  /** The id of the element. */\n  id?: string;\n  /** The feedback level, indicates what icon is used. */\n  level: FeedbackLevel;\n  /** The feedback value. */\n  feedback: string | ReactElement;\n}\n\n/** Represents a component to show feedback. */\nexport const FeedbackBox = ({ id, level, feedback }: FeedbackBoxProps) => (\n  <div\n    className={clsx(styles['feedback-box'], {\n      [styles['feedback-box__success']]: level === 'success',\n      [styles['feedback-box__warning']]: level === 'warning',\n      [styles['feedback-box__error']]: level === 'error',\n    })}\n    id={id}\n  >\n    <Icon name={LEVEL_ICON_MAP[level]} size={16} />\n    {feedback}\n  </div>\n);\n"],"names":["LEVEL_ICON_MAP","FeedbackBox","id","level","feedback","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAWMA,IAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAYaC,IAAc,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,UAAAC,EACvC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,qBAAqB,CAAC,GAAGJ,MAAU;AAAA,IAAA,CAC5C;AAAA,IACD,IAAAD;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAM,EAACC,KAAK,MAAMT,EAAeG,CAAK,GAAG,MAAM,IAAI;AAAA,MAC5CC;AAAA,IAAA;AAAA,EAAA;AACH;"}

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

@@ -3,3 +3,4 @@ import { FeedbackBoxProps } from './FeedbackBox';
 declare const _default: Meta<FeedbackBoxProps>;
 export default _default;
 export declare const FeedbackBoxExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FeedbackBoxProps>;
+export declare const WithElementFeedback: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FeedbackBoxProps>;

package/dist/components/FeedbackBox/FeedbackBox.stories.js

@@ -1,21 +1,36 @@
-import { jsx as o } from "react/jsx-runtime";
-import { FeedbackBox as e } from "./FeedbackBox.js";
-import { Container as c } from "../../storyComponents/Container/Container.js";
-const a = "<FeedbackBox id={id} level={level} feedback={feedback} />", i = {
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { FeedbackBox as c } from "./FeedbackBox.js";
+import { Container as o } from "../../storyComponents/Container/Container.js";
+import { Repeater as t } from "../Repeater/Repeater.js";
+const i = "<FeedbackBox id={id} level={level} feedback={feedback} />", p = {
   title: "Molecules/FeedbackBox",
-  component: e,
+  component: c,
   parameters: {
-    inspectComponent: e,
-    codeString: a
+    inspectComponent: c,
+    codeString: i
   }
-}, d = (t) => /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(e, { ...t }) }), s = d.bind({});
-s.args = {
+}, a = (l) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(c, { ...l }) }), n = a.bind({});
+n.args = {
   id: "gba0d2d4",
   level: "success",
   feedback: "Example FeedbackBox text"
 };
+const r = a.bind({});
+r.args = {
+  id: "gba0d2d4",
+  level: "success",
+  feedback: /* @__PURE__ */ d(t, { children: [
+    /* @__PURE__ */ e("h2", { children: "FeedbackElement" }),
+    /* @__PURE__ */ d("ul", { children: [
+      /* @__PURE__ */ e("li", { children: "Feedback 1" }),
+      /* @__PURE__ */ e("li", { children: "Feedback 2" }),
+      /* @__PURE__ */ e("li", { children: "Feedback 3" })
+    ] })
+  ] })
+};
 export {
-  s as FeedbackBoxExample,
-  i as default
+  n as FeedbackBoxExample,
+  r as WithElementFeedback,
+  p as default
 };
 //# sourceMappingURL=FeedbackBox.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBox.stories.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FeedbackBoxProps } from './FeedbackBox';\n\nimport { FeedbackBox } from './FeedbackBox';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FeedbackBox id={id} level={level} feedback={feedback} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/FeedbackBox',\n  component: FeedbackBox,\n  parameters: {\n    inspectComponent: FeedbackBox,\n    codeString,\n  },\n} as Meta<FeedbackBoxProps>;\n\nconst Template: StoryFn<FeedbackBoxProps> = (args) => (\n  <Container>\n    <FeedbackBox {...args} />\n  </Container>\n);\n\nexport const FeedbackBoxExample = Template.bind({});\nFeedbackBoxExample.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: 'Example FeedbackBox text',\n};\n"],"names":["codeString","FeedbackBox_stories","FeedbackBox","Template","args","jsx","Container","FeedbackBoxExample"],"mappings":";;;AAOA,MAAMA,IAAa,6DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAA,CAAM,EACzB,CAAA,GAGWG,IAAqBJ,EAAS,KAAK,CAAE,CAAA;AAClDI,EAAmB,OAAO;AAAA,EACxB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,UAAU;AACZ;"}
+{"version":3,"file":"FeedbackBox.stories.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FeedbackBoxProps } from './FeedbackBox';\n\nimport { FeedbackBox } from './FeedbackBox';\n\nimport { Container } from 'storyComponents/Container';\nimport { Repeater } from 'components/Repeater';\n\nconst codeString = '<FeedbackBox id={id} level={level} feedback={feedback} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/FeedbackBox',\n  component: FeedbackBox,\n  parameters: {\n    inspectComponent: FeedbackBox,\n    codeString,\n  },\n} as Meta<FeedbackBoxProps>;\n\nconst Template: StoryFn<FeedbackBoxProps> = (args) => (\n  <Container>\n    <FeedbackBox {...args} />\n  </Container>\n);\n\nexport const FeedbackBoxExample = Template.bind({});\nFeedbackBoxExample.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: 'Example FeedbackBox text',\n};\n\nexport const WithElementFeedback = Template.bind({});\nWithElementFeedback.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: (\n    <Repeater>\n      <h2>FeedbackElement</h2>\n      <ul>\n        <li>Feedback 1</li>\n        <li>Feedback 2</li>\n        <li>Feedback 3</li>\n      </ul>\n    </Repeater>\n  ),\n};\n"],"names":["codeString","FeedbackBox_stories","FeedbackBox","Template","args","jsx","Container","FeedbackBoxExample","WithElementFeedback","Repeater"],"mappings":";;;;AAQA,MAAMA,IAAa,6DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAA,CAAM,EACzB,CAAA,GAGWG,IAAqBJ,EAAS,KAAK,CAAE,CAAA;AAClDI,EAAmB,OAAO;AAAA,EACxB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,UAAU;AACZ;AAEO,MAAMC,IAAsBL,EAAS,KAAK,CAAE,CAAA;AACnDK,EAAoB,OAAO;AAAA,EACzB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,4BACGC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAJ,EAAC,QAAG,UAAe,kBAAA,CAAA;AAAA,sBAClB,MACC,EAAA,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAG,UAAU,aAAA,CAAA;AAAA,MACd,gBAAAA,EAAC,QAAG,UAAU,aAAA,CAAA;AAAA,MACd,gBAAAA,EAAC,QAAG,UAAU,aAAA,CAAA;AAAA,IAAA,EAChB,CAAA;AAAA,EAAA,EACF,CAAA;AAEJ;"}

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

@@ -4,6 +4,8 @@ export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
     outerSpace?: boolean;
     /** true if the label and input field should be rendered on the same row; otherwise, false. The default is false. */
     inline?: boolean;
+    /** to be used in combination with 'inline'; true if the label and input field should be rendered on start of the same row; otherwise, false. The default is false. */
+    alignStart?: 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;
+export declare const FormField: ({ children, outerSpace, inline, alignStart, ...rest }: PropsWithChildren<FormFieldProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormField/FormField.js

@@ -1,21 +1,23 @@
-import { jsx as l } from "react/jsx-runtime";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import '../../assets/FormField.css';const e = {
-  "form-field": "_form-field_18714_1",
-  "form-field--outerspace": "_form-field--outerspace_18714_7",
-  "form-field--inline": "_form-field--inline_18714_11"
-}, t = ({ children: f, outerSpace: o, inline: i, ...r }) => /* @__PURE__ */ l(
+import { jsx as m } from "react/jsx-runtime";
+import { c as s } from "../../clsx-OuTLNxxd.js";
+import '../../assets/FormField.css';const f = {
+  "form-field": "_form-field_hcyqx_1",
+  "form-field--outerspace": "_form-field--outerspace_hcyqx_7",
+  "form-field--inline": "_form-field--inline_hcyqx_11",
+  "form-field--align-start": "_form-field--align-start_hcyqx_16"
+}, a = ({ children: e, outerSpace: i, inline: r, alignStart: o, ...l }) => /* @__PURE__ */ m(
   "div",
   {
-    className: m(e["form-field"], {
-      [e["form-field--outerspace"]]: o,
-      [e["form-field--inline"]]: i
+    className: s(f["form-field"], {
+      [f["form-field--outerspace"]]: i,
+      [f["form-field--inline"]]: r,
+      [f["form-field--align-start"]]: o
     }),
-    ...r,
-    children: f
+    ...l,
+    children: e
   }
 );
 export {
-  t as FormField
+  a as FormField
 };
 //# sourceMappingURL=FormField.js.map

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  /** 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;"}
+{"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  /** to be used in combination with 'inline'; true if the label and input field should be rendered on start of the same row; otherwise, false. The default is false. */\n  alignStart?: boolean;\n}\n\n/** Represents an element to wrap a label and input field. */\nexport const FormField = ({ children, outerSpace, inline, alignStart, ...rest }: PropsWithChildren<FormFieldProps>) => (\n  <div\n    className={classNames(styles['form-field'], {\n      [styles['form-field--outerspace']]: outerSpace,\n      [styles['form-field--inline']]: inline,\n      [styles['form-field--align-start']]: alignStart,\n    })}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n"],"names":["FormField","children","outerSpace","inline","alignStart","rest","jsx","classNames","styles"],"mappings":";;;;;;;GAgBaA,IAAY,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,YAAAC,GAAY,GAAGC,EAAA,MACvE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,YAAY,GAAG;AAAA,MAC1C,CAACA,EAAO,wBAAwB,CAAC,GAAGN;AAAA,MACpC,CAACM,EAAO,oBAAoB,CAAC,GAAGL;AAAA,MAChC,CAACK,EAAO,yBAAyB,CAAC,GAAGJ;AAAA,IAAA,CACtC;AAAA,IACA,GAAGC;AAAA,IAEH,UAAAJ;AAAA,EAAA;AACH;"}

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

@@ -1,9 +1,9 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, 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 = {
+import { Label as n } from "../Label/Label.js";
+import { Container as a } from "../../storyComponents/Container/Container.js";
+const i = "<FormField>{children}</FormField>", h = {
   title: "Atoms/FormField",
   component: o,
   argTypes: {
@@ -12,30 +12,34 @@ const a = "<FormField>{children}</FormField>", b = {
     },
     inline: {
       control: "boolean"
+    },
+    alignStart: {
+      control: "boolean"
     }
   },
   parameters: {
     inspectComponent: o,
-    codeString: a
+    codeString: i
   }
-}, m = (l) => /* @__PURE__ */ r(n, { children: [
-  /* @__PURE__ */ r(o, { ...l, children: [
-    /* @__PURE__ */ e(i, { htmlFor: "d6aa53fd", children: "Example label 1" }),
+}, m = (r) => /* @__PURE__ */ l(a, { children: [
+  /* @__PURE__ */ l(o, { ...r, children: [
+    /* @__PURE__ */ e(n, { htmlFor: "d6aa53fd", children: "Example label" }),
     /* @__PURE__ */ e(t, { id: "d6aa53fd" })
   ] }),
-  /* @__PURE__ */ r(o, { ...l, children: [
-    /* @__PURE__ */ e(i, { htmlFor: "4e7a2f22", children: "Example label 2" }),
+  /* @__PURE__ */ l(o, { ...r, children: [
+    /* @__PURE__ */ e(n, { htmlFor: "4e7a2f22", children: "Example very very very long label to display input alingment compared to label" }),
     /* @__PURE__ */ e(t, { id: "4e7a2f22" })
   ] })
 ] }), d = {
   outerSpace: !1,
-  inline: !1
-}, c = m.bind({});
-c.args = {
+  inline: !1,
+  alignStart: !1
+}, p = m.bind({});
+p.args = {
   ...d
 };
 export {
-  c as FormFieldExample,
-  b as default
+  p as FormFieldExample,
+  h as default
 };
 //# sourceMappingURL=FormField.stories.js.map

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    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,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,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,EAC5B,CAAA;AAAA,GACF,GAGIC,IAA0D;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ;AACV,GAEaC,IAAmBR,EAAS,KAAK,CAAE,CAAA;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    alignStart: {\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</Label>\n      <InputField id=\"d6aa53fd\" />\n    </FormField>\n    <FormField {...args}>\n      <Label htmlFor=\"4e7a2f22\">Example very very very long label to display input alingment compared to label</Label>\n      <InputField id=\"4e7a2f22\" />\n    </FormField>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FormFieldProps>> = {\n  outerSpace: false,\n  inline: false,\n  alignStart: 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,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,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,UAAa,iBAAA;AAAA,IACvC,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,UAA8E,kFAAA;AAAA,IACxG,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,EAC5B,CAAA;AAAA,GACF,GAGIC,IAA0D;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AACd,GAEaC,IAAmBR,EAAS,KAAK,CAAE,CAAA;AAChDQ,EAAiB,OAAO;AAAA,EACtB,GAAGD;AACL;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.7.0",
+  "version": "3.9.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -64,9 +64,9 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.14.0",
-    "@types/react-dom": "^19.1.1",
-    "@types/react": "^19.1.0",
+    "@types/node": "^22.14.1",
+    "@types/react-dom": "^19.1.2",
+    "@types/react": "^19.1.1",
     "@uva-glass/eslint-config": "^1.3.10",
     "@uva-glass/stylelint-config": "^1.2.2",
     "@vitejs/plugin-react": "^4.3.4",
@@ -80,7 +80,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest": "^29.7.0",
-    "jsdom": "^26.0.0",
+    "jsdom": "^26.1.0",
     "npm-run-all2": "^7.0.2",
     "react-dom": "^18.3.1",
     "react-router": "^7.5.0",
@@ -95,11 +95,11 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
     "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-lib-inject-css": "^2.2.1",
-    "vite-plugin-static-copy": "^2.3.0",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-static-copy": "^2.3.1",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vite": "^6.2.5"
+    "vite": "^6.2.6"
   },
   "dependencies": {
     "@babel/preset-env": "^7.26.9",
@@ -112,9 +112,9 @@
     "lexical": "^0.30.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.39.0",
-    "@rspack/binding-darwin-arm64": "1.3.3",
-    "@rspack/binding-linux-x64-gnu": "1.3.3",
-    "@ast-grep/napi-linux-x64-gnu": "0.36.2"
+    "@rollup/rollup-linux-x64-gnu": "^4.40.0",
+    "@rspack/binding-darwin-arm64": "1.3.4",
+    "@rspack/binding-linux-x64-gnu": "1.3.4",
+    "@ast-grep/napi-linux-x64-gnu": "0.36.3"
   }
 }