@homebound/beam 2.305.0 → 2.306.0

package/dist/components/Accordion.js

@@ -42,7 +42,7 @@ function Accordion(props) {
         }, children: [(0, jsx_runtime_1.jsxs)("button", { ...testIds.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled: disabled, css: {
                     ...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}`).$),
+                    ...(isFocusVisible && Css_1.Css.boxShadow(`inset 0 0 0 2px ${Css_1.Palette.Blue700}`).$),
                     ...xss,
                 }, onClick: () => {
                     setExpanded(!expanded);

package/dist/components/Button.js

@@ -78,10 +78,10 @@ function getButtonStyles(variant, size, contrast) {
 }
 const variantStyles = (contrast) => ({
     primary: {
-        baseStyles: Css_1.Css.bgLightBlue700.white.if(contrast).bgLightBlue400.$,
-        hoverStyles: Css_1.Css.bgLightBlue900.if(contrast).bgLightBlue500.$,
-        pressedStyles: Css_1.Css.bgLightBlue500.if(contrast).bgLightBlue900.$,
-        disabledStyles: Css_1.Css.bgLightBlue200.if(contrast).gray600.bgLightBlue900.$,
+        baseStyles: Css_1.Css.bgBlue600.white.$,
+        hoverStyles: Css_1.Css.bgBlue700.$,
+        pressedStyles: Css_1.Css.bgBlue800.$,
+        disabledStyles: Css_1.Css.bgBlue200.if(contrast).gray600.bgBlue900.$,
         focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
     secondary: {
@@ -92,33 +92,33 @@ const variantStyles = (contrast) => ({
         focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
     tertiary: {
-        baseStyles: Css_1.Css.bgTransparent.lightBlue700.if(contrast).white.$,
+        baseStyles: Css_1.Css.bgTransparent.blue600.if(contrast).white.$,
         hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray700.white.$,
-        pressedStyles: Css_1.Css.lightBlue900.if(contrast).bgWhite.gray900.$,
+        pressedStyles: Css_1.Css.blue800.if(contrast).bgWhite.gray900.$,
         disabledStyles: Css_1.Css.gray400.if(contrast).gray700.$,
-        focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.LightBlue400}`).bgGray700.white.$,
+        focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.Blue400}`).bgGray700.white.$,
     },
     tertiaryDanger: {
-        baseStyles: Css_1.Css.bgTransparent.red500.if(contrast).red500.$,
+        baseStyles: Css_1.Css.bgTransparent.red600.if(contrast).red400.$,
         hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray700.white.$,
-        pressedStyles: Css_1.Css.red900.if(contrast).bgWhite.gray900.$,
+        pressedStyles: Css_1.Css.red800.if(contrast).bgWhite.gray900.$,
         disabledStyles: Css_1.Css.gray400.if(contrast).gray700.$,
         focusStyles: Css_1.Css.boxShadow(`0px 0px 0px 2px ${Css_1.Palette.White}, 0px 0px 0px 4px ${Css_1.Palette.Red500}`)
             .if(contrast)
             .boxShadow(`0px 0px 0px 2px ${Css_1.Palette.Red500}`).$,
     },
     danger: {
-        baseStyles: Css_1.Css.bgRed900.white.if(contrast).bgRed800.$,
-        hoverStyles: Css_1.Css.bgRed500.if(contrast).bgRed600.$,
-        pressedStyles: Css_1.Css.bgRed900.if(contrast).bgRed800.$,
+        baseStyles: Css_1.Css.bgRed600.white.$,
+        hoverStyles: Css_1.Css.bgRed700.$,
+        pressedStyles: Css_1.Css.bgRed800.$,
         disabledStyles: Css_1.Css.bgRed200.if(contrast).bgRed900.gray600.$,
         focusStyles: Css_1.Css.bshDanger.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
     text: {
-        baseStyles: Css_1.Css.lightBlue700.add("fontSize", "inherit").if(contrast).lightBlue400.$,
-        hoverStyles: Css_1.Css.lightBlue600.if(contrast).lightBlue300.$,
-        pressedStyles: Css_1.Css.lightBlue700.if(contrast).lightBlue200.$,
-        disabledStyles: Css_1.Css.lightBlue300.if(contrast).lightBlue700.$,
+        baseStyles: Css_1.Css.blue700.add("fontSize", "inherit").if(contrast).blue400.$,
+        hoverStyles: Css_1.Css.blue600.if(contrast).blue300.$,
+        pressedStyles: Css_1.Css.blue700.if(contrast).blue200.$,
+        disabledStyles: Css_1.Css.blue300.if(contrast).blue700.$,
         focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
     // Todo: handle contrast variant

package/dist/components/Chip.js

@@ -34,12 +34,12 @@ function Chip({ type = exports.ChipTypes.neutral, ...props }) {
 }
 exports.Chip = Chip;
 const typeStyles = {
-    caution: Css_1.Css.bgYellow400.$,
-    warning: Css_1.Css.bgRed100.$,
-    success: Css_1.Css.bgGreen100.$,
+    caution: Css_1.Css.bgYellow200.$,
+    warning: Css_1.Css.bgRed200.$,
+    success: Css_1.Css.bgGreen200.$,
     light: Css_1.Css.bgWhite.$,
     dark: Css_1.Css.bgGray900.white.$,
     neutral: Css_1.Css.bgGray200.$,
     darkMode: Css_1.Css.bgGray700.white.$,
-    info: Css_1.Css.bgLightBlue100.$,
+    info: Css_1.Css.bgBlue100.$,
 };

package/dist/components/CssReset.js

@@ -17,11 +17,11 @@ exports.CssReset = CssReset;
 exports.navLink = "navLink";
 const ourReset = (0, react_1.css) `
   a:not(.${exports.navLink}) {
-    color: ${Css_1.Palette.LightBlue700};
+    color: ${Css_1.Palette.Blue700};
   }
 
   a:visited:not(.${exports.navLink}) {
-    color: ${Css_1.Palette.LightBlue500};
+    color: ${Css_1.Palette.Blue500};
   }
 
   /**

package/dist/components/DnDGrid/DnDGridItemHandle.js

@@ -15,7 +15,7 @@ function DnDGridItemHandle(props) {
     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)
-                .bLightBlue700.$,
+                .bBlue700.$,
             ...(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/Filters.js

@@ -32,7 +32,7 @@ function Filters(props) {
     // Return list of filter components. `onSelect` should update the `filter`
     return ((0, jsx_runtime_1.jsxs)("div", { css: {
             ...(vertical ? Css_1.Css.df.fdc.gap2.$ : Css_1.Css.df.aic.gap1.$),
-        }, ...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, { label: "More Filters", endAdornment: numModalFilters > 0 && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$, children: numModalFilters })), 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, { label: "More Filters", endAdornment: numModalFilters > 0 && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, children: numModalFilters })), variant: "secondary", onClick: () => openModal({
                     // Spreading `props` to pass along `data-testid`
                     content: (0, jsx_runtime_1.jsx)(Filters_1.FilterModal, { ...props, filter: filter, onApply: onChange, filters: modalFilters }),
                 }), ...testId.moreFiltersBtn })), Object.keys(filter).length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) }))] }));

package/dist/components/IconButton.js

@@ -57,5 +57,5 @@ 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.bLightBlue700.$;
+const iconButtonStylesFocus = Css_1.Css.bBlue700.$;
 const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;

package/dist/components/Loader.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Css_1 = require("../Css");
 function Loader({ size = "lg", contrast = false }) {
     const [dimensions, borderSize] = sizeToPixels[size];
-    const [bgColor, spinnerColor] = contrast ? [Css_1.Palette.Gray600, Css_1.Palette.Gray200] : [Css_1.Palette.White, Css_1.Palette.LightBlue700];
+    const [bgColor, spinnerColor] = contrast ? [Css_1.Palette.Gray600, Css_1.Palette.Gray200] : [Css_1.Palette.White, Css_1.Palette.Blue700];
     return ((0, jsx_runtime_1.jsx)("div", { "aria-label": "Loading", css: Css_1.Css.br100.ba
             .hPx(dimensions)
             .wPx(dimensions)

package/dist/components/NavLink.js

@@ -46,9 +46,9 @@ 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.$ },
-        activeStyles: Css_1.Css.lightBlue700.bgLightBlue50.if(contrast).white.bgGray700.$,
+        activeStyles: Css_1.Css.blue700.bgBlue50.if(contrast).white.bgGray700.$,
         disabledStyles: Css_1.Css.gray400.cursorNotAllowed.if(contrast).gray800.$,
-        focusRingStyles: Css_1.Css.bgLightBlue50.bshFocus.if(contrast).bgGray700.white.$,
+        focusRingStyles: Css_1.Css.bgBlue50.bshFocus.if(contrast).bgGray700.white.$,
         hoverStyles: Css_1.Css.gray700.bgGray100.if(contrast).bgGray800.gray600.$,
         pressedStyles: Css_1.Css.gray700.bgGray200.if(contrast).bgGray200.gray800.$,
     },

package/dist/components/Pagination.js

@@ -29,7 +29,7 @@ function Pagination(props) {
         }
     }
     const tid = (0, utils_1.useTestIds)(props, "pagination");
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray300.bt.xs.gray500.px1.ml2.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: exports.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.LightBlue700 : 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.LightBlue700 : 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.bGray300.bt.xs.gray500.px1.ml2.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: exports.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/Snackbar/SnackbarNotice.js

@@ -17,9 +17,9 @@ function SnackbarNotice(props) {
 exports.SnackbarNotice = SnackbarNotice;
 const typeToIcon = {
     // Can change to a Tupple with IconKey and color?
-    error: { icon: "xCircle", color: Css_1.Palette.Red300 },
+    error: { icon: "xCircle", color: Css_1.Palette.Red400 },
     warning: { icon: "error", color: Css_1.Palette.Yellow300 },
     success: { icon: "checkCircle", color: Css_1.Palette.Green300 },
-    info: { icon: "infoCircle", color: Css_1.Palette.LightBlue200 },
+    info: { icon: "infoCircle", color: Css_1.Palette.Blue300 },
     alert: { icon: "errorCircle", color: Css_1.Palette.White },
 };

package/dist/components/Stepper.js

@@ -25,9 +25,8 @@ function Stepper(props) {
                 }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mt1.bgGray300
                     .hPx(4)
                     .maxwPx(steps.length * maxStepWidth + (steps.length - 1) * gap)
-                    .mwPx(steps.length * minStepWidth + (steps.length - 1) * gap).w100.$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgLightBlue600
-                        .add("transition", "width 200ms")
-                        .h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`).$ }) })] }));
+                    .mwPx(steps.length * minStepWidth + (steps.length - 1) * gap).w100.$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgBlue600.add("transition", "width 200ms").h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`)
+                        .$ }) })] }));
 }
 exports.Stepper = Stepper;
 function StepButton(props) {
@@ -42,9 +41,9 @@ function StepButton(props) {
     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.$,
-            ...(isCurrent ? Css_1.Css.lightBlue700.if(state === "error").red800.$ : {}),
-            ...(isHovered && !isPressed ? Css_1.Css.lightBlue800.if(state === "error").red500.$ : {}),
-            ...(isPressed ? Css_1.Css.lightBlue500.if(state === "error").red900.$ : {}),
+            ...(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.$ : {}),
             ...(disabled ? Css_1.Css.gray400.cursorNotAllowed.if(state === "error").red200.$ : {}),
             ...(isFocusVisible ? focusRingStyles : {}),
         }, ...tid[(0, defaultTestId_1.defaultTestId)(label)], children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.mrPx(4).$, children: (0, jsx_runtime_1.jsx)(StepIcon, { state: state, isHovered: isHovered, isPressed: isPressed, isCurrent: isCurrent }) }), label] }));

package/dist/components/Table/TableStyles.js

@@ -61,7 +61,7 @@ function memoizedTableStyles() {
                     : Css_1.Css.addIn("> *", Css_1.Css.bsh0.$).$,
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
                 levels: grouped ? groupedLevels : defaultLevels,
-                rowHoverColor: Css_1.Palette.LightBlue100,
+                rowHoverColor: Css_1.Palette.Blue100,
                 keptGroupRowCss: Css_1.Css.bgYellow100.gray900.xsMd.$,
                 keptLastRowCss: Css_1.Css.boxShadow("inset 0px -14px 8px -11px rgba(63,63,63,.18)").$,
             };

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

@@ -19,7 +19,7 @@ function ExpandableHeader(props) {
     // Do not apply sticky styles when rendering as table. Currently the table does not properly respect column widths, causing the sticky offsets to be incorrect
     const applyStickyStyles = isExpanded && as !== "table";
     const { hoverProps, isHovered } = (0, hooks_1.useHover)({});
-    return ((0, jsx_runtime_1.jsxs)("button", { ...hoverProps, css: Css_1.Css.df.xsMd.aic.jcsb.gap2.px1.hPx(32).mxPx(-8).w("calc(100% + 16px)").br4.lightBlue700.if(isHovered).bgGray100.$, onClick: async () => {
+    return ((0, jsx_runtime_1.jsxs)("button", { ...hoverProps, css: Css_1.Css.df.xsMd.aic.jcsb.gap2.px1.hPx(32).mxPx(-8).w("calc(100% + 16px)").br4.blue700.if(isHovered).bgGray100.$, onClick: async () => {
             if ((0, utils_2.isFunction)(column.expandColumns)) {
                 setIsLoading(true);
                 await tableState.loadExpandedColumns(column.id);

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

@@ -58,7 +58,7 @@ function RowImpl(props) {
         // Optionally include the row hover styles, by default they should be turned on.
         ...(showRowHoverColor && {
             // Even though backgroundColor is set on the cellCss, the hover target is the row.
-            "&:hover > *": Css_1.Css.bgColor((_b = style.rowHoverColor) !== null && _b !== void 0 ? _b : Css_1.Palette.LightBlue100).$,
+            "&:hover > *": Css_1.Css.bgColor((_b = style.rowHoverColor) !== null && _b !== void 0 ? _b : Css_1.Palette.Blue100).$,
         }),
         // 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.$).$),
@@ -205,13 +205,13 @@ function RowImpl(props) {
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Apply active row styling for non-nested card styles.
-                ...(isActive ? Css_1.Css.bgColor((_d = style.activeBgColor) !== null && _d !== void 0 ? _d : Css_1.Palette.LightBlue50).$ : {}),
+                ...(isActive ? Css_1.Css.bgColor((_d = style.activeBgColor) !== null && _d !== void 0 ? _d : Css_1.Palette.Blue50).$ : {}),
                 // Add any cell specific style overrides
                 ...((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // And any cell specific css
                 ...((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.css ? maybeContent.css : {}),
                 // Apply cell highlight styles to active cell and hover
-                ...Css_1.Css.if(applyCellHighlight && isCellActive).br4.boxShadow(`inset 0 0 0 1px ${Css_1.Palette.LightBlue700}`).$,
+                ...Css_1.Css.if(applyCellHighlight && isCellActive).br4.boxShadow(`inset 0 0 0 1px ${Css_1.Palette.Blue700}`).$,
                 // Define the width of the column on each cell. Supports col spans.
                 width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")})`,
                 ...(typeof column.mw === "string" ? Css_1.Css.mw(column.mw).$ : {}),

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

@@ -27,7 +27,7 @@ function SortHeader(props) {
     const sorted = sortKey === (current === null || current === void 0 ? void 0 : current.columnId) ? current === null || current === void 0 ? void 0 : current.direction : undefined;
     const toggleSort = (0, react_1.useCallback)(() => tableState.setSortKey(sortKey), [sortKey, tableState]);
     const tid = (0, useTestIds_1.useTestIds)(props, "sortHeader");
-    const icon = ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400, xss: {
+    const icon = ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400, xss: {
                 ...Css_1.Css.ml1.if(iconOnLeft).mr1.ml0.$,
                 ...Css_1.Css.visibility("hidden")
                     .if(isHovered || sorted !== undefined)

package/dist/components/Table/utils/utils.js

@@ -36,7 +36,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     content =
         isGridCellContent(maybeContent) && !!maybeContent.onClick
             ? (0, getInteractiveElement_1.getButtonOrLink)(content, maybeContent.onClick, {
-                css: Css_1.Css.maxw100.lightBlue700.ta("inherit").if(((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false).truncate.$,
+                css: Css_1.Css.maxw100.blue700.ta("inherit").if(((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false).truncate.$,
             })
             : content;
     if (content && typeof content === "string" && isHeader && canSortColumn) {

package/dist/components/Tabs.js

@@ -127,11 +127,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).bLightBlue700.smMd.gray900.$,
+        activeStyles: Css_1.Css.add(borderBottomStyles).bBlue700.smMd.gray900.$,
         disabledStyles: Css_1.Css.gray400.cursorNotAllowed.$,
-        focusRingStyles: Css_1.Css.bgLightBlue50.bshFocus.$,
+        focusRingStyles: Css_1.Css.bgBlue50.bshFocus.$,
         hoverStyles: Css_1.Css.add(borderBottomStyles).bGray400.$,
-        activeHoverStyles: Css_1.Css.bgLightBlue50.add(borderBottomStyles).bLightBlue700.$,
+        activeHoverStyles: Css_1.Css.bgBlue50.add(borderBottomStyles).bBlue700.$,
     };
 }
 exports.getTabStyles = getTabStyles;

package/dist/components/Tag.js

@@ -15,13 +15,13 @@ exports.Tag = Tag;
 function getStyles(type) {
     switch (type) {
         case "info":
-            return Css_1.Css.bgLightBlue100.$;
+            return Css_1.Css.bgBlue100.$;
         case "caution":
             return Css_1.Css.bgYellow200.$;
         case "warning":
-            return Css_1.Css.bgRed100.$;
+            return Css_1.Css.bgRed200.$;
         case "success":
-            return Css_1.Css.bgGreen100.$;
+            return Css_1.Css.bgGreen200.$;
         default:
             // Neutral case
             return Css_1.Css.bgGray200.$;

package/dist/components/Toast/Toast.js

@@ -22,7 +22,7 @@ const typeToIcon = {
 };
 const variantStyles = {
     success: Css_1.Css.bgGreen100.gray900.$,
-    info: Css_1.Css.bgLightBlue100.gray900.$,
+    info: Css_1.Css.bgBlue100.gray900.$,
     warning: Css_1.Css.bgYellow200.gray900.$,
     alert: Css_1.Css.bgGray200.gray900.$,
     error: Css_1.Css.bgRed100.gray900.$,

package/dist/components/internal/CompoundField.js

@@ -13,17 +13,17 @@ function CompoundField({ children }) {
     const internalProps = { compound: true };
     return ((0, jsx_runtime_1.jsxs)("div", { css: {
             ...Css_1.Css.df.$,
-            "&:focus-within > div:nth-of-type(2)": Css_1.Css.bgLightBlue700.$, // Separation line when inputs are focused
+            "&:focus-within > div:nth-of-type(2)": Css_1.Css.bgBlue700.$, // Separation line when inputs are focused
         }, children: [(0, jsx_runtime_1.jsx)("div", { css: {
                     ...commonStyles,
                     ...Css_1.Css.bl.borderRadius("4px 0 0 4px").$,
-                    "&:focus-within": Css_1.Css.bLightBlue700.$,
+                    "&:focus-within": Css_1.Css.bBlue700.$,
                 }, 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: {
                     ...commonStyles,
                     ...Css_1.Css.fg1.br.borderRadius("0 4px 4px 0").$,
-                    "&:focus-within": Css_1.Css.bLightBlue700.$,
+                    "&:focus-within": Css_1.Css.bBlue700.$,
                 }, children: (0, react_1.cloneElement)(children[1], {
                     internalProps,
                 }) })] }));

package/dist/components/internal/DatePicker/DatePicker.css

@@ -1,7 +1,7 @@
 :root {
   /* Modified by Beam (40 -> 32) */
   --rdp-cell-size: 32px;
-  /* Modified by Beam (#0000ff -> LightBlue700) */
+  /* Modified by Beam (#0000ff -> Blue700) */
   --rdp-accent-color: rgba(3, 105, 161, 1);
   --rdp-background-color: #e7edff;
   /* Switch to dark colors for dark themes */
@@ -10,7 +10,7 @@
   /* Outline border for focused elements */
   --rdp-outline: 2px solid var(--rdp-accent-color);
   /* Outline border for focused and selected elements */
-  /* Modified by Beam (rgba(0, 0, 0, 0.75) -> LightBlue700) */
+  /* Modified by Beam (rgba(0, 0, 0, 0.75) -> Blue700) */
   --rdp-outline-selected: 2px solid rgba(3, 105, 161, 1);
 }
 

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

