@availity/mui-link 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2023-06-05)
+
+
+### Features
+
+* **mui-link:** add link package ([dbcf569](https://github.com/Availity/element/commit/dbcf569191cd0525b2c474eab0d2b487feb473ee))

package/README.md

@@ -0,0 +1,61 @@
+# @availity/mui-link
+
+> Availity MUI Link component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-link.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-link)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-link.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-link)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-link?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-link/package.json)
+
+## Documentation
+
+This package extends the MUI Link component: [MUI Link Docs](https://mui.com/components/link/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-link-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Installation
+
+### Import Through @availity/element (Recommended)
+
+#### NPM
+
+```bash
+npm install @availity/element
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/element
+```
+
+### Direct Import
+
+_This package has a few peer dependencies. Install `@mui/material`, `@emotion/react`, & `@mui/system` if it is not in your application already._
+
+#### NPM
+
+```bash
+npm install @availity/mui-link
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-link
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { Link } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { Link } from '@availity/mui-link';
+```

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import { LinkProps as LinkProps$1 } from '@mui/material';
+import { SystemProps } from '@mui/system';
+
+type LinkProps = {
+    /** Url of the page the link goes to */
+    href: string;
+    /** format href to leverage loadApp within home iframe when relative url used.
+     *
+     * @default true */
+    loadApp?: boolean;
+    /** Where to open the linked document. Adds `OpenInNewIcon` when target is `_blank` */
+    target?: string;
+    /** Function to run onClick of the link. The first argument passed to onClick is the event. The second argument is the processed url. */
+    onClick?: (event: React.MouseEvent, url: string) => void;
+    children?: ReactNode;
+    rel?: string;
+} & Omit<LinkProps$1, 'underline' | 'noWrap' | 'variantMapping' | 'variant' | keyof SystemProps>;
+declare const Link: react.ForwardRefExoticComponent<Pick<LinkProps, keyof _mui_material_OverridableComponent.CommonProps | "children" | "sx" | "slot" | "title" | "id" | "lang" | "media" | "target" | "type" | "role" | "tabIndex" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "download" | "hrefLang" | "ping" | "rel" | "referrerPolicy" | "align" | "gutterBottom" | "paragraph" | "TypographyClasses" | "loadApp"> & react.RefAttributes<HTMLAnchorElement>>;
+
+export { Link, LinkProps };

package/dist/index.js

@@ -0,0 +1,226 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// node_modules/tsup/assets/cjs_shims.js
+var init_cjs_shims = __esm({
+  "node_modules/tsup/assets/cjs_shims.js"() {
+  }
+});
+
+// ../../node_modules/@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare.js
+var require_faArrowUpRightFromSquare = __commonJS({
+  "../../node_modules/@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare.js"(exports) {
+    "use strict";
+    init_cjs_shims();
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var prefix = "fas";
+    var iconName = "arrow-up-right-from-square";
+    var width = 512;
+    var height = 512;
+    var aliases = ["external-link"];
+    var unicode = "f08e";
+    var svgPathData = "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z";
+    exports.definition = {
+      prefix,
+      iconName,
+      icon: [
+        width,
+        height,
+        aliases,
+        unicode,
+        svgPathData
+      ]
+    };
+    exports.faArrowUpRightFromSquare = exports.definition;
+    exports.prefix = prefix;
+    exports.iconName = iconName;
+    exports.width = width;
+    exports.height = height;
+    exports.ligatures = aliases;
+    exports.unicode = unicode;
+    exports.svgPathData = svgPathData;
+    exports.aliases = aliases;
+  }
+});
+
+// ../../node_modules/@fortawesome/free-solid-svg-icons/faExternalLink.js
+var require_faExternalLink = __commonJS({
+  "../../node_modules/@fortawesome/free-solid-svg-icons/faExternalLink.js"(exports) {
+    "use strict";
+    init_cjs_shims();
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var source = require_faArrowUpRightFromSquare();
+    exports.definition = {
+      prefix: source.prefix,
+      iconName: source.iconName,
+      icon: [
+        source.width,
+        source.height,
+        source.aliases,
+        source.unicode,
+        source.svgPathData
+      ]
+    };
+    exports.faExternalLink = exports.definition;
+    exports.prefix = source.prefix;
+    exports.iconName = source.iconName;
+    exports.width = source.width;
+    exports.height = source.height;
+    exports.ligatures = source.aliases;
+    exports.unicode = source.unicode;
+    exports.svgPathData = source.svgPathData;
+    exports.aliases = source.aliases;
+  }
+});
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Link: () => Link
+});
+module.exports = __toCommonJS(src_exports);
+init_cjs_shims();
+
+// src/lib/Link.tsx
+init_cjs_shims();
+var import_react = require("react");
+var import_material2 = require("@mui/material");
+
+// ../icon/src/index.ts
+init_cjs_shims();
+
+// ../icon/src/lib/Icons/Actions.tsx
+init_cjs_shims();
+
+// ../icon/src/lib/FaSvgIcon.tsx
+init_cjs_shims();
+var React = __toESM(require("react"));
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FaSvgIcon = React.forwardRef((props, ref) => {
+  const { icon, ...svgProps } = props;
+  const {
+    icon: [width, height, , , svgPathData]
+  } = icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.SvgIcon, {
+    ref,
+    viewBox: `0 0 ${width} ${height}`,
+    ...svgProps,
+    children: typeof svgPathData === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+      d: svgPathData
+    }) : null
+  });
+});
+
+// ../icon/src/lib/Icons/Actions.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// ../icon/src/lib/Icons/Common.tsx
+init_cjs_shims();
+var import_faExternalLink = __toESM(require_faExternalLink());
+var import_jsx_runtime = require("react/jsx-runtime");
+var OpenInNewIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaSvgIcon, {
+  icon: import_faExternalLink.faExternalLink,
+  "aria-hidden": false,
+  titleAccess: "(opens in new window)",
+  ...props
+});
+
+// ../icon/src/lib/Icons/Files.tsx
+init_cjs_shims();
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// ../icon/src/lib/Icons/Form.tsx
+init_cjs_shims();
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// ../icon/src/lib/Icons/Navigation.tsx
+init_cjs_shims();
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// ../icon/src/lib/Icons/Payment.tsx
+init_cjs_shims();
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/lib/Link.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/;
+var WINDOWS_PATH_REGEX = /^[a-zA-Z]:\\/;
+function isAbsoluteUrl(url) {
+  if (WINDOWS_PATH_REGEX.test(url)) {
+    return false;
+  }
+  return ABSOLUTE_URL_REGEX.test(url);
+}
+var getUrl = (url = "") => {
+  return `/public/apps/home/#!/loadApp?appUrl=${encodeURIComponent(url)}`;
+};
+var getLocation = (href) => {
+  const location = document.createElement("a");
+  location.href = href;
+  return location;
+};
+var setRel = (url, target, absolute) => {
+  if (target === "_blank" && absolute) {
+    const dest = getLocation(url);
+    if (dest.hostname !== window.location.hostname) {
+      return "noopener noreferrer";
+    }
+  }
+  return void 0;
+};
+var Link = (0, import_react.forwardRef)((props, ref) => {
+  const { href, target = "_self", children, onClick, loadApp = true, rel, ...rest } = props;
+  const absolute = isAbsoluteUrl(href);
+  const encode = !(absolute || !loadApp);
+  const url = encode ? getUrl(href) : href;
+  const NewWindowIcon = target === "_blank" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpenInNewIcon, {}) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material2.Link, {
+    href: url,
+    target,
+    onClick: (event) => onClick && onClick(event, url),
+    rel: rel || setRel(url, target, absolute),
+    underline: "hover",
+    ...rest,
+    ref,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+      children: [
+        children,
+        " ",
+        NewWindowIcon
+      ]
+    })
+  });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Link
+});

