@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib/Position.js

@@ -3,13 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Absolute = Absolute;
-exports.Fixed = Fixed;
-exports.Relative = Relative;
-exports.Sticky = Sticky;
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.Sticky = exports.Relative = exports.Fixed = exports.Absolute = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,71 +11,77 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-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 _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); }
 
+/**
+ * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
+ */
 const Position = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Position",
   componentId: "fla1y3-0"
-})(["", ";", ";"], _constants.POSITION, _sx.default);
-Position.defaultProps = {
-  theme: _theme.default
-};
-Position.propTypes = { ..._Box.default.propTypes,
-  ..._constants.POSITION.propTypes,
-  theme: _propTypes.default.object,
-  ..._sx.default.propTypes
-};
+})([""]);
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
+ */
 var _default = Position; // Absolute
 
 exports.default = _default;
 
-function Absolute(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
+ */
+const Absolute = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "absolute"
+    position: "absolute",
+    ref: ref
   }));
-}
+});
 
-Absolute.displayName = "Absolute";
-Absolute.defaultProps = Position.defaultProps;
-Absolute.propTypes = Position.propTypes; // Fixed
+exports.Absolute = Absolute;
+Absolute.displayName = 'Absolute'; // Fixed
 
-function Fixed(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
+ */
+const Fixed = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "fixed"
+    position: "fixed",
+    ref: ref
   }));
-}
+});
 
-Fixed.displayName = "Fixed";
-Fixed.defaultProps = Position.defaultProps;
-Fixed.propTypes = Position.propTypes; // Relative
+exports.Fixed = Fixed;
+Fixed.displayName = 'Fixed'; // Relative
 
-function Relative(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
+ */
+const Relative = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "relative"
+    position: "relative",
+    ref: ref
   }));
-}
+});
 
-Relative.displayName = "Relative";
-Relative.defaultProps = Position.defaultProps;
-Relative.propTypes = Position.propTypes; // Sticky
+exports.Relative = Relative;
+Relative.displayName = 'Relative'; // Sticky
 
-function Sticky(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
+ */
+const Sticky = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "sticky"
+    position: "sticky",
+    ref: ref
   }));
-}
+});
 
-Sticky.displayName = "Sticky";
-Sticky.defaultProps = { ...Position.defaultProps,
+exports.Sticky = Sticky;
+Sticky.defaultProps = {
   top: 0,
   zIndex: 1
 };
-Sticky.propTypes = Position.propTypes;
+Sticky.displayName = 'Sticky';

package/lib/ProgressBar.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { WidthProps } from 'styled-system';
+import { SxProp } from './sx';
+declare type ProgressProp = {
+    progress?: string | number;
+};
+declare const sizeMap: {
+    small: string;
+    large: string;
+    default: string;
+};
+declare type StyledProgressContainerProps = {
+    inline?: boolean;
+    barSize?: keyof typeof sizeMap;
+} & WidthProps & SxProp;
+export declare type ProgressBarProps = {
+    bg: string;
+} & StyledProgressContainerProps & ProgressProp;
+declare function ProgressBar({ progress, bg, ...rest }: ProgressBarProps): JSX.Element;
+declare namespace ProgressBar {
+    var defaultProps: {
+        bg: string;
+        barSize: string;
+    };
+}
+export default ProgressBar;

package/lib/ProgressBar.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -19,16 +15,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 }; }
 
-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 Bar = _styledComponents.default.span.withConfig({
   displayName: "ProgressBar__Bar",
   componentId: "sc-1tiva13-0"
-})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0, _constants.COMMON);
+})(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, _sx.default);
 
 const sizeMap = {
   small: '5px',
@@ -39,36 +31,25 @@ const sizeMap = {
 const ProgressContainer = _styledComponents.default.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.gray.2'), (0, _constants.get)('radii.1'), props => sizeMap[props.barSize || 'default'], _constants.COMMON, _styledSystem.width, _sx.default);
+})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.1'), props => sizeMap[props.barSize || 'default'], _styledSystem.width, _sx.default);
 
 function ProgressBar({
   progress,
   bg,
-  theme,
   ...rest
 }) {
-  return /*#__PURE__*/_react.default.createElement(ProgressContainer, _extends({
-    theme: theme
-  }, rest), /*#__PURE__*/_react.default.createElement(Bar, {
+  return /*#__PURE__*/_react.default.createElement(ProgressContainer, rest, /*#__PURE__*/_react.default.createElement(Bar, {
     progress: progress,
-    bg: bg,
-    theme: theme
+    sx: {
+      bg
+    }
   }));
 }
 
 ProgressBar.displayName = "ProgressBar";
 ProgressBar.defaultProps = {
-  bg: 'green.5',
-  barSize: 'default',
-  theme: _theme.default
-};
-ProgressBar.propTypes = { ..._constants.COMMON.propTypes,
-  barSize: _propTypes2.default.oneOf(['small', 'default', 'large']),
-  inline: _propTypes2.default.bool,
-  progress: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  ..._sx.default.propTypes,
-  theme: _propTypes2.default.object,
-  width: _propTypes.default.layout.width
+  bg: 'success.emphasis',
+  barSize: 'default'
 };
 var _default = ProgressBar;
 exports.default = _default;