@arc-ui/components 12.0.0-beta.18 → 12.0.0-beta.20

package/lib/index.mjs

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import React__default, { createContext, useContext, useState, useId as useId$1, useMemo, useEffect, useRef, forwardRef, isValidElement, cloneElement, useCallback, useReducer, useLayoutEffect, createElement, Children, Fragment as Fragment$1, Suspense } from 'react';
+import React__default, { createContext, useContext, useState, useId as useId$1, useRef, useEffect, forwardRef, isValidElement, cloneElement, useMemo, useCallback, useReducer, useLayoutEffect, createElement, Children, Fragment as Fragment$1, Suspense, useImperativeHandle } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { flushSync, createPortal } from 'react-dom';
@@ -403,10 +403,10 @@ var Icon$1 = function (_a) {
 var colors$1 = [
     "auto",
     "brand",
+    "brand-alt",
     "statusRed",
     "statusAmber",
     "statusGreen",
-    "gradient",
 ];
 
 var ThemeIcon = function (_a) {
@@ -622,7 +622,9 @@ var Avatar = function (_a) {
     var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
             "arc-Avatar--img": Boolean(img),
         }) }, filterAttrs(props));
-    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React__default.createElement("div", __assign({}, wrapperAttrs), children); } },
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", __assign({}, wrapperAttrs), children),
+            ariaLabel && React__default.createElement(VisuallyHidden$2, null, ariaLabel))); } },
         React__default.createElement(AvatarContent, { size: size, img: img, initials: initials })));
 };
 
@@ -650,152 +652,6 @@ var Badge = function (_a) {
     return (React__default.createElement("div", __assign({ className: classNames("arc-Badge", suffixModifier("arc-Badge--state", state)) }, (ariaLabel && { "aria-label": ariaLabel }), (ariaRole && { role: ariaRole }), filterAttrs(props)), children));
 };
 
-/**
- * Do not edit directly
- * Generated on Mon, 19 May 2025 14:54:16 GMT
- */
-var ArcSizeBreakpointsXs = "320px";
-var ArcSizeBreakpointsS = "636px";
-var ArcSizeBreakpointsM = "768px";
-var ArcSizeBreakpointsL = "1024px";
-var ArcSizeBreakpointsXl = "1280px";
-var ArcSizeBreakpointsXxl = "1440px";
-
-/**
- * Optionally define ariaDescribedBy if errorMessage or helper exist.
- */
-var useAriaDescribedby = function (_a) {
-    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
-    if (!id) {
-        return {
-            ariaDescribedby: undefined,
-            idHelper: undefined,
-            idError: undefined,
-            idDisclosure: undefined,
-        };
-    }
-    var ariaDescribedbyArr = [];
-    if (errorMessage) {
-        ariaDescribedbyArr.push(idError);
-    }
-    if (helper) {
-        ariaDescribedbyArr.push(idHelper);
-    }
-    if (disclosureText) {
-        ariaDescribedbyArr.push(idDisclosure);
-    }
-    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
-    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
-};
-
-/**
- * Infer the correct inputMode, pattern and type if specifying a `number` type.
- */
-var useNumericInput = function (props) {
-    var type = props.type === "number" ? "text" : props.type;
-    var inputMode = props.inputMode;
-    if (!props.inputMode) {
-        if (props.type === "email") {
-            inputMode = "email";
-        }
-        else if (props.type === "number") {
-            inputMode = "numeric";
-        }
-        else if (props.type === "tel") {
-            inputMode = "tel";
-        }
-        else if (props.type === "url") {
-            inputMode = "url";
-        }
-    }
-    var pattern = props.pattern;
-    if (!props.pattern && props.type === "number") {
-        pattern = "[0-9]*";
-    }
-    return { inputMode: inputMode, pattern: pattern, type: type };
-};
-
-var usePagination = function (pageCount, selectedPage) {
-    var formatValues = function (range) {
-        return range.map(function (value) { return value.toString(); });
-    };
-    return useMemo(function () {
-        if (pageCount > 7 && selectedPage < 5) {
-            // show 1 - 5 the right dots are visible.
-            return formatValues(__spreadArray(__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
-                "...",
-                pageCount,
-            ], false));
-        }
-        if (pageCount > 7 && selectedPage >= pageCount - 3) {
-            // show numbers to the end but the left dots are visible
-            return formatValues(__spreadArray([
-                1,
-                "..."
-            ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
-        }
-        if (pageCount > 7 && selectedPage >= 5 && selectedPage < pageCount - 3) {
-            // show selected page with one number either side and both the left and the right dots are visible.
-            return formatValues([
-                1,
-                "...",
-                selectedPage - 1,
-                selectedPage,
-                selectedPage + 1,
-                "...",
-                pageCount,
-            ]);
-        }
-        // show all pages from pageCount
-        return formatValues(Array.from({ length: pageCount }, function (_value, index) { return index + 1; }));
-    }, [pageCount, selectedPage]);
-};
-
-var useThemeElement = function () {
-    var _a = useState(undefined), themeElement = _a[0], setElement = _a[1];
-    var setThemeElement = function (el) {
-        el &&
-            setElement(el.closest(".arc-ds-sys-theme") || undefined);
-    };
-    return [themeElement, setThemeElement];
-};
-
-/**
- * @typedef MediaQueryOutputs
- * @param {boolean} matches - does the document match the media query?
- */
-/**
- * Handle with care!
- *
- * If you need to change something in the browser based on @media query, you
- * probably don’t need this hook. Use CSS media queries instead.
- *
- * Sometimes UI requirements are not achievable with CSS media queries alone. In
- * these rare cases, use this hook to make media query matches available
- * to React JavaScript code.
- *
- * @param {string} mediaQuery - the media query to parse
- * @returns {MediaQueryOutputs}
- */
-var useMediaQuery = function (mediaQuery) {
-    var mediaQueryList = typeof window !== "undefined" ? window.matchMedia(mediaQuery) : undefined;
-    var _a = useState(false), matches = _a[0], setMatches = _a[1];
-    useEffect(function () {
-        setMatches(typeof window !== "undefined"
-            ? window.matchMedia(mediaQuery).matches
-            : false);
-    }, [mediaQuery]);
-    useEffect(function () {
-        var onMatchMedia = function (event) { return setMatches(event.matches); };
-        // Using deprecated addListener methods here for IE & Safari 13 support
-        if (mediaQueryList) {
-            mediaQueryList.addListener(onMatchMedia);
-        }
-        return function () { return mediaQueryList && mediaQueryList.removeListener(onMatchMedia); };
-    }, [mediaQueryList]);
-    return matches;
-};
-
 /**
  * Use `VerticalSpace` to create vertical space between components.
  */
@@ -871,9 +727,28 @@ var BannerImage = function (_a) {
         sources.map(function (source) { return React__default.createElement("source", __assign({ key: source.srcSet }, source)); })));
 };
 
+var Visible = function (_a) {
+    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = __rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Visible", {
+            "arc-Visible--xs": xs,
+            "arc-Visible--s": s,
+            "arc-Visible--m": m,
+            "arc-Visible--l": l,
+            "arc-Visible--xl": xl,
+        }) }, filterAttrs(props)), children));
+};
+
+var BannerRow = function (_a) {
+    var isReversed = _a.isReversed, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Visible, { xs: true, s: true },
+            React__default.createElement(GridRow, { "data-testid": "arc-TemplateBanner-gridRow-mobile" }, children)),
+        React__default.createElement(Visible, { m: true, l: true, xl: true },
+            React__default.createElement(GridRow, { "data-testid": "arc-TemplateBanner-gridRow-desktop", direction: isReversed ? "row-reverse" : "row" }, children))));
+};
+
 var TemplateBanner = function (_a) {
     var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 454 : _d, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -886,7 +761,6 @@ var TemplateBanner = function (_a) {
     };
     var isContained = type === "contained";
     var borderWidth = isContained && !isElevated ? "thin" : undefined;
-    var direction = isReversed && isMinWidthArcBreakpointM ? "row-reverse" : "row";
     var columnWithImgWidths = {
         "1/0": 12,
         "2/3": 8,
@@ -897,7 +771,7 @@ var TemplateBanner = function (_a) {
         }) }, filterAttrs(props)),
         React__default.createElement(Box, { isBorderRadius: true, "data-testid": "arc-TemplateBanner-box", borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: !isContained },
             React__default.createElement(Grid, { isGutterless: true, isFluid: true },
-                React__default.createElement(GridRow, { "data-testid": "arc-TemplateBanner-gridRow", direction: direction },
+                React__default.createElement(BannerRow, { "data-testid": "arc-TemplateBanner-gridRow", isReversed: isReversed },
                     React__default.createElement(GridCol, { "data-testid": "arc-TemplateBanner-contentCol", align: {
                             m: alignment === "start" ? "start" : "center",
                             xs: !img || contentRatio === "1/0" ? "center" : "start",
@@ -906,7 +780,7 @@ var TemplateBanner = function (_a) {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             label && (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
+                                React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
                                 React__default.createElement(VerticalSpace, { size: "8" }))),
                             React__default.createElement(Heading, { level: headingLevel, size: headingSize }, heading),
                             text && (React__default.createElement(React__default.Fragment, null,
@@ -1657,6 +1531,7 @@ var Breadcrumbs = function (_a) {
         window.addEventListener("resize", handleResize);
         return function () {
             window.removeEventListener("resize", handleResize);
+            handleResize.cancel();
         };
     }, []);
     var items = React__default.Children.toArray(children);
@@ -1779,7 +1654,7 @@ var ButtonV2 = forwardRef(function (_a, ref) {
             case "compact":
             case "secondary":
             case "tertiary":
-                return surface === "light" ? "gradient" : "auto";
+                return "brand-alt";
             default:
                 return "auto";
         }
@@ -2006,77 +1881,223 @@ function startOfMonth(dirtyDate) {
   return date;
 }
 
-var containsDate = function (dates, compareDate) {
-    return dates.map(function (date) { return date.getTime(); }).includes(compareDate.getTime());
-};
-
 /**
- * @name getMonth
- * @category Month Helpers
- * @summary Get the month of the given date.
- *
- * @description
- * Get the month of the given date.
- *
- * @param {Date|Number} date - the given date
- * @returns {Number} the month
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Which month is 29 February 2012?
- * const result = getMonth(new Date(2012, 1, 29))
- * //=> 1
+ * Do not edit directly
+ * Generated on Mon, 21 Jul 2025 12:02:37 GMT
  */
-function getMonth(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var month = date.getMonth();
-  return month;
-}
+var ArcSizeBreakpointsXs = "320px";
+var ArcSizeBreakpointsS = "636px";
+var ArcSizeBreakpointsM = "768px";
+var ArcSizeBreakpointsL = "1024px";
+var ArcSizeBreakpointsXl = "1280px";
+var ArcSizeBreakpointsXxl = "1440px";
 
 /**
- * @name getYear
- * @category Year Helpers
- * @summary Get the year of the given date.
- *
- * @description
- * Get the year of the given date.
- *
- * @param {Date|Number} date - the given date
- * @returns {Number} the year
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Which year is 2 July 2014?
- * const result = getYear(new Date(2014, 6, 2))
- * //=> 2014
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
-function getYear(dirtyDate) {
-  requiredArgs(1, arguments);
-  return toDate(dirtyDate).getFullYear();
-}
+var useAriaDescribedby = function (_a) {
+    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined,
+            idDisclosure: undefined,
+        };
+    }
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    if (disclosureText) {
+        ariaDescribedbyArr.push(idDisclosure);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
+};
 
 /**
- * @name getDaysInMonth
- * @category Month Helpers
- * @summary Get the number of days in a month of the given date.
- *
- * @description
- * Get the number of days in a month of the given date.
- *
- * @param {Date|Number} date - the given date
- * @returns {Number} the number of days in a month
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // How many days are in February 2000?
- * const result = getDaysInMonth(new Date(2000, 1))
- * //=> 29
+ * Infer the correct inputMode, pattern and type if specifying a `number` type.
  */
-function getDaysInMonth(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var year = date.getFullYear();
+var useNumericInput = function (props) {
+    var type = props.type === "number" ? "text" : props.type;
+    var inputMode = props.inputMode;
+    if (!props.inputMode) {
+        if (props.type === "email") {
+            inputMode = "email";
+        }
+        else if (props.type === "number") {
+            inputMode = "numeric";
+        }
+        else if (props.type === "tel") {
+            inputMode = "tel";
+        }
+        else if (props.type === "url") {
+            inputMode = "url";
+        }
+    }
+    var pattern = props.pattern;
+    if (!props.pattern && props.type === "number") {
+        pattern = "[0-9]*";
+    }
+    return { inputMode: inputMode, pattern: pattern, type: type };
+};
+
+var usePagination = function (pageCount, selectedPage) {
+    var formatValues = function (range) {
+        return range.map(function (value) { return value.toString(); });
+    };
+    return useMemo(function () {
+        if (pageCount > 7 && selectedPage < 5) {
+            // show 1 - 5 the right dots are visible.
+            return formatValues(__spreadArray(__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
+                "...",
+                pageCount,
+            ], false));
+        }
+        if (pageCount > 7 && selectedPage >= pageCount - 3) {
+            // show numbers to the end but the left dots are visible
+            return formatValues(__spreadArray([
+                1,
+                "..."
+            ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
+        }
+        if (pageCount > 7 && selectedPage >= 5 && selectedPage < pageCount - 3) {
+            // show selected page with one number either side and both the left and the right dots are visible.
+            return formatValues([
+                1,
+                "...",
+                selectedPage - 1,
+                selectedPage,
+                selectedPage + 1,
+                "...",
+                pageCount,
+            ]);
+        }
+        // show all pages from pageCount
+        return formatValues(Array.from({ length: pageCount }, function (_value, index) { return index + 1; }));
+    }, [pageCount, selectedPage]);
+};
+
+var useThemeElement = function () {
+    var _a = useState(undefined), themeElement = _a[0], setElement = _a[1];
+    var setThemeElement = function (el) {
+        el &&
+            setElement(el.closest(".arc-ds-sys-theme") || undefined);
+    };
+    return [themeElement, setThemeElement];
+};
+
+/**
+ * @typedef MediaQueryOutputs
+ * @param {boolean} matches - does the document match the media query?
+ */
+/**
+ * Handle with care!
+ *
+ * If you need to change something in the browser based on @media query, you
+ * probably don’t need this hook. Use CSS media queries instead.
+ *
+ * Sometimes UI requirements are not achievable with CSS media queries alone. In
+ * these rare cases, use this hook to make media query matches available
+ * to React JavaScript code.
+ *
+ * @param {string} mediaQuery - the media query to parse
+ * @returns {MediaQueryOutputs}
+ */
+var useMediaQuery = function (mediaQuery) {
+    var mediaQueryList = typeof window !== "undefined" ? window.matchMedia(mediaQuery) : undefined;
+    var _a = useState(false), matches = _a[0], setMatches = _a[1];
+    useEffect(function () {
+        setMatches(typeof window !== "undefined"
+            ? window.matchMedia(mediaQuery).matches
+            : false);
+    }, [mediaQuery]);
+    useEffect(function () {
+        var onMatchMedia = function (event) { return setMatches(event.matches); };
+        // Using deprecated addListener methods here for IE & Safari 13 support
+        if (mediaQueryList) {
+            mediaQueryList.addListener(onMatchMedia);
+        }
+        return function () { return mediaQueryList && mediaQueryList.removeListener(onMatchMedia); };
+    }, [mediaQueryList]);
+    return matches;
+};
+
+var containsDate = function (dates, compareDate) {
+    return dates.map(function (date) { return date.getTime(); }).includes(compareDate.getTime());
+};
+
+/**
+ * @name getMonth
+ * @category Month Helpers
+ * @summary Get the month of the given date.
+ *
+ * @description
+ * Get the month of the given date.
+ *
+ * @param {Date|Number} date - the given date
+ * @returns {Number} the month
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Which month is 29 February 2012?
+ * const result = getMonth(new Date(2012, 1, 29))
+ * //=> 1
+ */
+function getMonth(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var month = date.getMonth();
+  return month;
+}
+
+/**
+ * @name getYear
+ * @category Year Helpers
+ * @summary Get the year of the given date.
+ *
+ * @description
+ * Get the year of the given date.
+ *
+ * @param {Date|Number} date - the given date
+ * @returns {Number} the year
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Which year is 2 July 2014?
+ * const result = getYear(new Date(2014, 6, 2))
+ * //=> 2014
+ */
+function getYear(dirtyDate) {
+  requiredArgs(1, arguments);
+  return toDate(dirtyDate).getFullYear();
+}
+
+/**
+ * @name getDaysInMonth
+ * @category Month Helpers
+ * @summary Get the number of days in a month of the given date.
+ *
+ * @description
+ * Get the number of days in a month of the given date.
+ *
+ * @param {Date|Number} date - the given date
+ * @returns {Number} the number of days in a month
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // How many days are in February 2000?
+ * const result = getDaysInMonth(new Date(2000, 1))
+ * //=> 29
+ */
+function getDaysInMonth(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var year = date.getFullYear();
   var monthIndex = date.getMonth();
   var lastDayOfMonth = new Date(0);
   lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
@@ -5146,7 +5167,7 @@ var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
  */
 
 const BtIconChevronDownMid =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z' clip-rule='evenodd'/%3e%3c/svg%3e";
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z'/%3e%3c/svg%3e";
 
 var CalendarDateSelect = function (_a) {
     var ariaLabel = _a.ariaLabel, onChange = _a.onChange, name = _a.name, value = _a.value, displayValue = _a.displayValue, options = _a.options;
@@ -7643,18 +7664,18 @@ function useEmblaCarousel(options = {}, plugins = []) {
 useEmblaCarousel.globalOptions = undefined;
 
 var XS_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsXs, ")");
-var S_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsS, ")");
-var M_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsM, ")");
-var L_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsL, ")");
-var XL_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsXl, ")");
+var S_BREAKPOINT$1 = "(min-width: ".concat(ArcSizeBreakpointsS, ")");
+var M_BREAKPOINT$1 = "(min-width: ".concat(ArcSizeBreakpointsM, ")");
+var L_BREAKPOINT$1 = "(min-width: ".concat(ArcSizeBreakpointsL, ")");
+var XL_BREAKPOINT$1 = "(min-width: ".concat(ArcSizeBreakpointsXl, ")");
 
 var getOptions = function (itemsToScroll, loop, responsive) {
     var breakpoints = [
         [XS_BREAKPOINT, "xs"],
-        [S_BREAKPOINT, "s"],
-        [M_BREAKPOINT, "m"],
-        [L_BREAKPOINT, "l"],
-        [XL_BREAKPOINT, "xl"],
+        [S_BREAKPOINT$1, "s"],
+        [M_BREAKPOINT$1, "m"],
+        [L_BREAKPOINT$1, "l"],
+        [XL_BREAKPOINT$1, "xl"],
     ];
     var breakpointOptions = breakpoints.reduce(function (acc, _a) {
         var _b;
@@ -7725,10 +7746,10 @@ var Carousel = function (_a) {
     var _k = useState(true), prevButtonEnabled = _k[0], setPrevButtonEnabled = _k[1];
     var _l = useState(true), nextButtonEnabled = _l[0], setNextButtonEnabled = _l[1];
     var isMinWidthArcBreakpointXs = useMediaQuery(XS_BREAKPOINT);
-    var isMinWidthArcBreakpointS = useMediaQuery(S_BREAKPOINT);
-    var isMinWidthArcBreakpointM = useMediaQuery(M_BREAKPOINT);
-    var isMinWidthArcBreakpointL = useMediaQuery(L_BREAKPOINT);
-    var isMinWidthArcBreakpointXl = useMediaQuery(XL_BREAKPOINT);
+    var isMinWidthArcBreakpointS = useMediaQuery(S_BREAKPOINT$1);
+    var isMinWidthArcBreakpointM = useMediaQuery(M_BREAKPOINT$1);
+    var isMinWidthArcBreakpointL = useMediaQuery(L_BREAKPOINT$1);
+    var isMinWidthArcBreakpointXl = useMediaQuery(XL_BREAKPOINT$1);
     var slideWidth = getSlideWidth({
         screenSizes: {
             xl: isMinWidthArcBreakpointXl,
@@ -7847,14 +7868,15 @@ var Provider$4 = Context$2.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? "top" : _d, _e = _a.requirementStatus, requirementStatus = _e === void 0 ? "optional" : _e, _f = _a.helperUnderLabel, helperUnderLabel = _f === void 0 ? false : _f, isDisabled = _a.isDisabled, _g = _a.hideLabel, hideLabel = _g === void 0 ? false : _g, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var _b;
+    var children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? "top" : _e, _f = _a.requirementStatus, requirementStatus = _f === void 0 ? "optional" : _f, _g = _a.helperUnderLabel, helperUnderLabel = _g === void 0 ? false : _g, isDisabled = _a.isDisabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = useContext(Context$3).surface;
-    var _h = useAriaDescribedby({
+    var _j = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id, // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _h.ariaDescribedby, idError = _h.idError, idHelper = _h.idHelper, idDisclosure = _h.idDisclosure;
+    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError, idHelper = _j.idHelper, idDisclosure = _j.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -7874,22 +7896,27 @@ var FormControl = function (_a) {
         ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
         : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
     return (React__default.createElement(Provider$4, { value: { requirementStatus: requirementStatus } },
-        React__default.createElement(ElementType, __assign({ className: classNames({
-                "arc-FormControl": true,
-                "arc-FormControl--isDisabled": isDisabled,
-                "arc-FormControl--smallLabel": labelSize === "s",
-                "arc-FormControl--onDarkSurface": surface === "dark",
-                "arc-FormControl--sideLabel": labelPosition === "left",
-            }), id: id }, elementProps, filterAttrs(props)),
+        React__default.createElement(ElementType, __assign({ className: classNames((_b = {
+                    "arc-FormControl": true,
+                    "arc-FormControl--isDisabled": isDisabled,
+                    "arc-FormControl--onDarkSurface": surface === "dark",
+                    "arc-FormControl--sideLabel": labelPosition === "left"
+                },
+                _b["arc-FormControl--".concat(labelSize)] = labelSize !== "l",
+                _b)), id: id }, elementProps, filterAttrs(props)),
             hideLabel === true ? (React__default.createElement(VisuallyHidden$2, null,
                 React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
                         "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
                     }) }, labelProps),
-                    label,
+                    label && (React__default.createElement("span", { className: classNames("arc-FormControl-labelText", {
+                            "arc-FormControl-labelText--withOptional": requirementStatus === "optional",
+                        }) }, label)),
                     requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
                     "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
                 }) }, labelProps),
-                label,
+                label && (React__default.createElement("span", { className: classNames("arc-FormControl-labelText", {
+                        "arc-FormControl-labelText--withOptional": requirementStatus === "optional",
+                    }) }, label)),
                 requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
             helperUnderLabel && helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
             children,
@@ -7902,7 +7929,7 @@ var FormControl = function (_a) {
                     React__default.createElement("span", { className: "arc-FormControl-error--icon" },
                         React__default.createElement(ThemeIcon, { icon: "formControlAlert" })),
                     errorMessage)) : (!helperUnderLabel &&
-                    (disclosureTitle ? (React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
+                    (disclosureTitle ? (React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize === "m" ? "l" : labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
                 supplementaryInfo && (React__default.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
 };
 
@@ -13702,7 +13729,7 @@ var ContentSwitcherTab = forwardRef(function (_a, ref) {
 
 var ContentSwitcherContent = function (_a) {
     var children = _a.children, value = _a.value;
-    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value },
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value, tabIndex: -1 },
         React__default.createElement("div", { className: "arc-ContentSwitcherContent-wrapper" }, children)));
 };
 
@@ -13753,11 +13780,12 @@ var ContentSwitcherList = function (_a) {
                 list.removeEventListener("scroll", checkOverflow);
             }
             window.removeEventListener("resize", updateLayout);
+            handleResize.cancel();
         };
     }, [children, checkOverflow, handleResize]);
     return (React__default.createElement("span", { className: classNames("arc-ContentSwitcherList-wrapper", {
             "arc-ContentSwitcherList-wrapper--isInset": isInset,
-        }) },
+        }), tabIndex: -1 },
         React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ className: classNames("arc-ContentSwitcherList", {
                 "arc-ContentSwitcherList--contained": type === "contained",
                 "arc-ContentSwitcherList--isJustified": isJustified,
@@ -15062,7 +15090,7 @@ var ContentSwitcherDropdown = function (_a) {
                 return null;
             }
             var isActive = child.props.value === selectValue;
-            return (React__default.createElement("div", __assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: 0, hidden: !isActive }, filterAttrs(child.props)), child));
+            return (React__default.createElement("div", __assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: -1, hidden: !isActive }, filterAttrs(child.props)), child));
         })));
 };
 var ContentSwitcherDropdownContent = function (_a) {
@@ -15117,9 +15145,9 @@ var DATE_FORMAT = "dd/MM/yyyy";
 
 var TextInputComponent = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
+    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
     var surface = useContext(Context$3).surface;
-    var _m = useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
+    var _l = useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -15153,9 +15181,9 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                 "arc-TextInput--withPrefix": prefix,
                 "arc-TextInput--withSuffix": suffix
             },
-            _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
+            _b["arc-TextInput--size".concat(size && size.toUpperCase())] = size && size !== "m",
             _b)) }, filterAttrs(props)),
-        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
             React__default.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
                 prefix && (React__default.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
                 React__default.createElement("input", __assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled || isLoading, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
@@ -15164,7 +15192,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                             e.preventDefault();
                             iconButton.onClick();
                         } },
-                        React__default.createElement(ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                        React__default.createElement(ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[size] })))),
                 suffix && !showPassword ? (React__default.createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
                 showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
@@ -15174,7 +15202,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                                 ? "Your password is shown"
                                 : "Your password is hidden"))))),
                 isLoading && (React__default.createElement("span", { className: "arc-TextInput-spinner" },
-                    React__default.createElement(Spinner, { size: spinnerSize[inputSize] })))))));
+                    React__default.createElement(Spinner, { size: spinnerSize[size] })))))));
 });
 /**
  * Use `TextInput` to allow users to enter short form text.
@@ -15268,11 +15296,55 @@ var convertRangeStringToDates = function (value) {
         : []), true);
 };
 
+var convertRangeStringToDateTuple = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = parseRangeString(value), start = _a.start, end = _a.end;
+    var startDate = isDateValid(start.date)
+        ? new Date("".concat(start.year, "-").concat(start.month, "-").concat(start.day))
+        : undefined;
+    var endDate = isDateValid(end.date)
+        ? new Date("".concat(end.year, "-").concat(end.month, "-").concat(end.day))
+        : undefined;
+    return [startDate, endDate];
+};
+
+function validateRangeOnBlur(_a) {
+    var value = _a.value, minDate = _a.minDate, maxDate = _a.maxDate, disabledDates = _a.disabledDates, previousValidValue = _a.previousValidValue, dispatchChangeEvent = _a.dispatchChangeEvent, blurEvent = _a.blurEvent;
+    if (!isRangeValid(value))
+        return;
+    var _b = convertRangeStringToDates(value), start = _b[0], end = _b[1];
+    var isStartBeforeMin = minDate && isBefore(start, minDate);
+    var isEndAfterMax = maxDate && isAfter(end, maxDate);
+    var isStartDisabled = isDisabledDate(disabledDates, start);
+    var isEndDisabled = isDisabledDate(disabledDates, end);
+    if (isStartBeforeMin && isEndAfterMax) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
+    }
+    if (isStartBeforeMin) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
+    }
+    if (isEndAfterMax) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
+    }
+    if (isStartDisabled || isEndDisabled) {
+        var _c = previousValidValue
+            ? convertRangeStringToDates(previousValidValue)
+            : [], prevStart = _c[0], prevEnd = _c[1];
+        return dispatchChangeEvent(blurEvent, prevStart && prevEnd
+            ? "".concat(formatDate(prevStart), " - ").concat(formatDate(prevEnd))
+            : "");
+    }
+    if (isAfter(start, end)) {
+        var _d = [start, end].sort(compareAsc), orderedStart = _d[0], orderedEnd = _d[1];
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
+    }
+}
+
 /**
  * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
  */
 var DatePicker = forwardRef(function (_a, ref) {
-    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, labelSize = _a.labelSize, inputSize = _a.inputSize, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "labelSize", "inputSize", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
+    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, size = _a.size, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "size", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
     var _e = useThemeElement(), themeElement = _e[0], setThemeElement = _e[1];
     var _f = useState("Choose date"), ariaLabel = _f[0], setAriaLabel = _f[1];
     var _g = useState(false), showCalendar = _g[0], setShowCalendar = _g[1];
@@ -15346,32 +15418,15 @@ var DatePicker = forwardRef(function (_a, ref) {
         }
     };
     var handleRangeSelectionBlur = function (e) {
-        if (isRangeValid(value) && selectionType === "range") {
-            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
-            var isStartDateBeforeMinDate = minDate && isBefore(start, minDate);
-            var isEndDateAfterMaxDate = maxDate && isAfter(end, maxDate);
-            var isStartDateDisabled = isDisabledDate(disabledDates, start);
-            var isEndDateDisabled = isDisabledDate(disabledDates, end);
-            if (isStartDateBeforeMinDate && isEndDateAfterMaxDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
-            }
-            if (isStartDateBeforeMinDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
-            }
-            if (isEndDateAfterMaxDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
-            }
-            if (isStartDateDisabled || isEndDateDisabled) {
-                var _b = previousValidValue.current
-                    ? convertRangeStringToDates(previousValidValue.current)
-                    : [], start_1 = _b[0], end_1 = _b[1];
-                return dispatchChangeEvent(e, start_1 && end_1 ? "".concat(formatDate(start_1), " - ").concat(formatDate(end_1)) : "");
-            }
-            if (isAfter(start, end)) {
-                var _c = [start, end].sort(compareAsc), orderedStart = _c[0], orderedEnd = _c[1];
-                return dispatchChangeEvent(e, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
-            }
-        }
+        validateRangeOnBlur({
+            value: value,
+            minDate: minDate,
+            maxDate: maxDate,
+            disabledDates: disabledDates,
+            previousValidValue: previousValidValue.current,
+            dispatchChangeEvent: dispatchChangeEvent,
+            blurEvent: e,
+        });
     };
     var handleBlur = function (e) {
         onBlur && onBlur(e);
@@ -15428,7 +15483,7 @@ var DatePicker = forwardRef(function (_a, ref) {
                 icon: "datePickerCalendar",
                 label: ariaLabel,
                 ref: buttonRef,
-            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, labelSize: labelSize, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, inputSize: inputSize }, props, filterAttrs(props))),
+            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, size: size }, props, filterAttrs(props))),
         React__default.createElement(Root2$3, __assign({ open: showCalendar, onOpenChange: handleCalendarOpenChange }, filterAttrs(props)),
             React__default.createElement(Anchor2$1, null),
             React__default.createElement(Portal$5, { container: themeElement },
@@ -15436,6 +15491,174 @@ var DatePicker = forwardRef(function (_a, ref) {
                     React__default.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
 });
 
+var lowerCaseDateFormat = DATE_FORMAT.toLowerCase();
+var DatePickerRange = function (_a) {
+    var _b, _c;
+    var inputStart = _a.inputStart, inputEnd = _a.inputEnd, _d = _a.type, type = _d === void 0 ? "month" : _d, minDate = _a.minDate, maxDate = _a.maxDate, disabledDates = _a.disabledDates, onRangeSelect = _a.onRangeSelect;
+    // startInput States
+    var _e = useState("Choose start date"), startAriaLabel = _e[0], setStartAriaLabel = _e[1];
+    var startButtonRef = useRef(null);
+    var startInputRef = useRef(null);
+    var _f = useState((_b = inputStart.value) !== null && _b !== void 0 ? _b : ""), startValue = _f[0], setStartValue = _f[1];
+    // endInput States
+    var _g = useState("Choose end date"), endAriaLabel = _g[0], setEndAriaLabel = _g[1];
+    var _h = useState((_c = inputEnd.value) !== null && _c !== void 0 ? _c : ""), endValue = _h[0], setEndValue = _h[1];
+    var endButtonRef = useRef(null);
+    var endInputRef = useRef(null);
+    var previousValidValue = useRef("");
+    var _j = useThemeElement(), themeElement = _j[0], setThemeElement = _j[1];
+    var _k = useState(false), showCalendar = _k[0], setShowCalendar = _k[1];
+    var _l = useState(null), activeInput = _l[0], setActiveInput = _l[1];
+    var getIsRequired = function (input) { var _a; return (_a = input.isRequired) !== null && _a !== void 0 ? _a : true; };
+    var getLabel = function (input, type) { var _a; return (_a = input.label) !== null && _a !== void 0 ? _a : "Select a ".concat(type, " date"); };
+    // sync external props with internal value (not typing)
+    useEffect(function () {
+        if (inputStart.value !== undefined && inputStart.value !== startValue) {
+            setStartValue(inputStart.value);
+        }
+        if (inputEnd.value !== undefined && inputEnd.value !== endValue) {
+            setEndValue(inputEnd.value);
+        }
+    }, [inputStart.value, inputEnd.value]);
+    var handleIconClick = function (_a) {
+        var ref = _a.ref, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, input = _a.input;
+        if (ref &&
+            !ref.contains(document.activeElement) &&
+            !isDisabled &&
+            !isReadOnly) {
+            setActiveInput(input);
+            setShowCalendar(true);
+        }
+    };
+    var handleRangeSelect = function (rangeSelection) {
+        var start = rangeSelection.start, end = rangeSelection.end, isSelectionComplete = rangeSelection.isSelectionComplete;
+        var formattedStart = format(start, "dd/MM/yyyy");
+        var formattedEnd = end ? format(end, "dd/MM/yyyy") : "";
+        onRangeSelect === null || onRangeSelect === void 0 ? void 0 : onRangeSelect(__assign(__assign({}, rangeSelection), { formattedStart: formattedStart, formattedEnd: formattedEnd }));
+        if (isSelectionComplete) {
+            var fullRange = "".concat(formattedStart, " - ").concat(formattedEnd);
+            previousValidValue.current = fullRange;
+            setShowCalendar(false);
+        }
+    };
+    var handleCalendarClose = function () {
+        var _a, _b, _c;
+        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY") {
+            (_b = startButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            (_c = endButtonRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    };
+    var handleIconFocus = function (_a) {
+        var input = _a.input;
+        if (isRangeValid("".concat(startValue, " - ").concat(endValue))) {
+            var _b = convertRangeStringToDates("".concat(startValue, " - ").concat(endValue)), start = _b[0], end = _b[1];
+            var label = "Change dates, currently selected dates are ".concat(format(start, "EEEE do MMMM, yyyy"), " to ").concat(format(end, "EEEE do MMMM, yyyy"));
+            input === "start" ? setStartAriaLabel(label) : setEndAriaLabel(label);
+            return;
+        }
+    };
+    var handleChange = function (e, input) {
+        if (input === "start") {
+            inputStart.onChange && inputStart.onChange(e);
+            setStartValue(e.target.value);
+            setActiveInput("start");
+        }
+        if (input === "end") {
+            inputEnd.onChange && inputEnd.onChange(e);
+            setEndValue(e.target.value);
+            setActiveInput("end");
+        }
+    };
+    var handleBlur = function (e, input) {
+        var value = "".concat(startValue, " - ").concat(endValue);
+        if (input === "start") {
+            inputStart.onBlur && inputStart.onBlur(e);
+        }
+        if (input === "end") {
+            inputEnd.onBlur && inputEnd.onBlur(e);
+        }
+        validateRangeOnBlur({
+            value: value,
+            minDate: minDate,
+            maxDate: maxDate,
+            disabledDates: disabledDates,
+            previousValidValue: previousValidValue.current,
+            dispatchChangeEvent: function (e, corrected) {
+                var _a, _b;
+                var _c = convertRangeStringToDates(corrected), start = _c[0], end = _c[1];
+                (_a = inputStart.onChange) === null || _a === void 0 ? void 0 : _a.call(inputStart, __assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: formatDate(start) }) }));
+                (_b = inputEnd.onChange) === null || _b === void 0 ? void 0 : _b.call(inputEnd, __assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: formatDate(end) }) }));
+                previousValidValue.current = corrected;
+            },
+            blurEvent: e,
+        });
+    };
+    var handleCalendarOpenChange = function (isOpen) {
+        if (document.activeElement)
+            setShowCalendar(isOpen);
+    };
+    var handleAutoFocus = function (e) {
+        e.preventDefault();
+    };
+    var setStartInputRef = function (el) {
+        startInputRef.current = el;
+    };
+    var setEndInputRef = function (el) {
+        endInputRef.current = el;
+    };
+    var onCancelClick = function () {
+        setShowCalendar(false);
+    };
+    var getCalendarRange = function () {
+        var _a = convertRangeStringToDateTuple("".concat(startValue, " - ").concat(endValue)), start = _a[0], end = _a[1];
+        // when inital or one date is set - allow user to pick start / end independently
+        if (start && end) {
+            if (activeInput === "start") {
+                return end ? [end] : [];
+            }
+            if (activeInput === "end") {
+                return start ? [start] : [];
+            }
+        }
+        // removes all non date obj
+        return [start, end].filter(function (d) { return d instanceof Date; });
+    };
+    return (React__default.createElement("div", { className: "arc-DatePickerRange", ref: setThemeElement },
+        React__default.createElement(TextInputWithPlaceHolder, __assign({ ref: setStartInputRef, type: "text", iconButton: {
+                onClick: function () {
+                    return handleIconClick({
+                        ref: startInputRef.current,
+                        isDisabled: inputStart.isDisabled,
+                        isReadOnly: inputStart.isReadOnly,
+                        input: "start",
+                    });
+                },
+                onFocus: function () { return handleIconFocus({ input: "start" }); },
+                icon: "datePickerCalendar",
+                label: startAriaLabel,
+                ref: startButtonRef,
+            }, maxLength: 23, onBlur: function (e) { return handleBlur(e, "start"); }, errorMessage: inputStart.errorMessage, helper: inputStart.helper, id: inputStart.id, isDisabled: inputStart.isDisabled, isReadOnly: inputStart.isReadOnly, isRequired: getIsRequired(inputStart), label: getLabel(inputStart, "start"), hideLabel: inputStart.hideLabel, name: inputStart.name, onClickDisclosure: inputStart.onClickDisclosure, disclosureTitle: inputStart.disclosureTitle, disclosureText: inputStart.disclosureText, placeholder: lowerCaseDateFormat, value: startValue, onChange: function (e) { return handleChange(e, "start"); } }, filterAttrs(inputStart))),
+        React__default.createElement(TextInputWithPlaceHolder, __assign({ ref: setEndInputRef, type: "text", iconButton: {
+                onClick: function () {
+                    return handleIconClick({
+                        ref: endInputRef.current,
+                        isDisabled: inputEnd.isDisabled,
+                        isReadOnly: inputEnd.isReadOnly,
+                        input: "end",
+                    });
+                },
+                onFocus: function () { return handleIconFocus({ input: "end" }); },
+                icon: "datePickerCalendar",
+                label: endAriaLabel,
+                ref: endButtonRef,
+            }, maxLength: 23, onBlur: function (e) { return handleBlur(e, "end"); }, errorMessage: inputEnd.errorMessage, helper: inputEnd.helper, id: inputEnd.id, isDisabled: inputEnd.isDisabled, isReadOnly: inputEnd.isReadOnly, isRequired: getIsRequired(inputEnd), label: getLabel(inputEnd, "end"), hideLabel: inputStart.hideLabel, name: inputEnd.name, onClickDisclosure: inputEnd.onClickDisclosure, disclosureTitle: inputEnd.disclosureTitle, disclosureText: inputEnd.disclosureText, placeholder: lowerCaseDateFormat, value: endValue, onChange: function (e) { return handleChange(e, "end"); } }, filterAttrs(inputEnd))),
+        React__default.createElement(Root2$3, { open: showCalendar, onOpenChange: handleCalendarOpenChange },
+            React__default.createElement(Anchor2$1, null),
+            React__default.createElement(Portal$5, { container: themeElement },
+                React__default.createElement(Content2$4, { align: "end", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
+                    React__default.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: "range", selectedRange: getCalendarRange(), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onRangeSelect: handleRangeSelect }))))));
+};
+
 /**
  * Use `Disclosure` to show and hide sections of content.
  */
