@optiaxiom/react 1.9.17 → 1.9.18

package/dist/esm/packages/react/src/proteus-document/ProteusChartTooltipContent.js

@@ -1,48 +0,0 @@
-"use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Group } from '../group/Group.js';
-import { applyFormatter } from './getProteusValue.js';
-import { tooltip, value } from './ProteusChartTooltipContent-css.js';
-
-function ProteusChartTooltipContent({
-  active,
-  label,
-  payload
-}) {
-  if (!active || !payload?.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Box, { ...tooltip(), children: [
-    label && /* @__PURE__ */ jsx(Box, { fontWeight: "500", children: label }),
-    /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item, i) => /* @__PURE__ */ jsxs(
-      Box,
-      {
-        alignItems: "center",
-        display: "flex",
-        gap: "8",
-        justifyContent: "space-between",
-        children: [
-          /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                flex: "none",
-                rounded: "xs",
-                size: "10",
-                style: { backgroundColor: item.color }
-              }
-            ),
-            /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: item.name ?? item.dataKey })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { ...value(), children: applyFormatter(item.value, "Number") })
-        ]
-      },
-      i
-    )) })
-  ] });
-}
-
-export { ProteusChartTooltipContent };

package/dist/esm/packages/react/src/proteus-document/ProteusChoice.js

@@ -1,58 +0,0 @@
-"use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Group } from '../group/Group.js';
-import { useRadioGroupContext } from '../radio/RadioGroupContext.js';
-import { Text } from '../text/Text.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { choice, input, addon } from './ProteusChoiceGroup-css.js';
-import { useProteusDocumentContext } from './ProteusDocumentContext.js';
-import { useResolvedProteusProps } from './useResolvedProteusProps.js';
-
-function ProteusChoice({
-  addonBefore,
-  children,
-  className,
-  description,
-  onClick,
-  value,
-  ...props
-}) {
-  const { boxProps, restProps } = extractBoxProps(props);
-  const groupContext = useRadioGroupContext("@optiaxiom/react/ProteusChoice");
-  const { onEvent } = useProteusDocumentContext(
-    "@optiaxiom/react/ProteusChoice"
-  );
-  const resolvedOnClick = useResolvedProteusProps(
-    onClick ?? {}
-  );
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...choice({}, className), ...boxProps, children: /* @__PURE__ */ jsxs("label", { children: [
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input(), children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        checked: groupContext?.value === value,
-        name: groupContext?.name,
-        onChange: (event) => {
-          groupContext?.onChange?.(event);
-          if (onClick) {
-            void onEvent(resolvedOnClick);
-          }
-        },
-        type: "radio",
-        value,
-        ...restProps
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
-      addonBefore && /* @__PURE__ */ jsx(Box, { ...addon(), children: addonBefore }),
-      /* @__PURE__ */ jsxs(Group, { flex: "1", flexDirection: "column", gap: "2", children: [
-        children && /* @__PURE__ */ jsx(Text, { fontWeight: "500", children }),
-        description && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: description })
-      ] })
-    ] })
-  ] }) });
-}
-ProteusChoice.displayName = "@optiaxiom/react/ProteusChoice";
-
-export { ProteusChoice };

package/dist/esm/packages/react/src/proteus-document/ProteusChoiceGroup-css.js

@@ -1,10 +0,0 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D8I-bHqr.css';
-import './../../../../assets/src/proteus-document/ProteusChoiceGroup.css.ts.vanilla-DifGOwv5.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var addon = recipeRuntime({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'_1y6o7eg']});
-var choice = recipeRuntime({base:[{border:'1',color:'fg.default',cursor:'pointer',flexDirection:'column',fontSize:'md',gap:'8',px:'16',py:'12',rounded:'lg',transition:'colors'},'_3ner4b','_1je4m29']});
-var choiceGroup = recipeRuntime({base:{flexDirection:'column',gap:'8'}});
-var input = recipeRuntime({base:'_1y5672t'});
-
-export { addon, choice, choiceGroup, input };

