@primer/components 0.0.0-202111221819 → 0.0.0-202111231117

package/lib/FilteredSearch.js

@@ -7,24 +7,16 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _constants = require("./constants");
 
+var _sx = _interopRequireDefault(require("./sx"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const FilteredSearch = _styledComponents.default.div.withConfig({
   displayName: "FilteredSearch",
-  componentId: "sc-7vue7r-0"
-})(["", ";display:flex;align-items:stretch;summary{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";z-index:1;}"], _constants.COMMON, (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'));
+  componentId: "sc-15qfedq-0"
+})(["display:flex;align-items:stretch;summary{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";z-index:1;}", ""], (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), _sx.default);
 
-FilteredSearch.defaultProps = {
-  theme: _theme.default
-};
-FilteredSearch.propTypes = { ..._constants.COMMON.propTypes,
-  theme: _propTypes.default.object
-};
 var _default = FilteredSearch;
 exports.default = _default;

package/lib/Flash.d.ts

@@ -0,0 +1,8 @@
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const Flash: import("styled-components").StyledComponent<"div", any, {
+    variant?: "success" | "danger" | "default" | "warning" | undefined;
+    full?: boolean | undefined;
+} & SxProp, never>;
+export declare type FlashProps = ComponentProps<typeof Flash>;
+export default Flash;

package/lib/Flash.js

@@ -5,49 +5,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
 var _constants = require("./constants");
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const schemeMap = {
-  red: 'danger',
-  blue: 'default',
-  yellow: 'warning',
-  green: 'success'
-};
 const variants = (0, _styledSystem.variant)({
-  scale: 'flash'
+  variants: {
+    default: {
+      color: 'fg.default',
+      backgroundColor: 'accent.subtle',
+      borderColor: 'accent.muted',
+      svg: {
+        color: 'accent.fg'
+      }
+    },
+    success: {
+      color: 'fg.default',
+      backgroundColor: 'success.subtle',
+      borderColor: 'success.muted',
+      svg: {
+        color: 'success.fg'
+      }
+    },
+    danger: {
+      color: 'fg.default',
+      backgroundColor: 'danger.subtle',
+      borderColor: 'danger.muted',
+      svg: {
+        color: 'danger.fg'
+      }
+    },
+    warning: {
+      color: 'fg.default',
+      backgroundColor: 'attention.subtle',
+      borderColor: 'attention.muted',
+      svg: {
+        color: 'attention.fg'
+      }
+    }
+  }
 });
 
-const getIconColor = (variant, theme) => (0, _constants.get)(`flashIcon.${variant}`)(theme);
-
 const Flash = _styledComponents.default.div.withConfig({
   displayName: "Flash",
-  componentId: "y43qx-0"
-})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{color:", ";margin-right:", ";}", ";", " ", ";"], (0, _constants.get)('colors.text.grayDark'), (0, _constants.get)('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : (0, _constants.get)('radii.2'), props => props.full ? '-1px' : '0', props => getIconColor(props.variant, props.theme), (0, _constants.get)('space.2'), _constants.COMMON, variants, _sx.default);
+  componentId: "sc-4y90bn-0"
+})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : (0, _constants.get)('radii.2'), props => props.full ? '-1px' : '0', (0, _constants.get)('space.2'), variants, _sx.default);
 
 Flash.defaultProps = {
-  theme: _theme.default,
   variant: 'default'
 };
-Flash.propTypes = {
-  children: _propTypes.default.node,
-  full: _propTypes.default.bool,
-  scheme: _propTypes.default.oneOf(Object.keys(schemeMap)),
-  // deprecate 20.0.0
-  variant: _propTypes.default.oneOf(['default', 'warning', 'success', 'danger']),
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = Flash;
 exports.default = _default;

package/lib/Flex.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from './Box';
+export declare type FlexProps = BoxProps;
+/**
+ * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
+ */
+declare const Flex: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp, never>;
+export default Flex;

package/lib/Flex.js

@@ -9,19 +9,17 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/**
+ * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
+ */
 const Flex = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Flex",
   componentId: "arghxi-0"
 })([""]);
 Flex.defaultProps = {
-  theme: _theme.default,
   display: 'flex'
 };
-Flex.propTypes = { ..._Box.default.propTypes
-};
 var _default = Flex;
 exports.default = _default;

