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

package/lib-esm/{Caret.js → internal/components/Caret.js}

@@ -1,6 +1,4 @@
-import React from 'react';
-import { ThemeContext } from 'styled-components';
-import { style } from 'styled-system';
+import classes from './Caret.module.css.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const oppositeEdge = {
@@ -27,39 +25,11 @@ function getPosition(edge, align, spacing) {
     [align || perp]: align ? spacing : '50%'
   };
 }
-const getBg = style({
-  prop: 'bg',
-  key: 'colors'
-});
-const getBorderColor = style({
-  prop: 'borderColor',
-  key: 'colors'
-});
-const getBorderWidth = style({
-  prop: 'borderWidth',
-  key: 'borderWidths',
-  scale: [0, 1]
-});
 function Caret(props) {
-  var _props$theme;
-  const theme = React.useContext(ThemeContext);
-  const propsWithTheme = {
-    ...props,
-    bg: props.bg || 'canvas.default',
-    borderColor: props.borderColor || 'border.default',
-    borderWidth: props.borderWidth || 1,
-    theme: (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : theme
-  };
-  const {
-    bg
-  } = getBg(propsWithTheme);
-  const {
-    borderColor
-  } = getBorderColor(propsWithTheme);
-  const {
-    borderWidth
-  } = getBorderWidth(propsWithTheme);
   const {
+    bg,
+    borderColor,
+    borderWidth,
     size = 8,
     location = 'bottom'
   } = props;
@@ -83,30 +53,30 @@ function Caret(props) {
     left: `translate(${[size * 2, size]}) rotate(90)`
   }[edge];
   return /*#__PURE__*/jsx("svg", {
+    className: classes.Caret,
     width: size * 2,
     height: size * 2,
     style: {
-      pointerEvents: 'none',
-      position: 'absolute',
       ...getPosition(edge, align, size),
       // if align is set (top|right|bottom|left),
       // then we don't need an offset margin
-      [`margin${perp}`]: align ? null : -size
+      [`margin${perp}`]: align ? null : -size,
+      ...{
+        '--caret-bg': bg,
+        '--caret-border-color': borderColor,
+        '--caret-border-width': borderWidth
+      }
     },
     role: "presentation",
     children: /*#__PURE__*/jsxs("g", {
+      className: classes.CaretGroup,
       transform: transform,
       children: [/*#__PURE__*/jsx("path", {
         d: triangle,
-        fill: theme === null || theme === void 0 ? void 0 : theme.colors.canvas.default
-      }), /*#__PURE__*/jsx("path", {
-        d: triangle,
-        fill: bg
+        className: classes.CaretTriangle
       }), /*#__PURE__*/jsx("path", {
         d: line,
-        fill: "none",
-        stroke: borderColor,
-        strokeWidth: borderWidth
+        className: classes.CaretBorder
       })]
     })
   });

package/lib-esm/internal/components/Caret.module.css.js

@@ -0,0 +1,5 @@
+import './Caret-e686f04c.css';
+
+var classes = {"Caret":"prc-components-Caret-PNu-B","CaretTriangle":"prc-components-CaretTriangle-Iu0GY","CaretBorder":"prc-components-CaretBorder-o3vP2"};
+
+export { classes as default };

package/lib-esm/internal/components/LiveRegion.js

@@ -18,32 +18,30 @@ function LiveRegion(t0) {
   } = t0;
   const [message, setMessage] = React.useState("");
   let t1;
-  let t2;
   if ($[0] !== message) {
-    t2 = {
+    t1 = {
       announce: setMessage,
       message
     };
     $[0] = message;
-    $[1] = t2;
+    $[1] = t1;
   } else {
-    t2 = $[1];
+    t1 = $[1];
   }
-  t1 = t2;
   const value = t1;
-  let t3;
+  let t2;
   if ($[2] !== children || $[3] !== value) {
-    t3 = /*#__PURE__*/jsx(LiveRegionContext.Provider, {
+    t2 = /*#__PURE__*/jsx(LiveRegionContext.Provider, {
       value: value,
       children: children
     });
     $[2] = children;
     $[3] = value;
-    $[4] = t3;
+    $[4] = t2;
   } else {
-    t3 = $[4];
+    t2 = $[4];
   }
-  return t3;
+  return t2;
 }
 function LiveRegionOutlet() {
   const $ = c(2);

package/lib-esm/internal/components/{TextInputWrapper-ca608f70.css → TextInputWrapper-889df5d3.css}

@@ -1,2 +1,2 @@
-.prc-components-TextInputBaseWrapper-ueK9q{align-items:stretch;background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,.0625rem) solid var(--control-borderColor-rest,var(--color-btn-border));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));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-ueK9q input,.prc-components-TextInputBaseWrapper-ueK9q textarea{cursor:text}.prc-components-TextInputBaseWrapper-ueK9q select{cursor:pointer}:is(.prc-components-TextInputBaseWrapper-ueK9q input,.prc-components-TextInputBaseWrapper-ueK9q textarea,.prc-components-TextInputBaseWrapper-ueK9q select)::placeholder{color:var(--fgColor-muted,var(--color-fg-muted))}.prc-components-TextInputBaseWrapper-ueK9q:where(:not([data-trailing-action]):focus-within),.prc-components-TextInputBaseWrapper-ueK9q:where([data-trailing-action][data-focused]){border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));outline:var(--borderWidth-thick,.125rem) solid var(--borderColor-accent-emphasis,var(--color-accent-emphasis));outline-offset:-1px}.prc-components-TextInputBaseWrapper-ueK9q>textarea{padding:var(--base-size-12,.75rem)}.prc-components-TextInputBaseWrapper-ueK9q:where([data-contrast]){background-color:var(--control-bgColor-contrast,var(--bgColor-inset,var(--color-canvas-inset)))}.prc-components-TextInputBaseWrapper-ueK9q:where([data-disabled]){background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled))}.prc-components-TextInputBaseWrapper-ueK9q:where([data-disabled]) input,.prc-components-TextInputBaseWrapper-ueK9q:where([data-disabled]) select,.prc-components-TextInputBaseWrapper-ueK9q:where([data-disabled]) textarea{cursor:not-allowed}.prc-components-TextInputBaseWrapper-ueK9q:where([data-monospace]){font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.prc-components-TextInputBaseWrapper-ueK9q:where([data-validation=error]){border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.prc-components-TextInputBaseWrapper-ueK9q:where([data-validation=error]):where(:not([data-trailing-action])):focus-within,.prc-components-TextInputBaseWrapper-ueK9q:where([data-validation=error]):where([data-trailing-action][data-focused]){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis));outline:2px solid var(--control-borderColor-danger,var(--color-danger-emphasis));outline-offset:-1px}.prc-components-TextInputBaseWrapper-ueK9q:where([data-validation=success]){border-color:var(--bgColor-success-emphasis,var(--color-success-emphasis))}.prc-components-TextInputBaseWrapper-ueK9q:where([data-block]){align-self:stretch;display:flex;width:100%}@media screen and (min-width:48rem){.prc-components-TextInputBaseWrapper-ueK9q{font-size:var(--text-body-size-medium,.875rem)}}.prc-components-TextInputBaseWrapper-ueK9q{--inner-action-size:var(--base-size-24,1.5rem)}.prc-components-TextInputBaseWrapper-ueK9q: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-ueK9q: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-ueK9q: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-ueK9q: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-i1ofR,.prc-components-TextInputWrapper-i1ofR>input,.prc-components-TextInputWrapper-i1ofR>select{padding-left:0;padding-right:0}.prc-components-TextInputWrapper-i1ofR{background-position:right 8px center;background-repeat:no-repeat}.prc-components-TextInputWrapper-i1ofR>:not(:last-child){margin-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-i1ofR .TextInput-action,.prc-components-TextInputWrapper-i1ofR .TextInput-icon{align-self:center;color:var(--fgColor-muted,var(--color-fg-muted));flex-shrink:0}.prc-components-TextInputWrapper-i1ofR:where([data-leading-visual]){padding-left:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-i1ofR:where([data-trailing-visual]:not([data-trailing-action])){padding-right:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-i1ofR:where(:not([data-leading-visual]))>input,.prc-components-TextInputWrapper-i1ofR:where(:not([data-leading-visual]))>select{padding-left:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-i1ofR:where(:not([data-trailing-visual]):not([data-trailing-action]))>input,.prc-components-TextInputWrapper-i1ofR:where(:not([data-trailing-visual]):not([data-trailing-action]))>select{padding-right:var(--base-size-12,.75rem)}
-/*# sourceMappingURL=TextInputWrapper-ca608f70.css.map */
+.prc-components-TextInputBaseWrapper-ueK9q{align-items:stretch;background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,.0625rem) solid var(--control-borderColor-rest,var(--color-btn-border));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));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-ueK9q input,.prc-components-TextInputBaseWrapper-ueK9q textarea{cursor:text}.prc-components-TextInputBaseWrapper-ueK9q select{cursor:pointer}:is(.prc-components-TextInputBaseWrapper-ueK9q input,.prc-components-TextInputBaseWrapper-ueK9q textarea,.prc-components-TextInputBaseWrapper-ueK9q select)::placeholder{color:var(--fgColor-muted,var(--color-fg-muted))}.prc-components-TextInputBaseWrapper-ueK9q:where(:not([data-trailing-action]):focus-within),.prc-components-TextInputBaseWrapper-ueK9q:where([data-trailing-action][data-focused]){border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));outline:var(--borderWidth-thick,.125rem) solid var(--borderColor-accent-emphasis,var(--color-accent-emphasis));outline-offset:-1px}.prc-components-TextInputBaseWrapper-ueK9q>textarea{padding:var(--base-size-12,.75rem)}.prc-components-TextInputBaseWrapper-ueK9q:where([data-contrast]){background-color:var(--control-bgColor-contrast,var(--bgColor-inset,var(--color-canvas-inset)))}.prc-components-TextInputBaseWrapper-ueK9q:where([data-disabled]){background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled))}.prc-components-TextInputBaseWrapper-ueK9q:where([data-disabled]) input,.prc-components-TextInputBaseWrapper-ueK9q:where([data-disabled]) select,.prc-components-TextInputBaseWrapper-ueK9q:where([data-disabled]) textarea{cursor:not-allowed}.prc-components-TextInputBaseWrapper-ueK9q:where([data-monospace]){font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.prc-components-TextInputBaseWrapper-ueK9q:where([data-validation=error]){border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.prc-components-TextInputBaseWrapper-ueK9q:where([data-validation=error]):where(:not([data-trailing-action])):focus-within,.prc-components-TextInputBaseWrapper-ueK9q:where([data-validation=error]):where([data-trailing-action][data-focused]){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis));outline:2px solid var(--control-borderColor-danger,var(--color-danger-emphasis));outline-offset:-1px}.prc-components-TextInputBaseWrapper-ueK9q:where([data-validation=success]){border-color:var(--bgColor-success-emphasis,var(--color-success-emphasis))}.prc-components-TextInputBaseWrapper-ueK9q:where([data-block]){align-self:stretch;display:flex;width:100%}@media screen and (min-width:48rem){.prc-components-TextInputBaseWrapper-ueK9q{font-size:var(--text-body-size-medium,.875rem)}}.prc-components-TextInputBaseWrapper-ueK9q{--inner-action-size:var(--base-size-24,1.5rem)}.prc-components-TextInputBaseWrapper-ueK9q: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-ueK9q: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-ueK9q: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-ueK9q: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-i1ofR,.prc-components-TextInputWrapper-i1ofR>input,.prc-components-TextInputWrapper-i1ofR>select{padding-left:0;padding-right:0}.prc-components-TextInputWrapper-i1ofR{background-position:right 8px center;background-repeat:no-repeat}.prc-components-TextInputWrapper-i1ofR>:not(:last-child){margin-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-i1ofR .TextInput-action,.prc-components-TextInputWrapper-i1ofR .TextInput-icon{align-self:center;color:var(--fgColor-muted,var(--color-fg-muted));flex-shrink:0}.prc-components-TextInputWrapper-i1ofR:where([data-leading-visual]){padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-i1ofR:where([data-trailing-visual]:not([data-trailing-action])){padding-right:var(--base-size-8,.5rem)}:is(.prc-components-TextInputWrapper-i1ofR:where(:not([data-leading-visual])[data-trailing-visual]),.prc-components-TextInputWrapper-i1ofR:where(:not([data-leading-visual])[data-trailing-action]))>input,:is(.prc-components-TextInputWrapper-i1ofR:where(:not([data-leading-visual])[data-trailing-visual]),.prc-components-TextInputWrapper-i1ofR:where(:not([data-leading-visual])[data-trailing-action]))>select{padding-left:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-i1ofR:where(:not([data-trailing-visual]):not([data-trailing-action]))>input,.prc-components-TextInputWrapper-i1ofR:where(:not([data-trailing-visual]):not([data-trailing-action]))>select{padding-right:var(--base-size-8,.5rem)}.prc-components-TextInputWrapper-i1ofR:where(:not([data-leading-visual]):not([data-trailing-visual]):not([data-trailing-action]))>input,.prc-components-TextInputWrapper-i1ofR: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-i1ofR:where([data-size=large]):where([data-leading-visual]){padding-left:var(--base-size-12,.75rem)}.prc-components-TextInputWrapper-i1ofR: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/{lib/internal/components/TextInputWrapper-ca608f70.css.map → lib-esm/internal/components/TextInputWrapper-889df5d3.css.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/internal/components/TextInputWrapper.module.css"],"names":[],"mappings":"AAAA,2CAeE,mBAAoB,CALpB,mEAAwC,CACxC,qGAAqE,CACrE,gDAAyC,CAEzC,+DAA+B,CAP/B,oDAA6B,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,gDACF,CAGF,mLAEE,4EAAgD,CAChD,8GAA0E,CAC1E,mBACF,CAEA,oDACE,kCACF,CAEA,kEAGE,+FACF,CAEA,kEAEE,+EAAiD,CACjD,wEAAiD,CACjD,eAAgB,CAHhB,6DAUF,CALE,4NAGE,kBACF,CAGF,mEACE,mHACF,CAEA,0EACE,4EAQF,CANE,iPAEE,2EAA+C,CAC/C,gFAAoD,CACpD,mBACF,CAGF,4EAEE,0EACF,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,2BAiCF,CA5BE,yDACE,qCACF,CAEA,gHAEE,iBAAkB,CAClB,gDAA2B,CAC3B,aACF,CAEA,oEACE,uCACF,CAEA,iGACE,wCACF,CAEA,iKAEE,uCACF,CAEA,2NAEE,wCACF","file":"TextInputWrapper-ca608f70.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  &: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  &:where(:not([data-leading-visual])) > input,\n  &:where(:not([data-leading-visual])) > select {\n    padding-left: var(--base-size-12);\n  }\n\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-12);\n  }\n}\n"]}
+{"version":3,"sources":["../../src/internal/components/TextInputWrapper.module.css"],"names":[],"mappings":"AAAA,2CAeE,mBAAoB,CALpB,mEAAwC,CACxC,qGAAqE,CACrE,gDAAyC,CAEzC,+DAA+B,CAP/B,oDAA6B,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,gDACF,CAGF,mLAEE,4EAAgD,CAChD,8GAA0E,CAC1E,mBACF,CAEA,oDACE,kCACF,CAEA,kEAGE,+FACF,CAEA,kEAEE,+EAAiD,CACjD,wEAAiD,CACjD,eAAgB,CAHhB,6DAUF,CALE,4NAGE,kBACF,CAGF,mEACE,mHACF,CAEA,0EACE,4EAQF,CANE,iPAEE,2EAA+C,CAC/C,gFAAoD,CACpD,mBACF,CAGF,4EAEE,0EACF,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,gDAA2B,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"]}

