@homebound/beam 2.181.2 → 2.183.0

package/dist/Css.d.ts

@@ -2,7 +2,7 @@ import { Properties as Properties1 } from "csstype";
 /** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
 export declare type Only<X, T> = X & Record<Exclude<keyof T, keyof X>, never>;
 export declare type Properties = Properties1;
-export declare type Typography = "tiny" | "tinyEm" | "xs" | "xsEm" | "sm" | "smEm" | "base" | "baseEm" | "lg" | "lgEm" | "xl" | "xlEm" | "xl2" | "xl2Em" | "xl3" | "xl3Em" | "xl4" | "xl4Em" | "xl5" | "xl5Em";
+export declare type Typography = "tiny" | "tinyMd" | "tinySb" | "tinyBd" | "xs" | "xsMd" | "xsSb" | "xsBd" | "sm" | "smMd" | "smSb" | "smBd" | "base" | "baseMd" | "baseSb" | "baseBd" | "lg" | "lgMd" | "lgSb" | "lgBd" | "xl" | "xlMd" | "xlSb" | "xlBd" | "xl2" | "xl2Md" | "xl2Sb" | "xl2Bd" | "xl3" | "xl3Md" | "xl3Sb" | "xl3Bd" | "xl4" | "xl4Md" | "xl4Sb" | "xl4Bd" | "xl5" | "xl5Md" | "xl5Sb" | "xl5Bd";
 declare type Opts<T> = {
     rules: T;
     enabled: boolean;
@@ -2389,7 +2389,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get tinyEm(): CssBuilder<T & {
+    get tinyMd(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get tinySb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get tinyBd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2403,7 +2417,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get xsEm(): CssBuilder<T & {
+    get xsMd(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xsSb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xsBd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2417,7 +2445,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get smEm(): CssBuilder<T & {
+    get smMd(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get smSb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get smBd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2431,7 +2473,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get baseEm(): CssBuilder<T & {
+    get baseMd(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get baseSb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get baseBd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2445,7 +2501,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get lgEm(): CssBuilder<T & {
+    get lgMd(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get lgSb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get lgBd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2459,7 +2529,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get xlEm(): CssBuilder<T & {
+    get xlMd(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xlSb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xlBd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2473,7 +2557,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get xl2Em(): CssBuilder<T & {
+    get xl2Md(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xl2Sb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xl2Bd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2487,7 +2585,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get xl3Em(): CssBuilder<T & {
+    get xl3Md(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xl3Sb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xl3Bd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2501,7 +2613,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get xl4Em(): CssBuilder<T & {
+    get xl4Md(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xl4Sb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xl4Bd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2515,7 +2641,21 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
     }>;
-    get xl5Em(): CssBuilder<T & {
+    get xl5Md(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xl5Sb(): CssBuilder<T & {
+        fontWeight: import("csstype").Property.FontWeight | undefined;
+    } & {
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
+    get xl5Bd(): CssBuilder<T & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
@@ -2943,9 +3083,17 @@ export declare type Xss<P extends keyof Properties> = Pick<Properties, P>;
 export declare const Css: CssBuilder<{}>;
 export declare type Margin = "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft";
 export declare type Padding = "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft";
+export declare type Font = "fontSize" | "fontWeight" | "lineHeight";
 declare type Brand<K, T> = K & {
     __brand: T;
 };
 declare type Breakpoint = Brand<string, "Breakpoint">;
 export declare const print: Breakpoint;
+export declare const sm: Breakpoint;
+export declare const md: Breakpoint;
+export declare const smOrMd: Breakpoint;
+export declare const mdAndUp: Breakpoint;
+export declare const mdAndDown: Breakpoint;
+export declare const lg: Breakpoint;
+export declare const mdOrLg: Breakpoint;
 export {};

package/dist/Css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.print = exports.Css = exports.Palette = exports.px = exports.increment = exports.maybeInc = void 0;
+exports.mdOrLg = exports.lg = exports.mdAndDown = exports.mdAndUp = exports.smOrMd = exports.md = exports.sm = exports.print = exports.Css = exports.Palette = exports.px = exports.increment = exports.maybeInc = void 0;
 // prettier-ignore
 class CssBuilder {
     constructor(opts) {
@@ -735,25 +735,45 @@ class CssBuilder {
     tt(value) { return this.add("textTransform", value); }
     // typeScale
     get tiny() { return this.add("fontWeight", 400).add("fontSize", "10px").add("lineHeight", "14px"); }
-    get tinyEm() { return this.add("fontWeight", 600).add("fontSize", "10px").add("lineHeight", "14px"); }
+    get tinyMd() { return this.add("fontWeight", 500).add("fontSize", "10px").add("lineHeight", "14px"); }
+    get tinySb() { return this.add("fontWeight", 600).add("fontSize", "10px").add("lineHeight", "14px"); }
+    get tinyBd() { return this.add("fontWeight", 700).add("fontSize", "10px").add("lineHeight", "14px"); }
     get xs() { return this.add("fontWeight", 400).add("fontSize", "12px").add("lineHeight", "16px"); }
-    get xsEm() { return this.add("fontWeight", 500).add("fontSize", "12px").add("lineHeight", "16px"); }
+    get xsMd() { return this.add("fontWeight", 500).add("fontSize", "12px").add("lineHeight", "16px"); }
+    get xsSb() { return this.add("fontWeight", 600).add("fontSize", "12px").add("lineHeight", "16px"); }
+    get xsBd() { return this.add("fontWeight", 700).add("fontSize", "12px").add("lineHeight", "16px"); }
     get sm() { return this.add("fontWeight", 400).add("fontSize", "14px").add("lineHeight", "20px"); }
-    get smEm() { return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px"); }
+    get smMd() { return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px"); }
+    get smSb() { return this.add("fontWeight", 600).add("fontSize", "14px").add("lineHeight", "20px"); }
+    get smBd() { return this.add("fontWeight", 700).add("fontSize", "14px").add("lineHeight", "20px"); }
     get base() { return this.add("fontWeight", 400).add("fontSize", "16px").add("lineHeight", "24px"); }
-    get baseEm() { return this.add("fontWeight", 500).add("fontSize", "16px").add("lineHeight", "24px"); }
+    get baseMd() { return this.add("fontWeight", 500).add("fontSize", "16px").add("lineHeight", "24px"); }
+    get baseSb() { return this.add("fontWeight", 600).add("fontSize", "16px").add("lineHeight", "24px"); }
+    get baseBd() { return this.add("fontWeight", 700).add("fontSize", "16px").add("lineHeight", "24px"); }
     get lg() { return this.add("fontWeight", 400).add("fontSize", "18px").add("lineHeight", "28px"); }
-    get lgEm() { return this.add("fontWeight", 600).add("fontSize", "18px").add("lineHeight", "28px"); }
+    get lgMd() { return this.add("fontWeight", 500).add("fontSize", "18px").add("lineHeight", "28px"); }
+    get lgSb() { return this.add("fontWeight", 600).add("fontSize", "18px").add("lineHeight", "28px"); }
+    get lgBd() { return this.add("fontWeight", 700).add("fontSize", "18px").add("lineHeight", "28px"); }
     get xl() { return this.add("fontWeight", 400).add("fontSize", "20px").add("lineHeight", "28px"); }
-    get xlEm() { return this.add("fontWeight", 600).add("fontSize", "20px").add("lineHeight", "28px"); }
+    get xlMd() { return this.add("fontWeight", 500).add("fontSize", "20px").add("lineHeight", "28px"); }
+    get xlSb() { return this.add("fontWeight", 600).add("fontSize", "20px").add("lineHeight", "28px"); }
+    get xlBd() { return this.add("fontWeight", 700).add("fontSize", "20px").add("lineHeight", "28px"); }
     get xl2() { return this.add("fontWeight", 400).add("fontSize", "24px").add("lineHeight", "32px"); }
-    get xl2Em() { return this.add("fontWeight", 600).add("fontSize", "24px").add("lineHeight", "32px"); }
+    get xl2Md() { return this.add("fontWeight", 500).add("fontSize", "24px").add("lineHeight", "32px"); }
+    get xl2Sb() { return this.add("fontWeight", 600).add("fontSize", "24px").add("lineHeight", "32px"); }
+    get xl2Bd() { return this.add("fontWeight", 700).add("fontSize", "24px").add("lineHeight", "32px"); }
     get xl3() { return this.add("fontWeight", 400).add("fontSize", "30px").add("lineHeight", "36px"); }
-    get xl3Em() { return this.add("fontWeight", 600).add("fontSize", "30px").add("lineHeight", "36px"); }
+    get xl3Md() { return this.add("fontWeight", 500).add("fontSize", "30px").add("lineHeight", "36px"); }
+    get xl3Sb() { return this.add("fontWeight", 600).add("fontSize", "30px").add("lineHeight", "36px"); }
+    get xl3Bd() { return this.add("fontWeight", 700).add("fontSize", "30px").add("lineHeight", "36px"); }
     get xl4() { return this.add("fontWeight", 400).add("fontSize", "36px").add("lineHeight", "40px"); }
-    get xl4Em() { return this.add("fontWeight", 600).add("fontSize", "36px").add("lineHeight", "40px"); }
+    get xl4Md() { return this.add("fontWeight", 500).add("fontSize", "36px").add("lineHeight", "40px"); }
+    get xl4Sb() { return this.add("fontWeight", 600).add("fontSize", "36px").add("lineHeight", "40px"); }
+    get xl4Bd() { return this.add("fontWeight", 700).add("fontSize", "36px").add("lineHeight", "40px"); }
     get xl5() { return this.add("fontWeight", 400).add("fontSize", "48px").add("lineHeight", "48px"); }
-    get xl5Em() { return this.add("fontWeight", 600).add("fontSize", "48px").add("lineHeight", "48px"); }
+    get xl5Md() { return this.add("fontWeight", 500).add("fontSize", "48px").add("lineHeight", "48px"); }
+    get xl5Sb() { return this.add("fontWeight", 600).add("fontSize", "48px").add("lineHeight", "48px"); }
+    get xl5Bd() { return this.add("fontWeight", 700).add("fontSize", "48px").add("lineHeight", "48px"); }
     // typography
     get measure() { return this.add("maxWidth", "30em"); }
     get measureWide() { return this.add("maxWidth", "34em"); }
@@ -995,3 +1015,10 @@ var Palette;
 /** An entry point for Css expressions. CssBuilder is immutable so this is safe to share. */
 exports.Css = new CssBuilder({ rules: {}, enabled: true, important: false, selector: undefined });
 exports.print = "@media print";
