@ukic/react 3.4.0 → 3.6.0

package/dist/performance-tests/pages/IcHero/index.js

@@ -0,0 +1,18 @@
+// IcHeroPage displays a hero for the purpose of performance testing of the IcHero component.
+import React from "react";
+import { IcHero, IcButton, IcTextField, IcLink, IcCardVertical, IcSearchBar, IcTheme, IcTypography, } from "../../../components";
+var IcHeroPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Hero Page")),
+        React.createElement(IcHero, { heading: "Hero heading", subheading: "Hero description. This is a Hero component, it should be used as a page heading.", secondaryHeading: "Secondary Heading", secondarySubheading: "This is a secondary description.", aligned: "center" },
+            React.createElement("div", { slot: "interaction", style: { display: "flex" } },
+                React.createElement(IcTextField, { placeholder: "Filter display", label: "Filter display", "hide-label": true }),
+                React.createElement(IcButton, { variant: "primary", style: { marginLeft: "var(--ic-space-md)" } }, "Filter")),
+            React.createElement(IcButton, { variant: "secondary", slot: "interaction" }, "See all"),
+            React.createElement(IcSearchBar, { slot: "interaction", label: "Label", hideLabel: true }),
+            React.createElement(IcLink, { href: "https://google.com", slot: "interaction", style: { marginTop: "var(--ic-space-sm)" } }, "Help"),
+            React.createElement(IcCardVertical, { heading: "Latest announcement", message: "This is some example text that can be included in the card copy.", slot: "secondary" }))));
+};
+export default IcHeroPage;

package/dist/performance-tests/pages/IcPageHeader/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcPageHeaderPage: React.FC<PageProps>;
+export default IcPageHeaderPage;

package/dist/performance-tests/pages/IcPageHeader/index.js

@@ -0,0 +1,24 @@
+// IcPageHeaderPage displays a page header for the purpose of performance testing of the IcPageHeader component.
+import React from "react";
+import { IcPageHeader, IcStatusTag, IcBreadcrumbGroup, IcBreadcrumb, IcButton, IcTextField, IcNavigationItem, IcTheme, IcTypography, } from "../../../components";
+import { SlottedSVG } from "../../../react-component-lib/slottedSVG";
+var IcPageHeaderPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Page Header Page")),
+        React.createElement(IcPageHeader, { heading: "Page header", subheading: "This is a simple page header component and this is the text. This page header is only sticky for viewport widths of 992px and above..", stickyDesktopOnly: true, aligned: "full-width" },
+            React.createElement(IcStatusTag, { slot: "heading-adornment", label: "Beta" }),
+            React.createElement(IcBreadcrumbGroup, { slot: "breadcrumbs" },
+                React.createElement(IcBreadcrumb, { pageTitle: "Breadcrumb 1", href: "/breadcrumb-1" }),
+                React.createElement(IcBreadcrumb, { current: true, pageTitle: "Breadcrumb 2", href: "/breadcrumb-2" })),
+            React.createElement(IcButton, { slot: "actions", variant: "primary" },
+                "Create coffee",
+                React.createElement(SlottedSVG, { slot: "left-icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { d: "M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z", fill: "currentColor" }))),
+            React.createElement(IcButton, { slot: "actions", variant: "secondary" }, "Filter coffee"),
+            React.createElement(IcTextField, { slot: "input", placeholder: "Enter your input", label: "Input", hideLabel: true }),
+            React.createElement(IcNavigationItem, { slot: "tabs", label: "All recipes", href: "/", selected: true }),
+            React.createElement(IcNavigationItem, { slot: "tabs", label: "Favourites", href: "/" }))));
+};
+export default IcPageHeaderPage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcPopoverMenuMultiplePage: React.FC<PageProps>;
+export default IcPopoverMenuMultiplePage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuMultiple/index.js

