@heymantle/litho 0.0.1

package/dist/esm/components/FooterHelp.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "../index.js";
+import { CircleInformationMajor } from "@shopify/polaris-icons";
+/**
+ * Renders a `FooterHelp` component, which provides additional information
+ * or guidance to users, typically displayed at the bottom of a page. The component
+ * centers its content within a rounded, styled box that includes an icon and customizable text.
+ *
+ * @component
+ * @param {Object} [props] - The props for the FooterHelp component.
+ * @param {React.ReactNode} [props.children] - The content to display next to the information icon.
+ * This is typically a text string or any valid React node.
+ *
+ * @returns {JSX.Element} The rendered FooterHelp component.
+ *
+ * @example
+ * // Basic usage:
+ * <FooterHelp>Need more help? Contact support.</FooterHelp>
+ */ function FooterHelp() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children;
+    return /*#__PURE__*/ _jsx("div", {
+        className: "Litho-FooterHelp flex justify-center",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center gap-3 rounded-full bg-surface-lower py-3 pl-4 pr-5 mx-auto my-5",
+            children: [
+                /*#__PURE__*/ _jsx(Icon, {
+                    source: CircleInformationMajor,
+                    color: "subdued"
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    children: children
+                })
+            ]
+        })
+    });
+}
+export default FooterHelp;

package/dist/esm/components/Form.js

@@ -0,0 +1,35 @@
+/**
+ * A reusable Form component.
+ *
+ * @param {Object} [props={}] - The properties passed to the component.
+ * @param {string} [props.method="get"] - The HTTP method for the form submission.
+ * @param {function} [props.onSubmit] - The function to call when the form is submitted.
+ * @param {React.ReactNode} [props.children] - The child elements to be rendered inside the form.
+ * @returns {JSX.Element} The rendered form component.
+ */ import { jsx as _jsx } from "react/jsx-runtime";
+function Form() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var acceptCharset = props.acceptCharset, action = props.action, autoComplete = props.autoComplete, children = props.children, encType = props.encType, _props_method = props.method, method = _props_method === void 0 ? 'post' : _props_method, name = props.name, noValidate = props.noValidate, _props_preventDefault = props.preventDefault, preventDefault = _props_preventDefault === void 0 ? true : _props_preventDefault, target = props.target, onSubmit = props.onSubmit;
+    function handleSubmit(event) {
+        if (preventDefault) {
+            event.preventDefault();
+        }
+        if (onSubmit) {
+            onSubmit(event);
+        }
+    }
+    return /*#__PURE__*/ _jsx("form", {
+        method: method,
+        onSubmit: handleSubmit,
+        acceptCharset: acceptCharset,
+        action: action,
+        autoComplete: autoComplete,
+        encType: encType,
+        name: name,
+        noValidate: noValidate,
+        target: target,
+        children: children
+    });
+}
+;
+export default Form;

package/dist/esm/components/Frame.js