+exports.sm = "@media screen and (max-width:599px)";
+exports.md = "@media screen and (min-width:600px) and (max-width:959px)";
+exports.smOrMd = "@media screen and (max-width:959px)";
+exports.mdAndUp = "@media screen and (min-width:600px)";
+exports.mdAndDown = "@media screen and (max-width:959px)";
+exports.lg = "@media screen and (min-width:960px)";
+exports.mdOrLg = "@media screen and (min-width:600px)";

package/dist/components/Accordion.js

@@ -5,21 +5,25 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const index_1 = require("../index");
+const Icon_1 = require("./Icon");
+const Css_1 = require("../Css");
+const utils_2 = require("../utils");
 function Accordion(props) {
     const { title, children, size, disabled = false, defaultExpanded = false, topBorder = true, bottomBorder = false, index, setExpandedIndex, } = props;
-    const testIds = (0, index_1.useTestIds)(props, "accordion");
+    const testIds = (0, utils_2.useTestIds)(props, "accordion");
     const id = (0, utils_1.useId)();
     const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
-    (0, react_1.useEffect)(() => { setExpanded(defaultExpanded); }, [defaultExpanded]);
+    (0, react_1.useEffect)(() => {
+        setExpanded(defaultExpanded);
+    }, [defaultExpanded]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, testIds.container, { css: {
-            ...index_1.Css.bGray400.if(topBorder).bt.if(bottomBorder).bb.$,
-            ...(size ? index_1.Css.wPx(accordionSizes[size]).$ : {}),
+            ...Css_1.Css.bGray400.if(topBorder).bt.if(bottomBorder).bb.$,
+            ...(size ? Css_1.Css.wPx(accordionSizes[size]).$ : {}),
         } }, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({}, testIds.title, focusProps, { "aria-controls": id, "aria-expanded": expanded, disabled: disabled, css: {
-                    ...index_1.Css.df.jcsb.gap2.aic.w100.p2.baseEm.outline("none").addIn(":hover", index_1.Css.bgGray100.$).$,
-                    ...(disabled && index_1.Css.gray500.$),
-                    ...(isFocusVisible && index_1.Css.boxShadow(`inset 0 0 0 2px ${index_1.Palette.LightBlue700}`).$),
+                    ...Css_1.Css.df.jcsb.gap2.aic.w100.p2.baseMd.outline("none").addIn(":hover", Css_1.Css.bgGray100.$).$,
+                    ...(disabled && Css_1.Css.gray500.$),
+                    ...(isFocusVisible && Css_1.Css.boxShadow(`inset 0 0 0 2px ${Css_1.Palette.LightBlue700}`).$),
                 }, onClick: () => {
                     setExpanded(!expanded);
                     if (setExpandedIndex)
@@ -27,11 +31,13 @@ function Accordion(props) {
                 } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: title }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
                             transition: "transform 250ms linear",
                             transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                        } }, { children: (0, jsx_runtime_1.jsx)(index_1.Icon, { icon: "chevronDown" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, testIds.details, { id: id, "aria-hidden": !expanded, css: {
+                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "chevronDown" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, testIds.details, { id: id, "aria-hidden": !expanded, css: {
                     // Use max-height for grow/shrink animation (remove close animation for AccordionList to avoid delays)
-                    ...index_1.Css.overflowHidden.maxhPx(1000).add("transition", `max-height ${expanded || !index ? "250ms" : "0"} ease-in-out`).$,
-                    ...(!expanded || disabled ? index_1.Css.maxh0.$ : {}),
-                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: index_1.Css.px2.pb2.pt1.$ }, { children: children }), void 0) }), void 0)] }), void 0));
+                    ...Css_1.Css.overflowHidden
+                        .maxhPx(1000)
+                        .add("transition", `max-height ${expanded || !index ? "250ms" : "0"} ease-in-out`).$,
+                    ...(!expanded || disabled ? Css_1.Css.maxh0.$ : {}),
+                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.px2.pb2.pt1.$ }, { children: children }), void 0) }), void 0)] }), void 0));
 }
 exports.Accordion = Accordion;
 const accordionSizes = {

package/dist/components/AutoSaveIndicator.js

@@ -40,5 +40,5 @@ function AutoSaveIndicator({ hideOnIdle, doNotReset }) {
 }
 exports.AutoSaveIndicator = AutoSaveIndicator;
 function Indicator({ text, icon, color }) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": "autoSave", css: Css_1.Css.df.gap1.aic.gray700.smEm.$ }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, color: color }, void 0), text] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": "autoSave", css: Css_1.Css.df.gap1.aic.gray700.smMd.$ }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, color: color }, void 0), text] }), void 0));
 }

