@instructure/ui-menu 8.9.2-snapshot.4 → 8.10.1-snapshot.4

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-menu
+
 ## [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-menu

package/es/Menu/MenuItem/index.js

@@ -203,7 +203,7 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
           onKeyUp = _this$props3.onKeyUp,
           type = _this$props3.type,
           href = _this$props3.href;
-    const props = omitProps(this.props, MenuItem.propTypes);
+    const props = omitProps(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
     return jsx(ElementType // eslint-disable-line jsx-a11y/mouse-events-have-key-events
     , Object.assign({

package/es/Menu/MenuItemGroup/index.js

@@ -168,7 +168,7 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   render() {
     var _this$props$styles2, _this$props$styles3;
 
-    const props = omitProps(this.props, MenuItemGroup.propTypes);
+    const props = omitProps(this.props, MenuItemGroup.allowedProps);
     return jsx("span", Object.assign({}, props, {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
       role: "presentation"

package/es/Menu/MenuItemSeparator/index.js

@@ -52,7 +52,7 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
   render() {
     var _this$props$styles;
 
-    const props = omitProps(this.props, MenuItemSeparator.propTypes);
+    const props = omitProps(this.props, MenuItemSeparator.allowedProps);
     return jsx("div", Object.assign({}, props, {
       role: "presentation",
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator

package/lib/Menu/MenuItem/index.js

@@ -205,7 +205,7 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
           onKeyUp = _this$props3.onKeyUp,
           type = _this$props3.type,
           href = _this$props3.href;
-    const props = (0, _omitProps.omitProps)(this.props, MenuItem.propTypes);
+    const props = (0, _omitProps.omitProps)(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
     return (0, _emotion.jsx)(ElementType // eslint-disable-line jsx-a11y/mouse-events-have-key-events
     , Object.assign({

package/lib/Menu/MenuItemGroup/index.js

@@ -167,7 +167,7 @@ let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   render() {
     var _this$props$styles2, _this$props$styles3;
 
-    const props = (0, _omitProps.omitProps)(this.props, MenuItemGroup.propTypes);
+    const props = (0, _omitProps.omitProps)(this.props, MenuItemGroup.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
       role: "presentation"

package/lib/Menu/MenuItemSeparator/index.js

@@ -42,7 +42,7 @@ let MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
   render() {
     var _this$props$styles;
 
-    const props = (0, _omitProps.omitProps)(this.props, MenuItemSeparator.propTypes);
+    const props = (0, _omitProps.omitProps)(this.props, MenuItemSeparator.allowedProps);
     return (0, _emotion.jsx)("div", Object.assign({}, props, {
       role: "presentation",
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.9.2-snapshot.4+bf1e82efc",
+  "version": "8.10.1-snapshot.4+6c5c9e653",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,28 +24,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-color-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-test-locator": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-test-queries": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-test-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-themes": "8.9.2-snapshot.4+bf1e82efc"
+    "@instructure/ui-babel-preset": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-color-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-test-locator": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-test-queries": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-test-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-themes": "8.10.1-snapshot.4+6c5c9e653"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/emotion": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/shared-types": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-a11y-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-dom-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-icons": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-popover": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-position": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-prop-types": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-react-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-testable": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/uid": "8.9.2-snapshot.4+bf1e82efc",
+    "@instructure/console": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/emotion": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/shared-types": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-a11y-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-dom-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-icons": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-popover": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-position": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-prop-types": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-react-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-testable": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/uid": "8.10.1-snapshot.4+6c5c9e653",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "bf1e82efccb682510708448efd369eddaa24f74b"
+  "gitHead": "6c5c9e653f7ce3d239296f4ed19c5679fdddcd5b"
 }

package/src/Menu/MenuItem/index.tsx

@@ -227,7 +227,7 @@ class MenuItem extends Component<MenuItemProps> {
   render() {
     const { disabled, controls, onKeyDown, onKeyUp, type, href } = this.props
 
-    const props = omitProps(this.props, MenuItem.propTypes)
+    const props = omitProps(this.props, MenuItem.allowedProps)
     const ElementType = this.elementType
 
     return (

package/src/Menu/MenuItem/props.ts

@@ -27,8 +27,12 @@ import PropTypes from 'prop-types'
 
 import { controllable } from '@instructure/ui-prop-types'
 
-import type { AsElementType, PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type {
+  AsElementType,
+  PropValidators,
+  MenuItemTheme
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type MenuItemOwnProps = {
   children: React.ReactNode
@@ -51,7 +55,10 @@ type PropKeys = keyof MenuItemOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type MenuItemProps = MenuItemOwnProps & WithStyleProps
+type MenuItemProps = MenuItemOwnProps &
+  WithStyleProps<MenuItemTheme, MenuItemStyle>
+
+type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'label'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -105,5 +112,5 @@ const allowedProps: AllowedPropKeys = [
   'href'
 ]
 
-export type { MenuItemProps }
+export type { MenuItemProps, MenuItemStyle }
 export { propTypes, allowedProps }

package/src/Menu/MenuItem/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { MenuItemTheme } from '@instructure/shared-types'
-import { MenuItemProps } from './props'
+import type { MenuItemTheme } from '@instructure/shared-types'
+import type { MenuItemProps, MenuItemStyle } from './props'
 
 /**
  * ---
@@ -35,7 +35,10 @@ import { MenuItemProps } 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: MenuItemTheme, props: MenuItemProps) => {
+const generateStyle = (
+  componentTheme: MenuItemTheme,
+  props: MenuItemProps
+): MenuItemStyle => {
   const { type, disabled } = props
 
   const isRadioOrCheckbox = type === 'checkbox' || type === 'radio'

package/src/Menu/MenuItemGroup/index.tsx

@@ -232,7 +232,7 @@ class MenuItemGroup extends Component<MenuGroupProps> {
   }
 
   render() {
-    const props = omitProps(this.props, MenuItemGroup.propTypes)
+    const props = omitProps(this.props, MenuItemGroup.allowedProps)
     return (
       <span
         {...props}

package/src/Menu/MenuItemGroup/props.ts

@@ -28,11 +28,12 @@ import {
   controllable,
   Children as ChildrenPropTypes
 } from '@instructure/ui-prop-types'
+
 import { MenuItem } from '../MenuItem'
 import { MenuItemSeparator } from '../MenuItemSeparator'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, MenuGroupTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type MenuGroupOwnProps = {
   label: React.ReactNode
@@ -53,7 +54,10 @@ type PropKeys = keyof MenuGroupOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type MenuGroupProps = MenuGroupOwnProps & WithStyleProps
+type MenuGroupProps = MenuGroupOwnProps &
+  WithStyleProps<MenuGroupTheme, MenuGroupStyle>
+
+type MenuGroupStyle = ComponentStyle<'menuItemGroup' | 'label' | 'items'>
 
 const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,
@@ -106,5 +110,5 @@ const allowedProps: AllowedPropKeys = [
   'isTabbable'
 ]
 
-export type { MenuGroupProps }
+export type { MenuGroupProps, MenuGroupStyle }
 export { propTypes, allowedProps }

package/src/Menu/MenuItemGroup/styles.ts

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { MenuGroupTheme } from '@instructure/shared-types'
+import type { MenuGroupTheme } from '@instructure/shared-types'
+import type { MenuGroupStyle } from './props'
 
 /**
  * ---
@@ -34,7 +35,7 @@ import { MenuGroupTheme } from '@instructure/shared-types'
  * @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: MenuGroupTheme) => {
+const generateStyle = (componentTheme: MenuGroupTheme): MenuGroupStyle => {
   return {
     menuItemGroup: {
       label: 'menuItemGroup',

package/src/Menu/MenuItemSeparator/index.tsx

@@ -61,7 +61,7 @@ class MenuItemSeparator extends Component<MenuSeparatorProps> {
   }
 
   render() {
-    const props = omitProps(this.props, MenuItemSeparator.propTypes)
+    const props = omitProps(this.props, MenuItemSeparator.allowedProps)
     return (
       <div
         {...props}

package/src/Menu/MenuItemSeparator/props.ts

@@ -22,8 +22,11 @@
  * SOFTWARE.
  */
 
-import type { WithStyleProps } from '@instructure/emotion'
-import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  PropValidators,
+  MenuSeparatorTheme
+} from '@instructure/shared-types'
 
 // keeping here to keep the structure of props.ts
 // eslint-disable-next-line
@@ -33,11 +36,14 @@ type PropKeys = keyof MenuSeparatorOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type MenuSeparatorProps = MenuSeparatorOwnProps & WithStyleProps
+type MenuSeparatorProps = MenuSeparatorOwnProps &
+  WithStyleProps<MenuSeparatorTheme, MenuSeparatorStyle>
+
+type MenuSeparatorStyle = ComponentStyle<'menuItemSeparator'>
 
 const propTypes: PropValidators<PropKeys> = {}
 
 const allowedProps: AllowedPropKeys = []
 
-export type { MenuSeparatorProps }
+export type { MenuSeparatorProps, MenuSeparatorStyle }
 export { propTypes, allowedProps }

package/src/Menu/MenuItemSeparator/styles.ts

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { MenuSeparatorTheme } from '@instructure/shared-types'
+import type { MenuSeparatorTheme } from '@instructure/shared-types'
+import type { MenuSeparatorStyle } from './props'
 
 /**
  * ---
@@ -34,7 +35,9 @@ import { MenuSeparatorTheme } from '@instructure/shared-types'
  * @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: MenuSeparatorTheme) => {
+const generateStyle = (
+  componentTheme: MenuSeparatorTheme
+): MenuSeparatorStyle => {
   return {
     menuItemSeparator: {
       label: 'menuItemSeparator',

package/src/Menu/props.ts

@@ -30,8 +30,8 @@ import {
   Children as ChildrenPropTypes
 } from '@instructure/ui-prop-types'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, MenuTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   PlacementPropValues,
   PositionConstraint,
@@ -75,7 +75,9 @@ type PropKeys = keyof MenuOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type MenuProps = MenuOwnProps & WithStyleProps
+type MenuProps = MenuOwnProps & WithStyleProps<MenuTheme, MenuStyle>
+
+type MenuStyle = ComponentStyle<'menu'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -231,5 +233,5 @@ const allowedProps: AllowedPropKeys = [
   'offsetY'
 ]
 
-export type { MenuProps }
+export type { MenuProps, MenuStyle }
 export { propTypes, allowedProps }

package/src/Menu/styles.ts

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { MenuTheme } from '@instructure/shared-types'
+import type { MenuTheme } from '@instructure/shared-types'
+import type { MenuStyle } from './props'
 
 /**
  * ---
@@ -34,7 +35,7 @@ import { MenuTheme } from '@instructure/shared-types'
  * @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: MenuTheme) => {
+const generateStyle = (componentTheme: MenuTheme): MenuStyle => {
   return {
     menu: {
       label: 'menu',

package/types/Menu/MenuItem/props.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { AsElementType, PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { AsElementType, PropValidators, MenuItemTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type MenuItemOwnProps = {
     children: React.ReactNode;
     defaultSelected?: boolean;
@@ -19,9 +19,10 @@ declare type MenuItemOwnProps = {
 };
 declare type PropKeys = keyof MenuItemOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type MenuItemProps = MenuItemOwnProps & WithStyleProps;
+declare type MenuItemProps = MenuItemOwnProps & WithStyleProps<MenuItemTheme, MenuItemStyle>;
+declare type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'label'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { MenuItemProps };
+export type { MenuItemProps, MenuItemStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Menu/MenuItem/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItem/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;IACjD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,GAAG,cAAc,CAAA;AAEtD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAiCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItem/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;IACjD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,GACnC,cAAc,CAAC,aAAa,EAAE,aAAa,CAAC,CAAA;AAE9C,aAAK,aAAa,GAAG,cAAc,CAAC,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;AAElE,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAiCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Menu/MenuItem/styles.d.ts

@@ -1,5 +1,5 @@
-import { MenuItemTheme } from '@instructure/shared-types';
-import { MenuItemProps } from './props';
+import type { MenuItemTheme } from '@instructure/shared-types';
+import type { MenuItemProps, MenuItemStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,249 +10,6 @@ import { MenuItemProps } 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: MenuItemTheme, props: MenuItemProps) => {
-    menuItem: {
-        '&:is(a)': {
-            '&, &:link, &:visited, &:active, &:hover, &:focus': {
-                textDecoration: string;
-            };
-        };
-        '&:-webkit-any(a)': {
-            '&, &:link, &:visited, &:active, &:hover, &:focus': {
-                textDecoration: string;
-            };
-        };
-        cursor: string;
-        pointerEvents: string;
-        opacity: number;
-        '&:focus,  &:active,  &:hover': {
-            background: string;
-            '[class*="menuItem__label"]': {
-                color: string;
-            };
-            '[class*="menuItem__icon"]': {
-                color: string;
-            };
-        };
-        '&::-moz-focus-inner': {
-            padding: string;
-            margin: string;
-            border: string;
-        };
-        paddingInlineStart: string | 0;
-        label: string;
-        position: string;
-        border: string;
-        outline: string;
-        padding: string | 0;
-        margin: string;
-        width: string;
-        borderRadius: string;
-        boxSizing: string;
-        textAlign: string;
-        userSelect: string;
-        fontFamily: string;
-        fontWeight: number;
-        lineHeight: string | number;
-        fontSize: string | 0;
-        background: string;
-        transition: string;
-        display: string;
-        textDecoration: string;
-    } | {
-        '&:is(a)': {
-            '&, &:link, &:visited, &:active, &:hover, &:focus': {
-                textDecoration: string;
-            };
-        };
-        '&:-webkit-any(a)': {
-            '&, &:link, &:visited, &:active, &:hover, &:focus': {
-                textDecoration: string;
-            };
-        };
-        cursor: string;
-        pointerEvents?: undefined;
-        opacity?: undefined;
-        '&:focus,  &:active,  &:hover': {
-            background: string;
-            '[class*="menuItem__label"]': {
-                color: string;
-            };
-            '[class*="menuItem__icon"]': {
-                color: string;
-            };
-        };
-        '&::-moz-focus-inner': {
-            padding: string;
-            margin: string;
-            border: string;
-        };
-        paddingInlineStart: string | 0;
-        label: string;
-        position: string;
-        border: string;
-        outline: string;
-        padding: string | 0;
-        margin: string;
-        width: string;
-        borderRadius: string;
-        boxSizing: string;
-        textAlign: string;
-        userSelect: string;
-        fontFamily: string;
-        fontWeight: number;
-        lineHeight: string | number;
-        fontSize: string | 0;
-        background: string;
-        transition: string;
-        display: string;
-        textDecoration: string;
-    } | {
-        '&:is(a)': {
-            '&, &:link, &:visited, &:active, &:hover, &:focus': {
-                textDecoration: string;
-            };
-        };
-        '&:-webkit-any(a)': {
-            '&, &:link, &:visited, &:active, &:hover, &:focus': {
-                textDecoration: string;
-            };
-        };
-        cursor: string;
-        pointerEvents: string;
-        opacity: number;
-        '&:focus,  &:active,  &:hover': {
-            background: string;
-            '[class*="menuItem__label"]': {
-                color: string;
-            };
-            '[class*="menuItem__icon"]': {
-                color: string;
-            };
-        };
-        '&::-moz-focus-inner': {
-            padding: string;
-            margin: string;
-            border: string;
-        };
-        paddingInlineStart?: undefined;
-        label: string;
-        position: string;
-        border: string;
-        outline: string;
-        padding: string | 0;
-        margin: string;
-        width: string;
-        borderRadius: string;
-        boxSizing: string;
-        textAlign: string;
-        userSelect: string;
-        fontFamily: string;
-        fontWeight: number;
-        lineHeight: string | number;
-        fontSize: string | 0;
-        background: string;
-        transition: string;
-        display: string;
-        textDecoration: string;
-    } | {
-        '&:is(a)': {
-            '&, &:link, &:visited, &:active, &:hover, &:focus': {
-                textDecoration: string;
-            };
-        };
-        '&:-webkit-any(a)': {
-            '&, &:link, &:visited, &:active, &:hover, &:focus': {
-                textDecoration: string;
-            };
-        };
-        cursor: string;
-        pointerEvents?: undefined;
-        opacity?: undefined;
-        '&:focus,  &:active,  &:hover': {
-            background: string;
-            '[class*="menuItem__label"]': {
-                color: string;
-            };
-            '[class*="menuItem__icon"]': {
-                color: string;
-            };
-        };
-        '&::-moz-focus-inner': {
-            padding: string;
-            margin: string;
-            border: string;
-        };
-        paddingInlineStart?: undefined;
-        label: string;
-        position: string;
-        border: string;
-        outline: string;
-        padding: string | 0;
-        margin: string;
-        width: string;
-        borderRadius: string;
-        boxSizing: string;
-        textAlign: string;
-        userSelect: string;
-        fontFamily: string;
-        fontWeight: number;
-        lineHeight: string | number;
-        fontSize: string | 0;
-        background: string;
-        transition: string;
-        display: string;
-        textDecoration: string;
-    };
-    icon: {
-        insetInlineStart: string;
-        insetInlineEnd: string | 0;
-        label: string;
-        position: string;
-        display: string;
-        alignItems: string;
-        top: string;
-        width: string;
-        height: string;
-        color: string;
-    } | {
-        insetInlineStart: string | 0;
-        insetInlineEnd: string;
-        label: string;
-        position: string;
-        display: string;
-        alignItems: string;
-        top: string;
-        width: string;
-        height: string;
-        color: string;
-    } | {
-        insetInlineStart: string;
-        insetInlineEnd: string | 0;
-        label: string;
-        position: string;
-        display: string;
-        alignItems: string;
-        top: string;
-        width: string;
-        height: string;
-        color: string;
-    } | {
-        insetInlineStart?: undefined;
-        insetInlineEnd?: undefined;
-        label: string;
-        position: string;
-        display: string;
-        alignItems: string;
-        top: string;
-        width: string;
-        height: string;
-        color: string;
-    };
-    label: {
-        label: string;
-        color: string;
-    };
-};
+declare const generateStyle: (componentTheme: MenuItemTheme, props: MenuItemProps) => MenuItemStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Menu/MenuItem/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItem/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,aAAa,SAAS,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGzE,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItem/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE3D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,aAAa,SACtB,aAAa,KACnB,aAyGF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Menu/MenuItemGroup/props.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { PropValidators, MenuGroupTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type MenuGroupOwnProps = {
     label: React.ReactNode;
     allowMultiple?: boolean;
@@ -17,9 +17,10 @@ declare type MenuGroupOwnProps = {
 };
 declare type PropKeys = keyof MenuGroupOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type MenuGroupProps = MenuGroupOwnProps & WithStyleProps;
+declare type MenuGroupProps = MenuGroupOwnProps & WithStyleProps<MenuGroupTheme, MenuGroupStyle>;
+declare type MenuGroupStyle = ComponentStyle<'menuItemGroup' | 'label' | 'items'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { MenuGroupProps };
+export type { MenuGroupProps, MenuGroupStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Menu/MenuItemGroup/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItemGroup/props.ts"],"names":[],"mappings":";AAiCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,eAAe,CAAC,EAAE,GAAG,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GAAG,cAAc,CAAA;AAExD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAkCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAanB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItemGroup/props.ts"],"names":[],"mappings":";AAkCA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,eAAe,CAAC,EAAE,GAAG,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GACrC,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,cAAc,CAAC,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC,CAAA;AAEzE,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAkCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAanB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Menu/MenuItemGroup/styles.d.ts

@@ -1,4 +1,5 @@
-import { MenuGroupTheme } from '@instructure/shared-types';
+import type { MenuGroupTheme } from '@instructure/shared-types';
+import type { MenuGroupStyle } from './props';
 /**
  * ---
  * private: true
@@ -9,28 +10,6 @@ import { MenuGroupTheme } from '@instructure/shared-types';
  * @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: MenuGroupTheme) => {
-    menuItemGroup: {
-        label: string;
-        display: string;
-    };
-    label: {
-        label: string;
-        background: string;
-        padding: string | 0;
-        display: string;
-        fontSize: string | 0;
-        fontFamily: string;
-        fontWeight: number;
-        color: string;
-        textAlign: string;
-    };
-    items: {
-        label: string;
-        padding: string;
-        margin: string;
-        listStyleType: string;
-    };
-};
+declare const generateStyle: (componentTheme: MenuGroupTheme) => MenuGroupStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Menu/MenuItemGroup/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItemGroup/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,cAAc;;;;;;;;;;;;;;;;;;;;;;CAwBpD,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItemGroup/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,cAAc,KAAG,cAwBvD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Menu/MenuItemSeparator/props.d.ts

@@ -1,11 +1,12 @@
-import type { WithStyleProps } from '@instructure/emotion';
-import type { PropValidators } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { PropValidators, MenuSeparatorTheme } from '@instructure/shared-types';
 declare type MenuSeparatorOwnProps = {};
 declare type PropKeys = keyof MenuSeparatorOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type MenuSeparatorProps = MenuSeparatorOwnProps & WithStyleProps;
+declare type MenuSeparatorProps = MenuSeparatorOwnProps & WithStyleProps<MenuSeparatorTheme, MenuSeparatorStyle>;
+declare type MenuSeparatorStyle = ComponentStyle<'menuItemSeparator'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { MenuSeparatorProps };
+export type { MenuSeparatorProps, MenuSeparatorStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Menu/MenuItemSeparator/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItemSeparator/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAI/D,aAAK,qBAAqB,GAAG,EAAE,CAAA;AAE/B,aAAK,QAAQ,GAAG,MAAM,qBAAqB,CAAA;AAE3C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,kBAAkB,GAAG,qBAAqB,GAAG,cAAc,CAAA;AAEhE,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAAM,CAAA;AAE9C,QAAA,MAAM,YAAY,EAAE,eAAoB,CAAA;AAExC,YAAY,EAAE,kBAAkB,EAAE,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItemSeparator/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EACnB,MAAM,2BAA2B,CAAA;AAIlC,aAAK,qBAAqB,GAAG,EAAE,CAAA;AAE/B,aAAK,QAAQ,GAAG,MAAM,qBAAqB,CAAA;AAE3C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,kBAAkB,GAAG,qBAAqB,GAC7C,cAAc,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAA;AAExD,aAAK,kBAAkB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAA;AAE7D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAAM,CAAA;AAE9C,QAAA,MAAM,YAAY,EAAE,eAAoB,CAAA;AAExC,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Menu/MenuItemSeparator/styles.d.ts

@@ -1,4 +1,5 @@
-import { MenuSeparatorTheme } from '@instructure/shared-types';
+import type { MenuSeparatorTheme } from '@instructure/shared-types';
+import type { MenuSeparatorStyle } from './props';
 /**
  * ---
  * private: true
@@ -9,14 +10,6 @@ import { MenuSeparatorTheme } from '@instructure/shared-types';
  * @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: MenuSeparatorTheme) => {
-    menuItemSeparator: {
-        label: string;
-        height: string | 0;
-        margin: string | 0;
-        overflow: string;
-        background: string;
-    };
-};
+declare const generateStyle: (componentTheme: MenuSeparatorTheme) => MenuSeparatorStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Menu/MenuItemSeparator/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItemSeparator/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAE9D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,kBAAkB;;;;;;;;CAUxD,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuItemSeparator/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEjD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,kBAAkB,KACjC,kBAUF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Menu/props.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { PropValidators, MenuTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 import type { PlacementPropValues, PositionConstraint, PositionMountNode } from '@instructure/ui-position';
 declare type MenuOwnProps = {
     children?: React.ReactNode;
@@ -33,9 +33,10 @@ declare type MenuOwnProps = {
 };
 declare type PropKeys = keyof MenuOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type MenuProps = MenuOwnProps & WithStyleProps;
+declare type MenuProps = MenuOwnProps & WithStyleProps<MenuTheme, MenuStyle>;
+declare type MenuStyle = ComponentStyle<'menu'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { MenuProps };
+export type { MenuProps, MenuStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Menu/props.ts"],"names":[],"mappings":";AAgCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,0BAA0B,CAAA;AAEjC,aAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,UAAU,CAAC,EACP,KAAK,CAAC,YAAY,EAAE,GACpB,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,CAAA;AAED,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,CA0HvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eA4BnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Menu/props.ts"],"names":[],"mappings":";AAgCA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,0BAA0B,CAAA;AAEjC,aAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,UAAU,CAAC,EACP,KAAK,CAAC,YAAY,EAAE,GACpB,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,CAAA;AAED,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,CAAC,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA0HvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eA4BnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Menu/styles.d.ts

@@ -1,4 +1,5 @@
-import { MenuTheme } from '@instructure/shared-types';
+import type { MenuTheme } from '@instructure/shared-types';
+import type { MenuStyle } from './props';
 /**
  * ---
  * private: true
@@ -9,38 +10,6 @@ import { MenuTheme } from '@instructure/shared-types';
  * @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: MenuTheme) => {
-    menu: {
-        label: string;
-        minWidth: string;
-        maxWidth: string;
-        listStyleType: string;
-        margin: string;
-        padding: string;
-        background: string;
-        display: string;
-        position: string;
-        '&::before': {
-            content: string;
-            position: string;
-            top: string;
-            left: string;
-            right: string;
-            bottom: string;
-            border: string;
-            borderRadius: string | 0;
-            opacity: number;
-            transform: string;
-            pointerEvents: string;
-        };
-        '&:focus': {
-            outline: string;
-            '&::before': {
-                opacity: number;
-                transform: string;
-            };
-        };
-    };
-};
+declare const generateStyle: (componentTheme: MenuTheme) => MenuStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Menu/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC/C,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Menu/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,SAAS,KAAG,SAkClD,CAAA;AAED,eAAe,aAAa,CAAA"}