@@ -15487,273 +15710,6 @@ var Download = function (_a) {
                 React__default.createElement(Text, { tone: "supporting" }, description))))));
 };
 
-const LEFT = "Left";
-const RIGHT = "Right";
-const UP = "Up";
-const DOWN = "Down";
-
-/* global document */
-const defaultProps = {
-    delta: 10,
-    preventScrollOnSwipe: false,
-    rotationAngle: 0,
-    trackMouse: false,
-    trackTouch: true,
-    swipeDuration: Infinity,
-    touchEventOptions: { passive: true },
-};
-const initialState = {
-    first: true,
-    initial: [0, 0],
-    start: 0,
-    swiping: false,
-    xy: [0, 0],
-};
-const mouseMove = "mousemove";
-const mouseUp = "mouseup";
-const touchEnd = "touchend";
-const touchMove = "touchmove";
-const touchStart = "touchstart";
-function getDirection(absX, absY, deltaX, deltaY) {
-    if (absX > absY) {
-        if (deltaX > 0) {
-            return RIGHT;
-        }
-        return LEFT;
-    }
-    else if (deltaY > 0) {
-        return DOWN;
-    }
-    return UP;
-}
-function rotateXYByAngle(pos, angle) {
-    if (angle === 0)
-        return pos;
-    const angleInRadians = (Math.PI / 180) * angle;
-    const x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
-    const y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
-    return [x, y];
-}
-function getHandlers(set, handlerProps) {
-    const onStart = (event) => {
-        const isTouch = "touches" in event;
-        // if more than a single touch don't track, for now...
-        if (isTouch && event.touches.length > 1)
-            return;
-        set((state, props) => {
-            // setup mouse listeners on document to track swipe since swipe can leave container
-            if (props.trackMouse && !isTouch) {
-                document.addEventListener(mouseMove, onMove);
-                document.addEventListener(mouseUp, onUp);
-            }
-            const { clientX, clientY } = isTouch ? event.touches[0] : event;
-            const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
-            props.onTouchStartOrOnMouseDown &&
-                props.onTouchStartOrOnMouseDown({ event });
-            return Object.assign(Object.assign(Object.assign({}, state), initialState), { initial: xy.slice(), xy, start: event.timeStamp || 0 });
-        });
-    };
-    const onMove = (event) => {
-        set((state, props) => {
-            const isTouch = "touches" in event;
-            // Discount a swipe if additional touches are present after
-            // a swipe has started.
-            if (isTouch && event.touches.length > 1) {
-                return state;
-            }
-            // if swipe has exceeded duration stop tracking
-            if (event.timeStamp - state.start > props.swipeDuration) {
-                return state.swiping ? Object.assign(Object.assign({}, state), { swiping: false }) : state;
-            }
-            const { clientX, clientY } = isTouch ? event.touches[0] : event;
-            const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle);
-            const deltaX = x - state.xy[0];
-            const deltaY = y - state.xy[1];
-            const absX = Math.abs(deltaX);
-            const absY = Math.abs(deltaY);
-            const time = (event.timeStamp || 0) - state.start;
-            const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
-            const vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
-            const dir = getDirection(absX, absY, deltaX, deltaY);
-            // if swipe is under delta and we have not started to track a swipe: skip update
-            const delta = typeof props.delta === "number"
-                ? props.delta
-                : props.delta[dir.toLowerCase()] ||
-                    defaultProps.delta;
-            if (absX < delta && absY < delta && !state.swiping)
-                return state;
-            const eventData = {
-                absX,
-                absY,
-                deltaX,
-                deltaY,
-                dir,
-                event,
-                first: state.first,
-                initial: state.initial,
-                velocity,
-                vxvy,
-            };
-            // call onSwipeStart if present and is first swipe event
-            eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
-            // call onSwiping if present
-            props.onSwiping && props.onSwiping(eventData);
-            // track if a swipe is cancelable (handler for swiping or swiped(dir) exists)
-            // so we can call preventDefault if needed
-            let cancelablePageSwipe = false;
-            if (props.onSwiping ||
-                props.onSwiped ||
-                props[`onSwiped${dir}`]) {
-                cancelablePageSwipe = true;
-            }
-            if (cancelablePageSwipe &&
-                props.preventScrollOnSwipe &&
-                props.trackTouch &&
-                event.cancelable) {
-                event.preventDefault();
-            }
-            return Object.assign(Object.assign({}, state), { 
-                // first is now always false
-                first: false, eventData, swiping: true });
-        });
-    };
-    const onEnd = (event) => {
-        set((state, props) => {
-            let eventData;
-            if (state.swiping && state.eventData) {
-                // if swipe is less than duration fire swiped callbacks
-                if (event.timeStamp - state.start < props.swipeDuration) {
-                    eventData = Object.assign(Object.assign({}, state.eventData), { event });
-                    props.onSwiped && props.onSwiped(eventData);
-                    const onSwipedDir = props[`onSwiped${eventData.dir}`];
-                    onSwipedDir && onSwipedDir(eventData);
-                }
-            }
-            else {
-                props.onTap && props.onTap({ event });
-            }
-            props.onTouchEndOrOnMouseUp && props.onTouchEndOrOnMouseUp({ event });
-            return Object.assign(Object.assign(Object.assign({}, state), initialState), { eventData });
-        });
-    };
-    const cleanUpMouse = () => {
-        // safe to just call removeEventListener
-        document.removeEventListener(mouseMove, onMove);
-        document.removeEventListener(mouseUp, onUp);
-    };
-    const onUp = (e) => {
-        cleanUpMouse();
-        onEnd(e);
-    };
-    /**
-     * The value of passive on touchMove depends on `preventScrollOnSwipe`:
-     * - true => { passive: false }
-     * - false => { passive: true } // Default
-     *
-     * NOTE: When preventScrollOnSwipe is true, we attempt to call preventDefault to prevent scroll.
-     *
-     * props.touchEventOptions can also be set for all touch event listeners,
-     * but for `touchmove` specifically when `preventScrollOnSwipe` it will
-     * supersede and force passive to false.
-     *
-     */
-    const attachTouch = (el, props) => {
-        let cleanup = () => { };
-        if (el && el.addEventListener) {
-            const baseOptions = Object.assign(Object.assign({}, defaultProps.touchEventOptions), props.touchEventOptions);
-            // attach touch event listeners and handlers
-            const tls = [
-                [touchStart, onStart, baseOptions],
-                // preventScrollOnSwipe option supersedes touchEventOptions.passive
-                [
-                    touchMove,
-                    onMove,
-                    Object.assign(Object.assign({}, baseOptions), (props.preventScrollOnSwipe ? { passive: false } : {})),
-                ],
-                [touchEnd, onEnd, baseOptions],
-            ];
-            tls.forEach(([e, h, o]) => el.addEventListener(e, h, o));
-            // return properly scoped cleanup method for removing listeners, options not required
-            cleanup = () => tls.forEach(([e, h]) => el.removeEventListener(e, h));
-        }
-        return cleanup;
-    };
-    const onRef = (el) => {
-        // "inline" ref functions are called twice on render, once with null then again with DOM element
-        // ignore null here
-        if (el === null)
-            return;
-        set((state, props) => {
-            // if the same DOM el as previous just return state
-            if (state.el === el)
-                return state;
-            const addState = {};
-            // if new DOM el clean up old DOM and reset cleanUpTouch
-            if (state.el && state.el !== el && state.cleanUpTouch) {
-                state.cleanUpTouch();
-                addState.cleanUpTouch = void 0;
-            }
-            // only attach if we want to track touch
-            if (props.trackTouch && el) {
-                addState.cleanUpTouch = attachTouch(el, props);
-            }
-            // store event attached DOM el for comparison, clean up, and re-attachment
-            return Object.assign(Object.assign(Object.assign({}, state), { el }), addState);
-        });
-    };
-    // set ref callback to attach touch event listeners
-    const output = {
-        ref: onRef,
-    };
-    // if track mouse attach mouse down listener
-    if (handlerProps.trackMouse) {
-        output.onMouseDown = onStart;
-    }
-    return [output, attachTouch];
-}
-function updateTransientState(state, props, previousProps, attachTouch) {
-    // if trackTouch is off or there is no el, then remove handlers if necessary and exit
-    if (!props.trackTouch || !state.el) {
-        if (state.cleanUpTouch) {
-            state.cleanUpTouch();
-        }
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: undefined });
-    }
-    // trackTouch is on, so if there are no handlers attached, attach them and exit
-    if (!state.cleanUpTouch) {
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: attachTouch(state.el, props) });
-    }
-    // trackTouch is on and handlers are already attached, so if preventScrollOnSwipe changes value,
-    // remove and reattach handlers (this is required to update the passive option when attaching
-    // the handlers)
-    if (props.preventScrollOnSwipe !== previousProps.preventScrollOnSwipe ||
-        props.touchEventOptions.passive !== previousProps.touchEventOptions.passive) {
-        state.cleanUpTouch();
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: attachTouch(state.el, props) });
-    }
-    return state;
-}
-function useSwipeable(options) {
-    const { trackMouse } = options;
-    const transientState = React.useRef(Object.assign({}, initialState));
-    const transientProps = React.useRef(Object.assign({}, defaultProps));
-    // track previous rendered props
-    const previousProps = React.useRef(Object.assign({}, transientProps.current));
-    previousProps.current = Object.assign({}, transientProps.current);
-    // update current render props & defaults
-    transientProps.current = Object.assign(Object.assign({}, defaultProps), options);
-    // Force defaults for config properties
-    let defaultKey;
-    for (defaultKey in defaultProps) {
-        if (transientProps.current[defaultKey] === void 0) {
-            transientProps.current[defaultKey] = defaultProps[defaultKey];
-        }
-    }
-    const [handlers, attachTouch] = React.useMemo(() => getHandlers((stateSetter) => (transientState.current = stateSetter(transientState.current, transientProps.current)), { trackMouse }), [trackMouse]);
-    transientState.current = updateTransientState(transientState.current, transientProps.current, previousProps.current, attachTouch);
-    return handlers;
-}
-
 var DIALOG_NAME = "Dialog";
 var [createDialogContext, createDialogScope] = createContextScope$1(DIALOG_NAME);
 var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
