@instructure/ui-link 11.6.0 → 11.6.1-snapshot-129

package/lib/Link/v2/index.js

@@ -0,0 +1,262 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Link = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _latest = require("@instructure/ui-view/latest");
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
+var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
+var _findFocusable = require("@instructure/ui-dom-utils/lib/findFocusable.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
+var _console = require("@instructure/console");
+var _renderIconWithProps = require("@instructure/ui-icons/lib/IconPropsProvider/renderIconWithProps.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["children", "onClick", "onMouseEnter", "color", "href", "margin", "renderIcon", "iconPlacement"];
+var _dec, _class, _Link;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+/**
+---
+category: components
+---
+**/
+let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Link = class Link extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      hasFocus: false
+    };
+    this.ref = null;
+    this.makeStyleProps = () => {
+      const _this$props = this.props,
+        variantProp = _this$props.variant,
+        sizeProp = _this$props.size;
+
+      // Handle deprecated variant values by mapping them to new variant + size props
+      let variant = variantProp;
+      let size = sizeProp;
+      if (variantProp === 'inline-small' || variantProp === 'standalone-small') {
+        (0, _console.logWarn)(false, `[Link] The variant value "${variantProp}" is deprecated. Use variant="${variantProp.replace('-small', '')}" with size="small" instead.`);
+        variant = variantProp.replace('-small', '');
+        // Only set size from deprecated variant if size prop is not explicitly provided
+        if (!sizeProp) {
+          size = 'small';
+        }
+      } else if ((variantProp === 'inline' || variantProp === 'standalone') && !sizeProp) {
+        // When using new variant values without explicit size, default to medium
+        // This maintains the old behavior where 'inline' and 'standalone' were medium-sized
+        size = 'medium';
+      }
+      return {
+        containsTruncateText: this.containsTruncateText,
+        hasVisibleChildren: this.hasVisibleChildren,
+        variant,
+        size
+      };
+    };
+    this.handleElementRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.handleClick = event => {
+      const onClick = this.props.onClick;
+      const interaction = this.interaction;
+      if (interaction === 'disabled') {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(event);
+      }
+    };
+    this.handleFocus = event => {
+      this.setState({
+        hasFocus: true
+      });
+      if (typeof this.props.onFocus === 'function') {
+        this.props.onFocus(event);
+      }
+    };
+    this.handleBlur = event => {
+      this.setState({
+        hasFocus: false
+      });
+      if (typeof this.props.onBlur === 'function') {
+        this.props.onBlur(event);
+      }
+    };
+  }
+  get _link() {
+    return this.ref;
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStyleProps());
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStyleProps());
+  }
+  get containsTruncateText() {
+    let truncateText = false;
+    _react.Children.forEach(this.props.children, child => {
+      if (child && (0, _matchComponentTypes.matchComponentTypes)(child, ['TruncateText'])) {
+        truncateText = true;
+      }
+    });
+    (0, _console.logWarn)(
+    // if display prop is used, warn about icon or TruncateText
+    !truncateText || this.props.display === void 0, '[Link] Using the display property with TruncateText may cause layout issues.');
+    return truncateText;
+  }
+  get display() {
+    if (this.props.display) {
+      return this.props.display; // user-entered display property
+    }
+    const containsTruncateText = this.containsTruncateText;
+    if (this.props.renderIcon) {
+      return containsTruncateText ? 'inline-flex' : 'inline-block';
+    } else {
+      return containsTruncateText ? 'block' : 'auto';
+    }
+  }
+  get interaction() {
+    return (0, _getInteraction.getInteraction)({
+      props: this.props,
+      interactionTypes: ['disabled']
+    });
+  }
+  get element() {
+    return (0, _getElementType.getElementType)(Link, this.props);
+  }
+  get focused() {
+    return (0, _isActiveElement.isActiveElement)(this.ref);
+  }
+  get focusable() {
+    return (0, _findFocusable.findFocusable)(this.ref);
+  }
+  get hasVisibleChildren() {
+    return (0, _hasVisibleChildren.hasVisibleChildren)(this.props.children);
+  }
+  get role() {
+    const _this$props4 = this.props,
+      role = _this$props4.role,
+      forceButtonRole = _this$props4.forceButtonRole,
+      onClick = _this$props4.onClick;
+    if (forceButtonRole) {
+      return onClick && this.element !== 'button' ? 'button' : role;
+    }
+    return role;
+  }
+  focus() {
+    this.ref && this.ref.focus();
+  }
+  renderIcon() {
+    var _this$props$styles;
+    const _this$props5 = this.props,
+      display = _this$props5.display,
+      renderIcon = _this$props5.renderIcon,
+      variantProp = _this$props5.variant,
+      sizeProp = _this$props5.size;
+    (0, _console.logWarn)(
+    // if display prop is used, warn about icon or TruncateText
+    display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
+
+    // Determine the actual size being used (considering deprecated variants)
+    let size = sizeProp;
+    if (variantProp === 'inline-small' || variantProp === 'standalone-small') {
+      size = sizeProp || 'small';
+    } else if ((variantProp === 'inline' || variantProp === 'standalone') && !sizeProp) {
+      size = 'medium';
+    }
+
+    // Map Link sizes to icon sizes
+    const linkSizeToIconSize = {
+      small: 'xs',
+      medium: 'sm',
+      large: 'lg'
+    };
+    const iconSize = linkSizeToIconSize[size || 'medium'];
+    return (0, _jsxRuntime.jsx)("span", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
+      children: (0, _renderIconWithProps.renderIconWithProps)(renderIcon, iconSize, void 0)
+    });
+  }
+  render() {
+    var _this$props$styles2;
+    const _this$props6 = this.props,
+      children = _this$props6.children,
+      onClick = _this$props6.onClick,
+      onMouseEnter = _this$props6.onMouseEnter,
+      color = _this$props6.color,
+      href = _this$props6.href,
+      margin = _this$props6.margin,
+      renderIcon = _this$props6.renderIcon,
+      iconPlacement = _this$props6.iconPlacement,
+      props = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
+    const interaction = this.interaction;
+    const isDisabled = interaction === 'disabled';
+    const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
+    const tabIndex = this.role === 'button' && !isDisabled ? 0 : void 0;
+    return (0, _jsxRuntime.jsxs)(_latest.View, {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      elementRef: this.handleElementRef,
+      as: this.element,
+      display: this.display,
+      margin: margin,
+      href: href,
+      onMouseEnter: onMouseEnter,
+      onClick: this.handleClick,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      "aria-disabled": isDisabled ? 'true' : void 0,
+      role: this.role,
+      type: type,
+      tabIndex: tabIndex,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link,
+      "data-cid": (0, _combineDataCid.combineDataCid)('Link', this.props),
+      children: [renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null]
+    });
+  }
+}, _Link.displayName = "Link", _Link.componentId = 'Link', _Link.allowedProps = _props.allowedProps, _Link.defaultProps = {
+  // Leave interaction default undefined so that `disabled` can also be supplied
+  interaction: void 0,
+  color: 'link',
+  iconPlacement: 'start',
+  forceButtonRole: true
+}, _Link)) || _class);
+var _default = exports.default = Link;

