@thecb/components 9.4.0-beta.0 → 9.5.0-beta.1

package/dist/index.cjs.js

@@ -27883,9 +27883,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0.5rem",
     extraStyles: "overflow-y: scroll; max-height: 250px;"
-  }, /*#__PURE__*/React__default.createElement(Stack, null, itemList.sort(function (a, b) {
-    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
-  }).map(function (value) {
+  }, /*#__PURE__*/React__default.createElement(Stack, null, itemList.map(function (value) {
     var _selectedItems$find;
     return /*#__PURE__*/React__default.createElement(Checkbox$1, {
       key: value.name,
@@ -48776,31 +48774,205 @@ var fallbackValues$Q = {
   focusStyles: focusStyles
 };
 
-var _excluded$z = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired"];
-/*
-  Takes an array of section objects, each object should look like:
-    {
-      title: <React Component(s)>,
-      id: <String> "identifier of section",
-      disabled: boolean, (displays section and grayed out radio but disables interaction)
-      hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
-      hidden: boolean, (hides section entirely)
-      dataQa: string,
-      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
-      rightTitleContent: <React Component(s)> (rendered on the very right of the title section, use to supplement "rightIcons" with text, as in expired CC status, or render other custom content)
-    }
-  
-  Also takes an "openSection" which should equal the id of the section that should be open
-  And a toggleOpenSection. RadioSection will call this function with the id of the section
-  that it is in. It is up to the user to store the open section value in state up from the component
-  using a useState() hook, or reducer.
+var headingBackgroundColor$2 = "".concat(WHITE);
+var headingDisabledColor$1 = "".concat(ATHENS_GREY);
+var bodyBackgroundColor$2 = "#eeeeee";
+var borderColor$7 = "".concat(GREY_CHATEAU);
+var focusStyles$1 = "outline: none;";
+var fallbackValues$R = {
+  headingBackgroundColor: headingBackgroundColor$2,
+  headingDisabledColor: headingDisabledColor$1,
+  bodyBackgroundColor: bodyBackgroundColor$2,
+  borderColor: borderColor$7,
+  focusStyles: focusStyles$1
+};
 
-  The section itself comes with some motion to open/close. To add more motion to the content,
-  wrap your content with a Motion layout primitive and provide appropriate props.
+var idString = function idString(section) {
+  return typeof section.title === "string" ? createIdFromString(section.title) : section.id;
+};
+var InnerRadioSection = function InnerRadioSection(_ref) {
+  var themeValues = _ref.themeValues,
+    isMobile = _ref.isMobile,
+    supportsTouch = _ref.supportsTouch,
+    section = _ref.section,
+    sectionIndex = _ref.sectionIndex,
+    _ref$openSection = _ref.openSection,
+    openSection = _ref$openSection === void 0 ? "" : _ref$openSection,
+    toggleOpenSection = _ref.toggleOpenSection,
+    _ref$staggeredAnimati = _ref.staggeredAnimation,
+    staggeredAnimation = _ref$staggeredAnimati === void 0 ? false : _ref$staggeredAnimati,
+    _ref$initiallyOpen = _ref.initiallyOpen,
+    initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
+    _ref$openHeight = _ref.openHeight,
+    openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
+    ariaDescribedBy = _ref.ariaDescribedBy,
+    focused = _ref.focused,
+    setFocused = _ref.setFocused,
+    sectionRefs = _ref.sectionRefs,
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    _ref$onKeyDown = _ref.onKeyDown,
+    onKeyDown = _ref$onKeyDown === void 0 ? noop : _ref$onKeyDown;
+  var wrapper = {
+    open: {
+      height: openHeight,
+      opacity: 1,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: staggeredAnimation ? 0.15 : 0
+      }
+    },
+    closed: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: staggeredAnimation ? 0.15 : 0,
+        staggerDirection: -1
+      }
+    }
+  };
+  var borderStyles = "\n    border-width: 0 0 1px 0;\n    border-color: ".concat(themeValues.borderColor, ";\n    border-style: solid;\n    border-radius: 0px;\n    transform-origin: 100% 0;\n\n    &:last-child {\n      border-width: 0;\n    }\n  ");
+  var RightIcon = styled__default.img.withConfig({
+    displayName: "InnerRadioSection__RightIcon",
+    componentId: "sc-1wtp6qc-0"
+  })(["height:", ";width:", ";", " transition:opacity 0.3s ease;"], function (_ref2) {
+    var isMobile = _ref2.isMobile;
+    return isMobile ? "14px" : "18px";
+  }, function (_ref3) {
+    var isMobile = _ref3.isMobile;
+    return isMobile ? "22px" : "28px";
+  }, function (_ref4) {
+    var fade = _ref4.fade;
+    return fade && "opacity: 0.4;";
+  });
+  return /*#__PURE__*/React__default.createElement(Motion, {
+    tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
+    ref: sectionRefs.current[sectionIndex],
+    onBlur: function onBlur() {
+      return !section.disabled && setFocused(null);
+    },
+    onFocus: function onFocus() {
+      return !section.disabled && setFocused(section.id);
+    },
+    onKeyDown: onKeyDown,
+    hoverStyles: themeValues.focusStyles,
+    animate: openSection === section.id ? "open" : "closed",
+    initial: initiallyOpen ? "open" : "closed",
+    key: "item-".concat(section.id),
+    extraStyles: borderStyles,
+    role: "radio",
+    "aria-checked": openSection === section.id,
+    "aria-disabled": section.disabled,
+    "aria-required": section.required,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    onClick:
+    // This needs to be associated with the same component that has the aria-checked property
+    isMobile && supportsTouch || section.disabled ? noop : function () {
+      return toggleOpenSection(section.id);
+    },
+    onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
+      return toggleOpenSection(section.id);
+    } : noop
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem",
+    background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
+    key: "header-".concat(section.id),
+    borderSize: "0px",
+    borderColor: themeValues.borderColor,
+    borderWidthOverride: openSection === section.id && !!section.content ? "0px 0px 1px 0px" : "",
+    extraStyles: !section.disabled ? "cursor: pointer;" : "",
+    dataQa: section.dataQa ? section.dataQa : section.id
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    childGap: "1px",
+    nowrap: true
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center",
+    nowrap: true
+  }, !section.hideRadioButton && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(RadioButton$2, {
+    id: "radio-input-".concat(idString(section)),
+    name: idString(section),
+    ariaDescribedBy: ariaDescribedBy,
+    radioOn: openSection === section.id,
+    radioFocused: focused === section.id,
+    toggleRadio: section.disabled ? noop : function () {
+      return toggleOpenSection(section.id);
+    },
+    tabIndex: "-1",
+    isRequired: section.required
+  })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
+    align: "center"
+  }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
+    padding: section.titleIcon ? "0 0 0 8px" : "0"
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
+    htmlFor: "radio-input-".concat(idString(section)),
+    color: CHARADE_GREY
+  }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+    id: "right-icons-".concat(idString(section)),
+    childGap: "0.5rem",
+    "aria-label": section.rightIconsLabel || null,
+    role: section.rightIconsRole || null
+  }, section.rightIcons.map(function (icon) {
+    return /*#__PURE__*/React__default.createElement(RightIcon, {
+      src: icon.img,
+      key: icon.img,
+      fade: !icon.enabled,
+      isMobile: isMobile,
+      alt: icon.altText,
+      "aria-disabled": !icon.enabled
+    });
+  })), section.rightTitleContent && /*#__PURE__*/React__default.createElement(React.Fragment, null, section.rightTitleContent))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+    initial: false
+  }, openSection === section.id && /*#__PURE__*/React__default.createElement(Motion, {
+    key: "content-".concat(section.id),
+    padding: "0",
+    background: themeValues.bodyBackgroundColor,
+    layoutTransition: true,
+    initial: "closed",
+    animate: "open",
+    exit: "closed",
+    variants: wrapper,
+    extraStyles: "transform-origin: 100% 0;"
+  }, section.content))));
+};
+var InnerRadioSection$1 = themeComponent(InnerRadioSection, "InnerRadioSection", fallbackValues$R);
 