package/dist/components/Avatar.js

@@ -27,8 +27,8 @@ const sizeToFallbackTypeScale = {
     xl: "xl3",
 };
 const sizeToTypeScale = {
-    sm: "baseEm",
-    md: "baseEm",
+    sm: "baseMd",
+    md: "baseMd",
     lg: "lg",
     xl: "xl3",
 };

package/dist/components/BeamContext.d.ts

@@ -19,10 +19,6 @@ export interface BeamContextState {
     drawerCanCloseChecks: MutableRefObject<CanCloseCheck[]>;
     /** Checks when closing SuperDrawer Details, a double array to keep per-detail lists. */
     drawerCanCloseDetailsChecks: MutableRefObject<CanCloseCheck[][]>;
-    /** The ref for defining the portal element's location for Tab actions */
-    tabActionsRef: MutableRefObject<HTMLDivElement | null>;
-    /** The div for Tab actions to portal into */
-    tabActionsDiv: HTMLDivElement;
 }
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
 export declare const BeamContext: import("react").Context<BeamContextState>;

package/dist/components/BeamContext.js

@@ -20,8 +20,6 @@ exports.BeamContext = (0, react_1.createContext)({
     drawerContentStack: new index_1.EmptyRef(),
     drawerCanCloseChecks: new index_1.EmptyRef(),
     drawerCanCloseDetailsChecks: new index_1.EmptyRef(),
-    tabActionsRef: new index_1.EmptyRef(),
-    tabActionsDiv: undefined,
 });
 function BeamProvider({ children, ...presentationProps }) {
     // We want the identity of these to be stable, b/c they end up being used as dependencies
@@ -42,8 +40,6 @@ function BeamProvider({ children, ...presentationProps }) {
     const drawerContentStackRef = (0, react_1.useRef)([]);
     const drawerCanCloseChecks = (0, react_1.useRef)([]);
     const drawerCanCloseDetailsChecks = (0, react_1.useRef)([]);
-    const tabActionsRef = (0, react_1.useRef)(null);
-    const tabActionsDiv = (0, react_1.useMemo)(() => document.createElement("div"), []);
     // We essentially expose the refs, but with our own getters/setters so that we can
     // have the setters call `tick` to re-render this Provider
     const context = (0, react_1.useMemo)(() => {
@@ -58,8 +54,6 @@ function BeamProvider({ children, ...presentationProps }) {
             modalFooterDiv,
             drawerCanCloseChecks,
             drawerCanCloseDetailsChecks,
-            tabActionsRef,
-            tabActionsDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
     return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsxs)(SnackbarContext_1.SnackbarProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && drawerContentStackRef.current.length === 0 && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, void 0) }, void 0) }), void 0) }), void 0));

