@sproutsocial/seeds-react-input 1.2.0 → 1.3.0

package/dist/esm/index.js

@@ -368,6 +368,7 @@ import "react";
 // src/index.ts
 var src_default = Input_default;
 export {
+  Accessory,
   Input_default as Input,
   src_default as default
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Input.tsx","../../src/styles.ts","../../src/InputTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\n\ninterface TypeState {\n  hasValue: boolean;\n}\n\n// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,\n// regardless of whether it is manually included as elemAfter or automatically included for type=\"search\" Inputs.\ntype TypeInputContext = Partial<{\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  clearButtonLabel: string;\n  hasValue: boolean;\n  size: \"large\" | \"small\" | \"default\";\n}>;\n\nconst InputContext = React.createContext<TypeInputContext>({});\n\nconst StyledButton = styled(Button)`\n  &:hover,\n  &:active {\n    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};\n  }\n`;\n\nconst ClearButton = () => {\n  const {\n    handleClear,\n    clearButtonLabel,\n    hasValue,\n    size: inputSize,\n  } = React.useContext(InputContext);\n\n  // Hide the button when there is no text to clear.\n  if (!hasValue) {\n    return null;\n  }\n\n  // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.\n  if (!clearButtonLabel) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.\"\n    );\n  }\n\n  // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.\n  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no \"small\" Button.\n  const py = inputSize === \"small\" ? 100 : undefined;\n  const px = inputSize === \"small\" ? 200 : undefined;\n  const buttonSize = inputSize === \"small\" ? \"default\" : inputSize;\n  return (\n    <StyledButton\n      onClick={handleClear}\n      size={buttonSize}\n      py={py}\n      px={px}\n      title={clearButtonLabel || \"Clear\"}\n      ariaLabel={clearButtonLabel || \"Clear\"}\n      color=\"icon.base\"\n    >\n      <Icon name=\"circle-x-outline\" aria-hidden />\n    </StyledButton>\n  );\n};\n\nClearButton.displayName = \"Input.ClearButton\";\n\n// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,\n// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isClearButton = (elem: any) => {\n  if (elem?.type) {\n    return elem.type.displayName === \"Input.ClearButton\";\n  }\n\n  return false;\n};\n\nclass Input extends React.Component<TypeInputProps, TypeState> {\n  constructor(props: TypeInputProps) {\n    super(props);\n    this.state = {\n      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear\n      // for both controlled and uncontrolled inputs.\n      hasValue: !!props.value,\n    };\n  }\n\n  override componentDidUpdate({ value: prevValue }: TypeInputProps) {\n    // Update hasValue state whenever props value changes\n    const { value } = this.props;\n    if (value !== prevValue) {\n      this.updateState(value || \"\");\n    }\n  }\n\n  static defaultProps = {\n    autoFocus: false,\n    disabled: false,\n    type: \"text\",\n    size: \"default\",\n    appearance: \"primary\",\n  };\n\n  static ClearButton = ClearButton;\n  // Define our own ref for use in handleClear.\n  // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.\n  inputRef = React.createRef<HTMLInputElement>();\n\n  handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>\n    this.props.onBlur?.(e);\n\n  handleClear = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        \"value\"\n      )?.set;\n\n      nativeInputValueSetter?.call(input, \"\");\n      const inputEvent = new Event(\"input\", {\n        bubbles: true,\n      });\n      input.dispatchEvent(inputEvent);\n\n      // call any onClear callback\n      this.props.onClear?.(e);\n\n      // wait for next cycle to update focus\n      setTimeout(() => {\n        input.focus();\n      }, 0);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n    this.props.onChange?.(e, e.currentTarget.value);\n    // needed for uncontrolled inputs\n    this.updateState(e.currentTarget.value);\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLInputElement>) =>\n    this.props.onFocus?.(e);\n\n  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>\n    this.props.onKeyDown?.(e, e.currentTarget.value);\n\n  handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) =>\n    this.props.onKeyUp?.(e, e.currentTarget.value);\n\n  handlePaste = (e: React.SyntheticEvent<HTMLInputElement>) =>\n    this.props.onPaste?.(e, e.currentTarget.value);\n\n  updateState = (inputValue: string) => {\n    const hasValue = inputValue !== \"\";\n    const previousHasValue = this.state.hasValue;\n\n    // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.\n    if (hasValue !== previousHasValue) {\n      this.setState({\n        hasValue,\n      });\n    }\n  };\n\n  override render() {\n    const {\n      autoComplete,\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      hasWarning,\n      id,\n      name,\n      placeholder,\n      type,\n      required,\n      value,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      clearButtonLabel,\n      innerRef,\n      // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct\n      /* eslint-disable @typescript-eslint/no-unused-vars */\n      onBlur,\n      onChange,\n      onClear,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      onPaste,\n      /* eslint-enable @typescript-eslint/no-unused-vars */\n      inputProps = {},\n      qa = {},\n      appearance,\n      size,\n      ...rest\n    } = this.props;\n\n    // Convert autoComplete from a boolean prop to a string value.\n    let autoCompleteValue: \"on\" | \"off\" | undefined;\n\n    if (autoComplete !== undefined) {\n      autoCompleteValue = autoComplete ? \"on\" : \"off\";\n    }\n\n    // Add default elemBefore and elemAfter elements if type is search.\n    const elementBefore =\n      type === \"search\" && !elemBefore ? (\n        <Icon name=\"magnifying-glass-outline\" aria-hidden color=\"icon.base\" />\n      ) : (\n        elemBefore\n      );\n\n    // Do not add a ClearButton if an elemAfter prop was passed.\n    const elementAfter =\n      type === \"search\" && !elemAfter ? <ClearButton /> : elemAfter;\n\n    return (\n      <Container\n        hasBeforeElement={!!elementBefore}\n        hasAfterElement={!!elementAfter}\n        disabled={disabled}\n        invalid={!!isInvalid}\n        warning={hasWarning}\n        appearance={appearance}\n        size={size}\n        {...rest}\n      >\n        <InputContext.Provider\n          value={{\n            handleClear: this.handleClear,\n            hasValue: this.state.hasValue,\n            clearButtonLabel,\n            size,\n          }}\n        >\n          {elementBefore && <Accessory before>{elementBefore}</Accessory>}\n\n          <input\n            aria-invalid={!!isInvalid}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby}\n            autoComplete={autoCompleteValue}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            readOnly={readOnly}\n            id={id}\n            name={name}\n            placeholder={placeholder}\n            type={type}\n            required={required}\n            value={value}\n            maxLength={maxLength}\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n            onKeyUp={this.handleKeyUp}\n            onPaste={this.handlePaste}\n            ref={mergeRefs([innerRef ?? null, this.inputRef])}\n            data-qa-input={name || \"\"}\n            data-qa-input-isdisabled={disabled === true}\n            data-qa-input-isrequired={required === true}\n            {...qa}\n            {...inputProps}\n          />\n\n          {elementAfter && (\n            <Accessory after isClearButton={isClearButton(elementAfter)}>\n              {elementAfter}\n            </Accessory>\n          )}\n        </InputContext.Provider>\n      </Container>\n    );\n  }\n}\n\nexport default Input;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeInputContainerProps } from \"./InputTypes\";\n\nconst Container = styled.div<TypeInputContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  input {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n    /** This matches the overall height of Button and Select */\n    margin: 0;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return props.theme.space[200];\n\n        case \"default\":\n        default:\n          return props.theme.space[300];\n      }\n    }};\n\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"16px\";\n      }\n    }};\n\n    /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &::-webkit-search-cancel-button {\n      appearance: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.hasBeforeElement &&\n      css`\n        padding-left: 40px;\n      `}\n\n    ${(props) =>\n      props.hasAfterElement &&\n      css`\n        padding-right: 40px;\n      `}\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n\n      input {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.appearance === \"primary\" &&\n    css`\n      input {\n        border: 1px solid ${(props) => props.theme.colors.form.border.base};\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      input {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n\t${(props) =>\n    props.warning &&\n    css`\n      input {\n        border-color: ${(props) => props.theme.colors.form.border.warning};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<{\n  before?: boolean;\n  after?: boolean;\n  isClearButton?: boolean;\n}>`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.before &&\n    css`\n      left: ${props.theme.space[300]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.isClearButton ? 0 : props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"InputContainer\";\nAccessory.displayName = \"InputAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface TypeBaseInputProps {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Input, like an error */\n  ariaDescribedby?: string;\n\n  /** Label for Input.ClearButton. Required when using Input.ClearButton. */\n  clearButtonLabel?: string;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\n\n  /** Current value of the input */\n  value?: string;\n\n  /** HTML type attribute */\n  type?: \"date\" | \"email\" | \"number\" | \"password\" | \"text\" | \"url\" | \"search\";\n\n  /** Set option to display earlier typed values */\n  autoComplete?: boolean;\n\n  /** Will autofocus the element when mounted to the DOM */\n  autoFocus?: boolean;\n\n  /** HTML disabled attribute */\n  disabled?: boolean;\n\n  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Whether or not the current contents of the input has any warnings */\n  hasWarning?: boolean;\n\n  /** HTML required attribute */\n  required?: boolean;\n\n  /** 16x16 element, such as an icon */\n  elemBefore?: React.ReactNode;\n\n  /** 16x16 element, such as an icon */\n  elemAfter?: React.ReactNode;\n\n  /** Max length of the input */\n  maxLength?: number;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLInputElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n  onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onPaste?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n  size?: \"large\" | \"small\" | \"default\";\n  qa?: object;\n\n  /**\n      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.\n      Note that this prop should only be used to alter styles and not functionality.\n  */\n  appearance?: \"primary\" | \"secondary\";\n}\n\nexport interface TypeInputProps\n  extends TypeBaseInputProps,\n    TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      keyof TypeBaseInputProps | \"color\"\n    > {}\n\nexport interface TypeInputContainerProps {\n  size: TypeInputProps[\"size\"];\n  appearance: TypeInputProps[\"appearance\"];\n  hasBeforeElement: boolean;\n  hasAfterElement: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  disabled?: boolean;\n}\n","import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport * from \"./InputTypes\";\n"],"mappings":"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","names":["styled","props","styled"]}
+{"version":3,"sources":["../../src/Input.tsx","../../src/styles.ts","../../src/InputTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\n\ninterface TypeState {\n  hasValue: boolean;\n}\n\n// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,\n// regardless of whether it is manually included as elemAfter or automatically included for type=\"search\" Inputs.\ntype TypeInputContext = Partial<{\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  clearButtonLabel: string;\n  hasValue: boolean;\n  size: \"large\" | \"small\" | \"default\";\n}>;\n\nconst InputContext = React.createContext<TypeInputContext>({});\n\nconst StyledButton = styled(Button)`\n  &:hover,\n  &:active {\n    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};\n  }\n`;\n\nconst ClearButton = () => {\n  const {\n    handleClear,\n    clearButtonLabel,\n    hasValue,\n    size: inputSize,\n  } = React.useContext(InputContext);\n\n  // Hide the button when there is no text to clear.\n  if (!hasValue) {\n    return null;\n  }\n\n  // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.\n  if (!clearButtonLabel) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.\"\n    );\n  }\n\n  // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.\n  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no \"small\" Button.\n  const py = inputSize === \"small\" ? 100 : undefined;\n  const px = inputSize === \"small\" ? 200 : undefined;\n  const buttonSize = inputSize === \"small\" ? \"default\" : inputSize;\n  return (\n    <StyledButton\n      onClick={handleClear}\n      size={buttonSize}\n      py={py}\n      px={px}\n      title={clearButtonLabel || \"Clear\"}\n      ariaLabel={clearButtonLabel || \"Clear\"}\n      color=\"icon.base\"\n    >\n      <Icon name=\"circle-x-outline\" aria-hidden />\n    </StyledButton>\n  );\n};\n\nClearButton.displayName = \"Input.ClearButton\";\n\n// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,\n// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isClearButton = (elem: any) => {\n  if (elem?.type) {\n    return elem.type.displayName === \"Input.ClearButton\";\n  }\n\n  return false;\n};\n\nclass Input extends React.Component<TypeInputProps, TypeState> {\n  constructor(props: TypeInputProps) {\n    super(props);\n    this.state = {\n      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear\n      // for both controlled and uncontrolled inputs.\n      hasValue: !!props.value,\n    };\n  }\n\n  override componentDidUpdate({ value: prevValue }: TypeInputProps) {\n    // Update hasValue state whenever props value changes\n    const { value } = this.props;\n    if (value !== prevValue) {\n      this.updateState(value || \"\");\n    }\n  }\n\n  static defaultProps = {\n    autoFocus: false,\n    disabled: false,\n    type: \"text\",\n    size: \"default\",\n    appearance: \"primary\",\n  };\n\n  static ClearButton = ClearButton;\n  // Define our own ref for use in handleClear.\n  // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.\n  inputRef = React.createRef<HTMLInputElement>();\n\n  handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>\n    this.props.onBlur?.(e);\n\n  handleClear = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        \"value\"\n      )?.set;\n\n      nativeInputValueSetter?.call(input, \"\");\n      const inputEvent = new Event(\"input\", {\n        bubbles: true,\n      });\n      input.dispatchEvent(inputEvent);\n\n      // call any onClear callback\n      this.props.onClear?.(e);\n\n      // wait for next cycle to update focus\n      setTimeout(() => {\n        input.focus();\n      }, 0);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n    this.props.onChange?.(e, e.currentTarget.value);\n    // needed for uncontrolled inputs\n    this.updateState(e.currentTarget.value);\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLInputElement>) =>\n    this.props.onFocus?.(e);\n\n  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>\n    this.props.onKeyDown?.(e, e.currentTarget.value);\n\n  handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) =>\n    this.props.onKeyUp?.(e, e.currentTarget.value);\n\n  handlePaste = (e: React.SyntheticEvent<HTMLInputElement>) =>\n    this.props.onPaste?.(e, e.currentTarget.value);\n\n  updateState = (inputValue: string) => {\n    const hasValue = inputValue !== \"\";\n    const previousHasValue = this.state.hasValue;\n\n    // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.\n    if (hasValue !== previousHasValue) {\n      this.setState({\n        hasValue,\n      });\n    }\n  };\n\n  override render() {\n    const {\n      autoComplete,\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      hasWarning,\n      id,\n      name,\n      placeholder,\n      type,\n      required,\n      value,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      clearButtonLabel,\n      innerRef,\n      // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct\n      /* eslint-disable @typescript-eslint/no-unused-vars */\n      onBlur,\n      onChange,\n      onClear,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      onPaste,\n      /* eslint-enable @typescript-eslint/no-unused-vars */\n      inputProps = {},\n      qa = {},\n      appearance,\n      size,\n      ...rest\n    } = this.props;\n\n    // Convert autoComplete from a boolean prop to a string value.\n    let autoCompleteValue: \"on\" | \"off\" | undefined;\n\n    if (autoComplete !== undefined) {\n      autoCompleteValue = autoComplete ? \"on\" : \"off\";\n    }\n\n    // Add default elemBefore and elemAfter elements if type is search.\n    const elementBefore =\n      type === \"search\" && !elemBefore ? (\n        <Icon name=\"magnifying-glass-outline\" aria-hidden color=\"icon.base\" />\n      ) : (\n        elemBefore\n      );\n\n    // Do not add a ClearButton if an elemAfter prop was passed.\n    const elementAfter =\n      type === \"search\" && !elemAfter ? <ClearButton /> : elemAfter;\n\n    return (\n      <Container\n        hasBeforeElement={!!elementBefore}\n        hasAfterElement={!!elementAfter}\n        disabled={disabled}\n        invalid={!!isInvalid}\n        warning={hasWarning}\n        appearance={appearance}\n        size={size}\n        {...rest}\n      >\n        <InputContext.Provider\n          value={{\n            handleClear: this.handleClear,\n            hasValue: this.state.hasValue,\n            clearButtonLabel,\n            size,\n          }}\n        >\n          {elementBefore && <Accessory before>{elementBefore}</Accessory>}\n\n          <input\n            aria-invalid={!!isInvalid}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby}\n            autoComplete={autoCompleteValue}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            readOnly={readOnly}\n            id={id}\n            name={name}\n            placeholder={placeholder}\n            type={type}\n            required={required}\n            value={value}\n            maxLength={maxLength}\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n            onKeyUp={this.handleKeyUp}\n            onPaste={this.handlePaste}\n            ref={mergeRefs([innerRef ?? null, this.inputRef])}\n            data-qa-input={name || \"\"}\n            data-qa-input-isdisabled={disabled === true}\n            data-qa-input-isrequired={required === true}\n            {...qa}\n            {...inputProps}\n          />\n\n          {elementAfter && (\n            <Accessory after isClearButton={isClearButton(elementAfter)}>\n              {elementAfter}\n            </Accessory>\n          )}\n        </InputContext.Provider>\n      </Container>\n    );\n  }\n}\n\nexport default Input;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeInputContainerProps } from \"./InputTypes\";\n\nconst Container = styled.div<TypeInputContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  input {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n    /** This matches the overall height of Button and Select */\n    margin: 0;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return props.theme.space[200];\n\n        case \"default\":\n        default:\n          return props.theme.space[300];\n      }\n    }};\n\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"16px\";\n      }\n    }};\n\n    /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &::-webkit-search-cancel-button {\n      appearance: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.hasBeforeElement &&\n      css`\n        padding-left: 40px;\n      `}\n\n    ${(props) =>\n      props.hasAfterElement &&\n      css`\n        padding-right: 40px;\n      `}\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n\n      input {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.appearance === \"primary\" &&\n    css`\n      input {\n        border: 1px solid ${(props) => props.theme.colors.form.border.base};\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      input {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n\t${(props) =>\n    props.warning &&\n    css`\n      input {\n        border-color: ${(props) => props.theme.colors.form.border.warning};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<{\n  before?: boolean;\n  after?: boolean;\n  isClearButton?: boolean;\n}>`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.before &&\n    css`\n      left: ${props.theme.space[300]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.isClearButton ? 0 : props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"InputContainer\";\nAccessory.displayName = \"InputAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface TypeBaseInputProps {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Input, like an error */\n  ariaDescribedby?: string;\n\n  /** Label for Input.ClearButton. Required when using Input.ClearButton. */\n  clearButtonLabel?: string;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\n\n  /** Current value of the input */\n  value?: string;\n\n  /** HTML type attribute */\n  type?: \"date\" | \"email\" | \"number\" | \"password\" | \"text\" | \"url\" | \"search\";\n\n  /** Set option to display earlier typed values */\n  autoComplete?: boolean;\n\n  /** Will autofocus the element when mounted to the DOM */\n  autoFocus?: boolean;\n\n  /** HTML disabled attribute */\n  disabled?: boolean;\n\n  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Whether or not the current contents of the input has any warnings */\n  hasWarning?: boolean;\n\n  /** HTML required attribute */\n  required?: boolean;\n\n  /** 16x16 element, such as an icon */\n  elemBefore?: React.ReactNode;\n\n  /** 16x16 element, such as an icon */\n  elemAfter?: React.ReactNode;\n\n  /** Max length of the input */\n  maxLength?: number;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLInputElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n  onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onPaste?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n  size?: \"large\" | \"small\" | \"default\";\n  qa?: object;\n\n  /**\n      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.\n      Note that this prop should only be used to alter styles and not functionality.\n  */\n  appearance?: \"primary\" | \"secondary\";\n}\n\nexport interface TypeInputProps\n  extends TypeBaseInputProps,\n    TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      keyof TypeBaseInputProps | \"color\"\n    > {}\n\nexport interface TypeInputContainerProps {\n  size: TypeInputProps[\"size\"];\n  appearance: TypeInputProps[\"appearance\"];\n  hasBeforeElement: boolean;\n  hasAfterElement: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  disabled?: boolean;\n}\n","import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport { Accessory } from \"./styles\";\nexport * from \"./InputTypes\";\n"],"mappings":"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","names":["styled","props","styled"]}

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import * as styled_components from 'styled-components';
 
 interface TypeBaseInputProps {
     /** ID of the form element, should match the "for" value of the associated label */
@@ -100,4 +101,10 @@ declare class Input extends React.Component<TypeInputProps, TypeState> {
     render(): react_jsx_runtime.JSX.Element;
 }
 
-export { Input, type TypeInputContainerProps, type TypeInputProps, Input as default };
+declare const Accessory: styled_components.StyledComponent<"div", any, {
+    before?: boolean;
+    after?: boolean;
+    isClearButton?: boolean;
+}, never>;
+
+export { Accessory, Input, type TypeInputContainerProps, type TypeInputProps, Input as default };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import * as styled_components from 'styled-components';
 
 interface TypeBaseInputProps {
     /** ID of the form element, should match the "for" value of the associated label */
@@ -100,4 +101,10 @@ declare class Input extends React.Component<TypeInputProps, TypeState> {
     render(): react_jsx_runtime.JSX.Element;
 }
 
-export { Input, type TypeInputContainerProps, type TypeInputProps, Input as default };
+declare const Accessory: styled_components.StyledComponent<"div", any, {
+    before?: boolean;
+    after?: boolean;
+    isClearButton?: boolean;
+}, never>;
+
+export { Accessory, Input, type TypeInputContainerProps, type TypeInputProps, Input as default };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Accessory: () => Accessory,
   Input: () => Input_default,
   default: () => src_default
 });
@@ -406,6 +407,7 @@ var React2 = require("react");
 var src_default = Input_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accessory,
   Input
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Input.tsx","../src/styles.ts","../src/InputTypes.ts"],"sourcesContent":["import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport * from \"./InputTypes\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\n\ninterface TypeState {\n  hasValue: boolean;\n}\n\n// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,\n// regardless of whether it is manually included as elemAfter or automatically included for type=\"search\" Inputs.\ntype TypeInputContext = Partial<{\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  clearButtonLabel: string;\n  hasValue: boolean;\n  size: \"large\" | \"small\" | \"default\";\n}>;\n\nconst InputContext = React.createContext<TypeInputContext>({});\n\nconst StyledButton = styled(Button)`\n  &:hover,\n  &:active {\n    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};\n  }\n`;\n\nconst ClearButton = () => {\n  const {\n    handleClear,\n    clearButtonLabel,\n    hasValue,\n    size: inputSize,\n  } = React.useContext(InputContext);\n\n  // Hide the button when there is no text to clear.\n  if (!hasValue) {\n    return null;\n  }\n\n  // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.\n  if (!clearButtonLabel) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.\"\n    );\n  }\n\n  // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.\n  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no \"small\" Button.\n  const py = inputSize === \"small\" ? 100 : undefined;\n  const px = inputSize === \"small\" ? 200 : undefined;\n  const buttonSize = inputSize === \"small\" ? \"default\" : inputSize;\n  return (\n    <StyledButton\n      onClick={handleClear}\n      size={buttonSize}\n      py={py}\n      px={px}\n      title={clearButtonLabel || \"Clear\"}\n      ariaLabel={clearButtonLabel || \"Clear\"}\n      color=\"icon.base\"\n    >\n      <Icon name=\"circle-x-outline\" aria-hidden />\n    </StyledButton>\n  );\n};\n\nClearButton.displayName = \"Input.ClearButton\";\n\n// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,\n// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isClearButton = (elem: any) => {\n  if (elem?.type) {\n    return elem.type.displayName === \"Input.ClearButton\";\n  }\n\n  return false;\n};\n\nclass Input extends React.Component<TypeInputProps, TypeState> {\n  constructor(props: TypeInputProps) {\n    super(props);\n    this.state = {\n      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear\n      // for both controlled and uncontrolled inputs.\n      hasValue: !!props.value,\n    };\n  }\n\n  override componentDidUpdate({ value: prevValue }: TypeInputProps) {\n    // Update hasValue state whenever props value changes\n    const { value } = this.props;\n    if (value !== prevValue) {\n      this.updateState(value || \"\");\n    }\n  }\n\n  static defaultProps = {\n    autoFocus: false,\n    disabled: false,\n    type: \"text\",\n    size: \"default\",\n    appearance: \"primary\",\n  };\n\n  static ClearButton = ClearButton;\n  // Define our own ref for use in handleClear.\n  // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.\n  inputRef = React.createRef<HTMLInputElement>();\n\n  handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>\n    this.props.onBlur?.(e);\n\n  handleClear = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        \"value\"\n      )?.set;\n\n      nativeInputValueSetter?.call(input, \"\");\n      const inputEvent = new Event(\"input\", {\n        bubbles: true,\n      });\n      input.dispatchEvent(inputEvent);\n\n      // call any onClear callback\n      this.props.onClear?.(e);\n\n      // wait for next cycle to update focus\n      setTimeout(() => {\n        input.focus();\n      }, 0);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n    this.props.onChange?.(e, e.currentTarget.value);\n    // needed for uncontrolled inputs\n    this.updateState(e.currentTarget.value);\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLInputElement>) =>\n    this.props.onFocus?.(e);\n\n  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>\n    this.props.onKeyDown?.(e, e.currentTarget.value);\n\n  handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) =>\n    this.props.onKeyUp?.(e, e.currentTarget.value);\n\n  handlePaste = (e: React.SyntheticEvent<HTMLInputElement>) =>\n    this.props.onPaste?.(e, e.currentTarget.value);\n\n  updateState = (inputValue: string) => {\n    const hasValue = inputValue !== \"\";\n    const previousHasValue = this.state.hasValue;\n\n    // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.\n    if (hasValue !== previousHasValue) {\n      this.setState({\n        hasValue,\n      });\n    }\n  };\n\n  override render() {\n    const {\n      autoComplete,\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      hasWarning,\n      id,\n      name,\n      placeholder,\n      type,\n      required,\n      value,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      clearButtonLabel,\n      innerRef,\n      // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct\n      /* eslint-disable @typescript-eslint/no-unused-vars */\n      onBlur,\n      onChange,\n      onClear,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      onPaste,\n      /* eslint-enable @typescript-eslint/no-unused-vars */\n      inputProps = {},\n      qa = {},\n      appearance,\n      size,\n      ...rest\n    } = this.props;\n\n    // Convert autoComplete from a boolean prop to a string value.\n    let autoCompleteValue: \"on\" | \"off\" | undefined;\n\n    if (autoComplete !== undefined) {\n      autoCompleteValue = autoComplete ? \"on\" : \"off\";\n    }\n\n    // Add default elemBefore and elemAfter elements if type is search.\n    const elementBefore =\n      type === \"search\" && !elemBefore ? (\n        <Icon name=\"magnifying-glass-outline\" aria-hidden color=\"icon.base\" />\n      ) : (\n        elemBefore\n      );\n\n    // Do not add a ClearButton if an elemAfter prop was passed.\n    const elementAfter =\n      type === \"search\" && !elemAfter ? <ClearButton /> : elemAfter;\n\n    return (\n      <Container\n        hasBeforeElement={!!elementBefore}\n        hasAfterElement={!!elementAfter}\n        disabled={disabled}\n        invalid={!!isInvalid}\n        warning={hasWarning}\n        appearance={appearance}\n        size={size}\n        {...rest}\n      >\n        <InputContext.Provider\n          value={{\n            handleClear: this.handleClear,\n            hasValue: this.state.hasValue,\n            clearButtonLabel,\n            size,\n          }}\n        >\n          {elementBefore && <Accessory before>{elementBefore}</Accessory>}\n\n          <input\n            aria-invalid={!!isInvalid}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby}\n            autoComplete={autoCompleteValue}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            readOnly={readOnly}\n            id={id}\n            name={name}\n            placeholder={placeholder}\n            type={type}\n            required={required}\n            value={value}\n            maxLength={maxLength}\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n            onKeyUp={this.handleKeyUp}\n            onPaste={this.handlePaste}\n            ref={mergeRefs([innerRef ?? null, this.inputRef])}\n            data-qa-input={name || \"\"}\n            data-qa-input-isdisabled={disabled === true}\n            data-qa-input-isrequired={required === true}\n            {...qa}\n            {...inputProps}\n          />\n\n          {elementAfter && (\n            <Accessory after isClearButton={isClearButton(elementAfter)}>\n              {elementAfter}\n            </Accessory>\n          )}\n        </InputContext.Provider>\n      </Container>\n    );\n  }\n}\n\nexport default Input;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeInputContainerProps } from \"./InputTypes\";\n\nconst Container = styled.div<TypeInputContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  input {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n    /** This matches the overall height of Button and Select */\n    margin: 0;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return props.theme.space[200];\n\n        case \"default\":\n        default:\n          return props.theme.space[300];\n      }\n    }};\n\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"16px\";\n      }\n    }};\n\n    /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &::-webkit-search-cancel-button {\n      appearance: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.hasBeforeElement &&\n      css`\n        padding-left: 40px;\n      `}\n\n    ${(props) =>\n      props.hasAfterElement &&\n      css`\n        padding-right: 40px;\n      `}\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n\n      input {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.appearance === \"primary\" &&\n    css`\n      input {\n        border: 1px solid ${(props) => props.theme.colors.form.border.base};\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      input {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n\t${(props) =>\n    props.warning &&\n    css`\n      input {\n        border-color: ${(props) => props.theme.colors.form.border.warning};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<{\n  before?: boolean;\n  after?: boolean;\n  isClearButton?: boolean;\n}>`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.before &&\n    css`\n      left: ${props.theme.space[300]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.isClearButton ? 0 : props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"InputContainer\";\nAccessory.displayName = \"InputAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface TypeBaseInputProps {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Input, like an error */\n  ariaDescribedby?: string;\n\n  /** Label for Input.ClearButton. Required when using Input.ClearButton. */\n  clearButtonLabel?: string;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\n\n  /** Current value of the input */\n  value?: string;\n\n  /** HTML type attribute */\n  type?: \"date\" | \"email\" | \"number\" | \"password\" | \"text\" | \"url\" | \"search\";\n\n  /** Set option to display earlier typed values */\n  autoComplete?: boolean;\n\n  /** Will autofocus the element when mounted to the DOM */\n  autoFocus?: boolean;\n\n  /** HTML disabled attribute */\n  disabled?: boolean;\n\n  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Whether or not the current contents of the input has any warnings */\n  hasWarning?: boolean;\n\n  /** HTML required attribute */\n  required?: boolean;\n\n  /** 16x16 element, such as an icon */\n  elemBefore?: React.ReactNode;\n\n  /** 16x16 element, such as an icon */\n  elemAfter?: React.ReactNode;\n\n  /** Max length of the input */\n  maxLength?: number;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLInputElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n  onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onPaste?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n  size?: \"large\" | \"small\" | \"default\";\n  qa?: object;\n\n  /**\n      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.\n      Note that this prop should only be used to alter styles and not functionality.\n  */\n  appearance?: \"primary\" | \"secondary\";\n}\n\nexport interface TypeInputProps\n  extends TypeBaseInputProps,\n    TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      keyof TypeBaseInputProps | \"color\"\n    > {}\n\nexport interface TypeInputContainerProps {\n  size: TypeInputProps[\"size\"];\n  appearance: TypeInputProps[\"appearance\"];\n  hasBeforeElement: boolean;\n  hasAfterElement: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  disabled?: boolean;\n}\n"],"mappings":"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","names":["import_styled_components","styled","props","styled","Button","Icon","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Input.tsx","../src/styles.ts","../src/InputTypes.ts"],"sourcesContent":["import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport { Accessory } from \"./styles\";\nexport * from \"./InputTypes\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\n\ninterface TypeState {\n  hasValue: boolean;\n}\n\n// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,\n// regardless of whether it is manually included as elemAfter or automatically included for type=\"search\" Inputs.\ntype TypeInputContext = Partial<{\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  clearButtonLabel: string;\n  hasValue: boolean;\n  size: \"large\" | \"small\" | \"default\";\n}>;\n\nconst InputContext = React.createContext<TypeInputContext>({});\n\nconst StyledButton = styled(Button)`\n  &:hover,\n  &:active {\n    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};\n  }\n`;\n\nconst ClearButton = () => {\n  const {\n    handleClear,\n    clearButtonLabel,\n    hasValue,\n    size: inputSize,\n  } = React.useContext(InputContext);\n\n  // Hide the button when there is no text to clear.\n  if (!hasValue) {\n    return null;\n  }\n\n  // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.\n  if (!clearButtonLabel) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.\"\n    );\n  }\n\n  // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.\n  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no \"small\" Button.\n  const py = inputSize === \"small\" ? 100 : undefined;\n  const px = inputSize === \"small\" ? 200 : undefined;\n  const buttonSize = inputSize === \"small\" ? \"default\" : inputSize;\n  return (\n    <StyledButton\n      onClick={handleClear}\n      size={buttonSize}\n      py={py}\n      px={px}\n      title={clearButtonLabel || \"Clear\"}\n      ariaLabel={clearButtonLabel || \"Clear\"}\n      color=\"icon.base\"\n    >\n      <Icon name=\"circle-x-outline\" aria-hidden />\n    </StyledButton>\n  );\n};\n\nClearButton.displayName = \"Input.ClearButton\";\n\n// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,\n// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isClearButton = (elem: any) => {\n  if (elem?.type) {\n    return elem.type.displayName === \"Input.ClearButton\";\n  }\n\n  return false;\n};\n\nclass Input extends React.Component<TypeInputProps, TypeState> {\n  constructor(props: TypeInputProps) {\n    super(props);\n    this.state = {\n      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear\n      // for both controlled and uncontrolled inputs.\n      hasValue: !!props.value,\n    };\n  }\n\n  override componentDidUpdate({ value: prevValue }: TypeInputProps) {\n    // Update hasValue state whenever props value changes\n    const { value } = this.props;\n    if (value !== prevValue) {\n      this.updateState(value || \"\");\n    }\n  }\n\n  static defaultProps = {\n    autoFocus: false,\n    disabled: false,\n    type: \"text\",\n    size: \"default\",\n    appearance: \"primary\",\n  };\n\n  static ClearButton = ClearButton;\n  // Define our own ref for use in handleClear.\n  // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.\n  inputRef = React.createRef<HTMLInputElement>();\n\n  handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>\n    this.props.onBlur?.(e);\n\n  handleClear = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        \"value\"\n      )?.set;\n\n      nativeInputValueSetter?.call(input, \"\");\n      const inputEvent = new Event(\"input\", {\n        bubbles: true,\n      });\n      input.dispatchEvent(inputEvent);\n\n      // call any onClear callback\n      this.props.onClear?.(e);\n\n      // wait for next cycle to update focus\n      setTimeout(() => {\n        input.focus();\n      }, 0);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n    this.props.onChange?.(e, e.currentTarget.value);\n    // needed for uncontrolled inputs\n    this.updateState(e.currentTarget.value);\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLInputElement>) =>\n    this.props.onFocus?.(e);\n\n  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>\n    this.props.onKeyDown?.(e, e.currentTarget.value);\n\n  handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) =>\n    this.props.onKeyUp?.(e, e.currentTarget.value);\n\n  handlePaste = (e: React.SyntheticEvent<HTMLInputElement>) =>\n    this.props.onPaste?.(e, e.currentTarget.value);\n\n  updateState = (inputValue: string) => {\n    const hasValue = inputValue !== \"\";\n    const previousHasValue = this.state.hasValue;\n\n    // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.\n    if (hasValue !== previousHasValue) {\n      this.setState({\n        hasValue,\n      });\n    }\n  };\n\n  override render() {\n    const {\n      autoComplete,\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      hasWarning,\n      id,\n      name,\n      placeholder,\n      type,\n      required,\n      value,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      clearButtonLabel,\n      innerRef,\n      // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct\n      /* eslint-disable @typescript-eslint/no-unused-vars */\n      onBlur,\n      onChange,\n      onClear,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      onPaste,\n      /* eslint-enable @typescript-eslint/no-unused-vars */\n      inputProps = {},\n      qa = {},\n      appearance,\n      size,\n      ...rest\n    } = this.props;\n\n    // Convert autoComplete from a boolean prop to a string value.\n    let autoCompleteValue: \"on\" | \"off\" | undefined;\n\n    if (autoComplete !== undefined) {\n      autoCompleteValue = autoComplete ? \"on\" : \"off\";\n    }\n\n    // Add default elemBefore and elemAfter elements if type is search.\n    const elementBefore =\n      type === \"search\" && !elemBefore ? (\n        <Icon name=\"magnifying-glass-outline\" aria-hidden color=\"icon.base\" />\n      ) : (\n        elemBefore\n      );\n\n    // Do not add a ClearButton if an elemAfter prop was passed.\n    const elementAfter =\n      type === \"search\" && !elemAfter ? <ClearButton /> : elemAfter;\n\n    return (\n      <Container\n        hasBeforeElement={!!elementBefore}\n        hasAfterElement={!!elementAfter}\n        disabled={disabled}\n        invalid={!!isInvalid}\n        warning={hasWarning}\n        appearance={appearance}\n        size={size}\n        {...rest}\n      >\n        <InputContext.Provider\n          value={{\n            handleClear: this.handleClear,\n            hasValue: this.state.hasValue,\n            clearButtonLabel,\n            size,\n          }}\n        >\n          {elementBefore && <Accessory before>{elementBefore}</Accessory>}\n\n          <input\n            aria-invalid={!!isInvalid}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby}\n            autoComplete={autoCompleteValue}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            readOnly={readOnly}\n            id={id}\n            name={name}\n            placeholder={placeholder}\n            type={type}\n            required={required}\n            value={value}\n            maxLength={maxLength}\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n            onKeyUp={this.handleKeyUp}\n            onPaste={this.handlePaste}\n            ref={mergeRefs([innerRef ?? null, this.inputRef])}\n            data-qa-input={name || \"\"}\n            data-qa-input-isdisabled={disabled === true}\n            data-qa-input-isrequired={required === true}\n            {...qa}\n            {...inputProps}\n          />\n\n          {elementAfter && (\n            <Accessory after isClearButton={isClearButton(elementAfter)}>\n              {elementAfter}\n            </Accessory>\n          )}\n        </InputContext.Provider>\n      </Container>\n    );\n  }\n}\n\nexport default Input;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeInputContainerProps } from \"./InputTypes\";\n\nconst Container = styled.div<TypeInputContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  input {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n    /** This matches the overall height of Button and Select */\n    margin: 0;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return props.theme.space[200];\n\n        case \"default\":\n        default:\n          return props.theme.space[300];\n      }\n    }};\n\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"16px\";\n      }\n    }};\n\n    /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &::-webkit-search-cancel-button {\n      appearance: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.hasBeforeElement &&\n      css`\n        padding-left: 40px;\n      `}\n\n    ${(props) =>\n      props.hasAfterElement &&\n      css`\n        padding-right: 40px;\n      `}\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n\n      input {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.appearance === \"primary\" &&\n    css`\n      input {\n        border: 1px solid ${(props) => props.theme.colors.form.border.base};\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      input {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n\t${(props) =>\n    props.warning &&\n    css`\n      input {\n        border-color: ${(props) => props.theme.colors.form.border.warning};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<{\n  before?: boolean;\n  after?: boolean;\n  isClearButton?: boolean;\n}>`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.before &&\n    css`\n      left: ${props.theme.space[300]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.isClearButton ? 0 : props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"InputContainer\";\nAccessory.displayName = \"InputAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface TypeBaseInputProps {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Input, like an error */\n  ariaDescribedby?: string;\n\n  /** Label for Input.ClearButton. Required when using Input.ClearButton. */\n  clearButtonLabel?: string;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\n\n  /** Current value of the input */\n  value?: string;\n\n  /** HTML type attribute */\n  type?: \"date\" | \"email\" | \"number\" | \"password\" | \"text\" | \"url\" | \"search\";\n\n  /** Set option to display earlier typed values */\n  autoComplete?: boolean;\n\n  /** Will autofocus the element when mounted to the DOM */\n  autoFocus?: boolean;\n\n  /** HTML disabled attribute */\n  disabled?: boolean;\n\n  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Whether or not the current contents of the input has any warnings */\n  hasWarning?: boolean;\n\n  /** HTML required attribute */\n  required?: boolean;\n\n  /** 16x16 element, such as an icon */\n  elemBefore?: React.ReactNode;\n\n  /** 16x16 element, such as an icon */\n  elemAfter?: React.ReactNode;\n\n  /** Max length of the input */\n  maxLength?: number;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLInputElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n  onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onPaste?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n  size?: \"large\" | \"small\" | \"default\";\n  qa?: object;\n\n  /**\n      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.\n      Note that this prop should only be used to alter styles and not functionality.\n  */\n  appearance?: \"primary\" | \"secondary\";\n}\n\nexport interface TypeInputProps\n  extends TypeBaseInputProps,\n    TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      keyof TypeBaseInputProps | \"color\"\n    > {}\n\nexport interface TypeInputContainerProps {\n  size: TypeInputProps[\"size\"];\n  appearance: TypeInputProps[\"appearance\"];\n  hasBeforeElement: boolean;\n  hasAfterElement: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  disabled?: boolean;\n}\n"],"mappings":"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","names":["import_styled_components","styled","props","styled","Button","Icon","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-input",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Seeds Input",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",