@heymantle/litho 0.0.1

package/dist/esm/components/Grid.js

@@ -0,0 +1,142 @@
+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 _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 _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);
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-Grid grid",
+    variants: {
+        justify: {
+            stretch: "justify-stretch",
+            start: "justify-start",
+            end: "justify-end",
+            center: "justify-center"
+        },
+        align: {
+            stretch: "items-stretch",
+            start: "items-start",
+            end: "items-end",
+            center: "items-center"
+        }
+    },
+    defaultVariants: {
+        justify: "stretch",
+        align: "stretch"
+    }
+});
+/**
+ * Tailwind-based Grid component with customizable columns, gaps, alignment, and justification.
+ * 
+ * @param {object} [props={}] - Props for the Grid component.
+ * @param {React.ReactNode} [props.children] - Content to render inside the Grid.
+ * @param {number|object} [props.columns] - Defines the number of columns in the grid. Can be a single number or an object with breakpoints as keys.
+ * @param {number|object} [props.gap] - Defines the gap between grid items. Can be a single number or an object with breakpoints as keys.
+ * @param {"stretch"|"start"|"end"|"center"} [props.justify="stretch"] - Horizontal alignment of the grid items.
+ * @param {"stretch"|"start"|"end"|"center"} [props.align="stretch"] - Vertical alignment of the grid items.
+ * @param {string} [props.className] - Additional class names to apply to the grid.
+ * @returns {JSX.Element} A div element representing the grid container.
+ */ function Grid() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, columns = props.columns, gap = props.gap, _props_justify = props.justify, justify = _props_justify === void 0 ? "stretch" : _props_justify, _props_align = props.align, align = _props_align === void 0 ? "stretch" : _props_align, className = props.className;
+    var columnClasses;
+    var gapClasses;
+    if ((typeof columns === "undefined" ? "undefined" : _type_of(columns)) === "object") {
+        columnClasses = Object.entries(columns).map(function(param) {
+            var _param = _sliced_to_array(param, 2), breakpoint = _param[0], count = _param[1];
+            return breakpoint === "default" || breakpoint === "xs" ? "grid-cols-".concat(count) : "@".concat(breakpoint, ":grid-cols-").concat(count);
+        }).join(" ");
+    } else {
+        columnClasses = "grid-cols-".concat(columns);
+    }
+    if ((typeof gap === "undefined" ? "undefined" : _type_of(gap)) === "object") {
+        gapClasses = Object.entries(gap).map(function(param) {
+            var _param = _sliced_to_array(param, 2), breakpoint = _param[0], count = _param[1];
+            return breakpoint === "default" || breakpoint === "xs" ? "gap-".concat(count) : "@".concat(breakpoint, ":gap-").concat(count);
+        }).join(" ");
+    } else {
+        gapClasses = "gap-".concat(gap);
+    }
+    var classes = styles({
+        align: align,
+        justify: justify
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(classes, " ").concat(columnClasses, " ").concat(gapClasses).concat(className ? " ".concat(className) : ""),
+        children: children
+    });
+}
+;
+/**
+ * Cell component for the Grid, allowing column span customization.
+ * 
+ * @param {object} [props={}] - Props for the Cell component.
+ * @param {number|object} [props.columnSpan] - Defines the column span for the cell. Can be a single number or an object with breakpoints as keys.
+ * @param {React.ReactNode} [props.children] - Content to render inside the cell.
+ * @param {string} [props.className] - Additional class names to apply to the cell.
+ * @returns {JSX.Element} A div element representing a grid cell.
+ */ function Cell() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var columnSpan = props.columnSpan, children = props.children, className = props.className;
+    var columnSpanClasses;
+    if ((typeof columnSpan === "undefined" ? "undefined" : _type_of(columnSpan)) === "object") {
+        columnSpanClasses = Object.entries(columnSpan).map(function(param) {
+            var _param = _sliced_to_array(param, 2), breakpoint = _param[0], count = _param[1];
+            return breakpoint === "default" || breakpoint === "xs" ? "col-span-".concat(count) : "@".concat(breakpoint, ":col-span-").concat(count);
+        }).join(" ");
+    } else {
+        columnSpanClasses = "col-span-".concat(columnSpan);
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: "Litho-Grid-Cell ".concat(columnSpanClasses).concat(className ? " ".concat(className) : ""),
+        children: children
+    });
+}
+Grid.Cell = Cell;
+export default Grid;

