@purpurds/heading 3.0.0

package/dist/LICENSE.txt

@@ -0,0 +1,31 @@
+Name: classnames
+Version: 2.5.1
+License: MIT
+Private: false
+Description: A simple utility for conditionally joining classNames together
+Repository: git+https://github.com/JedWatson/classnames.git
+Author: Jed Watson
+License Copyright:
+===
+
+The MIT License (MIT)
+
+Copyright (c) 2018 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/heading.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime");function _(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var d={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(r){(function(){var a={}.hasOwnProperty;function n(){for(var t="",e=0;e<arguments.length;e++){var i=arguments[e];i&&(t=p(t,u(i)))}return t}function u(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return n.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var e="";for(var i in t)a.call(t,i)&&t[i]&&(e=p(e,i));return e}function p(t,e){return e?t?t+" "+e:t+e:t}r.exports?(n.default=n,r.exports=n):window.classNames=n})()})(d);var y=d.exports;const g=_(y),s={"purpur-heading":"_purpur-heading_2c2y0_1","purpur-heading--hyphens":"_purpur-heading--hyphens_2c2y0_8","purpur-heading--subsection-100":"_purpur-heading--subsection-100_2c2y0_11","purpur-heading--title-100":"_purpur-heading--title-100_2c2y0_17","purpur-heading--title-200":"_purpur-heading--title-200_2c2y0_23","purpur-heading--title-300":"_purpur-heading--title-300_2c2y0_29","purpur-heading--title-400":"_purpur-heading--title-400_2c2y0_35","purpur-heading--title-500":"_purpur-heading--title-500_2c2y0_41","purpur-heading--title-600":"_purpur-heading--title-600_2c2y0_47","purpur-heading--title-700":"_purpur-heading--title-700_2c2y0_53","purpur-heading--display-25":"_purpur-heading--display-25_2c2y0_59","purpur-heading--display-50":"_purpur-heading--display-50_2c2y0_65","purpur-heading--display-100":"_purpur-heading--display-100_2c2y0_71","purpur-heading--display-200":"_purpur-heading--display-200_2c2y0_77"},f={H1:"h1",H2:"h2",H3:"h3",H4:"h4",H5:"h5",H6:"h6"},c={TITLE100:"title-100",TITLE200:"title-200",TITLE300:"title-300",TITLE400:"title-400",TITLE500:"title-500",TITLE600:"title-600",TITLE700:"title-700",SUBSECTION100:"subsection-100"},T={DISPLAY25:"display-25",DISPLAY50:"display-50",DISPLAY100:"display-100",DISPLAY200:"display-200"},l="purpur-heading",I=({["data-testid"]:r,children:a,className:n="",enableHyphenation:u=!1,tag:p,variant:t=c.TITLE100,...e})=>{const i=p,o=g([n,s[l],s[`${l}--${t}`],{[s[`${l}--hyphens`]]:u}]);return h.jsx(i,{...e,className:o,"data-testid":r,children:a})};exports.DisplayVariant=T;exports.Heading=I;exports.HeadingTag=f;exports.TitleVariant=c;
+//# sourceMappingURL=heading.cjs.js.map

