@heymantle/litho 0.0.1

package/dist/esm/components/Listbox.js

@@ -0,0 +1,201 @@
+"use client";
+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 _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);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FrameContext } from "./AppProvider.js";
+import { useContext, useState } from "react";
+import { MobileAcceptMajor } from "@shopify/polaris-icons";
+import { tv } from "tailwind-variants";
+import { Icon } from "../index.js";
+var styles = tv({
+    base: "Litho-Listbox__Option rounded-md cursor-pointer min-h-8 py-1 flex items-center justify-between pl-3 focus:outline-hidden active:ring-0",
+    variants: {
+        showIcon: {
+            true: "gap-2 pr-2",
+            false: "pr-3"
+        },
+        selected: {
+            true: "text-tab-active-fg bg-tab-active-bg hover:bg-tab-active-bg-hover active:bg-tab-active-bg-active",
+            false: "text-normal hover:text-highest hover"
+        },
+        removeVisualFocus: {
+            true: "",
+            false: "focus:ring-2 focus:ring-form-accent focus:border-form-border-accent"
+        }
+    }
+});
+var containerStyles = tv({
+    base: "flex gap-0.5",
+    variants: {
+        displayHorizontallyOnMobile: {
+            true: "flex-row overflow-x-auto max-w-full pb-3 @sm:pb-0 @sm:flex-col",
+            false: "flex-col"
+        }
+    },
+    defaultVariants: {
+        displayHorizontallyOnMobile: false
+    }
+});
+/**
+ * A customizable Listbox component for displaying a list of options with selectable states.
+ * The component supports keyboard navigation and optional icons for selected items.
+ *
+ * @component
+ * @param {Object} props - The properties object.
+ * @param {Array<Object>} props.options - Array of options to render in the listbox.
+ * Each option should be an object with the following properties:
+ *   - `label` {string}: The display label of the option.
+ *   - `value` {string | number}: The unique value of the option.
+ *   - `selected` {boolean}: Whether the option is currently selected.
+ *   - `onAction` {function}: A callback function invoked when the option is clicked or "Enter" is pressed.
+ * @param {boolean} [props.showIcon=false] - Determines whether to display an icon next to selected options.
+ * @param {React.ReactNode} [props.icon=MobileAcceptMajor] - The icon to display for selected options (default is `MobileAcceptMajor`).
+ * @param {boolean} [props.displayHorizontallyOnMobile=false] - Determines whether to display the listbox horizontally on mobile.
+ *
+ * @example
+ * const options = [
+ *   { label: "Option 1", value: "opt1", selected: false, onAction: () => console.log("Option 1 clicked") },
+ *   { label: "Option 2", value: "opt2", selected: true, onAction: () => console.log("Option 2 clicked") },
+ * ];
+ *
+ * <Listbox options={options} showIcon={true} icon={CustomIcon} />
+ *
+ * @returns {JSX.Element} The rendered Listbox component.
+ */ function Listbox() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var options = props.options, _props_showIcon = props.showIcon, showIcon = _props_showIcon === void 0 ? false : _props_showIcon, _props_displayHorizontallyOnMobile = props.displayHorizontallyOnMobile, displayHorizontallyOnMobile = _props_displayHorizontallyOnMobile === void 0 ? false : _props_displayHorizontallyOnMobile, _props_icon = props.icon, icon = _props_icon === void 0 ? MobileAcceptMajor : _props_icon;
+    var screenSizes = useContext(FrameContext).screenSizes;
+    var _useState = _sliced_to_array(useState(null), 2), removeVisualFocus = _useState[0], setRemoveVisualFocus = _useState[1];
+    var handleKeyDown = function(e, index) {
+        if (!options.length) return;
+        var currentElement = e.target;
+        var siblings = currentElement.parentNode.children;
+        switch(e.key){
+            case "ArrowDown":
+                e.preventDefault();
+                var nextElement = siblings[index + 1] || siblings[0];
+                nextElement.focus();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                var prevElement = siblings[index - 1] || siblings[siblings.length - 1];
+                prevElement.focus();
+                break;
+            case "Enter":
+                var _options_index;
+                e.preventDefault();
+                if ((_options_index = options[index]) === null || _options_index === void 0 ? void 0 : _options_index.onAction) {
+                    options[index].onAction();
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                currentElement.blur();
+                break;
+            default:
+                break;
+        }
+    };
+    var handleClick = function(e, index) {
+        var _options_index_onAction, _options_index;
+        (_options_index = options[index]) === null || _options_index === void 0 ? void 0 : (_options_index_onAction = _options_index.onAction) === null || _options_index_onAction === void 0 ? void 0 : _options_index_onAction.call(_options_index);
+        setRemoveVisualFocus(index);
+        if (window.innerWidth <= screenSizes.sm) {
+            e.currentTarget.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "center"
+            });
+        }
+    };
+    if (!options.length) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        role: "listbox",
+        className: containerStyles({
+            displayHorizontallyOnMobile: displayHorizontallyOnMobile
+        }),
+        children: options.map(function(option, index) {
+            var selected = option.selected, label = option.label, value = option.value, onAction = option.onAction;
+            var classes = styles({
+                selected: selected,
+                showIcon: showIcon,
+                removeVisualFocus: removeVisualFocus === index
+            });
+            return /*#__PURE__*/ _jsxs("div", {
+                role: "option",
+                "aria-selected": selected,
+                className: classes,
+                tabIndex: 0,
+                onClick: function(e) {
+                    return handleClick(e, index);
+                },
+                onBlur: function() {
+                    return setRemoveVisualFocus(null);
+                },
+                onKeyDown: function(e) {
+                    return handleKeyDown(e, index);
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "whitespace-nowrap pointer-events-none w-full",
+                        children: label
+                    }),
+                    showIcon && /*#__PURE__*/ _jsx("div", {
+                        className: "w-5 h-5 pointer-events-none",
+                        children: selected && /*#__PURE__*/ _jsx(Icon, {
+                            source: icon || MobileAcceptMajor,
+                            color: "link"
+                        })
+                    })
+                ]
+            }, value);
+        })
+    });
+}
+export default Listbox;

