@chayns-components/typewriter 5.0.0-beta.997 → 5.0.0

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

@@ -1,51 +1,113 @@
 /**
- * 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.
+ * Returns a substring of an HTML string while preserving HTML structure.
  *
- * @param html - The text from which a part should be taken
- * @param length - The length of the text to be extracted
+ * Core rules:
+ * - Element nodes are re-serialized as tags (start/end) to keep structure.
+ * - Text nodes are always HTML-escaped on output. This prevents that previously
+ *   escaped text (like "<div>") turns into real tags during the DOM round trip.
+ * - Attribute values are HTML-escaped on output.
+ * - Void elements are serialized without closing tags.
+ * - For TWIGNORE/TW-IGNORE elements, the innerHTML is passed through so that
+ *   their content (including real HTML) remains untouched.
+ * - On early cutoff (once the length limit is reached), already opened tags are
+ *   properly closed to keep the result valid HTML.
  *
- * @return string - The text part with the specified length - additionally the HTML elements are added
+ * Note on length counting:
+ * - The length is based on the decoded textContent length (as the DOM provides),
+ *   not on byte length nor escaped entity length. This mirrors how the text is perceived.
+ *
+ * @param html   The input HTML string; may contain a mix of real HTML and already escaped HTML.
+ * @param length The maximum number of text characters (based on textContent) to include.
+ * @returns A valid HTML string containing up to the specified number of text characters,
+ *          preserving HTML tags and keeping escaped text escaped.
  */
 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;
+
+  // Escape text node content to ensure that decoded "<" and ">" do not become real tags.
+  const escapeText = value => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+  // Escape attribute values safely.
+  const escapeAttr = value => String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+  // HTML void elements (must not have closing tags)
+  const VOID_ELEMENTS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+
+  // Traverses nodes and appends to "text".
+  // Returns false to signal "stop traversal" once the length limit is reached.
+  const traverse = node => {
+    // Text node
+    if (node.nodeType === 3 && typeof node.textContent === 'string') {
+      const nodeText = node.textContent;
+      const remaining = length - currLength;
+      if (remaining <= 0) {
+        return false;
+      }
+      if (nodeText.length <= remaining) {
+        // Always escape text before writing to output
+        text += escapeText(nodeText);
         currLength += nodeText.length;
       } else {
-        text += nodeText.substring(0, length - currLength);
+        // Cut the text and stop traversal
+        text += escapeText(nodeText.substring(0, remaining));
+        currLength += remaining;
         return false;
       }
-    } else if (element.nodeType === 1) {
+      return true;
+    }
+
+    // Element node
+    if (node.nodeType === 1) {
+      const element = node;
+
+      // Pass-through for TWIGNORE/TW-IGNORE: keep their HTML as-is.
+      if (element.nodeName === 'TWIGNORE' || element.nodeName === 'TW-IGNORE') {
+        // element.innerHTML serializes children; escaped text stays escaped,
+        // real HTML stays HTML — exactly what we want here.
+        text += element.innerHTML;
+        return true;
+      }
       const nodeName = element.nodeName.toLowerCase();
-      let attributes = '';
 
-      // @ts-expect-error: Type is correct here
+      // Serialize attributes safely
+      let attributes = '';
+      // @ts-expect-error: attributes is a NodeListOf<Attr>
       // 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}"`;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions,@typescript-eslint/no-unsafe-argument
+        attributes += ` ${attribute.name}="${escapeAttr(attribute.value)}"`;
       }
+
+      // Open tag
       text += `<${nodeName}${attributes}>`;
-      for (let i = 0; i < element.childNodes.length; i++) {
-        const childNode = element.childNodes[i];
-        if (childNode && !traverse(childNode)) {
-          return false;
+
+      // Void elements: do not recurse children and do not emit a closing tag
+      const isVoid = VOID_ELEMENTS.has(nodeName);
+      if (!isVoid) {
+        // Recurse through children until limit is reached
+        for (let i = 0; i < element.childNodes.length; i++) {
+          const childNode = element.childNodes[i];
+          if (childNode && !traverse(childNode)) {
+            // On early stop: close this tag to keep valid HTML, then bubble stop.
+            text += `</${nodeName}>`;
+            return false;
+          }
         }
+
+        // Close tag after all children
+        text += `</${nodeName}>`;
       }
-      text += `</${nodeName}>`;
+      return true;
     }
+
+    // Other node types (comments, etc.) are ignored for text length
     return true;
   };
+
+  // Traverse top-level children
   for (let i = 0; i < div.childNodes.length; i++) {
     const childNode = div.childNodes[i];
     if (childNode && !traverse(childNode)) {
@@ -78,16 +140,17 @@ 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));
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     [result[i], result[j]] = [result[j], result[i]];
   }
   return result;
 };