@@ -16054,27 +16010,10 @@ var Title = DialogTitle;
 var Description = DialogDescription;
 
 var Drawer = function (_a) {
-    var isOpen = _a.isOpen, title = _a.title, children = _a.children, onRequestClose = _a.onRequestClose, footer = _a.footer, _b = _a.position, position = _b === void 0 ? "right" : _b, _c = _a.isOverlayVisible, isOverlayVisible = _c === void 0 ? true : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? "s" : _e, props = __rest(_a, ["isOpen", "title", "children", "onRequestClose", "footer", "position", "isOverlayVisible", "shouldReturnFocus", "size"]);
+    var isOpen = _a.isOpen, children = _a.children, onRequestClose = _a.onRequestClose, _b = _a.noOverlay, noOverlay = _b === void 0 ? false : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, height = _a.height, width = _a.width, _e = _a.position, position = _e === void 0 ? "right" : _e, props = __rest(_a, ["isOpen", "children", "onRequestClose", "noOverlay", "shouldReturnFocus", "size", "height", "width", "position"]);
     var _f = useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
     var triggerRef = useRef(null);
     var _g = useState(null), exitTranslateValue = _g[0], setExitTranslateValue = _g[1];
-    var handlers = useSwipeable({
-        onSwiped: function (_a) {
-            var dir = _a.dir;
-            if (position === "left" && dir === "Left") {
-                setExitTranslateValue([-100, 0]);
-            }
-            if (position === "right" && dir === "Right") {
-                setExitTranslateValue([100, 0]);
-            }
-            if (position === "top" && dir === "Up") {
-                setExitTranslateValue([0, -100]);
-            }
-            if (position === "bottom" && dir === "Down") {
-                setExitTranslateValue([0, 100]);
-            }
-        },
-    });
     var setTriggerElement = function () {
         return shouldReturnFocus &&
             (triggerRef.current = document.activeElement);
@@ -16096,30 +16035,69 @@ var Drawer = function (_a) {
             },
         }
         : {};
+    var sizingProperties = __assign(__assign({}, (position !== "bottom" && { width: width })), (position === "bottom" && { height: height }));
     return (React__default.createElement("div", { ref: setThemeElement },
         React__default.createElement(Root$3, { open: isOpen },
             React__default.createElement(Portal$3, { container: themeElement },
                 React__default.createElement(Overlay, { style: exitTransitionStyle.overlay, className: classNames("arc-Drawer-overlay", {
-                        "arc-Drawer-overlay--visible": isOverlayVisible,
+                        "arc-Drawer-overlay--visible": !noOverlay,
                     }) },
                     React__default.createElement(Content$1, __assign({ onTransitionEnd: function () {
                             setExitTranslateValue(null);
                             onRequestClose();
-                        }, className: classNames("arc-Drawer-slider", "arc-Drawer-slider--".concat(size), "arc-Drawer-slider--".concat(position)), style: exitTransitionStyle.slider, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onRequestClose, onInteractOutside: onRequestClose, "aria-modal": "true" }, handlers, filterAttrs(props)),
-                        React__default.createElement("div", { className: "arc-Drawer-content" },
-                            React__default.createElement("div", { className: "arc-Drawer-section" }, children)),
-                        React__default.createElement("div", { className: "arc-Drawer-footer" },
-                            React__default.createElement(VerticalSpace, { size: "32" }),
-                            footer),
-                        React__default.createElement("div", { className: "arc-Drawer-header" },
-                            React__default.createElement("div", { className: "arc-Drawer-closeButtonContainer" },
-                                React__default.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
-                                    React__default.createElement(ThemeIcon, { size: 48, icon: "drawerClose" }))),
-                            React__default.createElement("div", { className: "arc-Drawer-headerContent" },
-                                React__default.createElement("div", { className: "arc-Drawer-titleContainer" },
-                                    React__default.createElement(Title, { asChild: true },
-                                        React__default.createElement(Heading, { level: "1", size: "l" }, title)))),
-                            React__default.createElement(VerticalSpace, { size: "32" }))))))));
+                        }, className: classNames("arc-Drawer-slider", "arc-Drawer-slider--".concat(size), "arc-Drawer-slider--".concat(position)), style: (__assign({}, sizingProperties)), onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onRequestClose, onInteractOutside: onRequestClose, "aria-modal": "true" }, filterAttrs(props)),
+                        children,
+                        React__default.createElement("div", { className: "arc-Drawer-closeButtonContainer" },
+                            React__default.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
+                                React__default.createElement(ThemeIcon, { size: 32, icon: "drawerClose" })))))))));
+};
+
+/**
+ * Use `Rule` to display a horizontal or vertical rule.
+ */
+var Rule = function (_a, props) {
+    var _b;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var surface = useContext(Context$3).surface;
+    return (React__default.createElement("hr", __assign({ className: classNames((_b = {
+                "arc-Rule": true
+            },
+            _b["arc-Rule--".concat(orientation)] = true,
+            _b["arc-Rule--onDarkSurface"] = surface === "dark",
+            _b)) }, filterAttrs(props))));
+};
+
+var DrawerHeader = function (_a) {
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, props = __rest(_a, ["title", "isFixed"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", __assign({ className: classNames("arc-DrawerHeader", {
+                "arc-DrawerHeader--isFixed": isFixed,
+            }) }, filterAttrs(props)),
+            React__default.createElement("div", { className: "arc-DrawerHeader-content" },
+                React__default.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
+                    React__default.createElement(Title, { asChild: true },
+                        React__default.createElement("h1", { className: "arc-DrawerHeader-title" }, title)))),
+            isFixed && (React__default.createElement("div", { className: "arc-DrawerHeader-divider" },
+                React__default.createElement(Rule, null))))));
+};
+
+var DrawerFooter = function (_a) {
+    var isFixed = _a.isFixed, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: classNames("arc-DrawerFooter", {
+                "arc-DrawerFooter--isFixed": isFixed,
+            }) },
+            isFixed && (React__default.createElement("div", { className: "arc-DrawerFooter-divider" },
+                React__default.createElement(Rule, null))),
+            children)));
+};
+
+var DrawerContent = function (_a) {
+    var isFullBleed = _a.isFullBleed, children = _a.children;
+    return (React__default.createElement("div", { className: classNames("arc-DrawerContent", {
+            "arc-DrawerContent--isFullBleed": isFullBleed,
+        }) },
+        React__default.createElement("div", { className: "arc-Drawer-section" }, children)));
 };
 
 /**
@@ -16233,7 +16211,7 @@ var GhostedHeroBanner = function (_a) {
     return (React__default.createElement("div", __assign({ className: "arc-GhostedHeroBanner" }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-GhostedHeroBanner-content" },
             label && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
+                React__default.createElement(Heading, { fontStyle: "overline" }, label),
                 React__default.createElement(VerticalSpace, { size: "8" }))),
             React__default.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
             text && (React__default.createElement(React__default.Fragment, null,
@@ -16245,14 +16223,361 @@ var GhostedHeroBanner = function (_a) {
         React__default.createElement("div", { className: "arc-GhostedHeroBanner-image " }, img && React__default.createElement(BannerImage, __assign({ ariaHidden: true }, img)))));
 };
 
-var GradientBackground = function (_a) {
-    var _b;
-    var _c = _a.type, type = _c === void 0 ? "lightOne" : _c, children = _a.children, scrim = _a.scrim, props = __rest(_a, ["type", "children", "scrim"]);
-    return (React__default.createElement("div", __assign({ className: classNames("arc-GradientBackground", "arc-GradientBackground--".concat(type), (_b = {},
-            _b["arc-GradientBackground-scrim--".concat(scrim)] = scrim,
-            _b)) }, filterAttrs(props)),
-        React__default.createElement("div", { className: "arc-GradientBackground-content" },
-            React__default.createElement(Surface, { isTransparent: true, background: type === "lightOne" ? "light-white" : "dark-black" }, children))));
+var shorterCssColorNames;
+var hasRequiredShorterCssColorNames;
+
+function requireShorterCssColorNames () {
+	if (hasRequiredShorterCssColorNames) return shorterCssColorNames;
+	hasRequiredShorterCssColorNames = 1;
+	shorterCssColorNames = {
+	  aqua: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  azure: /#f0ffff(ff)?(?!\w)/gi,
+	  beige: /#f5f5dc(ff)?(?!\w)/gi,
+	  bisque: /#ffe4c4(ff)?(?!\w)/gi,
+	  black: /#000000(ff)?(?!\w)|#000(f)?(?!\w)/gi,
+	  blue: /#0000ff(ff)?(?!\w)|#00f(f)?(?!\w)/gi,
+	  brown: /#a52a2a(ff)?(?!\w)/gi,
+	  coral: /#ff7f50(ff)?(?!\w)/gi,
+	  cornsilk: /#fff8dc(ff)?(?!\w)/gi,
+	  crimson: /#dc143c(ff)?(?!\w)/gi,
+	  cyan: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  darkblue: /#00008b(ff)?(?!\w)/gi,
+	  darkcyan: /#008b8b(ff)?(?!\w)/gi,
+	  darkgrey: /#a9a9a9(ff)?(?!\w)/gi,
+	  darkred: /#8b0000(ff)?(?!\w)/gi,
+	  deeppink: /#ff1493(ff)?(?!\w)/gi,
+	  dimgrey: /#696969(ff)?(?!\w)/gi,
+	  gold: /#ffd700(ff)?(?!\w)/gi,
+	  green: /#008000(ff)?(?!\w)/gi,
+	  grey: /#808080(ff)?(?!\w)/gi,
+	  honeydew: /#f0fff0(ff)?(?!\w)/gi,
+	  hotpink: /#ff69b4(ff)?(?!\w)/gi,
+	  indigo: /#4b0082(ff)?(?!\w)/gi,
+	  ivory: /#fffff0(ff)?(?!\w)/gi,
+	  khaki: /#f0e68c(ff)?(?!\w)/gi,
+	  lavender: /#e6e6fa(ff)?(?!\w)/gi,
+	  lime: /#00ff00(ff)?(?!\w)|#0f0(f)?(?!\w)/gi,
+	  linen: /#faf0e6(ff)?(?!\w)/gi,
+	  maroon: /#800000(ff)?(?!\w)/gi,
+	  moccasin: /#ffe4b5(ff)?(?!\w)/gi,
+	  navy: /#000080(ff)?(?!\w)/gi,
+	  oldlace: /#fdf5e6(ff)?(?!\w)/gi,
+	  olive: /#808000(ff)?(?!\w)/gi,
+	  orange: /#ffa500(ff)?(?!\w)/gi,
+	  orchid: /#da70d6(ff)?(?!\w)/gi,
+	  peru: /#cd853f(ff)?(?!\w)/gi,
+	  pink: /#ffc0cb(ff)?(?!\w)/gi,
+	  plum: /#dda0dd(ff)?(?!\w)/gi,
+	  purple: /#800080(ff)?(?!\w)/gi,
+	  red: /#ff0000(ff)?(?!\w)|#f00(f)?(?!\w)/gi,
+	  salmon: /#fa8072(ff)?(?!\w)/gi,
+	  seagreen: /#2e8b57(ff)?(?!\w)/gi,
+	  seashell: /#fff5ee(ff)?(?!\w)/gi,
+	  sienna: /#a0522d(ff)?(?!\w)/gi,
+	  silver: /#c0c0c0(ff)?(?!\w)/gi,
+	  skyblue: /#87ceeb(ff)?(?!\w)/gi,
+	  snow: /#fffafa(ff)?(?!\w)/gi,
+	  tan: /#d2b48c(ff)?(?!\w)/gi,
+	  teal: /#008080(ff)?(?!\w)/gi,
+	  thistle: /#d8bfd8(ff)?(?!\w)/gi,
+	  tomato: /#ff6347(ff)?(?!\w)/gi,
+	  violet: /#ee82ee(ff)?(?!\w)/gi,
+	  wheat: /#f5deb3(ff)?(?!\w)/gi,
+	  white: /#ffffff(ff)?(?!\w)|#fff(f)?(?!\w)/gi,
+	};
+	return shorterCssColorNames;
+}
+
+var miniSvgDataUri;
+var hasRequiredMiniSvgDataUri;
+
+function requireMiniSvgDataUri () {
+	if (hasRequiredMiniSvgDataUri) return miniSvgDataUri;
+	hasRequiredMiniSvgDataUri = 1;
+	var shorterNames = requireShorterCssColorNames();
+	var REGEX = {
+	  whitespace: /\s+/g,
+	  urlHexPairs: /%[\dA-F]{2}/g,
+	  quotes: /"/g,
+	};
+
+	function collapseWhitespace(str) {
+	  return str.trim().replace(REGEX.whitespace, ' ');
+	}
+
+	function dataURIPayload(string) {
+	  return encodeURIComponent(string)
+	    .replace(REGEX.urlHexPairs, specialHexEncode);
+	}
+
+	// `#` gets converted to `%23`, so quite a few CSS named colors are shorter than
+	// their equivalent URL-encoded hex codes.
+	function colorCodeToShorterNames(string) {
+	  Object.keys(shorterNames).forEach(function(key) {
+	    if (shorterNames[key].test(string)) {
+	      string = string.replace(shorterNames[key], key);
+	    }
+	  });
+
+	  return string;
+	}
+
+	function specialHexEncode(match) {
+	  switch (match) { // Browsers tolerate these characters, and they're frequent
+	    case '%20': return ' ';
+	    case '%3D': return '=';
+	    case '%3A': return ':';
+	    case '%2F': return '/';
+	    default: return match.toLowerCase(); // compresses better
+	  }
+	}
+
+	function svgToTinyDataUri(svgString) {
+	  if (typeof svgString !== 'string') {
+	    throw new TypeError('Expected a string, but received ' + typeof svgString);
+	  }
+	  // Strip the Byte-Order Mark if the SVG has one
+	  if (svgString.charCodeAt(0) === 0xfeff) { svgString = svgString.slice(1); }
+
+	  var body = colorCodeToShorterNames(collapseWhitespace(svgString))
+	    .replace(REGEX.quotes, "'");
+	  return 'data:image/svg+xml,' + dataURIPayload(body);
+	}
+
+	svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
+	  return svgToTinyDataUri(svgString).replace(/ /g, '%20');
+	};
+
+	miniSvgDataUri = svgToTinyDataUri;
+	return miniSvgDataUri;
+}
+
+var miniSvgDataUriExports = requireMiniSvgDataUri();
+var svgToMiniDataURI = /*@__PURE__*/getDefaultExportFromCjs(miniSvgDataUriExports);
+
+var S_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsS, ")");
+var M_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsM, ")");
+var L_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsL, ")");
+var XL_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsXl, ")");
+
+var HomepageDark1 = "\n  <svg\n    viewBox=\"0 0 1280 1280\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    preserveAspectRatio=\"none\"\n  >\n    <g clipPath=\"url(#clip0_6783_736)\">\n      <g clipPath=\"url(#clip1_6783_736)\">\n        <path\n          d=\"M-6.26531 52.9727L66.2344 94.4728V177.473L-6.26531 218.973L-78.7656 177.473V94.4728L-6.26531 52.9727Z\"\n          fill=\"#8D248D\"\n        />\n        <path\n          d=\"M-6.26531 797.973L66.2344 839.474V922.471L-6.26531 963.973L-78.7656 922.471V839.474L-6.26531 797.973Z\"\n          fill=\"#9E1DBE\"\n        />\n        <path\n          d=\"M710.235 51.9727L782.234 93.7228V177.223L710.235 218.973L638.234 177.223V93.7228L710.235 51.9727Z\"\n          fill=\"#5E3690\"\n        />\n        <path\n          d=\"M710.235 797.973L782.234 839.474V922.471L710.235 963.973L638.234 922.471V839.474L710.235 797.973Z\"\n          fill=\"#A73BC6\"\n        />\n        <path\n          d=\"M-6.26531 300.973L66.2344 342.723V426.223L-6.26531 467.973L-78.7656 426.223V342.723L-6.26531 300.973Z\"\n          fill=\"#9F21A2\"\n        />\n        <path\n          d=\"M-6.26531 1045.97L66.2344 1087.47V1170.47L-6.26531 1211.97L-78.7656 1170.47V1087.47L-6.26531 1045.97Z\"\n          fill=\"#9723C0\"\n        />\n        <path\n          d=\"M710.235 299.973L782.234 341.723V425.223L710.235 466.973L638.234 425.223V341.723L710.235 299.973Z\"\n          fill=\"#803EBA\"\n        />\n        <path\n          d=\"M709.235 1045.97L781.234 1087.47V1170.47L709.235 1211.97L637.234 1170.47V1087.47L709.235 1045.97Z\"\n          fill=\"#B03EC0\"\n        />\n        <path\n          d=\"M-6.26531 548.973L66.2344 590.723V674.223L-6.26531 715.973L-78.7656 674.223V590.723L-6.26531 548.973Z\"\n          fill=\"#A61DB7\"\n        />\n        <path\n          d=\"M710.235 547.973L782.234 589.723V673.223L710.235 714.973L638.234 673.223V589.723L710.235 547.973Z\"\n          fill=\"#9C38CB\"\n        />\n        <path\n          d=\"M66.2343 -71.0273L138.234 -29.2773V54.2228L66.2343 95.9727L-5.76562 54.2228V-29.2773L66.2343 -71.0273Z\"\n          fill=\"#8D248D\"\n        />\n        <path\n          d=\"M65.2343 672.973L137.234 714.723V798.22L65.2343 839.973L-6.76562 798.22V714.723L65.2343 672.973Z\"\n          fill=\"#9D1EBA\"\n        />\n        <path\n          d=\"M781.234 -72.0273L853.234 -30.2773V53.2228L781.234 94.9727L709.234 53.2228V-30.2773L781.234 -72.0273Z\"\n          fill=\"#3B4C90\"\n        />\n        <path\n          d=\"M781.234 672.973L853.234 714.723V798.22L781.234 839.973L709.234 798.22V714.723L781.234 672.973Z\"\n          fill=\"#9644CE\"\n        />\n        <path\n          d=\"M65.2343 176.973L137.234 218.473V301.473L65.2343 342.973L-6.76562 301.473V218.473L65.2343 176.973Z\"\n          fill=\"#8E218F\"\n        />\n        <path\n          d=\"M64.2343 921.973L136.234 963.719V1047.23L64.2343 1088.97L-7.76562 1047.23V963.719L64.2343 921.973Z\"\n          fill=\"#9523C0\"\n        />\n        <path\n          d=\"M781.234 175.973L853.234 217.473V300.473L781.234 341.973L709.234 300.473V217.473L781.234 175.973Z\"\n          fill=\"#5848A3\"\n        />\n        <path\n          d=\"M781.234 920.973L853.234 962.719V1046.23L781.234 1087.97L709.234 1046.23V962.719L781.234 920.973Z\"\n          fill=\"#A547C4\"\n        />\n        <path\n          d=\"M66.2343 424.973L138.234 466.473V549.473L66.2343 590.973L-5.76562 549.473V466.473L66.2343 424.973Z\"\n          fill=\"#A21FAC\"\n        />\n        <path\n          d=\"M66.2343 1168.97L138.234 1210.47V1293.47L66.2343 1334.97L-5.76562 1293.47V1210.47L66.2343 1168.97Z\"\n          fill=\"#9723C0\"\n        />\n        <path\n          d=\"M781.234 423.973L853.234 465.473V548.473L781.234 589.973L709.234 548.473V465.473L781.234 423.973Z\"\n          fill=\"#844BCE\"\n        />\n        <path\n          d=\"M781.234 1168.97L853.234 1210.47V1293.47L781.234 1334.97L709.234 1293.47V1210.47L781.234 1168.97Z\"\n          fill=\"#B03EC0\"\n        />\n        <path\n          d=\"M137.734 52.9727L209.234 94.7228V178.223L137.734 219.973L66.2344 178.223V94.7228L137.734 52.9727Z\"\n          fill=\"#8D248D\"\n        />\n        <path\n          d=\"M136.734 797.973L208.234 839.474V922.471L136.734 963.973L65.2344 922.471V839.474L136.734 797.973Z\"\n          fill=\"#9E1DBE\"\n        />\n        <path\n          d=\"M853.234 51.9727L925.234 93.7228V177.223L853.234 218.973L781.234 177.223V93.7228L853.234 51.9727Z\"\n          fill=\"#3B4C90\"\n        />\n        <path\n          d=\"M853.234 796.973L925.234 838.474V921.471L853.234 962.973L781.234 921.471V838.474L853.234 796.973Z\"\n          fill=\"#934ECC\"\n        />\n        <path\n          d=\"M136.734 300.973L208.234 342.723V426.223L136.734 467.973L65.2344 426.223V342.723L136.734 300.973Z\"\n          fill=\"#9F21A2\"\n        />\n        <path\n          d=\"M137.734 1045.97L209.234 1087.47V1170.47L137.734 1211.97L66.2344 1170.47V1087.47L137.734 1045.97Z\"\n          fill=\"#9723C0\"\n        />\n        <path\n          d=\"M853.234 299.973L925.234 341.723V425.223L853.234 466.973L781.234 425.223V341.723L853.234 299.973Z\"\n          fill=\"#585BBC\"\n        />\n        <path\n          d=\"M853.234 1044.97L925.234 1086.47V1169.47L853.234 1210.97L781.234 1169.47V1086.47L853.234 1044.97Z\"\n          fill=\"#9F50C4\"\n        />\n        <path\n          d=\"M137.734 548.973L209.234 590.723V674.223L137.734 715.973L66.2344 674.223V590.723L137.734 548.973Z\"\n          fill=\"#A61DB7\"\n        />\n        <path\n          d=\"M852.234 547.973L924.234 589.723V673.223L852.234 714.973L780.234 673.223V589.723L852.234 547.973Z\"\n          fill=\"#7D54D4\"\n        />\n        <path\n          d=\"M208.734 -71.0273L280.234 -29.2773V54.2228L208.734 95.9727L137.234 54.2228V-29.2773L208.734 -71.0273Z\"\n          fill=\"#A4329B\"\n        />\n        <path\n          d=\"M208.234 672.973L280.234 714.723V798.22L208.234 839.973L136.234 798.22V714.723L208.234 672.973Z\"\n          fill=\"#A718BC\"\n        />\n        <path\n          d=\"M923.734 -72.0273L995.234 -30.2773V53.2228L923.734 94.9727L852.234 53.2228V-30.2773L923.734 -72.0273Z\"\n          fill=\"#2B548D\"\n        />\n        <path\n          d=\"M923.734 671.973L995.234 713.723V797.22L923.734 838.973L852.234 797.22V713.723L923.734 671.973Z\"\n          fill=\"#745FD7\"\n        />\n        <path\n          d=\"M208.234 177.973L280.234 219.473V302.473L208.234 343.973L136.234 302.473V219.473L208.234 177.973Z\"\n          fill=\"#A0279D\"\n        />\n        <path\n          d=\"M208.234 920.973L280.234 962.719V1046.23L208.234 1087.97L136.234 1046.23V962.719L208.234 920.973Z\"\n          fill=\"#A01BC0\"\n        />\n        <path\n          d=\"M923.734 176.973L995.234 218.473V301.473L923.734 342.973L852.234 301.473V218.473L923.734 176.973Z\"\n          fill=\"#375BA2\"\n        />\n        <path\n          d=\"M923.734 919.973L995.234 961.719V1045.23L923.734 1086.97L852.234 1045.23V961.719L923.734 919.973Z\"\n          fill=\"#8F54CE\"\n        />\n        <path\n          d=\"M208.234 424.973L280.234 466.473V549.473L208.234 590.973L136.234 549.473V466.473L208.234 424.973Z\"\n          fill=\"#AF1FB4\"\n        />\n        <path\n          d=\"M209.234 1168.97L281.234 1210.47V1293.47L209.234 1334.97L137.234 1293.47V1210.47L209.234 1168.97Z\"\n          fill=\"#9723C0\"\n        />\n        <path\n          d=\"M923.734 423.973L995.234 465.473V548.473L923.734 589.973L852.234 548.473V465.473L923.734 423.973Z\"\n          fill=\"#586DD4\"\n        />\n        <path\n          d=\"M923.734 1168.97L995.234 1210.47V1293.47L923.734 1334.97L852.234 1293.47V1210.47L923.734 1168.97Z\"\n          fill=\"#9F50C4\"\n        />\n        <path\n          d=\"M279.734 52.9727L352.234 94.7228V178.223L279.734 219.973L207.234 178.223V94.7228L279.734 52.9727Z\"\n          fill=\"#A4329B\"\n        />\n        <path\n          d=\"M279.734 796.973L352.234 838.474V921.471L279.734 962.973L207.234 921.471V838.474L279.734 796.973Z\"\n          fill=\"#AA13BE\"\n        />\n        <path\n          d=\"M995.234 52.9727L1067.23 94.7228V178.223L995.234 219.973L923.234 178.223V94.7228L995.234 52.9727Z\"\n          fill=\"#2B548D\"\n        />\n        <path\n          d=\"M995.234 795.973L1067.23 837.474V920.471L995.234 961.973L923.234 920.471V837.474L995.234 795.973Z\"\n          fill=\"#7162DA\"\n        />\n        <path\n          d=\"M280.734 300.973L353.234 342.723V426.223L280.734 467.973L208.234 426.223V342.723L280.734 300.973Z\"\n          fill=\"#B329AE\"\n        />\n        <path\n          d=\"M280.734 1044.97L353.234 1086.47V1169.47L280.734 1210.97L208.234 1169.47V1086.47L280.734 1044.97Z\"\n          fill=\"#A816C0\"\n        />\n        <path\n          d=\"M995.234 299.973L1067.23 341.723V425.223L995.234 466.973L923.234 425.223V341.723L995.234 299.973Z\"\n          fill=\"#366BB9\"\n        />\n        <path\n          d=\"M995.234 1044.97L1067.23 1086.47V1169.47L995.234 1210.97L923.234 1169.47V1086.47L995.234 1044.97Z\"\n          fill=\"#8A51D5\"\n        />\n        <path\n          d=\"M279.734 548.973L352.234 590.723V674.223L279.734 715.973L207.234 674.223V590.723L279.734 548.973Z\"\n          fill=\"#B217BB\"\n        />\n        <path\n          d=\"M995.234 546.973L1067.23 588.723V672.223L995.234 713.973L923.234 672.223V588.723L995.234 546.973Z\"\n          fill=\"#487BDD\"\n        />\n        <path\n          d=\"M351.234 -71.0273L423.234 -29.2773V54.2228L351.234 95.9727L279.234 54.2228V-29.2773L351.234 -71.0273Z\"\n          fill=\"#982994\"\n        />\n        <path\n          d=\"M351.734 672.973L423.234 714.723V798.22L351.734 839.973L280.234 798.22V714.723L351.734 672.973Z\"\n          fill=\"#B312BD\"\n        />\n        <path\n          d=\"M1066.23 -72.0273L1138.23 -30.2773V53.2228L1066.23 94.9727L994.234 53.2228V-30.2773L1066.23 -72.0273Z\"\n          fill=\"#2F558B\"\n        />\n        <path\n          d=\"M1066.23 670.973L1138.23 712.723V796.22L1066.23 837.973L994.234 796.22V712.723L1066.23 670.973Z\"\n          fill=\"#457EE2\"\n        />\n        <path\n          d=\"M351.734 177.973L423.234 219.473V302.473L351.734 343.973L280.234 302.473V219.473L351.734 177.973Z\"\n          fill=\"#AE2FA6\"\n        />\n        <path\n          d=\"M351.734 920.973L423.234 962.719V1046.23L351.734 1087.97L280.234 1046.23V962.719L351.734 920.973Z\"\n          fill=\"#B012C0\"\n        />\n        <path\n          d=\"M1066.23 176.973L1138.23 218.473V301.473L1066.23 342.973L994.234 301.473V218.473L1066.23 176.973Z\"\n          fill=\"#2C5C9A\"\n        />\n        <path\n          d=\"M1067.23 919.973L1139.23 961.719V1045.23L1067.23 1086.97L995.234 1045.23V961.719L1067.23 919.973Z\"\n          fill=\"#7858E0\"\n        />\n        <path\n          d=\"M350.734 425.973L422.234 467.473V550.473L350.734 591.973L279.234 550.473V467.473L350.734 425.973Z\"\n          fill=\"#BB1FBB\"\n        />\n        <path\n          d=\"M351.734 1168.97L423.234 1210.47V1293.47L351.734 1334.97L280.234 1293.47V1210.47L351.734 1168.97Z\"\n          fill=\"#A816C0\"\n        />\n        <path\n          d=\"M1066.23 423.973L1138.23 465.473V548.473L1066.23 589.973L994.234 548.473V465.473L1066.23 423.973Z\"\n          fill=\"#3280D1\"\n        />\n        <path\n          d=\"M1066.23 1167.97L1138.23 1209.47V1292.47L1066.23 1333.97L994.234 1292.47V1209.47L1066.23 1167.97Z\"\n          fill=\"#8A51D5\"\n        />\n        <path\n          d=\"M423.234 52.9727L495.234 94.7228V178.223L423.234 219.973L351.234 178.223V94.7228L423.234 52.9727Z\"\n          fill=\"#982994\"\n        />\n        <path\n          d=\"M423.234 796.973L495.234 838.474V921.471L423.234 962.973L351.234 921.471V838.474L423.234 796.973Z\"\n          fill=\"#B615BF\"\n        />\n        <path\n          d=\"M1138.23 51.9727L1210.23 93.7228V177.223L1138.23 218.973L1066.23 177.223V93.7228L1138.23 51.9727Z\"\n          fill=\"#2F558B\"\n        />\n        <path\n          d=\"M1137.23 795.973L1209.23 837.474V920.471L1137.23 961.973L1065.23 920.471V837.474L1137.23 795.973Z\"\n          fill=\"#586DE3\"\n        />\n        <path\n          d=\"M423.234 300.973L495.234 342.723V426.223L423.234 467.973L351.234 426.223V342.723L423.234 300.973Z\"\n          fill=\"#B223B1\"\n        />\n        <path\n          d=\"M423.234 1044.97L495.234 1086.47V1169.47L423.234 1210.97L351.234 1169.47V1086.47L423.234 1044.97Z\"\n          fill=\"#BA19C2\"\n        />\n        <path\n          d=\"M1138.23 299.973L1210.23 341.723V425.223L1138.23 466.973L1066.23 425.223V341.723L1138.23 299.973Z\"\n          fill=\"#2D6BB1\"\n        />\n        <path\n          d=\"M1138.23 1043.97L1210.23 1085.47V1168.47L1138.23 1209.97L1066.23 1168.47V1085.47L1138.23 1043.97Z\"\n          fill=\"#8452E3\"\n        />\n        <path\n          d=\"M423.234 548.973L495.234 590.723V674.223L423.234 715.973L351.234 674.223V590.723L423.234 548.973Z\"\n          fill=\"#B717BD\"\n        />\n        <path\n          d=\"M1138.23 546.973L1210.23 588.723V672.223L1138.23 713.973L1066.23 672.223V588.723L1138.23 546.973Z\"\n          fill=\"#2E8AE0\"\n        />\n        <path\n          d=\"M494.734 -72.0273L567.234 -30.2773V53.2228L494.734 94.9727L422.234 53.2228V-30.2773L494.734 -72.0273Z\"\n          fill=\"#822190\"\n        />\n        <path\n          d=\"M494.734 672.973L567.234 714.723V798.22L494.734 839.973L422.234 798.22V714.723L494.734 672.973Z\"\n          fill=\"#B61CBF\"\n        />\n        <path\n          d=\"M1209.23 -72.0273L1281.23 -30.2773V53.2228L1209.23 94.9727L1137.23 53.2228V-30.2773L1209.23 -72.0273Z\"\n          fill=\"#2F558B\"\n        />\n        <path\n          d=\"M1209.23 671.973L1281.23 713.723V797.22L1209.23 838.973L1137.23 797.22V713.723L1209.23 671.973Z\"\n          fill=\"#3C85E3\"\n        />\n        <path\n          d=\"M494.734 176.973L567.234 218.473V301.473L494.734 342.973L422.234 301.473V218.473L494.734 176.973Z\"\n          fill=\"#9F22A3\"\n        />\n        <path\n          d=\"M494.734 920.973L567.234 962.719V1046.23L494.734 1087.97L422.234 1046.23V962.719L494.734 920.973Z\"\n          fill=\"#BC22C1\"\n        />\n        <path\n          d=\"M1209.23 175.973L1281.23 217.473V300.473L1209.23 341.973L1137.23 300.473V217.473L1209.23 175.973Z\"\n          fill=\"#2E5B96\"\n        />\n        <path\n          d=\"M1209.23 918.973L1281.23 960.719V1044.23L1209.23 1085.97L1137.23 1044.23V960.719L1209.23 918.973Z\"\n          fill=\"#745CE6\"\n        />\n        <path\n          d=\"M494.734 424.973L567.234 466.473V549.473L494.734 590.973L422.234 549.473V466.473L494.734 424.973Z\"\n          fill=\"#B51EBD\"\n        />\n        <path\n          d=\"M494.734 1168.97L567.234 1210.47V1293.47L494.734 1334.97L422.234 1293.47V1210.47L494.734 1168.97Z\"\n          fill=\"#BA19C2\"\n        />\n        <path\n          d=\"M1209.23 423.973L1281.23 465.473V548.473L1209.23 589.973L1137.23 548.473V465.473L1209.23 423.973Z\"\n          fill=\"#2C82CE\"\n        />\n        <path\n          d=\"M1209.23 1167.97L1281.23 1209.47V1292.47L1209.23 1333.97L1137.23 1292.47V1209.47L1209.23 1167.97Z\"\n          fill=\"#8452E3\"\n        />\n        <path\n          d=\"M567.234 52.9727L639.234 94.7228V178.223L567.234 219.973L495.234 178.223V94.7228L567.234 52.9727Z\"\n          fill=\"#822190\"\n        />\n        <path\n          d=\"M567.234 797.973L639.234 839.474V922.471L567.234 963.973L495.234 922.471V839.474L567.234 797.973Z\"\n          fill=\"#B628C1\"\n        />\n        <path\n          d=\"M1280.74 51.9727L1352.23 93.7228V177.223L1280.74 218.973L1209.23 177.223V93.7228L1280.74 51.9727Z\"\n          fill=\"#2E5B96\"\n        />\n        <path\n          d=\"M1280.74 795.973L1352.23 837.474V920.471L1280.74 961.973L1209.23 920.471V837.474L1280.74 795.973Z\"\n          fill=\"#586DE3\"\n        />\n        <path\n          d=\"M567.234 300.973L639.234 342.723V426.223L567.234 467.973L495.234 426.223V342.723L567.234 300.973Z\"\n          fill=\"#A124B3\"\n        />\n        <path\n          d=\"M566.234 1045.97L638.234 1087.47V1170.47L566.234 1211.97L494.234 1170.47V1087.47L566.234 1045.97Z\"\n          fill=\"#BD2EC0\"\n        />\n        <path\n          d=\"M1280.74 298.973L1352.23 340.723V424.223L1280.74 465.973L1209.23 424.223V340.723L1280.74 298.973Z\"\n          fill=\"#2D6BB1\"\n        />\n        <path\n          d=\"M1280.74 1043.97L1352.23 1085.47V1168.47L1280.74 1209.97L1209.23 1168.47V1085.47L1280.74 1043.97Z\"\n          fill=\"#745CE6\"\n        />\n        <path\n          d=\"M567.234 548.973L639.234 590.723V674.223L567.234 715.973L495.234 674.223V590.723L567.234 548.973Z\"\n          fill=\"#AE24C2\"\n        />\n        <path\n          d=\"M1280.74 546.973L1352.23 588.723V672.223L1280.74 713.973L1209.23 672.223V588.723L1280.74 546.973Z\"\n          fill=\"#2E8AE0\"\n        />\n        <path\n          d=\"M638.234 -72.0273L710.234 -30.2773V53.2228L638.234 94.9727L566.234 53.2228V-30.2773L638.234 -72.0273Z\"\n          fill=\"#5E3690\"\n        />\n        <path\n          d=\"M638.234 672.973L710.234 714.723V798.22L638.234 839.973L566.234 798.22V714.723L638.234 672.973Z\"\n          fill=\"#AA2EC5\"\n        />\n        <path\n          d=\"M638.234 176.973L710.234 218.473V301.473L638.234 342.973L566.234 301.473V218.473L638.234 176.973Z\"\n          fill=\"#812CA2\"\n        />\n        <path\n          d=\"M638.234 920.973L710.234 962.719V1046.23L638.234 1087.97L566.234 1046.23V962.719L638.234 920.973Z\"\n          fill=\"#B535C1\"\n        />\n        <path\n          d=\"M638.234 424.973L710.234 466.473V549.473L638.234 590.973L566.234 549.473V466.473L638.234 424.973Z\"\n          fill=\"#A42FC5\"\n        />\n        <path\n          d=\"M637.234 1169.97L709.234 1211.47V1294.47L637.234 1335.97L565.234 1294.47V1211.47L637.234 1169.97Z\"\n          fill=\"#BD2EC0\"\n        />\n      </g>\n    </g>\n    <defs>\n      <clipPath id=\"clip0_6783_736\">\n        <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n      </clipPath>\n      <clipPath id=\"clip1_6783_736\">\n        <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>";
+
+var HomepageDark2 = "\n  <svg\n    viewBox=\"0 0 1280 1280\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    preserveAspectRatio=\"none\"\n  >\n    <g clipPath=\"url(#clip0_6783_975)\">\n      <path\n        d=\"M71.2233 23.4434L183.189 88.1695V217.622L71.2233 282.348L-40.7422 217.622V88.1695L71.2233 23.4434Z\"\n        fill=\"#4C14B3\"\n      />\n      <path\n        d=\"M183.223 -169.557L295.189 -104.831V24.6216L183.223 89.3477L71.2578 24.6216V-104.831L183.223 -169.557Z\"\n        fill=\"#4C14B3\"\n      />\n      <path\n        d=\"M-40.0346 -170L71.9309 -105.274V24.1783L-40.0346 88.9044L-152 24.1783V-105.274L-40.0346 -170Z\"\n        fill=\"#4C14B3\"\n      />\n      <path\n        d=\"M71.2233 409.033L183.189 473.759V603.211L71.2233 667.938L-40.7422 603.211V473.759L71.2233 409.033Z\"\n        fill=\"#5414B4\"\n      />\n      <path\n        d=\"M71.2233 795.176L183.189 859.764V988.939L71.2233 1053.53L-40.7422 988.939V859.764L71.2233 795.176Z\"\n        fill=\"#641DBA\"\n      />\n      <path\n        d=\"M182.919 216.621L294.884 281.209V410.384L182.919 474.972L70.9531 410.384V281.209L182.919 216.621Z\"\n        fill=\"#4B11B2\"\n      />\n      <path\n        d=\"M-40.0814 216.621L71.884 281.209V410.384L-40.0814 474.972L-152.047 410.384V281.209L-40.0814 216.621Z\"\n        fill=\"#4B11B2\"\n      />\n      <path\n        d=\"M182.919 602.211L294.884 666.937V796.389L182.919 861.115L70.9531 796.389V666.937L182.919 602.211Z\"\n        fill=\"#6A20BD\"\n      />\n      <path\n        d=\"M-40.0814 602.211L71.884 666.937V796.389L-40.0814 861.115L-152.047 796.389V666.937L-40.0814 602.211Z\"\n        fill=\"#6A20BD\"\n      />\n      <path\n        d=\"M182.919 987.801L294.884 1052.53V1181.98L182.919 1246.71L70.9531 1181.98V1052.53L182.919 987.801Z\"\n        fill=\"#5C19B6\"\n      />\n      <path\n        d=\"M-40.0814 988.801L71.884 1053.53V1182.98L-40.0814 1247.71L-152.047 1182.98V1053.53L-40.0814 988.801Z\"\n        fill=\"#5C19B6\"\n      />\n      <path\n        d=\"M71.9186 1181.8L183.884 1246.53V1375.98L71.9186 1440.71L-40.0469 1375.98V1246.53L71.9186 1181.8Z\"\n        fill=\"#5C19B6\"\n      />\n      <path\n        d=\"M294.919 1181.8L406.884 1246.53V1375.98L294.919 1440.71L182.953 1375.98V1246.53L294.919 1181.8Z\"\n        fill=\"#5C19B6\"\n      />\n      <path\n        d=\"M295.161 23.4434L407.126 88.1695V217.622L295.161 282.348L183.195 217.622V88.1695L295.161 23.4434Z\"\n        fill=\"#5215B4\"\n      />\n      <path\n        d=\"M407.161 -170.557L519.126 -105.831V23.6216L407.161 88.3477L295.195 23.6216V-105.831L407.161 -170.557Z\"\n        fill=\"#5215B4\"\n      />\n      <path\n        d=\"M295.161 409.033L407.126 473.759V603.211L295.161 667.938L183.195 603.211V473.759L295.161 409.033Z\"\n        fill=\"#5817B5\"\n      />\n      <path\n        d=\"M295.161 795.176L407.126 859.764V988.939L295.161 1053.53L183.195 988.939V859.764L295.161 795.176Z\"\n        fill=\"#6F25C0\"\n      />\n      <path\n        d=\"M406.848 216.621L518.814 281.209V410.384L406.848 474.972L294.883 410.384V281.209L406.848 216.621Z\"\n        fill=\"#5813B4\"\n      />\n      <path\n        d=\"M406.848 602.211L518.814 666.937V796.389L406.848 861.115L294.883 796.389V666.937L406.848 602.211Z\"\n        fill=\"#7431C4\"\n      />\n      <path\n        d=\"M406.848 987.801L518.814 1052.53V1181.98L406.848 1246.71L294.883 1181.98V1052.53L406.848 987.801Z\"\n        fill=\"#621EBB\"\n      />\n      <path\n        d=\"M518.848 1181.8L630.814 1246.53V1375.98L518.848 1440.71L406.883 1375.98V1246.53L518.848 1181.8Z\"\n        fill=\"#621EBB\"\n      />\n      <path\n        d=\"M519.09 23.4434L631.056 88.1695V217.622L519.09 282.348L407.125 217.622V88.1695L519.09 23.4434Z\"\n        fill=\"#610DB1\"\n      />\n      <path\n        d=\"M631.09 -170.557L743.056 -105.831V23.6216L631.09 88.3477L519.125 23.6216V-105.831L631.09 -170.557Z\"\n        fill=\"#610DB1\"\n      />\n      <path\n        d=\"M519.09 409.033L631.056 473.759V603.211L519.09 667.938L407.125 603.211V473.759L519.09 409.033Z\"\n        fill=\"#6629BD\"\n      />\n      <path\n        d=\"M519.09 795.176L631.056 859.764V988.939L519.09 1053.53L407.125 988.939V859.764L519.09 795.176Z\"\n        fill=\"#783CC8\"\n      />\n      <path\n        d=\"M630.778 216.621L742.743 281.209V410.384L630.778 474.972L518.812 410.384V281.209L630.778 216.621Z\"\n        fill=\"#6614B5\"\n      />\n      <path\n        d=\"M630.778 602.211L742.743 666.937V796.389L630.778 861.115L518.812 796.389V666.937L630.778 602.211Z\"\n        fill=\"#7651C9\"\n      />\n      <path\n        d=\"M630.778 988.801L742.743 1053.53V1182.98L630.778 1247.71L518.812 1182.98V1053.53L630.778 988.801Z\"\n        fill=\"#642DC3\"\n      />\n      <path\n        d=\"M742.778 1181.8L854.743 1246.53V1375.98L742.778 1440.71L630.812 1375.98V1246.53L742.778 1181.8Z\"\n        fill=\"#642DC3\"\n      />\n      <path\n        d=\"M743.02 23.4434L854.986 88.1695V217.622L743.02 282.348L631.055 217.622V88.1695L743.02 23.4434Z\"\n        fill=\"#690CB1\"\n      />\n      <path\n        d=\"M855.02 -170.557L966.986 -105.831V23.6216L855.02 88.3477L743.055 23.6216V-105.831L855.02 -170.557Z\"\n        fill=\"#690CB1\"\n      />\n      <path\n        d=\"M743.02 409.033L854.986 473.759V603.211L743.02 667.938L631.055 603.211V473.759L743.02 409.033Z\"\n        fill=\"#6E51C7\"\n      />\n      <path\n        d=\"M743.02 796.176L854.986 860.764V989.939L743.02 1054.53L631.055 989.939V860.764L743.02 796.176Z\"\n        fill=\"#704DC6\"\n      />\n      <path\n        d=\"M854.708 216.621L966.673 281.209V410.384L854.708 474.972L742.742 410.384V281.209L854.708 216.621Z\"\n        fill=\"#6A38C2\"\n      />\n      <path\n        d=\"M854.708 602.211L966.673 666.937V796.389L854.708 861.115L742.742 796.389V666.937L854.708 602.211Z\"\n        fill=\"#8380CC\"\n      />\n      <path\n        d=\"M854.708 987.801L966.673 1052.53V1181.98L854.708 1246.71L742.742 1181.98V1052.53L854.708 987.801Z\"\n        fill=\"#5C36C2\"\n      />\n      <path\n        d=\"M965.708 1181.8L1077.67 1246.53V1375.98L965.708 1440.71L853.742 1375.98V1246.53L965.708 1181.8Z\"\n        fill=\"#5C36C2\"\n      />\n      <path\n        d=\"M1077.71 987.801L1189.67 1052.53V1181.98L1077.71 1246.71L965.742 1181.98V1052.53L1077.71 987.801Z\"\n        fill=\"#6A60C5\"\n      />\n      <path\n        d=\"M1188.71 1181.8L1300.67 1246.53V1375.98L1188.71 1440.71L1076.74 1375.98V1246.53L1188.71 1181.8Z\"\n        fill=\"#6A60C5\"\n      />\n      <path\n        d=\"M1300.71 989.801L1412.67 1054.53V1183.98L1300.71 1248.71L1188.74 1183.98V1054.53L1300.71 989.801Z\"\n        fill=\"#6A60C5\"\n      />\n      <path\n        d=\"M966.95 23.4434L1078.92 88.1695V217.622L966.95 282.348L854.984 217.622V88.1695L966.95 23.4434Z\"\n        fill=\"#593CC3\"\n      />\n      <path\n        d=\"M1078.95 -170.557L1190.92 -105.831V23.6216L1078.95 88.3477L966.984 23.6216V-105.831L1078.95 -170.557Z\"\n        fill=\"#593CC3\"\n      />\n      <path\n        d=\"M966.95 409.033L1078.92 473.759V603.211L966.95 667.938L854.984 603.211V473.759L966.95 409.033Z\"\n        fill=\"#799AD6\"\n      />\n      <path\n        d=\"M966.95 795.176L1078.92 859.764V988.939L966.95 1053.53L854.984 988.939V859.764L966.95 795.176Z\"\n        fill=\"#7B6AC1\"\n      />\n      <path\n        d=\"M1078.64 216.621L1190.6 281.209V410.384L1078.64 474.972L966.672 410.384V281.209L1078.64 216.621Z\"\n        fill=\"#6C8CDE\"\n      />\n      <path\n        d=\"M1301.64 216.621L1413.6 281.209V410.384L1301.64 474.972L1189.67 410.384V281.209L1301.64 216.621Z\"\n        fill=\"#6C8CDE\"\n      />\n      <path\n        d=\"M1078.64 602.211L1190.6 666.937V796.389L1078.64 861.115L966.672 796.389V666.937L1078.64 602.211Z\"\n        fill=\"#AAB1C7\"\n      />\n      <path\n        d=\"M1301.64 602.211L1413.6 666.937V796.389L1301.64 861.115L1189.67 796.389V666.937L1301.64 602.211Z\"\n        fill=\"#AAB1C7\"\n      />\n      <path\n        d=\"M1190.88 23.4434L1302.84 88.1695V217.622L1190.88 282.348L1078.91 217.622V88.1695L1190.88 23.4434Z\"\n        fill=\"#5F63D2\"\n      />\n      <path\n        d=\"M1302.88 -170.557L1414.84 -105.831V23.6216L1302.88 88.3477L1190.91 23.6216V-105.831L1302.88 -170.557Z\"\n        fill=\"#5F63D2\"\n      />\n      <path\n        d=\"M1190.88 409.033L1302.84 473.759V603.211L1190.88 667.938L1078.91 603.211V473.759L1190.88 409.033Z\"\n        fill=\"#9CBCDA\"\n      />\n      <path\n        d=\"M1190.88 796.176L1302.84 860.764V989.939L1190.88 1054.53L1078.91 989.939V860.764L1190.88 796.176Z\"\n        fill=\"#8675BD\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_6783_975\">\n        <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>";
+
+var ProductpageDark1 = "<svg\n  width=\"1280\"\n  height=\"1280\"\n  viewBox=\"0 0 1280 1280\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  preserveAspectRatio=\"none\"\n>\n  <g clipPath=\"url(#clip0_6783_1488)\">\n    <path\n      d=\"M71.2233 23.4434L183.189 88.1695V217.622L71.2233 282.348L-40.7422 217.622V88.1695L71.2233 23.4434Z\"\n      fill=\"#403FA4\"\n    />\n    <path\n      d=\"M183.223 -170.557L295.189 -105.831V23.6217L183.223 88.3477L71.2578 23.6217V-105.831L183.223 -170.557Z\"\n      fill=\"#403FA4\"\n    />\n    <path\n      d=\"M-40.7768 -170.557L71.1887 -105.831V23.6217L-40.7768 88.3477L-152.742 23.6217V-105.831L-40.7768 -170.557Z\"\n      fill=\"#403FA4\"\n    />\n    <path\n      d=\"M71.2233 409.033L183.189 473.759V603.211L71.2233 667.938L-40.7422 603.211V473.759L71.2233 409.033Z\"\n      fill=\"#4047A2\"\n    />\n    <path\n      d=\"M71.2233 795.176L183.189 859.764V988.939L71.2233 1053.53L-40.7422 988.939V859.764L71.2233 795.176Z\"\n      fill=\"#3F4BA2\"\n    />\n    <path\n      d=\"M182.919 216.621L294.884 281.209V410.384L182.919 474.972L70.9531 410.384V281.209L182.919 216.621Z\"\n      fill=\"#4141A4\"\n    />\n    <path\n      d=\"M-40.0814 216.621L71.884 281.209V410.384L-40.0814 474.972L-152.047 410.384V281.209L-40.0814 216.621Z\"\n      fill=\"#4141A4\"\n    />\n    <path\n      d=\"M182.919 602.211L294.884 666.937V796.389L182.919 861.115L70.9531 796.389V666.937L182.919 602.211Z\"\n      fill=\"#3E49A1\"\n    />\n    <path\n      d=\"M-39.0814 603.211L72.884 667.937V797.389L-39.0814 862.115L-151.047 797.389V667.937L-39.0814 603.211Z\"\n      fill=\"#3E49A1\"\n    />\n    <path\n      d=\"M182.919 987.801L294.884 1052.53V1181.98L182.919 1246.71L70.9531 1181.98V1052.53L182.919 987.801Z\"\n      fill=\"#404CA3\"\n    />\n    <path\n      d=\"M-40.0814 987.801L71.884 1052.53V1181.98L-40.0814 1246.71L-152.047 1181.98V1052.53L-40.0814 987.801Z\"\n      fill=\"#404CA3\"\n    />\n    <path\n      d=\"M71.9186 1181.8L183.884 1246.53V1375.98L71.9186 1440.71L-40.0469 1375.98V1246.53L71.9186 1181.8Z\"\n      fill=\"#404CA3\"\n    />\n    <path\n      d=\"M295.161 23.4434L407.126 88.1695V217.622L295.161 282.348L183.195 217.622V88.1695L295.161 23.4434Z\"\n      fill=\"#403BA4\"\n    />\n    <path\n      d=\"M407.161 -170.557L519.126 -105.831V23.6217L407.161 88.3477L295.195 23.6217V-105.831L407.161 -170.557Z\"\n      fill=\"#403BA4\"\n    />\n    <path\n      d=\"M295.161 409.033L407.126 473.759V603.211L295.161 667.938L183.195 603.211V473.759L295.161 409.033Z\"\n      fill=\"#4247A2\"\n    />\n    <path\n      d=\"M295.161 795.176L407.126 859.764V988.939L295.161 1053.53L183.195 988.939V859.764L295.161 795.176Z\"\n      fill=\"#404AA1\"\n    />\n    <path\n      d=\"M406.848 216.621L518.814 281.209V410.384L406.848 474.972L294.883 410.384V281.209L406.848 216.621Z\"\n      fill=\"#4741A4\"\n    />\n    <path\n      d=\"M406.848 602.211L518.814 666.937V796.389L406.848 861.115L294.883 796.389V666.937L406.848 602.211Z\"\n      fill=\"#4347A0\"\n    />\n    <path\n      d=\"M406.848 987.801L518.814 1052.53V1181.98L406.848 1246.71L294.883 1181.98V1052.53L406.848 987.801Z\"\n      fill=\"#42489E\"\n    />\n    <path\n      d=\"M295.848 1180.8L407.814 1245.53V1374.98L295.848 1439.71L183.883 1374.98V1245.53L295.848 1180.8Z\"\n      fill=\"#42489E\"\n    />\n    <path\n      d=\"M519.09 23.4434L631.056 88.1695V217.622L519.09 282.348L407.125 217.622V88.1695L519.09 23.4434Z\"\n      fill=\"#4A3DA4\"\n    />\n    <path\n      d=\"M631.09 -170.557L743.056 -105.831V23.6217L631.09 88.3477L519.125 23.6217V-105.831L631.09 -170.557Z\"\n      fill=\"#4A3DA4\"\n    />\n    <path\n      d=\"M519.09 409.033L631.056 473.759V603.211L519.09 667.938L407.125 603.211V473.759L519.09 409.033Z\"\n      fill=\"#4843A1\"\n    />\n    <path\n      d=\"M519.09 795.176L631.056 859.764V988.939L519.09 1053.53L407.125 988.939V859.764L519.09 795.176Z\"\n      fill=\"#47469E\"\n    />\n    <path\n      d=\"M630.778 216.621L742.743 281.209V410.384L630.778 474.972L518.812 410.384V281.209L630.778 216.621Z\"\n      fill=\"#4E3CA2\"\n    />\n    <path\n      d=\"M630.778 602.211L742.743 666.937V796.389L630.778 861.115L518.812 796.389V666.937L630.778 602.211Z\"\n      fill=\"#4B429D\"\n    />\n    <path\n      d=\"M630.778 987.801L742.743 1052.53V1181.98L630.778 1246.71L518.812 1181.98V1052.53L630.778 987.801Z\"\n      fill=\"#4A459C\"\n    />\n    <path\n      d=\"M630.778 987.801L742.743 1052.53V1181.98L630.778 1246.71L518.812 1181.98V1052.53L630.778 987.801Z\"\n      fill=\"#4A459C\"\n    />\n    <path\n      d=\"M519.778 1180.8L631.743 1245.53V1374.98L519.778 1439.71L407.812 1374.98V1245.53L519.778 1180.8Z\"\n      fill=\"#4A459C\"\n    />\n    <path\n      d=\"M742.778 1181.8L854.743 1246.53V1375.98L742.778 1440.71L630.812 1375.98V1246.53L742.778 1181.8Z\"\n      fill=\"#4A459C\"\n    />\n    <path\n      d=\"M743.02 23.4434L854.986 88.1695V217.622L743.02 282.348L631.055 217.622V88.1695L743.02 23.4434Z\"\n      fill=\"#5338A4\"\n    />\n    <path\n      d=\"M855.02 -170.557L966.986 -105.831V23.6217L855.02 88.3477L743.055 23.6217V-105.831L855.02 -170.557Z\"\n      fill=\"#5338A4\"\n    />\n    <path\n      d=\"M743.02 409.033L854.986 473.759V603.211L743.02 667.938L631.055 603.211V473.759L743.02 409.033Z\"\n      fill=\"#513EA0\"\n    />\n    <path\n      d=\"M743.02 795.176L854.986 859.764V988.939L743.02 1053.53L631.055 988.939V859.764L743.02 795.176Z\"\n      fill=\"#4F429A\"\n    />\n    <path\n      d=\"M854.708 216.621L966.673 281.209V410.384L854.708 474.972L742.742 410.384V281.209L854.708 216.621Z\"\n      fill=\"#5537A2\"\n    />\n    <path\n      d=\"M854.708 602.211L966.673 666.937V796.389L854.708 861.115L742.742 796.389V666.937L854.708 602.211Z\"\n      fill=\"#543E9B\"\n    />\n    <path\n      d=\"M854.708 987.801L966.673 1052.53V1181.98L854.708 1246.71L742.742 1181.98V1052.53L854.708 987.801Z\"\n      fill=\"#524198\"\n    />\n    <path\n      d=\"M965.708 1181.8L1077.67 1246.53V1375.98L965.708 1440.71L853.742 1375.98V1246.53L965.708 1181.8Z\"\n      fill=\"#524198\"\n    />\n    <path\n      d=\"M1077.71 987.801L1189.67 1052.53V1181.98L1077.71 1246.71L965.742 1181.98V1052.53L1077.71 987.801Z\"\n      fill=\"#5A4096\"\n    />\n    <path\n      d=\"M1300.71 988.801L1412.67 1053.53V1182.98L1300.71 1247.71L1188.74 1182.98V1053.53L1300.71 988.801Z\"\n      fill=\"#5A4096\"\n    />\n    <path\n      d=\"M1188.71 1181.8L1300.67 1246.53V1375.98L1188.71 1440.71L1076.74 1375.98V1246.53L1188.71 1181.8Z\"\n      fill=\"#5A4096\"\n    />\n    <path\n      d=\"M966.95 23.4434L1078.92 88.1695V217.622L966.95 282.348L854.984 217.622V88.1695L966.95 23.4434Z\"\n      fill=\"#5934A2\"\n    />\n    <path\n      d=\"M1077.95 -169.557L1189.92 -104.831V24.6217L1077.95 89.3477L965.984 24.6217V-104.831L1077.95 -169.557Z\"\n      fill=\"#5934A2\"\n    />\n    <path\n      d=\"M966.95 409.033L1078.92 473.759V603.211L966.95 667.938L854.984 603.211V473.759L966.95 409.033Z\"\n      fill=\"#58399E\"\n    />\n    <path\n      d=\"M966.95 795.176L1078.92 859.764V988.939L966.95 1053.53L854.984 988.939V859.764L966.95 795.176Z\"\n      fill=\"#563F97\"\n    />\n    <path\n      d=\"M1078.64 216.621L1190.6 281.209V410.384L1078.64 474.972L966.672 410.384V281.209L1078.64 216.621Z\"\n      fill=\"#5A349F\"\n    />\n    <path\n      d=\"M1301.64 216.621L1413.6 281.209V410.384L1301.64 474.972L1189.67 410.384V281.209L1301.64 216.621Z\"\n      fill=\"#5A349F\"\n    />\n    <path\n      d=\"M1078.64 602.211L1190.6 666.937V796.389L1078.64 861.115L966.672 796.389V666.937L1078.64 602.211Z\"\n      fill=\"#5A3B98\"\n    />\n    <path\n      d=\"M1301.64 602.211L1413.6 666.937V796.389L1301.64 861.115L1189.67 796.389V666.937L1301.64 602.211Z\"\n      fill=\"#5A3B98\"\n    />\n    <path\n      d=\"M1190.88 23.4434L1302.84 88.1695V217.622L1190.88 282.348L1078.91 217.622V88.1695L1190.88 23.4434Z\"\n      fill=\"#5F35A2\"\n    />\n    <path\n      d=\"M1301.88 -170.557L1413.84 -105.831V23.6217L1301.88 88.3477L1189.91 23.6217V-105.831L1301.88 -170.557Z\"\n      fill=\"#5F35A2\"\n    />\n    <path\n      d=\"M1190.88 409.033L1302.84 473.759V603.211L1190.88 667.938L1078.91 603.211V473.759L1190.88 409.033Z\"\n      fill=\"#5B389B\"\n    />\n    <path\n      d=\"M1190.88 795.176L1302.84 859.764V988.939L1190.88 1053.53L1078.91 988.939V859.764L1190.88 795.176Z\"\n      fill=\"#593C95\"\n    />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_6783_1488\">\n      <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>";
+
+var ProductpageDark2 = "<svg\n  viewBox=\"0 0 1280 1280\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  preserveAspectRatio=\"none\"\n>\n  <g clipPath=\"url(#clip0_6783_1727)\">\n    <path\n      d=\"M71.2233 23.4434L183.189 88.1695V217.622L71.2233 282.348L-40.7422 217.622V88.1695L71.2233 23.4434Z\"\n      fill=\"#611897\"\n    />\n    <path\n      d=\"M182.223 -169.557L294.189 -104.831V24.6217L182.223 89.3477L70.2578 24.6217V-104.831L182.223 -169.557Z\"\n      fill=\"#611897\"\n    />\n    <path\n      d=\"M-40.7768 -170.557L71.1887 -105.831V23.6217L-40.7768 88.3477L-152.742 23.6217V-105.831L-40.7768 -170.557Z\"\n      fill=\"#611897\"\n    />\n    <path\n      d=\"M71.2233 409.033L183.189 473.759V603.211L71.2233 667.938L-40.7422 603.211V473.759L71.2233 409.033Z\"\n      fill=\"#6A11A4\"\n    />\n    <path\n      d=\"M71.2233 795.176L183.189 859.764V988.939L71.2233 1053.53L-40.7422 988.939V859.764L71.2233 795.176Z\"\n      fill=\"#6A11A4\"\n    />\n    <path\n      d=\"M182.919 216.621L294.884 281.209V410.384L182.919 474.972L70.9531 410.384V281.209L182.919 216.621Z\"\n      fill=\"#63109E\"\n    />\n    <path\n      d=\"M-40.0814 216.621L71.884 281.209V410.384L-40.0814 474.972L-152.047 410.384V281.209L-40.0814 216.621Z\"\n      fill=\"#63109E\"\n    />\n    <path\n      d=\"M182.919 602.211L294.884 666.937V796.389L182.919 861.115L70.9531 796.389V666.937L182.919 602.211Z\"\n      fill=\"#6910A3\"\n    />\n    <path\n      d=\"M-40.0814 602.211L71.884 666.937V796.389L-40.0814 861.115L-152.047 796.389V666.937L-40.0814 602.211Z\"\n      fill=\"#6910A3\"\n    />\n    <path\n      d=\"M182.919 987.801L294.884 1052.53V1181.98L182.919 1246.71L70.9531 1181.98V1052.53L182.919 987.801Z\"\n      fill=\"#6B15A4\"\n    />\n    <path\n      d=\"M71.9186 1181.8L183.884 1246.53V1375.98L71.9186 1440.71L-40.0469 1375.98V1246.53L71.9186 1181.8Z\"\n      fill=\"#6B15A4\"\n    />\n    <path\n      d=\"M-40.0814 987.801L71.884 1052.53V1181.98L-40.0814 1246.71L-152.047 1181.98V1052.53L-40.0814 987.801Z\"\n      fill=\"#6B15A4\"\n    />\n    <path\n      d=\"M295.161 23.4434L407.126 88.1695V217.622L295.161 282.348L183.195 217.622V88.1695L295.161 23.4434Z\"\n      fill=\"#5E119A\"\n    />\n    <path\n      d=\"M406.161 -169.557L518.126 -104.831V24.6217L406.161 89.3477L294.195 24.6217V-104.831L406.161 -169.557Z\"\n      fill=\"#5E119A\"\n    />\n    <path\n      d=\"M295.161 409.033L407.126 473.759V603.211L295.161 667.938L183.195 603.211V473.759L295.161 409.033Z\"\n      fill=\"#6811A5\"\n    />\n    <path\n      d=\"M295.161 795.176L407.126 859.764V988.939L295.161 1053.53L183.195 988.939V859.764L295.161 795.176Z\"\n      fill=\"#6811A5\"\n    />\n    <path\n      d=\"M406.848 216.621L518.814 281.209V410.384L406.848 474.972L294.883 410.384V281.209L406.848 216.621Z\"\n      fill=\"#6412A5\"\n    />\n    <path\n      d=\"M406.848 602.211L518.814 666.937V796.389L406.848 861.115L294.883 796.389V666.937L406.848 602.211Z\"\n      fill=\"#6711A4\"\n    />\n    <path\n      d=\"M406.848 987.801L518.814 1052.53V1181.98L406.848 1246.71L294.883 1181.98V1052.53L406.848 987.801Z\"\n      fill=\"#6512A6\"\n    />\n    <path\n      d=\"M518.848 1181.8L630.814 1246.53V1375.98L518.848 1440.71L406.883 1375.98V1246.53L518.848 1181.8Z\"\n      fill=\"#6512A6\"\n    />\n    <path\n      d=\"M295.848 1180.8L407.814 1245.53V1374.98L295.848 1439.71L183.883 1374.98V1245.53L295.848 1180.8Z\"\n      fill=\"#6512A6\"\n    />\n    <path\n      d=\"M519.09 23.4434L631.056 88.1695V217.622L519.09 282.348L407.125 217.622V88.1695L519.09 23.4434Z\"\n      fill=\"#6112A7\"\n    />\n    <path\n      d=\"M630.09 -169.557L742.056 -104.831V24.6217L630.09 89.3477L518.125 24.6217V-104.831L630.09 -169.557Z\"\n      fill=\"#6112A7\"\n    />\n    <path\n      d=\"M519.09 409.033L631.056 473.759V603.211L519.09 667.938L407.125 603.211V473.759L519.09 409.033Z\"\n      fill=\"#6413A6\"\n    />\n    <path\n      d=\"M519.09 795.176L631.056 859.764V988.939L519.09 1053.53L407.125 988.939V859.764L519.09 795.176Z\"\n      fill=\"#6412A6\"\n    />\n    <path\n      d=\"M630.778 216.621L742.743 281.209V410.384L630.778 474.972L518.812 410.384V281.209L630.778 216.621Z\"\n      fill=\"#6013A9\"\n    />\n    <path\n      d=\"M630.778 602.211L742.743 666.937V796.389L630.778 861.115L518.812 796.389V666.937L630.778 602.211Z\"\n      fill=\"#6114A7\"\n    />\n    <path\n      d=\"M630.778 987.801L742.743 1052.53V1181.98L630.778 1246.71L518.812 1181.98V1052.53L630.778 987.801Z\"\n      fill=\"#6015A8\"\n    />\n    <path\n      d=\"M742.778 1181.8L854.743 1246.53V1375.98L742.778 1440.71L630.812 1375.98V1246.53L742.778 1181.8Z\"\n      fill=\"#6015A8\"\n    />\n    <path\n      d=\"M743.02 23.4434L854.986 88.1695V217.622L743.02 282.348L631.055 217.622V88.1695L743.02 23.4434Z\"\n      fill=\"#5D17AA\"\n    />\n    <path\n      d=\"M854.02 -169.557L965.986 -104.831V24.6217L854.02 89.3477L742.055 24.6217V-104.831L854.02 -169.557Z\"\n      fill=\"#5D17AA\"\n    />\n    <path\n      d=\"M743.02 409.033L854.986 473.759V603.211L743.02 667.938L631.055 603.211V473.759L743.02 409.033Z\"\n      fill=\"#5E17A9\"\n    />\n    <path\n      d=\"M743.02 795.176L854.986 859.764V988.939L743.02 1053.53L631.055 988.939V859.764L743.02 795.176Z\"\n      fill=\"#5D17A8\"\n    />\n    <path\n      d=\"M854.708 216.621L966.673 281.209V410.384L854.708 474.972L742.742 410.384V281.209L854.708 216.621Z\"\n      fill=\"#5A19AB\"\n    />\n    <path\n      d=\"M854.708 602.211L966.673 666.937V796.389L854.708 861.115L742.742 796.389V666.937L854.708 602.211Z\"\n      fill=\"#5A1AA9\"\n    />\n    <path\n      d=\"M854.708 987.801L966.673 1052.53V1181.98L854.708 1246.71L742.742 1181.98V1052.53L854.708 987.801Z\"\n      fill=\"#571AA9\"\n    />\n    <path\n      d=\"M966.708 1181.8L1078.67 1246.53V1375.98L966.708 1440.71L854.742 1375.98V1246.53L966.708 1181.8Z\"\n      fill=\"#571AA9\"\n    />\n    <path\n      d=\"M1077.71 987.801L1189.67 1052.53V1181.98L1077.71 1246.71L965.742 1181.98V1052.53L1077.71 987.801Z\"\n      fill=\"#5423AC\"\n    />\n    <path\n      d=\"M1300.71 988.801L1412.67 1053.53V1182.98L1300.71 1247.71L1188.74 1182.98V1053.53L1300.71 988.801Z\"\n      fill=\"#5423AC\"\n    />\n    <path\n      d=\"M1187.71 1181.8L1299.67 1246.53V1375.98L1187.71 1440.71L1075.74 1375.98V1246.53L1187.71 1181.8Z\"\n      fill=\"#5423AC\"\n    />\n    <path\n      d=\"M966.95 23.4434L1078.92 88.1695V217.622L966.95 282.348L854.984 217.622V88.1695L966.95 23.4434Z\"\n      fill=\"#581CAD\"\n    />\n    <path\n      d=\"M966.95 409.033L1078.92 473.759V603.211L966.95 667.938L854.984 603.211V473.759L966.95 409.033Z\"\n      fill=\"#571DAB\"\n    />\n    <path\n      d=\"M966.95 795.176L1078.92 859.764V988.939L966.95 1053.53L854.984 988.939V859.764L966.95 795.176Z\"\n      fill=\"#561EAA\"\n    />\n    <path\n      d=\"M1078.64 216.621L1190.6 281.209V410.384L1078.64 474.972L966.672 410.384V281.209L1078.64 216.621Z\"\n      fill=\"#551DAB\"\n    />\n    <path\n      d=\"M1301.64 216.621L1413.6 281.209V410.384L1301.64 474.972L1189.67 410.384V281.209L1301.64 216.621Z\"\n      fill=\"#551DAB\"\n    />\n    <path\n      d=\"M1078.64 602.211L1190.6 666.937V796.389L1078.64 861.115L966.672 796.389V666.937L1078.64 602.211Z\"\n      fill=\"#5320AB\"\n    />\n    <path\n      d=\"M1301.64 602.211L1413.6 666.937V796.389L1301.64 861.115L1189.67 796.389V666.937L1301.64 602.211Z\"\n      fill=\"#5320AB\"\n    />\n    <path\n      d=\"M1190.88 23.4434L1302.84 88.1695V217.622L1190.88 282.348L1078.91 217.622V88.1695L1190.88 23.4434Z\"\n      fill=\"#5B26AE\"\n    />\n    <path\n      d=\"M1301.88 -170.557L1413.84 -105.831V23.6217L1301.88 88.3477L1189.91 23.6217V-105.831L1301.88 -170.557Z\"\n      fill=\"#5B26AE\"\n    />\n    <path\n      d=\"M1077.88 -169.557L1189.84 -104.831V24.6217L1077.88 89.3477L965.914 24.6217V-104.831L1077.88 -169.557Z\"\n      fill=\"#5B26AE\"\n    />\n    <path\n      d=\"M1190.88 409.033L1302.84 473.759V603.211L1190.88 667.938L1078.91 603.211V473.759L1190.88 409.033Z\"\n      fill=\"#531FAA\"\n    />\n    <path\n      d=\"M1190.88 795.176L1302.84 859.764V988.939L1190.88 1053.53L1078.91 988.939V859.764L1190.88 795.176Z\"\n      fill=\"#5221AA\"\n    />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_6783_1727\">\n      <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>";
+
+var HomepageLight1 = "<svg\n  viewBox=\"0 0 1280 1280\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  preserveAspectRatio=\"none\"\n>\n  <g clipPath=\"url(#clip0_6783_462)\">\n    <g clipPath=\"url(#clip1_6783_462)\">\n      <path\n        d=\"M71.2233 23.4434L183.189 88.1695V217.622L71.2233 282.348L-40.7422 217.622V88.1695L71.2233 23.4434Z\"\n        fill=\"#D6DCEF\"\n      />\n      <path\n        d=\"M-40.7767 -170.557L71.1887 -105.831V23.6216L-40.7767 88.3477L-152.742 23.6216V-105.831L-40.7767 -170.557Z\"\n        fill=\"#D6DCEF\"\n      />\n      <path\n        d=\"M71.2233 409.033L183.189 473.759V603.211L71.2233 667.938L-40.7422 603.211V473.759L71.2233 409.033Z\"\n        fill=\"#DEDDF4\"\n      />\n      <path\n        d=\"M71.2233 795.176L183.189 859.764V988.939L71.2233 1053.53L-40.7422 988.939V859.764L71.2233 795.176Z\"\n        fill=\"#F4E9F2\"\n      />\n      <path\n        d=\"M182.919 217.621L294.884 282.209V411.384L182.919 475.972L70.9531 411.384V282.209L182.919 217.621Z\"\n        fill=\"#D7DCF3\"\n      />\n      <path\n        d=\"M-41.0814 216.621L70.884 281.209V410.384L-41.0814 474.972L-153.047 410.384V281.209L-41.0814 216.621Z\"\n        fill=\"#D7DCF3\"\n      />\n      <path\n        d=\"M182.919 603.211L294.884 667.937V797.389L182.919 862.115L70.9531 797.389V667.937L182.919 603.211Z\"\n        fill=\"#E9E2F5\"\n      />\n      <path\n        d=\"M-41.0814 602.211L70.884 666.937V796.389L-41.0814 861.115L-153.047 796.389V666.937L-41.0814 602.211Z\"\n        fill=\"#E9E2F5\"\n      />\n      <path\n        d=\"M182.919 988.801L294.884 1053.53V1182.98L182.919 1247.71L70.9531 1182.98V1053.53L182.919 988.801Z\"\n        fill=\"#F8EDF1\"\n      />\n      <path\n        d=\"M-41.0814 988.801L70.884 1053.53V1182.98L-41.0814 1247.71L-153.047 1182.98V1053.53L-41.0814 988.801Z\"\n        fill=\"#F8EDF1\"\n      />\n      <path\n        d=\"M70.9186 1182.8L182.884 1247.53V1376.98L70.9186 1441.71L-41.0469 1376.98V1247.53L70.9186 1182.8Z\"\n        fill=\"#F8EDF1\"\n      />\n      <path\n        d=\"M295.161 23.4434L407.126 88.1695V217.622L295.161 282.348L183.195 217.622V88.1695L295.161 23.4434Z\"\n        fill=\"#D5DCF2\"\n      />\n      <path\n        d=\"M183.161 -170.557L295.126 -105.831V23.6216L183.161 88.3477L71.1953 23.6216V-105.831L183.161 -170.557Z\"\n        fill=\"#D5DCF2\"\n      />\n      <path\n        d=\"M295.161 409.033L407.126 473.759V603.211L295.161 667.938L183.195 603.211V473.759L295.161 409.033Z\"\n        fill=\"#E0E0F5\"\n      />\n      <path\n        d=\"M295.161 795.176L407.126 859.764V988.939L295.161 1053.53L183.195 988.939V859.764L295.161 795.176Z\"\n        fill=\"#F5EAF3\"\n      />\n      <path\n        d=\"M406.848 217.621L518.814 282.209V411.384L406.848 475.972L294.883 411.384V282.209L406.848 217.621Z\"\n        fill=\"#DDE1F4\"\n      />\n      <path\n        d=\"M406.848 603.211L518.814 667.937V797.389L406.848 862.115L294.883 797.389V667.937L406.848 603.211Z\"\n        fill=\"#EDE8F6\"\n      />\n      <path\n        d=\"M406.848 988.801L518.814 1053.53V1182.98L406.848 1247.71L294.883 1182.98V1053.53L406.848 988.801Z\"\n        fill=\"#FAF1F5\"\n      />\n      <path\n        d=\"M294.848 1182.8L406.814 1247.53V1376.98L294.848 1441.71L182.883 1376.98V1247.53L294.848 1182.8Z\"\n        fill=\"#FAF1F5\"\n      />\n      <path\n        d=\"M519.09 23.4434L631.056 88.1695V217.622L519.09 282.348L407.125 217.622V88.1695L519.09 23.4434Z\"\n        fill=\"#E0E3F5\"\n      />\n      <path\n        d=\"M407.09 -170.557L519.056 -105.831V23.6216L407.09 88.3477L295.125 23.6216V-105.831L407.09 -170.557Z\"\n        fill=\"#E0E3F5\"\n      />\n      <path\n        d=\"M519.09 409.033L631.056 473.759V603.211L519.09 667.938L407.125 603.211V473.759L519.09 409.033Z\"\n        fill=\"#EBEBF8\"\n      />\n      <path\n        d=\"M519.09 795.176L631.056 859.764V988.939L519.09 1053.53L407.125 988.939V859.764L519.09 795.176Z\"\n        fill=\"#F9F2F7\"\n      />\n      <path\n        d=\"M630.778 217.621L742.743 282.209V411.384L630.778 475.972L518.812 411.384V282.209L630.778 217.621Z\"\n        fill=\"#EAEBF6\"\n      />\n      <path\n        d=\"M630.778 603.211L742.743 667.937V797.389L630.778 862.115L518.812 797.389V667.937L630.778 603.211Z\"\n        fill=\"#F8F4FA\"\n      />\n      <path\n        d=\"M630.778 988.801L742.743 1053.53V1182.98L630.778 1247.71L518.812 1182.98V1053.53L630.778 988.801Z\"\n        fill=\"#FDF8FA\"\n      />\n      <path\n        d=\"M518.778 1181.8L630.743 1246.53V1375.98L518.778 1440.71L406.812 1375.98V1246.53L518.778 1181.8Z\"\n        fill=\"#FDF8FA\"\n      />\n      <path\n        d=\"M741.778 1184.8L853.743 1249.53V1378.98L741.778 1443.71L629.812 1378.98V1249.53L741.778 1184.8Z\"\n        fill=\"#FDF8FA\"\n      />\n      <path\n        d=\"M743.02 23.4434L854.986 88.1695V217.622L743.02 282.348L631.055 217.622V88.1695L743.02 23.4434Z\"\n        fill=\"#EAE9F5\"\n      />\n      <path\n        d=\"M631.02 -170.557L742.986 -105.831V23.6216L631.02 88.3477L519.055 23.6216V-105.831L631.02 -170.557Z\"\n        fill=\"#EAE9F5\"\n      />\n      <path\n        d=\"M743.02 409.033L854.986 473.759V603.211L743.02 667.938L631.055 603.211V473.759L743.02 409.033Z\"\n        fill=\"#F6F5FB\"\n      />\n      <path\n        d=\"M743.02 795.176L854.986 859.764V988.939L743.02 1053.53L631.055 988.939V859.764L743.02 795.176Z\"\n        fill=\"#FDFAFC\"\n      />\n      <path\n        d=\"M854.708 217.621L966.673 282.209V411.384L854.708 475.972L742.742 411.384V282.209L854.708 217.621Z\"\n        fill=\"#F0EDF7\"\n      />\n      <path\n        d=\"M854.708 603.211L966.673 667.937V797.389L854.708 862.115L742.742 797.389V667.937L854.708 603.211Z\"\n        fill=\"#FBFAFC\"\n      />\n      <path\n        d=\"M854.708 988.801L966.673 1053.53V1182.98L854.708 1247.71L742.742 1182.98V1053.53L854.708 988.801Z\"\n        fill=\"#FDFBFC\"\n      />\n      <path\n        d=\"M965.708 1183.8L1077.67 1248.53V1377.98L965.708 1442.71L853.742 1377.98V1248.53L965.708 1183.8Z\"\n        fill=\"#FDFBFC\"\n      />\n      <path\n        d=\"M966.95 23.4434L1078.92 88.1695V217.622L966.95 282.348L854.984 217.622V88.1695L966.95 23.4434Z\"\n        fill=\"#EAE4F3\"\n      />\n      <path\n        d=\"M854.95 -170.557L966.915 -105.831V23.6216L854.95 88.3477L742.984 23.6216V-105.831L854.95 -170.557Z\"\n        fill=\"#EAE4F3\"\n      />\n      <path\n        d=\"M966.95 409.033L1078.92 473.759V603.211L966.95 667.938L854.984 603.211V473.759L966.95 409.033Z\"\n        fill=\"#F5F5FB\"\n      />\n      <path\n        d=\"M966.95 795.176L1078.92 859.764V988.939L966.95 1053.53L854.984 988.939V859.764L966.95 795.176Z\"\n        fill=\"#FCFCFD\"\n      />\n      <path\n        d=\"M1078.64 217.621L1190.6 282.209V411.384L1078.64 475.972L966.672 411.384V282.209L1078.64 217.621Z\"\n        fill=\"#EBE7F4\"\n      />\n      <path\n        d=\"M1302.64 217.621L1414.6 282.209V411.384L1302.64 475.972L1190.67 411.384V282.209L1302.64 217.621Z\"\n        fill=\"#EBE7F4\"\n      />\n      <path\n        d=\"M1078.64 603.211L1190.6 667.937V797.389L1078.64 862.115L966.672 797.389V667.937L1078.64 603.211Z\"\n        fill=\"#F8F9FD\"\n      />\n      <path\n        d=\"M1302.64 603.211L1414.6 667.937V797.389L1302.64 862.115L1190.67 797.389V667.937L1302.64 603.211Z\"\n        fill=\"#F8F9FD\"\n      />\n      <path\n        d=\"M1078.64 988.801L1190.6 1053.53V1182.98L1078.64 1247.71L966.672 1182.98V1053.53L1078.64 988.801Z\"\n        fill=\"#FBFCFC\"\n      />\n      <path\n        d=\"M1190.64 1182.8L1302.6 1247.53V1376.98L1190.64 1441.71L1078.67 1376.98V1247.53L1190.64 1182.8Z\"\n        fill=\"#FBFCFC\"\n      />\n      <path\n        d=\"M1302.64 988.801L1414.6 1053.53V1182.98L1302.64 1247.71L1190.67 1182.98V1053.53L1302.64 988.801Z\"\n        fill=\"#FBFCFC\"\n      />\n      <path\n        d=\"M1190.88 23.4434L1302.84 88.1695V217.622L1190.88 282.348L1078.91 217.622V88.1695L1190.88 23.4434Z\"\n        fill=\"#E5DEEF\"\n      />\n      <path\n        d=\"M1078.88 -170.557L1190.84 -105.831V23.6216L1078.88 88.3477L966.914 23.6216V-105.831L1078.88 -170.557Z\"\n        fill=\"#E5DEEF\"\n      />\n      <path\n        d=\"M1302.88 -170.557L1414.84 -105.831V23.6216L1302.88 88.3477L1190.91 23.6216V-105.831L1302.88 -170.557Z\"\n        fill=\"#E5DEEF\"\n      />\n      <path\n        d=\"M1190.88 409.033L1302.84 473.759V603.211L1190.88 667.938L1078.91 603.211V473.759L1190.88 409.033Z\"\n        fill=\"#F2F2F8\"\n      />\n      <path\n        d=\"M1190.88 795.176L1302.84 859.764V988.939L1190.88 1053.53L1078.91 988.939V859.764L1190.88 795.176Z\"\n        fill=\"#F9FBFC\"\n      />\n    </g>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_6783_462\">\n      <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n    </clipPath>\n    <clipPath id=\"clip1_6783_462\">\n      <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>";
+
+var HomepageLight2 = "<svg\n  viewBox=\"0 0 1280 1280\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  preserveAspectRatio=\"none\"\n>\n  <g clipPath=\"url(#clip0_6783_599)\">\n    <path\n      d=\"M71.2233 23.4434L183.189 88.1695V217.622L71.2233 282.348L-40.7422 217.622V88.1695L71.2233 23.4434Z\"\n      fill=\"#FDFEFF\"\n    />\n    <path\n      d=\"M-40.7767 -170.557L71.1887 -105.831V23.6216L-40.7767 88.3477L-152.742 23.6216V-105.831L-40.7767 -170.557Z\"\n      fill=\"#FDFEFF\"\n    />\n    <path\n      d=\"M183.223 -170.557L295.189 -105.831V23.6216L183.223 88.3477L71.2578 23.6216V-105.831L183.223 -170.557Z\"\n      fill=\"#FDFEFF\"\n    />\n    <path\n      d=\"M71.2233 409.033L183.189 473.759V603.211L71.2233 667.938L-40.7422 603.211V473.759L71.2233 409.033Z\"\n      fill=\"#FEFFFF\"\n    />\n    <path\n      d=\"M71.2233 795.176L183.189 859.764V988.939L71.2233 1053.53L-40.7422 988.939V859.764L71.2233 795.176Z\"\n      fill=\"#D7F1F9\"\n    />\n    <path\n      d=\"M182.919 217.621L294.884 282.209V411.384L182.919 475.972L70.9531 411.384V282.209L182.919 217.621Z\"\n      fill=\"#FEFFFF\"\n    />\n    <path\n      d=\"M-41.0814 217.621L70.884 282.209V411.384L-41.0814 475.972L-153.047 411.384V282.209L-41.0814 217.621Z\"\n      fill=\"#FEFFFF\"\n    />\n    <path\n      d=\"M182.919 603.211L294.884 667.937V797.389L182.919 862.115L70.9531 797.389V667.937L182.919 603.211Z\"\n      fill=\"#F6FCFE\"\n    />\n    <path\n      d=\"M-40.0814 603.211L71.884 667.937V797.389L-40.0814 862.115L-152.047 797.389V667.937L-40.0814 603.211Z\"\n      fill=\"#F6FCFE\"\n    />\n    <path\n      d=\"M182.919 988.801L294.884 1053.53V1182.98L182.919 1247.71L70.9531 1182.98V1053.53L182.919 988.801Z\"\n      fill=\"#ACDBF1\"\n    />\n    <path\n      d=\"M70.9186 1182.8L182.884 1247.53V1376.98L70.9186 1441.71L-41.0469 1376.98V1247.53L70.9186 1182.8Z\"\n      fill=\"#ACDBF1\"\n    />\n    <path\n      d=\"M-40.0814 988.801L71.884 1053.53V1182.98L-40.0814 1247.71L-152.047 1182.98V1053.53L-40.0814 988.801Z\"\n      fill=\"#ACDBF1\"\n    />\n    <path\n      d=\"M295.161 23.4434L407.126 88.1695V217.622L295.161 282.348L183.195 217.622V88.1695L295.161 23.4434Z\"\n      fill=\"#FAFDFE\"\n    />\n    <path\n      d=\"M407.161 -170.557L519.126 -105.831V23.6216L407.161 88.3477L295.195 23.6216V-105.831L407.161 -170.557Z\"\n      fill=\"#FAFDFE\"\n    />\n    <path\n      d=\"M295.161 409.033L407.126 473.759V603.211L295.161 667.938L183.195 603.211V473.759L295.161 409.033Z\"\n      fill=\"#FEFFFF\"\n    />\n    <path\n      d=\"M295.161 795.176L407.126 859.764V988.939L295.161 1053.53L183.195 988.939V859.764L295.161 795.176Z\"\n      fill=\"#E5F0FA\"\n    />\n    <path\n      d=\"M406.848 217.621L518.814 282.209V411.384L406.848 475.972L294.883 411.384V282.209L406.848 217.621Z\"\n      fill=\"#FBFDFE\"\n    />\n    <path\n      d=\"M406.848 603.211L518.814 667.937V797.389L406.848 862.115L294.883 797.389V667.937L406.848 603.211Z\"\n      fill=\"#FBFCFE\"\n    />\n    <path\n      d=\"M406.848 988.801L518.814 1053.53V1182.98L406.848 1247.71L294.883 1182.98V1053.53L406.848 988.801Z\"\n      fill=\"#DDE0F5\"\n    />\n    <path\n      d=\"M294.848 1182.8L406.814 1247.53V1376.98L294.848 1441.71L182.883 1376.98V1247.53L294.848 1182.8Z\"\n      fill=\"#DDE0F5\"\n    />\n    <path\n      d=\"M519.09 23.4434L631.056 88.1695V217.622L519.09 282.348L407.125 217.622V88.1695L519.09 23.4434Z\"\n      fill=\"#E7F4FA\"\n    />\n    <path\n      d=\"M631.09 -170.557L743.056 -105.831V23.6216L631.09 88.3477L519.125 23.6216V-105.831L631.09 -170.557Z\"\n      fill=\"#E7F4FA\"\n    />\n    <path\n      d=\"M519.09 409.033L631.056 473.759V603.211L519.09 667.938L407.125 603.211V473.759L519.09 409.033Z\"\n      fill=\"#FEFEFF\"\n    />\n    <path\n      d=\"M519.09 795.176L631.056 859.764V988.939L519.09 1053.53L407.125 988.939V859.764L519.09 795.176Z\"\n      fill=\"#F6F6FC\"\n    />\n    <path\n      d=\"M630.778 217.621L742.743 282.209V411.384L630.778 475.972L518.812 411.384V282.209L630.778 217.621Z\"\n      fill=\"#F3F7FC\"\n    />\n    <path\n      d=\"M630.778 603.211L742.743 667.937V797.389L630.778 862.115L518.812 797.389V667.937L630.778 603.211Z\"\n      fill=\"#FEFEFF\"\n    />\n    <path\n      d=\"M630.778 988.801L742.743 1053.53V1182.98L630.778 1247.71L518.812 1182.98V1053.53L630.778 988.801Z\"\n      fill=\"#F8F6FC\"\n    />\n    <path\n      d=\"M742.778 1182.8L854.743 1247.53V1376.98L742.778 1441.71L630.812 1376.98V1247.53L742.778 1182.8Z\"\n      fill=\"#F8F6FC\"\n    />\n    <path\n      d=\"M518.778 1182.8L630.743 1247.53V1376.98L518.778 1441.71L406.812 1376.98V1247.53L518.778 1182.8Z\"\n      fill=\"#F8F6FC\"\n    />\n    <path\n      d=\"M743.02 23.4434L854.986 88.1695V217.622L743.02 282.348L631.055 217.622V88.1695L743.02 23.4434Z\"\n      fill=\"#D7E1EF\"\n    />\n    <path\n      d=\"M855.02 -170.557L966.986 -105.831V23.6216L855.02 88.3477L743.055 23.6216V-105.831L855.02 -170.557Z\"\n      fill=\"#D7E1EF\"\n    />\n    <path\n      d=\"M743.02 409.033L854.986 473.759V603.211L743.02 667.938L631.055 603.211V473.759L743.02 409.033Z\"\n      fill=\"#FCFCFE\"\n    />\n    <path\n      d=\"M743.02 795.176L854.986 859.764V988.939L743.02 1053.53L631.055 988.939V859.764L743.02 795.176Z\"\n      fill=\"#FEFDFE\"\n    />\n    <path\n      d=\"M854.708 217.621L966.673 282.209V411.384L854.708 475.972L742.742 411.384V282.209L854.708 217.621Z\"\n      fill=\"#EEEDF8\"\n    />\n    <path\n      d=\"M854.708 603.211L966.673 667.937V797.389L854.708 862.115L742.742 797.389V667.937L854.708 603.211Z\"\n      fill=\"#FEFDFE\"\n    />\n    <path\n      d=\"M854.708 988.801L966.673 1053.53V1182.98L854.708 1247.71L742.742 1182.98V1053.53L854.708 988.801Z\"\n      fill=\"#FEFEFF\"\n    />\n    <path\n      d=\"M966.708 1182.8L1078.67 1247.53V1376.98L966.708 1441.71L854.742 1376.98V1247.53L966.708 1182.8Z\"\n      fill=\"#FEFEFF\"\n    />\n    <path\n      d=\"M1190.71 1182.8L1302.67 1247.53V1376.98L1190.71 1441.71L1078.74 1376.98V1247.53L1190.71 1182.8Z\"\n      fill=\"#FEFEFF\"\n    />\n    <path\n      d=\"M966.95 23.4434L1078.92 88.1695V217.622L966.95 282.348L854.984 217.622V88.1695L966.95 23.4434Z\"\n      fill=\"#D7D1EC\"\n    />\n    <path\n      d=\"M1078.95 -170.557L1190.92 -105.831V23.6216L1078.95 88.3477L966.984 23.6216V-105.831L1078.95 -170.557Z\"\n      fill=\"#D7D1EC\"\n    />\n    <path\n      d=\"M966.95 409.033L1078.92 473.759V603.211L966.95 667.938L854.984 603.211V473.759L966.95 409.033Z\"\n      fill=\"#F5F3FB\"\n    />\n    <path\n      d=\"M966.95 795.176L1078.92 859.764V988.939L966.95 1053.53L854.984 988.939V859.764L966.95 795.176Z\"\n      fill=\"#FEFEFF\"\n    />\n    <path\n      d=\"M1078.64 217.621L1190.6 282.209V411.384L1078.64 475.972L966.672 411.384V282.209L1078.64 217.621Z\"\n      fill=\"#D2C7EC\"\n    />\n    <path\n      d=\"M1301.64 216.621L1413.6 281.209V410.384L1301.64 474.972L1189.67 410.384V281.209L1301.64 216.621Z\"\n      fill=\"#D2C7EC\"\n    />\n    <path\n      d=\"M1078.64 603.211L1190.6 667.937V797.389L1078.64 862.115L966.672 797.389V667.937L1078.64 603.211Z\"\n      fill=\"#F8F5FC\"\n    />\n    <path\n      d=\"M1302.64 603.211L1414.6 667.937V797.389L1302.64 862.115L1190.67 797.389V667.937L1302.64 603.211Z\"\n      fill=\"#F8F5FC\"\n    />\n    <path\n      d=\"M1190.88 23.4434L1302.84 88.1695V217.622L1190.88 282.348L1078.91 217.622V88.1695L1190.88 23.4434Z\"\n      fill=\"#D1C6EA\"\n    />\n    <path\n      d=\"M1302.88 -170.557L1414.84 -105.831V23.6216L1302.88 88.3477L1190.91 23.6216V-105.831L1302.88 -170.557Z\"\n      fill=\"#D1C6EA\"\n    />\n    <path\n      d=\"M1190.88 409.033L1302.84 473.759V603.211L1190.88 667.938L1078.91 603.211V473.759L1190.88 409.033Z\"\n      fill=\"#E0D7F2\"\n    />\n    <path\n      d=\"M1190.88 795.176L1302.84 859.764V988.939L1190.88 1053.53L1078.91 988.939V859.764L1190.88 795.176Z\"\n      fill=\"#FDFCFE\"\n    />\n    <path\n      d=\"M1078.97 989L1190.93 1053.73V1183.18L1078.97 1247.9L967 1183.18V1053.73L1078.97 989Z\"\n      fill=\"#FCFBFE\"\n    />\n    <path\n      d=\"M1302.97 989L1414.93 1053.73V1183.18L1302.97 1247.9L1191 1183.18V1053.73L1302.97 989Z\"\n      fill=\"#FCFBFE\"\n    />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_6783_599\">\n      <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>";
+
+var ProductpageLight1 = "<svg\n  viewBox=\"0 0 1280 1280\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  preserveAspectRatio=\"none\"\n>\n  <g clipPath=\"url(#clip0_6783_1214)\">\n    <path\n      d=\"M71.2233 23.4434L183.189 88.1695V217.622L71.2233 282.348L-40.7422 217.622V88.1695L71.2233 23.4434Z\"\n      fill=\"#E2E9FA\"\n    />\n    <path\n      d=\"M185.223 -169.557L297.189 -104.831V24.6217L185.223 89.3477L73.2578 24.6217V-104.831L185.223 -169.557Z\"\n      fill=\"#E2E9FA\"\n    />\n    <path\n      d=\"M0.223249 -193.557L112.189 -128.831V0.62165L0.223249 65.3477L-111.742 0.62165V-128.831L0.223249 -193.557Z\"\n      fill=\"#E2E9FA\"\n    />\n    <path\n      d=\"M71.2233 409.033L183.189 473.759V603.211L71.2233 667.938L-40.7422 603.211V473.759L71.2233 409.033Z\"\n      fill=\"#E2EDF9\"\n    />\n    <path\n      d=\"M71.2233 795.176L183.189 859.764V988.939L71.2233 1053.53L-40.7422 988.939V859.764L71.2233 795.176Z\"\n      fill=\"#E8EFF8\"\n    />\n    <path\n      d=\"M182.919 216.621L294.884 281.209V410.384L182.919 474.972L70.9531 410.384V281.209L182.919 216.621Z\"\n      fill=\"#E4EDFC\"\n    />\n    <path\n      d=\"M-40.0814 217.621L71.884 282.209V411.384L-40.0814 475.972L-152.047 411.384V282.209L-40.0814 217.621Z\"\n      fill=\"#E4EDFC\"\n    />\n    <path\n      d=\"M182.919 603.211L294.884 667.937V797.389L182.919 862.115L70.9531 797.389V667.937L182.919 603.211Z\"\n      fill=\"#E5EEFA\"\n    />\n    <path\n      d=\"M-40.0814 602.211L71.884 666.937V796.389L-40.0814 861.115L-152.047 796.389V666.937L-40.0814 602.211Z\"\n      fill=\"#E5EEFA\"\n    />\n    <path\n      d=\"M182.919 988.801L294.884 1053.53V1182.98L182.919 1247.71L70.9531 1182.98V1053.53L182.919 988.801Z\"\n      fill=\"#EBF2F8\"\n    />\n    <path\n      d=\"M70.9186 1181.8L182.884 1246.53V1375.98L70.9186 1440.71L-41.0469 1375.98V1246.53L70.9186 1181.8Z\"\n      fill=\"#EBF2F8\"\n    />\n    <path\n      d=\"M-40.0814 987.801L71.884 1052.53V1181.98L-40.0814 1246.71L-152.047 1181.98V1052.53L-40.0814 987.801Z\"\n      fill=\"#EBF2F8\"\n    />\n    <path\n      d=\"M295.161 23.4434L407.126 88.1695V217.622L295.161 282.348L183.195 217.622V88.1695L295.161 23.4434Z\"\n      fill=\"#E5E9FB\"\n    />\n    <path\n      d=\"M295.161 409.033L407.126 473.759V603.211L295.161 667.938L183.195 603.211V473.759L295.161 409.033Z\"\n      fill=\"#E3EBFA\"\n    />\n    <path\n      d=\"M295.161 795.176L407.126 859.764V988.939L295.161 1053.53L183.195 988.939V859.764L295.161 795.176Z\"\n      fill=\"#E8EEF9\"\n    />\n    <path\n      d=\"M406.848 217.621L518.814 282.209V411.384L406.848 475.972L294.883 411.384V282.209L406.848 217.621Z\"\n      fill=\"#E8E9FB\"\n    />\n    <path\n      d=\"M406.848 603.211L518.814 667.937V797.389L406.848 862.115L294.883 797.389V667.937L406.848 603.211Z\"\n      fill=\"#E6EAF9\"\n    />\n    <path\n      d=\"M406.848 988.801L518.814 1053.53V1182.98L406.848 1247.71L294.883 1182.98V1053.53L406.848 988.801Z\"\n      fill=\"#ECEFF8\"\n    />\n    <path\n      d=\"M518.848 1182.8L630.814 1247.53V1376.98L518.848 1441.71L406.883 1376.98V1247.53L518.848 1182.8Z\"\n      fill=\"#ECEFF8\"\n    />\n    <path\n      d=\"M294.848 1182.8L406.814 1247.53V1376.98L294.848 1441.71L182.883 1376.98V1247.53L294.848 1182.8Z\"\n      fill=\"#ECEFF8\"\n    />\n    <path\n      d=\"M519.09 23.4434L631.056 88.1695V217.622L519.09 282.348L407.125 217.622V88.1695L519.09 23.4434Z\"\n      fill=\"#EEE6FA\"\n    />\n    <path\n      d=\"M408.965 -169L520.931 -104.274V25.1783L408.965 89.9044L297 25.1783V-104.274L408.965 -169Z\"\n      fill=\"#EEE6FA\"\n    />\n    <path\n      d=\"M519.09 409.033L631.056 473.759V603.211L519.09 667.938L407.125 603.211V473.759L519.09 409.033Z\"\n      fill=\"#E9E7F9\"\n    />\n    <path\n      d=\"M519.09 795.176L631.056 859.764V988.939L519.09 1053.53L407.125 988.939V859.764L519.09 795.176Z\"\n      fill=\"#ECEDF9\"\n    />\n    <path\n      d=\"M630.778 217.621L742.743 282.209V411.384L630.778 475.972L518.812 411.384V282.209L630.778 217.621Z\"\n      fill=\"#EFE4FA\"\n    />\n    <path\n      d=\"M630.778 602.211L742.743 666.937V796.389L630.778 861.115L518.812 796.389V666.937L630.778 602.211Z\"\n      fill=\"#ECE8F8\"\n    />\n    <path\n      d=\"M630.778 988.801L742.743 1053.53V1182.98L630.778 1247.71L518.812 1182.98V1053.53L630.778 988.801Z\"\n      fill=\"#F0EEF9\"\n    />\n    <path\n      d=\"M742.778 1181.8L854.743 1246.53V1375.98L742.778 1440.71L630.812 1375.98V1246.53L742.778 1181.8Z\"\n      fill=\"#F0EEF9\"\n    />\n    <path\n      d=\"M743.02 23.4434L854.986 88.1695V217.622L743.02 282.348L631.055 217.622V88.1695L743.02 23.4434Z\"\n      fill=\"#F4E4FB\"\n    />\n    <path\n      d=\"M855.02 -169.557L966.986 -104.831V24.6217L855.02 89.3477L743.055 24.6217V-104.831L855.02 -169.557Z\"\n      fill=\"#F4E4FB\"\n    />\n    <path\n      d=\"M632.02 -169.557L743.986 -104.831V24.6217L632.02 89.3477L520.055 24.6217V-104.831L632.02 -169.557Z\"\n      fill=\"#F4E4FB\"\n    />\n    <path\n      d=\"M743.02 409.033L854.986 473.759V603.211L743.02 667.938L631.055 603.211V473.759L743.02 409.033Z\"\n      fill=\"#EFE3F8\"\n    />\n    <path\n      d=\"M743.02 795.176L854.986 859.764V988.939L743.02 1053.53L631.055 988.939V859.764L743.02 795.176Z\"\n      fill=\"#F0EBF8\"\n    />\n    <path\n      d=\"M854.708 217.621L966.673 282.209V411.384L854.708 475.972L742.742 411.384V282.209L854.708 217.621Z\"\n      fill=\"#F5E1FA\"\n    />\n    <path\n      d=\"M854.708 602.211L966.673 666.937V796.389L854.708 861.115L742.742 796.389V666.937L854.708 602.211Z\"\n      fill=\"#F2E6F7\"\n    />\n    <path\n      d=\"M854.708 988.801L966.673 1053.53V1182.98L854.708 1247.71L742.742 1182.98V1053.53L854.708 988.801Z\"\n      fill=\"#F4EEF8\"\n    />\n    <path\n      d=\"M966.708 1181.8L1078.67 1246.53V1375.98L966.708 1440.71L854.742 1375.98V1246.53L966.708 1181.8Z\"\n      fill=\"#F4EEF8\"\n    />\n    <path\n      d=\"M1078.71 987.801L1190.67 1052.53V1181.98L1078.71 1246.71L966.742 1181.98V1052.53L1078.71 987.801Z\"\n      fill=\"#F3EEF5\"\n    />\n    <path\n      d=\"M1190.71 1181.8L1302.67 1246.53V1375.98L1190.71 1440.71L1078.74 1375.98V1246.53L1190.71 1181.8Z\"\n      fill=\"#F3EEF5\"\n    />\n    <path\n      d=\"M1301.71 987.801L1413.67 1052.53V1181.98L1301.71 1246.71L1189.74 1181.98V1052.53L1301.71 987.801Z\"\n      fill=\"#F3EEF5\"\n    />\n    <path\n      d=\"M966.95 23.4434L1078.92 88.1695V217.622L966.95 282.348L854.984 217.622V88.1695L966.95 23.4434Z\"\n      fill=\"#F8DFFA\"\n    />\n    <path\n      d=\"M1078.95 -170.557L1190.92 -105.831V23.6217L1078.95 88.3477L966.984 23.6217V-105.831L1078.95 -170.557Z\"\n      fill=\"#F8DFFA\"\n    />\n    <path\n      d=\"M966.95 409.033L1078.92 473.759V603.211L966.95 667.938L854.984 603.211V473.759L966.95 409.033Z\"\n      fill=\"#F4E2F7\"\n    />\n    <path\n      d=\"M966.95 795.176L1078.92 859.764V988.939L966.95 1053.53L854.984 988.939V859.764L966.95 795.176Z\"\n      fill=\"#F4EBF7\"\n    />\n    <path\n      d=\"M1078.64 217.621L1190.6 282.209V411.384L1078.64 475.972L966.672 411.384V282.209L1078.64 217.621Z\"\n      fill=\"#F7E0F8\"\n    />\n    <path\n      d=\"M1302.64 216.621L1414.6 281.209V410.384L1302.64 474.972L1190.67 410.384V281.209L1302.64 216.621Z\"\n      fill=\"#F7E0F8\"\n    />\n    <path\n      d=\"M1078.64 603.211L1190.6 667.937V797.389L1078.64 862.115L966.672 797.389V667.937L1078.64 603.211Z\"\n      fill=\"#F5E7F6\"\n    />\n    <path\n      d=\"M1301.64 602.211L1413.6 666.937V796.389L1301.64 861.115L1189.67 796.389V666.937L1301.64 602.211Z\"\n      fill=\"#F5E7F6\"\n    />\n    <path\n      d=\"M1190.88 23.4434L1302.84 88.1695V217.622L1190.88 282.348L1078.91 217.622V88.1695L1190.88 23.4434Z\"\n      fill=\"#F8DFF8\"\n    />\n    <path\n      d=\"M1302.88 -170.557L1414.84 -105.831V23.6217L1302.88 88.3477L1190.91 23.6217V-105.831L1302.88 -170.557Z\"\n      fill=\"#F8DFF8\"\n    />\n    <path\n      d=\"M1189.88 410.033L1301.84 474.759V604.211L1189.88 668.938L1077.91 604.211V474.759L1189.88 410.033Z\"\n      fill=\"#F5E3F6\"\n    />\n    <path\n      d=\"M1190.88 795.176L1302.84 859.764V988.939L1190.88 1053.53L1078.91 988.939V859.764L1190.88 795.176Z\"\n      fill=\"#F6ECF7\"\n    />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_6783_1214\">\n      <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>";
+
+var ProductpageLight2 = "<svg\n  viewBox=\"0 0 1280 1280\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  preserveAspectRatio=\"none\"\n>\n  <g clipPath=\"url(#clip0_6783_1351)\">\n    <path\n      d=\"M71.2233 23.4434L183.189 88.1695V217.622L71.2233 282.348L-40.7422 217.622V88.1695L71.2233 23.4434Z\"\n      fill=\"#F9EDF5\"\n    />\n    <path\n      d=\"M183.223 -170.557L295.189 -105.831V23.6217L183.223 88.3477L71.2578 23.6217V-105.831L183.223 -170.557Z\"\n      fill=\"#F9EDF5\"\n    />\n    <path\n      d=\"M-40.7768 -170.557L71.1887 -105.831V23.6217L-40.7768 88.3477L-152.742 23.6217V-105.831L-40.7768 -170.557Z\"\n      fill=\"#F9EDF5\"\n    />\n    <path\n      d=\"M71.2233 409.033L183.189 473.759V603.211L71.2233 667.938L-40.7422 603.211V473.759L71.2233 409.033Z\"\n      fill=\"#FEEBF9\"\n    />\n    <path\n      d=\"M71.2233 795.176L183.189 859.764V988.939L71.2233 1053.53L-40.7422 988.939V859.764L71.2233 795.176Z\"\n      fill=\"#FEECFB\"\n    />\n    <path\n      d=\"M182.919 217.621L294.884 282.209V411.384L182.919 475.972L70.9531 411.384V282.209L182.919 217.621Z\"\n      fill=\"#FDEDF8\"\n    />\n    <path\n      d=\"M-41.0814 216.621L70.884 281.209V410.384L-41.0814 474.972L-153.047 410.384V281.209L-41.0814 216.621Z\"\n      fill=\"#FDEDF8\"\n    />\n    <path\n      d=\"M182.919 603.211L294.884 667.937V797.389L182.919 862.115L70.9531 797.389V667.937L182.919 603.211Z\"\n      fill=\"#FEEBFA\"\n    />\n    <path\n      d=\"M-41.0814 602.211L70.884 666.937V796.389L-41.0814 861.115L-153.047 796.389V666.937L-41.0814 602.211Z\"\n      fill=\"#FEEBFA\"\n    />\n    <path\n      d=\"M182.919 988.801L294.884 1053.53V1182.98L182.919 1247.71L70.9531 1182.98V1053.53L182.919 988.801Z\"\n      fill=\"#FCEBFA\"\n    />\n    <path\n      d=\"M-40.0814 988.801L71.884 1053.53V1182.98L-40.0814 1247.71L-152.047 1182.98V1053.53L-40.0814 988.801Z\"\n      fill=\"#FCEBFA\"\n    />\n    <path\n      d=\"M70.9186 1182.8L182.884 1247.53V1376.98L70.9186 1441.71L-41.0469 1376.98V1247.53L70.9186 1182.8Z\"\n      fill=\"#FCEBFA\"\n    />\n    <path\n      d=\"M295.161 23.4434L407.126 88.1695V217.622L295.161 282.348L183.195 217.622V88.1695L295.161 23.4434Z\"\n      fill=\"#FCEDF7\"\n    />\n    <path\n      d=\"M295.161 409.033L407.126 473.759V603.211L295.161 667.938L183.195 603.211V473.759L295.161 409.033Z\"\n      fill=\"#FEEBF8\"\n    />\n    <path\n      d=\"M295.161 795.176L407.126 859.764V988.939L295.161 1053.53L183.195 988.939V859.764L295.161 795.176Z\"\n      fill=\"#FEEBFA\"\n    />\n    <path\n      d=\"M406.848 217.621L518.814 282.209V411.384L406.848 475.972L294.883 411.384V282.209L406.848 217.621Z\"\n      fill=\"#FCEBF6\"\n    />\n    <path\n      d=\"M406.848 603.211L518.814 667.937V797.389L406.848 862.115L294.883 797.389V667.937L406.848 603.211Z\"\n      fill=\"#FDEAF8\"\n    />\n    <path\n      d=\"M406.848 988.801L518.814 1053.53V1182.98L406.848 1247.71L294.883 1182.98V1053.53L406.848 988.801Z\"\n      fill=\"#FDEBFA\"\n    />\n    <path\n      d=\"M294.848 1182.8L406.814 1247.53V1376.98L294.848 1441.71L182.883 1376.98V1247.53L294.848 1182.8Z\"\n      fill=\"#FDEBFA\"\n    />\n    <path\n      d=\"M518.848 1182.8L630.814 1247.53V1376.98L518.848 1441.71L406.883 1376.98V1247.53L518.848 1182.8Z\"\n      fill=\"#FDEBFA\"\n    />\n    <path\n      d=\"M519.09 23.4434L631.056 88.1695V217.622L519.09 282.348L407.125 217.622V88.1695L519.09 23.4434Z\"\n      fill=\"#FCECF5\"\n    />\n    <path\n      d=\"M407.09 -170.557L519.056 -105.831V23.6217L407.09 88.3477L295.125 23.6217V-105.831L407.09 -170.557Z\"\n      fill=\"#FCECF5\"\n    />\n    <path\n      d=\"M519.09 409.033L631.056 473.759V603.211L519.09 667.938L407.125 603.211V473.759L519.09 409.033Z\"\n      fill=\"#FDE9F6\"\n    />\n    <path\n      d=\"M519.09 795.176L631.056 859.764V988.939L519.09 1053.53L407.125 988.939V859.764L519.09 795.176Z\"\n      fill=\"#FDEAFA\"\n    />\n    <path\n      d=\"M630.778 217.621L742.743 282.209V411.384L630.778 475.972L518.812 411.384V282.209L630.778 217.621Z\"\n      fill=\"#FCEAF4\"\n    />\n    <path\n      d=\"M630.778 603.211L742.743 667.937V797.389L630.778 862.115L518.812 797.389V667.937L630.778 603.211Z\"\n      fill=\"#FCE9F7\"\n    />\n    <path\n      d=\"M630.778 988.801L742.743 1053.53V1182.98L630.778 1247.71L518.812 1182.98V1053.53L630.778 988.801Z\"\n      fill=\"#FCEAFA\"\n    />\n    <path\n      d=\"M742.778 1182.8L854.743 1247.53V1376.98L742.778 1441.71L630.812 1376.98V1247.53L742.778 1182.8Z\"\n      fill=\"#FCEAFA\"\n    />\n    <path\n      d=\"M743.02 23.4434L854.986 88.1695V217.622L743.02 282.348L631.055 217.622V88.1695L743.02 23.4434Z\"\n      fill=\"#FBEAF3\"\n    />\n    <path\n      d=\"M855.02 -170.557L966.986 -105.831V23.6217L855.02 88.3477L743.055 23.6217V-105.831L855.02 -170.557Z\"\n      fill=\"#FBEAF3\"\n    />\n    <path\n      d=\"M631.02 -170.557L742.986 -105.831V23.6217L631.02 88.3477L519.055 23.6217V-105.831L631.02 -170.557Z\"\n      fill=\"#FBEAF3\"\n    />\n    <path\n      d=\"M743.02 409.033L854.986 473.759V603.211L743.02 667.938L631.055 603.211V473.759L743.02 409.033Z\"\n      fill=\"#FBE9F4\"\n    />\n    <path\n      d=\"M743.02 795.176L854.986 859.764V988.939L743.02 1053.53L631.055 988.939V859.764L743.02 795.176Z\"\n      fill=\"#FCE9F8\"\n    />\n    <path\n      d=\"M854.708 217.621L966.673 282.209V411.384L854.708 475.972L742.742 411.384V282.209L854.708 217.621Z\"\n      fill=\"#FBE9F2\"\n    />\n    <path\n      d=\"M854.708 603.211L966.673 667.937V797.389L854.708 862.115L742.742 797.389V667.937L854.708 603.211Z\"\n      fill=\"#FBE8F5\"\n    />\n    <path\n      d=\"M854.708 988.801L966.673 1053.53V1182.98L854.708 1247.71L742.742 1182.98V1053.53L854.708 988.801Z\"\n      fill=\"#FBEAF8\"\n    />\n    <path\n      d=\"M966.708 1182.8L1078.67 1247.53V1376.98L966.708 1441.71L854.742 1376.98V1247.53L966.708 1182.8Z\"\n      fill=\"#FBEAF8\"\n    />\n    <path\n      d=\"M1078.71 988.801L1190.67 1053.53V1182.98L1078.71 1247.71L966.742 1182.98V1053.53L1078.71 988.801Z\"\n      fill=\"#FAEAF7\"\n    />\n    <path\n      d=\"M1302.71 988.801L1414.67 1053.53V1182.98L1302.71 1247.71L1190.74 1182.98V1053.53L1302.71 988.801Z\"\n      fill=\"#FAEAF7\"\n    />\n    <path\n      d=\"M1190.71 1182.8L1302.67 1247.53V1376.98L1190.71 1441.71L1078.74 1376.98V1247.53L1190.71 1182.8Z\"\n      fill=\"#FAEAF7\"\n    />\n    <path\n      d=\"M966.95 23.4434L1078.92 88.1695V217.622L966.95 282.348L854.984 217.622V88.1695L966.95 23.4434Z\"\n      fill=\"#FBEAF2\"\n    />\n    <path\n      d=\"M1078.95 -170.557L1190.92 -105.831V23.6217L1078.95 88.3477L966.984 23.6217V-105.831L1078.95 -170.557Z\"\n      fill=\"#FBEAF2\"\n    />\n    <path\n      d=\"M966.95 409.033L1078.92 473.759V603.211L966.95 667.938L854.984 603.211V473.759L966.95 409.033Z\"\n      fill=\"#FAE8F3\"\n    />\n    <path\n      d=\"M966.95 795.176L1078.92 859.764V988.939L966.95 1053.53L854.984 988.939V859.764L966.95 795.176Z\"\n      fill=\"#FBE9F6\"\n    />\n    <path\n      d=\"M1078.64 217.621L1190.6 282.209V411.384L1078.64 475.972L966.672 411.384V282.209L1078.64 217.621Z\"\n      fill=\"#F9E9F1\"\n    />\n    <path\n      d=\"M1301.64 216.621L1413.6 281.209V410.384L1301.64 474.972L1189.67 410.384V281.209L1301.64 216.621Z\"\n      fill=\"#F9E9F1\"\n    />\n    <path\n      d=\"M1078.64 602.211L1190.6 666.937V796.389L1078.64 861.115L966.672 796.389V666.937L1078.64 602.211Z\"\n      fill=\"#F9E8F4\"\n    />\n    <path\n      d=\"M1301.64 603.211L1413.6 667.937V797.389L1301.64 862.115L1189.67 797.389V667.937L1301.64 603.211Z\"\n      fill=\"#F9E8F4\"\n    />\n    <path\n      d=\"M1190.88 23.4434L1302.84 88.1695V217.622L1190.88 282.348L1078.91 217.622V88.1695L1190.88 23.4434Z\"\n      fill=\"#F7EBF0\"\n    />\n    <path\n      d=\"M1302.88 -170.557L1414.84 -105.831V23.6217L1302.88 88.3477L1190.91 23.6217V-105.831L1302.88 -170.557Z\"\n      fill=\"#F7EBF0\"\n    />\n    <path\n      d=\"M1190.88 409.033L1302.84 473.759V603.211L1190.88 667.938L1078.91 603.211V473.759L1190.88 409.033Z\"\n      fill=\"#F8E7F0\"\n    />\n    <path\n      d=\"M1190.88 795.176L1302.84 859.764V988.939L1190.88 1053.53L1078.91 988.939V859.764L1190.88 795.176Z\"\n      fill=\"#F8E8F5\"\n    />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_6783_1351\">\n      <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>";
+
+var FooterLight = "<svg\n  viewBox=\"0 0 1280 1280\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  preserveAspectRatio=\"none\"\n>\n  <g clipPath=\"url(#clip0_6783_1966)\">\n    <path\n      d=\"M71.2233 23.4434L183.189 88.1695V217.622L71.2233 282.348L-40.7422 217.622V88.1695L71.2233 23.4434Z\"\n      fill=\"#F6F1F9\"\n    />\n    <path\n      d=\"M183.223 -170.557L295.189 -105.831V23.6217L183.223 88.3477L71.2578 23.6217V-105.831L183.223 -170.557Z\"\n      fill=\"#F6F1F9\"\n    />\n    <path\n      d=\"M-40.7768 -170.557L71.1887 -105.831V23.6217L-40.7768 88.3477L-152.742 23.6217V-105.831L-40.7768 -170.557Z\"\n      fill=\"#F6F1F9\"\n    />\n    <path\n      d=\"M71.2233 409.033L183.189 473.759V603.211L71.2233 667.938L-40.7422 603.211V473.759L71.2233 409.033Z\"\n      fill=\"#F9F4FC\"\n    />\n    <path\n      d=\"M71.2233 795.176L183.189 859.764V988.939L71.2233 1053.53L-40.7422 988.939V859.764L71.2233 795.176Z\"\n      fill=\"#F8F1FD\"\n    />\n    <path\n      d=\"M182.919 217.621L294.884 282.209V411.384L182.919 475.972L70.9531 411.384V282.209L182.919 217.621Z\"\n      fill=\"#F9F4FC\"\n    />\n    <path\n      d=\"M-40.0814 216.621L71.884 281.209V410.384L-40.0814 474.972L-152.047 410.384V281.209L-40.0814 216.621Z\"\n      fill=\"#F9F4FC\"\n    />\n    <path\n      d=\"M182.919 603.211L294.884 667.937V797.389L182.919 862.115L70.9531 797.389V667.937L182.919 603.211Z\"\n      fill=\"#F9F2FC\"\n    />\n    <path\n      d=\"M-40.0814 602.211L71.884 666.937V796.389L-40.0814 861.115L-152.047 796.389V666.937L-40.0814 602.211Z\"\n      fill=\"#F9F2FC\"\n    />\n    <path\n      d=\"M182.919 988.801L294.884 1053.53V1182.98L182.919 1247.71L70.9531 1182.98V1053.53L182.919 988.801Z\"\n      fill=\"#F7EFFB\"\n    />\n    <path\n      d=\"M-40.0814 987.801L71.884 1052.53V1181.98L-40.0814 1246.71L-152.047 1181.98V1052.53L-40.0814 987.801Z\"\n      fill=\"#F7EFFB\"\n    />\n    <path\n      d=\"M70.9186 1181.8L182.884 1246.53V1375.98L70.9186 1440.71L-41.0469 1375.98V1246.53L70.9186 1181.8Z\"\n      fill=\"#F7EFFB\"\n    />\n    <path\n      d=\"M295.161 23.4434L407.126 88.1695V217.622L295.161 282.348L183.195 217.622V88.1695L295.161 23.4434Z\"\n      fill=\"#F7F2FA\"\n    />\n    <path\n      d=\"M295.161 409.033L407.126 473.759V603.211L295.161 667.938L183.195 603.211V473.759L295.161 409.033Z\"\n      fill=\"#F8F3FC\"\n    />\n    <path\n      d=\"M295.161 795.176L407.126 859.764V988.939L295.161 1053.53L183.195 988.939V859.764L295.161 795.176Z\"\n      fill=\"#F8F0FB\"\n    />\n    <path\n      d=\"M406.848 217.621L518.814 282.209V411.384L406.848 475.972L294.883 411.384V282.209L406.848 217.621Z\"\n      fill=\"#F9F4FC\"\n    />\n    <path\n      d=\"M406.848 603.211L518.814 667.937V797.389L406.848 862.115L294.883 797.389V667.937L406.848 603.211Z\"\n      fill=\"#F7F1FB\"\n    />\n    <path\n      d=\"M406.848 988.801L518.814 1053.53V1182.98L406.848 1247.71L294.883 1182.98V1053.53L406.848 988.801Z\"\n      fill=\"#F7EEFB\"\n    />\n    <path\n      d=\"M294.848 1181.8L406.814 1246.53V1375.98L294.848 1440.71L182.883 1375.98V1246.53L294.848 1181.8Z\"\n      fill=\"#F7EEFB\"\n    />\n    <path\n      d=\"M519.09 23.4434L631.056 88.1695V217.622L519.09 282.348L407.125 217.622V88.1695L519.09 23.4434Z\"\n      fill=\"#F9F4FC\"\n    />\n    <path\n      d=\"M631.09 -170.557L743.056 -105.831V23.6217L631.09 88.3477L519.125 23.6217V-105.831L631.09 -170.557Z\"\n      fill=\"#F9F4FC\"\n    />\n    <path\n      d=\"M407.09 -170.557L519.056 -105.831V23.6217L407.09 88.3477L295.125 23.6217V-105.831L407.09 -170.557Z\"\n      fill=\"#F9F4FC\"\n    />\n    <path\n      d=\"M519.09 409.033L631.056 473.759V603.211L519.09 667.938L407.125 603.211V473.759L519.09 409.033Z\"\n      fill=\"#F8F3FC\"\n    />\n    <path\n      d=\"M519.09 795.176L631.056 859.764V988.939L519.09 1053.53L407.125 988.939V859.764L519.09 795.176Z\"\n      fill=\"#F7EFFB\"\n    />\n    <path\n      d=\"M630.778 217.621L742.743 282.209V411.384L630.778 475.972L518.812 411.384V282.209L630.778 217.621Z\"\n      fill=\"#F8F4FD\"\n    />\n    <path\n      d=\"M630.778 603.211L742.743 667.937V797.389L630.778 862.115L518.812 797.389V667.937L630.778 603.211Z\"\n      fill=\"#F6F0FB\"\n    />\n    <path\n      d=\"M630.778 988.801L742.743 1053.53V1182.98L630.778 1247.71L518.812 1182.98V1053.53L630.778 988.801Z\"\n      fill=\"#F6EFFB\"\n    />\n    <path\n      d=\"M518.778 1182.8L630.743 1247.53V1376.98L518.778 1441.71L406.812 1376.98V1247.53L518.778 1182.8Z\"\n      fill=\"#F6EFFB\"\n    />\n    <path\n      d=\"M743.02 23.4434L854.986 88.1695V217.622L743.02 282.348L631.055 217.622V88.1695L743.02 23.4434Z\"\n      fill=\"#F8F6FD\"\n    />\n    <path\n      d=\"M855.02 -170.557L966.986 -105.831V23.6217L855.02 88.3477L743.055 23.6217V-105.831L855.02 -170.557Z\"\n      fill=\"#F8F6FD\"\n    />\n    <path\n      d=\"M743.02 409.033L854.986 473.759V603.211L743.02 667.938L631.055 603.211V473.759L743.02 409.033Z\"\n      fill=\"#F6F3FC\"\n    />\n    <path\n      d=\"M743.02 795.176L854.986 859.764V988.939L743.02 1053.53L631.055 988.939V859.764L743.02 795.176Z\"\n      fill=\"#F5EFFA\"\n    />\n    <path\n      d=\"M854.708 217.621L966.673 282.209V411.384L854.708 475.972L742.742 411.384V282.209L854.708 217.621Z\"\n      fill=\"#F7F5FD\"\n    />\n    <path\n      d=\"M854.708 603.211L966.673 667.937V797.389L854.708 862.115L742.742 797.389V667.937L854.708 603.211Z\"\n      fill=\"#F4F0FB\"\n    />\n    <path\n      d=\"M854.708 988.801L966.673 1053.53V1182.98L854.708 1247.71L742.742 1182.98V1053.53L854.708 988.801Z\"\n      fill=\"#F3EFFA\"\n    />\n    <path\n      d=\"M742.708 1181.8L854.673 1246.53V1375.98L742.708 1440.71L630.742 1375.98V1246.53L742.708 1181.8Z\"\n      fill=\"#F3EFFA\"\n    />\n    <path\n      d=\"M966.708 1182.8L1078.67 1247.53V1376.98L966.708 1441.71L854.742 1376.98V1247.53L966.708 1182.8Z\"\n      fill=\"#F3EFFA\"\n    />\n    <path\n      d=\"M1078.71 988.801L1190.67 1053.53V1182.98L1078.71 1247.71L966.742 1182.98V1053.53L1078.71 988.801Z\"\n      fill=\"#F0EEF9\"\n    />\n    <path\n      d=\"M1301.71 987.801L1413.67 1052.53V1181.98L1301.71 1246.71L1189.74 1181.98V1052.53L1301.71 987.801Z\"\n      fill=\"#F0EEF9\"\n    />\n    <path\n      d=\"M1190.71 1181.8L1302.67 1246.53V1375.98L1190.71 1440.71L1078.74 1375.98V1246.53L1190.71 1181.8Z\"\n      fill=\"#F0EEF9\"\n    />\n    <path\n      d=\"M966.95 23.4434L1078.92 88.1695V217.622L966.95 282.348L854.984 217.622V88.1695L966.95 23.4434Z\"\n      fill=\"#F5F5FA\"\n    />\n    <path\n      d=\"M1078.95 -169.557L1190.92 -104.831V24.6217L1078.95 89.3477L966.984 24.6217V-104.831L1078.95 -169.557Z\"\n      fill=\"#F5F5FA\"\n    />\n    <path\n      d=\"M966.95 409.033L1078.92 473.759V603.211L966.95 667.938L854.984 603.211V473.759L966.95 409.033Z\"\n      fill=\"#F4F3FC\"\n    />\n    <path\n      d=\"M966.95 795.176L1078.92 859.764V988.939L966.95 1053.53L854.984 988.939V859.764L966.95 795.176Z\"\n      fill=\"#F3EFFA\"\n    />\n    <path\n      d=\"M1078.64 217.621L1190.6 282.209V411.384L1078.64 475.972L966.672 411.384V282.209L1078.64 217.621Z\"\n      fill=\"#F5F5FC\"\n    />\n    <path\n      d=\"M1302.64 216.621L1414.6 281.209V410.384L1302.64 474.972L1190.67 410.384V281.209L1302.64 216.621Z\"\n      fill=\"#F5F5FC\"\n    />\n    <path\n      d=\"M1078.64 603.211L1190.6 667.937V797.389L1078.64 862.115L966.672 797.389V667.937L1078.64 603.211Z\"\n      fill=\"#F2F1FB\"\n    />\n    <path\n      d=\"M1302.64 602.211L1414.6 666.937V796.389L1302.64 861.115L1190.67 796.389V666.937L1302.64 602.211Z\"\n      fill=\"#F2F1FB\"\n    />\n    <path\n      d=\"M1190.88 23.4434L1302.84 88.1695V217.622L1190.88 282.348L1078.91 217.622V88.1695L1190.88 23.4434Z\"\n      fill=\"#F2F4F9\"\n    />\n    <path\n      d=\"M1301.88 -170.557L1413.84 -105.831V23.6217L1301.88 88.3477L1189.91 23.6217V-105.831L1301.88 -170.557Z\"\n      fill=\"#F2F4F9\"\n    />\n    <path\n      d=\"M1190.88 409.033L1302.84 473.759V603.211L1190.88 667.938L1078.91 603.211V473.759L1190.88 409.033Z\"\n      fill=\"#F4F2FC\"\n    />\n    <path\n      d=\"M1190.88 795.176L1302.84 859.764V988.939L1190.88 1053.53L1078.91 988.939V859.764L1190.88 795.176Z\"\n      fill=\"#F2EFF9\"\n    />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_6783_1966\">\n      <rect width=\"1280\" height=\"1280\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>";
+
+// commented out s+ props as the svgs don't exist yet
+var BackgroundGradients = {
+    HomepageDark1: {
+        xs: HomepageDark1,
+        // s: HomepageDark1,
+        // m: HomepageDark1,
+        // l: HomepageDark1,
+        // xl: HomepageDark1,
+        // xxl: HomepageDark1,
+    },
+    HomepageDark2: {
+        xs: HomepageDark2,
+        // s: HomepageDark2,
+        // m: HomepageDark2,
+        // l: HomepageDark2,
+        // xl: HomepageDark2,
+        // xxl: HomepageDark2,
+    },
+    ProductpageDark1: {
+        xs: ProductpageDark1,
+        // s: ProductpageDark1,
+        // m: ProductpageDark1,
+        // l: ProductpageDark1,
+        // xl: ProductpageDark1,
+        // xxl: ProductpageDark1,
+    },
+    ProductpageDark2: {
+        xs: ProductpageDark2,
+        // s: ProductpageDark2,
+        // m: ProductpageDark2,
+        // l: ProductpageDark2,
+        // xl: ProductpageDark2,
+        // xxl: ProductpageDark2,
+    },
+    HomepageLight1: {
+        xs: HomepageLight1,
+        // s: HomepageLight1,
+        // m: HomepageLight1,
+        // l: HomepageLight1,
+        // xl: HomepageLight1,
+        // xxl: HomepageLight1,
+    },
+    HomepageLight2: {
+        xs: HomepageLight2,
+        // s: HomepageLight2,
+        // m: HomepageLight2,
+        // l: HomepageLight2,
+        // xl: HomepageLight2,
+        // xxl: HomepageLight2,
+    },
+    ProductpageLight1: {
+        xs: ProductpageLight1,
+        // s: ProductpageLight1,
+        // m: ProductpageLight1,
+        // l: ProductpageLight1,
+        // xl: ProductpageLight1,
+        // xxl: ProductpageLight1,
+    },
+    ProductpageLight2: {
+        xs: ProductpageLight2,
+        // s: ProductpageLight2,
+        // m: ProductpageLight2,
+        // l: ProductpageLight2,
+        // xl: ProductpageLight2,
+        // xxl: ProductpageLight2,
+    },
+    FooterLight: {
+        xs: FooterLight,
+        // s: FooterLight,
+        // m: FooterLight,
+        // l: FooterLight,
+        // xl: FooterLight,
+        // xxl: FooterLight,
+    },
+};
+
+var ScrimFade = function (props) {
+    var _a;
+    var totalHeight = (_a = props === null || props === void 0 ? void 0 : props.scrimfadeheight) !== null && _a !== void 0 ? _a : 1000;
+    if (!props.scrimfadeheight && props.scrimfadesize) {
+        if (props.scrimfadesize === "l") {
+            totalHeight = 1408;
+        }
+        else if (props.scrimfadesize === "m") {
+            totalHeight = 1024;
+        }
+        else if (props.scrimfadesize === "s") {
+            totalHeight = 640;
+        }
+    }
+    var fadeHeight = totalHeight - 128;
+    return (React.createElement("svg", __assign({ width: "1024", height: totalHeight, viewBox: "0 0 1024 ".concat(totalHeight), fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("rect", { y: "128", width: "1024", height: fadeHeight, fill: "url(#paint0_linear_6538_9883)" }),
+        React.createElement("g", { opacity: "0.7" },
+            React.createElement("rect", { width: "1024", height: totalHeight, fill: "url(#paint1_linear_6538_9883)", style: { mixBlendMode: "soft-light" } })),
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: "paint0_linear_6538_9883", x1: "512", y1: "128", x2: "512", y2: totalHeight, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "white", stopOpacity: "0" }),
+                React.createElement("stop", { offset: "0.0806874", stopColor: "white", stopOpacity: "0.01" }),
+                React.createElement("stop", { offset: "0.155366", stopColor: "white", stopOpacity: "0.0217837" }),
+                React.createElement("stop", { offset: "0.22496", stopColor: "white", stopOpacity: "0.04832" }),
+                React.createElement("stop", { offset: "0.290394", stopColor: "white", stopOpacity: "0.0846696" }),
+                React.createElement("stop", { offset: "0.352593", stopColor: "white", stopOpacity: "0.13037" }),
+                React.createElement("stop", { offset: "0.41248", stopColor: "white", stopOpacity: "0.18496" }),
+                React.createElement("stop", { offset: "0.470981", stopColor: "white", stopOpacity: "0.247976" }),
+                React.createElement("stop", { offset: "0.529019", stopColor: "white", stopOpacity: "0.318957" }),
+                React.createElement("stop", { offset: "0.58752", stopColor: "white", stopOpacity: "0.39744" }),
+                React.createElement("stop", { offset: "0.647407", stopColor: "white", stopOpacity: "0.482963" }),
+                React.createElement("stop", { offset: "0.709606", stopColor: "white", stopOpacity: "0.575064" }),
+                React.createElement("stop", { offset: "0.77504", stopColor: "white", stopOpacity: "0.67328" }),
+                React.createElement("stop", { offset: "0.844634", stopColor: "white", stopOpacity: "0.77715" }),
+                React.createElement("stop", { offset: "0.919313", stopColor: "white", stopOpacity: "0.88621" }),
+                React.createElement("stop", { offset: "1", stopColor: "white" })),
+            React.createElement("linearGradient", { id: "paint1_linear_6538_9883", x1: "512", y1: "0", x2: "512", y2: totalHeight, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "white", stopOpacity: "0" }),
+                React.createElement("stop", { offset: "1", stopColor: "white" })))));
+};
+
+var GradientPageBackground = function (_a) {
+    var _b, _c;
+    var _d = _a.type, type = _d === void 0 ? "HomepageDark1" : _d, children = _a.children, scrimFadeSize = _a.scrimFadeSize, scrimFadeHeights = _a.scrimFadeHeights, _e = _a.scrimFadePosition, scrimFadePosition = _e === void 0 ? "bottom" : _e, extendBackgrounds = _a.extendBackgrounds, customGradients = _a.customGradients, props = __rest(_a, ["type", "children", "scrimFadeSize", "scrimFadeHeights", "scrimFadePosition", "extendBackgrounds", "customGradients"]);
+    var _f = useState(), scrimFadeHeight = _f[0], setScrimFadeHeight = _f[1];
+    var _g = useState(), extendBackground = _g[0], setExtendBackground = _g[1];
+    var _h = useState(BackgroundGradients.HomepageDark1.xs), backgroundGradient = _h[0], setBackgroundGradient = _h[1];
+    var _j = useState(), customGradient = _j[0], setCustomGradient = _j[1];
+    var _k = useState("xs"), breakpoint = _k[0], setBreakpoint = _k[1];
+    var gradientUri = svgToMiniDataURI(backgroundGradient !== null && backgroundGradient !== void 0 ? backgroundGradient : "");
+    var isMinWidthArcBreakpointS = useMediaQuery(S_BREAKPOINT);
+    var isMinWidthArcBreakpointM = useMediaQuery(M_BREAKPOINT);
+    var isMinWidthArcBreakpointL = useMediaQuery(L_BREAKPOINT);
+    var isMinWidthArcBreakpointXl = useMediaQuery(XL_BREAKPOINT);
+    //  Update current breakpoint value for props
+    useEffect(function () {
+        var _a;
+        var breakpoints = [
+            ["xl", isMinWidthArcBreakpointXl],
+            ["l", isMinWidthArcBreakpointL],
+            ["m", isMinWidthArcBreakpointM],
+            ["s", isMinWidthArcBreakpointS],
+            ["xs", true],
+        ];
+        var matched = breakpoints.find(function (_a) {
+            var match = _a[1];
+            return match;
+        });
+        setBreakpoint((_a = matched === null || matched === void 0 ? void 0 : matched[0]) !== null && _a !== void 0 ? _a : "xs");
+    }, [
+        isMinWidthArcBreakpointXl,
+        isMinWidthArcBreakpointL,
+        isMinWidthArcBreakpointM,
+        isMinWidthArcBreakpointS,
+    ]);
+    // Function to inherit the last provided value when no value is provided
+    var inheritFallbackKey = function (obj, key) {
+        var keysInOrder = ["xs", "s", "m", "l", "xl", "xxl"];
+        var index = keysInOrder.indexOf(key);
+        if (index === -1)
+            return;
+        for (var i = index; i >= 0; i--) {
+            var fallbackKey = keysInOrder[i];
+            if (obj[fallbackKey] !== undefined) {
+                return obj[fallbackKey];
+            }
+        }
+        return undefined;
+    };
+    // Update props when breakpoint changes
+    useEffect(function () {
+        var _a;
+        if (!breakpoint)
+            return;
+        setScrimFadeHeight(inheritFallbackKey(scrimFadeHeights !== null && scrimFadeHeights !== void 0 ? scrimFadeHeights : {}, breakpoint));
+        setExtendBackground(inheritFallbackKey(extendBackgrounds !== null && extendBackgrounds !== void 0 ? extendBackgrounds : {}, breakpoint));
+        setBackgroundGradient(inheritFallbackKey((_a = BackgroundGradients === null || BackgroundGradients === void 0 ? void 0 : BackgroundGradients[type]) !== null && _a !== void 0 ? _a : {}, breakpoint));
+        setCustomGradient(inheritFallbackKey(customGradients !== null && customGradients !== void 0 ? customGradients : {}, breakpoint));
+    }, [breakpoint, type]); // type only for storybook
+    return (React__default.createElement("div", __assign({ className: classNames("arc-GradientPageBackground", (_b = {},
+            _b["arc-GradientPageBackground--".concat(scrimFadePosition)] = scrimFadePosition,
+            _b)), style: extendBackground && scrimFadePosition == "bottom"
+            ? {
+                paddingBottom: "".concat(extendBackground, "px"),
+                marginBottom: "-".concat(extendBackground, "px"),
+            }
+            : {
+                paddingTop: "".concat(extendBackground, "px"),
+                marginTop: "-".concat(extendBackground, "px"),
+            } }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-GradientPageBackground-svgWrapper" },
+            React__default.createElement("img", { src: customGradient || gradientUri, alt: "", className: "arc-GradientPageBackground-svgbg" })),
+        React__default.createElement("div", { className: "arc-GradientPageBackground-content" },
+            React__default.createElement(Surface, { isTransparent: true, background: customGradient
+                    ? (customGradient === null || customGradient === void 0 ? void 0 : customGradient.includes("Light"))
+                        ? "light-white"
+                        : "dark-black"
+                    : type.includes("Light")
+                        ? "light-white"
+                        : "dark-black" }, children)),
+        scrimFadeSize && (React__default.createElement(ScrimFade, { className: classNames("arc-GradientPageBackground-scrimFade", (_c = {},
+                _c["arc-GradientPageBackground-scrimFade--".concat(scrimFadePosition)] = scrimFadePosition,
+                _c)), scrimfadeheight: scrimFadeHeight ? scrimFadeHeight : null, scrimfadesize: scrimFadeSize, preserveAspectRatio: "none" }))));
 };
 
 /**
@@ -16448,7 +16773,9 @@ var ImpactCard = function (_a) {
         React__default.createElement("div", { className: "arc-ImpactCard-backgroundImageContainer" },
             React__default.createElement(Image, __assign({ fit: "cover", alt: "" }, img))),
         React__default.createElement("div", { className: "arc-ImpactCard-contentContainer" },
-            label && (React__default.createElement("div", { className: "arc-ImpactCard-label" }, label.toUpperCase())),
+            label && (React__default.createElement("div", { className: "arc-ImpactCard-label" },
+                React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
+                React__default.createElement(VerticalSpace, { size: "16" }))),
             React__default.createElement(CardHeading, { heading: heading, size: headingSize, headingLevel: headingLevel, linkData: linkData, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
         React__default.createElement(CardFooter, { buttonIcon: buttonIcon, showButton: true, isDarkPathway: isDarkPathway, isHovered: showHoverState })));
 };
@@ -16501,6 +16828,7 @@ var InformationCard = function (_a) {
         window.addEventListener("resize", checkMinHeight);
         return function () {
             window.removeEventListener("resize", checkMinHeight);
+            checkMinHeight.cancel();
         };
     }, [minHeights, ArcBreakpoints]);
     return (React__default.createElement("div", __assign({ style: { minHeight: minHeight ? minHeight : minimumHeight }, className: classNames("arc-InformationCard", {
@@ -16517,7 +16845,8 @@ var InformationCard = function (_a) {
                         React__default.createElement(Icon$1, { testId: "information-card-icon", icon: icon })))),
                 React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
                     label && (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("div", { className: "arc-InformationCard-label" }, label.toUpperCase()))),
+                        React__default.createElement("div", { className: "arc-InformationCard-label" },
+                            React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label)))),
                     React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
                     text && React__default.createElement(Text, null, text)),
                 (button || badges || footerLogo) && (React__default.createElement("div", { className: "arc-InformationCard-footer" },
@@ -16609,8 +16938,6 @@ var MediaCard = function (_a) {
     var surface = useContext(Context$3).surface;
     var _e = useState(false), isClient = _e[0], setIsClient = _e[1];
     var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
-    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
-    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     useEffect(function () {
         setIsClient(true);
@@ -16626,12 +16953,12 @@ var MediaCard = function (_a) {
             media.type === "video" && isClient && (React__default.createElement(Suspense, { fallback: null },
                 React__default.createElement(VideoPlayer$1, __assign({ isSupportingTextHidden: true }, media)))),
             React__default.createElement("div", { className: "arc-MediaCard-content" },
-                label && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
+                label && (React__default.createElement("div", { className: "arc-MediaCard-label" },
+                    React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
+                    React__default.createElement(VerticalSpace, { size: "16" }))),
                 React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
                 React__default.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
+                    React__default.createElement(VerticalSpace, { size: "16" }),
                     React__default.createElement(Text, null, text),
                     (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
                 React__default.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));
@@ -17288,7 +17615,7 @@ var MenuItemImpl = React.forwardRef(
   }
 );
 var CHECKBOX_ITEM_NAME$1 = "MenuCheckboxItem";
-var MenuCheckboxItem$1 = React.forwardRef(
+var MenuCheckboxItem = React.forwardRef(
   (props, forwardedRef) => {
     const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
     return /* @__PURE__ */ jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx(
@@ -17308,23 +17635,23 @@ var MenuCheckboxItem$1 = React.forwardRef(
     ) });
   }
 );
