@startdownnotez404/ui 1.3.5 → 1.3.6

package/dist/autocomplete.js

@@ -644,7 +644,7 @@ var init_MuiIcon = __esm({
 });
 
 // src/components/elemental/Autocomplete/src/GitHubPicker/theme.ts
-var import_styles2, gitHubPickerRootStyle, gitHubPickerRootSx, PickerField, OptionBox;
+var import_styles2, gitHubPickerRootStyle, gitHubPickerRootSx, pickerFieldQuietShadow, PickerField, OptionBox;
 var init_theme5 = __esm({
   "src/components/elemental/Autocomplete/src/GitHubPicker/theme.ts"() {
     "use strict";
@@ -660,8 +660,9 @@ var init_theme5 = __esm({
       "--picker-text": "var(--mui-palette-text-primary)",
       "--picker-text-secondary": "var(--mui-palette-text-secondary)",
       "--picker-text-disabled": "var(--mui-palette-text-disabled)",
-      "--picker-surface": "color-mix(in lab, var(--mui-palette-common-black), transparent 68%)",
-      "--picker-paper-bg": "color-mix(in lab, var(--mui-palette-background-paper), transparent 30%)",
+      // Night: lift above near-black canvas (Google search-bar mid-grey glass).
+      "--picker-surface": "color-mix(in lab, var(--mui-palette-common-white), transparent 87%)",
+      "--picker-paper-bg": "color-mix(in lab, var(--mui-palette-common-white), transparent 84%)",
       "--picker-hover-bg": "var(--mui-palette-background-hover-1)",
       "--picker-chip-bg": "color-mix(in lab, var(--mui-palette-secondary-main), transparent 88%)",
       "--picker-chip-border": "color-mix(in lab, var(--mui-palette-common-white), transparent 94%)",
@@ -714,6 +715,10 @@ var init_theme5 = __esm({
     gitHubPickerRootSx = {
       ...gitHubPickerRootStyle
     };
+    pickerFieldQuietShadow = [
+      "inset 0 1px 0 var(--picker-highlight)",
+      "0 1px 2px color-mix(in srgb, var(--mui-palette-common-black), transparent 82%)"
+    ].join(", ");
     PickerField = (0, import_styles2.styled)(import_Box.default, {
       shouldForwardProp: (prop) => prop !== "open" && prop !== "error" && prop !== "disabled"
     })({
@@ -724,42 +729,44 @@ var init_theme5 = __esm({
       display: "flex",
       flexDirection: "column",
       gap: 8,
-      padding: "12px 14px 14px",
+      padding: "10px 12px 12px",
       borderRadius: 12,
       border: "1px solid var(--picker-field-border)",
-      backgroundColor: "var(--picker-surface)",
+      backgroundColor: "var(--picker-field-bg, var(--picker-surface))",
       backgroundImage: "var(--picker-sheen)",
-      backdropFilter: "saturate(1.2) blur(12px)",
-      WebkitBackdropFilter: "saturate(1.2) blur(12px)",
+      backdropFilter: "var(--picker-glass)",
+      WebkitBackdropFilter: "var(--picker-glass)",
       cursor: "var(--picker-field-cursor)",
       outline: "none",
       boxShadow: "var(--picker-field-shadow)",
-      transition: "border-color 160ms ease, box-shadow 160ms ease",
+      transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
       "& *": {
         cursor: "inherit"
       },
       "--picker-field-border": "var(--picker-border)",
-      "--picker-field-shadow": "inset 0 1px 0 color-mix(in lab, var(--mui-palette-common-white), transparent 88%), inset 0 0 0 1px color-mix(in lab, var(--mui-palette-common-white), transparent 91%), 0 0 20px color-mix(in lab, var(--mui-palette-primary-emphasis), transparent 93%), 0 9px 22px color-mix(in srgb, var(--mui-palette-common-black), transparent 77%)",
+      "--picker-field-shadow": pickerFieldQuietShadow,
       "--picker-field-cursor": "pointer",
       "&:hover": {
-        "--picker-field-border": "color-mix(in lab, var(--mui-palette-common-white), transparent 92%)"
+        "--picker-field-border": "var(--picker-border-hover)"
       },
       "&:focus-visible": {
-        "--picker-field-border": "color-mix(in lab, var(--mui-palette-common-white), transparent 92%)",
-        "--picker-field-shadow": "inset 0 1px 0 color-mix(in lab, var(--mui-palette-common-white), transparent 88%), inset 0 0 0 1px color-mix(in lab, var(--mui-palette-common-white), transparent 91%), 0 0 20px color-mix(in lab, var(--mui-palette-primary-emphasis), transparent 93%), 0 9px 22px color-mix(in srgb, var(--mui-palette-common-black), transparent 77%)"
+        "--picker-field-border": "color-mix(in lab, var(--mui-palette-text-secondary), transparent 35%)",
+        "--picker-field-shadow": pickerFieldQuietShadow
       },
       variants: [
         {
           props: { open: true },
           style: {
-            "--picker-field-border": "color-mix(in lab, var(--mui-palette-common-white), transparent 92%)",
-            "--picker-field-shadow": "inset 0 1px 0 color-mix(in lab, var(--mui-palette-common-white), transparent 88%), inset 0 0 0 1px color-mix(in lab, var(--mui-palette-common-white), transparent 91%), 0 0 20px color-mix(in lab, var(--mui-palette-primary-emphasis), transparent 93%), 0 9px 22px color-mix(in srgb, var(--mui-palette-common-black), transparent 77%)"
+            "--picker-field-border": "color-mix(in lab, var(--mui-palette-text-secondary), transparent 35%)",
+            "--picker-field-shadow": pickerFieldQuietShadow
           }
         },
         {
           props: { error: true },
           style: {
-            "--picker-field-border": "var(--picker-error)"
+            // Soft / quiet error — 1px muted mix + light wash (FileUpload language).
+            "--picker-field-border": "color-mix(in srgb, var(--picker-error) 55%, var(--picker-border))",
+            "--picker-field-bg": "color-mix(in srgb, var(--picker-error) 8%, var(--picker-surface))"
           }
         },
         {
@@ -1298,6 +1305,10 @@ var init_popperTheme = __esm({
       }
     };
     pickerGroupLabelSx = {
+      position: "sticky",
+      // Align with Autocomplete: quiet solid fill, Paper top radius, no backdrop-filter.
+      top: -8,
+      zIndex: 2,
       px: 1.75,
       pt: 1.25,
       pb: 0.5,
@@ -1306,7 +1317,16 @@ var init_popperTheme = __esm({
       letterSpacing: "0.08em",
       textTransform: "uppercase",
       lineHeight: 1.4,
-      color: "var(--picker-text-secondary)"
+      color: "var(--picker-text-secondary)",
+      // Quieter than opaque paper — closer to glass paper; still covers scroll. No blur.
+      background: "color-mix(in lab, var(--mui-palette-background-paper), var(--picker-paper-bg) 36%)",
+      backgroundColor: "color-mix(in lab, var(--mui-palette-background-paper), var(--picker-paper-bg) 36%)",
+      backdropFilter: "none",
+      WebkitBackdropFilter: "none",
+      borderTopLeftRadius: 14,
+      borderTopRightRadius: 14,
+      borderBottom: "1px solid color-mix(in lab, var(--picker-border), transparent 28%)",
+      boxShadow: "none"
     };
   }
 });
@@ -1675,8 +1695,16 @@ var init_PopperMenu = __esm({
 // src/components/elemental/Autocomplete/index.ts
 var Autocomplete_exports = {};
 __export(Autocomplete_exports, {
+  Autocomplete: () => Autocomplete_default,
   GitHubPicker: () => GitHubPicker,
-  OptionClass: () => Option
+  OptionClass: () => Option,
+  autocompleteChipSx: () => autocompleteChipSx,
+  autocompleteGlassVars: () => autocompleteGlassVars,
+  autocompleteGroupLabelSx: () => autocompleteGroupLabelSx,
+  autocompleteListboxSx: () => autocompleteListboxSx,
+  autocompletePaperSx: () => autocompletePaperSx,
+  autocompleteRootSx: () => autocompleteRootSx,
+  autocompleteTheme: () => autocompleteTheme
 });
 module.exports = __toCommonJS(Autocomplete_exports);
 
@@ -1881,9 +1909,10 @@ function FieldTrigger(p) {
       "aria-controls": open ? menuId : void 0,
       "aria-disabled": disabled,
       style: {
-        "--picker-border-emphasis": accent,
-        "--picker-check": accent,
-        "--picker-focus-ring": `color-mix(in lab, ${accent}, transparent 82%)`
+        // On error, keep accent readable but quieter than full error-main chrome.
+        "--picker-border-emphasis": error ? "color-mix(in srgb, var(--picker-error) 55%, var(--picker-border))" : accent,
+        "--picker-check": error ? "color-mix(in srgb, var(--picker-error) 72%, var(--picker-text-secondary))" : accent,
+        "--picker-focus-ring": error ? "color-mix(in lab, var(--picker-error), transparent 86%)" : `color-mix(in lab, ${accent}, transparent 82%)`
       },
       onClick: (event) => onToggle(event.currentTarget),
       onKeyDown: (event) => {
@@ -2044,9 +2073,591 @@ function DisplaySelected(p) {
 
 // src/components/elemental/Autocomplete/src/GitHubPicker/index.ts
 init_utils();
+
+// src/components/elemental/Autocomplete/src/Autocomplete/Autocomplete.tsx
+var import_react5 = require("react");
+var import_Autocomplete4 = __toESM(require("@mui/material/Autocomplete"));
+
+// src/components/elemental/Input/src/TextField/index.ts
+var import_TextField = __toESM(require("@mui/material/TextField"));
+
+// src/components/elemental/Autocomplete/src/Autocomplete/Autocomplete.tsx
+init_Chip3();
+init_Box();
+init_MuiIcon();
+init_Typography2();
+
+// src/components/elemental/Skeleton/MuiSkeleton/index.ts
+var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
+
+// src/components/elemental/Skeleton/SoftSkeleton/SoftSkeleton.tsx
+init_Box();
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var softShimmerSx = {
+  bgcolor: "color-mix(in srgb, var(--mui-palette-border-1) 55%, transparent)",
+  borderRadius: "8px",
+  "&.MuiSkeleton-wave::after": {
+    background: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--mui-palette-background-paper) 55%, transparent), transparent)"
+  }
+};
+function SoftSkeleton({
+  preset = "text",
+  lines = 3,
+  sx
+}) {
+  if (preset === "card") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_Box.default,
+      {
+        "data-testid": "soft-skeleton",
+        "data-preset": "card",
+        sx: [
+          {
+            p: 2,
+            borderRadius: "16px",
+            border: "1px solid var(--mui-palette-border-1)",
+            backgroundColor: "color-mix(in srgb, var(--mui-palette-background-paper) 80%, transparent)",
+            boxSizing: "border-box"
+          },
+          ...Array.isArray(sx) ? sx : sx ? [sx] : []
+        ],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_Skeleton.default,
+            {
+              variant: "rounded",
+              animation: "wave",
+              height: 120,
+              sx: { ...softShimmerSx, mb: 1.5, borderRadius: "12px" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Skeleton.default, { variant: "text", animation: "wave", width: "60%", sx: softShimmerSx }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Skeleton.default, { variant: "text", animation: "wave", width: "90%", sx: softShimmerSx }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Skeleton.default, { variant: "text", animation: "wave", width: "40%", sx: softShimmerSx })
+        ]
+      }
+    );
+  }
+  if (preset === "row") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_Stack.default,
+      {
+        "data-testid": "soft-skeleton",
+        "data-preset": "row",
+        spacing: 1,
+        sx,
+        children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          import_Box.default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              p: 1,
+              borderRadius: "12px",
+              border: "1px solid var(--mui-palette-border-1)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_Skeleton.default,
+                {
+                  variant: "circular",
+                  animation: "wave",
+                  width: 36,
+                  height: 36,
+                  sx: softShimmerSx
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box.default, { sx: { flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Skeleton.default, { variant: "text", animation: "wave", width: "45%", sx: softShimmerSx }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Skeleton.default, { variant: "text", animation: "wave", width: "75%", sx: softShimmerSx })
+              ] })
+            ]
+          },
+          i
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_Stack.default,
+    {
+      "data-testid": "soft-skeleton",
+      "data-preset": "text",
+      spacing: 0.75,
+      sx,
+      children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_Skeleton.default,
+        {
+          variant: "rounded",
+          animation: "wave",
+          height: 10,
+          width: `${100 - i % 3 * 18}%`,
+          sx: softShimmerSx
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/components/elemental/Autocomplete/src/Autocomplete/Autocomplete.tsx
+init_func();
+
+// src/components/elemental/Autocomplete/src/Autocomplete/theme.ts
+var import_Autocomplete3 = require("@mui/material/Autocomplete");
+init_theme5();
+var autocompleteGlassVars = {
+  ...gitHubPickerRootStyle
+};
+var autocompleteGroupLabelSx = {
+  position: "sticky",
+  top: -8,
+  zIndex: 2,
+  lineHeight: "28px",
+  // Flush listbox horizontal padding (4px) so top radius meets Paper edges.
+  margin: 0,
+  mx: "-4px",
+  fontSize: 11,
+  fontWeight: 600,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  color: "var(--picker-text-secondary)",
+  // Quieter than opaque paper — closer to glass paper; still covers scroll. No blur.
+  background: "color-mix(in lab, var(--mui-palette-background-paper), var(--picker-paper-bg) 36%)",
+  backgroundColor: "color-mix(in lab, var(--mui-palette-background-paper), var(--picker-paper-bg) 36%)",
+  backdropFilter: "none",
+  WebkitBackdropFilter: "none",
+  borderTopLeftRadius: 14,
+  borderTopRightRadius: 14,
+  borderBottom: "1px solid color-mix(in lab, var(--picker-border), transparent 28%)",
+  boxShadow: "none",
+  // Was 1.5 + listbox 4px ≈ 16px inset; keep text after flush.
+  px: 2,
+  py: 0
+};
+var autocompleteRootSx = {
+  ...autocompleteGlassVars,
+  width: "100%",
+  [`& .${import_Autocomplete3.autocompleteClasses.root}`]: {
+    width: "100%"
+  },
+  // Outlined like TextField / Select / Date / Time — quiet 1px border, no elevation shadow.
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "12px",
+    backgroundColor: "transparent",
+    backdropFilter: "none",
+    WebkitBackdropFilter: "none",
+    boxShadow: "none",
+    transition: "border-color 160ms ease",
+    "& fieldset": {
+      borderWidth: "1px",
+      // Match sibling outlined inputs (TextField / Select theme).
+      borderColor: "var(--mui-palette-text-secondary)"
+    },
+    "&:hover fieldset": {
+      borderWidth: "1px",
+      borderColor: "var(--mui-palette-text-secondary)"
+    },
+    "&.Mui-focused fieldset": {
+      borderWidth: "1px",
+      borderColor: "var(--mui-palette-text-secondary)"
+    },
+    "&.Mui-error fieldset": {
+      borderWidth: "1px",
+      // Quiet error — muted mix, not a loud thick outline.
+      borderColor: "color-mix(in srgb, var(--picker-error) 55%, var(--mui-palette-text-secondary))"
+    },
+    "&.Mui-disabled": {
+      opacity: 0.58
+    }
+  },
+  "& .MuiAutocomplete-tag": {
+    margin: "2px"
+  },
+  // Quiet gap between clear X and popup indicator (avoid flush teal icons).
+  // MUI defaults marginRight: -2 on both indicators — that cancels a 4px gap.
+  [`& .${import_Autocomplete3.autocompleteClasses.endAdornment}`]: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  [`& .${import_Autocomplete3.autocompleteClasses.clearIndicator}, & .${import_Autocomplete3.autocompleteClasses.popupIndicator}`]: {
+    marginRight: "0 !important"
+  }
+};
+var autocompletePaperSx = {
+  ...autocompleteGlassVars,
+  borderRadius: "14px",
+  border: "1px solid var(--picker-border)",
+  backgroundColor: "var(--picker-paper-bg)",
+  backgroundImage: "none",
+  boxShadow: "var(--picker-shadow)",
+  backdropFilter: "var(--picker-glass)",
+  WebkitBackdropFilter: "var(--picker-glass)",
+  mt: 0.5,
+  overflow: "hidden"
+};
+var autocompleteListboxSx = {
+  ...autocompleteGlassVars,
+  // Keep existing quiet padding — no extra padding-top gutter / no margin-top: -28px.
+  padding: "6px 4px",
+  maxHeight: 280,
+  [`& .${import_Autocomplete3.autocompleteClasses.option}`]: {
+    margin: "2px 6px",
+    borderRadius: "10px",
+    minHeight: 0,
+    padding: "8px 10px",
+    '&[aria-selected="true"]': {
+      backgroundColor: "var(--picker-focus-soft)",
+      boxShadow: "inset 0 1px 0 var(--picker-highlight)"
+    },
+    "&.Mui-focused, &:hover": {
+      backgroundColor: "var(--picker-hover-bg)"
+    }
+  },
+  // Stock AutocompleteGroupLabel — beat paper fill via listbox descendant + theme.
+  [`& .${import_Autocomplete3.autocompleteClasses.groupLabel}`]: {
+    ...autocompleteGroupLabelSx
+  },
+  [`& .${import_Autocomplete3.autocompleteClasses.groupUl}`]: {
+    padding: 0,
+    margin: 0
+  }
+};
+var autocompleteChipSx = {
+  ...autocompleteGlassVars,
+  height: 24,
+  borderRadius: "999px",
+  backgroundColor: "var(--picker-chip-bg)",
+  border: "1px solid var(--picker-chip-border)",
+  boxShadow: "var(--picker-chip-shadow)",
+  "& .MuiChip-label": {
+    px: 1,
+    fontSize: 12
+  },
+  "& .MuiChip-deleteIcon": {
+    fontSize: 16,
+    color: "var(--picker-text-secondary)",
+    "&:hover": {
+      color: "var(--picker-text)"
+    }
+  }
+};
+var autocompleteEmptySx = {
+  ...autocompleteGlassVars,
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  px: 1.75,
+  py: 1.25,
+  minHeight: 0,
+  border: "none",
+  background: "transparent",
+  boxShadow: "none"
+};
+var autocompleteLoadingSx = {
+  px: 1.5,
+  py: 1.25
+};
+var autocompleteTheme = {
+  defaultProps: {
+    size: "small"
+  },
+  styleOverrides: {
+    root: {
+      [`& .MuiOutlinedInput-root`]: {
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderWidth: "1px"
+        }
+      }
+    },
+    paper: {
+      borderRadius: "14px"
+    },
+    // Stock GroupLabel slot: quiet solid fill, Paper top radius, no backdrop-filter; keep MUI top: -8.
+    groupLabel: {
+      position: "sticky",
+      top: -8,
+      zIndex: 2,
+      lineHeight: "28px",
+      margin: 0,
+      mx: "-4px",
+      background: "color-mix(in lab, var(--mui-palette-background-paper), var(--picker-paper-bg) 36%)",
+      backgroundColor: "color-mix(in lab, var(--mui-palette-background-paper), var(--picker-paper-bg) 36%)",
+      backdropFilter: "none",
+      WebkitBackdropFilter: "none",
+      borderTopLeftRadius: 14,
+      borderTopRightRadius: 14,
+      borderBottom: "1px solid color-mix(in lab, var(--picker-border), transparent 28%)",
+      boxShadow: "none",
+      px: 2
+    }
+  }
+};
+
+// src/components/elemental/Autocomplete/src/Autocomplete/Autocomplete.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function isOption(value) {
+  return typeof value === "object" && value !== null && "id" in value && "label" in value;
+}
+function resolveItem(item, options, freeSolo) {
+  if (isOption(item)) return item;
+  const found = options.find((o) => o.id === item || o.label === item);
+  if (found) return found;
+  return freeSolo ? item : { id: item, label: item };
+}
+function resolveValue(value, options, multiple, freeSolo) {
+  if (value == null) return multiple ? [] : null;
+  if (multiple) {
+    const arr = Array.isArray(value) ? value : [value];
+    return arr.map((item) => resolveItem(item, options, freeSolo));
+  }
+  if (Array.isArray(value)) {
+    const first = value[0];
+    return first == null ? null : resolveItem(first, options, freeSolo);
+  }
+  return resolveItem(value, options, freeSolo);
+}
+function normalizeChanged(raw, multiple) {
+  if (multiple) {
+    if (raw == null) return [];
+    return Array.isArray(raw) ? raw : [raw];
+  }
+  if (Array.isArray(raw)) return raw[0] ?? null;
+  return raw;
+}
+var Autocomplete2 = (0, import_react5.forwardRef)(function Autocomplete3({
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  freeSolo = false,
+  multiple = false,
+  loading = false,
+  label,
+  name,
+  helperText,
+  error = false,
+  placeholder,
+  required = false,
+  disabled = false,
+  size = "small",
+  fullWidth = true,
+  emptyTitle = "No options",
+  emptyDescription,
+  loadingLines = 3,
+  TextFieldProps,
+  sx,
+  groupBy,
+  getOptionLabel: getOptionLabelProp,
+  isOptionEqualToValue: isOptionEqualToValueProp,
+  filterOptions,
+  onInputChange,
+  inputValue,
+  disableClearable,
+  readOnly,
+  autoHighlight = true,
+  openOnFocus,
+  slotProps,
+  ...rest
+}, ref) {
+  const resolved = (0, import_react5.useMemo)(
+    () => resolveValue(value, options, multiple, freeSolo),
+    [value, options, multiple, freeSolo]
+  );
+  const resolvedDefault = (0, import_react5.useMemo)(
+    () => defaultValue === void 0 ? void 0 : resolveValue(defaultValue, options, multiple, freeSolo),
+    [defaultValue, options, multiple, freeSolo]
+  );
+  const getOptionLabel = (0, import_react5.useCallback)(
+    (option) => {
+      if (typeof option === "string") return option;
+      if (getOptionLabelProp) return getOptionLabelProp(option);
+      return option.label ?? option.id ?? "";
+    },
+    [getOptionLabelProp]
+  );
+  const isOptionEqualToValue = (0, import_react5.useCallback)(
+    (option, val) => {
+      if (isOptionEqualToValueProp && isOption(val)) {
+        return isOptionEqualToValueProp(option, val);
+      }
+      if (typeof val === "string") return option.id === val || option.label === val;
+      return option.id === val.id;
+    },
+    [isOptionEqualToValueProp]
+  );
+  const handleChange = (0, import_react5.useCallback)(
+    (_event, newValue, reason) => {
+      onChange?.(normalizeChanged(newValue, multiple), reason);
+    },
+    [onChange, multiple]
+  );
+  const renderTags = (0, import_react5.useCallback)(
+    (tagValue, getTagProps) => tagValue.map((option, index) => {
+      const { key, ...tagProps } = getTagProps({ index });
+      const chipLabel = typeof option === "string" ? option : option.label;
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Chip,
+        {
+          size: "small",
+          label: chipLabel,
+          ...tagProps,
+          sx: autocompleteChipSx
+        },
+        key
+      );
+    }),
+    []
+  );
+  const renderOption = (0, import_react5.useCallback)(
+    (props, option) => {
+      const { key, ...liProps } = props;
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { ...liProps, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Box.default, { sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Typography.default, { variant: "body2", sx: { m: 0, fontWeight: 500, lineHeight: 1.3 }, children: option.label }),
+        option.description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_Typography.default,
+          {
+            variant: "caption",
+            sx: { m: 0, color: "var(--picker-text-secondary)", lineHeight: 1.3 },
+            children: option.description
+          }
+        ) : null
+      ] }) }, key ?? option.id);
+    },
+    []
+  );
+  const noOptionsNode = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Box.default, { sx: autocompleteEmptySx, role: "status", "data-testid": "autocomplete-empty", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_Box.default,
+      {
+        "aria-hidden": true,
+        sx: {
+          display: "flex",
+          color: "var(--picker-text-secondary)",
+          opacity: 0.72,
+          lineHeight: 1
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_InboxOutlined.default, { sx: { fontSize: 18 } })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Box.default, { sx: { display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_Typography.default,
+        {
+          variant: "body2",
+          sx: {
+            m: 0,
+            fontSize: "0.8125rem",
+            fontWeight: 500,
+            color: "var(--picker-text-secondary)",
+            lineHeight: 1.35
+          },
+          children: emptyTitle
+        }
+      ),
+      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_Typography.default,
+        {
+          variant: "caption",
+          sx: {
+            m: 0,
+            color: "var(--picker-text-secondary)",
+            opacity: 0.85,
+            lineHeight: 1.35
+          },
+          children: emptyDescription
+        }
+      ) : null
+    ] })
+  ] });
+  const loadingNode = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Box.default, { sx: autocompleteLoadingSx, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SoftSkeleton, { preset: "text", lines: loadingLines }) });
+  const hasGroups = options.some((o) => Boolean(o.group));
+  const paperSlot = slotProps?.paper;
+  const listboxSlot = slotProps?.listbox;
+  const clearSlot = slotProps?.clearIndicator;
+  const popupSlot = slotProps?.popupIndicator;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Box.default, { ref, sx: mergeSx(autocompleteRootSx, sx), "data-testid": "autocomplete", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_Autocomplete4.default,
+    {
+      options,
+      value: resolved,
+      defaultValue: resolvedDefault,
+      onChange: handleChange,
+      freeSolo,
+      multiple,
+      loading,
+      disabled,
+      size,
+      fullWidth,
+      autoHighlight,
+      openOnFocus,
+      disableClearable,
+      readOnly,
+      filterOptions,
+      onInputChange,
+      inputValue,
+      groupBy: groupBy ?? (hasGroups ? (option) => option.group ?? "" : void 0),
+      getOptionLabel,
+      isOptionEqualToValue,
+      getOptionDisabled: (option) => Boolean(option.disabled),
+      renderTags: multiple ? renderTags : void 0,
+      renderOption,
+      noOptionsText: noOptionsNode,
+      loadingText: loadingNode,
+      slotProps: {
+        ...slotProps,
+        paper: {
+          ...paperSlot,
+          sx: mergeSx(autocompletePaperSx, paperSlot?.sx)
+        },
+        listbox: {
+          ...listboxSlot,
+          sx: mergeSx(autocompleteListboxSx, listboxSlot?.sx)
+        },
+        // Beat AutocompleteClearIndicator / PopupIndicator marginRight: -2.
+        clearIndicator: {
+          ...clearSlot,
+          sx: mergeSx({ marginRight: 0 }, clearSlot?.sx)
+        },
+        popupIndicator: {
+          ...popupSlot,
+          sx: mergeSx({ marginRight: 0 }, popupSlot?.sx)
+        }
+      },
+      renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_TextField.default,
+        {
+          ...params,
+          ...TextFieldProps,
+          name,
+          label,
+          placeholder,
+          error,
+          helperText,
+          required,
+          disabled,
+          size,
+          fullWidth
+        }
+      ),
+      ...rest
+    }
+  ) });
+});
+var Autocomplete_default = Autocomplete2;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Autocomplete,
   GitHubPicker,
-  OptionClass
+  OptionClass,
+  autocompleteChipSx,
+  autocompleteGlassVars,
+  autocompleteGroupLabelSx,
+  autocompleteListboxSx,
+  autocompletePaperSx,
+  autocompleteRootSx,
+  autocompleteTheme
 });
 //# sourceMappingURL=autocomplete.js.map