+var _excluded$z = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+/**
+- The RadioSection component takes either a flat array (via the 'sections' 
+  prop) of section objects or a multidimensional array (via the 'groupedSections' prop) of section objects. Note that if using a multidimensional array, the nesting cannot exceed 2 levels deep.
+- Each 'section' object should look like:
+  {
+    title: <React Component(s)>,
+    id: <String> "identifier of section",
+    disabled: boolean, (displays section and grayed out radio but disables interaction)
+    hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
+    hidden: boolean, (hides section entirely)
+    dataQa: string,
+    content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
+    rightTitleContent: <React Component(s)> (rendered on the very right of the title section, use to supplement "rightIcons" with text, as in expired CC status, or render other custom content)
+  }
+- It also takes an "openSection" which should equal the id of the section that 
+  should be open, along with "toggleOpenSection" 
+- RadioSection will call "toggleOpenSection" with the id of the section
+  that it is in. 
+- It is up to the engineer to store the open section value in state up from the 
+  component using a useState() hook or a reducer.
+- The section itself comes with some motion to open/close. To add more motion 
+  to the content, wrap your content with a Motion layout primitive and provide appropriate props.
 */
 
-var idString = function idString(section) {
+var idString$1 = function idString(section) {
   return typeof section.title === "string" ? createIdFromString(section.title) : section.id;
 };
 var RadioSection = function RadioSection(_ref) {
@@ -48813,9 +48985,7 @@ var RadioSection = function RadioSection(_ref) {
     openSection = _ref$openSection === void 0 ? "" : _ref$openSection,
     toggleOpenSection = _ref.toggleOpenSection,
     _ref$staggeredAnimati = _ref.staggeredAnimation,
-    staggeredAnimation = _ref$staggeredAnimati === void 0 ? false : _ref$staggeredAnimati,
     _ref$initiallyOpen = _ref.initiallyOpen,
-    initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
     _ref$openHeight = _ref.openHeight,
     openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
     _ref$containerStyles = _ref.containerStyles,
@@ -48823,6 +48993,7 @@ var RadioSection = function RadioSection(_ref) {
     ariaDescribedBy = _ref.ariaDescribedBy,
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
+    groupedSections = _ref.groupedSections,
     rest = _objectWithoutProperties(_ref, _excluded$z);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -48853,150 +49024,57 @@ var RadioSection = function RadioSection(_ref) {
       toggleOpenSection((_sections$nextIndex2 = sections[nextIndex]) === null || _sections$nextIndex2 === void 0 ? void 0 : _sections$nextIndex2.id);
     }
   };
-  var wrapper = {
-    open: {
-      height: openHeight,
-      opacity: 1,
-      transition: {
-        duration: 0.3,
-        ease: [0.04, 0.62, 0.23, 0.98],
-        staggerChildren: staggeredAnimation ? 0.15 : 0
-      }
-    },
-    closed: {
-      height: 0,
-      opacity: 0,
-      transition: {
-        duration: 0.3,
-        ease: [0.04, 0.62, 0.23, 0.98],
-        staggerChildren: staggeredAnimation ? 0.15 : 0,
-        staggerDirection: -1
-      }
-    }
-  };
-  var borderStyles = "\n    border-width: 0 0 1px 0;\n    border-color: ".concat(themeValues.borderColor, ";\n    border-style: solid;\n    border-radius: 0px;\n    transform-origin: 100% 0;\n\n    &:last-child {\n      border-width: 0;\n    }\n  ");
-  var RightIcon = styled__default.img.withConfig({
-    displayName: "RadioSection__RightIcon",
-    componentId: "sc-uema02-0"
-  })(["height:", ";width:", ";", " transition:opacity 0.3s ease;"], function (_ref2) {
-    var isMobile = _ref2.isMobile;
-    return isMobile ? "14px" : "18px";
-  }, function (_ref3) {
-    var isMobile = _ref3.isMobile;
-    return isMobile ? "22px" : "28px";
-  }, function (_ref4) {
-    var fade = _ref4.fade;
-    return fade && "opacity: 0.4;";
-  });
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
-    extraStyles: containerStyles
-  }, /*#__PURE__*/React__default.createElement(Stack, _extends({
-    childGap: "0",
+    extraStyles: containerStyles,
     role: "radiogroup",
     "aria-required": isSectionRequired
-  }, rest), sections.filter(function (section) {
+  }, rest), /*#__PURE__*/React__default.createElement(Stack, _extends({
+    childGap: "0"
+  }, rest), !!sections && sections.filter(function (section) {
     return !section.hidden;
   }).map(function (section, i) {
-    return /*#__PURE__*/React__default.createElement(Motion, {
-      tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
-      ref: sectionRefs.current[i],
-      onBlur: function onBlur() {
-        return !section.disabled && setFocused(null);
-      },
-      onFocus: function onFocus() {
-        return !section.disabled && setFocused(section.id);
-      },
+    return /*#__PURE__*/React__default.createElement(React.Fragment, {
+      key: "radio-section-".concat(sections.indexOf(section))
+    }, /*#__PURE__*/React__default.createElement(InnerRadioSection$1, {
+      sectionIndex: i,
+      section: section,
+      sectionRefs: sectionRefs,
+      focused: focused,
+      setFocused: setFocused,
+      openHeight: openHeight,
+      openSection: openSection,
+      toggleOpenSection: toggleOpenSection,
       onKeyDown: function onKeyDown(e) {
         return !section.disabled && handleKeyDown(section.id, e, i);
       },
-      hoverStyles: themeValues.focusStyles,
-      animate: openSection === section.id ? "open" : "closed",
-      initial: initiallyOpen ? "open" : "closed",
-      key: "item-".concat(section.id),
-      extraStyles: borderStyles,
-      role: "radio",
-      "aria-checked": openSection === section.id,
-      "aria-disabled": section.disabled,
-      "aria-required": section.required,
-      "aria-labelledby": section.id,
-      "aria-describedby": "right-icons-".concat(idString(section))
-    }, /*#__PURE__*/React__default.createElement(Stack, {
-      childGap: "0"
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem",
-      background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
-      onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
-        return toggleOpenSection(section.id);
-      },
-      onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
-        return toggleOpenSection(section.id);
-      } : noop,
-      key: "header-".concat(section.id),
-      borderSize: "0px",
-      borderColor: themeValues.borderColor,
-      borderWidthOverride: openSection === section.id && !!section.content ? "0px 0px 1px 0px" : "",
-      extraStyles: !section.disabled ? "cursor: pointer;" : "",
-      dataQa: section.dataQa ? section.dataQa : section.id
-    }, /*#__PURE__*/React__default.createElement(Cluster, {
-      justify: "space-between",
-      align: "center",
-      childGap: "1px",
-      nowrap: true
-    }, /*#__PURE__*/React__default.createElement(Cluster, {
-      justify: "flex-start",
-      align: "center",
-      nowrap: true
-    }, !section.hideRadioButton && /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0"
-    }, /*#__PURE__*/React__default.createElement(RadioButton$2, {
-      id: "radio-input-".concat(idString(section)),
-      name: idString(section),
-      ariaDescribedBy: ariaDescribedBy,
-      radioOn: openSection === section.id,
-      radioFocused: focused === section.id,
-      toggleRadio: section.disabled ? noop : function () {
-        return toggleOpenSection(section.id);
-      },
-      tabIndex: "-1",
-      isRequired: section.required
-    })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
-      align: "center"
-    }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
-      padding: section.titleIcon ? "0 0 0 8px" : "0"
-    }, /*#__PURE__*/React__default.createElement(Text$1, {
-      as: "label",
-      htmlFor: "radio-input-".concat(idString(section)),
-      color: CHARADE_GREY
-    }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
-      id: "right-icons-".concat(idString(section)),
-      childGap: "0.5rem",
-      "aria-label": section.rightIconsLabel || null,
-      role: section.rightIconsRole || null
-    }, section.rightIcons.map(function (icon) {
-      return /*#__PURE__*/React__default.createElement(RightIcon, {
-        src: icon.img,
-        key: icon.img,
-        fade: !icon.enabled,
-        isMobile: isMobile,
-        alt: icon.altText,
-        "aria-disabled": !icon.enabled
-      });
-    })), section.rightTitleContent && /*#__PURE__*/React__default.createElement(React.Fragment, null, section.rightTitleContent))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
-      initial: false
-    }, openSection === section.id && /*#__PURE__*/React__default.createElement(Motion, {
-      key: "content-".concat(section.id),
-      padding: "0",
-      background: themeValues.bodyBackgroundColor,
-      layoutTransition: true,
-      initial: "closed",
-      animate: "open",
-      exit: "closed",
-      variants: wrapper,
-      extraStyles: "transform-origin: 100% 0;"
-    }, section.content))));
+      ariaLabelledBy: section.id,
+      ariaDescribedBy: "right-icons-".concat(idString$1(section))
+    }));
+  }), !!groupedSections && groupedSections.map(function (sectionGroup) {
+    return sectionGroup.filter(function (unfilteredSection) {
+      return !unfilteredSection.hidden;
+    }).map(function (section, i) {
+      return /*#__PURE__*/React__default.createElement(React.Fragment, {
+        key: "radio-section-".concat(groupedSections.indexOf(sectionGroup), "-").concat(sectionGroup.indexOf(section), "}")
+      }, /*#__PURE__*/React__default.createElement(InnerRadioSection$1, {
+        sectionIndex: i,
+        section: section,
+        sectionRefs: sectionRefs,
+        focused: focused,
+        setFocused: setFocused,
+        openHeight: openHeight,
+        ariaLabelledBy: section.id,
+        ariaDescribedBy: "right-icons-".concat(idString$1(section)),
+        openSection: openSection,
+        toggleOpenSection: toggleOpenSection
+      }), sectionGroup.indexOf(section) === sectionGroup.length - 1 && groupedSections.indexOf(sectionGroup) !== groupedSections.length - 1 && /*#__PURE__*/React__default.createElement(SolidDivider$1, {
+        borderSize: "2px",
+        color: MANATEE_GREY
+      }));
+    });
   })));
 };
 var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$Q);
@@ -49281,7 +49359,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$R = {
+var fallbackValues$S = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49349,12 +49427,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$R);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$S);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$S = {
+var fallbackValues$T = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49409,7 +49487,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$S);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$T);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49494,7 +49572,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$T = {
+var fallbackValues$U = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -49539,7 +49617,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$U));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49594,7 +49672,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$U = {
+var fallbackValues$V = {
   pageBackground: pageBackground
 };
 
@@ -49642,7 +49720,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$U));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$V));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -49685,7 +49763,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$U));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$V));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -49729,7 +49807,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$U));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$V));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -49782,7 +49860,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$U));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$V));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -49852,7 +49930,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$V));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};