@homebound/beam 2.352.0 → 2.354.0

package/dist/inputs/IconCard.js

@@ -32,7 +32,7 @@ function IconCard(props) {
     });
 }
 exports.IconCard = IconCard;
-const baseStyles = Css_1.Css.df.fdc.aic.jcc.wPx(130).hPx(114).ba.br8.bGray300.bgWhite.gap("12px").p2.tc.$;
-exports.selectedStyles = Css_1.Css.bw2.bBlue500.bgBlue50.$;
-const disabledStyles = Css_1.Css.bGray200.bgGray50.$;
+const baseStyles = Css_1.Css.df.fdc.aic.jcc.wPx(130).hPx(114).ba.br8.bcGray300.bgWhite.gap("12px").p2.tac.$;
+exports.selectedStyles = Css_1.Css.bw2.bcBlue500.bgBlue50.$;
+const disabledStyles = Css_1.Css.bcGray200.bgGray50.$;
 exports.iconCardStylesHover = Css_1.Css.bgGray100.$;

package/dist/inputs/NumberField.js

@@ -15,7 +15,7 @@ function NumberField(props) {
     var _a;
     // Determine default alignment based on presentation context
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const alignment = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberAlignment) === "right" ? Css_1.Css.tr.jcfe.$ : Css_1.Css.tl.jcfs.$;
+    const alignment = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberAlignment) === "right" ? Css_1.Css.tar.jcfe.$ : Css_1.Css.tal.jcfs.$;
     const { disabled, required, readOnly, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits = type === "dollars" ? 2 : undefined, truncate = false, onEnter, numberFormatOptions, numIntegerDigits, useGrouping = true, sizeToContent = false, positiveOnly = false, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;

package/dist/inputs/RadioGroupField.js

@@ -73,19 +73,19 @@ const whiteCircle = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white'
 // color-adjust: exact;
 // -webkit-print-color-adjust: exact;
 exports.radioReset = {
-    ...Css_1.Css.add("appearance", "none").p0.dib.vMid.add("userSelect", "none").fs0.h2.w2.br100.$,
+    ...Css_1.Css.add("appearance", "none").p0.dib.vam.add("userSelect", "none").fs0.h2.w2.br100.$,
     ...Css_1.Css.add("outline", "0px solid transparent").$,
 };
 exports.radioDefault = {
     // By default we're a white circle with a gray border
-    ...Css_1.Css.bgWhite.bGray300.ba.$,
+    ...Css_1.Css.bgWhite.bcGray300.ba.$,
     // Set the "selected" color that will be used by background=currentColor + box shadow, but is initially ignored
     ...Css_1.Css.blue700.$,
     // Apply our default transitions
     ...Css_1.Css.transition.$,
 };
 // Unchecked means a gray border
-exports.radioUnchecked = Css_1.Css.cursorPointer.bGray300.$;
+exports.radioUnchecked = Css_1.Css.cursorPointer.bcGray300.$;
 // Checked means a blue circle (achieved by a blue background + white dot background image)
 exports.radioChecked = {
     // Make the background become the current (blue) color
@@ -107,7 +107,7 @@ exports.radioFocus = {
 };
 exports.radioHover = {
     // Change both the dot and the border to a darker blue
-    ...Css_1.Css.blue900.bBlue900.$,
+    ...Css_1.Css.blue900.bcBlue900.$,
 };
 exports.radioDisabled = {
     ...Css_1.Css.cursorNotAllowed.gray100.$,

package/dist/inputs/RichTextField.js

@@ -110,7 +110,7 @@ function RichTextField(props) {
                         })] }), (0, jsx_runtime_1.jsx)(react_1.Global, { styles: [tributeOverrides] })] }));
     }
     else {
-        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.if(!fullWidth).maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mh("120px").bgWhite.sm.gray900.bn.p1.br4.bGray300.ba.$, dangerouslySetInnerHTML: { __html: dompurify_1.default.sanitize(value) || placeholder || "" }, "data-readonly": "true" })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.if(!fullWidth).maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mh("120px").bgWhite.sm.gray900.bn.p1.br4.bcGray300.ba.$, dangerouslySetInnerHTML: { __html: dompurify_1.default.sanitize(value) || placeholder || "" }, "data-readonly": "true" })] }));
     }
 }
 exports.RichTextField = RichTextField;
