@uva-glass/component-library 1.31.0 → 1.31.1

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

@@ -5,5 +5,6 @@ export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     type?: 'text' | 'search' | 'password' | 'email';
     id: string;
     clearTrigger?: ReactNode;
+    onClear?: () => void;
 }
 export declare const InputField: import('react').ForwardRefExoticComponent<InputFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/InputField/InputField.js

@@ -1,54 +1,51 @@
-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 { jsxs as h, jsx as p } from "react/jsx-runtime";
+import { forwardRef as m, useState as b, useRef as g, useEffect as x } from "react";
 import { c as y } from "../../clsx-DB4S2d7J.js";
-import '../../assets/InputField.css';const n = {
+import '../../assets/InputField.css';const i = {
   "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(() => {
+}, W = m(
+  ({ autoComplete: c = "off", id: r, value: e, variant: s, type: f = "text", clearTrigger: n, onClear: u, ...o }, t) => {
+    const [a, _] = b(0), l = g(null);
+    x(() => {
       l.current && _(l.current.offsetWidth);
     }, [e]);
     const d = () => {
-      r(""), t && "current" in t && t.current && t.current.focus();
-    }, m = (g) => {
-      r(g.target.value);
+      u && t && "current" in t && t.current && (u(), t.current.focus());
     };
-    return /* @__PURE__ */ b("div", { className: n["input-field-wrapper"], children: [
-      /* @__PURE__ */ a(
+    return /* @__PURE__ */ h("div", { className: i["input-field-wrapper"], children: [
+      /* @__PURE__ */ p(
         "input",
         {
-          ...f,
+          ...o,
           autoComplete: c,
           ref: t,
-          id: u,
-          className: y(n["input-field"], {
-            [n["input-field--large"]]: o === "large"
+          id: r,
+          className: y(i["input-field"], {
+            [i["input-field--large"]]: s === "large"
           }),
-          type: p,
+          type: f,
           value: e,
-          onChange: m,
-          style: { paddingRight: e && i ? h : void 0 }
+          style: { paddingRight: e && n ? a : void 0 }
         }
       ),
-      e && i && /* @__PURE__ */ a(
+      e && n && /* @__PURE__ */ p(
         "button",
         {
           type: "button",
-          className: n["input-field__clear-button"],
+          className: i["input-field__clear-button"],
           onClick: d,
           ref: l,
-          "aria-label": `clear trigger for ${u}`,
-          children: i
+          "aria-label": `clear trigger for ${r}`,
+          children: n
         }
       )
     ] });
   }
 );
 export {
-  j as InputField
+  W 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, 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;"}
+{"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  onClear?: () => void;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    { autoComplete = 'off', id, value, variant, type = 'text', clearTrigger, onClear, ...restProps }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;GAeaA,IAAaC;AAAA,EACxB,CACE,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,QAAQ,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GACrFC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACV,CAAK,CAAC;AAEV,UAAMa,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,KACRE,EAAa,QAAQ;IACvB;AAGF,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAP;AAAA,UACA,KAAKQ;AAAA,UACL,IAAAP;AAAA,UACA,WAAWkB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGd,MAAY;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAF;AAAA,UACA,OAAO,EAAE,cAAcA,KAASG,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCP,KAASG,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBX,CAAE;AAAA,UAElC,UAAAI;AAAA,QAAA;AAAA,MACH;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}

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

@@ -1,20 +1,21 @@
-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 { jsx as e } from "react/jsx-runtime";
+import { useState as d, useRef as g } from "react";
+import { f as i } from "../../index-DFUrxrKJ.js";
+import { InputField as l } from "./InputField.js";
+import { Container as u } from "../storyComponents/Container/Container.js";
+import { Icon as f } 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 h = (t) => {
   const r = t.variant ?? [];
   return { ...t, variant: r.toString() };
-}, A = {
+}, w = {
   title: "Atoms/InputField",
-  component: n,
+  component: l,
   argTypes: {
     variant: {
       options: ["large"],
@@ -33,31 +34,44 @@ const l = (t) => {
       }
     }
   }
-}, e = (t) => {
-  const r = a(null);
-  return /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(n, { ...l(t), ref: r }) });
-}, i = {
+}, o = (t) => {
+  const [r, a] = d(""), s = g(null), p = (c) => {
+    a(c.target.value), i()("handleChange");
+  }, m = () => {
+    a(""), i()("handleClear");
+  };
+  return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
+    l,
+    {
+      ...h(t),
+      value: r,
+      onChange: p,
+      onClear: m,
+      ref: s
+    }
+  ) });
+}, n = {
   type: "text",
   variant: void 0,
   id: "4f9ca77d"
-}, m = e.bind({});
-m.args = {
-  ...i
+}, C = o.bind({});
+C.args = {
+  ...n
 };
-const c = e.bind({});
-c.args = {
-  ...i,
+const v = o.bind({});
+v.args = {
+  ...n,
   clearTrigger: "Clear"
 };
-const d = e.bind({});
-d.args = {
-  ...i,
-  clearTrigger: /* @__PURE__ */ o(p, { name: "Cross" })
+const I = o.bind({});
+I.args = {
+  ...n,
+  clearTrigger: /* @__PURE__ */ e(f, { name: "Cross" })
 };
 export {
-  m as InputFieldExample,
-  d as WithIconClearTrigger,
-  c as WithStringClearTrigger,
-  A as default
+  C as InputFieldExample,
+  I as WithIconClearTrigger,
+  v as WithStringClearTrigger,
+  w 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 { 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;"}
+{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\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 [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\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","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;AAYA,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;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}