@homebound/beam 2.351.0 → 2.353.0

package/dist/components/Button.js

@@ -85,7 +85,7 @@ const variantStyles = (contrast) => ({
         focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
     secondary: {
-        baseStyles: Css_1.Css.bgWhite.bGray300.bw1.ba.gray800.$,
+        baseStyles: Css_1.Css.bgWhite.bcGray300.bw1.ba.gray800.$,
         hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray300.$,
         pressedStyles: Css_1.Css.bgGray200.if(contrast).bgGray100.$,
         disabledStyles: Css_1.Css.bgWhite.gray400.$,

package/dist/components/ButtonGroup.js

@@ -32,7 +32,7 @@ function GroupButton(props) {
             placement: "top",
             children: ((0, jsx_runtime_1.jsxs)("button", { ref: ref, ...buttonProps, ...focusProps, ...hoverProps, css: {
                     ...Css_1.Css.buttonBase.px2.br0.h100.$,
-                    "&:disabled": Css_1.Css.gray400.cursorNotAllowed.bGray300.$,
+                    "&:disabled": Css_1.Css.gray400.cursorNotAllowed.bcGray300.$,
                     ...(isFocusVisible ? defaultFocusRingStyles : {}),
                     ...(active ? activeStyles : {}),
                     ...(isPressed ? pressedStyles : isHovered ? hoverStyles : {}),
@@ -46,7 +46,7 @@ const hoverStyles = Css_1.Css.bgGray100.$;
 const defaultFocusRingStyles = Css_1.Css.relative.z2.bshFocus.$;
 function getButtonStyles() {
     return {
-        ...Css_1.Css.z1.bgWhite.bGray300.bw1.ba.gray900.br0.overflowHidden.$,
+        ...Css_1.Css.z1.bgWhite.bcGray300.bw1.ba.gray900.br0.oh.$,
         // Our first button should have a rounded left border
         "&:first-of-type": Css_1.Css.add("borderRadius", "4px 0 0 4px").$,
         // Our last button should have a rounded right border

package/dist/components/Chip.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { Margin, Only, Xss } from "../Css";
+import { IconKey } from "./Icon";
 export type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral" | "darkMode" | "info";
 export declare const ChipTypes: Record<ChipType, ChipType>;
 export interface ChipProps<X> {
@@ -8,6 +9,7 @@ export interface ChipProps<X> {
     xss?: X;
     type?: ChipType;
     compact?: boolean;
+    icon?: IconKey;
 }
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
 export declare function Chip<X extends Only<Xss<Margin | "color" | "backgroundColor">, X>>({ type, ...props }: ChipProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Chip.js

@@ -6,6 +6,7 @@ const PresentationContext_1 = require("./PresentationContext");
 const Tooltip_1 = require("./Tooltip");
 const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
+const Icon_1 = require("./Icon");
 // exporting for using in type prop as constant - this could be moved and become a global list for colors
 exports.ChipTypes = {
     caution: "caution",
@@ -20,16 +21,16 @@ exports.ChipTypes = {
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
 function Chip({ type = exports.ChipTypes.neutral, ...props }) {
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { text, title, xss = {}, compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact } = props;
+    const { text, title, xss = {}, compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact, icon } = props;
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
     return (0, Tooltip_1.maybeTooltip)({
         title,
         placement: "bottom",
-        children: ((0, jsx_runtime_1.jsx)("span", { css: {
-                ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.$,
+        children: ((0, jsx_runtime_1.jsxs)("span", { css: {
+                ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.gapPx(4).br16.pl1.px1.pyPx(2).gray900.$,
                 ...typeStyles[type],
                 ...xss,
-            }, ...tid, children: (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp1.breakAll.$, children: text }) })),
+            }, ...tid, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, inc: 2, xss: Css_1.Css.fs0.$ }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp1.wbba.$, children: text })] })),
     });
 }
 exports.Chip = Chip;

package/dist/components/DnDGrid/DnDGridItemHandle.js

@@ -14,8 +14,8 @@ function DnDGridItemHandle(props) {
     const iconButtonCompact = src_1.Css.hPx(18).wPx(18).br4.bw1.$;
     return ((0, jsx_runtime_1.jsx)("button", { css: {
             ...(compact ? iconButtonCompact : iconButtonNormal),
-            ...src_1.Css.cursor("grab").bTransparent.bsSolid.bgTransparent.outline0.dif.aic.jcc.transition.if(isFocusVisible)
-                .bBlue700.$,
+            ...src_1.Css.cursor("grab").bcTransparent.bss.bgTransparent.outline0.dif.aic.jcc.transition.if(isFocusVisible)
+                .bcBlue700.$,
             ...(isHovered && src_1.Css.bgGray200.$),
         }, ...(0, react_aria_1.mergeProps)(dragHandleProps, focusProps, hoverProps), ...tid, children: (0, jsx_runtime_1.jsx)(src_1.Icon, { icon: icon, inc: compact ? 2 : undefined, color: color }) }));
 }

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", { css: Css_1.Css.mb4.if(!label).bt.bGray200.$, children: [label && (0, jsx_runtime_1.jsx)("h2", { css: Css_1.Css.baseMd.mb2.$, children: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(!label).pt3.$, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mb4.if(!label).bt.bcGray200.$, children: [label && (0, jsx_runtime_1.jsx)("h2", { css: Css_1.Css.baseMd.mb2.$, children: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(!label).pt3.$, children: children })] }));
 }
 exports.ModalFilterItem = ModalFilterItem;

package/dist/components/Icon.d.ts

@@ -9,7 +9,7 @@ export interface IconProps extends AriaAttributes, DOMProps {
     /** The size of the icon in increments, i.e. 1 == 8px, default is 3 == 24px. */
     inc?: number;
     /** Styles overrides */
-    xss?: Xss<Margin | "visibility">;
+    xss?: Xss<Margin | "visibility" | "flexShrink">;
     tooltip?: ReactNode;
 }
 export declare const Icon: React.MemoExoticComponent<(props: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/components/IconButton.js

@@ -55,10 +55,10 @@ function IconButton(props) {
 exports.IconButton = IconButton;
 const defaultIconColor = Css_1.Palette.Gray900;
 const contrastIconColor = Css_1.Palette.White;
-const iconButtonStylesReset = Css_1.Css.bTransparent.bsSolid.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
+const iconButtonStylesReset = Css_1.Css.bcTransparent.bss.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
 const iconButtonNormal = Css_1.Css.hPx(28).wPx(28).br8.bw2.$;
 const iconButtonCompact = Css_1.Css.hPx(18).wPx(18).br4.bw1.$;
 exports.iconButtonStylesHover = Css_1.Css.bgGray200.$;
 exports.iconButtonContrastStylesHover = Css_1.Css.bgGray700.$;
-const iconButtonStylesFocus = Css_1.Css.bBlue700.$;
+const iconButtonStylesFocus = Css_1.Css.bcBlue700.$;
 const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;

package/dist/components/Label.js

@@ -24,6 +24,6 @@ function LabelComponent(props) {
 exports.Label = react_1.default.memo(LabelComponent);
 /** Used for showing labels within text fields. */
 function InlineLabel({ labelProps, label, contrast, multiline = false, ...others }) {
-    return ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: Css_1.Css.smMd.nowrap.gray900.prPx(4).add("color", "currentColor").asc.if(multiline).asfs.pt1.$, children: [label, ":"] }));
+    return ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: Css_1.Css.smMd.wsnw.gray900.prPx(4).add("color", "currentColor").asc.if(multiline).asfs.pt1.$, children: [label, ":"] }));
 }
 exports.InlineLabel = InlineLabel;

package/dist/components/Layout/PreventBrowserScroll.js

@@ -9,6 +9,6 @@ function PreventBrowserScroll({ children }) {
     // Take over the full viewport and hide any overflown content.
     // Using `-webkit-fill-available`, otherwise `height: 100vh` includes the app bars in mobile Safari. See https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
     // Setting the multiple "(min|max-)height" properties is necessary, as Truss will turn this into an object and there can only be one `height` property.
-    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.overflowHidden.vh100.mh("-webkit-fill-available").maxh("-webkit-fill-available").$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.fdc.mh0.overflowAuto.$, children: children }) }));
+    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.oh.vh100.mh("-webkit-fill-available").maxh("-webkit-fill-available").$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.fdc.mh0.oa.$, children: children }) }));
 }
 exports.PreventBrowserScroll = PreventBrowserScroll;

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.js

