@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-avUr.1

package/dist/esm/components/form/text-input/MrlTextInput/MrlTextInput.module.css

@@ -0,0 +1,321 @@
+@charset "UTF-8";
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--qqf5x {
+  position: relative;
+}
+
+.MrlForm-counter--Mfle0 {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-xxsmall);
+  font-weight: var(--mrl-type-weight-text);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-xxsmall);
+  color: rgba(var(--mrl-gray-80), 1);
+  display: block;
+  margin-top: var(--mrl-spacing-02);
+  text-align: right;
+  width: 100%;
+}
+
+:root,
+:host {
+  --mrl-text-input-background: var(--mrl-color-background);
+  --mrl-text-input-background-color-hover: var(--mrl-color-background);
+  --mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);
+  --mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-text-input-border-width: var(--mrl-line-width-border);
+  --mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
+  --mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
+  --mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);
+  --mrl-text-input-border-color-focus: var(--mrl-color-line-active);
+  --mrl-text-input-border-radius: var(--mrl-border-radius-functional);
+  --mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
+  --mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
+  --mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
+  --mrl-text-input-color-read-only: var(--mrl-gray-90);
+  --mrl-text-input-height: var(--mrl-spacing-09);
+  --mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
+  --mrl-text-input-inset-vertical: var(--mrl-space-inset);
+  --mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
+  --mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
+  	var(--mrl-text-input-inset-horizontal);
+  --mrl-input-icon-offset: var(--mrl-spacing-03);
+  --mrl-checkbox-height: var(--mrl-spacing-09);
+  --mrl-checkbox-input-affordance: var(--mrl-spacing-08);
+  --mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-checkbox-input-size: var(--mrl-spacing-06);
+  --mrl-checkbox-input-background: var(--mrl-color-background);
+  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-checkbox-input-color: var(--mrl-color-text-inverse);
+  --mrl-checkbox-input-border-width: var(--mrl-line-width-control);
+  --mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
+  --mrl-radio-button-height: var(--mrl-spacing-06);
+  --mrl-radio-button-width: var(--mrl-spacing-06);
+  --mrl-radio-button-fill-size: var(--mrl-spacing-04);
+  --mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-radio-button-border-width: var(--mrl-line-width-border);
+  --mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
+  --mrl-radio-button-background: var(--mrl-color-background);
+  --mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
+  --mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
+  --mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
+}
+
+.mrl-checkbox-input---aSLQ:checked ~ .mrl-checkbox-inputDisplay--jgWwh,
+.MrlCheckboxStandalone-input--omght:checked ~ .MrlCheckboxStandalone-inputDisplay--PEdqt,
+.mrl-checkbox-input---aSLQ:indeterminate ~ .mrl-checkbox-inputDisplay--jgWwh,
+.MrlCheckboxStandalone-input--omght:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--PEdqt {
+  --mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
+  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
+}
+
+:host {
+  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-select-item-spacing-stack: var(--mrl-spacing-02);
+  --mrl-select-item-text-affordance: calc(
+  	var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
+  );
+}
+
+.MrlTextInput--ss2Be {
+  --mrl-text-input-icon-size: var(--mrl-spacing-06);
+  --mrl-text-input-icon-offset: var(--mrl-input-icon-offset);
+} /* stylelint-disable scss/operator-no-newline-after */
+.MrlTextInput--ss2Be {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-small);
+  font-weight: var(--mrl-type-weight-text);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-small);
+  background: var(--mrl-text-input-background);
+  border-color: var(--mrl-text-input-border-color);
+  border-radius: var(--mrl-text-input-border-radius);
+  border-style: solid;
+  border-width: var(--mrl-text-input-border-width);
+  color: var(--mrl-text-input-color);
+  margin: 0;
+  min-height: var(--mrl-text-input-height);
+  padding: var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);
+  transition: background-color var(--mrl-duration-03) var(--mrl-timing-m2), border-color var(--mrl-duration-03) var(--mrl-timing-m2), color var(--mrl-duration-03) var(--mrl-timing-m2), padding-left var(--mrl-duration-03) var(--mrl-timing-m2);
+  width: 100%;
+  /*
+  	* Since we have built a custom clearable functionality,
+  	* we should hide the default search clear from certain browsers
+   */
+  /* clears the ‘X’ from Chrome */
+}
+.MrlTextInput--ss2Be::placeholder {
+  color: var(--mrl-text-input-placeholder-color);
+}
+.MrlTextInput--ss2Be:hover {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);
+  --mrl-text-input-background: var(--mrl-text-input-background-color-hover);
+}
+.MrlTextInput--ss2Be:focus {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);
+  color: var(--mrl-text-input-color-focus);
+}
+.MrlTextInput--ss2Be:focus-visible {
+  outline: none;
+}
+.MrlTextInput--ss2Be:disabled {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);
+  color: var(--mrl-text-input-color-disabled);
+  pointer-events: none;
+}
+.MrlTextInput--ss2Be:disabled::placeholder {
+  color: var(--mrl-text-input-color-disabled);
+}
+.MrlTextInput--ss2Be[aria-invalid=true] {
+  border-color: var(--mrl-color-background-error);
+}
+.MrlTextInput--ss2Be:not(:disabled):read-only {
+  --mrl-text-input-background: var(--mrl-text-input-background-color-read-only);
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-read-only);
+  color: var(--mrl-text-input-color-read-only);
+}
+.MrlTextInput--ss2Be:focus-visible {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-name: outline-animation--2NAJa;
+  animation-timing-function: var(--mrl-timing-m3);
+}
+@keyframes outline-animation--2NAJa {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}
+.MrlTextInput--wrapper--Mf7kt {
+  position: relative;
+}
+.MrlTextInput--ss2Be::-ms-clear, .MrlTextInput--ss2Be::-ms-reveal {
+  display: none;
+  height: 0;
+  width: 0;
+}
+.MrlTextInput--ss2Be::-webkit-search-decoration, .MrlTextInput--ss2Be::-webkit-search-cancel-button, .MrlTextInput--ss2Be::-webkit-search-results-button, .MrlTextInput--ss2Be::-webkit-search-results-decoration {
+  display: none;
+}
+
+.MrlTextInput--dynamicIcon--Sd98A {
+  padding-right: calc(var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) + var(--mrl-text-input-icon-offset));
+}
+
+.MrlTextInput--persistIcon--OdeMT {
+  padding-left: calc(var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) + var(--mrl-text-input-icon-offset));
+}
+
+.MrlTextInput--active--Bk8yR {
+  border-color: var(--mrl-text-input-border-color-hover);
+}
+
+.MrlTextInput-dynamicIcon--Ad9sL,
+.MrlTextInput-persistIcon--qHZeO {
+  color: var(--mrl-text-input-border-color);
+  position: absolute;
+  top: calc(var(--mrl-text-input-inset-vertical) + var(--mrl-line-width-border));
+  transition: color var(--mrl-duration-03) var(--mrl-timing-m2);
+  z-index: 2;
+}
+.MrlTextInput-dynamicIcon--disabled--CEOVe,
+.MrlTextInput-persistIcon--disabled--iFvw7 {
+  color: var(--mrl-text-input-border-color-disabled);
+}
+
+.MrlTextInput-dynamicIcon--Ad9sL {
+  right: var(--mrl-text-input-inset-horizontal);
+}
+
+.MrlTextInput-persistIcon--qHZeO {
+  left: var(--mrl-text-input-inset-horizontal);
+}
+
+.MrlTextInput-persistIcon--active--iWlhp,
+.MrlTextInput-dynamicIcon--active--nW8zl {
+  color: var(--mrl-text-input-border-color-hover);
+}
+
+.MrlTextInput-dynamicIcon--Ad9sL > button {
+  position: relative;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  height: 20px;
+  outline: none;
+  padding: 0;
+}
+.MrlTextInput-dynamicIcon--Ad9sL > button:focus-visible {
+  outline: none;
+}
+.MrlTextInput-dynamicIcon--Ad9sL > button:focus-visible::after {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  border-radius: calc(
+		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
+	);
+  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  content: "";
+  display: block;
+  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  position: absolute;
+  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  z-index: 1;
+  animation-name: border-animation--2xIZk;
+}
+@keyframes border-animation--2xIZk {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes border-animation-inverse--6bQMc {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes outline-animation--2NAJa {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}

package/dist/esm/components/form/text-input/MrlTextInput/MrlTextInput.module.scss.js

@@ -0,0 +1,23 @@
+import "./MrlTextInput.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--qqf5x",
+	"MrlForm-counter": "MrlForm-counter--Mfle0",
+	"mrl-checkbox-input": "mrl-checkbox-input---aSLQ",
+	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--jgWwh",
+	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--omght",
+	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--PEdqt",
+	"MrlTextInput": "MrlTextInput--ss2Be",
+	"outline-animation": "outline-animation--2NAJa",
+	"MrlTextInput--wrapper": "MrlTextInput--wrapper--Mf7kt",
+	"MrlTextInput--dynamicIcon": "MrlTextInput--dynamicIcon--Sd98A",
+	"MrlTextInput--persistIcon": "MrlTextInput--persistIcon--OdeMT",
+	"MrlTextInput--active": "MrlTextInput--active--Bk8yR",
+	"MrlTextInput-dynamicIcon": "MrlTextInput-dynamicIcon--Ad9sL",
+	"MrlTextInput-persistIcon": "MrlTextInput-persistIcon--qHZeO",
+	"MrlTextInput-dynamicIcon--disabled": "MrlTextInput-dynamicIcon--disabled--CEOVe",
+	"MrlTextInput-persistIcon--disabled": "MrlTextInput-persistIcon--disabled--iFvw7",
+	"MrlTextInput-persistIcon--active": "MrlTextInput-persistIcon--active--iWlhp",
+	"MrlTextInput-dynamicIcon--active": "MrlTextInput-dynamicIcon--active--nW8zl",
+	"border-animation": "border-animation--2xIZk",
+	"border-animation-inverse": "border-animation-inverse--6bQMc"
+};

package/dist/esm/components/form/text-input/MrlTextInput/MrlTextInputRightIcon.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { MrlSvg } from '../../../';
+import classnames from 'classnames';
+import styles from './MrlTextInput.module.scss.js';
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlTextInputRightIconProps} props - the component props
+ * @returns a button element with an icon
+ */
+export function MrlTextInputRightIcon({ action, dataQa, hasActiveColor, icon, label, setHasActiveColor, value }) {
+    const handleKeyUp = React.useCallback((e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            action(e);
+        }
+    }, [action]);
+    return (React.createElement("span", { className: classnames(styles['MrlTextInput-dynamicIcon'], {
+            [styles['MrlTextInput-dynamicIcon--active']]: hasActiveColor || value !== ''
+        }) },
+        React.createElement("button", { type: "button", "aria-label": label, onMouseUp: action, onKeyUp: handleKeyUp, "data-qa": dataQa, onMouseEnter: () => setHasActiveColor(true), onMouseLeave: () => setHasActiveColor(false), onFocus: () => setHasActiveColor(true), onBlur: () => setHasActiveColor(false) },
+            React.createElement(MrlSvg, { "aria-hidden": "true", svg: icon, size: "small" }))));
+}

