@ukic/react 3.5.0 → 3.6.0

package/dist/performance-tests/pages/IcSideNavigation/IcSideNavigationClosed/index.js

@@ -0,0 +1,43 @@
+// IcSideNavigationPage displays a side navigation component with navigation items and groups for performance testing of the IcSideNavigation component.
+import React from "react";
+import { IcSideNavigation, IcNavigationGroup, IcNavigationItem, IcBadge, IcTheme, IcTypography, } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var ReusableSlottedSVG = function () {
+    return (React.createElement(SlottedSVG, { slot: "icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z", fill: "currentColor" })));
+};
+var IcSideNavigationPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(React.Fragment, null,
+            React.createElement(IcTypography, { variant: "subtitle-small", style: { marginLeft: "100px", zIndex: 200 } },
+                React.createElement("h1", null, "Side Navigation Page")),
+            React.createElement(IcSideNavigation, { appTitle: "ACME", version: "v0.0.0", status: "BETA", onIcSideNavExpanded: function (ev) {
+                    return console.log("Side nav expanded: ", ev.detail.sideNavExpanded);
+                } },
+                React.createElement(SlottedSVG, { slot: "app-icon", xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                    React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                    React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" })),
+                React.createElement(IcNavigationItem, { slot: "primary-navigation", href: "/", label: "Item 1 with a very, very long label" },
+                    React.createElement(IcBadge, { label: "1", slot: "badge", variant: "light", position: "far" }),
+                    React.createElement(ReusableSlottedSVG, null)),
+                React.createElement(IcNavigationItem, { slot: "primary-navigation", href: "/", label: "Item 2", selected: true },
+                    React.createElement(ReusableSlottedSVG, null)),
+                React.createElement(IcNavigationGroup, { slot: "primary-navigation", label: "Expandable navigation group", expandable: true },
+                    React.createElement(IcNavigationItem, { href: "/", label: "Item 3" },
+                        React.createElement(ReusableSlottedSVG, null))),
+                React.createElement(IcNavigationGroup, { slot: "primary-navigation", label: "Non-expandable navigation group" },
+                    React.createElement(IcNavigationItem, { href: "/", label: "Item 4" },
+                        React.createElement(ReusableSlottedSVG, null)),
+                    React.createElement(IcNavigationItem, { href: "/", label: "Item 5" },
+                        React.createElement(ReusableSlottedSVG, null)),
+                    React.createElement(IcNavigationItem, { href: "/", label: "Item 6" },
+                        React.createElement(ReusableSlottedSVG, null)),
+                    React.createElement(IcNavigationItem, { href: "/", label: "Item 7" },
+                        React.createElement(ReusableSlottedSVG, null)),
+                    React.createElement(IcNavigationItem, { href: "/", label: "Item 8" },
+                        React.createElement(ReusableSlottedSVG, null))),
+                React.createElement(IcNavigationItem, { slot: "secondary-navigation", href: "/", label: "Settings" },
+                    React.createElement(ReusableSlottedSVG, null))))));
+};
+export default IcSideNavigationPage;

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

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

package/dist/performance-tests/pages/IcSideNavigation/IcSideNavigationExpanded/index.js

