@ukic/react 3.5.0 → 3.7.0

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

@@ -0,0 +1,115 @@
+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);
+};
+// IcSelectMultiVariantsPage displays multiple variants of multi-select 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 groupedOptions = [
+    {
+        label: "Fancy",
+        children: [
+            { label: "Cappuccino", value: "Cap" },
+            { label: "Flat white", value: "Flat" },
+            { label: "Macchiato", value: "Mac" },
+        ],
+    },
+    {
+        label: "Boring",
+        children: [
+            { label: "Filter", value: "Fil" },
+            { label: "Latte", value: "Lat" },
+            { label: "Americano", value: "Ame" },
+        ],
+    },
+];
+var optionsWithRecommended = [
+    { label: "Cappuccino", value: "Cappuccino" },
+    { label: "Flat white", value: "Flat white", recommended: true },
+    { label: "Latte", value: "Latte" },
+    { label: "Americano", value: "Americano", recommended: true },
+    { label: "Filter", value: "Fil" },
+];
+var optionsWithCustomElements = [
+    {
+        label: "Cappuccino",
+        value: "Cap",
+    },
+    {
+        label: "Latte",
+        value: "Lat",
+        element: {
+            component: "<ic-status-tag label=\"Neutral status\"></ic-status-tag>",
+            ariaLabel: "Neutral status tag",
+        },
+    },
+    {
+        label: "Americano",
+        value: "Ame",
+        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 defaultSelectEvents = {
+    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 IcSelectMultiVariantsPage = 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 Variants Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } },
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, multiple: true, value: ["Cap"], showClearButton: true, helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: groupedOptions, multiple: true, showClearButton: true, helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: optionsWithRecommended, multiple: true, showClearButton: true, helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", disabled: true, options: options, multiple: true, helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", readonly: true, options: options, multiple: true, value: ["Cap", "Fla", "Moc"], helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", placeholder: "Placeholder goes here", options: options, multiple: true, helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: optionsWithCustomElements, multiple: true, helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, multiple: true, size: "small", helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, multiple: true, size: "large", helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", fullWidth: true, options: options, multiple: true, helperText: "Select one or more options from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "success", validationText: "Coffee available", options: options, multiple: true }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "warning", validationText: "Only a few left", options: options, multiple: true }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "error", validationText: "Coffee unavailable", options: options, multiple: true }, defaultSelectEvents)))));
+};
+export default IcSelectMultiVariantsPage;

package/dist/performance-tests/pages/IcSelect/Searchable/IcSelectSearchableMultiple/index.d.ts

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

package/dist/performance-tests/pages/IcSelect/Searchable/IcSelectSearchableMultiple/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);
+};
+// IcSelectSearchableMultiplePage displays multiple searchable 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 IcSelectSearchableMultiplePage = 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 Searchable 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, searchable: true, showClearButton: true, helperText: "Select one option from the list" }, selectEvents))); }))));
+};
+export default IcSelectSearchableMultiplePage;

package/dist/performance-tests/pages/IcSelect/Searchable/IcSelectSearchableSingle/index.d.ts

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

package/dist/performance-tests/pages/IcSelect/Searchable/IcSelectSearchableSingle/index.js

@@ -0,0 +1,55 @@
+// IcSelectSearchableSinglePage displays a single searchable 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 IcSearchableSelectSinglePage = 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 Searchable Page")),
+            React.createElement(IcSelect, { label: "What is your favourite coffee?", searchable: true, includeDescriptionsInSearch: true, required: true, options: options, showClearButton: true, helperText: "Select one option 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 IcSearchableSelectSinglePage;

package/dist/performance-tests/pages/IcSelect/Searchable/IcSelectSearchableVariants/index.d.ts

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

package/dist/performance-tests/pages/IcSelect/Searchable/IcSelectSearchableVariants/index.js

@@ -0,0 +1,115 @@
+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);
+};
+// IcSelectSearchableVariantsPage displays various searchable 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 groupedOptions = [
+    {
+        label: "Fancy",
+        children: [
+            { label: "Cappuccino", value: "Cap" },
+            { label: "Flat white", value: "Flat" },
+            { label: "Macchiato", value: "Mac" },
+        ],
+    },
+    {
+        label: "Boring",
+        children: [
+            { label: "Filter", value: "Fil" },
+            { label: "Latte", value: "Lat" },
+            { label: "Americano", value: "Ame" },
+        ],
+    },
+];
+var optionsWithRecommended = [
+    { label: "Cappuccino", value: "Cappuccino" },
+    { label: "Flat white", value: "Flat white", recommended: true },
+    { label: "Latte", value: "Latte" },
+    { label: "Americano", value: "Americano", recommended: true },
+    { label: "Filter", value: "Fil" },
+];
+var optionsWithCustomElements = [
+    {
+        label: "Cappuccino",
+        value: "Cap",
+    },
+    {
+        label: "Latte",
+        value: "Lat",
+        element: {
+            component: "<ic-status-tag label=\"Neutral status\"></ic-status-tag>",
+            ariaLabel: "Neutral status tag",
+        },
+    },
+    {
+        label: "Americano",
+        value: "Ame",
+        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 defaultSelectEvents = {
+    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 IcSelectSearchableVariantsPage = 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 Searchable Variants Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } },
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, searchable: true, value: "Cap", showClearButton: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: groupedOptions, includeGroupTitlesInSearch: true, searchable: true, showClearButton: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: optionsWithRecommended, searchable: true, showClearButton: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, { label: "What is your favourite coffee?", disabled: true, options: options, searchable: true, helperText: "Select one option from the list" }),
+            React.createElement(IcSelect, { label: "What is your favourite coffee?", readonly: true, options: options, searchable: true, value: "Cap", helperText: "Select one option from the list" }),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", placeholder: "Placeholder goes here", options: options, searchable: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: optionsWithCustomElements, searchable: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, searchable: true, size: "small", helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, searchable: true, size: "large", helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", fullWidth: true, options: options, searchable: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "success", validationText: "Coffee available", options: options, searchable: true }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "warning", validationText: "Only a few left", options: options, searchable: true }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "error", validationText: "Coffee unavailable", options: options, searchable: true }, defaultSelectEvents)))));
+};
+export default IcSelectSearchableVariantsPage;

