@vinyasa/typography 1.0.22 → 1.0.24

package/dist/cjs/blockquote.cjs

@@ -31,8 +31,8 @@ __webpack_require__.d(__webpack_exports__, {
     default: ()=>blockquote_Blockquote
 });
 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,
@@ -209,6 +209,7 @@ const Blockquote = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${blockquote} ${className}` : blockquote;
     const computedStyle = _object_spread({}, resolveSpacingStyle({
         m,
@@ -227,7 +228,7 @@ const Blockquote = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         py
     }), style);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("blockquote", _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {

package/dist/cjs/caption.cjs

@@ -221,10 +221,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -341,6 +344,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -371,7 +375,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: _object_spread({}, spacingStyle, style)
     }, rest), {

package/dist/cjs/caption.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,10 +76,22 @@
 }
 
 ._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;
   overflow: hidden;

package/dist/cjs/code.cjs

@@ -31,8 +31,8 @@ __webpack_require__.d(__webpack_exports__, {
     default: ()=>code_Code
 });
 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,
@@ -308,6 +308,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${code({
         block
     })} ${className}` : code({
@@ -330,7 +331,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     }), style);
     if (block) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {
@@ -339,7 +340,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         })
     }));
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("code", _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {

package/dist/cjs/heading.cjs

@@ -221,10 +221,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -341,6 +344,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -371,7 +375,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: _object_spread({}, spacingStyle, style)
     }, rest), {

package/dist/cjs/heading.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,10 +76,22 @@
 }
 
 ._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;
   overflow: hidden;

package/dist/cjs/index.cjs

@@ -49,8 +49,8 @@ __webpack_require__.d(__webpack_exports__, {
     Text: ()=>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,
@@ -227,6 +227,7 @@ const Blockquote = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${blockquote} ${className}` : blockquote;
     const computedStyle = _object_spread({}, resolveSpacingStyle({
         m,
@@ -245,7 +246,7 @@ const Blockquote = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         py
     }), style);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("blockquote", _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {
@@ -368,10 +369,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -488,6 +492,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -518,7 +523,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, Text_object_spread_props(Text_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: Text_object_spread({}, spacingStyle, style)
     }, rest), {
@@ -718,6 +723,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${code({
         block
     })} ${className}` : code({
@@ -740,7 +746,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     }), style);
     if (block) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", Code_object_spread_props(Code_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {
@@ -749,7 +755,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         })
     }));
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("code", Code_object_spread_props(Code_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {
@@ -945,6 +951,7 @@ const Kbd = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${kbd} ${className}` : kbd;
     const computedStyle = Kbd_object_spread({}, resolveSpacingStyle({
         m,
@@ -963,7 +970,7 @@ const Kbd = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1
         py
     }), style);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("kbd", Kbd_object_spread_props(Kbd_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {

package/dist/cjs/index.css

@@ -100,7 +100,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -112,10 +112,22 @@
 }
 
 ._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;
   overflow: hidden;

package/dist/cjs/kbd.cjs

@@ -31,8 +31,8 @@ __webpack_require__.d(__webpack_exports__, {
     default: ()=>kbd_Kbd
 });
 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,
@@ -209,6 +209,7 @@ const Kbd = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${kbd} ${className}` : kbd;
     const computedStyle = _object_spread({}, resolveSpacingStyle({
         m,
@@ -227,7 +228,7 @@ const Kbd = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1
         py
     }), style);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("kbd", _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {

package/dist/cjs/label.cjs

@@ -221,10 +221,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -341,6 +344,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -371,7 +375,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: _object_spread({}, spacingStyle, style)
     }, rest), {

package/dist/cjs/label.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,10 +76,22 @@
 }
 
 ._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;
   overflow: hidden;

package/dist/cjs/link.cjs

@@ -221,10 +221,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -341,6 +344,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -371,7 +375,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: _object_spread({}, spacingStyle, style)
     }, rest), {

package/dist/cjs/link.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,10 +76,22 @@
 }
 
 ._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;
   overflow: hidden;

package/dist/cjs/markdown-renderer.cjs

@@ -222,6 +222,7 @@ const Blockquote = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${blockquote} ${className}` : blockquote;
     const computedStyle = _object_spread({}, resolveSpacingStyle({
         m,
@@ -240,7 +241,7 @@ const Blockquote = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         py
     }), style);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("blockquote", _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {
@@ -450,6 +451,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${code({
         block
     })} ${className}` : code({
@@ -472,7 +474,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     }), style);
     if (block) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", Code_object_spread_props(Code_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {
@@ -481,7 +483,7 @@ const Code = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         })
     }));
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("code", Code_object_spread_props(Code_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle
     }, rest), {
@@ -518,10 +520,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -638,6 +643,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -668,7 +674,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, Text_object_spread_props(Text_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: Text_object_spread({}, spacingStyle, style)
     }, rest), {

package/dist/cjs/markdown-renderer.css

@@ -121,7 +121,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -133,10 +133,22 @@
 }
 
 ._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;
   overflow: hidden;

package/dist/cjs/paragraph.cjs

@@ -221,10 +221,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -341,6 +344,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -371,7 +375,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: _object_spread({}, spacingStyle, style)
     }, rest), {

package/dist/cjs/paragraph.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,10 +76,22 @@
 }
 
 ._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;
   overflow: hidden;

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,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -341,6 +344,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -371,7 +375,7 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         py
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: _object_spread({}, spacingStyle, style)
     }, rest), {

package/dist/cjs/text.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,10 +76,22 @@
 }
 
 ._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;
   overflow: hidden;

