@kaizen/components 1.26.0 → 1.27.0

package/dist/esm/Input/InputRange/InputRange.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputRange.mjs","sources":["../../../../src/Input/InputRange/InputRange.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, ReactNode, useState } from \"react\"\nimport classnames from \"classnames\"\nimport { VisuallyHidden } from \"@kaizen/a11y\"\nimport { Text } from \"~components/Text\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./InputRange.module.scss\"\n\nexport type InputRangeProps = {\n  id: string\n  defaultValue?: number\n  value?: number\n  minLabel: ReactNode\n  maxLabel: ReactNode\n  min?: number\n  max?: number\n} & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>\n\n/**\n * {@link https://cultureamp.design/?path=/docs/components-input-range--docs Storybook}\n */\nexport const InputRange = ({\n  id,\n  defaultValue,\n  value,\n  minLabel,\n  maxLabel,\n  min = 1,\n  max = 10,\n  onChange,\n  \"aria-describedby\": ariaDescribedby,\n  classNameOverride,\n  disabled,\n  readOnly,\n  ...restProps\n}: InputRangeProps): JSX.Element => {\n  const [step, setStep] = useState(0.5) // Let the dot center between the notch initially\n  const visuallyHiddenHintId = `${id}-helper`\n  const readOnlyWithNoValue = readOnly && !value && !defaultValue\n\n  // This has been split out into a different variable to allow usage of defaultValue above^\n  // Plus it lets us use max from props with its default value\n  const defaultValueWithDefault = defaultValue || (max + 1) / 2\n\n  return (\n    <>\n      <input\n        id={id}\n        className={classnames(\n          styles.ratingScaleRange,\n          classNameOverride,\n          readOnlyWithNoValue && styles.hideThumb,\n          disabled && styles.disabled\n        )}\n        disabled={disabled || readOnly}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        defaultValue={value ? undefined : defaultValueWithDefault}\n        value={value}\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-describedby={`${visuallyHiddenHintId} ${\n          ariaDescribedby ? ariaDescribedby : \"\"\n        }`}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {\n          setStep(1) // Put the stepper to 1 to avoid floating value\n          onChange?.(e)\n        }}\n        {...restProps}\n      />\n      <div className={classnames(styles.spokes, disabled && styles.disabled)}>\n        {[...Array(max)].map((_, index) => (\n          <div key={`${id}-spoke-${index}`} className={styles.spokeContainer}>\n            <div className={styles.spoke} />\n          </div>\n        ))}\n      </div>\n      <VisuallyHidden id={visuallyHiddenHintId}>\n        {min} is {minLabel}, {max} is {maxLabel}\n      </VisuallyHidden>\n      <div className={styles.labelsContainer}>\n        {!readOnlyWithNoValue && (\n          <div\n            className={classnames(\n              styles.sliderLabels,\n              disabled && styles.disabled\n            )}\n          >\n            <Text variant=\"small\" color=\"dark-reduced-opacity\" tag=\"span\">\n              {minLabel}\n            </Text>\n            <Text variant=\"small\" color=\"dark-reduced-opacity\" tag=\"span\">\n              {maxLabel}\n            </Text>\n          </div>\n        )}\n      </div>\n    </>\n  )\n}\n\nInputRange.displayName = \"InputRange\"\n"],"names":["InputRange","_a","id","defaultValue","value","minLabel","maxLabel","_b","min","_c","max","onChange","ariaDescribedby","classNameOverride","disabled","readOnly","restProps","__rest","_d","useState","step","setStep","visuallyHiddenHintId","concat","readOnlyWithNoValue","defaultValueWithDefault","React","createElement","Fragment","__assign","className","classnames","styles","ratingScaleRange","hideThumb","type","undefined","e","spokes","__spreadArray","Array","map","_","index","key","spokeContainer","spoke","VisuallyHidden","labelsContainer","sliderLabels","Text","variant","color","tag","displayName"],"mappings":"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"}
+{"version":3,"file":"InputRange.mjs","sources":["../../../../src/Input/InputRange/InputRange.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, ReactNode, useState } from \"react\"\nimport classnames from \"classnames\"\nimport { Text } from \"~components/Text\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./InputRange.module.scss\"\n\nexport type InputRangeProps = {\n  id: string\n  defaultValue?: number\n  value?: number\n  minLabel: ReactNode\n  maxLabel: ReactNode\n  min?: number\n  max?: number\n} & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>\n\n/**\n * {@link https://cultureamp.design/?path=/docs/components-input-range--docs Storybook}\n */\nexport const InputRange = ({\n  id,\n  defaultValue,\n  value,\n  minLabel,\n  maxLabel,\n  min = 1,\n  max = 10,\n  onChange,\n  \"aria-describedby\": ariaDescribedby,\n  classNameOverride,\n  disabled,\n  readOnly,\n  ...restProps\n}: InputRangeProps): JSX.Element => {\n  const [step, setStep] = useState(0.5) // Let the dot center between the notch initially\n  const visuallyHiddenHintId = `${id}-helper`\n  const readOnlyWithNoValue = readOnly && !value && !defaultValue\n\n  // This has been split out into a different variable to allow usage of defaultValue above^\n  // Plus it lets us use max from props with its default value\n  const defaultValueWithDefault = defaultValue || (max + 1) / 2\n\n  return (\n    <>\n      <input\n        id={id}\n        className={classnames(\n          styles.ratingScaleRange,\n          classNameOverride,\n          readOnlyWithNoValue && styles.hideThumb,\n          disabled && styles.disabled\n        )}\n        disabled={disabled || readOnly}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        defaultValue={value ? undefined : defaultValueWithDefault}\n        value={value}\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-describedby={`${visuallyHiddenHintId} ${\n          ariaDescribedby ? ariaDescribedby : \"\"\n        }`}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {\n          setStep(1) // Put the stepper to 1 to avoid floating value\n          onChange?.(e)\n        }}\n        {...restProps}\n      />\n      <div className={classnames(styles.spokes, disabled && styles.disabled)}>\n        {[...Array(max)].map((_, index) => (\n          <div key={`${id}-spoke-${index}`} className={styles.spokeContainer}>\n            <div className={styles.spoke} />\n          </div>\n        ))}\n      </div>\n      <VisuallyHidden id={visuallyHiddenHintId}>\n        {min} is {minLabel}, {max} is {maxLabel}\n      </VisuallyHidden>\n      <div className={styles.labelsContainer}>\n        {!readOnlyWithNoValue && (\n          <div\n            className={classnames(\n              styles.sliderLabels,\n              disabled && styles.disabled\n            )}\n          >\n            <Text variant=\"small\" color=\"dark-reduced-opacity\" tag=\"span\">\n              {minLabel}\n            </Text>\n            <Text variant=\"small\" color=\"dark-reduced-opacity\" tag=\"span\">\n              {maxLabel}\n            </Text>\n          </div>\n        )}\n      </div>\n    </>\n  )\n}\n\nInputRange.displayName = \"InputRange\"\n"],"names":["InputRange","_a","id","defaultValue","value","minLabel","maxLabel","_b","min","_c","max","onChange","ariaDescribedby","classNameOverride","disabled","readOnly","restProps","__rest","_d","useState","step","setStep","visuallyHiddenHintId","concat","readOnlyWithNoValue","defaultValueWithDefault","React","createElement","Fragment","__assign","className","classnames","styles","ratingScaleRange","hideThumb","type","undefined","e","spokes","__spreadArray","Array","map","_","index","key","spokeContainer","spoke","VisuallyHidden","labelsContainer","sliderLabels","Text","variant","color","tag","displayName"],"mappings":"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"}

