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

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime");function v(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var _={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(n){(function(){var a={}.hasOwnProperty;function r(){for(var t="",e=0;e<arguments.length;e++){var i=arguments[e];i&&(t=u(t,l.call(this,i)))}return t}function l(t){if(typeof t=="string"||typeof t=="number")return this&&this[t]||t;if(typeof t!="object")return"";if(Array.isArray(t))return r.apply(this,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=u(e,this&&this[i]||i));return e}function u(t,e){return e?t?t+" "+e:t+e:t}n.exports?(r.default=r,n.exports=r):window.classNames=r})()})(_);var f=_.exports;const k=v(f),g={"purpur-link":"_purpur-link_eselc_1","purpur-link--text":"_purpur-link--text_eselc_15","purpur-link--standalone":"_purpur-link--standalone_eselc_15","purpur-link--navigation":"_purpur-link--navigation_eselc_15","purpur-link--disable-visited":"_purpur-link--disable-visited_eselc_25","purpur-link--text-negative":"_purpur-link--text-negative_eselc_28","purpur-link--standalone-negative":"_purpur-link--standalone-negative_eselc_28","purpur-link--navigation-negative":"_purpur-link--navigation-negative_eselc_28","purpur-link--ensure-target-area":"_purpur-link--ensure-target-area_eselc_67","purpur-link--silent":"_purpur-link--silent_eselc_73"},N=k.bind(g),s="purpur-link",d={TEXT:"text",TEXT_NEGATIVE:"text-negative",STANDALONE:"standalone",STANDALONE_NEGATIVE:"standalone-negative",NAVIGATION:"navigation",NAVIGATION_NEGATIVE:"navigation-negative"},A=Object.values(d),T=({["data-testid"]:n,children:a,className:r,disableVisited:l,ensureTargetArea:u,href:t,silent:e,target:i,variant:p,...o})=>c.jsx("span",{className:N([r,s,`${s}--${p}`,{[`${s}--silent`]:e,[`${s}--negative`]:p.endsWith("negative"),[`${s}--disable-visited`]:l??e,[`${s}--ensure-target-area`]:u}]),"data-testid":n,...o,children:t?c.jsx("a",{href:t,target:i,...o,children:a}):a});exports.LINK_VARIANT=d;exports.Link=T;exports.linkVariants=A;
+//# sourceMappingURL=link.cjs.js.map

