@heymantle/litho 0.0.1

package/dist/cjs/components/AppProvider.js

@@ -0,0 +1,245 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get DarkModeContext () {
+        return DarkModeContext;
+    },
+    get FormContext () {
+        return FormContext;
+    },
+    get FrameContext () {
+        return FrameContext;
+    },
+    get default () {
+        return _default;
+    },
+    get useDarkMode () {
+        return useDarkMode;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var DarkModeContext = /*#__PURE__*/ (0, _react.createContext)(null);
+var useDarkMode = function() {
+    return (0, _react.useContext)(DarkModeContext);
+};
+var FrameContext = /*#__PURE__*/ (0, _react.createContext)({
+    embedded: false,
+    paneIsOpen: false,
+    setPaneIsOpen: function() {},
+    modalIsOpen: false,
+    setModalIsOpen: function() {},
+    showMobileNavigation: false,
+    contentIsInIframe: false,
+    contentIsFullPage: false,
+    setShowMobileNavigation: function() {},
+    setContentIsInIframe: function() {},
+    setContentIsFullPage: function() {}
+});
+var FormContext = /*#__PURE__*/ (0, _react.createContext)(null);
+var screenSizes = typeof window !== "undefined" ? {
+    sm: parseInt(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-sm"), 10),
+    md: parseInt(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-md"), 10),
+    lg: parseInt(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-lg"), 10),
+    xl: parseInt(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-xl"), 10),
+    "2xl": parseInt(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-2xl"), 10)
+} : {};
+/**
+ * Provider component for managing global application state.
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - The child components.
+ * @param {boolean} props.embedded - Whether the app is embedded.
+ * @param {boolean} props.darkModeAvailable - Whether dark mode is enabled.
+ * @param {string} props.darkModeStorageKey - Local storage key for dark mode preference.
+ * @param {(darkMode: boolean) => void} props.onDarkModeChange - Callback when dark mode changes.
+ * @returns {JSX.Element}
+ */ function AppProvider(param) {
+    var children = param.children, _param_embedded = param.embedded, embedded = _param_embedded === void 0 ? false : _param_embedded, tmp = param.darkModeAvailable, _darkModeAvailable = tmp === void 0 ? false : tmp, darkModeStorageKey = param.darkModeStorageKey, onDarkModeChange = param.onDarkModeChange;
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), showMobileNavigation = _useState[0], setShowMobileNavigation = _useState[1];
+    var _useState1 = _sliced_to_array((0, _react.useState)(_darkModeAvailable), 2), darkModeAvailable = _useState1[0], setDarkModeAvailable = _useState1[1];
+    var _useState2 = _sliced_to_array((0, _react.useState)(false), 2), contentIsInIframe = _useState2[0], setContentIsInIframe = _useState2[1];
+    var _useState3 = _sliced_to_array((0, _react.useState)(false), 2), contentIsFullPage = _useState3[0], setContentIsFullPage = _useState3[1];
+    var _useState4 = _sliced_to_array((0, _react.useState)(false), 2), modalIsOpen = _useState4[0], setModalIsOpen = _useState4[1];
+    var _useState5 = _sliced_to_array((0, _react.useState)(false), 2), paneIsOpen = _useState5[0], setPaneIsOpen = _useState5[1];
+    var _useState6 = _sliced_to_array((0, _react.useState)(false), 2), showGlobalContextualSaveBar = _useState6[0], setShowGlobalContextualSaveBar = _useState6[1];
+    var _useState7 = _sliced_to_array((0, _react.useState)(null), 2), message = _useState7[0], setMessage = _useState7[1];
+    var _useState8 = _sliced_to_array((0, _react.useState)(null), 2), saveAction = _useState8[0], setSaveAction = _useState8[1];
+    var _useState9 = _sliced_to_array((0, _react.useState)(null), 2), discardAction = _useState9[0], setDiscardAction = _useState9[1];
+    var _useState10 = _sliced_to_array((0, _react.useState)(false), 2), darkMode = _useState10[0], setDarkMode = _useState10[1];
+    var _useState11 = _sliced_to_array((0, _react.useState)(false), 2), isClient = _useState11[0], setIsClient = _useState11[1];
+    (0, _react.useEffect)(function() {
+        setIsClient(true);
+        if (darkModeAvailable) {
+            var storedPreference = localStorage.getItem(darkModeStorageKey);
+            if (storedPreference !== null) {
+                setDarkMode(JSON.parse(storedPreference));
+            } else {
+                setDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches);
+            }
+        }
+    }, [
+        darkModeAvailable,
+        darkModeStorageKey
+    ]);
+    (0, _react.useEffect)(function() {
+        if (!darkModeAvailable || !isClient) return;
+        if (darkMode) {
+            document.documentElement.setAttribute("data-theme", "dark");
+        } else {
+            document.documentElement.removeAttribute("data-theme");
+        }
+        if (onDarkModeChange) {
+            onDarkModeChange(darkMode);
+        }
+    }, [
+        darkMode,
+        onDarkModeChange,
+        darkModeAvailable,
+        isClient
+    ]);
+    var toggleDarkMode = function() {
+        return setDarkMode(function(prevMode) {
+            if (!darkModeAvailable) return false;
+            var newMode = !prevMode;
+            localStorage.setItem(darkModeStorageKey, JSON.stringify(newMode));
+            return newMode;
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(DarkModeContext.Provider, {
+        value: {
+            darkModeAvailable: darkModeAvailable,
+            darkMode: darkMode,
+            toggleDarkMode: toggleDarkMode,
+            setDarkModeAvailable: setDarkModeAvailable
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(FrameContext.Provider, {
+            value: {
+                embedded: embedded,
+                contentIsInIframe: contentIsInIframe,
+                setContentIsInIframe: setContentIsInIframe,
+                showMobileNavigation: showMobileNavigation,
+                setShowMobileNavigation: setShowMobileNavigation,
+                contentIsFullPage: contentIsFullPage,
+                setContentIsFullPage: setContentIsFullPage,
+                modalIsOpen: modalIsOpen,
+                setModalIsOpen: setModalIsOpen,
+                paneIsOpen: paneIsOpen,
+                setPaneIsOpen: setPaneIsOpen,
+                screenSizes: screenSizes
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(FormContext.Provider, {
+                value: {
+                    showGlobalContextualSaveBar: showGlobalContextualSaveBar,
+                    setShowGlobalContextualSaveBar: setShowGlobalContextualSaveBar,
+                    message: message,
+                    setMessage: setMessage,
+                    saveAction: saveAction,
+                    setSaveAction: setSaveAction,
+                    discardAction: discardAction,
+                    setDiscardAction: setDiscardAction
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "app-wrapper ".concat(embedded ? "@container" : ""),
+                    children: children
+                })
+            })
+        })
+    });
+}
+var _default = AppProvider;

package/dist/cjs/components/Autocomplete.js

@@ -0,0 +1,351 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _tailwindvariants = require("tailwind-variants");
+var _index = require("../index");
+var _polarisicons = require("@shopify/polaris-icons");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Autocomplete flex flex-col"
+});
+function attachPropToTextField(children, prop) {
+    return _react.default.Children.map(children, function(child) {
+        if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
+            var _child_type, _child_props;
+            if (((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) === "Autocomplete.TextField") {
+                return /*#__PURE__*/ (0, _react.cloneElement)(child, prop);
+            }
+            if ((_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props.children) {
+                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
+                    children: attachPropToTextField(child.props.children, prop)
+                });
+            }
+        }
+        return child;
+    });
+}
+/**
+ * Autocomplete component that provides a flexible dropdown menu with search and selection capabilities.
+ *
+ * @component
+ * @param {Object} props - The props for the Autocomplete component.
+ * @param {Array<Object>} props.options - The options to display in the dropdown. Each option should have a `label` and a `value`.
+ * @param {Array<string>} props.selected - The currently selected option values.
+ * @param {"below"|"above"} [props.preferredPosition="below"] - The preferred position of the dropdown relative to the activator.
+ * @param {"left"|"center"|"right"} [props.preferredAlignment="left"] - The preferred alignment of the dropdown.
+ * @param {boolean} [props.allowMultiple=false] - Whether multiple options can be selected.
+ * @param {boolean} [props.loading=false] - Whether to show a loading spinner in the dropdown.
+ * @param {Object} [props.emptyState] - The content to display when there are no options.
+ * @param {React.ReactNode} [props.emptyState.icon] - An optional icon to display in the empty state.
+ * @param {function(Array<string>)} props.onSelect - Callback fired when the selection changes. Receives the new selected values.
+ * @param {React.ReactNode} props.textField - The activator for the dropdown, typically a `TextField` component.
+ * @param {string} [props.className] - Additional class names to apply to the component.
+ * @param {function} [props.onClose] - Callback fired when the dropdown closes.
+ * @param {number} [props.zIndexOverride] - Custom z-index for the dropdown.
+ *
+ * @example
+ * <Autocomplete
+ *   options={[{ label: "Option 1", value: "1" }, { label: "Option 2", value: "2" }]}
+ *   selected={["1"]}
+ *   allowMultiple
+ *   onSelect={(selected) => console.log(selected)}
+ *   textField={<Autocomplete.TextField placeholder="Search..." />}
+ * />
+ */ function Autocomplete() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var options = props.options, selected = props.selected, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "left" : _props_preferredAlignment, allowMultiple = props.allowMultiple, loading = props.loading, emptyState = props.emptyState, onSelect = props.onSelect, textField = props.textField, className = props.className, zIndexOverride = props.zIndexOverride;
+    var classes = styles();
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), showOptionsPopover = _useState[0], setShowOptionsPopover = _useState[1];
+    var onTextFieldFocus = function() {
+        if (!showOptionsPopover) {
+            setShowOptionsPopover(true);
+        }
+    };
+    var showEmptyState = options.length === 0 && !!(emptyState === null || emptyState === void 0 ? void 0 : emptyState.content);
+    var OptionItem = function(param) {
+        var option = param.option, allowMultiple = param.allowMultiple, selected = param.selected, onSelect = param.onSelect, setShowOptionsPopover = param.setShowOptionsPopover;
+        var isChecked = selected.includes(option.value);
+        if (allowMultiple) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+                label: option.label,
+                checked: isChecked,
+                onChange: function() {
+                    onSelect(isChecked ? selected.filter(function(v) {
+                        return v !== option.value;
+                    }) : _to_consumable_array(selected).concat([
+                        option.value
+                    ]));
+                },
+                className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+            });
+        }
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "flex py-1.5 px-3 cursor-pointer rounded-md hover-dark",
+            onClick: function() {
+                onSelect([
+                    option.value
+                ]);
+                setShowOptionsPopover && setShowOptionsPopover(false);
+            },
+            children: option.label
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+            active: showOptionsPopover,
+            preferredPosition: preferredPosition,
+            preferredAlignment: preferredAlignment,
+            activator: attachPropToTextField(textField, {
+                onTextFieldFocus: onTextFieldFocus
+            }),
+            activatorDisplayType: "block",
+            matchActivatorWidth: true,
+            onClose: function() {
+                setShowOptionsPopover(false);
+                if (props.onClose) {
+                    props.onClose();
+                }
+            },
+            zIndexOverride: zIndexOverride,
+            children: loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "py-4 flex justify-center items-center",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                    size: "small"
+                })
+            }) : showEmptyState ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "py-4 flex flex-col gap-1 justify-center items-center",
+                children: [
+                    emptyState.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        source: _polarisicons.SearchMinor,
+                        color: "subdued"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        children: emptyState.content
+                    })
+                ]
+            }) : options.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "p-2",
+                children: options.map(function(option, index) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        children: [
+                            option.title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                variant: "bodyMd",
+                                color: "subdued",
+                                className: "pb-1",
+                                children: option.title
+                            }),
+                            option.options ? option.options.map(function(subOption, subIndex) {
+                                return /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionItem, {
+                                    option: subOption,
+                                    allowMultiple: allowMultiple,
+                                    selected: selected,
+                                    onSelect: onSelect,
+                                    setShowOptionsPopover: setShowOptionsPopover
+                                }, "".concat(index, "-").concat(subIndex));
+                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionItem, {
+                                option: option,
+                                allowMultiple: allowMultiple,
+                                selected: selected,
+                                onSelect: onSelect,
+                                setShowOptionsPopover: setShowOptionsPopover
+                            }, index)
+                        ]
+                    }, index);
+                })
+            }) : undefined
+        })
+    });
+}
+Autocomplete.displayName = "Autocomplete";
+/**
+ * Autocomplete TextField component used as an activator for the Autocomplete dropdown.
+ *
+ * @component
+ * @param {Object} props - The props for the AutocompleteTextField component.
+ * @param {function} [props.onTextFieldFocus] - Callback fired when the TextField gains focus.
+ * @param {function} [props.onFocus] - Callback fired when the TextField gains focus (native TextField event).
+ * @param {string} [props.placeholder] - Placeholder text for the TextField.
+ * @param {string} [props.value] - The current value of the TextField.
+ * @param {function} [props.onChange] - Callback fired when the TextField value changes.
+ *
+ * @example
+ * <Autocomplete.TextField
+ *   placeholder="Search..."
+ *   onTextFieldFocus={() => console.log("Focused")}
+ * />
+ */ Autocomplete.TextField = function AutocompleteTextField() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, _object_spread_props(_object_spread({}, props), {
+        onFocus: function() {
+            if (props.onTextFieldFocus) {
+                props.onTextFieldFocus();
+            }
+            if (props.onFocus) {
+                props.onFocus();
+            }
+        }
+    }));
+};
+Autocomplete.TextField.displayName = "Autocomplete.TextField";
+var _default = Autocomplete;