@sproutsocial/seeds-react-form-field 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-form-field/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     4.55 KB
+CJS dist/index.js.map 13.89 KB
+CJS ⚡️ Build success in 157ms
+ESM dist/esm/index.js     2.55 KB
+ESM dist/esm/index.js.map 13.85 KB
+ESM ⚡️ Build success in 155ms
+DTS Build start
+DTS ⚡️ Build success in 10033ms
+DTS dist/index.d.ts  1.35 KB
+DTS dist/index.d.mts 1.35 KB
+Done in 12.21s.

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @sproutsocial/seeds-react-form-field
+
+## 1.0.0
+
+### Major Changes
+
+- 8ca97dd: Migrated FormField, Fieldset, and Label to their own seeds-react component
+
+### Patch Changes
+
+- Updated dependencies [8ca97dd]
+  - @sproutsocial/seeds-react-label@1.0.0

package/dist/esm/index.js

@@ -0,0 +1,83 @@
+// src/FormField.tsx
+import { useState as useState2 } from "react";
+
+// ../seeds-react-hooks/dist/index.mjs
+import { useState, useLayoutEffect, useCallback, useReducer, useRef, useEffect, useMemo } from "react";
+import { useTheme } from "styled-components";
+var v = Object.freeze({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
+function X(r) {
+  let [t, e] = useState(r), s = useCallback((n) => {
+    n && n.textContent !== null && e(n.textContent);
+  }, []);
+  return s.current = t, s;
+}
+
+// src/FormField.tsx
+import Box from "@sproutsocial/seeds-react-box";
+import Label from "@sproutsocial/seeds-react-label";
+import Text from "@sproutsocial/seeds-react-text";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+import { jsx, jsxs } from "react/jsx-runtime";
+var idCounter = 0;
+var FormField = ({
+  children,
+  error,
+  helperText,
+  id: identifier,
+  isInvalid = false,
+  label,
+  mb = 400,
+  qa,
+  isLabelHidden = false,
+  required,
+  ...rest
+}) => {
+  const [id] = useState2(identifier || `FormField-${idCounter++}`);
+  const errorId = `Error-${id}`;
+  const containerText = X("");
+  const errorContainerText = X("");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
+      ...qa,
+      mb,
+      "data-qa-formfield": qa && qa["data-qa-formfield"] || id || containerText.current,
+      "data-qa-formfield-isinvalid": isInvalid === true,
+      children: [
+        isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { "data-testid": "visually-hidden", children: /* @__PURE__ */ jsx(Label, { htmlFor: id, required, children: label }) }) : /* @__PURE__ */ jsx(Label, { mb: helperText ? 100 : 300, htmlFor: id, required, children: label }),
+        helperText && /* @__PURE__ */ jsx(Text, { as: "p", fontSize: 200, mb: 300, color: "text.subtext", children: helperText }),
+        children({
+          id,
+          isInvalid,
+          ariaDescribedby: errorId,
+          ...required !== void 0 && { required }
+        }),
+        isInvalid && error && /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "div",
+            fontSize: 200,
+            color: "text.error",
+            mt: 300,
+            id: errorId,
+            "data-qa-formfield-error": qa && qa["data-qa-formfield-error"] || errorContainerText.current,
+            children: error
+          }
+        )
+      ]
+    }
+  );
+};
+var FormField_default = FormField;
+
+// src/FormFieldTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = FormField_default;
+export {
+  FormField_default as FormField,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FormField.tsx","../../../seeds-react-hooks/src/useMeasure/useMeasure.ts","../../../seeds-react-hooks/src/useSelect/useSelect.ts","../../../seeds-react-hooks/src/useMultiselect/useMultiselect.ts","../../../seeds-react-hooks/src/useMutationObserver/useMutationObserver.ts","../../../seeds-react-hooks/src/useTextContent/useTextContent.ts","../../../seeds-react-hooks/src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../../../seeds-react-hooks/src/useInteractiveColor/useInteractiveColor.ts","../../src/FormFieldTypes.ts","../../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Label from \"@sproutsocial/seeds-react-label\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeFormFieldProps } from \"./FormFieldTypes\";\n\nlet idCounter = 0;\n\nconst FormField = ({\n  children,\n  error,\n  helperText,\n  id: identifier,\n  isInvalid = false,\n  label,\n  mb = 400,\n  qa,\n  isLabelHidden = false,\n  required,\n  ...rest\n}: TypeFormFieldProps) => {\n  const [id] = useState(identifier || `FormField-${idCounter++}`);\n  const errorId = `Error-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  return (\n    <Box\n      {...rest}\n      {...qa}\n      mb={mb}\n      data-qa-formfield={\n        (qa && qa[\"data-qa-formfield\"]) || id || containerText.current\n      }\n      data-qa-formfield-isinvalid={isInvalid === true}\n    >\n      {isLabelHidden ? (\n        <VisuallyHidden data-testid=\"visually-hidden\">\n          <Label htmlFor={id} required={required}>\n            {label}\n          </Label>\n        </VisuallyHidden>\n      ) : (\n        <Label mb={helperText ? 100 : 300} htmlFor={id} required={required}>\n          {label}\n        </Label>\n      )}\n      {helperText && (\n        <Text as=\"p\" fontSize={200} mb={300} color=\"text.subtext\">\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby: errorId,\n        ...(required !== undefined && { required }),\n      })}\n      {isInvalid && error && (\n        <Text\n          as=\"div\"\n          fontSize={200}\n          color=\"text.error\"\n          mt={300}\n          id={errorId}\n          data-qa-formfield-error={\n            (qa && qa[\"data-qa-formfield-error\"]) || errorContainerText.current\n          }\n        >\n          {error}\n        </Text>\n      )}\n    </Box>\n  );\n};\n\nexport default FormField;\n","import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\nconst initialBounds = Object.freeze({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (\n      !element ||\n      // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n      !(\"ResizeObserver\" in window)\n    ) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { x, y, width, height, top, right, bottom, left } =\n        entry.contentRect;\n      setContentRect({\n        x,\n        y,\n        width,\n        height,\n        top,\n        right,\n        bottom,\n        left,\n      });\n    });\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref]);\n\n  return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n  initialValue?: T | \"\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n  {\n    initialValue = \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeSingleSelectProps<T> = {\n    initialValue: \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, setValue] = useState<string | T>(initialValue);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      if (newValue !== value) {\n        setValue(newValue);\n        userOnChange(newValue);\n      }\n    },\n    [userOnChange, value]\n  );\n\n  return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n  initialValue?: T[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n  state: Set<string>,\n  action: { type: string; value?: string }\n): Set<string> => {\n  const newState = new Set(state);\n  switch (action.type) {\n    case \"reset\": {\n      return new Set();\n    }\n    case \"toggle_item\":\n    default: {\n      if (action.value) {\n        if (newState.has(action.value)) {\n          newState.delete(action.value);\n        } else {\n          newState.add(action.value);\n        }\n      }\n      return newState;\n    }\n  }\n};\n\nexport const useMultiselect = <T extends string>(\n  {\n    initialValue = [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeMultiSelectProps<T> = {\n    initialValue: [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n  const getArrayValue = (value: Set<string | T>) =>\n    Array.from<string | T>(value);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      dispatch({ type: \"toggle_item\", value: newValue });\n    },\n    [dispatch]\n  );\n\n  const isFirstRun = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRun.current) {\n      isFirstRun.current = false;\n      return;\n    }\n    userOnChange(getArrayValue(value));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [userOnChange, value]);\n\n  const onClear = useCallback(() => {\n    dispatch({ type: \"reset\" });\n  }, [dispatch]);\n\n  return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n  | {\n      childList: true;\n    }\n  | {\n      attributes: true;\n    }\n  | {\n      characterData: true;\n    };\n\ntype TypeMutationObserverInit = {\n  subtree?: boolean;\n  attributeOldValue?: boolean;\n  characterDataOldValue?: boolean;\n  attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n  mutationList?: MutationRecord[],\n  observer?: MutationObserver\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n  mutationList;\n\nexport function useMutationObserver(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback = defaultCallback\n) {\n  if (!canUseDOM()) {\n    return;\n  }\n  /* eslint-disable-next-line */\n  const [value, setValue] = useState(undefined);\n  /* eslint-disable-next-line */\n  const observer = useMemo(\n    () =>\n      new MutationObserver((mutationList, observer) => {\n        const result = callback(mutationList, observer);\n        setValue(result);\n      }),\n    [callback]\n  );\n  /* eslint-disable-next-line */\n  useEffect(() => {\n    if (targetNode) {\n      observer.observe(targetNode, config);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [targetNode, config, observer]);\n\n  return value;\n}\n\nexport function useMutationObserverOnce(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback\n) {\n  const [isObserving, setObserving] = useState(true);\n  const node = isObserving ? targetNode : null;\n  const value = useMutationObserver(node, config, callback);\n  if (value !== undefined && isObserving) {\n    setObserving(false);\n  }\n  return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n  const [textContent, setTextContent] = useState(initial);\n\n  const ref: textContentRef = useCallback((node: Node) => {\n    if (node && node.textContent !== null) {\n      setTextContent(node.textContent);\n    }\n  }, []);\n\n  ref.current = textContent;\n  return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n  name: string,\n  props: { [key: string]: any }\n) {\n  // Get a mutable ref object where we can store props ...\n  // ... for comparison next time this hook runs.\n  const previousProps = useRef<typeof props>({});\n\n  useEffect(() => {\n    if (previousProps.current) {\n      // Get all keys from previous and current props\n      const allKeys = Object.keys({ ...previousProps.current, ...props });\n      // Use this object to keep track of changed props\n      const changesObj: typeof props = {};\n      // Iterate through keys\n      allKeys.forEach((key) => {\n        // If previous is different from current\n\n        if (previousProps.current[key] !== props[key]) {\n          // Add to changesObj\n\n          changesObj[key] = {\n            from: previousProps.current[key],\n\n            to: props[key],\n          };\n        }\n      });\n\n      // If changesObj not empty then output to console\n      if (Object.keys(changesObj).length) {\n        // eslint-disable-next-line no-console\n        console.log(\"[why-did-you-update]\", name, changesObj);\n      }\n    }\n\n    // Finally update previousProps with current props for next hook call\n    previousProps.current = props;\n  });\n}\n","import { darken, lighten } from \"polished\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n  // Throw error if used outside of a ThemeProvider (styled-components)\n  if (!useTheme()) {\n    throw new Error(\n      \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n    );\n  }\n\n  // Get the current theme mode ie. 'light' or 'dark'\n  const theme: TypeTheme = useTheme() as TypeTheme;\n  const themeMode = theme.mode;\n\n  // If the theme mode is dark, return a lightened version of the themeValue\n  if (themeMode === \"dark\") {\n    return lighten(0.2, themeColor);\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return darken(0.2, themeColor);\n  }\n};\n\nexport { useInteractiveColor };\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFormFieldProps extends Omit<TypeBoxProps, \"children\"> {\n  /** A function that receives props that need to be spread onto the child element */\n  children: (options: {\n    id: string;\n    isInvalid: boolean;\n    ariaDescribedby: string;\n    required?: boolean;\n  }) => React.ReactNode;\n\n  /** Text describing any error with the field's content */\n  error?: React.ReactNode;\n\n  /** Text acting as a description blurb below the main label **/\n  helperText?: React.ReactNode;\n\n  /** ID of the form element (will be auto-generated if not provided) */\n  id?: string;\n\n  /** Whether the current contents of the field are invalid */\n  isInvalid?: boolean;\n\n  /** Label text to display above the form field */\n  label: React.ReactNode;\n  qa?: Record<string, any>;\n\n  /** Whether the label text should be visually hidden */\n  isLabelHidden?: boolean;\n\n  /** Whether the form element is required */\n  required?: boolean;\n}\n","import FormField from \"./FormField\";\n\nexport default FormField;\nexport { FormField };\nexport * from \"./FormFieldTypes\";\n"],"mappings":";AAAA,SAAgB,YAAAA,iBAAgB;;;ACAhC,SAAS,UAAAC,iBAAU,aAAuC,YAYpC,QAAO,WAE3B,eAEA;;;;;;;;;;;ADdF,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAwB3B,SAWM,KAXN;AArBJ,IAAI,YAAY;AAEhB,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,CAAC,EAAE,IAAIC,UAAS,cAAc,aAAa,WAAW,EAAE;AAC9D,QAAM,UAAU,SAAS,EAAE;AAC3B,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,qBACG,MAAM,GAAG,mBAAmB,KAAM,MAAM,cAAc;AAAA,MAEzD,+BAA6B,cAAc;AAAA,MAE1C;AAAA,wBACC,oBAAC,kBAAe,eAAY,mBAC1B,8BAAC,SAAM,SAAS,IAAI,UACjB,iBACH,GACF,IAEA,oBAAC,SAAM,IAAI,aAAa,MAAM,KAAK,SAAS,IAAI,UAC7C,iBACH;AAAA,QAED,cACC,oBAAC,QAAK,IAAG,KAAI,UAAU,KAAK,IAAI,KAAK,OAAM,gBACxC,sBACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB,GAAI,aAAa,UAAa,EAAE,SAAS;AAAA,QAC3C,CAAC;AAAA,QACA,aAAa,SACZ;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,OAAM;AAAA,YACN,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,2BACG,MAAM,GAAG,yBAAyB,KAAM,mBAAmB;AAAA,YAG7D;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,oBAAQ;;;AQ9Ef,OAAuB;;;ACEvB,IAAO,cAAQ;","names":["useState","useState","useState"]}

