@purpurds/paragraph 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/paragraph.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime");function _(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var o={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(p){(function(){var s={}.hasOwnProperty;function u(){for(var r="",a=0;a<arguments.length;a++){var e=arguments[a];e&&(r=t(r,i(e)))}return r}function i(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return u.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var a="";for(var e in r)s.call(r,e)&&r[e]&&(a=t(a,e));return a}function t(r,a){return a?r?r+" "+a:r+a:r}p.exports?(u.default=u,p.exports=u):window.classNames=u})()})(o);var d=o.exports;const c=_(d),n={"purpur-paragraph":"_purpur-paragraph_hwaj6_1","purpur-paragraph--disabled":"_purpur-paragraph--disabled_hwaj6_7","purpur-paragraph--hyphens":"_purpur-paragraph--hyphens_hwaj6_10","purpur-paragraph--paragraph-100":"_purpur-paragraph--paragraph-100_hwaj6_13","purpur-paragraph--paragraph-100-medium":"_purpur-paragraph--paragraph-100-medium_hwaj6_19","purpur-paragraph--paragraph-100-bold":"_purpur-paragraph--paragraph-100-bold_hwaj6_26","purpur-paragraph--paragraph-200":"_purpur-paragraph--paragraph-200_hwaj6_33","purpur-paragraph--preamble-100":"_purpur-paragraph--preamble-100_hwaj6_39","purpur-paragraph--preamble-200":"_purpur-paragraph--preamble-200_hwaj6_45","purpur-paragraph--additional-100":"_purpur-paragraph--additional-100_hwaj6_51","purpur-paragraph--additional-100-medium":"_purpur-paragraph--additional-100-medium_hwaj6_57","purpur-paragraph--overline-100":"_purpur-paragraph--overline-100_hwaj6_64","purpur-paragraph--overline-200":"_purpur-paragraph--overline-200_hwaj6_71"},l={PARAGRAPH100:"paragraph-100",PARAGRAPH100MEDIUM:"paragraph-100-medium",PARAGRAPH100BOLD:"paragraph-100-bold",PARAGRAPH200:"paragraph-200",PREAMBLE100:"preamble-100",PREAMBLE200:"preamble-200",ADDITIONAL100:"additional-100",ADDITIONAL100MEDIUM:"additional-100-medium",OVERLINE100:"overline-100",OVERLINE200:"overline-200"},h="purpur-paragraph",m=({["data-testid"]:p,children:s,className:u="",disabled:i,enableHyphenation:t=!1,variant:r=l.PARAGRAPH100,...a})=>{const e=c([u,n[h],n[`${h}--${r}`],{[n[`${h}--hyphens`]]:t,[n[`${h}--disabled`]]:i}]);return g.jsx("p",{...a,className:e,"data-testid":p,children:s})};exports.Paragraph=m;exports.ParagraphVariant=l;
+//# sourceMappingURL=paragraph.cjs.js.map

package/dist/paragraph.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/paragraph.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, { ParamHTMLAttributes, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./paragraph.module.scss\";\n\nexport const ParagraphVariant = {\n  PARAGRAPH100: \"paragraph-100\",\n  PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n  PARAGRAPH100BOLD: \"paragraph-100-bold\",\n  PARAGRAPH200: \"paragraph-200\",\n  PREAMBLE100: \"preamble-100\",\n  PREAMBLE200: \"preamble-200\",\n  ADDITIONAL100: \"additional-100\",\n  ADDITIONAL100MEDIUM: \"additional-100-medium\",\n  OVERLINE100: \"overline-100\",\n  OVERLINE200: \"overline-200\",\n} as const;\n\nexport type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];\n\nexport type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  enableHyphenation?: boolean;\n  disabled?: boolean;\n  variant?: ParagraphVariant;\n};\n\nconst rootClassName = \"purpur-paragraph\";\n\nexport const Paragraph = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className = \"\",\n  disabled,\n  enableHyphenation = false,\n  variant = ParagraphVariant.PARAGRAPH100,\n  ...props\n}: ParagraphProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    styles[`${rootClassName}--${variant}`],\n    {\n      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,\n      [styles[`${rootClassName}--disabled`]]: disabled,\n    },\n  ]);\n\n  return (\n    <p {...props} className={classes} data-testid={dataTestid}>\n      {children}\n    </p>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","ParagraphVariant","rootClassName","Paragraph","dataTestid","children","className","disabled","enableHyphenation","variant","props","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,6gCCvEaU,EAAmB,CAC9B,aAAc,gBACd,mBAAoB,uBACpB,iBAAkB,qBAClB,aAAc,gBACd,YAAa,eACb,YAAa,eACb,cAAe,iBACf,oBAAqB,wBACrB,YAAa,eACb,YAAa,cACf,EAaMC,EAAgB,mBAETC,EAAY,CAAC,CACxB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EACA,kBAAAC,EAAoB,GACpB,QAAAC,EAAUR,EAAiB,aAC3B,GAAGS,CACL,IAAsB,CACpB,MAAMlB,EAAU,EAAE,CAChBc,EACAK,EAAOT,CAAa,EACpBS,EAAO,GAAGT,CAAa,KAAKO,CAAO,EAAE,EACrC,CACE,CAACE,EAAO,GAAGT,CAAa,WAAW,CAAC,EAAGM,EACvC,CAACG,EAAO,GAAGT,CAAa,YAAY,CAAC,EAAGK,CAC1C,CAAA,CACD,EAGC,OAAAK,MAAC,KAAG,GAAGF,EAAO,UAAWlB,EAAS,cAAaY,EAC5C,SAAAC,CACH,CAAA,CAEJ","x_google_ignoreList":[0]}

