@ukic/react 3.4.0 → 3.6.0

package/dist/performance-tests/pages/IcAccordion/IcAccordionSingle/index.d.ts

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

package/dist/performance-tests/pages/IcAccordion/IcAccordionSingle/index.js

@@ -0,0 +1,17 @@
+// IcAccordionSinglePage displays a single nested accordion group for the purpose of performance testing of the IcAccordion component.
+import React from "react";
+import { IcAccordion, IcAccordionGroup, IcTypography, IcTheme, } from "../../../../components";
+var IcAccordionSinglePage = 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(IcAccordionGroup, { label: "Coffee" },
+                React.createElement(IcAccordion, { heading: "Cappuccino" },
+                    React.createElement(IcTypography, { variant: "body" }, "An espresso-based drink that is traditionally prepared with steamed milk foam.")),
+                React.createElement(IcAccordion, { heading: "Other coffees", expanded: true },
+                    React.createElement(IcAccordion, { heading: "Americano", expanded: true },
+                        React.createElement(IcTypography, { variant: "body" }, "An espresso-based drink that is diluted with hot water.")),
+                    React.createElement(IcAccordion, { heading: "Latte", expanded: true },
+                        React.createElement(IcTypography, { variant: "body" }, "A milkier coffee than a cappuccino.")))))));
+};
+export default IcAccordionSinglePage;

package/dist/performance-tests/pages/IcButton/IcButtonMultiple/index.d.ts

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

package/dist/performance-tests/pages/IcButton/IcButtonMultiple/index.js

@@ -0,0 +1,15 @@
+// IcButtonMultiplePage displays multiple buttons for the purpose of performance testing of the IcButton component.
+import React from "react";
+import { IcButton, IcTheme, IcTypography } from "../../../../components";
+var IcButtonMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var buttons = Array.from({ length: 100 }, function (_, index) { return (React.createElement(IcButton, { key: index, style: { padding: "var(--ic-space-xs)" } },
+        "Button ",
+        index + 1)); });
+    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, "Button Multiple Page")),
+            buttons)));
+};
+export default IcButtonMultiplePage;

package/dist/performance-tests/pages/IcButton/IcButtonSingle/index.d.ts

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

package/dist/performance-tests/pages/IcButton/IcButtonSingle/index.js

@@ -0,0 +1,12 @@
+// IcButtonSinglePage displays a single button for the purpose of performance testing of the IcButton component.
+import React from "react";
+import { IcButton, IcTheme, IcTypography } from "../../../../components";
+var IcButtonSinglePage = 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, "Button Page")),
+            React.createElement(IcButton, null, "Button"))));
+};
+export default IcButtonSinglePage;

package/dist/performance-tests/pages/IcButton/IcButtonVariants/index.d.ts

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

package/dist/performance-tests/pages/IcButton/IcButtonVariants/index.js

