@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/components/ActionList.js

@@ -12,8 +12,15 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -94,18 +101,38 @@ var itemStyles = (0, _tailwindvariants.tv)({
     }
 });
 /**
+ * @typedef {Object} SecondaryAction
+ * @property {React.FunctionComponent<React.SVGProps<SVGSVGElement>>} icon - The icon to display for the secondary action.
+ * @property {string} tooltip - The tooltip to display for the secondary action.
+ * @property {function} onAction - The function to call when the secondary action is selected.
+ */ /**
+ * @typedef {Object} ActionListSection
+ * @property {string} title - The title of the section.
+ * @property {Array<ActionListItem>} items - The items to display in the section.
+ */ /**
+ * @typedef {Object} ActionListItem - An object representing an item in the action list.
+ * @property {string} content - The text content of the action item.
+ * @property {boolean} disabled - Whether the action item is disabled.
+ * @property {boolean} destructive - Whether the action item is destructive.
+ * @property {React.FunctionComponent<React.SVGProps<SVGSVGElement>>} icon - The icon to display for the action item.
+ * @property {function} onAction - The function to call when the action item is selected.
+ * @property {React.ReactNode} prefix - The prefix to display for the action item.
+ * @property {string} imageUrl - The image to display for the action item.
+ * @property {string} url - The URL to navigate to when the action item is selected.
+ * @property {SecondaryAction} secondaryAction - The secondary action to display for the action item.
+ */ /**
  * 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 {Array<{title: string, items: Array<ActionListItem>}>} [props.sections] - Sections containing items for the action list.
+ * @param {Array<ActionListItem>} [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.
+ * @param {boolean} [props.padded=true] - Whether to apply padding to the action list.
+ * @param {string} [props.className] - Additional CSS classes to apply to the action list.
  * @example
  * const items = [{ content: 'Item 1', onAction: () => {} }];
  * <ActionList items={items} />
@@ -164,7 +191,7 @@ var itemStyles = (0, _tailwindvariants.tv)({
     }
     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 content = item.content, description = item.description, 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({
@@ -177,7 +204,7 @@ var itemStyles = (0, _tailwindvariants.tv)({
                 e.stopPropagation();
                 secondaryAction.onAction();
             },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                 source: (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.icon) || _polarisicons.MobileHorizontalDotsMajor,
                 color: "subdued"
             })
@@ -201,7 +228,7 @@ var itemStyles = (0, _tailwindvariants.tv)({
                     children: prefix
                 }) : icon ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                     className: "Litho-ActionList__Item__Icon shrink-0",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                         source: icon,
                         color: iconColor,
                         stroke: item === null || item === void 0 ? void 0 : item.iconStroke,
@@ -215,15 +242,22 @@ var itemStyles = (0, _tailwindvariants.tv)({
                         className: "w-5 h-5 rounded-sm"
                     })
                 }) : null,
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                     className: "flex-1",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
-                        color: textColor,
-                        truncate: true,
-                        children: content
-                    })
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            color: textColor,
+                            truncate: true,
+                            children: content
+                        }),
+                        description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            color: "subdued",
+                            variant: "bodySm",
+                            children: description
+                        })
+                    ]
                 }),
-                (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.tooltip) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.tooltip) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                     content: secondaryAction.tooltip,
                     children: secondaryActionContent
                 }) : secondaryActionContent
@@ -240,7 +274,7 @@ var itemStyles = (0, _tailwindvariants.tv)({
                 children: [
                     section.title && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "Litho-ActionList__SectionTitle px-2 py-1",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                             variant: "headingSm",
                             children: section.title
                         })

package/dist/cjs/components/AnnouncementBar.js

@@ -10,7 +10,13 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-AnnouncementBar text-center p-2 min-h-10 flex items-center justify-center bg-brand",
     variants: {
@@ -39,6 +45,7 @@ var iconContainerStyles = (0, _tailwindvariants.tv)({
  * @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.
+ * @param {boolean} [props.fixed] - Whether to fix the announcement bar to the top of the page.
  *
  * @returns {JSX.Element} AnnouncementBar component.
  */ function AnnouncementBar() {
@@ -53,7 +60,7 @@ var iconContainerStyles = (0, _tailwindvariants.tv)({
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
             className: "flex items-center justify-center gap-4",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                     fontWeight: "medium",
                     className: "text-md",
                     children: content
@@ -62,7 +69,7 @@ var iconContainerStyles = (0, _tailwindvariants.tv)({
                     className: iconContainerStyles({
                         animateIcon: animateIcon
                     }),
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                         source: icon
                     })
                 })

package/dist/cjs/components/AppProvider.js

@@ -117,7 +117,16 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var DarkModeContext = /*#__PURE__*/ (0, _react.createContext)(null);
 var useDarkMode = function() {
-    return (0, _react.useContext)(DarkModeContext);
+    var context = (0, _react.useContext)(DarkModeContext);
+    if (!context) {
+        return {
+            darkModeAvailable: false,
+            darkMode: false,
+            toggleDarkMode: function() {},
+            setDarkModeAvailable: function() {}
+        };
+    }
+    return context;
 };
 var FrameContext = /*#__PURE__*/ (0, _react.createContext)({
     embedded: false,

package/dist/cjs/components/Autocomplete.js

@@ -12,7 +12,12 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("./TextField"));
+var _Checkbox = /*#__PURE__*/ _interop_require_default(require("./Checkbox"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
 var _polarisicons = require("@shopify/polaris-icons");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -38,6 +43,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -185,18 +195,30 @@ function attachPropToTextField(children, prop) {
     });
 }
 /**
+ * @typedef {Object} AutocompleteOption
+ * @property {string} label - The label to display for the option.
+ * @property {string} value - The value to associate with the option.
+ * @property {string} [title] - An optional title to display for the option.
+ * @property {boolean} [allowMultiple] - Whether multiple options can be selected.
+ * @property {string} [selected] - The value of the option that is currently selected.
+ * @property {function} [onSelect] - The function to call when the option is selected.
+ * @property {Array<AutocompleteOption>} [options] - An optional array of sub-options to display for the option.
+ */ /**
+ * @typedef {Object} AutocompleteEmptyState
+ * @property {string} content - The content to display in the empty state.
+ * @property {React.ReactNode} icon - An optional icon to display in the empty state.
+ */ /**
  * Autocomplete component that provides a flexible dropdown menu with search and selection capabilities.
  *
  * @component
  * @param {Object} props - The props for the Autocomplete component.
- * @param {Array<Object>} props.options - The options to display in the dropdown. Each option should have a `label` and a `value`.
+ * @param {Array<AutocompleteOption>} props.options - The options to display in the dropdown.
  * @param {Array<string>} props.selected - The currently selected option values.
  * @param {"below"|"above"} [props.preferredPosition="below"] - The preferred position of the dropdown relative to the activator.
  * @param {"left"|"center"|"right"} [props.preferredAlignment="left"] - The preferred alignment of the dropdown.
  * @param {boolean} [props.allowMultiple=false] - Whether multiple options can be selected.
  * @param {boolean} [props.loading=false] - Whether to show a loading spinner in the dropdown.
- * @param {Object} [props.emptyState] - The content to display when there are no options.
- * @param {React.ReactNode} [props.emptyState.icon] - An optional icon to display in the empty state.
+ * @param {AutocompleteEmptyState} [props.emptyState] - The content to display when there are no options.
  * @param {function(Array<string>)} props.onSelect - Callback fired when the selection changes. Receives the new selected values.
  * @param {React.ReactNode} props.textField - The activator for the dropdown, typically a `TextField` component.
  * @param {string} [props.className] - Additional class names to apply to the component.
@@ -226,17 +248,25 @@ function attachPropToTextField(children, prop) {
         var option = param.option, allowMultiple = param.allowMultiple, selected = param.selected, onSelect = param.onSelect, setShowOptionsPopover = param.setShowOptionsPopover;
         var isChecked = selected.includes(option.value);
         if (allowMultiple) {
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
-                label: option.label,
-                checked: isChecked,
-                onChange: function() {
-                    onSelect(isChecked ? selected.filter(function(v) {
-                        return v !== option.value;
-                    }) : _to_consumable_array(selected).concat([
-                        option.value
-                    ]));
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                onMouseDown: function(e) {
+                    e.preventDefault();
                 },
-                className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+                onClick: function(e) {
+                    e.stopPropagation();
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: option.label,
+                    checked: isChecked,
+                    onChange: function() {
+                        onSelect(isChecked ? selected.filter(function(v) {
+                            return v !== option.value;
+                        }) : _to_consumable_array(selected).concat([
+                            option.value
+                        ]));
+                    },
+                    className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+                })
             });
         }
         return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -252,7 +282,7 @@ function attachPropToTextField(children, prop) {
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
             active: showOptionsPopover,
             preferredPosition: preferredPosition,
             preferredAlignment: preferredAlignment,
@@ -270,17 +300,17 @@ function attachPropToTextField(children, prop) {
             zIndexOverride: zIndexOverride,
             children: loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "py-4 flex justify-center items-center",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                     size: "small"
                 })
             }) : showEmptyState ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "py-4 flex flex-col gap-1 justify-center items-center",
                 children: [
-                    emptyState.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                    emptyState.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                         source: _polarisicons.SearchMinor,
                         color: "subdued"
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         children: emptyState.content
                     })
                 ]
@@ -289,7 +319,7 @@ function attachPropToTextField(children, prop) {
                 children: options.map(function(option, index) {
                     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         children: [
-                            option.title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            option.title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 variant: "bodyMd",
                                 color: "subdued",
                                 className: "pb-1",
@@ -327,6 +357,8 @@ Autocomplete.displayName = "Autocomplete";
  * @param {function} [props.onFocus] - Callback fired when the TextField gains focus (native TextField event).
  * @param {string} [props.placeholder] - Placeholder text for the TextField.
  * @param {string} [props.value] - The current value of the TextField.
+ * @param {string} [props.label] - The label for the TextField.
+ * @param {string} [props.labelHidden] - Whether to hide the label.
  * @param {function} [props.onChange] - Callback fired when the TextField value changes.
  *
  * @example
@@ -334,9 +366,9 @@ Autocomplete.displayName = "Autocomplete";
  *   placeholder="Search..."
  *   onTextFieldFocus={() => console.log("Focused")}
  * />
- */ Autocomplete.TextField = function AutocompleteTextField() {
+ */ var AutocompleteTextField = function() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, _object_spread_props(_object_spread({}, props), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, _object_spread_props(_object_spread({}, props), {
         onFocus: function() {
             if (props.onTextFieldFocus) {
                 props.onTextFieldFocus();
@@ -347,5 +379,6 @@ Autocomplete.displayName = "Autocomplete";
         }
     }));
 };
-Autocomplete.TextField.displayName = "Autocomplete.TextField";
+Autocomplete.TextField = AutocompleteTextField;
+AutocompleteTextField.displayName = "Autocomplete.TextField";
 var _default = Autocomplete;

package/dist/cjs/components/Badge.js

@@ -197,7 +197,7 @@ var progressBadgeStyles = (0, _tailwindvariants.tv)({
     }
 });
 /**
- * Badge component with optional progress indicator.
+ * A Badge component that renders a small, colored label with a status or progress indicator. The badge can be configured with different statuses, progress states, and sizes.
  *
  * @component
  * @param {object} props - Component properties.
@@ -205,6 +205,7 @@ var progressBadgeStyles = (0, _tailwindvariants.tv)({
  * @param {"complete" | "incomplete" | "partiallyComplete" | null} [props.progress] - Progress state of the badge.
  * @param {boolean} [props.capitalize] - Capitalize the first letter of the badge.
  * @param {"default" | "info" | "success" | "warning" | "critical" | "attention" | "highlight"} [props.status="default"] - Status variant to style the badge.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge.
  * @returns {JSX.Element} - Rendered Badge component with optional progress indicator.
  */ function Badge() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};

package/dist/cjs/components/Banner.js

@@ -10,8 +10,17 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Link = /*#__PURE__*/ _interop_require_default(require("./Link"));
 var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Banner relative rounded-md shadow-card bg-surface-highest outline outline-tint-3"
 });
