@chayns-components/typewriter 5.0.0-beta.99 → 5.0.0-beta.991

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

@@ -0,0 +1,108 @@
+/**
+ * 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
+ * element is also returned for text that is cut off in the middle of a Bold element, for example.
+ *
+ * @param html - The text from which a part should be taken
+ * @param length - The length of the text to be extracted
+ *
+ * @return string - The text part with the specified length - additionally the HTML elements are added
+ */
+export const getSubTextFromHTML = (html, length) => {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  let text = '';
+  let currLength = 0;
+  const traverse = element => {
+    if (element.nodeName === 'TWIGNORE') {
+      text += element.innerHTML;
+    } else if (element.nodeType === 3 && typeof element.textContent === 'string') {
+      const nodeText = element.textContent;
+      if (currLength + nodeText.length <= length) {
+        text += nodeText;
+        currLength += nodeText.length;
+      } else {
+        text += nodeText.substring(0, length - currLength);
+        return false;
+      }
+    } else if (element.nodeType === 1) {
+      const nodeName = element.nodeName.toLowerCase();
+      let attributes = '';
+
+      // @ts-expect-error: Type is correct here
+      // eslint-disable-next-line no-restricted-syntax
+      for (const attribute of element.attributes) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions
+        attributes += ` ${attribute.name}="${attribute.value}"`;
+      }
+      text += `<${nodeName}${attributes}>`;
+      for (let i = 0; i < element.childNodes.length; i++) {
+        const childNode = element.childNodes[i];
+        if (childNode && !traverse(childNode)) {
+          return false;
+        }
+      }
+      text += `</${nodeName}>`;
+    }
+    return true;
+  };
+  for (let i = 0; i < div.childNodes.length; i++) {
+    const childNode = div.childNodes[i];
+    if (childNode && !traverse(childNode)) {
+      return text;
+    }
+  }
+  return text;
+};
+export const getCharactersCount = html => {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  let count = 0;
+  const traverse = node => {
+    if (node.nodeName === 'TWIGNORE') {
+      count += 1;
+    } else 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);
+    }
+  };
+  Array.from(div.childNodes).forEach(traverse);
+  return count;
+};
+export 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;
+};
+export const calculateAutoSpeed = _ref => {
+  let {
+    fullTextLength,
+    currentPosition,
+    baseSpeedFactor
+  } = _ref;
+  const MIN_SPEED = 1;
+  const MAX_SPEED = 10;
+  const remainingLength = fullTextLength - currentPosition;
+
+  // Calculate the speed with the remaining text length and the baseSpeedFactor
+  const speed = Math.min(baseSpeedFactor / remainingLength, MAX_SPEED);
+  if (speed < MIN_SPEED) {
+    return {
+      speed: 1,
+      steps: 2
+    };
+  }
+  return {
+    speed,
+    steps: 1
+  };
+};
+//# sourceMappingURL=utils.js.map

package/lib/esm/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","nodeName","nodeType","textContent","nodeText","substring","toLowerCase","attributes","attribute","name","value","i","childNodes","childNode","getCharactersCount","count","node","trim","Array","from","forEach","shuffleArray","array","result","j","Math","floor","random","calculateAutoSpeed","_ref","fullTextLength","currentPosition","baseSpeedFactor","MIN_SPEED","MAX_SPEED","remainingLength","speed","min","steps"],"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.nodeName === 'TWIGNORE') {\n            text += element.innerHTML;\n        } else 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.nodeName === 'TWIGNORE') {\n            count += 1;\n        } else 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\ninterface CalculateAutoSpeedProps {\n    fullTextLength: number;\n    currentPosition: number;\n    baseSpeedFactor: number;\n}\n\nexport const calculateAutoSpeed = ({\n    fullTextLength,\n    currentPosition,\n    baseSpeedFactor,\n}: CalculateAutoSpeedProps): { speed: number; steps: number } => {\n    const MIN_SPEED = 1;\n    const MAX_SPEED = 10;\n\n    const remainingLength = fullTextLength - currentPosition;\n\n    // Calculate the speed with the remaining text length and the baseSpeedFactor\n    const speed = Math.min(baseSpeedFactor / remainingLength, MAX_SPEED);\n\n    if (speed < MIN_SPEED) {\n        return { speed: 1, steps: 2 };\n    }\n\n    return { speed, steps: 1 };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/index.js

@@ -0,0 +1,4 @@
+export { default as Typewriter } from './components/typewriter/Typewriter';
+export { CursorType } from './types/cursor';
+export { TypewriterDelay, TypewriterSpeed } from './types/speed';
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Typewriter","CursorType","TypewriterDelay","TypewriterSpeed"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as Typewriter } from './components/typewriter/Typewriter';\nexport { CursorType } from './types/cursor';\nexport { TypewriterDelay, TypewriterSpeed } from './types/speed';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,oCAAoC;AAC1E,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,eAAe,EAAEC,eAAe,QAAQ,eAAe","ignoreList":[]}