@@ -11,8 +11,8 @@ function RightPaneLayout(props) {
     const { isRightPaneOpen, rightPaneContent, clearPane, closePane } = (0, RightPaneContext_1.useRightPaneContext)();
     // Close pane on page unmount because otherwise the next page that has a right pane will show our stale content
     (0, react_1.useEffect)(() => closePane, [closePane]);
-    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.overflowXHidden.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: {
-                        ...Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`).add("transition", "width .2s linear").h100.mr3.overflowXAuto.$,
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.oxh.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: {
+                        ...Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`).add("transition", "width .2s linear").h100.mr3.oxa.$,
                         ...Css_1.Css.if(!isRightPaneOpen).w100.mr0.$,
                         ...Css_1.Css.if(!!defaultPaneContent).w(`calc(100% - ${paneWidth + 24}px)`).mr3.$,
                     }, children: children }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.if(!!defaultPaneContent).wPx(paneWidth).$, children: [defaultPaneContent && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100

package/dist/components/Layout/ScrollableContent.d.ts

@@ -11,7 +11,7 @@ interface ScrollableContentProps {
  *
  * See the docs on `ScrollableParent.
  *
- * Note that you should not use this "just to get a scrollbar", instead just use `Css.overflowAuto.$`
+ * Note that you should not use this "just to get a scrollbar", instead just use `Css.oa.$`
  * or what not; this is only for implementing page-level patterns that need multiple stickied
  * components (page header, tab bar, table filter & actions).
  */

package/dist/components/Layout/ScrollableContent.js

@@ -11,7 +11,7 @@ const Css_1 = require("../../Css");
  *
  * See the docs on `ScrollableParent.
  *
- * Note that you should not use this "just to get a scrollbar", instead just use `Css.overflowAuto.$`
+ * Note that you should not use this "just to get a scrollbar", instead just use `Css.oa.$`
  * or what not; this is only for implementing page-level patterns that need multiple stickied
  * components (page header, tab bar, table filter & actions).
  */

package/dist/components/Layout/ScrollableParent.js

@@ -57,8 +57,8 @@ function ScrollableParent(props) {
     }, [scrollableEl]);
     return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, { value: context, children: (0, jsx_runtime_1.jsxs)(Tag, { css: { ...Css_1.Css.mh0.mw0.fg1.df.fdc.$, ...otherXss }, children: [(0, jsx_runtime_1.jsx)("div", { css: {
                         ...Css_1.Css.pl(context.pl).pr(context.pr).$,
-                        ...(!hasScrollableContent ? { ...Css_1.Css.overflowAuto.h100.$, ...exports.scrollContainerBottomPadding } : undefined),
-                    }, children: children }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.$, ref: scrollableRef })] }) }));
+                        ...(!hasScrollableContent ? { ...Css_1.Css.oa.h100.$, ...exports.scrollContainerBottomPadding } : undefined),
+                    }, children: children }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.oa.$, ref: scrollableRef })] }) }));
 }
 exports.ScrollableParent = ScrollableParent;
 function useScrollableParent() {

package/dist/components/Modal/Modal.js

@@ -70,7 +70,7 @@ function Modal(props) {
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [modalBodyRef, modalFooterRef, modalHeaderRef]);
-    return ((0, jsx_runtime_1.jsx)(ModalContext_1.ModalProvider, { children: (0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(components_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.underlay.z4.$, ...underlayProps, ...testId.underlay, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.br24.bgWhite.bshModal.overflowHidden
+    return ((0, jsx_runtime_1.jsx)(ModalContext_1.ModalProvider, { children: (0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(components_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.underlay.z4.$, ...underlayProps, ...testId.underlay, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.br24.bgWhite.bshModal.oh
                                 .maxh("90vh")
                                 .df.fdc.wPx(width)
                                 .mhPx(defaultMinHeight)
@@ -79,7 +79,7 @@ function Modal(props) {
                                 .if(sm)
                                 .add("height", "100dvh")
                                 .add("width", "100dvw")
-                                .maxh("none").br0.$, ref: ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$, children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.fg1.xl2Sb.gray900.$, ref: modalHeaderRef, ...titleProps, ...testId.title }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.pl1.$, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) })] }), (0, jsx_runtime_1.jsx)("main", { ref: modalBodyRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$, children: content }), (0, jsx_runtime_1.jsx)("footer", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }) })] }) }) }) }) }) }));
+                                .maxh("none").br0.$, ref: ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bcGray200.$, children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.fg1.xl2Sb.gray900.$, ref: modalHeaderRef, ...titleProps, ...testId.title }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.pl1.$, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) })] }), (0, jsx_runtime_1.jsx)("main", { ref: modalBodyRef, css: Css_1.Css.fg1.oya.if(hasScroll).bb.bcGray200.if(!!forceScrolling).oys.$, children: content }), (0, jsx_runtime_1.jsx)("footer", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }) })] }) }) }) }) }) }));
 }
 exports.Modal = Modal;
 function ModalHeader({ children }) {
@@ -93,7 +93,7 @@ function ModalBody({ children, virtualized = false, }) {
     const testId = (0, utils_2.useTestIds)({}, testIdPrefix);
     return (0, react_dom_1.createPortal)(
     // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
-    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.if(virtualized).overflowHidden.pl3.else.px3.$, ...testId.content, children: children }), modalBodyDiv);
+    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.if(virtualized).oh.pl3.else.px3.$, ...testId.content, children: children }), modalBodyDiv);
 }
 exports.ModalBody = ModalBody;
 /** Provides consistent styling for modal footers, i.e. where actions are placed. */