package/dist/heading.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/heading.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ComponentProps, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./heading.module.scss\";\n\nexport const HeadingTag = {\n  H1: \"h1\",\n  H2: \"h2\",\n  H3: \"h3\",\n  H4: \"h4\",\n  H5: \"h5\",\n  H6: \"h6\",\n} as const;\n\nexport type HeadingTagType = (typeof HeadingTag)[keyof typeof HeadingTag];\n\nexport const TitleVariant = {\n  TITLE100: \"title-100\",\n  TITLE200: \"title-200\",\n  TITLE300: \"title-300\",\n  TITLE400: \"title-400\",\n  TITLE500: \"title-500\",\n  TITLE600: \"title-600\",\n  TITLE700: \"title-700\",\n  SUBSECTION100: \"subsection-100\",\n} as const;\n\nexport type TitleVariantType = (typeof TitleVariant)[keyof typeof TitleVariant];\n\nexport const DisplayVariant = {\n  DISPLAY25: \"display-25\",\n  DISPLAY50: \"display-50\",\n  DISPLAY100: \"display-100\",\n  DISPLAY200: \"display-200\",\n} as const;\n\nexport type DisplayVariantType = (typeof DisplayVariant)[keyof typeof DisplayVariant];\n\nexport type HeadingProps = ComponentProps<HeadingTagType> & {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  enableHyphenation?: boolean;\n  tag: HeadingTagType;\n  variant?: TitleVariantType | DisplayVariantType;\n};\n\nconst rootClassName = \"purpur-heading\";\n\nexport const Heading = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className = \"\",\n  enableHyphenation = false,\n  tag,\n  variant = TitleVariant.TITLE100,\n  ...props\n}: HeadingProps) => {\n  const Tag = tag;\n  const classes = c([\n    className,\n    styles[rootClassName],\n    styles[`${rootClassName}--${variant}`],\n    {\n      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,\n    },\n  ]);\n\n  return (\n    <Tag {...props} className={classes} data-testid={dataTestid}>\n      {children}\n    </Tag>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","HeadingTag","TitleVariant","DisplayVariant","rootClassName","Heading","dataTestid","children","className","enableHyphenation","tag","variant","props","Tag","c","styles","jsx"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAWF,CAAG,CAAC,EAE/C,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAOA,EAGR,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAASK,CAAG,GAIpC,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,i8BCvEaU,EAAa,CACxB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAIaC,EAAe,CAC1B,SAAU,YACV,SAAU,YACV,SAAU,YACV,SAAU,YACV,SAAU,YACV,SAAU,YACV,SAAU,YACV,cAAe,gBACjB,EAIaC,EAAiB,CAC5B,UAAW,aACX,UAAW,aACX,WAAY,cACZ,WAAY,aACd,EAaMC,EAAgB,iBAETC,EAAU,CAAC,CACtB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EAAY,GACZ,kBAAAC,EAAoB,GACpB,IAAAC,EACA,QAAAC,EAAUT,EAAa,SACvB,GAAGU,CACL,IAAoB,CAClB,MAAMC,EAAMH,EACNlB,EAAUsB,EAAE,CAChBN,EACAO,EAAOX,CAAa,EACpBW,EAAO,GAAGX,CAAa,KAAKO,CAAO,EAAE,EACrC,CACE,CAACI,EAAO,GAAGX,CAAa,WAAW,CAAC,EAAGK,CACzC,CAAA,CACD,EAGC,OAAAO,MAACH,GAAK,GAAGD,EAAO,UAAWpB,EAAS,cAAac,EAC9C,SAAAC,CACH,CAAA,CAEJ","x_google_ignoreList":[0]}

package/dist/heading.d.ts

@@ -0,0 +1,38 @@
+import React, { ComponentProps, ReactNode } from "react";
+export declare const HeadingTag: {
+    readonly H1: "h1";
+    readonly H2: "h2";
+    readonly H3: "h3";
+    readonly H4: "h4";
+    readonly H5: "h5";
+    readonly H6: "h6";
+};
+export type HeadingTagType = (typeof HeadingTag)[keyof typeof HeadingTag];
+export declare const TitleVariant: {
+    readonly TITLE100: "title-100";
+    readonly TITLE200: "title-200";
+    readonly TITLE300: "title-300";
+    readonly TITLE400: "title-400";
+    readonly TITLE500: "title-500";
+    readonly TITLE600: "title-600";
+    readonly TITLE700: "title-700";
+    readonly SUBSECTION100: "subsection-100";
+};
+export type TitleVariantType = (typeof TitleVariant)[keyof typeof TitleVariant];
+export declare const DisplayVariant: {
+    readonly DISPLAY25: "display-25";
+    readonly DISPLAY50: "display-50";
+    readonly DISPLAY100: "display-100";
+    readonly DISPLAY200: "display-200";
+};
+export type DisplayVariantType = (typeof DisplayVariant)[keyof typeof DisplayVariant];
+export type HeadingProps = ComponentProps<HeadingTagType> & {
+    ["data-testid"]?: string;
+    children: ReactNode;
+    className?: string;
+    enableHyphenation?: boolean;
+    tag: HeadingTagType;
+    variant?: TitleVariantType | DisplayVariantType;
+};
+export declare const Heading: ({ ["data-testid"]: dataTestid, children, className, enableHyphenation, tag, variant, ...props }: HeadingProps) => React.JSX.Element;
+//# sourceMappingURL=heading.d.ts.map

package/dist/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../src/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzD,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAEhF,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,OAAO,cAAc,CAAC,CAAC;AAEtF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,CAAC;CACjD,CAAC;AAIF,eAAO,MAAM,OAAO,oGAQjB,YAAY,sBAgBd,CAAC"}

