@chayns-components/core 5.0.0-beta.8 → 5.0.0-beta.800

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

@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import Badge from '../badge/Badge';
+import Icon from '../icon/Icon';
+import { StyledTagInput, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
+const TagInput = _ref => {
+  let {
+    placeholder,
+    tags,
+    onRemove,
+    onAdd
+  } = _ref;
+  const [internalTags, setInternalTags] = useState();
+  const [currentValue, setCurrentValue] = useState('');
+  const [selectedId, setSelectedId] = useState();
+  const theme = useTheme();
+  useEffect(() => {
+    if (tags) {
+      setInternalTags(tags);
+    }
+  }, [tags]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      setCurrentValue(prevValue => {
+        if (!prevValue) {
+          return '';
+        }
+        setInternalTags(prevTags => {
+          const newTag = {
+            id: uuidv4(),
+            text: prevValue
+          };
+          if (typeof onAdd === 'function') {
+            onAdd(newTag);
+          }
+          return prevTags ? [...prevTags, newTag] : [newTag];
+        });
+        return '';
+      });
+    }
+    if (event.key === 'Backspace' && currentValue === '') {
+      if (!selectedId) {
+        if (!internalTags) {
+          return;
+        }
+        const newSelectedId = internalTags[internalTags.length - 1]?.id;
+        setSelectedId(newSelectedId);
+        return;
+      }
+      setInternalTags(prevState => {
+        if (!prevState) {
+          return prevState;
+        }
+        const removedId = prevState[prevState.length - 1]?.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 = useCallback(id => {
+    setInternalTags(prevState => {
+      const updatedTags = (prevState ?? []).filter(tag => tag.id !== id);
+      if (typeof onRemove === 'function') {
+        onRemove(id);
+      }
+      return updatedTags;
+    });
+  }, [onRemove]);
+  const content = useMemo(() => {
+    const items = [];
+    if (!internalTags) {
+      return items;
+    }
+    internalTags.forEach(_ref2 => {
+      let {
+        text,
+        id
+      } = _ref2;
+      items.push( /*#__PURE__*/React.createElement(Badge, {
+        key: `tag-input-${id}`,
+        backgroundColor: id === selectedId ? theme['206'] ?? undefined : undefined
+      }, /*#__PURE__*/React.createElement(StyledTagInputTagWrapper, null, /*#__PURE__*/React.createElement(StyledTagInputTagWrapperText, null, text), /*#__PURE__*/React.createElement(Icon, {
+        icons: ['ts-wrong'],
+        onClick: () => handleIconClick(id)
+      }))));
+    });
+    return items;
+  }, [handleIconClick, internalTags, selectedId, theme]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTagInput, null, content, /*#__PURE__*/React.createElement(StyledTagInputTagInput, {
+    placeholder: tags && tags.length > 0 ? undefined : placeholder,
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
+    value: currentValue
+  })), [content, currentValue, handleKeyDown, placeholder, tags]);
+};
+export default TagInput;
+//# sourceMappingURL=TagInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","names":["React","useCallback","useEffect","useMemo","useState","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","TagInput","_ref","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","theme","handleKeyDown","event","key","prevValue","prevTags","newTag","id","text","newSelectedId","length","prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","items","forEach","_ref2","push","createElement","backgroundColor","icons","onClick","onKeyDown","onChange"],"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/esm/components/tag-input/TagInput.styles.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+export const StyledTagInput = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 42px;
+    padding: 5px;
+    align-items: center;
+    gap: 6px;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['100'];
+}};
+    border: 1px solid rgba(160, 160, 160, 0.3);
+`;
+export const StyledTagInputTagWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+`;
+export const StyledTagInputTagWrapperText = styled.p`
+    margin: 0;
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 15px;
+`;
+export const StyledTagInputTagInput = styled.input`
+    border: none;
+    height: 24px;
+    flex-grow: 1;
+    background-color: transparent;
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+`;
+//# sourceMappingURL=TagInput.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.styles.js","names":["styled","StyledTagInput","div","_ref","theme","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","_ref2","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,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACxE;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACE,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,4BAA4B,GAAGN,MAAM,CAACO,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGR,MAAM,CAACS,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA;AACnE,CAAC","ignoreList":[]}

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

@@ -0,0 +1,68 @@
+import { getDevice } from 'chayns-api';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import { StyledInputRightElement } from '../input/Input.styles';
+import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
+const TextArea = _ref => {
+  let {
+    isDisabled,
+    isInvalid,
+    placeholder,
+    value,
+    onChange,
+    rightElement,
+    onBlur,
+    maxHeight = '120px',
+    minHeight = '41px'
+  } = _ref;
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const areaProvider = useContext(AreaContext);
+  const textareaRef = useRef(null);
+  const {
+    browser
+  } = getDevice();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const adjustTextareaHeight = 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]);
+
+  /**
+   * 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.
+   */
+  useEffect(() => {
+    if (typeof value === 'string' && value.length > -1) {
+      adjustTextareaHeight();
+    }
+  }, [adjustTextareaHeight, value]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTextArea, {
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledTextAreaContentWrapper, {
+    $isInvalid: isInvalid,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
+    $browser: browser?.name,
+    disabled: isDisabled,
+    $isInvalid: isInvalid,
+    ref: textareaRef,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    $maxHeight: maxHeight,
+    $minHeight: minHeight,
+    $isOverflowing: isOverflowing,
+    rows: 1
+  }), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
+    $isInvalid: isInvalid
+  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
+};
+TextArea.displayName = 'TextArea';
+export default TextArea;
+//# sourceMappingURL=TextArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["getDevice","React","useCallback","useContext","useEffect","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","isDisabled","isInvalid","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","ref","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\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     * 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: FC<TextAreaProps> = ({\n    isDisabled,\n    isInvalid,\n    placeholder,\n    value,\n    onChange,\n    rightElement,\n    onBlur,\n    maxHeight = '120px',\n    minHeight = '41px',\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(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n        }\n    }, [maxHeight]);\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                            $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            placeholder,\n            rightElement,\n            shouldChangeColor,\n            shouldShowBorder,\n            value,\n        ],\n    );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAMRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,WAAW,QAAQ,sCAAsC;AAClE,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SACIC,cAAc,EACdC,qBAAqB,EACrBC,4BAA4B,EAC5BC,mBAAmB,EACnBC,mBAAmB,EACnBC,0BAA0B,QACvB,mBAAmB;AAyC1B,MAAMC,QAA2B,GAAGC,IAAA,IAU9B;EAAA,IAV+B;IACjCC,UAAU;IACVC,SAAS;IACTC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC,YAAY;IACZC,MAAM;IACNC,SAAS,GAAG,OAAO;IACnBC,SAAS,GAAG;EAChB,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,aAAa,EAAEC,gBAAgB,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC;EAEzD,MAAMsB,YAAY,GAAG1B,UAAU,CAACK,WAAW,CAAC;EAE5C,MAAMsB,WAAW,GAAGxB,MAAM,CAAsB,IAAI,CAAC;EAErD,MAAM;IAAEyB;EAAQ,CAAC,GAAG/B,SAAS,CAAC,CAAC;;EAE/B;EACA,MAAMgC,gBAAgB,GAAGT,YAAY,EAAEU,KAAK,EAAEC,KAAK,EAAEC,eAAe,KAAKC,SAAS;EAElF,MAAMC,iBAAiB,GAAGhC,OAAO,CAC7B,MAAMwB,YAAY,CAACQ,iBAAiB,IAAI,KAAK,EAC7C,CAACR,YAAY,CAACQ,iBAAiB,CACnC,CAAC;EAED,MAAMC,oBAAoB,GAAGpC,WAAW,CAAC,MAAM;IAC3C,IAAI4B,WAAW,CAACS,OAAO,EAAE;MACrBT,WAAW,CAACS,OAAO,CAACL,KAAK,CAACM,MAAM,GAAG,MAAM;MACzCV,WAAW,CAACS,OAAO,CAACL,KAAK,CAACM,MAAM,GAAG,GAAGV,WAAW,CAACS,OAAO,CAACE,YAAY,IAAI;MAE1Eb,gBAAgB,CAACE,WAAW,CAACS,OAAO,CAACE,YAAY,GAAGC,QAAQ,CAACjB,SAAS,CAACkB,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC3F;EACJ,CAAC,EAAE,CAAClB,SAAS,CAAC,CAAC;;EAEf;AACJ;AACA;AACA;EACIrB,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOiB,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACuB,MAAM,GAAG,CAAC,CAAC,EAAE;MAChDN,oBAAoB,CAAC,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,oBAAoB,EAAEjB,KAAK,CAAC,CAAC;EAEjC,OAAOhB,OAAO,CACV,mBACIJ,KAAA,CAAA4C,aAAA,CAACnC,cAAc;IAACoC,WAAW,EAAE5B;EAAW,gBACpCjB,KAAA,CAAA4C,aAAA,CAACjC,4BAA4B;IACzBmC,UAAU,EAAE5B,SAAU;IACtB6B,kBAAkB,EAAEX;EAAkB,gBAEtCpC,KAAA,CAAA4C,aAAA,CAAClC,qBAAqB,qBAClBV,KAAA,CAAA4C,aAAA,CAAChC,mBAAmB;IAChBoC,QAAQ,EAAElB,OAAO,EAAEmB,IAAK;IACxBC,QAAQ,EAAEjC,UAAW;IACrB6B,UAAU,EAAE5B,SAAU;IACtBiC,GAAG,EAAEtB,WAAY;IACjBT,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA,MAAO;IACfF,QAAQ,EAAEA,QAAS;IACnB+B,UAAU,EAAE5B,SAAU;IACtB6B,UAAU,EAAE5B,SAAU;IACtB6B,cAAc,EAAE5B,aAAc;IAC9B6B,IAAI,EAAE;EAAE,CACX,CAAC,EACD,CAACnC,KAAK,iBACHpB,KAAA,CAAA4C,aAAA,CAAC9B,0BAA0B,qBACvBd,KAAA,CAAA4C,aAAA,CAAC/B,mBAAmB;IAACiC,UAAU,EAAE5B;EAAU,GACtCC,WACgB,CACG,CAEb,CAAC,EACvBG,YAAY,IAAIS,gBAAgB,IAAIT,YACX,CAAC,EAC9BA,YAAY,IAAI,CAACS,gBAAgB,iBAC9B/B,KAAA,CAAA4C,aAAA,CAACpC,uBAAuB,QAAEc,YAAsC,CAExD,CACnB,EACD,CACIQ,OAAO,EAAEmB,IAAI,EACbhC,UAAU,EACVC,SAAS,EACTQ,aAAa,EACbF,SAAS,EACTC,SAAS,EACTF,MAAM,EACNF,QAAQ,EACRF,WAAW,EACXG,YAAY,EACZc,iBAAiB,EACjBL,gBAAgB,EAChBX,KAAK,CAEb,CAAC;AACL,CAAC;AAEDL,QAAQ,CAACyC,WAAW,GAAG,UAAU;AAEjC,eAAezC,QAAQ","ignoreList":[]}

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