package/dist/index.mjs

@@ -0,0 +1,214 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// node_modules/tsup/assets/esm_shims.js
+var init_esm_shims = __esm({
+  "node_modules/tsup/assets/esm_shims.js"() {
+  }
+});
+
+// ../../node_modules/@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare.js
+var require_faArrowUpRightFromSquare = __commonJS({
+  "../../node_modules/@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare.js"(exports) {
+    "use strict";
+    init_esm_shims();
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var prefix = "fas";
+    var iconName = "arrow-up-right-from-square";
+    var width = 512;
+    var height = 512;
+    var aliases = ["external-link"];
+    var unicode = "f08e";
+    var svgPathData = "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z";
+    exports.definition = {
+      prefix,
+      iconName,
+      icon: [
+        width,
+        height,
+        aliases,
+        unicode,
+        svgPathData
+      ]
+    };
+    exports.faArrowUpRightFromSquare = exports.definition;
+    exports.prefix = prefix;
+    exports.iconName = iconName;
+    exports.width = width;
+    exports.height = height;
+    exports.ligatures = aliases;
+    exports.unicode = unicode;
+    exports.svgPathData = svgPathData;
+    exports.aliases = aliases;
+  }
+});
+
+// ../../node_modules/@fortawesome/free-solid-svg-icons/faExternalLink.js
+var require_faExternalLink = __commonJS({
+  "../../node_modules/@fortawesome/free-solid-svg-icons/faExternalLink.js"(exports) {
+    "use strict";
+    init_esm_shims();
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var source = require_faArrowUpRightFromSquare();
+    exports.definition = {
+      prefix: source.prefix,
+      iconName: source.iconName,
+      icon: [
+        source.width,
+        source.height,
+        source.aliases,
+        source.unicode,
+        source.svgPathData
+      ]
+    };
+    exports.faExternalLink = exports.definition;
+    exports.prefix = source.prefix;
+    exports.iconName = source.iconName;
+    exports.width = source.width;
+    exports.height = source.height;
+    exports.ligatures = source.aliases;
+    exports.unicode = source.unicode;
+    exports.svgPathData = source.svgPathData;
+    exports.aliases = source.aliases;
+  }
+});
+
+// src/index.ts
+init_esm_shims();
+
+// src/lib/Link.tsx
+init_esm_shims();
+import { forwardRef as forwardRef2 } from "react";
+import { Link as MuiLink } from "@mui/material";
+
+// ../icon/src/index.ts
+init_esm_shims();
+
+// ../icon/src/lib/Icons/Actions.tsx
+init_esm_shims();
+
+// ../icon/src/lib/FaSvgIcon.tsx
+init_esm_shims();
+import * as React from "react";
+import { SvgIcon } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var FaSvgIcon = React.forwardRef((props, ref) => {
+  const { icon, ...svgProps } = props;
+  const {
+    icon: [width, height, , , svgPathData]
+  } = icon;
+  return /* @__PURE__ */ jsx(SvgIcon, {
+    ref,
+    viewBox: `0 0 ${width} ${height}`,
+    ...svgProps,
+    children: typeof svgPathData === "string" ? /* @__PURE__ */ jsx("path", {
+      d: svgPathData
+    }) : null
+  });
+});
+
+// ../icon/src/lib/Icons/Actions.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+
+// ../icon/src/lib/Icons/Common.tsx
+init_esm_shims();
+var import_faExternalLink = __toESM(require_faExternalLink());
+import { jsx as jsx3 } from "react/jsx-runtime";
+var OpenInNewIcon = ({ ...props }) => /* @__PURE__ */ jsx3(FaSvgIcon, {
+  icon: import_faExternalLink.faExternalLink,
+  "aria-hidden": false,
+  titleAccess: "(opens in new window)",
+  ...props
+});
+
+// ../icon/src/lib/Icons/Files.tsx
+init_esm_shims();
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// ../icon/src/lib/Icons/Form.tsx
+init_esm_shims();
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../icon/src/lib/Icons/Navigation.tsx
+init_esm_shims();
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// ../icon/src/lib/Icons/Payment.tsx
+init_esm_shims();
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// src/lib/Link.tsx
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/;
+var WINDOWS_PATH_REGEX = /^[a-zA-Z]:\\/;
+function isAbsoluteUrl(url) {
+  if (WINDOWS_PATH_REGEX.test(url)) {
+    return false;
+  }
+  return ABSOLUTE_URL_REGEX.test(url);
+}
+var getUrl = (url = "") => {
+  return `/public/apps/home/#!/loadApp?appUrl=${encodeURIComponent(url)}`;
+};
+var getLocation = (href) => {
+  const location = document.createElement("a");
+  location.href = href;
+  return location;
+};
+var setRel = (url, target, absolute) => {
+  if (target === "_blank" && absolute) {
+    const dest = getLocation(url);
+    if (dest.hostname !== window.location.hostname) {
+      return "noopener noreferrer";
+    }
+  }
+  return void 0;
+};
+var Link = forwardRef2((props, ref) => {
+  const { href, target = "_self", children, onClick, loadApp = true, rel, ...rest } = props;
+  const absolute = isAbsoluteUrl(href);
+  const encode = !(absolute || !loadApp);
+  const url = encode ? getUrl(href) : href;
+  const NewWindowIcon = target === "_blank" ? /* @__PURE__ */ jsx8(OpenInNewIcon, {}) : null;
+  return /* @__PURE__ */ jsx8(MuiLink, {
+    href: url,
+    target,
+    onClick: (event) => onClick && onClick(event, url),
+    rel: rel || setRel(url, target, absolute),
+    underline: "hover",
+    ...rest,
+    ref,
+    children: /* @__PURE__ */ jsxs("span", {
+      children: [
+        children,
+        " ",
+        NewWindowIcon
+      ]
+    })
+  });
+});
+export {
+  Link
+};

