@sproutsocial/seeds-react-input 1.5.29 → 1.5.31

package/dist/esm/index.js

@@ -1,10 +1,11 @@
-// src/Input.tsx
-import * as React from "react";
-import styled2 from "styled-components";
+// src/InputHybrid.tsx
+import "react";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+
+// src/InputStyledComponents.tsx
+import * as React2 from "react";
 import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
-import { useInteractiveColor } from "@sproutsocial/seeds-react-hooks";
-import Button from "@sproutsocial/seeds-react-button";
-import Icon from "@sproutsocial/seeds-react-icon";
+import Icon2 from "@sproutsocial/seeds-react-icon";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -150,8 +151,13 @@ Container.displayName = "InputContainer";
 Accessory.displayName = "InputAccessory";
 var styles_default = Container;
 
-// src/Input.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/shared.tsx
+import * as React from "react";
+import styled2 from "styled-components";
+import { useInteractiveColor } from "@sproutsocial/seeds-react-hooks";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { jsx } from "react/jsx-runtime";
 var InputContext = React.createContext({});
 var StyledButton = styled2(Button)`
   &:hover,
@@ -198,7 +204,10 @@ var isClearButton = (elem) => {
   }
   return false;
 };
-var Input = class extends React.Component {
+
+// src/InputStyledComponents.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var InputStyledComponents = class extends React2.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -220,10 +229,9 @@ var Input = class extends React.Component {
     size: "default",
     appearance: "primary"
   };
-  static ClearButton = ClearButton;
   // Define our own ref for use in handleClear.
   // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
-  inputRef = React.createRef();
+  inputRef = React2.createRef();
   handleBlur = (e) => this.props.onBlur?.(e);
   handleClear = (e) => {
     const input = this.inputRef.current;
@@ -301,9 +309,9 @@ var Input = class extends React.Component {
     if (autoComplete !== void 0) {
       autoCompleteValue = autoComplete ? "on" : "off";
     }
-    const elementBefore = type === "search" && !elemBefore ? /* @__PURE__ */ jsx(Icon, { name: "magnifying-glass-outline", "aria-hidden": true, color: "icon.base" }) : elemBefore;
-    const elementAfter = type === "search" && !elemAfter ? /* @__PURE__ */ jsx(ClearButton, {}) : elemAfter;
-    return /* @__PURE__ */ jsx(
+    const elementBefore = type === "search" && !elemBefore ? /* @__PURE__ */ jsx2(Icon2, { name: "magnifying-glass-outline", "aria-hidden": true, color: "icon.base" }) : elemBefore;
+    const elementAfter = type === "search" && !elemAfter ? /* @__PURE__ */ jsx2(ClearButton, {}) : elemAfter;
+    return /* @__PURE__ */ jsx2(
       styles_default,
       {
         hasBeforeElement: !!elementBefore,
@@ -324,8 +332,8 @@ var Input = class extends React.Component {
               size
             },
             children: [
-              elementBefore && /* @__PURE__ */ jsx(Accessory, { before: true, children: elementBefore }),
-              /* @__PURE__ */ jsx(
+              elementBefore && /* @__PURE__ */ jsx2(Accessory, { before: true, children: elementBefore }),
+              /* @__PURE__ */ jsx2(
                 "input",
                 {
                   "aria-invalid": !!isInvalid,
@@ -357,7 +365,7 @@ var Input = class extends React.Component {
                   ...inputProps
                 }
               ),
-              elementAfter && /* @__PURE__ */ jsx(Accessory, { after: true, isClearButton: isClearButton(elementAfter), children: elementAfter })
+              elementAfter && /* @__PURE__ */ jsx2(Accessory, { after: true, isClearButton: isClearButton(elementAfter), children: elementAfter })
             ]
           }
         )
@@ -365,7 +373,220 @@ var Input = class extends React.Component {
     );
   }
 };
-var Input_default = Input;
+var InputStyledComponents_default = InputStyledComponents;
+
+// src/InputTailwind.tsx
+import * as React3 from "react";
+import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
+import Icon3 from "@sproutsocial/seeds-react-icon";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var InputTailwind = class extends React3.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
+      // for both controlled and uncontrolled inputs.
+      hasValue: !!props.value
+    };
+  }
+  componentDidUpdate({ value: prevValue }) {
+    const { value } = this.props;
+    if (value !== prevValue) {
+      this.updateState(value || "");
+    }
+  }
+  static defaultProps = {
+    autoFocus: false,
+    disabled: false,
+    type: "text",
+    size: "default",
+    appearance: "primary"
+  };
+  // Define our own ref for use in handleClear.
+  // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
+  inputRef = React3.createRef();
+  handleBlur = (e) => this.props.onBlur?.(e);
+  handleClear = (e) => {
+    const input = this.inputRef.current;
+    if (input) {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      nativeInputValueSetter?.call(input, "");
+      const inputEvent = new Event("input", {
+        bubbles: true
+      });
+      input.dispatchEvent(inputEvent);
+      this.props.onClear?.(e);
+      setTimeout(() => {
+        input.focus();
+      }, 0);
+    }
+  };
+  handleChange = (e) => {
+    this.props.onChange?.(e, e.currentTarget.value);
+    this.updateState(e.currentTarget.value);
+  };
+  handleFocus = (e) => this.props.onFocus?.(e);
+  handleKeyDown = (e) => this.props.onKeyDown?.(e, e.currentTarget.value);
+  handleKeyUp = (e) => this.props.onKeyUp?.(e, e.currentTarget.value);
+  handlePaste = (e) => this.props.onPaste?.(e, e.currentTarget.value);
+  updateState = (inputValue) => {
+    const hasValue = inputValue !== "";
+    const previousHasValue = this.state.hasValue;
+    if (hasValue !== previousHasValue) {
+      this.setState({
+        hasValue
+      });
+    }
+  };
+  render() {
+    const {
+      autoComplete,
+      autoFocus,
+      disabled,
+      readOnly,
+      isInvalid,
+      hasWarning,
+      id,
+      name,
+      placeholder,
+      type,
+      required,
+      value,
+      elemBefore,
+      elemAfter,
+      maxLength,
+      ariaLabel,
+      ariaDescribedby,
+      clearButtonLabel,
+      innerRef = null,
+      // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      onBlur,
+      onChange,
+      onClear,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      onPaste,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      inputProps = {},
+      qa = {},
+      appearance,
+      size,
+      className,
+      ...rest
+    } = this.props;
+    let autoCompleteValue;
+    if (autoComplete !== void 0) {
+      autoCompleteValue = autoComplete ? "on" : "off";
+    }
+    const elementBefore = type === "search" && !elemBefore ? /* @__PURE__ */ jsx3(Icon3, { name: "magnifying-glass-outline", "aria-hidden": true, color: "icon.base" }) : elemBefore;
+    const elementAfter = type === "search" && !elemAfter ? /* @__PURE__ */ jsx3(ClearButton, {}) : elemAfter;
+    const containerClasses = cn(
+      "seeds-input",
+      appearance === "primary" && "seeds-input-primary",
+      size === "large" && "seeds-input-lg",
+      size === "small" && "seeds-input-sm",
+      {
+        "seeds-input-disabled": !!disabled,
+        "seeds-input-invalid": !!isInvalid,
+        "seeds-input-warning": !!hasWarning,
+        "seeds-input-has-before": !!elementBefore,
+        "seeds-input-has-after": !!elementAfter
+      },
+      className
+    );
+    const Wrapper = "div";
+    return /* @__PURE__ */ jsx3(Wrapper, { className: containerClasses, ...rest, children: /* @__PURE__ */ jsxs2(
+      InputContext.Provider,
+      {
+        value: {
+          handleClear: this.handleClear,
+          hasValue: this.state.hasValue,
+          clearButtonLabel,
+          size
+        },
+        children: [
+          elementBefore && /* @__PURE__ */ jsx3("span", { className: "seeds-input-accessory seeds-input-accessory-before", children: elementBefore }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              "aria-invalid": !!isInvalid,
+              "aria-label": ariaLabel,
+              "aria-describedby": ariaDescribedby,
+              "aria-required": required,
+              autoComplete: autoCompleteValue,
+              autoFocus,
+              disabled,
+              readOnly,
+              id,
+              name,
+              placeholder,
+              type,
+              required,
+              value,
+              maxLength,
+              onBlur: this.handleBlur,
+              onChange: this.handleChange,
+              onFocus: this.handleFocus,
+              onKeyDown: this.handleKeyDown,
+              onKeyUp: this.handleKeyUp,
+              onPaste: this.handlePaste,
+              ref: mergeRefs2(innerRef, this.inputRef),
+              "data-qa-input": name || "",
+              "data-qa-input-isdisabled": disabled === true,
+              "data-qa-input-isrequired": required === true,
+              ...qa,
+              ...inputProps
+            }
+          ),
+          elementAfter && /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: cn(
+                "seeds-input-accessory",
+                isClearButton(elementAfter) ? "seeds-input-accessory-clear" : "seeds-input-accessory-after"
+              ),
+              children: elementAfter
+            }
+          )
+        ]
+      }
+    ) });
+  }
+};
+var InputTailwind_default = InputTailwind;
+
+// src/InputHybrid.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var InputHybrid = Object.assign(
+  (props) => hasStyledProps(props) ? /* @__PURE__ */ jsx4(InputStyledComponents_default, { ...props }) : /* @__PURE__ */ jsx4(InputTailwind_default, { ...props }),
+  { ClearButton }
+);
+InputHybrid.displayName = "Input";
+var InputHybrid_default = InputHybrid;
+
+// src/Input.tsx
+var Input_default = InputHybrid_default;
 
 // src/InputTypes.ts
 import "react";

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.ChangeEvent<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.ClipboardEvent<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 = null,\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            aria-required={required}\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<HTMLInputElement>(innerRef, 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    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\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 | \"on\" | \"off\";\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    | React.Ref<HTMLInputElement>;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onChange?: (e: React.ChangeEvent<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.ClipboardEvent<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"]}
+{"version":3,"sources":["../../src/InputHybrid.tsx","../../src/InputStyledComponents.tsx","../../src/styles.ts","../../src/shared.tsx","../../src/InputTailwind.tsx","../../src/Input.tsx","../../src/InputTypes.ts","../../src/index.ts"],"sourcesContent":["/**\n * Hybrid Input Component\n * Automatically chooses between the Tailwind/CSS-class implementation (preferred,\n * better performance) and the styled-components implementation (for consumers\n * using system props or a styled() extension), based on props.\n *\n * Input uses an `innerRef` prop rather than forwardRef, so both paths receive it\n * through props — no forwardRef wrapper is introduced here.\n */\nimport * as React from \"react\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeInputProps } from \"./InputTypes\";\nimport InputStyledComponents from \"./InputStyledComponents\";\nimport InputTailwind from \"./InputTailwind\";\nimport { ClearButton } from \"./shared\";\n\ntype TypeInputComponent = ((props: TypeInputProps) => React.ReactElement) & {\n  displayName?: string;\n  ClearButton: typeof ClearButton;\n};\n\nconst InputHybrid: TypeInputComponent = Object.assign(\n  (props: TypeInputProps) =>\n    hasStyledProps(props) ? (\n      <InputStyledComponents {...props} />\n    ) : (\n      <InputTailwind {...props} />\n    ),\n  { ClearButton }\n);\n\nInputHybrid.displayName = \"Input\";\n\nexport default InputHybrid;\n","import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\nimport {\n  InputContext,\n  ClearButton,\n  isClearButton,\n  type TypeState,\n} from \"./shared\";\n\n/**\n * Styled-components implementation of Input. This is the legacy/SC path the\n * hybrid routes to when a consumer passes styled-system props or extends Input\n * via styled(). It is the verbatim implementation Input.tsx previously held.\n */\nclass InputStyledComponents 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  // 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.ChangeEvent<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.ClipboardEvent<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 = null,\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            aria-required={required}\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<HTMLInputElement>(innerRef, 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 InputStyledComponents;\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    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\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 styled from \"styled-components\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n\nexport interface 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.\nexport type 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\n// Shared by both the styled-components and Tailwind paths so that a single\n// ClearButton identity exists, keeping isClearButton detection and the static\n// Input.ClearButton consistent regardless of which path renders.\nexport const 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\nexport const 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\nexport const isClearButton = (elem: any) => {\n  if (elem?.type) {\n    return elem.type.displayName === \"Input.ClearButton\";\n  }\n\n  return false;\n};\n","/**\n * Tailwind / CSS-class implementation of Input.\n * Renders plain DOM with the Seeds input CSS classes from input.css instead of\n * styled-components. Behavior (state, context, handlers, search affordances and\n * data-qa attributes) is identical to the styled-components path.\n */\nimport * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeInputProps } from \"./InputTypes\";\nimport {\n  InputContext,\n  ClearButton,\n  isClearButton,\n  type TypeState,\n} from \"./shared\";\n\n// Utility for merging class names properly (mirrors ButtonTailwind's local helper;\n// `cn` is intentionally not exported from @sproutsocial/seeds-react-utilities).\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nclass InputTailwind 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  // 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.ChangeEvent<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.ClipboardEvent<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 = null,\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      className,\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    // Compose the wrapper class. className is forwarded so styled(Input)\n    // extensions (which generate a className and route to this Tailwind path)\n    // still apply their styles on top of the base classes.\n    const containerClasses = cn(\n      \"seeds-input\",\n      appearance === \"primary\" && \"seeds-input-primary\",\n      size === \"large\" && \"seeds-input-lg\",\n      size === \"small\" && \"seeds-input-sm\",\n      {\n        \"seeds-input-disabled\": !!disabled,\n        \"seeds-input-invalid\": !!isInvalid,\n        \"seeds-input-warning\": !!hasWarning,\n        \"seeds-input-has-before\": !!elementBefore,\n        \"seeds-input-has-after\": !!elementAfter,\n      },\n      className\n    );\n\n    // Render the wrapper through an `any`-typed element variable so the styled-system\n    // remainder (`...rest`: forwardedAs/as/css/px/py/color/... from TypeInputProps) is not\n    // type-checked against a literal <div>. Mirrors ButtonTailwind's `const Component = ... as any`.\n    const Wrapper = \"div\" as any;\n\n    return (\n      <Wrapper className={containerClasses} {...rest}>\n        <InputContext.Provider\n          value={{\n            handleClear: this.handleClear,\n            hasValue: this.state.hasValue,\n            clearButtonLabel,\n            size,\n          }}\n        >\n          {elementBefore && (\n            <span className=\"seeds-input-accessory seeds-input-accessory-before\">\n              {elementBefore}\n            </span>\n          )}\n\n          <input\n            aria-invalid={!!isInvalid}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby}\n            aria-required={required}\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<HTMLInputElement>(innerRef, 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            <span\n              className={cn(\n                \"seeds-input-accessory\",\n                isClearButton(elementAfter)\n                  ? \"seeds-input-accessory-clear\"\n                  : \"seeds-input-accessory-after\"\n              )}\n            >\n              {elementAfter}\n            </span>\n          )}\n        </InputContext.Provider>\n      </Wrapper>\n    );\n  }\n}\n\nexport default InputTailwind;\n","import InputHybrid from \"./InputHybrid\";\n\n/**\n * Input component. Automatically routes between the Tailwind/CSS-class\n * implementation (preferred) and the styled-components implementation (for\n * consumers using system props or a styled() extension). The static\n * Input.ClearButton is preserved via the hybrid.\n */\nexport default InputHybrid;\nexport { InputHybrid as Input };\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 | \"on\" | \"off\";\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    | React.Ref<HTMLInputElement>;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onChange?: (e: React.ChangeEvent<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.ClipboardEvent<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":["React","Icon","props","styled","jsx","Icon","React","mergeRefs","Icon","jsx","jsxs","Icon","mergeRefs","jsx"]}

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-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 react_jsx_runtime from 'react/jsx-runtime';
 import * as styled_components from 'styled-components';
 
 interface TypeBaseInputProps {
@@ -72,34 +72,26 @@ interface TypeInputContainerProps {
     disabled?: boolean;
 }
 
-interface TypeState {
-    hasValue: boolean;
-}
-declare class Input extends React.Component<TypeInputProps, TypeState> {
-    constructor(props: TypeInputProps);
-    componentDidUpdate({ value: prevValue }: TypeInputProps): void;
-    static defaultProps: {
-        autoFocus: boolean;
-        disabled: boolean;
-        type: string;
-        size: string;
-        appearance: string;
-    };
-    static ClearButton: {
-        (): react_jsx_runtime.JSX.Element | null;
-        displayName: string;
-    };
-    inputRef: React.RefObject<HTMLInputElement>;
-    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void | undefined;
-    handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void | undefined;
-    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void | undefined;
-    handleKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void | undefined;
-    handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void | undefined;
-    updateState: (inputValue: string) => void;
-    render(): react_jsx_runtime.JSX.Element;
-}
+declare const ClearButton: {
+    (): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * Hybrid Input Component
+ * Automatically chooses between the Tailwind/CSS-class implementation (preferred,
+ * better performance) and the styled-components implementation (for consumers
+ * using system props or a styled() extension), based on props.
+ *
+ * Input uses an `innerRef` prop rather than forwardRef, so both paths receive it
+ * through props — no forwardRef wrapper is introduced here.
+ */
+
+type TypeInputComponent = ((props: TypeInputProps) => React.ReactElement) & {
+    displayName?: string;
+    ClearButton: typeof ClearButton;
+};
+declare const InputHybrid: TypeInputComponent;
 
 declare const Accessory: styled_components.StyledComponent<"div", any, {
     before?: boolean;
@@ -107,4 +99,4 @@ declare const Accessory: styled_components.StyledComponent<"div", any, {
     isClearButton?: boolean;
 }, never>;
 
-export { Accessory, Input, type TypeInputContainerProps, type TypeInputProps, Input as default };
+export { Accessory, InputHybrid as Input, type TypeInputContainerProps, type TypeInputProps, InputHybrid as default };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-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 react_jsx_runtime from 'react/jsx-runtime';
 import * as styled_components from 'styled-components';
 
 interface TypeBaseInputProps {
@@ -72,34 +72,26 @@ interface TypeInputContainerProps {
     disabled?: boolean;
 }
 
-interface TypeState {
-    hasValue: boolean;
-}
-declare class Input extends React.Component<TypeInputProps, TypeState> {
-    constructor(props: TypeInputProps);
-    componentDidUpdate({ value: prevValue }: TypeInputProps): void;
-    static defaultProps: {
-        autoFocus: boolean;
-        disabled: boolean;
-        type: string;
-        size: string;
-        appearance: string;
-    };
-    static ClearButton: {
-        (): react_jsx_runtime.JSX.Element | null;
-        displayName: string;
-    };
-    inputRef: React.RefObject<HTMLInputElement>;
-    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void | undefined;
-    handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void | undefined;
-    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void | undefined;
-    handleKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void | undefined;
-    handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void | undefined;
-    updateState: (inputValue: string) => void;
-    render(): react_jsx_runtime.JSX.Element;
-}
+declare const ClearButton: {
+    (): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * Hybrid Input Component
+ * Automatically chooses between the Tailwind/CSS-class implementation (preferred,
+ * better performance) and the styled-components implementation (for consumers
+ * using system props or a styled() extension), based on props.
+ *
+ * Input uses an `innerRef` prop rather than forwardRef, so both paths receive it
+ * through props — no forwardRef wrapper is introduced here.
+ */
+
+type TypeInputComponent = ((props: TypeInputProps) => React.ReactElement) & {
+    displayName?: string;
+    ClearButton: typeof ClearButton;
+};
+declare const InputHybrid: TypeInputComponent;
 
 declare const Accessory: styled_components.StyledComponent<"div", any, {
     before?: boolean;
@@ -107,4 +99,4 @@ declare const Accessory: styled_components.StyledComponent<"div", any, {
     isClearButton?: boolean;
 }, never>;
 
-export { Accessory, Input, type TypeInputContainerProps, type TypeInputProps, Input as default };
+export { Accessory, InputHybrid as Input, type TypeInputContainerProps, type TypeInputProps, InputHybrid as default };

package/dist/index.js

@@ -36,13 +36,14 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/Input.tsx
-var React = __toESM(require("react"));
-var import_styled_components2 = __toESM(require("styled-components"));
+// src/InputHybrid.tsx
+var React4 = require("react");
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+
+// src/InputStyledComponents.tsx
+var React2 = __toESM(require("react"));
 var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
-var import_seeds_react_hooks = require("@sproutsocial/seeds-react-hooks");
-var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
-var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -188,7 +189,12 @@ Container.displayName = "InputContainer";
 Accessory.displayName = "InputAccessory";
 var styles_default = Container;
 
-// src/Input.tsx
+// src/shared.tsx
+var React = __toESM(require("react"));
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_hooks = require("@sproutsocial/seeds-react-hooks");
+var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var InputContext = React.createContext({});
 var StyledButton = (0, import_styled_components2.default)(import_seeds_react_button.default)`
