@heymantle/litho 0.0.15 → 0.0.16

package/dist/cjs/stories/TimePicker.stories.js

@@ -401,7 +401,6 @@ var SchedulingForm = {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
                         columns: 2,
-                        gap: "4",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
                                 label: "Start time",
@@ -421,7 +420,6 @@ var SchedulingForm = {
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
                         columns: 2,
-                        gap: "4",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
                                 label: "Break start",
@@ -559,7 +557,6 @@ var EventPlanning = {
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
                                         columns: 2,
-                                        gap: "4",
                                         children: [
                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
                                                 label: "Start time",
@@ -645,7 +642,6 @@ var AppointmentBooking = {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
                         columns: 2,
-                        gap: "4",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 gap: "sm",
@@ -827,7 +823,6 @@ var RestaurantReservation = {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
                         columns: "2fr 1fr",
-                        gap: "4",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
                                 label: "Preferred time",

package/dist/cjs/stories/Tip.stories.js

@@ -342,7 +342,7 @@ var DismissibleTips = {
                 !Object.values(visibleTips).some(Boolean) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     padding: "2",
                     children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-                        inlineAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 style: {

package/dist/esm/components/ActionList.js

@@ -6,7 +6,36 @@ import Icon from "./Icon.js";
 import Text from "./Text.js";
 import Tooltip from "./Tooltip.js";
 import { MobileHorizontalDotsMajor } from "@shopify/polaris-icons";
-var styles = tv({
+/**
+ * @component ActionList
+ *
+ * @description A vertical list of actionable items typically displayed inside a Popover for dropdown menus and contextual actions.
+ *
+ * @usage
+ * - DO: Display a list of actions inside a Popover dropdown menu.
+ * - DON'T: Use as a standalone visible list (use List or ResourceList).
+ *
+ * @accessibility
+ * - Renders as a list of buttons; each action item is keyboard navigable.
+ *
+ * @alternative
+ * - If you need a visible list of content, use `List`.
+ * - If you need a selectable list, use `Listbox`.
+ *
+ * @param {Object} props - Component properties.
+ * @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.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} />
+ *
+ * @returns {JSX.Element} The rendered ActionList component.
+ */ var styles = tv({
     base: "Litho-ActionList",
     variants: {
         fullWidth: {
@@ -64,28 +93,12 @@ var itemStyles = tv({
  * @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<{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.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} />
- *
- * @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;
+    // Always use index-based keys to avoid duplicate key issues when
+    // multiple sections have empty or identical titles
+    var sectionTitleAsKeys = false;
     var items = initialItems || (sections ? sections.flatMap(function(section) {
         return section.items;
     }) : []);
@@ -128,11 +141,6 @@ var itemStyles = tv({
         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, 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;

package/dist/esm/components/AnnouncementBar.js

@@ -1,8 +1,86 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import Text from "./Text.js";
 import Icon from "./Icon.js";
-var styles = tv({
+import { CancelSmallMinor } from "@shopify/polaris-icons";
+/**
+ * @component AnnouncementBar
+ *
+ * @description A full-width banner displayed at the top of the application for global announcements and promotions.
+ *
+ * @usage
+ * - DO: Display global announcements, promotions, or system-wide messages.
+ * - DON'T: Use for page-specific messages (use Banner).
+ *
+ * @accessibility
+ * - Ensure the announcement text is descriptive; provide a dismiss action for user control.
+ *
+ * @alternative
+ * - If you need page-specific messaging, use `Banner`.
+ * - If you need a contextual hint, use `Tip`.
+ *
+ * @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.
+ * @param {boolean} [props.fixed] - Whether to fix the announcement bar to the top of the page.
+ * @param {Function} [props.onDismiss] - Callback to dismiss the announcement bar. Renders a close button when provided.
+ *
+ * @returns {JSX.Element} AnnouncementBar component.
+ */ var styles = tv({
     base: "Litho-AnnouncementBar text-center p-2 min-h-10 flex items-center justify-center bg-brand",
     variants: {
         fixed: {
@@ -22,28 +100,27 @@ var iconContainerStyles = tv({
         }
     }
 });
-/**
- * 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.
- * @param {boolean} [props.fixed] - Whether to fix the announcement bar to the top of the page.
- *
- * @returns {JSX.Element} AnnouncementBar component.
- */ function AnnouncementBar() {
+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", {
+    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, onDismiss = props.onDismiss;
+    return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
         className: styles({
             fixed: fixed,
             interactive: !!onClick
         }),
-        onClick: onClick,
+        onClick: onClick
+    }, onClick ? {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick(e);
+            }
+        }
+    } : {}), {
         children: /*#__PURE__*/ _jsxs("div", {
-            className: "flex items-center justify-center gap-4",
+            className: "flex items-center justify-center gap-4 w-full relative",
             children: [
                 /*#__PURE__*/ _jsx(Text, {
                     fontWeight: "medium",
@@ -57,9 +134,29 @@ var iconContainerStyles = tv({
                     children: /*#__PURE__*/ _jsx(Icon, {
                         source: icon
                     })
+                }),
+                onDismiss && /*#__PURE__*/ _jsx("div", {
+                    className: "absolute right-0 p-1 cursor-pointer rounded-md hover:bg-brand-low",
+                    onClick: function(e) {
+                        e.stopPropagation();
+                        onDismiss();
+                    },
+                    role: "button",
+                    tabIndex: 0,
+                    "aria-label": "Dismiss announcement",
+                    onKeyDown: function(e) {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onDismiss();
+                        }
+                    },
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        source: CancelSmallMinor
+                    })
                 })
             ]
         })
-    });
+    }));
 }
 export default AnnouncementBar;

package/dist/esm/components/AnnouncementCard.js

@@ -0,0 +1,254 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import Button from "./Button.js";
+import Card from "./Card.js";
+import Icon from "./Icon.js";
+import Stack from "./Stack.js";
+import Text from "./Text.js";
+import Tooltip from "./Tooltip.js";
+import { CancelMinor } from "@shopify/polaris-icons";
+/**
+ * @component AnnouncementCard
+ *
+ * @description A promotional card that displays a title, description, decorative icon, and action buttons. Used for feature announcements, onboarding prompts, and contextual promotions.
+ *
+ * @usage
+ * - DO: Use for feature announcements, onboarding prompts, or promotional content within a page.
+ * - DON'T: Use for alerts or critical messages (use Banner). Don't use for global announcements (use AnnouncementBar).
+ *
+ * @accessibility
+ * - The icon (or image when imageUrl is set) is purely decorative. Title and description convey the full message.
+ * - Action buttons are keyboard accessible via the Litho Button component.
+ * - Dismiss button includes an aria-label for screen readers.
+ *
+ * @alternative
+ * - If you need a contextual alert with status styling, use `Banner`.
+ * - If you need a global top-of-page announcement, use `AnnouncementBar`.
+ * - If you need a subtle inline hint, use `Tip`.
+ *
+ * @param {Object} props - Props for the AnnouncementCard component.
+ * @param {string|React.ReactNode} [props.title=null] - The announcement heading.
+ * @param {string|React.ReactNode} [props.description=null] - Supporting text below the title.
+ * @param {string} [props.imageUrl=null] - Optional image URL. When set, shown in place of the icon with 3/2 aspect ratio. Displayed on md+ screens only.
+ * @param {"0"|"1"|"2"|"3"|"4"} [props.imagePadding="0"] - Padding around the image (maps to p-0, p-1, p-2, p-3, p-4). Only applies when imageUrl is set.
+ * @param {"cover"|"contain"} [props.imageDisplay="cover"] - How the image fits within its container. Only applies when imageUrl is set.
+ * @param {React.ElementType|string} [props.icon=null] - A decorative icon. Pass a Polaris icon (e.g., MagicMajor), a Lucide icon component (e.g., Cable from lucide-react), or a string for dynamic Lucide loading (e.g., "cable"). Icon is automatically colored based on the tint prop. Displayed on md+ screens only. Ignored when imageUrl is set.
+ * @param {"info"|"success"|"critical"|"attention"|"warning"|"insight"|"highlight"|"neutral"|string} [props.tint="info"] - Color tint for the icon and image container background. Pass a named variant or a hex color (e.g. "#f0f0f0").
+ * @param {Object} [props.primaryAction=null] - Primary action button configuration.
+ * @param {string} [props.primaryAction.content] - Button label text.
+ * @param {Function} [props.primaryAction.onAction] - Click handler.
+ * @param {boolean} [props.primaryAction.loading=false] - Loading state.
+ * @param {boolean} [props.primaryAction.disabled=false] - Disabled state.
+ * @param {boolean} [props.primaryAction.destructive=false] - Destructive styling.
+ * @param {React.Component} [props.primaryAction.icon] - Button icon.
+ * @param {string} [props.primaryAction.url] - URL to open on click.
+ * @param {boolean} [props.primaryAction.external=false] - Open URL in new tab.
+ * @param {Object} [props.secondaryAction=null] - Secondary action button configuration (same shape as primaryAction).
+ * @param {Function} [props.onDismiss=null] - Callback when the dismiss button is clicked. When provided, renders a close button.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} [props.tooltip=null] - Tooltip content for the title. When set, shows an info icon next to the title that displays the tooltip on hover.
+ * @param {string} [props.tooltipPreferredPosition='above'] - Preferred position for the tooltip.
+ * @param {React.ReactNode} [props.children=null] - Optional content rendered below the description. Image and icon are still shown when children are passed.
+ * @returns {React.ReactElement} The rendered AnnouncementCard component.
+ *
+ * @example
+ * import { Cable } from "lucide-react";
+ * import { MagicMajor } from "@shopify/polaris-icons";
+ *
+ * // With a Lucide icon
+ * <AnnouncementCard
+ *   title="Try our new feature"
+ *   description="Get started with the new integration tools."
+ *   icon={Cable}
+ *   tint="highlight"
+ *   primaryAction={{ content: "Learn more", onAction: () => {} }}
+ * />
+ *
+ * // With a Polaris icon
+ * <AnnouncementCard
+ *   title="Try our new feature"
+ *   icon={MagicMajor}
+ *   tint="insight"
+ *   primaryAction={{ content: "Learn more", onAction: () => {} }}
+ * />
+ *
+ * // With a dynamic Lucide string
+ * <AnnouncementCard
+ *   title="Try our new feature"
+ *   icon="cable"
+ *   tint="info"
+ *   primaryAction={{ content: "Learn more", onAction: () => {} }}
+ * />
+ */ var TINT_BG_CLASSES = {
+    info: "bg-info-alt",
+    success: "bg-success-alt",
+    critical: "bg-critical-alt",
+    attention: "bg-attention-alt",
+    warning: "bg-attention-alt",
+    insight: "bg-insight-alt",
+    highlight: "bg-highlight-alt",
+    neutral: "bg-neutral-alt",
+    custom: ""
+};
+var iconContainerStyles = tv({
+    base: "w-24 h-24 rounded-xl flex items-center justify-center flex-shrink-0",
+    variants: {
+        tint: TINT_BG_CLASSES
+    },
+    defaultVariants: {
+        tint: "info"
+    }
+});
+var imageContainerStyles = tv({
+    base: "aspect-[3/2] rounded-xl overflow-hidden",
+    variants: {
+        tint: TINT_BG_CLASSES,
+        padding: {
+            "0": "p-0",
+            "1": "p-1",
+            "2": "p-2",
+            "3": "p-3",
+            "4": "p-4"
+        }
+    },
+    defaultVariants: {
+        tint: "info",
+        padding: "0"
+    }
+});
+var IMAGE_DISPLAY_CLASSES = {
+    cover: "object-cover",
+    contain: "object-contain"
+};
+var TINT_ICON_COLORS = {
+    info: "info-alt-icon",
+    success: "success-alt-icon",
+    critical: "critical-alt-icon",
+    attention: "attention-alt-icon",
+    warning: "warning-alt-icon",
+    insight: "insight-alt-icon",
+    highlight: "highlight-alt-icon",
+    neutral: "neutral-alt-icon"
+};
+var renderAction = function(action) {
+    var plain = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    if (!action) return null;
+    return /*#__PURE__*/ _jsx(Button, {
+        plain: plain,
+        disabled: action.disabled,
+        loading: action.loading,
+        destructive: action.destructive,
+        icon: action.icon,
+        url: action.url,
+        external: action.external,
+        onClick: action.onAction,
+        children: action.content
+    });
+};
+function AnnouncementCard() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_title = props.title, title = _props_title === void 0 ? null : _props_title, _props_titleGap = props.titleGap, titleGap = _props_titleGap === void 0 ? "xs" : _props_titleGap, _props_description = props.description, description = _props_description === void 0 ? null : _props_description, _props_imageUrl = props.imageUrl, imageUrl = _props_imageUrl === void 0 ? null : _props_imageUrl, _props_imagePadding = props.imagePadding, imagePadding = _props_imagePadding === void 0 ? "0" : _props_imagePadding, _props_imageDisplay = props.imageDisplay, imageDisplay = _props_imageDisplay === void 0 ? "cover" : _props_imageDisplay, _props_icon = props.icon, icon = _props_icon === void 0 ? null : _props_icon, _props_tint = props.tint, tint = _props_tint === void 0 ? "info" : _props_tint, _props_primaryAction = props.primaryAction, primaryAction = _props_primaryAction === void 0 ? null : _props_primaryAction, _props_secondaryAction = props.secondaryAction, secondaryAction = _props_secondaryAction === void 0 ? null : _props_secondaryAction, _props_onDismiss = props.onDismiss, onDismiss = _props_onDismiss === void 0 ? null : _props_onDismiss, _props_tooltip = props.tooltip, tooltip = _props_tooltip === void 0 ? null : _props_tooltip, _props_tooltipPreferredPosition = props.tooltipPreferredPosition, tooltipPreferredPosition = _props_tooltipPreferredPosition === void 0 ? "above" : _props_tooltipPreferredPosition, _props_children = props.children, children = _props_children === void 0 ? null : _props_children;
+    var hasActions = !!(primaryAction || secondaryAction);
+    var isTintHex = typeof tint === "string" && tint.startsWith("#");
+    var resolvedTint = isTintHex ? "custom" : tint;
+    var tintStyle = isTintHex ? {
+        backgroundColor: tint
+    } : undefined;
+    var _IMAGE_DISPLAY_CLASSES_imageDisplay;
+    return /*#__PURE__*/ _jsx(Card, {
+        padded: true,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "relative group/announcement-card",
+            children: [
+                onDismiss && /*#__PURE__*/ _jsx("div", {
+                    className: "absolute top-0 right-0 group-hover/announcement-card:block hidden opacity-70 hover:opacity-100",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        plain: true,
+                        icon: CancelMinor,
+                        onClick: onDismiss,
+                        tooltip: "Dismiss",
+                        "aria-label": "Dismiss",
+                        size: "small"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    horizontal: "md",
+                    justify: "between",
+                    align: "stretch",
+                    gap: "6",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            justify: "between",
+                            fullWidth: true,
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    gap: titleGap,
+                                    children: [
+                                        title != null && /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-2",
+                                            children: [
+                                                typeof title === "string" ? /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingMd",
+                                                    fontWeight: "medium",
+                                                    children: title
+                                                }) : title,
+                                                tooltip && /*#__PURE__*/ _jsx(Tooltip, {
+                                                    content: tooltip,
+                                                    preferredPosition: tooltipPreferredPosition
+                                                })
+                                            ]
+                                        }),
+                                        description != null && (typeof description === "string" ? /*#__PURE__*/ _jsx(Text, {
+                                            color: "subdued",
+                                            children: description
+                                        }) : description),
+                                        children
+                                    ]
+                                }),
+                                hasActions && /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        renderAction(primaryAction),
+                                        renderAction(secondaryAction, true)
+                                    ]
+                                })
+                            ]
+                        }),
+                        imageUrl && /*#__PURE__*/ _jsx("div", {
+                            className: "hidden md:block w-36 flex-shrink-0",
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: imageContainerStyles({
+                                    tint: resolvedTint,
+                                    padding: imagePadding
+                                }),
+                                style: tintStyle,
+                                children: /*#__PURE__*/ _jsx("img", {
+                                    src: imageUrl,
+                                    alt: "",
+                                    className: "w-full h-full rounded-xl ".concat((_IMAGE_DISPLAY_CLASSES_imageDisplay = IMAGE_DISPLAY_CLASSES[imageDisplay]) !== null && _IMAGE_DISPLAY_CLASSES_imageDisplay !== void 0 ? _IMAGE_DISPLAY_CLASSES_imageDisplay : IMAGE_DISPLAY_CLASSES.cover)
+                                })
+                            })
+                        }),
+                        !imageUrl && icon && /*#__PURE__*/ _jsx("div", {
+                            className: "hidden md:block",
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: iconContainerStyles({
+                                    tint: resolvedTint
+                                }),
+                                style: tintStyle,
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    source: icon,
+                                    color: TINT_ICON_COLORS[tint] || TINT_ICON_COLORS.info,
+                                    size: 12,
+                                    strokeWidth: 1,
+                                    opacity: 70
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export default AnnouncementCard;

package/dist/esm/components/AppProvider.js

@@ -90,7 +90,20 @@ var screenSizes = typeof window !== "undefined" ? {
     "2xl": parseInt(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-2xl"), 10)
 } : {};
 /**
- * Provider component for managing global application state.
+ * @component AppProvider
+ *
+ * @description The root context provider that initializes dark mode, frame state, and form context for the entire Litho application.
+ *
+ * @usage
+ * - DO: Wrap your entire application to provide dark mode, frame, and form context.
+ * - DON'T: Use multiple AppProviders in the same tree.
+ *
+ * @accessibility
+ * - AppProvider manages the `data-theme` attribute on `<html>` for dark mode; ensures consistent theming for all components.
+ *
+ * @alternative
+ * - If you only need toast notifications, use `ToastProvider` independently.
+ *
  * @param {Object} props
  * @param {React.ReactNode} props.children - The child components.
  * @param {boolean} props.embedded - Whether the app is embedded.
@@ -184,7 +197,7 @@ var screenSizes = typeof window !== "undefined" ? {
                     setDiscardAction: setDiscardAction
                 },
                 children: /*#__PURE__*/ _jsx("div", {
-                    className: "app-wrapper ".concat(embedded ? "@container" : ""),
+                    className: "app-wrapper ".concat(embedded ? "@container/main" : ""),
                     children: children
                 })
             })