react-ui-suite 1.1.6 → 1.1.8

package/dist/{Combobox-UQBN7KFK.css → Combobox-YP4UGGM7.css}

@@ -6,14 +6,18 @@
   border-color: #64748b;
 }
 
-.rui-combobox__listbox {
-  max-height: 16rem;
-  overflow: auto;
-  padding-left: 0.25rem;
-  padding-right: 1rem;
-  margin: 0px;
-  scrollbar-width: none;
-}
+.rui-combobox__listbox {
+  max-height: 16rem;
+  overflow: auto;
+  padding-left: 0.25rem;
+  padding-right: 1rem;
+  margin: 0px;
+  scrollbar-width: none;
+}
+
+.rui-popover[data-scrollbar-visible="false"] .rui-combobox__listbox {
+  padding-right: 0.25rem;
+}
 
 .rui-combobox__listbox::-webkit-scrollbar {
   width: 0;

package/dist/{FilePicker-N72M7PZO.css → FilePicker-QFTDWVCF.css}

@@ -120,6 +120,37 @@
   color: var(--rui-color-text-muted);
 }
 
+.rui-file-picker__item-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.rui-file-picker__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1px solid var(--rui-color-border);
+  border-radius: 999px;
+  background: var(--rui-color-surface);
+  color: var(--rui-color-text-muted);
+  font-size: 0.75rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.rui-file-picker__remove:hover {
+  border-color: var(--rui-color-border-strong);
+  color: var(--rui-color-text-strong);
+}
+
+.rui-file-picker__remove:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(148 163 184 / 0.35);
+}
+
 .rui-file-picker__description,
 .rui-file-picker__warning,
 .rui-file-picker__error {
@@ -152,4 +183,3 @@
 [data-theme="dark"] .rui-file-picker__warning {
   color: rgb(251 191 36);
 }
-

package/dist/{Select-UA2CM52H.css → Select-HD5HKBTM.css}

@@ -52,14 +52,18 @@
   font-weight: 600;
 }
 
-.rui-select__list {
-  margin: 0;
-  padding: 0rem 1rem 0rem 0.25rem;
-  list-style: none;
-  max-height: 16rem;
-  overflow: auto;
-  scrollbar-width: none;
-}
+.rui-select__list {
+  margin: 0;
+  padding: 0rem 1rem 0rem 0.25rem;
+  list-style: none;
+  max-height: 16rem;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.rui-popover[data-scrollbar-visible="false"] .rui-select__list {
+  padding-right: 0.25rem;
+}
 
 .rui-select__list::-webkit-scrollbar {
   width: 0;

package/dist/{TabGroup-3NH74LET.css → TabGroup-7GEU6J3L.css}

@@ -4,7 +4,6 @@
     height: 100%;
     position: relative;
     --rui-tab-border: 1px;
-    --rui-tab-panel-radius: 15px;
     --rui-tab-radius: 10px;
     --rui-tab-min-main: 32px;
 }
@@ -252,16 +251,15 @@
   transform: none;
 }
 
-.rui-tab-group__panel {
-    padding: 5px;
-    flex: 1;
-    border: var(--rui-tab-border) solid var(--rui-color-border);
-    background-color: var(--rui-color-surface);
-    min-width: 0;
-    min-height: 0;
-    position: relative;
-    z-index: 0;
-}
+.rui-tab-group__panel {
+    padding: 5px;
+    flex: 1;
+    background-color: var(--rui-color-surface);
+    min-width: 0;
+    min-height: 0;
+    position: relative;
+    z-index: 0;
+}
 
 [data-theme="dark"] .rui-tab-group__tab {
   background-color: var(--rui-color-surface);
@@ -276,58 +274,6 @@
   --rui-tab-active-bg: var(--rui-color-surface-muted);
 }
 