package/lib/esm/types/cursor.js

@@ -0,0 +1,6 @@
+export let CursorType = /*#__PURE__*/function (CursorType) {
+  CursorType["Default"] = "default";
+  CursorType["Thin"] = "thin";
+  return CursorType;
+}({});
+//# sourceMappingURL=cursor.js.map

package/lib/esm/types/cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor.js","names":["CursorType"],"sources":["../../../src/types/cursor.ts"],"sourcesContent":["export enum CursorType {\n    Default = 'default',\n    Thin = 'thin',\n}\n"],"mappings":"AAAA,WAAYA,UAAU,0BAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA","ignoreList":[]}

package/lib/esm/types/speed.js

@@ -0,0 +1,21 @@
+// noinspection JSUnusedGlobalSymbols
+export let TypewriterDelay = /*#__PURE__*/function (TypewriterDelay) {
+  TypewriterDelay[TypewriterDelay["ExtraSlow"] = 4000] = "ExtraSlow";
+  TypewriterDelay[TypewriterDelay["Slow"] = 2000] = "Slow";
+  TypewriterDelay[TypewriterDelay["Medium"] = 1000] = "Medium";
+  TypewriterDelay[TypewriterDelay["Fast"] = 500] = "Fast";
+  TypewriterDelay[TypewriterDelay["ExtraFast"] = 250] = "ExtraFast";
+  TypewriterDelay[TypewriterDelay["None"] = 0] = "None";
+  return TypewriterDelay;
+}({});
+
+// noinspection JSUnusedGlobalSymbols
+export let TypewriterSpeed = /*#__PURE__*/function (TypewriterSpeed) {
+  TypewriterSpeed[TypewriterSpeed["ExtraSlow"] = 40] = "ExtraSlow";
+  TypewriterSpeed[TypewriterSpeed["Slow"] = 20] = "Slow";
+  TypewriterSpeed[TypewriterSpeed["Medium"] = 10] = "Medium";
+  TypewriterSpeed[TypewriterSpeed["Fast"] = 5] = "Fast";
+  TypewriterSpeed[TypewriterSpeed["ExtraFast"] = 2.5] = "ExtraFast";
+  return TypewriterSpeed;
+}({});
+//# sourceMappingURL=speed.js.map

package/lib/esm/types/speed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"speed.js","names":["TypewriterDelay","TypewriterSpeed"],"sources":["../../../src/types/speed.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n    ExtraSlow = 4000,\n    Slow = 2000,\n    Medium = 1000,\n    Fast = 500,\n    ExtraFast = 250,\n    None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n    ExtraSlow = 40,\n    Slow = 20,\n    Medium = 10,\n    Fast = 5,\n    ExtraFast = 2.5,\n}\n"],"mappings":"AAAA;AACA,WAAYA,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;;AAS3B;AACA,WAAYC,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}

package/lib/types/components/typewriter/AnimatedTypewriterText.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+type AnimatedTypewriterTextProps = {
+    shouldHideCursor: boolean;
+    shownText: string;
+    textStyle?: React.CSSProperties;
+};
+declare const AnimatedTypewriterText: FC<AnimatedTypewriterTextProps>;
+export default AnimatedTypewriterText;

package/lib/types/components/typewriter/Typewriter.d.ts