@@ -0,0 +1,50 @@
+// IcButtonVariantsPage displays multiple button variants for the purpose of performance testing of the IcButton component.
+import React from "react";
+import { IcButton, IcTheme, IcTypography } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var ICON = (React.createElement(SlottedSVG, { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", fill: "#000000" },
+    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" })));
+var IcButtonVariantsPage = 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, "Button Variants Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "0.5rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "6px",
+            } },
+            React.createElement(IcButton, { variant: "primary" }, "Primary"),
+            React.createElement(IcButton, { variant: "primary", size: "small" }, "Primary Small"),
+            React.createElement(IcButton, { variant: "primary", size: "large" }, "Primary Large"),
+            React.createElement(IcButton, { variant: "secondary" }, "Secondary"),
+            React.createElement(IcButton, { variant: "secondary", fullWidth: true }, "Secondary full width"),
+            React.createElement(IcButton, { variant: "tertiary" }, "Tertiary"),
+            React.createElement(IcButton, { variant: "destructive" }, "Destructive"),
+            React.createElement(IcButton, { variant: "primary", disabled: true }, "Primary - disabled"),
+            React.createElement(IcButton, { variant: "secondary", loading: true }, "Loading button"),
+            React.createElement(IcButton, { variant: "primary", dropdown: true }, "Dropdown"),
+            React.createElement(IcButton, { variant: "primary" },
+                React.createElement(SlottedSVG, { slot: "left-icon", xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", fill: "#000000" },
+                    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" })),
+                "With icon"),
+            React.createElement(IcButton, { variant: "icon-primary", "aria-label": "refresh" }, ICON),
+            React.createElement(IcButton, { variant: "icon-secondary", "aria-label": "refresh" }, ICON),
+            React.createElement(IcButton, { variant: "icon-tertiary", "aria-label": "refresh" }, ICON),
+            React.createElement(IcButton, { variant: "icon-destructive", "aria-label": "refresh" }, ICON),
+            React.createElement(IcButton, { variant: "icon", "aria-label": "you can disable tooltips on icon buttons", disableTooltip: true }, ICON),
+            React.createElement(IcButton, { variant: "primary", fileUpload: true, accept: ".doc, text/plain, .json, .png", onIcFileSelection: function (event) {
+                    return console.log("Single file upload", event.detail);
+                } }, "Upload file button"),
+            React.createElement(IcButton, { variant: "primary", fileUpload: true, multiple: true, accept: ".doc, text/plain, .json, .png", onIcFileSelection: function (event) {
+                    return console.log("Multiple files upload", event.detail);
+                } }, "Upload multiple files button"),
+            React.createElement(IcButton, { variant: "primary", monochrome: true }, "Monochrome"),
+            React.createElement(IcButton, { variant: "primary", theme: "dark", monochrome: true }, "Monochrome dark theme"))));
+};
+export default IcButtonVariantsPage;

package/dist/performance-tests/pages/IcButton/IcButtonWithEvents/index.d.ts

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

package/dist/performance-tests/pages/IcButton/IcButtonWithEvents/index.js

@@ -0,0 +1,18 @@
+// IcButtonMultiplePage displays multiple buttons with events for the purpose of performance testing of the IcButton component.
+import React from "react";
+import { IcButton, IcTheme, IcTypography } from "../../../../components";
+var IcButtonEventsPage = function (_a) {
+    var theme = _a.theme;
+    var handleClick = function () { return console.log("Button clicked"); };
+    var handleFocus = function () { return console.log("Button gained focus"); };
+    var handleBlur = function () { return console.log("Button lost focus"); };
+    var buttons = Array.from({ length: 100 }, function (_, index) { return (React.createElement(IcButton, { key: index, style: { padding: "var(--ic-space-xs)" }, onClick: handleClick, onIcFocus: handleFocus, onIcBlur: handleBlur },
+        "Button ",
+        index + 1)); });
+    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, "Button With Event Listeners Page")),
+            buttons)));
+};
+export default IcButtonEventsPage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxBasicMultiple/index.d.ts

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

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxBasicMultiple/index.js

@@ -0,0 +1,44 @@
+// IcCheckboxBasicMultiplePage displays multiple basic checkbox groups for the purpose of performance testing of the IcCheckbox component.
+import React from "react";
+import { IcCheckbox, IcCheckboxGroup, IcTheme, IcTypography, } from "../../../../components";
+var COLOURS = [
+    { value: "black", label: "Black" },
+    { value: "grey", label: "Grey" },
+    { value: "blue", label: "Blue" },
+    { value: "navy", label: "Navy" },
+    { value: "purple", label: "Purple" },
+    { value: "pink", label: "Pink" },
+    { value: "orange", label: "Orange" },
+    { value: "red", label: "Red" },
+    { value: "green", label: "Green" },
+    { value: "yellow", label: "Yellow" },
+    { value: "cream", label: "Cream" },
+    { value: "white", label: "White" },
+    { value: "brown", label: "Brown" },
+    { value: "silver", label: "Silver" },
+    { value: "gold", label: "Gold" },
+    { value: "multi", label: "Multi" },
+];
+var handleCheckboxGroupChange = function (ev) {
+    console.log("onIcChange", ev.detail.value);
+};
+var handleCheckboxCheck = function (ev) {
+    console.log("onIcCheck", ev);
+};
+var Checkbox = function () { return (React.createElement(IcCheckboxGroup, { label: "Select a colour or colours", name: "default", onIcChange: handleCheckboxGroupChange }, COLOURS.map(function (colour) { return (React.createElement(IcCheckbox, { key: colour.value, value: colour.value, label: colour.label, onIcCheck: handleCheckboxCheck })); }))); };
+var IcCheckboxBasicMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var checkboxes = Array.from({ length: 10 }, function (_, index) { return (React.createElement(Checkbox, { key: index })); });
+    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, "Checkbox Basic Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } }, checkboxes)));
+};
+export default IcCheckboxBasicMultiplePage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxMultiple/index.d.ts

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

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxMultiple/index.js

