@heymantle/litho 0.0.1

package/dist/cjs/components/Icon.js

@@ -0,0 +1,346 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+var _polarisicons = /*#__PURE__*/ _interop_require_wildcard(require("@shopify/polaris-icons"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+var styles = (0, _tailwindvariants.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 = (0, _tailwindvariants.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__*/ (0, _jsxruntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            className: className,
+            children: /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            className: className,
+            children: /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "15",
+            height: "12.5",
+            className: className,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("g", {
+                fillRule: "nonzero",
+                children: /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            className: className,
+            children: /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "6",
+            height: "6",
+            className: className,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("g", {
+                fill: "none",
+                fillRule: "evenodd",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                    d: "M5.5 5.5l-5-5M0 5.5h5.5V0"
+                })
+            })
+        }),
+        TrendUpRight: /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "6",
+            height: "6",
+            className: className,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("g", {
+                fill: "none",
+                fillRule: "evenodd",
+                children: /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("div", {
+            className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+            onClick: onClick,
+            children: LithoIconComponents[source]
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        onClick: onClick,
+        children: IconComponent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(IconComponent, {
+            className: iconClasses
+        }) : source
+    });
+}
+var _default = Icon;

package/dist/cjs/components/Image.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _tailwindvariants = require("tailwind-variants");
+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 _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+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 _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;
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Image",
+    variants: {
+        borderRadius: {
+            default: "",
+            none: "rounded-none",
+            xs: "rounded-xs",
+            sm: "rounded-sm",
+            md: "rounded-md",
+            lg: "rounded-lg",
+            full: "rounded-full",
+            max: "rounded-max"
+        },
+        rounded: {
+            true: "rounded-md"
+        }
+    }
+});
+/**
+ * Image component that renders an image with optional styling and behavior.
+ *
+ * @component
+ * @param {Object} props - Properties passed to the Image component.
+ * @param {string} [props.alt] - Alternative text for the image.
+ * @param {Array<{source: string, descriptor: string}>} [props.sourceSet] - Array of image sources and descriptors for responsive images.
+ * @param {string} [props.source] - URL of the image to display.
+ * @param {boolean} [props.rounded] - Whether to round the image.
+ * @param {string} [props.crossOrigin] - Sets the crossOrigin attribute for the image. Possible values are "anonymous" or "use-credentials".
+ * @param {function} [props.onLoad] - Callback function to handle the image load event.
+ * @param {string} [props.className] - Additional classes to apply to the image.
+ * @param {('default'|'none'|'xs'|'sm'|'md'|'lg'|'full'|'max')} [props.borderRadius='default'] - The border radius variant for the image.
+ * @param {Object} [rest] - Any additional props passed to the underlying `<img>` element.
+ * 
+ * @example
+ * <Image
+ *   alt="Sample Image"
+ *   sourceSet={[
+ *     { source: 'image-320w.jpg', descriptor: '320w' },
+ *     { source: 'image-640w.jpg', descriptor: '640w' }
+ *   ]}
+ *   source="image.jpg"
+ *   borderRadius="md"
+ *   onLoad={() => console.log("Image loaded")}
+ *   className="custom-class"
+ * />
+ *
+ * @returns {JSX.Element} A styled image component with optional responsive support.
+ */ function Image() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var alt = props.alt, sourceSet = props.sourceSet, source = props.source, crossOrigin = props.crossOrigin, onLoad = props.onLoad, rounded = props.rounded, className = props.className, borderRadius = props.borderRadius, rest = _object_without_properties(props, [
+        "alt",
+        "sourceSet",
+        "source",
+        "crossOrigin",
+        "onLoad",
+        "rounded",
+        "className",
+        "borderRadius"
+    ]);
+    var classes = styles({
+        borderRadius: borderRadius,
+        rounded: rounded
+    });
+    var finalSourceSet = sourceSet ? sourceSet.map(function(param) {
+        var subSource = param.source, descriptor = param.descriptor;
+        return "".concat(subSource, " ").concat(descriptor);
+    }).join(',') : null;
+    var handleLoad = (0, _react.useCallback)(function() {
+        if (onLoad) onLoad();
+    }, [
+        onLoad
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("img", _object_spread({
+        alt: alt,
+        srcSet: finalSourceSet,
+        src: source,
+        crossOrigin: crossOrigin,
+        onLoad: handleLoad,
+        className: "".concat(classes).concat(className ? " ".concat(className) : '')
+    }, rest));
+}
+var _default = Image;

package/dist/cjs/components/InlineError.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-InlineError flex items-start justify-start gap-2"
+});
+/**
+ * InlineError Component
+ * 
+ * Displays an inline error message with an icon, useful for indicating errors next to form fields.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {string} props.message - The error message to display.
+ * @param {string} props.fieldID - The ID of the field this error is associated with, used to generate an accessible ID for the error element.
+ *
+ * @returns {JSX.Element} A styled inline error message with an icon.
+ * 
+ * @example
+ * <InlineError message="This field is required" fieldID="username" />
+ * 
+ */ function InlineError() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var message = props.message, fieldID = props.fieldID, _props_icon = props.icon, icon = _props_icon === void 0 ? _polarisicons.CircleAlertMajor : _props_icon;
+    var classes = styles();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        id: "".concat(fieldID, "Error"),
+        className: classes,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                source: icon,
+                color: "critical"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "Litho-InlineError__Text text-fg-critical",
+                children: message
+            })
+        ]
+    });
+}
+var _default = InlineError;

