@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-FGUESLDX.js

@@ -0,0 +1,161 @@
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-IPPTOL53.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  stackedOverlayZIndex
+} from "./chunk-MFU4Y25U.js";
+
+// src/components/form/CreatableSelect/CreatableSelect.tsx
+import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CREATE_PREFIX = " create:";
+var filterOptions = createFilterOptions();
+var INDENT_STEP = 16;
+var MUI_SIZE = { xs: "small", sm: "small", md: "medium", lg: "medium", xl: "medium" };
+var fieldSx = {
+  "& .MuiOutlinedInput-root": {
+    "& fieldset": {
+      borderColor: (theme) => fieldEdge(theme)
+    },
+    "&:hover fieldset": { borderColor: "primary.main" },
+    "&.Mui-focused fieldset": { borderColor: "primary.main", borderWidth: 2 },
+    "&.Mui-error fieldset": { borderColor: "error.main" }
+  }
+};
+function buildFilter(onCreate, createOptionLabel) {
+  return (available, params) => {
+    const filtered = filterOptions(available, params);
+    const input = params.inputValue.trim();
+    const alreadyExists = available.some(
+      (option) => option.label.toLowerCase() === input.toLowerCase()
+    );
+    if (input && !alreadyExists && onCreate) {
+      filtered.push({
+        value: `${CREATE_PREFIX}${input}`,
+        label: createOptionLabel(input),
+        isCreate: true
+      });
+    }
+    return filtered;
+  };
+}
+function renderIndentedOption(props, option) {
+  const { key, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...rest,
+      style: { paddingLeft: INDENT_STEP * (1 + (option.depth ?? 0)) },
+      children: option.label
+    },
+    key ?? option.value
+  );
+}
+function renderField(params, field) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...params,
+      id: field.inputId,
+      placeholder: field.placeholder,
+      error: Boolean(field.error),
+      size: MUI_SIZE[field.size],
+      sx: fieldSx,
+      inputProps: { ...params.inputProps, "data-testid": `${field.dataTestId}-input` },
+      slotProps: {
+        input: {
+          ...params.InputProps,
+          endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+            field.loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 18 }) : null,
+            params.InputProps.endAdornment
+          ] })
+        }
+      }
+    }
+  );
+}
+function useInternalOptions(options, value) {
+  const items = useMemo(
+    () => options.map(({ value: optionValue, label, depth }) => ({
+      value: optionValue,
+      label,
+      depth
+    })),
+    [options]
+  );
+  const selected = useMemo(
+    () => items.find((option) => option.value === value) ?? null,
+    [items, value]
+  );
+  return { items, selected };
+}
+function handlePick(next, onChange, onCreate) {
+  if (!next) {
+    onChange(null);
+    return;
+  }
+  if (next.isCreate) {
+    void onCreate?.(next.value.slice(CREATE_PREFIX.length));
+    return;
+  }
+  onChange(next.value);
+}
+function CreatableSelect({
+  options,
+  value,
+  onChange,
+  onCreate,
+  label,
+  error,
+  placeholder,
+  createOptionLabel,
+  noOptionsText,
+  disabled = false,
+  loading = false,
+  fullWidth = true,
+  size = "md",
+  dataTestId = "creatable-select"
+}) {
+  const inputId = useId();
+  const { items, selected } = useInternalOptions(options, value);
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth, error: Boolean(error), children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: selected,
+        options: items,
+        disabled,
+        loading,
+        fullWidth,
+        size: MUI_SIZE[size],
+        handleHomeEndKeys: true,
+        selectOnFocus: true,
+        clearOnBlur: true,
+        "data-testid": dataTestId,
+        noOptionsText,
+        slotProps: { popper: { sx: { zIndex: stackedOverlayZIndex } } },
+        getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+        isOptionEqualToValue: (option, current) => option.value === current.value,
+        renderOption: renderIndentedOption,
+        filterOptions: buildFilter(onCreate, createOptionLabel),
+        onChange: (_event, next) => handlePick(next, onChange, onCreate),
+        renderInput: (params) => renderField(params, { inputId, placeholder, error, loading, size, dataTestId })
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${dataTestId}-message`, children: error })
+  ] });
+}
+
+export {
+  CreatableSelect
+};
+//# sourceMappingURL=chunk-FGUESLDX.js.map

package/dist/chunk-FINCVAAR.js

@@ -0,0 +1,183 @@
+import {
+  MoreGroup,
+  fieldClearing
+} from "./chunk-UOPQOBQZ.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-BNNSO4MC.js";
+import {
+  Text
+} from "./chunk-26Z7QWID.js";
+
+// src/components/data-display/DataViews/data-views-more-filters.tsx
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import FilterAltRoundedIcon from "@mui/icons-material/FilterAltRounded";
+import Popover from "@mui/material/Popover/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MoreTrigger({
+  count,
+  appliedCount,
+  compact,
+  onOpen,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const applied = appliedCount > 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      color: "neutral",
+      onClick: (event) => onOpen(event.currentTarget),
+      dataTestId: `${testIdPrefix}-more-filters`,
+      "aria-label": applied ? copy.filters.moreFiltersApplied(count, appliedCount) : copy.filters.moreFilters(count),
+      children: /* @__PURE__ */ jsxs(
+        default2,
+        {
+          component: "span",
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.5,
+            color: applied ? "primary.main" : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsx(FilterAltRoundedIcon, { fontSize: "small" }),
+            !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.filters.moreTriggerLabel }),
+            /* @__PURE__ */ jsx(
+              default2,
+              {
+                component: "span",
+                "data-testid": `${testIdPrefix}-more-badge`,
+                sx: {
+                  px: 0.75,
+                  borderRadius: 5,
+                  bgcolor: applied ? "primary.main" : "action.selected",
+                  color: applied ? "primary.contrastText" : void 0,
+                  fontSize: "0.6875rem",
+                  fontWeight: applied ? 700 : void 0
+                },
+                children: applied ? appliedCount : count
+              }
+            ),
+            !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+          ]
+        }
+      )
+    }
+  );
+}
+function MoreHeading() {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 1.5,
+        py: 1,
+        borderBottom: 1,
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { textTransform: "uppercase", letterSpacing: 0.5, color: "text.disabled" }, children: copy.filters.moreHeading }) }),
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { ml: "auto", color: "text.disabled" }, children: copy.filters.overflowNote }) })
+      ]
+    }
+  );
+}
+function MoreFooter({
+  onClearAll,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(default2, { sx: { px: 1.5, py: 1, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick: onClearAll,
+      "data-testid": `${testIdPrefix}-more-clear-all`,
+      sx: {
+        width: "100%",
+        border: 0,
+        p: 0,
+        bgcolor: "transparent",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.8125rem",
+        textAlign: "left",
+        color: "primary.main",
+        "&:hover": { textDecoration: "underline" }
+      },
+      children: copy.filters.clearAll
+    }
+  ) });
+}
+function MoreFilters({
+  fields,
+  onOpenChange,
+  onClearAll,
+  anyApplied,
+  compact = false,
+  ...rest
+}) {
+  const [anchor, setAnchor] = useState(null);
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MoreTrigger,
+      {
+        count: fields.length,
+        appliedCount: fields.filter(
+          (field) => fieldClearing({
+            field,
+            pills: rest.pills,
+            ranges: rest.ranges,
+            onTogglePill: rest.onTogglePill,
+            onChangeRange: rest.onChangeRange
+          }).applied
+        ).length,
+        compact,
+        onOpen: (element) => {
+          setAnchor(element);
+          onOpenChange?.(true);
+        },
+        testIdPrefix: rest.testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: () => {
+          setAnchor(null);
+          onOpenChange?.(false);
+        },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        slotProps: { paper: { sx: { width: 300, maxWidth: "calc(100vw - 32px)" } } },
+        children: /* @__PURE__ */ jsxs(default2, { "data-testid": `${rest.testIdPrefix}-more-panel`, children: [
+          /* @__PURE__ */ jsx(MoreHeading, {}),
+          /* @__PURE__ */ jsx(default2, { sx: { maxHeight: 320, overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }, children: fields.map((field) => /* @__PURE__ */ jsx(MoreGroup, { field, ...rest }, field.id)) }),
+          anyApplied && /* @__PURE__ */ jsx(MoreFooter, { onClearAll, testIdPrefix: rest.testIdPrefix })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  MoreFilters
+};
+//# sourceMappingURL=chunk-FINCVAAR.js.map

package/dist/chunk-FPWB5ILF.js

@@ -0,0 +1,79 @@
+import {
+  avatarFor,
+  chipStyles,
+  iconWithTestId,
+  makeKeyDownHandler
+} from "./chunk-E46PG577.js";
+import {
+  chipMuiSize
+} from "./chunk-KU6VHNRV.js";
+import {
+  chipRole,
+  isClickable,
+  makeTestId
+} from "./chunk-BF4FYOAR.js";
+
+// src/components/data-display/Chip/Chip.tsx
+import CancelIcon from "@mui/icons-material/Cancel";
+import MuiChip from "@mui/material/Chip/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var muiColorFor = (color) => {
+  if (color === "danger") return "error";
+  return color === "neutral" ? "default" : color;
+};
+var Chip = forwardRef(({
+  label,
+  variant = "filled",
+  size = "md",
+  color = "primary",
+  avatarSrc,
+  avatar,
+  icon,
+  selected,
+  selectable,
+  deletable,
+  disabled,
+  onClick,
+  onDelete,
+  className,
+  dataTestId,
+  // React Native's spelling of the same id; it names the component on both
+  // sides and must not reach the DOM as an attribute.
+  testID,
+  ...props
+}, ref) => {
+  const chipId = testID ?? dataTestId;
+  const testId = makeTestId(chipId);
+  const clickable = isClickable(disabled, onClick, selectable);
+  return /* @__PURE__ */ jsx(
+    MuiChip,
+    {
+      ref,
+      label: /* @__PURE__ */ jsx("span", { "data-testid": testId("label"), children: label }),
+      variant,
+      size: chipMuiSize(size),
+      color: muiColorFor(color),
+      avatar: avatarFor(avatar, avatarSrc),
+      icon: iconWithTestId(icon, testId("icon")),
+      onDelete: deletable ? onDelete : void 0,
+      deleteIcon: deletable ? /* @__PURE__ */ jsx(CancelIcon, { "data-testid": testId("delete") }) : void 0,
+      disabled,
+      clickable,
+      onClick: clickable ? onClick : void 0,
+      onKeyDown: makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete }),
+      className,
+      role: chipRole(selectable, onClick),
+      "aria-selected": selectable ? selected : void 0,
+      "data-testid": chipId || "chip",
+      sx: chipStyles({ variant, selected, clickable, disabled }),
+      ...props
+    }
+  );
+});
+Chip.displayName = "Chip";
+
+export {
+  Chip
+};
+//# sourceMappingURL=chunk-FPWB5ILF.js.map

package/dist/chunk-FPWB5ILF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.tsx"],"sourcesContent":["import CancelIcon from '@mui/icons-material/Cancel';\nimport MuiChip from '@mui/material/Chip/index.js';\nimport { forwardRef } from 'react';\n\nimport { chipRole, isClickable, makeTestId } from './Chip.helpers';\nimport { chipMuiSize } from './Chip.metrics';\nimport {\n  avatarFor,\n  chipStyles,\n  iconWithTestId,\n  makeKeyDownHandler,\n} from './Chip.styles';\nimport type { ChipProps } from './Chip.types';\n\ntype MuiChipColor =\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'default';\n\n/**\n * `danger` and `neutral` are ours; the rest are MUI's own names already.\n *\n * The same boundary translation `Button` performs, and it must stay a\n * translation rather than a cast: a cast is what let `danger` through untouched\n * and had MUI silently fall back to grey.\n *\n * `neutral` maps to `default`, not to `inherit` as it does on a button. A chip's\n * unaccented state is a real palette entry with its own fill; `inherit` would\n * take the surrounding text colour and paint a chip that reads as disabled.\n */\nconst muiColorFor = (color: NonNullable<ChipProps['color']>): MuiChipColor => {\n  if (color === 'danger') return 'error';\n  return color === 'neutral' ? 'default' : color;\n};\n\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(({\n  label,\n  variant = 'filled',\n  size = 'md',\n  color = 'primary',\n  avatarSrc,\n  avatar,\n  icon,\n  selected,\n  selectable,\n  deletable,\n  disabled,\n  onClick,\n  onDelete,\n  className,\n  dataTestId,\n  // React Native's spelling of the same id; it names the component on both\n  // sides and must not reach the DOM as an attribute.\n  testID,\n  ...props\n}, ref) => {\n  const chipId = testID ?? dataTestId;\n  const testId = makeTestId(chipId);\n  const clickable = isClickable(disabled, onClick, selectable);\n\n  return (\n    <MuiChip\n      ref={ref}\n      label={<span data-testid={testId('label')}>{label}</span>}\n      variant={variant}\n      size={chipMuiSize(size)}\n      color={muiColorFor(color)}\n      avatar={avatarFor(avatar, avatarSrc)}\n      icon={iconWithTestId(icon, testId('icon'))}\n      onDelete={deletable ? onDelete : undefined}\n      deleteIcon={deletable ? <CancelIcon data-testid={testId('delete')} /> : undefined}\n      disabled={disabled}\n      clickable={clickable}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete })}\n      className={className}\n      role={chipRole(selectable, onClick)}\n      aria-selected={selectable ? selected : undefined}\n      data-testid={chipId || 'chip'}\n      sx={chipStyles({ variant, selected, clickable, disabled })}\n      {...props}\n    />\n  );\n});\n\nChip.displayName = 'Chip';\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,aAAa;AACpB,SAAS,kBAAkB;AAiEd;AAjCb,IAAM,cAAc,CAAC,UAAyD;AAC5E,MAAI,UAAU,SAAU,QAAO;AAC/B,SAAO,UAAU,YAAY,YAAY;AAC3C;AAEO,IAAM,OAAO,WAAsC,CAAC;AAAA,EACzD;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,WAAW,MAAM;AAChC,QAAM,YAAY,YAAY,UAAU,SAAS,UAAU;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,oBAAC,UAAK,eAAa,OAAO,OAAO,GAAI,iBAAM;AAAA,MAClD;AAAA,MACA,MAAM,YAAY,IAAI;AAAA,MACtB,OAAO,YAAY,KAAK;AAAA,MACxB,QAAQ,UAAU,QAAQ,SAAS;AAAA,MACnC,MAAM,eAAe,MAAM,OAAO,MAAM,CAAC;AAAA,MACzC,UAAU,YAAY,WAAW;AAAA,MACjC,YAAY,YAAY,oBAAC,cAAW,eAAa,OAAO,QAAQ,GAAG,IAAK;AAAA,MACxE;AAAA,MACA;AAAA,MACA,SAAS,YAAY,UAAU;AAAA,MAC/B,WAAW,mBAAmB,EAAE,UAAU,WAAW,YAAY,SAAS,SAAS,CAAC;AAAA,MACpF;AAAA,MACA,MAAM,SAAS,YAAY,OAAO;AAAA,MAClC,iBAAe,aAAa,WAAW;AAAA,MACvC,eAAa,UAAU;AAAA,MACvB,IAAI,WAAW,EAAE,SAAS,UAAU,WAAW,SAAS,CAAC;AAAA,MACxD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;","names":[]}

package/dist/chunk-FRQ4HNGF.js

@@ -0,0 +1,198 @@
+import {
+  imgPassThrough,
+  resolveLazyImageProps,
+  useLazyImage
+} from "./chunk-WR7ELCIL.js";
+import {
+  Skeleton
+} from "./chunk-QS7ZGRNS.js";
+
+// src/components/data-display/LazyImage/LazyImage.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ImageContainer = styled(Box)(() => ({
+  position: "relative",
+  display: "inline-block",
+  overflow: "hidden"
+}));
+var StyledImage = styled("img")(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({
+  display: "block",
+  maxWidth: "100%",
+  height: "auto",
+  opacity: fadeIn ? isLoaded ? 1 : 0 : 1,
+  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : "none"
+}));
+var SpinnerOverlay = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.8)",
+  borderRadius: "50%",
+  padding: theme.spacing(1)
+}));
+var FallbackContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: theme.palette.action.disabledBackground,
+  color: theme.palette.text.secondary,
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  top: 0,
+  left: 0
+}));
+var SkeletonIndicator = ({ props, metrics }) => /* @__PURE__ */ jsx(
+  Skeleton,
+  {
+    variant: "rectangular",
+    width: metrics.width || "100%",
+    height: metrics.height || 200,
+    animation: props.skeletonProps.animation || "pulse",
+    intensity: props.skeletonProps.intensity,
+    borderRadius: props.borderRadius,
+    "data-testid": `${props["data-testid"]}-skeleton`
+  }
+);
+var SpinnerIndicator = ({ props }) => {
+  const theme = useTheme();
+  const { spinnerProps } = props;
+  return /* @__PURE__ */ jsx(SpinnerOverlay, { children: /* @__PURE__ */ jsx(
+    CircularProgress,
+    {
+      size: spinnerProps.size || 40,
+      thickness: spinnerProps.thickness || 4,
+      sx: { color: spinnerProps.color || theme.palette.primary.main },
+      "data-testid": `${props["data-testid"]}-spinner`
+    }
+  ) });
+};
+var PlaceholderIndicator = ({
+  props,
+  metrics,
+  hasSrc
+}) => {
+  if (!props.placeholder || hasSrc) return null;
+  return /* @__PURE__ */ jsx(
+    StyledImage,
+    {
+      src: props.placeholder,
+      alt: `${props.alt} (loading)`,
+      style: metrics,
+      "data-testid": `${props["data-testid"]}-placeholder`
+    }
+  );
+};
+var LoadingIndicator = ({ kind, hasSrc, ...rest }) => {
+  switch (kind) {
+    case "skeleton":
+      return /* @__PURE__ */ jsx(SkeletonIndicator, { ...rest });
+    case "spinner":
+      return /* @__PURE__ */ jsx(SpinnerIndicator, { ...rest });
+    case "placeholder":
+      return /* @__PURE__ */ jsx(PlaceholderIndicator, { ...rest, hasSrc });
+    default:
+      return null;
+  }
+};
+var ErrorFallback = ({ props, metrics }) => {
+  const { alt, fallback, borderRadius } = props;
+  const testId = props["data-testid"];
+  if (!fallback) return null;
+  if (typeof fallback === "string") {
+    return /* @__PURE__ */ jsx(
+      StyledImage,
+      {
+        src: fallback,
+        alt: `${alt} (fallback)`,
+        style: metrics,
+        fadeIn: false,
+        isLoaded: true,
+        "data-testid": `${testId}-fallback`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FallbackContainer,
+    {
+      sx: { width: metrics.width, height: metrics.height, borderRadius },
+      "data-testid": `${testId}-fallback`,
+      children: fallback
+    }
+  );
+};
+var LazyImage = React.memo(function LazyImage2(rawProps) {
+  const props = resolveLazyImageProps(rawProps);
+  const {
+    state,
+    containerRef,
+    effectiveLoadingState,
+    handleImageLoad,
+    handleImageError,
+    showImage,
+    showLoading
+  } = useLazyImage(props);
+  const { width, height, borderRadius, alt } = props;
+  const testId = props["data-testid"];
+  const metrics = {
+    width,
+    height,
+    objectFit: props.objectFit,
+    objectPosition: props.objectPosition,
+    borderRadius
+  };
+  return /* @__PURE__ */ jsxs(
+    ImageContainer,
+    {
+      ref: containerRef,
+      className: props.className,
+      sx: { width: width || "auto", height: height || "auto", borderRadius },
+      "data-testid": testId,
+      children: [
+        showLoading && /* @__PURE__ */ jsx(
+          LoadingIndicator,
+          {
+            kind: effectiveLoadingState,
+            props,
+            metrics,
+            hasSrc: Boolean(state.currentSrc)
+          }
+        ),
+        showImage && /* @__PURE__ */ jsx(
+          StyledImage,
+          {
+            src: state.currentSrc || void 0,
+            alt,
+            onLoad: handleImageLoad,
+            onError: handleImageError,
+            fadeIn: props.fadeIn,
+            fadeInDuration: props.fadeInDuration,
+            isLoaded: !state.isLoading,
+            decoding: props.decoding,
+            loading: props.lazy ? "lazy" : props.loading,
+            style: { ...metrics, ...props.sx },
+            "aria-label": props["aria-label"] || alt,
+            "aria-describedby": props["aria-describedby"],
+            role: props.role,
+            "data-testid": `${testId}-img`,
+            ...imgPassThrough(props)
+          }
+        ),
+        state.hasError && /* @__PURE__ */ jsx(ErrorFallback, { props, metrics })
+      ]
+    }
+  );
+});
+LazyImage.displayName = "LazyImage";
+
+export {
+  LazyImage
+};
+//# sourceMappingURL=chunk-FRQ4HNGF.js.map