package/lib-esm/internal/components/TextInputWrapper.module.css.js

@@ -1,4 +1,4 @@
-import './TextInputWrapper-ca608f70.css';
+import './TextInputWrapper-889df5d3.css';
 
 var styles = {"TextInputBaseWrapper":"prc-components-TextInputBaseWrapper-ueK9q","TextInputWrapper":"prc-components-TextInputWrapper-i1ofR"};
 

package/lib-esm/internal/components/UnderlineTabbedInterface.js

@@ -1,7 +1,6 @@
 import { c } from 'react-compiler-runtime';
 import { forwardRef } from 'react';
 import { isElement } from 'react-is';
-import { defaultSxProp } from '../../utils/defaultSxProp.js';
 import classes from './UnderlineTabbedInterface.module.css.js';
 import { clsx } from 'clsx';
 import { BoxWithFallback } from './BoxWithFallback.js';
@@ -10,57 +9,50 @@ import CounterLabel from '../../CounterLabel/CounterLabel.js';
 
 const GAP = 8;
 const UnderlineWrapper = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(13);
+  const $ = c(11);
   let children;
   let className;
   let rest;
-  let t1;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = rest;
-    $[4] = t1;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
-    t1 = $[4];
   }
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  let t2;
-  if ($[5] !== className) {
-    t2 = clsx(classes.UnderlineWrapper, className);
-    $[5] = className;
-    $[6] = t2;
+  let t1;
+  if ($[4] !== className) {
+    t1 = clsx(classes.UnderlineWrapper, className);
+    $[4] = className;
+    $[5] = t1;
   } else {
-    t2 = $[6];
+    t1 = $[5];
   }
-  let t3;
-  if ($[7] !== children || $[8] !== forwardedRef || $[9] !== rest || $[10] !== sxProp || $[11] !== t2) {
-    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t2,
+  let t2;
+  if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
+    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
+      className: t1,
       ref: forwardedRef,
-      sx: sxProp,
       ...rest,
       children: children
     });
