@uva-glass/component-library 3.43.1 → 3.45.0

package/dist/components/ControlsButton/ControlsButton.stories.js

@@ -1,8 +1,9 @@
-import { jsx as n, jsxs as a, Fragment as r } from "react/jsx-runtime";
-import { l as o } from "../../index-BamlKH-k.js";
+import { jsx as r, jsxs as l, Fragment as s } from "react/jsx-runtime";
+import { l as e } from "../../index-DvUwfXNb.js";
 import { ControlsButton as t } from "./ControlsButton.js";
-import { Icons as c } from "../Icon/icons/index.js";
-const i = Object.keys(c), s = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", S = {
+import { Icons as a } from "../Icon/icons/index.js";
+import { Periods as i } from "../Periods/Periods.js";
+const c = Object.keys(a), m = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", C = {
   title: "Atoms/ControlsButton",
   component: t,
   argTypes: {
@@ -14,7 +15,7 @@ const i = Object.keys(c), s = "<ControlsButton type={radio or checkbox} label={}
     },
     iconName: {
       control: { type: "select" },
-      options: i
+      options: c
     },
     forceSquared: {
       control: "boolean"
@@ -33,51 +34,95 @@ const i = Object.keys(c), s = "<ControlsButton type={radio or checkbox} label={}
   },
   parameters: {
     inspectComponent: t,
-    codeString: s
+    codeString: m
   }
-}, e = (l) => /* @__PURE__ */ n(t, { ...l }), p = e.bind({});
-p.args = {
+}, o = (n) => /* @__PURE__ */ r(t, { ...n }), b = o.bind({});
+b.args = {
   type: "checkbox",
   label: "1.2",
   value: "1.2",
   forceSquared: !0,
-  onSetValue: o()
+  onSetValue: e()
 };
-const b = e.bind({});
-b.args = {
+const p = o.bind({});
+p.args = {
   type: "checkbox",
   label: "1.3",
   value: "1.3",
   prefix: "13",
-  onSetValue: o()
+  onSetValue: e()
 };
-const u = e.bind({});
-u.args = {
+const d = o.bind({});
+d.args = {
   type: "checkbox",
   label: "2.1",
   value: "2.1",
   iconName: "AcademicCap",
-  onSetValue: o()
+  onSetValue: e()
 };
-const d = e.bind({});
-d.args = {
+const u = o.bind({});
+u.args = {
   type: "checkbox",
   label: "5",
   value: "5",
   prefix: "40",
-  tooltip: /* @__PURE__ */ a(r, { children: [
+  tooltip: /* @__PURE__ */ l(s, { children: [
     "15 dec - 19 dec",
-    /* @__PURE__ */ n("br", {}),
+    /* @__PURE__ */ r("br", {}),
     "2025"
   ] }),
   tooltipPosition: "center",
-  onSetValue: o()
+  onSetValue: e()
+};
+const x = o.bind({});
+x.args = {
+  type: "checkbox",
+  label: /* @__PURE__ */ r(
+    i,
+    {
+      periods: [
+        {
+          id: "2023P1",
+          number: 1,
+          semesterNumber: 1,
+          periodInSemester: 1
+        },
+        {
+          id: "2023P2",
+          number: 2,
+          semesterNumber: 1,
+          periodInSemester: 2
+        },
+        {
+          id: "2023P3",
+          number: 3,
+          semesterNumber: 1,
+          periodInSemester: 3
+        },
+        {
+          id: "2023P5",
+          number: 5,
+          semesterNumber: 2,
+          periodInSemester: 2
+        },
+        {
+          id: "2023P7",
+          number: 7,
+          semesterNumber: 3,
+          periodInSemester: 1
+        }
+      ]
+    }
+  ),
+  value: "5",
+  onSetValue: e()
 };
 export {
-  p as ControlsButtonExample,
-  u as WithIcon,
-  b as WithPrefix,
-  d as WithTooltip,
-  S as default
+  b as ControlsButtonExample,
+  x as WithComplexLabel,
+  d as WithIcon,
+  p as WithPrefix,
+  u as WithTooltip,
+  C as default
 };
 //# sourceMappingURL=ControlsButton.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nimport { Icons } from 'components/Icon/icons';\r\n\r\nconst iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\r\n\r\nconst codeString =\r\n  '<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/ControlsButton',\r\n  component: ControlsButton,\r\n  argTypes: {\r\n    label: {\r\n      control: 'text',\r\n    },\r\n    value: {\r\n      control: 'string',\r\n    },\r\n    iconName: {\r\n      control: { type: 'select' },\r\n      options: iconNames,\r\n    },\r\n    forceSquared: {\r\n      control: 'boolean',\r\n    },\r\n    isChecked: {\r\n      control: 'boolean',\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n    },\r\n    onSetValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: ControlsButton,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n  type: 'checkbox',\r\n  label: '1.2',\r\n  value: '1.2',\r\n  forceSquared: true,\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithPrefix = Template.bind({});\r\nWithPrefix.args = {\r\n  type: 'checkbox',\r\n  label: '1.3',\r\n  value: '1.3',\r\n  prefix: '13',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithIcon = Template.bind({});\r\nWithIcon.args = {\r\n  type: 'checkbox',\r\n  label: '2.1',\r\n  value: '2.1',\r\n  iconName: 'AcademicCap',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithTooltip = Template.bind({});\r\nWithTooltip.args = {\r\n  type: 'checkbox',\r\n  label: '5',\r\n  value: '5',\r\n  prefix: '40',\r\n  tooltip: (\r\n    <>\r\n      15 dec - 19 dec\r\n      <br />\r\n      2025\r\n    </>\r\n  ),\r\n  tooltipPosition: 'center',\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["iconNames","Icons","codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn","WithPrefix","WithIcon","WithTooltip","jsxs","Fragment"],"mappings":";;;;AASA,MAAMA,IAAY,OAAO,KAAKC,CAAK,GAE7BC,IACJ,0KAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS,EAAE,MAAM,SAAA;AAAA,MACjB,SAASJ;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBI;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAA,CAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAA;AACd;AAEO,MAAMC,IAAaL,EAAS,KAAK,CAAA,CAAE;AAC1CK,EAAW,OAAO;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAYD,EAAA;AACd;AAEO,MAAME,IAAWN,EAAS,KAAK,CAAA,CAAE;AACxCM,EAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAYF,EAAA;AACd;AAEO,MAAMG,IAAcP,EAAS,KAAK,CAAA,CAAE;AAC3CO,EAAY,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SACE,gBAAAC,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,sBAEC,MAAA,EAAG;AAAA,IAAE;AAAA,EAAA,GAER;AAAA,EAEF,iBAAiB;AAAA,EACjB,YAAYL,EAAA;AACd;"}
+{"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nimport { Icons } from 'components/Icon/icons';\r\nimport { Periods } from 'components/Periods';\r\n\r\nconst iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\r\n\r\nconst codeString =\r\n  '<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/ControlsButton',\r\n  component: ControlsButton,\r\n  argTypes: {\r\n    label: {\r\n      control: 'text',\r\n    },\r\n    value: {\r\n      control: 'string',\r\n    },\r\n    iconName: {\r\n      control: { type: 'select' },\r\n      options: iconNames,\r\n    },\r\n    forceSquared: {\r\n      control: 'boolean',\r\n    },\r\n    isChecked: {\r\n      control: 'boolean',\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n    },\r\n    onSetValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: ControlsButton,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n  type: 'checkbox',\r\n  label: '1.2',\r\n  value: '1.2',\r\n  forceSquared: true,\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithPrefix = Template.bind({});\r\nWithPrefix.args = {\r\n  type: 'checkbox',\r\n  label: '1.3',\r\n  value: '1.3',\r\n  prefix: '13',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithIcon = Template.bind({});\r\nWithIcon.args = {\r\n  type: 'checkbox',\r\n  label: '2.1',\r\n  value: '2.1',\r\n  iconName: 'AcademicCap',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithTooltip = Template.bind({});\r\nWithTooltip.args = {\r\n  type: 'checkbox',\r\n  label: '5',\r\n  value: '5',\r\n  prefix: '40',\r\n  tooltip: (\r\n    <>\r\n      15 dec - 19 dec\r\n      <br />\r\n      2025\r\n    </>\r\n  ),\r\n  tooltipPosition: 'center',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithComplexLabel = Template.bind({});\r\nWithComplexLabel.args = {\r\n  type: 'checkbox',\r\n  label: (\r\n    <Periods\r\n      periods={[\r\n        {\r\n          id: '2023P1',\r\n          number: 1,\r\n          semesterNumber: 1,\r\n          periodInSemester: 1,\r\n        },\r\n        {\r\n          id: '2023P2',\r\n          number: 2,\r\n          semesterNumber: 1,\r\n          periodInSemester: 2,\r\n        },\r\n        {\r\n          id: '2023P3',\r\n          number: 3,\r\n          semesterNumber: 1,\r\n          periodInSemester: 3,\r\n        },\r\n        {\r\n          id: '2023P5',\r\n          number: 5,\r\n          semesterNumber: 2,\r\n          periodInSemester: 2,\r\n        },\r\n        {\r\n          id: '2023P7',\r\n          number: 7,\r\n          semesterNumber: 3,\r\n          periodInSemester: 1,\r\n        },\r\n      ]}\r\n    />\r\n  ),\r\n  value: '5',\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["iconNames","Icons","codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn","WithPrefix","WithIcon","WithTooltip","jsxs","Fragment","WithComplexLabel","Periods"],"mappings":";;;;;AAUA,MAAMA,IAAY,OAAO,KAAKC,CAAK,GAE7BC,IACJ,0KAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS,EAAE,MAAM,SAAA;AAAA,MACjB,SAASJ;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBI;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAA,CAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAA;AACd;AAEO,MAAMC,IAAaL,EAAS,KAAK,CAAA,CAAE;AAC1CK,EAAW,OAAO;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAYD,EAAA;AACd;AAEO,MAAME,IAAWN,EAAS,KAAK,CAAA,CAAE;AACxCM,EAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAYF,EAAA;AACd;AAEO,MAAMG,IAAcP,EAAS,KAAK,CAAA,CAAE;AAC3CO,EAAY,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SACE,gBAAAC,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,sBAEC,MAAA,EAAG;AAAA,IAAE;AAAA,EAAA,GAER;AAAA,EAEF,iBAAiB;AAAA,EACjB,YAAYL,EAAA;AACd;AAEO,MAAMM,IAAmBV,EAAS,KAAK,CAAA,CAAE;AAChDU,EAAiB,OAAO;AAAA,EACtB,MAAM;AAAA,EACN,OACE,gBAAAR;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,QAEpB;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,QAEpB;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,QAEpB;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,QAEpB;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EAAA;AAAA,EAGJ,OAAO;AAAA,EACP,YAAYP,EAAA;AACd;"}

package/dist/components/Drawer/Drawer.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
-import { l as m } from "../../index-BamlKH-k.js";
+import { l as m } from "../../index-DvUwfXNb.js";
 import { useState as c } from "react";
 import { Drawer as r } from "./Drawer.js";
 import { Button as o } from "../Buttons/Button.js";

package/dist/components/FormInput/FormInput.js

@@ -17,12 +17,13 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-DaKDRL4G.js";
+import "../../TablePlugin-4Zj0xZie.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
 import "react-dom";
 import "../../index-yEhaxKq-.js";
+import "../SearchField/SearchField.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
@@ -34,7 +35,7 @@ import '../../assets/FormInput.css';const o = {
   "form-input__input-feedback-container": "_form-input__input-feedback-container_c0vpz_25",
   "form-input__input-container": "_form-input__input-container_c0vpz_35",
   "form-input__input": "_form-input__input_c0vpz_25"
-}, X = ({
+}, Y = ({
   id: i,
   label: n,
   labelPosition: f = "top",
@@ -66,6 +67,6 @@ import '../../assets/FormInput.css';const o = {
   return u ? c : /* @__PURE__ */ t("div", { className: v(o["form-input__container"], o[`form-input__container--label-${f}`]), children: c });
 };
 export {
-  X as FormInput
+  Y as FormInput
 };
 //# sourceMappingURL=FormInput.js.map

package/dist/components/FormInput/FormInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n  /** The id of the input element. */\n  id: string;\n  /** label text if empthy the label is not renderd */\n  label: string;\n  /** label position `top` or `left`. The default is `top`. */\n  labelPosition?: 'top' | 'left';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email' | 'number';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange?: (value: string) => void;\n  /** Determines if the container wrapper is rendered. */\n  noContainer?: boolean;\n  /** Optional custom input that will replace the default input */\n  customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n  id,\n  label,\n  labelPosition = 'top',\n  type = 'text',\n  required = false,\n  notValidatedText = '',\n  onChange,\n  noContainer = false,\n  customInput,\n}: FormInputProps) => {\n  const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n    ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (typeof onChange === 'function') {\n      onChange(event.target.value);\n    }\n  };\n\n  const componentContent = (\n    <>\n      {label && (\n        <Label htmlFor={id} required={required} alignRight>\n          {label}\n        </Label>\n      )}\n\n      <div className={styles['form-input__input-feedback-container']}>\n        {customInput ? (\n          customInput\n        ) : (\n          <div className={styles['form-input__input-container']}>\n            <input\n              id={id}\n              type={type}\n              {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n              onChange={handleChange}\n              className={styles['form-input__input']}\n            />\n          </div>\n        )}\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </>\n  );\n\n  return noContainer ? (\n    componentContent\n  ) : (\n    <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n      {componentContent}\n    </div>\n  );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAA,GAE9CC,IAAe,CAACD,MAA+C;AACnE,IAAI,OAAOJ,KAAa,cACtBA,EAASI,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEME,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBACEc,GAAA,EAAM,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAY,EAAC,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UAAAU,GACH;AAEJ;"}
+{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n  /** The id of the input element. */\n  id: string;\n  /** label text if empthy the label is not renderd */\n  label: string;\n  /** label position `top` or `left`. The default is `top`. */\n  labelPosition?: 'top' | 'left';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email' | 'number';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange?: (value: string) => void;\n  /** Determines if the container wrapper is rendered. */\n  noContainer?: boolean;\n  /** Optional custom input that will replace the default input */\n  customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n  id,\n  label,\n  labelPosition = 'top',\n  type = 'text',\n  required = false,\n  notValidatedText = '',\n  onChange,\n  noContainer = false,\n  customInput,\n}: FormInputProps) => {\n  const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n    ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (typeof onChange === 'function') {\n      onChange(event.target.value);\n    }\n  };\n\n  const componentContent = (\n    <>\n      {label && (\n        <Label htmlFor={id} required={required} alignRight>\n          {label}\n        </Label>\n      )}\n\n      <div className={styles['form-input__input-feedback-container']}>\n        {customInput ? (\n          customInput\n        ) : (\n          <div className={styles['form-input__input-container']}>\n            <input\n              id={id}\n              type={type}\n              {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n              onChange={handleChange}\n              className={styles['form-input__input']}\n            />\n          </div>\n        )}\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </>\n  );\n\n  return noContainer ? (\n    componentContent\n  ) : (\n    <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n      {componentContent}\n    </div>\n  );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAA,GAE9CC,IAAe,CAACD,MAA+C;AACnE,IAAI,OAAOJ,KAAa,cACtBA,EAASI,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEME,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBACEc,GAAA,EAAM,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAY,EAAC,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UAAAU,GACH;AAEJ;"}

package/dist/components/FormInput/FormInput.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { l as i } from "../../index-BamlKH-k.js";
+import { l as i } from "../../index-DvUwfXNb.js";
 import { FormInput as a } from "./FormInput.js";
 import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
 const m = `

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

@@ -473,6 +473,12 @@ export declare const Icons: {
         desc?: string;
         descId?: string;
     }>;
+    Magnify: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
     MiniCheck: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
         title?: string;
         titleId?: string;