@@ -0,0 +1,111 @@
+import React, { FC, ReactElement } from 'react';
+import { CursorType } from '../../types/cursor';
+import { TypewriterDelay, TypewriterSpeed } from '../../types/speed';
+export type TypewriterProps = {
+    /**
+     * The amount of characters that will be animated per animation cycle.
+     */
+    animationSteps?: number;
+    /**
+     * The base speed factor to calculate the animation speed.
+     */
+    autoSpeedBaseFactor?: number;
+    /**
+     * The text to type
+     */
+    children: ReactElement | ReactElement[] | string | string[];
+    /**
+     * The type of the cursor. Use the CursorType enum for this prop.
+     */
+    cursorType?: CursorType;
+    /**
+     * The delay in milliseconds before the next text is shown.
+     * This prop is only used if multiple texts are given.
+     */
+    nextTextDelay?: TypewriterDelay;
+    /**
+     * Function that is executed when the typewriter animation has finished. This function will not
+     * be executed if multiple texts are used.
+     */
+    onFinish?: VoidFunction;
+    /**
+     * Function that is executed when the reset animation has finished. This function will not be
+     * executed if `shouldUseResetAnimation` is not set to `true`.
+     */
+    onResetAnimationEnd?: VoidFunction;
+    /**
+     * Function that is executed when the reset animation has started. This function will not be
+     * executed if `shouldUseResetAnimation` is not set to `true`.
+     */
+    onResetAnimationStart?: VoidFunction;
+    /**
+     * Function that is executed when the typing animation has finished. If multiple texts are given,
+     * this function will be executed for each text.
+     */
+    onTypingAnimationEnd?: VoidFunction;
+    /**
+     * Function that is executed when the typing animation has started. If multiple texts are given,
+     * this function will be executed for each text.
+     */
+    onTypingAnimationStart?: VoidFunction;
+    /**
+     * Pseudo-element to be rendered invisible during animation to define the size of the element
+     * for the typewriter effect. By default, the "children" is used for this purpose.
+     */
+    pseudoChildren?: ReactElement | string;
+    /**
+     * Waiting time in milliseconds before the typewriter resets the text.
+     * This prop is only used if multiple texts are given.
+     */
+    resetDelay?: TypewriterDelay;
+    /**
+     * The reset speed of the animation. Use the TypewriterSpeed enum for this prop.
+     */
+    resetSpeed?: TypewriterSpeed | number;
+    /**
+     * Specifies whether the cursor should be forced to animate even if no text is currently animated.
+     */
+    shouldForceCursorAnimation?: boolean;
+    /**
+     * Specifies whether the cursor should be hidden
+     */
+    shouldHideCursor?: boolean;
+    /**
+     * Specifies whether the children should be sorted randomly if there are multiple texts.
+     * This makes the typewriter start with a different text each time and also changes them
+     * in a random order.
+     */
+    shouldSortChildrenRandomly?: boolean;
+    /**
+     * Specifies whether the animation should use its full height or the height of the current
+     * chunk.
+     */
+    shouldUseAnimationHeight?: boolean;
+    /**
+     * Whether the animation speed should be calculated with the chunk interval.
+     */
+    shouldCalcAutoSpeed?: boolean;
+    /**
+     * Specifies whether the reset of the text should be animated with a backspace animation for
+     * multiple texts.
+     */
+    shouldUseResetAnimation?: boolean;
+    /**
+     * Whether the typewriter should wait for new content
+     */
+    shouldWaitForContent?: boolean;
+    /**
+     * The speed of the animation. Use the TypewriterSpeed enum for this prop.
+     */
+    speed?: TypewriterSpeed | number;
+    /**
+     * The delay in milliseconds before the typewriter starts typing.
+     */
+    startDelay?: TypewriterDelay;
+    /**
+     * The style of the typewriter text element
+     */
+    textStyle?: React.CSSProperties;
+};
+declare const Typewriter: FC<TypewriterProps>;
+export default Typewriter;

package/lib/types/components/typewriter/Typewriter.styles.d.ts

@@ -0,0 +1,19 @@
+import type { WithTheme } from '@chayns-components/core';
+import type { TypewriterProps } from './Typewriter';
+type StyledTypewriterProps = WithTheme<{
+    $cursorType: TypewriterProps['cursorType'];
+    $isAnimatingText: boolean;
+    $shouldHideCursor: TypewriterProps['shouldHideCursor'];
+    $shouldPreventBlinkAnimation: boolean;
+}>;
+export declare const StyledTypewriter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTypewriterProps>> & string;
+type StyledTypewriterPseudoTextProps = WithTheme<{
+    $isAnimatingText?: boolean;
+    $shouldHideCursor: TypewriterProps['shouldHideCursor'];
+}>;
+export declare const StyledTypewriterPseudoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledTypewriterPseudoTextProps>> & string;
+type StyledTypewriterTextProps = WithTheme<{
+    $isAnimatingText?: boolean;
+}>;
+export declare const StyledTypewriterText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledTypewriterTextProps>> & string;
+export {};

package/lib/{components → types/components}/typewriter/utils.d.ts

@@ -10,3 +10,14 @@
  */
 export declare const getSubTextFromHTML: (html: string, length: number) => string;
 export declare const getCharactersCount: (html: string) => number;