-MenuCheckboxItem$1.displayName = CHECKBOX_ITEM_NAME$1;
+MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME$1;
 var RADIO_GROUP_NAME$1 = "MenuRadioGroup";
 var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(
   RADIO_GROUP_NAME$1,
   { value: void 0, onValueChange: () => {
   } }
 );
-var MenuRadioGroup$1 = React.forwardRef(
+var MenuRadioGroup = React.forwardRef(
   (props, forwardedRef) => {
     const { value, onValueChange, ...groupProps } = props;
     const handleValueChange = useCallbackRef$1(onValueChange);
     return /* @__PURE__ */ jsx(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx(MenuGroup$1, { ...groupProps, ref: forwardedRef }) });
   }
 );
-MenuRadioGroup$1.displayName = RADIO_GROUP_NAME$1;
+MenuRadioGroup.displayName = RADIO_GROUP_NAME$1;
 var RADIO_ITEM_NAME$1 = "MenuRadioItem";
-var MenuRadioItem$1 = React.forwardRef(
+var MenuRadioItem = React.forwardRef(
   (props, forwardedRef) => {
     const { value, ...radioItemProps } = props;
     const context = useRadioGroupContext(RADIO_ITEM_NAME$1, props.__scopeMenu);
@@ -17346,7 +17673,7 @@ var MenuRadioItem$1 = React.forwardRef(
     ) });
   }
 );
