		# @leafygreen-ui/typography

		## 4.2.2

		### Patch Changes

		- f792966: Uses Tokens package to define `font-family` for InlineCode component
		- Updated dependencies [f792966]
		- @leafygreen-ui/tokens@0.3.0

		## 4.2.1
		@@ -4,0 +12,0 @@

dist/index.js

		@@ -1,2 +0,3 @@
		!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("@leafygreen-ui/emotion"),require("react"),require("@leafygreen-ui/box"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/icon/dist/ArrowRight"),require("@leafygreen-ui/icon/dist/OpenNewTab"),require("@leafygreen-ui/lib"));else if("function"==typeof define&&define.amd)define(["@leafygreen-ui/emotion","react","@leafygreen-ui/box","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/palette","@leafygreen-ui/icon/dist/ArrowRight","@leafygreen-ui/icon/dist/OpenNewTab","@leafygreen-ui/lib"],n);else{var r="object"==typeof exports?n(require("@leafygreen-ui/emotion"),require("react"),require("@leafygreen-ui/box"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/icon/dist/ArrowRight"),require("@leafygreen-ui/icon/dist/OpenNewTab"),require("@leafygreen-ui/lib")):n(e["@leafygreen-ui/emotion"],e.react,e["@leafygreen-ui/box"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/icon/dist/ArrowRight"],e["@leafygreen-ui/icon/dist/OpenNewTab"],e["@leafygreen-ui/lib"]);for(var t in r)("object"==typeof exports?exports:e)[t]=r[t]}}("undefined"!=typeof self?self:this,(function(e,n,r,t,i,o,a,u){return function(e){var n={};function r(t){if(n[t])return n[t].exports;var i=n[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=n,r.d=function(e,n,t){r.o(e,n)\|\|Object.defineProperty(e,n,{enumerable:!0,get:t})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,n){if(1&n&&(e=r(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(r.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var i in e)r.d(t,i,function(n){return e[n]}.bind(null,i));return t},r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,"a",n),n},r.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},r.p="",r(r.s=6)}([function(n,r){n.exports=e},function(e,r){e.exports=n},function(e,n){e.exports=r},function(e,n){e.exports=t},function(e,n){e.exports=i},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.typeScale2=n.typeScale1=void 0;var t=r(0);function i(){var e=a(["\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0px;\n"]);return i=function(){return e},e}function o(){var e=a(["\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0px;\n"]);return o=function(){return e},e}function a(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var u=(0,t.css)(o());n.typeScale1=u;var c=(0,t.css)(i());n.typeScale2=c},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"H1",{enumerable:!0,get:function(){return t.H1}}),Object.defineProperty(n,"H2",{enumerable:!0,get:function(){return t.H2}}),Object.defineProperty(n,"Subtitle",{enumerable:!0,get:function(){return t.Subtitle}}),Object.defineProperty(n,"Body",{enumerable:!0,get:function(){return t.Body}}),Object.defineProperty(n,"InlineCode",{enumerable:!0,get:function(){return t.InlineCode}}),Object.defineProperty(n,"Disclaimer",{enumerable:!0,get:function(){return t.Disclaimer}}),Object.defineProperty(n,"Overline",{enumerable:!0,get:function(){return t.Overline}}),Object.defineProperty(n,"Link",{enumerable:!0,get:function(){return i.Link}});var t=r(7),i=r(8)},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.H1=function(e){var n=e.children,r=e.className,i=m(e,["children","className"]);return t.default.createElement("h1",g({},i,{className:(0,a.cx)(O,j,r)}),n)},n.H2=function(e){var n=e.children,r=e.className,i=m(e,["children","className"]);return t.default.createElement("h2",g({},i,{className:(0,a.cx)(O,w,r)}),n)},n.Subtitle=function(e){var n=e.children,r=e.className,i=m(e,["children","className"]);return t.default.createElement("h6",g({},i,{className:(0,a.cx)(O,S,r)}),n)},n.Body=function(e){var n=e.children,r=e.className,i=e.weight,u=void 0===i?"regular":i,l=m(e,["children","className","weight"]),f=16===(0,o.useBaseFontSize)()?c.typeScale2:c.typeScale1,s=(0,a.css)(y(),"regular"!==u?600:400);return t.default.createElement("p",g({},l,{className:(0,a.cx)(O,f,s,r)}),n)},n.InlineCode=function(e){var n=e.children,r=e.className,i=m(e,["children","className"]),u=16===(0,o.useBaseFontSize)()?c.typeScale2:c.typeScale1;return t.default.createElement("code",g({},i,{className:(0,a.cx)(O,P,u,r)}),n)},n.Disclaimer=function(e){var n=e.children,r=e.className,i=m(e,["children","className"]);return t.default.createElement("small",g({},i,{className:(0,a.cx)(O,N,r)}),n)},n.Overline=void 0;var t=l(r(1)),i=l(r(2)),o=r(3),a=r(0),u=r(4),c=r(5);function l(e){return e&&e.__esModule?e:{default:e}}function f(){var e=x(["\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n line-height: 16px;\n letter-spacing: 0.4px;\n"]);return f=function(){return e},e}function s(){var e=x(["\n display: block;\n font-size: 12px;\n line-height: 20px;\n letter-spacing: 0.2px;\n"]);return s=function(){return e},e}function p(){var e=x(["\n font-family: 'Source Code Pro', monospace;\n display: inline-block;\n"]);return p=function(){return e},e}function y(){var e=x(["\n font-weight: ",";\n "]);return y=function(){return e},e}function d(){var e=x(["\n font-size: 18px;\n line-height: 24px;\n letter-spacing: 0px;\n"]);return d=function(){return e},e}function b(){var e=x(["\n font-size: 32px;\n line-height: 40px;\n letter-spacing: 0px;\n"]);return b=function(){return e},e}function g(){return(g=Object.assign\|\|function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function m(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0\|\|(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function v(){var e=x(["\n font-weight: 500;\n font-size: 60px;\n line-height: 68px;\n letter-spacing: -0.3px;\n"]);return v=function(){return e},e}function h(){var e=x(["\n margin: unset;\n font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n color: ",";\n"]);return h=function(){return e},e}function x(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var O=(0,a.css)(h(),u.uiColors.gray.dark2),j=(0,a.css)(v());var w=(0,a.css)(b());var S=(0,a.css)(d());var P=(0,a.css)(p());var N=(0,a.css)(s());var _=(0,a.css)(f());n.Overline=function(e){var n=e.className,r=m(e,["className"]);return t.default.createElement(i.default,g({className:(0,a.cx)(O,_,n)},r))}},function(e,n,r){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(n,"__esModule",{value:!0}),n.Link=n.ArrowAppearance=void 0;var i=function(e){if(e&&e.__esModule)return e;if(null===e\|\|"object"!==t(e)&&"function"!=typeof e)return{default:e};var n=d();if(n&&n.has(e))return n.get(e);var r={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var a=i?Object.getOwnPropertyDescriptor(e,o):null;a&&(a.get\|\|a.set)?Object.defineProperty(r,o,a):r[o]=e[o]}r.default=e,n&&n.set(e,r);return r}(r(1)),o=y(r(9)),a=y(r(10)),u=y(r(2)),c=r(3),l=r(0),f=r(4),s=r(11),p=r(5);function y(e){return e&&e.__esModule?e:{default:e}}function d(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return d=function(){return e},e}function b(){return(b=Object.assign\|\|function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function g(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function m(e,n){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,n){if("undefined"==typeof Symbol\|\|!(Symbol.iterator in Object(e)))return;var r=[],t=!0,i=!1,o=void 0;try{for(var a,u=e[Symbol.iterator]();!(t=(a=u.next()).done)&&(r.push(a.value),!n\|\|r.length!==n);t=!0);}catch(e){i=!0,o=e}finally{try{t\|\|null==u.return\|\|u.return()}finally{if(i)throw o}}return r}(e,n)\|\|function(e,n){if(!e)return;if("string"==typeof e)return v(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r\|\|"Set"===r)return Array.from(r);if("Arguments"===r\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(r))return v(e,n)}(e,n)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,n){(null==n\|\|n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}function h(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0\|\|(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function x(){var e=P(["\n margin-bottom: -1px;\n margin-left: -1px;\n margin-right: -2px;\n"]);return x=function(){return e},e}function O(){var e=P(["\n opacity: 0;\n transform: translate3d(-3px, 0, 0);\n transition: all 100ms ease-in;\n\n ",":hover & {\n opacity: 1;\n transform: translate3d(3px, 0, 0);\n }\n"]);return O=function(){return e},e}function j(){var e=P(["\n transform: translate3d(3px, 0, 0);\n"]);return j=function(){return e},e}function w(){var e=P(["\n background-repeat: repeat-x;\n background-position: 0 1em;\n background-size: 3px 3px;\n\n ",":hover & {\n background-image: linear-gradient(\n to right,\n "," 100%,\n "," 0\n );\n }\n\n ",":focus & {\n background-image: linear-gradient(to right, #9dd0e7 100%, #9dd0e7 0);\n }\n"]);return w=function(){return e},e}function S(){var e=P(["\n text-decoration: none;\n color: ",";\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n"]);return S=function(){return e},e}function P(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var N=(0,s.createDataProp)("anchor-container"),_=(0,l.css)(S(),f.uiColors.blue.base),z=(0,l.css)(w(),N.selector,f.uiColors.gray.light2,f.uiColors.gray.light2,N.selector),k=(0,l.css)(j()),A=(0,l.css)(O(),N.selector),E=(0,l.css)(x()),q={Hover:"hover",Persist:"persist",None:"none"};n.ArrowAppearance=q;n.Link=function(e){var n,r,t=e.href,f=e.children,s=e.className,y=e.target,d=e.arrowAppearance,v=void 0===d?q.None:d,x=e.hideExternalIcon,O=void 0!==x&&x,j=h(e,["href","children","className","target","arrowAppearance","hideExternalIcon"]),w=m((0,i.useState)(""),2),S=w[0],P=w[1],M=(0,i.useMemo)((function(){return t&&new URL(t).hostname}),[t]),H=16===(0,c.useBaseFontSize)()?p.typeScale2:p.typeScale1;if((0,i.useEffect)((function(){P(window.location.hostname)}),[]),"_blank"!==(n=y\|\|(M===S?"_self":"_blank"))\|\|O){if(v!==q.None){var I;r=i.default.createElement(o.default,{size:10,className:(0,l.cx)((I={},g(I,A,v===q.Hover),g(I,k,v===q.Persist),I))})}}else r=i.default.createElement(a.default,{className:E});return i.default.createElement(u.default,b({as:t?"a":"span",href:t&&t,target:n,className:(0,l.cx)(_,H,s)},N.prop,j),i.default.createElement("span",{className:z},f),r)}},function(e,n){e.exports=o},function(e,n){e.exports=a},function(e,n){e.exports=u}])}));
		export { H1, H2, Subtitle, Body, InlineCode, Disclaimer, Overline, } from './Typography';
		export { Link } from './Link';
		//# sourceMappingURL=index.js.map

dist/Link.js

		@@ -79,3 +79,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) \|\| function (cooked, raw) {
		}
		return (React.createElement(Box, __assign({ as: href ? 'a' : 'span', href: href && href, target: target, className: cx(linkStyles, fontSize, className) }, anchorDataProp.prop, rest),
		var elementProps = href
		? { as: 'a', href: href, target: target }
		: { as: 'span' };
		return (React.createElement(Box, __assign({ className: cx(linkStyles, fontSize, className) }, elementProps, anchorDataProp.prop, rest),
		React.createElement("span", { className: underline }, children),
		@@ -82,0 +85,0 @@ icon));

dist/Typography.js

		@@ -32,2 +32,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) \|\| function (cooked, raw) {
		import { uiColors } from '@leafygreen-ui/palette';
		import { fontFamilies } from '@leafygreen-ui/tokens';
		import { typeScale1, typeScale2 } from './styles';
		@@ -57,3 +58,3 @@ var sharedStyles = css(templateObject_1 \|\| (templateObject_1 = __makeTemplateObject(["\n margin: unset;\n font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n color: ", ";\n"], ["\n margin: unset;\n font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n color: ", ";\n"])), uiColors.gray.dark2);
		}
		var code = css(templateObject_6 \|\| (templateObject_6 = __makeTemplateObject(["\n font-family: 'Source Code Pro', monospace;\n display: inline-block;\n"], ["\n font-family: 'Source Code Pro', monospace;\n display: inline-block;\n"])));
		var code = css(templateObject_6 \|\| (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n display: inline-block;\n"], ["\n font-family: ", ";\n display: inline-block;\n"])), fontFamilies.code);
		function InlineCode(_a) {
		@@ -60,0 +61,0 @@ var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);

package.json

		{
		"name": "@leafygreen-ui/typography",
		"version": "4.2.1",
		"version": "4.2.2",
		"description": "leafyGreen UI Kit Typography",
		"main": "./dist/index.js",
		"main": "./dist/index.bundle.js",
		"types": "./dist/index.d.ts",
		@@ -18,3 +18,4 @@ "scripts": {
		"@leafygreen-ui/box": "^2.1.3",
		"@leafygreen-ui/icon": "^6.3.2"
		"@leafygreen-ui/icon": "^6.3.2",
		"@leafygreen-ui/tokens": "^0.3.0"
		},
		@@ -21,0 +22,0 @@ "peerDependencies": {

README.md

		@@ -101,7 +101,7 @@ # Typography

		\| Prop \| Type \| Description \| Default \|
		\| ------------------ \| ------------------------------ \| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \| ------- \|
		\| `arrowAppearance` \| `'hover' \| 'persist' \| 'none'` \| Displays a right arrow adjacent to the anchor tag. When set to `persist` the arrow will always be present. When set to `hover`, the arrow will only appear when hovering over the arrow. \| `none` \|
		\| `hideExternalIcon` \| `boolean` \| Hides the external icon when the current host name is different from the host of the destination URL \| `false` \|
		\| Prop \| Type \| Description \| Default \|
		\| ------------------ \| --------- \| ---------------------------------------------------------------------------------------------------- \| ------- \|
		\| `arrowAppearance` \| `'hover' \| 'persist' \| 'none'` \| Displays a right arrow adjacent to the anchor tag. When set to `persist` the arrow will always be present. When set to `hover`, the arrow will only appear when hovering over the arrow. \| `none` \|
		\| `hideExternalIcon` \| `boolean` \| Hides the external icon when the current host name is different from the host of the destination URL \| `false` \|

		_Note:_ If the current host name is different from the host of the destination URL, we will provide the "\_blank" value for the `target` prop. When the target is set to open in a new tab, we render an icon as a visual affordance.

tsconfig.json

		@@ -24,4 +24,7 @@ {
		"path": "../box"
		},
		{
		"path": "../tokens"
		}
		]
		}

src/Typography.spec.tsx

dist/index.js.map