@muraldevkit/ui-toolkit 4.66.0-dev-7K0j.1 → 4.66.0-dev-T3Jw.1

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

@@ -1,370 +0,0 @@
-@charset "UTF-8";
-/* stylelint-disable scss/operator-no-newline-after */
-.mrl-u-focus-wrapper--UiCTx {
-  position: relative;
-}
-
-.MrlForm-counter--x-v11 {
-  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--w78sc:checked ~ .mrl-checkbox-inputDisplay--U6BBC,
-.MrlCheckboxStandalone-input--H3J1f:checked ~ .MrlCheckboxStandalone-inputDisplay--191Rh,
-.mrl-checkbox-input--w78sc:indeterminate ~ .mrl-checkbox-inputDisplay--U6BBC,
-.MrlCheckboxStandalone-input--H3J1f:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--191Rh {
-  --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)
-  );
-}
-
-.MrlEditableTextInput---VxWi {
-  --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 */
-.MrlEditableTextInput-hover-button--voxfV {
-  opacity: 0;
-  transition: opacity var(--mrl-duration-03) var(--mrl-timing-m2);
-}
-
-.MrlEditableTextInput---VxWi {
-  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%;
-  padding-left: 0;
-  /*
-  	* Since we have built a custom clearable functionality,
-  	* we should hide the default search clear from certain browsers
-   */
-  /* clears the ‘X’ from Chrome */
-}
-.MrlEditableTextInput---VxWi::placeholder {
-  color: var(--mrl-text-input-placeholder-color);
-}
-.MrlEditableTextInput---VxWi:hover {
-  --mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);
-  --mrl-text-input-background: var(--mrl-text-input-background-color-hover);
-}
-.MrlEditableTextInput---VxWi:focus {
-  --mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);
-  color: var(--mrl-text-input-color-focus);
-}
-.MrlEditableTextInput---VxWi:focus-visible {
-  outline: none;
-}
-.MrlEditableTextInput---VxWi:disabled {
-  --mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);
-  color: var(--mrl-text-input-color-disabled);
-  pointer-events: none;
-}
-.MrlEditableTextInput---VxWi:disabled::placeholder {
-  color: var(--mrl-text-input-color-disabled);
-}
-.MrlEditableTextInput---VxWi[aria-invalid=true] {
-  border-color: var(--mrl-color-background-error);
-}
-.MrlEditableTextInput---VxWi: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);
-}
-.MrlEditableTextInput---VxWi:focus-visible {
-  animation-duration: var(--mrl-duration-03);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-  animation-name: outline-animation--Nq4Us;
-  animation-timing-function: var(--mrl-timing-m3);
-}
-@keyframes outline-animation--Nq4Us {
-  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;
-  }
-}
-.MrlEditableTextInput---VxWi:focus {
-  --mrl-text-input-border-color: transparent;
-}
-.MrlEditableTextInput---VxWi:disabled {
-  --mrl-text-input-border-color: transparent;
-}
-.MrlEditableTextInput---VxWi:focus:not(.MrlEditableTextInput--readOnly--tcN3Q) {
-  padding-left: var(--mrl-space-inset-control-small);
-}
-.MrlEditableTextInput---VxWi[aria-invalid=true] {
-  padding-left: var(--mrl-space-inset-control-small);
-}
-.MrlEditableTextInput---VxWi:not(:disabled):read-only {
-  color: var(--mrl-text-input-color-read-only);
-  pointer-events: auto;
-  --mrl-text-input-background: none;
-}
-.MrlEditableTextInput---VxWi::-ms-clear, .MrlEditableTextInput---VxWi::-ms-reveal {
-  display: none;
-  height: 0;
-  width: 0;
-}
-.MrlEditableTextInput---VxWi::-webkit-search-decoration, .MrlEditableTextInput---VxWi::-webkit-search-cancel-button, .MrlEditableTextInput---VxWi::-webkit-search-results-button, .MrlEditableTextInput---VxWi::-webkit-search-results-decoration {
-  display: none;
-}
-.MrlEditableTextInput---VxWi:not(:focus, :disabled, .MrlEditableTextInput--readOnly--tcN3Q):hover {
-  background-color: var(--mrl-black-opacity-00);
-  padding-left: var(--mrl-space-inset-control-small);
-}
-.MrlEditableTextInput---VxWi:focus-visible ~ .MrlEditableTextInput-hover-button--voxfV, .MrlEditableTextInput---VxWi:focus-visible ~ .MrlEditableTextInput-right-button--qMDyF {
-  opacity: 0;
-}
-
-.MrlEditableTextInput--allowOnClick--mIFDq:not(:disabled):read-only {
-  pointer-events: auto;
-}
-
-.MrlEditableTextInput--dynamicIcon--OjpNX {
-  padding-right: calc(var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) + var(--mrl-text-input-icon-offset));
-}
-.MrlEditableTextInput--dynamicIcon--OjpNX:focus-visible {
-  padding-right: var(--mrl-text-input-inset-horizontal);
-}
-
-.MrlEditableTextInput-dynamicIcon--3VdvQ {
-  color: var(--mrl-text-input-border-color);
-  position: absolute;
-  right: var(--mrl-text-input-inset-horizontal);
-  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;
-}
-.MrlEditableTextInput-dynamicIcon--disabled--00xyq {
-  color: var(--mrl-text-input-border-color-disabled);
-}
-
-.MrlEditableTextInput--active--2Sc1p {
-  /* hides the edit button when input is in focus */
-}
-.MrlEditableTextInput--active--2Sc1p:focus-visible ~ .MrlEditableTextInput-right-button--qMDyF,
-.MrlEditableTextInput--active--2Sc1p:focus-visible ~ .MrlEditableTextInput-hover-button--voxfV {
-  opacity: 0;
-}
-
-.MrlEditableTextInput-dynamicIcon--active--3DsIo {
-  color: var(--mrl-text-input-border-color-hover);
-}
-
-.MrlEditableTextInput-dynamicIcon--3VdvQ > button {
-  position: relative;
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  height: 20px;
-  outline: none;
-  padding: 0;
-}
-.MrlEditableTextInput-dynamicIcon--3VdvQ > button:focus-visible {
-  outline: none;
-}
-.MrlEditableTextInput-dynamicIcon--3VdvQ > 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--U6BFi;
-}
-@keyframes border-animation--U6BFi {
-  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--fVQ21 {
-  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--Nq4Us {
-  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;
-  }
-}
-
-.MrlEditableTextInput-errorMessage--gWe1l {
-  color: var(--mrl-color-background-error);
-  font-size: var(--mrl-type-size-text-small);
-}
-
-.MrlEditableTextInput-errorIcon--VtDYa {
-  margin-right: var(--mrl-spacing-02);
-  vertical-align: middle;
-}
-
-.MrlEditableTextInput--wrapper--H0PqW {
-  font-size: var(--mrl-type-size-text-small);
-  position: relative;
-}
-.MrlEditableTextInput--wrapper--H0PqW:hover .MrlEditableTextInput---VxWi:not(:focus, :disabled, .MrlEditableTextInput--readOnly--tcN3Q) {
-  background-color: var(--mrl-black-opacity-00);
-  padding-left: var(--mrl-space-inset-control-small);
-}
-.MrlEditableTextInput--wrapper--H0PqW:hover .MrlEditableTextInput--readOnly--tcN3Q:not(:focus) {
-  background-color: var(--mrl-text-input-background);
-}
-.MrlEditableTextInput--wrapper--H0PqW:hover .MrlEditableTextInput-hover-button--voxfV {
-  opacity: 1;
-}

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

@@ -1,25 +0,0 @@
-import "./MrlEditableTextInput.module.css";
-export default {
-	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--UiCTx",
-	"MrlForm-counter": "MrlForm-counter--x-v11",
-	"mrl-checkbox-input": "mrl-checkbox-input--w78sc",
-	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--U6BBC",
-	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--H3J1f",
-	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--191Rh",
-	"MrlEditableTextInput": "MrlEditableTextInput---VxWi",
-	"MrlEditableTextInput-hover-button": "MrlEditableTextInput-hover-button--voxfV",
-	"outline-animation": "outline-animation--Nq4Us",
-	"MrlEditableTextInput--readOnly": "MrlEditableTextInput--readOnly--tcN3Q",
-	"MrlEditableTextInput-right-button": "MrlEditableTextInput-right-button--qMDyF",
-	"MrlEditableTextInput--allowOnClick": "MrlEditableTextInput--allowOnClick--mIFDq",
-	"MrlEditableTextInput--dynamicIcon": "MrlEditableTextInput--dynamicIcon--OjpNX",
-	"MrlEditableTextInput-dynamicIcon": "MrlEditableTextInput-dynamicIcon--3VdvQ",
-	"MrlEditableTextInput-dynamicIcon--disabled": "MrlEditableTextInput-dynamicIcon--disabled--00xyq",
-	"MrlEditableTextInput--active": "MrlEditableTextInput--active--2Sc1p",
-	"MrlEditableTextInput-dynamicIcon--active": "MrlEditableTextInput-dynamicIcon--active--3DsIo",
-	"border-animation": "border-animation--U6BFi",
-	"MrlEditableTextInput-errorMessage": "MrlEditableTextInput-errorMessage--gWe1l",
-	"MrlEditableTextInput-errorIcon": "MrlEditableTextInput-errorIcon--VtDYa",
-	"MrlEditableTextInput--wrapper": "MrlEditableTextInput--wrapper--H0PqW",
-	"border-animation-inverse": "border-animation-inverse--fVQ21"
-};

package/dist/esm/components/form/text-input/MrlEditableTextInput/MrlEditableTextInputRightIcon.js

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg';
-import classnames from 'classnames';
-import styles from './MrlEditableTextInput.module.scss.js';
-/**
- * Renders the right icon in the text input
- *
- * @param {MrlEditableInputRightButtonProps} props - the component props
- * @returns a button element with an icon
- */
-export const MrlEditableTextInputRightButton = React.forwardRef(function MrlEditableTextInputRightButton({ action, dataQa, hasActiveColor, icon, label, setHasActiveColor }, ref) {
-    const handleKeyUp = React.useCallback((e) => {
-        if (e.key === ' ' || e.key === 'Enter') {
-            action(e);
-        }
-    }, [action]);
-    return (React.createElement("span", { className: classnames(styles['MrlEditableTextInput-dynamicIcon'], {
-            [styles['MrlEditableTextInput-dynamicIcon--active']]: hasActiveColor
-        }) },
-        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), ref: ref },
-            React.createElement(MrlSvg, { "aria-hidden": "true", svg: icon, size: "small" }))));
-});

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

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

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

