@transferwise/components 45.17.1 → 45.19.0

package/src/inputs/SelectInput.story.tsx

@@ -1,13 +1,20 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Calendar } from '@transferwise/icons';
+import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
+import classNames from 'classnames';
 import { useState } from 'react';
 
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import Modal from '../modal';
+import { within, userEvent } from '../test-utils';
 
-import { SelectInput, type SelectInputItem, SelectInputOptionContent } from './SelectInput';
+import {
+  SelectInput,
+  type SelectInputItem,
+  SelectInputOptionContent,
+  SelectInputTriggerButton,
+} from './SelectInput';
 
 export default {
   component: SelectInput,
@@ -38,6 +45,7 @@ export const Basic: StoryObj<{
   clearable: boolean;
   invalid: boolean;
   disabled: boolean;
+  size: 'md' | 'lg';
   onChange: (value: TestMonth | null) => void;
   onClear: () => void;
 }> = {
@@ -46,6 +54,7 @@ export const Basic: StoryObj<{
     filterPlaceholder,
     clearable,
     disabled,
+    size,
     onChange,
     onClear,
   }) {
@@ -78,16 +87,17 @@ export const Basic: StoryObj<{
             ])
             .slice(0, -1)}
           value={selectedMonth}
-          renderValue={(month, compact) => (
+          renderValue={(month, withinTrigger) => (
             <SelectInputOptionContent
               title={month.name}
               note="Note"
-              description={compact ? undefined : `Month #${month.id}`}
+              description={withinTrigger ? undefined : `Month #${month.id}`}
               icon={<Calendar size={24} />}
             />
           )}
           filterable={filterable}
           filterPlaceholder={filterPlaceholder}
+          size={size}
           disabled={disabled}
           onChange={(month) => {
             setSelectedMonth(month);
@@ -111,6 +121,7 @@ export const Basic: StoryObj<{
     clearable: true,
     invalid: false,
     disabled: false,
+    size: 'md',
   },
   argTypes: {
     onChange: {
@@ -137,7 +148,7 @@ export const Months: StoryObj<{
   onClear: () => void;
 }> = {
   render: function Story({ onChange, onClear }) {
-    const [selectedMonth, setSelectedMonth] = useState<Month | null>(null);
+    const [selectedMonth, setSelectedMonth] = useState<Month | null>(months[0]);
 
     return (
       <div className="d-flex flex-column">
@@ -171,6 +182,11 @@ export const Months: StoryObj<{
   },
 };
 
+Months.play = ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  userEvent.click(canvas.getByText('January'));
+};
+
 interface Currency {
   code: string;
   name: string;
@@ -226,36 +242,35 @@ export const Currencies: StoryObj<{
     const [selectedCurrency, setSelectedCurrency] = useState<Currency>(popularCurrencies[0]);
 
     return (
-      <div className="d-flex flex-column">
-        <SelectInput
-          items={[
-            {
-              type: 'group',
-              label: 'Popular currencies',
-              options: popularCurrencies.map((currency) => currencyOption(currency)),
-            },
-            {
-              type: 'group',
-              label: 'All currencies',
-              options: allCurrencies.map((currency) => currencyOption(currency)),
-            },
-          ]}
-          value={selectedCurrency}
-          renderValue={(currency) => (
-            <SelectInputOptionContent
-              title={currency.code}
-              note={currency.name}
-              icon={<Flag code={currency.code} intrinsicSize={24} />}
-            />
-          )}
-          filterable
-          filterPlaceholder="Type a currency / country"
-          onChange={(currency) => {
-            setSelectedCurrency(currency);
-            onChange(currency);
-          }}
-        />
-      </div>
+      <SelectInput
+        items={[
+          {
+            type: 'group',
+            label: 'Popular currencies',
+            options: popularCurrencies.map((currency) => currencyOption(currency)),
+          },
+          {
+            type: 'group',
+            label: 'All currencies',
+            options: allCurrencies.map((currency) => currencyOption(currency)),
+          },
+        ]}
+        value={selectedCurrency}
+        renderValue={(currency, withinTrigger) => (
+          <SelectInputOptionContent
+            title={currency.code}
+            note={withinTrigger ? undefined : currency.name}
+            icon={<Flag code={currency.code} intrinsicSize={24} />}
+          />
+        )}
+        filterable
+        filterPlaceholder="Type a currency / country"
+        size="lg"
+        onChange={(currency) => {
+          setSelectedCurrency(currency);
+          onChange(currency);
+        }}
+      />
     );
   },
   argTypes: {
@@ -265,6 +280,41 @@ export const Currencies: StoryObj<{
   },
 };
 
+export const CustomTrigger: StoryObj = {
+  render: function Story() {
+    return (
+      <div>
+        <SelectInput
+          placeholder="Month"
+          items={months.map((month) => ({
+            type: 'option',
+            value: month,
+          }))}
+          renderValue={(month, withinTrigger) =>
+            withinTrigger ? month.name : <SelectInputOptionContent title={month.name} />
+          }
+          renderTrigger={({ content, className }) => (
+            <SelectInputTriggerButton
+              className={classNames(
+                className,
+                'btn-unstyled np-text-link-large align-items-center',
+              )}
+              style={{ display: 'inline-flex', columnGap: '0.25rem' }}
+            >
+              {content}
+              <ChevronDown size={16} />
+            </SelectInputTriggerButton>
+          )}
+        />
+      </div>
+    );
+  },
+  play: ({ canvasElement }) => {
+    const triggerButton = within(canvasElement).getByRole('button');
+    userEvent.click(triggerButton);
+  },
+};
+
 export const WithinDrawer: StoryObj<{
   onChange: (value: Currency) => void;
 }> = {

package/src/inputs/SelectInput.tsx

@@ -2,12 +2,14 @@ import { Listbox as ListboxBase } from '@headlessui/react';
 import { useId } from '@radix-ui/react-id';
 import { Check, ChevronDown, Cross } from '@transferwise/icons';
 import classNames from 'classnames';
-import { createContext, useState, useRef, forwardRef, useEffect, useMemo, useContext } from 'react';
+import mergeProps from 'merge-props';
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import mergeRefs from 'react-merge-refs';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
+import { PolymorphicWithOverrides } from '../common/polymorphicWithOverrides/PolymorphicWithOverrides';
 import { Breakpoint } from '../common/propsValues/breakpoint';
 import messages from '../dateLookup/dateTrigger/DateTrigger.messages';
 import { wrapInFragment } from '../utilities/wrapInFragment';
@@ -15,7 +17,7 @@ import { wrapInFragment } from '../utilities/wrapInFragment';
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import { BottomSheet } from './_BottomSheet';
-import { ButtonInput, type ButtonInputProps } from './_ButtonInput';
+import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
 
 function searchableString(value: string) {
@@ -37,23 +39,27 @@ function inferSearchableStrings(value: unknown) {
 }
 
 const SelectInputHasValueContext = createContext(false);
-
-const SelectInputOptionContentCompactContext = createContext(false);
-
-interface SelectInputOptionItem<T = string> {
+const SelectInputTriggerButtonPropsContext = createContext<{
+  ref?: React.ForwardedRef<HTMLButtonElement>;
+  onClick?: () => void;
+  [key: string]: unknown;
+}>({});
+const SelectInputOptionContentWithinTriggerContext = createContext(false);
+
+export interface SelectInputOptionItem<T = string> {
   type: 'option';
   value: T;
   filterMatchers?: readonly string[];
   disabled?: boolean;
 }
 
-interface SelectInputGroupItem<T = string> {
+export interface SelectInputGroupItem<T = string> {
   type: 'group';
   label: string;
   options: readonly SelectInputOptionItem<T>[];
 }
 
-interface SelectInputSeparatorItem {
+export interface SelectInputSeparatorItem {
   type: 'separator';
 }
 
@@ -106,35 +112,95 @@ export interface SelectInputProps<T = string> {
   items: readonly SelectInputItem<NonNullable<T>>[];
   defaultValue?: T;
   value?: T;
-  renderValue?: (value: NonNullable<T>, compact: boolean) => React.ReactNode;
   compareValues?:
     | (keyof NonNullable<T> & string)
     | ((a: T | undefined, b: T | undefined) => boolean);
+  renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
+  renderTrigger?: (args: {
+    content: React.ReactNode;
+    placeholderShown: boolean;
+    clear: (() => void) | undefined;
+    disabled: boolean;
+    size: 'md' | 'lg';
+    className: string | undefined;
+  }) => React.ReactNode;
   filterable?: boolean;
   filterPlaceholder?: string;
   disabled?: boolean;
+  size?: 'md' | 'lg';
   className?: string;
   onChange?: (value: T) => void;
   onClear?: () => void;
 }
 
-export function SelectInput<T>({
+const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, size, className }) => (
+  <InputGroup
+    addonEnd={{
+      content: (
+        <span className={classNames('np-select-input-addon-container', disabled && 'disabled')}>
+          {clear != null && !placeholderShown ? (
+            <>
+              <SelectInputClearButton
+                onClick={(event) => {
+                  event.preventDefault();
+                  clear();
+                }}
+              />
+              <span className="np-select-input-addon-separator" />
+            </>
+          ) : null}
+
+          <span className="np-select-input-addon">
+            <ChevronDown size={16} />
+          </span>
+        </span>
+      ),
+      padding: 'sm',
+    }}
+    disabled={disabled}
+    className={className}
+  >
+    <SelectInputTriggerButton as={ButtonInput} size={size}>
+      {placeholderShown ? <span className="np-select-input-placeholder"> {content}</span> : content}
+    </SelectInputTriggerButton>
+  </InputGroup>
+)) satisfies SelectInputProps['renderTrigger'];
+
+interface SelectInputClearButtonProps
+  extends Pick<React.ComponentPropsWithoutRef<'button'>, 'className' | 'onClick'> {}
+
+function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
+  const intl = useIntl();
+
+  return (
+    <button
+      type="button"
+      aria-label={intl.formatMessage(messages.ariaLabel)}
+      className={classNames(className, 'np-select-input-addon np-select-input-addon--interactive')}
+      onClick={onClick}
+    >
+      <Cross size={16} />
+    </button>
+  );
+}
+
+export function SelectInput<T = string>({
   name,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
-  renderValue = wrapInFragment,
   compareValues,
+  renderValue = wrapInFragment,
+  renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
   disabled,
+  size = 'md',
   className,
   onChange,
   onClear,
 }: SelectInputProps<T>) {
-  const intl = useIntl();
-
   const [open, setOpen] = useState(false);
 
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -162,95 +228,86 @@ export function SelectInput<T>({
     >
       {({ disabled: uiDisabled, value }) => (
         <SelectInputHasValueContext.Provider value={value != null}>
-          <InputGroup
-            addonEnd={{
-              content: (
-                <span
-                  className={classNames(
-                    'np-select-input-addon-container',
-                    uiDisabled && 'disabled',
-                  )}
-                >
-                  {onClear != null && value != null ? (
-                    <>
-                      <button
-                        type="button"
-                        aria-label={intl.formatMessage(messages.ariaLabel)}
-                        disabled={uiDisabled}
-                        className="np-select-input-addon np-select-input-addon--interactive"
-                        onClick={(event) => {
-                          event.preventDefault();
+          <OptionsOverlay
+            open={open}
+            renderTrigger={({ ref, getInteractionProps }) => (
+              <SelectInputTriggerButtonPropsContext.Provider
+                // eslint-disable-next-line react/jsx-no-constructed-context-values
+                value={{
+                  ref: mergeRefs([ref, triggerRef]),
+                  ...mergeProps(
+                    {
+                      onClick: () => {
+                        setOpen((prev) => !prev);
+                      },
+                    },
+                    getInteractionProps(),
+                  ),
+                }}
+              >
+                {renderTrigger({
+                  content:
+                    value != null ? (
+                      <SelectInputOptionContentWithinTriggerContext.Provider value>
+                        {renderValue(value, true)}
+                      </SelectInputOptionContentWithinTriggerContext.Provider>
+                    ) : (
+                      placeholder
+                    ),
+                  placeholderShown: value == null,
+                  clear:
+                    onClear != null
+                      ? () => {
                           onClear();
                           triggerRef.current?.focus({ preventScroll: true });
-                        }}
-                      >
-                        <Cross size={16} />
-                      </button>
-                      <span className="np-select-input-addon-separator" />
-                    </>
-                  ) : null}
-
-                  <span className="np-select-input-addon">
-                    <ChevronDown size={16} />
-                  </span>
-                </span>
-              ),
-              padding: 'sm',
+                        }
+                      : undefined,
+                  disabled: uiDisabled,
+                  size,
+                  className,
+                })}
+              </SelectInputTriggerButtonPropsContext.Provider>
+            )}
+            initialFocusRef={controllerRef}
+            padding="none"
+            onClose={() => {
+              setOpen(false);
             }}
-            className={className}
           >
-            <OptionsOverlay
-              open={open}
-              renderTrigger={({ ref, getInteractionProps }) => (
-                <ListboxBase.Button
-                  ref={mergeRefs([ref, triggerRef])}
-                  as={SelectInputButton}
-                  overrides={getInteractionProps()}
-                  onClick={() => {
-                    setOpen((prev) => !prev);
-                  }}
-                >
-                  {value != null ? (
-                    <SelectInputOptionContentCompactContext.Provider value>
-                      {renderValue(value, true)}
-                    </SelectInputOptionContentCompactContext.Provider>
-                  ) : (
-                    <span className="np-select-input-placeholder">{placeholder}</span>
-                  )}
-                </ListboxBase.Button>
-              )}
-              initialFocusRef={controllerRef}
-              padding="none"
-              onClose={() => {
-                setOpen(false);
-              }}
-            >
-              <SelectInputOptions
-                items={items}
-                renderValue={renderValue}
-                filterable={filterable}
-                filterPlaceholder={filterPlaceholder}
-                searchInputRef={searchInputRef}
-                listboxRef={listboxRef}
-              />
-            </OptionsOverlay>
-          </InputGroup>
+            <SelectInputOptions
+              items={items}
+              renderValue={renderValue}
+              filterable={filterable}
+              filterPlaceholder={filterPlaceholder}
+              searchInputRef={searchInputRef}
+              listboxRef={listboxRef}
+            />
+          </OptionsOverlay>
         </SelectInputHasValueContext.Provider>
       )}
     </ListboxBase>
   );
 }
 
-interface SelectInputButtonProps extends ButtonInputProps {
-  overrides?: { [key: string]: unknown };
-}
+export type SelectInputTriggerButtonProps<T extends React.ComponentType | 'button' = 'button'> = {
+  as?: T;
+} & React.ComponentPropsWithoutRef<T>;
 
-const SelectInputButton = forwardRef(function SelectInputButton(
-  { overrides, ...restProps }: SelectInputButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  return <ButtonInput ref={ref} {...restProps} {...overrides} />;
-});
+export function SelectInputTriggerButton<T extends React.ComponentType | 'button' = 'button'>({
+  as = 'button' as T,
+  ...restProps
+}: SelectInputTriggerButtonProps<T>) {
+  const { ref, onClick, ...interactionProps } = useContext(SelectInputTriggerButtonPropsContext);
+
+  return (
+    <ListboxBase.Button
+      ref={ref}
+      as={PolymorphicWithOverrides}
+      __overrides={{ as, ...interactionProps }}
+      {...mergeProps({ onClick }, restProps)}
+    />
+  );
+}
 
 interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {
   onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;
@@ -294,7 +351,7 @@ interface SelectInputOptionsProps<T = string>
   listboxRef: React.RefObject<HTMLDivElement>;
 }
 
-function SelectInputOptions<T>({
+function SelectInputOptions<T = string>({
   items,
   renderValue = wrapInFragment,
   filterable,
@@ -395,7 +452,11 @@ interface SelectInputItemViewProps<
   needle: string | null;
 }
 
-function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemViewProps<T>) {
+function SelectInputItemView<T = string>({
+  item,
+  renderValue,
+  needle,
+}: SelectInputItemViewProps<T>) {
   switch (item.type) {
     case 'option': {
       if (
@@ -418,7 +479,7 @@ function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemVi
     }
     case 'separator': {
       if (needle == null) {
-        return <hr className="np-select-input-separator-item" aria-hidden />;
+        return <hr className="np-select-input-separator-item" />;
       }
       break;
     }
@@ -429,7 +490,7 @@ function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemVi
 interface SelectInputGroupItemViewProps<T = string>
   extends SelectInputItemViewProps<T, SelectInputGroupItem<T | undefined>> {}
 
-function SelectInputGroupItemView<T>({
+function SelectInputGroupItemView<T = string>({
   item,
   renderValue,
   needle,
@@ -472,7 +533,7 @@ interface SelectInputOptionProps<T = string> {
   children?: React.ReactNode;
 }
 
-function SelectInputOption<T>({ value, disabled, children }: SelectInputOptionProps<T>) {
+function SelectInputOption<T = string>({ value, disabled, children }: SelectInputOptionProps<T>) {
   const parentHasValue = useContext(SelectInputHasValueContext);
 
   // Avoid flash during exit transition
@@ -483,23 +544,27 @@ function SelectInputOption<T>({ value, disabled, children }: SelectInputOptionPr
       as="div"
       value={value}
       disabled={disabled}
-      className={({ active, disabled: uiDisabled }) =>
+      className={({ active, selected, disabled: uiDisabled }) =>
         classNames(
           'np-select-input-option-container np-text-body-large',
           active && 'np-select-input-option-container--active',
+          selected && 'np-select-input-option-container--selected',
           uiDisabled && 'np-select-input-option-container--disabled',
         )
       }
     >
       {({ selected }) => (
         <>
+          <div className="np-select-input-option">{children}</div>
           {cachedParentHasValue ? (
             <Check
-              size={16}
-              className={classNames(!selected && 'np-select-input-option-check--not-selected')}
+              size={24}
+              className={classNames(
+                'np-select-input-option-check',
+                !selected && 'np-select-input-option-check--not-selected',
+              )}
             />
           ) : null}
-          <div className="np-select-input-option">{children}</div>
         </>
       )}
     </ListboxBase.Option>
@@ -519,15 +584,20 @@ export function SelectInputOptionContent({
   description,
   icon,
 }: SelectInputOptionContentProps) {
-  const compact = useContext(SelectInputOptionContentCompactContext);
+  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
 
   return (
-    <div className="np-select-input-option-content-container np-text-body-large">
+    <div
+      className={classNames(
+        'np-select-input-option-content-container',
+        (note || description) && 'np-text-body-large',
+      )}
+    >
       {icon ? (
         <div
           className={classNames(
             'np-select-input-option-content-icon',
-            !compact && 'np-select-input-option-content-icon--not-compact',
+            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
           )}
         >
           {icon}
@@ -538,10 +608,10 @@ export function SelectInputOptionContent({
         <div
           className={classNames(
             'np-select-input-option-content-text-line-1',
-            compact && 'np-select-input-option-content-text-compact',
+            withinTrigger && 'np-select-input-option-content-text-within-trigger',
           )}
         >
-          <h4 className="d-inline np-text-body-large">{title}</h4>
+          <h4 className="np-select-input-option-content-text-primary d-inline">{title}</h4>
           {note ? (
             <span className="np-select-input-option-content-text-secondary np-text-body-default">
               {note}
@@ -553,7 +623,7 @@ export function SelectInputOptionContent({
           <div
             className={classNames(
               'np-select-input-option-content-text-secondary np-text-body-default',
-              compact && 'np-select-input-option-content-text-compact',
+              withinTrigger && 'np-select-input-option-content-text-within-trigger',
             )}
           >
             {description}

package/src/inputs/TextArea.css

@@ -1 +1 @@
-.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-text-area{border-radius:10px!important;border-radius:var(--radius-small)!important;min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}.np-text-area::-moz-placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-text-area::placeholder{color:#768e9c;color:var(--color-content-tertiary)}
+.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{font-size:1rem;font-size:var(--font-size-16);font-weight:400;font-weight:var(--font-weight-regular);letter-spacing:-.011em;line-height:150%;padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{font-size:1rem;font-size:var(--font-size-16);font-size:.875rem;font-size:var(--font-size-14);height:32px!important;height:var(--size-32)!important;letter-spacing:-.006em;line-height:1.5;line-height:var(--line-height-body);line-height:155%}.np-form-control--size-md,.np-form-control--size-sm{font-weight:400;font-weight:var(--font-weight-regular)}.np-form-control--size-md{font-size:1rem;font-size:var(--font-size-16);height:48px!important;height:var(--size-48)!important;letter-spacing:-.011em;line-height:150%}.np-form-control--size-lg{color:#37517e;color:var(--color-content-primary);font-size:1.375rem;font-size:var(--font-size-22);font-weight:600;font-weight:var(--font-weight-semi-bold);height:72px!important;height:var(--size-72)!important;letter-spacing:0;letter-spacing:-.018em;line-height:1.2;line-height:var(--line-height-title);line-height:125%;margin:0}.np-form-control--size-lg+ol:not(.list-unstyled),.np-form-control--size-lg+p,.np-form-control--size-lg+ul:not(.list-unstyled){margin-top:8px;margin-top:var(--size-8)}.np-text-area{border-radius:10px!important;border-radius:var(--radius-small)!important;min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}.np-text-area::-moz-placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-text-area::placeholder{color:#768e9c;color:var(--color-content-tertiary)}