@@ -0,0 +1,42 @@
+// IcSideNavigationExpandedPage displays a side navigation component with navigation items and groups for performance testing of the IcSideNavigation component.
+import React from "react";
+import { IcSideNavigation, IcNavigationGroup, IcNavigationItem, IcBadge, IcTheme, IcTypography, } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var ReusableSlottedSVG = function () {
+    return (React.createElement(SlottedSVG, { slot: "icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z", fill: "currentColor" })));
+};
+var IcSideNavigationExpandedPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small" },
+            React.createElement("h1", null, "Side Navigation Expanded Page")),
+        React.createElement(IcSideNavigation, { appTitle: "ACME", version: "v0.0.0", status: "BETA", expanded: true, onIcSideNavExpanded: function (event) {
+                return console.log("Side nav expanded: ", event.detail.sideNavExpanded);
+            } },
+            React.createElement(SlottedSVG, { slot: "app-icon", xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" })),
+            React.createElement(IcNavigationItem, { slot: "primary-navigation", href: "/", label: "Item 1 with a very, very long label" },
+                React.createElement(ReusableSlottedSVG, null)),
+            React.createElement(IcNavigationItem, { slot: "primary-navigation", href: "/", label: "Item 2", selected: true },
+                React.createElement(IcBadge, { label: "1", slot: "badge", variant: "light", position: "far" }),
+                React.createElement(ReusableSlottedSVG, null)),
+            React.createElement(IcNavigationGroup, { slot: "primary-navigation", label: "Expandable navigation group", expandable: true },
+                React.createElement(IcNavigationItem, { href: "/", label: "Item 3" },
+                    React.createElement(ReusableSlottedSVG, null))),
+            React.createElement(IcNavigationGroup, { slot: "primary-navigation", label: "Non-expandable navigation group" },
+                React.createElement(IcNavigationItem, { href: "/", label: "Item 4" },
+                    React.createElement(ReusableSlottedSVG, null)),
+                React.createElement(IcNavigationItem, { href: "/", label: "Item 5" },
+                    React.createElement(ReusableSlottedSVG, null)),
+                React.createElement(IcNavigationItem, { href: "/", label: "Item 6" },
+                    React.createElement(ReusableSlottedSVG, null)),
+                React.createElement(IcNavigationItem, { href: "/", label: "Item 7" },
+                    React.createElement(ReusableSlottedSVG, null)),
+                React.createElement(IcNavigationItem, { href: "/", label: "Item 8" },
+                    React.createElement(ReusableSlottedSVG, null))),
+            React.createElement(IcNavigationItem, { slot: "secondary-navigation", href: "/", label: "Settings" },
+                React.createElement(ReusableSlottedSVG, null)))));
+};
+export default IcSideNavigationExpandedPage;

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

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

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

@@ -0,0 +1,29 @@
+// IcStepperPage displays a stepper component with multiple steps for performance testing of the IcStepper component.
+import React, { useEffect } from "react";
+import { IcStepper, IcStep, IcTheme, IcTypography } from "../../../components";
+var IcStepperPage = function (_a) {
+    var theme = _a.theme;
+    useEffect(function () {
+        var errorHandler = function (e) {
+            if (e.message.includes("ResizeObserver loop completed with undelivered notifications")) {
+                var resizeObserverErr = document.getElementById("webpack-dev-server-client-overlay");
+                if (resizeObserverErr) {
+                    resizeObserverErr.style.display = "none";
+                }
+            }
+        };
+        window.addEventListener("error", errorHandler);
+        return function () {
+            window.removeEventListener("error", errorHandler);
+        };
+    }, []);
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small" },
+            React.createElement("h1", null, "Stepper Page")),
+        React.createElement(IcStepper, { aligned: "left", connectorWidth: 200 },
+            React.createElement(IcStep, { heading: "First" }),
+            React.createElement(IcStep, { heading: "Second With a Very Long Title", subheading: "Optional subtitle that is long and should wrap", type: "current" }),
+            React.createElement(IcStep, { heading: "Third", type: "disabled" }),
+            React.createElement(IcStep, { heading: "Fourth title that is long and should wrap", subheading: "Optional Subtitle", type: "completed" }))));
+};
+export default IcStepperPage;

package/dist/performance-tests/pages/IcToast/IcToastMultiple/index.d.ts

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

package/dist/performance-tests/pages/IcToast/IcToastMultiple/index.js

