@uva-glass/component-library 1.27.0 → 1.29.0

package/dist/assets/Attention.css

@@ -0,0 +1 @@
+._attention_1kulj_1{display:flex;gap:1rem}._attention_1kulj_1>svg{flex-shrink:0;height:1.5rem;width:1.5rem}

package/dist/assets/InputField.css

@@ -1 +1 @@
-._input-field_16tae_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 .5rem;text-align:inherit}._input-field--large_16tae_15{height:3rem}._input-field_16tae_1:disabled{color:var(--color-scarpa-flow)}
+._input-field-wrapper_hh88t_1{align-items:center;display:flex;position:relative}._input-field_hh88t_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 1rem;text-align:inherit}._input-field--large_hh88t_22{height:3rem}._input-field_hh88t_1:disabled{color:var(--color-scarpa-flow)}._input-field__clear-button_hh88t_30{background:none;border:none;cursor:pointer;max-height:1.5rem;padding:0 1rem 0 .5rem;position:absolute;right:0}

package/dist/components/Attention/Attention.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+
+export declare const Attention: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Attention/Attention.js

@@ -0,0 +1,12 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { Icon as o } from "../Icon/Icon.js";
+import '../../assets/Attention.css';const e = "_attention_1kulj_1", s = {
+  attention: e
+}, l = ({ children: t }) => /* @__PURE__ */ n("div", { className: s.attention, children: [
+  /* @__PURE__ */ i(o, { name: "ExclamationCircleFillMini", size: 24 }),
+  t
+] });
+export {
+  l as Attention
+};
+//# sourceMappingURL=Attention.js.map

package/dist/components/Attention/Attention.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attention.js","sources":["../../../src/components/Attention/Attention.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport styles from './Attention.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport const Attention = ({ children }: PropsWithChildren) => (\n  <div className={styles['attention']}>\n    <Icon name=\"ExclamationCircleFillMini\" size={24} />\n    {children}\n  </div>\n);\n"],"names":["Attention","children","styles","jsx","Icon"],"mappings":";;;;GAMaA,IAAY,CAAC,EAAE,UAAAC,EAAS,wBAClC,OAAI,EAAA,WAAWC,EAAO,WACrB,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAK,EAAA,MAAK,6BAA4B,MAAM,IAAI;AAAA,EAChDH;AAAA,EACH,CAAA;"}

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

@@ -0,0 +1,7 @@
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, {
+    children?: import('react').ReactNode;
+}>;
+export default _default;
+export declare const AttentionExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, {
+    children?: import('react').ReactNode;
+}>;

package/dist/components/Attention/Attention.stories.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Attention as t } from "./Attention.js";
+const r = {
+  title: "Atoms/Attention",
+  component: t
+}, e = (n) => /* @__PURE__ */ o(t, { ...n, children: "Example Attention" }), i = e.bind({});
+i.args = {};
+export {
+  i as AttentionExample,
+  r as default
+};
+//# sourceMappingURL=Attention.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Attention.stories.js","sources":["../../../src/components/Attention/Attention.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\n\nimport { Attention } from './Attention';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Attention',\n  component: Attention,\n} as Meta<PropsWithChildren>;\n\nconst Template: StoryFn<PropsWithChildren> = (args) => <Attention {...args}>Example Attention</Attention>;\n\nexport const AttentionExample = Template.bind({});\nAttentionExample.args = {};\n"],"names":["Attention_stories","Attention","Template","args","AttentionExample"],"mappings":";;AAMA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAuC,CAACC,wBAAUF,GAAW,EAAA,GAAGE,GAAM,UAAiB,oBAAA,CAAA,GAEhFC,IAAmBF,EAAS,KAAK,EAAE;AAChDE,EAAiB,OAAO,CAAC;"}

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

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

package/dist/components/Attention/index.js

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

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

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

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

@@ -1,8 +1,9 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 
 export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
     variant?: 'large';
     type?: 'text' | 'search' | 'password' | 'email';
     id: string;
+    clearTrigger?: ReactNode;
 }
 export declare const InputField: import('react').ForwardRefExoticComponent<InputFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/InputField/InputField.js

