@cerebruminc/cerebellum 16.3.0-beta.dangerous.5b72b0f → 16.3.0-beta.dangerous.8cb1a12

package/lib/cjs/Button.cjs

@@ -127,8 +127,8 @@ var Text = styled.styled.span(templateObject_5 || (templateObject_5 = _tslib.__m
     var $boxed = _a.$boxed, $boxedOutline = _a.$boxedOutline, $textButton = _a.$textButton;
     return ($boxed || $boxedOutline || $textButton ? 500 : 600);
 }, function (_a) {
-    var $boxed = _a.$boxed, $boxedOutline = _a.$boxedOutline, textButton = _a.$textButton;
-    return ($boxed || $boxedOutline || textButton ? "0.36px" : "0.07em");
+    var $boxed = _a.$boxed, $boxedOutline = _a.$boxedOutline, $letterSpacing = _a.$letterSpacing, textButton = _a.$textButton;
+    return ($letterSpacing ? $letterSpacing : ($boxed || $boxedOutline || textButton ? "0.36px" : "0.07em"));
 });
 var TextButtonBackground = styled.styled.span(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  bottom: 0;\n  display: block;\n  background-color: ", ";\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  right: 0;\n  top: 0;\n  transition: transform 300ms ease-out 50ms;\n  transform: translate3d(0, ", "px, 0);\n  ", ":hover & {\n    transform: translate3d(0, 0, 0);\n  }\n  ", ":focus-visible & {\n    opacity: 0;\n  }\n"], ["\n  bottom: 0;\n  display: block;\n  background-color: ", ";\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  right: 0;\n  top: 0;\n  transition: transform 300ms ease-out 50ms;\n  transform: translate3d(0, ", "px, 0);\n  ", ":hover & {\n    transform: translate3d(0, 0, 0);\n  }\n  ", ":focus-visible & {\n    opacity: 0;\n  }\n"])), function (_a) {
     var $colorGroup = _a.$colorGroup;
@@ -253,7 +253,7 @@ var getLoadingOffset = function (_a) {
 
 var Button = function (props) {
     var _a, _b, _c, _d;
-    var borderRadius = props.borderRadius, _e = props.boxed, boxed = _e === void 0 ? false : _e, _f = props.boxedOutline, boxedOutline = _f === void 0 ? false : _f, buttonHeight = props.buttonHeight, _g = props.buttonType, buttonType = _g === void 0 ? "button" : _g, buttonWidth = props.buttonWidth, _h = props.backButton, backButton = _h === void 0 ? false : _h, _j = props.caret, caret = _j === void 0 ? false : _j, caretGap = props.caretGap, _k = props.clickable, clickable = _k === void 0 ? true : _k, _l = props.colorFamily, colorFamily = _l === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Blue : _l, colorFamilyOverride = props.colorFamilyOverride, directionalButtonGap = props.directionalButtonGap, _m = props.disabled, disabled = _m === void 0 ? false : _m, disabledBackgroundColor = props.disabledBackgroundColor, disabledTextColor = props.disabledTextColor, focus = props.focus, focusOutlineBorderRadius = props.focusOutlineBorderRadius, focusOutlineOffsetBottom = props.focusOutlineOffsetBottom, focusOutlineOffsetLeft = props.focusOutlineOffsetLeft, focusOutlineOffsetRight = props.focusOutlineOffsetRight, focusOutlineOffsetTop = props.focusOutlineOffsetTop, href = props.href, Icon = props.Icon, iconGap = props.iconGap, iconSize = props.iconSize, justifyContent = props.justifyContent, _o = props.loading, loading = _o === void 0 ? false : _o, loadingConfiguration = props.loadingConfiguration, name = props.name, _p = props.nextButton, nextButton = _p === void 0 ? false : _p, onClick = props.onClick, _q = props.outline, outline = _q === void 0 ? false : _q, outlineButtonShade = props.outlineButtonShade, paddingString = props.paddingString, innerRef = props.innerRef, _r = props.secondary, secondary = _r === void 0 ? false : _r, target = props.target, text = props.text, _s = props.textButton, textButton = _s === void 0 ? false : _s, textFontSize = props.textFontSize, _t = props.shadow, shadow = _t === void 0 ? false : _t, spaceBetween = props.spaceBetween, useA = props.useA, value = props.value, _u = props.white, white = _u === void 0 ? false : _u;
+    var borderRadius = props.borderRadius, _e = props.boxed, boxed = _e === void 0 ? false : _e, _f = props.boxedOutline, boxedOutline = _f === void 0 ? false : _f, buttonHeight = props.buttonHeight, _g = props.buttonType, buttonType = _g === void 0 ? "button" : _g, buttonWidth = props.buttonWidth, _h = props.backButton, backButton = _h === void 0 ? false : _h, _j = props.caret, caret = _j === void 0 ? false : _j, caretGap = props.caretGap, _k = props.clickable, clickable = _k === void 0 ? true : _k, _l = props.colorFamily, colorFamily = _l === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Blue : _l, colorFamilyOverride = props.colorFamilyOverride, directionalButtonGap = props.directionalButtonGap, _m = props.disabled, disabled = _m === void 0 ? false : _m, disabledBackgroundColor = props.disabledBackgroundColor, disabledTextColor = props.disabledTextColor, focus = props.focus, focusOutlineBorderRadius = props.focusOutlineBorderRadius, focusOutlineOffsetBottom = props.focusOutlineOffsetBottom, focusOutlineOffsetLeft = props.focusOutlineOffsetLeft, focusOutlineOffsetRight = props.focusOutlineOffsetRight, focusOutlineOffsetTop = props.focusOutlineOffsetTop, href = props.href, Icon = props.Icon, iconGap = props.iconGap, iconSize = props.iconSize, justifyContent = props.justifyContent, letterSpacing = props.letterSpacing, _o = props.loading, loading = _o === void 0 ? false : _o, loadingConfiguration = props.loadingConfiguration, name = props.name, _p = props.nextButton, nextButton = _p === void 0 ? false : _p, onClick = props.onClick, _q = props.outline, outline = _q === void 0 ? false : _q, outlineButtonShade = props.outlineButtonShade, paddingString = props.paddingString, innerRef = props.innerRef, _r = props.secondary, secondary = _r === void 0 ? false : _r, target = props.target, text = props.text, _s = props.textButton, textButton = _s === void 0 ? false : _s, textFontSize = props.textFontSize, _t = props.shadow, shadow = _t === void 0 ? false : _t, spaceBetween = props.spaceBetween, useA = props.useA, value = props.value, _u = props.white, white = _u === void 0 ? false : _u;
     var buttonRef = innerRef || React.useRef(null);
     React.useEffect(function () {
         var _a;
@@ -281,7 +281,7 @@ var Button = function (props) {
             setTimeout(function () { return setIsActive(false); }, 100);
         }
     };
-    return (jsxRuntime.jsxs(ButtonBox, { children: [jsxRuntime.jsxs(ButtonElement, _tslib.__assign({}, (useA && href ? { href: href } : {}), (useA && target ? { target: target } : {}), { as: useA ? "a" : "button", ref: buttonRef, "$backButton": backButton, "$borderRadius": borderRadius, "$boxedOutline": boxedOutline, "$boxed": boxed, "$clickable": clickable && !loading, "$colorGroup": colorGroup, "$buttonHeight": buttonHeight, "$buttonWidth": buttonWidth, "$displayBlock": !!buttonWidth && !textButton, disabled: disabled, "$disabledBackgroundColor": disabledBackgroundColor, "$disabledTextColor": disabledTextColor, "$focusOutlineBorderRadius": focusOutlineBorderRadius, "$focusOutlineOffsetBottom": focusOutlineOffsetBottom, "$focusOutlineOffsetLeft": focusOutlineOffsetLeft, "$focusOutlineOffsetRight": focusOutlineOffsetRight, "$focusOutlineOffsetTop": focusOutlineOffsetTop, "$hasIcon": hasIcon, "$isActive": isActive, name: name, "$nextButton": nextButton, onClick: function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick(event); }, onKeyPress: handleEnter, "$outline": outline, "$outlineButtonShade": outlineButtonShade, "$paddingString": paddingString, "$primary": primary, "$secondary": secondary, "$spaceBetween": spaceBetween, "$textButton": textButton, type: buttonType, "$shadow": shadow, value: value, tabIndex: clickable ? 0 : -1, "$white": white && !textButton, children: [loading && (jsxRuntime.jsx(LoadingBox, { "$loadingOffset": textButton ? getLoadingOffset(loadingOffsetParams) : 0, children: jsxRuntime.jsx(LoadingEllipsis.LoadingEllipsis, _tslib.__assign({}, loadingStyleFormat)) })), jsxRuntime.jsxs(HiddenLoadingBox, { "$hide": loading, "$justifyContent": justifyContent, children: [backButton && !nextButton && !Icon && (jsxRuntime.jsx(BackIconBox, { "data-testid": "backIcon", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedIconGap, "$size": autoIconSize, children: jsxRuntime.jsx(ArrowLong.ArrowLong, { fill: iconColor }) })), Icon && (jsxRuntime.jsx(IconBox, { "data-testid": "icon", "$disabled": disabled, "$iconGap": confirmedIconGap, "$disabledTextColor": disabledTextColor, "$size": iconSize || autoIconSize, children: jsxRuntime.jsx(Icon, { fill: iconColor }) })), jsxRuntime.jsx(Text, { "$boxed": boxed, "$boxedOutline": boxedOutline, "$colorGroup": colorGroup, "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$primary": !(!primary || white), "$textButton": textButton, "$textFontSize": textFontSize, "data-sentry-unmask": true, children: text }), nextButton && !Icon && (jsxRuntime.jsx(NextIconBox, { "data-testid": "nextIcon", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedIconGap, "$size": autoIconSize, children: jsxRuntime.jsx(ArrowLong.ArrowLong, { fill: iconColor }) })), caret && !backButton && !nextButton && !Icon && (jsxRuntime.jsx(NextIconBox, { "data-testid": "caret", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedCaretGap, "$size": autoIconSize - (boxed || boxedOutline ? 8 : 5), children: boxed || boxedOutline ? (jsxRuntime.jsx(IndicatorDown.IndicatorDown, { fill: primary && !white ? colorGroup.medium : colorGroup.dark })) : (jsxRuntime.jsx(CaretDown.CaretDown, { fill: primary && !white ? colorGroup.medium : colorGroup.dark })) })), textButton && jsxRuntime.jsx(TextButtonBackground, { "$colorGroup": colorGroup, "$textFontSize": textFontSize })] })] })), textButton && (jsxRuntime.jsx(TextButtonUnderline, { "$colorGroup": colorGroup, "$disabled": disabled, "$hasIcon": hasIcon, "$iconGap": confirmedIconGap, "$nextButton": nextButton || caret, "$size": iconSize || autoIconSize }))] }));
+    return (jsxRuntime.jsxs(ButtonBox, { children: [jsxRuntime.jsxs(ButtonElement, _tslib.__assign({}, (useA && href ? { href: href } : {}), (useA && target ? { target: target } : {}), { as: useA ? "a" : "button", ref: buttonRef, "$backButton": backButton, "$borderRadius": borderRadius, "$boxedOutline": boxedOutline, "$boxed": boxed, "$clickable": clickable && !loading, "$colorGroup": colorGroup, "$buttonHeight": buttonHeight, "$buttonWidth": buttonWidth, "$displayBlock": !!buttonWidth && !textButton, disabled: disabled, "$disabledBackgroundColor": disabledBackgroundColor, "$disabledTextColor": disabledTextColor, "$focusOutlineBorderRadius": focusOutlineBorderRadius, "$focusOutlineOffsetBottom": focusOutlineOffsetBottom, "$focusOutlineOffsetLeft": focusOutlineOffsetLeft, "$focusOutlineOffsetRight": focusOutlineOffsetRight, "$focusOutlineOffsetTop": focusOutlineOffsetTop, "$hasIcon": hasIcon, "$isActive": isActive, name: name, "$nextButton": nextButton, onClick: function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick(event); }, onKeyPress: handleEnter, "$outline": outline, "$outlineButtonShade": outlineButtonShade, "$paddingString": paddingString, "$primary": primary, "$secondary": secondary, "$spaceBetween": spaceBetween, "$textButton": textButton, type: buttonType, "$shadow": shadow, value: value, tabIndex: clickable ? 0 : -1, "$white": white && !textButton, children: [loading && (jsxRuntime.jsx(LoadingBox, { "$loadingOffset": textButton ? getLoadingOffset(loadingOffsetParams) : 0, children: jsxRuntime.jsx(LoadingEllipsis.LoadingEllipsis, _tslib.__assign({}, loadingStyleFormat)) })), jsxRuntime.jsxs(HiddenLoadingBox, { "$hide": loading, "$justifyContent": justifyContent, children: [backButton && !nextButton && !Icon && (jsxRuntime.jsx(BackIconBox, { "data-testid": "backIcon", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedIconGap, "$size": iconSize || autoIconSize, children: jsxRuntime.jsx(ArrowLong.ArrowLong, { fill: iconColor }) })), Icon && (jsxRuntime.jsx(IconBox, { "data-testid": "icon", "$disabled": disabled, "$iconGap": confirmedIconGap, "$disabledTextColor": disabledTextColor, "$size": iconSize || autoIconSize, children: jsxRuntime.jsx(Icon, { fill: iconColor }) })), jsxRuntime.jsx(Text, { "$boxed": boxed, "$boxedOutline": boxedOutline, "$colorGroup": colorGroup, "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$letterSpacing": letterSpacing, "$primary": !(!primary || white), "$textButton": textButton, "$textFontSize": textFontSize, "data-sentry-unmask": true, children: text }), nextButton && !Icon && (jsxRuntime.jsx(NextIconBox, { "data-testid": "nextIcon", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedIconGap, "$size": iconSize || autoIconSize, children: jsxRuntime.jsx(ArrowLong.ArrowLong, { fill: iconColor }) })), caret && !backButton && !nextButton && !Icon && (jsxRuntime.jsx(NextIconBox, { "data-testid": "caret", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedCaretGap, "$size": (iconSize || autoIconSize) - (boxed || boxedOutline ? 8 : 5), children: boxed || boxedOutline ? (jsxRuntime.jsx(IndicatorDown.IndicatorDown, { fill: primary && !white ? colorGroup.medium : colorGroup.dark })) : (jsxRuntime.jsx(CaretDown.CaretDown, { fill: primary && !white ? colorGroup.medium : colorGroup.dark })) })), textButton && jsxRuntime.jsx(TextButtonBackground, { "$colorGroup": colorGroup, "$textFontSize": textFontSize })] })] })), textButton && (jsxRuntime.jsx(TextButtonUnderline, { "$colorGroup": colorGroup, "$disabled": disabled, "$hasIcon": hasIcon, "$iconGap": confirmedIconGap, "$nextButton": nextButton || caret, "$size": iconSize || autoIconSize }))] }));
 };
 
 exports.Button = Button;

package/lib/esm/Button.js

@@ -125,8 +125,8 @@ var Text = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObj
     var $boxed = _a.$boxed, $boxedOutline = _a.$boxedOutline, $textButton = _a.$textButton;
     return ($boxed || $boxedOutline || $textButton ? 500 : 600);
 }, function (_a) {
-    var $boxed = _a.$boxed, $boxedOutline = _a.$boxedOutline, textButton = _a.$textButton;
-    return ($boxed || $boxedOutline || textButton ? "0.36px" : "0.07em");
+    var $boxed = _a.$boxed, $boxedOutline = _a.$boxedOutline, $letterSpacing = _a.$letterSpacing, textButton = _a.$textButton;
+    return ($letterSpacing ? $letterSpacing : ($boxed || $boxedOutline || textButton ? "0.36px" : "0.07em"));
 });
 var TextButtonBackground = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  bottom: 0;\n  display: block;\n  background-color: ", ";\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  right: 0;\n  top: 0;\n  transition: transform 300ms ease-out 50ms;\n  transform: translate3d(0, ", "px, 0);\n  ", ":hover & {\n    transform: translate3d(0, 0, 0);\n  }\n  ", ":focus-visible & {\n    opacity: 0;\n  }\n"], ["\n  bottom: 0;\n  display: block;\n  background-color: ", ";\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  right: 0;\n  top: 0;\n  transition: transform 300ms ease-out 50ms;\n  transform: translate3d(0, ", "px, 0);\n  ", ":hover & {\n    transform: translate3d(0, 0, 0);\n  }\n  ", ":focus-visible & {\n    opacity: 0;\n  }\n"])), function (_a) {
     var $colorGroup = _a.$colorGroup;