package/dist/components/Filters/FilterModal.js

@@ -24,6 +24,6 @@ function FilterModal(props) {
 exports.FilterModal = FilterModal;
 // Wraps a filter component to be displayed in the Filter Modal
 function ModalFilterItem({ label, children }) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mb4.if(!label).bt.bGray200.$ }, { children: [label && (0, jsx_runtime_1.jsx)("h2", Object.assign({ css: Css_1.Css.baseEm.mb2.$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.if(!label).pt3.$ }, { children: children }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mb4.if(!label).bt.bGray200.$ }, { children: [label && (0, jsx_runtime_1.jsx)("h2", Object.assign({ css: Css_1.Css.baseMd.mb2.$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.if(!label).pt3.$ }, { children: children }), void 0)] }), void 0));
 }
 exports.ModalFilterItem = ModalFilterItem;

package/dist/components/Filters/Filters.js

@@ -33,7 +33,7 @@ function Filters(props) {
     // Return list of filter components. `onSelect` should update the `filter`
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             ...(vertical ? Css_1.Css.df.fdc.childGap2.$ : Css_1.Css.df.aic.childGap1.$),
-        } }, testId, { children: [maybeGroupByField, (0, utils_1.safeEntries)(pageFilters).map(([key, f]) => ((0, jsx_runtime_1.jsx)("div", { children: f.render(filter[key], (value) => onChange((0, Filters_1.updateFilter)(filter, key, value)), testId, false, vertical) }, key))), Object.keys(modalFilters).length > 0 && ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "More Filters", endAdornment: numModalFilters > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: numModalFilters }), void 0)), variant: "secondary", onClick: () => openModal({
+        } }, testId, { children: [maybeGroupByField, (0, utils_1.safeEntries)(pageFilters).map(([key, f]) => ((0, jsx_runtime_1.jsx)("div", { children: f.render(filter[key], (value) => onChange((0, Filters_1.updateFilter)(filter, key, value)), testId, false, vertical) }, key))), Object.keys(modalFilters).length > 0 && ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "More Filters", endAdornment: numModalFilters > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$ }, { children: numModalFilters }), void 0)), variant: "secondary", onClick: () => openModal({
                     // Spreading `props` to pass along `data-testid`
                     content: (0, jsx_runtime_1.jsx)(Filters_1.FilterModal, Object.assign({}, props, { filter: filter, onApply: onChange, filters: modalFilters }), void 0),
                 }) }, testId.moreFiltersBtn), void 0)), Object.keys(filter).length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Clear", variant: "tertiary", onClick: () => onChange({}) }, testId.clearBtn), void 0) }, void 0))] }), void 0));

