@leafygreen-ui/typography - npm Package Compare versions

Comparing version 20.1.0 to 20.1.1

CHANGELOG.md

 # @leafygreen-ui/typography
 
+## 20.1.1
+
+### Patch Changes
+
+- 4d932fe13: Change name of LiveExample to properly render on .design
+
 ## 20.1.0
@@ -4,0 +10,0 @@

package.json

 {
   "name": "@leafygreen-ui/typography",
-  "version": "20.1.0",
+  "version": "20.1.1",
   "description": "leafyGreen UI Kit Typography",
@@ -20,8 +20,8 @@ "main": "./dist/index.js",
   "dependencies": {
-    "@leafygreen-ui/icon": "^13.1.2",
     "@leafygreen-ui/emotion": "^4.0.9",
+    "@leafygreen-ui/palette": "^4.1.3",
     "@leafygreen-ui/lib": "^14.0.2",
-    "@leafygreen-ui/palette": "^4.1.3",
-    "@leafygreen-ui/tokens": "^2.11.3",
-    "@leafygreen-ui/polymorphic": "^2.0.5"
+    "@leafygreen-ui/icon": "^13.1.2",
+    "@leafygreen-ui/polymorphic": "^2.0.5",
+    "@leafygreen-ui/tokens": "^2.11.3"
   },
@@ -28,0 +28,0 @@ "peerDependencies": {

stories.js

@@ -1,1 +0,1 @@
-import e,{useState as n,useEffect as t,useMemo as r}from"react";import{storybookArgTypes as a}from"@lg-tools/storybook-utils";import{css as o,cx as i}from"@leafygreen-ui/emotion";import l from"@leafygreen-ui/icon";import s,{useBaseFontSize as c,useDarkMode as d}from"@leafygreen-ui/leafygreen-provider";import{palette as m}from"@leafygreen-ui/palette";import{Polymorphic as u,usePolymorphic as f,InferredPolymorphic as p,useInferredPolymorphic as h,hasAnchorProps as g,Polymorph as b}from"@leafygreen-ui/polymorphic";import{fontFamilies as y,color as x,typeScales as v,BaseFontSize as E,fontWeights as k,focusRing as N,transitionDuration as w,spacing as S}from"@leafygreen-ui/tokens";import{Theme as z,createUniqueClassName as F,getNodeTextContent as O}from"@leafygreen-ui/lib";import M from"@leafygreen-ui/icon/dist/ArrowLeft";import D from"@leafygreen-ui/icon/dist/ArrowRight";import j from"@leafygreen-ui/icon/dist/OpenNewTab";function B(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function C(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?B(Object(t),!0).forEach((function(n){L(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):B(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function A(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function H(e){return H="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},H(e)}function L(e,n,t){return(n=A(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function P(){return P=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},P.apply(this,arguments)}function I(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function T(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function W(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,o,i,l=[],s=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n);else for(;!(s=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(c)throw a}}return l}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return R(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return R(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 R(e,n){n>e.length&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var U,_,K,V,$,q,G,J,Q=o(U||(U=T(["\n  margin: unset;\n  font-family: ",";\n  color: ",";\n"])),y.default,x.light.text.primary.default),X=L(L({},E.Body1,o(_||(_=T(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),v.body1.fontSize,v.body1.lineHeight)),E.Body2,o(K||(K=T(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),v.body2.fontSize,v.body2.lineHeight)),Y=L(L({},E.Body1,o(V||(V=T(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),v.code1.fontSize,v.code1.lineHeight)),E.Body2,o($||($=T(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),v.code2.fontSize,v.code2.lineHeight)),Z=L(L({},z.Light,o(q||(q=T(["\n    color: ",";\n  "])),x.light.text.primary.default)),z.Dark,o(G||(G=T(["\n    color: ",";\n  "])),x.dark.text.primary.default)),ee=function(e){var n=c();return e?16===e?E.Body2:E.Body1:16===n?E.Body2:E.Body1},ne=["baseFontSize","darkMode","className","weight","as"],te=u((function(n){var t=n.baseFontSize,r=n.darkMode,a=n.className,l=n.weight,s=void 0===l?"regular":l,c=n.as,m=void 0===c?"p":c,u=I(n,ne),p=d(r).theme,h=ee(t),g=f(m).Component,b=o(J||(J=T(["\n      font-weight: ",";\n      strong,\n      b {\n        font-weight: ",";\n      }\n    "])),k[s],k.bold);return e.createElement(g,P({className:i(Q,X[h],Z[p],b,a)},u))}));te.displayName="Body";var re,ae,oe,ie,le,se,ce,de="lg-label",me="lg-description",ue=function(e){return o(re||(re=T(["\n    color: ",";\n\n    font-family: ",";\n    font-weight: ",";\n    margin-top: 0;\n    margin-bottom: 0;\n  "])),x[e].text.secondary.default,y.default,k.regular)},fe=function(e){return o(ae||(ae=T(["\n    color: ",";\n  "])),x[e].text.disabled.default)},pe=L(L({},E.Body1,o(oe||(oe=T(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),v.body1.fontSize,v.body1.lineHeight)),E.Body2,o(ie||(ie=T(["\n    font-size: ","px;\n    line-height: 20px; // Hardcoding because it does not match body2 lineHeight\n  "])),v.body2.fontSize)),he=["as","baseFontSize","children","className","darkMode","data-lgid","disabled"],ge=u((function(n){var t=n.as,r=n.baseFontSize,a=n.children,o=n.className,l=n.darkMode,s=n["data-lgid"],c=void 0===s?me:s,m=n.disabled,u=void 0!==m&&m,p=I(n,he),h=d(l).theme,g=ee(r),b=["string","number"].includes(H(a))?"p":"div",y=f(null!=t?t:b).Component;return e.createElement(y,P({"data-lgid":c,className:i(ue(h),pe[g],L({},fe(h),u),o)},p),a)}));ge.displayName="Description";var be,ye=L(L({},z.Light,o(le||(le=T(["\n    color: ",";\n  "])),x.light.text.secondary.default)),z.Dark,o(se||(se=T(["\n    color: ",";\n  "])),x.dark.text.secondary.default)),xe=o(ce||(ce=T(["\n  display: block;\n  font-size: 11px;\n  line-height: 16px;\n  letter-spacing: 0.2px;\n"]))),ve=["darkMode","children","className"];function Ee(n){var t=n.darkMode,r=n.children,a=n.className,o=I(n,ve),l=d(t).theme;return e.createElement("small",P({},o,{className:i(Q,xe,ye[l],a)}),r)}Ee.displayName="Disclaimer";var ke,Ne,we,Se,ze,Fe,Oe=function(e){var n=e.theme,t=e.baseFontSize,r=t===E.Body1?v.body1.fontSize:v.body2.fontSize,a=t===E.Body1?v.body1.lineHeight:20;return o(be||(be=T(["\n    font-family: ",";\n    font-weight: ",";\n    font-size: inherit;\n    line-height: inherit;\n\n    /* Unsets browser defaults */\n    margin-block-start: 0;\n    margin-block-end: 0;\n\n    /* Variable Styles */\n    color: ",";\n    font-size: ","px;\n    line-height: ","px;\n  "])),y.default,k.regular,x[n].text.error.default,r,a)},Me=["as","darkMode","children","className"],De=u((function(n){var t=n.as,r=void 0===t?"p":t,a=n.darkMode,o=n.children,l=n.className,s=I(n,Me),c=d(a).theme,m=ee(),u=f(r).Component;return e.createElement(u,P({},s,{className:i(Oe({theme:c,baseFontSize:m}),l)}),o)})),je=o(ke||(ke=T(["\n  font-weight: ",";\n  font-size: 48px;\n  line-height: 64px;\n  font-family: ",";\n"])),k.regular,y.serif),Be=L(L({},z.Light,o(Ne||(Ne=T(["\n    color: ",";\n  "])),m.green.dark2)),z.Dark,o(we||(we=T(["\n    color: ",";\n  "])),m.gray.light2)),Ce=["darkMode","className","as"],Ae=u((function(n){var t=n.darkMode,r=n.className,a=n.as,o=void 0===a?"h1":a,l=I(n,Ce),s=d(t).theme,c=f(o).Component;return e.createElement(c,P({className:i(Q,je,Be[s],r)},l))}));Ae.displayName="H1";var He,Le=o(Se||(Se=T(["\n  font-size: 32px;\n  line-height: 40px;\n  font-weight: ",";\n  font-family: ",";\n"])),k.regular,y.serif),Pe=L(L({},z.Light,o(ze||(ze=T(["\n    color: ",";\n  "])),m.green.dark2)),z.Dark,o(Fe||(Fe=T(["\n    color: ",";\n  "])),m.gray.light2)),Ie=["darkMode","className","as"],Te=u((function(n){var t=n.darkMode,r=n.className,a=n.as,o=void 0===a?"h2":a,l=I(n,Ie),s=d(t).theme,c=f(o).Component;return e.createElement(c,P({className:i(Q,Le,Pe[s],r)},l))}));Te.displayName="H2";var We,Re,Ue,_e,Ke,Ve,$e,qe,Ge,Je,Qe=o(He||(He=T(["\n  font-size: 24px;\n  line-height: 32px;\n  font-weight: ",";\n"])),k.medium),Xe=["darkMode","className","as"],Ye=u((function(n){var t=n.darkMode,r=n.className,a=n.as,o=void 0===a?"h3":a,l=I(n,Xe),s=d(t).theme,c=f(o).Component;return e.createElement(c,P({className:i(Q,Qe,Z[s],r)},l))}));Ye.displayName="H3";var Ze,en,nn,tn=F(),rn=o(We||(We=T(["\n  display: inline;\n  transition: all 0.15s ease-in-out;\n  border-radius: 3px;\n  font-family: ",";\n  line-height: 20px;\n\n  .",":hover > & {\n    text-decoration: none;\n  }\n"])),y.code,tn),an=L(L({},z.Light,o(Re||(Re=T(["\n    background-color: ",";\n    border: 1px solid ",";\n    color: ",";\n\n    .",":hover > & {\n      box-shadow: 0 0 0 3px ",";\n      border: 1px solid ",";\n    }\n  "])),x.light.background.secondary.default,x.light.border.secondary.default,m.gray.dark3,tn,m.gray.light2,m.gray.light1)),z.Dark,o(Ue||(Ue=T(["\n    background-color: ",";\n    border: 1px solid ",";\n    color: ",";\n\n    .",":hover > & {\n      box-shadow: 0 0 0 3px ",";\n      border: 1px solid ",";\n    }\n  "])),x.dark.background.secondary.default,m.gray.dark2,m.gray.light1,tn,m.gray.dark2,m.gray.dark1)),on=L(L({},z.Light,o(_e||(_e=T(["\n    .",":focus-visible > & {\n      box-shadow: ",";\n      border: 1px solid ",";\n    }\n  "])),tn,N[z.Light].default,m.blue.base)),z.Dark,o(Ke||(Ke=T(["\n    .",":focus-visible > & {\n      box-shadow: ",";\n      border: 1px solid ",";\n    }\n  "])),tn,N[z.Dark].default,m.blue.base)),ln=L(L({},z.Light,o(Ve||(Ve=T(["\n    color: ",";\n  "])),m.blue.base)),z.Dark,o($e||($e=T(["\n    color: ",";\n  "])),m.blue.light1)),sn=o(qe||(qe=T(["\n  text-decoration: none;\n  margin: 0;\n  padding: 0;\n  line-height: 20px;\n\n  &:focus {\n    outline: none;\n  }\n"]))),cn=o(Ge||(Ge=T(["\n  white-space: nowrap;\n"]))),dn=o(Je||(Je=T(["\n  white-space: normal;\n"]))),mn=["children","className","darkMode","baseFontSize","as"],un=p((function(n,t){var r,a,o=n.children,l=n.className,s=n.darkMode,c=n.baseFontSize,m=n.as,u=I(n,mn),f=d(s).theme,p=ee(c),g=h(m,u,"code").Component,b=(null!==(r="string"==typeof o&&(null===(a=o.match(/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g))||void 0===a?void 0:a.length))&&void 0!==r?r:0)<=30?cn:dn,y="code"!==g,x=e.createElement("code",{ref:t,className:i(Y[p],rn,an[f],on[f],b,L({},ln[f],y),l)},o);return y?e.createElement(g,P({className:i(tn,sn,l)},u),x):e.cloneElement(x,u)}));un.displayName="InlineCode";var fn,pn,hn,gn,bn=o(Ze||(Ze=T(["\n  font-family: ",";\n  border: 1px solid;\n  border-radius: 3px;\n  padding-left: 5px;\n  padding-right: 5px;\n"])),y.code),yn=L(L({},z.Light,o(en||(en=T(["\n    color: ",";\n    border-color: ",";\n    background-color: ",";\n  "])),x.light.text.primary.default,m.gray.dark3,m.white)),z.Dark,o(nn||(nn=T(["\n    color: ",";\n    border-color: ",";\n    background-color: ",";\n  "])),x.dark.text.primary.default,m.gray.base,m.gray.dark3)),xn=["baseFontSize","darkMode","children","className"];function vn(n){var t=n.baseFontSize,r=n.darkMode,a=n.children,o=n.className,l=I(n,xn),s=ee(t),c=d(r).theme;return e.createElement("code",P({className:i(bn,yn[c],Y[s],o)},l),a)}vn.displayName="InlineKeyCode";var En,kn,Nn,wn=function(e){return o(fn||(fn=T(["\n    color: ",";\n\n    font-family: ",";\n    font-weight: ",";\n  "])),x[e].text.primary.default,y.default,k.bold)},Sn=function(e){return o(pn||(pn=T(["\n    color: ",";\n  "])),x[e].text.disabled.default)},zn=L(L({},E.Body1,o(hn||(hn=T(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),v.body1.fontSize,v.body1.lineHeight)),E.Body2,o(gn||(gn=T(["\n    font-size: ","px;\n    line-height: 20px; // Hardcoding because it does not match body2 lineHeight\n  "])),v.body2.fontSize)),Fn=["baseFontSize","darkMode","className","children","disabled","as","data-lgid"],On=u((function(n){var t=n.baseFontSize,r=n.darkMode,a=n.className,o=n.children,l=n.disabled,s=void 0!==l&&l,c=n.as,m=void 0===c?"label":c,u=n["data-lgid"],p=void 0===u?de:u,h=I(n,Fn),g=d(r).theme,b=ee(t),y=f(m).Component;return e.createElement(y,P({"data-lgid":p,className:i(wn(g),zn[b],L({},Sn(g),s),a)},h),o)}));On.displayName="Label";var Mn,Dn,jn,Bn,Cn,An,Hn=F(),Ln=o(En||(En=T(["\n  font-family: ",";\n  display: inline;\n  align-items: center;\n  text-decoration: none;\n  text-decoration-color: transparent;\n  cursor: pointer;\n  font-size: inherit;\n  line-height: inherit;\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n\n  &:hover,\n  &[data-hover='true'],\n  &:focus-visible,\n  &[data-focus='true'] {\n    text-decoration: underline;\n    transition: text-decoration ","ms ease-in-out;\n    text-underline-offset: 4px;\n    text-decoration-thickness: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])),y.default,w.default),Pn=L(L({},z.Light,o(kn||(kn=T(["\n    color: ",";\n    font-weight: ",";\n\n    &:hover,\n    &[data-hover='true'] {\n      text-decoration-color: ",";\n    }\n\n    &:focus-visible,\n    &[data-focus='true'] {\n      text-decoration-color: ",";\n    }\n  "])),m.blue.base,k.regular,m.gray.light2,m.blue.base)),z.Dark,o(Nn||(Nn=T(["\n    color: ",";\n    font-weight: ",";\n\n    &:hover,\n    &[data-hover='true'] {\n      text-decoration-color: ",";\n    }\n\n    &:focus-visible,\n    &[data-focus='true'] {\n      text-decoration-color: ",";\n    }\n  "])),m.blue.light1,k.bold,m.gray.dark2,m.blue.base)),In=function(e){if(e)return X[e]},Tn=o(Mn||(Mn=T(["\n  gap: ","px;\n  display: inline-flex;\n"])),S[100]),Wn=["children","className","baseFontSize","darkMode","as"],Rn=p((function(n,t){var r=n.children,a=n.className,o=n.baseFontSize,l=n.darkMode,s=n.as,c=I(n,Wn),m=d(l).theme,u=ee(o),f=h(s,c,"span").Component;return e.createElement(f,P({className:i(Hn,Ln,In(u),Pn[m],Tn,a),ref:t},c),e.createElement(M,{role:"presentation"}),r)})),Un=o(Dn||(Dn=T(["\n  transform: translate3d(3px, 0, 0);\n  top: 1px;\n  position: relative;\n"]))),_n=o(jn||(jn=T(["\n  opacity: 0;\n  transform: translate3d(-3px, 0, 0);\n  transition: 100ms ease-in;\n  transition-property: opacity, transform;\n  top: 1px;\n  position: relative;\n\n  .",":hover &, .","[data-hover='true'] & {\n    opacity: 1;\n    transform: translate3d(3px, 0, 0);\n  }\n"])),Hn,Hn),Kn=o(Bn||(Bn=T(["\n  position: relative;\n  bottom: 2px;\n  left: -1px;\n  height: 12px;\n"]))),Vn="hover",$n="persist",qn="none",Gn=["children","className","arrowAppearance","hideExternalIcon","baseFontSize","darkMode","as"],Jn=p((function(a,o){var l=a.children,s=a.className,c=a.arrowAppearance,m=void 0===c?qn:c,u=a.hideExternalIcon,f=void 0!==u&&u,p=a.baseFontSize,b=a.darkMode,y=a.as,x=I(a,Gn),v=W(n(""),2),E=v[0],k=v[1];t((function(){k(window.location.hostname)}),[]);var N,w=d(b).theme,S=ee(p),z=h(y,x,"span"),F=z.Component,O=z.as,M=z.rest,B=r((function(){if(g(O,M)){return/^http(s)?:\/\//.test(M.href)?new URL(M.href).hostname:E}}),[O,M,E]),C={target:void 0,rel:void 0};return M.target||M.rel?(C.target=M.target,C.rel=M.rel):"a"===F&&(B===E?C.target="_self":(C.target="_blank",C.rel="noopener noreferrer")),"_blank"!==C.target||f?m!==qn&&(N=e.createElement(D,{role:"presentation",size:12,className:i(L(L({},_n,m===Vn),Un,m===$n))})):N=e.createElement(j,{role:"presentation",className:Kn}),e.createElement(F,P({className:i(Hn,Ln,In(S),Pn[w],s),ref:o},C,M),e.createElement("span",null,l),N)})),Qn=o(Cn||(Cn=T(["\n  font-size: 12px;\n  font-weight: ",";\n  text-transform: uppercase;\n  line-height: 20px;\n  letter-spacing: 0.4px;\n"])),k.bold),Xn=["darkMode","className","as"],Yn=u((function(n){var t=n.darkMode,r=n.className,a=n.as,o=void 0===a?"div":a,l=I(n,Xn),s=d(t).theme,c=f(o).Component;return e.createElement(c,P({className:i(Q,Qn,Z[s],r)},l))}));Yn.displayName="Overline";var Zn=o(An||(An=T(["\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: ",";\n"])),k.bold),et=["darkMode","className","as"],nt=u((function(n){var t=n.darkMode,r=n.className,a=n.as,o=void 0===a?"h6":a,l=I(n,et),s=d(t).theme,c=f(o).Component;return e.createElement(c,P({className:i(Q,Zn,Z[s],r)},l))}));nt.displayName="Subtitle";var tt,rt,at,ot,it,lt,st,ct,dt,mt,ut,ft,pt=["as","children","maxFontWeight","pseudoElement","className"],ht=function(e){var n=e.pseudoElement,t=e.maxFontWeight,r="&:".concat(n);return o(tt||(tt=T(["\n    /* Inherit relevant properties from the parent */\n    font-weight: inherit;\n    font-size: inherit;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n    text-decoration: none;\n    min-width: 0;\n    max-width: 100%;\n\n    "," {\n      content: attr(data-text);\n      height: 0;\n      font-weight: ",";\n      visibility: hidden;\n      overflow: hidden;\n      user-select: none;\n      pointer-events: none;\n    }\n  "])),r,t)},gt=o(rt||(rt=T(["\n  flex: 1;\n  min-width: 0;\n  max-width: 100%;\n\n  white-space: inherit;\n  overflow: inherit;\n  text-overflow: inherit;\n"])));function bt(n){var t=n.as,r=n.children,a=n.maxFontWeight,o=void 0===a?700:a,l=n.pseudoElement,s=void 0===l?"after":l,c=n.className,d=I(n,pt),m=O(r);return e.createElement(b,P({className:i(ht({pseudoElement:s,maxFontWeight:o}),c),as:null!=t?t:"span","data-text":m},d),e.createElement("span",{className:gt},r))}var yt=o(at||(at=T(["\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 10px;\n"]))),xt=o(ot||(ot=T(["\n  display: block;\n"]))),vt=o(it||(it=T(["\n  display: flex;\n  gap: 8px;\n"]))),Et=function(n){var t=n.baseFontSize,r=n.darkMode;return e.createElement(s,{baseFontSize:t,darkMode:r},e.createElement("div",{className:i(yt)},e.createElement(Ae,null,"Heading 1"),e.createElement(Te,null,"Heading 2"),e.createElement(Ye,null,"Heading 3"),e.createElement(nt,null,"Subtitle"),e.createElement(te,null,"Body"),e.createElement(te,null,e.createElement("strong",null,"Body (Semibold)")),e.createElement(te,null,e.createElement("em",null,"Body (Italic)")),e.createElement(te,null,e.createElement("strong",null,e.createElement("em",null,"Body (Semibold Italic)"))),e.createElement("div",{className:i(vt)},e.createElement(un,null,'"Inline Code"'),e.createElement(un,{href:"https://mongodb.github.io/leafygreen-ui/?path=/story/*"},'"Inline Code Link"')),e.createElement("div",null,e.createElement(Jn,{href:"http://localhost:9001",arrowAppearance:"hover"},"Local (Arrow on Hover)"),e.createElement("br",null),e.createElement(Jn,{href:"http://localhost:9001",arrowAppearance:"none"},"Local (No Arrow)"),e.createElement("br",null),e.createElement(Jn,{href:"?path=/story/button--icon-only",arrowAppearance:"persist"},"Internal (Persist Arrow)"),e.createElement("br",null),e.createElement(Jn,{href:"https://mongodb.github.io/leafygreen-ui/?path=/story/*"},"External"),e.createElement("br",null),e.createElement(Jn,{as:"button"},"As Button")),e.createElement("div",null,e.createElement(Rn,{href:"http://localhost:9001"},"BackLink")),e.createElement("div",{className:xt},e.createElement(vn,null,"CTRL"),e.createElement("code",null," + "),e.createElement(vn,null,"C")),e.createElement(Yn,{className:xt},"Overline ",e.createElement(Jn,null,"This is a test inline link.")),e.createElement(Ee,{className:xt},"Disclaimer ",e.createElement(Jn,null,"This is a test inline link.")),e.createElement(De,null,"Hello I am an Error!"),e.createElement("div",{className:i(xt)},e.createElement(On,{htmlFor:"id"},"This is a label"),e.createElement(ge,null,e.createElement("span",null,"This is the description for said label. "),e.createElement(Jn,null,"This is a test inline link.")))))},kt={title:"Components/Typography",component:Et,parameters:{default:"AllTypography",generate:{combineArgs:{darkMode:[!1,!0],baseFontSize:[14,16]}}}},Nt=Et.bind({});Nt.argTypes={baseFontSize:C(C({},a.baseFontSize),{},{description:"Storybook prop only. This font size is passed into the LeafygreenProvider."}),darkMode:a.darkMode},Nt.parameters={chromatic:{disableSnapshot:!0}};var wt=function(){var n=o(lt||(lt=T(["\n    font-weight: 400;\n    cursor: pointer;\n    outline: 1px solid ",";\n    outline-offset: -1px;\n\n    &:hover {\n      font-weight: 700;\n    }\n  "])),m.red.light2),t=o(st||(st=T(["\n    outline: 1px solid ",";\n    padding: 10px;\n    width: max-content;\n    max-width: 200px;\n  "])),m.blue.light1),r=o(ct||(ct=T(["\n    outline: 1px solid gray;\n    padding: 10px;\n    width: max-content;\n    max-width: 148px;\n    display: flex;\n    align-items: center;\n  "])));return e.createElement("div",{className:o(dt||(dt=T(["\n        position: absolute;\n        top: 0;\n        left: 0;\n        margin: 20px;\n      "])))},e.createElement("div",{className:o(mt||(mt=T(["\n          display: flex;\n        "])))},e.createElement("div",{className:t},e.createElement(bt,{className:n},"Some Tabs")),e.createElement("div",{className:t},e.createElement(bt,{className:i(n,o(ut||(ut=T(["\n                flex: 1;\n              "]))))},"Some long text that will be truncated eventually because its long")),e.createElement("div",{className:t},e.createElement(bt,{className:n},"Some more text"))),e.createElement("br",null),e.createElement("div",{className:i(n,r)},e.createElement(bt,null,"Some button"),e.createElement(l,{glyph:"CaretDown"})),e.createElement("br",null),e.createElement("div",{className:i(n,r)},e.createElement(bt,{className:i(o(ft||(ft=T(["\n              flex: 1;\n            "]))))},"Some long text button that should be truncated"),e.createElement(l,{glyph:"CaretDown"})))};wt.parameters={chromatic:{disableSnapshot:!0}};var St=function(){return e.createElement(e.Fragment,null)};export{Nt as AllTypography,St as Generated,wt as StaticWidthTextStory,kt as default};
+import e,{useState as n,useEffect as t,useMemo as r}from"react";import{css as a,cx as o}from"@leafygreen-ui/emotion";import l from"@leafygreen-ui/icon";import i,{useBaseFontSize as s,useDarkMode as c}from"@leafygreen-ui/leafygreen-provider";import{palette as d}from"@leafygreen-ui/palette";import{Polymorphic as m,usePolymorphic as u,InferredPolymorphic as f,useInferredPolymorphic as p,hasAnchorProps as h,Polymorph as g}from"@leafygreen-ui/polymorphic";import{fontFamilies as b,color as y,typeScales as x,BaseFontSize as v,fontWeights as E,focusRing as N,transitionDuration as k,spacing as w}from"@leafygreen-ui/tokens";import{Theme as S,createUniqueClassName as z,getNodeTextContent as F}from"@leafygreen-ui/lib";import M from"@leafygreen-ui/icon/dist/ArrowLeft";import D from"@leafygreen-ui/icon/dist/ArrowRight";import B from"@leafygreen-ui/icon/dist/OpenNewTab";function C(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function O(e){return O="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},O(e)}function j(e,n,t){return(n=C(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function A(){return A=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},A.apply(this,arguments)}function H(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function L(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function I(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,o,l,i=[],s=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n);else for(;!(s=(r=o.call(t)).done)&&(i.push(r.value),i.length!==n);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(c)throw a}}return i}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return T(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return T(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 T(e,n){n>e.length&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var P,W,R,U,_,K,V,$,q=a(P||(P=L(["\n  margin: unset;\n  font-family: ",";\n  color: ",";\n"])),b.default,y.light.text.primary.default),G=j(j({},v.Body1,a(W||(W=L(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),x.body1.fontSize,x.body1.lineHeight)),v.Body2,a(R||(R=L(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),x.body2.fontSize,x.body2.lineHeight)),J=j(j({},v.Body1,a(U||(U=L(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),x.code1.fontSize,x.code1.lineHeight)),v.Body2,a(_||(_=L(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),x.code2.fontSize,x.code2.lineHeight)),Q=j(j({},S.Light,a(K||(K=L(["\n    color: ",";\n  "])),y.light.text.primary.default)),S.Dark,a(V||(V=L(["\n    color: ",";\n  "])),y.dark.text.primary.default)),X=function(e){var n=s();return e?16===e?v.Body2:v.Body1:16===n?v.Body2:v.Body1},Y=["baseFontSize","darkMode","className","weight","as"],Z=m((function(n){var t=n.baseFontSize,r=n.darkMode,l=n.className,i=n.weight,s=void 0===i?"regular":i,d=n.as,m=void 0===d?"p":d,f=H(n,Y),p=c(r).theme,h=X(t),g=u(m).Component,b=a($||($=L(["\n      font-weight: ",";\n      strong,\n      b {\n        font-weight: ",";\n      }\n    "])),E[s],E.bold);return e.createElement(g,A({className:o(q,G[h],Q[p],b,l)},f))}));Z.displayName="Body";var ee,ne,te,re,ae,oe,le,ie="lg-label",se="lg-description",ce=function(e){return a(ee||(ee=L(["\n    color: ",";\n\n    font-family: ",";\n    font-weight: ",";\n    margin-top: 0;\n    margin-bottom: 0;\n  "])),y[e].text.secondary.default,b.default,E.regular)},de=function(e){return a(ne||(ne=L(["\n    color: ",";\n  "])),y[e].text.disabled.default)},me=j(j({},v.Body1,a(te||(te=L(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),x.body1.fontSize,x.body1.lineHeight)),v.Body2,a(re||(re=L(["\n    font-size: ","px;\n    line-height: 20px; // Hardcoding because it does not match body2 lineHeight\n  "])),x.body2.fontSize)),ue=["as","baseFontSize","children","className","darkMode","data-lgid","disabled"],fe=m((function(n){var t=n.as,r=n.baseFontSize,a=n.children,l=n.className,i=n.darkMode,s=n["data-lgid"],d=void 0===s?se:s,m=n.disabled,f=void 0!==m&&m,p=H(n,ue),h=c(i).theme,g=X(r),b=["string","number"].includes(O(a))?"p":"div",y=u(null!=t?t:b).Component;return e.createElement(y,A({"data-lgid":d,className:o(ce(h),me[g],j({},de(h),f),l)},p),a)}));fe.displayName="Description";var pe,he=j(j({},S.Light,a(ae||(ae=L(["\n    color: ",";\n  "])),y.light.text.secondary.default)),S.Dark,a(oe||(oe=L(["\n    color: ",";\n  "])),y.dark.text.secondary.default)),ge=a(le||(le=L(["\n  display: block;\n  font-size: 11px;\n  line-height: 16px;\n  letter-spacing: 0.2px;\n"]))),be=["darkMode","children","className"];function ye(n){var t=n.darkMode,r=n.children,a=n.className,l=H(n,be),i=c(t).theme;return e.createElement("small",A({},l,{className:o(q,ge,he[i],a)}),r)}ye.displayName="Disclaimer";var xe,ve,Ee,Ne,ke,we,Se=function(e){var n=e.theme,t=e.baseFontSize,r=t===v.Body1?x.body1.fontSize:x.body2.fontSize,o=t===v.Body1?x.body1.lineHeight:20;return a(pe||(pe=L(["\n    font-family: ",";\n    font-weight: ",";\n    font-size: inherit;\n    line-height: inherit;\n\n    /* Unsets browser defaults */\n    margin-block-start: 0;\n    margin-block-end: 0;\n\n    /* Variable Styles */\n    color: ",";\n    font-size: ","px;\n    line-height: ","px;\n  "])),b.default,E.regular,y[n].text.error.default,r,o)},ze=["as","darkMode","children","className"],Fe=m((function(n){var t=n.as,r=void 0===t?"p":t,a=n.darkMode,l=n.children,i=n.className,s=H(n,ze),d=c(a).theme,m=X(),f=u(r).Component;return e.createElement(f,A({},s,{className:o(Se({theme:d,baseFontSize:m}),i)}),l)})),Me=a(xe||(xe=L(["\n  font-weight: ",";\n  font-size: 48px;\n  line-height: 64px;\n  font-family: ",";\n"])),E.regular,b.serif),De=j(j({},S.Light,a(ve||(ve=L(["\n    color: ",";\n  "])),d.green.dark2)),S.Dark,a(Ee||(Ee=L(["\n    color: ",";\n  "])),d.gray.light2)),Be=["darkMode","className","as"],Ce=m((function(n){var t=n.darkMode,r=n.className,a=n.as,l=void 0===a?"h1":a,i=H(n,Be),s=c(t).theme,d=u(l).Component;return e.createElement(d,A({className:o(q,Me,De[s],r)},i))}));Ce.displayName="H1";var Oe,je=a(Ne||(Ne=L(["\n  font-size: 32px;\n  line-height: 40px;\n  font-weight: ",";\n  font-family: ",";\n"])),E.regular,b.serif),Ae=j(j({},S.Light,a(ke||(ke=L(["\n    color: ",";\n  "])),d.green.dark2)),S.Dark,a(we||(we=L(["\n    color: ",";\n  "])),d.gray.light2)),He=["darkMode","className","as"],Le=m((function(n){var t=n.darkMode,r=n.className,a=n.as,l=void 0===a?"h2":a,i=H(n,He),s=c(t).theme,d=u(l).Component;return e.createElement(d,A({className:o(q,je,Ae[s],r)},i))}));Le.displayName="H2";var Ie,Te,Pe,We,Re,Ue,_e,Ke,Ve,$e,qe=a(Oe||(Oe=L(["\n  font-size: 24px;\n  line-height: 32px;\n  font-weight: ",";\n"])),E.medium),Ge=["darkMode","className","as"],Je=m((function(n){var t=n.darkMode,r=n.className,a=n.as,l=void 0===a?"h3":a,i=H(n,Ge),s=c(t).theme,d=u(l).Component;return e.createElement(d,A({className:o(q,qe,Q[s],r)},i))}));Je.displayName="H3";var Qe,Xe,Ye,Ze=z(),en=a(Ie||(Ie=L(["\n  display: inline;\n  transition: all 0.15s ease-in-out;\n  border-radius: 3px;\n  font-family: ",";\n  line-height: 20px;\n\n  .",":hover > & {\n    text-decoration: none;\n  }\n"])),b.code,Ze),nn=j(j({},S.Light,a(Te||(Te=L(["\n    background-color: ",";\n    border: 1px solid ",";\n    color: ",";\n\n    .",":hover > & {\n      box-shadow: 0 0 0 3px ",";\n      border: 1px solid ",";\n    }\n  "])),y.light.background.secondary.default,y.light.border.secondary.default,d.gray.dark3,Ze,d.gray.light2,d.gray.light1)),S.Dark,a(Pe||(Pe=L(["\n    background-color: ",";\n    border: 1px solid ",";\n    color: ",";\n\n    .",":hover > & {\n      box-shadow: 0 0 0 3px ",";\n      border: 1px solid ",";\n    }\n  "])),y.dark.background.secondary.default,d.gray.dark2,d.gray.light1,Ze,d.gray.dark2,d.gray.dark1)),tn=j(j({},S.Light,a(We||(We=L(["\n    .",":focus-visible > & {\n      box-shadow: ",";\n      border: 1px solid ",";\n    }\n  "])),Ze,N[S.Light].default,d.blue.base)),S.Dark,a(Re||(Re=L(["\n    .",":focus-visible > & {\n      box-shadow: ",";\n      border: 1px solid ",";\n    }\n  "])),Ze,N[S.Dark].default,d.blue.base)),rn=j(j({},S.Light,a(Ue||(Ue=L(["\n    color: ",";\n  "])),d.blue.base)),S.Dark,a(_e||(_e=L(["\n    color: ",";\n  "])),d.blue.light1)),an=a(Ke||(Ke=L(["\n  text-decoration: none;\n  margin: 0;\n  padding: 0;\n  line-height: 20px;\n\n  &:focus {\n    outline: none;\n  }\n"]))),on=a(Ve||(Ve=L(["\n  white-space: nowrap;\n"]))),ln=a($e||($e=L(["\n  white-space: normal;\n"]))),sn=["children","className","darkMode","baseFontSize","as"],cn=f((function(n,t){var r,a,l=n.children,i=n.className,s=n.darkMode,d=n.baseFontSize,m=n.as,u=H(n,sn),f=c(s).theme,h=X(d),g=p(m,u,"code").Component,b=(null!==(r="string"==typeof l&&(null===(a=l.match(/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g))||void 0===a?void 0:a.length))&&void 0!==r?r:0)<=30?on:ln,y="code"!==g,x=e.createElement("code",{ref:t,className:o(J[h],en,nn[f],tn[f],b,j({},rn[f],y),i)},l);return y?e.createElement(g,A({className:o(Ze,an,i)},u),x):e.cloneElement(x,u)}));cn.displayName="InlineCode";var dn,mn,un,fn,pn=a(Qe||(Qe=L(["\n  font-family: ",";\n  border: 1px solid;\n  border-radius: 3px;\n  padding-left: 5px;\n  padding-right: 5px;\n"])),b.code),hn=j(j({},S.Light,a(Xe||(Xe=L(["\n    color: ",";\n    border-color: ",";\n    background-color: ",";\n  "])),y.light.text.primary.default,d.gray.dark3,d.white)),S.Dark,a(Ye||(Ye=L(["\n    color: ",";\n    border-color: ",";\n    background-color: ",";\n  "])),y.dark.text.primary.default,d.gray.base,d.gray.dark3)),gn=["baseFontSize","darkMode","children","className"];function bn(n){var t=n.baseFontSize,r=n.darkMode,a=n.children,l=n.className,i=H(n,gn),s=X(t),d=c(r).theme;return e.createElement("code",A({className:o(pn,hn[d],J[s],l)},i),a)}bn.displayName="InlineKeyCode";var yn,xn,vn,En=function(e){return a(dn||(dn=L(["\n    color: ",";\n\n    font-family: ",";\n    font-weight: ",";\n  "])),y[e].text.primary.default,b.default,E.bold)},Nn=function(e){return a(mn||(mn=L(["\n    color: ",";\n  "])),y[e].text.disabled.default)},kn=j(j({},v.Body1,a(un||(un=L(["\n    font-size: ","px;\n    line-height: ","px;\n  "])),x.body1.fontSize,x.body1.lineHeight)),v.Body2,a(fn||(fn=L(["\n    font-size: ","px;\n    line-height: 20px; // Hardcoding because it does not match body2 lineHeight\n  "])),x.body2.fontSize)),wn=["baseFontSize","darkMode","className","children","disabled","as","data-lgid"],Sn=m((function(n){var t=n.baseFontSize,r=n.darkMode,a=n.className,l=n.children,i=n.disabled,s=void 0!==i&&i,d=n.as,m=void 0===d?"label":d,f=n["data-lgid"],p=void 0===f?ie:f,h=H(n,wn),g=c(r).theme,b=X(t),y=u(m).Component;return e.createElement(y,A({"data-lgid":p,className:o(En(g),kn[b],j({},Nn(g),s),a)},h),l)}));Sn.displayName="Label";var zn,Fn,Mn,Dn,Bn,Cn,On=z(),jn=a(yn||(yn=L(["\n  font-family: ",";\n  display: inline;\n  align-items: center;\n  text-decoration: none;\n  text-decoration-color: transparent;\n  cursor: pointer;\n  font-size: inherit;\n  line-height: inherit;\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n\n  &:hover,\n  &[data-hover='true'],\n  &:focus-visible,\n  &[data-focus='true'] {\n    text-decoration: underline;\n    transition: text-decoration ","ms ease-in-out;\n    text-underline-offset: 4px;\n    text-decoration-thickness: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])),b.default,k.default),An=j(j({},S.Light,a(xn||(xn=L(["\n    color: ",";\n    font-weight: ",";\n\n    &:hover,\n    &[data-hover='true'] {\n      text-decoration-color: ",";\n    }\n\n    &:focus-visible,\n    &[data-focus='true'] {\n      text-decoration-color: ",";\n    }\n  "])),d.blue.base,E.regular,d.gray.light2,d.blue.base)),S.Dark,a(vn||(vn=L(["\n    color: ",";\n    font-weight: ",";\n\n    &:hover,\n    &[data-hover='true'] {\n      text-decoration-color: ",";\n    }\n\n    &:focus-visible,\n    &[data-focus='true'] {\n      text-decoration-color: ",";\n    }\n  "])),d.blue.light1,E.bold,d.gray.dark2,d.blue.base)),Hn=function(e){if(e)return G[e]},Ln=a(zn||(zn=L(["\n  gap: ","px;\n  display: inline-flex;\n"])),w[100]),In=["children","className","baseFontSize","darkMode","as"],Tn=f((function(n,t){var r=n.children,a=n.className,l=n.baseFontSize,i=n.darkMode,s=n.as,d=H(n,In),m=c(i).theme,u=X(l),f=p(s,d,"span").Component;return e.createElement(f,A({className:o(On,jn,Hn(u),An[m],Ln,a),ref:t},d),e.createElement(M,{role:"presentation"}),r)})),Pn=a(Fn||(Fn=L(["\n  transform: translate3d(3px, 0, 0);\n  top: 1px;\n  position: relative;\n"]))),Wn=a(Mn||(Mn=L(["\n  opacity: 0;\n  transform: translate3d(-3px, 0, 0);\n  transition: 100ms ease-in;\n  transition-property: opacity, transform;\n  top: 1px;\n  position: relative;\n\n  .",":hover &, .","[data-hover='true'] & {\n    opacity: 1;\n    transform: translate3d(3px, 0, 0);\n  }\n"])),On,On),Rn=a(Dn||(Dn=L(["\n  position: relative;\n  bottom: 2px;\n  left: -1px;\n  height: 12px;\n"]))),Un="hover",_n="persist",Kn="none",Vn=["children","className","arrowAppearance","hideExternalIcon","baseFontSize","darkMode","as"],$n=f((function(a,l){var i=a.children,s=a.className,d=a.arrowAppearance,m=void 0===d?Kn:d,u=a.hideExternalIcon,f=void 0!==u&&u,g=a.baseFontSize,b=a.darkMode,y=a.as,x=H(a,Vn),v=I(n(""),2),E=v[0],N=v[1];t((function(){N(window.location.hostname)}),[]);var k,w=c(b).theme,S=X(g),z=p(y,x,"span"),F=z.Component,M=z.as,C=z.rest,O=r((function(){if(h(M,C)){return/^http(s)?:\/\//.test(C.href)?new URL(C.href).hostname:E}}),[M,C,E]),L={target:void 0,rel:void 0};return C.target||C.rel?(L.target=C.target,L.rel=C.rel):"a"===F&&(O===E?L.target="_self":(L.target="_blank",L.rel="noopener noreferrer")),"_blank"!==L.target||f?m!==Kn&&(k=e.createElement(D,{role:"presentation",size:12,className:o(j(j({},Wn,m===Un),Pn,m===_n))})):k=e.createElement(B,{role:"presentation",className:Rn}),e.createElement(F,A({className:o(On,jn,Hn(S),An[w],s),ref:l},L,C),e.createElement("span",null,i),k)})),qn=a(Bn||(Bn=L(["\n  font-size: 12px;\n  font-weight: ",";\n  text-transform: uppercase;\n  line-height: 20px;\n  letter-spacing: 0.4px;\n"])),E.bold),Gn=["darkMode","className","as"],Jn=m((function(n){var t=n.darkMode,r=n.className,a=n.as,l=void 0===a?"div":a,i=H(n,Gn),s=c(t).theme,d=u(l).Component;return e.createElement(d,A({className:o(q,qn,Q[s],r)},i))}));Jn.displayName="Overline";var Qn=a(Cn||(Cn=L(["\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: ",";\n"])),E.bold),Xn=["darkMode","className","as"],Yn=m((function(n){var t=n.darkMode,r=n.className,a=n.as,l=void 0===a?"h6":a,i=H(n,Xn),s=c(t).theme,d=u(l).Component;return e.createElement(d,A({className:o(q,Qn,Q[s],r)},i))}));Yn.displayName="Subtitle";var Zn,et,nt,tt,rt,at,ot,lt,it,st,ct,dt,mt=["as","children","maxFontWeight","pseudoElement","className"],ut=function(e){var n=e.pseudoElement,t=e.maxFontWeight,r="&:".concat(n);return a(Zn||(Zn=L(["\n    /* Inherit relevant properties from the parent */\n    font-weight: inherit;\n    font-size: inherit;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n    text-decoration: none;\n    min-width: 0;\n    max-width: 100%;\n\n    "," {\n      content: attr(data-text);\n      height: 0;\n      font-weight: ",";\n      visibility: hidden;\n      overflow: hidden;\n      user-select: none;\n      pointer-events: none;\n    }\n  "])),r,t)},ft=a(et||(et=L(["\n  flex: 1;\n  min-width: 0;\n  max-width: 100%;\n\n  white-space: inherit;\n  overflow: inherit;\n  text-overflow: inherit;\n"])));function pt(n){var t=n.as,r=n.children,a=n.maxFontWeight,l=void 0===a?700:a,i=n.pseudoElement,s=void 0===i?"after":i,c=n.className,d=H(n,mt),m=F(r);return e.createElement(g,A({className:o(ut({pseudoElement:s,maxFontWeight:l}),c),as:null!=t?t:"span","data-text":m},d),e.createElement("span",{className:ft},r))}var ht=a(nt||(nt=L(["\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 10px;\n"]))),gt=a(tt||(tt=L(["\n  display: block;\n"]))),bt=a(rt||(rt=L(["\n  display: flex;\n  gap: 8px;\n"]))),yt=function(n){var t=n.baseFontSize,r=n.darkMode;return e.createElement(i,{baseFontSize:t,darkMode:r},e.createElement("div",{className:o(ht)},e.createElement(Ce,null,"Heading 1"),e.createElement(Le,null,"Heading 2"),e.createElement(Je,null,"Heading 3"),e.createElement(Yn,null,"Subtitle"),e.createElement(Z,null,"Body"),e.createElement(Z,null,e.createElement("strong",null,"Body (Semibold)")),e.createElement(Z,null,e.createElement("em",null,"Body (Italic)")),e.createElement(Z,null,e.createElement("strong",null,e.createElement("em",null,"Body (Semibold Italic)"))),e.createElement("div",{className:o(bt)},e.createElement(cn,null,'"Inline Code"'),e.createElement(cn,{href:"https://mongodb.github.io/leafygreen-ui/?path=/story/*"},'"Inline Code Link"')),e.createElement("div",null,e.createElement($n,{href:"http://localhost:9001",arrowAppearance:"hover"},"Local (Arrow on Hover)"),e.createElement("br",null),e.createElement($n,{href:"http://localhost:9001",arrowAppearance:"none"},"Local (No Arrow)"),e.createElement("br",null),e.createElement($n,{href:"?path=/story/button--icon-only",arrowAppearance:"persist"},"Internal (Persist Arrow)"),e.createElement("br",null),e.createElement($n,{href:"https://mongodb.github.io/leafygreen-ui/?path=/story/*"},"External"),e.createElement("br",null),e.createElement($n,{as:"button"},"As Button")),e.createElement("div",null,e.createElement(Tn,{href:"http://localhost:9001"},"BackLink")),e.createElement("div",{className:gt},e.createElement(bn,null,"CTRL"),e.createElement("code",null," + "),e.createElement(bn,null,"C")),e.createElement(Jn,{className:gt},"Overline ",e.createElement($n,null,"This is a test inline link.")),e.createElement(ye,{className:gt},"Disclaimer ",e.createElement($n,null,"This is a test inline link.")),e.createElement(Fe,null,"Hello I am an Error!"),e.createElement("div",{className:o(gt)},e.createElement(Sn,{htmlFor:"id"},"This is a label"),e.createElement(fe,null,e.createElement("span",null,"This is the description for said label. "),e.createElement($n,null,"This is a test inline link.")))))};yt.parameters={chromatic:{disableSnapshot:!0}};var xt={title:"Components/Typography",component:yt,parameters:{default:"LiveExample",generate:{combineArgs:{darkMode:[!1,!0],baseFontSize:[14,16]}}}},vt=function(){var n=a(at||(at=L(["\n    font-weight: 400;\n    cursor: pointer;\n    outline: 1px solid ",";\n    outline-offset: -1px;\n\n    &:hover {\n      font-weight: 700;\n    }\n  "])),d.red.light2),t=a(ot||(ot=L(["\n    outline: 1px solid ",";\n    padding: 10px;\n    width: max-content;\n    max-width: 200px;\n  "])),d.blue.light1),r=a(lt||(lt=L(["\n    outline: 1px solid gray;\n    padding: 10px;\n    width: max-content;\n    max-width: 148px;\n    display: flex;\n    align-items: center;\n  "])));return e.createElement("div",{className:a(it||(it=L(["\n        position: absolute;\n        top: 0;\n        left: 0;\n        margin: 20px;\n      "])))},e.createElement("div",{className:a(st||(st=L(["\n          display: flex;\n        "])))},e.createElement("div",{className:t},e.createElement(pt,{className:n},"Some Tabs")),e.createElement("div",{className:t},e.createElement(pt,{className:o(n,a(ct||(ct=L(["\n                flex: 1;\n              "]))))},"Some long text that will be truncated eventually because its long")),e.createElement("div",{className:t},e.createElement(pt,{className:n},"Some more text"))),e.createElement("br",null),e.createElement("div",{className:o(n,r)},e.createElement(pt,null,"Some button"),e.createElement(l,{glyph:"CaretDown"})),e.createElement("br",null),e.createElement("div",{className:o(n,r)},e.createElement(pt,{className:o(a(dt||(dt=L(["\n              flex: 1;\n            "]))))},"Some long text button that should be truncated"),e.createElement(l,{glyph:"CaretDown"})))};vt.parameters={chromatic:{disableSnapshot:!0}};var Et=function(){return e.createElement(e.Fragment,null)};export{Et as Generated,yt as LiveExample,vt as StaticWidthTextStory,xt as default};

No alert changes

Worsened metrics

Total package byte prevSize

514041

decreased by-0.22%

Lines of code

10635

decreased by-0.16%

No dependency changes