@heymantle/litho 0.0.1

package/dist/esm/components/Image.js

@@ -0,0 +1,141 @@
+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 _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 React, { useCallback } from "react";
+import { tv } from "tailwind-variants";
+var styles = 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 = useCallback(function() {
+        if (onLoad) onLoad();
+    }, [
+        onLoad
+    ]);
+    return /*#__PURE__*/ _jsx("img", _object_spread({
+        alt: alt,
+        srcSet: finalSourceSet,
+        src: source,
+        crossOrigin: crossOrigin,
+        onLoad: handleLoad,
+        className: "".concat(classes).concat(className ? " ".concat(className) : '')
+    }, rest));
+}
+;
+export default Image;

package/dist/esm/components/InlineError.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { default as Icon } from "./Icon.js";
+import { CircleAlertMajor } from "@shopify/polaris-icons";
+var styles = 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 ? CircleAlertMajor : _props_icon;
+    var classes = styles();
+    return /*#__PURE__*/ _jsxs("div", {
+        id: "".concat(fieldID, "Error"),
+        className: classes,
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                source: icon,
+                color: "critical"
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "Litho-InlineError__Text text-fg-critical",
+                children: message
+            })
+        ]
+    });
+}
+;
+export default InlineError;

package/dist/esm/components/Label.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import Text from "./Text.js";
+import Tooltip from "./Tooltip.js";
+var styles = 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__*/ _jsxs("div", {
+        className: "flex items-center gap-1".concat(className ? " ".concat(className) : ""),
+        children: [
+            /*#__PURE__*/ _jsxs(Text, {
+                as: as,
+                id: id ? "".concat(id, "Label") : undefined,
+                htmlFor: id,
+                className: classes,
+                variant: variant,
+                fontWeight: fontWeight,
+                color: color,
+                children: [
+                    children,
+                    requiredIndicator ? /*#__PURE__*/ _jsx("span", {
+                        className: "Litho-Label__RequiredIndicator text-fg-critical ml-0.5",
+                        children: "*"
+                    }) : null
+                ]
+            }),
+            tooltip && /*#__PURE__*/ _jsx(Tooltip, {
+                content: tooltip
+            })
+        ]
+    });
+}
+export default Label;

