@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.981

package/lib/cjs/components/tag-input/TagInput.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _uuid = require("uuid");
+var _Badge = _interopRequireDefault(require("../badge/Badge"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _TagInput = require("./TagInput.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TagInput = ({
+  placeholder,
+  tags,
+  onRemove,
+  onAdd
+}) => {
+  const [internalTags, setInternalTags] = (0, _react.useState)();
+  const [currentValue, setCurrentValue] = (0, _react.useState)('');
+  const [selectedId, setSelectedId] = (0, _react.useState)();
+  const theme = (0, _styledComponents.useTheme)();
+  (0, _react.useEffect)(() => {
+    if (tags) {
+      setInternalTags(tags);
+    }
+  }, [tags]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter') {
+      setCurrentValue(prevValue => {
+        if (!prevValue) {
+          return '';
+        }
+        setInternalTags(prevTags => {
+          const newTag = {
+            id: (0, _uuid.v4)(),
+            text: prevValue
+          };
+          if (typeof onAdd === 'function') {
+            onAdd(newTag);
+          }
+          return prevTags ? [...prevTags, newTag] : [newTag];
+        });
+        return '';
+      });
+    }
+    if (event.key === 'Backspace' && currentValue === '') {
+      if (!selectedId) {
+        var _internalTags;
+        if (!internalTags) {
+          return;
+        }
+        const newSelectedId = (_internalTags = internalTags[internalTags.length - 1]) === null || _internalTags === void 0 ? void 0 : _internalTags.id;
+        setSelectedId(newSelectedId);
+        return;
+      }
+      setInternalTags(prevState => {
+        var _prevState;
+        if (!prevState) {
+          return prevState;
+        }
+        const removedId = (_prevState = prevState[prevState.length - 1]) === null || _prevState === void 0 ? void 0 : _prevState.id;
+        if (!removedId) {
+          return prevState;
+        }
+        const updatedTags = (prevState ?? []).filter(tag => tag.id !== removedId);
+        if (typeof onRemove === 'function') {
+          onRemove(removedId);
+        }
+        setSelectedId(undefined);
+        return updatedTags;
+      });
+    }
+  }, [currentValue, internalTags, onAdd, onRemove, selectedId]);
+  const handleChange = event => {
+    setCurrentValue(event.target.value);
+    if (event.target.value !== '') {
+      setSelectedId(undefined);
+    }
+  };
+  const handleIconClick = (0, _react.useCallback)(id => {
+    setInternalTags(prevState => {
+      const updatedTags = (prevState ?? []).filter(tag => tag.id !== id);
+      if (typeof onRemove === 'function') {
+        onRemove(id);
+      }
+      return updatedTags;
+    });
+  }, [onRemove]);
+  const content = (0, _react.useMemo)(() => {
+    const items = [];
+    if (!internalTags) {
+      return items;
+    }
+    internalTags.forEach(({
+      text,
+      id
+    }) => {
+      items.push(/*#__PURE__*/_react.default.createElement(_Badge.default, {
+        key: `tag-input-${id}`,
+        backgroundColor: id === selectedId ? theme['206'] ?? undefined : undefined
+      }, /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagWrapper, null, /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagWrapperText, null, text), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icons: ['ts-wrong'],
+        onClick: () => handleIconClick(id)
+      }))));
+    });
+    return items;
+  }, [handleIconClick, internalTags, selectedId, theme]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInput, null, content, /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagInput, {
+    placeholder: tags && tags.length > 0 ? undefined : placeholder,
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
+    value: currentValue
+  })), [content, currentValue, handleKeyDown, placeholder, tags]);
+};
+var _default = exports.default = TagInput;
+//# sourceMappingURL=TagInput.js.map

