@lightsparkdev/ui 1.0.2 → 1.0.4

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");
@@ -3608,6 +3620,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;
@@ -3644,7 +3660,11 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3683,6 +3703,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3759,7 +3780,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3767,7 +3791,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
@@ -3910,11 +3935,12 @@ var overlaySurfaceBorderColor = ({
 `;
 var overlaySurface = ({
   theme,
-  important = false
+  important = false,
+  border = true
 }) => import_react4.css`
-  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+  background-color: ${themeOr(theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
-  border: 0.5px solid ${important ? "!important" : ""};
+  ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
   ${themeOr(
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
@@ -4228,7 +4254,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);
@@ -8154,7 +8184,7 @@ var IconContainer = import_styled4.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -8309,6 +8339,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8585,7 +8616,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,
@@ -8597,60 +8627,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
@@ -8673,7 +8787,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,
@@ -8690,22 +8804,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);
@@ -8718,7 +8832,7 @@ function Dropdown({
       }
     };
   }, []);
-  const setOpen = (0, import_react27.useCallback)(
+  const setOpen = (0, import_react28.useCallback)(
     (newValue) => {
       setIsOpen(newValue);
       if (newValue && onOpen) {
@@ -8744,13 +8858,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);
@@ -8763,7 +8877,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({
@@ -8777,7 +8891,7 @@ function Dropdown({
       setDropdownItemsWidth(dropdownItemsRect.width);
     }
   }, []);
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react28.useLayoutEffect)(() => {
     function onWindowResize() {
       setOpen(false);
       reposition();
@@ -8815,7 +8929,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]);
@@ -8829,13 +8943,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,
@@ -8863,7 +8977,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,
@@ -8874,7 +8988,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,
@@ -8883,7 +8997,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 })
               ]
             }
           ),
@@ -8917,9 +9031,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,
@@ -8928,12 +9042,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),
@@ -8950,7 +9064,7 @@ function DropdownItem({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
     DropdownItemDiv,
     {
       selected: false,
@@ -8987,13 +9101,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) })
@@ -9006,9 +9120,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,
@@ -9019,8 +9133,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`
@@ -9058,11 +9172,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,
@@ -9075,7 +9189,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,
@@ -9084,7 +9198,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,
@@ -9093,7 +9207,7 @@ function TextIconAligner({
       color: rightIcon.color
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
     "span",
     {
       css: {
@@ -9112,7 +9226,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,
@@ -9138,7 +9252,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,
@@ -9168,15 +9282,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;
@@ -9208,15 +9322,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
   ] });
 }
@@ -9244,9 +9358,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`
@@ -9277,18 +9391,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,
@@ -9309,21 +9423,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))
       ]
     }
   ) });
@@ -9371,10 +9485,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`
@@ -9440,7 +9554,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};