@highlight-ui/typography - npm Package Compare versions

Comparing version 5.5.1 to 6.0.0

dist/cjs/index.d.ts

@@ -1,6 +0,5 @@
-export { default as DeprecatedTypography } from './src/DeprecatedTypography';
 export { default as TokenisedTypography } from './src/TokenisedTypography';
-export { default as Typography } from './src/Typography';
+export { default as Typography } from './src/TokenisedTypography';
 export { default as Body } from './src/Body';
 export { default as Heading } from './src/Heading';
 export * from './src/types';

dist/cjs/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
 var React = require('react');
 var classnames = require('classnames');
+var utilsCommons = require('@highlight-ui/utils-commons');
 var typographyColorTokens = require('@highlight-ui/tokens/dist/typography/colors.json');
-var utilsCommons = require('@highlight-ui/utils-commons');
 var typographyFontFamilyTokens = require('@highlight-ui/tokens/dist/typography/fontFamilies.json');
@@ -16,5 +17,7 @@ var typographyFontSizeTokens = require('@highlight-ui/tokens/dist/typography/fontSizes.json');
 var typographyLineHeightTokens = require('@highlight-ui/tokens/dist/typography/lineHeights.json');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
+function _interopDefaultLegacy(e) {
+  return e && typeof e === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -46,158 +49,244 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __assign = function () {
+  __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
 };
-
 function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 }