package/lib/FormGroup.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="hoist-non-react-statics" />
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const FormGroup: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+declare const FormGroupLabel: import("styled-components").StyledComponent<"label", any, SxProp, never>;
+export declare type FormGroupProps = ComponentProps<typeof FormGroup>;
+export declare type FormGroupLabelProps = ComponentProps<typeof FormGroupLabel>;
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Label: import("styled-components").StyledComponent<"label", any, SxProp, never>;
+};
+export default _default;

package/lib/FormGroup.js

@@ -5,14 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,33 +16,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const FormGroup = _styledComponents.default.div.withConfig({
   displayName: "FormGroup",
   componentId: "sc-14z6yax-0"
-})(["margin:", " 0;font-weight:", ";", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.normal'), _constants.COMMON, _sx.default);
-
-FormGroup.defaultProps = {
-  theme: _theme.default
-};
-FormGroup.propTypes = {
-  children: _propTypes.default.node,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-
-const Label = _styledComponents.default.label.withConfig({
-  displayName: "FormGroup__Label",
+})(["margin:", " 0;font-weight:", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.normal'), _sx.default);
+
+const FormGroupLabel = _styledComponents.default.label.withConfig({
+  displayName: "FormGroup__FormGroupLabel",
   componentId: "sc-14z6yax-1"
-})(["display:block;margin:0 0 ", ";font-size:", ";font-weight:", ";", ";", ";", ";"], (0, _constants.get)('space.2'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), _constants.TYPOGRAPHY, _constants.COMMON, _sx.default);
+})(["display:block;margin:0 0 ", ";font-size:", ";font-weight:", ";", ";"], (0, _constants.get)('space.2'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), _sx.default);
 
-Label.displayName = 'FormGroup.Label';
-Label.defaultProps = {
-  theme: _theme.default
-};
-Label.propTypes = { ..._constants.TYPOGRAPHY.propTypes,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
+FormGroupLabel.displayName = 'FormGroup.Label';
 
 var _default = Object.assign(FormGroup, {
-  Label
+  Label: FormGroupLabel
 });
 
 exports.default = _default;

package/lib/Grid.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from './Box';
+export declare type GridProps = BoxProps;
+/**
+ * @deprecated Use the Box component instead (i.e. <Grid> → <Box display="grid">)
+ */
+declare const Grid: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp, never>;
+export default Grid;

package/lib/Grid.js

@@ -9,22 +9,17 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _constants = require("./constants");
-
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/**
+ * @deprecated Use the Box component instead (i.e. <Grid> → <Box display="grid">)
+ */
 const Grid = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Grid",
   componentId: "sc-1i6s5ye-0"
-})(["", ";"], _constants.GRID);
+})([""]);
 Grid.defaultProps = {
-  theme: _theme.default,
   display: 'grid'
 };
-Grid.propTypes = { ..._Box.default.propTypes,
-  ..._constants.GRID.propTypes
-};
 var _default = Grid;
 exports.default = _default;

package/lib/Header.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="hoist-non-react-statics" />
+import * as History from 'history';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const Header: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+declare const HeaderItem: import("styled-components").StyledComponent<"div", any, {
+    full?: boolean | undefined;
+} & SxProp, never>;
+declare const HeaderLink: import("styled-components").StyledComponent<"a", any, {
+    to?: History.LocationDescriptor<unknown> | undefined;
+} & SxProp, never>;
+export declare type HeaderProps = ComponentProps<typeof Header>;
+export declare type HeaderLinkProps = ComponentProps<typeof HeaderLink>;
+export declare type HeaderItemProps = ComponentProps<typeof HeaderItem>;
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Link: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+    } & SxProp, never>;
+    Item: import("styled-components").StyledComponent<"div", any, {
+        full?: boolean | undefined;
+    } & SxProp, never>;
+};
+export default _default;

package/lib/Header.js

@@ -7,32 +7,35 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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; }
 