@@ -32,7 +32,7 @@ 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.bLightBlue700.if(selected).bLightBlue900.$,
+            "&:focus:not(:active) > div": Css_1.Css.ba.bBlue700.if(selected).bBlue900.$,
             ...(showRangeStyles &&
                 range_start &&
                 Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.rightPx(-2).wPx(8).$ }).$),
@@ -41,7 +41,7 @@ function Day(props) {
         }, ...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.$,
                 ...(today && !range_middle && Css_1.Css.bgGray100.$),
-                ...(selected && !range_middle && Css_1.Css.white.bgLightBlue700.$),
+                ...(selected && !range_middle && Css_1.Css.white.bgBlue700.$),
                 ...(disabled && Css_1.Css.gray500.$),
             }, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mtPx(-2).$, children: children }), indicatorDot && ((0, jsx_runtime_1.jsx)("div", { 
                     // Using `absolute` position as to not change the placement of the day's number when this is introduced
@@ -49,7 +49,7 @@ function Day(props) {
                         .bottomPx(4)
                         .wPx(4)
                         .hPx(4)
-                        .bgLightBlue700.br4.if(selected && !range_middle).bgWhite.$, ...tid.indicatorDot }))] }) }));
+                        .bgBlue700.br4.if(selected && !range_middle).bgWhite.$, ...tid.indicatorDot }))] }) }));
 }
 exports.Day = Day;
