@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/stories/Layout.stories.js

@@ -0,0 +1,687 @@
+"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 AnnotatedSections () {
+        return AnnotatedSections;
+    },
+    get Default () {
+        return Default;
+    },
+    get MixedSections () {
+        return MixedSections;
+    },
+    get ProductManagement () {
+        return ProductManagement;
+    },
+    get SettingsPage () {
+        return SettingsPage;
+    },
+    get WithSections () {
+        return WithSections;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+var _Layout = /*#__PURE__*/ _interop_require_default(require("../components/Layout.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 _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
+var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Checkbox.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: 'Litho/Layout',
+    component: _Layout.default,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: "A Layout component that provides flexible and responsive layout structure. It includes Section and AnnotatedSection subcomponents for organizing content with titles and descriptions."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Content to render inside the layout'
+        }
+    }
+};
+var Default = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            padding: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Default Layout",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "This content is automatically wrapped in a Layout.Section when no explicit sections are provided."
+                    })
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Default layout that automatically wraps content in a section.'
+            }
+        }
+    }
+};
+var WithSections = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            padding: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Layout.default, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "First Section",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "This is the first section of content."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "Second Section",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "This is the second section of content."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "Third Section",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "This is the third section of content."
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout with multiple explicit sections.'
+            }
+        }
+    }
+};
+var AnnotatedSections = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            padding: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Layout.default, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Account Settings",
+                        description: "Manage your account information and preferences",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Full Name",
+                                        placeholder: "Enter your full name"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Email",
+                                        type: "email",
+                                        placeholder: "Enter your email"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Phone",
+                                        type: "tel",
+                                        placeholder: "Enter your phone number"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        primary: true,
+                                        children: "Save Changes"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Notification Preferences",
+                        description: "Choose how you want to receive notifications",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                        label: "Email notifications"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                        label: "SMS notifications"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                        label: "Push notifications"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                        label: "Marketing emails"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        primary: true,
+                                        children: "Update Preferences"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Security Settings",
+                        description: "Manage your account security and privacy",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Change Password"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Enable Two-Factor Authentication"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Download Account Data"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        destructive: true,
+                                        children: "Delete Account"
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout with annotated sections that include titles and descriptions.'
+            }
+        }
+    }
+};
+var MixedSections = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            padding: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Layout.default, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "Dashboard Overview",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "Welcome to your dashboard. Here's a quick overview of your account."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Profile Information",
+                        description: "Your personal details and contact information",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Name",
+                                        value: "John Doe"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Email",
+                                        value: "john@example.com"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Company",
+                                        value: "Acme Corp"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "Recent Activity",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "Your recent account activity will be displayed here."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Billing Information",
+                        description: "Manage your subscription and payment methods",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Current Plan: Professional ($29/month)"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Next Billing Date: March 15, 2024"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                        horizontal: true,
+                                        gap: "md",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                children: "Upgrade Plan"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                children: "Update Payment Method"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout mixing regular sections and annotated sections.'
+            }
+        }
+    }
+};
+var SettingsPage = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            padding: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Layout.default, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "General Settings",
+                        description: "Basic settings for your account and application preferences",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Application Name",
+                                        value: "My Application"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Default Language",
+                                        value: "English"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Time Zone",
+                                        value: "UTC-8 (Pacific Time)"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                        gap: "sm",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "Enable dark mode"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "Show advanced features"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "Enable beta features"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Privacy & Security",
+                        description: "Control who can see your information and how your data is used",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                        gap: "sm",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "Make profile public"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "Allow search engines to index profile"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "Show online status"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                        horizontal: true,
+                                        gap: "md",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                children: "Change Password"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                children: "Setup 2FA"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Notifications",
+                        description: "Choose what notifications you want to receive and how",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                                paddingBlockEnd: "2",
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                    variant: "headingSm",
+                                                    children: "Email Notifications"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                        label: "Account updates"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                        label: "Security alerts"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                        label: "Product updates"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                        label: "Marketing emails"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                                paddingBlockEnd: "2",
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                    variant: "headingSm",
+                                                    children: "Push Notifications"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                        label: "New messages"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                        label: "Team updates"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                        label: "System alerts"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Danger Zone",
+                        description: "Irreversible and destructive actions",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        children: "These actions cannot be undone. Please proceed with caution."
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                        gap: "sm",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                destructive: true,
+                                                children: "Reset All Settings"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                destructive: true,
+                                                children: "Delete All Data"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                destructive: true,
+                                                children: "Close Account"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Complete settings page example with multiple annotated sections.'
+            }
+        }
+    }
+};
+var ProductManagement = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            padding: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Layout.default, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "Product Overview",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "Manage your product catalog, inventory, and pricing from this dashboard."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Basic Information",
+                        description: "Essential details about your product",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Product Name",
+                                        placeholder: "Enter product name"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "SKU",
+                                        placeholder: "Product SKU"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Description",
+                                        multiline: 4,
+                                        placeholder: "Product description"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Category",
+                                        placeholder: "Product category"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Pricing & Inventory",
+                        description: "Set pricing and manage stock levels",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                                columns: {
+                                    xs: 1,
+                                    sm: 2,
+                                    lg: 4
+                                },
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Price",
+                                        placeholder: "$0.00"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Compare Price",
+                                        placeholder: "$0.00"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Cost per Item",
+                                        placeholder: "$0.00"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                        label: "Stock Quantity",
+                                        placeholder: "0"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.AnnotatedSection, {
+                        title: "Shipping & Delivery",
+                        description: "Configure shipping options and delivery settings",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                                        columns: {
+                                            xs: 1,
+                                            sm: 2,
+                                            lg: 4
+                                        },
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                                label: "Weight",
+                                                placeholder: "0.0 kg"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                                label: "Length",
+                                                placeholder: "0.0 cm"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                                label: "Width",
+                                                placeholder: "0.0 cm"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                                label: "Height",
+                                                placeholder: "0.0 cm"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                        gap: "sm",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "This is a physical product"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "Requires shipping"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                                label: "Fragile item"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                horizontal: true,
+                                gap: "md",
+                                align: "end",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Save as Draft"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Preview"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        primary: true,
+                                        children: "Publish Product"
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Product management form using layout with annotated sections for organization.'
+            }
+        }
+    }
+};