@homebound/beam 3.0.0-alpha.5 → 3.0.0-alpha.7

package/dist/index.js

@@ -3373,9 +3373,9 @@ var CssBuilder = class _CssBuilder {
   get measureNarrow() {
     return this.add("maxWidth", "20em");
   }
-  /** Sets `textIndent: "1em"; marginTop: 0; marginBottom: 0`. */
+  /** Sets `textIndent: "1em"; marginTop: "0px"; marginBottom: "0px"`. */
   get indent() {
-    return this.add("textIndent", "1em").add("marginTop", 0).add("marginBottom", 0);
+    return this.add("textIndent", "1em").add("marginTop", "0px").add("marginBottom", "0px");
   }
   /** Sets `fontVariant: "small-caps"`. */
   get smallCaps() {
@@ -3788,6 +3788,12 @@ var CssBuilder = class _CssBuilder {
   get onDisabled() {
     return this.newCss({ selector: ":disabled" });
   }
+  get ifFirstOfType() {
+    return this.newCss({ selector: ":first-of-type" });
+  }
+  get ifLastOfType() {
+    return this.newCss({ selector: ":last-of-type" });
+  }
   /** Marks this element as a default hover marker (for ancestor pseudo selectors). */
   get marker() {
     return this;
@@ -3867,6 +3873,11 @@ var CssBuilder = class _CssBuilder {
   addCss(props) {
     return this.add(omitUndefinedValues(props));
   }
+  /** Marker for the build-time transform to append a raw className. */
+  className(className) {
+    void className;
+    return this;
+  }
   /** Convert a style hash into `{ className, style }` props for manual spreading into non-`css=` contexts. */
   props(styles) {
     return trussProps(styles);
@@ -3894,7 +3905,7 @@ function px(pixels) {
   return `${pixels}px`;
 }
 function omitUndefinedValues(value) {
-  const entries = Object.entries(value).filter(function([, entryValue]) {
+  const entries = Object.entries(value).filter(([, entryValue]) => {
     return entryValue !== void 0;
   });
   return Object.fromEntries(entries);
@@ -4177,12 +4188,12 @@ function Popper(props) {
       color: "white",
       paddingLeft: "pl1",
       paddingRight: "pr1",
-      paddingTop: "py_4px_paddingTop",
-      paddingBottom: "py_4px_paddingBottom",
+      paddingTop: "pt_4px",
+      paddingBottom: "pb_4px",
       borderRadius: "br4",
       fontWeight: "fw4",
-      fontSize: "xs_fontSize",
-      lineHeight: "xs_lineHeight",
+      fontSize: "fz_12px",
+      lineHeight: "lh_16px",
       zIndex: "z_999999"
     },
     ...xss
@@ -4756,10 +4767,10 @@ function Chip(props) {
       } }),
       /* @__PURE__ */ jsx5("span", { ...trussProps4({
         overflow: "oh",
-        display: "lineClamp1_display",
-        WebkitBoxOrient: "lineClamp1_WebkitBoxOrient",
-        textOverflow: "lineClamp1_textOverflow",
-        WebkitLineClamp: "lineClamp1_WebkitLineClamp",
+        display: "d_negwebkit_box",
+        WebkitBoxOrient: "wbo_vertical",
+        textOverflow: "to_ellipsis",
+        WebkitLineClamp: "wlc_1",
         wordBreak: "wbba"
       }), children: text })
     ] })
@@ -4795,8 +4806,8 @@ var typeStyles = {
 };
 var chipBaseStyles = (compact) => ({
   fontWeight: "fw6",
-  fontSize: "xsSb_fontSize",
-  lineHeight: "xsSb_lineHeight",
+  fontSize: "fz_12px",
+  lineHeight: "lh_16px",
   display: "dif",
   alignItems: "aic",
   borderRadius: "br16",
@@ -4914,6 +4925,7 @@ var nonKindGridColumnKeys = [
   "serverSideSortKey",
   "clientSideSort",
   "sticky",
+  "border",
   "wrapAction",
   "isAction",
   "id",
@@ -5397,8 +5409,8 @@ function ExpandableHeader(props) {
   return /* @__PURE__ */ jsxs4("button", { ...hoverProps, ...trussProps8({
     display: "df",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
     alignItems: "aic",
     justifyContent: "jcsb",
     gap: "gap2",
@@ -5447,10 +5459,10 @@ function ExpandableHeader(props) {
       /* @__PURE__ */ jsx10("span", { ...trussProps8({
         textAlign: "tal",
         overflow: "oh",
-        display: "lineClamp2_display",
-        WebkitBoxOrient: "lineClamp2_WebkitBoxOrient",
-        textOverflow: "lineClamp2_textOverflow",
-        WebkitLineClamp: "lineClamp2_WebkitLineClamp"
+        display: "d_negwebkit_box",
+        WebkitBoxOrient: "wbo_vertical",
+        textOverflow: "to_ellipsis",
+        WebkitLineClamp: "wlc_2"
       }), children: title }),
       tooltipEl
     ] }),
@@ -5519,10 +5531,10 @@ function SortHeader(props) {
     iconOnLeft && icon,
     /* @__PURE__ */ jsx11("span", { ...trussProps9({
       overflow: "oh",
-      display: "lineClamp2_display",
-      WebkitBoxOrient: "lineClamp2_WebkitBoxOrient",
-      textOverflow: "lineClamp2_textOverflow",
-      WebkitLineClamp: "lineClamp2_WebkitLineClamp"
+      display: "d_negwebkit_box",
+      WebkitBoxOrient: "wbo_vertical",
+      textOverflow: "to_ellipsis",
+      WebkitLineClamp: "wlc_2"
     }), children: content }),
     tooltipEl,
     !iconOnLeft && icon
@@ -5554,7 +5566,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     ...style?.presentationSettings?.wrap === false ? {
       whiteSpace: "wsnw",
       overflow: "oh",
-      textOverflow: "truncate_textOverflow"
+      textOverflow: "to_ellipsis"
     } : {}
   })) : content;
   if (content && typeof content === "string" && isHeader && canSortColumn) {
@@ -5565,10 +5577,10 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     return /* @__PURE__ */ jsxs6(Fragment3, { children: [
       /* @__PURE__ */ jsx12("span", { ...trussProps10({
         overflow: "oh",
-        display: "lineClamp2_display",
-        WebkitBoxOrient: "lineClamp2_WebkitBoxOrient",
-        textOverflow: "lineClamp2_textOverflow",
-        WebkitLineClamp: "lineClamp2_WebkitLineClamp"
+        display: "d_negwebkit_box",
+        WebkitBoxOrient: "wbo_vertical",
+        textOverflow: "to_ellipsis",
+        WebkitLineClamp: "wlc_2"
       }), children: content }),
       tooltipEl
     ] });
@@ -5576,10 +5588,10 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     return /* @__PURE__ */ jsxs6(Fragment3, { children: [
       /* @__PURE__ */ jsx12("span", { ...trussProps10({
         overflow: "oh",
-        display: "lineClamp2_display",
-        WebkitBoxOrient: "lineClamp2_WebkitBoxOrient",
-        textOverflow: "lineClamp2_textOverflow",
-        WebkitLineClamp: "lineClamp2_WebkitLineClamp"
+        display: "d_negwebkit_box",
+        WebkitBoxOrient: "wbo_vertical",
+        textOverflow: "to_ellipsis",
+        WebkitLineClamp: "wlc_2"
       }), title: content, children: content }),
       tooltipEl
     ] });
@@ -5588,7 +5600,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
       /* @__PURE__ */ jsx12("span", { ...trussProps10({
         whiteSpace: "wsnw",
         overflow: "oh",
-        textOverflow: "truncate_textOverflow",
+        textOverflow: "to_ellipsis",
         minWidth: "mw0"
       }), title: content, children: content }),
       tooltipEl
@@ -5634,6 +5646,19 @@ function getFirstOrLastCellCss(style, columnIndex, columns, colspan = 1) {
     ...columnIndex + colspan >= columns.length ? style.lastCellCss : {}
   };
 }
+function getColumnBorderCss(border, style) {
+  if (!border) return {};
+  return {
+    ...border === "left" ? {
+      borderLeftStyle: "bls_solid",
+      borderLeftWidth: "blw_1px"
+    } : {
+      borderRightStyle: "brs_solid",
+      borderRightWidth: "brw_1px"
+    },
+    ...style.borderStyle
+  };
+}
 function isJSX(content) {
   return typeof content === "object" && content && "type" in content && "props" in content;
 }
@@ -5938,8 +5963,8 @@ function Header(props) {
   }), children: [
     /* @__PURE__ */ jsx15("h1", { ...trussProps12({
       fontWeight: "fw4",
-      fontSize: "md_fontSize",
-      lineHeight: "md_lineHeight"
+      fontSize: "fz_16px",
+      lineHeight: "lh_24px"
     }), children: format(displayMonth, "MMMM yyyy") }),
     /* @__PURE__ */ jsxs8("div", { children: [
       /* @__PURE__ */ jsx15(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addMonths(displayMonth, -1)) }),
@@ -5970,8 +5995,8 @@ function YearSkipHeader(props) {
       /* @__PURE__ */ jsx15(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addMonths(displayMonth, -1)) }),
       /* @__PURE__ */ jsx15("h1", { ...trussProps12({
         fontWeight: "fw4",
-        fontSize: "md_fontSize",
-        lineHeight: "md_lineHeight"
+        fontSize: "fz_16px",
+        lineHeight: "lh_24px"
       }), children: format(displayMonth, "MMM") }),
       /* @__PURE__ */ jsx15(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addMonths(displayMonth, 1)) })
     ] }),
@@ -5983,8 +6008,8 @@ function YearSkipHeader(props) {
       /* @__PURE__ */ jsx15(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addYears(displayMonth, -1)) }),
       /* @__PURE__ */ jsx15("h1", { ...trussProps12({
         fontWeight: "fw4",
-        fontSize: "md_fontSize",
-        lineHeight: "md_lineHeight"
+        fontSize: "fz_16px",
+        lineHeight: "lh_24px"
       }), children: format(displayMonth, "yyyy") }),
       /* @__PURE__ */ jsx15(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addYears(displayMonth, 1)) })
     ] })