-[data-theme="dark"] .rui-tab-group__panel {
-  background-color: var(--rui-color-surface-muted);
-}
-
-.rui-tab-group[data-position="top"] .rui-tab-group__panel {
-  border-bottom-left-radius: var(--rui-tab-panel-radius);
-  border-bottom-right-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="bottom"] .rui-tab-group__panel {
-  border-top-left-radius: var(--rui-tab-panel-radius);
-  border-top-right-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="left"] .rui-tab-group__panel {
-  border-top-right-radius: var(--rui-tab-panel-radius);
-  border-bottom-right-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="right"] .rui-tab-group__panel {
-  border-top-left-radius: var(--rui-tab-panel-radius);
-  border-bottom-left-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="top"][data-fill="partial"]:not([data-align="start"]) .rui-tab-group__panel {
-  border-top-left-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="top"][data-fill="partial"]:not([data-align="end"]) .rui-tab-group__panel {
-  border-top-right-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="bottom"][data-fill="partial"]:not([data-align="start"]) .rui-tab-group__panel {
-  border-bottom-left-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="bottom"][data-fill="partial"]:not([data-align="end"]) .rui-tab-group__panel {
-  border-bottom-right-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="left"][data-fill="partial"]:not([data-align="start"]) .rui-tab-group__panel {
-  border-top-left-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="left"][data-fill="partial"]:not([data-align="end"]) .rui-tab-group__panel {
-  border-bottom-left-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="right"][data-fill="partial"]:not([data-align="start"]) .rui-tab-group__panel {
-  border-top-right-radius: var(--rui-tab-panel-radius);
-}
-
-.rui-tab-group[data-position="right"][data-fill="partial"]:not([data-align="end"]) .rui-tab-group__panel {
-  border-bottom-right-radius: var(--rui-tab-panel-radius);
-}
+[data-theme="dark"] .rui-tab-group__panel {
+  background-color: var(--rui-color-surface-muted);
+}

package/dist/index.d.ts

@@ -203,6 +203,15 @@ type FileSelection = {
     path?: string;
     text?: string;
     bytes?: Uint8Array;
+    size?: number;
+};
+type FilePickerExternalRequest = {
+    directory: boolean;
+    multiple: boolean;
+    mode: FilePickerMode;
+    accept?: string;
+    maxFiles?: number;
+    currentSelections: FileSelection[];
 };
 type FilePickerProps = NativeInputProps & {
     label?: string;
@@ -210,8 +219,10 @@ type FilePickerProps = NativeInputProps & {
     error?: string;
     dropzoneLabel?: string;
     maxFiles?: number;
+    directory?: boolean;
     mode?: FilePickerMode;
     resolvePath?: (file: File) => string | undefined | Promise<string | undefined>;
+    externalPicker?: (request: FilePickerExternalRequest) => Promise<FileSelection[] | null | undefined>;
     onFilesChange?: (files: FileSelection[]) => void;
 };
 declare const FilePicker: React.ForwardRefExoticComponent<NativeInputProps & {
@@ -220,8 +231,10 @@ declare const FilePicker: React.ForwardRefExoticComponent<NativeInputProps & {
     error?: string;
     dropzoneLabel?: string;
     maxFiles?: number;
+    directory?: boolean;
     mode?: FilePickerMode;
     resolvePath?: (file: File) => string | undefined | Promise<string | undefined>;
+    externalPicker?: (request: FilePickerExternalRequest) => Promise<FileSelection[] | null | undefined>;
     onFilesChange?: (files: FileSelection[]) => void;
 } & React.RefAttributes<HTMLInputElement>>;
 
@@ -541,4 +554,4 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttri
     onChange?: (checked: boolean) => void;
 } & React.RefAttributes<HTMLButtonElement>>;
 
-export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxRenderState, DatalistInput, type DatalistInputProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Dropdown, type DropdownProps, FilePicker, type FilePickerMode, type FilePickerProps, type FileSelection, InputField, type InputFieldProps, Meter, type MeterProps, NumberInput, type NumberInputProps, OutputChip, type OutputChipProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioColor, type RadioProps, ResizableContainer, type ResizableContainerProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, StackedList, type StackedListItem, type StackedListProps, TabGroup, TabGroupAlign, TabGroupFill, TabGroupPosition, type TabGroupProps, TabGroupRotation, type TabGroupTab, Table, type TableColumn, type TableProps, Textarea, type TextareaProps, Toggle, type ToggleProps };
+export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxRenderState, DatalistInput, type DatalistInputProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Dropdown, type DropdownProps, FilePicker, type FilePickerExternalRequest, type FilePickerMode, type FilePickerProps, type FileSelection, InputField, type InputFieldProps, Meter, type MeterProps, NumberInput, type NumberInputProps, OutputChip, type OutputChipProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioColor, type RadioProps, ResizableContainer, type ResizableContainerProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, StackedList, type StackedListItem, type StackedListProps, TabGroup, TabGroupAlign, TabGroupFill, TabGroupPosition, type TabGroupProps, TabGroupRotation, type TabGroupTab, Table, type TableColumn, type TableProps, Textarea, type TextareaProps, Toggle, type ToggleProps };