-export const calculateAutoSpeed = _ref => {
-  let {
-    fullTextLength,
-    currentPosition,
-    baseSpeedFactor
-  } = _ref;
+export const calculateAutoSpeed = ({
+  fullTextLength,
+  currentPosition,
+  baseSpeedFactor
+}) => {
   const MIN_SPEED = 1;
   const MAX_SPEED = 10;
   const remainingLength = fullTextLength - currentPosition;

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

@@ -1 +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":[]}
+{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","escapeText","value","replace","escapeAttr","String","VOID_ELEMENTS","Set","traverse","node","nodeType","textContent","nodeText","remaining","substring","element","nodeName","toLowerCase","attributes","attribute","name","isVoid","has","i","childNodes","childNode","getCharactersCount","count","trim","Array","from","forEach","shuffleArray","array","result","j","Math","floor","random","calculateAutoSpeed","fullTextLength","currentPosition","baseSpeedFactor","MIN_SPEED","MAX_SPEED","remainingLength","speed","min","steps"],"sources":["../../../../src/components/typewriter/utils.ts"],"sourcesContent":["/**\n * Returns a substring of an HTML string while preserving HTML structure.\n *\n * Core rules:\n * - Element nodes are re-serialized as tags (start/end) to keep structure.\n * - Text nodes are always HTML-escaped on output. This prevents that previously\n *   escaped text (like \"&lt;div&gt;\") turns into real tags during the DOM round trip.\n * - Attribute values are HTML-escaped on output.\n * - Void elements are serialized without closing tags.\n * - For TWIGNORE/TW-IGNORE elements, the innerHTML is passed through so that\n *   their content (including real HTML) remains untouched.\n * - On early cutoff (once the length limit is reached), already opened tags are\n *   properly closed to keep the result valid HTML.\n *\n * Note on length counting:\n * - The length is based on the decoded textContent length (as the DOM provides),\n *   not on byte length nor escaped entity length. This mirrors how the text is perceived.\n *\n * @param html   The input HTML string; may contain a mix of real HTML and already escaped HTML.\n * @param length The maximum number of text characters (based on textContent) to include.\n * @returns A valid HTML string containing up to the specified number of text characters,\n *          preserving HTML tags and keeping escaped text escaped.\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    // Escape text node content to ensure that decoded \"<\" and \">\" do not become real tags.\n    const escapeText = (value: string): string =>\n        value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\n    // Escape attribute values safely.\n    const escapeAttr = (value: string): string =>\n        String(value)\n            .replace(/&/g, '&amp;')\n            .replace(/\"/g, '&quot;')\n            .replace(/</g, '&lt;')\n            .replace(/>/g, '&gt;');\n\n    // HTML void elements (must not have closing tags)\n    const VOID_ELEMENTS = new Set([\n        'area',\n        'base',\n        'br',\n        'col',\n        'embed',\n        'hr',\n        'img',\n        'input',\n        'link',\n        'meta',\n        'param',\n        'source',\n        'track',\n        'wbr',\n    ]);\n\n    // Traverses nodes and appends to \"text\".\n    // Returns false to signal \"stop traversal\" once the length limit is reached.\n    const traverse = (node: Node): boolean => {\n        // Text node\n        if (node.nodeType === 3 && typeof node.textContent === 'string') {\n            const nodeText = node.textContent;\n            const remaining = length - currLength;\n\n            if (remaining <= 0) {\n                return false;\n            }\n\n            if (nodeText.length <= remaining) {\n                // Always escape text before writing to output\n                text += escapeText(nodeText);\n                currLength += nodeText.length;\n            } else {\n                // Cut the text and stop traversal\n                text += escapeText(nodeText.substring(0, remaining));\n                currLength += remaining;\n                return false;\n            }\n\n            return true;\n        }\n\n        // Element node\n        if (node.nodeType === 1) {\n            const element = node as Element;\n\n            // Pass-through for TWIGNORE/TW-IGNORE: keep their HTML as-is.\n            if (element.nodeName === 'TWIGNORE' || element.nodeName === 'TW-IGNORE') {\n                // element.innerHTML serializes children; escaped text stays escaped,\n                // real HTML stays HTML — exactly what we want here.\n                text += element.innerHTML;\n                return true;\n            }\n\n            const nodeName = element.nodeName.toLowerCase();\n\n            // Serialize attributes safely\n            let attributes = '';\n            // @ts-expect-error: attributes is a NodeListOf<Attr>\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,@typescript-eslint/no-unsafe-argument\n                attributes += ` ${attribute.name}=\"${escapeAttr(attribute.value)}\"`;\n            }\n\n            // Open tag\n            text += `<${nodeName}${attributes}>`;\n\n            // Void elements: do not recurse children and do not emit a closing tag\n            const isVoid = VOID_ELEMENTS.has(nodeName);\n            if (!isVoid) {\n                // Recurse through children until limit is reached\n                for (let i = 0; i < element.childNodes.length; i++) {\n                    const childNode = element.childNodes[i];\n                    if (childNode && !traverse(childNode)) {\n                        // On early stop: close this tag to keep valid HTML, then bubble stop.\n                        text += `</${nodeName}>`;\n                        return false;\n                    }\n                }\n\n                // Close tag after all children\n                text += `</${nodeName}>`;\n            }\n\n            return true;\n        }\n\n        // Other node types (comments, etc.) are ignored for text length\n        return true;\n    };\n\n    // Traverse top-level children\n    for (let i = 0; i < div.childNodes.length; i++) {\n        const childNode = div.childNodes[i];\n        if (childNode && !traverse(childNode)) {\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        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\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/types/components/typewriter/AnimatedTypewriterText.d.ts

@@ -1,8 +1,10 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
+import { CSSPropertiesWithVars } from 'styled-components/dist/types';
 type AnimatedTypewriterTextProps = {
     shouldHideCursor: boolean;
     shownText: string;
-    textStyle?: React.CSSProperties;
+    textStyle?: CSSPropertiesWithVars;
+    shouldRemainSingleLine: boolean;
 };
 declare const AnimatedTypewriterText: FC<AnimatedTypewriterTextProps>;
 export default AnimatedTypewriterText;

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

@@ -1,9 +1,10 @@
-import React, { FC, ReactElement } from 'react';
+import { FC, ReactElement } from 'react';
+import { CSSPropertiesWithVars } from 'styled-components/dist/types';
 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.
+     * The number of characters that will be animated per animation cycle.
      */
     animationSteps?: number;
     /**
@@ -70,6 +71,10 @@ export type TypewriterProps = {
      * Specifies whether the cursor should be hidden
      */
     shouldHideCursor?: boolean;
+    /**
+     * Whether the content should remain a single line.
+     */
+    shouldRemainSingleLine?: 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
@@ -105,7 +110,7 @@ export type TypewriterProps = {
     /**
      * The style of the typewriter text element
      */
-    textStyle?: React.CSSProperties;
+    textStyle?: CSSPropertiesWithVars;
 };
 declare const Typewriter: FC<TypewriterProps>;
 export default Typewriter;

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

@@ -14,6 +14,7 @@ type StyledTypewriterPseudoTextProps = WithTheme<{
 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;
+    $shouldRemainSingleLine: 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/types/components/typewriter/utils.d.ts

@@ -1,12 +1,25 @@
 /**
- * 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.
+ * Returns a substring of an HTML string while preserving HTML structure.
  *
- * @param html - The text from which a part should be taken
- * @param length - The length of the text to be extracted
+ * Core rules:
+ * - Element nodes are re-serialized as tags (start/end) to keep structure.
+ * - Text nodes are always HTML-escaped on output. This prevents that previously
+ *   escaped text (like "<div>") turns into real tags during the DOM round trip.
+ * - Attribute values are HTML-escaped on output.
+ * - Void elements are serialized without closing tags.
+ * - For TWIGNORE/TW-IGNORE elements, the innerHTML is passed through so that
+ *   their content (including real HTML) remains untouched.
+ * - On early cutoff (once the length limit is reached), already opened tags are
+ *   properly closed to keep the result valid HTML.
  *
- * @return string - The text part with the specified length - additionally the HTML elements are added
+ * Note on length counting:
+ * - The length is based on the decoded textContent length (as the DOM provides),
+ *   not on byte length nor escaped entity length. This mirrors how the text is perceived.
+ *
+ * @param html   The input HTML string; may contain a mix of real HTML and already escaped HTML.
+ * @param length The maximum number of text characters (based on textContent) to include.
+ * @returns A valid HTML string containing up to the specified number of text characters,
+ *          preserving HTML tags and keeping escaped text escaped.
  */
 export declare const getSubTextFromHTML: (html: string, length: number) => string;
 export declare const getCharactersCount: (html: string) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/typewriter",
-    "version": "5.0.0-beta.997",
+    "version": "5.0.0",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -23,8 +23,9 @@
     "exports": {
         ".": {
             "types": "./lib/types/index.d.ts",
+            "node": "./lib/cjs/index.js",
             "require": "./lib/cjs/index.js",
-            "import": "./lib/esm/index.js"
+            "default": "./lib/esm/index.js"
         }
     },
     "directories": {
@@ -51,29 +52,29 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@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",
+        "@babel/cli": "^7.28.6",
+        "@babel/core": "^7.29.0",
+        "@babel/preset-env": "^7.29.0",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@types/react": "^18.3.28",
+        "@types/react-dom": "^18.3.7",
+        "@types/styled-components": "^5.1.36",
         "@types/uuid": "^10.0.0",
         "babel-loader": "^9.2.1",
         "cross-env": "^7.0.3",
-        "lerna": "^8.1.9",
+        "lerna": "^8.2.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "styled-components": "^6.1.14",
-        "typescript": "^5.7.3"
+        "styled-components": "^6.3.9",
+        "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.997"
+        "@chayns-components/core": "^5.0.0"
     },
     "peerDependencies": {
-        "chayns-api": ">=2.0.0",
-        "framer-motion": ">=10.18.0",
+        "chayns-api": ">=2.2.0",
+        "motion": ">=12.4.1",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
         "styled-components": ">=5.3.11"
@@ -81,5 +82,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "88b9adc4186af824999d62f8a1a5e907fceebb06"
+    "gitHead": "3d554c67b058b3b25e2666a34ee543fea2cad6e2"
 }