diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54a4e047c4..c606b29b54 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Restrict Typescript checks for component props @kuzhelov ([#1290](https://github.com/stardust-ui/react/pull/1290))
+
 <!--------------------------------[ v0.30.0 ]------------------------------- -->
 ## [v0.30.0](https://github.com/stardust-ui/react/tree/v0.30.0) (2019-05-10)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.29.1...v0.30.0)
diff --git a/build/gulp/tasks/test-projects/cra/App.tsx b/build/gulp/tasks/test-projects/cra/App.tsx
index 6692ce48ea..ab350e653f 100644
--- a/build/gulp/tasks/test-projects/cra/App.tsx
+++ b/build/gulp/tasks/test-projects/cra/App.tsx
@@ -25,7 +25,7 @@ class App extends React.Component {
             <Icon name="umbrella" circular bordered />
           </Animation>
           <Attachment header="Document.docx" />
-          <Avatar src="//placehold.it" />
+          <Avatar image="//placehold.it" />
           <Button content="Click me" />
           <Divider />
           <Header content="This is " />
diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
index 5f8487f128..d1a6377884 100644
--- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
+++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
@@ -68,8 +68,6 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
       <Menu
         {...rest}
         fluid
-        icon="labeled"
-        size="tiny"
         pills
         accessibility={toolbarBehavior}
         items={[
diff --git a/docs/src/components/ComponentDoc/ComponentDoc.tsx b/docs/src/components/ComponentDoc/ComponentDoc.tsx
index d3b2f8307d..01f469f5f6 100644
--- a/docs/src/components/ComponentDoc/ComponentDoc.tsx
+++ b/docs/src/components/ComponentDoc/ComponentDoc.tsx
@@ -113,7 +113,7 @@ class ComponentDoc extends React.Component<any, any> {
                 <Flex.Item>
                   <Header
                     as="h1"
-                    aria-level="2"
+                    aria-level={2}
                     content={info.displayName}
                     variables={{ color: 'black' }}
                   />
diff --git a/docs/src/components/ComponentDoc/ComponentDocSee.tsx b/docs/src/components/ComponentDoc/ComponentDocSee.tsx
index 0f050d33a8..f837f63dae 100644
--- a/docs/src/components/ComponentDoc/ComponentDocSee.tsx
+++ b/docs/src/components/ComponentDoc/ComponentDocSee.tsx
@@ -16,7 +16,7 @@ const ComponentDocSee: any = ({ displayName }) => {
     <List styles={listStyle}>
       {/* Heads up! Still render empty lists to reserve the whitespace */}
       <List.Item>
-        <Header color="grey" content={items.length > 0 ? 'See:' : ' '} size="tiny" />
+        <Header color="grey" content={items.length > 0 ? 'See:' : ' '} />
       </List.Item>
       {_.map(items, info => (
         <List.Item
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 2cceb1a254..c67e10b78a 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -360,7 +360,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
     return (
       <Menu
-        size="small"
+        primary
         underlined
         activeIndex={-1}
         styles={codeEditorStyle}
@@ -387,10 +387,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
             } as React.CSSProperties
           }
         >
-          <Menu
-            size="small"
-            styles={{ display: 'flex', justifyContent: 'space-between', border: 'none' }}
-          >
+          <Menu styles={{ display: 'flex', justifyContent: 'space-between', border: 'none' }}>
             {this.renderAPIsMenu()}
             {this.renderLanguagesMenu()}
           </Menu>
@@ -408,7 +405,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       <SourceRender.Consumer>
         {({ error }) =>
           error && (
-            <Segment inverted color="red" size="small">
+            <Segment inverted color="red">
               <pre style={{ whiteSpace: 'pre-wrap' }}>{error.toString()}</pre>
             </Segment>
           )
diff --git a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.tsx b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.tsx
index 82e495e3d4..8ddd0e54d9 100644
--- a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.tsx
+++ b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.tsx
@@ -14,7 +14,6 @@ const sidebarStyle = {
 type ComponentSidebarProps = {
   activePath: string
   displayName: string
-  examplesRef: HTMLElement
   onItemClick: (e: React.SyntheticEvent, { examplePath: string }) => void
 }
 
@@ -38,7 +37,7 @@ class ComponentSidebar extends React.Component<ComponentSidebarProps, any> {
   }
 
   render() {
-    const { activePath, examplesRef, onItemClick } = this.props
+    const { activePath, onItemClick } = this.props
     const { sections } = this.state
 
     const menuItems = _.map(sections, ({ examples, sectionName, index }) => ({
@@ -56,7 +55,7 @@ class ComponentSidebar extends React.Component<ComponentSidebarProps, any> {
 
     // TODO: use a Sticky component instead of position:fixed, when available
     return (
-      <Segment context={examplesRef} styles={{ padding: 0, position: 'fixed' }}>
+      <Segment styles={{ padding: 0, position: 'fixed' }}>
         <Menu fluid vertical items={menuItems} styles={{ ...sidebarStyle }} />
       </Segment>
     )
diff --git a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx
index 8566b29f82..17ced7b411 100644
--- a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx
+++ b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx
@@ -96,14 +96,13 @@ export default class ComponentSidebarSection extends React.PureComponent<any, an
         {...restProps}
         styles={treeStyles}
         active={active}
+        onClick={this.handleTitleClick}
       >
         <span>{content}</span>
-        {hasSubtree && <Icon direction={name ? 'arrow-down' : 'arrow-end'} />}
+        {hasSubtree && <Icon name="arrow-down" />}
       </Component>
     )
 
-    return (
-      <Tree items={items} onTitleClick={this.handleTitleClick} renderItemTitle={titleRenderer} />
-    )
+    return <Tree items={items} renderItemTitle={titleRenderer} />
   }
 }
diff --git a/docs/src/components/DocPage/DocPage.tsx b/docs/src/components/DocPage/DocPage.tsx
index c4c1dc3dbc..4c689984d0 100644
--- a/docs/src/components/DocPage/DocPage.tsx
+++ b/docs/src/components/DocPage/DocPage.tsx
@@ -11,7 +11,7 @@ interface DocPageProps {
 const DocPage = ({ title, description, children }: DocPageProps) => (
   <DocumentTitle title={`Stardust - ${title}`}>
     <div style={{ padding: '2rem', fontSize: '1.15rem', maxWidth: '80ch' }}>
-      <Header as="h1" aria-level="2" content={title} description={description} textAlign="center" />
+      <Header as="h1" aria-level={2} content={title} description={description} textAlign="center" />
       {children}
     </div>
   </DocumentTitle>
diff --git a/docs/src/components/DocsBehaviorRoot.tsx b/docs/src/components/DocsBehaviorRoot.tsx
index 50fc48cf0a..e6f9710c49 100644
--- a/docs/src/components/DocsBehaviorRoot.tsx
+++ b/docs/src/components/DocsBehaviorRoot.tsx
@@ -37,7 +37,7 @@ class DocsBehaviorRoot extends React.Component<any, any> {
         <Segment>
           <Header
             as="h1"
-            aria-level="2"
+            aria-level={2}
             content={pageTitle}
             description={`Keyboard and Screenreader options for ${match.params.name} component.`}
           />
diff --git a/docs/src/components/Logo/Logo.tsx b/docs/src/components/Logo/Logo.tsx
index be67e16777..bcb427e4ef 100644
--- a/docs/src/components/Logo/Logo.tsx
+++ b/docs/src/components/Logo/Logo.tsx
@@ -3,6 +3,4 @@ import { Image } from '@stardust-ui/react'
 
 const Logo: any = props => <Image {...props} src="logo.png" />
 
-Logo.propTypes = Image.propTypes
-
 export default Logo
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index 1baaa036bc..36ce400d27 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -478,7 +478,7 @@ class Sidebar extends React.Component<any, any> {
           <Logo width="32px" styles={logoStyles} />
           <Text
             role="heading"
-            aria-level="1"
+            aria-level={1}
             color="white"
             content="Stardust UI React &nbsp;"
             styles={logoStyles}
diff --git a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx
index 7f6cc128e1..5b462c96e9 100644
--- a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx
@@ -1,13 +1,9 @@
-import { useBooleanKnob } from '@stardust-ui/docs-components'
 import { ItemLayout, Image } from '@stardust-ui/react'
 import * as React from 'react'
 
 const ItemLayoutExampleSelectionShorthand = () => {
-  const [selection] = useBooleanKnob({ name: 'selection', initialValue: true })
-
   return (
     <ItemLayout
-      selection={selection}
       media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
diff --git a/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx b/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
index 20a6a36d96..9d13c50341 100644
--- a/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
@@ -42,7 +42,7 @@ class PortalExamplePortal extends React.Component {
         <Divider />
         <div>
           <Flex gap="gap.small" vAlign="center">
-            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <Button onClick={this.clearLog} content="Clear" />
             <span>
               Event Log <Label circular>{logCount}</Label>
             </span>
diff --git a/docs/src/examples/components/Portal/Types/PortalExample.tsx b/docs/src/examples/components/Portal/Types/PortalExample.tsx
index f72eb62eeb..d91380951c 100644
--- a/docs/src/examples/components/Portal/Types/PortalExample.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExample.tsx
@@ -39,7 +39,7 @@ class PortalExamplePortal extends React.Component {
         <Divider />
         <div>
           <Flex gap="gap.small" vAlign="center">
-            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <Button onClick={this.clearLog} content="Clear" />
             <span>
               Event Log <Label circular>{logCount}</Label>
             </span>
diff --git a/docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx b/docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx
index d9c696a3ff..35c40c27cf 100644
--- a/docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx
@@ -28,7 +28,7 @@ class PortalExampleControlled extends React.Component {
           <Divider />
 
           <Flex gap="gap.small" vAlign="center">
-            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <Button onClick={this.clearLog} content="Clear" />
             <span>
               Event Log <Label circular>{logCount}</Label>
             </span>
diff --git a/docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx b/docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx
index f3074de92f..6e41a70447 100644
--- a/docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx
@@ -28,7 +28,7 @@ class PortalExampleControlled extends React.Component {
           <Divider />
 
           <Flex gap="gap.small" vAlign="center">
-            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <Button onClick={this.clearLog} content="Clear" />
             <span>
               Event Log <Label circular>{logCount}</Label>
             </span>
diff --git a/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx b/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx
index f1620d44f8..7727851529 100644
--- a/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx
@@ -64,8 +64,8 @@ class PortalExampleFocusTrapped extends React.Component {
                 Portal doesn't close on outside click. See passed focus trap props.
               </p>
               <p tabIndex={0}>To close, simply click the close button</p>
-              <Button size="small" content="Do nothing" />
-              <Button size="small" content="Close popup" onClick={this.closePortal} />
+              <Button content="Do nothing" />
+              <Button content="Close popup" onClick={this.closePortal} />
             </div>
           }
         />
diff --git a/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx b/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx
index d940a37deb..83f51c479b 100644
--- a/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx
@@ -62,8 +62,8 @@ class PortalExamplePortal extends React.Component {
             <Header>This portal traps focus on appearance</Header>
             <p tabIndex={0}>Portal doesn't close on outside click. See passed focus trap props.</p>
             <p tabIndex={0}>To close, simply click the close button</p>
-            <Button size="small" content="Do nothing" />
-            <Button size="small" content="Close popup" onClick={this.closePortal} />
+            <Button content="Do nothing" />
+            <Button content="Close popup" onClick={this.closePortal} />
           </div>
         </Portal>
       </div>
diff --git a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
index e100ed3524..9e10ede7fe 100644
--- a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
+++ b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
@@ -95,8 +95,7 @@ class CustomChatMessage extends React.Component {
                 { key: 'a', icon: 'thumbs up' },
                 { key: 'b', icon: 'user' },
                 { key: 'c', icon: 'ellipsis horizontal' },
-              ]}
-              renderItem={this.renderMenuItem}
+              ].map(item => render => render(item, this.renderMenuItem))}
             />
           </div>
         }
diff --git a/docs/src/prototypes/IconViewer/index.tsx b/docs/src/prototypes/IconViewer/index.tsx
index 767fb2415f..cbfd305a1e 100644
--- a/docs/src/prototypes/IconViewer/index.tsx
+++ b/docs/src/prototypes/IconViewer/index.tsx
@@ -62,7 +62,7 @@ class IconViewerExample extends React.Component<any, {}> {
         />
 
         <div style={{ marginTop: '15px' }}>
-          <Menu tabular styles={{ margin: '15px 0' }}>
+          <Menu styles={{ margin: '15px 0' }}>
             {Object.keys(this.iconFilters).map(filterName => (
               <Menu.Item
                 content={filterName}
diff --git a/docs/src/prototypes/chatPane/chatPaneContent.tsx b/docs/src/prototypes/chatPane/chatPaneContent.tsx
index 76b33634ae..b555df6f08 100644
--- a/docs/src/prototypes/chatPane/chatPaneContent.tsx
+++ b/docs/src/prototypes/chatPane/chatPaneContent.tsx
@@ -63,7 +63,7 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
                       {this.getMessagePreviewForScreenReader(props)}
                     </div>
                   )}
-                  <ElementType {...props} text={undefined} {...maybeAttributesForDivider} />
+                  <ElementType {...props} {...maybeAttributesForDivider} />
                 </>
               ),
             }}
@@ -73,7 +73,7 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
     )
   }
 
-  private getElementType = (itemType: ChatItemTypes) => {
+  private getElementType = (itemType: ChatItemTypes): React.ElementType => {
     switch (itemType) {
       case ChatItemTypes.message:
         return Chat.Message
diff --git a/docs/src/prototypes/chatPane/composeMessage.tsx b/docs/src/prototypes/chatPane/composeMessage.tsx
index 7a93b99562..7bda04f6e5 100644
--- a/docs/src/prototypes/chatPane/composeMessage.tsx
+++ b/docs/src/prototypes/chatPane/composeMessage.tsx
@@ -94,7 +94,7 @@ const getMenuItems = (): MenuItemProps[] => {
     'aria-label': `${name} tool`,
   }))
 
-  items.splice(-1, 0, { key: 'separator', styles: { flex: 1 } })
+  items.splice(-1, 0, { key: 'separator', styles: { flex: 1 } } as any)
 
   return items
 }
diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
index 18e2f1703c..40661e5778 100644
--- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
+++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
@@ -119,7 +119,7 @@ function createMessageContentWithAttachments(content: string, messageId: string)
     />
   )
 
-  const stopPropagationOnKeys = (keys: number[]) => (e: Event) => {
+  const stopPropagationOnKeys = (keys: number[]) => (e: React.KeyboardEvent<any>) => {
     if (keys.indexOf(keyboardKey.getCode(e)) > -1) {
       e.stopPropagation()
     }
diff --git a/docs/src/views/PageNotFound.tsx b/docs/src/views/PageNotFound.tsx
index dbb3fff7ee..e3ea44828f 100644
--- a/docs/src/views/PageNotFound.tsx
+++ b/docs/src/views/PageNotFound.tsx
@@ -4,7 +4,7 @@ import { Grid, Segment, Header, Icon } from '@stardust-ui/react'
 const PageNotFound = () => (
   <Grid>
     <div>
-      <Header as="h1" icon textAlign="center">
+      <Header as="h1" textAlign="center">
         <Icon name="game" />
         404
         <Header.Description>How about some good old Atari?</Header.Description>
@@ -12,7 +12,7 @@ const PageNotFound = () => (
     </div>
 
     <div>
-      <Segment basic>
+      <Segment>
         <embed
           src="http://www.pizn.com/swf/classic-asteroids.swf"
           width="425"
@@ -28,7 +28,7 @@ const PageNotFound = () => (
       </Segment>
     </div>
     <div>
-      <Segment basic>
+      <Segment>
         <embed
           src="http://www.pizn.com/swf/1-space-invaders.swf"
           width="425"
diff --git a/docs/src/views/QuickStart.tsx b/docs/src/views/QuickStart.tsx
index 90b5fd5e47..a03dcdd54b 100644
--- a/docs/src/views/QuickStart.tsx
+++ b/docs/src/views/QuickStart.tsx
@@ -17,7 +17,7 @@ export default () => (
       Stardust components are styled using CSS in JS. This technique requires a style renderer to
       render JavaScript objects to CSS.{' '}
       <a href="https://reactjs.org/docs/context.html" target="_blank" rel="noopener nofollow">
-        React Context <Icon name="external" size="small" link fitted />
+        React Context <Icon name="external" size="small" />
       </a>{' '}
       is used to provide the style renderer and theme to components.
     </p>
diff --git a/packages/docs-components/src/knobs/useSelectKnob.ts b/packages/docs-components/src/knobs/useSelectKnob.ts
index 7456029101..4caf07ab60 100644
--- a/packages/docs-components/src/knobs/useSelectKnob.ts
+++ b/packages/docs-components/src/knobs/useSelectKnob.ts
@@ -1,9 +1,9 @@
 import { UseKnobOptions } from './types'
 import useKnob from './useKnob'
 
-const useSelectKnob = (options: UseKnobOptions<string>) =>
-  useKnob<string>({
-    initialValue: '',
+const useSelectKnob = <T extends string>(options: UseKnobOptions<T>) =>
+  useKnob<T>({
+    initialValue: '' as T,
     type: 'select',
     ...options,
   })
diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
index 8385700b6c..28644b61c1 100644
--- a/packages/react/src/components/Accordion/Accordion.tsx
+++ b/packages/react/src/components/Accordion/Accordion.tsx
@@ -18,9 +18,10 @@ import { Accessibility } from '../../lib/accessibility/types'
 
 import {
   ComponentEventHandler,
-  ReactProps,
+  WithAsProp,
   ShorthandValue,
   ShorthandRenderFunction,
+  withSafeTypeForAs,
 } from '../../types'
 
 export interface AccordionSlotClassNames {
@@ -75,13 +76,7 @@ export interface AccordionProps extends UIComponentProps, ChildrenComponentProps
   accessibility?: Accessibility
 }
 
-/**
- * An accordion allows users to toggle the display of sections of content.
- * @accessibility
- * Implements ARIA Accordion design pattern (keyboard navigation not yet supported).
- * Consider using Tree if you intend to wrap Lists in an Accordion.
- */
-class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any> {
+class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, any> {
   static displayName = 'Accordion'
 
   static className = 'ui-accordion'
@@ -202,4 +197,10 @@ class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any>
   }
 }
 
-export default Accordion
+/**
+ * An accordion allows users to toggle the display of sections of content.
+ * @accessibility
+ * Implements ARIA Accordion design pattern (keyboard navigation not yet supported).
+ * Consider using Tree if you intend to wrap Lists in an Accordion.
+ */
+export default withSafeTypeForAs<typeof Accordion, AccordionProps>(Accordion)
diff --git a/packages/react/src/components/Accordion/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent.tsx
index 476d680825..169491ddaf 100644
--- a/packages/react/src/components/Accordion/AccordionContent.tsx
+++ b/packages/react/src/components/Accordion/AccordionContent.tsx
@@ -11,7 +11,7 @@ import {
   commonPropTypes,
   rtlTextContainer,
 } from '../../lib'
-import { ReactProps, ComponentEventHandler } from '../../types'
+import { WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 
 export interface AccordionContentProps
   extends UIComponentProps,
@@ -29,10 +29,7 @@ export interface AccordionContentProps
   onClick?: ComponentEventHandler<AccordionContentProps>
 }
 
-/**
- * A standard AccordionContent.
- */
-class AccordionContent extends UIComponent<ReactProps<AccordionContentProps>, any> {
+class AccordionContent extends UIComponent<WithAsProp<AccordionContentProps>, any> {
   static displayName = 'AccordionContent'
 
   static create: Function
@@ -65,4 +62,7 @@ AccordionContent.create = createShorthandFactory({
   mappedProp: 'content',
 })
 
-export default AccordionContent
+/**
+ * A standard AccordionContent.
+ */
+export default withSafeTypeForAs<typeof AccordionContent, AccordionContentProps>(AccordionContent)
diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx
index e5b76007e4..0392020750 100644
--- a/packages/react/src/components/Accordion/AccordionTitle.tsx
+++ b/packages/react/src/components/Accordion/AccordionTitle.tsx
@@ -13,7 +13,7 @@ import {
   commonPropTypes,
   rtlTextContainer,
 } from '../../lib'
-import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../types'
+import { WithAsProp, ComponentEventHandler, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Icon from '../Icon/Icon'
 import Layout from '../Layout/Layout'
 
@@ -39,10 +39,7 @@ export interface AccordionTitleProps
   indicator?: ShorthandValue
 }
 
-/**
- * A standard AccordionTitle.
- */
-class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
+class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
   static displayName = 'AccordionTitle'
 
   static create: Function
@@ -92,4 +89,7 @@ class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
 
 AccordionTitle.create = createShorthandFactory({ Component: AccordionTitle, mappedProp: 'content' })
 
-export default AccordionTitle
+/**
+ * A standard AccordionTitle.
+ */
+export default withSafeTypeForAs<typeof AccordionTitle, AccordionTitleProps>(AccordionTitle)
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index ff852cfdf5..631e19a62c 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -15,7 +15,7 @@ import {
 import { RenderResultConfig } from '../../lib/renderComponent'
 import { alertBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Box from '../Box/Box'
 import Button, { ButtonProps } from '../Button/Button'
 
@@ -62,14 +62,7 @@ export interface AlertState {
   isFromKeyboard: boolean
 }
 
-/**
- * A Alert displays information that explains nearby content.
- * @accessibility
- * Other considerations:
- *  - by default, content from warning and danger variants is announced by the screen reader. To announce the content of other variants, a mechanism similar to react-aria-live can be used
- *  - if Alert contains action slot, textual representation needs to be provided by using 'title', 'aria-label' or 'aria-labelledby' attributes
- */
-class Alert extends UIComponent<ReactProps<AlertProps>, AlertState> {
+class Alert extends UIComponent<WithAsProp<AlertProps>, AlertState> {
   static displayName = 'Alert'
   static className = 'ui-alert'
 
@@ -141,4 +134,11 @@ class Alert extends UIComponent<ReactProps<AlertProps>, AlertState> {
   }
 }
 
-export default Alert
+/**
+ * A Alert displays information that explains nearby content.
+ * @accessibility
+ * Other considerations:
+ *  - by default, content from warning and danger variants is announced by the screen reader. To announce the content of other variants, a mechanism similar to react-aria-live can be used
+ *  - if Alert contains action slot, textual representation needs to be provided by using 'title', 'aria-label' or 'aria-labelledby' attributes
+ */
+export default withSafeTypeForAs<typeof Alert, AlertProps>(Alert)
diff --git a/packages/react/src/components/Animation/Animation.tsx b/packages/react/src/components/Animation/Animation.tsx
index 5e754b6b6f..78b2abfc8e 100644
--- a/packages/react/src/components/Animation/Animation.tsx
+++ b/packages/react/src/components/Animation/Animation.tsx
@@ -10,7 +10,7 @@ import {
 } from '../../lib'
 import { AnimationProp } from '../../themes/types'
 import createAnimationStyles from '../../lib/createAnimationStyles'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface AnimationProps
   extends StyledComponentProps,
@@ -79,10 +79,7 @@ export interface AnimationProps
   timingFunction?: string
 }
 
-/**
- * An animation allows the user to animate their own components.
- */
-class Animation extends UIComponent<ReactProps<AnimationProps>, any> {
+class Animation extends UIComponent<WithAsProp<AnimationProps>, any> {
   static create: Function
 
   static className = 'ui-animation'
@@ -140,4 +137,7 @@ class Animation extends UIComponent<ReactProps<AnimationProps>, any> {
   }
 }
 
-export default Animation
+/**
+ * An animation allows the user to animate their own components.
+ */
+export default withSafeTypeForAs<typeof Animation, AnimationProps>(Animation)
diff --git a/packages/react/src/components/Attachment/Attachment.tsx b/packages/react/src/components/Attachment/Attachment.tsx
index 6d48ac4f59..907ba99dc4 100644
--- a/packages/react/src/components/Attachment/Attachment.tsx
+++ b/packages/react/src/components/Attachment/Attachment.tsx
@@ -2,7 +2,7 @@ import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as _ from 'lodash'
-import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../types'
+import { WithAsProp, ShorthandValue, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import {
   UIComponent,
   createShorthandFactory,
@@ -34,6 +34,9 @@ export interface AttachmentProps extends UIComponentProps, ChildrenComponentProp
   /** A string describing the attachment. */
   description?: ShorthandValue
 
+  /** An attachment can show it is currently unable to be interacted with. */
+  disabled?: boolean
+
   /** The name of the attachment. */
   header?: ShorthandValue
 
@@ -62,10 +65,7 @@ export interface AttachmentState {
   isFromKeyboard: boolean
 }
 
-/**
- * An Attachment displays a file attachment.
- */
-class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentState> {
+class Attachment extends UIComponent<WithAsProp<AttachmentProps>, AttachmentState> {
   static create: Function
 
   static className = 'ui-attachment'
@@ -160,4 +160,7 @@ class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentStat
 
 Attachment.create = createShorthandFactory({ Component: Attachment, mappedProp: 'header' })
 
-export default Attachment
+/**
+ * An Attachment displays a file attachment.
+ */
+export default withSafeTypeForAs<typeof Attachment, AttachmentProps>(Attachment)
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index da8ef23548..a27bf4375d 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -6,7 +6,7 @@ import Label from '../Label/Label'
 import Status, { StatusProps } from '../Status/Status'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import {
   createShorthandFactory,
   UIComponent,
@@ -41,10 +41,7 @@ export interface AvatarProps extends UIComponentProps {
   getInitials?: (name: string) => string
 }
 
-/**
- * An avatar is a graphic representation of user.
- */
-class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
+class Avatar extends UIComponent<WithAsProp<AvatarProps>, any> {
   static create: Function
 
   static className = 'ui-avatar'
@@ -129,4 +126,7 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
 
 Avatar.create = createShorthandFactory({ Component: Avatar, mappedProp: 'name' })
 
-export default Avatar
+/**
+ * An avatar is a graphic representation of user.
+ */
+export default withSafeTypeForAs<typeof Avatar, AvatarProps>(Avatar)
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index fc3199aad5..2f655b4393 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -8,19 +8,15 @@ import {
   commonPropTypes,
   rtlTextContainer,
 } from '../../lib'
-import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
-import { ReactProps } from '../../types'
+import createComponent from '../../lib/createComponent'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface BoxProps
   extends UIComponentProps<BoxProps>,
     ContentComponentProps,
     ChildrenComponentProps {}
 
-/**
- * A Box is an abstract component, is frequently used for slots in other Stardust components.
- * By default it renders a `div` without any styles.
- */
-const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<BoxProps>({
+const Box = createComponent<WithAsProp<BoxProps>>({
   displayName: 'Box',
 
   className: 'ui-box',
@@ -47,4 +43,8 @@ const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<Box
 
 Box.create = createShorthandFactory({ Component: Box })
 
-export default Box
+/**
+ * A Box is an abstract component, is frequently used for slots in other Stardust components.
+ * By default it renders a `div` without any styles.
+ */
+export default withSafeTypeForAs<typeof Box, BoxProps>(Box)
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 69569cab2c..e118e13cb6 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -18,7 +18,7 @@ import Icon from '../Icon/Icon'
 import Box from '../Box/Box'
 import { buttonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import ButtonGroup from './ButtonGroup'
 
 export interface ButtonProps
@@ -77,14 +77,7 @@ export interface ButtonState {
   isFromKeyboard: boolean
 }
 
-/**
- * A button indicates a possible user action.
- * @accessibility
- * Other considerations:
- *  - for disabled buttons, add 'disabled' attribute so that the state is properly recognized by the screen reader
- *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label' or 'aria-labelledby' attributes
- */
-class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
+class Button extends UIComponent<WithAsProp<ButtonProps>, ButtonState> {
   static create: Function
 
   public static displayName = 'Button'
@@ -182,4 +175,11 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
 
 Button.create = createShorthandFactory({ Component: Button, mappedProp: 'content' })
 
-export default Button
+/**
+ * A button indicates a possible user action.
+ * @accessibility
+ * Other considerations:
+ *  - for disabled buttons, add 'disabled' attribute so that the state is properly recognized by the screen reader
+ *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label' or 'aria-labelledby' attributes
+ */
+export default withSafeTypeForAs<typeof Button, ButtonProps, 'button'>(Button)
diff --git a/packages/react/src/components/Button/ButtonGroup.tsx b/packages/react/src/components/Button/ButtonGroup.tsx
index c7ff96413d..59beb9a33f 100644
--- a/packages/react/src/components/Button/ButtonGroup.tsx
+++ b/packages/react/src/components/Button/ButtonGroup.tsx
@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as _ from 'lodash'
 
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import {
   UIComponent,
   childrenExist,
@@ -35,10 +35,7 @@ export interface ButtonGroupProps
   circular?: boolean
 }
 
-/**
- * A button group presents multiple related actions.
- */
-class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
+class ButtonGroup extends UIComponent<WithAsProp<ButtonGroupProps>, any> {
   public static create: Function
 
   public static displayName = 'ButtonGroup'
@@ -112,4 +109,7 @@ ButtonGroup.create = createShorthandFactory({
   mappedArrayProp: 'buttons',
 })
 
-export default ButtonGroup
+/**
+ * A button group presents multiple related actions.
+ */
+export default withSafeTypeForAs<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup)
diff --git a/packages/react/src/components/Chat/Chat.tsx b/packages/react/src/components/Chat/Chat.tsx
index b39992b24c..2228dc8932 100644
--- a/packages/react/src/components/Chat/Chat.tsx
+++ b/packages/react/src/components/Chat/Chat.tsx
@@ -12,7 +12,7 @@ import {
 } from '../../lib'
 import ChatItem from './ChatItem'
 import ChatMessage from './ChatMessage'
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 import { chatBehavior } from '../../lib/accessibility'
 import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
@@ -32,10 +32,7 @@ export interface ChatProps extends UIComponentProps, ChildrenComponentProps {
   items?: ShorthandValue[]
 }
 
-/**
- * A Chat displays messages between users.
- */
-class Chat extends UIComponent<ReactProps<ChatProps>, any> {
+class Chat extends UIComponent<WithAsProp<ChatProps>, any> {
   static displayName = 'Chat'
 
   static className = 'ui-chat'
@@ -84,4 +81,7 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
   }
 }
 
-export default Chat
+/**
+ * A Chat displays messages between users.
+ */
+export default withSafeTypeForAs<typeof Chat, ChatProps, 'ul'>(Chat)
diff --git a/packages/react/src/components/Chat/ChatItem.tsx b/packages/react/src/components/Chat/ChatItem.tsx
index 87d40365c1..54f3c0cf0f 100644
--- a/packages/react/src/components/Chat/ChatItem.tsx
+++ b/packages/react/src/components/Chat/ChatItem.tsx
@@ -2,7 +2,7 @@ import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import {
   childrenExist,
   createShorthandFactory,
@@ -45,10 +45,7 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps
   message?: ShorthandValue
 }
 
-/**
- * A chat item represents a single event in a chat.
- */
-class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
+class ChatItem extends UIComponent<WithAsProp<ChatItemProps>, any> {
   static className = 'ui-chat__item'
   static create: Function
   static displayName = 'ChatItem'
@@ -151,4 +148,7 @@ ChatItem.slotClassNames = {
   gutter: `${ChatItem.className}__gutter`,
 }
 
-export default ChatItem
+/**
+ * A chat item represents a single event in a chat.
+ */
+export default withSafeTypeForAs<typeof ChatItem, ChatItemProps, 'li'>(ChatItem)
diff --git a/packages/react/src/components/Chat/ChatMessage.tsx b/packages/react/src/components/Chat/ChatMessage.tsx
index 53c4f67e56..0aa35a7f20 100644
--- a/packages/react/src/components/Chat/ChatMessage.tsx
+++ b/packages/react/src/components/Chat/ChatMessage.tsx
@@ -17,7 +17,7 @@ import {
   rtlTextContainer,
   applyAccessibilityKeyHandlers,
 } from '../../lib'
-import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../types'
+import { WithAsProp, ShorthandValue, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import { chatMessageBehavior, toolbarBehavior } from '../../lib/accessibility'
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../lib/accessibility/FocusZone'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
@@ -73,7 +73,7 @@ export interface ChatMessageProps
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  onBlur?: (event: React.FocusEvent<HTMLElement>, data: ChatMessageProps) => void
+  onBlur?: ComponentEventHandler<ChatMessageProps>
 
   /**
    * Called after user's focus.
@@ -94,10 +94,7 @@ export interface ChatMessageState {
   isFromKeyboard: boolean
 }
 
-/**
- * A chat message represents a single statement communicated to a user.
- */
-class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageState> {
+class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageState> {
   static className = 'ui-chat__message'
 
   static create: Function
@@ -157,10 +154,10 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
     _.invoke(this.props, 'onFocus', e, this.props)
   }
 
-  handleBlur = (e: React.FocusEvent) => {
+  handleBlur = (e: React.SyntheticEvent) => {
     // `this.state.focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
     // with keyboard the focused element will be changed and there is no way to use `:focus` selector
-    const shouldPreserveFocusState = _.invoke(e, 'currentTarget.contains', e.relatedTarget)
+    const shouldPreserveFocusState = _.invoke(e, 'currentTarget.contains', (e as any).relatedTarget)
 
     this.setState({ focused: shouldPreserveFocusState })
     _.invoke(this.props, 'onBlur', e, this.props)
@@ -270,4 +267,7 @@ ChatMessage.slotClassNames = {
   reactionGroup: `${ChatMessage.className}__reactions`,
 }
 
-export default ChatMessage
+/**
+ * A chat message represents a single statement communicated to a user.
+ */
+export default withSafeTypeForAs<typeof ChatMessage, ChatMessageProps>(ChatMessage)
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
index a2b0cd689d..f8f79f2ddd 100644
--- a/packages/react/src/components/Dialog/Dialog.tsx
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -16,7 +16,7 @@ import {
 import { dialogBehavior } from '../../lib/accessibility'
 import { FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
-import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Button, { ButtonProps } from '../Button/Button'
 import Box, { BoxProps } from '../Box/Box'
 import Header from '../Header/Header'
@@ -91,10 +91,7 @@ export interface DialogState {
   open?: boolean
 }
 
-/**
- * A Dialog indicates a possible user action.
- */
-class Dialog extends AutoControlledComponent<ReactProps<DialogProps>, DialogState> {
+class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogState> {
   static displayName = 'Dialog'
   static className = 'ui-dialog'
 
@@ -273,4 +270,7 @@ Dialog.slotClassNames = {
   content: `${Dialog.className}__content`,
 }
 
-export default Dialog
+/**
+ * A Dialog indicates a possible user action.
+ */
+export default withSafeTypeForAs<typeof Dialog, DialogProps>(Dialog)
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx
index ebf3892d9a..f043919006 100644
--- a/packages/react/src/components/Divider/Divider.tsx
+++ b/packages/react/src/components/Divider/Divider.tsx
@@ -14,7 +14,7 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface DividerProps
   extends UIComponentProps,
@@ -37,10 +37,7 @@ export interface DividerProps
   important?: boolean
 }
 
-/**
- * A divider visually segments content into groups.
- */
-class Divider extends UIComponent<ReactProps<DividerProps>, any> {
+class Divider extends UIComponent<WithAsProp<DividerProps>, any> {
   static displayName = 'Divider'
 
   static create: Function
@@ -77,6 +74,7 @@ class Divider extends UIComponent<ReactProps<DividerProps>, any> {
 
 Divider.create = createShorthandFactory({ Component: Divider, mappedProp: 'content' })
 
-export default Divider
-
-export type DividerPropsWithDefaults = DividerProps & typeof Divider.defaultProps
+/**
+ * A divider visually segments content into groups.
+ */
+export default withSafeTypeForAs<typeof Divider, DividerProps>(Divider)
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 17783a0cd2..7549f489c2 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -7,11 +7,12 @@ import cx from 'classnames'
 import * as keyboardKey from 'keyboard-key'
 
 import {
-  Extendable,
   ShorthandRenderFunction,
   ShorthandValue,
   ComponentEventHandler,
   ShorthandCollection,
+  WithAsProp,
+  withSafeTypeForAs,
 } from '../../types'
 import { ComponentSlotStylesInput, ComponentVariablesInput } from '../../themes/types'
 import Downshift, {
@@ -209,13 +210,7 @@ export interface DropdownState {
   value: ShorthandValue | ShorthandCollection
 }
 
-/**
- * Dropdown allows user to select one or more values from a list of items.
- * Can also be created with search capability.
- * @accessibility
- * Implements ARIA collapsible Listbox design pattern, uses aria-live to announce state changes.
- */
-class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, DropdownState> {
+class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, DropdownState> {
   private buttonRef = React.createRef<HTMLElement>()
   private inputRef = React.createRef<HTMLInputElement>()
   private listRef = React.createRef<HTMLElement>()
@@ -277,7 +272,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     ]),
   }
 
-  static defaultProps: DropdownProps = {
+  static defaultProps = {
     as: 'div',
     clearIndicator: 'stardust-close',
     itemToString: item => {
@@ -1181,4 +1176,10 @@ Dropdown.slotClassNames = {
   triggerButton: `${Dropdown.className}__trigger-button`,
 }
 
-export default Dropdown
+/**
+ * Dropdown allows user to select one or more values from a list of items.
+ * Can also be created with search capability.
+ * @accessibility
+ * Implements ARIA collapsible Listbox design pattern, uses aria-live to announce state changes.
+ */
+export default withSafeTypeForAs<typeof Dropdown, DropdownProps>(Dropdown)
diff --git a/packages/react/src/components/Dropdown/DropdownItem.tsx b/packages/react/src/components/Dropdown/DropdownItem.tsx
index dc62a7f239..34eacc0065 100644
--- a/packages/react/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/react/src/components/Dropdown/DropdownItem.tsx
@@ -4,7 +4,7 @@ import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
 import { UIComponent, RenderResultConfig, createShorthandFactory, commonPropTypes } from '../../lib'
-import { ShorthandValue, ComponentEventHandler, ReactProps } from '../../types'
+import { ShorthandValue, ComponentEventHandler, WithAsProp, withSafeTypeForAs } from '../../types'
 import { UIComponentProps } from '../../lib/commonPropInterfaces'
 import ListItem from '../List/ListItem'
 import Image from '../Image/Image'
@@ -20,6 +20,9 @@ export interface DropdownItemProps extends UIComponentProps<DropdownItemProps> {
   /** A dropdown item can be active. */
   active?: boolean
 
+  /** Item's accessibility props. */
+  accessibilityItemProps?: any
+
   /** Item's content. */
   content?: ShorthandValue
 
@@ -38,11 +41,7 @@ export interface DropdownItemProps extends UIComponentProps<DropdownItemProps> {
   onClick?: ComponentEventHandler<DropdownItemProps>
 }
 
-/**
- * A DropdownItem is a sub-component of the Dropdown,
- * used to display items of the dropdown list.
- */
-class DropdownItem extends UIComponent<ReactProps<DropdownItemProps>, any> {
+class DropdownItem extends UIComponent<WithAsProp<DropdownItemProps>, any> {
   static displayName = 'DropdownItem'
 
   static create: Function
@@ -115,4 +114,8 @@ DropdownItem.slotClassNames = {
 
 DropdownItem.create = createShorthandFactory({ Component: DropdownItem, mappedProp: 'header' })
 
-export default DropdownItem
+/**
+ * A sub-component of the Dropdown.
+ * Used to display items of the dropdown list.
+ */
+export default withSafeTypeForAs<typeof DropdownItem, DropdownItemProps>(DropdownItem)
diff --git a/packages/react/src/components/Dropdown/DropdownSearchInput.tsx b/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
index 076d3e31fc..3b7ff54f33 100644
--- a/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
+++ b/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
@@ -4,7 +4,7 @@ import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
 import { UIComponent, RenderResultConfig, createShorthandFactory, commonPropTypes } from '../../lib'
-import { ComponentEventHandler, ReactProps } from '../../types'
+import { ComponentEventHandler, WithAsProp, withSafeTypeForAs } from '../../types'
 import { UIComponentProps } from '../../lib/commonPropInterfaces'
 import Input from '../Input/Input'
 
@@ -14,6 +14,12 @@ export interface DropdownSearchInputSlotClassNames {
 }
 
 export interface DropdownSearchInputProps extends UIComponentProps<DropdownSearchInputProps> {
+  /** Accessibility props for combobox slot. */
+  accessibilityComboboxProps?: any
+
+  /** Accessibility props for input slot. */
+  accessibilityInputProps?: any
+
   /** A dropdown search input can be formatted to appear inline in the context of a Dropdown. */
   inline?: boolean
 
@@ -56,10 +62,7 @@ export interface DropdownSearchInputProps extends UIComponentProps<DropdownSearc
   placeholder?: string
 }
 
-/**
- * A DropdownSearchInput is a sub-component of a Dropdown that also has a search function, used to display the search input field.
- */
-class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProps>, any> {
+class DropdownSearchInput extends UIComponent<WithAsProp<DropdownSearchInputProps>, any> {
   static displayName = 'DropdownSearchInput'
   static create: Function
   static slotClassNames: DropdownSearchInputSlotClassNames
@@ -139,4 +142,10 @@ DropdownSearchInput.slotClassNames = {
 
 DropdownSearchInput.create = createShorthandFactory({ Component: DropdownSearchInput })
 
-export default DropdownSearchInput
+/**
+ * A sub-component of a search Dropdown.
+ * Used to display the search input field.
+ */
+export default withSafeTypeForAs<typeof DropdownSearchInput, DropdownSearchInputProps>(
+  DropdownSearchInput,
+)
diff --git a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx
index b870b14fed..68102f9ed3 100644
--- a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx
+++ b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx
@@ -5,7 +5,13 @@ import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
 import keyboardKey from 'keyboard-key'
-import { ComponentEventHandler, ShorthandValue, ReactProps } from '../../types'
+import {
+  ComponentEventHandler,
+  ShorthandValue,
+  WithAsProp,
+  ComponentKeyboardEventHandler,
+  withSafeTypeForAs,
+} from '../../types'
 import { UIComponentProps } from '../../lib/commonPropInterfaces'
 import { createShorthandFactory, UIComponent, RenderResultConfig, commonPropTypes } from '../../lib'
 import Icon, { IconProps } from '../Icon/Icon'
@@ -46,7 +52,7 @@ export interface DropdownSelectedItemProps extends UIComponentProps<DropdownSele
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed value.
    */
-  onKeyDown?: ComponentEventHandler<DropdownSelectedItemProps>
+  onKeyDown?: ComponentKeyboardEventHandler<DropdownSelectedItemProps>
 
   /**
    * Called when item is removed from the selection list.
@@ -57,11 +63,7 @@ export interface DropdownSelectedItemProps extends UIComponentProps<DropdownSele
   onRemove?: ComponentEventHandler<DropdownSelectedItemProps>
 }
 
-/**
- * A DropdownSelectedItem is a sub-component of a multiple selection Dropdown.
- * It is used to display selected item.
- */
-class DropdownSelectedItem extends UIComponent<ReactProps<DropdownSelectedItemProps>, any> {
+class DropdownSelectedItem extends UIComponent<WithAsProp<DropdownSelectedItemProps>, any> {
   private itemRef = React.createRef<HTMLElement>()
 
   static displayName = 'DropdownSelectedItem'
@@ -176,4 +178,10 @@ DropdownSelectedItem.create = createShorthandFactory({
   mappedProp: 'header',
 })
 
-export default DropdownSelectedItem
+/**
+ * A a sub-component of multiple-selection Dropdown.
+ * Used to display selected item.
+ */
+export default withSafeTypeForAs<typeof DropdownSelectedItem, DropdownSelectedItemProps>(
+  DropdownSelectedItem,
+)
diff --git a/packages/react/src/components/Embed/Embed.tsx b/packages/react/src/components/Embed/Embed.tsx
index 7a42cf91b8..739ac2e957 100644
--- a/packages/react/src/components/Embed/Embed.tsx
+++ b/packages/react/src/components/Embed/Embed.tsx
@@ -16,7 +16,7 @@ import Icon, { IconProps } from '../Icon/Icon'
 import Image, { ImageProps } from '../Image/Image'
 import Video, { VideoProps } from '../Video/Video'
 import Box from '../Box/Box'
-import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 
 export interface EmbedSlotClassNames {
   control: string
@@ -67,15 +67,7 @@ export interface EmbedState {
   active: boolean
 }
 
-/**
- * A GIF is a muted segment of a video
- * @accessibility
- * If GIF should be visible to screen readers, textual representation needs to be provided in 'alt' or 'title' property.
- *
- * Other considerations:
- *  - when alt and title property are empty, then Narrator in scan mode navigates to the gif and narrates it as empty paragraph
- */
-class Embed extends AutoControlledComponent<ReactProps<EmbedProps>, EmbedState> {
+class Embed extends AutoControlledComponent<WithAsProp<EmbedProps>, EmbedState> {
   static create: Function
 
   static className = 'ui-embed'
@@ -184,4 +176,12 @@ class Embed extends AutoControlledComponent<ReactProps<EmbedProps>, EmbedState>
 
 Embed.create = createShorthandFactory({ Component: Embed })
 
-export default Embed
+/**
+ * A GIF is a muted segment of a video
+ * @accessibility
+ * If GIF should be visible to screen readers, textual representation needs to be provided in 'alt' or 'title' property.
+ *
+ * Other considerations:
+ *  - when alt and title property are empty, then Narrator in scan mode navigates to the gif and narrates it as empty paragraph
+ */
+export default withSafeTypeForAs<typeof Embed, EmbedProps, 'span'>(Embed)
diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index 8cb1a8a4d5..75686d7cdf 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import * as _ from 'lodash'
 
 import { UIComponent, commonPropTypes, UIComponentProps, ChildrenComponentProps } from '../../lib'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 import FlexItem from './FlexItem'
 
 export interface FlexProps extends UIComponentProps, ChildrenComponentProps {
@@ -38,10 +38,7 @@ export interface FlexProps extends UIComponentProps, ChildrenComponentProps {
   fill?: boolean
 }
 
-/**
- * Arrange group of items aligned towards common direction.
- */
-class Flex extends UIComponent<ReactProps<FlexProps>> {
+class Flex extends UIComponent<WithAsProp<FlexProps>> {
   static Item = FlexItem
 
   static displayName = 'Flex'
@@ -99,4 +96,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>> {
   }
 }
 
-export default Flex
+/**
+ * Arranges group of items aligned towards common direction.
+ */
+export default withSafeTypeForAs<typeof Flex, FlexProps>(Flex)
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index b20b199759..84f4366f04 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -2,9 +2,8 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import cx from 'classnames'
 import * as _ from 'lodash'
-import { UIComponent, commonPropTypes, UIComponentProps, ChildrenComponentProps } from '../../lib'
+import { UIComponent, commonPropTypes, UIComponentProps } from '../../lib'
 import { mergeStyles } from '../../lib/mergeThemes'
-import { ReactProps } from '../../types'
 
 export type FlexItemChildren =
   | React.ReactElement<any>
@@ -12,7 +11,7 @@ export type FlexItemChildren =
       { styles: ComponentSlotStylesPrepared, classes: ComponentSlotClasses },
     ) => React.ReactElement<any>)
 
-export interface FlexItemProps extends UIComponentProps, ChildrenComponentProps<FlexItemChildren> {
+export interface FlexItemProps extends UIComponentProps {
   /** Controls item's alignment. */
   align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
@@ -42,7 +41,7 @@ export interface FlexItemProps extends UIComponentProps, ChildrenComponentProps<
   flexDirection?: 'row' | 'column'
 }
 
-class FlexItem extends UIComponent<ReactProps<FlexItemProps>> {
+class FlexItem extends UIComponent<FlexItemProps> {
   static className = 'ui-flex__item'
 
   static displayName = 'FlexItem'
diff --git a/packages/react/src/components/Form/Form.tsx b/packages/react/src/components/Form/Form.tsx
index 1801e4361b..8be86f7dc4 100644
--- a/packages/react/src/components/Form/Form.tsx
+++ b/packages/react/src/components/Form/Form.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import FormField from './FormField'
 
 export interface FormSlotClassNames {
@@ -41,12 +41,7 @@ export interface FormProps extends UIComponentProps, ChildrenComponentProps {
   onSubmit?: ComponentEventHandler<FormProps>
 }
 
-/**
- * A Form displays a set of related user input fields in a structured way.
- * @accessibility
- * Label needs to be provided by using 'aria-label', or 'aria-labelledby' attributes on the <form> element.
- */
-class Form extends UIComponent<ReactProps<FormProps>, any> {
+class Form extends UIComponent<WithAsProp<FormProps>, any> {
   static create: Function
 
   public static displayName = 'Form'
@@ -106,4 +101,9 @@ class Form extends UIComponent<ReactProps<FormProps>, any> {
   }
 }
 
-export default Form
+/**
+ * A Form displays a set of related user input fields in a structured way.
+ * @accessibility
+ * Label needs to be provided by using 'aria-label', or 'aria-labelledby' attributes on the <form> element.
+ */
+export default withSafeTypeForAs<typeof Form, FormProps, 'form'>(Form)
diff --git a/packages/react/src/components/Form/FormField.tsx b/packages/react/src/components/Form/FormField.tsx
index bd9926751a..cc79bf6e9e 100644
--- a/packages/react/src/components/Form/FormField.tsx
+++ b/packages/react/src/components/Form/FormField.tsx
@@ -12,7 +12,7 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Text from '../Text/Text'
 import Input from '../Input/Input'
 import Box from '../Box/Box'
@@ -49,10 +49,7 @@ export interface FormFieldProps extends UIComponentProps, ChildrenComponentProps
   type?: string
 }
 
-/**
- * A field is a form element containing a label and an input.
- */
-class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
+class FormField extends UIComponent<WithAsProp<FormFieldProps>, any> {
   public static displayName = 'FormField'
 
   public static className = 'ui-form__field'
@@ -83,7 +80,6 @@ class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
     ElementType,
     classes,
     accessibility,
-    variables,
     styles,
     unhandledProps,
   }): React.ReactNode {
@@ -131,4 +127,7 @@ class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
 
 FormField.create = createShorthandFactory({ Component: FormField, mappedProp: 'label' })
 
-export default FormField
+/**
+ * A field is a form element containing a label and an input.
+ */
+export default withSafeTypeForAs<typeof FormField, FormFieldProps>(FormField)
diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx
index 32731f54dc..f38716bc0f 100644
--- a/packages/react/src/components/Grid/Grid.tsx
+++ b/packages/react/src/components/Grid/Grid.tsx
@@ -11,7 +11,7 @@ import {
   ContentComponentProps,
   rtlTextContainer,
 } from '../../lib'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
 
@@ -33,12 +33,7 @@ export interface GridProps
   rows?: string | number
 }
 
-/**
- * A grid is used to harmonize negative space in a layout.
- * @accessibility This is example usage of the accessibility tag.
- * This should be replaced with the actual description after the PR is merged
- */
-class Grid extends UIComponent<ReactProps<GridProps>, any> {
+class Grid extends UIComponent<WithAsProp<GridProps>, any> {
   public static displayName = 'Grid'
 
   public static className = 'ui-grid'
@@ -58,7 +53,7 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
     rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
 
-  public static defaultProps: GridProps = {
+  public static defaultProps: WithAsProp<GridProps> = {
     as: 'div',
     accessibility: defaultBehavior,
   }
@@ -84,4 +79,9 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
   }
 }
 
-export default Grid
+/**
+ * A grid is used to harmonize negative space in a layout.
+ * @accessibility This is example usage of the accessibility tag.
+ * This should be replaced with the actual description after the PR is merged
+ */
+export default withSafeTypeForAs<typeof Grid, GridProps>(Grid)
diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx
index 06e5043847..a4876895e3 100644
--- a/packages/react/src/components/Header/Header.tsx
+++ b/packages/react/src/components/Header/Header.tsx
@@ -16,7 +16,7 @@ import {
 import HeaderDescription from './HeaderDescription'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 
 export interface HeaderSlotClassNames {
   description: string
@@ -40,17 +40,7 @@ export interface HeaderProps
   textAlign?: 'left' | 'center' | 'right' | 'justified'
 }
 
-/**
- * A header provides a short summary of content.
- * @accessibility
- * Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
- * Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
- *
- * Other considerations:
- *  - when the description property is used in header, readers will narrate both header content and description within the element.
- *    In addition to that, both will be displayed in the list of headings.
- */
-class Header extends UIComponent<ReactProps<HeaderProps>, any> {
+class Header extends UIComponent<WithAsProp<HeaderProps>, any> {
   static displayName = 'Header'
 
   static className = 'ui-header'
@@ -108,4 +98,14 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
 
 Header.create = createShorthandFactory({ Component: Header, mappedProp: 'content' })
 
-export default Header
+/**
+ * A header provides a short summary of content.
+ * @accessibility
+ * Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
+ * Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
+ *
+ * Other considerations:
+ *  - when the description property is used in header, readers will narrate both header content and description within the element.
+ *    In addition to that, both will be displayed in the list of headings.
+ */
+export default withSafeTypeForAs<typeof Header, HeaderProps, 'h1'>(Header)
diff --git a/packages/react/src/components/Header/HeaderDescription.tsx b/packages/react/src/components/Header/HeaderDescription.tsx
index e130361502..2a1ac46162 100644
--- a/packages/react/src/components/Header/HeaderDescription.tsx
+++ b/packages/react/src/components/Header/HeaderDescription.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface HeaderDescriptionProps
   extends UIComponentProps,
@@ -27,10 +27,7 @@ export interface HeaderDescriptionProps
   accessibility?: Accessibility
 }
 
-/**
- * A header's description provides more detailed information.
- */
-class HeaderDescription extends UIComponent<ReactProps<HeaderDescriptionProps>, any> {
+class HeaderDescription extends UIComponent<WithAsProp<HeaderDescriptionProps>, any> {
   static create: Function
 
   static className = 'ui-header__description'
@@ -66,4 +63,9 @@ HeaderDescription.create = createShorthandFactory({
   mappedProp: 'content',
 })
 
-export default HeaderDescription
+/**
+ * A header's description provides more detailed information.
+ */
+export default withSafeTypeForAs<typeof HeaderDescription, HeaderDescriptionProps, 'p'>(
+  HeaderDescription,
+)
diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx
index 84d172c9c0..5ea97cc4e1 100644
--- a/packages/react/src/components/Icon/Icon.tsx
+++ b/packages/react/src/components/Icon/Icon.tsx
@@ -14,7 +14,7 @@ import { iconBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 
 import { SvgIconSpec } from '../../themes/types'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
@@ -50,10 +50,7 @@ export interface IconProps extends UIComponentProps, ColorComponentProps {
   xSpacing?: IconXSpacing
 }
 
-/**
- * An icon is a glyph used to represent something else.
- */
-class Icon extends UIComponent<ReactProps<IconProps>, any> {
+class Icon extends UIComponent<WithAsProp<IconProps>, any> {
   static create: Function
 
   static className = 'ui-icon'
@@ -128,4 +125,7 @@ class Icon extends UIComponent<ReactProps<IconProps>, any> {
 
 Icon.create = createShorthandFactory({ Component: Icon, mappedProp: 'name' })
 
-export default Icon
+/**
+ * An icon is a glyph used to represent something else.
+ */
+export default withSafeTypeForAs<typeof Icon, IconProps, 'span'>(Icon)
diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx
index c455811d6b..4dc9576311 100644
--- a/packages/react/src/components/Image/Image.tsx
+++ b/packages/react/src/components/Image/Image.tsx
@@ -5,7 +5,7 @@ import { createShorthandFactory, UIComponent, UIComponentProps, commonPropTypes
 import { imageBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface ImageProps extends UIComponentProps {
   /**
@@ -27,17 +27,7 @@ export interface ImageProps extends UIComponentProps {
   src?: string
 }
 
-/**
- * An image is a graphic representation of something.
- * @accessibility
- * If image should be visible to screen readers, textual representation needs to be provided in 'alt' property.
- *
- * Other considerations:
- *  - when alt property is empty, then Narrator in scan mode navigates to image and narrates it as empty paragraph
- *  - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior
- *  - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently.
- */
-class Image extends UIComponent<ReactProps<ImageProps>, any> {
+class Image extends UIComponent<WithAsProp<ImageProps>, any> {
   static create: Function
 
   static className = 'ui-image'
@@ -72,4 +62,14 @@ class Image extends UIComponent<ReactProps<ImageProps>, any> {
 
 Image.create = createShorthandFactory({ Component: Image, mappedProp: 'src' })
 
-export default Image
+/**
+ * An image is a graphic representation of something.
+ * @accessibility
+ * If image should be visible to screen readers, textual representation needs to be provided in 'alt' property.
+ *
+ * Other considerations:
+ *  - when alt property is empty, then Narrator in scan mode navigates to image and narrates it as empty paragraph
+ *  - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior
+ *  - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently.
+ */
+export default withSafeTypeForAs<typeof Image, ImageProps, 'img'>(Image)
diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx
index 338d9f0346..b3d0d48aed 100644
--- a/packages/react/src/components/Input/Input.tsx
+++ b/packages/react/src/components/Input/Input.tsx
@@ -16,15 +16,25 @@ import {
 } from '../../lib'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 import { inputBehavior } from '../../lib/accessibility'
-import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../types'
+import { WithAsProp, ShorthandValue, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import Icon from '../Icon/Icon'
 import Box from '../Box/Box'
+import { HtmlInputProps } from '../../lib/htmlPropsUtils'
 
 export interface InputSlotClassNames {
   input: string
 }
 
-export interface InputProps extends UIComponentProps, ChildrenComponentProps {
+type SupportedIntrinsicInputProps = {
+  [K in HtmlInputProps]?: K extends keyof JSX.IntrinsicElements['input']
+    ? JSX.IntrinsicElements['input'][K]
+    : any
+}
+
+export interface InputProps
+  extends UIComponentProps,
+    ChildrenComponentProps,
+    SupportedIntrinsicInputProps {
   /**
    * Accessibility behavior if overridden by the user.
    * @default defaultBehavior
@@ -35,7 +45,7 @@ export interface InputProps extends UIComponentProps, ChildrenComponentProps {
   clearable?: boolean
 
   /** The default value of the input. */
-  defaultValue?: React.ReactText
+  defaultValue?: string | string[]
 
   /** An input can take the width of its container. */
   fluid?: boolean
@@ -77,15 +87,7 @@ export interface InputState {
   value?: React.ReactText
 }
 
-/**
- * An input is a field used to elicit a response from a user.
- * @accessibility
- * For good screen reader experience set aria-label or aria-labelledby attribute for input.
- *
- * Other considerations:
- *  - if input is search, then use "role='search'"
- */
-class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState> {
+class Input extends AutoControlledComponent<WithAsProp<InputProps>, InputState> {
   private inputRef = React.createRef<HTMLElement>()
 
   static className = 'ui-input'
@@ -224,4 +226,12 @@ Input.slotClassNames = {
   input: `${Input.className}__input`,
 }
 
-export default Input
+/**
+ * An input is a field used to elicit a response from a user.
+ * @accessibility
+ * For good screen reader experience set aria-label or aria-labelledby attribute for input.
+ *
+ * Other considerations:
+ *  - if input is search, then use "role='search'"
+ */
+export default withSafeTypeForAs<typeof Input, InputProps, 'div'>(Input)
diff --git a/packages/react/src/components/ItemLayout/ItemLayout.tsx b/packages/react/src/components/ItemLayout/ItemLayout.tsx
index 133ac6c3f4..25fe576675 100644
--- a/packages/react/src/components/ItemLayout/ItemLayout.tsx
+++ b/packages/react/src/components/ItemLayout/ItemLayout.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../lib'
 import Layout from '../Layout/Layout'
 import { ComponentSlotClasses, ICSSInJSStyle } from '../../themes/types'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface ItemLayoutSlotClassNames {
   header: string
@@ -64,10 +64,7 @@ export interface ItemLayoutProps extends UIComponentProps, ContentComponentProps
   endMediaCSS?: ICSSInJSStyle
 }
 
-/**
- * (DEPRECATED) The Item Layout handles layout styles for menu items, list items and other similar item templates.
- */
-class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
+class ItemLayout extends UIComponent<WithAsProp<ItemLayoutProps>, any> {
   static create: Function
 
   static displayName = 'ItemLayout'
@@ -174,9 +171,17 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
     },
   }
 
-  renderComponent({ ElementType, classes, unhandledProps, styles }) {
-    const { as, debug, endMedia, media, renderMainArea, rootCSS, mediaCSS, endMediaCSS } = this
-      .props as ItemLayoutPropsWithDefaults
+  renderComponent({ classes, unhandledProps, styles }) {
+    const {
+      as,
+      debug,
+      endMedia,
+      media,
+      renderMainArea,
+      rootCSS,
+      mediaCSS,
+      endMediaCSS,
+    } = this.props
 
     const startArea = media
     const mainArea = renderMainArea(this.props, this.state, classes)
@@ -227,6 +232,7 @@ ItemLayout.slotClassNames = {
   endMedia: `${ItemLayout.className}__endMedia`,
 }
 
-export default ItemLayout
-
-export type ItemLayoutPropsWithDefaults = ItemLayoutProps & typeof ItemLayout.defaultProps
+/**
+ * (DEPRECATED) The Item Layout handles layout styles for menu items, list items and other similar item templates.
+ */
+export default withSafeTypeForAs<typeof ItemLayout, ItemLayoutProps>(ItemLayout)
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 23f0c2f425..3e197b1ec7 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -20,7 +20,7 @@ import Image from '../Image/Image'
 import Layout from '../Layout/Layout'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 
 export interface LabelProps
   extends UIComponentProps,
@@ -52,10 +52,7 @@ export interface LabelProps
   imagePosition?: 'start' | 'end'
 }
 
-/**
- * A Label is used to classify content.
- */
-class Label extends UIComponent<ReactProps<LabelProps>, any> {
+class Label extends UIComponent<WithAsProp<LabelProps>, any> {
   static displayName = 'Label'
 
   static create: Function
@@ -154,4 +151,7 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
 
 Label.create = createShorthandFactory({ Component: Label, mappedProp: 'content' })
 
-export default Label
+/**
+ * A Label is used to classify content.
+ */
+export default withSafeTypeForAs<typeof Label, LabelProps, 'span'>(Label)
diff --git a/packages/react/src/components/Layout/Layout.tsx b/packages/react/src/components/Layout/Layout.tsx
index 3731c38a20..b1901a0a73 100644
--- a/packages/react/src/components/Layout/Layout.tsx
+++ b/packages/react/src/components/Layout/Layout.tsx
@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types'
 import cx from 'classnames'
 
 import { UIComponent, UIComponentProps, commonPropTypes, rtlTextContainer } from '../../lib'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 import { ICSSInJSStyle } from '../../themes/types'
 
 export interface LayoutSlotClassNames {
@@ -46,10 +46,7 @@ export interface LayoutProps extends UIComponentProps {
   vertical?: boolean
 }
 
-/**
- * (DEPRECATED) A layout is a utility for arranging the content of a component.
- */
-class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
+class Layout extends UIComponent<WithAsProp<LayoutProps>, any> {
   static className = 'ui-layout'
 
   static displayName = 'Layout'
@@ -158,7 +155,7 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
       renderMainArea,
       renderEndArea,
       renderGap,
-    } = this.props as LayoutPropsWithDefaults
+    } = this.props
 
     const startArea = renderStartArea({ ...this.props, classes })
     const mainArea = renderMainArea({ ...this.props, classes })
@@ -212,5 +209,7 @@ Layout.slotClassNames = {
   reducedEnd: `${Layout.className}--reduced__end`,
 }
 
-export default Layout
-export type LayoutPropsWithDefaults = LayoutProps & typeof Layout.defaultProps
+/**
+ * (DEPRECATED) A layout is a utility for arranging the content of a component.
+ */
+export default withSafeTypeForAs<typeof Layout, LayoutProps>(Layout)
diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx
index 7209e905e3..92508a5eb7 100644
--- a/packages/react/src/components/List/List.tsx
+++ b/packages/react/src/components/List/List.tsx
@@ -17,7 +17,7 @@ import ListItem, { ListItemProps } from './ListItem'
 import { listBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 import { ContainerFocusHandler } from '../../lib/accessibility/FocusHandling/FocusContainer'
-import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../types'
+import { WithAsProp, ShorthandValue, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 
 export interface ListSlotClassNames {
   item: string
@@ -64,10 +64,7 @@ export interface ListState {
   selectedIndex?: number
 }
 
-/**
- * A list displays a group of related content.
- */
-class List extends AutoControlledComponent<ReactProps<ListProps>, ListState> {
+class List extends AutoControlledComponent<WithAsProp<ListProps>, ListState> {
   static displayName = 'List'
 
   static className = 'ui-list'
@@ -220,4 +217,7 @@ class List extends AutoControlledComponent<ReactProps<ListProps>, ListState> {
   }
 }
 
-export default List
+/**
+ * A list displays a group of related content.
+ */
+export default withSafeTypeForAs<typeof List, ListProps, 'ul'>(List)
diff --git a/packages/react/src/components/List/ListItem.tsx b/packages/react/src/components/List/ListItem.tsx
index 00dfc7cff3..c79782b258 100644
--- a/packages/react/src/components/List/ListItem.tsx
+++ b/packages/react/src/components/List/ListItem.tsx
@@ -13,7 +13,7 @@ import {
 import Flex from '../Flex/Flex'
 import { listItemBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
-import { ShorthandValue, ReactProps, ComponentEventHandler } from '../../types'
+import { ShorthandValue, WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import Box from '../Box/Box'
 
 export interface ListItemSlotClassNames {
@@ -71,10 +71,7 @@ export interface ListItemState {
   isFromKeyboard: boolean
 }
 
-/**
- * A list item contains a single piece of content within a list.
- */
-class ListItem extends UIComponent<ReactProps<ListItemProps>, ListItemState> {
+class ListItem extends UIComponent<WithAsProp<ListItemProps>, ListItemState> {
   static create: Function
 
   static displayName = 'ListItem'
@@ -239,4 +236,7 @@ ListItem.slotClassNames = {
   endMedia: `${ListItem.className}__endMedia`,
 }
 
-export default ListItem
+/**
+ * A list item contains a single piece of content within a list.
+ */
+export default withSafeTypeForAs<typeof ListItem, ListItemProps, 'li'>(ListItem)
diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx
index 4aec99a55c..d2b079cb88 100644
--- a/packages/react/src/components/Loader/Loader.tsx
+++ b/packages/react/src/components/Loader/Loader.tsx
@@ -12,7 +12,7 @@ import {
 } from '../../lib'
 import { loaderBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Box from '../Box/Box'
 
 export type LoaderPosition = 'above' | 'below' | 'start' | 'end'
@@ -56,10 +56,7 @@ export interface LoaderState {
   visible: boolean
 }
 
-/**
- * A Loader indicates a possible user action.
- */
-class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
+class Loader extends UIComponent<WithAsProp<LoaderProps>, LoaderState> {
   static create: Function
   static displayName = 'Loader'
   static className = 'ui-loader'
@@ -150,4 +147,7 @@ class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
 
 Loader.create = createShorthandFactory({ Component: Loader })
 
-export default Loader
+/**
+ * A Loader indicates a possible user action.
+ */
+export default withSafeTypeForAs<typeof Loader, LoaderProps>(Loader)
diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx
index 24e779a0e2..04b040f610 100644
--- a/packages/react/src/components/Menu/Menu.tsx
+++ b/packages/react/src/components/Menu/Menu.tsx
@@ -18,7 +18,7 @@ import { menuBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityBehavior } from '../../lib/accessibility/types'
 
 import { ComponentVariablesObject, ComponentSlotStylesPrepared } from '../../themes/types'
-import { ReactProps, ShorthandCollection, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandCollection, ShorthandValue, withSafeTypeForAs } from '../../types'
 import MenuDivider from './MenuDivider'
 
 export type MenuShorthandKinds = 'divider' | 'item'
@@ -83,12 +83,7 @@ export interface MenuState {
   activeIndex?: number | string
 }
 
-/**
- * A menu displays grouped navigation actions.
- * @accessibility
- * Implements ARIA Menu, Toolbar or Tabs design pattern, depending on the behavior used.
- */
-class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
+class Menu extends AutoControlledComponent<WithAsProp<MenuProps>, MenuState> {
   static displayName = 'Menu'
 
   static className = 'ui-menu'
@@ -236,4 +231,9 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
 
 Menu.create = createShorthandFactory({ Component: Menu, mappedArrayProp: 'items' })
 
-export default Menu
+/**
+ * A menu displays grouped navigation actions.
+ * @accessibility
+ * Implements ARIA Menu, Toolbar or Tabs design pattern, depending on the behavior used.
+ */
+export default withSafeTypeForAs<typeof Menu, MenuProps, 'ul'>(Menu)
diff --git a/packages/react/src/components/Menu/MenuDivider.tsx b/packages/react/src/components/Menu/MenuDivider.tsx
index a08e2f726a..bb49bf01b5 100644
--- a/packages/react/src/components/Menu/MenuDivider.tsx
+++ b/packages/react/src/components/Menu/MenuDivider.tsx
@@ -13,7 +13,7 @@ import {
   ContentComponentProps,
   rtlTextContainer,
 } from '../../lib'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface MenuDividerProps
   extends UIComponentProps,
@@ -31,10 +31,7 @@ export interface MenuDividerProps
   inSubmenu?: boolean
 }
 
-/**
- * A menu divider visually segments menu items inside menu.
- */
-class MenuDivider extends UIComponent<ReactProps<MenuDividerProps>> {
+class MenuDivider extends UIComponent<WithAsProp<MenuDividerProps>> {
   static displayName = 'MenuDivider'
 
   static create: Function
@@ -72,4 +69,7 @@ class MenuDivider extends UIComponent<ReactProps<MenuDividerProps>> {
 
 MenuDivider.create = createShorthandFactory({ Component: MenuDivider, mappedProp: 'content' })
 
-export default MenuDivider
+/**
+ * A menu divider visually segments menu items inside menu.
+ */
+export default withSafeTypeForAs<typeof MenuDivider, MenuDividerProps, 'li'>(MenuDivider)
diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx
index 3448bab5d9..492db4a04e 100644
--- a/packages/react/src/components/Menu/MenuItem.tsx
+++ b/packages/react/src/components/Menu/MenuItem.tsx
@@ -24,7 +24,13 @@ import Menu from './Menu'
 import Box from '../Box/Box'
 import { menuItemBehavior, submenuBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
-import { ComponentEventHandler, ReactProps, ShorthandValue, ShorthandCollection } from '../../types'
+import {
+  ComponentEventHandler,
+  WithAsProp,
+  ShorthandValue,
+  ShorthandCollection,
+  withSafeTypeForAs,
+} from '../../types'
 import { focusAsync } from '../../lib/accessibility/FocusZone'
 
 export interface MenuItemSlotClassNames {
@@ -135,10 +141,7 @@ export interface MenuItemState {
   menuOpen: boolean
 }
 
-/**
- * A menu item is an actionable navigation item within a menu.
- */
-class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuItemState> {
+class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuItemState> {
   static displayName = 'MenuItem'
 
   static className = 'ui-menu__item'
@@ -409,4 +412,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
 
 MenuItem.create = createShorthandFactory({ Component: MenuItem, mappedProp: 'content' })
 
-export default MenuItem
+/**
+ * A menu item is an actionable navigation item within a menu.
+ */
+export default withSafeTypeForAs<typeof MenuItem, MenuItemProps, 'a'>(MenuItem)
diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index e8c006e1db..c0e265a3fb 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -23,7 +23,7 @@ import {
   doesNodeContainClick,
   setWhatInputSource,
 } from '../../lib'
-import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { ComponentEventHandler, ShorthandValue } from '../../types'
 
 import { getPopupPlacement, applyRtlToOffset, Alignment, Position } from './positioningHelper'
 import createPopperReferenceProxy from './createPopperReferenceProxy'
@@ -148,7 +148,7 @@ export interface PopupState {
  * @accessibility This is example usage of the accessibility tag.
  * This should be replaced with the actual description after the PR is merged
  */
-export default class Popup extends AutoControlledComponent<ReactProps<PopupProps>, PopupState> {
+export default class Popup extends AutoControlledComponent<PopupProps, PopupState> {
   static displayName = 'Popup'
 
   static className = 'ui-popup'
diff --git a/packages/react/src/components/Popup/PopupContent.tsx b/packages/react/src/components/Popup/PopupContent.tsx
index eb1da1eb6f..c70d1ef022 100644
--- a/packages/react/src/components/Popup/PopupContent.tsx
+++ b/packages/react/src/components/Popup/PopupContent.tsx
@@ -17,7 +17,7 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps, ComponentEventHandler } from '../../types'
+import { WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import Box from '../Box/Box'
 
 export interface PopupContentProps
@@ -57,12 +57,7 @@ export interface PopupContentProps
   pointerStyle?: PopperChildrenProps['arrowProps']['style']
 }
 
-/**
- * A PopupContent displays the content of a Popup component
- * @accessibility This is example usage of the accessibility tag.
- * This should be replaced with the actual description after the PR is merged
- */
-class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
+class PopupContent extends UIComponent<WithAsProp<PopupContentProps>, any> {
   public static create: Function
 
   public static displayName = 'PopupContent'
@@ -138,4 +133,9 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
 
 PopupContent.create = createShorthandFactory({ Component: PopupContent, mappedProp: 'content' })
 
-export default PopupContent
+/**
+ * A PopupContent displays the content of a Popup component
+ * @accessibility This is example usage of the accessibility tag.
+ * This should be replaced with the actual description after the PR is merged
+ */
+export default withSafeTypeForAs<typeof PopupContent, PopupContentProps>(PopupContent)
diff --git a/packages/react/src/components/Portal/Portal.tsx b/packages/react/src/components/Portal/Portal.tsx
index b61b625ce6..a382a6ff68 100644
--- a/packages/react/src/components/Portal/Portal.tsx
+++ b/packages/react/src/components/Portal/Portal.tsx
@@ -17,7 +17,6 @@ import {
 import PortalInner from './PortalInner'
 import { FocusTrapZone, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 import { AccessibilityAttributes, OnKeyDownHandler } from '../../lib/accessibility/types'
-import { ReactProps } from '../../types'
 
 type ReactMouseEvent = React.MouseEvent<HTMLElement>
 export type TriggerAccessibility = {
@@ -80,7 +79,7 @@ export interface PortalState {
 /**
  * A component that allows you to render children outside their parent.
  */
-class Portal extends AutoControlledComponent<ReactProps<PortalProps>, PortalState> {
+class Portal extends AutoControlledComponent<PortalProps, PortalState> {
   private portalNode: HTMLElement
   private triggerNode: HTMLElement
 
diff --git a/packages/react/src/components/Portal/PortalInner.tsx b/packages/react/src/components/Portal/PortalInner.tsx
index cd3af37f6e..8418588146 100644
--- a/packages/react/src/components/Portal/PortalInner.tsx
+++ b/packages/react/src/components/Portal/PortalInner.tsx
@@ -3,7 +3,6 @@ import * as _ from 'lodash'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { isBrowser, ChildrenComponentProps, commonPropTypes } from '../../lib'
-import { ReactProps } from '../../types'
 
 export interface PortalInnerProps extends ChildrenComponentProps {
   /** Existing element the portal should be bound to. */
@@ -27,7 +26,7 @@ export interface PortalInnerProps extends ChildrenComponentProps {
 /**
  * An inner component that allows you to render children outside their parent.
  */
-class PortalInner extends React.Component<ReactProps<PortalInnerProps>> {
+class PortalInner extends React.Component<PortalInnerProps> {
   static propTypes = {
     ...commonPropTypes.createCommon({
       accessibility: false,
diff --git a/packages/react/src/components/Provider/Provider.tsx b/packages/react/src/components/Provider/Provider.tsx
index 75b0a918cd..b03078670a 100644
--- a/packages/react/src/components/Provider/Provider.tsx
+++ b/packages/react/src/components/Provider/Provider.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { RendererProvider, ThemeProvider } from 'react-fela'
+import * as customPropTypes from '@stardust-ui/react-proptypes'
 
 import {
   felaRenderer as felaLtrRenderer,
@@ -20,24 +21,28 @@ import {
   StaticStyle,
   StaticStyleFunction,
   FontFace,
+  ComponentVariablesInput,
 } from '../../themes/types'
 
 import ProviderConsumer from './ProviderConsumer'
 import { mergeSiteVariables } from '../../lib/mergeThemes'
 import ProviderBox from './ProviderBox'
-import { Extendable } from '../../types'
+import { WithAsProp } from '../../types'
 
 export interface ProviderProps extends ChildrenComponentProps {
   theme: ThemeInput
+  variables?: ComponentVariablesInput
 }
 
 /**
  * The Provider passes the CSS in JS renderer and theme to your components.
  */
-class Provider extends React.Component<Extendable<ProviderProps>> {
+class Provider extends React.Component<WithAsProp<ProviderProps>> {
   static displayName = 'Provider'
 
   static propTypes = {
+    as: customPropTypes.as,
+    variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     theme: PropTypes.shape({
       siteVariables: PropTypes.object,
       componentVariables: PropTypes.object,
@@ -141,7 +146,7 @@ class Provider extends React.Component<Extendable<ProviderProps>> {
   }
 
   render() {
-    const { theme, children, ...unhandledProps } = this.props
+    const { as, theme, variables, children, ...unhandledProps } = this.props
 
     // rehydration disabled to avoid leaking styles between renderers
     // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
@@ -168,7 +173,7 @@ class Provider extends React.Component<Extendable<ProviderProps>> {
           return (
             <RendererProvider renderer={outgoingTheme.renderer} {...{ rehydrate: false }}>
               <ThemeProvider theme={outgoingTheme}>
-                <ProviderBox {...unhandledProps} {...rtlProps}>
+                <ProviderBox as={as} variables={variables} {...unhandledProps} {...rtlProps}>
                   {children}
                 </ProviderBox>
               </ThemeProvider>
diff --git a/packages/react/src/components/Provider/ProviderBox.tsx b/packages/react/src/components/Provider/ProviderBox.tsx
index 46ae62a1dc..51a73498b7 100644
--- a/packages/react/src/components/Provider/ProviderBox.tsx
+++ b/packages/react/src/components/Provider/ProviderBox.tsx
@@ -1,9 +1,19 @@
 import * as React from 'react'
-import { commonPropTypes } from '../../lib'
-import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
-import { ReactProps } from '../../types'
+import {
+  commonPropTypes,
+  ContentComponentProps,
+  ChildrenComponentProps,
+  UIComponentProps,
+} from '../../lib'
+import createComponent from '../../lib/createComponent'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
-const ProviderBox: CreateComponentReturnType<ReactProps<{}>> = createComponent<any>({
+export interface ProviderBoxProps
+  extends UIComponentProps<ProviderBoxProps>,
+    ContentComponentProps,
+    ChildrenComponentProps {}
+
+const ProviderBox = createComponent<WithAsProp<ProviderBoxProps>>({
   displayName: 'ProviderBox',
 
   className: 'ui-provider__box',
@@ -28,4 +38,4 @@ const ProviderBox: CreateComponentReturnType<ReactProps<{}>> = createComponent<a
   },
 })
 
-export default ProviderBox
+export default withSafeTypeForAs<typeof ProviderBox, ProviderBoxProps>(ProviderBox)
diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx
index bd0858f21d..a6acb72298 100644
--- a/packages/react/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx
@@ -17,7 +17,7 @@ import {
 import RadioGroupItem, { RadioGroupItemProps } from './RadioGroupItem'
 import { radioGroupBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
-import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../types'
+import { WithAsProp, ShorthandValue, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 
 export interface RadioGroupSlotClassNames {
   item: string
@@ -50,12 +50,7 @@ export interface RadioGroupProps extends UIComponentProps, ChildrenComponentProp
   vertical?: boolean
 }
 
-/**
- * A radio group allows a user to select a value from a small set of options.
- * @accessibility
- * Implements ARIA Radio Group design pattern.
- */
-class RadioGroup extends AutoControlledComponent<ReactProps<RadioGroupProps>, any> {
+class RadioGroup extends AutoControlledComponent<WithAsProp<RadioGroupProps>, any> {
   static displayName = 'RadioGroup'
 
   static className = 'ui-radiogroup'
@@ -200,4 +195,9 @@ class RadioGroup extends AutoControlledComponent<ReactProps<RadioGroupProps>, an
   }
 }
 
-export default RadioGroup
+/**
+ * A radio group allows a user to select a value from a small set of options.
+ * @accessibility
+ * Implements ARIA Radio Group design pattern.
+ */
+export default withSafeTypeForAs<typeof RadioGroup, RadioGroupProps>(RadioGroup)
diff --git a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
index 47e23e944c..37b53884b4 100644
--- a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
+++ b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
@@ -14,7 +14,7 @@ import {
   applyAccessibilityKeyHandlers,
 } from '../../lib'
 import Box from '../Box/Box'
-import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Icon from '../Icon/Icon'
 import { Accessibility } from '../../lib/accessibility/types'
 import { radioGroupItemBehavior } from '../../lib/accessibility'
@@ -87,13 +87,8 @@ export interface RadioGroupItemState {
   isFromKeyboard: boolean
 }
 
-/**
- * A single radio within a radio group.
- * @accessibility
- * Radio items need to be grouped in RadioGroup component to correctly handle accessibility.
- */
 class RadioGroupItem extends AutoControlledComponent<
-  ReactProps<RadioGroupItemProps>,
+  WithAsProp<RadioGroupItemProps>,
   RadioGroupItemState
 > {
   private elementRef = React.createRef<HTMLElement>()
@@ -187,4 +182,9 @@ class RadioGroupItem extends AutoControlledComponent<
 
 RadioGroupItem.create = createShorthandFactory({ Component: RadioGroupItem, mappedProp: 'label' })
 
-export default RadioGroupItem
+/**
+ * A single radio within a radio group.
+ * @accessibility
+ * Radio items need to be grouped in RadioGroup component to correctly handle accessibility.
+ */
+export default withSafeTypeForAs<typeof RadioGroupItem, RadioGroupItemProps>(RadioGroupItem)
diff --git a/packages/react/src/components/Reaction/Reaction.tsx b/packages/react/src/components/Reaction/Reaction.tsx
index 2ed7247f7e..c6ce8d4b95 100644
--- a/packages/react/src/components/Reaction/Reaction.tsx
+++ b/packages/react/src/components/Reaction/Reaction.tsx
@@ -16,7 +16,7 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../types'
+import { WithAsProp, ShorthandValue, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import Icon from '../Icon/Icon'
 import Box from '../Box/Box'
 import ReactionGroup from './ReactionGroup'
@@ -53,10 +53,8 @@ export interface ReactionProps
 export interface ReactionState {
   isFromKeyboard: boolean
 }
-/**
- * A reaction is used to indicate user's reaction.
- */
-class Reaction extends UIComponent<ReactProps<ReactionProps>, ReactionState> {
+
+class Reaction extends UIComponent<WithAsProp<ReactionProps>, ReactionState> {
   static create: Function
 
   static className = 'ui-reaction'
@@ -129,4 +127,7 @@ Reaction.slotClassNames = {
   content: `${Reaction.className}__content`,
 }
 
-export default Reaction
+/**
+ * A reaction is used to indicate user's reaction.
+ */
+export default withSafeTypeForAs<typeof Reaction, ReactionProps, 'span'>(Reaction)
diff --git a/packages/react/src/components/Reaction/ReactionGroup.tsx b/packages/react/src/components/Reaction/ReactionGroup.tsx
index 5a204cdc56..37a3b84654 100644
--- a/packages/react/src/components/Reaction/ReactionGroup.tsx
+++ b/packages/react/src/components/Reaction/ReactionGroup.tsx
@@ -2,7 +2,7 @@ import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as React from 'react'
 import * as _ from 'lodash'
 
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import {
   UIComponent,
   childrenExist,
@@ -31,10 +31,7 @@ export interface ReactionGroupProps
   items?: ShorthandValue[]
 }
 
-/**
- * A reaction group presents multiple reactions as a group.
- */
-class ReactionGroup extends UIComponent<ReactProps<ReactionGroupProps>> {
+class ReactionGroup extends UIComponent<WithAsProp<ReactionGroupProps>> {
   static create: Function
 
   public static displayName = 'ReactionGroup'
@@ -91,4 +88,7 @@ ReactionGroup.create = createShorthandFactory({
   mappedArrayProp: 'items',
 })
 
-export default ReactionGroup
+/**
+ * A reaction group presents multiple reactions as a group.
+ */
+export default withSafeTypeForAs<typeof ReactionGroup, ReactionGroupProps>(ReactionGroup)
diff --git a/packages/react/src/components/Segment/Segment.tsx b/packages/react/src/components/Segment/Segment.tsx
index 334895aee3..f15e72c030 100644
--- a/packages/react/src/components/Segment/Segment.tsx
+++ b/packages/react/src/components/Segment/Segment.tsx
@@ -11,7 +11,7 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Box from '../Box/Box'
 
 export interface SegmentProps
@@ -28,10 +28,7 @@ export interface SegmentProps
   inverted?: boolean
 }
 
-/**
- * A segment is used to create a grouping of related content.
- */
-class Segment extends UIComponent<ReactProps<SegmentProps>, any> {
+class Segment extends UIComponent<WithAsProp<SegmentProps>, any> {
   static className = 'ui-segment'
 
   static displayName = 'Segment'
@@ -65,4 +62,7 @@ class Segment extends UIComponent<ReactProps<SegmentProps>, any> {
   }
 }
 
-export default Segment
+/**
+ * A segment is used to create a grouping of related content.
+ */
+export default withSafeTypeForAs<typeof Segment, SegmentProps>(Segment)
diff --git a/packages/react/src/components/Status/Status.tsx b/packages/react/src/components/Status/Status.tsx
index 53fb366605..84607e0e76 100644
--- a/packages/react/src/components/Status/Status.tsx
+++ b/packages/react/src/components/Status/Status.tsx
@@ -12,7 +12,7 @@ import {
   commonPropTypes,
   SizeValue,
 } from '../../lib'
-import { ReactProps, ShorthandValue } from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 
 export interface StatusProps extends UIComponentProps {
   /**
@@ -34,12 +34,7 @@ export interface StatusProps extends UIComponentProps {
   state?: 'success' | 'info' | 'warning' | 'error' | 'unknown'
 }
 
-/**
- * A status graphically represents someone's or something's state.
- * @accessibility
- * The 'img' role is used to identify an element as image. 'Title' attribute have to be provided on status component. Then reader narrate content of 'title' attribute.
- */
-class Status extends UIComponent<ReactProps<StatusProps>, any> {
+class Status extends UIComponent<WithAsProp<StatusProps>, any> {
   static create: Function
 
   static className = 'ui-status'
@@ -83,4 +78,9 @@ class Status extends UIComponent<ReactProps<StatusProps>, any> {
 
 Status.create = createShorthandFactory({ Component: Status, mappedProp: 'state' })
 
-export default Status
+/**
+ * A status graphically represents someone's or something's state.
+ * @accessibility
+ * The 'img' role is used to identify an element as image. 'Title' attribute have to be provided on status component. Then reader narrate content of 'title' attribute.
+ */
+export default withSafeTypeForAs<typeof Status, StatusProps, 'span'>(Status)
diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
index f4304becbd..d8e93dcba1 100644
--- a/packages/react/src/components/Text/Text.tsx
+++ b/packages/react/src/components/Text/Text.tsx
@@ -16,7 +16,7 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface TextProps
   extends UIComponentProps,
@@ -60,17 +60,7 @@ export interface TextProps
   truncated?: boolean
 }
 
-/**
- * A Text component formats occurrences of text consistently.
- * @accessibility
- * Text is how people read the content on your website.
- * Ensure that a contrast ratio of at least 4.5:1 exists between text and the background behind the text.
- *
- * To ensure that RTL mode will be properly handled for provided 'content' value, ensure that either:
- * - 'content' is provided as plain string (then dir="auto" attribute will be applied automatically)
- * - for other 'content' value types (i.e. that use elements inside) ensure that dir="auto" attribute is applied for all places in content where necessary
- */
-class Text extends UIComponent<ReactProps<TextProps>, any> {
+class Text extends UIComponent<WithAsProp<TextProps>, any> {
   static create: Function
 
   static className = 'ui-text'
@@ -114,4 +104,14 @@ class Text extends UIComponent<ReactProps<TextProps>, any> {
 
 Text.create = createShorthandFactory({ Component: Text, mappedProp: 'content' })
 
-export default Text
+/**
+ * A Text component formats occurrences of text consistently.
+ * @accessibility
+ * Text is how people read the content on your website.
+ * Ensure that a contrast ratio of at least 4.5:1 exists between text and the background behind the text.
+ *
+ * To ensure that RTL mode will be properly handled for provided 'content' value, ensure that either:
+ * - 'content' is provided as plain string (then dir="auto" attribute will be applied automatically)
+ * - for other 'content' value types (i.e. that use elements inside) ensure that dir="auto" attribute is applied for all places in content where necessary
+ */
+export default withSafeTypeForAs<typeof Text, TextProps, 'span'>(Text)
diff --git a/packages/react/src/components/Tree/Tree.tsx b/packages/react/src/components/Tree/Tree.tsx
index 3d33f3c8e3..9594452e31 100644
--- a/packages/react/src/components/Tree/Tree.tsx
+++ b/packages/react/src/components/Tree/Tree.tsx
@@ -13,7 +13,7 @@ import {
   ChildrenComponentProps,
   rtlTextContainer,
 } from '../../lib'
-import { ShorthandValue, ShorthandRenderFunction, ReactProps } from '../../types'
+import { ShorthandValue, ShorthandRenderFunction, WithAsProp, withSafeTypeForAs } from '../../types'
 import { Accessibility } from '../../lib/accessibility/types'
 import { treeBehavior } from '../../lib/accessibility'
 
@@ -54,10 +54,7 @@ export interface TreeState {
   activeIndex: number[] | number
 }
 
-/**
- * Allows users to display data organised in tree-hierarchy.
- */
-class Tree extends AutoControlledComponent<ReactProps<TreeProps>, TreeState> {
+class Tree extends AutoControlledComponent<WithAsProp<TreeProps>, TreeState> {
   static create: Function
 
   static displayName = 'Tree'
@@ -159,4 +156,7 @@ class Tree extends AutoControlledComponent<ReactProps<TreeProps>, TreeState> {
 
 Tree.create = createShorthandFactory({ Component: Tree, mappedArrayProp: 'items' })
 
-export default Tree
+/**
+ * Allows users to display data organised in tree-hierarchy.
+ */
+export default withSafeTypeForAs<typeof Tree, TreeProps, 'ul'>(Tree)
diff --git a/packages/react/src/components/Tree/TreeItem.tsx b/packages/react/src/components/Tree/TreeItem.tsx
index 38830c5d4b..4309264b8b 100644
--- a/packages/react/src/components/Tree/TreeItem.tsx
+++ b/packages/react/src/components/Tree/TreeItem.tsx
@@ -18,9 +18,10 @@ import {
 } from '../../lib'
 import {
   ComponentEventHandler,
-  ReactProps,
+  WithAsProp,
   ShorthandRenderFunction,
   ShorthandValue,
+  withSafeTypeForAs,
 } from '../../types'
 
 export interface TreeItemSlotClassNames {
@@ -67,7 +68,7 @@ export interface TreeItemProps extends UIComponentProps, ChildrenComponentProps
   title?: ShorthandValue
 }
 
-class TreeItem extends UIComponent<ReactProps<TreeItemProps>> {
+class TreeItem extends UIComponent<WithAsProp<TreeItemProps>> {
   static create: Function
 
   static displayName = 'TreeItem'
@@ -154,4 +155,4 @@ class TreeItem extends UIComponent<ReactProps<TreeItemProps>> {
 
 TreeItem.create = createShorthandFactory({ Component: TreeItem, mappedProp: 'title' })
 
-export default TreeItem
+export default withSafeTypeForAs<typeof TreeItem, TreeItemProps, 'li'>(TreeItem)
diff --git a/packages/react/src/components/Tree/TreeTitle.tsx b/packages/react/src/components/Tree/TreeTitle.tsx
index 56c2d92b12..397641cddd 100644
--- a/packages/react/src/components/Tree/TreeTitle.tsx
+++ b/packages/react/src/components/Tree/TreeTitle.tsx
@@ -15,7 +15,7 @@ import {
 } from '../../lib'
 import { treeTitleBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
-import { ComponentEventHandler, ReactProps } from '../../types'
+import { ComponentEventHandler, WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface TreeTitleProps
   extends UIComponentProps,
@@ -42,7 +42,7 @@ export interface TreeTitleProps
   hasSubtree?: boolean
 }
 
-class TreeTitle extends UIComponent<ReactProps<TreeTitleProps>> {
+class TreeTitle extends UIComponent<WithAsProp<TreeTitleProps>> {
   static create: Function
 
   static className = 'ui-tree__title'
@@ -92,4 +92,4 @@ class TreeTitle extends UIComponent<ReactProps<TreeTitleProps>> {
 
 TreeTitle.create = createShorthandFactory({ Component: TreeTitle, mappedProp: 'content' })
 
-export default TreeTitle
+export default withSafeTypeForAs<typeof TreeTitle, TreeTitleProps, 'a'>(TreeTitle)
diff --git a/packages/react/src/components/Video/Video.tsx b/packages/react/src/components/Video/Video.tsx
index ee0b21fdfe..7be8017eda 100644
--- a/packages/react/src/components/Video/Video.tsx
+++ b/packages/react/src/components/Video/Video.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 
 import { createShorthandFactory, UIComponent, UIComponentProps, commonPropTypes } from '../../lib'
 
-import { ReactProps } from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 import { defaultBehavior } from '../../lib/accessibility'
 
 export interface VideoProps extends UIComponentProps {
@@ -27,10 +27,7 @@ export interface VideoProps extends UIComponentProps {
   src?: string
 }
 
-/**
- * An video is a graphicical and audio representation of something.
- */
-class Video extends UIComponent<ReactProps<VideoProps>> {
+class Video extends UIComponent<WithAsProp<VideoProps>> {
   static create: Function
 
   static className = 'ui-video'
@@ -102,4 +99,7 @@ class Video extends UIComponent<ReactProps<VideoProps>> {
 
 Video.create = createShorthandFactory({ Component: Video, mappedProp: 'src' })
 
-export default Video
+/**
+ * An video is a graphicical and audio representation of something.
+ */
+export default withSafeTypeForAs<typeof Video, VideoProps, 'video'>(Video)
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 6bc2116a1c..803b8ac4cb 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -37,11 +37,7 @@ export {
   ChatMessageSlotClassNames,
 } from './components/Chat/ChatMessage'
 
-export {
-  default as Divider,
-  DividerProps,
-  DividerPropsWithDefaults,
-} from './components/Divider/Divider'
+export { default as Divider, DividerProps } from './components/Divider/Divider'
 export { default as Dialog, DialogProps } from './components/Dialog/Dialog'
 
 export {
@@ -86,7 +82,6 @@ export { default as Input, InputState, InputProps } from './components/Input/Inp
 
 export {
   default as ItemLayout,
-  ItemLayoutPropsWithDefaults,
   ItemLayoutProps,
   ItemLayoutSlotClassNames,
 } from './components/ItemLayout/ItemLayout'
@@ -94,12 +89,7 @@ export {
 export { default as Label, LabelProps } from './components/Label/Label'
 export { default as Loader, LoaderProps } from './components/Loader/Loader'
 
-export {
-  default as Layout,
-  LayoutPropsWithDefaults,
-  LayoutProps,
-  LayoutSlotClassNames,
-} from './components/Layout/Layout'
+export { default as Layout, LayoutProps, LayoutSlotClassNames } from './components/Layout/Layout'
 
 export { default as List, ListProps } from './components/List/List'
 export { default as ListItem, ListItemProps } from './components/List/ListItem'
diff --git a/packages/react/src/lib/commonPropInterfaces.ts b/packages/react/src/lib/commonPropInterfaces.ts
index bccc36c217..04bfdf01d4 100644
--- a/packages/react/src/lib/commonPropInterfaces.ts
+++ b/packages/react/src/lib/commonPropInterfaces.ts
@@ -18,11 +18,6 @@ export interface AnimatedComponentProps {
 export interface UIComponentProps<P = any, V = any>
   extends StyledComponentProps<P, V>,
     AnimatedComponentProps {
-  [key: string]: any
-
-  /** An element type to render as (string or function). */
-  as?: any
-
   /** Additional CSS class name(s) to apply.  */
   className?: string
 }
diff --git a/packages/react/src/lib/htmlPropsUtils.tsx b/packages/react/src/lib/htmlPropsUtils.tsx
index 62ff47ac0c..b0f5e31951 100644
--- a/packages/react/src/lib/htmlPropsUtils.tsx
+++ b/packages/react/src/lib/htmlPropsUtils.tsx
@@ -2,7 +2,78 @@ import * as _ from 'lodash'
 
 export const htmlImageProps = ['alt', 'height', 'src', 'srcSet', 'width']
 
-export const htmlInputAttrs = [
+export type HtmlInputEvents =
+  // keyboard
+  | 'onKeyDown'
+  | 'onKeyPress'
+  | 'onKeyUp'
+  | 'onFocus'
+  | 'onBlur'
+
+  // form
+  | 'onChange'
+  | 'onInput'
+
+  // mouse
+  | 'onClick'
+  | 'onContextMenu'
+  | 'onDrag'
+  | 'onDragEnd'
+  | 'onDragEnter'
+  | 'onDragExit'
+  | 'onDragLeave'
+  | 'onDragOver'
+  | 'onDragStart'
+  | 'onDrop'
+  | 'onMouseDown'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseMove'
+  | 'onMouseOut'
+  | 'onMouseOver'
+  | 'onMouseUp'
+
+  // selection
+  | 'onSelect'
+
+  // touch
+  | 'onTouchCancel'
+  | 'onTouchEnd'
+  | 'onTouchMove'
+  | 'onTouchStart'
+
+export type HtmlInputAttrs =
+  // REACT |
+  | 'selected'
+  | 'defaultValue'
+  | 'defaultChecked'
+
+  // LIMITED HTML PROPS
+  | 'accept'
+  | 'autoCapitalize'
+  | 'autoComplete'
+  | 'autoCorrect'
+  | 'autoFocus'
+  | 'checked'
+  | 'disabled'
+  | 'form'
+  | 'id'
+  | 'list'
+  | 'max'
+  | 'maxLength'
+  | 'min'
+  | 'minLength'
+  | 'multiple'
+  | 'name'
+  | 'pattern'
+  | 'placeholder'
+  | 'readOnly'
+  | 'required'
+  | 'step'
+  | 'type'
+  | 'value'
+
+export const htmlInputAttrs: HtmlInputAttrs[] = [
   // REACT
   'selected',
   'defaultValue',
@@ -34,7 +105,9 @@ export const htmlInputAttrs = [
   'value',
 ]
 
-export const htmlInputEvents = [
+export type HtmlInputProps = HtmlInputAttrs | HtmlInputEvents
+
+export const htmlInputEvents: HtmlInputEvents[] = [
   // EVENTS
   // keyboard
   'onKeyDown',
@@ -78,7 +151,7 @@ export const htmlInputEvents = [
   'onTouchStart',
 ]
 
-export const htmlInputProps = [...htmlInputAttrs, ...htmlInputEvents]
+export const htmlInputProps: HtmlInputProps[] = [...htmlInputAttrs, ...htmlInputEvents]
 
 /**
  * Returns an array of objects consisting of: props of html input element and restProps.
diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts
index 7e3cb10c72..9d3e78f7b8 100644
--- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts
+++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts
@@ -2,8 +2,8 @@ import * as _ from 'lodash'
 
 import { childrenExist, pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle, ColorScheme } from '../../../types'
-import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider'
 import { DividerVariables } from './dividerVariables'
+import { DividerProps } from 'src/components/Divider/Divider'
 
 const beforeAndAfter = (
   size: number,
@@ -16,7 +16,7 @@ const beforeAndAfter = (
   background: _.get(colors, 'foreground', variables.dividerColor),
 })
 
-const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, DividerVariables> = {
+const dividerStyles: ComponentSlotStylesInput<DividerProps, DividerVariables> = {
   root: ({ props, variables }): ICSSInJSStyle => {
     const { children, color, fitted, size, important, content } = props
     const colors = variables.colorScheme[color]
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index a00b8f0921..4a53bb6c3f 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -26,25 +26,27 @@ export type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResul
 export type Props<T = {}> = T & ObjectOf<any>
 export type ReactChildren = React.ReactNodeArray | React.ReactNode
 
-export type ReactProps<T> = { [K in keyof T]: NullableIfUndefined<T[K]> }
+export type WithAsProp<T> = T & { as?: any }
 
 export type ComponentEventHandler<TProps> = (
   event: React.SyntheticEvent<HTMLElement>,
-  data: TProps,
+  data?: TProps,
 ) => void
 
-type ChildrenProps = { children: any }
-export type PropsOf<T> = T extends React.Component<ReactProps<infer TProps>>
-  ? (ChildrenProps & TProps)
-  : T extends React.Component<infer TProps>
-  ? (ChildrenProps & TProps)
-  : T extends React.FunctionComponent<ReactProps<infer TProps>>
-  ? (ChildrenProps & TProps)
+export type ComponentKeyboardEventHandler<TProps> = (
+  event: React.KeyboardEvent<any>,
+  data?: TProps,
+) => void
+
+export type InstanceOf<T> = T extends { new (...args: any[]): infer TInstance } ? TInstance : never
+
+export type PropsOf<T> = T extends React.Component<infer TProps>
+  ? TProps
   : T extends React.FunctionComponent<infer TProps>
-  ? (ChildrenProps & TProps)
+  ? TProps
   : T extends keyof JSX.IntrinsicElements
   ? JSX.IntrinsicElements[T]
-  : any
+  : never
 
 // ========================================================
 // Shorthand Factories
@@ -73,3 +75,85 @@ type ReactNode =
 
 export type ShorthandValue<P = {}> = ReactNode | Props<P>
 export type ShorthandCollection<K = []> = ShorthandValue<{ kind?: K }>[]
+
+// ========================================================
+// Types for As prop support
+// ========================================================
+
+type ValueOf<TFirst, TSecond, TKey extends keyof (TFirst & TSecond)> = TKey extends keyof TFirst
+  ? TFirst[TKey]
+  : TKey extends keyof TSecond
+  ? TSecond[TKey]
+  : {}
+
+type Extended<TFirst, TSecond> = { [K in keyof (TFirst & TSecond)]: ValueOf<TFirst, TSecond, K> }
+
+/**
+ * TODO: introduce back this path once TS compiler issue that leads to
+ * 'JS Heap Out Of Memory' exception will be fixed
+ */
+// type AsHtmlElement<Tag extends keyof JSX.IntrinsicElements, TProps> = {
+//   as: Tag
+// } & JSX.IntrinsicElements[Tag] &
+//   TProps
+
+/**
+ * TODO: restrict type further once TS compiler issue that leads to
+ * 'JS Heap Out Of Memory' exception will be fixed
+ */
+type AsComponent<C, TProps> = { as: C } & TProps & { [K: string]: any } // & PropsOf<InstanceOf<C>>
+
+type CommonStaticProps =
+  | 'Group'
+  | 'Item'
+  | 'SelectedItem'
+  | 'Description'
+  | 'Message'
+  | 'Field'
+  | 'className'
+  | 'create'
+  | 'slotClassNames'
+  | 'displayName'
+  | 'isTypeOfElement'
+
+type Intersect<First extends string | number | symbol, Second extends string | number | symbol> = {
+  [K in First]: K extends Second ? K : never
+}[First]
+
+type PickProps<T, Props extends string | number | symbol> = {
+  [K in Intersect<Props, keyof T>]: T[K]
+}
+
+export const withSafeTypeForAs = function<
+  TComponentType extends React.ComponentType,
+  TProps,
+  TAs extends keyof JSX.IntrinsicElements = 'div'
+>(componentType: TComponentType) {
+  /**
+   * TODO: introduce overload once TS compiler issue that leads to
+   * 'JS Heap Out Of Memory' exception will be fixed
+   */
+  // function overloadedComponentType<Tag extends keyof JSX.IntrinsicElements>(
+  //   x: AsHtmlElement<Tag, TProps>,
+  // ): JSX.Element
+  function overloadedComponentType<Tag>(x: AsComponent<Tag, TProps>): JSX.Element
+  function overloadedComponentType(x: Extended<TProps, JSX.IntrinsicElements[TAs]>): JSX.Element
+  function overloadedComponentType(): never {
+    throw new Error('Defines unreachable execution scenario')
+  }
+
+  return (componentType as any) as typeof overloadedComponentType &
+    PickProps<TComponentType, CommonStaticProps>
+}
+
+export type UNSAFE_TypedComponent<TComponentType, TProps> = React.FunctionComponent<
+  TProps & { [K: string]: any }
+> &
+  PickProps<TComponentType, keyof TComponentType>
+
+export const UNSAFE_typed = <TComponentType>(componentType: TComponentType) => {
+  return {
+    withProps: <TProps>() =>
+      (componentType as any) as UNSAFE_TypedComponent<TComponentType, TProps>,
+  }
+}
diff --git a/packages/react/test/specs/commonTests/implementsShorthandProp.tsx b/packages/react/test/specs/commonTests/implementsShorthandProp.tsx
index 8e666e5fce..0df0581144 100644
--- a/packages/react/test/specs/commonTests/implementsShorthandProp.tsx
+++ b/packages/react/test/specs/commonTests/implementsShorthandProp.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { ReactWrapper } from 'enzyme'
 import { mountWithProvider } from 'test/utils'
-import { Props, PropsOf } from 'src/types'
+import { Props, PropsOf, InstanceOf } from 'src/types'
 
 export type ShorthandTestOptions<TProps = any> = {
   mapsValueToProp: keyof (TProps & React.HTMLProps<HTMLElement>) | false
@@ -14,7 +14,7 @@ export const DefaultShorthandTestOptions: ShorthandTestOptions = {
 export type ShorthandPropTestsRunner<TComponent> = <
   TShorthandComponent extends React.ComponentType
 >(
-  shorthandProp: keyof PropsOf<TComponent>,
+  shorthandProp: keyof PropsOf<InstanceOf<TComponent>>,
   ShorthandComponent: TShorthandComponent,
   options?: ShorthandTestOptions<PropsOf<TShorthandComponent>>,
 ) => any
diff --git a/packages/react/test/specs/commonTests/implementsWrapperProp.tsx b/packages/react/test/specs/commonTests/implementsWrapperProp.tsx
index a42724a88a..e9eda326d1 100644
--- a/packages/react/test/specs/commonTests/implementsWrapperProp.tsx
+++ b/packages/react/test/specs/commonTests/implementsWrapperProp.tsx
@@ -3,7 +3,7 @@ import { ReactWrapper } from 'enzyme'
 import { mountWithProvider as mount } from 'test/utils'
 
 import Box from 'src/components/Box/Box'
-import { ReactProps, ShorthandValue } from 'src/types'
+import { ShorthandValue } from 'src/types'
 
 export interface ImplementsWrapperPropOptions {
   wrapppedComponentSelector: any
@@ -15,7 +15,7 @@ type WrapperProps = {
 }
 
 const implementsWrapperProp = (
-  Component: React.ComponentType<ReactProps<WrapperProps>>,
+  Component: React.ComponentType<WrapperProps>,
   options: ImplementsWrapperPropOptions,
 ) => {
   const { wrapppedComponentSelector, WrapperComponent = Box } = options