package/dist/performance-tests/pages/IcSelect/Single/IcSelectMultiple/index.d.ts

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

package/dist/performance-tests/pages/IcSelect/Single/IcSelectMultiple/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);
+};
+// IcSelectMultiplePage displays multiple 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 IcSelectMultiplePage = 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 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, showClearButton: true, helperText: "Select one option from the list" }, selectEvents))); }))));
+};
+export default IcSelectMultiplePage;

package/dist/performance-tests/pages/IcSelect/Single/IcSelectSingle/index.d.ts

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

package/dist/performance-tests/pages/IcSelect/Single/IcSelectSingle/index.js

@@ -0,0 +1,35 @@
+// IcSelectSinglePage displays a single select component with various options 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",
+        disabled: true,
+    },
+    {
+        label: "Americano",
+        value: "Ame",
+        description: "Espresso coffee diluted with hot water",
+        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 IcSelectSinglePage = 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 Page")),
+            React.createElement(IcSelect, { label: "What is your favourite coffee?", required: true, options: options, showClearButton: true, helperText: "Select one option 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 IcSelectSinglePage;

package/dist/performance-tests/pages/IcSelect/Single/IcSelectVariants/index.d.ts

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

package/dist/performance-tests/pages/IcSelect/Single/IcSelectVariants/index.js

@@ -0,0 +1,115 @@
+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);
+};
+// IcSelectVariantsPage displays multiple variants of the IcSelect component for performance testing purposes.
+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 groupedOptions = [
+    {
+        label: "Fancy",
+        children: [
+            { label: "Cappuccino", value: "Cap" },
+            { label: "Flat white", value: "Flat" },
+            { label: "Macchiato", value: "Mac" },
+        ],
+    },
+    {
+        label: "Boring",
+        children: [
+            { label: "Filter", value: "Fil" },
+            { label: "Latte", value: "Lat" },
+            { label: "Americano", value: "Ame" },
+        ],
+    },
+];
+var optionsWithRecommended = [
+    { label: "Cappuccino", value: "Cappuccino" },
+    { label: "Flat white", value: "Flat white", recommended: true },
+    { label: "Latte", value: "Latte" },
+    { label: "Americano", value: "Americano", recommended: true },
+    { label: "Filter", value: "Fil" },
+];
+var optionsWithCustomElements = [
+    {
+        label: "Cappuccino",
+        value: "Cap",
+    },
+    {
+        label: "Latte",
+        value: "Lat",
+        element: {
+            component: "<ic-status-tag label=\"Neutral status\"></ic-status-tag>",
+            ariaLabel: "Neutral status tag",
+        },
+    },
+    {
+        label: "Americano",
+        value: "Ame",
+        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 defaultSelectEvents = {
+    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 IcSelectVariantsPage = 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 Variants Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } },
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, value: "Cap", showClearButton: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: groupedOptions, showClearButton: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: optionsWithRecommended, showClearButton: true, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, { label: "What is your favourite coffee?", disabled: true, options: options, helperText: "Select one option from the list" }),
+            React.createElement(IcSelect, { label: "What is your favourite coffee?", readonly: true, options: options, value: "Cap", helperText: "Select one option from the list" }),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", placeholder: "Placeholder goes here", options: options, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: optionsWithCustomElements, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, size: "small", helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", options: options, size: "large", helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", fullWidth: true, options: options, helperText: "Select one option from the list" }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "success", validationText: "Coffee available", options: options }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "warning", validationText: "Only a few left", options: options }, defaultSelectEvents)),
+            React.createElement(IcSelect, __assign({ label: "What is your favourite coffee?", validationStatus: "error", validationText: "Coffee unavailable", options: options }, defaultSelectEvents)))));
+};
+export default IcSelectVariantsPage;

package/dist/performance-tests/pages/IcSideNavigation/IcSideNavigationClosed/index.d.ts

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