-MenuRadioItem$1.displayName = RADIO_ITEM_NAME$1;
+MenuRadioItem.displayName = RADIO_ITEM_NAME$1;
 var ITEM_INDICATOR_NAME = "MenuItemIndicator";
 var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
   ITEM_INDICATOR_NAME,
@@ -17400,7 +17727,7 @@ var MenuArrow = React.forwardRef(
 MenuArrow.displayName = ARROW_NAME$3;
 var SUB_NAME = "MenuSub";
 var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
-var MenuSub$1 = (props) => {
+var MenuSub = (props) => {
   const { __scopeMenu, children, open = false, onOpenChange } = props;
   const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
   const popperScope = usePopperScope$1(__scopeMenu);
@@ -17433,9 +17760,9 @@ var MenuSub$1 = (props) => {
     }
   ) });
 };
-MenuSub$1.displayName = SUB_NAME;
+MenuSub.displayName = SUB_NAME;
 var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
-var MenuSubTrigger$1 = React.forwardRef(
+var MenuSubTrigger = React.forwardRef(
   (props, forwardedRef) => {
     const context = useMenuContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
     const rootContext = useMenuRootContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
@@ -17534,9 +17861,9 @@ var MenuSubTrigger$1 = React.forwardRef(
     ) });
   }
 );
