@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/components/Pane.js

@@ -1,10 +1,58 @@
 "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 { CancelMajor } from "@shopify/polaris-icons";
 import { tv } from "tailwind-variants";
-import { FrameContext } from "./AppProvider.js";
-import { createContext, useContext, useEffect, Children } from "react";
-import { Button } from "../index.js";
+import { createContext, useContext, useEffect, Children, useState } from "react";
+import Button from "./Button.js";
+import Popover from "./Popover.js";
+import ActionList from "./ActionList.js";
+import { useFrame } from "./Frame.js";
 var styles = tv({
     base: "Litho-Pane hidden md:block fixed inset-0 w-full md:left-auto md:max-w-100 block bg-surface-highest shadow-card-strong pointer-events-auto"
 });
@@ -15,7 +63,7 @@ var PaneContext = /*#__PURE__*/ createContext({});
 function Pane() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var open = props.open, onClose = props.onClose, children = props.children;
-    var setPaneIsOpen = useContext(FrameContext).setPaneIsOpen;
+    var setPaneIsOpen = useFrame().setPaneIsOpen;
     var classes = styles();
     useEffect(function() {
         setPaneIsOpen(open);
@@ -51,47 +99,77 @@ function Pane() {
 }
 function Header() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder;
+    var children = props.children, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder, subHeader = props.subHeader;
     var onClose = useContext(PaneContext).onClose;
     var showActionsOrClose = actions.length > 0 || showCloseButton;
     var childCount = Children.count(children);
+    var _useState = _sliced_to_array(useState(null), 2), showActionsPopover = _useState[0], setShowActionsPopover = _useState[1];
     return /*#__PURE__*/ _jsxs("div", {
-        className: "grid grid-cols-12 min-h-14 pl-4 pr-3 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
         children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: "grid grid-cols-5 col-span-10",
-                children: Children.map(children, function(child, index) {
-                    return /*#__PURE__*/ _jsx("div", {
-                        className: "flex col-span-2 items-center ".concat(childCount === 1 ? "col-span-5" : "", " ").concat(index > 0 ? "justify-center" : ""),
-                        children: child
-                    });
-                })
-            }),
-            showActionsOrClose && /*#__PURE__*/ _jsxs("div", {
-                className: "flex col-span-2 items-center justify-end",
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid grid-cols-12 min-h-14 px-2 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
                 children: [
-                    actions.map(function(action, index) {
-                        return /*#__PURE__*/ _jsx(Button, {
-                            plain: !action.destructive,
-                            onClick: action.onAction || action.onClick,
-                            disabled: action.disabled,
-                            icon: action.icon,
-                            loading: action.loading,
-                            external: action.external,
-                            url: action.url,
-                            destructive: action.destructive,
-                            tooltip: action.tooltip,
-                            tooltipPosition: "below"
-                        }, index);
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "grid grid-cols-5 col-span-10",
+                        children: Children.map(children, function(child, index) {
+                            return /*#__PURE__*/ _jsx("div", {
+                                className: "flex col-span-2 items-center ".concat(childCount === 1 ? "col-span-5" : "", " ").concat(index > 0 ? "justify-center" : ""),
+                                children: child
+                            });
+                        })
                     }),
-                    showCloseButton && /*#__PURE__*/ _jsx(Button, {
-                        plain: true,
-                        icon: CancelMajor,
-                        onClick: onClose,
-                        tooltip: "Close",
-                        tooltipPosition: "below"
+                    showActionsOrClose && /*#__PURE__*/ _jsxs("div", {
+                        className: "flex col-span-2 items-center justify-end",
+                        children: [
+                            actions.map(function(action, index) {
+                                var showPopover = action.subActions || action.subSections;
+                                var innerContent = /*#__PURE__*/ _jsx(Button, {
+                                    plain: !action.destructive,
+                                    onClick: showPopover ? function() {
+                                        return setShowActionsPopover(index);
+                                    } : action.onAction || action.onClick,
+                                    disabled: action.disabled,
+                                    icon: action.icon,
+                                    loading: action.loading,
+                                    external: action.external,
+                                    url: action.url,
+                                    destructive: action.destructive,
+                                    tooltip: action.tooltip && showActionsPopover !== index ? action.tooltip : undefined,
+                                    tooltipPosition: "below"
+                                }, index);
+                                if (showPopover) {
+                                    return /*#__PURE__*/ _jsx(Popover, {
+                                        active: showActionsPopover === index,
+                                        onClose: function() {
+                                            return setShowActionsPopover(null);
+                                        },
+                                        activator: innerContent,
+                                        preferredAlignment: "left",
+                                        children: /*#__PURE__*/ _jsx(ActionList, {
+                                            sections: action.subSections,
+                                            items: action.subActions,
+                                            onActionAnyItem: function() {
+                                                return setShowActionsPopover(null);
+                                            }
+                                        })
+                                    });
+                                }
+                                return innerContent;
+                            }),
+                            showCloseButton && /*#__PURE__*/ _jsx(Button, {
+                                plain: true,
+                                icon: CancelMajor,
+                                onClick: onClose,
+                                tooltip: "Close",
+                                tooltipPosition: "below"
+                            })
+                        ]
                     })
                 ]
+            }),
+            subHeader && /*#__PURE__*/ _jsx("div", {
+                className: "border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+                children: subHeader
             })
         ]
     });

package/dist/esm/components/Popover.js

@@ -98,7 +98,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     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 { useEffect, useId, useMemo, useRef, useState, useLayoutEffect } from "react";
+import React, { useEffect, useId, useMemo, useRef, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { tv } from "tailwind-variants";
 import PopoverManager from "./PopoverManager.js";
@@ -133,13 +133,13 @@ var styles = tv({
  * @param {boolean} [props.sectioned=false] - Whether the popover content is sectioned with padding.
  * @param {string} [props.preferredAlignment="center"] - Preferred alignment for the popover (left, center, right).
  * @param {string} [props.preferredPosition="below"] - Preferred position for the popover (above, below, cover).
- * @param {boolean|string} [props.autofocusTarget=false] - Automatically focus on the first focusable element in the popover.
  * @param {string} [props.className] - Additional class name for the popover.
  * @param {string} [props.containerClassName] - Additional class name for the popover container.
  * @returns {JSX.Element} The rendered popover component.
  */ function Popover() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var tmp = props.activatorWrapper, ActivatorWrapper = tmp === void 0 ? "div" : tmp, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, active = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_autofocusTarget = props.autofocusTarget, autofocusTarget = _props_autofocusTarget === void 0 ? false : _props_autofocusTarget, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName;
+    var activatorWrapper = props.activatorWrapper, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, active = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName;
+    var ActivatorWrapper = activatorWrapper || "div";
     var idValue = useId();
     var idRef = useRef(idValue);
     var initialWidthRef = useRef(null);
@@ -328,18 +328,30 @@ var styles = tv({
 }
 Popover.displayName = "Popover";
 var sectionStyles = tv({
-    base: "Litho-Popover__Section border-b border-edge-default last:border-b-0"
+    base: "Litho-Popover__Section border-b border-edge-default last:border-b-0",
+    variants: {
+        padded: {
+            true: "p-3",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        padded: false
+    }
 });
 /**
  * Section component for use within the Popover.
  *
  * @param {Object} props - The component props.
  * @param {React.ReactNode} [props.children] - The content of the section.
+ * @param {boolean} [props.padded=false] - Whether the section has padding.
  * @returns {JSX.Element} The rendered section.
  */ function Section() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, className = props.className;
-    var sectionClasses = sectionStyles();
+    var children = props.children, className = props.className, _props_padded = props.padded, padded = _props_padded === void 0 ? false : _props_padded;
+    var sectionClasses = sectionStyles({
+        padded: padded
+    });
     return /*#__PURE__*/ _jsx("div", {
         className: "".concat(sectionClasses).concat(className ? " ".concat(className) : ""),
         children: children

package/dist/esm/components/RangeSlider.js

@@ -47,7 +47,9 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState, useEffect } from "react";
-import { Label, Text, TextField } from "../index.js";
+import Label from "./Label.js";
+import Text from "./Text.js";
+import TextField from "./TextField.js";
 import { tv } from "tailwind-variants";
 var rangeStyles = tv({
     base: "Litho-RangeSlider__ActiveRange absolute left-0 top-1/2 -translate-y-1/2 rounded-l-full h-1 pointer-events-none",

package/dist/esm/components/ResourceList.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Spinner, VerticalStack } from "../index.js";
+import Spinner from "./Spinner.js";
+import VerticalStack from "./VerticalStack.js";
 var styles = tv({
     base: "Litho-ResourceList flex flex-col min-w-72",
     variants: {

package/dist/esm/components/Select.js

@@ -122,6 +122,8 @@ var contentStyles = tv({
  * @param {function} props.onFocus - Callback for when the select gains focus.
  * @param {function} props.onBlur - Callback for when the select loses focus.
  * @param {boolean} [props.requiredIndicator] - Whether to show a required indicator next to the label.
+ * @param {string} [props.className] - Additional CSS classes to apply to the select container.
+ * @param {string} [props.contentClassName] - Additional CSS classes to apply to the select content area.
  * @returns {JSX.Element} The rendered Select component.
  */ function Select() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};

package/dist/esm/components/Table.js

@@ -145,7 +145,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { SortAscendingMajor, SortDescendingMajor } from "@shopify/polaris-icons";
 import React, { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { ModalContext } from "./Modal.js";
-import { ActionList, Button, ButtonGroup, Card, Checkbox, EmptyState, Icon, Pagination, Popover, SkeletonText, Spinner, Text, Tooltip } from "../index.js";
+import ActionList from "./ActionList.js";
+import Button from "./Button.js";
+import ButtonGroup from "./ButtonGroup.js";
+import Card from "./Card.js";
+import Checkbox from "./Checkbox.js";
+import EmptyState from "./EmptyState.js";
+import Icon from "./Icon.js";
+import Pagination from "./Pagination.js";
+import Popover from "./Popover.js";
+import SkeletonText from "./SkeletonText.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
+import Tooltip from "./Tooltip.js";
 import { styles } from "../styles/Table.js";
 import { SelectionType } from "../utilities/useIndexResourceState.js";
 import { useMounted } from "../utilities/useMounted.js";
@@ -475,7 +487,8 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             alignment: alignment,
                             verticalAlign: verticalAlign,
                             tableIsSelectable: selectable,
-                            headingStyle: headingStyle
+                            headingStyle: headingStyle,
+                            bordered: bordered
                         }),
                         style: {
                             width: width,
@@ -750,7 +763,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
             ref: containerRef,
             children: [
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "relative overflow-hidden",
+                    className: "relative overflow-hidden ".concat(bordered ? "rounded-md" : ""),
                     children: [
                         loading ? /*#__PURE__*/ _jsx("div", {
                             className: "pt-9",

package/dist/esm/components/Text.js

@@ -128,7 +128,7 @@ var styles = tv({
             "btn-secondary-fg": "text-btn-secondary-fg",
             "tab-active-fg": "text-tab-active-fg",
             "tab-active-fg-low": "text-tab-active-fg-low",
-            "FrameSaveBar": "text-alternate dark:text-black"
+            FrameSaveBar: "text-alternate dark:text-black"
         },
         truncate: {
             true: "truncate",
@@ -231,10 +231,11 @@ var styles = tv({
  * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
  * @param {number} [props.clampLines] - Number of lines to clamp.
  * @param {boolean} [props.strike] - Whether to strike through the text.
+ * @param {React.ReactNode} [props.children] - The content to be displayed within the text component. Defaults to an empty string.
  * @returns {JSX.Element} Rendered text component with applied styles.
  */ function Text() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var alignment = props.alignment, as = props.as, className = props.className, color = props.color, fontWeight = props.fontWeight, truncate = props.truncate, variant = props.variant, visuallyHidden = props.visuallyHidden, clampLines = props.clampLines, strike = props.strike, rest = _object_without_properties(props, [
+    var alignment = props.alignment, as = props.as, className = props.className, color = props.color, fontWeight = props.fontWeight, truncate = props.truncate, variant = props.variant, visuallyHidden = props.visuallyHidden, clampLines = props.clampLines, strike = props.strike, children = props.children, rest = _object_without_properties(props, [
         "alignment",
         "as",
         "className",
@@ -244,7 +245,8 @@ var styles = tv({
         "variant",
         "visuallyHidden",
         "clampLines",
-        "strike"
+        "strike",
+        "children"
     ]);
     var classes = styles({
         alignment: alignment,
@@ -256,10 +258,10 @@ var styles = tv({
         clampLines: clampLines,
         strike: strike
     });
-    var Element = as || (visuallyHidden ? 'span' : 'p');
+    var Element = as || (visuallyHidden ? "span" : "p");
     return /*#__PURE__*/ _jsx(Element, _object_spread_props(_object_spread({}, rest), {
-        className: "".concat(classes).concat(className ? " ".concat(className) : '')
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: children
     }));
 }
-;
 export default Text;

package/dist/esm/components/TextField.js

@@ -49,7 +49,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CancelSmallMinor, CaretDownMinor, CaretUpMinor, CircleAlertMajor } from "@shopify/polaris-icons";
 import React, { useEffect, useId, useMemo, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { Button, Icon, InlineError, Label, Link, Text } from "../index.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import InlineError from "./InlineError.js";
+import Label from "./Label.js";
+import Link from "./Link.js";
+import Text from "./Text.js";
 var styles = tv({
     base: "Litho-TextField group relative rounded-md border min-h-8 cursor-text",
     variants: {

package/dist/esm/components/Thumbnail.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Icon } from "../index.js";
+import Icon from "./Icon.js";
 import { ImageMajor } from "@shopify/polaris-icons";
 var imageContainerStyles = tv({
     base: "relative flex items-center justify-center overflow-hidden rounded-lg border border-tint-4 bg-surface-higher group",

package/dist/esm/components/TimePicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextField } from "../index.js";
+import TextField from "./TextField.js";
 function TimePicker() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_label = props.label, label = _props_label === void 0 ? "Time:" : _props_label, _props_labelInline = props.labelInline, labelInline = _props_labelInline === void 0 ? true : _props_labelInline, value = props.value, onChange = props.onChange;

package/dist/esm/components/Tip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement, isValidElement, useMemo } from "react";
 import { tv } from "tailwind-variants";
-import { Icon } from "../index.js";
+import Icon from "./Icon.js";
 import { AlertMinor, CancelMinor, InfoMinor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Tip relative flex rounded-md p-2",
@@ -118,8 +118,9 @@ var statusHelpers = {
     var processedChildren = useMemo(function() {
         var processChildren = function(children) {
             return React.Children.toArray(children).map(function(child) {
+                var _child_type;
                 if (!/*#__PURE__*/ isValidElement(child)) return child;
-                if (child.type.displayName === "Link") {
+                if (((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) === "Link") {
                     return /*#__PURE__*/ cloneElement(child, {
                         color: status
                     });

package/dist/esm/components/Tooltip.js

@@ -81,7 +81,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { tv } from "tailwind-variants";
-import { Text, VerticalStack, List, Icon } from "../index.js";
+import Text from "./Text.js";
+import VerticalStack from "./VerticalStack.js";
+import List from "./List.js";
+import Icon from "./Icon.js";
 import { CircleInformationMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-TooltipContainer relative w-auto h-auto",

package/dist/esm/components/TopBar.js

@@ -46,11 +46,14 @@ function _unsupported_iterable_to_array(o, minLen) {
     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 { useContext, useState } from "react";
-import { FrameContext } from "./AppProvider.js";
+import { useState } from "react";
 import { MobileHamburgerMajor } from "@shopify/polaris-icons";
 import { tv } from "tailwind-variants";
-import { ActionList, Button, Popover, Text } from "../index.js";
+import ActionList from "./ActionList.js";
+import Button from "./Button.js";
+import Popover from "./Popover.js";
+import Text from "./Text.js";
+import { useFrame } from "./Frame.js";
 var styles = tv({
     base: "Litho-TopBar flex items-center h-[var(--litho-header-height)] border-b border-edge-subdued dark:border-edge-alt-subdued"
 });
@@ -68,7 +71,7 @@ var styles = tv({
  */ function TopBar() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var hasNavigation = props.hasNavigation, userMenu = props.userMenu, searchTrigger = props.searchTrigger, alwaysShowUserMenuInTopBar = props.alwaysShowUserMenuInTopBar, headerAccessory = props.headerAccessory;
-    var setShowMobileNavigation = useContext(FrameContext).setShowMobileNavigation;
+    var setShowMobileNavigation = useFrame().setShowMobileNavigation;
     var classes = styles();
     return /*#__PURE__*/ _jsxs("div", {
         className: classes,

package/dist/esm/dev/verify-publish.js

@@ -18,25 +18,58 @@ function _templateObject() {
     };
     return data;
 }
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "npm view @heymantle/litho dist.shasum"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "npm run build && npm pack --dry-run"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 import semver from "semver";
 var packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"));
 var currentVersion = packageJson.version;
 var npmVersion = await $(_templateObject()).text();
+var npmShaSum = await $(_templateObject1()).text();
+var packResult = await $(_templateObject2()).text();
+var localShaSum = packResult.match(/shasum\: (.*)\n/)[1];
+if (npmShaSum === localShaSum) {
+    var continuePublish = await question("NPM and local shasums match. Continue with publish? (y/n) ", {
+        choices: [
+            "y",
+            "n"
+        ]
+    });
+    if (continuePublish === "n") {
+        process.exit(0);
+    }
+}
 if (semver.gte(npmVersion, currentVersion)) {
-    var shouldIncrement = await question("npm version is greater than package.json version. Increment local version? (y/n)", {
+    var shouldIncrement = await question("npm version is greater than package.json version. Increment local version? (y/n) ", {
         choices: [
             "y",
             "n"
         ]
     });
     if (shouldIncrement === "y") {
-        var versionType = await question("Which type of release is this? (patch/minor/major)", {
+        var defaultVersionType = "patch";
+        var versionType = await question("Which type of release is this (default: patch)? (patch/minor/major) ", {
             choices: [
                 "patch",
                 "minor",
                 "major"
             ]
-        });
+        }) || defaultVersionType;
         if (![
             "patch",
             "minor",
@@ -48,7 +81,7 @@ if (semver.gte(npmVersion, currentVersion)) {
         var newVersion = semver.inc(currentVersion, versionType);
         packageJson.version = newVersion;
         await fs.writeFile("package.json", JSON.stringify(packageJson, null, 2));
-        echo("Incremented version to ".concat(newVersion));
+        echo("Incremented version to ".concat(newVersion, ". Remember to commit and push the version update."));
         process.exit(0);
     } else {
         echo("Cannot publish if npm version is greater or equal to local version");

package/dist/esm/postcss.config.js

@@ -0,0 +1,6 @@
+import tailwind from "@tailwindcss/postcss";
+export default {
+    plugins: [
+        tailwind
+    ]
+};