@@ -0,0 +1,51 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+// IcPopoverMenuMultiplePage displays multiple popover menus for the purpose of performance testing of the IcPopoverMenu component.
+import React, { useState } from "react";
+import { IcButton, IcMenuGroup, IcMenuItem, IcPopoverMenu, IcTheme, IcTypography, } from "../../../../components";
+var NUM_POPOVERS = 15;
+var IcPopoverMenuMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var _b = useState(__spreadArray([
+        true
+    ], Array(NUM_POPOVERS - 1).fill(false), true)), popoverOpen = _b[0], setPopoverOpen = _b[1];
+    var handlePopoverToggled = function (idx) {
+        setPopoverOpen(function (prev) { return prev.map(function (open, i) { return (i === idx ? !open : open); }); });
+    };
+    var handlePopoverClosed = function (idx) {
+        setPopoverOpen(function (prev) { return prev.map(function (open, i) { return (i === idx ? false : open); }); });
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Popover Menu Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+                marginTop: "540px",
+            } }, Array.from({ length: NUM_POPOVERS }).map(function (_, idx) { return (React.createElement("div", { key: idx },
+            React.createElement(IcButton, { title: "Show/hide popover ".concat(idx + 1), id: "button-".concat(idx), onClick: function () { return handlePopoverToggled(idx); }, "aria-expanded": popoverOpen[idx] },
+                "Show/hide popover ",
+                idx + 1),
+            React.createElement(IcPopoverMenu, { anchor: "button-".concat(idx), "aria-label": "popover-".concat(idx), open: popoverOpen[idx], onIcPopoverClosed: function (event) {
+                    handlePopoverClosed(idx);
+                    console.log("Popover menu closed: ", event);
+                } },
+                React.createElement(IcMenuGroup, { label: "Edit options" },
+                    React.createElement(IcMenuItem, { label: "Copy", disabled: true }),
+                    React.createElement(IcMenuItem, { label: "Paste", keyboardShortcutLabel: "Cmd + V" })),
+                React.createElement(IcMenuGroup, null,
+                    React.createElement(IcMenuItem, { label: "Format" }),
+                    React.createElement(IcMenuItem, { label: "Help" }))))); }))));
+};
+export default IcPopoverMenuMultiplePage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuMultipleNotRendered/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcPopoverMenuNotRenderedPage: React.FC<PageProps>;
+export default IcPopoverMenuNotRenderedPage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuMultipleNotRendered/index.js

@@ -0,0 +1,51 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+// IcPopoverMenuNotRenderedPage displays multiple popover menus that are only rendered when open for the purpose of performance testing of the IcPopoverMenu component.
+import React, { useState } from "react";
+import { IcButton, IcMenuGroup, IcMenuItem, IcPopoverMenu, IcTheme, IcTypography, } from "../../../../components";
+var NUM_POPOVERS = 15;
+var IcPopoverMenuNotRenderedPage = function (_a) {
+    var theme = _a.theme;
+    var _b = useState(__spreadArray([
+        true
+    ], Array(NUM_POPOVERS - 1).fill(false), true)), popoverOpen = _b[0], setPopoverOpen = _b[1];
+    var handlePopoverToggled = function (idx) {
+        setPopoverOpen(function (prev) { return prev.map(function (open, i) { return (i === idx ? !open : open); }); });
+    };
+    var handlePopoverClosed = function (idx) {
+        setPopoverOpen(function (prev) { return prev.map(function (open, i) { return (i === idx ? false : open); }); });
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Popover Menu Multiple Not Rendered Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+                marginTop: "540px",
+            } }, Array.from({ length: NUM_POPOVERS }).map(function (_, idx) { return (React.createElement("div", { key: idx },
+            React.createElement(IcButton, { title: "Show/hide popover ".concat(idx + 1), id: "button-".concat(idx), onClick: function () { return handlePopoverToggled(idx); }, "aria-expanded": popoverOpen[idx] },
+                "Show/hide popover ",
+                idx + 1),
+            popoverOpen[idx] && (React.createElement(IcPopoverMenu, { anchor: "button-".concat(idx), "aria-label": "popover-".concat(idx), open: popoverOpen[idx], onIcPopoverClosed: function (event) {
+                    handlePopoverClosed(idx);
+                    console.log("Popover menu closed: ", event);
+                } },
+                React.createElement(IcMenuGroup, { label: "Edit options" },
+                    React.createElement(IcMenuItem, { label: "Copy", disabled: true }),
+                    React.createElement(IcMenuItem, { label: "Paste", keyboardShortcutLabel: "Cmd + V" })),
+                React.createElement(IcMenuGroup, null,
+                    React.createElement(IcMenuItem, { label: "Format" }),
+                    React.createElement(IcMenuItem, { label: "Help" })))))); }))));
+};
+export default IcPopoverMenuNotRenderedPage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuSingle/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcPopoverMenuSinglePage: React.FC<PageProps>;
+export default IcPopoverMenuSinglePage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuSingle/index.js

