@chayns-components/typewriter 5.0.0-beta.66 → 5.0.0-beta.661

package/README.md

@@ -4,8 +4,8 @@
     </h1>
     <p>A set of beautiful React components for developing your own applications with chayns.</p>
     <div>
-        <img src="https://img.shields.io/npm/dm/@chayns-components/typewriter.svg?style=for-the-badge" alt="" />
-        <img src="https://img.shields.io/npm/v/@chayns-components/typewriter?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/dm/@chayns-components/core.svg?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/v/@chayns-components/core?style=for-the-badge" alt="" />
         <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
         <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
     </div>
@@ -15,7 +15,7 @@
 
 ## Installation
 
-First you need to install the typewriter part of the chayns-components.
+First you need to install the core part of the chayns-components.
 
 ```bash
 # NPM
@@ -31,15 +31,4 @@ yarn add @chayns-components/typewriter
 
 ## Usage
 
-You can use the components in your project as in the following example.
-
-```typescript jsx
-import { Typewriter } from '@chayns-components/typewriter';
-
-<Typewriter>
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
-    sit amet.
-</Typewriter>;
-```
+For detailed usage visit the [storybook](https://components.chayns.site/storybook).

package/lib/cjs/components/typewriter/Typewriter.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TypewriterSpeed = exports.TypewriterResetDelay = void 0;
+var _core = require("@chayns-components/core");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _server = require("react-dom/server");
+var _Typewriter = require("./Typewriter.styles");
+var _utils = require("./utils");
+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; }
+// noinspection JSUnusedGlobalSymbols
+let TypewriterResetDelay = exports.TypewriterResetDelay = /*#__PURE__*/function (TypewriterResetDelay) {
+  TypewriterResetDelay[TypewriterResetDelay["Slow"] = 4000] = "Slow";
+  TypewriterResetDelay[TypewriterResetDelay["Medium"] = 2000] = "Medium";
+  TypewriterResetDelay[TypewriterResetDelay["Fast"] = 1000] = "Fast";
+  return TypewriterResetDelay;
+}({}); // noinspection JSUnusedGlobalSymbols
+let TypewriterSpeed = exports.TypewriterSpeed = /*#__PURE__*/function (TypewriterSpeed) {
+  TypewriterSpeed[TypewriterSpeed["Slow"] = 30] = "Slow";
+  TypewriterSpeed[TypewriterSpeed["Medium"] = 20] = "Medium";
+  TypewriterSpeed[TypewriterSpeed["Fast"] = 10] = "Fast";
+  return TypewriterSpeed;
+}({});
+const Typewriter = ({
+  children,
+  onFinish,
+  pseudoChildren,
+  resetDelay = TypewriterResetDelay.Medium,
+  shouldForceCursorAnimation = false,
+  shouldHideCursor = false,
+  shouldSortChildrenRandomly = false,
+  shouldUseAnimationHeight = false,
+  shouldUseResetAnimation = false,
+  shouldWaitForContent,
+  speed = TypewriterSpeed.Medium,
+  textStyle
+}) => {
+  const [currentChildrenIndex, setCurrentChildrenIndex] = (0, _react.useState)(0);
+  const [shouldCount, setShouldCount] = (0, _react.useState)(true);
+  const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = (0, _react.useState)(false);
+  (0, _react.useLayoutEffect)(() => {
+    if (children) {
+      setHasRenderedChildrenOnce(false);
+    }
+  }, [children]);
+  (0, _react.useEffect)(() => {
+    if (!hasRenderedChildrenOnce) {
+      setHasRenderedChildrenOnce(true);
+    }
+  }, [hasRenderedChildrenOnce]);
+  const sortedChildren = (0, _react.useMemo)(() => Array.isArray(children) && shouldSortChildrenRandomly ? (0, _utils.shuffleArray)(children) : children, [children, shouldSortChildrenRandomly]);
+  const areMultipleChildrenGiven = Array.isArray(sortedChildren);
+  const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;
+  const textContent = (0, _react.useMemo)(() => {
+    if (areMultipleChildrenGiven) {
+      const currentChildren = sortedChildren[currentChildrenIndex];
+      if (currentChildren) {
+        return /*#__PURE__*/_react.default.isValidElement(currentChildren) ? (0, _server.renderToString)( /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
+          color: "#005EB8",
+          colorMode: 0,
+          style: {
+            display: 'inline'
+          }
+        }, currentChildren)) : currentChildren;
+      }
+      return '';
+    }
+    return /*#__PURE__*/_react.default.isValidElement(sortedChildren) ? (0, _server.renderToString)( /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
+      color: "#005EB8",
+      colorMode: 0,
+      style: {
+        display: 'inline'
+      }
+    }, sortedChildren)) : sortedChildren;
+  }, [areMultipleChildrenGiven, currentChildrenIndex, sortedChildren]);
+  const charactersCount = (0, _react.useMemo)(() => (0, _utils.getCharactersCount)(textContent), [textContent]);
+  const [isResetAnimationActive, setIsResetAnimationActive] = (0, _react.useState)(false);
+  const [shownCharCount, setShownCharCount] = (0, _react.useState)(charactersCount > 0 ? 0 : textContent.length);
+  const [shouldStopAnimation, setShouldStopAnimation] = (0, _react.useState)(false);
+  const [prevChildren, setPrevChildren] = (0, _react.useState)(children);
+  (0, _react.useEffect)(() => {
+    if (children !== prevChildren) {
+      setShouldCount(true);
+      setPrevChildren(children);
+    }
+  }, [children, prevChildren]);
+  const isAnimatingText = shownCharCount < textContent.length || shouldForceCursorAnimation || areMultipleChildrenGiven || textContent.length === 0;
+  const handleClick = (0, _react.useCallback)(() => {
+    setShouldStopAnimation(true);
+  }, []);
+  const handleSetNextChildrenIndex = (0, _react.useCallback)(() => setCurrentChildrenIndex(() => {
+    let newIndex = currentChildrenIndex + 1;
+    if (newIndex > childrenCount - 1) {
+      newIndex = 0;
+    }
+    return newIndex;
+  }), [childrenCount, currentChildrenIndex]);
+  (0, _react.useEffect)(() => {
+    let interval;
+    if (shouldStopAnimation || charactersCount === 0) {
+      setShownCharCount(textContent.length);
+    } else if (isResetAnimationActive) {
+      interval = window.setInterval(() => {
+        setShownCharCount(prevState => {
+          const nextState = prevState - 1;
+          if (nextState === 0) {
+            window.clearInterval(interval);
+            if (areMultipleChildrenGiven) {
+              setTimeout(() => {
+                setIsResetAnimationActive(false);
+                handleSetNextChildrenIndex();
+              }, resetDelay);
+            }
+          }
+          return nextState;
+        });
+      }, speed);
+    } else {
+      interval = window.setInterval(() => {
+        setShownCharCount(prevState => {
+          let nextState = prevState;
+          if (shouldCount) {
+            nextState = prevState + 1;
+          }
+          if (nextState >= charactersCount) {
+            if (shouldWaitForContent) {
+              setShouldCount(false);
+            } else {
+              window.clearInterval(interval);
+
+              /**
+               * At this point, the next value for "shownCharCount" is deliberately set to
+               * the length of the textContent in order to correctly display HTML elements
+               * after the last letter.
+               */
+              nextState = textContent.length;
+              if (areMultipleChildrenGiven) {
+                setTimeout(() => {
+                  if (shouldUseResetAnimation) {
+                    setIsResetAnimationActive(true);
+                  } else {
+                    setShownCharCount(0);
+                    setTimeout(handleSetNextChildrenIndex, resetDelay / 2);
+                  }
+                }, resetDelay);
+              }
+            }
+          }
+          return nextState;
+        });
+      }, speed);
+    }
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [shouldStopAnimation, speed, textContent.length, charactersCount, isResetAnimationActive, areMultipleChildrenGiven, resetDelay, childrenCount, handleSetNextChildrenIndex, shouldUseResetAnimation, shouldCount, shouldWaitForContent]);
+  (0, _react.useEffect)(() => {
+    if (!isAnimatingText && typeof onFinish === 'function') {
+      onFinish();
+    }
+  }, [isAnimatingText, onFinish]);
+  const shownText = (0, _react.useMemo)(() => (0, _utils.getSubTextFromHTML)(textContent, shownCharCount), [shownCharCount, textContent]);
+  const pseudoTextHTML = (0, _react.useMemo)(() => {
+    if (pseudoChildren) {
+      const pseudoText = /*#__PURE__*/_react.default.isValidElement(pseudoChildren) ? (0, _server.renderToString)( /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
+        color: "#005EB8",
+        colorMode: 0,
+        style: {
+          display: 'inline'
+        }
+      }, pseudoChildren)) : pseudoChildren;
+      if (shouldUseAnimationHeight) {
+        return (0, _utils.getSubTextFromHTML)(pseudoText, shownCharCount);
+      }
+      return pseudoText;
+    }
+    if (shouldUseAnimationHeight && textContent) {
+      return (0, _utils.getSubTextFromHTML)(textContent, shownCharCount);
+    }
+    return textContent || '&#8203;';
+  }, [pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, {
+    onClick: handleClick
+  }, isAnimatingText ? /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
+    dangerouslySetInnerHTML: {
+      __html: shownText
+    },
+    $isAnimatingText: true,
+    $shouldHideCursor: shouldHideCursor,
+    style: textStyle
+  }) : /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
+    style: textStyle
+  }, sortedChildren), isAnimatingText && /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterPseudoText, {
+    dangerouslySetInnerHTML: {
+      __html: pseudoTextHTML
+    },
+    $isAnimatingText: true,
+    $shouldHideCursor: shouldHideCursor
+  }), !hasRenderedChildrenOnce && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      visibility: 'hidden'
+    }
+  }, children), document.body)), [children, handleClick, hasRenderedChildrenOnce, isAnimatingText, pseudoTextHTML, shouldHideCursor, shownText, sortedChildren, textStyle]);
+};
+Typewriter.displayName = 'Typewriter';
+var _default = exports.default = Typewriter;
+//# sourceMappingURL=Typewriter.js.map

package/lib/cjs/components/typewriter/Typewriter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typewriter.js","names":["_core","require","_react","_interopRequireWildcard","_reactDom","_server","_Typewriter","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TypewriterResetDelay","exports","TypewriterSpeed","Typewriter","children","onFinish","pseudoChildren","resetDelay","Medium","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","textStyle","currentChildrenIndex","setCurrentChildrenIndex","useState","shouldCount","setShouldCount","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","useLayoutEffect","useEffect","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","React","isValidElement","renderToString","createElement","ColorSchemeProvider","color","colorMode","style","display","charactersCount","getCharactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","prevChildren","setPrevChildren","isAnimatingText","handleClick","useCallback","handleSetNextChildrenIndex","newIndex","interval","window","setInterval","prevState","nextState","clearInterval","setTimeout","shownText","getSubTextFromHTML","pseudoTextHTML","pseudoText","StyledTypewriter","onClick","StyledTypewriterText","dangerouslySetInnerHTML","__html","$isAnimatingText","$shouldHideCursor","StyledTypewriterPseudoText","createPortal","position","visibility","document","body","displayName","_default"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider } from '@chayns-components/core';\nimport React, {\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterResetDelay {\n    Slow = 4000,\n    Medium = 2000,\n    Fast = 1000,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n    Slow = 30,\n    Medium = 20,\n    Fast = 10,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\n    /**\n     * Function that is executed when the typewriter animation has finished. This function will not\n     * be executed if multiple texts are used.\n     */\n    onFinish?: VoidFunction;\n    /**\n     * Pseudo-element to be rendered invisible during animation to define the size of the element\n     * for the typewriter effect. By default, the \"children\" is used for this purpose.\n     */\n    pseudoChildren?: ReactElement | string;\n    /**\n     * Waiting time before the typewriter resets the content if multiple texts are given\n     */\n    resetDelay?: TypewriterResetDelay;\n    /**\n     * Specifies whether the cursor should be forced to animate even if no text is currently animated.\n     */\n    shouldForceCursorAnimation?: boolean;\n    /**\n     * Specifies whether the cursor should be hidden\n     */\n    shouldHideCursor?: boolean;\n    /**\n     * Specifies whether the children should be sorted randomly if there are multiple texts.\n     * This makes the typewriter start with a different text each time and also changes them\n     * in a random order.\n     */\n    shouldSortChildrenRandomly?: boolean;\n    /**\n     * Specifies whether the animation should use its full height or the height of the current\n     * chunk.\n     */\n    shouldUseAnimationHeight?: boolean;\n    /**\n     * Specifies whether the reset of the text should be animated with a backspace animation for\n     * multiple texts.\n     */\n    shouldUseResetAnimation?: boolean;\n    /**\n     * Whether the typewriter should wait for new content\n     */\n    shouldWaitForContent?: boolean;\n    /**\n     * The speed of the animation. Use the TypewriterSpeed enum for this prop.\n     */\n    speed?: TypewriterSpeed | number;\n    /**\n     * The style of the typewriter text element\n     */\n    textStyle?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    onFinish,\n    pseudoChildren,\n    resetDelay = TypewriterResetDelay.Medium,\n    shouldForceCursorAnimation = false,\n    shouldHideCursor = false,\n    shouldSortChildrenRandomly = false,\n    shouldUseAnimationHeight = false,\n    shouldUseResetAnimation = false,\n    shouldWaitForContent,\n    speed = TypewriterSpeed.Medium,\n    textStyle,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n    const [shouldCount, setShouldCount] = useState(true);\n    const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n    useLayoutEffect(() => {\n        if (children) {\n            setHasRenderedChildrenOnce(false);\n        }\n    }, [children]);\n\n    useEffect(() => {\n        if (!hasRenderedChildrenOnce) {\n            setHasRenderedChildrenOnce(true);\n        }\n    }, [hasRenderedChildrenOnce]);\n\n    const sortedChildren = useMemo(\n        () =>\n            Array.isArray(children) && shouldSortChildrenRandomly\n                ? shuffleArray<ReactElement | string>(children)\n                : children,\n        [children, shouldSortChildrenRandomly],\n    );\n\n    const areMultipleChildrenGiven = Array.isArray(sortedChildren);\n    const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;\n\n    const textContent = useMemo(() => {\n        if (areMultipleChildrenGiven) {\n            const currentChildren = sortedChildren[currentChildrenIndex];\n\n            if (currentChildren) {\n                return React.isValidElement(currentChildren)\n                    ? renderToString(\n                          <ColorSchemeProvider\n                              color=\"#005EB8\"\n                              colorMode={0}\n                              style={{ display: 'inline' }}\n                          >\n                              {currentChildren}\n                          </ColorSchemeProvider>,\n                      )\n                    : (currentChildren as string);\n            }\n\n            return '';\n        }\n\n        return React.isValidElement(sortedChildren)\n            ? renderToString(\n                  <ColorSchemeProvider color=\"#005EB8\" colorMode={0} style={{ display: 'inline' }}>\n                      {sortedChildren}\n                  </ColorSchemeProvider>,\n              )\n            : (sortedChildren as string);\n    }, [areMultipleChildrenGiven, currentChildrenIndex, sortedChildren]);\n\n    const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n    const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n    const [shownCharCount, setShownCharCount] = useState(\n        charactersCount > 0 ? 0 : textContent.length,\n    );\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n    const [prevChildren, setPrevChildren] = useState<TypewriterProps['children']>(children);\n\n    useEffect(() => {\n        if (children !== prevChildren) {\n            setShouldCount(true);\n            setPrevChildren(children);\n        }\n    }, [children, prevChildren]);\n\n    const isAnimatingText =\n        shownCharCount < textContent.length ||\n        shouldForceCursorAnimation ||\n        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    const handleSetNextChildrenIndex = useCallback(\n        () =>\n            setCurrentChildrenIndex(() => {\n                let newIndex = currentChildrenIndex + 1;\n\n                if (newIndex > childrenCount - 1) {\n                    newIndex = 0;\n                }\n\n                return newIndex;\n            }),\n        [childrenCount, currentChildrenIndex],\n    );\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation || charactersCount === 0) {\n            setShownCharCount(textContent.length);\n        } else if (isResetAnimationActive) {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState - 1;\n\n                    if (nextState === 0) {\n                        window.clearInterval(interval);\n\n                        if (areMultipleChildrenGiven) {\n                            setTimeout(() => {\n                                setIsResetAnimationActive(false);\n                                handleSetNextChildrenIndex();\n                            }, resetDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        } else {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    let nextState = prevState;\n\n                    if (shouldCount) {\n                        nextState = prevState + 1;\n                    }\n\n                    if (nextState >= charactersCount) {\n                        if (shouldWaitForContent) {\n                            setShouldCount(false);\n                        } else {\n                            window.clearInterval(interval);\n\n                            /**\n                             * At this point, the next value for \"shownCharCount\" is deliberately set to\n                             * the length of the textContent in order to correctly display HTML elements\n                             * after the last letter.\n                             */\n                            nextState = textContent.length;\n\n                            if (areMultipleChildrenGiven) {\n                                setTimeout(() => {\n                                    if (shouldUseResetAnimation) {\n                                        setIsResetAnimationActive(true);\n                                    } else {\n                                        setShownCharCount(0);\n                                        setTimeout(handleSetNextChildrenIndex, resetDelay / 2);\n                                    }\n                                }, resetDelay);\n                            }\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        shouldStopAnimation,\n        speed,\n        textContent.length,\n        charactersCount,\n        isResetAnimationActive,\n        areMultipleChildrenGiven,\n        resetDelay,\n        childrenCount,\n        handleSetNextChildrenIndex,\n        shouldUseResetAnimation,\n        shouldCount,\n        shouldWaitForContent,\n    ]);\n\n    useEffect(() => {\n        if (!isAnimatingText && typeof onFinish === 'function') {\n            onFinish();\n        }\n    }, [isAnimatingText, onFinish]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(textContent, shownCharCount),\n        [shownCharCount, textContent],\n    );\n\n    const pseudoTextHTML = useMemo(() => {\n        if (pseudoChildren) {\n            const pseudoText = React.isValidElement(pseudoChildren)\n                ? renderToString(\n                      <ColorSchemeProvider\n                          color=\"#005EB8\"\n                          colorMode={0}\n                          style={{ display: 'inline' }}\n                      >\n                          {pseudoChildren}\n                      </ColorSchemeProvider>,\n                  )\n                : (pseudoChildren as string);\n\n            if (shouldUseAnimationHeight) {\n                return getSubTextFromHTML(pseudoText, shownCharCount);\n            }\n\n            return pseudoText;\n        }\n\n        if (shouldUseAnimationHeight && textContent) {\n            return getSubTextFromHTML(textContent, shownCharCount);\n        }\n\n        return textContent || '&#8203;';\n    }, [pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent]);\n\n    return useMemo(\n        () => (\n            <StyledTypewriter onClick={handleClick}>\n                {isAnimatingText ? (\n                    <StyledTypewriterText\n                        dangerouslySetInnerHTML={{ __html: shownText }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                        style={textStyle}\n                    />\n                ) : (\n                    <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n                )}\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\n                        dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                    />\n                )}\n                {/*\n                    The following is needed because some components like the CodeHighlighter will not render correct\n                    if the element is not rendered on client before...\n                */}\n                {!hasRenderedChildrenOnce &&\n                    createPortal(\n                        <div style={{ position: 'absolute', visibility: 'hidden' }}>\n                            {children}\n                        </div>,\n                        document.body,\n                    )}\n            </StyledTypewriter>\n        ),\n        [\n            children,\n            handleClick,\n            hasRenderedChildrenOnce,\n            isAnimatingText,\n            pseudoTextHTML,\n            shouldHideCursor,\n            shownText,\n            sortedChildren,\n            textStyle,\n        ],\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/typewriter/Typewriter.styles.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTypewriterText = exports.StyledTypewriterPseudoText = exports.StyledTypewriter = 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 StyledTypewriter = exports.StyledTypewriter = _styledComponents.default.div`
+    align-items: inherit;
+    display: flex;
+    position: relative;
+    width: 100%;
+`;
+const blinkAnimation = (0, _styledComponents.keyframes)`
+  100% {
+    visibility: hidden;
+  }
+`;
+const typewriterCursorElement = ({
+  $isAnimatingText,
+  $shouldHideCursor
+}) => $isAnimatingText && !$shouldHideCursor && (0, _styledComponents.css)`
+        &:after {
+            animation: ${blinkAnimation} 1s steps(5, start) infinite;
+            color: ${({
+  theme
+}) => theme.text};
+            content: '▋';
+            margin-left: 0.25rem;
+            opacity: 0.85;
+            position: relative;
+            vertical-align: baseline;
+        }
+    `;
+const StyledTypewriterPseudoText = exports.StyledTypewriterPseudoText = _styledComponents.default.span`
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+
+    ${typewriterCursorElement}
+`;
+const StyledTypewriterText = exports.StyledTypewriterText = _styledComponents.default.span`
+    color: inherit;
+    position: ${({
+  $isAnimatingText
+}) => $isAnimatingText ? 'absolute' : 'relative'};
+    width: 100%;
+
+    ${typewriterCursorElement}
+`;
+//# sourceMappingURL=Typewriter.styles.js.map

package/lib/cjs/components/typewriter/Typewriter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typewriter.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","StyledTypewriter","exports","styled","div","blinkAnimation","keyframes","typewriterCursorElement","$isAnimatingText","$shouldHideCursor","css","theme","text","StyledTypewriterPseudoText","span","StyledTypewriterText"],"sources":["../../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const StyledTypewriter = styled.div`\n    align-items: inherit;\n    display: flex;\n    position: relative;\n    width: 100%;\n`;\n\nconst blinkAnimation = keyframes`\n  100% {\n    visibility: hidden;\n  }\n`;\n\nconst typewriterCursorElement = ({\n    $isAnimatingText,\n    $shouldHideCursor,\n}: {\n    $isAnimatingText?: boolean;\n    $shouldHideCursor?: boolean;\n}) =>\n    $isAnimatingText &&\n    !$shouldHideCursor &&\n    css`\n        &:after {\n            animation: ${blinkAnimation} 1s steps(5, start) infinite;\n            color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n            content: '▋';\n            margin-left: 0.25rem;\n            opacity: 0.85;\n            position: relative;\n            vertical-align: baseline;\n        }\n    `;\n\nexport const StyledTypewriterPseudoText = styled.span<StyledTypewriterTextProps>`\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n\n    ${typewriterCursorElement}\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n    $isAnimatingText?: boolean;\n    $shouldHideCursor?: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n    color: inherit;\n    position: ${({ $isAnimatingText }) => ($isAnimatingText ? 'absolute' : 'relative')};\n    width: 100%;\n\n    ${typewriterCursorElement}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA2D,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;AAEpD,MAAMW,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,cAAc,GAAG,IAAAC,2BAAS;AAChC;AACA;AACA;AACA,CAAC;AAED,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,gBAAgB;EAChBC;AAIJ,CAAC,KACGD,gBAAgB,IAChB,CAACC,iBAAiB,IAClB,IAAAC,qBAAG;AACP;AACA,yBAAyBL,cAAc;AACvC,qBAAqB,CAAC;EAAEM;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACzE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AAEE,MAAMC,0BAA0B,GAAAX,OAAA,CAAAW,0BAAA,GAAGV,yBAAM,CAACW,IAA+B;AAChF;AACA;AACA;AACA;AACA,MAAMP,uBAAuB;AAC7B,CAAC;AAOM,MAAMQ,oBAAoB,GAAAb,OAAA,CAAAa,oBAAA,GAAGZ,yBAAM,CAACW,IAA+B;AAC1E;AACA,gBAAgB,CAAC;EAAEN;AAAiB,CAAC,KAAMA,gBAAgB,GAAG,UAAU,GAAG,UAAW;AACtF;AACA;AACA,MAAMD,uBAAuB;AAC7B,CAAC","ignoreList":[]}