package/dist/components/Pagination.js

@@ -30,7 +30,7 @@ function Pagination(props) {
         }
     }
     const tid = (0, utils_1.useTestIds)(props, "pagination");
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray200.bt.xs.gray500.px2.pt2.$, ...tid, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageSizeLabel, children: "Page size:" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(78).$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({ pageNumber: 1, pageSize: val }), ...tid.pageSize }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mla.mya.df.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageInfoLabel, children: [first, " ", showLast ? `- ${last}` : "", " of ", totalCount] }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronLeft", color: hasPrevPage ? Css_1.Palette.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber - 1, pageSize }), disabled: !hasPrevPage, ...tid.previousIcon }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronRight", color: hasNextPage ? Css_1.Palette.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber + 1, pageSize }), disabled: !hasNextPage, ...tid.nextIcon })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bcGray200.bt.xs.gray500.px2.pt2.$, ...tid, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageSizeLabel, children: "Page size:" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(78).$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({ pageNumber: 1, pageSize: val }), ...tid.pageSize }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mla.mya.df.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageInfoLabel, children: [first, " ", showLast ? `- ${last}` : "", " of ", totalCount] }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronLeft", color: hasPrevPage ? Css_1.Palette.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber - 1, pageSize }), disabled: !hasPrevPage, ...tid.previousIcon }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronRight", color: hasNextPage ? Css_1.Palette.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber + 1, pageSize }), disabled: !hasNextPage, ...tid.nextIcon })] })] }));
 }
 exports.Pagination = Pagination;
 function toLimitAndOffset(page) {

package/dist/components/ScrollShadows.js

@@ -47,12 +47,12 @@ function ScrollShadows(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const onResize = (0, react_1.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), []);
     (0, utils_1.useResizeObserver)({ ref: scrollRef, onResize });
-    return ((0, jsx_runtime_1.jsxs)("div", { css: src_1.Css.relative.overflowHidden
+    return ((0, jsx_runtime_1.jsxs)("div", { css: src_1.Css.relative.oh
             .h(height)
             .w(width)
             .df.fd(!horizontal ? "column" : "row").$, ...tid, children: [showStartShadow && (0, jsx_runtime_1.jsx)("div", { css: startShadowStyles }), showEndShadow && (0, jsx_runtime_1.jsx)("div", { css: endShadowStyles }), (0, jsx_runtime_1.jsx)("div", { css: {
                     ...xss,
-                    ...src_1.Css.overflowAuto.fg1.addIn("&::-webkit-scrollbar", { display: "none" }).add("scrollbarWidth", "none").$,
+                    ...src_1.Css.oa.fg1.addIn("&::-webkit-scrollbar", { display: "none" }).add("scrollbarWidth", "none").$,
                 }, onScroll: (e) => updateScrollProps(e.currentTarget), ref: scrollRef, children: children })] }));
 }
 exports.ScrollShadows = ScrollShadows;

package/dist/components/Stepper.js

@@ -40,7 +40,7 @@ function StepButton(props) {
     const tid = (0, utils_1.useTestIds)(props, "stepButton");
     return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, ...buttonProps, ...focusProps, ...hoverProps, css: {
             ...Css_1.Css.buttonBase.$,
-            ...Css_1.Css.tl.w100.h100.sm.gray700.add("whiteSpace", "initial").if(state === "error").red600.$,
+            ...Css_1.Css.tal.w100.h100.sm.gray700.add("whiteSpace", "initial").if(state === "error").red600.$,
             ...(isCurrent ? Css_1.Css.blue700.if(state === "error").red800.$ : {}),
             ...(isHovered && !isPressed ? Css_1.Css.blue800.if(state === "error").red500.$ : {}),
             ...(isPressed ? Css_1.Css.blue500.if(state === "error").red900.$ : {}),

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -55,7 +55,7 @@ function SuperDrawer() {
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [headerRef, content]);
-    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.$ } }), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
+    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.oh.$ } }), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
                     // Key is required for framer-motion animations
                     key: "superDrawer", 
                     // TODO: Should this color be part of the Palette?
