app-studio 0.5.11 → 0.5.14

package/dist/app-studio.cjs.development.js

@@ -563,14 +563,13 @@ const includeKeys = /*#__PURE__*/new Set(['src', 'alt', 'style', 'as']);
 
 // styleHelpers.ts
 // Function to convert style object to CSS string
-const styleObjectToCss = styleObj => {
-  return Object.entries(styleObj).map(_ref => {
+const styleObjectToCss = styles => {
+  return Object.entries(styles).map(_ref => {
     let [key, value] = _ref;
-    return `${toKebabCase(key)}: ${value};`;
+    const cssProperty = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return `${cssProperty}: ${value};`;
   }).join(' ');
 };
-// Function to convert camelCase to kebab-case
-const toKebabCase = str => str.replace(/([A-Z])/g, match => '-' + match.toLowerCase());
 // // Function to check if a property is a style prop
 // export const isStyleProp = (prop: string): boolean => {
 //   // Implement your logic to determine if a prop is a style prop
@@ -949,6 +948,20 @@ function generatePropertyShorthand(styledProps) {
 }
 const propertyShorthand = /*#__PURE__*/generatePropertyShorthand(StyleProps);
 const utilityClassManager = /*#__PURE__*/new UtilityClassManager(propertyShorthand);
+function parseDuration(duration) {
+  const match = duration.match(/^([\d.]+)(ms|s)$/);
+  if (!match) return 0;
+  const value = parseFloat(match[1]);
+  const unit = match[2];
+  return unit === 's' ? value * 1000 : value;
+}
+// Fonction pour formater une durée en millisecondes en chaîne avec unité
+function formatDuration(ms) {
+  if (ms >= 1000 && ms % 1000 === 0) {
+    return `${ms / 1000}s`;
+  }
+  return `${ms}ms`;
+}
 const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
   const classes = [];
   // Styles calculés basés sur les props
@@ -1013,6 +1026,7 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
     const animationDirections = [];
     const animationFillModes = [];
     const animationPlayStates = [];
+    let cumulativeTime = 0; // Temps cumulé en millisecondes
     animations.forEach(animation => {
       const {
         keyframesName,
@@ -1022,9 +1036,19 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
         utilityClassManager.injectRule(keyframes);
       }
       animationNames.push(keyframesName);
-      animationDurations.push(animation.duration || '0s');
+      // Parse duration and delay
+      const durationStr = animation.duration || '0s';
+      const durationMs = parseDuration(durationStr);
+      const delayStr = animation.delay || '0s';
+      const delayMs = parseDuration(delayStr);
+      // Calculer le délai total pour cette animation
+      const totalDelayMs = cumulativeTime + delayMs;
+      // Mettre à jour le temps cumulé
+      cumulativeTime = totalDelayMs + durationMs;
+      // Ajouter les valeurs formatées aux tableaux
+      animationDurations.push(formatDuration(durationMs));
       animationTimingFunctions.push(animation.timingFunction || 'ease');
-      animationDelays.push(animation.delay || '0s');
+      animationDelays.push(formatDuration(totalDelayMs));
       animationIterationCounts.push(animation.iterationCount !== undefined ? `${animation.iterationCount}` : '1');
       animationDirections.push(animation.direction || 'normal');
       animationFillModes.push(animation.fillMode || 'none');
@@ -1213,31 +1237,21 @@ const Element = /*#__PURE__*/React__default.memo( /*#__PURE__*/React.forwardRef(
   return /*#__PURE__*/React__default.createElement(Component, Object.assign({}, newProps), children);
 }));
 
-const View = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
-  ref: ref
-}))));
-const Div = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(View, Object.assign({}, props, {
-  ref: ref
-}))));
-const SafeArea = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(View, Object.assign({}, props, {
-  ref: ref
-}))));
-const Scroll = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(View, Object.assign({
+const View = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props)));
+const Div = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(View, Object.assign({}, props)));
+const SafeArea = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(View, Object.assign({}, props)));
+const Scroll = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(View, Object.assign({
   overflow: "auto"
-}, props, {
-  ref: ref
-}))));
-const Span = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
-  ref: ref,
+}, props)));
+const Span = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({
   as: "span"
-}))));
+}, props)));
 