@@ -0,0 +1,37 @@
+// IcPopoverMenuSinglePage displays a popover menu for the purpose of performance testing of the IcPopoverMenu component.
+import React, { useState } from "react";
+import { IcPopoverMenu, IcMenuItem, IcMenuGroup, IcButton, IcTheme, IcTypography, } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var IcPopoverMenuSinglePage = function (_a) {
+    var theme = _a.theme;
+    var _b = useState(true), popoverOpen = _b[0], setPopoverOpen = _b[1];
+    var handlePopoverToggled = function () { return setPopoverOpen(function (value) { return !value; }); };
+    var handlePopoverClosed = function () { return setPopoverOpen(false); };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Popover Menu Page")),
+            React.createElement(IcButton, { id: "button-1", onClick: handlePopoverToggled, "aria-expanded": popoverOpen }, "Show/Hide popover"),
+            React.createElement(IcPopoverMenu, { anchor: "button-1", "aria-label": "popover", open: popoverOpen, onIcPopoverClosed: function (event) {
+                    handlePopoverClosed();
+                    console.log("Popover menu closed: ", event);
+                } },
+                React.createElement(IcMenuItem, { label: "Copy code", disabled: true }),
+                React.createElement(IcMenuGroup, { label: "View" },
+                    React.createElement(IcMenuItem, { label: "Zoom in", keyboardShortcutLabel: "Cmd+" }),
+                    React.createElement(IcMenuItem, { label: "Zoom out", keyboardShortcutLabel: "Cmd-" })),
+                React.createElement(IcMenuItem, { label: "Actions", submenuTriggerFor: "abc" })),
+            React.createElement(IcPopoverMenu, { submenuId: "abc" },
+                React.createElement(IcMenuItem, { label: "Edit" }),
+                React.createElement(IcMenuItem, { label: "Find", submenuTriggerFor: "abc123" }),
+                React.createElement(IcMenuItem, { label: "Delete", variant: "destructive" })),
+            React.createElement(IcPopoverMenu, { submenuId: "abc123" },
+                React.createElement(IcMenuItem, { label: "Search the web", description: "This will search the web to find the thing you are looking for." }),
+                React.createElement(IcMenuItem, { label: "Find..." }),
+                React.createElement(IcMenuItem, { label: "Find icons" },
+                    React.createElement(SlottedSVG, { slot: "icon", xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px" },
+                        React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                        React.createElement("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" }))),
+                React.createElement(IcMenuItem, { label: "Show found results", variant: "toggle", onIcToggleChecked: function (event) { return console.log(event.detail.checked); } })))));
+};
+export default IcPopoverMenuSinglePage;

package/dist/performance-tests/pages/IcRadio/IcRadioMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcRadioMultiplePage: React.FC<PageProps>;
+export default IcRadioMultiplePage;

package/dist/performance-tests/pages/IcRadio/IcRadioMultiple/index.js

@@ -0,0 +1,32 @@
+// IcRadioMultiplePage displays multiple radio groups for the purpose of performance testing of the IcRadio component.
+import React from "react";
+import { IcRadioGroup, IcRadioOption, IcTheme, IcTypography, } from "../../../../components";
+var handleRadioGroupChange = function (index) { return function (ev) {
+    console.log("Group ".concat(index, ":"), ev.detail.value);
+}; };
+var handleRadioOptionCheck = function (index) { return function (ev) {
+    console.log("Group ".concat(index, ": Radio option selected: "), ev.detail.value);
+}; };
+var RadioGroup = function (_a) {
+    var index = _a.index;
+    return (React.createElement(IcRadioGroup, { name: "radio-group-".concat(index), label: "Add a free purchase with any hot drink (Group ".concat(index, ")"), helperText: "Helper text for group ".concat(index), required: true, onIcChange: handleRadioGroupChange(index) },
+        React.createElement(IcRadioOption, { value: "crisps", label: "Crisps (Group ".concat(index, ")"), onIcCheck: handleRadioOptionCheck(index) }),
+        React.createElement(IcRadioOption, { value: "cookie", label: "Deluxe chocolate chip cookie (Group ".concat(index, ")"), onIcCheck: handleRadioOptionCheck(index) }),
+        React.createElement(IcRadioOption, { value: "fruit", label: "Banana (Group ".concat(index, ")"), onIcCheck: handleRadioOptionCheck(index) }),
+        React.createElement(IcRadioOption, { value: "No item", label: "No thanks, just my coffee (Group ".concat(index, ")"), selected: true, onIcCheck: handleRadioOptionCheck(index) })));
+};
+var IcRadioMultiplePage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Radio Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } }, Array.from({ length: 20 }, function (_, i) { return (React.createElement(RadioGroup, { key: i, index: i + 1 })); }))));
+};
+export default IcRadioMultiplePage;