@@ -0,0 +1,132 @@
+import styled, { css } from 'styled-components';
+export const StyledTextArea = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    opacity: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 0.5 : 1;
+}};
+    position: relative;
+`;
+export const StyledTextAreaContentWrapper = styled.div`
+    background-color: ${_ref2 => {
+  let {
+    theme,
+    $shouldChangeColor
+  } = _ref2;
+  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
+}};
+    border-radius: 3px;
+    border: 1px solid
+        ${_ref3 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref3;
+  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
+}};
+    width: 100%;
+    display: flex;
+`;
+export const StyledTextAreaContent = styled.div`
+    display: flex;
+    width: 100%;
+`;
+export const StyledTextAreaInput = styled.textarea`
+    color: ${_ref4 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref4;
+  return $isInvalid ? theme.wrong : theme.text;
+}};
+    background: none;
+    border: none;
+    resize: none;
+    overflow-y: ${_ref5 => {
+  let {
+    $isOverflowing
+  } = _ref5;
+  return $isOverflowing ? 'scroll' : 'hidden';
+}};
+    max-height: ${_ref6 => {
+  let {
+    $maxHeight
+  } = _ref6;
+  return typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight;
+}};
+    min-height: ${_ref7 => {
+  let {
+    $minHeight
+  } = _ref7;
+  return typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight;
+}};
+    width: 100%;
+    padding: 8px 10px;
+    cursor: text;
+
+    // Styles for custom scrollbar
+    ${_ref8 => {
+  let {
+    $browser,
+    theme
+  } = _ref8;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : 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;
+                  }
+              `;
+}}
+`;
+export const StyledTextAreaLabelWrapper = styled.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;
+`;
+export const StyledTextAreaLabel = styled.label`
+    color: ${_ref9 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref9;
+  return $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/esm/components/text-area/TextArea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","_ref","$isDisabled","StyledTextAreaContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","_ref4","text","_ref5","$isOverflowing","_ref6","$maxHeight","_ref7","$minHeight","_ref8","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref9"],"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":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA,CAAC;AAOD,OAAO,MAAMC,4BAA4B,GAAGN,MAAM,CAACG,GAAsC;AACzF,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAsD,CAAC,GAAAF,KAAA;EAAA,OACjFC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF;AACA;AACA,UAAUG,KAAA;EAAA,IAAC;IAAEH,KAAK;IAAEI;EAA8C,CAAC,GAAAD,KAAA;EAAA,OACvDC,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,0BAA0B;AAAA;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGd,MAAM,CAACG,GAAG;AAC/C;AACA;AACA,CAAC;AAUD,OAAO,MAAMY,mBAAmB,GAAGf,MAAM,CAACgB,QAAkC;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAET,KAAK;IAAEI;EAAqC,CAAC,GAAAK,KAAA;EAAA,OACrDL,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACU,IAAI;AAAA;AAC7C;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OAAMC,cAAc,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAChF,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAElB;EAAgC,CAAC,GAAAiB,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBzB,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMmB,0BAA0B,GAAG3B,MAAM,CAAC4B,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAG7B,MAAM,CAAC4B,KAA+B;AACzE,aAAaE,KAAA;EAAA,IAAC;IAAEtB,KAAK;IAAEI;EAAqC,CAAC,GAAAkB,KAAA;EAAA,OACrDlB,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,QAAQL,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,44 @@
+import React, { isValidElement, useMemo, useRef } from 'react';
+import { isTextOnlyElement } from '../../utils/tooltip';
+import Popup from '../popup/Popup';
+import TooltipItem from './tooltip-item/TooltipItem';
+import { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';
+const Tooltip = _ref => {
+  let {
+    item,
+    children,
+    container,
+    isDisabled,
+    itemWidth,
+    shouldUseChildrenWidth = true
+  } = _ref;
+  const tooltipRef = useRef(null);
+  const content = useMemo(() => {
+    if ( /*#__PURE__*/isValidElement(item)) {
+      return item;
+    }
+    return /*#__PURE__*/React.createElement(TooltipItem, {
+      width: itemWidth,
+      text: item.text,
+      headline: item.headline,
+      imageUrl: item.imageUrl,
+      button: item.button
+    });
+  }, [item, itemWidth]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTooltip, null, isDisabled ? /*#__PURE__*/React.createElement(StyledTooltipChildren, {
+    $isOnlyText: isTextOnlyElement(children),
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children) : /*#__PURE__*/React.createElement(Popup, {
+    shouldShowOnHover: true,
+    content: content,
+    ref: tooltipRef,
+    container: container,
+    shouldUseChildrenWidth: false
+  }, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
+    $isOnlyText: isTextOnlyElement(children),
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children))), [isDisabled, children, shouldUseChildrenWidth, content, container]);
+};
+Tooltip.displayName = 'Tooltip';
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"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 width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n    item,\n    children,\n    container,\n    isDisabled,\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                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                        shouldUseChildrenWidth={false}\n                    >\n                        <StyledTooltipChildren\n                            $isOnlyText={isTextOnlyElement(children)}\n                            $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                        >\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, shouldUseChildrenWidth, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AA6BvE,MAAMC,OAAyB,GAAGC,IAAA,IAO5B;EAAA,IAP6B;IAC/BC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,sBAAsB,GAAG;EAC7B,CAAC,GAAAN,IAAA;EACG,MAAMO,UAAU,GAAGd,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMe,OAAO,GAAGhB,OAAO,CAAC,MAAM;IAC1B,kBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAmB,aAAA,CAACb,WAAW;MACRc,KAAK,EAAEL,SAAU;MACjBM,IAAI,EAAGV,IAAI,CAAkBU,IAAK;MAClCC,QAAQ,EAAGX,IAAI,CAAkBW,QAAS;MAC1CC,QAAQ,EAAGZ,IAAI,CAAkBY,QAAS;MAC1CC,MAAM,EAAGb,IAAI,CAAkBa;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACb,IAAI,EAAEI,SAAS,CAAC,CAAC;EAErB,OAAOb,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACZ,aAAa,QACTO,UAAU,gBACPd,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CAAC,gBAExBZ,KAAA,CAAAmB,aAAA,CAACd,KAAK;IACFsB,iBAAiB;IACjBT,OAAO,EAAEA,OAAQ;IACjBU,GAAG,EAAEX,UAAW;IAChBJ,SAAS,EAAEA,SAAU;IACrBG,sBAAsB,EAAE;EAAM,gBAE9BhB,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CACpB,CAEA,CAClB,EACD,CAACE,UAAU,EAAEF,QAAQ,EAAEI,sBAAsB,EAAEE,OAAO,EAAEL,SAAS,CACrE,CAAC;AACL,CAAC;AAEDJ,OAAO,CAACoB,WAAW,GAAG,SAAS;AAE/B,eAAepB,OAAO","ignoreList":[]}

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

@@ -0,0 +1,21 @@
+import styled, { css } from 'styled-components';
+export const StyledTooltip = styled.div``;
+export const StyledTooltipChildren = styled.div`
+    ${_ref => {
+  let {
+    $isOnlyText,
+    theme,
+    $shouldUseChildrenWidth
+  } = _ref;
+  return $isOnlyText && css`
+            ${$shouldUseChildrenWidth && css`
+                width: fit-content;
+            `}
+
+            border-bottom-width: 1px;
+            border-bottom-style: dotted;
+            border-bottom-color: ${theme.text};
+        `;
+}}
+`;
+//# sourceMappingURL=Tooltip.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.styles.js","names":["styled","css","StyledTooltip","div","StyledTooltipChildren","_ref","$isOnlyText","theme","$shouldUseChildrenWidth","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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,aAAa,GAAGF,MAAM,CAACG,GAAG,EAAE;AAMzC,OAAO,MAAMC,qBAAqB,GAAGJ,MAAM,CAACG,GAA+B;AAC3E,MAAME,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,KAAK;IAAEC;EAAoD,CAAC,GAAAH,IAAA;EAAA,OAC1EC,WAAW,IACXL,GAAG;AACX,cAAcO,uBAAuB,IACzBP,GAAG;AACf;AACA,aAAa;AACb;AACA;AACA;AACA,mCAAmCM,KAAK,CAACE,IAAI;AAC7C,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

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

@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+import Button from '../../button/Button';
+import { StyledTooltipItem, StyledTooltipItemButtonWrapper, StyledTooltipItemHeadline, StyledTooltipItemImage, StyledTooltipItemText } from './TooltipItem.styles';
+const TooltipItem = _ref => {
+  let {
+    headline,
+    text,
+    button,
+    imageUrl,
+    width
+  } = _ref;
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTooltipItem, {
+    $width: width
+  }, headline && /*#__PURE__*/React.createElement(StyledTooltipItemHeadline, null, headline), imageUrl && /*#__PURE__*/React.createElement(StyledTooltipItemImage, {
+    src: imageUrl
+  }), /*#__PURE__*/React.createElement(StyledTooltipItemText, null, text), button && /*#__PURE__*/React.createElement(StyledTooltipItemButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: button.onClick
+  }, button.text))), [button, headline, imageUrl, text, width]);
+};
+TooltipItem.displayName = 'TooltipItem';
+export default TooltipItem;
+//# sourceMappingURL=TooltipItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipItem.js","names":["React","useMemo","Button","StyledTooltipItem","StyledTooltipItemButtonWrapper","StyledTooltipItemHeadline","StyledTooltipItemImage","StyledTooltipItemText","TooltipItem","_ref","headline","text","button","imageUrl","width","createElement","$width","src","onClick","displayName"],"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,OAAOA,KAAK,IAAQC,OAAO,QAA4B,OAAO;AAC9D,OAAOC,MAAM,MAAM,qBAAqB;AACxC,SACIC,iBAAiB,EACjBC,8BAA8B,EAC9BC,yBAAyB,EACzBC,sBAAsB,EACtBC,qBAAqB,QAClB,sBAAsB;AAU7B,MAAMC,WAA6B,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAAL,IAAA;EAAA,OAC9ER,OAAO,CACH,mBACID,KAAA,CAAAe,aAAA,CAACZ,iBAAiB;IAACa,MAAM,EAAEF;EAAM,GAC5BJ,QAAQ,iBAAIV,KAAA,CAAAe,aAAA,CAACV,yBAAyB,QAAEK,QAAoC,CAAC,EAC7EG,QAAQ,iBAAIb,KAAA,CAAAe,aAAA,CAACT,sBAAsB;IAACW,GAAG,EAAEJ;EAAS,CAAE,CAAC,eACtDb,KAAA,CAAAe,aAAA,CAACR,qBAAqB,QAAEI,IAA4B,CAAC,EACpDC,MAAM,iBACHZ,KAAA,CAAAe,aAAA,CAACX,8BAA8B,qBAC3BJ,KAAA,CAAAe,aAAA,CAACb,MAAM;IAACgB,OAAO,EAAEN,MAAM,CAACM;EAAQ,GAAEN,MAAM,CAACD,IAAa,CAC1B,CAErB,CACtB,EACD,CAACC,MAAM,EAAEF,QAAQ,EAAEG,QAAQ,EAAEF,IAAI,EAAEG,KAAK,CAC5C,CAAC;AAAA;AAELN,WAAW,CAACW,WAAW,GAAG,aAAa;AAEvC,eAAeX,WAAW","ignoreList":[]}

