@vinyasa/typography 1.0.23 → 1.0.25

package/dist/cjs/paragraph.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,12 +76,114 @@
 }
 
 ._4sie9wj {
-  color: var(--vinyasa-error);
+  color: var(--vinyasa-status-info-text);
 }
 
 ._4sie9wk {
+  color: var(--vinyasa-status-success-text);
+}
+
+._4sie9wl {
+  color: var(--vinyasa-status-warning-text);
+}
+
+._4sie9wm {
+  color: var(--vinyasa-status-error-text);
+}
+
+._4sie9wn {
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
+  display: inline-block;
   overflow: hidden;
 }
 
+._4sie9wo {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  direction: rtl;
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+}
+
+._4sie9wp {
+  font-style: italic;
+}
+
+._4sie9wq {
+  text-transform: uppercase;
+}
+
+._4sie9wr {
+  text-transform: lowercase;
+}
+
+._4sie9ws {
+  text-transform: capitalize;
+}
+
+._4sie9wt {
+  text-transform: none;
+}
+
+._4sie9wu {
+  text-decoration: underline;
+}
+
+._4sie9wv {
+  text-decoration: line-through;
+}
+
+._4sie9ww {
+  text-decoration: none;
+}
+
+._4sie9wx {
+  letter-spacing: var(--vinyasa-letter-spacing-tight);
+}
+
+._4sie9wy {
+  letter-spacing: var(--vinyasa-letter-spacing-normal);
+}
+
+._4sie9wz {
+  letter-spacing: var(--vinyasa-letter-spacing-wide);
+}
+
+._4sie9w10 {
+  line-height: var(--vinyasa-line-height-tight);
+}
+
+._4sie9w11 {
+  line-height: var(--vinyasa-line-height-normal);
+}
+
+._4sie9w12 {
+  line-height: var(--vinyasa-line-height-loose);
+}
+
+._4sie9w13 {
+  text-wrap: wrap;
+}
+
+._4sie9w14 {
+  text-wrap: balance;
+}
+
+._4sie9w15 {
+  text-wrap: pretty;
+}
+
+._4sie9w16 {
+  text-wrap: nowrap;
+}
+
+._4sie9w17 {
+  color: rgba(0, 0, 0, 0);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+

package/dist/cjs/text.cjs

@@ -31,8 +31,8 @@ __webpack_require__.d(__webpack_exports__, {
     default: ()=>text_Text
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_react_namespaceObject = require("react");
 const tokens_namespaceObject = require("@vinyasa/tokens");
+const external_react_namespaceObject = require("react");
 const space = {
     1: tokens_namespaceObject.themeContract.space1,
     2: tokens_namespaceObject.themeContract.space2,
@@ -221,10 +221,47 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            end: '_4sie9wn',
+            start: '_4sie9wo'
+        },
+        italic: {
+            true: '_4sie9wp'
+        },
+        textTransform: {
+            uppercase: '_4sie9wq',
+            lowercase: '_4sie9wr',
+            capitalize: '_4sie9ws',
+            none: '_4sie9wt'
+        },
+        decoration: {
+            underline: '_4sie9wu',
+            'line-through': '_4sie9wv',
+            none: '_4sie9ww'
+        },
+        letterSpacing: {
+            tight: '_4sie9wx',
+            normal: '_4sie9wy',
+            wide: '_4sie9wz'
+        },
+        lineHeight: {
+            tight: '_4sie9w10',
+            normal: '_4sie9w11',
+            loose: '_4sie9w12'
+        },
+        textWrap: {
+            wrap: '_4sie9w13',
+            balance: '_4sie9w14',
+            pretty: '_4sie9w15',
+            nowrap: '_4sie9w16'
+        },
+        variant: {
+            gradient: '_4sie9w17'
         }
     },
     defaultVariants: {
@@ -316,13 +353,23 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
     let _ref = [
         _0,
         _1
-    ], [_ref1, ..._rest] = _ref, { as: Component = 'span', size, weight, align, color, truncate, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children } = _ref1, rest = _object_without_properties(_ref1, [
+    ], [_ref1, ..._rest] = _ref, { as: Component = 'span', size, weight, align, color, truncate, italic, textTransform, decoration, letterSpacing, lineHeight, textWrap, variant, lineClamp, inherit, gradient, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children } = _ref1, rest = _object_without_properties(_ref1, [
         "as",
         "size",
         "weight",
         "align",
         "color",
         "truncate",
+        "italic",
+        "textTransform",
+        "decoration",
+        "letterSpacing",
+        "lineHeight",
+        "textWrap",
+        "variant",
+        "lineClamp",
+        "inherit",
+        "gradient",
         "m",
         "mt",
         "mr",
@@ -341,19 +388,24 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
-    const classes = className ? `${Text_css_text({
+    var _gradient_deg;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
+    const normalizedTruncate = true === truncate ? 'end' : false === truncate ? void 0 : truncate;
+    const variantArgs = {
         size,
         weight,
         align,
         color,
-        truncate
-    })} ${className}` : Text_css_text({
-        size,
-        weight,
-        align,
-        color,
-        truncate
-    });
+        truncate: normalizedTruncate,
+        italic,
+        textTransform,
+        decoration,
+        letterSpacing,
+        lineHeight,
+        textWrap,
+        variant
+    };
+    const classes = className ? `${Text_css_text(variantArgs)} ${className}` : Text_css_text(variantArgs);
     const spacingStyle = resolveSpacingStyle({
         m,
         mt,
@@ -370,10 +422,26 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         px,
         py
     });
+    const inheritStyle = inherit ? {
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        color: 'inherit',
+        lineHeight: 'inherit'
+    } : void 0;
+    const gradientStyle = 'gradient' === variant && gradient ? {
+        backgroundImage: `linear-gradient(${String(null != (_gradient_deg = gradient.deg) ? _gradient_deg : 45)}deg, ${gradient.from}, ${gradient.to})`
+    } : void 0;
+    const lineClampStyle = void 0 !== lineClamp ? {
+        display: '-webkit-box',
+        WebkitLineClamp: lineClamp,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden'
+    } : void 0;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
-        style: _object_spread({}, spacingStyle, style)
+        style: _object_spread({}, spacingStyle, inheritStyle, gradientStyle, lineClampStyle, style)
     }, rest), {
         children: children
     }));

package/dist/cjs/text.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,12 +76,114 @@
 }
 
 ._4sie9wj {
-  color: var(--vinyasa-error);
+  color: var(--vinyasa-status-info-text);
 }
 
 ._4sie9wk {
+  color: var(--vinyasa-status-success-text);
+}
+
+._4sie9wl {
+  color: var(--vinyasa-status-warning-text);
+}
+
+._4sie9wm {
+  color: var(--vinyasa-status-error-text);
+}
+
+._4sie9wn {
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
+  display: inline-block;
   overflow: hidden;
 }
 