@@ -138,13 +138,13 @@ function attachTributeJs(mergeTags, editorElement) {
     catch (_a) { }
 }
 const trixCssOverrides = {
-    ...Css_1.Css.relative.add({ wordBreak: "break-word" }).br4.bGray300.ba.$,
+    ...Css_1.Css.relative.add({ wordBreak: "break-word" }).br4.bcGray300.ba.$,
     // Put the toolbar on the bottom
     ...Css_1.Css.df.fdcr.gap1.$,
     // Some basic copy/paste from TextFieldBase
     "& trix-editor": Css_1.Css.bgWhite.sm.gray900.bn.p1.$,
     // Highlight on focus
-    "&:focus-within": Css_1.Css.bBlue700.$,
+    "&:focus-within": Css_1.Css.bcBlue700.$,
     "& trix-toolbar": Css_1.Css.m1.$,
     // Make the buttons closer to ours
     "& .trix-button:not(:first-of-type)": Css_1.Css.bn.$,
@@ -169,7 +169,7 @@ const trixCssOverrides = {
 // Style the @ mention box
 const tributeOverrides = {
     ".tribute-container": Css_1.Css.add({ minWidth: "300px" }).$,
-    ".tribute-container > ul": Css_1.Css.sm.bgWhite.ba.br4.bBlue700.overflowHidden.$,
+    ".tribute-container > ul": Css_1.Css.sm.bgWhite.ba.br4.bcBlue700.oh.$,
 };
 function extractIdsFromMentions(mergeTags, content) {
     return mergeTags.filter((tag) => content.includes(`@${tag}`));

package/dist/inputs/Switch.js

@@ -21,7 +21,7 @@ function Switch(props) {
     const tooltip = (0, components_1.resolveTooltip)(disabled, props.tooltip);
     const tid = (0, utils_1.useTestIds)(otherProps, label);
     return ((0, jsx_runtime_1.jsxs)("label", { ...hoverProps, css: {
-            ...Css_1.Css.relative.cursorPointer.df.wmaxc.selectNone.$,
+            ...Css_1.Css.relative.cursorPointer.df.wmaxc.usn.$,
             ...(labelStyle === "form" && Css_1.Css.fdc.$),
             ...(labelStyle === "left" && Css_1.Css.w100.aic.$),
             ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),

package/dist/inputs/TextFieldBase.js

@@ -52,8 +52,8 @@ function TextFieldBase(props) {
             // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
             // Note: Do not modify width and position of 'compound' fields.
             ...(borderless && !compound
-                ? Css_1.Css.bTransparent.w("calc(100% + 16px)").ml(-1).$
-                : Css_1.Css.bGray300.if(contrast).bGray700.$),
+                ? Css_1.Css.bcTransparent.w("calc(100% + 16px)").ml(-1).$
+                : Css_1.Css.bcGray300.if(contrast).bcGray700.$),
             // Do not add borders to compound fields. A compound field is responsible for drawing its own borders
             ...(!compound ? Css_1.Css.ba.$ : {}),
             // When multiline is true, then we want to allow the field to grow to the height of the content, but not shrink below the minHeight
@@ -81,12 +81,12 @@ function TextFieldBase(props) {
             // For "multiline" fields we add top and bottom padding of 7px for compact, or 11px for non-compact, to properly match the height of the single line fields
             ...(multiline ? Css_1.Css.br4.pyPx(compact ? 7 : 11).add("resize", "none").$ : Css_1.Css.truncate.$),
         },
-        hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bGray600.$,
-        focus: Css_1.Css.bBlue700.if(contrast).bBlue500.$,
+        hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bcGray600.$,
+        focus: Css_1.Css.bcBlue700.if(contrast).bcBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$
             : Css_1.Css.cursorNotAllowed.$,
-        error: Css_1.Css.bRed600.if(contrast).bRed400.$,
+        error: Css_1.Css.bcRed600.if(contrast).bcRed400.$,
     };
     // Watch for each WIP change, convert empty to undefined, and call the user's onChange
     function onDomChange(e) {
@@ -126,12 +126,12 @@ function TextFieldBase(props) {
                                 ...(showHover ? fieldStyles.hover : {}),
                                 // Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
                                 ...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
-                                ...Css_1.Css.if(multiline).aifs.overflowHidden.mhPx(textAreaMinHeight).$,
+                                ...Css_1.Css.if(multiline).aifs.oh.mhPx(textAreaMinHeight).$,
                             }, ...hoverProps, ref: inputWrapRef, onClick: unfocusedPlaceholder ? handleUnfocusedPlaceholderClick : undefined, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.asc.fs0.br4.pr1.$, children: startAdornment }), unfocusedPlaceholder && ((0, jsx_runtime_1.jsx)("div", { 
                                     // Setting -1 tabIndex as this is a scrollable container, which is focusable by default.
                                     // However, we want the user's focus to move to the field element, which will hide this container.
                                     tabIndex: -1, ...tid.unfocusedPlaceholderContainer, css: {
-                                        ...Css_1.Css.df.asc.w100.maxhPx(74).overflowAuto.$,
+                                        ...Css_1.Css.df.asc.w100.maxhPx(74).oa.$,
                                         ...fieldStyles.input,
                                         ...(showHover ? fieldStyles.hover : {}),
                                         ...(inputProps.disabled ? fieldStyles.disabled : {}),

package/dist/inputs/ToggleButton.js

@@ -37,8 +37,8 @@ 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").smMd
-                .selectNone.$,
+            ...Css_1.Css.br4.dif.aic.gap1.bgTransparent.gray500.hPx(32).plPx(4).pr1.relative.cursorPointer.w("max-content").smMd.usn
+                .$,
             ...(isHovered && exports.toggleHoverStyles),
             ...(isPressed && exports.togglePressStyles),
             ...(isSelected && !isDisabled && Css_1.Css.blue700.$),

package/dist/inputs/internal/ListBox.js

@@ -60,7 +60,7 @@ function ListBox(props) {
             // Add `w50` in that case to ensure the ListBox is only the width of the field. If the width definitions ever change, we need to update here as well.
             ...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.if(horizontalLayout).w50.$,
             "&:hover": Css_1.Css.bshHover.$,
-        }, ref: listBoxRef, ...listBoxProps, children: [isMultiSelect && !isTree && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").maxh("50%").overflowAuto.$, ref: selectedList, children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.fg1.$, children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
+        }, ref: listBoxRef, ...listBoxProps, children: [isMultiSelect && !isTree && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bcGray200.add("flexWrap", "wrap").maxh("50%").oa.$, ref: selectedList, children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.fg1.$, children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
                     scrollOnFocus: props.shouldUseVirtualFocus, disabledOptionsWithReasons: disabledOptionsWithReasons }, section.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: [...state.collection], onListHeightChange: onListHeightChange, contrast: contrast, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))

package/dist/inputs/internal/ListBoxChip.js

@@ -7,6 +7,6 @@ const Css_1 = require("../../Css");
 function ListBoxChip({ label }) {
     var _a;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    return ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[(_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _a !== void 0 ? _a : "sm"].tl.bgGray300.gray900.br16.pxPx(10).pyPx(2).lineClamp1.breakAll.$, title: label, children: label }));
+    return ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[(_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _a !== void 0 ? _a : "sm"].tal.bgGray300.gray900.br16.pxPx(10).pyPx(2).lineClamp1.wbba.$, title: label, children: label }));
 }
 exports.ListBoxChip = ListBoxChip;

package/dist/inputs/internal/ListBoxSection.js

@@ -15,6 +15,6 @@ function ListBoxSection(props) {
     const { separatorProps } = (0, react_aria_1.useSeparator)({ elementType: "li" });
     const isPersistentSection = section.key !== state.collection.getFirstKey();
     const childNodes = [...section.childNodes];
-    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.if(!isPersistentSection).overflowAuto.$, children: (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.if(!isPersistentSection).hPx(popoverHeight - constants_1.sectionSeparatorHeight - constants_1.persistentItemHeight).$, ...groupProps, children: isPersistentSection ? (childNodes.map((item) => ((0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast, disabledReason: disabledOptionsWithReasons[item.key] }, item.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: childNodes, onListHeightChange: onListHeightChange, contrast: contrast, scrollOnFocus: scrollOnFocus, disabledOptionsWithReasons: disabledOptionsWithReasons })) }) })] }));
+    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.if(!isPersistentSection).oa.$, children: (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.if(!isPersistentSection).hPx(popoverHeight - constants_1.sectionSeparatorHeight - constants_1.persistentItemHeight).$, ...groupProps, children: isPersistentSection ? (childNodes.map((item) => ((0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast, disabledReason: disabledOptionsWithReasons[item.key] }, item.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: childNodes, onListHeightChange: onListHeightChange, contrast: contrast, scrollOnFocus: scrollOnFocus, disabledOptionsWithReasons: disabledOptionsWithReasons })) }) })] }));
 }
 exports.ListBoxSection = ListBoxSection;

