@primer/components 0.0.0-20219283497 → 0.0.0-2021929153151

package/lib-esm/CircleOcticon.d.ts

@@ -12,9 +12,8 @@ declare function CircleOcticon(props: CircleOcticonProps): JSX.Element;
 declare namespace CircleOcticon {
     var defaultProps: {
         size: number;
-        boxShadow?: import("styled-system").ResponsiveValue<number | import("csstype").Property.BoxShadow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        fontWeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        zIndex?: import("styled-system").ResponsiveValue<import("csstype").Property.ZIndex, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        border?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         alignContent?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignContent, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         alignItems?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignItems, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         alignSelf?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignSelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -39,6 +38,7 @@ declare namespace CircleOcticon {
         borderTopStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderTopStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderTopWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         bottom?: import("styled-system").ResponsiveValue<import("csstype").Property.Bottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        boxShadow?: import("styled-system").ResponsiveValue<number | import("csstype").Property.BoxShadow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
         display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         flexBasis?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexBasis<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -49,6 +49,7 @@ declare namespace CircleOcticon {
         fontFamily?: import("styled-system").ResponsiveValue<import("csstype").Property.FontFamily, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         fontStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.FontStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        fontWeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         gridAutoColumns?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoColumns<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         gridAutoFlow?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoFlow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         gridAutoRows?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoRows<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -61,7 +62,6 @@ declare namespace CircleOcticon {
         justifySelf?: import("styled-system").ResponsiveValue<import("csstype").Property.JustifySelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         left?: import("styled-system").ResponsiveValue<import("csstype").Property.Left<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         letterSpacing?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -86,9 +86,9 @@ declare namespace CircleOcticon {
         translate?: "yes" | "no" | undefined;
         verticalAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.VerticalAlign<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        zIndex?: import("styled-system").ResponsiveValue<import("csstype").Property.ZIndex, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         background?: import("styled-system").ResponsiveValue<import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         backgroundPosition?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        border?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderBottom?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderBottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderLeft?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderLeft<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -104,6 +104,16 @@ declare namespace CircleOcticon {
         margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         overflow?: import("styled-system").ResponsiveValue<import("csstype").Property.Overflow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridColumnGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridColumnGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridRowGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridRowGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        hidden?: boolean | undefined;
+        children?: React.ReactNode;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
         bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -114,7 +124,6 @@ declare namespace CircleOcticon {
         marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -123,10 +132,6 @@ declare namespace CircleOcticon {
         paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        slot?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined;
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -134,15 +139,14 @@ declare namespace CircleOcticon {
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        hidden?: boolean | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         placeholder?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: number | undefined;
         radioGroup?: string | undefined;
         role?: React.AriaRole | undefined;
@@ -165,57 +169,56 @@ declare namespace CircleOcticon {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
-        'aria-atomic'?: boolean | "true" | "false" | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
-        'aria-busy'?: boolean | "true" | "false" | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-atomic'?: boolean | "false" | "true" | undefined;
+        'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+        'aria-busy'?: boolean | "false" | "true" | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
         'aria-colindex'?: number | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
-        'aria-disabled'?: boolean | "true" | "false" | undefined;
+        'aria-disabled'?: boolean | "false" | "true" | undefined;
         'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: boolean | "true" | "false" | undefined;
+        'aria-expanded'?: boolean | "false" | "true" | undefined;
         'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: boolean | "true" | "false" | undefined;
-        'aria-haspopup'?: boolean | "grid" | "dialog" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
-        'aria-hidden'?: boolean | "true" | "false" | undefined;
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-grabbed'?: boolean | "false" | "true" | undefined;
+        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+        'aria-hidden'?: boolean | "false" | "true" | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
         'aria-label'?: string | undefined;
         'aria-labelledby'?: string | undefined;
         'aria-level'?: number | undefined;
         'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        'aria-modal'?: boolean | "true" | "false" | undefined;
-        'aria-multiline'?: boolean | "true" | "false" | undefined;
-        'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+        'aria-modal'?: boolean | "false" | "true" | undefined;
+        'aria-multiline'?: boolean | "false" | "true" | undefined;
+        'aria-multiselectable'?: boolean | "false" | "true" | undefined;
         'aria-orientation'?: "horizontal" | "vertical" | undefined;
         'aria-owns'?: string | undefined;
         'aria-placeholder'?: string | undefined;
         'aria-posinset'?: number | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-        'aria-readonly'?: boolean | "true" | "false" | undefined;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-readonly'?: boolean | "false" | "true" | undefined;
         'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        'aria-required'?: boolean | "true" | "false" | undefined;
+        'aria-required'?: boolean | "false" | "true" | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
         'aria-rowindex'?: number | undefined;
         'aria-rowspan'?: number | undefined;
-        'aria-selected'?: boolean | "true" | "false" | undefined;
+        'aria-selected'?: boolean | "false" | "true" | undefined;
         'aria-setsize'?: number | undefined;
         'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
         'aria-valuemax'?: number | undefined;
         'aria-valuemin'?: number | undefined;
         'aria-valuenow'?: number | undefined;
         'aria-valuetext'?: string | undefined;
-        children?: React.ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string;
         } | undefined;
@@ -379,12 +382,9 @@ declare namespace CircleOcticon {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-        gridColumnGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridColumnGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        gridGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        gridRowGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridRowGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        sx?: import("@styled-system/css").SystemStyleObject | undefined;
+        sx?: import("./sx").BetterSystemStyleObject | undefined;
         theme?: any;
     };
 }

package/lib-esm/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps } from '../NewButton';
+import { ButtonProps } from '../Button';
 import { SxProp } from '../sx';
 /**
  * Props that characterize a button to be rendered into the footer of
@@ -9,7 +9,7 @@ export declare type DialogButtonProps = ButtonProps & {
     /**
      * The type of Button element to use
      */
-    buttonType?: 'default' | 'primary' | 'danger' | 'invisible';
+    buttonType?: 'normal' | 'primary' | 'danger';
     /**
      * The Button's inner text
      */
@@ -160,8 +160,8 @@ export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
     Buttons: React.FC<{
         buttons: DialogButtonProps[];
     }>;
-    CloseButton: ({ onClose }: {
+    CloseButton: React.FC<{
         onClose: () => void;
-    }) => JSX.Element;
+    }>;
 };
 export {};

package/lib-esm/Dialog/Dialog.js

@@ -2,12 +2,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import Button from '../NewButton';
+import Button, { ButtonPrimary, ButtonDanger } from '../Button';
 import Box from '../Box';
 import { get, COMMON, POSITION } from '../constants';
 import { useOnEscapePress, useProvidedRefOrCreate } from '../hooks';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import sx from '../sx';
+import StyledOcticon from '../StyledOcticon';
 import { XIcon } from '@primer/octicons-react';
 import { useFocusZone } from '../hooks/useFocusZone';
 import { FocusKeys } from '../behaviors/focusZone';
@@ -183,6 +184,11 @@ const Footer = styled(Box).attrs({
   displayName: "Dialog__Footer",
   componentId: "sc-11pkgky-6"
 })(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], get('colors.border.default'), get('space.3'), get('space.1'));
+const buttonTypes = {
+  normal: Button,
+  primary: ButtonPrimary,
+  danger: ButtonDanger
+};
 
 const Buttons = ({
   buttons
@@ -205,30 +211,33 @@ const Buttons = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, buttons.map((dialogButtonProps, index) => {
     const {
       content,
-      buttonType = 'default',
+      buttonType = 'normal',
       autoFocus = false,
       ...buttonProps
     } = dialogButtonProps;
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    const ButtonElement = buttonTypes[buttonType];
+    return /*#__PURE__*/React.createElement(ButtonElement, _extends({
       key: index
     }, buttonProps, {
-      variant: buttonType,
       ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null
     }), content);
   }));
 };
 
+const DialogCloseButton = styled(Button).withConfig({
+  displayName: "Dialog__DialogCloseButton",
+  componentId: "sc-11pkgky-7"
+})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], get('colors.fg.muted'), get('space.2'));
+
 const CloseButton = ({
   onClose
 }) => {
-  return /*#__PURE__*/React.createElement(Button, {
-    onClick: onClose,
-    sx: {
-      alignSelf: 'flex-start'
-    },
-    variant: "invisible",
-    icon: () => /*#__PURE__*/React.createElement(XIcon, null)
-  });
+  return /*#__PURE__*/React.createElement(DialogCloseButton, {
+    "aria-label": "Close",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: XIcon
+  }));
 };
 
 CloseButton.displayName = "CloseButton";