@kaizen/components 1.47.0 → 1.47.1

package/dist/esm/Tag/Tag.mjs

@@ -0,0 +1,131 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Avatar } from '../Avatar/Avatar.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { CautionIcon } from '../Icon/CautionIcon.mjs';
+import { ClearIcon } from '../Icon/ClearIcon.mjs';
+import { ExclamationIcon } from '../Icon/ExclamationIcon.mjs';
+import { InformationIcon } from '../Icon/InformationIcon.mjs';
+import { LiveIcon } from '../Icon/LiveIcon.mjs';
+import { SuccessIcon } from '../Icon/SuccessIcon.mjs';
+import styles from './Tag.module.scss.mjs';
+var isJSXElement = function (imageElementOrAvatarProps) {
+  return "props" in imageElementOrAvatarProps;
+};
+var renderAvatar = function (imageElementOrAvatarProps) {
+  return isJSXElement(imageElementOrAvatarProps) ? ( /*#__PURE__*/React.createElement(React.Fragment, null, imageElementOrAvatarProps)) : ( /*#__PURE__*/React.createElement(Avatar, __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}
+ */
+const Tag = /*#__PURE__*/function () {
+  const 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 /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.root, styles[variant], variant === "profile" && styles.default, styles[size], inline && styles.inline, dismissible && styles.dismissible)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.layoutContainer
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, canShowIcon && function () {
+      switch (props.variant) {
+        case "validationPositive":
+          return /*#__PURE__*/React.createElement("span", {
+            className: styles.validationIcon
+          }, /*#__PURE__*/React.createElement(SuccessIcon, {
+            role: "presentation"
+          }));
+        case "validationNegative":
+          return /*#__PURE__*/React.createElement("span", {
+            className: styles.validationIcon
+          }, /*#__PURE__*/React.createElement(ExclamationIcon, {
+            role: "presentation"
+          }));
+        case "validationCautionary":
+          return /*#__PURE__*/React.createElement("span", {
+            className: styles.validationIcon
+          }, /*#__PURE__*/React.createElement(CautionIcon, {
+            role: "presentation"
+          }));
+        case "validationInformative":
+          return /*#__PURE__*/React.createElement("span", {
+            className: styles.validationIcon
+          }, /*#__PURE__*/React.createElement(InformationIcon, {
+            role: "presentation"
+          }));
+        case "profile":
+          return /*#__PURE__*/React.createElement("span", {
+            className: styles.profile
+          }, props.avatar && renderAvatar(props.avatar));
+        default:
+          return;
+      }
+    }(), /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles.textContent, isTruncated && styles.truncate),
+      style: {
+        maxWidth: isTruncated ? truncateWidth : undefined
+      }
+    }, children), dismissible && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: styles.dismissButton,
+      onClick: onDismiss,
+      onMouseDown: onMouseDown,
+      onMouseLeave: onMouseLeave
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.iconWrapper
+    }, /*#__PURE__*/React.createElement(ClearIcon, {
+      inheritSize: true,
+      role: "img",
+      "aria-label": "Dismiss"
+    }))))), variant === "statusLive" && ( /*#__PURE__*/React.createElement("span", {
+      className: styles.liveIcon
+    }, /*#__PURE__*/React.createElement(LiveIcon, {
+      role: "presentation",
+      classNameOverride: styles.liveIcon_base,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }), /*#__PURE__*/React.createElement(LiveIcon, {
+      role: "presentation",
+      classNameOverride: styles.liveIcon_1,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }), /*#__PURE__*/React.createElement(LiveIcon, {
+      role: "presentation",
+      classNameOverride: styles.liveIcon_2,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }), /*#__PURE__*/React.createElement(LiveIcon, {
+      role: "presentation",
+      classNameOverride: styles.liveIcon_3,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }))))));
+  };
+  Tag.displayName = "Tag";
+  return Tag;
+}();
+export { Tag };

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

@@ -0,0 +1,38 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+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"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Text/Text.mjs

@@ -0,0 +1,24 @@
+import { __rest, __assign } from 'tslib';
+import { createElement } from 'react';
+import classnames from 'classnames';
+import styles from './Text.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Paragraph Guidance}
+ * {@link https://cultureamp.design/?path=/docs/components-typography-text--body Storybook}
+ */
+var 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 = __rest(_a, ["children", "tag", "variant", "color", "classNameOverride"]);
+  var className = classnames(styles.text, styles[variant], styles[color], classNameOverride);
+  return /*#__PURE__*/createElement(tag === undefined ? "p" : tag, __assign(__assign({}, restProps), {
+    className: className
+  }), children);
+};
+Text.displayName = "Text";
+export { Text };

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

