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

package/es/Link/v2/index.js

@@ -0,0 +1,253 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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.
+ */
+
+import { Children, Component } from 'react';
+import { View } from '@instructure/ui-view/latest';
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
+import { isActiveElement, findFocusable } from '@instructure/ui-dom-utils';
+import { getElementType, getInteraction, matchComponentTypes, passthroughProps } from '@instructure/ui-react-utils';
+import { combineDataCid } from '@instructure/ui-utils';
+import { logWarn as warn } from '@instructure/console';
+import { renderIconWithProps } from '@instructure/ui-icons';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let Link = (_dec = withStyle(generateStyle), _dec(_class = (_Link = class Link extends 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') {
+        warn(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;
+    Children.forEach(this.props.children, child => {
+      if (child && matchComponentTypes(child, ['TruncateText'])) {
+        truncateText = true;
+      }
+    });
+    warn(
+    // 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 getInteraction({
+      props: this.props,
+      interactionTypes: ['disabled']
+    });
+  }
+  get element() {
+    return getElementType(Link, this.props);
+  }
+  get focused() {
+    return isActiveElement(this.ref);
+  }
+  get focusable() {
+    return findFocusable(this.ref);
+  }
+  get hasVisibleChildren() {
+    return 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;
+    warn(
+    // 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 _jsx("span", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
+      children: 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 = _objectWithoutProperties(_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 _jsxs(View, {
+      ...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": 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 = 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);
+export default Link;
+export { Link };

package/es/Link/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['children', 'href', 'color', 'elementRef', 'as', 'role', 'forceButtonRole', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'onBlur', 'onClick', 'onFocus', 'onMouseEnter', 'size', 'variant'];
+export { allowedProps };

package/es/Link/v2/styles.js

@@ -0,0 +1,242 @@
+/*
+ * 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.
+ */
+
+import { calcFocusOutlineStyles, calcSpacingFromShorthand } from '@instructure/emotion';
+/**
+ * ---
+ * 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: calcSpacingFromShorthand(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      }),
+      ...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
+      })
+    }
+  };
+};
+export default generateStyle;

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

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Link } from "./Link/index.js";
+export { Link } from "../Link/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,6 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export { Link } from './Link'
-export type { LinkProps } from './Link/props'
+export { Link } from "../Link/v2/index.js";

package/lib/Link/{index.js → v1/index.js}

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Link = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-view/v11_6");
 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");
@@ -53,7 +53,7 @@ var _dec, _class, _Link;
 category: components
 ---
 **/
-let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Link = class Link extends _react.Component {
+let Link = exports.Link = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Link = class Link extends _react.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -192,7 +192,7 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     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)(_View.View, {
+    return (0, _jsxRuntime.jsxs)(_v11_.View, {
       ...(0, _passthroughProps.passthroughProps)(props),
       elementRef: this.handleElementRef,
       as: this.element,