@@ -0,0 +1,376 @@
+"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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useContext, useState, useMemo } from "react";
+import { DarkModeContext, FrameContext } from "./AppProvider.js";
+import { tv } from "tailwind-variants";
+import { CancelMajor, SearchMajor, QuestionMarkInverseMajor } from "@shopify/polaris-icons";
+import { Button, Icon, FrameSaveBar, TopBar, Popover, ActionList } from "../index.js";
+var frameStyles = tv({
+    base: "Litho-Frame bg-surface-normal",
+    variants: {
+        paneIsOpen: {
+            true: "md:mr-[var(--litho-pane-width)]"
+        }
+    },
+    defaultVariants: {
+        paneIsOpen: false
+    }
+});
+var frameHeaderStyles = tv({
+    base: "Litho-Frame-Header bg-surface-normal fixed left-0 right-0 top-0",
+    variants: {
+        paneIsOpen: {
+            true: "md:mr-[var(--litho-pane-width)]"
+        }
+    },
+    defaultVariants: {
+        paneIsOpen: false
+    }
+});
+var navigationStyles = tv({
+    base: "Litho-Frame-Navigation fixed @md:z-auto left-0 top-0 bottom-0 overflow-hidden transform transition-transform duration-300 @md:transform-none @md:shadow-none bg-surface-normal w-[var(--litho-nav-width)] @md:mt-[var(--litho-top-bar-height)]",
+    variants: {
+        showMobileNavigation: {
+            true: "translate-x-0 opacity-100 shadow-modal",
+            false: "-translate-x-full opacity-0 @md:translate-x-0 @md:opacity-100"
+        },
+        hideScrollBar: {
+            true: "no-scrollbar"
+        }
+    }
+});
+var navigationOverlayStyles = tv({
+    base: "Litho-Frame-Navigation-Overlay fixed @md:z-auto inset-0 bg-tint-10 dark:bg-tint-25 opacity-0 pointer-events-none @md:hidden @md:pointer-events-none transition-opacity duration-300 overflow-hidden",
+    variants: {
+        showMobileNavigation: {
+            true: "opacity-100 pointer-events-auto"
+        }
+    }
+});
+var contentStyles = tv({
+    base: "Litho-Frame-Content relative",
+    variants: {
+        contentIsInIframe: {
+            true: "Litho-Frame-Content--InIframe h-screen overflow-hidden",
+            false: ""
+        },
+        contentIsFullPage: {
+            true: "",
+            false: "pt-[var(--litho-top-bar-height)]"
+        },
+        hasNavigation: {
+            true: "@md:ml-[var(--litho-nav-width)]",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        contentIsFullPage: false,
+        hasNavigation: false
+    }
+});
+var logoStyles = tv({
+    base: "Litho-Logo fixed @md:z-1350 left-0 top-[var(--litho-header-offset)] px-5.5 h-[var(--litho-header-height)] flex items-center justify-start @md:opacity-100 transform transition duration-300 @md:transform-none @md:pointer-events-auto",
+    variants: {
+        showMobileNavigation: {
+            true: "translate-x-0 opacity-100",
+            false: ""
+        },
+        modalIsOpen: {
+            true: "Litho-Logo--ModalOpen",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            alwaysShowLogo: true,
+            showMobileNavigation: false,
+            className: ""
+        },
+        {
+            alwaysShowLogo: false,
+            showMobileNavigation: false,
+            className: "-translate-x-full opacity-0 @md:translate-x-0 @md:opacity-100"
+        }
+    ],
+    defaultVariants: {
+        alwaysShowLogo: false
+    }
+});
+/**
+ * Frame component that provides a layout structure with top bar, navigation, logo, and content.
+ * @param {Object} props - Props for the Frame component.
+ * @param {React.ReactNode} props.navigation - Component to render as the navigation menu.
+ * @param {React.ReactNode} props.announcement - Component to render an announcement bar.
+ * @param {Object} props.logo - Logo configuration.
+ * @param {string} props.logo.url - URL for the logo link.
+ * @param {string} props.logo.source - Source for the logo image.
+ * @param {string} props.logo.accessibilityLabel - Accessibility label for the logo image.
+ * @param {number} props.logo.width - Width of the logo image.
+ * @param {boolean} props.showSearchTrigger - Whether to show the search trigger.
+ * @param {React.ReactNode} props.searchModal - Modal to render as the search modal.
+ * @param {function} props.onToggleSearchModal - Function to toggle the search modal.
+ * @param {string} [props.className] - Additional CSS classes for the Frame.
+ * @param {React.ReactNode} props.children - Content to render within the Frame.
+ * @param {boolean} [props.alwaysShowUserMenuInTopBar] - Whether to always show the user menu in the top bar.
+ * @param {React.ReactNode} [props.headerAccessory] - Accessory to render in the header.
+ * @returns {React.ReactElement} The rendered Frame component.
+ */ var Frame = function(param) {
+    var navigation = param.navigation, announcement = param.announcement, logo = param.logo, children = param.children, className = param.className, userMenu = param.userMenu, moreActions = param.moreActions, _param_showSearchTrigger = param.showSearchTrigger, showSearchTrigger = _param_showSearchTrigger === void 0 ? true : _param_showSearchTrigger, _param_alwaysShowUserMenuInTopBar = param.alwaysShowUserMenuInTopBar, alwaysShowUserMenuInTopBar = _param_alwaysShowUserMenuInTopBar === void 0 ? false : _param_alwaysShowUserMenuInTopBar, searchModal = param.searchModal, onToggleSearchModal = param.onToggleSearchModal, headerAccessory = param.headerAccessory;
+    var darkMode = useContext(DarkModeContext).darkMode;
+    var _useContext = useContext(FrameContext), contentIsInIframe = _useContext.contentIsInIframe, contentIsFullPage = _useContext.contentIsFullPage, showMobileNavigation = _useContext.showMobileNavigation, setShowMobileNavigation = _useContext.setShowMobileNavigation, modalIsOpen = _useContext.modalIsOpen, paneIsOpen = _useContext.paneIsOpen, embedded = _useContext.embedded;
+    var _useState = _sliced_to_array(useState(""), 2), searchTriggerShortcutText = _useState[0], setSearchTriggerShortcutText = _useState[1];
+    useEffect(function() {
+        if (/Mac/i.test(navigator.platform)) {
+            setSearchTriggerShortcutText("⌘K");
+        } else {
+            setSearchTriggerShortcutText("Ctrl+K");
+        }
+    }, []);
+    var hasAnnouncement = !!announcement;
+    var _useState1 = _sliced_to_array(useState(false), 2), showMoreActionsPopover = _useState1[0], setShowMoreActionsPopover = _useState1[1];
+    useEffect(function() {
+        if (!!announcement) {
+            var _document_querySelector, _document_querySelector1;
+            var announcementBarHeight = (_document_querySelector = document.querySelector(".Litho-Frame-Header .Litho-AnnouncementBar")) === null || _document_querySelector === void 0 ? void 0 : _document_querySelector.offsetHeight;
+            if (announcementBarHeight) {
+                document.documentElement.style.setProperty("--litho-header-offset", "".concat(announcementBarHeight, "px"));
+            } else {
+                document.documentElement.style.setProperty("--litho-header-offset", "0px");
+            }
+            var headerHeight = (_document_querySelector1 = document.querySelector(".Litho-Frame-Header")) === null || _document_querySelector1 === void 0 ? void 0 : _document_querySelector1.offsetHeight;
+            if (headerHeight) {
+                document.documentElement.style.setProperty("--litho-top-bar-height", "".concat(headerHeight, "px"));
+                document.documentElement.style.setProperty("--litho-table-header-sticky-at", "".concat(headerHeight, "px"));
+            } else {
+                document.documentElement.style.setProperty("--litho-top-bar-height", "56px");
+                document.documentElement.style.setProperty("--litho-table-header-sticky-at", "56px");
+            }
+        }
+    }, [
+        announcement
+    ]);
+    useEffect(function() {
+        var handleSearchShortcut = function(e) {
+            if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+                e.preventDefault();
+                onToggleSearchModal();
+            }
+        };
+        window.addEventListener("keydown", handleSearchShortcut);
+        return function() {
+            window.removeEventListener("keydown", handleSearchShortcut);
+        };
+    }, []);
+    var contentClass = useMemo(function() {
+        return contentStyles({
+            contentIsInIframe: contentIsInIframe,
+            contentIsFullPage: contentIsFullPage,
+            hasNavigation: !!navigation && !contentIsFullPage
+        });
+    }, [
+        contentIsInIframe,
+        contentIsFullPage,
+        navigation
+    ]);
+    var logoSource = darkMode ? logo.darkSource : logo.source;
+    var searchTrigger = showSearchTrigger ? /*#__PURE__*/ _jsxs("div", {
+        className: "w-full pl-2 pr-3 h-8 rounded-md flex items-center gap-2 cursor-pointer bg-tint-2 hover:bg-tint-3 active:bg-tint-4 dark:bg-tint-alt-2 dark:hover:bg-tint-alt-3 dark:active:bg-tint-alt-4",
+        onClick: function() {
+            return onToggleSearchModal();
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                source: SearchMajor,
+                color: "subdued"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex-1 text-low flex items-center justify-between gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        children: "Search"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs text-lowest hidden @md:block",
+                        children: searchTriggerShortcutText
+                    })
+                ]
+            })
+        ]
+    }) : null;
+    var alwaysShowLogo = !contentIsFullPage && logo && alwaysShowUserMenuInTopBar;
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(frameStyles({
+            paneIsOpen: paneIsOpen
+        }), " ").concat(className),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: embedded ? "" : "@container",
+            children: [
+                !contentIsFullPage && /*#__PURE__*/ _jsx("div", {
+                    className: logoStyles({
+                        showMobileNavigation: showMobileNavigation,
+                        modalIsOpen: modalIsOpen,
+                        alwaysShowLogo: alwaysShowLogo
+                    }),
+                    children: /*#__PURE__*/ _jsx("a", {
+                        href: logo.url,
+                        className: "block py-1 px-2 relative -left-2 ".concat(logo.url ? " cursor-pointer" : ""),
+                        children: /*#__PURE__*/ _jsx("img", {
+                            src: logoSource,
+                            alt: logo.accessibilityLabel,
+                            style: (logo === null || logo === void 0 ? void 0 : logo.width) ? {
+                                width: logo.width
+                            } : undefined
+                        })
+                    })
+                }),
+                !contentIsFullPage && /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(FrameSaveBar, {
+                            logo: logo
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: frameHeaderStyles({
+                                paneIsOpen: paneIsOpen
+                            }),
+                            children: [
+                                announcement,
+                                /*#__PURE__*/ _jsx(TopBar, {
+                                    hasNavigation: !!navigation,
+                                    userMenu: userMenu,
+                                    headerAccessory: headerAccessory,
+                                    searchTrigger: searchTrigger,
+                                    alwaysShowUserMenuInTopBar: alwaysShowUserMenuInTopBar
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: contentClass,
+                    children: children
+                }),
+                !contentIsFullPage && navigation && /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: navigationStyles({
+                                showMobileNavigation: showMobileNavigation,
+                                hasAnnouncement: hasAnnouncement
+                            }),
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "relative h-full flex flex-col",
+                                children: [
+                                    showSearchTrigger && /*#__PURE__*/ _jsx("div", {
+                                        className: "pt-4 hidden @md:block pb-0 px-3",
+                                        children: searchTrigger
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "flex-1 pt-3 overflow-y-auto overflow-x-hidden bg-surface-normal overscroll-contain",
+                                        children: navigation
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "hidden @md:flex py-2 px-3 items-center justify-between relative w-full overflow-hidden",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-tint-4 to-transparent pointer-events-none dark:from-tint-alt-3"
+                                            }),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "truncate",
+                                                children: userMenu
+                                            }),
+                                            moreActions && /*#__PURE__*/ _jsx(Popover, {
+                                                active: showMoreActionsPopover,
+                                                onClose: function() {
+                                                    return setShowMoreActionsPopover(false);
+                                                },
+                                                preferredAlignment: "right",
+                                                preferredPosition: "above",
+                                                containerClassName: "shrink-0 whitespace-nowrap flex-none",
+                                                activator: /*#__PURE__*/ _jsx(Button, {
+                                                    icon: QuestionMarkInverseMajor,
+                                                    iconColor: "subdued",
+                                                    plain: true,
+                                                    onClick: function() {
+                                                        return setShowMoreActionsPopover(!showMoreActionsPopover);
+                                                    }
+                                                }),
+                                                children: /*#__PURE__*/ _jsx(ActionList, {
+                                                    sections: moreActions,
+                                                    onActionAnyItem: function() {
+                                                        return setShowMoreActionsPopover(false);
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: navigationOverlayStyles({
+                                showMobileNavigation: showMobileNavigation
+                            }),
+                            onClick: function() {
+                                return setShowMobileNavigation(false);
+                            },
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: "fixed cursor-pointer top-2.5 @md:hidden p-2 rounded-full bg-tint-10 hover:bg-tint-12 dark:bg-tint-alt-10 dark:hover:bg-tint-alt-12 left-56.5",
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    source: CancelMajor,
+                                    color: "alternate"
+                                })
+                            })
+                        })
+                    ]
+                }),
+                searchModal
+            ]
+        })
+    });
+};
+export default Frame;