-    $[7] = children;
-    $[8] = forwardedRef;
-    $[9] = rest;
-    $[10] = sxProp;
-    $[11] = t2;
-    $[12] = t3;
+    $[6] = children;
+    $[7] = forwardedRef;
+    $[8] = rest;
+    $[9] = t1;
+    $[10] = t2;
   } else {
-    t3 = $[12];
+    t2 = $[10];
   }
-  return t3;
+  return t2;
 });
 const UnderlineItemList = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const $ = c(7);
@@ -108,41 +100,8 @@ const LoadingCounter = () => {
   }
   return t0;
 };
-
-// We can uncomment these when/if we add overflow behavior
-// to the UnderlinePanels component
-//
-// export const StyledMoreButton = styled(Button)`
-//   margin: 0;
-//   border: 0;
-//   background: transparent;
-//   font-weight: normal;
-//   box-shadow: none;
-//   padding-block: var(--control-small-paddingBlock);
-//   padding-inline: var(--control-small-paddingInline-condensed);
-
-//   > span[data-component='trailingVisual'] {
-//     margin-left: 0;
-//   }
-// `
-
-// export const StyledOverflowDivider = styled.span`
-//   display: inline-block;
-//   border-left: 1px solid var(--borderColor-muted);
-//   width: 1px;
-//   margin-right: var(--control-xsmall-gap);
-//   /* The height of the divider - reference from Figma */
-//   height: 24px;
-// `
-
-// export const StyledMoreMenuListItem = styled.li`
-//   display: flex;
-//   align-items: center;
-//   height: 45px;
-// `
-
 const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(29);