package/dist/esm/components/HorizontalStack.js

@@ -0,0 +1,171 @@
+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;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-HorizontalStack flex flex-row",
+    variants: {
+        gap: {
+            none: "",
+            "0": "gap-0",
+            "px": "gap-px",
+            "0.5": "gap-0.5",
+            "1": "gap-1",
+            "2": "gap-2",
+            "3": "gap-3",
+            "4": "gap-4",
+            "6": "gap-6",
+            "8": "gap-8",
+            "10": "gap-10"
+        },
+        align: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            "space-between": "justify-between",
+            "space-evenly": "justify-evenly",
+            "space-around": "justify-around"
+        },
+        blockAlign: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end"
+        },
+        wrap: {
+            true: "flex-wrap",
+            false: "flex-nowrap"
+        }
+    },
+    defaultVariants: {
+        align: "start",
+        blockAlign: "start"
+    }
+});
+/**
+ * HorizontalStack Component
+ *
+ * A flexible horizontal stack component with customizable spacing, alignment, and wrapping.
+ *
+ * @param {Object} [props={}] - Component props.
+ * @param {string} [props.as='div'] - The HTML element to render. Defaults to `div`.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the stack.
+ * @param {string} [props.gap] - Spacing between children. Options: 'none', '0', 'px', '0.5', '1', '2', '3', '4', '6', '8', '10'.
+ * @param {string} [props.id] - Optional ID for the component.
+ * @param {string} [props.className] - Additional custom class names to apply to the component.
+ * @param {string} [props.align='start'] - Horizontal alignment of children. Options: 'start', 'center', 'end'.
+ * @param {string} [props.blockAlign='start'] - Vertical alignment of children. Options: 'start', 'center', 'end'.
+ * @param {boolean} [props.wrap=true] - Whether children should wrap to the next line if necessary. Defaults to `true`.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered HorizontalStack component.
+ *
+ * @example
+ * <HorizontalStack gap="2" align="center" blockAlign="start" wrap={false}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </HorizontalStack>
+ */ function HorizontalStack() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_as = props.as, as = _props_as === void 0 ? 'div' : _props_as, children = props.children, gap = props.gap, id = props.id, className = props.className, align = props.align, blockAlign = props.blockAlign, _props_wrap = props.wrap, wrap = _props_wrap === void 0 ? true : _props_wrap, restProps = _object_without_properties(props, [
+        "as",
+        "children",
+        "gap",
+        "id",
+        "className",
+        "align",
+        "blockAlign",
+        "wrap"
+    ]);
+    var classes = styles({
+        gap: gap,
+        align: align,
+        blockAlign: blockAlign,
+        wrap: wrap
+    });
+    var Element = as;
+    return /*#__PURE__*/ _jsx(Element, _object_spread_props(_object_spread({
+        id: id,
+        className: "".concat(classes).concat(className ? " ".concat(className) : "")
+    }, restProps), {
+        children: children
+    }));
+}
+;
+export default HorizontalStack;

package/dist/esm/components/Icon.js

