@primer/components 31.2.1-rc.f73a0f8c → 32.0.0-next.0

package/lib/SubNav.d.ts

@@ -1,10 +1,8 @@
 import * as History from 'history';
 import React from 'react';
-import { SystemBorderProps, SystemCommonProps, SystemFlexProps } from './constants';
-import { BoxProps } from './Box';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const SubNavBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+declare const SubNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
 export declare type SubNavProps = {
     actions?: React.ReactNode;
     align?: 'right';
@@ -12,21 +10,17 @@ export declare type SubNavProps = {
     label?: string;
 } & ComponentProps<typeof SubNavBase>;
 declare function SubNav({ actions, className, children, label, ...rest }: SubNavProps): JSX.Element;
-export declare type SubNavLinksProps = BoxProps;
-declare function SubNavLinks(props: SubNavLinksProps): JSX.Element;
-declare namespace SubNavLinks {
-    var displayName: string;
-}
+export declare type SubNavLinksProps = SxProp;
 declare const SubNavLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemBorderProps, never>;
+} & SxProp, never>;
 export declare type SubNavLinkProps = ComponentProps<typeof SubNavLink>;
 declare const _default: typeof SubNav & {
     Link: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp & SystemBorderProps, never>;
-    Links: typeof SubNavLinks;
+    } & SxProp, never>;
+    Links: import("styled-components").StyledComponent<"div", any, SxProp, never>;
 };
 export default _default;

package/lib/SubNav.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _Box = _interopRequireDefault(require("./Box"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,7 +25,7 @@ const SELECTED_CLASS = 'selected';
 const SubNavBase = _styledComponents.default.nav.withConfig({
   displayName: "SubNav__SubNavBase",
   componentId: "f7w0xa-0"
-})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";", ";", ";"], (0, _constants.get)('space.2'), _constants.COMMON, _constants.FLEX, _sx.default);
+})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";"], (0, _constants.get)('space.2'), _sx.default);
 
 function SubNav({
   actions,
@@ -49,21 +47,18 @@ function SubNav({
 
 SubNav.displayName = "SubNav";
 
-function SubNavLinks(props) {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    display: "flex"
-  }, props));
-}
-
-SubNavLinks.displayName = "SubNavLinks";
+const SubNavLinks = _styledComponents.default.div.withConfig({
+  displayName: "SubNav__SubNavLinks",
+  componentId: "f7w0xa-1"
+})(["display:flex;", ";"], _sx.default);
 
 const SubNavLink = _styledComponents.default.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: (0, _classnames.default)(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
 })).withConfig({
   displayName: "SubNav__SubNavLink",
-  componentId: "f7w0xa-1"
-})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), _constants.COMMON, _sx.default);
+  componentId: "f7w0xa-2"
+})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), _sx.default);
 
 SubNavLink.displayName = 'SubNav.Link';
 SubNavLinks.displayName = 'SubNav.Links';

package/lib/SubNav.jsx

@@ -7,7 +7,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("./constants");
-const Box_1 = __importDefault(require("./Box"));
 const sx_1 = __importDefault(require("./sx"));
 const ITEM_CLASS = 'SubNav-item';
 const SELECTED_CLASS = 'selected';
@@ -32,8 +31,6 @@ const SubNavBase = styled_components_1.default.nav `
     align-self: center;
   }
 
-  ${constants_1.COMMON};
-  ${constants_1.FLEX};
   ${sx_1.default};
 `;
 function SubNav({ actions, className, children, label, ...rest }) {
@@ -43,9 +40,10 @@ function SubNav({ actions, className, children, label, ...rest }) {
       {actions && <div className="SubNav-actions">{actions}</div>}
     </SubNavBase>);
 }
-function SubNavLinks(props) {
-    return <Box_1.default display="flex" {...props}/>;
-}
+const SubNavLinks = styled_components_1.default.div `
+  display: flex;
+  ${sx_1.default};
+`;
 const SubNavLink = styled_components_1.default.a.attrs(props => ({
     activeClassName: typeof props.to === 'string' ? 'selected' : '',
     className: classnames_1.default(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
@@ -96,7 +94,6 @@ const SubNavLink = styled_components_1.default.a.attrs(props => ({
     }
   }
 
-  ${constants_1.COMMON};
   ${sx_1.default};
 `;
 SubNavLink.displayName = 'SubNav.Link';

package/lib/TabNav.d.ts

@@ -1,20 +1,19 @@
 /// <reference types="react" />
 import * as History from 'history';
-import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
+declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
 export declare type TabNavProps = ComponentProps<typeof TabNavBase>;
 declare function TabNav({ children, 'aria-label': ariaLabel, ...rest }: TabNavProps): JSX.Element;
 declare const TabNavLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemTypographyProps, never>;
+} & SxProp, never>;
 export declare type TabNavLinkProps = ComponentProps<typeof TabNavLink>;
 declare const _default: typeof TabNav & {
     Link: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp & SystemTypographyProps, never>;
+    } & SxProp, never>;
 };
 export default _default;

package/lib/TabNav.js

@@ -23,7 +23,7 @@ const SELECTED_CLASS = 'selected';
 const TabNavBase = _styledComponents.default.div.withConfig({
   displayName: "TabNav__TabNavBase",
   componentId: "sc-1xod0ow-0"
-})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], (0, _constants.get)('colors.border.default'), _constants.COMMON, _sx.default);
+})(["margin-top:0;border-bottom:1px solid ", ";", ""], (0, _constants.get)('colors.border.default'), _sx.default);
 
 const TabNavBody = _styledComponents.default.nav.withConfig({
   displayName: "TabNav__TabNavBody",
@@ -48,7 +48,7 @@ const TabNavLink = _styledComponents.default.a.attrs(props => ({
 })).withConfig({
   displayName: "TabNav__TabNavLink",
   componentId: "sc-1xod0ow-2"
-})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);
+})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _sx.default);
 
 TabNavLink.displayName = 'TabNav.Link';
 

package/lib/TabNav.jsx

@@ -13,7 +13,6 @@ const SELECTED_CLASS = 'selected';
 const TabNavBase = styled_components_1.default.div `
   margin-top: 0;
   border-bottom: 1px solid ${constants_1.get('colors.border.default')};
-  ${constants_1.COMMON}
   ${sx_1.default}
 `;
 const TabNavBody = styled_components_1.default.nav `
@@ -53,7 +52,6 @@ const TabNavLink = styled_components_1.default.a.attrs(props => ({
     background-color: ${constants_1.get('colors.canvas.default')};
   }
 
-  ${constants_1.COMMON};
   ${sx_1.default};
 `;
 TabNavLink.displayName = 'TabNav.Link';

package/lib/TextInputWithTokens.d.ts

@@ -44,7 +44,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
@@ -62,9 +62,9 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     block?: boolean | undefined;
-    sx?: import("./sx").BetterSystemStyleObject | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
+    sx?: import("./sx").BetterSystemStyleObject | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -319,7 +319,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
     selectedTokenIndex: number | undefined;
     setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;