silver-ui 0.1.1 → 0.2.0

package/dist/chunk-463O56TB.js

@@ -0,0 +1,224 @@
+import { Skeleton } from './chunk-U4GWNENK.js';
+import { Button } from './chunk-RRNT32KY.js';
+import { Spinner } from './chunk-S54CKWKV.js';
+import { Tooltip } from './chunk-EMHLPPQZ.js';
+import { sva } from './chunk-EHCAF6D3.js';
+import { Icon } from './chunk-7T3SWOY7.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { ImageIcon, X } from 'lucide-react';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Thumbnail/Thumbnail.recipe.ts
+var thumbnailRecipe = sva({
+  slots: [
+    "root",
+    "imageContainer",
+    "imageButton",
+    "image",
+    "placeholder",
+    "insetBorder",
+    "remove",
+    "overlay"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      flexDirection: "column",
+      w: "16",
+      flexShrink: 0,
+      isolation: "isolate"
+    },
+    imageContainer: {
+      position: "relative",
+      w: "full",
+      aspectRatio: "1",
+      borderRadius: "md",
+      overflow: "hidden",
+      bg: "surface.gray"
+    },
+    imageButton: {
+      display: "block",
+      w: "full",
+      h: "full",
+      cursor: "pointer",
+      borderRadius: "inherit",
+      overflow: "hidden"
+    },
+    image: {
+      display: "block",
+      w: "full",
+      h: "full",
+      objectFit: "cover"
+    },
+    placeholder: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "full",
+      h: "full",
+      color: "fg.muted"
+    },
+    insetBorder: {
+      position: "absolute",
+      inset: 0,
+      borderRadius: "inherit",
+      boxShadow: "inset 0 0 0 1px token(colors.border.emphasized)",
+      pointerEvents: "none"
+    },
+    remove: {
+      position: "absolute",
+      top: "1",
+      right: "1",
+      zIndex: 1,
+      color: "fg.onPrimary"
+    },
+    overlay: {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      bg: "overlay.scrim.subtle",
+      borderRadius: "inherit",
+      zIndex: 1
+    }
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        root: {
+          opacity: 0.5,
+          pointerEvents: "none"
+        }
+      }
+    },
+    isInteractive: {
+      true: {
+        imageContainer: {
+          cursor: "pointer",
+          transitionProperty: "opacity, box-shadow",
+          transitionDuration: "fast",
+          transitionTimingFunction: "default",
+          _hover: {
+            boxShadow: "lg",
+            opacity: 0.9
+          },
+          _active: {
+            opacity: 0.75
+          },
+          "&:has(:focus-visible)": {
+            outlineWidth: "focus",
+            outlineStyle: "solid",
+            outlineColor: "primary",
+            outlineOffset: "focusOffset"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    isDisabled: false,
+    isInteractive: false
+  }
+});
+function ThumbnailImageArea({
+  accessibleName,
+  alt,
+  classes,
+  isDisabled,
+  isLoading = false,
+  onClick,
+  onRemove,
+  src
+}) {
+  const [hasImageError, setHasImageError] = useState(false);
+  const hasImage = src != null && !hasImageError;
+  const isInteractive = onClick != null && !isDisabled && !isLoading;
+  const imageContent = isLoading && !hasImage ? /* @__PURE__ */ jsx(Skeleton, { radius: 2 }) : hasImage ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt: alt ?? "",
+      className: classes.image,
+      onError: () => setHasImageError(true),
+      src
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: classes.placeholder, children: /* @__PURE__ */ jsx(Icon, { icon: ImageIcon, size: "lg" }) });
+  return /* @__PURE__ */ jsxs("div", { className: classes.imageContainer, children: [
+    isInteractive ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": `Open ${accessibleName}`,
+        className: classes.imageButton,
+        onClick,
+        type: "button",
+        children: imageContent
+      }
+    ) : imageContent,
+    hasImage ? /* @__PURE__ */ jsx("div", { className: classes.insetBorder }) : null,
+    isLoading && hasImage ? /* @__PURE__ */ jsx("div", { className: classes.overlay, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "onMedia" }) }) : null,
+    onRemove != null && !isDisabled ? /* @__PURE__ */ jsx("div", { className: classes.remove, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: X,
+        isIconOnly: true,
+        label: `Remove ${accessibleName}`,
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove(event);
+        },
+        size: "sm",
+        variant: "onSolid"
+      }
+    ) }) : null
+  ] });
+}
+function Thumbnail({
+  alt,
+  className,
+  "data-testid": dataTestId,
+  isDisabled = false,
+  isLoading = false,
+  label,
+  onClick,
+  onRemove,
+  ref,
+  src,
+  style
+}) {
+  const accessibleName = label ?? alt ?? "thumbnail";
+  const isInteractive = onClick != null && !isDisabled && !isLoading;
+  const classes = thumbnailRecipe({ isDisabled, isInteractive });
+  const thumbnail = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-busy": isLoading || void 0,
+      "aria-label": accessibleName,
+      className: cx(classes.root, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: /* @__PURE__ */ jsx(
+        ThumbnailImageArea,
+        {
+          accessibleName,
+          alt,
+          classes,
+          isDisabled,
+          isLoading,
+          onClick,
+          onRemove,
+          src
+        },
+        src ?? "empty"
+      )
+    }
+  );
+  return label != null ? /* @__PURE__ */ jsx(Tooltip, { content: label, children: thumbnail }) : thumbnail;
+}
+Thumbnail.displayName = "Thumbnail";
+
+export { Thumbnail };
+//# sourceMappingURL=chunk-463O56TB.js.map
+//# sourceMappingURL=chunk-463O56TB.js.map