-const rangeBaseStyles = Css_1.Css.absolute.topPx(2).contentEmpty.hPx(30).wPx(32).bgLightBlue100.$;
+const rangeBaseStyles = Css_1.Css.absolute.topPx(2).contentEmpty.hPx(30).wPx(32).bgBlue100.$;

package/dist/components/internal/MenuItem.js

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_router_1 = require("react-router");
+const react_router_dom_1 = require("react-router-dom");
 const Avatar_1 = require("../Avatar");
 const Icon_1 = require("../Icon");
 const Tooltip_1 = require("../Tooltip");
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 const defaultTestId_1 = require("../../utils/defaultTestId");
-const react_router_dom_1 = require("react-router-dom");
 function MenuItemImpl(props) {
     const { item, state, onClose, contrast } = props;
     const menuItem = item.value;
@@ -53,7 +53,7 @@ function MenuItemImpl(props) {
     return ((0, jsx_runtime_1.jsx)("li", { ...menuItemProps, ...hoverProps, ref: ref, css: {
             ...Css_1.Css.df.aic.py1.px2.cursorPointer.outline0.mh("42px").sm.$,
             ...(!isDisabled && isHovered ? (contrast ? Css_1.Css.bgGray800.$ : Css_1.Css.bgGray100.$) : {}),
-            ...(isFocused ? Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${Css_1.Palette.LightBlue700}`).$ : {}),
+            ...(isFocused ? Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${Css_1.Palette.Blue700}`).$ : {}),
             ...(isDisabled ? Css_1.Css.gray500.cursorNotAllowed.$ : {}),
             ...(destructive ? Css_1.Css.red600.$ : {}),
             ...(isSelected ? Css_1.Css.fw5.$ : {}),
@@ -65,13 +65,7 @@ function MenuItemImpl(props) {
 }
 exports.MenuItemImpl = MenuItemImpl;
 function renderMenuItem(menuItem, isSelected, isDisabled, contrast) {
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.w100.aic.jcsb.gap2.$, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.aic.$, children: maybeWrapInLink(menuItem.onClick, isIconMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(IconMenuItem, { ...menuItem })) : isImageMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(ImageMenuItem, { ...menuItem })) : (menuItem.label), isDisabled) }), isSelected && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check", color: !contrast
-                    ? isDisabled
-                        ? Css_1.Palette.Gray400
-                        : Css_1.Palette.LightBlue700
-                    : isDisabled
-                        ? Css_1.Palette.Gray500
-                        : Css_1.Palette.White }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.w100.aic.jcsb.gap2.$, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.aic.$, children: maybeWrapInLink(menuItem.onClick, isIconMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(IconMenuItem, { ...menuItem })) : isImageMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(ImageMenuItem, { ...menuItem })) : (menuItem.label), isDisabled) }), isSelected && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check", color: !contrast ? (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Blue700) : isDisabled ? Css_1.Palette.Gray500 : Css_1.Palette.White }))] }));
 }
 function ImageMenuItem(item) {
     const { src, size = 24, label, isAvatar = false } = item;

package/dist/inputs/CheckboxBase.js

@@ -29,13 +29,13 @@ function CheckboxBase(props) {
 }
 exports.CheckboxBase = CheckboxBase;
 const baseStyles = Css_1.Css.hPx(16).mw((0, Css_1.px)(16)).relative.ba.bGray300.br4.bgWhite.transition.$;
-const filledBoxStyles = Css_1.Css.bLightBlue700.bgLightBlue700.$;
-const filledBoxHoverStyles = Css_1.Css.bgLightBlue900.$;
+const filledBoxStyles = Css_1.Css.bBlue700.bgBlue700.$;
+const filledBoxHoverStyles = Css_1.Css.bgBlue900.$;
 const disabledBoxStyles = Css_1.Css.bgGray50.bGray100.$;
 const disabledSelectedBoxStyles = Css_1.Css.bgGray400.bGray400.$;
 const disabledColor = Css_1.Css.gray300.$;
 const focusRingStyles = Css_1.Css.bshFocus.$;
-const hoverBorderStyles = Css_1.Css.bLightBlue900.$;
+const hoverBorderStyles = Css_1.Css.bBlue900.$;
 const markStyles = { svg: Css_1.Css.absolute.topPx(-1).leftPx(-1).$ };
 const labelStyles = Css_1.Css.smMd.$;
 const descStyles = Css_1.Css.sm.gray700.$;

package/dist/inputs/RadioGroupField.js

@@ -80,7 +80,7 @@ exports.radioDefault = {
     // By default we're a white circle with a gray border
     ...Css_1.Css.bgWhite.bGray300.ba.$,
     // Set the "selected" color that will be used by background=currentColor + box shadow, but is initially ignored
-    ...Css_1.Css.lightBlue700.$,
+    ...Css_1.Css.blue700.$,
     // Apply our default transitions
     ...Css_1.Css.transition.$,
 };
@@ -107,7 +107,7 @@ exports.radioFocus = {
 };
 exports.radioHover = {
     // Change both the dot and the border to a darker blue
-    ...Css_1.Css.lightBlue900.bLightBlue900.$,
+    ...Css_1.Css.blue900.bBlue900.$,
 };
 exports.radioDisabled = {
     ...Css_1.Css.cursorNotAllowed.gray100.$,

package/dist/inputs/RichTextField.js

@@ -120,7 +120,7 @@ function attachTributeJs(mergeTags, editorElement) {
         noMatchTemplate: () => `<span style:"visibility: hidden;"></span>`,
         // According to the Tribute Types, `original.value` should always be present.
         // However, we have received errors in DataDog for "Cannot read properties of undefined (reading 'original')", so we're adding some checks.
-        selectTemplate: (item) => { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.original) === null || _a === void 0 ? void 0 : _a.value) ? `<span style="color: ${Css_1.Palette.LightBlue700};">@${item.original.value}</span>` : ""; },
+        selectTemplate: (item) => { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.original) === null || _a === void 0 ? void 0 : _a.value) ? `<span style="color: ${Css_1.Palette.Blue700};">@${item.original.value}</span>` : ""; },
         values,
     });
     // In dev mode, this fails because jsdom doesn't support contentEditable. Note that