package/dist/esm/components/Layout.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo } from "react";
+import { tv } from "tailwind-variants";
+import { FrameContext } from "./AppProvider.js";
+import Section from "./LayoutSection.js";
+import Text from "./Text.js";
+export var LayoutContext = /*#__PURE__*/ createContext();
+var styles = tv({
+    base: "Litho-Layout flex flex-col gap-4 w-full max-w-full",
+    variants: {
+        hasSidebarSection: {
+            true: ""
+        }
+    },
+    compoundVariants: [
+        {
+            hasSidebarSection: true,
+            embedded: false,
+            className: "@lg:flex-row @lg:gap-5"
+        },
+        {
+            hasSidebarSection: true,
+            embedded: true,
+            className: "@lg-embed:flex-row @lg-embed:items-start @lg-embed:gap-5"
+        }
+    ],
+    defaultVariants: {
+        hasSidebarSection: false,
+        embedded: false
+    }
+});
+/**
+ * Layout component for structuring content.
+ *
+ * The `Layout` component organizes its children into a flexible and responsive layout.
+ * If no `Layout.Section` or `Layout.AnnotatedSection` children are found, it wraps the
+ * children inside a default `Layout.Section`.
+ *
+ * @param {Object} props - Component props.
+ * @param {React.ReactNode} props.children - The content to render inside the layout.
+ * @returns {JSX.Element} The rendered layout component.
+ */ function Layout() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var embedded = useContext(FrameContext).embedded;
+    var children = props.children;
+    var analyzeChildren = function(children) {
+        var depth = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+        if (depth > 3) return {
+            sections: [],
+            hasSection: false,
+            parentHasSidebar: false
+        };
+        var sections = [];
+        var hasSection = false;
+        var parentHasSidebar = false;
+        React.Children.forEach(children, function(child) {
+            if (/*#__PURE__*/ React.isValidElement(child)) {
+                var type = child.type, childProps = child.props;
+                if ([
+                    "Layout.Section",
+                    "Layout.AnnotatedSection"
+                ].includes(type === null || type === void 0 ? void 0 : type.displayName)) {
+                    hasSection = true;
+                }
+                if ((type === null || type === void 0 ? void 0 : type.displayName) === "Layout.Section") {
+                    sections.push(child);
+                    if (childProps.sidebar === true || childProps.sidebar === "slim") {
+                        parentHasSidebar = true;
+                    }
+                }
+                var childAnalysis = analyzeChildren(childProps === null || childProps === void 0 ? void 0 : childProps.children, depth + 1);
+                sections = sections.concat(childAnalysis.sections);
+                hasSection = hasSection || childAnalysis.hasSection;
+                parentHasSidebar = parentHasSidebar || childAnalysis.parentHasSidebar;
+            }
+        });
+        return {
+            sections: sections,
+            hasSection: hasSection,
+            parentHasSidebar: parentHasSidebar
+        };
+    };
+    var _useMemo = useMemo(function() {
+        return analyzeChildren(children);
+    }, [
+        children
+    ]), sections = _useMemo.sections, hasSection = _useMemo.hasSection, parentHasSidebar = _useMemo.parentHasSidebar;
+    var hasSidebarSection = sections.length > 0;
+    var classes = styles({
+        hasSidebarSection: hasSidebarSection,
+        embedded: embedded
+    });
+    var wrappedChildren = hasSection ? children : /*#__PURE__*/ _jsx(Layout.Section, {
+        children: children
+    });
+    return /*#__PURE__*/ _jsx(LayoutContext.Provider, {
+        value: {
+            parentHasSidebar: parentHasSidebar
+        },
+        children: /*#__PURE__*/ _jsx("div", {
+            className: classes,
+            children: wrappedChildren
+        })
+    });
+}
+var annotatedSectionStyles = tv({
+    base: "Litho-Layout__AnnotatedSection w-full flex flex-col gap-1 border-edge-subdued dark:border-tint-alt-2 pb-5",
+    variants: {
+        embedded: {
+            true: "@md-embed:grid @md-embed:grid-cols-12 @md-embed:gap-8 @md-embed:border-b @md-embed:last:border-b-0",
+            false: "@md:grid @md:grid-cols-12 @md:gap-8 @md:border-b @md:last:border-b-0"
+        }
+    },
+    defaultVariants: {
+        embedded: false
+    }
+});
+/**
+ * AnnotatedSection component for displaying a titled section with optional description.
+ *
+ * The `AnnotatedSection` organizes content into two main areas:
+ * - Annotation: Displays a title and description.
+ * - Content: Displays the main content provided as children.
+ *
+ * @param {Object} props - Component props.
+ * @param {React.ReactNode} props.children - The main content of the section.
+ * @param {string|React.ReactNode} [props.title] - The title for the annotated section.
+ * @param {string|React.ReactNode} [props.description] - A brief description for the annotated section.
+ * @returns {JSX.Element} The rendered annotated section component.
+ */ function AnnotatedSection() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, title = props.title, description = props.description;
+    var embedded = useContext(FrameContext).embedded;
+    var annotatedSectionClasses = annotatedSectionStyles({
+        embedded: embedded
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: annotatedSectionClasses,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "Litho-Layout__Annotation flex flex-col gap-1 @md:col-span-4 py-2",
+                children: [
+                    title && (typeof title === "string" ? /*#__PURE__*/ _jsx(Text, {
+                        variant: "headingMd",
+                        children: title
+                    }) : title),
+                    description && (typeof description === "string" ? /*#__PURE__*/ _jsx(Text, {
+                        color: "subdued",
+                        children: description
+                    }) : description)
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "Litho-Layout__AnnotationContent @md:col-span-8",
+                children: children
+            })
+        ]
+    });
+}
+AnnotatedSection.displayName = "Layout.AnnotatedSection";
+Layout.AnnotatedSection = AnnotatedSection;
+Layout.Section = Section;
+export default Layout;