@@ -0,0 +1,33 @@
+// IcCheckboxMultiplePage displays multiple checkbox groups for the purpose of performance testing of the IcCheckbox component.
+import React from "react";
+import { IcCheckbox, IcCheckboxGroup, IcTextField, IcTheme, IcTypography, } from "../../../../components";
+var handleCheckboxGroupChange = function (ev) {
+    console.log("onIcChange", ev.detail.value);
+};
+var handleCheckboxCheck = function (ev) {
+    console.log("onIcCheck", ev);
+};
+var Checkbox = function () { return (React.createElement(IcCheckboxGroup, { label: "Select your extras", name: "default", onIcChange: handleCheckboxGroupChange },
+    React.createElement(IcCheckbox, { value: "extra", label: "Extra shot (50p)", onIcCheck: handleCheckboxCheck }),
+    React.createElement(IcCheckbox, { value: "Soya milk", label: "Soya milk", checked: true }),
+    React.createElement(IcCheckbox, { value: "keep cup", label: "Takeaway cup", disabled: true }),
+    React.createElement(IcCheckbox, { value: "other", label: "Other" },
+        React.createElement(IcTextField, { slot: "additional-field", label: "Please let us know..." })),
+    React.createElement(IcCheckbox, { additionalFieldDisplay: "dynamic", value: "other", label: "Other" },
+        React.createElement(IcTextField, { slot: "additional-field", label: "Please let us know..." })))); };
+var IcCheckboxMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var checkboxes = Array.from({ length: 20 }, function (_, index) { return (React.createElement(Checkbox, { key: index })); });
+    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, "Checkbox Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } }, checkboxes)));
+};
+export default IcCheckboxMultiplePage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxSingle/index.d.ts

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

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxSingle/index.js

@@ -0,0 +1,25 @@
+// IcCheckboxSinglePage displays a single checkbox group for the purpose of performance testing of the IcCheckbox component.
+import React from "react";
+import { IcCheckbox, IcCheckboxGroup, IcTextField, IcTheme, IcTypography, } from "../../../../components";
+var IcCheckboxSinglePage = function (_a) {
+    var theme = _a.theme;
+    var handleCheckboxGroupChange = function (ev) {
+        console.log("onIcChange", ev.detail.value);
+    };
+    var handleCheckboxCheck = function (ev) {
+        console.log("onIcCheck", ev);
+    };
+    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, "Checkbox Page")),
+            React.createElement(IcCheckboxGroup, { label: "Select your extras", name: "default", onIcChange: handleCheckboxGroupChange },
+                React.createElement(IcCheckbox, { value: "extra", label: "Extra shot (50p)", onIcCheck: handleCheckboxCheck }),
+                React.createElement(IcCheckbox, { value: "Soya milk", label: "Soya milk", checked: true }),
+                React.createElement(IcCheckbox, { value: "keep cup", label: "Takeaway cup", disabled: true }),
+                React.createElement(IcCheckbox, { value: "other", label: "Other" },
+                    React.createElement(IcTextField, { slot: "additional-field", label: "Please let us know..." })),
+                React.createElement(IcCheckbox, { additionalFieldDisplay: "dynamic", value: "other", label: "Other" },
+                    React.createElement(IcTextField, { slot: "additional-field", label: "Please let us know..." }))))));
+};
+export default IcCheckboxSinglePage;

