@instructure/ui-navigation 8.9.1-snapshot.0 → 8.9.2-snapshot.12

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.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-navigation
+
 # [8.9.0](https://github.com/instructure/instructure-ui/compare/v8.8.0...v8.9.0) (2021-09-15)
 
 ### Bug Fixes

package/README.md

@@ -5,7 +5,6 @@ category: packages
 ## ui-navigation
 
 [![npm][npm]][npm-url] 
-[![build-status][build-status]][build-status-url] 
 [![MIT License][license-badge]][license] 
 [![Code of Conduct][coc-badge]][coc]
 

package/es/AppNav/index.js

@@ -182,7 +182,7 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
           screenReaderLabel = _this$props3.screenReaderLabel,
           margin = _this$props3.margin,
           elementRef = _this$props3.elementRef;
-    const passthroughProps = View.omitViewProps(omitProps(this.props, AppNav.propTypes), AppNav);
+    const passthroughProps = View.omitViewProps(omitProps(this.props, AppNav.allowedProps), AppNav);
     const isMeasuring = this.state.isMeasuring;
     const childrenArray = Children.toArray(children);
     const visibleChildren = isMeasuring ? childrenArray : childrenArray.splice(0, visibleItemsCount);

package/es/Navigation/NavigationItem/index.js

@@ -67,7 +67,7 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
           onClick = _this$props3.onClick,
           icon = _this$props3.icon,
           label = _this$props3.label;