+._4sie9wo {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  direction: rtl;
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+}
+
+._4sie9wp {
+  font-style: italic;
+}
+
+._4sie9wq {
+  text-transform: uppercase;
+}
+
+._4sie9wr {
+  text-transform: lowercase;
+}
+
+._4sie9ws {
+  text-transform: capitalize;
+}
+
+._4sie9wt {
+  text-transform: none;
+}
+
+._4sie9wu {
+  text-decoration: underline;
+}
+
+._4sie9wv {
+  text-decoration: line-through;
+}
+
+._4sie9ww {
+  text-decoration: none;
+}
+
+._4sie9wx {
+  letter-spacing: var(--vinyasa-letter-spacing-tight);
+}
+
+._4sie9wy {
+  letter-spacing: var(--vinyasa-letter-spacing-normal);
+}
+
+._4sie9wz {
+  letter-spacing: var(--vinyasa-letter-spacing-wide);
+}
+
+._4sie9w10 {
+  line-height: var(--vinyasa-line-height-tight);
+}
+
+._4sie9w11 {
+  line-height: var(--vinyasa-line-height-normal);
+}
+
+._4sie9w12 {
+  line-height: var(--vinyasa-line-height-loose);
+}
+
+._4sie9w13 {
+  text-wrap: wrap;
+}
+
+._4sie9w14 {
+  text-wrap: balance;
+}
+
+._4sie9w15 {
+  text-wrap: pretty;
+}
+
+._4sie9w16 {
+  text-wrap: nowrap;
+}
+
+._4sie9w17 {
+  color: rgba(0, 0, 0, 0);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+

package/dist/esm/191.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,12 +76,114 @@
 }
 
 ._4sie9wj {
-  color: var(--vinyasa-error);
+  color: var(--vinyasa-status-info-text);
 }
 
 ._4sie9wk {
+  color: var(--vinyasa-status-success-text);
+}
+
+._4sie9wl {
+  color: var(--vinyasa-status-warning-text);
+}
+
+._4sie9wm {
+  color: var(--vinyasa-status-error-text);
+}
+
+._4sie9wn {
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
+  display: inline-block;
   overflow: hidden;
 }
 