package/dist/esm/packages/react/src/proteus-document/ProteusChoiceGroup.js

@@ -1,39 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { Group } from '../group/Group.js';
-import { RadioGroupProvider } from '../radio/RadioGroupContext.js';
-import { choiceGroup } from './ProteusChoiceGroup-css.js';
-import { useProteusDocumentContext } from './ProteusDocumentContext.js';
-import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
-import { useProteusValue } from './useProteusValue.js';
-
-function ProteusChoiceGroup({
-  children,
-  name
-}) {
-  const { onDataChange, readOnly } = useProteusDocumentContext(
-    "@optiaxiom/react/ProteusChoiceGroup"
-  );
-  const { path: parentPath } = useProteusDocumentPathContext(
-    "@optiaxiom/react/ProteusChoiceGroup"
-  );
-  const resolved = useProteusValue({ path: name ?? "" });
-  const value = name ? String(resolved ?? "") : "";
-  return /* @__PURE__ */ jsx(
-    RadioGroupProvider,
-    {
-      disabled: readOnly ?? false,
-      name,
-      onChange: (event) => {
-        if (name) {
-          onDataChange?.(`${parentPath}/${name}`, event.target.value);
-        }
-      },
-      value,
-      children: /* @__PURE__ */ jsx(Group, { ...choiceGroup(), children })
-    }
-  );
-}
-ProteusChoiceGroup.displayName = "@optiaxiom/react/ProteusChoiceGroup";
-
-export { ProteusChoiceGroup };

package/dist/esm/packages/react/src/proteus-document/ProteusDataTable.js

@@ -1,38 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { createColumnHelper, useReactTable, getCoreRowModel } from '@tanstack/react-table';
-import { get } from 'jsonpointer';
-import { DataTable } from '../data-table/DataTable.js';
-import { DataTableBody } from '../data-table/DataTableBody.js';
-import { applyFormatter } from './getProteusValue.js';
-
-const ProteusDataTable = ({
-  columns,
-  data
-}) => {
-  const tableData = data;
-  const columnHelper = createColumnHelper();
-  const columnDefs = columns.map((col) => {
-    return columnHelper.accessor(
-      (row) => {
-        const value = get(row, "/" + col.accessorKey);
-        return col.format ? String(applyFormatter(value, col.format)) : value;
-      },
-      {
-        header: col.header,
-        id: col.accessorKey,
-        size: col.size
-      }
-    );
-  });
-  const table = useReactTable({
-    columns: columnDefs,
-    data: tableData,
-    enableSorting: false,
-    getCoreRowModel: getCoreRowModel()
-  });
-  return /* @__PURE__ */ jsx(DataTable, { maxH: "md", table, children: /* @__PURE__ */ jsx(DataTableBody, {}) });
-};
-ProteusDataTable.displayName = "@optiaxiom/react/ProteusDataTable";
-
-export { ProteusDataTable };

package/dist/esm/packages/react/src/proteus-document/ProteusDocumentContext.js

@@ -1,6 +0,0 @@
-"use client";
-import { createContext } from '@radix-ui/react-context';
-
-const [ProteusDocumentProvider, useProteusDocumentContext] = createContext("@optiaxiom/react/ProteusDocument");
-
-export { ProteusDocumentProvider, useProteusDocumentContext };

package/dist/esm/packages/react/src/proteus-document/ProteusDocumentPathContext.js

@@ -1,8 +0,0 @@
-"use client";
-import { createContext } from '@radix-ui/react-context';
-
-const [ProteusDocumentPathProvider, useProteusDocumentPathContext] = createContext("@optiaxiom/react/ProteusDocumentPath", {
-  path: ""
-});
-
-export { ProteusDocumentPathProvider, useProteusDocumentPathContext };

package/dist/esm/packages/react/src/proteus-document/ProteusDocumentRenderer.js

