@primer/components 0.0.0-2021927184113 → 0.0.0-2021927184638

package/lib/TextInputWithTokens.js

@@ -188,15 +188,7 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
-    ref: containerRef,
-    sx: {
-      alignItems: 'center',
-      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-      gap: '0.25rem',
-      '> *': {
-        flexShrink: 0
-      },
-      ...(block ? {
+    sx: { ...(block ? {
         display: 'flex',
         width: '100%'
       } : {}),
@@ -209,6 +201,21 @@ function TextInputWithTokensInnerComponent({
       } : {}),
       ...sxProp
     }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    ref: containerRef,
+    display: "flex",
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      marginLeft: '-0.25rem',
+      marginBottom: '-0.25rem',
+      flexGrow: 1,
+      '> *': {
+        flexShrink: 0,
+        marginLeft: '0.25rem',
+        marginBottom: '0.25rem'
+      }
+    }
   }, /*#__PURE__*/_react.default.createElement(_Box.default, {
     sx: {
       order: 1,
@@ -240,7 +247,7 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null);
+  }, tokenRest))) : null));
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib/Token/Token.js

@@ -39,7 +39,16 @@ const DefaultTokenStyled = (0, _styledComponents.default)(_TokenBase.default).wi
 const LeadingVisualContainer = (0, _styledComponents.default)('span').withConfig({
   displayName: "Token__LeadingVisualContainer",
   componentId: "sc-1dg52pw-1"
-})(["flex-shrink:0;line-height:0;"]);
+})(["flex-shrink:0;line-height:0;", ""], props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return (0, _styledComponents.css)(["margin-right:", ";"], (0, _constants.get)('space.2'));
+
+    default:
+      return (0, _styledComponents.css)(["margin-right:", ";"], (0, _constants.get)('space.1'));
+  }
+});
 const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
   const {
     as,
@@ -74,7 +83,9 @@ const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
     isTokenInteractive: (0, _TokenBase.isTokenInteractive)(props)
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
-  }), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, null, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
+  }), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
+    size: size
+  }, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
     borderOffset: tokenBorderWidthPx,
     onClick: onRemoveClick,
     size: size,

package/lib/Token/TokenBase.js

@@ -38,7 +38,6 @@ const variants = (0, _styledSystem.variant)({
   variants: {
     small: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -51,7 +50,6 @@ const variants = (0, _styledSystem.variant)({
     },
     medium: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -61,7 +59,6 @@ const variants = (0, _styledSystem.variant)({
     },
     large: {
       fontSize: 0,
-      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -71,7 +68,6 @@ const variants = (0, _styledSystem.variant)({
     },
     extralarge: {
       fontSize: 1,
-      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/lib/Token/_RemoveTokenButton.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _octiconsReact = require("@primer/octicons-react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
@@ -19,6 +19,10 @@ var _sx = _interopRequireDefault(require("../sx"));
 
 var _TokenBase = require("./TokenBase");
 
+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, 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 }; }
 
 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); }
@@ -50,7 +54,16 @@ const getTokenButtonIconSize = size => parseInt(_TokenBase.tokenSizes[size || _T
 const StyledTokenButton = _styledComponents.default.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return (0, _styledComponents.css)(["margin-left:", ";"], (0, _constants.get)('space.2'));
+
+    default:
+      return (0, _styledComponents.css)(["margin-left:", ";"], (0, _constants.get)('space.1'));
+  }
+}, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib-esm/TextInputWithTokens.js

@@ -165,15 +165,7 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
-    ref: containerRef,
-    sx: {
-      alignItems: 'center',
-      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-      gap: '0.25rem',
-      '> *': {
-        flexShrink: 0
-      },
-      ...(block ? {
+    sx: { ...(block ? {
         display: 'flex',
         width: '100%'
       } : {}),
@@ -186,6 +178,21 @@ function TextInputWithTokensInnerComponent({
       } : {}),
       ...sxProp
     }
+  }, /*#__PURE__*/React.createElement(Box, {
+    ref: containerRef,
+    display: "flex",
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      marginLeft: '-0.25rem',
+      marginBottom: '-0.25rem',
+      flexGrow: 1,
+      '> *': {
+        flexShrink: 0,
+        marginLeft: '0.25rem',
+        marginBottom: '0.25rem'
+      }
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       order: 1,
@@ -217,7 +224,7 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null);
+  }, tokenRest))) : null));
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib-esm/Token/Token.js

@@ -19,7 +19,16 @@ const DefaultTokenStyled = styled(TokenBase).withConfig({
 const LeadingVisualContainer = styled('span').withConfig({
   displayName: "Token__LeadingVisualContainer",
   componentId: "sc-1dg52pw-1"
-})(["flex-shrink:0;line-height:0;"]);
+})(["flex-shrink:0;line-height:0;", ""], props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-right:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-right:", ";"], get('space.1'));
+  }
+});
 const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     as,
@@ -54,7 +63,9 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isTokenInteractive: isTokenInteractive(props)
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
-  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
+  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, {
+    size: size
+  }, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
     borderOffset: tokenBorderWidthPx,
     onClick: onRemoveClick,
     size: size,

package/lib-esm/Token/TokenBase.js

@@ -20,7 +20,6 @@ const variants = variant({
   variants: {
     small: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -33,7 +32,6 @@ const variants = variant({
     },
     medium: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -43,7 +41,6 @@ const variants = variant({
     },
     large: {
       fontSize: 0,
-      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -53,7 +50,6 @@ const variants = variant({
     },
     extralarge: {
       fontSize: 1,
-      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/lib-esm/Token/_RemoveTokenButton.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { XIcon } from '@primer/octicons-react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { variant } from 'styled-system';
 import { get } from '../constants';
 import sx from '../sx';
@@ -34,7 +34,16 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
 const StyledTokenButton = styled.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-left:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-left:", ";"], get('space.1'));
+  }
+}, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/package.json

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