@redsift/design-system 11.5.0 → 11.6.0-alpha.0

package/_internal/TextArea.js

@@ -0,0 +1,444 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { useState, forwardRef, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { T as Theme, B as ButtonsColorPalette } from './colors.js';
+import { u as useFocusRing, a as useFocusWithin } from './useFocusRing.js';
+import { u as useTheme } from './useTheme.js';
+import { u as useId } from './useId.js';
+import { a as Icon } from './Icon2.js';
+import { F as Flexbox } from './Flexbox2.js';
+
+/**
+ * Hook that allows to calculate the number of rows needed for a text area.
+ * @param minimumRows Minimum number of rows that we want to display.
+ * @return rows to be used and a callback to recalculate
+ */
+const useComputeNumberOfRows = minimumRows => {
+  const [rows, setRows] = useState(minimumRows);
+  const recompute = target => {
+    /**
+     * HEAD's UP! This part is a little bit tricky. The idea here is to only
+     * display the necessary rows on the textarea. In order to dynamically adjust
+     * the height on that field, we need to:
+     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.
+     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content
+     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height
+     * by the line height.
+     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to
+     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)
+     * when we will not see the update and the rows will be resized to the minimum.
+     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows
+     * on the state in order to allow React to re-render. Therefore, we save them using `useState`
+     */
+    // eslint-disable-next-line no-param-reassign
+    target.rows = minimumRows;
+    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);
+    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;
+    // eslint-disable-next-line no-param-reassign
+    target.rows = currentRows;
+    setRows(currentRows);
+  };
+  return {
+    recomputeNumberOfRows: recompute,
+    rows
+  };
+};
+
+/**
+ * Component variant.
+ */
+const TextAreaVariant = {
+  default: 'default',
+  underline: 'underline'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledTextArea = styled.div`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  ${baseStyling}
+
+  border: 0;
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: top;
+
+  ${_ref => {
+  let {
+    label,
+    $hasLeftIcon,
+    $hasContent,
+    $isFocused,
+    $isDisabled,
+    $isInvalid,
+    $color,
+    $isGradient,
+    $theme,
+    $variant
+  } = _ref;
+  return css`
+    ${$isDisabled ? css`
+          pointer-events: none;
+        ` : ''}
+
+    .redsift-text-area__label {
+      font-family: var(--redsift-typography-input-text-font-family);
+      font-size: var(--redsift-typography-input-text-font-size);
+      font-weight: var(--redsift-typography-input-text-font-weight);
+      line-height: var(--redsift-typography-input-text-line-height);
+      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};
+      overflow: hidden;
+      pointer-events: none;
+      position: absolute;
+      text-overflow: ellipsis;
+      top: ${$hasContent ? '-8px' : '-6px'};
+      transform-origin: top left;
+      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      white-space: nowrap;
+      z-index: 1;
+
+      ${!$hasContent ? css`
+            max-width: calc(100% - 24px);
+            transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 16px) scale(1);
+          ` : css`
+            max-width: calc(133% - 32px);
+            transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);
+          `}
+
+      ${!$isGradient ? css`
+            color: var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
+            );
+          ` : css`
+            background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});
+            ${$variant !== TextAreaVariant.underline ? css`
+                  padding-right: 7px;
+                  padding-left: 5px;
+                ` : ''}
+            > span {
+              background: var(
+                --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
+              );
+              background-clip: text;
+              color: transparent;
+            }
+          `}
+    }
+
+    .redsift-text-area__text-area-wrapper {
+      align-items: flex-start;
+      box-sizing: border-box;
+      cursor: text;
+      display: inline-flex;
+      min-height: 42px;
+      position: relative;
+      width: 100%;
+    }
+
+    .redsift-text-area-text-area-wrapper__text-area {
+      textarea {
+        background: transparent;
+        display: block;
+        border: none;
+        outline: none;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        box-sizing: content-box;
+        font-family: var(--redsift-typography-input-text-font-family);
+        font-size: 14px;
+        font-weight: var(--redsift-typography-input-text-font-weight);
+        line-height: var(--redsift-typography-input-text-line-height);
+        resize: none;
+
+        ${$isDisabled ? css`
+              color: var(--redsift-color-neutral-light-grey);
+            ` : css`
+              color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+            `}
+      }
+
+      flex: 1 1 auto;
+      padding-bottom: 9px;
+      ${$variant !== TextAreaVariant.underline && !$hasLeftIcon ? css`
+            padding-left: 16px;
+          ` : ''}
+      padding-top: ${label ? '10px' : '9px'};
+      padding-right: 8px;
+    }
+
+    .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area::placeholder {
+      color: var(--redsift-color-neutral-mid-grey);
+    }
+
+    .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area:focus {
+      outline: 0;
+    }
+
+    .redsift-text-area-text-area-wrapper__fieldset {
+      border-style: solid;
+      bottom: 0;
+      left: 1px;
+      margin: 0;
+      min-width: 0%;
+      overflow: hidden;
+      padding: 0 8px;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      text-align: left;
+      top: -5px;
+
+      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid ? css`
+            ${$variant === TextAreaVariant.underline ? css`
+                  border-bottom-width: 2px;
+                ` : css`
+                  border-radius: 4px;
+                  border-width: 2px;
+                `}
+            border-color: var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
+            );
+          ` : css`
+            ${$variant === TextAreaVariant.underline ? css`
+                  border-bottom: 2px solid transparent;
+                ` : css`
+                  border: 2px solid transparent;
+                  border-radius: 4px;
+                `}
+            background: transparent;
+            background-clip: padding-box, border-box;
+            background-origin: border-box;
+            background-image: linear-gradient(
+                90deg,
+                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),
+                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})
+              ),
+              var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);
+          `}
+    }
+
+    .redsift-text-area-text-area-wrapper-fieldset__legend {
+      display: block;
+      float: unset;
+      font-size: 11px;
+      height: 11px;
+      overflow: hidden;
+      padding: 0;
+      visibility: hidden;
+      white-space: nowrap;
+      width: auto;
+
+      ${!$hasContent ? css`
+            max-width: 0.01px;
+            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+          ` : css`
+            max-width: 100%;
+            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+          `}
+    }
+
+    .redsift-text-area-text-area-wrapper-fieldset__legend > span {
+      display: inline-block;
+      opacity: 0;
+      padding-left: 5px;
+      padding-right: 5px;
+      visibility: visible;
+    }
+
+    .redsift-text-area-text-area-wrapper__toolbar {
+      position: relative;
+      top: 7px;
+    }
+
+    .redsift-icon-button {
+      padding: 2px;
+      height: 28px;
+      width: 28px;
+    }
+
+    ${$variant !== TextAreaVariant.underline ? css`
+          .redsift-icon.left {
+            padding-left: 12px;
+            padding-right: 8px;
+            line-height: 28px;
+            top: 10px;
+          }
+
+          .redsift-text-area-text-area-wrapper__toolbar {
+            padding-right: 8px;
+          }
+        ` : css`
+          .redsift-icon.left {
+            padding-right: 8px;
+            top: 10px;
+          }
+        `}
+  `;
+}}
+`;
+
+const _excluded = ["aria-label", "aria-labelledby", "after", "autoFocus", "className", "color", "defaultValue", "forceColor", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "minimumRows", "name", "onBlur", "onChange", "onFocus", "placeholder", "textareaProps", "textareaRef", "theme", "value", "variant", "width"];
+const COMPONENT_NAME = 'TextArea';
+const CLASSNAME = 'redsift-text-area';
+
+/**
+ * The TextArea component.
+ * Can be used as controlled or uncontrolled.
+ */
+const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      after,
+      autoFocus,
+      className,
+      color: propsColor,
+      defaultValue = '',
+      forceColor,
+      isColored = true,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      leftIcon,
+      minimumRows,
+      name,
+      onBlur: onBlurProps,
+      onChange,
+      onFocus: onFocusProps,
+      placeholder,
+      textareaProps,
+      textareaRef: propsTextareaRef,
+      theme: propsTheme,
+      value: propsValue,
+      variant = TextAreaVariant.default,
+      width = '100%'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : isColored ? 'primary' : 'grey';
+  const isGradient = color === ButtonsColorPalette.radar;
+  const _textareaRef = React__default.useRef(null);
+  const textareaRef = propsTextareaRef !== null && propsTextareaRef !== void 0 ? propsTextareaRef : _textareaRef;
+  const {
+    isFocusVisible,
+    isFocused,
+    focusProps: {
+      onFocus,
+      onBlur
+    }
+  } = useFocusRing({
+    autoFocus
+  });
+  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));
+  const {
+    focusWithinProps
+  } = useFocusWithin({
+    onFocusWithinChange: isFocusWithin => setFocusWithin(isFocusWithin)
+  });
+  const [value, setValue] = useState(defaultValue);
+  const isControlled = propsValue !== null && propsValue !== undefined;
+  const [labelId] = useId();
+  warnIfNoAccessibleLabelFound(props, [label], 'TextArea');
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (onChange) {
+      onChange(event.target.value, name, event);
+    } else {
+      setValue(event.target.value);
+    }
+  }, [onChange]);
+  const {
+    rows,
+    recomputeNumberOfRows
+  } = useComputeNumberOfRows(minimumRows || 4);
+  useEffect(() => {
+    // Recompute the number of rows for the first rendering
+    if (textareaRef && textareaRef.current) {
+      recomputeNumberOfRows(textareaRef.current);
+    }
+  }, [textareaRef, recomputeNumberOfRows, value]);
+  return /*#__PURE__*/React__default.createElement(StyledTextArea, _extends({
+    width: width
+  }, focusWithinProps, forwardedProps, {
+    $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder),
+    $hasLeftIcon: Boolean(leftIcon),
+    $color: color,
+    $isGradient: isGradient,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(isControlled ? propsValue : value),
+    $isRequired: isRequired,
+    $isFocused: Boolean(isFocused || forceColor),
+    $theme: theme,
+    $variant: variant,
+    className: classNames(TextArea.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("fieldset", {
+    "aria-hidden": "true",
+    className: `${TextArea.className}-text-area-wrapper__fieldset`
+  }, /*#__PURE__*/React__default.createElement("legend", {
+    id: labelId,
+    className: `${TextArea.className}-text-area-wrapper-fieldset__legend`
+  }, label ? /*#__PURE__*/React__default.createElement("span", null, label) : null)), label ? /*#__PURE__*/React__default.createElement("label", {
+    className: `${TextArea.className}__label`
+  }, /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${TextArea.className}__text-area-wrapper`
+  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    color: isDisabled ? 'question' : 'black'
+  }, leftIcon, {
+    "aria-hidden": "true",
+    className: "left"
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${TextArea.className}-text-area-wrapper__text-area`
+  }, /*#__PURE__*/React__default.createElement("textarea", _extends({}, textareaProps, {
+    onBlur: event => {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      onBlurProps === null || onBlurProps === void 0 ? void 0 : onBlurProps(event);
+    },
+    onFocus: event => {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+      onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
+    },
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !(isControlled ? propsValue : value),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby || (label ? labelId : undefined),
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    autoFocus: autoFocus,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    placeholder: placeholder,
+    ref: textareaRef,
+    value: isControlled ? propsValue : value,
+    rows: rows
+  }))), after ? /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${TextArea.className}-text-area-wrapper__toolbar`,
+    gap: "8px"
+  }, typeof after === 'function' ? after(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : after) : null));
+});
+TextArea.className = CLASSNAME;
+TextArea.displayName = COMPONENT_NAME;
+
+export { TextAreaVariant as T, TextArea as a, useComputeNumberOfRows as u };
+//# sourceMappingURL=TextArea.js.map

package/_internal/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../src/hooks/useComputeNumberOfRows.ts","../../src/components/text-area/types.ts","../../src/components/text-area/styles.ts","../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { useState } from 'react';\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nexport const useComputeNumberOfRows = (\n  minimumRows: number\n): {\n  /** number of rows to be used on the text area */\n  rows: number;\n  /**\n   * Callback in order to recalculate the number of rows due to a change on the text area\n   */\n  recomputeNumberOfRows(target: Element): void;\n} => {\n  const [rows, setRows] = useState(minimumRows);\n\n  const recompute = (target: Element) => {\n    /**\n     * HEAD's UP! This part is a little bit tricky. The idea here is to only\n     * display the necessary rows on the textarea. In order to dynamically adjust\n     * the height on that field, we need to:\n     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n     * by the line height.\n     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n     * when we will not see the update and the rows will be resized to the minimum.\n     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n     * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n     */\n    // eslint-disable-next-line no-param-reassign\n    (target as HTMLTextAreaElement).rows = minimumRows;\n    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n    // eslint-disable-next-line no-param-reassign\n    (target as HTMLTextAreaElement).rows = currentRows;\n\n    setRows(currentRows);\n  };\n\n  return {\n    recomputeNumberOfRows: recompute,\n    rows,\n  };\n};\n","import { ChangeEvent, ComponentProps, MutableRefObject } from 'react';\nimport { ValueOf } from '../../types';\nimport { StyledTextFieldProps, TextFieldProps } from '../text-field';\n\n/**\n * Component variant.\n */\nexport const TextAreaVariant = {\n  default: 'default',\n  underline: 'underline',\n} as const;\nexport type TextAreaVariant = ValueOf<typeof TextAreaVariant>;\n\n/**\n * Component props.\n */\nexport interface TextAreaProps\n  extends Omit<\n    TextFieldProps,\n    'onChange' | 'inputRef' | 'inputProps' | 'pills' | 'internal' | 'hasClearButton' | 'onClear'\n  > {\n  /** Custom ref object to pass to the textarea element. */\n  textareaRef?: MutableRefObject<HTMLTextAreaElement>;\n  /** Custom props to pass to the textarea element. */\n  textareaProps?: ComponentProps<'textarea'>;\n  /** Method to handle component change. */\n  onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLTextAreaElement>): void;\n  /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n  minimumRows?: number;\n}\n\nexport type StyledTextAreaProps = StyledTextFieldProps;\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTextAreaProps, TextAreaVariant } from './types';\nimport { Theme } from '@redsift/design-system/types';\n\n/**\n * Component style.\n */\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  ${baseStyling}\n\n  border: 0;\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: top;\n\n  ${({\n    label,\n    $hasLeftIcon,\n    $hasContent,\n    $isFocused,\n    $isDisabled,\n    $isInvalid,\n    $color,\n    $isGradient,\n    $theme,\n    $variant,\n  }) => css`\n    ${$isDisabled\n      ? css`\n          pointer-events: none;\n        `\n      : ''}\n\n    .redsift-text-area__label {\n      font-family: var(--redsift-typography-input-text-font-family);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      text-overflow: ellipsis;\n      top: ${$hasContent ? '-8px' : '-6px'};\n      transform-origin: top left;\n      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n      white-space: nowrap;\n      z-index: 1;\n\n      ${!$hasContent\n        ? css`\n            max-width: calc(100% - 24px);\n            transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n          `\n        : css`\n            max-width: calc(133% - 32px);\n            transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);\n          `}\n\n      ${!$isGradient\n        ? css`\n            color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                  ? 'error'\n                  : $isFocused\n                  ? $color\n                  : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});\n            ${$variant !== TextAreaVariant.underline\n              ? css`\n                  padding-right: 7px;\n                  padding-left: 5px;\n                `\n              : ''}\n            > span {\n              background: var(\n                --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                    ? 'error'\n                    : $isFocused\n                    ? $color\n                    : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n              );\n              background-clip: text;\n              color: transparent;\n            }\n          `}\n    }\n\n    .redsift-text-area__text-area-wrapper {\n      align-items: flex-start;\n      box-sizing: border-box;\n      cursor: text;\n      display: inline-flex;\n      min-height: 42px;\n      position: relative;\n      width: 100%;\n    }\n\n    .redsift-text-area-text-area-wrapper__text-area {\n      textarea {\n        background: transparent;\n        display: block;\n        border: none;\n        outline: none;\n        width: 100%;\n        padding: 0;\n        margin: 0;\n        box-sizing: content-box;\n        font-family: var(--redsift-typography-input-text-font-family);\n        font-size: 14px;\n        font-weight: var(--redsift-typography-input-text-font-weight);\n        line-height: var(--redsift-typography-input-text-line-height);\n        resize: none;\n\n        ${$isDisabled\n          ? css`\n              color: var(--redsift-color-neutral-light-grey);\n            `\n          : css`\n              color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n            `}\n      }\n\n      flex: 1 1 auto;\n      padding-bottom: 9px;\n      ${$variant !== TextAreaVariant.underline && !$hasLeftIcon\n        ? css`\n            padding-left: 16px;\n          `\n        : ''}\n      padding-top: ${label ? '10px' : '9px'};\n      padding-right: 8px;\n    }\n\n    .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area::placeholder {\n      color: var(--redsift-color-neutral-mid-grey);\n    }\n\n    .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area:focus {\n      outline: 0;\n    }\n\n    .redsift-text-area-text-area-wrapper__fieldset {\n      border-style: solid;\n      bottom: 0;\n      left: 1px;\n      margin: 0;\n      min-width: 0%;\n      overflow: hidden;\n      padding: 0 8px;\n      pointer-events: none;\n      position: absolute;\n      right: 0;\n      text-align: left;\n      top: -5px;\n\n      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid\n        ? css`\n            ${$variant === TextAreaVariant.underline\n              ? css`\n                  border-bottom-width: 2px;\n                `\n              : css`\n                  border-radius: 4px;\n                  border-width: 2px;\n                `}\n            border-color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n              ? 'error'\n              : $isFocused\n              ? $color\n              : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            ${$variant === TextAreaVariant.underline\n              ? css`\n                  border-bottom: 2px solid transparent;\n                `\n              : css`\n                  border: 2px solid transparent;\n                  border-radius: 4px;\n                `}\n            background: transparent;\n            background-clip: padding-box, border-box;\n            background-origin: border-box;\n            background-image: linear-gradient(\n                90deg,\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})\n              ),\n              var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);\n          `}\n    }\n\n    .redsift-text-area-text-area-wrapper-fieldset__legend {\n      display: block;\n      float: unset;\n      font-size: 11px;\n      height: 11px;\n      overflow: hidden;\n      padding: 0;\n      visibility: hidden;\n      white-space: nowrap;\n      width: auto;\n\n      ${!$hasContent\n        ? css`\n            max-width: 0.01px;\n            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n          `\n        : css`\n            max-width: 100%;\n            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n          `}\n    }\n\n    .redsift-text-area-text-area-wrapper-fieldset__legend > span {\n      display: inline-block;\n      opacity: 0;\n      padding-left: 5px;\n      padding-right: 5px;\n      visibility: visible;\n    }\n\n    .redsift-text-area-text-area-wrapper__toolbar {\n      position: relative;\n      top: 7px;\n    }\n\n    .redsift-icon-button {\n      padding: 2px;\n      height: 28px;\n      width: 28px;\n    }\n\n    ${$variant !== TextAreaVariant.underline\n      ? css`\n          .redsift-icon.left {\n            padding-left: 12px;\n            padding-right: 8px;\n            line-height: 28px;\n            top: 10px;\n          }\n\n          .redsift-text-area-text-area-wrapper__toolbar {\n            padding-right: 8px;\n          }\n        `\n      : css`\n          .redsift-icon.left {\n            padding-right: 8px;\n            top: 10px;\n          }\n        `}\n  `}\n`;\n","import React, {\n  ComponentProps,\n  FocusEvent,\n  forwardRef,\n  MutableRefObject,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { useFocusWithin } from '../../react-aria/react-aria/interactions';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { TextAreaProps, TextAreaVariant } from './types';\nimport { StyledTextArea } from './styles';\nimport { Icon } from '../../components/icon';\nimport { useTheme } from '../theme';\nimport { useComputeNumberOfRows } from '../../hooks';\nimport { useId } from '../../utils';\nimport { Flexbox } from '../flexbox';\n\nconst COMPONENT_NAME = 'TextArea';\nconst CLASSNAME = 'redsift-text-area';\n\n/**\n * The TextArea component.\n * Can be used as controlled or uncontrolled.\n */\nexport const TextArea: Comp<TextAreaProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    after,\n    autoFocus,\n    className,\n    color: propsColor,\n    defaultValue = '',\n    forceColor,\n    isColored = true,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    leftIcon,\n    minimumRows,\n    name,\n    onBlur: onBlurProps,\n    onChange,\n    onFocus: onFocusProps,\n    placeholder,\n    textareaProps,\n    textareaRef: propsTextareaRef,\n    theme: propsTheme,\n    value: propsValue,\n    variant = TextAreaVariant.default,\n    width = '100%',\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : isColored ? 'primary' : 'grey';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  const _textareaRef = React.useRef(null);\n  const textareaRef = propsTextareaRef ?? _textareaRef;\n\n  const {\n    isFocusVisible,\n    isFocused,\n    focusProps: { onFocus, onBlur },\n  } = useFocusRing({\n    autoFocus,\n  });\n  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n  });\n\n  const [value, setValue] = useState(defaultValue);\n  const isControlled = propsValue !== null && propsValue !== undefined;\n\n  const [labelId] = useId();\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [label], 'TextArea');\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (onChange) {\n        onChange(event.target.value, name, event);\n      } else {\n        setValue(event.target.value);\n      }\n    },\n    [onChange]\n  );\n\n  const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(minimumRows || 4);\n  useEffect(() => {\n    // Recompute the number of rows for the first rendering\n    if (textareaRef && textareaRef.current) {\n      recomputeNumberOfRows(textareaRef.current);\n    }\n  }, [textareaRef, recomputeNumberOfRows, value]);\n\n  return (\n    <StyledTextArea\n      width={width}\n      {...focusWithinProps}\n      {...forwardedProps}\n      $hasContent={isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder)}\n      $hasLeftIcon={Boolean(leftIcon)}\n      $color={color}\n      $isGradient={isGradient}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n      $isRequired={isRequired}\n      $isFocused={Boolean(isFocused || forceColor)}\n      $theme={theme}\n      $variant={variant}\n      className={classNames(TextArea.className, className)}\n      ref={ref as MutableRefObject<HTMLDivElement>}\n    >\n      <fieldset aria-hidden=\"true\" className={`${TextArea.className}-text-area-wrapper__fieldset`}>\n        <legend id={labelId} className={`${TextArea.className}-text-area-wrapper-fieldset__legend`}>\n          {label ? <span>{label}</span> : null}\n        </legend>\n      </fieldset>\n      {label ? (\n        <label className={`${TextArea.className}__label`}>\n          <span>{label}</span>\n        </label>\n      ) : null}\n      <div className={`${TextArea.className}__text-area-wrapper`}>\n        {leftIcon ? (\n          <Icon color={isDisabled ? 'question' : 'black'} {...leftIcon} aria-hidden=\"true\" className=\"left\" />\n        ) : null}\n        <div className={`${TextArea.className}-text-area-wrapper__text-area`}>\n          <textarea\n            {...textareaProps}\n            onBlur={(event) => {\n              onBlur?.(event);\n              onBlurProps?.(event as unknown as FocusEvent<HTMLDivElement, Element>);\n            }}\n            onFocus={(event) => {\n              onFocus?.(event);\n              onFocusProps?.(event as unknown as FocusEvent<HTMLDivElement, Element>);\n            }}\n            aria-disabled={isDisabled}\n            aria-invalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby || (label ? labelId : undefined)}\n            aria-readonly={isReadOnly}\n            aria-required={isRequired}\n            autoFocus={autoFocus}\n            disabled={isDisabled}\n            name={name}\n            onChange={handleChange}\n            placeholder={placeholder}\n            ref={textareaRef as MutableRefObject<HTMLTextAreaElement>}\n            value={isControlled ? propsValue : value}\n            rows={rows}\n          />\n        </div>\n        {after ? (\n          <Flexbox className={`${TextArea.className}-text-area-wrapper__toolbar`} gap=\"8px\">\n            {typeof after === 'function'\n              ? after(\n                  isControlled ? propsValue : value,\n                  isDisabled,\n                  isInvalid || (isRequired && !(isControlled ? propsValue : value)),\n                  isRequired\n                )\n              : after}\n          </Flexbox>\n        ) : null}\n      </div>\n    </StyledTextArea>\n  );\n});\nTextArea.className = CLASSNAME;\nTextArea.displayName = COMPONENT_NAME;\n"],"names":["useComputeNumberOfRows","minimumRows","rows","setRows","useState","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","TextAreaVariant","default","underline","StyledTextArea","styled","div","baseStyling","_ref","label","$hasLeftIcon","$hasContent","$isFocused","$isDisabled","$isInvalid","$color","$isGradient","$theme","$variant","css","Theme","dark","COMPONENT_NAME","CLASSNAME","TextArea","forwardRef","props","ref","ariaLabel","ariaLabelledby","after","autoFocus","className","color","propsColor","defaultValue","forceColor","isColored","isDisabled","isInvalid","isReadOnly","isRequired","leftIcon","name","onBlur","onBlurProps","onChange","onFocus","onFocusProps","placeholder","textareaProps","textareaRef","propsTextareaRef","theme","propsTheme","value","propsValue","variant","width","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","isGradient","radar","_textareaRef","React","useRef","isFocusVisible","isFocused","focusProps","useFocusRing","isFocusWithin","setFocusWithin","Boolean","focusWithinProps","useFocusWithin","onFocusWithinChange","setValue","isControlled","undefined","labelId","useId","warnIfNoAccessibleLabelFound","handleChange","useCallback","event","useEffect","current","createElement","_extends","$isFocusVisible","$isRequired","classNames","id","Icon","disabled","Flexbox","gap","displayName"],"mappings":";;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACA;AACaA,MAAAA,sBAAsB,GACjCC,WAAmB,IAQhB;EACH,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAACH,WAAW,CAAC,CAAA;EAE7C,MAAMI,SAAS,GAAIC,MAAe,IAAK;AACrC;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;IACCA,MAAM,CAAyBJ,IAAI,GAAGD,WAAW,CAAA;IAClD,IAAIM,WAAW,GAAGD,MAAM,CAACE,YAAY,IAAIF,MAAM,CAACG,YAAY,GAAGR,WAAW,CAAC,CAAA;AAC3EM,IAAAA,WAAW,GAAGA,WAAW,IAAIN,WAAW,GAAGM,WAAW,GAAGN,WAAW,CAAA;AACpE;IACCK,MAAM,CAAyBJ,IAAI,GAAGK,WAAW,CAAA;IAElDJ,OAAO,CAACI,WAAW,CAAC,CAAA;GACrB,CAAA;EAED,OAAO;AACLG,IAAAA,qBAAqB,EAAEL,SAAS;AAChCH,IAAAA,IAAAA;GACD,CAAA;AACH;;AC5CA;AACA;AACA;AACO,MAAMS,eAAe,GAAG;AAC7BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAA;AACb,EAAU;;AAGV;AACA;AACA;;ACVA;AACA;AACA;AACO,MAAMC,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IACDC,KAAK;IACLC,YAAY;IACZC,WAAW;IACXC,UAAU;IACVC,WAAW;IACXC,UAAU;IACVC,MAAM;IACNC,WAAW;IACXC,MAAM;AACNC,IAAAA,QAAAA;AACF,GAAC,GAAAV,IAAA,CAAA;AAAA,EAAA,OAAKW,GAAI,CAAA;AACZ,IAAMN,EAAAA,WAAW,GACTM,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAG,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA,YAAA,EAAcT,YAAY,IAAI,CAACC,WAAW,GAAG,MAAM,GAAG,GAAI,CAAA;AAC1D;AACA;AACA;AACA;AACA,WAAA,EAAaA,WAAW,GAAG,MAAM,GAAG,MAAO,CAAA;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACA,WAAW,GACVQ,GAAI,CAAA;AACd;AACA,iCAAmCD,EAAAA,QAAQ,KAAKjB,eAAe,CAACE,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC3F,UAAA,CAAW,GACDgB,GAAI,CAAA;AACd;AACA,iCAAmCD,EAAAA,QAAQ,KAAKjB,eAAe,CAACE,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC3F,UAAY,CAAA,CAAA;AACZ;AACA,MAAQ,EAAA,CAACa,WAAW,GACVG,GAAI,CAAA;AACd;AACA,8BAAA,EAAgCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACpE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AACxE;AACA,UAAA,CAAW,GACDM,GAAI,CAAA;AACd,0DAA4DF,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC5G,YAAA,EAAcH,QAAQ,KAAKjB,eAAe,CAACE,SAAS,GACpCgB,GAAI,CAAA;AACpB;AACA;AACA,gBAAA,CAAiB,GACD,EAAG,CAAA;AACnB;AACA;AACA,gCAAA,EAAkCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACpE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AAC1E;AACA;AACA;AACA;AACA,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAUA,EAAAA,WAAW,GACTM,GAAI,CAAA;AAChB;AACA,YAAA,CAAa,GACDA,GAAI,CAAA;AAChB,iDAAmDF,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACnG,YAAc,CAAA,CAAA;AACd;AACA;AACA;AACA;AACA,MAAQH,EAAAA,QAAQ,KAAKjB,eAAe,CAACE,SAAS,IAAI,CAACO,YAAY,GACrDS,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACD,EAAG,CAAA;AACb,mBAAA,EAAqBV,KAAK,GAAG,MAAM,GAAG,KAAM,CAAA;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACO,WAAW,IAAIH,WAAW,IAAI,CAACD,UAAU,IAAIE,UAAU,GACtDK,GAAI,CAAA;AACd,YAAA,EAAcD,QAAQ,KAAKjB,eAAe,CAACE,SAAS,GACpCgB,GAAI,CAAA;AACpB;AACA,gBAAA,CAAiB,GACDA,GAAI,CAAA;AACpB;AACA;AACA,gBAAkB,CAAA,CAAA;AAClB;AACA,8BAAA,EAAgCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACxE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AACpE;AACA,UAAA,CAAW,GACDM,GAAI,CAAA;AACd,YAAA,EAAcD,QAAQ,KAAKjB,eAAe,CAACE,SAAS,GACpCgB,GAAI,CAAA;AACpB;AACA,gBAAA,CAAiB,GACDA,GAAI,CAAA;AACpB;AACA;AACA,gBAAkB,CAAA,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA,4CAA8CF,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC9F,4CAA8CJ,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC9F;AACA,kCAAoCJ,EAAAA,MAAO,wCAAuCF,MAAO,CAAA;AACzF,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACJ,WAAW,GACVQ,GAAI,CAAA;AACd;AACA;AACA,UAAA,CAAW,GACDA,GAAI,CAAA;AACd;AACA;AACA,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMD,QAAQ,KAAKjB,eAAe,CAACE,SAAS,GACpCgB,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA,QAAU,CAAA,CAAA;AACV,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ,CAAC;;;ACrPD,MAAMG,cAAc,GAAG,UAAU,CAAA;AACjC,MAAMC,SAAS,GAAG,mBAAmB,CAAA;;AAErC;AACA;AACA;AACA;AACO,MAAMC,QAA6C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;AACJ,MAAA,YAAY,EAAEC,SAAS;AACvB,MAAA,iBAAiB,EAAEC,cAAc;MACjCC,KAAK;MACLC,SAAS;MACTC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,YAAY,GAAG,EAAE;MACjBC,UAAU;AACVC,MAAAA,SAAS,GAAG,IAAI;MAChBC,UAAU;MACVC,SAAS;MACTC,UAAU;MACVC,UAAU;MACVhC,KAAK;MACLiC,QAAQ;MACRnD,WAAW;MACXoD,IAAI;AACJC,MAAAA,MAAM,EAAEC,WAAW;MACnBC,QAAQ;AACRC,MAAAA,OAAO,EAAEC,YAAY;MACrBC,WAAW;MACXC,aAAa;AACbC,MAAAA,WAAW,EAAEC,gBAAgB;AAC7BC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,OAAO,GAAGxD,eAAe,CAACC,OAAO;AACjCwD,MAAAA,KAAK,GAAG,MAAA;AAEV,KAAC,GAAGhC,KAAK;AADJiC,IAAAA,cAAc,GAAAC,wBAAA,CACflC,KAAK,EAAAmC,SAAA,CAAA,CAAA;AAET,EAAA,MAAMR,KAAK,GAAGS,QAAQ,CAACR,UAAU,CAAC,CAAA;EAClC,MAAMrB,KAAK,GAAG8B,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAAChC,UAAW,CAAC,GAAGA,UAAU,GAAGG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AACpH,EAAA,MAAM8B,UAAU,GAAGlC,KAAK,KAAKgC,mBAAmB,CAACG,KAAK,CAAA;AAEtD,EAAA,MAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAAC,IAAI,CAAC,CAAA;EACvC,MAAMpB,WAAW,GAAGC,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAhBA,KAAAA,CAAAA,GAAAA,gBAAgB,GAAIiB,YAAY,CAAA;EAEpD,MAAM;IACJG,cAAc;IACdC,SAAS;AACTC,IAAAA,UAAU,EAAE;MAAE3B,OAAO;AAAEH,MAAAA,MAAAA;AAAO,KAAA;GAC/B,GAAG+B,YAAY,CAAC;AACf5C,IAAAA,SAAAA;AACF,GAAC,CAAC,CAAA;AACF,EAAA,MAAM,CAAC6C,aAAa,EAAEC,cAAc,CAAC,GAAGnF,QAAQ,CAACoF,OAAO,CAAC/C,SAAS,CAAC,CAAC,CAAA;EACpE,MAAM;AAAEgD,IAAAA,gBAAAA;GAAkB,GAAGC,cAAc,CAAC;AAC1CC,IAAAA,mBAAmB,EAAGL,aAAa,IAAKC,cAAc,CAACD,aAAa,CAAA;AACtE,GAAC,CAAC,CAAA;EAEF,MAAM,CAACrB,KAAK,EAAE2B,QAAQ,CAAC,GAAGxF,QAAQ,CAACyC,YAAY,CAAC,CAAA;EAChD,MAAMgD,YAAY,GAAG3B,UAAU,KAAK,IAAI,IAAIA,UAAU,KAAK4B,SAAS,CAAA;AAEpE,EAAA,MAAM,CAACC,OAAO,CAAC,GAAGC,KAAK,EAAE,CAAA;EAEzBC,4BAA4B,CAAC7D,KAAK,EAA6B,CAACjB,KAAK,CAAC,EAAE,UAAU,CAAC,CAAA;AAEnF,EAAA,MAAM+E,YAAY,GAAGC,WAAW,CAC7BC,KAA6C,IAAK;IACjD,IAAIpD,UAAU,IAAIE,UAAU,EAAE;AAC5B,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAIM,QAAQ,EAAE;MACZA,QAAQ,CAAC4C,KAAK,CAAC9F,MAAM,CAAC2D,KAAK,EAAEZ,IAAI,EAAE+C,KAAK,CAAC,CAAA;AAC3C,KAAC,MAAM;AACLR,MAAAA,QAAQ,CAACQ,KAAK,CAAC9F,MAAM,CAAC2D,KAAK,CAAC,CAAA;AAC9B,KAAA;AACF,GAAC,EACD,CAACT,QAAQ,CACX,CAAC,CAAA;EAED,MAAM;IAAEtD,IAAI;AAAEQ,IAAAA,qBAAAA;AAAsB,GAAC,GAAGV,sBAAsB,CAACC,WAAW,IAAI,CAAC,CAAC,CAAA;AAChFoG,EAAAA,SAAS,CAAC,MAAM;AACd;AACA,IAAA,IAAIxC,WAAW,IAAIA,WAAW,CAACyC,OAAO,EAAE;AACtC5F,MAAAA,qBAAqB,CAACmD,WAAW,CAACyC,OAAO,CAAC,CAAA;AAC5C,KAAA;GACD,EAAE,CAACzC,WAAW,EAAEnD,qBAAqB,EAAEuD,KAAK,CAAC,CAAC,CAAA;AAE/C,EAAA,oBACEe,cAAA,CAAAuB,aAAA,CAACzF,cAAc,EAAA0F,QAAA,CAAA;AACbpC,IAAAA,KAAK,EAAEA,KAAAA;GACHqB,EAAAA,gBAAgB,EAChBpB,cAAc,EAAA;AAClBhD,IAAAA,WAAW,EAAEiE,aAAa,IAAIE,OAAO,CAACK,YAAY,GAAG3B,UAAU,GAAGD,KAAK,CAAC,IAAIuB,OAAO,CAAC7B,WAAW,CAAE;AACjGvC,IAAAA,YAAY,EAAEoE,OAAO,CAACpC,QAAQ,CAAE;AAChC3B,IAAAA,MAAM,EAAEkB,KAAM;AACdjB,IAAAA,WAAW,EAAEmD,UAAW;AACxBtD,IAAAA,WAAW,EAAEyB,UAAW;AACxByD,IAAAA,eAAe,EAAEvB,cAAe;IAChC1D,UAAU,EAAEyB,SAAS,IAAKE,UAAU,IAAI,EAAE0C,YAAY,GAAG3B,UAAU,GAAGD,KAAK,CAAG;AAC9EyC,IAAAA,WAAW,EAAEvD,UAAW;AACxB7B,IAAAA,UAAU,EAAEkE,OAAO,CAACL,SAAS,IAAIrC,UAAU,CAAE;AAC7CnB,IAAAA,MAAM,EAAEoC,KAAM;AACdnC,IAAAA,QAAQ,EAAEuC,OAAQ;IAClBzB,SAAS,EAAEiE,UAAU,CAACzE,QAAQ,CAACQ,SAAS,EAAEA,SAAS,CAAE;AACrDL,IAAAA,GAAG,EAAEA,GAAAA;GAEL2C,CAAAA,eAAAA,cAAA,CAAAuB,aAAA,CAAA,UAAA,EAAA;AAAU,IAAA,aAAA,EAAY,MAAM;AAAC7D,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAAA,4BAAA,CAAA;GAC5DsC,eAAAA,cAAA,CAAAuB,aAAA,CAAA,QAAA,EAAA;AAAQK,IAAAA,EAAE,EAAEb,OAAQ;AAACrD,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAAA,mCAAA,CAAA;AAAqC,GAAA,EACxFvB,KAAK,gBAAG6D,cAAA,CAAAuB,aAAA,eAAOpF,KAAY,CAAC,GAAG,IAC1B,CACA,CAAC,EACVA,KAAK,gBACJ6D,cAAA,CAAAuB,aAAA,CAAA,OAAA,EAAA;AAAO7D,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAAA,OAAA,CAAA;AAAS,GAAA,eAC/CsC,cAAA,CAAAuB,aAAA,CAAA,MAAA,EAAA,IAAA,EAAOpF,KAAY,CACd,CAAC,GACN,IAAI,eACR6D,cAAA,CAAAuB,aAAA,CAAA,KAAA,EAAA;AAAK7D,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAAA,mBAAA,CAAA;GACnCU,EAAAA,QAAQ,gBACP4B,cAAA,CAAAuB,aAAA,CAACM,IAAI,EAAAL,QAAA,CAAA;AAAC7D,IAAAA,KAAK,EAAEK,UAAU,GAAG,UAAU,GAAG,OAAA;AAAQ,GAAA,EAAKI,QAAQ,EAAA;AAAE,IAAA,aAAA,EAAY,MAAM;AAACV,IAAAA,SAAS,EAAC,MAAA;AAAM,GAAA,CAAE,CAAC,GAClG,IAAI,eACRsC,cAAA,CAAAuB,aAAA,CAAA,KAAA,EAAA;AAAK7D,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAAA,6BAAA,CAAA;AAA+B,GAAA,eACnEsC,cAAA,CAAAuB,aAAA,CAAAC,UAAAA,EAAAA,QAAA,KACM5C,aAAa,EAAA;IACjBN,MAAM,EAAG8C,KAAK,IAAK;AACjB9C,MAAAA,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAG8C,KAAK,CAAC,CAAA;AACf7C,MAAAA,WAAW,aAAXA,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAXA,WAAW,CAAG6C,KAAuD,CAAC,CAAA;KACtE;IACF3C,OAAO,EAAG2C,KAAK,IAAK;AAClB3C,MAAAA,OAAO,aAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAG2C,KAAK,CAAC,CAAA;AAChB1C,MAAAA,YAAY,aAAZA,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,YAAY,CAAG0C,KAAuD,CAAC,CAAA;KACvE;AACF,IAAA,eAAA,EAAepD,UAAW;IAC1B,cAAcC,EAAAA,SAAS,IAAKE,UAAU,IAAI,EAAE0C,YAAY,GAAG3B,UAAU,GAAGD,KAAK,CAAG;AAChF,IAAA,YAAA,EAAY3B,SAAU;AACtB,IAAA,iBAAA,EAAiBC,cAAc,KAAKpB,KAAK,GAAG4E,OAAO,GAAGD,SAAS,CAAE;AACjE,IAAA,eAAA,EAAe5C,UAAW;AAC1B,IAAA,eAAA,EAAeC,UAAW;AAC1BV,IAAAA,SAAS,EAAEA,SAAU;AACrBqE,IAAAA,QAAQ,EAAE9D,UAAW;AACrBK,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,QAAQ,EAAE0C,YAAa;AACvBvC,IAAAA,WAAW,EAAEA,WAAY;AACzBtB,IAAAA,GAAG,EAAEwB,WAAqD;AAC1DI,IAAAA,KAAK,EAAE4B,YAAY,GAAG3B,UAAU,GAAGD,KAAM;AACzC/D,IAAAA,IAAI,EAAEA,IAAAA;GACP,CAAA,CACE,CAAC,EACLsC,KAAK,gBACJwC,cAAA,CAAAuB,aAAA,CAACQ,OAAO,EAAA;AAACrE,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAA6B,2BAAA,CAAA;AAACsE,IAAAA,GAAG,EAAC,KAAA;AAAK,GAAA,EAC9E,OAAOxE,KAAK,KAAK,UAAU,GACxBA,KAAK,CACHqD,YAAY,GAAG3B,UAAU,GAAGD,KAAK,EACjCjB,UAAU,EACVC,SAAS,IAAKE,UAAU,IAAI,EAAE0C,YAAY,GAAG3B,UAAU,GAAGD,KAAK,CAAE,EACjEd,UACF,CAAC,GACDX,KACG,CAAC,GACR,IACD,CACS,CAAC,CAAA;AAErB,CAAC,EAAC;AACFN,QAAQ,CAACQ,SAAS,GAAGT,SAAS,CAAA;AAC9BC,QAAQ,CAAC+E,WAAW,GAAGjF,cAAc;;;;"}