@veritone-ce/design-system 2.8.1 → 2.8.3

package/dist/cjs/Dialog/components.js

@@ -20,6 +20,7 @@ require('../styles/css-vars.js');
 var index$1 = require('../Button/index.js');
 var index = require('../Typography/index.js');
 var index$2 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -221,7 +222,7 @@ const DialogCloseButton = React__namespace.forwardRef(function DialogCloseButton
     }
   );
 });
-const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIconButton2(props, ref) {
+const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIconButton2({ children = /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}), ...props }, ref) {
   const { dismiss } = state.useDialogContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     index$2.default,
@@ -231,7 +232,8 @@ const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIc
       onClick: (e) => {
         dismiss();
         props.onClick?.(e);
-      }
+      },
+      children
     }
   );
 });

package/dist/cjs/Drawer/components.js

@@ -20,6 +20,7 @@ require('../styles/css-vars.js');
 var index$1 = require('../Button/index.js');
 var index = require('../Typography/index.js');
 var index$2 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -262,7 +263,7 @@ const DrawerCloseButton = React__namespace.forwardRef(function DrawerCloseButton
     }
   );
 });
-const DrawerCloseIconButton = React__namespace.forwardRef(function DrawerCloseIconButton2(props, ref) {
+const DrawerCloseIconButton = React__namespace.forwardRef(function DrawerCloseIconButton2({ children = /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}), ...props }, ref) {
   const { dismiss } = state.useDrawerContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     index$2.default,
@@ -272,7 +273,8 @@ const DrawerCloseIconButton = React__namespace.forwardRef(function DrawerCloseIc
       onClick: (e) => {
         dismiss();
         props.onClick?.(e);
-      }
+      },
+      children
     }
   );
 });

package/dist/cjs/extras/uploady/index.js

@@ -0,0 +1,12 @@
+'use strict';
+'use strict';
+
+var uploady = require('./uploady.js');
+
+
+
+exports.UploadyButton = uploady.UploadyButton;
+exports.UploadyDropzone = uploady.UploadyDropzone;
+exports.UploadyList = uploady.UploadyList;
+exports.UploadyListItem = uploady.UploadyListItem;
+exports.useUploadStatus = uploady.useUploadStatus;

package/dist/cjs/extras/uploady/uploady.js