@@ -236,7 +242,10 @@ var isClearButton = (elem) => {
   }
   return false;
 };
-var Input = class extends React.Component {
+
+// src/InputStyledComponents.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InputStyledComponents = class extends React2.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -258,10 +267,9 @@ var Input = class extends React.Component {
     size: "default",
     appearance: "primary"
   };
-  static ClearButton = ClearButton;
   // Define our own ref for use in handleClear.
   // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
-  inputRef = React.createRef();
+  inputRef = React2.createRef();
   handleBlur = (e) => this.props.onBlur?.(e);
   handleClear = (e) => {
     const input = this.inputRef.current;
@@ -339,9 +347,9 @@ var Input = class extends React.Component {
     if (autoComplete !== void 0) {
       autoCompleteValue = autoComplete ? "on" : "off";
     }
-    const elementBefore = type === "search" && !elemBefore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { name: "magnifying-glass-outline", "aria-hidden": true, color: "icon.base" }) : elemBefore;
-    const elementAfter = type === "search" && !elemAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClearButton, {}) : elemAfter;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    const elementBefore = type === "search" && !elemBefore ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.default, { name: "magnifying-glass-outline", "aria-hidden": true, color: "icon.base" }) : elemBefore;
+    const elementAfter = type === "search" && !elemAfter ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClearButton, {}) : elemAfter;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       styles_default,
       {
         hasBeforeElement: !!elementBefore,
@@ -352,7 +360,7 @@ var Input = class extends React.Component {
         appearance,
         size,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           InputContext.Provider,
           {
             value: {
@@ -362,8 +370,8 @@ var Input = class extends React.Component {
               size
             },
             children: [
-              elementBefore && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Accessory, { before: true, children: elementBefore }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              elementBefore && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Accessory, { before: true, children: elementBefore }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "input",
                 {
                   "aria-invalid": !!isInvalid,
@@ -395,7 +403,7 @@ var Input = class extends React.Component {
                   ...inputProps
                 }
               ),
-              elementAfter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Accessory, { after: true, isClearButton: isClearButton(elementAfter), children: elementAfter })
+              elementAfter && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Accessory, { after: true, isClearButton: isClearButton(elementAfter), children: elementAfter })
             ]
           }
         )
