@heymantle/litho 0.0.1

package/dist/cjs/utilities/useTableScrollState.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _react = require("react");
+var _usedebounce = require("use-debounce");
+/**
+ * A custom hook to manage table scroll state and column widths.
+ *
+ * @param {Object} params - Parameters for the hook.
+ * @param {boolean} params.loading - Indicates if data is loading.
+ * @param {React.RefObject<HTMLDivElement>} params.containerRef - Reference to the container element.
+ * @param {React.RefObject<HTMLDivElement>} params.tableContainerRef - Reference to the table container element.
+ * @param {Function} params.setCanScrollLeft - Function to set the scrollable state on the left.
+ * @param {Function} params.setCanScrollRight - Function to set the scrollable state on the right.
+ * @param {Function} params.setColumnWidths - Function to set the column widths.
+ * @param {Function} params.setRowHeights - Function to set the row heights.
+ * @param {Function} params.setIsHeaderSticky - Function to set the sticky state of the header.
+ * @param {boolean} params.insideModal - Indicates if the table exists in a modal.
+ * @param {any} params.children - Table children elements (triggers recalculations).
+ */ var useTableScrollState = function(param) {
+    var loading = param.loading, idRef = param.idRef, containerRef = param.containerRef, tableContainerRef = param.tableContainerRef, setCanScrollLeft = param.setCanScrollLeft, setCanScrollRight = param.setCanScrollRight, setColumnWidths = param.setColumnWidths, setRowHeights = param.setRowHeights, setIsHeaderSticky = param.setIsHeaderSticky, stickyHeader = param.stickyHeader, children = param.children, showHoverStates = param.showHoverStates, insideModal = param.insideModal, itemCount = param.itemCount;
+    var columnWidthsRef = (0, _react.useRef)([]);
+    var rowHeightsRef = (0, _react.useRef)([]);
+    var styleSheetRef = (0, _react.useRef)(null);
+    var root = document.documentElement;
+    var cssValue = getComputedStyle(root).getPropertyValue('--litho-table-header-sticky-at').trim();
+    var becomeStickyAt = parseInt(cssValue || 56, 10);
+    (0, _react.useEffect)(function() {
+        if (!styleSheetRef.current) {
+            var styleElement = document.createElement("style");
+            document.head.appendChild(styleElement);
+            styleSheetRef.current = styleElement.sheet;
+        }
+    }, []);
+    (0, _react.useEffect)(function() {
+        if (!tableContainerRef.current || !showHoverStates) return;
+        var container = containerRef.current;
+        var rows = container.querySelectorAll("tr[data-position]");
+        var handleMouseEnter = function(e) {
+            var interactive = e.currentTarget.getAttribute("data-interactive") === "true";
+            if (!interactive) return;
+            var tbody = e.currentTarget.closest("tbody");
+            if (!tbody) return;
+            var rows = Array.from(tbody.children).filter(function(row) {
+                return row.tagName === "TR";
+            });
+            var rowIndex = rows.indexOf(e.currentTarget) + 1;
+            if (styleSheetRef.current) {
+                while(styleSheetRef.current.cssRules.length){
+                    styleSheetRef.current.deleteRule(0);
+                }
+                styleSheetRef.current.insertRule('[data-id="'.concat(idRef.current, '"] tbody tr:nth-child(').concat(rowIndex, ") { background-color: var(--color-surface-higher); }"), 0);
+            }
+        };
+        var handleMouseLeave = function() {
+            if (styleSheetRef.current) {
+                while(styleSheetRef.current.cssRules.length){
+                    styleSheetRef.current.deleteRule(0);
+                }
+            }
+        };
+        rows.forEach(function(row) {
+            row.addEventListener("mouseenter", handleMouseEnter);
+            row.addEventListener("mouseleave", handleMouseLeave);
+        });
+        return function() {
+            rows.forEach(function(row) {
+                row.removeEventListener("mouseenter", handleMouseEnter);
+                row.removeEventListener("mouseleave", handleMouseLeave);
+            });
+        };
+    }, [
+        loading,
+        containerRef,
+        tableContainerRef,
+        itemCount
+    ]);
+    var updateScrollState = (0, _react.useCallback)(function() {
+        if (!tableContainerRef.current) return;
+        var container = tableContainerRef.current;
+        requestAnimationFrame(function() {
+            var scrollLeft = container.scrollLeft, clientWidth = container.clientWidth, scrollWidth = container.scrollWidth;
+            setCanScrollLeft(scrollLeft > 0);
+            setCanScrollRight(scrollLeft + clientWidth + 4 < scrollWidth);
+            var firstRowCells = container.querySelectorAll("tbody > tr:first-child td");
+            var rowCells = container.querySelectorAll("tbody > tr");
+            columnWidthsRef.current = Array.from(firstRowCells).map(function(td) {
+                return td.offsetWidth;
+            });
+            rowHeightsRef.current = Array.from(rowCells).map(function(tr) {
+                return tr.getBoundingClientRect().height;
+            });
+            setColumnWidths(columnWidthsRef.current);
+            setRowHeights(rowHeightsRef.current);
+        });
+    }, [
+        tableContainerRef,
+        setCanScrollLeft,
+        setCanScrollRight,
+        setColumnWidths,
+        setRowHeights
+    ]);
+    var checkIfTableIsOutOfView = (0, _react.useCallback)(function() {
+        if (!tableContainerRef.current || insideModal) return;
+        var rect = tableContainerRef.current.getBoundingClientRect();
+        var isOutOfView = rect.bottom <= becomeStickyAt + 36 || rect.top >= window.innerHeight;
+        setIsHeaderSticky(stickyHeader && !isOutOfView && rect.top <= becomeStickyAt);
+    }, [
+        tableContainerRef,
+        setIsHeaderSticky
+    ]);
+    var debouncedUpdateScrollState = (0, _usedebounce.useDebouncedCallback)(updateScrollState, 30);
+    (0, _react.useEffect)(function() {
+        if (!tableContainerRef.current) return;
+        var container = tableContainerRef.current;
+        container.addEventListener("scroll", debouncedUpdateScrollState);
+        window.addEventListener("resize", debouncedUpdateScrollState);
+        window.addEventListener("scroll", checkIfTableIsOutOfView);
+        updateScrollState();
+        return function() {
+            container.removeEventListener("scroll", debouncedUpdateScrollState);
+            window.removeEventListener("resize", debouncedUpdateScrollState);
+            window.removeEventListener("scroll", checkIfTableIsOutOfView);
+        };
+    }, [
+        debouncedUpdateScrollState,
+        updateScrollState,
+        children,
+        loading,
+        tableContainerRef.current,
+        becomeStickyAt
+    ]);
+    return updateScrollState;
+};
+var _default = useTableScrollState;