@@ -6008,8 +6033,8 @@ function WeekHeader() {
     paddingRight: "pr1",
     paddingLeft: "pl1",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
     color: "gray400"
   }), key: format2(day, "EEEE") }, /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: format2(day, "EEEEE") }), /* @__PURE__ */ jsx16("span", { className: "rdp-vhidden", children: format2(day, "EEEE") }))) }) });
 }
@@ -6030,8 +6055,8 @@ function DatePicker(props) {
     display: "dib",
     backgroundColor: "bgWhite",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   }), ...tid, children: /* @__PURE__ */ jsx17(
     DayPicker,
     {
@@ -6084,8 +6109,8 @@ function DateRangePicker(props) {
     display: "dib",
     backgroundColor: "bgWhite",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   }), ...tid, children: /* @__PURE__ */ jsx19(DayPicker2, { mode: "range", selected: range, components: {
     Caption: useYearPicker ? YearSkipHeader : Header,
     Head: WeekHeader,
@@ -6128,8 +6153,8 @@ function MenuSectionImpl(props) {
   const tid = useTestIds(props);
   return /* @__PURE__ */ jsxs9(Fragment5, { children: [
     isPersistentSection && /* @__PURE__ */ jsx20("li", { ...separatorProps, ...trussProps17({
-      borderTopStyle: "bt_borderTopStyle",
-      borderTopWidth: "bt_borderTopWidth",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
       borderColor: "bcGray200"
     }) }),
     /* @__PURE__ */ jsx20("li", { ...itemProps, ...trussProps17({
@@ -6141,9 +6166,9 @@ function MenuSectionImpl(props) {
         color: "white"
       } : {}
     }), children: /* @__PURE__ */ jsx20("ul", { ...trussProps17({
-      padding: "listReset_padding",
-      margin: "listReset_margin",
-      listStyle: "listReset_listStyle"
+      padding: "p_0",
+      margin: "m_0",
+      listStyle: "lis_none"
     }), ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => /* @__PURE__ */ jsx20(MenuItemImpl, { item, state, onClose, contrast, ...tid }, item.key)) }) })
   ] });
 }
@@ -6171,8 +6196,8 @@ function HelperText(props) {
   return /* @__PURE__ */ jsx21("div", { ...trussProps18({
     color: "gray700",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
     marginTop: "mt_4px",
     ...contrast ? {
       color: "gray100"
@@ -6203,8 +6228,8 @@ function LabelComponent(props) {
       alignItems: "aic",
       gap: "gap1",
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: "gray700",
       marginBottom: ["mb_var", {
         "--marginBottom": `${inline ? 0 : 4}px`
@@ -6236,8 +6261,8 @@ function InlineLabel({
 }) {
   return /* @__PURE__ */ jsxs10("label", { ...labelProps, ...others, ...trussProps19({
     fontWeight: "fw4",
-    fontSize: "sm_fontSize",
-    lineHeight: "sm_lineHeight",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
     whiteSpace: "wsnw",
     color: "color_currentColor",
     paddingRight: "pr_4px",
@@ -6666,58 +6691,58 @@ function KeptGroupRow(props) {
 var __typography = {
   xs2: {
     fontWeight: "fw4",
-    fontSize: "xs2_fontSize",
-    lineHeight: "xs2_lineHeight"
+    fontSize: "fz_10px",
+    lineHeight: "lh_14px"
   },
   xs2Sb: {
     fontWeight: "fw6",
-    fontSize: "xs2Sb_fontSize",
-    lineHeight: "xs2Sb_lineHeight"
+    fontSize: "fz_10px",
+    lineHeight: "lh_14px"
   },
   xs: {
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   },
   xsSb: {
     fontWeight: "fw6",
-    fontSize: "xsSb_fontSize",
-    lineHeight: "xsSb_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   },
   sm: {
     fontWeight: "fw4",
-    fontSize: "sm_fontSize",
-    lineHeight: "sm_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   },
   smSb: {
     fontWeight: "fw6",
-    fontSize: "smSb_fontSize",
-    lineHeight: "smSb_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   },
   md: {
     fontWeight: "fw4",
-    fontSize: "md_fontSize",
-    lineHeight: "md_lineHeight"
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px"
   },
   mdSb: {
     fontWeight: "fw6",
-    fontSize: "mdSb_fontSize",
-    lineHeight: "mdSb_lineHeight"
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px"
   },
   lg: {
     fontWeight: "fw6",
-    fontSize: "lg_fontSize",
-    lineHeight: "lg_lineHeight"
+    fontSize: "fz_18px",
+    lineHeight: "lh_28px"
   },
   xl: {
     fontWeight: "fw6",
-    fontSize: "xl_fontSize",
-    lineHeight: "xl_lineHeight"
+    fontSize: "fz_20px",
+    lineHeight: "lh_28px"
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "xl2_fontSize",
-    lineHeight: "xl2_lineHeight"
+    fontSize: "fz_30px",
+    lineHeight: "lh_36px"
   }
 };
 function memoizedTableStyles() {
@@ -6742,8 +6767,8 @@ function memoizedTableStyles() {
           cellCss: {
             ...{
               fontWeight: "fw6",
-              fontSize: "xsSb_fontSize",
-              lineHeight: "xsSb_lineHeight",
+              fontSize: "fz_12px",
+              lineHeight: "lh_16px",
               minHeight: "mh_56px",
               color: "gray700",
               backgroundColor: "bgGray100",
@@ -6758,13 +6783,13 @@ function memoizedTableStyles() {
           firstContentColumn: {
             ...{
               fontWeight: "fw4",
-              fontSize: "sm_fontSize",
-              lineHeight: "sm_lineHeight"
+              fontSize: "fz_14px",
+              lineHeight: "lh_20px"
             },
             ...allWhite && {
               fontWeight: "fw6",
-              fontSize: "smSb_fontSize",
-              lineHeight: "smSb_lineHeight",
+              fontSize: "fz_14px",
+              lineHeight: "lh_20px",
               color: "gray900"
             }
           }
@@ -6772,8 +6797,8 @@ function memoizedTableStyles() {
         2: {
           firstContentColumn: {
             fontWeight: "fw4",
-            fontSize: "xs_fontSize",
-            lineHeight: "xs_lineHeight",
+            fontSize: "fz_12px",
+            lineHeight: "lh_16px",
             paddingLeft: "pl3"
           }
         },
@@ -6781,8 +6806,8 @@ function memoizedTableStyles() {
         3: {
           firstContentColumn: {
             fontWeight: "fw4",
-            fontSize: "xs_fontSize",
-            lineHeight: "xs_lineHeight",
+            fontSize: "fz_12px",
+            lineHeight: "lh_16px",
             paddingLeft: "pl_36px"
           }
         }
@@ -6791,8 +6816,8 @@ function memoizedTableStyles() {
         1: {
           firstContentColumn: {
             fontWeight: "fw4",
-            fontSize: "xs_fontSize",
-            lineHeight: "xs_lineHeight",
+            fontSize: "fz_12px",
+            lineHeight: "lh_16px",
             paddingLeft: "pl3"
           }
         }
@@ -6809,10 +6834,10 @@ function memoizedTableStyles() {
             backgroundColor: "bgWhite"
           },
           ...bordered && {
-            borderLeftStyle: "bl_borderLeftStyle",
-            borderLeftWidth: "bl_borderLeftWidth",
-            borderRightStyle: "br_borderRightStyle",
-            borderRightWidth: "br_borderRightWidth",
+            borderLeftStyle: "bls_solid",
+            borderLeftWidth: "blw_1px",
+            borderRightStyle: "brs_solid",
+            borderRightWidth: "brw_1px",
             borderColor: "bcGray200"
           }
         },
@@ -6824,12 +6849,12 @@ function memoizedTableStyles() {
           ...{
             color: "gray700",
             fontWeight: "fw6",
-            fontSize: "xsSb_fontSize",
-            lineHeight: "xsSb_lineHeight",
+            fontSize: "fz_12px",
+            lineHeight: "lh_16px",
             backgroundColor: "bgGray200",
             alignItems: "aic",
-            paddingLeft: "px_12px_paddingLeft",
-            paddingRight: "px_12px_paddingRight",
+            paddingLeft: "pl_12px",
+            paddingRight: "pr_12px",
             whiteSpace: "whiteSpace_unset",
             height: "h_40px"
           },
@@ -6841,28 +6866,28 @@ function memoizedTableStyles() {
           backgroundColor: "bgGray100",
           color: "gray700",
           fontWeight: "fw6",
-          fontSize: "xsSb_fontSize",
-          lineHeight: "xsSb_lineHeight",
+          fontSize: "fz_12px",
+          lineHeight: "lh_16px",
           height: ["h_var", {
             "--height": `${totalsRowHeight}px`
           }],
-          paddingTop: "p_12px_paddingTop",
-          paddingBottom: "p_12px_paddingBottom",
-          paddingRight: "p_12px_paddingRight",
-          paddingLeft: "p_12px_paddingLeft"
+          paddingTop: "pt_12px",
+          paddingBottom: "pb_12px",
+          paddingRight: "pr_12px",
+          paddingLeft: "pl_12px"
         },
         expandableHeaderCss: {
           backgroundColor: "bgWhite",
           color: "gray900",
           fontWeight: "fw6",
-          fontSize: "xsSb_fontSize",
-          lineHeight: "xsSb_lineHeight",
+          fontSize: "fz_12px",
+          lineHeight: "lh_16px",
           whiteSpace: "wsn",
           height: ["h_var", {
             "--height": `${expandableHeaderRowHeight}px`
           }],
-          paddingLeft: "px_12px_paddingLeft",
-          paddingRight: "px_12px_paddingRight",
+          paddingLeft: "pl_12px",
+          paddingRight: "pr_12px",
           paddingTop: "pt0",
           paddingBottom: "pb0",
           boxShadow: ["boxShadow_var", {
@@ -6884,15 +6909,15 @@ function memoizedTableStyles() {
             alignItems: ["ai_var", {
               "--alignItems": alignItems
             }],
-            paddingLeft: "px_12px_paddingLeft",
-            paddingRight: "px_12px_paddingRight",
+            paddingLeft: "pl_12px",
+            paddingRight: "pr_12px",
             boxShadow: ["boxShadow_var", {
               "--boxShadow": `inset 0 -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`
             }]
           },
           ...rowHeight === "flexible" ? {
-            paddingTop: "py_12px_paddingTop",
-            paddingBottom: "py_12px_paddingBottom"
+            paddingTop: "pt_12px",
+            paddingBottom: "pb_12px"
           } : {
             whiteSpace: "wsnw",
             height: ["h_var", {
@@ -6904,18 +6929,21 @@ function memoizedTableStyles() {
           } : {}
         },
         firstCellCss: bordered ? {
-          borderLeftStyle: "bl_borderLeftStyle",
-          borderLeftWidth: "bl_borderLeftWidth",
+          borderLeftStyle: "bls_solid",
+          borderLeftWidth: "blw_1px",
           borderColor: "bcGray200"
         } : void 0,
         lastCellCss: bordered ? {
-          borderRightStyle: "br_borderRightStyle",
-          borderRightWidth: "br_borderRightWidth",
+          borderRightStyle: "brs_solid",
+          borderRightWidth: "brw_1px",
           borderColor: "bcGray200"
         } : void 0,
+        borderStyle: {
+          borderColor: "bcGray200"
+        },
         firstRowCellCss: bordered ? {
-          borderTopStyle: "bt_borderTopStyle",
-          borderTopWidth: "bt_borderTopWidth",
+          borderTopStyle: "bts_solid",
+          borderTopWidth: "btw_1px",
           borderColor: "bcGray200"
         } : void 0,
         firstRowFirstCellCss: {
@@ -6928,8 +6956,8 @@ function memoizedTableStyles() {
         // remove the inset shadow and, when bordered, replace it with a true bottom border.
         lastRowCellCss: bordered ? {
           boxShadow: "bsh0",
-          borderBottomStyle: "bb_borderBottomStyle",
-          borderBottomWidth: "bb_borderBottomWidth",
+          borderBottomStyle: "bbs_solid",
+          borderBottomWidth: "bbw_1px",
           borderColor: "bcGray200"
         } : {
           boxShadow: "bsh0"
@@ -6953,8 +6981,8 @@ function memoizedTableStyles() {
           backgroundColor: "bgYellow100",
           color: "gray900",
           fontWeight: "fw6",
-          fontSize: "xsSb_fontSize",
-          lineHeight: "xsSb_lineHeight",
+          fontSize: "fz_12px",
+          lineHeight: "lh_16px",
           display: "df",
           alignItems: "aic"
         },
@@ -6984,8 +7012,8 @@ var condensedStyle = {
     }).firstRowMessageCss,
     ...{
       fontWeight: "fw4",
-      fontSize: "xs_fontSize",
-      lineHeight: "xs_lineHeight",
+      fontSize: "fz_12px",
+      lineHeight: "lh_16px",
       color: "gray900"
     }
   }
@@ -7004,10 +7032,10 @@ var cardStyle = {
     boxShadow: "h_bshHover"
   },
   firstRowCss: {
-    borderLeftStyle: "bl_borderLeftStyle",
-    borderLeftWidth: "bl_borderLeftWidth",
-    borderRightStyle: "br_borderRightStyle",
-    borderRightWidth: "br_borderRightWidth",
+    borderLeftStyle: "bls_solid",
+    borderLeftWidth: "blw_1px",
+    borderRightStyle: "brs_solid",
+    borderRightWidth: "brw_1px",
     borderColor: "bcGray200",
     borderRadius: "borderRadius_8px_8px_0_0",
     overflow: "oh"
@@ -7031,8 +7059,8 @@ var cardStyle = {
       marginRight: "mr0",
       marginLeft: "ml0",
       fontWeight: "fw6",
-      fontSize: "xsSb_fontSize",
-      lineHeight: "xsSb_lineHeight",
+      fontSize: "fz_12px",
+      lineHeight: "lh_16px",
       color: "gray700"
     }
   },
@@ -7441,58 +7469,58 @@ var __maybeInc3 = (inc) => {
 var __typography2 = {
   xs2: {
     fontWeight: "fw4",
-    fontSize: "xs2_fontSize",
-    lineHeight: "xs2_lineHeight"
+    fontSize: "fz_10px",
+    lineHeight: "lh_14px"
   },
   xs2Sb: {
     fontWeight: "fw6",
-    fontSize: "xs2Sb_fontSize",
-    lineHeight: "xs2Sb_lineHeight"
+    fontSize: "fz_10px",
+    lineHeight: "lh_14px"
   },
   xs: {
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   },
   xsSb: {
     fontWeight: "fw6",
-    fontSize: "xsSb_fontSize",
-    lineHeight: "xsSb_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   },
   sm: {
     fontWeight: "fw4",
-    fontSize: "sm_fontSize",
-    lineHeight: "sm_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   },
   smSb: {
     fontWeight: "fw6",
-    fontSize: "smSb_fontSize",
-    lineHeight: "smSb_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   },
   md: {
     fontWeight: "fw4",
-    fontSize: "md_fontSize",
-    lineHeight: "md_lineHeight"
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px"
   },
   mdSb: {
     fontWeight: "fw6",
-    fontSize: "mdSb_fontSize",
-    lineHeight: "mdSb_lineHeight"
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px"
   },
   lg: {
     fontWeight: "fw6",
-    fontSize: "lg_fontSize",
-    lineHeight: "lg_lineHeight"
+    fontSize: "fz_18px",
+    lineHeight: "lh_28px"
   },
   xl: {
     fontWeight: "fw6",
-    fontSize: "xl_fontSize",
-    lineHeight: "xl_lineHeight"
+    fontSize: "fz_20px",
+    lineHeight: "lh_28px"
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "xl2_fontSize",
-    lineHeight: "xl2_lineHeight"
+    fontSize: "fz_30px",
+    lineHeight: "lh_36px"
   }
 };
 function maybeApplyFunction(row, maybeFn) {
@@ -7723,6 +7751,8 @@ function RowImpl(props) {
       ...isBodyRow && levelStyle?.cellCss,
       // Level specific styling for the first content column
       ...applyFirstContentColumnStyles && levelStyle?.firstContentColumn,
+      // Apply any declarative column border styling after header/body defaults.
+      ...getColumnBorderCss(column2.border, style),
       // The specific cell's css (if any from GridCellContent)
       ...rowStyleCellCss,
       // Apply active row styling for non-nested card styles.
@@ -7824,8 +7854,8 @@ function ErrorMessage(props) {
   const errorEl = errorMsg ? /* @__PURE__ */ jsxs15("div", { ...trussProps24({
     color: "red600",
     fontWeight: "fw4",
-    fontSize: "sm_fontSize",
-    lineHeight: "sm_lineHeight",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
     display: "df",
     marginTop: "mt_4px",
     ...contrast ? {
@@ -7857,58 +7887,58 @@ var __maybeInc4 = (inc) => {
 var __typography3 = {
   xs2: {
     fontWeight: "fw4",
-    fontSize: "xs2_fontSize",
-    lineHeight: "xs2_lineHeight"
+    fontSize: "fz_10px",
+    lineHeight: "lh_14px"
   },
   xs2Sb: {
     fontWeight: "fw6",
-    fontSize: "xs2Sb_fontSize",
-    lineHeight: "xs2Sb_lineHeight"
+    fontSize: "fz_10px",
+    lineHeight: "lh_14px"
   },
   xs: {
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   },
   xsSb: {
     fontWeight: "fw6",
-    fontSize: "xsSb_fontSize",
-    lineHeight: "xsSb_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   },
   sm: {
     fontWeight: "fw4",
-    fontSize: "sm_fontSize",
-    lineHeight: "sm_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   },
   smSb: {
     fontWeight: "fw6",
-    fontSize: "smSb_fontSize",
-    lineHeight: "smSb_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   },
   md: {
     fontWeight: "fw4",
-    fontSize: "md_fontSize",
-    lineHeight: "md_lineHeight"
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px"
   },
   mdSb: {
     fontWeight: "fw6",
-    fontSize: "mdSb_fontSize",
-    lineHeight: "mdSb_lineHeight"
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px"
   },
   lg: {
     fontWeight: "fw6",
-    fontSize: "lg_fontSize",
-    lineHeight: "lg_lineHeight"
+    fontSize: "fz_18px",
+    lineHeight: "lh_28px"
   },
   xl: {
     fontWeight: "fw6",
-    fontSize: "xl_fontSize",
-    lineHeight: "xl_lineHeight"
+    fontSize: "fz_20px",
+    lineHeight: "lh_28px"
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "xl2_fontSize",
-    lineHeight: "xl2_lineHeight"
+    fontSize: "fz_30px",
+    lineHeight: "lh_36px"
   }
 };
 function TextFieldBase(props) {
@@ -7962,7 +7992,6 @@ function TextFieldBase(props) {
   } = internalProps;
   const errorMessageId = `${inputProps.id}-error`;
   const labelSuffix = useLabelSuffix(required, inputProps.readOnly);
-  const ElementType = multiline ? "textarea" : "input";
   const tid = useTestIds(props, defaultTestId(label));
   const [isFocused, setIsFocused] = useState10(false);
   const {
@@ -8137,7 +8166,7 @@ function TextFieldBase(props) {
       } : {
         whiteSpace: "wsnw",
         overflow: "oh",
-        textOverflow: "truncate_textOverflow"
+        textOverflow: "to_ellipsis"
       }
     },
     hover: {
@@ -8197,6 +8226,38 @@ function TextFieldBase(props) {
   }
   const showFocus = isFocused && !inputProps.readOnly || forceFocus;
   const showHover = isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused || forceHover;
+  const fieldElementProps = mergeProps6(inputProps, {
+    onBlur,
+    onFocus: onFocusChained,
+    onChange: onDomChange
+  }, {
+    "aria-invalid": Boolean(errorMsg),
+    ...labelStyle === "hidden" ? {
+      "aria-label": label
+    } : {}
+  });
+  const errorMessageProps = errorMsg ? {
+    "aria-errormessage": errorMessageId
+  } : {};
+  const fieldElementCss = {
+    ...fieldStyles.input,
+    ...inputProps.disabled ? fieldStyles.disabled : {},
+    ...showHover ? fieldStyles.hover : {},
+    ...unfocusedPlaceholder && !isFocused && {
+      position: "absolute",
+      overflow: "oh",
+      clip: "cli_inset_50",
+      clipPath: "clp_none",
+      border: "bd_0",
+      height: "h_1px",
+      margin: "m_neg1px",
+      width: "w_1px",
+      padding: "p_0",
+      whiteSpace: "wsnw",
+      opacity: "o0"
+    },
+    ...xss
+  };
   return /* @__PURE__ */ jsxs16(Fragment9, { children: [
     /* @__PURE__ */ jsxs16("div", { ...trussProps25(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
       label && labelStyle !== "inline" && /* @__PURE__ */ jsx29(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, contrast, ...tid.label }),
@@ -8214,7 +8275,7 @@ function TextFieldBase(props) {
             ...wrap === false ? {
               whiteSpace: "wsnw",
               overflow: "oh",
-              textOverflow: "truncate_textOverflow"
+              textOverflow: "to_ellipsis"
             } : {}
           },
           ...xss
@@ -8279,13 +8340,13 @@ function TextFieldBase(props) {
                     ...isFocused && {
                       position: "absolute",
                       overflow: "oh",
-                      clip: "visuallyHidden_clip",
-                      clipPath: "visuallyHidden_clipPath",
-                      border: "visuallyHidden_border",
-                      height: "visuallyHidden_height",
-                      margin: "visuallyHidden_margin",
-                      width: "visuallyHidden_width",
-                      padding: "visuallyHidden_padding",
+                      clip: "cli_inset_50",
+                      clipPath: "clp_none",
+                      border: "bd_0",
+                      height: "h_1px",
+                      margin: "m_neg1px",
+                      width: "w_1px",
+                      padding: "p_0",
                       whiteSpace: "wsnw",
                       opacity: "o0"
                     }
@@ -8293,36 +8354,7 @@ function TextFieldBase(props) {
                   children: unfocusedPlaceholder
                 }
               ),
-              /* @__PURE__ */ jsx29(ElementType, { ...mergeProps6(inputProps, {
-                onBlur,
-                onFocus: onFocusChained,
-                onChange: onDomChange
-              }, {
-                "aria-invalid": Boolean(errorMsg),
-                ...labelStyle === "hidden" ? {
-                  "aria-label": label
-                } : {}
-              }), ...errorMsg ? {
-                "aria-errormessage": errorMessageId
-              } : {}, ref: fieldRef, rows: multiline ? 1 : void 0, ...trussProps25({
-                ...fieldStyles.input,
-                ...inputProps.disabled ? fieldStyles.disabled : {},
-                ...showHover ? fieldStyles.hover : {},
-                ...unfocusedPlaceholder && !isFocused && {
-                  position: "absolute",
-                  overflow: "oh",
-                  clip: "visuallyHidden_clip",
-                  clipPath: "visuallyHidden_clipPath",
-                  border: "visuallyHidden_border",
-                  height: "visuallyHidden_height",
-                  margin: "visuallyHidden_margin",
-                  width: "visuallyHidden_width",
-                  padding: "visuallyHidden_padding",
-                  whiteSpace: "wsnw",
-                  opacity: "o0"
-                },
-                ...xss
-              }), ...tid }),
+              multiline ? /* @__PURE__ */ jsx29("textarea", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, rows: 1, ...trussProps25(fieldElementCss), ...tid }) : /* @__PURE__ */ jsx29("input", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, ...trussProps25(fieldElementCss), ...tid }),
               isFocused && clearable && onChange && inputProps.value && /* @__PURE__ */ jsx29(IconButton, { icon: "xCircle", color: "rgba(100, 100, 100, 1)" /* Gray700 */, onClick: () => {
                 onChange(void 0);
                 fieldRef.current?.focus();
@@ -8484,8 +8516,8 @@ function Menu(props) {
     ...{
       display: "df",
       flexDirection: "fdc",
-      marginTop: "my_4px_marginTop",
-      marginBottom: "my_4px_marginBottom",
+      marginTop: "mt_4px",
+      marginBottom: "mb_4px",
       outline: "outline0",
       borderRadius: "br4",
       boxShadow: "bshBasic",
@@ -8504,9 +8536,9 @@ function Menu(props) {
   }), children: [
     searchable && /* @__PURE__ */ jsx31(MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid }),
     /* @__PURE__ */ jsx31("ul", { ...trussProps26({
-      padding: "listReset_padding",
-      margin: "listReset_margin",
-      listStyle: "listReset_listStyle"
+      padding: "p_0",
+      margin: "m_0",
+      listStyle: "lis_none"
     }), ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => /* @__PURE__ */ jsx31(MenuSectionImpl, { section: item, state, onClose, contrast, ...tid }, item.key)) })
   ] }) });
 }
@@ -8524,58 +8556,58 @@ import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var __typography4 = {
   xs2: {
     fontWeight: "fw4",
-    fontSize: "xs2_fontSize",
-    lineHeight: "xs2_lineHeight"
+    fontSize: "fz_10px",
+    lineHeight: "lh_14px"
   },
   xs2Sb: {
     fontWeight: "fw6",
-    fontSize: "xs2Sb_fontSize",
-    lineHeight: "xs2Sb_lineHeight"
+    fontSize: "fz_10px",
+    lineHeight: "lh_14px"
   },
   xs: {
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   },
   xsSb: {
     fontWeight: "fw6",
-    fontSize: "xsSb_fontSize",
-    lineHeight: "xsSb_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   },
   sm: {
     fontWeight: "fw4",
-    fontSize: "sm_fontSize",
-    lineHeight: "sm_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   },
   smSb: {
     fontWeight: "fw6",
-    fontSize: "smSb_fontSize",
-    lineHeight: "smSb_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   },
   md: {
     fontWeight: "fw4",
-    fontSize: "md_fontSize",
-    lineHeight: "md_lineHeight"
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px"
   },
   mdSb: {
     fontWeight: "fw6",
-    fontSize: "mdSb_fontSize",
-    lineHeight: "mdSb_lineHeight"
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px"
   },
   lg: {
     fontWeight: "fw6",
-    fontSize: "lg_fontSize",
-    lineHeight: "lg_lineHeight"
+    fontSize: "fz_18px",
+    lineHeight: "lh_28px"
   },
   xl: {
     fontWeight: "fw6",
-    fontSize: "xl_fontSize",
-    lineHeight: "xl_lineHeight"
+    fontSize: "fz_20px",
+    lineHeight: "lh_28px"
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "xl2_fontSize",
-    lineHeight: "xl2_lineHeight"
+    fontSize: "fz_30px",
+    lineHeight: "lh_36px"
   }
 };
 function Avatar({
@@ -8860,8 +8892,8 @@ function Button(props) {
     ...mergeProps8(asLink ? navLink : void 0, void 0, {
       ...{
         fontWeight: "fw6",
-        fontSize: "buttonBase_fontSize",
-        lineHeight: "buttonBase_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         outline: "outline0",
         borderRadius: "br8",
         display: "dif",
@@ -9233,8 +9265,8 @@ var variantStyles = (contrast) => ({
 var sizeStyles = {
   sm: {
     height: "h_32px",
-    paddingLeft: "px_12px_paddingLeft",
-    paddingRight: "px_12px_paddingRight"
+    paddingLeft: "pl_12px",
+    paddingRight: "pr_12px"
   },
   md: {
     height: "h_40px",
@@ -9344,14 +9376,14 @@ var baseStyles = {
   display: "df",
   alignItems: "aic",
   height: "h_32px",
-  paddingTop: "py_6px_paddingTop",
-  paddingBottom: "py_6px_paddingBottom",
+  paddingTop: "pt_6px",
+  paddingBottom: "pb_6px",
   paddingLeft: "pl1",
   paddingRight: "pr1",
   borderRadius: "br4",
   fontWeight: "fw6",
-  fontSize: "smSb_fontSize",
-  lineHeight: "smSb_lineHeight",
+  fontSize: "fz_14px",
+  lineHeight: "lh_20px",
   outline: "outline0"
 };
 var navLinkVariantStyles = (contrast) => ({
@@ -9531,8 +9563,8 @@ function ContextualModal(props) {
   }), ...tid, children: [
     title && /* @__PURE__ */ jsx37("div", { ...trussProps32({
       fontWeight: "fw6",
-      fontSize: "lg_fontSize",
-      lineHeight: "lg_lineHeight",
+      fontSize: "fz_18px",
+      lineHeight: "lh_28px",
       textAlign: "tac"
     }), ...tid.title, children: title }),
     /* @__PURE__ */ jsx37("div", { ...tid.content, children: typeof content === "function" ? content(close) : content })
@@ -9569,8 +9601,8 @@ function AvatarGroup(props) {
     alignItems: "aic",
     gap: "gap1",
     fontWeight: "fw6",
-    fontSize: "xsSb_fontSize",
-    lineHeight: "xsSb_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   }), children: [
     /* @__PURE__ */ jsx39("div", { ...trussProps33({
       display: "df",
@@ -9675,12 +9707,12 @@ function MenuItemImpl(props) {
       outline: "outline0",
       minHeight: "mh_42px",
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight"
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px"
     },
     ...menuItem.hasDivider ? {
-      borderBottomStyle: "bb_borderBottomStyle",
-      borderBottomWidth: "bb_borderBottomWidth",
+      borderBottomStyle: "bbs_solid",
+      borderBottomWidth: "bbw_1px",
       borderColor: "bcGray700"
     } : {},
     ...!isDisabled && isHovered ? contrast ? {
@@ -9993,7 +10025,7 @@ function ListBoxChip({
     ...{
       whiteSpace: "wsnw",
       overflow: "oh",
-      textOverflow: "truncate_textOverflow",
+      textOverflow: "to_ellipsis",
       display: "dib"
     }
   }), title: label, children: label });
@@ -10079,8 +10111,8 @@ function ChipSelectField(props) {
   const chipStyles = {
     ...chipBaseStyles(),
     ...{
-      paddingTop: "py_2px_paddingTop",
-      paddingBottom: "py_2px_paddingBottom",
+      paddingTop: "pt_2px",
+      paddingBottom: "pb_2px",
       gap: "gap0",
       alignItems: "aiStretch"
     }
@@ -10249,10 +10281,10 @@ function ChipSelectField(props) {
           ...{
             textAlign: "tal",
             borderRadius: "br16",
-            paddingLeft: "px_10px_paddingLeft",
-            paddingRight: "px_10px_paddingRight",
-            paddingTop: "py_2px_paddingTop",
-            paddingBottom: "py_2px_paddingBottom",
+            paddingLeft: "pl_10px",
+            paddingRight: "pr_10px",
+            paddingTop: "pt_2px",
+            paddingBottom: "pb_2px",
             outline: "outline0",
             ...showClearButton ? {
               paddingRight: "pr_4px",
@@ -10262,10 +10294,10 @@ function ChipSelectField(props) {
           ...isDisabled ? chipDisabledStyles : chipHoverOnlyStyles
         }), title: state.selectedItem ? state.selectedItem.textValue : placeholder, ...tid, children: /* @__PURE__ */ jsx44("span", { ...valueProps, ...trussProps37({
           overflow: "oh",
-          display: "lineClamp1_display",
-          WebkitBoxOrient: "lineClamp1_WebkitBoxOrient",
-          textOverflow: "lineClamp1_textOverflow",
-          WebkitLineClamp: "lineClamp1_WebkitLineClamp",
+          display: "d_negwebkit_box",
+          WebkitBoxOrient: "wbo_vertical",
+          textOverflow: "to_ellipsis",
+          WebkitLineClamp: "wlc_1",
           wordBreak: "wbba"
         }), children: state.selectedItem ? state.selectedItem.textValue : placeholder }) }),
         showClearButton && /* @__PURE__ */ jsx44("button", { ...clearFocusProps, ...trussProps37({
@@ -10381,13 +10413,13 @@ function Option(props) {
         outline: "outline0",
         cursor: "cursorPointer",
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight"
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px"
       },
       // Assumes only one Persistent Item per list - will need to change to utilize Sections if that assumption is incorrect.
       ...isPersistentKey(item.key) ? {
-        borderTopStyle: "bt_borderTopStyle",
-        borderTopWidth: "bt_borderTopWidth",
+        borderTopStyle: "bts_solid",
+        borderTopWidth: "btw_1px",
         borderColor: "bcGray200"
       } : {},
       ...themeStyles.item,
@@ -10579,13 +10611,13 @@ var markSvgStyles = {
 };
 var labelStyles = {
   fontWeight: "fw4",
-  fontSize: "sm_fontSize",
-  lineHeight: "sm_lineHeight"
+  fontSize: "fz_14px",
+  lineHeight: "lh_20px"
 };
 var descStyles = {
   fontWeight: "fw4",
-  fontSize: "sm_fontSize",
-  lineHeight: "sm_lineHeight",
+  fontSize: "fz_14px",
+  lineHeight: "lh_20px",
   color: "gray700"
 };
 function StyledCheckbox(props) {
@@ -10690,8 +10722,8 @@ function TreeOption(props) {
       outline: "outline0",
       cursor: "cursorPointer",
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight"
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px"
     },
     ...listItemStyles.item,
     ...isHovered && !isDisabled ? listItemStyles.hover : {},
@@ -10881,8 +10913,8 @@ function ListBoxSection(props) {
   const childNodes = [...section.childNodes];
   return /* @__PURE__ */ jsxs32(Fragment15, { children: [
     isPersistentSection && /* @__PURE__ */ jsx50("li", { ...separatorProps, ...trussProps42({
-      borderTopStyle: "bt_borderTopStyle",
-      borderTopWidth: "bt_borderTopWidth",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
       borderColor: "bcGray200"
     }) }),
     /* @__PURE__ */ jsx50("li", { ...itemProps, ...trussProps42({
@@ -10890,9 +10922,9 @@ function ListBoxSection(props) {
         overflow: "oa"
       } : {}
     }), children: /* @__PURE__ */ jsx50("ul", { ...trussProps42({
-      padding: "listReset_padding",
-      margin: "listReset_margin",
-      listStyle: "listReset_listStyle",
+      padding: "p_0",
+      margin: "m_0",
+      listStyle: "lis_none",
       ...!isPersistentSection ? {
         height: ["h_var", {
           "--height": `${popoverHeight - sectionSeparatorHeight - persistentItemHeight}px`
@@ -10988,25 +11020,25 @@ function ListBox(props) {
     } : {}
   }), ref: listBoxRef, ...listBoxProps, children: [
     isMultiSelect && !isTree && state.selectionManager.selectedKeys.size > 0 && /* @__PURE__ */ jsx52("ul", { ...trussProps44({
-      padding: "listReset_padding",
-      margin: "listReset_margin",
-      listStyle: "listReset_listStyle",
+      padding: "p_0",
+      margin: "m_0",
+      listStyle: "lis_none",
       paddingTop: "pt2",
       paddingLeft: "pl2",
       paddingBottom: "pb1",
       paddingRight: "pr1",
       display: "df",
-      borderBottomStyle: "bb_borderBottomStyle",
-      borderBottomWidth: "bb_borderBottomWidth",
+      borderBottomStyle: "bbs_solid",
+      borderBottomWidth: "bbw_1px",
       borderColor: "bcGray200",
       flexWrap: "flexWrap_wrap",
       maxHeight: "maxh_50",
       overflow: "oa"
     }), ref: selectedList, children: selectedOptions.map((o) => /* @__PURE__ */ jsx52(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
     /* @__PURE__ */ jsx52("ul", { ...trussProps44({
-      padding: "listReset_padding",
-      margin: "listReset_margin",
-      listStyle: "listReset_listStyle",
+      padding: "p_0",
+      margin: "m_0",
+      listStyle: "lis_none",
       flexGrow: "fg1"
     }), children: hasSections ? [...state.collection].map((section) => /* @__PURE__ */ jsx52(
       ListBoxSection,
@@ -12530,8 +12562,8 @@ function IconCard(props) {
       /* @__PURE__ */ jsx64(Icon, { icon, inc: 4, color: isDisabled ? "rgba(221, 220, 220, 1)" /* Gray300 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
       /* @__PURE__ */ jsx64("span", { ...trussProps50({
         fontWeight: "fw4",
-        fontSize: "xs_fontSize",
-        lineHeight: "xs_lineHeight",
+        fontSize: "fz_12px",
+        lineHeight: "lh_16px",
         ...isDisabled ? {
           color: "gray300"
         } : {}
@@ -12613,7 +12645,7 @@ function MultiLineSelectField(props) {
         }), key: index }, /* @__PURE__ */ jsx65("div", { ...trussProps51({
           whiteSpace: "wsnw",
           overflow: "oh",
-          textOverflow: "truncate_textOverflow",
+          textOverflow: "to_ellipsis",
           width: "w100"
         }), children: /* @__PURE__ */ jsx65(SelectField, { ...otherProps, ...tid.selectField, labelStyle: "hidden", value, onSelect: () => {
         }, options, getOptionValue, getOptionLabel, compact: true, readOnly: true }) }), /* @__PURE__ */ jsx65(Button, { ...tid.deleteSelected, variant: "tertiary", label: "", "aria-label": `Delete selected ${otherProps.label}`, icon: "x", onClick: () => {
@@ -12966,8 +12998,8 @@ function Radio(props) {
     /* @__PURE__ */ jsxs41("div", { children: [
       /* @__PURE__ */ jsx68("div", { id: labelId, ...trussProps52({
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         color: "gray800",
         ...disabled ? {
           color: "gray400"
@@ -12977,8 +13009,8 @@ function Radio(props) {
       } : {}, children: label }),
       description && /* @__PURE__ */ jsx68("div", { id: descriptionId, ...trussProps52({
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         color: "gray700",
         ...disabled ? {
           color: "gray400"
@@ -13232,8 +13264,8 @@ function RichTextFieldImpl(props) {
         minHeight: "mh_120px",
         backgroundColor: "bgWhite",
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         color: "gray900",
         borderStyle: "bss",
         borderWidth: "bw1",
@@ -13386,8 +13418,8 @@ function Switch(props) {
       alignItems: "aic",
       width: "wa",
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight"
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px"
     },
     ...labelStyle === "centered" && {
       flexDirection: "fdc",
@@ -13440,8 +13472,8 @@ function Switch(props) {
     }), children: withIcon && /* @__PURE__ */ jsx72(Icon, { icon: isSelected ? "check" : "x", color: isSelected ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(201, 201, 201, 1)" /* Gray400 */, inc: toggleHeight(compact) / 16 }) }) }) }),
     labelStyle === "inline" && /* @__PURE__ */ jsx72(Label, { label, tooltip, inline: true, xss: {
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: "gray900",
       ...compact ? {
         lineHeight: "lineHeight_1"
@@ -13697,8 +13729,8 @@ function ToggleButton(props) {
         cursor: "cursorPointer",
         width: "w_max_content",
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         userSelect: "usn"
       },
       ...isHovered && toggleHoverStyles,
@@ -13855,13 +13887,13 @@ function ToggleChip2(props) {
         alignItems: "aic",
         borderRadius: "br16",
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         paddingLeft: "pl1",
         paddingRight: "pr1",
         cursor: "cursorPointer",
-        paddingTop: "py_4px_paddingTop",
-        paddingBottom: "py_4px_paddingBottom"
+        paddingTop: "pt_4px",
+        paddingBottom: "pb_4px"
       },
       ...chipStateCss,
       ...isFocusVisible ? {
@@ -15663,10 +15695,10 @@ function ToggleChip(props) {
     /* @__PURE__ */ jsx80("span", { ...trussProps59({
       textAlign: "tal",
       overflow: "oh",
-      display: "lineClamp1_display",
-      WebkitBoxOrient: "lineClamp1_WebkitBoxOrient",
-      textOverflow: "lineClamp1_textOverflow",
-      WebkitLineClamp: "lineClamp1_WebkitLineClamp",
+      display: "d_negwebkit_box",
+      WebkitBoxOrient: "wbo_vertical",
+      textOverflow: "to_ellipsis",
+      WebkitLineClamp: "wlc_1",
       wordBreak: "wbba",
       ...disabled ? {
         paddingRight: "pr0"
@@ -15783,20 +15815,20 @@ function Accordion(props) {
       paddingRight: "pr2",
       paddingLeft: "pl2",
       fontWeight: "fw4",
-      fontSize: "md_fontSize",
-      lineHeight: "md_lineHeight",
+      fontSize: "fz_16px",
+      lineHeight: "lh_24px",
       outline: "outline_none",
       backgroundColor: "h_bgGray100",
       ...!!titleOnClick ? {
         fontWeight: "fw4 h_fw6",
-        fontSize: "md_fontSize h_mdSb_fontSize",
-        lineHeight: "md_lineHeight h_mdSb_lineHeight"
+        fontSize: "fz_16px h_fz_16px",
+        lineHeight: "lh_24px h_lh_24px"
       } : {}
     },
     ...compact && {
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       paddingLeft: "pl2",
       paddingRight: "pr_10px",
       paddingTop: "pt1",
@@ -15822,12 +15854,12 @@ function Accordion(props) {
     ...{
       borderColor: "bcGray300",
       ...topBorder ? {
-        borderTopStyle: "bt_borderTopStyle",
-        borderTopWidth: "bt_borderTopWidth"
+        borderTopStyle: "bts_solid",
+        borderTopWidth: "btw_1px"
       } : {},
       ...bottomBorder ? {
-        borderBottomStyle: "bb_borderBottomStyle",
-        borderBottomWidth: "bb_borderBottomWidth"
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px"
       } : {}
     },
     ...size ? {
@@ -15852,8 +15884,8 @@ function Accordion(props) {
           paddingRight: "pr2",
           justifyContent: "jcfe",
           ...compact ? {
-            paddingLeft: "px_10px_paddingLeft",
-            paddingRight: "px_10px_paddingRight"
+            paddingLeft: "pl_10px",
+            paddingRight: "pr_10px"
           } : {}
         }
       }), onClick: toggle, children: /* @__PURE__ */ jsx82(RotatingChevronIcon, { expanded }) })
@@ -15992,8 +16024,8 @@ function Indicator({
     alignItems: "aic",
     color: "gray700",
     fontWeight: "fw6",
-    fontSize: "smSb_fontSize",
-    lineHeight: "smSb_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   }), children: [
     /* @__PURE__ */ jsx84(Icon, { icon, color }),
     text
@@ -16025,8 +16057,8 @@ function Banner(props) {
       paddingLeft: "pl2",
       color: "gray900",
       fontWeight: "fw4",
-      fontSize: "md_fontSize",
-      lineHeight: "md_lineHeight",
+      fontSize: "fz_16px",
+      lineHeight: "lh_24px",
       boxShadow: "bshBasic"
     }
   }), ...tid, role: "alert", children: [
@@ -16225,14 +16257,14 @@ function Modal(props) {
   );
   return /* @__PURE__ */ jsx87(ModalProvider, { children: /* @__PURE__ */ jsx87(OverlayContainer2, { children: /* @__PURE__ */ jsx87(AutoSaveStatusProvider, { children: /* @__PURE__ */ jsx87("div", { ...trussProps64({
     position: "fixed",
-    top: "underlay_top",
-    bottom: "underlay_bottom",
-    left: "underlay_left",
-    right: "underlay_right",
+    top: "tp_0",
+    bottom: "bot_0",
+    left: "l_0",
+    right: "r_0",
     display: "df",
     alignItems: "aic",
     justifyContent: "jcc",
-    backgroundColor: "underlay_backgroundColor",
+    backgroundColor: "bgc_rgba_36_36_36_0_6",
     zIndex: "z4"
   }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ jsx87(FocusScope4, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs51("div", { ...trussProps64({
     borderRadius: "br24",
@@ -16269,8 +16301,8 @@ function Modal(props) {
       paddingLeft: "pl3",
       flexShrink: "fs0",
       ...drawHeaderBorder ? {
-        borderBottomStyle: "bb_borderBottomStyle",
-        borderBottomWidth: "bb_borderBottomWidth",
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
         borderColor: "bcGray200"
       } : {}
     }), children: [
@@ -16281,8 +16313,8 @@ function Modal(props) {
       /* @__PURE__ */ jsx87("h1", { ...trussProps64({
         flexGrow: "fg1",
         fontWeight: "fw6",
-        fontSize: "xl2_fontSize",
-        lineHeight: "xl2_lineHeight",
+        fontSize: "fz_30px",
+        lineHeight: "lh_36px",
         color: "gray900"
       }), ref: modalHeaderRef, ...titleProps, ...testId.title })
     ] }),
@@ -16290,8 +16322,8 @@ function Modal(props) {
       flexGrow: "fg1",
       overflowY: "oya",
       ...hasScroll ? {
-        borderBottomStyle: "bb_borderBottomStyle",
-        borderBottomWidth: "bb_borderBottomWidth",
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
         borderColor: "bcGray200"
       } : {},
       ...!!forceScrolling ? {
@@ -16395,8 +16427,8 @@ function SnackbarNotice(props) {
     backgroundColor: "bgGray800",
     borderRadius: "br4",
     fontWeight: "fw4",
-    fontSize: "md_fontSize",
-    lineHeight: "md_lineHeight",
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px",
     display: "df",
     alignItems: "aic",
     maxWidth: "maxw_420px"
@@ -16410,13 +16442,13 @@ function SnackbarNotice(props) {
       {
         ...trussProps65({
           overflow: "oh",
-          display: "lineClamp3_display",
-          WebkitBoxOrient: "lineClamp3_WebkitBoxOrient",
-          textOverflow: "lineClamp3_textOverflow",
-          WebkitLineClamp: "lineClamp3_WebkitLineClamp",
+          display: "d_negwebkit_box",
+          WebkitBoxOrient: "wbo_vertical",
+          textOverflow: "to_ellipsis",
+          WebkitLineClamp: "wlc_3",
           paddingRight: "pr2",
-          marginTop: "my_12px_marginTop",
-          marginBottom: "my_12px_marginBottom",
+          marginTop: "mt_12px",
+          marginBottom: "mb_12px",
           paddingLeft: ["pl_var", {
             "--paddingLeft": `${icon ? 8 : 16}px`
           }]
@@ -16436,8 +16468,8 @@ function SnackbarNotice(props) {
       action && /* @__PURE__ */ jsx88("span", { ...trussProps65({
         textTransform: "ttu",
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         paddingRight: ["pr_var", {
           "--paddingRight": `${!reallyHideClose && action.variant !== "text" ? 4 : 8}px`
         }]
@@ -16644,8 +16676,8 @@ function SuperDrawer() {
             paddingBottom: "pb3",
             paddingRight: "pr3",
             paddingLeft: "pl3",
-            borderBottomStyle: "bb_borderBottomStyle",
-            borderBottomWidth: "bb_borderBottomWidth",
+            borderBottomStyle: "bbs_solid",
+            borderBottomWidth: "bbw_1px",
             borderColor: "bcGray200",
             display: "df",
             alignItems: "aic",
@@ -17062,8 +17094,8 @@ function ListFieldRowInputs({
     }), ...tid, children: [
       /* @__PURE__ */ jsxs56("span", { ...trussProps69({
         fontWeight: "fw6",
-        fontSize: "mdSb_fontSize",
-        lineHeight: "mdSb_lineHeight"
+        fontSize: "fz_16px",
+        lineHeight: "lh_24px"
       }), ...tid.name, children: [
         listFieldConfig.name,
         " ",
@@ -17815,10 +17847,10 @@ function CompoundField({
     alignItems: "aic",
     flexShrink: "fs1",
     maxWidth: "maxw_550px",
-    borderTopStyle: "bt_borderTopStyle",
-    borderTopWidth: "bt_borderTopWidth",
-    borderBottomStyle: "bb_borderBottomStyle",
-    borderBottomWidth: "bb_borderBottomWidth",
+    borderTopStyle: "bts_solid",
+    borderTopWidth: "btw_1px",
+    borderBottomStyle: "bbs_solid",
+    borderBottomWidth: "bbw_1px",
     borderColor: "bcGray300"
   };
   const internalProps = {
@@ -17841,8 +17873,8 @@ function CompoundField({
     /* @__PURE__ */ jsx114("div", { ...trussProps72({
       ...commonStyles,
       ...{
-        borderLeftStyle: "bl_borderLeftStyle",
-        borderLeftWidth: "bl_borderLeftWidth",
+        borderLeftStyle: "bls_solid",
+        borderLeftWidth: "blw_1px",
         borderRadius: "borderRadius_4px_0_0_4px"
       },
       ...hasFocusWithin && {
@@ -17865,8 +17897,8 @@ function CompoundField({
       ...commonStyles,
       ...{
         flexGrow: "fg1",
-        borderRightStyle: "br_borderRightStyle",
-        borderRightWidth: "br_borderRightWidth",
+        borderRightStyle: "brs_solid",
+        borderRightWidth: "brw_1px",
         borderRadius: "borderRadius_0_4px_4px_0"
       },
       ...hasFocusWithin && {
@@ -17919,8 +17951,8 @@ function FormHeading(props) {
     /* @__PURE__ */ jsx116("h3", { ...trussProps73({
       ...{
         fontWeight: "fw4",
-        fontSize: "md_fontSize",
-        lineHeight: "md_lineHeight",
+        fontSize: "fz_16px",
+        lineHeight: "lh_24px",
         ...!isFirst ? {
           marginTop: "mt1"
         } : {}
@@ -17957,15 +17989,15 @@ function StaticField(props) {
     /* @__PURE__ */ jsx117("label", { ...trussProps74({
       display: "db",
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: "gray700",
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
     /* @__PURE__ */ jsx117("div", { id, ...trussProps74({
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: "gray900",
       display: "df",
       alignItems: "aic",
@@ -18178,18 +18210,18 @@ function PageHeaderBreadcrumbs({
       /* @__PURE__ */ jsxs61(Fragment25, { children: [
         index > 0 && !hideDivisor && /* @__PURE__ */ jsx122("span", { ...trussProps76({
           fontWeight: "fw6",
-          fontSize: "smSb_fontSize",
-          lineHeight: "smSb_lineHeight",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
           color: "gray700",
           marginLeft: "ml1",
           marginRight: "mr1",
-          marginTop: "my_2px_marginTop",
-          marginBottom: "my_2px_marginBottom"
+          marginTop: "mt_2px",
+          marginBottom: "mb_2px"
         }), children: "/" }),
         /* @__PURE__ */ jsx122(Link4, { to: bc.href, ...mergeProps20("navLink", void 0, {
           fontWeight: "fw6",
-          fontSize: "smSb_fontSize",
-          lineHeight: "smSb_lineHeight",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
           color: "gray700 h_gray900"
         }), ...tids.navLink, children: bc.label }),
         bc.right
@@ -18316,8 +18348,8 @@ function PageHeader(props) {
         breadCrumb && /* @__PURE__ */ jsx123(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
         /* @__PURE__ */ jsx123("h1", { ...trussProps77({
           fontWeight: "fw6",
-          fontSize: "xl2_fontSize",
-          lineHeight: "xl2_lineHeight"
+          fontSize: "fz_30px",
+          lineHeight: "lh_36px"
         }), ...tids.pageTitle, children: pageTitle })
       ] }),
       /* @__PURE__ */ jsxs62("div", { ...trussProps77({
@@ -18375,8 +18407,8 @@ function FormSections(props) {
           }), children: [
             section.title && /* @__PURE__ */ jsx123("h2", { ...trussProps77({
               fontWeight: "fw6",
-              fontSize: "xl_fontSize",
-              lineHeight: "xl_lineHeight",
+              fontSize: "fz_20px",
+              lineHeight: "lh_28px",
               marginBottom: "mb3"
             }), children: section.title }),
             /* @__PURE__ */ jsx123(BoundForm, { formState, rows: section.rows })
@@ -18412,8 +18444,8 @@ function LeftNav(props) {
 }
 var activeStyles2 = {
   fontWeight: "fw6",
-  fontSize: "smSb_fontSize",
-  lineHeight: "smSb_lineHeight",
+  fontSize: "fz_14px",
+  lineHeight: "lh_20px",
   boxShadow: ["boxShadow_var", {
     "--boxShadow": `inset 3px 0px 0 0px ${"rgba(37, 99, 235, 1)" /* Blue600 */}`
   }]
@@ -18421,8 +18453,8 @@ var activeStyles2 = {
 var hoverStyles2 = {
   backgroundColor: "bgBlue50",
   fontWeight: "fw6",
-  fontSize: "smSb_fontSize",
-  lineHeight: "smSb_lineHeight",
+  fontSize: "fz_14px",
+  lineHeight: "lh_20px",
   color: "blue900",
   boxShadow: ["boxShadow_var", {
     "--boxShadow": `inset 3px 0px 0 0px ${"rgba(30, 58, 138, 1)" /* Blue900 */}`
@@ -18468,8 +18500,8 @@ function SectionNavLink(props) {
   return /* @__PURE__ */ jsx123("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps77({
     ...{
       fontWeight: "fw6",
-      fontSize: "smSb_fontSize",
-      lineHeight: "smSb_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       outline: "outline0",
       borderRadius: "br0",
       display: "dif",
@@ -18678,8 +18710,8 @@ function CountBadge(props) {
       flexShrink: "fs0",
       borderRadius: "br100",
       fontWeight: "fw6",
-      fontSize: "xs2Sb_fontSize",
-      lineHeight: "xs2Sb_lineHeight",
+      fontSize: "fz_10px",
+      lineHeight: "lh_14px",
       display: "df",
       alignItems: "aic",
       justifyContent: "jcc",
@@ -19114,15 +19146,15 @@ function ModalFilterItem({
   return /* @__PURE__ */ jsxs66("div", { ...trussProps80({
     marginBottom: "mb4",
     ...!label ? {
-      borderTopStyle: "bt_borderTopStyle",
-      borderTopWidth: "bt_borderTopWidth",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
       borderColor: "bcGray200"
     } : {}
   }), children: [
     label && /* @__PURE__ */ jsx135("h2", { ...trussProps80({
       fontWeight: "fw4",
-      fontSize: "md_fontSize",
-      lineHeight: "md_lineHeight",
+      fontSize: "fz_16px",
+      lineHeight: "lh_24px",
       marginBottom: "mb2"
     }), children: label }),
     /* @__PURE__ */ jsx135("div", { ...trussProps80({
@@ -19344,11 +19376,11 @@ function Pagination(props) {
   return /* @__PURE__ */ jsxs69("div", { ...trussProps83({
     display: "df",
     borderColor: "bcGray200",
-    borderTopStyle: "bt_borderTopStyle",
-    borderTopWidth: "bt_borderTopWidth",
+    borderTopStyle: "bts_solid",
+    borderTopWidth: "btw_1px",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
     color: "gray500",
     paddingLeft: "pl2",
     paddingRight: "pr2",
@@ -19463,11 +19495,11 @@ function EditColumnsButton(props) {
     options.map((option) => /* @__PURE__ */ jsxs70(Fragment32, { children: [
       /* @__PURE__ */ jsx140("div", { ...trussProps84({
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         whiteSpace: "wsnw",
         overflow: "oh",
-        textOverflow: "truncate_textOverflow",
+        textOverflow: "to_ellipsis",
         paddingRight: "pr1"
       }), children: option.label }),
       /* @__PURE__ */ jsx140(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
@@ -19791,8 +19823,8 @@ function Header2(props) {
       breadcrumb && /* @__PURE__ */ jsx145(PageHeaderBreadcrumbs, { breadcrumb }),
       /* @__PURE__ */ jsx145("h1", { ...trussProps88({
         fontWeight: "fw6",
-        fontSize: "xl2_fontSize",
-        lineHeight: "xl2_lineHeight",
+        fontSize: "fz_30px",
+        lineHeight: "lh_36px",
         marginTop: "mt1"
       }), ...tids.pageTitle, children: pageTitle })
     ] }),
@@ -20183,8 +20215,8 @@ function GroupButton(props) {
     children: /* @__PURE__ */ jsxs77("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps91({
       ...{
         fontWeight: "fw6",
-        fontSize: "buttonBase_fontSize",
-        lineHeight: "buttonBase_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         outline: "outline0",
         borderRadius: "br0",
         display: "dif",
@@ -20267,12 +20299,12 @@ var sizeStyles2 = {
 };
 var iconStyles2 = {
   xs: {
-    paddingLeft: "px_2px_paddingLeft",
-    paddingRight: "px_2px_paddingRight"
+    paddingLeft: "pl_2px",
+    paddingRight: "pr_2px"
   },
   sm: {
-    paddingLeft: "px_4px_paddingLeft",
-    paddingRight: "px_4px_paddingRight"
+    paddingLeft: "pl_4px",
+    paddingRight: "pr_4px"
   },
   md: {
     paddingLeft: "pl1",
@@ -20315,15 +20347,15 @@ function Tag(props) {
       ...{
         display: "dif",
         fontWeight: "fw6",
-        fontSize: "xs2Sb_fontSize",
-        lineHeight: "xs2Sb_lineHeight",
+        fontSize: "fz_10px",
+        lineHeight: "lh_14px",
         textTransform: "ttu",
         alignItems: "aic",
         gap: "gap_4px",
-        paddingLeft: "px_6px_paddingLeft",
-        paddingRight: "px_6px_paddingRight",
-        paddingTop: "py_2px_paddingTop",
-        paddingBottom: "py_2px_paddingBottom",
+        paddingLeft: "pl_6px",
+        paddingRight: "pr_6px",
+        paddingTop: "pt_2px",
+        paddingBottom: "pb_2px",
         color: "gray900",
         borderRadius: "br4"
       },
@@ -20335,10 +20367,10 @@ function Tag(props) {
       }), children: /* @__PURE__ */ jsx152(Icon, { icon: otherProps.icon, inc: 1.5 }) }),
       /* @__PURE__ */ jsx152("span", { ref, ...trussProps92({
         overflow: "oh",
-        display: "lineClamp1_display",
-        WebkitBoxOrient: "lineClamp1_WebkitBoxOrient",
-        textOverflow: "lineClamp1_textOverflow",
-        WebkitLineClamp: "lineClamp1_WebkitLineClamp",
+        display: "d_negwebkit_box",
+        WebkitBoxOrient: "wbo_vertical",
+        textOverflow: "to_ellipsis",
+        WebkitLineClamp: "wlc_1",
         wordBreak: "wbba"
       }), children: text })
     ] })
@@ -20452,14 +20484,14 @@ function Card(props) {
       /* @__PURE__ */ jsxs79("div", { children: [
         /* @__PURE__ */ jsx153("div", { ...trussProps93({
           fontWeight: "fw6",
-          fontSize: "xsSb_fontSize",
-          lineHeight: "xsSb_lineHeight",
+          fontSize: "fz_12px",
+          lineHeight: "lh_16px",
           color: "gray700"
         }), ...tid.subtitle, children: subtitle }),
         /* @__PURE__ */ jsx153("div", { ...trussProps93({
           fontWeight: "fw6",
-          fontSize: "smSb_fontSize",
-          lineHeight: "smSb_lineHeight",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
           color: "gray900",
           ...isHovered ? {
             color: "blue700"
@@ -20520,8 +20552,8 @@ function Copy(props) {
   return /* @__PURE__ */ jsx154("div", { ...mergeProps22("beam-copy", void 0, {
     ...{
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: "gray700",
       marginTop: "mt2",
       marginBottom: "mb3",
@@ -21035,17 +21067,17 @@ function MaxLines({
         WebkitLineClamp: ["lineClamp_var", {
           "--WebkitLineClamp": maxLines
         }],
-        overflow: "lineClamp_overflow",
-        display: "lineClamp_display",
-        WebkitBoxOrient: "lineClamp_WebkitBoxOrient",
-        textOverflow: "lineClamp_textOverflow"
+        overflow: "oh",
+        display: "d_negwebkit_box",
+        WebkitBoxOrient: "wbo_vertical",
+        textOverflow: "to_ellipsis"
       } : {}
     }), children }),
     hasMore && /* @__PURE__ */ jsx160("button", { ...trussProps97({
       display: "db",
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight"
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px"
     }), onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
@@ -21273,9 +21305,9 @@ function Stepper(props) {
     width: "w100"
   }), ...tid, children: [
     /* @__PURE__ */ jsx162("ol", { ...trussProps99({
-      padding: "listReset_padding",
-      margin: "listReset_margin",
-      listStyle: "listReset_listStyle",
+      padding: "p_0",
+      margin: "m_0",
+      listStyle: "lis_none",
       display: "df",
       gap: ["gap_var", {
         "--gap": `${gap}px`
@@ -21349,8 +21381,8 @@ function StepButton(props) {
   return /* @__PURE__ */ jsxs83("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps99({
     ...{
       fontWeight: "fw6",
-      fontSize: "buttonBase_fontSize",
-      lineHeight: "buttonBase_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       outline: "outline0",
       borderRadius: "br8",
       display: "dif",
@@ -21363,8 +21395,8 @@ function StepButton(props) {
       width: "w100",
       height: "h100",
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: "gray700",
       whiteSpace: "whiteSpace_initial",
       ...state === "error" ? {
@@ -21477,8 +21509,8 @@ function SuperDrawerHeader(props) {
       }), children: [
         /* @__PURE__ */ jsx163("h1", { ...trussProps100({
           fontWeight: "fw6",
-          fontSize: "xl2_fontSize",
-          lineHeight: "xl2_lineHeight"
+          fontSize: "fz_30px",
+          lineHeight: "lh_36px"
         }), children: props.title }),
         props.left
       ] }),
@@ -21746,8 +21778,8 @@ var SuperDrawerContent = ({
   return /* @__PURE__ */ jsxs86(Fragment38, { children: [
     wrapWithMotionAndMaybeBack(children),
     actions && /* @__PURE__ */ jsx166("footer", { ...trussProps101({
-      borderTopStyle: "bt_borderTopStyle",
-      borderTopWidth: "bt_borderTopWidth",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
       borderColor: "bcGray200",
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -21869,8 +21901,8 @@ function Tabs(props) {
     },
     ...includeBottomBorder ? {
       ...{
-        borderBottomStyle: "bb_borderBottomStyle",
-        borderBottomWidth: "bb_borderBottomWidth",
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
         borderColor: "bcGray200"
       }
     } : {}
@@ -21970,7 +22002,7 @@ function getTabStyles() {
   const borderBottomWidthPx = 4;
   const verticalPaddingPx = 6;
   const borderBottomStyles = {
-    borderBottomStyle: "bb_borderBottomStyle",
+    borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
       "--borderBottomWidth": `${borderBottomWidthPx}px`
     }],
@@ -21996,15 +22028,15 @@ function getTabStyles() {
       width: "width_fit_content",
       cursor: "cursorPointer",
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight"
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px"
     },
     activeStyles: {
       ...{
         borderColor: "bcBlue700",
         fontWeight: "fw6",
-        fontSize: "smSb_fontSize",
-        lineHeight: "smSb_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         color: "gray900"
       },
       ...borderBottomStyles
@@ -22254,6 +22286,7 @@ export {
   formatValue,
   generateColumnId,
   getAlignment,
+  getColumnBorderCss,
   getDateFormat,
   getFirstOrLastCellCss,
   getJustification,