@react-spectrum/autocomplete 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/MobileSearchAutocomplete.tsx

@@ -19,8 +19,8 @@ import {ComboBoxState, useComboBoxState} from '@react-stately/combobox';
 import {DismissButton} from '@react-aria/overlays';
 import {Field} from '@react-spectrum/label';
 import {FocusableRef, ValidationState} from '@react-types/shared';
-import {FocusRing, FocusScope} from '@react-aria/focus';
 import {focusSafely} from '@react-aria/focus';
+import {FocusScope, useFocusRing} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
@@ -38,7 +38,7 @@ import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.
 import {Tray} from '@react-spectrum/overlays';
 import {useButton} from '@react-aria/button';
 import {useDialog} from '@react-aria/dialog';
-import {useFilter, useMessageFormatter} from '@react-aria/i18n';
+import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLabel} from '@react-aria/label';
 import {useOverlayTrigger} from '@react-aria/overlays';
@@ -70,7 +70,7 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
     selectedKey: undefined,
     defaultSelectedKey: undefined
   });
-  
+
   let buttonRef = useRef<HTMLElement>();
   let domRef = useFocusableRef(ref, buttonRef);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
@@ -99,7 +99,7 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
         ref={domRef}
         includeNecessityIndicatorInAccessibilityName>
         <SearchAutocompleteButton
-          {...mergeProps(triggerProps, fieldProps, {autoFocus: props.autoFocus})}
+          {...mergeProps(triggerProps, fieldProps, {autoFocus: props.autoFocus, icon: props.icon})}
           ref={buttonRef}
           isQuiet={isQuiet}
           isDisabled={isDisabled}
@@ -124,6 +124,7 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
 });
 
 interface SearchAutocompleteButtonProps extends AriaButtonProps {
+  icon?: ReactElement,
   isQuiet?: boolean,
   isDisabled?: boolean,
   isReadOnly?: boolean,
@@ -137,7 +138,12 @@ interface SearchAutocompleteButtonProps extends AriaButtonProps {
 }
 
 const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteButton(props: SearchAutocompleteButtonProps, ref: RefObject<HTMLElement>) {
+  let searchIcon = (
+    <Magnifier data-testid="searchicon" />
+  );
+
   let {
+    icon = searchIcon,
     isQuiet,
     isDisabled,
     isReadOnly,
@@ -149,24 +155,22 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
     style,
     className
 } = props;
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let valueId = useId();
   let invalidId = useId();
   let validationIcon = validationState === 'invalid'
-    ? <AlertMedium id={invalidId} aria-label={formatMessage('invalid')} />
+    ? <AlertMedium id={invalidId} aria-label={stringFormatter.format('invalid')} />
     : <CheckmarkMedium />;
 
-  let searchIcon = (
-    <Magnifier data-testid="searchicon" />
-  );
-
-  let icon = React.cloneElement(searchIcon, {
-    UNSAFE_className: classNames(
-      textfieldStyles,
-      'spectrum-Textfield-icon'
-    ),
-    size: 'S'
-  });
+  if (icon) {
+    icon = React.cloneElement(icon, {
+      UNSAFE_className: classNames(
+        textfieldStyles,
+        'spectrum-Textfield-icon'
+      ),
+      size: 'S'
+    });
+  }
 
   let clearButton = (
     <ClearButton
@@ -175,7 +179,7 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
         props.onPress(e);
       }}
       preventFocus
-      aria-label={formatMessage('clear')}
+      aria-label={stringFormatter.format('clear')}
       excludeFromTabOrder
       UNSAFE_className={
         classNames(
@@ -199,6 +203,7 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
   });
 
   let {hoverProps, isHovered} = useHover({});
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let {buttonProps} = useButton({
     ...props,
     'aria-labelledby': [
@@ -211,88 +216,92 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
   }, ref);
 
   return (
-    <FocusRing
-      focusClass={classNames(styles, 'is-focused')}
-      focusRingClass={classNames(styles, 'focus-ring')}>
+    <div
+      {...mergeProps(hoverProps, focusProps, buttonProps)}
+      aria-haspopup="dialog"
+      ref={ref as RefObject<HTMLDivElement>}
+      style={{...style, outline: 'none'}}
+      className={
+        classNames(
+          styles,
+          'spectrum-InputGroup',
+          {
+            'spectrum-InputGroup--quiet': isQuiet,
+            'is-disabled': isDisabled,
+            'spectrum-InputGroup--invalid': validationState === 'invalid',
+            'is-hovered': isHovered,
+            'is-focused': isFocused,
+            'focus-ring': isFocusVisible
+          },
+          classNames(
+            searchAutocompleteStyles,
+            'mobile-searchautocomplete'
+          ),
+          className
+        )
+      }>
       <div
-        {...mergeProps(hoverProps, buttonProps)}
-        aria-haspopup="dialog"
-        ref={ref as RefObject<HTMLDivElement>}
-        style={{...style, outline: 'none'}}
         className={
           classNames(
-            styles,
-            'spectrum-InputGroup',
+            textfieldStyles,
+            'spectrum-Textfield',
             {
-              'spectrum-InputGroup--quiet': isQuiet,
-              'is-disabled': isDisabled,
-              'spectrum-InputGroup--invalid': validationState === 'invalid',
-              'is-hovered': isHovered
+              'spectrum-Textfield--invalid': validationState === 'invalid',
+              'spectrum-Textfield--valid': validationState === 'valid',
+              'spectrum-Textfield--quiet': isQuiet
             },
             classNames(
-              searchAutocompleteStyles,
-              'mobile-searchautocomplete'
-            ),
-            className
+              searchStyles,
+              'spectrum-Search',
+              {
+                'is-disabled': isDisabled,
+                'is-quiet': isQuiet,
+                'spectrum-Search--invalid': validationState === 'invalid',
+                'spectrum-Search--valid': validationState === 'valid'
+              }
+            )
           )
         }>
         <div
           className={
             classNames(
               textfieldStyles,
-              'spectrum-Textfield',
+              'spectrum-Textfield-input',
               {
-                'spectrum-Textfield--invalid': validationState === 'invalid',
-                'spectrum-Textfield--valid': validationState === 'valid',
-                'spectrum-Textfield--quiet': isQuiet
+                'spectrum-Textfield-inputIcon': !!icon,
+                'is-hovered': isHovered,
+                'is-placeholder': isPlaceholder,
+                'is-disabled': isDisabled,
+                'is-quiet': isQuiet,
+                'is-focused': isFocused,
+                'focus-ring': isFocusVisible
               },
               classNames(
                 searchStyles,
-                'spectrum-Search',
-                {
-                  'is-disabled': isDisabled,
-                  'is-quiet': isQuiet,
-                  'spectrum-Search--invalid': validationState === 'invalid',
-                  'spectrum-Search--valid': validationState === 'valid'
-                }
+                'spectrum-Search-input'
+              ),
+              classNames(
+                searchAutocompleteStyles,
+                'mobile-input'
               )
             )
           }>
-          <div
+          {icon}
+          <span
+            id={valueId}
             className={
               classNames(
-                textfieldStyles,
-                'spectrum-Textfield-input',
-                'spectrum-Textfield-inputIcon',
-                {
-                  'is-hovered': isHovered,
-                  'is-placeholder': isPlaceholder,
-                  'is-disabled': isDisabled,
-                  'is-quiet': isQuiet
-                },
-                classNames(
-                  searchStyles,
-                  'spectrum-Search-input'
-                )
+                searchAutocompleteStyles,
+                'mobile-value'
               )
             }>
-            {icon}
-            <span
-              id={valueId}
-              className={
-                classNames(
-                  searchAutocompleteStyles,
-                  'mobile-value'
-                )
-              }>
-              {children}
-            </span>
-          </div>
-          {validationState ? validation : null}
-          {(inputValue !== '' || validationState != null) && !isReadOnly && clearButton}
+            {children}
+          </span>
         </div>
+        {validationState ? validation : null}
+        {(inputValue !== '' || validationState != null) && !isReadOnly && clearButton}
       </div>
-    </FocusRing>
+    </div>
   );
 });
 