@@ -74,6 +74,6 @@ 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)(components_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.p3.bb.bGray200.df.aic.jcsb.gap3.$, children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, css: Css_1.Css.gray900.fg1.addIn("h1", Css_1.Css.xl2Sb.$).$ }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })] }), content] }) }, "superDrawerContainer"))] })) }), document.body);
+                        onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(components_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.p3.bb.bcGray200.df.aic.jcsb.gap3.$, children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, css: Css_1.Css.gray900.fg1.addIn("h1", Css_1.Css.xl2Sb.$).$ }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })] }), content] }) }, "superDrawerContainer"))] })) }), document.body);
 }
 exports.SuperDrawer = SuperDrawer;

package/dist/components/SuperDrawer/SuperDrawerContent.js

@@ -25,7 +25,7 @@ const SuperDrawerContent = ({ children, actions }) => {
     const { width = utils_1.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     function wrapWithMotionAndMaybeBack(children) {
         if (kind === "open") {
-            return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { css: Css_1.Css.p3.fg1.overflowAuto.$, children: children }, "content"));
+            return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { css: Css_1.Css.p3.fg1.oa.$, children: children }, "content"));
         }
         else if (kind === "detail") {
             return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { css: Css_1.Css.px3.pt2.pb3.fg1.$, animate: { overflow: "auto" }, transition: { overflow: { delay: 0.3 } }, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { x: width, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { ease: "linear", duration: 0.3, opacity: { delay: 0.15 } }, exit: { x: width, opacity: 0 }, css: Css_1.Css.pt2.$, children: children })] }, "content"));
@@ -37,6 +37,6 @@ const SuperDrawerContent = ({ children, actions }) => {
             return (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { css: Css_1.Css.p3.fg1.$, style: { overflow: "auto" } }, "content");
         }
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrapWithMotionAndMaybeBack(children), actions && ((0, jsx_runtime_1.jsx)("footer", { css: Css_1.Css.bt.bGray200.p3.df.aic.jcfe.$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.$, children: actions.map((buttonProps, i) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...buttonProps }, i))) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrapWithMotionAndMaybeBack(children), actions && ((0, jsx_runtime_1.jsx)("footer", { css: Css_1.Css.bt.bcGray200.p3.df.aic.jcfe.$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.$, children: actions.map((buttonProps, i) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...buttonProps }, i))) }) }))] }));
 };
 exports.SuperDrawerContent = SuperDrawerContent;

package/dist/components/SuperDrawer/components/SuperDrawerHeader.js