package/dist/esm/TextArea/TextArea.mjs

@@ -0,0 +1,83 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import styles from './TextArea.module.scss.mjs';
+const TextArea = /*#__PURE__*/function () {
+  const TextArea = function (_a) {
+    var propsTextAreaRef = _a.textAreaRef,
+      _b = _a.status,
+      status = _b === void 0 ? "default" : _b,
+      _c = _a.autogrow,
+      autogrow = _c === void 0 ? false : _c,
+      _d = _a.reversed,
+      reversed = _d === void 0 ? false : _d,
+      _e = _a.rows,
+      rows = _e === void 0 ? 3 : _e,
+      defaultValue = _a.defaultValue,
+      value = _a.value,
+      disabled = _a.disabled,
+      propsOnChange = _a.onChange,
+      restProps = __rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
+    var _f = useState("auto"),
+      textAreaHeight = _f[0],
+      setTextAreaHeight = _f[1];
+    var _g = useState("auto"),
+      parentHeight = _g[0],
+      setParentHeight = _g[1];
+    var _h = useState(autogrow ? defaultValue : undefined),
+      internalValue = _h[0],
+      setInternalValue = _h[1];
+    // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
+    // essentially forces the textarea into an (interally) controlled mode if autogrow is true
+    var textAreaRef = propsTextAreaRef || useRef(null);
+    useEffect(function () {
+      if (!autogrow) return;
+      var scrollHeight = textAreaRef.current.scrollHeight;
+      if (scrollHeight < 1) return;
+      var borderWidth = textAreaRef.current ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10) : 0;
+      var newHeight = scrollHeight + borderWidth * 2;
+      setParentHeight("".concat(newHeight, "px"));
+      setTextAreaHeight("".concat(newHeight, "px"));
+    }, [internalValue]);
+    var onChange = !autogrow ? undefined : function (event) {
+      setTextAreaHeight("auto");
+      // ^ this is required to avoid the textarea height from building up indefinitely
+      // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee
+      setInternalValue(event.target.value);
+      if (propsOnChange) {
+        propsOnChange(event);
+      }
+    };
+    var getWrapperStyle = function () {
+      return autogrow ? {
+        minHeight: parentHeight
+      } : undefined;
+    };
+    var getTextAreaStyle = function () {
+      return autogrow ? {
+        height: textAreaHeight
+      } : undefined;
+    };
+    var controlledValue = value || internalValue;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.wrapper,
+      style: getWrapperStyle()
+    }, /*#__PURE__*/React.createElement("textarea", __assign({
+      className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles["default"], disabled && styles.disabled),
+      rows: rows,
+      onChange: onChange || propsOnChange,
+      value: controlledValue,
+      defaultValue: controlledValue ? undefined : defaultValue,
+      // ^ React throws a warning if you specify both a value and a defaultValue
+      ref: textAreaRef,
+      style: getTextAreaStyle(),
+      disabled: disabled
+    }, restProps)), /*#__PURE__*/React.createElement("div", {
+      className: styles.focusRing
+    }));
+  };
+  TextArea.displayName = "TextArea";
+  return TextArea;
+}();
+export { TextArea };
+//# sourceMappingURL=TextArea.mjs.map

package/dist/esm/TextArea/TextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.mjs","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React, {\n  TextareaHTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./TextArea.module.scss\"\n\nexport type TextAreaProps = {\n  textAreaRef?: React.RefObject<HTMLTextAreaElement>\n  status?: \"default\" | \"error\" | \"caution\"\n  autogrow?: boolean\n  reversed?: boolean\n} & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>\n\nexport const TextArea = ({\n  textAreaRef: propsTextAreaRef,\n  status = \"default\",\n  autogrow = false,\n  reversed = false,\n  rows = 3,\n  defaultValue,\n  value,\n  disabled,\n  onChange: propsOnChange,\n  ...restProps\n}: TextAreaProps): JSX.Element => {\n  const [textAreaHeight, setTextAreaHeight] = useState<string>(\"auto\")\n  const [parentHeight, setParentHeight] = useState<string>(\"auto\")\n  const [internalValue, setInternalValue] = useState<\n    string | number | readonly string[] | undefined\n  >(autogrow ? defaultValue : undefined)\n  // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas\n  // essentially forces the textarea into an (interally) controlled mode if autogrow is true\n  const textAreaRef = propsTextAreaRef || useRef(null)\n\n  useEffect(() => {\n    if (!autogrow) return\n\n    const scrollHeight = textAreaRef.current!.scrollHeight\n    if (scrollHeight < 1) return\n\n    const borderWidth = textAreaRef.current\n      ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10)\n      : 0\n    const newHeight = scrollHeight + borderWidth * 2\n    setParentHeight(`${newHeight}px`)\n    setTextAreaHeight(`${newHeight}px`)\n  }, [internalValue])\n\n  const onChange = !autogrow\n    ? undefined\n    : (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n        setTextAreaHeight(\"auto\")\n        // ^ this is required to avoid the textarea height from building up indefinitely\n        // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee\n\n        setInternalValue(event.target.value)\n        if (propsOnChange) {\n          propsOnChange(event)\n        }\n      }\n\n  const getWrapperStyle = (): { minHeight: string } | undefined =>\n    autogrow ? { minHeight: parentHeight } : undefined\n\n  const getTextAreaStyle = (): { height: string } | undefined =>\n    autogrow ? { height: textAreaHeight } : undefined\n\n  const controlledValue = value || internalValue\n\n  return (\n    <div className={styles.wrapper} style={getWrapperStyle()}>\n      <textarea\n        className={classnames(\n          styles.textarea,\n          styles[status],\n          reversed ? styles.reversed : styles.default,\n          disabled && styles.disabled\n        )}\n        rows={rows}\n        onChange={onChange || propsOnChange}\n        value={controlledValue}\n        defaultValue={controlledValue ? undefined : defaultValue}\n        // ^ React throws a warning if you specify both a value and a defaultValue\n        ref={textAreaRef}\n        style={getTextAreaStyle()}\n        disabled={disabled}\n        {...restProps}\n      />\n\n      {/* Textareas aren't able to have pseudo elements like ::after on them,\n          so we have to create an element ourselves for the focus ring */}\n      <div className={styles.focusRing} />\n    </div>\n  )\n}\n\nTextArea.displayName = \"TextArea\"\n"],"names":["TextArea","_a","propsTextAreaRef","_b","status","_c","autogrow","_d","reversed","_e","rows","defaultValue","value","disabled","propsOnChange","restProps","__rest","_f","useState","textAreaHeight","setTextAreaHeight","_g","parentHeight","setParentHeight","_h","undefined","internalValue","setInternalValue","textAreaRef","useRef","useEffect","scrollHeight","current","borderWidth","parseInt","getComputedStyle","borderTopWidth","newHeight","concat","onChange","event","target","getWrapperStyle","minHeight","getTextAreaStyle","height","controlledValue","React","createElement","className","styles","wrapper","style","__assign","classnames","textarea","ref","focusRing","displayName"],"mappings":"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"}

