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

package/lib/internal/components/LiveRegion.js

@@ -1,139 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const LiveRegionContext = /*#__PURE__*/React__default.default.createContext(null);
-function useLiveRegion() {
-  const context = React__default.default.useContext(LiveRegionContext);
-  if (!context) {
-    throw new Error("useLiveRegion() must be used within a <LiveRegion>");
-  }
-  return context;
-}
-function LiveRegion(t0) {
-  const $ = reactCompilerRuntime.c(5);
-  const {
-    children
-  } = t0;
-  const [message, setMessage] = React__default.default.useState("");
-  let t1;
-  if ($[0] !== message) {
-    t1 = {
-      announce: setMessage,
-      message
-    };
-    $[0] = message;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const value = t1;
-  let t2;
-  if ($[2] !== children || $[3] !== value) {
-    t2 = /*#__PURE__*/jsxRuntime.jsx(LiveRegionContext.Provider, {
-      value: value,
-      children: children
-    });
-    $[2] = children;
-    $[3] = value;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-function LiveRegionOutlet() {
-  const $ = reactCompilerRuntime.c(2);
-  const liveRegion = useLiveRegion();
-  let t0;
-  if ($[0] !== liveRegion.message) {
-    t0 = /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
-      role: "status",
-      "aria-live": "polite",
-      "aria-atomic": true,
-      children: liveRegion.message
-    });
-    $[0] = liveRegion.message;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
-}
-function Message(t0) {
-  const $ = reactCompilerRuntime.c(8);
-  const {
-    value
-  } = t0;
-  const liveRegion = useLiveRegion();
-  const savedLiveRegion = React__default.default.useRef(liveRegion);
-  const committedRef = React__default.default.useRef(false);
-  let t1;
-  let t2;
-  if ($[0] !== liveRegion) {
-    t1 = () => {
-      savedLiveRegion.current = liveRegion;
-    };
-    t2 = [liveRegion];
-    $[0] = liveRegion;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  React__default.default.useEffect(t1, t2);
-  let t3;
-  let t4;
-  if ($[3] !== value) {
-    t3 = () => {
-      if (committedRef.current !== true) {
-        return;
-      }
-      const timeoutId = setTimeout(() => {
-        savedLiveRegion.current.announce(value);
-      }, 750);
-      return () => {
-        clearTimeout(timeoutId);
-      };
-    };
-    t4 = [value];
-    $[3] = value;
-    $[4] = t3;
-    $[5] = t4;
-  } else {
-    t3 = $[4];
-    t4 = $[5];
-  }
-  React__default.default.useEffect(t3, t4);
-  let t5;
-  let t6;
-  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = () => {
-      committedRef.current = true;
-      return () => {
-        committedRef.current = false;
-      };
-    };
-    t6 = [];
-    $[6] = t5;
-    $[7] = t6;
-  } else {
-    t5 = $[6];
-    t6 = $[7];
-  }
-  React__default.default.useEffect(t5, t6);
-  return null;
-}
-
-exports.LiveRegion = LiveRegion;
-exports.LiveRegionOutlet = LiveRegionOutlet;
-exports.Message = Message;
-exports.useLiveRegion = useLiveRegion;

package/lib/internal/components/TextInputInnerAction-477e9b99.css

@@ -1,2 +0,0 @@
-.prc-components-Invisible-uIWry{background-color:transparent;color:var(--fgColor-muted,var(--color-fg-muted));padding:var(--base-size-2,.125rem) var(--base-size-4,.25rem);position:relative}.prc-components-Invisible-uIWry:focus,.prc-components-Invisible-uIWry:hover{color:var(--fgColor-default,var(--color-fg-default))}.prc-components-Invisible-uIWry[data-component=IconButton]{height:var(--inner-action-size);width:var(--inner-action-size)}@media (pointer:coarse){.prc-components-Invisible-uIWry :after{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-components-TextInputAction-YT3YI{line-height:0;margin-left:var(--base-size-4,.25rem);margin-right:var(--base-size-4,.25rem)}.prc-components-ConditionalTooltip-6cihH{display:inline-block}
-/*# sourceMappingURL=TextInputInnerAction-477e9b99.css.map */

package/lib/internal/components/TextInputInnerAction-477e9b99.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/internal/components/TextInputInnerAction.module.css"],"names":[],"mappings":"AAAA,gCAOE,4BAA6B,CAD7B,gDAA2B,CAD3B,4DAAgC,CAJhC,iBA6BF,CArBE,4EAEE,oDACF,CAEA,2DAEE,+BAAgC,CADhC,8BAEF,CAEA,wBACE,uCAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,sCAIE,aAAc,CAFd,qCAA+B,CAD/B,sCAIF,CAEA,yCACE,oBACF","file":"TextInputInnerAction-477e9b99.css","sourcesContent":[".Invisible {\n  position: relative;\n  padding-top: var(--base-size-2);\n  padding-right: var(--base-size-4);\n  padding-bottom: var(--base-size-2);\n  padding-left: var(--base-size-4);\n  color: var(--fgColor-muted);\n  background-color: transparent;\n\n  &:hover,\n  &:focus {\n    color: var(--fgColor-default);\n  }\n\n  &[data-component='IconButton'] {\n    width: var(--inner-action-size);\n    height: var(--inner-action-size);\n  }\n\n  @media (pointer: coarse) {\n    ::after {\n      position: absolute;\n      top: 50%;\n      right: 0;\n      left: 0;\n      min-height: 44px;\n      content: '';\n      transform: translateY(-50%);\n    }\n  }\n}\n\n.TextInputAction {\n  margin-right: var(--base-size-4);\n  margin-left: var(--base-size-4);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 0;\n}\n\n.ConditionalTooltip {\n  display: inline-block;\n}\n"]}

package/lib/internal/components/TextInputInnerAction.d.ts

@@ -1,21 +0,0 @@
-import type React from 'react';
-import type { IconProps } from '@primer/octicons-react';
-import type { ButtonProps } from '../../Button';
-import type { SxProp } from '../../sx';
-declare const TextInputAction: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "aria-label" | "tooltipDirection"> & {
-    /** @deprecated Text input action buttons should only use icon buttons */
-    children?: React.ReactNode;
-    /** Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies. */
-    "aria-label"?: string;
-    /** Position of tooltip. If no position is passed or defaults to "n" */
-    tooltipDirection?: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
-    /** The icon to render inside the button */
-    icon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>;
-    /**
-     * @deprecated Text input action buttons should only use the 'invisible' button variant
-     * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
-     */
-    variant?: ButtonProps["variant"];
-} & SxProp & React.RefAttributes<HTMLButtonElement>>;
-export default TextInputAction;
-//# sourceMappingURL=TextInputInnerAction.d.ts.map

package/lib/internal/components/TextInputInnerAction.js

@@ -1,191 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var React = require('react');
-var IconButton = require('../../Button/IconButton.js');
-var Button = require('../../Button/Button.js');
-var clsx = require('clsx');
-var TextInputInnerAction_module = require('./TextInputInnerAction.module.css.js');
-var jsxRuntime = require('react/jsx-runtime');
-var Tooltip = require('../../TooltipV2/Tooltip.js');
-
-const ConditionalTooltip = t0 => {
-  const $ = reactCompilerRuntime.c(6);
-  const {
-    "aria-label": ariaLabel,
-    children,
-    tooltipDirection
-  } = t0;
-  let t1;
-  if ($[0] !== ariaLabel || $[1] !== children || $[2] !== tooltipDirection) {
-    t1 = ariaLabel ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
-      text: ariaLabel,
-      direction: tooltipDirection,
-      className: TextInputInnerAction_module.ConditionalTooltip,
-      children: children
-    }) : children;
-    $[0] = ariaLabel;
-    $[1] = children;
-    $[2] = tooltipDirection;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  let t2;
-  if ($[4] !== t1) {
-    t2 = /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: t1
-    });
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  return t2;
-};
-const TextInputAction = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = reactCompilerRuntime.c(32);
-  let ariaLabel;
-  let ariaLabelledBy;
-  let children;
-  let className;
-  let icon;
-  let rest;
-  let sxProp;
-  let t1;
-  let tooltipDirection;
-  if ($[0] !== t0) {
-    ({
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      tooltipDirection,
-      children,
-      icon,
-      sx: sxProp,
-      className,
-      variant: t1,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = ariaLabel;
-    $[2] = ariaLabelledBy;
-    $[3] = children;
-    $[4] = className;
-    $[5] = icon;
-    $[6] = rest;
-    $[7] = sxProp;
-    $[8] = t1;
-    $[9] = tooltipDirection;
-  } else {
-    ariaLabel = $[1];
-    ariaLabelledBy = $[2];
-    children = $[3];
-    className = $[4];
-    icon = $[5];
-    rest = $[6];
-    sxProp = $[7];
-    t1 = $[8];
-    tooltipDirection = $[9];
-  }
-  const variant = t1 === undefined ? "invisible" : t1;
-  const t2 = variant === "invisible" && TextInputInnerAction_module.Invisible;
-  let t3;
-  if ($[10] !== className || $[11] !== t2) {
-    t3 = clsx.clsx(t2, className);
-    $[10] = className;
-    $[11] = t2;
-    $[12] = t3;
-  } else {
-    t3 = $[12];
-  }
-  let t4;
-  if ($[13] !== sxProp) {
-    t4 = sxProp || {};
-    $[13] = sxProp;
-    $[14] = t4;
-  } else {
-    t4 = $[14];
-  }
-  let t5;
-  if ($[15] !== t3 || $[16] !== t4) {
-    t5 = {
-      className: t3,
-      sx: t4
-    };
-    $[15] = t3;
-    $[16] = t4;
-    $[17] = t5;
-  } else {
-    t5 = $[17];
-  }
-  const styleProps = t5;
-  if (icon && !ariaLabel || !children && !ariaLabel) {
-    console.warn("Use the `aria-label` prop to provide an accessible label for assistive technology");
-  }
-  let t6;
-  if ($[18] !== ariaLabel || $[19] !== ariaLabelledBy) {
-    t6 = ariaLabel ? {
-      "aria-label": ariaLabel
-    } : ariaLabelledBy ? {
-      "aria-labelledby": ariaLabelledBy
-    } : {
-      "aria-label": ""
-    };
-    $[18] = ariaLabel;
-    $[19] = ariaLabelledBy;
-    $[20] = t6;
-  } else {
-    t6 = $[20];
-  }
-  const accessibleLabel = t6;
-  let t7;
-  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = clsx.clsx("TextInput-action", TextInputInnerAction_module.TextInputAction);
-    $[21] = t7;
-  } else {
-    t7 = $[21];
-  }
-  let t8;
-  if ($[22] !== accessibleLabel || $[23] !== ariaLabel || $[24] !== children || $[25] !== forwardedRef || $[26] !== icon || $[27] !== rest || $[28] !== styleProps || $[29] !== tooltipDirection || $[30] !== variant) {
-    var _tooltipDirection;
-    t8 = /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: t7,
-      children: icon && !children && ariaLabel ? /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
-        ...accessibleLabel,
-        tooltipDirection: (_tooltipDirection = tooltipDirection) !== null && _tooltipDirection !== void 0 ? _tooltipDirection : "s",
-        variant: variant,
-        type: "button",
-        icon: icon,
-        size: "small",
-        ...styleProps,
-        ...rest,
-        ref: forwardedRef
-      }) : /*#__PURE__*/jsxRuntime.jsx(ConditionalTooltip, {
-        "aria-label": ariaLabel,
-        children: /*#__PURE__*/jsxRuntime.jsx(Button.ButtonComponent, {
-          variant: variant,
-          type: "button",
-          ...styleProps,
-          ...rest,
-          ref: forwardedRef,
-          children: children
-        })
-      })
-    });
-    $[22] = accessibleLabel;
-    $[23] = ariaLabel;
-    $[24] = children;
-    $[25] = forwardedRef;
-    $[26] = icon;
-    $[27] = rest;
-    $[28] = styleProps;
-    $[29] = tooltipDirection;
-    $[30] = variant;
-    $[31] = t8;
-  } else {
-    t8 = $[31];
-  }
-  return t8;
-});
-
-module.exports = TextInputAction;