package/lib/esm/components/tooltip/tooltip-item/TooltipItem.styles.js

@@ -0,0 +1,43 @@
+import styled, { css } from 'styled-components';
+export const StyledTooltipItem = styled.div`
+    padding: 5px;
+
+    width: ${_ref => {
+  let {
+    $width
+  } = _ref;
+  return $width ? `${$width}px` : '100%';
+}};
+
+    ${_ref2 => {
+  let {
+    $width
+  } = _ref2;
+  return $width && css`
+            width: ${$width};
+        `;
+}}
+`;
+export const StyledTooltipItemHeadline = styled.h5`
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.headline;
+}};
+    margin: 0;
+`;
+export const StyledTooltipItemImage = styled.img``;
+export const StyledTooltipItemButtonWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+`;
+export const StyledTooltipItemText = styled.p`
+    color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.text;
+}};
+`;
+//# sourceMappingURL=TooltipItem.styles.js.map

package/lib/esm/components/tooltip/tooltip-item/TooltipItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipItem.styles.js","names":["styled","css","StyledTooltipItem","div","_ref","$width","_ref2","StyledTooltipItemHeadline","h5","_ref3","theme","headline","StyledTooltipItemImage","img","StyledTooltipItemButtonWrapper","StyledTooltipItemText","p","_ref4","text"],"sources":["../../../../../src/components/tooltip/tooltip-item/TooltipItem.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTooltipItemProps = WithTheme<{ $width?: CSSProperties['width'] }>;\n\nexport const StyledTooltipItem = styled.div<StyledTooltipItemProps>`\n    padding: 5px;\n\n    width: ${({ $width }) => ($width ? `${$width}px` : '100%')};\n\n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${$width};\n        `}\n`;\n\ntype StyledTooltipItemHeadlineProps = WithTheme<unknown>;\n\nexport const StyledTooltipItemHeadline = styled.h5<StyledTooltipItemHeadlineProps>`\n    color: ${({ theme }: StyledTooltipItemHeadlineProps) => theme.headline};\n    margin: 0;\n`;\n\nexport const StyledTooltipItemImage = styled.img``;\n\nexport const StyledTooltipItemButtonWrapper = styled.div`\n    display: flex;\n    justify-content: center;\n`;\n\ntype StyledTooltipItemTextProps = WithTheme<unknown>;\n\nexport const StyledTooltipItemText = styled.p<StyledTooltipItemTextProps>`\n    color: ${({ theme }: StyledTooltipItemTextProps) => theme.text};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,GAA2B;AACnE;AACA;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAMC,MAAM,GAAG,GAAGA,MAAM,IAAI,GAAG,MAAM;AAAA,CAAC;AAC9D;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED;EAAO,CAAC,GAAAC,KAAA;EAAA,OACTD,MAAM,IACNJ,GAAG;AACX,qBAAqBI,MAAM;AAC3B,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAME,yBAAyB,GAAGP,MAAM,CAACQ,EAAkC;AAClF,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,QAAQ;AAAA;AAC1E;AACA,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGZ,MAAM,CAACa,GAAG,EAAE;AAElD,OAAO,MAAMC,8BAA8B,GAAGd,MAAM,CAACG,GAAG;AACxD;AACA;AACA,CAAC;AAID,OAAO,MAAMY,qBAAqB,GAAGf,MAAM,CAACgB,CAA6B;AACzE,aAAaC,KAAA;EAAA,IAAC;IAAEP;EAAkC,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAACQ,IAAI;AAAA;AAClE,CAAC","ignoreList":[]}