@primer/react 34.0.0 → 34.0.1

package/lib/_TextInputWrapper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.textInputHorizPadding = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -19,7 +19,24 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+const sizeDeprecatedVariants = (0, _styledSystem.variant)({
+  variants: {
+    small: {
+      minHeight: '28px',
+      px: 2,
+      py: '3px',
+      fontSize: 0,
+      lineHeight: '20px'
+    },
+    large: {
+      px: 2,
+      py: '10px',
+      fontSize: 3
+    }
+  }
+});
 const sizeVariants = (0, _styledSystem.variant)({
+  prop: 'size',
   variants: {
     small: {
       minHeight: '28px',
@@ -35,17 +52,13 @@ const sizeVariants = (0, _styledSystem.variant)({
     }
   }
 });
+const textInputHorizPadding = '12px';
+exports.textInputHorizPadding = textInputHorizPadding;
 
 const TextInputWrapper = _styledComponents.default.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-apywy2-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
-  if (props.hasIcon) {
-    return (0, _styledComponents.css)(["padding:0;"]);
-  } else {
-    return (0, _styledComponents.css)(["padding:6px 12px;"]);
-  }
-}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), props => props.block && props.hasIcon && (0, _styledComponents.css)(["display:flex;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
+})(["min-height:32px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-color:", ";background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;display:inline-flex;align-items:stretch;& >:not(:last-child){margin-right:", ";}", " .TextInput-icon{align-self:center;color:", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), (0, _constants.get)('space.2'), props => (0, _styledComponents.css)(["padding-left:", ";padding-right:", ";> input{padding-left:", ";padding-right:", ";}"], props.hasLeadingVisual ? textInputHorizPadding : 0, props.hasTrailingVisual ? textInputHorizPadding : 0, !props.hasLeadingVisual ? textInputHorizPadding : 0, !props.hasTrailingVisual ? textInputHorizPadding : 0), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.validationStatus === 'error' && (0, _styledComponents.css)(["border-color:", ";&:focus-within{border-color:", ";box-shadow:", ";}"], (0, _constants.get)('colors.danger.emphasis'), (0, _constants.get)('colors.danger.emphasis'), (0, _constants.get)('shadows.btn.danger.focusShadow')), props => props.validationStatus === 'warning' && (0, _styledComponents.css)(["border-color:", ";&:focus-within{border-color:", ";box-shadow:0 0 0 3px ", ";}"], (0, _constants.get)('colors.attention.emphasis'), (0, _constants.get)('colors.attention.emphasis'), (0, _constants.get)('colors.attention.muted')), props => props.block && (0, _styledComponents.css)(["width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeDeprecatedVariants, sizeVariants, _sx.default);
 
 var _default = TextInputWrapper;
 exports.default = _default;

package/lib/hooks/useAnchoredPosition.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PositionSettings, AnchorPosition } from '../behaviors/anchoredPosition';
+import type { AnchorPosition, PositionSettings } from '@primer/behaviors';
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
     floatingElementRef?: React.RefObject<Element>;
     anchorElementRef?: React.RefObject<Element>;

package/lib/hooks/useAnchoredPosition.js

@@ -7,7 +7,7 @@ exports.useAnchoredPosition = useAnchoredPosition;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _anchoredPosition = require("../behaviors/anchoredPosition");
+var _behaviors = require("@primer/behaviors");
 
 var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
 
@@ -34,7 +34,7 @@ function useAnchoredPosition(settings, dependencies = []) {
 
   const updatePosition = _react.default.useCallback(() => {
     if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
-      setPosition((0, _anchoredPosition.getAnchoredPosition)(floatingElementRef.current, anchorElementRef.current, settings));
+      setPosition((0, _behaviors.getAnchoredPosition)(floatingElementRef.current, anchorElementRef.current, settings));
     } else {
       setPosition(undefined);
     }

package/lib/hooks/useFocusTrap.js

@@ -7,7 +7,7 @@ exports.useFocusTrap = useFocusTrap;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _focusTrap = require("../behaviors/focusTrap");
+var _behaviors = require("@primer/behaviors");
 
 var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
 
@@ -51,7 +51,7 @@ function useFocusTrap(settings, dependencies = []) {
       if (!disabled) {
         var _initialFocusRef$curr;
 
-        abortController.current = (0, _focusTrap.focusTrap)(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : undefined);
+        abortController.current = (0, _behaviors.focusTrap)(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : undefined);
         return () => {
           disableTrap();
         };

package/lib/hooks/useFocusZone.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import { FocusZoneSettings } from '../behaviors/focusZone';
+import type { FocusZoneSettings } from '@primer/behaviors';
+export { FocusKeys } from '@primer/behaviors';
+export type { Direction } from '@primer/behaviors';
 export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
     /**
      * Optional ref for the container that holds all elements participating in arrow key focus.

package/lib/hooks/useFocusZone.js

@@ -4,10 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useFocusZone = useFocusZone;
+Object.defineProperty(exports, "FocusKeys", {
+  enumerable: true,
+  get: function () {
+    return _behaviors.FocusKeys;
+  }
+});
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _focusZone = require("../behaviors/focusZone");
+var _behaviors = require("@primer/behaviors");
 
 var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
 
@@ -32,7 +38,7 @@ function useFocusZone(settings = {}, dependencies = []) {
         const vanillaSettings = { ...settings,
           activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : undefined
         };
-        abortController.current = (0, _focusZone.focusZone)(containerRef.current, vanillaSettings);
+        abortController.current = (0, _behaviors.focusZone)(containerRef.current, vanillaSettings);
         return () => {
           var _abortController$curr;
 

package/lib/hooks/useOpenAndCloseFocus.js

@@ -7,7 +7,7 @@ exports.useOpenAndCloseFocus = useOpenAndCloseFocus;
 
 var _react = require("react");
 
-var _iterateFocusableElements = require("../utils/iterateFocusableElements");
+var _utils = require("@primer/behaviors/utils");
 
 function useOpenAndCloseFocus({
   initialFocusRef,
@@ -25,7 +25,7 @@ function useOpenAndCloseFocus({
     if (initialFocusRef && initialFocusRef.current) {
       initialFocusRef.current.focus();
     } else if (containerRef.current) {
-      const firstItem = (0, _iterateFocusableElements.iterateFocusableElements)(containerRef.current).next().value;
+      const firstItem = (0, _utils.iterateFocusableElements)(containerRef.current).next().value;
       firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
     }
 

package/lib-esm/ActionList/Item.js

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { StyledHeader } from './Header';
 import { StyledDivider } from './Divider';
 import { useTheme } from '../ThemeProvider';
-import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
+import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '@primer/behaviors';
 import { useSSRSafeId } from '@react-aria/ssr';
 
 const getItemVariant = (variant = 'default', disabled) => {

package/lib-esm/ActionList/List.js

@@ -6,7 +6,7 @@ import { Item } from './Item';
 import { Divider } from './Divider';
 import styled from 'styled-components';
 import { get } from '../constants';
-import { hasActiveDescendantAttribute } from '../behaviors/focusZone';
+import { hasActiveDescendantAttribute } from '@primer/behaviors';
 
 /**
  * Asserts that the given value fulfills the `GroupedListProps` contract.

package/lib-esm/ActionList2/Selection.js

@@ -28,7 +28,6 @@ export 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-esm/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-esm/ActionMenu2.js

@@ -4,7 +4,7 @@ import { AnchoredOverlay } from './AnchoredOverlay';
 import { useProvidedRefOrCreate, useProvidedStateOrCreate } from './hooks';
 import { Divider } from './ActionList2/Divider';
 import { ActionListContainerContext } from './ActionList2/ActionListContainerContext';
-export const MenuContext = /*#__PURE__*/React.createContext({
+const MenuContext = /*#__PURE__*/React.createContext({
   renderAnchor: null,
   open: false
 });

package/lib-esm/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-esm/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-esm/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-esm/Autocomplete/AutocompleteMenu.js

@@ -4,11 +4,16 @@ import { useFocusZone } from '../hooks/useFocusZone';
 import { Box, Spinner } from '../';
 import { AutocompleteContext } from './AutocompleteContext';
 import { PlusIcon } from '@primer/octicons-react';
-import { uniqueId } from '../utils/uniqueId';
-import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
+import { uniqueId } from '@primer/behaviors/utils';
+import { scrollIntoView } from '@primer/behaviors';
 
 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;
@@ -134,9 +139,9 @@ function AutocompleteMenu(props) {
       }
 
       if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
-        scrollIntoViewingArea(current, customScrollContainerRef.current);
+        scrollIntoView(current, customScrollContainerRef.current, menuScrollMargins);
       } else if (current && scrollContainerRef.current && directlyActivated) {
-        scrollIntoViewingArea(current, scrollContainerRef.current);
+        scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
       }
     }
   }, [loading]);

package/lib-esm/Dialog/ConfirmationDialog.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import Box from '../Box';
 import { ThemeProvider, useTheme } from '../ThemeProvider';
-import { FocusKeys } from '../behaviors/focusZone';
+import { FocusKeys } from '@primer/behaviors';
 import { get } from '../constants';
 import { Dialog } from '../Dialog/Dialog';
 import { useFocusZone } from '../hooks/useFocusZone';

package/lib-esm/Dialog/Dialog.js

@@ -11,7 +11,7 @@ import sx from '../sx';
 import StyledOcticon from '../StyledOcticon';
 import { XIcon } from '@primer/octicons-react';
 import { useFocusZone } from '../hooks/useFocusZone';
-import { FocusKeys } from '../behaviors/focusZone';
+import { FocusKeys } from '@primer/behaviors';
 import Portal from '../Portal';
 import { useCombinedRefs } from '../hooks/useCombinedRefs';
 import { useSSRSafeId } from '@react-aria/ssr';

package/lib-esm/FilteredActionList/FilteredActionList.js

@@ -12,7 +12,11 @@ import styled from 'styled-components';
 import { get } from '../constants';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate';
 import useScrollFlash from '../hooks/useScrollFlash';
-import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
+import { scrollIntoView } from '@primer/behaviors';
+const menuScrollMargins = {
+  startMargin: 0,
+  endMargin: 8
+};
 const StyledHeader = styled.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
   componentId: "sc-1oqgb0s-0"
@@ -59,7 +63,7 @@ export function FilteredActionList({
       activeDescendantRef.current = current;
 
       if (current && scrollContainerRef.current && directlyActivated) {
-        scrollIntoViewingArea(current, scrollContainerRef.current);
+        scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
       }
     }
   }, [// List ref isn't set while loading.  Need to re-bind focus zone when it changes
@@ -67,7 +71,9 @@ export function FilteredActionList({
   useEffect(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
+      scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, { ...menuScrollMargins,
+        behavior: 'auto'
+      });
     }
   }, [items]);
   useScrollFlash(scrollContainerRef);

package/lib-esm/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-esm/NewButton/button-base.js

@@ -0,0 +1,47 @@
+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); }
+
+import React, { forwardRef } from 'react';
+import Box from '../Box';
+import { merge } from '../sx';
+import { useTheme } from '../ThemeProvider';
+import { StyledButton } from './types';
+import { getVariantStyles, getSizeStyles, getButtonStyles } from './styles';
+const ButtonBase = /*#__PURE__*/forwardRef(({
+  children,
+  as: Component = 'button',
+  sx: sxProp = {},
+  ...props
+}, forwardedRef) => {
+  const {
+    leadingIcon: LeadingIcon,
+    trailingIcon: TrailingIcon,
+    variant = 'default',
+    size = 'medium'
+  } = props;
+  const {
+    theme
+  } = useTheme();
+  const iconWrapStyles = {
+    display: 'inline-block'
+  };
+  const sxStyles = merge.all([getButtonStyles(theme), getSizeStyles(size, variant, false), getVariantStyles(variant, theme), sxProp]);
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({
+    as: Component,
+    sx: sxStyles
+  }, props, {
+    ref: forwardedRef
+  }), LeadingIcon && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    "data-component": "leadingIcon",
+    sx: iconWrapStyles
+  }, /*#__PURE__*/React.createElement(LeadingIcon, null)), /*#__PURE__*/React.createElement("span", {
+    "data-component": "text"
+  }, children), TrailingIcon && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    "data-component": "trailingIcon",
+    sx: { ...iconWrapStyles,
+      ml: 2
+    }
+  }, /*#__PURE__*/React.createElement(TrailingIcon, null)));
+});
+export default ButtonBase;

package/lib-esm/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-esm/NewButton/button-link.js

@@ -0,0 +1,15 @@
+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); }
+
+import React, { forwardRef } from 'react';
+import ButtonBase from './button-base';
+const LinkButton = /*#__PURE__*/forwardRef(({
+  children,
+  as: Component = 'a',
+  ...props
+}, forwardedRef) => {
+  return /*#__PURE__*/React.createElement(ButtonBase, _extends({
+    as: Component,
+    ref: forwardedRef
+  }, props), children);
+});
+export default LinkButton;

package/lib-esm/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 };