package/dist/components/Label.js

@@ -16,6 +16,6 @@ exports.Label = react_1.default.memo((props) => {
 });
 /** Used for showing labels within text fields. */
 function InlineLabel({ labelProps, label, contrast, ...others }) {
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, labelProps, others, { css: Css_1.Css.smEm.nowrap.gray900.prPx(4).add("color", "currentColor").$ }, { children: [label, ":"] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, labelProps, others, { css: Css_1.Css.smMd.nowrap.gray900.prPx(4).add("color", "currentColor").$ }, { children: [label, ":"] }), void 0));
 }
 exports.InlineLabel = InlineLabel;

package/dist/components/Modal/Modal.js

@@ -69,7 +69,7 @@ function Modal(props) {
                             .df.fdc.wPx(width)
                             .mhPx(defaultMinHeight)
                             .if(isFixedHeight)
-                            .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Em.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("main", Object.assign({ ref: modalBodyRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: content }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0) }, void 0));
+                            .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Sb.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("main", Object.assign({ ref: modalBodyRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: content }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0) }, void 0));
 }
 exports.Modal = Modal;
 function ModalHeader({ children }) {

package/dist/components/NavLink.js

@@ -47,7 +47,7 @@ function getNavLinkStyles(variant, contrast) {
     return navLinkVariantStyles(contrast)[variant];
 }
 exports.getNavLinkStyles = getNavLinkStyles;
-const baseStyles = Css_1.Css.df.aic.hPx(32).pyPx(6).px1.br4.smEm.outline0.$;
+const baseStyles = Css_1.Css.df.aic.hPx(32).pyPx(6).px1.br4.smMd.outline0.$;
 const navLinkVariantStyles = (contrast) => ({
     side: {
         baseStyles: { ...baseStyles, ...Css_1.Css.gray700.if(contrast).gray600.$ },
@@ -64,5 +64,5 @@ const navLinkVariantStyles = (contrast) => ({
         focusRingStyles: Css_1.Css.gray500.bgGray900.add("boxShadow", `0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 2px #242424, 0px 0px 0px 4px #0EA5E9`).$,
         hoverStyles: Css_1.Css.gray500.bgGray900.$,
         pressedStyles: Css_1.Css.gray500.bgGray700.$,
-    }
+    },
 });

package/dist/components/SuperDrawer/ConfirmCloseModal.js

@@ -15,7 +15,7 @@ function ConfirmCloseModal(props) {
         // after a close and could/will cause other close attempts to fail.
         modalState.current = undefined;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.lgEm.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.childGap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.lgSb.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.childGap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
                                 // The order of these calls doesn't really matter; close this modal and tell the call to do their close
                                 onClose();
                                 closeModal();

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -59,7 +59,7 @@ function SuperDrawer() {
     const firstContent = (_b = contentStack.current[0]) === null || _b === void 0 ? void 0 : _b.opts;
     const { onPrevClick, onNextClick, titleRightContent, titleLeftContent, hideControls } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     const isDetail = currentContent !== firstContent;
-    const title = content === undefined ? '' : currentContent.title || firstContent.title;
+    const title = content === undefined ? "" : currentContent.title || firstContent.title;
     const { width = utils_2.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: { body: Css_1.Css.overflowHidden.$ } }, void 0), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
                     // Key is required for framer-motion animations
@@ -80,7 +80,7 @@ function SuperDrawer() {
                         // Custom transitions settings for the translateX animation
                         transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: width }, 
                         // Preventing clicks from triggering parent onClick
-                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Em.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
+                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Sb.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
                                         // Forcing height to 32px to match title height
                                         (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, !hideControls && ((0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
                                                         {

package/dist/components/Table/styles.js

@@ -19,7 +19,7 @@ exports.defaultStyle = {
 /** Tightens up the padding of rows, great for rows that have form elements in them. */
 exports.condensedStyle = {
     ...exports.defaultStyle,
-    headerCellCss: Css_1.Css.bgGray100.tinyEm.$,
+    headerCellCss: Css_1.Css.bgGray100.tinySb.$,
     cellCss: Css_1.Css.aic.sm.py1.px2.$,
     rootCss: Css_1.Css.dg.gray700.xs.$,
     firstRowMessageCss: Css_1.Css.tc.py2.$,
@@ -38,7 +38,7 @@ exports.cardStyle = {
         ...Css_1.Css.add({
             border: "none",
             borderRadius: "unset",
-        }).p1.m0.xsEm.gray700.$,
+        }).p1.m0.xsMd.gray700.$,
     },
 };
 function memoizedTableStyles() {
@@ -49,8 +49,8 @@ function memoizedTableStyles() {
         if (!cache[key]) {
             const groupedLevels = {
                 0: {
-                    cellCss: Css_1.Css.xsEm.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
-                    firstContentColumn: Css_1.Css.smEm.$,
+                    cellCss: Css_1.Css.xsMd.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
+                    firstContentColumn: Css_1.Css.smMd.$,
                 },
                 2: { firstContentColumn: Css_1.Css.tiny.pl3.$ },
             };
@@ -58,12 +58,12 @@ function memoizedTableStyles() {
             cache[key] = {
                 emptyCell: "-",
                 firstRowMessageCss: Css_1.Css.tc.py3.$,
-                headerCellCss: Css_1.Css.gray700.xsEm.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
-                totalsCellCss: Css_1.Css.bgWhite.gray700.smEm.hPx(52).pt0.pbPx(12).boxShadow("none").$,
+                headerCellCss: Css_1.Css.gray700.xsMd.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
+                totalsCellCss: Css_1.Css.bgWhite.gray700.smMd.hPx(52).pt0.pbPx(12).boxShadow("none").$,
                 cellCss: {
                     ...Css_1.Css.gray900.xs.bgWhite.aic.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
                     ...(rowHeight === "flexible" ? Css_1.Css.pyPx(12).$ : Css_1.Css.nowrap.hPx(inlineEditing ? 48 : 36).$),
-                    ...(cellHighlight ? { "&:hover": Css_1.Css.bgGray100.$ } : {})
+                    ...(cellHighlight ? { "&:hover": Css_1.Css.bgGray100.$ } : {}),
                 },
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
                 levels: grouped ? groupedLevels : defaultLevels,

package/dist/components/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode, ReactPortal } from "react";
+import { ReactNode } from "react";
 import type { IconKey } from "./";
 import { Margin, Only, Xss } from "../Css";
 export interface Tab<V extends string = string> {
@@ -17,6 +17,7 @@ export interface TabsProps<V extends string, X> {
     contentXss?: X;
     alwaysShowAllTabs?: boolean;
     includeBottomBorder?: boolean;
+    right?: ReactNode;
 }
 export interface RouteTabsProps<V extends string, X> extends Omit<TabsProps<V, X>, "onChange" | "selected" | "tabs"> {
     tabs: RouteTab<V>[];
@@ -129,5 +130,4 @@ export declare function getTabStyles(): {
     };
 };
 export declare function getNextTabValue<V extends string>(selected: V, key: "ArrowLeft" | "ArrowRight", tabs: Tab<V>[] | RouteTab<V>[]): V;
-export declare function TabActions({ children }: PropsWithChildren<{}>): ReactPortal;
 export {};

package/dist/components/Tabs.js

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabActions = exports.getNextTabValue = exports.getTabStyles = exports.Tabs = exports.TabContent = exports.TabsWithContent = void 0;
+exports.getNextTabValue = exports.getTabStyles = exports.Tabs = exports.TabContent = exports.TabsWithContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const change_case_1 = require("change-case");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const react_dom_1 = require("react-dom");
 const react_router_1 = require("react-router");
 const react_router_dom_1 = require("react-router-dom");
-const BeamContext_1 = require("./BeamContext");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
@@ -44,8 +42,7 @@ function TabContent(props) {
 exports.TabContent = TabContent;
 /** The top list of tabs. */
 function Tabs(props) {
-    const { tabActionsRef, tabActionsDiv } = (0, BeamContext_1.useBeamContext)();
-    const { ariaLabel, tabs, includeBottomBorder, ...others } = props;
+    const { ariaLabel, tabs, includeBottomBorder, right, ...others } = props;
     const location = (0, react_router_1.useLocation)();
     const selected = isRouteTabs(props)
         ? uniqueTabValue(props.tabs.find((t) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0])
@@ -56,11 +53,6 @@ function Tabs(props) {
     const ref = (0, react_1.useRef)(null);
     // Whenever selected changes, reset active
     (0, react_1.useEffect)(() => setActive(selected), [selected]);
-    (0, react_1.useEffect)(() => {
-        if (tabActionsRef && tabActionsDiv) {
-            tabActionsRef.current.appendChild(tabActionsDiv);
-        }
-    }, [tabActionsRef, tabActionsDiv]);
     // the active tab is highlighted, but not necessarily "selected"
     // the selected tab dictates what is displayed in the content panel
     function onKeyUp(e) {
@@ -87,7 +79,7 @@ function Tabs(props) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: { ...Css_1.Css.dif.childGap1.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) }, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
                     const uniqueValue = uniqueTabValue(tab);
                     return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
-                }) }), void 0)), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.ml("auto").addIn("&>div", Css_1.Css.df.aic.childGap1.$).$, ref: tabActionsRef }, void 0)] }), void 0));
+                }) }), void 0)), right && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.ml("auto").df.aic.gap1.$ }, { children: right }), void 0)] }), void 0));
 }
 exports.Tabs = Tabs;
 function TabImpl(props) {
@@ -131,7 +123,7 @@ function getTabStyles() {
     return {
         baseStyles: Css_1.Css.df.aic.hPx(32).pyPx(verticalPaddingPx).px1.outline0.gray700.add("width", "fit-content")
             .cursorPointer.sm.$,
-        activeStyles: Css_1.Css.add(borderBottomStyles).bLightBlue700.smEm.gray900.$,
+        activeStyles: Css_1.Css.add(borderBottomStyles).bLightBlue700.smMd.gray900.$,
         disabledStyles: Css_1.Css.gray400.cursorNotAllowed.$,
         focusRingStyles: Css_1.Css.bgLightBlue50.bshFocus.$,
         hoverStyles: Css_1.Css.add(borderBottomStyles).bGray400.$,
@@ -157,14 +149,6 @@ function isRouteTab(tab) {
 function uniqueTabValue(tab) {
     return isRouteTab(tab) ? (0, change_case_1.camelCase)(tab.name) : tab.value;
 }
-function TabActions({ children }) {
-    const { tabActionsDiv } = (0, BeamContext_1.useBeamContext)();
-    if (!tabActionsDiv) {
-        throw new Error("Tab Actions element is not defined");
-    }
-    return (0, react_dom_1.createPortal)(children, tabActionsDiv);
-}
-exports.TabActions = TabActions;
 // Determines whether we should hide the Tab panel. Returns true if there is only one enabled tab and `alwaysShowAllTabs` is falsey.
 function hideTabs(props) {
     return props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;

package/dist/components/Tag.js

@@ -8,7 +8,7 @@ const utils_1 = require("../utils");
 function Tag({ text, type, xss, ...otherProps }) {
     const typeStyles = getStyles(type);
     const tid = (0, utils_1.useTestIds)(otherProps);
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, tid, { css: { ...Css_1.Css.dib.tinyEm.ttu.px1.pyPx(4).gray900.br4.$, ...typeStyles, ...xss }, title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, tid, { css: { ...Css_1.Css.dib.tinySb.ttu.px1.pyPx(4).gray900.br4.$, ...typeStyles, ...xss }, title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
 }
 exports.Tag = Tag;
 function getStyles(type) {

package/dist/components/index.d.ts

@@ -3,6 +3,8 @@ export * from "./Chips";
 export * from "./Table/GridTable";
 export * from "./ToggleChip";
 export * from "./ToggleChips";
+export * from "./Accordion";
+export * from "./AccordionList";
 export * from "./Alert";
 export * from "./AutoSaveIndicator";
 export { BeamProvider } from "./BeamContext";
@@ -27,9 +29,7 @@ export * from "./Stepper";
 export type { Step, StepperProps } from "./Stepper";
 export * from "./SuperDrawer";
 export * from "./Table";
-export { TabActions, TabContent, Tabs, TabsWithContent } from "./Tabs";
+export { TabContent, Tabs, TabsWithContent } from "./Tabs";
 export type { RouteTab, RouteTabWithContent, Tab, TabWithContent } from "./Tabs";
 export * from "./Tag";
 export * from "./Tooltip";
-export * from "./Accordion";
-export * from "./AccordionList";

package/dist/components/index.js

@@ -10,12 +10,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.TabActions = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = void 0;
+exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = void 0;
 __exportStar(require("./Chip"), exports);
 __exportStar(require("./Chips"), exports);
 __exportStar(require("./Table/GridTable"), exports);
 __exportStar(require("./ToggleChip"), exports);
 __exportStar(require("./ToggleChips"), exports);
+__exportStar(require("./Accordion"), exports);
+__exportStar(require("./AccordionList"), exports);
 __exportStar(require("./Alert"), exports);
 __exportStar(require("./AutoSaveIndicator"), exports);
 var BeamContext_1 = require("./BeamContext");
@@ -43,11 +45,8 @@ __exportStar(require("./Stepper"), exports);
 __exportStar(require("./SuperDrawer"), exports);
 __exportStar(require("./Table"), exports);
 var Tabs_1 = require("./Tabs");
-Object.defineProperty(exports, "TabActions", { enumerable: true, get: function () { return Tabs_1.TabActions; } });
 Object.defineProperty(exports, "TabContent", { enumerable: true, get: function () { return Tabs_1.TabContent; } });
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "TabsWithContent", { enumerable: true, get: function () { return Tabs_1.TabsWithContent; } });
 __exportStar(require("./Tag"), exports);
 __exportStar(require("./Tooltip"), exports);
-__exportStar(require("./Accordion"), exports);
-__exportStar(require("./AccordionList"), exports);

package/dist/forms/FormHeading.js

@@ -6,7 +6,7 @@ const Css_1 = require("../Css");
 function FormHeading(props) {
     const { title, xss, isFirst = false, ...others } = props;
     return ((0, jsx_runtime_1.jsx)("h3", Object.assign({ css: {
-            ...Css_1.Css.baseEm.$,
+            ...Css_1.Css.baseMd.$,
             // Add space before the heading, but only if it's not first.
             ...(!isFirst && Css_1.Css.mt4.$),
             ...xss,

package/dist/forms/StaticField.js

@@ -10,6 +10,6 @@ function StaticField(props) {
     const { label, value, children } = props;
     const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const id = (0, utils_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$, htmlFor: id }, tid.label, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: id, css: Css_1.Css.smEm.gray900.df.aic.$ }, tid, { children: value || children }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$, htmlFor: id }, tid.label, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: id, css: Css_1.Css.smMd.gray900.df.aic.$ }, tid, { children: value || children }), void 0)] }, void 0));
 }
 exports.StaticField = StaticField;

package/dist/inputs/CheckboxBase.js

@@ -47,7 +47,7 @@ const disabledColor = Css_1.Css.gray300.$;
 const focusRingStyles = Css_1.Css.bshFocus.$;
 const hoverBorderStyles = Css_1.Css.bLightBlue900.$;
 const markStyles = { svg: Css_1.Css.absolute.topPx(-1).leftPx(-1).$ };
-const labelStyles = Css_1.Css.smEm.$;
+const labelStyles = Css_1.Css.smMd.$;
 const descStyles = Css_1.Css.sm.gray700.$;
 const checkmarkSmall = ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "16", height: "16" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6.66669 10.3907L4.47135 8.19533L3.52869 9.138L6.66669 12.276L13.138 5.80467L12.1954 4.862L6.66669 10.3907Z", fill: Css_1.Palette.White }, void 0) }), void 0));
 const dashSmall = ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "16", height: "16" }, { children: (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "7.5", width: "8", height: "1.35", fill: Css_1.Palette.White }, void 0) }), void 0));

