@homebound/beam 2.404.0 → 2.405.0-alpha.1

package/dist/index.cjs

@@ -3622,165 +3622,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() {
@@ -4151,9 +4035,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(
@@ -5321,7 +5205,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;
 
@@ -5815,7 +5699,7 @@ function Header(props) {
   const { displayMonth } = props;
   const { goToMonth } = (0, import_react_day_picker2.useNavigation)();
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { css: Css.df.jcsb.aic.mlPx(12).mrPx(2).hPx(32).$, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { css: Css.base.$, children: (0, import_date_fns.format)(displayMonth, "MMMM yyyy") }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { css: Css.md.$, children: (0, import_date_fns.format)(displayMonth, "MMMM yyyy") }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, -1)) }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, 1)) })
@@ -5828,12 +5712,12 @@ function YearSkipHeader(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { css: Css.df.jcsb.aic.mlPx(12).mrPx(12).hPx(32).$, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { css: Css.df.fdr.jcsb.$, children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, -1)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { css: Css.base.$, children: (0, import_date_fns.format)(displayMonth, "MMM") }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { css: Css.md.$, children: (0, import_date_fns.format)(displayMonth, "MMM") }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, 1)) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { css: Css.df.fdr.jcsb.$, children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addYears)(displayMonth, -1)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { css: Css.base.$, children: (0, import_date_fns.format)(displayMonth, "yyyy") }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { css: Css.md.$, children: (0, import_date_fns.format)(displayMonth, "yyyy") }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth((0, import_date_fns.addYears)(displayMonth, 1)) })
     ] })
   ] });
@@ -5971,7 +5855,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,
         ":"
@@ -6834,10 +6718,10 @@ var sizeToPixel = {
   xl: 72
 };
 var sizeToFallbackTypeScale = {
-  sm: "tiny",
+  sm: "xs2",
   md: "sm",
   lg: "lg",
-  xl: "xl3"
+  xl: "xl2"
 };
 var sizeToIconInc = {
   sm: 2.5,
@@ -6846,10 +6730,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);
@@ -6968,7 +6852,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.$ },
@@ -7427,16 +7311,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: {
@@ -7449,11 +7333,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).$,
@@ -7480,7 +7364,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)").$
       };
     }
@@ -7507,7 +7391,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.$,
@@ -7650,7 +7534,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);
@@ -8547,7 +8431,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`;
@@ -9676,7 +9560,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;
@@ -10575,7 +10459,7 @@ function ComboBoxInput(props) {
       startAdornment: showNumSelection && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "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
         }
@@ -11583,7 +11467,7 @@ function IconCard(props) {
     children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { css: styles, ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
       /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_aria32.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("input", { ref, ...inputProps, ...tid.value }) }),
       /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "rgba(221, 220, 220, 1)" /* Gray300 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: Css.xsMd.if(isDisabled).gray300.$, children: label })
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: Css.xs.if(isDisabled).gray300.$, children: label })
     ] })
   });
 }
@@ -11909,7 +11793,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
         }
@@ -12259,7 +12143,7 @@ function Switch(props) {
             )
           }
         ) }),
-        labelStyle === "inline" && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Label, { label, tooltip, inline: true, xss: Css.smMd.gray900.if(compact).add("lineHeight", "1").$ }),
+        labelStyle === "inline" && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Label, { label, tooltip, inline: true, xss: Css.sm.gray900.if(compact).add("lineHeight", "1").$ }),
         /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react_aria35.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("input", { ref, ...inputProps, ...focusProps, ...tid }) })
       ]
     }
@@ -12436,7 +12320,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.$,
@@ -13990,8 +13874,8 @@ function Accordion(props) {
   }, [index, setExpandedIndex, onToggle]);
   const touchableStyle = (0, import_react70.useMemo)(
     () => ({
-      ...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 */}`).$,
@@ -14137,7 +14021,7 @@ function AutoSaveIndicator({ hideOnIdle, doNotReset }) {
   }
 }
 function Indicator({ text, icon, color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { "data-testid": "autoSave", css: Css.df.gap1.aic.gray700.smMd.$, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { "data-testid": "autoSave", css: Css.df.gap1.aic.gray700.smSb.$, children: [
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Icon, { icon, color }),
     text
   ] });
@@ -14148,7 +14032,7 @@ var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
 function Banner(props) {
   const { type, message, onClose = false, showIcon = true, ...others } = props;
   const tid = useTestIds(others, "banner");
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: { ...variantStyles2[type], ...Css.df.aic.w100.gap1.p2.gray900.base.bshBasic.$ }, ...tid, role: "alert", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: { ...variantStyles2[type], ...Css.df.aic.w100.gap1.p2.gray900.md.bshBasic.$ }, ...tid, role: "alert", children: [
     showIcon && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: Css.fs0.$, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon, { icon: typeToIcon[type], ...tid.type, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) }),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: Css.fg1.$, ...tid.message, children: message }),
     onClose && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: Css.lh(0).$, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
