@atlaskit/button 16.10.1 → 16.11.0

package/dist/cjs/new-button/containers/split-button/split-button.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
+var _react = require("@emotion/react");
+var _constants = require("@atlaskit/theme/constants");
+var _splitButtonContext = require("./split-button-context");
+var _utils = require("./utils");
+/** @jsx jsx */
+
+var fontSize = (0, _constants.fontSize)();
+var defaultDividerHeight = 20 / fontSize + 'em';
+var defaultDividerStyles = (0, _react.css)({
+  height: defaultDividerHeight,
+  margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
+});
+var compactDividerHeight = 16 / fontSize + 'em';
+var compactDividerStyles = (0, _react.css)({
+  height: compactDividerHeight,
+  margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
+});
+var baseDividerStyles = (0, _react.css)({
+  display: 'inline-flex',
+  width: '1px',
+  position: 'relative',
+  zIndex: 2
+});
+var disabledStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-border, #091E4224)",
+  cursor: 'not-allowed'
+});
+var navigationDividerStyles = (0, _react.css)({
+  height: compactDividerHeight,
+  margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
+  backgroundColor: "var(--ds-border, #0052cc)"
+});
+var dividerAppearance = {
+  default: (0, _react.css)({
+    backgroundColor: "var(--ds-text, #172B4D)"
+  }),
+  primary: (0, _react.css)({
+    backgroundColor: "var(--ds-text-inverse, #FFF)"
+  }),
+  danger: (0, _react.css)({
+    backgroundColor: "var(--ds-text-inverse, #FFF)"
+  }),
+  warning: (0, _react.css)({
+    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
+  }),
+  navigation: navigationDividerStyles
+};
+var dividerHeight = {
+  default: defaultDividerStyles,
+  compact: compactDividerStyles
+};
+/**
+ * TODO: Add JSDoc
+ */
+var Divider = exports.Divider = function Divider(_ref) {
+  var appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  return (
+    // I find it funny to provide a div for Divider
+    (0, _react.jsx)("div", {
+      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
+    })
+  );
+};
+var splitButtonStyles = (0, _react.css)({
+  display: 'inline-flex',
+  position: 'relative',
+  whiteSpace: 'nowrap'
+});
+
+/**
+ * TODO: Add JSdoc
+ */
+var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonContainer(_ref2) {
+  var children = _ref2.children;
+  return (0, _react.jsx)("div", {
+    css: splitButtonStyles
+  }, children);
+};
+/**
+ * TODO: Add description when adding docs
+ */
+var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
+  var children = _ref3.children,
+    _ref3$appearance = _ref3.appearance,
+    appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
+    _ref3$spacing = _ref3.spacing,
+    spacing = _ref3$spacing === void 0 ? 'default' : _ref3$spacing,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled;
+  var _getActions = (0, _utils.getActions)(children),
+    PrimaryAction = _getActions.PrimaryAction,
+    SecondaryAction = _getActions.SecondaryAction;
+  return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
+    value: {
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled
+    }
+  }, PrimaryAction, (0, _react.jsx)(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), SecondaryAction));
+};
+/**
+ * TODO: Decide on API
+ */
+var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
+  var primaryAction = _ref4.primaryAction,
+    secondaryAction = _ref4.secondaryAction,
+    _ref4$appearance = _ref4.appearance,
+    appearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
+    _ref4$spacing = _ref4.spacing,
+    spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
+    _ref4$isDisabled = _ref4.isDisabled,
+    isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
+  return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
+    value: {
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled
+    }
+  }, primaryAction, (0, _react.jsx)(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), secondaryAction));
+};

package/dist/cjs/new-button/containers/split-button/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/new-button/containers/split-button/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActions = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var getActions = exports.getActions = function getActions(children) {
+  var _Children$toArray = _react.Children.toArray(children),
+    _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 2),
+    PrimaryAction = _Children$toArray2[0],
+    SecondaryAction = _Children$toArray2[1];
+  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development' && (!PrimaryAction || !SecondaryAction)) {
+    // TODO: i18n?
+    throw new SyntaxError('SplitButton requires two children to be provided');
+  }
+  return {
+    PrimaryAction: PrimaryAction,
+    SecondaryAction: SecondaryAction
+  };
+};

package/dist/cjs/new-button/variants/default/button.js

@@ -96,5 +96,4 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
   }), baseProps.children);
 }));
 Button.displayName = 'Button';
-var _default = Button;
-exports.default = _default;
+var _default = exports.default = Button;

package/dist/cjs/new-button/variants/default/link.js

@@ -102,5 +102,4 @@ var LinkButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   );
 }));
 LinkButton.displayName = 'LinkButton';
