@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/ui/device-card.tsx

@@ -7,8 +7,30 @@ import type { OSPlatformId } from '../../utils/os-platforms';
 import { OSTypeIcon } from '../features/os-type-badge';
 import { MonitorIcon } from '../icons-v2-generated/devices/monitor-icon';
 import { Ellipsis01Icon } from '../icons-v2-generated/interface';
+import { MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 import { Tag, type TagProps } from './tag';
 
+/** The card's frame. */
+const DEVICE_CARD_FRAME_CLASS =
+  'flex flex-col gap-4 overflow-clip rounded-[6px] border border-ods-border bg-ods-card p-4';
+/** The card's first row: the device icon, the name stack, the buttons. */
+const DEVICE_CARD_HEAD_ROW_CLASS = 'flex w-full items-center gap-4';
+/** The name stack: the OS icon and name line over the organization line. */
+const DEVICE_CARD_NAME_STACK_CLASS = 'flex min-w-0 flex-1 flex-col justify-center';
+/** The OS icon and the name, one `text-h4` line. */
+const DEVICE_CARD_NAME_LINE_CLASS = 'flex items-center gap-1 text-h4';
+/** The card's status row: the status tag and the "Last Seen:" line. */
+const DEVICE_CARD_STATUS_ROW_CLASS = 'flex w-full items-center gap-2';
+/** The bordered box of the device-type icon. */
+const DEVICE_CARD_ICON_BOX_CLASS =
+  'flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-2';
+/** The bordered "more" button. */
+/** The tags row, loaded and loading. */
+const DEVICE_CARD_TAGS_ROW_CLASS = 'flex w-full flex-wrap items-center gap-2';
+const DEVICE_CARD_MORE_BUTTON_CLASS =
+  'flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-3';
+
 export interface Device {
   id?: string;
   machineId?: string;
@@ -49,6 +71,12 @@ export interface DeviceCardProps extends React.HTMLAttributes<HTMLDivElement> {
   };
   statusTag?: TagProps;
   onDeviceClick?: (device: Device) => void;
+  /**
+   * The device is still being read: the card keeps its ONE structure, inert, with its icon, its buttons and its labels
+   * drawn for real and every read value (OS icon, name, organization, status, last seen) its own skeleton. A loading
+   * scope does the same. The card's `data-*` markers (`data-loading-item`) ride on its root in both forms.
+   */
+  loading?: boolean;
 }
 
 export function DeviceCard({
@@ -58,9 +86,13 @@ export function DeviceCard({
   },
   statusTag,
   onDeviceClick,
+  loading: loadingProp,
   className,
   ...props
 }: DeviceCardProps) {
+  // ONE switch: in a page's loading state (or while the host reads the device) the card draws its read values as
+  // skeletons, in the same boxes; its static parts stay real and the whole card is inert.
+  const loading = useLoadingScope() || !!loadingProp;
   // "Last seen" is read as "your local time", the same way the devices table
   // column renders it: the viewer's zone and locale, never UTC.
   const formatLastSeen = (lastSeen?: string | Date) => {
@@ -71,47 +103,57 @@ export function DeviceCard({
 
   return (
     <div
-      onClick={onDeviceClick ? () => onDeviceClick(device) : undefined}
-      className={cn(
-        'overflow-clip rounded-[6px] border border-ods-border bg-ods-card',
-        'flex flex-col gap-4 p-4',
-        onDeviceClick && 'cursor-pointer',
-        className,
-      )}
+      onClick={onDeviceClick && !loading ? () => onDeviceClick(device) : undefined}
+      className={cn(DEVICE_CARD_FRAME_CLASS, onDeviceClick && !loading && 'cursor-pointer', className)}
+      inert={loading || undefined}
+      aria-hidden={loading || undefined}
       {...props}
     >
       {/* Row 1: Device icon | OS icon + Name + Organization | More button | Details button | Custom actions */}
-      <div className="flex w-full items-center gap-4">
+      <div className={DEVICE_CARD_HEAD_ROW_CLASS}>
         {/* Device type icon */}
-        <div className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-2">
+        <div className={DEVICE_CARD_ICON_BOX_CLASS}>
           <MonitorIcon className="text-ods-text-secondary" size={16} />
         </div>
 
         {/* OS icon + Device name + Organization (stacked) */}
-        <div className="flex min-w-0 flex-1 flex-col justify-center">
-          <div className="flex items-center gap-1">
-            {device.operatingSystem && (
-              <OSTypeIcon
-                osType={device.operatingSystem === 'macos' ? 'darwin' : device.operatingSystem}
-                size="w-4 h-4"
-                className="shrink-0"
-              />
+        <div className={DEVICE_CARD_NAME_STACK_CLASS}>
+          <div className={DEVICE_CARD_NAME_LINE_CLASS}>
+            {loading ? (
+              <>
+                <MediaSkeleton.Icon size="sm" className="shrink-0" />
+                <TextLineSkeleton type="inherit" className="w-3/4" />
+              </>
+            ) : (
+              <>
+                {device.operatingSystem && (
+                  <OSTypeIcon
+                    osType={device.operatingSystem === 'macos' ? 'darwin' : device.operatingSystem}
+                    size="w-4 h-4"
+                    className="shrink-0"
+                  />
+                )}
+                <span className="truncate text-ods-text-primary" title={device.name}>
+                  {device.name}
+                </span>
+              </>
             )}
-            <span className="truncate text-ods-text-primary text-h4" title={device.name}>
-              {device.name}
-            </span>
           </div>
-          {device.organization && (
-            <span className="truncate text-ods-text-secondary text-h6" title={device.organization}>
-              {device.organization}
-            </span>
+          {loading ? (
+            <TextLineSkeleton type="h6" className="w-1/2" />
+          ) : (
+            device.organization && (
+              <span className="truncate text-ods-text-secondary text-h6" title={device.organization}>
+                {device.organization}
+              </span>
+            )
           )}
         </div>
 
         {/* More button */}
         {actions.moreButton?.visible !== false && (
           <div
-            className="flex shrink-0 cursor-pointer items-center justify-center rounded-[6px] border border-ods-border p-3 transition-colors hover:bg-ods-bg-hover"
+            className={cn(DEVICE_CARD_MORE_BUTTON_CLASS, 'cursor-pointer transition-colors hover:bg-ods-bg-hover')}
             onClick={e => {
               e.stopPropagation();
               actions.moreButton?.onClick?.();
@@ -146,33 +188,47 @@ export function DeviceCard({
         )}
       </div>
 
-      {/* Row 2: Status badge | Last seen */}
-      {(statusTag || device.lastSeen) && (
-        <div className="flex w-full items-center gap-2">
-          {statusTag && (
+      {/* Row 2: Status badge | Last seen (both drawn while loading: the tag and the time are read) */}
+      {(loading || statusTag || device.lastSeen) && (
+        <div className={DEVICE_CARD_STATUS_ROW_CLASS}>
+          {(loading || statusTag) && (
             <Tag
-              variant={statusTag.variant}
-              icon={statusTag.icon}
-              onClose={statusTag.onClose}
-              className={statusTag.className}
-              label={statusTag.label}
+              loading={loading}
+              variant={statusTag?.variant}
+              icon={statusTag?.icon}
+              onClose={statusTag?.onClose}
+              className={statusTag?.className}
+              label={statusTag?.label ?? ''}
             />
           )}
-          {device.lastSeen && (
-            <span className="flex-1 truncate text-ods-text-secondary text-h6">
-              Last Seen: {formatLastSeen(device.lastSeen)}
+          {(loading || device.lastSeen) && (
+            <span className="flex min-w-0 flex-1 items-center gap-1 text-ods-text-secondary text-h6">
+              <span className="shrink-0">Last Seen:</span>
+              {loading ? (
+                <TextLineSkeleton type="inherit" as="span" className="w-28 max-w-full" />
+              ) : (
+                <span className="truncate">{formatLastSeen(device.lastSeen)}</span>
+              )}
             </span>
           )}
         </div>
       )}
 
-      {/* Tags section */}
-      {device.tags && device.tags.length > 0 && (
-        <div className="flex w-full flex-wrap items-center gap-2">
-          {device.tags.map((tag, index) => (
-            <Tag key={index} variant="outline" label={tag} />
-          ))}
+      {/* Tags section: the card sits in a grid's first screen, so its row is drawn while loading too (one tag, a
+          typical device's), never left to land later. A device with no tags draws no row once loaded. */}
+      {loading ? (
+        <div className={DEVICE_CARD_TAGS_ROW_CLASS}>
+          <Tag loading label="" variant="outline" data-loading-item />
         </div>
+      ) : (
+        device.tags &&
+        device.tags.length > 0 && (
+          <div className={DEVICE_CARD_TAGS_ROW_CLASS}>
+            {device.tags.map((tag, index) => (
+              <Tag key={index} variant="outline" label={tag} data-loading-item />
+            ))}
+          </div>
+        )
       )}
     </div>
   );

package/src/components/ui/entity-image.tsx

@@ -87,10 +87,7 @@ export function EntityImage({ src, alt, fallbackText, sizeClassName, className }
 }
 
 /** An EntityImage while its record is read: a box of the image's own size and corner. */
-export function EntityImageSkeleton({
-  sizeClassName,
-  className,
-}: Pick<EntityImageProps, 'sizeClassName' | 'className'>) {
+function EntityImageSkeleton({ sizeClassName, className }: Pick<EntityImageProps, 'sizeClassName' | 'className'>) {
   return (
     <UnifiedSkeleton
       className={cn('shrink-0', ENTITY_IMAGE_RADIUS_CLASS, sizeClassName ?? ENTITY_IMAGE_SIZE, className)}

package/src/components/ui/feature-card.tsx

@@ -81,6 +81,10 @@ export interface FeatureCardGridSkeletonShape {
   contentType?: 'h4' | 'h6';
 }
 
+/** Items a loading grid draws when it is told neither a count nor its columns: one row of the grid's default three
+ *  columns (`FeatureCardGridView`'s `columns`). */
+const FEATURE_CARD_GRID_SKELETON_ITEMS = 3;
+
 const GRID_COLUMNS = {
   2: 'grid-cols-1 content-md:grid-cols-2',
   3: 'grid-cols-1 content-md:grid-cols-3',
@@ -332,7 +336,7 @@ export function FeatureCardGrid({ skeleton, ...props }: FeatureCardGridProps) {
  * A FeatureCardGrid while its items are read: the same grid (its columns, hairlines and item padding), each
  * item's eyebrow, title, subtitle and copy a bar of its own line height, its picture a box.
  */
-export function FeatureCardGridSkeleton({
+function FeatureCardGridSkeleton({
   count,
   eyebrow,
   subtitle,
@@ -341,12 +345,15 @@ export function FeatureCardGridSkeleton({
   contentType = 'h4',
   ...grid
 }: Omit<FeatureCardGridProps, 'items' | 'loading' | 'skeleton'> & FeatureCardGridSkeletonShape) {
-  const items: FeatureCardItem[] = Array.from({ length: count ?? grid.columns ?? 3 }, (_, index) => ({
-    title: '',
-    eyebrow: eyebrow ? String(index + 1).padStart(2, '0') : undefined,
-    subtitle: subtitle ? '-' : undefined,
-    media: media ? <UnifiedSkeleton className={media} /> : undefined,
-    content: contentLines ? <TextLineSkeleton type={contentType} lines={contentLines} className="w-full" /> : null,
-  }));
+  const items: FeatureCardItem[] = Array.from(
+    { length: count ?? grid.columns ?? FEATURE_CARD_GRID_SKELETON_ITEMS },
+    (_, index) => ({
+      title: '',
+      eyebrow: eyebrow ? String(index + 1).padStart(2, '0') : undefined,
+      subtitle: subtitle ? '-' : undefined,
+      media: media ? <UnifiedSkeleton className={media} /> : undefined,
+      content: contentLines ? <TextLineSkeleton type={contentType} lines={contentLines} className="w-full" /> : null,
+    }),
+  );
   return <FeatureCardGridView {...grid} items={items} loading loadingKeepsEyebrow={eyebrow === 'index'} />;
 }

package/src/components/ui/feature-list.tsx

@@ -5,7 +5,7 @@ import { cn } from '../../utils/cn';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
 import { useLoadingScope } from './loading-scope';
-import { NumberedStep, NumberedStepSkeleton } from './numbered-step';
+import { NumberedStep } from './numbered-step';
 
 export interface FeatureListItemData {
   /** Shown in the boxed slot. Not used by the `numbered` variant. */
@@ -134,7 +134,7 @@ export function FeatureList({
  * A FeatureList while its items are read: the same list, `count` rows. A numbered row keeps its number; a boxed
  * row's icon is a box of the icon's frame; every title and description is a bar of its own line height.
  */
-export function FeatureListSkeleton({
+function FeatureListSkeleton({
   count = FEATURE_LIST_SKELETON_COUNT,
   variant = 'boxed',
   iconBoxSize = 72,
@@ -151,7 +151,7 @@ export function FeatureListSkeleton({
       <ol className={`${NUMBERED_LIST_CLASS} ${className}`} aria-hidden>
         {rows.map(index => (
           <li key={index}>
-            <NumberedStepSkeleton number={index + 1} />
+            <NumberedStep loading number={index + 1} title="" />
           </li>
         ))}
       </ol>

package/src/components/ui/field-value-skeleton.tsx

@@ -0,0 +1,11 @@
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { FIELD_VALUE_SKELETON_CLASS } from './input-styles';
+
+/**
+ * A field's value (or placeholder) while it is read: the `text-h4` bar in the field's value slot. Drawn by `Input`,
+ * `SelectTrigger` and `InputTrigger` in a loading scope, so every field draws the same bar in the same place, between
+ * its own real adornments.
+ */
+export function FieldValueSkeleton() {
+  return <TextLineSkeleton type="h4" className={FIELD_VALUE_SKELETON_CLASS} />;
+}

package/src/components/ui/file-manager/file-manager-breadcrumb.tsx

@@ -3,6 +3,7 @@
 import { ChevronRight } from 'lucide-react';
 import React from 'react';
 import { cn } from '../../../utils/cn';
+import { Button } from '../button';
 import type { FileManagerBreadcrumbProps } from './types';
 
 export function FileManagerBreadcrumb({ items, onItemClick, className }: FileManagerBreadcrumbProps) {
@@ -11,16 +12,17 @@ export function FileManagerBreadcrumb({ items, onItemClick, className }: FileMan
       {items.map((item, index) => (
         <React.Fragment key={item.path}>
           {index > 0 && <ChevronRight className="h-4 w-4 flex-shrink-0 text-ods-text-tertiary" />}
-          <button
+          <Button
+            variant="link"
+            size="compact"
+            noPaddingX
+            type="button"
+            aria-current={index === items.length - 1 ? 'page' : undefined}
             onClick={() => onItemClick?.(item.path)}
-            className={cn(
-              'shrink-0 rounded px-1 py-0.5 transition-colors hover:bg-ods-bg-hover',
-              'break-all text-left text-ods-text-primary hover:text-ods-accent',
-              index === items.length - 1 && 'font-medium',
-            )}
+            className="shrink-0"
           >
             {item.label}
-          </button>
+          </Button>
         </React.Fragment>
       ))}
     </nav>

package/src/components/ui/file-manager/file-manager-table-row.tsx

@@ -4,25 +4,60 @@ import { ChevronRight, MoreHorizontal } from 'lucide-react';
 import type React from 'react';
 import { useState } from 'react';
 import { cn } from '../../../utils/cn';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../button';
 import { Checkbox } from '../checkbox';
+import { loadingItemProps, useLoadingScope } from '../loading-scope';
 import { FileIcon } from './file-icon';
 import { FileManagerContextMenu } from './file-manager-context-menu';
 import type { FileAction, FileManagerTableRowProps } from './types';
 
-export function FileManagerTableRow({
-  file,
-  isSelected = false,
-  showCheckbox = true,
-  showPath = false,
-  onSelect,
-  onClick,
-  onDoubleClick,
-  onContextMenu,
-  onActionClick,
-  className,
-}: FileManagerTableRowProps) {
+/** A file row's frame (its height, inset and surface): read by the row and by its loading form, so both are one box. */
+export const FILE_MANAGER_ROW_FRAME_CLASS = 'group flex h-16 items-center border-ods-border bg-ods-card px-4';
+/** The checkbox's box in a file row and in the table header, in both forms. */
+export const FILE_MANAGER_CHECKBOX_BOX_CLASS = 'h-5 w-5';
+/** The row's icon buttons ("…" and the folder's chevron), and the bar that stands for the chevron while loading. */
+const ROW_ICON_BUTTON_CLASS = 'h-8 w-8 p-0';
+/** The file icon's box (`FileIcon` at `md`), and the bar that stands for it while loading. */
+const ROW_FILE_ICON_CLASS = 'h-5 w-5';
+/** The cells after the name, in both forms. */
+/** Each column's box (width, inset), read by the rows (both forms) and by the table's header, so they line up. */
+export const FILE_MANAGER_CHECKBOX_CELL_CLASS = 'mr-4';
+export const FILE_MANAGER_NAME_CELL_CLASS = 'flex min-w-0 flex-1 items-center gap-3';
+export const FILE_MANAGER_SIZE_CELL_BOX_CLASS = 'w-24 shrink-0 pr-4';
+export const FILE_MANAGER_MODIFIED_CELL_BOX_CLASS = 'w-36 shrink-0 pl-4';
+export const FILE_MANAGER_ACTIONS_CELL_BOX_CLASS = 'flex w-48 shrink-0 justify-end pl-4';
+const SIZE_CELL_CLASS = cn(FILE_MANAGER_SIZE_CELL_BOX_CLASS, 'text-ods-text-secondary text-h6');
+const MODIFIED_CELL_CLASS = cn(FILE_MANAGER_MODIFIED_CELL_BOX_CLASS, 'text-ods-text-secondary text-h6');
+const ACTIONS_CELL_CLASS = cn(FILE_MANAGER_ACTIONS_CELL_BOX_CLASS, 'items-center gap-1');
+
+export function FileManagerTableRow(props: FileManagerTableRowProps) {
+  const {
+    file,
+    isSelected = false,
+    showCheckbox = true,
+    showPath = false,
+    loading: loadingProp,
+    onSelect,
+    onClick,
+    onDoubleClick,
+    onContextMenu,
+    onActionClick,
+    className,
+  } = props;
   const [contextMenuOpen, setContextMenuOpen] = useState(false);
+  // ONE switch: in a loading scope, while the host reads the folder, or with no file yet, the row is its loading form.
+  const loading = useLoadingScope() || !!loadingProp || !file;
+  if (loading) {
+    return (
+      <FileManagerTableRowSkeleton
+        showCheckbox={showCheckbox}
+        showPath={showPath}
+        className={className}
+        {...loadingItemProps(props)}
+      />
+    );
+  }
 
   const handleRowClick = (e: React.MouseEvent) => {
     // Don't trigger row click if clicking on interactive elements
@@ -46,7 +81,7 @@ export function FileManagerTableRow({
   return (
     <div
       className={cn(
-        'group flex h-16 items-center border-ods-border bg-ods-card px-4',
+        FILE_MANAGER_ROW_FRAME_CLASS,
         'cursor-pointer transition-colors hover:bg-ods-bg-hover',
         isSelected && 'bg-ods-bg-surface',
         className,
@@ -57,14 +92,19 @@ export function FileManagerTableRow({
         e.preventDefault();
         onContextMenu?.(e);
       }}
+      {...loadingItemProps(props)}
     >
       {showCheckbox && (
-        <div className="mr-4" data-no-row-click>
-          <Checkbox checked={isSelected} onCheckedChange={handleCheckboxChange} className="h-5 w-5" />
+        <div className={FILE_MANAGER_CHECKBOX_CELL_CLASS} data-no-row-click>
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={handleCheckboxChange}
+            boxClassName={FILE_MANAGER_CHECKBOX_BOX_CLASS}
+          />
         </div>
       )}
 
-      <div className="flex min-w-0 flex-1 items-center gap-3">
+      <div className={FILE_MANAGER_NAME_CELL_CLASS}>
         <FileIcon type={file.type} extension={fileExtension} size="md" />
         <div className="flex min-w-0 flex-col">
           <span className="truncate text-ods-text-primary text-h6" title={file.name}>
@@ -78,35 +118,24 @@ export function FileManagerTableRow({
         </div>
       </div>
 
-      <div className="w-24 shrink-0 pr-4 text-ods-text-secondary text-h6">{file.size || ''}</div>
+      <div className={SIZE_CELL_CLASS}>{file.size || ''}</div>
 
-      <div className="w-36 shrink-0 pl-4 text-ods-text-secondary text-h6">{file.modified}</div>
+      <div className={MODIFIED_CELL_CLASS}>{file.modified}</div>
 
-      <div className="flex w-48 shrink-0 items-center justify-end gap-1 pl-4" data-no-row-click>
+      <div className={ACTIONS_CELL_CLASS} data-no-row-click>
         <FileManagerContextMenu
           open={contextMenuOpen}
           onOpenChange={setContextMenuOpen}
           onAction={handleContextAction}
           fileType={file.type}
-          trigger={
-            <Button
-              variant="transparent"
-              size="small-legacy"
-              className="h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
-              onClick={e => {
-                e.stopPropagation();
-              }}
-            >
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          }
+          trigger={rowMenuButton()}
         />
 
         {file.type === 'folder' ? (
           <Button
             variant="transparent"
             size="small-legacy"
-            className="h-8 w-8 p-0"
+            className={ROW_ICON_BUTTON_CLASS}
             onClick={e => {
               e.stopPropagation();
               onDoubleClick?.();
@@ -121,3 +150,68 @@ export function FileManagerTableRow({
     </div>
   );
 }
+
+/** The row's "…" menu trigger (shown on hover): the same button in both forms (inert in the loading row). */
+function rowMenuButton() {
+  return (
+    <Button
+      variant="transparent"
+      size="small-legacy"
+      className={cn(ROW_ICON_BUTTON_CLASS, 'opacity-0 transition-opacity group-hover:opacity-100')}
+      onClick={e => {
+        e.stopPropagation();
+      }}
+    >
+      <MoreHorizontal className="h-4 w-4" />
+    </Button>
+  );
+}
+
+/**
+ * The row while its file is read: the row's own frame and cells, the read parts (icon, name, path on a search result,
+ * size, date, whether a chevron opens it) as bars, the checkbox its own loading box and the "…" trigger real and
+ * inert. Decoration: the file manager's region says it is loading.
+ */
+function FileManagerTableRowSkeleton({
+  showCheckbox,
+  showPath,
+  className,
+  ...markers
+}: {
+  showCheckbox: boolean;
+  showPath: boolean;
+  className?: string;
+  [marker: `data-${string}`]: unknown;
+}) {
+  return (
+    <div aria-hidden="true" inert className={cn(FILE_MANAGER_ROW_FRAME_CLASS, className)} {...markers}>
+      {showCheckbox && (
+        <div className={FILE_MANAGER_CHECKBOX_CELL_CLASS}>
+          <Checkbox loading boxClassName={FILE_MANAGER_CHECKBOX_BOX_CLASS} />
+        </div>
+      )}
+
+      <div className={FILE_MANAGER_NAME_CELL_CLASS}>
+        <UnifiedSkeleton className={cn(ROW_FILE_ICON_CLASS, 'shrink-0 rounded')} />
+        <div className="flex min-w-0 flex-col">
+          <TextLineSkeleton type="h6" className="w-32" />
+          {/* Every search result names its folder: the path line is drawn whenever paths are shown. */}
+          {showPath && <TextLineSkeleton type="h6" className="w-48" />}
+        </div>
+      </div>
+
+      <div className={SIZE_CELL_CLASS}>
+        <TextLineSkeleton type="h6" className="w-16" />
+      </div>
+
+      <div className={MODIFIED_CELL_CLASS}>
+        <TextLineSkeleton type="h6" className="w-24" />
+      </div>
+
+      <div className={ACTIONS_CELL_CLASS}>
+        {rowMenuButton()}
+        <UnifiedSkeleton className={cn(ROW_ICON_BUTTON_CLASS, 'rounded')} />
+      </div>
+    </div>
+  );
+}