package/lib/{components → cjs/components}/typewriter/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSubTextFromHTML = exports.getCharactersCount = void 0;
+exports.shuffleArray = exports.getSubTextFromHTML = exports.getCharactersCount = void 0;
 /**
  * This function extracts a part of the text from an HTML text. The HTML elements themselves are
  * returned in the result. In addition, the function ensures that the closing tag of the Bold HTML
@@ -67,6 +67,10 @@ const getCharactersCount = html => {
     if (node.nodeType === 3 && typeof node.textContent === 'string') {
       count += node.textContent.trim().length;
     } else if (node.nodeType === 1) {
+      if (node.nodeName === 'CODE' && node.textContent !== null) {
+        count += node.textContent.length;
+        return;
+      }
       Array.from(node.childNodes).forEach(traverse);
     }
   };
@@ -74,4 +78,13 @@ const getCharactersCount = html => {
   return count;
 };
 exports.getCharactersCount = getCharactersCount;
+const shuffleArray = array => {
+  const result = Array.from(array);
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [result[i], result[j]] = [result[j], result[i]];
+  }
+  return result;
+};
+exports.shuffleArray = shuffleArray;
 //# sourceMappingURL=utils.js.map

package/lib/cjs/components/typewriter/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","element","nodeType","textContent","nodeText","substring","nodeName","toLowerCase","attributes","attribute","name","value","i","childNodes","childNode","exports","getCharactersCount","count","node","trim","Array","from","forEach","shuffleArray","array","result","j","Math","floor","random"],"sources":["../../../../src/components/typewriter/utils.ts"],"sourcesContent":["/**\n * This function extracts a part of the text from an HTML text. The HTML elements themselves are\n * returned in the result. In addition, the function ensures that the closing tag of the Bold HTML\n * element is also returned for text that is cut off in the middle of a Bold element, for example.\n *\n * @param html - The text from which a part should be taken\n * @param length - The length of the text to be extracted\n *\n * @return string - The text part with the specified length - additionally the HTML elements are added\n */\nexport const getSubTextFromHTML = (html: string, length: number): string => {\n    const div = document.createElement('div');\n\n    div.innerHTML = html;\n\n    let text = '';\n    let currLength = 0;\n\n    const traverse = (element: Element): boolean => {\n        if (element.nodeType === 3 && typeof element.textContent === 'string') {\n            const nodeText = element.textContent;\n\n            if (currLength + nodeText.length <= length) {\n                text += nodeText;\n                currLength += nodeText.length;\n            } else {\n                text += nodeText.substring(0, length - currLength);\n\n                return false;\n            }\n        } else if (element.nodeType === 1) {\n            const nodeName = element.nodeName.toLowerCase();\n\n            let attributes = '';\n\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line no-restricted-syntax\n            for (const attribute of element.attributes) {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions\n                attributes += ` ${attribute.name}=\"${attribute.value}\"`;\n            }\n\n            text += `<${nodeName}${attributes}>`;\n\n            for (let i = 0; i < element.childNodes.length; i++) {\n                const childNode = element.childNodes[i];\n\n                if (childNode && !traverse(childNode as Element)) {\n                    return false;\n                }\n            }\n\n            text += `</${nodeName}>`;\n        }\n\n        return true;\n    };\n\n    for (let i = 0; i < div.childNodes.length; i++) {\n        const childNode = div.childNodes[i];\n\n        if (childNode && !traverse(childNode as Element)) {\n            return text;\n        }\n    }\n\n    return text;\n};\n\nexport const getCharactersCount = (html: string): number => {\n    const div = document.createElement('div');\n\n    div.innerHTML = html;\n\n    let count = 0;\n\n    const traverse = (node: Node): void => {\n        if (node.nodeType === 3 && typeof node.textContent === 'string') {\n            count += node.textContent.trim().length;\n        } else if (node.nodeType === 1) {\n            if (node.nodeName === 'CODE' && node.textContent !== null) {\n                count += node.textContent.length;\n\n                return;\n            }\n\n            Array.from(node.childNodes).forEach(traverse);\n        }\n    };\n\n    Array.from(div.childNodes).forEach(traverse);\n\n    return count;\n};\n\nexport const shuffleArray = <T>(array: T[]): T[] => {\n    const result = Array.from(array);\n\n    for (let i = result.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n\n        [result[i], result[j]] = [result[j]!, result[i]!];\n    }\n\n    return result;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Typewriter", {
+  enumerable: true,
+  get: function () {
+    return _Typewriter.default;
+  }
+});
+Object.defineProperty(exports, "TypewriterSpeed", {
+  enumerable: true,
+  get: function () {
+    return _Typewriter.TypewriterSpeed;
+  }
+});
+var _Typewriter = _interopRequireWildcard(require("./components/typewriter/Typewriter"));
+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; }
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Typewriter","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as Typewriter, TypewriterSpeed } from './components/typewriter/Typewriter';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA4F,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","ignoreList":[]}