@@ -1,25 +1,54 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { c as a } from "../../clsx-DB4S2d7J.js";
-import '../../assets/InputField.css';const e = {
-  "input-field": "_input-field_16tae_1",
-  "input-field--large": "_input-field--large_16tae_15"
-}, m = o(
-  ({ autoComplete: t = "off", id: i, variant: r, type: f = "text", ...l }, p) => /* @__PURE__ */ n(
-    "input",
-    {
-      ...l,
-      autoComplete: t,
-      ref: p,
-      id: i,
-      className: a(e["input-field"], {
-        [e["input-field--large"]]: r === "large"
-      }),
-      type: f
-    }
-  )
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { forwardRef as x, useState as s, useRef as C, useEffect as v } from "react";
+import { c as y } from "../../clsx-DB4S2d7J.js";
+import '../../assets/InputField.css';const n = {
+  "input-field-wrapper": "_input-field-wrapper_hh88t_1",
+  "input-field": "_input-field_hh88t_1",
+  "input-field--large": "_input-field--large_hh88t_22",
+  "input-field__clear-button": "_input-field__clear-button_hh88t_30"
+}, j = x(
+  ({ autoComplete: c = "off", id: u, variant: o, type: p = "text", clearTrigger: i, ...f }, t) => {
+    const [e, r] = s(""), [h, _] = s(0), l = C(null);
+    v(() => {
+      l.current && _(l.current.offsetWidth);
+    }, [e]);
+    const d = () => {
+      r(""), t && "current" in t && t.current && t.current.focus();
+    }, m = (g) => {
+      r(g.target.value);
+    };
+    return /* @__PURE__ */ b("div", { className: n["input-field-wrapper"], children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          ...f,
+          autoComplete: c,
+          ref: t,
+          id: u,
+          className: y(n["input-field"], {
+            [n["input-field--large"]]: o === "large"
+          }),
+          type: p,
+          value: e,
+          onChange: m,
+          style: { paddingRight: e && i ? h : void 0 }
+        }
+      ),
+      e && i && /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: n["input-field__clear-button"],
+          onClick: d,
+          ref: l,
+          "aria-label": `clear trigger for ${u}`,
+          children: i
+        }
+      )
+    ] });
+  }
 );
 export {
-  m as InputField
+  j as InputField
 };
 //# sourceMappingURL=InputField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } 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' | 'search' | 'password' | 'email';\n  id: string;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  ({ autoComplete = 'off', id, variant, type = 'text', ...restProps }: InputFieldProps, forwardedRef) => {\n    return (\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      />\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","variant","type","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;GAaaA,IAAaC;AAAA,EACxB,CAAC,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,SAAAC,GAAS,MAAAC,IAAO,QAAQ,GAAGC,EAAU,GAAoBC,MAElF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,cAAAJ;AAAA,MACA,KAAKK;AAAA,MACL,IAAAJ;AAAA,MACA,WAAWM,EAAKC,EAAO,aAAa,GAAG;AAAA,QACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGN,MAAY;AAAA,MAAA,CAC7C;AAAA,MACD,MAAAC;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"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' | 'search' | 'password' | 'email';\n  id: string;\n  clearTrigger?: ReactNode;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  ({ autoComplete = 'off', id, variant, type = 'text', clearTrigger, ...restProps }: InputFieldProps, forwardedRef) => {\n    const [value, setValue] = useState<string>('');\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 handleClear = () => {\n      setValue('');\n      if (forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        forwardedRef.current.focus();\n      }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\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          onChange={handleChange}\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={handleClear}\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","variant","type","clearTrigger","restProps","forwardedRef","value","setValue","useState","clearButtonWidth","setClearButtonWidth","clearButtonRef","useRef","useEffect","handleClear","handleChange","event","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;GAcaA,IAAaC;AAAA,EACxB,CAAC,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,SAAAC,GAAS,MAAAC,IAAO,QAAQ,cAAAC,GAAc,GAAGC,EAAU,GAAoBC,MAAiB;AACnH,UAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAiB,EAAE,GACvC,CAACC,GAAkBC,CAAmB,IAAIF,EAAiB,CAAC,GAC5DG,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGD,EAAAC,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACL,CAAK,CAAC;AAEV,UAAMQ,IAAc,MAAM;AACxB,MAAAP,EAAS,EAAE,GACPF,KAAgB,aAAaA,KAAgBA,EAAa,WAC5DA,EAAa,QAAQ;IACvB,GAGIU,IAAe,CAACC,MAA+C;AAC1D,MAAAT,EAAAS,EAAM,OAAO,KAAK;AAAA,IAAA;AAG7B,WACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGf;AAAA,UACJ,cAAAL;AAAA,UACA,KAAKM;AAAA,UACL,IAAAL;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGjB,MAAY;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAI;AAAA,UACA,UAAUS;AAAA,UACV,OAAO,EAAE,cAAcT,KAASH,IAAeM,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCH,KAASH,KACR,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASJ;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBX,CAAE;AAAA,UAElC,UAAAG;AAAA,QAAA;AAAA,MACH;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}

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