package/dist/index.js

@@ -1062,7 +1062,10 @@ function getAnchorPosition(anchor) {
     width: rect.width
   };
 }
-function Scrollbar({ scrollRef }) {
+function Scrollbar({
+  scrollRef,
+  onVisibilityChange
+}) {
   const [{ visible, size, offset }, setThumbState] = React7.useState({
     visible: false,
     size: MIN_THUMB_SIZE,
@@ -1103,6 +1106,9 @@ function Scrollbar({ scrollRef }) {
       cancelAnimationFrame(raf);
     };
   }, [scrollRef]);
+  React7.useEffect(() => {
+    onVisibilityChange == null ? void 0 : onVisibilityChange(visible);
+  }, [onVisibilityChange, visible]);
   React7.useEffect(() => {
     const handlePointerMove = (event) => {
       const drag = dragState.current;
@@ -1188,6 +1194,7 @@ function Scrollbar({ scrollRef }) {
 }
 function Popover({ className, anchorRef, rootRef, children }) {
   const scrollRef = React7.useRef(null);
+  const [scrollbarVisible, setScrollbarVisible] = React7.useState(false);
   const [position, setPosition] = React7.useState(
     () => {
       var _a;
@@ -1228,10 +1235,11 @@ function Popover({ className, anchorRef, rootRef, children }) {
         shouldPortal && "rui-popover--portal",
         className
       ),
+      "data-scrollbar-visible": scrollbarVisible ? "true" : "false",
       style: popoverStyle,
       children: /* @__PURE__ */ jsxs8("div", { className: "rui-popover__inner", children: [
         children({ scrollRef }),
-        /* @__PURE__ */ jsx9(Scrollbar, { scrollRef })
+        /* @__PURE__ */ jsx9(Scrollbar, { scrollRef, onVisibilityChange: setScrollbarVisible })
       ] })
     }
   );
@@ -1269,7 +1277,7 @@ function useOutsideClick(refs, handler) {
 // components/Combobox/Listbox.tsx
 import * as React8 from "react";
 import clsx9 from "clsx";
-import "./Combobox-UQBN7KFK.css";
+import "./Combobox-YP4UGGM7.css";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function Listbox({
   id,
@@ -1343,7 +1351,7 @@ function Listbox({
 
 // components/Combobox/Combobox.tsx
 import clsx10 from "clsx";
-import "./Combobox-UQBN7KFK.css";
+import "./Combobox-YP4UGGM7.css";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function InnerCombobox({
   options,
@@ -1846,7 +1854,7 @@ import * as React12 from "react";
 // components/Select/Select.tsx
 import * as React11 from "react";
 import clsx12 from "clsx";
-import "./Select-UA2CM52H.css";
+import "./Select-HD5HKBTM.css";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function Select({
   label,
@@ -2804,7 +2812,7 @@ var Disclosure = React14.forwardRef(function Disclosure2({ title, children, clas
 // components/FilePicker/FilePicker.tsx
 import * as React15 from "react";
 import clsx16 from "clsx";
-import "./FilePicker-N72M7PZO.css";
+import "./FilePicker-QFTDWVCF.css";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function matchesAcceptToken(file, token) {
   const normalizedToken = token.trim().toLowerCase();
@@ -2872,14 +2880,39 @@ async function readFileBytes(file) {
   }
   return void 0;
 }
+async function readDirectorySize(handle) {
+  if (typeof handle.values !== "function") {
+    return void 0;
+  }
+  let total = 0;
+  for await (const entry of handle.values()) {
+    if (entry.kind === "file" && typeof entry.getFile === "function") {
+      const file = await entry.getFile();
+      total += file.size;
+      continue;
+    }
+    if (entry.kind === "directory" && typeof entry.values === "function") {
+      const nestedSize = await readDirectorySize({
+        name: "",
+        values: entry.values
+      });
+      if (typeof nestedSize === "number") {
+        total += nestedSize;
+      }
+    }
+  }
+  return total;
+}
 var FilePicker = React15.forwardRef(function FilePicker2({
   label,
   description,
   error,
   dropzoneLabel = "Drop files here or click to browse",
   maxFiles,
+  directory = false,
   mode = "path",
   resolvePath,
+  externalPicker,
   id,
   className,
   accept,
@@ -2898,6 +2931,9 @@ var FilePicker = React15.forwardRef(function FilePicker2({
   const [restrictedCount, setRestrictedCount] = React15.useState(0);
   const inputRef = React15.useRef(null);
   const selectionRequestIdRef = React15.useRef(0);
+  const canUseDirectoryHandlePicker = typeof window !== "undefined" && typeof window.showDirectoryPicker === "function";
+  const isFolderPathOnlyMode = directory && mode === "path";
+  const useDirectoryInputAttributes = directory && (!isFolderPathOnlyMode || !canUseDirectoryHandlePicker);
   const setRefs = React15.useCallback(
     (node) => {
       inputRef.current = node;
@@ -2911,14 +2947,72 @@ var FilePicker = React15.forwardRef(function FilePicker2({
   );
   const hintIds = [description ? descriptionId : null, error ? errorId : null].filter(Boolean);
   const resolvedAriaDescribedBy = hintIds.length ? hintIds.join(" ") : void 0;
+  const resolvedMultiple = multiple || useDirectoryInputAttributes;
   const resolvedMaxFiles = React15.useMemo(() => {
     if (typeof maxFiles !== "number" || !Number.isFinite(maxFiles)) return void 0;
     return Math.max(1, Math.floor(maxFiles));
   }, [maxFiles]);
+  const directoryAttributes = useDirectoryInputAttributes ? { directory: "", webkitdirectory: "" } : void 0;
+  const selectDirectoryPath = React15.useCallback(async () => {
+    if (!isFolderPathOnlyMode || !canUseDirectoryHandlePicker) {
+      return false;
+    }
+    const picker = window.showDirectoryPicker;
+    if (!picker) {
+      return false;
+    }
+    try {
+      const directoryHandle = await picker();
+      const requestId = selectionRequestIdRef.current + 1;
+      selectionRequestIdRef.current = requestId;
+      const selection = {
+        file: new File([], directoryHandle.name, { type: "application/x-directory" }),
+        path: directoryHandle.name
+      };
+      const directorySize = await readDirectorySize(directoryHandle);
+      if (typeof directorySize === "number") {
+        selection.size = directorySize;
+      }
+      const selectionLimit = multiple ? resolvedMaxFiles != null ? resolvedMaxFiles : Infinity : 1;
+      const mergedSelections = multiple ? [...selectedFiles, selection] : [selection];
+      const nextSelections = mergedSelections.slice(0, selectionLimit);
+      const nextRestrictedCount = mergedSelections.length - nextSelections.length;
+      setSelectedFiles(nextSelections);
+      setRestrictedCount(nextRestrictedCount);
+      onFilesChange == null ? void 0 : onFilesChange(nextSelections);
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+      return true;
+    } catch (error2) {
+      if (error2 instanceof DOMException && error2.name === "AbortError") {
+        return true;
+      }
+      return false;
+    }
+  }, [
+    canUseDirectoryHandlePicker,
+    isFolderPathOnlyMode,
+    multiple,
+    onFilesChange,
+    resolvedMaxFiles,
+    selectedFiles
+  ]);
+  const applyExternalSelections = React15.useCallback(
+    (incomingSelections) => {
+      const selectionLimit = resolvedMultiple ? resolvedMaxFiles != null ? resolvedMaxFiles : Infinity : 1;
+      const nextSelections = incomingSelections.slice(0, selectionLimit);
+      const nextRestrictedCount = incomingSelections.length - nextSelections.length;
+      setSelectedFiles(nextSelections);
+      setRestrictedCount(nextRestrictedCount);
+      onFilesChange == null ? void 0 : onFilesChange(nextSelections);
+    },
+    [onFilesChange, resolvedMaxFiles, resolvedMultiple]
+  );
   const applySelectedFiles = React15.useCallback(
     async (files) => {
       const acceptedFiles = filterFilesByAccept(files, accept);
-      const selectionLimit = multiple ? resolvedMaxFiles != null ? resolvedMaxFiles : Infinity : 1;
+      const selectionLimit = resolvedMultiple ? resolvedMaxFiles != null ? resolvedMaxFiles : Infinity : 1;
       const nextFiles = acceptedFiles.slice(0, selectionLimit);
       const nextRestrictedCount = files.length - nextFiles.length;
       const requestId = selectionRequestIdRef.current + 1;
@@ -2926,9 +3020,7 @@ var FilePicker = React15.forwardRef(function FilePicker2({
       const nextSelections = await Promise.all(
         nextFiles.map(async (file) => {
           const selection = { file };
-          if (mode === "path" || mode === "both") {
-            selection.path = await derivePath(file, resolvePath);
-          }
+          selection.path = await derivePath(file, resolvePath);
           if (mode === "content" || mode === "both") {
             const bytes = await readFileBytes(file);
             if (bytes) {
@@ -2947,7 +3039,7 @@ var FilePicker = React15.forwardRef(function FilePicker2({
       onFilesChange == null ? void 0 : onFilesChange(nextSelections);
       return nextSelections;
     },
-    [accept, mode, multiple, onFilesChange, resolvePath, resolvedMaxFiles]
+    [accept, mode, onFilesChange, resolvePath, resolvedMaxFiles, resolvedMultiple]
   );
   const handleInputChange = (event) => {
     var _a;
@@ -2955,8 +3047,29 @@ var FilePicker = React15.forwardRef(function FilePicker2({
     void applySelectedFiles(incomingFiles);
     onChange == null ? void 0 : onChange(event);
   };
-  const openFileDialog = () => {
+  const openFileDialog = async () => {
     if (disabled) return;
+    if (externalPicker) {
+      try {
+        const nextSelections = await externalPicker({
+          directory,
+          multiple: resolvedMultiple,
+          mode,
+          accept,
+          maxFiles: resolvedMaxFiles,
+          currentSelections: selectedFiles
+        });
+        if (Array.isArray(nextSelections)) {
+          applyExternalSelections(nextSelections);
+        }
+      } catch {
+      }
+      return;
+    }
+    const handledByDirectoryPicker = await selectDirectoryPath();
+    if (handledByDirectoryPicker) {
+      return;
+    }
     if (inputRef.current) {
       inputRef.current.value = "";
       inputRef.current.click();
@@ -2966,11 +3079,24 @@ var FilePicker = React15.forwardRef(function FilePicker2({
     var _a;
     event.preventDefault();
     if (disabled) return;
+    if (isFolderPathOnlyMode && canUseDirectoryHandlePicker) {
+      return;
+    }
     setIsDragActive(false);
     const files = Array.from((_a = event.dataTransfer.files) != null ? _a : []);
     void applySelectedFiles(files);
   };
   const hasSelection = selectedFiles.length > 0;
+  const allowSelectionRemoval = Boolean(multiple);
+  const removeSelection = React15.useCallback(
+    (indexToRemove) => {
+      const nextSelections = selectedFiles.filter((_, index) => index !== indexToRemove);
+      setSelectedFiles(nextSelections);
+      setRestrictedCount(0);
+      onFilesChange == null ? void 0 : onFilesChange(nextSelections);
+    },
+    [onFilesChange, selectedFiles]
+  );
   return /* @__PURE__ */ jsxs15("div", { className: "rui-file-picker rui-root", children: [
     label ? /* @__PURE__ */ jsx17("label", { htmlFor: inputId, className: "rui-file-picker__label rui-text-wrap", children: label }) : null,
     /* @__PURE__ */ jsxs15(
@@ -2986,11 +3112,13 @@ var FilePicker = React15.forwardRef(function FilePicker2({
         tabIndex: disabled ? -1 : 0,
         "aria-label": label ? `${label} file picker` : "File picker",
         "aria-disabled": disabled ? true : void 0,
-        onClick: openFileDialog,
+        onClick: () => {
+          void openFileDialog();
+        },
         onKeyDown: (event) => {
           if (event.key === "Enter" || event.key === " ") {
             event.preventDefault();
-            openFileDialog();
+            void openFileDialog();
           }
         },
         onDragEnter: (event) => {
@@ -3012,13 +3140,21 @@ var FilePicker = React15.forwardRef(function FilePicker2({
             "input",
             {
               ...rest,
+              ...directoryAttributes,
               id: inputId,
               ref: setRefs,
               type: "file",
               className: clsx16("rui-file-picker__input", className),
               accept,
               disabled,
-              multiple,
+              multiple: resolvedMultiple,
+              onClick: (event) => {
+                event.stopPropagation();
+                if (isFolderPathOnlyMode && canUseDirectoryHandlePicker) {
+                  event.preventDefault();
+                  void openFileDialog();
+                }
+              },
               onChange: handleInputChange,
               "aria-invalid": error ? true : void 0,
               "aria-describedby": resolvedAriaDescribedBy
@@ -3030,17 +3166,35 @@ var FilePicker = React15.forwardRef(function FilePicker2({
             "Maximum files: ",
             resolvedMaxFiles
           ] }) : null,
-          hasSelection ? /* @__PURE__ */ jsx17("ul", { className: "rui-file-picker__list", "aria-label": "Selected files", children: selectedFiles.map((selection) => /* @__PURE__ */ jsxs15(
-            "li",
-            {
-              className: "rui-file-picker__item",
-              children: [
-                /* @__PURE__ */ jsx17("span", { className: "rui-file-picker__file-name rui-text-wrap", children: selection.file.name }),
-                /* @__PURE__ */ jsx17("span", { className: "rui-file-picker__file-meta", children: formatBytes(selection.file.size) })
-              ]
-            },
-            `${selection.file.name}-${selection.file.size}-${selection.file.lastModified}`
-          )) }) : null
+          hasSelection ? /* @__PURE__ */ jsx17("ul", { className: "rui-file-picker__list", "aria-label": "Selected files", children: selectedFiles.map((selection, index) => {
+            var _a, _b, _c, _d;
+            return /* @__PURE__ */ jsxs15(
+              "li",
+              {
+                className: "rui-file-picker__item",
+                children: [
+                  /* @__PURE__ */ jsx17("span", { className: "rui-file-picker__file-name rui-text-wrap", children: /* @__PURE__ */ jsx17("span", { title: (_a = selection.path) != null ? _a : selection.file.name, children: (_b = selection.path) != null ? _b : selection.file.name }) }),
+                  /* @__PURE__ */ jsxs15("div", { className: "rui-file-picker__item-actions", children: [
+                    /* @__PURE__ */ jsx17("span", { className: "rui-file-picker__file-meta", children: formatBytes((_c = selection.size) != null ? _c : selection.file.size) }),
+                    allowSelectionRemoval ? /* @__PURE__ */ jsx17(
+                      "button",
+                      {
+                        type: "button",
+                        className: "rui-file-picker__remove",
+                        "aria-label": `Remove ${(_d = selection.path) != null ? _d : selection.file.name}`,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          removeSelection(index);
+                        },
+                        children: "x"
+                      }
+                    ) : null
+                  ] })
+                ]
+              },
+              `${selection.file.name}-${selection.file.size}-${selection.file.lastModified}`
+            );
+          }) }) : null
         ]
       }
     ),
@@ -3871,7 +4025,7 @@ function StackedList({ items, dense, className, ...rest }) {
 
 // components/TabGroup/TabGroup.tsx
 import React21 from "react";
-import "./TabGroup-3NH74LET.css";
+import "./TabGroup-7GEU6J3L.css";
 import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function TabGroup({
   align = "start",