@instructure/ui-view 8.8.1-snapshot.3 → 8.9.0

package/src/View/{types.ts → props.ts}

@@ -21,10 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+import React from 'react'
 import PropTypes from 'prop-types'
+
 import { cursor as cursorPropTypes } from '@instructure/ui-prop-types'
 import { bidirectional } from '@instructure/ui-i18n'
 import { ThemeablePropTypes } from '@instructure/emotion'
+
+import type { AsElementType, PropValidators } from '@instructure/shared-types'
 import type {
   WithStyleProps,
   Spacing,
@@ -33,9 +38,8 @@ import type {
   Shadow,
   Stacking
 } from '@instructure/emotion'
-import type { AsElementType } from '@instructure/shared-types'
 
-export type ViewOwnProps = {
+type ViewOwnProps = {
   /**
    * The element to render as the component root, `span` by default
    */
@@ -57,6 +61,10 @@ export type ViewOwnProps = {
   maxWidth?: string | number
   minHeight?: string | number
   minWidth?: string | number
+  /**
+   * The children to render inside the <View />
+   */
+  children?: React.ReactNode
   /**
    * Designates the text alignment within the `<View />`
    */
@@ -170,13 +178,13 @@ export type ViewOwnProps = {
   cursor?: any
 }
 
-export type ViewProps = ViewOwnProps & WithStyleProps
+type PropKeys = keyof ViewOwnProps
+
+type ViewProps = ViewOwnProps & WithStyleProps
 
-export type AllowedPropKeys = Readonly<
-  Array<keyof (ViewOwnProps & WithStyleProps)>
->
+type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-export const propTypes = {
+const propTypes: PropValidators<PropKeys> = {
   as: PropTypes.elementType,
   elementRef: PropTypes.func,
   display: PropTypes.oneOf([
@@ -243,20 +251,19 @@ export const propTypes = {
   focusColor: PropTypes.oneOf(['info', 'inverse', 'success', 'danger']),
   shouldAnimateFocus: PropTypes.bool,
   withVisualDebug: PropTypes.bool,
-  makeStyles: PropTypes.func,
-  styles: PropTypes.object,
   dir: PropTypes.oneOf(Object.values(bidirectional.DIRECTION))
 }
 
-//This variable will be attached as static property on the `View` component
-//so we don't rely on the `PropTypes` validators for our internal logic.
-//This means on prod builds the consuming applications can safely delete propTypes.
-export const allowedProps: AllowedPropKeys = [
+// This variable will be attached as static property on the `View` component
+// so we don't rely on the `PropTypes` validators for our internal logic.
+// This means on prod builds the consuming applications can safely delete propTypes.
+const allowedProps: AllowedPropKeys = [
   'as',
   'background',
   'borderColor',
   'borderRadius',
   'borderWidth',
+  'children',
   'cursor',
   'dir',
   'display',
@@ -268,7 +275,6 @@ export const allowedProps: AllowedPropKeys = [
   'insetBlockStart',
   'insetInlineEnd',
   'insetInlineStart',
-  'makeStyles',
   'margin',
   'maxHeight',
   'maxWidth',
@@ -281,9 +287,11 @@ export const allowedProps: AllowedPropKeys = [
   'shadow',
   'shouldAnimateFocus',
   'stacking',
-  'styles',
   'textAlign',
   'width',
   'withFocusOutline',
   'withVisualDebug'
 ]
+
+export { propTypes, allowedProps }
+export type { ViewProps }

package/src/View/styles.ts

@@ -34,7 +34,7 @@ import {
   PartialRecord,
   ViewTheme
 } from '@instructure/shared-types'
-import { ViewProps } from './types'
+import { ViewProps } from './props'
 
 const getBorderStyle = ({
   borderRadius,

package/src/index.ts

@@ -25,5 +25,5 @@
 export { ContextView } from './ContextView'
 export { View } from './View'
 
-export type { ContextViewProps } from './ContextView/types'
-export type { ViewProps } from './View/types'
+export type { ContextViewProps } from './ContextView/props'
+export type { ViewProps } from './View/props'

package/types/ContextView/index.d.ts

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@instructure/emotion';
 import { OtherHTMLAttributes } from '@instructure/shared-types';
-import { ContextViewProps } from './types';
+import type { ContextViewProps } from './props';
 /**
 ---
 category: components
@@ -11,66 +10,44 @@ category: components
 **/
 declare class ContextView extends Component<ContextViewProps & OtherHTMLAttributes<ContextViewProps>> {
     static readonly componentId = "ContextView";
-    static propTypes: {
-        /**
-         * The element to render as the component root
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * provides a reference to the underlying html root element
-         */
-        elementRef: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-         * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-         * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-         */
-        margin: (props: any, propName: any, componentName: any, location: any) => any;
-        /**
-         * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
-         * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-         * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
-         */
-        padding: (props: any, propName: any, componentName: any, location: any) => any;
-        height: PropTypes.Requireable<string | number>;
-        width: PropTypes.Requireable<string | number>;
-        maxHeight: PropTypes.Requireable<string | number>;
-        maxWidth: PropTypes.Requireable<string | number>;
-        minHeight: PropTypes.Requireable<string | number>;
-        minWidth: PropTypes.Requireable<string | number>;
-        /**
-         * The children to render inside the `<ContextView />`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Designates the text alignment within the `<ContextView />`
-         */
-        textAlign: PropTypes.Requireable<string>;
-        /**
-         * Controls the shadow depth for the `<ContextView />`
-         */
-        shadow: PropTypes.Requireable<"none" | "resting" | "above" | "topmost">;
-        /**
-         * Controls the z-index depth for the `<ContextView />`
-         */
-        stacking: PropTypes.Requireable<"resting" | "above" | "topmost" | "deepest" | "below">;
-        /**
-         * Designates the background style of the `<ContextView />`
-         */
-        background: PropTypes.Requireable<string>;
-        /**
-         * Specifies how the arrow for `<ContextView />` will be rendered.
-         * Ex. `placement="top"` will render with an arrow pointing down.
-         */
-        placement: PropTypes.Requireable<string>;
-        /**
-         * Activate an outline around the component to make building your
-         * layout easier
-         */
-        debug: PropTypes.Requireable<boolean>;
-        makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
-        styles: PropTypes.Requireable<object>;
-    };
+    static allowedProps: readonly (keyof {
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        height?: string | number | undefined;
+        width?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        children?: import("react").ReactNode;
+        textAlign?: "start" | "center" | "end" | undefined;
+        background?: "inverse" | "default" | undefined;
+        debug?: boolean | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        shadow?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Shadow | undefined;
+        stacking?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Stacking | undefined;
+        placement?: import("@instructure/ui-position").PlacementPropValues | undefined;
+    })[];
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        height?: string | number | undefined;
+        width?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        children?: import("react").ReactNode;
+        textAlign?: "start" | "center" | "end" | undefined;
+        background?: "inverse" | "default" | undefined;
+        debug?: boolean | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        shadow?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Shadow | undefined;
+        stacking?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Stacking | undefined;
+        placement?: import("@instructure/ui-position").PlacementPropValues | undefined;
+    }>;
     static defaultProps: {
         as: string;
         elementRef: () => void;
@@ -82,13 +59,6 @@ declare class ContextView extends Component<ContextViewProps & OtherHTMLAttribut
         background: string;
         shadow: string;
         placement: string;
-        margin: undefined;
-        padding: undefined;
-        stacking: undefined;
-        maxWidth: undefined;
-        minWidth: undefined;
-        maxHeight: undefined;
-        minHeight: undefined;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ContextView/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,GAAG,EAAiC,MAAM,sBAAsB,CAAA;AAGzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAM/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AAEH,cACM,WAAY,SAAQ,SAAS,CACjC,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CACzD;IACC,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAE3C,MAAM,CAAC,SAAS;QACd;;WAEG;;QAGH;;WAEG;;QAGH;;;;WAIG;;QAEH;;;;WAIG;;;;;;;;QAUH;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;QAGH;;;WAGG;;QAGH;;;WAGG;;;;MAOJ;IAED,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;MAkBlB;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CA2DP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ContextView/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAa,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAO/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;GAIG;AAEH,cACM,WAAY,SAAQ,SAAS,CACjC,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CACzD;IACC,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAC3C,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;MAWlB;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CA2DP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/types/ContextView/props.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { AsElementType, PropValidators } from '@instructure/shared-types';
+import type { PlacementPropValues } from '@instructure/ui-position';
+import type { Shadow, Spacing, Stacking, WithStyleProps } from '@instructure/emotion';
+declare type ContextViewOwnProps = {
+    as?: AsElementType;
+    elementRef?: (...args: any[]) => any;
+    height?: string | number;
+    width?: string | number;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    minHeight?: string | number;
+    minWidth?: string | number;
+    children?: React.ReactNode;
+    textAlign?: 'start' | 'center' | 'end';
+    background?: 'default' | 'inverse';
+    debug?: boolean;
+    margin?: Spacing;
+    padding?: Spacing;
+    shadow?: Shadow;
+    stacking?: Stacking;
+    placement?: PlacementPropValues;
+};
+declare type PropKeys = keyof ContextViewOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type ContextViewProps = ContextViewOwnProps & WithStyleProps;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { ContextViewProps };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/ContextView/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,KAAK,EACV,MAAM,EACN,OAAO,EACP,QAAQ,EACR,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,mBAAmB,GAAG;IACzB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,CAAC,EAAE,mBAAmB,CAAA;CAChC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GAAG,cAAc,CAAA;AAE5D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAmEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAkBnB,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/ContextView/styles.d.ts

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

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

@@ -1,4 +1,4 @@
-import { ViewProps } from '../types';
+import { ViewProps } from '../props';
 declare const _default: {
     maxExamplesPerPage: number;
     maxExamples: number;

package/types/View/index.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { Component, ComponentType } from 'react';
 import { jsx } from '@instructure/emotion';
-import { OtherHTMLAttributes } from '@instructure/shared-types';
-import { ViewProps } from './types';
+import type { OtherHTMLAttributes } from '@instructure/shared-types';
+import type { ViewProps } from './props';
 /**
 ---
 category: components
@@ -15,54 +15,86 @@ API:
 **/
 declare class View extends Component<ViewProps & OtherHTMLAttributes<ViewProps>> {
     static componentId: string;
-    static allowedProps: readonly ("styles" | "makeStyles" | keyof import("./types").ViewOwnProps)[];
-    static propTypes: {
-        as: import("prop-types").Requireable<import("prop-types").ReactComponentLike>;
-        elementRef: import("prop-types").Requireable<(...args: any[]) => any>;
-        display: import("prop-types").Requireable<string>;
-        overflowX: import("prop-types").Requireable<string>;
-        overflowY: import("prop-types").Requireable<string>;
-        margin: (props: any, propName: any, componentName: any, location: any) => any;
-        padding: (props: any, propName: any, componentName: any, location: any) => any;
-        height: import("prop-types").Requireable<string | number>;
-        width: import("prop-types").Requireable<string | number>;
-        maxHeight: import("prop-types").Requireable<string | number>;
-        maxWidth: import("prop-types").Requireable<string | number>;
-        minHeight: import("prop-types").Requireable<string | number>;
-        minWidth: import("prop-types").Requireable<string | number>;
-        children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
-        textAlign: import("prop-types").Requireable<string>;
-        borderWidth: (props: any, propName: any, componentName: any, location: any) => any;
-        borderRadius: (props: any, propName: any, componentName: any, location: any) => any;
-        borderColor: import("prop-types").Requireable<string>;
-        background: import("prop-types").Requireable<string>;
-        shadow: import("prop-types").Requireable<"none" | "resting" | "above" | "topmost">;
-        stacking: import("prop-types").Requireable<"resting" | "above" | "topmost" | "deepest" | "below">;
-        cursor: import("prop-types").Requireable<string>;
-        position: import("prop-types").Requireable<string>;
-        insetInlineStart: import("prop-types").Requireable<string>;
-        insetInlineEnd: import("prop-types").Requireable<string>;
-        insetBlockStart: import("prop-types").Requireable<string>;
-        insetBlockEnd: import("prop-types").Requireable<string>;
-        withFocusOutline: import("prop-types").Requireable<boolean>;
-        focusPosition: import("prop-types").Requireable<string>;
-        focusColor: import("prop-types").Requireable<string>;
-        shouldAnimateFocus: import("prop-types").Requireable<boolean>;
-        withVisualDebug: import("prop-types").Requireable<boolean>;
-        makeStyles: import("prop-types").Requireable<(...args: any[]) => any>;
-        styles: import("prop-types").Requireable<object>;
-        dir: import("prop-types").Requireable<string>;
-    };
-    static defaultProps: {
-        display: string;
-        overflowX: string;
-        overflowY: string;
+    static allowedProps: readonly (keyof {
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        elementRef?: ((element: HTMLElement | null) => void) | undefined;
+        display: "auto" | "inline" | "block" | "inline-block" | "flex" | "inline-flex";
+        overflowX: "auto" | "hidden" | "visible";
+        overflowY: "auto" | "hidden" | "visible";
+        height?: string | number | undefined;
+        width?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        children?: import("react").ReactNode;
+        textAlign?: "start" | "center" | "end" | undefined;
+        borderColor: "transparent" | "primary" | "secondary" | "brand" | "info" | "success" | "warning" | "alert" | "danger";
+        background?: "transparent" | "primary" | "secondary" | "brand" | "info" | "success" | "warning" | "alert" | "danger" | "primary-inverse" | undefined;
+        position: "static" | "absolute" | "relative" | "sticky" | "fixed";
+        insetInlineStart?: string | undefined;
+        insetInlineEnd?: string | undefined;
+        insetBlockStart?: string | undefined;
+        insetBlockEnd?: string | undefined;
+        withFocusOutline?: boolean | undefined;
+        focusPosition: "offset" | "inset";
+        focusColor: "info" | "success" | "danger" | "inverse";
+        shouldAnimateFocus: boolean;
         withVisualDebug: boolean;
-        borderColor: string;
-        position: string;
-        focusPosition: string;
-        focusColor: string;
+        dir?: "ltr" | "rtl" | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        borderWidth?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").BorderWidth | undefined;
+        borderRadius?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").BorderRadii | undefined;
+        shadow?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Shadow | undefined;
+        stacking?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Stacking | undefined;
+        cursor?: any;
+    })[];
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        elementRef?: ((element: HTMLElement | null) => void) | undefined;
+        display: "auto" | "inline" | "block" | "inline-block" | "flex" | "inline-flex";
+        overflowX: "auto" | "hidden" | "visible";
+        overflowY: "auto" | "hidden" | "visible";
+        height?: string | number | undefined;
+        width?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        children?: import("react").ReactNode;
+        textAlign?: "start" | "center" | "end" | undefined;
+        borderColor: "transparent" | "primary" | "secondary" | "brand" | "info" | "success" | "warning" | "alert" | "danger";
+        background?: "transparent" | "primary" | "secondary" | "brand" | "info" | "success" | "warning" | "alert" | "danger" | "primary-inverse" | undefined;
+        position: "static" | "absolute" | "relative" | "sticky" | "fixed";
+        insetInlineStart?: string | undefined;
+        insetInlineEnd?: string | undefined;
+        insetBlockStart?: string | undefined;
+        insetBlockEnd?: string | undefined;
+        withFocusOutline?: boolean | undefined;
+        focusPosition: "offset" | "inset";
+        focusColor: "info" | "success" | "danger" | "inverse";
         shouldAnimateFocus: boolean;
+        withVisualDebug: boolean;
+        dir?: "ltr" | "rtl" | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        borderWidth?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").BorderWidth | undefined;
+        borderRadius?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").BorderRadii | undefined;
+        shadow?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Shadow | undefined;
+        stacking?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Stacking | undefined;
+        cursor?: any;
+    }>;
+    static defaultProps: {
+        readonly display: "auto";
+        readonly overflowX: "visible";
+        readonly overflowY: "visible";
+        readonly withVisualDebug: false;
+        readonly borderColor: "primary";
+        readonly position: "static";
+        readonly focusPosition: "offset";
+        readonly focusColor: "info";
+        readonly shouldAnimateFocus: true;
     };
     /**
      * Removes View's own props from the given object. Automatically excludes the