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

package/dist/index.cjs

@@ -221,6 +221,7 @@ __export(index_exports, {
   formatValue: () => formatValue,
   generateColumnId: () => generateColumnId,
   getAlignment: () => getAlignment,
+  getColumnBorderCss: () => getColumnBorderCss,
   getDateFormat: () => getDateFormat,
   getFirstOrLastCellCss: () => getFirstOrLastCellCss,
   getJustification: () => getJustification,
@@ -3670,9 +3671,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() {
@@ -4085,6 +4086,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;
@@ -4164,6 +4171,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 (0, import_runtime.trussProps)(styles);
@@ -4191,7 +4203,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);
@@ -4578,12 +4590,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
@@ -5157,10 +5169,10 @@ function Chip(props) {
       } }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { ...(0, import_runtime4.trussProps)({
         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 })
     ] })
@@ -5196,8 +5208,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",
@@ -5315,6 +5327,7 @@ var nonKindGridColumnKeys = [
   "serverSideSortKey",
   "clientSideSort",
   "sticky",
+  "border",
   "wrapAction",
   "isAction",
   "id",
@@ -5798,8 +5811,8 @@ function ExpandableHeader(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { ...hoverProps, ...(0, import_runtime8.trussProps)({
     display: "df",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
     alignItems: "aic",
     justifyContent: "jcsb",
     gap: "gap2",
@@ -5848,10 +5861,10 @@ function ExpandableHeader(props) {
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { ...(0, import_runtime8.trussProps)({
         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
     ] }),
@@ -5920,10 +5933,10 @@ function SortHeader(props) {
     iconOnLeft && icon,
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ...(0, import_runtime9.trussProps)({
       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
@@ -5955,7 +5968,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) {
@@ -5966,10 +5979,10 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { ...(0, import_runtime10.trussProps)({
         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
     ] });
@@ -5977,10 +5990,10 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { ...(0, import_runtime10.trussProps)({
         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
     ] });
@@ -5989,7 +6002,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { ...(0, import_runtime10.trussProps)({
         whiteSpace: "wsnw",
         overflow: "oh",
-        textOverflow: "truncate_textOverflow",
+        textOverflow: "to_ellipsis",
         minWidth: "mw0"
       }), title: content, children: content }),
       tooltipEl
@@ -6035,6 +6048,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;
 }
@@ -6339,8 +6365,8 @@ function Header(props) {
   }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { ...(0, import_runtime12.trussProps)({
       fontWeight: "fw4",
-      fontSize: "md_fontSize",
-      lineHeight: "md_lineHeight"
+      fontSize: "fz_16px",
+      lineHeight: "lh_24px"
     }), children: (0, import_date_fns.format)(displayMonth, "MMMM yyyy") }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, -1)) }),
@@ -6371,8 +6397,8 @@ function YearSkipHeader(props) {
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, -1)) }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { ...(0, import_runtime12.trussProps)({
         fontWeight: "fw4",
-        fontSize: "md_fontSize",
-        lineHeight: "md_lineHeight"
+        fontSize: "fz_16px",
+        lineHeight: "lh_24px"
       }), children: (0, import_date_fns.format)(displayMonth, "MMM") }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, 1)) })
     ] }),
@@ -6384,8 +6410,8 @@ function YearSkipHeader(props) {
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addYears)(displayMonth, -1)) }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { ...(0, import_runtime12.trussProps)({
         fontWeight: "fw4",
-        fontSize: "md_fontSize",
-        lineHeight: "md_lineHeight"
+        fontSize: "fz_16px",
+        lineHeight: "lh_24px"
       }), children: (0, import_date_fns.format)(displayMonth, "yyyy") }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth((0, import_date_fns.addYears)(displayMonth, 1)) })
     ] })
@@ -6409,8 +6435,8 @@ function WeekHeader() {
     paddingRight: "pr1",
     paddingLeft: "pl1",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
     color: "gray400"
   }), key: (0, import_date_fns2.format)(day, "EEEE") }, /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { "aria-hidden": "true", children: (0, import_date_fns2.format)(day, "EEEEE") }), /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "rdp-vhidden", children: (0, import_date_fns2.format)(day, "EEEE") }))) }) });
 }
