@instructure/ui-pill 8.9.2-snapshot.7 → 8.10.1-snapshot.8

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
+
+**Note:** Version bump only for package @instructure/ui-pill
+
 ## [8.9.1](https://github.com/instructure/instructure-ui/compare/v8.9.0...v8.9.1) (2021-09-16)
 
 **Note:** Version bump only for package @instructure/ui-pill

package/es/Pill/__examples__/Pill.examples.js

@@ -26,7 +26,7 @@ export default {
   propValues: {
     children: ['Some really long text that will truncate', 'Missing']
   },
-  getParameters: page => {
+  getParameters: () => {
     return {
       disable: true
     };

package/es/Pill/index.js

@@ -30,10 +30,10 @@ var _dec, _dec2, _class, _class2, _temp;
 /** @jsx jsx */
 import { Component } from 'react';
 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 { Tooltip } from '@instructure/ui-tooltip';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -42,6 +42,7 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pill extends Component {

package/es/Pill/props.js

@@ -29,12 +29,6 @@ const propTypes = {
   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 = ['as', 'children', 'color', 'elementRef', 'margin'];

package/lib/Pill/__examples__/Pill.examples.js

@@ -33,7 +33,7 @@ var _default = {
   propValues: {
     children: ['Some really long text that will truncate', 'Missing']
   },
-  getParameters: page => {
+  getParameters: () => {
     return {
       disable: true
     };

package/lib/Pill/index.js

@@ -13,14 +13,14 @@ var _react = require("react");
 
 var _View = require("@instructure/ui-view/lib/View");
 
-var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
-
 var _TruncateText = require("@instructure/ui-truncate-text/lib/TruncateText");
 
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
+var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
+
 var _emotion = require("@instructure/emotion");
 
 var _styles = _interopRequireDefault(require("./styles"));
@@ -37,6 +37,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pill extends _react.Component {
   constructor(props) {

package/lib/Pill/props.js

@@ -40,12 +40,6 @@ const propTypes = {
   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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pill",
-  "version": "8.9.2-snapshot.7+1a56581cd",
+  "version": "8.10.1-snapshot.8+21f46f4e3",
   "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.9.2-snapshot.7+1a56581cd",
-    "@instructure/emotion": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/shared-types": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-react-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-testable": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-tooltip": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-truncate-text": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-view": "8.9.2-snapshot.7+1a56581cd",
+    "@instructure/console": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/emotion": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/shared-types": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-react-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-testable": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-tooltip": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-truncate-text": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-view": "8.10.1-snapshot.8+21f46f4e3",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-color-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-test-locator": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-test-queries": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-test-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-themes": "8.9.2-snapshot.7+1a56581cd"
+    "@instructure/ui-babel-preset": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-color-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-test-locator": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-test-queries": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-test-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-themes": "8.10.1-snapshot.8+21f46f4e3"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -51,5 +51,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "1a56581cde6bd3b4f9fe5cd11ae420bd1222fe15"
+  "gitHead": "21f46f4e342898b019ab943a7e69a455621d9576"
 }

package/src/Pill/__examples__/Pill.examples.ts

@@ -27,8 +27,7 @@ export default {
   propValues: {
     children: ['Some really long text that will truncate', 'Missing']
   },
-  // @ts-expect-error ts-migrate(6133) FIXME: 'page' is declared but its value is never read.
-  getParameters: (page) => {
+  getParameters: () => {
     return { disable: true }
   }
 }

package/src/Pill/index.tsx

@@ -26,26 +26,29 @@
 import { Component } from 'react'
 
 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 { Tooltip } from '@instructure/ui-tooltip'
+import type { TooltipRenderChildrenArgs } from '@instructure/ui-tooltip'
 
 import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import type { PillProps } from './props'
+
+import type { PillProps, PillState } from './props'
 import { allowedProps, propTypes } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class Pill extends Component<PillProps> {
+class Pill extends Component<PillProps, PillState> {
   static readonly componentId = 'Pill'
 
   static allowedProps = allowedProps
@@ -55,8 +58,7 @@ class Pill extends Component<PillProps> {
     color: 'primary'
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: PillProps) {
     super(props)
 
     this.state = {
@@ -72,9 +74,7 @@ class Pill extends Component<PillProps> {
     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
-  handleTruncation(truncated) {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'truncated' does not exist on type 'Reado... Remove this comment to see the full error message
+  handleTruncation(truncated: boolean) {
     if (truncated !== this.state.truncated) {
       this.setState({
         truncated: truncated
@@ -82,8 +82,10 @@ class Pill extends Component<PillProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'focused' implicitly has an 'any' type.
-  renderPill(focused, getTriggerProps) {
+  renderPill(
+    focused?: TooltipRenderChildrenArgs['focused'],
+    getTriggerProps?: TooltipRenderChildrenArgs['getTriggerProps']
+  ) {
     const {
       margin,
       children,
@@ -109,7 +111,7 @@ class Pill extends Component<PillProps> {
         elementRef={elementRef}
         margin={margin}
         padding="0"
-        maxWidth={styles?.maxWidth}
+        maxWidth={styles?.maxWidth as string}
         background="transparent"
         borderRadius="pill"
         borderWidth="0"
@@ -134,7 +136,6 @@ class Pill extends Component<PillProps> {
   }
 
   render() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'truncated' does not exist on type 'Reado... Remove this comment to see the full error message
     if (this.state.truncated) {
       return (
         <Tooltip renderTip={this.props.children}>
@@ -144,7 +145,6 @@ class Pill extends Component<PillProps> {
         </Tooltip>
       )
     } else {
-      // @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 0.
       return this.renderPill()
     }
   }

package/src/Pill/props.ts

@@ -26,13 +26,29 @@ 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'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  PropValidators,
+  AsElementType,
+  PillTheme
+} from '@instructure/shared-types'
 
 type PillOwnProps = {
   as?: AsElementType
   color?: 'primary' | 'success' | 'danger' | 'info' | 'warning' | 'alert'
-  elementRef?: (...args: any[]) => any
+  /**
+   * Provides a reference to the underlying HTML element
+   */
+  elementRef?: (element: HTMLElement | null) => void
+  /**
+   * 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?: Spacing
   children: React.ReactNode
 }
@@ -40,7 +56,9 @@ type PropKeys = keyof PillOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type PillProps = PillOwnProps & WithStyleProps
+type PillProps = PillOwnProps & WithStyleProps<PillTheme, PillStyle>
+
+type PillStyle = ComponentStyle<'pill' | 'text' | 'maxWidth'>
 
 const propTypes: PropValidators<PropKeys> = {
   as: PropTypes.elementType, // eslint-disable-line react/require-default-props
@@ -54,11 +72,6 @@ const propTypes: PropValidators<PropKeys> = {
     '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
 }
 
@@ -70,5 +83,9 @@ const allowedProps: AllowedPropKeys = [
   'margin'
 ]
 
-export type { PillProps }
+type PillState = {
+  truncated: boolean
+}
+
+export type { PillProps, PillStyle, PillState }
 export { propTypes, allowedProps }

package/src/Pill/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { PillTheme } from '@instructure/shared-types'
-import { PillProps } from './props'
+import type { PillTheme } from '@instructure/shared-types'
+import type { PillProps, PillStyle } from './props'
 
 /**
  * ---
@@ -35,7 +35,10 @@ import { PillProps } from './props'
  * @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: PillTheme, props: PillProps) => {
+const generateStyle = (
+  componentTheme: PillTheme,
+  props: PillProps
+): PillStyle => {
   const { color } = props
 
   const pillColorVariants = {

package/types/Pill/__examples__/Pill.examples.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
     propValues: {
         children: string[];
     };
-    getParameters: (page: any) => {
+    getParameters: () => {
         disable: boolean;
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.examples.d.ts","sourceRoot":"","sources":["../../../src/Pill/__examples__/Pill.examples.ts"],"names":[],"mappings":";;;;;;;;;AAwBA,wBASC"}
+{"version":3,"file":"Pill.examples.d.ts","sourceRoot":"","sources":["../../../src/Pill/__examples__/Pill.examples.ts"],"names":[],"mappings":";;;;;;;;;AAwBA,wBAQC"}

package/types/Pill/index.d.ts

@@ -1,36 +1,38 @@
 /** @jsx jsx */
 import { Component } from 'react';
+import type { TooltipRenderChildrenArgs } from '@instructure/ui-tooltip';
 import { jsx } from '@instructure/emotion';
-import type { PillProps } from './props';
+import type { PillProps, PillState } from './props';
 /**
 ---
 category: components
 ---
+@tsProps
 **/
-declare class Pill extends Component<PillProps> {
+declare class Pill extends Component<PillProps, PillState> {
     static readonly componentId = "Pill";
     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;
+        elementRef?: ((element: HTMLElement | null) => void) | 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;
+        elementRef?: ((element: HTMLElement | null) => void) | undefined;
         margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         children: import("react").ReactNode;
     }>;
     static defaultProps: {
         color: string;
     };
-    constructor(props: any);
+    constructor(props: PillProps);
     componentDidMount(): void;
     componentDidUpdate(): void;
-    handleTruncation(truncated: any): void;
-    renderPill(focused: any, getTriggerProps: any): jsx.JSX.Element;
+    handleTruncation(truncated: boolean): void;
+    renderPill(focused?: TooltipRenderChildrenArgs['focused'], getTriggerProps?: TooltipRenderChildrenArgs['getTriggerProps']): jsx.JSX.Element;
     render(): jsx.JSX.Element;
 }
 export default Pill;

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pill/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAA;AAExE,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGnD;;;;;GAKG;AACH,cAEM,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAChD,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,YAAY;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;MAElB;gBAEW,KAAK,EAAE,SAAS;IAQ5B,iBAAiB;IAIjB,kBAAkB;IAIlB,gBAAgB,CAAC,SAAS,EAAE,OAAO;IAQnC,UAAU,CACR,OAAO,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAC9C,eAAe,CAAC,EAAE,yBAAyB,CAAC,iBAAiB,CAAC;IAmDhE,MAAM;CAaP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/types/Pill/props.d.ts

@@ -1,18 +1,30 @@
 import React from 'react';
-import type { Spacing, WithStyleProps } from '@instructure/emotion';
-import type { PropValidators, AsElementType } from '@instructure/shared-types';
+import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { PropValidators, AsElementType, PillTheme } from '@instructure/shared-types';
 declare type PillOwnProps = {
     as?: AsElementType;
     color?: 'primary' | 'success' | 'danger' | 'info' | 'warning' | 'alert';
-    elementRef?: (...args: any[]) => any;
+    /**
+     * Provides a reference to the underlying HTML element
+     */
+    elementRef?: (element: HTMLElement | null) => void;
+    /**
+     * 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?: Spacing;
     children: React.ReactNode;
 };
 declare type PropKeys = keyof PillOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type PillProps = PillOwnProps & WithStyleProps;
+declare type PillProps = PillOwnProps & WithStyleProps<PillTheme, PillStyle>;
+declare type PillStyle = ComponentStyle<'pill' | 'text' | 'maxWidth'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { PillProps };
+declare type PillState = {
+    truncated: boolean;
+};
+export type { PillProps, PillStyle, PillState };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Pill/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACV,MAAM,2BAA2B,CAAA;AAElC,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;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAClD;;;;OAIG;IACH,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,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEpE,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;AAE7D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAavC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAMnB,CAAA;AAED,aAAK,SAAS,GAAG;IACf,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AAC/C,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 './props';
+import type { PillTheme } from '@instructure/shared-types';
+import type { PillProps, PillStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,95 +10,6 @@ import { PillProps } from './props';
  * @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
  */
-declare const generateStyle: (componentTheme: PillTheme, props: PillProps) => {
-    pill: {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    };
-    text: {
-        label: string;
-        boxSizing: string;
-        textTransform: string;
-        fontSize: string | 0;
-        fontWeight: number;
-        letterSpacing: string;
-    };
-    maxWidth: string | 0;
-};
+declare const generateStyle: (componentTheme: PillTheme, props: PillProps) => PillStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Pill/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,SAAS,SAAS,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDjE,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Pill/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,SAAS,SAClB,SAAS,KACf,SAuDF,CAAA;AAED,eAAe,aAAa,CAAA"}