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

package/es/Badge/v2/index.js

@@ -0,0 +1,145 @@
+var _dec, _dec2, _class, _Badge;
+/*
+ * 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, Children } from 'react';
+import { View } from '@instructure/ui-view/latest';
+import { safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
+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 Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_Badge = class Badge extends Component {
+  constructor(props) {
+    super(props);
+    this._defaultId = void 0;
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this._defaultId = this.props.deterministicId();
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  countOverflow() {
+    const _this$props3 = this.props,
+      count = _this$props3.count,
+      countUntil = _this$props3.countUntil;
+    return countUntil && count && countUntil > 1 && count >= countUntil;
+  }
+  renderOutput() {
+    const _this$props4 = this.props,
+      count = _this$props4.count,
+      countUntil = _this$props4.countUntil,
+      formatOverflowText = _this$props4.formatOverflowText,
+      formatOutput = _this$props4.formatOutput,
+      type = _this$props4.type;
+
+    // If the badge count is >= than the countUntil limit, format the badge text
+    // via the formatOverflowText function prop
+    let formattedCount = (count || '').toString();
+    if (count && countUntil && formatOverflowText && type === 'count' && this.countOverflow()) {
+      formattedCount = formatOverflowText(count, countUntil);
+    }
+    if (typeof formatOutput === 'function') {
+      return formatOutput(formattedCount);
+    } else {
+      return type === 'count' ? formattedCount : null;
+    }
+  }
+  renderBadge() {
+    const _this$props5 = this.props,
+      count = _this$props5.count,
+      margin = _this$props5.margin,
+      standalone = _this$props5.standalone,
+      type = _this$props5.type,
+      styles = _this$props5.styles;
+    return _jsx(View, {
+      margin: standalone ? margin : 'none',
+      css: styles === null || styles === void 0 ? void 0 : styles.badge,
+      title: type === 'count' && this.countOverflow() ? count === null || count === void 0 ? void 0 : count.toString() : '',
+      id: !standalone ? this._defaultId : void 0,
+      display: standalone ? 'inline-block' : 'block',
+      ...(standalone && {
+        elementRef: this.handleRef,
+        'data-cid': 'Badge'
+      }),
+      children: this.renderOutput()
+    });
+  }
+  renderChildren() {
+    return Children.map(this.props.children, child => {
+      return safeCloneElement(child, {
+        'aria-describedby': this._defaultId
+      });
+    });
+  }
+  render() {
+    const _this$props6 = this.props,
+      margin = _this$props6.margin,
+      standalone = _this$props6.standalone,
+      display = _this$props6.display,
+      as = _this$props6.as,
+      styles = _this$props6.styles;
+    if (standalone) {
+      return this.renderBadge();
+    } else {
+      return _jsxs(View, {
+        as: as,
+        margin: margin,
+        elementRef: this.handleRef,
+        css: styles === null || styles === void 0 ? void 0 : styles.wrapper,
+        display: display,
+        "data-cid": "Badge",
+        children: [this.renderChildren(), this.renderBadge()]
+      });
+    }
+  }
+}, _Badge.displayName = "Badge", _Badge.componentId = 'Badge', _Badge.allowedProps = allowedProps, _Badge.defaultProps = {
+  standalone: false,
+  type: 'count',
+  variant: 'primary',
+  display: 'inline-block',
+  pulse: false,
+  placement: 'top end',
+  elementRef: () => {},
+  formatOverflowText: (_count, countUntil) => `${countUntil - 1} +`
+}, _Badge)) || _class) || _class);
+export default Badge;
+export { Badge };

package/es/Badge/v2/props.js

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+// <unknown is needed for React 17 support
+
+const allowedProps = ['count', 'countUntil', 'children', 'type', 'standalone', 'pulse', 'variant', 'placement', 'display', 'margin', 'elementRef', 'formatOverflowText', 'formatOutput', 'as'];
+export { allowedProps };

package/es/Badge/v2/styles.js

@@ -0,0 +1,220 @@
+/*
+ * 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 { keyframes } from '@instructure/emotion';
+// keyframes have to be outside of 'generateStyle',
+// since it is causing problems in style recalculation
+const pulseAnimation = keyframes`
+  to {
+    transform: scale(1);
+    opacity: 0.9;
+  }`;
+
+/**
+ * ---
+ * 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} 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) => {
+  const type = props.type,
+    variant = props.variant,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? '' : _props$placement,
+    standalone = props.standalone,
+    pulse = props.pulse;
+  const top = placement.indexOf('top') > -1;
+  const bottom = placement.indexOf('bottom') > -1;
+  const start = placement.indexOf('start') > -1;
+  const end = placement.indexOf('end') > -1;
+  const center = placement.indexOf('center') > -1;
+  const variants = {
+    danger: {
+      badge: {
+        color: componentTheme.color,
+        backgroundColor: componentTheme.colorDanger
+      },
+      pulseBorder: {
+        borderColor: componentTheme.colorDanger
+      }
+    },
+    success: {
+      badge: {
+        color: componentTheme.color,
+        backgroundColor: componentTheme.colorSuccess
+      },
+      pulseBorder: {
+        borderColor: componentTheme.colorSuccess
+      }
+    },
+    primary: {
+      badge: {
+        color: componentTheme.color,
+        backgroundColor: componentTheme.colorPrimary
+      },
+      pulseBorder: {
+        borderColor: componentTheme.colorPrimary
+      }
+    },
+    inverse: {
+      // text and background colors are swapped
+      badge: {
+        color: componentTheme.colorInverse,
+        backgroundColor: componentTheme.color
+      },
+      pulseBorder: {
+        borderColor: componentTheme.color
+      }
+    }
+  };
+  const countPositions = {
+    ...(top && {
+      top: `calc(-1 * ${componentTheme.countOffset})`
+    }),
+    ...(bottom && {
+      bottom: `calc(-1 * ${componentTheme.countOffset})`
+    }),
+    ...(start && {
+      insetInlineStart: `calc(-1 * ${componentTheme.countOffset})`,
+      insetInlineEnd: 'auto'
+    }),
+    ...(end && {
+      insetInlineEnd: `calc(-1 * ${componentTheme.countOffset})`,
+      insetInlineStart: 'auto'
+    }),
+    ...(center && {
+      ...((end || start) && {
+        top: `calc(50% - (${componentTheme.size} / 2))`
+      }),
+      ...(start && {
+        insetInlineStart: 'auto',
+        insetInlineEnd: `calc(100% - ${componentTheme.countOffset})`
+      }),
+      ...(end && {
+        insetInlineEnd: 'auto',
+        insetInlineStart: `calc(100% - ${componentTheme.countOffset})`
+      })
+    })
+  };
+  const notificationPositions = {
+    ...(top && {
+      top: componentTheme.notificationOffset
+    }),
+    ...(bottom && {
+      bottom: componentTheme.notificationOffset
+    }),
+    ...(start && {
+      insetInlineStart: componentTheme.notificationOffset,
+      insetInlineEnd: 'auto'
+    }),
+    ...(end && {
+      insetInlineEnd: componentTheme.notificationOffset,
+      insetInlineStart: 'auto'
+    }),
+    ...(center && {
+      ...((end || start) && {
+        top: `calc(50% - (${componentTheme.sizeNotification} / 2))`
+      }),
+      ...(start && {
+        insetInlineStart: `calc(-1 * ${componentTheme.sizeNotification} / 2)`,
+        insetInlineEnd: 'auto'
+      }),
+      ...(end && {
+        insetInlineEnd: `calc(-1 * ${componentTheme.sizeNotification} / 2)`,
+        insetInlineStart: 'auto'
+      })
+    })
+  };
+  const notStandaloneTypeVariant = {
+    count: countPositions,
+    notification: notificationPositions
+  };
+  const typeVariant = {
+    count: {
+      lineHeight: componentTheme.size,
+      minWidth: componentTheme.size,
+      paddingInlineStart: componentTheme.padding,
+      paddingInlineEnd: componentTheme.padding
+    },
+    notification: {
+      width: componentTheme.sizeNotification,
+      height: componentTheme.sizeNotification
+    }
+  };
+  return {
+    badge: {
+      label: 'badge',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      boxSizing: 'border-box',
+      pointerEvents: 'none',
+      textAlign: 'center',
+      fontSize: componentTheme.fontSize,
+      whiteSpace: 'nowrap',
+      borderRadius: componentTheme.borderRadius,
+      ...variants[variant].badge,
+      ...(pulse && {
+        position: 'relative',
+        '&::before': {
+          content: '""',
+          width: 'calc(100% + 0.5rem)',
+          height: 'calc(100% + 0.5rem)',
+          borderRadius: componentTheme.borderRadius,
+          position: 'absolute',
+          top: '-0.25rem',
+          insetInlineEnd: 'auto',
+          insetInlineStart: '-0.25rem',
+          boxSizing: 'border-box',
+          border: `${componentTheme.pulseBorderThickness} solid`,
+          opacity: 0,
+          transform: 'scale(0.75)',
+          animationName: pulseAnimation,
+          animationDuration: '1s',
+          animationIterationCount: '4',
+          animationDirection: 'alternate',
+          ...variants[variant].pulseBorder
+        }
+      }),
+      ...typeVariant[type],
+      ...(!standalone && {
+        position: 'absolute',
+        zIndex: componentTheme.notificationZIndex,
+        ...notStandaloneTypeVariant[type]
+      })
+    },
+    wrapper: {
+      label: 'badge__wrapper',
+      position: 'relative',
+      boxSizing: 'border-box',
+      svg: {
+        display: 'block'
+      }
+    }
+  };
+};
+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 { Badge } from "./Badge/index.js";
+export { Badge } from "../Badge/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 { Badge } from './Badge'
-export type { BadgeProps } from './Badge/props'
+export { Badge } from "../Badge/v2/index.js";

package/lib/Badge/v1/index.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Badge = void 0;
+var _react = require("react");
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _dec2, _class, _Badge;
+/*
+ * 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 Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Badge = class Badge extends _react.Component {
+  constructor(props) {
+    super(props);
+    this._defaultId = void 0;
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this._defaultId = this.props.deterministicId();
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  countOverflow() {
+    const _this$props3 = this.props,
+      count = _this$props3.count,
+      countUntil = _this$props3.countUntil;
+    return countUntil && count && countUntil > 1 && count >= countUntil;
+  }
+  renderOutput() {
+    const _this$props4 = this.props,
+      count = _this$props4.count,
+      countUntil = _this$props4.countUntil,
+      formatOverflowText = _this$props4.formatOverflowText,
+      formatOutput = _this$props4.formatOutput,
+      type = _this$props4.type;
+
+    // If the badge count is >= than the countUntil limit, format the badge text
+    // via the formatOverflowText function prop
+    let formattedCount = (count || '').toString();
+    if (count && countUntil && formatOverflowText && type === 'count' && this.countOverflow()) {
+      formattedCount = formatOverflowText(count, countUntil);
+    }
+    if (typeof formatOutput === 'function') {
+      return formatOutput(formattedCount);
+    } else {
+      return type === 'count' ? formattedCount : null;
+    }
+  }
+  renderBadge() {
+    const _this$props5 = this.props,
+      count = _this$props5.count,
+      margin = _this$props5.margin,
+      standalone = _this$props5.standalone,
+      type = _this$props5.type,
+      styles = _this$props5.styles;
+    return (0, _jsxRuntime.jsx)(_v11_.View, {
+      margin: standalone ? margin : 'none',
+      css: styles === null || styles === void 0 ? void 0 : styles.badge,
+      title: type === 'count' && this.countOverflow() ? count === null || count === void 0 ? void 0 : count.toString() : '',
+      id: !standalone ? this._defaultId : void 0,
+      display: standalone ? 'inline-block' : 'block',
+      ...(standalone && {
+        elementRef: this.handleRef,
+        'data-cid': 'Badge'
+      }),
+      children: this.renderOutput()
+    });
+  }
+  renderChildren() {
+    return _react.Children.map(this.props.children, child => {
+      return (0, _safeCloneElement.safeCloneElement)(child, {
+        'aria-describedby': this._defaultId
+      });
+    });
+  }
+  render() {
+    const _this$props6 = this.props,
+      margin = _this$props6.margin,
+      standalone = _this$props6.standalone,
+      display = _this$props6.display,
+      as = _this$props6.as,
+      styles = _this$props6.styles;
+    if (standalone) {
+      return this.renderBadge();
+    } else {
+      return (0, _jsxRuntime.jsxs)(_v11_.View, {
+        as: as,
+        margin: margin,
+        elementRef: this.handleRef,
+        css: styles === null || styles === void 0 ? void 0 : styles.wrapper,
+        display: display,
+        "data-cid": "Badge",
+        children: [this.renderChildren(), this.renderBadge()]
+      });
+    }
+  }
+}, _Badge.displayName = "Badge", _Badge.componentId = 'Badge', _Badge.allowedProps = _props.allowedProps, _Badge.defaultProps = {
+  standalone: false,
+  type: 'count',
+  variant: 'primary',
+  display: 'inline-block',
+  pulse: false,
+  placement: 'top end',
+  elementRef: () => {},
+  formatOverflowText: (_count, countUntil) => `${countUntil - 1} +`
+}, _Badge)) || _class) || _class);
+var _default = exports.default = Badge;

package/lib/Badge/{index.js → v2/index.js}

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Badge = void 0;
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
+var _latest = require("@instructure/ui-view/latest");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class, _Badge;
@@ -43,7 +42,7 @@ var _dec, _dec2, _class, _Badge;
 category: components
 ---
 **/
