@primer/components 0.0.0-202182493810 → 0.0.0-202182720420

package/lib/AvatarStack.d.ts

@@ -1,12 +1,8 @@
-/// <reference types="react" />
-import { SystemCommonProps } from './constants';
+import React from 'react';
 import { SxProp } from './sx';
-import { ComponentProps } from './utils/types';
-declare const AvatarStackWrapper: import("styled-components").StyledComponent<"span", any, {
-    count?: number | undefined;
-} & SystemCommonProps & SxProp, never>;
 export declare type AvatarStackProps = {
     alignRight?: boolean;
-} & ComponentProps<typeof AvatarStackWrapper>;
-declare const AvatarStack: ({ children, alignRight, ...rest }: AvatarStackProps) => JSX.Element;
+    children: React.ReactNode;
+} & SxProp;
+declare const AvatarStack: ({ children, alignRight, sx: sxProp }: AvatarStackProps) => JSX.Element;
 export default AvatarStack;

package/lib/AvatarStack.js

@@ -19,12 +19,10 @@ var _sx = _interopRequireDefault(require("./sx"));
 
 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 AvatarStackWrapper = _styledComponents.default.span.withConfig({
   displayName: "AvatarStack__AvatarStackWrapper",
   componentId: "sc-1qgzd2v-0"
-})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', (0, _constants.get)('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);
+})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', (0, _constants.get)('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.canvas.default'), _sx.default);
 
 const transformChildren = children => {
   return _react.default.Children.map(children, (child, index) => {
@@ -42,7 +40,7 @@ const transformChildren = children => {
 const AvatarStack = ({
   children,
   alignRight,
-  ...rest
+  sx: sxProp
 }) => {
   const count = _react.default.Children.count(children);
 
@@ -51,10 +49,11 @@ const AvatarStack = ({
     'pc-AvatarStack--three-plus': count > 2,
     'pc-AvatarStack--right': alignRight
   });
-  return /*#__PURE__*/_react.default.createElement(AvatarStackWrapper, _extends({
+  return /*#__PURE__*/_react.default.createElement(AvatarStackWrapper, {
     count: count,
-    className: wrapperClassNames
-  }, rest), /*#__PURE__*/_react.default.createElement(_.Box, {
+    className: wrapperClassNames,
+    sx: sxProp
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
     position: "absolute",
     display: "flex",
     width: "38px",

package/lib-esm/AvatarStack.d.ts

@@ -1,12 +1,8 @@
-/// <reference types="react" />
-import { SystemCommonProps } from './constants';
+import React from 'react';
 import { SxProp } from './sx';
-import { ComponentProps } from './utils/types';
-declare const AvatarStackWrapper: import("styled-components").StyledComponent<"span", any, {
-    count?: number | undefined;
-} & SystemCommonProps & SxProp, never>;
 export declare type AvatarStackProps = {
     alignRight?: boolean;
-} & ComponentProps<typeof AvatarStackWrapper>;
-declare const AvatarStack: ({ children, alignRight, ...rest }: AvatarStackProps) => JSX.Element;
+    children: React.ReactNode;
+} & SxProp;
+declare const AvatarStack: ({ children, alignRight, sx: sxProp }: AvatarStackProps) => JSX.Element;
 export default AvatarStack;

package/lib-esm/AvatarStack.js

@@ -1,15 +1,13 @@
-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); }
-
 import classnames from 'classnames';
 import React from 'react';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import { Box } from '.';
 import sx from './sx';
 const AvatarStackWrapper = styled.span.withConfig({
   displayName: "AvatarStack__AvatarStackWrapper",
   componentId: "sc-1qgzd2v-0"
-})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.canvas.default'), COMMON, sx);
+})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.canvas.default'), sx);
 
 const transformChildren = children => {
   return React.Children.map(children, (child, index) => {
@@ -27,7 +25,7 @@ const transformChildren = children => {
 const AvatarStack = ({
   children,
   alignRight,
-  ...rest
+  sx: sxProp
 }) => {
   const count = React.Children.count(children);
   const wrapperClassNames = classnames({
@@ -35,10 +33,11 @@ const AvatarStack = ({
     'pc-AvatarStack--three-plus': count > 2,
     'pc-AvatarStack--right': alignRight
   });
-  return /*#__PURE__*/React.createElement(AvatarStackWrapper, _extends({
+  return /*#__PURE__*/React.createElement(AvatarStackWrapper, {
     count: count,
-    className: wrapperClassNames
-  }, rest), /*#__PURE__*/React.createElement(Box, {
+    className: wrapperClassNames,
+    sx: sxProp
+  }, /*#__PURE__*/React.createElement(Box, {
     position: "absolute",
     display: "flex",
     width: "38px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202182493810",
+  "version": "0.0.0-202182720420",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -86,10 +86,10 @@
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "26.0.23",
-    "@types/jest-axe": "3.5.1",
+    "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
-    "@typescript-eslint/eslint-plugin": "4.26.1",
+    "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
     "babel-core": "7.0.0-bridge.0",