@primer/react 34.0.0 → 34.0.1

package/lib/ActionList/Item.js

@@ -23,7 +23,7 @@ var _Divider = require("./Divider");
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _focusZone = require("../behaviors/focusZone");
+var _behaviors = require("@primer/behaviors");
 
 var _ssr = require("@react-aria/ssr");
 
@@ -98,10 +98,10 @@ const StyledItem = _styledComponents.default.div.withConfig({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
   showDivider
-}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
+}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _behaviors.isActiveDescendantAttribute, DividedContent, _behaviors.isActiveDescendantAttribute, DividedContent, _behaviors.isActiveDescendantAttribute, _behaviors.activeDescendantActivatedDirectly, ({
   variant,
   item
-}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _behaviors.isActiveDescendantAttribute, _behaviors.activeDescendantActivatedIndirectly, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({

package/lib/ActionList/List.js

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("../constants");
 
-var _focusZone = require("../behaviors/focusZone");
+var _behaviors = require("@primer/behaviors");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,7 +38,7 @@ function isGroupedListProps(props) {
 const StyledList = _styledComponents.default.div.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-1x7olzq-0"
-})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _focusZone.hasActiveDescendantAttribute, (0, _constants.get)('colors.border.muted'));
+})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _behaviors.hasActiveDescendantAttribute, (0, _constants.get)('colors.border.muted'));
 /**
  * Returns `sx` prop values for `List` children matching the given `List` style variation.
  * @param variant `List` style variation.

package/lib/ActionList2/Selection.js

@@ -46,7 +46,6 @@ const Selection = ({
 
   if (container === 'ActionMenu') {
     throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
-    return null;
   }
 
   if (selectionVariant === 'single') {

package/lib/ActionMenu2.d.ts

@@ -2,8 +2,6 @@ import { ButtonProps } from './Button';
 import React from 'react';
 import { AnchoredOverlayProps } from './AnchoredOverlay';
 import { OverlayProps } from './Overlay';
-declare type MenuContextProps = Pick<AnchoredOverlayProps, 'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'onClose'>;
-export declare const MenuContext: React.Context<MenuContextProps>;
 export declare type ActionMenuProps = {
     /**
      * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`

package/lib/ActionMenu2.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ActionMenu = exports.MenuContext = void 0;
+exports.ActionMenu = void 0;
 
 var _Button = _interopRequireDefault(require("./Button"));
 
@@ -24,8 +24,6 @@ const MenuContext = /*#__PURE__*/_react.default.createContext({
   open: false
 });
 
