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

package/es/Tag/v2/index.js

@@ -0,0 +1,163 @@
+var _dec, _class, _Tag;
+/*
+ * 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 { Component } from 'react';
+import { XInstUIIcon } from '@instructure/ui-icons';
+import { View } from '@instructure/ui-view/latest';
+import { omitProps } from '@instructure/ui-react-utils';
+import { isActiveElement } from '@instructure/ui-dom-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let Tag = (_dec = withStyle(generateStyle), _dec(_class = (_Tag = class Tag extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      iconHovered: false
+    };
+    this.ref = null;
+    this.focus = () => {
+      this.ref && this.ref.focus();
+    };
+    this.handleIconMouseEnter = () => {
+      this.setState({
+        iconHovered: true
+      });
+    };
+    this.handleIconMouseLeave = () => {
+      this.setState({
+        iconHovered: false
+      });
+    };
+    this.handleClick = e => {
+      const _this$props = this.props,
+        disabled = _this$props.disabled,
+        readOnly = _this$props.readOnly,
+        onClick = _this$props.onClick;
+      if (disabled || readOnly) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
+    this.handleRef = element => {
+      this.ref = element;
+      if (typeof this.props.elementRef === 'function') {
+        this.props.elementRef(element);
+      }
+    };
+    this.getIconSize = () => {
+      const _this$props2 = this.props,
+        size = _this$props2.size,
+        variant = _this$props2.variant;
+      if (variant === 'inline') {
+        return 'xs';
+      }
+      const sizeMap = {
+        small: 'xs',
+        medium: 'sm',
+        large: 'md'
+      };
+      return sizeMap[size];
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+  }
+  get focused() {
+    return isActiveElement(this.ref);
+  }
+  render() {
+    const _this$props5 = this.props,
+      className = _this$props5.className,
+      dismissible = _this$props5.dismissible,
+      disabled = _this$props5.disabled,
+      readOnly = _this$props5.readOnly,
+      text = _this$props5.text,
+      title = _this$props5.title,
+      onClick = _this$props5.onClick,
+      margin = _this$props5.margin,
+      styles = _this$props5.styles,
+      variant = _this$props5.variant;
+    const passthroughProps = View.omitViewProps(omitProps(this.props, Tag.allowedProps), Tag);
+    const getIconColor = () => {
+      if (disabled) {
+        return 'mutedColor';
+      }
+      if (variant === 'inline') {
+        return 'inverseColor';
+      }
+      return this.state.iconHovered ? 'actionSecondaryHoverColor' : 'baseColor';
+    };
+    return _jsxs(View, {
+      ...passthroughProps,
+      elementRef: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.tag,
+      className: className,
+      as: onClick ? 'button' : 'span',
+      margin: margin,
+      type: onClick ? 'button' : void 0,
+      ...(onClick && {
+        onClick: this.handleClick
+      }),
+      disabled: disabled || readOnly,
+      display: void 0,
+      title: title || (typeof text === 'string' ? text : void 0),
+      "data-cid": "Tag",
+      onMouseEnter: this.handleIconMouseEnter,
+      onMouseLeave: this.handleIconMouseLeave,
+      children: [_jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.text,
+        children: text
+      }), onClick && dismissible ? _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: _jsx(XInstUIIcon, {
+          size: this.getIconSize(),
+          color: getIconColor()
+        })
+      }) : null]
+    });
+  }
+}, _Tag.displayName = "Tag", _Tag.componentId = 'Tag', _Tag.allowedProps = allowedProps, _Tag.defaultProps = {
+  size: 'medium',
+  dismissible: false,
+  variant: 'default',
+  disabled: false,
+  readOnly: false
+}, _Tag)) || _class);
+export default Tag;
+export { Tag };

package/es/Tag/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 = ['className', 'text', 'title', 'disabled', 'readOnly', 'dismissible', 'margin', 'onClick', 'elementRef', 'size', 'variant'];
+export { allowedProps };

package/es/Tag/v2/styles.js

@@ -0,0 +1,208 @@
+/*
+ * 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 } 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 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) => {
+  const variant = props.variant,
+    size = props.size,
+    dismissible = props.dismissible,
+    onClick = props.onClick,
+    disabled = props.disabled;
+  const isButton = !!onClick;
+  const sizeVariants = {
+    small: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontalSmall,
+        paddingRight: componentTheme.paddingHorizontalSmall,
+        fontSize: componentTheme.fontSizeSmall
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightSmall} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    },
+    medium: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontal,
+        paddingRight: componentTheme.paddingHorizontal,
+        fontSize: `calc(${componentTheme.fontSizeMedium} - 0.0625rem)`
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightMedium} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    },
+    large: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontalSmall,
+        paddingRight: componentTheme.paddingHorizontal,
+        fontSize: `calc(${componentTheme.fontSizeLarge} - 0.0625rem)`
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightLarge} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    }
+  };
+  const buttonVariant = isButton ? {
+    tag: {
+      touchAction: 'manipulation',
+      outline: 'none',
+      position: 'relative',
+      overflow: 'visible',
+      transition: `background-color ${componentTheme.transitionTiming}`,
+      ...(!dismissible && {
+        cursor: 'pointer'
+      }),
+      '&:focus': {
+        '&::before': {
+          opacity: 1,
+          transform: 'scale(1)'
+        }
+      },
+      ...(disabled && {
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        opacity: 0.5
+      })
+    },
+    tagBefore: {
+      content: '""',
+      boxSizing: 'border-box',
+      border: calcFocusOutlineStyles(sharedTokens.focusOutline),
+      position: 'absolute',
+      top: '-0.3125rem',
+      bottom: '-0.3125rem',
+      left: '-0.3125rem',
+      right: '-0.3125rem',
+      opacity: 0,
+      transform: 'scale(0.9)',
+      transition: `all ${componentTheme.transitionTiming}`,
+      pointerEvents: 'none'
+    }
+  } : {};
+  const tagVariantVariants = {
+    default: {
+      tag: {
+        backgroundColor: componentTheme.defaultBackground,
+        border: `${componentTheme.defaultBorderWidth} ${componentTheme.defaultBorderStyle} ${componentTheme.defaultBorderColor}`,
+        borderRadius: componentTheme.defaultBorderRadius,
+        color: componentTheme.defaultColor,
+        ...(isButton && {
+          '&:hover': {
+            backgroundColor: componentTheme.defaultBackgroundHover
+          }
+        })
+      },
+      tagBefore: {
+        ...(isButton && {
+          borderRadius: componentTheme.defaultBorderRadius
+        })
+      }
+    },
+    inline: {
+      tag: {
+        backgroundColor: componentTheme.inlineBackground,
+        border: `${componentTheme.inlineBorderWidth} ${componentTheme.inlineBorderStyle} ${componentTheme.inlineBorderColor}`,
+        borderRadius: componentTheme.inlineBorderRadius,
+        color: componentTheme.inlineColor,
+        cursor: 'text',
+        margin: '0 0.1875rem 0.1875rem',
+        ...(isButton && {
+          '&:hover': {
+            backgroundColor: componentTheme.inlineBackgroundHover
+          }
+        })
+      },
+      tagBefore: {
+        ...(isButton && {
+          borderRadius: `calc(${componentTheme.inlineBorderRadius} * 1.5)`
+        })
+      }
+    }
+  };
+  const inlineIconVariant = variant === 'inline' && dismissible ? {
+    backgroundColor: componentTheme.inlineIconColor,
+    borderRadius: '50%',
+    padding: '0.25rem',
+    position: 'absolute',
+    insetInlineEnd: 0,
+    insetInlineStart: 'auto',
+    top: 0,
+    transform: 'translate(40%, -40%)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '[class$="-tag"]:hover > &': {
+      backgroundColor: componentTheme.inlineIconHoverColor
+    },
+    '[dir="rtl"] &': {
+      transform: 'translate(-40%, -40%)'
+    }
+  } : {};
+  return {
+    tag: {
+      label: 'tag',
+      boxSizing: 'border-box',
+      fontFamily: componentTheme.fontFamily,
+      display: 'inline-flex',
+      alignItems: 'center',
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      userSelect: 'none',
+      ...sizeVariants[size].tag,
+      ...buttonVariant.tag,
+      ...tagVariantVariants[variant].tag,
+      '&::before': {
+        ...buttonVariant.tagBefore,
+        ...tagVariantVariants[variant].tagBefore
+      }
+    },
+    text: {
+      label: 'tag__text',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: componentTheme.maxWidth,
+      ...sizeVariants[size].text
+    },
+    icon: {
+      label: 'tag__icon',
+      marginInlineStart: componentTheme.iconMargin,
+      marginInlineEnd: 0,
+      transition: `all ${componentTheme.transitionTiming}`,
+      cursor: 'pointer',
+      ...inlineIconVariant
+    }
+  };
+};
+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 { Tag } from "./Tag/index.js";
+export { Tag } from "../Tag/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 { Tag } from './Tag'
-export type { TagProps } from './Tag/props'
+export { Tag } from "../Tag/v2/index.js";

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Tag = void 0;
 var _react = require("react");
-var _IconXLine = require("@instructure/ui-icons/lib/IconXLine.js");
-var _View = require("@instructure/ui-view/lib/View");
+var _IconXLine = require("@instructure/ui-icons/lib/generated/IconXLine.js");
+var _v11_ = require("@instructure/ui-view/v11_6");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 var _emotion = require("@instructure/emotion");
@@ -44,7 +44,7 @@ var _dec, _class, _Tag;
 category: components
 ---
 **/
