@primer/react 38.25.1-rc.c82500a2c → 38.26.0-rc.0fd8871fd

package/dist/utils/as-slot.d.ts

@@ -0,0 +1,20 @@
+import type { WithSlotMarker } from './types';
+/**
+ * Copies the `__SLOT__` marker from a slot-aware source component onto another
+ * component, returning the same component reference typed as a slot.
+ *
+ * Useful when building reusable wrappers around Primer slot components that
+ * still need to be recognised by the parent's slot scanner.
+ *
+ * @example
+ * ```tsx
+ * const ColoredLeadingVisual = asSlot(
+ *   function ColoredLeadingVisual({color, children}) {
+ *     return <ActionList.LeadingVisual><span style={{color}}>{children}</span></ActionList.LeadingVisual>
+ *   },
+ *   ActionList.LeadingVisual,
+ * )
+ * ```
+ */
+export declare function asSlot<T>(component: T, slotSource: WithSlotMarker<unknown>): WithSlotMarker<T>;
+//# sourceMappingURL=as-slot.d.ts.map

package/dist/utils/as-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"as-slot.d.ts","sourceRoot":"","sources":["../../src/utils/as-slot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,cAAc,EAAC,MAAM,SAAS,CAAA;AAEvD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAW9F"}

package/dist/utils/as-slot.js

@@ -0,0 +1,30 @@
+import { warning } from './warning.js';
+
+/**
+ * Copies the `__SLOT__` marker from a slot-aware source component onto another
+ * component, returning the same component reference typed as a slot.
+ *
+ * Useful when building reusable wrappers around Primer slot components that
+ * still need to be recognised by the parent's slot scanner.
+ *
+ * @example
+ * ```tsx
+ * const ColoredLeadingVisual = asSlot(
+ *   function ColoredLeadingVisual({color, children}) {
+ *     return <ActionList.LeadingVisual><span style={{color}}>{children}</span></ActionList.LeadingVisual>
+ *   },
+ *   ActionList.LeadingVisual,
+ * )
+ * ```
+ */
+function asSlot(component, slotSource) {
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning(!slotSource.__SLOT__, 'asSlot: the provided slotSource does not have a `__SLOT__` marker. The wrapper will not be recognised by the parent slot scanner.') : void 0;
+  }
+  if (slotSource.__SLOT__) {
+    component.__SLOT__ = slotSource.__SLOT__;
+  }
+  return component;
+}
+
+export { asSlot };

package/generated/components.json