package/dist/chunk-463O56TB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Thumbnail/Thumbnail.recipe.ts","../src/components/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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","file":"chunk-463O56TB.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const thumbnailRecipe = sva({\n  slots: [\n    'root',\n    'imageContainer',\n    'imageButton',\n    'image',\n    'placeholder',\n    'insetBorder',\n    'remove',\n    'overlay',\n  ],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'inline-flex',\n      flexDirection: 'column',\n      w: '16',\n      flexShrink: 0,\n      isolation: 'isolate',\n    },\n    imageContainer: {\n      position: 'relative',\n      w: 'full',\n      aspectRatio: '1',\n      borderRadius: 'md',\n      overflow: 'hidden',\n      bg: 'surface.gray',\n    },\n    imageButton: {\n      display: 'block',\n      w: 'full',\n      h: 'full',\n      cursor: 'pointer',\n      borderRadius: 'inherit',\n      overflow: 'hidden',\n    },\n    image: {\n      display: 'block',\n      w: 'full',\n      h: 'full',\n      objectFit: 'cover',\n    },\n    placeholder: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      w: 'full',\n      h: 'full',\n      color: 'fg.muted',\n    },\n    insetBorder: {\n      position: 'absolute',\n      inset: 0,\n      borderRadius: 'inherit',\n      boxShadow: 'inset 0 0 0 1px token(colors.border.emphasized)',\n      pointerEvents: 'none',\n    },\n    remove: {\n      position: 'absolute',\n      top: '1',\n      right: '1',\n      zIndex: 1,\n      color: 'fg.onPrimary',\n    },\n    overlay: {\n      position: 'absolute',\n      inset: 0,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      bg: 'overlay.scrim.subtle',\n      borderRadius: 'inherit',\n      zIndex: 1,\n    },\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        root: {\n          opacity: 0.5,\n          pointerEvents: 'none',\n        },\n      },\n    },\n    isInteractive: {\n      true: {\n        imageContainer: {\n          cursor: 'pointer',\n          transitionProperty: 'opacity, box-shadow',\n          transitionDuration: 'fast',\n          transitionTimingFunction: 'default',\n          _hover: {\n            boxShadow: 'lg',\n            opacity: 0.9,\n          },\n          _active: {\n            opacity: 0.75,\n          },\n          '&:has(:focus-visible)': {\n            outlineWidth: 'focus',\n            outlineStyle: 'solid',\n            outlineColor: 'primary',\n            outlineOffset: 'focusOffset',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    isDisabled: false,\n    isInteractive: false,\n  },\n});\n\nexport type ThumbnailVariants = RecipeVariantProps<typeof thumbnailRecipe>;\n","import {ImageIcon, X} from 'lucide-react';\nimport {useState, type CSSProperties, type MouseEvent, type Ref} from 'react';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {Icon} from '../Icon';\nimport {Skeleton} from '../Skeleton';\nimport {Spinner} from '../Spinner';\nimport {Tooltip} from '../Tooltip';\nimport {thumbnailRecipe} from './Thumbnail.recipe';\n\nexport interface ThumbnailProps {\n  /**\n   * Alt text describing the image content. Use `label` for a file name or\n   * action label shown in the tooltip and button accessible names.\n   */\n  alt?: string;\n  /**\n   * Additional CSS class names applied to the root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the thumbnail is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the thumbnail is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * File name or short item label used for the root accessible name, tooltip,\n   * and open/remove button labels. When omitted, `alt` is used as a fallback.\n   */\n  label?: string;\n  /**\n   * Called when the thumbnail image area is clicked.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Called when the remove button is clicked.\n   */\n  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Image source.\n   */\n  src?: string;\n  /**\n   * Inline styles applied to the root.\n   */\n  style?: CSSProperties;\n}\n\ntype ThumbnailClasses = ReturnType<typeof thumbnailRecipe>;\n\ntype ThumbnailImageAreaProps = Pick<\n  ThumbnailProps,\n  'alt' | 'isLoading' | 'onClick' | 'onRemove' | 'src'\n> & {\n  accessibleName: string;\n  classes: ThumbnailClasses;\n  isDisabled: boolean;\n};\n\nfunction ThumbnailImageArea({\n  accessibleName,\n  alt,\n  classes,\n  isDisabled,\n  isLoading = false,\n  onClick,\n  onRemove,\n  src,\n}: ThumbnailImageAreaProps): React.JSX.Element {\n  const [hasImageError, setHasImageError] = useState(false);\n  const hasImage = src != null && !hasImageError;\n  const isInteractive = onClick != null && !isDisabled && !isLoading;\n  const imageContent =\n    isLoading && !hasImage ? (\n      <Skeleton radius={2} />\n    ) : hasImage ? (\n      <img\n        alt={alt ?? ''}\n        className={classes.image}\n        onError={() => setHasImageError(true)}\n        src={src}\n      />\n    ) : (\n      <div className={classes.placeholder}>\n        <Icon icon={ImageIcon} size=\"lg\" />\n      </div>\n    );\n\n  return (\n    <div className={classes.imageContainer}>\n      {isInteractive ? (\n        <button\n          aria-label={`Open ${accessibleName}`}\n          className={classes.imageButton}\n          onClick={onClick}\n          type=\"button\">\n          {imageContent}\n        </button>\n      ) : (\n        imageContent\n      )}\n      {hasImage ? <div className={classes.insetBorder} /> : null}\n      {isLoading && hasImage ? (\n        <div className={classes.overlay}>\n          <Spinner size=\"sm\" variant=\"onMedia\" />\n        </div>\n      ) : null}\n      {onRemove != null && !isDisabled ? (\n        <div className={classes.remove}>\n          <Button\n            icon={X}\n            isIconOnly\n            label={`Remove ${accessibleName}`}\n            onClick={event => {\n              event.stopPropagation();\n              onRemove(event as MouseEvent<HTMLButtonElement>);\n            }}\n            size=\"sm\"\n            variant=\"onSolid\"\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Square image preview for attachments and media.\n */\nexport function Thumbnail({\n  alt,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  isLoading = false,\n  label,\n  onClick,\n  onRemove,\n  ref,\n  src,\n  style,\n}: ThumbnailProps): React.JSX.Element {\n  const accessibleName = label ?? alt ?? 'thumbnail';\n  const isInteractive = onClick != null && !isDisabled && !isLoading;\n  const classes = thumbnailRecipe({isDisabled, isInteractive});\n\n  const thumbnail = (\n    <div\n      aria-busy={isLoading || undefined}\n      aria-label={accessibleName}\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <ThumbnailImageArea\n        accessibleName={accessibleName}\n        alt={alt}\n        classes={classes}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        key={src ?? 'empty'}\n        onClick={onClick}\n        onRemove={onRemove}\n        src={src}\n      />\n    </div>\n  );\n\n  return label != null ? (\n    <Tooltip content={label}>{thumbnail}</Tooltip>\n  ) : (\n    thumbnail\n  );\n}\n\nThumbnail.displayName = 'Thumbnail';\n"]}

package/dist/{chunk-SMF3YBH5.cjs → chunk-47FUQCAT.cjs}

@@ -1,20 +1,20 @@
 'use strict';
 
-var chunkCZJUKLFD_cjs = require('./chunk-CZJUKLFD.cjs');
-var chunkWE3ECIRS_cjs = require('./chunk-WE3ECIRS.cjs');
-var chunk6NIFOTUZ_cjs = require('./chunk-6NIFOTUZ.cjs');
-var chunkWIIDQ44X_cjs = require('./chunk-WIIDQ44X.cjs');
-var chunkRJXHAQCR_cjs = require('./chunk-RJXHAQCR.cjs');
-var chunkEETTQWW5_cjs = require('./chunk-EETTQWW5.cjs');
-var chunkTPSOUQG7_cjs = require('./chunk-TPSOUQG7.cjs');
+var chunk76FHSISK_cjs = require('./chunk-76FHSISK.cjs');
+var chunkXHTKGOQV_cjs = require('./chunk-XHTKGOQV.cjs');
+var chunkDH2ZFYKE_cjs = require('./chunk-DH2ZFYKE.cjs');
+var chunkUUIAGGFW_cjs = require('./chunk-UUIAGGFW.cjs');
+var chunk36QGPGT2_cjs = require('./chunk-36QGPGT2.cjs');
+var chunkZ7ID5TC7_cjs = require('./chunk-Z7ID5TC7.cjs');
+var chunkGGZGVAEF_cjs = require('./chunk-GGZGVAEF.cjs');
 var chunkCK3UJQRI_cjs = require('./chunk-CK3UJQRI.cjs');
-var chunkPDXZDPOY_cjs = require('./chunk-PDXZDPOY.cjs');
-var chunkQRDRZNCS_cjs = require('./chunk-QRDRZNCS.cjs');
-var chunkWSAZHUB3_cjs = require('./chunk-WSAZHUB3.cjs');
+var chunk2VIJC4NW_cjs = require('./chunk-2VIJC4NW.cjs');
+var chunkMMST4VXH_cjs = require('./chunk-MMST4VXH.cjs');
+var chunkBDBHHJGN_cjs = require('./chunk-BDBHHJGN.cjs');
 var chunkR37R7DEV_cjs = require('./chunk-R37R7DEV.cjs');
-var chunkNILB6Y4Z_cjs = require('./chunk-NILB6Y4Z.cjs');
-var chunk47BELFYO_cjs = require('./chunk-47BELFYO.cjs');
-var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var chunkO3T7Z6RH_cjs = require('./chunk-O3T7Z6RH.cjs');
+var chunkJMNH45Q3_cjs = require('./chunk-JMNH45Q3.cjs');
+var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var polyfill = require('@js-temporal/polyfill');
@@ -35,7 +35,7 @@ function StringEditor({
   if (operatorValue.searchSource != null) {
     const selectedItem = currentValue === "" ? null : { id: currentValue, label: currentValue };
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkPDXZDPOY_cjs.AutocompleteInput,
+      chunk2VIJC4NW_cjs.AutocompleteInput,
       {
         debounceMs: 150,
         isLabelHidden: true,
@@ -50,7 +50,7 @@ function StringEditor({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkRJXHAQCR_cjs.TextInput,
+    chunk36QGPGT2_cjs.TextInput,
     {
       isLabelHidden: true,
       label: "Value",
@@ -74,7 +74,7 @@ function StringListEditor({
   const source = operatorValue.searchSource ?? emptySource();
   const hasCreate = operatorValue.isArbitraryStringAllowed === true || operatorValue.searchSource == null;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkWE3ECIRS_cjs.TagsInput,
+    chunkXHTKGOQV_cjs.TagsInput,
     {
       debounceMs: operatorValue.searchSource == null ? 0 : 150,
       hasCreate,
@@ -98,7 +98,7 @@ function IntegerEditor({
   onChange
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkWIIDQ44X_cjs.NumberInput,
+    chunkUUIAGGFW_cjs.NumberInput,
     {
       isIntegerOnly: true,
       isLabelHidden: true,
@@ -118,7 +118,7 @@ function FloatEditor({
   onChange
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkWIIDQ44X_cjs.NumberInput,
+    chunkUUIAGGFW_cjs.NumberInput,
     {
       isLabelHidden: true,
       label: "Value",
@@ -137,7 +137,7 @@ function TimeEditor({
   onChange
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkEETTQWW5_cjs.TimeInput,
+    chunkZ7ID5TC7_cjs.TimeInput,
     {
       isLabelHidden: true,
       label: "Time",
@@ -158,7 +158,7 @@ function DateAbsoluteEditor({
   timezoneID
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkTPSOUQG7_cjs.DateInput,
+    chunkGGZGVAEF_cjs.DateInput,
     {
       isLabelHidden: true,
       label: "Date",
@@ -206,7 +206,7 @@ function DateRelativeEditor({
     return result;
   }, [operatorValue.isFutureAllowed, operatorValue.isPastAllowed]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk6NIFOTUZ_cjs.Select,
+    chunkDH2ZFYKE_cjs.Select,
     {
       isLabelHidden: true,
       label: "Relative date",
@@ -264,7 +264,7 @@ function DateRangeEditor({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkTPSOUQG7_cjs.DateInput,
+      chunkGGZGVAEF_cjs.DateInput,
       {
         isLabelHidden: true,
         label: "Start date",
@@ -273,7 +273,7 @@ function DateRangeEditor({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkTPSOUQG7_cjs.DateInput,
+      chunkGGZGVAEF_cjs.DateInput,
       {
         isLabelHidden: true,
         label: "End date",
@@ -289,7 +289,7 @@ function EnumEditor({
   onChange
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk6NIFOTUZ_cjs.Select,
+    chunkDH2ZFYKE_cjs.Select,
     {
       isLabelHidden: true,
       label: "Value",
@@ -316,7 +316,7 @@ function EnumListEditor({
     () => enumItemsToSearchableItems(operatorValue.values),
     [operatorValue.values]
   );
-  const source = react.useMemo(() => chunkPDXZDPOY_cjs.createStaticSource(items), [items]);
+  const source = react.useMemo(() => chunk2VIJC4NW_cjs.createStaticSource(items), [items]);
   const currentValue = react.useMemo(() => {
     if (filterValue?.type !== "enum_list") {
       return [];
@@ -327,7 +327,7 @@ function EnumListEditor({
     }));
   }, [filterValue, operatorValue.values]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkWE3ECIRS_cjs.TagsInput,
+    chunkXHTKGOQV_cjs.TagsInput,
     {
       debounceMs: 0,
       hasEntriesOnFocus: true,
@@ -359,7 +359,7 @@ function EntityListEditor({
     }));
   }, [filterValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkWE3ECIRS_cjs.TagsInput,
+    chunkXHTKGOQV_cjs.TagsInput,
     {
       debounceMs: operatorValue.searchSource == null ? 0 : 150,
       isLabelHidden: true,
@@ -527,28 +527,28 @@ function SearchFilterInputValueEditor({
   }
 }
 var styles = {
-  root: chunkAZDWQGAX_cjs.css({
+  root: chunkRU6JG3FS_cjs.css({
     overflow: "hidden",
     minW: "100"
   }),
-  content: chunkAZDWQGAX_cjs.css({
+  content: chunkRU6JG3FS_cjs.css({
     p: "4"
   }),
-  footer: chunkAZDWQGAX_cjs.css({
+  footer: chunkRU6JG3FS_cjs.css({
     px: "3",
     pb: "3"
   }),
-  fieldSelector: chunkAZDWQGAX_cjs.css({
+  fieldSelector: chunkRU6JG3FS_cjs.css({
     flexShrink: 0
   }),
-  operatorSelector: chunkAZDWQGAX_cjs.css({
+  operatorSelector: chunkRU6JG3FS_cjs.css({
     flex: "1 0 auto"
   }),
-  valueEditor: chunkAZDWQGAX_cjs.css({
+  valueEditor: chunkRU6JG3FS_cjs.css({
     flex: "2 1 0",
     minW: 0
   }),
-  nestedList: chunkAZDWQGAX_cjs.css({
+  nestedList: chunkRU6JG3FS_cjs.css({
     display: "flex",
     flexDirection: "column",
     gap: "2",
@@ -557,7 +557,7 @@ var styles = {
     m: 0,
     p: 0
   }),
-  nestedNode: chunkAZDWQGAX_cjs.css({
+  nestedNode: chunkRU6JG3FS_cjs.css({
     display: "flex",
     flexDirection: "column",
     gap: "2",
@@ -566,22 +566,22 @@ var styles = {
     borderInlineStartStyle: "solid",
     borderColor: "border"
   }),
-  nestedRow: chunkAZDWQGAX_cjs.css({
+  nestedRow: chunkRU6JG3FS_cjs.css({
     display: "flex",
     alignItems: "center",
     gap: "2",
     w: "full"
   }),
-  nestedCell: chunkAZDWQGAX_cjs.css({
+  nestedCell: chunkRU6JG3FS_cjs.css({
     minW: 0
   }),
-  nestedField: chunkAZDWQGAX_cjs.css({
+  nestedField: chunkRU6JG3FS_cjs.css({
     flex: "0 0 200px"
   }),
-  nestedOperator: chunkAZDWQGAX_cjs.css({
+  nestedOperator: chunkRU6JG3FS_cjs.css({
     flex: "0 0 180px"
   }),
-  nestedValue: chunkAZDWQGAX_cjs.css({
+  nestedValue: chunkRU6JG3FS_cjs.css({
     flex: "2 1 0"
   })
 };
@@ -657,7 +657,7 @@ function NestedSubFilterRow({
   const isEmpty = operatorValue?.type === "empty";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nestedRow, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.nestedCell} ${styles.nestedField}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6NIFOTUZ_cjs.Select,
+      chunkDH2ZFYKE_cjs.Select,
       {
         isDisabled: isReadOnly,
         isLabelHidden: true,
@@ -680,7 +680,7 @@ function NestedSubFilterRow({
       }
     ) }),
     operatorOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.nestedCell} ${styles.nestedOperator}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6NIFOTUZ_cjs.Select,
+      chunkDH2ZFYKE_cjs.Select,
       {
         isDisabled: isReadOnly,
         isLabelHidden: true,
@@ -716,7 +716,7 @@ function NestedSubFilterRow({
       }
     ) }) : null,
     !isReadOnly ? /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNILB6Y4Z_cjs.Button,
+      chunkO3T7Z6RH_cjs.Button,
       {
         icon: lucideReact.X,
         isIconOnly: true,
@@ -796,9 +796,9 @@ function NestedEditor({
       return updated;
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkCZJUKLFD_cjs.VStack, { gap: 2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunk76FHSISK_cjs.VStack, { gap: 2, children: [
     operatorOptions.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6NIFOTUZ_cjs.Select,
+      chunkDH2ZFYKE_cjs.Select,
       {
         isDisabled: isReadOnly,
         isLabelHidden: true,
@@ -823,7 +823,7 @@ function NestedEditor({
       }
     ) }, `${subFilter.field}-${index}`)) }),
     !isReadOnly ? /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNILB6Y4Z_cjs.Button,
+      chunkO3T7Z6RH_cjs.Button,
       {
         label: "+ Add filter",
         onClick: addSubFilter,
@@ -915,9 +915,9 @@ function SearchFilterInputEditPopover({
       value: keepValue ? previous.value : void 0
     }));
   };
-  const footer = !isEmptyType ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkCZJUKLFD_cjs.HStack, { gap: 2, hAlign: "between", children: [
+  const footer = !isEmptyType ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsxRuntime.jsxs(chunk76FHSISK_cjs.HStack, { gap: 2, hAlign: "between", children: [
     !isReadOnly && mode === "edit" ? /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNILB6Y4Z_cjs.Button,
+      chunkO3T7Z6RH_cjs.Button,
       {
         label: "Delete",
         onClick: () => onSave(null),
@@ -925,10 +925,10 @@ function SearchFilterInputEditPopover({
         variant: "ghost"
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(chunkCZJUKLFD_cjs.HStack, { gap: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkNILB6Y4Z_cjs.Button, { label: "Cancel", onClick: onCancel, size: "sm", variant: "ghost" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunk76FHSISK_cjs.HStack, { gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkO3T7Z6RH_cjs.Button, { label: "Cancel", onClick: onCancel, size: "sm", variant: "ghost" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNILB6Y4Z_cjs.Button,
+        chunkO3T7Z6RH_cjs.Button,
         {
           isDisabled: isSaveDisabled,
           label: saveButtonLabel,
@@ -957,10 +957,10 @@ function SearchFilterInputEditPopover({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkCZJUKLFD_cjs.VStack, { gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(chunkCZJUKLFD_cjs.HStack, { gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsxs(chunk76FHSISK_cjs.VStack, { gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(chunk76FHSISK_cjs.HStack, { gap: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.fieldSelector, children: /* @__PURE__ */ jsxRuntime.jsx(
-              chunk6NIFOTUZ_cjs.Select,
+              chunkDH2ZFYKE_cjs.Select,
               {
                 isDisabled: isReadOnly,
                 isLabelHidden: true,
@@ -971,7 +971,7 @@ function SearchFilterInputEditPopover({
               }
             ) }),
             !isNestedType && operatorOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.operatorSelector, children: /* @__PURE__ */ jsxRuntime.jsx(
-              chunk6NIFOTUZ_cjs.Select,
+              chunkDH2ZFYKE_cjs.Select,
               {
                 isDisabled: isReadOnly,
                 isLabelHidden: true,
@@ -1319,23 +1319,23 @@ function buildFieldItems(config) {
   });
 }
 var styles2 = {
-  entityPhoto: chunkAZDWQGAX_cjs.css({
+  entityPhoto: chunkRU6JG3FS_cjs.css({
     width: "16px",
     height: "16px",
     borderRadius: "full",
     objectFit: "cover",
     flexShrink: 0
   }),
-  root: chunkAZDWQGAX_cjs.css({
+  root: chunkRU6JG3FS_cjs.css({
     w: "full"
   }),
-  popover: chunkAZDWQGAX_cjs.css({
+  popover: chunkRU6JG3FS_cjs.css({
     minW: "400px"
   }),
-  resultCount: chunkAZDWQGAX_cjs.css({
+  resultCount: chunkRU6JG3FS_cjs.css({
     whiteSpace: "nowrap"
   }),
-  value: chunkAZDWQGAX_cjs.css({
+  value: chunkRU6JG3FS_cjs.css({
     fontWeight: "bold"
   })
 };
@@ -1524,7 +1524,7 @@ function SearchFilterInput({
       return entities.length === 1 && entities[0].photo != null ? entities[0].photo : void 0;
     })() : void 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkQRDRZNCS_cjs.Tag,
+      chunkMMST4VXH_cjs.Tag,
       {
         endContent: value === "" ? void 0 : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.value, children: value }),
         isDisabled,
@@ -1542,7 +1542,7 @@ function SearchFilterInput({
   const renderItem = (item) => {
     const field = item.auxiliaryData == null ? void 0 : config.getField(item.auxiliaryData.fieldKey);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkPDXZDPOY_cjs.AutocompleteInputItem,
+      chunk2VIJC4NW_cjs.AutocompleteInputItem,
       {
         description: field?.description,
         icon: field?.icon ?? lucideReact.Search,
@@ -1599,7 +1599,7 @@ function SearchFilterInput({
     }
   );
   const resultCountNode = resultCount == null ? null : /* @__PURE__ */ jsxRuntime.jsx(
-    chunk47BELFYO_cjs.Text,
+    chunkJMNH45Q3_cjs.Text,
     {
       as: "span",
       className: styles2.resultCount,
@@ -1610,7 +1610,7 @@ function SearchFilterInput({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.root, ref: rootRef, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunkWE3ECIRS_cjs.TagsInput,
+      chunkXHTKGOQV_cjs.TagsInput,
       {
         className,
         "data-testid": dataTestId,
@@ -1644,7 +1644,7 @@ function SearchFilterInput({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkWSAZHUB3_cjs.Popover,
+      chunkBDBHHJGN_cjs.Popover,
       {
         anchorRef: rootRef,
         className: styles2.popover,
@@ -1688,10 +1688,10 @@ function SearchFilterInputFilterEditor({
 }
 SearchFilterInputFilterEditor.displayName = "SearchFilterInputFilterEditor";
 var styles3 = {
-  value: chunkAZDWQGAX_cjs.css({
+  value: chunkRU6JG3FS_cjs.css({
     fontWeight: "bold"
   }),
-  entityPhoto: chunkAZDWQGAX_cjs.css({
+  entityPhoto: chunkRU6JG3FS_cjs.css({
     width: "16px",
     height: "16px",
     borderRadius: "full",
@@ -1733,7 +1733,7 @@ function SearchFilterInputTag({
   );
   const entityPhoto = getSingleEntityPhoto(filter.value);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkQRDRZNCS_cjs.Tag,
+    chunkMMST4VXH_cjs.Tag,
     {
       endContent: value === "" ? void 0 : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.value, children: value }),
       isDisabled,
@@ -2095,5 +2095,5 @@ exports.createSearchFilterInputConfig = createSearchFilterInputConfig;
 exports.formatFilterValue = formatFilterValue;
 exports.useSearchFilterInputConfig = useSearchFilterInputConfig;
 exports.useSearchFilterInputSource = useSearchFilterInputSource;
-//# sourceMappingURL=chunk-SMF3YBH5.cjs.map
-//# sourceMappingURL=chunk-SMF3YBH5.cjs.map
+//# sourceMappingURL=chunk-47FUQCAT.cjs.map
+//# sourceMappingURL=chunk-47FUQCAT.cjs.map