+  const $ = c(27);
   let Icon;
   let children;
   let className;
@@ -151,7 +110,6 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   let loadingCounters;
   let rest;
   let t1;
-  let t2;
   if ($[0] !== t0) {
     ({
       as: t1,
@@ -160,7 +118,6 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
       icon: Icon,
       iconsVisible,
       loadingCounters,
-      sx: t2,
       className,
       ...rest
     } = t0);
@@ -173,7 +130,6 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[6] = loadingCounters;
     $[7] = rest;
     $[8] = t1;
-    $[9] = t2;
   } else {
     Icon = $[1];
     children = $[2];
@@ -183,45 +139,43 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     loadingCounters = $[6];
     rest = $[7];
     t1 = $[8];
-    t2 = $[9];
   }
   const as = t1 === undefined ? "a" : t1;
-  const sxProp = t2 === undefined ? defaultSxProp : t2;
-  let t3;
-  if ($[10] !== className) {
-    t3 = clsx(classes.UnderlineItem, className);
-    $[10] = className;
-    $[11] = t3;
+  let t2;
+  if ($[9] !== className) {
+    t2 = clsx(classes.UnderlineItem, className);
+    $[9] = className;
+    $[10] = t2;
   } else {
-    t3 = $[11];
+    t2 = $[10];
   }
-  let t4;
-  if ($[12] !== Icon || $[13] !== iconsVisible) {
-    t4 = iconsVisible && Icon && /*#__PURE__*/jsx("span", {
+  let t3;
+  if ($[11] !== Icon || $[12] !== iconsVisible) {
+    t3 = iconsVisible && Icon && /*#__PURE__*/jsx("span", {
       "data-component": "icon",
       children: isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {})
     });
-    $[12] = Icon;
-    $[13] = iconsVisible;
-    $[14] = t4;
+    $[11] = Icon;
+    $[12] = iconsVisible;
+    $[13] = t3;
   } else {
-    t4 = $[14];
+    t3 = $[13];
   }
-  let t5;
-  if ($[15] !== children) {
-    t5 = children && /*#__PURE__*/jsx("span", {
+  let t4;
+  if ($[14] !== children) {
+    t4 = children && /*#__PURE__*/jsx("span", {
       "data-component": "text",
       "data-content": children,
       children: children
     });
-    $[15] = children;
-    $[16] = t5;
+    $[14] = children;
+    $[15] = t4;
   } else {
-    t5 = $[16];
+    t4 = $[15];
   }
-  let t6;
-  if ($[17] !== counter || $[18] !== loadingCounters) {
-    t6 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsx("span", {
+  let t5;
+  if ($[16] !== counter || $[17] !== loadingCounters) {
+    t5 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsx("span", {
       "data-component": "counter",
       children: /*#__PURE__*/jsx(LoadingCounter, {})
     }) : /*#__PURE__*/jsx("span", {
@@ -230,35 +184,33 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
         children: counter
       })
     }) : null;
-    $[17] = counter;
-    $[18] = loadingCounters;
-    $[19] = t6;
+    $[16] = counter;
+    $[17] = loadingCounters;
+    $[18] = t5;
   } else {
-    t6 = $[19];
+    t5 = $[18];
   }
-  let t7;
-  if ($[20] !== as || $[21] !== forwardedRef || $[22] !== rest || $[23] !== sxProp || $[24] !== t3 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6) {
-    t7 = /*#__PURE__*/jsxs(BoxWithFallback, {
+  let t6;
+  if ($[19] !== as || $[20] !== forwardedRef || $[21] !== rest || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5) {
+    t6 = /*#__PURE__*/jsxs(BoxWithFallback, {
       ref: forwardedRef,
       as: as,
-      sx: sxProp,
-      className: t3,
+      className: t2,
       ...rest,
-      children: [t4, t5, t6]
+      children: [t3, t4, t5]
     });
-    $[20] = as;
-    $[21] = forwardedRef;
-    $[22] = rest;
-    $[23] = sxProp;
-    $[24] = t3;
-    $[25] = t4;
-    $[26] = t5;
-    $[27] = t6;
-    $[28] = t7;
+    $[19] = as;
+    $[20] = forwardedRef;
+    $[21] = rest;
+    $[22] = t2;
+    $[23] = t3;
+    $[24] = t4;
+    $[25] = t5;
+    $[26] = t6;
   } else {
-    t7 = $[28];
+    t6 = $[26];
   }
-  return t7;
+  return t6;
 });
 
 export { GAP, LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };

package/lib-esm/internal/utils/getGlobalFocusStyles.js

@@ -2,6 +2,6 @@ import { css } from 'styled-components';
 import { get } from '../../constants.js';
 
 const globalFocusStyle = css(["box-shadow:none;outline:2px solid ", ";"], get('colors.accent.fg'));
-const getGlobalFocusStyles = outlineOffset => css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset, globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset);
+const getGlobalFocusStyles = outlineOffset => css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, outlineOffset, globalFocusStyle, outlineOffset);
 
 export { getGlobalFocusStyles as default };

package/lib-esm/live-region/Announce.js

@@ -120,8 +120,8 @@ function Announce(t0) {
       });
       observer.observe(container, {
         subtree: true,
-        characterData: true,
-        childList: true
+        childList: true,
+        characterData: true
       });
       return () => {
         observer.disconnect();

package/lib-esm/test-helpers.js

@@ -1,5 +1,8 @@
 import { TextEncoder } from 'node:util';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 // JSDOM doesn't mock ResizeObserver
 global.ResizeObserver = jest.fn().mockImplementation(() => {
   return {

package/lib-esm/utils/form-story-helpers.d.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { CheckboxGroup, FormControl } from '../index';
 import type { ComponentProps } from './types';
 import type { ArgTypes } from '@storybook/react';
-import type { InputType } from '@storybook/csf';
+import type { InputType } from 'storybook/internal/csf';
 type CheckboxOrRadioGroupWrapperArgs = ComponentProps<typeof CheckboxGroup>;
 type CheckboxOrRadioGroupLabelArgs = ComponentProps<typeof CheckboxGroup.Label> & {
     labelChildren?: React.ReactNode;