package/dist/esm/components/LayoutSection.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext } from "react";
+import { tv } from "tailwind-variants";
+import { FrameContext } from "./AppProvider.js";
+import { LayoutContext } from "./Layout.js";
+var sectionStyles = tv({
+    base: "Litho-Layout__Section",
+    variants: {
+        sidebar: {
+            true: "",
+            slim: ""
+        },
+        sibling: {
+            none: "w-full",
+            sidebar: "flex-1 basis-0 min-w-0"
+        }
+    },
+    compoundVariants: [
+        {
+            sidebar: true,
+            embedded: true,
+            className: "@lg-embed:w-1/3 @lg-embed:max-w-80 @xl-embed:max-w-120 @lg-embed:w-1/3 @lg-embed:max-w-120"
+        },
+        {
+            sidebar: true,
+            embedded: false,
+            className: "@lg:w-1/3 @lg:max-w-80 @xl:max-w-120 @lg:w-1/3 @lg:max-w-120"
+        },
+        {
+            sidebar: "slim",
+            embedded: true,
+            className: "@lg-embed:w-1/3 @lg-embed:max-w-80 @lg-embed:w-1/3 @lg-embed:max-w-80"
+        },
+        {
+            sidebar: "slim",
+            embedded: false,
+            className: "@lg:w-1/3 @lg:max-w-80 @lg:w-1/3 @lg:max-w-80"
+        }
+    ],
+    defaultVariants: {
+        sidebar: false,
+        embedded: false
+    }
+});
+/**
+ * Section component for flexible content grouping.
+ *
+ * The `Section` allows for configuring its layout, supporting sidebar and slim variants.
+ *
+ * @param {Object} props - Component props.
+ * @param {React.ReactNode} props.children - The content to render inside the section.
+ * @param {boolean|"slim"} [props.sidebar=false] - Configures the section layout:
+ *  - `true`: Makes it a sidebar with a 1/3 basis.
+ *  - `"slim"`: Makes it a slim sidebar with a max width of 320px.
+ *  - `false`: Allows it to grow.
+ * @params {boolean|integer} props.sticky - Specify whether the section becomes sticky or not
+ * @returns {JSX.Element} The rendered section component.
+ */ function Section() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, _props_sidebar = props.sidebar, sidebar = _props_sidebar === void 0 ? false : _props_sidebar, className = props.className, sticky = props.sticky;
+    var embedded = useContext(FrameContext).embedded;
+    var parentHasSidebar = useContext(LayoutContext).parentHasSidebar;
+    var sectionClasses = sectionStyles({
+        sidebar: sidebar,
+        sticky: sticky,
+        sibling: sidebar ? undefined : parentHasSidebar ? "sidebar" : "none",
+        embedded: embedded
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(sectionClasses).concat(className ? " ".concat(className) : ""),
+        children: sticky ? /*#__PURE__*/ _jsx("div", {
+            className: "sticky".concat(typeof sticky === "boolean" ? " top-[calc(var(--litho-top-bar-height)+var(--spacing)*4)]" : ""),
+            style: typeof sticky === "number" ? {
+                top: sticky
+            } : undefined,
+            children: children
+        }) : children
+    });
+}
+Section.displayName = "Layout.Section";
+export default Section;

