@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-bundler--local-style-inject-20240522043016

package/dist/cjs/Tag/Tag.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Avatar = require('../Avatar/Avatar.cjs');
+require('../Icon/subcomponents/SVG/SVG.cjs');
+var CautionIcon = require('../Icon/CautionIcon.cjs');
+var ClearIcon = require('../Icon/ClearIcon.cjs');
+var ExclamationIcon = require('../Icon/ExclamationIcon.cjs');
+var InformationIcon = require('../Icon/InformationIcon.cjs');
+var LiveIcon = require('../Icon/LiveIcon.cjs');
+var SuccessIcon = require('../Icon/SuccessIcon.cjs');
+var Tag_module = require('./Tag.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var isJSXElement = function (imageElementOrAvatarProps) {
+  return "props" in imageElementOrAvatarProps;
+};
+var renderAvatar = function (imageElementOrAvatarProps) {
+  return isJSXElement(imageElementOrAvatarProps) ? React__default.default.createElement(React__default.default.Fragment, null, imageElementOrAvatarProps) : React__default.default.createElement(Avatar.Avatar, tslib.__assign({}, imageElementOrAvatarProps, {
+    size: "small"
+  }));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928978/Tags Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tag--docs Storybook}
+ */
+var Tag = function (props) {
+  var children = props.children,
+    _a = props.variant,
+    variant = _a === void 0 ? "default" : _a,
+    _b = props.size,
+    size = _b === void 0 ? "medium" : _b,
+    _c = props.inline,
+    inline = _c === void 0 ? false : _c,
+    _d = props.dismissible,
+    dismissible = _d === void 0 ? false : _d,
+    onDismiss = props.onDismiss,
+    onMouseDown = props.onMouseDown,
+    onMouseLeave = props.onMouseLeave,
+    truncateWidth = props.truncateWidth;
+  var isTruncated = truncateWidth && truncateWidth > 0;
+  var canShowIcon = size === "medium";
+  return React__default.default.createElement("div", {
+    className: classnames__default.default(Tag_module.default.root, Tag_module.default[variant], variant === "profile" && Tag_module.default.default, Tag_module.default[size], inline && Tag_module.default.inline, dismissible && Tag_module.default.dismissible)
+  }, React__default.default.createElement("div", {
+    className: Tag_module.default.layoutContainer
+  }, React__default.default.createElement(React__default.default.Fragment, null, canShowIcon && function () {
+    switch (props.variant) {
+      case "validationPositive":
+        return React__default.default.createElement("span", {
+          className: Tag_module.default.validationIcon
+        }, React__default.default.createElement(SuccessIcon.SuccessIcon, {
+          role: "presentation"
+        }));
+      case "validationNegative":
+        return React__default.default.createElement("span", {
+          className: Tag_module.default.validationIcon
+        }, React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
+          role: "presentation"
+        }));
+      case "validationCautionary":
+        return React__default.default.createElement("span", {
+          className: Tag_module.default.validationIcon
+        }, React__default.default.createElement(CautionIcon.CautionIcon, {
+          role: "presentation"
+        }));
+      case "validationInformative":
+        return React__default.default.createElement("span", {
+          className: Tag_module.default.validationIcon
+        }, React__default.default.createElement(InformationIcon.InformationIcon, {
+          role: "presentation"
+        }));
+      case "profile":
+        return React__default.default.createElement("span", {
+          className: Tag_module.default.profile
+        }, props.avatar && renderAvatar(props.avatar));
+      default:
+        return;
+    }
+  }(), React__default.default.createElement("span", {
+    className: classnames__default.default(Tag_module.default.textContent, isTruncated && Tag_module.default.truncate),
+    style: {
+      maxWidth: isTruncated ? truncateWidth : undefined
+    }
+  }, children), dismissible && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("button", {
+    type: "button",
+    className: Tag_module.default.dismissButton,
+    onClick: onDismiss,
+    onMouseDown: onMouseDown,
+    onMouseLeave: onMouseLeave
+  }, React__default.default.createElement("div", {
+    className: Tag_module.default.iconWrapper
+  }, React__default.default.createElement(ClearIcon.ClearIcon, {
+    inheritSize: true,
+    role: "img",
+    "aria-label": "Dismiss"
+  })))), variant === "statusLive" && React__default.default.createElement("span", {
+    className: Tag_module.default.liveIcon
+  }, React__default.default.createElement(LiveIcon.LiveIcon, {
+    role: "presentation",
+    classNameOverride: Tag_module.default.liveIcon_base,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }), React__default.default.createElement(LiveIcon.LiveIcon, {
+    role: "presentation",
+    classNameOverride: Tag_module.default.liveIcon_1,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }), React__default.default.createElement(LiveIcon.LiveIcon, {
+    role: "presentation",
+    classNameOverride: Tag_module.default.liveIcon_2,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }), React__default.default.createElement(LiveIcon.LiveIcon, {
+    role: "presentation",
+    classNameOverride: Tag_module.default.liveIcon_3,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  })))));
+};
+Tag.displayName = "Tag";
+exports.Tag = Tag;