package/lib/cjs/components/tag-input/TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TagInput","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","theme","useTheme","useEffect","handleKeyDown","useCallback","event","key","prevValue","prevTags","newTag","id","uuidv4","text","_internalTags","newSelectedId","length","prevState","_prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","useMemo","items","forEach","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","StyledTagInput","StyledTagInputTagInput","onKeyDown","onChange","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n    const [internalTags, setInternalTags] = useState<Tag[]>();\n    const [currentValue, setCurrentValue] = useState('');\n    const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (tags) {\n            setInternalTags(tags);\n        }\n    }, [tags]);\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                setCurrentValue((prevValue) => {\n                    if (!prevValue) {\n                        return '';\n                    }\n\n                    setInternalTags((prevTags) => {\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            onAdd(newTag);\n                        }\n\n                        return prevTags ? [...prevTags, newTag] : [newTag];\n                    });\n\n                    return '';\n                });\n            }\n\n            if (event.key === 'Backspace' && currentValue === '') {\n                if (!selectedId) {\n                    if (!internalTags) {\n                        return;\n                    }\n\n                    const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                    setSelectedId(newSelectedId);\n\n                    return;\n                }\n\n                setInternalTags((prevState) => {\n                    if (!prevState) {\n                        return prevState;\n                    }\n\n                    const removedId = prevState[prevState.length - 1]?.id;\n\n                    if (!removedId) {\n                        return prevState;\n                    }\n\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(removedId);\n                    }\n\n                    setSelectedId(undefined);\n\n                    return updatedTags;\n                });\n            }\n        },\n        [currentValue, internalTags, onAdd, onRemove, selectedId],\n    );\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setCurrentValue(event.target.value);\n\n        if (event.target.value !== '') {\n            setSelectedId(undefined);\n        }\n    };\n\n    const handleIconClick = useCallback(\n        (id: string) => {\n            setInternalTags((prevState) => {\n                const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                return updatedTags;\n            });\n        },\n        [onRemove],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!internalTags) {\n            return items;\n        }\n\n        internalTags.forEach(({ text, id }) => {\n            items.push(\n                <Badge\n                    key={`tag-input-${id}`}\n                    backgroundColor={\n                        id === selectedId ? (theme['206'] as string) ?? undefined : undefined\n                    }\n                >\n                    <StyledTagInputTagWrapper>\n                        <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                        <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n                    </StyledTagInputTagWrapper>\n                </Badge>,\n            );\n        });\n\n        return items;\n    }, [handleIconClick, internalTags, selectedId, theme]);\n\n    return useMemo(\n        () => (\n            <StyledTagInput>\n                {content}\n                <StyledTagInputTagInput\n                    placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                    onKeyDown={handleKeyDown}\n                    onChange={handleChange}\n                    value={currentValue}\n                />\n            </StyledTagInput>\n        ),\n        [content, currentValue, handleKeyDown, placeholder, tags],\n    );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/tag-input/TagInput.styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTagInputTagWrapperText = exports.StyledTagInputTagWrapper = exports.StyledTagInputTagInput = exports.StyledTagInput = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledTagInput = exports.StyledTagInput = _styledComponents.default.div`
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 42px;
+    padding: 5px;
+    align-items: center;
+    gap: 6px;
+    background-color: ${({
+  theme
+}) => theme['100']};
+    border: 1px solid rgba(160, 160, 160, 0.3);
+`;
+const StyledTagInputTagWrapper = exports.StyledTagInputTagWrapper = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+`;
+const StyledTagInputTagWrapperText = exports.StyledTagInputTagWrapperText = _styledComponents.default.p`
+    margin: 0;
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 15px;
+`;
+const StyledTagInputTagInput = exports.StyledTagInputTagInput = _styledComponents.default.input`
+    border: none;
+    height: 24px;
+    flex-grow: 1;
+    background-color: transparent;
+    color: ${({
+  theme
+}) => theme.text};
+`;
+//# sourceMappingURL=TagInput.styles.js.map

package/lib/cjs/components/tag-input/TagInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledTagInput","exports","styled","div","theme","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n    display: flex;\n    flex-wrap: wrap;\n    min-height: 42px;\n    padding: 5px;\n    align-items: center;\n    gap: 6px;\n    background-color: ${({ theme }: StyledTagInputProps) => theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 4px;\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n    margin: 0;\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 15px;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n    border: none;\n    height: 24px;\n    flex-grow: 1;\n    background-color: transparent;\n    color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC;AAA2B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACxE;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAGH,yBAAM,CAACC,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAEM,MAAMG,4BAA4B,GAAAL,OAAA,CAAAK,4BAAA,GAAGJ,yBAAM,CAACK,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACO,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEL;AAAmC,CAAC,KAAKA,KAAK,CAACM,IAAI;AACnE,CAAC","ignoreList":[]}

package/lib/cjs/components/text-area/TextArea.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
+var _AreaContextProvider = require("../area-provider/AreaContextProvider");
+var _Input = require("../input/Input.styles");
+var _TextArea = require("./TextArea.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
+  isDisabled,
+  isInvalid,
+  placeholder,
+  value,
+  onChange,
+  onFocus,
+  onKeyDown,
+  rightElement,
+  onBlur,
+  maxHeight = '120px',
+  minHeight = '41px'
+}, ref) => {
+  var _rightElement$props;
+  const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
+  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const textareaRef = (0, _react.useRef)(null);
+  const {
+    browser
+  } = (0, _chaynsApi.getDevice)();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
+  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const adjustTextareaHeight = (0, _react.useCallback)(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
+    }
+  }, [maxHeight]);
+  (0, _react.useImperativeHandle)(ref, () => textareaRef.current);
+
+  /**
+   * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the "textareaRef".
+   * To maintain the functionality while clearing the input, the length need to be greater than -1.
+   */
+  (0, _react.useEffect)(() => {
+    if (typeof value === 'string' && value.length > -1) {
+      adjustTextareaHeight();
+    }
+  }, [adjustTextareaHeight, value]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContentWrapper, {
+    $isInvalid: isInvalid,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContent, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
+    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    disabled: isDisabled,
+    $isInvalid: isInvalid,
+    ref: textareaRef,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    $maxHeight: maxHeight,
+    $minHeight: minHeight,
+    $isOverflowing: isOverflowing,
+    rows: 1
+  }), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
+    $isInvalid: isInvalid
+  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [browser === null || browser === void 0 ? void 0 : browser.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
+});
+TextArea.displayName = 'TextArea';
+var _default = exports.default = TextArea;
+//# sourceMappingURL=TextArea.js.map

package/lib/cjs/components/text-area/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_Input","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TextArea","forwardRef","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","ref","_rightElement$props","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","browser","getDevice","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","useMemo","adjustTextareaHeight","useCallback","current","height","scrollHeight","parseInt","toString","useImperativeHandle","useEffect","length","createElement","StyledTextArea","$isDisabled","StyledTextAreaContentWrapper","$isInvalid","$shouldChangeColor","StyledTextAreaContent","StyledTextAreaInput","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAeA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAO2B,SAAAM,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAiD3B,MAAMW,QAAQ,gBAAG,IAAAC,iBAAU,EACvB,CACI;EACIC,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,YAAY;EACZC,MAAM;EACNC,SAAS,GAAG,OAAO;EACnBC,SAAS,GAAG;AAChB,CAAC,EACDC,GAAG,KACF;EAAA,IAAAC,mBAAA;EACD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEzD,MAAMC,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAsB,IAAI,CAAC;EAErD,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;;EAE/B;EACA,MAAMC,gBAAgB,GAAG,CAAAhB,YAAY,aAAZA,YAAY,gBAAAK,mBAAA,GAAZL,YAAY,CAAEiB,KAAK,cAAAZ,mBAAA,gBAAAA,mBAAA,GAAnBA,mBAAA,CAAqBa,KAAK,cAAAb,mBAAA,uBAA1BA,mBAAA,CAA4Bc,eAAe,MAAKC,SAAS;EAElF,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAC7B,MAAMb,YAAY,CAACY,iBAAiB,IAAI,KAAK,EAC7C,CAACZ,YAAY,CAACY,iBAAiB,CACnC,CAAC;EAED,MAAME,oBAAoB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC3C,IAAIZ,WAAW,CAACa,OAAO,EAAE;MACrBb,WAAW,CAACa,OAAO,CAACP,KAAK,CAACQ,MAAM,GAAG,MAAM;MACzCd,WAAW,CAACa,OAAO,CAACP,KAAK,CAACQ,MAAM,GAAG,GAAGd,WAAW,CAACa,OAAO,CAACE,YAAY,IAAI;MAE1EpB,gBAAgB,CACZK,WAAW,CAACa,OAAO,CAACE,YAAY,GAAGC,QAAQ,CAAC1B,SAAS,CAAC2B,QAAQ,CAAC,CAAC,EAAE,EAAE,CACxE,CAAC;IACL;EACJ,CAAC,EAAE,CAAC3B,SAAS,CAAC,CAAC;EAEf,IAAA4B,0BAAmB,EAAC1B,GAAG,EAAE,MAAMQ,WAAW,CAACa,OAA8B,CAAC;;EAE1E;AACR;AACA;AACA;EACQ,IAAAM,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOnC,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACoC,MAAM,GAAG,CAAC,CAAC,EAAE;MAChDT,oBAAoB,CAAC,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,oBAAoB,EAAE3B,KAAK,CAAC,CAAC;EAEjC,OAAO,IAAA0B,cAAO,EACV,mBACIxD,MAAA,CAAAW,OAAA,CAAAwD,aAAA,CAAC/D,SAAA,CAAAgE,cAAc;IAACC,WAAW,EAAE1C;EAAW,gBACpC3B,MAAA,CAAAW,OAAA,CAAAwD,aAAA,CAAC/D,SAAA,CAAAkE,4BAA4B;IACzBC,UAAU,EAAE3C,SAAU;IACtB4C,kBAAkB,EAAEjB;EAAkB,gBAEtCvD,MAAA,CAAAW,OAAA,CAAAwD,aAAA,CAAC/D,SAAA,CAAAqE,qBAAqB,qBAClBzE,MAAA,CAAAW,OAAA,CAAAwD,aAAA,CAAC/D,SAAA,CAAAsE,mBAAmB;IAChBC,QAAQ,EAAE3B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE4B,IAAK;IACxBC,QAAQ,EAAElD,UAAW;IACrB4C,UAAU,EAAE3C,SAAU;IACtBU,GAAG,EAAEQ,WAAY;IACjBhB,KAAK,EAAEA,KAAM;IACbK,MAAM,EAAEA,MAAO;IACfJ,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrB6C,UAAU,EAAE1C,SAAU;IACtB2C,UAAU,EAAE1C,SAAU;IACtB2C,cAAc,EAAExC,aAAc;IAC9ByC,IAAI,EAAE;EAAE,CACX,CAAC,EACD,CAACnD,KAAK,iBACH9B,MAAA,CAAAW,OAAA,CAAAwD,aAAA,CAAC/D,SAAA,CAAA8E,0BAA0B,qBACvBlF,MAAA,CAAAW,OAAA,CAAAwD,aAAA,CAAC/D,SAAA,CAAA+E,mBAAmB;IAACZ,UAAU,EAAE3C;EAAU,GACtCC,WACgB,CACG,CAEb,CAAC,EACvBK,YAAY,IAAIgB,gBAAgB,IAAIhB,YACX,CAAC,EAC9BA,YAAY,IAAI,CAACgB,gBAAgB,iBAC9BlD,MAAA,CAAAW,OAAA,CAAAwD,aAAA,CAAChE,MAAA,CAAAiF,uBAAuB,QAAElD,YAAsC,CAExD,CACnB,EACD,CACIc,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE4B,IAAI,EACbjD,UAAU,EACVC,SAAS,EACTY,aAAa,EACbJ,SAAS,EACTC,SAAS,EACTF,MAAM,EACNJ,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTJ,WAAW,EACXK,YAAY,EACZqB,iBAAiB,EACjBL,gBAAgB,EAChBpB,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDL,QAAQ,CAAC4D,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA5E,OAAA,GAEnBc,QAAQ","ignoreList":[]}

package/lib/cjs/components/text-area/TextArea.styles.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTextAreaLabelWrapper = exports.StyledTextAreaLabel = exports.StyledTextAreaInput = exports.StyledTextAreaContentWrapper = exports.StyledTextAreaContent = exports.StyledTextArea = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledTextArea = exports.StyledTextArea = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    position: relative;
+`;
+const StyledTextAreaContentWrapper = exports.StyledTextAreaContentWrapper = _styledComponents.default.div`
+    background-color: ${({
+  theme,
+  $shouldChangeColor
+}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
+    border-radius: 3px;
+    border: 1px solid
+        ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};
+    width: 100%;
+    display: flex;
+`;
+const StyledTextAreaContent = exports.StyledTextAreaContent = _styledComponents.default.div`
+    display: flex;
+    width: 100%;
+`;
+const StyledTextAreaInput = exports.StyledTextAreaInput = _styledComponents.default.textarea`
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : theme.text};
+    background: none;
+    border: none;
+    resize: none;
+    overflow-y: ${({
+  $isOverflowing
+}) => $isOverflowing ? 'scroll' : 'hidden'};
+    max-height: ${({
+  $maxHeight
+}) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+    min-height: ${({
+  $minHeight
+}) => typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};
+    width: 100%;
+    padding: 8px 10px;
+    cursor: text;
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+              `}
+`;
+const StyledTextAreaLabelWrapper = exports.StyledTextAreaLabelWrapper = _styledComponents.default.label`
+    left: 10px;
+    top: 12px;
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+    width: calc(100% - 20px);
+    cursor: text;
+`;
+const StyledTextAreaLabel = exports.StyledTextAreaLabel = _styledComponents.default.label`
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};
+    line-height: 1.3;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: text;
+    text-overflow: ellipsis;
+`;
+//# sourceMappingURL=TextArea.styles.js.map

package/lib/cjs/components/text-area/TextArea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n    $isInvalid: TextAreaProps['isInvalid'];\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n    background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border-radius: 3px;\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    width: 100%;\n    display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n    $browser: Browser | 'bot' | null | undefined;\n    $isInvalid: TextAreaProps['isInvalid'];\n    $isOverflowing: boolean;\n    $maxHeight: CSSProperties['maxHeight'];\n    $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    background: none;\n    border: none;\n    resize: none;\n    overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n    max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n        typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n    min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n        typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n    width: 100%;\n    padding: 8px 10px;\n    cursor: text;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledTextAreaInputProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n              `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n    left: 10px;\n    top: 12px;\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    width: calc(100% - 20px);\n    cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n    line-height: 1.3;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: text;\n    text-overflow: ellipsis;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/tooltip/Tooltip.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _tooltip = require("../../utils/tooltip");
+var _Popup = _interopRequireDefault(require("../popup/Popup"));
+var _TooltipItem = _interopRequireDefault(require("./tooltip-item/TooltipItem"));
+var _Tooltip = require("./Tooltip.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Tooltip = ({
+  item,
+  children,
+  container,
+  isDisabled,
+  shouldHideOnChildrenLeave,
+  yOffset,
+  itemWidth,
+  shouldUseChildrenWidth = true
+}) => {
+  const tooltipRef = (0, _react.useRef)(null);
+  const content = (0, _react.useMemo)(() => {
+    if (/*#__PURE__*/(0, _react.isValidElement)(item)) {
+      return item;
+    }
+    return /*#__PURE__*/_react.default.createElement(_TooltipItem.default, {
+      width: itemWidth,
+      text: item.text,
+      headline: item.headline,
+      imageUrl: item.imageUrl,
+      button: item.button
+    });
+  }, [item, itemWidth]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltip, null, isDisabled ? /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
+    $isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children) : /*#__PURE__*/_react.default.createElement(_Popup.default, {
+    shouldShowOnHover: true,
+    shouldHideOnChildrenLeave: shouldHideOnChildrenLeave,
+    content: content,
+    ref: tooltipRef,
+    container: container,
+    yOffset: yOffset,
+    shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
+    $isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children))), [isDisabled, children, shouldUseChildrenWidth, shouldHideOnChildrenLeave, content, container, yOffset]);
+};
+Tooltip.displayName = 'Tooltip';
+var _default = exports.default = Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/lib/cjs/components/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","shouldHideOnChildrenLeave","yOffset","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the tooltip should be hidden after the children is not hovered.\n     */\n    shouldHideOnChildrenLeave?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n    /**\n     * The Y offset of the tooltip to the children.\n     */\n    yOffset?: number;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n    item,\n    children,\n    container,\n    isDisabled,\n    shouldHideOnChildrenLeave,\n    yOffset,\n    itemWidth,\n    shouldUseChildrenWidth = true,\n}) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren\n                        $isOnlyText={isTextOnlyElement(children)}\n                        $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        shouldHideOnChildrenLeave={shouldHideOnChildrenLeave}\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                        yOffset={yOffset}\n                        shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        <StyledTooltipChildren\n                            $isOnlyText={isTextOnlyElement(children)}\n                            $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                        >\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [\n            isDisabled,\n            children,\n            shouldUseChildrenWidth,\n            shouldHideOnChildrenLeave,\n            content,\n            container,\n            yOffset,\n        ],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAAwE,SAAAG,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAqCxE,MAAMW,OAAyB,GAAGA,CAAC;EAC/BC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,yBAAyB;EACzBC,OAAO;EACPC,SAAS;EACTC,sBAAsB,GAAG;AAC7B,CAAC,KAAK;EACF,MAAMC,UAAU,GAAG,IAAAC,aAAM,EAAW,IAAI,CAAC;EAEzC,MAAMC,OAAO,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC1B,iBAAI,IAAAC,qBAAc,EAACZ,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACI7B,MAAA,CAAAU,OAAA,CAAAgC,aAAA,CAACpC,YAAA,CAAAI,OAAW;MACRiC,KAAK,EAAER,SAAU;MACjBS,IAAI,EAAGf,IAAI,CAAkBe,IAAK;MAClCC,QAAQ,EAAGhB,IAAI,CAAkBgB,QAAS;MAC1CC,QAAQ,EAAGjB,IAAI,CAAkBiB,QAAS;MAC1CC,MAAM,EAAGlB,IAAI,CAAkBkB;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAAClB,IAAI,EAAEM,SAAS,CAAC,CAAC;EAErB,OAAO,IAAAK,cAAO,EACV,mBACIxC,MAAA,CAAAU,OAAA,CAAAgC,aAAA,CAACnC,QAAA,CAAAyC,aAAa,QACThB,UAAU,gBACPhC,MAAA,CAAAU,OAAA,CAAAgC,aAAA,CAACnC,QAAA,CAAA0C,qBAAqB;IAClBC,WAAW,EAAE,IAAAC,0BAAiB,EAACrB,QAAQ,CAAE;IACzCsB,uBAAuB,EAAEhB;EAAuB,GAE/CN,QACkB,CAAC,gBAExB9B,MAAA,CAAAU,OAAA,CAAAgC,aAAA,CAACtC,MAAA,CAAAM,OAAK;IACF2C,iBAAiB;IACjBpB,yBAAyB,EAAEA,yBAA0B;IACrDM,OAAO,EAAEA,OAAQ;IACjBe,GAAG,EAAEjB,UAAW;IAChBN,SAAS,EAAEA,SAAU;IACrBG,OAAO,EAAEA,OAAQ;IACjBE,sBAAsB,EAAEA;EAAuB,gBAE/CpC,MAAA,CAAAU,OAAA,CAAAgC,aAAA,CAACnC,QAAA,CAAA0C,qBAAqB;IAClBC,WAAW,EAAE,IAAAC,0BAAiB,EAACrB,QAAQ,CAAE;IACzCsB,uBAAuB,EAAEhB;EAAuB,GAE/CN,QACkB,CACpB,CAEA,CAClB,EACD,CACIE,UAAU,EACVF,QAAQ,EACRM,sBAAsB,EACtBH,yBAAyB,EACzBM,OAAO,EACPR,SAAS,EACTG,OAAO,CAEf,CAAC;AACL,CAAC;AAEDN,OAAO,CAAC2B,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/C,OAAA,GAEjBkB,OAAO","ignoreList":[]}

