@instructure/ui-pill 8.8.1-snapshot.3 → 8.8.1-snapshot.63

package/es/Pill/index.js

@@ -29,21 +29,21 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { View } from '@instructure/ui-view';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { TruncateText } from '@instructure/ui-truncate-text';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion';
+import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-
+import { allowedProps, propTypes } from './props';
 /**
 ---
 category: components
 ---
 **/
+
 let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pill extends Component {
   constructor(props) {
     super(props);
@@ -53,11 +53,15 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  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);
   }
 
   handleTruncation(truncated) {
@@ -69,15 +73,15 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   renderPill(focused, getTriggerProps) {
-    const _this$props = this.props,
-          margin = _this$props.margin,
-          children = _this$props.children,
-          color = _this$props.color,
-          as = _this$props.as,
-          elementRef = _this$props.elementRef,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          margin = _this$props3.margin,
+          children = _this$props3.children,
+          color = _this$props3.color,
+          as = _this$props3.as,
+          elementRef = _this$props3.elementRef,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     const filteredProps = passthroughProps(props);
     const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
@@ -86,7 +90,7 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       elementRef: elementRef,
       margin: margin,
       padding: "0",
-      maxWidth: styles.maxWidth,
+      maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
       background: "transparent",
       borderRadius: "pill",
       borderWidth: "0",
@@ -95,9 +99,9 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       withFocusOutline: focused,
       focusColor: "info"
     }), jsx("span", {
-      css: styles.pill
+      css: styles === null || styles === void 0 ? void 0 : styles.pill
     }, jsx("span", {
-      css: styles.text
+      css: styles === null || styles === void 0 ? void 0 : styles.text
     }, jsx(TruncateText, {
       onUpdate: truncated => {
         this.handleTruncation(truncated);
@@ -120,27 +124,7 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     }
   }
 
-}, _class2.displayName = "Pill", _class2.componentId = 'Pill', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-  as: PropTypes.elementType,
-  // eslint-disable-line react/require-default-props
-  children: PropTypes.node.isRequired,
-  color: PropTypes.oneOf(['primary', 'success', 'danger', 'info', 'warning', 'alert']),
-  elementRef: PropTypes.func,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
-  margin: ThemeablePropTypes.spacing
-}, _class2.defaultProps = {
-  children: void 0,
-  margin: void 0,
-  elementRef: void 0,
+}, _class2.displayName = "Pill", _class2.componentId = 'Pill', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   color: 'primary'
 }, _temp)) || _class) || _class);
 export default Pill;

package/{src/Pill/types.ts → es/Pill/props.js}

@@ -21,15 +21,21 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import PropTypes from 'prop-types';
+import { ThemeablePropTypes } from '@instructure/emotion';
+const propTypes = {
+  as: PropTypes.elementType,
+  // eslint-disable-line react/require-default-props
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf(['primary', 'success', 'danger', 'info', 'warning', 'alert']),
+  elementRef: PropTypes.func,
 
-import { AsElementType } from '@instructure/shared-types'
-import type { Spacing } from '@instructure/emotion'
-
-export type PillProps = {
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-  as?: AsElementType
-  color?: 'primary' | 'success' | 'danger' | 'info' | 'warning' | 'alert'
-  elementRef?: (...args: any[]) => any
-  margin?: Spacing
-}
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin: ThemeablePropTypes.spacing
+};
+const allowedProps = ['as', 'children', 'color', 'elementRef', 'margin'];
+export { propTypes, allowedProps };

package/lib/Pill/index.js

@@ -11,8 +11,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _View = require("@instructure/ui-view/lib/View");
 
 var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
@@ -29,6 +27,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles"];
 
 var _dec, _dec2, _class, _class2, _temp;