+export declare const shuffleArray: <T>(array: T[]) => T[];
+interface CalculateAutoSpeedProps {
+    fullTextLength: number;
+    currentPosition: number;
+    baseSpeedFactor: number;
+}
+export declare const calculateAutoSpeed: ({ fullTextLength, currentPosition, baseSpeedFactor, }: CalculateAutoSpeedProps) => {
+    speed: number;
+    steps: number;
+};
+export {};

package/lib/types/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Typewriter } from './components/typewriter/Typewriter';
+export { CursorType } from './types/cursor';
+export { TypewriterDelay, TypewriterSpeed } from './types/speed';

package/lib/types/types/cursor.d.ts

@@ -0,0 +1,4 @@
+export declare enum CursorType {
+    Default = "default",
+    Thin = "thin"
+}

package/lib/types/types/speed.d.ts

@@ -0,0 +1,15 @@
+export declare enum TypewriterDelay {
+    ExtraSlow = 4000,
+    Slow = 2000,
+    Medium = 1000,
+    Fast = 500,
+    ExtraFast = 250,
+    None = 0
+}
+export declare enum TypewriterSpeed {
+    ExtraSlow = 40,
+    Slow = 20,
+    Medium = 10,
+    Fast = 5,
+    ExtraFast = 2.5
+}

package/package.json

