@atlaskit/button 16.10.2 → 16.12.0

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

@@ -1,19 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "iconAfter", "children", "shouldFitContainer", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
-import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import React, { forwardRef, memo } from 'react';
+import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useDefaultButton from './use-default-button';
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-var LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkButton(_ref, ref) {
+var LinkButtonBase = function LinkButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     autoFocus = _ref.autoFocus,
     appearance = _ref.appearance,
@@ -65,34 +56,45 @@ var LinkButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     shouldFitContainer: shouldFitContainer,
     spacing: spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Use Link primitive to allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    React.createElement(Box, _extends({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      onMouseDownCapture: baseProps.onMouseDownCapture,
-      onMouseUpCapture: baseProps.onMouseUpCapture,
-      onKeyDownCapture: baseProps.onKeyDownCapture,
-      onKeyUpCapture: baseProps.onKeyUpCapture,
-      onTouchStartCapture: baseProps.onTouchStartCapture,
-      onTouchEndCapture: baseProps.onTouchEndCapture,
-      onPointerDownCapture: baseProps.onPointerDownCapture,
-      onPointerUpCapture: baseProps.onPointerUpCapture,
-      onClickCapture: baseProps.onClickCapture,
-      as: "a",
-      testId: testId
-      /**
-       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
-       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkButton.displayName = 'LinkButton';
+  return /*#__PURE__*/React.createElement(UNSAFE_LINK
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    testId: testId
+    /**
+     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+     */
+    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+    ,
+    href: baseProps.isDisabled ? undefined : href,
+    role: baseProps.isDisabled ? 'link' : undefined,
+    "aria-disabled": baseProps.isDisabled === true ? true : undefined
+  }), baseProps.children);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+var WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
+
+/**
+ * __Link Button__
+ *
+ * Renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkButton = /*#__PURE__*/memo(WithRef);
 export default LinkButton;

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

@@ -1,19 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
-import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import React, { forwardRef, memo } from 'react';
+import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useIconButton from './use-icon-button';
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-var LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkIconButton(_ref, ref) {
+var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     autoFocus = _ref.autoFocus,
     appearance = _ref.appearance,
@@ -61,34 +52,45 @@ var LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(func
     ref: ref,
     spacing: spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    React.createElement(Box, _extends({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      onMouseDownCapture: baseProps.onMouseDownCapture,
-      onMouseUpCapture: baseProps.onMouseUpCapture,
-      onKeyDownCapture: baseProps.onKeyDownCapture,
-      onKeyUpCapture: baseProps.onKeyUpCapture,
-      onTouchStartCapture: baseProps.onTouchStartCapture,
-      onTouchEndCapture: baseProps.onTouchEndCapture,
-      onPointerDownCapture: baseProps.onPointerDownCapture,
-      onPointerUpCapture: baseProps.onPointerUpCapture,
-      onClickCapture: baseProps.onClickCapture,
-      as: "a",
-      testId: testId
-      /**
-       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
-       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkIconButton.displayName = 'LinkIconButton';
+  return /*#__PURE__*/React.createElement(UNSAFE_LINK
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    testId: testId
+    /**
+     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+     */
+    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+    ,
+    href: baseProps.isDisabled ? undefined : href,
+    role: baseProps.isDisabled ? 'link' : undefined,
+    "aria-disabled": baseProps.isDisabled === true ? true : undefined
+  }), baseProps.children);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+var WithRef = /*#__PURE__*/forwardRef(LinkIconButtonBase);
+
+/**
+ * __Link Icon Button__
+ *
+ * Renders a link in the style of an icon button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkIconButton = /*#__PURE__*/memo(WithRef);
 export default LinkIconButton;

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

@@ -8,6 +8,7 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 // eslint-disable-next-line no-duplicate-imports
 import InteractionContext from '@atlaskit/interaction-context';
 import { Box, xcss } from '@atlaskit/primitives';
+import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
 import { getXCSS } from './xcss';
 
@@ -40,13 +41,13 @@ var overlayStyles = xcss({
 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,
@@ -72,8 +73,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 = useRef();
+  var 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 = useCallback(function (node) {
     ourRef.current = node;
     if (ref === null) {
@@ -98,7 +107,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.2",
+    packageVersion: "16.12.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -108,14 +117,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,

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

@@ -5,7 +5,7 @@ import { xcss } from '@atlaskit/primitives';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 var fontSize = getFontSize();
-var heights = {
+export var heights = {
   default: "".concat(32 / fontSize, "em"),
   compact: "".concat(24 / fontSize, "em"),
   none: 'auto'
@@ -34,6 +34,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;
@@ -45,11 +58,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 {
@@ -68,27 +83,51 @@ export 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 xcss(_objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center',
     borderWidth: 'border.width.0',
@@ -107,8 +146,8 @@ export 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,
@@ -119,7 +158,8 @@ export function getXCSS(_ref3) {
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'hover',
       hasOverlay: hasOverlay
@@ -130,7 +170,8 @@ export function getXCSS(_ref3) {
     }),
     ':active': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'active',
       hasOverlay: hasOverlay
@@ -138,5 +179,5 @@ export function getXCSS(_ref3) {
       // background, box-shadow
       transitionDuration: '0s, 0s'
     })
-  }));
+  }, splitButtonStyles));
 }

package/dist/esm/old-button/shared/button-base.js

@@ -109,7 +109,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.2",
+    packageVersion: "16.12.0",
     analyticsData: analyticsContext
   });
 

package/dist/esm/utils/variants.js

@@ -1,14 +1,61 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "children"],
+  _excluded2 = ["href", "children", "icon"];
 import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import AddIcon from '@atlaskit/icon/glyph/add';
 import Button from '../new-button/variants/default/button';
 import LinkButton from '../new-button/variants/default/link';
+// import IconButton, {
+//   IconButtonProps,
+// } from '../new-button/variants/icon/button';
+import LinkIconButton from '../new-button/variants/icon/link';
 // Add required default props to variants
-var LinkButtonRender = /*#__PURE__*/forwardRef(function (props, ref) {
+var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$href = _ref.href,
+    href = _ref$href === void 0 ? 'home' : _ref$href,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(LinkButton, _extends({
     ref: ref,
-    href: "#"
-  }, props), props.children);
+    href: href
+  }, rest), children);
+});
+
+// TODO: Enable icon button in tests once it's ready
+// const IconButtonRender = forwardRef(
+//   (
+//     {
+//       children,
+//       icon = <AddIcon label="" />,
+//       ...rest
+//     }: Omit<IconButtonProps, 'icon'> & {
+//       icon?: IconButtonProps['icon'];
+//     },
+//     ref: React.Ref<HTMLButtonElement>,
+//   ) => (
+//     <IconButton ref={ref} icon={icon} {...rest}>
+//       {children}
+//     </IconButton>
+//   ),
+// );
+
+var LinkIconButtonRender = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$href = _ref2.href,
+    href = _ref2$href === void 0 ? '/home' : _ref2$href,
+    children = _ref2.children,
+    _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? /*#__PURE__*/React.createElement(AddIcon, {
+      label: ""
+    }) : _ref2$icon,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(LinkIconButton, _extends({
+    ref: ref,
+    icon: icon,
+    href: href
+  }, rest), children);
 });
 export var variants = [{
   name: 'Button',
@@ -18,5 +65,27 @@ export var variants = [{
   name: 'LinkButton',
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement
-}];
-export default variants;
+}
+// TODO: Enable icon buttons in tests once it's ready
+// {
+//   name: 'IconButton',
+//   Component: IconButtonRender,
+//   elementType: HTMLButtonElement,
+// },
+// {
+//   name: 'LinkIconButton',
+//   Component: LinkIconButtonRender,
+//   elementType: HTMLAnchorElement,
+// },
+];
+
+export default variants;
+export var linkButtonVariants = [{
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement
+}, {
+  name: 'LinkIconButton',
+  Component: LinkIconButtonRender,
+  elementType: HTMLAnchorElement
+}];

