@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/List.stories.js

@@ -0,0 +1,1031 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get BulletList () {
+        return BulletList;
+    },
+    get ChecklistExample () {
+        return ChecklistExample;
+    },
+    get ComparisonList () {
+        return ComparisonList;
+    },
+    get Default () {
+        return Default;
+    },
+    get FeatureList () {
+        return FeatureList;
+    },
+    get InstructionSteps () {
+        return InstructionSteps;
+    },
+    get LooseSpacing () {
+        return LooseSpacing;
+    },
+    get NavigationMenu () {
+        return NavigationMenu;
+    },
+    get NestedLists () {
+        return NestedLists;
+    },
+    get NumberedList () {
+        return NumberedList;
+    },
+    get TightSpacing () {
+        return TightSpacing;
+    },
+    get WithIcons () {
+        return WithIcons;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _List = /*#__PURE__*/ _interop_require_default(require("../components/List.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("../components/Icon.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _polarisicons = require("@shopify/polaris-icons");
+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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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;
+}
+var _default = {
+    title: "Litho/List",
+    component: _List.default,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A List component that displays a series of related items in a structured format. Lists can be ordered, unordered, or bulleted with support for various content types and styling options."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        type: {
+            control: "select",
+            options: [
+                "bullet",
+                "number",
+                "none"
+            ],
+            description: "Type of list (bulleted, numbered, or no markers)"
+        },
+        spacing: {
+            control: "select",
+            options: [
+                "tight",
+                "normal",
+                "loose"
+            ],
+            description: "Spacing between list items"
+        },
+        children: {
+            control: false,
+            description: "List items to render inside the list"
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes to apply"
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, _object_spread_props(_object_spread({}, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "First list item"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Second list item"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Third list item"
+                })
+            ]
+        }));
+    }
+};
+var BulletList = {
+    args: {
+        type: "bullet"
+    },
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, _object_spread_props(_object_spread({}, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Apples"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Bananas"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Oranges"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Grapes"
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Bulleted list for unordered items."
+            }
+        }
+    }
+};
+var NumberedList = {
+    args: {
+        type: "number"
+    },
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, _object_spread_props(_object_spread({}, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Create your account"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Verify your email address"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Complete your profile"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Start using the platform"
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Numbered list for ordered steps or instructions."
+            }
+        }
+    }
+};
+var TightSpacing = {
+    args: {
+        gap: "tight",
+        type: "bullet"
+    },
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, _object_spread_props(_object_spread({}, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Item with tight spacing"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Another tightly spaced item"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Third item with minimal gaps"
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "List with tight spacing for compact layouts."
+            }
+        }
+    }
+};
+var LooseSpacing = {
+    args: {
+        gap: "loose",
+        type: "bullet"
+    },
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, _object_spread_props(_object_spread({}, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Item with loose spacing"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Another item with more breathing room"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: "Third item with generous gaps"
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "List with loose spacing for better readability."
+            }
+        }
+    }
+};
+var NestedLists = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+            type: "bullet",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default.Item, {
+                    children: [
+                        "Web Development",
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            paddingBlockStart: "2",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+                                type: "bullet",
+                                gap: "tight",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "Frontend Technologies"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "Backend Frameworks"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "Database Management"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default.Item, {
+                    children: [
+                        "Mobile Development",
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            paddingBlockStart: "2",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+                                type: "bullet",
+                                gap: "tight",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "iOS Development"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "Android Development"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "Cross-platform Solutions"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default.Item, {
+                    children: [
+                        "DevOps",
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            paddingBlockStart: "2",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+                                type: "bullet",
+                                gap: "tight",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "CI/CD Pipelines"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "Cloud Infrastructure"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                        children: "Monitoring & Logging"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Nested lists for hierarchical information organization."
+            }
+        }
+    }
+};
+var WithIcons = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+            type: "none",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "2",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                source: _polarisicons.MobileAcceptMajor,
+                                size: "sm",
+                                color: "success"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "Task completed successfully"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "2",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                source: _polarisicons.AlertMinor,
+                                size: "sm",
+                                color: "warning"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "Warning: Action required"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "2",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                source: _polarisicons.InfoMinor,
+                                size: "sm",
+                                color: "subdued"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "Additional information available"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "List items with icons for visual communication."
+            }
+        }
+    }
+};
+var FeatureList = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Premium Features",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+                type: "bullet",
+                gap: "loose",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "1",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Advanced Analytics"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "Get detailed insights into your data with custom dashboards and reports."
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "1",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Priority Support"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "24/7 dedicated support with guaranteed response times."
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "1",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Custom Integrations"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "Connect with any third-party service using our API platform."
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "1",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Team Collaboration"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "Share projects and collaborate in real-time with your team members."
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Feature list with titles and descriptions for marketing content."
+            }
+        }
+    }
+};
+var ChecklistExample = {
+    render: function() {
+        var checklistItems = [
+            {
+                id: 1,
+                text: "Review project requirements",
+                completed: true
+            },
+            {
+                id: 2,
+                text: "Set up development environment",
+                completed: true
+            },
+            {
+                id: 3,
+                text: "Create initial wireframes",
+                completed: false
+            },
+            {
+                id: 4,
+                text: "Design user interface mockups",
+                completed: false
+            },
+            {
+                id: 5,
+                text: "Implement core functionality",
+                completed: false
+            },
+            {
+                id: 6,
+                text: "Write unit tests",
+                completed: false
+            },
+            {
+                id: 7,
+                text: "Deploy to staging environment",
+                completed: false
+            }
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Project Checklist",
+            padded: true,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default, {
+                    gap: "loose",
+                    children: checklistItems.map(function(item) {
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                gap: "3",
+                                blockAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        minInlineSize: "20px",
+                                        minBlockSize: "20px",
+                                        borderRadius: "full",
+                                        background: item.completed ? "success" : "neutral",
+                                        inlineAlign: "center",
+                                        blockAlign: "center",
+                                        style: {
+                                            display: "flex"
+                                        },
+                                        children: item.completed && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "xs",
+                                            color: "white"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        style: {
+                                            textDecoration: item.completed ? "line-through" : "none",
+                                            color: item.completed ? "#999" : "inherit"
+                                        },
+                                        children: item.text
+                                    })
+                                ]
+                            })
+                        }, item.id);
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockStart: "6",
+                    borderBlockStartWidth: "1",
+                    borderColor: "neutral",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        paddingBlockStart: "4",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                            color: "subdued",
+                            children: [
+                                "Progress: ",
+                                checklistItems.filter(function(item) {
+                                    return item.completed;
+                                }).length,
+                                " of",
+                                " ",
+                                checklistItems.length,
+                                " completed"
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Interactive checklist example with completion status visualization."
+            }
+        }
+    }
+};
+var NavigationMenu = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Main Navigation",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            blockAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Dashboard"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                    source: _polarisicons.ViewMinor,
+                                    size: "sm",
+                                    color: "subdued"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            blockAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Projects"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                    source: _polarisicons.ViewMinor,
+                                    size: "sm",
+                                    color: "subdued"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            blockAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Team Members"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                    source: _polarisicons.ViewMinor,
+                                    size: "sm",
+                                    color: "subdued"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            blockAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Settings"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                    source: _polarisicons.ViewMinor,
+                                    size: "sm",
+                                    color: "subdued"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Navigation menu layout using list items with icons."
+            }
+        }
+    }
+};
+var InstructionSteps = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Getting Started Guide",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+                type: "number",
+                gap: "loose",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Install the Application"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Download and install the application from our website or app store."
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        size: "small",
+                                        children: "Download Now"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Create Your Account"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Sign up with your email address and create a secure password."
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        size: "small",
+                                        children: "Sign Up"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Verify Your Email"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Check your inbox and click the verification link we sent you."
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Complete Your Profile"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Add your personal information and preferences to get started."
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        size: "small",
+                                        children: "Complete Profile"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Step-by-step instructions with detailed descriptions and action buttons."
+            }
+        }
+    }
+};
+var ComparisonList = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+            columns: 2,
+            gap: "8",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Free Plan",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+                        type: "bullet",
+                        gap: "tight",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "sm",
+                                            color: "success"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "5 projects"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "sm",
+                                            color: "success"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "1GB storage"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "sm",
+                                            color: "success"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Basic support"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                            minInlineSize: "16px",
+                                            minBlockSize: "16px",
+                                            inlineAlign: "center",
+                                            blockAlign: "center",
+                                            style: {
+                                                display: "flex",
+                                                color: "#999",
+                                                fontSize: "12px"
+                                            },
+                                            children: "\xd7"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "Advanced analytics"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                            minInlineSize: "16px",
+                                            minBlockSize: "16px",
+                                            inlineAlign: "center",
+                                            blockAlign: "center",
+                                            style: {
+                                                display: "flex",
+                                                color: "#999",
+                                                fontSize: "12px"
+                                            },
+                                            children: "\xd7"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "Priority support"
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Pro Plan",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
+                        type: "bullet",
+                        gap: "tight",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "sm",
+                                            color: "success"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Unlimited projects"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "sm",
+                                            color: "success"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "100GB storage"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "sm",
+                                            color: "success"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Priority support"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "sm",
+                                            color: "success"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Advanced analytics"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                            source: _polarisicons.MobileAcceptMajor,
+                                            size: "sm",
+                                            color: "success"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "Custom integrations"
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Side-by-side comparison lists showing plan features and limitations."
+            }
+        }
+    }
+};