package/lib/esm/components/typewriter/Typewriter.js

@@ -0,0 +1,208 @@
+import { ColorSchemeProvider } from '@chayns-components/core';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { renderToString } from 'react-dom/server';
+import { StyledTypewriter, StyledTypewriterPseudoText, StyledTypewriterText } from './Typewriter.styles';
+import { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';
+
+// noinspection JSUnusedGlobalSymbols
+export let TypewriterResetDelay = /*#__PURE__*/function (TypewriterResetDelay) {
+  TypewriterResetDelay[TypewriterResetDelay["Slow"] = 4000] = "Slow";
+  TypewriterResetDelay[TypewriterResetDelay["Medium"] = 2000] = "Medium";
+  TypewriterResetDelay[TypewriterResetDelay["Fast"] = 1000] = "Fast";
+  return TypewriterResetDelay;
+}({});
+
+// noinspection JSUnusedGlobalSymbols
+export let TypewriterSpeed = /*#__PURE__*/function (TypewriterSpeed) {
+  TypewriterSpeed[TypewriterSpeed["Slow"] = 30] = "Slow";
+  TypewriterSpeed[TypewriterSpeed["Medium"] = 20] = "Medium";
+  TypewriterSpeed[TypewriterSpeed["Fast"] = 10] = "Fast";
+  return TypewriterSpeed;
+}({});
+const Typewriter = _ref => {
+  let {
+    children,
+    onFinish,
+    pseudoChildren,
+    resetDelay = TypewriterResetDelay.Medium,
+    shouldForceCursorAnimation = false,
+    shouldHideCursor = false,
+    shouldSortChildrenRandomly = false,
+    shouldUseAnimationHeight = false,
+    shouldUseResetAnimation = false,
+    shouldWaitForContent,
+    speed = TypewriterSpeed.Medium,
+    textStyle
+  } = _ref;
+  const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);
+  const [shouldCount, setShouldCount] = useState(true);
+  const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);
+  useLayoutEffect(() => {
+    if (children) {
+      setHasRenderedChildrenOnce(false);
+    }
+  }, [children]);
+  useEffect(() => {
+    if (!hasRenderedChildrenOnce) {
+      setHasRenderedChildrenOnce(true);
+    }
+  }, [hasRenderedChildrenOnce]);
+  const sortedChildren = useMemo(() => Array.isArray(children) && shouldSortChildrenRandomly ? shuffleArray(children) : children, [children, shouldSortChildrenRandomly]);
+  const areMultipleChildrenGiven = Array.isArray(sortedChildren);
+  const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;
+  const textContent = useMemo(() => {
+    if (areMultipleChildrenGiven) {
+      const currentChildren = sortedChildren[currentChildrenIndex];
+      if (currentChildren) {
+        return /*#__PURE__*/React.isValidElement(currentChildren) ? renderToString( /*#__PURE__*/React.createElement(ColorSchemeProvider, {
+          color: "#005EB8",
+          colorMode: 0,
+          style: {
+            display: 'inline'
+          }
+        }, currentChildren)) : currentChildren;
+      }
+      return '';
+    }
+    return /*#__PURE__*/React.isValidElement(sortedChildren) ? renderToString( /*#__PURE__*/React.createElement(ColorSchemeProvider, {
+      color: "#005EB8",
+      colorMode: 0,
+      style: {
+        display: 'inline'
+      }
+    }, sortedChildren)) : sortedChildren;
+  }, [areMultipleChildrenGiven, currentChildrenIndex, sortedChildren]);
+  const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);
+  const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);
+  const [shownCharCount, setShownCharCount] = useState(charactersCount > 0 ? 0 : textContent.length);
+  const [shouldStopAnimation, setShouldStopAnimation] = useState(false);
+  const [prevChildren, setPrevChildren] = useState(children);
+  useEffect(() => {
+    if (children !== prevChildren) {
+      setShouldCount(true);
+      setPrevChildren(children);
+    }
+  }, [children, prevChildren]);
+  const isAnimatingText = shownCharCount < textContent.length || shouldForceCursorAnimation || areMultipleChildrenGiven || textContent.length === 0;
+  const handleClick = useCallback(() => {
+    setShouldStopAnimation(true);
+  }, []);
+  const handleSetNextChildrenIndex = useCallback(() => setCurrentChildrenIndex(() => {
+    let newIndex = currentChildrenIndex + 1;
+    if (newIndex > childrenCount - 1) {
+      newIndex = 0;
+    }
+    return newIndex;
+  }), [childrenCount, currentChildrenIndex]);
+  useEffect(() => {
+    let interval;
+    if (shouldStopAnimation || charactersCount === 0) {
+      setShownCharCount(textContent.length);
+    } else if (isResetAnimationActive) {
+      interval = window.setInterval(() => {
+        setShownCharCount(prevState => {
+          const nextState = prevState - 1;
+          if (nextState === 0) {
+            window.clearInterval(interval);
+            if (areMultipleChildrenGiven) {
+              setTimeout(() => {
+                setIsResetAnimationActive(false);
+                handleSetNextChildrenIndex();
+              }, resetDelay);
+            }
+          }
+          return nextState;
+        });
+      }, speed);
+    } else {
+      interval = window.setInterval(() => {
+        setShownCharCount(prevState => {
+          let nextState = prevState;
+          if (shouldCount) {
+            nextState = prevState + 1;
+          }
+          if (nextState >= charactersCount) {
+            if (shouldWaitForContent) {
+              setShouldCount(false);
+            } else {
+              window.clearInterval(interval);
+
+              /**
+               * At this point, the next value for "shownCharCount" is deliberately set to
+               * the length of the textContent in order to correctly display HTML elements
+               * after the last letter.
+               */
+              nextState = textContent.length;
+              if (areMultipleChildrenGiven) {
+                setTimeout(() => {
+                  if (shouldUseResetAnimation) {
+                    setIsResetAnimationActive(true);
+                  } else {
+                    setShownCharCount(0);
+                    setTimeout(handleSetNextChildrenIndex, resetDelay / 2);
+                  }
+                }, resetDelay);
+              }
+            }
+          }
+          return nextState;
+        });
+      }, speed);
+    }
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [shouldStopAnimation, speed, textContent.length, charactersCount, isResetAnimationActive, areMultipleChildrenGiven, resetDelay, childrenCount, handleSetNextChildrenIndex, shouldUseResetAnimation, shouldCount, shouldWaitForContent]);
+  useEffect(() => {
+    if (!isAnimatingText && typeof onFinish === 'function') {
+      onFinish();
+    }
+  }, [isAnimatingText, onFinish]);
+  const shownText = useMemo(() => getSubTextFromHTML(textContent, shownCharCount), [shownCharCount, textContent]);
+  const pseudoTextHTML = useMemo(() => {
+    if (pseudoChildren) {
+      const pseudoText = /*#__PURE__*/React.isValidElement(pseudoChildren) ? renderToString( /*#__PURE__*/React.createElement(ColorSchemeProvider, {
+        color: "#005EB8",
+        colorMode: 0,
+        style: {
+          display: 'inline'
+        }
+      }, pseudoChildren)) : pseudoChildren;
+      if (shouldUseAnimationHeight) {
+        return getSubTextFromHTML(pseudoText, shownCharCount);
+      }
+      return pseudoText;
+    }
+    if (shouldUseAnimationHeight && textContent) {
+      return getSubTextFromHTML(textContent, shownCharCount);
+    }
+    return textContent || '&#8203;';
+  }, [pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTypewriter, {
+    onClick: handleClick
+  }, isAnimatingText ? /*#__PURE__*/React.createElement(StyledTypewriterText, {
+    dangerouslySetInnerHTML: {
+      __html: shownText
+    },
+    $isAnimatingText: true,
+    $shouldHideCursor: shouldHideCursor,
+    style: textStyle
+  }) : /*#__PURE__*/React.createElement(StyledTypewriterText, {
+    style: textStyle
+  }, sortedChildren), isAnimatingText && /*#__PURE__*/React.createElement(StyledTypewriterPseudoText, {
+    dangerouslySetInnerHTML: {
+      __html: pseudoTextHTML
+    },
+    $isAnimatingText: true,
+    $shouldHideCursor: shouldHideCursor
+  }), !hasRenderedChildrenOnce && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      visibility: 'hidden'
+    }
+  }, children), document.body)), [children, handleClick, hasRenderedChildrenOnce, isAnimatingText, pseudoTextHTML, shouldHideCursor, shownText, sortedChildren, textStyle]);
+};
+Typewriter.displayName = 'Typewriter';
+export default Typewriter;
+//# sourceMappingURL=Typewriter.js.map