-var _default = LinkButton;
-exports.default = _default;
+var _default = exports.default = LinkButton;

package/dist/cjs/new-button/variants/default/use-default-button.js

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _content = _interopRequireDefault(require("../shared/content"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
-var _xcss = require("../shared/xcss");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -46,23 +45,20 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var fadeStyles = (0, _xcss.getFadingStyles)({
-    hasOverlay: Boolean(overlay)
-  });
+  var hasOverlay = Boolean(overlay);
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: buttonType,
-    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      as: "span",
-      xcss: [fadeStyles, _xcss.iconStyles]
-    }, iconBefore), children && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      as: "span",
-      xcss: [fadeStyles, _xcss.contentStyles]
-    }, children), iconAfter && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      as: "span",
-      xcss: [fadeStyles, _xcss.iconStyles]
+    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
+      type: "icon",
+      hasOverlay: hasOverlay
+    }, iconBefore), children && /*#__PURE__*/_react.default.createElement(_content.default, {
+      hasOverlay: hasOverlay
+    }, children), iconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
+      type: "icon",
+      hasOverlay: hasOverlay
     }, iconAfter)),
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -86,5 +82,4 @@ var useDefaultButton = function useDefaultButton(_ref) {
   });
   return baseProps;
 };
-var _default = useDefaultButton;
-exports.default = _default;
+var _default = exports.default = useDefaultButton;

package/dist/cjs/new-button/variants/icon/button.js

@@ -92,5 +92,4 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   }), baseProps.children);
 }));
 IconButton.displayName = 'IconButton';
-var _default = IconButton;
-exports.default = _default;
+var _default = exports.default = IconButton;

package/dist/cjs/new-button/variants/icon/link.js

@@ -98,5 +98,4 @@ var LinkIconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
   );
 }));
 LinkIconButton.displayName = 'LinkIconButton';
-var _default = LinkIconButton;
-exports.default = _default;
+var _default = exports.default = LinkIconButton;

package/dist/cjs/new-button/variants/icon/use-icon-button.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _content = _interopRequireDefault(require("../shared/content"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
-var _xcss = require("../shared/xcss");
 /**
  * __Use icon button__
  *
@@ -41,9 +40,7 @@ var useIconButton = function useIconButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var fadeStyles = (0, _xcss.getFadingStyles)({
-    hasOverlay: Boolean(overlay)
-  });
+  var hasOverlay = Boolean(overlay);
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -53,9 +50,9 @@ var useIconButton = function useIconButton(_ref) {
      * TODO: Have not finished IconButton yet. It also needs a required accessible
      * label - likely implemented using VisuallyHidden
      */
-    children: /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      as: "span",
-      xcss: [fadeStyles, _xcss.iconStyles]
+    children: /*#__PURE__*/_react.default.createElement(_content.default, {
+      type: "icon",
+      hasOverlay: hasOverlay
     }, icon),
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -78,5 +75,4 @@ var useIconButton = function useIconButton(_ref) {
   });
   return baseProps;
 };
-var _default = useIconButton;
-exports.default = _default;
+var _default = exports.default = useIconButton;

package/dist/cjs/new-button/variants/shared/colors.js

@@ -126,5 +126,4 @@ var values = {
     }
   }
 };
-var _default = values;
-exports.default = _default;
+var _default = exports.default = values;

package/dist/cjs/new-button/variants/shared/content.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var textStyles = (0, _primitives.xcss)({
+  // content can grow and shrink
+  flexGrow: 1,
+  flexShrink: 1,
+  // ellipsis for overflow text
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var iconStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  // icon size cannot grow and shrink
+  flexGrow: 0,
+  flexShrink: 0,
+  alignSelf: 'center',
+  fontSize: 0,
+  lineHeight: 0,
+  userSelect: 'none'
+});
+var commonStyles = (0, _primitives.xcss)({
+  transition: 'opacity 0.3s'
+});
+var fadeStyles = (0, _primitives.xcss)({
+  opacity: 0
+});
+/**
+ * __Content__
+ *
+ * Used for slots within a Button, including icons and text content.
+ */
+var Content = function Content(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    hasOverlay = _ref.hasOverlay;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "span",
+    xcss: [commonStyles].concat((0, _toConsumableArray2.default)(type === 'text' ? [textStyles] : [iconStyles]), (0, _toConsumableArray2.default)(hasOverlay ? [fadeStyles] : []))
+  }, children);
+};
+var _default = exports.default = Content;

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -13,6 +13,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _primitives = require("@atlaskit/primitives");
+var _splitButtonContext = require("../../containers/split-button/split-button-context");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _xcss = require("./xcss");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -21,6 +22,17 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line no-duplicate-imports
 // Include modified onClick with analytics
 