package/dist/esm/TextArea/TextArea.module.scss.mjs

@@ -0,0 +1,12 @@
+var styles = {
+  "wrapper": "TextArea-module_wrapper__ytS6M",
+  "textarea": "TextArea-module_textarea__GeHn4",
+  "focusRing": "TextArea-module_focusRing__kECqH",
+  "default": "TextArea-module_default__Z8jvR",
+  "error": "TextArea-module_error__XOQRm",
+  "caution": "TextArea-module_caution__9BGd0",
+  "disabled": "TextArea-module_disabled__N09tP",
+  "reversed": "TextArea-module_reversed__-SoNq"
+};
+export { styles as default };
+//# sourceMappingURL=TextArea.module.scss.mjs.map

package/dist/esm/TextArea/TextArea.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/TextAreaField/TextAreaField.mjs

@@ -0,0 +1,83 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId } from 'react';
+import classnames from 'classnames';
+import { FieldGroup } from '../FieldGroup/FieldGroup.mjs';
+import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
+import { Label } from '../Label/Label.mjs';
+import { TextArea } from '../TextArea/TextArea.mjs';
+import styles from './TextAreaField.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081895966/Text+Area+Field Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-text-area-field--docs Storybook}
+ */
+const TextAreaField = /*#__PURE__*/function () {
+  const TextAreaField = function (_a) {
+    var labelText = _a.labelText,
+      _b = _a.inline,
+      inline = _b === void 0 ? false : _b,
+      validationMessage = _a.validationMessage,
+      description = _a.description,
+      _c = _a.variant,
+      variant = _c === void 0 ? "default" : _c,
+      propsId = _a.id,
+      _d = _a.reversed,
+      reversed = _d === void 0 ? false : _d,
+      _e = _a.status,
+      status = _e === void 0 ? "default" : _e,
+      disabled = _a.disabled,
+      restProps = __rest(_a, ["labelText", "inline", "validationMessage", "description", "variant", "id", "reversed", "status", "disabled"]);
+    var id = propsId !== null && propsId !== void 0 ? propsId : useId();
+    var validationMessageAria = validationMessage ? "".concat(id, "-field-validation-message") : "";
+    var descriptionAria = description ? "".concat(id, "-field-message") : "";
+    var ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(function (prev, curr) {
+      return curr ? [curr, prev].join(" ") : prev;
+    }, "");
+    var renderDescriptionOnTop = variant === "prominent";
+    var renderDescription = function (position) {
+      if (!description) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.message, disabled && styles.disabled)
+      }, /*#__PURE__*/React.createElement(FieldMessage, {
+        id: descriptionAria,
+        "data-testid": "".concat(id, "-field-description"),
+        message: description,
+        reversed: reversed,
+        position: position
+      }));
+    };
+    return /*#__PURE__*/React.createElement(FieldGroup, {
+      id: "".concat(id, "-field-group"),
+      inline: inline,
+      "data-testid": "".concat(id, "-field-group"),
+      classNameOverride: disabled ? styles.disabled : undefined
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.textareaLabel, variant === "prominent" && styles.textareaLabelProminent)
+    }, /*#__PURE__*/React.createElement(Label, {
+      id: "".concat(id, "-field-label"),
+      "data-testid": "".concat(id, "-field-label"),
+      htmlFor: "".concat(id, "-field-textarea"),
+      labelText: labelText,
+      reversed: reversed,
+      variant: variant,
+      disabled: disabled
+    })), renderDescriptionOnTop && renderDescription("top"), /*#__PURE__*/React.createElement(TextArea, __assign({
+      id: "".concat(id, "-field-textarea"),
+      "data-testid": "".concat(id, "-field-textarea"),
+      reversed: reversed,
+      status: status,
+      disabled: disabled,
+      "aria-describedby": ariaDescribedBy
+    }, restProps)), !disabled && validationMessage && /*#__PURE__*/React.createElement(FieldMessage, {
+      id: validationMessageAria,
+      "data-testid": validationMessageAria,
+      message: validationMessage,
+      status: status,
+      reversed: reversed
+    }), !renderDescriptionOnTop && renderDescription("bottom"));
+  };
+  TextAreaField.displayName = "TextAreaField";
+  return TextAreaField;
+}();
+export { TextAreaField };
+//# sourceMappingURL=TextAreaField.mjs.map