package/dist/performance-tests/pages/IcDialog/IcDialogAllOpen/index.d.ts

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

package/dist/performance-tests/pages/IcDialog/IcDialogAllOpen/index.js

@@ -0,0 +1,16 @@
+// IcDialogAllOpenPage displays multiple dialogs that are all open on page render for the purpose of performance testing of the IcDialog component.
+import React from "react";
+import { IcDialog, IcTypography, IcTheme } from "../../../../components";
+var IcDialogAllOpenPage = function (_a) {
+    var theme = _a.theme;
+    var dialogs = Array.from({ length: 20 }, function (_, index) { return (React.createElement(IcDialog, { key: index, open: true, label: "Default dialog ".concat(index + 1), heading: "This is default dialog ".concat(index + 1) },
+        React.createElement(IcTypography, null,
+            "This is default dialog ",
+            index + 1,
+            ". It is used to display information to the user."))); });
+    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, "Dialog All Open Page")),
+        dialogs));
+};
+export default IcDialogAllOpenPage;

package/dist/performance-tests/pages/IcDialog/IcDialogMultiple/index.d.ts

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

package/dist/performance-tests/pages/IcDialog/IcDialogMultiple/index.js

@@ -0,0 +1,146 @@
+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);
+};
+// IcDialogMultiplePage displays multiple dialogs for the purpose of performance testing of the IcDialog component.
+import React from "react";
+import { IcButton, IcDialog, IcTypography, IcTheme, } from "../../../../components";
+var DialogLauncher = function (_a) {
+    var id = _a.id, heading = _a.heading, label = _a.label, size = _a.size, content = _a.content, buttonText = _a.buttonText, _b = _a.closeOnBackdropClick, closeOnBackdropClick = _b === void 0 ? true : _b, _c = _a.open, open = _c === void 0 ? false : _c, _d = _a.destructive, destructive = _d === void 0 ? false : _d, _e = _a.disableWidthConstraint, disableWidthConstraint = _e === void 0 ? false : _e, _f = _a.disableHeightConstraint, disableHeightConstraint = _f === void 0 ? false : _f, _g = _a.hideCloseButton, hideCloseButton = _g === void 0 ? false : _g, onOpened = _a.onOpened, onConfirmed = _a.onConfirmed, onCancelled = _a.onCancelled, onClosed = _a.onClosed;
+    var showDialog = function () {
+        var dialog = document.querySelector("#".concat(id));
+        if (dialog) {
+            dialog.open = true;
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IcButton, { onClick: showDialog }, buttonText),
+        React.createElement(IcDialog, { id: id, heading: heading, label: label, size: size, closeOnBackdropClick: closeOnBackdropClick, open: open, destructive: destructive, disableWidthConstraint: disableWidthConstraint, disableHeightConstraint: disableHeightConstraint, hideCloseButton: hideCloseButton, onIcDialogOpened: onOpened, onIcDialogConfirmed: onConfirmed, onIcDialogCancelled: onCancelled, onIcDialogClosed: onClosed },
+            React.createElement(IcTypography, null, content))));
+};
+var dialogs = [
+    {
+        id: "auto-opening-dialog",
+        heading: "This dialog opens automatically using the open prop",
+        label: "Auto opening dialog",
+        buttonText: "Launch auto opening dialog",
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        open: true,
+    },
+    {
+        id: "small-dialog",
+        heading: "This is a small dialog",
+        label: "Small",
+        size: "small",
+        buttonText: "Launch small dialog",
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        id: "medium-dialog",
+        heading: "This is a medium dialog",
+        label: "Medium",
+        size: "medium",
+        buttonText: "Launch medium dialog",
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        id: "large-dialog",
+        heading: "This is a large dialog",
+        label: "Large",
+        size: "large",
+        buttonText: "Launch large dialog",
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        id: "scrollable-dialog",
+        heading: "This dialog has overflowing content",
+        label: "Scrollable",
+        buttonText: "Launch scrollable dialog",
+        content: (React.createElement(React.Fragment, null,
+            "What is Lorem Ipsum?",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "Why do we use it?",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).")),
+    },
+    {
+        id: "background-close-prevented-dialog",
+        heading: "This dialog can't be closed by clicking the background",
+        label: "Background close prevented",
+        buttonText: "Launch background close prevented dialog",
+        content: "You are about to add 'Americano' to your basket. Are you sure you want to continue?",
+        closeOnBackdropClick: false,
+    },
+    {
+        id: "default-dialog",
+        heading: "This is a default dialog",
+        label: "Default dialog",
+        buttonText: "Launch default dialog",
+        content: "Dialog content goes here.",
+    },
+    {
+        id: "destructive-dialog",
+        heading: "This is a destructive dialog",
+        label: "Destructive dialog",
+        buttonText: "Launch destructive dialog",
+        content: "Dialog content goes here.",
+        destructive: true,
+    },
+    {
+        id: "height-width-constraint-disabled-dialog",
+        heading: "This is a dialog where the height and width constraints are disabled",
+        label: "Height/width dialog",
+        buttonText: "Launch height/width constraint disabled dialog",
+        content: (React.createElement(React.Fragment, null,
+            "What is Lorem Ipsum?",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "Why do we use it?",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).")),
+        disableWidthConstraint: true,
+        disableHeightConstraint: true,
+        size: "large",
+    },
+    {
+        id: "no-close-button-dialog",
+        heading: "This is a dialog with close button hidden",
+        label: "No close button dialog",
+        buttonText: "Launch no close button dialog",
+        content: "Dialog content goes here.",
+        hideCloseButton: true,
+    },
+];
+var IcDialogMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var handleDialogOpened = function () { return console.log("Dialog opened"); };
+    var handleDialogClosed = function () { return console.log("Dialog closed"); };
+    var handleDialogCancelled = function () { return console.log("Dialog cancelled"); };
+    var handleDialogConfirmed = function () { return console.log("Dialog confirmed"); };
+    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, "Dialog Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "1rem",
+                padding: "var(--ic-space-md)",
+            } }, dialogs.map(function (dialog) { return (React.createElement(DialogLauncher, __assign({ key: dialog.id }, dialog, { onOpened: handleDialogOpened, onConfirmed: handleDialogConfirmed, onCancelled: handleDialogCancelled, onClosed: handleDialogClosed }))); }))));
+};
+export default IcDialogMultiplePage;

