@atlaskit/button 17.12.1 → 17.12.2

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

@@ -1,22 +1,337 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
-import React, { Fragment, useMemo, useRef } from 'react';
+import React, { Fragment, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { Box, xcss } from '@atlaskit/primitives';
+import * as colors from '@atlaskit/theme/colors';
+import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
-import { getXCSS } from './xcss';
+var fontSize = getFontSize();
+var buttonStyles = xcss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  position: 'relative',
+  alignItems: 'baseline',
+  justifyContent: 'center',
+  columnGap: 'space.050',
+  background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  // @ts-expect-error
+  color: "var(--ds-text, ".concat(colors.N500, ")"),
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  height: "".concat(32 / fontSize, "em"),
+  lineHeight: "".concat(32 / fontSize, "em"),
+  paddingBlock: 'space.0',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  textAlign: 'center',
+  transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  verticalAlign: 'middle',
+  whiteSpace: 'nowrap',
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text, ".concat(colors.N500, ")")
+  }
+});
+var defaultInteractiveStyles = xcss({
+  ':hover': {
+    background: "var(--ds-background-neutral-hovered, #091e4214)",
+    // @ts-expect-error
+    color: "var(--ds-text, ".concat(colors.N500, ")"),
+    transitionDuration: '0s, 0.15s'
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
+    // @ts-expect-error
+    color: "var(--ds-text, ".concat(colors.B400, ")"),
+    transitionDuration: '0s, 0s'
+  }
+});
+var primaryStyles = xcss({
+  background: "var(--ds-background-brand-bold, #0052CC)",
+  // @ts-expect-error
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }
+});
+var primaryInteractiveStyles = xcss({
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    background: "var(--ds-background-brand-bold-hovered, #0065FF)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    background: "var(--ds-background-brand-bold-pressed, #0747A6)"
+  }
+});
+var warningStyles = xcss({
+  background: "var(--ds-background-warning-bold, #FFAB00)",
+  // @ts-expect-error
+  color: "var(--ds-text-warning-inverse, #172B4D)",
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  }
+});
+var warningInteractiveStyles = xcss({
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)",
+    background: "var(--ds-background-warning-bold-hovered, #FFC400)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)",
+    background: "var(--ds-background-warning-bold-pressed, #FF991F)"
+  }
+});
+var dangerStyles = xcss({
+  background: "var(--ds-background-danger-bold, #DE350B)",
+  color: 'color.text.inverse',
+  ':visited': {
+    color: 'color.text.inverse'
+  }
+});
+var dangerInteractiveStyles = xcss({
+  ':hover': {
+    color: 'color.text.inverse',
+    background: "var(--ds-background-danger-bold-hovered, #FF5630)"
+  },
+  ':active': {
+    color: 'color.text.inverse',
+    background: "var(--ds-background-danger-bold-pressed, #BF2600)"
+  }
+});
+var subtleStyles = xcss({
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  // @ts-expect-error
+  color: "var(--ds-text, #42526E)",
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  }
+});
+var subtleInteractiveStyles = xcss({
+  ':hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  }
+});
+var linkStyles = xcss({
+  // @ts-expect-error
+  color: "var(--ds-link, ".concat(colors.B400, ")"),
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  textDecoration: 'none',
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-link, ".concat(colors.B300, ")"),
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-link-pressed, #0055CC)",
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-link, ".concat(colors.B400, ")")
+  }
+});
+var subtleLinkStyles = xcss({
+  // @ts-expect-error
+  color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  textDecoration: 'none',
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text, ".concat(colors.N400, ")"),
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text-subtle, ".concat(colors.N200, ")")
+  }
+});
+
+// Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
+var linkDecorationUnsetStyles = xcss({
+  textDecoration: 'none',
+  ':hover': {
+    textDecoration: 'none'
+  },
+  ':active': {
+    textDecoration: 'none'
+  },
+  ':focus': {
+    textDecoration: 'none'
+  }
+});
+var linkDecorationStyles = xcss({
+  ':hover': {
+    textDecoration: 'underline'
+  },
+  ':focus': {
+    textDecoration: 'underline'
+  }
+});
+var disabledStyles = xcss({
+  background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+  // @ts-expect-error
+  color: "var(--ds-text-disabled, #091E424F)",
+  ':hover': {
+    background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+    // @ts-expect-error
+    color: "var(--ds-text-disabled, #091E424F)"
+  },
+  ':active': {
+    background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+    // @ts-expect-error
+    color: "var(--ds-text-disabled, #091E424F)"
+  }
+});
+var selectedStyles = xcss({
+  background: "var(--ds-background-selected, ".concat(colors.N700, ")"),
+  // @ts-expect-error
+  color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")")
+  }
+});
+var selectedInteractiveStyles = xcss({
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")")
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
+  }
+});
+
+// TODO: Remove me once we kill color fallbacks
+var selectedWarningStyles = xcss({
+  background: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
+  // @ts-expect-error
+  color: "var(--ds-text-selected, ".concat(colors.N800, ")"),
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
+  }
+});
+
+// TODO: Remove me once we kill color fallbacks
+var selectedDangerStyles = xcss({
+  background: "var(--ds-background-selected, ".concat(colors.R500, ")"),
+  // @ts-expect-error
+  color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected, ".concat(colors.R500, ")")
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected, ".concat(colors.R500, ")")
+  }
+});
+var spacingCompactStyles = xcss({
+  columnGap: 'space.050',
+  height: "".concat(24 / fontSize, "em"),
+  lineHeight: "".concat(24 / fontSize, "em"),
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
+var spacingNoneStyles = xcss({
+  columnGap: 'space.0',
+  height: 'auto',
+  lineHeight: 'inherit',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0',
+  verticalAlign: 'baseline'
+});
+var circleStyles = xcss({
+  borderRadius: 'border.radius.circle'
+});
+var fullWidthStyles = xcss({
+  width: '100%'
+});
+var loadingOverlayStyles = xcss({
+  cursor: 'progress'
+});
+var nonInteractiveStyles = xcss({
+  cursor: 'not-allowed'
+});
+var iconButtonStyles = xcss({
+  height: "".concat(32 / fontSize, "em"),
+  width: "".concat(32 / fontSize, "em"),
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+var iconButtonCompactStyles = xcss({
+  width: "".concat(24 / fontSize, "em"),
+  height: "".concat(24 / fontSize, "em")
+});
+var buttonIconBeforeStyles = xcss({
+  paddingInlineStart: 'space.100'
+});
+var buttonIconAfterStyles = xcss({
+  paddingInlineEnd: 'space.100'
+});
+var splitButtonStyles = xcss({
+  ':focus-visible': {
+    zIndex: 'card'
+  }
+});
+var navigationSplitButtonStyles = xcss({
+  width: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  paddingInlineEnd: 'space.075',
+  paddingInlineStart: 'space.075'
+});
 var overlayStyles = xcss({
+  display: 'flex',
   position: 'absolute',
-  insetInlineStart: 'space.0',
+  alignItems: 'center',
+  justifyContent: 'center',
+  insetBlockEnd: 'space.0',
   insetBlockStart: 'space.0',
   insetInlineEnd: 'space.0',
-  insetBlockEnd: 'space.0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
+  insetInlineStart: 'space.0'
 });
 
 /**
@@ -37,7 +352,6 @@ var useButtonBase = function useButtonBase(_ref) {
     propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-    buttonType = _ref.buttonType,
     _ref$isDisabled = _ref.isDisabled,
     propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isLoading = _ref.isLoading,
@@ -76,33 +390,17 @@ var useButtonBase = function useButtonBase(_ref) {
   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;
-  useAutoFocus(localRef, autoFocus);
-  var buttonXCSS = useMemo(function () {
-    return getXCSS({
-      appearance: appearance,
-      spacing: spacing,
-      isDisabled: isDisabled,
-      isLoading: isLoading,
-      isSelected: isSelected,
-      isHighlighted: isHighlighted,
-      isActiveOverSelected: isActiveOverSelected,
-      shouldFitContainer: shouldFitContainer,
-      isIconButton: isIconButton,
-      isCircle: isCircle,
-      hasOverlay: Boolean(overlay),
-      isLink: buttonType === 'link',
-      hasIconBefore: hasIconBefore,
-      hasIconAfter: hasIconAfter,
-      isSplit: isSplitButton,
-      isNavigationSplit: isNavigationSplitButton
-    });
-  }, [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  var hasOverlay = Boolean(overlay);
+  var isInteractive = !isDisabled && !isLoading && !hasOverlay;
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  useAutoFocus(localRef, autoFocus);
   return _objectSpread({
     ref: mergeRefs([localRef, ref]),
-    xcss: buttonXCSS,
+    xcss: [buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    // TODO: remove me once we kill color fallbacks
+    isSelected && appearance === 'danger' && selectedDangerStyles,
+    // TODO: remove me once we kill color fallbacks
+    isSelected && appearance === 'warning' && selectedWarningStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     // Consider overlay buttons to be effectively disabled
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {

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

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

package/dist/types/new-button/variants/shared/use-button-base.d.ts

@@ -18,8 +18,9 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     spacing?: Spacing;
     isLoading?: boolean;
 } & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
+type XCSS = ReturnType<typeof xcss>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
-    xcss: ReturnType<typeof xcss>;
+    xcss: XCSS | Array<XCSS | false | undefined>;
     ref(node: TagName | null): void;
     children: React.ReactNode;
     isDisabled: boolean;
@@ -37,5 +38,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types/old-button/custom-theme-button/theme.d.ts

@@ -1,17 +1,13 @@
 /// <reference types="react" />
 import { CSSObject } from '@emotion/react';
-import { InteractionState, ThemeProps, ThemeTokens } from './custom-theme-button-types';
+import { ThemeProps, ThemeTokens } from './custom-theme-button-types';
 export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
 export declare function getSpecifiers(styles: CSSObject): CSSObject;
 export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;
 declare const Theme: {
     Consumer: import("react").ComponentType<{
         children: (tokens: ThemeTokens) => import("react").ReactNode;
-    } & Partial<import("./custom-theme-button-types").CustomThemeButtonProps> & {
-        state: InteractionState;
-        iconIsOnlyChild?: boolean | undefined;
-        mode?: import("@atlaskit/theme").ThemeModes | undefined;
-    }>;
+    } & Omit<ThemeProps, "children">>;
     Provider: import("react").ComponentType<{
         children?: import("react").ReactNode;
         value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;

package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts

@@ -18,8 +18,9 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     spacing?: Spacing;
     isLoading?: boolean;
 } & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
+type XCSS = ReturnType<typeof xcss>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
-    xcss: ReturnType<typeof xcss>;
+    xcss: XCSS | Array<XCSS | false | undefined>;
     ref(node: TagName | null): void;
     children: React.ReactNode;
     isDisabled: boolean;
@@ -37,5 +38,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types-ts4.5/old-button/custom-theme-button/theme.d.ts

@@ -1,17 +1,13 @@
 /// <reference types="react" />
 import { CSSObject } from '@emotion/react';
-import { InteractionState, ThemeProps, ThemeTokens } from './custom-theme-button-types';
+import { ThemeProps, ThemeTokens } from './custom-theme-button-types';
 export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
 export declare function getSpecifiers(styles: CSSObject): CSSObject;
 export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;
 declare const Theme: {
     Consumer: import("react").ComponentType<{
         children: (tokens: ThemeTokens) => import("react").ReactNode;
-    } & Partial<import("./custom-theme-button-types").CustomThemeButtonProps> & {
-        state: InteractionState;
-        iconIsOnlyChild?: boolean | undefined;
-        mode?: import("@atlaskit/theme").ThemeModes | undefined;
-    }>;
+    } & Omit<ThemeProps, "children">>;
     Provider: import("react").ComponentType<{
         children?: import("react").ReactNode;
         value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.12.1",
+  "version": "17.12.2",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/focus-ring": "^1.3.9",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/interaction-context": "^2.1.0",
@@ -104,7 +104,8 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/app-provider": "^1.3.0",
-    "@atlaskit/checkbox": "*",
+    "@atlaskit/calendar": "^14.2.0",
+    "@atlaskit/checkbox": "^13.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

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

@@ -1,145 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var values = {
-  // Default appearance
-  background: {
-    default: {
-      /**
-       * Some colors need specific fallback colors specified
-       * to match the original Button when no theme is active.
-       *
-       * This is because the `xcss` automatic token fallbacks use
-       * the legacy themes, which do not match original colors.
-       */
-      // @ts-expect-error
-      default: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
-      hover: 'color.background.neutral.hovered',
-      active: 'color.background.neutral.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
-    },
-    primary: {
-      default: 'color.background.brand.bold',
-      hover: 'color.background.brand.bold.hovered',
-      active: 'color.background.brand.bold.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
-    },
-    warning: {
-      default: 'color.background.warning.bold',
-      hover: 'color.background.warning.bold.hovered',
-      active: 'color.background.warning.bold.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      selected: {
-        // @ts-expect-error
-        default: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
-        // @ts-expect-error
-        hover: "var(--ds-background-selected-hovered, ".concat(colors.Y400, ")"),
-        // @ts-expect-error
-        active: "var(--ds-background-selected-pressed, ".concat(colors.Y400, ")")
-      }
-    },
-    danger: {
-      default: 'color.background.danger.bold',
-      hover: 'color.background.danger.bold.hovered',
-      active: 'color.background.danger.bold.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      selected: {
-        // @ts-expect-error
-        default: "var(--ds-background-selected, ".concat(colors.R500, ")"),
-        // @ts-expect-error
-        hover: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
-        // @ts-expect-error
-        active: "var(--ds-background-selected-pressed, ".concat(colors.R500, ")")
-      }
-    },
-    link: {
-      default: 'color.background.neutral.subtle'
-    },
-    subtle: {
-      default: 'color.background.neutral.subtle',
-      hover: 'color.background.neutral.subtle.hovered',
-      active: 'color.background.neutral.subtle.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-neutral-subtle, none)"
-    },
-    'subtle-link': {
-      default: 'color.background.neutral.subtle'
-    },
-    selected: {
-      // @ts-expect-error
-      default: "var(--ds-background-selected, ".concat(colors.N700, ")"),
-      // @ts-expect-error
-      hover: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
-      // @ts-expect-error
-      active: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
-    }
-  },
-  color: {
-    default: {
-      // @ts-expect-error
-      default: "var(--ds-text, ".concat(colors.N500, ")"),
-      // @ts-expect-error
-      active: "var(--ds-text, ".concat(colors.B400, ")"),
-      disabled: 'color.text.disabled'
-    },
-    primary: {
-      default: 'color.text.inverse',
-      disabled: 'color.text.disabled'
-    },
-    warning: {
-      default: 'color.text.warning.inverse',
-      disabled: 'color.text.disabled',
-      selected: {
-        // @ts-expect-error
-        default: "var(--ds-text-selected, ".concat(colors.N800, ")")
-      }
-    },
-    danger: {
-      default: 'color.text.inverse',
-      disabled: 'color.text.disabled',
-      selected: {
-        // @ts-expect-error
-        default: "var(--ds-text-selected, ".concat(colors.N0, ")")
-      }
-    },
-    link: {
-      default: 'color.link',
-      // @ts-expect-error
-      hover: "var(--ds-link, ".concat(colors.B300, ")"),
-      active: 'color.link.pressed',
-      disabled: 'color.text.disabled'
-    },
-    subtle: {
-      // @ts-expect-error
-      default: "var(--ds-text, ".concat(colors.N500, ")"),
-      // @ts-expect-error
-      active: "var(--ds-text, ".concat(colors.B400, ")"),
-      disabled: 'color.text.disabled'
-    },
-    'subtle-link': {
-      // @ts-expect-error
-      default: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
-      // @ts-expect-error
-      hover: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
-      // @ts-expect-error
-      active: "var(--ds-text, ".concat(colors.N400, ")"),
-      disabled: 'color.text.disabled'
-    },
-    selected: {
-      // @ts-expect-error
-      default: "var(--ds-text-selected, ".concat(colors.N20, ")")
-    }
-  }
-};
-var _default = exports.default = values;