@ultraviolet/form 2.13.2 → 2.13.4

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

@@ -0,0 +1,10 @@
+import { Checkbox } from '@ultraviolet/ui';
+import type { ComponentProps, ReactNode } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'value'> & Partial<Pick<ComponentProps<typeof Checkbox>, 'id' | 'disabled' | 'onBlur' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
+    className?: string;
+    children?: ReactNode;
+};
+export declare const CheckboxField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ id, name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, shouldUnregister, }: CheckboxFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CheckboxField/index.js

@@ -1,8 +1,7 @@
-import { Checkbox } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Checkbox } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const CheckboxField = ({
   id,
   name,
@@ -19,7 +18,7 @@ const CheckboxField = ({
   rules,
   helper,
   tooltip,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
   const {
@@ -39,33 +38,16 @@ const CheckboxField = ({
       ...rules
     }
   });
-  return jsx(Checkbox, {
-    id: id,
-    name: field.name,
-    onChange: event => {
-      field.onChange(event.target.checked);
-      onChange?.(event.target.checked);
-    },
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onFocus: onFocus,
-    size: size,
-    progress: progress,
-    disabled: field.disabled,
-    checked: !!field.value,
-    error: getError({
-      label: label ?? ''
-    }, error),
-    ref: field.ref,
-    className: className,
-    required: required,
-    "data-testid": dataTestId,
-    helper: helper,
-    tooltip: tooltip,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(Checkbox, { id, name: field.name, onChange: (event) => {
+    field.onChange(event.target.checked);
+    onChange?.(event.target.checked);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus, size, progress, disabled: field.disabled, checked: !!field.value, error: getError({
+    label: label ?? ""
+  }, error), ref: field.ref, className, required, "data-testid": dataTestId, helper, tooltip, children });
+};
+export {
+  CheckboxField
 };
-
-export { CheckboxField };

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

@@ -0,0 +1,32 @@
+import { CheckboxGroup } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
+export declare const CheckboxGroupField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, rules, }: CheckboxGroupFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: Omit<({
+        error?: import("react").ReactNode;
+        size?: number | undefined;
+        progress?: boolean | undefined;
+        helper?: import("react").ReactNode;
+        disabled?: boolean | undefined;
+        checked?: boolean | "indeterminate" | undefined;
+        className?: string | undefined;
+        "data-visibility"?: string | undefined;
+        required?: boolean | undefined;
+        'data-testid'?: string | undefined;
+        tooltip?: string | undefined;
+    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "name" | "onFocus" | "autoFocus" | "id" | "tabIndex"> & (({
+        "aria-label"?: undefined;
+    } & {
+        children: import("react").ReactNode;
+    }) | ({
+        children?: undefined;
+    } & {
+        'aria-label': string;
+    }))) & import("react").RefAttributes<HTMLInputElement>, "onChange" | "checked"> & {
+        value: string;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/CheckboxGroupField/index.js

@@ -1,14 +1,13 @@
-import { CheckboxGroup } from '@ultraviolet/ui';
-import { useCallback, Children, isValidElement } from 'react';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { CheckboxGroup } from "@ultraviolet/ui";
+import { useCallback, Children, isValidElement } from "react";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const arraysContainSameValues = (array1, array2) => {
   if (array1.length === 0) {
     return false;
   }
-  return array2.every(value => array1.includes(value));
+  return array2.every((value) => array1.includes(value));
 };
 const CheckboxGroupField = ({
   legend,
@@ -17,7 +16,7 @@ const CheckboxGroupField = ({
   direction,
   children,
   onChange,
-  label = '',
+  label = "",
   error: customError,
   name,
   required = false,
@@ -27,9 +26,9 @@ const CheckboxGroupField = ({
   const {
     getError
   } = useErrors();
-  const validate = useCallback(value => {
-    const requiredChildren = Children.map(children, child => {
-      if ( /*#__PURE__*/isValidElement(child)) {
+  const validate = useCallback((value) => {
+    const requiredChildren = Children.map(children, (child) => {
+      if (isValidElement(child)) {
         if (child.props.required) {
           return child.props.name;
         }
@@ -58,29 +57,19 @@ const CheckboxGroupField = ({
       ...rules
     }
   });
-  return jsx(CheckboxGroup, {
-    legend: legend,
-    name: name,
-    value: field.value,
-    onChange: event => {
-      const fieldValue = field.value;
-      if (fieldValue?.includes(event.currentTarget.value)) {
-        field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
-      } else {
-        field.onChange([...field.value, event.currentTarget.value]);
-      }
-      onChange?.(event.currentTarget.value);
-    },
-    error: getError({
-      label
-    }, error) ?? customError,
-    className: className,
-    direction: direction,
-    helper: helper,
-    required: required,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(CheckboxGroup, { legend, name, value: field.value, onChange: (event) => {
+    const fieldValue = field.value;
+    if (fieldValue?.includes(event.currentTarget.value)) {
+      field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
+    } else {
+      field.onChange([...field.value, event.currentTarget.value]);
+    }
+    onChange?.(event.currentTarget.value);
+  }, error: getError({
+    label
+  }, error) ?? customError, className, direction, helper, required, children });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;
-
-export { CheckboxGroupField };
+export {
+  CheckboxGroupField
+};

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

@@ -0,0 +1,16 @@
+import { DateInput } from '@ultraviolet/ui';
+import type { ComponentProps, FocusEvent } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type DateFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
+    maxDate?: Date;
+    minDate?: Date;
+    disabled?: boolean;
+    required?: boolean;
+    locale?: string;
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onFocus?: (value: FocusEvent<HTMLElement>) => void;
+    autoFocus?: boolean;
+};
+export declare const DateField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, rules, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, shouldUnregister, }: DateFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateField/index.js

@@ -1,16 +1,15 @@
-import { DateInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { maxDateValidator } from '../../validators/maxDate.js';
-import { minDateValidator } from '../../validators/minDate.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-const parseDate = value => typeof value === 'string' ? new Date(value) : value;
-const isEmpty = value => typeof value === 'string' ? value === '' : value === undefined;
+import { jsx } from "@emotion/react/jsx-runtime";
+import { DateInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { maxDateValidator } from "../../validators/maxDate.js";
+import { minDateValidator } from "../../validators/minDate.js";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const parseDate = (value) => typeof value === "string" ? new Date(value) : value;
+const isEmpty = (value) => typeof value === "string" ? value === "" : value === void 0;
 const DateField = ({
   required,
   name,
-  label = '',
+  label = "",
   format,
   locale,
   maxDate,
@@ -23,7 +22,7 @@ const DateField = ({
   autoFocus = false,
   excludeDates,
   selectsRange,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
   const {
@@ -47,48 +46,29 @@ const DateField = ({
       required
     }
   });
-  return jsx(DateInput, {
-    name: field.name,
-    label: label,
-    value: field.value,
-    format: format || (value => value ? parseDate(value).toLocaleDateString() : ''),
-    locale: locale,
-    required: required,
-    onChange: val => {
-      if (val && val instanceof Date) {
-        onChange?.(val);
-        const newDate = parseDate(val);
-        if (isEmpty(field.value)) {
-          field.onChange(newDate);
-          return;
-        }
-        const currentDate = parseDate(field.value);
-        newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+  return /* @__PURE__ */ jsx(DateInput, { name: field.name, label, value: field.value, format: format || ((value) => value ? parseDate(value).toLocaleDateString() : ""), locale, required, onChange: (val) => {
+    if (val && val instanceof Date) {
+      onChange?.(val);
+      const newDate = parseDate(val);
+      if (isEmpty(field.value)) {
         field.onChange(newDate);
-      } else if (Array.isArray(val)) {
-        field.onChange(val);
+        return;
       }
-    },
-    onBlur: e => {
-      field.onBlur();
-      onBlur?.(e);
-    },
-    onFocus: onFocus,
-    maxDate: maxDate,
-    minDate: minDate,
-    error: getError({
-      minDate,
-      maxDate,
-      label
-    }, error),
-    disabled: disabled,
-    autoFocus: autoFocus,
-    excludeDates: excludeDates,
-    selectsRange: selectsRange,
-    "data-testid": dataTestId,
-    startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : undefined,
-    endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : undefined
-  });
+      const currentDate = parseDate(field.value);
+      newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+      field.onChange(newDate);
+    } else if (Array.isArray(val)) {
+      field.onChange(val);
+    }
+  }, onBlur: (e) => {
+    field.onBlur();
+    onBlur?.(e);
+  }, onFocus, maxDate, minDate, error: getError({
+    minDate,
+    maxDate,
+    label
+  }, error), disabled, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
+};
+export {
+  DateField
 };
-
-export { DateField };

package/dist/components/Form/defaultErrors.d.ts

@@ -0,0 +1,2 @@
+import type { RequiredErrors } from '../../types';
+export declare const defaultErrors: RequiredErrors;

package/dist/components/Form/defaultErrors.js

@@ -1,21 +1,22 @@
 const defaultErrors = {
-  maxDate: () => '',
-  maxLength: () => '',
-  minLength: () => '',
-  max: () => '',
-  min: () => '',
-  required: () => '',
-  pattern: () => '',
-  deps: () => '',
-  value: () => '',
-  onBlur: () => '',
-  disabled: () => '',
-  onChange: () => '',
-  validate: () => '',
-  setValueAs: () => '',
-  valueAsDate: () => '',
-  valueAsNumber: () => '',
-  shouldUnregister: () => ''
+  maxDate: () => "",
+  maxLength: () => "",
+  minLength: () => "",
+  max: () => "",
+  min: () => "",
+  required: () => "",
+  pattern: () => "",
+  deps: () => "",
+  value: () => "",
+  onBlur: () => "",
+  disabled: () => "",
+  onChange: () => "",
+  validate: () => "",
+  setValueAs: () => "",
+  valueAsDate: () => "",
+  valueAsNumber: () => "",
+  shouldUnregister: () => ""
+};
+export {
+  defaultErrors
 };
-
-export { defaultErrors };

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

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { DefaultValues, FieldErrors, FieldValues, UseFormHandleSubmit, UseFormReturn } from 'react-hook-form';
+import { FORM_ERROR } from '../../constants';
+import type { FormErrors } from '../../types';
+type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+type SingleXOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export type XOR<T extends unknown[]> = T extends [infer Only] ? Only : T extends [infer A, infer B, ...infer Rest] ? XOR<[SingleXOR<A, B>, ...Rest]> : never;
+type FormStateReturn<TFormValues extends FieldValues> = {
+    values: TFormValues;
+    hasValidationErrors: boolean;
+    errors: FieldErrors<TFormValues>;
+    submitting: boolean;
+    pristine: boolean;
+    handleSubmit: () => Promise<void>;
+    submitError: boolean;
+    valid: boolean;
+    form: {
+        change: UseFormReturn<TFormValues>['setValue'];
+        reset: UseFormReturn<TFormValues>['reset'];
+        submit: () => Promise<void>;
+    };
+};
+type OnRawSubmitReturn = {
+    [FORM_ERROR]?: string;
+} | undefined | null | string | void | boolean | number;
+type FormSubmitContextValue<TFieldValues extends FieldValues = FieldValues> = {
+    handleSubmit: ReturnType<UseFormHandleSubmit<TFieldValues>>;
+};
+export declare const FormSubmitContext: React.Context<FormSubmitContextValue<FieldValues>>;
+export type FormProps<TFormValues extends FieldValues = FieldValues> = {
+    children?: ((props: FormStateReturn<TFormValues>) => ReactNode) | ReactNode;
+    errors: FormErrors;
+    name?: string;
+    onRawSubmit: (data: TFormValues, formState: {
+        reset: UseFormReturn<TFormValues>['reset'];
+        resetFieldState: UseFormReturn<TFormValues>['resetField'];
+        restart: () => void;
+        change: UseFormReturn<TFormValues>['setValue'];
+    }) => Promise<OnRawSubmitReturn> | OnRawSubmitReturn;
+} & XOR<[
+    {
+        /**
+         * @deprecated Use the `methods` prop with [useForm](https://www.react-hook-form.com/api/useform/) instead.
+         *
+         * @example
+         * ```tsx
+         *  const methods = useForm({
+         *    defaultValues,
+         *    mode: 'onChange'
+         *  })
+         *
+         *  return (
+         *    <Form methods={methods} onRawSubmit={handleSubmit} errors={formErrors}>
+         *      // ...
+         *    </Form>
+         *  )
+         * ```
+         */
+        initialValues?: DefaultValues<TFormValues>;
+    },
+    {
+        methods: UseFormReturn<TFormValues>;
+    }
+]>;
+export declare const Form: <TFormValues extends FieldValues>({ children, methods: methodsProp, initialValues, errors, onRawSubmit, name, }: FormProps<TFormValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Form/index.js

@@ -1,11 +1,10 @@
-import React, { useMemo } from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
-import { FORM_ERROR } from '../../constants.js';
-import { defaultErrors } from './defaultErrors.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { ErrorProvider } from '../../providers/ErrorContext/index.js';
-
-const FormSubmitContext = /*#__PURE__*/React.createContext({});
+import { jsx } from "@emotion/react/jsx-runtime";
+import React, { useMemo } from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import { FORM_ERROR } from "../../constants.js";
+import { defaultErrors } from "./defaultErrors.js";
+import { ErrorProvider } from "../../providers/ErrorContext/index.js";
+const FormSubmitContext = React.createContext({});
 const Form = ({
   children,
   methods: methodsProp,
@@ -16,10 +15,10 @@ const Form = ({
 }) => {
   const methodsHook = useForm({
     defaultValues: initialValues,
-    mode: 'onChange'
+    mode: "onChange"
   });
   const methods = !methodsProp ? methodsHook : methodsProp;
-  const handleSubmit = methods.handleSubmit(async values => {
+  const handleSubmit = methods.handleSubmit(async (values) => {
     const result = await onRawSubmit(values, {
       reset: methods.reset,
       resetFieldState: methods.resetField,
@@ -27,57 +26,45 @@ const Form = ({
       change: methods.setValue
     });
     if (result === null) {
-      methods.setError('root.submit', {
-        type: 'custom'
+      methods.setError("root.submit", {
+        type: "custom"
       });
       return;
     }
-    if (result && typeof result !== 'boolean' && typeof result !== 'number') {
-      methods.setError('root.submit', {
-        type: 'custom',
-        message: typeof result === 'object' ? result[FORM_ERROR] : result
+    if (result && typeof result !== "boolean" && typeof result !== "number") {
+      methods.setError("root.submit", {
+        type: "custom",
+        message: typeof result === "object" ? result[FORM_ERROR] : result
       });
     }
   });
   const formSubmitContextValue = useMemo(() => ({
     handleSubmit
   }), [handleSubmit]);
-  return jsx(FormProvider, {
-    ...methods,
-    children: jsx(FormSubmitContext.Provider, {
-      value: formSubmitContextValue,
-      children: jsx(ErrorProvider, {
-        errors: {
-          ...defaultErrors,
-          ...errors
-        },
-        children: jsx("form", {
-          onSubmit: async e => {
-            e.preventDefault();
-            e.stopPropagation();
-            await handleSubmit(e);
-          },
-          name: name,
-          noValidate: true,
-          children: typeof children === 'function' ? children({
-            values: methods.watch(),
-            hasValidationErrors: !methods.formState.isValid,
-            errors: methods.formState.errors,
-            submitting: methods.formState.isSubmitting,
-            pristine: !methods.formState.isDirty,
-            handleSubmit,
-            submitError: !!methods.formState.errors?.root?.['submit'],
-            valid: methods.formState.isValid,
-            form: {
-              change: methods.setValue,
-              reset: methods.reset,
-              submit: handleSubmit
-            }
-          }) : children
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(FormSubmitContext.Provider, { value: formSubmitContextValue, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: {
+    ...defaultErrors,
+    ...errors
+  }, children: /* @__PURE__ */ jsx("form", { onSubmit: async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await handleSubmit(e);
+  }, name, noValidate: true, children: typeof children === "function" ? children({
+    values: methods.watch(),
+    hasValidationErrors: !methods.formState.isValid,
+    errors: methods.formState.errors,
+    submitting: methods.formState.isSubmitting,
+    pristine: !methods.formState.isDirty,
+    handleSubmit,
+    submitError: !!methods.formState.errors?.root?.["submit"],
+    valid: methods.formState.isValid,
+    form: {
+      change: methods.setValue,
+      reset: methods.reset,
+      submit: handleSubmit
+    }
+  }) : children }) }) }) });
+};
+export {
+  Form,
+  FormSubmitContext
 };
-
-export { Form, FormSubmitContext };

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

@@ -0,0 +1,33 @@
+import { Button } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { Control, FieldArrayPath, FieldValues } from 'react-hook-form';
+import { TextInputField as TextInputFieldV2 } from '../TextInputFieldV2';
+type InputKeyProps = {
+    label: ComponentProps<typeof TextInputFieldV2>['label'];
+    required?: ComponentProps<typeof TextInputFieldV2>['required'];
+    regex?: ComponentProps<typeof TextInputFieldV2>['regex'];
+};
+type InputValueProps = {
+    type?: ComponentProps<typeof TextInputFieldV2>['type'];
+    placeholder?: ComponentProps<typeof TextInputFieldV2>['placeholder'];
+} & InputKeyProps;
+type AddButtonProps = {
+    name: ComponentProps<typeof Button>['children'];
+    fullWidth?: ComponentProps<typeof Button>['fullWidth'];
+    tooltip?: string;
+    maxSizeReachedTooltip?: string;
+};
+type KeyValueFieldProps<TFieldValues extends FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues>> = {
+    name: TFieldArrayName;
+    inputKey: InputKeyProps;
+    inputValue: InputValueProps;
+    addButton: AddButtonProps;
+    maxSize?: number;
+    readonly?: boolean;
+    control?: Control<TFieldValues>;
+};
+/**
+ * A React component that allows users to manage key-value pairs
+ */
+export declare const KeyValueField: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, inputKey, inputValue, addButton, maxSize, readonly, control, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};