@primer/react 38.0.0-rc.1 → 38.0.0-rc.2

package/lib/StateLabel/StateLabel.js

@@ -2,17 +2,12 @@
 
 var reactCompilerRuntime = require('react-compiler-runtime');
 var octiconsReact = require('@primer/octicons-react');
-var styled = require('styled-components');
-var styledSystem = require('styled-system');
-var constants = require('../constants.js');
+var React = require('react');
+var clsx = require('clsx');
 var StateLabel_module = require('./StateLabel.module.css.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Octicon = require('../Octicon/Octicon.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
 const octiconMap = {
   issueOpened: octiconsReact.IssueOpenedIcon,
   pullOpened: octiconsReact.GitPullRequestIcon,
@@ -41,93 +36,10 @@ const labelMap = {
   open: '',
   closed: ''
 };
-const colorVariants = styledSystem.variant({
-  prop: 'status',
-  variants: {
-    issueClosed: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
-    },
-    issueClosedNotPlanned: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
-    },
-    pullClosed: {
-      backgroundColor: 'closed.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent)'
-    },
-    pullMerged: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
-    },
-    pullQueued: {
-      backgroundColor: 'attention.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent)'
-    },
-    issueOpened: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
-    },
-    pullOpened: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
-    },
-    draft: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
-    },
-    issueDraft: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
-    },
-    unavailable: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)'
-    },
-    open: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)'
-    },
-    closed: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)'
-    }
-  }
-});
-const sizeVariants = styledSystem.variant({
-  prop: 'variant',
-  variants: {
-    small: {
-      paddingX: 2,
-      paddingY: 1,
-      fontSize: 0
-    },
-    normal: {
-      paddingX: '12px',
-      paddingY: 2,
-      fontSize: 1
-    }
-  }
-});
-const StateLabelBase = styled__default.default.span.withConfig({
-  displayName: "StateLabel__StateLabelBase",
-  componentId: "sc-qthdln-0"
-})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";"], constants.get('fontWeights.bold'), constants.get('colors.canvas.default'), constants.get('radii.3'), colorVariants, sizeVariants);
-function StateLabel(t0) {
-  const $ = reactCompilerRuntime.c(17);
+const StateLabel = /*#__PURE__*/React.forwardRef((t0, ref) => {
+  const $ = reactCompilerRuntime.c(22);
   let children;
+  let className;
   let rest;
   let status;
   let t1;
@@ -136,65 +48,81 @@ function StateLabel(t0) {
       children,
       status,
       variant: t1,
+      className,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
-    $[2] = rest;
-    $[3] = status;
-    $[4] = t1;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = status;
+    $[5] = t1;
   } else {
     children = $[1];
-    rest = $[2];
-    status = $[3];
-    t1 = $[4];
+    className = $[2];
+    rest = $[3];
+    status = $[4];
+    t1 = $[5];
   }
   const variantProp = t1 === undefined ? "normal" : t1;
   let t2;
-  if ($[5] !== variantProp) {
+  if ($[6] !== variantProp) {
     t2 = variantProp === "small" ? {
       width: "1em"
     } : {};
-    $[5] = variantProp;
-    $[6] = t2;
+    $[6] = variantProp;
+    $[7] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[7];
   }
   const octiconProps = t2;
   const noIconStatus = status === "open" || status === "closed";
   let t3;
-  if ($[7] !== noIconStatus || $[8] !== octiconProps || $[9] !== status) {
-    t3 = status && !noIconStatus && /*#__PURE__*/jsxRuntime.jsx(Octicon, {
+  if ($[8] !== className) {
+    t3 = clsx.clsx(StateLabel_module.StateLabel, className);
+    $[8] = className;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== noIconStatus || $[11] !== octiconProps || $[12] !== status) {
+    t4 = !noIconStatus && /*#__PURE__*/jsxRuntime.jsx(Octicon, {
       ...octiconProps,
-      icon: octiconMap[status] || octiconsReact.QuestionIcon,
+      icon: octiconMap[status],
       "aria-label": labelMap[status],
       className: StateLabel_module.Icon
     });
-    $[7] = noIconStatus;
-    $[8] = octiconProps;
-    $[9] = status;
-    $[10] = t3;
+    $[10] = noIconStatus;
+    $[11] = octiconProps;
+    $[12] = status;
+    $[13] = t4;
   } else {
-    t3 = $[10];
+    t4 = $[13];
   }
-  let t4;
-  if ($[11] !== children || $[12] !== rest || $[13] !== status || $[14] !== t3 || $[15] !== variantProp) {
-    t4 = /*#__PURE__*/jsxRuntime.jsxs(StateLabelBase, {
+  let t5;
+  if ($[14] !== children || $[15] !== ref || $[16] !== rest || $[17] !== status || $[18] !== t3 || $[19] !== t4 || $[20] !== variantProp) {
+    t5 = /*#__PURE__*/jsxRuntime.jsxs("span", {
       ...rest,
-      variant: variantProp,
-      status: status,
-      children: [t3, children]
+      ref: ref,
+      className: t3,
+      "data-variant": variantProp,
+      "data-status": status,
+      children: [t4, children]
     });
-    $[11] = children;
-    $[12] = rest;
-    $[13] = status;
-    $[14] = t3;
-    $[15] = variantProp;
-    $[16] = t4;
+    $[14] = children;
+    $[15] = ref;
+    $[16] = rest;
+    $[17] = status;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = variantProp;
+    $[21] = t5;
   } else {
-    t4 = $[16];
+    t5 = $[21];
   }
-  return t4;
-}
+  return t5;
+});
+StateLabel.displayName = 'StateLabel';
 
 module.exports = StateLabel;

package/lib/StateLabel/StateLabel.module.css.js

@@ -1,7 +1,7 @@
 'use strict';
 
-require('./StateLabel-cd27f475.css');
+require('./StateLabel-50420ff5.css');
 
-var classes = {"Icon":"prc-StateLabel-Icon-NuDm4"};
+var classes = {"StateLabel":"prc-StateLabel-StateLabel-ukDwa","Icon":"prc-StateLabel-Icon-NuDm4"};
 
 module.exports = classes;

package/lib/TextInputWithTokens/TextInputWithTokens.d.ts

@@ -4,6 +4,9 @@ import type { TextInputProps } from '../TextInput';
 import Token from '../Token/Token';
 import type { TokenSizeKeys } from '../Token/TokenBase';
 type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>;
+/**
+ * @deprecated
+ */
 export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponent = typeof Token> = {
     /**
      * The array of tokens to render
@@ -82,5 +85,8 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<{
      */
     visibleTokenCount?: number;
 } & Omit<TextInputProps, "size"> & React.RefAttributes<HTMLInputElement>>;
+/**
+ * @deprecated
+ */
 export default TextInputWithTokens;
 //# sourceMappingURL=TextInputWithTokens.d.ts.map

package/lib/TextInputWithTokens/TextInputWithTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputWithTokens.d.ts","sourceRoot":"","sources":["../../src/TextInputWithTokens/TextInputWithTokens.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA6D,SAAS,EAAC,MAAM,OAAO,CAAA;AAChG,OAAO,KAAyB,MAAM,OAAO,CAAA;AAK7C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAA;AAChD,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAUrD,KAAK,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAA;AAI1E,MAAM,MAAM,wBAAwB,CAAC,kBAAkB,SAAS,iBAAiB,GAAG,OAAO,KAAK,IAAI;IAClG;;OAEG;IACH,MAAM,EAAE,kBAAkB,SAAS,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,UAAU,CAAC,CAAC,GAC7F,UAAU,EAAE,GACZ,KAAK,CAAA;IACT;;OAEG;IACH,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;IAC5C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;AAiRhC,QAAA,MAAM,mBAAmB;IApTvB;;OAEG;;;;;;;;;;IAIH;;OAEG;mBACY,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI;IACjD;;OAEG;;IAEH;;;OAGG;gBACS,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC5C;;OAEG;2BACoB,OAAO;IAC9B;;OAEG;WACI,aAAa;IACpB;;OAEG;6BACsB,OAAO;IAChC;;OAEG;wBACiB,MAAM;yEAkRmD,CAAA;AAI/E,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"TextInputWithTokens.d.ts","sourceRoot":"","sources":["../../src/TextInputWithTokens/TextInputWithTokens.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA6D,SAAS,EAAC,MAAM,OAAO,CAAA;AAChG,OAAO,KAAyB,MAAM,OAAO,CAAA;AAK7C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAA;AAChD,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAUrD,KAAK,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAA;AAI1E;;GAEG;AACH,MAAM,MAAM,wBAAwB,CAAC,kBAAkB,SAAS,iBAAiB,GAAG,OAAO,KAAK,IAAI;IAClG;;OAEG;IACH,MAAM,EAAE,kBAAkB,SAAS,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,UAAU,CAAC,CAAC,GAC7F,UAAU,EAAE,GACZ,KAAK,CAAA;IACT;;OAEG;IACH,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;IAC5C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;AAiRhC,QAAA,MAAM,mBAAmB;IApTvB;;OAEG;;;;;;;;;;IAIH;;OAEG;mBACY,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI;IACjD;;OAEG;;IAEH;;;OAGG;gBACS,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC5C;;OAEG;2BACoB,OAAO;IAC9B;;OAEG;WACI,aAAa;IACpB;;OAEG;6BACsB,OAAO;IAChC;;OAEG;wBACiB,MAAM;yEAkRmD,CAAA;AAI/E;;GAEG;AACH,eAAe,mBAAmB,CAAA"}