@apia/components 2.0.9 → 2.0.10

package/dist/components/forms/Checkbox.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
+import { Button, getVariant, Input } from '@apia/theme';
+import { useUpdateEffect, getSpecificParent } from '@apia/util';
+import { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
+import { Icon } from '@apia/icons';
+
+const Checkbox = forwardRef(
+  ({
+    onChange,
+    required,
+    disabled,
+    readOnly,
+    name,
+    native,
+    indeterminate,
+    ...props
+  }, ref) => {
+    const [isChecked, setIsChecked] = useState(
+      props.defaultChecked ?? props.checked ?? false
+    );
+    const checkbox = useRef(null);
+    useUpdateEffect(
+      () => setIsChecked(props.checked ?? false),
+      [props.checked]
+    );
+    const sx = useMemo(
+      () => ({
+        bg: props.background ?? void 0,
+        color: props.color ?? void 0,
+        '&[aria-checked="false"]': {
+          bg: props.background ?? void 0,
+          color: "transparent"
+        }
+      }),
+      [props.background, props.color]
+    );
+    useEffect(() => {
+      if (checkbox.current && indeterminate !== void 0)
+        checkbox.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const nativeSx = useMemo(
+      () => ({ variant: "forms.checkbox" }),
+      []
+    );
+    return native ? (
+      // eslint-disable-next-line react/forbid-elements
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          onClick: props.onClick,
+          "aria-checked": isChecked,
+          sx: nativeSx,
+          ref: checkbox,
+          disabled,
+          name,
+          checked: isChecked,
+          onChange: (ev) => {
+            if (props.checked === void 0)
+              setIsChecked(ev.target.checked);
+            if (onChange)
+              onChange(ev);
+          },
+          required,
+          className: ` ${props.className ?? ""} nativeCheckbox `,
+          ...props
+        }
+      )
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          onClick: (ev) => {
+            if (readOnly) {
+              return;
+            }
+            if (getSpecificParent(
+              ev.target,
+              (current) => current.type === "button"
+            )) {
+              if (props.onClick)
+                props.onClick(ev);
+              checkbox.current?.click();
+            }
+          },
+          type: "button",
+          ...getVariant("forms.customCheckbox"),
+          role: "checkbox",
+          "aria-checked": isChecked,
+          sx,
+          ref,
+          disabled,
+          children: /* @__PURE__ */ jsx(Icon, { title: "", name: "Check", size: "32px" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "checkbox",
+          sx: { display: "none" },
+          ref: checkbox,
+          onClick: (ev) => {
+            ev.stopPropagation();
+          },
+          name,
+          checked: isChecked,
+          onChange: (ev) => {
+            if (props.checked === void 0)
+              setIsChecked(ev.target.checked);
+            if (onChange)
+              onChange(ev);
+          },
+          required,
+          disabled
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/forms/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/forms/Checkbox.tsx"],"sourcesContent":["import {\r\n  Button,\r\n  ButtonProps,\r\n  Input,\r\n  InputProps,\r\n  ThemeUIStyleObject,\r\n} from '@apia/theme';\r\nimport { TModify, getSpecificParent, useUpdateEffect } from '@apia/util';\r\nimport {\r\n  ChangeEventHandler,\r\n  forwardRef,\r\n  MouseEventHandler,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport { getVariant } from '@apia/theme';\r\nimport { Icon } from '@apia/icons';\r\n\r\nexport type TCheckbox = TModify<\r\n  ButtonProps,\r\n  {\r\n    background?: string;\r\n    checked?: boolean;\r\n    color?: string;\r\n    defaultChecked?: boolean;\r\n    indeterminate?: boolean;\r\n    native?: boolean;\r\n    onChange?: ChangeEventHandler<HTMLInputElement>;\r\n    readOnly?: boolean;\r\n    required?: boolean;\r\n    type?: string;\r\n  }\r\n>;\r\n\r\nexport const Checkbox = forwardRef<HTMLButtonElement, TCheckbox>(\r\n  (\r\n    {\r\n      onChange,\r\n      required,\r\n      disabled,\r\n      readOnly,\r\n      name,\r\n      native,\r\n      indeterminate,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const [isChecked, setIsChecked] = useState(\r\n      props.defaultChecked ?? props.checked ?? false,\r\n    );\r\n\r\n    const checkbox = useRef<HTMLInputElement>(null);\r\n\r\n    useUpdateEffect(\r\n      () => setIsChecked(props.checked ?? false),\r\n      [props.checked],\r\n    );\r\n\r\n    const sx = useMemo(\r\n      () => ({\r\n        bg: props.background ?? undefined,\r\n        color: props.color ?? undefined,\r\n        '&[aria-checked=\"false\"]': {\r\n          bg: props.background ?? undefined,\r\n          color: 'transparent',\r\n        },\r\n      }),\r\n      [props.background, props.color],\r\n    );\r\n\r\n    useEffect(() => {\r\n      if (checkbox.current && indeterminate !== undefined)\r\n        checkbox.current.indeterminate = indeterminate;\r\n    }, [indeterminate]);\r\n\r\n    const nativeSx = useMemo(\r\n      () => ({ variant: 'forms.checkbox' } as ThemeUIStyleObject),\r\n      [],\r\n    );\r\n\r\n    return native ? (\r\n      // eslint-disable-next-line react/forbid-elements\r\n      <input\r\n        type=\"checkbox\"\r\n        onClick={props.onClick as unknown as MouseEventHandler}\r\n        aria-checked={isChecked}\r\n        sx={nativeSx}\r\n        ref={checkbox}\r\n        disabled={disabled}\r\n        name={name}\r\n        checked={isChecked}\r\n        onChange={(ev) => {\r\n          if (props.checked === undefined) setIsChecked(ev.target.checked);\r\n          if (onChange) onChange(ev);\r\n        }}\r\n        required={required}\r\n        className={` ${props.className ?? ''} nativeCheckbox `}\r\n        {...(props as unknown as InputProps)}\r\n      />\r\n    ) : (\r\n      <>\r\n        <Button\r\n          {...props}\r\n          onClick={(ev) => {\r\n            if (readOnly) {\r\n              return;\r\n            }\r\n            if (\r\n              getSpecificParent(\r\n                ev.target as HTMLElement,\r\n                (current) => (current as HTMLInputElement).type === 'button',\r\n              )\r\n            ) {\r\n              if (props.onClick) props.onClick(ev);\r\n              checkbox.current?.click();\r\n            }\r\n          }}\r\n          type=\"button\"\r\n          {...getVariant('forms.customCheckbox')}\r\n          role=\"checkbox\"\r\n          aria-checked={isChecked}\r\n          sx={sx}\r\n          ref={ref}\r\n          disabled={disabled}\r\n        >\r\n          <Icon title=\"\" name=\"Check\" size=\"32px\" />\r\n        </Button>\r\n        <Input\r\n          type=\"checkbox\"\r\n          sx={{ display: 'none' }}\r\n          ref={checkbox}\r\n          onClick={(ev) => {\r\n            ev.stopPropagation();\r\n          }}\r\n          name={name}\r\n          checked={isChecked}\r\n          onChange={(ev) => {\r\n            if (props.checked === undefined) setIsChecked(ev.target.checked);\r\n            if (onChange) onChange(ev);\r\n          }}\r\n          required={required}\r\n          disabled={disabled}\r\n        />\r\n      </>\r\n    );\r\n  },\r\n);\r\n\r\nCheckbox.displayName = 'Checkbox';\r\n"],"names":[],"mappings":";;;;;;AAoCO,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,CACE;AAAA,IACE,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAG,KAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA;AAAA,MAChC,KAAA,CAAM,cAAkB,IAAA,KAAA,CAAM,OAAW,IAAA,KAAA;AAAA,KAC3C,CAAA;AAEA,IAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA,CAAA;AAE9C,IAAA,eAAA;AAAA,MACE,MAAM,YAAA,CAAa,KAAM,CAAA,OAAA,IAAW,KAAK,CAAA;AAAA,MACzC,CAAC,MAAM,OAAO,CAAA;AAAA,KAChB,CAAA;AAEA,IAAA,MAAM,EAAK,GAAA,OAAA;AAAA,MACT,OAAO;AAAA,QACL,EAAA,EAAI,MAAM,UAAc,IAAA,KAAA,CAAA;AAAA,QACxB,KAAA,EAAO,MAAM,KAAS,IAAA,KAAA,CAAA;AAAA,QACtB,yBAA2B,EAAA;AAAA,UACzB,EAAA,EAAI,MAAM,UAAc,IAAA,KAAA,CAAA;AAAA,UACxB,KAAO,EAAA,aAAA;AAAA,SACT;AAAA,OACF,CAAA;AAAA,MACA,CAAC,KAAA,CAAM,UAAY,EAAA,KAAA,CAAM,KAAK,CAAA;AAAA,KAChC,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,QAAA,CAAS,WAAW,aAAkB,KAAA,KAAA,CAAA;AACxC,QAAA,QAAA,CAAS,QAAQ,aAAgB,GAAA,aAAA,CAAA;AAAA,KACrC,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAElB,IAAA,MAAM,QAAW,GAAA,OAAA;AAAA,MACf,OAAO,EAAE,OAAA,EAAS,gBAAiB,EAAA,CAAA;AAAA,MACnC,EAAC;AAAA,KACH,CAAA;AAEA,IAAO,OAAA,MAAA;AAAA;AAAA,sBAEL,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,UAAA;AAAA,UACL,SAAS,KAAM,CAAA,OAAA;AAAA,UACf,cAAc,EAAA,SAAA;AAAA,UACd,EAAI,EAAA,QAAA;AAAA,UACJ,GAAK,EAAA,QAAA;AAAA,UACL,QAAA;AAAA,UACA,IAAA;AAAA,UACA,OAAS,EAAA,SAAA;AAAA,UACT,QAAA,EAAU,CAAC,EAAO,KAAA;AAChB,YAAA,IAAI,MAAM,OAAY,KAAA,KAAA,CAAA;AAAW,cAAa,YAAA,CAAA,EAAA,CAAG,OAAO,OAAO,CAAA,CAAA;AAC/D,YAAI,IAAA,QAAA;AAAU,cAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAAA,WAC3B;AAAA,UACA,QAAA;AAAA,UACA,SAAW,EAAA,CAAA,CAAA,EAAI,KAAM,CAAA,SAAA,IAAa,EAAE,CAAA,gBAAA,CAAA;AAAA,UACnC,GAAI,KAAA;AAAA,SAAA;AAAA,OACP;AAAA,wBAGE,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,OAAA,EAAS,CAAC,EAAO,KAAA;AACf,YAAA,IAAI,QAAU,EAAA;AACZ,cAAA,OAAA;AAAA,aACF;AACA,YACE,IAAA,iBAAA;AAAA,cACE,EAAG,CAAA,MAAA;AAAA,cACH,CAAC,OAAa,KAAA,OAAA,CAA6B,IAAS,KAAA,QAAA;AAAA,aAEtD,EAAA;AACA,cAAA,IAAI,KAAM,CAAA,OAAA;AAAS,gBAAA,KAAA,CAAM,QAAQ,EAAE,CAAA,CAAA;AACnC,cAAA,QAAA,CAAS,SAAS,KAAM,EAAA,CAAA;AAAA,aAC1B;AAAA,WACF;AAAA,UACA,IAAK,EAAA,QAAA;AAAA,UACJ,GAAG,WAAW,sBAAsB,CAAA;AAAA,UACrC,IAAK,EAAA,UAAA;AAAA,UACL,cAAc,EAAA,SAAA;AAAA,UACd,EAAA;AAAA,UACA,GAAA;AAAA,UACA,QAAA;AAAA,UAEA,8BAAC,IAAK,EAAA,EAAA,KAAA,EAAM,IAAG,IAAK,EAAA,OAAA,EAAQ,MAAK,MAAO,EAAA,CAAA;AAAA,SAAA;AAAA,OAC1C;AAAA,sBACA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,UAAA;AAAA,UACL,EAAA,EAAI,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,UACtB,GAAK,EAAA,QAAA;AAAA,UACL,OAAA,EAAS,CAAC,EAAO,KAAA;AACf,YAAA,EAAA,CAAG,eAAgB,EAAA,CAAA;AAAA,WACrB;AAAA,UACA,IAAA;AAAA,UACA,OAAS,EAAA,SAAA;AAAA,UACT,QAAA,EAAU,CAAC,EAAO,KAAA;AAChB,YAAA,IAAI,MAAM,OAAY,KAAA,KAAA,CAAA;AAAW,cAAa,YAAA,CAAA,EAAA,CAAG,OAAO,OAAO,CAAA,CAAA;AAC/D,YAAI,IAAA,QAAA;AAAU,cAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAAA,WAC3B;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,SAAA;AAAA,OACF;AAAA,KACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,QAAA,CAAS,WAAc,GAAA,UAAA;;;;"}

package/dist/components/forms/DateInput.d.ts

@@ -0,0 +1,44 @@
+import { InputProps } from '@apia/theme';
+import { TModify } from '@apia/util';
+import React__default from 'react';
+import { IIconInput } from './IconInput.js';
+
+declare global {
+    interface Window {
+        LANG_CODE: string;
+        MSG_INVALID_DATE: string;
+        MSG_FEC_FIN_MAY_FEC_INI: string;
+        LBL_PICK_DATE: string;
+    }
+}
+type TDateProps = TModify<InputProps, {
+    allowPickBeforeToday?: boolean;
+    error?: string | null;
+    /**
+     * Con esta propiedad se puede proveer una función que será utilizada para
+     * determinar qué máscara debe utilizar el input
+     */
+    getCustomMask?: () => string;
+    isLoading?: boolean;
+    /**
+     * Recibe la nueva fecha. En caso de devolver
+     * false desde este método, el nuevo valor no
+     * se persistirá.
+     */
+    onChange?: (newValue: string) => boolean | string | void;
+    /**
+     * Es llamado cada vez que alguien presiona el botón de eliminar fecha.
+     */
+    onDelete?: () => void;
+    onError?: (error: string | null) => unknown;
+    /**
+     * Con esta propiedad se puede proveer una función que recibirá como
+     * parámetro el valor actual del cmapo y debe devolver el valor a mostrar.
+     */
+    renderLabel?: (value: string) => string;
+    value?: string;
+}> & Pick<IIconInput, 'buttonProps'>;
+declare const DateInput: React__default.ForwardRefExoticComponent<Omit<TDateProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+
+export { DateInput, type TDateProps };
+//# sourceMappingURL=DateInput.d.ts.map

package/dist/components/forms/DateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/DateInput.js

@@ -0,0 +1,246 @@
+import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
+import { Close, Box, getVariant } from '@apia/theme';
+import { getDateFormat, useUpdateEffect, isChild } from '@apia/util';
+import dayjs from 'dayjs';
+import uniqueId from 'lodash-es/uniqueId';
+import React__default from 'react';
+import { icons } from '@apia/icons';
+import globalFocus from '../../globalFocus.js';
+import { CalendarModal } from '../modals/CalendarModal.js';
+import { FieldErrorMessage } from './FieldErrorMessage.js';
+import { IconInput } from './IconInput.js';
+import { getFieldErrorStyles } from './util/style.js';
+import { useModal } from '../modals/hooks/useModal.js';
+
+const DEFAULT_LOCALE = window.LANG_CODE;
+const DEFAULT_MASK_PLACEHOLDER = "_";
+const dateFormat = getDateFormat();
+const getMaskForDateFormat = () => {
+  if (dateFormat === "YYYY/MM/DD")
+    return "9999/99/99";
+  return "99/99/9999";
+};
+const DateInput = React__default.forwardRef(
+  ({
+    allowPickBeforeToday,
+    buttonProps: outerButtonProps,
+    className,
+    error,
+    getCustomMask,
+    isLoading,
+    onBlur,
+    onChange,
+    onDelete,
+    onError,
+    renderLabel,
+    value: outerValue,
+    ...props
+  }, ref) => {
+    const id = React__default.useMemo(uniqueId, []);
+    const [inputValue, setInputValue] = React__default.useState(outerValue ?? "");
+    const [calValue, setCalValue] = React__default.useState();
+    const boxRef = React__default.useRef(null);
+    const { show, hide, ...modalProps } = useModal({
+      preFetcher() {
+        globalFocus.focus = () => boxRef.current?.querySelector(".iconButton");
+        return new Promise((resolve) => {
+          let currentSelectedDate = dayjs(inputValue, dateFormat);
+          if (!currentSelectedDate.isValid())
+            currentSelectedDate = dayjs(/* @__PURE__ */ new Date());
+          setCalValue(currentSelectedDate.toDate());
+          resolve();
+        });
+      }
+    });
+    const [stateError, setError] = React__default.useState(error ?? null);
+    const lastEmittedValue = React__default.useRef(outerValue ?? "");
+    useUpdateEffect(() => {
+      setInputValue(outerValue ?? "");
+      lastEmittedValue.current = outerValue;
+    }, [outerValue]);
+    useUpdateEffect(() => {
+      setError(error ?? null);
+    }, [error]);
+    useUpdateEffect(() => {
+      if (onError)
+        onError(stateError);
+    }, [stateError]);
+    const shoutOnChange = React__default.useCallback(
+      (newValue) => {
+        if (newValue !== lastEmittedValue.current && onChange) {
+          lastEmittedValue.current = newValue;
+          return onChange(newValue);
+        }
+        return true;
+      },
+      [onChange]
+    );
+    const setCalendarValue = React__default.useCallback(
+      (value, nocheck) => {
+        if (value === "") {
+          void shoutOnChange("");
+          setInputValue("");
+          return;
+        }
+        let newDate;
+        if (value !== "") {
+          newDate = dayjs(value, dateFormat);
+          if (!newDate.isValid())
+            newDate = dayjs(/* @__PURE__ */ new Date());
+        } else {
+          newDate = dayjs(/* @__PURE__ */ new Date());
+        }
+        const formattedDate = newDate.format(dateFormat);
+        const today = /* @__PURE__ */ new Date();
+        today.setHours(0, 0, 0, 0);
+        if (formattedDate !== inputValue && nocheck !== true) {
+          void shoutOnChange("");
+          setInputValue("");
+          setError(window.MSG_INVALID_DATE);
+        } else if (allowPickBeforeToday === false && newDate.isBefore(today)) {
+          void shoutOnChange("");
+          setInputValue("");
+          setError(window.MSG_FEC_FIN_MAY_FEC_INI);
+        } else {
+          const shoutResult = shoutOnChange(value === "" ? "" : formattedDate);
+          if (shoutResult === false) {
+            setInputValue(shoutResult || "");
+            setError(null);
+          } else if (typeof shoutResult === "string") {
+            setInputValue("");
+            setError(shoutResult);
+          } else {
+            setInputValue(formattedDate);
+            setError(null);
+          }
+        }
+      },
+      [allowPickBeforeToday, inputValue, shoutOnChange]
+    );
+    const selectDate = React__default.useCallback(
+      (val) => {
+        hide();
+        const newValue = dayjs(val).format(dateFormat);
+        setCalendarValue(newValue, true);
+      },
+      [hide, setCalendarValue]
+    );
+    const onCloseCalendarModal = React__default.useCallback(() => {
+      hide();
+    }, [hide]);
+    const handleBlur = React__default.useCallback(
+      (ev) => {
+        if (onBlur && !isChild(ev.relatedTarget, (current) => {
+          return current.id === `DateModal${id}` || current.id === `DateInput${id}`;
+        })) {
+          onBlur(ev);
+        }
+      },
+      [id, onBlur]
+    );
+    const inputProps = React__default.useMemo(
+      () => ({
+        ...props,
+        className: "dateInput",
+        value: renderLabel ? renderLabel(inputValue) : inputValue,
+        ref,
+        onChange: (ev) => {
+          setInputValue(ev.target.value);
+          if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "")
+            setError(null);
+        },
+        onBlur: (ev) => {
+          if (!(props.readOnly || getCustomMask))
+            setCalendarValue(ev.target.value);
+          handleBlur(ev);
+        },
+        onKeyDown: (ev) => {
+          if (ev.key === "Enter")
+            setCalendarValue(inputValue);
+        }
+      }),
+      [
+        getCustomMask,
+        handleBlur,
+        inputValue,
+        props,
+        ref,
+        renderLabel,
+        setCalendarValue
+      ]
+    );
+    const buttonProps = React__default.useMemo(
+      () => ({
+        disabled: props.disabled ?? props.readOnly,
+        "aria-label": window.LBL_PICK_DATE,
+        ...outerButtonProps
+      }),
+      [outerButtonProps, props.disabled, props.readOnly]
+    );
+    const additionalButtons = React__default.useMemo(
+      () => /* @__PURE__ */ jsx(
+        Close,
+        {
+          className: "delete_date_button",
+          onClick: () => {
+            setCalendarValue("");
+            onDelete?.();
+            document.querySelector(
+              `#DateInput${id} input`
+            )?.focus();
+          },
+          type: "button"
+        }
+      ),
+      [id, onDelete, setCalendarValue]
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CalendarModal,
+        {
+          ...modalProps,
+          calValue,
+          locale: DEFAULT_LOCALE,
+          handleClickDay: selectDate,
+          onCancel: onCloseCalendarModal,
+          id: `DateModal${id}`
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          ...getVariant("forms.dateInput"),
+          className: `${className ?? ""} dateInput`,
+          id: `DateInput${id}`,
+          ref: boxRef,
+          children: [
+            /* @__PURE__ */ jsx(
+              IconInput,
+              {
+                additionalButtons: inputValue && inputValue !== getMaskForDateFormat().replaceAll(
+                  "9",
+                  DEFAULT_MASK_PLACEHOLDER
+                ) && !props.readOnly && !props.disabled ? additionalButtons : void 0,
+                isLoading,
+                maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
+                mask: getCustomMask ? getCustomMask() : getMaskForDateFormat(),
+                icon: icons.Calendar,
+                onBlur: handleBlur,
+                buttonProps,
+                inputProps,
+                readOnly: props.readOnly,
+                sx: getFieldErrorStyles(stateError === null),
+                onClick: show
+              }
+            ),
+            stateError && /* @__PURE__ */ jsx(FieldErrorMessage, { children: stateError })
+          ]
+        }
+      )
+    ] });
+  }
+);
+DateInput.displayName = "DateInput";
+
+export { DateInput };
+//# sourceMappingURL=DateInput.js.map

package/dist/components/forms/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sources":["../../../src/components/forms/DateInput.tsx"],"sourcesContent":["import { getVariant, Box, Close, InputProps } from '@apia/theme';\r\nimport {\r\n  getDateFormat,\r\n  isChild,\r\n  TDateFormat,\r\n  TModify,\r\n  useUpdateEffect,\r\n} from '@apia/util';\r\nimport dayjs from 'dayjs';\r\nimport uniqueId from 'lodash-es/uniqueId';\r\nimport React from 'react';\r\nimport { icons } from '@apia/icons';\r\nimport globalFocus from '../../globalFocus';\r\nimport { useModal } from '../modals';\r\nimport { CalendarModal } from '../modals/CalendarModal';\r\nimport { FieldErrorMessage } from './FieldErrorMessage';\r\nimport { IconInput, IIconInput } from './IconInput';\r\nimport { getFieldErrorStyles } from './util/style';\r\n\r\ndeclare global {\r\n  interface Window {\r\n    LANG_CODE: string;\r\n    MSG_INVALID_DATE: string;\r\n    MSG_FEC_FIN_MAY_FEC_INI: string;\r\n    LBL_PICK_DATE: string;\r\n  }\r\n}\r\n\r\nconst DEFAULT_LOCALE = window.LANG_CODE;\r\nconst DEFAULT_MASK_PLACEHOLDER = '_';\r\n\r\nconst dateFormat: TDateFormat = getDateFormat();\r\n\r\nconst getMaskForDateFormat = (): string => {\r\n  if (dateFormat === 'YYYY/MM/DD') return '9999/99/99';\r\n  return '99/99/9999';\r\n};\r\n\r\nexport type TDateProps = TModify<\r\n  InputProps,\r\n  {\r\n    allowPickBeforeToday?: boolean;\r\n    error?: string | null;\r\n    /**\r\n     * Con esta propiedad se puede proveer una función que será utilizada para\r\n     * determinar qué máscara debe utilizar el input\r\n     */\r\n    getCustomMask?: () => string;\r\n    isLoading?: boolean;\r\n    /**\r\n     * Recibe la nueva fecha. En caso de devolver\r\n     * false desde este método, el nuevo valor no\r\n     * se persistirá.\r\n     */\r\n    onChange?: (newValue: string) => boolean | string | void;\r\n    /**\r\n     * Es llamado cada vez que alguien presiona el botón de eliminar fecha.\r\n     */\r\n    onDelete?: () => void;\r\n    onError?: (error: string | null) => unknown;\r\n    /**\r\n     * Con esta propiedad se puede proveer una función que recibirá como\r\n     * parámetro el valor actual del cmapo y debe devolver el valor a mostrar.\r\n     */\r\n    renderLabel?: (value: string) => string;\r\n    value?: string;\r\n  }\r\n> &\r\n  Pick<IIconInput, 'buttonProps'>;\r\n\r\nexport const DateInput = React.forwardRef<HTMLInputElement, TDateProps>(\r\n  (\r\n    {\r\n      allowPickBeforeToday,\r\n      buttonProps: outerButtonProps,\r\n      className,\r\n      error,\r\n      getCustomMask,\r\n      isLoading,\r\n      onBlur,\r\n      onChange,\r\n      onDelete,\r\n      onError,\r\n      renderLabel,\r\n      value: outerValue,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const id = React.useMemo(uniqueId, []);\r\n    const [inputValue, setInputValue] = React.useState(outerValue ?? '');\r\n    const [calValue, setCalValue] = React.useState<Date>();\r\n    const boxRef = React.useRef<HTMLElement | null>(null);\r\n    const { show, hide, ...modalProps } = useModal({\r\n      preFetcher() {\r\n        globalFocus.focus = () =>\r\n          boxRef.current?.querySelector('.iconButton') as HTMLElement;\r\n        return new Promise((resolve) => {\r\n          let currentSelectedDate = dayjs(inputValue, dateFormat);\r\n          if (!currentSelectedDate.isValid())\r\n            currentSelectedDate = dayjs(new Date());\r\n          setCalValue(currentSelectedDate.toDate());\r\n          resolve();\r\n        });\r\n      },\r\n    });\r\n    const [stateError, setError] = React.useState<null | string>(error ?? null);\r\n\r\n    const lastEmittedValue = React.useRef(outerValue ?? '');\r\n    useUpdateEffect(() => {\r\n      setInputValue(outerValue ?? '');\r\n      lastEmittedValue.current = outerValue as string;\r\n    }, [outerValue]);\r\n\r\n    useUpdateEffect(() => {\r\n      setError(error ?? null);\r\n    }, [error]);\r\n\r\n    useUpdateEffect(() => {\r\n      if (onError) onError(stateError);\r\n    }, [stateError]);\r\n\r\n    const shoutOnChange = React.useCallback(\r\n      (newValue: string) => {\r\n        if (newValue !== lastEmittedValue.current && onChange) {\r\n          lastEmittedValue.current = newValue;\r\n          return onChange(newValue);\r\n        }\r\n        return true;\r\n      },\r\n      [onChange],\r\n    );\r\n\r\n    const setCalendarValue = React.useCallback(\r\n      (value: string, nocheck?: boolean) => {\r\n        if (value === '') {\r\n          void shoutOnChange('');\r\n          setInputValue('');\r\n          return;\r\n        }\r\n        let newDate: dayjs.Dayjs;\r\n        if (value !== '') {\r\n          // format cal needs: Tue Feb 09 2021 00:00:00 GMT-0300\r\n          newDate = dayjs(value, dateFormat);\r\n          if (!newDate.isValid()) newDate = dayjs(new Date());\r\n        } else {\r\n          newDate = dayjs(new Date());\r\n        }\r\n        const formattedDate = newDate.format(dateFormat);\r\n        const today = new Date();\r\n        today.setHours(0, 0, 0, 0);\r\n        if (formattedDate !== inputValue && nocheck !== true) {\r\n          void shoutOnChange('');\r\n          setInputValue('');\r\n          setError(window.MSG_INVALID_DATE);\r\n        } else if (allowPickBeforeToday === false && newDate.isBefore(today)) {\r\n          void shoutOnChange('');\r\n          setInputValue('');\r\n          setError(window.MSG_FEC_FIN_MAY_FEC_INI);\r\n        } else {\r\n          const shoutResult = shoutOnChange(value === '' ? '' : formattedDate);\r\n          if (shoutResult === false) {\r\n            setInputValue(shoutResult || '');\r\n            setError(null);\r\n          } else if (typeof shoutResult === 'string') {\r\n            setInputValue('');\r\n            setError(shoutResult);\r\n          } else {\r\n            setInputValue(formattedDate);\r\n            setError(null);\r\n          }\r\n        }\r\n      },\r\n      [allowPickBeforeToday, inputValue, shoutOnChange],\r\n    );\r\n\r\n    const selectDate = React.useCallback(\r\n      (val: Date): void => {\r\n        hide();\r\n        const newValue = dayjs(val).format(dateFormat);\r\n        setCalendarValue(newValue, true);\r\n      },\r\n      [hide, setCalendarValue],\r\n    );\r\n\r\n    const onCloseCalendarModal = React.useCallback(() => {\r\n      hide();\r\n    }, [hide]);\r\n\r\n    const handleBlur = React.useCallback(\r\n      (ev: React.FocusEvent<HTMLInputElement>) => {\r\n        if (\r\n          onBlur &&\r\n          !isChild(ev.relatedTarget as HTMLElement, (current) => {\r\n            return (\r\n              current.id === `DateModal${id}` || current.id === `DateInput${id}`\r\n            );\r\n          })\r\n        ) {\r\n          onBlur(ev);\r\n        }\r\n      },\r\n      [id, onBlur],\r\n    );\r\n\r\n    const inputProps = React.useMemo(\r\n      () => ({\r\n        ...props,\r\n        className: 'dateInput',\r\n        value: renderLabel ? renderLabel(inputValue) : inputValue,\r\n        ref,\r\n        onChange: (ev: React.ChangeEvent<HTMLInputElement>) => {\r\n          setInputValue(ev.target.value);\r\n          if (\r\n            getMaskForDateFormat().replaceAll('9', DEFAULT_MASK_PLACEHOLDER) !==\r\n              ev.target.value &&\r\n            ev.target.value !== ''\r\n          )\r\n            setError(null);\r\n        },\r\n        onBlur: (ev: React.FocusEvent<HTMLInputElement>) => {\r\n          if (!(props.readOnly || getCustomMask))\r\n            setCalendarValue(ev.target.value);\r\n          handleBlur(ev);\r\n        },\r\n        onKeyDown: (ev: React.KeyboardEvent) => {\r\n          if (ev.key === 'Enter') setCalendarValue(inputValue);\r\n        },\r\n      }),\r\n      [\r\n        getCustomMask,\r\n        handleBlur,\r\n        inputValue,\r\n        props,\r\n        ref,\r\n        renderLabel,\r\n        setCalendarValue,\r\n      ],\r\n    );\r\n\r\n    const buttonProps = React.useMemo(\r\n      () => ({\r\n        disabled: props.disabled ?? props.readOnly,\r\n        'aria-label': window.LBL_PICK_DATE,\r\n        ...outerButtonProps,\r\n      }),\r\n      [outerButtonProps, props.disabled, props.readOnly],\r\n    );\r\n\r\n    const additionalButtons = React.useMemo(\r\n      () => (\r\n        <Close\r\n          className=\"delete_date_button\"\r\n          onClick={() => {\r\n            setCalendarValue('');\r\n            onDelete?.();\r\n            (\r\n              document.querySelector(\r\n                `#DateInput${id} input`,\r\n              ) as HTMLInputElement\r\n            )?.focus();\r\n          }}\r\n          type=\"button\"\r\n        />\r\n      ),\r\n      [id, onDelete, setCalendarValue],\r\n    );\r\n\r\n    return (\r\n      <>\r\n        <CalendarModal\r\n          {...modalProps}\r\n          calValue={calValue}\r\n          locale={DEFAULT_LOCALE}\r\n          handleClickDay={selectDate}\r\n          onCancel={onCloseCalendarModal}\r\n          id={`DateModal${id}`}\r\n        />\r\n        <Box\r\n          {...getVariant('forms.dateInput')}\r\n          className={`${className ?? ''} dateInput`}\r\n          id={`DateInput${id}`}\r\n          ref={boxRef}\r\n        >\r\n          <IconInput\r\n            additionalButtons={\r\n              inputValue &&\r\n              inputValue !==\r\n                getMaskForDateFormat().replaceAll(\r\n                  '9',\r\n                  DEFAULT_MASK_PLACEHOLDER,\r\n                ) &&\r\n              !props.readOnly &&\r\n              !props.disabled\r\n                ? additionalButtons\r\n                : undefined\r\n            }\r\n            isLoading={isLoading}\r\n            maskPlaceholder={DEFAULT_MASK_PLACEHOLDER}\r\n            mask={getCustomMask ? getCustomMask() : getMaskForDateFormat()}\r\n            icon={icons.Calendar}\r\n            onBlur={handleBlur}\r\n            buttonProps={buttonProps}\r\n            inputProps={inputProps}\r\n            readOnly={props.readOnly}\r\n            sx={getFieldErrorStyles(stateError === null)}\r\n            onClick={show}\r\n          />\r\n          {stateError && <FieldErrorMessage>{stateError}</FieldErrorMessage>}\r\n        </Box>\r\n      </>\r\n    );\r\n  },\r\n);\r\n\r\nDateInput.displayName = 'DateInput';\r\n"],"names":["React"],"mappings":"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"}

package/dist/components/forms/FieldErrorMessage.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface IFieldErrorMessage {
+    children: React.ReactNode | string;
+    name?: string;
+}
+declare const FieldErrorMessage: ({ children, name }: IFieldErrorMessage) => React.JSX.Element | null;
+
+export { FieldErrorMessage, type IFieldErrorMessage };
+//# sourceMappingURL=FieldErrorMessage.d.ts.map

package/dist/components/forms/FieldErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrorMessage.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/FieldErrorMessage.js

@@ -0,0 +1,34 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { customEvents } from '@apia/util';
+import * as React from 'react';
+import { Box } from '@apia/theme';
+
+const FieldErrorMessage = ({ children, name }) => {
+  const [ref, setRef] = React.useState(null);
+  React.useEffect(() => {
+    if (children) {
+      const event = new CustomEvent(customEvents.focus, { bubbles: true });
+      ref?.dispatchEvent(event);
+    }
+  }, [children, ref]);
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: setRef,
+        role: "alert",
+        "data-testid": name ? `err_${name}` : null,
+        sx: {
+          mb: "0",
+          color: "danger",
+          pt: "2"
+        },
+        children
+      }
+    );
+  }
+  return null;
+};
+
+export { FieldErrorMessage };
+//# sourceMappingURL=FieldErrorMessage.js.map

package/dist/components/forms/FieldErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrorMessage.js","sources":["../../../src/components/forms/FieldErrorMessage.tsx"],"sourcesContent":["import { customEvents } from '@apia/util';\r\nimport * as React from 'react';\r\nimport { Box } from '@apia/theme';\r\n\r\nexport interface IFieldErrorMessage {\r\n  children: React.ReactNode | string;\r\n  name?: string;\r\n}\r\n\r\nexport const FieldErrorMessage = ({ children, name }: IFieldErrorMessage) => {\r\n  const [ref, setRef] = React.useState<null | HTMLDivElement>(null);\r\n\r\n  React.useEffect(() => {\r\n    if (children) {\r\n      const event = new CustomEvent(customEvents.focus, { bubbles: true });\r\n      ref?.dispatchEvent(event);\r\n    }\r\n  }, [children, ref]);\r\n\r\n  if (children) {\r\n    return (\r\n      <Box\r\n        ref={setRef}\r\n        role=\"alert\"\r\n        data-testid={name ? `err_${name}` : null}\r\n        sx={{\r\n          mb: '0',\r\n          color: 'danger',\r\n          pt: '2',\r\n        }}\r\n      >\r\n        {children}\r\n      </Box>\r\n    );\r\n  }\r\n  return null;\r\n};\r\n"],"names":[],"mappings":";;;;;AASO,MAAM,iBAAoB,GAAA,CAAC,EAAE,QAAA,EAAU,MAA+B,KAAA;AAC3E,EAAA,MAAM,CAAC,GAAK,EAAA,MAAM,CAAI,GAAA,KAAA,CAAM,SAAgC,IAAI,CAAA,CAAA;AAEhE,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,KAAA,GAAQ,IAAI,WAAY,CAAA,YAAA,CAAa,OAAO,EAAE,OAAA,EAAS,MAAM,CAAA,CAAA;AACnE,MAAA,GAAA,EAAK,cAAc,KAAK,CAAA,CAAA;AAAA,KAC1B;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,GAAG,CAAC,CAAA,CAAA;AAElB,EAAA,IAAI,QAAU,EAAA;AACZ,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,MAAA;AAAA,QACL,IAAK,EAAA,OAAA;AAAA,QACL,aAAa,EAAA,IAAA,GAAO,CAAO,IAAA,EAAA,IAAI,CAAK,CAAA,GAAA,IAAA;AAAA,QACpC,EAAI,EAAA;AAAA,UACF,EAAI,EAAA,GAAA;AAAA,UACJ,KAAO,EAAA,QAAA;AAAA,UACP,EAAI,EAAA,GAAA;AAAA,SACN;AAAA,QAEC,QAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/components/forms/FieldLabel.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { BoxProps } from '@apia/theme';
+
+type TFieldLabel = {
+    avoidSemicolon?: boolean;
+    /**
+     * Permite mostrar un mensaje de error debajo del campo
+     */
+    error?: string;
+    hideRequiredMark?: boolean;
+    label: string;
+    /**
+     * La propiedad required se utiliza para mostrar el * de requerido.
+     *
+     * @see requiredMarkPosition
+     * @see hideRequiredMark
+     */
+    required?: boolean;
+    requiredMarkPosition?: 'before' | 'after';
+} & BoxProps;
+declare const FieldLabel: React.ForwardRefExoticComponent<{
+    avoidSemicolon?: boolean | undefined;
+    /**
+     * Permite mostrar un mensaje de error debajo del campo
+     */
+    error?: string | undefined;
+    hideRequiredMark?: boolean | undefined;
+    label: string;
+    /**
+     * La propiedad required se utiliza para mostrar el * de requerido.
+     *
+     * @see requiredMarkPosition
+     * @see hideRequiredMark
+     */
+    required?: boolean | undefined;
+    requiredMarkPosition?: "after" | "before" | undefined;
+} & BoxProps & React.RefAttributes<HTMLDivElement>>;
+
+export { FieldLabel, type TFieldLabel };
+//# sourceMappingURL=FieldLabel.d.ts.map

package/dist/components/forms/FieldLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/FieldLabel.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { injectStyles, Box, getVariant } from '@apia/theme';
+import { forwardRef } from 'react';
+import { RequiredMark } from './RequiredMark.js';
+
+injectStyles("layout.common.components.fieldLabel", {
+  display: "flex",
+  flexDirection: "column",
+  gap: 1,
+  ".fieldLabel__label": {
+    fontWeight: "bold"
+  }
+});
+const FieldLabel = forwardRef(
+  ({
+    as,
+    avoidSemicolon,
+    children,
+    error,
+    hideRequiredMark,
+    label,
+    required,
+    requiredMarkPosition = "after",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        as: as ?? "label",
+        ...props,
+        className: `fieldLabel ${props.className ?? ""}`,
+        ...getVariant("layout.common.components.fieldLabel"),
+        "aria-label": props["aria-label"] ?? label,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: "fieldLabel__label", children: [
+            requiredMarkPosition === "before" && /* @__PURE__ */ jsx(
+              RequiredMark,
+              {
+                isRequired: required,
+                isReadonly: hideRequiredMark,
+                isFormReadonly: hideRequiredMark
+              }
+            ),
+            label,
+            requiredMarkPosition === "after" && /* @__PURE__ */ jsx(
+              RequiredMark,
+              {
+                isRequired: required,
+                isReadonly: hideRequiredMark,
+                isFormReadonly: hideRequiredMark
+              }
+            ),
+            !avoidSemicolon && ":"
+          ] }),
+          /* @__PURE__ */ jsx(Box, { children }),
+          error && /* @__PURE__ */ jsx(Box, { className: "fieldLabel__error", children: error })
+        ]
+      }
+    );
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+
+export { FieldLabel };
+//# sourceMappingURL=FieldLabel.js.map

package/dist/components/forms/FieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.js","sources":["../../../src/components/forms/FieldLabel.tsx"],"sourcesContent":["import { injectStyles, getVariant, Box, BoxProps } from '@apia/theme';\r\nimport { forwardRef } from 'react';\r\nimport { RequiredMark } from './RequiredMark';\r\n\r\nexport type TFieldLabel = {\r\n  avoidSemicolon?: boolean;\r\n  /**\r\n   * Permite mostrar un mensaje de error debajo del campo\r\n   */\r\n  error?: string;\r\n  hideRequiredMark?: boolean;\r\n  label: string;\r\n  /**\r\n   * La propiedad required se utiliza para mostrar el * de requerido.\r\n   *\r\n   * @see requiredMarkPosition\r\n   * @see hideRequiredMark\r\n   */\r\n  required?: boolean;\r\n  requiredMarkPosition?: 'before' | 'after';\r\n} & BoxProps;\r\n\r\ninjectStyles('layout.common.components.fieldLabel', {\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  gap: 1,\r\n\r\n  '.fieldLabel__label': {\r\n    fontWeight: 'bold',\r\n  },\r\n});\r\n\r\nexport const FieldLabel = forwardRef<HTMLDivElement, TFieldLabel>(\r\n  (\r\n    {\r\n      as,\r\n      avoidSemicolon,\r\n      children,\r\n      error,\r\n      hideRequiredMark,\r\n      label,\r\n      required,\r\n      requiredMarkPosition = 'after',\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    return (\r\n      <Box\r\n        as={as ?? 'label'}\r\n        {...props}\r\n        className={`fieldLabel ${props.className ?? ''}`}\r\n        {...getVariant('layout.common.components.fieldLabel')}\r\n        aria-label={props['aria-label'] ?? label}\r\n        ref={ref}\r\n      >\r\n        <Box className=\"fieldLabel__label\">\r\n          {requiredMarkPosition === 'before' && (\r\n            <RequiredMark\r\n              isRequired={required}\r\n              isReadonly={hideRequiredMark}\r\n              isFormReadonly={hideRequiredMark}\r\n            />\r\n          )}\r\n          {label}\r\n          {requiredMarkPosition === 'after' && (\r\n            <RequiredMark\r\n              isRequired={required}\r\n              isReadonly={hideRequiredMark}\r\n              isFormReadonly={hideRequiredMark}\r\n            />\r\n          )}\r\n          {!avoidSemicolon && ':'}\r\n        </Box>\r\n        <Box>{children}</Box>\r\n        {error && <Box className=\"fieldLabel__error\">{error}</Box>}\r\n      </Box>\r\n    );\r\n  },\r\n);\r\n\r\nFieldLabel.displayName = 'FieldLabel';\r\n"],"names":[],"mappings":";;;;;AAsBA,YAAA,CAAa,qCAAuC,EAAA;AAAA,EAClD,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,GAAK,EAAA,CAAA;AAAA,EAEL,oBAAsB,EAAA;AAAA,IACpB,UAAY,EAAA,MAAA;AAAA,GACd;AACF,CAAC,CAAA,CAAA;AAEM,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CACE;AAAA,IACE,EAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,oBAAuB,GAAA,OAAA;AAAA,IACvB,GAAG,KAAA;AAAA,KAEL,GACG,KAAA;AACH,IACE,uBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,IAAI,EAAM,IAAA,OAAA;AAAA,QACT,GAAG,KAAA;AAAA,QACJ,SAAW,EAAA,CAAA,WAAA,EAAc,KAAM,CAAA,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,QAC7C,GAAG,WAAW,qCAAqC,CAAA;AAAA,QACpD,YAAA,EAAY,KAAM,CAAA,YAAY,CAAK,IAAA,KAAA;AAAA,QACnC,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,GAAA,EAAA,EAAI,WAAU,mBACZ,EAAA,QAAA,EAAA;AAAA,YAAA,oBAAA,KAAyB,QACxB,oBAAA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,UAAY,EAAA,QAAA;AAAA,gBACZ,UAAY,EAAA,gBAAA;AAAA,gBACZ,cAAgB,EAAA,gBAAA;AAAA,eAAA;AAAA,aAClB;AAAA,YAED,KAAA;AAAA,YACA,yBAAyB,OACxB,oBAAA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,UAAY,EAAA,QAAA;AAAA,gBACZ,UAAY,EAAA,gBAAA;AAAA,gBACZ,cAAgB,EAAA,gBAAA;AAAA,eAAA;AAAA,aAClB;AAAA,YAED,CAAC,cAAkB,IAAA,GAAA;AAAA,WACtB,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,OAAK,QAAS,EAAA,CAAA;AAAA,UACd,KAAS,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAU,qBAAqB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACtD,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}