package/dist/esm/components/ActionList.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { tv } from "tailwind-variants";
+import { Icon, Text, Tooltip } from "../index.js";
+import { MobileHorizontalDotsMajor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-ActionList",
+    variants: {
+        fullWidth: {
+            true: "w-full",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        fullWidth: false
+    }
+});
+var sectionStyles = tv({
+    base: "Litho-ActionList__Section border-b border-edge-default last:border-b-0",
+    variants: {
+        padded: {
+            true: "p-2",
+            false: ""
+        }
+    }
+});
+var itemStyles = tv({
+    base: "Litho-ActionList__Item flex items-center gap-2 py-1.5 px-2.5 rounded-md truncate focus:outline-none focus:ring-2 focus:ring-inset focus:ring-transparent focus:ring-offset-2 focus:ring-offset-form-focus-active",
+    variants: {
+        disabled: {
+            true: "cursor-not-allowed hover:bg-transparent",
+            false: "cursor-pointer"
+        },
+        destructive: {
+            true: "hover:bg-form-bg-error-low",
+            false: "hover:bg-tint-2 active:bg-tint-3"
+        }
+    },
+    defaultVariants: {
+        disabled: false,
+        destructive: false
+    }
+});
+/**
+ * ActionList component renders a list of actionable items with optional sections.
+ * Supports keyboard navigation and action triggers on item selection.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {Array} [props.sections] - Sections containing items for the action list.
+ * Each section has a title and a list of items.
+ * @param {Array} [props.items] - List of items to render in the action list when no sections are provided.
+ * @param {string} [props.iconColor="subdued"] - Default color for icons in the action items.
+ * @param {function} [props.onActionAnyItem] - Callback function invoked whenever any action item is selected.
+ * @param {boolean} [props.fullWidth=false] - Whether to apply full width styling to the action list.
+ * @param {boolean} [props.showSecondaryAction=false] - Whether to show the secondary action icon.
+ * @example
+ * const items = [{ content: 'Item 1', onAction: () => {} }];
+ * <ActionList items={items} />
+ *
+ * @returns {JSX.Element} The rendered ActionList component.
+ */ function ActionList() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var sections = props.sections, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, tmp = props.items, initialItems = tmp === void 0 ? [] : tmp, tmp1 = props.iconColor, _iconColor = tmp1 === void 0 ? "subdued" : tmp1, onActionAnyItem = props.onActionAnyItem, className = props.className, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth;
+    var sectionTitleAsKeys = true;
+    var items = initialItems || (sections ? sections.flatMap(function(section) {
+        return section.items;
+    }) : []);
+    var actionListRef = useRef(null);
+    var itemRefs = useRef([]);
+    var handleKeyDown = function(e) {
+        if (!actionListRef.current.contains(e.target)) return;
+        var enabledItems = itemRefs.current.filter(function(ref) {
+            return ref && ref.getAttribute("tabIndex") !== "-1";
+        });
+        var focusedIndex = enabledItems.findIndex(function(ref) {
+            return ref === document.activeElement;
+        });
+        if (e.key === "ArrowDown") {
+            var nextIndex = (focusedIndex + 1) % enabledItems.length;
+            enabledItems[nextIndex].focus();
+            e.preventDefault();
+        } else if (e.key === "ArrowUp") {
+            var prevIndex = (focusedIndex - 1 + enabledItems.length) % enabledItems.length;
+            enabledItems[prevIndex].focus();
+            e.preventDefault();
+        } else if (e.key === "Enter") {
+            var focusedItem = enabledItems[focusedIndex];
+            if (focusedItem) {
+                focusedItem.click();
+                e.preventDefault();
+            }
+        }
+    };
+    useEffect(function() {
+        window.addEventListener("keydown", handleKeyDown);
+        return function() {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+    var classes = styles({
+        fullWidth: fullWidth
+    });
+    var sectionClasses = sectionStyles({
+        padded: padded
+    });
+    var isSectioned = sections && sections.length > 0;
+    if (isSectioned) {
+        sectionTitleAsKeys = sections.every(function(section) {
+            return Object.prototype.hasOwnProperty.call(section, "title");
+        });
+    }
+    var ActionListItem = function(param) {
+        var item = param.item, index = param.index;
+        var content = item.content, disabled = item.disabled, destructive = item.destructive, icon = item.icon, onAction = item.onAction, prefix = item.prefix, imageUrl = item.imageUrl, url = item.url, secondaryAction = item.secondaryAction;
+        var iconColor = disabled ? "disabled" : destructive ? "critical" : _iconColor;
+        var textColor = disabled ? "disabled" : destructive ? "critical" : "default";
+        var itemClasses = itemStyles({
+            disabled: disabled,
+            destructive: destructive
+        });
+        var secondaryActionContent = secondaryAction ? /*#__PURE__*/ _jsx("div", {
+            className: "Litho-ActionList__Item__SecondaryAction rounded-sm px-1 hover:bg-tint-2 active:bg-tint-3",
+            onClick: function(e) {
+                e.stopPropagation();
+                secondaryAction.onAction();
+            },
+            children: /*#__PURE__*/ _jsx(Icon, {
+                source: (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.icon) || MobileHorizontalDotsMajor,
+                color: "subdued"
+            })
+        }) : null;
+        return /*#__PURE__*/ _jsxs("a", {
+            ref: function(el) {
+                return itemRefs.current[index] = el;
+            },
+            className: itemClasses,
+            tabIndex: disabled ? -1 : 0,
+            onClick: function(e) {
+                e.stopPropagation();
+                if (disabled) return;
+                if (onAction) onAction();
+                if (url) window.open(url, "_blank");
+                if (onActionAnyItem) onActionAnyItem();
+            },
+            children: [
+                prefix ? /*#__PURE__*/ _jsx("div", {
+                    className: "Litho-ActionList__Item__Prefix w-5 h-5 flex items-center justify-center shrink-0",
+                    children: prefix
+                }) : icon ? /*#__PURE__*/ _jsx("div", {
+                    className: "Litho-ActionList__Item__Icon shrink-0",
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        source: icon,
+                        color: iconColor,
+                        stroke: item === null || item === void 0 ? void 0 : item.iconStroke,
+                        display: item === null || item === void 0 ? void 0 : item.iconDisplay
+                    })
+                }) : imageUrl ? /*#__PURE__*/ _jsx("div", {
+                    className: "Litho-ActionList__Item__Image shrink-0",
+                    children: /*#__PURE__*/ _jsx("img", {
+                        src: imageUrl,
+                        alt: content,
+                        className: "w-5 h-5 rounded-sm"
+                    })
+                }) : null,
+                /*#__PURE__*/ _jsx("div", {
+                    className: "flex-1",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        color: textColor,
+                        truncate: true,
+                        children: content
+                    })
+                }),
+                (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.tooltip) ? /*#__PURE__*/ _jsx(Tooltip, {
+                    content: secondaryAction.tooltip,
+                    children: secondaryActionContent
+                }) : secondaryActionContent
+            ]
+        });
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        ref: actionListRef,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        tabIndex: -1,
+        children: isSectioned ? sections.map(function(section, sectionIndex) {
+            return /*#__PURE__*/ _jsxs("div", {
+                className: sectionClasses,
+                children: [
+                    section.title && /*#__PURE__*/ _jsx("div", {
+                        className: "Litho-ActionList__SectionTitle px-2 py-1",
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: section.title
+                        })
+                    }),
+                    section.items.map(function(item, itemIndex) {
+                        return /*#__PURE__*/ _jsx(ActionListItem, {
+                            item: item,
+                            index: sectionIndex * section.items.length + itemIndex
+                        }, "item-".concat(sectionIndex, "-").concat(itemIndex));
+                    })
+                ]
+            }, sectionTitleAsKeys ? section.title : sectionIndex);
+        }) : /*#__PURE__*/ _jsx("div", {
+            className: sectionClasses,
+            children: items.map(function(item, itemIndex) {
+                return /*#__PURE__*/ _jsx(ActionListItem, {
+                    item: item,
+                    index: itemIndex
+                }, "item-".concat(itemIndex));
+            })
+        })
+    });
+}
+export default ActionList;