-const Image = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
-  as: "img",
-  ref: ref
-}))));
+const Image = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({
+  as: "img"
+}, props)));
 
-const Text = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const Text = /*#__PURE__*/React__default.memo(props => {
   const {
     toUpperCase,
     children,
@@ -1246,32 +1260,29 @@ const Text = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwa
   // Convertir le texte en majuscules si toUpperCase est activé
   const content = toUpperCase && typeof children === 'string' ? children.toUpperCase() : children;
   return /*#__PURE__*/React__default.createElement(Element, Object.assign({
-    as: "span",
-    ref: ref
+    as: "span"
   }, rest), content);
-}));
+});
 
 // Composant Form
-const Form = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
-  ref: ref,
+const Form = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({
   as: "form"
-}))));
+}, props)));
 // Composant Input
-const Input = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
-  ref: ref,
+const Input = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({
   as: "input"
-}))));
+}, props)));
 // Composant Button
-const Button = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
-  ref: ref,
+const Button = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({
   as: "button"
-}))));
+}, props)));
 
 // animations.ts
 const fadeIn = _ref => {
   let {
     duration = '1s',
-    timingFunction = 'ease'
+    timingFunction = 'ease',
+    ...props
   } = _ref;
   return {
     from: {
@@ -1281,13 +1292,15 @@ const fadeIn = _ref => {
       opacity: 1
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const fadeOut = _ref2 => {
   let {
     duration = '1s',
-    timingFunction = 'ease'
+    timingFunction = 'ease',
+    ...props
   } = _ref2;
   return {
     from: {
@@ -1297,13 +1310,15 @@ const fadeOut = _ref2 => {
       opacity: 0
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const slideInLeft = _ref3 => {
   let {
     duration = '0.5s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref3;
   return {
     from: {
@@ -1313,13 +1328,15 @@ const slideInLeft = _ref3 => {
       transform: 'translateX(0)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const slideInRight = _ref4 => {
   let {
     duration = '0.5s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref4;
   return {
     from: {
@@ -1329,13 +1346,15 @@ const slideInRight = _ref4 => {
       transform: 'translateX(0)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const slideInDown = _ref5 => {
   let {
     duration = '0.5s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref5;
   return {
     from: {
@@ -1345,13 +1364,15 @@ const slideInDown = _ref5 => {
       transform: 'translateY(0)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const slideInUp = _ref6 => {
   let {
     duration = '0.5s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref6;
   return {
     from: {
@@ -1361,14 +1382,16 @@ const slideInUp = _ref6 => {
       transform: 'translateY(0)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const bounce = _ref7 => {
   let {
     duration = '2s',
     timingFunction = 'ease',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref7;
   return {
     from: {
@@ -1391,14 +1414,16 @@ const bounce = _ref7 => {
     },
     duration,
     timingFunction,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const rotate = _ref8 => {
   let {
     duration = '1s',
     timingFunction = 'linear',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref8;
   return {
     from: {
@@ -1409,14 +1434,16 @@ const rotate = _ref8 => {
     },
     duration,
     timingFunction,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const pulse = _ref9 => {
   let {
     duration = '1s',
     timingFunction = 'ease-in-out',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref9;
   return {
     from: {
@@ -1430,13 +1457,15 @@ const pulse = _ref9 => {
     },
     duration,
     timingFunction,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const zoomIn = _ref10 => {
   let {
     duration = '0.5s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref10;
   return {
     from: {
@@ -1446,13 +1475,15 @@ const zoomIn = _ref10 => {
       transform: 'scale(1)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const zoomOut = _ref11 => {
   let {
     duration = '0.5s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref11;
   return {
     from: {
@@ -1462,13 +1493,15 @@ const zoomOut = _ref11 => {
       transform: 'scale(0)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const flash = _ref12 => {
   let {
     duration = '1s',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref12;
   return {
     from: {
@@ -1481,13 +1514,15 @@ const flash = _ref12 => {
       opacity: 1
     },
     duration,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const shake = _ref13 => {
   let {
     duration = '0.5s',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref13;
   return {
     from: {
@@ -1524,13 +1559,15 @@ const shake = _ref13 => {
       transform: 'translateX(0)'
     },
     duration,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const swing = _ref14 => {
   let {
     duration = '1s',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref14;
   return {
     from: {
@@ -1552,13 +1589,15 @@ const swing = _ref14 => {
       transform: 'rotate(0deg)'
     },
     duration,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const rubberBand = _ref15 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-in-out'
+    timingFunction = 'ease-in-out',
+    ...props
   } = _ref15;
   return {
     from: {
@@ -1583,12 +1622,14 @@ const rubberBand = _ref15 => {
       transform: 'scale3d(1, 1, 1)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const wobble = _ref16 => {
   let {
-    duration = '1s'
+    duration = '1s',
+    ...props
   } = _ref16;
   return {
     from: {
@@ -1612,12 +1653,14 @@ const wobble = _ref16 => {
     to: {
       transform: 'translateX(0%)'
     },
-    duration
+    duration,
+    ...props
   };
 };
 const flip = _ref17 => {
   let {
-    duration = '1s'
+    duration = '1s',
+    ...props
   } = _ref17;
   return {
     from: {
@@ -1629,13 +1672,15 @@ const flip = _ref17 => {
     to: {
       transform: 'perspective(400px) rotateY(-360deg)'
     },
-    duration
+    duration,
+    ...props
   };
 };
 const heartBeat = _ref18 => {
   let {
     duration = '1.3s',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref18;
   return {
     from: {
@@ -1657,12 +1702,14 @@ const heartBeat = _ref18 => {
       transform: 'scale(1)'
     },
     duration,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const rollIn = _ref19 => {
   let {
-    duration = '1s'
+    duration = '1s',
+    ...props
   } = _ref19;
   return {
     from: {
@@ -1673,12 +1720,14 @@ const rollIn = _ref19 => {
       opacity: 1,
       transform: 'translateX(0px) rotate(0deg)'
     },
-    duration
+    duration,
+    ...props
   };
 };
 const rollOut = _ref20 => {
   let {
-    duration = '1s'
+    duration = '1s',
+    ...props
   } = _ref20;
   return {
     from: {
@@ -1689,13 +1738,15 @@ const rollOut = _ref20 => {
       opacity: 0,
       transform: 'translateX(100%) rotate(120deg)'
     },
-    duration
+    duration,
+    ...props
   };
 };
 const lightSpeedIn = _ref21 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref21;
   return {
     from: {
@@ -1714,13 +1765,15 @@ const lightSpeedIn = _ref21 => {
       opacity: 1
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const lightSpeedOut = _ref22 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref22;
   return {
     from: {
@@ -1735,13 +1788,15 @@ const lightSpeedOut = _ref22 => {
       transform: 'translateX(-100%) skewX(30deg)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const hinge = _ref23 => {
   let {
     duration = '2s',
-    timingFunction = 'ease-in-out'
+    timingFunction = 'ease-in-out',
+    ...props
   } = _ref23;
   return {
     from: {
@@ -1770,13 +1825,15 @@ const hinge = _ref23 => {
       opacity: 0
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const jackInTheBox = _ref24 => {
   let {
     duration = '1s',
-    timingFunction = 'ease'
+    timingFunction = 'ease',
+    ...props
   } = _ref24;
   return {
     from: {
@@ -1795,13 +1852,15 @@ const jackInTheBox = _ref24 => {
       transform: 'scale(1) rotate(0deg)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const flipInX = _ref25 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref25;
   return {
     from: {
@@ -1816,13 +1875,15 @@ const flipInX = _ref25 => {
       transform: 'perspective(400px) rotateX(0deg)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const flipInY = _ref26 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref26;
   return {
     from: {
@@ -1837,13 +1898,15 @@ const flipInY = _ref26 => {
       transform: 'perspective(400px) rotateY(0deg)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const headShake = _ref27 => {
   let {
     duration = '1s',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref27;
   return {
     from: {
@@ -1865,13 +1928,15 @@ const headShake = _ref27 => {
       transform: 'translateX(0)'
     },
     duration,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const tada = _ref28 => {
   let {
     duration = '1s',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref28;
   return {
     from: {
@@ -1892,13 +1957,15 @@ const tada = _ref28 => {
       opacity: 1
     },
     duration,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const jello = _ref29 => {
   let {
     duration = '1s',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref29;
   return {
     from: {
@@ -1932,13 +1999,15 @@ const jello = _ref29 => {
       transform: 'none'
     },
     duration,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const fadeInDown = _ref30 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref30;
   return {
     from: {
@@ -1950,13 +2019,15 @@ const fadeInDown = _ref30 => {
       transform: 'translateY(0)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const fadeInUp = _ref31 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref31;
   return {
     from: {
@@ -1968,13 +2039,15 @@ const fadeInUp = _ref31 => {
       transform: 'translateY(0)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const bounceIn = _ref32 => {
   let {
     duration = '0.75s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref32;
   return {
     from: {
@@ -1992,13 +2065,15 @@ const bounceIn = _ref32 => {
       transform: 'scale(1)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const bounceOut = _ref33 => {
   let {
     duration = '0.75s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref33;
   return {
     from: {
@@ -2016,13 +2091,15 @@ const bounceOut = _ref33 => {
       transform: 'scale(0.3)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const slideOutLeft = _ref34 => {
   let {
     duration = '0.5s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref34;
   return {
     from: {
@@ -2032,13 +2109,15 @@ const slideOutLeft = _ref34 => {
       transform: 'translateX(-100%)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const slideOutRight = _ref35 => {
   let {
     duration = '0.5s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref35;
   return {
     from: {
@@ -2048,13 +2127,15 @@ const slideOutRight = _ref35 => {
       transform: 'translateX(100%)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const zoomInDown = _ref36 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-out'
+    timingFunction = 'ease-out',
+    ...props
   } = _ref36;
   return {
     from: {
@@ -2069,13 +2150,15 @@ const zoomInDown = _ref36 => {
       transform: 'scale(1) translateY(0)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const zoomOutUp = _ref37 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref37;
   return {
     from: {
@@ -2091,13 +2174,15 @@ const zoomOutUp = _ref37 => {
       transform: 'scale(0.1) translateY(-1000px)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const backInDown = _ref38 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref38;
   return {
     from: {
@@ -2109,13 +2194,15 @@ const backInDown = _ref38 => {
       transform: 'translateY(0) scaleY(1) scaleX(1)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const backOutUp = _ref39 => {
   let {
     duration = '1s',
-    timingFunction = 'ease-in'
+    timingFunction = 'ease-in',
+    ...props
   } = _ref39;
   return {
     from: {
@@ -2131,14 +2218,16 @@ const backOutUp = _ref39 => {
       transform: 'translateY(-2000px)'
     },
     duration,
-    timingFunction
+    timingFunction,
+    ...props
   };
 };
 const shimmer = _ref40 => {
   let {
     duration = '2s',
     timingFunction = 'linear',
-    iterationCount = 'infinite'
+    iterationCount = 'infinite',
+    ...props
   } = _ref40;
   return {
     from: {
@@ -2152,7 +2241,8 @@ const shimmer = _ref40 => {
     },
     duration,
     timingFunction,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const progress = _ref41 => {
@@ -2162,7 +2252,8 @@ const progress = _ref41 => {
     direction = 'forwards',
     prop = 'width',
     from = '0%',
-    to = '100%'
+    to = '100%',
+    ...props
   } = _ref41;
   return {
     from: {
@@ -2173,7 +2264,8 @@ const progress = _ref41 => {
     },
     duration,
     timingFunction,
-    direction
+    direction,
+    ...props
   };
 };
 const typewriter = _ref42 => {
@@ -2181,7 +2273,8 @@ const typewriter = _ref42 => {
     duration = '10s',
     steps = 10,
     iterationCount = 1,
-    width = 0
+    width = 0,
+    ...props
   } = _ref42;
   return {
     from: {
@@ -2192,7 +2285,8 @@ const typewriter = _ref42 => {
     },
     timingFunction: `steps(${steps})`,
     duration,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 const blinkCursor = _ref43 => {
@@ -2200,7 +2294,8 @@ const blinkCursor = _ref43 => {
     duration = '0.75s',
     timingFunction = 'step-end',
     iterationCount = 'infinite',
-    color = 'black'
+    color = 'black',
+    ...props
   } = _ref43;
   return {
     from: {
@@ -2220,7 +2315,8 @@ const blinkCursor = _ref43 => {
     },
     duration,
     timingFunction,
-    iterationCount
+    iterationCount,
+    ...props
   };
 };
 
@@ -2296,120 +2392,6 @@ const Skeleton = /*#__PURE__*/React__default.memo(_ref => {
   }));
 });
 
-const Typewriter = _ref => {
-  let {
-    text,
-    duration = '10s',
-    cursorDuration = '0.75s',
-    cursorTimingFunction = 'step-end',
-    color = 'black',
-    cursor = true,
-    fontSize = 18,
-    width = 100,
-    ...props
-  } = _ref;
-  const [visibleLines, setVisibleLines] = React.useState([]);
-  const [isComplete, setIsComplete] = React.useState(false);
-  // Calculate milliseconds once
-  const durationMs = React.useMemo(() => parseFloat(duration.replace('s', '')) * 1000, [duration]);
-  // Split text into lines with width calculation
-  const lines = React.useMemo(() => {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (!context) return [];
-    context.font = `${fontSize}px sans-serif`;
-    const words = text.split(' ');
-    const result = [];
-    let currentLine = '';
-    for (const word of words) {
-      const testLine = currentLine ? `${currentLine} ${word}` : word;
-      const metrics = context.measureText(testLine);
-      if (metrics.width > width && currentLine) {
-        const currentMetrics = context.measureText(currentLine);
-        result.push({
-          text: currentLine,
-          width: currentMetrics.width
-        });
-        currentLine = word;
-      } else {
-        currentLine = testLine;
-      }
-    }
-    if (currentLine) {
-      const finalMetrics = context.measureText(currentLine);
-      result.push({
-        text: currentLine,
-        width: finalMetrics.width
-      });
-    }
-    return result;
-  }, [text, width, fontSize]);
-  // Handle animation timing
-  React.useEffect(() => {
-    if (!lines.length) return;
-    setVisibleLines([]);
-    setIsComplete(false);
-    const timeoutIds = [];
-    const perLineDuration = durationMs / lines.length;
-    lines.forEach((line, index) => {
-      const timeoutId = setTimeout(() => {
-        setVisibleLines(prev => {
-          const newLines = [...prev, line];
-          // Set complete when all lines are visible
-          if (newLines.length === lines.length) {
-            // Add small delay to ensure the last line's animation is complete
-            setTimeout(() => setIsComplete(true), parseFloat(getLineAnimation(line).duration));
-          }
-          return newLines;
-        });
-      }, perLineDuration * index);
-      timeoutIds.push(timeoutId);
-    });
-    return () => {
-      timeoutIds.forEach(clearTimeout);
-      setIsComplete(false);
-    };
-  }, [lines, durationMs]);
-  // Calculate animation parameters
-  const getLineAnimation = React.useCallback(line => {
-    const perCharDuration = durationMs / text.length;
-    const lineDuration = `${line.text.length * perCharDuration}ms`;
-    return {
-      duration: lineDuration,
-      width: line.width
-    };
-  }, [durationMs, text.length]);
-  if (!lines.length) return null;
-  return /*#__PURE__*/React__default.createElement(View, {
-    width: width
-  }, visibleLines.map((line, index) => {
-    const animation = getLineAnimation(line);
-    const isLastLine = index === visibleLines.length - 1;
-    return /*#__PURE__*/React__default.createElement(View, {
-      key: `line-${index}`,
-      display: "flex",
-      alignItems: "center"
-    }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
-      display: "inline-block",
-      overflow: "hidden",
-      whiteSpace: "nowrap",
-      animate: typewriter({
-        duration: animation.duration,
-        steps: line.text.length,
-        width: animation.width
-      })
-    }, props), line.text), cursor && isLastLine && !isComplete && /*#__PURE__*/React__default.createElement(Text, {
-      paddingLeft: 4,
-      display: "inline-block",
-      animate: blinkCursor({
-        duration: cursorDuration,
-        timingFunction: cursorTimingFunction,
-        color
-      })
-    }, "|"));
-  }));
-};
-
 const Typography = {
   letterSpacings: {
     tighter: -0.08,
@@ -2556,7 +2538,6 @@ exports.Span = Span;
 exports.Text = Text;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
-exports.Typewriter = Typewriter;
 exports.Typography = Typography;
 exports.View = View;
 exports.createQuery = createQuery;