@heymantle/litho 0.0.14 → 0.0.16

package/dist/esm/components/TextField.js

@@ -55,7 +55,78 @@ import InlineError from "./InlineError.js";
 import Label from "./Label.js";
 import Link from "./Link.js";
 import Text from "./Text.js";
-var styles = tv({
+/**
+ * @component TextField
+ *
+ * @description A text input component with label, help text, error handling, prefix/suffix, and character count support.
+ *
+ * @usage
+ * - DO: Use for single-line or multi-line text input with built-in labeling and validation.
+ * - DON'T: Use for selection from a fixed list (use Select or Autocomplete).
+ *
+ * @accessibility
+ * - Always provide a `label` prop; the label is programmatically associated with the input via `htmlFor`.
+ *
+ * @alternative
+ * - If you need a dropdown selection, use `Select`. If you need searchable selection, use `Autocomplete`.
+ *
+ * @param {Object} props - The properties for the TextField component.
+ * @param {string} [props.prefix] - Text content to display before the input.
+ * @param {string} [props.suffix] - Text content to display after the input.
+ * @param {string} [props.placeholder] - Placeholder text for the input.
+ * @param {string} [props.value=''] - The current value of the input.
+ * @param {string} [props.helpText] - Helper text to display below the input.
+ * @param {string} [props.label] - Label text for the input field.
+ * @param {string} [props.labelVariant='bodyMd'] - Visual variant for the label text.
+ * @param {Object} [props.labelAction] - Action button to display next to the label.
+ * @param {boolean} [props.labelHidden] - Whether to visually hide the label.
+ * @param {boolean} [props.disabled=false] - Whether the input is disabled. Defaults to false.
+ * @param {boolean} [props.clearButton] - Whether to show a clear button.
+ * @param {boolean} [props.readOnly] - Whether the input is read-only.
+ * @param {boolean} [props.autoFocus] - Whether to focus the input on mount.
+ * @param {boolean} [props.focused] - Whether the input is focused.
+ * @param {number} [props.multiline=1] - Number of lines for multiline input (1 for single line). Defaults to 1.
+ * @param {boolean} [props.autoGrow=false] - Whether textarea should automatically grow with content. Only applies when multiline > 1.
+ * @param {number} [props.maxHeight] - Maximum height in pixels before scrolling starts. Only applies when autoGrow is true.
+ * @param {string} [props.error] - Error message to display.
+ * @param {ReactNode} [props.connectedRight] - React element to connect to the right of the input.
+ * @param {ReactNode} [props.connectedLeft] - React element to connect to the left of the input.
+ * @param {string} [props.type='text'] - HTML input type. Defaults to 'text'.
+ * @param {boolean} [props.subdued=false] - Whether to use subdued styling.
+ * @param {string} [props.name] - Name attribute for the input.
+ * @param {string} [props.id] - ID for the input element.
+ * @param {string} [props.role] - ARIA role.
+ * @param {number} [props.step] - Step value for number inputs.
+ * @param {number} [props.largeStep=10] - Large step value when using shift + arrows.
+ * @param {string} [props.autoComplete] - HTML autocomplete attribute.
+ * @param {number} [props.max] - Maximum value for number inputs.
+ * @param {number} [props.maxLength] - Maximum length for text input.
+ * @param {number} [props.min] - Minimum value for number inputs.
+ * @param {number} [props.minLength] - Minimum length for text input.
+ * @param {string} [props.pattern] - Input validation pattern.
+ * @param {boolean} [props.spellCheck] - Whether to enable spell checking.
+ * @param {string} [props.ariaOwns] - ARIA owns attribute.
+ * @param {string} [props.ariaControls] - ARIA controls attribute.
+ * @param {boolean} [props.ariaExpanded] - ARIA expanded attribute.
+ * @param {string} [props.ariaActiveDescendant] - ARIA active descendant attribute.
+ * @param {string} [props.ariaAutocomplete] - ARIA autocomplete attribute.
+ * @param {('left'|'center'|'right')} [props.align='left'] - Text alignment within the input.
+ * @param {boolean} [props.requiredIndicator] - Whether to show a required field indicator.
+ * @param {boolean} [props.selectTextOnFocus] - Whether to select all text when focused.
+ * @param {Function} [props.onClearButtonClick] - Handler for clear button click.
+ * @param {Function} [props.onChange] - Handler for value changes.
+ * @param {Function} [props.onFocus] - Handler for input focus.
+ * @param {Function} [props.onBlur] - Handler for input blur.
+ * @param {Function} [props.onKeyDown] - Handler for key down.
+ * @param {ReactNode} [props.tooltip] - Tooltip content for the label.
+ * @param {string} [props.className] - Additional CSS classes.
+ * @param {string} [props.containerClassName] - Additional CSS classes for the outer container (Litho-TextFieldContainer).
+ * @param {ReactNode} [props.icon] - Icon to display before the input.
+ * @param {string} [props.iconColor='subdued'] - Color of the icon. Defaults to 'subdued'.
+ * @param {boolean} [props.disableFocusStyles=false] - Whether to disable focused styles when the input is focused.
+ * @param {boolean} [props.insight=false] - Whether to use insight/AI styling with insight-alt background, border, and text colors.
+ * @returns {JSX.Element} The rendered TextField component.
+ */ var styles = tv({
     base: "Litho-TextField group relative rounded-md border min-h-8 cursor-text",
     variants: {
         disabled: {
@@ -72,6 +143,10 @@ var styles = tv({
         transparent: {
             true: "border-transparent",
             false: ""
+        },
+        insight: {
+            true: "",
+            false: ""
         }
     },
     compoundVariants: [
@@ -119,12 +194,27 @@ var styles = tv({
             hasError: false,
             subdued: true,
             class: "bg-form-bg"
+        },
+        {
+            focused: false,
+            disabled: false,
+            hasError: false,
+            insight: true,
+            class: "bg-form-bg-insight border-form-border-insight"
+        },
+        {
+            focused: true,
+            disabled: false,
+            hasError: false,
+            insight: true,
+            class: "bg-form-bg-insight-low border-form-border-insight ring ring-form-focus-insight"
         }
     ],
     defaultVariants: {
         disabled: false,
         hasError: false,
-        focused: false
+        focused: false,
+        insight: false
     }
 });
 var inputStyles = tv({
@@ -155,13 +245,23 @@ var inputStyles = tv({
             true: "placeholder-form-placeholder-error",
             false: "placeholder-form-placeholder"
         },
+        insight: {
+            true: "text-insight-alt-fg placeholder-insight-alt-fg/50",
+            false: ""
+        },
         type: {
             time: "hide-time-picker"
         }
     }
 });
 var iconStyles = tv({
-    base: "Litho-TextField__Icon pl-0.5"
+    base: "Litho-TextField__Icon pl-0.5",
+    variants: {
+        hasMultiline: {
+            true: "self-start pt-1",
+            false: ""
+        }
+    }
 });
 var clearButtonStyles = tv({
     base: "Litho-TextField__ClearButton mr-1 rounded-md h-6 w-6 flex self-center items-center justify-center cursor-pointer bg-btn-outline hover:bg-btn-outline-low active:bg-btn-outline-lower",
@@ -172,65 +272,11 @@ var clearButtonStyles = tv({
         }
     }
 });
-/**
- * Renders a TextField component.
- *
- * @function TextField
- * @param {Object} props - The properties for the TextField component.
- * @param {string} [props.prefix] - Text content to display before the input.
- * @param {string} [props.suffix] - Text content to display after the input.
- * @param {string} [props.placeholder] - Placeholder text for the input.
- * @param {string} [props.value=''] - The current value of the input.
- * @param {string} [props.helpText] - Helper text to display below the input.
- * @param {string} [props.label] - Label text for the input field.
- * @param {string} [props.labelVariant='bodyMd'] - Visual variant for the label text.
- * @param {Object} [props.labelAction] - Action button to display next to the label.
- * @param {boolean} [props.labelHidden] - Whether to visually hide the label.
- * @param {boolean} [props.disabled=false] - Whether the input is disabled. Defaults to false.
- * @param {boolean} [props.clearButton] - Whether to show a clear button.
- * @param {boolean} [props.readOnly] - Whether the input is read-only.
- * @param {boolean} [props.autoFocus] - Whether to focus the input on mount.
- * @param {boolean} [props.focused] - Whether the input is focused.
- * @param {number} [props.multiline=1] - Number of lines for multiline input (1 for single line). Defaults to 1.
- * @param {boolean} [props.autoGrow=false] - Whether textarea should automatically grow with content. Only applies when multiline > 1.
- * @param {number} [props.maxHeight] - Maximum height in pixels before scrolling starts. Only applies when autoGrow is true.
- * @param {string} [props.error] - Error message to display.
- * @param {ReactNode} [props.connectedRight] - React element to connect to the right of the input.
- * @param {ReactNode} [props.connectedLeft] - React element to connect to the left of the input.
- * @param {string} [props.type='text'] - HTML input type. Defaults to 'text'.
- * @param {boolean} [props.subdued=false] - Whether to use subdued styling.
- * @param {string} [props.name] - Name attribute for the input.
- * @param {string} [props.id] - ID for the input element.
- * @param {string} [props.role] - ARIA role.
- * @param {number} [props.step] - Step value for number inputs.
- * @param {number} [props.largeStep=10] - Large step value when using shift + arrows.
- * @param {string} [props.autoComplete] - HTML autocomplete attribute.
- * @param {number} [props.max] - Maximum value for number inputs.
- * @param {number} [props.maxLength] - Maximum length for text input.
- * @param {number} [props.min] - Minimum value for number inputs.
- * @param {number} [props.minLength] - Minimum length for text input.
- * @param {string} [props.pattern] - Input validation pattern.
- * @param {boolean} [props.spellCheck] - Whether to enable spell checking.
- * @param {string} [props.ariaOwns] - ARIA owns attribute.
- * @param {string} [props.ariaControls] - ARIA controls attribute.
- * @param {boolean} [props.ariaExpanded] - ARIA expanded attribute.
- * @param {string} [props.ariaActiveDescendant] - ARIA active descendant attribute.
- * @param {string} [props.ariaAutocomplete] - ARIA autocomplete attribute.
- * @param {('left'|'center'|'right')} [props.align='left'] - Text alignment within the input.
- * @param {boolean} [props.requiredIndicator] - Whether to show a required field indicator.
- * @param {boolean} [props.selectTextOnFocus] - Whether to select all text when focused.
- * @param {Function} [props.onClearButtonClick] - Handler for clear button click.
- * @param {Function} [props.onChange] - Handler for value changes.
- * @param {Function} [props.onFocus] - Handler for input focus.
- * @param {Function} [props.onBlur] - Handler for input blur.
- * @param {Function} [props.onKeyDown] - Handler for key down.
- * @param {ReactNode} [props.tooltip] - Tooltip content for the label.
- * @param {string} [props.className] - Additional CSS classes.
- * @param {boolean} [props.disableFocusStyles=false] - Whether to disable focused styles when the input is focused.
- * @returns {JSX.Element} The rendered TextField component.
- */ function TextField() {
+function TextField() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, _inputRef = props.inputRef, icon = props.icon, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown, _props_disableFocusStyles = props.disableFocusStyles, disableFocusStyles = _props_disableFocusStyles === void 0 ? false : _props_disableFocusStyles;
+    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, containerClassName = props.containerClassName, _inputRef = props.inputRef, icon = props.icon, _iconColor = props.iconColor, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_insight = props.insight, insight = _props_insight === void 0 ? false : _props_insight, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown, _props_disableFocusStyles = props.disableFocusStyles, disableFocusStyles = _props_disableFocusStyles === void 0 ? false : _props_disableFocusStyles;
+    var effectiveIcon = insight && !icon ? MagicMajor : icon;
+    var effectiveIconColor = insight ? _iconColor || "insight-icon" : _iconColor || "subdued";
     var suffix = maxLength && showCharacterCount ? "".concat(value.length, " / ").concat(maxLength) : _suffix;
     var _internalRef = useRef(null);
     var inputRef = _inputRef || _internalRef;
@@ -238,7 +284,7 @@ var clearButtonStyles = tv({
     var _useState1 = _sliced_to_array(useState(_focused), 2), focused = _useState1[0], setFocused = _useState1[1];
     var hasError = !!error;
     var hasSuffix = !!suffix || maxLength && showCharacterCount;
-    var hasPrefix = !!prefix || !!icon;
+    var hasPrefix = !!prefix || !!effectiveIcon;
     var hasMultiline = multiline > 1;
     var hasConnectedLeft = !!connectedLeft;
     var hasConnectedRight = !!connectedRight;
@@ -291,9 +337,12 @@ var clearButtonStyles = tv({
         hasError: hasError,
         focused: Boolean(focused && !readOnly && !disableFocusStyles),
         subdued: subdued,
-        transparent: transparent
+        transparent: transparent,
+        insight: insight
+    });
+    var iconClasses = iconStyles({
+        hasMultiline: hasMultiline
     });
-    var iconClasses = iconStyles();
     var inputClasses = inputStyles({
         hasSuffix: hasSuffix,
         hasPrefix: hasPrefix,
@@ -302,7 +351,8 @@ var clearButtonStyles = tv({
         hasError: hasError,
         readOnly: readOnly,
         align: align,
-        type: type
+        type: type,
+        insight: insight
     });
     var clearButtonClasses = clearButtonStyles({
         visible: (value === null || value === void 0 ? void 0 : value.length) > 0 && !readOnly && !disabled
@@ -333,9 +383,9 @@ var clearButtonStyles = tv({
         }
     };
     var memoizedIcon = useMemo(function() {
-        return icon;
+        return effectiveIcon;
     }, [
-        icon
+        effectiveIcon
     ]);
     useEffect(function() {
         // Handle auto-growing textarea
@@ -387,7 +437,7 @@ var clearButtonStyles = tv({
                     className: iconClasses,
                     children: /*#__PURE__*/ _jsx(Icon, {
                         source: memoizedIcon,
-                        color: "subdued"
+                        color: effectiveIconColor
                     })
                 }),
                 /*#__PURE__*/ _jsx(InputElement, {
@@ -493,7 +543,7 @@ var clearButtonStyles = tv({
         })
     });
     return /*#__PURE__*/ _jsxs("div", {
-        className: "Litho-TextFieldContainer flex flex-col gap-1",
+        className: "Litho-TextFieldContainer flex flex-col gap-1".concat(containerClassName ? " ".concat(containerClassName) : ""),
         children: [
             label && !labelHidden && /*#__PURE__*/ _jsxs("div", {
                 className: "flex justify-between items-end",

package/dist/esm/components/Thumbnail.js

@@ -2,7 +2,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import Icon from "./Icon.js";
 import { ImageMajor } from "@shopify/polaris-icons";
-var imageContainerStyles = tv({
+/**
+ * @component Thumbnail
+ *
+ * @description A small, fixed-size image preview component with automatic placeholder fallback when no source is provided.
+ *
+ * @usage
+ * - DO: Use for small, fixed-size image previews in lists, tables, or resource items.
+ * - DON'T: Use for large content images or hero banners; use `Image` for those cases.
+ *
+ * @accessibility
+ * - Always provide an `alt` prop describing the image content for screen readers.
+ * - When no image is available, the component renders a placeholder icon automatically.
+ *
+ * @alternative
+ * - If you need a full-size responsive image, use `Image` instead.
+ * - If you need an icon without an image container, use `Icon` instead.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} [props.src] - The image source URL.
+ * @param {string} [props.alt] - The alternative text for the image.
+ * @param {("small"|"medium"|"large"|number)} [props.size="medium"] - The size of the thumbnail. Can be "small", "medium", "large", or a numeric pixel value.
+ * @param {boolean} [props.skeleton=false] - Whether to show a skeleton loader instead of the image.
+ * @returns {JSX.Element} The rendered Thumbnail component.
+ */ var imageContainerStyles = tv({
     base: "relative flex items-center justify-center overflow-hidden rounded-lg border border-tint-4 bg-surface-higher group",
     variants: {
         size: {
@@ -21,16 +44,7 @@ var imageStyles = tv({
         size: "medium"
     }
 });
-/**
- * Thumbnail component to display an image or a placeholder icon.
- *
- * @param {Object} props - The component props.
- * @param {string} [props.src] - The image source URL.
- * @param {string} [props.alt] - The alternative text for the image.
- * @param {("small"|"medium"|"large"|number)} [props.size="medium"] - The size of the thumbnail. Can be "small", "medium", "large", or a numeric pixel value.
- * @param {boolean} [props.skeleton=false] - Whether to show a skeleton loader instead of the image.
- * @returns {JSX.Element} The rendered Thumbnail component.
- */ function Thumbnail() {
+function Thumbnail() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var src = props.src, alt = props.alt, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, _props_skeleton = props.skeleton, skeleton = _props_skeleton === void 0 ? false : _props_skeleton;
     var sizeIsInteger = Number.isInteger(size);

package/dist/esm/components/TimePicker.js

@@ -1,6 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import TextField from "./TextField.js";
-function TimePicker() {
+/**
+ * @component TimePicker
+ *
+ * @description A time selection input that wraps a TextField with type='time' for picking specific times.
+ *
+ * @usage
+ * - DO: Use for selecting specific times in scheduling or event forms.
+ * - DON'T: Use for date selection (use DatePicker).
+ *
+ * @accessibility
+ * - Wraps a TextField with type="time" for native keyboard and screen reader support; always provide a label.
+ *
+ * @alternative
+ * - If you need date selection, use `DatePicker`. If you need freeform text input, use `TextField`.
+ *
+ * @param {Object} [props={}] - The properties for the TimePicker component.
+ * @param {string} [props.label="Time:"] - The label text for the time input.
+ * @param {boolean} [props.labelInline=true] - Whether to display the label inline as a prefix.
+ * @param {string} [props.value] - The current time value (in HH:mm format).
+ * @param {Function} [props.onChange] - Callback function invoked when the time value changes.
+ * @returns {JSX.Element} The rendered TimePicker component.
+ */ 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;
     return /*#__PURE__*/ _jsx(TextField, {

package/dist/esm/components/Tip.js

@@ -1,10 +1,91 @@
+"use client";
+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 React, { cloneElement, isValidElement, useMemo } from "react";
 import { tv } from "tailwind-variants";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
+import Text from "./Text.js";
 import { AlertMinor, CancelMinor, InfoMinor, MagicMajor } from "@shopify/polaris-icons";
-var styles = tv({
-    base: "Litho-Tip relative flex rounded-md p-2",
+/**
+ * @component Tip
+ *
+ * @description A subtle inline hint component that displays contextual guidance or tips within a page section.
+ *
+ * @usage
+ * - DO: Provide helpful, non-critical contextual hints or best practices inline.
+ * - DON'T: Use for important alerts or errors (use Banner).
+ *
+ * @accessibility
+ * - Tip content is read as regular page content; ensure the tip text is meaningful without relying on its icon.
+ *
+ * @alternative
+ * - If you need a prominent alert with actions, use `Banner`.
+ * - If you need a global notification bar, use `AnnouncementBar`.
+ *
+ * @param {Object} props - The component props.
+ * @param {"info" | "critical" | "success" | "warning" | "attention" | "highlight" | "neutral" | "plain" | "minimal"} [props.status="info"] - The status type of the tip.
+ * @param {Function} [props.onDismiss] - Function to call when the dismiss button is clicked.
+ * @param {Function} [props.onClick] - Function to call when the tip is clicked.
+ * @param {React.ReactNode} props.children - The content of the tip.
+ * @param {React.ElementType} [props.icon] - Custom icon for the tip.
+ * @param {"left" | "right" | "center"} [props.align="left"] - The alignment of the tip.
+ * @param {Array<{content: string, onAction: Function}>} [props.actions] - Array of action objects to show as buttons at the bottom.
+ * @param {string | React.ReactNode} [props.title=null] - Optional title shown above the tip content.
+ * @returns {JSX.Element} The rendered Tip component.
+ */ var styles = tv({
+    base: "Litho-Tip relative flex rounded-md",
     variants: {
         status: {
             success: "bg-success-alt text-success-alt-fg",
@@ -14,7 +95,8 @@ var styles = tv({
             highlight: "bg-highlight-alt text-highlight-alt-fg",
             insight: "bg-insight-alt text-insight-alt-fg",
             info: "bg-info-alt text-info-alt-fg",
-            plain: "bg-transparent text-subdued px-0!"
+            plain: "bg-transparent text-high border border-border-subdued rounded-lg",
+            minimal: "bg-transparent text-high"
         },
         dismissible: {
             true: "pr-8"
@@ -24,19 +106,29 @@ var styles = tv({
         },
         border: {
             true: "border border-tint-2"
+        },
+        padding: {
+            default: "p-2",
+            md: "p-3",
+            lg: "p-4"
         }
     },
     defaultVariants: {
         status: "info",
         dismissible: false,
         clickable: false,
-        border: false
+        border: false,
+        padding: "default"
     },
     compoundVariants: [
         {
             clickable: true,
             status: "info",
             className: "hover:outline hover:outline-info-alt-lower"
+        },
+        {
+            status: "minimal",
+            className: "!p-0"
         }
     ]
 });
@@ -81,29 +173,20 @@ var statusHelpers = {
     insight: {
         icon: MagicMajor
     },
-    neutral: {}
+    neutral: {},
+    minimal: {}
 };
-/**
- * Tip component for displaying informational messages with optional dismiss functionality.
- *
- * @param {Object} props - The component props.
- * @param {"info" | "critical" | "success" | "warning" | "attention" | "highlight" | "neutral"} [props.status="info"] - The status type of the tip.
- * @param {Function} [props.onDismiss] - Function to call when the dismiss button is clicked.
- * @param {Function} [props.onClick] - Function to call when the tip is clicked.
- * @param {React.ReactNode} props.children - The content of the tip.
- * @param {React.ElementType} [props.icon] - Custom icon for the tip.
- * @param {"left" | "right" | "center"} [props.align="left"] - The alignment of the tip.
- * @returns {JSX.Element} The rendered Tip component.
- */ function Tip() {
+function Tip() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _statusHelpers_status;
-    var _props_status = props.status, status = _props_status === void 0 ? "info" : _props_status, onClick = props.onClick, onDismiss = props.onDismiss, children = props.children, _icon = props.icon, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, border = props.border;
+    var _props_status = props.status, status = _props_status === void 0 ? "info" : _props_status, onClick = props.onClick, onDismiss = props.onDismiss, children = props.children, _icon = props.icon, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, border = props.border, actions = props.actions, _props_title = props.title, title = _props_title === void 0 ? null : _props_title, _props_padding = props.padding, padding = _props_padding === void 0 ? "default" : _props_padding;
     var icon = _icon === null ? null : _icon || ((_statusHelpers_status = statusHelpers[status]) === null || _statusHelpers_status === void 0 ? void 0 : _statusHelpers_status.icon) || InfoMinor;
     var classes = styles({
         status: status,
         dismissible: !!onDismiss,
         clickable: !!onClick,
-        border: border
+        border: border,
+        padding: padding
     });
     var base = "-alt-icon";
     var iconColorMap = {
@@ -115,7 +198,9 @@ var statusHelpers = {
         highlight: "highlight".concat(base),
         insight: "insight".concat(base),
         neutral: "neutral".concat(base),
-        default: "info".concat(base)
+        default: "info".concat(base),
+        plain: "subdued",
+        minimal: "subdued"
     };
     var iconColor = iconColorMap[status] || iconColorMap.default;
     var processedChildren = useMemo(function() {
@@ -139,9 +224,19 @@ var statusHelpers = {
         children,
         status
     ]);
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
         className: classes,
-        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: innerStyles({
@@ -152,8 +247,28 @@ var statusHelpers = {
                         source: icon,
                         color: iconColor
                     }),
-                    /*#__PURE__*/ _jsx("div", {
-                        children: processedChildren
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-1 flex-1",
+                        children: [
+                            title != null && title !== "" && /*#__PURE__*/ _jsx(Text, {
+                                fontWeight: "medium",
+                                children: title
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                children: processedChildren
+                            }),
+                            (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/ _jsx("div", {
+                                className: "relative -left-3 flex items-center",
+                                children: actions.map(function(action, i) {
+                                    return /*#__PURE__*/ _jsx(Button, {
+                                        plain: true,
+                                        size: "small",
+                                        onClick: action.onAction,
+                                        children: action.content
+                                    }, i);
+                                })
+                            })
+                        ]
                     })
                 ]
             }),
@@ -168,6 +283,6 @@ var statusHelpers = {
                 })
             })
         ]
-    });
+    }));
 }
 export default Tip;