package/dist/heading.es.js

@@ -0,0 +1,103 @@
+import { jsx as c } from "react/jsx-runtime";
+function h(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var d = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(e) {
+  (function() {
+    var u = {}.hasOwnProperty;
+    function p() {
+      for (var t = "", r = 0; r < arguments.length; r++) {
+        var i = arguments[r];
+        i && (t = n(t, a(i)));
+      }
+      return t;
+    }
+    function a(t) {
+      if (typeof t == "string" || typeof t == "number")
+        return t;
+      if (typeof t != "object")
+        return "";
+      if (Array.isArray(t))
+        return p.apply(null, t);
+      if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
+        return t.toString();
+      var r = "";
+      for (var i in t)
+        u.call(t, i) && t[i] && (r = n(r, i));
+      return r;
+    }
+    function n(t, r) {
+      return r ? t ? t + " " + r : t + r : t;
+    }
+    e.exports ? (p.default = p, e.exports = p) : window.classNames = p;
+  })();
+})(d);
+var _ = d.exports;
+const y = /* @__PURE__ */ h(_), s = {
+  "purpur-heading": "_purpur-heading_2c2y0_1",
+  "purpur-heading--hyphens": "_purpur-heading--hyphens_2c2y0_8",
+  "purpur-heading--subsection-100": "_purpur-heading--subsection-100_2c2y0_11",
+  "purpur-heading--title-100": "_purpur-heading--title-100_2c2y0_17",
+  "purpur-heading--title-200": "_purpur-heading--title-200_2c2y0_23",
+  "purpur-heading--title-300": "_purpur-heading--title-300_2c2y0_29",
+  "purpur-heading--title-400": "_purpur-heading--title-400_2c2y0_35",
+  "purpur-heading--title-500": "_purpur-heading--title-500_2c2y0_41",
+  "purpur-heading--title-600": "_purpur-heading--title-600_2c2y0_47",
+  "purpur-heading--title-700": "_purpur-heading--title-700_2c2y0_53",
+  "purpur-heading--display-25": "_purpur-heading--display-25_2c2y0_59",
+  "purpur-heading--display-50": "_purpur-heading--display-50_2c2y0_65",
+  "purpur-heading--display-100": "_purpur-heading--display-100_2c2y0_71",
+  "purpur-heading--display-200": "_purpur-heading--display-200_2c2y0_77"
+}, T = {
+  H1: "h1",
+  H2: "h2",
+  H3: "h3",
+  H4: "h4",
+  H5: "h5",
+  H6: "h6"
+}, g = {
+  TITLE100: "title-100",
+  TITLE200: "title-200",
+  TITLE300: "title-300",
+  TITLE400: "title-400",
+  TITLE500: "title-500",
+  TITLE600: "title-600",
+  TITLE700: "title-700",
+  SUBSECTION100: "subsection-100"
+}, I = {
+  DISPLAY25: "display-25",
+  DISPLAY50: "display-50",
+  DISPLAY100: "display-100",
+  DISPLAY200: "display-200"
+}, l = "purpur-heading", L = ({
+  ["data-testid"]: e,
+  children: u,
+  className: p = "",
+  enableHyphenation: a = !1,
+  tag: n,
+  variant: t = g.TITLE100,
+  ...r
+}) => {
+  const i = n, o = y([
+    p,
+    s[l],
+    s[`${l}--${t}`],
+    {
+      [s[`${l}--hyphens`]]: a
+    }
+  ]);
+  return /* @__PURE__ */ c(i, { ...r, className: o, "data-testid": e, children: u });
+};
+export {
+  I as DisplayVariant,
+  L as Heading,
+  T as HeadingTag,
+  g as TitleVariant
+};
+//# sourceMappingURL=heading.es.js.map