-MenuSubTrigger$1.displayName = SUB_TRIGGER_NAME$1;
+MenuSubTrigger.displayName = SUB_TRIGGER_NAME$1;
 var SUB_CONTENT_NAME$1 = "MenuSubContent";
-var MenuSubContent$1 = React.forwardRef(
+var MenuSubContent = React.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext$1(CONTENT_NAME$3, props.__scopeMenu);
     const { forceMount = portalContext.forceMount, ...subContentProps } = props;
@@ -17582,7 +17909,7 @@ var MenuSubContent$1 = React.forwardRef(
     ) }) }) });
   }
 );
-MenuSubContent$1.displayName = SUB_CONTENT_NAME$1;
+MenuSubContent.displayName = SUB_CONTENT_NAME$1;
 function getOpenState(open) {
   return open ? "open" : "closed";
 }
@@ -17643,15 +17970,15 @@ var Content2$2 = MenuContent$1;
 var Group = MenuGroup$1;
 var Label = MenuLabel$1;
 var Item2$1 = MenuItem$1;
-var CheckboxItem = MenuCheckboxItem$1;
-var RadioGroup$1 = MenuRadioGroup$1;
-var RadioItem = MenuRadioItem$1;
+var CheckboxItem = MenuCheckboxItem;
+var RadioGroup$1 = MenuRadioGroup;
+var RadioItem = MenuRadioItem;
 var ItemIndicator = MenuItemIndicator;
 var Separator = MenuSeparator$1;
 var Arrow2$1 = MenuArrow;