package/dist/esm/191.css

@@ -64,7 +64,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -76,10 +76,22 @@
 }
 
 ._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;
   overflow: hidden;

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,13 @@ var Text_css_text = createRuntimeFn({
             default: '_4sie9wg',
             muted: '_4sie9wh',
             primary: '_4sie9wi',
-            error: '_4sie9wj'
+            info: '_4sie9wj',
+            success: '_4sie9wk',
+            warning: '_4sie9wl',
+            error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wk'
+            true: '_4sie9wn'
         }
     },
     defaultVariants: {
@@ -45,6 +49,7 @@ 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 themedRef = useThemedRef(ref);
     const classes = className ? `${Text_css_text({
         size,
         weight,
@@ -75,7 +80,7 @@ const Text = /*#__PURE__*/ forwardRef(({ as: Component = 'span', size, weight, a
         py
     });
     return /*#__PURE__*/ jsx(Component, {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: {
             ...spacingStyle,

package/dist/esm/651.js

@@ -1,5 +1,6 @@
 import "./651.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";
@@ -17,6 +18,7 @@ var code = createRuntimeFn({
     compoundVariants: []
 });
 const Code = /*#__PURE__*/ forwardRef(({ block = false, 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 ? `${code({
         block
     })} ${className}` : code({
@@ -42,7 +44,7 @@ const Code = /*#__PURE__*/ forwardRef(({ block = false, m, mt, mr, mb, ml, mx, m
         ...style
     };
     if (block) return /*#__PURE__*/ jsx("pre", {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle,
         ...rest,
@@ -51,7 +53,7 @@ const Code = /*#__PURE__*/ forwardRef(({ block = false, m, mt, mr, mb, ml, mx, m
         })
     });
     return /*#__PURE__*/ jsx("code", {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle,
         ...rest,

package/dist/esm/783.js

@@ -1,9 +1,11 @@
 import "./783.css";
 import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
 import { forwardRef } from "react";
 import { resolveSpacingStyle } from "./474.js";
 var blockquote = 'adxw6l0';
 const Blockquote = /*#__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 ? `${blockquote} ${className}` : blockquote;
     const computedStyle = {
         ...resolveSpacingStyle({
@@ -25,7 +27,7 @@ const Blockquote = /*#__PURE__*/ forwardRef(({ m, mt, mr, mb, ml, mx, my, p, pt,
         ...style
     };
     return /*#__PURE__*/ jsx("blockquote", {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle,
         ...rest,

package/dist/esm/919.js

@@ -1,9 +1,11 @@
 import "./919.css";
 import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
 import { forwardRef } from "react";
 import { resolveSpacingStyle } from "./474.js";
 var kbd = '_18ahdyj0';
 const Kbd = /*#__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 ? `${kbd} ${className}` : kbd;
     const computedStyle = {
         ...resolveSpacingStyle({
@@ -25,7 +27,7 @@ const Kbd = /*#__PURE__*/ forwardRef(({ m, mt, mr, mb, ml, mx, my, p, pt, pr, pb
         ...style
     };
     return /*#__PURE__*/ jsx("kbd", {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle,
         ...rest,

package/dist/esm/components/text/Text.css.d.ts

@@ -60,6 +60,15 @@ export declare const text: import("@vanilla-extract/recipes").RuntimeFn<{
         primary: {
             color: `var(--${string})`;
         };
+        info: {
+            color: `var(--${string})`;
+        };
+        success: {
+            color: `var(--${string})`;
+        };
+        warning: {
+            color: `var(--${string})`;
+        };
         error: {
             color: `var(--${string})`;
         };

package/dist/esm/components/text/Text.d.ts

@@ -8,7 +8,7 @@ declare const Text: import("react").ForwardRefExoticComponent<PolymorphicProps &
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
     weight?: "medium" | "bold" | "regular" | "semibold" | undefined;
     align?: "left" | "right" | "center" | undefined;
-    color?: "default" | "muted" | "primary" | "error" | undefined;
+    color?: "default" | "muted" | "primary" | "info" | "success" | "warning" | "error" | undefined;
     truncate?: boolean | undefined;
 } & SpacingProps & import("react").RefAttributes<HTMLElement>>;
 export default Text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinyasa/typography",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -99,8 +99,8 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@vinyasa/layout": "^1.0.22",
-    "@vinyasa/tokens": "^1.0.22"
+    "@vinyasa/layout": "^1.0.24",
+    "@vinyasa/tokens": "^1.0.24"
   },
   "dependencies": {
     "react-markdown": "^10.1.0"
@@ -116,8 +116,8 @@
     "@vanilla-extract/vite-plugin": "^5.2.3",
     "@vanilla-extract/webpack-plugin": "^2.3.27",
     "typescript": "^5.7.3",
-    "@vinyasa/tokens": "1.0.22",
-    "@vinyasa/layout": "1.0.22"
+    "@vinyasa/layout": "1.0.24",
+    "@vinyasa/tokens": "1.0.24"
   },
   "scripts": {
     "build": "rslib build && node ../../scripts/postbuild-package.mjs",