@kaizen/components 1.72.0 → 1.73.1

package/codemods/upgradeV1Buttons/upgradeV1Buttons.ts

@@ -0,0 +1,93 @@
+import ts from 'typescript'
+import {
+  createJsxElementWithChildren,
+  getKaioTagName,
+  setImportToAdd,
+  setImportToRemove,
+  updateKaioImports,
+  type TagImportAttributesMap,
+  type UpdateKaioImportsArgs,
+} from '../utils'
+import { transformV1ButtonAttributes } from './transformV1ButtonAttributes'
+
+const V1_BUTTONS = ['Button', 'IconButton']
+const V1_BUTTONS_IMPORT_SOURCE = [
+  '@kaizen/components',
+  '@kaizen/components/v1/actions',
+  '@kaizen/components/v2/actions',
+]
+const BUTTON_IMPORT_DESTINATION = '@kaizen/components/next'
+const LINKBUTTON_IMPORT_DESTINATION = '@kaizen/components'
+
+export const upgradeV1Buttons =
+  (tagsMap: TagImportAttributesMap): ts.TransformerFactory<ts.SourceFile> =>
+  (context) =>
+  (rootNode) => {
+    const importsToRemove: UpdateKaioImportsArgs['importsToRemove'] = new Map()
+    const importsToAdd: UpdateKaioImportsArgs['importsToAdd'] = new Map()
+
+    const importedTargetButtonTagName = getKaioTagName(
+      rootNode,
+      'Button',
+      BUTTON_IMPORT_DESTINATION,
+    )
+
+    const importedTargetLinkButtonTagName = getKaioTagName(
+      rootNode,
+      'LinkButton',
+      LINKBUTTON_IMPORT_DESTINATION,
+    )
+
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxSelfClosingElement(node)) {
+        const tagName = node.tagName.getText()
+        const tagImportAttributes = tagsMap.get(tagName)
+
+        if (!tagImportAttributes) return node
+
+        if (!V1_BUTTONS.includes(tagImportAttributes.originalName)) return node
+        if (!V1_BUTTONS_IMPORT_SOURCE.includes(tagImportAttributes.importModuleName)) return node
+
+        const { targetComponentName, newAttributes, childrenValue } = transformV1ButtonAttributes(
+          node,
+          tagImportAttributes.originalName,
+        )
+
+        const targetTagName =
+          targetComponentName === 'Button'
+            ? (importedTargetButtonTagName ?? 'Button')
+            : (importedTargetLinkButtonTagName ?? 'LinkButton')
+
+        setImportToRemove(
+          importsToRemove,
+          tagImportAttributes.importModuleName,
+          tagImportAttributes.originalName,
+        )
+
+        if (targetComponentName === 'Button' && !importedTargetButtonTagName) {
+          setImportToAdd(importsToAdd, BUTTON_IMPORT_DESTINATION, {
+            componentName: 'Button',
+            alias:
+              importedTargetButtonTagName !== 'Button' ? importedTargetButtonTagName : undefined,
+          })
+        }
+
+        if (targetComponentName === 'LinkButton' && !importedTargetLinkButtonTagName) {
+          setImportToAdd(importsToAdd, LINKBUTTON_IMPORT_DESTINATION, {
+            componentName: 'LinkButton',
+            alias:
+              importedTargetLinkButtonTagName !== 'LinkButton'
+                ? importedTargetLinkButtonTagName
+                : undefined,
+          })
+        }
+
+        return createJsxElementWithChildren(targetTagName, newAttributes, childrenValue)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+
+    const node = ts.visitNode(rootNode, visit)
+
+    return updateKaioImports({ importsToRemove, importsToAdd })(context)(node as ts.SourceFile)
+  }

package/codemods/utils/createJsxElementWithChildren.spec.ts