package/dist/heading.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/heading.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ComponentProps, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./heading.module.scss\";\n\nexport const HeadingTag = {\n  H1: \"h1\",\n  H2: \"h2\",\n  H3: \"h3\",\n  H4: \"h4\",\n  H5: \"h5\",\n  H6: \"h6\",\n} as const;\n\nexport type HeadingTagType = (typeof HeadingTag)[keyof typeof HeadingTag];\n\nexport const TitleVariant = {\n  TITLE100: \"title-100\",\n  TITLE200: \"title-200\",\n  TITLE300: \"title-300\",\n  TITLE400: \"title-400\",\n  TITLE500: \"title-500\",\n  TITLE600: \"title-600\",\n  TITLE700: \"title-700\",\n  SUBSECTION100: \"subsection-100\",\n} as const;\n\nexport type TitleVariantType = (typeof TitleVariant)[keyof typeof TitleVariant];\n\nexport const DisplayVariant = {\n  DISPLAY25: \"display-25\",\n  DISPLAY50: \"display-50\",\n  DISPLAY100: \"display-100\",\n  DISPLAY200: \"display-200\",\n} as const;\n\nexport type DisplayVariantType = (typeof DisplayVariant)[keyof typeof DisplayVariant];\n\nexport type HeadingProps = ComponentProps<HeadingTagType> & {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  enableHyphenation?: boolean;\n  tag: HeadingTagType;\n  variant?: TitleVariantType | DisplayVariantType;\n};\n\nconst rootClassName = \"purpur-heading\";\n\nexport const Heading = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className = \"\",\n  enableHyphenation = false,\n  tag,\n  variant = TitleVariant.TITLE100,\n  ...props\n}: HeadingProps) => {\n  const Tag = tag;\n  const classes = c([\n    className,\n    styles[rootClassName],\n    styles[`${rootClassName}--${variant}`],\n    {\n      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,\n    },\n  ]);\n\n  return (\n    <Tag {...props} className={classes} data-testid={dataTestid}>\n      {children}\n    </Tag>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","HeadingTag","TitleVariant","DisplayVariant","rootClassName","Heading","dataTestid","children","className","enableHyphenation","tag","variant","props","Tag","c","styles","jsx"],"mappings":";;;;;;;;;;;AAOA,GAAC,WAAY;AAGZ,QAAIA,IAAS,CAAE,EAAC;AAEhB,aAASC,IAAc;AAGtB,eAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,YAAIC,IAAM,UAAUD,CAAC;AACrB,QAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAWF,CAAG,CAAC;AAAA,MAE/C;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAOA;AAGR,UAAI,OAAOA,KAAQ;AAClB,eAAO;AAGR,UAAI,MAAM,QAAQA,CAAG;AACpB,eAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,UAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,eAAOA,EAAI;AAGZ,UAAIF,IAAU;AAEd,eAASK,KAAOH;AACf,QAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAASK,CAAG;AAIpC,aAAOL;AAAA,IACP;AAED,aAASG,EAAaG,GAAOC,GAAU;AACtC,aAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,IAQR;AAED,IAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,EAAA,UAAiBT,KAOjB,OAAO,aAAaA;AAAA,EAEtB;;;;;;;;;;;;;;;;;;GCvEaU,IAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAIaC,IAAe;AAAA,EAC1B,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,eAAe;AACjB,GAIaC,IAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AACd,GAaMC,IAAgB,kBAETC,IAAU,CAAC;AAAA,EACtB,CAAC,gBAAgBC;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,mBAAAC,IAAoB;AAAA,EACpB,KAAAC;AAAA,EACA,SAAAC,IAAUT,EAAa;AAAA,EACvB,GAAGU;AACL,MAAoB;AAClB,QAAMC,IAAMH,GACNlB,IAAUsB,EAAE;AAAA,IAChBN;AAAA,IACAO,EAAOX,CAAa;AAAA,IACpBW,EAAO,GAAGX,CAAa,KAAKO,CAAO,EAAE;AAAA,IACrC;AAAA,MACE,CAACI,EAAO,GAAGX,CAAa,WAAW,CAAC,GAAGK;AAAA,IACzC;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAO,EAACH,KAAK,GAAGD,GAAO,WAAWpB,GAAS,eAAac,GAC9C,UAAAC,EACH,CAAA;AAEJ;","x_google_ignoreList":[0]}

package/dist/heading.system.js

