@app-studio/web 0.9.73 → 0.9.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Title/Title/Title.style.d.ts +0 -3
- package/dist/web.cjs.development.js +6 -97
- package/dist/web.cjs.development.js.map +1 -1
- package/dist/web.cjs.production.min.js +1 -1
- package/dist/web.cjs.production.min.js.map +1 -1
- package/dist/web.esm.js +6 -97
- package/dist/web.esm.js.map +1 -1
- package/dist/web.umd.development.js +6 -97
- package/dist/web.umd.development.js.map +1 -1
- package/dist/web.umd.production.min.js +1 -1
- package/dist/web.umd.production.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -17016,90 +17016,6 @@
|
|
|
17016
17016
|
lg: 64,
|
|
17017
17017
|
xl: 72
|
|
17018
17018
|
};
|
|
17019
|
-
/**
|
|
17020
|
-
* Responsive typography system that maps title sizes to responsive breakpoints
|
|
17021
|
-
* Based on the Typography system with dynamic breakpoint sizing
|
|
17022
|
-
*/
|
|
17023
|
-
var ResponsiveTypography = {
|
|
17024
|
-
// xl maps to H1 - Largest heading
|
|
17025
|
-
xl: {
|
|
17026
|
-
fontWeight: 500,
|
|
17027
|
-
letterSpacing: 1.25,
|
|
17028
|
-
media: {
|
|
17029
|
-
mobile: {
|
|
17030
|
-
fontSize: 60
|
|
17031
|
-
},
|
|
17032
|
-
tablet: {
|
|
17033
|
-
fontSize: 60
|
|
17034
|
-
},
|
|
17035
|
-
desktop: {
|
|
17036
|
-
fontSize: 96
|
|
17037
|
-
}
|
|
17038
|
-
}
|
|
17039
|
-
},
|
|
17040
|
-
// lg maps to H2 - Large heading
|
|
17041
|
-
lg: {
|
|
17042
|
-
fontWeight: 500,
|
|
17043
|
-
media: {
|
|
17044
|
-
mobile: {
|
|
17045
|
-
fontSize: 48
|
|
17046
|
-
},
|
|
17047
|
-
tablet: {
|
|
17048
|
-
fontSize: 48
|
|
17049
|
-
},
|
|
17050
|
-
desktop: {
|
|
17051
|
-
fontSize: 70
|
|
17052
|
-
}
|
|
17053
|
-
}
|
|
17054
|
-
},
|
|
17055
|
-
// md maps to H3 - Medium heading
|
|
17056
|
-
md: {
|
|
17057
|
-
fontWeight: 500,
|
|
17058
|
-
media: {
|
|
17059
|
-
mobile: {
|
|
17060
|
-
fontSize: 32
|
|
17061
|
-
},
|
|
17062
|
-
tablet: {
|
|
17063
|
-
fontSize: 40
|
|
17064
|
-
},
|
|
17065
|
-
desktop: {
|
|
17066
|
-
fontSize: 56
|
|
17067
|
-
}
|
|
17068
|
-
}
|
|
17069
|
-
},
|
|
17070
|
-
// sm maps to T1 - Title text
|
|
17071
|
-
sm: {
|
|
17072
|
-
fontWeight: 400,
|
|
17073
|
-
letterSpacing: -0.2,
|
|
17074
|
-
media: {
|
|
17075
|
-
mobile: {
|
|
17076
|
-
fontSize: 20
|
|
17077
|
-
},
|
|
17078
|
-
tablet: {
|
|
17079
|
-
fontSize: 24
|
|
17080
|
-
},
|
|
17081
|
-
desktop: {
|
|
17082
|
-
fontSize: 32
|
|
17083
|
-
}
|
|
17084
|
-
}
|
|
17085
|
-
},
|
|
17086
|
-
// xs maps to S1 - Subtitle text
|
|
17087
|
-
xs: {
|
|
17088
|
-
fontWeight: 400,
|
|
17089
|
-
letterSpacing: -0.2,
|
|
17090
|
-
media: {
|
|
17091
|
-
mobile: {
|
|
17092
|
-
fontSize: 14
|
|
17093
|
-
},
|
|
17094
|
-
tablet: {
|
|
17095
|
-
fontSize: 18
|
|
17096
|
-
},
|
|
17097
|
-
desktop: {
|
|
17098
|
-
fontSize: 20
|
|
17099
|
-
}
|
|
17100
|
-
}
|
|
17101
|
-
}
|
|
17102
|
-
};
|
|
17103
17019
|
/**
|
|
17104
17020
|
* Default styles for different highlight types
|
|
17105
17021
|
*/
|
|
@@ -17322,7 +17238,8 @@
|
|
|
17322
17238
|
position: 'relative',
|
|
17323
17239
|
overflow: 'hidden',
|
|
17324
17240
|
verticalAlign: 'bottom',
|
|
17325
|
-
whiteSpace: 'nowrap'
|
|
17241
|
+
whiteSpace: 'nowrap',
|
|
17242
|
+
lineHeight: 'normal'
|
|
17326
17243
|
}, textStyle), [textStyle]);
|
|
17327
17244
|
// Word row container style
|
|
17328
17245
|
var wordRowStyle = React.useMemo(() => ({
|
|
@@ -17399,7 +17316,7 @@
|
|
|
17399
17316
|
})));
|
|
17400
17317
|
};
|
|
17401
17318
|
|
|
17402
|
-
var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "
|
|
17319
|
+
var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode", "textComponent"];
|
|
17403
17320
|
function escapeRegExp(string) {
|
|
17404
17321
|
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
17405
17322
|
}
|
|
@@ -17411,7 +17328,6 @@
|
|
|
17411
17328
|
highlightColor = 'theme.primary',
|
|
17412
17329
|
highlightSecondaryColor,
|
|
17413
17330
|
size = 'lg',
|
|
17414
|
-
responsive = true,
|
|
17415
17331
|
views,
|
|
17416
17332
|
highlightAnimate,
|
|
17417
17333
|
animate,
|
|
@@ -17479,10 +17395,7 @@
|
|
|
17479
17395
|
highlightSlideSequential
|
|
17480
17396
|
}, props));
|
|
17481
17397
|
var TextComponent = textComponent || appStudio.Text;
|
|
17482
|
-
// Common style calculations
|
|
17483
|
-
var useResponsive = responsive && !props.media;
|
|
17484
17398
|
var fontSize = TitleSizes[size];
|
|
17485
|
-
var responsiveStyles = useResponsive ? ResponsiveTypography[size] : null;
|
|
17486
17399
|
// Highlight style props
|
|
17487
17400
|
var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
|
|
17488
17401
|
// Apply loop control to animations
|
|
@@ -17507,10 +17420,7 @@
|
|
|
17507
17420
|
animate: inView ? controlledAnimate : undefined
|
|
17508
17421
|
}, !textComponent && {
|
|
17509
17422
|
as: 'h1',
|
|
17510
|
-
fontSize
|
|
17511
|
-
fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
|
|
17512
|
-
letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
|
|
17513
|
-
media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
|
|
17423
|
+
fontSize
|
|
17514
17424
|
});
|
|
17515
17425
|
// Render highlighted text content (typewriter, slide, or plain)
|
|
17516
17426
|
var renderHighlightedContent = content => {
|
|
@@ -17538,8 +17448,7 @@
|
|
|
17538
17448
|
stagger: stateHighlightSlideStagger,
|
|
17539
17449
|
sequential: stateHighlightSlideSequential,
|
|
17540
17450
|
direction: "up",
|
|
17541
|
-
fontSize:
|
|
17542
|
-
fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
|
|
17451
|
+
fontSize: fontSize,
|
|
17543
17452
|
wordProps: highlightProps,
|
|
17544
17453
|
textComponent: TextComponent
|
|
17545
17454
|
});
|
|
@@ -17562,7 +17471,7 @@
|
|
|
17562
17471
|
}
|
|
17563
17472
|
if (lastIndex < text.length) parts.push(text.substring(lastIndex));
|
|
17564
17473
|
return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
|
|
17565
|
-
fontSize:
|
|
17474
|
+
fontSize: fontSize
|
|
17566
17475
|
}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(TextComponent, {
|
|
17567
17476
|
key: "text-" + idx,
|
|
17568
17477
|
as: "span",
|