@@ -138,7 +138,7 @@ const trixCssOverrides = {
     // Some basic copy/paste from TextFieldBase
     "& trix-editor": Css_1.Css.bgWhite.sm.gray900.bn.p1.$,
     // Highlight on focus
-    "&:focus-within": Css_1.Css.bLightBlue700.$,
+    "&:focus-within": Css_1.Css.bBlue700.$,
     "& trix-toolbar": Css_1.Css.m1.$,
     // Make the buttons closer to ours
     "& .trix-button:not(:first-of-type)": Css_1.Css.bn.$,
@@ -163,7 +163,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.bLightBlue700.overflowHidden.$,
+    ".tribute-container > ul": Css_1.Css.sm.bgWhite.ba.br4.bBlue700.overflowHidden.$,
 };
 function extractIdsFromMentions(mergeTags, content) {
     return mergeTags.filter((tag) => content.includes(`@${tag}`));

package/dist/inputs/Switch.js

@@ -34,13 +34,13 @@ function Switch(props) {
                         ...(isHovered && exports.switchHoverStyles),
                         ...(isKeyboardFocus && exports.switchFocusStyles),
                         ...(isDisabled && Css_1.Css.bgGray300.$),
-                        ...(isSelected && Css_1.Css.bgLightBlue700.$),
+                        ...(isSelected && Css_1.Css.bgBlue700.$),
                         ...(isSelected && isHovered && exports.switchSelectedHoverStyles),
                     }, children: (0, jsx_runtime_1.jsx)("div", { css: {
                             ...switchCircleDefaultStyles(compact),
                             ...(isDisabled && Css_1.Css.bgGray100.$),
                             ...(isSelected && switchCircleSelectedStyles(compact)),
-                        }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400 })) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)("span", { css: {
+                        }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400 })) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)("span", { css: {
                         // LineHeight is conditionally applied to handle compact version text alignment
                         ...Css_1.Css.if(compact).add("lineHeight", "1").$,
                     }, children: label })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps }) })] })),
