@vinyasa/typography 1.0.23 → 1.0.25

package/dist/cjs/index.css

@@ -100,7 +100,7 @@
 }
 
 ._4sie9wg {
-  color: var(--vinyasa-on-secondary);
+  color: var(--vinyasa-text-default);
 }
 
 ._4sie9wh {
@@ -112,15 +112,117 @@
 }
 
 ._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;
+}
+
 ._15gjhvw0 {
   font-family: var(--vinyasa-font-family-mono);
   font-size: var(--vinyasa-font-size-sm);
@@ -142,6 +244,14 @@
   display: inline;
 }
 
+.x8q83o0 {
+  background-color: var(--vinyasa-status-warning-bg);
+  color: var(--vinyasa-status-warning-text);
+  border-radius: var(--vinyasa-radius-sm);
+  padding-left: .2em;
+  padding-right: .2em;
+}
+
 ._18ahdyj0 {
   font-family: var(--vinyasa-font-family-mono);
   font-size: var(--vinyasa-font-size-sm);
@@ -163,3 +273,63 @@
   text-decoration: underline;
 }
 
+._1ohxnc10 {
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-md);
+  color: var(--vinyasa-text-default);
+  flex-direction: column;
+  margin: 0;
+  display: flex;
+}
+
+._1ohxnc11 {
+  gap: var(--vinyasa-space1);
+}
+
+._1ohxnc12 {
+  gap: var(--vinyasa-space2);
+}
+
+._1ohxnc13 {
+  gap: var(--vinyasa-space3);
+}
+
+._1ohxnc14 {
+  gap: var(--vinyasa-space4);
+}
+
+._1ohxnc15 {
+  gap: var(--vinyasa-space5);
+}
+
+._1ohxnc16 {
+  gap: var(--vinyasa-space6);
+}
+
+._1ohxnc17 {
+  padding-left: var(--vinyasa-space5);
+}
+
+._1ohxnc18 {
+  padding-left: 0;
+  list-style: none;
+}
+
+._1ohxnc1a {
+  align-items: flex-start;
+  gap: var(--vinyasa-space2);
+  list-style: none;
+  display: flex;
+}
+
+._1ohxnc1b {
+  align-items: center;
+}
+
+._1ohxnc1c {
+  flex-shrink: 0;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+}
+

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,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/label.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/link.cjs

@@ -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
     }));