@@ -0,0 +1,296 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import * as PolarisIcons from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-Icon",
+    variants: {
+        display: {
+            block: "block",
+            flex: "flex items-center justify-center",
+            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"
+    }
+});
+var iconStyles = tv({
+    base: "",
+    variants: {
+        color: {
+            white: "fill-white",
+            default: "fill-higher",
+            base: "fill-higher",
+            subdued: "fill-low",
+            link: "fill-link",
+            primary: "fill-link",
+            alternate: "fill-alternate",
+            successFgAlternate: "fill-fg-success-alternate",
+            success: "fill-fg-success",
+            "fg-success": "fill-fg-success",
+            critical: "fill-fg-critical",
+            "fg-critical": "fill-fg-critical",
+            criticalFgAlternate: "fill-fg-critical-alternate",
+            warning: "fill-attention-alt-icon",
+            info: "fill-info-alt-icon",
+            caution: "fill-fg-caution-alternate",
+            attention: "fill-attention-alt-icon",
+            highlight: "fill-highlight-alt-icon",
+            neutral: "fill-neutral-alt-icon",
+            normal: "fill-normal",
+            disabled: "fill-lowest",
+            active: "fill-tab-active-fg",
+            "btn-primary-icon": "fill-btn-primary-icon",
+            "btn-secondary-icon": "fill-btn-secondary-icon",
+            "btn-plain-icon": "fill-btn-plain-icon",
+            "btn-link-icon": "fill-btn-link-icon",
+            "btn-destructive-icon": "fill-btn-destructive-icon",
+            "btn-highlight-icon": "fill-btn-highlight-icon",
+            inputFg: "fill-form-input-fg",
+            inputFgDisabled: "fill-form-input-fg-disabled",
+            "success-icon": "fill-success-icon",
+            "critical-icon": "fill-critical-icon",
+            "warning-icon": "fill-warning-icon",
+            "attention-icon": "fill-attention-icon",
+            "info-icon": "fill-info-icon",
+            "highlight-icon": "fill-highlight-icon",
+            "insight-icon": "fill-insight-icon",
+            "neutral-icon": "fill-neutral-icon",
+            "success-alt-icon": "fill-success-alt-icon",
+            "critical-alt-icon": "fill-critical-alt-icon",
+            "warning-alt-icon": "fill-attention-alt-icon",
+            "attention-alt-icon": "fill-attention-alt-icon",
+            "info-alt-icon": "fill-info-alt-icon",
+            "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"
+        },
+        hoverColor: {
+            white: "hover:fill-white group-hover/LithoIcon:fill-white",
+            default: "hover:fill-higher group-hover/LithoIcon:fill-higher",
+            base: "hover:fill-higher group-hover/LithoIcon:fill-higher",
+            subdued: "hover:fill-low group-hover/LithoIcon:fill-low",
+            link: "hover:fill-link group-hover/LithoIcon:fill-link",
+            primary: "hover:fill-link group-hover/LithoIcon:fill-link",
+            alternate: "hover:fill-alternate group-hover/LithoIcon:fill-alternate",
+            success: "hover:fill-success-alt-icon group-hover/LithoIcon:fill-success-alt-icon",
+            critical: "hover:fill-critical-alt-icon group-hover/LithoIcon:fill-critical-alt-icon",
+            warning: "hover:fill-attention-alt-icon group-hover/LithoIcon:fill-attention-alt-icon",
+            info: "hover:fill-info-alt-icon group-hover/LithoIcon:fill-info-alt-icon",
+            caution: "hover:fill-caution-alt-icon group-hover/LithoIcon:fill-caution-alt-icon",
+            attention: "hover:fill-attention-alt-icon group-hover/LithoIcon:fill-attention-alt-icon",
+            highlight: "hover:fill-highlight-alt-icon group-hover/LithoIcon:fill-highlight-alt-icon",
+            neutral: "hover:fill-neutral-alt-icon group-hover/LithoIcon:fill-neutral-alt-icon",
+            normal: "hover:fill-normal group-hover/LithoIcon:fill-normal",
+            disabled: "hover:fill-lowest group-hover/LithoIcon:fill-lowest",
+            active: "hover:fill-tab-active-fg group-hover/LithoIcon:fill-tab-active-fg",
+            "btn-primary-icon": "hover:fill-btn-primary-icon group-hover/LithoIcon:fill-btn-primary-icon",
+            "btn-secondary-icon": "hover:fill-btn-secondary-icon group-hover/LithoIcon:fill-btn-secondary-icon",
+            "btn-plain-icon": "hover:fill-btn-plain-icon group-hover/LithoIcon:fill-btn-plain-icon",
+            "btn-link-icon": "hover:fill-btn-link-icon group-hover/LithoIcon:fill-btn-link-icon",
+            "btn-destructive-icon": "hover:fill-btn-destructive-icon group-hover/LithoIcon:fill-btn-destructive-icon",
+            "btn-highlight-icon": "hover:fill-btn-highlight-icon group-hover/LithoIcon:fill-btn-highlight-icon",
+            inputFg: "hover:fill-form-input-fg group-hover/LithoIcon:fill-form-input-fg",
+            inputFgDisabled: "hover:fill-form-input-fg-disabled group-hover/LithoIcon:fill-form-input-fg-disabled",
+            "success-icon": "hover:fill-success-icon group-hover/LithoIcon:fill-success-icon",
+            "critical-icon": "hover:fill-critical-icon group-hover/LithoIcon:fill-critical-icon",
+            "warning-icon": "hover:fill-warning-icon group-hover/LithoIcon:fill-warning-icon",
+            "attention-icon": "hover:fill-attention-icon group-hover/LithoIcon:fill-attention-icon",
+            "info-icon": "hover:fill-info-icon group-hover/LithoIcon:fill-info-icon",
+            "highlight-icon": "hover:fill-highlight-icon group-hover/LithoIcon:fill-highlight-icon",
+            "insight-icon": "hover:fill-insight-icon group-hover/LithoIcon:fill-insight-icon",
+            "neutral-icon": "hover:fill-neutral-icon group-hover/LithoIcon:fill-neutral-icon",
+            "success-alt-icon": "hover:fill-success-alt-icon group-hover/LithoIcon:fill-success-alt-icon",
+            "critical-alt-icon": "hover:fill-critical-alt-icon group-hover/LithoIcon:fill-critical-alt-icon",
+            "warning-alt-icon": "hover:fill-attention-alt-icon group-hover/LithoIcon:fill-attention-alt-icon",
+            "attention-alt-icon": "hover:fill-attention-alt-icon group-hover/LithoIcon:fill-attention-alt-icon",
+            "info-alt-icon": "hover:fill-info-alt-icon group-hover/LithoIcon:fill-info-alt-icon",
+            "highlight-alt-icon": "hover:fill-highlight-alt-icon group-hover/LithoIcon:fill-highlight-alt-icon",
+            "insight-alt-icon": "hover:fill-insight-alt-icon group-hover/LithoIcon:fill-insight-alt-icon",
+            "neutral-alt-icon": "hover:fill-neutral-alt-icon group-hover/LithoIcon:fill-neutral-alt-icon"
+        }
+    },
+    compoundVariants: [
+        {
+            stroke: true,
+            color: "success",
+            class: "fill-transparent stroke-success"
+        },
+        {
+            stroke: true,
+            color: "critical",
+            class: "fill-transparent stroke-critical"
+        },
+        {
+            stroke: true,
+            color: "fg-success",
+            class: "fill-transparent stroke-fg-success"
+        },
+        {
+            stroke: true,
+            color: "fg-critical",
+            class: "fill-transparent stroke-fg-critical"
+        },
+        {
+            stroke: true,
+            color: "subdued",
+            class: "fill-transparent stroke-low"
+        }
+    ],
+    defaultVariants: {
+        stroke: false,
+        color: "default"
+    }
+});
+var LithoIcons = function(param) {
+    var className = param.className;
+    return {
+        Moon: /*#__PURE__*/ _jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            className: className,
+            children: /*#__PURE__*/ _jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M21.8 15a9.7 9.7 0 0 1-3.8.8A9.7 9.7 0 0 1 9 2.2a9.8 9.8 0 0 0-6 9c0 5.4 4.4 9.8 9.8 9.8a9.8 9.8 0 0 0 9-6Z"
+            })
+        }),
+        OutlineCircle: /*#__PURE__*/ _jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            className: className,
+            children: /*#__PURE__*/ _jsx("path", {
+                d: "M10.5 2.1a10 10 0 0 1 3 0 1 1 0 1 1-.3 2 8 8 0 0 0-2.4 0 1 1 0 0 1-.3-2Zm-3 2c.3.5.2 1.1-.3 1.5a8 8 0 0 0-1.6 1.6A1 1 0 1 1 4 6a10 10 0 0 1 2-2 1 1 0 0 1 1.4.2Zm9 0A1 1 0 0 1 18 4a10 10 0 0 1 2 2 1 1 0 1 1-1.6 1.2 8 8 0 0 0-1.6-1.6 1 1 0 0 1-.2-1.4ZM3.3 9.8c.6 0 1 .6.9 1.1a8 8 0 0 0 0 2.4 1 1 0 0 1-2 .3 10 10 0 0 1 0-3c0-.5.6-.9 1.1-.8Zm17.6 0c.5 0 1 .3 1 .8a10 10 0 0 1 0 3 1 1 0 0 1-1.9-.3 8 8 0 0 0 0-2.4c0-.5.3-1 .9-1.1ZM4.2 16.6a1 1 0 0 1 1.4.2 8 8 0 0 0 1.6 1.6A1 1 0 1 1 6 20a10 10 0 0 1-2-2 1 1 0 0 1 .2-1.4Zm15.6 0c.5.3.6 1 .2 1.4a10 10 0 0 1-2 2 1 1 0 1 1-1.2-1.6 8 8 0 0 0 1.6-1.6 1 1 0 0 1 1.4-.2ZM9.7 20.8c0-.6.6-1 1.1-.9a8 8 0 0 0 2.4 0 1 1 0 0 1 .3 2 10 10 0 0 1-3 0 1 1 0 0 1-.8-1.1Z"
+            })
+        }),
+        Partnerships: /*#__PURE__*/ _jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "15",
+            height: "12.5",
+            className: className,
+            children: /*#__PURE__*/ _jsx("g", {
+                fillRule: "nonzero",
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: "M3.5 0a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-.75 2.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM7.5 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-.75 2.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM9.25 2.25a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0Zm2.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM11.5 5a.75.75 0 1 0 0 1.5h.75c.69 0 1.25.56 1.25 1.25v1.5a.75.75 0 1 0 1.5 0v-1.5A2.75 2.75 0 0 0 12.25 5h-.75ZM4.25 5.75A.75.75 0 0 0 3.5 5h-.75A2.75 2.75 0 0 0 0 7.75v1.5a.75.75 0 1 0 1.5 0v-1.5c0-.69.56-1.25 1.25-1.25h.75a.75.75 0 0 0 .75-.75ZM8.25 8A2.75 2.75 0 0 1 11 10.75v1a.75.75 0 0 1-1.5 0v-1c0-.69-.56-1.25-1.25-1.25h-1.5c-.69 0-1.25.56-1.25 1.25v1a.75.75 0 0 1-1.5 0v-1A2.75 2.75 0 0 1 6.75 8h1.5Z"
+                })
+            })
+        }),
+        Sun: /*#__PURE__*/ _jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            className: className,
+            children: /*#__PURE__*/ _jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 3v2.3m6.4.3-1.6 1.6M21 12h-2.3m-.3 6.4-1.6-1.6m-4.8 2V21m-4.8-4.2-1.6 1.6M5.3 12H3m4.2-4.8L5.6 5.6M15.8 12a3.8 3.8 0 1 1-7.6 0 3.8 3.8 0 0 1 7.6 0Z"
+            })
+        }),
+        TrendDownRight: /*#__PURE__*/ _jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "6",
+            height: "6",
+            className: className,
+            children: /*#__PURE__*/ _jsx("g", {
+                fill: "none",
+                fillRule: "evenodd",
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: "M5.5 5.5l-5-5M0 5.5h5.5V0"
+                })
+            })
+        }),
+        TrendUpRight: /*#__PURE__*/ _jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "6",
+            height: "6",
+            className: className,
+            children: /*#__PURE__*/ _jsx("g", {
+                fill: "none",
+                fillRule: "evenodd",
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: "M5.5 0.5l-5 5M0 0.5h5.5V6"
+                })
+            })
+        })
+    };
+};
+/**
+ * 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() {
+    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({
+        color: color,
+        stroke: stroke,
+        hoverColor: hoverColor
+    });
+    var LithoIconComponents = LithoIcons({
+        className: iconClasses
+    });
+    if (typeof source === "string" && LithoIconComponents[source]) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+            onClick: onClick,
+            children: LithoIconComponents[source]
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        onClick: onClick,
+        children: IconComponent ? /*#__PURE__*/ _jsx(IconComponent, {
+            className: iconClasses
+        }) : source
+    });
+}
+;
+export default Icon;