package/dist/esm/components/form/text-input/MrlTextInput/index.js

@@ -0,0 +1 @@
+export { MrlTextInput } from './MrlTextInput';

package/dist/esm/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.global.css

@@ -0,0 +1,96 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper {
+  position: relative;
+}
+
+.MrlForm-counter {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-xxsmall);
+  font-weight: var(--mrl-type-weight-text);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-xxsmall);
+  color: rgba(var(--mrl-gray-80), 1);
+  display: block;
+  margin-top: var(--mrl-spacing-02);
+  text-align: right;
+  width: 100%;
+}
+
+:root,
+:host {
+  --mrl-text-input-background: var(--mrl-color-background);
+  --mrl-text-input-background-color-hover: var(--mrl-color-background);
+  --mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);
+  --mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-text-input-border-width: var(--mrl-line-width-border);
+  --mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
+  --mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
+  --mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);
+  --mrl-text-input-border-color-focus: var(--mrl-color-line-active);
+  --mrl-text-input-border-radius: var(--mrl-border-radius-functional);
+  --mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
+  --mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
+  --mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
+  --mrl-text-input-color-read-only: var(--mrl-gray-90);
+  --mrl-text-input-height: var(--mrl-spacing-09);
+  --mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
+  --mrl-text-input-inset-vertical: var(--mrl-space-inset);
+  --mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
+  --mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
+  	var(--mrl-text-input-inset-horizontal);
+  --mrl-input-icon-offset: var(--mrl-spacing-03);
+  --mrl-checkbox-height: var(--mrl-spacing-09);
+  --mrl-checkbox-input-affordance: var(--mrl-spacing-08);
+  --mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-checkbox-input-size: var(--mrl-spacing-06);
+  --mrl-checkbox-input-background: var(--mrl-color-background);
+  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-checkbox-input-color: var(--mrl-color-text-inverse);
+  --mrl-checkbox-input-border-width: var(--mrl-line-width-control);
+  --mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
+  --mrl-radio-button-height: var(--mrl-spacing-06);
+  --mrl-radio-button-width: var(--mrl-spacing-06);
+  --mrl-radio-button-fill-size: var(--mrl-spacing-04);
+  --mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);
+  --mrl-radio-button-border-width: var(--mrl-line-width-border);
+  --mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
+  --mrl-radio-button-background: var(--mrl-color-background);
+  --mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
+  --mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
+  --mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
+}
+
+.mrl-checkbox-input:checked ~ .mrl-checkbox-inputDisplay,
+.MrlCheckboxStandalone-input:checked ~ .MrlCheckboxStandalone-inputDisplay,
+.mrl-checkbox-input:indeterminate ~ .mrl-checkbox-inputDisplay,
+.MrlCheckboxStandalone-input:indeterminate ~ .MrlCheckboxStandalone-inputDisplay {
+  --mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
+  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
+}
+
+:host {
+  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-select-item-spacing-stack: var(--mrl-spacing-02);
+  --mrl-select-item-text-affordance: calc(
+  	var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
+  );
+}
+
+.MrlEditableTextarea:not(:disabled):read-only {
+  --mrl-text-input-background: none;
+  color: var(--mrl-text-input-color-read-only);
+}
+
+.MrlLabel:has(+ .MrlEditableTextarea--wrapper) {
+  margin-bottom: 0;
+  padding-bottom: var(--mrl-label-offset-vertical);
+}
+
+.MrlEditableTextarea--wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.MrlEditableTextarea--wrapper:hover .MrlEditableTextarea:not(:focus, :disabled, :read-only) {
+  background-color: var(--mrl-black-opacity-00);
+}