package/dist/esm/components/AnnouncementBar.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { Text, Icon } from "../index.js";
+var styles = tv({
+    base: "Litho-AnnouncementBar text-center p-2 min-h-10 flex items-center justify-center bg-brand",
+    variants: {
+        fixed: {
+            true: "fixed top-0 left-0 right-0"
+        },
+        interactive: {
+            true: "cursor-pointer hover:bg-brand-low active:bg-brand-lower",
+            false: ""
+        }
+    }
+});
+var iconContainerStyles = tv({
+    base: "Litho-AnnouncementBar__IconContainer",
+    variants: {
+        animateIcon: {
+            bounce: "animate-bounce"
+        }
+    }
+});
+/**
+ * AnnouncementBar Component
+ *
+ * @param {Object} props - Component properties.
+ * @param {Function} [props.onClick] - Click handler function.
+ * @param {string} props.content - Text content to be displayed.
+ * @param {string} [props.icon] - Icon source name.
+ * @param {"bounce"} [props.animateIcon] - Animation type for the icon.
+ *
+ * @returns {JSX.Element} AnnouncementBar component.
+ */ function AnnouncementBar() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var onClick = props.onClick, content = props.content, icon = props.icon, animateIcon = props.animateIcon, _props_fixed = props.fixed, fixed = _props_fixed === void 0 ? false : _props_fixed;
+    return /*#__PURE__*/ _jsx("div", {
+        className: styles({
+            fixed: fixed,
+            interactive: !!onClick
+        }),
+        onClick: onClick,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center justify-center gap-4",
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    fontWeight: "medium",
+                    className: "text-md",
+                    children: content
+                }),
+                icon && /*#__PURE__*/ _jsx("div", {
+                    className: iconContainerStyles({
+                        animateIcon: animateIcon
+                    }),
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        source: icon
+                    })
+                })
+            ]
+        })
+    });
+}
+export default AnnouncementBar;