@@ -3,3 +3,5 @@ import { InputFieldProps } from './InputField';
 declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, InputFieldProps>;
 export default _default;
 export declare const InputFieldExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;
+export declare const WithStringClearTrigger: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;
+export declare const WithIconClearTrigger: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;

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

@@ -1,11 +1,20 @@
-import { jsx as e } from "react/jsx-runtime";
-import { InputField as o } from "./InputField.js";
-import '../../assets/InputField2.css';const a = (t) => {
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as a } from "react";
+import { InputField as n } from "./InputField.js";
+import { Container as s } from "../storyComponents/Container/Container.js";
+import { Icon as p } from "../Icon/Icon.js";
+import "../Button/Button.js";
+import "../OverlayCloseButton/OverlayCloseButton.js";
+import "../IconButton/IconButton.js";
+import "../Input/Input.js";
+import "../SelectListbox/SelectListbox.js";
+import "../SelectListbox/SelectProvider.js";
+const l = (t) => {
   const r = t.variant ?? [];
   return { ...t, variant: r.toString() };
-}, d = {
+}, A = {
   title: "Atoms/InputField",
-  component: o,
+  component: n,
   argTypes: {
     variant: {
       options: ["large"],
@@ -24,14 +33,31 @@ import '../../assets/InputField2.css';const a = (t) => {
       }
     }
   }
-}, i = (t) => /* @__PURE__ */ e("div", { className: "form", children: /* @__PURE__ */ e("div", { className: "form-field", children: /* @__PURE__ */ e(o, { ...a(t) }) }) }), n = i.bind({});
-n.args = {
+}, e = (t) => {
+  const r = a(null);
+  return /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(n, { ...l(t), ref: r }) });
+}, i = {
   type: "text",
   variant: void 0,
   id: "4f9ca77d"
+}, m = e.bind({});
+m.args = {
+  ...i
+};
+const c = e.bind({});
+c.args = {
+  ...i,
+  clearTrigger: "Clear"
+};
+const d = e.bind({});
+d.args = {
+  ...i,
+  clearTrigger: /* @__PURE__ */ o(p, { name: "Cross" })
 };
 export {
-  n as InputFieldExample,
-  d as default
+  m as InputFieldExample,
+  d as WithIconClearTrigger,
+  c as WithStringClearTrigger,
+  A as default
 };
 //# sourceMappingURL=InputField.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport './InputField.stories.css';\n\nimport { InputField } from './InputField';\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'search', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => (\n  <div className=\"form\">\n    <div className=\"form-field\">\n      <InputField {...transformArgs(args)} />\n    </div>\n  </div>\n);\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n"],"names":["transformArgs","args","variantArray","InputField_stories","InputField","Template","jsx","InputFieldExample"],"mappings":";;AAOA,MAAMA,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,UAAU,YAAY,OAAO;AAAA,IACjD;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAqC,CAACJ,wBACzC,OAAI,EAAA,WAAU,QACb,UAAC,gBAAAK,EAAA,OAAA,EAAI,WAAU,cACb,4BAACF,GAAY,EAAA,GAAGJ,EAAcC,CAAI,EAAG,CAAA,GACvC,EACF,CAAA,GAGWM,IAAoBF,EAAS,KAAK,EAAE;AACjDE,EAAkB,OAAO;AAAA,EACvB,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN;"}
