@primer/react 37.29.0-rc.d46ec0131 → 38.0.0-rc.195178541

package/lib-esm/{SkeletonText → experimental/Skeleton}/SkeletonText.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { type HTMLProps } from 'react';
-interface SkeletonTextProps extends Omit<HTMLProps<HTMLElement>, 'size'> {
+type SkeletonTextProps = {
     /** Size of the text that the skeleton is replacing. */
     size?: 'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle';
     /** Number of lines of skeleton text to render. */
@@ -9,8 +9,7 @@ interface SkeletonTextProps extends Omit<HTMLProps<HTMLElement>, 'size'> {
     maxWidth?: React.CSSProperties['maxWidth'];
     /** Class name for custom styling */
     className?: string;
-}
-declare function SkeletonText({ lines, maxWidth, size, className, style, ...rest }: SkeletonTextProps): React.JSX.Element;
-export { SkeletonText };
-export type { SkeletonTextProps };
+} & Omit<HTMLProps<HTMLDivElement>, 'size'>;
+export declare const SkeletonText: React.FC<SkeletonTextProps>;
+export {};
 //# sourceMappingURL=SkeletonText.d.ts.map

package/lib-esm/experimental/Skeleton/SkeletonText.js

@@ -0,0 +1,143 @@
+import { c } from 'react-compiler-runtime';
+import classes from './SkeletonText.module.css.js';
+import { clsx } from 'clsx';
+import '@styled-system/css';
+import merge from 'deepmerge';
+import { SkeletonBox } from '../../Skeleton/SkeletonBox.js';
+import { jsx } from 'react/jsx-runtime';
+
+const SkeletonText = t0 => {
+  const $ = c(32);
+  let className;
+  let maxWidth;
+  let rest;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      lines: t1,
+      maxWidth,
+      size: t2,
+      className,
+      style,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = maxWidth;
+    $[3] = rest;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    className = $[1];
+    maxWidth = $[2];
+    rest = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const lines = t1 === undefined ? 1 : t1;
+  const size = t2 === undefined ? "bodyMedium" : t2;
+  if (lines < 2) {
+    let t3;
+    if ($[7] !== className) {
+      t3 = clsx(className, classes.SkeletonText);
+      $[7] = className;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    const t4 = style;
+    let t5;
+    if ($[9] !== maxWidth || $[10] !== t4) {
+      t5 = merge(t4, {
+        maxWidth
+      });
+      $[9] = maxWidth;
+      $[10] = t4;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
+    }
+    let t6;
+    if ($[12] !== rest || $[13] !== size || $[14] !== t3 || $[15] !== t5) {
+      t6 = /*#__PURE__*/jsx(SkeletonBox, {
+        "data-component": "SkeletonText",
+        "data-text-skeleton-size": size,
+        width: "100%",
+        className: t3,
+        style: t5,
+        ...rest
+      });
+      $[12] = rest;
+      $[13] = size;
+      $[14] = t3;
+      $[15] = t5;
+      $[16] = t6;
+    } else {
+      t6 = $[16];
+    }
+    return t6;
+  } else {
+    const t3 = style;
+    let t4;
+    if ($[17] !== maxWidth || $[18] !== t3) {
+      t4 = merge(t3, {
+        maxWidth
+      });
+      $[17] = maxWidth;
+      $[18] = t3;
+      $[19] = t4;
+    } else {
+      t4 = $[19];
+    }
+    let t5;
+    if ($[20] !== className || $[21] !== lines || $[22] !== rest || $[23] !== size) {
+      let t6;
+      if ($[25] !== className || $[26] !== rest || $[27] !== size) {
+        t6 = (_, index) => /*#__PURE__*/jsx(SkeletonBox, {
+          "data-component": "SkeletonText",
+          "data-in-multiline": "true",
+          "data-text-skeleton-size": size,
+          className: clsx(className, classes.SkeletonText),
+          ...rest
+        }, index);
+        $[25] = className;
+        $[26] = rest;
+        $[27] = size;
+        $[28] = t6;
+      } else {
+        t6 = $[28];
+      }
+      t5 = Array.from({
+        length: lines
+      }, t6);
+      $[20] = className;
+      $[21] = lines;
+      $[22] = rest;
+      $[23] = size;
+      $[24] = t5;
+    } else {
+      t5 = $[24];
+    }
+    let t6;
+    if ($[29] !== t4 || $[30] !== t5) {
+      t6 = /*#__PURE__*/jsx("div", {
+        "data-component": "multilineContainer",
+        className: classes.SkeletonTextWrapper,
+        style: t4,
+        children: t5
+      });
+      $[29] = t4;
+      $[30] = t5;
+      $[31] = t6;
+    } else {
+      t6 = $[31];
+    }
+    return t6;
+  }
+};
+
+export { SkeletonText };

package/lib-esm/experimental/Skeleton/SkeletonText.module.css.js

@@ -0,0 +1,5 @@
+import './SkeletonText-5cf908c1.css';
+
+var classes = {"SkeletonText":"prc-Skeleton-SkeletonText-o0dUS","SkeletonTextWrapper":"prc-Skeleton-SkeletonTextWrapper-QRoBW"};
+
+export { classes as default };

package/lib-esm/experimental/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+export { SkeletonBox } from '../../Skeleton/SkeletonBox';
+export { SkeletonText } from './SkeletonText';
+export { SkeletonAvatar } from './SkeletonAvatar';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/experimental/UnderlinePanels/UnderlinePanels.js

@@ -4,13 +4,14 @@ import { TabContainerElement } from '@github/tab-container-element';
 import { createComponent } from '../../utils/create-component.js';
 import { UnderlineWrapper, UnderlineItemList, UnderlineItem } from '../../internal/components/UnderlineTabbedInterface.js';
 import { invariant } from '../../utils/invariant.js';
+import { defaultSxProp } from '../../utils/defaultSxProp.js';
 import { useResizeObserver } from '../../hooks/useResizeObserver.js';
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js';
 import classes from './UnderlinePanels.module.css.js';
 import { clsx } from 'clsx';
-import { BoxWithFallback } from '../../internal/components/BoxWithFallback.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from '../../hooks/useId.js';
+import Box from '../../Box/Box.js';
 
 const TabContainerComponent = createComponent(TabContainerElement, 'tab-container');
 const UnderlinePanels = ({
@@ -18,6 +19,7 @@ const UnderlinePanels = ({
   'aria-labelledby': ariaLabelledBy,
   children,
   loadingCounters,
+  sx: sxProp = defaultSxProp,
   className,
   ...props
 }) => {
@@ -92,6 +94,7 @@ const UnderlinePanels = ({
       ref: wrapperRef,
       slot: "tablist-wrapper",
       "data-icons-visible": iconsVisible,
+      sx: sxProp,
       className: clsx(className, classes.StyledUnderlineWrapper),
       ...props,
       children: /*#__PURE__*/jsx(UnderlineItemList, {
@@ -106,13 +109,15 @@ const UnderlinePanels = ({
 };
 UnderlinePanels.displayName = "UnderlinePanels";
 const Tab = t0 => {
-  const $ = c(14);
+  const $ = c(16);
   let ariaSelected;
   let onSelect;
   let props;
+  let t1;
   if ($[0] !== t0) {
     ({
       "aria-selected": ariaSelected,
+      sx: t1,
       onSelect,
       ...props
     } = t0);
@@ -120,67 +125,72 @@ const Tab = t0 => {
     $[1] = ariaSelected;
     $[2] = onSelect;
     $[3] = props;
+    $[4] = t1;
   } else {
     ariaSelected = $[1];
     onSelect = $[2];
     props = $[3];
+    t1 = $[4];
   }
-  let t1;
-  if ($[4] !== onSelect) {
-    t1 = event => {
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  let t2;
+  if ($[5] !== onSelect) {
+    t2 = event => {
       if (!event.defaultPrevented && typeof onSelect === "function") {
         onSelect(event);
       }
     };
-    $[4] = onSelect;
-    $[5] = t1;
+    $[5] = onSelect;
+    $[6] = t2;
   } else {
-    t1 = $[5];
+    t2 = $[6];
   }
-  const clickHandler = t1;
-  let t2;
-  if ($[6] !== onSelect) {
-    t2 = event_0 => {
+  const clickHandler = t2;
+  let t3;
+  if ($[7] !== onSelect) {
+    t3 = event_0 => {
       if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") {
         onSelect(event_0);
       }
     };
-    $[6] = onSelect;
-    $[7] = t2;
+    $[7] = onSelect;
+    $[8] = t3;
   } else {
-    t2 = $[7];
+    t3 = $[8];
   }
-  const keyDownHandler = t2;
-  const t3 = ariaSelected ? 0 : -1;
-  let t4;
-  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== props || $[12] !== t3) {
-    t4 = /*#__PURE__*/jsx(UnderlineItem, {
+  const keyDownHandler = t3;
+  const t4 = ariaSelected ? 0 : -1;
+  let t5;
+  if ($[9] !== ariaSelected || $[10] !== clickHandler || $[11] !== keyDownHandler || $[12] !== props || $[13] !== sxProp || $[14] !== t4) {
+    t5 = /*#__PURE__*/jsx(UnderlineItem, {
       as: "button",
       role: "tab",
-      tabIndex: t3,
+      tabIndex: t4,
       "aria-selected": ariaSelected,
+      sx: sxProp,
       type: "button",
       onClick: clickHandler,
       onKeyDown: keyDownHandler,
       ...props
     });
-    $[8] = ariaSelected;
-    $[9] = clickHandler;
-    $[10] = keyDownHandler;
-    $[11] = props;
-    $[12] = t3;
-    $[13] = t4;
+    $[9] = ariaSelected;
+    $[10] = clickHandler;
+    $[11] = keyDownHandler;
+    $[12] = props;
+    $[13] = sxProp;
+    $[14] = t4;
+    $[15] = t5;
   } else {
-    t4 = $[13];
+    t5 = $[15];
   }
-  return t4;
+  return t5;
 };
 Tab.displayName = 'UnderlinePanels.Tab';
 const Panel = props => {
   const $ = c(2);
   let t0;
   if ($[0] !== props) {
-    t0 = /*#__PURE__*/jsx(BoxWithFallback, {
+    t0 = /*#__PURE__*/jsx(Box, {
       as: "div",
       role: "tabpanel",
       ...props

package/lib-esm/experimental/index.d.ts

@@ -33,12 +33,7 @@ export { Announce, AriaStatus, AriaAlert } from '../live-region';
 export type { AnnounceProps, AriaStatusProps, AriaAlertProps } from '../live-region';
 export { UnderlinePanels } from './UnderlinePanels';
 export type { UnderlinePanelsProps, UnderlinePanelsTabProps, UnderlinePanelsPanelProps } from './UnderlinePanels';
-export { SkeletonBox } from '../Skeleton';
-export type { SkeletonBoxProps } from '../Skeleton';
-export { SkeletonText } from '../SkeletonText';
-export type { SkeletonTextProps } from '../SkeletonText';
-export { SkeletonAvatar } from '../SkeletonAvatar';
-export type { SkeletonAvatarProps } from '../SkeletonAvatar';
+export { SkeletonBox, SkeletonText, SkeletonAvatar } from './Skeleton';
 export { FeatureFlags, DefaultFeatureFlags, useFeatureFlag } from '../FeatureFlags';
 export type { FeatureFlagsProps } from '../FeatureFlags';
 export { FilteredActionList } from '../FilteredActionList';

package/lib-esm/experimental/index.js

@@ -17,8 +17,8 @@ export { AriaStatus } from '../live-region/AriaStatus.js';
 export { AriaAlert } from '../live-region/AriaAlert.js';
 export { default as UnderlinePanels } from './UnderlinePanels/UnderlinePanels.js';
 export { SkeletonBox } from '../Skeleton/SkeletonBox.js';
-export { SkeletonText } from '../SkeletonText/SkeletonText.js';
-export { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
+export { SkeletonText } from './Skeleton/SkeletonText.js';
+export { SkeletonAvatar } from './Skeleton/SkeletonAvatar.js';
 export { FeatureFlags } from '../FeatureFlags/FeatureFlags.js';
 export { DefaultFeatureFlags } from '../FeatureFlags/DefaultFeatureFlags.js';
 export { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';

package/lib-esm/internal/components/ButtonReset.d.ts

@@ -1,5 +1,6 @@
+import type { SxProp } from '../../sx';
 /**
  * Provides an unstyled button that can be styled as-needed for components
  */
-export declare const Button: ({ children, className, ...rest }: React.ComponentPropsWithoutRef<"button">) => import("react").JSX.Element;
+export declare const Button: import("styled-components").StyledComponent<"button", any, SxProp, never>;
 //# sourceMappingURL=ButtonReset.d.ts.map

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

@@ -1,52 +1,12 @@
-import { c } from 'react-compiler-runtime';
-import classes from './ButtonReset.module.css.js';
-import { clsx } from 'clsx';
-import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import sx from '../../sx.js';
 
-const Button = t0 => {
-  const $ = c(10);
-  let children;
-  let className;
-  let rest;
-  if ($[0] !== t0) {
-    ({
-      children,
-      className,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = rest;
-  } else {
-    children = $[1];
-    className = $[2];
-    rest = $[3];
-  }
-  let t1;
-  if ($[4] !== className) {
-    t1 = clsx(className, classes.ButtonReset);
-    $[4] = className;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  let t2;
-  if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
-    t2 = /*#__PURE__*/jsx("button", {
-      className: t1,
-      type: "button",
-      ...rest,
-      children: children
-    });
-    $[6] = children;
-    $[7] = rest;
-    $[8] = t1;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
-  }
-  return t2;
-};
+/**
+ * Provides an unstyled button that can be styled as-needed for components
+ */
+const Button = styled.button.withConfig({
+  displayName: "ButtonReset__Button",
+  componentId: "sc-1yqlmwf-0"
+})(["padding:0;border:0;margin:0;display:inline-flex;padding:0;border:0;appearance:none;background:none;cursor:pointer;text-align:start;font:inherit;color:inherit;align-items:center;&::-moz-focus-inner{border:0;}", ""], sx);
 
 export { Button };

package/lib-esm/internal/components/{TextInputWrapper-889df5d3.css → TextInputWrapper-ca608f70.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-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 */
+.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 */

package/lib-esm/internal/components/{TextInputWrapper-889df5d3.css.map → TextInputWrapper-ca608f70.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,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"]}
+{"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"]}

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

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