package/dist/paragraph.d.ts

@@ -0,0 +1,24 @@
+import React, { ParamHTMLAttributes, ReactNode } from "react";
+export declare const ParagraphVariant: {
+    readonly PARAGRAPH100: "paragraph-100";
+    readonly PARAGRAPH100MEDIUM: "paragraph-100-medium";
+    readonly PARAGRAPH100BOLD: "paragraph-100-bold";
+    readonly PARAGRAPH200: "paragraph-200";
+    readonly PREAMBLE100: "preamble-100";
+    readonly PREAMBLE200: "preamble-200";
+    readonly ADDITIONAL100: "additional-100";
+    readonly ADDITIONAL100MEDIUM: "additional-100-medium";
+    readonly OVERLINE100: "overline-100";
+    readonly OVERLINE200: "overline-200";
+};
+export type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];
+export type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {
+    ["data-testid"]?: string;
+    children: ReactNode;
+    className?: string;
+    enableHyphenation?: boolean;
+    disabled?: boolean;
+    variant?: ParagraphVariant;
+};
+export declare const Paragraph: ({ ["data-testid"]: dataTestid, children, className, disabled, enableHyphenation, variant, ...props }: ParagraphProps) => React.JSX.Element;
+//# sourceMappingURL=paragraph.d.ts.map

package/dist/paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../src/paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAWnB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAExF,MAAM,MAAM,cAAc,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,GAAG;IACvE,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAIF,eAAO,MAAM,SAAS,yGAQnB,cAAc,sBAgBhB,CAAC"}

package/dist/paragraph.es.js