@@ -6431,8 +6457,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__ */ (0, import_jsx_runtime17.jsx)(
     import_react_day_picker3.DayPicker,
     {
@@ -6485,8 +6511,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__ */ (0, import_jsx_runtime19.jsx)(import_react_day_picker4.DayPicker, { mode: "range", selected: range, components: {
     Caption: useYearPicker ? YearSkipHeader : Header,
     Head: WeekHeader,
@@ -6529,8 +6555,8 @@ function MenuSectionImpl(props) {
   const tid = useTestIds(props);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     isPersistentSection && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { ...separatorProps, ...(0, import_runtime17.trussProps)({
-      borderTopStyle: "bt_borderTopStyle",
-      borderTopWidth: "bt_borderTopWidth",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
       borderColor: "bcGray200"
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { ...itemProps, ...(0, import_runtime17.trussProps)({
@@ -6542,9 +6568,9 @@ function MenuSectionImpl(props) {
         color: "white"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { ...(0, import_runtime17.trussProps)({
-      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__ */ (0, import_jsx_runtime20.jsx)(MenuItemImpl, { item, state, onClose, contrast, ...tid }, item.key)) }) })
   ] });
 }
@@ -6572,8 +6598,8 @@ function HelperText(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...(0, import_runtime18.trussProps)({
     color: "gray700",
     fontWeight: "fw4",
-    fontSize: "xs_fontSize",
-    lineHeight: "xs_lineHeight",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
     marginTop: "mt_4px",
     ...contrast ? {
       color: "gray100"
@@ -6604,8 +6630,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`
@@ -6637,8 +6663,8 @@ function InlineLabel({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime19.trussProps)({
     fontWeight: "fw4",
-    fontSize: "sm_fontSize",
-    lineHeight: "sm_lineHeight",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
     whiteSpace: "wsnw",
     color: "color_currentColor",
     paddingRight: "pr_4px",
@@ -7067,58 +7093,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() {
@@ -7143,8 +7169,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",
@@ -7159,13 +7185,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"
             }
           }
@@ -7173,8 +7199,8 @@ function memoizedTableStyles() {
         2: {
           firstContentColumn: {
             fontWeight: "fw4",
-            fontSize: "xs_fontSize",
-            lineHeight: "xs_lineHeight",
+            fontSize: "fz_12px",
+            lineHeight: "lh_16px",
             paddingLeft: "pl3"
           }
         },
@@ -7182,8 +7208,8 @@ function memoizedTableStyles() {
         3: {
           firstContentColumn: {
             fontWeight: "fw4",
-            fontSize: "xs_fontSize",
-            lineHeight: "xs_lineHeight",
+            fontSize: "fz_12px",
+            lineHeight: "lh_16px",
             paddingLeft: "pl_36px"
           }
         }
@@ -7192,8 +7218,8 @@ function memoizedTableStyles() {
         1: {
           firstContentColumn: {
             fontWeight: "fw4",
-            fontSize: "xs_fontSize",
-            lineHeight: "xs_lineHeight",
+            fontSize: "fz_12px",
+            lineHeight: "lh_16px",
             paddingLeft: "pl3"
           }
         }
@@ -7210,10 +7236,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"
           }
         },
@@ -7225,12 +7251,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"
           },
@@ -7242,28 +7268,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", {
@@ -7285,15 +7311,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", {
@@ -7305,18 +7331,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: {
@@ -7329,8 +7358,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"
@@ -7354,8 +7383,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"
         },
@@ -7385,8 +7414,8 @@ var condensedStyle = {
     }).firstRowMessageCss,
     ...{
       fontWeight: "fw4",
-      fontSize: "xs_fontSize",
-      lineHeight: "xs_lineHeight",
+      fontSize: "fz_12px",
+      lineHeight: "lh_16px",
       color: "gray900"
     }
   }
@@ -7405,10 +7434,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"
@@ -7432,8 +7461,8 @@ var cardStyle = {
       marginRight: "mr0",
       marginLeft: "ml0",
       fontWeight: "fw6",
-      fontSize: "xsSb_fontSize",
-      lineHeight: "xsSb_lineHeight",
+      fontSize: "fz_12px",
+      lineHeight: "lh_16px",
       color: "gray700"
     }
   },
@@ -7842,58 +7871,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) {
@@ -8124,6 +8153,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.
@@ -8225,8 +8256,8 @@ function ErrorMessage(props) {
   const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ...(0, import_runtime25.trussProps)({
     color: "red600",
     fontWeight: "fw4",
-    fontSize: "sm_fontSize",
-    lineHeight: "sm_lineHeight",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
     display: "df",
     marginTop: "mt_4px",
     ...contrast ? {
@@ -8258,58 +8289,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) {
@@ -8363,7 +8394,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] = (0, import_react26.useState)(false);
   const {
@@ -8538,7 +8568,7 @@ function TextFieldBase(props) {
       } : {
         whiteSpace: "wsnw",
         overflow: "oh",
-        textOverflow: "truncate_textOverflow"
+        textOverflow: "to_ellipsis"
       }
     },
     hover: {
@@ -8598,6 +8628,38 @@ function TextFieldBase(props) {
   }
   const showFocus = isFocused && !inputProps.readOnly || forceFocus;
   const showHover = isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused || forceHover;
+  const fieldElementProps = (0, import_react_aria8.mergeProps)(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__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...(0, import_runtime26.trussProps)(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
       label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, contrast, ...tid.label }),
@@ -8615,7 +8677,7 @@ function TextFieldBase(props) {
             ...wrap === false ? {
               whiteSpace: "wsnw",
               overflow: "oh",
-              textOverflow: "truncate_textOverflow"
+              textOverflow: "to_ellipsis"
             } : {}
           },
           ...xss
@@ -8680,13 +8742,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"
                     }
@@ -8694,36 +8756,7 @@ function TextFieldBase(props) {
                   children: unfocusedPlaceholder
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ElementType, { ...(0, import_react_aria8.mergeProps)(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, ...(0, import_runtime26.trussProps)({
-                ...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__ */ (0, import_jsx_runtime29.jsx)("textarea", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, rows: 1, ...(0, import_runtime26.trussProps)(fieldElementCss), ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, ...(0, import_runtime26.trussProps)(fieldElementCss), ...tid }),
               isFocused && clearable && onChange && inputProps.value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { icon: "xCircle", color: "rgba(100, 100, 100, 1)" /* Gray700 */, onClick: () => {
                 onChange(void 0);
                 fieldRef.current?.focus();
@@ -8885,8 +8918,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",
@@ -8905,9 +8938,9 @@ function Menu(props) {
   }), children: [
     searchable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { ...(0, import_runtime27.trussProps)({
-      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__ */ (0, import_jsx_runtime31.jsx)(MenuSectionImpl, { section: item, state, onClose, contrast, ...tid }, item.key)) })
   ] }) });
 }
@@ -8925,58 +8958,58 @@ var import_jsx_runtime32 = require("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({
@@ -9261,8 +9294,8 @@ function Button(props) {
     ...(0, import_runtime30.mergeProps)(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",
@@ -9634,8 +9667,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",
@@ -9745,14 +9778,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) => ({
@@ -9932,8 +9965,8 @@ function ContextualModal(props) {
   }), ...tid, children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ...(0, import_runtime33.trussProps)({
       fontWeight: "fw6",
-      fontSize: "lg_fontSize",
-      lineHeight: "lg_lineHeight",
+      fontSize: "fz_18px",
+      lineHeight: "lh_28px",
       textAlign: "tac"
     }), ...tid.title, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ...tid.content, children: typeof content === "function" ? content(close) : content })
@@ -9970,8 +10003,8 @@ function AvatarGroup(props) {
     alignItems: "aic",
     gap: "gap1",
     fontWeight: "fw6",
-    fontSize: "xsSb_fontSize",
-    lineHeight: "xsSb_lineHeight"
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
   }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...(0, import_runtime34.trussProps)({
       display: "df",
@@ -10076,12 +10109,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 ? {
@@ -10394,7 +10427,7 @@ function ListBoxChip({
     ...{
       whiteSpace: "wsnw",
       overflow: "oh",
-      textOverflow: "truncate_textOverflow",
+      textOverflow: "to_ellipsis",
       display: "dib"
     }
   }), title: label, children: label });
@@ -10480,8 +10513,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"
     }
@@ -10650,10 +10683,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",
@@ -10663,10 +10696,10 @@ function ChipSelectField(props) {
           ...isDisabled ? chipDisabledStyles : chipHoverOnlyStyles
         }), title: state.selectedItem ? state.selectedItem.textValue : placeholder, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { ...valueProps, ...(0, import_runtime38.trussProps)({
           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__ */ (0, import_jsx_runtime44.jsx)("button", { ...clearFocusProps, ...(0, import_runtime38.trussProps)({
@@ -10782,13 +10815,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,
@@ -10980,13 +11013,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) {
@@ -11091,8 +11124,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 : {},
@@ -11282,8 +11315,8 @@ function ListBoxSection(props) {
   const childNodes = [...section.childNodes];
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
     isPersistentSection && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { ...separatorProps, ...(0, import_runtime43.trussProps)({
-      borderTopStyle: "bt_borderTopStyle",
-      borderTopWidth: "bt_borderTopWidth",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
       borderColor: "bcGray200"
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { ...itemProps, ...(0, import_runtime43.trussProps)({
@@ -11291,9 +11324,9 @@ function ListBoxSection(props) {
         overflow: "oa"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { ...(0, import_runtime43.trussProps)({
-      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`
@@ -11389,25 +11422,25 @@ function ListBox(props) {
     } : {}
   }), ref: listBoxRef, ...listBoxProps, children: [
     isMultiSelect && !isTree && state.selectionManager.selectedKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { ...(0, import_runtime45.trussProps)({
-      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__ */ (0, import_jsx_runtime52.jsx)(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { ...(0, import_runtime45.trussProps)({
-      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__ */ (0, import_jsx_runtime52.jsx)(
       ListBoxSection,
@@ -12931,8 +12964,8 @@ function IconCard(props) {
       /* @__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", { ...(0, import_runtime51.trussProps)({
         fontWeight: "fw4",
-        fontSize: "xs_fontSize",
-        lineHeight: "xs_lineHeight",
+        fontSize: "fz_12px",
+        lineHeight: "lh_16px",
         ...isDisabled ? {
           color: "gray300"
         } : {}
@@ -13014,7 +13047,7 @@ function MultiLineSelectField(props) {
         }), key: index }, /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ...(0, import_runtime52.trussProps)({
           whiteSpace: "wsnw",
           overflow: "oh",
-          textOverflow: "truncate_textOverflow",
+          textOverflow: "to_ellipsis",
           width: "w100"
         }), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SelectField, { ...otherProps, ...tid.selectField, labelStyle: "hidden", value, onSelect: () => {
         }, options, getOptionValue, getOptionLabel, compact: true, readOnly: true }) }), /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Button, { ...tid.deleteSelected, variant: "tertiary", label: "", "aria-label": `Delete selected ${otherProps.label}`, icon: "x", onClick: () => {
@@ -13367,8 +13400,8 @@ function Radio(props) {
     /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { id: labelId, ...(0, import_runtime53.trussProps)({
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         color: "gray800",
         ...disabled ? {
           color: "gray400"
@@ -13378,8 +13411,8 @@ function Radio(props) {
       } : {}, children: label }),
       description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { id: descriptionId, ...(0, import_runtime53.trussProps)({
         fontWeight: "fw4",
-        fontSize: "sm_fontSize",
-        lineHeight: "sm_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         color: "gray700",
         ...disabled ? {
           color: "gray400"
@@ -13633,8 +13666,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",
@@ -13787,8 +13820,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",
@@ -13841,8 +13874,8 @@ function Switch(props) {
     }), children: withIcon && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(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__ */ (0, import_jsx_runtime72.jsx)(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"
@@ -14098,8 +14131,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,
@@ -14256,13 +14289,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 ? {
@@ -16064,10 +16097,10 @@ function ToggleChip(props) {
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { ...(0, import_runtime60.trussProps)({
       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"
@@ -16184,20 +16217,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",
@@ -16223,12 +16256,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 ? {
@@ -16253,8 +16286,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__ */ (0, import_jsx_runtime82.jsx)(RotatingChevronIcon, { expanded }) })
@@ -16393,8 +16426,8 @@ function Indicator({
     alignItems: "aic",
     color: "gray700",
     fontWeight: "fw6",
-    fontSize: "smSb_fontSize",
-    lineHeight: "smSb_lineHeight"
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
   }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Icon, { icon, color }),
     text
@@ -16426,8 +16459,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: [
@@ -16626,14 +16659,14 @@ function Modal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria41.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime65.trussProps)({
     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__ */ (0, import_jsx_runtime87.jsx)(import_react_aria41.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ...(0, import_runtime65.trussProps)({
     borderRadius: "br24",
@@ -16670,8 +16703,8 @@ function Modal(props) {
       paddingLeft: "pl3",
       flexShrink: "fs0",
       ...drawHeaderBorder ? {
-        borderBottomStyle: "bb_borderBottomStyle",
-        borderBottomWidth: "bb_borderBottomWidth",
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
         borderColor: "bcGray200"
       } : {}
     }), children: [
@@ -16682,8 +16715,8 @@ function Modal(props) {
       /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h1", { ...(0, import_runtime65.trussProps)({
         flexGrow: "fg1",
         fontWeight: "fw6",
-        fontSize: "xl2_fontSize",
-        lineHeight: "xl2_lineHeight",
+        fontSize: "fz_30px",
+        lineHeight: "lh_36px",
         color: "gray900"
       }), ref: modalHeaderRef, ...titleProps, ...testId.title })
     ] }),
@@ -16691,8 +16724,8 @@ function Modal(props) {
       flexGrow: "fg1",
       overflowY: "oya",
       ...hasScroll ? {
-        borderBottomStyle: "bb_borderBottomStyle",
-        borderBottomWidth: "bb_borderBottomWidth",
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
         borderColor: "bcGray200"
       } : {},
       ...!!forceScrolling ? {
@@ -16796,8 +16829,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"
@@ -16811,13 +16844,13 @@ function SnackbarNotice(props) {
       {
         ...(0, import_runtime66.trussProps)({
           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`
           }]
@@ -16837,8 +16870,8 @@ function SnackbarNotice(props) {
       action && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { ...(0, import_runtime66.trussProps)({
         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`
         }]
@@ -17045,8 +17078,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",
@@ -17463,8 +17496,8 @@ function ListFieldRowInputs({
     }), ...tid, children: [
       /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { ...(0, import_runtime70.trussProps)({
         fontWeight: "fw6",
-        fontSize: "mdSb_fontSize",
-        lineHeight: "mdSb_lineHeight"
+        fontSize: "fz_16px",
+        lineHeight: "lh_24px"
       }), ...tid.name, children: [
         listFieldConfig.name,
         " ",
@@ -18216,10 +18249,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 = {
@@ -18242,8 +18275,8 @@ function CompoundField({
     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { ...(0, import_runtime73.trussProps)({
       ...commonStyles,
       ...{
-        borderLeftStyle: "bl_borderLeftStyle",
-        borderLeftWidth: "bl_borderLeftWidth",
+        borderLeftStyle: "bls_solid",
+        borderLeftWidth: "blw_1px",
         borderRadius: "borderRadius_4px_0_0_4px"
       },
       ...hasFocusWithin && {
@@ -18266,8 +18299,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 && {
@@ -18321,8 +18354,8 @@ function FormHeading(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("h3", { ...(0, import_runtime74.trussProps)({
     ...{
       fontWeight: "fw4",
-      fontSize: "md_fontSize",
-      lineHeight: "md_lineHeight",
+      fontSize: "fz_16px",
+      lineHeight: "lh_24px",
       ...!isFirst ? {
         marginTop: "mt1"
       } : {}
@@ -18358,15 +18391,15 @@ function StaticField(props) {
     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("label", { ...(0, import_runtime75.trussProps)({
       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__ */ (0, import_jsx_runtime117.jsx)("div", { id, ...(0, import_runtime75.trussProps)({
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: "gray900",
       display: "df",
       alignItems: "aic",
@@ -18580,18 +18613,18 @@ function PageHeaderBreadcrumbs({
     return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_react90.Fragment, { children: [
       index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { ...(0, import_runtime77.trussProps)({
         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__ */ (0, import_jsx_runtime122.jsx)(import_react_router_dom4.Link, { to: bc.href, ...(0, import_runtime77.mergeProps)("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
@@ -18717,8 +18750,8 @@ function PageHeader(props) {
         breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
         /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h1", { ...(0, import_runtime78.trussProps)({
           fontWeight: "fw6",
-          fontSize: "xl2_fontSize",
-          lineHeight: "xl2_lineHeight"
+          fontSize: "fz_30px",
+          lineHeight: "lh_36px"
         }), ...tids.pageTitle, children: pageTitle })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { ...(0, import_runtime78.trussProps)({
@@ -18776,8 +18809,8 @@ function FormSections(props) {
           }), children: [
             section.title && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h2", { ...(0, import_runtime78.trussProps)({
               fontWeight: "fw6",
-              fontSize: "xl_fontSize",
-              lineHeight: "xl_lineHeight",
+              fontSize: "fz_20px",
+              lineHeight: "lh_28px",
               marginBottom: "mb3"
             }), children: section.title }),
             /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(BoundForm, { formState, rows: section.rows })
@@ -18813,8 +18846,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 */}`
   }]
@@ -18822,8 +18855,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 */}`
@@ -18869,8 +18902,8 @@ function SectionNavLink(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime78.trussProps)({
     ...{
       fontWeight: "fw6",
-      fontSize: "smSb_fontSize",
-      lineHeight: "smSb_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       outline: "outline0",
       borderRadius: "br0",
       display: "dif",
@@ -19079,8 +19112,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",
@@ -19515,15 +19548,15 @@ function ModalFilterItem({
   return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { ...(0, import_runtime82.trussProps)({
     marginBottom: "mb4",
     ...!label ? {
-      borderTopStyle: "bt_borderTopStyle",
-      borderTopWidth: "bt_borderTopWidth",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
       borderColor: "bcGray200"
     } : {}
   }), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("h2", { ...(0, import_runtime82.trussProps)({
       fontWeight: "fw4",
-      fontSize: "md_fontSize",
-      lineHeight: "md_lineHeight",
+      fontSize: "fz_16px",
+      lineHeight: "lh_24px",
       marginBottom: "mb2"
     }), children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime82.trussProps)({
@@ -19745,11 +19778,11 @@ function Pagination(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { ...(0, import_runtime85.trussProps)({
     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",
@@ -19864,11 +19897,11 @@ function EditColumnsButton(props) {
     options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_react98.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { ...(0, import_runtime86.trussProps)({
         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__ */ (0, import_jsx_runtime140.jsx)(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}`] })
@@ -20192,8 +20225,8 @@ function Header2(props) {
       breadcrumb && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(PageHeaderBreadcrumbs, { breadcrumb }),
       /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("h1", { ...(0, import_runtime90.trussProps)({
         fontWeight: "fw6",
-        fontSize: "xl2_fontSize",
-        lineHeight: "xl2_lineHeight",
+        fontSize: "fz_30px",
+        lineHeight: "lh_36px",
         marginTop: "mt1"
       }), ...tids.pageTitle, children: pageTitle })
     ] }),
@@ -20584,8 +20617,8 @@ function GroupButton(props) {
     children: /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime93.trussProps)({
       ...{
         fontWeight: "fw6",
-        fontSize: "buttonBase_fontSize",
-        lineHeight: "buttonBase_lineHeight",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         outline: "outline0",
         borderRadius: "br0",
         display: "dif",
@@ -20668,12 +20701,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",
@@ -20716,15 +20749,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"
       },
@@ -20736,10 +20769,10 @@ function Tag(props) {
       }), children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Icon, { icon: otherProps.icon, inc: 1.5 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { ref, ...(0, import_runtime94.trussProps)({
         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 })
     ] })
@@ -20853,14 +20886,14 @@ function Card(props) {
       /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime95.trussProps)({
           fontWeight: "fw6",
-          fontSize: "xsSb_fontSize",
-          lineHeight: "xsSb_lineHeight",
+          fontSize: "fz_12px",
+          lineHeight: "lh_16px",
           color: "gray700"
         }), ...tid.subtitle, children: subtitle }),
         /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime95.trussProps)({
           fontWeight: "fw6",
-          fontSize: "smSb_fontSize",
-          lineHeight: "smSb_lineHeight",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
           color: "gray900",
           ...isHovered ? {
             color: "blue700"
@@ -20921,8 +20954,8 @@ function Copy(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { ...(0, import_runtime96.mergeProps)("beam-copy", void 0, {
     ...{
       fontWeight: "fw4",
-      fontSize: "sm_fontSize",
-      lineHeight: "sm_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: "gray700",
       marginTop: "mt2",
       marginBottom: "mb3",
@@ -21436,17 +21469,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__ */ (0, import_jsx_runtime160.jsx)("button", { ...(0, import_runtime100.trussProps)({
       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" })
   ] });
 }
@@ -21674,9 +21707,9 @@ function Stepper(props) {
     width: "w100"
   }), ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("ol", { ...(0, import_runtime102.trussProps)({
-      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`
@@ -21750,8 +21783,8 @@ function StepButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime102.trussProps)({
     ...{
       fontWeight: "fw6",
-      fontSize: "buttonBase_fontSize",
-      lineHeight: "buttonBase_lineHeight",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       outline: "outline0",
       borderRadius: "br8",
       display: "dif",
@@ -21764,8 +21797,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" ? {
@@ -21878,8 +21911,8 @@ function SuperDrawerHeader(props) {
       }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("h1", { ...(0, import_runtime103.trussProps)({
           fontWeight: "fw6",
-          fontSize: "xl2_fontSize",
-          lineHeight: "xl2_lineHeight"
+          fontSize: "fz_30px",
+          lineHeight: "lh_36px"
         }), children: props.title }),
         props.left
       ] }),
@@ -22147,8 +22180,8 @@ var SuperDrawerContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(import_jsx_runtime166.Fragment, { children: [
     wrapWithMotionAndMaybeBack(children),
     actions && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("footer", { ...(0, import_runtime104.trussProps)({
-      borderTopStyle: "bt_borderTopStyle",
-      borderTopWidth: "bt_borderTopWidth",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
       borderColor: "bcGray200",
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -22270,8 +22303,8 @@ function Tabs(props) {
     },
     ...includeBottomBorder ? {
       ...{
-        borderBottomStyle: "bb_borderBottomStyle",
-        borderBottomWidth: "bb_borderBottomWidth",
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
         borderColor: "bcGray200"
       }
     } : {}
@@ -22371,7 +22404,7 @@ function getTabStyles() {
   const borderBottomWidthPx = 4;
   const verticalPaddingPx = 6;
   const borderBottomStyles = {
-    borderBottomStyle: "bb_borderBottomStyle",
+    borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
       "--borderBottomWidth": `${borderBottomWidthPx}px`
     }],
@@ -22397,15 +22430,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
@@ -22656,6 +22689,7 @@ function useToast() {
   formatValue,
   generateColumnId,
   getAlignment,
+  getColumnBorderCss,
   getDateFormat,
   getFirstOrLastCellCss,
   getJustification,