package/introduction.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/Link/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'link',
+  coverageDirectory: '../../coverage/link',
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@availity/mui-link",
+  "version": "0.1.0",
+  "description": "Availity MUI Link Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-link-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/link"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "bundlesize": "bundlesize",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.11.9",
+    "@mui/system": "^5.11.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "@mui/system": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-link",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/link/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "lintFilePatterns": ["packages/link/**/*.{js,ts}"],
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/link/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/link"],
+      "options": {
+        "jestConfig": "packages/link/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/${projectName}@"
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/Link';

package/src/lib/Link.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link, LinkProps } from './Link';
+
+/**
+ * Simple link component that renders an `<a>` tag with the href formatted to leverage loadApp so the link gets loaded inside the home page's iframe
+ */
+const meta: Meta<typeof Link> = {
+  title: 'Components/Link/Link',
+  component: Link,
+  tags: ['autodocs'],
+  args: {
+    href: '#',
+  },
+};
+
+export default meta;
+
+export const _Link: StoryObj<typeof Link> = {
+  render: (args: LinkProps) => <Link {...args} />,
+  args: {
+    loadApp: true,
+    children: 'This text is a child of Link',
+  },
+};
+
+/** The `OpenInNewIcon` has an accessible name to tell screenreaders that it opens in a new window.  */
+export const _NewWindow: StoryObj<typeof Link> = {
+  render: (args: LinkProps) => <Link {...args} loadApp={false} target="_blank" />,
+  args: {
+    children: 'Link opens in new window',
+  },
+};
+
+export const _AbsoluteUrl: StoryObj<typeof Link> = {
+  render: (args: LinkProps) => <Link {...args} href="https://github.com/Availity" target="_blank" />,
+  args: {
+    children: 'Availity Github',
+  },
+};
+
+/** Inspect the link to see the `loadApp` url transformation in action. */
+export const _RelativeUrl: StoryObj<typeof Link> = {
+  render: (args: LinkProps) => <Link {...args} href="/public/apps/portal-app" />,
+  args: {
+    children: 'Portal App',
+  },
+};