-    const props = omitProps(this.props, NavigationItem.propTypes);
+    const props = omitProps(this.props, NavigationItem.allowedProps);
     return jsx(ElementType, Object.assign({}, props, {
       href: href,
       onClick: onClick,

package/es/Navigation/index.js

@@ -114,7 +114,7 @@ let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     var _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5;
 
     const label = this.props.label;
-    const props = omitProps(this.props, Navigation.propTypes, ['minimized']);
+    const props = omitProps(this.props, Navigation.allowedProps, ['minimized']);
     return jsx("nav", Object.assign({}, props, {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
       "aria-label": label

package/lib/AppNav/index.js

@@ -181,7 +181,7 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
           margin = _this$props3.margin,
           elementRef = _this$props3.elementRef;
 
-    const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, AppNav.propTypes), AppNav);
+    const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, AppNav.allowedProps), AppNav);
 
     const isMeasuring = this.state.isMeasuring;
 

package/lib/Navigation/NavigationItem/index.js

@@ -61,7 +61,7 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           onClick = _this$props3.onClick,
           icon = _this$props3.icon,
           label = _this$props3.label;
-    const props = (0, _omitProps.omitProps)(this.props, NavigationItem.propTypes);
+    const props = (0, _omitProps.omitProps)(this.props, NavigationItem.allowedProps);
     return (0, _emotion.jsx)(ElementType, Object.assign({}, props, {
       href: href,
       onClick: onClick,

package/lib/Navigation/index.js

@@ -115,7 +115,7 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     var _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5;
 
     const label = this.props.label;
-    const props = (0, _omitProps.omitProps)(this.props, Navigation.propTypes, ['minimized']);
+    const props = (0, _omitProps.omitProps)(this.props, Navigation.allowedProps, ['minimized']);
     return (0, _emotion.jsx)("nav", Object.assign({}, props, {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
       "aria-label": label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-navigation",
-  "version": "8.9.1-snapshot.0+000c779bb",
+  "version": "8.9.2-snapshot.12+6231ada93",
   "description": "Main and application level navigational components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,31 +24,31 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-color-utils": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-test-locator": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-test-utils": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-themes": "8.9.1-snapshot.0+000c779bb"
+    "@instructure/ui-babel-preset": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-color-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-test-locator": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-test-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-themes": "8.9.2-snapshot.12+6231ada93"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/debounce": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/emotion": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/shared-types": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-a11y-content": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-a11y-utils": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-badge": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-dom-utils": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-focusable": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-icons": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-menu": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-prop-types": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-react-utils": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-testable": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-tooltip": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-utils": "8.9.1-snapshot.0+000c779bb",
-    "@instructure/ui-view": "8.9.1-snapshot.0+000c779bb",
+    "@instructure/console": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/debounce": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/emotion": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/shared-types": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-a11y-content": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-a11y-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-badge": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-dom-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-focusable": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-icons": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-menu": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-prop-types": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-react-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-testable": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-tooltip": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-view": "8.9.2-snapshot.12+6231ada93",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -58,5 +58,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "000c779bb16c575bcfeb4a6c71d8cef1d768db01"
+  "gitHead": "6231ada93bd4299d640b5d39d7e44b0f54852b2a"
 }

package/src/AppNav/Item/props.ts

@@ -23,8 +23,12 @@
  */
 import PropTypes from 'prop-types'
 
-import type { AsElementType, PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type {
+  AsElementType,
+  PropValidators,
+  AppNavItemTheme
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type AppNavItemOwnProps = {
   renderLabel: React.ReactNode | ((...args: any[]) => any)
@@ -43,7 +47,10 @@ type PropKeys = keyof AppNavItemOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type AppNavItemProps = AppNavItemOwnProps & WithStyleProps
+type AppNavItemProps = AppNavItemOwnProps &
+  WithStyleProps<AppNavItemTheme, AppNavItemStyle>
+
+type AppNavItemStyle = ComponentStyle<'item' | 'label'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -103,5 +110,5 @@ const allowedProps: AllowedPropKeys = [
   'isDisabled'
 ]
 
-export type { AppNavItemProps }
+export type { AppNavItemProps, AppNavItemStyle }
 export { propTypes, allowedProps }

package/src/AppNav/Item/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { AppNavItemTheme } from '@instructure/shared-types'
-import { AppNavItemProps } from './props'
+import type { AppNavItemTheme } from '@instructure/shared-types'
+import type { AppNavItemProps, AppNavItemStyle } from './props'
 
 /**
  * ---
@@ -38,7 +38,7 @@ import { AppNavItemProps } from './props'
 const generateStyle = (
   componentTheme: AppNavItemTheme,
   props: AppNavItemProps
-) => {
+): AppNavItemStyle => {
   const { isSelected, isDisabled } = props
 
   const itemStyles = {

package/src/AppNav/index.tsx

@@ -221,7 +221,7 @@ class AppNav extends Component<AppNavProps> {
     } = this.props
 
     const passthroughProps = View.omitViewProps(
-      omitProps(this.props, AppNav.propTypes),
+      omitProps(this.props, AppNav.allowedProps),
       AppNav
     )
 

package/src/AppNav/props.ts

@@ -29,8 +29,12 @@ import { ThemeablePropTypes } from '@instructure/emotion'
 
 import { Item } from './Item'
 
-import type { Spacing, WithStyleProps } from '@instructure/emotion'
-import type { PropValidators } from '@instructure/shared-types'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type { PropValidators, AppNavTheme } from '@instructure/shared-types'
 
 type AppNavOwnProps = {
   screenReaderLabel: string
@@ -49,7 +53,16 @@ type PropKeys = keyof AppNavOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type AppNavProps = AppNavOwnProps & WithStyleProps
+type AppNavProps = AppNavOwnProps & WithStyleProps<AppNavTheme, AppNavStyle>
+
+type AppNavStyle = ComponentStyle<
+  | 'appNav'
+  | 'alignCenter'
+  | 'listItemWithMenuTrigger'
+  | 'listItem'
+  | 'list'
+  | 'menuTriggerWidth'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -114,5 +127,5 @@ const allowedProps: AllowedPropKeys = [
   'visibleItemsCount'
 ]
 
-export type { AppNavProps }
+export type { AppNavProps, AppNavStyle }
 export { propTypes, allowedProps }

package/src/AppNav/styles.ts

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

package/src/Navigation/NavigationItem/index.tsx

@@ -70,7 +70,7 @@ class NavigationItem extends Component<NavigationItemProps> {
 
     const { href, onClick, icon, label } = this.props
 
-    const props = omitProps(this.props, NavigationItem.propTypes)
+    const props = omitProps(this.props, NavigationItem.allowedProps)
 
     return (
       <ElementType

package/src/Navigation/NavigationItem/props.ts

@@ -23,8 +23,12 @@
  */
 import PropTypes from 'prop-types'
 
-import type { AsElementType, PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type {
+  AsElementType,
+  PropValidators,
+  NavigationItemTheme
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type NavigationItemOwnProps = {
   icon: React.ReactNode
@@ -40,7 +44,10 @@ type PropKeys = keyof NavigationItemOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type NavigationItemProps = NavigationItemOwnProps & WithStyleProps
+type NavigationItemProps = NavigationItemOwnProps &
+  WithStyleProps<NavigationItemTheme, NavigationItemStyle>
+
+type NavigationItemStyle = ComponentStyle<'navigationItem' | 'icon' | 'label'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -83,5 +90,5 @@ const allowedProps: AllowedPropKeys = [
   'minimized'
 ]
 
-export type { NavigationItemProps }
+export type { NavigationItemProps, NavigationItemStyle }
 export { propTypes, allowedProps }

package/src/Navigation/NavigationItem/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { NavigationItemTheme } from '@instructure/shared-types'
-import { NavigationItemProps } from './props'
+import type { NavigationItemTheme } from '@instructure/shared-types'
+import type { NavigationItemProps, NavigationItemStyle } from './props'
 
 /**
  * ---
@@ -38,7 +38,7 @@ import { NavigationItemProps } from './props'
 const generateStyle = (
   componentTheme: NavigationItemTheme,
   props: NavigationItemProps
-) => {
+): NavigationItemStyle => {
   const { selected } = props
 
   return {

package/src/Navigation/index.tsx

@@ -124,7 +124,7 @@ class Navigation extends Component<NavigationProps, NavigationState> {
   render() {
     const { label } = this.props
 
-    const props = omitProps(this.props, Navigation.propTypes, ['minimized'])
+    const props = omitProps(this.props, Navigation.allowedProps, ['minimized'])
 
     return (
       <nav {...props} css={this.props.styles?.navigation} aria-label={label}>

package/src/Navigation/props.ts

@@ -31,8 +31,8 @@ import {
 
 import { NavigationItem } from './NavigationItem'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, NavigationTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type NavigationOwnProps = {
   minimized?: any // TODO: controllable(PropTypes.bool, 'onMinimized', 'defaultMinimized')
@@ -56,7 +56,12 @@ type PropKeys = keyof NavigationOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type NavigationProps = NavigationOwnProps & WithStyleProps
+type NavigationProps = NavigationOwnProps &
+  WithStyleProps<NavigationTheme, NavigationStyle>
+
+type NavigationStyle = ComponentStyle<
+  'navigation' | 'list' | 'content' | 'toggle' | 'toggleIcon'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -104,5 +109,5 @@ const allowedProps: AllowedPropKeys = [
   'onClick'
 ]
 
-export type { NavigationProps, NavigationState }
+export type { NavigationProps, NavigationState, NavigationStyle }
 export { propTypes, allowedProps }

package/src/Navigation/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { NavigationTheme } from '@instructure/shared-types'
-import { NavigationProps, NavigationState } from './props'
+import type { NavigationTheme } from '@instructure/shared-types'
+import type { NavigationProps, NavigationState, NavigationStyle } from './props'
 
 /**
  * ---
@@ -40,7 +40,7 @@ const generateStyle = (
   // @ts-expect-error no props used here
   props: NavigationProps,
   state: NavigationState
-) => {
+): NavigationStyle => {
   const { minimized } = state
 
   return {

package/types/AppNav/Item/props.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { AsElementType, PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { AsElementType, PropValidators, AppNavItemTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type AppNavItemOwnProps = {
     renderLabel: React.ReactNode | ((...args: any[]) => any);
     renderAfter?: React.ReactNode | ((...args: any[]) => any);
@@ -15,9 +15,10 @@ declare type AppNavItemOwnProps = {
 };
 declare type PropKeys = keyof AppNavItemOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type AppNavItemProps = AppNavItemOwnProps & WithStyleProps;
+declare type AppNavItemProps = AppNavItemOwnProps & WithStyleProps<AppNavItemTheme, AppNavItemStyle>;
+declare type AppNavItemStyle = ComponentStyle<'item' | 'label'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { AppNavItemProps };
+export type { AppNavItemProps, AppNavItemStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/AppNav/Item/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/AppNav/Item/props.ts"],"names":[],"mappings":";AAyBA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACzD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,eAAe,GAAG,kBAAkB,GAAG,cAAc,CAAA;AAE1D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA2CvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAWnB,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/AppNav/Item/props.ts"],"names":[],"mappings":";AAyBA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,eAAe,EAChB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACzD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,eAAe,GAAG,kBAAkB,GACvC,cAAc,CAAC,eAAe,EAAE,eAAe,CAAC,CAAA;AAElD,aAAK,eAAe,GAAG,cAAc,CAAC,MAAM,GAAG,OAAO,CAAC,CAAA;AAEvD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA2CvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAWnB,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/AppNav/Item/styles.d.ts

@@ -1,5 +1,5 @@
-import { AppNavItemTheme } from '@instructure/shared-types';
-import { AppNavItemProps } from './props';
+import type { AppNavItemTheme } from '@instructure/shared-types';
+import type { AppNavItemProps, AppNavItemStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,82 +10,6 @@ import { AppNavItemProps } 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: AppNavItemTheme, props: AppNavItemProps) => {
-    item: {
-        '&:is(a), &:is(button)': {
-            pointerEvents?: string | undefined;
-            opacity?: number | undefined;
-            appearance: string;
-            overflow: string;
-            direction: string;
-            margin: string;
-            textDecoration: string;
-            userSelect: string;
-            touchAction: string;
-            background: string;
-            border: string;
-            outline: string;
-            lineHeight: string | 0;
-            padding: string;
-            alignItems: string;
-            '&:hover': {
-                textDecoration: string;
-                textDecorationColor: string;
-            };
-        };
-        '&:-webkit-any(a), &:-webkit-any(button)': {
-            pointerEvents?: string | undefined;
-            opacity?: number | undefined;
-            appearance: string;
-            overflow: string;
-            direction: string;
-            margin: string;
-            textDecoration: string;
-            userSelect: string;
-            touchAction: string;
-            background: string;
-            border: string;
-            outline: string;
-            lineHeight: string | 0;
-            padding: string;
-            alignItems: string;
-            '&:hover': {
-                textDecoration: string;
-                textDecorationColor: string;
-            };
-        };
-        pointerEvents?: string | undefined;
-        opacity?: number | undefined;
-        appearance: string;
-        overflow: string;
-        direction: string;
-        margin: string;
-        textDecoration: string;
-        userSelect: string;
-        touchAction: string;
-        background: string;
-        border: string;
-        outline: string;
-        lineHeight: string | 0;
-        padding: string;
-        alignItems: string;
-        '&:hover': {
-            textDecoration: string;
-            textDecorationColor: string;
-        };
-        label: string;
-    };
-    label: {
-        color: string;
-        textDecoration?: string | undefined;
-        label: string;
-        whiteSpace: string;
-        overflow: string;
-        textOverflow: string;
-        fontFamily: string;
-        fontSize: string | 0;
-        fontWeight: number;
-    };
-};
+declare const generateStyle: (componentTheme: AppNavItemTheme, props: AppNavItemProps) => AppNavItemStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/AppNav/Item/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/AppNav/Item/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,eAAe,SACxB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDvB,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/AppNav/Item/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE/D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,eAAe,SACxB,eAAe,KACrB,eAsDF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/AppNav/props.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Spacing, WithStyleProps } from '@instructure/emotion';
-import type { PropValidators } from '@instructure/shared-types';
+import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { PropValidators, AppNavTheme } from '@instructure/shared-types';
 declare type AppNavOwnProps = {
     screenReaderLabel: string;
     debounce?: number;
@@ -15,9 +15,10 @@ declare type AppNavOwnProps = {
 };
 declare type PropKeys = keyof AppNavOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type AppNavProps = AppNavOwnProps & WithStyleProps;
+declare type AppNavProps = AppNavOwnProps & WithStyleProps<AppNavTheme, AppNavStyle>;
+declare type AppNavStyle = ComponentStyle<'appNav' | 'alignCenter' | 'listItemWithMenuTrigger' | 'listItem' | 'list' | 'menuTriggerWidth'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { AppNavProps };
+export type { AppNavProps, AppNavStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/AppNav/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,cAAc,GAAG;IACpB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC/D,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACjE,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAAG,cAAc,CAAA;AAElD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAgDvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAWnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/AppNav/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAE5E,aAAK,cAAc,GAAG;IACpB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC/D,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACjE,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;AAE5E,aAAK,WAAW,GAAG,cAAc,CAC7B,QAAQ,GACR,aAAa,GACb,yBAAyB,GACzB,UAAU,GACV,MAAM,GACN,kBAAkB,CACrB,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAgDvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAWnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/AppNav/styles.d.ts

@@ -1,4 +1,5 @@
-import { AppNavTheme } from '@instructure/shared-types';
+import type { AppNavTheme } from '@instructure/shared-types';
+import type { AppNavStyle } from './props';
 /**
  * ---
  * private: true
@@ -9,45 +10,6 @@ import { AppNavTheme } 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: AppNavTheme) => {
-    appNav: {
-        label: string;
-        fontFamily: string;
-        borderBottom: string;
-    };
-    alignCenter: {
-        alignItems: string;
-    };
-    listItemWithMenuTrigger: {
-        label: string;
-        minWidth: string;
-        marginInlineStart: string | 0;
-        marginInlineEnd: string;
-        flexShrink: number;
-        flexBasis: string | 0;
-    };
-    listItem: {
-        label: string;
-        minWidth: string;
-        marginInlineStart: string | 0;
-        marginInlineEnd: string;
-        flexShrink: number;
-    };
-    list: {
-        label: string;
-        boxSizing: string;
-        listStyleType: string;
-        height: string | 0;
-        margin: string;
-        padding: string;
-        display: string;
-        alignItems: string;
-        flexGrow: number;
-        flexShrink: number;
-        flexBasis: string;
-        minWidth: string;
-    };
-    menuTriggerWidth: string | 0;
-};
+declare const generateStyle: (componentTheme: AppNavTheme) => AppNavStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/AppNav/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAEvD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCjD,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/AppNav/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,WAAW,KAAG,WAyCpD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Navigation/NavigationItem/props.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { AsElementType, PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { AsElementType, PropValidators, NavigationItemTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type NavigationItemOwnProps = {
     icon: React.ReactNode;
     label: React.ReactNode;
@@ -12,9 +12,10 @@ declare type NavigationItemOwnProps = {
 };
 declare type PropKeys = keyof NavigationItemOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type NavigationItemProps = NavigationItemOwnProps & WithStyleProps;
+declare type NavigationItemProps = NavigationItemOwnProps & WithStyleProps<NavigationItemTheme, NavigationItemStyle>;
+declare type NavigationItemStyle = ComponentStyle<'navigationItem' | 'icon' | 'label'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { NavigationItemProps };
+export type { NavigationItemProps, NavigationItemStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Navigation/NavigationItem/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Navigation/NavigationItem/props.ts"],"names":[],"mappings":";AAyBA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,sBAAsB,CAAA;AAE5C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,mBAAmB,GAAG,sBAAsB,GAAG,cAAc,CAAA;AAElE,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA6BvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAQnB,CAAA;AAED,YAAY,EAAE,mBAAmB,EAAE,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Navigation/NavigationItem/props.ts"],"names":[],"mappings":";AAyBA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,sBAAsB,CAAA;AAE5C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,mBAAmB,GAAG,sBAAsB,GAC/C,cAAc,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAA;AAE1D,aAAK,mBAAmB,GAAG,cAAc,CAAC,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;AAE9E,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA6BvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAQnB,CAAA;AAED,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Navigation/NavigationItem/styles.d.ts

@@ -1,5 +1,5 @@
-import { NavigationItemTheme } from '@instructure/shared-types';
-import { NavigationItemProps } from './props';
+import type { NavigationItemTheme } from '@instructure/shared-types';
+import type { NavigationItemProps, NavigationItemStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,72 +10,6 @@ import { NavigationItemProps } 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: NavigationItemTheme, props: NavigationItemProps) => {
-    navigationItem: {
-        backgroundColor: string;
-        fill: string;
-        color: string;
-        '&:active, &:hover': {
-            backgroundColor: string;
-        };
-        '&:focus': {
-            backgroundColor: string;
-            boxShadow: string;
-            outline: string;
-        };
-        label: string;
-        fontFamily: string;
-        fontWeight: number;
-        display: string;
-        width: string;
-        textAlign: string;
-        padding: string | 0;
-        cursor: string;
-        border: string;
-        boxSizing: string;
-        textDecoration: string;
-        overflowWrap: string;
-        wordWrap: string;
-        hyphens: string;
-    } | {
-        backgroundColor: string;
-        color: string;
-        '&:active': {
-            backgroundColor: string;
-        };
-        '&:hover': {
-            backgroundColor: string;
-        };
-        '&:focus': {
-            backgroundColor: string;
-            boxShadow: string;
-            outline: string;
-        };
-        label: string;
-        fontFamily: string;
-        fontWeight: number;
-        display: string;
-        width: string;
-        textAlign: string;
-        padding: string | 0;
-        cursor: string;
-        border: string;
-        boxSizing: string;
-        textDecoration: string;
-        overflowWrap: string;
-        wordWrap: string;
-        hyphens: string;
-    };
-    icon: {
-        label: string;
-        fontSize: string | 0;
-        fill: string;
-    };
-    label: {
-        label: string;
-        fontSize: string | 0;
-        lineHeight: string | number;
-    };
-};
+declare const generateStyle: (componentTheme: NavigationItemTheme, props: NavigationItemProps) => NavigationItemStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Navigation/NavigationItem/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Navigation/NavigationItem/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,mBAAmB,SAC5B,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Navigation/NavigationItem/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AACpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEvE;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,mBAAmB,SAC5B,mBAAmB,KACzB,mBA4DF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Navigation/props.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { PropValidators, NavigationTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type NavigationOwnProps = {
     minimized?: any;
     defaultMinimized?: boolean;
@@ -19,9 +19,10 @@ declare type NavigationState = {
 };
 declare type PropKeys = keyof NavigationOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type NavigationProps = NavigationOwnProps & WithStyleProps;
+declare type NavigationProps = NavigationOwnProps & WithStyleProps<NavigationTheme, NavigationStyle>;
+declare type NavigationStyle = ComponentStyle<'navigation' | 'list' | 'content' | 'toggle' | 'toggleIcon'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { NavigationProps, NavigationState };
+export type { NavigationProps, NavigationState, NavigationStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Navigation/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE;QACX,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,cAAc,CAAC,EAAE,MAAM,CAAA;KACxB,CAAA;IACD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,eAAe,GAAG,kBAAkB,GAAG,cAAc,CAAA;AAE1D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAiCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eASnB,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Navigation/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE;QACX,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,cAAc,CAAC,EAAE,MAAM,CAAA;KACxB,CAAA;IACD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,eAAe,GAAG,kBAAkB,GACvC,cAAc,CAAC,eAAe,EAAE,eAAe,CAAC,CAAA;AAElD,aAAK,eAAe,GAAG,cAAc,CACnC,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAC5D,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAiCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eASnB,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Navigation/styles.d.ts

@@ -1,5 +1,5 @@
-import { NavigationTheme } from '@instructure/shared-types';
-import { NavigationProps, NavigationState } from './props';
+import type { NavigationTheme } from '@instructure/shared-types';
+import type { NavigationProps, NavigationState, NavigationStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,38 +10,6 @@ import { NavigationProps, NavigationState } 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: NavigationTheme, props: NavigationProps, state: NavigationState) => {
-    navigation: {
-        width: string;
-        label: string;
-        color: string;
-        backgroundColor: string;
-        boxSizing: string;
-        display: string;
-        flexDirection: string;
-        height: string;
-        overflowY: string;
-    };
-    list: {
-        label: string;
-        padding: number;
-        margin: number;
-    };
-    content: {
-        label: string;
-        listStyleType: string;
-        margin: string;
-        padding: string;
-        flex: string;
-    };
-    toggle: {
-        transform: string;
-        transition: string;
-    };
-    toggleIcon: {
-        fill: string;
-        margin: string;
-    };
-};
+declare const generateStyle: (componentTheme: NavigationTheme, props: NavigationProps, state: NavigationState) => NavigationStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Navigation/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE1D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,eAAe,SAExB,eAAe,SACf,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCvB,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Navigation/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEhF;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,eAAe,SAExB,eAAe,SACf,eAAe,KACrB,eAsCF,CAAA;AAED,eAAe,aAAa,CAAA"}