+{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon } from 'components';\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'search', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <Container>\n      <InputField {...transformArgs(args)} ref={inputRef} />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["transformArgs","args","variantArray","InputField_stories","InputField","Template","inputRef","useRef","jsx","Container","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;AAUA,MAAMA,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,UAAU,YAAY,OAAO;AAAA,IACjD;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAqC,CAACJ,MAAS;AAC7C,QAAAK,IAAWC,EAAyB,IAAI;AAG5C,SAAA,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACJ,GAAY,EAAA,GAAGJ,EAAcC,CAAI,GAAG,KAAKK,EAAU,CAAA,EACtD,CAAA;AAEJ,GAEMI,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBN,EAAS,KAAK,EAAE;AACjDM,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBP,EAAS,KAAK,EAAE;AACtDO,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBR,EAAS,KAAK,EAAE;AACpDQ,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAF,EAACM,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Accordion';
 export * from './AppStatusBar';
+export * from './Attention';
 export * from './Backdrop';
 export * from './Button';
 export * from './ButtonGroup';

package/dist/components/index.js

@@ -1,62 +1,64 @@
 import { Accordion as t } from "./Accordion/Accordion.js";
 import { AppStatusBar as p } from "./AppStatusBar/AppStatusBar.js";
-import { Backdrop as f } from "./Backdrop/Backdrop.js";
-import { Button as a } from "./Button/Button.js";
-import { ButtonGroup as n } from "./ButtonGroup/ButtonGroup.js";
-import { Card as u } from "./Card/Card.js";
-import { Checkbox as d } from "./Checkbox/Checkbox.js";
-import { Drawer as B } from "./Drawer/Drawer.js";
-import { FieldHint as I } from "./FieldHint/FieldHint.js";
-import { FormField as C } from "./FormField/FormField.js";
-import { Icon as L } from "./Icon/Icon.js";
-import { IconButton as g } from "./IconButton/IconButton.js";
-import { InfoMessage as D } from "./InfoMessage/InfoMessage.js";
-import { Input as v } from "./Input/Input.js";
-import { InputField as R } from "./InputField/InputField.js";
-import { Label as w } from "./Label/Label.js";
-import { M as G } from "../MenuLink-CLEqkVVh.js";
-import { MetaDataList as N } from "./MetaDataList/MetaDataList.js";
-import { ModalDialog as T } from "./ModalDialog/ModalDialog.js";
-import { OverlayCloseButton as q } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { ProgrammeCard as E } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as K } from "./RadioButton/RadioButton.js";
-import { Repeater as U } from "./Repeater/Repeater.js";
-import { SectionNotification as W } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as Y } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as _, useSelect as $ } from "./SelectListbox/SelectProvider.js";
-import { Spinner as ro } from "./Spinner/Spinner.js";
-import { StatusPill as eo } from "./StatusPill/StatusPill.js";
-import { Tooltip as mo } from "./Tooltip/Tooltip.js";
+import { Attention as f } from "./Attention/Attention.js";
+import { Backdrop as a } from "./Backdrop/Backdrop.js";
+import { Button as i } from "./Button/Button.js";
+import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
+import { Card as d } from "./Card/Card.js";
+import { Checkbox as B } from "./Checkbox/Checkbox.js";
+import { Drawer as I } from "./Drawer/Drawer.js";
+import { FieldHint as C } from "./FieldHint/FieldHint.js";
+import { FormField as L } from "./FormField/FormField.js";
+import { Icon as g } from "./Icon/Icon.js";
+import { IconButton as A } from "./IconButton/IconButton.js";
+import { InfoMessage as P } from "./InfoMessage/InfoMessage.js";
+import { Input as R } from "./Input/Input.js";
+import { InputField as w } from "./InputField/InputField.js";
+import { Label as G } from "./Label/Label.js";
+import { M as N } from "../MenuLink-CLEqkVVh.js";
+import { MetaDataList as T } from "./MetaDataList/MetaDataList.js";
+import { ModalDialog as q } from "./ModalDialog/ModalDialog.js";
+import { OverlayCloseButton as E } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { ProgrammeCard as K } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as U } from "./RadioButton/RadioButton.js";
+import { Repeater as W } from "./Repeater/Repeater.js";
+import { SectionNotification as Y } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as _ } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as oo, useSelect as ro } from "./SelectListbox/SelectProvider.js";
+import { Spinner as eo } from "./Spinner/Spinner.js";
+import { StatusPill as mo } from "./StatusPill/StatusPill.js";
+import { Tooltip as xo } from "./Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
-  f as Backdrop,
-  a as Button,
-  n as ButtonGroup,
-  u as Card,
-  d as Checkbox,
-  B as Drawer,
-  I as FieldHint,
-  C as FormField,
-  L as Icon,
-  g as IconButton,
-  D as InfoMessage,
-  v as Input,
-  R as InputField,
-  w as Label,
-  G as MenuLink,
-  N as MetaDataList,
-  T as ModalDialog,
-  q as OverlayCloseButton,
-  E as ProgrammeCard,
-  K as RadioButton,
-  U as Repeater,
-  W as SectionNotification,
-  Y as SelectListbox,
-  _ as SelectProvider,
-  ro as Spinner,
-  eo as StatusPill,
-  mo as Tooltip,
-  $ as useSelect
+  f as Attention,
+  a as Backdrop,
+  i as Button,
+  u as ButtonGroup,
+  d as Card,
+  B as Checkbox,
+  I as Drawer,
+  C as FieldHint,
+  L as FormField,
+  g as Icon,
+  A as IconButton,
+  P as InfoMessage,
+  R as Input,
+  w as InputField,
+  G as Label,
+  N as MenuLink,
+  T as MetaDataList,
+  q as ModalDialog,
+  E as OverlayCloseButton,
+  K as ProgrammeCard,
+  U as RadioButton,
+  W as Repeater,
+  Y as SectionNotification,
+  _ as SelectListbox,
+  oo as SelectProvider,
+  eo as Spinner,
+  mo as StatusPill,
+  xo as Tooltip,
+  ro 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -1,62 +1,64 @@
 import { Accordion as t } from "./components/Accordion/Accordion.js";
 import { AppStatusBar as p } from "./components/AppStatusBar/AppStatusBar.js";