package/src/lib/Link.test.tsx

@@ -0,0 +1,93 @@
+import { render, fireEvent } from '@testing-library/react';
+import { Link } from './Link';
+
+describe('Link', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<Link href="#">Test</Link>);
+
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  test('should render absolute url', () => {
+    const { getByRole } = render(<Link href="https://github.com/Availity">Test</Link>);
+
+    const link = getByRole('link');
+
+    expect(link.getAttribute('href')).toBe('https://github.com/Availity');
+  });
+
+  test('should render formatted url when url prop is relative', () => {
+    const { getByRole } = render(<Link href="/public/apps/my-app">My App</Link>);
+
+    const link = getByRole('link');
+    const expected = '/public/apps/home/#!/loadApp?appUrl=%2Fpublic%2Fapps%2Fmy-app';
+
+    expect(link.getAttribute('href')).toBe(expected);
+  });
+
+  test('should render url prop as is when loadApp is false', () => {
+    const { getByRole } = render(
+      <Link loadApp={false} href="/public/apps/my-app">
+        My App
+      </Link>
+    );
+
+    const link = getByRole('link');
+    const expected = '/public/apps/my-app';
+
+    expect(link.getAttribute('href')).toBe(expected);
+  });
+
+  test('should default rel prop if none provided when linking to external site', () => {
+    const { getByRole } = render(
+      <Link loadApp={false} href="https://github.com/Availity" target="_blank">
+        Github
+      </Link>
+    );
+
+    const link = getByRole('link');
+    const expected = 'noopener noreferrer';
+
+    expect(link.getAttribute('rel')).toBe(expected);
+  });
+
+  test('should respect rel prop if provided when linking to external site', () => {
+    const { getByRole } = render(
+      <Link loadApp={false} href="https://github.com/Availity" target="_blank" rel="nofollow">
+        Github
+      </Link>
+    );
+
+    const link = getByRole('link');
+    const expected = 'nofollow';
+
+    expect(link.getAttribute('rel')).toBe(expected);
+  });
+
+  test('should call onClick', () => {
+    const onClick = jest.fn();
+
+    const { getByRole } = render(
+      <Link loadApp={false} href="/public/apps/my-app" onClick={onClick}>
+        My App
+      </Link>
+    );
+
+    const link = getByRole('link');
+    fireEvent.click(link);
+
+    expect(onClick.mock.calls[0][1]).toBe('/public/apps/my-app');
+  });
+
+  test('should render link with proper styling', () => {
+    const { getByRole } = render(
+      <Link href="/public/apps/my-app" className="card-link">
+        My App
+      </Link>
+    );
+
+    const link = getByRole('link');
+
+    expect(link.getAttribute('class')).toContain('card-link');
+  });
+});