@@ -14308,7 +14192,7 @@ function Modal(props) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("header", { css: Css.df.fdrr.p3.fs0.if(drawHeaderBorder).bb.bcGray200.$, children: [
           /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { css: Css.fs0.pl1.$, children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h1", { css: Css.fg1.xl2Sb.gray900.$, ref: modalHeaderRef, ...titleProps, ...testId.title })
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h1", { css: Css.fg1.xl2.gray900.$, ref: modalHeaderRef, ...titleProps, ...testId.title })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("main", { ref: modalBodyRef, css: Css.fg1.oya.if(hasScroll).bb.bcGray200.if(!!forceScrolling).oys.$, children: content }),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("footer", { css: Css.fs0.$, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ref: modalFooterRef }) })
@@ -14369,7 +14253,7 @@ function SnackbarNotice(props) {
   const { icon, message, action, hideCloseButton, persistent, onClose } = props;
   const tid = useTestIds(props, "snackbar");
   const reallyHideClose = hideCloseButton && !persistent;
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { css: Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$, ...tid, role: "alert", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { css: Css.white.bgGray800.br4.md.df.aic.maxwPx(420).$, ...tid, role: "alert", children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { css: Css.fs0.plPx(12).$, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { ...typeToIcon2[icon], ...tid.icon }) }),
     /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "span",
@@ -14490,7 +14374,7 @@ function SuperDrawer() {
             onClick: (e) => e.stopPropagation(),
             children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(AutoSaveStatusProvider, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("header", { css: Css.p3.bb.bcGray200.df.aic.jcsb.gap3.$, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { ref: headerRef, css: Css.gray900.fg1.addIn("& h1", Css.xl2Sb.$).$ }),
+                /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { ref: headerRef, css: Css.gray900.fg1.addIn("& h1", Css.xl2.$).$ }),
                 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })
               ] }),
               content
@@ -14903,7 +14787,7 @@ function ListFieldRowInputs({
   const tid = useTestIds({}, "listFieldRow");
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { css: Css.df.jcsb.$, ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { css: Css.baseSb.$, ...tid.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { css: Css.mdSb.$, ...tid.name, children: [
         listFieldConfig.name,
         " ",
         rowNumber
@@ -15658,7 +15542,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
@@ -15680,7 +15564,7 @@ function StaticField(props) {
   const id = (0, import_utils99.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { css: Css.if(labelStyle === "left").df.jcsb.maxw100.$, ...tid.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("label", { css: Css.db.sm.gray700.mbPx(4).$, htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { id, css: Css.smMd.gray900.df.aic.if(labelStyle === "left").w50.$, ...tid, children: value || children })
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { id, css: Css.sm.gray900.df.aic.if(labelStyle === "left").w50.$, ...tid, children: value || children })
   ] });
 }
 
@@ -15818,8 +15702,8 @@ function PageHeaderBreadcrumbs({ breadcrumb }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
   const breadcrumbs = Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb];
   return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { css: Css.df.aic.mbPx(4).$, ...tids, children: breadcrumbs.map((breadcrumb2, i) => /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_react86.Fragment, { children: [
-    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { css: Css.smMd.gray700.mr1.ml1.$, children: "/" }),
-    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_react_router_dom4.Link, { to: breadcrumb2.href, css: Css.smMd.gray700.onHover.gray900.$, className: "navLink", ...tids.navLink, children: breadcrumb2.label })
+    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { css: Css.smSb.gray700.mr1.ml1.$, children: "/" }),
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_react_router_dom4.Link, { to: breadcrumb2.href, css: Css.smSb.gray700.onHover.gray900.$, className: "navLink", ...tids.navLink, children: breadcrumb2.label })
   ] }, `bc-${breadcrumb2.label}`)) });
 }
 