@@ -54,7 +54,7 @@ const circleDiameter = (isCompact) => (isCompact ? 12 : 20);
 // Switcher/Toggle element styles
 exports.switchHoverStyles = Css_1.Css.bgGray400.$;
 exports.switchFocusStyles = Css_1.Css.bshFocus.$;
-exports.switchSelectedHoverStyles = Css_1.Css.bgLightBlue900.$;
+exports.switchSelectedHoverStyles = Css_1.Css.bgBlue900.$;
 // Circle inside Switcher/Toggle element styles
 const switchCircleDefaultStyles = (isCompact) => ({
     ...Css_1.Css.wPx(circleDiameter(isCompact))

package/dist/inputs/TextFieldBase.js

@@ -72,7 +72,7 @@ function TextFieldBase(props) {
             ...(contrast && Css_1.Css.addIn("&::selection", Css_1.Css.bgGray800.$).$),
         },
         hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bGray600.$,
-        focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
+        focus: Css_1.Css.bBlue700.if(contrast).bBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$
             : Css_1.Css.cursorNotAllowed.$,

package/dist/inputs/ToggleButton.js

@@ -41,7 +41,7 @@ function ToggleButton(props) {
                 .selectNone.$,
             ...(isHovered && exports.toggleHoverStyles),
             ...(isPressed && exports.togglePressStyles),
-            ...(isSelected && !isDisabled && Css_1.Css.lightBlue700.$),
+            ...(isSelected && !isDisabled && Css_1.Css.blue700.$),
             ...(isKeyboardFocus && exports.toggleFocusStyles),
             ...(isDisabled && Css_1.Css.gray300.cursorNotAllowed.$),
         },

package/dist/inputs/ToggleChipGroup.js

@@ -31,8 +31,8 @@ function ToggleChip(props) {
                 ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.if(isDisabled).cursorNotAllowed.gray600.pr1.$,
                 ...(isSelected
                     ? {
-                        ...Css_1.Css.white.bgLightBlue700.$,
-                        ":hover:not([data-disabled='true'])": Css_1.Css.bgLightBlue800.$,
+                        ...Css_1.Css.white.bgBlue700.$,
+                        ":hover:not([data-disabled='true'])": Css_1.Css.bgBlue800.$,
                     }
                     : { ":hover:not([data-disabled='true'])": Css_1.Css.bgGray300.$ }),
                 ...(isFocusVisible ? Css_1.Css.bshFocus.$ : {}),

package/dist/inputs/TreeSelectField/TreeOption.js

@@ -30,7 +30,7 @@ function TreeOption(props) {
         item: Css_1.Css.gray900.if(contrast).white.$,
         hover: Css_1.Css.bgGray100.if(contrast).bgGray600.$,
         disabled: Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray500.$,
-        focus: Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${!contrast ? Css_1.Palette.LightBlue700 : Css_1.Palette.LightBlue500}`).$,
+        focus: Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${!contrast ? Css_1.Palette.Blue700 : Css_1.Palette.Blue500}`).$,
     };
     return ((0, jsx_runtime_1.jsxs)("li", { ...hoverProps, css: {
             ...Css_1.Css.df.aic.jcsb.gap1.pl2.mh("42px").outline0.cursorPointer.sm.plPx(16 + level * 8).$,

package/dist/inputs/internal/ComboBoxInput.js

@@ -18,7 +18,7 @@ function ComboBoxInput(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, { ...otherProps, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: state.selectionManager.selectedKeys.size }))) ||
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: state.selectionManager.selectedKeys.size }))) ||
             (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", { ...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/dist/inputs/internal/Option.js

@@ -17,7 +17,7 @@ function Option(props) {
         item: Css_1.Css.gray900.if(contrast).white.$,
         hover: Css_1.Css.bgGray100.if(contrast).bgGray600.$,
         disabled: Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray500.$,
-        focus: Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${!contrast ? Css_1.Palette.LightBlue700 : Css_1.Palette.LightBlue500}`).$,
+        focus: Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${!contrast ? Css_1.Palette.Blue700 : Css_1.Palette.Blue500}`).$,
     };
     // Get props for the option element.
     // Prevent options from receiving browser focus via shouldUseVirtualFocus.
@@ -36,7 +36,7 @@ function Option(props) {
             }, children: [item.rendered, isSelected && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check", color: !contrast
                             ? isDisabled
                                 ? Css_1.Palette.Gray400
-                                : Css_1.Palette.LightBlue700
+                                : Css_1.Palette.Blue700
                             : isDisabled
                                 ? Css_1.Palette.Gray500
                                 : Css_1.Palette.White }) }))] })),