package/dist/inputs/RadioGroupField.js

@@ -60,7 +60,7 @@ function Radio(props) {
                     ...(isFocusVisible ? exports.radioFocus : {}),
                     // Nudge down so the center of the circle lines up with the label text
                     ...Css_1.Css.mtPx(2).mr1.$,
-                }, disabled: disabled, "aria-labelledby": labelId }, inputProps, focusProps, others), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ id: labelId, css: Css_1.Css.smEm.gray800.if(disabled).gray400.$ }, (description ? { "aria-describedby": descriptionId } : {}), { children: label }), void 0), description && ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: descriptionId, css: Css_1.Css.sm.gray700.if(disabled).gray400.$ }, { children: description }), void 0))] }, void 0)] }), void 0));
+                }, disabled: disabled, "aria-labelledby": labelId }, inputProps, focusProps, others), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ id: labelId, css: Css_1.Css.smMd.gray800.if(disabled).gray400.$ }, (description ? { "aria-describedby": descriptionId } : {}), { children: label }), void 0), description && ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: descriptionId, css: Css_1.Css.sm.gray700.if(disabled).gray400.$ }, { children: description }), void 0))] }, void 0)] }), void 0));
 }
 const whiteCircle = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e";
 // Didn't put these in radioReset yet, are they needed?