package/src/lib/Link.tsx

@@ -0,0 +1,81 @@
+import { ReactNode, forwardRef } from 'react';
+import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material';
+import { SystemProps } from '@mui/system';
+import { OpenInNewIcon } from '@availity/mui-icon';
+
+// Scheme: https://tools.ietf.org/html/rfc3986#section-3.1
+// Absolute URL: https://tools.ietf.org/html/rfc3986#section-4.3
+const ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/;
+
+// Windows paths like `c:\`
+const WINDOWS_PATH_REGEX = /^[a-zA-Z]:\\/;
+
+function isAbsoluteUrl(url: string) {
+  if (WINDOWS_PATH_REGEX.test(url)) {
+    return false;
+  }
+
+  return ABSOLUTE_URL_REGEX.test(url);
+}
+
+// if absolute or loadApp is disabled, return url. otherwise loadappify the url
+const getUrl = (url = '') => {
+  return `/public/apps/home/#!/loadApp?appUrl=${encodeURIComponent(url)}`;
+};
+
+// takes href and transforms it so that we can compare hostnames and other properties
+const getLocation = (href: string) => {
+  const location = document.createElement('a');
+  location.href = href;
+  return location;
+};
+
+const setRel = (url: string, target: string, absolute: boolean) => {
+  if (target === '_blank' && absolute) {
+    const dest = getLocation(url);
+    if (dest.hostname !== window.location.hostname) {
+      // default rel when linking to external destinations for performance and security
+      return 'noopener noreferrer';
+    }
+  }
+  return undefined;
+};
+
+export type LinkProps = {
+  /** Url of the page the link goes to */
+  href: string;
+  /** format href to leverage loadApp within home iframe when relative url used.
+   *
+   * @default true */
+  loadApp?: boolean;
+  /** Where to open the linked document. Adds `OpenInNewIcon` when target is `_blank` */
+  target?: string;
+  /** Function to run onClick of the link. The first argument passed to onClick is the event. The second argument is the processed url. */
+  onClick?: (event: React.MouseEvent, url: string) => void;
+  children?: ReactNode;
+  rel?: string;
+} & Omit<MuiLinkProps, 'underline' | 'noWrap' | 'variantMapping' | 'variant' | keyof SystemProps>;
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  const { href, target = '_self', children, onClick, loadApp = true, rel, ...rest } = props;
+  const absolute = isAbsoluteUrl(href);
+  const encode = !(absolute || !loadApp);
+  const url = encode ? getUrl(href) : href;
+  const NewWindowIcon = target === '_blank' ? <OpenInNewIcon /> : null;
+
+  return (
+    <MuiLink
+      href={url}
+      target={target}
+      onClick={(event: React.MouseEvent) => onClick && onClick(event, url)}
+      rel={rel || setRel(url, target, absolute)}
+      underline="hover"
+      {...rest}
+      ref={ref}
+    >
+      <span>
+        {children} {NewWindowIcon}
+      </span>
+    </MuiLink>
+  );
+});

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}