package/dist/performance-tests/pages/IcRadio/IcRadioSingle/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcRadioSinglePage: React.FC<PageProps>;
+export default IcRadioSinglePage;

package/dist/performance-tests/pages/IcRadio/IcRadioSingle/index.js

@@ -0,0 +1,22 @@
+// IcRadioSinglePage displays a single radio group with multiple options for the purpose of performance testing of the IcRadio component.
+import React from "react";
+import { IcRadioGroup, IcRadioOption, IcTheme, IcTypography, } from "../../../../components";
+var IcRadioSinglePage = function (_a) {
+    var theme = _a.theme;
+    var handleRadioGroupChange = function (ev) {
+        console.log(ev.detail.value);
+    };
+    var handleRadioOptionCheck = function (ev) {
+        console.log("Radio option selected: ", ev.detail.value);
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Radio Page")),
+            React.createElement(IcRadioGroup, { name: "radio-group-1", label: "Add a free purchase with any hot drink", helperText: "Helper text", required: true, onIcChange: handleRadioGroupChange },
+                React.createElement(IcRadioOption, { value: "crisps", label: "Crisps", onIcCheck: handleRadioOptionCheck }),
+                React.createElement(IcRadioOption, { value: "cookie", label: "Deluxe chocolate chip cookie (sold out)", disabled: true }),
+                React.createElement(IcRadioOption, { value: "fruit", label: "Banana", onIcCheck: handleRadioOptionCheck }),
+                React.createElement(IcRadioOption, { value: "No item", label: "No thanks, just my coffee", selected: true, onIcCheck: handleRadioOptionCheck })))));
+};
+export default IcRadioSinglePage;

package/dist/performance-tests/pages/IcRadio/IcRadioVariants/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcRadioVariantsPage: React.FC<PageProps>;
+export default IcRadioVariantsPage;

package/dist/performance-tests/pages/IcRadio/IcRadioVariants/index.js

