@sproutsocial/seeds-react-form-field 1.1.10 → 1.1.17

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     2.99 KB
-ESM dist/esm/index.js.map 14.90 KB
-ESM ⚡️ Build success in 23ms
-CJS dist/index.js     5.00 KB
-CJS dist/index.js.map 14.96 KB
-CJS ⚡️ Build success in 25ms
+CJS dist/index.js     5.04 KB
+CJS dist/index.js.map 16.54 KB
+CJS ⚡️ Build success in 71ms
+ESM dist/esm/index.js     3.05 KB
+ESM dist/esm/index.js.map 16.48 KB
+ESM ⚡️ Build success in 72ms
 DTS Build start
-DTS ⚡️ Build success in 3507ms
+DTS ⚡️ Build success in 3916ms
 DTS dist/index.d.ts  1.35 KB
 DTS dist/index.d.mts 1.35 KB
-Done in 4.92s.
+Done in 5.61s.

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @sproutsocial/seeds-react-form-field
 
+## 1.1.17
+
+### Patch Changes
+
+- Updated dependencies [a13a571]
+  - @sproutsocial/seeds-react-theme@4.1.1
+  - @sproutsocial/seeds-react-box@1.1.22
+  - @sproutsocial/seeds-react-label@1.0.23
+  - @sproutsocial/seeds-react-visually-hidden@1.0.23
+
+## 1.1.16
+
+### Patch Changes
+
+- Updated dependencies [edc1819]
+  - @sproutsocial/seeds-react-text@1.4.3
+  - @sproutsocial/seeds-react-label@1.0.22
+
+## 1.1.15
+
+### Patch Changes
+
+- Updated dependencies [5892f44]
+  - @sproutsocial/seeds-react-system-props@3.1.1
+  - @sproutsocial/seeds-react-box@1.1.21
+  - @sproutsocial/seeds-react-label@1.0.21
+  - @sproutsocial/seeds-react-text@1.4.2
+  - @sproutsocial/seeds-react-visually-hidden@1.0.22
+
+## 1.1.14
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+  - @sproutsocial/seeds-react-theme@4.1.0
+  - @sproutsocial/seeds-react-box@1.1.20
+  - @sproutsocial/seeds-react-label@1.0.20
+  - @sproutsocial/seeds-react-visually-hidden@1.0.21
+
+## 1.1.13
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-theme@4.0.0
+  - @sproutsocial/seeds-react-system-props@3.1.0
+  - @sproutsocial/seeds-react-box@1.1.19
+  - @sproutsocial/seeds-react-label@1.0.19
+  - @sproutsocial/seeds-react-visually-hidden@1.0.20
+  - @sproutsocial/seeds-react-text@1.4.1
+
+## 1.1.12
+
+### Patch Changes
+
+- Updated dependencies [47c62b3]
+  - @sproutsocial/seeds-react-theme@3.7.1
+  - @sproutsocial/seeds-react-box@1.1.18
+  - @sproutsocial/seeds-react-label@1.0.18
+  - @sproutsocial/seeds-react-visually-hidden@1.0.19
+
+## 1.1.11
+
+### Patch Changes
+
+- Updated dependencies [06da9c2]
+  - @sproutsocial/seeds-react-theme@3.7.0
+  - @sproutsocial/seeds-react-box@1.1.17
+  - @sproutsocial/seeds-react-label@1.0.17
+  - @sproutsocial/seeds-react-visually-hidden@1.0.18
+
 ## 1.1.10
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,15 +1,16 @@
 // src/FormField.tsx
-import { useMemo as useMemo2, useState as useState2 } from "react";
+import { useMemo as useMemo2, useState as useState3 } from "react";
 
 // ../seeds-react-hooks/dist/index.mjs