package/dist/esm/components/Loading.js

@@ -0,0 +1,93 @@
+"use client";
+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 _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);
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+/**
+ * A loading progress bar component that animates over a specified duration.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {number} [props.maxDuration=10000] - The maximum duration (in milliseconds) for the loading progress bar to reach 100%.
+ * @returns {JSX.Element} A fixed progress bar displayed at the top of the page.
+ */ function Loading() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_maxDuration = props.maxDuration, maxDuration = _props_maxDuration === void 0 ? 10000 : _props_maxDuration;
+    var _useState = _sliced_to_array(useState(0), 2), progress = _useState[0], setProgress = _useState[1];
+    useEffect(function() {
+        var startTime = Date.now();
+        var interval = 16;
+        var maxProgress = 100;
+        var updateProgress = function() {
+            var elapsedTime = Date.now() - startTime;
+            var fractionOfDuration = elapsedTime / maxDuration;
+            var easedProgress = maxProgress * (1 - Math.pow(1 - fractionOfDuration, 3));
+            if (elapsedTime >= maxDuration || easedProgress >= maxProgress) {
+                setProgress(maxProgress);
+                clearInterval(timer);
+            } else {
+                setProgress(easedProgress);
+            }
+        };
+        var timer = setInterval(updateProgress, interval);
+        return function() {
+            return clearInterval(timer);
+        };
+    }, [
+        maxDuration
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "Litho-Loading fixed top-0 left-0 right-0 h-[3px]",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "h-full bg-brand-saturated transition-all duration-100 ease-out",
+            style: {
+                width: "".concat(progress, "%")
+            }
+        })
+    });
+}
+export default Loading;

package/dist/esm/components/Modal.js