package/lib/Link/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+const allowedProps = exports.allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'role', 'forceButtonRole', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'onBlur', 'onClick', 'onFocus', 'onMouseEnter', 'size', 'variant'];

package/lib/Link/v2/styles.js

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens, state = {}) => {
+  var _state$size, _state$variant, _state$hasVisibleChil;
+  const renderIcon = props.renderIcon,
+    _props$iconPlacement = props.iconPlacement,
+    iconPlacement = _props$iconPlacement === void 0 ? 'start' : _props$iconPlacement,
+    color = props.color,
+    margin = props.margin;
+
+  // Get size and variant from state (passed from makeStyleProps) or fall back to props
+  const size = (_state$size = state.size) !== null && _state$size !== void 0 ? _state$size : props.size;
+  const variant = (_state$variant = state.variant) !== null && _state$variant !== void 0 ? _state$variant : props.variant;
+  const hasVisibleChildren = (_state$hasVisibleChil = state.hasVisibleChildren) !== null && _state$hasVisibleChil !== void 0 ? _state$hasVisibleChil : false;
+  const isInverseStyle = color === 'link-inverse';
+  const inlineLinkSizeStyles = {
+    small: {
+      fontFamily: componentTheme.inlineLink.small.fontFamily,
+      fontWeight: componentTheme.inlineLink.small.fontWeight,
+      fontSize: componentTheme.inlineLink.small.fontSize,
+      lineHeight: componentTheme.inlineLink.small.lineHeight,
+      textDecoration: componentTheme.inlineLink.small.textDecoration,
+      gap: componentTheme.gapSm
+    },
+    medium: {
+      fontFamily: componentTheme.inlineLink.medium.fontFamily,
+      fontWeight: componentTheme.inlineLink.medium.fontWeight,
+      fontSize: componentTheme.inlineLink.medium.fontSize,
+      lineHeight: componentTheme.inlineLink.medium.lineHeight,
+      textDecoration: componentTheme.inlineLink.medium.textDecoration,
+      gap: componentTheme.gapMd
+    },
+    large: {
+      fontFamily: componentTheme.inlineLink.large.fontFamily,
+      fontWeight: componentTheme.inlineLink.large.fontWeight,
+      fontSize: componentTheme.inlineLink.large.fontSize,
+      lineHeight: componentTheme.inlineLink.large.lineHeight,
+      textDecoration: componentTheme.inlineLink.large.textDecoration,
+      gap: componentTheme.gapLg
+    }
+  };
+
+  // For standalone variant, use the base component theme tokens
+  const standaloneLinkSizeStyles = {
+    small: {
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      fontSize: componentTheme.fontSizeSm,
+      lineHeight: componentTheme.lineHeightSm,
+      textDecoration: 'none',
+      gap: componentTheme.gapSm
+    },
+    medium: {
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      fontSize: componentTheme.fontSizeMd,
+      lineHeight: componentTheme.lineHeightMd,
+      textDecoration: 'none',
+      gap: componentTheme.gapMd
+    },
+    large: {
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      fontSize: componentTheme.fontSizeLg,
+      lineHeight: componentTheme.lineHeightLg,
+      textDecoration: 'none',
+      gap: componentTheme.gapLg
+    }
+  };
+
+  // Get proper styles based on variant and size
+  let variantStyles;
+  if (size && variant === 'inline') {
+    variantStyles = inlineLinkSizeStyles[size];
+  } else if (size && variant === 'standalone') {
+    variantStyles = standaloneLinkSizeStyles[size];
+  } else if (size) {
+    // Fallback if variant is not specified but size is
+    variantStyles = standaloneLinkSizeStyles[size];
+  } else {
+    // No size provided, use inherit
+    variantStyles = {
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      textDecoration: void 0,
+      gap: componentTheme.gapMd // Default gap for icons when no size is specified
+    };
+  }
+  const baseStyles = {
+    boxSizing: 'border-box',
+    fontFamily: componentTheme.fontFamily,
+    fontWeight: componentTheme.fontWeight,
+    verticalAlign: 'baseline',
+    fontSize: variantStyles.fontSize,
+    lineHeight: variantStyles.lineHeight,
+    color: componentTheme.unstyledTextColor,
+    // set up focus styles
+    borderRadius: '0.125rem',
+    // If icon is present, use flex to align icon with text
+    // Use 'flex' for standalone variant (block-level), 'inline-flex' for inline variant
+    ...(renderIcon && hasVisibleChildren && {
+      display: variant === 'standalone' ? 'flex' : 'inline-flex',
+      alignItems: 'baseline'
+    }),
+    '&[aria-disabled]': {
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      opacity: '1',
+      color: componentTheme.textDisabledColor
+    }
+  };
+
+  // If Link is a button or link, it should look clickable
+  const isClickableStyles = {
+    ...baseStyles,
+    cursor: 'pointer',
+    color: componentTheme.textColor,
+    fontSize: variantStyles.fontSize,
+    lineHeight: variantStyles.lineHeight,
+    ...(variantStyles.fontFamily && {
+      fontFamily: variantStyles.fontFamily
+    }),
+    ...(variantStyles.fontWeight && {
+      fontWeight: variantStyles.fontWeight
+    }),
+    '&:hover, &:active, &:focus': {
+      color: componentTheme.textHoverColor,
+      // a11y requirement: interactive links must be underlined on interaction
+      textDecoration: 'underline'
+    },
+    // Use textDecoration from variantStyles if available (from inlineLink token), otherwise fallback
+    ...(variantStyles.textDecoration ? {
+      textDecoration: variantStyles.textDecoration
+    } : {
+      textDecoration: 'underline'
+    })
+  };
+  const buttonStyle = {
+    appearance: 'none',
+    userSelect: 'text',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    margin: 0,
+    padding: 0,
+    textAlign: 'inherit',
+    fontSize: variantStyles.fontSize,
+    lineHeight: variantStyles.lineHeight,
+    ...(variantStyles.textDecoration && {
+      textDecoration: variantStyles.textDecoration
+    })
+  };
+  const inverseStyles = {
+    color: componentTheme.onColorTextColor,
+    // TODO remove double (here with the util and in View) focus ring calculations
+    // in the future after the View refactor is complete
+    // This needs stronger specificity than `View`
+    '&&&&&:focus': {
+      outlineColor: sharedTokens.focusOutline.onColor
+    },
+    '&:hover, &:active': {
+      color: componentTheme.onColorTextHoverColor
+    },
+    '&[aria-disabled]': {
+      color: componentTheme.onColorTextDisabledColor
+    }
+  };
+
+  // Icon styles based on size - use gap from variantStyles
+  const iconStyles = {
+    paddingInlineStart: iconPlacement === 'start' ? 0 : variantStyles.gap || componentTheme.gapMd,
+    paddingInlineEnd: iconPlacement === 'start' ? variantStyles.gap || componentTheme.gapMd : 0
+  };
+  return {
+    link: {
+      label: 'link',
+      ...baseStyles,
+      // TODO handle the merging on tokens inside the util
+      margin: (0, _emotion.calcSpacingFromShorthand)(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      }),
+      ...(0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline, isInverseStyle ? {
+        focusColor: 'inverse'
+      } : void 0),
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(a), &:is(button)': isClickableStyles,
+      '&:-webkit-any(a), &:-webkit-any(button)': isClickableStyles,
+      '&:is(button)': buttonStyle,
+      '&:-webkit-any(button)': buttonStyle,
+      ...(isInverseStyle && {
+        ...inverseStyles,
+        '&:is(a):link, &:is(a):visited, &:is(button)': inverseStyles,
+        '&:-webkit-any(a):link, &:-webkit-any(a):visited, &:-webkit-any(button)': inverseStyles
+      })
+    },
+    icon: {
+      label: 'icon',
+      ...(renderIcon && {
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignSelf: 'center',
+        ...iconStyles
+      })
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: function () {
-    return _Link.Link;
+    return _v.Link;
   }
 });
-var _Link = require("./Link");
+var _v = require("../Link/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _v.Link;
+  }
+});
+var _v = require("../Link/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-link",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A component for creating links",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-a11y-utils": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/console": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -43,17 +43,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",