package/dist/types/entry-points/new.d.ts

@@ -2,4 +2,5 @@ export { default, type ButtonProps, } from '../new-button/variants/default/butto
 export { default as LinkButton, type LinkButtonProps, } from '../new-button/variants/default/link';
 export { default as IconButton, type IconButtonProps, } from '../new-button/variants/icon/button';
 export { default as LinkIconButton, type LinkIconButtonProps, } from '../new-button/variants/icon/link';
+export { SplitButton } from '../new-button/containers/split-button';
 export type { Appearance, Spacing } from '../new-button/variants/types';

package/dist/types/entry-points/unsafe.d.ts

@@ -1 +1,4 @@
 export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
+export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS, } from '../new-button/containers/split-button';
+export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';

package/dist/types/new-button/containers/split-button/index.d.ts

@@ -0,0 +1,3 @@
+export { SplitButton, SplitButtonWithSlots, Divider, SplitButtonContainer, } from './split-button';
+export { getActions } from './utils';
+export { SplitButtonContext, useSplitButtonContext, } from './split-button-context';

package/dist/types/new-button/containers/split-button/split-button-context.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { SplitButtonAppearance, SplitButtonSpacing } from './types';
+type NavigationSplitButtonContextProps = {
+    appearance: 'navigation';
+    isHighlighted: boolean;
+};
+type MainSplitButtonContextProps = {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+};
+type SplitButtonContextProps = NavigationSplitButtonContextProps | MainSplitButtonContextProps;
+/**
+ * TODO: Add jsdoc
+ */
+export declare const SplitButtonContext: import("react").Context<SplitButtonContextProps | undefined>;
+type UseSplitButtonContext = {
+    appearance: SplitButtonAppearance | 'subtle';
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    /**
+     * isSelected state has limited relevance (e.g. dropdown-menu trigger button).
+     * There is no isSelected state for color variants (e.g. primary, danger, warning).
+     * Hens we provide ability to override the isSelected state with isActiveOverSelected to display `active` state instead of `selected` state.
+     */
+    isActiveOverSelected: boolean;
+    isNavigationSplitButton: boolean;
+    isHighlighted: boolean;
+};
+type NavigationSplitButtonContext = UseSplitButtonContext & {
+    appearance: 'subtle';
+    spacing: 'default';
+    isDisabled: false;
+    isActiveOverSelected: false;
+    isNavigationSplitButton: true;
+    isHighlighted: boolean;
+};
+type MainSplitButtonContext = UseSplitButtonContext & {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    isActiveOverSelected: true;
+    isNavigationSplitButton: false;
+    isHighlighted: false;
+};
+export declare const useSplitButtonContext: () => NavigationSplitButtonContext | MainSplitButtonContext | undefined;
+export {};

package/dist/types/new-button/containers/split-button/split-button.d.ts

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonSpacing } from './types';
+type DividerProps = {
+    appearance: SplitButtonContextAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add JSDoc
+ */
+export declare const Divider: ({ appearance, spacing, isDisabled, }: DividerProps) => jsx.JSX.Element;
+/**
+ * TODO: Add JSdoc
+ */
+export declare const SplitButtonContainer: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+type SplitButtonProps = {
+    /**
+     * Only two children are allowed.
+     * First child is the primary action, second child is the secondary action.
+     * The assumption is that for both children trees there is a button reading the context.
+     */
+    children: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add description when adding docs
+ */
+export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
+type SplitButtonWithSlotsProps = {
+    primaryAction: ReactNode;
+    secondaryAction: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+/**
+ * TODO: Decide on API
+ */
+export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => jsx.JSX.Element;
+export {};

package/dist/types/new-button/containers/split-button/types.d.ts

@@ -0,0 +1,4 @@
+import type { Appearance, Spacing } from '../../variants/types';
+export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary' | 'danger' | 'warning'>;
+export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
+export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;

package/dist/types/new-button/containers/split-button/utils.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare const getActions: (children: ReactNode) => {
+    PrimaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+    SecondaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+};