-let Tag = exports.Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Tag = class Tag extends _react.Component {
+let Tag = exports.Tag = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Tag = class Tag extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -92,8 +92,8 @@ let Tag = exports.Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       onClick = _this$props4.onClick,
       margin = _this$props4.margin,
       styles = _this$props4.styles;
-    const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Tag.allowedProps), Tag);
-    return (0, _jsxRuntime.jsxs)(_View.View, {
+    const passthroughProps = _v11_.View.omitViewProps((0, _omitProps.omitProps)(this.props, Tag.allowedProps), Tag);
+    return (0, _jsxRuntime.jsxs)(_v11_.View, {
       ...passthroughProps,
       elementRef: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.tag,

package/lib/Tag/v2/index.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tag = void 0;
+var _react = require("react");
+var _uiIcons = require("@instructure/ui-icons");
+var _latest = require("@instructure/ui-view/latest");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _Tag;
+/*
+ * 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 Tag = exports.Tag = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Tag = class Tag extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      iconHovered: false
+    };
+    this.ref = null;
+    this.focus = () => {
+      this.ref && this.ref.focus();
+    };
+    this.handleIconMouseEnter = () => {
+      this.setState({
+        iconHovered: true
+      });
+    };
+    this.handleIconMouseLeave = () => {
+      this.setState({
+        iconHovered: false
+      });
+    };
+    this.handleClick = e => {
+      const _this$props = this.props,
+        disabled = _this$props.disabled,
+        readOnly = _this$props.readOnly,
+        onClick = _this$props.onClick;
+      if (disabled || readOnly) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
+    this.handleRef = element => {
+      this.ref = element;
+      if (typeof this.props.elementRef === 'function') {
+        this.props.elementRef(element);
+      }
+    };
+    this.getIconSize = () => {
+      const _this$props2 = this.props,
+        size = _this$props2.size,
+        variant = _this$props2.variant;
+      if (variant === 'inline') {
+        return 'xs';
+      }
+      const sizeMap = {
+        small: 'xs',
+        medium: 'sm',
+        large: 'md'
+      };
+      return sizeMap[size];
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+  }
+  get focused() {
+    return (0, _isActiveElement.isActiveElement)(this.ref);
+  }
+  render() {
+    const _this$props5 = this.props,
+      className = _this$props5.className,
+      dismissible = _this$props5.dismissible,
+      disabled = _this$props5.disabled,
+      readOnly = _this$props5.readOnly,
+      text = _this$props5.text,
+      title = _this$props5.title,
+      onClick = _this$props5.onClick,
+      margin = _this$props5.margin,
+      styles = _this$props5.styles,
+      variant = _this$props5.variant;
+    const passthroughProps = _latest.View.omitViewProps((0, _omitProps.omitProps)(this.props, Tag.allowedProps), Tag);
+    const getIconColor = () => {
+      if (disabled) {
+        return 'mutedColor';
+      }
+      if (variant === 'inline') {
+        return 'inverseColor';
+      }
+      return this.state.iconHovered ? 'actionSecondaryHoverColor' : 'baseColor';
+    };
+    return (0, _jsxRuntime.jsxs)(_latest.View, {
+      ...passthroughProps,
+      elementRef: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.tag,
+      className: className,
+      as: onClick ? 'button' : 'span',
+      margin: margin,
+      type: onClick ? 'button' : void 0,
+      ...(onClick && {
+        onClick: this.handleClick
+      }),
+      disabled: disabled || readOnly,
+      display: void 0,
+      title: title || (typeof text === 'string' ? text : void 0),
+      "data-cid": "Tag",
+      onMouseEnter: this.handleIconMouseEnter,
+      onMouseLeave: this.handleIconMouseLeave,
+      children: [(0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.text,
+        children: text
+      }), onClick && dismissible ? (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: (0, _jsxRuntime.jsx)(_uiIcons.XInstUIIcon, {
+          size: this.getIconSize(),
+          color: getIconColor()
+        })
+      }) : null]
+    });
+  }
+}, _Tag.displayName = "Tag", _Tag.componentId = 'Tag', _Tag.allowedProps = _props.allowedProps, _Tag.defaultProps = {
+  size: 'medium',
+  dismissible: false,
+  variant: 'default',
+  disabled: false,
+  readOnly: false
+}, _Tag)) || _class);
+var _default = exports.default = Tag;

package/lib/Tag/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 = ['className', 'text', 'title', 'disabled', 'readOnly', 'dismissible', 'margin', 'onClick', 'elementRef', 'size', 'variant'];