@@ -1,34 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { ProteusDocumentShell } from './ProteusDocumentShell.js';
-import { ProteusElement } from './ProteusElement.js';
-import { safeParseDocument } from './schemas.js';
-
-function ProteusDocumentRenderer({
-  element: elementProp,
-  ...props
-}) {
-  const result = safeParseDocument(elementProp);
-  if (!result.success) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    ProteusDocumentShell,
-    {
-      element: {
-        ...result.data,
-        actions: hasValue(result.data.actions) && /* @__PURE__ */ jsx(ProteusElement, { element: result.data.actions }),
-        body: hasValue(result.data.body) && /* @__PURE__ */ jsx(ProteusElement, { element: result.data.body }),
-        subtitle: hasValue(result.data.subtitle) && /* @__PURE__ */ jsx(ProteusElement, { element: result.data.subtitle }),
-        title: hasValue(result.data.title) && /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title })
-      },
-      ...props
-    }
-  );
-}
-ProteusDocumentRenderer.displayName = "@optiaxiom/react/ProteusDocumentRenderer";
-function hasValue(value) {
-  return !!value && (!Array.isArray(value) || value.length > 0);
-}
-
-export { ProteusDocumentRenderer };

package/dist/esm/packages/react/src/proteus-document/ProteusDocumentShell.js

@@ -1,137 +0,0 @@
-"use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { set } from 'jsonpointer';
-import { useState, useRef, useEffect } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Disclosure } from '../disclosure/Disclosure.js';
-import { DisclosureContent } from '../disclosure/DisclosureContent.js';
-import { DisclosureTrigger } from '../disclosure/DisclosureTrigger.js';
-import { Group } from '../group/Group.js';
-import { Heading } from '../heading/Heading.js';
-import { useEffectEvent } from '../hooks/useEffectEvent.js';
-import '../field/FieldContext.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { Text } from '../text/Text.js';
-import { downloadFile } from './downloadFile.js';
-import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
-
-function ProteusDocumentShell({
-  collapsible: collapsibleProp,
-  data = {},
-  defaultOpen = true,
-  element,
-  onDataChange,
-  onMessage,
-  onOpenChange,
-  onToolCall,
-  open: openProp,
-  readOnly = false
-}) {
-  const [valid, setValid] = useState(false);
-  const formRef = useRef(null);
-  useEffect(() => {
-    if (formRef.current) {
-      setValid(formRef.current.checkValidity());
-    }
-  }, []);
-  const [open, setOpen] = useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const collapsible = collapsibleProp && element.appName;
-  const Trigger = collapsible ? DisclosureTrigger : Box;
-  return /* @__PURE__ */ jsx(
-    ProteusDocumentProvider,
-    {
-      data,
-      onDataChange: useEffectEvent((path, value) => {
-        const next = structuredClone(data);
-        set(next, path, value);
-        onDataChange?.(next);
-      }),
-      onEvent: useEffectEvent(async (event) => {
-        if ("tool" in event) {
-          await onToolCall?.(event.tool);
-        } else if ("message" in event) {
-          await onMessage?.(event.message);
-        } else if (event.action === "download") {
-          if (typeof event.url === "string") {
-            await downloadFile(event.url);
-          } else {
-            throw new Error("Invalid URL for download action");
-          }
-        }
-      }),
-      readOnly,
-      valid,
-      children: /* @__PURE__ */ jsxs(
-        Disclosure,
-        {
-          bg: "bg.default",
-          border: "1",
-          borderColor: "border.tertiary",
-          onOpenChange: setOpen,
-          open,
-          p: "16",
-          rounded: "xl",
-          children: [
-            element.appName && /* @__PURE__ */ jsx(Trigger, { py: "0", ...collapsible ? { chevronPosition: "end" } : {}, children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  asChild: true,
-                  bg: element.appIcon ? void 0 : "bg.accent.subtle",
-                  flex: "none",
-                  rounded: "xs",
-                  size: "20",
-                  children: element.appIcon ? /* @__PURE__ */ jsx("img", { alt: "", src: element.appIcon }) : /* @__PURE__ */ jsx("div", {})
-                }
-              ),
-              /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: element.appName }),
-              !open && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", lineClamp: "1", children: element.title })
-            ] }) }),
-            /* @__PURE__ */ jsxs(
-              DisclosureContent,
-              {
-                alignItems: "stretch",
-                display: "flex",
-                flexDirection: "column",
-                gap: "16",
-                pb: "0",
-                pt: element.appName ? "16" : "0",
-                children: [
-                  /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "4", children: [
-                    /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", lineClamp: "2", children: element.title }),
-                    !!element.subtitle && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: element.subtitle })
-                  ] }),
-                  /* @__PURE__ */ jsx(Group, { asChild: true, flexDirection: "column", gap: "16", children: /* @__PURE__ */ jsx(
-                    "form",
-                    {
-                      onChange: (event) => {
-                        const form = event.currentTarget;
-                        setTimeout(() => {
-                          setValid(form.checkValidity());
-                        });
-                      },
-                      ref: formRef,
-                      children: element.body
-                    }
-                  ) }),
-                  element.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-ProteusDocumentShell.displayName = "@optiaxiom/react/ProteusDocumentShell";
-
-export { ProteusDocumentShell };