package/dist/esm/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.js

@@ -0,0 +1,140 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import { edit, error as errorIcon } from '@muraldevkit/ds-icons';
+import styles from './MrlEditableTextarea.module.scss.js';
+import './MrlEditableTextarea.global.css';
+import { useIsEditable } from '../../hooks/useIsEditable';
+import { useActiveColor } from '../../hooks/useActiveColor';
+import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg';
+import { MrlEditableTextareaRightButton } from './MrlEditableTextareaRightButton';
+/**
+ * Allows the user to input plain text in a multi-line format
+ * @param {MrlEditableTextareaProps} props - the component props
+ * @returns a textarea element
+ */
+export const MrlEditableTextarea = React.forwardRef(function MrlEditableTextarea(props, ref) {
+    const { autoExpand = false, className, inputId, inputLabelText, maxLength, placeholder, state, value, error, isEditable: controlledIsEditable, setIsEditable: controlledIsEditableUpdate } = props, attrs = __rest(props, ["autoExpand", "className", "inputId", "inputLabelText", "maxLength", "placeholder", "state", "value", "error", "isEditable", "setIsEditable"]);
+    // html id to be reference by input and error description to relay the error for a specific input
+    const describedById = `${inputId}-description`;
+    const textareaRef = React.useRef(null);
+    const iconRef = React.useRef(null);
+    const { hasActiveColor, setHasActiveColor } = useActiveColor(state);
+    const { isEditable, isEditing, setIsEditable, setIsEditing } = useIsEditable({
+        changeHandler: controlledIsEditableUpdate,
+        initialValue: false,
+        state,
+        value: controlledIsEditable
+    });
+    // Allows us to track if the user has edited the input previously.
+    // This helps conditionally focus the icon only when the user is done editing the input.
+    const [hasEdited, setHasEdited] = React.useState(false);
+    React.useImperativeHandle(ref, () => iconRef.current);
+    React.useEffect(() => {
+        if (iconRef.current && (attrs.autoFocus || hasEdited)) {
+            iconRef.current.focus();
+        }
+    }, [attrs, iconRef, hasEdited]);
+    React.useEffect(() => {
+        if (textareaRef.current) {
+            if (isEditable) {
+                textareaRef.current.focus();
+            }
+            else {
+                textareaRef.current.style.height = 'auto';
+                if (!textareaRef.current.value || textareaRef.current.value === '') {
+                    textareaRef.current.style.height = '40px';
+                }
+                else {
+                    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+                }
+            }
+        }
+    }, [isEditable, isEditing]);
+    React.useEffect(() => {
+        if (!autoExpand || !textareaRef.current)
+            return;
+        textareaRef.current.style.height = 'auto';
+        if (!textareaRef.current.value || textareaRef.current.value === '') {
+            textareaRef.current.style.height = '40px';
+        }
+        else {
+            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+        }
+    }, [autoExpand, value]);
+    const onKeyDown = (event) => {
+        const { key } = event;
+        if (key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            setIsEditable(false);
+            setIsEditing(false);
+        }
+    };
+    const handleOnBlur = React.useCallback((e) => {
+        setHasActiveColor(false);
+        setIsEditable(false);
+        setIsEditing(false);
+        setHasEdited(false);
+        if (typeof attrs.onBlur === 'function') {
+            attrs.onBlur(e);
+        }
+    }, [attrs, setHasActiveColor, setIsEditable, setIsEditing]);
+    const handleOnFocus = React.useCallback((e) => {
+        setHasActiveColor(true);
+        setIsEditable(true);
+        setIsEditing(true);
+        setHasEdited(true);
+        if (typeof attrs.onFocus === 'function') {
+            attrs.onFocus(e);
+        }
+    }, [attrs, setHasActiveColor, setIsEditable, setIsEditing]);
+    const handleOnMouseEnter = React.useCallback((e) => {
+        setHasActiveColor(true);
+        if (typeof attrs.onMouseEnter === 'function') {
+            attrs.onMouseEnter(e);
+        }
+    }, [attrs, setHasActiveColor]);
+    const handleOnMouseLeave = React.useCallback((e) => {
+        setHasActiveColor(false);
+        if (typeof attrs.onMouseLeave === 'function') {
+            attrs.onMouseLeave(e);
+        }
+    }, [attrs, setHasActiveColor]);
+    const onClickEdit = React.useCallback(() => {
+        setIsEditable(true);
+        setIsEditing(true);
+        setHasEdited(true);
+    }, [setIsEditable, setIsEditing, setHasEdited]);
+    const hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0 && state !== 'read-only';
+    if (hasCounter && isNaN(Number(maxLength))) {
+        throw new Error('maxLength should have type number');
+    }
+    const hasErrorMessage = state === 'error' && (error === null || error === void 0 ? void 0 : error.message);
+    const inputClasses = classnames(className, styles['MrlEditableTextarea'], {
+        [styles['MrlEditableTextarea--readOnly']]: state === 'read-only'
+    }, 'MrlEditableTextarea', 'mrl-textarea');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `${styles['MrlEditableTextarea--wrapper']} MrlEditableTextarea--wrapper` },
+            React.createElement("textarea", Object.assign({}, attrs, { id: inputId, placeholder: placeholder, className: inputClasses, defaultValue: value, value: value, disabled: state === 'disabled', "aria-invalid": state === 'error', "aria-describedby": hasErrorMessage ? describedById : undefined, onBlur: handleOnBlur, onFocus: handleOnFocus, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, onKeyDown: onKeyDown, maxLength: hasCounter ? maxLength : undefined, readOnly: state === 'read-only' || !isEditable, ref: textareaRef, tabIndex: !isEditable ? -1 : 0 })),
+            state !== 'read-only' && state !== 'disabled' && !isEditable && (React.createElement(MrlEditableTextareaRightButton, { action: onClickEdit, icon: edit, label: `Edit ${inputLabelText}`, dataQa: attrs['data-qa'] && `${attrs['data-qa']}-edit`, hasActiveColor: hasActiveColor || isEditable, setHasActiveColor: setHasActiveColor, ref: iconRef }))),
+        hasCounter && isEditable && (React.createElement("span", { className: styles['MrlForm-counter'] },
+            React.createElement("span", { "aria-hidden": "true" },
+                (value === null || value === void 0 ? void 0 : value.length) || 0,
+                "/",
+                maxLength),
+            React.createElement("p", { style: { display: 'none' }, "aria-live": "polite", id: `${inputId}-counter` }, `${maxLength - ((value === null || value === void 0 ? void 0 : value.length) || 0)} of ${maxLength} characters remaining`))),
+        state === 'error' && (error === null || error === void 0 ? void 0 : error.message) && (React.createElement("span", { className: styles['MrlEditableTextarea-errorMessage'] },
+            React.createElement(MrlSvg, { className: styles['MrlEditableTextarea-errorIcon'], "aria-hidden": "true", svg: errorIcon, size: "small" }),
+            React.createElement("span", { id: describedById }, `${error === null || error === void 0 ? void 0 : error.message}`)))));
+});