package/lib/internal/components/TextInputInnerAction.module.css.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./TextInputInnerAction-477e9b99.css');
-
-var styles = {"Invisible":"prc-components-Invisible-uIWry","TextInputAction":"prc-components-TextInputAction-YT3YI","ConditionalTooltip":"prc-components-ConditionalTooltip-6cihH"};
-
-module.exports = styles;

package/lib/internal/components/TextInputInnerVisualSlot-4a14b955.css

@@ -1,2 +0,0 @@
-.prc-components-Spinner-Azb7p{height:100%;max-width:100%;position:absolute;right:0;top:0}.prc-components-SpinnerLeading-s-LyA{left:0}.prc-components-SpinnerHidden-GG1PJ{visibility:hidden}.prc-components-SpinnerVisible-w5g8l{visibility:visible}.prc-components-Box-QK3tG{display:flex;position:relative}
-/*# sourceMappingURL=TextInputInnerVisualSlot-4a14b955.css.map */

package/lib/internal/components/TextInputInnerVisualSlot-4a14b955.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/internal/components/TextInputInnerVisualSlot.module.css"],"names":[],"mappings":"AAAA,8BAKE,WAAY,CADZ,cAAe,CAHf,iBAAkB,CAElB,OAAQ,CADR,KAIF,CAEA,qCACE,MACF,CAEA,oCACE,iBACF,CAEA,qCACE,kBACF,CAEA,0BAEE,YAAa,CADb,iBAEF","file":"TextInputInnerVisualSlot-4a14b955.css","sourcesContent":[".Spinner {\n  position: absolute;\n  top: 0;\n  right: 0;\n  max-width: 100%;\n  height: 100%;\n}\n\n.SpinnerLeading {\n  left: 0;\n}\n\n.SpinnerHidden {\n  visibility: hidden;\n}\n\n.SpinnerVisible {\n  visibility: visible;\n}\n\n.Box {\n  position: relative;\n  display: flex;\n}\n"]}