-var Sub = MenuSub$1;
-var SubTrigger = MenuSubTrigger$1;
-var SubContent = MenuSubContent$1;
+var Sub = MenuSub;
+var SubTrigger = MenuSubTrigger;
+var SubContent = MenuSubContent;
 
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope$1(
@@ -17896,7 +18223,6 @@ var Trigger$1 = DropdownMenuTrigger;
 var Portal2 = DropdownMenuPortal;
 var Content2$1 = DropdownMenuContent;
 var Group2 = DropdownMenuGroup;
-var Label2 = DropdownMenuLabel;
 var Item2 = DropdownMenuItem;
 var CheckboxItem2 = DropdownMenuCheckboxItem;
 var RadioGroup2 = DropdownMenuRadioGroup;
@@ -17929,17 +18255,17 @@ var MenuItemContentTemplate = function (_a) {
                 React__default.createElement(Icon$1, { icon: trailingIcon, size: 24 }))))) : null));
 };
 
-var MenuCheckboxItem = function (_a) {
+var MenuItemCheckbox = function (_a) {
     var children = _a.children, checked = _a.checked, onCheckedChange = _a.onCheckedChange, isDisabled = _a.isDisabled, onSelect = _a.onSelect, id = _a.id, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, props = __rest(_a, ["children", "checked", "onCheckedChange", "isDisabled", "onSelect", "id", "shouldKeepOpen"]);
-    return (React__default.createElement(CheckboxItem2, __assign({ className: "arc-MenuItem arc-MenuCheckboxItem", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
+    return (React__default.createElement(CheckboxItem2, __assign({ className: "arc-MenuItem arc-MenuItemCheckbox", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
                 onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
             }
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
         }, id: id }, filterAttrs(props)),
-        React__default.createElement("div", { className: classNames("arc-MenuCheckboxItem-box", {
-                "arc-MenuCheckboxItem-box--checked": checked,
+        React__default.createElement("div", { className: classNames("arc-MenuItemCheckbox-box", {
+                "arc-MenuItemCheckbox-box--checked": checked,
             }) }, checked && (React__default.createElement("svg", { style: { width: 14, height: 11 }, viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
         React__default.createElement(MenuItemContentTemplate, null, children)));
@@ -17953,21 +18279,6 @@ var MenuContent = React__default.forwardRef(function (_a, ref) {
     return (React__default.createElement(Content2$1, __assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 12, loop: true, collisionPadding: 12, forceMount: true, align: align, alignOffset: alignOffset, side: side }, filterAttrs(props)), children));
 });
 
-/**
- * Use `Rule` to display a horizontal or vertical rule.
- */
-var Rule = function (_a, props) {
-    var _b;
-    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
-    var surface = useContext(Context$3).surface;
-    return (React__default.createElement("hr", __assign({ className: classNames((_b = {
-                "arc-Rule": true
-            },
-            _b["arc-Rule--".concat(orientation)] = true,
-            _b["arc-Rule--onDarkSurface"] = surface === "dark",
-            _b)) }, filterAttrs(props))));
-};
-
 /**
  * Displays footer content at the bottom of the menu.
  */
@@ -17976,14 +18287,6 @@ var MenuFooter = function (_a) {
     return (React__default.createElement("div", { className: "arc-MenuFooter", style: {
             position: "relative",
         } },
-        React__default.createElement("div", { style: {
-                height: "12px",
-                background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-                position: "absolute",
-                width: "100%",
-                zIndex: 3,
-                top: -12,
-            } }),
         React__default.createElement("div", { className: "arc-MenuSeparator", style: { paddingTop: 0 } },
             React__default.createElement(Rule, null)),
         React__default.createElement(Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
@@ -18009,14 +18312,7 @@ var MenuHeader = function (_a) {
         React__default.createElement("div", { className: "arc-MenuSeparator", style: {
                 paddingBottom: 0,
             } },
-            React__default.createElement(Rule, null),
-            React__default.createElement("div", { style: {
-                    height: "12px",
-                    background: "linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-                    position: "absolute",
-                    width: "100%",
-                    zIndex: 3,
-                } }))));
+            React__default.createElement(Rule, null))));
 };
 
 /**
@@ -18039,7 +18335,8 @@ var MenuItem = function (_a) {
  */
 var MenuLabel = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement(Label2, __assign({ className: "arc-MenuLabel" }, filterAttrs(props)), children));
+    return (React__default.createElement(Item2, __assign({ asChild: true, className: "arc-MenuLabel", tabIndex: 0, role: "presentation" }, filterAttrs(props), { style: { pointerEvents: "none" } }),
+        React__default.createElement("div", null, children)));
 };
 
 /**
@@ -18055,9 +18352,9 @@ var MenuPortal = function (_a) {
 /**
  * Groups menu items allowing single selection from multiple options.
  */
-var MenuRadioGroup = function (_a) {
+var MenuGroupSingleSelect = function (_a) {
     var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["children", "value", "onValueChange"]);
-    return (React__default.createElement(RadioGroup2, __assign({ className: "arc-MenuRadioGroup", value: value, onValueChange: onValueChange }, filterAttrs(props)), children));
+    return (React__default.createElement(RadioGroup2, __assign({ className: "arc-MenuGroupSingleSelect", value: value, onValueChange: onValueChange }, filterAttrs(props)), children));
 };
 
 /**
@@ -18119,9 +18416,9 @@ const BtIconTickAlt2Px =
 /**
  * A selectable menu item used within a radio group.
  */
-var MenuRadioItem = function (_a) {
+var MenuItemSingleSelect = function (_a) {
     var children = _a.children, value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onSelect = _a.onSelect, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, _c = _a.shouldKeepOpen, shouldKeepOpen = _c === void 0 ? true : _c, props = __rest(_a, ["children", "value", "disabled", "onSelect", "leadingIcon", "supportingText", "shouldKeepOpen"]);
-    return (React__default.createElement(RadioItem2, __assign({ className: "arc-MenuItem arc-MenuRadioItem", value: value, disabled: disabled, onSelect: function (event) {
+    return (React__default.createElement(RadioItem2, __assign({ className: "arc-MenuItem arc-MenuItemSingleSelect", value: value, disabled: disabled, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
             }
@@ -18163,9 +18460,9 @@ var MenuSeparator = function (props) {
 };
 
 /**
- * Container for submenu content within a dropdown menu.
+ * Container for multi-level menu content within a dropdown menu.
  */
-var MenuSub = function (_a) {
+var MenuItemMultiLevel = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return React__default.createElement(Sub2, __assign({}, filterAttrs(props)),
         " ",
@@ -18173,17 +18470,17 @@ var MenuSub = function (_a) {
 };
 
 /**
- * The submenu content that pops out when a menu item with children is hovered or clicked.
+ * The multi-level menu content that pops out when a menu item with children is hovered or clicked.
  */
-var MenuSubContent = React__default.forwardRef(function (_a, ref) {
+var MenuItemMultiLevelContent = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = __rest(_a, ["children", "width", "minWidth", "maxWidth", "alignOffset"]);
-    return (React__default.createElement(SubContent2, __assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent arc-MenuSubContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs(props)), children));
+    return (React__default.createElement(SubContent2, __assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs(props)), children));
 });
 
 /**
- * Trigger element that opens a submenu when selected.
+ * Trigger element that opens a multi-level menu when selected.
  */
-var MenuSubTrigger = function (_a) {
+var MenuItemMultiLevelTrigger = function (_a) {
     var children = _a.children, isDisabled = _a.isDisabled, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "isDisabled", "leadingIcon", "supportingText", "keyCommands", "ariaLabel"]);
     return (React__default.createElement(SubTrigger2, __assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-MenuItem-content" },
@@ -18203,7 +18500,7 @@ var MenuSubTrigger = function (_a) {
  */
 var MenuTrigger = function (_a) {
     var children = _a.children, asChild = _a.asChild, props = __rest(_a, ["children", "asChild"]);
-    return (React__default.createElement(Trigger$1, __assign({ className: ".arc-MenuItem arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
+    return (React__default.createElement(Trigger$1, __assign({ className: "arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
 };
 
 /** Use `Modal` to display information that needs immediate action from a user. */
@@ -18448,138 +18745,6 @@ var ProgressBar = function (_a) {
                             React__default.createElement(ThemeIcon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
 };
 
-var shorterCssColorNames;
-var hasRequiredShorterCssColorNames;
-
-function requireShorterCssColorNames () {
-	if (hasRequiredShorterCssColorNames) return shorterCssColorNames;
-	hasRequiredShorterCssColorNames = 1;
-	shorterCssColorNames = {
-	  aqua: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
-	  azure: /#f0ffff(ff)?(?!\w)/gi,
-	  beige: /#f5f5dc(ff)?(?!\w)/gi,
-	  bisque: /#ffe4c4(ff)?(?!\w)/gi,
-	  black: /#000000(ff)?(?!\w)|#000(f)?(?!\w)/gi,
-	  blue: /#0000ff(ff)?(?!\w)|#00f(f)?(?!\w)/gi,
-	  brown: /#a52a2a(ff)?(?!\w)/gi,
-	  coral: /#ff7f50(ff)?(?!\w)/gi,
-	  cornsilk: /#fff8dc(ff)?(?!\w)/gi,
-	  crimson: /#dc143c(ff)?(?!\w)/gi,
-	  cyan: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
-	  darkblue: /#00008b(ff)?(?!\w)/gi,
-	  darkcyan: /#008b8b(ff)?(?!\w)/gi,
-	  darkgrey: /#a9a9a9(ff)?(?!\w)/gi,
-	  darkred: /#8b0000(ff)?(?!\w)/gi,
-	  deeppink: /#ff1493(ff)?(?!\w)/gi,
-	  dimgrey: /#696969(ff)?(?!\w)/gi,
-	  gold: /#ffd700(ff)?(?!\w)/gi,
-	  green: /#008000(ff)?(?!\w)/gi,
-	  grey: /#808080(ff)?(?!\w)/gi,
-	  honeydew: /#f0fff0(ff)?(?!\w)/gi,
-	  hotpink: /#ff69b4(ff)?(?!\w)/gi,
-	  indigo: /#4b0082(ff)?(?!\w)/gi,
-	  ivory: /#fffff0(ff)?(?!\w)/gi,
-	  khaki: /#f0e68c(ff)?(?!\w)/gi,
-	  lavender: /#e6e6fa(ff)?(?!\w)/gi,
-	  lime: /#00ff00(ff)?(?!\w)|#0f0(f)?(?!\w)/gi,
-	  linen: /#faf0e6(ff)?(?!\w)/gi,
-	  maroon: /#800000(ff)?(?!\w)/gi,
-	  moccasin: /#ffe4b5(ff)?(?!\w)/gi,
-	  navy: /#000080(ff)?(?!\w)/gi,
-	  oldlace: /#fdf5e6(ff)?(?!\w)/gi,
-	  olive: /#808000(ff)?(?!\w)/gi,
-	  orange: /#ffa500(ff)?(?!\w)/gi,
-	  orchid: /#da70d6(ff)?(?!\w)/gi,
-	  peru: /#cd853f(ff)?(?!\w)/gi,
-	  pink: /#ffc0cb(ff)?(?!\w)/gi,
-	  plum: /#dda0dd(ff)?(?!\w)/gi,
-	  purple: /#800080(ff)?(?!\w)/gi,
-	  red: /#ff0000(ff)?(?!\w)|#f00(f)?(?!\w)/gi,
-	  salmon: /#fa8072(ff)?(?!\w)/gi,
-	  seagreen: /#2e8b57(ff)?(?!\w)/gi,
-	  seashell: /#fff5ee(ff)?(?!\w)/gi,
-	  sienna: /#a0522d(ff)?(?!\w)/gi,
-	  silver: /#c0c0c0(ff)?(?!\w)/gi,
-	  skyblue: /#87ceeb(ff)?(?!\w)/gi,
-	  snow: /#fffafa(ff)?(?!\w)/gi,
-	  tan: /#d2b48c(ff)?(?!\w)/gi,
-	  teal: /#008080(ff)?(?!\w)/gi,
-	  thistle: /#d8bfd8(ff)?(?!\w)/gi,
-	  tomato: /#ff6347(ff)?(?!\w)/gi,
-	  violet: /#ee82ee(ff)?(?!\w)/gi,
-	  wheat: /#f5deb3(ff)?(?!\w)/gi,
-	  white: /#ffffff(ff)?(?!\w)|#fff(f)?(?!\w)/gi,
-	};
-	return shorterCssColorNames;
-}
-
-var miniSvgDataUri;
-var hasRequiredMiniSvgDataUri;
-
-function requireMiniSvgDataUri () {
-	if (hasRequiredMiniSvgDataUri) return miniSvgDataUri;
-	hasRequiredMiniSvgDataUri = 1;
-	var shorterNames = requireShorterCssColorNames();
-	var REGEX = {
-	  whitespace: /\s+/g,
-	  urlHexPairs: /%[\dA-F]{2}/g,
-	  quotes: /"/g,
-	};
-
-	function collapseWhitespace(str) {
-	  return str.trim().replace(REGEX.whitespace, ' ');
-	}
-
-	function dataURIPayload(string) {
-	  return encodeURIComponent(string)
-	    .replace(REGEX.urlHexPairs, specialHexEncode);
-	}
-
-	// `#` gets converted to `%23`, so quite a few CSS named colors are shorter than
-	// their equivalent URL-encoded hex codes.
-	function colorCodeToShorterNames(string) {
-	  Object.keys(shorterNames).forEach(function(key) {
-	    if (shorterNames[key].test(string)) {
-	      string = string.replace(shorterNames[key], key);
-	    }
-	  });
-
-	  return string;
-	}
-
-	function specialHexEncode(match) {
-	  switch (match) { // Browsers tolerate these characters, and they're frequent
-	    case '%20': return ' ';
-	    case '%3D': return '=';
-	    case '%3A': return ':';
-	    case '%2F': return '/';
-	    default: return match.toLowerCase(); // compresses better
-	  }
-	}
-
-	function svgToTinyDataUri(svgString) {
-	  if (typeof svgString !== 'string') {
-	    throw new TypeError('Expected a string, but received ' + typeof svgString);
-	  }
-	  // Strip the Byte-Order Mark if the SVG has one
-	  if (svgString.charCodeAt(0) === 0xfeff) { svgString = svgString.slice(1); }
-
-	  var body = colorCodeToShorterNames(collapseWhitespace(svgString))
-	    .replace(REGEX.quotes, "'");
-	  return 'data:image/svg+xml,' + dataURIPayload(body);
-	}
-
-	svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
-	  return svgToTinyDataUri(svgString).replace(/ /g, '%20');
-	};
-
-	miniSvgDataUri = svgToTinyDataUri;
-	return miniSvgDataUri;
-}
-
-var miniSvgDataUriExports = requireMiniSvgDataUri();
-var svgToMiniDataURI = /*@__PURE__*/getDefaultExportFromCjs(miniSvgDataUriExports);
-
 // src/capitalise-first-letter/capitalise-first-letter.ts
 var capitaliseFirstLetter = (word) => {
   return word.charAt(0).toUpperCase() + word.slice(1);
@@ -18638,18 +18803,152 @@ var ProgressStepperItem = function (_a) {
 
 /** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
 var ProgressStepper = function (_a) {
-    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition"]);
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
     var items = React__default.Children.toArray(children);
     var getStepStatus = function (item) {
         var _a;
         return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
     };
-    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepper", {
+    return (React__default.createElement("div", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
             "arc-ProgressStepper--vertical": direction === "vertical",
         }) }, filterAttrs(props)), items.map(function (item, index) { return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
         React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs(item.props))))); })));
 };
 
+/** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
+var ProgressStepperOverflow = forwardRef(function (_a, stepperRef) {
+    var children = _a.children, onIndexChange = _a.onIndexChange, onLoadStep = _a.onLoadStep, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["children", "onIndexChange", "onLoadStep", "size", "invertLabelPosition", "offsetLeft"]);
+    var _c = useState(onLoadStep ? onLoadStep : 0), activeIndex = _c[0], setActiveIndex = _c[1];
+    var _d = useState(0), closestScrolledIndex = _d[0], setClosestScrolledIndex = _d[1];
+    var _e = useState(true), lastStepVisible = _e[0], setLastStepVisible = _e[1];
+    var containerRef = useRef(null);
+    useImperativeHandle(stepperRef, function () { return ({
+        handleStepScroll: handleStepScroll,
+        scrollToStep: scrollToStep,
+        handleViewScroll: handleViewScroll,
+        isLastChildVisible: isLastChildVisible,
+    }); });
+    // Add Horizontal Scroll Event Listener
+    useEffect(function () {
+        var _a, _b;
+        var checkClosest = debounce(function () {
+            var closestIndex = findClosestIndex();
+            setClosestScrolledIndex(closestIndex);
+        }, 100);
+        var checkLastChild = debounce(function () {
+            var lastVisible = isLastChildVisible();
+            if (lastVisible) {
+                setLastStepVisible(true);
+            }
+            else
+                setLastStepVisible(false);
+        }, 100);
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", checkLastChild);
+        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", checkClosest);
+        return function () {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", checkClosest);
+            checkLastChild.cancel();
+        };
+    }, []);
+    // Scroll to activeIndex
+    useEffect(function () {
+        scrollTo();
+    }, [activeIndex]);
+    // Exposing changes in activeIndex outside of component
+    useEffect(function () {
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(closestScrolledIndex);
+        isLastChildVisible();
+    }, [closestScrolledIndex, onIndexChange, lastStepVisible]);
+    // helper functions - start
+    var getProgressStepper = function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.firstChild; };
+    var getStepChildren = function () {
+        var _a;
+        return Array.from(((_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children) || []);
+    };
+    var getLeftRects = function (children) {
+        var container = getProgressStepper();
+        if (!container)
+            return [];
+        var parentRect = container.getBoundingClientRect();
+        return children.map(function (child) {
+            var childRect = child.getBoundingClientRect();
+            return {
+                left: childRect.left - parentRect.left,
+            };
+        });
+    };
+    var indexOfClosest = function (values) {
+        return values.indexOf(Math.min.apply(Math, values));
+    };
+    // helper functions - end
+    var isLastChildVisible = function () {
+        var _a;
+        var steps = getStepChildren();
+        var lastStep = steps[steps.length - 1];
+        var rect = lastStep.getBoundingClientRect();
+        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        return rect.right <= containerRect.right;
+    };
+    // Used for onScroll function of scrolling without buttons
+    var findClosestIndex = function () {
+        var _a, _b;
+        var children = getStepChildren();
+        var scrolledAmount = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+        // compare the scrolled amount to the intial left edge distance for each step
+        var getScrollDistances = function (children, scrolledAmount) {
+            return getLeftRects(children).map(function (rect) {
+                return Math.abs(scrolledAmount - rect.left);
+            });
+        };
+        var closestIndex = indexOfClosest(getScrollDistances(children, scrolledAmount));
+        return closestIndex;
+    };
+    // Scroll active step to the far left of the page
+    var scrollTo = function () {
+        var _a, _b;
+        var activeStep = (_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children[activeIndex];
+        if (activeStep) {
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                left: activeStep.offsetLeft - offsetLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+    var handleStepScroll = function (increment) {
+        // Account for any manual scrolling set closest index to active index
+        setActiveIndex(closestScrolledIndex);
+        var newIndex = closestScrolledIndex + increment;
+        setActiveIndex(newIndex);
+        // If clicking backwards to include half visible step
+        if (closestScrolledIndex + increment === activeIndex) {
+            scrollTo();
+        }
+        if (closestScrolledIndex + increment < 0) {
+            setActiveIndex(0);
+            scrollTo();
+        }
+    };
+    // Used to scroll by Parent width
+    var handleViewScroll = function (direction) {
+        var _a;
+        var clientWidth = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        var stepper = containerRef.current;
+        if (!stepper)
+            return;
+        stepper.scrollBy({
+            left: direction ? clientWidth : -clientWidth,
+            behavior: "smooth",
+        });
+    };
+    // Used to set a specific step to jump to on a button click
+    var scrollToStep = function (step) {
+        setActiveIndex(step);
+    };
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
+        React__default.createElement(ProgressStepper, { size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
+});
+
 var RadioContext$1 = createContext({});
 var Provider$3 = RadioContext$1.Provider;
 var useRadioContext$1 = function () {
@@ -18723,18 +19022,17 @@ var useRadioContext = function () {
  * Use `RadioGroup` to wrap and control radio buttons and apply default values
  */
 var RadioGroup = function (_a) {
-    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, errorMessage = _a.errorMessage, _c = _a.isRequired, isRequired = _c === void 0 ? true : _c, helper = _a.helper, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "errorMessage", "isRequired", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, errorMessage = _a.errorMessage, _c = _a.isRequired, isRequired = _c === void 0 ? true : _c, helper = _a.helper, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "errorMessage", "isRequired", "helper", "label", "name", "onBlur", "onChange", "size"]);
     return (React__default.createElement(Provider$2, { value: {
             blurEvent: onBlur,
             changeEvent: onChange,
             groupDisabled: isDisabled,
             checkedValue: checkedValue,
-            labelSize: labelSize,
             name: name,
             size: size,
         } },
         React__default.createElement("div", __assign({ className: "arc-RadioGroup" }, filterAttrs(props)),
-            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: isRequired ? "required" : "optional", helperUnderLabel: true, errorMessage: isRequired && checkedValue === "" ? errorMessage : "" },
+            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: size, helper: helper, id: id, requirementStatus: isRequired ? "required" : "optional", helperUnderLabel: true, errorMessage: isRequired && checkedValue === "" ? errorMessage : "" },
                 React__default.createElement("span", { className: "arc-RadioGroup-radioButtonContainer" }, children)))));
 };
 
@@ -18767,11 +19065,11 @@ var RadioGroupButton = forwardRef(function (_a, ref) {
  */
 var RadioGroupInput = forwardRef(function (_a, ref) {
     var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value"]);
-    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, labelSize = _c.labelSize, name = _c.name, size = _c.size;
+    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, name = _c.name, size = _c.size;
     var isChecked = checkedValue === value ? true : false;
     var checked = typeof changeEvent !== "function" ? undefined : isChecked;
     var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
-    return (React__default.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, labelSize: labelSize, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
+    return (React__default.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
 });
 
 /**
@@ -18786,7 +19084,10 @@ var ScrollToTop = function (_a) {
             setHasScrolled(window.scrollY > 0);
         }, 100);
         window.addEventListener("scroll", handleScroll);
-        return function () { return window.removeEventListener("scroll", handleScroll); };
+        return function () {
+            window.removeEventListener("scroll", handleScroll);
+            handleScroll.cancel();
+        };
     });
     var onClick = function () {
         window.scrollTo({
@@ -18824,7 +19125,7 @@ var Section = function (_a) {
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
     var _b;
-    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, value = _a.value, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, hideLabel = _a.hideLabel, name = _a.name, width = _a.width, isFluid = _a.isFluid, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, open = _a.open, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _d = _a.selectSize, selectSize = _d === void 0 ? "m" : _d, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "value", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "hideLabel", "name", "width", "isFluid", "onBlur", "onFocus", "onChange", "open", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
+    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, value = _a.value, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, _d = _a.size, size = _d === void 0 ? "m" : _d, helper = _a.helper, hideLabel = _a.hideLabel, name = _a.name, width = _a.width, isFluid = _a.isFluid, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, open = _a.open, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "value", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "size", "helper", "hideLabel", "name", "width", "isFluid", "onBlur", "onFocus", "onChange", "open", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var id = useId$1();
     var _e = useThemeElement(), themeElement = _e[0], setThemeElement = _e[1];
     var surface = useContext(Context$3).surface;
@@ -18839,8 +19140,8 @@ var Select = function (_a) {
         var _a;
         return (_a = options.find(function (option) { return option.value === value; })) === null || _a === void 0 ? void 0 : _a.name;
     };
-    var getIconSize = function (selectSize) {
-        switch (selectSize) {
+    var getIconSize = function (size) {
+        switch (size) {
             case "s":
                 return 16;
             case "l":
@@ -18849,7 +19150,7 @@ var Select = function (_a) {
                 return 20;
         }
     };
-    return (React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
         React__default.createElement(Root2$2, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectValue, open: open, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
             React__default.createElement("div", { ref: setThemeElement, className: "arc-Select-wrapper" },
                 React__default.createElement(Trigger$2, __assign({ id: id, name: name, onBlur: onBlur, onFocus: onFocus, "aria-label": ariaLabel, style: { width: width, marginTop: hideLabel ? 0 : undefined }, className: classNames("arc-Select-trigger", (_b = {
@@ -18857,28 +19158,24 @@ var Select = function (_a) {
                             "arc-Select-trigger--onDarkSurface": surface === "dark",
                             "arc-Select-trigger--invalid": errorMessage
                         },
-                        _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
+                        _b["arc-Select-trigger--size".concat(size && size.toUpperCase())] = size && size !== "m",
                         _b)), "aria-describedby": id + (disclosureText ? "-disclosure" : "-helper") }, filterAttrs(props)),
                     React__default.createElement(Value, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default.createElement(Icon, { className: "arc-Select-triggerIcon" },
-                        React__default.createElement(ThemeIcon, { size: getIconSize(selectSize), icon: "selectTrigger" }))),
+                        React__default.createElement(ThemeIcon, { size: getIconSize(size), icon: "selectTrigger" }))),
                 React__default.createElement(Portal$4, { container: themeElement },
                     React__default.createElement(Content2$3, { sideOffset: 5, position: "popper", className: classNames("arc-Select-content", {
                             "arc-Select-content--onDarkSurface": surface === "dark",
                         }) },
-                        React__default.createElement(ScrollUpButton, { className: "arc-Select-scrollButton" },
-                            React__default.createElement(ThemeIcon, { size: 16, icon: "selectScrollUp" })),
-                        React__default.createElement(Viewport, null, options.map(function (_a, i) {
+                        React__default.createElement(Viewport, { className: "arc-Select-content--scrollable" }, options.map(function (_a, i) {
                             var name = _a.name, value = _a.value;
                             return (React__default.createElement(Item$1, { className: "arc-Select-item", key: "select-item-".concat(i), value: value },
                                 React__default.createElement("div", { className: "arc-Select-itemTextWrapper" },
                                     React__default.createElement(ItemText, { asChild: true },
                                         React__default.createElement("span", { className: "arc-Select-itemText" }, name))),
-                                React__default.createElement(ItemIndicator$1, null,
-                                    React__default.createElement(ThemeIcon, { size: 20, icon: "selectIndicator" }))));
-                        })),
-                        React__default.createElement(ScrollDownButton, { className: "arc-Select-scrollButton" },
-                            React__default.createElement(ThemeIcon, { size: 16, icon: "selectScrollDown" }))))))));
+                                React__default.createElement(ItemIndicator$1, { className: "arc-Select-itemSelectIcon" },
+                                    React__default.createElement(ThemeIcon, { size: 24, icon: "selectIndicator" }))));
+                        }))))))));
 };
 
 /**
@@ -18902,16 +19199,20 @@ var SiteFooter = function (_a) {
                                 React__default.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
                             React__default.createElement(BrandLogo, { label: logoLabel }))))))));
 };
-var SiteFooterItemGroup = function (_a) {
-    var children = _a.children, title = _a.title;
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
-    return (React__default.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
-        React__default.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+var SiteFooterItemDisclosure = function (_a) {
+    var title = _a.title, children = _a.children, open = _a.open, tabIndex = _a.tabIndex;
+    return (React__default.createElement("details", { className: "arc-SiteFooter-disclosure", open: open },
+        React__default.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: tabIndex },
             React__default.createElement("span", { className: "arc-SiteFooter-icon" },
                 React__default.createElement(ThemeIcon, { icon: "siteFooterExpand" })),
             React__default.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
         React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };
+var SiteFooterItemGroup = function (props) { return (React__default.createElement(React__default.Fragment, null,
+    React__default.createElement(Visible, { "data-testid": "mobile-disclosure", xs: true, s: true },
+        React__default.createElement(SiteFooterItemDisclosure, __assign({}, props, { tabIndex: 0 }))),
+    React__default.createElement(Visible, { "data-testid": "desktop-disclosure", m: true, l: true, xl: true },
+        React__default.createElement(SiteFooterItemDisclosure, __assign({}, props, { open: true, tabIndex: -1 }))))); };
 var SiteFooterItem = function (_a) {
     var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
     return (React__default.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterAttrs(props)),
@@ -18934,35 +19235,33 @@ var SiteFooterV2 = function (_a) {
                 React__default.createElement("h2", { className: "arc-SiteFooterV2-slogan" }, slogan),
                 React__default.createElement(VerticalSpace, { size: "32" }))),
             React__default.createElement("div", { className: "arc-SiteFooterV2-main-utility" }, children)),
-        React__default.createElement(VerticalSpace, { size: "24" }),
-        " "));
+        React__default.createElement(VerticalSpace, { size: "24" })));
 };
 
-/**
- * Do not edit directly
- * Generated on Mon, 19 May 2025 14:54:16 GMT
- */
-var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
-
 var SiteFooterV2Main = function (_a) {
     var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 4 : _b, props = __rest(_a, ["children", "columns"]);
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
-    return (React__default.createElement("nav", __assign({ className: "arc-SiteFooterV2-main ".concat(isMinWidthArcBreakpointL &&
-            columns === 3 &&
-            "arc-SiteFooterV2-main-3Columns"), "aria-label": "Footer navigation links" }, filterAttrs(props)), children));
-};
-var SiteFooterV2ItemGroup = function (_a) {
-    var children = _a.children, title = _a.title, _b = _a.hideDisclosure, hideDisclosure = _b === void 0 ? false : _b, props = __rest(_a, ["children", "title", "hideDisclosure"]);
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
-    return (React__default.createElement("details", __assign({ open: isMinWidthArcBreakpointM, className: classNames("arc-SiteFooterV2-disclosure", {
-            "arc-SiteFooterV2-disclosure--hidden": !isMinWidthArcBreakpointM && hideDisclosure,
-        }), "aria-label": title }, filterAttrs(props)),
-        React__default.createElement("summary", { className: "arc-SiteFooterV2-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+    return (React__default.createElement("nav", __assign({ className: classNames("arc-SiteFooterV2-main", {
+            "arc-SiteFooterV2-main-3Columns": columns === 3,
+        }), "aria-label": "Footer navigation links" }, filterAttrs(props)), children));
+};
+var SiteFooterV2ItemDisclosure = function (_a) {
+    var children = _a.children, title = _a.title, open = _a.open, tabIndex = _a.tabIndex, props = __rest(_a, ["children", "title", "open", "tabIndex"]);
+    return (React__default.createElement("details", __assign({ open: open, className: "arc-SiteFooterV2-disclosure", "aria-label": title }, filterAttrs(props)),
+        React__default.createElement("summary", { className: "arc-SiteFooterV2-summary", tabIndex: tabIndex },
             React__default.createElement("span", { className: "arc-SiteFooterV2-icon" },
                 React__default.createElement(ThemeIcon, { icon: "siteFooterExpand" })),
             React__default.createElement("h2", { className: "arc-SiteFooterV2-itemGroupTitle" }, title)),
         React__default.createElement("ul", { className: "arc-SiteFooterV2-itemGroup" }, children)));
 };
+var SiteFooterV2ItemGroup = function (_a) {
+    var hideDisclosure = _a.hideDisclosure, props = __rest(_a, ["hideDisclosure"]);
+    return (React__default.createElement("div", null,
+        React__default.createElement(Visible, { "data-testid": "mobile-disclosure", xs: !hideDisclosure, s: !hideDisclosure },
+            React__default.createElement(SiteFooterV2ItemDisclosure, __assign({}, props, { tabIndex: 0 }))),
+        React__default.createElement(Visible, { "data-testid": "desktop-disclosure", m: true, l: true, xl: true },
+            React__default.createElement(SiteFooterV2ItemDisclosure, __assign({}, props, { open: true, tabIndex: -1 })),
+            React__default.createElement(VerticalSpace, { size: "12" }))));
+};
 var SiteFooterV2Item = function (_a) {
     var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
     return (React__default.createElement("li", __assign({ className: "arc-SiteFooterV2-item" }, filterAttrs(props)),
@@ -19777,8 +20076,9 @@ const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07b
 
 /** Use `Switch` to allow users to immediately toggle between two states. */
 var Switch = function (_a) {
-    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, _b = _a.labelPosition, labelPosition = _b === void 0 ? "top" : _b, name = _a.name, onBlur = _a.onBlur, value = _a.value, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, id = _a.id, _d = _a.labelSize, labelSize = _d === void 0 ? "s" : _d, onStatusText = _a.onStatusText, offStatusText = _a.offStatusText, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, ariaLabel = _a.ariaLabel, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "labelPosition", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "onStatusText", "offStatusText", "hideLabel", "ariaLabel"]);
-    var _f = useState(defaultChecked), switchState = _f[0], setSwitchState = _f[1];
+    var _b;
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, _c = _a.labelPosition, labelPosition = _c === void 0 ? "top" : _c, name = _a.name, onBlur = _a.onBlur, value = _a.value, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, errorMessage = _a.errorMessage, id = _a.id, _e = _a.size, size = _e === void 0 ? "m" : _e, onStatusText = _a.onStatusText, offStatusText = _a.offStatusText, _f = _a.hideLabel, hideLabel = _f === void 0 ? false : _f, ariaLabel = _a.ariaLabel, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "labelPosition", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "size", "onStatusText", "offStatusText", "hideLabel", "ariaLabel"]);
+    var _g = useState(defaultChecked), switchState = _g[0], setSwitchState = _g[1];
     var surface = useContext(Context$3).surface;
     if (!onStatusText) {
         onStatusText = offStatusText;
@@ -19790,11 +20090,11 @@ var Switch = function (_a) {
         setSwitchState(function (previous) { return !previous; });
         onCheckedChange && onCheckedChange(checked);
     };
-    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, labelPosition: labelPosition, requirementStatus: "not-applicable" },
-        !hideLabel && React__default.createElement(VerticalSpace, { size: "8" }),
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, labelPosition: labelPosition, requirementStatus: "not-applicable" },
+        !hideLabel && React__default.createElement(VerticalSpace, { size: "12" }),
         React__default.createElement("div", { className: "arc-Switch-container" },
             React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, __assign({ id: id, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedHandler, checked: switchState, disabled: isDisabled, className: classNames("arc-Switch", {
-                    "arc-Switch--large": labelSize === "l",
+                    "arc-Switch--medium": size === "m",
                     "arc-Switch--isDisabled": isDisabled,
                     "arc-Switch--onDarkSurface": surface === "dark",
                 }), "aria-label": ariaLabel }, filterAttrs(props)),
@@ -19802,12 +20102,14 @@ var Switch = function (_a) {
                     React__default.createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
                         React__default.createElement("div", { className: "arc-Switch-thumbIcon" },
                             React__default.createElement("div", { className: "arc-Switch-icon", "data-testid": "arc-switch-thumb-icon" },
-                                React__default.createElement(ThemeIcon, { icon: "switchToggle", color: "brand", size: labelSize === "l" ? 24 : 16 }))))),
-                React__default.createElement("div", { className: classNames("arc-Switch-statusText", {
-                        "arc-Switch-statusText--isDisabled": isDisabled,
-                        "arc-Switch-statusText--onDarkSurface": surface === "dark",
-                    }) },
-                    React__default.createElement(Text, { size: labelSize, "aria-hidden": true }, switchState ? onStatusText : offStatusText))))));
+                                React__default.createElement(ThemeIcon, { icon: "switchToggle", color: "brand", size: size === "m" ? 32 : 24 }))))),
+                React__default.createElement("div", { className: classNames("arc-Switch-statusText", (_b = {
+                            "arc-Switch-statusText--isDisabled": isDisabled,
+                            "arc-Switch-statusText--onDarkSurface": surface === "dark"
+                        },
+                        _b["arc-Switch-statusText--".concat(size)] = size === "m",
+                        _b)) },
+                    React__default.createElement("p", { "aria-hidden": true }, switchState ? onStatusText : offStatusText))))));
 };
 
 var TabbedBanner = function (_a) {
@@ -19822,7 +20124,10 @@ var TabbedBanner = function (_a) {
     useEffect(function () {
         handleResize();
         window.addEventListener("resize", handleResize);
-        return function () { return window.removeEventListener("resize", handleResize); };
+        return function () {
+            window.removeEventListener("resize", handleResize);
+            handleResize.cancel();
+        };
     }, [isBelowArcSizeBreakpointsM]);
     return (React__default.createElement("div", { className: "arc-TabbedBanner" }, !isBelowArcSizeBreakpointsM ? (React__default.createElement("div", null,
         React__default.createElement(ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
@@ -20004,7 +20309,7 @@ var TextArea = forwardRef(function (_a, ref) {
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "12.0.0-beta.18",
+  version: "12.0.0-beta.20",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -20069,12 +20374,11 @@ var themes = ["bt-enterprise", "bt-business", "ee"];
 
 var ThumbnailSignpost = function (_a) {
     var text = _a.text, title = _a.title, img = _a.img, button = _a.button, props = __rest(_a, ["text", "title", "img", "button"]);
-    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
     return (React__default.createElement("div", __assign({ className: "arc-ThumbnailSignpost" }, filterAttrs(props)),
         (img === null || img === void 0 ? void 0 : img.src) && (React__default.createElement("div", { className: "arc-ThumbnailSignpost-image" },
             React__default.createElement(Image, __assign({}, img)))),
         React__default.createElement("div", { className: "arc-ThumbnailSignpost-content" },
-            React__default.createElement(Heading, { size: isMinWidthArcBreakpointS ? "s" : "xs" }, title),
+            React__default.createElement("span", { className: "arc-ThumbnailSignpost-heading" }, title),
             React__default.createElement(VerticalSpace, { size: "8" }),
             text,
             React__default.createElement(ButtonV2, __assign({ buttonStyle: "compact", icon: BtIconArrowRight }, button)))));
@@ -22418,7 +22722,9 @@ var TypographyCard = function (_a) {
             "arc-TypographyCard--onDarkSurface": surface === "dark",
         }) }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-TypographyCard-contentContainer" },
-            label && (React__default.createElement("div", { className: "arc-TypographyCard-label" }, label.toUpperCase())),
+            label && (React__default.createElement("div", { className: "arc-TypographyCard-label" },
+                React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
+                React__default.createElement(VerticalSpace, { size: "16" }))),
             React__default.createElement(CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
         React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
 };
@@ -25629,17 +25935,6 @@ var index = /*#__PURE__*/Object.freeze({
     VideoPlayer: VideoPlayer
 });
 
-var Visible = function (_a) {
-    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = __rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
-    return (React__default.createElement("div", __assign({ className: classNames("arc-Visible", {
-            "arc-Visible--xs": xs,
-            "arc-Visible--s": s,
-            "arc-Visible--m": m,
-            "arc-Visible--l": l,
-            "arc-Visible--xl": xl,
-        }) }, filterAttrs(props)), children));
-};
-
 var Preview_1;
 var hasRequiredPreview;
 
@@ -25794,5 +26089,5 @@ var Preview$1 = /*#__PURE__*/_mergeNamespaces({
     default: Preview
 }, [PreviewExports]);
 
-export { Alert, Align, AppButton, Avatar, AvatarGroup, Badge, Banner, Box, BrandLogo, colors as BrandLogoColors, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, Button, ButtonGroup, ButtonV2, Calendar, Carousel, Checkbox, Columns, ColumnsCol, ComboBox, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, ContentSwitcherList, ContentSwitcherTab, DATE_FORMAT, DatePicker, Disclosure, DisclosureMini, Download, Drawer, Elevation, Filter, FilterControl, FilterControls, FilterItem, FilterItems, FormControl, Context$2 as FormControlContext, GhostedHeroBanner, GradientBackground, Grid, GridCol, GridRow, Group$1 as Group, GroupItem, Heading, HeroBanner, HeroButton, Hidden, HorizontalCard, Icon$1 as Icon, colors$1 as IconColors, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, ImageSource, ImpactCard, InformationCard, Link, Markup, MediaCard, Menu, MenuCheckboxItem, MenuContent, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemContentTemplate, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuScrollable, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, Pagination, PaginationSimple, Popover, Poster, PosterImage, PosterVideo, ProgressBar, ProgressStepper, ProgressStepperItem, RadioCardGroup, RadioCardGroupInput, RadioGroup, RadioGroupButton, RadioGroupInput, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooterItem, SiteFooterItemGroup, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, SkipLink, SkipLinkItem, Spinner, Surface, Context$3 as SurfaceContext, Switch, TabbedBanner, Tabs, TabsContent, TabsItem, TabsList, Tag, TemplateBanner, Text, TextArea, TextInput, Theme, ThemeIcon, ThumbnailSignpost, Toast, ToastNotification, Tooltip, Truncate, TypographyCard, UniversalHeader, UniversalHeaderItem, VerticalSpace, VideoPlayer, Visible, VisuallyHidden$2 as VisuallyHidden, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };
+export { Alert, Align, AppButton, Avatar, AvatarGroup, Badge, Banner, Box, BrandLogo, colors as BrandLogoColors, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, Button, ButtonGroup, ButtonV2, Calendar, Carousel, Checkbox, Columns, ColumnsCol, ComboBox, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, ContentSwitcherList, ContentSwitcherTab, DATE_FORMAT, DatePicker, DatePickerRange, Disclosure, DisclosureMini, Download, Drawer, DrawerContent, DrawerFooter, DrawerHeader, Elevation, Filter, FilterControl, FilterControls, FilterItem, FilterItems, FormControl, Context$2 as FormControlContext, GhostedHeroBanner, GradientPageBackground, Grid, GridCol, GridRow, Group$1 as Group, GroupItem, Heading, HeroBanner, HeroButton, Hidden, HorizontalCard, Icon$1 as Icon, colors$1 as IconColors, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, ImageSource, ImpactCard, InformationCard, Link, Markup, MediaCard, Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, MenuScrollable, MenuSeparator, MenuTrigger, Modal, Pagination, PaginationSimple, Popover, Poster, PosterImage, PosterVideo, ProgressBar, ProgressStepper, ProgressStepperItem, ProgressStepperOverflow, RadioCardGroup, RadioCardGroupInput, RadioGroup, RadioGroupButton, RadioGroupInput, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooterItem, SiteFooterItemGroup, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, SkipLink, SkipLinkItem, Spinner, Surface, Context$3 as SurfaceContext, Switch, TabbedBanner, Tabs, TabsContent, TabsItem, TabsList, Tag, TemplateBanner, Text, TextArea, TextInput, Theme, ThemeIcon, ThumbnailSignpost, Toast, ToastNotification, Tooltip, Truncate, TypographyCard, UniversalHeader, UniversalHeaderItem, VerticalSpace, VideoPlayer, Visible, VisuallyHidden$2 as VisuallyHidden, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };
 //# sourceMappingURL=index.mjs.map