hunk.code_window:   & [data-field-input] :is(input, textarea) {
       border: 0;
       background-color: transparent;
       font-family: inherit;
       flex-grow: 1;
       &:autofill,
       &:autofill:hover,
  
hunk.labels: keep keep keep keep add keep keep keep
hunk.after_edit:     color: var(--color-fg);
  
hunk.file_path: app/client/packages/design-system/widgets/src/styles/src/textInputStyles.ts
hunk.type: add
file: import { css } from "styled-components";
  import type { TextInputProps as HeadlessTextInputProps } from "@design-system/headless";
  
  // NOTE: these input styles are used in text area and text input
  export const textInputStyles = css<HeadlessTextInputProps>`
    & [data-field-input] {
      display: flex;
      align-items: center;
      gap: var(--spacing-1);
      border-radius: var(--border-radius-1);
      box-shadow: 0 0 0 1px var(--color-bd-neutral);
      padding-inline: var(--spacing-2);
      block-size: var(--sizing-8);
    }
  
    & [data-field-input] :is(input, textarea) {
      border: 0;
      background-color: transparent;
      font-family: inherit;
      flex-grow: 1;
  
      &:autofill,
      &:autofill:hover,
      &:autofill:focus,
      &:autofill:active {
        font-size: initial;
      }
  
      &:focus {
        outline: none;
      }
    }
  
    /**
  * ----------------------------------------------------------------------------
  * FOCUSSED
  *-----------------------------------------------------------------------------
  */
    & [data-field-input][data-focused] {
      box-shadow: 0 0 0 2px var(--color-bd-focus);
    }
  
    /**
  * ----------------------------------------------------------------------------
  * ERROR
  *-----------------------------------------------------------------------------
  */
    & [data-field-input][data-invalid] {
      box-shadow: 0 0 0 1px var(--color-bd-negative);
    }
  
    & [data-field-input][data-invalid][data-focused] {
      box-shadow: 0 0 0 2px var(--color-bd-negative);
    }
  
    /**
  * ----------------------------------------------------------------------------
  * ICON
  *-----------------------------------------------------------------------------
  */
    & [data-icon] {
      color: var(--color-fg-neutral);
    }
  
    /**
  * ----------------------------------------------------------------------------
  * DESCRIPTION
  *-----------------------------------------------------------------------------
  */
    & [data-field-description-text] {
      color: var(--color-fg-neutral);
    }
  
    /**
  * ----------------------------------------------------------------------------
  * PLACEHOLDER
  *-----------------------------------------------------------------------------
  */
    & [data-field-input] :is(input, textarea)::placeholder {
      color: var(--color-fg-neutral-subtle);
      opacity: 1;
    }
  
    & [data-field-input] :is(input, textarea):placeholder-shown {
      text-overflow: ellipsis;
    }
  
    /**
  * ----------------------------------------------------------------------------
  * ICON BUTTON ( used in password input type )
  *-----------------------------------------------------------------------------
  */
    & [data-field-input] [data-icon-button] {
      block-size: calc(100% - var(--spacing-1));
    }
  `;
  