@@ -0,0 +1,91 @@
+import { jsx as l } from "react/jsx-runtime";
+function _(p) {
+  return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
+}
+var i = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(p) {
+  (function() {
+    var o = {}.hasOwnProperty;
+    function u() {
+      for (var r = "", a = 0; a < arguments.length; a++) {
+        var e = arguments[a];
+        e && (r = t(r, s(e)));
+      }
+      return r;
+    }
+    function s(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return u.apply(null, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var a = "";
+      for (var e in r)
+        o.call(r, e) && r[e] && (a = t(a, e));
+      return a;
+    }
+    function t(r, a) {
+      return a ? r ? r + " " + a : r + a : r;
+    }
+    p.exports ? (u.default = u, p.exports = u) : window.classNames = u;
+  })();
+})(i);
+var g = i.exports;
+const d = /* @__PURE__ */ _(g), h = {
+  "purpur-paragraph": "_purpur-paragraph_hwaj6_1",
+  "purpur-paragraph--disabled": "_purpur-paragraph--disabled_hwaj6_7",
+  "purpur-paragraph--hyphens": "_purpur-paragraph--hyphens_hwaj6_10",
+  "purpur-paragraph--paragraph-100": "_purpur-paragraph--paragraph-100_hwaj6_13",
+  "purpur-paragraph--paragraph-100-medium": "_purpur-paragraph--paragraph-100-medium_hwaj6_19",
+  "purpur-paragraph--paragraph-100-bold": "_purpur-paragraph--paragraph-100-bold_hwaj6_26",
+  "purpur-paragraph--paragraph-200": "_purpur-paragraph--paragraph-200_hwaj6_33",
+  "purpur-paragraph--preamble-100": "_purpur-paragraph--preamble-100_hwaj6_39",
+  "purpur-paragraph--preamble-200": "_purpur-paragraph--preamble-200_hwaj6_45",
+  "purpur-paragraph--additional-100": "_purpur-paragraph--additional-100_hwaj6_51",
+  "purpur-paragraph--additional-100-medium": "_purpur-paragraph--additional-100-medium_hwaj6_57",
+  "purpur-paragraph--overline-100": "_purpur-paragraph--overline-100_hwaj6_64",
+  "purpur-paragraph--overline-200": "_purpur-paragraph--overline-200_hwaj6_71"
+}, m = {
+  PARAGRAPH100: "paragraph-100",
+  PARAGRAPH100MEDIUM: "paragraph-100-medium",
+  PARAGRAPH100BOLD: "paragraph-100-bold",
+  PARAGRAPH200: "paragraph-200",
+  PREAMBLE100: "preamble-100",
+  PREAMBLE200: "preamble-200",
+  ADDITIONAL100: "additional-100",
+  ADDITIONAL100MEDIUM: "additional-100-medium",
+  OVERLINE100: "overline-100",
+  OVERLINE200: "overline-200"
+}, n = "purpur-paragraph", f = ({
+  ["data-testid"]: p,
+  children: o,
+  className: u = "",
+  disabled: s,
+  enableHyphenation: t = !1,
+  variant: r = m.PARAGRAPH100,
+  ...a
+}) => {
+  const e = d([
+    u,
+    h[n],
+    h[`${n}--${r}`],
+    {
+      [h[`${n}--hyphens`]]: t,
+      [h[`${n}--disabled`]]: s
+    }
+  ]);
+  return /* @__PURE__ */ l("p", { ...a, className: e, "data-testid": p, children: o });
+};
+export {
+  f as Paragraph,
+  m as ParagraphVariant
+};
+//# sourceMappingURL=paragraph.es.js.map

package/dist/paragraph.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/paragraph.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, { ParamHTMLAttributes, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./paragraph.module.scss\";\n\nexport const ParagraphVariant = {\n  PARAGRAPH100: \"paragraph-100\",\n  PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n  PARAGRAPH100BOLD: \"paragraph-100-bold\",\n  PARAGRAPH200: \"paragraph-200\",\n  PREAMBLE100: \"preamble-100\",\n  PREAMBLE200: \"preamble-200\",\n  ADDITIONAL100: \"additional-100\",\n  ADDITIONAL100MEDIUM: \"additional-100-medium\",\n  OVERLINE100: \"overline-100\",\n  OVERLINE200: \"overline-200\",\n} as const;\n\nexport type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];\n\nexport type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  enableHyphenation?: boolean;\n  disabled?: boolean;\n  variant?: ParagraphVariant;\n};\n\nconst rootClassName = \"purpur-paragraph\";\n\nexport const Paragraph = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className = \"\",\n  disabled,\n  enableHyphenation = false,\n  variant = ParagraphVariant.PARAGRAPH100,\n  ...props\n}: ParagraphProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    styles[`${rootClassName}--${variant}`],\n    {\n      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,\n      [styles[`${rootClassName}--disabled`]]: disabled,\n    },\n  ]);\n\n  return (\n    <p {...props} className={classes} data-testid={dataTestid}>\n      {children}\n    </p>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","ParagraphVariant","rootClassName","Paragraph","dataTestid","children","className","disabled","enableHyphenation","variant","props","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,IAAmB;AAAA,EAC9B,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,aAAa;AACf,GAaMC,IAAgB,oBAETC,IAAY,CAAC;AAAA,EACxB,CAAC,gBAAgBC;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,SAAAC,IAAUR,EAAiB;AAAA,EAC3B,GAAGS;AACL,MAAsB;AACpB,QAAMlB,IAAUmB,EAAE;AAAA,IAChBL;AAAA,IACAM,EAAOV,CAAa;AAAA,IACpBU,EAAO,GAAGV,CAAa,KAAKO,CAAO,EAAE;AAAA,IACrC;AAAA,MACE,CAACG,EAAO,GAAGV,CAAa,WAAW,CAAC,GAAGM;AAAA,MACvC,CAACI,EAAO,GAAGV,CAAa,YAAY,CAAC,GAAGK;AAAA,IAC1C;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAM,EAAC,OAAG,GAAGH,GAAO,WAAWlB,GAAS,eAAaY,GAC5C,UAAAC,EACH,CAAA;AAEJ;","x_google_ignoreList":[0]}

