@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Divider.stories.js

@@ -0,0 +1,759 @@
+"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 CardSections () {
+        return CardSections;
+    },
+    get ContentSeparation () {
+        return ContentSeparation;
+    },
+    get Default () {
+        return Default;
+    },
+    get FormSections () {
+        return FormSections;
+    },
+    get LayoutSections () {
+        return LayoutSections;
+    },
+    get ListSeparator () {
+        return ListSeparator;
+    },
+    get NavigationSeparator () {
+        return NavigationSeparator;
+    },
+    get StepIndicator () {
+        return StepIndicator;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _Divider = /*#__PURE__*/ _interop_require_default(require("../components/Divider.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 _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
+var _transformers = require("../utilities/transformers.js");
+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;
+}
+var _default = {
+    title: "Litho/Divider",
+    component: _Divider.default,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A Divider component that provides visual separation between content sections. Dividers help organize layouts and create clear distinctions between different areas of an interface."
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        color: {
+            control: "select",
+            options: [
+                "default",
+                "subdued"
+            ],
+            description: "The color variant to apply to the divider"
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "Content above the divider"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, _object_spread({}, args)),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "Content below the divider"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var ContentSeparation = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    variant: "headingMd",
+                    children: "Section 1"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "This is the first section of content with some descriptive text."
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, _object_spread({}, args)),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    variant: "headingMd",
+                    children: "Section 2"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    children: "This is the second section of content that follows after the divider."
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Divider for separating content sections."
+            }
+        }
+    }
+};
+var CardSections = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingMd",
+                                children: "User Profile"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "Manage your personal information and account settings."
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "3",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Personal Information"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Name: John Doe"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Email: john.doe@example.com"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Phone: +1 (555) 123-4567"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Account Settings"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Notification preferences, privacy settings, and security options."
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                size: "small",
+                                children: "Edit Settings"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Using dividers to separate sections within a card."
+            }
+        }
+    }
+};
+var NavigationSeparator = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "2",
+            as: _Box.default,
+            padding: "4",
+            background: "surface-neutral-subdued",
+            borderRadius: "1",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    plain: true,
+                    style: {
+                        textAlign: "left"
+                    },
+                    children: "Home"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    plain: true,
+                    style: {
+                        textAlign: "left"
+                    },
+                    children: "Products"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    plain: true,
+                    style: {
+                        textAlign: "left"
+                    },
+                    children: "About"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    plain: true,
+                    style: {
+                        textAlign: "left"
+                    },
+                    children: "Contact"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Dividers separating navigation menu items."
+            }
+        }
+    }
+};
+var FormSections = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Contact Form",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "6",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Personal Details"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                                        columns: 2,
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                                placeholder: "First Name",
+                                                style: {
+                                                    padding: "0.5rem",
+                                                    border: "1px solid #ccc",
+                                                    borderRadius: "4px"
+                                                }
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                                placeholder: "Last Name",
+                                                style: {
+                                                    padding: "0.5rem",
+                                                    border: "1px solid #ccc",
+                                                    borderRadius: "4px"
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                        placeholder: "Email Address",
+                                        style: {
+                                            width: "100%",
+                                            padding: "0.5rem",
+                                            border: "1px solid #ccc",
+                                            borderRadius: "4px"
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Message"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("textarea", {
+                                placeholder: "Your message...",
+                                style: {
+                                    width: "100%",
+                                    minHeight: "100px",
+                                    padding: "0.5rem",
+                                    border: "1px solid #ccc",
+                                    borderRadius: "4px",
+                                    resize: "vertical"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Preferences"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        gap: "2",
+                                        blockAlign: "center",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                                type: "checkbox"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                children: "Subscribe to newsletter"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        gap: "2",
+                                        blockAlign: "center",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                                type: "checkbox"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                children: "Receive product updates"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                primary: true,
+                                children: "Send Message"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                children: "Clear Form"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Dividers organizing different sections of a form."
+            }
+        }
+    }
+};
+var ListSeparator = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Recent Activity",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        as: _Box.default,
+                        paddingBlockStart: "3",
+                        paddingBlockEnd: "3",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "User logged in"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodyMd",
+                                        children: "john.doe@example.com"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                color: "subdued",
+                                variant: "bodySm",
+                                children: "2 minutes ago"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
+                        borderColor: "subdued"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        as: _Box.default,
+                        paddingBlockStart: "3",
+                        paddingBlockEnd: "3",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Password changed"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodyMd",
+                                        children: "Security update completed"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                color: "subdued",
+                                variant: "bodySm",
+                                children: "1 hour ago"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
+                        borderColor: "subdued"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        as: _Box.default,
+                        paddingBlockStart: "3",
+                        paddingBlockEnd: "3",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Profile updated"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodyMd",
+                                        children: "Contact information modified"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                color: "subdued",
+                                variant: "bodySm",
+                                children: "2 hours ago"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
+                        borderColor: "subdued"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        as: _Box.default,
+                        paddingBlockStart: "3",
+                        paddingBlockEnd: "3",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "New device detected"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodyMd",
+                                        children: "iPhone 15 Pro from San Francisco"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                color: "subdued",
+                                variant: "bodySm",
+                                children: "1 day ago"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Dividers separating items in an activity list."
+            }
+        }
+    }
+};
+var LayoutSections = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                    columns: 2,
+                    gap: "8",
+                    alignItems: "start",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "Left Column",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "This is content in the left column of the layout."
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "Right Column",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "This is content in the right column of the layout."
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Full Width Section",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "This section spans the full width below the divided columns."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Dividers creating visual separation in complex layouts."
+            }
+        }
+    }
+};
+var StepIndicator = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Order progress",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                blockAlign: "center",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        inlineAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "full",
+                                background: "bg-surface-success",
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    color: "white",
+                                    fontWeight: "bold"
+                                },
+                                children: "1"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "bodySm",
+                                children: "Cart"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            flex: 1,
+                            height: "2px",
+                            backgroundColor: "#4caf50",
+                            margin: "0 0.5rem"
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        inlineAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "full",
+                                background: "bg-surface-success",
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    color: "white",
+                                    fontWeight: "bold"
+                                },
+                                children: "2"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "bodySm",
+                                children: "Shipping"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            flex: 1,
+                            height: "2px",
+                            backgroundColor: "#4caf50",
+                            margin: "0 0.5rem"
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        inlineAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "full",
+                                background: "bg-surface-interactive",
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    color: "white",
+                                    fontWeight: "bold"
+                                },
+                                children: "3"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "bodySm",
+                                children: "Payment"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            flex: 1,
+                            height: "2px",
+                            backgroundColor: "#e1e1e1",
+                            margin: "0 0.5rem"
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        inlineAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "full",
+                                background: "bg-surface-neutral",
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    color: "#999",
+                                    fontWeight: "bold"
+                                },
+                                children: "4"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "bodySm",
+                                color: "subdued",
+                                children: "Confirmation"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Dividers used in a step indicator to show progress through a process."
+            }
+        }
+    }
+};