@@ -0,0 +1,119 @@
+import ts from 'typescript'
+import { parseJsx } from '../__tests__/utils'
+import { createJsxElementWithChildren } from './createJsxElementWithChildren'
+import { printAst } from './printAst'
+import { transformSource, type TransformSourceArgs } from './transformSource'
+
+export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
+  const visit = (node: ts.Node): ts.Node => {
+    let childrenValue: ts.JsxAttributeValue | undefined
+
+    if (ts.isJsxSelfClosingElement(node)) {
+      const tagName = node.tagName.getText()
+      const attributes = node.attributes.properties.reduce<ts.JsxAttributeLike[]>((acc, attr) => {
+        if (ts.isJsxAttribute(attr) && attr.name.getText() === 'toChildren') {
+          childrenValue = attr.initializer
+          return acc
+        }
+
+        acc.push(attr)
+        return acc
+      }, [])
+
+      return createJsxElementWithChildren(tagName, attributes, childrenValue)
+    }
+    return ts.visitEachChild(node, visit, context)
+  }
+  return ts.visitNode(rootNode, visit) as ts.SourceFile
+}
+
+const testCreateJsxElementWithChildren = (sourceFile: TransformSourceArgs['sourceFile']): string =>
+  transformSource({ sourceFile, transformers: [mockedTransformer] })
+
+describe('createJsxElementWithChildren()', () => {
+  it('transforms a string value', () => {
+    const inputAst = parseJsx('<Button toChildren="Hello" variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary">Hello</Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a string in brackets', () => {
+    const inputAst = parseJsx(`
+      <>
+        <Button toChildren={"Double quotes"} variant="primary" />
+        <Button toChildren={'Single quotes'} variant="primary" />
+      </>
+    `)
+    const outputAst = parseJsx(`
+      <>
+        <Button variant="primary">Double quotes</Button>
+        <Button variant="primary">Single quotes</Button>
+      </>
+    `)
+    // const outputAst = parseJsx('<Button variant="primary">Hello</Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a string with comments in brackets', () => {
+    const inputAst = parseJsx(`<Button
+      toChildren={
+        "Hello" // comment
+      }
+      variant="primary" />
+    `)
+    const outputAst = parseJsx(`<Button variant="primary">{
+      "Hello" // comment
+    }</Button>`)
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a template literal with variables', () => {
+    /* eslint-disable no-template-curly-in-string */
+    const inputAst = parseJsx('<Button toChildren={`Hello ${name}`} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary">{`Hello ${name}`}</Button>')
+    /* eslint-enable no-template-curly-in-string */
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a variable', () => {
+    const inputAst = parseJsx('<Button toChildren={childrenVar} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary">{childrenVar}</Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a ternary', () => {
+    const inputAst = parseJsx(
+      '<Button toChildren={isPancake ? "Pancake" : "Waffle"} variant="primary" />',
+    )
+    const outputAst = parseJsx(
+      '<Button variant="primary">{isPancake ? "Pancake" : "Waffle"}</Button>',
+    )
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a JSX element', () => {
+    const inputAst = parseJsx('<Button toChildren={<span>Hello</span>} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary"><span>Hello</span></Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a JSX self-closing element', () => {
+    const inputAst = parseJsx('<Button toChildren={<Icon />} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary"><Icon /></Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('transforms a JSX fragment', () => {
+    const inputAst = parseJsx('<Button toChildren={<>Hello</>} variant="primary" />')
+    const outputAst = parseJsx('<Button variant="primary"><>Hello</></Button>')
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('adds a comment if no value for children has been passed in', () => {
+    const inputAst = parseJsx('<Button variant="primary" />')
+    const outputAst = parseJsx(`<Button variant="primary">
+/* @todo Children required but a value was not found during the codemod */
+</Button>`)
+    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/utils/createJsxElementWithChildren.ts

@@ -0,0 +1,55 @@
+import ts from 'typescript'
+
+const createJsxChildren = (childrenValue: ts.JsxAttributeValue): ts.JsxChild => {
+  if (ts.isStringLiteral(childrenValue)) {
+    return ts.factory.createJsxText(childrenValue.text)
+  }
+
+  if (ts.isJsxExpression(childrenValue)) {
+    const value = childrenValue.expression
+
+    if (value) {
+      if (ts.isStringLiteral(value)) {
+        // Tests for {"string"}, {'string'}
+        const regexExpContainsOnlyQuotedString = new RegExp(/^\{(["']).*(\1)\}$/g)
+
+        if (regexExpContainsOnlyQuotedString.test(childrenValue.getFullText())) {
+          return ts.factory.createJsxText(value.text)
+        }
+      }
+
+      if (ts.isJsxElement(value) || ts.isJsxSelfClosingElement(value) || ts.isJsxFragment(value)) {
+        return value
+      }
+    }
+
+    return childrenValue
+  }
+
+  return childrenValue
+}
+
+/**
+ * Use this to replace a self-closing JSX element to a JSX element with children
+ */
+export const createJsxElementWithChildren = (
+  tagName: string,
+  attributes: ts.JsxAttributeLike[],
+  childrenValue: ts.JsxAttributeValue | undefined,
+): ts.JsxElement => {
+  const tagNameId = ts.factory.createIdentifier(tagName)
+  const fallbackChildren = [
+    ts.factory.createJsxText('\n'),
+    ts.factory.createJsxText(
+      '/* @todo Children required but a value was not found during the codemod */',
+    ),
+    ts.factory.createJsxText('\n'),
+  ]
+  const children = childrenValue ? [createJsxChildren(childrenValue)] : fallbackChildren
+
+  return ts.factory.createJsxElement(
+    ts.factory.createJsxOpeningElement(tagNameId, [], ts.factory.createJsxAttributes(attributes)),
+    children,
+    ts.factory.createJsxClosingElement(tagNameId),
+  )
+}

package/codemods/utils/createProp.spec.ts

@@ -1,32 +1,88 @@
 import ts from 'typescript'
 import { parseJsx } from '../__tests__/utils/parseJsx'
-import { createStyleProp } from './createProp'
+import { createProp, createStyleProp } from './createProp'
 import { printAst } from './printAst'
 import { transformSource, type TransformSourceArgs } from './transformSource'
 import { updateJsxElementWithNewProps } from './updateJsxElementWithNewProps'
 
-export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
+export const mockTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
   const visit = (node: ts.Node): ts.Node => {
     if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
-      if (node.tagName.getText() === 'Pancakes') {
-        const newAttributes = node.attributes.properties.map((attr) => {
-          if (ts.isJsxAttribute(attr)) {
-            if (attr.name.getText() === 'replaceWithExistingValue') {
-              return createStyleProp({ width: attr.initializer! })
-            }
+      const newAttributes = node.attributes.properties.map((attr) => {
+        if (ts.isJsxAttribute(attr)) {
+          return createProp(`${attr.name.getText()}New`, attr.initializer)
+        }
+        return attr
+      })
+      return updateJsxElementWithNewProps(node, newAttributes)
+    }
+    return ts.visitEachChild(node, visit, context)
+  }
+  return ts.visitNode(rootNode, visit) as ts.SourceFile
+}
+
+const testCreateProp = (sourceFile: TransformSourceArgs['sourceFile']): string =>
+  transformSource({
+    sourceFile,
+    transformers: [mockTransformer],
+  })
+
+describe('createProp()', () => {
+  it('creates a prop with the pre-existing value', () => {
+    const inputAst = parseJsx('<Pancakes isBoolean={false} />')
+    const outputAst = parseJsx('<Pancakes isBooleanNew={false} />')
+    expect(testCreateProp(inputAst)).toEqual(printAst(outputAst))
+  })
 
-            if (attr.name.getText() === 'replaceWithStringValue') {
-              return createStyleProp({ width: '100px' })
-            }
+  it('creates a prop and transforms true to undefined', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Pancakes isBoolean />
+          <Pancakes isBoolean={false} />
+          <Pancakes stringProp="Hello" />
+          <Pancakes stringVarProp={stringVar} />
+          <Pancakes numberProp={3} />
+          <Pancakes objProp={{ key: 'value' }} />
+        </>
+      )
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Pancakes isBooleanNew />
+          <Pancakes isBooleanNew={false} />
+          <Pancakes stringPropNew="Hello" />
+          <Pancakes stringVarPropNew={stringVar} />
+          <Pancakes numberPropNew={3} />
+          <Pancakes objPropNew={{ key: 'value' }} />
+        </>
+      )
+    `)
+    expect(testCreateProp(inputAst)).toEqual(printAst(outputAst))
+  })
+})
+
+export const styleTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
+  const visit = (node: ts.Node): ts.Node => {
+    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+      const newAttributes = node.attributes.properties.map((attr) => {
+        if (ts.isJsxAttribute(attr)) {
+          if (attr.name.getText() === 'replaceWithExistingValue') {
+            return createStyleProp({ width: attr.initializer! })
+          }
+
+          if (attr.name.getText() === 'replaceWithStringValue') {
+            return createStyleProp({ width: '100px' })
+          }
 
-            if (attr.name.getText() === 'replaceWithNumberValue') {
-              return createStyleProp({ width: 100 })
-            }
+          if (attr.name.getText() === 'replaceWithNumberValue') {
+            return createStyleProp({ width: 100 })
           }
-          return attr
-        })
-        return updateJsxElementWithNewProps(node, newAttributes)
-      }
+        }
+        return attr
+      })
+      return updateJsxElementWithNewProps(node, newAttributes)
     }
     return ts.visitEachChild(node, visit, context)
   }
@@ -36,7 +92,7 @@ export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context)
 const testCreateStyleProp = (sourceFile: TransformSourceArgs['sourceFile']): string =>
   transformSource({
     sourceFile,
-    transformers: [mockedTransformer],
+    transformers: [styleTransformer],
   })
 
 describe('createStyleProp()', () => {

package/codemods/utils/createProp.ts

@@ -3,7 +3,14 @@ import ts from 'typescript'
 export const createProp = (
   name: string,
   value?: ts.JsxAttributeValue | undefined,
-): ts.JsxAttribute => ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), value)
+): ts.JsxAttribute => {
+  // Transforms `propName={true}` to `propName`
+  if (value && ts.isJsxExpression(value) && value.expression?.kind === ts.SyntaxKind.TrueKeyword) {
+    return ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), undefined)
+  }
+
+  return ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), value)
+}
 
 export const createStringProp = (name: string, value: string): ts.JsxAttribute =>
   createProp(name, ts.factory.createStringLiteral(value))

package/codemods/utils/getKaioTagName.ts

@@ -5,10 +5,17 @@ type ImportModuleNamedImports = {
   namedImports: ts.NodeArray<ts.ImportSpecifier>
 }
 
-const getKaioNamedImports = (visitedNode: ts.Node): ImportModuleNamedImports | undefined => {
+const getKaioNamedImports = (
+  visitedNode: ts.Node,
+  importSource?: string,
+): ImportModuleNamedImports | undefined => {
   if (ts.isImportDeclaration(visitedNode)) {
     const moduleSpecifier = (visitedNode.moduleSpecifier as ts.StringLiteral).text
-    if (moduleSpecifier.includes('@kaizen/components')) {
+    const hasMatch = importSource
+      ? moduleSpecifier === importSource
+      : moduleSpecifier.includes('@kaizen/components')
+
+    if (hasMatch) {
       const namedBindings = visitedNode.importClause?.namedBindings
       if (namedBindings && ts.isNamedImports(namedBindings)) {
         return {
@@ -42,12 +49,13 @@ const getNamesFromSpecifier = (importSpecifier: ts.ImportSpecifier): ImportSpeci
  */
 export const getKaioTagName = (
   node: ts.Node,
-  importSpecifierTarget: string,
+  componentName: string,
+  importSource?: string,
 ): string | undefined => {
   let alias: string | undefined
 
   const visitNode = (visitedNode: ts.Node): string | undefined => {
-    const kaioNamedImports = getKaioNamedImports(visitedNode)
+    const kaioNamedImports = getKaioNamedImports(visitedNode, importSource)
 
     if (!kaioNamedImports) {
       return ts.forEachChild(visitedNode, visitNode)
@@ -56,7 +64,7 @@ export const getKaioTagName = (
     kaioNamedImports.namedImports.find((importSpecifier) => {
       const { tagName, originalName } = getNamesFromSpecifier(importSpecifier)
 
-      if (originalName === importSpecifierTarget) {
+      if (originalName === componentName) {
         alias = tagName
         return true
       }

package/codemods/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './createJsxElementWithChildren'
 export * from './createProp'
 export * from './getPropValueText'
 export * from './getKaioTagName'

package/dist/cjs/Link/Link.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeClassNames = require('../utils/mergeClassNames.cjs');
+var LinkContent = require('./subcomponents/LinkContent.cjs');
+var Link_module = require('./Link.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Link = React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === undefined ? 'primary' : _b,
+    _c = _a.size,
+    size = _c === undefined ? 'body' : _c,
+    icon = _a.icon,
+    _d = _a.iconPosition,
+    iconPosition = _d === undefined ? 'end' : _d,
+    _e = _a.isInline,
+    isInline = _e === undefined ? false : _e,
+    isDisabled = _a.isDisabled,
+    className = _a.className,
+    _f = _a.isUnderlined,
+    isUnderlined = _f === undefined ? true : _f,
+    otherProps = tslib.__rest(_a, ["children", "variant", "size", "icon", "iconPosition", "isInline", "isDisabled", "className", "isUnderlined"]);
+  var childIsFunction = typeof children === 'function';
+  return React__default.default.createElement(reactAriaComponents.Link, tslib.__assign({
+    ref: ref,
+    className: mergeClassNames.mergeClassNames(Link_module.link, isDisabled && Link_module.isDisabled, isInline ? Link_module.isInline : Link_module[size], Link_module[variant], className),
+    isDisabled: isDisabled
+  }, otherProps), function (racStateProps) {
+    return React__default.default.createElement(LinkContent.LinkContent, {
+      icon: icon,
+      iconPosition: iconPosition,
+      isUnderlined: isUnderlined
+    }, childIsFunction ? children(racStateProps) : children);
+  });
+});
+Link.displayName = 'Link';
+exports.Link = Link;

package/dist/cjs/Link/Link.module.css.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var styles = {
+  "link": "Link-module_link__8oxip",
+  "isUnderlined": "Link-module_isUnderlined__qvbtS",
+  "icon": "Link-module_icon__CXh2J",
+  "iconStart": "Link-module_iconStart__ZysGR",
+  "iconEnd": "Link-module_iconEnd__-DTiD",
+  "primary": "Link-module_primary__bmhX0",
+  "secondary": "Link-module_secondary__pyYIV",
+  "isInline": "Link-module_isInline__sznAm",
+  "extra-small": "Link-module_extra-small__nScM0",
+  "body": "Link-module_body__H4Jgj",
+  "intro-lede": "Link-module_intro-lede__38Y6J",
+  "small": "Link-module_small__4kJcR",
+  "white": "Link-module_white__qQr6q",
+  "isDisabled": "Link-module_isDisabled__gvLNv",
+  "reversed": "Link-module_reversed__IqX8B"
+};
+module.exports = styles;

package/dist/cjs/Link/subcomponents/LinkContent.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var mergeClassNames = require('../../utils/mergeClassNames.cjs');
+var Link_module = require('../Link.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var LinkIcon = function (_a) {
+  var icon = _a.icon;
+  return React__default.default.createElement("span", {
+    className: Link_module.icon
+  }, icon);
+};
+var LinkContent = function (_a) {
+  var children = _a.children,
+    icon = _a.icon,
+    iconPosition = _a.iconPosition,
+    isUnderlined = _a.isUnderlined;
+  var iconPositionStyling = iconPosition === 'start' ? Link_module.iconStart : Link_module.iconEnd;
+  return React__default.default.createElement("span", {
+    className: mergeClassNames.mergeClassNames(Link_module.linkContent, isUnderlined && Link_module.isUnderlined)
+  }, icon && iconPosition === 'start' && React__default.default.createElement(LinkIcon, {
+    icon: icon
+  }), React__default.default.createElement("span", {
+    className: mergeClassNames.mergeClassNames(icon && iconPositionStyling)
+  }, children), icon && iconPosition === 'end' && React__default.default.createElement(LinkIcon, {
+    icon: icon
+  }));
+};
+exports.LinkContent = LinkContent;

package/dist/cjs/index.cjs

@@ -318,6 +318,7 @@ var InputSearch = require('./Input/InputSearch/InputSearch.cjs');
 var KaizenProvider = require('./KaizenProvider/KaizenProvider.cjs');
 var Label = require('./Label/Label.cjs');
 var LabelledMessage = require('./LabelledMessage/LabelledMessage.cjs');
+var Link = require('./Link/Link.cjs');
 var LikertScaleLegacy = require('./LikertScaleLegacy/LikertScaleLegacy.cjs');
 var LinkButton = require('./LinkButton/LinkButton.cjs');
 var LoadingGraphic = require('./Loading/LoadingGraphic/LoadingGraphic.cjs');
@@ -941,6 +942,7 @@ exports.InputSearch = InputSearch.InputSearch;
 exports.KaizenProvider = KaizenProvider.KaizenProvider;
 exports.Label = Label.Label;
 exports.LabelledMessage = LabelledMessage.LabelledMessage;
+exports.Link = Link.Link;
 exports.LikertScaleLegacy = LikertScaleLegacy.LikertScaleLegacy;
 exports.LinkButton = LinkButton.LinkButton;
 exports.LoadingGraphic = LoadingGraphic.LoadingGraphic;

package/dist/cjs/utilitiesV3.cjs

@@ -318,6 +318,7 @@ var InputSearch = require('./Input/InputSearch/InputSearch.cjs');
 var KaizenProvider = require('./KaizenProvider/KaizenProvider.cjs');
 var Label = require('./Label/Label.cjs');
 var LabelledMessage = require('./LabelledMessage/LabelledMessage.cjs');
+var Link = require('./Link/Link.cjs');
 var LikertScaleLegacy = require('./LikertScaleLegacy/LikertScaleLegacy.cjs');
 var LinkButton = require('./LinkButton/LinkButton.cjs');
 var LoadingGraphic = require('./Loading/LoadingGraphic/LoadingGraphic.cjs');
@@ -941,6 +942,7 @@ exports.InputSearch = InputSearch.InputSearch;
 exports.KaizenProvider = KaizenProvider.KaizenProvider;
 exports.Label = Label.Label;
 exports.LabelledMessage = LabelledMessage.LabelledMessage;
+exports.Link = Link.Link;
 exports.LikertScaleLegacy = LikertScaleLegacy.LikertScaleLegacy;
 exports.LinkButton = LinkButton.LinkButton;
 exports.LoadingGraphic = LoadingGraphic.LoadingGraphic;

package/dist/esm/Link/Link.mjs

@@ -0,0 +1,40 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { Link as Link$1 } from 'react-aria-components';
+import { mergeClassNames } from '../utils/mergeClassNames.mjs';
+import { LinkContent } from './subcomponents/LinkContent.mjs';
+import styles from './Link.module.css.mjs';
+const Link = /*#__PURE__*/function () {
+  const Link = /*#__PURE__*/forwardRef(function (_a, ref) {
+    var children = _a.children,
+      _b = _a.variant,
+      variant = _b === undefined ? 'primary' : _b,
+      _c = _a.size,
+      size = _c === undefined ? 'body' : _c,
+      icon = _a.icon,
+      _d = _a.iconPosition,
+      iconPosition = _d === undefined ? 'end' : _d,
+      _e = _a.isInline,
+      isInline = _e === undefined ? false : _e,
+      isDisabled = _a.isDisabled,
+      className = _a.className,
+      _f = _a.isUnderlined,
+      isUnderlined = _f === undefined ? true : _f,
+      otherProps = __rest(_a, ["children", "variant", "size", "icon", "iconPosition", "isInline", "isDisabled", "className", "isUnderlined"]);
+    var childIsFunction = typeof children === 'function';
+    return /*#__PURE__*/React.createElement(Link$1, __assign({
+      ref: ref,
+      className: mergeClassNames(styles.link, isDisabled && styles.isDisabled, isInline ? styles.isInline : styles[size], styles[variant], className),
+      isDisabled: isDisabled
+    }, otherProps), function (racStateProps) {
+      return /*#__PURE__*/React.createElement(LinkContent, {
+        icon: icon,
+        iconPosition: iconPosition,
+        isUnderlined: isUnderlined
+      }, childIsFunction ? children(racStateProps) : children);
+    });
+  });
+  Link.displayName = 'Link';
+  return Link;
+}();
+export { Link };

package/dist/esm/Link/Link.module.css.mjs

@@ -0,0 +1,18 @@
+var styles = {
+  "link": "Link-module_link__8oxip",
+  "isUnderlined": "Link-module_isUnderlined__qvbtS",
+  "icon": "Link-module_icon__CXh2J",
+  "iconStart": "Link-module_iconStart__ZysGR",
+  "iconEnd": "Link-module_iconEnd__-DTiD",
+  "primary": "Link-module_primary__bmhX0",
+  "secondary": "Link-module_secondary__pyYIV",
+  "isInline": "Link-module_isInline__sznAm",
+  "extra-small": "Link-module_extra-small__nScM0",
+  "body": "Link-module_body__H4Jgj",
+  "intro-lede": "Link-module_intro-lede__38Y6J",
+  "small": "Link-module_small__4kJcR",
+  "white": "Link-module_white__qQr6q",
+  "isDisabled": "Link-module_isDisabled__gvLNv",
+  "reversed": "Link-module_reversed__IqX8B"
+};
+export { styles as default };