@@ -0,0 +1,112 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var uploady = require('@rpldy/uploady');
+var index = require('../../Button/index.js');
+var controlled = require('../../FileUploader/controlled.js');
+
+function UploadyDropzone(props) {
+  const { upload, getOptions } = uploady.useUploady();
+  const [batchState, setBatchState] = React.useState(
+    uploady.BATCH_STATES.PENDING
+  );
+  uploady.useBatchFinalizeListener((batch) => {
+    setBatchState(batch.state);
+  });
+  uploady.useBatchProgressListener((batch) => {
+    setBatchState(batch.state);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    controlled.UploadDropzone,
+    {
+      ...props,
+      multiple: !getOptions().autoUpload,
+      state: batchState === uploady.BATCH_STATES.PROCESSING ? controlled.FILE_STATES.UPLOADING : batchState,
+      onDrop: (files) => {
+        upload(files);
+        setBatchState(uploady.BATCH_STATES.PENDING);
+      }
+    }
+  );
+}
+function UploadyList(props) {
+  const [items, setItems] = React.useState([]);
+  uploady.useBatchAddListener((batch) => {
+    setItems((items2) => items2.concat(batch.items));
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(controlled.UploadListContainer, { ...props, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(UploadyListItem, { item }, index)) });
+}
+function UploadyListItem({ item }) {
+  const [itemState, setState] = React.useState(item.state);
+  const [progress, setProgress] = React.useState(0);
+  const abortItem = uploady.useAbortItem();
+  uploady.useItemFinalizeListener((item2) => {
+    setState(item2.state);
+  }, item.id);
+  uploady.useItemProgressListener((item2) => {
+    setProgress(item2.completed);
+  });
+  const onAbortItem = () => {
+    abortItem(item.id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    controlled.UploadListItem,
+    {
+      item: {
+        file: item.file,
+        progress,
+        state: itemState
+      },
+      onAbort: onAbortItem
+    }
+  );
+}
+function useUploadStatus() {
+  const [batchState, setBatchState] = React.useState(
+    uploady.BATCH_STATES.PENDING
+  );
+  const [itemCount, setItemCount] = React.useState(0);
+  uploady.useBatchAddListener((batch) => {
+    setItemCount(batch.total);
+  });
+  const [loading, setLoading] = React.useState(false);
+  uploady.useBatchStartListener(() => {
+    setLoading(true);
+  });
+  uploady.useBatchFinalizeListener((batch) => {
+    setLoading(false);
+    setBatchState(batch.state);
+  });
+  return { loading, itemCount, batchState };
+}
+const UploadyButton = React.forwardRef(function UploadButton({ children, onClick, disabled, ...props }, ref) {
+  const { processPending } = uploady.useUploadyContext();
+  const { itemCount, batchState, loading } = useUploadStatus();
+  const onButtonClick = React.useCallback(
+    (e) => {
+      processPending();
+      onClick?.(e);
+    },
+    [processPending, onClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      ref,
+      onClick: onButtonClick,
+      disabled: disabled || itemCount === 0 || batchState === uploady.BATCH_STATES.FINISHED,
+      loading,
+      ...props,
+      children: children || "Upload"
+    }
+  );
+});
+
+exports.UploadyButton = UploadyButton;
+exports.UploadyDropzone = UploadyDropzone;
+exports.UploadyList = UploadyList;
+exports.UploadyListItem = UploadyListItem;
+exports.useUploadStatus = useUploadStatus;

package/dist/cjs/unstable/extras/dialogs/index.js

@@ -0,0 +1,48 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var components = require('../../../Dialog/components.js');
+var index = require('../../../ErrorBoundary/index.js');
+var vanilla = require('../../../bundled_modules/jotai/esm/vanilla.js');
+var react = require('../../../bundled_modules/jotai/esm/react.js');
+
+function createDialog(config, store = vanilla.getDefaultStore()) {
+  const dialogAtom = vanilla.atom(false);
+  return {
+    Component: createBoundDialogComponent(dialogAtom, config),
+    useDialog: () => react.useAtom(dialogAtom),
+    setOpen(open) {
+      store.set(dialogAtom, open);
+    }
+  };
+}
+function createBoundDialogComponent(dialogAtom, config) {
+  return function BoundDialog() {
+    const [open, setOpen] = react.useAtom(dialogAtom);
+    const cachedOpenRef = React.useRef(open);
+    React.useEffect(() => {
+      if (open !== false) {
+        cachedOpenRef.current = open;
+      }
+    }, [open]);
+    const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.default,
+      {
+        ...config.dialogProps,
+        open: open !== false,
+        onDismiss: () => {
+          setOpen(false);
+          config.dialogProps?.onDismiss?.();
+        },
+        className: config.dialogProps?.className,
+        children: cachedOpen !== false && /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
+      }
+    );
+  };
+}
+
+exports.createDialog = createDialog;

package/dist/cjs/unstable/extras/drawers/index.js

@@ -5,7 +5,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index_module = require('./index.module.scss.js');
-var internal = require('../../../Icon/internal.js');
 var components = require('../../../Drawer/components.js');
 var cx = require('../../../styles/cx.js');
 require('../../../styles/defaultThemeOptions.js');
@@ -38,7 +37,7 @@ function createBoundDrawerComponent(drawerAtom, config) {
       }
     }, [open]);
     const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       components.default,
       {
         disableAutoFocus: true,
@@ -50,17 +49,7 @@ function createBoundDrawerComponent(drawerAtom, config) {
           config.drawerProps?.onDismiss?.();
         },
         className: cx.cx(index_module.default.drawer, config.drawerProps?.className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            components.DrawerTitle,
-            {
-              container: "text",
-              actions: /* @__PURE__ */ jsxRuntime.jsx(components.DrawerCloseIconButton, { variant: "primary", children: /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}) }),
-              children: config.title
-            }
-          ),
-          cachedOpen !== false && /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
-        ]
+        children: cachedOpen !== false && /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
       }
     );
   };

package/dist/esm/Dialog/components.js

@@ -16,6 +16,7 @@ import '../styles/css-vars.js';
 import Button from '../Button/index.js';
 import Typography from '../Typography/index.js';
 import IconButton from '../IconButton/index.js';