@@ -0,0 +1,30 @@
+// IcToastMultiplePage displays multiple toast components for performance testing of the IcToast component.
+import React, { useRef, useEffect } from "react";
+import { IcToast, IcToastRegion, IcTheme } from "../../../../components";
+var IcToastMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var toastRegionEl = useRef(null);
+    var toastRefs = Array.from({ length: 20 }, function () {
+        return useRef(null);
+    });
+    var queueIndex = useRef(0);
+    useEffect(function () {
+        if (toastRegionEl.current && toastRefs[0].current) {
+            toastRegionEl.current.openToast = toastRefs[0].current;
+        }
+    }, [toastRefs]);
+    var handleDismiss = function () {
+        queueIndex.current += 1;
+        if (queueIndex.current < toastRefs.length &&
+            toastRegionEl.current &&
+            toastRefs[queueIndex.current]) {
+            toastRefs[queueIndex.current].current.setVisible();
+        }
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcToastRegion, { ref: toastRegionEl }, toastRefs.map(function (ref, i) { return (React.createElement(IcToast, { key: i, heading: "Your coffee is ready", ref: ref, onIcDismiss: function () {
+                console.log("Toast ".concat(i + 1, " dismissed"));
+                handleDismiss();
+            } })); }))));
+};
+export default IcToastMultiplePage;

package/dist/performance-tests/pages/IcToast/IcToastSingle/index.d.ts

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

package/dist/performance-tests/pages/IcToast/IcToastSingle/index.js

@@ -0,0 +1,23 @@
+// IcToastSinglePage displays a single toast component for performance testing of the IcToast component.
+import React, { useEffect, useRef } from "react";
+import { IcToastRegion, IcToast, IcTheme } from "../../../../components";
+var AutoLoadToast = function () {
+    var toastRegionEl = useRef(null);
+    var shareToastEl = useRef(null);
+    useEffect(function () {
+        if (toastRegionEl.current && shareToastEl.current) {
+            toastRegionEl.current.openToast = shareToastEl.current;
+        }
+    }, []);
+    var handleToastDismiss = function () {
+        console.log("Toast dismissed");
+    };
+    return (React.createElement(IcToastRegion, { ref: toastRegionEl },
+        React.createElement(IcToast, { heading: "My toast heading", message: "The toast message.", ref: shareToastEl, onIcDismiss: handleToastDismiss })));
+};
+var IcToastSinglePage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(AutoLoadToast, null)));
+};
+export default IcToastSinglePage;

package/dist/performance-tests/pages/IcToast/IcToastVariants/index.d.ts

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

package/dist/performance-tests/pages/IcToast/IcToastVariants/index.js