@@ -0,0 +1,390 @@
+"use client";
+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 _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 _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+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);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftMinor, CancelMajor } from "@shopify/polaris-icons";
+import React, { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { tv } from "tailwind-variants";
+import { FrameContext } from "./AppProvider.js";
+import { Button, Icon, Spinner, Text, Tooltip } from "../index.js";
+export var ModalContext = /*#__PURE__*/ createContext(false);
+var containerStyles = tv({
+    base: "Litho-ModalContainer fixed inset-0 block flex flex-col justify-end md:justify-center items-center pointer-events-none"
+});
+var styles = tv({
+    base: "Litho-Modal relative bg-surface-highest shadow-modal dark:shadow-modal-dark w-full mx-auto pointer-events-auto flex flex-col overflow-hidden",
+    variants: {
+        size: {
+            default: "max-w-200 md:max-w-160 md:rounded-md max-h-[calc(100vh-40px)]",
+            large: "max-w-300 md:rounded-md max-h-[calc(100vh-40px)]",
+            full: "h-full max-w-full max-h-screen"
+        }
+    },
+    defaultVariants: {
+        size: "default"
+    }
+});
+var overlayStyles = tv({
+    base: "Litho-ModalOverlay fixed inset-0 block bg-tint-10 dark:bg-tint-25"
+});
+var headerStyles = tv({
+    base: "Litho-ModalHeader min-h-15 flex items-center py-2 pl-4 pr-3 flex-none",
+    variants: {
+        hasChildren: {
+            true: "border-b",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        hasChildren: true
+    }
+});
+var sectionStyles = tv({
+    base: "Litho-ModalSection border-b border-edge-default last:border-b-0",
+    variants: {
+        flush: {
+            true: "",
+            false: "p-4"
+        },
+        showHeader: {
+            true: "pt-2",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        flush: false
+    }
+});
+/**
+ * Modal component for displaying a customizable dialog.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.children] - The content of the modal.
+ * @param {string} [props.title] - The title of the modal.
+ * @param {string} [props.subtitle] - The subtitle of the modal.
+ * @param {boolean} [props.open=false] - Whether the modal is open.
+ * @param {Function} [props.onClose] - Callback function for closing the modal.
+ * @param {boolean} [props.sectioned=false] - Whether the modal content should be sectioned.
+ * @param {Object} [props.primaryAction] - The primary action for the modal.
+ * @param {string} [props.primaryAction.content] - Content of the primary action button.
+ * @param {Function} [props.primaryAction.onAction] - Callback for the primary action.
+ * @param {boolean} [props.primaryAction.loading=false] - Whether the primary action is loading.
+ * @param {boolean} [props.primaryAction.disabled=false] - Whether the primary action is disabled.
+ * @param {boolean} [props.primaryAction.destructive=false] - Whether the primary action is destructive.
+ * @param {Object} [props.secondaryAction] - The secondary action for the modal.
+ * @param {string} [props.secondaryAction.content] - Content of the secondary action button.
+ * @param {Function} [props.secondaryAction.onAction] - Callback for the secondary action.
+ * @param {boolean} [props.secondaryAction.disabled=false] - Whether the secondary action is disabled.
+ * @param {Object[]} [props.secondaryActions=[]] - Additional secondary actions.
+ * @param {Object} [props.destructiveAction] - A destructive action for the modal.
+ * @param {boolean} [props.loading=false] - Whether the modal is in a loading state.
+ * @param {string} [props.size="default"] - The size of the modal (default, large, or full).
+ * @param {React.ReactNode} [props.leftAccessory] - Left accessory content in the footer.
+ * @param {boolean} [props.hideCloseButton=false] - Whether to hide the close button.
+ * @param {number} [props.zIndexOverride=1000] - The z-index of the modal.
+ * @returns {React.ReactPortal|null} The rendered modal component or null if not open.
+ */ function Modal() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, title = props.title, subtitle = props.subtitle, open = props.open, onClose = props.onClose, sectioned = props.sectioned, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, _props_secondaryActions = props.secondaryActions, secondaryActions = _props_secondaryActions === void 0 ? [] : _props_secondaryActions, destructiveAction = props.destructiveAction, loading = props.loading, _props_size = props.size, size = _props_size === void 0 ? "default" : _props_size, leftAccessory = props.leftAccessory, _props_hideCloseButton = props.hideCloseButton, hideCloseButton = _props_hideCloseButton === void 0 ? false : _props_hideCloseButton, backAction = props.backAction, zIndexOverride = props.zIndexOverride;
+    var setModalIsOpen = useContext(FrameContext).setModalIsOpen;
+    var modalContentRef = useRef(null);
+    var hasChildren = !!children;
+    var classes = styles({
+        sectioned: sectioned,
+        size: size
+    });
+    var containerClasses = containerStyles();
+    var headerClasses = headerStyles({
+        hasChildren: hasChildren
+    });
+    var overlayClasses = overlayStyles();
+    var sectionClasses = sectionStyles();
+    var _useState = _sliced_to_array(useState(null), 2), container = _useState[0], setContainer = _useState[1];
+    useEffect(function() {
+        var div = document.createElement("div");
+        div.className = "@container Litho-ModalPortal";
+        setContainer(div);
+        document.body.appendChild(div);
+        return function() {
+            document.body.removeChild(div);
+        };
+    }, []);
+    useEffect(function() {
+        setModalIsOpen(open);
+        if (!open || !onClose) return;
+        var handleKeyDown = function(event) {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return function() {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        open,
+        onClose
+    ]);
+    // Focus first input when modal opens
+    useLayoutEffect(function() {
+        if (open && container && modalContentRef.current) {
+            var focusable = modalContentRef.current.querySelector('input:not([type="hidden"]), select, textarea');
+            if (focusable) focusable.focus();
+        }
+    }, [
+        open,
+        container
+    ]);
+    if (!open) {
+        return null;
+    }
+    var showFooter = primaryAction || secondaryActions.length > 0 || destructiveAction || leftAccessory;
+    return container && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs(ModalContext.Provider, {
+        value: true,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: containerClasses,
+                style: zIndexOverride ? {
+                    zIndex: zIndexOverride
+                } : {},
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: classes,
+                    ref: modalContentRef,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: headerClasses,
+                            children: [
+                                backAction && /*#__PURE__*/ _jsx("div", {
+                                    className: "Litho-ModalHeader__BackAction pr-3",
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        plain: true,
+                                        onClick: backAction,
+                                        icon: ArrowLeftMinor
+                                    })
+                                }),
+                                (title || subtitle) && /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-1 flex-col gap-0",
+                                    children: [
+                                        title && /*#__PURE__*/ _jsx(Text, {
+                                            variant: "headingLg",
+                                            fontWeight: "semibold",
+                                            children: title
+                                        }),
+                                        subtitle && /*#__PURE__*/ _jsx(Text, {
+                                            variant: "bodyMd",
+                                            color: "subdued",
+                                            children: subtitle
+                                        })
+                                    ]
+                                }),
+                                onClose && !hideCloseButton && /*#__PURE__*/ _jsx(Button, {
+                                    plain: true,
+                                    icon: CancelMajor,
+                                    onClick: onClose
+                                })
+                            ]
+                        }),
+                        hasChildren && /*#__PURE__*/ _jsx("div", {
+                            className: "Litho-ModalBody grow overflow-y-auto overscroll-contain",
+                            children: loading ? /*#__PURE__*/ _jsx("div", {
+                                className: "flex justify-center items-center h-full py-12",
+                                children: /*#__PURE__*/ _jsx(Spinner, {})
+                            }) : sectioned ? /*#__PURE__*/ _jsx("div", {
+                                className: sectionClasses,
+                                children: children
+                            }) : children
+                        }),
+                        showFooter ? /*#__PURE__*/ _jsxs("div", {
+                            className: "Litho-ModalFooter min-h-15 flex items-center justify-between border-t py-2 px-4 flex-none",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        destructiveAction && /*#__PURE__*/ _jsx(Button, {
+                                            destructive: destructiveAction.destructive === false ? false : true,
+                                            onClick: destructiveAction.onAction,
+                                            loading: destructiveAction.loading,
+                                            icon: destructiveAction.icon,
+                                            disabled: destructiveAction.disabled,
+                                            primary: destructiveAction.primary,
+                                            url: destructiveAction.url,
+                                            tooltip: destructiveAction.tooltip,
+                                            tooltipAlignment: destructiveAction.tooltipAlignment,
+                                            children: destructiveAction.content || "Delete"
+                                        }),
+                                        leftAccessory && leftAccessory
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        (secondaryActions === null || secondaryActions === void 0 ? void 0 : secondaryActions.length) > 0 && secondaryActions.map(function(action) {
+                                            return /*#__PURE__*/ _jsx(Button, {
+                                                onClick: action.onAction,
+                                                disabled: action.disabled,
+                                                url: action.url,
+                                                tooltip: action.tooltip,
+                                                tooltipAlignment: action.tooltipAlignment,
+                                                children: action.content
+                                            }, action.content);
+                                        }),
+                                        secondaryAction && /*#__PURE__*/ _jsx(Button, {
+                                            onClick: secondaryAction.onAction,
+                                            disabled: secondaryAction.disabled,
+                                            url: secondaryAction.url,
+                                            tooltip: secondaryAction.tooltip,
+                                            tooltipAlignment: secondaryAction.tooltipAlignment,
+                                            children: secondaryAction.content || "Cancel"
+                                        }),
+                                        primaryAction && /*#__PURE__*/ _jsx(Button, {
+                                            primary: true,
+                                            icon: primaryAction.icon,
+                                            onClick: primaryAction.onAction,
+                                            loading: primaryAction.loading,
+                                            disabled: primaryAction.disabled,
+                                            destructive: primaryAction.destructive,
+                                            url: primaryAction.url,
+                                            tooltip: primaryAction.tooltip,
+                                            tooltipAlignment: primaryAction.tooltipAlignment,
+                                            children: primaryAction.content || "Save"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: overlayClasses,
+                onClick: onClose,
+                style: zIndexOverride ? {
+                    zIndex: zIndexOverride - 1
+                } : {}
+            })
+        ]
+    }), container);
+}
+/**
+ * Section component for use within the Modal.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.children] - The content of the section.
+ * @param {boolean} [props.flush=false] - Whether the section should be flush with no padding.
+ * @returns {JSX.Element} The rendered section.
+ */ function Section() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, flush = props.flush, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingSm" : _props_titleVariant, description = props.description, action = props.action, icon = props.icon, accessory = props.accessory, tooltip = props.tooltip;
+    var showHeader = !!(title || action);
+    var sectionClasses = sectionStyles({
+        flush: flush,
+        showHeader: showHeader
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: sectionClasses,
+        children: [
+            showHeader && /*#__PURE__*/ _jsxs("div", {
+                className: "Litho-ModalSection__SectionHeader min-h-9 md:min-h-10",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between gap-1",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-2 min-h-8",
+                                children: [
+                                    icon && typeof icon === "function" && /*#__PURE__*/ _jsx(Icon, {
+                                        source: icon,
+                                        color: "subdued"
+                                    }),
+                                    icon && (typeof icon === "undefined" ? "undefined" : _type_of(icon)) === "object" && icon,
+                                    title && typeof title === "string" ? /*#__PURE__*/ _jsx(Text, {
+                                        variant: titleVariant,
+                                        children: title
+                                    }) : title,
+                                    tooltip && /*#__PURE__*/ _jsx(Tooltip, {
+                                        content: tooltip,
+                                        preferredPosition: "above"
+                                    })
+                                ]
+                            }),
+                            accessory && /*#__PURE__*/ _jsx("div", {
+                                className: "Litho-ModalSection__HeaderAccessory pr-2",
+                                children: accessory
+                            }),
+                            action && /*#__PURE__*/ _jsx("div", {
+                                className: "Litho-ModalSection__HeaderAction relative left-2",
+                                children: action.content ? /*#__PURE__*/ _jsx(Button, {
+                                    link: true,
+                                    onClick: action.onAction,
+                                    primary: action.primary,
+                                    destructive: action.destructive,
+                                    icon: action.icon,
+                                    loading: action.loading,
+                                    disabled: action.disabled,
+                                    connectedDisclosure: action.connectedDisclosure,
+                                    children: action.content
+                                }) : action
+                            })
+                        ]
+                    }),
+                    description && /*#__PURE__*/ _jsx(Text, {
+                        color: "subdued",
+                        children: description
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+}
+Modal.Section = Section;
+export default Modal;