@homebound/beam 2.403.0 → 2.405.0-alpha.1

package/dist/index.js

@@ -3326,165 +3326,49 @@ var CssBuilder = class _CssBuilder {
   }
   // typeScale
   /** Sets `fontWeight: 400; fontSize: "10px"; lineHeight: "14px"`. */
-  get tiny() {
+  get xs2() {
     return this.add("fontWeight", 400).add("fontSize", "10px").add("lineHeight", "14px");
   }
-  /** Sets `fontWeight: 500; fontSize: "10px"; lineHeight: "14px"`. */
-  get tinyMd() {
-    return this.add("fontWeight", 500).add("fontSize", "10px").add("lineHeight", "14px");
-  }
   /** Sets `fontWeight: 600; fontSize: "10px"; lineHeight: "14px"`. */
-  get tinySb() {
+  get xs2Sb() {
     return this.add("fontWeight", 600).add("fontSize", "10px").add("lineHeight", "14px");
   }
-  /** Sets `fontWeight: 700; fontSize: "10px"; lineHeight: "14px"`. */
-  get tinyBd() {
-    return this.add("fontWeight", 700).add("fontSize", "10px").add("lineHeight", "14px");
-  }
   /** Sets `fontWeight: 400; fontSize: "12px"; lineHeight: "16px"`. */
   get xs() {
     return this.add("fontWeight", 400).add("fontSize", "12px").add("lineHeight", "16px");
   }
-  /** Sets `fontWeight: 500; fontSize: "12px"; lineHeight: "16px"`. */
-  get xsMd() {
-    return this.add("fontWeight", 500).add("fontSize", "12px").add("lineHeight", "16px");
-  }
   /** Sets `fontWeight: 600; fontSize: "12px"; lineHeight: "16px"`. */
   get xsSb() {
     return this.add("fontWeight", 600).add("fontSize", "12px").add("lineHeight", "16px");
   }
-  /** Sets `fontWeight: 700; fontSize: "12px"; lineHeight: "16px"`. */
-  get xsBd() {
-    return this.add("fontWeight", 700).add("fontSize", "12px").add("lineHeight", "16px");
-  }
   /** Sets `fontWeight: 400; fontSize: "14px"; lineHeight: "20px"`. */
   get sm() {
     return this.add("fontWeight", 400).add("fontSize", "14px").add("lineHeight", "20px");
   }
-  /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"`. */
-  get smMd() {
-    return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px");
-  }
   /** Sets `fontWeight: 600; fontSize: "14px"; lineHeight: "20px"`. */
   get smSb() {
     return this.add("fontWeight", 600).add("fontSize", "14px").add("lineHeight", "20px");
   }
-  /** Sets `fontWeight: 700; fontSize: "14px"; lineHeight: "20px"`. */
-  get smBd() {
-    return this.add("fontWeight", 700).add("fontSize", "14px").add("lineHeight", "20px");
-  }
   /** Sets `fontWeight: 400; fontSize: "16px"; lineHeight: "24px"`. */
-  get base() {
+  get md() {
     return this.add("fontWeight", 400).add("fontSize", "16px").add("lineHeight", "24px");
   }
-  /** Sets `fontWeight: 500; fontSize: "16px"; lineHeight: "24px"`. */
-  get baseMd() {
-    return this.add("fontWeight", 500).add("fontSize", "16px").add("lineHeight", "24px");
-  }
   /** Sets `fontWeight: 600; fontSize: "16px"; lineHeight: "24px"`. */
-  get baseSb() {
+  get mdSb() {
     return this.add("fontWeight", 600).add("fontSize", "16px").add("lineHeight", "24px");
   }
-  /** Sets `fontWeight: 700; fontSize: "16px"; lineHeight: "24px"`. */
-  get baseBd() {
-    return this.add("fontWeight", 700).add("fontSize", "16px").add("lineHeight", "24px");
-  }
-  /** Sets `fontWeight: 400; fontSize: "18px"; lineHeight: "28px"`. */
-  get lg() {
-    return this.add("fontWeight", 400).add("fontSize", "18px").add("lineHeight", "28px");
-  }
-  /** Sets `fontWeight: 500; fontSize: "18px"; lineHeight: "28px"`. */
-  get lgMd() {
-    return this.add("fontWeight", 500).add("fontSize", "18px").add("lineHeight", "28px");
-  }
   /** Sets `fontWeight: 600; fontSize: "18px"; lineHeight: "28px"`. */
-  get lgSb() {
+  get lg() {
     return this.add("fontWeight", 600).add("fontSize", "18px").add("lineHeight", "28px");
   }
-  /** Sets `fontWeight: 700; fontSize: "18px"; lineHeight: "28px"`. */
-  get lgBd() {
-    return this.add("fontWeight", 700).add("fontSize", "18px").add("lineHeight", "28px");
-  }
-  /** Sets `fontWeight: 400; fontSize: "20px"; lineHeight: "28px"`. */
-  get xl() {
-    return this.add("fontWeight", 400).add("fontSize", "20px").add("lineHeight", "28px");
-  }
-  /** Sets `fontWeight: 500; fontSize: "20px"; lineHeight: "28px"`. */
-  get xlMd() {
-    return this.add("fontWeight", 500).add("fontSize", "20px").add("lineHeight", "28px");
-  }
   /** Sets `fontWeight: 600; fontSize: "20px"; lineHeight: "28px"`. */
-  get xlSb() {
+  get xl() {
     return this.add("fontWeight", 600).add("fontSize", "20px").add("lineHeight", "28px");
   }
-  /** Sets `fontWeight: 700; fontSize: "20px"; lineHeight: "28px"`. */
-  get xlBd() {
-    return this.add("fontWeight", 700).add("fontSize", "20px").add("lineHeight", "28px");
-  }
-  /** Sets `fontWeight: 400; fontSize: "24px"; lineHeight: "32px"`. */
-  get xl2() {
-    return this.add("fontWeight", 400).add("fontSize", "24px").add("lineHeight", "32px");
-  }
-  /** Sets `fontWeight: 500; fontSize: "24px"; lineHeight: "32px"`. */
-  get xl2Md() {
-    return this.add("fontWeight", 500).add("fontSize", "24px").add("lineHeight", "32px");
-  }
-  /** Sets `fontWeight: 600; fontSize: "24px"; lineHeight: "32px"`. */
-  get xl2Sb() {
-    return this.add("fontWeight", 600).add("fontSize", "24px").add("lineHeight", "32px");
-  }
-  /** Sets `fontWeight: 700; fontSize: "24px"; lineHeight: "32px"`. */
-  get xl2Bd() {
-    return this.add("fontWeight", 700).add("fontSize", "24px").add("lineHeight", "32px");
-  }
-  /** Sets `fontWeight: 400; fontSize: "30px"; lineHeight: "36px"`. */
-  get xl3() {
-    return this.add("fontWeight", 400).add("fontSize", "30px").add("lineHeight", "36px");
-  }
-  /** Sets `fontWeight: 500; fontSize: "30px"; lineHeight: "36px"`. */
-  get xl3Md() {
-    return this.add("fontWeight", 500).add("fontSize", "30px").add("lineHeight", "36px");
-  }
   /** Sets `fontWeight: 600; fontSize: "30px"; lineHeight: "36px"`. */
-  get xl3Sb() {
+  get xl2() {
     return this.add("fontWeight", 600).add("fontSize", "30px").add("lineHeight", "36px");
   }
-  /** Sets `fontWeight: 700; fontSize: "30px"; lineHeight: "36px"`. */
-  get xl3Bd() {
-    return this.add("fontWeight", 700).add("fontSize", "30px").add("lineHeight", "36px");
-  }
-  /** Sets `fontWeight: 400; fontSize: "36px"; lineHeight: "40px"`. */
-  get xl4() {
-    return this.add("fontWeight", 400).add("fontSize", "36px").add("lineHeight", "40px");
-  }
-  /** Sets `fontWeight: 500; fontSize: "36px"; lineHeight: "40px"`. */
-  get xl4Md() {
-    return this.add("fontWeight", 500).add("fontSize", "36px").add("lineHeight", "40px");
-  }
-  /** Sets `fontWeight: 600; fontSize: "36px"; lineHeight: "40px"`. */
-  get xl4Sb() {
-    return this.add("fontWeight", 600).add("fontSize", "36px").add("lineHeight", "40px");
-  }
-  /** Sets `fontWeight: 700; fontSize: "36px"; lineHeight: "40px"`. */
-  get xl4Bd() {
-    return this.add("fontWeight", 700).add("fontSize", "36px").add("lineHeight", "40px");
-  }
-  /** Sets `fontWeight: 400; fontSize: "48px"; lineHeight: "48px"`. */
-  get xl5() {
-    return this.add("fontWeight", 400).add("fontSize", "48px").add("lineHeight", "48px");
-  }
-  /** Sets `fontWeight: 500; fontSize: "48px"; lineHeight: "48px"`. */
-  get xl5Md() {
-    return this.add("fontWeight", 500).add("fontSize", "48px").add("lineHeight", "48px");
-  }
-  /** Sets `fontWeight: 600; fontSize: "48px"; lineHeight: "48px"`. */
-  get xl5Sb() {
-    return this.add("fontWeight", 600).add("fontSize", "48px").add("lineHeight", "48px");
-  }
-  /** Sets `fontWeight: 700; fontSize: "48px"; lineHeight: "48px"`. */
-  get xl5Bd() {
-    return this.add("fontWeight", 700).add("fontSize", "48px").add("lineHeight", "48px");
-  }
   // typography
   /** Sets `maxWidth: "30em"`. */
   get measure() {
@@ -3855,9 +3739,9 @@ var CssBuilder = class _CssBuilder {
     );
   }
   // buttonBase
-  /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
+  /** Sets `fontWeight: 600; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
   get buttonBase() {
-    return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add(
+    return this.add("fontWeight", 600).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add(
       "borderRadius",
       "8px"
     ).add("display", "inline-flex").add("alignItems", "center").add("whiteSpace", "nowrap").add(
@@ -4947,7 +4831,7 @@ var typeStyles = {
   darkMode: Css.bgGray700.white.$,
   info: Css.bgBlue100.$
 };
-var chipBaseStyles = (compact) => Css.xsMd.dif.aic.br16.px1.gapPx(4).pyPx(pyHeight(compact)).mhPx(minhPx(compact)).gray900.bgGray200.$;
+var chipBaseStyles = (compact) => Css.xsSb.dif.aic.br16.px1.gapPx(4).pyPx(pyHeight(compact)).mhPx(minhPx(compact)).gray900.bgGray200.$;
 var pyHeight = (compact) => compact ? 2 : 4;
 var minhPx = (compact) => compact ? 20 : 24;
 
@@ -5441,7 +5325,7 @@ function Header(props) {
   const { displayMonth } = props;
   const { goToMonth } = useNavigation();
   return /* @__PURE__ */ jsxs5("div", { css: Css.df.jcsb.aic.mlPx(12).mrPx(2).hPx(32).$, children: [
-    /* @__PURE__ */ jsx11("h1", { css: Css.base.$, children: format(displayMonth, "MMMM yyyy") }),
+    /* @__PURE__ */ jsx11("h1", { css: Css.md.$, children: format(displayMonth, "MMMM yyyy") }),
     /* @__PURE__ */ jsxs5("div", { children: [
       /* @__PURE__ */ jsx11(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addMonths(displayMonth, -1)) }),
       /* @__PURE__ */ jsx11(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addMonths(displayMonth, 1)) })
@@ -5454,12 +5338,12 @@ function YearSkipHeader(props) {
   return /* @__PURE__ */ jsxs5("div", { css: Css.df.jcsb.aic.mlPx(12).mrPx(12).hPx(32).$, children: [
     /* @__PURE__ */ jsxs5("div", { css: Css.df.fdr.jcsb.$, children: [
       /* @__PURE__ */ jsx11(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addMonths(displayMonth, -1)) }),
-      /* @__PURE__ */ jsx11("h1", { css: Css.base.$, children: format(displayMonth, "MMM") }),
+      /* @__PURE__ */ jsx11("h1", { css: Css.md.$, children: format(displayMonth, "MMM") }),
       /* @__PURE__ */ jsx11(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addMonths(displayMonth, 1)) })
     ] }),
     /* @__PURE__ */ jsxs5("div", { css: Css.df.fdr.jcsb.$, children: [
       /* @__PURE__ */ jsx11(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addYears(displayMonth, -1)) }),
-      /* @__PURE__ */ jsx11("h1", { css: Css.base.$, children: format(displayMonth, "yyyy") }),
+      /* @__PURE__ */ jsx11("h1", { css: Css.md.$, children: format(displayMonth, "yyyy") }),
       /* @__PURE__ */ jsx11(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addYears(displayMonth, 1)) })
     ] })
   ] });
@@ -5599,7 +5483,7 @@ function InlineLabel({ labelProps, label, contrast, multiline = false, ...others
     {
       ...labelProps,
       ...others,
-      css: Css.smMd.wsnw.gray900.prPx(4).add("color", "currentColor").asc.if(multiline).asfs.pt1.$,
+      css: Css.sm.wsnw.gray900.prPx(4).add("color", "currentColor").asc.if(multiline).asfs.pt1.$,
       children: [
         label,
         ":"
@@ -6462,10 +6346,10 @@ var sizeToPixel = {
   xl: 72
 };
 var sizeToFallbackTypeScale = {
-  sm: "tiny",
+  sm: "xs2",
   md: "sm",
   lg: "lg",
-  xl: "xl3"
+  xl: "xl2"
 };
 var sizeToIconInc = {
   sm: 2.5,
@@ -6474,10 +6358,10 @@ var sizeToIconInc = {
   xl: 8
 };
 var sizeToTypeScale = {
-  sm: "smMd",
-  md: "smMd",
-  lg: "base",
-  xl: "base"
+  sm: "smSb",
+  md: "smSb",
+  lg: "md",
+  xl: "md"
 };
 function nameToInitials(name) {
   return name.split(" ").map((n) => n.length > 0 ? n[0].toUpperCase() : "").join("").slice(0, 3);
@@ -6596,7 +6480,7 @@ function NavLink(props) {
 function getNavLinkStyles(variant, contrast) {
   return navLinkVariantStyles(contrast)[variant];
 }
-var baseStyles = Css.df.aic.hPx(32).pyPx(6).px1.br4.smMd.outline0.$;
+var baseStyles = Css.df.aic.hPx(32).pyPx(6).px1.br4.smSb.outline0.$;
 var navLinkVariantStyles = (contrast) => ({
   side: {
     baseStyles: { ...baseStyles, ...Css.gray700.if(contrast).gray600.$ },
@@ -7055,16 +6939,16 @@ function memoizedTableStyles() {
       const groupedLevels = {
         0: {
           cellCss: {
-            ...Css.xsMd.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$,
+            ...Css.xsSb.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$,
             ...allWhite && Css.bgWhite.$
           },
-          firstContentColumn: { ...Css.smMd.$, ...allWhite && Css.smBd.gray900.$ }
+          firstContentColumn: { ...Css.sm.$, ...allWhite && Css.smSb.gray900.$ }
         },
-        2: { firstContentColumn: Css.tiny.pl3.$ },
+        2: { firstContentColumn: Css.xs2.pl3.$ },
         // Add 12 more pixels of padding for each level of nesting
-        3: { firstContentColumn: Css.tiny.plPx(36).$ }
+        3: { firstContentColumn: Css.xs2.plPx(36).$ }
       };
-      const defaultLevels = { 1: { firstContentColumn: Css.tiny.pl3.$ } };
+      const defaultLevels = { 1: { firstContentColumn: Css.xs2.pl3.$ } };
       cache[key] = {
         emptyCell: "-",
         firstRowMessageCss: {
@@ -7077,11 +6961,11 @@ function memoizedTableStyles() {
           // lineClamp requires `display: webkit-box`, which disables `align-items: center` (requires `display: flex/grid`)
           // Header's will add `lineClamp2` more locally in their renders.
           // Also `unset`-ing the white-space: nowrap defined in `cellCss` below.
-          ...Css.gray700.xsMd.bgGray200.aic.pxPx(12).whiteSpace("unset").hPx(40).$,
+          ...Css.gray700.xsSb.bgGray200.aic.pxPx(12).whiteSpace("unset").hPx(40).$,
           ...allWhite && Css.bgWhite.$
         },
-        totalsCellCss: Css.bgWhite.gray700.bgGray100.xsMd.hPx(totalsRowHeight).pPx(12).$,
-        expandableHeaderCss: Css.bgWhite.gray900.xsMd.wsn.hPx(expandableHeaderRowHeight).pxPx(12).py0.boxShadow(`inset 0 -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).addIn("&:not(:last-of-type)", Css.boxShadow(`inset -1px -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$).$,
+        totalsCellCss: Css.bgWhite.gray700.bgGray100.xsSb.hPx(totalsRowHeight).pPx(12).$,
+        expandableHeaderCss: Css.bgWhite.gray900.xsSb.wsn.hPx(expandableHeaderRowHeight).pxPx(12).py0.boxShadow(`inset 0 -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).addIn("&:not(:last-of-type)", Css.boxShadow(`inset -1px -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$).$,
         cellCss: {
           ...Css[cellTypography].gray900.bgWhite.ai(alignItems).pxPx(12).boxShadow(`inset 0 -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$,
           ...rowHeight === "flexible" ? Css.pyPx(12).$ : Css.wsnw.hPx(inlineEditing ? 48 : 36).$,
@@ -7108,7 +6992,7 @@ function memoizedTableStyles() {
         },
         levels: grouped ? groupedLevels : defaultLevels,
         rowHoverColor: "rgba(239, 246, 255, 1)" /* Blue50 */,
-        keptGroupRowCss: Css.bgYellow100.gray900.xsMd.df.aic.$,
+        keptGroupRowCss: Css.bgYellow100.gray900.xsSb.df.aic.$,
         keptLastRowCss: Css.boxShadow("inset 0px -14px 8px -11px rgba(63,63,63,.18)").$
       };
     }
@@ -7135,7 +7019,7 @@ var cardStyle = {
   // Undo the card look & feel for the header
   headerCellCss: {
     ...defaultStyle.headerCellCss,
-    ...Css.p1.m0.xsMd.gray700.$
+    ...Css.p1.m0.xsSb.gray700.$
   },
   rowHoverColor: "none",
   nonHeaderRowHoverCss: Css.bshHover.bcGray700.$,
@@ -7278,7 +7162,7 @@ function ExpandableHeader(props) {
     "button",
     {
       ...hoverProps,
-      css: Css.df.xsMd.aic.jcsb.gap2.px1.hPx(32).mxPx(-8).w("calc(100% + 16px)").br4.blue700.if(isHovered).bgGray100.$,
+      css: Css.df.xs.aic.jcsb.gap2.px1.hPx(32).mxPx(-8).w("calc(100% + 16px)").br4.blue700.if(isHovered).bgGray100.$,
       onClick: async () => {
         if (isFunction(column2.expandColumns)) {
           setIsLoading(true);
@@ -8175,7 +8059,7 @@ function TextFieldBase(props) {
     selectOnFocus = true,
     inputStylePalette
   } = props;
-  const typeScale = fieldProps?.typeScale ?? (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
+  const typeScale = fieldProps?.typeScale ?? "sm";
   const internalProps = props.internalProps || {};
   const { compound = false, forceFocus = false, forceHover = false } = internalProps;
   const errorMessageId = `${inputProps.id}-error`;
@@ -9313,7 +9197,7 @@ var disabledColor = Css.gray300.$;
 var focusRingStyles = Css.bshFocus.$;
 var hoverBorderStyles = Css.bcBlue900.$;
 var markStyles = { ">svg": Css.absolute.topPx(-1).leftPx(-1).$ };
-var labelStyles = Css.smMd.$;
+var labelStyles = Css.sm.$;
 var descStyles = Css.sm.gray700.$;
 function StyledCheckbox(props) {
   const { isDisabled = false, isIndeterminate = false, isSelected, isFocusVisible } = props;
@@ -10212,7 +10096,7 @@ function ComboBoxInput(props) {
       startAdornment: showNumSelection && /* @__PURE__ */ jsx54(Tooltip, { title: /* @__PURE__ */ jsx54(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ jsx54(
         "span",
         {
-          css: Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$,
+          css: Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.xs2Sb.df.aic.jcc.$,
           "data-testid": "selectedOptionsCount",
           children: isTree ? selectedOptionsLabels?.length : state.selectionManager.selectedKeys.size
         }
@@ -11220,7 +11104,7 @@ function IconCard(props) {
     children: /* @__PURE__ */ jsxs36("button", { css: styles, ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
       /* @__PURE__ */ jsx64(VisuallyHidden4, { children: /* @__PURE__ */ jsx64("input", { ref, ...inputProps, ...tid.value }) }),
       /* @__PURE__ */ jsx64(Icon, { icon, inc: 4, color: isDisabled ? "rgba(221, 220, 220, 1)" /* Gray300 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
-      /* @__PURE__ */ jsx64("span", { css: Css.xsMd.if(isDisabled).gray300.$, children: label })
+      /* @__PURE__ */ jsx64("span", { css: Css.xs.if(isDisabled).gray300.$, children: label })
     ] })
   });
 }
@@ -11546,7 +11430,7 @@ function Radio(props) {
         "div",
         {
           id: labelId,
-          css: Css.smMd.gray800.if(disabled).gray400.$,
+          css: Css.sm.gray800.if(disabled).gray400.$,
           ...description ? { "aria-describedby": descriptionId } : {},
           children: label
         }
@@ -11896,7 +11780,7 @@ function Switch(props) {
             )
           }
         ) }),
-        labelStyle === "inline" && /* @__PURE__ */ jsx72(Label, { label, tooltip, inline: true, xss: Css.smMd.gray900.if(compact).add("lineHeight", "1").$ }),
+        labelStyle === "inline" && /* @__PURE__ */ jsx72(Label, { label, tooltip, inline: true, xss: Css.sm.gray900.if(compact).add("lineHeight", "1").$ }),
         /* @__PURE__ */ jsx72(VisuallyHidden5, { children: /* @__PURE__ */ jsx72("input", { ref, ...inputProps, ...focusProps, ...tid }) })
       ]
     }
@@ -12073,7 +11957,7 @@ function ToggleButton(props) {
     ...hoverProps,
     ...pressProps,
     css: {
-      ...Css.br4.dif.aic.gap1.bgTransparent.gray500.hPx(32).plPx(4).pr1.relative.cursorPointer.w("max-content").smMd.usn.$,
+      ...Css.br4.dif.aic.gap1.bgTransparent.gray500.hPx(32).plPx(4).pr1.relative.cursorPointer.w("max-content").sm.usn.$,
       ...isHovered && toggleHoverStyles,
       ...isPressed && togglePressStyles,
       ...isSelected && !isDisabled && Css.blue700.$,
@@ -13627,8 +13511,8 @@ function Accordion(props) {
   }, [index, setExpandedIndex, onToggle]);
   const touchableStyle = useMemo23(
     () => ({
-      ...Css.df.jcsb.gapPx(12).aic.p2.baseMd.outline("none").onHover.bgGray100.if(!!titleOnClick).baseSb.$,
-      ...compact && Css.smMd.pl2.prPx(10).py1.bgGray100.mbPx(4).br8.onHover.bgGray200.$,
+      ...Css.df.jcsb.gapPx(12).aic.p2.md.outline("none").onHover.bgGray100.if(!!titleOnClick).mdSb.$,
+      ...compact && Css.sm.pl2.prPx(10).py1.bgGray100.mbPx(4).br8.onHover.bgGray200.$,
       ...compact && !!titleOnClick && Css.br0.$,
       ...disabled && Css.gray500.$,
       ...isFocusVisible && Css.boxShadow(`inset 0 0 0 2px ${"rgba(29, 78, 216, 1)" /* Blue700 */}`).$,
@@ -13774,7 +13658,7 @@ function AutoSaveIndicator({ hideOnIdle, doNotReset }) {
   }
 }
 function Indicator({ text, icon, color }) {
-  return /* @__PURE__ */ jsxs46("div", { "data-testid": "autoSave", css: Css.df.gap1.aic.gray700.smMd.$, children: [
+  return /* @__PURE__ */ jsxs46("div", { "data-testid": "autoSave", css: Css.df.gap1.aic.gray700.smSb.$, children: [
     /* @__PURE__ */ jsx84(Icon, { icon, color }),
     text
   ] });
@@ -13785,7 +13669,7 @@ import { jsx as jsx85, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 function Banner(props) {
   const { type, message, onClose = false, showIcon = true, ...others } = props;
   const tid = useTestIds(others, "banner");
-  return /* @__PURE__ */ jsxs47("div", { css: { ...variantStyles2[type], ...Css.df.aic.w100.gap1.p2.gray900.base.bshBasic.$ }, ...tid, role: "alert", children: [
+  return /* @__PURE__ */ jsxs47("div", { css: { ...variantStyles2[type], ...Css.df.aic.w100.gap1.p2.gray900.md.bshBasic.$ }, ...tid, role: "alert", children: [
     showIcon && /* @__PURE__ */ jsx85("span", { css: Css.fs0.$, children: /* @__PURE__ */ jsx85(Icon, { icon: typeToIcon[type], ...tid.type, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) }),
     /* @__PURE__ */ jsx85("span", { css: Css.fg1.$, ...tid.message, children: message }),
     onClose && /* @__PURE__ */ jsx85("span", { css: Css.lh(0).$, children: /* @__PURE__ */ jsx85(IconButton, { icon: "x", onClick: onClose, ...tid.close, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
@@ -13945,7 +13829,7 @@ function Modal(props) {
       children: [
         /* @__PURE__ */ jsxs48("header", { css: Css.df.fdrr.p3.fs0.if(drawHeaderBorder).bb.bcGray200.$, children: [
           /* @__PURE__ */ jsx87("span", { css: Css.fs0.pl1.$, children: allowClosing && /* @__PURE__ */ jsx87(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
-          /* @__PURE__ */ jsx87("h1", { css: Css.fg1.xl2Sb.gray900.$, ref: modalHeaderRef, ...titleProps, ...testId.title })
+          /* @__PURE__ */ jsx87("h1", { css: Css.fg1.xl2.gray900.$, ref: modalHeaderRef, ...titleProps, ...testId.title })
         ] }),
         /* @__PURE__ */ jsx87("main", { ref: modalBodyRef, css: Css.fg1.oya.if(hasScroll).bb.bcGray200.if(!!forceScrolling).oys.$, children: content }),
         /* @__PURE__ */ jsx87("footer", { css: Css.fs0.$, children: /* @__PURE__ */ jsx87("div", { ref: modalFooterRef }) })
@@ -14006,7 +13890,7 @@ function SnackbarNotice(props) {
   const { icon, message, action, hideCloseButton, persistent, onClose } = props;
   const tid = useTestIds(props, "snackbar");
   const reallyHideClose = hideCloseButton && !persistent;
-  return /* @__PURE__ */ jsxs49("div", { css: Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$, ...tid, role: "alert", children: [
+  return /* @__PURE__ */ jsxs49("div", { css: Css.white.bgGray800.br4.md.df.aic.maxwPx(420).$, ...tid, role: "alert", children: [
     icon && /* @__PURE__ */ jsx88("span", { css: Css.fs0.plPx(12).$, children: /* @__PURE__ */ jsx88(Icon, { ...typeToIcon2[icon], ...tid.icon }) }),
     /* @__PURE__ */ jsx88(
       "span",
@@ -14127,7 +14011,7 @@ function SuperDrawer() {
             onClick: (e) => e.stopPropagation(),
             children: /* @__PURE__ */ jsxs51(AutoSaveStatusProvider, { children: [
               /* @__PURE__ */ jsxs51("header", { css: Css.p3.bb.bcGray200.df.aic.jcsb.gap3.$, children: [
-                /* @__PURE__ */ jsx91("div", { ref: headerRef, css: Css.gray900.fg1.addIn("& h1", Css.xl2Sb.$).$ }),
+                /* @__PURE__ */ jsx91("div", { ref: headerRef, css: Css.gray900.fg1.addIn("& h1", Css.xl2.$).$ }),
                 /* @__PURE__ */ jsx91(IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })
               ] }),
               content
@@ -14540,7 +14424,7 @@ function ListFieldRowInputs({
   const tid = useTestIds({}, "listFieldRow");
   return /* @__PURE__ */ jsxs53(Fragment20, { children: [
     /* @__PURE__ */ jsxs53("div", { css: Css.df.jcsb.$, ...tid, children: [
-      /* @__PURE__ */ jsxs53("span", { css: Css.baseSb.$, ...tid.name, children: [
+      /* @__PURE__ */ jsxs53("span", { css: Css.mdSb.$, ...tid.name, children: [
         listFieldConfig.name,
         " ",
         rowNumber
@@ -15295,7 +15179,7 @@ function FormHeading(props) {
     "h3",
     {
       css: {
-        ...Css.baseMd.$,
+        ...Css.md.$,
         // Add space before the heading, but only if it's not first.
         ...!isFirst && Css.mt4.$,
         ...xss
@@ -15317,7 +15201,7 @@ function StaticField(props) {
   const id = useId2();
   return /* @__PURE__ */ jsxs56("div", { css: Css.if(labelStyle === "left").df.jcsb.maxw100.$, ...tid.container, children: [
     /* @__PURE__ */ jsx117("label", { css: Css.db.sm.gray700.mbPx(4).$, htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ jsx117("div", { id, css: Css.smMd.gray900.df.aic.if(labelStyle === "left").w50.$, ...tid, children: value || children })
+    /* @__PURE__ */ jsx117("div", { id, css: Css.sm.gray900.df.aic.if(labelStyle === "left").w50.$, ...tid, children: value || children })
   ] });
 }
 
@@ -15455,8 +15339,8 @@ function PageHeaderBreadcrumbs({ breadcrumb }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
   const breadcrumbs = Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb];
   return /* @__PURE__ */ jsx122("div", { css: Css.df.aic.mbPx(4).$, ...tids, children: breadcrumbs.map((breadcrumb2, i) => /* @__PURE__ */ jsxs58(Fragment23, { children: [
-    i > 0 && /* @__PURE__ */ jsx122("span", { css: Css.smMd.gray700.mr1.ml1.$, children: "/" }),
-    /* @__PURE__ */ jsx122(Link4, { to: breadcrumb2.href, css: Css.smMd.gray700.onHover.gray900.$, className: "navLink", ...tids.navLink, children: breadcrumb2.label })
+    i > 0 && /* @__PURE__ */ jsx122("span", { css: Css.smSb.gray700.mr1.ml1.$, children: "/" }),
+    /* @__PURE__ */ jsx122(Link4, { to: breadcrumb2.href, css: Css.smSb.gray700.onHover.gray900.$, className: "navLink", ...tids.navLink, children: breadcrumb2.label })
   ] }, `bc-${breadcrumb2.label}`)) });
 }
 
@@ -15500,7 +15384,7 @@ function PageHeader(props) {
     /* @__PURE__ */ jsxs59("div", { css: Css.py2.px3.df.jcsb.aic.$, children: [
       /* @__PURE__ */ jsxs59("div", { children: [
         breadCrumb && /* @__PURE__ */ jsx123(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-        /* @__PURE__ */ jsx123("h1", { css: Css.xl3Sb.$, ...tids.pageTitle, children: pageTitle })
+        /* @__PURE__ */ jsx123("h1", { css: Css.xl2.$, ...tids.pageTitle, children: pageTitle })
       ] }),
       /* @__PURE__ */ jsxs59("div", { css: Css.df.gap1.$, children: [
         tertiaryAction && /* @__PURE__ */ jsx123(
@@ -15544,7 +15428,7 @@ function FormSections(props) {
         children: [
           /* @__PURE__ */ jsx123("div", { css: Css.gc(1).$, children: section.icon && /* @__PURE__ */ jsx123(Icon, { icon: section.icon, inc: 3.5 }) }),
           /* @__PURE__ */ jsxs59("div", { css: Css.gc(2).$, children: [
-            section.title && /* @__PURE__ */ jsx123("h2", { css: Css.xlSb.mb3.$, children: section.title }),
+            section.title && /* @__PURE__ */ jsx123("h2", { css: Css.xl.mb3.$, children: section.title }),
             /* @__PURE__ */ jsx123(BoundForm, { formState, rows: section.rows })
           ] })
         ]
@@ -15571,8 +15455,8 @@ function LeftNav(props) {
     `nav-${sectionWithRef.sectionKey}`
   )) });
 }
-var activeStyles2 = Css.smBd.boxShadow(`inset 3px 0px 0 0px ${"rgba(37, 99, 235, 1)" /* Blue600 */}`).$;
-var hoverStyles2 = Css.bgBlue50.smBd.blue900.boxShadow(`inset 3px 0px 0 0px ${"rgba(30, 58, 138, 1)" /* Blue900 */}`).$;
+var activeStyles2 = Css.smSb.boxShadow(`inset 3px 0px 0 0px ${"rgba(37, 99, 235, 1)" /* Blue600 */}`).$;
+var hoverStyles2 = Css.bgBlue50.smSb.blue900.boxShadow(`inset 3px 0px 0 0px ${"rgba(30, 58, 138, 1)" /* Blue900 */}`).$;
 var defaultFocusRingStyles = Css.relative.z2.bshFocus.$;
 function SectionNavLink(props) {
   const { sectionWithRef, activeSection } = props;
@@ -15594,7 +15478,7 @@ function SectionNavLink(props) {
       ...focusProps,
       ...hoverProps,
       css: {
-        ...Css.buttonBase.wsn.tal.smMd.blue600.px2.py1.br0.h100.$,
+        ...Css.buttonBase.wsn.tal.smSb.blue600.px2.py1.br0.h100.$,
         ...isFocusVisible ? defaultFocusRingStyles : {},
         ...active ? activeStyles2 : {},
         ...isPressed ? activeStyles2 : isHovered ? hoverStyles2 : {}
@@ -16165,7 +16049,7 @@ function FilterModal(props) {
 }
 function ModalFilterItem({ label, children }) {
   return /* @__PURE__ */ jsxs64("div", { css: Css.mb4.if(!label).bt.bcGray200.$, children: [
-    label && /* @__PURE__ */ jsx134("h2", { css: Css.baseMd.mb2.$, children: label }),
+    label && /* @__PURE__ */ jsx134("h2", { css: Css.md.mb2.$, children: label }),
     /* @__PURE__ */ jsx134("div", { css: Css.if(!label).pt3.$, children })
   ] });
 }
@@ -16256,7 +16140,7 @@ function Filters(props) {
           Button,
           {
             label: "More Filters",
-            endAdornment: numModalFilters > 0 && /* @__PURE__ */ jsx136("span", { css: Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, children: numModalFilters }),
+            endAdornment: numModalFilters > 0 && /* @__PURE__ */ jsx136("span", { css: Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.xs2Sb.df.aic.jcc.$, children: numModalFilters }),
             variant: "secondary",
             onClick: () => openModal({
               // Spreading `props` to pass along `data-testid`
@@ -16444,7 +16328,7 @@ function Header2(props) {
   return /* @__PURE__ */ jsx141(FullBleed, { children: /* @__PURE__ */ jsxs67("header", { css: { ...Css.p3.mb3.mhPx(50).bgWhite.df.jcsb.aic.$ }, ...tids.header, children: [
     /* @__PURE__ */ jsxs67("div", { children: [
       breadcrumb && /* @__PURE__ */ jsx141(PageHeaderBreadcrumbs, { breadcrumb }),
-      /* @__PURE__ */ jsx141("h1", { css: Css.xl2Sb.mt1.$, ...tids.pageTitle, children: pageTitle })
+      /* @__PURE__ */ jsx141("h1", { css: Css.xl2.mt1.$, ...tids.pageTitle, children: pageTitle })
     ] }),
     /* @__PURE__ */ jsxs67("div", { css: Css.df.fwr.jcfe.gap1.$, children: [
       tertiaryAction && /* @__PURE__ */ jsx141(Button, { ...tertiaryAction, variant: "tertiary" }),
@@ -16821,7 +16705,7 @@ function Tag(props) {
   });
   return maybeTooltip({
     title: !preventTooltip && showTooltip ? text : void 0,
-    children: /* @__PURE__ */ jsxs71("span", { ...tid, css: { ...Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles2, ...xss }, children: [
+    children: /* @__PURE__ */ jsxs71("span", { ...tid, css: { ...Css.dif.xs2Sb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles2, ...xss }, children: [
       otherProps.icon && /* @__PURE__ */ jsx149("span", { css: Css.fs0.$, children: /* @__PURE__ */ jsx149(Icon, { icon: otherProps.icon, inc: 1.5 }) }),
       /* @__PURE__ */ jsx149("span", { ref, css: Css.lineClamp1.wbba.$, children: text })
     ] })
@@ -16892,8 +16776,8 @@ function Card(props) {
     tag && /* @__PURE__ */ jsx150("div", { css: Css.absolute.left1.topPx(4).$, children: /* @__PURE__ */ jsx150(Tag, { type: tag?.type, text: tag?.text, ...tid.tag }) }),
     /* @__PURE__ */ jsxs72("div", { css: Css.df.fdc.aifs.gap1.$, children: [
       /* @__PURE__ */ jsxs72("div", { children: [
-        /* @__PURE__ */ jsx150("div", { css: Css.xsMd.gray700.$, ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ jsx150("div", { css: Css.smMd.gray900.if(isHovered).blue700.$, ...tid.title, children: title })
+        /* @__PURE__ */ jsx150("div", { css: Css.xsSb.gray700.$, ...tid.subtitle, children: subtitle }),
+        /* @__PURE__ */ jsx150("div", { css: Css.smSb.gray900.if(isHovered).blue700.$, ...tid.title, children: title })
       ] }),
       /* @__PURE__ */ jsx150("div", { ...tid.details, children: detailContent })
     ] })
@@ -17335,7 +17219,7 @@ function MaxLines({ maxLines, children }) {
   useResizeObserver5({ ref: elRef, onResize });
   return /* @__PURE__ */ jsxs74("div", { children: [
     /* @__PURE__ */ jsx157("div", { ref: elRef, css: Css.if(!expanded).lineClamp(maxLines).$, children }),
-    hasMore && /* @__PURE__ */ jsx157("button", { css: Css.db.smMd.$, onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
+    hasMore && /* @__PURE__ */ jsx157("button", { css: Css.db.sm.$, onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
 
@@ -18009,7 +17893,7 @@ function getTabStyles() {
   const borderBottomStyles = Css.bb.add("borderBottomWidth", `${borderBottomWidthPx}px`).pbPx(verticalPaddingPx - borderBottomWidthPx).$;
   return {
     baseStyles: Css.df.aic.hPx(32).pyPx(verticalPaddingPx).px1.outline0.gray700.add("width", "fit-content").cursorPointer.sm.$,
-    activeStyles: Css.add(borderBottomStyles).bcBlue700.smMd.gray900.$,
+    activeStyles: Css.add(borderBottomStyles).bcBlue700.smSb.gray900.$,
     disabledStyles: Css.gray400.cursorNotAllowed.$,
     focusRingStyles: Css.bgBlue50.bshFocus.$,
     hoverStyles: Css.add(borderBottomStyles).bcGray400.$,