-import { useState, useLayoutEffect, useCallback, useReducer, useRef, useEffect, useMemo } from "react";
+import * as c from "react";
+import { useState as useState2, useLayoutEffect, useCallback, useReducer, useRef, useEffect as useEffect2, 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 H(r) {
-  let [t, e] = useState(r), s = useCallback((n) => {
-    n && n.textContent !== null && e(n.textContent);
+var T = Object.freeze({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
+function J(t) {
+  let [r, e] = useState2(t), o = useCallback((s) => {
+    s && s.textContent !== null && e(s.textContent);
   }, []);
-  return s.current = t, s;
+  return o.current = r, o;
 }
 
 // src/FormField.tsx
@@ -32,11 +33,11 @@ var FormField = ({
   required,
   ...rest
 }) => {
-  const [id] = useState2(identifier || `FormField-${idCounter++}`);
+  const [id] = useState3(identifier || `FormField-${idCounter++}`);
   const errorId = `Error-${id}`;
   const helperTextId = `HelperText-${id}`;
-  const containerText = H("");
-  const errorContainerText = H("");
+  const containerText = J("");
+  const errorContainerText = J("");
   const ariaDescribedby = useMemo2(() => {
     const ids = [
       helperText && helperTextId,

package/dist/esm/index.js.map

@@ -1 +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, { useMemo, 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 helperTextId = `HelperText-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  const ariaDescribedby = useMemo(() => {\n    const ids = [\n      helperText && helperTextId,\n      isInvalid && error && errorId,\n    ].filter(Boolean);\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  }, [helperText, helperTextId, isInvalid, error, errorId]);\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\n          as=\"p\"\n          fontSize={200}\n          mb={300}\n          color=\"text.subtext\"\n          id={helperTextId}\n        >\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby,\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 { 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 `color-mix(in srgb, ${themeColor}, white 20%)`;\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return `color-mix(in srgb, ${themeColor}, black 20%)`;\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,WAAAA,UAAS,YAAAC,iBAAgB;A;;;;ACYzC,IAAMC,IAAgB,OAAO,OAAO,EAClC,GAAG,GACH,GAAG,GACH,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,EACR,CAAC;AIlBM,SAASC,EAAeC,GAAiB;AAC9C,MAAM,CAACC,GAAaC,CAAc,IAAIC,SAASH,CAAO,GAEhDI,IAAsBC,YAAaC,OAAe;AAClDA,SAAQA,EAAK,gBAAgB,QAC/BJ,EAAeI,EAAK,WAAW;EAEnC,GAAG,CAAA,CAAE;AAEL,SAAAF,EAAI,UAAUH,GACPG;AACT;;;ALZA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAiC3B,SAWM,KAXN;AA9BJ,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,IAAIG,UAAS,cAAc,aAAa,WAAW,EAAE;AAC9D,QAAM,UAAU,SAAS,EAAE;AAC3B,QAAM,eAAe,cAAc,EAAE;AACrC,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,QAAM,kBAAkBC,SAAQ,MAAM;AACpC,UAAM,MAAM;AAAA,MACV,cAAc;AAAA,MACd,aAAa,SAAS;AAAA,IACxB,EAAE,OAAO,OAAO;AAChB,WAAO,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI;AAAA,EAC1C,GAAG,CAAC,YAAY,cAAc,WAAW,OAAO,OAAO,CAAC;AAExD,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;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,OAAM;AAAA,YACN,IAAI;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA,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;;;AQ7Ff,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["useMemo","useState","initialBounds","useTextContent","initial","textContent","setTextContent","useState","ref","useCallback","node","useState","useMemo"]}
+{"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","../../../seeds-react-hooks/src/useIsMobile/useIsMobile.ts","../../src/FormFieldTypes.ts","../../src/index.ts"],"sourcesContent":["import React, { useMemo, 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 helperTextId = `HelperText-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  const ariaDescribedby = useMemo(() => {\n    const ids = [\n      helperText && helperTextId,\n      isInvalid && error && errorId,\n    ].filter(Boolean);\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  }, [helperText, helperTextId, isInvalid, error, errorId]);\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\n          as=\"p\"\n          fontSize={200}\n          mb={300}\n          color=\"text.subtext\"\n          id={helperTextId}\n        >\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby,\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 { 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 `color-mix(in srgb, ${themeColor}, white 20%)`;\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return `color-mix(in srgb, ${themeColor}, black 20%)`;\n  }\n};\n\nexport { useInteractiveColor };\n","import * as React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * Returns `true` when the viewport matches a mobile-width media query.\n *\n * @param breakpoint Optional override. Accepts a CSS string (`\"640px\"`,\n *   `\"40em\"`) or a number (interpreted as px). Defaults to the styled-components\n *   theme's `breakpoints.sm` (falling back to `\"640px\"` if the theme is\n *   unavailable).\n */\nexport function useIsMobile(breakpoint?: number | string): boolean {\n  const styledTheme = useTheme() as TypeTheme | undefined;\n  const themeSm = styledTheme?.breakpoints?.sm ?? \"640px\";\n  const resolved =\n    typeof breakpoint === \"number\" ? `${breakpoint}px` : breakpoint ?? themeSm;\n\n  const [isMobile, setIsMobile] = React.useState(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return false;\n    }\n    return window.matchMedia(`(max-width: ${resolved})`).matches;\n  });\n\n  React.useEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return;\n    }\n    const mq = window.matchMedia(`(max-width: ${resolved})`);\n    setIsMobile(mq.matches);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener?.(\"change\", handler);\n    return () => mq.removeEventListener?.(\"change\", handler);\n  }, [resolved]);\n\n  return isMobile;\n}\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,WAAAA,UAAS,YAAAC,iBAAgB;A;;;;;ACYzC,IAAMC,IAAgB,OAAO,OAAO,EAClC,GAAG,GACH,GAAG,GACH,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,EACR,CAAC;AIlBM,SAASC,EAAeC,GAAiB;AAC9C,MAAM,CAACC,GAAaC,CAAc,IAAIC,UAASH,CAAO,GAEhDI,IAAsBC,YAAaC,OAAe;AAClDA,SAAQA,EAAK,gBAAgB,QAC/BJ,EAAeI,EAAK,WAAW;EAEnC,GAAG,CAAA,CAAE;AAEL,SAAAF,EAAI,UAAUH,GACPG;AACT;;;ALZA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAiC3B,SAWM,KAXN;AA9BJ,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,IAAIG,UAAS,cAAc,aAAa,WAAW,EAAE;AAC9D,QAAM,UAAU,SAAS,EAAE;AAC3B,QAAM,eAAe,cAAc,EAAE;AACrC,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,QAAM,kBAAkBC,SAAQ,MAAM;AACpC,UAAM,MAAM;AAAA,MACV,cAAc;AAAA,MACd,aAAa,SAAS;AAAA,IACxB,EAAE,OAAO,OAAO;AAChB,WAAO,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI;AAAA,EAC1C,GAAG,CAAC,YAAY,cAAc,WAAW,OAAO,OAAO,CAAC;AAExD,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;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,OAAM;AAAA,YACN,IAAI;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA,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;;;AS7Ff,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["useMemo","useState","initialBounds","useTextContent","initial","textContent","setTextContent","useState","ref","useCallback","node","useState","useMemo"]}

package/dist/index.js

@@ -39,14 +39,15 @@ module.exports = __toCommonJS(index_exports);
 var import_react2 = require("react");
 
 // ../seeds-react-hooks/dist/index.mjs
+var c = __toESM(require("react"), 1);
 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 H(r) {
-  let [t, e] = (0, import_react.useState)(r), s = (0, import_react.useCallback)((n) => {
-    n && n.textContent !== null && e(n.textContent);
+var T = Object.freeze({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
+function J(t) {
+  let [r, e] = (0, import_react.useState)(t), o = (0, import_react.useCallback)((s) => {
+    s && s.textContent !== null && e(s.textContent);
   }, []);
-  return s.current = t, s;
+  return o.current = r, o;
 }
 
 // src/FormField.tsx
@@ -72,8 +73,8 @@ var FormField = ({
   const [id] = (0, import_react2.useState)(identifier || `FormField-${idCounter++}`);
   const errorId = `Error-${id}`;
   const helperTextId = `HelperText-${id}`;
-  const containerText = H("");
-  const errorContainerText = H("");
+  const containerText = J("");
+  const errorContainerText = J("");
   const ariaDescribedby = (0, import_react2.useMemo)(() => {
     const ids = [
       helperText && helperTextId,

package/dist/index.js.map

@@ -1 +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, { useMemo, 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 helperTextId = `HelperText-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  const ariaDescribedby = useMemo(() => {\n    const ids = [\n      helperText && helperTextId,\n      isInvalid && error && errorId,\n    ].filter(Boolean);\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  }, [helperText, helperTextId, isInvalid, error, errorId]);\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\n          as=\"p\"\n          fontSize={200}\n          mb={300}\n          color=\"text.subtext\"\n          id={helperTextId}\n        >\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby,\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 { 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 `color-mix(in srgb, ${themeColor}, white 20%)`;\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return `color-mix(in srgb, ${themeColor}, black 20%)`;\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,gBAAyC;A;;;;ACYzC,IAAMC,IAAgB,OAAO,OAAO,EAClC,GAAG,GACH,GAAG,GACH,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,EACR,CAAC;AIlBM,SAASC,EAAeC,GAAiB;AAC9C,MAAM,CAACC,GAAaC,CAAc,QAAIC,uBAASH,CAAO,GAEhDI,QAAsBC,0BAAaC,OAAe;AAClDA,SAAQA,EAAK,gBAAgB,QAC/BJ,EAAeI,EAAK,WAAW;EAEnC,GAAG,CAAA,CAAE;AAEL,SAAAF,EAAI,UAAUH,GACPG;AACT;;;ALZA,6BAAgB;AAChB,+BAAkB;AAClB,8BAAiB;AACjB,yCAA+B;AAiC3B;AA9BJ,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,eAAe,cAAc,EAAE;AACrC,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,QAAM,sBAAkB,uBAAQ,MAAM;AACpC,UAAM,MAAM;AAAA,MACV,cAAc;AAAA,MACd,aAAa,SAAS;AAAA,IACxB,EAAE,OAAO,OAAO;AAChB,WAAO,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI;AAAA,EAC1C,GAAG,CAAC,YAAY,cAAc,WAAW,OAAO,OAAO,CAAC;AAExD,SACE;AAAA,IAAC,uBAAAG;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;AAAA,UAAC,wBAAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,OAAM;AAAA,YACN,IAAI;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA,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;;;AQ7Ff,IAAAC,SAAuB;;;ATEvB,IAAO,gBAAQ;","names":["import_react","initialBounds","useTextContent","initial","textContent","setTextContent","useState","ref","useCallback","node","Box","Label","Text","React"]}
+{"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","../../seeds-react-hooks/src/useIsMobile/useIsMobile.ts","../src/FormFieldTypes.ts"],"sourcesContent":["import FormField from \"./FormField\";\n\nexport default FormField;\nexport { FormField };\nexport * from \"./FormFieldTypes\";\n","import React, { useMemo, 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 helperTextId = `HelperText-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  const ariaDescribedby = useMemo(() => {\n    const ids = [\n      helperText && helperTextId,\n      isInvalid && error && errorId,\n    ].filter(Boolean);\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  }, [helperText, helperTextId, isInvalid, error, errorId]);\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\n          as=\"p\"\n          fontSize={200}\n          mb={300}\n          color=\"text.subtext\"\n          id={helperTextId}\n        >\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby,\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 { 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 `color-mix(in srgb, ${themeColor}, white 20%)`;\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return `color-mix(in srgb, ${themeColor}, black 20%)`;\n  }\n};\n\nexport { useInteractiveColor };\n","import * as React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * Returns `true` when the viewport matches a mobile-width media query.\n *\n * @param breakpoint Optional override. Accepts a CSS string (`\"640px\"`,\n *   `\"40em\"`) or a number (interpreted as px). Defaults to the styled-components\n *   theme's `breakpoints.sm` (falling back to `\"640px\"` if the theme is\n *   unavailable).\n */\nexport function useIsMobile(breakpoint?: number | string): boolean {\n  const styledTheme = useTheme() as TypeTheme | undefined;\n  const themeSm = styledTheme?.breakpoints?.sm ?? \"640px\";\n  const resolved =\n    typeof breakpoint === \"number\" ? `${breakpoint}px` : breakpoint ?? themeSm;\n\n  const [isMobile, setIsMobile] = React.useState(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return false;\n    }\n    return window.matchMedia(`(max-width: ${resolved})`).matches;\n  });\n\n  React.useEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return;\n    }\n    const mq = window.matchMedia(`(max-width: ${resolved})`);\n    setIsMobile(mq.matches);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener?.(\"change\", handler);\n    return () => mq.removeEventListener?.(\"change\", handler);\n  }, [resolved]);\n\n  return isMobile;\n}\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,gBAAyC;A;;;;;ACYzC,IAAMC,IAAgB,OAAO,OAAO,EAClC,GAAG,GACH,GAAG,GACH,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,EACR,CAAC;AIlBM,SAASC,EAAeC,GAAiB;AAC9C,MAAM,CAACC,GAAaC,CAAc,QAAIC,uBAASH,CAAO,GAEhDI,QAAsBC,0BAAaC,OAAe;AAClDA,SAAQA,EAAK,gBAAgB,QAC/BJ,EAAeI,EAAK,WAAW;EAEnC,GAAG,CAAA,CAAE;AAEL,SAAAF,EAAI,UAAUH,GACPG;AACT;;;ALZA,6BAAgB;AAChB,+BAAkB;AAClB,8BAAiB;AACjB,yCAA+B;AAiC3B;AA9BJ,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,eAAe,cAAc,EAAE;AACrC,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,QAAM,sBAAkB,uBAAQ,MAAM;AACpC,UAAM,MAAM;AAAA,MACV,cAAc;AAAA,MACd,aAAa,SAAS;AAAA,IACxB,EAAE,OAAO,OAAO;AAChB,WAAO,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI;AAAA,EAC1C,GAAG,CAAC,YAAY,cAAc,WAAW,OAAO,OAAO,CAAC;AAExD,SACE;AAAA,IAAC,uBAAAG;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;AAAA,UAAC,wBAAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,OAAM;AAAA,YACN,IAAI;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA,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;;;AS7Ff,IAAAC,SAAuB;;;AVEvB,IAAO,gBAAQ;","names":["import_react","initialBounds","useTextContent","initial","textContent","setTextContent","useState","ref","useCallback","node","Box","Label","Text","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-form-field",
-  "version": "1.1.10",
+  "version": "1.1.17",
   "description": "Seeds React FormField",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,12 +18,12 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.6.2",
-    "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-box": "^1.1.16",
-    "@sproutsocial/seeds-react-text": "^1.4.0",
-    "@sproutsocial/seeds-react-visually-hidden": "^1.0.17",
-    "@sproutsocial/seeds-react-label": "^1.0.16"
+    "@sproutsocial/seeds-react-theme": "^4.1.1",
+    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-box": "^1.1.22",
+    "@sproutsocial/seeds-react-text": "^1.4.3",
+    "@sproutsocial/seeds-react-visually-hidden": "^1.0.23",
+    "@sproutsocial/seeds-react-label": "^1.0.23"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -36,7 +36,7 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-input": "^1.5.11"
+    "@sproutsocial/seeds-react-input": "^1.5.27"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"