@@ -251,7 +251,7 @@ var getLoadingOffset = function (_a) {
 
 var Button = function (props) {
     var _a, _b, _c, _d;
-    var borderRadius = props.borderRadius, _e = props.boxed, boxed = _e === void 0 ? false : _e, _f = props.boxedOutline, boxedOutline = _f === void 0 ? false : _f, buttonHeight = props.buttonHeight, _g = props.buttonType, buttonType = _g === void 0 ? "button" : _g, buttonWidth = props.buttonWidth, _h = props.backButton, backButton = _h === void 0 ? false : _h, _j = props.caret, caret = _j === void 0 ? false : _j, caretGap = props.caretGap, _k = props.clickable, clickable = _k === void 0 ? true : _k, _l = props.colorFamily, colorFamily = _l === void 0 ? ButtonColorFamilyEnum.Blue : _l, colorFamilyOverride = props.colorFamilyOverride, directionalButtonGap = props.directionalButtonGap, _m = props.disabled, disabled = _m === void 0 ? false : _m, disabledBackgroundColor = props.disabledBackgroundColor, disabledTextColor = props.disabledTextColor, focus = props.focus, focusOutlineBorderRadius = props.focusOutlineBorderRadius, focusOutlineOffsetBottom = props.focusOutlineOffsetBottom, focusOutlineOffsetLeft = props.focusOutlineOffsetLeft, focusOutlineOffsetRight = props.focusOutlineOffsetRight, focusOutlineOffsetTop = props.focusOutlineOffsetTop, href = props.href, Icon = props.Icon, iconGap = props.iconGap, iconSize = props.iconSize, justifyContent = props.justifyContent, _o = props.loading, loading = _o === void 0 ? false : _o, loadingConfiguration = props.loadingConfiguration, name = props.name, _p = props.nextButton, nextButton = _p === void 0 ? false : _p, onClick = props.onClick, _q = props.outline, outline = _q === void 0 ? false : _q, outlineButtonShade = props.outlineButtonShade, paddingString = props.paddingString, innerRef = props.innerRef, _r = props.secondary, secondary = _r === void 0 ? false : _r, target = props.target, text = props.text, _s = props.textButton, textButton = _s === void 0 ? false : _s, textFontSize = props.textFontSize, _t = props.shadow, shadow = _t === void 0 ? false : _t, spaceBetween = props.spaceBetween, useA = props.useA, value = props.value, _u = props.white, white = _u === void 0 ? false : _u;
+    var borderRadius = props.borderRadius, _e = props.boxed, boxed = _e === void 0 ? false : _e, _f = props.boxedOutline, boxedOutline = _f === void 0 ? false : _f, buttonHeight = props.buttonHeight, _g = props.buttonType, buttonType = _g === void 0 ? "button" : _g, buttonWidth = props.buttonWidth, _h = props.backButton, backButton = _h === void 0 ? false : _h, _j = props.caret, caret = _j === void 0 ? false : _j, caretGap = props.caretGap, _k = props.clickable, clickable = _k === void 0 ? true : _k, _l = props.colorFamily, colorFamily = _l === void 0 ? ButtonColorFamilyEnum.Blue : _l, colorFamilyOverride = props.colorFamilyOverride, directionalButtonGap = props.directionalButtonGap, _m = props.disabled, disabled = _m === void 0 ? false : _m, disabledBackgroundColor = props.disabledBackgroundColor, disabledTextColor = props.disabledTextColor, focus = props.focus, focusOutlineBorderRadius = props.focusOutlineBorderRadius, focusOutlineOffsetBottom = props.focusOutlineOffsetBottom, focusOutlineOffsetLeft = props.focusOutlineOffsetLeft, focusOutlineOffsetRight = props.focusOutlineOffsetRight, focusOutlineOffsetTop = props.focusOutlineOffsetTop, href = props.href, Icon = props.Icon, iconGap = props.iconGap, iconSize = props.iconSize, justifyContent = props.justifyContent, letterSpacing = props.letterSpacing, _o = props.loading, loading = _o === void 0 ? false : _o, loadingConfiguration = props.loadingConfiguration, name = props.name, _p = props.nextButton, nextButton = _p === void 0 ? false : _p, onClick = props.onClick, _q = props.outline, outline = _q === void 0 ? false : _q, outlineButtonShade = props.outlineButtonShade, paddingString = props.paddingString, innerRef = props.innerRef, _r = props.secondary, secondary = _r === void 0 ? false : _r, target = props.target, text = props.text, _s = props.textButton, textButton = _s === void 0 ? false : _s, textFontSize = props.textFontSize, _t = props.shadow, shadow = _t === void 0 ? false : _t, spaceBetween = props.spaceBetween, useA = props.useA, value = props.value, _u = props.white, white = _u === void 0 ? false : _u;
     var buttonRef = innerRef || useRef(null);
     useEffect(function () {
         var _a;
@@ -279,7 +279,7 @@ var Button = function (props) {
             setTimeout(function () { return setIsActive(false); }, 100);
         }
     };
-    return (jsxs(ButtonBox, { children: [jsxs(ButtonElement, __assign({}, (useA && href ? { href: href } : {}), (useA && target ? { target: target } : {}), { as: useA ? "a" : "button", ref: buttonRef, "$backButton": backButton, "$borderRadius": borderRadius, "$boxedOutline": boxedOutline, "$boxed": boxed, "$clickable": clickable && !loading, "$colorGroup": colorGroup, "$buttonHeight": buttonHeight, "$buttonWidth": buttonWidth, "$displayBlock": !!buttonWidth && !textButton, disabled: disabled, "$disabledBackgroundColor": disabledBackgroundColor, "$disabledTextColor": disabledTextColor, "$focusOutlineBorderRadius": focusOutlineBorderRadius, "$focusOutlineOffsetBottom": focusOutlineOffsetBottom, "$focusOutlineOffsetLeft": focusOutlineOffsetLeft, "$focusOutlineOffsetRight": focusOutlineOffsetRight, "$focusOutlineOffsetTop": focusOutlineOffsetTop, "$hasIcon": hasIcon, "$isActive": isActive, name: name, "$nextButton": nextButton, onClick: function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick(event); }, onKeyPress: handleEnter, "$outline": outline, "$outlineButtonShade": outlineButtonShade, "$paddingString": paddingString, "$primary": primary, "$secondary": secondary, "$spaceBetween": spaceBetween, "$textButton": textButton, type: buttonType, "$shadow": shadow, value: value, tabIndex: clickable ? 0 : -1, "$white": white && !textButton, children: [loading && (jsx(LoadingBox, { "$loadingOffset": textButton ? getLoadingOffset(loadingOffsetParams) : 0, children: jsx(LoadingEllipsis, __assign({}, loadingStyleFormat)) })), jsxs(HiddenLoadingBox, { "$hide": loading, "$justifyContent": justifyContent, children: [backButton && !nextButton && !Icon && (jsx(BackIconBox, { "data-testid": "backIcon", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedIconGap, "$size": autoIconSize, children: jsx(ArrowLong, { fill: iconColor }) })), Icon && (jsx(IconBox, { "data-testid": "icon", "$disabled": disabled, "$iconGap": confirmedIconGap, "$disabledTextColor": disabledTextColor, "$size": iconSize || autoIconSize, children: jsx(Icon, { fill: iconColor }) })), jsx(Text, { "$boxed": boxed, "$boxedOutline": boxedOutline, "$colorGroup": colorGroup, "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$primary": !(!primary || white), "$textButton": textButton, "$textFontSize": textFontSize, "data-sentry-unmask": true, children: text }), nextButton && !Icon && (jsx(NextIconBox, { "data-testid": "nextIcon", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedIconGap, "$size": autoIconSize, children: jsx(ArrowLong, { fill: iconColor }) })), caret && !backButton && !nextButton && !Icon && (jsx(NextIconBox, { "data-testid": "caret", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedCaretGap, "$size": autoIconSize - (boxed || boxedOutline ? 8 : 5), children: boxed || boxedOutline ? (jsx(IndicatorDown, { fill: primary && !white ? colorGroup.medium : colorGroup.dark })) : (jsx(CaretDown, { fill: primary && !white ? colorGroup.medium : colorGroup.dark })) })), textButton && jsx(TextButtonBackground, { "$colorGroup": colorGroup, "$textFontSize": textFontSize })] })] })), textButton && (jsx(TextButtonUnderline, { "$colorGroup": colorGroup, "$disabled": disabled, "$hasIcon": hasIcon, "$iconGap": confirmedIconGap, "$nextButton": nextButton || caret, "$size": iconSize || autoIconSize }))] }));
+    return (jsxs(ButtonBox, { children: [jsxs(ButtonElement, __assign({}, (useA && href ? { href: href } : {}), (useA && target ? { target: target } : {}), { as: useA ? "a" : "button", ref: buttonRef, "$backButton": backButton, "$borderRadius": borderRadius, "$boxedOutline": boxedOutline, "$boxed": boxed, "$clickable": clickable && !loading, "$colorGroup": colorGroup, "$buttonHeight": buttonHeight, "$buttonWidth": buttonWidth, "$displayBlock": !!buttonWidth && !textButton, disabled: disabled, "$disabledBackgroundColor": disabledBackgroundColor, "$disabledTextColor": disabledTextColor, "$focusOutlineBorderRadius": focusOutlineBorderRadius, "$focusOutlineOffsetBottom": focusOutlineOffsetBottom, "$focusOutlineOffsetLeft": focusOutlineOffsetLeft, "$focusOutlineOffsetRight": focusOutlineOffsetRight, "$focusOutlineOffsetTop": focusOutlineOffsetTop, "$hasIcon": hasIcon, "$isActive": isActive, name: name, "$nextButton": nextButton, onClick: function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick(event); }, onKeyPress: handleEnter, "$outline": outline, "$outlineButtonShade": outlineButtonShade, "$paddingString": paddingString, "$primary": primary, "$secondary": secondary, "$spaceBetween": spaceBetween, "$textButton": textButton, type: buttonType, "$shadow": shadow, value: value, tabIndex: clickable ? 0 : -1, "$white": white && !textButton, children: [loading && (jsx(LoadingBox, { "$loadingOffset": textButton ? getLoadingOffset(loadingOffsetParams) : 0, children: jsx(LoadingEllipsis, __assign({}, loadingStyleFormat)) })), jsxs(HiddenLoadingBox, { "$hide": loading, "$justifyContent": justifyContent, children: [backButton && !nextButton && !Icon && (jsx(BackIconBox, { "data-testid": "backIcon", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedIconGap, "$size": iconSize || autoIconSize, children: jsx(ArrowLong, { fill: iconColor }) })), Icon && (jsx(IconBox, { "data-testid": "icon", "$disabled": disabled, "$iconGap": confirmedIconGap, "$disabledTextColor": disabledTextColor, "$size": iconSize || autoIconSize, children: jsx(Icon, { fill: iconColor }) })), jsx(Text, { "$boxed": boxed, "$boxedOutline": boxedOutline, "$colorGroup": colorGroup, "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$letterSpacing": letterSpacing, "$primary": !(!primary || white), "$textButton": textButton, "$textFontSize": textFontSize, "data-sentry-unmask": true, children: text }), nextButton && !Icon && (jsx(NextIconBox, { "data-testid": "nextIcon", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedIconGap, "$size": iconSize || autoIconSize, children: jsx(ArrowLong, { fill: iconColor }) })), caret && !backButton && !nextButton && !Icon && (jsx(NextIconBox, { "data-testid": "caret", "$disabled": disabled, "$disabledTextColor": disabledTextColor, "$iconGap": confirmedCaretGap, "$size": (iconSize || autoIconSize) - (boxed || boxedOutline ? 8 : 5), children: boxed || boxedOutline ? (jsx(IndicatorDown, { fill: primary && !white ? colorGroup.medium : colorGroup.dark })) : (jsx(CaretDown, { fill: primary && !white ? colorGroup.medium : colorGroup.dark })) })), textButton && jsx(TextButtonBackground, { "$colorGroup": colorGroup, "$textFontSize": textFontSize })] })] })), textButton && (jsx(TextButtonUnderline, { "$colorGroup": colorGroup, "$disabled": disabled, "$hasIcon": hasIcon, "$iconGap": confirmedIconGap, "$nextButton": nextButton || caret, "$size": iconSize || autoIconSize }))] }));
 };
 
 export { Button };