package/dist/esm/TextAreaField/TextAreaField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaField.mjs","sources":["../../../src/TextAreaField/TextAreaField.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport classnames from \"classnames\"\nimport { FieldGroup } from \"~components/FieldGroup\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { Label } from \"~components/Label\"\nimport { TextArea, TextAreaProps } from \"~components/TextArea\"\nimport styles from \"./TextAreaField.module.scss\"\n\nexport type TextAreaFieldProps = {\n  labelText: string | React.ReactNode\n  inline?: boolean\n  validationMessage?: string | React.ReactNode\n  description?: string | React.ReactNode\n  variant?: \"default\" | \"prominent\"\n} & TextAreaProps\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081895966/Text+Area+Field Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-text-area-field--docs Storybook}\n */\nexport const TextAreaField = ({\n  labelText,\n  inline = false,\n  validationMessage,\n  description,\n  variant = \"default\",\n  id: propsId,\n  reversed = false,\n  status = \"default\",\n  disabled,\n  ...restProps\n}: TextAreaFieldProps): JSX.Element => {\n  const id = propsId ?? useId()\n\n  const validationMessageAria = validationMessage\n    ? `${id}-field-validation-message`\n    : \"\"\n  const descriptionAria = description ? `${id}-field-message` : \"\"\n  const ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(\n    (prev, curr) => (curr ? [curr, prev].join(\" \") : prev),\n    \"\"\n  )\n\n  const renderDescriptionOnTop = variant === \"prominent\"\n  const renderDescription = (\n    position: \"top\" | \"bottom\"\n  ): JSX.Element | null => {\n    if (!description) return null\n    return (\n      <div className={classnames(styles.message, disabled && styles.disabled)}>\n        <FieldMessage\n          id={descriptionAria}\n          data-testid={`${id}-field-description`}\n          message={description}\n          reversed={reversed}\n          position={position}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <FieldGroup\n      id={`${id}-field-group`}\n      inline={inline}\n      data-testid={`${id}-field-group`}\n      classNameOverride={disabled ? styles.disabled : undefined}\n    >\n      <div\n        className={classnames(\n          styles.textareaLabel,\n          variant === \"prominent\" && styles.textareaLabelProminent\n        )}\n      >\n        <Label\n          id={`${id}-field-label`}\n          data-testid={`${id}-field-label`}\n          htmlFor={`${id}-field-textarea`}\n          labelText={labelText}\n          reversed={reversed}\n          variant={variant}\n          disabled={disabled}\n        />\n      </div>\n      {renderDescriptionOnTop && renderDescription(\"top\")}\n      <TextArea\n        id={`${id}-field-textarea`}\n        data-testid={`${id}-field-textarea`}\n        reversed={reversed}\n        status={status}\n        disabled={disabled}\n        aria-describedby={ariaDescribedBy}\n        {...restProps}\n      />\n      {!disabled && validationMessage && (\n        <FieldMessage\n          id={validationMessageAria}\n          data-testid={validationMessageAria}\n          message={validationMessage}\n          status={status}\n          reversed={reversed}\n        />\n      )}\n      {!renderDescriptionOnTop && renderDescription(\"bottom\")}\n    </FieldGroup>\n  )\n}\n\nTextAreaField.displayName = \"TextAreaField\"\n"],"names":["TextAreaField","_a","labelText","_b","inline","validationMessage","description","_c","variant","propsId","id","_d","reversed","_e","status","disabled","restProps","__rest","useId","validationMessageAria","concat","descriptionAria","ariaDescribedBy","reduce","prev","curr","join","renderDescriptionOnTop","renderDescription","position","React","createElement","className","classnames","styles","message","FieldMessage","FieldGroup","classNameOverride","undefined","textareaLabel","textareaLabelProminent","Label","htmlFor","TextArea","__assign","displayName"],"mappings":"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"}

package/dist/esm/TextAreaField/TextAreaField.module.scss.mjs

@@ -0,0 +1,8 @@
+var styles = {
+  "message": "TextAreaField-module_message__hlao7",
+  "disabled": "TextAreaField-module_disabled__twCef",
+  "textareaLabel": "TextAreaField-module_textareaLabel__sOTRj",
+  "textareaLabelProminent": "TextAreaField-module_textareaLabelProminent__xqcY4"
+};
+export { styles as default };
+//# sourceMappingURL=TextAreaField.module.scss.mjs.map

package/dist/esm/TextAreaField/TextAreaField.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/TextField/TextField.mjs

@@ -0,0 +1,82 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId } from 'react';
+import classnames from 'classnames';
+import { FieldGroup } from '../FieldGroup/FieldGroup.mjs';
+import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
+import { Input } from '../Input/Input/Input.mjs';
+import '../Input/InputRange/InputRange.mjs';
+import '../Input/InputSearch/InputSearch.mjs';
+import { Label } from '../Label/Label.mjs';
+import styles from './TextField.module.scss.mjs';
+import { SuccessIcon } from '../Icon/SuccessIcon.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-text-field--docs Storybook}
+ */
+const TextField = /*#__PURE__*/function () {
+  const TextField = function (_a) {
+    var propsId = _a.id,
+      labelText = _a.labelText,
+      _b = _a.inline,
+      inline = _b === void 0 ? false : _b,
+      icon = _a.icon,
+      validationMessage = _a.validationMessage,
+      description = _a.description,
+      status = _a.status,
+      _c = _a.reversed,
+      reversed = _c === void 0 ? false : _c,
+      disabled = _a.disabled,
+      restProps = __rest(_a, ["id", "labelText", "inline", "icon", "validationMessage", "description", "status", "reversed", "disabled"]);
+    var id = propsId !== null && propsId !== void 0 ? propsId : useId();
+    var validationMessageAria = validationMessage ? "".concat(id, "-field-validation-message") : "";
+    var descriptionAria = description ? "".concat(id, "-field-description") : "";
+    var ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(function (prev, curr) {
+      return curr ? [curr, prev].join(" ") : prev;
+    }, "");
+    return /*#__PURE__*/React.createElement(FieldGroup, {
+      id: "".concat(id, "-field-group"),
+      "data-testid": "".concat(id, "-field-group"),
+      inline: inline,
+      classNameOverride: classnames(styles.withLabel, disabled && styles.withDisabled)
+    }, /*#__PURE__*/React.createElement(Label, {
+      id: "".concat(id, "-field-label"),
+      "data-testid": "".concat(id, "-field-label"),
+      htmlFor: "".concat(id, "-field-input"),
+      labelText: labelText,
+      reversed: reversed,
+      disabled: disabled
+    }), /*#__PURE__*/React.createElement(Input, __assign({
+      id: "".concat(id, "-field-input"),
+      "data-testid": "".concat(id, "-field-input"),
+      "aria-describedby": ariaDescribedBy,
+      classNameOverride: styles.input,
+      disabled: disabled,
+      reversed: reversed,
+      status: status,
+      startIconAdornment: icon,
+      endIconAdornment: status === "success" && /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.success, disabled && styles.disabled)
+      }, /*#__PURE__*/React.createElement(SuccessIcon, {
+        role: "presentation"
+      }))
+    }, restProps)), validationMessage && /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.message, disabled && styles.disabled)
+    }, /*#__PURE__*/React.createElement(FieldMessage, {
+      id: validationMessageAria,
+      message: validationMessage,
+      status: status,
+      reversed: reversed
+    })), description && /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.message, disabled && styles.disabled)
+    }, /*#__PURE__*/React.createElement(FieldMessage, {
+      id: descriptionAria,
+      message: description,
+      reversed: reversed
+    })));
+  };
+  TextField.displayName = "TextField";
+  return TextField;
+}();
+export { TextField };
+//# sourceMappingURL=TextField.mjs.map

