@lightsparkdev/ui 1.0.3 → 1.0.5

package/dist/components/PageSection/PageSection.cjs

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -81,9 +93,9 @@ __export(PageSection_exports, {
   StyledPageSectionBox: () => StyledPageSectionBox
 });
 module.exports = __toCommonJS(PageSection_exports);
-var import_react30 = require("@emotion/react");
+var import_react31 = require("@emotion/react");
 var import_styled20 = __toESM(require("@emotion/styled"), 1);
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
@@ -192,7 +204,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -216,10 +227,13 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   blue37: "#21529c",
   blue58: "#28BFFF",
   // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
   grayBlue9: "#16171A",
+  grayBlue18: "#21283a",
   grayBlue32: "#4F5156",
   grayBlue43: "#686A72",
   grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
   grayBlue67: "#9BA7B9",
   grayBlue80: "#C0C9D6",
   grayBlue88: "#DEDFE4",
@@ -3596,8 +3610,7 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning,
-  inputBackground: colors.white
+  warning: colors.warning
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3609,6 +3622,10 @@ var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
   typography: getTypography("Lightspark" /* Lightspark */),
   hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
   buttons: defaultButtonsTheme,
+  badge: {
+    bg: "c05Neutral"
+  },
+  inputBackground: colors.white,
   loading: "LoadingSpinner"
 });
 var lightBaseTheme = baseTheme;
@@ -3646,7 +3663,10 @@ var darkBaseTheme = {
   warning: colors.warning,
   buttons: defaultButtonsTheme,
   loading: "LoadingSpinner",
-  inputBackground: colors.black
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3762,7 +3782,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -4233,7 +4256,11 @@ function select(component) {
 }
 
 // src/utils/toReactNodes.tsx
-var import_react25 = require("react");
+var import_lodash_es4 = require("lodash-es");
+var import_react26 = require("react");
+
+// src/components/typography/renderTypography.tsx
+var import_react25 = __toESM(require("react"), 1);
 
 // src/components/typography/Body.tsx
 var import_styled5 = __toESM(require("@emotion/styled"), 1);
@@ -8591,7 +8618,6 @@ var StyledTitle = import_styled14.default.span`
 `;
 
 // src/components/typography/renderTypography.tsx
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var typographyMap = {
   Display,
   Headline,
@@ -8603,60 +8629,144 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code: Code2,
-  "Code Strong": () => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { children: "Unimplemented" })
+  "Code Strong": Code2
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return import_react25.default.createElement(TypographyComponent, rest, children);
 };
 
 // src/utils/toReactNodes.tsx