package/lib/types/src/components/Button/types.d.ts

@@ -58,6 +58,8 @@ export interface ButtonType {
     innerRef?: any;
     /** Align the content in the button. This works with `buttonWidth` and `paddingString`, but does nothing by itself. It should usually not be necessary  */
     justifyContent?: "flex-start" | "flex-end" | "center" | "space-around" | "space-between";
+    /** The letter spacing for the button text. THEME PROP: default is "0.36px" for TextButton, OutlineButton, and BoxedOutlineButton.  "0.07em" for all others */
+    letterSpacing?: string;
     /** Displays a loading animation in the button when true */
     loading?: boolean;
     /** LoadingEllipsis props */
@@ -155,6 +157,7 @@ export interface TextProps {
     $colorGroup: ColorFamilyType;
     $disabled?: boolean;
     $disabledTextColor?: string;
+    $letterSpacing?: string;
     $primary: boolean;
     $textButton?: boolean;
     $textFontSize?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "16.3.0-beta.dangerous.5b72b0f",
+  "version": "16.3.0-beta.dangerous.8cb1a12",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "lib/cjs/index.cjs",
@@ -102,7 +102,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.0.0",
     "lorem-ipsum": "^2.0.4",
-    "next": "^16.0.0",
+    "next": "^15.1.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
@@ -122,7 +122,7 @@
     "vite-plugin-babel-macros": "^1.0.6"
   },
   "peerDependencies": {
-    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+    "next": "^14.0.0 || ^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "styled-components": "^6.1.16"