package/dist/performance-tests/pages/IcDialog/IcDialogSingle/index.d.ts

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

package/dist/performance-tests/pages/IcDialog/IcDialogSingle/index.js

@@ -0,0 +1,27 @@
+// IcDialogSinglePage displays a single dialog for the purpose of performance testing of the IcDialog component.
+import React, { useState } from "react";
+import { IcButton, IcDialog, IcTypography, IcTheme, } from "../../../../components";
+var IcDialogSinglePage = function (_a) {
+    var theme = _a.theme;
+    var _b = useState(true), openDialog = _b[0], setOpenDialog = _b[1];
+    var handleDialogOpen = function () {
+        console.log("Dialog opened");
+        setOpenDialog(true);
+    };
+    var handleDialogClose = function () {
+        console.log("Dialog closed");
+        setOpenDialog(false);
+    };
+    var handleDialogConfirmed = function () {
+        console.log("Dialog confirmed");
+        setOpenDialog(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, "Dialog Page")),
+            React.createElement(IcButton, { variant: "primary", onClick: handleDialogOpen }, "Launch auto opening dialog"),
+            React.createElement(IcDialog, { id: "auto-opening-dialog", heading: "This dialog opens automatically using the open prop", label: "Auto opening dialog", open: openDialog, onIcDialogClosed: handleDialogClose, onIcDialogConfirmed: handleDialogConfirmed },
+                React.createElement(IcTypography, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")))));
+};
+export default IcDialogSinglePage;

package/dist/performance-tests/pages/IcDialog/IcDialogSlottedContent/index.d.ts

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

package/dist/performance-tests/pages/IcDialog/IcDialogSlottedContent/index.js

@@ -0,0 +1,38 @@
+// IcDialogSlottedContentPage displays a single dialog with slotted content for the purpose of performance testing of the IcDialog component.
+import React, { useState } from "react";
+import { IcButton, IcDialog, IcTypography, IcAlert, IcLink, IcTheme, } from "../../../../components";
+var IcDialogSlottedContentPage = function (_a) {
+    var theme = _a.theme;
+    var _b = useState(true), openDialog = _b[0], setOpenDialog = _b[1];
+    var handleDialogOpen = function () {
+        console.log("Dialog opened");
+        setOpenDialog(true);
+    };
+    var handleDialogClose = function () {
+        console.log("Dialog closed");
+        setOpenDialog(false);
+    };
+    var handleAddToBasket = function () {
+        console.log("Added to basket");
+        setOpenDialog(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, "Dialog With Slotted Content Page")),
+            React.createElement(IcButton, { variant: "primary", onClick: handleDialogOpen }, "Launch dialog"),
+            React.createElement(IcDialog, { id: "auto-opening-dialog", disableWidthConstraint: true, hideDefaultControls: true, size: "large", open: openDialog, onIcDialogClosed: handleDialogClose },
+                React.createElement(IcTypography, { slot: "heading", variant: "h4" }, "This is a slotted heading"),
+                React.createElement(IcTypography, { slot: "label", variant: "label" }, "Slotted label"),
+                React.createElement(IcAlert, { variant: "info", heading: "Info", message: "This alert is for displaying information", slot: "alert" },
+                    React.createElement(IcTypography, { slot: "message" },
+                        "This is some text and",
+                        " ",
+                        React.createElement(IcLink, { href: "/" }, "this is an inline link"),
+                        " within the text."),
+                    React.createElement(IcButton, { slot: "action", variant: "secondary" }, "Button")),
+                React.createElement(IcTypography, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+                React.createElement(IcButton, { slot: "dialog-controls", variant: "secondary", onClick: handleDialogClose }, "Go back"),
+                React.createElement(IcButton, { slot: "dialog-controls", onClick: handleAddToBasket }, "Add to basket")))));
+};
+export default IcDialogSlottedContentPage;

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

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

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