@@ -15863,7 +15747,7 @@ function PageHeader(props) {
     /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: Css.py2.px3.df.jcsb.aic.$, children: [
       /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { children: [
         breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h1", { css: Css.xl3Sb.$, ...tids.pageTitle, children: pageTitle })
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h1", { css: Css.xl2.$, ...tids.pageTitle, children: pageTitle })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: Css.df.gap1.$, children: [
         tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -15907,7 +15791,7 @@ function FormSections(props) {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { css: Css.gc(1).$, children: section.icon && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: section.icon, inc: 3.5 }) }),
           /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: Css.gc(2).$, children: [
-            section.title && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h2", { css: Css.xlSb.mb3.$, children: section.title }),
+            section.title && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h2", { css: Css.xl.mb3.$, children: section.title }),
             /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(BoundForm, { formState, rows: section.rows })
           ] })
         ]
@@ -15934,8 +15818,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;
@@ -15957,7 +15841,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 : {}
@@ -16521,7 +16405,7 @@ function FilterModal(props) {
 }
 function ModalFilterItem({ label, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { css: Css.mb4.if(!label).bt.bcGray200.$, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("h2", { css: Css.baseMd.mb2.$, children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("h2", { css: Css.md.mb2.$, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: Css.if(!label).pt3.$, children })
   ] });
 }
@@ -16612,7 +16496,7 @@ function Filters(props) {
           Button,
           {
             label: "More Filters",
-            endAdornment: numModalFilters > 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, children: numModalFilters }),
+            endAdornment: numModalFilters > 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("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`
@@ -16800,7 +16684,7 @@ function Header2(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("header", { css: { ...Css.p3.mb3.mhPx(50).bgWhite.df.jcsb.aic.$ }, ...tids.header, children: [
     /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { children: [
       breadcrumb && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(PageHeaderBreadcrumbs, { breadcrumb }),
-      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("h1", { css: Css.xl2Sb.mt1.$, ...tids.pageTitle, children: pageTitle })
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("h1", { css: Css.xl2.mt1.$, ...tids.pageTitle, children: pageTitle })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { css: Css.df.fwr.jcfe.gap1.$, children: [
       tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Button, { ...tertiaryAction, variant: "tertiary" }),
@@ -17177,7 +17061,7 @@ function Tag(props) {
   });
   return maybeTooltip({
     title: !preventTooltip && showTooltip ? text : void 0,
-    children: /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("span", { ...tid, css: { ...Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles2, ...xss }, children: [
+    children: /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("span", { ...tid, css: { ...Css.dif.xs2Sb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles2, ...xss }, children: [
       otherProps.icon && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { css: Css.fs0.$, children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Icon, { icon: otherProps.icon, inc: 1.5 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { ref, css: Css.lineClamp1.wbba.$, children: text })
     ] })
@@ -17248,8 +17132,8 @@ function Card(props) {
     tag && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { css: Css.absolute.left1.topPx(4).$, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Tag, { type: tag?.type, text: tag?.text, ...tid.tag }) }),
     /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { css: Css.df.fdc.aifs.gap1.$, children: [
       /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { css: Css.xsMd.gray700.$, ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { css: Css.smMd.gray900.if(isHovered).blue700.$, ...tid.title, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { css: Css.xsSb.gray700.$, ...tid.subtitle, children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { css: Css.smSb.gray900.if(isHovered).blue700.$, ...tid.title, children: title })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { ...tid.details, children: detailContent })
     ] })
@@ -17691,7 +17575,7 @@ function MaxLines({ maxLines, children }) {
   (0, import_utils119.useResizeObserver)({ ref: elRef, onResize });
   return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ref: elRef, css: Css.if(!expanded).lineClamp(maxLines).$, children }),
-    hasMore && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("button", { css: Css.db.smMd.$, onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
+    hasMore && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("button", { css: Css.db.sm.$, onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
 
@@ -18365,7 +18249,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.$,