package/dist/cjs/components/Label.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Label flex items-center gap-1 text-highest",
+    variants: {
+        hidden: {
+            true: "sr-only"
+        }
+    }
+});
+/**
+ * Label component
+ *
+ * This component renders a customizable label element with optional required indicator styling.
+ * It uses `tailwind-variants` to apply base styles and accepts various props for customization.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {React.ReactNode} props.children - The content to be displayed within the label.
+ * @param {string} [props.id] - The identifier for the label and its associated form element.
+ * @param {boolean} [props.hidden] - If true, the label is visually hidden.
+ * @param {boolean} [props.requiredIndicator] - If true, displays an asterisk (*) to indicate a required field.
+ * @param {string} [props.className] - Additional CSS class names.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} [props.tooltip] - Tooltip content for the label.
+ * @param {Object} [props.rest] - Additional props to be spread onto the label element.
+ *
+ * @returns {JSX.Element} The rendered label component with optional required indicator.
+ */ function Label() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var tmp = props.color, _color = tmp === void 0 ? "subdued" : tmp, children = props.children, _props_variant = props.variant, variant = _props_variant === void 0 ? "bodyMd" : _props_variant, _props_fontWeight = props.fontWeight, fontWeight = _props_fontWeight === void 0 ? "normal" : _props_fontWeight, id = props.id, hidden = props.hidden, className = props.className, requiredIndicator = props.requiredIndicator, _props_as = props.as, as = _props_as === void 0 ? "label" : _props_as, disabled = props.disabled, tooltip = props.tooltip;
+    var classes = styles({
+        requiredIndicator: requiredIndicator,
+        hidden: hidden,
+        disabled: disabled
+    });
+    var color = disabled ? "disabled" : _color;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "flex items-center gap-1".concat(className ? " ".concat(className) : ""),
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                as: as,
+                id: id ? "".concat(id, "Label") : undefined,
+                htmlFor: id,
+                className: classes,
+                variant: variant,
+                fontWeight: fontWeight,
+                color: color,
+                children: [
+                    children,
+                    requiredIndicator ? /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "Litho-Label__RequiredIndicator text-fg-critical ml-0.5",
+                        children: "*"
+                    }) : null
+                ]
+            }),
+            tooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                content: tooltip
+            })
+        ]
+    });
+}
+var _default = Label;