@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/components/Tag.js

@@ -2,7 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import Icon from "./Icon.js";
 import { CancelSmallMinor, TickSmallMinor } from "@shopify/polaris-icons";
-var styles = tv({
+/**
+ * @component Tag
+ *
+ * @description A removable label component used to display active filters, selected categories, or user-applied tags.
+ *
+ * @usage
+ * - DO: Display removable filters, categories, or labels.
+ * - DON'T: Use for non-removable status indicators (use Badge).
+ *
+ * @accessibility
+ * - Tag renders a button for removal; ensure the remove action is accessible via keyboard.
+ *
+ * @alternative
+ * - If you need a non-interactive status label, use `Badge`.
+ * - If you need a selectable option, use `ChoiceList`.
+ *
+ * @param {Object} props - The properties for the Tag component.
+ * @param {React.ReactNode} props.children - The content to be displayed inside the Tag.
+ * @param {boolean} [props.disabled=false] - Whether the tag is disabled.
+ * @param {Function} [props.onClick] - The callback function to execute on tag click.
+ * @param {Function} [props.onRemove] - The callback function to execute when the remove icon is clicked.
+ * @param {string} [props.accessibilityLabel] - The accessibility label for the tag.
+ * @param {string} [props.url] - The URL to open when the tag is clicked.
+ * @param {string} [props.target="_self"] - Specifies where to open the URL.
+ *
+ * @returns {JSX.Element} The rendered Tag component.
+ */ var styles = tv({
     base: "Litho-Tag text-xs rounded-md inline-grid pl-1 whitespace-nowrap",
     variants: {
         disabled: {
@@ -75,21 +101,7 @@ var actionStyles = tv({
         }
     }
 });
-/**
- * Renders a Tag component with optional interactive and removable features.
- *
- * @function Tag
- * @param {Object} props - The properties for the Tag component.
- * @param {React.ReactNode} props.children - The content to be displayed inside the Tag.
- * @param {boolean} [props.disabled=false] - Whether the tag is disabled.
- * @param {Function} [props.onClick] - The callback function to execute on tag click.
- * @param {Function} [props.onRemove] - The callback function to execute when the remove icon is clicked.
- * @param {string} [props.accessibilityLabel] - The accessibility label for the tag.
- * @param {string} [props.url] - The URL to open when the tag is clicked.
- * @param {string} [props.target="_self"] - Specifies where to open the URL.
- *
- * @returns {JSX.Element} The rendered Tag component.
- */ function Tag() {
+function Tag() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, icon = props.icon, onClick = props.onClick, onRemove = props.onRemove, accessibilityLabel = props.accessibilityLabel, url = props.url, _props_target = props.target, target = _props_target === void 0 ? "_self" : _props_target, className = props.className, _props_selected = props.selected, selected = _props_selected === void 0 ? false : _props_selected;
     var interactive = !!url || !!onClick;
@@ -136,6 +148,15 @@ var actionStyles = tv({
                 hasRemoveAction && /*#__PURE__*/ _jsx("div", {
                     className: actionClasses,
                     onClick: onRemove,
+                    role: "button",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-label": "Remove",
+                    onKeyDown: function(e) {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                        }
+                    },
                     children: /*#__PURE__*/ _jsx(Icon, {
                         source: CancelSmallMinor,
                         color: disabled ? "disabled" : "default",

package/dist/esm/components/Text.js

@@ -79,7 +79,37 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-var styles = tv({
+/**
+ * @component Text
+ *
+ * @description A typography component that renders text content with consistent heading and body variants, alignment, weight, and color options.
+ *
+ * @usage
+ * - DO: Use for all text content with consistent typography variants (headings, body, captions).
+ * - DON'T: Use raw HTML heading or paragraph tags; always use Text with the appropriate `variant` prop.
+ *
+ * @accessibility
+ * - Use the `as` prop to render semantically correct heading levels (h1-h6) matching the visual hierarchy.
+ * - Use `visuallyHidden` to provide screen-reader-only text without hiding content from assistive tech.
+ *
+ * @alternative
+ * - If you need a code block, use `Code` instead.
+ * - If you need a clickable text element, use `Link` or `Button` with `link` variant instead.
+ *
+ * @param {Object} props - Properties to customize the text component.
+ * @param {'left' | 'center' | 'right' | 'end' | 'start'} [props.alignment] - Text alignment.
+ * @param {'normal' | 'regular' | 'medium' | 'semibold' | 'bold'} [props.fontWeight] - Font weight.
+ * @param {'default' | 'subdued' | 'critical' | 'success' | 'warning' | 'alternate' | 'link' | 'disabled'} [props.color] - Text color variant.
+ * @param {boolean} [props.truncate] - Whether to truncate text with ellipsis.
+ * @param {'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs'} [props.variant] - Text size and style variant.
+ * @param {boolean} [props.visuallyHidden] - Visually hides text for accessibility.
+ * @param {string} [props.className] - Additional CSS class names.
+ * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
+ * @param {number} [props.clampLines] - Number of lines to clamp.
+ * @param {boolean} [props.strike] - Whether to strike through the text.
+ * @param {React.ReactNode} [props.children] - The content to be displayed within the text component. Defaults to an empty string.
+ * @returns {JSX.Element} Rendered text component with applied styles.
+ */ var styles = tv({
     base: "Litho-Text block",
     variants: {
         alignment: {
@@ -218,23 +248,7 @@ var styles = tv({
         }
     ]
 });
-/**
- * A text component that renders styled text based on provided props.
- *
- * @param {Object} props - Properties to customize the text component.
- * @param {'left' | 'center' | 'right' | 'end' | 'start'} [props.alignment] - Text alignment.
- * @param {'normal' | 'regular' | 'medium' | 'semibold' | 'bold'} [props.fontWeight] - Font weight.
- * @param {'default' | 'subdued' | 'critical' | 'success' | 'warning' | 'alternate' | 'link' | 'disabled'} [props.color] - Text color variant.
- * @param {boolean} [props.truncate] - Whether to truncate text with ellipsis.
- * @param {'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs'} [props.variant] - Text size and style variant.
- * @param {boolean} [props.visuallyHidden] - Visually hides text for accessibility.
- * @param {string} [props.className] - Additional CSS class names.
- * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
- * @param {number} [props.clampLines] - Number of lines to clamp.
- * @param {boolean} [props.strike] - Whether to strike through the text.
- * @param {React.ReactNode} [props.children] - The content to be displayed within the text component. Defaults to an empty string.
- * @returns {JSX.Element} Rendered text component with applied styles.
- */ function Text() {
+function Text() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var alignment = props.alignment, as = props.as, className = props.className, color = props.color, fontWeight = props.fontWeight, truncate = props.truncate, variant = props.variant, visuallyHidden = props.visuallyHidden, clampLines = props.clampLines, strike = props.strike, children = props.children, rest = _object_without_properties(props, [
         "alignment",

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, {