@povio/ui 0.0.5 → 0.0.6

package/dist/components/inputs/File/shared/FileUploadContentFilled.js

@@ -0,0 +1,176 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { FileTrigger } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CheckCircleIcon } from "../../../../assets/icons/CheckCircle.js";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { FileUtils } from "../../../../utils/file.utils.js";
+const FileUploadContentFilled = ({
+  variant,
+  as,
+  isDisabled,
+  state,
+  browseText,
+  fileTriggerProps,
+  removeWithIcon = false,
+  singleFile,
+  onRemove
+}) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsx("div", { className: clsx("flex w-full flex-fill flex-col items-start"), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("flex w-full items-center", {
+        "flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+        "flex-col": variant === "vertical",
+        "gap-file-upload-content-gap-content-to-button": variant === "vertical" && as === "button",
+        "gap-file-upload-content-gap-text-to-text": variant === "vertical" && as === "link"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              "flex min-w-0 max-w-full flex-grow items-center gap-file-upload-content-gap-icon-to-content",
+              {
+                "flex-col": variant === "vertical",
+                "flex-row": variant === "horizontal",
+                "opacity-50": isDisabled
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-6 w-6 text-text-default-1" }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
+                    "max-w-full items-center": variant === "vertical",
+                    "max-w-[calc(100%_-_32px)]": variant === "horizontal"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "prominent-1",
+                        size: "label-1",
+                        as: "span",
+                        className: "self-stretch truncate text-center text-text-default-1",
+                        children: state.file.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "default",
+                        size: singleFile ? "label-2" : "label-3",
+                        as: "span",
+                        className: "text-text-default-2",
+                        children: FileUtils.getCalculatedFileSize(state.file)
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx("flex flex-none items-center justify-end", {
+              "flex-col": variant === "vertical" && as === "button",
+              "gap-file-upload-content-gap-text-to-text": as === "link" && variant === "vertical",
+              "gap-file-upload-content-gap-content-to-button": as === "button" && variant === "vertical",
+              "gap-file-upload-content-gap-button-to-button": variant === "horizontal"
+            }),
+            children: as === "link" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              fileTriggerProps && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(FileTrigger, { ...fileTriggerProps, children: /* @__PURE__ */ jsx(
+                  TextButton,
+                  {
+                    className: clsx("text-interactive-text-primary-idle", {
+                      "[&>span>span]:!font-medium": variant === "vertical"
+                    }),
+                    children: browseText ?? ""
+                  }
+                ) }),
+                variant === "vertical" && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "default",
+                    size: "label-2",
+                    as: "span",
+                    className: "text-text-default-2",
+                    children: t(($) => $.ui.fileUpload.or)
+                  }
+                )
+              ] }),
+              removeWithIcon ? /* @__PURE__ */ jsx(
+                InlineIconButton,
+                {
+                  label: "Cancel",
+                  color: "secondary",
+                  onPress: () => {
+                    onRemove(state.id ?? "");
+                  },
+                  icon: CloseIcon
+                }
+              ) : /* @__PURE__ */ jsx(
+                TextButton,
+                {
+                  className: clsx(
+                    variant === "vertical" && "[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase"
+                  ),
+                  color: variant === "horizontal" ? "secondary" : "primary",
+                  onPress: () => {
+                    onRemove(state.id ?? "");
+                  },
+                  children: t(($) => $.ui.fileUpload.removeFile)
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch", children: [
+              fileTriggerProps && /* @__PURE__ */ jsx(FileTrigger, { ...fileTriggerProps, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  size: "xs",
+                  width: "hug",
+                  isDisabled,
+                  children: browseText ?? ""
+                }
+              ) }),
+              removeWithIcon ? /* @__PURE__ */ jsx(
+                InlineIconButton,
+                {
+                  label: "Cancel",
+                  color: "secondary",
+                  onPress: () => {
+                    onRemove(state.id ?? "");
+                  },
+                  icon: CloseIcon
+                }
+              ) : /* @__PURE__ */ jsx(
+                TextButton,
+                {
+                  color: "secondary",
+                  onPress: () => {
+                    onRemove(state.id ?? "");
+                  },
+                  children: t(($) => $.ui.fileUpload.removeFile)
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  FileUploadContentFilled
+};

package/dist/components/inputs/File/shared/FileUploadContentLoading.d.ts

@@ -0,0 +1,9 @@
+import { FileUploadBaseProps, FileUploadState } from '#ui/components/inputs/File/fileUpload.types';
+type FileUploadContentLoadingProps = Pick<FileUploadBaseProps, "variant" | "as" | "isDisabled" | "emptyText" | "browseText"> & {
+    index: number;
+    state: FileUploadState;
+    singleFile?: boolean;
+    onCancel: (index: number) => void;
+};
+export declare const FileUploadContentLoading: ({ index, variant, as, state, isDisabled, singleFile, onCancel, }: FileUploadContentLoadingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/File/shared/FileUploadContentLoading.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { FileIcon } from "../../../../assets/icons/File.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { FileUtils } from "../../../../utils/file.utils.js";
+import { FileProgressBar } from "./FileProgressBar.js";
+const FileUploadContentLoading = ({
+  index,
+  variant,
+  as,
+  state,
+  isDisabled,
+  singleFile,
+  onCancel
+}) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("flex w-full flex-col items-center", {
+        "flex-col": variant === "vertical",
+        "flex-row": variant === "horizontal",
+        "gap-file-upload-content-gap-content-to-button": as === "button"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx("flex w-full items-center justify-between", {
+              "flex-col gap-file-upload-content-gap-text-to-progress": variant === "vertical",
+              "flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+              "opacity-50": isDisabled
+            }),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
+                    "w-full flex-col": variant === "vertical",
+                    "w-1/2": variant === "horizontal"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(FileIcon, { className: "h-6 w-6 text-text-default-1" }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: clsx("flex flex-col", {
+                          "max-w-full gap-file-upload-content-gap-icon-to-content text-center": variant === "vertical",
+                          "max-w-[calc(100%_-_32px)] gap-file-upload-content-gap-text-to-text": variant === "horizontal"
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "prominent-1",
+                              size: "label-1",
+                              as: "span",
+                              className: "self-stretch truncate text-center text-text-default-1",
+                              children: state.file.name
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "default",
+                              size: singleFile ? "label-2" : "label-3",
+                              as: "span",
+                              className: "text-text-default-2",
+                              children: FileUtils.getCalculatedFileSize(state.file)
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("flex items-center gap-1", {
+                    "w-1/2": variant === "horizontal",
+                    "w-full": variant === "vertical"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(FileProgressBar, { progress: state.progress }),
+                    (as === "link" || variant === "horizontal") && /* @__PURE__ */ jsx(
+                      InlineIconButton,
+                      {
+                        label: "Cancel",
+                        color: "secondary",
+                        onPress: () => {
+                          onCancel(index);
+                        },
+                        icon: CloseIcon
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        as === "button" && variant === "vertical" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "xs",
+            color: "secondary",
+            width: "hug",
+            onPress: () => {
+              onCancel(index);
+            },
+            children: t(($) => $.ui.fileUpload.cancel)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  FileUploadContentLoading
+};

package/dist/components/inputs/File/shared/InputUploadContent.d.ts

@@ -0,0 +1,8 @@
+import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
+import { InputUploadBaseProps } from '#ui/components/inputs/File/inputUpload.types';
+interface InputUploadContentProps extends Omit<InputUploadBaseProps, "ref"> {
+    onSelect: FileTriggerProps["onSelect"];
+    onDrop: DropZoneProps["onDrop"];
+}
+export declare const InputUploadContent: (props: InputUploadContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/File/shared/InputUploadContent.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileTrigger, DropZone } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { UploadIcon } from "../../../../assets/icons/Upload.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
+const InputUploadContent = (props) => {
+  const { variant, isDisabled, error, ...rest } = props;
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsx(FileTrigger, { ...rest, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-rac": "",
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": !!error || void 0,
+      className: inputUploadButton({
+        variant,
+        className: "group/input-upload"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          DropZone,
+          {
+            ...rest,
+            isDisabled,
+            className: inputUploadDropZone({ variant }),
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "default",
+                  size: "label-1",
+                  as: "span",
+                  className: "flex-fill select-none overflow-hidden text-ellipsis text-text-default-3",
+                  children: t(($) => $.ui.fileUpload.emptyText)
+                }
+              ),
+              variant === "nested" && /* @__PURE__ */ jsx(
+                TextButton,
+                {
+                  isDisabled,
+                  icon: UploadIcon,
+                  className: "!p-0",
+                  children: t(($) => $.ui.fileUpload.upload)
+                }
+              )
+            ]
+          }
+        ),
+        variant !== "nested" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "s",
+            width: "hug",
+            isDisabled,
+            children: t(($) => $.ui.fileUpload.uploadFile)
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  InputUploadContent
+};

package/dist/components/inputs/File/shared/InputUploadFilled.d.ts

@@ -0,0 +1,7 @@
+interface InputUploadFilledProps {
+    files: File[];
+    onRemove: () => void;
+    isDisabled?: boolean;
+}
+export declare const InputUploadFilled: ({ files, onRemove, isDisabled }: InputUploadFilledProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/File/shared/InputUploadFilled.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+const InputUploadFilled = ({ files, onRemove, isDisabled }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default", children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "default",
+        size: "label-1",
+        as: "span",
+        className: "flex-fill select-none truncate text-ellipsis text-text-default-1",
+        children: files.map((file) => file.name).join(", ")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InlineIconButton,
+      {
+        label: "Remove files",
+        color: "secondary",
+        icon: CloseIcon,
+        isDisabled,
+        onPress: onRemove
+      }
+    )
+  ] });
+};
+export {
+  InputUploadFilled
+};

package/dist/components/inputs/File/shared/fileUpload.cva.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
+export declare const fileUploadDropZoneBase: (props?: ({
+    variant?: "horizontal" | "vertical" | null | undefined;
+    isContainer?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+export type FileUploadDropZoneProps = VariantProps<typeof fileUploadDropZoneBase>;
+export declare const fileUploadDropZone: (props: FileUploadDropZoneProps & ClassProp) => string;
+export declare const fileCardList: (props?: ({
+    variant?: "horizontal" | "vertical" | null | undefined;
+} & ClassProp) | undefined) => string;

package/{src/components/inputs/File/shared/fileUpload.cva.ts → dist/components/inputs/File/shared/fileUpload.cva.js}

@@ -1,11 +1,9 @@
-import { type VariantProps, cva, cx } from "class-variance-authority";
-import type { ClassProp } from "class-variance-authority/types";
-
-export const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-default"], {
+import { cx, cva } from "class-variance-authority";
+const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-default"], {
   variants: {
     variant: {
       vertical: ["flex-col justify-center"],
-      horizontal: ["flex-row justify-between"],
+      horizontal: ["flex-row justify-between"]
     },
     isContainer: {
       true: [
@@ -19,7 +17,7 @@ export const fileUploadDropZoneBase = cva(["relative w-full rounded-input-roundi
         "data-[drop-target]:border data-[drop-target]:border-dashed",
         "data-[drop-target]:border-elevation-outline-default-2",
         "data-[drop-target]:before:pointer-events-none data-[drop-target]:before:inset-0",
-        "data-[drop-target]:before:bg-elevation-fill-default-2",
+        "data-[drop-target]:before:bg-elevation-fill-default-2"
       ],
       false: [
         "flex items-center",
@@ -30,30 +28,30 @@ export const fileUploadDropZoneBase = cva(["relative w-full rounded-input-roundi
         "hover:border-elevation-outline-default-2 hover:bg-elevation-fill-default-2",
         "invalid:border invalid:border-input-outlined-outline-error",
         "data-[drop-target]:border-elevation-outline-default-2 data-[drop-target]:bg-elevation-fill-default-2",
-        "data-[has-files]:border-solid",
-      ],
-    },
+        "data-[has-files]:border-solid"
+      ]
+    }
   },
   defaultVariants: {
-    variant: "vertical",
-  },
+    variant: "vertical"
+  }
 });
-export type FileUploadDropZoneProps = VariantProps<typeof fileUploadDropZoneBase>;
-
-export const fileUploadDropZone = (props: FileUploadDropZoneProps & ClassProp) => {
+const fileUploadDropZone = (props) => {
   const { className, ...rest } = props;
   return cx(fileUploadDropZoneBase(rest), className);
 };
-
-// File card list variants for layout
-export const fileCardList = cva(["flex gap-3"], {
+cva(["flex gap-3"], {
   variants: {
     variant: {
       vertical: ["flex-col"],
-      horizontal: ["flex-row flex-wrap"],
-    },
+      horizontal: ["flex-row flex-wrap"]
+    }
   },
   defaultVariants: {
-    variant: "vertical",
-  },
+    variant: "vertical"
+  }
 });
+export {
+  fileUploadDropZone,
+  fileUploadDropZoneBase
+};

package/dist/components/inputs/File/shared/inputUploadButton.cva.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
+export declare const inputUploadButtonBase: (props?: ({
+    variant?: "default" | "nested" | null | undefined;
+} & ClassProp) | undefined) => string;
+export type InputUploadButtonProps = VariantProps<typeof inputUploadButtonBase>;
+export declare const inputUploadButton: (props: InputUploadButtonProps & ClassProp) => string;
+export declare const inputUploadDropZone: (props?: ({
+    variant?: "default" | "nested" | null | undefined;
+} & ClassProp) | undefined) => string;

package/{src/components/inputs/File/shared/inputUploadButton.cva.ts → dist/components/inputs/File/shared/inputUploadButton.cva.js}

@@ -1,48 +1,48 @@
-import { type VariantProps, cva, cx } from "class-variance-authority";
-import type { ClassProp } from "class-variance-authority/types";
-
-export const inputUploadButtonBase = cva(
+import { cva, cx } from "class-variance-authority";
+const inputUploadButtonBase = cva(
   ["flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap"],
   {
     variants: {
       variant: {
         default: [],
-        nested: [],
-      },
+        nested: []
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
-  },
+      variant: "default"
+    }
+  }
 );
-export type InputUploadButtonProps = VariantProps<typeof inputUploadButtonBase>;
-
-export const inputUploadButton = (props: InputUploadButtonProps & ClassProp) => {
+const inputUploadButton = (props) => {
   const { className, ...rest } = props;
   return cx(inputUploadButtonBase(rest), className);
 };
-
-export const inputUploadDropZone = cva(
+const inputUploadDropZone = cva(
   [
     "flex-1",
     "flex items-center",
     "group-data-[invalid]/input-upload:border group-data-[invalid]/input-upload:border-input-outlined-outline-error",
     "data-[drop-target]:border-input-outlined-outline-hover",
-    "hover:border-input-outlined-outline-hover",
+    "hover:border-input-outlined-outline-hover"
   ],
   {
     variants: {
       variant: {
         default: [
-          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default",
+          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default"
         ],
         nested: [
-          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default",
-        ],
-      },
+          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default"
+        ]
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
-  },
+      variant: "default"
+    }
+  }
 );
+export {
+  inputUploadButton,
+  inputUploadButtonBase,
+  inputUploadDropZone
+};

package/dist/components/inputs/FormField/FormField.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren, Ref } from 'react';
+import { FormFieldErrorProps } from '#ui/components/inputs/FormField/FormFieldError';
+import { FormFieldHeaderProps } from '#ui/components/inputs/FormField/FormFieldHeader';
+import { TextInputProps } from '#ui/components/inputs/Input/TextInput/TextInput';
+export interface FormFieldProps extends Omit<FormFieldHeaderProps, "className" | "labelProps">, Omit<FormFieldErrorProps, "className"> {
+    hideLabel?: boolean;
+    headerClassName?: string;
+    errorClassName?: string;
+    className?: string;
+}
+interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
+    ref?: Ref<HTMLDivElement>;
+    labelProps?: FormFieldHeaderProps["labelProps"];
+    as?: TextInputProps["as"];
+}
+export declare const FormField: ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, }: FormFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/FormField/FormField.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { FormFieldError } from "./FormFieldError.js";
+import { FormFieldHeader } from "./FormFieldHeader.js";
+const FormField = ({
+  ref,
+  as,
+  label,
+  tooltipText,
+  helperText,
+  isRequired,
+  rightContent,
+  isDisabled,
+  error,
+  hideLabel,
+  headerClassName,
+  errorClassName,
+  children,
+  className,
+  labelProps,
+  isHeaderHidden
+}) => {
+  const headerProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps
+  };
+  const errorProps = {
+    error,
+    isDisabled,
+    isHidden: isHeaderHidden,
+    className: errorClassName
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className,
+      children: [
+        !["filter", "floating"].includes(as ?? "") && /* @__PURE__ */ jsx(FormFieldHeader, { ...headerProps }),
+        children,
+        /* @__PURE__ */ jsx(FormFieldError, { ...errorProps })
+      ]
+    }
+  );
+};
+export {
+  FormField
+};