@heymantle/litho 0.0.14 → 0.0.16

package/dist/esm/components/Icon.js

@@ -1,6 +1,275 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+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 _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _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;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, isValidElement } from "react";
 import { tv } from "tailwind-variants";
 import * as PolarisIcons from "@shopify/polaris-icons";
+/**
+ * @component Icon
+ *
+ * @description Renders an icon with configurable size, color, and display style. Supports Polaris icons (fill-based),
+ * Lucide icons (stroke-based), and custom SVG components. Polaris icons are detected automatically via displayName lookup;
+ * any unrecognized component is treated as a stroke-based (Lucide) icon. String sources are resolved in order: Polaris → internal Litho icons → dynamic Lucide import.
+ *
+ * @usage
+ * - DO: Use with Polaris or Lucide icon sources to add visual cues alongside text labels or inside buttons.
+ * - DON'T: Use icons as the sole means of conveying meaning without an accompanying text label or accessible name.
+ *
+ * @accessibility
+ * - Icons are decorative by default; pair with visible text or an `accessibilityLabel` on the parent component.
+ * - When used standalone (e.g., icon-only button), ensure the parent element provides an `aria-label`.
+ *
+ * @alternative
+ * - If you need a clickable icon, wrap in a `Button` with the `icon` prop instead of using Icon directly.
+ * - If you need a small image preview, use `Thumbnail` instead.
+ *
+ * @param {Object} props - The properties for configuring the Component.
+ * @param {React.ElementType|string} props.source - The icon source. A Polaris icon component, a Lucide icon component, or a string name (resolved as Polaris → Litho → Lucide dynamic import).
+ * @param {('white'|'default'|'base'|'subdued'|'lower'|'link'|'primary'|'alternate'|'high'|'low'|'currentColor'|'successFgAlternate'|'success'|'fg-success'|'critical'|'fg-critical'|'criticalFgAlternate'|'warning'|'info'|'caution'|'attention'|'highlight'|'neutral'|'normal'|'disabled'|'active'|'btn-primary-icon'|'btn-secondary-icon'|'btn-plain-icon'|'btn-link-icon'|'btn-destructive-icon'|'btn-highlight-icon'|'inputFg'|'inputFgDisabled'|'success-icon'|'critical-icon'|'warning-icon'|'attention-icon'|'info-icon'|'highlight-icon'|'insight-icon'|'neutral-icon'|'success-alt-icon'|'critical-alt-icon'|'warning-alt-icon'|'attention-alt-icon'|'info-alt-icon'|'highlight-alt-icon'|'insight-alt-icon'|'neutral-alt-icon')} [props.color="default"] - The color variant for the icon.
+ * @param {('white'|'default'|'base'|'subdued'|'link'|'primary'|'alternate'|'success'|'critical'|'warning'|'info'|'caution'|'attention'|'highlight'|'neutral'|'normal'|'disabled'|'active')} [props.hoverColor] - The hover color variant for the icon (Polaris only).
+ * @param {('block'|'flex'|'inline'|'inline-block'|'inline-flex')} [props.display="block"] - Determines the display type for the icon container.
+ * @param {('xs'|'sm'|'default'|'lg'|'xl'|'2xl'|number)} [props.size="default"] - Sets the icon size. Semantic: 'xs' (12px), 'sm' (16px), 'default' (20px), 'lg' (24px), 'xl' (28px), '2xl' (32px). Numeric token: 3–20 (maps to 12–80px). Raw pixel number also accepted.
+ * @param {boolean} [props.stroke=false] - Whether to use stroke styling instead of fill (for Polaris icons with stroke paths).
+ * @param {number} [props.strokeWidth=2] - SVG stroke width for Lucide icons. 0.5–3 in 0.25 increments. Ignored for Polaris icons.
+ * @param {number} [props.opacity=100] - Container opacity 0–100 in steps of 10.
+ * @param {Function} [props.onClick] - Click handler for the icon.
+ * @param {string} [props.className] - Additional CSS classes to apply.
+ * @returns {JSX.Element} The rendered icon component with the specified styles.
+ *
+ * @example
+ * // Polaris icon
+ * <Icon source={TickMinor} color="success" size="lg" />
+ *
+ * // Lucide icon (direct import)
+ * import { Cable } from "lucide-react";
+ * <Icon source={Cable} color="info-alt-icon" size={12} opacity={70} />
+ *
+ * // Lucide icon (string-based dynamic loading)
+ * <Icon source="cable" color="info-alt-icon" size={12} />
+ */ // ---------------------------------------------------------------------------
+// Styles (container)
+// ---------------------------------------------------------------------------
 var styles = tv({
     base: "Litho-Icon",
     variants: {
@@ -10,21 +279,15 @@ var styles = tv({
             inline: "inline",
             "inline-block": "inline-block",
             "inline-flex": "inline-flex items-center justify-center"
-        },
-        size: {
-            xs: "h-3 w-3 min-w-3",
-            sm: "h-4 w-4 min-w-4",
-            default: "h-5 w-5 min-w-5",
-            lg: "h-6 w-6 min-w-6",
-            xl: "h-7 w-7 min-w-7",
-            "2xl": "h-8 w-8 min-w-8"
         }
     },
     defaultVariants: {
-        display: "block",
-        size: "default"
+        display: "block"
     }
 });
+// ---------------------------------------------------------------------------
+// Fill-based color styles (Polaris icons)
+// ---------------------------------------------------------------------------
 var iconStyles = tv({
     base: "",
     variants: {
@@ -67,6 +330,7 @@ var iconStyles = tv({
             "info-icon": "fill-info-icon",
             "highlight-icon": "fill-highlight-icon",
             "insight-icon": "fill-insight-icon",
+            "btn-insight-icon": "fill-btn-insight-icon",
             "neutral-icon": "fill-neutral-icon",
             "success-alt-icon": "fill-success-alt-icon",
             "critical-alt-icon": "fill-critical-alt-icon",
@@ -76,7 +340,14 @@ var iconStyles = tv({
             "highlight-alt-icon": "fill-highlight-alt-icon",
             "insight-alt-icon": "fill-insight-alt-icon",
             "neutral-alt-icon": "fill-neutral-alt-icon",
-            "FrameSaveBar": "fill-alternate dark:fill-black"
+            "FrameSaveBar": "fill-alternate dark:fill-black",
+            "brand": "fill-brand",
+            "brand-low": "fill-brand-low",
+            "brand-lower": "fill-brand-lower",
+            "brand-alternate": "fill-brand-alternate",
+            "brand-saturated": "fill-brand-saturated",
+            "brand-subdued": "fill-brand-subdued",
+            "brand-chat": "fill-brand-chat"
         },
         hoverColor: {
             white: "hover:fill-white group-hover/LithoIcon:fill-white",
@@ -155,6 +426,274 @@ var iconStyles = tv({
         color: "default"
     }
 });
+// ---------------------------------------------------------------------------
+// Stroke-based color map (Lucide / generic stroke icons)
+// Mirrors iconStyles.color keys but uses text-* instead of fill-*
+// Lucide SVGs use stroke="currentColor", so text-* classes set the icon color.
+// ---------------------------------------------------------------------------
+var STROKE_COLOR_MAP = {
+    // Core
+    white: "text-white",
+    default: "text-higher",
+    base: "text-higher",
+    subdued: "text-low",
+    lower: "text-lower",
+    link: "text-link",
+    primary: "text-link",
+    alternate: "text-alternate",
+    high: "text-high",
+    low: "text-low",
+    currentColor: "text-current",
+    // Status foreground
+    successFgAlternate: "text-fg-success-alternate",
+    success: "text-fg-success",
+    "fg-success": "text-fg-success",
+    critical: "text-fg-critical",
+    "fg-critical": "text-fg-critical",
+    criticalFgAlternate: "text-fg-critical-alternate",
+    warning: "text-attention-alt-icon",
+    info: "text-info-alt-icon",
+    caution: "text-fg-caution-alternate",
+    attention: "text-attention-alt-icon",
+    highlight: "text-highlight-alt-icon",
+    neutral: "text-neutral-alt-icon",
+    normal: "text-normal",
+    disabled: "text-lowest",
+    active: "text-tab-active-fg",
+    // Button-specific
+    "btn-primary-icon": "text-btn-primary-icon",
+    "btn-secondary-icon": "text-btn-secondary-icon",
+    "btn-plain-icon": "text-btn-plain-icon",
+    "btn-link-icon": "text-btn-link-icon",
+    "btn-destructive-icon": "text-btn-destructive-icon",
+    "btn-highlight-icon": "text-btn-highlight-icon",
+    // Input
+    inputFg: "text-form-input-fg",
+    inputFgDisabled: "text-form-input-fg-disabled",
+    // Status icons
+    "success-icon": "text-success-icon",
+    "critical-icon": "text-critical-icon",
+    "warning-icon": "text-warning-icon",
+    "attention-icon": "text-attention-icon",
+    "info-icon": "text-info-icon",
+    "highlight-icon": "text-highlight-icon",
+    "insight-icon": "text-insight-icon",
+    "btn-insight-icon": "text-btn-insight-icon",
+    "neutral-icon": "text-neutral-icon",
+    // Status alt icons
+    "success-alt-icon": "text-success-alt-icon",
+    "critical-alt-icon": "text-critical-alt-icon",
+    "warning-alt-icon": "text-attention-alt-icon",
+    "attention-alt-icon": "text-attention-alt-icon",
+    "info-alt-icon": "text-info-alt-icon",
+    "highlight-alt-icon": "text-highlight-alt-icon",
+    "insight-alt-icon": "text-insight-alt-icon",
+    "neutral-alt-icon": "text-neutral-alt-icon",
+    // Brand
+    "brand": "text-brand",
+    "brand-low": "text-brand-low",
+    "brand-lower": "text-brand-lower",
+    "brand-alternate": "text-brand-alternate",
+    "brand-saturated": "text-brand-saturated",
+    "brand-subdued": "text-brand-subdued",
+    "brand-chat": "text-brand-chat"
+};
+// ---------------------------------------------------------------------------
+// Size system (extended to support Lucide's larger size range)
+// ---------------------------------------------------------------------------
+/** Map semantic size names to numeric tokens. */ var SEMANTIC_TO_TOKEN = {
+    xs: 3,
+    sm: 4,
+    default: 5,
+    lg: 6,
+    xl: 7,
+    "2xl": 8
+};
+/** Map numeric tokens (3-20) to pixel values. */ var TOKEN_TO_PX = {
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    11: 44,
+    12: 48,
+    13: 52,
+    14: 56,
+    15: 60,
+    16: 64,
+    17: 68,
+    18: 72,
+    19: 76,
+    20: 80
+};
+/** Static Tailwind classes for container sizing (avoids purge issues). Tokens without entries use inline styles. */ var SIZE_CLASSES = {
+    3: "h-3 w-3 min-w-3",
+    4: "h-4 w-4 min-w-4",
+    5: "h-5 w-5 min-w-5",
+    6: "h-6 w-6 min-w-6",
+    7: "h-7 w-7 min-w-7",
+    8: "h-8 w-8 min-w-8",
+    9: "h-9 w-9 min-w-9",
+    10: "h-10 w-10 min-w-10",
+    11: "h-11 w-11 min-w-11",
+    12: "h-12 w-12 min-w-12",
+    14: "h-14 w-14 min-w-14",
+    16: "h-16 w-16 min-w-16",
+    20: "h-20 w-20 min-w-20"
+};
+var LITHO_TOKENS = [
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    13,
+    14,
+    15,
+    16,
+    17,
+    18,
+    19,
+    20
+];
+/**
+ * Resolve the size prop to { px, sizeClass, sizeStyle }.
+ * Accepts: semantic string, numeric token (3-20), or raw px number.
+ */ var resolveSize = function(size) {
+    // Semantic name → token → px
+    if (typeof size === "string" && SEMANTIC_TO_TOKEN[size] !== undefined) {
+        var token = SEMANTIC_TO_TOKEN[size];
+        var px = TOKEN_TO_PX[token];
+        var sizeClass = SIZE_CLASSES[token] || null;
+        var sizeStyle = sizeClass ? null : {
+            width: px,
+            height: px,
+            minWidth: px
+        };
+        return {
+            px: px,
+            sizeClass: sizeClass,
+            sizeStyle: sizeStyle
+        };
+    }
+    // Numeric token → px
+    if (typeof size === "number" && LITHO_TOKENS.includes(size)) {
+        var px1 = TOKEN_TO_PX[size];
+        var sizeClass1 = SIZE_CLASSES[size] || null;
+        var sizeStyle1 = sizeClass1 ? null : {
+            width: px1,
+            height: px1,
+            minWidth: px1
+        };
+        return {
+            px: px1,
+            sizeClass: sizeClass1,
+            sizeStyle: sizeStyle1
+        };
+    }
+    // Raw px number (not a token)
+    if (typeof size === "number") {
+        return {
+            px: size,
+            sizeClass: null,
+            sizeStyle: {
+                width: size,
+                height: size,
+                minWidth: size
+            }
+        };
+    }
+    // Fallback to default
+    var px2 = TOKEN_TO_PX[5];
+    return {
+        px: px2,
+        sizeClass: SIZE_CLASSES[5],
+        sizeStyle: null
+    };
+};
+// ---------------------------------------------------------------------------
+// Lucide dynamic loading
+// ---------------------------------------------------------------------------
+var lucideCache = new Map();
+var toPascalCase = function(name) {
+    return name.split("-").map(function(p) {
+        return p[0].toUpperCase() + p.slice(1);
+    }).join("");
+};
+var loadLucideIcon = function(name) {
+    return _async_to_generator(function() {
+        var key, mod, icon, e;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    key = toPascalCase(name);
+                    if (lucideCache.has(key)) return [
+                        2,
+                        lucideCache.get(key)
+                    ];
+                    _state.label = 1;
+                case 1:
+                    _state.trys.push([
+                        1,
+                        3,
+                        ,
+                        4
+                    ]);
+                    return [
+                        4,
+                        import("lucide-react")
+                    ];
+                case 2:
+                    mod = _state.sent();
+                    icon = mod[key] || null;
+                    lucideCache.set(key, icon);
+                    return [
+                        2,
+                        icon
+                    ];
+                case 3:
+                    e = _state.sent();
+                    lucideCache.set(key, null);
+                    return [
+                        2,
+                        null
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+};
+// ---------------------------------------------------------------------------
+// StrokeWidth / Opacity helpers
+// ---------------------------------------------------------------------------
+var resolveStrokeWidth = function(strokeWidth) {
+    if (strokeWidth === undefined || strokeWidth === null) return undefined;
+    var n = Number(strokeWidth);
+    if (Number.isNaN(n)) return undefined;
+    var rounded = Math.round(n / 0.25) * 0.25;
+    return Math.round(Math.min(3, Math.max(0.5, rounded)) * 100) / 100;
+};
+var resolveOpacity = function(opacity) {
+    if (opacity === undefined || opacity === null) return 100;
+    var n = Number(opacity);
+    if (Number.isNaN(n)) return 100;
+    var rounded = Math.round(n / 10) * 10;
+    return Math.min(100, Math.max(0, rounded));
+};
+// ---------------------------------------------------------------------------
+// Internal Litho icons (custom SVGs)
+// ---------------------------------------------------------------------------
 var LithoIcons = function(param) {
     var className = param.className;
     return {
@@ -232,66 +771,146 @@ var LithoIcons = function(param) {
         })
     };
 };
+// ---------------------------------------------------------------------------
+// Component detection
+// ---------------------------------------------------------------------------
 /**
- * A Component that renders an icon with customizable size, color, and display style, using Shopify Polaris icons.
- * The icon adapts styling based on the provided props and supports a range of color schemes and sizes.
- *
- * @component
- *
- * @param {Object} props - The properties for configuring the Component.
- * @param {Object} props.source - The source icon component from `@shopify/polaris-icons`. Should be a valid Polaris icon component.
- * @param {('white'|'default'|'base'|'subdued'|'link'|'primary'|'alternate'|'successFgAlternate'|'success'|'fg-success'|'critical'|'fg-critical'|'criticalFgAlternate'|'warning'|'info'|'caution'|'attention'|'highlight'|'neutral'|'normal'|'disabled'|'active'|'btn-primary-icon'|'btn-secondary-icon'|'btn-plain-icon'|'btn-link-icon'|'btn-destructive-icon'|'btn-highlight-icon'|'inputFg'|'inputFgDisabled'|'success-icon'|'critical-icon'|'warning-icon'|'attention-icon'|'info-icon'|'highlight-icon'|'insight-icon'|'neutral-icon'|'success-alt-icon'|'critical-alt-icon'|'warning-alt-icon'|'attention-alt-icon'|'info-alt-icon'|'highlight-alt-icon'|'insight-alt-icon'|'neutral-alt-icon')} [props.color="default"] - The color variant for the icon.
- * @param {('white'|'default'|'base'|'subdued'|'link'|'primary'|'alternate'|'success'|'critical'|'warning'|'info'|'caution'|'attention'|'highlight'|'neutral'|'normal'|'disabled'|'active'|'btn-primary-icon'|'btn-secondary-icon'|'btn-plain-icon'|'btn-link-icon'|'btn-destructive-icon'|'btn-highlight-icon'|'inputFg'|'inputFgDisabled'|'success-icon'|'critical-icon'|'warning-icon'|'attention-icon'|'info-icon'|'highlight-icon'|'insight-icon'|'neutral-icon'|'success-alt-icon'|'critical-alt-icon'|'warning-alt-icon'|'attention-alt-icon'|'info-alt-icon'|'highlight-alt-icon'|'insight-alt-icon'|'neutral-alt-icon')} [props.hoverColor] - The hover color variant for the icon.
- * @param {('block'|'flex'|'inline'|'inline-block'|'inline-flex')} [props.display="block"] - Determines the display type for the icon container.
- * @param {('xs'|'sm'|'default'|'lg'|'xl'|'2xl')} [props.size="default"] - Sets the icon size.
- *   - 'xs': Extra small (12px)
- *   - 'sm': Small (16px)
- *   - 'default': Medium (20px)
- *   - 'lg': Large (24px)
- *   - 'xl': Extra large (28px)
- *   - '2xl': Double extra large (32px)
- * @param {boolean} [props.stroke=false] - Whether to use stroke styling instead of fill.
- * @param {Function} [props.onClick] - Click handler for the icon.
- * @param {string} [props.className] - Additional CSS classes to apply.
- * @returns {JSX.Element} The rendered icon component with the specified styles.
- *
- * @example
- * <Icon
- *   source={PolarisIcons.TickMinor}
- *   color="success"
- *   display="inline"
- *   size="lg"
- * />
- */ function Icon() {
+ * Check if a value is a renderable React component (function, class, or forwardRef).
+ * Lucide icons are forwardRef objects (typeof "object" with a .render function).
+ * Polaris icons are plain functions.
+ */ var isComponent = function(value) {
+    return typeof value === "function" || (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && value !== null && typeof value.render === "function";
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Icon() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var source = props.source, color = props.color, hoverColor = props.hoverColor, _props_display = props.display, display = _props_display === void 0 ? "block" : _props_display, _props_size = props.size, size = _props_size === void 0 ? "default" : _props_size, _props_stroke = props.stroke, stroke = _props_stroke === void 0 ? false : _props_stroke, onClick = props.onClick, className = props.className;
-    var IconComponent = typeof source === "string" ? PolarisIcons[source] : PolarisIcons[source === null || source === void 0 ? void 0 : source.displayName];
-    var classes = styles({
-        display: display,
-        size: size
-    });
-    var iconClasses = iconStyles({
+    var source = props.source, color = props.color, hoverColor = props.hoverColor, _props_display = props.display, display = _props_display === void 0 ? "block" : _props_display, _props_size = props.size, size = _props_size === void 0 ? "default" : _props_size, _props_stroke = props.stroke, stroke = _props_stroke === void 0 ? false : _props_stroke, _props_strokeWidth = props.strokeWidth, strokeWidth = _props_strokeWidth === void 0 ? 2 : _props_strokeWidth, _props_opacity = props.opacity, opacity = _props_opacity === void 0 ? 100 : _props_opacity, onClick = props.onClick, className = props.className;
+    // --- Resolve size ---
+    var resolved = resolveSize(size);
+    var resolvedStrokeWidth = resolveStrokeWidth(strokeWidth);
+    var resolvedOpacity = resolveOpacity(opacity);
+    // --- Detect icon type ---
+    // 1. Try Polaris lookup (by displayName for components, by string key for strings)
+    var polarisIcon = typeof source === "string" ? PolarisIcons[source] : isComponent(source) ? PolarisIcons[source === null || source === void 0 ? void 0 : source.displayName] : null;
+    // 2. Check for Litho internal icons (string sources only)
+    var fillClasses = iconStyles({
         color: color,
         stroke: stroke,
         hoverColor: hoverColor
     });
     var LithoIconComponents = LithoIcons({
-        className: iconClasses
+        className: fillClasses
     });
-    if (typeof source === "string" && LithoIconComponents[source]) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: "".concat(classes).concat(className ? " ".concat(className) : ""),
-            onClick: onClick,
-            children: LithoIconComponents[source]
+    var lithoIcon = typeof source === "string" ? LithoIconComponents[source] : null;
+    // 3. If not Polaris and not Litho, treat function sources as Lucide/generic stroke icons
+    var isLucideComponent = !polarisIcon && !lithoIcon && isComponent(source);
+    // 4. If string not found in Polaris/Litho, try dynamic Lucide load
+    var needsDynamicLoad = !polarisIcon && !lithoIcon && typeof source === "string";
+    var _useState = _sliced_to_array(useState(null), 2), dynamicIcon = _useState[0], setDynamicIcon = _useState[1];
+    useEffect(function() {
+        if (!needsDynamicLoad) {
+            setDynamicIcon(null);
+            return;
+        }
+        var isMounted = true;
+        loadLucideIcon(source).then(function(icon) {
+            if (isMounted && icon) {
+                setDynamicIcon(function() {
+                    return icon;
+                });
+            }
         });
-    }
-    return /*#__PURE__*/ _jsx("div", {
-        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
-        onClick: onClick,
-        children: IconComponent ? /*#__PURE__*/ _jsx(IconComponent, {
-            className: iconClasses
-        }) : source
+        return function() {
+            isMounted = false;
+        };
+    }, [
+        source,
+        needsDynamicLoad
+    ]);
+    // --- Build container classes ---
+    var displayClass = styles({
+        display: display
     });
+    var sizeClass = resolved.sizeClass || "";
+    var containerClasses = "".concat(displayClass).concat(sizeClass ? " ".concat(sizeClass) : "").concat(className ? " ".concat(className) : "");
+    var containerStyle = _object_spread({}, resolved.sizeStyle || {}, resolvedOpacity < 100 ? {
+        opacity: resolvedOpacity / 100
+    } : {});
+    var hasContainerStyle = Object.keys(containerStyle).length > 0;
+    // --- Shared interactive props for onClick ---
+    var interactiveProps = onClick ? {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick(e);
+            }
+        }
+    } : {};
+    // --- Render: Litho internal icon ---
+    if (lithoIcon) {
+        return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
+            className: containerClasses,
+            style: hasContainerStyle ? containerStyle : undefined,
+            onClick: onClick
+        }, interactiveProps), {
+            children: lithoIcon
+        }));
+    }
+    // --- Render: Polaris icon ---
+    if (polarisIcon) {
+        var PolarisComponent = polarisIcon;
+        return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
+            className: containerClasses,
+            style: hasContainerStyle ? containerStyle : undefined,
+            onClick: onClick
+        }, interactiveProps), {
+            children: /*#__PURE__*/ _jsx(PolarisComponent, {
+                className: fillClasses
+            })
+        }));
+    }
+    // --- Render: Lucide icon (direct component or dynamically loaded) ---
+    var LucideComponent = isLucideComponent ? source : dynamicIcon;
+    if (LucideComponent) {
+        var strokeColorClass = color ? STROKE_COLOR_MAP[color] || "" : "";
+        // Lucide uses a 24x24 viewBox vs Polaris's 20x20, so render the SVG 4px
+        // smaller than the container to visually match Polaris icon sizing.
+        var lucideIconSize = Math.max(resolved.px - 3, 8);
+        var lucideProps = {
+            size: lucideIconSize
+        };
+        if (resolvedStrokeWidth !== undefined) {
+            lucideProps.strokeWidth = resolvedStrokeWidth;
+        }
+        // Override container to flex/inline-flex to center the smaller SVG
+        var lucideDisplay = display === "inline" || display === "inline-block" || display === "inline-flex" ? "inline-flex" : "flex";
+        var lucideContainerClasses = "".concat(styles({
+            display: lucideDisplay
+        })).concat(sizeClass ? " ".concat(sizeClass) : "").concat(className ? " ".concat(className) : "");
+        return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
+            className: lucideContainerClasses,
+            style: hasContainerStyle ? containerStyle : undefined,
+            onClick: onClick
+        }, interactiveProps), {
+            children: /*#__PURE__*/ _jsx(LucideComponent, _object_spread_props(_object_spread({}, lucideProps), {
+                className: strokeColorClass || undefined
+            }))
+        }));
+    }
+    // --- Render: JSX passthrough (ReactNode) or fallback ---
+    if (source && /*#__PURE__*/ isValidElement(source)) {
+        return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
+            className: containerClasses,
+            style: hasContainerStyle ? containerStyle : undefined,
+            onClick: onClick
+        }, interactiveProps), {
+            children: source
+        }));
+    }
+    return null;
 }
-;
 export default Icon;