@@ -16,7 +16,7 @@ function SuperDrawerHeader(props) {
     const currentContent = (_b = contentStack.current[contentStack.current.length - 1]) === null || _b === void 0 ? void 0 : _b.opts;
     const isDetail = currentContent !== firstContent;
     const tid = (0, utils_1.useTestIds)({}, "superDrawerHeader");
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.jcsb.gap3.$, ...tid, children: [isStructuredProps(props) ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.aic.gap2.fg1.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.fg1.df.aic.gap2.$, children: [(0, jsx_runtime_1.jsx)("h1", { children: props.title }), props.left] }), props.right && (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fs0.$, children: props.right })] })) : ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.$, children: props.children })), !hideControls && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fs0.if(isDetail).invisible.$, children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { buttons: [
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.jcsb.gap3.$, ...tid, children: [isStructuredProps(props) ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.aic.gap2.fg1.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.fg1.df.aic.gap2.$, children: [(0, jsx_runtime_1.jsx)("h1", { children: props.title }), props.left] }), props.right && (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fs0.$, children: props.right })] })) : ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.$, children: props.children })), !hideControls && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fs0.if(isDetail).vh.$, children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { buttons: [
                         { icon: "chevronLeft", onClick: () => onPrevClick && onPrevClick(), disabled: !onPrevClick },
                         { icon: "chevronRight", onClick: () => onNextClick && onNextClick(), disabled: !onNextClick },
                     ], ...tid.actions }) }))] }), sdHeaderDiv);

package/dist/components/Table/TableStyles.js