@@ -0,0 +1,6 @@
+System.register(["react"],function(a,T){"use strict";var o;return{setters:[u=>{o=u.default}],execute:function(){function u(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var h={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(r){(function(){var d={}.hasOwnProperty;function n(){for(var t="",e=0;e<arguments.length;e++){var i=arguments[e];i&&(t=p(t,c(i)))}return t}function c(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return n.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var e="";for(var i in t)d.call(t,i)&&t[i]&&(e=p(e,i));return e}function p(t,e){return e?t?t+" "+e:t+e:t}r.exports?(n.default=n,r.exports=n):window.classNames=n})()})(h);var _=h.exports;const y=u(_),s={"purpur-heading":"_purpur-heading_2c2y0_1","purpur-heading--hyphens":"_purpur-heading--hyphens_2c2y0_8","purpur-heading--subsection-100":"_purpur-heading--subsection-100_2c2y0_11","purpur-heading--title-100":"_purpur-heading--title-100_2c2y0_17","purpur-heading--title-200":"_purpur-heading--title-200_2c2y0_23","purpur-heading--title-300":"_purpur-heading--title-300_2c2y0_29","purpur-heading--title-400":"_purpur-heading--title-400_2c2y0_35","purpur-heading--title-500":"_purpur-heading--title-500_2c2y0_41","purpur-heading--title-600":"_purpur-heading--title-600_2c2y0_47","purpur-heading--title-700":"_purpur-heading--title-700_2c2y0_53","purpur-heading--display-25":"_purpur-heading--display-25_2c2y0_59","purpur-heading--display-50":"_purpur-heading--display-50_2c2y0_65","purpur-heading--display-100":"_purpur-heading--display-100_2c2y0_71","purpur-heading--display-200":"_purpur-heading--display-200_2c2y0_77"},I=a("HeadingTag",{H1:"h1",H2:"h2",H3:"h3",H4:"h4",H5:"h5",H6:"h6"}),g=a("TitleVariant",{TITLE100:"title-100",TITLE200:"title-200",TITLE300:"title-300",TITLE400:"title-400",TITLE500:"title-500",TITLE600:"title-600",TITLE700:"title-700",SUBSECTION100:"subsection-100"}),m=a("DisplayVariant",{DISPLAY25:"display-25",DISPLAY50:"display-50",DISPLAY100:"display-100",DISPLAY200:"display-200"}),l="purpur-heading",E=a("Heading",({["data-testid"]:r,children:d,className:n="",enableHyphenation:c=!1,tag:p,variant:t=g.TITLE100,...e})=>{const i=p,f=y([n,s[l],s[`${l}--${t}`],{[s[`${l}--hyphens`]]:c}]);return o.createElement(i,{...e,className:f,"data-testid":r},d)})}}});
+//# sourceMappingURL=heading.system.js.map

package/dist/heading.system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.system.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/heading.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ComponentProps, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./heading.module.scss\";\n\nexport const HeadingTag = {\n  H1: \"h1\",\n  H2: \"h2\",\n  H3: \"h3\",\n  H4: \"h4\",\n  H5: \"h5\",\n  H6: \"h6\",\n} as const;\n\nexport type HeadingTagType = (typeof HeadingTag)[keyof typeof HeadingTag];\n\nexport const TitleVariant = {\n  TITLE100: \"title-100\",\n  TITLE200: \"title-200\",\n  TITLE300: \"title-300\",\n  TITLE400: \"title-400\",\n  TITLE500: \"title-500\",\n  TITLE600: \"title-600\",\n  TITLE700: \"title-700\",\n  SUBSECTION100: \"subsection-100\",\n} as const;\n\nexport type TitleVariantType = (typeof TitleVariant)[keyof typeof TitleVariant];\n\nexport const DisplayVariant = {\n  DISPLAY25: \"display-25\",\n  DISPLAY50: \"display-50\",\n  DISPLAY100: \"display-100\",\n  DISPLAY200: \"display-200\",\n} as const;\n\nexport type DisplayVariantType = (typeof DisplayVariant)[keyof typeof DisplayVariant];\n\nexport type HeadingProps = ComponentProps<HeadingTagType> & {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  enableHyphenation?: boolean;\n  tag: HeadingTagType;\n  variant?: TitleVariantType | DisplayVariantType;\n};\n\nconst rootClassName = \"purpur-heading\";\n\nexport const Heading = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className = \"\",\n  enableHyphenation = false,\n  tag,\n  variant = TitleVariant.TITLE100,\n  ...props\n}: HeadingProps) => {\n  const Tag = tag;\n  const classes = c([\n    className,\n    styles[rootClassName],\n    styles[`${rootClassName}--${variant}`],\n    {\n      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,\n    },\n  ]);\n\n  return (\n    <Tag {...props} className={classes} data-testid={dataTestid}>\n      {children}\n    </Tag>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","HeadingTag","exports","TitleVariant","DisplayVariant","rootClassName","Heading","dataTestid","children","className","enableHyphenation","tag","variant","props","Tag","c","styles","React"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAWF,CAAG,CAAC,EAE/C,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAOA,EAGR,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAASK,CAAG,GAIpC,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,i8BCvEaU,EAAaC,EAAA,aAAA,CACxB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,CAAA,EAIaC,EAAeD,EAAA,eAAA,CAC1B,SAAU,YACV,SAAU,YACV,SAAU,YACV,SAAU,YACV,SAAU,YACV,SAAU,YACV,SAAU,YACV,cAAe,gBACjB,CAAA,EAIaE,EAAiBF,EAAA,iBAAA,CAC5B,UAAW,aACX,UAAW,aACX,WAAY,cACZ,WAAY,aACd,CAAA,EAaMG,EAAgB,iBAETC,cAAU,CAAC,CACtB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EAAY,GACZ,kBAAAC,EAAoB,GACpB,IAAAC,EACA,QAAAC,EAAUT,EAAa,SACvB,GAAGU,CACL,IAAoB,CAClB,MAAMC,EAAMH,EACNnB,EAAUuB,EAAE,CAChBN,EACAO,EAAOX,CAAa,EACpBW,EAAO,GAAGX,CAAa,KAAKO,CAAO,EAAE,EACrC,CACE,CAACI,EAAO,GAAGX,CAAa,WAAW,CAAC,EAAGK,CACzC,CAAA,CACD,EAGC,OAAAO,EAAA,cAACH,GAAK,GAAGD,EAAO,UAAWrB,EAAS,cAAae,GAC9CC,CACH,CAEJ,CAAA","x_google_ignoreList":[0]}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-heading_2c2y0_1{color:var(--purpur-color-text-default);display:block;-webkit-hyphens:none;hyphens:none;margin:0;max-width:60ch}._purpur-heading--hyphens_2c2y0_8{-webkit-hyphens:auto;hyphens:auto}._purpur-heading--subsection-100_2c2y0_11{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-medium);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-default)}._purpur-heading--title-100_2c2y0_17{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-bold);font-size:clamp(var(--purpur-typography-scale-100),3vw,var(--purpur-typography-scale-200));line-height:var(--purpur-typography-line-height-default)}._purpur-heading--title-200_2c2y0_23{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-bold);font-size:clamp(var(--purpur-typography-scale-200),3vw,var(--purpur-typography-scale-400));line-height:var(--purpur-typography-line-height-default)}._purpur-heading--title-300_2c2y0_29{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-bold);font-size:clamp(var(--purpur-typography-scale-400),3vw,var(--purpur-typography-scale-600));line-height:var(--purpur-typography-line-height-default)}._purpur-heading--title-400_2c2y0_35{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-bold);font-size:clamp(var(--purpur-typography-scale-500),3vw,var(--purpur-typography-scale-700));line-height:var(--purpur-typography-line-height-default)}._purpur-heading--title-500_2c2y0_41{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-bold);font-size:clamp(var(--purpur-typography-scale-500),3vw,var(--purpur-typography-scale-800));line-height:var(--purpur-typography-line-height-tight)}._purpur-heading--title-600_2c2y0_47{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-bold);font-size:clamp(var(--purpur-typography-scale-650),3vw,var(--purpur-typography-scale-850));line-height:var(--purpur-typography-line-height-tight)}._purpur-heading--title-700_2c2y0_53{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-bold);font-size:clamp(var(--purpur-typography-scale-700),3vw,var(--purpur-typography-scale-900));line-height:var(--purpur-typography-line-height-tight)}._purpur-heading--display-25_2c2y0_59{font-family:var(--purpur-typography-family-display),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-medium);font-size:clamp(var(--purpur-typography-scale-600),3vw,var(--purpur-typography-scale-800));line-height:var(--purpur-typography-line-height-tight)}._purpur-heading--display-50_2c2y0_65{font-family:var(--purpur-typography-family-display),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-medium);font-size:clamp(var(--purpur-typography-scale-650),3vw,var(--purpur-typography-scale-850));line-height:var(--purpur-typography-line-height-tight)}._purpur-heading--display-100_2c2y0_71{font-family:var(--purpur-typography-family-display),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-medium);font-size:clamp(var(--purpur-typography-scale-700),3vw,var(--purpur-typography-scale-900));line-height:var(--purpur-typography-line-height-tight)}._purpur-heading--display-200_2c2y0_77{font-family:var(--purpur-typography-family-display),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-medium);font-size:clamp(var(--purpur-typography-scale-800),3vw,var(--purpur-typography-scale-1000));line-height:var(--purpur-typography-line-height-tight)}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@purpurds/heading",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/heading.cjs.js",
+  "types": "./dist/heading.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/heading.cjs.js",
+      "systemjs": "./dist/heading.system.js",
+      "types": "./dist/heading.d.ts",
+      "default": "./dist/heading.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/heading.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,59 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as HeadingStories from "./src/heading.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Heading" of={HeadingStories} />
+
+# Heading
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+>Note that the responsive behaviour of this component is more fluid than the specification in Figma,
+meaning that it adheres to the min and max sizes specified, but in viewports in-between in will be a
+ratio to the viewport with rather than a fixed size.
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/heading": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/heading/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Heading } from "@purpurds/heading";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <Heading {...someProps}>Some content</Heading>
+    </div>
+  );
+};
+```

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/heading.mixins.scss

@@ -0,0 +1,95 @@
+@mixin purpur-subsection-100() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-medium);
+  font-size: var(--purpur-typography-scale-100);
+  line-height: var(--purpur-typography-line-height-default);
+}
+
+@mixin purpur-title-100() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-bold);
+  font-size: clamp(var(--purpur-typography-scale-100), 3vw, var(--purpur-typography-scale-200));
+  line-height: var(--purpur-typography-line-height-default);
+}
+
+@mixin purpur-title-200() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-bold);
+  font-size: clamp(var(--purpur-typography-scale-200), 3vw, var(--purpur-typography-scale-400));
+  line-height: var(--purpur-typography-line-height-default);
+}
+
+@mixin purpur-title-300() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-bold);
+  font-size: clamp(var(--purpur-typography-scale-400), 3vw, var(--purpur-typography-scale-600));
+  line-height: var(--purpur-typography-line-height-default);
+}
+
+@mixin purpur-title-400() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-bold);
+  font-size: clamp(var(--purpur-typography-scale-500), 3vw, var(--purpur-typography-scale-700));
+  line-height: var(--purpur-typography-line-height-default);
+}
+
+@mixin purpur-title-500() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-bold);
+  font-size: clamp(var(--purpur-typography-scale-500), 3vw, var(--purpur-typography-scale-800));
+  line-height: var(--purpur-typography-line-height-tight);
+}
+
+@mixin purpur-title-600() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-bold);
+  font-size: clamp(var(--purpur-typography-scale-650), 3vw, var(--purpur-typography-scale-850));
+  line-height: var(--purpur-typography-line-height-tight);
+}
+
+@mixin purpur-title-700() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-bold);
+  font-size: clamp(var(--purpur-typography-scale-700), 3vw, var(--purpur-typography-scale-900));
+  line-height: var(--purpur-typography-line-height-tight);
+}
+
+@mixin purpur-display-25() {
+  font-family: var(--purpur-typography-family-display), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-medium);
+  font-size: clamp(var(--purpur-typography-scale-600), 3vw, var(--purpur-typography-scale-800));
+  line-height: var(--purpur-typography-line-height-tight);
+}
+
+@mixin purpur-display-50() {
+  font-family: var(--purpur-typography-family-display), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-medium);
+  font-size: clamp(var(--purpur-typography-scale-650), 3vw, var(--purpur-typography-scale-850));
+  line-height: var(--purpur-typography-line-height-tight);
+}
+
+@mixin purpur-display-100() {
+  font-family: var(--purpur-typography-family-display), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-medium);
+  font-size: clamp(var(--purpur-typography-scale-700), 3vw, var(--purpur-typography-scale-900));
+  line-height: var(--purpur-typography-line-height-tight);
+}
+
+@mixin purpur-display-200() {
+  font-family: var(--purpur-typography-family-display), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-medium);
+  font-size: clamp(var(--purpur-typography-scale-800), 3vw, var(--purpur-typography-scale-1000));
+  line-height: var(--purpur-typography-line-height-tight);
+}

package/src/heading.module.scss

@@ -0,0 +1,61 @@
+@import "./heading.mixins";
+
+.purpur-heading {
+  color: var(--purpur-color-text-default);
+  display: block;
+  hyphens: none;
+  margin: 0;
+  max-width: 60ch;
+
+  &--hyphens {
+    hyphens: auto;
+  }
+
+  &--subsection-100 {
+    @include purpur-subsection-100;
+  }
+
+  &--title-100 {
+    @include purpur-title-100;
+  }
+
+  &--title-200 {
+    @include purpur-title-200;
+  }
+
+  &--title-300 {
+    @include purpur-title-300;
+  }
+
+  &--title-400 {
+    @include purpur-title-400;
+  }
+
+  &--title-500 {
+    @include purpur-title-500;
+  }
+
+  &--title-600 {
+    @include purpur-title-600;
+  }
+
+  &--title-700 {
+    @include purpur-title-700;
+  }
+
+  &--display-25 {
+    @include purpur-display-25;
+  }
+
+  &--display-50 {
+    @include purpur-display-50;
+  }
+
+  &--display-100 {
+    @include purpur-display-100;
+  }
+
+  &--display-200 {
+    @include purpur-display-200;
+  }
+}

package/src/heading.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DisplayVariant, Heading, HeadingTag, TitleVariant } from "./heading";
+
+const meta: Meta<typeof Heading> = {
+  title: "Components/Heading",
+  component: Heading,
+  parameters: {
+    design: [
+      {
+        name: "Heading",
+        type: "figma",
+        url:
+          "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A1581&mode=design&t=JZyDcq4SLtP80IvN-1",
+      },
+    ],
+  },
+  argTypes: {
+    variant: {
+      options: [...Object.values(TitleVariant), ...Object.values(DisplayVariant)],
+      control: { type: "select" },
+    },
+    tag: {
+      options: Object.values(HeadingTag),
+      control: { type: "select" },
+    },
+    enableHyphenation: {
+      defaultValue: false,
+      control: { type: "boolean" },
+    },
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+    children: { control: { type: "text" } },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Heading>;
+
+export const Showcase: Story = {
+  args: {
+    variant: TitleVariant.TITLE100,
+    tag: HeadingTag.H1,
+    children: "The quick brown fox jumps over the lazy dog",
+  },
+};

package/src/heading.test.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Heading } from "./heading";
+
+expect.extend(matchers);
+
+describe("Heading", () => {
+  it("should accept children text content", () => {
+    render(
+      <Heading data-testid="first-paragraph" variant="title-100" tag="h2">
+        Some text content
+      </Heading>
+    );
+    expect(screen.getByTestId("first-paragraph")).toHaveTextContent("Some text content");
+  });
+  it("default variant value should be title-100", () => {
+    render(
+      <Heading data-testid="second-paragraph" tag="h2">
+        Some text content
+      </Heading>
+    );
+    expect(screen.getByTestId("second-paragraph")).toHaveClass("purpur-heading--title-100");
+  });
+});

package/src/heading.tsx

@@ -0,0 +1,74 @@
+import React, { ComponentProps, ReactNode } from "react";
+import c from "classnames";
+
+import styles from "./heading.module.scss";
+
+export const HeadingTag = {
+  H1: "h1",
+  H2: "h2",
+  H3: "h3",
+  H4: "h4",
+  H5: "h5",
+  H6: "h6",
+} as const;
+
+export type HeadingTagType = (typeof HeadingTag)[keyof typeof HeadingTag];
+
+export const TitleVariant = {
+  TITLE100: "title-100",
+  TITLE200: "title-200",
+  TITLE300: "title-300",
+  TITLE400: "title-400",
+  TITLE500: "title-500",
+  TITLE600: "title-600",
+  TITLE700: "title-700",
+  SUBSECTION100: "subsection-100",
+} as const;
+
+export type TitleVariantType = (typeof TitleVariant)[keyof typeof TitleVariant];
+
+export const DisplayVariant = {
+  DISPLAY25: "display-25",
+  DISPLAY50: "display-50",
+  DISPLAY100: "display-100",
+  DISPLAY200: "display-200",
+} as const;
+
+export type DisplayVariantType = (typeof DisplayVariant)[keyof typeof DisplayVariant];
+
+export type HeadingProps = ComponentProps<HeadingTagType> & {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  enableHyphenation?: boolean;
+  tag: HeadingTagType;
+  variant?: TitleVariantType | DisplayVariantType;
+};
+
+const rootClassName = "purpur-heading";
+
+export const Heading = ({
+  ["data-testid"]: dataTestid,
+  children,
+  className = "",
+  enableHyphenation = false,
+  tag,
+  variant = TitleVariant.TITLE100,
+  ...props
+}: HeadingProps) => {
+  const Tag = tag;
+  const classes = c([
+    className,
+    styles[rootClassName],
+    styles[`${rootClassName}--${variant}`],
+    {
+      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,
+    },
+  ]);
+
+  return (
+    <Tag {...props} className={classes} data-testid={dataTestid}>
+      {children}
+    </Tag>
+  );
+};