+import { CloseIcon } from '../Icon/internal.js';
 
 const Dialog = React.forwardRef(function Dialog2({
   children,
@@ -198,7 +199,7 @@ const DialogCloseButton = React.forwardRef(function DialogCloseButton2(props, re
     }
   );
 });
-const DialogCloseIconButton = React.forwardRef(function DialogCloseIconButton2(props, ref) {
+const DialogCloseIconButton = React.forwardRef(function DialogCloseIconButton2({ children = /* @__PURE__ */ jsx(CloseIcon, {}), ...props }, ref) {
   const { dismiss } = useDialogContext();
   return /* @__PURE__ */ jsx(
     IconButton,
@@ -208,7 +209,8 @@ const DialogCloseIconButton = React.forwardRef(function DialogCloseIconButton2(p
       onClick: (e) => {
         dismiss();
         props.onClick?.(e);
-      }
+      },
+      children
     }
   );
 });

package/dist/esm/Drawer/components.js

@@ -16,6 +16,7 @@ import '../styles/css-vars.js';
 import Button from '../Button/index.js';
 import Typography from '../Typography/index.js';
 import IconButton from '../IconButton/index.js';
+import { CloseIcon } from '../Icon/internal.js';
 
 const Drawer = React.forwardRef(function Drawer2({
   placement = "end",
@@ -239,7 +240,7 @@ const DrawerCloseButton = React.forwardRef(function DrawerCloseButton2(props, re
     }
   );
 });
-const DrawerCloseIconButton = React.forwardRef(function DrawerCloseIconButton2(props, ref) {
+const DrawerCloseIconButton = React.forwardRef(function DrawerCloseIconButton2({ children = /* @__PURE__ */ jsx(CloseIcon, {}), ...props }, ref) {
   const { dismiss } = useDrawerContext();
   return /* @__PURE__ */ jsx(
     IconButton,
@@ -249,7 +250,8 @@ const DrawerCloseIconButton = React.forwardRef(function DrawerCloseIconButton2(p
       onClick: (e) => {
         dismiss();
         props.onClick?.(e);
-      }
+      },
+      children
     }
   );
 });

package/dist/esm/extras/uploady/index.js

@@ -0,0 +1,2 @@
+'use strict';
+export { UploadyButton, UploadyDropzone, UploadyList, UploadyListItem, useUploadStatus } from './uploady.js';

package/dist/esm/extras/uploady/uploady.js

@@ -0,0 +1,106 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useCallback, useState } from 'react';
+import { useUploadyContext, BATCH_STATES, useBatchAddListener, useBatchStartListener, useBatchFinalizeListener, useUploady, useBatchProgressListener, useAbortItem, useItemFinalizeListener, useItemProgressListener } from '@rpldy/uploady';
+import Button from '../../Button/index.js';
+import { UploadDropzone, FILE_STATES, UploadListContainer, UploadListItem } from '../../FileUploader/controlled.js';
+
+function UploadyDropzone(props) {
+  const { upload, getOptions } = useUploady();
+  const [batchState, setBatchState] = useState(
+    BATCH_STATES.PENDING
+  );
+  useBatchFinalizeListener((batch) => {
+    setBatchState(batch.state);
+  });
+  useBatchProgressListener((batch) => {
+    setBatchState(batch.state);
+  });
+  return /* @__PURE__ */ jsx(
+    UploadDropzone,
+    {
+      ...props,
+      multiple: !getOptions().autoUpload,
+      state: batchState === BATCH_STATES.PROCESSING ? FILE_STATES.UPLOADING : batchState,
+      onDrop: (files) => {
+        upload(files);
+        setBatchState(BATCH_STATES.PENDING);
+      }
+    }
+  );
+}
+function UploadyList(props) {
+  const [items, setItems] = useState([]);
+  useBatchAddListener((batch) => {
+    setItems((items2) => items2.concat(batch.items));
+  });
+  return /* @__PURE__ */ jsx(UploadListContainer, { ...props, children: items.map((item, index) => /* @__PURE__ */ jsx(UploadyListItem, { item }, index)) });
+}
+function UploadyListItem({ item }) {
+  const [itemState, setState] = useState(item.state);
+  const [progress, setProgress] = useState(0);
+  const abortItem = useAbortItem();
+  useItemFinalizeListener((item2) => {
+    setState(item2.state);
+  }, item.id);
+  useItemProgressListener((item2) => {
+    setProgress(item2.completed);
+  });
+  const onAbortItem = () => {
+    abortItem(item.id);
+  };
+  return /* @__PURE__ */ jsx(
+    UploadListItem,
+    {
+      item: {
+        file: item.file,
+        progress,
+        state: itemState
+      },
+      onAbort: onAbortItem
+    }
+  );
+}
+function useUploadStatus() {
+  const [batchState, setBatchState] = useState(
+    BATCH_STATES.PENDING
+  );
+  const [itemCount, setItemCount] = useState(0);
+  useBatchAddListener((batch) => {
+    setItemCount(batch.total);
+  });
+  const [loading, setLoading] = useState(false);
+  useBatchStartListener(() => {
+    setLoading(true);
+  });
+  useBatchFinalizeListener((batch) => {
+    setLoading(false);
+    setBatchState(batch.state);
+  });
+  return { loading, itemCount, batchState };
+}
+const UploadyButton = React__default.forwardRef(function UploadButton({ children, onClick, disabled, ...props }, ref) {
+  const { processPending } = useUploadyContext();
+  const { itemCount, batchState, loading } = useUploadStatus();
+  const onButtonClick = useCallback(
+    (e) => {
+      processPending();
+      onClick?.(e);
+    },
+    [processPending, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      onClick: onButtonClick,
+      disabled: disabled || itemCount === 0 || batchState === BATCH_STATES.FINISHED,
+      loading,
+      ...props,
+      children: children || "Upload"
+    }
+  );
+});
+
+export { UploadyButton, UploadyDropzone, UploadyList, UploadyListItem, useUploadStatus };

package/dist/esm/unstable/extras/dialogs/index.js

@@ -0,0 +1,46 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect, Fragment, Suspense } from 'react';
+import Dialog from '../../../Dialog/components.js';
+import ErrorBoundary from '../../../ErrorBoundary/index.js';
+import { getDefaultStore, atom } from '../../../bundled_modules/jotai/esm/vanilla.js';
+import { useAtom } from '../../../bundled_modules/jotai/esm/react.js';
+
+function createDialog(config, store = getDefaultStore()) {
+  const dialogAtom = atom(false);
+  return {
+    Component: createBoundDialogComponent(dialogAtom, config),
+    useDialog: () => useAtom(dialogAtom),
+    setOpen(open) {
+      store.set(dialogAtom, open);
+    }
+  };
+}
+function createBoundDialogComponent(dialogAtom, config) {
+  return function BoundDialog() {
+    const [open, setOpen] = useAtom(dialogAtom);
+    const cachedOpenRef = useRef(open);
+    useEffect(() => {
+      if (open !== false) {
+        cachedOpenRef.current = open;
+      }
+    }, [open]);
+    const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
+    return /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        ...config.dialogProps,
+        open: open !== false,
+        onDismiss: () => {
+          setOpen(false);
+          config.dialogProps?.onDismiss?.();
+        },
+        className: config.dialogProps?.className,
+        children: cachedOpen !== false && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
+      }
+    );
+  };
+}
+
+export { createDialog };

package/dist/esm/unstable/extras/drawers/index.js

@@ -1,10 +1,9 @@
 'use strict';
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect, Fragment, Suspense } from 'react';
 import styles from './index.module.scss.js';
-import { CloseIcon } from '../../../Icon/internal.js';
-import Drawer, { DrawerTitle, DrawerCloseIconButton } from '../../../Drawer/components.js';
+import Drawer from '../../../Drawer/components.js';
 import { cx } from '../../../styles/cx.js';
 import '../../../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
@@ -36,7 +35,7 @@ function createBoundDrawerComponent(drawerAtom, config) {
       }
     }, [open]);
     const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Drawer,
       {
         disableAutoFocus: true,
@@ -48,17 +47,7 @@ function createBoundDrawerComponent(drawerAtom, config) {
           config.drawerProps?.onDismiss?.();
         },
         className: cx(styles.drawer, config.drawerProps?.className),
-        children: [
-          /* @__PURE__ */ jsx(
-            DrawerTitle,
-            {
-              container: "text",
-              actions: /* @__PURE__ */ jsx(DrawerCloseIconButton, { variant: "primary", children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
-              children: config.title
-            }
-          ),
-          cachedOpen !== false && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
-        ]
+        children: cachedOpen !== false && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
       }
     );
   };