@@ -47,11 +47,15 @@ let Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  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);
   }
 
   handleTruncation(truncated) {
@@ -63,15 +67,15 @@ let Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   renderPill(focused, getTriggerProps) {
-    const _this$props = this.props,
-          margin = _this$props.margin,
-          children = _this$props.children,
-          color = _this$props.color,
-          as = _this$props.as,
-          elementRef = _this$props.elementRef,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          margin = _this$props3.margin,
+          children = _this$props3.children,
+          color = _this$props3.color,
+          as = _this$props3.as,
+          elementRef = _this$props3.elementRef,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const filteredProps = (0, _passthroughProps.passthroughProps)(props);
     const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, containerProps, {
@@ -79,7 +83,7 @@ let Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       elementRef: elementRef,
       margin: margin,
       padding: "0",
-      maxWidth: styles.maxWidth,
+      maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
       background: "transparent",
       borderRadius: "pill",
       borderWidth: "0",
@@ -88,9 +92,9 @@ let Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       withFocusOutline: focused,
       focusColor: "info"
     }), (0, _emotion.jsx)("span", {
-      css: styles.pill
+      css: styles === null || styles === void 0 ? void 0 : styles.pill
     }, (0, _emotion.jsx)("span", {
-      css: styles.text
+      css: styles === null || styles === void 0 ? void 0 : styles.text
     }, (0, _emotion.jsx)(_TruncateText.TruncateText, {
       onUpdate: truncated => {
         this.handleTruncation(truncated);
@@ -113,27 +117,7 @@ let Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     }
   }
 
-}, _class2.displayName = "Pill", _class2.componentId = 'Pill', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-  as: _propTypes.default.elementType,
-  // eslint-disable-line react/require-default-props
-  children: _propTypes.default.node.isRequired,
-  color: _propTypes.default.oneOf(['primary', 'success', 'danger', 'info', 'warning', 'alert']),
-  elementRef: _propTypes.default.func,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
-  margin: _emotion.ThemeablePropTypes.spacing
-}, _class2.defaultProps = {
-  children: void 0,
-  margin: void 0,
-  elementRef: void 0,
+}, _class2.displayName = "Pill", _class2.componentId = 'Pill', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   color: 'primary'
 }, _temp)) || _class) || _class);
 exports.Pill = Pill;

package/lib/Pill/props.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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.
+ */
+const propTypes = {
+  as: _propTypes.default.elementType,
+  // eslint-disable-line react/require-default-props
+  children: _propTypes.default.node.isRequired,
+  color: _propTypes.default.oneOf(['primary', 'success', 'danger', 'info', 'warning', 'alert']),
+  elementRef: _propTypes.default.func,
+
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin: _emotion.ThemeablePropTypes.spacing
+};
+exports.propTypes = propTypes;
+const allowedProps = ['as', 'children', 'color', 'elementRef', 'margin'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pill",
-  "version": "8.8.1-snapshot.3+d5d6d4cd8",
+  "version": "8.8.1-snapshot.63+ec21bbc1d",
   "description": "A UI component to communicate concise status.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,24 +25,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/emotion": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-testable": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-tooltip": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-truncate-text": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-view": "8.8.1-snapshot.3+d5d6d4cd8",
+    "@instructure/console": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/emotion": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/shared-types": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-react-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-testable": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-tooltip": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-truncate-text": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-view": "8.8.1-snapshot.63+ec21bbc1d",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/shared-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-color-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-queries": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-themes": "8.8.1-snapshot.3+d5d6d4cd8"
+    "@instructure/ui-babel-preset": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-color-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-test-locator": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-test-queries": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-test-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-themes": "8.8.1-snapshot.63+ec21bbc1d"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -51,5 +51,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "d5d6d4cd8f300e8635c69248f5d794c002269e08"
+  "gitHead": "ec21bbc1dcdd8567b11f2c15f5fadd16709d7e3d"
 }

package/src/Pill/index.tsx

@@ -24,7 +24,6 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { View } from '@instructure/ui-view'
 import { Tooltip } from '@instructure/ui-tooltip'