package/lib/internal/components/TextInputInnerVisualSlot.d.ts

@@ -1,14 +0,0 @@
-import type React from 'react';
-import type { TextInputNonPassthroughProps } from '../../TextInput';
-declare const TextInputInnerVisualSlot: React.FC<React.PropsWithChildren<{
-    /** Whether the input is expected to ever show a loading indicator */
-    hasLoadingIndicator: boolean;
-    /** Whether the to show the loading indicator */
-    showLoadingIndicator: TextInputNonPassthroughProps['loading'];
-    /** Which side of this visual is being rendered */
-    visualPosition: 'leading' | 'trailing';
-    /** Used to provide a reference for usage with `aria-describedby` */
-    id?: string;
-}>>;
-export default TextInputInnerVisualSlot;
-//# sourceMappingURL=TextInputInnerVisualSlot.d.ts.map

package/lib/internal/components/TextInputInnerVisualSlot.js

@@ -1,98 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var clsx = require('clsx');
-var TextInputInnerVisualSlot_module = require('./TextInputInnerVisualSlot.module.css.js');
-var jsxRuntime = require('react/jsx-runtime');
-var Spinner = require('../../Spinner/Spinner.js');
-
-const TextInputInnerVisualSlot = t0 => {
-  const $ = reactCompilerRuntime.c(17);
-  const {
-    children,
-    hasLoadingIndicator,
-    showLoadingIndicator,
-    visualPosition,
-    id
-  } = t0;
-  const isLeading = visualPosition === "leading";
-  if (!children && !hasLoadingIndicator || isLeading && !children && !showLoadingIndicator) {
-    return null;
-  }
-  if (!hasLoadingIndicator) {
-    let t1;
-    if ($[0] !== children || $[1] !== id) {
-      t1 = /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "TextInput-icon",
-        id: id,
-        "aria-hidden": "true",
-        children: children
-      });
-      $[0] = children;
-      $[1] = id;
-      $[2] = t1;
-    } else {
-      t1 = $[2];
-    }
-    return t1;
-  }
-  let t1;
-  if ($[3] !== children || $[4] !== showLoadingIndicator) {
-    t1 = children && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: clsx.clsx(showLoadingIndicator ? TextInputInnerVisualSlot_module.SpinnerHidden : TextInputInnerVisualSlot_module.SpinnerVisible),
-      children: children
-    });
-    $[3] = children;
-    $[4] = showLoadingIndicator;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  const t2 = showLoadingIndicator ? TextInputInnerVisualSlot_module.SpinnerVisible : TextInputInnerVisualSlot_module.SpinnerHidden;
-  const t3 = children && TextInputInnerVisualSlot_module.Spinner;
-  const t4 = children && isLeading && TextInputInnerVisualSlot_module.SpinnerLeading;
-  let t5;
-  if ($[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
-    t5 = clsx.clsx(t2, t3, t4);
-    $[6] = t2;
-    $[7] = t3;
-    $[8] = t4;
-    $[9] = t5;
-  } else {
-    t5 = $[9];
-  }
-  const t6 = children ? undefined : "small";
-  let t7;
-  if ($[10] !== t5 || $[11] !== t6) {
-    t7 = /*#__PURE__*/jsxRuntime.jsx(Spinner, {
-      srText: null,
-      className: t5,
-      size: t6
-    });
-    $[10] = t5;
-    $[11] = t6;
-    $[12] = t7;
-  } else {
-    t7 = $[12];
-  }
-  let t8;
-  if ($[13] !== id || $[14] !== t1 || $[15] !== t7) {
-    t8 = /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "TextInput-icon",
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: TextInputInnerVisualSlot_module.Box,
-        id: id,
-        children: [t1, t7]
-      })
-    });
-    $[13] = id;
-    $[14] = t1;
-    $[15] = t7;
-    $[16] = t8;
-  } else {
-    t8 = $[16];
-  }
-  return t8;
-};
-
-module.exports = TextInputInnerVisualSlot;

