@heymantle/litho 0.0.2 → 0.0.4

package/dist/esm/stories/RangeSlider.stories.js

@@ -0,0 +1,845 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+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;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { transformStorySource } from "../utilities/transformers.js";
+import RangeSlider from "../components/RangeSlider.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import { VerticalStack, HorizontalStack, Box, Grid } from "../dist/esm/index.js";
+export default {
+    title: 'Litho/RangeSlider',
+    component: RangeSlider,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A RangeSlider component that allows users to select a range of values by dragging handles along a track. RangeSliders are useful for filtering data, setting price ranges, or configuring numeric parameters."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        label: 'Range slider',
+        min: 0,
+        max: 100,
+        value: [
+            25,
+            75
+        ]
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Label for the range slider'
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum value'
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value'
+        },
+        step: {
+            control: 'number',
+            description: 'Step increment for the slider'
+        },
+        value: {
+            control: 'object',
+            description: 'Selected range as [min, max] array'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the slider is disabled'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Additional descriptive text'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message to display'
+        },
+        prefix: {
+            control: 'text',
+            description: 'Prefix to display before values'
+        },
+        suffix: {
+            control: 'text',
+            description: 'Suffix to display after values'
+        },
+        onChange: {
+            action: 'rangeChanged',
+            description: 'Callback when range changes'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.value), 2), value = _useState[0], setValue = _useState[1];
+        return /*#__PURE__*/ _jsx(RangeSlider, _object_spread_props(_object_spread({}, args), {
+            value: value,
+            onChange: function(newValue) {
+                var _args_onChange;
+                setValue(newValue);
+                (_args_onChange = args.onChange) === null || _args_onChange === void 0 ? void 0 : _args_onChange.call(args, newValue);
+            }
+        }));
+    }
+};
+export var PriceRange = {
+    args: {
+        label: 'Price range',
+        min: 0,
+        max: 1000,
+        step: 10,
+        value: [
+            100,
+            500
+        ],
+        prefix: '$',
+        helpText: 'Set your budget range'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.value), 2), value = _useState[0], setValue = _useState[1];
+        return /*#__PURE__*/ _jsx(RangeSlider, _object_spread_props(_object_spread({}, args), {
+            value: value,
+            onChange: setValue
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Range slider for price filtering with currency prefix.'
+            }
+        }
+    }
+};
+export var PercentageRange = {
+    args: {
+        label: 'Discount range',
+        min: 0,
+        max: 100,
+        step: 5,
+        value: [
+            10,
+            50
+        ],
+        suffix: '%',
+        helpText: 'Select discount percentage range'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.value), 2), value = _useState[0], setValue = _useState[1];
+        return /*#__PURE__*/ _jsx(RangeSlider, _object_spread_props(_object_spread({}, args), {
+            value: value,
+            onChange: setValue
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Range slider for percentage values with suffix.'
+            }
+        }
+    }
+};
+export var WithError = {
+    args: {
+        label: 'Temperature range',
+        min: -10,
+        max: 40,
+        value: [
+            35,
+            45
+        ],
+        suffix: '°C',
+        error: 'Maximum temperature cannot exceed 40°C'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.value), 2), value = _useState[0], setValue = _useState[1];
+        return /*#__PURE__*/ _jsx(RangeSlider, _object_spread_props(_object_spread({}, args), {
+            value: value,
+            onChange: setValue
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Range slider with error state for validation.'
+            }
+        }
+    }
+};
+export var Disabled = {
+    args: {
+        label: 'Disabled range',
+        min: 0,
+        max: 100,
+        value: [
+            20,
+            80
+        ],
+        disabled: true,
+        helpText: 'This range is currently disabled'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disabled range slider that cannot be interacted with.'
+            }
+        }
+    }
+};
+export var ProductFilter = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            50,
+            500
+        ]), 2), priceRange = _useState[0], setPriceRange = _useState[1];
+        var _useState1 = _sliced_to_array(useState([
+            3,
+            5
+        ]), 2), ratingRange = _useState1[0], setRatingRange = _useState1[1];
+        var _useState2 = _sliced_to_array(useState([
+            {
+                name: 'Product A',
+                price: 25,
+                rating: 4.2
+            },
+            {
+                name: 'Product B',
+                price: 75,
+                rating: 3.8
+            },
+            {
+                name: 'Product C',
+                price: 150,
+                rating: 4.5
+            },
+            {
+                name: 'Product D',
+                price: 300,
+                rating: 4.1
+            },
+            {
+                name: 'Product E',
+                price: 450,
+                rating: 4.8
+            },
+            {
+                name: 'Product F',
+                price: 600,
+                rating: 2.9
+            }
+        ]), 2), products = _useState2[0], setProducts = _useState2[1];
+        var filteredProducts = products.filter(function(product) {
+            return product.price >= priceRange[0] && product.price <= priceRange[1] && product.rating >= ratingRange[0] && product.rating <= ratingRange[1];
+        });
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Product Filters",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Price range",
+                        min: 0,
+                        max: 1000,
+                        step: 25,
+                        value: priceRange,
+                        onChange: setPriceRange,
+                        prefix: "$",
+                        helpText: "Filter products by price"
+                    }),
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Rating range",
+                        min: 1,
+                        max: 5,
+                        step: 0.1,
+                        value: ratingRange,
+                        onChange: setRatingRange,
+                        suffix: " stars",
+                        helpText: "Filter products by customer rating"
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        padding: "4",
+                        background: "bg-surface-neutral-subdued",
+                        borderRadius: "1",
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                paddingBlockEnd: "4",
+                                children: /*#__PURE__*/ _jsxs(Text, {
+                                    variant: "headingSm",
+                                    children: [
+                                        "Filtered Results (",
+                                        filteredProducts.length,
+                                        ")"
+                                    ]
+                                })
+                            }),
+                            filteredProducts.length > 0 ? /*#__PURE__*/ _jsx(VerticalStack, {
+                                gap: "2",
+                                children: filteredProducts.map(function(product, index) {
+                                    return /*#__PURE__*/ _jsx(Box, {
+                                        padding: "2",
+                                        background: "bg-surface",
+                                        borderRadius: "1",
+                                        children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                            align: "space-between",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    children: product.name
+                                                }),
+                                                /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                    gap: "4",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs(Text, {
+                                                            children: [
+                                                                "$",
+                                                                product.price
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsxs(Text, {
+                                                            children: [
+                                                                product.rating,
+                                                                " ⭐"
+                                                            ]
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    }, index);
+                                })
+                            }) : /*#__PURE__*/ _jsx(Text, {
+                                color: "subdued",
+                                children: "No products match your criteria"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Real-world example using range sliders to filter products by price and rating.'
+            }
+        }
+    }
+};
+export var BudgetPlanner = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            800,
+            1200
+        ]), 2), housing = _useState[0], setHousing = _useState[1];
+        var _useState1 = _sliced_to_array(useState([
+            200,
+            400
+        ]), 2), food = _useState1[0], setFood = _useState1[1];
+        var _useState2 = _sliced_to_array(useState([
+            100,
+            300
+        ]), 2), transportation = _useState2[0], setTransportation = _useState2[1];
+        var _useState3 = _sliced_to_array(useState([
+            50,
+            200
+        ]), 2), entertainment = _useState3[0], setEntertainment = _useState3[1];
+        var totalMin = housing[0] + food[0] + transportation[0] + entertainment[0];
+        var totalMax = housing[1] + food[1] + transportation[1] + entertainment[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Monthly Budget Planner",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Housing & Utilities",
+                        min: 0,
+                        max: 2000,
+                        step: 50,
+                        value: housing,
+                        onChange: setHousing,
+                        prefix: "$",
+                        helpText: "Rent, mortgage, utilities, insurance"
+                    }),
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Food & Groceries",
+                        min: 0,
+                        max: 800,
+                        step: 25,
+                        value: food,
+                        onChange: setFood,
+                        prefix: "$",
+                        helpText: "Groceries, dining out, beverages"
+                    }),
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Transportation",
+                        min: 0,
+                        max: 600,
+                        step: 25,
+                        value: transportation,
+                        onChange: setTransportation,
+                        prefix: "$",
+                        helpText: "Car payment, gas, public transit, maintenance"
+                    }),
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Entertainment & Recreation",
+                        min: 0,
+                        max: 500,
+                        step: 25,
+                        value: entertainment,
+                        onChange: setEntertainment,
+                        prefix: "$",
+                        helpText: "Movies, hobbies, gym, subscriptions"
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        padding: "6",
+                        background: "bg-surface-success-subdued",
+                        borderRadius: "2",
+                        borderWidth: "1",
+                        borderColor: "border-success",
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "4",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingMd",
+                                    children: "Budget Summary"
+                                }),
+                                /*#__PURE__*/ _jsxs(Grid, {
+                                    columns: 2,
+                                    gap: "4",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "1",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Minimum Budget"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    variant: "headingLg",
+                                                    style: {
+                                                        color: '#2e7d2e'
+                                                    },
+                                                    children: [
+                                                        "$",
+                                                        totalMin.toLocaleString()
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "1",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Maximum Budget"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    variant: "headingLg",
+                                                    style: {
+                                                        color: '#2e7d2e'
+                                                    },
+                                                    children: [
+                                                        "$",
+                                                        totalMax.toLocaleString()
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Budget planning tool using multiple range sliders with automatic total calculation.'
+            }
+        }
+    }
+};
+export var DateTimeRange = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            9,
+            17
+        ]), 2), hourRange = _useState[0], setHourRange = _useState[1];
+        var _useState1 = _sliced_to_array(useState([
+            1,
+            31
+        ]), 2), dayRange = _useState1[0], setDayRange = _useState1[1];
+        var formatHour = function(hour) {
+            if (hour === 0) return '12:00 AM';
+            if (hour < 12) return "".concat(hour, ":00 AM");
+            if (hour === 12) return '12:00 PM';
+            return "".concat(hour - 12, ":00 PM");
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Availability Settings",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(RangeSlider, {
+                                label: "Working hours",
+                                min: 0,
+                                max: 23,
+                                step: 1,
+                                value: hourRange,
+                                onChange: setHourRange,
+                                helpText: "Set your available working hours"
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                padding: "2",
+                                background: "bg-surface-info-subdued",
+                                borderRadius: "1",
+                                children: /*#__PURE__*/ _jsxs(Text, {
+                                    children: [
+                                        "Available from ",
+                                        formatHour(hourRange[0]),
+                                        " to ",
+                                        formatHour(hourRange[1])
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(RangeSlider, {
+                                label: "Available dates this month",
+                                min: 1,
+                                max: 31,
+                                step: 1,
+                                value: dayRange,
+                                onChange: setDayRange,
+                                helpText: "Select the date range you're available"
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                padding: "2",
+                                background: "bg-surface-info-subdued",
+                                borderRadius: "1",
+                                children: /*#__PURE__*/ _jsxs(Text, {
+                                    children: [
+                                        "Available from the ",
+                                        dayRange[0],
+                                        dayRange[0] === 1 ? 'st' : dayRange[0] === 2 ? 'nd' : dayRange[0] === 3 ? 'rd' : 'th',
+                                        " to the ",
+                                        dayRange[1],
+                                        dayRange[1] === 1 ? 'st' : dayRange[1] === 2 ? 'nd' : dayRange[1] === 3 ? 'rd' : 'th'
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        paddingBlockStart: "4",
+                        borderBlockStartWidth: "1",
+                        borderColor: "border",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            primary: true,
+                            children: "Save Availability"
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Availability settings using range sliders for time and date selection.'
+            }
+        }
+    }
+};
+export var AdvancedConfiguration = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            2,
+            8
+        ]), 2), cpuRange = _useState[0], setCpuRange = _useState[1];
+        var _useState1 = _sliced_to_array(useState([
+            4,
+            32
+        ]), 2), memoryRange = _useState1[0], setMemoryRange = _useState1[1];
+        var _useState2 = _sliced_to_array(useState([
+            100,
+            1000
+        ]), 2), storageRange = _useState2[0], setStorageRange = _useState2[1];
+        var _useState3 = _sliced_to_array(useState([
+            10,
+            100
+        ]), 2), bandwidthRange = _useState3[0], setBandwidthRange = _useState3[1];
+        var calculateCost = function() {
+            var cpuCost = (cpuRange[0] + cpuRange[1]) / 2 * 20;
+            var memoryCost = (memoryRange[0] + memoryRange[1]) / 2 * 5;
+            var storageCost = (storageRange[0] + storageRange[1]) / 2 * 0.1;
+            var bandwidthCost = (bandwidthRange[0] + bandwidthRange[1]) / 2 * 2;
+            return Math.round(cpuCost + memoryCost + storageCost + bandwidthCost);
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Server Configuration",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "CPU Cores",
+                        min: 1,
+                        max: 16,
+                        step: 1,
+                        value: cpuRange,
+                        onChange: setCpuRange,
+                        helpText: "Number of virtual CPU cores"
+                    }),
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Memory (RAM)",
+                        min: 1,
+                        max: 64,
+                        step: 1,
+                        value: memoryRange,
+                        onChange: setMemoryRange,
+                        suffix: " GB",
+                        helpText: "Amount of system memory"
+                    }),
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Storage",
+                        min: 10,
+                        max: 2000,
+                        step: 10,
+                        value: storageRange,
+                        onChange: setStorageRange,
+                        suffix: " GB",
+                        helpText: "SSD storage capacity"
+                    }),
+                    /*#__PURE__*/ _jsx(RangeSlider, {
+                        label: "Bandwidth",
+                        min: 1,
+                        max: 200,
+                        step: 5,
+                        value: bandwidthRange,
+                        onChange: setBandwidthRange,
+                        suffix: " Mbps",
+                        helpText: "Network bandwidth limit"
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        padding: "6",
+                        background: "bg-surface-info-subdued",
+                        borderRadius: "2",
+                        borderWidth: "1",
+                        borderColor: "border-info",
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "4",
+                            children: [
+                                /*#__PURE__*/ _jsxs(Grid, {
+                                    columns: 2,
+                                    gap: "4",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Configuration Range"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    children: [
+                                                        "CPU: ",
+                                                        cpuRange[0],
+                                                        " - ",
+                                                        cpuRange[1],
+                                                        " cores"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    children: [
+                                                        "RAM: ",
+                                                        memoryRange[0],
+                                                        " - ",
+                                                        memoryRange[1],
+                                                        " GB"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    children: [
+                                                        "Storage: ",
+                                                        storageRange[0],
+                                                        " - ",
+                                                        storageRange[1],
+                                                        " GB"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    children: [
+                                                        "Bandwidth: ",
+                                                        bandwidthRange[0],
+                                                        " - ",
+                                                        bandwidthRange[1],
+                                                        " Mbps"
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Estimated Cost"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    variant: "headingXl",
+                                                    style: {
+                                                        color: '#2196f3'
+                                                    },
+                                                    children: [
+                                                        "$",
+                                                        calculateCost(),
+                                                        "/month"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    color: "subdued",
+                                                    variant: "bodySm",
+                                                    children: "Based on average configuration"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    children: "Deploy Server"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Advanced server configuration with real-time cost calculation.'
+            }
+        }
+    }
+};