@@ -0,0 +1,84 @@
+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);
+};
+// IcRadioVariantsPage displays multiple radio groups with various configurations for the purpose of performance testing of the IcRadio component.
+import React, { useEffect, useState } from "react";
+import { IcRadioGroup, IcRadioOption, IcTextField, IcTheme, IcTypography, } from "../../../../components";
+var radioOptions = [
+    { value: "crisps", label: "Crisps" },
+    {
+        value: "cookie",
+        label: "Deluxe chocolate chip cookie (sold out)",
+        disabled: true,
+    },
+    { value: "fruit", label: "Banana" },
+    { value: "No item", label: "No thanks, just my coffee", selected: true },
+];
+var baseRadioGroupProps = {
+    label: "Add a free purchase with any hot drink",
+    helperText: "Options may be limited",
+};
+var handleRadioGroupChange = function (ev) {
+    console.log(ev.detail.value);
+};
+var handleRadioGroupSelectedOption = function (ev) {
+    console.log(ev.detail.selectedOption);
+};
+var handleRadioOptionCheck = function (ev) {
+    console.log("Radio option selected: ", ev.detail.value);
+};
+var renderRadioOptions = function (groupName) {
+    return radioOptions.map(function (option) { return (React.createElement(IcRadioOption, { key: "".concat(option.value, "-").concat(groupName), value: option.value, label: "".concat(option.label, " (").concat(groupName, ")"), disabled: option.disabled, selected: option.selected, onIcCheck: handleRadioOptionCheck })); });
+};
+var RadioOptionsDynamic = function () {
+    var _a = useState([]), dynamicOptions = _a[0], setDynamicOptions = _a[1];
+    useEffect(function () {
+        setTimeout(function () {
+            setDynamicOptions([
+                { label: "Item 1", value: "Item 1" },
+                { label: "Item 2", value: "Item 2" },
+                { label: "Item 3", value: "Item 3" },
+                { label: "Item 4", value: "Item 4" },
+            ]);
+        }, 3000);
+    }, []);
+    return (React.createElement(IcRadioGroup, { label: "What is your favourite coffee?", name: "radio-group-8" }, dynamicOptions.map(function (option) { return (React.createElement(IcRadioOption, { key: option.value, value: option.value, label: option.label, onIcCheck: handleRadioOptionCheck })); })));
+};
+var ConditionalRadioGroup = function (_a) {
+    var label = _a.label, additionalFieldDisplay = _a.additionalFieldDisplay, name = _a.name;
+    return (React.createElement(IcRadioGroup, { label: label, name: name, onIcChange: handleRadioGroupSelectedOption },
+        React.createElement(IcRadioOption, { value: "valueName1", label: "Option with no additional field", onIcCheck: handleRadioOptionCheck }),
+        React.createElement(IcRadioOption, { value: "valueName2", label: "Option with text field as conditional slotted additional field", additionalFieldDisplay: additionalFieldDisplay, onIcCheck: handleRadioOptionCheck },
+            React.createElement(IcTextField, { validationStatus: "error", validationText: "Now it has really gone to (coffee) pot", slot: "additional-field", placeholder: "Placeholder", label: "What's your favourite type of coffee?" }))));
+};
+var IcRadioVariantsPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Radio Variants Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } },
+            React.createElement(IcRadioGroup, __assign({}, baseRadioGroupProps, { name: "radio-group-1", required: true, onIcChange: handleRadioGroupChange }), renderRadioOptions("radio-group-1")),
+            React.createElement(IcRadioGroup, __assign({}, baseRadioGroupProps, { name: "radio-group-2", disabled: true }), renderRadioOptions("radio-group-2")),
+            React.createElement(IcRadioGroup, __assign({}, baseRadioGroupProps, { name: "radio-group-3", size: "small", onIcChange: handleRadioGroupChange }), renderRadioOptions("radio-group-3")),
+            React.createElement(IcRadioGroup, __assign({}, baseRadioGroupProps, { name: "radio-group-4", required: true, validationStatus: "error", validationText: "Please select an option", onIcChange: handleRadioGroupChange }), renderRadioOptions("radio-group-4")),
+            React.createElement(IcRadioGroup, __assign({}, baseRadioGroupProps, { name: "radio-group-5", validationStatus: "success", validationText: "You have selected your item", onIcChange: handleRadioGroupChange }), renderRadioOptions("radio-group-5")),
+            React.createElement(ConditionalRadioGroup, { label: "Conditional dynamic", additionalFieldDisplay: "dynamic", name: "radio-group-6" }),
+            React.createElement(ConditionalRadioGroup, { label: "Conditional static", additionalFieldDisplay: "static", name: "radio-group-7" }),
+            React.createElement(RadioOptionsDynamic, null))));
+};
+export default IcRadioVariantsPage;

package/dist/performance-tests/pages/IcSearchBar/IcSearchBarMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcSearchBarMultiplePage: React.FC<PageProps>;
+export default IcSearchBarMultiplePage;

package/dist/performance-tests/pages/IcSearchBar/IcSearchBarMultiple/index.js

@@ -0,0 +1,49 @@
+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);
+};
+// IcSearchBarMultiplePage displays multiple search bars for the purpose of performance testing of the IcSearchBar component.
+import React from "react";
+import { IcSearchBar, IcTheme, IcTypography } from "../../../../components";
+var options = [
+    { label: "Espresso", value: "espresso" },
+    { label: "Double Espresso", value: "doubleespresso" },
+    { label: "Flat White", value: "flatwhite" },
+    { label: "Cappuccino", value: "cappuccino" },
+    { label: "Americano", value: "americano" },
+    { label: "Mocha", value: "mocha" },
+];
+var searchBarEvents = {
+    onIcChange: function (ev) { return console.log("Value changed: ", ev.detail.value); },
+    onIcClear: function () { return console.log("Value cleared"); },
+    onIcInput: function (ev) { return console.log("icInput: ", ev.detail.value); },
+    onIcOptionSelect: function (ev) {
+        return console.log("Option selected: ", ev.detail.value);
+    },
+    onIcSearchBarBlur: function () { return console.log("Search bar blurred"); },
+    onIcSearchBarFocus: function () { return console.log("Search bar focused"); },
+    onIcSubmitSearch: function () { return console.log("Search submitted"); },
+    onIcMenuChange: function (ev) { return console.log("Menu opened/closed: ", ev.detail); },
+};
+var IcSearchBarMultiplePage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Search Bar Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } }, Array.from({ length: 20 }, function (_, i) { return (React.createElement(IcSearchBar, __assign({ key: i, label: "What is your favourite coffee?", helperText: "Search for your favourite coffee", emptyOptionListText: "There's nothing here", options: options, charactersUntilSuggestion: 3, required: true }, searchBarEvents))); }))));
+};
+export default IcSearchBarMultiplePage;