@@ -403,10 +411,223 @@ var Input = class extends React.Component {
     );
   }
 };
-var Input_default = Input;
+var InputStyledComponents_default = InputStyledComponents;
+
+// src/InputTailwind.tsx
+var React3 = __toESM(require("react"));
+var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_react_icon3 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var InputTailwind = class extends React3.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
+      // for both controlled and uncontrolled inputs.
+      hasValue: !!props.value
+    };
+  }
+  componentDidUpdate({ value: prevValue }) {
+    const { value } = this.props;
+    if (value !== prevValue) {
+      this.updateState(value || "");
+    }
+  }
+  static defaultProps = {
+    autoFocus: false,
+    disabled: false,
+    type: "text",
+    size: "default",
+    appearance: "primary"
+  };
+  // Define our own ref for use in handleClear.
+  // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
+  inputRef = React3.createRef();
+  handleBlur = (e) => this.props.onBlur?.(e);
+  handleClear = (e) => {
+    const input = this.inputRef.current;
+    if (input) {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      nativeInputValueSetter?.call(input, "");
+      const inputEvent = new Event("input", {
+        bubbles: true
+      });
+      input.dispatchEvent(inputEvent);
+      this.props.onClear?.(e);
+      setTimeout(() => {
+        input.focus();
+      }, 0);
+    }
+  };
+  handleChange = (e) => {
+    this.props.onChange?.(e, e.currentTarget.value);
+    this.updateState(e.currentTarget.value);
+  };
+  handleFocus = (e) => this.props.onFocus?.(e);
+  handleKeyDown = (e) => this.props.onKeyDown?.(e, e.currentTarget.value);
+  handleKeyUp = (e) => this.props.onKeyUp?.(e, e.currentTarget.value);
+  handlePaste = (e) => this.props.onPaste?.(e, e.currentTarget.value);
+  updateState = (inputValue) => {
+    const hasValue = inputValue !== "";
+    const previousHasValue = this.state.hasValue;
+    if (hasValue !== previousHasValue) {
+      this.setState({
+        hasValue
+      });
+    }
+  };
+  render() {
+    const {
+      autoComplete,
+      autoFocus,
+      disabled,
+      readOnly,
+      isInvalid,
+      hasWarning,
+      id,
+      name,
+      placeholder,
+      type,
+      required,
+      value,
+      elemBefore,
+      elemAfter,
+      maxLength,
+      ariaLabel,
+      ariaDescribedby,
+      clearButtonLabel,
+      innerRef = null,
+      // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      onBlur,
+      onChange,
+      onClear,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      onPaste,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      inputProps = {},
+      qa = {},
+      appearance,
+      size,
+      className,
+      ...rest
+    } = this.props;
+    let autoCompleteValue;
+    if (autoComplete !== void 0) {
+      autoCompleteValue = autoComplete ? "on" : "off";
+    }
+    const elementBefore = type === "search" && !elemBefore ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon3.default, { name: "magnifying-glass-outline", "aria-hidden": true, color: "icon.base" }) : elemBefore;
+    const elementAfter = type === "search" && !elemAfter ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ClearButton, {}) : elemAfter;
+    const containerClasses = cn(
+      "seeds-input",
+      appearance === "primary" && "seeds-input-primary",
+      size === "large" && "seeds-input-lg",
+      size === "small" && "seeds-input-sm",
+      {
+        "seeds-input-disabled": !!disabled,
+        "seeds-input-invalid": !!isInvalid,
+        "seeds-input-warning": !!hasWarning,
+        "seeds-input-has-before": !!elementBefore,
+        "seeds-input-has-after": !!elementAfter
+      },
+      className
+    );
+    const Wrapper = "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Wrapper, { className: containerClasses, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      InputContext.Provider,
+      {
+        value: {
+          handleClear: this.handleClear,
+          hasValue: this.state.hasValue,
+          clearButtonLabel,
+          size
+        },
+        children: [
+          elementBefore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "seeds-input-accessory seeds-input-accessory-before", children: elementBefore }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              "aria-invalid": !!isInvalid,
+              "aria-label": ariaLabel,
+              "aria-describedby": ariaDescribedby,
+              "aria-required": required,
+              autoComplete: autoCompleteValue,
+              autoFocus,
+              disabled,
+              readOnly,
+              id,
+              name,
+              placeholder,
+              type,
+              required,
+              value,
+              maxLength,
+              onBlur: this.handleBlur,
+              onChange: this.handleChange,
+              onFocus: this.handleFocus,
+              onKeyDown: this.handleKeyDown,
+              onKeyUp: this.handleKeyUp,
+              onPaste: this.handlePaste,
+              ref: (0, import_seeds_react_utilities2.mergeRefs)(innerRef, this.inputRef),
+              "data-qa-input": name || "",
+              "data-qa-input-isdisabled": disabled === true,
+              "data-qa-input-isrequired": required === true,
+              ...qa,
+              ...inputProps
+            }
+          ),
+          elementAfter && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
+            {
+              className: cn(
+                "seeds-input-accessory",
+                isClearButton(elementAfter) ? "seeds-input-accessory-clear" : "seeds-input-accessory-after"
+              ),
+              children: elementAfter
+            }
+          )
+        ]
+      }
+    ) });
+  }
+};
+var InputTailwind_default = InputTailwind;
+
+// src/InputHybrid.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var InputHybrid = Object.assign(
+  (props) => (0, import_seeds_react_system_props2.hasStyledProps)(props) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputStyledComponents_default, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputTailwind_default, { ...props }),
+  { ClearButton }
+);
+InputHybrid.displayName = "Input";
+var InputHybrid_default = InputHybrid;
+
+// src/Input.tsx
+var Input_default = InputHybrid_default;
 
 // src/InputTypes.ts