@@ -8062,6 +8062,14 @@
         {
           "id": "components-timeline-features--with-inline-links",
           "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>\n        <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n          Monalisa\n        </Link>\n        enabled auto-merge (squash)\n      </Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+        },
+        {
+          "id": "components-timeline-features--with-actions",
+          "code": "() => (\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.SignatureLabelVerified}>Verified</Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceContent}>\n              <div className={classes.CrossReferenceTitle}>\n                <Link href=\"#\" className={classes.CrossReferenceLink}>\n                  <span className={classes.CrossReferenceName}>\n                    Fix positioning of Autocomplete overlay menu\n                  </span>{' '}\n                  <span className={classes.CrossReferenceNumber}>\n                    primer/react#7431\n                  </span>\n                </Link>\n              </div>\n              <div className={classes.CrossReferenceTaskline}>\n                <Octicon icon={TasklistIcon} size={16} />\n                17 tasks\n              </div>\n            </div>\n            <div className={classes.CrossReferenceActions}>\n              <Octicon\n                icon={LockIcon}\n                size={16}\n                className={classes.CrossReferenceMeta}\n              />\n              <StateLabel status=\"pullOpened\" size=\"medium\">\n                Open\n              </StateLabel>\n            </div>\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
+        },
+        {
+          "id": "components-timeline-features--with-avatar",
+          "code": "() => (\n  <div className={classes.AvatarGutter}>\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Avatar>\n          <Avatar\n            size={40}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          opened this pull request\n        </Timeline.Body>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Avatar>\n          <Avatar\n            size={16}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>Monalisa pushed a commit</Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -8100,6 +8108,14 @@
         {
           "name": "Timeline.Break",
           "props": []
+        },
+        {
+          "name": "Timeline.Actions",
+          "props": []
+        },
+        {
+          "name": "Timeline.Avatar",
+          "props": []
         }
       ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.25.1-rc.c82500a2c",
+  "version": "38.26.0-rc.0fd8871fd",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -80,7 +80,7 @@
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.10.3",
-    "@primer/live-region-element": "^0.7.1",
+    "@primer/live-region-element": "^0.8.0",
     "@primer/octicons-react": "^19.24.1",
     "@primer/primitives": "10.x || 11.x",
     "@tanstack/react-virtual": "^3.13.18",

package/dist/Timeline/Timeline-05decc91.css

@@ -1,2 +0,0 @@
-.prc-Timeline-Timeline-awSoC{display:flex;flex-direction:column}:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:first-child):where([data-condensed]):before{top:var(--base-size-12,.75rem)}:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}:is(:is(.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]),.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both])) .prc-Timeline-TimelineItem-QwDVH:last-child):where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-TimelineItem-QwDVH{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-QwDVH:before{background-color:var(--borderColor-muted,#d1d9e0b3);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineBadge-u0qSm{background-color:var(--bgColor-default,#fff);border:0;color:var(--fgColor-muted,#59636e);height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineBadgeWrapper-SZw4k{position:relative;z-index:1}.prc-Timeline-TimelineBadge-u0qSm{align-items:center;background-color:var(--timelineBadge-bgColor,#f6f8fa);border-color:var(--bgColor-default,#fff);border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);color:var(--fgColor-muted,#59636e);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant]){color:var(--fgColor-onEmphasis,#fff)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=accent]){background-color:var(--bgColor-accent-emphasis,#0969da)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=success]){background-color:var(--bgColor-success-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=attention]){background-color:var(--bgColor-attention-emphasis,#9a6700)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=severe]){background-color:var(--bgColor-severe-emphasis,#bc4c00)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=danger]){background-color:var(--bgColor-danger-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=done]){background-color:var(--bgColor-done-emphasis,#8250df)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=open]){background-color:var(--bgColor-open-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=closed]){background-color:var(--bgColor-closed-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=sponsors]){background-color:var(--bgColor-sponsors-emphasis,#bf3989)}.prc-Timeline-TimelineBody-tjOtb{color:var(--fgColor-muted,#59636e);flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:calc(var(--base-size-4,.25rem) + 1px);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-X8eti{background-color:var(--bgColor-default,#fff);border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,#d1d9e0);height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}.prc-Timeline-TimelineBreak-X8eti:has(+[data-condensed]){margin-bottom:calc(var(--base-size-12,.75rem)*-1)}
-/*# sourceMappingURL=Timeline-05decc91.css.map */

package/dist/Timeline/Timeline-05decc91.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Timeline/Timeline.module.css.js"],"names":[],"mappings":"AAAA,6BACE,YAAa,CACb,qBAuBF,CAnBI,6KACE,aAKF,CAHE,iNACE,8BACF,CAMF,0KACE,gBAKF,CAHE,8MACE,iCACF,CAKN,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAkCF,CA7BE,wCASE,mDAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAeF,CAZE,oEACE,uCACF,CAEA,2FAKE,4CAAwC,CACxC,QAAS,CAFT,kCAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAIJ,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,qDAA8C,CAE9C,wCAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAPtC,kCAA2B,CAR3B,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UA0DF,CAvCE,wDACE,oCACF,CAEA,+DACE,uDACF,CAEA,gEACE,wDACF,CAEA,kEACE,0DACF,CAEA,+DACE,uDACF,CAEA,+DACE,uDACF,CAEA,6DACE,qDACF,CAEA,6DACE,qDACF,CAEA,+DACE,uDACF,CAEA,iEACE,yDACF,CAGF,iCAME,kCAA2B,CAC3B,SAAU,CAFV,8CAAuC,CADvC,gDAA0C,CAF1C,cAAe,CADf,WAOF,CAEA,kCAOE,4CAAwC,CACxC,QAAS,CACT,qFAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAaF,CAHE,yDACE,iDACF","file":"Timeline-05decc91.css","sourcesContent":[".Timeline {\n  display: flex;\n  flex-direction: column;\n\n  &:where([data-clip-sidebar='start']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:first-child {\n      padding-top: 0;\n\n      &:where([data-condensed])::before {\n        top: var(--base-size-12);\n      }\n    }\n  }\n\n  &:where([data-clip-sidebar='end']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:last-child {\n      padding-bottom: 0;\n\n      &:where([data-condensed])::before {\n        height: var(--base-size-12);\n      }\n    }\n  }\n}\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--base-size-16) 0;\n  margin-left: var(--base-size-16);\n\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: 2px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:where([data-condensed]) {\n    padding-top: var(--base-size-4);\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: var(--base-size-16);\n    }\n\n    .TimelineBadge {\n      height: 16px;\n      margin-top: var(--base-size-8);\n      margin-bottom: var(--base-size-8);\n      color: var(--fgColor-muted);\n      background-color: var(--bgColor-default);\n      border: 0;\n    }\n  }\n}\n\n.TimelineBadgeWrapper {\n  position: relative;\n  z-index: 1;\n}\n\n.TimelineBadge {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  margin-right: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -15px;\n  flex-shrink: 0;\n  overflow: hidden;\n  color: var(--fgColor-muted);\n\n  /* TODOl not quite sure if this is the correct migration for this line */\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--bgColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thick);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n\n  &:where([data-variant]) {\n    color: var(--fgColor-onEmphasis);\n  }\n\n  &:where([data-variant='accent']) {\n    background-color: var(--bgColor-accent-emphasis);\n  }\n\n  &:where([data-variant='success']) {\n    background-color: var(--bgColor-success-emphasis);\n  }\n\n  &:where([data-variant='attention']) {\n    background-color: var(--bgColor-attention-emphasis);\n  }\n\n  &:where([data-variant='severe']) {\n    background-color: var(--bgColor-severe-emphasis);\n  }\n\n  &:where([data-variant='danger']) {\n    background-color: var(--bgColor-danger-emphasis);\n  }\n\n  &:where([data-variant='done']) {\n    background-color: var(--bgColor-done-emphasis);\n  }\n\n  &:where([data-variant='open']) {\n    background-color: var(--bgColor-open-emphasis);\n  }\n\n  &:where([data-variant='closed']) {\n    background-color: var(--bgColor-closed-emphasis);\n  }\n\n  &:where([data-variant='sponsors']) {\n    background-color: var(--bgColor-sponsors-emphasis);\n  }\n}\n\n.TimelineBody {\n  min-width: 0;\n  max-width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: calc(var(--base-size-4) + 1px);\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineBreak {\n  position: relative;\n  z-index: 1;\n  height: var(--base-size-24);\n  margin: 0;\n  margin-bottom: calc(-1 * var(--base-size-16));\n  margin-left: 0;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n\n  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(+ [data-condensed]) {\n    margin-bottom: calc(-1 * var(--base-size-12));\n  }\n}\n"]}

package/dist/internal/components/TextInputWrapper-889df5d3.css

@@ -1,2 +0,0 @@
-.prc-components-TextInputBaseWrapper-wY-n0{align-items:stretch;background-color:var(--bgColor-default,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--control-borderColor-rest,#d1d9e0);border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-inset,inset 0 1px 0 0 #1f23280a);color:var(--fgColor-default,#1f2328);cursor:text;display:inline-flex;font-size:var(--text-body-size-medium,.875rem);line-height:var(--base-size-20,1.25rem);min-height:var(--base-size-32,2rem);outline:none;overflow:hidden;vertical-align:middle}.prc-components-TextInputBaseWrapper-wY-n0 input,.prc-components-TextInputBaseWrapper-wY-n0 textarea{cursor:text}.prc-components-TextInputBaseWrapper-wY-n0 select{cursor:pointer}:is(.prc-components-TextInputBaseWrapper-wY-n0 input,.prc-components-TextInputBaseWrapper-wY-n0 textarea,.prc-components-TextInputBaseWrapper-wY-n0 select)::placeholder{color:var(--fgColor-muted,#59636e)}.prc-components-TextInputBaseWrapper-wY-n0:where(:not([data-trailing-action]):focus-within),.prc-components-TextInputBaseWrapper-wY-n0:where([data-trailing-action][data-focused]){border-color:var(--borderColor-accent-emphasis,#0969da);outline:var(--borderWidth-thick,.125rem) solid var(--borderColor-accent-emphasis,#0969da);outline-offset:-1px}.prc-components-TextInputBaseWrapper-wY-n0>textarea{padding:var(--base-size-12,.75rem)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-contrast]){background-color:var(--control-bgColor-contrast,var(--bgColor-inset,#f6f8fa))}.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]){background-color:var(--control-bgColor-disabled,#eff2f5);border-color:var(--control-borderColor-disabled,#818b981a);box-shadow:none;color:var(--fgColor-disabled,#818b98)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) input,.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) select,.prc-components-TextInputBaseWrapper-wY-n0:where([data-disabled]) textarea{cursor:not-allowed}.prc-components-TextInputBaseWrapper-wY-n0:where([data-monospace]){font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]){border-color:var(--borderColor-danger-emphasis,#cf222e)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]):where(:not([data-trailing-action])):focus-within,.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=error]):where([data-trailing-action][data-focused]){border-color:var(--control-borderColor-danger,#cf222e);outline:2px solid var(--control-borderColor-danger,#cf222e);outline-offset:-1px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-validation=success]){border-color:var(--bgColor-success-emphasis,#1f883d)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-block]){align-self:stretch;display:flex;width:100%}@media screen and (min-width:48rem){.prc-components-TextInputBaseWrapper-wY-n0{font-size:var(--text-body-size-medium,.875rem)}}.prc-components-TextInputBaseWrapper-wY-n0{--inner-action-size:var(--base-size-24,1.5rem)}.prc-components-TextInputBaseWrapper-wY-n0:where([data-size=small]){--inner-action-size:var(--base-size-20,1.25rem);font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-20,1.25rem);min-height:var(--base-size-28,1.75rem);padding-bottom:3px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:3px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-size=large]){--inner-action-size:var(--base-size-28,1.75rem);height:var(--base-size-40,2.5rem);padding-bottom:10px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:10px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-variant=small]){font-size:(--text-body-size-small);line-height:var(--base-size-20,1.25rem);min-height:28px;padding-bottom:3px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:3px}.prc-components-TextInputBaseWrapper-wY-n0:where([data-variant=large]){font-size:var(--text-title-size-medium,1.25rem);padding-bottom:10px;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:10px}.prc-components-TextInputWrapper-Hpdqi,.prc-components-TextInputWrapper-Hpdqi>input,.prc-components-TextInputWrapper-Hpdqi>select{padding-left:0;padding-right:0}.prc-components-TextInputWrapper-Hpdqi{background-position:right 8px center;background-repeat:no-repeat}.prc-components-TextInputWrapper-Hpdqi>:not(:last-child){margin-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi .TextInput-action,.prc-components-TextInputWrapper-Hpdqi .TextInput-icon{align-self:center;color:var(--fgColor-muted,#59636e);flex-shrink:0}.prc-components-TextInputWrapper-Hpdqi:where([data-leading-visual]){padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-trailing-visual]:not([data-trailing-action])){padding-right:var(--base-size-8,.5rem)}:is(.prc-components-TextInputWrapper-Hpdqi:where(:not([data-leading-visual])[data-trailing-visual]),.prc-components-TextInputWrapper-Hpdqi:where(:not([data-leading-visual])[data-trailing-action]))>input,:is(.prc-components-TextInputWrapper-Hpdqi:where(:not([data-leading-visual])[data-trailing-visual]),.prc-components-TextInputWrapper-Hpdqi:where(:not([data-leading-visual])[data-trailing-action]))>select{padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where(:not([data-trailing-visual]):not([data-trailing-action]))>input,.prc-components-TextInputWrapper-Hpdqi:where(:not([data-trailing-visual]):not([data-trailing-action]))>select{padding-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-Hpdqi:where(:not([data-leading-visual]):not([data-trailing-visual]):not([data-trailing-action]))>input,.prc-components-TextInputWrapper-Hpdqi:where(:not([data-leading-visual]):not([data-trailing-visual]):not([data-trailing-action]))>select{padding-left:var(--base-size-12,.75rem);padding-right:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-size=large]):where([data-leading-visual]){padding-left:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-Hpdqi:where([data-size=large]):where([data-trailing-visual]:not([data-trailing-action])){padding-right:var(--base-size-12,.75rem)}
-/*# sourceMappingURL=TextInputWrapper-889df5d3.css.map */

package/dist/internal/components/TextInputWrapper-889df5d3.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/internal/components/TextInputWrapper.module.css.js"],"names":[],"mappings":"AAAA,2CAeE,mBAAoB,CALpB,4CAAwC,CACxC,qFAAqE,CACrE,gDAAyC,CAEzC,wDAA+B,CAP/B,oCAA6B,CAE7B,WAAY,CARZ,mBAAoB,CAGpB,8CAAuC,CAEvC,uCAAgC,CAJhC,mCAA+B,CAW/B,YAAa,CAVb,eAAgB,CAKhB,qBA6IF,CApIE,qGAEE,WACF,CAEA,kDACE,cACF,CAKE,yKACE,kCACF,CAGF,mLAEE,uDAAgD,CAChD,yFAA0E,CAC1E,mBACF,CAEA,oDACE,kCACF,CAEA,kEAGE,6EACF,CAEA,kEAEE,wDAAiD,CACjD,0DAAiD,CACjD,eAAgB,CAHhB,qCAUF,CALE,4NAGE,kBACF,CAGF,mEACE,mHACF,CAEA,0EACE,uDAQF,CANE,iPAEE,sDAA+C,CAC/C,2DAAoD,CACpD,mBACF,CAGF,4EAEE,oDACF,CAEA,+DAGE,kBAAmB,CAFnB,YAAa,CACb,UAEF,CAGA,oCA3FF,2CA4FI,8CAyDJ,CAxDE,CA7FF,2CA+FE,8CAsDF,CApDE,oEACE,+CAAwC,CASxC,4CAAsC,CAEtC,uCAAgC,CAThC,sCAA+B,CAK/B,kBAAmB,CACnB,qCAAgC,CAHhC,sCAAiC,CADjC,eAQF,CAEA,oEACE,+CAAwC,CAExC,iCAA2B,CAK3B,mBAAoB,CACpB,qCAAgC,CAHhC,sCAAiC,CADjC,gBAKF,CAGA,uEASE,kCAAmC,CAEnC,uCAAgC,CAVhC,eAAgB,CAKhB,kBAAmB,CACnB,qCAAgC,CAHhC,sCAAiC,CADjC,eASF,CAGA,uEAOE,+CAAwC,CAFxC,mBAAoB,CACpB,qCAAgC,CAHhC,sCAAiC,CADjC,gBAMF,CAOA,kIAGE,cAAe,CADf,eAEF,CARF,uCAcE,oCAAqC,CAHrC,2BA+CF,CA1CE,yDACE,qCACF,CAEA,gHAEE,iBAAkB,CAClB,kCAA2B,CAC3B,aACF,CAGA,oEACE,qCACF,CAGA,iGACE,sCACF,CAKE,uZAEE,qCACF,CAIF,2NAEE,sCACF,CAGA,iRAEE,uCAAiC,CACjC,wCACF,CAKA,6FACE,uCACF,CAEA,0HACE,wCACF","file":"TextInputWrapper-889df5d3.css","sourcesContent":[".TextInputBaseWrapper {\n  display: inline-flex;\n  min-height: var(--base-size-32);\n  overflow: hidden;\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--base-size-20);\n  color: var(--fgColor-default);\n  vertical-align: middle;\n  cursor: text;\n  background-color: var(--bgColor-default);\n  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  outline: none;\n  box-shadow: var(--shadow-inset);\n  align-items: stretch;\n\n  input,\n  textarea {\n    cursor: text;\n  }\n\n  select {\n    cursor: pointer;\n  }\n\n  input,\n  textarea,\n  select {\n    &::placeholder {\n      color: var(--fgColor-muted);\n    }\n  }\n\n  &:where([data-trailing-action][data-focused]),\n  &:where(:not([data-trailing-action]):focus-within) {\n    border-color: var(--borderColor-accent-emphasis);\n    outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);\n    outline-offset: -1px;\n  }\n\n  > textarea {\n    padding: var(--base-size-12);\n  }\n\n  &:where([data-contrast]) {\n    /* this variable is available behind a feature flag in gh/gh */\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--control-bgColor-contrast, var(--bgColor-inset));\n  }\n\n  &:where([data-disabled]) {\n    color: var(--fgColor-disabled);\n    background-color: var(--control-bgColor-disabled);\n    border-color: var(--control-borderColor-disabled);\n    box-shadow: none;\n\n    input,\n    textarea,\n    select {\n      cursor: not-allowed;\n    }\n  }\n\n  &:where([data-monospace]) {\n    font-family: var(--fontStack-monospace);\n  }\n\n  &:where([data-validation='error']) {\n    border-color: var(--borderColor-danger-emphasis);\n\n    &:where([data-trailing-action][data-focused]),\n    &:where(:not([data-trailing-action])):focus-within {\n      border-color: var(--control-borderColor-danger);\n      outline: 2px solid var(--control-borderColor-danger);\n      outline-offset: -1px;\n    }\n  }\n\n  &:where([data-validation='success']) {\n    /* stylelint-disable-next-line primer/colors */\n    border-color: var(--bgColor-success-emphasis);\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n    align-self: stretch;\n  }\n\n  /* Ensures inputs don't zoom on mobile but are body-font size on desktop */\n  @media screen and (--viewportRange-regular) {\n    font-size: var(--text-body-size-medium);\n  }\n\n  --inner-action-size: var(--base-size-24); /* Default size */\n\n  &:where([data-size='small']) {\n    --inner-action-size: var(--base-size-20);\n\n    min-height: var(--base-size-28);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 3px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 3px;\n    padding-left: var(--base-size-8);\n    font-size: var(--text-body-size-small);\n    /* stylelint-disable-next-line primer/typography */\n    line-height: var(--base-size-20);\n  }\n\n  &:where([data-size='large']) {\n    --inner-action-size: var(--base-size-28);\n\n    height: var(--base-size-40);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 10px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 10px;\n    padding-left: var(--base-size-8);\n  }\n\n  /* Deprecated */\n  &:where([data-variant='small']) {\n    min-height: 28px;\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 3px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 3px;\n    padding-left: var(--base-size-8);\n    /* stylelint-disable-next-line declaration-property-value-no-unknown */\n    font-size: (--text-body-size-small);\n    /* stylelint-disable-next-line primer/typography */\n    line-height: var(--base-size-20);\n  }\n\n  /* Deprecated */\n  &:where([data-variant='large']) {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: 10px;\n    padding-right: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: 10px;\n    padding-left: var(--base-size-8);\n    font-size: var(--text-title-size-medium);\n  }\n}\n\n.TextInputWrapper {\n  padding-right: 0;\n  padding-left: 0;\n\n  > input,\n  > select {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  /* Repeat and position set for form states (success, error, etc) */\n  background-repeat: no-repeat;\n\n  /* For form validation. This keeps images 8px from right and centered vertically. */\n  background-position: right 8px center;\n\n  & > :not(:last-child) {\n    margin-right: var(--base-size-8);\n  }\n\n  & :global(.TextInput-icon) /* stylelint-disable-line selector-class-pattern */,\n  & :global(.TextInput-action)  /* stylelint-disable-line selector-class-pattern */ {\n    align-self: center;\n    color: var(--fgColor-muted);\n    flex-shrink: 0;\n  }\n\n  /* With leading visual */\n  &:where([data-leading-visual]) {\n    padding-left: var(--base-size-8);\n  }\n\n  /* With trailing visual */\n  &:where([data-trailing-visual]:not([data-trailing-action])) {\n    padding-right: var(--base-size-8);\n  }\n\n  /* Only trailing visual */\n  &:where(:not([data-leading-visual])[data-trailing-visual]),\n  &:where(:not([data-leading-visual])[data-trailing-action]) {\n    > input,\n    > select {\n      padding-left: var(--base-size-8);\n    }\n  }\n\n  /* Only leading visual */\n  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,\n  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {\n    padding-right: var(--base-size-8);\n  }\n\n  /* No visuals at all */\n  &:where(:not([data-leading-visual]):not([data-trailing-visual]):not([data-trailing-action])) > input,\n  &:where(:not([data-leading-visual]):not([data-trailing-visual]):not([data-trailing-action])) > select {\n    padding-left: var(--base-size-12);\n    padding-right: var(--base-size-12);\n  }\n}\n\n/* Large size input */\n.TextInputWrapper:where([data-size='large']) {\n  &:where([data-leading-visual]) {\n    padding-left: var(--base-size-12);\n  }\n\n  &:where([data-trailing-visual]:not([data-trailing-action])) {\n    padding-right: var(--base-size-12);\n  }\n}\n"]}