@@ -0,0 +1,38 @@
+// IcFooterPage displays a footer for the purpose of performance testing of the IcFooter component.
+import React from "react";
+import { IcFooter, IcFooterLink, IcClassificationBanner, IcTheme, IcTypography, } from "../../../components";
+var IcFooterPage = 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, "Footer Page")),
+        React.createElement(React.Fragment, null,
+            React.createElement(IcClassificationBanner, { classification: "official" }),
+            React.createElement(IcFooter, { description: "The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.", caption: "All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.", style: { position: "fixed", bottom: "0", left: "0", right: "0" } },
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Get Started"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Accessibility"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Styles"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Components"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Patterns"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Design toolkit"),
+                React.createElement("div", { slot: "logo", role: "list", style: {
+                        display: "flex",
+                        gap: "var(--ic-space-lg)",
+                    } },
+                    React.createElement(IcFooterLink, { href: "/" },
+                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48px", viewBox: "0 0 24 24", width: "48px", fill: "#FFFFFF" },
+                            React.createElement("title", null, "Footer logo link 1"),
+                            React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                            React.createElement("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" }))),
+                    React.createElement(IcFooterLink, { href: "/" },
+                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48px", viewBox: "0 0 24 24", width: "48px", fill: "#FFFFFF" },
+                            React.createElement("title", null, "Footer logo link 2"),
+                            React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                            React.createElement("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" }))),
+                    React.createElement(IcFooterLink, { href: "/" },
+                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48px", viewBox: "0 0 24 24", width: "48px", fill: "#FFFFFF" },
+                            React.createElement("title", null, "Footer logo link 3"),
+                            React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                            React.createElement("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" }))))))));
+};
+export default IcFooterPage;

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

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