@primer/components 0.0.0-2021103231153 → 0.0.0-2021103231920

package/lib/Label.d.ts

@@ -1,10 +1,11 @@
 import { BorderColorProps } from 'styled-system';
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Label: import("styled-components").StyledComponent<"span", any, {
     variant?: "small" | "medium" | "large" | "xl" | undefined;
     dropshadow?: boolean | undefined;
     outline?: boolean | undefined;
-} & BorderColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & SxProp, never>;
+} & BorderColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & SystemCommonProps & SxProp, never>;
 export declare type LabelProps = ComponentProps<typeof Label>;
 export default Label;

package/lib/Label.js

@@ -19,7 +19,7 @@ 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 outlineStyles = (0, _styledComponents.css)(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";background-color:transparent;"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.default'), _styledSystem.borderColor);
+const outlineStyles = (0, _styledComponents.css)(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.default'), _styledSystem.borderColor, _constants.COMMON);
 const sizeVariant = (0, _styledSystem.variant)({
   variants: {
     small: {
@@ -49,9 +49,10 @@ const sizeVariant = (0, _styledSystem.variant)({
 const Label = _styledComponents.default.span.withConfig({
   displayName: "Label",
   componentId: "sc-1t3ykp0-0"
-})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";background-color:", ";&:hover{text-decoration:none;}", " ", " ", "  ", ""], (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('radii.3'), (0, _constants.get)('colors.neutral.emphasis'), sizeVariant, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', _sx.default);
+})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('radii.3'), sizeVariant, _constants.COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', _sx.default);
 
 Label.defaultProps = {
+  bg: 'neutral.emphasis',
   variant: 'medium'
 };
 var _default = Label;

package/lib/Link.d.ts

@@ -1,10 +1,9 @@
-import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Link: import("styled-components").StyledComponent<"a", any, {
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemTypographyProps, never>;
+} & SxProp, never>;
 export declare type LinkProps = ComponentProps<typeof Link>;
 export default Link;

package/lib/Link.js

@@ -25,7 +25,7 @@ const hoverColor = (0, _styledSystem.system)({
 const Link = _styledComponents.default.a.withConfig({
   displayName: "Link",
   componentId: "sc-1brdqhf-0"
-})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? (0, _constants.get)('colors.fg.muted')(props) : (0, _constants.get)('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${(0, _constants.get)('colors.accent.fg')(props)}` : '', _constants.TYPOGRAPHY, _constants.COMMON, _sx.default);
+})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";"], props => props.muted ? (0, _constants.get)('colors.fg.muted')(props) : (0, _constants.get)('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${(0, _constants.get)('colors.accent.fg')(props)}` : '', _sx.default);
 
 var _default = Link;
 exports.default = _default;

package/lib/SideNav.d.ts

@@ -18,7 +18,7 @@ declare const SideNavLink: import("styled-components").StyledComponent<"a", any,
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
+} & import("./sx").SxProp & StyledSideNavLinkProps, never>;
 export declare type SideNavProps = ComponentProps<typeof SideNav>;
 export declare type SideNavLinkProps = ComponentProps<typeof SideNavLink>;
 declare const _default: string & import("styled-components").StyledComponentBase<typeof SideNavBase, any, {}, never> & import("hoist-non-react-statics").NonReactStatics<typeof SideNavBase, {}> & {
@@ -26,6 +26,6 @@ declare const _default: string & import("styled-components").StyledComponentBase
         hoverColor?: string | undefined;
         muted?: boolean | undefined;
         underline?: boolean | undefined;
-    } & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
+    } & import("./sx").SxProp & StyledSideNavLinkProps, never>;
 };
 export default _default;

package/lib-esm/Label.d.ts

@@ -1,10 +1,11 @@
 import { BorderColorProps } from 'styled-system';
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Label: import("styled-components").StyledComponent<"span", any, {
     variant?: "small" | "medium" | "large" | "xl" | undefined;
     dropshadow?: boolean | undefined;
     outline?: boolean | undefined;
-} & BorderColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & SxProp, never>;
+} & BorderColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & SystemCommonProps & SxProp, never>;
 export declare type LabelProps = ComponentProps<typeof Label>;
 export default Label;

package/lib-esm/Label.js

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 import { borderColor, variant } from 'styled-system';
-import { get } from './constants';
+import { COMMON, get } from './constants';
 import sx from './sx';
-const outlineStyles = css(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";background-color:transparent;"], get('colors.fg.muted'), get('borderWidths.1'), get('colors.border.default'), borderColor);
+const outlineStyles = css(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], get('colors.fg.muted'), get('borderWidths.1'), get('colors.border.default'), borderColor, COMMON);
 const sizeVariant = variant({
   variants: {
     small: {
@@ -31,8 +31,9 @@ const sizeVariant = variant({
 const Label = styled.span.withConfig({
   displayName: "Label",
   componentId: "sc-1t3ykp0-0"
-})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";background-color:", ";&:hover{text-decoration:none;}", " ", " ", "  ", ""], get('fontWeights.semibold'), get('colors.fg.onEmphasis'), get('radii.3'), get('colors.neutral.emphasis'), sizeVariant, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', sx);
+})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], get('fontWeights.semibold'), get('colors.fg.onEmphasis'), get('radii.3'), sizeVariant, COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', sx);
 Label.defaultProps = {
+  bg: 'neutral.emphasis',
   variant: 'medium'
 };
 export default Label;

package/lib-esm/Link.d.ts

@@ -1,10 +1,9 @@
-import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Link: import("styled-components").StyledComponent<"a", any, {
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemTypographyProps, never>;
+} & SxProp, never>;
 export declare type LinkProps = ComponentProps<typeof Link>;
 export default Link;

package/lib-esm/Link.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { system } from 'styled-system';
-import { COMMON, get, TYPOGRAPHY } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const hoverColor = system({
   hoverColor: {
@@ -11,5 +11,5 @@ const hoverColor = system({
 const Link = styled.a.withConfig({
   displayName: "Link",
   componentId: "sc-1brdqhf-0"
-})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', TYPOGRAPHY, COMMON, sx);
+})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', sx);
 export default Link;

package/lib-esm/SideNav.d.ts

@@ -18,7 +18,7 @@ declare const SideNavLink: import("styled-components").StyledComponent<"a", any,
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
+} & import("./sx").SxProp & StyledSideNavLinkProps, never>;
 export declare type SideNavProps = ComponentProps<typeof SideNav>;
 export declare type SideNavLinkProps = ComponentProps<typeof SideNavLink>;
 declare const _default: string & import("styled-components").StyledComponentBase<typeof SideNavBase, any, {}, never> & import("hoist-non-react-statics").NonReactStatics<typeof SideNavBase, {}> & {
@@ -26,6 +26,6 @@ declare const _default: string & import("styled-components").StyledComponentBase
         hoverColor?: string | undefined;
         muted?: boolean | undefined;
         underline?: boolean | undefined;
-    } & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
+    } & import("./sx").SxProp & StyledSideNavLinkProps, never>;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021103231153",
+  "version": "0.0.0-2021103231920",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",