+var overlayStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  insetInlineStart: 'space.0',
+  insetBlockStart: 'space.0',
+  insetInlineEnd: 'space.0',
+  insetBlockEnd: 'space.0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+
 /**
  * __Use button base__
  *
@@ -37,13 +49,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var useButtonBase = function useButtonBase(_ref) {
   var analyticsContext = _ref.analyticsContext,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
     buttonType = _ref.buttonType,
     interactionName = _ref.interactionName,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
@@ -69,8 +81,16 @@ var useButtonBase = function useButtonBase(_ref) {
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
+    propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
   var ourRef = (0, _react.useRef)();
+  var splitButtonContext = (0, _splitButtonContext.useSplitButtonContext)();
+  var isSplitButton = Boolean(splitButtonContext);
+  var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
+  var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
+  var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
+  var isHighlighted = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isHighlighted) || false;
+  var isActiveOverSelected = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isActiveOverSelected) || false;
   var setRef = (0, _react.useCallback)(function (node) {
     ourRef.current = node;
     if (ref === null) {
@@ -95,7 +115,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -105,14 +125,18 @@ var useButtonBase = function useButtonBase(_ref) {
       spacing: spacing,
       isDisabled: isDisabled,
       isSelected: isSelected,
+      isHighlighted: isHighlighted,
+      isActiveOverSelected: isActiveOverSelected,
       shouldFitContainer: shouldFitContainer,
       isIconButton: isIconButton,
       hasOverlay: Boolean(overlay),
       isLink: buttonType === 'link',
       hasIconBefore: hasIconBefore,
-      hasIconAfter: hasIconAfter
+      hasIconAfter: hasIconAfter,
+      isSplit: isSplitButton,
+      isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter]);
+  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,
@@ -121,7 +145,7 @@ var useButtonBase = function useButtonBase(_ref) {
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, overlay ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       as: "span",
-      xcss: _xcss.overlayStyles
+      xcss: overlayStyles
     }, overlay) : null)
   }, (0, _blockEvents.default)(isEffectivelyDisabled, {
     onClick: onClick,
@@ -136,5 +160,4 @@ var useButtonBase = function useButtonBase(_ref) {
     onClickCapture: onClickCapture
   }));
 };
-var _default = useButtonBase;
-exports.default = _default;
+var _default = exports.default = useButtonBase;

package/dist/cjs/new-button/variants/shared/xcss.js

@@ -4,10 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.contentStyles = void 0;
-exports.getFadingStyles = getFadingStyles;
 exports.getXCSS = getXCSS;
-exports.overlayStyles = exports.iconStyles = void 0;
+exports.heights = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
@@ -15,7 +13,7 @@ var _colors = _interopRequireDefault(require("./colors"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var fontSize = (0, _constants.fontSize)();
-var heights = {
+var heights = exports.heights = {
   default: "".concat(32 / fontSize, "em"),
   compact: "".concat(24 / fontSize, "em"),
   none: 'auto'
@@ -44,6 +42,19 @@ var verticalAlign = {
   compact: 'middle',
   none: 'baseline'
 };
+var splitBorderStyles = {
+  ':first-of-type': {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  ':last-of-type': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  ':focus-visible': {
+    zIndex: 1
+  }
+};
 function getColor(_ref) {
   var group = _ref.group,
     key = _ref.key;
@@ -55,11 +66,13 @@ function getColors(_ref2) {
     interactionState = _ref2$interactionStat === void 0 ? 'default' : _ref2$interactionStat,
     isDisabled = _ref2.isDisabled,
     isSelected = _ref2.isSelected,
+    isHighlighted = _ref2.isHighlighted,
+    isActiveOverSelected = _ref2.isActiveOverSelected,
     hasOverlay = _ref2.hasOverlay;
   var key = interactionState;
   // Overlay does not change color on interaction, revert to 'default' or resting state
   key = hasOverlay ? 'default' : key;
-  key = isSelected ? 'selected' : key;
+  key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
   // Disabled colors overrule everything else
   key = isDisabled ? 'disabled' : key;
   return {
@@ -78,27 +91,51 @@ function getXCSS(_ref3) {
     spacing = _ref3.spacing,
     isDisabled = _ref3.isDisabled,
     isSelected = _ref3.isSelected,
+    isHighlighted = _ref3.isHighlighted,
+    isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
     shouldFitContainer = _ref3.shouldFitContainer,
     isLink = _ref3.isLink,
+    isSplit = _ref3.isSplit,
+    isNavigationSplit = _ref3.isNavigationSplit,
     hasOverlay = _ref3.hasOverlay,
     hasIconBefore = _ref3.hasIconBefore,
     hasIconAfter = _ref3.hasIconAfter;
   var baseColors = getColors({
     appearance: appearance,
     isSelected: isSelected,
+    isHighlighted: isHighlighted,
+    isActiveOverSelected: isActiveOverSelected,
     isDisabled: isDisabled
   });
   var combinedBaseColorStyles = isLink ? _objectSpread(_objectSpread({}, baseColors), {}, {
     textDecoration: 'none',
     // Disabling visited styles (by re-declaring the base colors)
     ':visited': baseColors
+  }) : isNavigationSplit && !isSelected ? _objectSpread(_objectSpread({}, baseColors), {}, {
+    backgroundColor: 'color.background.neutral.subtle'
   }) : baseColors;
   var height = heights[spacing];
   var width = shouldFitContainer ? '100%' : 'auto';
-  width = isIconButton ? height : width;
-  var paddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
-  var paddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  width = isIconButton ? isNavigationSplit ? '24px' : height : width;
+  var defaultPaddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
+  var defaultPaddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  var splitButtonStyles = isSplit ? splitBorderStyles : {};
+  var getNavigationSplitButtonPaddings = function getNavigationSplitButtonPaddings() {
+    if (isNavigationSplit) {
+      return {
+        paddingInlineStart: 'space.075',
+        paddingInlineEnd: 'space.075'
+      };
+    }
+    return {
+      paddingInlineStart: isIconButton ? 'space.0' : defaultPaddingInlineStart,
+      paddingInlineEnd: isIconButton ? 'space.0' : defaultPaddingInlineEnd
+    };
+  };
+  var _getNavigationSplitBu = getNavigationSplitButtonPaddings(),
+    paddingInlineStart = _getNavigationSplitBu.paddingInlineStart,
+    paddingInlineEnd = _getNavigationSplitBu.paddingInlineEnd;
   return (0, _primitives.xcss)(_objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center',
     borderWidth: 'border.width.0',
@@ -117,8 +154,8 @@ function getXCSS(_ref3) {
     whiteSpace: 'nowrap',
     height: height,
     paddingBlock: 'space.0',
-    paddingInlineStart: isIconButton ? 'space.0' : paddingInlineStart,
-    paddingInlineEnd: isIconButton ? 'space.0' : paddingInlineEnd,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
     columnGap: gap[spacing],
     verticalAlign: verticalAlign[spacing],
     width: width,
@@ -129,7 +166,8 @@ function getXCSS(_ref3) {
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'hover',
       hasOverlay: hasOverlay
@@ -140,7 +178,8 @@ function getXCSS(_ref3) {
     }),
     ':active': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'active',
       hasOverlay: hasOverlay
@@ -148,44 +187,5 @@ function getXCSS(_ref3) {
       // background, box-shadow
       transitionDuration: '0s, 0s'
     })
-  }));
-}
-var iconStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  // icon size cannot grow and shrink
-  flexGrow: 0,
-  flexShrink: 0,
-  alignSelf: 'center',
-  fontSize: 0,
-  lineHeight: 0,
-  userSelect: 'none'
-});
-exports.iconStyles = iconStyles;
-var contentStyles = (0, _primitives.xcss)({
-  // content can grow and shrink
-  flexGrow: 1,
-  flexShrink: 1,
-  // ellipsis for overflow text
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-exports.contentStyles = contentStyles;
-function getFadingStyles(_ref4) {
-  var hasOverlay = _ref4.hasOverlay;
-  return (0, _primitives.xcss)({
-    opacity: hasOverlay ? 0 : 1,
-    transition: 'opacity 0.3s'
-  });
-}
-var overlayStyles = (0, _primitives.xcss)({
-  position: 'absolute',
-  left: 'space.0',
-  top: 'space.0',
-  right: 'space.0',
-  bottom: 'space.0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-exports.overlayStyles = overlayStyles;
+  }, splitButtonStyles));
+}

package/dist/cjs/old-button/button.js

@@ -101,5 +101,4 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
 
 // Tools including enzyme rely on components having a display name
 Button.displayName = 'Button';
-var _default = Button;
-exports.default = _default;
+var _default = exports.default = Button;

package/dist/cjs/old-button/custom-theme-button/custom-theme-button.js

@@ -200,5 +200,4 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
 
 // Tools including enzyme rely on components having a display name
 CustomThemeButton.displayName = 'CustomThemeButton';
-var _default = CustomThemeButton;
-exports.default = _default;
+var _default = exports.default = CustomThemeButton;

package/dist/cjs/old-button/custom-theme-button/theme.js

@@ -98,5 +98,4 @@ var Theme = (0, _components.createTheme)(function (themeProps) {
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = Theme;
-exports.default = _default;
+var _default = exports.default = Theme;