+._4sie9wo {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  direction: rtl;
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+}
+
+._4sie9wp {
+  font-style: italic;
+}
+
+._4sie9wq {
+  text-transform: uppercase;
+}
+
+._4sie9wr {
+  text-transform: lowercase;
+}
+
+._4sie9ws {
+  text-transform: capitalize;
+}
+
+._4sie9wt {
+  text-transform: none;
+}
+
+._4sie9wu {
+  text-decoration: underline;
+}
+
+._4sie9wv {
+  text-decoration: line-through;
+}
+
+._4sie9ww {
+  text-decoration: none;
+}
+
+._4sie9wx {
+  letter-spacing: var(--vinyasa-letter-spacing-tight);
+}
+
+._4sie9wy {
+  letter-spacing: var(--vinyasa-letter-spacing-normal);
+}
+
+._4sie9wz {
+  letter-spacing: var(--vinyasa-letter-spacing-wide);
+}
+
+._4sie9w10 {
+  line-height: var(--vinyasa-line-height-tight);
+}
+
+._4sie9w11 {
+  line-height: var(--vinyasa-line-height-normal);
+}
+
+._4sie9w12 {
+  line-height: var(--vinyasa-line-height-loose);
+}
+
+._4sie9w13 {
+  text-wrap: wrap;
+}
+
+._4sie9w14 {
+  text-wrap: balance;
+}
+
+._4sie9w15 {
+  text-wrap: pretty;
+}
+
+._4sie9w16 {
+  text-wrap: nowrap;
+}
+
+._4sie9w17 {
+  color: #0000;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+

package/dist/esm/191.js

@@ -1,5 +1,6 @@
 import "./191.css";
 import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
 import { forwardRef } from "react";
 import { createRuntimeFn } from "./953.js";
 import { resolveSpacingStyle } from "./474.js";
@@ -31,10 +32,47 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            end: '_4sie9wn',
+            start: '_4sie9wo'
+        },
+        italic: {
+            true: '_4sie9wp'
+        },
+        textTransform: {
+            uppercase: '_4sie9wq',
+            lowercase: '_4sie9wr',
+            capitalize: '_4sie9ws',
+            none: '_4sie9wt'
+        },
+        decoration: {
+            underline: '_4sie9wu',
+            'line-through': '_4sie9wv',
+            none: '_4sie9ww'
+        },
+        letterSpacing: {
+            tight: '_4sie9wx',
+            normal: '_4sie9wy',
+            wide: '_4sie9wz'
+        },
+        lineHeight: {
+            tight: '_4sie9w10',
+            normal: '_4sie9w11',
+            loose: '_4sie9w12'
+        },
+        textWrap: {
+            wrap: '_4sie9w13',
+            balance: '_4sie9w14',
+            pretty: '_4sie9w15',
+            nowrap: '_4sie9w16'
+        },
+        variant: {
+            gradient: '_4sie9w17'
         }
     },
     defaultVariants: {
@@ -44,20 +82,24 @@ var Text_css_text = createRuntimeFn({
     },
     compoundVariants: []
 });
-const Text = /*#__PURE__*/ forwardRef(({ as: Component = 'span', size, weight, align, color, truncate, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
-    const classes = className ? `${Text_css_text({
-        size,
-        weight,
-        align,
-        color,
-        truncate
-    })} ${className}` : Text_css_text({
+const Text = /*#__PURE__*/ forwardRef(({ as: Component = 'span', size, weight, align, color, truncate, italic, textTransform, decoration, letterSpacing, lineHeight, textWrap, variant, lineClamp, inherit, gradient, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
+    const normalizedTruncate = true === truncate ? 'end' : false === truncate ? void 0 : truncate;
+    const variantArgs = {
         size,
         weight,
         align,
         color,
-        truncate
-    });
+        truncate: normalizedTruncate,
+        italic,
+        textTransform,
+        decoration,
+        letterSpacing,
+        lineHeight,
+        textWrap,
+        variant
+    };
+    const classes = className ? `${Text_css_text(variantArgs)} ${className}` : Text_css_text(variantArgs);
     const spacingStyle = resolveSpacingStyle({
         m,
         mt,
@@ -74,11 +116,30 @@ const Text = /*#__PURE__*/ forwardRef(({ as: Component = 'span', size, weight, a
         px,
         py
     });
+    const inheritStyle = inherit ? {
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        color: 'inherit',
+        lineHeight: 'inherit'
+    } : void 0;
+    const gradientStyle = 'gradient' === variant && gradient ? {
+        backgroundImage: `linear-gradient(${String(gradient.deg ?? 45)}deg, ${gradient.from}, ${gradient.to})`
+    } : void 0;
+    const lineClampStyle = void 0 !== lineClamp ? {
+        display: '-webkit-box',
+        WebkitLineClamp: lineClamp,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden'
+    } : void 0;
     return /*#__PURE__*/ jsx(Component, {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: {
             ...spacingStyle,
+            ...inheritStyle,
+            ...gradientStyle,
+            ...lineClampStyle,
             ...style
         },
         ...rest,

package/dist/esm/227.css

@@ -0,0 +1,7 @@
+.x8q83o0 {
+  background-color: var(--vinyasa-status-warning-bg);
+  color: var(--vinyasa-status-warning-text);
+  border-radius: var(--vinyasa-radius-sm);
+  padding-inline: .2em;
+}
+

package/dist/esm/227.js

@@ -0,0 +1,39 @@
+import "./227.css";
+import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
+import { forwardRef } from "react";
+import { resolveSpacingStyle } from "./474.js";
+var mark = 'x8q83o0';
+const Mark = /*#__PURE__*/ forwardRef(({ m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
+    const classes = className ? `${mark} ${className}` : mark;
+    const computedStyle = {
+        ...resolveSpacingStyle({
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            mx,
+            my,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            px,
+            py
+        }),
+        ...style
+    };
+    return /*#__PURE__*/ jsx("mark", {
+        ref: themedRef,
+        className: classes,
+        style: computedStyle,
+        ...rest,
+        children: children
+    });
+});
+Mark.displayName = 'Mark';
+const mark_Mark = Mark;
+export { mark_Mark as Mark };