@ukic/react 3.5.0 → 3.6.0

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;

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

@@ -0,0 +1,55 @@
+// / IcSelectMultiSinglePage displays a single multi-select component for performance testing of the IcSelect component.
+import React from "react";
+import { IcSelect, IcTheme, IcTypography } from "../../../../../components";
+var options = [
+    {
+        label: "Cappuccino",
+        value: "Cap",
+        description: "Coffee frothed up with pressurised steam",
+    },
+    {
+        label: "Latte",
+        value: "Lat",
+        description: "A milkier coffee than a cappuccino",
+    },
+    {
+        label: "Americano",
+        value: "Ame",
+        description: "Espresso coffee diluted with hot water",
+        disabled: true,
+    },
+    {
+        label: "Filter",
+        value: "Fil",
+        description: "Coffee filtered using paper or a mesh",
+    },
+    {
+        label: "Flat white",
+        value: "Fla",
+        description: "Coffee without froth made with espresso and hot steamed milk",
+    },
+    {
+        label: "Mocha",
+        value: "Moc",
+        description: "A mixture of coffee and chocolate",
+    },
+    {
+        label: "Macchiato",
+        value: "Mac",
+        description: "Espresso coffee with a dash of frothy steamed milk",
+        icon: "<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>",
+    },
+];
+var IcSelectMultiSinglePage = 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, "Select Multi Page")),
+            React.createElement(IcSelect, { label: "What is your favourite coffee?", required: true, options: options, multiple: true, showClearButton: true, helperText: "Select one or more options from the list", 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"); } }))));
+};
+export default IcSelectMultiSinglePage;

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

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