-let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Badge = class Badge extends _react.Component {
+let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_Badge = class Badge extends _react.Component {
   constructor(props) {
     super(props);
     this._defaultId = void 0;
@@ -98,7 +97,7 @@ let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId
       standalone = _this$props5.standalone,
       type = _this$props5.type,
       styles = _this$props5.styles;
-    return (0, _jsxRuntime.jsx)(_View.View, {
+    return (0, _jsxRuntime.jsx)(_latest.View, {
       margin: standalone ? margin : 'none',
       css: styles === null || styles === void 0 ? void 0 : styles.badge,
       title: type === 'count' && this.countOverflow() ? count === null || count === void 0 ? void 0 : count.toString() : '',
@@ -128,7 +127,7 @@ let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId
     if (standalone) {
       return this.renderBadge();
     } else {
-      return (0, _jsxRuntime.jsxs)(_View.View, {
+      return (0, _jsxRuntime.jsxs)(_latest.View, {
         as: as,
         margin: margin,
         elementRef: this.handleRef,

package/lib/Badge/v2/props.js

@@ -0,0 +1,33 @@
+"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.
+ */
+
+// <unknown is needed for React 17 support
+
+const allowedProps = exports.allowedProps = ['count', 'countUntil', 'children', 'type', 'standalone', 'pulse', 'variant', 'placement', 'display', 'margin', 'elementRef', 'formatOverflowText', 'formatOutput', 'as'];