@@ -0,0 +1,87 @@
+// IcToastVariantsPage displays multiple variants of the toast component for performance testing of the IcToast component.
+import React, { useRef, useEffect } from "react";
+import { IcToast, IcToastRegion, IcButton, IcTheme, } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var IcToastVariantsPage = function (_a) {
+    var theme = _a.theme;
+    var toastRegionEl = useRef(null);
+    var toastEl = useRef(null);
+    var errorToastEl = useRef(null);
+    var successToastEl = useRef(null);
+    var infoToastEl = useRef(null);
+    var warningToastEl = useRef(null);
+    var neutralToastEl = useRef(null);
+    var autoDismissToastEl = useRef(null);
+    var multiLineMessageToastEl = useRef(null);
+    var queueIndex = useRef(0);
+    var toastQueue = [
+        toastEl,
+        errorToastEl,
+        successToastEl,
+        infoToastEl,
+        warningToastEl,
+        neutralToastEl,
+        autoDismissToastEl,
+        multiLineMessageToastEl,
+    ];
+    useEffect(function () {
+        if (toastRegionEl.current && toastQueue[0].current) {
+            toastRegionEl.current.openToast = toastQueue[0].current;
+        }
+    }, []);
+    var handleDismiss = function () {
+        queueIndex.current += 1;
+        if (queueIndex.current < toastQueue.length &&
+            toastRegionEl.current &&
+            toastQueue[queueIndex.current]) {
+            toastQueue[queueIndex.current].current.setVisible();
+        }
+    };
+    var handleDefaultToastDismiss = function () {
+        console.log("Default toast dismissed");
+        handleDismiss();
+    };
+    var handleErrorToastDismiss = function () {
+        console.log("Error toast dismissed");
+        handleDismiss();
+    };
+    var handleSuccessToastDismiss = function () {
+        console.log("Success toast dismissed");
+        handleDismiss();
+    };
+    var handleInfoToastDismiss = function () {
+        console.log("Info toast dismissed");
+        handleDismiss();
+    };
+    var handleWarningToastDismiss = function () {
+        console.log("Warning toast dismissed");
+        handleDismiss();
+    };
+    var handleNeutralToastDismiss = function () {
+        console.log("Neutral toast dismissed");
+        handleDismiss();
+    };
+    var handleAutoDismissToastDismiss = function () {
+        console.log("Auto dismiss toast dismissed");
+        handleDismiss();
+    };
+    var handleMultiLineMessageToastDismiss = function () {
+        console.log("Multiline message toast dismissed");
+        handleDismiss();
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcToastRegion, { ref: toastRegionEl },
+            React.createElement(IcToast, { heading: "Your coffee is ready", ref: toastEl, onIcDismiss: handleDefaultToastDismiss }),
+            React.createElement(IcToast, { heading: "There is no coffee left", variant: "error", ref: errorToastEl, onIcDismiss: handleErrorToastDismiss },
+                React.createElement(IcButton, { slot: "action", size: "small" }, "Retry")),
+            React.createElement(IcToast, { heading: "Your coffee is ready", message: "Please dismiss and collect", variant: "success", ref: successToastEl, onIcDismiss: handleSuccessToastDismiss }),
+            React.createElement(IcToast, { heading: "Your coffee is ready", message: "Please dismiss and collect", variant: "info", ref: infoToastEl, onIcDismiss: handleInfoToastDismiss }),
+            React.createElement(IcToast, { heading: "Coffee is running low", variant: "warning", dismissButtonAriaLabel: "Dismiss me", ref: warningToastEl, onIcDismiss: handleWarningToastDismiss }),
+            React.createElement(IcToast, { heading: "Your coffee is on the way", variant: "neutral", neutralIconAriaLabel: "Your coffee is being prepared", ref: neutralToastEl, onIcDismiss: handleNeutralToastDismiss },
+                React.createElement(SlottedSVG, { slot: "neutral-icon" },
+                    React.createElement("title", null, "coffee-outline"),
+                    React.createElement("path", { d: "M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" }))),
+            React.createElement(IcToast, { heading: "Your coffee is ready", dismissMode: "automatic", autoDismissTimeout: 10000, ref: autoDismissToastEl, onIcDismiss: handleAutoDismissToastDismiss }),
+            React.createElement(IcToast, { heading: "Your coffee is ready", message: "Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold. Don't delay! We wouldn't want you to lose out on your fantastic coffee now would we?", ref: multiLineMessageToastEl, onIcDismiss: handleMultiLineMessageToastDismiss }))));
+};
+export default IcToastVariantsPage;

package/dist/performance-tests/pages/IcTopNavigation/IcTopNavigationBasic/index.d.ts

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

package/dist/performance-tests/pages/IcTopNavigation/IcTopNavigationBasic/index.js