package/dist/inputs/Switch.js

@@ -23,7 +23,7 @@ function Switch(props) {
         title: tooltip,
         placement: "top",
         children: ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, hoverProps, { css: {
-                ...Css_1.Css.relative.cursorPointer.df.w("max-content").smEm.selectNone.$,
+                ...Css_1.Css.relative.cursorPointer.df.w("max-content").smMd.selectNone.$,
                 ...(labelStyle === "form" && Css_1.Css.fdc.$),
                 ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
                 ...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.w("auto").sm.$),

package/dist/inputs/TextFieldBase.js

@@ -18,7 +18,7 @@ function TextFieldBase(props) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, } = props;
-    const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : (inputProps.readOnly && !hideLabel ? "smEm" : "sm");
+    const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : (inputProps.readOnly && !hideLabel ? "smMd" : "sm");
     const errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false;
     const internalProps = props.internalProps || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;

package/dist/inputs/ToggleButton.js

@@ -37,7 +37,7 @@ function ToggleButton(props) {
         ...hoverProps,
         ...pressProps,
         css: {
-            ...Css_1.Css.br4.dif.aic.gap1.bgTransparent.gray500.hPx(32).plPx(4).pr1.relative.cursorPointer.w("max-content").smEm
+            ...Css_1.Css.br4.dif.aic.gap1.bgTransparent.gray500.hPx(32).plPx(4).pr1.relative.cursorPointer.w("max-content").smMd
                 .selectNone.$,
             ...(isHovered && exports.toggleHoverStyles),
             ...(isPressed && exports.togglePressStyles),

package/dist/inputs/internal/SelectFieldInput.js

@@ -15,7 +15,7 @@ function SelectFieldInput(props) {
     const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
     // For MultiSelect only show the `fieldDecoration` when input is not in focus.
     const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { inlineLabel: inlineLabel, errorMsg: errorMsg, contrast: contrast, xss: !inlineLabel && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { inlineLabel: inlineLabel, errorMsg: errorMsg, contrast: contrast, xss: !inlineLabel && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
             (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { disabled: inputProps.disabled, ref: buttonRef, css: {
                 ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
                 ...(inputProps.disabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.181.2",
+  "version": "2.183.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",