-exports.MenuContext = MenuContext;
-
 const Menu = ({
   anchorRef: externalAnchorRef,
   open,

package/lib/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { OverlayProps } from '../Overlay';
 import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
 import { FocusZoneHookSettings } from '../hooks/useFocusZone';
-import { PositionSettings } from '../behaviors/anchoredPosition';
+import type { PositionSettings } from '@primer/behaviors';
 interface AnchoredOverlayPropsWithAnchor {
     /**
      * A custom function component used to render the anchor element.

package/lib/Autocomplete/Autocomplete.d.ts

@@ -21,11 +21,17 @@ declare const _default: React.FC<{
     } & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
-    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
+    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
         }> | undefined;
+        leadingVisual?: string | React.ComponentType<{
+            className?: string | undefined;
+        }> | undefined;
+        trailingVisual?: string | React.ComponentType<{
+            className?: string | undefined;
+        }> | undefined;
     } & Pick<{
         color?: string | undefined;
         property?: string | undefined;
@@ -39,6 +45,7 @@ declare const _default: React.FC<{
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
+        size?: "small" | "large" | undefined;
         block?: boolean | undefined;
         variant?: "small" | "large" | undefined;
         role?: React.AriaRole | undefined;
@@ -293,11 +300,13 @@ declare const _default: React.FC<{
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         css?: import("@emotion/core").InterpolationWithTheme<any>;
         disabled?: boolean | undefined;
-        hasIcon?: boolean | undefined;
+        validationStatus?: "error" | "warning" | undefined;
+        hasLeadingVisual?: boolean | undefined;
+        hasTrailingVisual?: boolean | undefined;
         contrast?: boolean | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
+    }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
         as?: React.ComponentType<any> | undefined;
     }>;
     Menu: typeof AutocompleteMenu;

package/lib/Autocomplete/AutocompleteInput.d.ts

@@ -13,11 +13,17 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | undefined;
+    leadingVisual?: string | React.ComponentType<{
+        className?: string | undefined;
+    }> | undefined;
+    trailingVisual?: string | React.ComponentType<{
+        className?: string | undefined;
+    }> | undefined;
 } & Pick<{
     color?: string | undefined;
     property?: string | undefined;
@@ -31,6 +37,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
+    size?: "small" | "large" | undefined;
     block?: boolean | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
@@ -285,10 +292,12 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     css?: import("@emotion/core").InterpolationWithTheme<any>;
     disabled?: boolean | undefined;
-    hasIcon?: boolean | undefined;
+    validationStatus?: "error" | "warning" | undefined;
+    hasLeadingVisual?: boolean | undefined;
+    hasTrailingVisual?: boolean | undefined;
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
+}, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
 export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
 export default AutocompleteInput;

package/lib/Autocomplete/AutocompleteMenu.js

@@ -17,9 +17,9 @@ var _AutocompleteContext = require("./AutocompleteContext");
 
 var _octiconsReact = require("@primer/octicons-react");
 
-var _uniqueId = require("../utils/uniqueId");
+var _utils = require("@primer/behaviors/utils");
 
-var _scrollIntoViewingArea = require("../behaviors/scrollIntoViewingArea");
+var _behaviors = require("@primer/behaviors");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -27,6 +27,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
 
+const menuScrollMargins = {
+  startMargin: 0,
+  endMargin: 8
+};
+
 function getDefaultItemFilter(filterValue) {
   return function (item, _i) {
     var _item$text;
@@ -125,7 +130,7 @@ function AutocompleteMenu(props) {
     onAction: item => {
       // TODO: make it possible to pass a leadingVisual when using `addNewItem`
       addNewItem.handleAddItem({ ...item,
-        id: item.id || (0, _uniqueId.uniqueId)(),
+        id: item.id || (0, _utils.uniqueId)(),
         leadingVisual: undefined
       });
 
@@ -152,9 +157,9 @@ function AutocompleteMenu(props) {
       }
 
       if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
-        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, customScrollContainerRef.current);
+        (0, _behaviors.scrollIntoView)(current, customScrollContainerRef.current, menuScrollMargins);
       } else if (current && scrollContainerRef.current && directlyActivated) {
-        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
+        (0, _behaviors.scrollIntoView)(current, scrollContainerRef.current, menuScrollMargins);
       }
     }
   }, [loading]);

package/lib/Dialog/ConfirmationDialog.js

@@ -16,7 +16,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _focusZone = require("../behaviors/focusZone");
+var _behaviors = require("@primer/behaviors");
 
 var _constants = require("../constants");
 
@@ -81,7 +81,7 @@ const ConfirmationFooter = ({
   const {
     containerRef: footerRef
   } = (0, _useFocusZone.useFocusZone)({
-    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.Tab,
+    bindKeys: _behaviors.FocusKeys.ArrowHorizontal | _behaviors.FocusKeys.Tab,
     focusInStrategy: 'closest'
   }); // Must have exactly 2 buttons!
 

package/lib/Dialog/Dialog.js

@@ -27,7 +27,7 @@ var _octiconsReact = require("@primer/octicons-react");
 
 var _useFocusZone = require("../hooks/useFocusZone");
 
-var _focusZone = require("../behaviors/focusZone");
+var _behaviors = require("@primer/behaviors");
 
 var _Portal = _interopRequireDefault(require("../Portal"));
 
@@ -121,7 +121,7 @@ const DefaultFooter = ({
   const {
     containerRef: footerRef
   } = (0, _useFocusZone.useFocusZone)({
-    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.Tab,
+    bindKeys: _behaviors.FocusKeys.ArrowHorizontal | _behaviors.FocusKeys.Tab,
     focusInStrategy: 'closest'
   });
   return footerButtons ? /*#__PURE__*/_react.default.createElement(Dialog.Footer, {

package/lib/FilteredActionList/FilteredActionList.js

@@ -29,7 +29,7 @@ var _useProvidedRefOrCreate = require("../hooks/useProvidedRefOrCreate");
 
 var _useScrollFlash = _interopRequireDefault(require("../hooks/useScrollFlash"));
 
-var _scrollIntoViewingArea = require("../behaviors/scrollIntoViewingArea");
+var _behaviors = require("@primer/behaviors");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,6 +39,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const menuScrollMargins = {
+  startMargin: 0,
+  endMargin: 8
+};
+
 const StyledHeader = _styledComponents.default.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
   componentId: "sc-1oqgb0s-0"
@@ -86,7 +91,7 @@ function FilteredActionList({
       activeDescendantRef.current = current;
 
       if (current && scrollContainerRef.current && directlyActivated) {
-        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
+        (0, _behaviors.scrollIntoView)(current, scrollContainerRef.current, menuScrollMargins);
       }
     }
   }, [// List ref isn't set while loading.  Need to re-bind focus zone when it changes
@@ -94,7 +99,9 @@ function FilteredActionList({
   (0, _react.useEffect)(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
+      (0, _behaviors.scrollIntoView)(activeDescendantRef.current, scrollContainerRef.current, { ...menuScrollMargins,
+        behavior: 'auto'
+      });
     }
   }, [items]);
   (0, _useScrollFlash.default)(scrollContainerRef);

package/lib/NewButton/button-base.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from 'react';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { ButtonProps } from './types';
+declare const ButtonBase: PolymorphicForwardRefComponent<"a" | "button", ButtonProps>;
+export declare type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase>;
+export default ButtonBase;

package/lib/NewButton/button-base.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _types = require("./types");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  as: Component = 'button',
+  sx: sxProp = {},
+  ...props
+}, forwardedRef) => {
+  const {
+    leadingIcon: LeadingIcon,
+    trailingIcon: TrailingIcon,
+    variant = 'default',
+    size = 'medium'
+  } = props;
+  const {
+    theme
+  } = (0, _ThemeProvider.useTheme)();
+  const iconWrapStyles = {
+    display: 'inline-block'
+  };
+
+  const sxStyles = _sx.merge.all([(0, _styles.getButtonStyles)(theme), (0, _styles.getSizeStyles)(size, variant, false), (0, _styles.getVariantStyles)(variant, theme), sxProp]);
+
+  return /*#__PURE__*/_react.default.createElement(_types.StyledButton, _extends({
+    as: Component,
+    sx: sxStyles
+  }, props, {
+    ref: forwardedRef
+  }), LeadingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    "data-component": "leadingIcon",
+    sx: iconWrapStyles
+  }, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
+    "data-component": "text"
+  }, children), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    "data-component": "trailingIcon",
+    sx: { ...iconWrapStyles,
+      ml: 2
+    }
+  }, /*#__PURE__*/_react.default.createElement(TrailingIcon, null)));
+});
+var _default = ButtonBase;
+exports.default = _default;