package/dist/esm/packages/react/src/proteus-document/ProteusElement.js

@@ -1,185 +0,0 @@
-"use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { lazy, Suspense } from 'react';
-import { Avatar } from '../avatar/Avatar.js';
-import '../avatar/AvatarGroup.js';
-import { Badge } from '../badge/Badge.js';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Card } from '../card/Card.js';
-import '../card/CardAction.js';
-import '../card/CardCheckbox.js';
-import '../card/CardFooter.js';
-import { CardHeader } from '../card/CardHeader.js';
-import '../card/CardImage.js';
-import { CardLink } from '../card/CardLink.js';
-import '../card/CardPreview.js';
-import { Field } from '../field/Field.js';
-import '../field/FieldLabel.js';
-import { Group } from '../group/Group.js';
-import { Heading } from '../heading/Heading.js';
-import { IconCalendar } from '../icons/IconCalendar.js';
-import { Link } from '../link/Link.js';
-import { Range } from '../range/Range.js';
-import '../select/Select.js';
-import { SelectContent } from '../select/SelectContent.js';
-import { SelectTrigger } from '../select/SelectTrigger.js';
-import { Separator } from '../separator/Separator.js';
-import { Text } from '../text/Text.js';
-import { Time } from '../time/Time.js';
-import { ProteusAction } from './ProteusAction.js';
-import { ProteusCancelAction } from './ProteusCancelAction.js';
-import { ProteusChoice } from './ProteusChoice.js';
-import { ProteusChoiceGroup } from './ProteusChoiceGroup.js';
-import { ProteusDataTable } from './ProteusDataTable.js';
-import { useProteusDocumentContext } from './ProteusDocumentContext.js';
-import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
-import { ProteusImage } from './ProteusImage.js';
-import { ProteusInput } from './ProteusInput.js';
-import { ProteusMap } from './ProteusMap.js';
-import { ProteusSelect } from './ProteusSelect.js';
-import { ProteusShow } from './ProteusShow.js';
-import { ProteusTextarea } from './ProteusTextarea.js';
-import { ProteusValue } from './ProteusValue.js';
-import { resolveProteusProp } from './resolveProteusProp.js';
-import { safeParseElement } from './schemas.js';
-
-const ProteusChart = lazy(async () => {
-  return {
-    default: (await import('./ProteusChart.js')).ProteusChart
-  };
-});
-const ProteusElement = ({
-  element: elementProp
-}) => {
-  const { data } = useProteusDocumentContext("@optiaxiom/react/ProteusElement");
-  const { path: parentPath } = useProteusDocumentPathContext(
-    "@optiaxiom/react/ProteusElement"
-  );
-  if (!elementProp) {
-    return null;
-  } else if (typeof elementProp === "string" || typeof elementProp === "number") {
-    return elementProp;
-  } else if (Array.isArray(elementProp)) {
-    return /* @__PURE__ */ jsx(Fragment, { children: elementProp.map((element2, index) => /* @__PURE__ */ jsx(ProteusElement, { element: element2 }, index)) });
-  }
-  const result = safeParseElement(elementProp);
-  if (!result.success) {
-    return null;
-  }
-  const element = result.data;
-  const resolve = (obj) => {
-    const { $type: _$type, ...rest } = obj;
-    const resolved = {};
-    for (const [key, value] of Object.entries(rest)) {
-      resolved[key] = resolveProteusProp(value, data, parentPath);
-    }
-    return resolved;
-  };
-  switch (element.$type) {
-    case "Action":
-      return /* @__PURE__ */ jsx(ProteusAction, { ...resolve(element) });
-    case "Avatar":
-      return /* @__PURE__ */ jsx(Avatar, { ...resolve(element) });
-    case "Badge":
-      return /* @__PURE__ */ jsx(Badge, { ...resolve(element) });
-    case "CancelAction":
-      return /* @__PURE__ */ jsx(ProteusCancelAction, { ...resolve(element) });
-    case "Card":
-      return /* @__PURE__ */ jsx(Card, { ...resolve(element) });
-    case "CardHeader":
-      return /* @__PURE__ */ jsx(CardHeader, { ...resolve(element) });
-    case "CardLink":
-      return /* @__PURE__ */ jsx(CardLink, { ...resolve(element) });
-    case "Chart":
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-        ProteusChart,
-        {
-          ...resolve(element)
-        }
-      ) });
-    case "Choice":
-      return /* @__PURE__ */ jsx(
-        ProteusChoice,
-        {
-          ...resolve(element)
-        }
-      );
-    case "ChoiceGroup":
-      return /* @__PURE__ */ jsx(
-        ProteusChoiceGroup,
-        {
-          ...resolve(element)
-        }
-      );
-    case "DataTable":
-      return /* @__PURE__ */ jsx(
-        ProteusDataTable,
-        {
-          ...resolve(element)
-        }
-      );
-    case "Field":
-      return /* @__PURE__ */ jsx(Field, { ...resolve(element) });
-    case "Group":
-      return /* @__PURE__ */ jsx(Group, { ...resolve(element) });
-    case "Heading":
-      return /* @__PURE__ */ jsx(Heading, { ...resolve(element) });
-    case "IconCalendar":
-      return /* @__PURE__ */ jsx(Box, { asChild: true, ...resolve(element), children: /* @__PURE__ */ jsx(IconCalendar, {}) });
-    case "Image":
-      return /* @__PURE__ */ jsx(ProteusImage, { ...resolve(element) });
-    case "Input":
-      return /* @__PURE__ */ jsx(ProteusInput, { ...resolve(element) });
-    case "Link":
-      return /* @__PURE__ */ jsx(Link, { ...resolve(element) });
-    case "Map":
-      return /* @__PURE__ */ jsx(
-        ProteusMap,
-        {
-          ...resolve(element)
-        }
-      );
-    case "Range":
-      return /* @__PURE__ */ jsx(Range, { ...resolve(element) });
-    case "Select":
-      return /* @__PURE__ */ jsx(ProteusSelect, { ...resolve(element) });
-    case "SelectContent":
-      return /* @__PURE__ */ jsx(SelectContent, { ...resolve(element) });
-    case "SelectTrigger":
-      return /* @__PURE__ */ jsx(SelectTrigger, { ...resolve(element) });
-    case "Separator":
-      return /* @__PURE__ */ jsx(Separator, { ...resolve(element) });
-    case "Show":
-      return /* @__PURE__ */ jsx(
-        ProteusShow,
-        {
-          ...resolve(element)
-        }
-      );
-    case "Text":
-      return /* @__PURE__ */ jsx(Text, { ...resolve(element) });
-    case "Textarea":
-      return /* @__PURE__ */ jsx(ProteusTextarea, { ...resolve(element) });
-    case "Time":
-      return /* @__PURE__ */ jsx(
-        Time,
-        {
-          ...resolve(element)
-        }
-      );
-    case "Value":
-      return /* @__PURE__ */ jsx(
-        ProteusValue,
-        {
-          ...element
-        }
-      );
-    default:
-      return null;
-  }
-};
-ProteusElement.displayName = "@optiaxiom/react/ProteusElement";
-
-export { ProteusElement };