package/dist/esm/components/FrameSaveBar.js

@@ -0,0 +1,229 @@
+"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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from "react";
+import { FormContext, DarkModeContext, FrameContext } from "./AppProvider.js";
+import { tv } from "tailwind-variants";
+import { Button, Text, Icon, Tooltip } from "../index.js";
+import { ChevronUpMinor, ChevronDownMinor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-FrameSaveBar fixed top-[var(--litho-header-offset)] right-0 left-0 h-[var(--litho-header-height)] px-4 @md:px-5 flex items-center gap-2 bg-surface-alternate dark:bg-brand transition-opacity transition-transform duration-300 transform",
+    variants: {
+        visible: {
+            true: "opacity-100 pointer-events-auto",
+            false: "opacity-0 pointer-events-none"
+        },
+        tucked: {
+            true: "-translate-y-full",
+            false: "translate-y-0"
+        },
+        paneIsOpen: {
+            true: "right-[var(--litho-pane-width)]",
+            false: "right-0"
+        }
+    },
+    defaultVariants: {
+        visible: false,
+        tucked: false,
+        paneIsOpen: false
+    }
+});
+var toggleStyles = tv({
+    base: "Litho-FrameSaveBar__Toggle hidden @md:block bg-surface-alternate dark:bg-brand rounded-b-md fixed -translate-x-1/2 top-0 transition-transform duration-300 transform",
+    variants: {
+        tucked: {
+            true: "translate-y-0",
+            false: "-translate-y-full"
+        },
+        paneIsOpen: {
+            true: "left-[calc(50%-var(--litho-pane-width)/2)]",
+            false: "left-1/2"
+        }
+    },
+    defaultVariants: {
+        tucked: false,
+        paneIsOpen: false
+    }
+});
+/**
+ * FrameSaveBar component sisplays a save bar at the top of the screen with contextual save and discard actions.
+ * @param {Object} props.logo - Logo configuration.
+ * @returns {JSX.Element} The rendered FrameSaveBar component
+ */ function FrameSaveBar(param) {
+    var logo = param.logo;
+    var darkMode = useContext(DarkModeContext).darkMode;
+    var paneIsOpen = useContext(FrameContext).paneIsOpen;
+    var _useContext = useContext(FormContext), showGlobalContextualSaveBar = _useContext.showGlobalContextualSaveBar, message = _useContext.message, saveAction = _useContext.saveAction, discardAction = _useContext.discardAction;
+    var _useState = _sliced_to_array(useState(false), 2), visible = _useState[0], setVisible = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), show = _useState1[0], setShow = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(false), 2), tucked = _useState2[0], setTucked = _useState2[1];
+    useEffect(function() {
+        if (showGlobalContextualSaveBar) {
+            setVisible(true);
+            var timer = setTimeout(function() {
+                return setShow(true);
+            }, 10);
+            return function() {
+                return clearTimeout(timer);
+            };
+        } else {
+            setShow(false);
+            var timer1 = setTimeout(function() {
+                return setVisible(false);
+            }, 300);
+            return function() {
+                return clearTimeout(timer1);
+            };
+        }
+    }, [
+        showGlobalContextualSaveBar
+    ]);
+    var logoSource = darkMode ? logo.source : logo.darkSource;
+    if (!visible) return null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: toggleStyles({
+                    tucked: tucked,
+                    paneIsOpen: paneIsOpen
+                }),
+                children: /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Show save bar",
+                    position: "below",
+                    alignment: "center",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "cursor-pointer w-8 h-8 flex items-center justify-center",
+                        onClick: function() {
+                            return setTucked(false);
+                        },
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            source: ChevronDownMinor,
+                            color: "FrameSaveBar"
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles({
+                    visible: show,
+                    tucked: tucked,
+                    paneIsOpen: paneIsOpen
+                }),
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "hidden @md:block py-1 px-0.5 w-51.5",
+                        children: /*#__PURE__*/ _jsx("img", {
+                            src: logoSource,
+                            alt: logo.accessibilityLabel,
+                            style: (logo === null || logo === void 0 ? void 0 : logo.width) ? {
+                                width: logo.width
+                            } : undefined
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex-1 flex items-center justify-between gap-2",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-2 min-w-0",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingMd",
+                                        color: "FrameSaveBar",
+                                        truncate: true,
+                                        children: message
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "hidden @md:block",
+                                        children: /*#__PURE__*/ _jsx(Tooltip, {
+                                            content: "Hide save bar",
+                                            position: "below",
+                                            alignment: "center",
+                                            children: /*#__PURE__*/ _jsx("div", {
+                                                className: "cursor-pointer w-8 h-8 flex items-center justify-center hover:bg-tint-1 active:bg-tint-2 rounded-md",
+                                                onClick: function() {
+                                                    return setTucked(true);
+                                                },
+                                                children: /*#__PURE__*/ _jsx(Icon, {
+                                                    source: ChevronUpMinor,
+                                                    color: "FrameSaveBar"
+                                                })
+                                            })
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    discardAction && /*#__PURE__*/ _jsx(Button, {
+                                        primary: true,
+                                        onClick: discardAction.onAction,
+                                        loading: discardAction.loading,
+                                        accessibilityLabel: discardAction.accessibilityLabel,
+                                        disabled: discardAction.disabled,
+                                        className: discardAction.loading || discardAction.disabled ? "border-transparent!" : undefined,
+                                        children: discardAction.content
+                                    }),
+                                    saveAction && /*#__PURE__*/ _jsx(Button, {
+                                        highlight: true,
+                                        onClick: saveAction.onAction,
+                                        loading: saveAction.loading,
+                                        accessibilityLabel: saveAction.accessibilityLabel,
+                                        disabled: saveAction.disabled,
+                                        children: saveAction.content
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export default FrameSaveBar;