package/dist/inputs/internal/Option.js

@@ -28,7 +28,7 @@ function Option(props) {
         children: ((0, jsx_runtime_1.jsxs)("li", { ...(0, react_aria_1.mergeProps)(optionProps, hoverProps), "data-label": item.textValue, ref: ref, css: {
                 ...Css_1.Css.df.aic.jcsb.py1.px2.mh("42px").outline0.cursorPointer.sm.$,
                 // Assumes only one Persistent Item per list - will need to change to utilize Sections if that assumption is incorrect.
-                ...((0, ChipSelectField_1.isPersistentKey)(item.key) ? Css_1.Css.bt.bGray200.$ : {}),
+                ...((0, ChipSelectField_1.isPersistentKey)(item.key) ? Css_1.Css.bt.bcGray200.$ : {}),
                 ...themeStyles.item,
                 ...(isHovered && !isDisabled ? themeStyles.hover : {}),
                 ...(isFocused ? themeStyles.focus : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.352.0",
+  "version": "2.354.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,7 +78,7 @@
     "@homebound/eslint-config": "^1.10.2",
     "@homebound/rtl-react-router-utils": "1.0.3",
     "@homebound/rtl-utils": "^2.65.0",
-    "@homebound/truss": "^1.134.0",
+    "@homebound/truss": "^1.135.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",