package/dist/paragraph.system.js

@@ -0,0 +1,6 @@
+System.register(["react"],function(l,f){"use strict";var g;return{setters:[s=>{g=s.default}],execute:function(){function s(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var _={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(p){(function(){var i={}.hasOwnProperty;function t(){for(var r="",a=0;a<arguments.length;a++){var e=arguments[a];e&&(r=h(r,o(e)))}return r}function o(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var a="";for(var e in r)i.call(r,e)&&r[e]&&(a=h(a,e));return a}function h(r,a){return a?r?r+" "+a:r+a:r}p.exports?(t.default=t,p.exports=t):window.classNames=t})()})(_);var d=_.exports;const c=s(d),u={"purpur-paragraph":"_purpur-paragraph_hwaj6_1","purpur-paragraph--disabled":"_purpur-paragraph--disabled_hwaj6_7","purpur-paragraph--hyphens":"_purpur-paragraph--hyphens_hwaj6_10","purpur-paragraph--paragraph-100":"_purpur-paragraph--paragraph-100_hwaj6_13","purpur-paragraph--paragraph-100-medium":"_purpur-paragraph--paragraph-100-medium_hwaj6_19","purpur-paragraph--paragraph-100-bold":"_purpur-paragraph--paragraph-100-bold_hwaj6_26","purpur-paragraph--paragraph-200":"_purpur-paragraph--paragraph-200_hwaj6_33","purpur-paragraph--preamble-100":"_purpur-paragraph--preamble-100_hwaj6_39","purpur-paragraph--preamble-200":"_purpur-paragraph--preamble-200_hwaj6_45","purpur-paragraph--additional-100":"_purpur-paragraph--additional-100_hwaj6_51","purpur-paragraph--additional-100-medium":"_purpur-paragraph--additional-100-medium_hwaj6_57","purpur-paragraph--overline-100":"_purpur-paragraph--overline-100_hwaj6_64","purpur-paragraph--overline-200":"_purpur-paragraph--overline-200_hwaj6_71"},m=l("ParagraphVariant",{PARAGRAPH100:"paragraph-100",PARAGRAPH100MEDIUM:"paragraph-100-medium",PARAGRAPH100BOLD:"paragraph-100-bold",PARAGRAPH200:"paragraph-200",PREAMBLE100:"preamble-100",PREAMBLE200:"preamble-200",ADDITIONAL100:"additional-100",ADDITIONAL100MEDIUM:"additional-100-medium",OVERLINE100:"overline-100",OVERLINE200:"overline-200"}),n="purpur-paragraph",A=l("Paragraph",({["data-testid"]:p,children:i,className:t="",disabled:o,enableHyphenation:h=!1,variant:r=m.PARAGRAPH100,...a})=>{const e=c([t,u[n],u[`${n}--${r}`],{[u[`${n}--hyphens`]]:h,[u[`${n}--disabled`]]:o}]);return g.createElement("p",{...a,className:e,"data-testid":p},i)})}}});
+//# sourceMappingURL=paragraph.system.js.map

package/dist/paragraph.system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.system.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/paragraph.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, { ParamHTMLAttributes, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./paragraph.module.scss\";\n\nexport const ParagraphVariant = {\n  PARAGRAPH100: \"paragraph-100\",\n  PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n  PARAGRAPH100BOLD: \"paragraph-100-bold\",\n  PARAGRAPH200: \"paragraph-200\",\n  PREAMBLE100: \"preamble-100\",\n  PREAMBLE200: \"preamble-200\",\n  ADDITIONAL100: \"additional-100\",\n  ADDITIONAL100MEDIUM: \"additional-100-medium\",\n  OVERLINE100: \"overline-100\",\n  OVERLINE200: \"overline-200\",\n} as const;\n\nexport type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];\n\nexport type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  enableHyphenation?: boolean;\n  disabled?: boolean;\n  variant?: ParagraphVariant;\n};\n\nconst rootClassName = \"purpur-paragraph\";\n\nexport const Paragraph = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className = \"\",\n  disabled,\n  enableHyphenation = false,\n  variant = ParagraphVariant.PARAGRAPH100,\n  ...props\n}: ParagraphProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    styles[`${rootClassName}--${variant}`],\n    {\n      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,\n      [styles[`${rootClassName}--disabled`]]: disabled,\n    },\n  ]);\n\n  return (\n    <p {...props} className={classes} data-testid={dataTestid}>\n      {children}\n    </p>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","ParagraphVariant","exports","rootClassName","Paragraph","dataTestid","children","className","disabled","enableHyphenation","variant","props","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,6gCCvEaU,EAAmBC,EAAA,mBAAA,CAC9B,aAAc,gBACd,mBAAoB,uBACpB,iBAAkB,qBAClB,aAAc,gBACd,YAAa,eACb,YAAa,eACb,cAAe,iBACf,oBAAqB,wBACrB,YAAa,eACb,YAAa,cACf,CAAA,EAaMC,EAAgB,mBAETC,gBAAY,CAAC,CACxB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EACA,kBAAAC,EAAoB,GACpB,QAAAC,EAAUT,EAAiB,aAC3B,GAAGU,CACL,IAAsB,CACpB,MAAMnB,EAAU,EAAE,CAChBe,EACAK,EAAOT,CAAa,EACpBS,EAAO,GAAGT,CAAa,KAAKO,CAAO,EAAE,EACrC,CACE,CAACE,EAAO,GAAGT,CAAa,WAAW,CAAC,EAAGM,EACvC,CAACG,EAAO,GAAGT,CAAa,YAAY,CAAC,EAAGK,CAC1C,CAAA,CACD,EAGC,OAAAK,EAAA,cAAC,KAAG,GAAGF,EAAO,UAAWnB,EAAS,cAAaa,GAC5CC,CACH,CAEJ,CAAA","x_google_ignoreList":[0]}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-paragraph_hwaj6_1{color:var(--purpur-color-text-default);display:block;margin:0;-webkit-hyphens:none;hyphens:none}._purpur-paragraph--disabled_hwaj6_7{color:var(--purpur-color-text-weak)}._purpur-paragraph--hyphens_hwaj6_10{-webkit-hyphens:auto;hyphens:auto}._purpur-paragraph--paragraph-100_hwaj6_13{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose)}._purpur-paragraph--paragraph-100-medium_hwaj6_19{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose);font-weight:var(--purpur-typography-weight-medium)}._purpur-paragraph--paragraph-100-bold_hwaj6_26{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose);font-weight:var(--purpur-typography-weight-bold)}._purpur-paragraph--paragraph-200_hwaj6_33{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-looser)}._purpur-paragraph--preamble-100_hwaj6_39{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-200);line-height:var(--purpur-typography-line-height-loose)}._purpur-paragraph--preamble-200_hwaj6_45{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:clamp(var(--purpur-typography-scale-150),3vw,var(--purpur-typography-scale-400));line-height:var(--purpur-typography-line-height-loose)}._purpur-paragraph--additional-100_hwaj6_51{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-75);line-height:var(--purpur-typography-line-height-loose)}._purpur-paragraph--additional-100-medium_hwaj6_57{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-75);line-height:var(--purpur-typography-line-height-loose);font-weight:var(--purpur-typography-weight-medium)}._purpur-paragraph--overline-100_hwaj6_64{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-size:var(--purpur-typography-scale-75);letter-spacing:var(--purpur-spacing-10);line-height:var(--purpur-typography-line-height-tight);text-transform:uppercase}._purpur-paragraph--overline-200_hwaj6_71{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-size:clamp(var(--purpur-typography-scale-75),3vw,var(--purpur-typography-scale-100));letter-spacing:var(--purpur-spacing-10);line-height:var(--purpur-typography-line-height-tight);text-transform:uppercase}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@purpurds/paragraph",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/paragraph.cjs.js",
+  "types": "./dist/paragraph.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/paragraph.cjs.js",
+      "systemjs": "./dist/paragraph.system.js",
+      "types": "./dist/paragraph.d.ts",
+      "default": "./dist/paragraph.es.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./src/paragraph.mixins.scss": "./src/paragraph.mixins.scss"
+  },
+  "source": "src/paragraph.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,81 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as ParagraphStories from "./src/paragraph.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Paragraph" of={ParagraphStories} />
+
+# Paragraph
+
+<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.
+
+Create a block level element with text content styled as a paragraph.
+
+- `paragraph-100` the default paragraph style for body texts
+- `paragraph-200` has extended line height for long texts, e.g. blog or article texts
+
+### Accessibility
+
+Paragraphs make a page more accessible and physically separated from adjacent blocks through blank lines. Assistive technology supports shortcuts to navigate through next and previous paragraph. For more detailed accessibilty guidelines See [W3Cs information about p element](https://www.w3.org/TR/2010/WD-html5-20101019/grouping-content.html#the-p-element).
+
+### Inline elements
+
+Inline elements can be used inside paragraph to highlight a specific part of text. They add an effect on the text, for example bolding or italics, and for screen reader the pronounciation is be different. Tags marking an inline element can be placed inside the paragraph tags without breaking the flow of the content. The most commonly used inline elements are presented below.
+
+| Element            | Tag        | Description                                                                      |
+| ------------------ | ---------- | -------------------------------------------------------------------------------- |
+| Bring Attention To | `<b>`      | Used to draw the reader's attention to the element's contents.                   |
+| Citation           | `<cite>`   | Used to describe a reference to a cited creative work.                           |
+| Emphasis           | `<em>`     | Marks text that has stress emphasis.                                             |
+| Idiomatic Text     | `<i>`      | Represents a range of text that is set off from the normal text for some reason. |
+| Strong Importance  | `<strong>` | Indicates that its contents have strong importance, seriousness, or urgency.     |
+| Time               | `<time>`   | Represents a specific period in time.                                            |
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/paragraph": "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/paragraph/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Paragraph } from "@purpurds/paragraph";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <Paragraph {...someProps}>Some content</Paragraph>
+    </div>
+  );
+};
+```

package/src/global.d.ts

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

package/src/paragraph.mixins.scss

@@ -0,0 +1,72 @@
+@mixin purpur-paragraph-100() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-normal);
+  font-size: var(--purpur-typography-scale-100);
+  line-height: var(--purpur-typography-line-height-loose);
+}
+
+@mixin purpur-paragraph-100-medium() {
+  @include purpur-paragraph-100;
+  font-weight: var(--purpur-typography-weight-medium);
+}
+
+@mixin purpur-paragraph-100-bold() {
+  @include purpur-paragraph-100;
+  font-weight: var(--purpur-typography-weight-bold);
+}
+
+@mixin purpur-paragraph-200() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-normal);
+  font-size: var(--purpur-typography-scale-100);
+  line-height: var(--purpur-typography-line-height-looser);
+}
+
+@mixin purpur-preamble-100() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-normal);
+  font-size: var(--purpur-typography-scale-200);
+  line-height: var(--purpur-typography-line-height-loose);
+}
+
+@mixin purpur-preamble-200() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-normal);
+  font-size: clamp(var(--purpur-typography-scale-150), 3vw, var(--purpur-typography-scale-400));
+  line-height: var(--purpur-typography-line-height-loose);
+}
+
+@mixin purpur-additional-100() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-normal);
+  font-size: var(--purpur-typography-scale-75);
+  line-height: var(--purpur-typography-line-height-loose);
+}
+
+@mixin purpur-additional-100-medium() {
+  @include purpur-additional-100;
+  font-weight: var(--purpur-typography-weight-medium);
+}
+
+@mixin purpur-overline-100() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-size: var(--purpur-typography-scale-75);
+  letter-spacing: var(--purpur-spacing-10);
+  line-height: var(--purpur-typography-line-height-tight);
+  text-transform: uppercase;
+}
+
+@mixin purpur-overline-200() {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-size: clamp(var(--purpur-typography-scale-75), 3vw, var(--purpur-typography-scale-100));
+  letter-spacing: var(--purpur-spacing-10);
+  line-height: var(--purpur-typography-line-height-tight);
+  text-transform: uppercase;
+}

package/src/paragraph.module.scss

@@ -0,0 +1,56 @@
+@import "./paragraph.mixins";
+
+.purpur-paragraph {
+  color: var(--purpur-color-text-default);
+  display: block;
+  margin: 0;
+  hyphens: none;
+
+  &--disabled {
+    color: var(--purpur-color-text-weak);
+  }
+
+  &--hyphens {
+    hyphens: auto;
+  }
+
+  &--paragraph-100 {
+    @include purpur-paragraph-100;
+  }
+
+  &--paragraph-100-medium {
+    @include purpur-paragraph-100-medium;
+  }
+
+  &--paragraph-100-bold {
+    @include purpur-paragraph-100-bold;
+  }
+
+  &--paragraph-200 {
+    @include purpur-paragraph-200;
+  }
+
+  &--preamble-100 {
+    @include purpur-preamble-100;
+  }
+
+  &--preamble-200 {
+    @include purpur-preamble-200;
+  }
+
+  &--additional-100 {
+    @include purpur-additional-100;
+  }
+
+  &--additional-100-medium {
+    @include purpur-additional-100-medium;
+  }
+
+  &--overline-100 {
+    @include purpur-overline-100;
+  }
+
+  &--overline-200 {
+    @include purpur-overline-200;
+  }
+}

package/src/paragraph.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Paragraph, ParagraphVariant } from "./paragraph";
+
+const meta: Meta<typeof Paragraph> = {
+  title: "Components/Paragraph",
+  component: Paragraph,
+  parameters: {
+    design: [
+      {
+        name: "Paragraph",
+        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(ParagraphVariant),
+      control: { type: "select" },
+    },
+    enableHyphenation: {
+      control: { type: "boolean" },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+    children: { control: { type: "text" } },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Paragraph>;
+
+export const Showcase: Story = {
+  args: {
+    variant: ParagraphVariant.PARAGRAPH100,
+    children: "The quick brown fox jumps over the lazy dog",
+  },
+};

package/src/paragraph.test.tsx

@@ -0,0 +1,23 @@
+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 { Paragraph } from "./paragraph";
+
+expect.extend(matchers);
+
+describe("Paragraph", () => {
+  it("should accept children text content", () => {
+    render(
+      <Paragraph data-testid="first-paragraph" variant="paragraph-100">
+        Some text content
+      </Paragraph>
+    );
+    expect(screen.getByTestId("first-paragraph")).toHaveTextContent("Some text content");
+  });
+  it("default variant value should be paragraph-100", () => {
+    render(<Paragraph data-testid="second-paragraph">Some text content</Paragraph>);
+    expect(screen.getByTestId("second-paragraph")).toHaveClass("purpur-paragraph--paragraph-100");
+  });
+});

package/src/paragraph.tsx

@@ -0,0 +1,56 @@
+import React, { ParamHTMLAttributes, ReactNode } from "react";
+import c from "classnames";
+
+import styles from "./paragraph.module.scss";
+
+export const ParagraphVariant = {
+  PARAGRAPH100: "paragraph-100",
+  PARAGRAPH100MEDIUM: "paragraph-100-medium",
+  PARAGRAPH100BOLD: "paragraph-100-bold",
+  PARAGRAPH200: "paragraph-200",
+  PREAMBLE100: "preamble-100",
+  PREAMBLE200: "preamble-200",
+  ADDITIONAL100: "additional-100",
+  ADDITIONAL100MEDIUM: "additional-100-medium",
+  OVERLINE100: "overline-100",
+  OVERLINE200: "overline-200",
+} as const;
+
+export type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];
+
+export type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  enableHyphenation?: boolean;
+  disabled?: boolean;
+  variant?: ParagraphVariant;
+};
+
+const rootClassName = "purpur-paragraph";
+
+export const Paragraph = ({
+  ["data-testid"]: dataTestid,
+  children,
+  className = "",
+  disabled,
+  enableHyphenation = false,
+  variant = ParagraphVariant.PARAGRAPH100,
+  ...props
+}: ParagraphProps) => {
+  const classes = c([
+    className,
+    styles[rootClassName],
+    styles[`${rootClassName}--${variant}`],
+    {
+      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,
+      [styles[`${rootClassName}--disabled`]]: disabled,
+    },
+  ]);
+
+  return (
+    <p {...props} className={classes} data-testid={dataTestid}>
+      {children}
+    </p>
+  );
+};