@@ -32,11 +31,12 @@ import { TruncateText } from '@instructure/ui-truncate-text'
 import { passthroughProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { PillProps } from './types'
+import type { PillProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -48,34 +48,10 @@ category: components
 class Pill extends Component<PillProps> {
   static readonly componentId = 'Pill'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    as: PropTypes.elementType, // eslint-disable-line react/require-default-props
-    children: PropTypes.node.isRequired,
-    color: PropTypes.oneOf([
-      'primary',
-      'success',
-      'danger',
-      'info',
-      'warning',
-      'alert'
-    ]),
-    elementRef: PropTypes.func,
-    /**
-     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-     */
-    margin: ThemeablePropTypes.spacing
-  }
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
-    children: undefined,
-    margin: undefined,
-    elementRef: undefined,
     color: 'primary'
   }
 
@@ -89,14 +65,11 @@ class Pill extends Component<PillProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'truncated' implicitly has an 'any' type... Remove this comment to see the full error message
@@ -136,7 +109,7 @@ class Pill extends Component<PillProps> {
         elementRef={elementRef}
         margin={margin}
         padding="0"
-        maxWidth={styles.maxWidth}
+        maxWidth={styles?.maxWidth}
         background="transparent"
         borderRadius="pill"
         borderWidth="0"
@@ -145,8 +118,8 @@ class Pill extends Component<PillProps> {
         withFocusOutline={focused}
         focusColor="info"
       >
-        <span css={styles.pill}>
-          <span css={styles.text}>
+        <span css={styles?.pill}>
+          <span css={styles?.text}>
             <TruncateText
               onUpdate={(truncated) => {
                 this.handleTruncation(truncated)
@@ -165,7 +138,6 @@ class Pill extends Component<PillProps> {
     if (this.state.truncated) {
       return (
         <Tooltip renderTip={this.props.children}>
-          {/* @ts-expect-error ts-migrate(7031) FIXME: Binding element 'focused' implicitly has an 'any' ... Remove this comment to see the full error message */}
           {({ focused, getTriggerProps }) => {
             return this.renderPill(focused, getTriggerProps)
           }}

package/src/Pill/props.ts

@@ -0,0 +1,74 @@
+/*
+ * 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 React from 'react'
+import PropTypes from 'prop-types'
+
+import { ThemeablePropTypes } from '@instructure/emotion'
+
+import type { Spacing, WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, AsElementType } from '@instructure/shared-types'
+
+type PillOwnProps = {
+  as?: AsElementType
+  color?: 'primary' | 'success' | 'danger' | 'info' | 'warning' | 'alert'
+  elementRef?: (...args: any[]) => any
+  margin?: Spacing
+  children: React.ReactNode
+}
+type PropKeys = keyof PillOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type PillProps = PillOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  as: PropTypes.elementType, // eslint-disable-line react/require-default-props
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf([
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+    'alert'
+  ]),
+  elementRef: PropTypes.func,
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin: ThemeablePropTypes.spacing
+}
+
+const allowedProps: AllowedPropKeys = [
+  'as',
+  'children',
+  'color',
+  'elementRef',
+  'margin'
+]
+
+export type { PillProps }
+export { propTypes, allowedProps }

package/src/Pill/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { PillTheme } from '@instructure/shared-types'
-import { PillProps } from './types'
+import { PillProps } from './props'
 
 /**
  * ---

package/src/index.ts

@@ -23,4 +23,4 @@
  */
 
 export { Pill } from './Pill'
-export type { PillProps } from './Pill/types'
+export type { PillProps } from './Pill/props'

package/types/Pill/index.d.ts

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@instructure/emotion';
-import { PillProps } from './types';
+import type { PillProps } from './props';
 /**
 ---
 category: components
@@ -10,29 +9,26 @@ category: components
 **/
 declare class Pill extends Component<PillProps> {
     static readonly componentId = "Pill";
-    static propTypes: {
-        makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
-        styles: PropTypes.Requireable<object>;
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        color: PropTypes.Requireable<string>;
-        elementRef: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-         * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-         * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-         */
-        margin: (props: any, propName: any, componentName: any, location: any) => any;
-    };
+    static allowedProps: readonly (keyof {
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        color?: "primary" | "success" | "danger" | "info" | "warning" | "alert" | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        children: import("react").ReactNode;
+    })[];
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        color?: "primary" | "success" | "danger" | "info" | "warning" | "alert" | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        children: import("react").ReactNode;
+    }>;
     static defaultProps: {
-        children: undefined;
-        margin: undefined;
-        elementRef: undefined;
         color: string;
     };
     constructor(props: any);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
+    componentDidUpdate(): void;
     handleTruncation(truncated: any): void;
     renderPill(focused: any, getTriggerProps: any): jsx.JSX.Element;
     render(): jsx.JSX.Element;

package/types/Pill/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pill/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,SAAS,MAAM,YAAY,CAAA;AAQlC,OAAO,EAAa,GAAG,EAAsB,MAAM,sBAAsB,CAAA;AAIzE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC;;;;GAIG;AACH,cAEM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,SAAS;;;;;;;QAgBd;;;;WAIG;;MAEJ;IAED,MAAM,CAAC,YAAY;;;;;MAKlB;gBAGW,KAAK,KAAA;IAQjB,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAMjD,gBAAgB,CAAC,SAAS,KAAA;IAU1B,UAAU,CAAC,OAAO,KAAA,EAAE,eAAe,KAAA;IAkDnC,MAAM;CAgBP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pill/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGxC;;;;GAIG;AACH,cAEM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,YAAY;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;MAElB;gBAGW,KAAK,KAAA;IAQjB,iBAAiB;IAIjB,kBAAkB;IAKlB,gBAAgB,CAAC,SAAS,KAAA;IAU1B,UAAU,CAAC,OAAO,KAAA,EAAE,eAAe,KAAA;IAkDnC,MAAM;CAeP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/types/Pill/props.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Spacing, WithStyleProps } from '@instructure/emotion';
+import type { PropValidators, AsElementType } from '@instructure/shared-types';
+declare type PillOwnProps = {
+    as?: AsElementType;
+    color?: 'primary' | 'success' | 'danger' | 'info' | 'warning' | 'alert';
+    elementRef?: (...args: any[]) => any;
+    margin?: Spacing;
+    children: React.ReactNode;
+};
+declare type PropKeys = keyof PillOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type PillProps = PillOwnProps & WithStyleProps;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { PillProps };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map

package/types/Pill/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Pill/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAE9E,aAAK,YAAY,GAAG;IAClB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACvE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AACD,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAAG,cAAc,CAAA;AAE9C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAkBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAMnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Pill/styles.d.ts

@@ -1,5 +1,5 @@
 import { PillTheme } from '@instructure/shared-types';
-import { PillProps } from './types';
+import { PillProps } from './props';
 /**
  * ---
  * private: true

package/types/index.d.ts

@@ -1,3 +1,3 @@
 export { Pill } from './Pill';
-export type { PillProps } from './Pill/types';
+export type { PillProps } from './Pill/props';
 //# sourceMappingURL=index.d.ts.map

package/es/Pill/types.js

@@ -1 +0,0 @@
-export {};

package/lib/Pill/types.js

@@ -1 +0,0 @@
-"use strict";

package/types/Pill/types.d.ts

@@ -1,11 +0,0 @@
-import { AsElementType } from '@instructure/shared-types';
-import type { Spacing } from '@instructure/emotion';
-export declare type PillProps = {
-    makeStyles?: (...args: any[]) => any;
-    styles?: any;
-    as?: AsElementType;
-    color?: 'primary' | 'success' | 'danger' | 'info' | 'warning' | 'alert';
-    elementRef?: (...args: any[]) => any;
-    margin?: Spacing;
-};
-//# sourceMappingURL=types.d.ts.map

package/types/Pill/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Pill/types.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAEnD,oBAAY,SAAS,GAAG;IACtB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACvE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA"}