-var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 function toReactNodes(toReactNodesArg) {
   const toReactNodesArray = Array.isArray(toReactNodesArg) ? toReactNodesArg : [toReactNodesArg];
   const reactNodes = toReactNodesArray.map((node, i) => {
     let content;
     if (!node) {
       return null;
-    } else if (typeof node !== "string" && "typography" in node && node.typography.type && node.typography.props) {
-      content = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_react25.Fragment, { children: renderTypography(
+    } else if (typeof node !== "string" && "typography" in node && node.typography.type) {
+      const props = node.typography.props || {};
+      content = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react26.Fragment, { children: renderTypography(
         node.typography.type,
-        Object.assign(node.typography.props, {
-          content: node
-        })
+        Object.assign(props, { content: node })
       ) }, `typography-${i}-${node.text.substr(0, 10)}`);
     } else {
       content = toNonTypographicReactNodes(node);
     }
     return content || null;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_react25.Fragment, { children: reactNodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react26.Fragment, { children: reactNodes });
+}
+function setReactNodesTypography(nodesArg, nodesTypographyMap, replaceExistingTypography = true) {
+  const nodes = Array.isArray(nodesArg) ? nodesArg : [nodesArg];
+  const nodesWithTypography = nodes.map((node, i) => {
+    if (isIconNode(node)) {
+      return node;
+    } else if (typeof node === "string") {
+      if (nodesTypographyMap.text) {
+        return {
+          text: node,
+          typography: nodesTypographyMap.text
+        };
+      }
+    } else if (!node) {
+      return node;
+    }
+    const useExistingTypography = !replaceExistingTypography && (0, import_lodash_es4.isObject)(node) && "typography" in node ? node.typography : void 0;
+    if (isLinkNode(node)) {
+      if (nodesTypographyMap.link) {
+        return __spreadProps(__spreadValues({}, node), {
+          typography: useExistingTypography || nodesTypographyMap.link
+        });
+      }
+    } else if (isExternalLinkNode(node)) {
+      if (nodesTypographyMap.externalLink) {
+        return __spreadProps(__spreadValues({}, node), {
+          typography: useExistingTypography || nodesTypographyMap.externalLink
+        });
+      }
+    } else if (isNextLinkNode(node)) {
+      if (nodesTypographyMap.nextLink) {
+        return __spreadProps(__spreadValues({}, node), {
+          typography: useExistingTypography || nodesTypographyMap.nextLink
+        });
+      }
+    } else if (isTextNode(node)) {
+      if (nodesTypographyMap.text) {
+        return __spreadProps(__spreadValues({}, node), {
+          typography: useExistingTypography || nodesTypographyMap.text
+        });
+      }
+    }
+    return node;
+  });
+  return nodesWithTypography;
+}
+function setDefaultReactNodesTypography(nodesArg, nodesTypographyMap) {
+  return setReactNodesTypography(nodesArg, nodesTypographyMap, false);
 }
 
 // src/components/Badge.tsx
 var import_styled15 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
-function Badge({ text, color, ml = 0, mr = 0 }) {
-  return text ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(StyledBadge, { color, ml, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(LabelModerate, { size: "Small", color, children: text }) }) : null;
-}
-var badgeVPadding = 2;
-var StyledBadge = import_styled15.default.span`
-  ${standardBorderRadius(4)}
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+function Badge({
+  content: contentProp,
+  kind,
+  icon,
+  ml = 0,
+  mr = 0,
+  size: size2 = "sm",
+  block = false,
+  typography: typographyProp
+}) {
+  const typography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || "Label Moderate",
+    props: {
+      size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
+      color: (typographyProp == null ? void 0 : typographyProp.color) || (kind === "danger" ? "danger" : "text")
+    }
+  };
+  const typographyMap2 = {
+    link: typography,
+    externalLink: typography,
+    text: typography,
+    nextLink: typography
+  };
+  let content = setDefaultReactNodesTypography(
+    contentProp,
+    typographyMap2
+  );
+  content = toReactNodes(content);
+  return contentProp ? /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(StyledBadge, { kind, ml, size: size2, block, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: icon.name, width: 20, color: icon.color }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(BadgeContent, { children: content })
+  ] }) : null;
+}
+var badgeSmVPadding = 2;
+var badgeSmHPadding = 6;
+var StyledBadge = import_styled15.default.div`
+  ${({ size: size2 }) => standardBorderRadius(size2 === "sm" ? 4 : 12)}
   ${({ ml }) => ml === 0 ? "" : `margin-left: ${ml}px;`}
-  padding: ${badgeVPadding}px 6px;
-  background-color: ${({ theme, color }) => {
-  if (color === "danger") {
+
+  display: ${({ block }) => block ? "flex" : "inline-flex"};
+  gap: ${({ size: size2 }) => size2 === "sm" ? badgeSmHPadding : 12}px;
+  align-items: center;
+  padding: ${({ size: size2 }) => size2 === "sm" ? `${badgeSmVPadding}px ${badgeSmHPadding}px` : "12px 16px"};
+  background-color: ${({ theme, kind }) => {
+  if (kind === "danger") {
     return getColor(theme, "red42a10");
   } else {
-    return isLight(theme) ? theme.c05Neutral : theme.c15Neutral;
+    return getColor(theme, theme.badge.bg);
   }
 }};
 `;
+var BadgeContent = import_styled15.default.div``;
 
 // src/components/Dropdown.tsx
-var import_react26 = require("@emotion/react");
+var import_react27 = require("@emotion/react");
 var import_styled17 = __toESM(require("@emotion/styled"), 1);
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_dom = __toESM(require("react-dom"), 1);
 
 // src/styles/constants.ts
@@ -8679,7 +8789,7 @@ var UnstyledButton = import_styled16.default.button`
 `;
 
 // src/components/Dropdown.tsx
-var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
 function Dropdown({
   button,
   dropdownItems,
@@ -8696,22 +8806,22 @@ function Dropdown({
   footer = null,
   dropdownContent = null
 }) {
-  const theme = (0, import_react26.useTheme)();
-  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
-  const [dropdownButtonHeight, setDropdownButtonHeight] = (0, import_react27.useState)(0);
-  const [dropdownButtonWidth, setDropdownButtonWidth] = (0, import_react27.useState)(0);
-  const [dropdownCoords, setDropdownCoords] = (0, import_react27.useState)({
+  const theme = (0, import_react27.useTheme)();
+  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
+  const [dropdownButtonHeight, setDropdownButtonHeight] = (0, import_react28.useState)(0);
+  const [dropdownButtonWidth, setDropdownButtonWidth] = (0, import_react28.useState)(0);
+  const [dropdownCoords, setDropdownCoords] = (0, import_react28.useState)({
     top: 0,
     left: 0,
     right: 0
   });
-  const dropdownRef = (0, import_react27.useRef)(null);
-  const dropdownButtonRef = (0, import_react27.useRef)(null);
-  const dropdownItemsRef = (0, import_react27.useRef)(null);
-  const [dropdownItemsWidth, setDropdownItemsWidth] = (0, import_react27.useState)(0);
-  const nodeRef = (0, import_react27.useRef)(null);
-  const [nodeReady, setNodeReady] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const dropdownRef = (0, import_react28.useRef)(null);
+  const dropdownButtonRef = (0, import_react28.useRef)(null);
+  const dropdownItemsRef = (0, import_react28.useRef)(null);
+  const [dropdownItemsWidth, setDropdownItemsWidth] = (0, import_react28.useState)(0);
+  const nodeRef = (0, import_react28.useRef)(null);
+  const [nodeReady, setNodeReady] = (0, import_react28.useState)(false);
+  (0, import_react28.useEffect)(() => {
     if (!nodeRef.current) {
       nodeRef.current = document.createElement("div");
       document.body.appendChild(nodeRef.current);
@@ -8724,7 +8834,7 @@ function Dropdown({
       }
     };
   }, []);
-  const setOpen = (0, import_react27.useCallback)(
+  const setOpen = (0, import_react28.useCallback)(
     (newValue) => {
       setIsOpen(newValue);
       if (newValue && onOpen) {
@@ -8750,13 +8860,13 @@ function Dropdown({
       setOpen(false);
     }
   }
-  const handleRef = (0, import_react27.useCallback)((ref) => {
+  const handleRef = (0, import_react28.useCallback)((ref) => {
     if (ref && !dropdownButtonRef.current) {
       dropdownButtonRef.current = ref;
     }
     return ref;
   }, []);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     function handleClickOutside(event) {
       const targetOutsideDropdownItems = dropdownItemsRef.current && !dropdownItemsRef.current.contains(event.target);
       const targetOutsideDropdownButton = dropdownButtonRef.current && !dropdownButtonRef.current.contains(event.target);
@@ -8769,7 +8879,7 @@ function Dropdown({
       window.document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen, setOpen]);
-  const reposition = (0, import_react27.useCallback)(() => {
+  const reposition = (0, import_react28.useCallback)(() => {
     if (dropdownButtonRef.current && dropdownItemsRef.current) {
       const dropdownButtonRect = dropdownButtonRef.current.getBoundingClientRect();
       setDropdownCoords({
@@ -8783,7 +8893,7 @@ function Dropdown({
       setDropdownItemsWidth(dropdownItemsRect.width);
     }
   }, []);
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react28.useLayoutEffect)(() => {
     function onWindowResize() {
       setOpen(false);
       reposition();
@@ -8821,7 +8931,7 @@ function Dropdown({
       dropdownResizeObserver == null ? void 0 : dropdownResizeObserver.disconnect();
     };
   }, [setOpen, horizontalScrollRef, closeOnScroll, reposition]);
-  const handleClickDropdownItems = (0, import_react27.useCallback)(() => {
+  const handleClickDropdownItems = (0, import_react28.useCallback)(() => {
     setOpen(false);
     onClickDropdownItems && onClickDropdownItems();
   }, [onClickDropdownItems, setOpen]);
@@ -8835,13 +8945,13 @@ function Dropdown({
   }
   const buttonContent = button.label || button.getContent && button.getContent({ isOpen, theme });
   const containerCSS = getCSS && getCSS({ isOpen, theme });
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
     "div",
     {
       css: __spreadValues({ position: "relative", display: "inline-flex" }, containerCSS),
       ref: dropdownRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
           DropdownButton,
           {
             id: button.id,
@@ -8869,7 +8979,7 @@ function Dropdown({
           }
         ),
         nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
             DropdownItems,
             {
               isOpen,
@@ -8880,7 +8990,7 @@ function Dropdown({
               maxWidth: maxDropdownItemsWidth,
               children: [
                 dropdownItems == null ? void 0 : dropdownItems.map((dropdownItem, i) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("li", { onBlur: handleBlur, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("li", { onBlur: handleBlur, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                     DropdownItem,
                     {
                       dropdownItem,
@@ -8889,7 +8999,7 @@ function Dropdown({
                   ) }, dropdownItem.label);
                 }),
                 dropdownContent,
-                footer && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DropdownFooter, { children: footer })
+                footer && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(DropdownFooter, { children: footer })
               ]
             }
           ),
@@ -8923,9 +9033,9 @@ function DropdownItem({
   dropdownItem,
   onClick
 }) {
-  const theme = (0, import_react26.useTheme)();
+  const theme = (0, import_react27.useTheme)();
   const dropdownItemIcon = dropdownItem.getIcon && dropdownItem.getIcon({ dropdownItem, theme });
-  const dropdownItemIconNode = dropdownItemIcon ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  const dropdownItemIconNode = dropdownItemIcon ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     Icon,
     {
       name: dropdownItemIcon.name,
@@ -8934,12 +9044,12 @@ function DropdownItem({
     }
   ) : null;
   const cssProp2 = dropdownItem.getCSS && dropdownItem.getCSS({ theme, dropdownItem });
-  const onClickDropdownItem = (0, import_react27.useCallback)(() => {
+  const onClickDropdownItem = (0, import_react28.useCallback)(() => {
     dropdownItem.onClick && dropdownItem.onClick(dropdownItem);
     onClick && onClick();
   }, [dropdownItem, onClick]);
   if (dropdownItem.to !== void 0 || dropdownItem.externalLink) {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
       DropdownItemLink,
       {
         selected: Boolean(dropdownItem.selected),
@@ -8956,7 +9066,7 @@ function DropdownItem({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
     DropdownItemDiv,
     {
       selected: false,
@@ -8993,13 +9103,13 @@ var dropdownItemStyle = ({ selected, theme }) => `
 var cssProp = ({
   theme,
   selected
-}) => import_react26.css`
+}) => import_react27.css`
   ${dropdownItemStyle({ theme, selected: Boolean(selected) })}
   ${standardFocusOutline({ theme })}
 `;
 function DropdownItemLink(props) {
-  const theme = (0, import_react26.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  const theme = (0, import_react27.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     Link,
     __spreadProps(__spreadValues({}, props), {
       css: cssProp({ theme, selected: Boolean(props.selected) })
@@ -9012,9 +9122,9 @@ var DropdownItemDiv = import_styled17.default.div`
 `;
 
 // src/components/Loading.tsx
-var import_react28 = require("@emotion/react");
+var import_react29 = require("@emotion/react");
 var import_styled18 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
 var defaultProps = {
   size: 60,
   center: true,
@@ -9025,8 +9135,8 @@ function Loading({
   size: size2 = defaultProps.size,
   ml = defaultProps.ml
 }) {
-  const theme = (0, import_react28.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Icon, { name: theme.loading, width: size2 }) }) });
+  const theme = (0, import_react29.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: theme.loading, width: size2 }) }) });
 }
 Loading.defaultProps = defaultProps;
 var LoadingWrapper = import_styled18.default.div`
@@ -9064,11 +9174,11 @@ var Rotate = import_styled18.default.div`
 `;
 
 // src/components/TextButton.tsx
-var import_react29 = require("@emotion/react");
+var import_react30 = require("@emotion/react");
 var import_styled19 = __toESM(require("@emotion/styled"), 1);
 
 // src/components/TextIconAligner.tsx
-var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
 function TextIconAligner({
   content,
   typography,
@@ -9081,7 +9191,7 @@ function TextIconAligner({
     size: (typography == null ? void 0 : typography.size) || "Small",
     color: (typography == null ? void 0 : typography.color) || "inherit"
   });
-  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     Icon,
     {
       name: leftIcon.name,
@@ -9090,7 +9200,7 @@ function TextIconAligner({
       color: leftIcon.color
     }
   ) : null;
-  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     Icon,
     {
       name: rightIcon.name,
@@ -9099,7 +9209,7 @@ function TextIconAligner({
       color: rightIcon.color
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
     "span",
     {
       css: {
@@ -9118,7 +9228,7 @@ function TextIconAligner({
 }
 
 // src/components/TextButton.tsx
-var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
 function TextButton({
   text: textProp,
   to,
@@ -9144,7 +9254,7 @@ function TextButton({
     };
   }
   const defaultIconColor = iconMatchTextColor ? void 0 : "mcNeutral";
-  const content = /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     TextIconAligner,
     {
       onClick,
@@ -9174,15 +9284,15 @@ function TextButton({
     }
   };
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, children: content }));
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
 var buttonStyle = ({
   theme,
   disabled,
   padding
-}) => import_react29.css`
+}) => import_react30.css`
   display: inline-flex;
   opacity: ${disabled ? 0.2 : 1};
   align-items: center;
@@ -9214,15 +9324,15 @@ var ButtonHrefLink = import_styled19.default.a`
 var pageSectionScrollOffset = 20;
 
 // src/components/PageSection/PageSection.tsx
-var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
 function PageSection({
   children,
   title,
   sectionId,
   headerOffset = 0
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(StyledPageSection, { scrollMarginTop: headerOffset + pageSectionScrollOffset, children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Heading, { type: "h3", id: sectionId, mt: 0, mb: 40, children: title }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(StyledPageSection, { scrollMarginTop: headerOffset + pageSectionScrollOffset, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Heading, { type: "h3", id: sectionId, mt: 0, mb: 40, children: title }) : null,
     children
   ] });
 }
@@ -9250,9 +9360,9 @@ var PageSectionBoxActionColumn = ({
   label,
   value,
   valueId
-}) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(StyledPageSectionBoxActionColumn, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PageSectionBoxActionColumnLabel, { children: label }),
-  value ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PageSectionBoxActionColumnValue, { id: valueId, children: value }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PageSectionBoxActionColumnNoValue, { children: "Unknown" })
+}) => /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(StyledPageSectionBoxActionColumn, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PageSectionBoxActionColumnLabel, { children: label }),
+  value ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PageSectionBoxActionColumnValue, { id: valueId, children: value }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PageSectionBoxActionColumnNoValue, { children: "Unknown" })
 ] });
 var StyledPageSectionBoxActionColumn = import_styled20.default.div``;
 var PageSectionBoxActionColumnLabel = import_styled20.default.div`
@@ -9283,18 +9393,18 @@ function PageSectionBoxAction({
   to,
   toParams
 }) {
-  const theme = (0, import_react30.useTheme)();
-  return loading ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Loading, { size: 12, center: false }) }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(UnstyledButton, { onClick: icon.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { name: icon.name, width: 12, color: "mcNeutral" }) }) }) : dropdownItems ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  const theme = (0, import_react31.useTheme)();
+  return loading ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Loading, { size: 12, center: false }) }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(UnstyledButton, { onClick: icon.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { name: icon.name, width: 12, color: "mcNeutral" }) }) }) : dropdownItems ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     Dropdown,
     {
       button: {
-        getContent: () => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { name: "DotGrid1x3Horizontal", width: 16 })
+        getContent: () => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { name: "DotGrid1x3Horizontal", width: 16 })
       },
       dropdownItems
     }
-  ) : isDelete ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(UnstyledButton, { css: { color: theme.mcNeutral }, onClick, children: "Delete" }) : label ? (
+  ) : isDelete ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(UnstyledButton, { css: { color: theme.mcNeutral }, onClick, children: "Delete" }) : label ? (
     /* Extra div for proper default alignment inside flex contexts */
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       TextButton,
       {
         leftIcon: icon,
@@ -9315,21 +9425,21 @@ var PageSectionBoxActionRow = ({
   action,
   smFlexColumn = true
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react31.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_react32.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
     SPageSectionBoxActionRow,
     {
       separator: Boolean(separator),
       smFlexColumn: Boolean(smFlexColumn),
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(PageSectionBoxTitle, { children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(PageSectionBoxTitle, { children: [
             title,
-            titleBadge ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Badge, { text: titleBadge, ml: 4 }) : null
+            titleBadge ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Badge, { content: titleBadge, ml: 4 }) : null
           ] }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PageSectionBoxDescription, { children: description }) : null
+          description ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PageSectionBoxDescription, { children: description }) : null
         ] }) : null,
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PageSectionBoxAction, __spreadValues({}, action))
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PageSectionBoxAction, __spreadValues({}, action))
       ]
     }
   ) });