package/lib/NewButton/button-link.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+declare const LinkButton: PolymorphicForwardRefComponent<"a", Omit<(Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
+}) | (Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}), string | number | symbol> & {
+    leadingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
+    trailingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
+    children: React.ReactNode;
+} & {
+    variant?: import("./types").VariantType | undefined;
+    size?: import("./types").Size | undefined;
+    disabled?: boolean | undefined;
+} & import("../sx").SxProp & React.HTMLAttributes<HTMLButtonElement> & {
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+} & {
+    as?: "a" | "button" | undefined;
+}>;
+export default LinkButton;

package/lib/NewButton/button-link.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _buttonBase = _interopRequireDefault(require("./button-base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const LinkButton = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  as: Component = 'a',
+  ...props
+}, forwardedRef) => {
+  return /*#__PURE__*/_react.default.createElement(_buttonBase.default, _extends({
+    as: Component,
+    ref: forwardedRef
+  }, props), children);
+});
+var _default = LinkButton;
+exports.default = _default;

package/lib/NewButton/button.d.ts

@@ -1,13 +1,4 @@
 import React from 'react';
-import { SxProp } from '../sx';
-import { VariantType } from './types';
-declare const Button: React.ForwardRefExoticComponent<{
-    variant?: VariantType | undefined;
-    size?: import("./types").Size | undefined;
-    icon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
-    leadingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
-    trailingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
-    disabled?: boolean | undefined;
-    children: React.ReactNode;
-} & SxProp & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+import { ButtonProps } from './types';
+declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;
 export { Button };