@@ -30,9 +30,9 @@ function memoizedTableStyles() {
             cache[key] = {
                 emptyCell: "-",
                 firstRowMessageCss: {
-                    ...Css_1.Css.tc.py3.$,
+                    ...Css_1.Css.tac.py3.$,
                     ...(allWhite && Css_1.Css.bgWhite.$),
-                    ...(bordered && Css_1.Css.bl.br.bGray200.$),
+                    ...(bordered && Css_1.Css.bl.br.bcGray200.$),
                 },
                 headerCellCss: {
                     // We want to support headers having two lines of wrapped text, and could add a `lineClamp2` here, but
@@ -43,7 +43,7 @@ function memoizedTableStyles() {
                     ...(allWhite && Css_1.Css.bgWhite.$),
                 },
                 totalsCellCss: Css_1.Css.bgWhite.gray700.bgGray100.xsMd.hPx(exports.totalsRowHeight).pPx(12).$,
-                expandableHeaderCss: Css_1.Css.bgWhite.gray900.xsMd.wsNormal
+                expandableHeaderCss: Css_1.Css.bgWhite.gray900.xsMd.wsn
                     .hPx(exports.expandableHeaderRowHeight)
                     .pxPx(12)
                     .py0.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`)
@@ -51,13 +51,13 @@ function memoizedTableStyles() {
                 cellCss: {
                     ...Css_1.Css[cellTypography].gray900.bgWhite.ai(alignItems).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).$),
+                    ...(rowHeight === "flexible" ? Css_1.Css.pyPx(12).$ : Css_1.Css.wsnw.hPx(inlineEditing ? 48 : 36).$),
                     ...(cellHighlight ? { "&:hover": Css_1.Css.bgGray100.$ } : {}),
-                    ...(bordered && { "&:first-child": Css_1.Css.bl.bGray200.$, "&:last-child": Css_1.Css.br.bGray200.$ }),
+                    ...(bordered && { "&:first-child": Css_1.Css.bl.bcGray200.$, "&:last-child": Css_1.Css.br.bcGray200.$ }),
                 },
                 firstRowCss: {
                     ...Css_1.Css.addIn("& > *:first-of-type", Css_1.Css.borderRadius("8px 0 0 0 ").$).addIn("& > *:last-of-type", Css_1.Css.borderRadius("0 8px 0 0").$).$,
-                    ...(bordered && Css_1.Css.addIn("& > *", Css_1.Css.bt.bGray200.$).$),
+                    ...(bordered && Css_1.Css.addIn("& > *", Css_1.Css.bt.bcGray200.$).$),
                 },
                 // Only apply border radius styles to the last row when using the `bordered` style table.
                 lastRowCss: bordered
@@ -92,8 +92,8 @@ exports.condensedStyle = {
 exports.cardStyle = {
     ...exports.defaultStyle,
     betweenRowsCss: {},
-    nonHeaderRowCss: Css_1.Css.br4.overflowHidden.ba.bGray400.mt2.add("transition", "all 240ms").$,
-    firstRowCss: Css_1.Css.bl.br.bGray200.borderRadius("8px 8px 0 0").overflowHidden.$,
+    nonHeaderRowCss: Css_1.Css.br4.oh.ba.bcGray400.mt2.add("transition", "all 240ms").$,
+    firstRowCss: Css_1.Css.bl.br.bcGray200.borderRadius("8px 8px 0 0").oh.$,
     cellCss: Css_1.Css.p2.$,
     // Undo the card look & feel for the header
     headerCellCss: {
@@ -101,7 +101,7 @@ exports.cardStyle = {
         ...Css_1.Css.p1.m0.xsMd.gray700.$,
     },
     rowHoverColor: "none",
-    nonHeaderRowHoverCss: Css_1.Css.bshHover.bGray700.$,
+    nonHeaderRowHoverCss: Css_1.Css.bshHover.bcGray700.$,
     levels: {
         1: { rowIndent: 24 },
         2: { rowIndent: 48 },

package/dist/components/Table/components/ExpandableHeader.js

@@ -31,6 +31,6 @@ function ExpandableHeader(props) {
                     .if(applyStickyStyles)
                     .sticky.leftPx(minStickyLeftOffset + 12)
                     .pr2.mr2.bgWhite.z(utils_1.zIndices.expandableHeaderTitle)
-                    .if(isHovered).bgGray100.$, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.tl.lineClamp2.$, children: title }), tooltipEl] }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.if(applyStickyStyles).sticky.rightPx(12).z(utils_1.zIndices.expandableHeaderIcon).$, children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "xs" }) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isExpanded ? "chevronLeft" : "chevronRight", inc: 2 }) })] }));
+                    .if(isHovered).bgGray100.$, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.tal.lineClamp2.$, children: title }), tooltipEl] }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.if(applyStickyStyles).sticky.rightPx(12).z(utils_1.zIndices.expandableHeaderIcon).$, children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "xs" }) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isExpanded ? "chevronLeft" : "chevronRight", inc: 2 }) })] }));
 }
 exports.ExpandableHeader = ExpandableHeader;

package/dist/components/Table/components/Row.js

@@ -51,14 +51,14 @@ function RowImpl(props) {
             ":hover": { ...style.nonHeaderRowHoverCss },
         }),
         ...(levelIndent && Css_1.Css.mlPx(levelIndent).$),
-        // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
-        ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.flexNone.$).$),
+        // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `fn` to ensure they stay their defined widths
+        ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.fn.$).$),
         // Apply `cursorPointer` to the row if it has a link or `onClick` value.
         ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) && { "&:hover": Css_1.Css.cursorPointer.$ }),
         ...(0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
         ...{
-            [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
-            [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
+            [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.vh.$,
+            [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.vh.$,
         },
         ...(isLastKeptRow && Css_1.Css.addIn("&>*", style.keptLastRowCss).$),
     };

package/dist/components/Table/components/SortHeader.js

@@ -33,6 +33,6 @@ function SortHeader(props) {
                     .if(isHovered || sorted !== undefined)
                     .visibility("visible").$,
             }, inc: 2, ...tid.icon }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { ...tid, css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss }, ...hoverProps, onClick: toggleSort, children: [iconOnLeft && icon, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp2.$, children: content }), tooltipEl, !iconOnLeft && icon] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...tid, css: { ...Css_1.Css.df.aic.h100.cursorPointer.usn.$, ...xss }, ...hoverProps, onClick: toggleSort, children: [iconOnLeft && icon, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp2.$, children: content }), tooltipEl, !iconOnLeft && icon] }));
 }
 exports.SortHeader = SortHeader;

package/dist/components/Table/components/cell.js

@@ -24,9 +24,9 @@ exports.headerRenderFn = headerRenderFn;
 const rowLinkRenderFn = (as, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const to = rowStyle.rowLink(row);
     if (as === "table") {
-        return ((0, jsx_runtime_1.jsx)("td", { css: { ...css }, className: classNames, colSpan: colSpan, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink, children: content }) }, key));
+        return ((0, jsx_runtime_1.jsx)("td", { css: { ...css }, className: classNames, colSpan: colSpan, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: Css_1.Css.tdn.color("unset").db.$, className: CssReset_1.navLink, children: content }) }, key));
     }
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}`, children: content }, key));
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: { ...Css_1.Css.tdn.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}`, children: content }, key));
 };
 exports.rowLinkRenderFn = rowLinkRenderFn;
 /** Renders a cell that will fire the RowStyle.onClick. */

package/dist/components/Tabs.js

@@ -80,7 +80,7 @@ function Tabs(props) {
             setActive(selected);
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { css: { ...Css_1.Css.df.aic.overflowAuto.nowrap.gap1.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) }, children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", { ref: ref, css: Css_1.Css.dif.gap1.asfe.$, "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: { ...Css_1.Css.df.aic.oa.wsnw.gap1.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bcGray200.$ } : {}) }, children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", { ref: ref, css: Css_1.Css.dif.gap1.asfe.$, "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
                     const uniqueValue = uniqueTabValue(tab);
                     return ((0, jsx_runtime_1.jsx)(TabImpl, { active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab, ...tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)] }, uniqueValue));
                 }) })), right && (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mla.df.aic.gap1.pb1.$, children: right })] }));
@@ -132,11 +132,11 @@ 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).bBlue700.smMd.gray900.$,
+        activeStyles: Css_1.Css.add(borderBottomStyles).bcBlue700.smMd.gray900.$,
         disabledStyles: Css_1.Css.gray400.cursorNotAllowed.$,
         focusRingStyles: Css_1.Css.bgBlue50.bshFocus.$,
-        hoverStyles: Css_1.Css.add(borderBottomStyles).bGray400.$,
-        activeHoverStyles: Css_1.Css.bgBlue50.add(borderBottomStyles).bBlue700.$,
+        hoverStyles: Css_1.Css.add(borderBottomStyles).bcGray400.$,
+        activeHoverStyles: Css_1.Css.bgBlue50.add(borderBottomStyles).bcBlue700.$,
     };
 }
 exports.getTabStyles = getTabStyles;

package/dist/components/Tag.js

@@ -9,7 +9,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.jsxs)("span", { ...tid, css: { ...Css_1.Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles, ...xss }, title: text, children: [otherProps.icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: otherProps.icon, inc: 1.5 }) })), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp1.breakAll.$, children: text })] }));
+    return ((0, jsx_runtime_1.jsxs)("span", { ...tid, css: { ...Css_1.Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles, ...xss }, title: text, children: [otherProps.icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: otherProps.icon, inc: 1.5 }) })), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp1.wbba.$, children: text })] }));
 }
 exports.Tag = Tag;
 function getStyles(type) {

package/dist/components/ToggleChip.js

@@ -22,6 +22,6 @@ function ToggleChip(props) {
             ":hover:not(:disabled)": Css_1.Css.bgGray300.$,
             ":disabled": Css_1.Css.cursorNotAllowed.$,
             ...xss,
-        }, disabled: disabled, onClick: onClick, ...tid, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.prPx(6).tl.lineClamp1.breakAll.if(disabled).pr0.$, title: text, children: text }), !disabled && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.br16.bgGray400.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "x", color: Css_1.Palette.Gray700, inc: compact ? 2 : undefined }) }))] }));
+        }, disabled: disabled, onClick: onClick, ...tid, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.prPx(6).tal.lineClamp1.wbba.if(disabled).pr0.$, title: text, children: text }), !disabled && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.br16.bgGray400.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "x", color: Css_1.Palette.Gray700, inc: compact ? 2 : undefined }) }))] }));
 }
 exports.ToggleChip = ToggleChip;

package/dist/components/internal/CompoundField.js

@@ -9,7 +9,7 @@ function CompoundField({ children }) {
     if ((children === null || children === void 0 ? void 0 : children.length) !== 2) {
         throw global.Error("CompoundField requires two children components");
     }
-    const commonStyles = Css_1.Css.df.aic.fs1.maxwPx(550).bt.bb.bGray300.$;
+    const commonStyles = Css_1.Css.df.aic.fs1.maxwPx(550).bt.bb.bcGray300.$;
     const internalProps = { compound: true };
     return ((0, jsx_runtime_1.jsxs)("div", { css: {
             ...Css_1.Css.df.$,
@@ -17,13 +17,13 @@ function CompoundField({ children }) {
         }, children: [(0, jsx_runtime_1.jsx)("div", { css: {
                     ...commonStyles,
                     ...Css_1.Css.bl.borderRadius("4px 0 0 4px").$,
-                    "&:focus-within": Css_1.Css.bBlue700.$,
+                    "&:focus-within": Css_1.Css.bcBlue700.$,
                 }, children: (0, react_1.cloneElement)(children[0], {
                     internalProps,
-                }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).flexNone.bgGray300.$ }), (0, jsx_runtime_1.jsx)("div", { css: {
+                }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).fn.bgGray300.$ }), (0, jsx_runtime_1.jsx)("div", { css: {
                     ...commonStyles,
                     ...Css_1.Css.fg1.br.borderRadius("0 4px 4px 0").$,
-                    "&:focus-within": Css_1.Css.bBlue700.$,
+                    "&:focus-within": Css_1.Css.bcBlue700.$,
                 }, children: (0, react_1.cloneElement)(children[1], {
                     internalProps,
                 }) })] }));

package/dist/components/internal/ContextualModal.js

@@ -8,6 +8,6 @@ const utils_1 = require("../../utils");
 function ContextualModal(props) {
     const { content, title, close } = props;
     const tid = (0, utils_1.useTestIds)(props, "popup");
-    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.p3.df.fdc.gap3.bgWhite.bshModal.br4.maxh("inherit").overflowAuto.$, ...tid, children: [title && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.lg.tc.$, ...tid.title, children: title })), (0, jsx_runtime_1.jsx)("div", { ...tid.content, children: typeof content === "function" ? content(close) : content })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.p3.df.fdc.gap3.bgWhite.bshModal.br4.maxh("inherit").oa.$, ...tid, children: [title && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.lg.tac.$, ...tid.title, children: title })), (0, jsx_runtime_1.jsx)("div", { ...tid.content, children: typeof content === "function" ? content(close) : content })] }) }));
 }
 exports.ContextualModal = ContextualModal;

package/dist/components/internal/DatePicker/Day.js

@@ -32,14 +32,14 @@ function Day(props) {
                 "&:hover:not(:active) > div": Css_1.Css.bgGray100.$,
             }),
             ...(!disabled && { "&:active > div": Css_1.Css.bgGray400.gray900.$ }),
-            "&:focus:not(:active) > div": Css_1.Css.ba.bBlue700.if(selected).bBlue900.$,
+            "&:focus:not(:active) > div": Css_1.Css.ba.bcBlue700.if(selected).bcBlue900.$,
             ...(showRangeStyles &&
                 range_start &&
                 Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.rightPx(-2).wPx(8).$ }).$),
             ...(showRangeStyles && range_end && Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.wPx(8).leftPx(-2).$ }).$),
             ...(showRangeStyles && range_middle && Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.leftPx(-2).$ }).$),
         }, ...tid, children: (0, jsx_runtime_1.jsxs)("div", { css: {
-                ...Css_1.Css.overflowHidden.gray900.relative.z1.br4.df.aic.jcc.wPx(28).hPx(30).mtPx(2).br4.$,
+                ...Css_1.Css.oh.gray900.relative.z1.br4.df.aic.jcc.wPx(28).hPx(30).mtPx(2).br4.$,
                 ...(today && !range_middle && Css_1.Css.bgGray100.$),
                 ...(selected && !range_middle && Css_1.Css.white.bgBlue700.$),
                 ...(disabled && Css_1.Css.gray500.$),

package/dist/components/internal/Menu.js

@@ -65,7 +65,7 @@ function Menu(props) {
     return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsxs)("div", { 
             // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container, which updates based on the available space for the overlay within the viewport
             css: {
-                ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.maxh("inherit").overflowAuto.if(contrast).bgGray900.$,
+                ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.maxh("inherit").oa.if(contrast).bgGray900.$,
                 "&:hover": Css_1.Css.bshHover.$,
             }, children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, { section: item, state: state, onClose: onClose, contrast: contrast, ...tid }, item.key))) })] }) }));
 }

package/dist/components/internal/MenuSection.js

@@ -12,6 +12,6 @@ function MenuSectionImpl(props) {
     const { separatorProps } = (0, react_aria_1.useSeparator)({ elementType: "li" });
     const isPersistentSection = section.key !== state.collection.getFirstKey();
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", { ...separatorProps, css: Css_1.Css.bt.bGray200.$ }), (0, jsx_runtime_1.jsx)("li", { ...itemProps, css: Css_1.Css.gray900.if(!isPersistentSection).overflowAuto.if(contrast).white.$, children: (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => ((0, jsx_runtime_1.jsx)(internal_1.MenuItemImpl, { item: item, state: state, onClose: onClose, contrast: contrast, ...tid }, item.key))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", { ...separatorProps, css: Css_1.Css.bt.bcGray200.$ }), (0, jsx_runtime_1.jsx)("li", { ...itemProps, css: Css_1.Css.gray900.if(!isPersistentSection).oa.if(contrast).white.$, children: (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => ((0, jsx_runtime_1.jsx)(internal_1.MenuItemImpl, { item: item, state: state, onClose: onClose, contrast: contrast, ...tid }, item.key))) }) })] }));
 }
 exports.MenuSectionImpl = MenuSectionImpl;

package/dist/forms/StepperFormApp.js

@@ -67,12 +67,12 @@ function StepperForm({ formState }) {
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Stepper_1.Stepper, { steps: steps, currentStep: currentStep, onChange: setActiveStep }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mt2.$, children: [currentStep === "author" && (0, jsx_runtime_1.jsx)(AuthorDetails, { formState: formState, onNext: onNext }), currentStep === "books" && (0, jsx_runtime_1.jsx)(BookList, { formState: formState, onNext: onNext, onBack: onBack }), currentStep === "misc" && (0, jsx_runtime_1.jsx)(MiscAuthorDetails, { formState: formState, onBack: onBack })] })] }));
 }
 function AuthorDetails({ formState, onNext }) {
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.mb1.$, children: "Author Details" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { field: formState.firstName, helperText: "Required to enable next step" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { field: formState.lastName, helperText: "Required to enable next step" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.jcfe.bt.bGray300.py1.mt2.$, children: (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Books", disabled: !formState.firstName.valid || !formState.lastName.valid, onClick: onNext }) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.mb1.$, children: "Author Details" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { field: formState.firstName, helperText: "Required to enable next step" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { field: formState.lastName, helperText: "Required to enable next step" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.jcfe.bt.bcGray300.py1.mt2.$, children: (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Books", disabled: !formState.firstName.valid || !formState.lastName.valid, onClick: onNext }) })] })) }));
 }
 function BookList({ formState, onNext, onBack }) {
     const columns = (0, react_1.useMemo)(() => createColumns(formState), [formState]);
     const rows = (0, hooks_1.useComputed)(() => [components_1.simpleHeader, ...formState.books.rows.map((data) => ({ kind: "data", id: data.id.value, data }))], []);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h1", { css: Css_1.Css.df.aic.$, children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => { var _a; return formState.books.add({ id: String(((_a = formState.books.value) === null || _a === void 0 ? void 0 : _a.length) || 1) }); } })] }), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }), (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Misc.", disabled: !formState.books.valid, onClick: onNext })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h1", { css: Css_1.Css.df.aic.$, children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => { var _a; return formState.books.add({ id: String(((_a = formState.books.value) === null || _a === void 0 ? void 0 : _a.length) || 1) }); } })] }), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.bt.bcGray300.py1.mt2.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }), (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Misc.", disabled: !formState.books.valid, onClick: onNext })] })] }));
 }
 function createColumns(formState) {
     return [
@@ -91,7 +91,7 @@ function MiscAuthorDetails({ formState, onBack }) {
     const [showFormData, setShowFormData] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a, _b;
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.mb1.$, children: "Author Details" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundDateField_1.BoundDateField, { field: formState.birthday, helperText: "Required" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundNumberField_1.BoundNumberField, { field: formState.heightInInches }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }), (0, jsx_runtime_1.jsx)(components_1.Button, { disabled: !formState.valid, onClick: () => {
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.mb1.$, children: "Author Details" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundDateField_1.BoundDateField, { field: formState.birthday, helperText: "Required" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundNumberField_1.BoundNumberField, { field: formState.heightInInches }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.bt.bcGray300.py1.mt2.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }), (0, jsx_runtime_1.jsx)(components_1.Button, { disabled: !formState.valid, onClick: () => {
                                     if (formState.canSave()) {
                                         formState.commitChanges();
                                         setShowFormData(true);