package/dist/types/extras/uploady/index.d.ts

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

package/dist/types/unstable/extras/dialogs/index.d.ts

@@ -0,0 +1,17 @@
+import { createStore } from 'jotai';
+import { ReactNode } from 'react';
+import { type DialogProps } from '../../../Dialog/index.js';
+export type DialogAtom<O> = O | false;
+export type OpenDialogContentProps<O> = {
+    open: O;
+};
+export type OpenDialogContentComponent<O> = (props: OpenDialogContentProps<O>) => ReactNode;
+export type DialogConfig<O> = {
+    Content: OpenDialogContentComponent<O>;
+    dialogProps?: Partial<Omit<DialogProps, 'open' | 'children'>>;
+};
+export declare function createDialog<O = true>(config: DialogConfig<O>, store?: ReturnType<typeof createStore>): {
+    Component: () => import("react/jsx-runtime").JSX.Element;
+    useDialog: () => [false | Awaited<O>, (args_0: DialogAtom<O> | ((prev: DialogAtom<O>) => DialogAtom<O>)) => void];
+    setOpen(open: DialogAtom<O>): void;
+};

package/dist/types/unstable/extras/drawers/index.d.ts

@@ -7,7 +7,6 @@ export type OpenDrawerContentProps<O> = {
 };
 export type OpenDrawerContentComponent<O> = (props: OpenDrawerContentProps<O>) => ReactNode;
 export type DrawerConfig<O> = {
-    title: ReactNode;
     Content: OpenDrawerContentComponent<O>;
     drawerProps?: Partial<Omit<DrawerProps, 'open' | 'children'>>;
 };