package/dist/esm/packages/react/src/proteus-document/ProteusImage.js

@@ -1,104 +0,0 @@
-"use client";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Dialog } from '../dialog/Dialog.js';
-import { DialogBody } from '../dialog/DialogBody.js';
-import { DialogClose } from '../dialog/DialogClose.js';
-import { DialogContent } from '../dialog/DialogContent.js';
-import { DialogFooter } from '../dialog/DialogFooter.js';
-import '../dialog/DialogForm.js';
-import { DialogHeader } from '../dialog/DialogHeader.js';
-import { DialogTrigger } from '../dialog/DialogTrigger.js';
-import { Spinner } from '../spinner/Spinner.js';
-import { downloadFile } from './downloadFile.js';
-
-function ProteusImage(props) {
-  const [open, setOpen] = useState(false);
-  const [isDownloading, setIsDownloading] = useState(false);
-  const [isLoaded, setIsLoaded] = useState(false);
-  const imgRef = useRef(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isLoaded && /* @__PURE__ */ jsx(
-      Box,
-      {
-        alignItems: "center",
-        bg: "bg.tertiary",
-        display: "flex",
-        justifyContent: "center",
-        p: "24",
-        rounded: "md",
-        style: { aspectRatio: "16 / 9" },
-        w: "full",
-        ...props,
-        children: /* @__PURE__ */ jsx(Spinner, {})
-      }
-    ),
-    /* @__PURE__ */ jsxs(Dialog, { onOpenChange: setOpen, open, children: [
-      /* @__PURE__ */ jsx(DialogTrigger, { "aria-label": "Expand", asChild: true, children: /* @__PURE__ */ jsx(Box, { asChild: true, display: isLoaded ? "block" : "none", ...props, children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: props.src,
-          onClick: (event) => {
-            event.preventDefault();
-            setOpen(true);
-          },
-          type: "",
-          children: /* @__PURE__ */ jsx(
-            Box,
-            {
-              asChild: true,
-              objectFit: "cover",
-              overflow: "hidden",
-              rounded: "inherit",
-              children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  alt: props.alt,
-                  onLoad: () => setIsLoaded(true),
-                  ref: imgRef,
-                  src: props.src
-                }
-              )
-            }
-          )
-        }
-      ) }) }),
-      /* @__PURE__ */ jsxs(DialogContent, { size: "lg", children: [
-        /* @__PURE__ */ jsx(DialogHeader, { lineClamp: "1", children: props.alt }),
-        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", children: /* @__PURE__ */ jsx("img", { alt: props.alt, src: props.src }) }) }),
-        /* @__PURE__ */ jsxs(DialogFooter, { children: [
-          /* @__PURE__ */ jsx(DialogClose, { children: "Close" }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "primary",
-              asChild: true,
-              loading: isDownloading,
-              onClick: async (event) => {
-                event.preventDefault();
-                if (isDownloading) {
-                  return;
-                }
-                setIsDownloading(true);
-                try {
-                  await downloadFile(String(props.src));
-                } finally {
-                  setIsDownloading(false);
-                }
-              },
-              children: /* @__PURE__ */ jsx("a", { download: true, href: props.src, children: "Download" })
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
-}
-ProteusImage.displayName = "@optiaxiom/react/ProteusImage";
-
-export { ProteusImage };