package/lib/cjs/components/tooltip/Tooltip.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTooltipChildren = exports.StyledTooltip = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledTooltip = exports.StyledTooltip = _styledComponents.default.div``;
+const StyledTooltipChildren = exports.StyledTooltipChildren = _styledComponents.default.div`
+    ${({
+  $isOnlyText,
+  theme,
+  $shouldUseChildrenWidth
+}) => $isOnlyText && (0, _styledComponents.css)`
+            ${$shouldUseChildrenWidth && (0, _styledComponents.css)`
+                width: fit-content;
+            `}
+
+            border-bottom-width: 1px;
+            border-bottom-style: dotted;
+            border-bottom-color: ${theme.text};
+        `}
+`;
+//# sourceMappingURL=Tooltip.styles.js.map

package/lib/cjs/components/tooltip/Tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTooltip","exports","styled","div","StyledTooltipChildren","$isOnlyText","theme","$shouldUseChildrenWidth","css","text"],"sources":["../../../../src/components/tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTooltip = styled.div``;\n\ntype StyledTooltipChildrenProps = WithTheme<{\n    $isOnlyText: boolean;\n    $shouldUseChildrenWidth: boolean;\n}>;\nexport const StyledTooltipChildren = styled.div<StyledTooltipChildrenProps>`\n    ${({ $isOnlyText, theme, $shouldUseChildrenWidth }: StyledTooltipChildrenProps) =>\n        $isOnlyText &&\n        css`\n            ${$shouldUseChildrenWidth &&\n            css`\n                width: fit-content;\n            `}\n\n            border-bottom-width: 1px;\n            border-bottom-style: dotted;\n            border-bottom-color: ${theme.text};\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGzC,MAAMW,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAMlC,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAGF,yBAAM,CAACC,GAA+B;AAC3E,MAAM,CAAC;EAAEE,WAAW;EAAEC,KAAK;EAAEC;AAAoD,CAAC,KAC1EF,WAAW,IACX,IAAAG,qBAAG;AACX,cAAcD,uBAAuB,IACzB,IAAAC,qBAAG;AACf;AACA,aAAa;AACb;AACA;AACA;AACA,mCAAmCF,KAAK,CAACG,IAAI;AAC7C,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/tooltip/tooltip-item/TooltipItem.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Button = _interopRequireDefault(require("../../button/Button"));
+var _TooltipItem = require("./TooltipItem.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TooltipItem = ({
+  headline,
+  text,
+  button,
+  imageUrl,
+  width
+}) => (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TooltipItem.StyledTooltipItem, {
+  $width: width
+}, headline && /*#__PURE__*/_react.default.createElement(_TooltipItem.StyledTooltipItemHeadline, null, headline), imageUrl && /*#__PURE__*/_react.default.createElement(_TooltipItem.StyledTooltipItemImage, {
+  src: imageUrl
+}), /*#__PURE__*/_react.default.createElement(_TooltipItem.StyledTooltipItemText, null, text), button && /*#__PURE__*/_react.default.createElement(_TooltipItem.StyledTooltipItemButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  onClick: button.onClick
+}, button.text))), [button, headline, imageUrl, text, width]);
+TooltipItem.displayName = 'TooltipItem';
+var _default = exports.default = TooltipItem;
+//# sourceMappingURL=TooltipItem.js.map

