@luscii-healthtech/web-ui 60.3.2 → 60.4.0

package/dist/esm/components/Textarea/LabeledTextarea.js

@@ -0,0 +1,21 @@
+import { __rest } from '../../vendor/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import classNames from 'classnames';
+import { calculateResponsiveWidthClasses } from '../../utils/responsiveness.utils.js';
+import { Stack } from '../Stack/Stack.js';
+import { HelperAndErrorText } from '../forms/shared/HelperAndErrorText.js';
+import { LabelText } from '../forms/shared/LabelText.js';
+import { Textarea } from './Textarea.js';
+
+const LabeledTextarea = React__default.forwardRef((props, ref) => {
+  const { className, helperText, errorText, label, width, fullWidth, id, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "width", "fullWidth", "id", "aria-describedby"]);
+  const generatedTextareaId = React__default.useId();
+  const textareaId = id || generatedTextareaId;
+  const helperErrorTextId = React__default.useId();
+  const fieldWidth = width !== null && width !== void 0 ? width : fullWidth ? "full" : void 0;
+  return jsxs(Stack, { _gap: "base", align: fieldWidth ? "stretch" : void 0, className: classNames(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsx(LabelText, { as: "label", htmlFor: textareaId, children: label }), jsx(Textarea, Object.assign({}, rest, { id: textareaId, ref, isError: Boolean(errorText), "aria-invalid": Boolean(errorText) || rest["aria-invalid"] || void 0, "aria-describedby": [ariaDescribedBy, helperErrorTextId].filter(Boolean).join(" ") })), jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
+});
+
+export { LabeledTextarea };
+//# sourceMappingURL=LabeledTextarea.js.map

package/dist/esm/components/Textarea/LabeledTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledTextarea.js","sources":["../../../../../../src/components/Textarea/LabeledTextarea.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;AAyFO,MAAM,eAAA,GAAkBA,cAAA,CAAM,UAAA,CACnC,CAAC,OAAO,GAAA,KAAO;AAIb,EAAA,MAAM,EACJ,SAAA,EACA,UAAA,EACA,SAAA,EACA,KAAA,EACA,OACA,SAAA,EACA,EAAA,EACA,kBAAA,EAAoB,eAAA,EAAe,GAEjC,KAAA,EADC,OAAI,MAAA,CACL,KAAA,EAVE,CAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,SAAA,OAAA,EAAA,WAAA,EAAA,IAAA,EAAA,kBAAA,CAUL,CAAA;AAED,EAAA,MAAM,mBAAA,GAAsBA,eAAM,KAAA;AAClC,EAAA,MAAM,aAAa,EAAA,IAAM,mBAAA;AACzB,EAAA,MAAM,iBAAA,GAAoBA,eAAM,KAAA;AAChC,EAAA,MAAM,aAAa,KAAA,aAAA,UAAK,MAAA,GAAL,KAAA,GAAU,YAAY,MAAA,GAAS,MAAA;AAQlD,EAAA,OACEC,KAAC,KAAA,IACC,IAAA,EAAK,MAAA,EACL,OAAO,UAAA,GAAa,SAAA,GAAY,MAAA,EAChC,SAAA,EAAW,WACT,UAAA,IAAc,+BAAA,CAAgC,UAAU,CAAA,EACxD,SAAS,CAAA,EACV,QAAA,EAAA,CAEA,KAAA,IACCC,IAAC,SAAA,EAAS,EAAC,EAAA,EAAG,OAAA,EAAQ,SAAS,UAAA,EAAU,QAAA,EACtC,KAAA,KAGLA,GAAA,CAAC,QAAA,EAAQ,OAAA,MAAA,CAAA,IACH,IAAA,EAAI,EACR,EAAA,EAAI,UAAA,EACJ,KACA,OAAA,EAAS,OAAA,CAAQ,SAAS,CAAA,EAAC,gBACb,OAAA,CAAQ,SAAS,CAAA,IAAK,IAAA,CAAK,cAAc,CAAA,IAAK,MAAA,EAAS,kBAAA,EACnD,CAAC,iBAAiB,iBAAiB,CAAA,CAClD,MAAA,CAAO,OAAO,EACd,IAAA,CAAK,GAAG,CAAA,EAAC,CAAA,CAAA,EAGdA,GAAA,CAAC,kBAAA,EAAkB,EACjB,YACA,SAAA,EACA,YAAA,EAAc,mBAAiB,CAC/B,GAAA,CAAA;AAGR,CAAC;;"}

package/dist/esm/components/Textarea/Textarea.js

@@ -10,12 +10,11 @@ const resizeTypes = {
   VERTICAL: "vertical"
 };
 const Textarea = React__default.forwardRef((_a, ref) => {
-  var { className, value, name, placeholder, maxLength, rows = 4, resizable = resizeTypes.VERTICAL, isDisabled = false, icon, onChange, onBlur, onFocus, onKeyPress, onKeyDown, onCtrlEnter, isError } = _a, otherProps = __rest(_a, ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter", "isError"]);
-  let style;
+  var { className, value, name, placeholder, maxLength, rows = 4, resizable = resizeTypes.VERTICAL, isDisabled = false, disabled: nativeDisabled = false, icon, onChange, onBlur, onFocus, onKeyPress, onKeyDown, onCtrlEnter, isError, style: consumerStyle } = _a, otherProps = __rest(_a, ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "disabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter", "isError", "style"]);
+  const disabled = isDisabled || nativeDisabled;
+  let style = consumerStyle;
   if (icon) {
-    style = {
-      backgroundImage: `url("${icon}")`
-    };
+    style = Object.assign(Object.assign({}, consumerStyle), { backgroundImage: `url("${icon}")` });
   }
   return jsx("textarea", Object.assign({}, otherProps, { name, value, placeholder, onChange, onBlur, onFocus, onKeyPress, onKeyDown: (event) => {
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
@@ -23,7 +22,7 @@ const Textarea = React__default.forwardRef((_a, ref) => {
     if ((ctrlKey || metaKey) && key === "Enter") {
       onCtrlEnter === null || onCtrlEnter === void 0 ? void 0 : onCtrlEnter();
     }
-  }, maxLength, rows, disabled: isDisabled, className: classNames([
+  }, maxLength, rows, disabled, className: classNames([
     // Base classes
     className,
     "cweb-textarea",
@@ -45,11 +44,11 @@ const Textarea = React__default.forwardRef((_a, ref) => {
     "ui:duration-300",
     {
       // Disabled state
-      "ui:bg-slate-50 ui:text-slate-400": isDisabled,
-      "ui:text-on-surface": !isDisabled,
+      "ui:bg-slate-50 ui:text-slate-400": disabled,
+      "ui:text-on-surface": !disabled,
       // Normal state (not disabled, not error)
-      "ui:border-input-border": !isDisabled && !isError,
-      "ui:hover:border-input-border-dark": !isDisabled,
+      "ui:border-input-border": !disabled && !isError,
+      "ui:hover:border-input-border-dark": !disabled,
       // Error state
       "ui:border-negative-border": isError,
       "ui:focus:outline-negative": isError,

package/dist/esm/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["React","_jsx"],"mappings":";;;;;;AASA,MAAM,WAAA,GAAc;AAAA,EAElB,IAAA,EAAM,MAAA;AAAA,EACN,UAAA,EAAY,YAAA;AAAA,EACZ,QAAA,EAAU;;AAyBL,MAAM,QAAA,GAAWA,cAAA,CAAM,UAAA,CAC5B,CACE,IAmBA,GAAA,KACE;MApBF,EACE,SAAA,EACA,KAAA,EACA,MACA,WAAA,EACA,SAAA,EACA,OAAO,CAAA,EACP,SAAA,GAAY,YAAY,QAAA,EACxB,UAAA,GAAa,OACb,IAAA,EACA,QAAA,EACA,QACA,OAAA,EACA,UAAA,EACA,WACA,WAAA,EACA,OAAA,KAAO,EAAA,EACJ,UAAA,GAAU,OAAA,EAAA,EAjBf,2LAkBC,CAAA;AAGD,EAAA,IAAI,KAAA;AAEJ,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,KAAA,GAAQ;AAAA,MACN,eAAA,EAAiB,QAAQ,IAAI,CAAA,EAAA;AAAA;EAEjC;AAEA,EAAA,OACEC,IAAA,UAAA,EAAA,MAAA,CAAA,MAAA,CAAA,IACM,UAAA,EAAU,EACd,IAAA,EACA,KAAA,EACA,aACA,QAAA,EACA,MAAA,EACA,SACA,UAAA,EACA,SAAA,EAAW,CAAC,KAAA,KAAS;AACnB,IAAA,SAAA,aAAA,SAAA,KAAS,MAAA,GAAA,MAAA,GAAT,UAAY,KAAK,CAAA;AACjB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,GAAA,EAAG,GAAK,KAAA;AAElC,IAAA,IAAA,CAAK,OAAA,IAAW,OAAA,KAAY,GAAA,KAAQ,OAAA,EAAS;AAC3C,MAAA,WAAA,KAAW,IAAA,IAAX,WAAA,KAAW,MAAA,GAAA,MAAA,GAAX,WAAA;IACF;AAAA,EACF,GACA,SAAA,EACA,IAAA,EACA,QAAA,EAAU,UAAA,EACV,WAAW,UAAA,CAAW;AAAA;AAAA,IAEpB,SAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA;AAAA,IAGA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA;AAAA,IAGA,yBAAA;AAAA,IACA,4BAAA;AAAA,IACA,0BAAA;AAAA,IACA,yBAAA;AAAA;AAAA,IAGA,sBAAA;AAAA,IACA,iBAAA;AAAA,IAEA;AAAA;AAAA,MAEE,kCAAA,EAAoC,UAAA;AAAA,MACpC,sBAAsB,CAAC,UAAA;AAAA;AAAA,MAGvB,wBAAA,EAA0B,CAAC,UAAA,IAAc,CAAC,OAAA;AAAA,MAC1C,qCAAqC,CAAC,UAAA;AAAA;AAAA,MAGtC,2BAAA,EAA6B,OAAA;AAAA,MAC7B,2BAAA,EAA6B,OAAA;AAAA,MAC7B,2BAA2B,CAAC,OAAA;AAAA,MAC5B,4BAA4B,CAAC,OAAA;AAAA;AAAA,MAG7B,UAAA,EAAY,CAAC,CAAC,IAAA;AAAA,MACd,SAAA,EAAW,cAAc,WAAA,CAAY,IAAA;AAAA,MACrC,aAAA,EAAe,cAAc,WAAA,CAAY,UAAA;AAAA,MACzC,aAAA,EAAe,cAAc,WAAA,CAAY;AAAA;AAC1C,GACF,CAAA,EACD,KAAA,EACA,GAAA,EAAQ,CAAA,CAAA;AAGd,CAAC;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["React","_jsx"],"mappings":"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"}

package/dist/esm/index.js

@@ -32,6 +32,7 @@ export { StyledInput } from './components/Input/StyledInput.js';
 export { StyledRadio } from './components/Radio/StyledRadio.js';
 export { LabeledDatePicker } from './components/DatePicker/LabeledDatePicker.js';
 export { LabeledInput } from './components/Input/LabeledInput.js';
+export { LabeledTextarea } from './components/Textarea/LabeledTextarea.js';
 export { LabeledRadio } from './components/Radio/LabeledRadio.js';
 export { LabeledRadioGroup } from './components/Radio/LabeledRadioGroup.js';
 export { LabelText } from './components/forms/shared/LabelText.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.development.js

@@ -2739,6 +2739,77 @@ const LabeledInput = React__namespace.default.forwardRef((props, ref) => {
   return jsxRuntime.jsxs(Stack, { _gap: "base", align: fieldWidth ? "stretch" : void 0, className: classNames__default.default(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsxRuntime.jsx(LabelText, { as: "label", htmlFor: inputId, children: label }), jsxRuntime.jsx(StyledInput, Object.assign({}, rest, { id: inputId, ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].filter(Boolean).join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
 });
 
+var css_248z$8 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-textarea {\n  resize: none;\n  background-color: field;\n}\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n.cweb-textarea.resizable {\n  resize: both;\n}\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n.cweb-textarea:focus {\n  border-color: var(--color-primary);\n}\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n  border: 1px solid #b91c1c;\n  color: #991b1b;\n}";
+styleInject(css_248z$8);
+
+const resizeTypes = {
+  BOTH: "both",
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical"
+};
+const Textarea = React__namespace.default.forwardRef((_a, ref) => {
+  var { className, value, name, placeholder, maxLength, rows = 4, resizable = resizeTypes.VERTICAL, isDisabled = false, disabled: nativeDisabled = false, icon, onChange, onBlur, onFocus, onKeyPress, onKeyDown, onCtrlEnter, isError, style: consumerStyle } = _a, otherProps = __rest(_a, ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "disabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter", "isError", "style"]);
+  const disabled = isDisabled || nativeDisabled;
+  let style = consumerStyle;
+  if (icon) {
+    style = Object.assign(Object.assign({}, consumerStyle), { backgroundImage: `url("${icon}")` });
+  }
+  return jsxRuntime.jsx("textarea", Object.assign({}, otherProps, { name, value, placeholder, onChange, onBlur, onFocus, onKeyPress, onKeyDown: (event) => {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    const { ctrlKey, metaKey, key } = event;
+    if ((ctrlKey || metaKey) && key === "Enter") {
+      onCtrlEnter === null || onCtrlEnter === void 0 ? void 0 : onCtrlEnter();
+    }
+  }, maxLength, rows, disabled, className: classNames__default.default([
+    // Base classes
+    className,
+    "cweb-textarea",
+    "ui:w-full",
+    "ui:rounded",
+    "ui:text-sm",
+    // Padding and border
+    "ui:p-2",
+    "ui:border",
+    "ui:border-solid",
+    "ui:input-border",
+    // Colors and states
+    "ui:placeholder-gray-500",
+    "ui:hover:input-border-dark",
+    "ui:focus:outline-primary",
+    "ui:focus:border-primary",
+    // Transitions
+    "ui:transition-colors",
+    "ui:duration-300",
+    {
+      // Disabled state
+      "ui:bg-slate-50 ui:text-slate-400": disabled,
+      "ui:text-on-surface": !disabled,
+      // Normal state (not disabled, not error)
+      "ui:border-input-border": !disabled && !isError,
+      "ui:hover:border-input-border-dark": !disabled,
+      // Error state
+      "ui:border-negative-border": isError,
+      "ui:focus:outline-negative": isError,
+      "ui:focus:border-primary": !isError,
+      "ui:focus:outline-primary": !isError,
+      // Style if icon present, and resizable states
+      "has-icon": !!icon,
+      resizable: resizable === resizeTypes.BOTH,
+      "resizable-x": resizable === resizeTypes.HORIZONTAL,
+      "resizable-y": resizable === resizeTypes.VERTICAL
+    }
+  ]), style, ref }));
+});
+
+const LabeledTextarea = React__namespace.default.forwardRef((props, ref) => {
+  const { className, helperText, errorText, label, width, fullWidth, id, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "width", "fullWidth", "id", "aria-describedby"]);
+  const generatedTextareaId = React__namespace.default.useId();
+  const textareaId = id || generatedTextareaId;
+  const helperErrorTextId = React__namespace.default.useId();
+  const fieldWidth = width !== null && width !== void 0 ? width : fullWidth ? "full" : void 0;
+  return jsxRuntime.jsxs(Stack, { _gap: "base", align: fieldWidth ? "stretch" : void 0, className: classNames__default.default(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsxRuntime.jsx(LabelText, { as: "label", htmlFor: textareaId, children: label }), jsxRuntime.jsx(Textarea, Object.assign({}, rest, { id: textareaId, ref, isError: Boolean(errorText), "aria-invalid": Boolean(errorText) || rest["aria-invalid"] || void 0, "aria-describedby": [ariaDescribedBy, helperErrorTextId].filter(Boolean).join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
+});
+
 const Actions$1 = (props) => {
   const { children, className } = props, rest = __rest(props, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, rest, { className: classNames__default.default(
@@ -3146,8 +3217,8 @@ Line.propTypes = {
   className: PropTypes__default.default.string
 };
 
-var css_248z$8 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-checkbox {\n  outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  border-color: #cccccc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border-color: var(--ui-color-red-800, #991b1b);\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}";
-styleInject(css_248z$8);
+var css_248z$7 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-checkbox {\n  outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  border-color: #cccccc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border-color: var(--ui-color-red-800, #991b1b);\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}";
+styleInject(css_248z$7);
 
 const CheckboxInner = (props) => {
   const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, onClick, className, classNameCheckboxLabel, error, innerRef } = props;
@@ -3265,8 +3336,8 @@ var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:
 
 var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
 
-var css_248z$7 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}";
-styleInject(css_248z$7);
+var css_248z$6 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}";
+styleInject(css_248z$6);
 
 function LoadingIndicator(_a) {
   var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
@@ -3460,8 +3531,8 @@ const PaginationMenuSmall = (props) => {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TertiaryButton, { "aria-label": localization.previous, "data-test-id": "prev-button", leadingIcon: jsxRuntime.jsx(ChevronLeftIcon, {}), "data-page": props.currentPageNumber - 1, onClick: handleOnChange, disabled: props.currentPageNumber === 1 }), jsxRuntime.jsx(Text, { className: "ui:ml-4", variant: "sm", color: "slate-500", children: `${props.currentPageNumber} / ${props.pageCount}` }), jsxRuntime.jsx(TertiaryButton, { className: "ui:ml-4", "aria-label": localization.next, "data-test-id": "next-button", leadingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), disabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnChange })] });
 };
 
-var css_248z$6 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
-styleInject(css_248z$6);
+var css_248z$5 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
+styleInject(css_248z$5);
 
 const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
   var { children, suffix, prefix, className, width = "full", height = "lg", isError } = _a, attributes = __rest(_a, ["children", "suffix", "prefix", "className", "width", "height", "isError"]);
@@ -3932,8 +4003,8 @@ const NavLayout = (props) => {
   }), children })] })] })] }));
 };
 
-var css_248z$5 = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}";
-styleInject(css_248z$5);
+var css_248z$4 = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}";
+styleInject(css_248z$4);
 
 function Page({
   dataTestId = "page",
@@ -4112,8 +4183,8 @@ const Breadcrumbs = ({
   return jsxRuntime.jsx("ul", { "data-test-id": "breadcrumbs", className: "ui:flex ui:flex-row ui:flex-wrap ui:items-center", children: (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? jsxRuntime.jsx(BreadcrumbDividerItem, Object.assign({}, crumbOrDividerProps), `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}`) : jsxRuntime.jsx(BreadcrumbItem, Object.assign({}, crumbOrDividerProps, { render: renderItem }), crumbOrDividerProps.key || crumbOrDividerProps.name)) });
 };
 
-var css_248z$4 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/**\n * Avenir is NOT declared here. The library does not ship font files, so any\n * `@font-face` written against a path in this repo resolves against the\n * consuming app's document and 404s there. Providing the typeface is the\n * consumer's responsibility; this rule only names it.\n */\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
-styleInject(css_248z$4);
+var css_248z$3 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/**\n * Avenir is NOT declared here. The library does not ship font files, so any\n * `@font-face` written against a path in this repo resolves against the\n * consuming app's document and 404s there. Providing the typeface is the\n * consumer's responsibility; this rule only names it.\n */\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
+styleInject(css_248z$3);
 
 const PageTitle = (props) => {
   const { as: Component = "h2", className } = props, rest = __rest(props, ["as", "className"]);
@@ -4322,8 +4393,8 @@ const Section = (_a) => {
   }), children: isLoading ? null : children }), footer && jsxRuntime.jsx(SectionFooter, { children: footer })] }));
 };
 
-var css_248z$3 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}";
-styleInject(css_248z$3);
+var css_248z$2 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}";
+styleInject(css_248z$2);
 
 const SectionItem = (props) => {
   const { children, className, onClick } = props, rest = __rest(props, ["children", "className", "onClick"]);
@@ -4340,8 +4411,8 @@ function SectionItemWithContent(props) {
   return jsxRuntime.jsxs(SectionItem, Object.assign({ className: mergedClasses, onClick }, rest, { children: [icon && jsxRuntime.jsx("img", { className: iconClasses, src: icon, alt: "" }), jsxRuntime.jsx(Text, { children: text })] }));
 }
 
-var css_248z$2 = ".customized-select [class*=MenuList] [class*=option]::after {\n  position: absolute;\n  content: \"\";\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E    %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E        %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  right: 12px;\n  height: 1rem;\n  width: 1rem;\n}";
-styleInject(css_248z$2);
+var css_248z$1 = ".customized-select [class*=MenuList] [class*=option]::after {\n  position: absolute;\n  content: \"\";\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E    %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E        %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  right: 12px;\n  height: 1rem;\n  width: 1rem;\n}";
+styleInject(css_248z$1);
 
 const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: props.isMulti ? jsxRuntime.jsx(ChevronDoubleIcon, {}) : jsxRuntime.jsx(ChevronDownIcon, {}) }));
 