-var React2 = require("react");
+var React5 = require("react");
 
 // src/index.ts
 var index_default = Input_default;

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 { 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.ChangeEvent<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.ClipboardEvent<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 = null,\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            aria-required={required}\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<HTMLInputElement>(innerRef, 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    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\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 | \"on\" | \"off\";\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    | React.Ref<HTMLInputElement>;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onChange?: (e: React.ChangeEvent<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.ClipboardEvent<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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,IAAAA,4BAAmB;AACnB,mCAA0B;AAC1B,+BAAoC;AACpC,gCAAmB;AACnB,8BAAiB;;;ACLjB,+BAA4B;AAC5B,sCAAuB;AACvB,gCAA0B;AAG1B,IAAM,YAAY,yBAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAQJ,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,wBAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,WAAW,IAAI;AAAA,aAC7D,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,+BAErB,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,UACzD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,UAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,mBACjC,CAAC,UAAU,MAAM,MAAM,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQ7C,CAAC,UAAU;AACpB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,IAE5D,KAAK;AACH,aAAO,MAAM,MAAM,MAAM,GAAG;AAAA,IAE9B,KAAK;AAAA,IACL;AACE,aAAO,MAAM,MAAM,MAAM,GAAG;AAAA,EAChC;AACF,CAAC;AAAA;AAAA,iBAEY,CAAC,UAAU;AACtB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA,IAErC,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA,EACvC;AACF,CAAC;AAAA;AAAA,mBAEc,CAAC,UAAU;AACxB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA;AAAA,IAGrC,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAYG,mCAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASF,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA,MAI5D,CAAC,UACD,MAAM,oBACN;AAAA;AAAA,OAEC;AAAA;AAAA,MAED,CAAC,UACD,MAAM,mBACN;AAAA;AAAA,OAEC;AAAA;AAAA;AAAA,IAGH,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMC;AAAA;AAAA,IAED,CAAC,UACD,MAAM,eAAe,aACrB;AAAA;AAAA,4BAEwB,CAACC,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO,IAAI;AAAA;AAAA,KAErE;AAAA;AAAA,IAED,CAAC,UACD,MAAM,WACN;AAAA;AAAA,wBAEoB,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO,KAAK;AAAA;AAAA,KAElE;AAAA;AAAA,GAEF,CAAC,UACA,MAAM,WACN;AAAA;AAAA,wBAEoB,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO,OAAO;AAAA;AAAA,KAEpE;AAAA;AAAA,IAED,sCAAM;AAAA;AAGH,IAAM,YAAY,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAAA,WAQrB,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,UACD,MAAM,UACN;AAAA,cACU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,KAC/B;AAAA;AAAA,IAED,CAAC,UACD,MAAM,SACN;AAAA,eACW,MAAM,gBAAgB,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,KAC1D;AAAA;AAGL,UAAU,cAAc;AACxB,UAAU,cAAc;AAExB,IAAO,iBAAQ;;;ADtGT;AA7CN,IAAM,eAAqB,oBAAgC,CAAC,CAAC;AAE7D,IAAM,mBAAe,0BAAAE,SAAO,0BAAAC,OAAM;AAAA;AAAA;AAAA,aAGrB,CAAC,cAAU,8CAAoB,MAAM,MAAM,OAAO,KAAK,IAAI,CAAC;AAAA;AAAA;AAIzE,IAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,IAAU,iBAAW,YAAY;AAGjC,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAGA,MAAI,CAAC,kBAAkB;AAErB,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAIA,QAAM,KAAK,cAAc,UAAU,MAAM;AACzC,QAAM,KAAK,cAAc,UAAU,MAAM;AACzC,QAAM,aAAa,cAAc,UAAU,YAAY;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO,oBAAoB;AAAA,MAC3B,WAAW,oBAAoB;AAAA,MAC/B,OAAM;AAAA,MAEN,sDAAC,wBAAAC,SAAA,EAAK,MAAK,oBAAmB,eAAW,MAAC;AAAA;AAAA,EAC5C;AAEJ;AAEA,YAAY,cAAc;AAK1B,IAAM,gBAAgB,CAAC,SAAc;AACnC,MAAI,MAAM,MAAM;AACd,WAAO,KAAK,KAAK,gBAAgB;AAAA,EACnC;AAEA,SAAO;AACT;AAEA,IAAM,QAAN,cAA0B,gBAAqC;AAAA,EAC7D,YAAY,OAAuB;AACjC,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA;AAAA;AAAA,MAGX,UAAU,CAAC,CAAC,MAAM;AAAA,IACpB;AAAA,EACF;AAAA,EAES,mBAAmB,EAAE,OAAO,UAAU,GAAmB;AAEhE,UAAM,EAAE,MAAM,IAAI,KAAK;AACvB,QAAI,UAAU,WAAW;AACvB,WAAK,YAAY,SAAS,EAAE;AAAA,IAC9B;AAAA,EACF;AAAA,EAEA,OAAO,eAAe;AAAA,IACpB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,EACd;AAAA,EAEA,OAAO,cAAc;AAAA;AAAA;AAAA,EAGrB,WAAiB,gBAA4B;AAAA,EAE7C,aAAa,CAAC,MACZ,KAAK,MAAM,SAAS,CAAC;AAAA,EAEvB,cAAc,CAAC,MAA+C;AAC5D,UAAM,QAAQ,KAAK,SAAS;AAE5B,QAAI,OAAO;AAET,YAAM,yBAAyB,OAAO;AAAA,QACpC,OAAO,iBAAiB;AAAA,QACxB;AAAA,MACF,GAAG;AAEH,8BAAwB,KAAK,OAAO,EAAE;AACtC,YAAM,aAAa,IAAI,MAAM,SAAS;AAAA,QACpC,SAAS;AAAA,MACX,CAAC;AACD,YAAM,cAAc,UAAU;AAG9B,WAAK,MAAM,UAAU,CAAC;AAGtB,iBAAW,MAAM;AACf,cAAM,MAAM;AAAA,MACd,GAAG,CAAC;AAAA,IACN;AAAA,EACF;AAAA,EAEA,eAAe,CAAC,MAA2C;AACzD,SAAK,MAAM,WAAW,GAAG,EAAE,cAAc,KAAK;AAE9C,SAAK,YAAY,EAAE,cAAc,KAAK;AAAA,EACxC;AAAA,EAEA,cAAc,CAAC,MACb,KAAK,MAAM,UAAU,CAAC;AAAA,EAExB,gBAAgB,CAAC,MACf,KAAK,MAAM,YAAY,GAAG,EAAE,cAAc,KAAK;AAAA,EAEjD,cAAc,CAAC,MACb,KAAK,MAAM,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,EAE/C,cAAc,CAAC,MACb,KAAK,MAAM,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,EAE/C,cAAc,CAAC,eAAuB;AACpC,UAAM,WAAW,eAAe;AAChC,UAAM,mBAAmB,KAAK,MAAM;AAGpC,QAAI,aAAa,kBAAkB;AACjC,WAAK,SAAS;AAAA,QACZ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA;AAAA;AAAA,MAGX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA,aAAa,CAAC;AAAA,MACd,KAAK,CAAC;AAAA,MACN;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AAGT,QAAI;AAEJ,QAAI,iBAAiB,QAAW;AAC9B,0BAAoB,eAAe,OAAO;AAAA,IAC5C;AAGA,UAAM,gBACJ,SAAS,YAAY,CAAC,aACpB,4CAAC,wBAAAA,SAAA,EAAK,MAAK,4BAA2B,eAAW,MAAC,OAAM,aAAY,IAEpE;AAIJ,UAAM,eACJ,SAAS,YAAY,CAAC,YAAY,4CAAC,eAAY,IAAK;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB,CAAC,CAAC;AAAA,QACpB,iBAAiB,CAAC,CAAC;AAAA,QACnB;AAAA,QACA,SAAS,CAAC,CAAC;AAAA,QACX,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,UAAC,aAAa;AAAA,UAAb;AAAA,YACC,OAAO;AAAA,cACL,aAAa,KAAK;AAAA,cAClB,UAAU,KAAK,MAAM;AAAA,cACrB;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA,+BAAiB,4CAAC,aAAU,QAAM,MAAE,yBAAc;AAAA,cAEnD;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAc,CAAC,CAAC;AAAA,kBAChB,cAAY;AAAA,kBACZ,oBAAkB;AAAA,kBAClB,iBAAe;AAAA,kBACf,cAAc;AAAA,kBACd;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,QAAQ,KAAK;AAAA,kBACb,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,kBACd,WAAW,KAAK;AAAA,kBAChB,SAAS,KAAK;AAAA,kBACd,SAAS,KAAK;AAAA,kBACd,SAAK,wCAA4B,UAAU,KAAK,QAAQ;AAAA,kBACxD,iBAAe,QAAQ;AAAA,kBACvB,4BAA0B,aAAa;AAAA,kBACvC,4BAA0B,aAAa;AAAA,kBACtC,GAAG;AAAA,kBACH,GAAG;AAAA;AAAA,cACN;AAAA,cAEC,gBACC,4CAAC,aAAU,OAAK,MAAC,eAAe,cAAc,YAAY,GACvD,wBACH;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,gBAAQ;;;AEvSf,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["import_styled_components","styled","props","styled","Button","Icon","React"]}
+{"version":3,"sources":["../src/index.ts","../src/InputHybrid.tsx","../src/InputStyledComponents.tsx","../src/styles.ts","../src/shared.tsx","../src/InputTailwind.tsx","../src/Input.tsx","../src/InputTypes.ts"],"sourcesContent":["import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport { Accessory } from \"./styles\";\nexport * from \"./InputTypes\";\n","/**\n * Hybrid Input Component\n * Automatically chooses between the Tailwind/CSS-class implementation (preferred,\n * better performance) and the styled-components implementation (for consumers\n * using system props or a styled() extension), based on props.\n *\n * Input uses an `innerRef` prop rather than forwardRef, so both paths receive it\n * through props — no forwardRef wrapper is introduced here.\n */\nimport * as React from \"react\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeInputProps } from \"./InputTypes\";\nimport InputStyledComponents from \"./InputStyledComponents\";\nimport InputTailwind from \"./InputTailwind\";\nimport { ClearButton } from \"./shared\";\n\ntype TypeInputComponent = ((props: TypeInputProps) => React.ReactElement) & {\n  displayName?: string;\n  ClearButton: typeof ClearButton;\n};\n\nconst InputHybrid: TypeInputComponent = Object.assign(\n  (props: TypeInputProps) =>\n    hasStyledProps(props) ? (\n      <InputStyledComponents {...props} />\n    ) : (\n      <InputTailwind {...props} />\n    ),\n  { ClearButton }\n);\n\nInputHybrid.displayName = \"Input\";\n\nexport default InputHybrid;\n","import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\nimport {\n  InputContext,\n  ClearButton,\n  isClearButton,\n  type TypeState,\n} from \"./shared\";\n\n/**\n * Styled-components implementation of Input. This is the legacy/SC path the\n * hybrid routes to when a consumer passes styled-system props or extends Input\n * via styled(). It is the verbatim implementation Input.tsx previously held.\n */\nclass InputStyledComponents 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  // 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.ChangeEvent<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.ClipboardEvent<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 = null,\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            aria-required={required}\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<HTMLInputElement>(innerRef, 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 InputStyledComponents;\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    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\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 styled from \"styled-components\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n\nexport interface 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.\nexport type 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\n// Shared by both the styled-components and Tailwind paths so that a single\n// ClearButton identity exists, keeping isClearButton detection and the static\n// Input.ClearButton consistent regardless of which path renders.\nexport const 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\nexport const 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\nexport const isClearButton = (elem: any) => {\n  if (elem?.type) {\n    return elem.type.displayName === \"Input.ClearButton\";\n  }\n\n  return false;\n};\n","/**\n * Tailwind / CSS-class implementation of Input.\n * Renders plain DOM with the Seeds input CSS classes from input.css instead of\n * styled-components. Behavior (state, context, handlers, search affordances and\n * data-qa attributes) is identical to the styled-components path.\n */\nimport * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeInputProps } from \"./InputTypes\";\nimport {\n  InputContext,\n  ClearButton,\n  isClearButton,\n  type TypeState,\n} from \"./shared\";\n\n// Utility for merging class names properly (mirrors ButtonTailwind's local helper;\n// `cn` is intentionally not exported from @sproutsocial/seeds-react-utilities).\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nclass InputTailwind 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  // 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.ChangeEvent<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.ClipboardEvent<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 = null,\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      className,\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    // Compose the wrapper class. className is forwarded so styled(Input)\n    // extensions (which generate a className and route to this Tailwind path)\n    // still apply their styles on top of the base classes.\n    const containerClasses = cn(\n      \"seeds-input\",\n      appearance === \"primary\" && \"seeds-input-primary\",\n      size === \"large\" && \"seeds-input-lg\",\n      size === \"small\" && \"seeds-input-sm\",\n      {\n        \"seeds-input-disabled\": !!disabled,\n        \"seeds-input-invalid\": !!isInvalid,\n        \"seeds-input-warning\": !!hasWarning,\n        \"seeds-input-has-before\": !!elementBefore,\n        \"seeds-input-has-after\": !!elementAfter,\n      },\n      className\n    );\n\n    // Render the wrapper through an `any`-typed element variable so the styled-system\n    // remainder (`...rest`: forwardedAs/as/css/px/py/color/... from TypeInputProps) is not\n    // type-checked against a literal <div>. Mirrors ButtonTailwind's `const Component = ... as any`.\n    const Wrapper = \"div\" as any;\n\n    return (\n      <Wrapper className={containerClasses} {...rest}>\n        <InputContext.Provider\n          value={{\n            handleClear: this.handleClear,\n            hasValue: this.state.hasValue,\n            clearButtonLabel,\n            size,\n          }}\n        >\n          {elementBefore && (\n            <span className=\"seeds-input-accessory seeds-input-accessory-before\">\n              {elementBefore}\n            </span>\n          )}\n\n          <input\n            aria-invalid={!!isInvalid}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedby}\n            aria-required={required}\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<HTMLInputElement>(innerRef, 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            <span\n              className={cn(\n                \"seeds-input-accessory\",\n                isClearButton(elementAfter)\n                  ? \"seeds-input-accessory-clear\"\n                  : \"seeds-input-accessory-after\"\n              )}\n            >\n              {elementAfter}\n            </span>\n          )}\n        </InputContext.Provider>\n      </Wrapper>\n    );\n  }\n}\n\nexport default InputTailwind;\n","import InputHybrid from \"./InputHybrid\";\n\n/**\n * Input component. Automatically routes between the Tailwind/CSS-class\n * implementation (preferred) and the styled-components implementation (for\n * consumers using system props or a styled() extension). The static\n * Input.ClearButton is preserved via the hybrid.\n */\nexport default InputHybrid;\nexport { InputHybrid as Input };\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 | \"on\" | \"off\";\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    | React.Ref<HTMLInputElement>;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onChange?: (e: React.ChangeEvent<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.ClipboardEvent<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":["React","import_seeds_react_system_props","React","import_seeds_react_icon","styled","props","import_styled_components","styled","Button","Icon","import_jsx_runtime","Icon","React","import_seeds_react_utilities","import_seeds_react_icon","import_jsx_runtime","Icon","import_jsx_runtime","React"]}

package/dist/input.css

@@ -0,0 +1,133 @@
+/**
+ * Seeds Input component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-input seeds-input-primary"><input /></div>
+ *   <div class="seeds-input seeds-input-primary seeds-input-lg"><input /></div>
+ */
+
+@layer components {
+  .seeds-input {
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .seeds-input input {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid transparent;
+    border-radius: var(--radius-500);
+    background-color: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    outline: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-normal);
+    appearance: none;
+    /* This matches the overall height of Button and Select */
+    margin: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: var(--space-300);
+    font-size: var(--font-size-200);
+    line-height: 16px;
+  }
+
+  /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
+  .seeds-input input::-ms-clear {
+    display: none;
+  }
+
+  .seeds-input input::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  .seeds-input input:focus {
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+  }
+
+  /* Fix for red ring when input is marked required in Firefox */
+  .seeds-input input:not(output):not(:focus):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  .seeds-input input::placeholder {
+    color: var(--color-form-placeholder-base);
+    font-style: italic;
+  }
+
+  /* Size modifiers */
+  .seeds-input-lg input {
+    padding: var(--space-350) var(--space-400);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+  }
+
+  .seeds-input-sm input {
+    padding: var(--space-200);
+  }
+
+  /* Accessory spacing */
+  .seeds-input-has-before input {
+    padding-left: 40px;
+  }
+
+  .seeds-input-has-after input {
+    padding-right: 40px;
+  }
+
+  /* Appearance */
+  .seeds-input-primary input {
+    border: 1px solid var(--color-form-border-base);
+  }
+
+  /* State borders — declared after appearance so border-color wins */
+  .seeds-input-invalid input {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-input-warning input {
+    border-color: var(--color-form-border-warning);
+  }
+
+  /* Disabled */
+  .seeds-input-disabled {
+    opacity: 0.4;
+  }
+
+  .seeds-input-disabled input {
+    cursor: not-allowed;
+  }
+
+  /* Accessories (before / after / clear button) */
+  .seeds-input-accessory {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-icon-base);
+    display: flex;
+    align-items: center;
+  }
+
+  .seeds-input-accessory-before {
+    left: var(--space-300);
+  }
+
+  .seeds-input-accessory-after {
+    right: var(--space-300);
+  }
+
+  .seeds-input-accessory-clear {
+    right: 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-input",
-  "version": "1.5.29",
+  "version": "1.5.31",
   "description": "Seeds Input",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -10,31 +10,43 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/input.css": "./dist/input.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/input.css dist/input.css",
+    "build:debug": "tsup --dts --metafile && cp src/input.css dist/input.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@sproutsocial/seeds-react-hooks": "^3.2.4",
-    "@sproutsocial/seeds-react-box": "^1.1.23",
-    "@sproutsocial/seeds-react-button": "^2.2.3",
-    "@sproutsocial/seeds-react-icon": "^2.4.2",
-    "@sproutsocial/seeds-react-text": "^1.5.0",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-box": "^1.1.24",
+    "@sproutsocial/seeds-react-button": "^2.2.4",
+    "@sproutsocial/seeds-react-icon": "^2.4.3",
+    "@sproutsocial/seeds-react-text": "^1.5.1",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
     "@sproutsocial/seeds-react-mixins": "^4.3.9"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
+    "@types/react": "^18.0.0",
     "react-dom": "^18.0.0",
     "styled-components": "^5.2.3",
     "typescript": "^5.6.2",
     "tsup": "^8.3.4",
-    "@sproutsocial/seeds-tsconfig": "*"
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"