@@ -96,33 +105,28 @@ var STATUS_STYLES = {
 /**
  * @typedef {'neutral' | 'critical' | 'highlight' | 'success' | 'warning' | 'info' | 'caution' | 'attention'} BannerStatus
  */ /**
+ * @typedef BannerAction
+ * @property {string} content - The button label text
+ * @property {boolean} [primary=false] - Whether the button should have primary styling
+ * @property {boolean} [disabled=false] - Whether the button is disabled
+ * @property {boolean} [loading=false] - Whether to show a loading state
+ * @property {Function} [onAction] - Click handler for the action
+ * @property {string} [url] - URL to navigate to when clicked (opens in new tab)
+ */ /**
  * A Banner component that displays a styled banner with customizable title, status, icon, actions, and dismiss functionality.
  * The banner style and content change based on the provided props, allowing for various statuses and themes.
  *
  * @component
  *
  * @param {Object} props - The properties for configuring the Banner component.
- * @param {string} [props.title=null] - The title text for the banner. If not provided, no title will be displayed.
+ * @param {string} [props.title] - The title text for the banner. If not provided, no title will be displayed.
  * @param {BannerStatus} [props.status='neutral'] - The status of the banner, which determines its color and icon.
- * @param {Function} [props.onDismiss=null] - Callback function to handle the banner's dismiss action.
- * @param {React.ReactNode} [props.children=null] - Additional content to display within the banner.
- * @param {Object} [props.action=null] - Primary action configuration object
- * @param {string} props.action.content - The button label text
- * @param {boolean} [props.action.primary=false] - Whether the button should have primary styling
- * @param {boolean} [props.action.disabled=false] - Whether the button is disabled
- * @param {boolean} [props.action.loading=false] - Whether to show a loading state
- * @param {Function} [props.action.onAction] - Click handler for the action
- * @param {string} [props.action.url] - URL to navigate to when clicked (opens in new tab)
- * @param {Object} [props.secondaryAction=null] - Secondary action configuration object
- * @param {string} props.secondaryAction.content - The action label text
- * @param {boolean} [props.secondaryAction.link=false] - Whether to render as a link instead of a button
- * @param {boolean} [props.secondaryAction.monochrome=false] - Whether the link should be monochrome (only applies if link=true)
- * @param {boolean} [props.secondaryAction.disabled=false] - Whether the action is disabled
- * @param {boolean} [props.secondaryAction.loading=false] - Whether to show a loading state
- * @param {Function} [props.secondaryAction.onAction] - Click handler for the action
- * @param {string} [props.secondaryAction.url] - URL to navigate to when clicked (opens in new tab)
- * @param {FunctionComponent} [props.icon=null] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
- * @param {boolean} [props.spinner=false] - Shows a spinner icon instead of a status icon when set to true.
+ * @param {Function} [props.onDismiss] - Callback function to handle the banner's dismiss action.
+ * @param {React.ReactNode} [props.children] - Additional content to display within the banner.
+ * @param {BannerAction} [props.action] - Primary action configuration object
+ * @param {BannerAction} [props.secondaryAction] - Secondary action configuration object
+ * @param {FunctionComponent} [props.icon] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
+ * @param {boolean} [props.spinner] - Shows a spinner icon instead of a status icon when set to true.
  *
  * @returns {JSX.Element} The rendered Banner component.
  *
@@ -155,10 +159,10 @@ var STATUS_STYLES = {
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "Litho-Banner__Icon_Container flex-none p-3 pr-2",
                         children: [
-                            spinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                            spinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                                 size: "small"
                             }),
-                            icon && !spinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                            icon && !spinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                 source: icon,
                                 color: statusColors.icon || ""
                             }),
@@ -168,18 +172,18 @@ var STATUS_STYLES = {
                                         "warning",
                                         "attention",
                                         "success"
-                                    ].includes(status) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                    ].includes(status) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                         source: _polarisicons.CircleInformationMajor,
                                         color: statusColors.icon
                                     }),
                                     [
                                         "warning",
                                         "attention"
-                                    ].includes(status) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                    ].includes(status) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                         source: _polarisicons.CircleAlertMajor,
                                         color: statusColors.icon
                                     }),
-                                    status === "success" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                    status === "success" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                         source: _polarisicons.TickMinor,
                                         color: statusColors.icon
                                     })
@@ -189,7 +193,7 @@ var STATUS_STYLES = {
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "Litho-Banner__Title grow py-3",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                             variant: "headingSm",
                             color: statusColors.fg,
                             children: title
@@ -202,7 +206,7 @@ var STATUS_STYLES = {
                             className: closeIconStyles({
                                 status: status
                             }),
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                 source: _polarisicons.CancelMinor,
                                 color: statusColors.icon
                             })
@@ -222,7 +226,7 @@ var STATUS_STYLES = {
                     (action || secondaryAction) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "Litho-Banner__Actions flex items-center gap-2".concat((secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.link) ? " gap-3" : "").concat(children ? " pt-2" : ""),
                         children: [
-                            action && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                            action && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 primary: action.primary,
                                 disabled: action.disabled,
                                 loading: action.loading,
@@ -233,7 +237,7 @@ var STATUS_STYLES = {
                                 },
                                 children: action.content
                             }),
-                            secondaryAction && !secondaryAction.link && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                            secondaryAction && !secondaryAction.link && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 disabled: secondaryAction.disabled,
                                 loading: secondaryAction.loading,
                                 onClick: secondaryAction.onAction || function() {
@@ -243,7 +247,7 @@ var STATUS_STYLES = {
                                 },
                                 children: secondaryAction.content
                             }),
-                            secondaryAction && secondaryAction.link && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Link, {
+                            secondaryAction && secondaryAction.link && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
                                 monochrome: secondaryAction.monochrome,
                                 disabled: secondaryAction.disabled,
                                 loading: secondaryAction.loading,

package/dist/cjs/components/Box.js

@@ -197,9 +197,11 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {number | string} [props.maxWidth] - Maximum CSS width.
  * @param {number | string} [props.zIndex] - CSS z-index.
  * @param {Object} [props.style] - Additional inline styles for the Box.
+ * @param {string} [props.className] - Additional CSS classes to apply to the Box.
+ * @param {Function} [props.onClick] - Click handler for the Box.
  * 
  * @returns {JSX.Element} A rendered Box component with customized styling.
-*/ function Box() {
+*/ var Box = function() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_as = props.as, as = _props_as === void 0 ? 'div' : _props_as, background = props.background, borderColor = props.borderColor, borderBlockStartWidth = props.borderBlockStartWidth, borderBlockEndWidth = props.borderBlockEndWidth, borderInlineStartWidth = props.borderInlineStartWidth, borderInlineEndWidth = props.borderInlineEndWidth, borderRadius = props.borderRadius, children = props.children, id = props.id, height = props.height, width = props.width, minHeight = props.minHeight, maxHeight = props.maxHeight, minWidth = props.minWidth, maxWidth = props.maxWidth, overflow = props.overflow, overflowX = props.overflowX, overflowY = props.overflowY, padding = props.padding, paddingBlockStart = props.paddingBlockStart, paddingBlockEnd = props.paddingBlockEnd, paddingInlineStart = props.paddingInlineStart, paddingInlineEnd = props.paddingInlineEnd, position = props.position, zIndex = props.zIndex, onClick = props.onClick, style = props.style, className = props.className;
     var classes = styles({
@@ -236,12 +238,12 @@ var styles = (0, _tailwindvariants.tv)({
         maxWidth: maxWidth
     });
     var Element = as;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         id: id,
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         style: inlineStyles,
         onClick: onClick,
         children: children
     });
-}
+};
 var _default = Box;