@@ -5127,69 +5198,6 @@ const ActionCardDetailed = ({ type, iconUrl, title, category, metadata, schedule
   )) })] }), children ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Divider, { version: "v2", className: "ui:w-full" }), jsxRuntime.jsx(Stack, { _gap: "base", width: "full", children })] }) : null] }) });
 };
 
-var css_248z$1 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-textarea {\n  resize: none;\n  background-color: field;\n}\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n.cweb-textarea.resizable {\n  resize: both;\n}\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n.cweb-textarea:focus {\n  border-color: var(--color-primary);\n}\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n  border: 1px solid #b91c1c;\n  color: #991b1b;\n}";
-styleInject(css_248z$1);
-
-const resizeTypes = {
-  BOTH: "both",
-  HORIZONTAL: "horizontal",
-  VERTICAL: "vertical"
-};
-const Textarea = React__namespace.default.forwardRef((_a, ref) => {
-  var { className, value, name, placeholder, maxLength, rows = 4, resizable = resizeTypes.VERTICAL, isDisabled = false, icon, onChange, onBlur, onFocus, onKeyPress, onKeyDown, onCtrlEnter, isError } = _a, otherProps = __rest(_a, ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter", "isError"]);
-  let style;
-  if (icon) {
-    style = {
-      backgroundImage: `url("${icon}")`
-    };
-  }
-  return jsxRuntime.jsx("textarea", Object.assign({}, otherProps, { name, value, placeholder, onChange, onBlur, onFocus, onKeyPress, onKeyDown: (event) => {
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    const { ctrlKey, metaKey, key } = event;
-    if ((ctrlKey || metaKey) && key === "Enter") {
-      onCtrlEnter === null || onCtrlEnter === void 0 ? void 0 : onCtrlEnter();
-    }
-  }, maxLength, rows, disabled: isDisabled, className: classNames__default.default([
-    // Base classes
-    className,
-    "cweb-textarea",
-    "ui:w-full",
-    "ui:rounded",
-    "ui:text-sm",
-    // Padding and border
-    "ui:p-2",
-    "ui:border",
-    "ui:border-solid",
-    "ui:input-border",
-    // Colors and states
-    "ui:placeholder-gray-500",
-    "ui:hover:input-border-dark",
-    "ui:focus:outline-primary",
-    "ui:focus:border-primary",
-    // Transitions
-    "ui:transition-colors",
-    "ui:duration-300",
-    {
-      // Disabled state
-      "ui:bg-slate-50 ui:text-slate-400": isDisabled,
-      "ui:text-on-surface": !isDisabled,
-      // Normal state (not disabled, not error)
-      "ui:border-input-border": !isDisabled && !isError,
-      "ui:hover:border-input-border-dark": !isDisabled,
-      // Error state
-      "ui:border-negative-border": isError,
-      "ui:focus:outline-negative": isError,
-      "ui:focus:border-primary": !isError,
-      "ui:focus:outline-primary": !isError,
-      // Style if icon present, and resizable states
-      "has-icon": !!icon,
-      resizable: resizable === resizeTypes.BOTH,
-      "resizable-x": resizable === resizeTypes.HORIZONTAL,
-      "resizable-y": resizable === resizeTypes.VERTICAL
-    }
-  ]), style, ref }));
-});
-
 const LinkTooltip = ({ linkElement, editorInstance, onClose, translations }) => {
   const dialogRef = React.useRef(null);
   const anchorName = React.useRef(`link-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`);
@@ -7532,6 +7540,7 @@ exports.LabeledRadioCardGroup = LabeledRadioCardGroup;
 exports.LabeledRadioGroup = LabeledRadioGroup;
 exports.LabeledSelect = LabeledSelect;
 exports.LabeledSelectSearchable = LabeledSelectSearchable;
+exports.LabeledTextarea = LabeledTextarea;
 exports.LifebuoyIcon = LifebuoyIcon;
 exports.LightBulbIcon = LightBulbIcon;
 exports.Line = Line;