@@ -1,7 +1,14 @@
 {
     "name": "@chayns-components/typewriter",
-    "version": "5.0.0-beta.99",
+    "version": "5.0.0-beta.991",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
+    "sideEffects": false,
+    "browserslist": [
+        ">0.5%",
+        "not dead",
+        "not op_mini all",
+        "not IE 11"
+    ],
     "keywords": [
         "chayns",
         "react",
@@ -10,8 +17,16 @@
     "author": "Tobit.Software",
     "homepage": "https://github.com/TobitSoftware/chayns-components/tree/main/packages/typewriter#readme",
     "license": "MIT",
-    "main": "lib/index.js",
-    "types": "lib/index.d.ts",
+    "types": "lib/types/index.d.ts",
+    "main": "lib/cjs/index.js",
+    "module": "lib/esm/index.js",
+    "exports": {
+        ".": {
+            "types": "./lib/types/index.d.ts",
+            "require": "./lib/cjs/index.js",
+            "import": "./lib/esm/index.js"
+        }
+    },
     "directories": {
         "lib": "lib",
         "test": "__tests__"
@@ -24,44 +39,47 @@
         "url": "git+https://github.com/TobitSoftware/chayns-components.git"
     },
     "scripts": {
-        "build": "npm run build:js && npm run build:types",
-        "build:js": "babel src --out-dir lib --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "build": "npm run build:cjs && npm run build:esm && npm run build:types",
         "build:types": "tsc",
-        "prepublishOnly": "npm run build"
+        "build:cjs": "cross-env NODE_ENV=cjs babel src --out-dir lib/cjs --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "build:esm": "cross-env NODE_ENV=esm babel src --out-dir lib/esm --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "prepublishOnly": "npm run build",
+        "watch:js": "npm run build:esm -- --watch",
+        "link": "npm link && npm run watch:js"
     },
     "bugs": {
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.3",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.21.0",
-        "@types/react": "^17.0.53",
-        "@types/react-dom": "^17.0.19",
-        "@types/styled-components": "^5.1.26",
-        "@types/uuid": "^9.0.1",
-        "babel-loader": "^8.3.0",
-        "lerna": "^6.5.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "typescript": "^4.9.5"
+        "@babel/cli": "^7.26.4",
+        "@babel/core": "^7.26.0",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-react": "^7.26.3",
+        "@babel/preset-typescript": "^7.26.0",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "@types/styled-components": "^5.1.34",
+        "@types/uuid": "^10.0.0",
+        "babel-loader": "^9.2.1",
+        "cross-env": "^7.0.3",
+        "lerna": "^8.1.9",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "styled-components": "^6.1.14",
+        "typescript": "^5.7.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.98",
-        "@chayns/colors": "^2.0.0",
-        "clsx": "^1.2.1",
-        "framer-motion": "^6.5.1",
-        "styled-components": "^5.3.9",
-        "uuid": "^9.0.0"
+        "@chayns-components/core": "^5.0.0-beta.991"
     },
     "peerDependencies": {
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
+        "chayns-api": "^2.2.0-beta.2",
+        "framer-motion": ">=10.18.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "styled-components": ">=5.3.11"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "792291e8747f1f6989cf9bb1ee8bfbc4c9028e5a"
+    "gitHead": "6ed1ca79a66254c138d4ab065c78b555973e770f"
 }

package/lib/components/typewriter/Typewriter.d.ts

@@ -1,31 +0,0 @@
-import { FC, ReactElement } from 'react';
-export declare enum TypewriterResetDelay {
-    Slow = 4000,
-    Medium = 2000,
-    Fast = 1000
-}
-export declare enum TypewriterSpeed {
-    Slow = 40,
-    Medium = 30,
-    Fast = 20
-}
-export type TypewriterProps = {
-    /**
-     * The text to type
-     */
-    children: ReactElement | ReactElement[] | string | string[];
-    /**
-     * Waiting time before the typewriter resets the content if multiple texts are given
-     */
-    resetDelay?: TypewriterResetDelay;
-    /**
-     * Specifies whether the reset of the text should be animated with a backspace animation for multiple texts.
-     */
-    shouldUseResetAnimation?: boolean;
-    /**
-     * The speed of the animation. Use the TypewriterSpeed enum for this prop.
-     */
-    speed?: TypewriterSpeed;
-};
-declare const Typewriter: FC<TypewriterProps>;
-export default Typewriter;

package/lib/components/typewriter/Typewriter.js

@@ -1,137 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TypewriterSpeed = exports.TypewriterResetDelay = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _server = require("react-dom/server");
-var _Typewriter = require("./Typewriter.styles");
-var _utils = require("./utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-let TypewriterResetDelay;
-exports.TypewriterResetDelay = TypewriterResetDelay;
-(function (TypewriterResetDelay) {
-  TypewriterResetDelay[TypewriterResetDelay["Slow"] = 4000] = "Slow";
-  TypewriterResetDelay[TypewriterResetDelay["Medium"] = 2000] = "Medium";
-  TypewriterResetDelay[TypewriterResetDelay["Fast"] = 1000] = "Fast";
-})(TypewriterResetDelay || (exports.TypewriterResetDelay = TypewriterResetDelay = {}));
-let TypewriterSpeed;
-exports.TypewriterSpeed = TypewriterSpeed;
-(function (TypewriterSpeed) {
-  TypewriterSpeed[TypewriterSpeed["Slow"] = 40] = "Slow";
-  TypewriterSpeed[TypewriterSpeed["Medium"] = 30] = "Medium";
-  TypewriterSpeed[TypewriterSpeed["Fast"] = 20] = "Fast";
-})(TypewriterSpeed || (exports.TypewriterSpeed = TypewriterSpeed = {}));
-const Typewriter = _ref => {
-  let {
-    children,
-    resetDelay = TypewriterResetDelay.Medium,
-    shouldUseResetAnimation = false,
-    speed = TypewriterSpeed.Medium
-  } = _ref;
-  const [currentChildrenIndex, setCurrentChildrenIndex] = (0, _react.useState)(0);
-  const areMultipleChildrenGiven = Array.isArray(children);
-  const childrenCount = areMultipleChildrenGiven ? children.length : 1;
-  const textContent = (0, _react.useMemo)(() => {
-    if (areMultipleChildrenGiven) {
-      const currentChildren = children[currentChildrenIndex];
-      if (currentChildren) {
-        return /*#__PURE__*/_react.default.isValidElement(currentChildren) ? (0, _server.renderToString)(currentChildren) : currentChildren;
-      }
-      return '';
-    }
-    return /*#__PURE__*/_react.default.isValidElement(children) ? (0, _server.renderToString)(children) : children;
-  }, [areMultipleChildrenGiven, children, currentChildrenIndex]);
-  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 isAnimatingText = shownCharCount !== textContent.length || areMultipleChildrenGiven;
-  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 + 1;
-          if (nextState === charactersCount) {
-            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]);
-  (0, _react.useEffect)(() => {
-    if (charactersCount) {
-      setIsResetAnimationActive(false);
-      setShownCharCount(0);
-    }
-  }, [charactersCount]);
-  const shownText = (0, _react.useMemo)(() => (0, _utils.getSubTextFromHTML)(textContent, shownCharCount), [shownCharCount, textContent]);
-  return /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, {
-    onClick: handleClick
-  }, isAnimatingText ? /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
-    dangerouslySetInnerHTML: {
-      __html: shownText
-    },
-    isAnimatingText: true
-  }) : /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, null, children), isAnimatingText && /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterPseudoText, {
-    dangerouslySetInnerHTML: {
-      __html: textContent
-    }
-  }));
-};
-Typewriter.displayName = 'Typewriter';
-var _default = Typewriter;
-exports.default = _default;
-//# sourceMappingURL=Typewriter.js.map