-import { Backdrop as f } from "./components/Backdrop/Backdrop.js";
-import { Button as a } from "./components/Button/Button.js";
-import { ButtonGroup as n } from "./components/ButtonGroup/ButtonGroup.js";
-import { Card as u } from "./components/Card/Card.js";
-import { Checkbox as d } from "./components/Checkbox/Checkbox.js";
-import { Drawer as B } from "./components/Drawer/Drawer.js";
-import { FieldHint as I } from "./components/FieldHint/FieldHint.js";
-import { FormField as C } from "./components/FormField/FormField.js";
-import { Icon as L } from "./components/Icon/Icon.js";
-import { IconButton as g } from "./components/IconButton/IconButton.js";
-import { InfoMessage as D } from "./components/InfoMessage/InfoMessage.js";
-import { Input as v } from "./components/Input/Input.js";
-import { InputField as R } from "./components/InputField/InputField.js";
-import { Label as w } from "./components/Label/Label.js";
-import { M as G } from "./MenuLink-CLEqkVVh.js";
-import { MetaDataList as N } from "./components/MetaDataList/MetaDataList.js";
-import { ModalDialog as T } from "./components/ModalDialog/ModalDialog.js";
-import { OverlayCloseButton as q } from "./components/OverlayCloseButton/OverlayCloseButton.js";
-import { ProgrammeCard as E } from "./components/ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as K } from "./components/RadioButton/RadioButton.js";
-import { Repeater as U } from "./components/Repeater/Repeater.js";
-import { SectionNotification as W } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as Y } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as _, useSelect as $ } from "./components/SelectListbox/SelectProvider.js";
-import { Spinner as ro } from "./components/Spinner/Spinner.js";
-import { StatusPill as eo } from "./components/StatusPill/StatusPill.js";
-import { Tooltip as mo } from "./components/Tooltip/Tooltip.js";
+import { Attention as f } from "./components/Attention/Attention.js";
+import { Backdrop as a } from "./components/Backdrop/Backdrop.js";
+import { Button as i } from "./components/Button/Button.js";
+import { ButtonGroup as u } from "./components/ButtonGroup/ButtonGroup.js";
+import { Card as d } from "./components/Card/Card.js";
+import { Checkbox as B } from "./components/Checkbox/Checkbox.js";
+import { Drawer as I } from "./components/Drawer/Drawer.js";
+import { FieldHint as C } from "./components/FieldHint/FieldHint.js";
+import { FormField as L } from "./components/FormField/FormField.js";
+import { Icon as g } from "./components/Icon/Icon.js";
+import { IconButton as A } from "./components/IconButton/IconButton.js";
+import { InfoMessage as P } from "./components/InfoMessage/InfoMessage.js";
+import { Input as R } from "./components/Input/Input.js";
+import { InputField as w } from "./components/InputField/InputField.js";
+import { Label as G } from "./components/Label/Label.js";
+import { M as N } from "./MenuLink-CLEqkVVh.js";
+import { MetaDataList as T } from "./components/MetaDataList/MetaDataList.js";
+import { ModalDialog as q } from "./components/ModalDialog/ModalDialog.js";
+import { OverlayCloseButton as E } from "./components/OverlayCloseButton/OverlayCloseButton.js";
+import { ProgrammeCard as K } from "./components/ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as U } from "./components/RadioButton/RadioButton.js";
+import { Repeater as W } from "./components/Repeater/Repeater.js";
+import { SectionNotification as Y } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as _ } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as oo, useSelect as ro } from "./components/SelectListbox/SelectProvider.js";
+import { Spinner as eo } from "./components/Spinner/Spinner.js";
+import { StatusPill as mo } from "./components/StatusPill/StatusPill.js";
+import { Tooltip as xo } from "./components/Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
-  f as Backdrop,
-  a as Button,
-  n as ButtonGroup,
-  u as Card,
-  d as Checkbox,
-  B as Drawer,
-  I as FieldHint,
-  C as FormField,
-  L as Icon,
-  g as IconButton,
-  D as InfoMessage,
-  v as Input,
-  R as InputField,
-  w as Label,
-  G as MenuLink,
-  N as MetaDataList,
-  T as ModalDialog,
-  q as OverlayCloseButton,
-  E as ProgrammeCard,
-  K as RadioButton,
-  U as Repeater,
-  W as SectionNotification,
-  Y as SelectListbox,
-  _ as SelectProvider,
-  ro as Spinner,
-  eo as StatusPill,
-  mo as Tooltip,
-  $ as useSelect
+  f as Attention,
+  a as Backdrop,
+  i as Button,
+  u as ButtonGroup,
+  d as Card,
+  B as Checkbox,
+  I as Drawer,
+  C as FieldHint,
+  L as FormField,
+  g as Icon,
+  A as IconButton,
+  P as InfoMessage,
+  R as Input,
+  w as InputField,
+  G as Label,
+  N as MenuLink,
+  T as MetaDataList,
+  q as ModalDialog,
+  E as OverlayCloseButton,
+  K as ProgrammeCard,
+  U as RadioButton,
+  W as Repeater,
+  Y as SectionNotification,
+  _ as SelectListbox,
+  oo as SelectProvider,
+  eo as Spinner,
+  mo as StatusPill,
+  xo as Tooltip,
+  ro as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.27.0",
+  "version": "1.29.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -58,8 +58,8 @@
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
     "@uva-glass/eslint-config": "^1.2.0",
     "@uva-glass/stylelint-config": "^1.1.0",
     "@vitejs/plugin-react": "^4.3.1",

package/dist/assets/InputField2.css

@@ -1 +0,0 @@
-.form{width:20%}.form-field{display:flex;flex-direction:column;gap:.5rem 1rem}