package/dist/esm/components/Link.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-Link cursor-pointer hover:underline",
+    variants: {
+        monochrome: {
+            true: "text-normal hover:text-higher"
+        },
+        removeUnderline: {
+            true: "no-underline",
+            false: "underline"
+        },
+        bold: {
+            true: "font-medium no-underline",
+            false: "font-normal"
+        },
+        disabled: {
+            true: "text-lowest hover:text-lowest cursor-default hover:no-underline",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            monochrome: false,
+            disabled: false,
+            color: "link",
+            className: "text-link hover:text-link-lower"
+        },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "info",
+            className: "text-info-alt-fg dark:text-info-alt-fg-dark"
+        },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "critical",
+            className: "text-critical-alt-fg dark:text-critical-alt-fg-dark"
+        },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "success",
+            className: "text-success-alt-fg dark:text-success-alt-fg-dark"
+        },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "warning",
+            className: "text-warning-alt-fg dark:text-warning-alt-fg-dark"
+        },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "attention",
+            className: "text-attention-alt-fg dark:text-attention-alt-fg-dark"
+        },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "highlight",
+            className: "text-highlight-alt-fg dark:text-highlight-alt-fg-dark"
+        },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "neutral",
+            className: "text-neutral-alt-fg dark:text-neutral-alt-fg-dark"
+        }
+    ],
+    defaultVariants: {
+        monochrome: false,
+        removeUnderline: false,
+        bold: false,
+        disabled: false,
+        color: "link"
+    }
+});
+/**
+ * Renders an accessible link with customizable styling based on variants.
+ *
+ * @param {Object} props - Props for the Link component.
+ * @param {string} props.url - The URL the link points to.
+ * @param {React.ReactNode} props.children - Content to display within the link.
+ * @param {Function} [props.onClick] - Optional click event handler for the link.
+ * @param {boolean} [props.external=false] - If true, opens the link in a new tab.
+ * @param {string} [props.target] - Optional target attribute for specifying where to open the link.
+ * @param {string} [props.id] - Optional id attribute for the link.
+ * @param {boolean} [props.monochrome=false] - If true, applies monochrome color scheme.
+ * @param {boolean} [props.removeUnderline=false] - If true, removes underline from the link.
+ * @param {string} [props.accessibilityLabel] - Optional aria-label for accessibility.
+ * @param {string} [props.dataPrimaryLink] - Optional data attribute for custom tracking.
+ * 
+ * @returns {JSX.Element} Rendered link element.
+ */ function Link() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var url = props.url, children = props.children, onClick = props.onClick, external = props.external, target = props.target, _props_bold = props.bold, bold = _props_bold === void 0 ? false : _props_bold, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, id = props.id, monochrome = props.monochrome, removeUnderline = props.removeUnderline, accessibilityLabel = props.accessibilityLabel, dataPrimaryLink = props.dataPrimaryLink, color = props.color, className = props.className;
+    var classes = styles({
+        monochrome: monochrome,
+        removeUnderline: removeUnderline,
+        bold: bold,
+        disabled: disabled,
+        color: color
+    });
+    return /*#__PURE__*/ _jsx("a", {
+        href: disabled ? undefined : url,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        onClick: disabled ? undefined : onClick,
+        target: target ? target : external ? "_blank" : undefined,
+        id: id,
+        "aria-label": accessibilityLabel,
+        "data-primary-link": dataPrimaryLink,
+        children: children
+    });
+}
+;
+Link.displayName = "Link";
+export default Link;

package/dist/esm/components/List.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-List list-outside ml-5",
+    variants: {
+        type: {
+            bullet: "list-disc",
+            number: "list-decimal"
+        },
+        spacing: {
+            loose: "space-y-2",
+            normal: "space-y-1",
+            tight: "space-y-0"
+        }
+    }
+});
+/**
+ * List component for rendering unordered or ordered lists.
+ *
+ * @param {Object} props - Component props.
+ * @param {React.ReactNode} props.children - The list items to render inside the list.
+ * @param {'normal' | 'loose' | 'tight'} [props.spacing='normal'] - Controls vertical spacing between list items.
+ * @param {'bullet' | 'number'} [props.type='bullet'] - Determines list type: bullet (unordered) or number (ordered).
+ * @param {string} [props.className] - Additional class names to apply to the list container.
+ * @returns {JSX.Element} The rendered List component.
+ */ function List() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, _props_spacing = props.spacing, spacing = _props_spacing === void 0 ? 'normal' : _props_spacing, _props_type = props.type, type = _props_type === void 0 ? 'bullet' : _props_type, className = props.className;
+    var classes = styles({
+        spacing: spacing,
+        type: type
+    });
+    var Element = type === 'bullet' ? 'ul' : 'ol';
+    return /*#__PURE__*/ _jsx(Element, {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ''),
+        children: children
+    });
+}
+;
+var itemStyles = tv({
+    base: "Litho-ListItem text-left leading-4"
+});
+/**
+ * Item component for individual list items in the List component.
+ *
+ * @param {Object} props - Component props.
+ * @param {React.ReactNode} props.children - The content of the list item.
+ * @param {string} [props.className] - Additional class names to apply to the list item.
+ * @returns {JSX.Element} The rendered Item component.
+ */ function Item() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, className = props.className;
+    var itemClasses = itemStyles();
+    return /*#__PURE__*/ _jsx("li", {
+        className: "".concat(itemClasses).concat(className ? " ".concat(className) : ''),
+        children: children
+    });
+}
+;
+List.Item = Item;
+export default List;