package/dist/performance-tests/pages/IcSearchBar/IcSearchBarSingle/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcSearchBarSinglePage: React.FC<PageProps>;
+export default IcSearchBarSinglePage;

package/dist/performance-tests/pages/IcSearchBar/IcSearchBarSingle/index.js

@@ -0,0 +1,23 @@
+// IcSearchBarSinglePage displays a single search bar for the purpose of performance testing of the IcSearchBar component.
+import React from "react";
+import { IcSearchBar, IcTheme, IcTypography } from "../../../../components";
+var IcSearchBarSinglePage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Search Bar Page")),
+            React.createElement(IcSearchBar, { label: "What is your favourite coffee?", helperText: "Search for your favourite coffee", emptyOptionListText: "There's nothing here", charactersUntilSuggestion: 3, assistiveHintText: "You can use up and down arrows to navigate the options when they are available, and press enter to select an option.", options: [
+                    { label: "Espresso", value: "espresso" },
+                    { label: "Double Espresso", value: "doubleespresso" },
+                    { label: "Flat White", value: "flatwhite" },
+                    { label: "Cappuccino", value: "cappuccino" },
+                    { label: "Americano", value: "americano" },
+                    { label: "Mocha", value: "mocha" },
+                ], onIcChange: function (ev) { return console.log("Value changed: ", ev.detail.value); }, onIcClear: function () { return console.log("Value cleared"); }, onIcInput: function (ev) { return console.log("icInput: ", ev.detail.value); }, onIcOptionSelect: function (ev) {
+                    return console.log("Option selected: ", ev.detail.value);
+                }, onIcSearchBarBlur: function () { return console.log("Search bar blurred"); }, onIcSearchBarFocus: function () { return console.log("Search bar focused"); }, onIcSubmitSearch: function () { return console.log("Search submitted"); }, onIcMenuChange: function (ev) {
+                    return console.log("Menu opened/closed: ", ev.detail);
+                } }))));
+};
+export default IcSearchBarSinglePage;

package/dist/performance-tests/pages/IcSearchBar/IcSearchBarVariants/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcSearchBarVariantsPage: React.FC<PageProps>;
+export default IcSearchBarVariantsPage;

package/dist/performance-tests/pages/IcSearchBar/IcSearchBarVariants/index.js