@@ -9377,10 +9487,10 @@ function PageSectionBox({
   description,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(StyledPageSectionBox, { children: [
-    description && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PageSectionBoxDescription, { children: toReactNodes(description) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(StyledPageSectionBox, { children: [
+    description && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PageSectionBoxDescription, { children: toReactNodes(description) }),
     children,
-    (action == null ? void 0 : action.label) ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { css: { marginTop: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PageSectionBoxAction, __spreadValues({}, action)) }) : null
+    (action == null ? void 0 : action.label) ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { css: { marginTop: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PageSectionBoxAction, __spreadValues({}, action)) }) : null
   ] });
 }
 var StyledPageSectionBox = import_styled20.default.div`
@@ -9446,7 +9556,7 @@ var PageSectionBoxTitle = import_styled20.default.div`
   align-items: center;
   font-size: ${({ lg }) => lg ? 14 : 12}px;
   font-weight: 600;
-  line-height: ${({ lg }) => standardLineHeightEms * (lg ? 14 : 12) + badgeVPadding * 2}px;
+  line-height: ${({ lg }) => standardLineHeightEms * (lg ? 14 : 12) + badgeSmVPadding * 2}px;
 `;
 var PageSectionBoxDescription = import_styled20.default.div`
   color: ${({ theme }) => theme.mcNeutral};