package/dist/link.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/link.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.call(this, 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 this && this[arg] || 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(this, 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, this && this[key] || 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, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./link.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-link\";\n\nexport const LINK_VARIANT = {\n  TEXT: \"text\",\n  TEXT_NEGATIVE: \"text-negative\",\n  STANDALONE: \"standalone\",\n  STANDALONE_NEGATIVE: \"standalone-negative\",\n  NAVIGATION: \"navigation\",\n  NAVIGATION_NEGATIVE: \"navigation-negative\",\n} as const;\n\nexport const linkVariants = Object.values(LINK_VARIANT);\nexport type LinkVariant = (typeof LINK_VARIANT)[keyof typeof LINK_VARIANT];\n\nexport type LinkProps = {\n  children: ReactNode;\n  className?: string;\n  [\"data-testid\"]?: string;\n  /** Disables visited styling */\n  disableVisited?: boolean;\n  /**\n   * This sets a minimum size on the targetable area of the link. Please note\n   * it also changes display value to flex, meaning its container will behave\n   * like a block element. You can wrap this component in a flex container\n   * for additional layout control.\n   */\n  ensureTargetArea?: boolean;\n  /**\n   * This will wrap children in a <a/> tag and set the href accordingly\n   */\n  href?: string;\n  /**\n   * A silent link is intended to wrap an element\n   * to make it a link but not add any styling\n   * except for the pointer cursor and focus style.\n   */\n  silent?: boolean;\n  /**\n   * if target and href is specified, target will be added to the <a/> tag\n   */\n  target?: React.HTMLAttributeAnchorTarget;\n  /**\n   * Determines if link is displayed on its own line\n   * (standalone) or within the current text content\n   * (text).\n   */\n  variant: LinkVariant;\n};\n\nexport const Link = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className,\n  disableVisited,\n  ensureTargetArea,\n  href,\n  silent,\n  target,\n  variant,\n  ...props\n}: LinkProps) => (\n  <span\n    className={cx([\n      className,\n      rootClassName,\n      `${rootClassName}--${variant}`,\n      {\n        [`${rootClassName}--silent`]: silent,\n        [`${rootClassName}--negative`]: variant.endsWith(\"negative\"),\n        [`${rootClassName}--disable-visited`]: disableVisited ?? silent,\n        [`${rootClassName}--ensure-target-area`]: ensureTargetArea,\n      },\n    ])}\n    data-testid={dataTestid}\n    {...props}\n  >\n    {href ? (\n      <a href={href} target={target} {...props}>\n        {children}\n      </a>\n    ) : (\n      children\n    )}\n  </span>\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","LINK_VARIANT","linkVariants","Link","dataTestid","children","className","disableVisited","ensureTargetArea","href","silent","target","variant","props","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,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE1D,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,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,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,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,8qBCvEMU,EAAKC,EAAE,KAAKC,CAAM,EAClBC,EAAgB,cAETC,EAAe,CAC1B,KAAM,OACN,cAAe,gBACf,WAAY,aACZ,oBAAqB,sBACrB,WAAY,aACZ,oBAAqB,qBACvB,EAEaC,EAAe,OAAO,OAAOD,CAAY,EAsCzCE,EAAO,CAAC,CACnB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IACEC,EAAA,IAAC,OAAA,CACC,UAAWjB,EAAG,CACZS,EACAN,EACA,GAAGA,CAAa,KAAKY,CAAO,GAC5B,CACE,CAAC,GAAGZ,CAAa,UAAU,EAAGU,EAC9B,CAAC,GAAGV,CAAa,YAAY,EAAGY,EAAQ,SAAS,UAAU,EAC3D,CAAC,GAAGZ,CAAa,mBAAmB,EAAGO,GAAkBG,EACzD,CAAC,GAAGV,CAAa,sBAAsB,EAAGQ,CAC5C,CAAA,CACD,EACD,cAAaJ,EACZ,GAAGS,EAEH,SAAAJ,QACE,IAAE,CAAA,KAAAA,EAAY,OAAAE,EAAiB,GAAGE,EAChC,SAAAR,CACH,CAAA,EAEAA,CAAA,CAEJ","x_google_ignoreList":[0]}

package/dist/link.d.ts

@@ -0,0 +1,47 @@
+import React, { ReactNode } from "react";
+export declare const LINK_VARIANT: {
+    readonly TEXT: "text";
+    readonly TEXT_NEGATIVE: "text-negative";
+    readonly STANDALONE: "standalone";
+    readonly STANDALONE_NEGATIVE: "standalone-negative";
+    readonly NAVIGATION: "navigation";
+    readonly NAVIGATION_NEGATIVE: "navigation-negative";
+};
+export declare const linkVariants: ("text" | "text-negative" | "standalone" | "standalone-negative" | "navigation" | "navigation-negative")[];
+export type LinkVariant = (typeof LINK_VARIANT)[keyof typeof LINK_VARIANT];
+export type LinkProps = {
+    children: ReactNode;
+    className?: string;
+    ["data-testid"]?: string;
+    /** Disables visited styling */
+    disableVisited?: boolean;
+    /**
+     * This sets a minimum size on the targetable area of the link. Please note
+     * it also changes display value to flex, meaning its container will behave
+     * like a block element. You can wrap this component in a flex container
+     * for additional layout control.
+     */
+    ensureTargetArea?: boolean;
+    /**
+     * This will wrap children in a <a/> tag and set the href accordingly
+     */
+    href?: string;
+    /**
+     * A silent link is intended to wrap an element
+     * to make it a link but not add any styling
+     * except for the pointer cursor and focus style.
+     */
+    silent?: boolean;
+    /**
+     * if target and href is specified, target will be added to the <a/> tag
+     */
+    target?: React.HTMLAttributeAnchorTarget;
+    /**
+     * Determines if link is displayed on its own line
+     * (standalone) or within the current text content
+     * (text).
+     */
+    variant: LinkVariant;
+};
+export declare const Link: ({ ["data-testid"]: dataTestid, children, className, disableVisited, ensureTargetArea, href, silent, target, variant, ...props }: LinkProps) => React.JSX.Element;
+//# sourceMappingURL=link.d.ts.map

package/dist/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../src/link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQzC,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,eAAO,MAAM,YAAY,4GAA8B,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE3E,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,IAAI,oIAWd,SAAS,sBAwBX,CAAC"}

package/dist/link.es.js

@@ -0,0 +1,95 @@
+import { jsx as c } from "react/jsx-runtime";
+function d(n) {
+  return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
+}
+var _ = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(n) {
+  (function() {
+    var a = {}.hasOwnProperty;
+    function i() {
+      for (var t = "", e = 0; e < arguments.length; e++) {
+        var r = arguments[e];
+        r && (t = u(t, p.call(this, r)));
+      }
+      return t;
+    }
+    function p(t) {
+      if (typeof t == "string" || typeof t == "number")
+        return this && this[t] || t;
+      if (typeof t != "object")
+        return "";
+      if (Array.isArray(t))
+        return i.apply(this, t);
+      if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
+        return t.toString();
+      var e = "";
+      for (var r in t)
+        a.call(t, r) && t[r] && (e = u(e, this && this[r] || r));
+      return e;
+    }
+    function u(t, e) {
+      return e ? t ? t + " " + e : t + e : t;
+    }
+    n.exports ? (i.default = i, n.exports = i) : window.classNames = i;
+  })();
+})(_);
+var v = _.exports;
+const f = /* @__PURE__ */ d(v), k = {
+  "purpur-link": "_purpur-link_eselc_1",
+  "purpur-link--text": "_purpur-link--text_eselc_15",
+  "purpur-link--standalone": "_purpur-link--standalone_eselc_15",
+  "purpur-link--navigation": "_purpur-link--navigation_eselc_15",
+  "purpur-link--disable-visited": "_purpur-link--disable-visited_eselc_25",
+  "purpur-link--text-negative": "_purpur-link--text-negative_eselc_28",
+  "purpur-link--standalone-negative": "_purpur-link--standalone-negative_eselc_28",
+  "purpur-link--navigation-negative": "_purpur-link--navigation-negative_eselc_28",
+  "purpur-link--ensure-target-area": "_purpur-link--ensure-target-area_eselc_67",
+  "purpur-link--silent": "_purpur-link--silent_eselc_73"
+}, g = f.bind(k), s = "purpur-link", N = {
+  TEXT: "text",
+  TEXT_NEGATIVE: "text-negative",
+  STANDALONE: "standalone",
+  STANDALONE_NEGATIVE: "standalone-negative",
+  NAVIGATION: "navigation",
+  NAVIGATION_NEGATIVE: "navigation-negative"
+}, E = Object.values(N), T = ({
+  ["data-testid"]: n,
+  children: a,
+  className: i,
+  disableVisited: p,
+  ensureTargetArea: u,
+  href: t,
+  silent: e,
+  target: r,
+  variant: l,
+  ...o
+}) => /* @__PURE__ */ c(
+  "span",
+  {
+    className: g([
+      i,
+      s,
+      `${s}--${l}`,
+      {
+        [`${s}--silent`]: e,
+        [`${s}--negative`]: l.endsWith("negative"),
+        [`${s}--disable-visited`]: p ?? e,
+        [`${s}--ensure-target-area`]: u
+      }
+    ]),
+    "data-testid": n,
+    ...o,
+    children: t ? /* @__PURE__ */ c("a", { href: t, target: r, ...o, children: a }) : a
+  }
+);
+export {
+  N as LINK_VARIANT,
+  T as Link,
+  E as linkVariants
+};
+//# sourceMappingURL=link.es.js.map