package/dist/cjs/Tag/Tag.module.scss.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".Tag-module_root__uRhoc{border:var(--border-borderless-border-width,2px) var(--border-borderless-border-style,solid) var(--border-borderless-border-color,transparent);border-radius:calc(var(--spacing-md, 1.5rem)*.75);box-sizing:border-box;color:var(--color-purple-800,#2f2438);display:inline-block;font-size:var(--typography-paragraph-small-font-size,.875rem);font-weight:var(--typography-paragraph-small-font-weight,400);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal);margin-inline-end:calc(var(--spacing-md, 1.5rem)*.5);padding:0 calc(var(--spacing-md, 1.5rem)*.4)}.Tag-module_root__uRhoc.Tag-module_profile__OoGsS{padding-left:calc(var(--spacing-md, 1.5rem)*.2)}.Tag-module_layoutContainer__pBLSz{align-items:center;display:flex;height:100%}.Tag-module_validationIcon__B-YLv{color:var(--color-white,#fff);display:flex}.Tag-module_profile__OoGsS,.Tag-module_validationIcon__B-YLv{align-items:center;margin-inline:calc(var(--spacing-md, 1.5rem)*-.15) var(--spacing-xs,.375rem)}.Tag-module_profile__OoGsS{display:inline-flex}.Tag-module_textContent__q76X-{font-family:var(--typography-paragraph-small-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);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal);line-height:var(--typography-paragraph-small-line-height,1.125rem);margin-top:-1px;white-space:nowrap}.Tag-module_iconWrapper__aPrKH{height:16px;position:relative;width:16px}.Tag-module_dismissButton__rHv7r{align-items:center;appearance:none;background:transparent;border:none;color:inherit;color:rgba(var(--color-purple-800-rgb,47,36,56),.7);cursor:pointer;display:inline;display:flex;font:inherit;height:100%;margin:0;margin-inline:-.225rem -.6625rem;padding:0;padding:0 var(--spacing-xs,.375rem);position:relative}.Tag-module_dismissButton__rHv7r:active,.Tag-module_dismissButton__rHv7r:hover{color:var(--color-purple-800,#2f2438)}.Tag-module_dismissButton__rHv7r svg{position:relative}.Tag-module_dismissButton__rHv7r:focus{outline:none}.Tag-module_dismissButton__rHv7r:focus-visible .Tag-module_iconWrapper__aPrKH{color:var(--color-purple-800,#2f2438)}.Tag-module_dismissButton__rHv7r:focus-visible .Tag-module_iconWrapper__aPrKH:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:50%;border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";inset:calc((var(--border-focus-ring-border-width, 2px))*-1);position:absolute}.Tag-module_background__LkzGB{background-color:#fff;display:inline-block;height:calc(var(--spacing-xs, .375rem) + .125rem);left:10px;position:absolute;top:10px;width:calc(var(--spacing-xs, .375rem) + .125rem)}.Tag-module_truncate__5w7HW{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.Tag-module_inline__pPM-d{margin:0}.Tag-module_medium__NkOrv{height:calc(var(--spacing-md, 1.5rem)*1.25)}.Tag-module_small__-xyNk{height:var(--spacing-md,1.5rem)}.Tag-module_default__6PVke{background-color:var(--color-gray-300,#eaeaec)}.Tag-module_sentimentPositive__nbqE1{background-color:var(--color-green-100,#e8f8f4)}.Tag-module_sentimentNeutral__8BtD8{background-color:var(--color-gray-300,#eaeaec)}.Tag-module_sentimentNegative__1J85t{background-color:var(--color-red-100,#fdeaee)}.Tag-module_sentimentNone__8BWjU{background-color:var(--color-white,#fff);border-color:var(--color-gray-300,#eaeaec)}.Tag-module_validationPositive__vgFUE{background-color:var(--color-green-100,#e8f8f4)}.Tag-module_validationPositive__vgFUE .Tag-module_validationIcon__B-YLv{color:var(--color-green-500,#44a289)}.Tag-module_validationInformative__bnJ4A{background-color:var(--color-blue-100,#e6f6ff)}.Tag-module_validationInformative__bnJ4A .Tag-module_validationIcon__B-YLv{color:var(--color-blue-500,#0168b3)}.Tag-module_validationNegative__lZgIY{background-color:var(--color-red-100,#fdeaee)}.Tag-module_validationNegative__lZgIY .Tag-module_validationIcon__B-YLv{color:var(--color-red-500,#c93b55)}.Tag-module_validationCautionary__ERS2t{background-color:var(--color-yellow-100,#fff9e4)}.Tag-module_validationCautionary__ERS2t .Tag-module_validationIcon__B-YLv{color:var(--color-yellow-500,#ffb600)}.Tag-module_statusLive__xG48w{background-color:var(--color-green-100,#e8f8f4);color:var(--color-purple-800,#2f2438)}.Tag-module_statusAction__woL-O{background-color:var(--color-orange-100,#fff0e8);color:var(--color-purple-800,#2f2438)}.Tag-module_statusClosed__VhZP-{background-color:var(--color-red-100,#fdeaee)}.Tag-module_statusDraft__9QZDv{background-color:var(--color-blue-100,#e6f6ff);color:var(--color-purple-800,#2f2438)}.Tag-module_liveIcon__URtak{color:var(--color-green-500,#44a289);display:inline-block;height:20px;margin-inline-start:.25rem;position:relative;width:20px}.Tag-module_liveIcon_base__Nk5um{display:block;opacity:30%}.Tag-module_liveIcon_1__STFJY,.Tag-module_liveIcon_2__rko-D,.Tag-module_liveIcon_3__fL71y{aspect-ratio:1;display:block;height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.Tag-module_liveIcon_1__STFJY{clip-path:circle(16%)}.Tag-module_liveIcon_2__rko-D,.Tag-module_liveIcon_3__fL71y{animation-delay:1s;animation-duration:3s;animation-iteration-count:3}.Tag-module_liveIcon_2__rko-D{animation-name:Tag-module_pulse-inner__0-JFL;clip-path:circle(32%)}.Tag-module_liveIcon_3__fL71y{animation-name:Tag-module_pulse-outer__f9Oox;clip-path:circle(50%)}@keyframes Tag-module_pulse-inner__0-JFL{0%{opacity:0}25%{opacity:0}50%{opacity:100%}75%{opacity:100%}to{opacity:100%}}@keyframes Tag-module_pulse-outer__f9Oox{0%{opacity:0}25%{opacity:0}50%{opacity:0}75%{opacity:100%}to{opacity:100%}}";
+var styles = {
+  "root": "Tag-module_root__uRhoc",
+  "profile": "Tag-module_profile__OoGsS",
+  "layoutContainer": "Tag-module_layoutContainer__pBLSz",
+  "validationIcon": "Tag-module_validationIcon__B-YLv",
+  "textContent": "Tag-module_textContent__q76X-",
+  "iconWrapper": "Tag-module_iconWrapper__aPrKH",
+  "dismissButton": "Tag-module_dismissButton__rHv7r",
+  "background": "Tag-module_background__LkzGB",
+  "truncate": "Tag-module_truncate__5w7HW",
+  "inline": "Tag-module_inline__pPM-d",
+  "medium": "Tag-module_medium__NkOrv",
+  "small": "Tag-module_small__-xyNk",
+  "default": "Tag-module_default__6PVke",
+  "sentimentPositive": "Tag-module_sentimentPositive__nbqE1",
+  "sentimentNeutral": "Tag-module_sentimentNeutral__8BtD8",
+  "sentimentNegative": "Tag-module_sentimentNegative__1J85t",
+  "sentimentNone": "Tag-module_sentimentNone__8BWjU",
+  "validationPositive": "Tag-module_validationPositive__vgFUE",
+  "validationInformative": "Tag-module_validationInformative__bnJ4A",
+  "validationNegative": "Tag-module_validationNegative__lZgIY",
+  "validationCautionary": "Tag-module_validationCautionary__ERS2t",
+  "statusLive": "Tag-module_statusLive__xG48w",
+  "statusAction": "Tag-module_statusAction__woL-O",
+  "statusClosed": "Tag-module_statusClosed__VhZP-",
+  "statusDraft": "Tag-module_statusDraft__9QZDv",
+  "liveIcon": "Tag-module_liveIcon__URtak",
+  "liveIcon_base": "Tag-module_liveIcon_base__Nk5um",
+  "liveIcon_1": "Tag-module_liveIcon_1__STFJY",
+  "liveIcon_2": "Tag-module_liveIcon_2__rko-D",
+  "liveIcon_3": "Tag-module_liveIcon_3__fL71y",
+  "pulse-inner": "Tag-module_pulse-inner__0-JFL",
+  "pulse-outer": "Tag-module_pulse-outer__f9Oox"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/Text/Text.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Text_module = require('./Text.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Paragraph Guidance}
+ * {@link https://cultureamp.design/?path=/docs/components-typography-text--body Storybook}
+ */
+const Text = /*#__PURE__*/function () {
+  const Text = function (_a) {
+    var children = _a.children,
+      tag = _a.tag,
+      variant = _a.variant,
+      _b = _a.color,
+      color = _b === void 0 ? "dark" : _b,
+      classNameOverride = _a.classNameOverride,
+      restProps = tslib.__rest(_a, ["children", "tag", "variant", "color", "classNameOverride"]);
+    var className = classnames__default.default(Text_module.default.text, Text_module.default[variant], Text_module.default[color], classNameOverride);
+    return React.createElement(tag === undefined ? "p" : tag, tslib.__assign(tslib.__assign({}, restProps), {
+      className: className
+    }), children);
+  };
+  Text.displayName = "Text";
+  return Text;
+}();
+exports.Text = Text;

package/dist/cjs/Text/Text.module.scss.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".Text-module_text__Byo7R{margin:0}.Text-module_text__Byo7R strong{font-weight:var(--typography-paragraph-bold-font-weight,600)}.Text-module_intro-lede__ENE72{font-family:var(--typography-paragraph-intro-lede-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-intro-lede-font-size,1.25rem);font-weight:var(--typography-paragraph-intro-lede-font-weight,400);letter-spacing:var(--typography-paragraph-intro-lede-letter-spacing,0);line-height:var(--typography-paragraph-intro-lede-line-height,1.875rem)}.Text-module_body__cO-XH{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)}.Text-module_small__uZNGn{font-family:var(--typography-paragraph-small-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);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal);line-height:var(--typography-paragraph-small-line-height,1.125rem)}.Text-module_extra-small__3g9eN{font-family:var(--typography-paragraph-extra-small-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-extra-small-font-size,.75rem);font-weight:var(--typography-paragraph-extra-small-font-weight,400);letter-spacing:var(--typography-paragraph-extra-small-letter-spacing,normal);line-height:var(--typography-paragraph-extra-small-line-height,1.125rem)}.Text-module_dark__-jDSk{color:var(--color-purple-800,#2f2438);opacity:100%}.Text-module_dark-reduced-opacity__18nLo{color:var(--color-purple-800,#2f2438);opacity:70%}.Text-module_white__-yVD0{color:var(--color-white,#fff);opacity:100%}.Text-module_white-reduced-opacity__i0veZ{color:var(--color-white,#fff);opacity:80%}.Text-module_positive__e-IKh{color:var(--color-green-600,#2c7d67)}.Text-module_negative__agbge{color:var(--color-red-600,#a82433)}";
+var styles = {
+  "text": "Text-module_text__Byo7R",
+  "intro-lede": "Text-module_intro-lede__ENE72",
+  "body": "Text-module_body__cO-XH",
+  "small": "Text-module_small__uZNGn",
+  "extra-small": "Text-module_extra-small__3g9eN",
+  "dark": "Text-module_dark__-jDSk",
+  "dark-reduced-opacity": "Text-module_dark-reduced-opacity__18nLo",
+  "white": "Text-module_white__-yVD0",
+  "white-reduced-opacity": "Text-module_white-reduced-opacity__i0veZ",
+  "positive": "Text-module_positive__e-IKh",
+  "negative": "Text-module_negative__agbge"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/TextArea/TextArea.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var TextArea_module = require('./TextArea.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var 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 = tslib.__rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
+  var _f = React.useState("auto"),
+    textAreaHeight = _f[0],
+    setTextAreaHeight = _f[1];
+  var _g = React.useState("auto"),
+    parentHeight = _g[0],
+    setParentHeight = _g[1];
+  var _h = React.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 || React.useRef(null);
+  React.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 React__default.default.createElement("div", {
+    className: TextArea_module.default.wrapper,
+    style: getWrapperStyle()
+  }, React__default.default.createElement("textarea", tslib.__assign({
+    className: classnames__default.default(TextArea_module.default.textarea, TextArea_module.default[status], reversed ? TextArea_module.default.reversed : TextArea_module.default.default, disabled && TextArea_module.default.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)), React__default.default.createElement("div", {
+    className: TextArea_module.default.focusRing
+  }));
+};
+TextArea.displayName = "TextArea";
+exports.TextArea = TextArea;

package/dist/cjs/TextArea/TextArea.module.scss.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".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,#878792);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,135,135,146),.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,135,135,146),.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}";
+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"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/TextAreaField/TextAreaField.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var FieldGroup = require('../FieldGroup/FieldGroup.cjs');
+var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
+var Label = require('../Label/Label.cjs');
+var TextArea = require('../TextArea/TextArea.cjs');
+var TextAreaField_module = require('./TextAreaField.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@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}
+ */
+var 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 = tslib.__rest(_a, ["labelText", "inline", "validationMessage", "description", "variant", "id", "reversed", "status", "disabled"]);
+  var id = propsId !== null && propsId !== void 0 ? propsId : React.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 React__default.default.createElement("div", {
+      className: classnames__default.default(TextAreaField_module.default.message, disabled && TextAreaField_module.default.disabled)
+    }, React__default.default.createElement(FieldMessage.FieldMessage, {
+      id: descriptionAria,
+      "data-testid": "".concat(id, "-field-description"),
+      message: description,
+      reversed: reversed,
+      position: position
+    }));
+  };
+  return React__default.default.createElement(FieldGroup.FieldGroup, {
+    id: "".concat(id, "-field-group"),
+    inline: inline,
+    "data-testid": "".concat(id, "-field-group"),
+    classNameOverride: disabled ? TextAreaField_module.default.disabled : undefined
+  }, React__default.default.createElement("div", {
+    className: classnames__default.default(TextAreaField_module.default.textareaLabel, variant === "prominent" && TextAreaField_module.default.textareaLabelProminent)
+  }, React__default.default.createElement(Label.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"), React__default.default.createElement(TextArea.TextArea, tslib.__assign({
+    id: "".concat(id, "-field-textarea"),
+    "data-testid": "".concat(id, "-field-textarea"),
+    reversed: reversed,
+    status: status,
+    disabled: disabled,
+    "aria-describedby": ariaDescribedBy
+  }, restProps)), !disabled && validationMessage && React__default.default.createElement(FieldMessage.FieldMessage, {
+    id: validationMessageAria,
+    "data-testid": validationMessageAria,
+    message: validationMessage,
+    status: status,
+    reversed: reversed
+  }), !renderDescriptionOnTop && renderDescription("bottom"));
+};
+TextAreaField.displayName = "TextAreaField";
+exports.TextAreaField = TextAreaField;

package/dist/cjs/TextAreaField/TextAreaField.module.scss.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".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}";
+var styles = {
+  "message": "TextAreaField-module_message__hlao7",
+  "disabled": "TextAreaField-module_disabled__twCef",
+  "textareaLabel": "TextAreaField-module_textareaLabel__sOTRj",
+  "textareaLabelProminent": "TextAreaField-module_textareaLabelProminent__xqcY4"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;