@@ -0,0 +1,63 @@
+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);
+};
+// IcSearchBarVariantsPage displays various configurations of the IcSearchBar component for performance testing purposes.
+import React from "react";
+import { IcSearchBar, IcTheme, IcTypography } from "../../../../components";
+var options = [
+    { label: "Espresso", value: "espresso" },
+    { label: "Double Espresso", value: "doubleespresso" },
+    { label: "Flat White", value: "flatwhite" },
+    { label: "Cappuccino", value: "cappuccino" },
+    { label: "Americano", value: "americano" },
+    { label: "Mocha", value: "mocha" },
+];
+var defaultSearchBarProps = {
+    label: "What is your favourite coffee?",
+    helperText: "Search for your favourite coffee",
+    emptyOptionListText: "There's nothing here",
+    options: options,
+};
+var defaultSearchBarEvents = {
+    onIcChange: function (ev) { return console.log("Value changed: ", ev.detail.value); },
+    onIcClear: function () { return console.log("Value cleared"); },
+    onIcInput: function (ev) { return console.log("icInput: ", ev.detail.value); },
+    onIcOptionSelect: function (ev) {
+        return console.log("Option selected: ", ev.detail.value);
+    },
+    onIcSearchBarBlur: function () { return console.log("Search bar blurred"); },
+    onIcSearchBarFocus: function () { return console.log("Search bar focused"); },
+    onIcSubmitSearch: function () { return console.log("Search submitted"); },
+    onIcMenuChange: function (ev) { return console.log("Menu opened/closed: ", ev.detail); },
+};
+var IcSearchBarVariantsPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Search Bar Variants Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } },
+            React.createElement(IcSearchBar, __assign({}, defaultSearchBarProps, { charactersUntilSuggestion: 3, assistiveHintText: "You can use up and down arrows to navigate the options when they are available, and press enter to select an option.", required: true }, defaultSearchBarEvents)),
+            React.createElement(IcSearchBar, __assign({}, defaultSearchBarProps, { placeholder: "Small search bar", size: "small" }, defaultSearchBarEvents)),
+            React.createElement(IcSearchBar, __assign({}, defaultSearchBarProps, { fullWidth: true }, defaultSearchBarEvents)),
+            React.createElement(IcSearchBar, __assign({}, defaultSearchBarProps, { disabled: true })),
+            React.createElement(IcSearchBar, __assign({}, defaultSearchBarProps, { readonly: true })),
+            React.createElement(IcSearchBar, __assign({}, defaultSearchBarProps, { disableAutoFiltering: true }, defaultSearchBarEvents)),
+            React.createElement(IcSearchBar, __assign({}, defaultSearchBarProps, { focusOnLoad: true }, defaultSearchBarEvents)),
+            React.createElement(IcSearchBar, __assign({}, defaultSearchBarProps, { searchMode: "query" }, defaultSearchBarEvents)))));
+};
+export default IcSearchBarVariantsPage;

package/dist/performance-tests/pages/IcSelect/Multi/IcSelectMultiMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcSelectMultiMultiplePage: React.FC<PageProps>;
+export default IcSelectMultiMultiplePage;

package/dist/performance-tests/pages/IcSelect/Multi/IcSelectMultiMultiple/index.js

@@ -0,0 +1,58 @@
+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);
+};
+// IcSelectMultiMultiplePage displays multiple multi-select components for performance testing of the IcSelect component.
+import React from "react";
+import { IcSelect, IcTheme, IcTypography } from "../../../../../components";
+var options = [
+    { label: "Cappuccino", value: "Cap" },
+    { label: "Latte", value: "Lat" },
+    { label: "Americano", value: "Ame" },
+    { label: "Filter", value: "Fil" },
+    { label: "Flat white", value: "Fla" },
+    { label: "Mocha", value: "Moc" },
+    { label: "Macchiato", value: "Mac" },
+    { label: "Café au lait", value: "Caf" },
+    { label: "Espresso", value: "Esp" },
+    { label: "Cortado", value: "Cor" },
+    { label: "Ristretto", value: "Ris" },
+    { label: "Latte macchiato", value: "Lam" },
+];
+var selectEvents = {
+    onIcChange: function (ev) { return console.log("icChange: ".concat(ev.detail.value)); },
+    onIcBlur: function () { return console.log("Select blurred"); },
+    onIcFocus: function () { return console.log("Select focused"); },
+    onIcInput: function (ev) { return console.log("icInput: ".concat(ev.detail.value)); },
+    onIcOptionSelect: function (ev) {
+        return console.log("icOptionSelect: ".concat(ev.detail.value));
+    },
+    onIcOptionDeselect: function (ev) {
+        return console.log("icOptionDeselect: ".concat(ev.detail.value));
+    },
+    onIcOpen: function () { return console.log("select dropdown opened"); },
+    onIcClose: function () { return console.log("select dropdown closed"); },
+    onIcClear: function () { return console.log("clear all clicked"); },
+};
+var IcSelectMultiMultiplePage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Select Multi Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } }, Array.from({ length: 20 }, function (_, i) { return (React.createElement(IcSelect, __assign({ key: i, label: "What is your favourite coffee?", options: options, multiple: true, showClearButton: true, helperText: "Select one or more options from the list" }, selectEvents))); }))));
+};
+export default IcSelectMultiMultiplePage;

package/dist/performance-tests/pages/IcSelect/Multi/IcSelectMultiSingle/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcSelectMultiSinglePage: React.FC<PageProps>;
+export default IcSelectMultiSinglePage;