@@ -304,9 +313,14 @@ interface SearchAutocompleteTrayProps extends SpectrumSearchAutocompleteProps<un
 }
 
 function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
+  let searchIcon = (
+    <Magnifier data-testid="searchicon" />
+  );
+
   let {
     // completionMode = 'suggest',
     state,
+    icon = searchIcon,
     isDisabled,
     validationState,
     label,
@@ -323,7 +337,7 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
   let popoverRef = useRef<HTMLDivElement>();
   let listBoxRef = useRef<HTMLDivElement>();
   let layout = useListBoxLayout(state);
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete(
     {
@@ -366,7 +380,7 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
     <ClearButton
       {...clearButtonProps}
       preventFocus
-      aria-label={formatMessage('clear')}
+      aria-label={stringFormatter.format('clear')}
       excludeFromTabOrder
       UNSAFE_className={
         classNames(
@@ -379,7 +393,7 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
 
   let loadingCircle = (
     <ProgressCircle
-      aria-label={formatMessage('loading')}
+      aria-label={stringFormatter.format('loading')}
       size="S"
       isIndeterminate
       UNSAFE_className={classNames(
@@ -450,17 +464,15 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
     }
   };
 
-  let searchIcon = (
-    <Magnifier data-testid="searchicon" />
-  );
-
-  let icon = React.cloneElement(searchIcon, {
-    UNSAFE_className: classNames(
-        textfieldStyles,
-        'spectrum-Textfield-icon'
-        ),
-    size: 'S'
-  });
+  if (icon) {
+    icon = React.cloneElement(icon, {
+      UNSAFE_className: classNames(
+          textfieldStyles,
+          'spectrum-Textfield-icon'
+          ),
+      size: 'S'
+    });
+  }
 
   return (
     <FocusScope restoreFocus contain>
@@ -527,7 +539,7 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
           shouldUseVirtualFocus
           renderEmptyState={() => loadingState !== 'loading' && (
             <span className={classNames(searchAutocompleteStyles, 'no-results')}>
-              {formatMessage('noResults')}
+              {stringFormatter.format('noResults')}
             </span>
           )}
           UNSAFE_className={

package/src/SearchAutocomplete.tsx

@@ -24,21 +24,26 @@ import {MobileSearchAutocomplete} from './MobileSearchAutocomplete';
 import {Placement} from '@react-types/overlays';
 import {Popover} from '@react-spectrum/overlays';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {forwardRef, InputHTMLAttributes, RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import React, {forwardRef, InputHTMLAttributes, RefObject, useCallback, useEffect, useRef, useState} from 'react';
 import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';
 import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';
 import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useComboBoxState} from '@react-stately/combobox';
-import {useFilter, useMessageFormatter} from '@react-aria/i18n';
+import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useHover} from '@react-aria/interactions';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useSearchAutocomplete} from '@react-aria/autocomplete';
 
 function SearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
 
+  if (props.placeholder) {
+    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
+  }
+
   let isMobile = useIsMobileDevice();
   if (isMobile) {
     // menuTrigger=focus/manual don't apply to mobile searchwithin
@@ -61,7 +66,7 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
     onSubmit = () => {}
   } = props;
 
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let isAsync = loadingState != null;
   let popoverRef = useRef<DOMRefValue<HTMLDivElement>>();
   let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);
@@ -82,7 +87,7 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
     }
   );
   let layout = useListBoxLayout(state);
-  
+
   let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete(
     {
       ...props,
@@ -174,7 +179,7 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
           onLoadMore={onLoadMore}
           renderEmptyState={() => isAsync && (
             <span>
-              {formatMessage('noResults')}
+              {stringFormatter.format('noResults')}
             </span>
           )} />
         <DismissButton onDismiss={() => state.close()} />
@@ -193,7 +198,12 @@ interface SearchAutocompleteInputProps extends SpectrumSearchAutocompleteProps<u
 }
 
 const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInput(props: SearchAutocompleteInputProps, ref: RefObject<HTMLElement>) {
+  let searchIcon = (
+    <Magnifier data-testid="searchicon" />
+  );
+
   let {
+    icon = searchIcon,
     isQuiet,
     isDisabled,
     isReadOnly,
@@ -209,13 +219,13 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
     clearButtonProps
   } = props;
   let {hoverProps, isHovered} = useHover({});
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let timeout = useRef(null);
   let [showLoading, setShowLoading] = useState(false);
 
   let loadingCircle = (
     <ProgressCircle
-      aria-label={formatMessage('loading')}
+      aria-label={stringFormatter.format('loading')}
       size="S"
       isIndeterminate
       UNSAFE_className={classNames(
@@ -228,10 +238,6 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
       )} />
   );
 
-  let searchIcon = (
-    <Magnifier data-testid="searchicon" />
-  );
-
   let clearButton = (
     <ClearButton
       {...clearButtonProps}
@@ -319,7 +325,7 @@ const SearchAutocompleteInput = React.forwardRef(function SearchAutocompleteInpu
           validationState={validationState}
           isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}
           loadingIndicator={loadingState != null && loadingCircle}
-          icon={searchIcon}
+          icon={icon}
           wrapperChildren={(inputValue !== '' && !isReadOnly) && clearButton} />
       </div>
     </FocusRing>

package/src/index.ts

@@ -9,8 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
 /// <reference types="css-module-types" />
-
-export * from './SearchAutocomplete';
+export {SearchAutocomplete} from './SearchAutocomplete';
 export {Item, Section} from '@react-stately/collections';
+export type {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';

package/src/searchautocomplete.css

@@ -28,13 +28,14 @@
 }
 
 .mobile-input {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
 }
 
 .mobile-value {
-  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tray-dialog {

package/dist/main.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA,6BAOE,kEAIF,CAXA,6BAOE,mEAIF,CAXA,mBACE,aAAc,CAKd,4DAA6D,CAE7D,gGAAsD,CACtD,0DAA+D,CAC/D,iBACF,CAEA,kCACE,YACF,CAEA,qBACE,kBAAmB,CACnB,eAAgB,CAChB,sBACF,CAEA,qBACE,qBACF,CAEA,oBACE,mBAAa,CAAb,YAAa,CACb,yBAAsB,CAAtB,qBAAsB,CACtB,WAAY,CACZ,YACF,CAEA,uBACE,gDAAiD,CACjD,sDAAuD,CACvD,mBAAc,CAAd,aAAc,CACd,oBASF,CAPE,wCACE,mDACF,CAEA,8DACE,sDACF,CAFA,8DACE,uDACF,CAGF,qBACE,UAAW,CACX,UAAO,CAAP,MACF,CC1CA,wBACE,oBAAqB,CACrB,iBAoCF,CAlCE,+DAEE,OAEF,CAJA,+DAEE,MAEF,CAJA,qDACE,iBAAkB,CAElB,KACF,CAEA,gFACE,sDAEF,CAHA,gFACE,uDAEF,CAHA,gFAEE,uDACF,CAHA,gFAEE,sDACF,CAEA,+FACE,iGACF,CAFA,+FACE,gGACF,CAEA,6FACE,mJACF,CAFA,6FACE,kJACF,CAGA,gGACE,OACF,CAFA,gGACE,MACF,CAGA,wGACE,mJACF,CAFA,wGACE,kJACF,CAGA,0GACE,mJAEF,CAHA,0GACE,kJAEF,CAHA,0GAEE,eACF,CAHA,0GAEE,cACF,CAGF,wCAaE,uDAmBF,CAhCA,wCAaE,sDAmBF,CAhCA,8BACE,aAAc,CAId,uBAAwB,CAGxB,mBAAoB,CAEpB,aAsBF,CAhBE,qHAEE,uBACF,CAEA,mGACE,iMACF,CAFA,mGACE,gMACF,CAEA,iGACE,mMACF,CAFA,iGACE,kMACF,CAEA,oGACE,mMACF,CAFA,oGACE,kMACF,CChEF,4BACE,iBAAkB,CAClB,0BAAoB,CAApB,mBAAoB,CACpB,sBAAmB,CAAnB,kBAAmB,CACnB,oBAAiB,CAAjB,gBAAiB,CACjB,+DAAsD,CACtD,sDA6BF,CA3BE,mEAGE,wBAIF,CAPA,mEAGE,yBAIF,CAPA,mEAIE,2BAGF,CAPA,mEAIE,4BAGF,CAPA,yDACE,SAAU,CACV,+CAAkD,CAGlD,gBAAiB,CACjB,mBAAc,CAAd,aACF,CAIE,8JACE,cACF,CAIA,yHACE,eAEF,CAHA,yHACE,cAEF,CAHA,yHAEE,+CACF,CAHA,yHAEE,8CACF,CAEA,uHACE,eAEF,CAHA,uHACE,cAEF,CAHA,uHAEE,+CACF,CAHA,uHAEE,8CACF,CAIJ,kCACE,iBAAc,CAAd,aACF,CAEA,4CACE,yBAGF,CAJA,4CACE,wBAGF,CAJA,4CAEE,4BAEF,CAJA,4CAEE,2BAEF,CAJA,4CAGE,uBACF,CAJA,4CAGE,sBACF,CAEA,mCACE,eAAuE,CACvE,6DA2CF,CAzCE,0EAIE,sDAcF,CAlBA,0EAIE,uDAcF,CAlBA,0EAKE,eAaF,CAlBA,0EAKE,cAaF,CAlBA,gEACE,UAAiB,CACjB,iBAAkB,CAIlB,cAAe,CACf,uEAAwE,CACxE,eAUF,CAPE,gFAKE,WACF,CANA,gFAKE,UACF,CANA,sEACE,UAAW,CACX,iBAAkB,CAClB,WAAgB,CAChB,UAEF,CAGF,8EACE,OACF,CAFA,8EACE,MACF,CAGE,mFACE,uBACF,CAIA,gIACE,eAEF,CAHA,gIACE,cAEF,CAHA,gIAEE,OACF,CAHA,gIAEE,MACF,CAEA,8HACE,eAEF,CAHA,8HACE,cAEF,CAHA,8HAEE,8CACF,CAHA,8HAEE,6CACF,CAIJ,qDAGE,6DACF,CAJA,qDAGE,4DACF,CAJA,2CAEE,0KAEF,CAEA,mCACE,sDAkFF,CA9EI,uKACE,eACF,CAKA,+GACE,wJAAsD,CACtD,4JACF,CAGF,qEACE,sGAA6C,CAC7C,0GAAiD,CACjD,gBAAa,CAAb,YACF,CAEE,sHACE,cAEF,CAHA,sHACE,aAEF,CAHA,sHAEE,uDACF,CAHA,sHAEE,sDACF,CAEA,8EACE,YACF,CAGA,oHAEE,aAGF,CALA,oHAEE,cAGF,CALA,oHAIE,sDACF,CALA,oHAIE,uDACF,CALA,0GACE,UAAO,CAAP,MAAO,CAEP,eAEF,CAGF,0EACE,iJAA8D,CAC9D,aAA8D,CAC9D,gBAAa,CAAb,YAAa,CACb,OAAQ,CACR,SAUF,CATE,iFACE,eAAY,CACZ,oBAAqB,CACrB,aAA2D,CAC3D,eAAgB,CAChB,iBAAkB,CAClB,qBAAsB,CACtB,UACF,CAIA,2FACE,iBAAkB,CAClB,sDAA4C,CAC5C,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,mBACF,CAIE,6HACE,eAAuE,CACvE,QACF,CAGA,6HACE,gBACF,CAFA,6HACE,iBACF,CC9LA,iSACE,2FACF,CAUA,iVACE,2FACF,CAMJ,2JAEE,2FACF,CAGE,mOAEE,iDACF,CAMF,mHACE,SACF,CAEA,2OAEE,mGACF,CAGE,mTAEE,yDACF,CAmBA,6qBAME,qFACF,CAEA,oKAEE,yFACF,CAIA,6KACE,2FACF,CAKE,mQAEE,iGACF,CAIA,6GACE,2FACF,CAGE,iJACE,iGACF,CAKF,kHACE,iGACF,CAEA,6GACE,iGAA0E,CAC1E,2FACF,CAOE,uSACE,uGACF,CAQJ,uFACE,yBACF,CAIA,6FACE,qFACF,CAIF,qDACE,mGASF,CAJI,+MACE,yDACF,CAKF,yGACE,2DACF,CAIE,sHACE,iDAAyD,CACzD,yDACF,CAEF,oGACE,iDAOF,CALI,2JACE,iDAAyD,CACzD,yDACF,CAKJ,uFACE,mGAgBF,CAbI,wJACE,eAAgB,CAChB,iDAMF,CAJI,+MACE,yDACF,CAGJ,6IACE,yDACF,CCpLR,2BACE,0BAAoB,CAApB,mBAAoB,CACpB,iBAAkB,CAClB,mDAA8C,CAC9C,gDAWF,CATE,uJACE,eACF,CAEA,kIACE,yFAAwC,CACxC,6FAA4C,CAC5C,iBACF,CAGF,iCAEE,qBAAsB,CACtB,mGAAmD,CACnD,kGAAsD,CAGtD,+GAA2K,CAE3K,aAAc,CAEd,UAAiB,CACjB,yFAAwC,CAExC,kBAAmB,CAGnB,QAAS,CAGT,gBAAiB,CAGjB,kHAA6D,CAC7D,gGAA8C,CAC9C,sGAAuD,CACvD,sBAAuB,CAEvB,oEACgF,CAEhF,YAAa,CAEb,uBAAwB,CASxB,yBAyGF,CAvGE,qGAEE,0DAAmE,CACnE,0DAAiE,CACjE,mBAAoB,CACpB,iCAA2E,CAC3E,SACF,CAKA,wDACE,0DAAmE,CACnE,0DAAiE,CACjE,iCAA2E,CAC3E,SACF,CAME,mlBAEG,iBACH,CACA,qUACG,iBACH,CAIA,gEACE,0DACF,CAGF,0CAEE,WAAY,CAGZ,SAKF,CAJE,uHAEE,0DACF,CAKF,4CACE,OAAQ,CACR,QACF,CAIA,wHAEE,uBAAwB,CACxB,QACF,CAGA,iDACE,eACF,CAEA,uEACE,WAAkD,CAClD,oDAA0D,CAC1D,+GAAmN,CAGnN,aACF,CAEA,6EAKE,cAMF,CAXA,0JAME,eAKF,CAXA,6EAME,cAKF,CAXA,mEACE,eAA4D,CAC5D,mBAA+D,CAA/D,0GAA+D,CAA/D,oBAA+D,CAA/D,kBAA+D,CAO/D,WAAY,CACZ,iBACF,CAEA,6EACE,uJACF,CAFA,6EACE,sJACF,CAEA,+EACE,qJACF,CAFA,+EACE,oJACF,CAEA,gFACE,qJACF,CAFA,gFACE,oJACF,CAGF,oDAKE,iEAOF,CAZA,oDAKE,gEAOF,CAZA,0CAIE,iBAAkB,CAElB,kBAAmB,CACnB,iCAKF,CAHE,sFACE,eACF,CAFA,sFACE,cACF,CAGF,wFAIE,oGACF,CALA,wFAIE,mGACF,CALA,8EACE,+CAA8C,CAC9C,gDAAgD,CAChD,kGAEF,CACA,sFAIE,+CACF,CALA,sFAIE,8CACF,CALA,4EACE,iDAAkD,CAClD,mDAAoD,CACpD,qGAEF,CAGA,0CAME,8CAGF,CATA,0CAME,+CAGF,CATA,gCACE,aAAc,CACd,iBAAkB,CAClB,gDAA+C,CAC/C,+CAA6C,CAG7C,4CAA6C,CAC7C,gCACF,CAGA,+CAGE,mJAmBF,CAtBA,+CAGE,oJAmBF,CAbE,iFACE,wGAMF,CAPA,iFACE,yGAMF,CAHE,iHACE,MACF,CAFA,iHACE,OACF,CAGF,0EACE,yFAAwC,CACxC,6FACF,CAKF,uFAIE,oJAKF,CATA,uFAIE,mJAKF,CATA,6EACE,iBAAkB,CAClB,+GAOF,CAHE,wHACE,eACF,CAFA,wHACE,cACF,CCtQF,iCACE,qDAA4D,CAC5D,qFAAoD,CACpD,4EAwIF,CAtIE,qGAEE,wFACF,CAEA,mDACE,2FAA0D,CAC1D,eAUF,CARE,yIAEE,8FACF,CAEA,mFACE,0CACF,CAGF,wCACE,qDAAiE,CACjE,iGAAyD,CACzD,iFAUF,CARE,mHAEE,6FACF,CAEA,wEACE,gFACF,CAGF,0FAEE,iGACF,CAGE,gEACE,2FAA8D,CAC9D,mGACF,CAGF,+FAEE,sDAAqE,CACrE,uEAA6D,CAC7D,qFAAoD,CAGpD,uGAUF,CARE,oQAEE,qFACF,CAEA,+JACE,0CACF,CAGF,oEACE,iGAgBF,CAdE,sFACE,qGACF,CAEA,2EACE,oGACF,CAGE,mGACE,iGAA0D,CAC1D,yGACF,CAIJ,mEACE,+EAAkE,CAClE,qFA2BF,CAzBE,qFACE,2FACF,CAEA,0EACE,iGACF,CAEA,8JAEE,2FACF,CAGE,kGACE,2FAA8D,CAC9D,iGACF,CAGF,kKAEE,+EAA2E,CAC3E,yFACF,CAGF,+FACE,iGAQF,CALI,8HACE,iGAA0D,CAC1D,yGACF,CAMA,qIACE,uGACF,CAMN,gCACE,2EACF,CAGE,4EACE,wFACF,CAEA,8EACE,sFACF","sources":["./packages/@react-spectrum/autocomplete/src/searchautocomplete.css","./node_modules/@adobe/spectrum-css-temp/components/search/index.css","./node_modules/@adobe/spectrum-css-temp/components/inputgroup/index.css","./node_modules/@adobe/spectrum-css-temp/components/inputgroup/skin.css","./node_modules/@adobe/spectrum-css-temp/components/textfield/index.css","./node_modules/@adobe/spectrum-css-temp/components/textfield/skin.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.no-results {\n  display: block;\n  /*\n    Renamed from padding-y to padding-height to fix docs issue where fallback var replaced this value\n    (due to old spectrum-css postcss-custom-properties-custom-mapping plugin).\n  */\n  padding-top: var(--spectrum-selectlist-option-padding-height);\n  padding-inline-start: var(--spectrum-selectlist-option-padding);\n  font-size: var(--spectrum-selectlist-option-text-size);\n  font-weight: var(--spectrum-selectlist-option-text-font-weight);\n  font-style: italic;\n}\n\n.mobile-searchautocomplete {\n  outline: none;\n}\n\n.mobile-input {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mobile-value {\n  vertical-align: middle;\n}\n\n.tray-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  outline: none;\n}\n\n.tray-textfield {\n  margin: var(--spectrum-global-dimension-size-150);\n  margin-bottom: var(--spectrum-global-dimension-size-50);\n  flex-shrink: 0;\n  width: initial !important;\n\n  &.has-label {\n    margin-top: var(--spectrum-global-dimension-size-50);\n  }\n\n  .tray-textfield-input {\n    padding-inline-start: var(--spectrum-textfield-padding-x);\n  }\n}\n\n.tray-listbox {\n  width: 100%;\n  flex: 1;\n}\n","/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n@import '../commons/index.css';\n\n/* override DNA variables to use ones that change in large scale instead of staying static */\n:root {\n  --spectrum-search-padding-left: var(--spectrum-global-dimension-size-450);\n  --spectrum-search-padding-right: var(--spectrum-global-dimension-size-350);\n  --spectrum-search-quiet-padding-left: var(--spectrum-global-dimension-size-300);\n  --spectrum-search-quiet-padding-right: var(--spectrum-global-dimension-size-350);\n}\n\n.spectrum-Search {\n  display: inline-block;\n  position: relative;\n\n  .spectrum-ClearButton {\n    position: absolute;\n    inset-inline-end: 0;\n    top: 0;\n  }\n\n  &.is-quiet .spectrum-Search-input {\n    padding-inline-start: var(--spectrum-search-quiet-padding-left);\n    padding-inline-end: var(--spectrum-search-quiet-padding-right);\n  }\n\n  &.spectrum-Search--invalid .spectrum-ClearButton {\n    inset-inline-end: calc(var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-padding-x));\n  }\n\n  &.spectrum-Search--valid .spectrum-ClearButton {\n    inset-inline-end: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x) / 2 + var(--spectrum-global-dimension-size-150));\n  }\n\n  /* Flip clear button and circle loader position so circle loader is to the left of the clear button */\n  &.spectrum-Search--loadable .spectrum-ClearButton {\n    inset-inline-end: 0\n  }\n\n  /* Flip clear button and circle loader position so circle loader is to the left of the clear button */\n  &.spectrum-Search--loadable .spectrum-Search-circleLoader {\n    inset-inline-end: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x) / 2 + var(--spectrum-global-dimension-size-150));\n  }\n\n  /* Move validation icons so that they sit to the left of the clear button (for async loading combobox tray, same position as loading indicator)  */\n  &.spectrum-Search--loadable .spectrum-Search-validationIcon {\n    inset-inline-end: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x) / 2 + var(--spectrum-global-dimension-size-150));\n    padding-inline-end: 0;\n  }\n}\n\n.spectrum-Search-input {\n  display: block;\n\n  /* Correct the odd appearance of input[type=\"search\"] in Chrome and Safari.*/\n  /* This gets overridden by .spectrum-Textfield */\n  -webkit-appearance: none;\n\n  /* Correct the outline for input[type=\"search\"] style in Safari. */\n  outline-offset: -2px;\n\n  text-indent: 0;\n\n  /* Don't let long strings overlap the close icon */\n  padding-inline-end: var(--spectrum-search-padding-right);\n\n  /* Remove the inner padding and cancel buttons for input[type=\"search\"] in Chrome and Safari on macOS. */\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  .spectrum-Textfield.spectrum-Search--invalid & {\n    padding-inline-end: calc(var(--spectrum-search-padding-right) + var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  }\n\n  .spectrum-Textfield.spectrum-Search--valid & {\n    padding-inline-end: calc(var(--spectrum-search-padding-right) + var(--spectrum-textfield-padding-x) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  }\n\n  .spectrum-Textfield.spectrum-Search--loadable & {\n    padding-inline-end: calc(var(--spectrum-search-padding-right) + var(--spectrum-textfield-padding-x) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  }\n}\n\n","/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n@import '../commons/index.css';\n\n:root {\n  /* Todo: move to DNA */\n  --spectrum-combobox-quiet-fieldbutton-border-radius: 0;\n  --spectrum-combobox-quiet-fieldbutton-padding-right: 0;\n  --spectrum-combobox-quiet-fieldbutton-padding-left: var(--spectrum-global-dimension-size-130);\n  --spectrum-combobox-validation-icon-right: var(--spectrum-global-dimension-size-100);\n  --spectrum-datepicker-input-width: calc(var(--spectrum-global-dimension-size-1600) -  2 * var(--spectrum-padding));\n  --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-input-width) + var(--spectrum-global-dimension-size-700) - var(--spectrum-global-dimension-static-font-size-100) / 2);\n  --spectrum-datepicker-range-dash-margin-left: calc(-0.5 * var(--spectrum-global-dimension-static-font-size-100));\n  --spectrum-datepicker-range-dash-padding-top: 0;\n  --spectrum-datepicker-range-dash-line-height: calc(var(--spectrum-textfield-height) - var(--spectrum-global-dimension-size-100));\n\n  --spectrum-combobox-button-width: var(--spectrum-global-dimension-size-400);\n}\n\n.spectrum-InputGroup {\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  min-width: calc(2.5 * var(--spectrum-dropdown-height));\n  border-radius: var(--spectrum-border-radius);\n\n  .spectrum-FieldButton {\n    padding: 0;\n    inline-size: var(--spectrum-combobox-button-width);\n    border-start-start-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius);\n    border-end-start-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius);\n    border-width: 1px;\n    flex-shrink: 0;\n  }\n\n  /* Quiet or invalid inputgroup field button should always have a border width. */\n  &.is-disabled:not(.spectrum-InputGroup--invalid):not(.spectrum-InputGroup--quiet) {\n    .spectrum-FieldButton {\n      border-width: 0;\n    }\n  }\n\n  .spectrum-InputGroup-field {\n    .spectrum-InputGroup-input-validationIcon {\n      padding-inline-end: 0;\n      inset-inline-end: var(--spectrum-combobox-validation-icon-right);\n    }\n\n    .spectrum-InputGroup-input-circleLoader {\n      padding-inline-end: 0;\n      inset-inline-end: var(--spectrum-combobox-validation-icon-right);\n    }\n  }\n}\n\n.spectrum-InputGroup-field {\n  flex: 1 1 auto;\n}\n\n.spectrum-InputGroup-input {\n  border-start-end-radius: var(--spectrum-combobox-textfield-border-top-right-radius);\n  border-end-end-radius: var(--spectrum-combobox-textfield-border-bottom-right-radius);\n  border-inline-end-style: none;\n}\n\n.spectrum-InputGroup--quiet {\n  border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);\n  min-width: calc(2 * var(--spectrum-dropdown-height));\n\n  .spectrum-FieldButton {\n    inline-size: auto;\n    position: relative;\n\n    padding-inline-start: var(--spectrum-combobox-quiet-fieldbutton-padding-left);\n    padding-inline-end: var(--spectrum-combobox-quiet-fieldbutton-padding-right);\n    border-width: 0;\n    border-bottom: var(--spectrum-textfield-quiet-affixed-border-size) solid;\n    border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);\n\n    /* More hitarea */\n    &:after {\n      content: '';\n      position: absolute;\n      block-size: 100%;\n      inline-size: 10px;\n      inset-inline-end: -10px;\n    }\n  }\n\n  .spectrum-InputGroup-icon {\n    inset-inline-end: 0;\n  }\n\n  &.is-disabled {\n    .spectrum-FieldButton {\n      border-bottom-width: 1px;\n    }\n  }\n\n  .spectrum-InputGroup-field {\n    .spectrum-InputGroup-input-validationIcon {\n      padding-inline-end: 0;\n      inset-inline-end: 0;\n    }\n\n    .spectrum-InputGroup-input-circleLoader {\n      padding-inline-end: 0;\n      inset-inline-end: var(--spectrum-global-dimension-size-10);\n    }\n  }\n}\n\n.spectrum-InputGroup-popover--quiet {\n  /* Define this var so it can be read from JS */\n  --spectrum-dropdown-quiet-offset: calc(var(--spectrum-dropdown-quiet-popover-offset-x) + var(--spectrum-popover-border-size));\n  margin-inline-end: calc(var(--spectrum-dropdown-quiet-offset) * -1);\n}\n\n.spectrum-Datepicker--range {\n  border-radius: var(--spectrum-border-radius);\n  /* Input Group */\n  &.spectrum-InputGroup--quiet {\n    border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);\n    .spectrum-FieldButton {\n      border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);\n    }\n  }\n  /* Datetime Range */\n  &.spectrum-Datepicker--datetimeRange {\n    /* Inputs */\n    .spectrum-InputGroup-field {\n      width: var(--spectrum-datepicker-datetime-input-width);\n      min-width: var(--spectrum-datepicker-datetime-input-width);\n    }\n  }\n  /* Inputs */\n  .spectrum-InputGroup-field {\n    width: var(--spectrum-datepicker-input-width);\n    min-width: var(--spectrum-datepicker-input-width);\n    flex: initial;\n  }\n  .spectrum-Datepicker-startField {\n    .spectrum-InputGroup-field {\n      border-inline-end: 0;\n      padding-inline-end: var(--spectrum-padding);\n    }\n\n    svg {\n      display: none;\n    }\n  }\n  .spectrum-Datepicker-endField {\n    .spectrum-InputGroup-input {\n      flex: 1;\n      border-inline-start: 0;\n      border-radius: 0;\n      padding-inline-start: var(--spectrum-padding);\n    }\n  }\n  /* Em dash */\n  .spectrum-Datepicker--rangeDash {\n    line-height: var(--spectrum-datepicker-range-dash-line-height);\n    padding-top: var(--spectrum-datepicker-range-dash-padding-top);\n    flex: initial;\n    width: 0;\n    z-index: 1;\n    &:before {\n      content: '–';\n      display: inline-block;\n      margin: 0 var(--spectrum-datepicker-range-dash-margin-left);\n      overflow: hidden;\n      text-align: center;\n      vertical-align: middle;\n      width: var(--spectrum-global-dimension-static-font-size-100);\n    }\n  }\n  /* Focus ring */\n  &.is-focused {\n    .spectrum-Datepicker-focusRing {\n      position: absolute;\n      border-radius: var(--spectrum-border-radius);\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      pointer-events: none;\n    }\n  }\n  &.spectrum-InputGroup--quiet {\n    &.is-focused {\n      .spectrum-Datepicker-focusRing {\n        border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);\n        top: auto;\n      }\n    }\n    .spectrum-Datepicker--rangeDash {\n      &:before {\n        margin-inline-start: var(--spectrum-datepicker-range-dash-margin-left);\n      }\n    }\n  }\n}\n","/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n.spectrum-InputGroup {\n  &.is-focused {\n    &:not(.spectrum-InputGroup--invalid):not(.is-disabled) {\n      .spectrum-InputGroup-input {\n        border-color: var(--spectrum-textfield-border-color-key-focus);\n      }\n\n      .spectrum-FieldButton {\n        border-color: var(--spectrum-textfield-border-color-key-focus);\n      }\n    }\n  }\n\n  &:hover {\n    &:not(.spectrum-InputGroup--invalid):not(.is-focused):not(.is-disabled) {\n      .spectrum-InputGroup-input {\n        border-color: var(--spectrum-textfield-border-color-hover);\n      }\n\n      .spectrum-FieldButton {\n        border-color: var(--spectrum-textfield-border-color-hover);\n      }\n    }\n  }\n}\n\n.spectrum-InputGroup.is-focused {\n  .spectrum-FieldButton,\n  .spectrum-InputGroup-input {\n    border-color: var(--spectrum-dropdown-border-color-key-focus);\n  }\n\n  &.spectrum-InputGroup--invalid {\n    .spectrum-FieldButton,\n    .spectrum-InputGroup-input {\n      border-color: var(--spectrum-dropdown-border-color-error);\n    }\n  }\n}\n\n/* Only add the 2px ring for keyboard focus */\n.spectrum-InputGroup:focus-ring:not(.spectrum-InputGroup--quiet) {\n  .spectrum-FieldButton {\n    z-index: 1;\n  }\n\n  .spectrum-FieldButton,\n  .spectrum-InputGroup-input {\n    box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus);\n  }\n\n  &.spectrum-InputGroup--invalid {\n    .spectrum-FieldButton,\n    .spectrum-InputGroup-input {\n      box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);\n    }\n  }\n}\n\n.spectrum-InputGroup--quiet {\n  /*\n    specifically for readonly inputgroups that aren't disabled since the button will have the disabled class\n    but we don't want the border color to be the disabled quiet one\n  */\n  &:not(.is-disabled) {\n    .spectrum-FieldButton {\n      &:disabled,\n      &:disabled:hover {\n        border-color: var(--spectrum-textfield-quiet-border-color);\n      }\n    }\n  }\n\n  .spectrum-FieldButton {\n    &,\n    &:hover,\n    &:focus,\n    &:active,\n    &.is-selected,\n    &.spectrum-FieldButton--invalid {\n      border-color: var(--spectrum-textfield-quiet-border-color);\n    }\n\n    &:disabled,\n    &:disabled:hover {\n      border-color: var(--spectrum-textfield-quiet-border-color-disabled);\n    }\n  }\n\n  &:hover:not(.spectrum-InputGroup--invalid):not(.is-focused):not(.is-disabled) {\n    .spectrum-FieldButton {\n      border-color: var(--spectrum-textfield-quiet-border-color-hover);\n    }\n  }\n\n  &.spectrum-InputGroup {\n    &.spectrum-InputGroup--invalid {\n      .spectrum-FieldButton,\n      .spectrum-InputGroup-input {\n        border-color: var(--spectrum-textfield-border-color-error);\n      }\n    }\n\n    &.is-focused {\n      .spectrum-FieldButton {\n        border-color: var(--spectrum-textfield-quiet-border-color-key-focus);\n      }\n\n      &.spectrum-InputGroup--invalid {\n        .spectrum-FieldButton {\n          border-color: var(--spectrum-textfield-border-color-error);\n        }\n      }\n    }\n\n    &:focus-ring {\n      .spectrum-InputGroup-input {\n        box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus);\n      }\n\n      .spectrum-FieldButton {\n        box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus);\n        border-color: var(--spectrum-textfield-quiet-border-color-key-focus);\n      }\n\n      &.spectrum-InputGroup--invalid {\n        .spectrum-InputGroup-input {\n          box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);\n        }\n\n        .spectrum-FieldButton {\n          box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);\n        }\n      }\n    }\n  }\n}\n\n.spectrum-Datepicker--range {\n  &:focus-ring {\n    .spectrum-InputGroup-input {\n      box-shadow: none !important;\n    }\n  }\n\n  &.is-disabled {\n    .spectrum-Datepicker--rangeDash {\n      color: var(--spectrum-textfield-text-color-disabled);\n    }\n  }\n\n  /* Focus ring: When one of the inputs or the button has keyboard focus, render the focus ring border around the entire input group by styling an adjacent descendant element. */\n  &:focus-ring {\n    box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus);\n\n    &.spectrum-InputGroup--invalid {\n      box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);\n\n      .spectrum-FieldButton {\n        box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);\n      }\n    }\n  }\n\n  &.spectrum-InputGroup--invalid {\n    .spectrum-InputGroup-input {\n      border-color: var(--spectrum-dropdown-border-color-error) !important;\n    }\n\n    /* Focus ring: When one of the inputs or the button has keyboard focus, render the focus ring border around the entire input group by styling an adjacent descendant element. */\n    &:focus-ring {\n      .spectrum-FieldButton {\n        border-color: var(--spectrum-dropdown-border-color-error);\n        box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);\n      }\n    }\n    .spectrum-FieldButton {\n      border-color: var(--spectrum-dropdown-border-color-error);\n      &.spectrum-FieldButton--invalid {\n        &:focus-ring {\n          border-color: var(--spectrum-dropdown-border-color-error);\n          box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);\n        }\n      }\n    }\n  }\n  &.spectrum-InputGroup--quiet {\n    &.is-focused {\n      box-shadow: 0 1px 0 0 var(--spectrum-dropdown-border-color-key-focus);\n\n      &.spectrum-InputGroup--invalid {\n        .spectrum-FieldButton {\n          box-shadow: none;\n          border-color: var(--spectrum-dropdown-border-color-error);\n          &.spectrum-FieldButton--invalid {\n            &:focus-ring {\n              box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-error);\n            }\n          }\n        }\n        &:focus-ring {\n          box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);\n        }\n      }\n    }\n  }\n}\n","/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n@import '../commons/index.css';\n\n:root {\n  --spectrum-textfield-padding-top: 3px;\n  --spectrum-textfield-padding-bottom: 5px;\n\n  /* Todo fix in DNA */\n  --spectrum-textfield-quiet-border-radius: 0;\n\n  --spectrum-textfield-quiet-invalid-background-position: 100% 50%;\n\n  --spectrum-textfield-multiline-height: auto;\n  --spectrum-textfield-multiline-min-height: var(--spectrum-global-dimension-size-700);\n\n  --spectrum-textfield-multiline-padding-x: var(--spectrum-textfield-padding-x);\n  --spectrum-textfield-multiline-padding-top: var(--spectrum-textfield-padding-top);\n  --spectrum-textfield-multiline-padding-bottom: var(--spectrum-textfield-padding-bottom);\n\n  /* Todo: DNA uses incorrect font family \"Adobe Clean\" */;\n  --spectrum-textfield-text-font-family-fixed: var(--spectrum-font-family-base);\n}\n\n.spectrum-Textfield {\n  display: inline-flex;\n  position: relative;\n  min-width: var(--spectrum-textfield-min-width);\n  width: var(--spectrum-component-single-line-width);\n\n  &:not(.spectrum-Textfield--quiet).spectrum-Textfield--multiline .spectrum-Textfield-input:not(:disabled) {\n    resize: vertical;\n  }\n\n  &.spectrum-Textfield--quiet.spectrum-Textfield--multiline .spectrum-Textfield-input {\n    height: var(--spectrum-textfield-height);\n    min-height: var(--spectrum-textfield-height);\n    overflow-x: hidden;\n  }\n}\n\n.spectrum-Textfield-input {\n  /* box */\n  box-sizing: border-box;\n  border: var(--spectrum-textfield-border-size) solid;\n  border-radius: var(--spectrum-textfield-border-radius);\n\n  /* Apply padding by default to center text, giving consistency between input and textfield */\n  padding: var(--spectrum-textfield-padding-top) var(--spectrum-textfield-padding-x) var(--spectrum-textfield-padding-bottom) calc(var(--spectrum-textfield-padding-x) - 1px);\n  /* Use padding instead of text-indent because text-indent does not left align the text in Edge browser  */\n  text-indent: 0;\n\n  inline-size: 100%;\n  height: var(--spectrum-textfield-height);\n\n  vertical-align: top; /* used to align them correctly in forms. */\n\n  /* Remove the margin for input in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow for input in Edge. */\n  overflow: visible;\n\n  /* Change the input font styles in all browsers */\n  font-family: var(--spectrum-textfield-text-font-family-fixed);\n  font-size: var(--spectrum-textfield-text-size);\n  line-height: var(--spectrum-textfield-text-line-height);\n  text-overflow: ellipsis;\n\n  transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out,\n              box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;\n\n  outline: none;\n\n  -webkit-appearance: none;\n  /*\n    Removes the native spin buttons in Firefox; -moz-appearance: none results in spinners.\n    This has to come after -webkit-appearance or it gets overridden (#214)\n    Details: http://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29\n\n    Sets the opacity to 1 as normalize.css sets an opacity to placeholders\n    Details: https://github.com/csstools/normalize.css/blob/master/normalize.css#L297\n  */\n  -moz-appearance: textfield;\n\n  &::placeholder,\n  &.is-placeholder {\n    font-weight: var(--spectrum-textfield-placeholder-text-font-weight);\n    font-style: var(--spectrum-textfield-placeholder-text-font-style);\n    font-synthesis: none;\n    transition: color var(--spectrum-global-animation-duration-100) ease-in-out;\n    opacity: 1;\n  }\n\n  /* added to work with Edge, note, it needs double ::\n   * not single : which is what autoprefixer will add\n   */\n  &::-ms-input-placeholder {\n    font-weight: var(--spectrum-textfield-placeholder-text-font-weight);\n    font-style: var(--spectrum-textfield-placeholder-text-font-style);\n    transition: color var(--spectrum-global-animation-duration-100) ease-in-out;\n    opacity: 1;\n  }\n\n  /* placeholder gets clipped for synthetic italics, we rely on font-synthesis once\n   * chrome supports it https://bugs.chromium.org/p/chromium/issues/detail?id=509989\n   */\n  &:lang(ja), &:lang(zh), &:lang(ko), &:lang(ar), &:lang(he) {\n    &::placeholder,\n    &.is-placeholder {\n       font-style: normal;\n    }\n    &::-ms-input-placeholder { /* added to work with Edge, same as above */\n       font-style: normal;\n    }\n  }\n\n  &:hover {\n    &::placeholder {\n      font-weight: var(--spectrum-textfield-placeholder-text-font-weight);\n    }\n  }\n\n  &:disabled {\n    /* Disable the resize functionality when disabled */\n    resize: none;\n\n    /* The opacity must be set to 1 */\n    opacity: 1;\n    &::placeholder,\n    &.is-placeholder {\n      font-weight: var(--spectrum-textfield-placeholder-text-font-weight);\n    }\n  }\n\n  /* Remove the native clear button in IE */\n  /* http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */\n  &::-ms-clear {\n    width: 0;\n    height: 0;\n  }\n\n  /* removes the native spin buttons */\n  /* http://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29 */\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* removes the red border that appears in Firefox */\n  &:-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  .spectrum-Textfield--multiline & {\n    height: var(--spectrum-textfield-multiline-height);\n    min-height: var(--spectrum-textfield-multiline-min-height);\n    padding: var(--spectrum-textfield-multiline-padding-top) var(--spectrum-textfield-multiline-padding-x) var(--spectrum-textfield-multiline-padding-bottom) calc(var(--spectrum-textfield-multiline-padding-x) - 1px);\n\n    /* Remove the default vertical scrollbar for textarea in IE. */\n    overflow: auto;\n  }\n\n  .spectrum-Textfield--quiet & {\n    border-radius: var(--spectrum-textfield-quiet-border-radius);\n    border-width: 0 0 var(--spectrum-textfield-quiet-border-size) 0;\n\n    /* removes the side padding to align the text properly */\n    padding-inline-start: var(--spectrum-textfield-quiet-padding-x);\n    padding-inline-end: var(--spectrum-textfield-quiet-padding-x);\n\n    /* Treat all quiet inputs and textareas the same */\n    resize: none;\n    overflow-y: hidden;\n  }\n\n  .spectrum-Textfield--valid & {\n    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  }\n\n  .spectrum-Textfield--invalid & {\n    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  }\n\n  .spectrum-Textfield--loadable & {\n    padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  }\n}\n\n.spectrum-Textfield-validationIcon {\n  /* TODO: Confirm if this is ok for the validation icon sizing\n    Note that the sizes are a bit different when compared with old background icons(more noticable for checkmark)\n  */\n  position: absolute;\n  padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2);\n  pointer-events: all;\n  transition: color var(--spectrum-global-animation-duration-100) ease-in-out;\n\n  .spectrum-Textfield--quiet & {\n    padding-inline-end: 0;\n  }\n}\n\n.spectrum-Textfield--invalid .spectrum-Textfield-validationIcon {\n  width: var(--spectrum-icon-alert-medium-width);\n  height: var(--spectrum-icon-alert-medium-height);\n  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-alert-medium-height) / 2));\n  inset-inline-end: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-alert-medium-width) / 2));\n}\n.spectrum-Textfield--valid .spectrum-Textfield-validationIcon {\n  width: var(--spectrum-icon-checkmark-medium-width);\n  height: var(--spectrum-icon-checkmark-medium-height);\n  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-checkmark-medium-height) / 2));\n  inset-inline-end: var(--spectrum-global-dimension-size-150);\n}\n\n/* styles the left icon for textfield, assumes usage of workflow icon sizing (18px by 18px) */\n.spectrum-Textfield-icon {\n  display: block;\n  position: absolute;\n  height: var(--spectrum-icon-info-medium-height);\n  width: var(--spectrum-icon-info-medium-width);\n  /* This has a named variable in a future update of spectrum-css. */\n  inset-inline-start: var(--spectrum-global-dimension-size-150);\n  top: var(--spectrum-global-dimension-size-85);\n  transition: fill var(--spectrum-global-animation-duration-100) ease-in-out;\n}\n\n/* styles the textfield properly if the left icon is provided */\n.spectrum-Textfield-inputIcon {\n  /* Use padding instead of text-indent so long strings don't overlap the icon */\n  /* These values have real names in a spectrum-css update, when we update, use those. */\n  padding-inline-start: calc(\n    var(--spectrum-global-dimension-size-150) +\n    var(--spectrum-global-dimension-size-225) +\n    var(--spectrum-global-dimension-size-65)\n  );\n\n  .spectrum-Textfield--quiet & {\n    padding-inline-start: calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width));\n\n    /* Since quiet button has no left padding, push the icon all the way to the left */\n    & ~ .spectrum-Textfield-icon {\n      inset-inline-start: 0;\n    }\n  }\n\n  &.spectrum-Textfield--multiline {\n    height: var(--spectrum-textfield-height);\n    min-height: var(--spectrum-textfield-height);\n  }\n}\n\n\n/* same positioning as invalid icon */\n.spectrum-Textfield--loadable .spectrum-Textfield-circleLoader {\n  position: absolute;\n  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-loader-circle-small-width) / 2));\n  /* can't use padding right since it breaks the circle loader so add here */\n  inset-inline-end: calc(calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-alert-medium-width) / 2)) + calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2));\n\n  .spectrum-Textfield--quiet& {\n    padding-inline-end: 0;\n  }\n}\n","/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n.spectrum-Textfield-input {\n  background-color: var(--spectrum-textfield-background-color);\n  border-color: var(--spectrum-textfield-border-color);\n  color: var(--spectrum-textfield-text-color);\n\n  &::placeholder,\n  &.is-placeholder {\n    color: var(--spectrum-textfield-placeholder-text-color);\n  }\n\n  &:hover {\n    border-color: var(--spectrum-textfield-border-color-hover);\n    box-shadow: none;\n\n    &::placeholder,\n    &.is-placeholder {\n      color: var(--spectrum-textfield-placeholder-text-color-hover);\n    }\n\n    & ~ .spectrum-Textfield-icon {\n      fill: var(--spectrum-textfield-icon-color-hover);\n    }\n  }\n\n  &:active {\n    background-color: var(--spectrum-textfield-background-color-down);\n    border-color: var(--spectrum-textfield-border-color-down);\n    color: var(--spectrum-textfield-text-color-down);\n\n    &::placeholder,\n    &.is-placeholder {\n      color: var(--spectrum-textfield-placeholder-text-color-down);\n    }\n\n    & ~ .spectrum-Textfield-icon {\n      fill: var(--spectrum-textfield-icon-color-down);\n    }\n  }\n\n  &:focus,\n  &.is-focused {\n    border-color: var(--spectrum-textfield-border-color-down);\n  }\n\n  &:focus-ring {\n    &:not(:active) {\n      border-color: var(--spectrum-textfield-border-color-key-focus);\n      box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-key-focus);\n    }\n  }\n\n  &[disabled],\n  &.is-disabled {\n    background-color: var(--spectrum-textfield-background-color-disabled);\n    border-color: var(--spectrum-textfield-border-color-disabled);\n    color: var(--spectrum-textfield-text-color-disabled);\n\n    /* For safari mobile browser */\n    -webkit-text-fill-color: var(--spectrum-textfield-text-color-disabled);\n\n    &::placeholder,\n    &.is-placeholder {\n      color: var(--spectrum-textfield-placeholder-text-color-disabled);\n    }\n\n    & ~ .spectrum-Textfield-icon {\n      fill: var(--spectrum-textfield-icon-color-disabled);\n    }\n  }\n\n  &.spectrum-Textfield--invalid {\n    border-color: var(--spectrum-textfield-border-color-error);\n\n    &:hover {\n      border-color: var(--spectrum-textfield-border-color-error-hover);\n    }\n\n    &:active {\n      border-color: var(--spectrum-textfield-border-color-error-down);\n    }\n\n    &:focus-ring { /* might break things due to pre-defined focus-ring */\n      &:not(:active) {\n        border-color: var(--spectrum-textfield-border-color-error);\n        box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-error);\n      }\n    }\n  }\n\n  .spectrum-Textfield--quiet & {\n    background-color: var(--spectrum-textfield-quiet-background-color);\n    border-color: var(--spectrum-textfield-quiet-border-color);\n\n    &:hover {\n      border-color: var(--spectrum-textfield-quiet-border-color-hover);\n    }\n\n    &:active {\n      border-color: var(--spectrum-textfield-quiet-border-color-down);\n    }\n\n    &:focus,\n    &.is-focused {\n      border-color: var(--spectrum-textfield-quiet-border-color-key-focus);\n    }\n\n    &:focus-ring {\n      &:not(:active) {\n        border-color: var(--spectrum-textfield-border-color-key-focus);\n        box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-key-focus);\n      }\n    }\n\n    &:disabled,\n    &.is-disabled {\n      background-color: var(--spectrum-textfield-quiet-background-color-disabled);\n      border-color:  var(--spectrum-textfield-quiet-border-color-disabled);\n    }\n  }\n\n  .spectrum-Textfield.spectrum-Textfield--invalid & {\n    border-color: var(--spectrum-textfield-border-color-error);\n\n    &:focus-ring { /* might break things due to pre-defined focus-ring */\n      &:not(:active) {\n        border-color: var(--spectrum-textfield-border-color-error);\n        box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-error);\n      }\n    }\n  }\n\n  .spectrum-Textfield--quiet.spectrum-Textfield--invalid & {\n    &:focus-ring { /* might break things due to pre-defined focus-ring */\n      &:not(:active) {\n        box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);\n      }\n    }\n  }\n\n}\n\n.spectrum-Textfield-icon {\n  fill: var(--spectrum-textfield-icon-color);\n}\n\n.spectrum-Textfield-validationIcon {\n  .spectrum-Textfield--valid & {\n    fill: var(--spectrum-alert-success-icon-color);\n  }\n\n  .spectrum-Textfield--invalid & {\n    fill: var(--spectrum-alert-error-icon-color);\n  }\n}\n"],"names":[],"version":3,"file":"main.css.map"}