package/lib/internal/components/TextInputInnerVisualSlot.module.css.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./TextInputInnerVisualSlot-4a14b955.css');
-
-var styles = {"Spinner":"prc-components-Spinner-Azb7p","SpinnerLeading":"prc-components-SpinnerLeading-s-LyA","SpinnerHidden":"prc-components-SpinnerHidden-GG1PJ","SpinnerVisible":"prc-components-SpinnerVisible-w5g8l","Box":"prc-components-Box-QK3tG"};
-
-module.exports = styles;

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

@@ -1,2 +0,0 @@
-.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-889df5d3.css.map

@@ -1 +0,0 @@
-{"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/internal/components/TextInputWrapper.d.ts

@@ -1,59 +0,0 @@
-import React, { type ComponentProps } from 'react';
-import { type ResponsiveValue } from 'styled-system';
-import type { SxProp } from '../../sx';
-import type { FormValidationStatus } from '../../utils/types/FormValidationStatus';
-export type TextInputSizes = 'small' | 'medium' | 'large';
-export declare const TextInputBaseWrapper: React.ForwardRefExoticComponent<{
-    hasLeadingVisual?: boolean;
-    hasTrailingVisual?: boolean;
-} & {
-    block?: boolean;
-    contrast?: boolean;
-    disabled?: boolean;
-    hasTrailingAction?: boolean;
-    isInputFocused?: boolean;
-    monospace?: boolean;
-    validationStatus?: FormValidationStatus;
-    /** @deprecated Use `size` prop instead */
-    variant?: TextInputSizes;
-    size?: TextInputSizes;
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: React.MouseEventHandler;
-    children?: React.ReactNode;
-    /** @deprecated Update `width` using CSS modules or style. */
-    width?: string | number | ResponsiveValue<string | number>;
-    /** @deprecated Update `min-width` using CSS modules or style. */
-    minWidth?: string | number | ResponsiveValue<string | number>;
-    /** @deprecated Update `max-width` using CSS modules or style. */
-    maxWidth?: string | number | ResponsiveValue<string | number>;
-} & SxProp & React.RefAttributes<HTMLElement>>;
-export declare const TextInputWrapper: React.ForwardRefExoticComponent<Omit<{
-    hasLeadingVisual?: boolean;
-    hasTrailingVisual?: boolean;
-} & {
-    block?: boolean;
-    contrast?: boolean;
-    disabled?: boolean;
-    hasTrailingAction?: boolean;
-    isInputFocused?: boolean;
-    monospace?: boolean;
-    validationStatus?: FormValidationStatus;
-    /** @deprecated Use `size` prop instead */
-    variant?: TextInputSizes;
-    size?: TextInputSizes;
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: React.MouseEventHandler;
-    children?: React.ReactNode;
-    /** @deprecated Update `width` using CSS modules or style. */
-    width?: string | number | ResponsiveValue<string | number>;
-    /** @deprecated Update `min-width` using CSS modules or style. */
-    minWidth?: string | number | ResponsiveValue<string | number>;
-    /** @deprecated Update `max-width` using CSS modules or style. */
-    maxWidth?: string | number | ResponsiveValue<string | number>;
-} & SxProp & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-export type StyledBaseWrapperProps = ComponentProps<typeof TextInputBaseWrapper>;
-export type StyledWrapperProps = ComponentProps<typeof TextInputWrapper>;
-export default TextInputWrapper;
-//# sourceMappingURL=TextInputWrapper.d.ts.map