+// eslint-disable-next-line import/no-namespace
 const Header = _styledComponents.default.div.withConfig({
   displayName: "Header",
-  componentId: "o06c91-0"
-})(["z-index:32;display:flex;padding:", ";font-size:", ";line-height:", ";color:", ";background-color:", ";align-items:center;flex-wrap:nowrap;", " ", " ", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.whitefade70'), (0, _constants.get)('colors.bg.grayDark'), _constants.COMMON, _constants.BORDER, _sx.default);
+  componentId: "sc-217i47-0"
+})(["z-index:32;display:flex;padding:", ";font-size:", ";line-height:", ";color:", ";background-color:", ";align-items:center;flex-wrap:nowrap;", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.header.text'), (0, _constants.get)('colors.header.bg'), _sx.default);
+
+const HeaderItem = _styledComponents.default.div.withConfig({
+  displayName: "Header__HeaderItem",
+  componentId: "sc-217i47-1"
+})(["display:flex;margin-right:", ";align-self:stretch;align-items:center;flex-wrap:nowrap;", ";", ";"], (0, _constants.get)('space.3'), ({
+  full
+}) => full && (0, _styledComponents.css)(["flex:auto;"]), _sx.default);
+
+HeaderItem.displayName = 'Header.Item';
 
-Header.Item = _styledComponents.default.div.withConfig({
-  displayName: "Header__Item",
-  componentId: "o06c91-1"
-})(["display:flex;margin-right:", ";align-self:stretch;align-items:center;flex-wrap:nowrap;", ";", ";", ";", ";"], (0, _constants.get)('space.3'), props => props.full && (0, _styledComponents.css)(["flex:auto;"]), _constants.COMMON, _constants.BORDER, _sx.default);
-Header.Item.displayName = 'Header.Item';
-Header.Link = _styledComponents.default.a.attrs(props => {
-  const isReactRouter = typeof props.to === 'string';
+const HeaderLink = _styledComponents.default.a.attrs(({
+  to
+}) => {
+  const isReactRouter = typeof to === 'string';
 
   if (isReactRouter) {
     // according to their docs, NavLink supports aria-current:
@@ -44,37 +47,15 @@ Header.Link = _styledComponents.default.a.attrs(props => {
     return {};
   }
 }).withConfig({
-  displayName: "Header__Link",
-  componentId: "o06c91-2"
-})(["font-weight:", ";color:", ";white-space:nowrap;cursor:pointer;text-decoration:none;display:flex;align-items:center;&:hover,&:focus{color:", ";}", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.text.white'), (0, _constants.get)('colors.whitefade70'), _constants.COMMON, _constants.BORDER, _constants.TYPOGRAPHY, _sx.default);
-Header.Link.displayName = 'Header.Link';
-Header.propTypes = { ..._sx.default.propTypes,
-  ..._constants.COMMON.propTypes,
-  ..._constants.BORDER.propTypes
-};
-Header.defaultProps = {
-  theme: _theme.default
-};
-Header.Item.defaultProps = {
-  theme: _theme.default
-};
-Header.Item.propTypes = {
-  full: _propTypes.default.bool,
-  ..._constants.COMMON.propTypes,
-  ..._constants.BORDER.propTypes,
-  ..._sx.default.propTypes
-};
-Header.Link.defaultProps = {
-  theme: _theme.default
-};
-Header.Link.propTypes = {
-  as: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.elementType]),
-  href: _propTypes.default.string,
-  theme: _propTypes.default.object,
-  ..._constants.COMMON.propTypes,
-  ..._constants.BORDER.propTypes,
-  ..._constants.TYPOGRAPHY.propTypes,
-  ..._sx.default.propTypes
-};
-var _default = Header;
+  displayName: "Header__HeaderLink",
+  componentId: "sc-217i47-2"
+})(["font-weight:", ";color:", ";white-space:nowrap;cursor:pointer;text-decoration:none;display:flex;align-items:center;&:hover,&:focus{color:", ";}", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.header.logo'), (0, _constants.get)('colors.header.text'), _sx.default);
+
+HeaderLink.displayName = 'Header.Link';
+
+var _default = Object.assign(Header, {
+  Link: HeaderLink,
+  Item: HeaderItem
+});
+
 exports.default = _default;

package/lib/Heading.d.ts

@@ -0,0 +1,6 @@
+import { SystemCommonProps, SystemTypographyProps } from './constants';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const Heading: import("styled-components").StyledComponent<"h2", any, SystemTypographyProps & SystemCommonProps & SxProp, never>;
+export declare type HeadingProps = ComponentProps<typeof Heading>;
+export default Heading;

package/lib/Heading.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
@@ -25,10 +23,5 @@ const Heading = _styledComponents.default.h2.withConfig({
 Heading.defaultProps = {
   theme: _theme.default
 };
-Heading.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes,
-  theme: _propTypes.default.object,
-  ..._constants.TYPOGRAPHY.propTypes
-};
 var _default = Heading;
 exports.default = _default;

package/lib/Label.d.ts

@@ -0,0 +1,10 @@
+import { BorderColorProps } from 'styled-system';
+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>;
+export declare type LabelProps = ComponentProps<typeof Label>;
+export default Label;

package/lib/Label.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
@@ -15,15 +13,13 @@ var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const outlineStyles = (0, _styledComponents.css)(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], (0, _constants.get)('colors.gray.6'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.blackfade15'), _styledSystem.borderColor, _constants.COMMON);
+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 sizeVariant = (0, _styledSystem.variant)({
   variants: {
     small: {
@@ -53,20 +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:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('colors.white'), (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);
+})(["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);
 
 Label.defaultProps = {
-  theme: _theme.default,
-  bg: 'gray.5',
   variant: 'medium'
 };
-Label.propTypes = {
-  dropshadow: _propTypes.default.bool,
-  outline: _propTypes.default.bool,
-  theme: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['small', 'medium', 'large', 'xl']),
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = Label;
 exports.default = _default;

package/lib/LabelGroup.d.ts

@@ -0,0 +1,5 @@
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const LabelGroup: import("styled-components").StyledComponent<"span", any, SxProp, never>;
+export declare type LabelGroupProps = ComponentProps<typeof LabelGroup>;
+export default LabelGroup;

package/lib/LabelGroup.js

@@ -11,20 +11,12 @@ var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const LabelGroup = _styledComponents.default.span.withConfig({
   displayName: "LabelGroup",
   componentId: "k6k3qa-0"
-})(["", " & *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], _constants.COMMON, (0, _constants.get)('space.1'), _sx.default);
+})(["& *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], (0, _constants.get)('space.1'), _sx.default);
 
-LabelGroup.defaultProps = {
-  theme: _theme.default
-};
-LabelGroup.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = LabelGroup;
 exports.default = _default;

package/lib/Link.d.ts

@@ -0,0 +1,9 @@
+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;
+} & SxProp, never>;
+export declare type LinkProps = ComponentProps<typeof Link>;
+export default Link;

package/lib/Link.js

@@ -5,31 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
 var _constants = require("./constants");
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const buttonStyles = {
-  display: 'inline-block',
-  padding: '0',
-  fontSize: 'inherit',
-  whiteSpace: 'nowrap',
-  cursor: 'pointer',
-  userSelect: 'none',
-  backgroundColor: 'transparent',
-  border: '0',
-  appearance: 'none'
-};
 const hoverColor = (0, _styledSystem.system)({
   hoverColor: {
     property: 'color',
@@ -37,26 +22,10 @@ const hoverColor = (0, _styledSystem.system)({
   }
 });
 
-const Link = _styledComponents.default.a.attrs(props => ({
-  color: props.color ? props.color : props.muted ? 'gray.6' : 'blue.5'
-})).withConfig({
+const Link = _styledComponents.default.a.withConfig({
   displayName: "Link",
-  componentId: "kudw2l-0"
-})(["text-decoration:", ";&:hover{text-decoration:", ";", ";}", ";", " ", ";", ";"], props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${(0, _constants.get)('colors.blue.5')(_theme.default)}` : '', props => props.as === 'button' ? buttonStyles : '', _constants.TYPOGRAPHY, _constants.COMMON, _sx.default);
-
-Link.defaultProps = {
-  theme: _theme.default
-};
-Link.propTypes = {
-  as: _propTypes.default.elementType,
-  hoverColor: _propTypes.default.string,
-  href: _propTypes.default.string,
-  muted: _propTypes.default.bool,
-  theme: _propTypes.default.object,
-  underline: _propTypes.default.bool,
-  ..._constants.TYPOGRAPHY.propTypes,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
+  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)}` : '', _sx.default);
+
 var _default = Link;
 exports.default = _default;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+export declare type CounterProps = {
+    children: number;
+} & SxProp;
+export declare const Counter: ({ children, sx: sxProp, ...props }: CounterProps) => JSX.Element;

package/lib/NewButton/button-counter.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Counter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CounterLabel = _interopRequireDefault(require("../CounterLabel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 Counter = ({
+  children,
+  sx: sxProp = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_CounterLabel.default, _extends({
+    "data-component": "ButtonCounter",
+    sx: {
+      ml: 2,
+      ...sxProp
+    }
+  }, props), children);
+};
+
+exports.Counter = Counter;
+Counter.displayName = "Counter";