package/dist/index.d.mts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+interface TypeFormFieldProps extends Omit<TypeBoxProps, "children"> {
+    /** A function that receives props that need to be spread onto the child element */
+    children: (options: {
+        id: string;
+        isInvalid: boolean;
+        ariaDescribedby: string;
+        required?: boolean;
+    }) => React.ReactNode;
+    /** Text describing any error with the field's content */
+    error?: React.ReactNode;
+    /** Text acting as a description blurb below the main label **/
+    helperText?: React.ReactNode;
+    /** ID of the form element (will be auto-generated if not provided) */
+    id?: string;
+    /** Whether the current contents of the field are invalid */
+    isInvalid?: boolean;
+    /** Label text to display above the form field */
+    label: React.ReactNode;
+    qa?: Record<string, any>;
+    /** Whether the label text should be visually hidden */
+    isLabelHidden?: boolean;
+    /** Whether the form element is required */
+    required?: boolean;
+}
+
+declare const FormField: ({ children, error, helperText, id: identifier, isInvalid, label, mb, qa, isLabelHidden, required, ...rest }: TypeFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { FormField, type TypeFormFieldProps, FormField as default };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+interface TypeFormFieldProps extends Omit<TypeBoxProps, "children"> {
+    /** A function that receives props that need to be spread onto the child element */
+    children: (options: {
+        id: string;
+        isInvalid: boolean;
+        ariaDescribedby: string;
+        required?: boolean;
+    }) => React.ReactNode;
+    /** Text describing any error with the field's content */
+    error?: React.ReactNode;
+    /** Text acting as a description blurb below the main label **/
+    helperText?: React.ReactNode;
+    /** ID of the form element (will be auto-generated if not provided) */
+    id?: string;
+    /** Whether the current contents of the field are invalid */
+    isInvalid?: boolean;
+    /** Label text to display above the form field */
+    label: React.ReactNode;
+    qa?: Record<string, any>;
+    /** Whether the label text should be visually hidden */
+    isLabelHidden?: boolean;
+    /** Whether the form element is required */
+    required?: boolean;
+}
+
+declare const FormField: ({ children, error, helperText, id: identifier, isInvalid, label, mb, qa, isLabelHidden, required, ...rest }: TypeFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { FormField, type TypeFormFieldProps, FormField as default };

package/dist/index.js

@@ -0,0 +1,120 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FormField: () => FormField_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/FormField.tsx
+var import_react2 = require("react");
+
+// ../seeds-react-hooks/dist/index.mjs
+var import_react = require("react");
+var import_styled_components = require("styled-components");
+var v = Object.freeze({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
+function X(r) {
+  let [t, e] = (0, import_react.useState)(r), s = (0, import_react.useCallback)((n) => {
+    n && n.textContent !== null && e(n.textContent);
+  }, []);
+  return s.current = t, s;
+}
+
+// src/FormField.tsx
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_label = __toESM(require("@sproutsocial/seeds-react-label"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_visually_hidden = require("@sproutsocial/seeds-react-visually-hidden");
+var import_jsx_runtime = require("react/jsx-runtime");
+var idCounter = 0;
+var FormField = ({
+  children,
+  error,
+  helperText,
+  id: identifier,
+  isInvalid = false,
+  label,
+  mb = 400,
+  qa,
+  isLabelHidden = false,
+  required,
+  ...rest
+}) => {
+  const [id] = (0, import_react2.useState)(identifier || `FormField-${idCounter++}`);
+  const errorId = `Error-${id}`;
+  const containerText = X("");
+  const errorContainerText = X("");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_seeds_react_box.default,
+    {
+      ...rest,
+      ...qa,
+      mb,
+      "data-qa-formfield": qa && qa["data-qa-formfield"] || id || containerText.current,
+      "data-qa-formfield-isinvalid": isInvalid === true,
+      children: [
+        isLabelHidden ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_visually_hidden.VisuallyHidden, { "data-testid": "visually-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_label.default, { htmlFor: id, required, children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_label.default, { mb: helperText ? 100 : 300, htmlFor: id, required, children: label }),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { as: "p", fontSize: 200, mb: 300, color: "text.subtext", children: helperText }),
+        children({
+          id,
+          isInvalid,
+          ariaDescribedby: errorId,
+          ...required !== void 0 && { required }
+        }),
+        isInvalid && error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_seeds_react_text.default,
+          {
+            as: "div",
+            fontSize: 200,
+            color: "text.error",
+            mt: 300,
+            id: errorId,
+            "data-qa-formfield-error": qa && qa["data-qa-formfield-error"] || errorContainerText.current,
+            children: error
+          }
+        )
+      ]
+    }
+  );
+};
+var FormField_default = FormField;
+
+// src/FormFieldTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = FormField_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormField
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/FormField.tsx","../../seeds-react-hooks/src/useMeasure/useMeasure.ts","../../seeds-react-hooks/src/useSelect/useSelect.ts","../../seeds-react-hooks/src/useMultiselect/useMultiselect.ts","../../seeds-react-hooks/src/useMutationObserver/useMutationObserver.ts","../../seeds-react-hooks/src/useTextContent/useTextContent.ts","../../seeds-react-hooks/src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../../seeds-react-hooks/src/useInteractiveColor/useInteractiveColor.ts","../src/FormFieldTypes.ts"],"sourcesContent":["import FormField from \"./FormField\";\n\nexport default FormField;\nexport { FormField };\nexport * from \"./FormFieldTypes\";\n","import React, { useState } from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Label from \"@sproutsocial/seeds-react-label\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeFormFieldProps } from \"./FormFieldTypes\";\n\nlet idCounter = 0;\n\nconst FormField = ({\n  children,\n  error,\n  helperText,\n  id: identifier,\n  isInvalid = false,\n  label,\n  mb = 400,\n  qa,\n  isLabelHidden = false,\n  required,\n  ...rest\n}: TypeFormFieldProps) => {\n  const [id] = useState(identifier || `FormField-${idCounter++}`);\n  const errorId = `Error-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  return (\n    <Box\n      {...rest}\n      {...qa}\n      mb={mb}\n      data-qa-formfield={\n        (qa && qa[\"data-qa-formfield\"]) || id || containerText.current\n      }\n      data-qa-formfield-isinvalid={isInvalid === true}\n    >\n      {isLabelHidden ? (\n        <VisuallyHidden data-testid=\"visually-hidden\">\n          <Label htmlFor={id} required={required}>\n            {label}\n          </Label>\n        </VisuallyHidden>\n      ) : (\n        <Label mb={helperText ? 100 : 300} htmlFor={id} required={required}>\n          {label}\n        </Label>\n      )}\n      {helperText && (\n        <Text as=\"p\" fontSize={200} mb={300} color=\"text.subtext\">\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby: errorId,\n        ...(required !== undefined && { required }),\n      })}\n      {isInvalid && error && (\n        <Text\n          as=\"div\"\n          fontSize={200}\n          color=\"text.error\"\n          mt={300}\n          id={errorId}\n          data-qa-formfield-error={\n            (qa && qa[\"data-qa-formfield-error\"]) || errorContainerText.current\n          }\n        >\n          {error}\n        </Text>\n      )}\n    </Box>\n  );\n};\n\nexport default FormField;\n","import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\nconst initialBounds = Object.freeze({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (\n      !element ||\n      // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n      !(\"ResizeObserver\" in window)\n    ) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { x, y, width, height, top, right, bottom, left } =\n        entry.contentRect;\n      setContentRect({\n        x,\n        y,\n        width,\n        height,\n        top,\n        right,\n        bottom,\n        left,\n      });\n    });\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref]);\n\n  return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n  initialValue?: T | \"\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n  {\n    initialValue = \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeSingleSelectProps<T> = {\n    initialValue: \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, setValue] = useState<string | T>(initialValue);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      if (newValue !== value) {\n        setValue(newValue);\n        userOnChange(newValue);\n      }\n    },\n    [userOnChange, value]\n  );\n\n  return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n  initialValue?: T[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n  state: Set<string>,\n  action: { type: string; value?: string }\n): Set<string> => {\n  const newState = new Set(state);\n  switch (action.type) {\n    case \"reset\": {\n      return new Set();\n    }\n    case \"toggle_item\":\n    default: {\n      if (action.value) {\n        if (newState.has(action.value)) {\n          newState.delete(action.value);\n        } else {\n          newState.add(action.value);\n        }\n      }\n      return newState;\n    }\n  }\n};\n\nexport const useMultiselect = <T extends string>(\n  {\n    initialValue = [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeMultiSelectProps<T> = {\n    initialValue: [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n  const getArrayValue = (value: Set<string | T>) =>\n    Array.from<string | T>(value);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      dispatch({ type: \"toggle_item\", value: newValue });\n    },\n    [dispatch]\n  );\n\n  const isFirstRun = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRun.current) {\n      isFirstRun.current = false;\n      return;\n    }\n    userOnChange(getArrayValue(value));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [userOnChange, value]);\n\n  const onClear = useCallback(() => {\n    dispatch({ type: \"reset\" });\n  }, [dispatch]);\n\n  return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n  | {\n      childList: true;\n    }\n  | {\n      attributes: true;\n    }\n  | {\n      characterData: true;\n    };\n\ntype TypeMutationObserverInit = {\n  subtree?: boolean;\n  attributeOldValue?: boolean;\n  characterDataOldValue?: boolean;\n  attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n  mutationList?: MutationRecord[],\n  observer?: MutationObserver\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n  mutationList;\n\nexport function useMutationObserver(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback = defaultCallback\n) {\n  if (!canUseDOM()) {\n    return;\n  }\n  /* eslint-disable-next-line */\n  const [value, setValue] = useState(undefined);\n  /* eslint-disable-next-line */\n  const observer = useMemo(\n    () =>\n      new MutationObserver((mutationList, observer) => {\n        const result = callback(mutationList, observer);\n        setValue(result);\n      }),\n    [callback]\n  );\n  /* eslint-disable-next-line */\n  useEffect(() => {\n    if (targetNode) {\n      observer.observe(targetNode, config);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [targetNode, config, observer]);\n\n  return value;\n}\n\nexport function useMutationObserverOnce(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback\n) {\n  const [isObserving, setObserving] = useState(true);\n  const node = isObserving ? targetNode : null;\n  const value = useMutationObserver(node, config, callback);\n  if (value !== undefined && isObserving) {\n    setObserving(false);\n  }\n  return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n  const [textContent, setTextContent] = useState(initial);\n\n  const ref: textContentRef = useCallback((node: Node) => {\n    if (node && node.textContent !== null) {\n      setTextContent(node.textContent);\n    }\n  }, []);\n\n  ref.current = textContent;\n  return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n  name: string,\n  props: { [key: string]: any }\n) {\n  // Get a mutable ref object where we can store props ...\n  // ... for comparison next time this hook runs.\n  const previousProps = useRef<typeof props>({});\n\n  useEffect(() => {\n    if (previousProps.current) {\n      // Get all keys from previous and current props\n      const allKeys = Object.keys({ ...previousProps.current, ...props });\n      // Use this object to keep track of changed props\n      const changesObj: typeof props = {};\n      // Iterate through keys\n      allKeys.forEach((key) => {\n        // If previous is different from current\n\n        if (previousProps.current[key] !== props[key]) {\n          // Add to changesObj\n\n          changesObj[key] = {\n            from: previousProps.current[key],\n\n            to: props[key],\n          };\n        }\n      });\n\n      // If changesObj not empty then output to console\n      if (Object.keys(changesObj).length) {\n        // eslint-disable-next-line no-console\n        console.log(\"[why-did-you-update]\", name, changesObj);\n      }\n    }\n\n    // Finally update previousProps with current props for next hook call\n    previousProps.current = props;\n  });\n}\n","import { darken, lighten } from \"polished\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n  // Throw error if used outside of a ThemeProvider (styled-components)\n  if (!useTheme()) {\n    throw new Error(\n      \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n    );\n  }\n\n  // Get the current theme mode ie. 'light' or 'dark'\n  const theme: TypeTheme = useTheme() as TypeTheme;\n  const themeMode = theme.mode;\n\n  // If the theme mode is dark, return a lightened version of the themeValue\n  if (themeMode === \"dark\") {\n    return lighten(0.2, themeColor);\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return darken(0.2, themeColor);\n  }\n};\n\nexport { useInteractiveColor };\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFormFieldProps extends Omit<TypeBoxProps, \"children\"> {\n  /** A function that receives props that need to be spread onto the child element */\n  children: (options: {\n    id: string;\n    isInvalid: boolean;\n    ariaDescribedby: string;\n    required?: boolean;\n  }) => React.ReactNode;\n\n  /** Text describing any error with the field's content */\n  error?: React.ReactNode;\n\n  /** Text acting as a description blurb below the main label **/\n  helperText?: React.ReactNode;\n\n  /** ID of the form element (will be auto-generated if not provided) */\n  id?: string;\n\n  /** Whether the current contents of the field are invalid */\n  isInvalid?: boolean;\n\n  /** Label text to display above the form field */\n  label: React.ReactNode;\n  qa?: Record<string, any>;\n\n  /** Whether the label text should be visually hidden */\n  isLabelHidden?: boolean;\n\n  /** Whether the form element is required */\n  required?: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAgC;;;ACAhC,mBAgBE;;;;;;;;;;;ADdF,6BAAgB;AAChB,+BAAkB;AAClB,8BAAiB;AACjB,yCAA+B;AAwB3B;AArBJ,IAAI,YAAY;AAEhB,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,CAAC,EAAE,QAAI,wBAAS,cAAc,aAAa,WAAW,EAAE;AAC9D,QAAM,UAAU,SAAS,EAAE;AAC3B,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,SACE;AAAA,IAAC,uBAAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,qBACG,MAAM,GAAG,mBAAmB,KAAM,MAAM,cAAc;AAAA,MAEzD,+BAA6B,cAAc;AAAA,MAE1C;AAAA,wBACC,4CAAC,qDAAe,eAAY,mBAC1B,sDAAC,yBAAAC,SAAA,EAAM,SAAS,IAAI,UACjB,iBACH,GACF,IAEA,4CAAC,yBAAAA,SAAA,EAAM,IAAI,aAAa,MAAM,KAAK,SAAS,IAAI,UAC7C,iBACH;AAAA,QAED,cACC,4CAAC,wBAAAC,SAAA,EAAK,IAAG,KAAI,UAAU,KAAK,IAAI,KAAK,OAAM,gBACxC,sBACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB,GAAI,aAAa,UAAa,EAAE,SAAS;AAAA,QAC3C,CAAC;AAAA,QACA,aAAa,SACZ;AAAA,UAAC,wBAAAA;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,OAAM;AAAA,YACN,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,2BACG,MAAM,GAAG,yBAAyB,KAAM,mBAAmB;AAAA,YAG7D;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,oBAAQ;;;AQ9Ef,IAAAC,SAAuB;;;ATEvB,IAAO,cAAQ;","names":["import_react","Box","Label","Text","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-form-field",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sproutsocial/seeds-react-form-field",
+  "version": "1.0.0",
+  "description": "Seeds React FormField",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^*",
+    "@sproutsocial/seeds-react-system-props": "^*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-text": "*",
+    "@sproutsocial/seeds-react-visually-hidden": "*",
+    "@sproutsocial/seeds-react-label": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-input": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/FormField.stories.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Input } from "@sproutsocial/seeds-react-input";
+// import { Select } from "@sproutsocial/seeds-react-select";
+// import { Textarea } from "@sproutsocial/seeds-react-textarea";
+import FormField from "./FormField";
+
+interface FormFieldStoryArgs extends React.ComponentProps<typeof FormField> {
+  value: string;
+}
+
+type Story = StoryObj<FormFieldStoryArgs>;
+
+const meta: Meta<FormFieldStoryArgs> = {
+  title: "Components/Form Elements/FormField",
+  component: FormField,
+  args: {
+    value: "",
+    mb: 100,
+    isInvalid: true,
+    required: false,
+  },
+};
+export default meta;
+
+export const Default: Story = {
+  render: (args) => (
+    <Box width="443px" margin="0 auto">
+      <FormField
+        label="Title"
+        helperText="This is a line of helper text"
+        required={args.required}
+      >
+        {(props) => <Input {...props} name="title" value={args.value} />}
+      </FormField>
+      {/* TODO: COME BACK AND UNCOMMENT WHEN SELECT AND TEXTAREA ARE MIGRATED OVER */}
+      {/* <FormField
+        id="descriptionIdThatIWantedToPassIn"
+        label="Description"
+        mb={args.mb}
+        required={args.required}
+      >
+        {(props) => (
+          <Textarea {...props} name="description" value={args.value} />
+        )}
+      </FormField> */}
+      {/* <FormField label="Reason" required={args.required}>
+        {(props) => (
+          <Select {...props} name="reason">
+            <option value="">Select a reason</option>
+            <option value="something">Something goes here</option>
+          </Select>
+        )}
+      </FormField> */}
+    </Box>
+  ),
+};
+
+export const Error: Story = {
+  render: (args) => (
+    <Box width="443px" margin="0 auto">
+      <FormField
+        label="Title"
+        helperText="This is a line of helper text"
+        error="There is an error associated with this input"
+        isInvalid={args.isInvalid}
+        required={args.required}
+      >
+        {(props) => <Input {...props} name="title" value={args.value} />}
+      </FormField>
+      {/* TODO: COME BACK AND UNCOMMENT WHEN SELECT AND TEXTAREA ARE MIGRATED OVER */}
+      {/* <FormField
+        id="descriptionIdThatIWantedToPassIn"
+        label="Description"
+        isInvalid={args.isInvalid}
+        error="There is an error associated with this textarea"
+        mb={args.mb}
+        required={args.required}
+      >
+        {(props) => (
+          <Textarea {...props} name="description" value={args.value} />
+        )}
+      </FormField> */}
+      {/* <FormField
+        label="Reason"
+        error="There is an error associated with this select"
+        isInvalid={args.isInvalid}
+        required={args.required}
+      >
+        {(props) => (
+          <Select {...props} name="reason">
+            <option value="">Select a reason</option>
+            <option value="something">Something goes here</option>
+          </Select>
+        )}
+      </FormField> */}
+    </Box>
+  ),
+};

package/src/FormField.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { useTextContent } from "@sproutsocial/seeds-react-hooks";
+import Box from "@sproutsocial/seeds-react-box";
+import Label from "@sproutsocial/seeds-react-label";
+import Text from "@sproutsocial/seeds-react-text";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+import type { TypeFormFieldProps } from "./FormFieldTypes";
+
+let idCounter = 0;
+
+const FormField = ({
+  children,
+  error,
+  helperText,
+  id: identifier,
+  isInvalid = false,
+  label,
+  mb = 400,
+  qa,
+  isLabelHidden = false,
+  required,
+  ...rest
+}: TypeFormFieldProps) => {
+  const [id] = useState(identifier || `FormField-${idCounter++}`);
+  const errorId = `Error-${id}`;
+  const containerText = useTextContent("");
+  const errorContainerText = useTextContent("");
+
+  return (
+    <Box
+      {...rest}
+      {...qa}
+      mb={mb}
+      data-qa-formfield={
+        (qa && qa["data-qa-formfield"]) || id || containerText.current
+      }
+      data-qa-formfield-isinvalid={isInvalid === true}
+    >
+      {isLabelHidden ? (
+        <VisuallyHidden data-testid="visually-hidden">
+          <Label htmlFor={id} required={required}>
+            {label}
+          </Label>
+        </VisuallyHidden>
+      ) : (
+        <Label mb={helperText ? 100 : 300} htmlFor={id} required={required}>
+          {label}
+        </Label>
+      )}
+      {helperText && (
+        <Text as="p" fontSize={200} mb={300} color="text.subtext">
+          {helperText}
+        </Text>
+      )}
+      {children({
+        id,
+        isInvalid,
+        ariaDescribedby: errorId,
+        ...(required !== undefined && { required }),
+      })}
+      {isInvalid && error && (
+        <Text
+          as="div"
+          fontSize={200}
+          color="text.error"
+          mt={300}
+          id={errorId}
+          data-qa-formfield-error={
+            (qa && qa["data-qa-formfield-error"]) || errorContainerText.current
+          }
+        >
+          {error}
+        </Text>
+      )}
+    </Box>
+  );
+};
+
+export default FormField;

package/src/FormFieldTypes.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+
+export interface TypeFormFieldProps extends Omit<TypeBoxProps, "children"> {
+  /** A function that receives props that need to be spread onto the child element */
+  children: (options: {
+    id: string;
+    isInvalid: boolean;
+    ariaDescribedby: string;
+    required?: boolean;
+  }) => React.ReactNode;
+
+  /** Text describing any error with the field's content */
+  error?: React.ReactNode;
+
+  /** Text acting as a description blurb below the main label **/
+  helperText?: React.ReactNode;
+
+  /** ID of the form element (will be auto-generated if not provided) */
+  id?: string;
+
+  /** Whether the current contents of the field are invalid */
+  isInvalid?: boolean;
+
+  /** Label text to display above the form field */
+  label: React.ReactNode;
+  qa?: Record<string, any>;
+
+  /** Whether the label text should be visually hidden */
+  isLabelHidden?: boolean;
+
+  /** Whether the form element is required */
+  required?: boolean;
+}

package/src/__tests__/FormField.test.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { Input } from "@sproutsocial/seeds-react-input";
+import FormField from "../FormField";
+
+describe("FormField", () => {
+  const label = "Label";
+  const inputVal = "value";
+  it("passes the autogenerated id down", () => {
+    render(
+      <FormField
+        label={label}
+        error="There is an error associated with this input"
+        isInvalid={true}
+      >
+        {(props) => (
+          <Input
+            {...props}
+            placeholder="Enter a title"
+            name="title"
+            value={inputVal}
+          />
+        )}
+      </FormField>
+    );
+    expect(screen.getByLabelText(label)).toHaveValue(inputVal);
+  });
+  it("passes the id passed in down to the input field", () => {
+    const manualId = "manualId";
+    render(
+      <FormField
+        id={manualId}
+        label={label}
+        error="There is an error associated with this input"
+        isInvalid={true}
+      >
+        {(props) => (
+          <Input {...props} placeholder="Enter a title" name="title" value="" />
+        )}
+      </FormField>
+    );
+    expect(screen.getByLabelText(label)).toHaveAttribute("id", manualId);
+  });
+  it("is accessible", async () => {
+    const { runA11yCheck } = render(
+      <FormField
+        label="Title"
+        error="There is an error associated with this input"
+        isInvalid={true}
+      >
+        {(props) => (
+          <Input {...props} placeholder="Enter a title" name="title" value="" />
+        )}
+      </FormField>
+    );
+    await runA11yCheck();
+  });
+  it("should visually hide label", () => {
+    const manualId = "manualId";
+    render(
+      <FormField id={manualId} label={label} isLabelHidden={true}>
+        {(props) => (
+          <Input {...props} placeholder="Enter a title" name="title" value="" />
+        )}
+      </FormField>
+    );
+    expect(screen.getByTestId("visually-hidden")).toBeInTheDocument();
+  });
+  it("should be required when required is true", () => {
+    render(
+      <FormField label={label} required>
+        {(props) => <Input {...props} name="title" />}
+      </FormField>
+    );
+    expect(screen.getByLabelText(`${label}*`)).toBeRequired();
+  });
+});

package/src/__tests__/FormField.typetest.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { Input } from "@sproutsocial/seeds-react-input";
+// import Select from "@sproutsocial/seeds-react-select";
+// import Textarea from "@sproutsocial/seeds-react-textarea";
+import FormField from "../FormField";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function FormFieldTypes() {
+  return (
+    <>
+      <FormField label="Title" helperText="This is a line of helper text">
+        {(props) => (
+          <Input {...props} name="title" placeholder="Enter a title" />
+        )}
+      </FormField>
+      {/* <FormField id="descriptionIdThatIWantedToPassIn" label="Description">
+        {(props) => (
+          <Textarea
+            {...props}
+            name="description"
+            placeholder="Enter a description"
+          />
+        )}
+      </FormField>
+      <FormField label="Reason">
+        {(props) => (
+          <Select {...props} name="reason">
+            <option value="">Select a reason</option>
+            <option value="something">Something goes here</option>
+          </Select>
+        )}
+      </FormField> */}
+      <FormField
+        label="Title"
+        helperText="This is a line of helper text"
+        error="There is an error associated with this input"
+      >
+        {(props) => (
+          <Input {...props} name="title" placeholder="Enter a title" />
+        )}
+      </FormField>
+      {/* <FormField
+        id="descriptionIdThatIWantedToPassIn"
+        label="Description"
+        error="There is an error associated with this textarea"
+      >
+        {(props) => (
+          <Textarea
+            {...props}
+            name="description"
+            placeholder="Enter a description"
+          />
+        )}
+      </FormField>
+      <FormField
+        label="Reason"
+        error="There is an error associated with this select"
+      >
+        {(props) => (
+          <Select {...props} name="reason">
+            <option value="">Select a reason</option>
+            <option value="something">Something goes here</option>
+          </Select>
+        )}
+      </FormField> */}
+      <FormField label="Title" required>
+        {(props) => <Input {...props} name="title" />}
+      </FormField>
+      {/* <FormField label="Title" required>
+        {(props) => <Textarea {...props} name="title" />}
+      </FormField>
+      <FormField label="Title" required>
+        {(props) => (
+          <Select {...props} name="reason">
+            <option value="">Select a reason</option>
+            <option value="something">Something goes here</option>
+          </Select>
+        )}
+      </FormField> */}
+      {/* @ts-expect-error - test that missing required props is rejected */}
+      <FormField />
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import FormField from "./FormField";
+
+export default FormField;
+export { FormField };
+export * from "./FormFieldTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));