@@ -1,135 +0,0 @@
-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 { MrlSvg } from '../../../';
-import { MrlTextInputRightIcon } from './MrlTextInputRightIcon';
-import { setAttributes } from '../../../../utils';
-import { closeAlt } from '@muraldevkit/ds-icons';
-import { useActiveColor } from '../../hooks/useActiveColor';
-import styles from './MrlTextInput.module.scss.js';
-/**
- * Allows the user to input plain text
- * @param {MrlTextInputProps} props - the component props
- * @param {HTMLInputElement} ref - a ref to the input element in the DOM
- * @returns a text input element
- */
-export const MrlTextInput = React.forwardRef(function MrlTextInput(_a, ref) {
-    var { attrs = {}, inputId, isClearable, dynamicIcon, hookClear, maxLength, persistIcon, placeholder, state, value, 'aria-describedby': ariaDescribedByProp } = _a, rest = __rest(_a, ["attrs", "inputId", "isClearable", "dynamicIcon", "hookClear", "maxLength", "persistIcon", "placeholder", "state", "value", 'aria-describedby']);
-    const textInputRef = React.useRef(null);
-    const { hasActiveColor, setHasActiveColor } = useActiveColor(state);
-    React.useImperativeHandle(ref, () => textInputRef.current);
-    const clearInput = React.useCallback(() => {
-        if (textInputRef.current) {
-            textInputRef.current.value = '';
-            textInputRef.current.focus();
-        }
-        if (hookClear && typeof hookClear === 'function') {
-            hookClear();
-        }
-    }, [hookClear]);
-    const hasValue = () => {
-        var _a;
-        return ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== '' || value !== '';
-    };
-    const initialAttributes = setAttributes(attrs);
-    const { 'aria-describedby': ariaDescribedByAttrs } = initialAttributes, attributes = __rest(initialAttributes, ['aria-describedby']);
-    const ariaDescribedBy = ariaDescribedByProp || ariaDescribedByAttrs;
-    const handleOnBlur = React.useCallback((e) => {
-        setHasActiveColor(false);
-        if (typeof rest.onBlur === 'function') {
-            rest.onBlur(e);
-        }
-        if (typeof attributes.onBlur === 'function') {
-            attributes.onBlur(e);
-        }
-    }, [attributes, rest, setHasActiveColor]);
-    const handleOnFocus = React.useCallback((e) => {
-        setHasActiveColor(true);
-        if (typeof rest.onFocus === 'function') {
-            rest.onFocus(e);
-        }
-        if (typeof attributes.onFocus === 'function') {
-            attributes.onFocus(e);
-        }
-    }, [attributes, rest, setHasActiveColor]);
-    const handleOnMouseEnter = React.useCallback((e) => {
-        setHasActiveColor(true);
-        if (typeof rest.onMouseEnter === 'function') {
-            rest.onMouseEnter(e);
-        }
-        if (typeof attributes.onMouseEnter === 'function') {
-            attributes.onMouseEnter(e);
-        }
-    }, [attributes, rest, setHasActiveColor]);
-    const handleOnMouseLeave = React.useCallback((e) => {
-        setHasActiveColor(false);
-        if (typeof rest.onMouseLeave === 'function') {
-            rest.onMouseLeave(e);
-        }
-        if (typeof attributes.onMouseLeave === 'function') {
-            attributes.onMouseLeave(e);
-        }
-    }, [attributes, rest, setHasActiveColor]);
-    React.useEffect(() => {
-        if (textInputRef.current) {
-            if (attributes.autofocus) {
-                textInputRef.current.focus();
-            }
-        }
-        // it should only run on the first render
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const stateAllowsClearing = state !== 'disabled' && state !== 'read-only';
-    const inputClasses = classnames('MrlTextInput', styles['MrlTextInput'], styles['mrl-textInput'], {
-        [styles['MrlTextInput--dynamicIcon']]: isClearable && stateAllowsClearing,
-        [styles['MrlTextInput--persistIcon']]: persistIcon !== undefined,
-        [styles['MrlTextInput--active']]: hasActiveColor
-    }, attributes.class, attributes.className);
-    const hasDynamicIcon = stateAllowsClearing && !isClearable && typeof dynamicIcon !== 'undefined';
-    const dataMaxLength = attrs['data-maxlength'];
-    const hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;
-    const hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;
-    if (hasMaxLength && isNaN(Number(maxLength))) {
-        throw new Error('maxLength should have type number');
-    }
-    if (hasDataMaxLength && isNaN(Number(dataMaxLength))) {
-        throw new Error('data-maxlength should have type number');
-    }
-    if (hasMaxLength && hasDataMaxLength) {
-        throw new Error('maxLength and data-maxlength should not be used at the same time');
-    }
-    const displayCounter = hasMaxLength || hasDataMaxLength;
-    const counterDisplayValue = hasDataMaxLength ? dataMaxLength : maxLength;
-    const valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;
-    // @todo - 2563 - move to setAttributes
-    delete attributes.class;
-    delete attributes.className;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles['mrl-u-focus-wrapper'] },
-            React.createElement("input", Object.assign({ type: "text" }, rest, attributes, { "aria-describedby": ariaDescribedBy, "aria-invalid": state === 'error', className: inputClasses, disabled: state === 'disabled', maxLength: hasMaxLength ? maxLength : undefined, onBlur: handleOnBlur, onFocus: handleOnFocus, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, id: inputId, placeholder: placeholder, readOnly: state === 'read-only', ref: textInputRef, value: value })),
-            React.createElement("span", { className: styles['mrl-u-focus-indicator'] }),
-            persistIcon && (React.createElement(MrlSvg, { "aria-hidden": "true", className: classnames(styles['MrlTextInput-persistIcon'], {
-                    [styles['MrlTextInput-persistIcon--active']]: hasActiveColor,
-                    [styles['MrlTextInput-persistIcon--disabled']]: state === 'disabled'
-                }), svg: persistIcon, size: "small", onMouseEnter: () => setHasActiveColor(true), onMouseLeave: () => setHasActiveColor(false) })),
-            stateAllowsClearing && hasValue() && isClearable && (React.createElement(MrlTextInputRightIcon, { action: clearInput, icon: closeAlt, label: "Clear input", dataQa: attributes['data-qa'] && `${attributes['data-qa']}-clear`, hasActiveColor: hasActiveColor, setHasActiveColor: setHasActiveColor, value: value })),
-            hasDynamicIcon && (React.createElement(MrlTextInputRightIcon, Object.assign({ hasActiveColor: hasActiveColor, setHasActiveColor: setHasActiveColor, value: value }, dynamicIcon)))),
-        displayCounter && (React.createElement("span", { className: classnames(styles['MrlForm-counter'], 'MrlForm-counter') },
-            React.createElement("span", { className: classnames('MrlCounter', {
-                    'MrlCounter-overMaxLength': valueExceedsDataMaxLength
-                }), "aria-hidden": "true", id: `${inputId}-visible-counter` },
-                (value === null || value === void 0 ? void 0 : value.length) || 0,
-                "/",
-                counterDisplayValue),
-            React.createElement("p", { style: { display: 'none' }, id: `${inputId}-counter` }, `${counterDisplayValue - ((value === null || value === void 0 ? void 0 : value.length) || 0)} of ${counterDisplayValue} characters remaining`)))));
-});