package/dist/esm/TextField/TextField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.mjs","sources":["../../../src/TextField/TextField.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport classnames from \"classnames\"\nimport { FieldGroup } from \"~components/FieldGroup\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { Input, InputProps } from \"~components/Input\"\nimport { Label } from \"~components/Label\"\nimport { SuccessIcon } from \"..\"\nimport styles from \"./TextField.module.scss\"\n\ntype OmittedInputProps =\n  | \"startIconAdornment\"\n  | \"endIconAdornment\"\n  | \"ariaDescribedBy\"\n  | \"ariaLabel\"\n\nexport interface TextFieldProps extends Omit<InputProps, OmittedInputProps> {\n  /**\n   * A short example of input text. For context or additional information use the `description` prop\n   */\n  labelText: React.ReactNode\n  inline?: boolean\n  icon?: JSX.Element\n  /**\n   * A descriptive message for `error` or `caution` states\n   */\n  validationMessage?: string | React.ReactNode\n  /**\n   * A description that provides context for the text field\n   */\n  description?: string | React.ReactNode\n}\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-text-field--docs Storybook}\n */\nexport const TextField = ({\n  id: propsId,\n  labelText,\n  inline = false,\n  icon,\n  validationMessage,\n  description,\n  status,\n  reversed = false,\n  disabled,\n  ...restProps\n}: TextFieldProps): JSX.Element => {\n  const id = propsId ?? useId()\n  const validationMessageAria = validationMessage\n    ? `${id}-field-validation-message`\n    : \"\"\n  const descriptionAria = description ? `${id}-field-description` : \"\"\n\n  const ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(\n    (prev, curr) => (curr ? [curr, prev].join(\" \") : prev),\n    \"\"\n  )\n\n  return (\n    <FieldGroup\n      id={`${id}-field-group`}\n      data-testid={`${id}-field-group`}\n      inline={inline}\n      classNameOverride={classnames(\n        styles.withLabel,\n        disabled && styles.withDisabled\n      )}\n    >\n      <Label\n        id={`${id}-field-label`}\n        data-testid={`${id}-field-label`}\n        htmlFor={`${id}-field-input`}\n        labelText={labelText}\n        reversed={reversed}\n        disabled={disabled}\n      />\n      <Input\n        id={`${id}-field-input`}\n        data-testid={`${id}-field-input`}\n        aria-describedby={ariaDescribedBy}\n        classNameOverride={styles.input}\n        disabled={disabled}\n        reversed={reversed}\n        status={status}\n        startIconAdornment={icon}\n        endIconAdornment={\n          status === \"success\" && (\n            <div\n              className={classnames(\n                styles.success,\n                disabled && styles.disabled\n              )}\n            >\n              <SuccessIcon role=\"presentation\" />\n            </div>\n          )\n        }\n        {...restProps}\n      />\n\n      {validationMessage && (\n        <div\n          className={classnames(styles.message, disabled && styles.disabled)}\n        >\n          <FieldMessage\n            id={validationMessageAria}\n            message={validationMessage}\n            status={status}\n            reversed={reversed}\n          />\n        </div>\n      )}\n\n      {description && (\n        <div\n          className={classnames(styles.message, disabled && styles.disabled)}\n        >\n          <FieldMessage\n            id={descriptionAria}\n            message={description}\n            reversed={reversed}\n          />\n        </div>\n      )}\n    </FieldGroup>\n  )\n}\n\nTextField.displayName = \"TextField\"\n"],"names":["TextField","_a","propsId","id","labelText","_b","inline","icon","validationMessage","description","status","_c","reversed","disabled","restProps","__rest","useId","validationMessageAria","concat","descriptionAria","ariaDescribedBy","reduce","prev","curr","join","React","createElement","FieldGroup","classNameOverride","classnames","styles","withLabel","withDisabled","Label","htmlFor","Input","__assign","input","startIconAdornment","endIconAdornment","className","success","SuccessIcon","role","message","FieldMessage","displayName"],"mappings":"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"}

package/dist/esm/TextField/TextField.module.scss.mjs

@@ -0,0 +1,12 @@
+var styles = {
+  "input": "TextField-module_input__CEokl",
+  "success": "TextField-module_success__pMLcV",
+  "fade-0-to-1": "TextField-module_fade-0-to-1__Ac-99",
+  "withReversed": "TextField-module_withReversed__agi-Q",
+  "disabled": "TextField-module_disabled__gS8tk",
+  "error": "TextField-module_error__7S-f2",
+  "caution": "TextField-module_caution__3gzHk",
+  "message": "TextField-module_message__bQOgK"
+};
+export { styles as default };
+//# sourceMappingURL=TextField.module.scss.mjs.map

package/dist/esm/TextField/TextField.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/VisuallyHidden/VisuallyHidden.mjs

@@ -0,0 +1,18 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './VisuallyHidden.module.scss.mjs';
+const VisuallyHidden = /*#__PURE__*/function () {
+  const VisuallyHidden = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("span", __assign({
+      className: classnames(styles.srOnly, classNameOverride)
+    }, restProps), children);
+  };
+  VisuallyHidden.displayName = "VisuallyHidden";
+  return VisuallyHidden;
+}();
+export { VisuallyHidden };
+//# sourceMappingURL=VisuallyHidden.mjs.map

package/dist/esm/VisuallyHidden/VisuallyHidden.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.mjs","sources":["../../../src/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import React, { ReactNode, HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./VisuallyHidden.module.scss\"\n\nexport type VisuallyHiddenProps = {\n  children: ReactNode\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const VisuallyHidden = ({\n  children,\n  classNameOverride,\n  ...restProps\n}: VisuallyHiddenProps): JSX.Element => (\n  <span className={classnames(styles.srOnly, classNameOverride)} {...restProps}>\n    {children}\n  </span>\n)\n\nVisuallyHidden.displayName = \"VisuallyHidden\"\n"],"names":["VisuallyHidden","_a","children","classNameOverride","restProps","__rest","React","createElement","__assign","className","classnames","styles","srOnly","displayName"],"mappings":";;;;MASaA,cAAc;EAAA,MAAdA,cAAc,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHpB,IAAAC,QAAQ,cAAA;MACRC,iBAAiB,uBAAA;MACdC,SAAS,GAHiBC,MAAA,CAAAJ,EAAA,EAAA,CAAA,UAAA,EAAA,mBAAA,CAI9B,CADa;IAC0B,oBACtCK,KAAM,CAAAC,aAAA,CAAA,MAAA,EAAAC,QAAA,CAAA;MAAAC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,MAAM,EAAET,iBAAiB;IAAC,CAAM,EAAAC,SAAS,GACzEF,QAAQ,CACJ;GACR;EAEDF,cAAc,CAACa,WAAW,GAAG,gBAAgB;EAAA,OAVhCb,cAAc;AAAA;"}

package/dist/esm/VisuallyHidden/VisuallyHidden.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "srOnly": "VisuallyHidden-module_srOnly__tTjOK"
+};
+export { styles as default };
+//# sourceMappingURL=VisuallyHidden.module.scss.mjs.map

package/dist/esm/VisuallyHidden/VisuallyHidden.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/esm/dts/TextArea/TextArea.d.ts