@@ -0,0 +1,17 @@
+// IcTopNavigationBasicPage displays a basic top navigation component for performance testing of the IcTopNavigation component.
+import React from "react";
+import { IcTopNavigation, IcTheme, IcTypography } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var IcTopNavigationBasicPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small" },
+            React.createElement("h1", null, "Top Navigation Basic Page")),
+        React.createElement(IcTopNavigation, { appTitle: "ApplicationName", status: "alpha", version: "v0.0.7", onIcTopNavResized: function (event) {
+                return console.log("Top nav resized: ", event.detail.size);
+            } },
+            React.createElement(SlottedSVG, { slot: "app-icon", xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" })))));
+};
+export default IcTopNavigationBasicPage;

package/dist/performance-tests/pages/IcTopNavigation/IcTopNavigationWithNavigation/index.d.ts

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

package/dist/performance-tests/pages/IcTopNavigation/IcTopNavigationWithNavigation/index.js

@@ -0,0 +1,35 @@
+// IcTopNavigationPage displays a top navigation component for performance testing of the IcTopNavigation component.
+import React from "react";
+import { IcTopNavigation, IcSearchBar, IcNavigationGroup, IcNavigationItem, IcTheme, IcTypography, } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var IcTopNavigationPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small" },
+            React.createElement("h1", null, "Top Navigation Page")),
+        React.createElement(IcTopNavigation, { appTitle: "ApplicationName", status: "alpha", version: "v0.0.7", onIcTopNavResized: function (event) {
+                return console.log("Top nav resized: ", event.detail.size);
+            } },
+            React.createElement(SlottedSVG, { slot: "app-icon", xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" })),
+            React.createElement(IcSearchBar, { slot: "search", placeholder: "Search", label: "Search" }),
+            React.createElement(IcNavigationGroup, { label: "Navigation Group", expandable: true, slot: "navigation" },
+                React.createElement(IcNavigationItem, { label: "One", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Two", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Three", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Four", href: "/" })),
+            React.createElement(IcNavigationGroup, { label: "Second Nav Group", slot: "navigation" },
+                React.createElement(IcNavigationItem, { label: "One", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Two", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Three", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Four", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Five", href: "/", selected: true }),
+                React.createElement(IcNavigationItem, { label: "Six", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Seven", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Eight", href: "/" })),
+            React.createElement(IcNavigationGroup, { label: "Third Nav Group", expandable: true, slot: "navigation" },
+                React.createElement(IcNavigationItem, { label: "One", href: "/" }),
+                React.createElement(IcNavigationItem, { label: "Two", href: "/" })))));
+};
+export default IcTopNavigationPage;

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "React-wrapped web components compiled using StencilJS",
   "author": "mi6",
   "bugs": {
@@ -46,7 +46,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ukic/web-components": "^3.5.0"
+    "@ukic/web-components": "^3.6.0"
   },
   "devDependencies": {
     "@ag-grid-community/styles": "^33.0.3",
@@ -114,5 +114,5 @@
   },
   "license": "MIT",
   "packageManager": "^npm@10.9.2",
-  "gitHead": "b2e5e8e0ebf877277c71d9b8c72edde315c70fe5"
+  "gitHead": "f8f06110b168e3887dc77705152f18a33ad948f1"
 }

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

@@ -1,3 +0,0 @@
-import React from "react";
-declare const IcButtonPage: () => React.JSX.Element;
-export default IcButtonPage;

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

@@ -1,8 +0,0 @@
-import React from "react";
-import { IcButton } from "../../../components";
-var IcButtonPage = function () {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("h1", null, "Button Page"),
-        React.createElement(IcButton, null, "Button")));
-};
-export default IcButtonPage;

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

@@ -1,3 +0,0 @@
-import React from "react";
-declare const IcCheckboxPage: () => React.JSX.Element;
-export default IcCheckboxPage;

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

@@ -1,15 +0,0 @@
-import React from "react";
-import { IcCheckbox, IcCheckboxGroup, IcTextField } from "../../../components";
-var IcCheckboxPage = function () {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("h1", null, "Checkbox Page"),
-        React.createElement(IcCheckboxGroup, { label: "Select your extras", name: "default", onIcChange: function (ev) { return console.log("onIcChange", ev.detail.value); } },
-            React.createElement(IcCheckbox, { value: "extra", label: "Extra shot (50p)", onIcCheck: function (ev) { return console.log("onIcCheck", ev); } }),
-            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 IcCheckboxPage;

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

@@ -1,3 +0,0 @@
-import React from "react";
-declare const MultipleIcButtonsPage: () => React.JSX.Element;
-export default MultipleIcButtonsPage;

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

@@ -1,18 +0,0 @@
-import React from "react";
-import { IcButton } from "../../../components";
-var MultipleIcButtonsPage = function () {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("h1", null, "Multiple Buttons Page"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button"),
-        React.createElement(IcButton, null, "Button")));
-};
-export default MultipleIcButtonsPage;