newskit 5.0.0 → 5.2.0

package/cjs/theme-checker/scenarios.js

@@ -0,0 +1,790 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scenarios = exports.states = void 0;
+/* istanbul ignore file */
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var tag_1 = require("../tag");
+var link_1 = require("../link");
+var icon_button_1 = require("../icon-button");
+var button_1 = require("../button");
+var icons_1 = require("../icons");
+var stack_1 = require("../stack");
+var assistive_text_1 = require("../assistive-text");
+var banner_1 = require("../banner");
+var utils_1 = require("../utils");
+var byline_1 = require("../byline");
+var caption_1 = require("../caption");
+var block_1 = require("../block");
+var text_block_1 = require("../text-block");
+var headline_1 = require("../headline");
+var date_time_1 = require("../date-time");
+var divider_1 = require("../divider");
+var stack_child_1 = require("../stack-child");
+var email_input_1 = require("../email-input");
+var fieldset_1 = require("../fieldset");
+var checkbox_1 = require("../checkbox");
+var flag_1 = require("../flag");
+var image_1 = require("../image");
+var form_1 = require("../form");
+var text_field_1 = require("../text-field");
+var inline_message_1 = require("../inline-message");
+var menu_1 = require("../menu");
+var ordered_list_1 = require("../ordered-list");
+var scroll_1 = require("../scroll");
+var select_1 = require("../select");
+var share_bar_1 = require("../share-bar");
+var slider_1 = require("../slider");
+var tabs_1 = require("../tabs");
+var title_bar_1 = require("../title-bar");
+var toast_1 = require("../toast");
+var unordered_list_1 = require("../unordered-list");
+var audio_player_1 = require("../audio-player");
+var volume_control_1 = require("../volume-control");
+var drawer_1 = require("../drawer");
+var modal_1 = require("../modal");
+var typography_1 = require("../typography");
+var helper_1 = require("./helper");
+var structured_list_1 = require("../structured-list");
+var grid_1 = require("../grid");
+var label_1 = require("../label");
+exports.states = [
+    ['default', {}],
+    ['checked', { checked: true }],
+    ['disabled', { state: 'disabled' }],
+    ['checked-disabled', { checked: true, state: 'disabled' }],
+    ['invalid', { state: 'invalid' }],
+    ['invalid-checked', { state: 'invalid', checked: true }],
+    ['valid', { state: 'valid' }],
+    ['valid-checked', { state: 'valid', checked: true }],
+];
+var listData = ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot"];
+var textFieldStates = [
+    ['Default', { state: undefined }],
+    ['Disabled', { state: 'disabled' }],
+    ['Invalid', { state: 'invalid' }],
+    ['Valid', { state: 'valid' }],
+];
+var tags = [
+    'This',
+    'Is',
+    'A',
+    'Stack',
+    'Example',
+    'showing',
+    'multiple',
+    'tags',
+].map(function (item) { return react_1.default.createElement(tag_1.Tag, { key: item }, item); });
+var loremIpsum = [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis erat sed velit tincidunt tincidunt. Sed gravida erat sit amet vulputate euismod. In id quam et sem dignissim mattis. Nullam sit amet ex maximus, egestas ligula vitae, pulvinar magna. Quisque nisi elit, mollis ut mauris dapibus, efficitur aliquam dui. Quisque auctor volutpat feugiat. Maecenas pretium elit ex, at condimentum leo luctus eu. Vivamus eget facilisis dolor, eu semper elit. Etiam rhoncus semper ex tincidunt ultrices. Nulla libero orci, egestas sed lectus ac, laoreet lacinia ipsum.',
+];
+var DrawerContent = function () { return (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(typography_1.P, null,
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id scelerisque sapien. Praesent mollis vestibulum nunc at blandit. Donec vitae venenatis mi. Aenean ut ornare diam, non facilisis diam. Pellentesque consequat mi in imperdiet ultrices. Sed vitae erat ac urna",
+        ' ',
+        react_1.default.createElement(link_1.LinkInline, { href: "/" }, "Test link"),
+        " rutrum aliquet eu mattis ligula. Sed dapibus, enim sed tristique gravida, nisl dolor malesuada lacus, quis auctor dui mauris eu odio. Vivamus eu augue et enim varius viverra. Vivamus ut tellus iaculis, ullamcorper ligula sit amet, posuere ipsum."),
+    react_1.default.createElement("div", null,
+        react_1.default.createElement(button_1.Button, null, "Remind me later"),
+        react_1.default.createElement(button_1.Button, null, "Ok")))); };
+var modalContent = (react_1.default.createElement(stack_1.Stack, { flow: "vertical-center", stackDistribution: "center", spaceInline: "space020" },
+    react_1.default.createElement(typography_1.H1, null, "You need an account"),
+    react_1.default.createElement(typography_1.P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. (Double click for more text :) )")));
+var arrowIcon = (react_1.default.createElement(stack_1.Stack, { stackDistribution: stack_1.StackDistribution.End, flow: stack_1.Flow.HorizontalCenter },
+    react_1.default.createElement(icons_1.IconOutlinedArrowForwardIos, { overrides: {
+            size: 'iconSize010',
+            stylePreset: 'inkContrast',
+        } })));
+var listItemWithThreeCells = (react_1.default.createElement(structured_list_1.StructuredListItem, { ariaLabel: "list item" },
+    react_1.default.createElement(structured_list_1.StructuredListCell, null,
+        react_1.default.createElement(text_block_1.TextBlock, { stylePreset: "inkContrast", typographyPreset: "utilityHeading010" }, "Label")),
+    react_1.default.createElement(structured_list_1.StructuredListCell, null,
+        react_1.default.createElement(text_block_1.TextBlock, { stylePreset: "inkSubtle", typographyPreset: "utilityBody020" }, "A short description of the label")),
+    react_1.default.createElement(structured_list_1.StructuredListCell, null, arrowIcon)));
+var buttonPresets = [
+    'Primary',
+    'Secondary',
+    'Positive',
+    'Negative',
+    'Inverse',
+];
+var buttonKinds = ['Solid', 'Outlined', 'Minimal'];
+var flagPresets = [
+    'Primary',
+    'Positive',
+    'Negative',
+    'Neutral',
+    'Notice',
+    'Informative',
+    'Inverse',
+];
+var flagKinds = ['Solid', 'Minimal'];
+/* istanbul ignore next */
+var sleep = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
+/* istanbul ignore next */
+var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, sleep(2000)];
+            case 1:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}); };
+/* istanbul ignore next */
+var validateUserName = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, sleep(1000)];
+            case 1:
+                _a.sent();
+                return [2 /*return*/, value !== 'newskit' || 'This username is already taken'];
+        }
+    });
+}); };
+exports.scenarios = [
+    {
+        name: 'Assistive Text',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", spaceStack: "space060", flow: stack_1.Flow.HorizontalTop, wrap: "wrap" }, textFieldStates.map(function (_a) {
+            var id = _a[0], state = _a[1].state;
+            return (react_1.default.createElement(stack_1.Stack, { key: "".concat(id, "-assistive-text"), spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, id),
+                react_1.default.createElement(assistive_text_1.AssistiveText, { state: state }, "Assistive Text")));
+        }))); },
+    },
+    {
+        name: 'Audio Player',
+        component: function () { return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                    react_1.default.createElement(helper_1.LabelFlag, null, "Default")),
+                react_1.default.createElement(styled_1.AudioPlayerContainer, null,
+                    react_1.default.createElement(audio_player_1.AudioPlayer, { src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", title: "The Breakfast Show with Giles Coren", captionSrc: "captions.vtt", ariaLandmark: "audio player default" }))),
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                    react_1.default.createElement(helper_1.LabelFlag, null, "Live")),
+                react_1.default.createElement(styled_1.AudioPlayerContainer, null,
+                    react_1.default.createElement(audio_player_1.AudioPlayer, { src: "https://radio.talkradio.co.uk/stream", title: "The Breakfast Show with Giles Coren", live: true, captionSrc: "captions.vtt", ariaLandmark: "audio player live" }))))); },
+    },
+    {
+        name: 'Banner',
+        component: function (_a) {
+            var stylePreset = _a.stylePreset;
+            return react_1.default.createElement(function () {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                var _a = react_1.default.useState(true), isActive = _a[0], setIsActive = _a[1];
+                /* istanbul ignore next */
+                var close = function () { return setIsActive(false); };
+                /* istanbul ignore next */
+                var action = function () {
+                    /* istanbul ignore next */
+                    console.log('CTA Called!');
+                };
+                return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050", key: "".concat(stylePreset, "-banner") },
+                    react_1.default.createElement(helper_1.LabelFlag, null, (0, helper_1.returnLastLetterInCamelCase)(stylePreset)),
+                    react_1.default.createElement(banner_1.Banner, { "aria-label": "Banner with ".concat(stylePreset), title: "Banner title", icon: react_1.default.createElement(icons_1.IconFilledInfo, { overrides: {
+                                size: 'iconSize020',
+                                stylePreset: 'inkInverse',
+                            } }), actions: [
+                            function () { return (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement(styled_1.StyledFullWidthVisible, { xs: true, sm: true },
+                                    react_1.default.createElement(helper_1.CTABtn, { onClick: 
+                                        /* istanbul ignore next */ function () {
+                                            action();
+                                        } }, "CTA button")),
+                                react_1.default.createElement(styled_1.StyledFullWidthVisible, { md: true, lg: true, xl: true },
+                                    react_1.default.createElement(helper_1.CTABtn, { size: "small", onClick: 
+                                        /* istanbul ignore next */ function () {
+                                            action();
+                                        } }, "CTA button")))); },
+                        ], onClose: close, overrides: { stylePreset: stylePreset } }, "Here goes a brief line or two describing the toast information.")));
+            });
+        },
+    },
+    {
+        name: 'Block',
+        component: function () { return (react_1.default.createElement(styled_1.Container, { border: true, height: "15px" },
+            react_1.default.createElement(block_1.Block, { stylePreset: "inkSubtle" }, "Block default without padding or margin"))); },
+    },
+    {
+        name: 'Button',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", spaceStack: "space060", flow: stack_1.Flow.HorizontalTop, wrap: "wrap" }, buttonPresets.map(function (preset) { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050", key: "".concat(preset, "-button") },
+            react_1.default.createElement(helper_1.LabelFlag, null, preset),
+            react_1.default.createElement(stack_1.Stack, { flow: stack_1.Flow.HorizontalTop, spaceInline: "space090" }, buttonKinds.map(function (kind) { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050", key: "".concat(kind, "-button") },
+                react_1.default.createElement(helper_1.LabelFlag, { key: "flag", prefix: "secondary" }, kind),
+                react_1.default.createElement(button_1.Button, { key: "button", overrides: { stylePreset: "button".concat(kind).concat(preset) } }, "Button"))); })))); }))); },
+    },
+    {
+        name: 'Byline',
+        component: function () { return (react_1.default.createElement(byline_1.Byline, { bylineData: [
+                {
+                    author: 'Author',
+                    href: 'https://www.thetimes.co.uk/profile/richard-lloyd-parry',
+                    title: 'Job Title',
+                    location: 'Location',
+                    key: 1,
+                },
+            ] })); },
+    },
+    {
+        name: 'Caption',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { flow: stack_1.Flow.HorizontalTop, spaceInline: "space110", spaceStack: "space060", wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space020" },
+                react_1.default.createElement(image_1.Image, { src: "/placeholder-3x2.png", alt: "Example Image", overrides: { width: '300px', height: '200px' }, placeholderIcon: true }),
+                react_1.default.createElement(caption_1.Caption, { creditText: "Credit text" }, "Image with Caption")),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space020" },
+                react_1.default.createElement(image_1.Image, { src: "/placeholder-3x2.png", alt: "Example Image", overrides: { width: '300px', height: '200px' }, placeholderIcon: true }),
+                react_1.default.createElement(caption_1.CaptionInset, { creditText: "Credit text" }, "Image with Caption Inset")))); },
+    },
+    {
+        name: 'Card',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Vertical"),
+                react_1.default.createElement(grid_1.Grid, { xsMargin: "space000" },
+                    react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6, md: 5 },
+                        react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                            react_1.default.createElement(helper_1.LabelFlag, { prefix: "secondary" }, "Default"),
+                            (0, helper_1.renderCard)('vertical'))),
+                    react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6, md: 5 },
+                        react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                            react_1.default.createElement(helper_1.LabelFlag, { prefix: "secondary" }, "Inset"),
+                            (0, helper_1.renderCardInset)('vertical'))))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Horizontal"),
+                react_1.default.createElement(grid_1.Grid, { xsMargin: "space000" },
+                    react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6, md: 5 },
+                        react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                            react_1.default.createElement(helper_1.LabelFlag, { prefix: "secondary" }, "Default"),
+                            (0, helper_1.renderCard)('horizontal'))),
+                    react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6, md: 5 },
+                        react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                            react_1.default.createElement(helper_1.LabelFlag, { prefix: "secondary" }, "Inset"),
+                            (0, helper_1.renderCardInset)('horizontal'))))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Reverse"),
+                react_1.default.createElement(grid_1.Grid, { xsMargin: "space000" },
+                    react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6, md: 5 }, (0, helper_1.renderCard)('horizontal-reverse')))))); },
+    },
+    {
+        name: 'Checkbox',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space100", spaceStack: "space060", flow: stack_1.Flow.HorizontalTop, wrap: "wrap" }, exports.states.map(function (_a) {
+            var _b = _a, id = _b[0], _c = _b[1], checked = _c.checked, props = __rest(_c, ["checked"]);
+            return (react_1.default.createElement(stack_1.Stack, { key: "".concat(id, "-checkbox"), spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, id[0].toUpperCase() + id.slice(1)),
+                react_1.default.createElement(checkbox_1.Checkbox, __assign({}, props, { defaultChecked: checked, label: id, size: "medium" }))));
+        }))); },
+    },
+    {
+        name: 'Date Time',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", spaceStack: "space060", flow: stack_1.Flow.HorizontalTop, wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Default"),
+                react_1.default.createElement(date_time_1.DateTime, { date: "2017-01-01T04:32:00.000Z" })),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Prefix"),
+                react_1.default.createElement(date_time_1.DateTime, { date: "2017-01-01T04:32:00.000Z", prefix: "Updated:" })),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Suffix"),
+                react_1.default.createElement(date_time_1.DateTime, { date: "2017-01-01T04:32:00.000Z", suffix: "The Times" })),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Prefix and Suffix"),
+                react_1.default.createElement(date_time_1.DateTime, { date: "2017-01-01T04:32:00.000Z", suffix: "The Times", prefix: "Updated:" })))); },
+    },
+    {
+        name: 'Divider',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Horizontal"),
+                react_1.default.createElement(styled_1.Container, { border: true, height: "50px", width: "" },
+                    react_1.default.createElement(stack_1.Stack, { stackDistribution: "center", flow: "vertical-center" },
+                        react_1.default.createElement(icons_1.IconFilledAddCircle, { overrides: { size: 'iconSize030' } }),
+                        react_1.default.createElement(divider_1.Divider, null),
+                        react_1.default.createElement(icons_1.IconFilledAddCircle, { overrides: { size: 'iconSize030' } })))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Vertical"),
+                react_1.default.createElement(styled_1.Container, { border: true, width: "50px" },
+                    react_1.default.createElement(stack_1.Stack, { flow: "horizontal-center", stackDistribution: "center" },
+                        react_1.default.createElement(icons_1.IconFilledAddCircle, { overrides: { size: 'iconSize030' } }),
+                        react_1.default.createElement(stack_child_1.StackChild, { alignSelf: stack_child_1.AlignSelfValues.Stretch },
+                            react_1.default.createElement(divider_1.Divider, { vertical: true })),
+                        react_1.default.createElement(icons_1.IconFilledAddCircle, { overrides: { size: 'iconSize030' } })))))); },
+    },
+    {
+        name: 'Email Input',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, spaceStack: "space060", wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Default"),
+                react_1.default.createElement(email_input_1.EmailInput, { label: "Email address", placeholder: "Enter your email address.", assistiveText: "Assistive text", icon: react_1.default.createElement(icons_1.IconFilledEmail, { overrides: {
+                            size: 'iconSize020',
+                            stylePreset: 'inkSubtle',
+                        } }), overrides: {
+                        width: '360px',
+                    } })),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Submit validation"),
+                react_1.default.createElement(form_1.Form, { onSubmit: onSubmit },
+                    react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                        react_1.default.createElement(email_input_1.EmailInput, { label: "Email address", name: "email", assistiveText: "Assistive text", icon: react_1.default.createElement(icons_1.IconFilledEmail, { overrides: {
+                                    size: 'iconSize020',
+                                    stylePreset: 'inkSubtle',
+                                } }), rules: {
+                                required: 'Required field',
+                                pattern: {
+                                    // eslint-disable-next-line no-useless-escape
+                                    value: /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+                                    message: 'Please provide a valid email',
+                                },
+                            }, overrides: {
+                                width: '360px',
+                            } })),
+                    react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"))))); },
+    },
+    {
+        name: 'Fieldset',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, spaceStack: "space060", wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Small"),
+                react_1.default.createElement(fieldset_1.Fieldset, { legend: "Legend", size: "small" },
+                    react_1.default.createElement(checkbox_1.Checkbox, { label: "Label", overrides: { spaceStack: 'space030' } }),
+                    react_1.default.createElement(assistive_text_1.AssistiveText, null, "Assistive Text"))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Medium"),
+                react_1.default.createElement(fieldset_1.Fieldset, { legend: "Legend", size: "medium" },
+                    react_1.default.createElement(checkbox_1.Checkbox, { label: "Label", overrides: { spaceStack: 'space030' } }),
+                    react_1.default.createElement(assistive_text_1.AssistiveText, null, "Assistive Text"))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Large"),
+                react_1.default.createElement(fieldset_1.Fieldset, { legend: "Legend", size: "large" },
+                    react_1.default.createElement(checkbox_1.Checkbox, { label: "Label", overrides: { spaceStack: 'space030' } }),
+                    react_1.default.createElement(assistive_text_1.AssistiveText, null, "Assistive Text"))))); },
+    },
+    {
+        name: 'Flag',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", spaceStack: "space060", flow: stack_1.Flow.HorizontalTop, wrap: "wrap" }, flagPresets.map(function (preset) { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050", key: "".concat(preset, "-flag") },
+            react_1.default.createElement(helper_1.LabelFlag, null, preset),
+            react_1.default.createElement(stack_1.Stack, { flow: stack_1.Flow.HorizontalTop, spaceInline: "space090" }, flagKinds.map(function (kind) { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050", key: "".concat(kind, "-flag") },
+                react_1.default.createElement(helper_1.LabelFlag, { key: "label-flag", prefix: "secondary" }, kind),
+                react_1.default.createElement(flag_1.Flag, { key: "flag", overrides: { stylePreset: "flag".concat(kind).concat(preset) } }, "Flag"))); })))); }))); },
+    },
+    {
+        name: 'FormInput',
+        component: function () { return (react_1.default.createElement(grid_1.Grid, { xsMargin: "space000", smColumnGutter: "space100" },
+            react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6 },
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                        react_1.default.createElement(helper_1.LabelFlag, null, "Default")),
+                    react_1.default.createElement(form_1.FormInput, { name: "username-default", rules: {
+                            required: 'Required field',
+                            minLength: {
+                                value: 5,
+                                message: 'Usernames must be at least 5 characters long',
+                            },
+                            validate: validateUserName,
+                        } },
+                        react_1.default.createElement(form_1.FormInputLabel, null, "Username"),
+                        react_1.default.createElement(form_1.FormInputTextField, { size: 'small' }),
+                        react_1.default.createElement(form_1.FormInputAssistiveText, null, "Assistive Text")))),
+            react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6 },
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                        react_1.default.createElement(helper_1.LabelFlag, null, "Valid")),
+                    react_1.default.createElement(form_1.FormInput, { state: "valid", name: "email-valid", rules: {
+                            required: 'Required field',
+                            pattern: {
+                                // eslint-disable-next-line no-useless-escape
+                                value: /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+                                message: 'Please provide a valid email',
+                            },
+                        } },
+                        react_1.default.createElement(form_1.FormInputLabel, null, "E-mail"),
+                        react_1.default.createElement(form_1.FormInputTextField, { size: 'small' }),
+                        react_1.default.createElement(form_1.FormInputAssistiveText, null, "Assistive Text")))),
+            react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6 },
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                        react_1.default.createElement(helper_1.LabelFlag, null, "Invalid")),
+                    react_1.default.createElement(form_1.FormInput, { state: "invalid", name: "username-invalid", rules: {
+                            required: 'Required field',
+                            minLength: {
+                                value: 5,
+                                message: 'Usernames must be at least 5 characters long',
+                            },
+                            validate: validateUserName,
+                        } },
+                        react_1.default.createElement(form_1.FormInputLabel, null, "Username"),
+                        react_1.default.createElement(form_1.FormInputTextField, { size: 'small' }),
+                        react_1.default.createElement(form_1.FormInputAssistiveText, null, "Assistive Text")))),
+            react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6 },
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                        react_1.default.createElement(helper_1.LabelFlag, null, "Disabled")),
+                    react_1.default.createElement(form_1.FormInput, { name: "password-disbled", state: "disabled" },
+                        react_1.default.createElement(form_1.FormInputLabel, null, "Password"),
+                        react_1.default.createElement(form_1.FormInputTextField, { state: "disabled", size: 'small' }),
+                        react_1.default.createElement(form_1.FormInputAssistiveText, null, "Assistive Text")))))); },
+    },
+    {
+        name: 'Headline',
+        component: function () { return react_1.default.createElement(headline_1.Headline, { kickerText: "Kicker" }, "Headline text"); },
+    },
+    {
+        name: 'Icon Button',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", spaceStack: "space060", flow: stack_1.Flow.HorizontalTop, wrap: "wrap" }, buttonPresets.map(function (preset) { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050", key: "".concat(preset, "-iconButton") },
+            react_1.default.createElement(helper_1.LabelFlag, null, preset),
+            react_1.default.createElement(stack_1.Stack, { flow: stack_1.Flow.HorizontalTop, spaceInline: "space090" }, buttonKinds.map(function (kind) { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050", key: "".concat(kind, "-iconButton") },
+                react_1.default.createElement(helper_1.LabelFlag, { key: "label-flag", prefix: "secondary" }, kind),
+                react_1.default.createElement(icon_button_1.IconButton, { key: "icon-button", "aria-label": "Add icon", overrides: { stylePreset: "iconButton".concat(kind).concat(preset) } },
+                    react_1.default.createElement(icons_1.IconFilledAddCircle, { overrides: { size: 'iconSize010' } })))); })))); }))); },
+    },
+    {
+        name: 'Inline Drawer',
+        component: function () {
+            return react_1.default.createElement(function () {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                var _a = (0, helper_1.useActiveState)(), isActive = _a[0], open = _a[1], close = _a[2], toggle = _a[3];
+                var _b = (0, react_1.useState)('left'), placement = _b[0], setPlacement = _b[1];
+                /* istanbul ignore next */
+                var onChangeValue = function (ev) {
+                    return setPlacement(ev.target.value);
+                };
+                return (react_1.default.createElement("div", { "data-testid": "scrollable-drawer" },
+                    react_1.default.createElement(button_1.Button, { onClick: toggle, "data-testid": "drawer-open-button" }, "Open Drawer"),
+                    react_1.default.createElement(block_1.Block, { as: "span", spaceInset: "space030", onChange: onChangeValue, stylePreset: "inkSubtle" },
+                        react_1.default.createElement(styled_1.StyledLabel, { htmlFor: "drawer-inline_top" },
+                            react_1.default.createElement(styled_1.StyledInput, { type: "radio", value: "top", id: "drawer-inline_top", name: "placement" }),
+                            "Top"),
+                        react_1.default.createElement(styled_1.StyledLabel, { htmlFor: "drawer-inline_left" },
+                            react_1.default.createElement(styled_1.StyledInput, { type: "radio", value: "left", id: "drawer-inline_left", name: "placement", defaultChecked: true }),
+                            "Left"),
+                        react_1.default.createElement(styled_1.StyledLabel, { htmlFor: "drawer-inline_bottom" },
+                            react_1.default.createElement(styled_1.StyledInput, { type: "radio", value: "bottom", id: "drawer-inline_bottom", name: "placement" }),
+                            "Bottom"),
+                        react_1.default.createElement(styled_1.StyledLabel, { htmlFor: "drawer-inline_right" },
+                            react_1.default.createElement(styled_1.StyledInput, { type: "radio", value: "right", id: "drawer-inline_right", name: "placement" }),
+                            "Right")),
+                    react_1.default.createElement(styled_1.DrawerContainer, null,
+                        react_1.default.createElement(drawer_1.Drawer, { "aria-label": "Drawer example", open: isActive, onDismiss: close, inline: true, disableFocusTrap: true, hideOverlay: true, placement: placement, header: react_1.default.createElement(typography_1.P, null, "Drawer Title"), overrides: {
+                                panel: { minSize: '20vh', maxSize: '50%' },
+                            } },
+                            react_1.default.createElement(DrawerContent, null)),
+                        react_1.default.createElement(typography_1.P, null,
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet lorem massa, et lacinia ipsum tristique id. Phasellus sed posuere lacus. Pellentesque eu odio",
+                            ' ',
+                            react_1.default.createElement(link_1.LinkInline, { href: "/" }, "Test link 1"),
+                            " sapien. Donec finibus pellentesque est porta dictum. Suspendisse venenatis vitae augue nec hendrerit. In ut quam tempus, feugiat risus quis, porta eros. Aliquam ultricies ac orci viverra gravida. Ut sodales odio tempor sodales viverra. In condimentum tincidunt fermentum. Nullam imperdiet est vel tincidunt suscipit. Vestibulum vel pulvinar nibh, at molestie lectus. Curabitur ultricies massa eu sem varius volutpat. Ut vitae purus et enim imperdiet finibus. Quisque posuere lacus a nunc tempor accumsan. Aliquam odio nunc, interdum."))));
+            });
+        },
+    },
+    {
+        name: 'Inline Message',
+        component: function (_a) {
+            var stylePreset = _a.stylePreset;
+            return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space050", key: "".concat(stylePreset, "-inlineMessage") },
+                react_1.default.createElement(helper_1.LabelFlag, { key: "label-flag" }, (0, helper_1.returnLastLetterInCamelCase)(stylePreset)),
+                react_1.default.createElement(inline_message_1.InlineMessage, { title: "Inline Message Title", "aria-label": "Inline message with ".concat(stylePreset), icon: react_1.default.createElement(icons_1.IconFilledInfo, { overrides: {
+                            size: 'iconSize020',
+                        } }), overrides: { stylePreset: stylePreset }, key: "inline-message" }, "Here goes a brief line or two describing the inline message information.")));
+        },
+    },
+    {
+        name: 'Inline Modal',
+        component: function () {
+            return react_1.default.createElement(function () {
+                var _a = (0, helper_1.useActiveState)(), isActive = _a[0], open = _a[1], close = _a[2];
+                return (react_1.default.createElement("div", { "data-testid": "scrollable-modal" },
+                    react_1.default.createElement(styled_1.ModalWrapper, null,
+                        react_1.default.createElement(button_1.Button, { onClick: open, "data-testid": "modal-open-button" }, "Open Modal"),
+                        react_1.default.createElement(styled_1.Box, null,
+                            react_1.default.createElement(typography_1.P, null, loremIpsum[0]),
+                            react_1.default.createElement(typography_1.P, null, loremIpsum[1])),
+                        react_1.default.createElement(modal_1.Modal, { open: isActive, onDismiss: close, header: react_1.default.createElement(typography_1.P, null, "Modal Title"), hideOverlay: true, disableFocusTrap: true, inline: true, overrides: {
+                                panel: { maxWidth: '60%' },
+                            } }, modalContent))));
+            });
+        },
+    },
+    {
+        name: 'Link',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Inline"),
+                react_1.default.createElement(link_1.LinkInline, { href: "/" }, "Inline link")),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Standalone"),
+                react_1.default.createElement(link_1.LinkStandalone, { href: "/" }, "Standalone link")))); },
+    },
+    {
+        name: 'Menu',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, spaceStack: "space060", wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Horizontal"),
+                react_1.default.createElement(menu_1.Menu, { "aria-label": "Menu ".concat((0, utils_1.getSSRId)()) },
+                    react_1.default.createElement(menu_1.MenuItem, { href: "/" }, "Menu Item 1"),
+                    react_1.default.createElement(menu_1.MenuItem, { href: "/" }, "Menu Item 2"),
+                    react_1.default.createElement(menu_1.MenuItem, { href: "/" }, "Menu Item 3"))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Vertical"),
+                react_1.default.createElement(menu_1.Menu, { vertical: true, "aria-label": "Menu ".concat((0, utils_1.getSSRId)()) },
+                    react_1.default.createElement(menu_1.MenuItem, { href: "/" }, "Menu Item 1"),
+                    react_1.default.createElement(menu_1.MenuItem, { href: "/" }, "Menu Item 2"),
+                    react_1.default.createElement(menu_1.MenuItem, { href: "/" }, "Menu Item 3"))))); },
+    },
+    {
+        name: 'OrderedList',
+        component: function () { return react_1.default.createElement(ordered_list_1.OrderedList, null, listData); },
+    },
+    {
+        name: 'Scroll',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, spaceStack: "space060", wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Horizontal"),
+                react_1.default.createElement(styled_1.Container, { "data-testid": "horizontal-scroll-component" },
+                    react_1.default.createElement(scroll_1.Scroll, { controls: "static" },
+                        react_1.default.createElement(stack_1.Stack, { flow: "horizontal-center", spaceInline: "space020" }, tags)))),
+            react_1.default.createElement(stack_1.Stack, null,
+                react_1.default.createElement(styled_1.Container, { "data-testid": "vertical-scroll-component" },
+                    react_1.default.createElement(scroll_1.Scroll, { vertical: true, controls: "static" },
+                        react_1.default.createElement(stack_1.Stack, { flow: "vertical-left", spaceInline: "space040" }, tags)))))); },
+    },
+    {
+        name: 'Select',
+        component: function () { return (react_1.default.createElement(select_1.Select, { overrides: { button: { width: '250px' } } }, listData.map(function (item) { return (react_1.default.createElement(select_1.SelectOption, { key: item.toString(), value: item }, item)); }))); },
+    },
+    {
+        name: 'Share Bar',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Horizontal"),
+                react_1.default.createElement(share_bar_1.ShareBar, { label: "Share", role: "region" }, [
+                    ['Faceook', react_1.default.createElement(icons_1.IconFilledFacebook, null)],
+                    ['Twitter', react_1.default.createElement(icons_1.IconFilledTwitter, null)],
+                    ['Instagram', react_1.default.createElement(icons_1.IconFilledInstagram, null)],
+                    ['AddCircle', react_1.default.createElement(icons_1.IconFilledAddCircle, null)],
+                ].map(function (_a) {
+                    var name = _a[0], icon = _a[1];
+                    return (react_1.default.createElement(icon_button_1.IconButton, { "aria-label": "Share on ".concat(name), overrides: { stylePreset: 'iconButtonMinimalPrimary' }, key: name }, icon));
+                }))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Vertical"),
+                react_1.default.createElement(share_bar_1.ShareBar, { vertical: true, label: "Share", role: "region", "aria-label": "share bar with vertical items and label" }, [
+                    ['Faceook', react_1.default.createElement(icons_1.IconFilledFacebook, null)],
+                    ['Twitter', react_1.default.createElement(icons_1.IconFilledTwitter, null)],
+                    ['Instagram', react_1.default.createElement(icons_1.IconFilledInstagram, null)],
+                    ['AddCircle', react_1.default.createElement(icons_1.IconFilledAddCircle, null)],
+                ].map(function (_a) {
+                    var name = _a[0], icon = _a[1];
+                    return (react_1.default.createElement(icon_button_1.IconButton, { "aria-label": "Share on ".concat(name), overrides: { stylePreset: 'iconButtonMinimalPrimary' }, key: name }, icon));
+                }))))); },
+    },
+    {
+        name: 'Slider',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, spaceStack: "space060", wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, { key: "label-flag" }, "With Labels"),
+                react_1.default.createElement(styled_1.Container, { key: "container" },
+                    react_1.default.createElement(slider_1.StatefulSlider, { values: [50], max: 100, min: 0, minLabel: "Label", maxLabel: "Label" }))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, { key: "label-flag" }, "Without labels"),
+                react_1.default.createElement(styled_1.Container, { key: "container" },
+                    react_1.default.createElement(slider_1.StatefulSlider, { values: [50], max: 100, min: 0 }))))); },
+    },
+    {
+        name: 'Structured List',
+        component: function () { return (react_1.default.createElement(structured_list_1.StructuredList, { ariaLabel: "list" },
+            listItemWithThreeCells,
+            listItemWithThreeCells,
+            listItemWithThreeCells)); },
+    },
+    {
+        name: 'Tabs',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, spaceStack: "space060", wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Horizontal"),
+                react_1.default.createElement(styled_1.Container, null,
+                    react_1.default.createElement(tabs_1.Tabs, { divider: true, distribution: tabs_1.TabsDistribution.Equal },
+                        react_1.default.createElement(tabs_1.Tab, { label: "Tab 1" },
+                            react_1.default.createElement(typography_1.P, null, "Lorem ipsum")),
+                        react_1.default.createElement(tabs_1.Tab, { label: "Tab 2" },
+                            react_1.default.createElement(typography_1.P, null, "Consectetur adipiscing")),
+                        react_1.default.createElement(tabs_1.Tab, { label: "Tab 3" },
+                            react_1.default.createElement(typography_1.P, null, "Magna"))))),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Vertical"),
+                react_1.default.createElement(styled_1.Container, { height: "400px" },
+                    react_1.default.createElement(tabs_1.Tabs, { vertical: true, divider: true, distribution: tabs_1.TabsDistribution.Equal },
+                        react_1.default.createElement(tabs_1.Tab, { label: "Tab 1" },
+                            react_1.default.createElement(typography_1.P, null, "Lorem ipsum")),
+                        react_1.default.createElement(tabs_1.Tab, { label: "Tab 2" },
+                            react_1.default.createElement(typography_1.P, null, "Consectetur adipiscing")),
+                        react_1.default.createElement(tabs_1.Tab, { label: "Tab 3" },
+                            react_1.default.createElement(typography_1.P, null, "Magna"))))))); },
+    },
+    {
+        name: 'Tag',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, spaceStack: "space060", wrap: "wrap" },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Default"),
+                react_1.default.createElement(tag_1.Tag, { href: "http://example.com" }, "Tag")),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Disabled"),
+                react_1.default.createElement(tag_1.Tag, { href: "http://example.com", disabled: true }, "Disabled")))); },
+    },
+    {
+        name: 'Text Block',
+        component: function () { return (react_1.default.createElement(styled_1.Container, { border: true },
+            react_1.default.createElement(text_block_1.TextBlock, { stylePreset: "inkSubtle" }, "Telling the stories that matter, seeding ideas and stirring emotion. Capturing moments, meaning and magic. Making sense of the world. On the shoulders of giants, in the thick of it, behind the scenes and fighting the good fight."))); },
+    },
+    {
+        name: 'Text Field',
+        component: function () { return (react_1.default.createElement(grid_1.Grid, null, textFieldStates.map(function (_a) {
+            var id = _a[0], state = _a[1].state;
+            return (react_1.default.createElement(grid_1.Cell, { xs: 12, sm: 6, key: "".concat(id, "-textField") },
+                react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                    react_1.default.createElement(helper_1.LabelFlag, null, id)),
+                react_1.default.createElement(label_1.Label, { htmlFor: id }, "Label"),
+                react_1.default.createElement(text_field_1.TextField, { state: state, "aria-describedby": "".concat(id, "-at"), id: id, placeholder: "Enter your username" })));
+        }))); },
+    },
+    {
+        name: 'Title Bar',
+        component: function () { return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(block_1.Block, { spaceStack: "space090" },
+                react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                    react_1.default.createElement(helper_1.LabelFlag, null, "Default")),
+                react_1.default.createElement(title_bar_1.TitleBar, null, "Title bar")),
+            react_1.default.createElement(block_1.Block, null,
+                react_1.default.createElement(block_1.Block, { spaceStack: "space050" },
+                    react_1.default.createElement(helper_1.LabelFlag, null, "With Standalone Link")),
+                react_1.default.createElement(styled_1.Container, { width: "80%" },
+                    react_1.default.createElement(title_bar_1.TitleBar, { actionItem: function () { return (react_1.default.createElement(link_1.LinkStandalone, { href: "/" }, "Standalone Link")); } }, "Title Bar"))))); },
+    },
+    {
+        name: 'Toast',
+        component: function (_a) {
+            var stylePreset = _a.stylePreset;
+            return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space070", key: "".concat(stylePreset, "-toast") },
+                react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                    react_1.default.createElement(helper_1.LabelFlag, { key: "label-flag" }, (0, helper_1.returnLastLetterInCamelCase)(stylePreset)),
+                    react_1.default.createElement(toast_1.Toast, { overrides: { stylePreset: stylePreset, maxWidth: '100%' }, key: "toast", actions: function () { return (react_1.default.createElement(button_1.Button, { size: "small", overrides: { stylePreset: 'buttonMinimalInverse' } }, "Undo")); }, icon: react_1.default.createElement(icons_1.IconFilledError, { overrides: {
+                                size: 'iconSize020',
+                            } }) }, "Here goes a brief line or two describing the toast information."))));
+        },
+    },
+    {
+        name: 'UnorderedList',
+        component: function () { return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop },
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Horizontal"),
+                react_1.default.createElement(unordered_list_1.UnorderedList, { listItemMarker: icons_1.IconFilledAddCircle }, listData)),
+            react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                react_1.default.createElement(helper_1.LabelFlag, null, "Without marker"),
+                react_1.default.createElement(unordered_list_1.UnorderedList, null, listData)))); },
+    },
+    {
+        name: 'Volume Control',
+        component: function () {
+            return react_1.default.createElement(function () {
+                var _a = (0, react_1.useState)(0), stateVolume = _a[0], setVolume = _a[1];
+                var _b = (0, react_1.useState)(0), stateVerticalVolume = _b[0], setVerticalVolume = _b[1];
+                return (react_1.default.createElement(stack_1.Stack, { spaceInline: "space110", flow: stack_1.Flow.HorizontalTop, spaceStack: "space060", wrap: "wrap" },
+                    react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                        react_1.default.createElement(helper_1.LabelFlag, null, "Horizontal"),
+                        react_1.default.createElement(styled_1.Container, null,
+                            react_1.default.createElement(volume_control_1.VolumeControl, { volume: stateVolume, onChange: 
+                                /* istanbul ignore next */ function (newValues) {
+                                    /* istanbul ignore next */
+                                    setVolume(newValues);
+                                } }))),
+                    react_1.default.createElement(stack_1.Stack, { spaceInline: "space050" },
+                        react_1.default.createElement(helper_1.LabelFlag, null, "Vertical"),
+                        react_1.default.createElement(styled_1.Container, { height: "300px" },
+                            react_1.default.createElement(volume_control_1.VolumeControl, { vertical: true, volume: stateVerticalVolume, onChange: 
+                                /* istanbul ignore next */ function (newValues) {
+                                    /* istanbul ignore next */
+                                    setVerticalVolume(newValues);
+                                } })))));
+            });
+        },
+    },
+];
+//# sourceMappingURL=scenarios.js.map