-
-var styles$2 = {"typography":"DeprecatedTypography-module__-O0xhOUn__v5-5-1","heading-1":"DeprecatedTypography-module__y0Q4LyYh__v5-5-1","heading-2":"DeprecatedTypography-module__khtJvuHJ__v5-5-1","heading-3":"DeprecatedTypography-module__QD8-8LLc__v5-5-1","heading-4":"DeprecatedTypography-module__UxI6rWi0__v5-5-1","subtitle-1":"DeprecatedTypography-module__AipOhrDa__v5-5-1","subtitle-2":"DeprecatedTypography-module__-B3JH9qB__v5-5-1","subtitle-3":"DeprecatedTypography-module__jxrvd89D__v5-5-1","subtitle-4":"DeprecatedTypography-module__kyzATfnU__v5-5-1","body-1":"DeprecatedTypography-module__eW1hBgKI__v5-5-1","button-1":"DeprecatedTypography-module__ZFiUdqGs__v5-5-1","caption-1":"DeprecatedTypography-module__MsxIjz9k__v5-5-1","caption-2":"DeprecatedTypography-module__D3Fh2TH4__v5-5-1","overline-1":"DeprecatedTypography-module__2c3sSQJP__v5-5-1"};
-
-var variantMapping = {
-    'heading-1': 'h1',
-    'heading-2': 'h2',
-    'heading-3': 'h3',
-    'heading-4': 'h4',
-    'subtitle-1': 'h6',
-    'subtitle-2': 'h6',
-    'subtitle-3': 'h6',
-    'subtitle-4': 'h6',
-    'body-1': 'p',
-    'button-1': 'span',
-    'caption-1': 'span',
-    'caption-2': 'span',
-    'overline-1': 'span',
+var styles$1 = {
+  "heading-xsmall": "TokenisedTypography-module__onwaDh1v__v6-0-0",
+  "heading-small": "TokenisedTypography-module__EzGiEkH0__v6-0-0",
+  "heading-medium": "TokenisedTypography-module__aJ6ON-c9__v6-0-0",
+  "heading-large": "TokenisedTypography-module__OdqVI7Gq__v6-0-0",
+  "heading-xlarge": "TokenisedTypography-module__sKayCNWr__v6-0-0",
+  "heading-2xl": "TokenisedTypography-module__tdP9nm1h__v6-0-0",
+  "body-small": "TokenisedTypography-module__5SGkIeIV__v6-0-0",
+  "body-base": "TokenisedTypography-module__33RfT-o2__v6-0-0",
+  "body-large": "TokenisedTypography-module__6qCKH0-X__v6-0-0",
+  "body-strong-small": "TokenisedTypography-module__JhRHUPNe__v6-0-0",
+  "body-strong-base": "TokenisedTypography-module__4m-jV2Cj__v6-0-0",
+  "body-strong-large": "TokenisedTypography-module__mDM8xaOH__v6-0-0",
+  "page-heading": "TokenisedTypography-module__vfaNn-y6__v6-0-0",
+  "button": "TokenisedTypography-module__06-oo8NN__v6-0-0",
+  "form-label": "TokenisedTypography-module__WLEBFNws__v6-0-0",
+  "caption": "TokenisedTypography-module__eXnfr---__v6-0-0",
+  "text-link-default": "TokenisedTypography-module__SY0XbgdQ__v6-0-0",
+  "text-link-hover": "TokenisedTypography-module__iyPbDdvh__v6-0-0",
+  "table-data-regular": "TokenisedTypography-module__cEJrzxvS__v6-0-0",
+  "table-data-bold": "TokenisedTypography-module__hsz-gpO6__v6-0-0"
 };
-var DeprecatedTypographyWithRef = function (_a, ref) {
-    var children = _a.children, className = _a.className, component = _a.component, _b = _a.variant, variant = _b === void 0 ? 'body-1' : _b, color = _a.color, style = _a.style, otherProps = __rest(_a, ["children", "className", "component", "variant", "color", "style"]);
-    var tag = component || variantMapping[variant];
-    return React__default["default"].createElement(tag, __assign(__assign({}, otherProps), { ref: ref, style: __assign({ color: color && typographyColorTokens__default["default"][color] }, style), className: classnames__default["default"](styles$2[variant], className, styles$2.typography) }), children);
-};
-DeprecatedTypographyWithRef.displayName = 'DeprecatedTypography';
-var DeprecatedTypography = React__default["default"].forwardRef(DeprecatedTypographyWithRef);
-
-var styles$1 = {"heading-xsmall":"TokenisedTypography-module__onwaDh1v__v5-5-1","heading-small":"TokenisedTypography-module__EzGiEkH0__v5-5-1","heading-medium":"TokenisedTypography-module__aJ6ON-c9__v5-5-1","heading-large":"TokenisedTypography-module__OdqVI7Gq__v5-5-1","heading-xlarge":"TokenisedTypography-module__sKayCNWr__v5-5-1","heading-2xl":"TokenisedTypography-module__tdP9nm1h__v5-5-1","body-small":"TokenisedTypography-module__5SGkIeIV__v5-5-1","body-base":"TokenisedTypography-module__33RfT-o2__v5-5-1","body-large":"TokenisedTypography-module__6qCKH0-X__v5-5-1","body-strong-small":"TokenisedTypography-module__JhRHUPNe__v5-5-1","body-strong-base":"TokenisedTypography-module__4m-jV2Cj__v5-5-1","body-strong-large":"TokenisedTypography-module__mDM8xaOH__v5-5-1","page-heading":"TokenisedTypography-module__vfaNn-y6__v5-5-1","button":"TokenisedTypography-module__06-oo8NN__v5-5-1","form-label":"TokenisedTypography-module__WLEBFNws__v5-5-1","caption":"TokenisedTypography-module__eXnfr---__v5-5-1","text-link-default":"TokenisedTypography-module__SY0XbgdQ__v5-5-1","text-link-hover":"TokenisedTypography-module__iyPbDdvh__v5-5-1","table-data-regular":"TokenisedTypography-module__cEJrzxvS__v5-5-1","table-data-bold":"TokenisedTypography-module__hsz-gpO6__v5-5-1"};
-
 var TokenisedTypographyWithRef = function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.component, component = _b === void 0 ? 'p' : _b, _c = _a.token, token = _c === void 0 ? 'body-base' : _c, color = _a.color, style = _a.style, fontFamily = _a.fontFamily, fontSize = _a.fontSize, fontWeight = _a.fontWeight, letterSpacing = _a.letterSpacing, lineHeight = _a.lineHeight, textTransform = _a.textTransform, textDecoration = _a.textDecoration, metadata = _a.metadata, otherProps = __rest(_a, ["children", "className", "component", "token", "color", "style", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textTransform", "textDecoration", "metadata"]);
-    return React__default["default"].createElement(component, __assign(__assign(__assign({}, otherProps), utilsCommons.parseMetadata(metadata)), { ref: ref, style: __assign({ color: color && typographyColorTokens__default["default"][color], fontFamily: fontFamily && typographyFontFamilyTokens__default["default"][fontFamily], fontSize: fontSize && typographyFontSizeTokens__default["default"][fontSize], fontWeight: fontWeight && typographyFontWeightTokens__default["default"][fontWeight], letterSpacing: letterSpacing && typographyLetterSpacingTokens__default["default"][letterSpacing], lineHeight: lineHeight && typographyLineHeightTokens__default["default"][lineHeight], textTransform: textTransform && typographyTextCaseTokens__default["default"][textTransform], textDecoration: textDecoration && typographyTextDecorationTokens__default["default"][textDecoration] }, style), className: classnames__default["default"](styles$1[token], className) }), children);
+  var children = _a.children,
+    className = _a.className,
+    _b = _a.component,
+    component = _b === void 0 ? 'p' : _b,
+    _c = _a.token,
+    token = _c === void 0 ? 'body-base' : _c,
+    color = _a.color,
+    style = _a.style,
+    fontFamily = _a.fontFamily,
+    fontSize = _a.fontSize,
+    fontWeight = _a.fontWeight,
+    letterSpacing = _a.letterSpacing,
+    lineHeight = _a.lineHeight,
+    textTransform = _a.textTransform,
+    textDecoration = _a.textDecoration,
+    metadata = _a.metadata,
+    otherProps = __rest(_a, ["children", "className", "component", "token", "color", "style", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textTransform", "textDecoration", "metadata"]);
+  return React__default["default"].createElement(component, __assign(__assign(__assign({}, otherProps), utilsCommons.parseMetadata(metadata)), {
+    ref: ref,
+    style: __assign({
+      color: color && typographyColorTokens__default["default"][color],
+      fontFamily: fontFamily && typographyFontFamilyTokens__default["default"][fontFamily],
+      fontSize: fontSize && typographyFontSizeTokens__default["default"][fontSize],
+      fontWeight: fontWeight && typographyFontWeightTokens__default["default"][fontWeight],
+      letterSpacing: letterSpacing && typographyLetterSpacingTokens__default["default"][letterSpacing],
+      lineHeight: lineHeight && typographyLineHeightTokens__default["default"][lineHeight],
+      textTransform: textTransform && typographyTextCaseTokens__default["default"][textTransform],
+      textDecoration: textDecoration && typographyTextDecorationTokens__default["default"][textDecoration]
+    }, style),
+    className: classnames__default["default"](styles$1[token], className)
+  }), children);
 };
 TokenisedTypographyWithRef.displayName = 'TokenisedTypography';
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use `Heading` or `Body` instead.
+ */
 var TokenisedTypography = React__default["default"].forwardRef(TokenisedTypographyWithRef);
-
-var TypographyWithRef = function (_a, ref) {
-    var variant = _a.variant, token = _a.token, fontFamily = _a.fontFamily, fontSize = _a.fontSize, fontWeight = _a.fontWeight, letterSpacing = _a.letterSpacing, lineHeight = _a.lineHeight, textTransform = _a.textTransform, textDecoration = _a.textDecoration, otherProps = __rest(_a, ["variant", "token", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textTransform", "textDecoration"]);
-    return token ? (React__default["default"].createElement(TokenisedTypography, __assign({ ref: ref, token: token, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, letterSpacing: letterSpacing, lineHeight: lineHeight, textTransform: textTransform, textDecoration: textDecoration }, otherProps))) : (React__default["default"].createElement(DeprecatedTypography, __assign({ ref: ref, variant: variant }, otherProps)));
-};
-TypographyWithRef.displayName = 'Typography';
-var Typography = React__default["default"].forwardRef(TypographyWithRef);
-
 var bodyVariantProps = {
-    large: {
-        fontSize: 'large',
-        lineHeight: 'base',
-        fontWeight: 'regular',
-    },
-    small: {
-        fontSize: 'small',
-        lineHeight: 'base',
-        fontWeight: 'regular',
-    },
-    'strong-large': {
-        fontSize: 'large',
-        lineHeight: 'base',
-        fontWeight: 'bold',
-    },
-    'strong-base': {
-        fontSize: 'base',
-        lineHeight: 'large',
-        fontWeight: 'bold',
-    },
-    'strong-small': {
-        fontSize: 'small',
-        lineHeight: 'base',
-        fontWeight: 'bold',
-    },
-    base: {
-        fontSize: 'base',
-        lineHeight: 'large',
-        fontWeight: 'regular',
-    },
+  large: {
+    fontSize: 'large',
+    lineHeight: 'base',
+    fontWeight: 'regular'
+  },
+  small: {
+    fontSize: 'small',
+    lineHeight: 'base',
+    fontWeight: 'regular'
+  },
+  'strong-large': {
+    fontSize: 'large',
+    lineHeight: 'base',
+    fontWeight: 'bold'
+  },
+  'strong-base': {
+    fontSize: 'base',
+    lineHeight: 'large',
+    fontWeight: 'bold'
+  },
+  'strong-small': {
+    fontSize: 'small',
+    lineHeight: 'base',
+    fontWeight: 'bold'
+  },
+  base: {
+    fontSize: 'base',
+    lineHeight: 'large',
+    fontWeight: 'regular'
+  }
 };
 var headingVariantProps = {
-    '2xlarge': {
-        fontSize: '3xl',
-        lineHeight: 'base',
-    },
-    xlarge: {
-        fontSize: '2xl',
-        lineHeight: 'base',
-    },
-    large: {
-        fontSize: 'xlarge',
-        lineHeight: 'base',
-    },
-    medium: {
-        fontSize: 'large',
-        lineHeight: 'base',
-    },
-    small: {
-        fontSize: 'base',
-        lineHeight: 'large',
-    },
-    xsmall: {
-        fontSize: 'small',
-        lineHeight: 'base',
-    },
+  '2xlarge': {
+    fontSize: '3xl',
+    lineHeight: 'base'
+  },
+  xlarge: {
+    fontSize: '2xl',
+    lineHeight: 'base'
+  },
+  large: {
+    fontSize: 'xlarge',
+    lineHeight: 'base'
+  },
+  medium: {
+    fontSize: 'large',
+    lineHeight: 'base'
+  },
+  small: {
+    fontSize: 'base',
+    lineHeight: 'large'
+  },
+  xsmall: {
+    fontSize: 'small',
+    lineHeight: 'base'
+  }
 };
-
-var styles = {"font-family-default":"BaseTypography-module__NmOUTvM0__v5-5-1","font-family-mono":"BaseTypography-module__po5OsKvS__v5-5-1","font-size-xsmall":"BaseTypography-module__C-LvOSG6__v5-5-1","font-size-small":"BaseTypography-module__J3YrpXUR__v5-5-1","font-size-base":"BaseTypography-module__8AgIdCaP__v5-5-1","font-size-large":"BaseTypography-module__l9zhB-Zw__v5-5-1","font-size-xlarge":"BaseTypography-module__ZA4BOkms__v5-5-1","font-size-2xl":"BaseTypography-module__WLdubQwo__v5-5-1","font-size-3xl":"BaseTypography-module__HeXVoMo-__v5-5-1","font-weight-regular":"BaseTypography-module__yf4pXXyL__v5-5-1","font-weight-semi-bold":"BaseTypography-module__05CxVvXB__v5-5-1","font-weight-bold":"BaseTypography-module__M9m6ZH--__v5-5-1","letter-spacing-base":"BaseTypography-module__SU2CO98j__v5-5-1","line-height-base":"BaseTypography-module__C4ENtalM__v5-5-1","line-height-large":"BaseTypography-module__6HvLgJ81__v5-5-1","line-height-xlarge":"BaseTypography-module__Rgd21ujg__v5-5-1","text-transform-none":"BaseTypography-module__FU-eaQl4__v5-5-1","text-transform-uppercase":"BaseTypography-module__z74U-vtO__v5-5-1","text-decoration-none":"BaseTypography-module__GSBUAW-e__v5-5-1","text-decoration-underline":"BaseTypography-module__EhGtBpHg__v5-5-1","color-text-default":"BaseTypography-module__R2VZGFXf__v5-5-1","color-text-subdued":"BaseTypography-module__hMy86pq9__v5-5-1","color-text-hover":"BaseTypography-module__TTgrEHET__v5-5-1","color-text-disabled":"BaseTypography-module__-JmQP03c__v5-5-1","color-text-hint-text":"BaseTypography-module__6UJA7Uou__v5-5-1","color-text-on-primary":"BaseTypography-module__pAq7CRL3__v5-5-1","color-text-on-emphasis":"BaseTypography-module__AAWdp88x__v5-5-1","color-text-on-secondary":"BaseTypography-module__MK-EpEz5__v5-5-1","color-text-on-secondary-disabled":"BaseTypography-module__Zl6pJmtZ__v5-5-1","color-text-on-action-critical":"BaseTypography-module__2nncY0zu__v5-5-1","color-text-on-action-success":"BaseTypography-module__1nLJo2nO__v5-5-1","color-text-on-interactive":"BaseTypography-module__hz7awz-q__v5-5-1","color-text-on-interactive-subdued":"BaseTypography-module__cNLOfx9F__v5-5-1","color-text-on-background-warning":"BaseTypography-module__sGgr2ezo__v5-5-1","color-text-on-background-critical":"BaseTypography-module__UKmQ8dx7__v5-5-1","color-text-on-background-success":"BaseTypography-module__YIv-E-Qk__v5-5-1"};
-
+var styles = {
+  "font-family-default": "BaseTypography-module__NmOUTvM0__v6-0-0",
+  "font-family-mono": "BaseTypography-module__po5OsKvS__v6-0-0",
+  "font-size-xsmall": "BaseTypography-module__C-LvOSG6__v6-0-0",
+  "font-size-small": "BaseTypography-module__J3YrpXUR__v6-0-0",
+  "font-size-base": "BaseTypography-module__8AgIdCaP__v6-0-0",
+  "font-size-large": "BaseTypography-module__l9zhB-Zw__v6-0-0",
+  "font-size-xlarge": "BaseTypography-module__ZA4BOkms__v6-0-0",
+  "font-size-2xl": "BaseTypography-module__WLdubQwo__v6-0-0",
+  "font-size-3xl": "BaseTypography-module__HeXVoMo-__v6-0-0",
+  "font-weight-regular": "BaseTypography-module__yf4pXXyL__v6-0-0",
+  "font-weight-semi-bold": "BaseTypography-module__05CxVvXB__v6-0-0",
+  "font-weight-bold": "BaseTypography-module__M9m6ZH--__v6-0-0",
+  "letter-spacing-base": "BaseTypography-module__SU2CO98j__v6-0-0",
+  "line-height-base": "BaseTypography-module__C4ENtalM__v6-0-0",
+  "line-height-large": "BaseTypography-module__6HvLgJ81__v6-0-0",
+  "line-height-xlarge": "BaseTypography-module__Rgd21ujg__v6-0-0",
+  "text-transform-none": "BaseTypography-module__FU-eaQl4__v6-0-0",
+  "text-transform-uppercase": "BaseTypography-module__z74U-vtO__v6-0-0",
+  "text-decoration-none": "BaseTypography-module__GSBUAW-e__v6-0-0",
+  "text-decoration-underline": "BaseTypography-module__EhGtBpHg__v6-0-0",
+  "color-text-default": "BaseTypography-module__R2VZGFXf__v6-0-0",
+  "color-text-subdued": "BaseTypography-module__hMy86pq9__v6-0-0",
+  "color-text-hover": "BaseTypography-module__TTgrEHET__v6-0-0",
+  "color-text-disabled": "BaseTypography-module__-JmQP03c__v6-0-0",
+  "color-text-hint-text": "BaseTypography-module__6UJA7Uou__v6-0-0",
+  "color-text-on-primary": "BaseTypography-module__pAq7CRL3__v6-0-0",
+  "color-text-on-emphasis": "BaseTypography-module__AAWdp88x__v6-0-0",
+  "color-text-on-secondary": "BaseTypography-module__MK-EpEz5__v6-0-0",
+  "color-text-on-secondary-disabled": "BaseTypography-module__Zl6pJmtZ__v6-0-0",
+  "color-text-on-action-critical": "BaseTypography-module__2nncY0zu__v6-0-0",
+  "color-text-on-action-success": "BaseTypography-module__1nLJo2nO__v6-0-0",
+  "color-text-on-interactive": "BaseTypography-module__hz7awz-q__v6-0-0",
+  "color-text-on-interactive-subdued": "BaseTypography-module__cNLOfx9F__v6-0-0",
+  "color-text-on-background-warning": "BaseTypography-module__sGgr2ezo__v6-0-0",
+  "color-text-on-background-critical": "BaseTypography-module__UKmQ8dx7__v6-0-0",
+  "color-text-on-background-success": "BaseTypography-module__YIv-E-Qk__v6-0-0"
+};
 var BaseTypography = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'span' : _b, children = _a.children, _c = _a.fontFamily, fontFamily = _c === void 0 ? 'default' : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 'base' : _d, _e = _a.fontWeight, fontWeight = _e === void 0 ? 'regular' : _e, _f = _a.letterSpacing, letterSpacing = _f === void 0 ? 'base' : _f, _g = _a.lineHeight, lineHeight = _g === void 0 ? 'base' : _g, _h = _a.textTransform, textTransform = _h === void 0 ? 'none' : _h, _j = _a.textDecoration, textDecoration = _j === void 0 ? 'none' : _j, _k = _a.color, color = _k === void 0 ? 'text-default' : _k;
-    var Component = as;
-    var typographyClass = classnames__default["default"]([
-        "font-family-" + fontFamily,
-        "font-size-" + fontSize,
-        "font-weight-" + fontWeight,
-        "letter-spacing-" + letterSpacing,
-        "line-height-" + lineHeight,
-        "text-transform-" + textTransform,
-        "text-decoration-" + textDecoration,
-        "color-" + color,
-    ].map(function (className) { return styles[className]; }));
-    return React__default["default"].createElement(Component, { className: typographyClass }, children);
+  var _b = _a.as,
+    as = _b === void 0 ? 'span' : _b,
+    children = _a.children,
+    _c = _a.fontFamily,
+    fontFamily = _c === void 0 ? 'default' : _c,
+    _d = _a.fontSize,
+    fontSize = _d === void 0 ? 'base' : _d,
+    _e = _a.fontWeight,
+    fontWeight = _e === void 0 ? 'regular' : _e,
+    _f = _a.letterSpacing,
+    letterSpacing = _f === void 0 ? 'base' : _f,
+    _g = _a.lineHeight,
+    lineHeight = _g === void 0 ? 'base' : _g,
+    _h = _a.textTransform,
+    textTransform = _h === void 0 ? 'none' : _h,
+    _j = _a.textDecoration,
+    textDecoration = _j === void 0 ? 'none' : _j,
+    _k = _a.color,
+    color = _k === void 0 ? 'text-default' : _k;
+  var Component = as;
+  var typographyClass = classnames__default["default"](["font-family-" + fontFamily, "font-size-" + fontSize, "font-weight-" + fontWeight, "letter-spacing-" + letterSpacing, "line-height-" + lineHeight, "text-transform-" + textTransform, "text-decoration-" + textDecoration, "color-" + color].map(function (className) {
+    return styles[className];
+  }));
+  return React__default["default"].createElement(Component, {
+    className: typographyClass
+  }, children);
 };
-
 var Body = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'span' : _b, _c = _a.color, color = _c === void 0 ? 'text-default' : _c, _d = _a.variant, variant = _d === void 0 ? 'base' : _d, children = _a.children;
-    return (React__default["default"].createElement(BaseTypography, __assign({ as: as, color: color, fontFamily: "default", textTransform: "none", textDecoration: "none", letterSpacing: "base" }, bodyVariantProps[variant]), children));
+  var _b = _a.as,
+    as = _b === void 0 ? 'span' : _b,
+    _c = _a.color,
+    color = _c === void 0 ? 'text-default' : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'base' : _d,
+    children = _a.children;
+  return React__default["default"].createElement(BaseTypography, __assign({
+    as: as,
+    color: color,
+    fontFamily: "default",
+    textTransform: "none",
+    textDecoration: "none",
+    letterSpacing: "base"
+  }, bodyVariantProps[variant]), children);
 };
-
 var Heading = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'h1' : _b, _c = _a.color, color = _c === void 0 ? 'text-default' : _c, _d = _a.variant, variant = _d === void 0 ? 'small' : _d, children = _a.children;
-    return (React__default["default"].createElement(BaseTypography, __assign({ as: as, color: color, fontWeight: "bold", fontFamily: "default", textTransform: "none", textDecoration: "none", letterSpacing: "base" }, headingVariantProps[variant]), children));
+  var _b = _a.as,
+    as = _b === void 0 ? 'h1' : _b,
+    _c = _a.color,
+    color = _c === void 0 ? 'text-default' : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'small' : _d,
+    children = _a.children;
+  return React__default["default"].createElement(BaseTypography, __assign({
+    as: as,
+    color: color,
+    fontWeight: "bold",
+    fontFamily: "default",
+    textTransform: "none",
+    textDecoration: "none",
+    letterSpacing: "base"
+  }, headingVariantProps[variant]), children);
 };
-
 exports.Body = Body;
-exports.DeprecatedTypography = DeprecatedTypography;
 exports.Heading = Heading;
 exports.TokenisedTypography = TokenisedTypography;
-exports.Typography = Typography;
+exports.Typography = TokenisedTypography;
 //# sourceMappingURL=index.js.map

dist/cjs/src/TokenisedTypography.d.ts

 import React from 'react';
-declare const TokenisedTypography: React.ForwardRefExoticComponent<Omit<import("./types").DeprecatedTypographyProps, "variant"> & {
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use `Heading` or `Body` instead.
+ */
+declare const TokenisedTypography: React.ForwardRefExoticComponent<{
     token: "heading-xsmall" | "heading-small" | "heading-medium" | "heading-large" | "heading-xlarge" | "heading-2xl" | "body-small" | "body-base" | "body-large" | "body-strong-small" | "body-strong-base" | "body-strong-large" | "page-heading" | "button" | "form-label" | "caption" | "text-link-default" | "text-link-hover" | "table-data-regular" | "table-data-bold";
@@ -13,3 +17,9 @@ fontFamily?: "default" | "mono" | undefined;
     metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
-} & React.RefAttributes<HTMLElement>>;
+} & {
+    className?: string | undefined;
+    component?: string | undefined;
+    color?: "text-default" | "text-subdued" | "text-hover" | "text-disabled" | "text-hint-text" | "text-on-primary" | "text-on-emphasis" | "text-on-secondary" | "text-on-secondary-disabled" | "text-on-action-critical" | "text-on-action-success" | "text-on-interactive" | "text-on-interactive-subdued" | "text-on-background-warning" | "text-on-background-critical" | "text-on-background-success" | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 export default TokenisedTypography;

dist/cjs/src/types.d.ts

@@ -21,3 +21,2 @@ /// <reference types="react" />
 export declare type TypographyLineHeightToken = keyof typeof typographyLineHeightTokens;
-declare type TypographyVariant = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'subtitle-1' | 'subtitle-2' | 'subtitle-3' | 'subtitle-4' | 'body-1' | 'button-1' | 'caption-1' | 'caption-2' | 'overline-1';
 declare type TypographyAsProps = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
@@ -44,15 +43,8 @@ export declare type BaseTypographyProps = React.PropsWithChildren<{
 }>;
-export declare type DeprecatedTypographyProps = React.PropsWithChildren<{
-    /** Allows providing a custom class name */
-    className?: string;
-    /** Specifies an HTML tag for rendering the element */
-    component?: string;
-    /** Specifies a color of the typography */
-    color?: TypographyColorToken;
-    /**
-     * @deprecated This variant prop is deprecated and will be removed in a future release. Please use token prop.
-     */
-    variant?: TypographyVariant;
-} & React.HTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>>;
-export declare type TokenisedTypographyProps = Omit<DeprecatedTypographyProps, 'variant'> & PropsWithMetadata<{
+/**
+ * @deprecated this type is deprecated and will be removed in future releases.
+ * @deprecated This type is deprecated and will be removed in future releases.
+ * Please use `HeadingProps` or `BodyProps` instead.
+ */
+export declare type TokenisedTypographyProps = PropsWithMetadata<{
     /** Specifies typography token (Ignores `variant` if specified) */
@@ -74,4 +66,15 @@ token: TypographyToken;
     textDecoration?: TypographyTextDecorationToken;
-}>;
-export declare type TypographyProps = DeprecatedTypographyProps & Omit<TokenisedTypographyProps, 'token'> & Partial<Pick<TokenisedTypographyProps, 'token'>>;
+}> & React.PropsWithChildren<{
+    /** Allows providing a custom class name */
+    className?: string;
+    /** Specifies an HTML tag for rendering the element */
+    component?: string;
+    /** Specifies a color of the typography */
+    color?: TypographyColorToken;
+}> & React.HTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>;
+/**
+ * @deprecated This type is deprecated and will be removed in future releases.
+ * Please use `HeadingProps` or `BodyProps` instead.
+ */
+export declare type TypographyProps = TokenisedTypographyProps;
 export declare type BodyVariant = 'large' | 'base' | 'small' | 'strong-large' | 'strong-base' | 'strong-small';
@@ -78,0 +81,0 @@ export declare type HeadingVariant = '2xlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';

dist/esm/index.d.ts

@@ -1,6 +0,5 @@
-export { default as DeprecatedTypography } from './src/DeprecatedTypography';
 export { default as TokenisedTypography } from './src/TokenisedTypography';
-export { default as Typography } from './src/Typography';
+export { default as Typography } from './src/TokenisedTypography';
 export { default as Body } from './src/Body';
 export { default as Heading } from './src/Heading';
 export * from './src/types';

dist/esm/index.js

 import React from 'react';
 import classnames from 'classnames';
+import { parseMetadata } from '@highlight-ui/utils-commons';
 import typographyColorTokens from '@highlight-ui/tokens/dist/typography/colors.json';
-import { parseMetadata } from '@highlight-ui/utils-commons';
 import typographyFontFamilyTokens from '@highlight-ui/tokens/dist/typography/fontFamilies.json';
@@ -28,154 +28,241 @@ import typographyFontSizeTokens from '@highlight-ui/tokens/dist/typography/fontSizes.json';
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __assign = function () {
+  __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
 };
-
 function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 }
-
-var styles$2 = {"typography":"DeprecatedTypography-module__-O0xhOUn__v5-5-1","heading-1":"DeprecatedTypography-module__y0Q4LyYh__v5-5-1","heading-2":"DeprecatedTypography-module__khtJvuHJ__v5-5-1","heading-3":"DeprecatedTypography-module__QD8-8LLc__v5-5-1","heading-4":"DeprecatedTypography-module__UxI6rWi0__v5-5-1","subtitle-1":"DeprecatedTypography-module__AipOhrDa__v5-5-1","subtitle-2":"DeprecatedTypography-module__-B3JH9qB__v5-5-1","subtitle-3":"DeprecatedTypography-module__jxrvd89D__v5-5-1","subtitle-4":"DeprecatedTypography-module__kyzATfnU__v5-5-1","body-1":"DeprecatedTypography-module__eW1hBgKI__v5-5-1","button-1":"DeprecatedTypography-module__ZFiUdqGs__v5-5-1","caption-1":"DeprecatedTypography-module__MsxIjz9k__v5-5-1","caption-2":"DeprecatedTypography-module__D3Fh2TH4__v5-5-1","overline-1":"DeprecatedTypography-module__2c3sSQJP__v5-5-1"};
-
-var variantMapping = {
-    'heading-1': 'h1',
-    'heading-2': 'h2',
-    'heading-3': 'h3',
-    'heading-4': 'h4',
-    'subtitle-1': 'h6',
-    'subtitle-2': 'h6',
-    'subtitle-3': 'h6',
-    'subtitle-4': 'h6',
-    'body-1': 'p',
-    'button-1': 'span',
-    'caption-1': 'span',
-    'caption-2': 'span',
-    'overline-1': 'span',
+var styles$1 = {
+  "heading-xsmall": "TokenisedTypography-module__onwaDh1v__v6-0-0",
+  "heading-small": "TokenisedTypography-module__EzGiEkH0__v6-0-0",
+  "heading-medium": "TokenisedTypography-module__aJ6ON-c9__v6-0-0",
+  "heading-large": "TokenisedTypography-module__OdqVI7Gq__v6-0-0",
+  "heading-xlarge": "TokenisedTypography-module__sKayCNWr__v6-0-0",
+  "heading-2xl": "TokenisedTypography-module__tdP9nm1h__v6-0-0",
+  "body-small": "TokenisedTypography-module__5SGkIeIV__v6-0-0",
+  "body-base": "TokenisedTypography-module__33RfT-o2__v6-0-0",
+  "body-large": "TokenisedTypography-module__6qCKH0-X__v6-0-0",
+  "body-strong-small": "TokenisedTypography-module__JhRHUPNe__v6-0-0",
+  "body-strong-base": "TokenisedTypography-module__4m-jV2Cj__v6-0-0",
+  "body-strong-large": "TokenisedTypography-module__mDM8xaOH__v6-0-0",
+  "page-heading": "TokenisedTypography-module__vfaNn-y6__v6-0-0",
+  "button": "TokenisedTypography-module__06-oo8NN__v6-0-0",
+  "form-label": "TokenisedTypography-module__WLEBFNws__v6-0-0",
+  "caption": "TokenisedTypography-module__eXnfr---__v6-0-0",
+  "text-link-default": "TokenisedTypography-module__SY0XbgdQ__v6-0-0",
+  "text-link-hover": "TokenisedTypography-module__iyPbDdvh__v6-0-0",
+  "table-data-regular": "TokenisedTypography-module__cEJrzxvS__v6-0-0",
+  "table-data-bold": "TokenisedTypography-module__hsz-gpO6__v6-0-0"
 };
-var DeprecatedTypographyWithRef = function (_a, ref) {
-    var children = _a.children, className = _a.className, component = _a.component, _b = _a.variant, variant = _b === void 0 ? 'body-1' : _b, color = _a.color, style = _a.style, otherProps = __rest(_a, ["children", "className", "component", "variant", "color", "style"]);
-    var tag = component || variantMapping[variant];
-    return React.createElement(tag, __assign(__assign({}, otherProps), { ref: ref, style: __assign({ color: color && typographyColorTokens[color] }, style), className: classnames(styles$2[variant], className, styles$2.typography) }), children);
-};
-DeprecatedTypographyWithRef.displayName = 'DeprecatedTypography';
-var DeprecatedTypography = React.forwardRef(DeprecatedTypographyWithRef);
-
-var styles$1 = {"heading-xsmall":"TokenisedTypography-module__onwaDh1v__v5-5-1","heading-small":"TokenisedTypography-module__EzGiEkH0__v5-5-1","heading-medium":"TokenisedTypography-module__aJ6ON-c9__v5-5-1","heading-large":"TokenisedTypography-module__OdqVI7Gq__v5-5-1","heading-xlarge":"TokenisedTypography-module__sKayCNWr__v5-5-1","heading-2xl":"TokenisedTypography-module__tdP9nm1h__v5-5-1","body-small":"TokenisedTypography-module__5SGkIeIV__v5-5-1","body-base":"TokenisedTypography-module__33RfT-o2__v5-5-1","body-large":"TokenisedTypography-module__6qCKH0-X__v5-5-1","body-strong-small":"TokenisedTypography-module__JhRHUPNe__v5-5-1","body-strong-base":"TokenisedTypography-module__4m-jV2Cj__v5-5-1","body-strong-large":"TokenisedTypography-module__mDM8xaOH__v5-5-1","page-heading":"TokenisedTypography-module__vfaNn-y6__v5-5-1","button":"TokenisedTypography-module__06-oo8NN__v5-5-1","form-label":"TokenisedTypography-module__WLEBFNws__v5-5-1","caption":"TokenisedTypography-module__eXnfr---__v5-5-1","text-link-default":"TokenisedTypography-module__SY0XbgdQ__v5-5-1","text-link-hover":"TokenisedTypography-module__iyPbDdvh__v5-5-1","table-data-regular":"TokenisedTypography-module__cEJrzxvS__v5-5-1","table-data-bold":"TokenisedTypography-module__hsz-gpO6__v5-5-1"};
-
 var TokenisedTypographyWithRef = function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.component, component = _b === void 0 ? 'p' : _b, _c = _a.token, token = _c === void 0 ? 'body-base' : _c, color = _a.color, style = _a.style, fontFamily = _a.fontFamily, fontSize = _a.fontSize, fontWeight = _a.fontWeight, letterSpacing = _a.letterSpacing, lineHeight = _a.lineHeight, textTransform = _a.textTransform, textDecoration = _a.textDecoration, metadata = _a.metadata, otherProps = __rest(_a, ["children", "className", "component", "token", "color", "style", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textTransform", "textDecoration", "metadata"]);
-    return React.createElement(component, __assign(__assign(__assign({}, otherProps), parseMetadata(metadata)), { ref: ref, style: __assign({ color: color && typographyColorTokens[color], fontFamily: fontFamily && typographyFontFamilyTokens[fontFamily], fontSize: fontSize && typographyFontSizeTokens[fontSize], fontWeight: fontWeight && typographyFontWeightTokens[fontWeight], letterSpacing: letterSpacing && typographyLetterSpacingTokens[letterSpacing], lineHeight: lineHeight && typographyLineHeightTokens[lineHeight], textTransform: textTransform && typographyTextCaseTokens[textTransform], textDecoration: textDecoration && typographyTextDecorationTokens[textDecoration] }, style), className: classnames(styles$1[token], className) }), children);
+  var children = _a.children,
+    className = _a.className,
+    _b = _a.component,
+    component = _b === void 0 ? 'p' : _b,
+    _c = _a.token,
+    token = _c === void 0 ? 'body-base' : _c,
+    color = _a.color,
+    style = _a.style,
+    fontFamily = _a.fontFamily,
+    fontSize = _a.fontSize,
+    fontWeight = _a.fontWeight,
+    letterSpacing = _a.letterSpacing,
+    lineHeight = _a.lineHeight,
+    textTransform = _a.textTransform,
+    textDecoration = _a.textDecoration,
+    metadata = _a.metadata,
+    otherProps = __rest(_a, ["children", "className", "component", "token", "color", "style", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textTransform", "textDecoration", "metadata"]);
+  return /*#__PURE__*/React.createElement(component, __assign(__assign(__assign({}, otherProps), parseMetadata(metadata)), {
+    ref: ref,
+    style: __assign({
+      color: color && typographyColorTokens[color],
+      fontFamily: fontFamily && typographyFontFamilyTokens[fontFamily],
+      fontSize: fontSize && typographyFontSizeTokens[fontSize],
+      fontWeight: fontWeight && typographyFontWeightTokens[fontWeight],
+      letterSpacing: letterSpacing && typographyLetterSpacingTokens[letterSpacing],
+      lineHeight: lineHeight && typographyLineHeightTokens[lineHeight],
+      textTransform: textTransform && typographyTextCaseTokens[textTransform],
+      textDecoration: textDecoration && typographyTextDecorationTokens[textDecoration]
+    }, style),
+    className: classnames(styles$1[token], className)
+  }), children);
 };
 TokenisedTypographyWithRef.displayName = 'TokenisedTypography';
-var TokenisedTypography = React.forwardRef(TokenisedTypographyWithRef);
-
-var TypographyWithRef = function (_a, ref) {
-    var variant = _a.variant, token = _a.token, fontFamily = _a.fontFamily, fontSize = _a.fontSize, fontWeight = _a.fontWeight, letterSpacing = _a.letterSpacing, lineHeight = _a.lineHeight, textTransform = _a.textTransform, textDecoration = _a.textDecoration, otherProps = __rest(_a, ["variant", "token", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textTransform", "textDecoration"]);
-    return token ? (React.createElement(TokenisedTypography, __assign({ ref: ref, token: token, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, letterSpacing: letterSpacing, lineHeight: lineHeight, textTransform: textTransform, textDecoration: textDecoration }, otherProps))) : (React.createElement(DeprecatedTypography, __assign({ ref: ref, variant: variant }, otherProps)));
-};
-TypographyWithRef.displayName = 'Typography';
-var Typography = React.forwardRef(TypographyWithRef);
-
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use `Heading` or `Body` instead.
+ */
+var TokenisedTypography = /*#__PURE__*/React.forwardRef(TokenisedTypographyWithRef);
 var bodyVariantProps = {
-    large: {
-        fontSize: 'large',
-        lineHeight: 'base',
-        fontWeight: 'regular',
-    },
-    small: {
-        fontSize: 'small',
-        lineHeight: 'base',
-        fontWeight: 'regular',
-    },
-    'strong-large': {
-        fontSize: 'large',
-        lineHeight: 'base',
-        fontWeight: 'bold',
-    },
-    'strong-base': {
-        fontSize: 'base',
-        lineHeight: 'large',
-        fontWeight: 'bold',
-    },
-    'strong-small': {
-        fontSize: 'small',
-        lineHeight: 'base',
-        fontWeight: 'bold',
-    },
-    base: {
-        fontSize: 'base',
-        lineHeight: 'large',
-        fontWeight: 'regular',
-    },
+  large: {
+    fontSize: 'large',
+    lineHeight: 'base',
+    fontWeight: 'regular'
+  },
+  small: {
+    fontSize: 'small',
+    lineHeight: 'base',
+    fontWeight: 'regular'
+  },
+  'strong-large': {
+    fontSize: 'large',
+    lineHeight: 'base',
+    fontWeight: 'bold'
+  },
+  'strong-base': {
+    fontSize: 'base',
+    lineHeight: 'large',
+    fontWeight: 'bold'
+  },
+  'strong-small': {
+    fontSize: 'small',
+    lineHeight: 'base',
+    fontWeight: 'bold'
+  },
+  base: {
+    fontSize: 'base',
+    lineHeight: 'large',
+    fontWeight: 'regular'
+  }
 };
 var headingVariantProps = {
-    '2xlarge': {
-        fontSize: '3xl',
-        lineHeight: 'base',
-    },
-    xlarge: {
-        fontSize: '2xl',
-        lineHeight: 'base',
-    },
-    large: {
-        fontSize: 'xlarge',
-        lineHeight: 'base',
-    },
-    medium: {
-        fontSize: 'large',
-        lineHeight: 'base',
-    },
-    small: {
-        fontSize: 'base',
-        lineHeight: 'large',
-    },
-    xsmall: {
-        fontSize: 'small',
-        lineHeight: 'base',
-    },
+  '2xlarge': {
+    fontSize: '3xl',
+    lineHeight: 'base'
+  },
+  xlarge: {
+    fontSize: '2xl',
+    lineHeight: 'base'
+  },
+  large: {
+    fontSize: 'xlarge',
+    lineHeight: 'base'
+  },
+  medium: {
+    fontSize: 'large',
+    lineHeight: 'base'
+  },
+  small: {
+    fontSize: 'base',
+    lineHeight: 'large'
+  },
+  xsmall: {
+    fontSize: 'small',
+    lineHeight: 'base'
+  }
 };
-
-var styles = {"font-family-default":"BaseTypography-module__NmOUTvM0__v5-5-1","font-family-mono":"BaseTypography-module__po5OsKvS__v5-5-1","font-size-xsmall":"BaseTypography-module__C-LvOSG6__v5-5-1","font-size-small":"BaseTypography-module__J3YrpXUR__v5-5-1","font-size-base":"BaseTypography-module__8AgIdCaP__v5-5-1","font-size-large":"BaseTypography-module__l9zhB-Zw__v5-5-1","font-size-xlarge":"BaseTypography-module__ZA4BOkms__v5-5-1","font-size-2xl":"BaseTypography-module__WLdubQwo__v5-5-1","font-size-3xl":"BaseTypography-module__HeXVoMo-__v5-5-1","font-weight-regular":"BaseTypography-module__yf4pXXyL__v5-5-1","font-weight-semi-bold":"BaseTypography-module__05CxVvXB__v5-5-1","font-weight-bold":"BaseTypography-module__M9m6ZH--__v5-5-1","letter-spacing-base":"BaseTypography-module__SU2CO98j__v5-5-1","line-height-base":"BaseTypography-module__C4ENtalM__v5-5-1","line-height-large":"BaseTypography-module__6HvLgJ81__v5-5-1","line-height-xlarge":"BaseTypography-module__Rgd21ujg__v5-5-1","text-transform-none":"BaseTypography-module__FU-eaQl4__v5-5-1","text-transform-uppercase":"BaseTypography-module__z74U-vtO__v5-5-1","text-decoration-none":"BaseTypography-module__GSBUAW-e__v5-5-1","text-decoration-underline":"BaseTypography-module__EhGtBpHg__v5-5-1","color-text-default":"BaseTypography-module__R2VZGFXf__v5-5-1","color-text-subdued":"BaseTypography-module__hMy86pq9__v5-5-1","color-text-hover":"BaseTypography-module__TTgrEHET__v5-5-1","color-text-disabled":"BaseTypography-module__-JmQP03c__v5-5-1","color-text-hint-text":"BaseTypography-module__6UJA7Uou__v5-5-1","color-text-on-primary":"BaseTypography-module__pAq7CRL3__v5-5-1","color-text-on-emphasis":"BaseTypography-module__AAWdp88x__v5-5-1","color-text-on-secondary":"BaseTypography-module__MK-EpEz5__v5-5-1","color-text-on-secondary-disabled":"BaseTypography-module__Zl6pJmtZ__v5-5-1","color-text-on-action-critical":"BaseTypography-module__2nncY0zu__v5-5-1","color-text-on-action-success":"BaseTypography-module__1nLJo2nO__v5-5-1","color-text-on-interactive":"BaseTypography-module__hz7awz-q__v5-5-1","color-text-on-interactive-subdued":"BaseTypography-module__cNLOfx9F__v5-5-1","color-text-on-background-warning":"BaseTypography-module__sGgr2ezo__v5-5-1","color-text-on-background-critical":"BaseTypography-module__UKmQ8dx7__v5-5-1","color-text-on-background-success":"BaseTypography-module__YIv-E-Qk__v5-5-1"};
-
+var styles = {
+  "font-family-default": "BaseTypography-module__NmOUTvM0__v6-0-0",
+  "font-family-mono": "BaseTypography-module__po5OsKvS__v6-0-0",
+  "font-size-xsmall": "BaseTypography-module__C-LvOSG6__v6-0-0",
+  "font-size-small": "BaseTypography-module__J3YrpXUR__v6-0-0",
+  "font-size-base": "BaseTypography-module__8AgIdCaP__v6-0-0",
+  "font-size-large": "BaseTypography-module__l9zhB-Zw__v6-0-0",
+  "font-size-xlarge": "BaseTypography-module__ZA4BOkms__v6-0-0",
+  "font-size-2xl": "BaseTypography-module__WLdubQwo__v6-0-0",
+  "font-size-3xl": "BaseTypography-module__HeXVoMo-__v6-0-0",
+  "font-weight-regular": "BaseTypography-module__yf4pXXyL__v6-0-0",
+  "font-weight-semi-bold": "BaseTypography-module__05CxVvXB__v6-0-0",
+  "font-weight-bold": "BaseTypography-module__M9m6ZH--__v6-0-0",
+  "letter-spacing-base": "BaseTypography-module__SU2CO98j__v6-0-0",
+  "line-height-base": "BaseTypography-module__C4ENtalM__v6-0-0",
+  "line-height-large": "BaseTypography-module__6HvLgJ81__v6-0-0",
+  "line-height-xlarge": "BaseTypography-module__Rgd21ujg__v6-0-0",
+  "text-transform-none": "BaseTypography-module__FU-eaQl4__v6-0-0",
+  "text-transform-uppercase": "BaseTypography-module__z74U-vtO__v6-0-0",
+  "text-decoration-none": "BaseTypography-module__GSBUAW-e__v6-0-0",
+  "text-decoration-underline": "BaseTypography-module__EhGtBpHg__v6-0-0",
+  "color-text-default": "BaseTypography-module__R2VZGFXf__v6-0-0",
+  "color-text-subdued": "BaseTypography-module__hMy86pq9__v6-0-0",
+  "color-text-hover": "BaseTypography-module__TTgrEHET__v6-0-0",
+  "color-text-disabled": "BaseTypography-module__-JmQP03c__v6-0-0",
+  "color-text-hint-text": "BaseTypography-module__6UJA7Uou__v6-0-0",
+  "color-text-on-primary": "BaseTypography-module__pAq7CRL3__v6-0-0",
+  "color-text-on-emphasis": "BaseTypography-module__AAWdp88x__v6-0-0",
+  "color-text-on-secondary": "BaseTypography-module__MK-EpEz5__v6-0-0",
+  "color-text-on-secondary-disabled": "BaseTypography-module__Zl6pJmtZ__v6-0-0",
+  "color-text-on-action-critical": "BaseTypography-module__2nncY0zu__v6-0-0",
+  "color-text-on-action-success": "BaseTypography-module__1nLJo2nO__v6-0-0",
+  "color-text-on-interactive": "BaseTypography-module__hz7awz-q__v6-0-0",
+  "color-text-on-interactive-subdued": "BaseTypography-module__cNLOfx9F__v6-0-0",
+  "color-text-on-background-warning": "BaseTypography-module__sGgr2ezo__v6-0-0",
+  "color-text-on-background-critical": "BaseTypography-module__UKmQ8dx7__v6-0-0",
+  "color-text-on-background-success": "BaseTypography-module__YIv-E-Qk__v6-0-0"
+};
 var BaseTypography = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'span' : _b, children = _a.children, _c = _a.fontFamily, fontFamily = _c === void 0 ? 'default' : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 'base' : _d, _e = _a.fontWeight, fontWeight = _e === void 0 ? 'regular' : _e, _f = _a.letterSpacing, letterSpacing = _f === void 0 ? 'base' : _f, _g = _a.lineHeight, lineHeight = _g === void 0 ? 'base' : _g, _h = _a.textTransform, textTransform = _h === void 0 ? 'none' : _h, _j = _a.textDecoration, textDecoration = _j === void 0 ? 'none' : _j, _k = _a.color, color = _k === void 0 ? 'text-default' : _k;
-    var Component = as;
-    var typographyClass = classnames([
-        "font-family-" + fontFamily,
-        "font-size-" + fontSize,
-        "font-weight-" + fontWeight,
-        "letter-spacing-" + letterSpacing,
-        "line-height-" + lineHeight,
-        "text-transform-" + textTransform,
-        "text-decoration-" + textDecoration,
-        "color-" + color,
-    ].map(function (className) { return styles[className]; }));
-    return React.createElement(Component, { className: typographyClass }, children);
+  var _b = _a.as,
+    as = _b === void 0 ? 'span' : _b,
+    children = _a.children,
+    _c = _a.fontFamily,
+    fontFamily = _c === void 0 ? 'default' : _c,
+    _d = _a.fontSize,
+    fontSize = _d === void 0 ? 'base' : _d,
+    _e = _a.fontWeight,
+    fontWeight = _e === void 0 ? 'regular' : _e,
+    _f = _a.letterSpacing,
+    letterSpacing = _f === void 0 ? 'base' : _f,
+    _g = _a.lineHeight,
+    lineHeight = _g === void 0 ? 'base' : _g,
+    _h = _a.textTransform,
+    textTransform = _h === void 0 ? 'none' : _h,
+    _j = _a.textDecoration,
+    textDecoration = _j === void 0 ? 'none' : _j,
+    _k = _a.color,
+    color = _k === void 0 ? 'text-default' : _k;
+  var Component = as;
+  var typographyClass = classnames(["font-family-" + fontFamily, "font-size-" + fontSize, "font-weight-" + fontWeight, "letter-spacing-" + letterSpacing, "line-height-" + lineHeight, "text-transform-" + textTransform, "text-decoration-" + textDecoration, "color-" + color].map(function (className) {
+    return styles[className];
+  }));
+  return /*#__PURE__*/React.createElement(Component, {
+    className: typographyClass
+  }, children);
 };
-
 var Body = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'span' : _b, _c = _a.color, color = _c === void 0 ? 'text-default' : _c, _d = _a.variant, variant = _d === void 0 ? 'base' : _d, children = _a.children;
-    return (React.createElement(BaseTypography, __assign({ as: as, color: color, fontFamily: "default", textTransform: "none", textDecoration: "none", letterSpacing: "base" }, bodyVariantProps[variant]), children));
+  var _b = _a.as,
+    as = _b === void 0 ? 'span' : _b,
+    _c = _a.color,
+    color = _c === void 0 ? 'text-default' : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'base' : _d,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement(BaseTypography, __assign({
+    as: as,
+    color: color,
+    fontFamily: "default",
+    textTransform: "none",
+    textDecoration: "none",
+    letterSpacing: "base"
+  }, bodyVariantProps[variant]), children);
 };
-
 var Heading = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'h1' : _b, _c = _a.color, color = _c === void 0 ? 'text-default' : _c, _d = _a.variant, variant = _d === void 0 ? 'small' : _d, children = _a.children;
-    return (React.createElement(BaseTypography, __assign({ as: as, color: color, fontWeight: "bold", fontFamily: "default", textTransform: "none", textDecoration: "none", letterSpacing: "base" }, headingVariantProps[variant]), children));
+  var _b = _a.as,
+    as = _b === void 0 ? 'h1' : _b,
+    _c = _a.color,
+    color = _c === void 0 ? 'text-default' : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'small' : _d,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement(BaseTypography, __assign({
+    as: as,
+    color: color,
+    fontWeight: "bold",
+    fontFamily: "default",
+    textTransform: "none",
+    textDecoration: "none",
+    letterSpacing: "base"
+  }, headingVariantProps[variant]), children);
 };
-
-export { Body, DeprecatedTypography, Heading, TokenisedTypography, Typography };
+export { Body, Heading, TokenisedTypography, TokenisedTypography as Typography };
 //# sourceMappingURL=index.js.map

dist/esm/src/TokenisedTypography.d.ts

 import React from 'react';
-declare const TokenisedTypography: React.ForwardRefExoticComponent<Omit<import("./types").DeprecatedTypographyProps, "variant"> & {
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use `Heading` or `Body` instead.
+ */
+declare const TokenisedTypography: React.ForwardRefExoticComponent<{
     token: "heading-xsmall" | "heading-small" | "heading-medium" | "heading-large" | "heading-xlarge" | "heading-2xl" | "body-small" | "body-base" | "body-large" | "body-strong-small" | "body-strong-base" | "body-strong-large" | "page-heading" | "button" | "form-label" | "caption" | "text-link-default" | "text-link-hover" | "table-data-regular" | "table-data-bold";
@@ -13,3 +17,9 @@ fontFamily?: "default" | "mono" | undefined;
     metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
-} & React.RefAttributes<HTMLElement>>;
+} & {
+    className?: string | undefined;
+    component?: string | undefined;
+    color?: "text-default" | "text-subdued" | "text-hover" | "text-disabled" | "text-hint-text" | "text-on-primary" | "text-on-emphasis" | "text-on-secondary" | "text-on-secondary-disabled" | "text-on-action-critical" | "text-on-action-success" | "text-on-interactive" | "text-on-interactive-subdued" | "text-on-background-warning" | "text-on-background-critical" | "text-on-background-success" | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 export default TokenisedTypography;

dist/esm/src/types.d.ts

@@ -21,3 +21,2 @@ /// <reference types="react" />
 export declare type TypographyLineHeightToken = keyof typeof typographyLineHeightTokens;
-declare type TypographyVariant = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'subtitle-1' | 'subtitle-2' | 'subtitle-3' | 'subtitle-4' | 'body-1' | 'button-1' | 'caption-1' | 'caption-2' | 'overline-1';
 declare type TypographyAsProps = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
@@ -44,15 +43,8 @@ export declare type BaseTypographyProps = React.PropsWithChildren<{
 }>;
-export declare type DeprecatedTypographyProps = React.PropsWithChildren<{
-    /** Allows providing a custom class name */
-    className?: string;
-    /** Specifies an HTML tag for rendering the element */
-    component?: string;
-    /** Specifies a color of the typography */
-    color?: TypographyColorToken;
-    /**
-     * @deprecated This variant prop is deprecated and will be removed in a future release. Please use token prop.
-     */
-    variant?: TypographyVariant;
-} & React.HTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>>;
-export declare type TokenisedTypographyProps = Omit<DeprecatedTypographyProps, 'variant'> & PropsWithMetadata<{
+/**
+ * @deprecated this type is deprecated and will be removed in future releases.
+ * @deprecated This type is deprecated and will be removed in future releases.
+ * Please use `HeadingProps` or `BodyProps` instead.
+ */
+export declare type TokenisedTypographyProps = PropsWithMetadata<{
     /** Specifies typography token (Ignores `variant` if specified) */
@@ -74,4 +66,15 @@ token: TypographyToken;
     textDecoration?: TypographyTextDecorationToken;
-}>;
-export declare type TypographyProps = DeprecatedTypographyProps & Omit<TokenisedTypographyProps, 'token'> & Partial<Pick<TokenisedTypographyProps, 'token'>>;
+}> & React.PropsWithChildren<{
+    /** Allows providing a custom class name */
+    className?: string;
+    /** Specifies an HTML tag for rendering the element */
+    component?: string;
+    /** Specifies a color of the typography */
+    color?: TypographyColorToken;
+}> & React.HTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>;
+/**
+ * @deprecated This type is deprecated and will be removed in future releases.
+ * Please use `HeadingProps` or `BodyProps` instead.
+ */
+export declare type TypographyProps = TokenisedTypographyProps;
 export declare type BodyVariant = 'large' | 'base' | 'small' | 'strong-large' | 'strong-base' | 'strong-small';
@@ -78,0 +81,0 @@ export declare type HeadingVariant = '2xlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';

package.json

 {
   "name": "@highlight-ui/typography",
-  "version": "5.5.1",
+  "version": "6.0.0",
   "author": "Personio GmbH & Co. KG",
@@ -16,4 +16,3 @@ "main": "dist/cjs/index.js",
   "sideEffects": [
-    "*.css",
-    "*.scss"
+    "*.css"
   ],
@@ -25,3 +24,3 @@ "description": "This is the Typography package used by UI-components in Personio",
     "clean": "rimraf dist node_modules .jest-cache junit.xml",
-    "build": "rollup -c ./build/rollup.conf.js",
+    "build": "highlight-build",
     "sb:dev": "export COMPONENT_STORIES=$(basename $(pwd)); cd ../../; pnpm sb:dev"
@@ -38,4 +37,2 @@ },
     "@highlight-ui/tokens": "^3.0.0",
-    "@rollup/plugin-commonjs": "~20.0.0",
-    "@rollup/plugin-node-resolve": "~13.0.5",
     "@testing-library/dom": "8.19.0",
@@ -47,15 +44,7 @@ "@testing-library/jest-dom": "5.14.1",
     "@types/jscodeshift": "~0.11.5",
-    "builtin-modules": "~3.1.0",
     "classnames": "~2.3.1",
     "jest": "~27.2.3",
     "jscodeshift": "~0.14.0",
-    "postcss": "~8.4.5",
     "react": "17.0.2",
-    "rimraf": "~3.0.2",
-    "rollup": "~2.77.0",
-    "rollup-plugin-copy": "~3.4.0",
-    "rollup-plugin-node-externals": "~4.1.1",
-    "rollup-plugin-postcss": "~4.0.0",
-    "rollup-plugin-typescript2": "0.32.1",
-    "sass": "~1.35.2"
+    "rimraf": "~3.0.2"
   },
@@ -70,3 +59,3 @@ "peerDependencies": {
   },
-  "gitHead": "05fb13f342dea601548ba44fcfd87996eb9c6a28"
+  "gitHead": "612012d4e99fbf3062197793b74f636d7fc9f4a7"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

16

decreased by-38.46%

Worsened metrics

Total package byte prevSize

133382

decreased by-13.85%

Number of package files

27

decreased by-28.95%

Lines of code

1486

decreased by-0.6%

No dependency changes