package/lib/cjs/components/tooltip/tooltip-item/TooltipItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipItem.js","names":["_react","_interopRequireWildcard","require","_Button","_interopRequireDefault","_TooltipItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TooltipItem","headline","text","button","imageUrl","width","useMemo","createElement","StyledTooltipItem","$width","StyledTooltipItemHeadline","StyledTooltipItemImage","src","StyledTooltipItemText","StyledTooltipItemButtonWrapper","onClick","displayName","_default","exports"],"sources":["../../../../../src/components/tooltip/tooltip-item/TooltipItem.tsx"],"sourcesContent":["import React, { FC, useMemo, type CSSProperties } from 'react';\nimport Button from '../../button/Button';\nimport {\n    StyledTooltipItem,\n    StyledTooltipItemButtonWrapper,\n    StyledTooltipItemHeadline,\n    StyledTooltipItemImage,\n    StyledTooltipItemText,\n} from './TooltipItem.styles';\n\nexport type TooltipProps = {\n    headline?: string;\n    text: string;\n    imageUrl?: string;\n    button?: { text: string; onClick: () => void };\n    width?: CSSProperties['width'];\n};\n\nconst TooltipItem: FC<TooltipProps> = ({ headline, text, button, imageUrl, width }) =>\n    useMemo(\n        () => (\n            <StyledTooltipItem $width={width}>\n                {headline && <StyledTooltipItemHeadline>{headline}</StyledTooltipItemHeadline>}\n                {imageUrl && <StyledTooltipItemImage src={imageUrl} />}\n                <StyledTooltipItemText>{text}</StyledTooltipItemText>\n                {button && (\n                    <StyledTooltipItemButtonWrapper>\n                        <Button onClick={button.onClick}>{button.text}</Button>\n                    </StyledTooltipItemButtonWrapper>\n                )}\n            </StyledTooltipItem>\n        ),\n        [button, headline, imageUrl, text, width],\n    );\n\nTooltipItem.displayName = 'TooltipItem';\n\nexport default TooltipItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAM8B,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAU9B,MAAMW,WAA6B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,MAAM;EAAEC,QAAQ;EAAEC;AAAM,CAAC,KAC9E,IAAAC,cAAO,EACH,mBACIhC,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,YAAA,CAAA6B,iBAAiB;EAACC,MAAM,EAAEJ;AAAM,GAC5BJ,QAAQ,iBAAI3B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,YAAA,CAAA+B,yBAAyB,QAAET,QAAoC,CAAC,EAC7EG,QAAQ,iBAAI9B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,YAAA,CAAAgC,sBAAsB;EAACC,GAAG,EAAER;AAAS,CAAE,CAAC,eACtD9B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,YAAA,CAAAkC,qBAAqB,QAAEX,IAA4B,CAAC,EACpDC,MAAM,iBACH7B,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,YAAA,CAAAmC,8BAA8B,qBAC3BxC,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC9B,OAAA,CAAAK,OAAM;EAACiC,OAAO,EAAEZ,MAAM,CAACY;AAAQ,GAAEZ,MAAM,CAACD,IAAa,CAC1B,CAErB,CACtB,EACD,CAACC,MAAM,EAAEF,QAAQ,EAAEG,QAAQ,EAAEF,IAAI,EAAEG,KAAK,CAC5C,CAAC;AAELL,WAAW,CAACgB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEzBkB,WAAW","ignoreList":[]}