package/dist/esm/components/AppProvider.js

@@ -0,0 +1,185 @@
+"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 React, { createContext, useState, useEffect, useContext } from "react";
+/**
+ * @typedef {Object} DarkModeContextType
+ * @property {boolean} darkModeAvailable - Whether dark mode is available.
+ * @property {boolean} darkMode - Whether dark mode is enabled.
+ * @property {(darkMode: boolean) => void} toggleDarkMode - Toggle dark mode.
+ * @property {(darkModeAvailable: boolean) => void} setDarkModeAvailable - Set dark mode availability.
+ */ export var DarkModeContext = /*#__PURE__*/ createContext(null);
+/**
+ * @returns {DarkModeContextType}
+ */ export var useDarkMode = function() {
+    return useContext(DarkModeContext);
+};
+export var FrameContext = /*#__PURE__*/ createContext({
+    embedded: false,
+    paneIsOpen: false,
+    setPaneIsOpen: function() {},
+    modalIsOpen: false,
+    setModalIsOpen: function() {},
+    showMobileNavigation: false,
+    contentIsInIframe: false,
+    contentIsFullPage: false,
+    setShowMobileNavigation: function() {},
+    setContentIsInIframe: function() {},
+    setContentIsFullPage: function() {}
+});
+export var FormContext = /*#__PURE__*/ 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(useState(false), 2), showMobileNavigation = _useState[0], setShowMobileNavigation = _useState[1];
+    var _useState1 = _sliced_to_array(useState(_darkModeAvailable), 2), darkModeAvailable = _useState1[0], setDarkModeAvailable = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(false), 2), contentIsInIframe = _useState2[0], setContentIsInIframe = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(false), 2), contentIsFullPage = _useState3[0], setContentIsFullPage = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(false), 2), modalIsOpen = _useState4[0], setModalIsOpen = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(false), 2), paneIsOpen = _useState5[0], setPaneIsOpen = _useState5[1];
+    var _useState6 = _sliced_to_array(useState(false), 2), showGlobalContextualSaveBar = _useState6[0], setShowGlobalContextualSaveBar = _useState6[1];
+    var _useState7 = _sliced_to_array(useState(null), 2), message = _useState7[0], setMessage = _useState7[1];
+    var _useState8 = _sliced_to_array(useState(null), 2), saveAction = _useState8[0], setSaveAction = _useState8[1];
+    var _useState9 = _sliced_to_array(useState(null), 2), discardAction = _useState9[0], setDiscardAction = _useState9[1];
+    var _useState10 = _sliced_to_array(useState(false), 2), darkMode = _useState10[0], setDarkMode = _useState10[1];
+    var _useState11 = _sliced_to_array(useState(false), 2), isClient = _useState11[0], setIsClient = _useState11[1];
+    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
+    ]);
+    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__*/ _jsx(DarkModeContext.Provider, {
+        value: {
+            darkModeAvailable: darkModeAvailable,
+            darkMode: darkMode,
+            toggleDarkMode: toggleDarkMode,
+            setDarkModeAvailable: setDarkModeAvailable
+        },
+        children: /*#__PURE__*/ _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__*/ _jsx(FormContext.Provider, {
+                value: {
+                    showGlobalContextualSaveBar: showGlobalContextualSaveBar,
+                    setShowGlobalContextualSaveBar: setShowGlobalContextualSaveBar,
+                    message: message,
+                    setMessage: setMessage,
+                    saveAction: saveAction,
+                    setSaveAction: setSaveAction,
+                    discardAction: discardAction,
+                    setDiscardAction: setDiscardAction
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "app-wrapper ".concat(embedded ? "@container" : ""),
+                    children: children
+                })
+            })
+        })
+    });
+}
+export default AppProvider;