package/dist/types/unstable/extras/forms/select.d.ts

@@ -4,5 +4,5 @@ import { SelectProps } from '../../../Select/index.js';
 import type { ComponentType } from 'react';
 export type FormSelectControlledProps<OptionValue, Multiple extends boolean | undefined> = Pick<SelectProps<OptionValue, Multiple>, 'value' | 'onChange'>;
 export type FormSelectProps<TFieldValues extends FieldValues, OptionValue, Multiple extends boolean | undefined, S extends FormSelectControlledProps<OptionValue, Multiple>, TName extends FieldPathByValue<TFieldValues, OptionValue | OptionValue[]> = FieldPathByValue<TFieldValues, OptionValue | OptionValue[]>> = UseControllerProps<TFieldValues, TName> & FormControlProps & S;
-export declare function formSelectFactory<OptionValue, Multiple extends boolean | undefined = boolean | undefined, S extends FormSelectControlledProps<OptionValue, Multiple> = FormSelectControlledProps<OptionValue, Multiple>>(Component: ComponentType<S>): <TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, OptionValue | OptionValue[]> = FieldPathByValue<TFieldValues, OptionValue | OptionValue[]>>(props: FormSelectProps<TFieldValues, OptionValue, Multiple, S, TName>) => import("react/jsx-runtime").JSX.Element;
-export declare const FormSelect: <TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, unknown> = FieldPathByValue<TFieldValues, unknown>>(props: FormSelectProps<TFieldValues, unknown, boolean | undefined, SelectProps<unknown, boolean | undefined>, TName>) => import("react/jsx-runtime").JSX.Element;
+export declare function formSelectFactory<OptionValue, S extends FormSelectControlledProps<OptionValue, boolean | undefined> = FormSelectControlledProps<OptionValue, boolean | undefined>>(Component: ComponentType<S>): <Multiple extends boolean | undefined, TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, OptionValue | OptionValue[]> = FieldPathByValue<TFieldValues, OptionValue | OptionValue[]>>(props: FormSelectProps<TFieldValues, OptionValue, Multiple, S, TName>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormSelect: <Multiple extends boolean | undefined, TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, unknown> = FieldPathByValue<TFieldValues, unknown>>(props: FormSelectProps<TFieldValues, unknown, Multiple, SelectProps<unknown, boolean | undefined>, TName>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/forms/upload.d.ts

@@ -1,7 +1,7 @@
 import { type FieldPathByValue, FieldValues, UseControllerProps } from 'react-hook-form';
 import type { FormControlProps } from '../../../FormControl/index.js';
 import { type FileLike, type FileState, type UploadDropzoneProps, type UploadListItemState, type UploadListProps } from '../../../FileUploader/index.js';
-type FilesFieldPath<TFieldValues extends FieldValues, F extends FileLike = FileLike> = FieldPathByValue<TFieldValues, F[]>;
+type FilesFieldPath<TFieldValues extends FieldValues, F extends FileLike = FileLike> = FieldPathByValue<TFieldValues, F | F[]>;
 type FormUploadDropzoneInputProps = Partial<UploadDropzoneProps> & Omit<UploadDropzoneProps, 'onDrop'>;
 export type FormUploadDropzoneProps<TFieldValues extends FieldValues, TName extends FilesFieldPath<TFieldValues> = FilesFieldPath<TFieldValues>> = UseControllerProps<TFieldValues, TName> & FormControlProps & FormUploadDropzoneInputProps;
 export declare function FormUploadDropzone<TFieldValues extends FieldValues, TName extends FilesFieldPath<TFieldValues> = FilesFieldPath<TFieldValues>>(props: FormUploadDropzoneProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.8.1",
+  "version": "2.8.3",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [