@uva-glass/component-library 3.3.0 → 3.5.0

package/dist/components/Label/Label.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-Z7qwJmRM.js";
-import { r as t, s as l } from "../../react.esm-B8teOYlo.js";
+import "../../index-dmBn99rF.js";
+import { r as t, s as l } from "../../react.esm-DI5ilWeT.js";
 import { Label as r } from "./Label.js";
 describe("Label", () => {
   it("should render", () => {

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,42 +1,43 @@
-import { jsxs as g, Fragment as u, jsx as i } from "react/jsx-runtime";
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
 import { useState as h } from "react";
-import { c as f } from "../../clsx-OuTLNxxd.js";
+import { c as m } from "../../clsx-OuTLNxxd.js";
 import { RadioButton as k } from "../RadioButton/RadioButton.js";
-import '../../assets/RadioGroup.css';const a = {
-  "radio-group__header": "_radio-group__header_omi6f_1",
-  "radio-group": "_radio-group_omi6f_1",
-  "radio-group__option": "_radio-group__option_omi6f_16",
-  "radio-group__option--disabled": "_radio-group__option--disabled_omi6f_31"
-}, j = ({ label: d, options: n, onChange: p, disabled: t }) => {
-  const [s, c] = h(null), _ = (o) => {
-    t || (c(o), p(o));
+import '../../assets/RadioGroup.css';const r = {
+  "radio-group__wrapper": "_radio-group__wrapper_1khqv_1",
+  "radio-group__header": "_radio-group__header_1khqv_7",
+  "radio-group": "_radio-group_1khqv_1",
+  "radio-group__option": "_radio-group__option_1khqv_21",
+  "radio-group__option--disabled": "_radio-group__option--disabled_1khqv_36"
+}, x = ({ label: d, options: t, onChange: n, disabled: _ }) => {
+  const [s, c] = h(null), p = (o) => {
+    _ || (c(o), n(o));
   };
-  return /* @__PURE__ */ g(u, { children: [
-    /* @__PURE__ */ i("h2", { className: a["radio-group__header"], children: d }),
-    /* @__PURE__ */ i("div", { className: a["radio-group"], children: n.map(({ id: o, descriptionLabel: l, titleLabel: m, value: r }) => /* @__PURE__ */ i(
+  return /* @__PURE__ */ u("div", { className: r["radio-group__wrapper"], children: [
+    /* @__PURE__ */ i("h2", { className: r["radio-group__header"], children: d }),
+    /* @__PURE__ */ i("div", { className: r["radio-group"], children: t.map(({ id: o, descriptionLabel: g, titleLabel: l, value: e }) => /* @__PURE__ */ i(
       "div",
       {
-        className: f(a["radio-group__option"], {
-          [a["radio-group__option--disabled"]]: t
+        className: m(r["radio-group__option"], {
+          [r["radio-group__option--disabled"]]: _
         }),
-        onClick: () => _(r),
-        onKeyDown: (e) => {
-          (e.key === "Enter" || e.key === " ") && _(r);
+        onClick: () => p(e),
+        onKeyDown: (a) => {
+          (a.key === "Enter" || a.key === " ") && p(e);
         },
         role: "presentation",
         children: /* @__PURE__ */ i(
           k,
           {
             id: o,
-            label: m,
-            description: l,
+            label: l,
+            description: g,
             name: d,
-            onChange: (e) => {
-              _(e.target.value);
+            onChange: (a) => {
+              p(a.target.value);
             },
-            value: r,
-            checked: s === r,
-            disabled: t,
+            value: e,
+            checked: s === e,
+            disabled: _,
             gap: "large"
           }
         )
@@ -46,6 +47,6 @@ import '../../assets/RadioGroup.css';const a = {
   ] });
 };
 export {
-  j as RadioGroup
+  x as RadioGroup
 };
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './RadioGroup.module.css';\n\nimport { RadioButton } from 'components/RadioButton/RadioButton';\n\ntype Option = {\n  id: string;\n  titleLabel: string;\n  descriptionLabel?: string;\n  value: string;\n};\n\nexport interface RadioGroupProps {\n  /** The label of the radio group */\n  label: string;\n  /** Radio options. */\n  options: Option[];\n  /** Returns selected values as string */\n  onChange: (value: string) => void;\n  /** If true, the whole group will be disabled. */\n  disabled?: boolean;\n}\n\n/** Represents a component for dispalying grouped styled radio buttons. */\nexport const RadioGroup = ({ label, options, onChange, disabled }: RadioGroupProps) => {\n  const [selectedValue, setSelectedValue] = useState<string | null>(null);\n\n  const handleSelection = (value: string) => {\n    if (!disabled) {\n      setSelectedValue(value);\n      onChange(value);\n    }\n  };\n\n  return (\n    <>\n      <h2 className={styles['radio-group__header']}>{label}</h2>\n      <div className={styles['radio-group']}>\n        {options.map(({ id, descriptionLabel, titleLabel, value }) => (\n          <div\n            className={clsx(styles['radio-group__option'], {\n              [styles['radio-group__option--disabled']]: disabled,\n            })}\n            key={id}\n            onClick={() => handleSelection(value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                handleSelection(value);\n              }\n            }}\n            role=\"presentation\"\n          >\n            <RadioButton\n              id={id}\n              label={titleLabel}\n              description={descriptionLabel}\n              name={label}\n              onChange={(event) => {\n                handleSelection(event.target.value);\n              }}\n              value={value}\n              checked={selectedValue === value}\n              disabled={disabled}\n              gap=\"large\"\n            />\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["RadioGroup","label","options","onChange","disabled","selectedValue","setSelectedValue","useState","handleSelection","value","jsxs","Fragment","jsx","styles","id","descriptionLabel","titleLabel","clsx","event","RadioButton"],"mappings":";;;;;;;;;GA0BaA,IAAa,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,QAAgC;AACrF,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAwB,IAAI,GAEhEC,IAAkB,CAACC,MAAkB;AACzC,IAAKL,MACHE,EAAiBG,CAAK,GACtBN,EAASM,CAAK;AAAA,EAElB;AAEA,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAAC,MAAG,EAAA,WAAWC,EAAO,qBAAqB,GAAI,UAAMZ,GAAA;AAAA,IACpD,gBAAAW,EAAA,OAAA,EAAI,WAAWC,EAAO,aAAa,GACjC,UAAAX,EAAQ,IAAI,CAAC,EAAE,IAAAY,GAAI,kBAAAC,GAAkB,YAAAC,GAAY,OAAAP,QAChD,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWK,EAAKJ,EAAO,qBAAqB,GAAG;AAAA,UAC7C,CAACA,EAAO,+BAA+B,CAAC,GAAGT;AAAA,QAAA,CAC5C;AAAA,QAED,SAAS,MAAMI,EAAgBC,CAAK;AAAA,QACpC,WAAW,CAACS,MAAU;AACpB,WAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QACzCV,EAAgBC,CAAK;AAAA,QAEzB;AAAA,QACA,MAAK;AAAA,QAEL,UAAA,gBAAAG;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAAL;AAAA,YACA,OAAOE;AAAA,YACP,aAAaD;AAAA,YACb,MAAMd;AAAA,YACN,UAAU,CAACiB,MAAU;AACH,cAAAV,EAAAU,EAAM,OAAO,KAAK;AAAA,YACpC;AAAA,YACA,OAAAT;AAAA,YACA,SAASJ,MAAkBI;AAAA,YAC3B,UAAAL;AAAA,YACA,KAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,MArBKU;AAAA,IAAA,CAuBR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './RadioGroup.module.css';\n\nimport { RadioButton } from 'components/RadioButton/RadioButton';\n\ntype Option = {\n  id: string;\n  titleLabel: string;\n  descriptionLabel?: string;\n  value: string;\n};\n\nexport interface RadioGroupProps {\n  /** The label of the radio group */\n  label: string;\n  /** Radio options. */\n  options: Option[];\n  /** Returns selected values as string */\n  onChange: (value: string) => void;\n  /** If true, the whole group will be disabled. */\n  disabled?: boolean;\n}\n\n/** Represents a component for dispalying grouped styled radio buttons. */\nexport const RadioGroup = ({ label, options, onChange, disabled }: RadioGroupProps) => {\n  const [selectedValue, setSelectedValue] = useState<string | null>(null);\n\n  const handleSelection = (value: string) => {\n    if (!disabled) {\n      setSelectedValue(value);\n      onChange(value);\n    }\n  };\n\n  return (\n    <div className={styles['radio-group__wrapper']}>\n      <h2 className={styles['radio-group__header']}>{label}</h2>\n      <div className={styles['radio-group']}>\n        {options.map(({ id, descriptionLabel, titleLabel, value }) => (\n          <div\n            className={clsx(styles['radio-group__option'], {\n              [styles['radio-group__option--disabled']]: disabled,\n            })}\n            key={id}\n            onClick={() => handleSelection(value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                handleSelection(value);\n              }\n            }}\n            role=\"presentation\"\n          >\n            <RadioButton\n              id={id}\n              label={titleLabel}\n              description={descriptionLabel}\n              name={label}\n              onChange={(event) => {\n                handleSelection(event.target.value);\n              }}\n              value={value}\n              checked={selectedValue === value}\n              disabled={disabled}\n              gap=\"large\"\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["RadioGroup","label","options","onChange","disabled","selectedValue","setSelectedValue","useState","handleSelection","value","jsxs","styles","jsx","id","descriptionLabel","titleLabel","clsx","event","RadioButton"],"mappings":";;;;;;;;;;GA0BaA,IAAa,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,QAAgC;AACrF,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAwB,IAAI,GAEhEC,IAAkB,CAACC,MAAkB;AACzC,IAAKL,MACHE,EAAiBG,CAAK,GACtBN,EAASM,CAAK;AAAA,EAElB;AAEA,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,sBAAsB,GAC3C,UAAA;AAAA,IAAA,gBAAAC,EAAC,MAAG,EAAA,WAAWD,EAAO,qBAAqB,GAAI,UAAMV,GAAA;AAAA,IACpD,gBAAAW,EAAA,OAAA,EAAI,WAAWD,EAAO,aAAa,GACjC,UAAAT,EAAQ,IAAI,CAAC,EAAE,IAAAW,GAAI,kBAAAC,GAAkB,YAAAC,GAAY,OAAAN,QAChD,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI,EAAKL,EAAO,qBAAqB,GAAG;AAAA,UAC7C,CAACA,EAAO,+BAA+B,CAAC,GAAGP;AAAA,QAAA,CAC5C;AAAA,QAED,SAAS,MAAMI,EAAgBC,CAAK;AAAA,QACpC,WAAW,CAACQ,MAAU;AACpB,WAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QACzCT,EAAgBC,CAAK;AAAA,QAEzB;AAAA,QACA,MAAK;AAAA,QAEL,UAAA,gBAAAG;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,IAAAL;AAAA,YACA,OAAOE;AAAA,YACP,aAAaD;AAAA,YACb,MAAMb;AAAA,YACN,UAAU,CAACgB,MAAU;AACH,cAAAT,EAAAS,EAAM,OAAO,KAAK;AAAA,YACpC;AAAA,YACA,OAAAR;AAAA,YACA,SAASJ,MAAkBI;AAAA,YAC3B,UAAAL;AAAA,YACA,KAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,MArBKS;AAAA,IAAA,CAuBR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/RadioGroup/Radiogroup.test.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
-import "../../index-Z7qwJmRM.js";
-import { r as l, s as t, f as s } from "../../react.esm-B8teOYlo.js";
+import "../../index-dmBn99rF.js";
+import { r as l, s as t, f as s } from "../../react.esm-DI5ilWeT.js";
 import { RadioGroup as a } from "./RadioGroup.js";
 const i = [
   { id: "1", titleLabel: "Option 1", value: "option1" },

package/dist/components/StatusBadge/StatusBadge.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-Z7qwJmRM.js";
-import { r as t, s } from "../../react.esm-B8teOYlo.js";
+import "../../index-dmBn99rF.js";
+import { r as t, s } from "../../react.esm-DI5ilWeT.js";
 import { StatusBadge as a } from "./StatusBage.js";
 describe("StatusBadge", () => {
   it("should render with message", () => {

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,9 @@
+export interface TextAreaProps {
+    /** Returns entered values as trimmed string */
+    onChange: (value: string) => void;
+    /** The label for the text area */
+    label?: string;
+    /** The max amount of allowed charecters in the text area */
+    maxCharacters?: number;
+}
+export declare function TextArea({ onChange, label, maxCharacters }: TextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,39 @@
+import { jsxs as r, jsx as _ } from "react/jsx-runtime";
+import { useRef as u, useState as i } from "react";
+import { c as x } from "../../clsx-OuTLNxxd.js";
+import '../../assets/TextArea.css';const t = {
+  "text-area__wrapper": "_text-area__wrapper_13ivw_1",
+  "text-area__header": "_text-area__header_13ivw_7",
+  "text-area__label": "_text-area__label_13ivw_13",
+  "text-area__word-count": "_text-area__word-count_13ivw_20",
+  "text-area__word-count--alert": "_text-area__word-count--alert_13ivw_25",
+  "text-area": "_text-area_13ivw_1"
+};
+function h({ onChange: l, label: c, maxCharacters: a = 0 }) {
+  const e = u(null), [n, o] = i(0), s = () => {
+    e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, o(e.current.value.length), l(e.current.value.trim()));
+  };
+  return /* @__PURE__ */ r("div", { className: t["text-area__wrapper"], children: [
+    /* @__PURE__ */ r("div", { className: t["text-area__header"], children: [
+      /* @__PURE__ */ _("span", { className: t["text-area__label"], children: c }),
+      a > 0 && /* @__PURE__ */ r("div", { className: t["text-area__word-count"], children: [
+        /* @__PURE__ */ _("span", { className: x({ [t["text-area__word-count--alert"]]: n === a }), children: n }),
+        " / ",
+        a
+      ] })
+    ] }),
+    /* @__PURE__ */ _(
+      "textarea",
+      {
+        ref: e,
+        className: t["text-area"],
+        maxLength: a > 0 ? a : void 0,
+        onInput: s
+      }
+    )
+  ] });
+}
+export {
+  h as TextArea
+};
+//# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n}\n\nexport function TextArea({ onChange, label, maxCharacters = 0 }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      <div className={styles['text-area__header']}>\n        <span className={styles['text-area__label']}>{label}</span>\n        {maxCharacters > 0 && (\n          <div className={styles['text-area__word-count']}>\n            <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n              {characterCount}\n            </span>\n            &nbsp;/&nbsp;{maxCharacters}\n          </div>\n        )}\n      </div>\n\n      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","maxCharacters","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;AAcO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,KAAoB;AACxE,QAAAC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACFA,EAAA,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEpDG,EAAAH,EAAY,QAAQ,MAAM,MAAM,GAClDH,EAASG,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACG,gBAAAM,EAAA,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACzC,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAI,EAAA,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,kBAAkB,GAAI,UAAMT,GAAA;AAAA,MACnDC,IAAgB,KACf,gBAAAO,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBH,EAAc,CAAC,GACjG,UACHG,EAAA,CAAA;AAAA,QAAO;AAAA,QACOH;AAAA,MAAA,EAChB,CAAA;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWR,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASM;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GACF;AAEJ;"}

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { TextAreaProps } from './TextArea';
+declare const _default: Meta<TextAreaProps>;
+export default _default;
+export declare const TextAreaExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;

package/dist/components/TextArea/TextArea.stories.js

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+import { fn as r } from "../../index-DXR-TB1d.js";
+import { TextArea as e } from "./TextArea.js";
+const o = `
+  <TextArea label={label} maxCharacters={maxCharacters} /> `, x = {
+  title: "Atoms/TextArea",
+  component: e,
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    maxCharacters: {
+      control: "number"
+    }
+  },
+  parameters: {
+    inspectComponent: e,
+    codeString: o
+  }
+}, m = (a) => /* @__PURE__ */ t(e, { ...a }), n = m.bind({});
+n.args = {
+  label: "Sample label",
+  maxCharacters: 140,
+  onChange: r()
+};
+export {
+  n as TextAreaExample,
+  x as default
+};
+//# sourceMappingURL=TextArea.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} /> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    maxCharacters: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: TextArea,\n    codeString: codeString,\n  },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,8DAIJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAE,CAAA;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAUC,EAAG;AACf;"}

package/dist/components/TextArea/TextArea.test.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import "../../index-dmBn99rF.js";
+import { r as n, s as t, f as r } from "../../react.esm-DI5ilWeT.js";
+import { userEvent as s } from "../../index-DXR-TB1d.js";
+import { TextArea as o } from "./TextArea.js";
+describe("TextArea", () => {
+  it("should render correctly with label", () => {
+    n(/* @__PURE__ */ a(o, { onChange: jest.fn(), label: "Test Label" })), expect(t.getByText("Test Label")).toBeInTheDocument();
+  }), it("should call onChange when text is entered", () => {
+    const e = jest.fn();
+    n(/* @__PURE__ */ a(o, { onChange: e }));
+    const l = t.getByRole("textbox");
+    r.input(l, { target: { value: "Hello" } }), expect(e).toHaveBeenCalledWith("Hello");
+  }), it("should update character count", () => {
+    n(/* @__PURE__ */ a(o, { onChange: jest.fn(), label: "Test", maxCharacters: 10 }));
+    const e = t.getByRole("textbox");
+    r.input(e, { target: { value: "Test" } }), expect(t.getByText("4")).toBeInTheDocument(), expect(t.getByText("/ 10")).toBeInTheDocument();
+  }), it("should not exceed max characters limit", async () => {
+    const e = jest.fn();
+    n(/* @__PURE__ */ a(o, { onChange: e, maxCharacters: 5 }));
+    const l = t.getByRole("textbox");
+    await s.type(l, "ExceedsLimit"), expect(e).toHaveBeenCalled(), expect(e.mock.calls[e.mock.calls.length - 1][0].length).toBe(5);
+  });
+});
+//# sourceMappingURL=TextArea.test.js.map

package/dist/components/TextArea/TextArea.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.test.js","sources":["../../../src/components/TextArea/TextArea.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport { userEvent } from '@storybook/test';\n\nimport { TextArea } from './TextArea';\n\ndescribe('TextArea', () => {\n  it('should render correctly with label', () => {\n    render(<TextArea onChange={jest.fn()} label=\"Test Label\" />);\n    expect(screen.getByText('Test Label')).toBeInTheDocument();\n  });\n\n  it('should call onChange when text is entered', () => {\n    const handleChange = jest.fn();\n    render(<TextArea onChange={handleChange} />);\n\n    const textarea = screen.getByRole('textbox');\n    fireEvent.input(textarea, { target: { value: 'Hello' } });\n    expect(handleChange).toHaveBeenCalledWith('Hello');\n  });\n\n  it('should update character count', () => {\n    render(<TextArea onChange={jest.fn()} label=\"Test\" maxCharacters={10} />);\n\n    const textarea = screen.getByRole('textbox');\n    fireEvent.input(textarea, { target: { value: 'Test' } });\n\n    expect(screen.getByText('4')).toBeInTheDocument();\n    expect(screen.getByText('/ 10')).toBeInTheDocument();\n  });\n\n  it('should not exceed max characters limit', async () => {\n    const handleChange = jest.fn();\n    render(<TextArea onChange={handleChange} maxCharacters={5} />);\n\n    const textarea = screen.getByRole('textbox');\n\n    await userEvent.type(textarea, 'ExceedsLimit');\n\n    expect(handleChange).toHaveBeenCalled();\n    // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n    expect(handleChange.mock.calls[handleChange.mock.calls.length - 1][0].length).toBe(5);\n  });\n});\n"],"names":["render","jsx","TextArea","screen","handleChange","textarea","fireEvent","userEvent"],"mappings":";;;;;AAMA,SAAS,YAAY,MAAM;AACzB,KAAG,sCAAsC,MAAM;AACtC,IAAAA,EAAA,gBAAAC,EAACC,KAAS,UAAU,KAAK,MAAM,OAAM,cAAa,CAAE,GAC3D,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC1D,GAED,GAAG,6CAA6C,MAAM;AAC9C,UAAAC,IAAe,KAAK,GAAG;AAC7B,IAAAJ,EAAQ,gBAAAC,EAAAC,GAAA,EAAS,UAAUE,EAAc,CAAA,CAAE;AAErC,UAAAC,IAAWF,EAAO,UAAU,SAAS;AACjC,IAAAG,EAAA,MAAMD,GAAU,EAAE,QAAQ,EAAE,OAAO,QAAA,GAAW,GACjD,OAAAD,CAAY,EAAE,qBAAqB,OAAO;AAAA,EAAA,CAClD,GAED,GAAG,iCAAiC,MAAM;AACjC,IAAAJ,EAAA,gBAAAC,EAACC,GAAS,EAAA,UAAU,KAAK,MAAM,OAAM,QAAO,eAAe,GAAI,CAAA,CAAE;AAElE,UAAAG,IAAWF,EAAO,UAAU,SAAS;AACjC,IAAAG,EAAA,MAAMD,GAAU,EAAE,QAAQ,EAAE,OAAO,OAAA,GAAU,GAEvD,OAAOF,EAAO,UAAU,GAAG,CAAC,EAAE,kBAAkB,GAChD,OAAOA,EAAO,UAAU,MAAM,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACpD,GAED,GAAG,0CAA0C,YAAY;AACjD,UAAAC,IAAe,KAAK,GAAG;AAC7B,IAAAJ,oBAAQE,GAAS,EAAA,UAAUE,GAAc,eAAe,GAAG,CAAE;AAEvD,UAAAC,IAAWF,EAAO,UAAU,SAAS;AAErC,UAAAI,EAAU,KAAKF,GAAU,cAAc,GAEtC,OAAAD,CAAY,EAAE,iBAAiB,GAEtC,OAAOA,EAAa,KAAK,MAAMA,EAAa,KAAK,MAAM,SAAS,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC;AAAA,EAAA,CACrF;AACH,CAAC;"}

package/dist/components/TextArea/index.d.ts

@@ -0,0 +1 @@
+export * from './TextArea';

package/dist/components/TextArea/index.js

@@ -0,0 +1,5 @@
+import { TextArea as o } from "./TextArea.js";
+export {
+  o as TextArea
+};
+//# sourceMappingURL=index.js.map

package/dist/components/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Timeline/Timeline.test.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../index-Z7qwJmRM.js";
-import { r as n, s as e, f as i } from "../../react.esm-B8teOYlo.js";
+import "../../index-dmBn99rF.js";
+import { r as n, s as e, f as i } from "../../react.esm-DI5ilWeT.js";
 import { MOCK_TIMELINE_ITEM as r } from "./mockTimelineItem.js";
 import "react";
 import "../Buttons/Button.js";

package/dist/components/VarIndicator/VarIndicator.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../index-Z7qwJmRM.js";
-import { r as l, s as e, w as a } from "../../react.esm-B8teOYlo.js";
-import { u as i } from "../../index-COab4Oy9.js";
+import "../../index-dmBn99rF.js";
+import { r as l, s as e, w as a } from "../../react.esm-DI5ilWeT.js";
+import { u as i } from "../../index-hwMTfLfH.js";
 import { useState as s } from "react";
 import { VarIndicator as n } from "./VarIndicator.js";
 const o = {

package/dist/components/index.d.ts

@@ -39,6 +39,7 @@ export * from './Periods';
 export * from './PeriodSelector';
 export * from './ProgrammeCard';
 export * from './RadioButton';
+export * from './RadioGroup';
 export * from './Repeater';
 export * from './RteEditor';
 export * from './SectionNotification';
@@ -48,6 +49,7 @@ export * from './Sortable';
 export * from './Spinner';
 export * from './StatusBadge';
 export * from './StatusPill';
+export * from './TextArea';
 export * from './Timeline';
 export * from './ToggleSwitch';
 export * from './Tooltip';

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { Accordion as t } from "./Accordion/Accordion.js";
 import { AccordionCard as p } from "./AccordionCard/AccordionCard.js";
-import { ActionList as x } from "./ActionList/ActionList.js";
+import { ActionList as m } from "./ActionList/ActionList.js";
 import { AppStatusBar as a } from "./AppStatusBar/AppStatusBar.js";
 import { Attention as n } from "./Attention/Attention.js";
 import { Backdrop as c } from "./Backdrop/Backdrop.js";
@@ -11,11 +11,11 @@ import { MenuButton as C } from "./Buttons/MenuButton.js";
 import { Card as g } from "./Card/Card.js";
 import { Checkbox as L } from "./Checkbox/Checkbox.js";
 import { CheckboxButton as h } from "./CheckboxButton/CheckboxButton.js";
-import { CheckboxButtonBar as y } from "./CheckboxButtonBar/CheckboxButtonBar.js";
-import { CheckboxTree as D } from "./CheckboxTree/CheckboxTree.js";
-import { Chip as v } from "./Chip/Chip.js";
+import { CheckboxButtonBar as P } from "./CheckboxButtonBar/CheckboxButtonBar.js";
+import { CheckboxTree as y } from "./CheckboxTree/CheckboxTree.js";
+import { Chip as T } from "./Chip/Chip.js";
 import { Drawer as w } from "./Drawer/Drawer.js";
-import { EmptyStateDataDisplay as E } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
+import { EmptyStateDataDisplay as O } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
 import { FeedbackBar as H } from "./FeedbackBar/FeedbackBar.js";
 import { FeedbackBox as N } from "./FeedbackBox/FeedbackBox.js";
 import { FieldHint as j } from "./FieldHint/FieldHint.js";
@@ -27,7 +27,7 @@ import { HorizontalList as _ } from "./HorizontalList/HorizontalList.js";
 import { Icon as oo } from "./Icon/Icon.js";
 import { IconButton as to } from "./IconButton/IconButton.js";
 import { InfoMessage as po } from "./InfoMessage/InfoMessage.js";
-import { Input as xo } from "./Input/Input.js";
+import { Input as mo } from "./Input/Input.js";
 import { InputField as ao } from "./InputField/InputField.js";
 import { Label as no } from "./Label/Label.js";
 import { MenuLink as co } from "./MenuLink/MenuLink.js";
@@ -37,27 +37,29 @@ import { M as ko } from "../TablePlugin-MjKuocl4.js";
 import { OverlayCloseButton as Fo } from "./OverlayCloseButton/OverlayCloseButton.js";
 import { OverlayStepBar as Io } from "./OverlayStepBar/OverlayStepBar.js";
 import { PageOverlay as Mo } from "./PageOverlay/PageOverlay.js";
-import { Periods as Po } from "./Periods/Periods.js";
-import { PeriodSelector as Ao } from "./PeriodSelector/PeriodSelector.js";
-import { ProgrammeCard as Ro } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as To } from "./RadioButton/RadioButton.js";
-import { Repeater as Oo } from "./Repeater/Repeater.js";
-import { Rte as Go, RteEditor as Ho } from "./RteEditor/RteEditor.js";
-import { SectionNotification as No } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as jo } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as Jo, useSelect as Ko } from "./SelectListbox/SelectProvider.js";
-import { Sortable as Uo } from "./Sortable/Sortable.js";
-import { Spinner as Xo } from "./Spinner/Spinner.js";
-import { StatusBadge as Zo } from "./StatusBadge/StatusBage.js";
-import { StatusPill as $o } from "./StatusPill/StatusPill.js";
-import { Timeline as rr } from "./Timeline/Timeline.js";
-import { ToggleSwitch as er } from "./ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as mr } from "./Tooltip/Tooltip.js";
-import { VarIndicator as fr } from "./VarIndicator/VarIndicator.js";
+import { Periods as Ao } from "./Periods/Periods.js";
+import { PeriodSelector as Ro } from "./PeriodSelector/PeriodSelector.js";
+import { ProgrammeCard as Do } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as vo } from "./RadioButton/RadioButton.js";
+import { RadioGroup as Go } from "./RadioGroup/RadioGroup.js";
+import { Repeater as Eo } from "./Repeater/Repeater.js";
+import { Rte as zo, RteEditor as No } from "./RteEditor/RteEditor.js";
+import { SectionNotification as jo } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as Jo } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as Qo, useSelect as Uo } from "./SelectListbox/SelectProvider.js";
+import { Sortable as Xo } from "./Sortable/Sortable.js";
+import { Spinner as Zo } from "./Spinner/Spinner.js";
+import { StatusBadge as $o } from "./StatusBadge/StatusBage.js";
+import { StatusPill as rr } from "./StatusPill/StatusPill.js";
+import { TextArea as er } from "./TextArea/TextArea.js";
+import { Timeline as xr } from "./Timeline/Timeline.js";
+import { ToggleSwitch as fr } from "./ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as ir } from "./Tooltip/Tooltip.js";
+import { VarIndicator as lr } from "./VarIndicator/VarIndicator.js";
 export {
   t as Accordion,
   p as AccordionCard,
-  x as ActionList,
+  m as ActionList,
   a as AppStatusBar,
   n as Attention,
   c as Backdrop,
@@ -66,11 +68,11 @@ export {
   g as Card,
   L as Checkbox,
   h as CheckboxButton,
-  y as CheckboxButtonBar,
-  D as CheckboxTree,
-  v as Chip,
+  P as CheckboxButtonBar,
+  y as CheckboxTree,
+  T as Chip,
   w as Drawer,
-  E as EmptyStateDataDisplay,
+  O as EmptyStateDataDisplay,
   H as FeedbackBar,
   N as FeedbackBox,
   j as FieldHint,
@@ -82,7 +84,7 @@ export {
   oo as Icon,
   to as IconButton,
   po as InfoMessage,
-  xo as Input,
+  mo as Input,
   ao as InputField,
   no as Label,
   b as LinkButton,
@@ -94,24 +96,26 @@ export {
   Fo as OverlayCloseButton,
   Io as OverlayStepBar,
   Mo as PageOverlay,
-  Ao as PeriodSelector,
-  Po as Periods,
-  Ro as ProgrammeCard,
-  To as RadioButton,
-  Oo as Repeater,
-  Go as Rte,
-  Ho as RteEditor,
-  No as SectionNotification,
-  jo as SelectListbox,
-  Jo as SelectProvider,
-  Uo as Sortable,
-  Xo as Spinner,
-  Zo as StatusBadge,
-  $o as StatusPill,
-  rr as Timeline,
-  er as ToggleSwitch,
-  mr as Tooltip,
-  fr as VarIndicator,
-  Ko as useSelect
+  Ro as PeriodSelector,
+  Ao as Periods,
+  Do as ProgrammeCard,
+  vo as RadioButton,
+  Go as RadioGroup,
+  Eo as Repeater,
+  zo as Rte,
+  No as RteEditor,
+  jo as SectionNotification,
+  Jo as SelectListbox,
+  Qo as SelectProvider,
+  Xo as Sortable,
+  Zo as Spinner,
+  $o as StatusBadge,
+  rr as StatusPill,
+  er as TextArea,
+  xr as Timeline,
+  fr as ToggleSwitch,
+  ir as Tooltip,
+  lr as VarIndicator,
+  Uo as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}