package/dist/link.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/link.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.call(this, 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 this && this[arg] || 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(this, 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, this && this[key] || 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, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./link.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-link\";\n\nexport const LINK_VARIANT = {\n  TEXT: \"text\",\n  TEXT_NEGATIVE: \"text-negative\",\n  STANDALONE: \"standalone\",\n  STANDALONE_NEGATIVE: \"standalone-negative\",\n  NAVIGATION: \"navigation\",\n  NAVIGATION_NEGATIVE: \"navigation-negative\",\n} as const;\n\nexport const linkVariants = Object.values(LINK_VARIANT);\nexport type LinkVariant = (typeof LINK_VARIANT)[keyof typeof LINK_VARIANT];\n\nexport type LinkProps = {\n  children: ReactNode;\n  className?: string;\n  [\"data-testid\"]?: string;\n  /** Disables visited styling */\n  disableVisited?: boolean;\n  /**\n   * This sets a minimum size on the targetable area of the link. Please note\n   * it also changes display value to flex, meaning its container will behave\n   * like a block element. You can wrap this component in a flex container\n   * for additional layout control.\n   */\n  ensureTargetArea?: boolean;\n  /**\n   * This will wrap children in a <a/> tag and set the href accordingly\n   */\n  href?: string;\n  /**\n   * A silent link is intended to wrap an element\n   * to make it a link but not add any styling\n   * except for the pointer cursor and focus style.\n   */\n  silent?: boolean;\n  /**\n   * if target and href is specified, target will be added to the <a/> tag\n   */\n  target?: React.HTMLAttributeAnchorTarget;\n  /**\n   * Determines if link is displayed on its own line\n   * (standalone) or within the current text content\n   * (text).\n   */\n  variant: LinkVariant;\n};\n\nexport const Link = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className,\n  disableVisited,\n  ensureTargetArea,\n  href,\n  silent,\n  target,\n  variant,\n  ...props\n}: LinkProps) => (\n  <span\n    className={cx([\n      className,\n      rootClassName,\n      `${rootClassName}--${variant}`,\n      {\n        [`${rootClassName}--silent`]: silent,\n        [`${rootClassName}--negative`]: variant.endsWith(\"negative\"),\n        [`${rootClassName}--disable-visited`]: disableVisited ?? silent,\n        [`${rootClassName}--ensure-target-area`]: ensureTargetArea,\n      },\n    ])}\n    data-testid={dataTestid}\n    {...props}\n  >\n    {href ? (\n      <a href={href} target={target} {...props}>\n        {children}\n      </a>\n    ) : (\n      children\n    )}\n  </span>\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","LINK_VARIANT","linkVariants","Link","dataTestid","children","className","disableVisited","ensureTargetArea","href","silent","target","variant","props","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,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,MAE1D;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,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,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,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;;;;;;;;;;;;;;GCvEMU,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,eAETC,IAAe;AAAA,EAC1B,MAAM;AAAA,EACN,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,YAAY;AAAA,EACZ,qBAAqB;AACvB,GAEaC,IAAe,OAAO,OAAOD,CAAY,GAsCzCE,IAAO,CAAC;AAAA,EACnB,CAAC,gBAAgBC;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWjB,EAAG;AAAA,MACZS;AAAA,MACAN;AAAA,MACA,GAAGA,CAAa,KAAKY,CAAO;AAAA,MAC5B;AAAA,QACE,CAAC,GAAGZ,CAAa,UAAU,GAAGU;AAAA,QAC9B,CAAC,GAAGV,CAAa,YAAY,GAAGY,EAAQ,SAAS,UAAU;AAAA,QAC3D,CAAC,GAAGZ,CAAa,mBAAmB,GAAGO,KAAkBG;AAAA,QACzD,CAAC,GAAGV,CAAa,sBAAsB,GAAGQ;AAAA,MAC5C;AAAA,IAAA,CACD;AAAA,IACD,eAAaJ;AAAA,IACZ,GAAGS;AAAA,IAEH,UAAAJ,sBACE,KAAE,EAAA,MAAAA,GAAY,QAAAE,GAAiB,GAAGE,GAChC,UAAAR,EACH,CAAA,IAEAA;AAAA,EAAA;AAEJ;","x_google_ignoreList":[0]}

package/dist/link.system.js

@@ -0,0 +1,6 @@
+System.register(["react"],function(l,E){"use strict";var p;return{setters:[o=>{p=o.default}],execute:function(){function o(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var _={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(n){(function(){var a={}.hasOwnProperty;function i(){for(var t="",e=0;e<arguments.length;e++){var r=arguments[e];r&&(t=u(t,c.call(this,r)))}return t}function c(t){if(typeof t=="string"||typeof t=="number")return this&&this[t]||t;if(typeof t!="object")return"";if(Array.isArray(t))return i.apply(this,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var e="";for(var r in t)a.call(t,r)&&t[r]&&(e=u(e,this&&this[r]||r));return e}function u(t,e){return e?t?t+" "+e:t+e:t}n.exports?(i.default=i,n.exports=i):window.classNames=i})()})(_);var f=_.exports;const k=o(f),N={"purpur-link":"_purpur-link_eselc_1","purpur-link--text":"_purpur-link--text_eselc_15","purpur-link--standalone":"_purpur-link--standalone_eselc_15","purpur-link--navigation":"_purpur-link--navigation_eselc_15","purpur-link--disable-visited":"_purpur-link--disable-visited_eselc_25","purpur-link--text-negative":"_purpur-link--text-negative_eselc_28","purpur-link--standalone-negative":"_purpur-link--standalone-negative_eselc_28","purpur-link--navigation-negative":"_purpur-link--navigation-negative_eselc_28","purpur-link--ensure-target-area":"_purpur-link--ensure-target-area_eselc_67","purpur-link--silent":"_purpur-link--silent_eselc_73"},g=k.bind(N),s="purpur-link",A=l("LINK_VARIANT",{TEXT:"text",TEXT_NEGATIVE:"text-negative",STANDALONE:"standalone",STANDALONE_NEGATIVE:"standalone-negative",NAVIGATION:"navigation",NAVIGATION_NEGATIVE:"navigation-negative"}),T=l("linkVariants",Object.values(A)),b=l("Link",({["data-testid"]:n,children:a,className:i,disableVisited:c,ensureTargetArea:u,href:t,silent:e,target:r,variant:d,...v})=>p.createElement("span",{className:g([i,s,`${s}--${d}`,{[`${s}--silent`]:e,[`${s}--negative`]:d.endsWith("negative"),[`${s}--disable-visited`]:c??e,[`${s}--ensure-target-area`]:u}]),"data-testid":n,...v},t?p.createElement("a",{href:t,target:r,...v},a):a))}}});
+//# sourceMappingURL=link.system.js.map

package/dist/link.system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.system.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/link.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.call(this, 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 this && this[arg] || 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(this, 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, this && this[key] || 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, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./link.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-link\";\n\nexport const LINK_VARIANT = {\n  TEXT: \"text\",\n  TEXT_NEGATIVE: \"text-negative\",\n  STANDALONE: \"standalone\",\n  STANDALONE_NEGATIVE: \"standalone-negative\",\n  NAVIGATION: \"navigation\",\n  NAVIGATION_NEGATIVE: \"navigation-negative\",\n} as const;\n\nexport const linkVariants = Object.values(LINK_VARIANT);\nexport type LinkVariant = (typeof LINK_VARIANT)[keyof typeof LINK_VARIANT];\n\nexport type LinkProps = {\n  children: ReactNode;\n  className?: string;\n  [\"data-testid\"]?: string;\n  /** Disables visited styling */\n  disableVisited?: boolean;\n  /**\n   * This sets a minimum size on the targetable area of the link. Please note\n   * it also changes display value to flex, meaning its container will behave\n   * like a block element. You can wrap this component in a flex container\n   * for additional layout control.\n   */\n  ensureTargetArea?: boolean;\n  /**\n   * This will wrap children in a <a/> tag and set the href accordingly\n   */\n  href?: string;\n  /**\n   * A silent link is intended to wrap an element\n   * to make it a link but not add any styling\n   * except for the pointer cursor and focus style.\n   */\n  silent?: boolean;\n  /**\n   * if target and href is specified, target will be added to the <a/> tag\n   */\n  target?: React.HTMLAttributeAnchorTarget;\n  /**\n   * Determines if link is displayed on its own line\n   * (standalone) or within the current text content\n   * (text).\n   */\n  variant: LinkVariant;\n};\n\nexport const Link = ({\n  [\"data-testid\"]: dataTestid,\n  children,\n  className,\n  disableVisited,\n  ensureTargetArea,\n  href,\n  silent,\n  target,\n  variant,\n  ...props\n}: LinkProps) => (\n  <span\n    className={cx([\n      className,\n      rootClassName,\n      `${rootClassName}--${variant}`,\n      {\n        [`${rootClassName}--silent`]: silent,\n        [`${rootClassName}--negative`]: variant.endsWith(\"negative\"),\n        [`${rootClassName}--disable-visited`]: disableVisited ?? silent,\n        [`${rootClassName}--ensure-target-area`]: ensureTargetArea,\n      },\n    ])}\n    data-testid={dataTestid}\n    {...props}\n  >\n    {href ? (\n      <a href={href} target={target} {...props}>\n        {children}\n      </a>\n    ) : (\n      children\n    )}\n  </span>\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","LINK_VARIANT","exports","linkVariants","Link","dataTestid","children","className","disableVisited","ensureTargetArea","href","silent","target","variant","props","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,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE1D,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,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,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,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,8qBCvEMU,EAAKC,EAAE,KAAKC,CAAM,EAClBC,EAAgB,cAETC,EAAeC,EAAA,eAAA,CAC1B,KAAM,OACN,cAAe,gBACf,WAAY,aACZ,oBAAqB,sBACrB,WAAY,aACZ,oBAAqB,qBACvB,CAAA,EAEaC,EAAeD,EAAA,eAAA,OAAO,OAAOD,CAAY,CAAA,EAsCzCG,WAAO,CAAC,CACnB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAAC,OAAA,CACC,UAAWlB,EAAG,CACZU,EACAP,EACA,GAAGA,CAAa,KAAKa,CAAO,GAC5B,CACE,CAAC,GAAGb,CAAa,UAAU,EAAGW,EAC9B,CAAC,GAAGX,CAAa,YAAY,EAAGa,EAAQ,SAAS,UAAU,EAC3D,CAAC,GAAGb,CAAa,mBAAmB,EAAGQ,GAAkBG,EACzD,CAAC,GAAGX,CAAa,sBAAsB,EAAGS,CAC5C,CAAA,CACD,EACD,cAAaJ,EACZ,GAAGS,CAAA,EAEHJ,kBACE,IAAE,CAAA,KAAAA,EAAY,OAAAE,EAAiB,GAAGE,CAAA,EAChCR,CACH,EAEAA,CAEJ,CAAA","x_google_ignoreList":[0]}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-link_eselc_1 a{align-items:center;cursor:pointer;display:inline-flex;gap:var(--purpur-spacing-50);text-decoration:underline}._purpur-link_eselc_1 a:focus,._purpur-link_eselc_1 a:active{outline:solid var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-25)}._purpur-link_eselc_1 a:focus:not(:focus-visible){outline:0}._purpur-link--text_eselc_15 a,._purpur-link--standalone_eselc_15 a,._purpur-link--navigation_eselc_15 a{color:var(--purpur-color-text-interactive-primary)}._purpur-link--text_eselc_15 a:hover,._purpur-link--standalone_eselc_15 a:hover,._purpur-link--navigation_eselc_15 a:hover{color:var(--purpur-color-text-interactive-primary-active);background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-link--text_eselc_15 a:active,._purpur-link--standalone_eselc_15 a:active,._purpur-link--navigation_eselc_15 a:active{background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-link--text_eselc_15 a:visited:not(._purpur-link--disable-visited_eselc_25),._purpur-link--standalone_eselc_15 a:visited:not(._purpur-link--disable-visited_eselc_25),._purpur-link--navigation_eselc_15 a:visited:not(._purpur-link--disable-visited_eselc_25){color:var(--purpur-color-text-interactive-primary-active)}._purpur-link--text-negative_eselc_28 a,._purpur-link--standalone-negative_eselc_28 a,._purpur-link--navigation-negative_eselc_28 a{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-link--text-negative_eselc_28 a:hover,._purpur-link--standalone-negative_eselc_28 a:hover,._purpur-link--navigation-negative_eselc_28 a:hover{background-color:var(--purpur-color-background-interactive-transparent-negative-hover);color:var(--purpur-color-text-interactive-primary-negative)}._purpur-link--text-negative_eselc_28 a:active,._purpur-link--standalone-negative_eselc_28 a:active,._purpur-link--navigation-negative_eselc_28 a:active{background-color:var(--purpur-color-background-interactive-transparent-negative-active);color:var(--purpur-color-text-interactive-primary-negative-active)}._purpur-link--text-negative_eselc_28 a:visited:not(._purpur-link--disable-visited_eselc_25),._purpur-link--standalone-negative_eselc_28 a:visited:not(._purpur-link--disable-visited_eselc_25),._purpur-link--navigation-negative_eselc_28 a:visited:not(._purpur-link--disable-visited_eselc_25){color:var(--purpur-color-text-interactive-primary-negative-active)}._purpur-link--standalone_eselc_15,._purpur-link--standalone-negative_eselc_28{display:inline-block}._purpur-link--standalone_eselc_15 a,._purpur-link--standalone-negative_eselc_28 a{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);padding:var(--purpur-spacing-100) 0}._purpur-link--navigation_eselc_15 a,._purpur-link--navigation-negative_eselc_28 a{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);align-items:center;background-color:var(--purpur-color-functional-transparent);display:flex;font-weight:var(--purpur-typography-weight-medium);text-decoration:none}._purpur-link--navigation_eselc_15 a:active,._purpur-link--navigation_eselc_15 a:hover,._purpur-link--navigation-negative_eselc_28 a:active,._purpur-link--navigation-negative_eselc_28 a:hover{background-color:var(--purpur-color-functional-transparent);text-decoration:underline}._purpur-link--ensure-target-area_eselc_67,._purpur-link--ensure-target-area_eselc_67 a{align-items:center;display:flex;min-height:var(--purpur-spacing-600);min-width:var(--purpur-spacing-600)}._purpur-link--silent_eselc_73 a{background-color:inherit;color:inherit;height:100%;text-decoration:none}._purpur-link--silent_eselc_73 a:hover,._purpur-link--silent_eselc_73 a:focus,._purpur-link--silent_eselc_73 a:active{background-color:inherit;color:inherit}._purpur-link--silent_eselc_73 a:focus{outline:0}._purpur-link--silent_eselc_73:is(._purpur-link--disable-visited_eselc_25) a:visited{color:inherit}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@purpurds/link",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/link.cjs.js",
+  "types": "./dist/link.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/link.cjs.js",
+      "systemjs": "./dist/link.system.js",
+      "types": "./dist/link.d.ts",
+      "default": "./dist/link.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/link.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/paragraph": "3.0.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/icon": "3.0.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,72 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as LinkStories from "./src/link.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Link" of={LinkStories} />
+
+# Link
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/link": "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/link/styles";
+```
+
+In MyComponent.tsx
+
+##### With a custom anchor (e.g. NextJS) as children
+
+```tsx
+import { Link } from "@purpurds/link";
+
+export const MyComponent = () => {
+  return (
+    <Link>
+      <CustomAnchor>Some content</CustomAnchor>
+    </Link>
+  );
+};
+```
+
+##### Without an anchor as children
+
+```tsx
+import { Link } from "@purpurds/link";
+
+export const MyComponent = () => {
+  return (
+    <Link href="http://telia.se" target="_blank">
+      Some content
+    </Link>
+  );
+};
+```

package/src/global.d.ts

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

package/src/link.module.scss

@@ -0,0 +1,130 @@
+@import "@purpurds/paragraph/src/paragraph.mixins.scss";
+
+.purpur-link {
+  $block: &;
+
+  a {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    gap: var(--purpur-spacing-50);
+    text-decoration: underline;
+
+    &:focus,
+    &:active {
+      outline: solid var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);
+      outline-offset: var(--purpur-spacing-25);
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: 0;
+    }
+  }
+
+  &--text,
+  &--standalone,
+  &--navigation {
+    a {
+      color: var(--purpur-color-text-interactive-primary);
+
+      &:hover {
+        color: var(--purpur-color-text-interactive-primary-active);
+        background-color: var(--purpur-color-background-interactive-transparent-hover);
+      }
+
+      &:active {
+        background-color: var(--purpur-color-background-interactive-transparent-active);
+      }
+
+      &:visited:not(#{$block}--disable-visited) {
+        color: var(--purpur-color-text-interactive-primary-active);
+      }
+    }
+  }
+
+  &--text-negative,
+  &--standalone-negative,
+  &--navigation-negative {
+    a {
+      color: var(--purpur-color-text-interactive-primary-negative);
+
+      &:hover {
+        background-color: var(--purpur-color-background-interactive-transparent-negative-hover);
+        color: var(--purpur-color-text-interactive-primary-negative);
+      }
+
+      &:active {
+        background-color: var(--purpur-color-background-interactive-transparent-negative-active);
+        color: var(--purpur-color-text-interactive-primary-negative-active);
+      }
+
+      &:visited:not(#{$block}--disable-visited) {
+        color: var(--purpur-color-text-interactive-primary-negative-active);
+      }
+    }
+  }
+
+  &--standalone,
+  &--standalone-negative {
+    display: inline-block;
+
+    a {
+      @include purpur-paragraph-100();
+      padding: var(--purpur-spacing-100) 0;
+    }
+  }
+
+  &--navigation,
+  &--navigation-negative {
+    a {
+      @include purpur-paragraph-100();
+      align-items: center;
+      background-color: var(--purpur-color-functional-transparent);
+      display: flex;
+      font-weight: var(--purpur-typography-weight-medium);
+      text-decoration: none;
+
+      &:active,
+      &:hover {
+        background-color: var(--purpur-color-functional-transparent);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &--ensure-target-area,
+  &--ensure-target-area a {
+    align-items: center;
+    display: flex;
+    min-height: var(--purpur-spacing-600);
+    min-width: var(--purpur-spacing-600);
+  }
+
+  &--silent {
+    a {
+      background-color: inherit;
+      color: inherit;
+      height: 100%;
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: inherit;
+        color: inherit;
+      }
+    }
+
+    a:focus {
+      outline: 0;
+    }
+
+    &:is(#{$block}--disable-visited) {
+      a {
+        &:visited {
+          color: inherit;
+        }
+      }
+    }
+  }
+}

package/src/link.stories.tsx

@@ -0,0 +1,129 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { bloodPressure, endUser, Icon } from "@purpurds/icon";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Link, linkVariants } from "./link";
+
+const meta: Meta<typeof Link> = {
+  title: "Components/Link",
+  component: Link,
+  parameters: {
+    design: [
+      {
+        name: "Link",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-Library?type=design&node-id=3319%3A712&mode=design&t=k1a8dn8C4Mhqq7i4-1",
+      },
+    ],
+  },
+  argTypes: {
+    variant: {
+      options: linkVariants,
+      control: { type: "select" },
+    },
+    target: { control: { type: "text" } },
+  },
+  decorators: [
+    (Story, context) => {
+      const {
+        args: { variant },
+      } = context;
+
+      return (
+        <div
+          style={{
+            backgroundColor:
+              variant && variant.endsWith("negative")
+                ? "var(--purpur-color-background-tone-on-tone-primary)"
+                : undefined,
+            padding: "var(--purpur-spacing-200)",
+          }}
+        >
+          <Story {...context} />
+        </div>
+      );
+    },
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const Showcase: Story = {
+  args: {
+    variant: linkVariants[0],
+    children: "Hello Link!",
+  },
+  render: ({ children, variant, ...args }) => (
+    <div
+      style={{
+        backgroundColor:
+          variant && variant.endsWith("negative")
+            ? "var(--purpur-color-background-tone-on-tone-primary)"
+            : undefined,
+        padding: "var(--purpur-spacing-200)",
+      }}
+    >
+      <Link variant={variant} {...args}>
+        <a href="https://www.telia.se" target="_blank">
+          {children}
+        </a>
+      </Link>
+    </div>
+  ),
+};
+
+export const WithLeftIcon: Story = {
+  name: "Link with left icon",
+  args: {
+    variant: linkVariants[0],
+    children: "Hello Link!",
+  },
+  render: ({ children, variant, ...args }) => (
+    <Link variant={variant} {...args}>
+      <a href="https://www.telia.se" target="_blank">
+        <Icon svg={bloodPressure} size="xs" />
+        {children}
+      </a>
+    </Link>
+  ),
+};
+
+export const WithRightIcon: Story = {
+  name: "Link with right icon",
+  args: {
+    variant: linkVariants[0],
+    children: "Hello Link!",
+  },
+  render: ({ children, variant, ...args }) => (
+    <div
+      style={{
+        backgroundColor:
+          variant && variant.endsWith("negative")
+            ? "var(--purpur-color-background-tone-on-tone-primary)"
+            : undefined,
+      }}
+    >
+      <Link variant={variant} {...args}>
+        <a href="https://www.telia.se" target="_blank">
+          {children}
+          <Icon svg={endUser} size="xs" />
+        </a>
+      </Link>
+    </div>
+  ),
+};
+
+export const WithoutAnchorAsChild: Story = {
+  name: "Link without anchor tag as child",
+  args: {
+    variant: linkVariants[0],
+    children: "Hello Link!",
+  },
+  render: ({ children, variant, ...args }) => (
+    <Link variant={variant} href="https://www.telia.se" target="_blank" {...args}>
+      {children}
+    </Link>
+  ),
+};

package/src/link.test.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Link } from "./link";
+
+expect.extend(matchers);
+
+describe("Link", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render", () => {
+    render(
+      <Link variant="text" data-testid="link">
+        Some text content
+      </Link>
+    );
+
+    expect(screen.getByTestId("link")).toHaveTextContent("Some text content");
+    expect(screen.getByTestId("link")).toHaveClass("purpur-link--text");
+  });
+
+  it("should add a class for disabling visited styling", () => {
+    render(
+      <Link variant="text" data-testid="link" disableVisited>
+        Some text content
+      </Link>
+    );
+
+    expect(screen.getByTestId("link")).toHaveClass("purpur-link--disable-visited");
+  });
+
+  it("should add a class for silent styling", () => {
+    render(
+      <Link variant="text" data-testid="link" silent>
+        Some text content
+      </Link>
+    );
+
+    expect(screen.getByTestId("link")).toHaveClass("purpur-link--silent");
+  });
+});

package/src/link.tsx

@@ -0,0 +1,91 @@
+import React, { ReactNode } from "react";
+import c from "classnames/bind";
+
+import styles from "./link.module.scss";
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-link";
+
+export const LINK_VARIANT = {
+  TEXT: "text",
+  TEXT_NEGATIVE: "text-negative",
+  STANDALONE: "standalone",
+  STANDALONE_NEGATIVE: "standalone-negative",
+  NAVIGATION: "navigation",
+  NAVIGATION_NEGATIVE: "navigation-negative",
+} as const;
+
+export const linkVariants = Object.values(LINK_VARIANT);
+export type LinkVariant = (typeof LINK_VARIANT)[keyof typeof LINK_VARIANT];
+
+export type LinkProps = {
+  children: ReactNode;
+  className?: string;
+  ["data-testid"]?: string;
+  /** Disables visited styling */
+  disableVisited?: boolean;
+  /**
+   * This sets a minimum size on the targetable area of the link. Please note
+   * it also changes display value to flex, meaning its container will behave
+   * like a block element. You can wrap this component in a flex container
+   * for additional layout control.
+   */
+  ensureTargetArea?: boolean;
+  /**
+   * This will wrap children in a <a/> tag and set the href accordingly
+   */
+  href?: string;
+  /**
+   * A silent link is intended to wrap an element
+   * to make it a link but not add any styling
+   * except for the pointer cursor and focus style.
+   */
+  silent?: boolean;
+  /**
+   * if target and href is specified, target will be added to the <a/> tag
+   */
+  target?: React.HTMLAttributeAnchorTarget;
+  /**
+   * Determines if link is displayed on its own line
+   * (standalone) or within the current text content
+   * (text).
+   */
+  variant: LinkVariant;
+};
+
+export const Link = ({
+  ["data-testid"]: dataTestid,
+  children,
+  className,
+  disableVisited,
+  ensureTargetArea,
+  href,
+  silent,
+  target,
+  variant,
+  ...props
+}: LinkProps) => (
+  <span
+    className={cx([
+      className,
+      rootClassName,
+      `${rootClassName}--${variant}`,
+      {
+        [`${rootClassName}--silent`]: silent,
+        [`${rootClassName}--negative`]: variant.endsWith("negative"),
+        [`${rootClassName}--disable-visited`]: disableVisited ?? silent,
+        [`${rootClassName}--ensure-target-area`]: ensureTargetArea,
+      },
+    ])}
+    data-testid={dataTestid}
+    {...props}
+  >
+    {href ? (
+      <a href={href} target={target} {...props}>
+        {children}
+      </a>
+    ) : (
+      children
+    )}
+  </span>
+);