@@ -0,0 +1,12 @@
+import React, { TextareaHTMLAttributes } from "react";
+import { OverrideClassName } from "../types/OverrideClassName";
+export type TextAreaProps = {
+    textAreaRef?: React.RefObject<HTMLTextAreaElement>;
+    status?: "default" | "error" | "caution";
+    autogrow?: boolean;
+    reversed?: boolean;
+} & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>;
+export declare const TextArea: {
+    ({ textAreaRef: propsTextAreaRef, status, autogrow, reversed, rows, defaultValue, value, disabled, onChange: propsOnChange, ...restProps }: TextAreaProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/TextArea/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextArea";

package/dist/esm/dts/TextAreaField/TextAreaField.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { TextAreaProps } from "../TextArea";
+export type TextAreaFieldProps = {
+    labelText: string | React.ReactNode;
+    inline?: boolean;
+    validationMessage?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    variant?: "default" | "prominent";
+} & TextAreaProps;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081895966/Text+Area+Field Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-text-area-field--docs Storybook}
+ */
+export declare const TextAreaField: {
+    ({ labelText, inline, validationMessage, description, variant, id: propsId, reversed, status, disabled, ...restProps }: TextAreaFieldProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/TextAreaField/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextAreaField";

package/dist/esm/dts/TextField/TextField.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { InputProps } from "../Input";
+type OmittedInputProps = "startIconAdornment" | "endIconAdornment" | "ariaDescribedBy" | "ariaLabel";
+export interface TextFieldProps extends Omit<InputProps, OmittedInputProps> {
+    /**
+     * A short example of input text. For context or additional information use the `description` prop
+     */
+    labelText: React.ReactNode;
+    inline?: boolean;
+    icon?: JSX.Element;
+    /**
+     * A descriptive message for `error` or `caution` states
+     */
+    validationMessage?: string | React.ReactNode;
+    /**
+     * A description that provides context for the text field
+     */
+    description?: string | React.ReactNode;
+}
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-text-field--docs Storybook}
+ */
+export declare const TextField: {
+    ({ id: propsId, labelText, inline, icon, validationMessage, description, status, reversed, disabled, ...restProps }: TextFieldProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/esm/dts/TextField/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextField";

package/dist/esm/dts/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, HTMLAttributes } from "react";
+import { OverrideClassName } from "../types/OverrideClassName";
+export type VisuallyHiddenProps = {
+    children: ReactNode;
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+export declare const VisuallyHidden: {
+    ({ children, classNameOverride, ...restProps }: VisuallyHiddenProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/VisuallyHidden/index.d.ts

@@ -0,0 +1 @@
+export * from "./VisuallyHidden";

package/dist/esm/dts/index.d.ts

@@ -34,3 +34,6 @@ export * from "./SearchField";
 export * from "./Slider";
 export * from "./Text";
 export * from "./Workflow";
+export * from "./TextField";
+export * from "./TextArea";
+export * from "./TextAreaField";

package/dist/esm/index.css

@@ -1,15 +1,15 @@
 .Select-module_container__TaMKg{position:relative;width:100%}.Select-module_notFullWidth__Mr-3G{width:180px}
 .Tag-module_tag__tuT2O{align-items:center;border-radius:28px;display:inline-flex;font-family:var(--typography-paragraph-intro-lede-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-small-font-size,.875rem);font-weight:var(--typography-paragraph-small-font-weight,400);gap:var(--spacing-4,.25rem);line-height:var(--typography-paragraph-small-line-height,1.125rem);padding:var(--spacing-4,.25rem) var(--spacing-8,.5rem);white-space:nowrap}.Tag-module_iconContainer__OmQRU{display:inline-flex}.Tag-module_gray__VqJ2M{background-color:var(--color-gray-300,#eaeaec);color:var(--color-purple-800,#2f2438)}.Tag-module_blue__u3vnu{background-color:var(--color-blue-100,#e6f6ff);color:var(--color-blue-700,#003157)}.Tag-module_blue__u3vnu .Tag-module_iconContainer__OmQRU{color:var(--color-blue-500,#0168b3)}.Tag-module_green__7bcu7{background-color:var(--color-green-100,#e8f8f4);color:var(--color-green-700,#22594a)}.Tag-module_green__7bcu7 .Tag-module_iconContainer__OmQRU{color:var(--color-green-500,#44a289)}.Tag-module_yellow__Br-2V{background-color:var(--color-yellow-100,#fff9e4);color:var(--color-yellow-700,#876400)}.Tag-module_yellow__Br-2V .Tag-module_iconContainer__OmQRU{color:var(--color-yellow-500,#ffb600)}.Tag-module_orange__LdmPX{background-color:var(--color-orange-100,#fff0e8);color:var(--color-orange-700,#903c00)}.Tag-module_orange__LdmPX .Tag-module_iconContainer__OmQRU{color:var(--color-orange-500,#e96c2f)}.Tag-module_red__VB5dE{background-color:var(--color-red-100,#fdeaee);color:var(--color-red-700,#6c1e20)}.Tag-module_red__VB5dE .Tag-module_iconContainer__OmQRU{color:var(--color-red-500,#c93b55)}.Tag-module_purple__A3Uy5{background-color:var(--color-purple-100,#f4edf8);color:var(--color-purple-700,#4a234d)}.Tag-module_purple__A3Uy5 .Tag-module_iconContainer__OmQRU{color:var(--color-purple-500,#844587)}
-.Popover-module_popover__B7k5I{background:var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 8px 40px rgba(0,0,0,.08),0 3px 9px rgba(0,0,0,.1));box-sizing:border-box;overflow:auto}
 .Main-module_main__hMyB1{z-index:0}
+.Popover-module_popover__B7k5I{background:var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 8px 40px rgba(0,0,0,.08),0 3px 9px rgba(0,0,0,.1));box-sizing:border-box;overflow:auto}
 .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
 .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
 .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
 .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
 .Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
-.Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
 .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
+.Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
 .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}
 .Avatar-module_wrapper__LY2q2{align-items:center;background:var(--color-gray-300,#eaeaec);border-radius:100%;box-sizing:border-box;display:flex;justify-content:center;overflow:hidden}.Avatar-module_wrapper__LY2q2:not(.Avatar-module_small__PeksS){border:3px solid var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1))}.Avatar-module_wrapper__LY2q2.Avatar-module_personal__2U7--{background:var(--color-orange-100,#fff0e8)}.Avatar-module_wrapper__LY2q2.Avatar-module_otherUser__b-drl{background:var(--color-gray-300,#eaeaec)}.Avatar-module_wrapper__LY2q2.Avatar-module_company__2qtJE{background:var(--color-white,#fff);border:0;border-radius:var(--border-solid-border-radius,7px);padding:6px}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS{height:1.25rem;width:1.25rem}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{margin-bottom:-1px}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS.Avatar-module_company__2qtJE{padding:0}.Avatar-module_wrapper__LY2q2.Avatar-module_medium__Vy3V8{height:3rem;width:3rem}.Avatar-module_wrapper__LY2q2.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q{margin-bottom:-1px}.Avatar-module_wrapper__LY2q2.Avatar-module_large__qiNWs{height:4.5rem;width:4.5rem}.Avatar-module_wrapper__LY2q2.Avatar-module_xlarge__Vx4IG{height:6rem;width:6rem}.Avatar-module_wrapper__LY2q2.Avatar-module_xxlarge__oOoGq{height:7.75rem;width:7.75rem}.Avatar-module_wrapper__LY2q2 .Avatar-module_initials__VDY2Q{speak-as:spell-out;border-bottom:none;text-decoration:none}.Avatar-module_avatarImage__FuULy{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Avatar-module_loading__i9V-D .Avatar-module_avatarImage__FuULy{display:none}.Avatar-module_companyAvatarImage__7rlfG{border-radius:4px;box-sizing:border-box;-o-object-fit:contain;object-fit:contain}.Avatar-module_fallbackIcon__MPWxq{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);width:28px}.Avatar-module_xxlarge__oOoGq .Avatar-module_fallbackIcon__MPWxq{width:75px}.Avatar-module_xlarge__Vx4IG .Avatar-module_fallbackIcon__MPWxq{width:60px}.Avatar-module_large__qiNWs .Avatar-module_fallbackIcon__MPWxq{width:35px}.Avatar-module_medium__Vy3V8 .Avatar-module_fallbackIcon__MPWxq{margin-bottom:-1px;width:25px}.Avatar-module_small__PeksS .Avatar-module_fallbackIcon__MPWxq{margin-bottom:-1px;width:10px}.Avatar-module_initials__VDY2Q{box-sizing:border-box;color:var(--color-purple-800,#2f2438);font-family:var(--typography-heading-1-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:22px;font-weight:var(--typography-heading-1-font-weight,700);letter-spacing:var(--typography-heading-3-letter-spacing,normal);padding-left:5px;padding-right:5px;text-align:center;width:100%}.Avatar-module_initials__VDY2Q:not(.Avatar-module_longName__31Yuf):before{content:"";display:block;margin-top:-.001em}.Avatar-module_xlarge__Vx4IG .Avatar-module_initials__VDY2Q,.Avatar-module_xxlarge__oOoGq .Avatar-module_initials__VDY2Q{font-size:34px;letter-spacing:var(--typography-heading-1-letter-spacing,normal)}.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q{font-size:16px}.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q,.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{font-weight:var(--typography-heading-5-font-weight,600);letter-spacing:var(--typography-heading-5-letter-spacing,normal)}.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{font-size:8px}
 .AvatarGroup-module_AvatarGroup__bdL0o{display:inline-flex;list-style:none;margin:0;padding:0}.AvatarGroup-module_small__7uv8k .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-inline-start:-.625rem}[dir=rtl] .AvatarGroup-module_small__7uv8k .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-left:0}.AvatarGroup-module_medium__af52y .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-inline-start:-1.5rem}[dir=rtl] .AvatarGroup-module_medium__af52y .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-left:0}.AvatarGroup-module_large__HN9Yy .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-inline-start:-2.25rem}[dir=rtl] .AvatarGroup-module_large__HN9Yy .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-left:0}.AvatarGroup-module_AvatarCounter__PKFzl{align-items:center;background:var(--color-gray-300,#eaeaec);border:3px solid var(--color-white,#fff);border-radius:100%;box-shadow:var(--shadow-small-box-shadow,0 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1));box-sizing:border-box;display:flex;justify-content:center;overflow:hidden}.AvatarGroup-module_small__7uv8k .AvatarGroup-module_AvatarCounter__PKFzl{border:none;box-shadow:none;font-size:.5rem;height:1.25rem;width:1.25rem}.AvatarGroup-module_medium__af52y .AvatarGroup-module_AvatarCounter__PKFzl,.AvatarGroup-module_small__7uv8k .AvatarGroup-module_AvatarCounter__PKFzl{font-family:var(--typography-heading-5-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-5-font-weight,600);letter-spacing:var(--typography-heading-5-letter-spacing,normal)}.AvatarGroup-module_medium__af52y .AvatarGroup-module_AvatarCounter__PKFzl{font-size:var(--typography-heading-5-font-size,1rem);height:3rem;width:3rem}.AvatarGroup-module_large__HN9Yy .AvatarGroup-module_AvatarCounter__PKFzl{font-family:var(--typography-heading-3-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-3-font-size,1.375rem);font-weight:var(--typography-heading-3-font-weight,700);height:4.5rem;letter-spacing:var(--typography-heading-3-letter-spacing,normal);width:4.5rem}[dir=rtl] .AvatarGroup-module_AvatarCounter__PKFzl{direction:ltr;margin-left:0}
@@ -42,6 +42,7 @@
 .FilterDatePickerField-module_filterDatePickerField__KvWHu{display:grid;gap:var(--spacing-16,1rem);width:288px}
 .FilterButton-module_filterButton__Q2dMX{gap:var(--spacing-xs,.375rem)}.FilterButton-module_labelContainer__5G-MD{display:inline-flex}.FilterButton-module_hasSelectedValues__dyQkL{font-weight:var(--typography-button-primary-font-weight,700)}.FilterButton-module_labelSeparator__xrkAx{margin-inline-end:var(--spacing-xs,.375rem)}[dir=ltr] [dir=rtl] .FilterButton-module_labelSeparator__xrkAx{margin-right:0}
 .DateRangeDisplayLabel-module_dateRangeDisplayLabel__Gsq1R{display:inline-flex;gap:var(--spacing-6,.375rem)}
+.VisuallyHidden-module_srOnly__tTjOK{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
 .DateRangeValidationMessage-module_fieldMessageList__UluZx{margin:var(--spacing-0,0);padding-inline-start:var(--spacing-24,1.5rem)}
 .DateRangeInputField-module_dateRangeInputContainer__KGDB1{border:none;display:flex;margin:0;padding:0}.DateRangeInputField-module_inputStartDate__3nwlg{border-end-end-radius:0;border-start-end-radius:0}.DateRangeInputField-module_inputStartDate__3nwlg+[class*=focusRing]{border-end-end-radius:0!important;border-start-end-radius:0!important}.DateRangeInputField-module_inputEndDate__ZvUwZ{border-end-start-radius:0;border-start-start-radius:0;inset-inline-start:calc(var(--border-solid-border-width, 2px)*-1);position:relative}.DateRangeInputField-module_inputEndDate__ZvUwZ+[class*=focusRing]{border-end-start-radius:0!important;border-start-start-radius:0!important;inset-inline-end:-1px!important;inset-inline-start:calc(var(--border-solid-border-width, 2px)*2*-1 + -1px)!important}.DateRangeInputField-module_disabled__iPMZ-{opacity:.3}
 .FilterDateRangePickerField-module_filterDateRangePickerField__1gCr0{display:contents}.FilterDateRangePickerField-module_dateRangeInputField__XFvb-{margin-bottom:var(--spacing-24,1.5rem)}
@@ -83,4 +84,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs{all:unset;-webkit-ap
 .Branding-module_branding__Oayqr{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__Oayqr{justify-content:unset}}.Branding-module_logo__rTXU9{flex-basis:7.5rem}
 .Root-module_root__cfRZi{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__cfRZi{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
 .Main-module_main__H-zGJ{z-index:0}
-.Wrapper-module_wrapper__EUUEZ{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
+.Wrapper-module_wrapper__EUUEZ{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
+.TextField-module_input__CEokl{margin-top:var(--spacing-6,.375rem)}.TextField-module_success__pMLcV{animation-duration:var(--animation-duration-slow,.4s);animation-fill-mode:forwards;animation-name:TextField-module_fade-0-to-1__Ac-99;color:var(--color-green-500,#44a289)}.TextField-module_withReversed__agi-Q .TextField-module_success__pMLcV{color:var(--color-green-400,#5dcbad)}.TextField-module_success__pMLcV.TextField-module_disabled__gS8tk{color:rgba(var(--color-green-500-rgb,68,162,137),.3)}.TextField-module_withReversed__agi-Q .TextField-module_success__pMLcV.TextField-module_disabled__gS8tk{color:rgba(var(--color-green-400-rgb,93,203,173),.3)}.TextField-module_error__7S-f2{animation-duration:var(--animation-duration-slow,.4s);animation-fill-mode:forwards;animation-name:TextField-module_fade-0-to-1__Ac-99;color:var(--color-red-100,#fdeaee)}.TextField-module_withReversed__agi-Q .TextField-module_error__7S-f2{color:var(--color-purple-700,#4a234d)}.TextField-module_caution__3gzHk{animation-duration:var(--animation-duration-slow,.4s);animation-fill-mode:forwards;animation-name:TextField-module_fade-0-to-1__Ac-99;color:var(--color-yellow-200,#ffeeb3)}.TextField-module_withReversed__agi-Q .TextField-module_caution__3gzHk{color:var(--color-purple-700,#4a234d)}@keyframes TextField-module_fade-0-to-1__Ac-99{0%{opacity:0}to{opacity:1}}.TextField-module_message__bQOgK.TextField-module_disabled__gS8tk{opacity:.3}
+.TextArea-module_wrapper__ytS6M{position:relative}.TextArea-module_textarea__GeHn4{border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-gray-500,#8c8c97);border-radius:var(--border-solid-border-radius,7px);box-sizing:border-box;color:var(--color-purple-800-rgb,47,36,56);display:block;font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);outline:0;padding:var(--spacing-sm,.75rem);position:static;resize:vertical;width:100%}.TextArea-module_textarea__GeHn4::-webkit-input-placeholder{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);line-height:1.5;position:static}.TextArea-module_textarea__GeHn4:-moz-placeholder,.TextArea-module_textarea__GeHn4::-moz-placeholder{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:2.9rem;line-height:1.5;position:static}.TextArea-module_textarea__GeHn4:-ms-input-placeholder{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:2.9rem;line-height:1.5;position:static}.TextArea-module_textarea__GeHn4:disabled{resize:none}.TextArea-module_textarea__GeHn4:focus+.TextArea-module_focusRing__kECqH{background:transparent;border-color:transparent;border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);inset:-3px;pointer-events:none;position:absolute}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR:hover:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR:hover:not([disabled]){background-color:var(--color-gray-200,#f4f4f5);border-color:var(--color-gray-600,#524e56)}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR:focus+.TextArea-module_focusRing__kECqH{border-color:var(--color-blue-500,#0168b3)}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR:not(.TextArea-module_error__XOQRm,.TextArea-module_caution__9BGd0):disabled{border-color:rgba(var(--color-gray-500-rgb,140,140,151),.3)}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_error__XOQRm,.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_error__XOQRm:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_error__XOQRm:hover:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_error__XOQRm:hover:not([disabled]){border-color:var(--color-red-500,#c93b55)}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_caution__9BGd0,.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_caution__9BGd0:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_caution__9BGd0:hover:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_caution__9BGd0:hover:not([disabled]){border-color:var(--color-yellow-600,#c68600)}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_disabled__N09tP{background-color:var(--color-white,#fff);border-color:rgba(var(--color-gray-500-rgb,140,140,151),.3);color:rgba(var(--color-purple-800-rgb,47,36,56),.3)}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_disabled__N09tP::-webkit-input-placeholder{font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);opacity:.3;position:static}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_disabled__N09tP:-moz-placeholder,.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_disabled__N09tP::-moz-placeholder{font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:2.9rem;opacity:.3;position:static}.TextArea-module_textarea__GeHn4.TextArea-module_default__Z8jvR.TextArea-module_disabled__N09tP:-ms-input-placeholder{font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:2.9rem;opacity:.3;position:static}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq{background:transparent;border-color:rgba(var(--color-white-rgb,255,255,255),.65);color:var(--color-white,#fff)}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq:hover:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq:hover:not([disabled]){background:rgba(var(--color-white-rgb,255,255,255),.1);border-color:var(--color-white,#fff)}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq::-webkit-input-placeholder{color:var(--color-white,#fff);font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);line-height:1.5;position:static}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq:-moz-placeholder,.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq::-moz-placeholder{color:var(--color-white,#fff);font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:2.9rem;line-height:1.5;position:static}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq:-ms-input-placeholder{color:var(--color-white,#fff);font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:2.9rem;line-height:1.5;position:static}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq:focus+.TextArea-module_focusRing__kECqH{border-color:var(--color-blue-300,#73c0e8)}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_error__XOQRm,.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_error__XOQRm:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_error__XOQRm:hover:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_error__XOQRm:hover:not([disabled]){border-color:var(--color-red-300,#f597a8)}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_caution__9BGd0,.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_caution__9BGd0:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_caution__9BGd0:hover:focus:not([disabled]),.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_caution__9BGd0:hover:not([disabled]){border-color:var(--color-yellow-400,#ffca4d)}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_disabled__N09tP{background:transparent;border-color:rgba(var(--color-white-rgb,255,255,255),.3);color:rgba(var(--color-white-rgb,255,255,255),.3)}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_disabled__N09tP::-webkit-input-placeholder{font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);opacity:.3;position:static}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_disabled__N09tP:-moz-placeholder,.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_disabled__N09tP::-moz-placeholder{font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:2.9rem;opacity:.3;position:static}.TextArea-module_textarea__GeHn4.TextArea-module_reversed__-SoNq.TextArea-module_disabled__N09tP:-ms-input-placeholder{font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:2.9rem;opacity:.3;position:static}
+.TextAreaField-module_message__hlao7.TextAreaField-module_disabled__twCef{opacity:.3}.TextAreaField-module_textareaLabel__sOTRj{margin-bottom:var(--spacing-xs,.375rem)}.TextAreaField-module_textareaLabelProminent__xqcY4{margin-bottom:0}