@@ -0,0 +1,17 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+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"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/TextArea/TextArea.mjs

@@ -0,0 +1,82 @@
+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 };

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

@@ -0,0 +1,14 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+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"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/TextAreaField/TextAreaField.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 { 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 };

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

@@ -0,0 +1,10 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+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"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

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 '../Icon/subcomponents/SVG/SVG.mjs';
+import { SuccessIcon } from '../Icon/SuccessIcon.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';
+
+/**
+ * {@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 };

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

@@ -0,0 +1,14 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+var css_248z = ".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,#5dcaad)}.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,202,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}";
+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"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Tile/InformationTile/InformationTile.mjs

@@ -0,0 +1,16 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { GenericTile } from '../subcomponents/GenericTile/GenericTile.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}
+ */
+const InformationTile = /*#__PURE__*/function () {
+  const InformationTile = function (props) {
+    return /*#__PURE__*/React.createElement(GenericTile, __assign({}, props));
+  };
+  InformationTile.displayName = "InformationTile";
+  return InformationTile;
+}();
+export { InformationTile };

package/dist/esm/Tile/MultiActionTile/MultiActionTile.mjs

@@ -0,0 +1,35 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { GenericTile } from '../subcomponents/GenericTile/GenericTile.mjs';
+import Action from '../subcomponents/GenericTile/Action.mjs';
+import styles from './MultiActionTile.module.scss.mjs';
+var renderActions = function (primaryAction, secondaryAction) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.actions
+  }, secondaryAction && ( /*#__PURE__*/React.createElement("div", {
+    className: styles.secondaryAction
+  }, /*#__PURE__*/React.createElement(Action, {
+    action: secondaryAction,
+    secondary: true
+  }))), /*#__PURE__*/React.createElement(Action, {
+    action: primaryAction
+  }));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}
+ */
+const MultiActionTile = /*#__PURE__*/function () {
+  const MultiActionTile = function (_a) {
+    var children = _a.children,
+      primaryAction = _a.primaryAction,
+      secondaryAction = _a.secondaryAction,
+      restProps = __rest(_a, ["children", "primaryAction", "secondaryAction"]);
+    return /*#__PURE__*/React.createElement(GenericTile, __assign({
+      footer: renderActions(primaryAction, secondaryAction)
+    }, restProps), children);
+  };
+  MultiActionTile.displayName = "MultiActionTile";
+  return MultiActionTile;
+}();
+export { MultiActionTile };

package/dist/esm/Tile/MultiActionTile/MultiActionTile.module.scss.mjs

@@ -0,0 +1,8 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".MultiActionTile-module_actions__mntsC{display:flex}.MultiActionTile-module_secondaryAction__DuXdD{margin-inline-end:var(--spacing-8,.5rem)}";
+var styles = {
+  "actions": "MultiActionTile-module_actions__mntsC",
+  "secondaryAction": "MultiActionTile-module_secondaryAction__DuXdD"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Tile/TileGrid/TileGrid.mjs

@@ -0,0 +1,23 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './TileGrid.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
+ */
+const TileGrid = /*#__PURE__*/function () {
+  const TileGrid = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.grid, classNameOverride),
+      "data-tile-grid": true
+    }, restProps), children);
+  };
+  TileGrid.displayName = "TileGrid";
+  return TileGrid;
+}();
+export { TileGrid };

package/dist/esm/Tile/TileGrid/TileGrid.module.scss.mjs

@@ -0,0 +1,7 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".TileGrid-module_grid__1WCNc{grid-gap:var(--spacing-md,1.5rem);display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}@media (max-width:767px){.TileGrid-module_grid__1WCNc{grid-template-columns:repeat(2,minmax(226px,370px))}.TileGrid-module_grid__1WCNc>*{width:100%}}@media (max-width:480px){.TileGrid-module_grid__1WCNc{grid-template-columns:repeat(1,100%)}}";
+var styles = {
+  "grid": "TileGrid-module_grid__1WCNc"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };