From c8aace9c1860f806f830817ca0222eca47af30fc Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Tue, 13 Dec 2022 13:40:41 +0100
Subject: [PATCH 01/30] chore: replace ta-scripts with release-it (#4410)

* chore: replace ta-scripts with release-it

* chore: bump Node versions on CI
---
 .circleci/config.yml             |    2 +-
 .github/workflows/size-limit.yml |    2 +-
 .release-it.json                 |    9 +
 package.json                     |    6 +-
 yarn.lock                        | 1891 +++++++++++++++++++++++++-----
 5 files changed, 1607 insertions(+), 303 deletions(-)
 create mode 100644 .release-it.json

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8ea763b310..2c972a3ff1 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -7,7 +7,7 @@ general:
 
 docker_defaults: &docker_defaults
   docker:
-    - image: circleci/node:12-browsers
+    - image: circleci/node:16-browsers
   working_directory: ~/project/semantic-ui-react
 
 environment:
diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
index 1897cbd5da..913c8a0c81 100644
--- a/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -14,7 +14,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 16.x
 
       - name: Cache node_modules
         uses: actions/cache@v1
diff --git a/.release-it.json b/.release-it.json
new file mode 100644
index 0000000000..8ede38bf97
--- /dev/null
+++ b/.release-it.json
@@ -0,0 +1,9 @@
+{
+  "github": {
+    "release": false
+  },
+  "npm": {
+    "publishArgs": "--registry=https://registry.npmjs.org",
+    "skipChecks": true
+  }
+}
diff --git a/package.json b/package.json
index ec63118c97..0908136904 100644
--- a/package.json
+++ b/package.json
@@ -29,9 +29,7 @@
     "prettier:fix": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",
     "prerelease": "yarn lint && yarn tsd:test && yarn test && cross-env NODE_ENV=production yarn build",
     "postrelease": "yarn deploy:docs",
-    "release:major": "yarn prerelease && ta-script npm/release major && yarn postrelease",
-    "release:minor": "yarn prerelease && ta-script npm/release minor && yarn postrelease",
-    "release:patch": "yarn prerelease && ta-script npm/release patch && yarn postrelease",
+    "release": "release-it",
     "prestart": "yarn satisfied --fix yarn",
     "start": "cross-env NODE_ENV=development gulp --series start:docs",
     "satisfied": "satisfied --ignore \"webpack|react|react-dom\" --skip-invalid",
@@ -166,6 +164,7 @@
     "react-static-routes": "^1.0.0",
     "react-test-renderer": "^17.0.0",
     "react-universal-component": "^3.0.3",
+    "release-it": "^15.5.1",
     "rimraf": "^3.0.2",
     "satisfied": "^1.1.2",
     "semantic-ui-css": "^2.4.1",
@@ -174,7 +173,6 @@
     "sinon-chai": "^3.5.0",
     "size-limit": "^4.5.5",
     "start-server-and-test": "^1.11.5",
-    "ta-scripts": "^2.5.2",
     "terser-webpack-plugin": "^3.0.8",
     "terser-webpack-plugin-legacy": "^1.2.3",
     "through2": "^3.0.1",
diff --git a/yarn.lock b/yarn.lock
index ce63ba4867..145a05eb9e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1137,6 +1137,11 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@iarna/toml@2.2.5":
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
+  integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1213,6 +1218,107 @@
   dependencies:
     mkdirp "^1.0.4"
 
+"@octokit/auth-token@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-3.0.2.tgz#a0fc8de149fd15876e1ac78f6525c1c5ab48435f"
+  integrity sha512-pq7CwIMV1kmzkFTimdwjAINCXKTajZErLB4wMLYapR2nuB/Jpr66+05wOTZMSCBXP6n4DdDWT2W19Bm17vU69Q==
+  dependencies:
+    "@octokit/types" "^8.0.0"
+
+"@octokit/core@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-4.1.0.tgz#b6b03a478f1716de92b3f4ec4fd64d05ba5a9251"
+  integrity sha512-Czz/59VefU+kKDy+ZfDwtOIYIkFjExOKf+HA92aiTZJ6EfWpFzYQWw0l54ji8bVmyhc+mGaLUbSUmXazG7z5OQ==
+  dependencies:
+    "@octokit/auth-token" "^3.0.0"
+    "@octokit/graphql" "^5.0.0"
+    "@octokit/request" "^6.0.0"
+    "@octokit/request-error" "^3.0.0"
+    "@octokit/types" "^8.0.0"
+    before-after-hook "^2.2.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/endpoint@^7.0.0":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-7.0.3.tgz#0b96035673a9e3bedf8bab8f7335de424a2147ed"
+  integrity sha512-57gRlb28bwTsdNXq+O3JTQ7ERmBTuik9+LelgcLIVfYwf235VHbN9QNo4kXExtp/h8T423cR5iJThKtFYxC7Lw==
+  dependencies:
+    "@octokit/types" "^8.0.0"
+    is-plain-object "^5.0.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/graphql@^5.0.0":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-5.0.4.tgz#519dd5c05123868276f3ae4e50ad565ed7dff8c8"
+  integrity sha512-amO1M5QUQgYQo09aStR/XO7KAl13xpigcy/kI8/N1PnZYSS69fgte+xA4+c2DISKqUZfsh0wwjc2FaCt99L41A==
+  dependencies:
+    "@octokit/request" "^6.0.0"
+    "@octokit/types" "^8.0.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/openapi-types@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-14.0.0.tgz#949c5019028c93f189abbc2fb42f333290f7134a"
+  integrity sha512-HNWisMYlR8VCnNurDU6os2ikx0s0VyEjDYHNS/h4cgb8DeOxQ0n72HyinUtdDVxJhFy3FWLGl0DJhfEWk3P5Iw==
+
+"@octokit/plugin-paginate-rest@^5.0.0":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-5.0.1.tgz#93d7e74f1f69d68ba554fa6b888c2a9cf1f99a83"
+  integrity sha512-7A+rEkS70pH36Z6JivSlR7Zqepz3KVucEFVDnSrgHXzG7WLAzYwcHZbKdfTXHwuTHbkT1vKvz7dHl1+HNf6Qyw==
+  dependencies:
+    "@octokit/types" "^8.0.0"
+
+"@octokit/plugin-request-log@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz#5e50ed7083a613816b1e4a28aeec5fb7f1462e85"
+  integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==
+
+"@octokit/plugin-rest-endpoint-methods@^6.7.0":
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.7.0.tgz#2f6f17f25b6babbc8b41d2bb0a95a8839672ce7c"
+  integrity sha512-orxQ0fAHA7IpYhG2flD2AygztPlGYNAdlzYz8yrD8NDgelPfOYoRPROfEyIe035PlxvbYrgkfUZIhSBKju/Cvw==
+  dependencies:
+    "@octokit/types" "^8.0.0"
+    deprecation "^2.3.1"
+
+"@octokit/request-error@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-3.0.2.tgz#f74c0f163d19463b87528efe877216c41d6deb0a"
+  integrity sha512-WMNOFYrSaX8zXWoJg9u/pKgWPo94JXilMLb2VManNOby9EZxrQaBe/QSC4a1TzpAlpxofg2X/jMnCyZgL6y7eg==
+  dependencies:
+    "@octokit/types" "^8.0.0"
+    deprecation "^2.0.0"
+    once "^1.4.0"
+
+"@octokit/request@^6.0.0":
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-6.2.2.tgz#a2ba5ac22bddd5dcb3f539b618faa05115c5a255"
+  integrity sha512-6VDqgj0HMc2FUX2awIs+sM6OwLgwHvAi4KCK3mT2H2IKRt6oH9d0fej5LluF5mck1lRR/rFWN0YIDSYXYSylbw==
+  dependencies:
+    "@octokit/endpoint" "^7.0.0"
+    "@octokit/request-error" "^3.0.0"
+    "@octokit/types" "^8.0.0"
+    is-plain-object "^5.0.0"
+    node-fetch "^2.6.7"
+    universal-user-agent "^6.0.0"
+
+"@octokit/rest@19.0.5":
+  version "19.0.5"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-19.0.5.tgz#4dbde8ae69b27dca04b5f1d8119d282575818f6c"
+  integrity sha512-+4qdrUFq2lk7Va+Qff3ofREQWGBeoTKNqlJO+FGjFP35ZahP+nBenhZiGdu8USSgmq4Ky3IJ/i4u0xbLqHaeow==
+  dependencies:
+    "@octokit/core" "^4.1.0"
+    "@octokit/plugin-paginate-rest" "^5.0.0"
+    "@octokit/plugin-request-log" "^1.0.4"
+    "@octokit/plugin-rest-endpoint-methods" "^6.7.0"
+
+"@octokit/types@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-8.0.0.tgz#93f0b865786c4153f0f6924da067fe0bb7426a9f"
+  integrity sha512-65/TPpOJP1i3K4lBJMnWqPUJ6zuOtzhtagDvydAWbEXpbFYA0oMKKyLb95NFZZP0lSh/4b6K+DQlzvYQJQQePg==
+  dependencies:
+    "@octokit/openapi-types" "^14.0.0"
+
 "@percy/cli-build@1.0.0-beta.73":
   version "1.0.0-beta.73"
   resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.0.0-beta.73.tgz#f282747984327982628aeee16ccacf7d885b53aa"
@@ -1348,6 +1454,21 @@
   dependencies:
     "@percy/logger" "1.0.0-beta.73"
 
+"@pnpm/network.ca-file@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz#2ab05e09c1af0cdf2fcf5035bea1484e222f7983"
+  integrity sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==
+  dependencies:
+    graceful-fs "4.2.10"
+
+"@pnpm/npm-conf@^1.0.4":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@pnpm/npm-conf/-/npm-conf-1.0.5.tgz#3475541fb71d7b6ce68acaaa3392eae9fedf3276"
+  integrity sha512-hD8ml183638O3R6/Txrh0L8VzGOrFXgRtRDG4qQC4tONdZ5Z1M+tlUUDUvrjYdmK6G+JTBTeaCLMna11cXzi8A==
+  dependencies:
+    "@pnpm/network.ca-file" "^1.0.1"
+    config-chain "^1.1.11"
+
 "@popperjs/core@^2.6.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
@@ -1368,6 +1489,11 @@
     exenv "^1.2.2"
     prop-types "^15.6.2"
 
+"@sindresorhus/is@^5.2.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-5.3.0.tgz#0ec9264cf54a527671d990eb874e030b55b70dcc"
+  integrity sha512-CX6t4SYQ37lzxicAqsBtxA3OseeoVrh9cSJ5PFYam0GksYlupRfy1A+Q4aYD3zvcfECLc0zO2u+ZnR2UYKvCrw==
+
 "@sinonjs/commons@^1", "@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0", "@sinonjs/commons@^1.7.2":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.1.tgz#e7df00f98a203324f6dc7cc606cad9d4a8ab2217"
@@ -1411,6 +1537,13 @@
   dependencies:
     semver "7.3.2"
 
+"@szmarczak/http-timer@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-5.0.1.tgz#c7c1bf1141cdd4751b0399c8fc7b8b664cd5be3a"
+  integrity sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==
+  dependencies:
+    defer-to-connect "^2.0.1"
+
 "@textlint/ast-node-types@^4.0.3":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@textlint/ast-node-types/-/ast-node-types-4.2.1.tgz#978fa10e23468114462fc08ef29f96980c12a8ef"
@@ -1429,6 +1562,11 @@
     traverse "^0.6.6"
     unified "^6.1.6"
 
+"@tootallnate/once@1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
+  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -1443,6 +1581,11 @@
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
 
+"@types/http-cache-semantics@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
+  integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==
+
 "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4":
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
@@ -1819,6 +1962,11 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
+acorn-walk@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
@@ -1842,6 +1990,11 @@ acorn@^7.1.1, acorn@^7.3.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd"
   integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==
 
+acorn@^8.7.0:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
 address@1.0.3, address@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
@@ -1850,7 +2003,7 @@ after@0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
 
-agent-base@6:
+agent-base@6, agent-base@^6.0.0, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
@@ -1963,6 +2116,13 @@ ansi-align@^2.0.0:
   dependencies:
     string-width "^2.0.0"
 
+ansi-align@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
+  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
+  dependencies:
+    string-width "^4.1.0"
+
 ansi-colors@4.1.1, ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
@@ -1995,6 +2155,13 @@ ansi-escapes@^4.3.0:
   dependencies:
     type-fest "^0.11.0"
 
+ansi-escapes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-6.0.0.tgz#68c580e87a489f6df3d761028bb93093fde6bd8a"
+  integrity sha512-IG23inYII3dWlU2EyiAiGj6Bwal5GzsgPMwjYGvc1HPE2dgbj4ZB5ToWBKSquKw74nB3TIuOwaI6/jSULzfgrw==
+  dependencies:
+    type-fest "^3.0.0"
+
 ansi-gray@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
@@ -2023,6 +2190,11 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -2041,6 +2213,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
     "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
 ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
@@ -2050,10 +2227,6 @@ any-observable@^0.3.0:
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
   integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
 
-any-promise@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
-
 anymatch@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
@@ -2112,6 +2285,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 args@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/args/-/args-4.0.0.tgz#5ca24cdba43d4b17111c56616f5f2e9d91933954"
@@ -2278,15 +2456,16 @@ array.prototype.flatmap@^1.2.3:
     es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
 
-array.prototype.map@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.2.tgz#9a4159f416458a23e9483078de1106b2ef68f8ec"
-  integrity sha512-Az3OYxgsa1g7xDYp86l0nnN4bcmuEITGe1rbdEBVkrqkzMgDcbdQ2R7r41pNzti+4NMces3H8gMmuioZUilLgw==
+array.prototype.map@^1.0.1, array.prototype.map@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.5.tgz#6e43c2fee6c0fb5e4806da2dc92eb00970809e55"
+  integrity sha512-gfaKntvwqYIuC7mLLyv2wzZIJqrRhn5PZ9EfFejSx6a78sV7iDsGpG9P+3oUPtm1Rerqm6nrKS4FYuTIvWfo3g==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
     es-array-method-boxes-properly "^1.0.0"
-    is-string "^1.0.4"
+    is-string "^1.0.7"
 
 arraybuffer.slice@~0.0.7:
   version "0.0.7"
@@ -2344,6 +2523,13 @@ ast-types@0.12.2:
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.12.2.tgz#341656049ee328ac03fc805c156b49ebab1e4462"
   integrity sha512-8c83xDLJM/dLDyXNLiR6afRRm4dPKN6KAnKqytRK3DBJul9lA+atxdQkNDkSVPdTqea5HiRq3lnnOIZ0MBpvdg==
 
+ast-types@^0.13.2:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.4.tgz#ee0d77b343263965ecc3fb62da16e7222b2b6782"
+  integrity sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==
+  dependencies:
+    tslib "^2.0.1"
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -2372,6 +2558,13 @@ async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
+async-retry@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/async-retry/-/async-retry-1.3.3.tgz#0e7f36c04d8478e7a58bdbed80cedf977785f280"
+  integrity sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==
+  dependencies:
+    retry "0.13.1"
+
 async-sema@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/async-sema/-/async-sema-1.4.1.tgz#6b01d56b4bfbd5364a2cada0a6569516d57a5cbb"
@@ -2451,12 +2644,6 @@ axe-core@^3.5.4:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227"
   integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==
 
-axios@^0.15.2:
-  version "0.15.3"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.15.3.tgz#2c9d638b2e191a08ea1d6cc988eadd6ba5bdc053"
-  dependencies:
-    follow-redirects "1.0.0"
-
 axios@^0.16.2:
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.16.2.tgz#ba4f92f17167dfbab40983785454b9ac149c3c6d"
@@ -3325,9 +3512,10 @@ base64-arraybuffer@0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
 
-base64-js@^1.0.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+base64-js@^1.0.2, base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
 base64id@2.0.0:
   version "2.0.0"
@@ -3367,6 +3555,11 @@ beeper@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
 
+before-after-hook@^2.2.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c"
+  integrity sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==
+
 better-assert@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
@@ -3425,6 +3618,15 @@ bl@^4.0.3:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+bl@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-5.1.0.tgz#183715f678c7188ecef9fe475d90209400624273"
+  integrity sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==
+  dependencies:
+    buffer "^6.0.3"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 blob-util@2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
@@ -3439,7 +3641,7 @@ bluebird@3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
-bluebird@3.7.2, bluebird@^3.3.3, bluebird@^3.4.7, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5, bluebird@^3.7.2:
+bluebird@3.7.2, bluebird@^3.4.7, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5, bluebird@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -3495,6 +3697,20 @@ boxen@1.3.0, boxen@^1.2.1:
     term-size "^1.2.0"
     widest-line "^2.0.0"
 
+boxen@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-7.0.0.tgz#9e5f8c26e716793fc96edcf7cf754cdf5e3fbf32"
+  integrity sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==
+  dependencies:
+    ansi-align "^3.0.1"
+    camelcase "^7.0.0"
+    chalk "^5.0.1"
+    cli-boxes "^3.0.0"
+    string-width "^5.1.2"
+    type-fest "^2.13.0"
+    widest-line "^4.0.1"
+    wrap-ansi "^8.0.1"
+
 brace-expansion@^1.0.0, brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3679,6 +3895,14 @@ buffer@^5.2.1, buffer@^5.5.0:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
 
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
@@ -3687,11 +3911,16 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
-bytes@3.1.0, bytes@^3.1.0:
+bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
+bytes@3.1.2, bytes@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
 cacache@^11.0.2:
   version "11.3.2"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.2.tgz#2d81e308e3d258ca38125b676b98b2ac9ce69bfa"
@@ -3770,11 +3999,37 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+cacheable-lookup@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz#3476a8215d046e5a3202a9209dd13fec1f933a27"
+  integrity sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==
+
+cacheable-request@^10.2.1:
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-10.2.3.tgz#25277efe121308ab722c28b4164e51382b4adeb1"
+  integrity sha512-6BehRBOs7iurNjAYN9iPazTwFDaMQavJO8W1MEm3s2pH8q/tkPTtLDRUZaweWK87WFGf2Y5wLAlaCJlR5kOz3w==
+  dependencies:
+    "@types/http-cache-semantics" "^4.0.1"
+    get-stream "^6.0.1"
+    http-cache-semantics "^4.1.0"
+    keyv "^4.5.2"
+    mimic-response "^4.0.0"
+    normalize-url "^8.0.0"
+    responselike "^3.0.0"
+
 cachedir@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
   integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -3833,6 +4088,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelcase@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.0.tgz#fd112621b212126741f998d614cbc2a8623fd174"
+  integrity sha512-JToIvOmz6nhGsUhAYScbo2d6Py5wojjNfoxoc2mEVLUdJ70gJK2gnd+ABY1Tc3sVMyK7QDPtN0T/XdlCQWITyQ==
+
 caniuse-api@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
@@ -3938,6 +4198,11 @@ chalk@2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.1.2.tgz#d957f370038b75ac572471e83be4c5ca9f8e8c45"
+  integrity sha512-E5CkT4jWURs1Vy5qGJye+XwCkNj7Od3Af7CP6SujMetSMkLs8Do2RWJK5yx1wamHV/op8Rz+9rltjaTQWDnEFQ==
+
 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -3963,6 +4228,11 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^5.0.0, chalk@^5.0.1, chalk@^5.1.2:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.2.0.tgz#249623b7d66869c673699fb66d65723e54dfcfb3"
+  integrity sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==
+
 change-case@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.0.2.tgz#fd48746cce02f03f0a672577d1d3a8dc2eceb037"
@@ -4002,6 +4272,11 @@ chardet@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.0.tgz#0bbe1355ac44d7a3ed4a925707c4ef70f8190f6c"
 
+chardet@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
+
 check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
@@ -4123,6 +4398,11 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
+ci-info@^3.2.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.7.0.tgz#6d01b3696c59915b6ce057e4aa4adfc2fa25f5ef"
+  integrity sha512-2CpRNYmImPx+RXKLq6jko/L07phmS9I02TyqkcNU20GCF/GgaWvc58hPtjxDX8lPpkdwc9sNh72V9k00S7ezog==
+
 ci-job-number@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/ci-job-number/-/ci-job-number-1.2.2.tgz#f4e5918fcaeeda95b604f214be7d7d4a961fe0c0"
@@ -4173,6 +4453,11 @@ cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
 
+cli-boxes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-3.0.0.tgz#71a10c716feeba005e4504f36329ef0b17cf3145"
+  integrity sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==
+
 cli-cursor@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
@@ -4193,10 +4478,17 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
-cli-spinners@^2.2.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
-  integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==
+cli-cursor@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-4.0.0.tgz#3cecfe3734bf4fe02a8361cbdc0f6fe28c6a57ea"
+  integrity sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==
+  dependencies:
+    restore-cursor "^4.0.0"
+
+cli-spinners@^2.2.0, cli-spinners@^2.6.1:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.7.0.tgz#f815fd30b5f9eaac02db604c7a231ed7cb2f797a"
+  integrity sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==
 
 cli-table3@~0.6.0:
   version "0.6.0"
@@ -4228,6 +4520,11 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+cli-width@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.0.0.tgz#a5622f6a3b0a9e3e711a25f099bf2399f608caf6"
+  integrity sha512-ZksGS2xpa/bYkNzN3BAw1wEjsLV/ZKOf/CCrJ/QOBsxx6fOARIkwTutxp1XIOIohi6HKmOFjMoK/XaqDVUpEEw==
+
 clipboard@^2.0.0:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
@@ -4431,7 +4728,7 @@ colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -4551,6 +4848,17 @@ configstore@^3.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
+configstore@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-6.0.0.tgz#49eca2ebc80983f77e09394a1a56e0aca8235566"
+  integrity sha512-cD31W1v3GqUlQvbBCGcXmd2Nj9SvLDOP1oQ0YFuLETufzSPaKp11rYBsSOm7rCsW3OnIRAFM3OxRhceaXNYHkA==
+  dependencies:
+    dot-prop "^6.0.1"
+    graceful-fs "^4.2.6"
+    unique-string "^3.0.0"
+    write-file-atomic "^3.0.3"
+    xdg-basedir "^5.0.1"
+
 confusing-browser-globals@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
@@ -4693,6 +5001,16 @@ cors@^2.8.4:
     object-assign "^4"
     vary "^1"
 
+cosmiconfig@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.0.0.tgz#e9feae014eab580f858f8a0288f38997a7bebe97"
+  integrity sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ==
+  dependencies:
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+
 cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
@@ -4821,6 +5139,13 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
+crypto-random-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-4.0.0.tgz#5a3cc53d7dd86183df5da0312816ceeeb5bb1fc2"
+  integrity sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==
+  dependencies:
+    type-fest "^1.0.1"
+
 css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -5009,6 +5334,16 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+data-uri-to-buffer@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
+  integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
+
+data-uri-to-buffer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
+  integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
+
 date-fns@^1.27.2:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
@@ -5080,6 +5415,13 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
+decompress-response@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
+  dependencies:
+    mimic-response "^3.1.0"
+
 decompress-tar@^4.0.0, decompress-tar@^4.1.0, decompress-tar@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/decompress-tar/-/decompress-tar-4.1.1.tgz#718cbd3fcb16209716e70a26b84e7ba4592e5af1"
@@ -5182,12 +5524,23 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
-define-properties@^1.1.2, define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+defer-to-connect@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587"
+  integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+define-properties@^1.1.2, define-properties@^1.1.3, define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
   dependencies:
-    object-keys "^1.0.12"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
 
 define-property@^0.2.5:
   version "0.2.5"
@@ -5212,7 +5565,17 @@ defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
 
-del@^2.0.2, del@^2.2.0:
+degenerator@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/degenerator/-/degenerator-3.0.2.tgz#6a61fcc42a702d6e50ff6023fe17bff435f68235"
+  integrity sha512-c0mef3SNQo56t6urUU6tdQAs+ThoD0o9B9MJ8HEt7NQcGEILCRFqQb7ZbP9JAv+QF1Ky5plydhMR/IrqWDm+TQ==
+  dependencies:
+    ast-types "^0.13.2"
+    escodegen "^1.8.1"
+    esprima "^4.0.0"
+    vm2 "^3.9.8"
+
+del@^2.0.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
   dependencies:
@@ -5252,10 +5615,20 @@ depd@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
 
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
 
+deprecation@^2.0.0, deprecation@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
+  integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
+
 des.js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
@@ -5480,6 +5853,13 @@ dot-prop@^4.1.0:
   dependencies:
     is-obj "^1.0.0"
 
+dot-prop@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-6.0.1.tgz#fc26b3cf142b9e59b74dbd39ed66ce620c681083"
+  integrity sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==
+  dependencies:
+    is-obj "^2.0.0"
+
 double-ended-queue@2.1.0-0:
   version "2.1.0-0"
   resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c"
@@ -5536,6 +5916,11 @@ each-props@^1.3.0:
     is-plain-object "^2.0.1"
     object.defaults "^1.1.0"
 
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -5590,10 +5975,10 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-regex@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.0.0.tgz#48a2309cc8a1d2e9d23bc6a67c39b63032e76ea4"
-  integrity sha512-6p1NII1Vm62wni/VR/cUMauVQoxmLVb9csqQlvLz+hO2gk8U2UYDfXHQSUYIBKmZwAKz867IDqG7B+u0mj+M6w==
+emoji-regex@^9.0.0, emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
 emoji-regex@~6.1.0:
   version "6.1.3"
@@ -5759,22 +6144,36 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.4, es-abstract@^1.17.5:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.4, es-abstract@^1.17.5, es-abstract@^1.19.0, es-abstract@^1.20.4:
+  version "1.20.5"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.5.tgz#e6dc99177be37cacda5988e692c3fa8b218e95d2"
+  integrity sha512-7h8MM2EQhsCA7pU/Nv78qOXFpD8Rhqd12gYiSJVkrH9+e8VuA8JlPJK/hQjjlLv6pJvx/z1iRFKzYb0XT/RuAQ==
   dependencies:
+    call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.3"
+    get-symbol-description "^1.0.0"
+    gopd "^1.0.1"
     has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.0"
-    is-regex "^1.1.0"
-    object-inspect "^1.7.0"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.2"
     object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trimend "^1.0.6"
+    string.prototype.trimstart "^1.0.6"
+    unbox-primitive "^1.0.2"
 
 es-array-method-boxes-properly@^1.0.0:
   version "1.0.0"
@@ -5860,6 +6259,11 @@ escalade@^3.0.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
   integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
 
+escape-goat@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-4.0.0.tgz#9424820331b510b0666b98f7873fe11ac4aa8081"
+  integrity sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -5868,6 +6272,23 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
+escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
+escodegen@^1.8.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 escope@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
@@ -6163,9 +6584,10 @@ esprima@^2.6.0:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
-esprima@^4.0.0, esprima@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esquery@^1.0.0, esquery@^1.2.0:
   version "1.3.1"
@@ -6181,9 +6603,10 @@ esrecurse@^4.1.0:
     estraverse "^4.1.0"
     object-assign "^4.0.1"
 
-estraverse@^4.1.0, estraverse@^4.1.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 estraverse@^5.1.0:
   version "5.1.0"
@@ -6262,6 +6685,21 @@ execa@3.4.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-6.1.0.tgz#cea16dee211ff011246556388effa0818394fb20"
+  integrity sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.1"
+    human-signals "^3.0.1"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^3.0.7"
+    strip-final-newline "^3.0.0"
+
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
@@ -6301,6 +6739,21 @@ execa@^4.0.1, execa@^4.0.2:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
 executable@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
@@ -6409,6 +6862,15 @@ external-editor@^2.0.4:
     iconv-lite "^0.4.17"
     tmp "^0.0.33"
 
+external-editor@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
+  dependencies:
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
+
 extglob@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
@@ -6508,10 +6970,10 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.9:
-  version "3.2.10"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.10.tgz#2734f83baa7f43b7fd41e13bc34438f4ffe284ee"
-  integrity sha512-s9nFhFnvR63wls6/kM88kQqDhMu0AfdjqouE2l5GVQPbqLgyFjjU5ry/r2yKsJxpb9Py1EYNqieFrmMaX4v++A==
+fast-glob@^3.2.11, fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -6523,7 +6985,7 @@ fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
 
-fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
@@ -6582,6 +7044,14 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fetch-blob@^3.1.2, fetch-blob@^3.1.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
+  integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
+  dependencies:
+    node-domexception "^1.0.0"
+    web-streams-polyfill "^3.0.3"
+
 figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
@@ -6608,6 +7078,14 @@ figures@^3.2.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+figures@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-5.0.0.tgz#126cd055052dea699f8a54e8c9450e6ecfc44d5f"
+  integrity sha512-ej8ksPF4x6e5wvK9yevct0UCXh8TTFlWGVLlgjZuoBH1HwjIfKE/IdL5mq89sFA7zELi1VhKpmtDnrs7zWyeyg==
+  dependencies:
+    escape-string-regexp "^5.0.0"
+    is-unicode-supported "^1.2.0"
+
 file-entry-cache@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
@@ -6641,6 +7119,11 @@ file-type@^6.1.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-6.2.0.tgz#e50cd75d356ffed4e306dc4f5bcf52a79903a919"
 
+file-uri-to-path@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-2.0.0.tgz#7b415aeba227d575851e0a5b0c640d7656403fba"
+  integrity sha512-hjPFI8oE/2iQPVe4gbrJ73Pp+Xfub2+WI2LlXDbsaJBwT5wuMh35WNWVYYTpnz895shtwfyutMFLFywpQAFdLg==
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -6870,12 +7353,6 @@ flush-write-stream@^1.0.0, flush-write-stream@^1.0.2:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-follow-redirects@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.0.0.tgz#8e34298cbd2e176f254effec75a1c78cc849fd37"
-  dependencies:
-    debug "^2.2.0"
-
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
@@ -6909,6 +7386,20 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
+form-data-encoder@^2.1.2:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-2.1.4.tgz#261ea35d2a70d48d30ec7a9603130fa5515e9cd5"
+  integrity sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==
+
+form-data@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@^2.3.2, form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -6923,6 +7414,13 @@ format@^0.2.2:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
+formdata-polyfill@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
+  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
+  dependencies:
+    fetch-blob "^3.1.2"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -6962,16 +7460,6 @@ fs-extra@6.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^0.26.5:
-  version "0.26.7"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.26.7.tgz#9ae1fdd94897798edab76d0918cf42d0c3184fa9"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
-
 fs-extra@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
@@ -7019,15 +7507,6 @@ fs-mkdirp-stream@^1.0.0:
     graceful-fs "^4.1.11"
     through2 "^2.0.3"
 
-fs-promise@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/fs-promise/-/fs-promise-0.5.0.tgz#4347d6bf624655a7061a4319213c393276ad3ef3"
-  dependencies:
-    any-promise "^1.0.0"
-    fs-extra "^0.26.5"
-    mz "^2.3.1"
-    thenify-all "^1.6.0"
-
 fs-readdir-recursive@^1.0.0, fs-readdir-recursive@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
@@ -7060,27 +7539,36 @@ fsevents@~2.1.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
+ftp@^0.3.10:
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/ftp/-/ftp-0.3.10.tgz#9197d861ad8142f3e63d5a83bfe4c59f7330885d"
+  integrity sha512-faFVML1aBx2UoDStmLwv2Wptt4vw5x03xxX172nhA5Y5HBshW5JweqQ2W4xL4dezQTG8inJsuYcpPHHU3X5OTQ==
+  dependencies:
+    readable-stream "1.1.x"
+    xregexp "2.0.0"
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-function.prototype.name@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.2.tgz#5cdf79d7c05db401591dfde83e3b70c5123e9a45"
-  integrity sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==
+function.prototype.name@^1.1.2, function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    functions-have-names "^1.2.0"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
-functions-have-names@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.1.tgz#a981ac397fa0c9964551402cdc5533d7a4d52f91"
-  integrity sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA==
+functions-have-names@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
 gauge@~2.7.3:
   version "2.7.4"
@@ -7113,6 +7601,15 @@ get-func-name@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
 
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
+  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -7156,6 +7653,31 @@ get-stream@^5.0.0, get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^6.0.0, get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+get-uri@3:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-3.0.2.tgz#f0ef1356faabc70e1f9404fa3b66b2ba9bfc725c"
+  integrity sha512-+5s0SJbGoyiJTZZ2JTpFPLMPSch72KEqGOTvQsBqg0RBWvwhWUSYZFAtz3TPW0GXJuLBJPts1E241iHg+VRfhg==
+  dependencies:
+    "@tootallnate/once" "1"
+    data-uri-to-buffer "3"
+    debug "4"
+    file-uri-to-path "2"
+    fs-extra "^8.1.0"
+    ftp "^0.3.10"
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -7198,6 +7720,21 @@ git-promise@^0.3.1:
     q "~1.4.1"
     shelljs "~0.5.3"
 
+git-up@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/git-up/-/git-up-7.0.0.tgz#bace30786e36f56ea341b6f69adfd83286337467"
+  integrity sha512-ONdIrbBCFusq1Oy0sC71F5azx8bVkvtZtMJAsv+a6lz5YAmbNnLD6HAB4gptHZVLPR8S2/kVN6Gab7lryq5+lQ==
+  dependencies:
+    is-ssh "^1.4.0"
+    parse-url "^8.1.0"
+
+git-url-parse@13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-13.1.0.tgz#07e136b5baa08d59fabdf0e33170de425adf07b4"
+  integrity sha512-5FvPJP/70WkIprlUZ33bm4UAaFdjcLkJLpWft1BeZKqwR0uhhNGoKwlUaPtVb4LxCSQ++erHapRak9kWGj+FCA==
+  dependencies:
+    git-up "^7.0.0"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -7278,6 +7815,13 @@ global-dirs@^2.0.1:
   dependencies:
     ini "^1.3.5"
 
+global-dirs@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.1.tgz#0c488971f066baceda21447aecb1a8b911d22485"
+  integrity sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==
+  dependencies:
+    ini "2.0.0"
+
 global-modules@1.0.0, global-modules@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
@@ -7335,6 +7879,17 @@ globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
+globby@13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.2.tgz#29047105582427ab6eca4f905200667b056da515"
+  integrity sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.11"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
 globby@^11.0.1, globby@^11.0.4:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
@@ -7381,6 +7936,30 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+got@12.5.3, got@^12.1.0:
+  version "12.5.3"
+  resolved "https://registry.yarnpkg.com/got/-/got-12.5.3.tgz#82bdca2dd61258a02e24d668ea6e7abb70ac3598"
+  integrity sha512-8wKnb9MGU8IPGRIo+/ukTy9XLJBwDiCpIf5TVzQ9Cpol50eMTpBq2GAuDsuDIz7hTYmZgMgC1e9ydr6kSDWs3w==
+  dependencies:
+    "@sindresorhus/is" "^5.2.0"
+    "@szmarczak/http-timer" "^5.0.1"
+    cacheable-lookup "^7.0.0"
+    cacheable-request "^10.2.1"
+    decompress-response "^6.0.0"
+    form-data-encoder "^2.1.2"
+    get-stream "^6.0.1"
+    http2-wrapper "^2.1.10"
+    lowercase-keys "^3.0.0"
+    p-cancelable "^3.0.0"
+    responselike "^3.0.0"
+
 got@^6.3.0, got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -7397,10 +7976,10 @@ got@^6.3.0, got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
-  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+graceful-fs@4.2.10, graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
@@ -7548,6 +8127,11 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
 has-binary2@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.3.tgz#7776ac627f3ea77250cfc332dab7ddf5e4f5d11d"
@@ -7581,14 +8165,21 @@ has-gulplog@^0.1.0:
   dependencies:
     sparkles "^1.0.0"
 
-has-symbol-support-x@^1.4.1:
-  version "1.4.2"
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-symbol-support-x@^1.4.1:
+  version "1.4.2"
   resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455"
 
-has-symbols@^1.0.0, has-symbols@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
-  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+has-symbols@^1.0.0, has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
 has-to-string-tag-x@^1.2.0:
   version "1.4.1"
@@ -7596,6 +8187,13 @@ has-to-string-tag-x@^1.2.0:
   dependencies:
     has-symbol-support-x "^1.4.1"
 
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -7627,6 +8225,11 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
+has-yarn@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-3.0.0.tgz#c3c21e559730d1d3b57e28af1f30d06fac38147d"
+  integrity sha512-IrsVwUHhEULx3R8f/aA8AHuEzAorplsab/v8HBzEiIukwq5i/EC+xmOW+HfP1OaDP+2JkgT1yILHN2O3UFIbcA==
+
 has@^1.0.1, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -7869,6 +8472,11 @@ htmlparser2@~3.3.0:
     domutils "1.1"
     readable-stream "1.0"
 
+http-cache-semantics@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -7893,6 +8501,17 @@ http-errors@1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
 http-errors@~1.7.2:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
@@ -7908,6 +8527,15 @@ http-parser-js@>=0.4.0:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
 
+http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
+  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
+  dependencies:
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+
 http-proxy-middleware@~0.17.4:
   version "0.17.4"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
@@ -7935,10 +8563,26 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
+http2-wrapper@^2.1.10:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/http2-wrapper/-/http2-wrapper-2.2.0.tgz#b80ad199d216b7d3680195077bd7b9060fa9d7f3"
+  integrity sha512-kZB0wxMo0sh1PehyjJUWRFEd99KC5TLjZ2cULC4f9iqJBAmKQQXEICjxl5iPJRwP40dpeHFqqhm7tYCvODpqpQ==
+  dependencies:
+    quick-lru "^5.1.1"
+    resolve-alpn "^1.2.0"
+
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+https-proxy-agent@5, https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
 https-proxy-agent@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
@@ -7952,6 +8596,16 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+human-signals@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-3.0.1.tgz#c740920859dafa50e5a3222da9d3bf4bb0e5eef5"
+  integrity sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==
+
 humanize-url@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff"
@@ -7980,7 +8634,7 @@ iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -7997,9 +8651,10 @@ icss-utils@^2.1.0:
   dependencies:
     postcss "^6.0.1"
 
-ieee754@^1.1.4:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+ieee754@^1.1.4, ieee754@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
 iferr@^0.1.5:
   version "0.1.5"
@@ -8051,6 +8706,11 @@ import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
 
+import-lazy@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
+  integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
+
 import-local@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
@@ -8130,6 +8790,11 @@ inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
+ini@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
+  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
+
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
@@ -8184,20 +8849,41 @@ inquirer@3.3.0, inquirer@^3.0.6, inquirer@^3.3.0:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
+inquirer@9.1.4:
+  version "9.1.4"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.1.4.tgz#482da8803670a64bd942bc5166a9547a19d41474"
+  integrity sha512-9hiJxE5gkK/cM2d1mTEnuurGTAoHebbkX0BYl3h7iEg7FYfuNIom+nDfBCSWtvSnoSrWCeBxqqBZu26xdlJlXA==
+  dependencies:
+    ansi-escapes "^6.0.0"
+    chalk "^5.1.2"
+    cli-cursor "^4.0.0"
+    cli-width "^4.0.0"
+    external-editor "^3.0.3"
+    figures "^5.0.0"
+    lodash "^4.17.21"
+    mute-stream "0.0.8"
+    ora "^6.1.2"
+    run-async "^2.4.0"
+    rxjs "^7.5.7"
+    string-width "^5.1.2"
+    strip-ansi "^7.0.1"
+    through "^2.3.6"
+    wrap-ansi "^8.0.1"
+
 internal-ip@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
   dependencies:
     meow "^3.3.0"
 
-internal-slot@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
-  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
+internal-slot@^1.0.2, internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
   dependencies:
-    es-abstract "^1.17.0-next.1"
+    get-intrinsic "^1.1.0"
     has "^1.0.3"
-    side-channel "^1.0.2"
+    side-channel "^1.0.4"
 
 interpret@^1.0.0, interpret@^1.4.0:
   version "1.4.0"
@@ -8218,6 +8904,11 @@ ip@1.1.5, ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
 
+ip@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
+  integrity sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -8273,6 +8964,13 @@ is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -8286,10 +8984,13 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+is-boolean-object@^1.0.1, is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
 
 is-buffer@^1.1.4, is-buffer@^1.1.5:
   version "1.1.6"
@@ -8300,10 +9001,17 @@ is-buffer@^2.0.0, is-buffer@~2.0.3:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
   integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
 
-is-callable@^1.1.4, is-callable@^1.1.5, is-callable@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
-  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
+is-callable@^1.1.4, is-callable@^1.1.5, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-ci@3.0.1, is-ci@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
+  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
+  dependencies:
+    ci-info "^3.2.0"
 
 is-ci@^1.0.10:
   version "1.1.0"
@@ -8358,6 +9066,11 @@ is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
 
+is-docker@^2.0.0, is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
 is-dotfile@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
@@ -8445,11 +9158,24 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-installed-globally@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
+  integrity sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==
+  dependencies:
+    global-dirs "^3.0.0"
+    is-path-inside "^3.0.2"
+
 is-interactive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
   integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
 
+is-interactive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-2.0.0.tgz#40c57614593826da1100ade6059778d597f16e90"
+  integrity sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==
+
 is-lower-case@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/is-lower-case/-/is-lower-case-1.1.3.tgz#7e147be4768dc466db3bfb21cc60b31e6ad69393"
@@ -8469,10 +9195,20 @@ is-negated-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
 
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
 
+is-npm@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-6.0.0.tgz#b59e75e8915543ca5d881ecff864077cba095261"
+  integrity sha512-JEjxbSmtPSt1c8XTkVrlujcXdKV1/tvuQ7GwKcAlyiVLeYFQ2VHat8xfrDJsIkhCdF/tZ7CiIR3sy141c6+gPQ==
+
 is-number-object@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
@@ -8503,6 +9239,11 @@ is-obj@^1.0.0, is-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
 is-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
@@ -8536,10 +9277,10 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
-is-path-inside@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
-  integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
+is-path-inside@^3.0.1, is-path-inside@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
 is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
@@ -8551,6 +9292,11 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -8567,12 +9313,13 @@ is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
 
-is-regex@^1.0.4, is-regex@^1.0.5, is-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
-  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
+is-regex@^1.0.4, is-regex@^1.0.5, is-regex@^1.1.0, is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
   dependencies:
-    has-symbols "^1.0.1"
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
 
 is-regexp@^1.0.0:
   version "1.0.0"
@@ -8609,6 +9356,20 @@ is-set@^2.0.1:
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
   integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
 
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-ssh@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.4.0.tgz#4f8220601d2839d8fa624b3106f8e8884f01b8b2"
+  integrity sha512-x7+VxdxOdlV3CYpjvRLBv5Lo9OJerlYanjwFrPR9fuGPjCiNiCzFgAWpiLAohSbsnH4ZAys3SBh+hq5rJosxUQ==
+  dependencies:
+    protocols "^2.0.1"
+
 is-stream@1.1.0, is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -8618,10 +9379,17 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
 
 is-subset@^0.1.1:
   version "0.1.1"
@@ -8633,14 +9401,14 @@ is-svg@^2.0.0:
   dependencies:
     html-comment-regex "^1.1.0"
 
-is-symbol@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
-  integrity sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
   dependencies:
-    has-symbols "^1.0.0"
+    has-symbols "^1.0.2"
 
-is-typedarray@~1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
@@ -8657,6 +9425,11 @@ is-unc-path@^1.0.0:
   dependencies:
     unc-path-regex "^0.1.2"
 
+is-unicode-supported@^1.1.0, is-unicode-supported@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz#d824984b616c292a2e198207d4a609983842f714"
+  integrity sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==
+
 is-upper-case@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-upper-case/-/is-upper-case-1.1.2.tgz#8d0b1fa7e7933a1e58483600ec7d9661cbaf756f"
@@ -8671,6 +9444,13 @@ is-valid-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-1.0.0.tgz#29bf3eff701be2d4d315dbacc39bc39fe8f601aa"
 
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-whitespace-character@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
@@ -8691,6 +9471,18 @@ is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
 
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+is-yarn-global@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.4.1.tgz#b312d902b313f81e4eaf98b6361ba2b45cd694bb"
+  integrity sha512-/kppl+R+LO5VmhYSEWARUFjodS25D68gvj8W7z0I7OWhUla5xWu8KL6CtB2V0R6yqhnRgbcaREMr4EEM6htLPQ==
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@@ -8800,7 +9592,7 @@ iterate-iterator@^1.0.1:
   resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.1.tgz#1693a768c1ddd79c969051459453f082fe82e9f6"
   integrity sha512-3Q6tudGN05kbkDQDI4CqjaBf4qf85w6W6GnuZDtUVYwKgtC1q8yxYX7CZed7N+tLzQqS6roujWvszf13T+n9aw==
 
-iterate-value@^1.0.0:
+iterate-value@^1.0.0, iterate-value@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/iterate-value/-/iterate-value-1.0.2.tgz#935115bd37d006a52046535ebc8d07e9c9337f57"
   integrity sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==
@@ -8859,6 +9651,13 @@ js-yaml@^3.13.1, js-yaml@^3.4.3, js-yaml@^3.9.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
 js-yaml@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
@@ -8883,6 +9682,11 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-loader@^0.5.4:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
@@ -8946,12 +9750,6 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -9086,6 +9884,13 @@ keyboard-key@^1.1.0:
   resolved "https://registry.yarnpkg.com/keyboard-key/-/keyboard-key-1.1.0.tgz#6f2e8e37fa11475bb1f1d65d5174f1b35653f5b7"
   integrity sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ==
 
+keyv@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.2.tgz#0e310ce73bf7851ec702f2eaf46ec4e3805cce56"
+  integrity sha512-5MHbFaKn8cNSmVW7BYnijeAVlE4cYA/SVkifVgrh7yotnfhKmjuXpDKjrABLnT0SfHWV21P8ow07OGfRrNDg8g==
+  dependencies:
+    json-buffer "3.0.1"
+
 killable@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
@@ -9110,12 +9915,6 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
 
-klaw@^1.0.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
-  optionalDependencies:
-    graceful-fs "^4.1.9"
-
 language-subtag-registry@~0.3.2:
   version "0.3.20"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.20.tgz#a00a37121894f224f763268e431c55556b0c0755"
@@ -9141,6 +9940,13 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
+latest-version@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-7.0.0.tgz#843201591ea81a4d404932eeb61240fe04e9e5da"
+  integrity sha512-KvNT4XqAMzdcL6ka6Tl3i2lYeFDgXNCuIX+xNx6ZMVR1dFq+idXd9FLKNMOIx0t9mJ9/HudyX4oZWXZQ0UJHeg==
+  dependencies:
+    package-json "^8.1.0"
+
 lazy-ass@1.6.0, lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -9410,10 +10216,6 @@ lodash._root@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
 
-lodash.assign@^4.0.3, lodash.assign@^4.0.6:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
-
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -9499,7 +10301,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.2, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
+lodash@4.17.21, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.2, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9530,6 +10332,14 @@ log-symbols@^4.0.0:
   dependencies:
     chalk "^4.0.0"
 
+log-symbols@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-5.1.0.tgz#a20e3b9a5f53fac6aeb8e2bb22c07cf2c8f16d93"
+  integrity sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==
+  dependencies:
+    chalk "^5.0.0"
+    is-unicode-supported "^1.1.0"
+
 log-update@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
@@ -9595,6 +10405,11 @@ lowercase-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
 
+lowercase-keys@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-3.0.0.tgz#c5e7d442e37ead247ae9db117a9d0a467c89d4f2"
+  integrity sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==
+
 lru-cache@^4.0.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -9622,6 +10437,11 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
 
+macos-release@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-3.1.0.tgz#6165bb0736ae567ed6649e36ce6a24d87cbb7aca"
+  integrity sha512-/M/R0gCDgM+Cv1IuBG1XGdfTFnMEG6PZeT+KGWHO/OG+imqmaD9CH5vHBTycEM3+Kc4uG2Il+tFAuUWLqQOeUA==
+
 make-dir@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.1.0.tgz#19b4369fe48c116f53c2af95ad102c0e39e85d51"
@@ -9857,10 +10677,10 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.44.0, "mime-db@>= 1.34.0 < 2":
-  version "1.44.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
-  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+mime-db@1.52.0, "mime-db@>= 1.34.0 < 2":
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
 mime-db@~1.33.0:
   version "1.33.0"
@@ -9872,12 +10692,12 @@ mime-types@2.1.18:
   dependencies:
     mime-db "~1.33.0"
 
-mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
-  version "2.1.27"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
-  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
+mime-types@2.1.35, mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
-    mime-db "1.44.0"
+    mime-db "1.52.0"
 
 mime@1.4.1:
   version "1.4.1"
@@ -9901,6 +10721,21 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
+mimic-response@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
+
+mimic-response@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-4.0.0.tgz#35468b19e7c75d10f5165ea25e75a5ceea7cf70f"
+  integrity sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==
+
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -10122,14 +10957,6 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-mz@^2.3.1:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
-  dependencies:
-    any-promise "^1.0.0"
-    object-assign "^4.0.1"
-    thenify-all "^1.0.0"
-
 nan@^2.12.1:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
@@ -10189,6 +11016,18 @@ neo-async@^2.5.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+netmask@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/netmask/-/netmask-2.0.2.tgz#8b01a07644065d536383835823bc52004ebac5e7"
+  integrity sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==
+
+new-github-release-url@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/new-github-release-url/-/new-github-release-url-2.0.0.tgz#335189b91f52bbb9569042a7485900a205a0500b"
+  integrity sha512-NHDDGYudnvRutt/VhKFlX26IotXe1w0cmkDm6JGquh5bz/bDTw0LufSmH/GxTjEdpHEO+bVKFTwdrcGa/9XlKQ==
+  dependencies:
+    type-fest "^2.5.1"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -10216,13 +11055,27 @@ node-dir@^0.1.10:
   dependencies:
     minimatch "^3.0.2"
 
-node-fetch@2.6.5, node-fetch@^2.1.2:
+node-domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
+  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
+
+node-fetch@2.6.5:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd"
   integrity sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==
   dependencies:
     whatwg-url "^5.0.0"
 
+node-fetch@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.0.tgz#37e71db4ecc257057af828d523a7243d651d91e4"
+  integrity sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -10230,6 +11083,13 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+node-fetch@^2.1.2, node-fetch@^2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -10340,6 +11200,11 @@ normalize-url@^1.0.0, normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+normalize-url@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-8.0.0.tgz#593dbd284f743e8dcf6a5ddf8fadff149c82701a"
+  integrity sha512-uVFpKhj5MheNBJRTiMZ9pE/7hD1QTeEvugSJW/OmLzAp78PB5O6adfMNTvmfKhXBkvCzC+rqifWcVYpGFwTjnw==
+
 now-and-later@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/now-and-later/-/now-and-later-2.0.0.tgz#bc61cbb456d79cb32207ce47ca05136ff2e7d6ee"
@@ -10370,13 +11235,20 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run-path@^4.0.0:
+npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
     path-key "^3.0.0"
 
+npm-run-path@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
+  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
+  dependencies:
+    path-key "^4.0.0"
+
 npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -10426,10 +11298,10 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.7.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
-  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+object-inspect@^1.12.2, object-inspect@^1.7.0, object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
 object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2:
   version "1.1.2"
@@ -10439,7 +11311,7 @@ object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
+object-keys@^1.0.11, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
@@ -10450,7 +11322,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@4.1.0, object.assign@^4.0.4, object.assign@^4.1.0:
+object.assign@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   dependencies:
@@ -10459,6 +11331,16 @@ object.assign@4.1.0, object.assign@^4.0.4, object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.assign@^4.0.4, object.assign@^4.1.0, object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
 object.defaults@^1.0.0, object.defaults@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/object.defaults/-/object.defaults-1.1.0.tgz#3a7f868334b407dea06da16d88d5cd29e435fecf"
@@ -10556,13 +11438,29 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
-onetime@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
-  integrity sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==
+onetime@^5.1.0, onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
   dependencies:
     mimic-fn "^2.1.0"
 
+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
+open@8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
+  integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
 opencollective-postinstall@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
@@ -10600,16 +11498,17 @@ optimist@^0.6.1:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
 
-optionator@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+optionator@^0.8.1, optionator@^0.8.2:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
+  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
   dependencies:
     deep-is "~0.1.3"
-    fast-levenshtein "~2.0.4"
+    fast-levenshtein "~2.0.6"
     levn "~0.3.0"
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
-    wordwrap "~1.0.0"
+    word-wrap "~1.2.3"
 
 optionator@^0.9.1:
   version "0.9.1"
@@ -10623,6 +11522,21 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+ora@6.1.2, ora@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-6.1.2.tgz#7b3c1356b42fd90fb1dad043d5dbe649388a0bf5"
+  integrity sha512-EJQ3NiP5Xo94wJXIzAyOtSb0QEIAUu7m8t6UZ9krbz0vAJqr92JpcK/lEXg91q6B9pEGqrykkd2EQplnifDSBw==
+  dependencies:
+    bl "^5.0.0"
+    chalk "^5.0.0"
+    cli-cursor "^4.0.0"
+    cli-spinners "^2.6.1"
+    is-interactive "^2.0.0"
+    is-unicode-supported "^1.1.0"
+    log-symbols "^5.1.0"
+    strip-ansi "^7.0.1"
+    wcwidth "^1.0.1"
+
 ora@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/ora/-/ora-4.0.5.tgz#7410b5cc2d99fa637fd5099bbb9f02bfbb5a361e"
@@ -10671,6 +11585,14 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
+os-name@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/os-name/-/os-name-5.0.1.tgz#acb4f996ec5bd86c41755fef9d6d31905c47172e"
+  integrity sha512-0EQpaHUHq7olp2/YFUr+0vZi9tMpDTblHGz+Ch5RntKxiRXOAY0JOz1UlxhSjMSksHvkm13eD6elJj3M8Ht/kw==
+  dependencies:
+    macos-release "^3.0.1"
+    windows-release "^5.0.1"
+
 os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -10695,6 +11617,11 @@ output-file-sync@^1.1.2:
     mkdirp "^0.5.1"
     object-assign "^4.1.0"
 
+p-cancelable@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-3.0.0.tgz#63826694b54d61ca1c20ebcb6d3ecf5e14cd8050"
+  integrity sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -10761,6 +11688,30 @@ p-try@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
 
+pac-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pac-proxy-agent/-/pac-proxy-agent-5.0.0.tgz#b718f76475a6a5415c2efbe256c1c971c84f635e"
+  integrity sha512-CcFG3ZtnxO8McDigozwE3AqAw15zDvGH+OjXO4kzf7IkEKkQ4gxQ+3sdF50WmhQ4P/bVusXcqNE2S3XrNURwzQ==
+  dependencies:
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+    get-uri "3"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "5"
+    pac-resolver "^5.0.0"
+    raw-body "^2.2.0"
+    socks-proxy-agent "5"
+
+pac-resolver@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/pac-resolver/-/pac-resolver-5.0.1.tgz#c91efa3a9af9f669104fa2f51102839d01cde8e7"
+  integrity sha512-cy7u00ko2KVgBAjuhevqpPeHIkCIqPe1v24cydhWjmeuzaBfmUWFCZJ1iAh5TuVzVZoUzXIW7K8sMYOZ84uZ9Q==
+  dependencies:
+    degenerator "^3.0.2"
+    ip "^1.1.5"
+    netmask "^2.0.2"
+
 package-json@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
@@ -10770,6 +11721,16 @@ package-json@^4.0.0:
     registry-url "^3.0.3"
     semver "^5.1.0"
 
+package-json@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-8.1.0.tgz#2a22806f1ed7c786c8e6ff26cfe20003bf4c6850"
+  integrity sha512-hySwcV8RAWeAfPsXb9/HGSPn8lwDnv6fabH+obUZKX169QknRkRhPxd1yMubpKDskLFATkl3jHpNtVtDPFA0Wg==
+  dependencies:
+    got "^12.1.0"
+    registry-auth-token "^5.0.1"
+    registry-url "^6.0.0"
+    semver "^7.3.7"
+
 pako@~1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
@@ -10854,6 +11815,20 @@ parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
 
+parse-path@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-7.0.0.tgz#605a2d58d0a749c8594405d8cc3a2bf76d16099b"
+  integrity sha512-Euf9GG8WT9CdqwuWJGdf3RkUcTBArppHABkO7Lm8IzRQp0e2r/kkFnmhu4TSK30Wcu5rVAZLmfPKSBBi9tWFog==
+  dependencies:
+    protocols "^2.0.0"
+
+parse-url@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-8.1.0.tgz#972e0827ed4b57fc85f0ea6b0d839f0d8a57a57d"
+  integrity sha512-xDvOoLU5XRrcOZvnI6b8zA6n9O9ejNk/GExuz1yBuWUGn9KA97GI6HTs6u02wKara1CeVmZhH+0TZFdWScR89w==
+  dependencies:
+    parse-path "^7.0.0"
+
 parse5@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
@@ -10946,6 +11921,11 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
 path-parse@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
@@ -11511,6 +12491,18 @@ promise.allsettled@1.0.2:
     function-bind "^1.1.1"
     iterate-value "^1.0.0"
 
+promise.allsettled@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.6.tgz#8dc8ba8edf429feb60f8e81335b920e109c94b6e"
+  integrity sha512-22wJUOD3zswWFqgwjNHa1965LvqTX87WPu/lreY2KSd7SVcERfuZ4GfUaOnJNnvtoIv2yXT/W00YIGMetXtFXg==
+  dependencies:
+    array.prototype.map "^1.0.5"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    iterate-value "^1.0.2"
+
 promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
@@ -11546,6 +12538,11 @@ proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
 
+protocols@^2.0.0, protocols@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
+  integrity sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==
+
 proxy-addr@~2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -11554,7 +12551,21 @@ proxy-addr@~2.0.5:
     forwarded "~0.1.2"
     ipaddr.js "1.9.1"
 
-proxy-from-env@1.1.0:
+proxy-agent@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/proxy-agent/-/proxy-agent-5.0.0.tgz#d31405c10d6e8431fde96cba7a0c027ce01d633b"
+  integrity sha512-gkH7BkvLVkSfX9Dk27W6TyNOWWZWRilRfk1XxGNWOYJ2TuedAv1yFpCaU9QSBmBe716XOTNpYNOzhysyw8xn7g==
+  dependencies:
+    agent-base "^6.0.0"
+    debug "4"
+    http-proxy-agent "^4.0.0"
+    https-proxy-agent "^5.0.0"
+    lru-cache "^5.1.1"
+    pac-proxy-agent "^5.0.0"
+    proxy-from-env "^1.0.0"
+    socks-proxy-agent "^5.0.0"
+
+proxy-from-env@1.1.0, proxy-from-env@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
@@ -11626,6 +12637,13 @@ punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
+pupa@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-3.1.0.tgz#f15610274376bbcc70c9a3aa8b505ea23f41c579"
+  integrity sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==
+  dependencies:
+    escape-goat "^4.0.0"
+
 puppeteer@^13.0.1:
   version "13.0.1"
   resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-13.0.1.tgz#9cd9bb8ec090bade183ca186bf342396bdffa135"
@@ -11693,6 +12711,11 @@ queue@6.0.2:
   dependencies:
     inherits "~2.0.3"
 
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
 raf@^3.4.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -11771,6 +12794,16 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-body@^2.2.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 raw-loader@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
@@ -11783,7 +12816,7 @@ raw-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.5"
 
-rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
+rc@1.2.8, rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -12163,6 +13196,15 @@ readable-stream@1.0:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@1.1.x, readable-stream@~1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 "readable-stream@2 || 3", readable-stream@^3.1.1, readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -12172,15 +13214,6 @@ readable-stream@1.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@~1.1.9:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readdirp@^2.0.0, readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -12304,13 +13337,14 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0, regexp.prototype.flags@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
+    functions-have-names "^1.2.2"
 
 regexpp@^1.0.1:
   version "1.1.0"
@@ -12356,12 +13390,26 @@ registry-auth-token@3.3.2, registry-auth-token@^3.0.1:
     rc "^1.1.6"
     safe-buffer "^5.0.1"
 
+registry-auth-token@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-5.0.1.tgz#5e6cd106e6c251135a046650c58476fc03e92833"
+  integrity sha512-UfxVOj8seK1yaIOiieV4FIP01vfBDLsY0H9sQzi9EbbUdJiuuBjJgLa1DpImXMNPnVkBD4eVxTEXcrZA6kfpJA==
+  dependencies:
+    "@pnpm/npm-conf" "^1.0.4"
+
 registry-url@3.1.0, registry-url@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
   dependencies:
     rc "^1.0.1"
 
+registry-url@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-6.0.1.tgz#056d9343680f2f64400032b1e199faa692286c58"
+  integrity sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==
+  dependencies:
+    rc "1.2.8"
+
 regjsgen@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
@@ -12388,6 +13436,39 @@ relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
 
+release-it@^15.5.1:
+  version "15.5.1"
+  resolved "https://registry.yarnpkg.com/release-it/-/release-it-15.5.1.tgz#bce504bef6fefd42bf54c84320ed1145f72a2681"
+  integrity sha512-1X1oyqay/amJh/V+xkSU9zN6LqGmLQJ0Q40+FaHE6+Pu6QCmgX9HbrpHxvF0HZeXkB5cdhHjmYsPbHnUQLRnYg==
+  dependencies:
+    "@iarna/toml" "2.2.5"
+    "@octokit/rest" "19.0.5"
+    async-retry "1.3.3"
+    chalk "5.1.2"
+    cosmiconfig "8.0.0"
+    execa "6.1.0"
+    form-data "4.0.0"
+    git-url-parse "13.1.0"
+    globby "13.1.2"
+    got "12.5.3"
+    inquirer "9.1.4"
+    is-ci "3.0.1"
+    lodash "4.17.21"
+    mime-types "2.1.35"
+    new-github-release-url "2.0.0"
+    node-fetch "3.3.0"
+    open "8.4.0"
+    ora "6.1.2"
+    os-name "5.0.1"
+    promise.allsettled "1.0.6"
+    proxy-agent "5.0.0"
+    semver "7.3.8"
+    shelljs "0.8.5"
+    update-notifier "6.0.2"
+    url-join "5.0.0"
+    wildcard-match "5.1.2"
+    yargs-parser "21.1.1"
+
 remark-frontmatter@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/remark-frontmatter/-/remark-frontmatter-1.3.1.tgz#bc28c0c913fa0b9dd26f17304bc47b856b2ea2de"
@@ -12546,6 +13627,11 @@ requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resolve-alpn@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
+  integrity sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -12598,6 +13684,13 @@ resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.
   dependencies:
     path-parse "^1.0.6"
 
+responselike@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-3.0.0.tgz#20decb6c298aff0dbee1c355ca95461d42823626"
+  integrity sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==
+  dependencies:
+    lowercase-keys "^3.0.0"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -12621,10 +13714,23 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+restore-cursor@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-4.0.0.tgz#519560a4318975096def6e609d44100edaa4ccb9"
+  integrity sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
 ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
 
+retry@0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
+  integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -12669,11 +13775,10 @@ rst-selector-parser@^2.2.3:
     lodash.flattendeep "^4.4.0"
     nearley "^2.7.10"
 
-run-async@^2.2.0, run-async@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  dependencies:
-    is-promise "^2.1.0"
+run-async@^2.2.0, run-async@^2.3.0, run-async@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
 run-parallel@^1.1.9:
   version "1.1.9"
@@ -12704,6 +13809,13 @@ rxjs@^6.3.3, rxjs@^6.5.5, rxjs@^6.6.0:
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^7.5.7:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.6.0.tgz#361da5362b6ddaa691a2de0b4f2d32028f1eb5a2"
+  integrity sha512-DDa7d8TFNUalGC9VqXvQ1euWNN7sc63TrUCuM9J998+ViviahMIjKSOU7rfcgFOF+FCD71BhDRv4hrFz+ImDLQ==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-buffer@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -12712,6 +13824,15 @@ safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
 
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -12814,6 +13935,13 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
+semver-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-4.0.0.tgz#3afcf5ed6d62259f5c72d0d5d50dffbdc9680df5"
+  integrity sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==
+  dependencies:
+    semver "^7.3.5"
+
 semver-greatest-satisfied-range@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-1.1.0.tgz#13e8c2658ab9691cb0cd71093240280d36f77a5b"
@@ -12835,11 +13963,18 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@7.3.2, semver@^7.2.1, semver@^7.3.2:
+semver@7.3.2:
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
   integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
 
+semver@7.3.8, semver@^7.2.1, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7:
+  version "7.3.8"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
+
 semver@^6.0.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -13011,6 +14146,11 @@ setprototypeof@1.1.1:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
 sha.js@^2.4.0, sha.js@^2.4.8:
   version "2.4.9"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
@@ -13060,9 +14200,10 @@ shell-quote@1.6.1:
     array-reduce "~0.0.0"
     jsonify "~0.0.0"
 
-shelljs@^0.7.0:
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
+shelljs@0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
+  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
@@ -13076,17 +14217,19 @@ shorthash@^0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/shorthash/-/shorthash-0.0.2.tgz#59b268eecbde59038b30da202bcfbddeb2c4a4eb"
 
-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
+side-channel@^1.0.2, side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
   dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
 simulant@^0.2.2:
   version "0.2.2"
@@ -13137,6 +14280,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
 slice-ansi@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
@@ -13175,6 +14323,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+smart-buffer@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
+  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
+
 snake-case@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"
@@ -13280,6 +14433,23 @@ sockjs@0.3.19:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
+socks-proxy-agent@5, socks-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-5.0.1.tgz#032fb583048a29ebffec2e6a73fca0761f48177e"
+  integrity sha512-vZdmnjb9a2Tz6WEQVIurybSwElwPxMZaIc7PzqbJTrezcKNznv6giT7J7tZDZ1BojVaa1jvO/UiUdhDVB0ACoQ==
+  dependencies:
+    agent-base "^6.0.2"
+    debug "4"
+    socks "^2.3.3"
+
+socks@^2.3.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.1.tgz#d8e651247178fde79c0663043e07240196857d55"
+  integrity sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==
+  dependencies:
+    ip "^2.0.0"
+    smart-buffer "^4.2.0"
+
 sort-keys@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
@@ -13467,6 +14637,11 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
 "statuses@>= 1.3.1 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
@@ -13567,6 +14742,15 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
 string.prototype.matchall@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
@@ -13588,21 +14772,23 @@ string.prototype.trim@^1.2.1:
     es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
 
-string.prototype.trimend@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
-  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
+string.prototype.trimend@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
+  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
 
-string.prototype.trimstart@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
-  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
+string.prototype.trimstart@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
+  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
 
 string_decoder@^1.0.0, string_decoder@^1.1.1:
   version "1.2.0"
@@ -13656,6 +14842,13 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-ansi@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
+  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -13686,6 +14879,11 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
@@ -13815,17 +15013,6 @@ symbol-observable@^1.1.0:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-ta-scripts@^2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/ta-scripts/-/ta-scripts-2.5.2.tgz#d06ab4d019299952d0b82cb577d13d1a8b24e4e9"
-  dependencies:
-    axios "^0.15.2"
-    bluebird "^3.3.3"
-    del "^2.2.0"
-    fs-promise "^0.5.0"
-    shelljs "^0.7.0"
-    yargs "^4.7.1"
-
 table@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
@@ -13994,18 +15181,6 @@ text-table@0.2.0, text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
-thenify-all@^1.0.0, thenify-all@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
-  dependencies:
-    thenify ">= 3.1.0 < 4"
-
-"thenify@>= 3.1.0 < 4":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.0.tgz#e69e38a1babe969b0108207978b9f62b88604839"
-  dependencies:
-    any-promise "^1.0.0"
-
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
@@ -14169,6 +15344,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
 toposort@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
@@ -14244,6 +15424,11 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.0.1, tslib@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
+  integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@@ -14299,6 +15484,21 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+type-fest@^1.0.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
+  integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
+
+type-fest@^2.13.0, type-fest@^2.5.1:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
+type-fest@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.3.0.tgz#3378c9664eecfd1eb4f0522b13cb0630bc1ec044"
+  integrity sha512-gezeeOIZyQLGW5uuCeEnXF1aXmtt2afKspXz3YqoOcZ3l/YMJq1pujvgT+cz/Nw1O/7q/kSav5fihJHsC/AOUg==
+
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -14307,6 +15507,13 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -14349,6 +15556,16 @@ uglifyjs-webpack-plugin@^0.4.6:
     uglify-js "^2.8.29"
     webpack-sources "^1.0.1"
 
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
 unbzip2-stream@1.4.3, unbzip2-stream@^1.0.9:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
@@ -14489,6 +15706,13 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+unique-string@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-3.0.0.tgz#84a1c377aff5fd7a8bc6b55d8244b2bd90d75b9a"
+  integrity sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==
+  dependencies:
+    crypto-random-string "^4.0.0"
+
 unist-builder@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-1.0.3.tgz#ab0f9d0f10936b74f3e913521955b0478e0ff036"
@@ -14535,6 +15759,11 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
+universal-user-agent@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
+  integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
+
 universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
@@ -14576,6 +15805,26 @@ update-check@1.5.1:
     registry-auth-token "3.3.2"
     registry-url "3.1.0"
 
+update-notifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-6.0.2.tgz#a6990253dfe6d5a02bd04fbb6a61543f55026b60"
+  integrity sha512-EDxhTEVPZZRLWYcJ4ZXjGFN0oP7qYvbXWzEgRm/Yql4dHX5wDbvh89YHP6PK1lzZJYrMtXUuZZz8XGK+U6U1og==
+  dependencies:
+    boxen "^7.0.0"
+    chalk "^5.0.1"
+    configstore "^6.0.0"
+    has-yarn "^3.0.0"
+    import-lazy "^4.0.0"
+    is-ci "^3.0.1"
+    is-installed-globally "^0.4.0"
+    is-npm "^6.0.0"
+    is-yarn-global "^0.4.0"
+    latest-version "^7.0.0"
+    pupa "^3.1.0"
+    semver "^7.3.7"
+    semver-diff "^4.0.0"
+    xdg-basedir "^5.1.0"
+
 update-notifier@^2.1.0, update-notifier@^2.4.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
@@ -14615,6 +15864,11 @@ urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
 
+url-join@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-5.0.0.tgz#c2f1e5cbd95fa91082a93b58a1f42fecb4bdbcf1"
+  integrity sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==
+
 url-loader@^0.6.1:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
@@ -14828,6 +16082,14 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vm2@^3.9.8:
+  version "3.9.13"
+  resolved "https://registry.yarnpkg.com/vm2/-/vm2-3.9.13.tgz#774a1a3d73b9b90b1aa45bcc5f25e349f2eef649"
+  integrity sha512-0rvxpB8P8Shm4wX2EKOiMp7H2zq+HUE/UwodY0pCZXs9IffIKZq6vUti5OgkVCTakKo9e/fgO4X1fkwfjWxE3Q==
+  dependencies:
+    acorn "^8.7.0"
+    acorn-walk "^8.2.0"
+
 void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
@@ -14886,6 +16148,11 @@ web-namespaces@^1.0.0, web-namespaces@^1.1.2:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4"
   integrity sha512-II+n2ms4mPxK+RnIxRPOw3zwF2jRscdJIUE9BfkKHm4FYEg9+biIoTMnaZF5MpemE3T+VhMLrhbyD4ilkPCSbg==
 
+web-streams-polyfill@^3.0.3:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
+  integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -15104,6 +16371,17 @@ whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
 
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
 which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
@@ -15145,15 +16423,30 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
+widest-line@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-4.0.1.tgz#a0fc673aaba1ea6f0a0d35b3c2795c9a9cc2ebf2"
+  integrity sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==
+  dependencies:
+    string-width "^5.0.1"
+
+wildcard-match@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/wildcard-match/-/wildcard-match-5.1.2.tgz#66b438001391674d8599b45da051e0bd9f33cd2a"
+  integrity sha512-qNXwI591Z88c8bWxp+yjV60Ch4F8Riawe3iGxbzquhy8Xs9m+0+SLFBGb/0yCTIDElawtaImC37fYZ+dr32KqQ==
+
 window-size@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
 
-window-size@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
+windows-release@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-5.0.1.tgz#d1f7cd1f25660ba05cac6359711844dce909a8ed"
+  integrity sha512-y1xFdFvdMiDXI3xiOhMbJwt1Y7dUxidha0CWPs1NgjZIjZANTcX7+7bMqNjuezhzb8s5JGEiBAbQjQQYYy7ulw==
+  dependencies:
+    execa "^5.1.1"
 
-word-wrap@^1.2.3:
+word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
@@ -15166,10 +16459,6 @@ wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
 
-wordwrap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-
 worker-farm@^1.5.2, worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
@@ -15215,6 +16504,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.0.1.tgz#2101e861777fec527d0ea90c57c6b03aac56a5b3"
+  integrity sha512-QFF+ufAqhoYHvoHdajT/Po7KoXVBPXS2bgjIam5isfWJPfIOnQZ50JtUiVvCv/sjgacf3yRrt2ZKUZ/V4itN4g==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -15228,6 +16526,16 @@ write-file-atomic@^2.0.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+write-file-atomic@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
@@ -15285,6 +16593,11 @@ xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
 
+xdg-basedir@^5.0.1, xdg-basedir@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-5.1.0.tgz#1efba19425e73be1bc6f2a6ceb52a3d2c884c0c9"
+  integrity sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==
+
 xml-char-classes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
@@ -15293,6 +16606,11 @@ xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
 
+xregexp@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-2.0.0.tgz#52a63e56ca0b84a7f3a5f3d61872f126ad7a5943"
+  integrity sha512-xl/50/Cf32VsGq/1R8jJE5ajH1yMCQkpmoS10QbFZWl2Oor4H0Me64Pu2yxvsRWK3m6soJbmGfzSR7BYmDcWAA==
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
@@ -15332,6 +16650,11 @@ yargs-parser@13.1.2, yargs-parser@^13.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
@@ -15340,13 +16663,6 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
-  dependencies:
-    camelcase "^3.0.0"
-    lodash.assign "^4.0.6"
-
 yargs-parser@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
@@ -15425,25 +16741,6 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yargs@^4.7.1:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
-  dependencies:
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    lodash.assign "^4.0.3"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^1.0.1"
-    which-module "^1.0.0"
-    window-size "^0.2.0"
-    y18n "^3.2.1"
-    yargs-parser "^2.4.1"
-
 yargs@^7.0.2, yargs@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"

From 95ec8191b2e712d3f6dcbdd34f728cbd9819c194 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Tue, 28 Feb 2023 18:04:46 +0100
Subject: [PATCH 02/30] feat: use React.forwardRef in all components (#4233)

* chore: remove .state() assertions in tests (#4232)

* Ember: remove .state() usage in Enzyme

* AccordionAccordion: remove .state() usage in Enzyme

* Checkbox: remove .state() usage in Enzyme

* TransitionablePortal: remove .state() usage in Enzyme

* Transition: remove .state() usage in Enzyme

* Dropdown: remove .state() usage in Enzyme

* chore(Image): use React.forwardRef() (#4234)

* chore(Placeholder): use React.forwardRef() (#4236)

* chore(Header): use React.forwardRef() (#4237)

* chore(Segment): use React.forwardRef() (#4238)

* chore(Table): use React.forwardRef() (#4239)

* chore(Table): use React.forwardRef()

* fix naming

* chore(Step): use React.forwardRef() (#4240)

* chore: disable ESLint rule for function names (#4241)

* chore(Comment): use React.forwardRef() (#4242)

* chore(Comment): use React.forwardRef()

* fix displayName

* fix tests

* chore(Card): use React.forwardRef() (#4243)

* chore(Feed): use React.forwardRef() (#4244)

* chore(Statistic): use React.forwardRef() (#4245)

* chore(Item): use React.forwardRef() (#4247)

* chore(Container|Divider|Loader|Rail): use React.forwardRef() (#4248)

* chore(Accordion): use React.forwardRef() (#4249)

* chore(Advertisement|Breadcrumb): use React.forwardRef() (#4250)

* chore(Message): use React.forwardRef() (#4251)

* chore(Label|List): use React.forwardRef() (#4252)

* chore(Menu): use React.forwardRef() (#4254)

* chore(Pagination): use React.forwardRef() (#4255)

* chore(Button): use React.forwardRef() (#4256)

* chore(Modal|Portal|Popup): use React.forwardRef() (#4253)

* chore(Modal|Portal): use React.forwardRef()

* remove redundant statics

* migrate Popup

* chore(Rating|Reveal): use React.forwardRef() (#4258)

* chore(Dimmer|Grid|Sidebar): use React.forwardRef() (#4260)

* chore(Modal*|Popup*): use React.forwardRef() (#4261)

* chore(Confirm|Checkbox|Embed|Radio|TextArea): use React.forwardRef() (#4262)

* chore(Flag|Icon|ImageGroup): use React.forwardRef() (#4264)

* chore(Tab): use React.forwardRef() (#4265)

* chore(TransitionGroup): use React.forwardRef() (#4266)

* chore(Input): use React.forwardRef() (#4267)

* chore(Sticky): use React.forwardRef() (#4263)

* chore(TransitionablePortal): convert to be functional component (#4269)

* chore(Search*): use React.forwardRef() (#4270)

* chore(Dropdown*): use React.forwardRef() (#4273)

* chore(Dropdown*): use React.forwardRef()

* fix examples-test

* chore(Visibility): remove component (#4257)

* chore(Visibility): remove component

* remove behaviors section

* chore(Ref): remove component (#4286)

* chore(Ref): remove component

* fix tests

* chore(Search): use React.forwardRef() (#4330)

* chore(Search): use React.forwardRef()

* add test for ref forwarding

* fix tests, add comments

* chore: refactor Modal tests (#4339)

* chore: remove unused test utils (#4340)

* chore: refactor tests for classnames to use mount() (#4341)

* chore: refactor tests for shorthands to use mount() (#4342)

* chore: refactor tests for shorthands to use mount()

* add comment

* fix tests with unmount

* fix(Dropdown): use ref forwarding (#4338)

* Add forward ref to Form (#4364)

* Convert form to function component

* Add ref forwarding to Form component

* Update test/specs/collections/Form/Form-test.js

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Add ref to components (#4373)

* Add ref to FormButton

* Add ref to FormCheckbox

* Add forwardRef to FormGroup

* Remove accidental `only` calls

* chore(FormField): use React.forwardRef() (#4359)

* Add ref to form field component

* Move ref to controlProps

* Add more forwardsRef tests

* Remove unnecessary describe wrapper

* update tests

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

* chore(FormTextArea): use React.forwardRef() (#4405)

* chore(FormRadio): use React.forwardRef() (#4406)

* chore(FormInput): use React.forwardRef() (#4407)

* chore(Select,FormSelect,FormDropdown): use React.forwardRef() (#4408)

* chore(Select): use React.forwardRef()

* chore(FormSelect): use React.forwardRef()

* chore(FormDropdown): use React.forwardRef()

* fix tests, fix Dropdown component

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

---------

Co-authored-by: Brandon Olivier <brandon@brandonolivier.com>
Co-authored-by: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
---
 .eslintrc                                     |   1 +
 docs/src/components/Sidebar/Sidebar.js        |  21 +-
 .../addons/Ref/Types/RefExampleRef.js         |  67 --
 .../addons/Ref/Types/RefForwardingExample.js  |  54 --
 docs/src/examples/addons/Ref/Types/index.js   |  30 -
 docs/src/examples/addons/Ref/index.js         |  38 -
 .../VisibilityExampleCallbackFrequency.js     | 134 ----
 .../Settings/VisibilityExampleFireOnMount.js  | 126 ----
 .../VisibilityExampleGroupedCallbacks.js      | 130 ----
 .../Settings/VisibilityExampleOffset.js       | 102 ---
 .../Settings/VisibilityExampleUpdateOn.js     | 114 ---
 .../behaviors/Visibility/Settings/index.js    |  52 --
 .../Types/VisibilityExampleVisibility.js      | 151 ----
 .../behaviors/Visibility/Types/index.js       |  16 -
 .../examples/behaviors/Visibility/index.js    |  30 -
 .../Sidebar/Usage/SidebarExampleTarget.js     |  11 +-
 .../Types/StickyExampleAdjacentContext.js     |  50 +-
 .../Sticky/Types/StickyExamplePushing.js      |  52 +-
 .../Sticky/Usage/StickyExampleOffset.js       |  60 +-
 .../Sticky/Variations/StickyExampleActive.js  |  49 +-
 .../Variations/StickyExampleOversized.js      |  61 +-
 docs/src/layouts/HomepageLayout.js            |  13 +-
 docs/src/layouts/StickyLayout.js              |  30 +-
 docs/src/utils/constants.js                   |   2 +-
 docs/src/utils/docTypes/componentInfoShape.js |   1 -
 docs/static/utils/getComponentMenu.js         |  14 +-
 gulp/plugins/util/getComponentInfo.js         |  20 +-
 gulp/tasks/docs.js                            |   1 -
 index.d.ts                                    |  14 -
 package.json                                  |   1 -
 src/addons/Confirm/Confirm.js                 |  73 +-
 src/addons/Pagination/Pagination.js           | 106 +--
 src/addons/Pagination/PaginationItem.js       |  57 +-
 src/addons/Portal/Portal.js                   | 354 ++++-----
 src/addons/Portal/PortalInner.d.ts            |   3 -
 src/addons/Portal/PortalInner.js              |  47 +-
 src/addons/Portal/usePortalElement.js         |  30 +
 src/addons/Portal/utils/useTrigger.js         |  25 +
 src/addons/Portal/utils/validateTrigger.js    |   8 +-
 src/addons/Radio/Radio.js                     |   8 +-
 src/addons/Select/Select.js                   |   7 +-
 src/addons/TextArea/TextArea.js               |  59 +-
 .../TransitionablePortal.js                   | 138 ++--
 src/behaviors/Visibility/Visibility.d.ts      | 176 -----
 src/behaviors/Visibility/Visibility.js        | 428 -----------
 src/behaviors/Visibility/index.d.ts           |   8 -
 src/behaviors/Visibility/index.js             |   1 -
 src/collections/Breadcrumb/Breadcrumb.js      |   9 +-
 .../Breadcrumb/BreadcrumbDivider.js           |  10 +-
 .../Breadcrumb/BreadcrumbSection.js           |  38 +-
 src/collections/Form/Form.js                  |  91 ++-
 src/collections/Form/FormButton.js            |   8 +-
 src/collections/Form/FormCheckbox.js          |   8 +-
 src/collections/Form/FormDropdown.js          |   7 +-
 src/collections/Form/FormField.js             |  13 +-
 src/collections/Form/FormGroup.js             |   8 +-
 src/collections/Form/FormInput.js             |   7 +-
 src/collections/Form/FormRadio.js             |   7 +-
 src/collections/Form/FormSelect.js            |   7 +-
 src/collections/Form/FormTextArea.js          |   7 +-
 src/collections/Grid/Grid.js                  |   7 +-
 src/collections/Grid/GridColumn.js            |   7 +-
 src/collections/Grid/GridRow.js               |   7 +-
 src/collections/Menu/Menu.js                  | 163 ++---
 src/collections/Menu/MenuHeader.js            |   7 +-
 src/collections/Menu/MenuItem.js              | 106 +--
 src/collections/Menu/MenuMenu.js              |   7 +-
 src/collections/Message/Message.js            | 149 ++--
 src/collections/Message/MessageContent.js     |   7 +-
 src/collections/Message/MessageHeader.js      |   8 +-
 src/collections/Message/MessageItem.js        |   8 +-
 src/collections/Message/MessageList.js        |   8 +-
 src/collections/Table/Table.js                |   9 +-
 src/collections/Table/TableBody.js            |   7 +-
 src/collections/Table/TableCell.js            |   9 +-
 src/collections/Table/TableFooter.js          |   7 +-
 src/collections/Table/TableHeader.js          |   7 +-
 src/collections/Table/TableHeaderCell.js      |   7 +-
 src/collections/Table/TableRow.js             |   9 +-
 src/elements/Button/Button.js                 | 281 ++++----
 src/elements/Button/ButtonContent.js          |   8 +-
 src/elements/Button/ButtonGroup.js            |   9 +-
 src/elements/Button/ButtonOr.js               |   7 +-
 src/elements/Container/Container.js           |   7 +-
 src/elements/Divider/Divider.js               |   7 +-
 src/elements/Flag/Flag.js                     |  30 +-
 src/elements/Header/Header.js                 |  11 +-
 src/elements/Header/HeaderContent.js          |   7 +-
 src/elements/Header/HeaderSubheader.js        |   7 +-
 src/elements/Icon/Icon.js                     | 146 ++--
 src/elements/Icon/IconGroup.js                |   8 +-
 src/elements/Image/Image.js                   |  17 +-
 src/elements/Image/ImageGroup.js              |   8 +-
 src/elements/Input/Input.js                   | 226 +++---
 src/elements/Label/Label.js                   | 174 +++--
 src/elements/Label/LabelDetail.js             |   8 +-
 src/elements/Label/LabelGroup.js              |   7 +-
 src/elements/List/List.js                     | 137 ++--
 src/elements/List/ListContent.js              |   9 +-
 src/elements/List/ListDescription.js          |   7 +-
 src/elements/List/ListHeader.js               |   8 +-
 src/elements/List/ListIcon.js                 |   7 +-
 src/elements/List/ListItem.js                 | 187 ++---
 src/elements/List/ListList.js                 |   7 +-
 src/elements/Loader/Loader.js                 |   7 +-
 src/elements/Placeholder/Placeholder.js       |   7 +-
 src/elements/Placeholder/PlaceholderHeader.js |   7 +-
 src/elements/Placeholder/PlaceholderImage.js  |   7 +-
 src/elements/Placeholder/PlaceholderLine.js   |   7 +-
 .../Placeholder/PlaceholderParagraph.js       |   7 +-
 src/elements/Rail/Rail.js                     |   7 +-
 src/elements/Reveal/Reveal.js                 |   7 +-
 src/elements/Reveal/RevealContent.js          |   7 +-
 src/elements/Segment/Segment.js               |   7 +-
 src/elements/Segment/SegmentGroup.js          |   7 +-
 src/elements/Segment/SegmentInline.js         |   7 +-
 src/elements/Step/Step.js                     | 114 +--
 src/elements/Step/StepContent.js              |  12 +-
 src/elements/Step/StepDescription.js          |   7 +-
 src/elements/Step/StepGroup.js                |  11 +-
 src/elements/Step/StepTitle.js                |   7 +-
 src/index.js                                  |   7 +-
 src/lib/doesNodeContainClick.js               |  28 +-
 src/lib/factories.js                          |   9 +-
 src/lib/getUnhandledProps.js                  |   4 +-
 src/lib/hooks/useAutoControlledValue.js       |  45 ++
 src/lib/hooks/useClassNamesOnNode.js          |   2 +-
 src/lib/hooks/useEventCallback.js             |  35 +
 src/lib/hooks/useForceUpdate.js               |   8 +
 src/lib/hooks/useMergedRefs.js                |  40 ++
 src/lib/hooks/usePrevious.js                  |  18 +
 src/lib/index.js                              |   8 +-
 src/lib/isRefObject.js                        |   6 +
 src/lib/normalizeOffset.js                    |   7 -
 src/modules/Accordion/Accordion.js            |   8 +-
 src/modules/Accordion/AccordionAccordion.js   | 144 ++--
 src/modules/Accordion/AccordionContent.js     |   8 +-
 src/modules/Accordion/AccordionTitle.js       |  46 +-
 src/modules/Checkbox/Checkbox.js              | 286 ++++----
 src/modules/Dimmer/Dimmer.js                  |  71 +-
 src/modules/Dimmer/DimmerDimmable.js          |   7 +-
 src/modules/Dimmer/DimmerInner.js             | 138 ++--
 src/modules/Dropdown/Dropdown.js              | 102 +--
 src/modules/Dropdown/DropdownDivider.js       |   8 +-
 src/modules/Dropdown/DropdownHeader.js        |   9 +-
 src/modules/Dropdown/DropdownItem.js          | 139 ++--
 src/modules/Dropdown/DropdownMenu.js          |   8 +-
 src/modules/Dropdown/DropdownSearchInput.js   |  51 +-
 src/modules/Dropdown/DropdownText.js          |  14 +-
 src/modules/Embed/Embed.js                    | 107 +--
 src/modules/Modal/Modal.js                    | 386 +++++-----
 src/modules/Modal/ModalActions.js             |  66 +-
 src/modules/Modal/ModalContent.js             |   7 +-
 src/modules/Modal/ModalDescription.js         |   7 +-
 src/modules/Modal/ModalDimmer.js              |  22 +-
 src/modules/Modal/ModalHeader.js              |   7 +-
 src/modules/Popup/Popup.js                    | 421 ++++++-----
 src/modules/Popup/PopupContent.js             |   9 +-
 src/modules/Popup/PopupHeader.js              |  10 +-
 src/modules/Popup/lib/createReferenceProxy.js |   2 +-
 src/modules/Progress/Progress.js              | 199 +++--
 src/modules/Rating/Rating.js                  | 137 ++--
 src/modules/Rating/RatingIcon.js              |  69 +-
 src/modules/Search/Search.js                  |  23 +-
 src/modules/Search/SearchCategory.js          |   8 +-
 src/modules/Search/SearchCategoryLayout.d.ts  |   3 -
 src/modules/Search/SearchCategoryLayout.js    |   1 +
 src/modules/Search/SearchResult.js            |  48 +-
 src/modules/Search/SearchResults.js           |   7 +-
 src/modules/Sidebar/Sidebar.js                | 178 +++--
 src/modules/Sidebar/SidebarPushable.js        |   7 +-
 src/modules/Sidebar/SidebarPusher.js          |   7 +-
 src/modules/Sticky/Sticky.js                  | 383 +++++-----
 src/modules/Tab/Tab.js                        |  77 +-
 src/modules/Tab/TabPane.js                    |   8 +-
 src/modules/Transition/Transition.js          |  26 +-
 src/modules/Transition/TransitionGroup.js     | 137 ++--
 src/views/Advertisement/Advertisement.js      |   7 +-
 src/views/Card/Card.js                        | 137 ++--
 src/views/Card/CardContent.js                 |  11 +-
 src/views/Card/CardDescription.js             |   7 +-
 src/views/Card/CardGroup.js                   |  11 +-
 src/views/Card/CardHeader.js                  |   7 +-
 src/views/Card/CardMeta.js                    |   7 +-
 src/views/Comment/Comment.js                  |   7 +-
 src/views/Comment/CommentAction.js            |   7 +-
 src/views/Comment/CommentActions.js           |   7 +-
 src/views/Comment/CommentAuthor.js            |   7 +-
 src/views/Comment/CommentAvatar.js            |   7 +-
 src/views/Comment/CommentContent.js           |   7 +-
 src/views/Comment/CommentGroup.js             |   7 +-
 src/views/Comment/CommentMetadata.js          |   7 +-
 src/views/Comment/CommentText.js              |   7 +-
 src/views/Feed/Feed.js                        |  10 +-
 src/views/Feed/FeedContent.js                 |   9 +-
 src/views/Feed/FeedDate.js                    |   7 +-
 src/views/Feed/FeedEvent.js                   |   7 +-
 src/views/Feed/FeedExtra.js                   |   9 +-
 src/views/Feed/FeedLabel.js                   |   9 +-
 src/views/Feed/FeedLike.js                    |   9 +-
 src/views/Feed/FeedMeta.js                    |   9 +-
 src/views/Feed/FeedSummary.js                 |   9 +-
 src/views/Feed/FeedUser.js                    |   7 +-
 src/views/Item/Item.js                        |   9 +-
 src/views/Item/ItemContent.js                 |   9 +-
 src/views/Item/ItemDescription.js             |   7 +-
 src/views/Item/ItemExtra.js                   |   7 +-
 src/views/Item/ItemGroup.js                   |  11 +-
 src/views/Item/ItemHeader.js                  |   7 +-
 src/views/Item/ItemImage.d.ts                 |  14 +-
 src/views/Item/ItemImage.js                   |   7 +-
 src/views/Item/ItemMeta.js                    |   7 +-
 src/views/Statistic/Statistic.js              |  11 +-
 src/views/Statistic/StatisticGroup.js         |  11 +-
 src/views/Statistic/StatisticLabel.js         |   7 +-
 src/views/Statistic/StatisticValue.js         |   7 +-
 static.routes.js                              |  77 +-
 test/specs/addons/Confirm/Confirm-test.js     |   6 +-
 .../addons/Pagination/Pagination-test.js      |  23 +-
 .../addons/Pagination/PaginationItem-test.js  |   1 +
 test/specs/addons/Portal/Portal-test.js       |  72 +-
 test/specs/addons/Portal/PortalInner-test.js  |  64 +-
 test/specs/addons/Radio/Radio-test.js         |   1 +
 test/specs/addons/Select/Select-test.js       |   1 +
 test/specs/addons/TextArea/TextArea-test.js   |  13 +-
 .../TransitionablePortal-test.js              | 120 ++--
 .../behaviors/Visibility/Visibility-test.js   | 630 ----------------
 .../collections/Breadcrumb/Breadcrumb-test.js |   2 +
 .../Breadcrumb/BreadcrumbDivider-test.js      |   3 +
 .../Breadcrumb/BreadcrumbSection-test.js      |   3 +-
 test/specs/collections/Form/Form-test.js      |   4 +
 .../specs/collections/Form/FormButton-test.js |   2 +
 .../collections/Form/FormCheckbox-test.js     |   2 +
 .../collections/Form/FormDropdown-test.js     |   1 +
 test/specs/collections/Form/FormField-test.js |  35 +
 test/specs/collections/Form/FormGroup-test.js |   2 +
 test/specs/collections/Form/FormInput-test.js |  43 ++
 test/specs/collections/Form/FormRadio-test.js |   1 +
 .../specs/collections/Form/FormSelect-test.js |   1 +
 .../collections/Form/FormTextArea-test.js     |   1 +
 test/specs/collections/Grid/Grid-test.js      |   1 +
 .../specs/collections/Grid/GridColumn-test.js |   1 +
 test/specs/collections/Grid/GridRow-test.js   |   1 +
 test/specs/collections/Menu/Menu-test.js      |  32 +-
 .../specs/collections/Menu/MenuHeader-test.js |   1 +
 test/specs/collections/Menu/MenuItem-test.js  |  23 +-
 test/specs/collections/Menu/MenuMenu-test.js  |   1 +
 .../specs/collections/Message/Message-test.js |   2 +
 .../Message/MessageContent-test.js            |   1 +
 .../collections/Message/MessageHeader-test.js |   1 +
 .../collections/Message/MessageItem-test.js   |   1 +
 .../collections/Message/MessageList-test.js   |   1 +
 test/specs/collections/Table/Table-test.js    |   2 +
 .../specs/collections/Table/TableBody-test.js |   1 +
 .../specs/collections/Table/TableCell-test.js |   2 +
 .../collections/Table/TableFooter-test.js     |   1 +
 .../collections/Table/TableHeader-test.js     |   1 +
 .../collections/Table/TableHeaderCell-test.js |   1 +
 test/specs/collections/Table/TableRow-test.js |   2 +
 test/specs/commonTests/classNameHelpers.js    |  25 +-
 test/specs/commonTests/forwardsRef.js         |  36 +
 test/specs/commonTests/hasUIClassName.js      |   9 +-
 test/specs/commonTests/hasValidTypings.js     |   7 +-
 .../commonTests/implementsClassNameProps.js   |  37 +-
 .../commonTests/implementsCommonProps.js      |   1 +
 .../commonTests/implementsCreateMethod.js     |   9 +-
 .../commonTests/implementsShorthandProp.js    |  61 +-
 test/specs/commonTests/index.js               |   2 +
 test/specs/commonTests/isConformant.js        | 221 +++---
 test/specs/docs/examples-test.js              |  13 +-
 test/specs/elements/Button/Button-test.js     |  48 +-
 .../elements/Button/ButtonContent-test.js     |   1 +
 .../specs/elements/Button/ButtonGroup-test.js |   1 +
 test/specs/elements/Button/ButtonOr-test.js   |   1 +
 .../elements/Container/Container-test.js      |   1 +
 test/specs/elements/Divider/Divider-test.js   |   1 +
 test/specs/elements/Flag/Flag-test.js         |   1 +
 test/specs/elements/Header/Header-test.js     |   2 +
 .../elements/Header/HeaderContent-test.js     |   1 +
 .../elements/Header/HeaderSubheader-test.js   |   1 +
 test/specs/elements/Icon/Icon-test.js         |   1 +
 test/specs/elements/Image/Image-test.js       |  22 +-
 test/specs/elements/Image/ImageGroup-test.js  |   1 +
 test/specs/elements/Input/Input-test.js       | 139 ++--
 test/specs/elements/Label/Label-test.js       |  24 +-
 test/specs/elements/Label/LabelDetail-test.js |   1 +
 test/specs/elements/Label/LabelGroup-test.js  |   1 +
 test/specs/elements/List/List-test.js         |  12 +-
 test/specs/elements/List/ListContent-test.js  |   3 +-
 .../elements/List/ListDescription-test.js     |   1 +
 test/specs/elements/List/ListHeader-test.js   |   1 +
 test/specs/elements/List/ListItem-test.js     |  10 +-
 test/specs/elements/List/ListList-test.js     |   1 +
 test/specs/elements/Loader/Loader-test.js     |   1 +
 .../elements/Placeholder/Placeholder-test.js  |   1 +
 .../Placeholder/PlaceholderHeader-test.js     |   1 +
 .../Placeholder/PlaceholderImage-test.js      |   1 +
 .../Placeholder/PlaceholderLine-test.js       |   2 +
 .../Placeholder/PlaceholderParagraph-test.js  |   1 +
 test/specs/elements/Rail/Rail-test.js         |   1 +
 test/specs/elements/Reveal/Reveal-test.js     |   1 +
 .../elements/Reveal/RevealContent-test.js     |   1 +
 test/specs/elements/Segment/Segment-test.js   |   1 +
 .../elements/Segment/SegmentGroup-test.js     |   1 +
 .../elements/Segment/SegmentInline-test.js    |   1 +
 test/specs/elements/Step/Step-test.js         |   7 +-
 test/specs/elements/Step/StepContent-test.js  |   5 +
 .../elements/Step/StepDescription-test.js     |   1 +
 test/specs/elements/Step/StepGroup-test.js    |   4 +
 test/specs/elements/Step/StepTitle-test.js    |   1 +
 .../specs/modules/Accordion/Accordion-test.js |   1 +
 .../Accordion/AccordionAccordion-test.js      | 122 ++--
 .../Accordion/AccordionContent-test.js        |   1 +
 .../modules/Accordion/AccordionTitle-test.js  |   9 +-
 test/specs/modules/Checkbox/Checkbox-test.js  |  30 +-
 test/specs/modules/Dimmer/Dimmer-test.js      |   1 +
 .../modules/Dimmer/DimmerDimmable-test.js     |   1 +
 test/specs/modules/Dimmer/DimmerInner-test.js |  10 +-
 test/specs/modules/Dropdown/Dropdown-test.js  | 680 +++++++++---------
 .../modules/Dropdown/DropdownDivider-test.js  |   1 +
 .../modules/Dropdown/DropdownHeader-test.js   |   1 +
 .../modules/Dropdown/DropdownItem-test.js     |   2 +
 .../modules/Dropdown/DropdownMenu-test.js     |   1 +
 .../Dropdown/DropdownSearchInput-test.js      |   3 +-
 .../modules/Dropdown/DropdownText-test.js     |   1 +
 test/specs/modules/Embed/Embed-test.js        |  37 +-
 test/specs/modules/Modal/Modal-test.js        | 154 +---
 test/specs/modules/Modal/ModalActions-test.js |   2 +
 test/specs/modules/Modal/ModalContent-test.js |   1 +
 .../modules/Modal/ModalDescription-test.js    |   1 +
 test/specs/modules/Modal/ModalDimmer-test.js  |  16 +-
 test/specs/modules/Modal/ModalHeader-test.js  |   1 +
 test/specs/modules/Popup/Popup-test.js        |  31 +-
 test/specs/modules/Popup/PopupContent-test.js |   1 +
 test/specs/modules/Popup/PopupHeader-test.js  |   1 +
 test/specs/modules/Progress/Progress-test.js  |  25 +-
 test/specs/modules/Rating/Rating-test.js      |   1 +
 test/specs/modules/Rating/RatingIcon-test.js  |   1 +
 test/specs/modules/Search/Search-test.js      |  85 ++-
 .../modules/Search/SearchCategory-test.js     |   1 +
 .../Search/SearchCategoryLayout-test.js       |  13 +
 .../specs/modules/Search/SearchResult-test.js |  14 +
 .../modules/Search/SearchResults-test.js      |   1 +
 test/specs/modules/Sidebar/Sidebar-test.js    |  12 +-
 .../modules/Sidebar/SidebarPushable-test.js   |   1 +
 .../modules/Sidebar/SidebarPusher-test.js     |   1 +
 test/specs/modules/Sticky/Sticky-test.js      | 157 ++--
 test/specs/modules/Tab/Tab-test.js            |   2 +
 test/specs/modules/Tab/TabPane-test.js        |   1 +
 .../modules/Transition/Transition-test.js     | 137 ++--
 .../Transition/TransitionGroup-test.js        |  38 +-
 test/specs/views/Card/Card-test.js            |  13 +
 test/specs/views/Card/CardContent-test.js     |   5 +
 test/specs/views/Card/CardDescription-test.js |   1 +
 test/specs/views/Card/CardGroup-test.js       |   5 +
 test/specs/views/Card/CardHeader-test.js      |   1 +
 test/specs/views/Card/CardMeta-test.js        |   1 +
 test/specs/views/Comment/Comment-test.js      |   1 +
 .../specs/views/Comment/CommentAction-test.js |   1 +
 .../views/Comment/CommentActions-test.js      |   1 +
 .../specs/views/Comment/CommentAuthor-test.js |   1 +
 .../specs/views/Comment/CommentAvatar-test.js |   1 +
 .../views/Comment/CommentContent-test.js      |   1 +
 test/specs/views/Comment/CommentGroup-test.js |   1 +
 .../views/Comment/CommentMetadata-test.js     |   1 +
 test/specs/views/Comment/CommentText-test.js  |   1 +
 test/specs/views/Feed/Feed-test.js            |   2 +
 test/specs/views/Feed/FeedContent-test.js     |   4 +
 test/specs/views/Feed/FeedDate-test.js        |   1 +
 test/specs/views/Feed/FeedEvent-test.js       |   1 +
 test/specs/views/Feed/FeedExtra-test.js       |   2 +
 test/specs/views/Feed/FeedLabel-test.js       |   2 +
 test/specs/views/Feed/FeedLike-test.js        |   4 +
 test/specs/views/Feed/FeedMeta-test.js        |   4 +
 test/specs/views/Feed/FeedSummary-test.js     |   2 +
 test/specs/views/Feed/FeedUser-test.js        |   1 +
 test/specs/views/Item/Item-test.js            |   3 +
 test/specs/views/Item/ItemContent-test.js     |   6 +
 test/specs/views/Item/ItemDescription-test.js |   1 +
 test/specs/views/Item/ItemExtra-test.js       |   1 +
 test/specs/views/Item/ItemGroup-test.js       |   5 +-
 test/specs/views/Item/ItemHeader-test.js      |   1 +
 test/specs/views/Item/ItemImage-test.js       |   2 +
 test/specs/views/Item/ItemMeta-test.js        |   1 +
 test/specs/views/Stastistic/Statistic-test.js |   4 +
 .../views/Stastistic/StatisticGroup-test.js   |   4 +
 .../views/Stastistic/StatisticLabel-test.js   |   1 +
 .../views/Stastistic/StatisticValue-test.js   |   1 +
 test/utils/assertBodyClasses.js               |  22 -
 test/utils/getComponentName.js                |  19 +
 test/utils/getComponentProps.js               |  20 +
 test/utils/index.js                           |   3 +-
 test/utils/nestedShallow.js                   |   5 -
 yarn.lock                                     |   8 -
 394 files changed, 5795 insertions(+), 7244 deletions(-)
 delete mode 100644 docs/src/examples/addons/Ref/Types/RefExampleRef.js
 delete mode 100644 docs/src/examples/addons/Ref/Types/RefForwardingExample.js
 delete mode 100644 docs/src/examples/addons/Ref/Types/index.js
 delete mode 100644 docs/src/examples/addons/Ref/index.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleUpdateOn.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/Settings/index.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/Types/index.js
 delete mode 100644 docs/src/examples/behaviors/Visibility/index.js
 create mode 100644 src/addons/Portal/usePortalElement.js
 create mode 100644 src/addons/Portal/utils/useTrigger.js
 delete mode 100644 src/behaviors/Visibility/Visibility.d.ts
 delete mode 100644 src/behaviors/Visibility/Visibility.js
 delete mode 100644 src/behaviors/Visibility/index.d.ts
 delete mode 100644 src/behaviors/Visibility/index.js
 create mode 100644 src/lib/hooks/useAutoControlledValue.js
 create mode 100644 src/lib/hooks/useEventCallback.js
 create mode 100644 src/lib/hooks/useForceUpdate.js
 create mode 100644 src/lib/hooks/useMergedRefs.js
 create mode 100644 src/lib/hooks/usePrevious.js
 create mode 100644 src/lib/isRefObject.js
 delete mode 100644 src/lib/normalizeOffset.js
 delete mode 100644 test/specs/behaviors/Visibility/Visibility-test.js
 create mode 100644 test/specs/commonTests/forwardsRef.js
 create mode 100644 test/specs/modules/Search/SearchCategoryLayout-test.js
 delete mode 100644 test/utils/assertBodyClasses.js
 create mode 100644 test/utils/getComponentName.js
 create mode 100644 test/utils/getComponentProps.js

diff --git a/.eslintrc b/.eslintrc
index 14d66ad96c..151942c8b8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -11,6 +11,7 @@
     "consistent-return": "off",
     "complexity": ["warn", 10],
     "global-require": "off",
+    "func-names": "off",
     "lines-between-class-members": "off",
     "no-console": "error",
     "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
diff --git a/docs/src/components/Sidebar/Sidebar.js b/docs/src/components/Sidebar/Sidebar.js
index 72baa4dff1..d8797ff909 100644
--- a/docs/src/components/Sidebar/Sidebar.js
+++ b/docs/src/components/Sidebar/Sidebar.js
@@ -3,7 +3,7 @@ import _ from 'lodash/fp'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Link } from 'react-static'
-import { Menu, Icon, Input, Ref } from 'semantic-ui-react'
+import { Menu, Icon, Input } from 'semantic-ui-react'
 
 import CarbonAd from 'docs/src/components/CarbonAd/CarbonAd'
 import Logo from 'docs/src/components/Logo/Logo'
@@ -229,16 +229,15 @@ class Sidebar extends Component {
               </Menu.Menu>
             </Menu.Item>
             <Menu.Item fitted>
-              <Ref innerRef={this.handleSearchRef}>
-                <Input
-                  fluid
-                  icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
-                  placeholder='Press "/" to filter components'
-                  value={query}
-                  onChange={this.handleSearchChange}
-                  onKeyDown={this.handleSearchKeyDown}
-                />
-              </Ref>
+              <Input
+                fluid
+                icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
+                placeholder='Press "/" to filter components'
+                ref={this.handleSearchRef}
+                value={query}
+                onChange={this.handleSearchChange}
+                onKeyDown={this.handleSearchKeyDown}
+              />
             </Menu.Item>
             {query ? this.renderSearchItems() : this.menuItemsByType}
           </Menu>
diff --git a/docs/src/examples/addons/Ref/Types/RefExampleRef.js b/docs/src/examples/addons/Ref/Types/RefExampleRef.js
deleted file mode 100644
index e6370f8158..0000000000
--- a/docs/src/examples/addons/Ref/Types/RefExampleRef.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import { Grid, Table, Ref, Segment } from 'semantic-ui-react'
-
-function RefExampleRef() {
-  const objectRef = React.useRef(null)
-  const [functionalRef, setFunctionalRef] = React.useState(null)
-  const [isMounted, setIsMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setIsMounted(true)
-    return () => setIsMounted(false)
-  }, [])
-
-  return (
-    <Grid>
-      <Grid.Column width={6}>
-        <Segment.Group>
-          <Ref innerRef={setFunctionalRef}>
-            <Segment>An example node with functional ref</Segment>
-          </Ref>
-          <Ref innerRef={objectRef}>
-            <Segment>
-              An example node with ref via <code>React.useRef()</code>
-            </Segment>
-          </Ref>
-        </Segment.Group>
-      </Grid.Column>
-      <Grid.Column width={10}>
-        {isMounted && (
-          <Table>
-            <Table.Header>
-              <Table.Row>
-                <Table.HeaderCell>Type</Table.HeaderCell>
-                <Table.HeaderCell>
-                  <code>nodeName</code>
-                </Table.HeaderCell>
-                <Table.HeaderCell>
-                  <code>textContent</code>
-                </Table.HeaderCell>
-              </Table.Row>
-            </Table.Header>
-
-            <Table.Body>
-              <Table.Row>
-                <Table.Cell singleLine>
-                  Functional ref via <code>React.useState()</code> hook
-                </Table.Cell>
-                <Table.Cell>{functionalRef.nodeName}</Table.Cell>
-                <Table.Cell>{functionalRef.textContent}</Table.Cell>
-              </Table.Row>
-
-              <Table.Row>
-                <Table.Cell singleLine>
-                  From <code>React.useRef()</code> hook
-                </Table.Cell>
-                <Table.Cell>{objectRef.current.nodeName}</Table.Cell>
-                <Table.Cell>{objectRef.current.textContent}</Table.Cell>
-              </Table.Row>
-            </Table.Body>
-          </Table>
-        )}
-      </Grid.Column>
-    </Grid>
-  )
-}
-
-export default RefExampleRef
diff --git a/docs/src/examples/addons/Ref/Types/RefForwardingExample.js b/docs/src/examples/addons/Ref/Types/RefForwardingExample.js
deleted file mode 100644
index 1e8ba6953d..0000000000
--- a/docs/src/examples/addons/Ref/Types/RefForwardingExample.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react'
-import { Grid, Ref, Segment } from 'semantic-ui-react'
-
-const ExampleButton = React.forwardRef((props, ref) => (
-  <div>
-    <button {...props} ref={ref} />
-  </div>
-))
-
-function RefForwardingExample() {
-  const forwardedRef = React.useRef(null)
-  const [isMounted, setIsMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setIsMounted(true)
-    return () => setIsMounted(false)
-  }, [])
-
-  return (
-    <Grid columns={2}>
-      <Grid.Column>
-        <Segment>
-          <p>
-            A button below uses <code>React.forwardRef()</code> API.
-          </p>
-
-          <Ref innerRef={forwardedRef}>
-            <ExampleButton>A button</ExampleButton>
-          </Ref>
-        </Segment>
-      </Grid.Column>
-
-      <Grid.Column>
-        {isMounted && (
-          <Segment secondary>
-            <pre>
-              {JSON.stringify(
-                {
-                  nodeName: forwardedRef.current.nodeName,
-                  nodeType: forwardedRef.current.nodeType,
-                  textContent: forwardedRef.current.textContent,
-                },
-                null,
-                2,
-              )}
-            </pre>
-          </Segment>
-        )}
-      </Grid.Column>
-    </Grid>
-  )
-}
-
-export default RefForwardingExample
diff --git a/docs/src/examples/addons/Ref/Types/index.js b/docs/src/examples/addons/Ref/Types/index.js
deleted file mode 100644
index 6431b2eefa..0000000000
--- a/docs/src/examples/addons/Ref/Types/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const RefTypesExamples = () => (
-  <ExampleSection title='Types'>
-    <ComponentExample
-      title='Ref'
-      description={
-        <span>
-          A component exposes the <code>innerRef</code> prop that always returns
-          the DOM node of both functional and class component children.
-        </span>
-      }
-      examplePath='addons/Ref/Types/RefExampleRef'
-    />
-    <ComponentExample
-      title='Forward Ref'
-      description={
-        <span>
-          <code>React.forwardRef()</code> API is also handled by this component.
-        </span>
-      }
-      examplePath='addons/Ref/Types/RefForwardingExample'
-    />
-  </ExampleSection>
-)
-
-export default RefTypesExamples
diff --git a/docs/src/examples/addons/Ref/index.js b/docs/src/examples/addons/Ref/index.js
deleted file mode 100644
index a5821a1393..0000000000
--- a/docs/src/examples/addons/Ref/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-import { Message, Icon } from 'semantic-ui-react'
-
-import Types from './Types'
-
-const RefExamples = () => (
-  <>
-    <Message icon warning>
-      <Icon name='warning sign' />
-
-      <Message.Content>
-        <Message.Header>Deprecation notice</Message.Header>
-        <p>
-          <code>Ref</code> component is deprecated and will be removed in the
-          next major release. Please follow our{' '}
-          <a href='https://github.com/Semantic-Org/Semantic-UI-React/pull/4324'>
-            upgrade guide
-          </a>{' '}
-          to avoid breaks during upgrade to v3.
-        </p>
-        <p>
-          It's still recommended to use <code>Ref</code> component with v2 to
-          get refs to HTML elements from Semantic UI React components, but as it
-          uses deprecated <code>ReactDOM.findDOMNode()</code> you may receive
-          warnings in React's StrictMode. We are working on it in{' '}
-          <a href='https://github.com/Semantic-Org/Semantic-UI-React/issues/3819'>
-            Semantic-Org/Semantic-UI-React#3819
-          </a>
-          .
-        </p>
-      </Message.Content>
-    </Message>
-
-    <Types />
-  </>
-)
-
-export default RefExamples
diff --git a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js b/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js
deleted file mode 100644
index e6bbf62c13..0000000000
--- a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import _ from 'lodash'
-import React, { Component, createRef } from 'react'
-import {
-  Button,
-  Checkbox,
-  Divider,
-  Grid,
-  Image,
-  Label,
-  Ref,
-  Segment,
-  Sticky,
-  Visibility,
-} from 'semantic-ui-react'
-
-export default class VisibilityExampleCallbackFrequency extends Component {
-  state = {
-    continuous: false,
-    log: [],
-    logCount: 0,
-    once: true,
-  }
-  contextRef = createRef()
-
-  updateLog = (eventName) => () =>
-    this.setState((prevState) => ({
-      log: [
-        `${new Date().toLocaleTimeString()}: ${eventName}`,
-        ...prevState.log,
-      ].slice(0, 20),
-      logCount: prevState.logCount + 1,
-    }))
-
-  clearLog = () => this.setState({ log: [], logCount: 0 })
-
-  toggleOnce = () => this.setState((prevState) => ({ once: !prevState.once }))
-
-  toggleContinuous = () =>
-    this.setState((prevState) => ({ continuous: !prevState.continuous }))
-
-  render() {
-    const { continuous, log, logCount, once } = this.state
-
-    return (
-      <Ref innerRef={this.contextRef}>
-        <Grid columns={2}>
-          <Grid.Column>
-            <Visibility
-              continuous={continuous}
-              once={once}
-              onTopVisible={this.updateLog('onTopVisible')}
-              onTopPassed={this.updateLog('onTopPassed')}
-              onBottomVisible={this.updateLog('onBottomVisible')}
-              onBottomPassed={this.updateLog('onBottomPassed')}
-              onTopVisibleReverse={this.updateLog('onTopVisibleReverse')}
-              onTopPassedReverse={this.updateLog('onTopPassedReverse')}
-              onBottomVisibleReverse={this.updateLog('onBottomVisibleReverse')}
-              onBottomPassedReverse={this.updateLog('onBottomPassedReverse')}
-              onPassing={this.updateLog('onPassing')}
-              onPassingReverse={this.updateLog('onPassingReverse')}
-              onOnScreen={this.updateLog('onOnScreen')}
-              onOffScreen={this.updateLog('onOffScreen')}
-            >
-              <Segment>
-                {_.map(
-                  [
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                  ],
-                  (src, index, images) => (
-                    <React.Fragment key={index}>
-                      <Image src={src} />
-                      {index !== images.length - 1 && <Divider />}
-                    </React.Fragment>
-                  ),
-                )}
-              </Segment>
-            </Visibility>
-          </Grid.Column>
-
-          <Grid.Column>
-            <Sticky context={this.contextRef}>
-              <Segment.Group>
-                <Segment>
-                  <Checkbox
-                    checked={once}
-                    label='Once'
-                    onChange={this.toggleOnce}
-                    toggle
-                  />
-                  <Divider />
-                  <Checkbox
-                    checked={continuous}
-                    label='Continuous'
-                    onChange={this.toggleContinuous}
-                    toggle
-                  />
-                </Segment>
-                <Segment>
-                  <Button
-                    compact
-                    size='small'
-                    floated='right'
-                    onClick={this.clearLog}
-                  >
-                    Clear
-                  </Button>
-                  Event Log <Label circular>{logCount}</Label>
-                </Segment>
-                <Segment secondary>
-                  <pre>
-                    {log.map((e, i) => (
-                      <div key={i}>{e}</div>
-                    ))}
-                  </pre>
-                </Segment>
-              </Segment.Group>
-            </Sticky>
-          </Grid.Column>
-        </Grid>
-      </Ref>
-    )
-  }
-}
diff --git a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js b/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
deleted file mode 100644
index 467116bf73..0000000000
--- a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { Component } from 'react'
-import {
-  Divider,
-  Grid,
-  Image,
-  Table,
-  Segment,
-  Visibility,
-} from 'semantic-ui-react'
-
-export default class VisibilityExampleFireOnMount extends Component {
-  state = {
-    calculations: {
-      direction: 'none',
-      height: 0,
-      width: 0,
-      topPassed: false,
-      bottomPassed: false,
-      pixelsPassed: 0,
-      percentagePassed: 0,
-      topVisible: false,
-      bottomVisible: false,
-      fits: false,
-      passing: false,
-      onScreen: false,
-      offScreen: false,
-    },
-  }
-
-  handleOnScreen = (e, { calculations }) => this.setState({ calculations })
-
-  handleOffScreen = (e, { calculations }) => this.setState({ calculations })
-
-  render() {
-    const { calculations } = this.state
-
-    return (
-      <Grid columns={2}>
-        <Grid.Column>
-          <Visibility
-            fireOnMount
-            onOnScreen={this.handleOnScreen}
-            onOffScreen={this.handleOffScreen}
-          >
-            <Segment>
-              <Image src='/images/wireframe/centered-paragraph.png' />
-              <Divider />
-              <Image src='/images/wireframe/short-paragraph.png' />
-              <Divider />
-              <Image src='/images/wireframe/media-paragraph.png' />
-              <Divider />
-              <Image src='/images/wireframe/paragraph.png' />
-            </Segment>
-          </Visibility>
-        </Grid.Column>
-
-        <Grid.Column>
-          <Table celled>
-            <Table.Header>
-              <Table.Row>
-                <Table.HeaderCell>Calculation</Table.HeaderCell>
-                <Table.HeaderCell>Value</Table.HeaderCell>
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              <Table.Row>
-                <Table.Cell>direction</Table.Cell>
-                <Table.Cell>{calculations.direction}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>pixelsPassed</Table.Cell>
-                <Table.Cell>{calculations.pixelsPassed.toFixed()}px</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>percentagePassed</Table.Cell>
-                <Table.Cell>
-                  {(calculations.percentagePassed * 100).toFixed()}%
-                </Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>fits</Table.Cell>
-                <Table.Cell>{calculations.fits.toString()}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>width</Table.Cell>
-                <Table.Cell>{calculations.width.toFixed()}px</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>height</Table.Cell>
-                <Table.Cell>{calculations.height.toFixed()}px</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>onScreen</Table.Cell>
-                <Table.Cell>{calculations.onScreen.toString()}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>offScreen</Table.Cell>
-                <Table.Cell>{calculations.offScreen.toString()}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>passing</Table.Cell>
-                <Table.Cell>{calculations.passing.toString()}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>topVisible</Table.Cell>
-                <Table.Cell>{calculations.topVisible.toString()}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>bottomVisible</Table.Cell>
-                <Table.Cell>{calculations.bottomVisible.toString()}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>topPassed</Table.Cell>
-                <Table.Cell>{calculations.topPassed.toString()}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>bottomPassed</Table.Cell>
-                <Table.Cell>{calculations.bottomPassed.toString()}</Table.Cell>
-              </Table.Row>
-            </Table.Body>
-          </Table>
-        </Grid.Column>
-      </Grid>
-    )
-  }
-}
diff --git a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js b/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js
deleted file mode 100644
index f671ba1ded..0000000000
--- a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import _ from 'lodash'
-import React, { Component, createRef } from 'react'
-import {
-  Button,
-  Checkbox,
-  Divider,
-  Grid,
-  Image,
-  Label,
-  Ref,
-  Segment,
-  Sticky,
-  Visibility,
-} from 'semantic-ui-react'
-
-export default class VisibilityExampleGroupedCallbacks extends Component {
-  state = {
-    continuous: false,
-    log: [],
-    logCount: 0,
-    once: true,
-  }
-  contextRef = createRef()
-
-  updateLog = (eventName) => () =>
-    this.setState((prevState) => ({
-      log: [
-        `${new Date().toLocaleTimeString()}: ${eventName}`,
-        ...prevState.log,
-      ].slice(0, 20),
-      logCount: prevState.logCount + 1,
-    }))
-
-  clearLog = () => this.setState({ log: [], logCount: 0 })
-
-  toggleOnce = () => this.setState((prevState) => ({ once: !prevState.once }))
-
-  toggleContinuous = () =>
-    this.setState((prevState) => ({ continuous: !prevState.continuous }))
-
-  render() {
-    const { continuous, log, logCount, once } = this.state
-
-    return (
-      <Ref innerRef={this.contextRef}>
-        <Grid columns={2}>
-          <Grid.Column>
-            <Visibility
-              continuous={continuous}
-              once={once}
-              onPassed={{
-                10: this.updateLog('10px'),
-                100: this.updateLog('100px'),
-                500: this.updateLog('500px'),
-                '10%': this.updateLog('10%'),
-                '25%': this.updateLog('25%'),
-                '80%': this.updateLog('80%'),
-              }}
-            >
-              <Segment>
-                {_.map(
-                  [
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                  ],
-                  (src, index, images) => (
-                    <React.Fragment key={index}>
-                      <Image src={src} />
-                      {index !== images.length - 1 && <Divider />}
-                    </React.Fragment>
-                  ),
-                )}
-              </Segment>
-            </Visibility>
-          </Grid.Column>
-
-          <Grid.Column>
-            <Sticky context={this.contextRef}>
-              <Segment.Group>
-                <Segment>
-                  <Checkbox
-                    checked={once}
-                    label='Once'
-                    onChange={this.toggleOnce}
-                    toggle
-                  />
-                  <Divider />
-                  <Checkbox
-                    checked={continuous}
-                    label='Continuous'
-                    onChange={this.toggleContinuous}
-                    toggle
-                  />
-                </Segment>
-                <Segment>
-                  <Button
-                    compact
-                    size='small'
-                    floated='right'
-                    onClick={this.clearLog}
-                  >
-                    Clear
-                  </Button>
-                  Event Log <Label circular>{logCount}</Label>
-                </Segment>
-                <Segment secondary>
-                  <pre>
-                    {log.map((e, i) => (
-                      <div key={i}>{e}</div>
-                    ))}
-                  </pre>
-                </Segment>
-              </Segment.Group>
-            </Sticky>
-          </Grid.Column>
-        </Grid>
-      </Ref>
-    )
-  }
-}
diff --git a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js b/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js
deleted file mode 100644
index 19b51b5e30..0000000000
--- a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import _ from 'lodash'
-import React, { Component, createRef } from 'react'
-import {
-  Divider,
-  Grid,
-  Image,
-  Segment,
-  Sticky,
-  Table,
-  Ref,
-  Visibility,
-} from 'semantic-ui-react'
-
-export default class VisibilityExampleOffset extends Component {
-  state = {
-    calculations: {
-      topPassed: false,
-      bottomPassed: false,
-      topVisible: false,
-      bottomVisible: false,
-    },
-  }
-  contextRef = createRef()
-
-  handleUpdate = (e, { calculations }) => this.setState({ calculations })
-
-  render() {
-    const { calculations } = this.state
-
-    return (
-      <Ref innerRef={this.contextRef}>
-        <Grid columns={2}>
-          <Grid.Column>
-            <Visibility offset={[10, 10]} onUpdate={this.handleUpdate}>
-              <Segment>
-                {_.map(
-                  [
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                  ],
-                  (src, index, images) => (
-                    <React.Fragment key={index}>
-                      <Image src={src} />
-                      {index !== images.length - 1 && <Divider />}
-                    </React.Fragment>
-                  ),
-                )}
-              </Segment>
-            </Visibility>
-          </Grid.Column>
-
-          <Grid.Column>
-            <Sticky context={this.contextRef}>
-              <Table celled>
-                <Table.Header>
-                  <Table.Row>
-                    <Table.HeaderCell>Calculation</Table.HeaderCell>
-                    <Table.HeaderCell>Value</Table.HeaderCell>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body>
-                  <Table.Row>
-                    <Table.Cell>topVisible</Table.Cell>
-                    <Table.Cell>
-                      {calculations.topVisible.toString()}
-                    </Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>bottomVisible</Table.Cell>
-                    <Table.Cell>
-                      {calculations.bottomVisible.toString()}
-                    </Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>topPassed</Table.Cell>
-                    <Table.Cell>{calculations.topPassed.toString()}</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>bottomPassed</Table.Cell>
-                    <Table.Cell>
-                      {calculations.bottomPassed.toString()}
-                    </Table.Cell>
-                  </Table.Row>
-                </Table.Body>
-              </Table>
-            </Sticky>
-          </Grid.Column>
-        </Grid>
-      </Ref>
-    )
-  }
-}
diff --git a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleUpdateOn.js b/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleUpdateOn.js
deleted file mode 100644
index 329680ddff..0000000000
--- a/docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleUpdateOn.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import _ from 'lodash'
-import React, { Component, createRef } from 'react'
-import {
-  Checkbox,
-  Divider,
-  Grid,
-  Image,
-  Segment,
-  Sticky,
-  Table,
-  Ref,
-  Visibility,
-} from 'semantic-ui-react'
-
-export default class VisibilityExampleUpdateOn extends Component {
-  state = {
-    calculations: {
-      topVisible: false,
-      bottomVisible: false,
-    },
-    showWireframe: true,
-  }
-  contextRef = createRef()
-
-  handleUpdate = (e, { calculations }) => this.setState({ calculations })
-
-  handleWireframe = (e, { checked }) =>
-    this.setState({ showWireframe: checked })
-
-  render() {
-    const { calculations, showWireframe } = this.state
-
-    return (
-      <Ref innerRef={this.contextRef}>
-        <Grid columns={2}>
-          <Grid.Column>
-            {showWireframe ? (
-              <Segment>
-                {_.map(
-                  [
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                  ],
-                  (src, index, images) => (
-                    <React.Fragment key={index}>
-                      <Image src={src} />
-                      {index !== images.length - 1 && <Divider />}
-                    </React.Fragment>
-                  ),
-                )}
-              </Segment>
-            ) : null}
-
-            <Visibility
-              offset={[10, 10]}
-              onUpdate={this.handleUpdate}
-              updateOn='repaint'
-            >
-              <Segment>
-                It's a tricky <code>Segment</code>
-              </Segment>
-            </Visibility>
-          </Grid.Column>
-
-          <Grid.Column>
-            <Sticky context={this.contextRef}>
-              <Segment>
-                <Checkbox
-                  checked={showWireframe}
-                  label='Show Wireframe'
-                  onChange={this.handleWireframe}
-                  toggle
-                />
-
-                <Table basic='very' celled>
-                  <Table.Header>
-                    <Table.Row>
-                      <Table.HeaderCell>Calculation</Table.HeaderCell>
-                      <Table.HeaderCell>Value</Table.HeaderCell>
-                    </Table.Row>
-                  </Table.Header>
-                  <Table.Body>
-                    <Table.Row>
-                      <Table.Cell>topVisible</Table.Cell>
-                      <Table.Cell>
-                        {calculations.topVisible.toString()}
-                      </Table.Cell>
-                    </Table.Row>
-                    <Table.Row>
-                      <Table.Cell>bottomVisible</Table.Cell>
-                      <Table.Cell>
-                        {calculations.bottomVisible.toString()}
-                      </Table.Cell>
-                    </Table.Row>
-                  </Table.Body>
-                </Table>
-              </Segment>
-            </Sticky>
-          </Grid.Column>
-        </Grid>
-      </Ref>
-    )
-  }
-}
diff --git a/docs/src/examples/behaviors/Visibility/Settings/index.js b/docs/src/examples/behaviors/Visibility/Settings/index.js
deleted file mode 100644
index 2e79c9da4a..0000000000
--- a/docs/src/examples/behaviors/Visibility/Settings/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react'
-import { Message } from 'semantic-ui-react'
-
-import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const VisibilitySettingsExamples = () => (
-  <ExampleSection title='Settings'>
-    <ComponentExample
-      title='Fire on mount'
-      description='Fires callbacks immediately after mount.'
-      examplePath='behaviors/Visibility/Settings/VisibilityExampleFireOnMount'
-    />
-    <ComponentExample
-      title='Offset'
-      description={[
-        'Value that context should be adjusted in pixels. Useful for making content appear below content fixed to the ',
-        'page.',
-      ].join('')}
-      examplePath='behaviors/Visibility/Settings/VisibilityExampleOffset'
-    />
-    <ComponentExample
-      title='Callback frequency'
-      description='You can change the callback frequency with `once` and `continuous` settings.'
-      examplePath='behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency'
-    />
-    <ComponentExample
-      title='Grouped callbacks'
-      description='You can specify callbacks that occur after different percentages or pixels of an element are passed.'
-      examplePath='behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks'
-    />
-    <ComponentExample
-      title='Update on'
-      description={
-        <span>
-          You can specify <code>updateOn='repaint'</code>, it will allow to
-          update and fire callbacks on browser repaint (animation frames).
-        </span>
-      }
-      examplePath='behaviors/Visibility/Settings/VisibilityExampleUpdateOn'
-    >
-      <Message warning>
-        By default <code>Visibility</code> handles events only on browser
-        events. It means that if you will hide a large block an event will not
-        be triggered and <code>Visibility</code> will not perform calculations.
-        This problem can be easily solved with <code>updateOn='repaint'</code>.
-      </Message>
-    </ComponentExample>
-  </ExampleSection>
-)
-
-export default VisibilitySettingsExamples
diff --git a/docs/src/examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js b/docs/src/examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js
deleted file mode 100644
index f030c71811..0000000000
--- a/docs/src/examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import _ from 'lodash'
-import React, { Component, createRef } from 'react'
-import {
-  Divider,
-  Grid,
-  Image,
-  Segment,
-  Sticky,
-  Table,
-  Ref,
-  Visibility,
-} from 'semantic-ui-react'
-
-export default class VisibilityExampleVisibility extends Component {
-  state = {
-    calculations: {
-      direction: 'none',
-      height: 0,
-      width: 0,
-      topPassed: false,
-      bottomPassed: false,
-      pixelsPassed: 0,
-      percentagePassed: 0,
-      topVisible: false,
-      bottomVisible: false,
-      fits: false,
-      passing: false,
-      onScreen: false,
-      offScreen: false,
-    },
-  }
-  contextRef = createRef()
-
-  handleUpdate = (e, { calculations }) => this.setState({ calculations })
-
-  render() {
-    const { calculations } = this.state
-
-    return (
-      <Ref innerRef={this.contextRef}>
-        <Grid columns={2}>
-          <Grid.Column>
-            <Visibility onUpdate={this.handleUpdate}>
-              <Segment>
-                {_.map(
-                  [
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                    '/images/wireframe/centered-paragraph.png',
-                    '/images/wireframe/short-paragraph.png',
-                    '/images/wireframe/media-paragraph.png',
-                    '/images/wireframe/paragraph.png',
-                  ],
-                  (src, index, images) => (
-                    <React.Fragment key={index}>
-                      <Image src={src} />
-                      {index !== images.length - 1 && <Divider />}
-                    </React.Fragment>
-                  ),
-                )}
-              </Segment>
-            </Visibility>
-          </Grid.Column>
-
-          <Grid.Column>
-            <Sticky context={this.contextRef}>
-              <Table celled>
-                <Table.Header>
-                  <Table.Row>
-                    <Table.HeaderCell>Calculation</Table.HeaderCell>
-                    <Table.HeaderCell>Value</Table.HeaderCell>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body>
-                  <Table.Row>
-                    <Table.Cell>direction</Table.Cell>
-                    <Table.Cell>{calculations.direction}</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>pixelsPassed</Table.Cell>
-                    <Table.Cell>
-                      {calculations.pixelsPassed.toFixed()}px
-                    </Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>percentagePassed</Table.Cell>
-                    <Table.Cell>
-                      {(calculations.percentagePassed * 100).toFixed()}%
-                    </Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>fits</Table.Cell>
-                    <Table.Cell>{calculations.fits.toString()}</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>width</Table.Cell>
-                    <Table.Cell>{calculations.width.toFixed()}px</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>height</Table.Cell>
-                    <Table.Cell>{calculations.height.toFixed()}px</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>onScreen</Table.Cell>
-                    <Table.Cell>{calculations.onScreen.toString()}</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>offScreen</Table.Cell>
-                    <Table.Cell>{calculations.offScreen.toString()}</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>passing</Table.Cell>
-                    <Table.Cell>{calculations.passing.toString()}</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>topVisible</Table.Cell>
-                    <Table.Cell>
-                      {calculations.topVisible.toString()}
-                    </Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>bottomVisible</Table.Cell>
-                    <Table.Cell>
-                      {calculations.bottomVisible.toString()}
-                    </Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>topPassed</Table.Cell>
-                    <Table.Cell>{calculations.topPassed.toString()}</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                    <Table.Cell>bottomPassed</Table.Cell>
-                    <Table.Cell>
-                      {calculations.bottomPassed.toString()}
-                    </Table.Cell>
-                  </Table.Row>
-                </Table.Body>
-              </Table>
-            </Sticky>
-          </Grid.Column>
-        </Grid>
-      </Ref>
-    )
-  }
-}
diff --git a/docs/src/examples/behaviors/Visibility/Types/index.js b/docs/src/examples/behaviors/Visibility/Types/index.js
deleted file mode 100644
index 9995e3e147..0000000000
--- a/docs/src/examples/behaviors/Visibility/Types/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-
-import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const VisibilityTypesExamples = () => (
-  <ExampleSection title='Types'>
-    <ComponentExample
-      title='Default'
-      description='An example of Visibility.'
-      examplePath='behaviors/Visibility/Types/VisibilityExampleVisibility'
-    />
-  </ExampleSection>
-)
-
-export default VisibilityTypesExamples
diff --git a/docs/src/examples/behaviors/Visibility/index.js b/docs/src/examples/behaviors/Visibility/index.js
deleted file mode 100644
index 251c3879c1..0000000000
--- a/docs/src/examples/behaviors/Visibility/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import { Message, Icon } from 'semantic-ui-react'
-
-import Types from './Types'
-import Settings from './Settings'
-
-const VisibilityExamples = () => (
-  <>
-    <Message icon warning>
-      <Icon name='warning sign' />
-
-      <Message.Content>
-        <Message.Header>Deprecation notice</Message.Header>
-        <p>
-          <code>Visibility</code> component is deprecated and will be removed in
-          the next major release. Please follow our{' '}
-          <a href='https://github.com/Semantic-Org/Semantic-UI-React/pull/4324'>
-            upgrade guide
-          </a>{' '}
-          to avoid breaks during upgrade to v3.
-        </p>
-      </Message.Content>
-    </Message>
-
-    <Types />
-    <Settings />
-  </>
-)
-
-export default VisibilityExamples
diff --git a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
index a63b258191..d5448d3d7c 100644
--- a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
+++ b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
@@ -5,7 +5,6 @@ import {
   Header,
   Image,
   Menu,
-  Ref,
   Segment,
   Sidebar,
 } from 'semantic-ui-react'
@@ -42,12 +41,10 @@ const SidebarExampleTarget = () => {
             <Menu.Item as='a'>Channels</Menu.Item>
           </Sidebar>
 
-          <Ref innerRef={segmentRef}>
-            <Segment secondary>
-              <Header as='h3'>Clickable area</Header>
-              <p>When you will click there, the sidebar will be closed.</p>
-            </Segment>
-          </Ref>
+          <Segment secondary ref={segmentRef}>
+            <Header as='h3'>Clickable area</Header>
+            <p>When you will click there, the sidebar will be closed.</p>
+          </Segment>
 
           <Segment>
             <Header as='h3'>Application Content</Header>
diff --git a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
index 9576b8ac9c..20fb405486 100644
--- a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
+++ b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
@@ -1,14 +1,6 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
-import {
-  Grid,
-  Header,
-  Image,
-  Rail,
-  Ref,
-  Segment,
-  Sticky,
-} from 'semantic-ui-react'
+import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
 
 const Placeholder = () => <Image src='/images/wireframe/paragraph.png' />
 
@@ -19,31 +11,29 @@ export default class StickyExampleAdjacentContext extends Component {
     return (
       <Grid centered columns={3}>
         <Grid.Column>
-          <Ref innerRef={this.contextRef}>
-            <Segment>
-              {_.times(10, (i) => (
+          <Segment ref={this.contextRef}>
+            {_.times(10, (i) => (
+              <Placeholder key={i} />
+            ))}
+
+            <Rail position='left'>
+              {_.times(3, (i) => (
                 <Placeholder key={i} />
               ))}
 
-              <Rail position='left'>
-                {_.times(3, (i) => (
-                  <Placeholder key={i} />
-                ))}
-
-                <Sticky context={this.contextRef}>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
+              <Sticky context={this.contextRef}>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
 
-              <Rail position='right'>
-                <Sticky context={this.contextRef}>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
-            </Segment>
-          </Ref>
+            <Rail position='right'>
+              <Sticky context={this.contextRef}>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
+          </Segment>
         </Grid.Column>
       </Grid>
     )
diff --git a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
index 588d5c5e3f..113bd01aff 100644
--- a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
+++ b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
@@ -1,14 +1,6 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
-import {
-  Grid,
-  Header,
-  Image,
-  Rail,
-  Ref,
-  Segment,
-  Sticky,
-} from 'semantic-ui-react'
+import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
 
 const Placeholder = () => <Image src='/images/wireframe/paragraph.png' />
 
@@ -19,31 +11,29 @@ export default class StickyExamplePushing extends Component {
     return (
       <Grid centered columns={3}>
         <Grid.Column>
-          <Ref innerRef={this.contextRef}>
-            <Segment>
-              {_.times(10, (i) => (
-                <Placeholder key={i} />
-              ))}
+          <Segment ref={this.contextRef}>
+            {_.times(10, (i) => (
+              <Placeholder key={i} />
+            ))}
 
-              <Rail position='left'>
-                <Sticky context={this.contextRef} pushing>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
+            <Rail position='left'>
+              <Sticky context={this.contextRef} pushing>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
 
-              <Rail position='right'>
-                {_.times(3, (i) => (
-                  <Placeholder key={i} />
-                ))}
+            <Rail position='right'>
+              {_.times(3, (i) => (
+                <Placeholder key={i} />
+              ))}
 
-                <Sticky context={this.contextRef} pushing>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
-            </Segment>
-          </Ref>
+              <Sticky context={this.contextRef} pushing>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
+          </Segment>
         </Grid.Column>
       </Grid>
     )
diff --git a/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js b/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
index c8471df3ed..bc6d312b98 100644
--- a/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
+++ b/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
@@ -1,14 +1,6 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
-import {
-  Grid,
-  Header,
-  Image,
-  Rail,
-  Ref,
-  Segment,
-  Sticky,
-} from 'semantic-ui-react'
+import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
 
 const Placeholder = () => <Image src='/images/wireframe/paragraph.png' />
 
@@ -19,36 +11,34 @@ export default class StickyExampleOffset extends Component {
     return (
       <Grid centered columns={3}>
         <Grid.Column>
-          <Ref innerRef={this.contextRef}>
-            <Segment>
-              {_.times(10, (i) => (
+          <Segment ref={this.contextRef}>
+            {_.times(10, (i) => (
+              <Placeholder key={i} />
+            ))}
+
+            <Rail position='left'>
+              {_.times(3, (i) => (
                 <Placeholder key={i} />
               ))}
 
-              <Rail position='left'>
-                {_.times(3, (i) => (
-                  <Placeholder key={i} />
-                ))}
-
-                <Sticky context={this.contextRef} offset={100}>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
+              <Sticky context={this.contextRef} offset={100}>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
 
-              <Rail position='right'>
-                <Sticky
-                  bottomOffset={50}
-                  context={this.contextRef}
-                  offset={50}
-                  pushing
-                >
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
-            </Segment>
-          </Ref>
+            <Rail position='right'>
+              <Sticky
+                bottomOffset={50}
+                context={this.contextRef}
+                offset={50}
+                pushing
+              >
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
+          </Segment>
         </Grid.Column>
       </Grid>
     )
diff --git a/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js b/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
index 46ca05dc32..de20e55745 100644
--- a/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
+++ b/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
@@ -6,7 +6,6 @@ import {
   Header,
   Image,
   Rail,
-  Ref,
   Segment,
   Sticky,
 } from 'semantic-ui-react'
@@ -26,33 +25,31 @@ export default class StickyExampleActive extends Component {
     return (
       <Grid centered columns={3}>
         <Grid.Column>
-          <Ref innerRef={this.contextRef}>
-            <Segment>
-              {_.times(10, (i) => (
-                <Placeholder key={i} />
-              ))}
+          <Segment ref={this.contextRef}>
+            {_.times(10, (i) => (
+              <Placeholder key={i} />
+            ))}
 
-              <Rail position='left'>
-                <Sticky context={this.contextRef}>
-                  <Segment>
-                    <Checkbox
-                      checked={active}
-                      label='Activate Sticky on right'
-                      onChange={this.handleToggle}
-                      toggle
-                    />
-                  </Segment>
-                </Sticky>
-              </Rail>
+            <Rail position='left'>
+              <Sticky context={this.contextRef}>
+                <Segment>
+                  <Checkbox
+                    checked={active}
+                    label='Activate Sticky on right'
+                    onChange={this.handleToggle}
+                    toggle
+                  />
+                </Segment>
+              </Sticky>
+            </Rail>
 
-              <Rail position='right'>
-                <Sticky active={active} context={this.contextRef}>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
-            </Segment>
-          </Ref>
+            <Rail position='right'>
+              <Sticky active={active} context={this.contextRef}>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
+          </Segment>
         </Grid.Column>
       </Grid>
     )
diff --git a/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js b/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
index 6c209a3fbc..5801139ffe 100644
--- a/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
+++ b/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
@@ -6,7 +6,6 @@ import {
   Image,
   Item,
   Rail,
-  Ref,
   Segment,
   Sticky,
 } from 'semantic-ui-react'
@@ -21,39 +20,37 @@ export default class StickyExampleOversized extends Component {
     return (
       <Grid centered columns={3}>
         <Grid.Column>
-          <Ref innerRef={this.contextRef}>
-            <Segment>
-              {_.times(15, (i) => (
-                <Placeholder key={i} />
-              ))}
+          <Segment ref={this.contextRef}>
+            {_.times(15, (i) => (
+              <Placeholder key={i} />
+            ))}
 
-              <Rail position='left'>
-                <Sticky context={this.contextRef}>
-                  <Item.Group divided>
-                    {_.times(12, (i) => (
-                      <Item key={i}>
-                        <Item.Image
-                          size='tiny'
-                          src='/images/wireframe/image.png'
-                        />
-                        <Item.Content>
-                          <Item.Header as='a'>Followup Article</Item.Header>
-                          <Item.Meta>By Author</Item.Meta>
-                        </Item.Content>
-                      </Item>
-                    ))}
-                  </Item.Group>
-                </Sticky>
-              </Rail>
+            <Rail position='left'>
+              <Sticky context={this.contextRef}>
+                <Item.Group divided>
+                  {_.times(12, (i) => (
+                    <Item key={i}>
+                      <Item.Image
+                        size='tiny'
+                        src='/images/wireframe/image.png'
+                      />
+                      <Item.Content>
+                        <Item.Header as='a'>Followup Article</Item.Header>
+                        <Item.Meta>By Author</Item.Meta>
+                      </Item.Content>
+                    </Item>
+                  ))}
+                </Item.Group>
+              </Sticky>
+            </Rail>
 
-              <Rail position='right'>
-                <Sticky context={this.contextRef}>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
-            </Segment>
-          </Ref>
+            <Rail position='right'>
+              <Sticky context={this.contextRef}>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
+          </Segment>
         </Grid.Column>
       </Grid>
     )
diff --git a/docs/src/layouts/HomepageLayout.js b/docs/src/layouts/HomepageLayout.js
index 9d94fbc69c..26b3ee9bcc 100644
--- a/docs/src/layouts/HomepageLayout.js
+++ b/docs/src/layouts/HomepageLayout.js
@@ -4,6 +4,7 @@
 import { createMedia } from '@artsy/fresnel'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import { InView } from 'react-intersection-observer'
 import {
   Button,
   Container,
@@ -16,7 +17,6 @@ import {
   Menu,
   Segment,
   Sidebar,
-  Visibility,
 } from 'semantic-ui-react'
 
 const { MediaContextProvider, Media } = createMedia({
@@ -72,8 +72,7 @@ HomepageHeading.propTypes = {
 class DesktopContainer extends Component {
   state = {}
 
-  hideFixedMenu = () => this.setState({ fixed: false })
-  showFixedMenu = () => this.setState({ fixed: true })
+  toggleFixedMenu = (inView) => this.setState({ fixed: !inView })
 
   render() {
     const { children } = this.props
@@ -81,11 +80,7 @@ class DesktopContainer extends Component {
 
     return (
       <Media greaterThan='mobile'>
-        <Visibility
-          once={false}
-          onBottomPassed={this.showFixedMenu}
-          onBottomPassedReverse={this.hideFixedMenu}
-        >
+        <InView onChange={this.toggleFixedMenu}>
           <Segment
             inverted
             textAlign='center'
@@ -118,7 +113,7 @@ class DesktopContainer extends Component {
             </Menu>
             <HomepageHeading />
           </Segment>
-        </Visibility>
+        </InView>
 
         {children}
       </Media>
diff --git a/docs/src/layouts/StickyLayout.js b/docs/src/layouts/StickyLayout.js
index b3a0dfe8d6..f86a98b087 100644
--- a/docs/src/layouts/StickyLayout.js
+++ b/docs/src/layouts/StickyLayout.js
@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
+import { InView } from 'react-intersection-observer'
 import {
   Container,
   Divider,
@@ -11,7 +12,6 @@ import {
   List,
   Menu,
   Segment,
-  Visibility,
 } from 'semantic-ui-react'
 
 const menuStyle = {
@@ -99,13 +99,8 @@ export default class StickyLayout extends Component {
     }
   }
 
-  stickOverlay = () => this.setState({ overlayFixed: true })
-
-  stickTopMenu = () => this.setState({ menuFixed: true })
-
-  unStickOverlay = () => this.setState({ overlayFixed: false })
-
-  unStickTopMenu = () => this.setState({ menuFixed: false })
+  toggleOverlay = (inView) => this.setState({ overlayFixed: !inView })
+  toggleTopMenu = (inView) => this.setState({ menuFixed: !inView })
 
   render() {
     const { menuFixed, overlayFixed, overlayRect } = this.state
@@ -134,11 +129,8 @@ export default class StickyLayout extends Component {
         {/* Attaching the top menu is a simple operation, we only switch `fixed` prop and add another style if it has
             gone beyond the scope of visibility
           */}
-        <Visibility
-          onBottomPassed={this.stickTopMenu}
-          onBottomVisible={this.unStickTopMenu}
-          once={false}
-        >
+
+        <InView onChange={this.toggleTopMenu}>
           <Menu
             borderless
             fixed={menuFixed ? 'top' : undefined}
@@ -173,7 +165,7 @@ export default class StickyLayout extends Component {
               </Menu.Menu>
             </Container>
           </Menu>
-        </Visibility>
+        </InView>
 
         <Container text>
           {_.times(3, (i) => (
@@ -186,13 +178,9 @@ export default class StickyLayout extends Component {
               An empty Visibility element controls the need to change the fixing of element below, it also uses height
               and width params received from its ref for correct display.
             */}
-          <Visibility
-            offset={80}
-            once={false}
-            onTopPassed={this.stickOverlay}
-            onTopVisible={this.unStickOverlay}
-            style={overlayFixed ? { ...overlayStyle, ...overlayRect } : {}}
-          />
+          <InView onChange={this.toggleOverlay} rootMargin='0px 0px 80px 0px'>
+            <div style={overlayFixed ? { ...overlayStyle, ...overlayRect } : {}} />
+          </InView>
 
           <div ref={this.handleOverlayRef} style={overlayFixed ? fixedOverlayStyle : overlayStyle}>
             <Menu
diff --git a/docs/src/utils/constants.js b/docs/src/utils/constants.js
index b5c979402d..ded9143351 100644
--- a/docs/src/utils/constants.js
+++ b/docs/src/utils/constants.js
@@ -1,5 +1,5 @@
 export const repoURL = 'https://github.com/Semantic-Org/Semantic-UI-React'
-export const typeOrder = ['element', 'collection', 'view', 'module', 'behavior', 'addon']
+export const typeOrder = ['element', 'collection', 'view', 'module', 'addon']
 export const semanticUIDocsURL = 'https://semantic-ui.com/'
 export const semanticUIRepoURL = 'https://github.com/Semantic-Org/Semantic-UI'
 export const semanticUICSSRepoURL = 'https://github.com/Semantic-Org/Semantic-UI-CSS'
diff --git a/docs/src/utils/docTypes/componentInfoShape.js b/docs/src/utils/docTypes/componentInfoShape.js
index 8fa17f3f99..c75022090e 100644
--- a/docs/src/utils/docTypes/componentInfoShape.js
+++ b/docs/src/utils/docTypes/componentInfoShape.js
@@ -17,7 +17,6 @@ const componentInfoShape = PropTypes.shape({
       name: PropTypes.string,
     }),
   ),
-  constructorName: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
   isParent: PropTypes.bool.isRequired,
   isChild: PropTypes.bool.isRequired,
diff --git a/docs/static/utils/getComponentMenu.js b/docs/static/utils/getComponentMenu.js
index c91d27d1c5..0ebd169c78 100644
--- a/docs/static/utils/getComponentMenu.js
+++ b/docs/static/utils/getComponentMenu.js
@@ -1,17 +1,5 @@
-import _ from 'lodash'
 import componentMenu from '../../src/componentMenu'
 
-const getComponentMenu = () =>
-  _.sortBy(
-    [
-      ...componentMenu,
-      {
-        displayName: 'Ref',
-        type: 'addon',
-        external: true,
-      },
-    ],
-    'displayName',
-  )
+const getComponentMenu = () => componentMenu
 
 export default getComponentMenu
diff --git a/gulp/plugins/util/getComponentInfo.js b/gulp/plugins/util/getComponentInfo.js
index 07c2dabeb5..39df9d5357 100644
--- a/gulp/plugins/util/getComponentInfo.js
+++ b/gulp/plugins/util/getComponentInfo.js
@@ -18,6 +18,7 @@ const getComponentInfo = (filepath) => {
   const filename = path.basename(absPath)
   const filenameWithoutExt = path.basename(absPath, path.extname(absPath))
 
+  const componentName = path.parse(filename).name
   // singular form of the component's ../../ directory
   // "element" for "src/elements/Button/Button.js"
   const componentType = path.basename(path.dirname(dir)).replace(/s$/, '')
@@ -27,25 +28,30 @@ const getComponentInfo = (filepath) => {
     ...defaultHandlers,
     parserCustomHandler,
   ])
+
   if (!components.length) {
     throw new Error(`Could not find a component definition in "${filepath}".`)
   }
-  if (components.length > 1) {
+
+  const info = components.find((component) => component.displayName === componentName)
+
+  if (!info) {
     throw new Error(
       [
-        `Found more than one component definition in "${filepath}".`,
-        'This is currently not supported, please ensure your module only defines a single React component.',
+        `Failed to find a component definition for "${componentName}" in "${filepath}".`,
+        'Please ensure your module defines matching React component.',
       ].join(' '),
     )
   }
-  const info = components[0]
 
   // remove keys we don't use
   delete info.methods
 
-  // add exported Component info
-  const Component = require(absPath).default
-  info.constructorName = _.get(Component, 'prototype.constructor.name', null)
+  if (!info.displayName) {
+    throw new Error(
+      `Please check that static property "displayName" is defined on a component in "${filepath}".`,
+    )
+  }
 
   // add component type
   info.type = componentType
diff --git a/gulp/tasks/docs.js b/gulp/tasks/docs.js
index 1be6ecbe1c..becde6c912 100644
--- a/gulp/tasks/docs.js
+++ b/gulp/tasks/docs.js
@@ -92,7 +92,6 @@ task('build:docs:static:start', (cb) => {
 
 const componentsSrc = [
   toUniversalGlob(paths.src(), 'addons/*/*.js'),
-  toUniversalGlob(paths.src(), 'behaviors/*/*.js'),
   toUniversalGlob(paths.src(), 'elements/*/*.js'),
   toUniversalGlob(paths.src(), 'collections/*/*.js'),
   toUniversalGlob(paths.src(), 'modules/*/*.js'),
diff --git a/index.d.ts b/index.d.ts
index bc45d993a4..fe160ab975 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,7 +1,3 @@
-// Third party
-
-export { Ref, RefProps } from '@fluentui/react-component-ref'
-
 // Addons
 
 export {
@@ -39,16 +35,6 @@ export {
   StrictTransitionablePortalProps,
 } from './dist/commonjs/addons/TransitionablePortal'
 
-// Behaviors
-export {
-  default as Visibility,
-  VisibilityCalculations,
-  VisibilityEventData,
-  VisibilityOnPassed,
-  VisibilityProps,
-  StrictVisibilityProps,
-} from './dist/commonjs/behaviors/Visibility'
-
 // Collections
 export {
   default as Breadcrumb,
diff --git a/package.json b/package.json
index 0908136904..b1814c0773 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
   "dependencies": {
     "@babel/runtime": "^7.10.5",
     "@fluentui/react-component-event-listener": "~0.63.0",
-    "@fluentui/react-component-ref": "~0.63.0",
     "@popperjs/core": "^2.6.0",
     "@semantic-ui-react/event-stack": "^3.1.3",
     "clsx": "^1.1.1",
diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 8d2463de34..2b3e7c004e 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import { customPropTypes, getUnhandledProps } from '../../lib'
 import Button from '../../elements/Button'
@@ -10,55 +10,56 @@ import Modal from '../../modules/Modal'
  * A Confirm modal gives the user a choice to confirm or cancel an action.
  * @see Modal
  */
-class Confirm extends Component {
-  handleCancel = (e) => {
-    _.invoke(this.props, 'onCancel', e, this.props)
+const Confirm = React.forwardRef(function (props, ref) {
+  const { cancelButton, confirmButton, content, header, open, size } = props
+  const rest = getUnhandledProps(Confirm, props)
+
+  const handleCancel = (e) => {
+    _.invoke(props, 'onCancel', e, props)
   }
 
-  handleCancelOverrides = (predefinedProps) => ({
+  const handleCancelOverrides = (predefinedProps) => ({
     onClick: (e, buttonProps) => {
       _.invoke(predefinedProps, 'onClick', e, buttonProps)
-      this.handleCancel(e)
+      handleCancel(e)
     },
   })
 
-  handleConfirmOverrides = (predefinedProps) => ({
+  const handleConfirmOverrides = (predefinedProps) => ({
     onClick: (e, buttonProps) => {
       _.invoke(predefinedProps, 'onClick', e, buttonProps)
-      _.invoke(this.props, 'onConfirm', e, this.props)
+      _.invoke(props, 'onConfirm', e, props)
     },
   })
 
-  render() {
-    const { cancelButton, confirmButton, content, header, open, size } = this.props
-    const rest = getUnhandledProps(Confirm, this.props)
-
-    // `open` is auto controlled by the Modal
-    // It cannot be present (even undefined) with `defaultOpen`
-    // only apply it if the user provided an open prop
-    const openProp = {}
-    if (_.has(this.props, 'open')) openProp.open = open
-
-    return (
-      <Modal {...rest} {...openProp} size={size} onClose={this.handleCancel}>
-        {Modal.Header.create(header, { autoGenerateKey: false })}
-        {Modal.Content.create(content, { autoGenerateKey: false })}
-        <Modal.Actions>
-          {Button.create(cancelButton, {
-            autoGenerateKey: false,
-            overrideProps: this.handleCancelOverrides,
-          })}
-          {Button.create(confirmButton, {
-            autoGenerateKey: false,
-            defaultProps: { primary: true },
-            overrideProps: this.handleConfirmOverrides,
-          })}
-        </Modal.Actions>
-      </Modal>
-    )
+  // `open` is auto controlled by the Modal
+  // It cannot be present (even undefined) with `defaultOpen`
+  // only apply it if the user provided an open prop
+  const openProp = {}
+  if (_.has(props, 'open')) {
+    openProp.open = open
   }
-}
 
+  return (
+    <Modal {...rest} {...openProp} size={size} onClose={handleCancel} ref={ref}>
+      {Modal.Header.create(header, { autoGenerateKey: false })}
+      {Modal.Content.create(content, { autoGenerateKey: false })}
+      <Modal.Actions>
+        {Button.create(cancelButton, {
+          autoGenerateKey: false,
+          overrideProps: handleCancelOverrides,
+        })}
+        {Button.create(confirmButton, {
+          autoGenerateKey: false,
+          defaultProps: { primary: true },
+          overrideProps: handleConfirmOverrides,
+        })}
+      </Modal.Actions>
+    </Modal>
+  )
+})
+
+Confirm.displayName = 'Confirm'
 Confirm.propTypes = {
   /** The cancel button text. */
   cancelButton: customPropTypes.itemShorthand,
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index bcaf394c5f..078389ab26 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  ModernAutoControlledComponent as Component,
   createPaginationItems,
   customPropTypes,
   getUnhandledProps,
+  useAutoControlledValue,
 } from '../../lib'
 import Menu from '../../collections/Menu'
 import PaginationItem from './PaginationItem'
@@ -14,68 +14,72 @@ import PaginationItem from './PaginationItem'
 /**
  * A component to render a pagination.
  */
-export default class Pagination extends Component {
-  getInitialAutoControlledState() {
-    return { activePage: 1 }
-  }
+const Pagination = React.forwardRef(function (props, ref) {
+  const {
+    'aria-label': ariaLabel,
+    boundaryRange,
+    disabled,
+    ellipsisItem,
+    siblingRange,
+    totalPages,
+  } = props
+  const [activePage, setActivePage] = useAutoControlledValue({
+    state: props.activePage,
+    defaultState: props.defaultActivePage,
+    initialState: 1,
+  })
 
-  handleItemClick = (e, { value: nextActivePage }) => {
-    const { activePage: prevActivePage } = this.state
+  const handleItemClick = (e, { value: nextActivePage }) => {
+    const prevActivePage = activePage
 
     // Heads up! We need the cast to the "number" type there, as `activePage` can be a string
-    if (+prevActivePage === +nextActivePage) return
+    if (+prevActivePage === +nextActivePage) {
+      return
+    }
 
-    this.setState({ activePage: nextActivePage })
-    _.invoke(this.props, 'onPageChange', e, { ...this.props, activePage: nextActivePage })
+    setActivePage(nextActivePage)
+    _.invoke(props, 'onPageChange', e, { ...props, activePage: nextActivePage })
   }
 
-  handleItemOverrides = (active, type, value) => (predefinedProps) => ({
+  const handleItemOverrides = (active, type, value) => (predefinedProps) => ({
     active,
     type,
     key: `${type}-${value}`,
     onClick: (e, itemProps) => {
       _.invoke(predefinedProps, 'onClick', e, itemProps)
-      if (itemProps.type !== 'ellipsisItem') this.handleItemClick(e, itemProps)
+
+      if (itemProps.type !== 'ellipsisItem') {
+        handleItemClick(e, itemProps)
+      }
     },
   })
 
-  render() {
-    const {
-      'aria-label': ariaLabel,
-      boundaryRange,
-      disabled,
-      ellipsisItem,
-      siblingRange,
-      totalPages,
-    } = this.props
-    const { activePage } = this.state
-
-    const items = createPaginationItems({
-      activePage,
-      boundaryRange,
-      hideEllipsis: _.isNil(ellipsisItem),
-      siblingRange,
-      totalPages,
-    })
-    const rest = getUnhandledProps(Pagination, this.props)
-
-    return (
-      <Menu {...rest} aria-label={ariaLabel} pagination role='navigation'>
-        {_.map(items, ({ active, type, value }) =>
-          PaginationItem.create(this.props[type], {
-            defaultProps: {
-              content: value,
-              disabled,
-              value,
-            },
-            overrideProps: this.handleItemOverrides(active, type, value),
-          }),
-        )}
-      </Menu>
-    )
-  }
-}
-
+  const items = createPaginationItems({
+    activePage,
+    boundaryRange,
+    hideEllipsis: _.isNil(ellipsisItem),
+    siblingRange,
+    totalPages,
+  })
+  const rest = getUnhandledProps(Pagination, props)
+
+  return (
+    <Menu {...rest} aria-label={ariaLabel} pagination role='navigation' ref={ref}>
+      {_.map(items, ({ active, type, value }) =>
+        PaginationItem.create(props[type], {
+          defaultProps: {
+            content: value,
+            disabled,
+            value,
+          },
+          overrideProps: handleItemOverrides(active, type, value),
+        }),
+      )}
+    </Menu>
+  )
+})
+
+Pagination.displayName = 'Pagination'
 Pagination.propTypes = {
   /** A pagination item can have an aria label. */
   'aria-label': PropTypes.string,
@@ -125,8 +129,6 @@ Pagination.propTypes = {
   totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
-Pagination.autoControlledProps = ['activePage']
-
 Pagination.defaultProps = {
   'aria-label': 'Pagination Navigation',
   boundaryRange: 1,
@@ -152,3 +154,5 @@ Pagination.defaultProps = {
 }
 
 Pagination.Item = PaginationItem
+
+export default Pagination
diff --git a/src/addons/Pagination/PaginationItem.js b/src/addons/Pagination/PaginationItem.js
index 27efdf8884..6cb9af2b91 100644
--- a/src/addons/Pagination/PaginationItem.js
+++ b/src/addons/Pagination/PaginationItem.js
@@ -1,7 +1,7 @@
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import { Component } from 'react'
+import * as React from 'react'
 
 import { createShorthandFactory } from '../../lib'
 import MenuItem from '../../collections/Menu/MenuItem'
@@ -9,40 +9,39 @@ import MenuItem from '../../collections/Menu/MenuItem'
 /**
  * An item of a pagination.
  */
-class PaginationItem extends Component {
-  handleClick = (e) => {
-    _.invoke(this.props, 'onClick', e, this.props)
-  }
+const PaginationItem = React.forwardRef(function (props, ref) {
+  const { active, type } = props
+  const disabled = props.disabled || type === 'ellipsisItem'
 
-  handleKeyDown = (e) => {
-    _.invoke(this.props, 'onKeyDown', e, this.props)
-    if (keyboardKey.getCode(e) === keyboardKey.Enter) _.invoke(this.props, 'onClick', e, this.props)
+  const handleClick = (e) => {
+    _.invoke(props, 'onClick', e, props)
   }
 
-  handleOverrides = () => ({
-    onClick: this.handleClick,
-    onKeyDown: this.handleKeyDown,
-  })
-
-  render() {
-    const { active, type } = this.props
-    const disabled = this.props.disabled || type === 'ellipsisItem'
+  const handleKeyDown = (e) => {
+    _.invoke(props, 'onKeyDown', e, props)
 
-    return MenuItem.create(this.props, {
-      defaultProps: {
-        active,
-        'aria-current': active,
-        'aria-disabled': disabled,
-        disabled,
-        onClick: this.handleClick,
-        onKeyDown: this.handleKeyDown,
-        tabIndex: disabled ? -1 : 0,
-      },
-      overrideProps: this.handleOverrides,
-    })
+    if (keyboardKey.getCode(e) === keyboardKey.Enter) {
+      _.invoke(props, 'onClick', e, props)
+    }
   }
-}
 
+  return MenuItem.create(props, {
+    defaultProps: {
+      active,
+      'aria-current': active,
+      'aria-disabled': disabled,
+      disabled,
+      tabIndex: disabled ? -1 : 0,
+    },
+    overrideProps: () => ({
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref,
+    }),
+  })
+})
+
+PaginationItem.displayName = 'PaginationItem'
 PaginationItem.propTypes = {
   /** A pagination item can be active. */
   active: PropTypes.bool,
diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
index e987e36f95..4f49874189 100644
--- a/src/addons/Portal/Portal.js
+++ b/src/addons/Portal/Portal.js
@@ -1,17 +1,16 @@
 import EventStack from '@semantic-ui-react/event-stack'
-import { handleRef, Ref } from '@fluentui/react-component-ref'
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  ModernAutoControlledComponent as Component,
   customPropTypes,
   doesNodeContainClick,
   makeDebugger,
+  useAutoControlledValue,
 } from '../../lib'
-import validateTrigger from './utils/validateTrigger'
+import useTrigger from './utils/useTrigger'
 import PortalInner from './PortalInner'
 
 const debug = makeDebugger('portal')
@@ -23,263 +22,270 @@ const debug = makeDebugger('portal')
  * @see Dimmer
  * @see Confirm
  */
-class Portal extends Component {
-  contentRef = React.createRef()
-  triggerRef = React.createRef()
-  latestDocumentMouseDownEvent = null
+function Portal(props) {
+  const {
+    children,
+    closeOnDocumentClick,
+    closeOnEscape,
+    closeOnPortalMouseLeave,
+    closeOnTriggerBlur,
+    closeOnTriggerClick,
+    closeOnTriggerMouseLeave,
+    eventPool,
+    mountNode,
+    mouseEnterDelay,
+    mouseLeaveDelay,
+    openOnTriggerClick,
+    openOnTriggerFocus,
+    openOnTriggerMouseEnter,
+  } = props
+
+  const [open, setOpen] = useAutoControlledValue({
+    state: props.open,
+    defaultState: props.defaultOpen,
+    initialState: false,
+  })
+
+  const contentRef = React.useRef()
+  const [triggerRef, trigger] = useTrigger(props.trigger, props.triggerRef)
+
+  const mouseEnterTimer = React.useRef()
+  const mouseLeaveTimer = React.useRef()
+  const latestDocumentMouseDownEvent = React.useRef()
 
-  componentWillUnmount() {
-    // Clean up timers
-    clearTimeout(this.mouseEnterTimer)
-    clearTimeout(this.mouseLeaveTimer)
+  // ----------------------------------------
+  // Behavior
+  // ----------------------------------------
+
+  const openPortal = (e) => {
+    debug('open()')
+
+    setOpen(true)
+    _.invoke(props, 'onOpen', e, { ...props, open: true })
+  }
+
+  const openPortalWithTimeout = (e, delay) => {
+    debug('openWithTimeout()', delay)
+    // React wipes the entire event object and suggests using e.persist() if
+    // you need the event for async access. However, even with e.persist
+    // certain required props (e.g. currentTarget) are null so we're forced to clone.
+    const eventClone = { ...e }
+    return setTimeout(() => openPortal(eventClone), delay || 0)
+  }
+
+  const closePortal = (e) => {
+    debug('close()')
+
+    setOpen(false)
+    _.invoke(props, 'onClose', e, { ...props, open: false })
+  }
+
+  const closePortalWithTimeout = (e, delay) => {
+    debug('closeWithTimeout()', delay)
+    // React wipes the entire event object and suggests using e.persist() if
+    // you need the event for async access. However, even with e.persist
+    // certain required props (e.g. currentTarget) are null so we're forced to clone.
+    const eventClone = { ...e }
+    return setTimeout(() => closePortal(eventClone), delay || 0)
   }
 
   // ----------------------------------------
   // Document Event Handlers
   // ----------------------------------------
 
-  handleDocumentMouseDown = (e) => {
-    this.latestDocumentMouseDownEvent = e
+  React.useEffect(() => {
+    // Clean up timers
+    clearTimeout(mouseEnterTimer.current)
+    clearTimeout(mouseLeaveTimer.current)
+  }, [])
+
+  const handleDocumentMouseDown = (e) => {
+    latestDocumentMouseDownEvent.current = e
   }
 
-  handleDocumentClick = (e) => {
-    const { closeOnDocumentClick } = this.props
-    const currentMouseDownEvent = this.latestDocumentMouseDownEvent
-    this.latestDocumentMouseDownEvent = null
+  const handleDocumentClick = (e) => {
+    const currentMouseDownEvent = latestDocumentMouseDownEvent.current
+    latestDocumentMouseDownEvent.current = null
+
+    // event happened in trigger (delegate to trigger handlers)
+    const isInsideTrigger = doesNodeContainClick(triggerRef.current, e)
+    // event originated in the portal but was ended outside
+    const isOriginatedFromPortal =
+      currentMouseDownEvent && doesNodeContainClick(contentRef.current, currentMouseDownEvent)
+    // event happened in the portal
+    const isInsidePortal = doesNodeContainClick(contentRef.current, e)
 
     if (
-      !this.contentRef.current || // no portal
-      doesNodeContainClick(this.triggerRef.current, e) || // event happened in trigger (delegate to trigger handlers)
-      (currentMouseDownEvent &&
-        doesNodeContainClick(this.contentRef.current, currentMouseDownEvent)) || // event originated in the portal but was ended outside
-      doesNodeContainClick(this.contentRef.current, e) // event happened in the portal
+      !contentRef.current?.contains || // no portal
+      isInsideTrigger ||
+      isOriginatedFromPortal ||
+      isInsidePortal
     ) {
       return
     } // ignore the click
 
     if (closeOnDocumentClick) {
       debug('handleDocumentClick()')
-      this.close(e)
+      closePortal(e)
     }
   }
 
-  handleEscape = (e) => {
-    if (!this.props.closeOnEscape) return
-    if (keyboardKey.getCode(e) !== keyboardKey.Escape) return
+  const handleEscape = (e) => {
+    if (!closeOnEscape) {
+      return
+    }
+    if (keyboardKey.getCode(e) !== keyboardKey.Escape) {
+      return
+    }
 
     debug('handleEscape()')
-    this.close(e)
+    closePortal(e)
   }
 
   // ----------------------------------------
   // Component Event Handlers
   // ----------------------------------------
 
-  handlePortalMouseLeave = (e) => {
-    const { closeOnPortalMouseLeave, mouseLeaveDelay } = this.props
-
-    if (!closeOnPortalMouseLeave) return
+  const handlePortalMouseLeave = (e) => {
+    if (!closeOnPortalMouseLeave) {
+      return
+    }
 
     // Do not close the portal when 'mouseleave' is triggered by children
-    if (e.target !== this.contentRef.current) return
+    if (e.target !== contentRef.current) {
+      return
+    }
 
     debug('handlePortalMouseLeave()')
-    this.mouseLeaveTimer = this.closeWithTimeout(e, mouseLeaveDelay)
+    mouseLeaveTimer.current = closePortalWithTimeout(e, mouseLeaveDelay)
   }
 
-  handlePortalMouseEnter = () => {
+  const handlePortalMouseEnter = () => {
     // In order to enable mousing from the trigger to the portal, we need to
     // clear the mouseleave timer that was set when leaving the trigger.
-    const { closeOnPortalMouseLeave } = this.props
-
-    if (!closeOnPortalMouseLeave) return
+    if (!closeOnPortalMouseLeave) {
+      return
+    }
 
     debug('handlePortalMouseEnter()')
-    clearTimeout(this.mouseLeaveTimer)
+    clearTimeout(mouseLeaveTimer.current)
   }
 
-  handleTriggerBlur = (e, ...rest) => {
-    const { trigger, closeOnTriggerBlur } = this.props
-
+  const handleTriggerBlur = (e, ...rest) => {
     // Call original event handler
     _.invoke(trigger, 'props.onBlur', e, ...rest)
 
     // IE 11 doesn't work with relatedTarget in blur events
     const target = e.relatedTarget || document.activeElement
     // do not close if focus is given to the portal
-    const didFocusPortal = _.invoke(this.contentRef.current, 'contains', target)
+    const didFocusPortal = _.invoke(contentRef.current, 'contains', target)
 
-    if (!closeOnTriggerBlur || didFocusPortal) return
+    if (!closeOnTriggerBlur || didFocusPortal) {
+      return
+    }
 
     debug('handleTriggerBlur()')
-    this.close(e)
+    closePortal(e)
   }
 
-  handleTriggerClick = (e, ...rest) => {
-    const { trigger, closeOnTriggerClick, openOnTriggerClick } = this.props
-    const { open } = this.state
-
+  const handleTriggerClick = (e, ...rest) => {
     // Call original event handler
     _.invoke(trigger, 'props.onClick', e, ...rest)
 
     if (open && closeOnTriggerClick) {
       debug('handleTriggerClick() - close')
 
-      this.close(e)
+      closePortal(e)
     } else if (!open && openOnTriggerClick) {
       debug('handleTriggerClick() - open')
-
-      this.open(e)
+      openPortal(e)
     }
   }
 
-  handleTriggerFocus = (e, ...rest) => {
-    const { trigger, openOnTriggerFocus } = this.props
-
+  const handleTriggerFocus = (e, ...rest) => {
     // Call original event handler
     _.invoke(trigger, 'props.onFocus', e, ...rest)
 
-    if (!openOnTriggerFocus) return
+    if (!openOnTriggerFocus) {
+      return
+    }
 
     debug('handleTriggerFocus()')
-    this.open(e)
+    openPortal(e)
   }
 
-  handleTriggerMouseLeave = (e, ...rest) => {
-    clearTimeout(this.mouseEnterTimer)
-
-    const { trigger, closeOnTriggerMouseLeave, mouseLeaveDelay } = this.props
+  const handleTriggerMouseLeave = (e, ...rest) => {
+    clearTimeout(mouseEnterTimer)
 
     // Call original event handler
     _.invoke(trigger, 'props.onMouseLeave', e, ...rest)
 
-    if (!closeOnTriggerMouseLeave) return
+    if (!closeOnTriggerMouseLeave) {
+      return
+    }
 
     debug('handleTriggerMouseLeave()')
-    this.mouseLeaveTimer = this.closeWithTimeout(e, mouseLeaveDelay)
+    mouseLeaveTimer.current = closePortalWithTimeout(e, mouseLeaveDelay)
   }
 
-  handleTriggerMouseEnter = (e, ...rest) => {
-    clearTimeout(this.mouseLeaveTimer)
-
-    const { trigger, mouseEnterDelay, openOnTriggerMouseEnter } = this.props
+  const handleTriggerMouseEnter = (e, ...rest) => {
+    clearTimeout(mouseLeaveTimer)
 
     // Call original event handler
     _.invoke(trigger, 'props.onMouseEnter', e, ...rest)
 
-    if (!openOnTriggerMouseEnter) return
+    if (!openOnTriggerMouseEnter) {
+      return
+    }
 
     debug('handleTriggerMouseEnter()')
-    this.mouseEnterTimer = this.openWithTimeout(e, mouseEnterDelay)
-  }
-
-  // ----------------------------------------
-  // Behavior
-  // ----------------------------------------
-
-  open = (e) => {
-    debug('open()')
-
-    _.invoke(this.props, 'onOpen', e, { ...this.props, open: true })
-    this.setState({ open: true })
-  }
-
-  openWithTimeout = (e, delay) => {
-    debug('openWithTimeout()', delay)
-    // React wipes the entire event object and suggests using e.persist() if
-    // you need the event for async access. However, even with e.persist
-    // certain required props (e.g. currentTarget) are null so we're forced to clone.
-    const eventClone = { ...e }
-    return setTimeout(() => this.open(eventClone), delay || 0)
+    mouseEnterTimer.current = openPortalWithTimeout(e, mouseEnterDelay)
   }
 
-  close = (e) => {
-    debug('close()')
-
-    this.setState({ open: false })
-    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
-  }
-
-  closeWithTimeout = (e, delay) => {
-    debug('closeWithTimeout()', delay)
-    // React wipes the entire event object and suggests using e.persist() if
-    // you need the event for async access. However, even with e.persist
-    // certain required props (e.g. currentTarget) are null so we're forced to clone.
-    const eventClone = { ...e }
-    return setTimeout(() => this.close(eventClone), delay || 0)
-  }
-
-  handleMount = () => {
-    debug('handleMount()')
-    _.invoke(this.props, 'onMount', null, this.props)
-  }
-
-  handleUnmount = () => {
-    debug('handleUnmount()')
-    _.invoke(this.props, 'onUnmount', null, this.props)
-  }
-
-  handleTriggerRef = (c) => {
-    debug('handleTriggerRef()')
-    this.triggerRef.current = c
-    handleRef(this.props.triggerRef, c)
-  }
-
-  render() {
-    const { children, eventPool, mountNode, trigger } = this.props
-    const { open } = this.state
-
-    /* istanbul ignore else */
-    if (process.env.NODE_ENV !== 'production') {
-      validateTrigger(trigger)
-    }
-
-    return (
-      <>
-        {open && (
-          <>
-            <PortalInner
-              innerRef={this.contentRef}
-              mountNode={mountNode}
-              onMount={this.handleMount}
-              onUnmount={this.handleUnmount}
-            >
-              {children}
-            </PortalInner>
-
-            <EventStack
-              name='mouseleave'
-              on={this.handlePortalMouseLeave}
-              pool={eventPool}
-              target={this.contentRef}
-            />
-            <EventStack
-              name='mouseenter'
-              on={this.handlePortalMouseEnter}
-              pool={eventPool}
-              target={this.contentRef}
-            />
-            <EventStack name='mousedown' on={this.handleDocumentMouseDown} pool={eventPool} />
-            <EventStack name='click' on={this.handleDocumentClick} pool={eventPool} />
-            <EventStack name='keydown' on={this.handleEscape} pool={eventPool} />
-          </>
-        )}
-        {trigger && (
-          <Ref innerRef={this.handleTriggerRef}>
-            {React.cloneElement(trigger, {
-              onBlur: this.handleTriggerBlur,
-              onClick: this.handleTriggerClick,
-              onFocus: this.handleTriggerFocus,
-              onMouseLeave: this.handleTriggerMouseLeave,
-              onMouseEnter: this.handleTriggerMouseEnter,
-            })}
-          </Ref>
-        )}
-      </>
-    )
-  }
+  return (
+    <>
+      {open && (
+        <>
+          <PortalInner
+            mountNode={mountNode}
+            onMount={() => _.invoke(props, 'onMount', null, props)}
+            onUnmount={() => _.invoke(props, 'onUnmount', null, props)}
+            ref={contentRef}
+          >
+            {children}
+          </PortalInner>
+
+          <EventStack
+            name='mouseleave'
+            on={handlePortalMouseLeave}
+            pool={eventPool}
+            target={contentRef}
+          />
+          <EventStack
+            name='mouseenter'
+            on={handlePortalMouseEnter}
+            pool={eventPool}
+            target={contentRef}
+          />
+          <EventStack name='mousedown' on={handleDocumentMouseDown} pool={eventPool} />
+          <EventStack name='click' on={handleDocumentClick} pool={eventPool} />
+          <EventStack name='keydown' on={handleEscape} pool={eventPool} />
+        </>
+      )}
+      {trigger &&
+        React.cloneElement(trigger, {
+          onBlur: handleTriggerBlur,
+          onClick: handleTriggerClick,
+          onFocus: handleTriggerFocus,
+          onMouseLeave: handleTriggerMouseLeave,
+          onMouseEnter: handleTriggerMouseEnter,
+          ref: triggerRef,
+        })}
+    </>
+  )
 }
 
+Portal.displayName = 'Portal'
 Portal.propTypes = {
   /** Primary content. */
   children: PropTypes.node.isRequired,
@@ -379,8 +385,6 @@ Portal.defaultProps = {
   openOnTriggerClick: true,
 }
 
-Portal.autoControlledProps = ['open']
-
 Portal.Inner = PortalInner
 
 export default Portal
diff --git a/src/addons/Portal/PortalInner.d.ts b/src/addons/Portal/PortalInner.d.ts
index 9975bec5d5..6ccdf0a45e 100644
--- a/src/addons/Portal/PortalInner.d.ts
+++ b/src/addons/Portal/PortalInner.d.ts
@@ -8,9 +8,6 @@ export interface StrictPortalInnerProps {
   /** Primary content. */
   children: React.ReactNode
 
-  /** Called with a ref to the inner node. */
-  innerRef?: React.Ref<any>
-
   /** The node where the portal should mount. */
   mountNode?: any
 
diff --git a/src/addons/Portal/PortalInner.js b/src/addons/Portal/PortalInner.js
index 163ac35983..2c8c5bb929 100644
--- a/src/addons/Portal/PortalInner.js
+++ b/src/addons/Portal/PortalInner.js
@@ -1,47 +1,44 @@
-import { handleRef, Ref } from '@fluentui/react-component-ref'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 import { createPortal } from 'react-dom'
 
-import { customPropTypes, isBrowser, makeDebugger } from '../../lib'
+import { isBrowser, makeDebugger, useEventCallback } from '../../lib'
+import usePortalElement from './usePortalElement'
 
-const debug = makeDebugger('portalInner')
+const debug = makeDebugger('PortalInner')
 
 /**
  * An inner component that allows you to render children outside their parent.
  */
-class PortalInner extends Component {
-  componentDidMount() {
-    debug('componentDidMount()')
-    _.invoke(this.props, 'onMount', null, this.props)
-  }
+const PortalInner = React.forwardRef(function (props, ref) {
+  const handleMount = useEventCallback(() => _.invoke(props, 'onMount', null, props))
+  const handleUnmount = useEventCallback(() => _.invoke(props, 'onUnmount', null, props))
 
-  componentWillUnmount() {
-    debug('componentWillUnmount()')
-    _.invoke(this.props, 'onUnmount', null, this.props)
-  }
+  const element = usePortalElement(props.children, ref)
 
-  handleRef = (c) => {
-    debug('handleRef', c)
-    handleRef(this.props.innerRef, c)
-  }
+  React.useEffect(() => {
+    debug('componentDidMount()')
+    handleMount()
 
-  render() {
-    if (!isBrowser()) return null
-    const { children, mountNode = document.body } = this.props
+    return () => {
+      debug('componentWillUnmount()')
+      handleUnmount()
+    }
+  }, [])
 
-    return createPortal(<Ref innerRef={this.handleRef}>{children}</Ref>, mountNode)
+  if (!isBrowser()) {
+    return null
   }
-}
 
+  return createPortal(element, props.mountNode || document.body)
+})
+
+PortalInner.displayName = 'PortalInner'
 PortalInner.propTypes = {
   /** Primary content. */
   children: PropTypes.node.isRequired,
 
-  /** Called with a ref to the inner node. */
-  innerRef: customPropTypes.ref,
-
   /** The node where the portal should mount. */
   mountNode: PropTypes.any,
 
diff --git a/src/addons/Portal/usePortalElement.js b/src/addons/Portal/usePortalElement.js
new file mode 100644
index 0000000000..7c5b8fd491
--- /dev/null
+++ b/src/addons/Portal/usePortalElement.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import ReactIs from 'react-is'
+
+import { useMergedRefs } from '../../lib'
+
+/**
+ * Assigns merged ref to an existing element is possible or wraps it with an additional "div".
+ *
+ * @param {React.ReactNode} node
+ * @param {React.Ref} userRef
+ */
+export default function usePortalElement(node, userRef) {
+  const ref = useMergedRefs(node.ref, userRef)
+
+  if (React.isValidElement(node)) {
+    if (ReactIs.isForwardRef(node)) {
+      return React.cloneElement(node, { ref })
+    }
+
+    if (typeof node.type === 'string') {
+      return React.cloneElement(node, { ref })
+    }
+  }
+
+  return (
+    <div data-suir-portal='true' ref={ref}>
+      {node}
+    </div>
+  )
+}
diff --git a/src/addons/Portal/utils/useTrigger.js b/src/addons/Portal/utils/useTrigger.js
new file mode 100644
index 0000000000..503e231e33
--- /dev/null
+++ b/src/addons/Portal/utils/useTrigger.js
@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { useMergedRefs } from '../../../lib'
+import validateTrigger from './validateTrigger'
+
+/**
+ * @param {React.ReactNode} trigger
+ * @param {React.Ref} triggerRef
+ */
+function useTrigger(trigger, triggerRef) {
+  const ref = useMergedRefs(trigger?.ref, triggerRef)
+
+  if (trigger) {
+    /* istanbul ignore else */
+    if (process.env.NODE_ENV !== 'production') {
+      validateTrigger(trigger)
+    }
+
+    return [ref, React.cloneElement(trigger, { ref })]
+  }
+
+  return [ref, null]
+}
+
+export default useTrigger
diff --git a/src/addons/Portal/utils/validateTrigger.js b/src/addons/Portal/utils/validateTrigger.js
index 52ed7ab5c5..5dcd4282c1 100644
--- a/src/addons/Portal/utils/validateTrigger.js
+++ b/src/addons/Portal/utils/validateTrigger.js
@@ -5,11 +5,9 @@ import * as ReactIs from 'react-is'
  * Asserts that a passed element can be used cloned a props will be applied properly.
  */
 export default function validateTrigger(element) {
-  if (element) {
-    React.Children.only(element)
+  React.Children.only(element)
 
-    if (ReactIs.isFragment(element)) {
-      throw new Error('An "React.Fragment" cannot be used as a `trigger`.')
-    }
+  if (ReactIs.isFragment(element)) {
+    throw new Error('An "React.Fragment" cannot be used as a `trigger`.')
   }
 }
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index 4edc9add52..0159880db2 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -9,17 +9,19 @@ import Checkbox from '../../modules/Checkbox'
  * @see Checkbox
  * @see Form
  */
-function Radio(props) {
+const Radio = React.forwardRef(function (props, ref) {
   const { slider, toggle, type } = props
+
   const rest = getUnhandledProps(Radio, props)
   // const ElementType = getElementType(Radio, props)
   // radio, slider, toggle are exclusive
   // use an undefined radio if slider or toggle are present
   const radio = !(slider || toggle) || undefined
 
-  return <Checkbox {...rest} type={type} radio={radio} slider={slider} toggle={toggle} />
-}
+  return <Checkbox {...rest} type={type} radio={radio} slider={slider} toggle={toggle} ref={ref} />
+})
 
+Radio.displayName = 'Radio'
 Radio.propTypes = {
   /** Format to emphasize the current selection state. */
   slider: Checkbox.propTypes.slider,
diff --git a/src/addons/Select/Select.js b/src/addons/Select/Select.js
index f6051dc2ca..184993b72f 100644
--- a/src/addons/Select/Select.js
+++ b/src/addons/Select/Select.js
@@ -8,10 +8,11 @@ import Dropdown from '../../modules/Dropdown'
  * @see Dropdown
  * @see Form
  */
-function Select(props) {
-  return <Dropdown {...props} selection />
-}
+const Select = React.forwardRef(function (props, ref) {
+  return <Dropdown {...props} selection ref={ref} />
+})
 
+Select.displayName = 'Select'
 Select.propTypes = {
   /** Array of Dropdown.Item props e.g. `{ text: '', value: '' }` */
   options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index 91e4bdbb88..d6b0537f02 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -1,50 +1,45 @@
-import { Ref } from '@fluentui/react-component-ref'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, createRef } from 'react'
+import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
 
 /**
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
-class TextArea extends Component {
-  ref = createRef()
+const TextArea = React.forwardRef(function (props, ref) {
+  const { rows, value } = props
+  const elementRef = useMergedRefs(ref, React.useRef())
 
-  focus = () => this.ref.current.focus()
+  const handleChange = (e) => {
+    const newValue = _.get(e, 'target.value')
 
-  handleChange = (e) => {
-    const value = _.get(e, 'target.value')
-
-    _.invoke(this.props, 'onChange', e, { ...this.props, value })
+    _.invoke(props, 'onChange', e, { ...props, value: newValue })
   }
 
-  handleInput = (e) => {
-    const value = _.get(e, 'target.value')
+  const handleInput = (e) => {
+    const newValue = _.get(e, 'target.value')
 
-    _.invoke(this.props, 'onInput', e, { ...this.props, value })
+    _.invoke(props, 'onInput', e, { ...props, value: newValue })
   }
 
-  render() {
-    const { rows, value } = this.props
-    const rest = getUnhandledProps(TextArea, this.props)
-    const ElementType = getElementType(TextArea, this.props)
-
-    return (
-      <Ref innerRef={this.ref}>
-        <ElementType
-          {...rest}
-          onChange={this.handleChange}
-          onInput={this.handleInput}
-          rows={rows}
-          value={value}
-        />
-      </Ref>
-    )
-  }
-}
-
+  const rest = getUnhandledProps(TextArea, props)
+  const ElementType = getElementType(TextArea, props)
+
+  return (
+    <ElementType
+      {...rest}
+      onChange={handleChange}
+      onInput={handleInput}
+      ref={elementRef}
+      rows={rows}
+      value={value}
+    />
+  )
+})
+
+TextArea.displayName = 'TextArea'
 TextArea.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js
index 9ab8d8b60d..37bce0ee52 100644
--- a/src/addons/TransitionablePortal/TransitionablePortal.js
+++ b/src/addons/TransitionablePortal/TransitionablePortal.js
@@ -1,113 +1,127 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import Portal from '../Portal'
 import Transition from '../../modules/Transition'
 import { TRANSITION_STATUS_ENTERING } from '../../modules/Transition/utils/computeStatuses'
-import { getUnhandledProps, makeDebugger } from '../../lib'
+import { getUnhandledProps, makeDebugger, useForceUpdate } from '../../lib'
 
 const debug = makeDebugger('transitionable_portal')
 
-/**
- * A sugar for `Portal` and `Transition`.
- * @see Portal
- * @see Transition
- */
-export default class TransitionablePortal extends Component {
-  state = {}
+function usePortalState(props) {
+  const portalOpen = React.useRef(false)
+  const forceUpdate = useForceUpdate()
 
-  // ----------------------------------------
-  // Lifecycle
-  // ----------------------------------------
+  const setPortalOpen = React.useCallback((value) => {
+    portalOpen.current = value
+    forceUpdate()
+  }, [])
 
-  static getDerivedStateFromProps(props, state) {
+  React.useEffect(() => {
+    if (!_.isUndefined(props.open)) {
+      portalOpen.current = props.open
+    }
+  }, [props.open])
+
+  if (_.isUndefined(props.open)) {
     // This is definitely a hack :(
     //
     // It's coupled with handlePortalClose() for force set the state of `portalOpen` omitting
     // props.open. It's related to implementation of the component itself as `onClose()` will be
     // called after a transition will end.
     // https://github.com/Semantic-Org/Semantic-UI-React/issues/2382
-    if (state.portalOpen === -1) {
-      return { portalOpen: false }
-    }
-
-    if (_.isUndefined(props.open)) {
-      return null
+    if (portalOpen.current === -1) {
+      return [false, setPortalOpen]
     }
 
-    return { portalOpen: props.open }
+    return [portalOpen.current, setPortalOpen]
   }
 
+  return [props.open, setPortalOpen]
+}
+
+/**
+ * A sugar for `Portal` and `Transition`.
+ * @see Portal
+ * @see Transition
+ */
+function TransitionablePortal(props) {
+  const { children, transition } = props
+
+  const [portalOpen, setPortalOpen] = usePortalState(props)
+  const [transitionVisible, setTransitionVisible] = React.useState(false)
+
+  const open = portalOpen || transitionVisible
+
   // ----------------------------------------
   // Callback handling
   // ----------------------------------------
 
-  handlePortalClose = () => {
+  const handlePortalClose = () => {
     debug('handlePortalClose()')
-
-    this.setState({ portalOpen: -1 })
+    setPortalOpen(-1)
   }
 
-  handlePortalOpen = () => {
+  const handlePortalOpen = () => {
     debug('handlePortalOpen()')
-
-    this.setState({ portalOpen: true })
+    setPortalOpen(true)
   }
 
-  handleTransitionHide = (nothing, data) => {
+  const handleTransitionHide = (nothing, data) => {
     debug('handleTransitionHide()')
-    const { portalOpen } = this.state
 
-    this.setState({ transitionVisible: false })
-    _.invoke(this.props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false })
-    _.invoke(this.props, 'onHide', null, { ...data, portalOpen, transitionVisible: false })
+    setTransitionVisible(false)
+    _.invoke(props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false })
+    _.invoke(props, 'onHide', null, { ...data, portalOpen, transitionVisible: false })
   }
 
-  handleTransitionStart = (nothing, data) => {
+  const handleTransitionStart = (nothing, data) => {
     debug('handleTransitionStart()')
-    const { portalOpen } = this.state
     const { status } = data
-    const transitionVisible = status === TRANSITION_STATUS_ENTERING
+    const nextTransitionVisible = status === TRANSITION_STATUS_ENTERING
 
-    _.invoke(this.props, 'onStart', null, { ...data, portalOpen, transitionVisible })
+    _.invoke(props, 'onStart', null, {
+      ...data,
+      portalOpen,
+      transitionVisible: nextTransitionVisible,
+    })
 
     // Heads up! TransitionablePortal fires onOpen callback on the start of transition animation
-    if (!transitionVisible) return
+    if (!nextTransitionVisible) {
+      return
+    }
 
-    this.setState({ transitionVisible })
-    _.invoke(this.props, 'onOpen', null, { ...data, transitionVisible, portalOpen: true })
+    setTransitionVisible(nextTransitionVisible)
+    _.invoke(props, 'onOpen', null, {
+      ...data,
+      transitionVisible: nextTransitionVisible,
+      portalOpen: true,
+    })
   }
 
   // ----------------------------------------
   // Render
   // ----------------------------------------
 
-  render() {
-    debug('render()', this.state)
-
-    const { children, transition } = this.props
-    const { portalOpen, transitionVisible } = this.state
-
-    const open = portalOpen || transitionVisible
-    const rest = getUnhandledProps(TransitionablePortal, this.props)
-
-    return (
-      <Portal {...rest} open={open} onOpen={this.handlePortalOpen} onClose={this.handlePortalClose}>
-        <Transition
-          {...transition}
-          transitionOnMount
-          onStart={this.handleTransitionStart}
-          onHide={this.handleTransitionHide}
-          visible={portalOpen}
-        >
-          {children}
-        </Transition>
-      </Portal>
-    )
-  }
+  const rest = getUnhandledProps(TransitionablePortal, props)
+
+  return (
+    <Portal {...rest} open={open} onOpen={handlePortalOpen} onClose={handlePortalClose}>
+      <Transition
+        {...transition}
+        transitionOnMount
+        onStart={handleTransitionStart}
+        onHide={handleTransitionHide}
+        visible={portalOpen}
+      >
+        {children}
+      </Transition>
+    </Portal>
+  )
 }
 
+TransitionablePortal.displayName = 'TransitionablePortal'
 TransitionablePortal.propTypes = {
   /** Primary content. */
   children: PropTypes.node.isRequired,
@@ -157,3 +171,5 @@ TransitionablePortal.defaultProps = {
     duration: 400,
   },
 }
+
+export default TransitionablePortal
diff --git a/src/behaviors/Visibility/Visibility.d.ts b/src/behaviors/Visibility/Visibility.d.ts
deleted file mode 100644
index f9f168e62a..0000000000
--- a/src/behaviors/Visibility/Visibility.d.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import * as React from 'react'
-
-export interface VisibilityProps extends StrictVisibilityProps {
-  [key: string]: any
-}
-
-export interface StrictVisibilityProps {
-  /** An element type to render as (string or function). */
-  as?: any
-
-  /** Primary content. */
-  children?: React.ReactNode
-
-  /** Context which sticky element should stick to. */
-  context?: Document | Window | HTMLElement
-
-  /**
-   * When set to true a callback will occur anytime an element passes a condition not just immediately after the
-   * threshold is met.
-   */
-  continuous?: boolean
-
-  /** Fires callbacks immediately after mount. */
-  fireOnMount?: boolean
-
-  /**
-   * Element's bottom edge has passed top of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onBottomPassed?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's bottom edge has not passed top of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onBottomPassedReverse?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's bottom edge has passed bottom of screen
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onBottomVisible?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's bottom edge has not passed bottom of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onBottomVisibleReverse?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Value that context should be adjusted in pixels. Useful for making content appear below content fixed to the
-   * page.
-   */
-  offset?: number | string | (number | string)[]
-
-  /** When set to false a callback will occur each time an element passes the threshold for a condition. */
-  once?: boolean
-
-  /** Element is not visible on the screen. */
-  onPassed?: VisibilityOnPassed
-
-  /**
-   * Any part of an element is visible on screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onPassing?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's top has not passed top of screen but bottom has.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onPassingReverse?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element is not visible on the screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onOffScreen?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element is visible on the screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onOnScreen?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's top edge has passed top of the screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onTopPassed?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's top edge has not passed top of the screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onTopPassedReverse?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's top edge has passed bottom of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onTopVisible?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's top edge has not passed bottom of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onTopVisibleReverse?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Element's top edge has passed bottom of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onUpdate?: (nothing: null, data: VisibilityEventData) => void
-
-  /**
-   * Allows to choose the mode of the position calculations:
-   * - `events` - (default) update and fire callbacks only on scroll/resize events
-   * - `repaint` - update and fire callbacks on browser repaint (animation frames)
-   */
-  updateOn?: 'events' | 'repaint'
-}
-
-export interface VisibilityCalculations {
-  bottomPassed: boolean
-  bottomVisible: boolean
-  direction: 'down' | 'up'
-  fits: boolean
-  height: number
-  passing: boolean
-  percentagePassed: number
-  pixelsPassed: number
-  offScreen: boolean
-  onScreen: boolean
-  topPassed: boolean
-  topVisible: boolean
-  width: number
-}
-
-export interface VisibilityEventData extends VisibilityProps {
-  calculations: VisibilityCalculations
-}
-
-export interface VisibilityOnPassed {
-  [key: string]: (nothing: null, data: VisibilityEventData) => void
-}
-
-declare const Visibility: React.ComponentClass<VisibilityProps>
-
-export default Visibility
diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
deleted file mode 100644
index e0c93b141c..0000000000
--- a/src/behaviors/Visibility/Visibility.js
+++ /dev/null
@@ -1,428 +0,0 @@
-import { Ref } from '@fluentui/react-component-ref'
-import _ from 'lodash'
-import PropTypes from 'prop-types'
-import React, { Component, createRef } from 'react'
-
-import {
-  eventStack,
-  getElementType,
-  getUnhandledProps,
-  normalizeOffset,
-  isBrowser,
-} from '../../lib'
-
-/**
- * Visibility provides a set of callbacks for when a content appears in the viewport.
- *
- * @deprecated This component is deprecated and will be removed in next major release.
- */
-export default class Visibility extends Component {
-  calculations = {
-    bottomPassed: false,
-    bottomVisible: false,
-    fits: false,
-    passing: false,
-    offScreen: false,
-    onScreen: false,
-    topPassed: false,
-    topVisible: false,
-  }
-  firedCallbacks = []
-  ref = createRef()
-
-  // ----------------------------------------
-  // Lifecycle
-  // ----------------------------------------
-
-  componentDidMount() {
-    this.mounted = true
-
-    if (!isBrowser()) return
-    const { context, fireOnMount, updateOn } = this.props
-
-    this.pageYOffset = this.getPageYOffset()
-    this.attachHandlers(context, updateOn)
-
-    if (fireOnMount) this.update()
-  }
-
-  componentDidUpdate(prevProps) {
-    const cleanHappened =
-      prevProps.continuous !== this.props.continuous ||
-      prevProps.once !== this.props.once ||
-      prevProps.updateOn !== this.props.updateOn
-
-    // Heads up! We should clean up array of happened callbacks, if values of these props are changed
-    if (cleanHappened) this.firedCallbacks = []
-
-    if (prevProps.context !== this.props.context || prevProps.updateOn !== this.props.updateOn) {
-      this.unattachHandlers(prevProps.context)
-      this.attachHandlers(this.props.context, this.props.updateOn)
-    }
-  }
-
-  componentWillUnmount() {
-    const { context } = this.props
-
-    this.unattachHandlers(context)
-    this.mounted = false
-  }
-
-  attachHandlers(context, updateOn) {
-    if (updateOn === 'events') {
-      if (context) {
-        eventStack.sub('resize', this.handleUpdate, { target: context })
-        eventStack.sub('scroll', this.handleUpdate, { target: context })
-      }
-
-      return
-    }
-
-    // Heads up!
-    // We will deal with `repaint` there
-    this.handleUpdate()
-  }
-
-  unattachHandlers(context) {
-    if (context) {
-      eventStack.unsub('resize', this.handleUpdate, { target: context })
-      eventStack.unsub('scroll', this.handleUpdate, { target: context })
-    }
-
-    if (this.frameId) cancelAnimationFrame(this.frameId)
-  }
-
-  // ----------------------------------------
-  // Callback handling
-  // ----------------------------------------
-
-  execute(callback, name) {
-    const { continuous } = this.props
-    if (!callback) return
-
-    // Heads up! When `continuous` is true, callback will be fired always
-    if (!continuous && _.includes(this.firedCallbacks, name)) return
-
-    callback(null, { ...this.props, calculations: this.calculations })
-    this.firedCallbacks.push(name)
-  }
-
-  fire = ({ callback, name }, value, reverse = false) => {
-    const { continuous, once } = this.props
-
-    // Heads up! For the execution is required:
-    // - current value correspond to the fired direction
-    // - `continuous` is true or calculation values are different
-    const matchesDirection = this.calculations[value] !== reverse
-    const executionPossible = continuous || this.calculations[value] !== this.oldCalculations[value]
-
-    if (matchesDirection && executionPossible) this.execute(callback, name)
-
-    // Heads up! We should remove callback from the happened when it's not `once`
-    if (!once) this.firedCallbacks = _.without(this.firedCallbacks, name)
-  }
-
-  fireOnPassed() {
-    const { percentagePassed, pixelsPassed } = this.calculations
-    const { onPassed } = this.props
-
-    _.forEach(onPassed, (callback, passed) => {
-      const pixelsValue = Number(passed)
-
-      if (pixelsValue && pixelsPassed >= pixelsValue) {
-        this.execute(callback, passed)
-        return
-      }
-
-      const matchPercentage = `${passed}`.match(/^(\d+)%$/)
-      if (!matchPercentage) return
-
-      const percentageValue = Number(matchPercentage[1]) / 100
-      if (percentagePassed >= percentageValue) this.execute(callback, passed)
-    })
-  }
-
-  handleUpdate = () => {
-    if (this.ticking) return
-
-    this.ticking = true
-    this.frameId = requestAnimationFrame(this.update)
-  }
-
-  update = () => {
-    if (!this.mounted) return
-
-    this.ticking = false
-
-    this.oldCalculations = this.calculations
-    this.calculations = this.computeCalculations()
-    this.pageYOffset = this.getPageYOffset()
-
-    const {
-      onBottomPassed,
-      onBottomPassedReverse,
-      onBottomVisible,
-      onBottomVisibleReverse,
-      onPassing,
-      onPassingReverse,
-      onTopPassed,
-      onTopPassedReverse,
-      onTopVisible,
-      onTopVisibleReverse,
-      onOffScreen,
-      onOnScreen,
-      updateOn,
-    } = this.props
-    const forward = {
-      bottomPassed: { callback: onBottomPassed, name: 'onBottomPassed' },
-      bottomVisible: { callback: onBottomVisible, name: 'onBottomVisible' },
-      passing: { callback: onPassing, name: 'onPassing' },
-      offScreen: { callback: onOffScreen, name: 'onOffScreen' },
-      onScreen: { callback: onOnScreen, name: 'onOnScreen' },
-      topPassed: { callback: onTopPassed, name: 'onTopPassed' },
-      topVisible: { callback: onTopVisible, name: 'onTopVisible' },
-    }
-
-    const reverse = {
-      bottomPassed: { callback: onBottomPassedReverse, name: 'onBottomPassedReverse' },
-      bottomVisible: { callback: onBottomVisibleReverse, name: 'onBottomVisibleReverse' },
-      passing: { callback: onPassingReverse, name: 'onPassingReverse' },
-      topPassed: { callback: onTopPassedReverse, name: 'onTopPassedReverse' },
-      topVisible: { callback: onTopVisibleReverse, name: 'onTopVisibleReverse' },
-    }
-
-    _.invoke(this.props, 'onUpdate', null, { ...this.props, calculations: this.calculations })
-    this.fireOnPassed()
-
-    // Heads up! Reverse callbacks should be fired first
-    _.forEach(reverse, (data, value) => this.fire(data, value, true))
-    _.forEach(forward, (data, value) => this.fire(data, value))
-
-    if (updateOn === 'repaint') this.handleUpdate()
-  }
-
-  // ----------------------------------------
-  // Helpers
-  // ----------------------------------------
-
-  computeCalculations() {
-    const { offset } = this.props
-    const { bottom, height, top, width } = this.ref.current.getBoundingClientRect()
-    const [topOffset, bottomOffset] = normalizeOffset(offset)
-
-    const newOffset = this.getPageYOffset()
-    const direction = newOffset > this.pageYOffset ? 'down' : 'up'
-    const topPassed = top < topOffset
-    const bottomPassed = bottom < bottomOffset
-
-    const pixelsPassed = bottomPassed ? 0 : Math.max(top * -1, 0)
-    const percentagePassed = pixelsPassed / height
-
-    const bottomVisible = bottom >= bottomOffset && bottom <= window.innerHeight
-    const topVisible = top >= topOffset && top <= window.innerHeight
-
-    const fits = topVisible && bottomVisible
-    const passing = topPassed && !bottomPassed
-
-    const onScreen = (topVisible || topPassed) && !bottomPassed
-    const offScreen = !onScreen
-
-    return {
-      bottomPassed,
-      bottomVisible,
-      direction,
-      fits,
-      height,
-      passing,
-      percentagePassed,
-      pixelsPassed,
-      offScreen,
-      onScreen,
-      topPassed,
-      topVisible,
-      width,
-    }
-  }
-
-  getPageYOffset() {
-    const { context } = this.props
-
-    if (context) {
-      // Heads up! `window` doesn't have `pageYOffset` property
-      return context === window ? window.pageYOffset : context.scrollTop
-    }
-
-    return 0
-  }
-
-  // ----------------------------------------
-  // Render
-  // ----------------------------------------
-
-  render() {
-    const { children } = this.props
-    const ElementType = getElementType(Visibility, this.props)
-    const rest = getUnhandledProps(Visibility, this.props)
-
-    return (
-      <Ref innerRef={this.ref}>
-        <ElementType {...rest}>{children}</ElementType>
-      </Ref>
-    )
-  }
-}
-
-Visibility.propTypes = {
-  /** An element type to render as (string or function). */
-  as: PropTypes.elementType,
-
-  /** Primary content. */
-  children: PropTypes.node,
-
-  /** Context which visibility should attach onscroll events. */
-  context: PropTypes.object,
-
-  /**
-   * When set to true a callback will occur anytime an element passes a condition not just immediately after the
-   * threshold is met.
-   */
-  continuous: PropTypes.bool,
-
-  /** Fires callbacks immediately after mount. */
-  fireOnMount: PropTypes.bool,
-
-  /**
-   * Element's bottom edge has passed top of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onBottomPassed: PropTypes.func,
-
-  /**
-   * Element's bottom edge has not passed top of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onBottomPassedReverse: PropTypes.func,
-
-  /**
-   * Element's bottom edge has passed bottom of screen
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onBottomVisible: PropTypes.func,
-
-  /**
-   * Element's bottom edge has not passed bottom of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onBottomVisibleReverse: PropTypes.func,
-
-  /**
-   * Value that context should be adjusted in pixels. Useful for making content appear below content fixed to the
-   * page.
-   */
-  offset: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  ]),
-
-  /** When set to false a callback will occur each time an element passes the threshold for a condition. */
-  once: PropTypes.bool,
-
-  /** Element is not visible on the screen. */
-  onPassed: PropTypes.object,
-
-  /**
-   * Any part of an element is visible on screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onPassing: PropTypes.func,
-
-  /**
-   * Element's top has not passed top of screen but bottom has.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onPassingReverse: PropTypes.func,
-
-  /**
-   * Element is not visible on the screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onOffScreen: PropTypes.func,
-
-  /**
-   * Element is visible on the screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onOnScreen: PropTypes.func,
-
-  /**
-   * Element's top edge has passed top of the screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onTopPassed: PropTypes.func,
-
-  /**
-   * Element's top edge has not passed top of the screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onTopPassedReverse: PropTypes.func,
-
-  /**
-   * Element's top edge has passed bottom of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onTopVisible: PropTypes.func,
-
-  /**
-   * Element's top edge has not passed bottom of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onTopVisibleReverse: PropTypes.func,
-
-  /**
-   * Element's top edge has passed bottom of screen.
-   *
-   * @param {null}
-   * @param {object} data - All props.
-   */
-  onUpdate: PropTypes.func,
-
-  /**
-   * Allows to choose the mode of the position calculations:
-   * - `events` - (default) update and fire callbacks only on scroll/resize events
-   * - `repaint` - update and fire callbacks on browser repaint (animation frames)
-   */
-  updateOn: PropTypes.oneOf(['events', 'repaint']),
-}
-
-Visibility.defaultProps = {
-  context: isBrowser() ? window : null,
-  continuous: false,
-  offset: [0, 0],
-  once: true,
-  updateOn: 'events',
-}
diff --git a/src/behaviors/Visibility/index.d.ts b/src/behaviors/Visibility/index.d.ts
deleted file mode 100644
index 1026545769..0000000000
--- a/src/behaviors/Visibility/index.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export {
-  default,
-  VisibilityCalculations,
-  VisibilityEventData,
-  VisibilityOnPassed,
-  VisibilityProps,
-  StrictVisibilityProps,
-} from './Visibility'
diff --git a/src/behaviors/Visibility/index.js b/src/behaviors/Visibility/index.js
deleted file mode 100644
index 0893be889f..0000000000
--- a/src/behaviors/Visibility/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Visibility'
diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index ec00735556..e638b16101 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -10,7 +10,7 @@ import BreadcrumbSection from './BreadcrumbSection'
 /**
  * A breadcrumb is used to show hierarchy between content.
  */
-function Breadcrumb(props) {
+const Breadcrumb = React.forwardRef(function (props, ref) {
   const { children, className, divider, icon, sections, size } = props
 
   const classes = cx('ui', size, 'breadcrumb', className)
@@ -19,7 +19,7 @@ function Breadcrumb(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
@@ -40,12 +40,13 @@ function Breadcrumb(props) {
   })
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childElements}
     </ElementType>
   )
-}
+})
 
+Breadcrumb.displayName = 'Breadcrumb'
 Breadcrumb.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index e6fbac1d8b..e91b5c0f81 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -15,7 +15,7 @@ import Icon from '../../elements/Icon'
 /**
  * A divider sub-component for Breadcrumb component.
  */
-function BreadcrumbDivider(props) {
+const BreadcrumbDivider = React.forwardRef(function (props, ref) {
   const { children, className, content, icon } = props
 
   const classes = cx('divider', className)
@@ -26,24 +26,26 @@ function BreadcrumbDivider(props) {
     return Icon.create(icon, {
       defaultProps: { ...rest, className: classes },
       autoGenerateKey: false,
+      ref,
     })
   }
 
   if (!_.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? '/' : children}
     </ElementType>
   )
-}
+})
 
+BreadcrumbDivider.displayName = 'BreadcrumbDivider'
 BreadcrumbDivider.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index 5d82510976..d8349a2ac8 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -10,35 +10,31 @@ import {
   getUnhandledProps,
   getElementType,
   useKeyOnly,
+  useEventCallback,
 } from '../../lib'
 
 /**
  * A section sub-component for Breadcrumb component.
  */
-export default class BreadcrumbSection extends Component {
-  computeElementType = () => {
-    const { link, onClick } = this.props
+const BreadcrumbSection = React.forwardRef(function (props, ref) {
+  const { active, children, className, content, href, link, onClick } = props
 
+  const classes = cx(useKeyOnly(active, 'active'), 'section', className)
+  const rest = getUnhandledProps(BreadcrumbSection, props)
+  const ElementType = getElementType(BreadcrumbSection, props, () => {
     if (link || onClick) return 'a'
-  }
+  })
 
-  handleClick = (e) => _.invoke(this.props, 'onClick', e, this.props)
+  const handleClick = useEventCallback((e) => _.invoke(props, 'onClick', e, props))
 
-  render() {
-    const { active, children, className, content, href } = this.props
-
-    const classes = cx(useKeyOnly(active, 'active'), 'section', className)
-    const rest = getUnhandledProps(BreadcrumbSection, this.props)
-    const ElementType = getElementType(BreadcrumbSection, this.props, this.computeElementType)
-
-    return (
-      <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
-        {childrenUtils.isNil(children) ? content : children}
-      </ElementType>
-    )
-  }
-}
+  return (
+    <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
+  )
+})
 
+BreadcrumbSection.displayName = 'BreadcrumbSection'
 BreadcrumbSection.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -75,3 +71,5 @@ BreadcrumbSection.create = createShorthandFactory(BreadcrumbSection, (content) =
   content,
   link: true,
 }))
+
+export default BreadcrumbSection
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index ef3c85718a..6c1facc274 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import { getElementType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
 import FormButton from './FormButton'
@@ -23,58 +23,55 @@ import FormTextArea from './FormTextArea'
  * @see Message
  * @see Radio
  * @see Select
- * @see Visibility
  */
-class Form extends Component {
-  handleSubmit = (e, ...args) => {
-    const { action } = this.props
-
+const Form = React.forwardRef(function (props, ref) {
+  const {
+    action,
+    children,
+    className,
+    error,
+    inverted,
+    loading,
+    reply,
+    size,
+    success,
+    unstackable,
+    warning,
+    widths,
+  } = props
+
+  const handleSubmit = (e, ...args) => {
     // Heads up! Third party libs can pass own data as first argument, we need to check that it has preventDefault()
     // method.
     if (typeof action !== 'string') _.invoke(e, 'preventDefault')
-    _.invoke(this.props, 'onSubmit', e, this.props, ...args)
+    _.invoke(props, 'onSubmit', e, props, ...args)
   }
 
-  render() {
-    const {
-      action,
-      children,
-      className,
-      error,
-      inverted,
-      loading,
-      reply,
-      size,
-      success,
-      unstackable,
-      warning,
-      widths,
-    } = this.props
-
-    const classes = cx(
-      'ui',
-      size,
-      useKeyOnly(error, 'error'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(loading, 'loading'),
-      useKeyOnly(reply, 'reply'),
-      useKeyOnly(success, 'success'),
-      useKeyOnly(unstackable, 'unstackable'),
-      useKeyOnly(warning, 'warning'),
-      useWidthProp(widths, null, true),
-      'form',
-      className,
-    )
-    const rest = getUnhandledProps(Form, this.props)
-    const ElementType = getElementType(Form, this.props)
-
-    return (
-      <ElementType {...rest} action={action} className={classes} onSubmit={this.handleSubmit}>
-        {children}
-      </ElementType>
-    )
-  }
-}
+  const classes = cx(
+    'ui',
+    size,
+    useKeyOnly(error, 'error'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(loading, 'loading'),
+    useKeyOnly(reply, 'reply'),
+    useKeyOnly(success, 'success'),
+    useKeyOnly(unstackable, 'unstackable'),
+    useKeyOnly(warning, 'warning'),
+    useWidthProp(widths, null, true),
+    'form',
+    className,
+  )
+  const rest = getUnhandledProps(Form, props)
+  const ElementType = getElementType(Form, props)
+
+  return (
+    <ElementType {...rest} action={action} className={classes} onSubmit={handleSubmit} ref={ref}>
+      {children}
+    </ElementType>
+  )
+})
+
+Form.displayName = 'Form'
 
 Form.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Form/FormButton.js b/src/collections/Form/FormButton.js
index 2ae1de7cf5..cf4a5f816f 100644
--- a/src/collections/Form/FormButton.js
+++ b/src/collections/Form/FormButton.js
@@ -10,13 +10,15 @@ import FormField from './FormField'
  * @see Button
  * @see Form
  */
-function FormButton(props) {
+const FormButton = React.forwardRef((props, ref) => {
   const { control } = props
   const rest = getUnhandledProps(FormButton, props)
   const ElementType = getElementType(FormButton, props)
 
-  return <ElementType {...rest} control={control} />
-}
+  return <ElementType {...rest} control={control} ref={ref} />
+})
+
+FormButton.displayName = 'FormButton'
 
 FormButton.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Form/FormCheckbox.js b/src/collections/Form/FormCheckbox.js
index 4f734c7aa9..f98dad56cc 100644
--- a/src/collections/Form/FormCheckbox.js
+++ b/src/collections/Form/FormCheckbox.js
@@ -10,13 +10,15 @@ import FormField from './FormField'
  * @see Checkbox
  * @see Form
  */
-function FormCheckbox(props) {
+const FormCheckbox = React.forwardRef((props, ref) => {
   const { control } = props
   const rest = getUnhandledProps(FormCheckbox, props)
   const ElementType = getElementType(FormCheckbox, props)
 
-  return <ElementType {...rest} control={control} />
-}
+  return <ElementType {...rest} control={control} ref={ref} />
+})
+
+FormCheckbox.displayName = 'FormCheckbox'
 
 FormCheckbox.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index 52e9648f31..aeeb745314 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -10,14 +10,15 @@ import FormField from './FormField'
  * @see Dropdown
  * @see Form
  */
-function FormDropdown(props) {
+const FormDropdown = React.forwardRef(function (props, ref) {
   const { control } = props
   const rest = getUnhandledProps(FormDropdown, props)
   const ElementType = getElementType(FormDropdown, props)
 
-  return <ElementType {...rest} control={control} />
-}
+  return <ElementType {...rest} control={control} ref={ref} />
+})
 
+FormDropdown.displayName = 'FormDropdown'
 FormDropdown.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index 9180b2d153..29d0448df2 100644
--- a/src/collections/Form/FormField.js
+++ b/src/collections/Form/FormField.js
@@ -26,9 +26,8 @@ import Radio from '../../addons/Radio'
  * @see Input
  * @see Radio
  * @see Select
- * @see Visibility
  */
-function FormField(props) {
+const FormField = React.forwardRef(function (props, ref) {
   const {
     children,
     className,
@@ -78,14 +77,14 @@ function FormField(props) {
   if (_.isNil(control)) {
     if (_.isNil(label)) {
       return (
-        <ElementType {...rest} className={classes} id={id}>
+        <ElementType {...rest} className={classes} id={id} ref={ref}>
           {childrenUtils.isNil(children) ? content : children}
         </ElementType>
       )
     }
 
     return (
-      <ElementType {...rest} className={classes} id={id}>
+      <ElementType {...rest} className={classes} id={id} ref={ref}>
         {errorLabelBefore}
         {createHTMLLabel(label, { autoGenerateKey: false })}
         {errorLabelAfter}
@@ -102,7 +101,7 @@ function FormField(props) {
     'aria-describedby': ariaDescribedBy,
     'aria-invalid': error ? true : undefined,
   }
-  const controlProps = { ...rest, content, children, disabled, required, type, id }
+  const controlProps = { ...rest, content, children, disabled, required, type, id, ref }
 
   // wrap HTML checkboxes/radios in the label
   if (control === 'input' && (type === 'checkbox' || type === 'radio')) {
@@ -143,7 +142,9 @@ function FormField(props) {
       {errorLabelAfter}
     </ElementType>
   )
-}
+})
+
+FormField.displayName = 'FormField'
 
 FormField.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index 335c1c2a4b..cf2e16df18 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -15,7 +15,7 @@ import {
  * A set of fields can appear grouped together.
  * @see Form
  */
-function FormGroup(props) {
+const FormGroup = React.forwardRef((props, ref) => {
   const { children, className, grouped, inline, unstackable, widths } = props
 
   const classes = cx(
@@ -30,11 +30,13 @@ function FormGroup(props) {
   const ElementType = getElementType(FormGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {children}
     </ElementType>
   )
-}
+})
+
+FormGroup.displayName = 'FormGroup'
 
 FormGroup.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index 472c02ce93..bd5468a81e 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -10,14 +10,15 @@ import FormField from './FormField'
  * @see Form
  * @see Input
  */
-function FormInput(props) {
+const FormInput = React.forwardRef(function (props, ref) {
   const { control } = props
   const rest = getUnhandledProps(FormInput, props)
   const ElementType = getElementType(FormInput, props)
 
-  return <ElementType {...rest} control={control} />
-}
+  return <ElementType {...rest} control={control} ref={ref} />
+})
 
+FormInput.displayName = 'FormInput'
 FormInput.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 5b77ecb404..82dd3bfc64 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -10,14 +10,15 @@ import FormField from './FormField'
  * @see Form
  * @see Radio
  */
-function FormRadio(props) {
+const FormRadio = React.forwardRef(function (props, ref) {
   const { control } = props
   const rest = getUnhandledProps(FormRadio, props)
   const ElementType = getElementType(FormRadio, props)
 
-  return <ElementType {...rest} control={control} />
-}
+  return <ElementType {...rest} control={control} ref={ref} />
+})
 
+FormRadio.displayName = 'FormRadio'
 FormRadio.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index d867140945..30c6d3f185 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -11,14 +11,15 @@ import FormField from './FormField'
  * @see Form
  * @see Select
  */
-function FormSelect(props) {
+const FormSelect = React.forwardRef(function (props, ref) {
   const { control, options } = props
   const rest = getUnhandledProps(FormSelect, props)
   const ElementType = getElementType(FormSelect, props)
 
-  return <ElementType {...rest} control={control} options={options} />
-}
+  return <ElementType {...rest} control={control} options={options} ref={ref} />
+})
 
+FormSelect.displayName = 'FormSelect'
 FormSelect.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index 6660b3344e..2395749970 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -10,14 +10,15 @@ import FormField from './FormField'
  * @see Form
  * @see TextArea
  */
-function FormTextArea(props) {
+const FormTextArea = React.forwardRef(function (props, ref) {
   const { control } = props
   const rest = getUnhandledProps(FormTextArea, props)
   const ElementType = getElementType(FormTextArea, props)
 
-  return <ElementType {...rest} control={control} />
-}
+  return <ElementType {...rest} control={control} ref={ref} />
+})
 
+FormTextArea.displayName = 'FormTextArea'
 FormTextArea.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index 6104c69811..7f856c5bdf 100644
--- a/src/collections/Grid/Grid.js
+++ b/src/collections/Grid/Grid.js
@@ -20,7 +20,7 @@ import GridRow from './GridRow'
 /**
  * A grid is used to harmonize negative space in a layout.
  */
-function Grid(props) {
+const Grid = React.forwardRef(function (props, ref) {
   const {
     celled,
     centered,
@@ -63,15 +63,16 @@ function Grid(props) {
   const ElementType = getElementType(Grid, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {children}
     </ElementType>
   )
-}
+})
 
 Grid.Column = GridColumn
 Grid.Row = GridRow
 
+Grid.displayName = 'Grid'
 Grid.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index b9b134bdc0..44d2e9be8a 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/src/collections/Grid/GridColumn.js
@@ -19,7 +19,7 @@ import {
 /**
  * A column sub-component for Grid.
  */
-function GridColumn(props) {
+const GridColumn = React.forwardRef(function (props, ref) {
   const {
     children,
     className,
@@ -57,12 +57,13 @@ function GridColumn(props) {
   const ElementType = getElementType(GridColumn, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {children}
     </ElementType>
   )
-}
+})
 
+GridColumn.displayName = 'GridColumn'
 GridColumn.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index bd81472bdf..b84de480bc 100644
--- a/src/collections/Grid/GridRow.js
+++ b/src/collections/Grid/GridRow.js
@@ -17,7 +17,7 @@ import {
 /**
  * A row sub-component for Grid.
  */
-function GridRow(props) {
+const GridRow = React.forwardRef(function (props, ref) {
   const {
     centered,
     children,
@@ -49,12 +49,13 @@ function GridRow(props) {
   const ElementType = getElementType(GridRow, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {children}
     </ElementType>
   )
-}
+})
 
+GridRow.displayName = 'GridRow'
 GridRow.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index d6662fa92d..5e2db94868 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  ModernAutoControlledComponent as Component,
   childrenUtils,
   customPropTypes,
   createShorthandFactory,
@@ -15,6 +14,7 @@ import {
   useKeyOrValueAndKey,
   useValueAndKey,
   useWidthProp,
+  useAutoControlledValue,
 } from '../../lib'
 import MenuHeader from './MenuHeader'
 import MenuItem from './MenuItem'
@@ -24,90 +24,95 @@ import MenuMenu from './MenuMenu'
  * A menu displays grouped navigation actions.
  * @see Dropdown
  */
-class Menu extends Component {
-  handleItemOverrides = (predefinedProps) => ({
-    onClick: (e, itemProps) => {
-      const { index } = itemProps
-
-      this.setState({ activeIndex: index })
-
-      _.invoke(predefinedProps, 'onClick', e, itemProps)
-      _.invoke(this.props, 'onItemClick', e, itemProps)
-    },
+const Menu = React.forwardRef(function (props, ref) {
+  const {
+    attached,
+    borderless,
+    children,
+    className,
+    color,
+    compact,
+    fixed,
+    floated,
+    fluid,
+    icon,
+    inverted,
+    items,
+    pagination,
+    pointing,
+    secondary,
+    size,
+    stackable,
+    tabular,
+    text,
+    vertical,
+    widths,
+  } = props
+  const [activeIndex, setActiveIndex] = useAutoControlledValue({
+    state: props.activeIndex,
+    defaultState: props.defaultActiveIndex,
+    initialState: -1,
   })
 
-  renderItems() {
-    const { items } = this.props
-    const { activeIndex } = this.state
-
-    return _.map(items, (item, index) =>
-      MenuItem.create(item, {
-        defaultProps: {
-          active: parseInt(activeIndex, 10) === index,
-          index,
-        },
-        overrideProps: this.handleItemOverrides,
-      }),
-    )
-  }
-
-  render() {
-    const {
-      attached,
-      borderless,
-      children,
-      className,
-      color,
-      compact,
-      fixed,
-      floated,
-      fluid,
-      icon,
-      inverted,
-      pagination,
-      pointing,
-      secondary,
-      size,
-      stackable,
-      tabular,
-      text,
-      vertical,
-      widths,
-    } = this.props
-    const classes = cx(
-      'ui',
-      color,
-      size,
-      useKeyOnly(borderless, 'borderless'),
-      useKeyOnly(compact, 'compact'),
-      useKeyOnly(fluid, 'fluid'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(pagination, 'pagination'),
-      useKeyOnly(pointing, 'pointing'),
-      useKeyOnly(secondary, 'secondary'),
-      useKeyOnly(stackable, 'stackable'),
-      useKeyOnly(text, 'text'),
-      useKeyOnly(vertical, 'vertical'),
-      useKeyOrValueAndKey(attached, 'attached'),
-      useKeyOrValueAndKey(floated, 'floated'),
-      useKeyOrValueAndKey(icon, 'icon'),
-      useKeyOrValueAndKey(tabular, 'tabular'),
-      useValueAndKey(fixed, 'fixed'),
-      useWidthProp(widths, 'item'),
-      className,
-      'menu',
-    )
-    const rest = getUnhandledProps(Menu, this.props)
-    const ElementType = getElementType(Menu, this.props)
-
+  const classes = cx(
+    'ui',
+    color,
+    size,
+    useKeyOnly(borderless, 'borderless'),
+    useKeyOnly(compact, 'compact'),
+    useKeyOnly(fluid, 'fluid'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(pagination, 'pagination'),
+    useKeyOnly(pointing, 'pointing'),
+    useKeyOnly(secondary, 'secondary'),
+    useKeyOnly(stackable, 'stackable'),
+    useKeyOnly(text, 'text'),
+    useKeyOnly(vertical, 'vertical'),
+    useKeyOrValueAndKey(attached, 'attached'),
+    useKeyOrValueAndKey(floated, 'floated'),
+    useKeyOrValueAndKey(icon, 'icon'),
+    useKeyOrValueAndKey(tabular, 'tabular'),
+    useValueAndKey(fixed, 'fixed'),
+    useWidthProp(widths, 'item'),
+    className,
+    'menu',
+  )
+  const rest = getUnhandledProps(Menu, props)
+  const ElementType = getElementType(Menu, props)
+
+  if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
-        {childrenUtils.isNil(children) ? this.renderItems() : children}
+      <ElementType {...rest} className={classes} ref={ref}>
+        {children}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} className={classes} ref={ref}>
+      {_.map(items, (item, index) =>
+        MenuItem.create(item, {
+          defaultProps: {
+            active: parseInt(activeIndex, 10) === index,
+            index,
+          },
+          overrideProps: (predefinedProps) => ({
+            onClick: (e, itemProps) => {
+              const itemIndex = itemProps.index
+
+              setActiveIndex(itemIndex)
+
+              _.invoke(predefinedProps, 'onClick', e, itemProps)
+              _.invoke(props, 'onItemClick', e, itemProps)
+            },
+          }),
+        }),
+      )}
+    </ElementType>
+  )
+})
+
+Menu.displayName = 'Menu'
 Menu.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -190,8 +195,6 @@ Menu.propTypes = {
   widths: PropTypes.oneOf(SUI.WIDTHS),
 }
 
-Menu.autoControlledProps = ['activeIndex']
-
 Menu.Header = MenuHeader
 Menu.Item = MenuItem
 Menu.Menu = MenuMenu
diff --git a/src/collections/Menu/MenuHeader.js b/src/collections/Menu/MenuHeader.js
index 136ffddbf1..9c0652d1dc 100644
--- a/src/collections/Menu/MenuHeader.js
+++ b/src/collections/Menu/MenuHeader.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A menu item may include a header or may itself be a header.
  */
-function MenuHeader(props) {
+const MenuHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(MenuHeader, props)
   const ElementType = getElementType(MenuHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+MenuHeader.displayName = 'MenuHeader'
 MenuHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 6026edd2fe..728a8ec13f 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -12,70 +12,70 @@ import {
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
+  useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
 /**
  * A menu can contain an item.
  */
-export default class MenuItem extends Component {
-  handleClick = (e) => {
-    const { disabled } = this.props
-
-    if (!disabled) _.invoke(this.props, 'onClick', e, this.props)
-  }
-
-  render() {
-    const {
-      active,
-      children,
-      className,
-      color,
-      content,
-      disabled,
-      fitted,
-      header,
-      icon,
-      link,
-      name,
-      onClick,
-      position,
-    } = this.props
-
-    const classes = cx(
-      color,
-      position,
-      useKeyOnly(active, 'active'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(icon === true || (icon && !(name || content)), 'icon'),
-      useKeyOnly(header, 'header'),
-      useKeyOnly(link, 'link'),
-      useKeyOrValueAndKey(fitted, 'fitted'),
-      'item',
-      className,
-    )
-    const ElementType = getElementType(MenuItem, this.props, () => {
-      if (onClick) return 'a'
-    })
-    const rest = getUnhandledProps(MenuItem, this.props)
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
+const MenuItem = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    children,
+    className,
+    color,
+    content,
+    disabled,
+    fitted,
+    header,
+    icon,
+    link,
+    name,
+    onClick,
+    position,
+  } = props
+
+  const classes = cx(
+    color,
+    position,
+    useKeyOnly(active, 'active'),
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(icon === true || (icon && !(name || content)), 'icon'),
+    useKeyOnly(header, 'header'),
+    useKeyOnly(link, 'link'),
+    useKeyOrValueAndKey(fitted, 'fitted'),
+    'item',
+    className,
+  )
+  const ElementType = getElementType(MenuItem, props, () => {
+    if (onClick) return 'a'
+  })
+  const rest = getUnhandledProps(MenuItem, props)
+
+  const handleClick = useEventCallback((e) => {
+    if (!disabled) {
+      _.invoke(props, 'onClick', e, props)
     }
+  })
 
+  if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes} onClick={this.handleClick}>
-        {Icon.create(icon, { autoGenerateKey: false })}
-        {childrenUtils.isNil(content) ? _.startCase(name) : content}
+      <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+        {children}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+      {Icon.create(icon, { autoGenerateKey: false })}
+      {childrenUtils.isNil(content) ? _.startCase(name) : content}
+    </ElementType>
+  )
+})
+
+MenuItem.displayName = 'MenuItem'
 MenuItem.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -130,3 +130,5 @@ MenuItem.propTypes = {
 }
 
 MenuItem.create = createShorthandFactory(MenuItem, (val) => ({ content: val, name: val }))
+
+export default MenuItem
diff --git a/src/collections/Menu/MenuMenu.js b/src/collections/Menu/MenuMenu.js
index 2a35683a6a..f87a8619cc 100644
--- a/src/collections/Menu/MenuMenu.js
+++ b/src/collections/Menu/MenuMenu.js
@@ -7,7 +7,7 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A menu can contain a sub menu.
  */
-function MenuMenu(props) {
+const MenuMenu = React.forwardRef(function (props, ref) {
   const { children, className, content, position } = props
 
   const classes = cx(position, 'menu', className)
@@ -15,12 +15,13 @@ function MenuMenu(props) {
   const ElementType = getElementType(MenuMenu, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+MenuMenu.displayName = 'MenuMenu'
 MenuMenu.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index 5b060cd0e1..68cfe3e3aa 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -12,6 +12,7 @@ import {
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
+  useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 import MessageContent from './MessageContent'
@@ -23,86 +24,82 @@ import MessageItem from './MessageItem'
  * A message displays information that explains nearby content.
  * @see Form
  */
-export default class Message extends Component {
-  handleDismiss = (e) => {
-    const { onDismiss } = this.props
-
-    if (onDismiss) onDismiss(e, this.props)
-  }
-
-  render() {
-    const {
-      attached,
-      children,
-      className,
-      color,
-      compact,
-      content,
-      error,
-      floating,
-      header,
-      hidden,
-      icon,
-      info,
-      list,
-      negative,
-      onDismiss,
-      positive,
-      size,
-      success,
-      visible,
-      warning,
-    } = this.props
-
-    const classes = cx(
-      'ui',
-      color,
-      size,
-      useKeyOnly(compact, 'compact'),
-      useKeyOnly(error, 'error'),
-      useKeyOnly(floating, 'floating'),
-      useKeyOnly(hidden, 'hidden'),
-      useKeyOnly(icon, 'icon'),
-      useKeyOnly(info, 'info'),
-      useKeyOnly(negative, 'negative'),
-      useKeyOnly(positive, 'positive'),
-      useKeyOnly(success, 'success'),
-      useKeyOnly(visible, 'visible'),
-      useKeyOnly(warning, 'warning'),
-      useKeyOrValueAndKey(attached, 'attached'),
-      'message',
-      className,
-    )
-
-    const dismissIcon = onDismiss && <Icon name='close' onClick={this.handleDismiss} />
-    const rest = getUnhandledProps(Message, this.props)
-    const ElementType = getElementType(Message, this.props)
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes}>
-          {dismissIcon}
-          {children}
-        </ElementType>
-      )
-    }
-
+const Message = React.forwardRef(function (props, ref) {
+  const {
+    attached,
+    children,
+    className,
+    color,
+    compact,
+    content,
+    error,
+    floating,
+    header,
+    hidden,
+    icon,
+    info,
+    list,
+    negative,
+    onDismiss,
+    positive,
+    size,
+    success,
+    visible,
+    warning,
+  } = props
+
+  const classes = cx(
+    'ui',
+    color,
+    size,
+    useKeyOnly(compact, 'compact'),
+    useKeyOnly(error, 'error'),
+    useKeyOnly(floating, 'floating'),
+    useKeyOnly(hidden, 'hidden'),
+    useKeyOnly(icon, 'icon'),
+    useKeyOnly(info, 'info'),
+    useKeyOnly(negative, 'negative'),
+    useKeyOnly(positive, 'positive'),
+    useKeyOnly(success, 'success'),
+    useKeyOnly(visible, 'visible'),
+    useKeyOnly(warning, 'warning'),
+    useKeyOrValueAndKey(attached, 'attached'),
+    'message',
+    className,
+  )
+  const rest = getUnhandledProps(Message, props)
+  const ElementType = getElementType(Message, props)
+
+  const handleDismiss = useEventCallback((e) => {
+    _.invoke(props, 'onDismiss', e, props)
+  })
+  const dismissIcon = onDismiss && <Icon name='close' onClick={handleDismiss} />
+
+  if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {dismissIcon}
-        {Icon.create(icon, { autoGenerateKey: false })}
-        {(!_.isNil(header) || !_.isNil(content) || !_.isNil(list)) && (
-          <MessageContent>
-            {MessageHeader.create(header, { autoGenerateKey: false })}
-            {MessageList.create(list, { autoGenerateKey: false })}
-            {createHTMLParagraph(content, { autoGenerateKey: false })}
-          </MessageContent>
-        )}
+        {children}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} className={classes} ref={ref}>
+      {dismissIcon}
+      {Icon.create(icon, { autoGenerateKey: false })}
+      {(!_.isNil(header) || !_.isNil(content) || !_.isNil(list)) && (
+        <MessageContent>
+          {MessageHeader.create(header, { autoGenerateKey: false })}
+          {MessageList.create(list, { autoGenerateKey: false })}
+          {createHTMLParagraph(content, { autoGenerateKey: false })}
+        </MessageContent>
+      )}
+    </ElementType>
+  )
+})
+
+Message.displayName = 'Message'
 Message.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -178,3 +175,5 @@ Message.Content = MessageContent
 Message.Header = MessageHeader
 Message.List = MessageList
 Message.Item = MessageItem
+
+export default Message
diff --git a/src/collections/Message/MessageContent.js b/src/collections/Message/MessageContent.js
index a60c076fcc..b6412b3d8b 100644
--- a/src/collections/Message/MessageContent.js
+++ b/src/collections/Message/MessageContent.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A message can contain a content.
  */
-function MessageContent(props) {
+const MessageContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageContent, props)
   const ElementType = getElementType(MessageContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+MessageContent.displayName = 'MessageContent'
 MessageContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Message/MessageHeader.js b/src/collections/Message/MessageHeader.js
index 41c37e013e..88536f4846 100644
--- a/src/collections/Message/MessageHeader.js
+++ b/src/collections/Message/MessageHeader.js
@@ -13,19 +13,21 @@ import {
 /**
  * A message can contain a header.
  */
-function MessageHeader(props) {
+const MessageHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(MessageHeader, props)
   const ElementType = getElementType(MessageHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+MessageHeader.displayName = 'MessageHeader'
 MessageHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index 7ace0df3ec..73cfe5af42 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -13,19 +13,21 @@ import {
 /**
  * A message list can contain an item.
  */
-function MessageItem(props) {
+const MessageItem = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageItem, props)
   const ElementType = getElementType(MessageItem, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+MessageItem.displayName = 'MessageItem'
 MessageItem.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index 923bda8785..7262f0ad58 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -15,19 +15,21 @@ import MessageItem from './MessageItem'
 /**
  * A message can contain a list of items.
  */
-function MessageList(props) {
+const MessageList = React.forwardRef(function (props, ref) {
   const { children, className, items } = props
+
   const classes = cx('list', className)
   const rest = getUnhandledProps(MessageList, props)
   const ElementType = getElementType(MessageList, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? _.map(items, MessageItem.create) : children}
     </ElementType>
   )
-}
+})
 
+MessageList.displayName = 'MessageList'
 MessageList.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index 3809dc48c5..d9bf410c1a 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -25,7 +25,7 @@ import TableRow from './TableRow'
 /**
  * A table displays a collections of data grouped into rows.
  */
-function Table(props) {
+const Table = React.forwardRef(function (props, ref) {
   const {
     attached,
     basic,
@@ -88,7 +88,7 @@ function Table(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
@@ -104,7 +104,7 @@ function Table(props) {
   )
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {headerElement}
       <TableBody>
         {renderBodyRow &&
@@ -113,8 +113,9 @@ function Table(props) {
       {footerRow && <TableFooter>{TableRow.create(footerRow)}</TableFooter>}
     </ElementType>
   )
-}
+})
 
+Table.displayName = 'Table'
 Table.defaultProps = {
   as: 'table',
 }
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index 258bd512e4..605512e7d4 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -4,19 +4,20 @@ import React from 'react'
 
 import { getElementType, getUnhandledProps } from '../../lib'
 
-function TableBody(props) {
+const TableBody = React.forwardRef(function (props, ref) {
   const { children, className } = props
   const classes = cx(className)
   const rest = getUnhandledProps(TableBody, props)
   const ElementType = getElementType(TableBody, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {children}
     </ElementType>
   )
-}
+})
 
+TableBody.displayName = 'TableBody'
 TableBody.defaultProps = {
   as: 'tbody',
 }
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index 848f36a4eb..dcb008c3d8 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -20,7 +20,7 @@ import Icon from '../../elements/Icon'
 /**
  * A table row can have cells.
  */
-function TableCell(props) {
+const TableCell = React.forwardRef(function (props, ref) {
   const {
     active,
     children,
@@ -60,24 +60,25 @@ function TableCell(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {Icon.create(icon)}
       {content}
     </ElementType>
   )
-}
+})
 
 TableCell.defaultProps = {
   as: 'td',
 }
 
+TableCell.displayName = 'TableCell'
 TableCell.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index 0f6d7e0989..c5ff0b8e6b 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -7,13 +7,14 @@ import TableHeader from './TableHeader'
 /**
  * A table can have a footer.
  */
-function TableFooter(props) {
+const TableFooter = React.forwardRef(function (props, ref) {
   const { as } = props
   const rest = getUnhandledProps(TableFooter, props)
 
-  return <TableHeader {...rest} as={as} />
-}
+  return <TableHeader {...rest} as={as} ref={ref} />
+})
 
+TableFooter.displayName = 'TableFooter'
 TableFooter.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index 7994531b6e..4c7f9fe284 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -13,23 +13,24 @@ import {
 /**
  * A table can have a header.
  */
-function TableHeader(props) {
+const TableHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, fullWidth } = props
   const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)
   const ElementType = getElementType(TableHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
 TableHeader.defaultProps = {
   as: 'thead',
 }
 
+TableHeader.displayName = 'TableHeader'
 TableHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index 7a2a1d2cb3..a4a23b2488 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -8,14 +8,15 @@ import TableCell from './TableCell'
 /**
  * A table can have a header cell.
  */
-function TableHeaderCell(props) {
+const TableHeaderCell = React.forwardRef(function (props, ref) {
   const { as, className, sorted } = props
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
   const rest = getUnhandledProps(TableHeaderCell, props)
 
-  return <TableCell {...rest} as={as} className={classes} />
-}
+  return <TableCell {...rest} as={as} className={classes} ref={ref} />
+})
 
+TableHeaderCell.displayName = 'TableHeaderCell'
 TableHeaderCell.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 9c9bb019d5..5e7e83d1d5 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -19,7 +19,7 @@ import TableCell from './TableCell'
 /**
  * A table can have rows.
  */
-function TableRow(props) {
+const TableRow = React.forwardRef(function (props, ref) {
   const {
     active,
     cellAs,
@@ -51,24 +51,25 @@ function TableRow(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {_.map(cells, (cell) => TableCell.create(cell, { defaultProps: { as: cellAs } }))}
     </ElementType>
   )
-}
+})
 
 TableRow.defaultProps = {
   as: 'tr',
   cellAs: 'td',
 }
 
+TableRow.displayName = 'TableRow'
 TableRow.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index 7518f559f0..f2fd188de6 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -1,8 +1,7 @@
-import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, createRef } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -14,6 +13,7 @@ import {
   useKeyOnly,
   useKeyOrValueAndKey,
   useValueAndKey,
+  useMergedRefs,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Label from '../Label/Label'
@@ -22,165 +22,176 @@ import ButtonGroup from './ButtonGroup'
 import ButtonOr from './ButtonOr'
 
 /**
- * A Button indicates a possible user action.
- * @see Form
- * @see Icon
- * @see Label
+ * @param {React.ElementType} ElementType
+ * @param {String} role
  */
-class Button extends Component {
-  ref = createRef()
-
-  computeButtonAriaRole(ElementType) {
-    const { role } = this.props
-
-    if (!_.isNil(role)) return role
-    if (ElementType !== 'button') return 'button'
+function computeButtonAriaRole(ElementType, role) {
+  if (!_.isNil(role)) {
+    return role
   }
 
-  computeElementType = () => {
-    const { attached, label } = this.props
+  if (ElementType !== 'button') {
+    return 'button'
+  }
+}
 
-    if (!_.isNil(attached) || !_.isNil(label)) return 'div'
+/**
+ * @param {React.ElementType} ElementType
+ * @param {Boolean} disabled
+ * @param {Number} tabIndex
+ */
+function computeTabIndex(ElementType, disabled, tabIndex) {
+  if (!_.isNil(tabIndex)) {
+    return tabIndex
+  }
+  if (disabled) {
+    return -1
+  }
+  if (ElementType === 'div') {
+    return 0
   }
+}
 
-  computeTabIndex = (ElementType) => {
-    const { disabled, tabIndex } = this.props
+function hasIconClass(props) {
+  const { children, content, icon, labelPosition } = props
 
-    if (!_.isNil(tabIndex)) return tabIndex
-    if (disabled) return -1
-    if (ElementType === 'div') return 0
+  if (icon === true) {
+    return true
   }
 
-  focus = (options) => _.invoke(this.ref.current, 'focus', options)
+  if (icon) {
+    return labelPosition || (childrenUtils.isNil(children) && _.isNil(content))
+  }
+}
 
-  handleClick = (e) => {
-    const { disabled } = this.props
+/**
+ * A Button indicates a possible user action.
+ * @see Form
+ * @see Icon
+ * @see Label
+ */
+const Button = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    animated,
+    attached,
+    basic,
+    children,
+    circular,
+    className,
+    color,
+    compact,
+    content,
+    disabled,
+    floated,
+    fluid,
+    icon,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    negative,
+    positive,
+    primary,
+    secondary,
+    size,
+    toggle,
+    type
+  } = props
+  const elementRef = useMergedRefs(ref, React.useRef())
+
+  const baseClasses = cx(
+    color,
+    size,
+    useKeyOnly(active, 'active'),
+    useKeyOnly(basic, 'basic'),
+    useKeyOnly(circular, 'circular'),
+    useKeyOnly(compact, 'compact'),
+    useKeyOnly(fluid, 'fluid'),
+    useKeyOnly(hasIconClass(props), 'icon'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(loading, 'loading'),
+    useKeyOnly(negative, 'negative'),
+    useKeyOnly(positive, 'positive'),
+    useKeyOnly(primary, 'primary'),
+    useKeyOnly(secondary, 'secondary'),
+    useKeyOnly(toggle, 'toggle'),
+    useKeyOrValueAndKey(animated, 'animated'),
+    useKeyOrValueAndKey(attached, 'attached'),
+  )
+  const labeledClasses = cx(useKeyOrValueAndKey(labelPosition || !!label, 'labeled'))
+  const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'), useValueAndKey(floated, 'floated'))
+
+  const rest = getUnhandledProps(Button, props)
+  const ElementType = getElementType(Button, props, () => {
+    if (!_.isNil(attached) || !_.isNil(label)) {
+      return 'div'
+    }
+  })
+  const tabIndex = computeTabIndex(ElementType, disabled, props.tabIndex)
 
+  const handleClick = (e) => {
     if (disabled) {
       e.preventDefault()
       return
     }
 
-    _.invoke(this.props, 'onClick', e, this.props)
-  }
-
-  hasIconClass = () => {
-    const { labelPosition, children, content, icon } = this.props
-
-    if (icon === true) return true
-    return icon && (labelPosition || (childrenUtils.isNil(children) && _.isNil(content)))
+    _.invoke(props, 'onClick', e, props)
   }
 
-  render() {
-    const {
-      active,
-      animated,
-      attached,
-      basic,
-      children,
-      circular,
-      className,
-      color,
-      compact,
-      content,
-      disabled,
-      floated,
-      fluid,
-      icon,
-      inverted,
-      label,
-      labelPosition,
-      loading,
-      negative,
-      positive,
-      primary,
-      secondary,
-      size,
-      toggle,
-      type,
-    } = this.props
-
-    const baseClasses = cx(
-      color,
-      size,
-      useKeyOnly(active, 'active'),
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(circular, 'circular'),
-      useKeyOnly(compact, 'compact'),
-      useKeyOnly(fluid, 'fluid'),
-      useKeyOnly(this.hasIconClass(), 'icon'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(loading, 'loading'),
-      useKeyOnly(negative, 'negative'),
-      useKeyOnly(positive, 'positive'),
-      useKeyOnly(primary, 'primary'),
-      useKeyOnly(secondary, 'secondary'),
-      useKeyOnly(toggle, 'toggle'),
-      useKeyOrValueAndKey(animated, 'animated'),
-      useKeyOrValueAndKey(attached, 'attached'),
-    )
-    const labeledClasses = cx(useKeyOrValueAndKey(labelPosition || !!label, 'labeled'))
-    const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'), useValueAndKey(floated, 'floated'))
-
-    const rest = getUnhandledProps(Button, this.props)
-    const ElementType = getElementType(Button, this.props, this.computeElementType)
-    const tabIndex = this.computeTabIndex(ElementType)
-
-    if (!_.isNil(label)) {
-      const buttonClasses = cx('ui', baseClasses, 'button', className)
-      const containerClasses = cx('ui', labeledClasses, 'button', className, wrapperClasses)
-      const labelElement = Label.create(label, {
-        defaultProps: {
-          basic: true,
-          pointing: labelPosition === 'left' ? 'right' : 'left',
-        },
-        autoGenerateKey: false,
-      })
-
-      return (
-        <ElementType {...rest} className={containerClasses} onClick={this.handleClick}>
-          {labelPosition === 'left' && labelElement}
-          <Ref innerRef={this.ref}>
-            <button
-              className={buttonClasses}
-              aria-pressed={toggle ? !!active : undefined}
-              disabled={disabled}
-              type={type}
-              tabIndex={tabIndex}
-            >
-              {Icon.create(icon, { autoGenerateKey: false })} {content}
-            </button>
-          </Ref>
-          {(labelPosition === 'right' || !labelPosition) && labelElement}
-        </ElementType>
-      )
-    }
-
-    const classes = cx('ui', baseClasses, wrapperClasses, labeledClasses, 'button', className)
-    const hasChildren = !childrenUtils.isNil(children)
-    const role = this.computeButtonAriaRole(ElementType)
+  if (!_.isNil(label)) {
+    const buttonClasses = cx('ui', baseClasses, 'button', className)
+    const containerClasses = cx('ui', labeledClasses, 'button', className, wrapperClasses)
+    const labelElement = Label.create(label, {
+      defaultProps: {
+        basic: true,
+        pointing: labelPosition === 'left' ? 'right' : 'left',
+      },
+      autoGenerateKey: false,
+    })
 
     return (
-      <Ref innerRef={this.ref}>
-        <ElementType
-          {...rest}
-          className={classes}
+      <ElementType {...rest} className={containerClasses} onClick={handleClick}>
+        {labelPosition === 'left' && labelElement}
+        <button
+          className={buttonClasses}
           aria-pressed={toggle ? !!active : undefined}
-          disabled={(disabled && ElementType === 'button') || undefined}
-          onClick={this.handleClick}
-          role={role}
-          type={type}
+          disabled={disabled}
           tabIndex={tabIndex}
+          type={type}
+          ref={elementRef}
         >
-          {hasChildren && children}
-          {!hasChildren && Icon.create(icon, { autoGenerateKey: false })}
-          {!hasChildren && content}
-        </ElementType>
-      </Ref>
+          {Icon.create(icon, { autoGenerateKey: false })} {content}
+        </button>
+        {(labelPosition === 'right' || !labelPosition) && labelElement}
+      </ElementType>
     )
   }
-}
 
+  const classes = cx('ui', baseClasses, wrapperClasses, labeledClasses, 'button', className)
+  const hasChildren = !childrenUtils.isNil(children)
+  const role = computeButtonAriaRole(ElementType, props.role)
+
+  return (
+    <ElementType
+      {...rest}
+      className={classes}
+      aria-pressed={toggle ? !!active : undefined}
+      disabled={(disabled && ElementType === 'button') || undefined}
+      onClick={handleClick}
+      role={role}
+      tabIndex={tabIndex}
+      type={type}
+      ref={elementRef}
+    >
+      {hasChildren && children}
+      {!hasChildren && Icon.create(icon, { autoGenerateKey: false })}
+      {!hasChildren && content}
+    </ElementType>
+  )
+})
+
+Button.displayName = 'Button'
 Button.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js
index 7622007fbe..af248b1022 100644
--- a/src/elements/Button/ButtonContent.js
+++ b/src/elements/Button/ButtonContent.js
@@ -13,8 +13,9 @@ import {
 /**
  * Used in some Button types, such as `animated`.
  */
-function ButtonContent(props) {
+const ButtonContent = React.forwardRef(function (props, ref) {
   const { children, className, content, hidden, visible } = props
+
   const classes = cx(
     useKeyOnly(visible, 'visible'),
     useKeyOnly(hidden, 'hidden'),
@@ -25,12 +26,13 @@ function ButtonContent(props) {
   const ElementType = getElementType(ButtonContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ButtonContent.displayName = 'ButtonContent'
 ButtonContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
index 06dfc61de9..79a1db17c5 100644
--- a/src/elements/Button/ButtonGroup.js
+++ b/src/elements/Button/ButtonGroup.js
@@ -19,7 +19,7 @@ import Button from './Button'
 /**
  * Buttons can be grouped.
  */
-function ButtonGroup(props) {
+const ButtonGroup = React.forwardRef(function (props, ref) {
   const {
     attached,
     basic,
@@ -71,19 +71,20 @@ function ButtonGroup(props) {
 
   if (_.isNil(buttons)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {childrenUtils.isNil(children) ? content : children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {_.map(buttons, (button) => Button.create(button))}
     </ElementType>
   )
-}
+})
 
+ButtonGroup.displayName = 'ButtonGroup'
 ButtonGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Button/ButtonOr.js b/src/elements/Button/ButtonOr.js
index 834d088549..89b05a80fa 100644
--- a/src/elements/Button/ButtonOr.js
+++ b/src/elements/Button/ButtonOr.js
@@ -7,15 +7,16 @@ import { getElementType, getUnhandledProps } from '../../lib'
 /**
  * Button groups can contain conditionals.
  */
-function ButtonOr(props) {
+const ButtonOr = React.forwardRef(function (props, ref) {
   const { className, text } = props
   const classes = cx('or', className)
   const rest = getUnhandledProps(ButtonOr, props)
   const ElementType = getElementType(ButtonOr, props)
 
-  return <ElementType {...rest} className={classes} data-text={text} />
-}
+  return <ElementType {...rest} className={classes} data-text={text} ref={ref} />
+})
 
+ButtonOr.displayName = 'ButtonOr'
 ButtonOr.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index 29cc74c778..ea9cafe64d 100644
--- a/src/elements/Container/Container.js
+++ b/src/elements/Container/Container.js
@@ -15,7 +15,7 @@ import {
 /**
  * A container limits content to a maximum width.
  */
-function Container(props) {
+const Container = React.forwardRef(function (props, ref) {
   const { children, className, content, fluid, text, textAlign } = props
   const classes = cx(
     'ui',
@@ -29,12 +29,13 @@ function Container(props) {
   const ElementType = getElementType(Container, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Container.displayName = 'Container'
 Container.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index b36c5325fc..2f2147c188 100644
--- a/src/elements/Divider/Divider.js
+++ b/src/elements/Divider/Divider.js
@@ -13,7 +13,7 @@ import {
 /**
  * A divider visually segments content into groups.
  */
-function Divider(props) {
+const Divider = React.forwardRef(function (props, ref) {
   const {
     children,
     className,
@@ -43,12 +43,13 @@ function Divider(props) {
   const ElementType = getElementType(Divider, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Divider.displayName = 'Divider'
 Divider.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Flag/Flag.js b/src/elements/Flag/Flag.js
index cae20263c9..1ad15a8aaa 100644
--- a/src/elements/Flag/Flag.js
+++ b/src/elements/Flag/Flag.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import React from 'react'
 
 import {
   createShorthandFactory,
@@ -509,17 +509,16 @@ export const names = [
 /**
  * A flag is is used to represent a political state.
  */
-class Flag extends PureComponent {
-  render() {
-    const { className, name } = this.props
-    const classes = cx(name, 'flag', className)
-    const rest = getUnhandledProps(Flag, this.props)
-    const ElementType = getElementType(Flag, this.props)
+const Flag = React.forwardRef(function (props, ref) {
+  const { className, name } = props
+  const classes = cx(name, 'flag', className)
+  const rest = getUnhandledProps(Flag, props)
+  const ElementType = getElementType(Flag, props)
 
-    return <ElementType {...rest} className={classes} />
-  }
-}
+  return <ElementType {...rest} className={classes} ref={ref} />
+})
 
+Flag.displayName = 'Flag'
 Flag.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -531,10 +530,13 @@ Flag.propTypes = {
   name: customPropTypes.suggest(names),
 }
 
-Flag.defaultProps = {
+// Heads up!
+// .create() factories should be defined on exported component to be visible as static properties
+const MemoFlag = React.memo(Flag)
+
+MemoFlag.create = createShorthandFactory(MemoFlag, (value) => ({ name: value }))
+MemoFlag.defaultProps = {
   as: 'i',
 }
 
-Flag.create = createShorthandFactory(Flag, (value) => ({ name: value }))
-
-export default Flag
+export default MemoFlag
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index fb5b69fbee..b25a7421df 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -23,7 +23,7 @@ import HeaderContent from './HeaderContent'
 /**
  * A header provides a short summary of content
  */
-function Header(props) {
+const Header = React.forwardRef(function (props, ref) {
   const {
     attached,
     block,
@@ -65,7 +65,7 @@ function Header(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
@@ -77,7 +77,7 @@ function Header(props) {
 
   if (iconElement || imageElement) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {iconElement || imageElement}
         {(content || subheaderElement) && (
           <HeaderContent>
@@ -90,13 +90,14 @@ function Header(props) {
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {content}
       {subheaderElement}
     </ElementType>
   )
-}
+})
 
+Header.displayName = 'Header'
 Header.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Header/HeaderContent.js b/src/elements/Header/HeaderContent.js
index 8ddd16edb4..b6dc8a1bf4 100644
--- a/src/elements/Header/HeaderContent.js
+++ b/src/elements/Header/HeaderContent.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * Header content wraps the main content when there is an adjacent Icon or Image.
  */
-function HeaderContent(props) {
+const HeaderContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(HeaderContent, props)
   const ElementType = getElementType(HeaderContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+HeaderContent.displayName = 'HeaderContent'
 HeaderContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 2ed4bbc6bd..3925146440 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/src/elements/Header/HeaderSubheader.js
@@ -13,19 +13,20 @@ import {
 /**
  * Headers may contain subheaders.
  */
-function HeaderSubheader(props) {
+const HeaderSubheader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('sub header', className)
   const rest = getUnhandledProps(HeaderSubheader, props)
   const ElementType = getElementType(HeaderSubheader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+HeaderSubheader.displayName = 'HeaderSubheader'
 HeaderSubheader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 71c2651ab1..1e180fcecd 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import React from 'react'
 
 import {
   createShorthandFactory,
@@ -9,88 +9,89 @@ import {
   getElementType,
   getUnhandledProps,
   SUI,
+  useEventCallback,
   useKeyOnly,
   useKeyOrValueAndKey,
   useValueAndKey,
 } from '../../lib'
 import IconGroup from './IconGroup'
 
-/**
- * An icon is a glyph used to represent something else.
- * @see Image
- */
-class Icon extends PureComponent {
-  getIconAriaOptions() {
-    const ariaOptions = {}
-    const { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = this.props
-
-    if (_.isNil(ariaLabel)) {
-      ariaOptions['aria-hidden'] = 'true'
-    } else {
-      ariaOptions['aria-label'] = ariaLabel
-    }
+function getAriaProps(props) {
+  const ariaOptions = {}
+  const { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = props
 
-    if (!_.isNil(ariaHidden)) {
-      ariaOptions['aria-hidden'] = ariaHidden
-    }
+  if (_.isNil(ariaLabel)) {
+    ariaOptions['aria-hidden'] = 'true'
+  } else {
+    ariaOptions['aria-label'] = ariaLabel
+  }
 
-    return ariaOptions
+  if (!_.isNil(ariaHidden)) {
+    ariaOptions['aria-hidden'] = ariaHidden
   }
 
-  handleClick = (e) => {
-    const { disabled } = this.props
+  return ariaOptions
+}
 
+/**
+ * An icon is a glyph used to represent something else.
+ * @see Image
+ */
+const Icon = React.forwardRef(function (props, ref) {
+  const {
+    bordered,
+    circular,
+    className,
+    color,
+    corner,
+    disabled,
+    fitted,
+    flipped,
+    inverted,
+    link,
+    loading,
+    name,
+    rotated,
+    size,
+  } = props
+
+  const classes = cx(
+    color,
+    name,
+    size,
+    useKeyOnly(bordered, 'bordered'),
+    useKeyOnly(circular, 'circular'),
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(fitted, 'fitted'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(link, 'link'),
+    useKeyOnly(loading, 'loading'),
+    useKeyOrValueAndKey(corner, 'corner'),
+    useValueAndKey(flipped, 'flipped'),
+    useValueAndKey(rotated, 'rotated'),
+    'icon',
+    className,
+  )
+
+  const rest = getUnhandledProps(Icon, props)
+  const ElementType = getElementType(Icon, props)
+  const ariaProps = getAriaProps(props)
+
+  const handleClick = useEventCallback((e) => {
     if (disabled) {
       e.preventDefault()
       return
     }
 
-    _.invoke(this.props, 'onClick', e, this.props)
-  }
+    _.invoke(props, 'onClick', e, props)
+  })
 
-  render() {
-    const {
-      bordered,
-      circular,
-      className,
-      color,
-      corner,
-      disabled,
-      fitted,
-      flipped,
-      inverted,
-      link,
-      loading,
-      name,
-      rotated,
-      size,
-    } = this.props
-
-    const classes = cx(
-      color,
-      name,
-      size,
-      useKeyOnly(bordered, 'bordered'),
-      useKeyOnly(circular, 'circular'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(fitted, 'fitted'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(link, 'link'),
-      useKeyOnly(loading, 'loading'),
-      useKeyOrValueAndKey(corner, 'corner'),
-      useValueAndKey(flipped, 'flipped'),
-      useValueAndKey(rotated, 'rotated'),
-      'icon',
-      className,
-    )
-    const rest = getUnhandledProps(Icon, this.props)
-    const ElementType = getElementType(Icon, this.props)
-    const ariaOptions = this.getIconAriaOptions()
-
-    return <ElementType {...rest} {...ariaOptions} className={classes} onClick={this.handleClick} />
-  }
-}
+  return (
+    <ElementType {...rest} {...ariaProps} className={classes} onClick={handleClick} ref={ref} />
+  )
+})
 
+Icon.displayName = 'Icon'
 Icon.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -147,12 +148,15 @@ Icon.propTypes = {
   'aria-label': PropTypes.string,
 }
 
-Icon.defaultProps = {
-  as: 'i',
-}
+// Heads up!
+// .create() factories should be defined on exported component to be visible as static properties
+const MemoIcon = React.memo(Icon)
 
-Icon.Group = IconGroup
+MemoIcon.Group = IconGroup
+MemoIcon.create = createShorthandFactory(MemoIcon, (value) => ({ name: value }))
 
-Icon.create = createShorthandFactory(Icon, (value) => ({ name: value }))
+MemoIcon.defaultProps = {
+  as: 'i',
+}
 
-export default Icon
+export default MemoIcon
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 934381c432..2c17cfbf36 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -8,19 +8,21 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI
 /**
  * Several icons can be used together as a group.
  */
-function IconGroup(props) {
+const IconGroup = React.forwardRef(function (props, ref) {
   const { children, className, content, size } = props
+
   const classes = cx(size, 'icons', className)
   const rest = getUnhandledProps(IconGroup, props)
   const ElementType = getElementType(IconGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+IconGroup.displayName = 'IconGroup'
 IconGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index 45d7b17410..c72c22ff79 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -25,7 +25,7 @@ import ImageGroup from './ImageGroup'
  * An image is a graphic representation of something.
  * @see Icon
  */
-function Image(props) {
+const Image = React.forwardRef(function (props, ref) {
   const {
     avatar,
     bordered,
@@ -68,8 +68,10 @@ function Image(props) {
     'image',
     className,
   )
+
   const rest = getUnhandledProps(Image, props)
   const [imgTagProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
+
   const ElementType = getElementType(Image, props, () => {
     if (
       !_.isNil(dimmer) ||
@@ -83,33 +85,36 @@ function Image(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
   }
 
   if (ElementType === 'img') {
-    return <ElementType {...rootProps} {...imgTagProps} className={classes} />
+    return <ElementType {...rootProps} {...imgTagProps} className={classes} ref={ref} />
   }
+
   return (
     <ElementType {...rootProps} className={classes} href={href}>
       {Dimmer.create(dimmer, { autoGenerateKey: false })}
       {Label.create(label, { autoGenerateKey: false })}
-      <img {...imgTagProps} />
+
+      <img {...imgTagProps} ref={ref} />
     </ElementType>
   )
-}
+})
 
 Image.Group = ImageGroup
 
+Image.displayName = 'Image'
 Image.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Image/ImageGroup.js b/src/elements/Image/ImageGroup.js
index 8f81a54c2c..8ac80b9221 100644
--- a/src/elements/Image/ImageGroup.js
+++ b/src/elements/Image/ImageGroup.js
@@ -7,19 +7,21 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI
 /**
  * A group of images.
  */
-function ImageGroup(props) {
+const ImageGroup = React.forwardRef(function (props, ref) {
   const { children, className, content, size } = props
+
   const classes = cx('ui', size, className, 'images')
   const rest = getUnhandledProps(ImageGroup, props)
   const ElementType = getElementType(ImageGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ImageGroup.displayName = 'ImageGroup'
 ImageGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 6892f09140..7f830a4a65 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -1,8 +1,7 @@
-import { handleRef } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Children, cloneElement, Component, createRef } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -14,6 +13,7 @@ import {
   partitionHTMLProps,
   useKeyOnly,
   useValueAndKey,
+  setRef,
 } from '../../lib'
 import Button from '../Button'
 import Icon from '../Icon'
@@ -26,146 +26,144 @@ import Label from '../Label'
  * @see Icon
  * @see Label
  */
-class Input extends Component {
-  inputRef = createRef()
-
-  computeIcon = () => {
-    const { loading, icon } = this.props
+const Input = React.forwardRef(function (props, ref) {
+  const {
+    action,
+    actionPosition,
+    children,
+    className,
+    disabled,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    input,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent,
+    type,
+  } = props
+
+  const computeIcon = () => {
+    if (!_.isNil(icon)) {
+      return icon
+    }
 
-    if (!_.isNil(icon)) return icon
-    if (loading) return 'spinner'
+    if (loading) {
+      return 'spinner'
+    }
   }
 
-  computeTabIndex = () => {
-    const { disabled, tabIndex } = this.props
+  const computeTabIndex = () => {
+    if (!_.isNil(tabIndex)) {
+      return tabIndex
+    }
 
-    if (!_.isNil(tabIndex)) return tabIndex
-    if (disabled) return -1
+    if (disabled) {
+      return -1
+    }
   }
 
-  focus = (options) => this.inputRef.current.focus(options)
+  const handleChange = (e) => {
+    const newValue = _.get(e, 'target.value')
 
-  select = () => this.inputRef.current.select()
-
-  handleChange = (e) => {
-    const value = _.get(e, 'target.value')
-
-    _.invoke(this.props, 'onChange', e, { ...this.props, value })
+    _.invoke(props, 'onChange', e, { ...props, value: newValue })
   }
 
-  handleChildOverrides = (child, defaultProps) => ({
-    ...defaultProps,
-    ...child.props,
-    ref: (c) => {
-      handleRef(child.ref, c)
-      this.inputRef.current = c
-    },
-  })
-
-  partitionProps = () => {
-    const { disabled, type } = this.props
-
-    const tabIndex = this.computeTabIndex()
-    const unhandled = getUnhandledProps(Input, this.props)
-    const [htmlInputProps, rest] = partitionHTMLProps(unhandled)
+  const partitionProps = () => {
+    const unhandledProps = getUnhandledProps(Input, props)
+    const [htmlInputProps, rest] = partitionHTMLProps(unhandledProps)
 
     return [
       {
         ...htmlInputProps,
         disabled,
         type,
-        tabIndex,
-        onChange: this.handleChange,
-        ref: this.inputRef,
+        tabIndex: computeTabIndex(),
+        onChange: handleChange,
+        ref,
       },
       rest,
     ]
   }
 
-  render() {
-    const {
-      action,
-      actionPosition,
-      children,
-      className,
-      disabled,
-      error,
-      fluid,
-      focus,
-      icon,
-      iconPosition,
-      input,
-      inverted,
-      label,
-      labelPosition,
-      loading,
-      size,
-      transparent,
-      type,
-    } = this.props
-
-    const classes = cx(
-      'ui',
-      size,
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(error, 'error'),
-      useKeyOnly(fluid, 'fluid'),
-      useKeyOnly(focus, 'focus'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(loading, 'loading'),
-      useKeyOnly(transparent, 'transparent'),
-      useValueAndKey(actionPosition, 'action') || useKeyOnly(action, 'action'),
-      useValueAndKey(iconPosition, 'icon') || useKeyOnly(icon || loading, 'icon'),
-      useValueAndKey(labelPosition, 'labeled') || useKeyOnly(label, 'labeled'),
-      'input',
-      className,
-    )
-    const ElementType = getElementType(Input, this.props)
-    const [htmlInputProps, rest] = this.partitionProps()
-
-    // Render with children
-    // ----------------------------------------
-    if (!childrenUtils.isNil(children)) {
-      // add htmlInputProps to the `<input />` child
-      const childElements = _.map(Children.toArray(children), (child) => {
-        if (child.type !== 'input') return child
-        return cloneElement(child, this.handleChildOverrides(child, htmlInputProps))
-      })
-
-      return (
-        <ElementType {...rest} className={classes}>
-          {childElements}
-        </ElementType>
-      )
-    }
-
-    // Render Shorthand
-    // ----------------------------------------
-    const actionElement = Button.create(action, { autoGenerateKey: false })
-    const labelElement = Label.create(label, {
-      defaultProps: {
-        className: cx(
-          'label',
-          // add 'left|right corner'
-          _.includes(labelPosition, 'corner') && labelPosition,
-        ),
-      },
-      autoGenerateKey: false,
+  const classes = cx(
+    'ui',
+    size,
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(error, 'error'),
+    useKeyOnly(fluid, 'fluid'),
+    useKeyOnly(focus, 'focus'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(loading, 'loading'),
+    useKeyOnly(transparent, 'transparent'),
+    useValueAndKey(actionPosition, 'action') || useKeyOnly(action, 'action'),
+    useValueAndKey(iconPosition, 'icon') || useKeyOnly(icon || loading, 'icon'),
+    useValueAndKey(labelPosition, 'labeled') || useKeyOnly(label, 'labeled'),
+    'input',
+    className,
+  )
+  const ElementType = getElementType(Input, props)
+  const [htmlInputProps, rest] = partitionProps()
+
+  // Render with children
+  // ----------------------------------------
+  if (!childrenUtils.isNil(children)) {
+    // add htmlInputProps to the `<input />` child
+    const childElements = _.map(React.Children.toArray(children), (child) => {
+      if (child.type === 'input') {
+        return React.cloneElement(child, {
+          ...htmlInputProps,
+          ...child.props,
+          ref: (c) => {
+            setRef(child.ref, c)
+            setRef(ref, c)
+          },
+        })
+      }
+
+      return child
     })
 
     return (
       <ElementType {...rest} className={classes}>
-        {actionPosition === 'left' && actionElement}
-        {labelPosition !== 'right' && labelElement}
-        {createHTMLInput(input || type, { defaultProps: htmlInputProps, autoGenerateKey: false })}
-        {Icon.create(this.computeIcon(), { autoGenerateKey: false })}
-        {actionPosition !== 'left' && actionElement}
-        {labelPosition === 'right' && labelElement}
+        {childElements}
       </ElementType>
     )
   }
-}
 
+  // Render Shorthand
+  // ----------------------------------------
+  const actionElement = Button.create(action, { autoGenerateKey: false })
+  const labelElement = Label.create(label, {
+    defaultProps: {
+      className: cx(
+        'label',
+        // add 'left|right corner'
+        _.includes(labelPosition, 'corner') && labelPosition,
+      ),
+    },
+    autoGenerateKey: false,
+  })
+
+  return (
+    <ElementType {...rest} className={classes}>
+      {actionPosition === 'left' && actionElement}
+      {labelPosition !== 'right' && labelElement}
+      {createHTMLInput(input || type, { defaultProps: htmlInputProps, autoGenerateKey: false })}
+      {Icon.create(computeIcon(), { autoGenerateKey: false })}
+      {actionPosition !== 'left' && actionElement}
+      {labelPosition === 'right' && labelElement}
+    </ElementType>
+  )
+})
+
+Input.displayName = 'Input'
 Input.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index 1dedfffa50..30abb13cde 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -13,6 +13,7 @@ import {
   useKeyOnly,
   useKeyOrValueAndKey,
   useValueAndKey,
+  useEventCallback,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Image from '../Image/Image'
@@ -22,100 +23,95 @@ import LabelGroup from './LabelGroup'
 /**
  * A label displays content classification.
  */
-export default class Label extends Component {
-  handleClick = (e) => {
-    const { onClick } = this.props
-
-    if (onClick) onClick(e, this.props)
-  }
-
-  handleIconOverrides = (predefinedProps) => ({
-    onClick: (e) => {
-      _.invoke(predefinedProps, 'onClick', e)
-      _.invoke(this.props, 'onRemove', e, this.props)
-    },
+const Label = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    attached,
+    basic,
+    children,
+    circular,
+    className,
+    color,
+    content,
+    corner,
+    detail,
+    empty,
+    floating,
+    horizontal,
+    icon,
+    image,
+    onRemove,
+    pointing,
+    prompt,
+    removeIcon,
+    ribbon,
+    size,
+    tag,
+  } = props
+
+  const pointingClass =
+    (pointing === true && 'pointing') ||
+    ((pointing === 'left' || pointing === 'right') && `${pointing} pointing`) ||
+    ((pointing === 'above' || pointing === 'below') && `pointing ${pointing}`)
+
+  const classes = cx(
+    'ui',
+    color,
+    pointingClass,
+    size,
+    useKeyOnly(active, 'active'),
+    useKeyOnly(basic, 'basic'),
+    useKeyOnly(circular, 'circular'),
+    useKeyOnly(empty, 'empty'),
+    useKeyOnly(floating, 'floating'),
+    useKeyOnly(horizontal, 'horizontal'),
+    useKeyOnly(image === true, 'image'),
+    useKeyOnly(prompt, 'prompt'),
+    useKeyOnly(tag, 'tag'),
+    useKeyOrValueAndKey(corner, 'corner'),
+    useKeyOrValueAndKey(ribbon, 'ribbon'),
+    useValueAndKey(attached, 'attached'),
+    'label',
+    className,
+  )
+  const rest = getUnhandledProps(Label, props)
+  const ElementType = getElementType(Label, props)
+
+  const handleClick = useEventCallback((e) => {
+    _.invoke(props, 'onClick', e, props)
   })
 
-  render() {
-    const {
-      active,
-      attached,
-      basic,
-      children,
-      circular,
-      className,
-      color,
-      content,
-      corner,
-      detail,
-      empty,
-      floating,
-      horizontal,
-      icon,
-      image,
-      onRemove,
-      pointing,
-      prompt,
-      removeIcon,
-      ribbon,
-      size,
-      tag,
-    } = this.props
-
-    const pointingClass =
-      (pointing === true && 'pointing') ||
-      ((pointing === 'left' || pointing === 'right') && `${pointing} pointing`) ||
-      ((pointing === 'above' || pointing === 'below') && `pointing ${pointing}`)
-
-    const classes = cx(
-      'ui',
-      color,
-      pointingClass,
-      size,
-      useKeyOnly(active, 'active'),
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(circular, 'circular'),
-      useKeyOnly(empty, 'empty'),
-      useKeyOnly(floating, 'floating'),
-      useKeyOnly(horizontal, 'horizontal'),
-      useKeyOnly(image === true, 'image'),
-      useKeyOnly(prompt, 'prompt'),
-      useKeyOnly(tag, 'tag'),
-      useKeyOrValueAndKey(corner, 'corner'),
-      useKeyOrValueAndKey(ribbon, 'ribbon'),
-      useValueAndKey(attached, 'attached'),
-      'label',
-      className,
-    )
-    const rest = getUnhandledProps(Label, this.props)
-    const ElementType = getElementType(Label, this.props)
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
-    }
-
-    const removeIconShorthand = _.isUndefined(removeIcon) ? 'delete' : removeIcon
-
+  if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType className={classes} onClick={this.handleClick} {...rest}>
-        {Icon.create(icon, { autoGenerateKey: false })}
-        {typeof image !== 'boolean' && Image.create(image, { autoGenerateKey: false })}
-        {content}
-        {LabelDetail.create(detail, { autoGenerateKey: false })}
-        {onRemove &&
-          Icon.create(removeIconShorthand, {
-            autoGenerateKey: false,
-            overrideProps: this.handleIconOverrides,
-          })}
+      <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+        {children}
       </ElementType>
     )
   }
-}
 
+  const removeIconShorthand = _.isUndefined(removeIcon) ? 'delete' : removeIcon
+
+  return (
+    <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+      {Icon.create(icon, { autoGenerateKey: false })}
+      {typeof image !== 'boolean' && Image.create(image, { autoGenerateKey: false })}
+      {content}
+      {LabelDetail.create(detail, { autoGenerateKey: false })}
+      {onRemove &&
+        Icon.create(removeIconShorthand, {
+          autoGenerateKey: false,
+          overrideProps: (predefinedProps) => ({
+            onClick: (e) => {
+              _.invoke(predefinedProps, 'onClick', e)
+              _.invoke(props, 'onRemove', e, props)
+            },
+          }),
+        })}
+    </ElementType>
+  )
+})
+
+Label.displayName = 'Label'
 Label.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -214,3 +210,5 @@ Label.Detail = LabelDetail
 Label.Group = LabelGroup
 
 Label.create = createShorthandFactory(Label, (value) => ({ content: value }))
+
+export default Label
diff --git a/src/elements/Label/LabelDetail.js b/src/elements/Label/LabelDetail.js
index 67c10fb714..6da4de001a 100644
--- a/src/elements/Label/LabelDetail.js
+++ b/src/elements/Label/LabelDetail.js
@@ -10,19 +10,21 @@ import {
   getUnhandledProps,
 } from '../../lib'
 
-function LabelDetail(props) {
+const LabelDetail = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('detail', className)
   const rest = getUnhandledProps(LabelDetail, props)
   const ElementType = getElementType(LabelDetail, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+LabelDetail.displayName = 'LabelDetail'
 LabelDetail.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Label/LabelGroup.js b/src/elements/Label/LabelGroup.js
index 795707aee0..01cf51dc5d 100644
--- a/src/elements/Label/LabelGroup.js
+++ b/src/elements/Label/LabelGroup.js
@@ -14,7 +14,7 @@ import {
 /**
  * A label can be grouped.
  */
-function LabelGroup(props) {
+const LabelGroup = React.forwardRef(function (props, ref) {
   const { children, circular, className, color, content, size, tag } = props
 
   const classes = cx(
@@ -30,12 +30,13 @@ function LabelGroup(props) {
   const ElementType = getElementType(LabelGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+LabelGroup.displayName = 'LabelGroup'
 LabelGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index 19fec4094d..f805838b3c 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -24,80 +24,81 @@ import ListList from './ListList'
 /**
  * A list groups related content.
  */
-class List extends Component {
-  handleItemOverrides = (predefinedProps) => ({
-    onClick: (e, itemProps) => {
-      _.invoke(predefinedProps, 'onClick', e, itemProps)
-      _.invoke(this.props, 'onItemClick', e, itemProps)
-    },
-  })
-
-  render() {
-    const {
-      animated,
-      bulleted,
-      celled,
-      children,
-      className,
-      content,
-      divided,
-      floated,
-      horizontal,
-      inverted,
-      items,
-      link,
-      ordered,
-      relaxed,
-      selection,
-      size,
-      verticalAlign,
-    } = this.props
-
-    const classes = cx(
-      'ui',
-      size,
-      useKeyOnly(animated, 'animated'),
-      useKeyOnly(bulleted, 'bulleted'),
-      useKeyOnly(celled, 'celled'),
-      useKeyOnly(divided, 'divided'),
-      useKeyOnly(horizontal, 'horizontal'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(link, 'link'),
-      useKeyOnly(ordered, 'ordered'),
-      useKeyOnly(selection, 'selection'),
-      useKeyOrValueAndKey(relaxed, 'relaxed'),
-      useValueAndKey(floated, 'floated'),
-      useVerticalAlignProp(verticalAlign),
-      'list',
-      className,
+const List = React.forwardRef(function (props, ref) {
+  const {
+    animated,
+    bulleted,
+    celled,
+    children,
+    className,
+    content,
+    divided,
+    floated,
+    horizontal,
+    inverted,
+    items,
+    link,
+    ordered,
+    relaxed,
+    selection,
+    size,
+    verticalAlign,
+  } = props
+
+  const classes = cx(
+    'ui',
+    size,
+    useKeyOnly(animated, 'animated'),
+    useKeyOnly(bulleted, 'bulleted'),
+    useKeyOnly(celled, 'celled'),
+    useKeyOnly(divided, 'divided'),
+    useKeyOnly(horizontal, 'horizontal'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(link, 'link'),
+    useKeyOnly(ordered, 'ordered'),
+    useKeyOnly(selection, 'selection'),
+    useKeyOrValueAndKey(relaxed, 'relaxed'),
+    useValueAndKey(floated, 'floated'),
+    useVerticalAlignProp(verticalAlign),
+    'list',
+    className,
+  )
+  const rest = getUnhandledProps(List, props)
+  const ElementType = getElementType(List, props)
+
+  if (!childrenUtils.isNil(children)) {
+    return (
+      <ElementType role='list' {...rest} className={classes} ref={ref}>
+        {children}
+      </ElementType>
     )
-    const rest = getUnhandledProps(List, this.props)
-    const ElementType = getElementType(List, this.props)
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType role='list' className={classes} {...rest}>
-          {children}
-        </ElementType>
-      )
-    }
-
-    if (!childrenUtils.isNil(content)) {
-      return (
-        <ElementType role='list' className={classes} {...rest}>
-          {content}
-        </ElementType>
-      )
-    }
+  }
 
+  if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType role='list' className={classes} {...rest}>
-        {_.map(items, (item) => ListItem.create(item, { overrideProps: this.handleItemOverrides }))}
+      <ElementType role='list' {...rest} className={classes} ref={ref}>
+        {content}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType role='list' {...rest} className={classes} ref={ref}>
+      {_.map(items, (item) =>
+        ListItem.create(item, {
+          overrideProps: (predefinedProps) => ({
+            onClick: (e, itemProps) => {
+              _.invoke(predefinedProps, 'onClick', e, itemProps)
+              _.invoke(props, 'onItemClick', e, itemProps)
+            },
+          }),
+        }),
+      )}
+    </ElementType>
+  )
+})
+
+List.displayName = 'List'
 List.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js
index 467da05b57..667e6bf0f6 100644
--- a/src/elements/List/ListContent.js
+++ b/src/elements/List/ListContent.js
@@ -18,7 +18,7 @@ import ListHeader from './ListHeader'
 /**
  * A list item can contain a content.
  */
-function ListContent(props) {
+const ListContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, floated, header, verticalAlign } = props
 
   const classes = cx(
@@ -32,21 +32,22 @@ function ListContent(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {ListHeader.create(header)}
       {ListDescription.create(description)}
       {content}
     </ElementType>
   )
-}
+})
 
+ListContent.displayName = 'ListContent'
 ListContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/List/ListDescription.js b/src/elements/List/ListDescription.js
index 95b143af61..b2672442e3 100644
--- a/src/elements/List/ListDescription.js
+++ b/src/elements/List/ListDescription.js
@@ -13,19 +13,20 @@ import {
 /**
  * A list item can contain a description.
  */
-function ListDescription(props) {
+const ListDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx(className, 'description')
   const rest = getUnhandledProps(ListDescription, props)
   const ElementType = getElementType(ListDescription, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ListDescription.displayName = 'ListDescription'
 ListDescription.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/List/ListHeader.js b/src/elements/List/ListHeader.js
index e4f7af0248..c26850c199 100644
--- a/src/elements/List/ListHeader.js
+++ b/src/elements/List/ListHeader.js
@@ -13,19 +13,21 @@ import {
 /**
  * A list item can contain a header.
  */
-function ListHeader(props) {
+const ListHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(ListHeader, props)
   const ElementType = getElementType(ListHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ListHeader.displayName = 'ListHeader'
 ListHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/List/ListIcon.js b/src/elements/List/ListIcon.js
index 0cb223af06..64d91edaac 100644
--- a/src/elements/List/ListIcon.js
+++ b/src/elements/List/ListIcon.js
@@ -8,14 +8,15 @@ import Icon from '../Icon/Icon'
 /**
  * A list item can contain an icon.
  */
-function ListIcon(props) {
+const ListIcon = React.forwardRef(function (props, ref) {
   const { className, verticalAlign } = props
   const classes = cx(useVerticalAlignProp(verticalAlign), className)
   const rest = getUnhandledProps(ListIcon, props)
 
-  return <Icon {...rest} className={classes} />
-}
+  return <Icon {...rest} className={classes} ref={ref} />
+})
 
+ListIcon.displayName = 'ListIcon'
 ListIcon.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index c5dc711489..c0fba5fb72 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, isValidElement } from 'react'
+import React, { isValidElement } from 'react'
 
 import {
   childrenUtils,
@@ -10,6 +10,7 @@ import {
   getElementType,
   getUnhandledProps,
   useKeyOnly,
+  useEventCallback,
 } from '../../lib'
 import Image from '../Image'
 import ListContent from './ListContent'
@@ -20,112 +21,116 @@ import ListIcon from './ListIcon'
 /**
  * A list item can contain a set of items.
  */
-class ListItem extends Component {
-  handleClick = (e) => {
-    const { disabled } = this.props
+const ListItem = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    children,
+    className,
+    content,
+    description,
+    disabled,
+    header,
+    icon,
+    image,
+    value,
+  } = props
+
+  const ElementType = getElementType(ListItem, props)
+  const classes = cx(
+    useKeyOnly(active, 'active'),
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(ElementType !== 'li', 'item'),
+    className,
+  )
+  const rest = getUnhandledProps(ListItem, props)
+
+  const handleClick = useEventCallback((e) => {
+    if (!disabled) {
+      _.invoke(props, 'onClick', e, props)
+    }
+  })
+  const valueProp = ElementType === 'li' ? { value } : { 'data-value': value }
 
-    if (!disabled) _.invoke(this.props, 'onClick', e, this.props)
+  if (!childrenUtils.isNil(children)) {
+    return (
+      <ElementType
+        {...valueProp}
+        role='listitem'
+        {...rest}
+        className={classes}
+        onClick={handleClick}
+        ref={ref}
+      >
+        {children}
+      </ElementType>
+    )
   }
 
-  render() {
-    const {
-      active,
-      children,
-      className,
-      content,
-      description,
-      disabled,
-      header,
-      icon,
-      image,
-      value,
-    } = this.props
-
-    const ElementType = getElementType(ListItem, this.props)
-    const classes = cx(
-      useKeyOnly(active, 'active'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(ElementType !== 'li', 'item'),
-      className,
-    )
-    const rest = getUnhandledProps(ListItem, this.props)
-    const valueProp = ElementType === 'li' ? { value } : { 'data-value': value }
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType
-          {...valueProp}
-          role='listitem'
-          className={classes}
-          onClick={this.handleClick}
-          {...rest}
-        >
-          {children}
-        </ElementType>
-      )
-    }
+  const iconElement = ListIcon.create(icon, { autoGenerateKey: false })
+  const imageElement = Image.create(image, { autoGenerateKey: false })
 
-    const iconElement = ListIcon.create(icon, { autoGenerateKey: false })
-    const imageElement = Image.create(image, { autoGenerateKey: false })
-
-    // See description of `content` prop for explanation about why this is necessary.
-    if (!isValidElement(content) && _.isPlainObject(content)) {
-      return (
-        <ElementType
-          {...valueProp}
-          role='listitem'
-          className={classes}
-          onClick={this.handleClick}
-          {...rest}
-        >
-          {iconElement || imageElement}
-          {ListContent.create(content, {
-            autoGenerateKey: false,
-            defaultProps: { header, description },
-          })}
-        </ElementType>
-      )
-    }
+  // See description of `content` prop for explanation about why this is necessary.
+  if (!isValidElement(content) && _.isPlainObject(content)) {
+    return (
+      <ElementType
+        {...valueProp}
+        role='listitem'
+        {...rest}
+        className={classes}
+        onClick={handleClick}
+        ref={ref}
+      >
+        {iconElement || imageElement}
+        {ListContent.create(content, {
+          autoGenerateKey: false,
+          defaultProps: { header, description },
+        })}
+      </ElementType>
+    )
+  }
 
-    const headerElement = ListHeader.create(header, { autoGenerateKey: false })
-    const descriptionElement = ListDescription.create(description, { autoGenerateKey: false })
-    if (iconElement || imageElement) {
-      return (
-        <ElementType
-          {...valueProp}
-          role='listitem'
-          className={classes}
-          onClick={this.handleClick}
-          {...rest}
-        >
-          {iconElement || imageElement}
-          {(content || headerElement || descriptionElement) && (
-            <ListContent>
-              {headerElement}
-              {descriptionElement}
-              {content}
-            </ListContent>
-          )}
-        </ElementType>
-      )
-    }
+  const headerElement = ListHeader.create(header, { autoGenerateKey: false })
+  const descriptionElement = ListDescription.create(description, { autoGenerateKey: false })
 
+  if (iconElement || imageElement) {
     return (
       <ElementType
         {...valueProp}
         role='listitem'
-        className={classes}
-        onClick={this.handleClick}
         {...rest}
+        className={classes}
+        onClick={handleClick}
+        ref={ref}
       >
-        {headerElement}
-        {descriptionElement}
-        {content}
+        {iconElement || imageElement}
+        {(content || headerElement || descriptionElement) && (
+          <ListContent>
+            {headerElement}
+            {descriptionElement}
+            {content}
+          </ListContent>
+        )}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType
+      {...valueProp}
+      role='listitem'
+      {...rest}
+      className={classes}
+      onClick={handleClick}
+      ref={ref}
+    >
+      {headerElement}
+      {descriptionElement}
+      {content}
+    </ElementType>
+  )
+})
+
+ListItem.displayName = 'ListItem'
 ListItem.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js
index fac22a8491..403d243b79 100644
--- a/src/elements/List/ListList.js
+++ b/src/elements/List/ListList.js
@@ -13,7 +13,7 @@ import {
 /**
  * A list can contain a sub list.
  */
-function ListList(props) {
+const ListList = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
 
   const rest = getUnhandledProps(ListList, props)
@@ -21,12 +21,13 @@ function ListList(props) {
   const classes = cx(useKeyOnly(ElementType !== 'ul' && ElementType !== 'ol', 'list'), className)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ListList.displayName = 'ListList'
 ListList.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Loader/Loader.js b/src/elements/Loader/Loader.js
index 1f1d5dd5cb..ed270fa6cd 100644
--- a/src/elements/Loader/Loader.js
+++ b/src/elements/Loader/Loader.js
@@ -16,7 +16,7 @@ import {
  * A loader alerts a user to wait for an activity to complete.
  * @see Dimmer
  */
-function Loader(props) {
+const Loader = React.forwardRef(function (props, ref) {
   const {
     active,
     children,
@@ -45,12 +45,13 @@ function Loader(props) {
   const ElementType = getElementType(Loader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Loader.displayName = 'Loader'
 Loader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Placeholder/Placeholder.js b/src/elements/Placeholder/Placeholder.js
index 23f77ac969..d7bd272da5 100644
--- a/src/elements/Placeholder/Placeholder.js
+++ b/src/elements/Placeholder/Placeholder.js
@@ -17,7 +17,7 @@ import PlaceholderParagraph from './PlaceholderParagraph'
 /**
  * A placeholder is used to reserve space for content that soon will appear in a layout.
  */
-function Placeholder(props) {
+const Placeholder = React.forwardRef(function (props, ref) {
   const { children, className, content, fluid, inverted } = props
   const classes = cx(
     'ui',
@@ -30,12 +30,13 @@ function Placeholder(props) {
   const ElementType = getElementType(Placeholder, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Placeholder.displayName = 'Placeholder'
 Placeholder.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Placeholder/PlaceholderHeader.js b/src/elements/Placeholder/PlaceholderHeader.js
index cfc33ea20f..6f8293b3ad 100644
--- a/src/elements/Placeholder/PlaceholderHeader.js
+++ b/src/elements/Placeholder/PlaceholderHeader.js
@@ -13,19 +13,20 @@ import {
 /**
  * A placeholder can contain a header.
  */
-function PlaceholderHeader(props) {
+const PlaceholderHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, image } = props
   const classes = cx(useKeyOnly(image, 'image'), 'header', className)
   const rest = getUnhandledProps(PlaceholderHeader, props)
   const ElementType = getElementType(PlaceholderHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+PlaceholderHeader.displayName = 'PlaceholderHeader'
 PlaceholderHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js
index 84e9348094..86f3a6e824 100644
--- a/src/elements/Placeholder/PlaceholderImage.js
+++ b/src/elements/Placeholder/PlaceholderImage.js
@@ -7,7 +7,7 @@ import { customPropTypes, getElementType, getUnhandledProps, useKeyOnly } from '
 /**
  * A placeholder can contain an image.
  */
-function PlaceholderImage(props) {
+const PlaceholderImage = React.forwardRef(function (props, ref) {
   const { className, square, rectangular } = props
   const classes = cx(
     useKeyOnly(square, 'square'),
@@ -18,9 +18,10 @@ function PlaceholderImage(props) {
   const rest = getUnhandledProps(PlaceholderImage, props)
   const ElementType = getElementType(PlaceholderImage, props)
 
-  return <ElementType {...rest} className={classes} />
-}
+  return <ElementType {...rest} className={classes} ref={ref} />
+})
 
+PlaceholderImage.displayName = 'PlaceholderImage'
 PlaceholderImage.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Placeholder/PlaceholderLine.js b/src/elements/Placeholder/PlaceholderLine.js
index 0682daff9d..7ff192252e 100644
--- a/src/elements/Placeholder/PlaceholderLine.js
+++ b/src/elements/Placeholder/PlaceholderLine.js
@@ -7,15 +7,16 @@ import { getElementType, getUnhandledProps } from '../../lib'
 /**
  * A placeholder can contain have lines of text.
  */
-function PlaceholderLine(props) {
+const PlaceholderLine = React.forwardRef(function (props, ref) {
   const { className, length } = props
   const classes = cx('line', length, className)
   const rest = getUnhandledProps(PlaceholderLine, props)
   const ElementType = getElementType(PlaceholderLine, props)
 
-  return <ElementType {...rest} className={classes} />
-}
+  return <ElementType {...rest} className={classes} ref={ref} />
+})
 
+PlaceholderLine.displayName = 'PlaceholderLine'
 PlaceholderLine.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Placeholder/PlaceholderParagraph.js b/src/elements/Placeholder/PlaceholderParagraph.js
index 535a87c26e..91a949d7a5 100644
--- a/src/elements/Placeholder/PlaceholderParagraph.js
+++ b/src/elements/Placeholder/PlaceholderParagraph.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A placeholder can contain a paragraph.
  */
-function PlaceholderParagraph(props) {
+const PlaceholderParagraph = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('paragraph', className)
   const rest = getUnhandledProps(PlaceholderParagraph, props)
   const ElementType = getElementType(PlaceholderParagraph, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+PlaceholderParagraph.displayName = 'PlaceholderParagraph'
 PlaceholderParagraph.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index 90a69445fc..74ffc79607 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -16,7 +16,7 @@ import {
 /**
  * A rail is used to show accompanying content outside the boundaries of the main view of a site.
  */
-function Rail(props) {
+const Rail = React.forwardRef(function (props, ref) {
   const {
     attached,
     children,
@@ -44,12 +44,13 @@ function Rail(props) {
   const ElementType = getElementType(Rail, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Rail.displayName = 'Rail'
 Rail.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Reveal/Reveal.js b/src/elements/Reveal/Reveal.js
index 971608cb8c..f18fcf120f 100644
--- a/src/elements/Reveal/Reveal.js
+++ b/src/elements/Reveal/Reveal.js
@@ -14,7 +14,7 @@ import RevealContent from './RevealContent'
 /**
  * A reveal displays additional content in place of previous content when activated.
  */
-function Reveal(props) {
+const Reveal = React.forwardRef(function (props, ref) {
   const { active, animated, children, className, content, disabled, instant } = props
 
   const classes = cx(
@@ -30,12 +30,13 @@ function Reveal(props) {
   const ElementType = getElementType(Reveal, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Reveal.displayName = 'Reveal'
 Reveal.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Reveal/RevealContent.js b/src/elements/Reveal/RevealContent.js
index 1e25912df8..1a2fb4cf30 100644
--- a/src/elements/Reveal/RevealContent.js
+++ b/src/elements/Reveal/RevealContent.js
@@ -13,7 +13,7 @@ import {
 /**
  * A content sub-component for the Reveal.
  */
-function RevealContent(props) {
+const RevealContent = React.forwardRef(function (props, ref) {
   const { children, className, content, hidden, visible } = props
 
   const classes = cx(
@@ -27,12 +27,13 @@ function RevealContent(props) {
   const ElementType = getElementType(RevealContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+RevealContent.displayName = 'RevealContent'
 RevealContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index 015c21bf85..cb73a0e7d6 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -20,7 +20,7 @@ import SegmentInline from './SegmentInline'
 /**
  * A segment is used to create a grouping of related content.
  */
-function Segment(props) {
+const Segment = React.forwardRef(function (props, ref) {
   const {
     attached,
     basic,
@@ -76,15 +76,16 @@ function Segment(props) {
   const ElementType = getElementType(Segment, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
 Segment.Group = SegmentGroup
 Segment.Inline = SegmentInline
 
+Segment.displayName = 'Segment'
 Segment.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js
index 64b938eb80..a5b00d6c30 100644
--- a/src/elements/Segment/SegmentGroup.js
+++ b/src/elements/Segment/SegmentGroup.js
@@ -15,7 +15,7 @@ import {
 /**
  * A group of segments can be formatted to appear together.
  */
-function SegmentGroup(props) {
+const SegmentGroup = React.forwardRef(function (props, ref) {
   const { children, className, compact, content, horizontal, piled, raised, size, stacked } = props
 
   const classes = cx(
@@ -33,12 +33,13 @@ function SegmentGroup(props) {
   const ElementType = getElementType(SegmentGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SegmentGroup.displayName = 'SegmentGroup'
 SegmentGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Segment/SegmentInline.js b/src/elements/Segment/SegmentInline.js
index 70b1d8db95..2ce0aeb0e9 100644
--- a/src/elements/Segment/SegmentInline.js
+++ b/src/elements/Segment/SegmentInline.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A placeholder segment can be inline.
  */
-function SegmentInline(props) {
+const SegmentInline = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('inline', className)
   const rest = getUnhandledProps(SegmentInline, props)
   const ElementType = getElementType(SegmentInline, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SegmentInline.displayName = 'SegmentInline'
 SegmentInline.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index 55866f09a3..bebf135191 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -10,6 +10,7 @@ import {
   getElementType,
   getUnhandledProps,
   useKeyOnly,
+  useEventCallback,
 } from '../../lib'
 import Icon from '../Icon'
 import StepContent from './StepContent'
@@ -20,70 +21,69 @@ import StepTitle from './StepTitle'
 /**
  * A step shows the completion status of an activity in a series of activities.
  */
-class Step extends Component {
-  computeElementType = () => {
-    const { onClick } = this.props
-
-    if (onClick) return 'a'
-  }
-
-  handleClick = (e) => {
-    const { disabled } = this.props
-
-    if (!disabled) _.invoke(this.props, 'onClick', e, this.props)
-  }
-
-  render() {
-    const {
-      active,
-      children,
-      className,
-      completed,
-      content,
-      description,
-      disabled,
-      href,
-      icon,
-      link,
-      title,
-    } = this.props
-
-    const classes = cx(
-      useKeyOnly(active, 'active'),
-      useKeyOnly(completed, 'completed'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(link, 'link'),
-      'step',
-      className,
-    )
-    const rest = getUnhandledProps(Step, this.props)
-    const ElementType = getElementType(Step, this.props, this.computeElementType)
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
+const Step = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    children,
+    className,
+    completed,
+    content,
+    description,
+    disabled,
+    href,
+    onClick,
+    icon,
+    link,
+    title,
+  } = props
+
+  const handleClick = useEventCallback((e) => {
+    if (!disabled) {
+      _.invoke(props, 'onClick', e, props)
     }
-
-    if (!childrenUtils.isNil(content)) {
-      return (
-        <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
-          {content}
-        </ElementType>
-      )
+  })
+
+  const classes = cx(
+    useKeyOnly(active, 'active'),
+    useKeyOnly(completed, 'completed'),
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(link, 'link'),
+    'step',
+    className,
+  )
+
+  const rest = getUnhandledProps(Step, props)
+  const ElementType = getElementType(Step, props, () => {
+    if (onClick) {
+      return 'a'
     }
+  })
 
+  if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
-        {Icon.create(icon, { autoGenerateKey: false })}
-        {StepContent.create({ description, title }, { autoGenerateKey: false })}
+      <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
+        {children}
       </ElementType>
     )
   }
-}
 
+  if (!childrenUtils.isNil(content)) {
+    return (
+      <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
+        {content}
+      </ElementType>
+    )
+  }
+
+  return (
+    <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
+      {Icon.create(icon, { autoGenerateKey: false })}
+      {StepContent.create({ description, title }, { autoGenerateKey: false })}
+    </ElementType>
+  )
+})
+
+Step.displayName = 'Step'
 Step.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js
index 2285ff2e08..d71a931e21 100644
--- a/src/elements/Step/StepContent.js
+++ b/src/elements/Step/StepContent.js
@@ -15,7 +15,7 @@ import StepTitle from './StepTitle'
 /**
  * A step can contain a content.
  */
-function StepContent(props) {
+const StepContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, title } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(StepContent, props)
@@ -23,27 +23,29 @@ function StepContent(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
+
   if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {StepTitle.create(title, { autoGenerateKey: false })}
       {StepDescription.create(description, { autoGenerateKey: false })}
     </ElementType>
   )
-}
+})
 
+StepContent.displayName = 'StepContent'
 StepContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Step/StepDescription.js b/src/elements/Step/StepDescription.js
index ad4b511209..6bde53b17e 100644
--- a/src/elements/Step/StepDescription.js
+++ b/src/elements/Step/StepDescription.js
@@ -10,19 +10,20 @@ import {
   getUnhandledProps,
 } from '../../lib'
 
-function StepDescription(props) {
+const StepDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(StepDescription, props)
   const ElementType = getElementType(StepDescription, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+StepDescription.displayName = 'StepDescription'
 StepDescription.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js
index c85e5bfeec..1b7967809f 100644
--- a/src/elements/Step/StepGroup.js
+++ b/src/elements/Step/StepGroup.js
@@ -22,7 +22,7 @@ const numberMap = _.pickBy(numberToWordMap, (val, key) => key <= 8)
 /**
  * A set of steps.
  */
-function StepGroup(props) {
+const StepGroup = React.forwardRef(function (props, ref) {
   const {
     attached,
     children,
@@ -55,26 +55,27 @@ function StepGroup(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {_.map(items, (item) => Step.create(item))}
     </ElementType>
   )
-}
+})
 
+StepGroup.displayName = 'StepGroup'
 StepGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Step/StepTitle.js b/src/elements/Step/StepTitle.js
index ebad010c93..ad03ec96df 100644
--- a/src/elements/Step/StepTitle.js
+++ b/src/elements/Step/StepTitle.js
@@ -13,19 +13,20 @@ import {
 /**
  * A step can contain a title.
  */
-function StepTitle(props) {
+const StepTitle = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('title', className)
   const rest = getUnhandledProps(StepTitle, props)
   const ElementType = getElementType(StepTitle, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+StepTitle.displayName = 'StepTitle'
 StepTitle.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/index.js b/src/index.js
index e4f85c45cb..7bbbba2c6b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,3 @@
-// Third party
-export { Ref } from '@fluentui/react-component-ref'
-
 // Addons
 export Confirm from './addons/Confirm'
 export Pagination from './addons/Pagination'
@@ -12,9 +9,6 @@ export Select from './addons/Select'
 export TextArea from './addons/TextArea'
 export TransitionablePortal from './addons/TransitionablePortal'
 
-// Behaviors
-export Visibility from './behaviors/Visibility'
-
 // Collections
 export Breadcrumb from './collections/Breadcrumb'
 export BreadcrumbDivider from './collections/Breadcrumb/BreadcrumbDivider'
@@ -154,6 +148,7 @@ export RatingIcon from './modules/Rating/RatingIcon'
 
 export Search from './modules/Search'
 export SearchCategory from './modules/Search/SearchCategory'
+export SearchCategoryLayout from './modules/Search/SearchCategoryLayout'
 export SearchResult from './modules/Search/SearchResult'
 export SearchResults from './modules/Search/SearchResults'
 
diff --git a/src/lib/doesNodeContainClick.js b/src/lib/doesNodeContainClick.js
index d1ae271216..d400098eeb 100644
--- a/src/lib/doesNodeContainClick.js
+++ b/src/lib/doesNodeContainClick.js
@@ -10,7 +10,9 @@ import _ from 'lodash'
  * @returns {boolean}
  */
 const doesNodeContainClick = (node, e) => {
-  if (_.some([e, node], _.isNil)) return false
+  if (_.some([e, node], _.isNil)) {
+    return false
+  }
 
   // if there is an e.target and it is in the document, use a simple node.contains() check
   if (e.target) {
@@ -18,7 +20,10 @@ const doesNodeContainClick = (node, e) => {
 
     if (document.querySelector('[data-suir-click-target=true]')) {
       _.invoke(e.target, 'removeAttribute', 'data-suir-click-target')
-      return node.contains(e.target)
+
+      if (typeof node.contains === 'function') {
+        return node.contains(e.target)
+      }
     }
   }
 
@@ -29,18 +34,31 @@ const doesNodeContainClick = (node, e) => {
   // return early if the event properties aren't available
   // prevent measuring the node and repainting if we don't need to
   const { clientX, clientY } = e
-  if (_.some([clientX, clientY], _.isNil)) return false
+
+  if (_.some([clientX, clientY], _.isNil)) {
+    return false
+  }
+
+  if (typeof node.getClientRects !== 'function') {
+    return false
+  }
 
   // false if the node is not visible
   const clientRects = node.getClientRects()
+
   // Heads Up!
   // getClientRects returns a DOMRectList, not an array nor a plain object
   // We explicitly avoid _.isEmpty and check .length to cover all possible shapes
-  if (!node.offsetWidth || !node.offsetHeight || !clientRects || !clientRects.length) return false
+  if (!node.offsetWidth || !node.offsetHeight || !clientRects || !clientRects.length) {
+    return false
+  }
 
   // false if the node doesn't have a valid bounding rect
   const { top, bottom, left, right } = _.first(clientRects)
-  if (_.some([top, bottom, left, right], _.isNil)) return false
+
+  if (_.some([top, bottom, left, right], _.isNil)) {
+    return false
+  }
 
   // we add a small decimal to the upper bound just to make it inclusive
   // don't add an whole pixel (1) as the event/node values may be decimal sensitive
diff --git a/src/lib/factories.js b/src/lib/factories.js
index 7e703ed8b9..4cc1c62a06 100644
--- a/src/lib/factories.js
+++ b/src/lib/factories.js
@@ -1,6 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import * as React from 'react'
+import * as ReactIs from 'react-is'
 
 const DEPRECATED_CALLS = {}
 
@@ -21,8 +22,8 @@ const DEPRECATED_CALLS = {}
  * @returns {object|null}
  */
 export function createShorthand(Component, mapValueToProps, val, options = {}) {
-  if (typeof Component !== 'function' && typeof Component !== 'string') {
-    throw new Error('createShorthand() Component must be a string or function.')
+  if (!ReactIs.isValidElementType(Component)) {
+    throw new Error('createShorthand(): Component should be a valid element type.')
   }
 
   // short circuit noop values
@@ -157,8 +158,8 @@ export function createShorthand(Component, mapValueToProps, val, options = {}) {
  * @returns {function} A shorthand factory function waiting for `val` and `defaultProps`.
  */
 export function createShorthandFactory(Component, mapValueToProps) {
-  if (typeof Component !== 'function' && typeof Component !== 'string') {
-    throw new Error('createShorthandFactory() Component must be a string or function.')
+  if (!ReactIs.isValidElementType(Component)) {
+    throw new Error('createShorthandFactory(): Component should be a valid element type.')
   }
 
   return (val, options) => createShorthand(Component, mapValueToProps, val, options)
diff --git a/src/lib/getUnhandledProps.js b/src/lib/getUnhandledProps.js
index 1a4d199541..344d7b337a 100644
--- a/src/lib/getUnhandledProps.js
+++ b/src/lib/getUnhandledProps.js
@@ -10,7 +10,9 @@ const getUnhandledProps = (Component, props) => {
   const { handledProps = [] } = Component
 
   return Object.keys(props).reduce((acc, prop) => {
-    if (prop === 'childKey') return acc
+    // "childKey" and "innerRef" are internal props of Semantic UI React
+    // "innerRef" can be removed when "Search" & "Dropdown components will be removed to be functional
+    if (prop === 'childKey' || prop === 'innerRef') return acc
     if (handledProps.indexOf(prop) === -1) acc[prop] = props[prop]
     return acc
   }, {})
diff --git a/src/lib/hooks/useAutoControlledValue.js b/src/lib/hooks/useAutoControlledValue.js
new file mode 100644
index 0000000000..756ed79fb7
--- /dev/null
+++ b/src/lib/hooks/useAutoControlledValue.js
@@ -0,0 +1,45 @@
+import * as React from 'react'
+
+/**
+ * A hook that allows optional user control, implements an interface similar to `React.useState()`.
+ * Useful for components which allow uncontrolled and controlled behaviours for users.
+ *
+ * - defaultState - default state or factory initializer
+ * - state - controllable state, undefined state means internal state will be used
+ * - initialState - Used to initialize state if all user provided states are undefined
+ *
+ * @param {{ defaultState?: any, state: any, initialState: any }} options
+ *
+ * @see https://reactjs.org/docs/uncontrolled-components.html
+ * @see https://reactjs.org/docs/hooks-state.html
+ */
+function useAutoControlledValue(options) {
+  const initialState =
+    typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState
+  const [internalState, setInternalState] = React.useState(initialState)
+
+  const state = typeof options.state === 'undefined' ? internalState : options.state
+  const stateRef = React.useRef(state)
+
+  React.useEffect(() => {
+    stateRef.current = state
+  }, [state])
+
+  // To match the behavior of the setter returned by React.useState, this callback's identity
+  // should never change. This means it MUST NOT directly reference variables that can change.
+  const setState = React.useCallback((newState) => {
+    // React dispatch can use a factory
+    // https://reactjs.org/docs/hooks-reference.html#functional-updates
+    if (typeof newState === 'function') {
+      stateRef.current = newState(stateRef.current)
+    } else {
+      stateRef.current = newState
+    }
+
+    setInternalState(stateRef.current)
+  }, [])
+
+  return [state, setState]
+}
+
+export default useAutoControlledValue
diff --git a/src/lib/hooks/useClassNamesOnNode.js b/src/lib/hooks/useClassNamesOnNode.js
index b1571f5842..479142ee91 100644
--- a/src/lib/hooks/useClassNamesOnNode.js
+++ b/src/lib/hooks/useClassNamesOnNode.js
@@ -1,6 +1,6 @@
-import { isRefObject } from '@fluentui/react-component-ref'
 import React from 'react'
 
+import isRefObject from '../isRefObject'
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
 
 const CLASS_NAME_DELITIMITER = /\s+/
diff --git a/src/lib/hooks/useEventCallback.js b/src/lib/hooks/useEventCallback.js
new file mode 100644
index 0000000000..f83a07cc66
--- /dev/null
+++ b/src/lib/hooks/useEventCallback.js
@@ -0,0 +1,35 @@
+import * as React from 'react'
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
+
+/**
+ * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ *
+ * Modified `useCallback` that can be used when dependencies change too frequently. Can occur when:
+ * e.g. user props are depedencies which could change on every render
+ * e.g. volatile values (i.e. useState/useDispatch) are dependencies which could change frequently
+ *
+ * This should not be used often, but can be a useful re-render optimization since the callback is
+ * a ref and will not be invalidated between rerenders.
+ *
+ * @param {Function} fn The callback function that will be used
+ */
+export default function useEventCallback(fn) {
+  const callbackRef = React.useRef(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error('Cannot call an event handler while rendering...')
+    }
+  })
+
+  useIsomorphicLayoutEffect(() => {
+    callbackRef.current = fn
+  }, [fn])
+
+  return React.useCallback(
+    (...args) => {
+      const callback = callbackRef.current
+
+      return callback(...args)
+    },
+    [callbackRef],
+  )
+}
diff --git a/src/lib/hooks/useForceUpdate.js b/src/lib/hooks/useForceUpdate.js
new file mode 100644
index 0000000000..9f5deaee85
--- /dev/null
+++ b/src/lib/hooks/useForceUpdate.js
@@ -0,0 +1,8 @@
+import * as React from 'react'
+
+/**
+ * Returns a callback that causes force render of a component.
+ */
+export default function useForceUpdate() {
+  return React.useReducer((x) => x + 1, 0)[1]
+}
diff --git a/src/lib/hooks/useMergedRefs.js b/src/lib/hooks/useMergedRefs.js
new file mode 100644
index 0000000000..17b569cd77
--- /dev/null
+++ b/src/lib/hooks/useMergedRefs.js
@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+/**
+ * Assigns a value to a React ref.
+ *
+ * @param {React.Ref} ref
+ * @param {HTMLElement} value
+ */
+export function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value)
+  } else if (ref) {
+    // eslint-disable-next-line no-param-reassign
+    ref.current = value
+  }
+}
+
+/**
+ * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
+ * updates all provided refs.
+ *
+ * @param {React.Ref} refA
+ * @param {React.Ref} refB
+ *
+ * @return {React.Ref} A function with an attached "current" prop, so that it can be treated like a React.RefObject.
+ */
+export default function useMergedRefs(refA, refB) {
+  const mergedCallback = React.useCallback(
+    (value) => {
+      // Update the "current" prop hanging on the function.
+      mergedCallback.current = value
+
+      setRef(refA, value)
+      setRef(refB, value)
+    },
+    [refA, refB],
+  )
+
+  return mergedCallback
+}
diff --git a/src/lib/hooks/usePrevious.js b/src/lib/hooks/usePrevious.js
new file mode 100644
index 0000000000..0178735c75
--- /dev/null
+++ b/src/lib/hooks/usePrevious.js
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+/**
+ * Hook keeping track of a given value from a previous execution of the component the Hook is used in.
+ *
+ * @see https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ */
+function usePrevious(value) {
+  const ref = React.useRef()
+
+  React.useEffect(() => {
+    ref.current = value
+  })
+
+  return ref.current
+}
+
+export default usePrevious
diff --git a/src/lib/index.js b/src/lib/index.js
index 808896b7e9..9325384369 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -35,9 +35,9 @@ export createPaginationItems from './createPaginationItems'
 export * as SUI from './SUI'
 
 export { numberToWordMap, numberToWord } from './numberToWord'
-export normalizeOffset from './normalizeOffset'
 export normalizeTransitionDuration from './normalizeTransitionDuration'
 export objectDiff from './objectDiff'
+export isRefObject from './isRefObject'
 
 // Heads up! We import/export for this module to safely remove it with "babel-plugin-filter-imports"
 export { makeDebugger }
@@ -46,4 +46,10 @@ export { makeDebugger }
 // Hooks
 //
 
+export useAutoControlledValue from './hooks/useAutoControlledValue'
 export useClassNamesOnNode from './hooks/useClassNamesOnNode'
+export useEventCallback from './hooks/useEventCallback'
+export useForceUpdate from './hooks/useForceUpdate'
+export useIsomorphicLayoutEffect from './hooks/useIsomorphicLayoutEffect'
+export useMergedRefs, { setRef } from './hooks/useMergedRefs'
+export usePrevious from './hooks/usePrevious'
diff --git a/src/lib/isRefObject.js b/src/lib/isRefObject.js
new file mode 100644
index 0000000000..c026162eff
--- /dev/null
+++ b/src/lib/isRefObject.js
@@ -0,0 +1,6 @@
+/** Checks that the passed object is a valid React ref object. */
+export default function isRefObject(ref) {
+  // https://github.com/facebook/react/blob/v16.8.2/packages/react-reconciler/src/ReactFiberCommitWork.js#L665
+  // eslint-disable-next-line no-prototype-builtins
+  return ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current')
+}
diff --git a/src/lib/normalizeOffset.js b/src/lib/normalizeOffset.js
deleted file mode 100644
index 97be40480f..0000000000
--- a/src/lib/normalizeOffset.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Normalizes the offset value.
- * @param {number|array} value The value to normalize.
- * @returns {number}
- */
-export default (value) =>
-  typeof value === 'number' || typeof value === 'string' ? [value, value] : value
diff --git a/src/modules/Accordion/Accordion.js b/src/modules/Accordion/Accordion.js
index 33058ab169..4d76ecc440 100644
--- a/src/modules/Accordion/Accordion.js
+++ b/src/modules/Accordion/Accordion.js
@@ -11,7 +11,7 @@ import AccordionTitle from './AccordionTitle'
 /**
  * An accordion allows users to toggle the display of sections of content.
  */
-function Accordion(props) {
+const Accordion = React.forwardRef(function (props, ref) {
   const { className, fluid, inverted, styled } = props
 
   const classes = cx(
@@ -23,9 +23,11 @@ function Accordion(props) {
   )
   const rest = getUnhandledProps(Accordion, props)
 
-  return <AccordionAccordion {...rest} className={classes} />
-}
+  // TODO: extract behavior into useAccordion() hook instead of "AccordionAccordion" component
+  return <AccordionAccordion {...rest} className={classes} ref={ref} />
+})
 
+Accordion.displayName = 'Accordion'
 Accordion.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index ca2dbfbb6e..8b6227d7f5 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -4,97 +4,99 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  ModernAutoControlledComponent as Component,
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
+  useAutoControlledValue,
+  useEventCallback,
 } from '../../lib'
 import AccordionPanel from './AccordionPanel'
 
-const warnIfPropsAreInvalid = (props, state) => {
-  const { exclusive } = props
-  const { activeIndex } = state
-
-  /* eslint-disable no-console */
-  if (exclusive && typeof activeIndex !== 'number') {
-    console.error('`activeIndex` must be a number if `exclusive` is true')
-  } else if (!exclusive && !_.isArray(activeIndex)) {
-    console.error('`activeIndex` must be an array if `exclusive` is false')
-  }
-  /* eslint-enable no-console */
+/**
+ * @param {Boolean} exclusive
+ * @param {Number} activeIndex
+ * @param {Number} itemIndex
+ */
+function isIndexActive(exclusive, activeIndex, itemIndex) {
+  return exclusive ? activeIndex === itemIndex : _.includes(activeIndex, itemIndex)
 }
 
 /**
- * An Accordion can contain sub-accordions.
+ * @param {Boolean} exclusive
+ * @param {Number} activeIndex
+ * @param {Number} itemIndex
  */
-export default class AccordionAccordion extends Component {
-  getInitialAutoControlledState({ exclusive }) {
-    return { activeIndex: exclusive ? -1 : [] }
-  }
-
-  componentDidMount() {
-    if (process.env.NODE_ENV !== 'production') {
-      warnIfPropsAreInvalid(this.props, this.state)
-    }
+function computeNewIndex(exclusive, activeIndex, itemIndex) {
+  if (exclusive) {
+    return itemIndex === activeIndex ? -1 : itemIndex
   }
 
-  componentDidUpdate() {
-    if (process.env.NODE_ENV !== 'production') {
-      warnIfPropsAreInvalid(this.props, this.state)
-    }
+  // check to see if index is in array, and remove it, if not then add it
+  if (_.includes(activeIndex, itemIndex)) {
+    return _.without(activeIndex, itemIndex)
   }
 
-  computeNewIndex = (index) => {
-    const { exclusive } = this.props
-    const { activeIndex } = this.state
-
-    if (exclusive) return index === activeIndex ? -1 : index
-
-    // check to see if index is in array, and remove it, if not then add it
-    return _.includes(activeIndex, index) ? _.without(activeIndex, index) : [...activeIndex, index]
-  }
+  return [...activeIndex, itemIndex]
+}
 
-  handleTitleClick = (e, titleProps) => {
+/**
+ * An Accordion can contain sub-accordions.
+ */
+const AccordionAccordion = React.forwardRef(function (props, ref) {
+  const { className, children, exclusive, panels } = props
+  const [activeIndex, setActiveIndex] = useAutoControlledValue({
+    state: props.activeIndex,
+    defaultState: props.defaultActiveIndex,
+    initialState: () => (exclusive ? -1 : []),
+  })
+
+  const classes = cx('accordion', className)
+  const rest = getUnhandledProps(AccordionAccordion, props)
+  const ElementType = getElementType(AccordionAccordion, props)
+
+  const handleTitleClick = useEventCallback((e, titleProps) => {
     const { index } = titleProps
 
-    this.setState({ activeIndex: this.computeNewIndex(index) })
-    _.invoke(this.props, 'onTitleClick', e, titleProps)
+    setActiveIndex(computeNewIndex(exclusive, activeIndex, index))
+    _.invoke(props, 'onTitleClick', e, titleProps)
+  })
+
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      /* eslint-disable no-console */
+      if (exclusive && typeof activeIndex !== 'number') {
+        console.error('`activeIndex` must be a number if `exclusive` is true')
+      } else if (!exclusive && !_.isArray(activeIndex)) {
+        console.error('`activeIndex` must be an array if `exclusive` is false')
+      }
+      /* eslint-enable no-console */
+    }, [exclusive, activeIndex])
   }
 
-  isIndexActive = (index) => {
-    const { exclusive } = this.props
-    const { activeIndex } = this.state
-
-    return exclusive ? activeIndex === index : _.includes(activeIndex, index)
-  }
+  return (
+    <ElementType {...rest} className={classes} ref={ref}>
+      {childrenUtils.isNil(children)
+        ? _.map(panels, (panel, index) =>
+            AccordionPanel.create(panel, {
+              defaultProps: {
+                active: isIndexActive(exclusive, activeIndex, index),
+                index,
+                onTitleClick: handleTitleClick,
+              },
+            }),
+          )
+        : children}
+    </ElementType>
+  )
+})
 
-  render() {
-    const { className, children, panels } = this.props
-
-    const classes = cx('accordion', className)
-    const rest = getUnhandledProps(AccordionAccordion, this.props)
-    const ElementType = getElementType(AccordionAccordion, this.props)
-
-    return (
-      <ElementType {...rest} className={classes}>
-        {childrenUtils.isNil(children)
-          ? _.map(panels, (panel, index) =>
-              AccordionPanel.create(panel, {
-                defaultProps: {
-                  active: this.isIndexActive(index),
-                  index,
-                  onTitleClick: this.handleTitleClick,
-                },
-              }),
-            )
-          : children}
-      </ElementType>
-    )
-  }
+AccordionAccordion.defaultProps = {
+  exclusive: true,
 }
 
+AccordionAccordion.displayName = 'AccordionAccordion'
 AccordionAccordion.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -140,10 +142,6 @@ AccordionAccordion.propTypes = {
   ]),
 }
 
-AccordionAccordion.defaultProps = {
-  exclusive: true,
-}
-
-AccordionAccordion.autoControlledProps = ['activeIndex']
-
 AccordionAccordion.create = createShorthandFactory(AccordionAccordion, (content) => ({ content }))
+
+export default AccordionAccordion
diff --git a/src/modules/Accordion/AccordionContent.js b/src/modules/Accordion/AccordionContent.js
index eb9af2d63e..9fae433ee0 100644
--- a/src/modules/Accordion/AccordionContent.js
+++ b/src/modules/Accordion/AccordionContent.js
@@ -14,19 +14,21 @@ import {
 /**
  * A content sub-component for Accordion component.
  */
-function AccordionContent(props) {
+const AccordionContent = React.forwardRef(function (props, ref) {
   const { active, children, className, content } = props
+
   const classes = cx('content', useKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(AccordionContent, props)
   const ElementType = getElementType(AccordionContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+AccordionContent.displayName = 'AccordionContent'
 AccordionContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index 5372df666d..f9c7ef7fde 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -10,40 +10,42 @@ import {
   getElementType,
   getUnhandledProps,
   useKeyOnly,
+  useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
 /**
  * A title sub-component for Accordion component.
  */
-export default class AccordionTitle extends Component {
-  handleClick = (e) => _.invoke(this.props, 'onClick', e, this.props)
+const AccordionTitle = React.forwardRef(function (props, ref) {
+  const { active, children, className, content, icon } = props
 
-  render() {
-    const { active, children, className, content, icon } = this.props
+  const classes = cx(useKeyOnly(active, 'active'), 'title', className)
+  const rest = getUnhandledProps(AccordionTitle, props)
+  const ElementType = getElementType(AccordionTitle, props)
+  const iconValue = _.isNil(icon) ? 'dropdown' : icon
 
-    const classes = cx(useKeyOnly(active, 'active'), 'title', className)
-    const rest = getUnhandledProps(AccordionTitle, this.props)
-    const ElementType = getElementType(AccordionTitle, this.props)
-    const iconValue = _.isNil(icon) ? 'dropdown' : icon
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
-    }
+  const handleClick = useEventCallback((e) => {
+    _.invoke(props, 'onClick', e, props)
+  })
 
+  if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes} onClick={this.handleClick}>
-        {Icon.create(iconValue, { autoGenerateKey: false })}
-        {content}
+      <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+        {children}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+      {Icon.create(iconValue, { autoGenerateKey: false })}
+      {content}
+    </ElementType>
+  )
+})
+
+AccordionTitle.displayName = 'AccordionTitle'
 AccordionTitle.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -75,3 +77,5 @@ AccordionTitle.propTypes = {
   onClick: PropTypes.func,
 }
 AccordionTitle.create = createShorthandFactory(AccordionTitle, (content) => ({ content }))
+
+export default AccordionTitle
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index bd4e02f10f..00eeeb80a6 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -1,11 +1,9 @@
-import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { createRef } from 'react'
+import React from 'react'
 
 import {
-  ModernAutoControlledComponent as Component,
   createHTMLLabel,
   customPropTypes,
   getElementType,
@@ -14,6 +12,9 @@ import {
   makeDebugger,
   partitionHTMLProps,
   useKeyOnly,
+  useAutoControlledValue,
+  useMergedRefs,
+  useIsomorphicLayoutEffect,
 } from '../../lib'
 
 const debug = makeDebugger('checkbox')
@@ -23,39 +24,92 @@ const debug = makeDebugger('checkbox')
  * @see Form
  * @see Radio
  */
-export default class Checkbox extends Component {
-  inputRef = createRef()
-  labelRef = createRef()
+const Checkbox = React.forwardRef(function (props, ref) {
+  const {
+    className,
+    disabled,
+    label,
+    id,
+    name,
+    radio,
+    readOnly,
+    slider,
+    tabIndex,
+    toggle,
+    type,
+    value,
+  } = props
+
+  const [checked, setChecked] = useAutoControlledValue({
+    state: props.checked,
+    defaultState: props.defaultChecked,
+    initialState: false,
+  })
+  const [indeterminate, setIndeterminate] = useAutoControlledValue({
+    state: props.indeterminate,
+    defaultState: props.defaultIndeterminate,
+    initialState: false,
+  })
+
+  const inputRef = useMergedRefs(React.useRef(), ref)
+  const labelRef = React.useRef()
+
+  const isClickFromMouse = React.useRef()
+
+  // ----------------------------------------
+  // Effects
+  // ----------------------------------------
+
+  useIsomorphicLayoutEffect(() => {
+    // Note: You can't directly set the indeterminate prop on the input, so we
+    // need to maintain a ref to the input and set it manually whenever the
+    // component updates.
+    if (inputRef.current) {
+      inputRef.current.indeterminate = !!indeterminate
+    }
+  })
 
-  componentDidMount() {
-    this.setIndeterminate()
-  }
+  // ----------------------------------------
+  // Helpers
+  // ----------------------------------------
 
-  componentDidUpdate() {
-    this.setIndeterminate()
+  const canToggle = () => {
+    return !disabled && !readOnly && !(radio && checked)
   }
 
-  canToggle = () => {
-    const { disabled, radio, readOnly } = this.props
-    const { checked } = this.state
+  const computeTabIndex = () => {
+    if (!_.isNil(tabIndex)) {
+      return tabIndex
+    }
 
-    return !disabled && !readOnly && !(radio && checked)
+    return disabled ? -1 : 0
   }
 
-  computeTabIndex = () => {
-    const { disabled, tabIndex } = this.props
+  // ----------------------------------------
+  // Handlers
+  // ----------------------------------------
 
-    if (!_.isNil(tabIndex)) return tabIndex
-    return disabled ? -1 : 0
+  const handleChange = (e) => {
+    if (!canToggle()) {
+      return
+    }
+
+    debug('handleChange()', _.get(e, 'target.tagName'))
+
+    _.invoke(props, 'onChange', e, {
+      ...props,
+      checked: !checked,
+      indeterminate: false,
+    })
+    setChecked(!checked)
+    setIndeterminate(false)
   }
 
-  handleClick = (e) => {
+  const handleClick = (e) => {
     debug('handleClick()', _.get(e, 'target.tagName'))
-    const { id } = this.props
-    const { checked, indeterminate } = this.state
 
-    const isInputClick = _.invoke(this.inputRef.current, 'contains', e.target)
-    const isLabelClick = _.invoke(this.labelRef.current, 'contains', e.target)
+    const isInputClick = _.invoke(inputRef.current, 'contains', e.target)
+    const isLabelClick = _.invoke(labelRef.current, 'contains', e.target)
     const isRootClick = !isLabelClick && !isInputClick
 
     const hasId = !_.isNil(id)
@@ -63,23 +117,23 @@ export default class Checkbox extends Component {
 
     // https://github.com/Semantic-Org/Semantic-UI-React/pull/3351
     if (!isLabelClickAndForwardedToInput) {
-      _.invoke(this.props, 'onClick', e, {
-        ...this.props,
+      _.invoke(props, 'onClick', e, {
+        ...props,
         checked: !checked,
         indeterminate: !!indeterminate,
       })
     }
 
-    if (this.isClickFromMouse) {
-      this.isClickFromMouse = false
+    if (isClickFromMouse.current) {
+      isClickFromMouse.current = false
 
       if (isLabelClick && !hasId) {
-        this.handleChange(e)
+        handleChange(e)
       }
 
       // Changes should be triggered for the slider variation
       if (isRootClick) {
-        this.handleChange(e)
+        handleChange(e)
       }
 
       if (isLabelClick && hasId) {
@@ -90,32 +144,17 @@ export default class Checkbox extends Component {
     }
   }
 
-  handleChange = (e) => {
-    const { checked } = this.state
-
-    if (!this.canToggle()) return
-    debug('handleChange()', _.get(e, 'target.tagName'))
-
-    _.invoke(this.props, 'onChange', e, {
-      ...this.props,
-      checked: !checked,
-      indeterminate: false,
-    })
-    this.setState({ checked: !checked, indeterminate: false })
-  }
-
-  handleMouseDown = (e) => {
+  const handleMouseDown = (e) => {
     debug('handleMouseDown()')
-    const { checked, indeterminate } = this.state
 
-    _.invoke(this.props, 'onMouseDown', e, {
-      ...this.props,
+    _.invoke(props, 'onMouseDown', e, {
+      ...props,
       checked: !!checked,
       indeterminate: !!indeterminate,
     })
 
     if (!e.defaultPrevented) {
-      _.invoke(this.inputRef.current, 'focus')
+      _.invoke(inputRef.current, 'focus')
     }
 
     // Heads up!
@@ -123,98 +162,75 @@ export default class Checkbox extends Component {
     e.preventDefault()
   }
 
-  handleMouseUp = (e) => {
+  const handleMouseUp = (e) => {
     debug('handleMouseUp()')
-    const { checked, indeterminate } = this.state
 
-    this.isClickFromMouse = true
-    _.invoke(this.props, 'onMouseUp', e, {
-      ...this.props,
+    isClickFromMouse.current = true
+    _.invoke(props, 'onMouseUp', e, {
+      ...props,
       checked: !!checked,
       indeterminate: !!indeterminate,
     })
   }
 
-  // Note: You can't directly set the indeterminate prop on the input, so we
-  // need to maintain a ref to the input and set it manually whenever the
-  // component updates.
-  setIndeterminate = () => {
-    const { indeterminate } = this.state
-
-    _.set(this.inputRef, 'current.indeterminate', !!indeterminate)
-  }
-
-  render() {
-    const {
-      className,
-      disabled,
-      label,
-      id,
-      name,
-      radio,
-      readOnly,
-      slider,
-      toggle,
-      type,
-      value,
-    } = this.props
-    const { checked, indeterminate } = this.state
-
-    const classes = cx(
-      'ui',
-      useKeyOnly(checked, 'checked'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(indeterminate, 'indeterminate'),
-      // auto apply fitted class to compact white space when there is no label
-      // https://semantic-ui.com/modules/checkbox.html#fitted
-      useKeyOnly(_.isNil(label), 'fitted'),
-      useKeyOnly(radio, 'radio'),
-      useKeyOnly(readOnly, 'read-only'),
-      useKeyOnly(slider, 'slider'),
-      useKeyOnly(toggle, 'toggle'),
-      'checkbox',
-      className,
-    )
-    const unhandled = getUnhandledProps(Checkbox, this.props)
-    const ElementType = getElementType(Checkbox, this.props)
-    const [htmlInputProps, rest] = partitionHTMLProps(unhandled, { htmlProps: htmlInputAttrs })
-
-    // Heads Up!
-    // Do not remove empty labels, they are required by SUI CSS
-    const labelElement = createHTMLLabel(label, {
-      defaultProps: { htmlFor: id },
-      autoGenerateKey: false,
-    }) || <label htmlFor={id} />
-
-    return (
-      <ElementType
-        {...rest}
-        className={classes}
-        onClick={this.handleClick}
-        onChange={this.handleChange}
-        onMouseDown={this.handleMouseDown}
-        onMouseUp={this.handleMouseUp}
-      >
-        <Ref innerRef={this.inputRef}>
-          <input
-            {...htmlInputProps}
-            checked={checked}
-            className='hidden'
-            disabled={disabled}
-            id={id}
-            name={name}
-            readOnly
-            tabIndex={this.computeTabIndex()}
-            type={type}
-            value={value}
-          />
-        </Ref>
-        <Ref innerRef={this.labelRef}>{labelElement}</Ref>
-      </ElementType>
-    )
-  }
-}
-
+  // ----------------------------------------
+  // Render
+  // ----------------------------------------
+
+  const classes = cx(
+    'ui',
+    useKeyOnly(checked, 'checked'),
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(indeterminate, 'indeterminate'),
+    // auto apply fitted class to compact white space when there is no label
+    // https://semantic-ui.com/modules/checkbox.html#fitted
+    useKeyOnly(_.isNil(label), 'fitted'),
+    useKeyOnly(radio, 'radio'),
+    useKeyOnly(readOnly, 'read-only'),
+    useKeyOnly(slider, 'slider'),
+    useKeyOnly(toggle, 'toggle'),
+    'checkbox',
+    className,
+  )
+  const unhandled = getUnhandledProps(Checkbox, props)
+  const ElementType = getElementType(Checkbox, props)
+  const [htmlInputProps, rest] = partitionHTMLProps(unhandled, { htmlProps: htmlInputAttrs })
+
+  // Heads Up!
+  // Do not remove empty labels, they are required by SUI CSS
+  const labelElement = createHTMLLabel(label, {
+    defaultProps: { htmlFor: id },
+    autoGenerateKey: false,
+  }) || <label htmlFor={id} />
+
+  return (
+    <ElementType
+      {...rest}
+      className={classes}
+      onClick={handleClick}
+      onChange={handleChange}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+    >
+      <input
+        {...htmlInputProps}
+        checked={checked}
+        className='hidden'
+        disabled={disabled}
+        id={id}
+        name={name}
+        readOnly
+        ref={inputRef}
+        tabIndex={computeTabIndex()}
+        type={type}
+        value={value}
+      />
+      {React.cloneElement(labelElement, { ref: labelRef })}
+    </ElementType>
+  )
+})
+
+Checkbox.displayName = 'Checkbox'
 Checkbox.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -307,4 +323,4 @@ Checkbox.defaultProps = {
   type: 'checkbox',
 }
 
-Checkbox.autoControlledProps = ['checked', 'indeterminate']
+export default Checkbox
diff --git a/src/modules/Dimmer/Dimmer.js b/src/modules/Dimmer/Dimmer.js
index 9972452f74..0d2b55d079 100644
--- a/src/modules/Dimmer/Dimmer.js
+++ b/src/modules/Dimmer/Dimmer.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import { createShorthandFactory, getUnhandledProps, isBrowser } from '../../lib'
 import Portal from '../../addons/Portal'
@@ -9,46 +9,49 @@ import DimmerInner from './DimmerInner'
 /**
  * A dimmer hides distractions to focus attention on particular content.
  */
-export default class Dimmer extends Component {
-  handlePortalMount = () => {
-    if (!isBrowser()) return
+const Dimmer = React.forwardRef(function (props, ref) {
+  const { active, page } = props
+  const rest = getUnhandledProps(Dimmer, props)
 
-    // Heads up, IE doesn't support second argument in add()
-    document.body.classList.add('dimmed')
-    document.body.classList.add('dimmable')
-  }
+  if (page) {
+    const handlePortalMount = () => {
+      if (!isBrowser()) {
+        return
+      }
 
-  handlePortalUnmount = () => {
-    if (!isBrowser()) return
+      // Heads up, IE doesn't support second argument in add()
+      document.body.classList.add('dimmed')
+      document.body.classList.add('dimmable')
+    }
 
-    // Heads up, IE doesn't support second argument in add()
-    document.body.classList.remove('dimmed')
-    document.body.classList.remove('dimmable')
-  }
+    const handlePortalUnmount = () => {
+      if (!isBrowser()) {
+        return
+      }
 
-  render() {
-    const { active, page } = this.props
-    const rest = getUnhandledProps(Dimmer, this.props)
-
-    if (page) {
-      return (
-        <Portal
-          closeOnEscape={false}
-          closeOnDocumentClick={false}
-          onMount={this.handlePortalMount}
-          onUnmount={this.handlePortalUnmount}
-          open={active}
-          openOnTriggerClick={false}
-        >
-          <DimmerInner {...rest} active={active} page={page} />
-        </Portal>
-      )
+      // Heads up, IE doesn't support second argument in add()
+      document.body.classList.remove('dimmed')
+      document.body.classList.remove('dimmable')
     }
 
-    return <DimmerInner {...rest} active={active} page={page} />
+    return (
+      <Portal
+        closeOnEscape={false}
+        closeOnDocumentClick={false}
+        onMount={handlePortalMount}
+        onUnmount={handlePortalUnmount}
+        open={active}
+        openOnTriggerClick={false}
+      >
+        <DimmerInner {...rest} active={active} page={page} ref={ref} />
+      </Portal>
+    )
   }
-}
 
+  return <DimmerInner {...rest} active={active} page={page} ref={ref} />
+})
+
+Dimmer.displayName = 'Dimmer'
 Dimmer.propTypes = {
   /** An active dimmer will dim its parent container. */
   active: PropTypes.bool,
@@ -61,3 +64,5 @@ Dimmer.Dimmable = DimmerDimmable
 Dimmer.Inner = DimmerInner
 
 Dimmer.create = createShorthandFactory(Dimmer, (value) => ({ content: value }))
+
+export default Dimmer
diff --git a/src/modules/Dimmer/DimmerDimmable.js b/src/modules/Dimmer/DimmerDimmable.js
index fe04d664ad..5219cf8d1f 100644
--- a/src/modules/Dimmer/DimmerDimmable.js
+++ b/src/modules/Dimmer/DimmerDimmable.js
@@ -13,7 +13,7 @@ import {
 /**
  * A dimmable sub-component for Dimmer.
  */
-function DimmerDimmable(props) {
+const DimmerDimmable = React.forwardRef(function (props, ref) {
   const { blurring, className, children, content, dimmed } = props
 
   const classes = cx(
@@ -26,12 +26,13 @@ function DimmerDimmable(props) {
   const ElementType = getElementType(DimmerDimmable, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+DimmerDimmable.displayName = 'DimmerDimmable'
 DimmerDimmable.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index 79d96746c7..78680f065b 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -1,8 +1,7 @@
-import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, createRef } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -12,94 +11,79 @@ import {
   getUnhandledProps,
   useKeyOnly,
   useVerticalAlignProp,
+  useIsomorphicLayoutEffect,
+  useMergedRefs,
 } from '../../lib'
 
 /**
  * An inner element for a Dimmer.
  */
-export default class DimmerInner extends Component {
-  containerRef = createRef()
-  contentRef = createRef()
-
-  componentDidMount() {
-    const { active } = this.props
-
-    this.toggleStyles(active)
-  }
-
-  componentDidUpdate(prevProps) {
-    const { active: currentActive } = this.props
-    const { active: prevActive } = prevProps
-
-    if (prevActive !== currentActive) this.toggleStyles(currentActive)
-  }
-
-  handleClick = (e) => {
-    const contentRef = this.contentRef.current
-
-    _.invoke(this.props, 'onClick', e, this.props)
-
-    if (contentRef && contentRef !== e.target && doesNodeContainClick(contentRef, e)) {
+const DimmerInner = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    children,
+    className,
+    content,
+    disabled,
+    inverted,
+    page,
+    simple,
+    verticalAlign,
+  } = props
+
+  const containerRef = useMergedRefs(ref, React.useRef())
+  const contentRef = React.useRef()
+
+  useIsomorphicLayoutEffect(() => {
+    if (!containerRef.current?.style) {
       return
     }
 
-    _.invoke(this.props, 'onClickOutside', e, this.props)
-  }
-
-  toggleStyles(active) {
-    const containerRef = this.containerRef.current
-
-    if (!containerRef || !containerRef.style) return
     if (active) {
-      containerRef.style.setProperty('display', 'flex', 'important')
+      containerRef.current.style.setProperty('display', 'flex', 'important')
     } else {
-      containerRef.style.removeProperty('display')
+      containerRef.current.style.removeProperty('display')
     }
-  }
+  }, [active])
 
-  render() {
-    const {
-      active,
-      children,
-      className,
-      content,
-      disabled,
-      inverted,
-      page,
-      simple,
-      verticalAlign,
-    } = this.props
-
-    const classes = cx(
-      'ui',
-      useKeyOnly(active, 'active transition visible'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(page, 'page'),
-      useKeyOnly(simple, 'simple'),
-      useVerticalAlignProp(verticalAlign),
-      'dimmer',
-      className,
-    )
-    const rest = getUnhandledProps(DimmerInner, this.props)
-    const ElementType = getElementType(DimmerInner, this.props)
-
-    const childrenContent = childrenUtils.isNil(children) ? content : children
-
-    return (
-      <Ref innerRef={this.containerRef}>
-        <ElementType {...rest} className={classes} onClick={this.handleClick}>
-          {childrenContent && (
-            <div className='content' ref={this.contentRef}>
-              {childrenContent}
-            </div>
-          )}
-        </ElementType>
-      </Ref>
-    )
+  const handleClick = (e) => {
+    _.invoke(props, 'onClick', e, props)
+
+    if (contentRef.current !== e.target && doesNodeContainClick(contentRef.current, e)) {
+      return
+    }
+
+    _.invoke(props, 'onClickOutside', e, props)
   }
-}
 
+  const classes = cx(
+    'ui',
+    useKeyOnly(active, 'active transition visible'),
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(page, 'page'),
+    useKeyOnly(simple, 'simple'),
+    useVerticalAlignProp(verticalAlign),
+    'dimmer',
+    className,
+  )
+  const rest = getUnhandledProps(DimmerInner, props)
+  const ElementType = getElementType(DimmerInner, props)
+
+  const childrenContent = childrenUtils.isNil(children) ? content : children
+
+  return (
+    <ElementType {...rest} className={classes} onClick={handleClick} ref={containerRef}>
+      {childrenContent && (
+        <div className='content' ref={contentRef}>
+          {childrenContent}
+        </div>
+      )}
+    </ElementType>
+  )
+})
+
+DimmerInner.displayName = 'DimmerInner'
 DimmerInner.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -147,3 +131,5 @@ DimmerInner.propTypes = {
   /** A dimmer can have its content top or bottom aligned. */
   verticalAlign: PropTypes.oneOf(['bottom', 'top']),
 }
+
+export default DimmerInner
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index ff4530ec75..7c7a8a5bcd 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -1,5 +1,4 @@
 import EventStack from '@semantic-ui-react/event-stack'
-import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
@@ -16,6 +15,7 @@ import {
   getUnhandledProps,
   makeDebugger,
   objectDiff,
+  setRef,
   useKeyOnly,
   useKeyOrValueAndKey,
 } from '../../lib'
@@ -65,11 +65,20 @@ function renderItemContent(item) {
  * @see Select
  * @see Menu
  */
-export default class Dropdown extends Component {
+const Dropdown = React.forwardRef((props, ref) => {
+  return <DropdownInner {...props} innerRef={ref} />
+})
+
+class DropdownInner extends Component {
   searchRef = createRef()
   sizerRef = createRef()
   ref = createRef()
 
+  handleRef = (el) => {
+    this.ref.current = el
+    setRef(this.props.innerRef, el)
+  }
+
   getInitialAutoControlledState() {
     return { focus: false, searchQuery: '' }
   }
@@ -765,6 +774,7 @@ export default class Dropdown extends Component {
       _.invoke(predefinedProps, 'onChange', e, inputProps)
       this.handleSearchChange(e, inputProps)
     },
+    ref: this.searchRef,
   })
 
   hasValue = () => {
@@ -901,18 +911,15 @@ export default class Dropdown extends Component {
     const { searchQuery } = this.state
 
     return (
-      search && (
-        <Ref innerRef={this.searchRef}>
-          {DropdownSearchInput.create(searchInput, {
-            defaultProps: {
-              style: { width: this.computeSearchInputWidth() },
-              tabIndex: this.computeSearchInputTabIndex(),
-              value: searchQuery,
-            },
-            overrideProps: this.handleSearchInputOverrides,
-          })}
-        </Ref>
-      )
+      search &&
+      DropdownSearchInput.create(searchInput, {
+        defaultProps: {
+          style: { width: this.computeSearchInputWidth() },
+          tabIndex: this.computeSearchInputTabIndex(),
+          value: searchQuery,
+        },
+        overrideProps: this.handleSearchInputOverrides,
+      })
     )
   }
 
@@ -1085,35 +1092,34 @@ export default class Dropdown extends Component {
     const ariaOptions = this.getDropdownAriaOptions(ElementType, this.props)
 
     return (
-      <Ref innerRef={this.ref}>
-        <ElementType
-          {...rest}
-          {...ariaOptions}
-          className={classes}
-          onBlur={this.handleBlur}
-          onClick={this.handleClick}
-          onKeyDown={this.handleKeyDown}
-          onMouseDown={this.handleMouseDown}
-          onFocus={this.handleFocus}
-          onChange={this.handleChange}
-          tabIndex={this.computeTabIndex()}
-        >
-          {this.renderLabels()}
-          {this.renderSearchInput()}
-          {this.renderSearchSizer()}
-          {trigger || this.renderText()}
-          {Icon.create(icon, {
-            overrideProps: this.handleIconOverrides,
-            autoGenerateKey: false,
-          })}
-          {this.renderMenu()}
-
-          {open && <EventStack name='keydown' on={this.closeOnEscape} />}
-          {open && <EventStack name='click' on={this.closeOnDocumentClick} />}
-
-          {focus && <EventStack name='keydown' on={this.removeItemOnBackspace} />}
-        </ElementType>
-      </Ref>
+      <ElementType
+        {...rest}
+        {...ariaOptions}
+        className={classes}
+        onBlur={this.handleBlur}
+        onClick={this.handleClick}
+        onKeyDown={this.handleKeyDown}
+        onMouseDown={this.handleMouseDown}
+        onFocus={this.handleFocus}
+        onChange={this.handleChange}
+        tabIndex={this.computeTabIndex()}
+        ref={this.handleRef}
+      >
+        {this.renderLabels()}
+        {this.renderSearchInput()}
+        {this.renderSearchSizer()}
+        {trigger || this.renderText()}
+        {Icon.create(icon, {
+          overrideProps: this.handleIconOverrides,
+          autoGenerateKey: false,
+        })}
+        {this.renderMenu()}
+
+        {open && <EventStack name='keydown' on={this.closeOnEscape} />}
+        {open && <EventStack name='click' on={this.closeOnDocumentClick} />}
+
+        {focus && <EventStack name='keydown' on={this.removeItemOnBackspace} />}
+      </ElementType>
     )
   }
 }
@@ -1435,6 +1441,7 @@ Dropdown.propTypes = {
   wrapSelection: PropTypes.bool,
 }
 
+Dropdown.displayName = 'Dropdown'
 Dropdown.defaultProps = {
   additionLabel: 'Add ',
   additionPosition: 'top',
@@ -1452,7 +1459,12 @@ Dropdown.defaultProps = {
   wrapSelection: true,
 }
 
-Dropdown.autoControlledProps = ['open', 'searchQuery', 'selectedLabel', 'value', 'upward']
+DropdownInner.autoControlledProps = ['open', 'searchQuery', 'selectedLabel', 'value', 'upward']
+
+if (process.env.NODE_ENV !== 'production') {
+  DropdownInner.defaultProps = Dropdown.defaultProps
+  DropdownInner.propTypes = Dropdown.propTypes
+}
 
 Dropdown.Divider = DropdownDivider
 Dropdown.Header = DropdownHeader
@@ -1460,3 +1472,5 @@ Dropdown.Item = DropdownItem
 Dropdown.Menu = DropdownMenu
 Dropdown.SearchInput = DropdownSearchInput
 Dropdown.Text = DropdownText
+
+export default Dropdown
diff --git a/src/modules/Dropdown/DropdownDivider.js b/src/modules/Dropdown/DropdownDivider.js
index f784bce196..e4f283bbe5 100644
--- a/src/modules/Dropdown/DropdownDivider.js
+++ b/src/modules/Dropdown/DropdownDivider.js
@@ -7,15 +7,17 @@ import { getElementType, getUnhandledProps } from '../../lib'
 /**
  * A dropdown menu can contain dividers to separate related content.
  */
-function DropdownDivider(props) {
+const DropdownDivider = React.forwardRef(function (props, ref) {
   const { className } = props
+
   const classes = cx('divider', className)
   const rest = getUnhandledProps(DropdownDivider, props)
   const ElementType = getElementType(DropdownDivider, props)
 
-  return <ElementType {...rest} className={classes} />
-}
+  return <ElementType {...rest} className={classes} ref={ref} />
+})
 
+DropdownDivider.displayName = 'DropdownDivider'
 DropdownDivider.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Dropdown/DropdownHeader.js b/src/modules/Dropdown/DropdownHeader.js
index 7d848d317f..9cb15436a0 100644
--- a/src/modules/Dropdown/DropdownHeader.js
+++ b/src/modules/Dropdown/DropdownHeader.js
@@ -14,7 +14,7 @@ import Icon from '../../elements/Icon'
 /**
  * A dropdown menu can contain a header.
  */
-function DropdownHeader(props) {
+const DropdownHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, icon } = props
 
   const classes = cx('header', className)
@@ -23,20 +23,21 @@ function DropdownHeader(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {Icon.create(icon, { autoGenerateKey: false })}
       {content}
     </ElementType>
   )
-}
+})
 
+DropdownHeader.displayName = 'DropdownHeader'
 DropdownHeader.propTypes = {
   /** An element type to render as (string or function) */
   as: PropTypes.elementType,
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 5d7c3fd270..5f4fb65419 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -20,83 +20,82 @@ import Label from '../../elements/Label'
 /**
  * An item sub-component for Dropdown component.
  */
-class DropdownItem extends Component {
-  handleClick = (e) => {
-    _.invoke(this.props, 'onClick', e, this.props)
+const DropdownItem = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    children,
+    className,
+    content,
+    disabled,
+    description,
+    flag,
+    icon,
+    image,
+    label,
+    selected,
+    text,
+  } = props
+
+  const handleClick = (e) => {
+    _.invoke(props, 'onClick', e, props)
   }
 
-  render() {
-    const {
-      active,
-      children,
-      className,
-      content,
-      disabled,
-      description,
-      flag,
-      icon,
-      image,
-      label,
-      selected,
-      text,
-    } = this.props
-
-    const classes = cx(
-      useKeyOnly(active, 'active'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(selected, 'selected'),
-      'item',
-      className,
-    )
-    // add default dropdown icon if item contains another menu
-    const iconName = _.isNil(icon)
-      ? childrenUtils.someByType(children, 'DropdownMenu') && 'dropdown'
-      : icon
-    const rest = getUnhandledProps(DropdownItem, this.props)
-    const ElementType = getElementType(DropdownItem, this.props)
-    const ariaOptions = {
-      role: 'option',
-      'aria-disabled': disabled,
-      'aria-checked': active,
-      'aria-selected': selected,
-    }
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} {...ariaOptions} className={classes} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
-    }
-
-    const flagElement = Flag.create(flag, { autoGenerateKey: false })
-    const iconElement = Icon.create(iconName, { autoGenerateKey: false })
-    const imageElement = Image.create(image, { autoGenerateKey: false })
-    const labelElement = Label.create(label, { autoGenerateKey: false })
-    const descriptionElement = createShorthand('span', (val) => ({ children: val }), description, {
-      defaultProps: { className: 'description' },
-      autoGenerateKey: false,
-    })
-    const textElement = createShorthand(
-      'span',
-      (val) => ({ children: val }),
-      childrenUtils.isNil(content) ? text : content,
-      { defaultProps: { className: 'text' }, autoGenerateKey: false },
-    )
+  const classes = cx(
+    useKeyOnly(active, 'active'),
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(selected, 'selected'),
+    'item',
+    className,
+  )
+  // add default dropdown icon if item contains another menu
+  const iconName = _.isNil(icon)
+    ? childrenUtils.someByType(children, 'DropdownMenu') && 'dropdown'
+    : icon
+  const rest = getUnhandledProps(DropdownItem, props)
+  const ElementType = getElementType(DropdownItem, props)
+  const ariaOptions = {
+    role: 'option',
+    'aria-disabled': disabled,
+    'aria-checked': active,
+    'aria-selected': selected,
+  }
 
+  if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} {...ariaOptions} className={classes} onClick={this.handleClick}>
-        {imageElement}
-        {iconElement}
-        {flagElement}
-        {labelElement}
-        {descriptionElement}
-        {textElement}
+      <ElementType {...rest} {...ariaOptions} className={classes} onClick={handleClick} ref={ref}>
+        {children}
       </ElementType>
     )
   }
-}
 
+  const flagElement = Flag.create(flag, { autoGenerateKey: false })
+  const iconElement = Icon.create(iconName, { autoGenerateKey: false })
+  const imageElement = Image.create(image, { autoGenerateKey: false })
+  const labelElement = Label.create(label, { autoGenerateKey: false })
+  const descriptionElement = createShorthand('span', (val) => ({ children: val }), description, {
+    defaultProps: { className: 'description' },
+    autoGenerateKey: false,
+  })
+  const textElement = createShorthand(
+    'span',
+    (val) => ({ children: val }),
+    childrenUtils.isNil(content) ? text : content,
+    { defaultProps: { className: 'text' }, autoGenerateKey: false },
+  )
+
+  return (
+    <ElementType {...rest} {...ariaOptions} className={classes} onClick={handleClick} ref={ref}>
+      {imageElement}
+      {iconElement}
+      {flagElement}
+      {labelElement}
+      {descriptionElement}
+      {textElement}
+    </ElementType>
+  )
+})
+
+DropdownItem.displayName = 'DropdownItem'
 DropdownItem.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index b16b6fdadc..cdc53ef6b1 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -13,8 +13,9 @@ import {
 /**
  * A dropdown menu can contain a menu.
  */
-function DropdownMenu(props) {
+const DropdownMenu = React.forwardRef(function (props, ref) {
   const { children, className, content, direction, open, scrolling } = props
+
   const classes = cx(
     direction,
     useKeyOnly(open, 'visible'),
@@ -26,12 +27,13 @@ function DropdownMenu(props) {
   const ElementType = getElementType(DropdownMenu, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+DropdownMenu.displayName = 'DropdownMenu'
 DropdownMenu.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 3f36ebae4d..8f46f28f1c 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -1,40 +1,42 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
-import { createShorthandFactory, getUnhandledProps } from '../../lib'
+import { createShorthandFactory, getElementType, getUnhandledProps } from '../../lib'
 
 /**
  * A search item sub-component for Dropdown component.
  */
-class DropdownSearchInput extends Component {
-  handleChange = (e) => {
-    const value = _.get(e, 'target.value')
+const DropdownSearchInput = React.forwardRef(function (props, ref) {
+  const { autoComplete, className, tabIndex, type, value } = props
 
-    _.invoke(this.props, 'onChange', e, { ...this.props, value })
+  const handleChange = (e) => {
+    const newValue = _.get(e, 'target.value')
+
+    _.invoke(props, 'onChange', e, { ...props, value: newValue })
   }
 
-  render() {
-    const { autoComplete, className, tabIndex, type, value } = this.props
-    const classes = cx('search', className)
-    const rest = getUnhandledProps(DropdownSearchInput, this.props)
+  const classes = cx('search', className)
+  const ElementType = getElementType(DropdownSearchInput, props)
+  const rest = getUnhandledProps(DropdownSearchInput, props)
 
-    return (
-      <input
-        {...rest}
-        aria-autocomplete='list'
-        autoComplete={autoComplete}
-        className={classes}
-        onChange={this.handleChange}
-        tabIndex={tabIndex}
-        type={type}
-        value={value}
-      />
-    )
-  }
-}
+  return (
+    <ElementType
+      aria-autocomplete='list'
+      {...rest}
+      autoComplete={autoComplete}
+      className={classes}
+      onChange={handleChange}
+      ref={ref}
+      tabIndex={tabIndex}
+      type={type}
+      value={value}
+    />
+  )
+})
 
+DropdownSearchInput.displayName = 'DropdownSearchInput'
 DropdownSearchInput.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -56,6 +58,7 @@ DropdownSearchInput.propTypes = {
 }
 
 DropdownSearchInput.defaultProps = {
+  as: 'input',
   autoComplete: 'off',
   type: 'text',
 }
diff --git a/src/modules/Dropdown/DropdownText.js b/src/modules/Dropdown/DropdownText.js
index 7cf9a0246b..fd7a106947 100644
--- a/src/modules/Dropdown/DropdownText.js
+++ b/src/modules/Dropdown/DropdownText.js
@@ -13,19 +13,27 @@ import {
 /**
  * A dropdown contains a selected value.
  */
-function DropdownText(props) {
+const DropdownText = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('divider', className)
   const rest = getUnhandledProps(DropdownText, props)
   const ElementType = getElementType(DropdownText, props)
 
   return (
-    <ElementType aria-atomic aria-live='polite' role='alert' {...rest} className={classes}>
+    <ElementType
+      aria-atomic
+      aria-live='polite'
+      role='alert'
+      {...rest}
+      className={classes}
+      ref={ref}
+    >
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+DropdownText.displayName = 'DropdownText'
 DropdownText.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index 55bb2c0d82..06dddd6bff 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -1,33 +1,46 @@
 import cx from 'clsx'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  ModernAutoControlledComponent as Component,
   childrenUtils,
   createHTMLIframe,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   useKeyOnly,
+  useAutoControlledValue,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
 /**
  * An embed displays content from other websites like YouTube videos or Google Maps.
  */
-export default class Embed extends Component {
-  getSrc() {
-    const {
-      autoplay = true,
-      brandedUI = false,
-      color = '#444444',
-      hd = true,
-      id,
-      source,
-      url,
-    } = this.props
-
+const Embed = React.forwardRef(function (props, ref) {
+  const {
+    aspectRatio,
+    autoplay = true,
+    brandedUI = false,
+    children,
+    className,
+    color = '#444444',
+    content,
+    hd = true,
+    icon,
+    id,
+    iframe,
+    placeholder,
+    source,
+    url,
+  } = props
+  const [active, setActive] = useAutoControlledValue({
+    state: props.active,
+    defaultState: props.defaultActive,
+    initialState: false,
+  })
+
+  const getSrc = () => {
     if (source === 'youtube') {
       return [
         `//www.youtube.com/embed/${id}`,
@@ -56,50 +69,35 @@ export default class Embed extends Component {
     return url
   }
 
-  handleClick = (e) => {
-    const { onClick } = this.props
-    const { active } = this.state
-
-    if (onClick) onClick(e, { ...this.props, active: true })
-    if (!active) this.setState({ active: true })
+  const handleClick = (e) => {
+    _.invoke(props, 'onClick', e, { ...props, active: true })
+    if (!active) {
+      setActive(true)
+    }
   }
 
-  render() {
-    const { aspectRatio, className, icon, placeholder } = this.props
-    const { active } = this.state
-
-    const classes = cx('ui', aspectRatio, useKeyOnly(active, 'active'), 'embed', className)
-    const rest = getUnhandledProps(Embed, this.props)
-    const ElementType = getElementType(Embed, this.props)
-
-    const iconShorthand = icon !== undefined ? icon : 'video play'
-
-    return (
-      <ElementType {...rest} className={classes} onClick={this.handleClick}>
-        {Icon.create(iconShorthand, { autoGenerateKey: false })}
-        {placeholder && <img className='placeholder' src={placeholder} />}
-        {this.renderEmbed()}
-      </ElementType>
-    )
-  }
+  const renderEmbed = () => {
+    if (!active) {
+      return null
+    }
 
-  renderEmbed() {
-    const { children, content, iframe, source } = this.props
-    const { active } = this.state
+    if (!childrenUtils.isNil(children)) {
+      return <div className='embed'>{children}</div>
+    }
 
-    if (!active) return null
-    if (!childrenUtils.isNil(children)) return <div className='embed'>{children}</div>
-    if (!childrenUtils.isNil(content)) return <div className='embed'>{content}</div>
+    if (!childrenUtils.isNil(content)) {
+      return <div className='embed'>{content}</div>
+    }
 
     return (
       <div className='embed'>
-        {createHTMLIframe(childrenUtils.isNil(iframe) ? this.getSrc() : iframe, {
+        {createHTMLIframe(childrenUtils.isNil(iframe) ? getSrc() : iframe, {
           defaultProps: {
             allowFullScreen: false,
             frameBorder: 0,
             height: '100%',
             scrolling: 'no',
-            src: this.getSrc(),
+            src: getSrc(),
             title: `Embedded content from ${source}.`,
             width: '100%',
           },
@@ -108,8 +106,23 @@ export default class Embed extends Component {
       </div>
     )
   }
-}
 
+  const classes = cx('ui', aspectRatio, useKeyOnly(active, 'active'), 'embed', className)
+  const rest = getUnhandledProps(Embed, props)
+  const ElementType = getElementType(Embed, props)
+
+  const iconShorthand = icon !== undefined ? icon : 'video play'
+
+  return (
+    <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+      {Icon.create(iconShorthand, { autoGenerateKey: false })}
+      {placeholder && <img className='placeholder' src={placeholder} />}
+      {renderEmbed()}
+    </ElementType>
+  )
+})
+
+Embed.displayName = 'Embed'
 Embed.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -177,4 +190,4 @@ Embed.propTypes = {
   url: customPropTypes.every([customPropTypes.disallow(['source']), PropTypes.string]),
 }
 
-Embed.autoControlledProps = ['active']
+export default Embed
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index 83268b2d31..cf35c358bb 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -1,12 +1,10 @@
-import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { createRef, isValidElement } from 'react'
+import React from 'react'
 import shallowEqual from 'shallowequal'
 
 import {
-  ModernAutoControlledComponent as Component,
   childrenUtils,
   customPropTypes,
   doesNodeContainClick,
@@ -16,6 +14,8 @@ import {
   isBrowser,
   makeDebugger,
   useKeyOnly,
+  useAutoControlledValue,
+  useMergedRefs,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 import Portal from '../../addons/Portal'
@@ -33,246 +33,262 @@ const debug = makeDebugger('modal')
  * @see Confirm
  * @see Portal
  */
-class Modal extends Component {
-  legacy = isBrowser() && isLegacy()
-  ref = createRef()
-  dimmerRef = createRef()
-  latestDocumentMouseDownEvent = null
-
-  componentWillUnmount() {
-    debug('componentWillUnmount()')
-    this.handlePortalUnmount()
-  }
-
+const Modal = React.forwardRef(function (props, ref) {
+  const {
+    actions,
+    basic,
+    centered,
+    children,
+    className,
+    closeIcon,
+    closeOnDimmerClick,
+    closeOnDocumentClick,
+    content,
+    dimmer,
+    eventPool,
+    header,
+    size,
+    style,
+    trigger,
+  } = props
   // Do not access document when server side rendering
-  getMountNode = () => (isBrowser() ? this.props.mountNode || document.body : null)
+  const mountNode = isBrowser() ? props.mountNode || document.body : null
 
-  handleActionsOverrides = (predefinedProps) => ({
-    onActionClick: (e, actionProps) => {
-      _.invoke(predefinedProps, 'onActionClick', e, actionProps)
-      _.invoke(this.props, 'onActionClick', e, this.props)
-
-      this.handleClose(e)
-    },
+  const [open, setOpen] = useAutoControlledValue({
+    state: props.open,
+    defaultState: props.defaultOpen,
+    initialState: false,
   })
 
-  handleClose = (e) => {
+  const [legacyStyles, setLegacyStyles] = React.useState({})
+  const [scrolling, setScrolling] = React.useState(false)
+
+  const [legacy] = React.useState(() => isBrowser() && isLegacy())
+
+  const elementRef = useMergedRefs(ref, React.useRef())
+  const dimmerRef = React.useRef()
+
+  const animationRequestId = React.useRef()
+  const latestDocumentMouseDownEvent = React.useRef()
+
+  React.useEffect(() => {
+    return () => {
+      cancelAnimationFrame(animationRequestId.current)
+      latestDocumentMouseDownEvent.current = null
+    }
+  }, [])
+
+  // ----------------------------------------
+  // Styles calc
+  // ----------------------------------------
+
+  const setPositionAndClassNames = () => {
+    if (elementRef.current) {
+      const rect = elementRef.current.getBoundingClientRect()
+      const isFitted = canFit(rect)
+
+      setScrolling(!isFitted)
+
+      // Styles should be computed for IE11
+      const computedLegacyStyles = legacy ? getLegacyStyles(isFitted, centered, rect) : {}
+
+      if (!shallowEqual(computedLegacyStyles, computedLegacyStyles)) {
+        setLegacyStyles(computedLegacyStyles)
+      }
+    }
+
+    animationRequestId.current = requestAnimationFrame(setPositionAndClassNames)
+  }
+
+  // ----------------------------------------
+  // Document Event Handlers
+  // ----------------------------------------
+
+  const handleClose = (e) => {
     debug('close()')
 
-    this.setState({ open: false })
-    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
+    setOpen(false)
+    _.invoke(props, 'onClose', e, { ...props, open: false })
   }
 
-  handleDocumentMouseDown = (e) => {
-    this.latestDocumentMouseDownEvent = e
+  const handleDocumentMouseDown = (e) => {
+    latestDocumentMouseDownEvent.current = e
   }
 
-  handleDocumentClick = (e) => {
+  const handleDocumentClick = (e) => {
     debug('handleDocumentClick()')
-    const { closeOnDimmerClick } = this.props
-    const currentDocumentMouseDownEvent = this.latestDocumentMouseDownEvent
-    this.latestDocumentMouseDownEvent = null
+
+    const currentDocumentMouseDownEvent = latestDocumentMouseDownEvent.current
+    latestDocumentMouseDownEvent.current = null
 
     if (
       !closeOnDimmerClick ||
-      doesNodeContainClick(this.ref.current, currentDocumentMouseDownEvent) ||
-      doesNodeContainClick(this.ref.current, e)
+      doesNodeContainClick(elementRef.current, currentDocumentMouseDownEvent) ||
+      doesNodeContainClick(elementRef.current, e)
     )
       return
 
-    this.setState({ open: false })
-    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
+    setOpen(false)
+    _.invoke(props, 'onClose', e, { ...props, open: false })
   }
 
-  handleIconOverrides = (predefinedProps) => ({
-    onClick: (e) => {
-      _.invoke(predefinedProps, 'onClick', e)
-      this.handleClose(e)
-    },
-  })
-
-  handleOpen = (e) => {
+  const handleOpen = (e) => {
     debug('open()')
 
-    _.invoke(this.props, 'onOpen', e, { ...this.props, open: true })
-    this.setState({ open: true })
+    setOpen(true)
+    _.invoke(props, 'onOpen', e, { ...props, open: true })
   }
 
-  handlePortalMount = (e) => {
-    const { eventPool } = this.props
+  const handlePortalMount = (e) => {
     debug('handlePortalMount()', { eventPool })
 
-    this.setState({ scrolling: false })
-    this.setPositionAndClassNames()
+    setScrolling(false)
+    setPositionAndClassNames()
 
-    eventStack.sub('mousedown', this.handleDocumentMouseDown, {
+    eventStack.sub('mousedown', handleDocumentMouseDown, {
       pool: eventPool,
-      target: this.dimmerRef.current,
+      target: dimmerRef.current,
     })
-    eventStack.sub('click', this.handleDocumentClick, {
+    eventStack.sub('click', handleDocumentClick, {
       pool: eventPool,
-      target: this.dimmerRef.current,
+      target: dimmerRef.current,
     })
-    _.invoke(this.props, 'onMount', e, this.props)
+    _.invoke(props, 'onMount', e, props)
   }
 
-  handlePortalUnmount = (e) => {
-    const { eventPool } = this.props
+  const handlePortalUnmount = (e) => {
     debug('handlePortalUnmount()', { eventPool })
 
-    cancelAnimationFrame(this.animationRequestId)
-    eventStack.unsub('mousedown', this.handleDocumentMouseDown, {
+    cancelAnimationFrame(animationRequestId.current)
+    eventStack.unsub('mousedown', handleDocumentMouseDown, {
       pool: eventPool,
-      target: this.dimmerRef.current,
+      target: dimmerRef.current,
     })
-    eventStack.unsub('click', this.handleDocumentClick, {
+    eventStack.unsub('click', handleDocumentClick, {
       pool: eventPool,
-      target: this.dimmerRef.current,
+      target: dimmerRef.current,
     })
-    _.invoke(this.props, 'onUnmount', e, this.props)
-  }
-
-  setPositionAndClassNames = () => {
-    const { centered } = this.props
-
-    let scrolling
-    const newState = {}
-
-    if (this.ref.current) {
-      const rect = this.ref.current.getBoundingClientRect()
-      const isFitted = canFit(rect)
-
-      scrolling = !isFitted
-      // Styles should be computed for IE11
-      const legacyStyles = this.legacy ? getLegacyStyles(isFitted, centered, rect) : {}
-
-      if (!shallowEqual(this.state.legacyStyles, legacyStyles)) {
-        newState.legacyStyles = legacyStyles
-      }
-
-      if (this.state.scrolling !== scrolling) {
-        newState.scrolling = scrolling
-      }
-    }
-
-    if (!_.isEmpty(newState)) this.setState(newState)
-    this.animationRequestId = requestAnimationFrame(this.setPositionAndClassNames)
+    _.invoke(props, 'onUnmount', e, props)
   }
 
-  renderContent = (rest) => {
-    const {
-      actions,
-      basic,
-      children,
-      className,
-      closeIcon,
-      content,
-      header,
-      size,
-      style,
-    } = this.props
-    const { legacyStyles, scrolling } = this.state
+  // ----------------------------------------
+  // Render
+  // ----------------------------------------
 
+  const renderContent = (rest) => {
     const classes = cx(
       'ui',
       size,
       useKeyOnly(basic, 'basic'),
-      useKeyOnly(this.legacy, 'legacy'),
+      useKeyOnly(legacy, 'legacy'),
       useKeyOnly(scrolling, 'scrolling'),
       'modal transition visible active',
       className,
     )
-    const ElementType = getElementType(Modal, this.props)
+    const ElementType = getElementType(Modal, props)
 
     const closeIconName = closeIcon === true ? 'close' : closeIcon
-    const closeIconJSX = Icon.create(closeIconName, { overrideProps: this.handleIconOverrides })
+    const closeIconJSX = Icon.create(closeIconName, {
+      overrideProps: (predefinedProps) => ({
+        onClick: (e) => {
+          _.invoke(predefinedProps, 'onClick', e)
+          handleClose(e)
+        },
+      }),
+    })
 
     return (
-      <Ref innerRef={this.ref}>
-        <ElementType {...rest} className={classes} style={{ ...legacyStyles, ...style }}>
-          {closeIconJSX}
-          {childrenUtils.isNil(children) ? (
-            <>
-              {ModalHeader.create(header, { autoGenerateKey: false })}
-              {ModalContent.create(content, { autoGenerateKey: false })}
-              {ModalActions.create(actions, { overrideProps: this.handleActionsOverrides })}
-            </>
-          ) : (
-            children
-          )}
-        </ElementType>
-      </Ref>
+      <ElementType
+        {...rest}
+        className={classes}
+        ref={elementRef}
+        style={{ ...legacyStyles, ...style }}
+      >
+        {closeIconJSX}
+        {childrenUtils.isNil(children) ? (
+          <>
+            {ModalHeader.create(header, { autoGenerateKey: false })}
+            {ModalContent.create(content, { autoGenerateKey: false })}
+            {ModalActions.create(actions, {
+              overrideProps: (predefinedProps) => ({
+                onActionClick: (e, actionProps) => {
+                  _.invoke(predefinedProps, 'onActionClick', e, actionProps)
+                  _.invoke(props, 'onActionClick', e, props)
+
+                  handleClose(e)
+                },
+              }),
+            })}
+          </>
+        ) : (
+          children
+        )}
+      </ElementType>
     )
   }
 
-  render() {
-    const { centered, closeOnDocumentClick, dimmer, eventPool, trigger } = this.props
-    const { open, scrolling } = this.state
-    const mountNode = this.getMountNode()
-
-    // Short circuit when server side rendering
-    if (!isBrowser()) {
-      return isValidElement(trigger) ? trigger : null
-    }
-
-    const unhandled = getUnhandledProps(Modal, this.props)
-    const portalPropNames = Portal.handledProps
-
-    const rest = _.reduce(
-      unhandled,
-      (acc, val, key) => {
-        if (!_.includes(portalPropNames, key)) acc[key] = val
+  // Short circuit when server side rendering
+  if (!isBrowser()) {
+    return React.isValidElement(trigger) ? trigger : null
+  }
 
-        return acc
-      },
-      {},
-    )
-    const portalProps = _.pick(unhandled, portalPropNames)
-
-    // Heads up!
-    //
-    // The SUI CSS selector to prevent the modal itself from blurring requires an immediate .dimmer child:
-    // .blurring.dimmed.dimmable>:not(.dimmer) { ... }
-    //
-    // The .blurring.dimmed.dimmable is the body, so that all body content inside is blurred.
-    // We need the immediate child to be the dimmer to :not() blur the modal itself!
-    // Otherwise, the portal div is also blurred, blurring the modal.
-    //
-    // We cannot them wrap the modalJSX in an actual <Dimmer /> instead, we apply the dimmer classes to the <Portal />.
+  const unhandled = getUnhandledProps(Modal, props)
+  const portalPropNames = Portal.handledProps
 
-    return (
-      <Portal
-        closeOnDocumentClick={closeOnDocumentClick}
-        {...portalProps}
-        trigger={trigger}
-        eventPool={eventPool}
-        mountNode={mountNode}
-        open={open}
-        onClose={this.handleClose}
-        onMount={this.handlePortalMount}
-        onOpen={this.handleOpen}
-        onUnmount={this.handlePortalUnmount}
-      >
-        <Ref innerRef={this.dimmerRef}>
-          {ModalDimmer.create(_.isPlainObject(dimmer) ? dimmer : {}, {
-            autoGenerateKey: false,
-            defaultProps: {
-              blurring: dimmer === 'blurring',
-              inverted: dimmer === 'inverted',
-            },
-            overrideProps: {
-              children: this.renderContent(rest),
-              centered,
-              mountNode,
-              scrolling,
-            },
-          })}
-        </Ref>
-      </Portal>
-    )
-  }
-}
+  const rest = _.reduce(
+    unhandled,
+    (acc, val, key) => {
+      if (!_.includes(portalPropNames, key)) acc[key] = val
 
+      return acc
+    },
+    {},
+  )
+  const portalProps = _.pick(unhandled, portalPropNames)
+
+  // Heads up!
+  //
+  // The SUI CSS selector to prevent the modal itself from blurring requires an immediate .dimmer child:
+  // .blurring.dimmed.dimmable>:not(.dimmer) { ... }
+  //
+  // The .blurring.dimmed.dimmable is the body, so that all body content inside is blurred.
+  // We need the immediate child to be the dimmer to :not() blur the modal itself!
+  // Otherwise, the portal div is also blurred, blurring the modal.
+  //
+  // We cannot them wrap the modalJSX in an actual <Dimmer /> instead, we apply the dimmer classes to the <Portal />.
+
+  return (
+    <Portal
+      closeOnDocumentClick={closeOnDocumentClick}
+      {...portalProps}
+      trigger={trigger}
+      eventPool={eventPool}
+      mountNode={mountNode}
+      open={open}
+      onClose={handleClose}
+      onMount={handlePortalMount}
+      onOpen={handleOpen}
+      onUnmount={handlePortalUnmount}
+    >
+      {ModalDimmer.create(_.isPlainObject(dimmer) ? dimmer : {}, {
+        autoGenerateKey: false,
+        defaultProps: {
+          blurring: dimmer === 'blurring',
+          inverted: dimmer === 'inverted',
+        },
+        overrideProps: {
+          children: renderContent(rest),
+          centered,
+          mountNode,
+          scrolling,
+          ref: dimmerRef,
+        },
+      })}
+    </Portal>
+  )
+})
+
+Modal.displayName = 'Modal'
 Modal.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -390,8 +406,6 @@ Modal.defaultProps = {
   eventPool: 'Modal',
 }
 
-Modal.autoControlledProps = ['open']
-
 Modal.Actions = ModalActions
 Modal.Content = ModalContent
 Modal.Description = ModalDescription
diff --git a/src/modules/Modal/ModalActions.js b/src/modules/Modal/ModalActions.js
index 7992b00c7f..37bf007bea 100644
--- a/src/modules/Modal/ModalActions.js
+++ b/src/modules/Modal/ModalActions.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -15,45 +15,45 @@ import Button from '../../elements/Button'
 /**
  * A modal can contain a row of actions.
  */
-export default class ModalActions extends Component {
-  handleButtonOverrides = (predefinedProps) => ({
-    onClick: (e, buttonProps) => {
-      _.invoke(predefinedProps, 'onClick', e, buttonProps)
-      _.invoke(this.props, 'onActionClick', e, buttonProps)
-    },
-  })
+const ModalActions = React.forwardRef(function (props, ref) {
+  const { actions, children, className, content } = props
 
-  render() {
-    const { actions, children, className, content } = this.props
-    const classes = cx('actions', className)
-    const rest = getUnhandledProps(ModalActions, this.props)
-    const ElementType = getElementType(ModalActions, this.props)
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes}>
-          {children}
-        </ElementType>
-      )
-    }
-    if (!childrenUtils.isNil(content)) {
-      return (
-        <ElementType {...rest} className={classes}>
-          {content}
-        </ElementType>
-      )
-    }
+  const classes = cx('actions', className)
+  const rest = getUnhandledProps(ModalActions, props)
+  const ElementType = getElementType(ModalActions, props)
 
+  if (!childrenUtils.isNil(children)) {
+    return (
+      <ElementType {...rest} className={classes} ref={ref}>
+        {children}
+      </ElementType>
+    )
+  }
+  if (!childrenUtils.isNil(content)) {
     return (
       <ElementType {...rest} className={classes}>
-        {_.map(actions, (action) =>
-          Button.create(action, { overrideProps: this.handleButtonOverrides }),
-        )}
+        {content}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} className={classes} ref={ref}>
+      {_.map(actions, (action) =>
+        Button.create(action, {
+          overrideProps: (predefinedProps) => ({
+            onClick: (e, buttonProps) => {
+              _.invoke(predefinedProps, 'onClick', e, buttonProps)
+              _.invoke(props, 'onActionClick', e, buttonProps)
+            },
+          }),
+        }),
+      )}
+    </ElementType>
+  )
+})
+
+ModalActions.displayName = 'ModalActions'
 ModalActions.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -80,3 +80,5 @@ ModalActions.propTypes = {
 }
 
 ModalActions.create = createShorthandFactory(ModalActions, (actions) => ({ actions }))
+
+export default ModalActions
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index 23439268ad..5c41101b59 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -14,7 +14,7 @@ import {
 /**
  * A modal can contain content.
  */
-function ModalContent(props) {
+const ModalContent = React.forwardRef(function (props, ref) {
   const { children, className, content, image, scrolling } = props
 
   const classes = cx(
@@ -27,12 +27,13 @@ function ModalContent(props) {
   const ElementType = getElementType(ModalContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ModalContent.displayName = 'ModalContent'
 ModalContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Modal/ModalDescription.js b/src/modules/Modal/ModalDescription.js
index a0a920e2d4..99c1a11502 100644
--- a/src/modules/Modal/ModalDescription.js
+++ b/src/modules/Modal/ModalDescription.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A modal can contain a description with one or more paragraphs.
  */
-function ModalDescription(props) {
+const ModalDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(ModalDescription, props)
   const ElementType = getElementType(ModalDescription, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ModalDescription.displayName = 'ModalDescription'
 ModalDescription.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Modal/ModalDimmer.js b/src/modules/Modal/ModalDimmer.js
index 516d7b2bb6..7599a54583 100644
--- a/src/modules/Modal/ModalDimmer.js
+++ b/src/modules/Modal/ModalDimmer.js
@@ -1,4 +1,3 @@
-import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -11,14 +10,15 @@ import {
   getUnhandledProps,
   useClassNamesOnNode,
   useKeyOnly,
+  useMergedRefs,
 } from '../../lib'
 
 /**
  * A modal has a dimmer.
  */
-function ModalDimmer(props) {
+const ModalDimmer = React.forwardRef(function (props, ref) {
   const { blurring, children, className, centered, content, inverted, mountNode, scrolling } = props
-  const ref = React.useRef()
+  const elementRef = useMergedRefs(ref, React.useRef())
 
   const classes = cx(
     'ui',
@@ -37,21 +37,19 @@ function ModalDimmer(props) {
   const ElementType = getElementType(ModalDimmer, props)
 
   useClassNamesOnNode(mountNode, bodyClasses)
+
   React.useEffect(() => {
-    if (ref.current && ref.current.style) {
-      ref.current.style.setProperty('display', 'flex', 'important')
-    }
+    elementRef.current?.style?.setProperty('display', 'flex', 'important')
   }, [])
 
   return (
-    <Ref innerRef={ref}>
-      <ElementType {...rest} className={classes}>
-        {childrenUtils.isNil(children) ? content : children}
-      </ElementType>
-    </Ref>
+    <ElementType {...rest} className={classes} ref={elementRef}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
   )
-}
+})
 
+ModalDimmer.displayName = 'ModalDimmer'
 ModalDimmer.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Modal/ModalHeader.js b/src/modules/Modal/ModalHeader.js
index 7b50537c6e..14fa4404aa 100644
--- a/src/modules/Modal/ModalHeader.js
+++ b/src/modules/Modal/ModalHeader.js
@@ -13,19 +13,20 @@ import {
 /**
  * A modal can have a header.
  */
-function ModalHeader(props) {
+const ModalHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(ModalHeader, props)
   const ElementType = getElementType(ModalHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ModalHeader.displayName = 'ModalHeader'
 ModalHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 4e5a405106..f6d1111ed1 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -2,12 +2,11 @@ import EventStack from '@semantic-ui-react/event-stack'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 import { Popper } from 'react-popper'
 import shallowEqual from 'shallowequal'
 
 import {
-  eventStack,
   childrenUtils,
   createHTMLDivision,
   customPropTypes,
@@ -17,6 +16,9 @@ import {
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
+  useIsomorphicLayoutEffect,
+  useMergedRefs,
+  usePrevious,
 } from '../../lib'
 import Portal from '../../addons/Portal'
 import { placementMapping, positions, positionsMapping } from './lib/positions'
@@ -27,142 +29,195 @@ import PopupHeader from './PopupHeader'
 const debug = makeDebugger('popup')
 
 /**
- * A Popup displays additional information on top of a page.
+ * Calculates props specific for Portal component.
+ *
+ * @param {Object} props
  */
-export default class Popup extends Component {
-  state = {}
-
-  open = false
-  zIndexWasSynced = false
+function getPortalProps(props) {
+  const portalProps = {}
+  const normalizedOn = _.isArray(props.on) ? props.on : [props.on]
 
-  triggerRef = React.createRef()
-  elementRef = React.createRef()
-
-  static getDerivedStateFromProps(props, state) {
-    if (state.closed || state.disabled) return {}
+  if (props.hoverable) {
+    portalProps.closeOnPortalMouseLeave = true
+    portalProps.mouseLeaveDelay = 300
+  }
 
-    const unhandledProps = getUnhandledProps(Popup, props)
-    const contentRestProps = _.reduce(
-      unhandledProps,
-      (acc, val, key) => {
-        if (!_.includes(Portal.handledProps, key)) acc[key] = val
+  if (_.includes(normalizedOn, 'hover')) {
+    portalProps.openOnTriggerClick = false
+    portalProps.closeOnTriggerClick = false
+    portalProps.openOnTriggerMouseEnter = true
+    portalProps.closeOnTriggerMouseLeave = true
+    // Taken from SUI: https://git.io/vPmCm
+    portalProps.mouseLeaveDelay = 70
+    portalProps.mouseEnterDelay = 50
+  }
 
-        return acc
-      },
-      {},
-    )
-    const portalRestProps = _.pick(unhandledProps, Portal.handledProps)
+  if (_.includes(normalizedOn, 'click')) {
+    portalProps.openOnTriggerClick = true
+    portalProps.closeOnTriggerClick = true
+    portalProps.closeOnDocumentClick = true
+  }
 
-    return { contentRestProps, portalRestProps }
+  if (_.includes(normalizedOn, 'focus')) {
+    portalProps.openOnTriggerFocus = true
+    portalProps.closeOnTriggerBlur = true
   }
 
-  componentDidUpdate(prevProps) {
-    const depsEqual = shallowEqual(this.props.popperDependencies, prevProps.popperDependencies)
+  return portalProps
+}
 
-    if (!depsEqual) {
-      this.handleUpdate()
-    }
+/**
+ * Splits props for Portal & Popup.
+ *
+ * @param {Object} unhandledProps
+ * @param {Boolean} closed
+ * @param {Boolean} disabled
+ */
+function partitionPortalProps(unhandledProps, closed, disabled) {
+  if (closed || disabled) {
+    return {}
   }
 
-  componentWillUnmount() {
-    clearTimeout(this.timeoutId)
-  }
+  const contentRestProps = _.reduce(
+    unhandledProps,
+    (acc, val, key) => {
+      if (!_.includes(Portal.handledProps, key)) acc[key] = val
 
-  getPortalProps = () => {
-    debug('getPortalProps()')
-    const portalProps = {}
+      return acc
+    },
+    {},
+  )
+  const portalRestProps = _.pick(unhandledProps, Portal.handledProps)
 
-    const { on, hoverable } = this.props
-    const normalizedOn = _.isArray(on) ? on : [on]
+  return { contentRestProps, portalRestProps }
+}
 
-    if (hoverable) {
-      portalProps.closeOnPortalMouseLeave = true
-      portalProps.mouseLeaveDelay = 300
-    }
-    if (_.includes(normalizedOn, 'hover')) {
-      portalProps.openOnTriggerClick = false
-      portalProps.closeOnTriggerClick = false
-      portalProps.openOnTriggerMouseEnter = true
-      portalProps.closeOnTriggerMouseLeave = true
-      // Taken from SUI: https://git.io/vPmCm
-      portalProps.mouseLeaveDelay = 70
-      portalProps.mouseEnterDelay = 50
-    }
-    if (_.includes(normalizedOn, 'click')) {
-      portalProps.openOnTriggerClick = true
-      portalProps.closeOnTriggerClick = true
-      portalProps.closeOnDocumentClick = true
+/**
+ * Performs updates when "popperDependencies" are not shallow equal.
+ *
+ * @param {Array} popperDependencies
+ * @param {React.Ref} positionUpdate
+ */
+function usePositioningEffect(popperDependencies, positionUpdate) {
+  const previousDependencies = usePrevious(popperDependencies)
+
+  useIsomorphicLayoutEffect(() => {
+    if (positionUpdate.current) {
+      positionUpdate.current()
     }
-    if (_.includes(normalizedOn, 'focus')) {
-      portalProps.openOnTriggerFocus = true
-      portalProps.closeOnTriggerBlur = true
+  }, [shallowEqual(previousDependencies, popperDependencies)])
+}
+
+/**
+ * A Popup displays additional information on top of a page.
+ */
+const Popup = React.forwardRef(function (props, ref) {
+  const {
+    basic,
+    className,
+    content,
+    context,
+    children,
+    disabled,
+    eventsEnabled,
+    flowing,
+    header,
+    inverted,
+    offset,
+    pinned,
+    popper,
+    popperDependencies,
+    popperModifiers,
+    position,
+    positionFixed,
+    size,
+    style,
+    trigger,
+    wide,
+  } = props
+
+  const [closed, setClosed] = React.useState(false)
+
+  const unhandledProps = getUnhandledProps(Popup, props)
+  const { contentRestProps, portalRestProps } = partitionPortalProps(
+    unhandledProps,
+    closed,
+    disabled,
+  )
+
+  const elementRef = useMergedRefs(ref)
+  const positionUpdate = React.useRef()
+  const timeoutId = React.useRef()
+  const triggerRef = React.useRef()
+  const zIndexWasSynced = React.useRef(false)
+
+  // ----------------------------------------
+  // Effects
+  // ----------------------------------------
+
+  usePositioningEffect(popperDependencies, positionUpdate)
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutId.current)
     }
+  }, [])
+
+  // ----------------------------------------
+  // Handlers
+  // ----------------------------------------
+
+  const handleClose = (e) => {
+    debug('handleClose()')
+    _.invoke(props, 'onClose', e, { ...props, open: false })
+  }
 
-    return portalProps
+  const handleOpen = (e) => {
+    debug('handleOpen()')
+    _.invoke(props, 'onOpen', e, { ...props, open: true })
   }
 
-  hideOnScroll = (e) => {
+  const hideOnScroll = (e) => {
+    debug('hideOnScroll()')
+
     // Do not hide the popup when scroll comes from inside the popup
     // https://github.com/Semantic-Org/Semantic-UI-React/issues/4305
-    if (_.isElement(e.target) && this.elementRef.current.contains(e.target)) {
+    if (_.isElement(e.target) && elementRef.current.contains(e.target)) {
       return
     }
 
-    debug('hideOnScroll()')
-    this.setState({ closed: true })
+    setClosed(true)
 
-    eventStack.unsub('scroll', this.hideOnScroll, { target: window })
-    this.timeoutId = setTimeout(() => {
-      this.setState({ closed: false })
+    timeoutId.current = setTimeout(() => {
+      setClosed(false)
     }, 50)
 
-    this.handleClose(e)
+    handleClose(e)
   }
 
-  handleClose = (e) => {
-    debug('handleClose()')
-    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
-  }
-
-  handleOpen = (e) => {
-    debug('handleOpen()')
-    _.invoke(this.props, 'onOpen', e, { ...this.props, open: true })
-  }
-
-  handlePortalMount = (e) => {
+  const handlePortalMount = (e) => {
     debug('handlePortalMount()')
-    _.invoke(this.props, 'onMount', e, this.props)
+    _.invoke(props, 'onMount', e, props)
   }
 
-  handlePortalUnmount = (e) => {
+  const handlePortalUnmount = (e) => {
     debug('handlePortalUnmount()')
 
-    this.positionUpdate = null
-    _.invoke(this.props, 'onUnmount', e, this.props)
-  }
-
-  handleUpdate() {
-    if (this.positionUpdate) this.positionUpdate()
+    positionUpdate.current = null
+    _.invoke(props, 'onUnmount', e, props)
   }
 
-  renderContent = ({ placement: popperPlacement, ref: popperRef, update, style: popperStyle }) => {
-    const {
-      basic,
-      children,
-      className,
-      content,
-      hideOnScroll,
-      flowing,
-      header,
-      inverted,
-      popper,
-      size,
-      style,
-      wide,
-    } = this.props
-    const { contentRestProps } = this.state
+  // ----------------------------------------
+  // Render
+  // ----------------------------------------
 
-    this.positionUpdate = update
+  const renderBody = ({
+    placement: popperPlacement,
+    ref: popperRef,
+    update,
+    style: popperStyle,
+  }) => {
+    positionUpdate.current = update
 
     const classes = cx(
       'ui',
@@ -175,7 +230,8 @@ export default class Popup extends Component {
       'popup transition visible',
       className,
     )
-    const ElementType = getElementType(Popup, this.props)
+    const ElementType = getElementType(Popup, props)
+
     const styles = {
       // Heads up! We need default styles to get working correctly `flowing`
       left: 'auto',
@@ -186,7 +242,7 @@ export default class Popup extends Component {
     }
 
     const innerElement = (
-      <ElementType {...contentRestProps} className={classes} style={styles} ref={this.elementRef}>
+      <ElementType {...contentRestProps} className={classes} style={styles} ref={elementRef}>
         {childrenUtils.isNil(children) ? (
           <>
             {PopupHeader.create(header, { autoGenerateKey: false })}
@@ -195,7 +251,7 @@ export default class Popup extends Component {
         ) : (
           children
         )}
-        {hideOnScroll && <EventStack on={this.hideOnScroll} name='scroll' target='window' />}
+        {hideOnScroll && <EventStack on={hideOnScroll} name='scroll' target='window' />}
       </ElementType>
     )
 
@@ -217,94 +273,79 @@ export default class Popup extends Component {
     })
   }
 
-  render() {
-    const {
-      context,
-      disabled,
-      eventsEnabled,
-      offset,
-      pinned,
-      popper,
-      popperModifiers,
-      position,
-      positionFixed,
-      trigger,
-    } = this.props
-    const { closed, portalRestProps } = this.state
-
-    if (closed || disabled) {
-      return trigger
-    }
+  if (closed || disabled) {
+    return trigger
+  }
 
-    const modifiers = [
-      { name: 'arrow', enabled: false },
-      { name: 'eventListeners', options: { scroll: !!eventsEnabled, resize: !!eventsEnabled } },
-      { name: 'flip', enabled: !pinned },
-      { name: 'preventOverflow', enabled: !!offset },
-      { name: 'offset', enabled: !!offset, options: { offset } },
-      ...popperModifiers,
-
-      // We are syncing zIndex from `.ui.popup.content` to avoid layering issues as in SUIR we are using an additional
-      // `div` for Popper.js
-      // https://github.com/Semantic-Org/Semantic-UI-React/issues/4083
-      {
-        name: 'syncZIndex',
-        enabled: true,
-        phase: 'beforeRead',
-        fn: ({ state }) => {
-          if (this.zIndexWasSynced) {
-            return
-          }
-
-          // if zIndex defined in <Popup popper={{ style: {} }} /> there is no sense to override it
-          const definedZIndex = popper?.style?.zIndex
-
-          if (_.isUndefined(definedZIndex)) {
-            // eslint-disable-next-line no-param-reassign
-            state.elements.popper.style.zIndex = window.getComputedStyle(
-              state.elements.popper.firstChild,
-            ).zIndex
-          }
-
-          this.zIndexWasSynced = true
-        },
-        effect: () => {
-          return () => {
-            this.zIndexWasSynced = false
-          }
-        },
+  const modifiers = [
+    { name: 'arrow', enabled: false },
+    { name: 'eventListeners', options: { scroll: !!eventsEnabled, resize: !!eventsEnabled } },
+    { name: 'flip', enabled: !pinned },
+    { name: 'preventOverflow', enabled: !!offset },
+    { name: 'offset', enabled: !!offset, options: { offset } },
+    ...popperModifiers,
+
+    // We are syncing zIndex from `.ui.popup.content` to avoid layering issues as in SUIR we are using an additional
+    // `div` for Popper.js
+    // https://github.com/Semantic-Org/Semantic-UI-React/issues/4083
+    {
+      name: 'syncZIndex',
+      enabled: true,
+      phase: 'beforeRead',
+      fn: ({ state }) => {
+        if (zIndexWasSynced.current) {
+          return
+        }
+
+        // if zIndex defined in <Popup popper={{ style: {} }} /> there is no sense to override it
+        const definedZIndex = popper?.style?.zIndex
+
+        if (_.isUndefined(definedZIndex)) {
+          // eslint-disable-next-line no-param-reassign
+          state.elements.popper.style.zIndex = window.getComputedStyle(
+            state.elements.popper.firstChild,
+          ).zIndex
+        }
+
+        zIndexWasSynced.current = true
+      },
+      effect: () => {
+        return () => {
+          zIndexWasSynced.current = false
+        }
       },
-    ]
-    debug('popper modifiers:', modifiers)
-
-    const referenceElement = createReferenceProxy(_.isNil(context) ? this.triggerRef : context)
-
-    const mergedPortalProps = { ...this.getPortalProps(), ...portalRestProps }
-    debug('portal props:', mergedPortalProps)
-
-    return (
-      <Portal
-        {...mergedPortalProps}
-        onClose={this.handleClose}
-        onMount={this.handlePortalMount}
-        onOpen={this.handleOpen}
-        onUnmount={this.handlePortalUnmount}
-        trigger={trigger}
-        triggerRef={this.triggerRef}
+    },
+  ]
+  debug('popper modifiers:', modifiers)
+
+  const referenceElement = createReferenceProxy(_.isNil(context) ? triggerRef : context)
+  const mergedPortalProps = { ...getPortalProps(props), ...portalRestProps }
+
+  debug('portal props:', mergedPortalProps)
+
+  return (
+    <Portal
+      {...mergedPortalProps}
+      onClose={handleClose}
+      onMount={handlePortalMount}
+      onOpen={handleOpen}
+      onUnmount={handlePortalUnmount}
+      trigger={trigger}
+      triggerRef={triggerRef}
+    >
+      <Popper
+        modifiers={modifiers}
+        placement={positionsMapping[position]}
+        strategy={positionFixed ? 'fixed' : null}
+        referenceElement={referenceElement}
       >
-        <Popper
-          modifiers={modifiers}
-          placement={positionsMapping[position]}
-          strategy={positionFixed ? 'fixed' : null}
-          referenceElement={referenceElement}
-        >
-          {this.renderContent}
-        </Popper>
-      </Portal>
-    )
-  }
-}
+        {renderBody}
+      </Popper>
+    </Portal>
+  )
+})
 
+Popup.displayName = 'Popup'
 Popup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -439,3 +480,5 @@ Popup.defaultProps = {
 
 Popup.Content = PopupContent
 Popup.Header = PopupHeader
+
+export default Popup
diff --git a/src/modules/Popup/PopupContent.js b/src/modules/Popup/PopupContent.js
index a3f3d9dcf4..fa30a42244 100644
--- a/src/modules/Popup/PopupContent.js
+++ b/src/modules/Popup/PopupContent.js
@@ -13,19 +13,20 @@ import {
 /**
  * A PopupContent displays the content body of a Popover.
  */
-export default function PopupContent(props) {
+const PopupContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(PopupContent, props)
   const ElementType = getElementType(PopupContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+PopupContent.displayName = 'PopupContent'
 PopupContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -41,3 +42,5 @@ PopupContent.propTypes = {
 }
 
 PopupContent.create = createShorthandFactory(PopupContent, (children) => ({ children }))
+
+export default PopupContent
diff --git a/src/modules/Popup/PopupHeader.js b/src/modules/Popup/PopupHeader.js
index 5e535be6eb..94e6384ee9 100644
--- a/src/modules/Popup/PopupHeader.js
+++ b/src/modules/Popup/PopupHeader.js
@@ -13,19 +13,21 @@ import {
 /**
  * A PopupHeader displays a header in a Popover.
  */
-export default function PopupHeader(props) {
+const PopupHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(PopupHeader, props)
   const ElementType = getElementType(PopupHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+PopupHeader.displayName = 'PopupHeader'
 PopupHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -41,3 +43,5 @@ PopupHeader.propTypes = {
 }
 
 PopupHeader.create = createShorthandFactory(PopupHeader, (children) => ({ children }))
+
+export default PopupHeader
diff --git a/src/modules/Popup/lib/createReferenceProxy.js b/src/modules/Popup/lib/createReferenceProxy.js
index 8595ca6d94..1d7da1c147 100644
--- a/src/modules/Popup/lib/createReferenceProxy.js
+++ b/src/modules/Popup/lib/createReferenceProxy.js
@@ -1,5 +1,5 @@
-import { isRefObject } from '@fluentui/react-component-ref'
 import _ from 'lodash'
+import { isRefObject } from '../../../lib'
 
 class ReferenceProxy {
   constructor(refObject) {
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index d9c08dc8e2..6e26f4afd1 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -15,105 +15,150 @@ import {
 } from '../../lib'
 
 /**
- * A progress bar shows the progression of a task.
+ * @param {Number|String} percent
+ * @param {Number|String} total
+ * @param {Number|String} value
+ *
+ * @return {Number|String}
  */
-class Progress extends Component {
-  calculatePercent = () => {
-    const { percent, total, value } = this.props
+function calculatePercent(percent, total, value) {
+  if (!_.isUndefined(percent)) {
+    return percent
+  }
 
-    if (!_.isUndefined(percent)) return percent
-    if (!_.isUndefined(total) && !_.isUndefined(value)) return (value / total) * 100
+  if (!_.isUndefined(total) && !_.isUndefined(value)) {
+    return (value / total) * 100
   }
 
-  computeValueText = (percent) => {
-    const { progress, total, value } = this.props
+  return 0
+}
+
+/**
+ * @param {Number|String} percent
+ * @param {Number|String} total
+ * @param {Number|String} value
+ * @param {Boolean|'percent'|'ratio'|'value'} progress
+ * @param {Number} precision
+ *
+ * @return {Number}
+ */
+function getPercent(percent, total, value, progress, precision) {
+  const clampedPercent = _.clamp(calculatePercent(percent, total, value), 0, 100)
 
-    if (progress === 'value') return value
-    if (progress === 'ratio') return `${value}/${total}`
-    return `${percent}%`
+  if (!_.isUndefined(total) && !_.isUndefined(value) && progress === 'value') {
+    return (value / total) * 100
   }
 
-  getPercent = () => {
-    const { precision, progress, total, value } = this.props
-    const percent = _.clamp(this.calculatePercent(), 0, 100)
+  if (progress === 'value') {
+    return value
+  }
 
-    if (!_.isUndefined(total) && !_.isUndefined(value) && progress === 'value') {
-      return (value / total) * 100
-    }
-    if (progress === 'value') return value
-    if (_.isUndefined(precision)) return percent
-    return _.round(percent, precision)
+  if (_.isUndefined(precision)) {
+    return clampedPercent
   }
 
-  isAutoSuccess = () => {
-    const { autoSuccess, percent, total, value } = this.props
+  return _.round(clampedPercent, precision)
+}
 
-    return autoSuccess && (percent >= 100 || value >= total)
+/**
+ * A progress bar shows the progression of a task.
+ */
+const Progress = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    autoSuccess,
+    attached,
+    children,
+    className,
+    color,
+    content,
+    disabled,
+    error,
+    indicating,
+    inverted,
+    label,
+    percent,
+    precision,
+    progress,
+    total,
+    size,
+    success,
+    value,
+    warning,
+  } = props
+
+  const calculatedPercent = getPercent(percent, total, value, progress, precision) || 0
+  const isAutoSuccess = autoSuccess && (percent >= 100 || value >= total)
+
+  const computeValueText = () => {
+    if (progress === 'value') {
+      return value
+    }
+
+    if (progress === 'ratio') {
+      return `${value}/${total}`
+    }
+
+    return `${calculatedPercent}%`
   }
 
-  renderLabel = () => {
-    const { children, content, label } = this.props
+  const renderLabel = () => {
+    if (!childrenUtils.isNil(children)) {
+      return <div className='label'>{children}</div>
+    }
+
+    if (!childrenUtils.isNil(content)) {
+      return <div className='label'>{content}</div>
+    }
 
-    if (!childrenUtils.isNil(children)) return <div className='label'>{children}</div>
-    if (!childrenUtils.isNil(content)) return <div className='label'>{content}</div>
     return createHTMLDivision(label, {
       autoGenerateKey: false,
       defaultProps: { className: 'label' },
     })
   }
 
-  renderProgress = (percent) => {
-    const { precision, progress } = this.props
-
-    if (!progress && _.isUndefined(precision)) return
-    return <div className='progress'>{this.computeValueText(percent)}</div>
-  }
+  const renderProgress = () => {
+    if (!progress && _.isUndefined(precision)) {
+      return
+    }
 
-  render() {
-    const {
-      active,
-      attached,
-      className,
-      color,
-      disabled,
-      error,
-      indicating,
-      inverted,
-      size,
-      success,
-      warning,
-    } = this.props
-
-    const classes = cx(
-      'ui',
-      color,
-      size,
-      useKeyOnly(active || indicating, 'active'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(error, 'error'),
-      useKeyOnly(indicating, 'indicating'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(success || this.isAutoSuccess(), 'success'),
-      useKeyOnly(warning, 'warning'),
-      useValueAndKey(attached, 'attached'),
-      'progress',
-      className,
-    )
-    const rest = getUnhandledProps(Progress, this.props)
-    const ElementType = getElementType(Progress, this.props)
-    const percent = this.getPercent() || 0
-
-    return (
-      <ElementType {...rest} className={classes} data-percent={Math.floor(percent)}>
-        <div className='bar' style={{ width: `${percent}%` }}>
-          {this.renderProgress(percent)}
-        </div>
-        {this.renderLabel()}
-      </ElementType>
-    )
+    return <div className='progress'>{computeValueText()}</div>
   }
-}
 
+  const classes = cx(
+    'ui',
+    color,
+    size,
+    useKeyOnly(active || indicating, 'active'),
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(error, 'error'),
+    useKeyOnly(indicating, 'indicating'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(success || isAutoSuccess, 'success'),
+    useKeyOnly(warning, 'warning'),
+    useValueAndKey(attached, 'attached'),
+    'progress',
+    className,
+  )
+  const rest = getUnhandledProps(Progress, props)
+  const ElementType = getElementType(Progress, props)
+
+  return (
+    <ElementType
+      {...rest}
+      className={classes}
+      data-percent={Math.floor(calculatedPercent)}
+      ref={ref}
+    >
+      <div className='bar' style={{ width: `${calculatedPercent}%` }}>
+        {renderProgress()}
+      </div>
+      {renderLabel()}
+    </ElementType>
+  )
+})
+
+Progress.displayName = 'Progress'
 Progress.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index 35ecff1fa9..f4bf35a6d9 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -4,27 +4,50 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  ModernAutoControlledComponent as Component,
   getElementType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
+  useAutoControlledValue,
 } from '../../lib'
 import RatingIcon from './RatingIcon'
 
 /**
  * A rating indicates user interest in content.
  */
-export default class Rating extends Component {
-  handleIconClick = (e, { index }) => {
-    const { clearable, disabled, maxRating, onRate } = this.props
-    const { rating } = this.state
-    if (disabled) return
+const Rating = React.forwardRef(function (props, ref) {
+  const { className, clearable, disabled, icon, maxRating, size } = props
+
+  const [rating, setRating] = useAutoControlledValue({
+    state: props.rating,
+    defaultState: props.defaultRating,
+    initialState: 0,
+  })
+  const [selectedIndex, setSelectedIndex] = React.useState(-1)
+  const [isSelecting, setIsSelecting] = React.useState(false)
+
+  const classes = cx(
+    'ui',
+    icon,
+    size,
+    useKeyOnly(disabled, 'disabled'),
+    useKeyOnly(isSelecting && !disabled && selectedIndex >= 0, 'selected'),
+    'rating',
+    className,
+  )
+  const rest = getUnhandledProps(Rating, props)
+  const ElementType = getElementType(Rating, props)
+
+  const handleIconClick = (e, { index }) => {
+    if (disabled) {
+      return
+    }
 
     // default newRating is the clicked icon
     // allow toggling a binary rating
     // allow clearing ratings
     let newRating = index + 1
+
     if (clearable === 'auto' && maxRating === 1) {
       newRating = +!rating
     } else if (clearable === true && newRating === rating) {
@@ -32,67 +55,61 @@ export default class Rating extends Component {
     }
 
     // set rating
-    this.setState({ rating: newRating, isSelecting: false })
-    if (onRate) onRate(e, { ...this.props, rating: newRating })
+    setRating(newRating)
+    setIsSelecting(false)
+
+    _.invoke(props, 'onRate', e, { ...props, rating: newRating })
   }
 
-  handleIconMouseEnter = (e, { index }) => {
-    if (this.props.disabled) return
+  const handleIconMouseEnter = (e, { index }) => {
+    if (disabled) {
+      return
+    }
 
-    this.setState({ selectedIndex: index, isSelecting: true })
+    setSelectedIndex(index)
+    setIsSelecting(true)
   }
 
-  handleMouseLeave = (...args) => {
-    _.invoke(this.props, 'onMouseLeave', ...args)
-
-    if (this.props.disabled) return
+  const handleMouseLeave = (...args) => {
+    _.invoke(props, 'onMouseLeave', ...args)
 
-    this.setState({ selectedIndex: -1, isSelecting: false })
-  }
+    if (disabled) {
+      return
+    }
 
-  render() {
-    const { className, disabled, icon, maxRating, size } = this.props
-    const { rating, selectedIndex, isSelecting } = this.state
-
-    const classes = cx(
-      'ui',
-      icon,
-      size,
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(isSelecting && !disabled && selectedIndex >= 0, 'selected'),
-      'rating',
-      className,
-    )
-    const rest = getUnhandledProps(Rating, this.props)
-    const ElementType = getElementType(Rating, this.props)
-
-    return (
-      <ElementType
-        {...rest}
-        className={classes}
-        role='radiogroup'
-        onMouseLeave={this.handleMouseLeave}
-        tabIndex={disabled ? 0 : -1}
-      >
-        {_.times(maxRating, (i) => (
-          <RatingIcon
-            tabIndex={disabled ? -1 : 0}
-            active={rating >= i + 1}
-            aria-checked={rating === i + 1}
-            aria-posinset={i + 1}
-            aria-setsize={maxRating}
-            index={i}
-            key={i}
-            onClick={this.handleIconClick}
-            onMouseEnter={this.handleIconMouseEnter}
-            selected={selectedIndex >= i && isSelecting}
-          />
-        ))}
-      </ElementType>
-    )
+    setSelectedIndex(-1)
+    setIsSelecting(false)
   }
-}
 
+  return (
+    <ElementType
+      role='radiogroup'
+      {...rest}
+      className={classes}
+      onMouseLeave={handleMouseLeave}
+      ref={ref}
+      tabIndex={disabled ? 0 : -1}
+    >
+      {_.times(maxRating, (i) => (
+        /* TODO: use .create() factory */
+        <RatingIcon
+          tabIndex={disabled ? -1 : 0}
+          active={rating >= i + 1}
+          aria-checked={rating === i + 1}
+          aria-posinset={i + 1}
+          aria-setsize={maxRating}
+          index={i}
+          key={i}
+          onClick={handleIconClick}
+          onMouseEnter={handleIconMouseEnter}
+          selected={selectedIndex >= i && isSelecting}
+        />
+      ))}
+    </ElementType>
+  )
+})
+
+Rating.displayName = 'Rating'
 Rating.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -134,11 +151,11 @@ Rating.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
 }
 
-Rating.autoControlledProps = ['rating']
-
 Rating.defaultProps = {
   clearable: 'auto',
   maxRating: 1,
 }
 
 Rating.Icon = RatingIcon
+
+export default Rating
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index d204e18abb..22cc558e09 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -2,59 +2,60 @@ import cx from 'clsx'
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * An internal icon sub-component for Rating component
  */
-export default class RatingIcon extends Component {
-  handleClick = (e) => {
-    _.invoke(this.props, 'onClick', e, this.props)
+const RatingIcon = React.forwardRef(function (props, ref) {
+  const { active, className, selected } = props
+
+  const classes = cx(
+    useKeyOnly(active, 'active'),
+    useKeyOnly(selected, 'selected'),
+    'icon',
+    className,
+  )
+  const rest = getUnhandledProps(RatingIcon, props)
+  const ElementType = getElementType(RatingIcon, props)
+
+  const handleClick = (e) => {
+    _.invoke(props, 'onClick', e, props)
   }
 
-  handleKeyUp = (e) => {
-    _.invoke(this.props, 'onKeyUp', e, this.props)
+  const handleKeyUp = (e) => {
+    _.invoke(props, 'onKeyUp', e, props)
 
     switch (keyboardKey.getCode(e)) {
       case keyboardKey.Enter:
       case keyboardKey.Spacebar:
         e.preventDefault()
-        _.invoke(this.props, 'onClick', e, this.props)
+        _.invoke(props, 'onClick', e, props)
         break
       default:
     }
   }
 
-  handleMouseEnter = (e) => {
-    _.invoke(this.props, 'onMouseEnter', e, this.props)
+  const handleMouseEnter = (e) => {
+    _.invoke(props, 'onMouseEnter', e, props)
   }
 
-  render() {
-    const { active, className, selected } = this.props
-    const classes = cx(
-      useKeyOnly(active, 'active'),
-      useKeyOnly(selected, 'selected'),
-      'icon',
-      className,
-    )
-    const rest = getUnhandledProps(RatingIcon, this.props)
-    const ElementType = getElementType(RatingIcon, this.props)
-
-    return (
-      <ElementType
-        {...rest}
-        className={classes}
-        onClick={this.handleClick}
-        onKeyUp={this.handleKeyUp}
-        onMouseEnter={this.handleMouseEnter}
-        role='radio'
-      />
-    )
-  }
-}
-
+  return (
+    <ElementType
+      role='radio'
+      {...rest}
+      className={classes}
+      onClick={handleClick}
+      onKeyUp={handleKeyUp}
+      onMouseEnter={handleMouseEnter}
+      ref={ref}
+    />
+  )
+})
+
+RatingIcon.displayName = 'RatingIcon'
 RatingIcon.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -99,3 +100,5 @@ RatingIcon.propTypes = {
 RatingIcon.defaultProps = {
   as: 'i',
 }
+
+export default RatingIcon
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 8739f7041b..8cfd84fda9 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -22,6 +22,7 @@ import {
 } from '../../lib'
 import Input from '../../elements/Input'
 import SearchCategory from './SearchCategory'
+import SearchCategoryLayout from './SearchCategoryLayout'
 import SearchResult from './SearchResult'
 import SearchResults from './SearchResults'
 
@@ -43,7 +44,11 @@ const overrideSearchInputProps = (predefinedProps) => {
 /**
  * A search module allows a user to query for results from a selection of data
  */
-export default class Search extends Component {
+const Search = React.forwardRef((props, ref) => {
+  return <SearchInner {...props} innerRef={ref} />
+})
+
+class SearchInner extends Component {
   static getAutoControlledStateFromProps(props, state) {
     debug('getAutoControlledStateFromProps()')
 
@@ -475,9 +480,9 @@ export default class Search extends Component {
     debug('render()')
     debug('props', this.props)
     debug('state', this.state)
-    const { searchClasses, focus, open } = this.state
 
-    const { aligned, category, className, fluid, loading, size } = this.props
+    const { searchClasses, focus, open } = this.state
+    const { aligned, category, className, innerRef, fluid, loading, size } = this.props
 
     // Classes
     const classes = cx(
@@ -506,6 +511,7 @@ export default class Search extends Component {
         onBlur={this.handleBlur}
         onFocus={this.handleFocus}
         onMouseDown={this.handleMouseDown}
+        ref={innerRef}
       >
         {this.renderSearchInput(htmlInputProps)}
         {this.renderResultsMenu()}
@@ -514,6 +520,7 @@ export default class Search extends Component {
   }
 }
 
+Search.displayName = 'Search'
 Search.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -680,8 +687,16 @@ Search.defaultProps = {
   showNoResults: true,
 }
 
-Search.autoControlledProps = ['open', 'value']
+SearchInner.autoControlledProps = ['open', 'value']
+
+if (process.env.NODE_ENV !== 'production') {
+  SearchInner.defaultProps = Search.defaultProps
+  SearchInner.propTypes = Search.propTypes
+}
 
 Search.Category = SearchCategory
+Search.CategoryLayout = SearchCategoryLayout
 Search.Result = SearchResult
 Search.Results = SearchResults
+
+export default Search
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index da0fef015e..71d9c01224 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -11,8 +11,9 @@ import {
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
-function SearchCategory(props) {
+const SearchCategory = React.forwardRef(function (props, ref) {
   const { active, children, className, content, layoutRenderer, renderer } = props
+
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
   const rest = getUnhandledProps(SearchCategory, props)
   const ElementType = getElementType(SearchCategory, props)
@@ -21,17 +22,18 @@ function SearchCategory(props) {
   const resultsContent = childrenUtils.isNil(children) ? content : children
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {layoutRenderer({ categoryContent, resultsContent })}
     </ElementType>
   )
-}
+})
 
 SearchCategory.defaultProps = {
   layoutRenderer: SearchCategoryLayout,
   renderer: ({ name }) => name,
 }
 
+SearchCategory.displayName = 'SearchCategory'
 SearchCategory.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Search/SearchCategoryLayout.d.ts b/src/modules/Search/SearchCategoryLayout.d.ts
index b23a35f158..9532e077b5 100644
--- a/src/modules/Search/SearchCategoryLayout.d.ts
+++ b/src/modules/Search/SearchCategoryLayout.d.ts
@@ -1,8 +1,5 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent } from '../../generic'
-import SearchResult from './SearchResult'
-
 export interface SearchCategoryLayoutProps extends StrictSearchCategoryLayoutProps {
   [key: string]: any
 }
diff --git a/src/modules/Search/SearchCategoryLayout.js b/src/modules/Search/SearchCategoryLayout.js
index 4f0a3cf63f..b83dee804c 100644
--- a/src/modules/Search/SearchCategoryLayout.js
+++ b/src/modules/Search/SearchCategoryLayout.js
@@ -3,6 +3,7 @@ import React from 'react'
 
 function SearchCategoryLayout(props) {
   const { categoryContent, resultsContent } = props
+
   return (
     <>
       <div className='name'>{categoryContent}</div>
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index d967cbceee..69f3ac5239 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -1,6 +1,7 @@
 import cx from 'clsx'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   createHTMLImage,
@@ -30,32 +31,29 @@ const defaultRenderer = ({ image, price, title, description }) => [
   </div>,
 ]
 
-export default class SearchResult extends Component {
-  handleClick = (e) => {
-    const { onClick } = this.props
+const SearchResult = React.forwardRef(function (props, ref) {
+  const { active, className, renderer } = props
 
-    if (onClick) onClick(e, this.props)
+  const handleClick = (e) => {
+    _.invoke(props, 'onClick', e, props)
   }
 
-  render() {
-    const { active, className, renderer } = this.props
-
-    const classes = cx(useKeyOnly(active, 'active'), 'result', className)
-    const rest = getUnhandledProps(SearchResult, this.props)
-    const ElementType = getElementType(SearchResult, this.props)
-
-    // Note: You technically only need the 'content' wrapper when there's an
-    // image. However, optionally wrapping it makes this function a lot more
-    // complicated and harder to read. Since always wrapping it doesn't affect
-    // the style in any way let's just do that.
-    return (
-      <ElementType {...rest} className={classes} onClick={this.handleClick}>
-        {renderer(this.props)}
-      </ElementType>
-    )
-  }
-}
-
+  const classes = cx(useKeyOnly(active, 'active'), 'result', className)
+  const rest = getUnhandledProps(SearchResult, props)
+  const ElementType = getElementType(SearchResult, props)
+
+  // Note: You technically only need the 'content' wrapper when there's an
+  // image. However, optionally wrapping it makes this function a lot more
+  // complicated and harder to read. Since always wrapping it doesn't affect
+  // the style in any way let's just do that.
+  return (
+    <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+      {renderer(props)}
+    </ElementType>
+  )
+})
+
+SearchResult.displayName = 'SearchResult'
 SearchResult.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -104,3 +102,5 @@ SearchResult.propTypes = {
 SearchResult.defaultProps = {
   renderer: defaultRenderer,
 }
+
+export default SearchResult
diff --git a/src/modules/Search/SearchResults.js b/src/modules/Search/SearchResults.js
index 1d277d4f2b..dc39226950 100644
--- a/src/modules/Search/SearchResults.js
+++ b/src/modules/Search/SearchResults.js
@@ -4,19 +4,20 @@ import React from 'react'
 
 import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
 
-function SearchResults(props) {
+const SearchResults = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('results transition', className)
   const rest = getUnhandledProps(SearchResults, props)
   const ElementType = getElementType(SearchResults, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SearchResults.displayName = 'SearchResults'
 SearchResults.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index fbe5c0a1e3..764c16178e 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -1,9 +1,8 @@
 import { EventListener, documentRef } from '@fluentui/react-component-event-listener'
-import { Ref, isRefObject } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, createRef } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -11,118 +10,118 @@ import {
   doesNodeContainClick,
   getUnhandledProps,
   getElementType,
+  isRefObject,
   useKeyOnly,
+  useIsomorphicLayoutEffect,
+  useEventCallback,
+  useForceUpdate,
+  useMergedRefs,
+  usePrevious,
 } from '../../lib'
 import SidebarPushable from './SidebarPushable'
 import SidebarPusher from './SidebarPusher'
 
 /**
- * A sidebar hides additional content beside a page.
+ * We use `animationTick` to understand when an animation should be scheduled.
+ *
+ * @param {Boolean} visible
  */
-class Sidebar extends Component {
-  ref = createRef()
+function useAnimationTick(visible) {
+  const previousVisible = usePrevious(visible)
+  const tickIncrement = !!visible === !!previousVisible ? 0 : 1
 
-  constructor(props) {
-    super(props)
+  const animationTick = React.useRef(0)
+  const forceUpdate = useForceUpdate()
 
-    this.state = {
-      animationTick: 0,
-      visible: props.visible,
-    }
-  }
+  const currentTick = animationTick.current + tickIncrement
+  const resetAnimationTick = React.useCallback(() => {
+    animationTick.current = 0
+    forceUpdate()
+  }, [])
 
-  static getDerivedStateFromProps(props, state) {
-    // We use `animationTick` to understand when an animation should be scheduled
-    const tickIncrement = !!props.visible === !!state.visible ? 0 : 1
+  React.useEffect(() => {
+    animationTick.current = currentTick
+  })
 
-    return {
-      animationTick: state.animationTick + tickIncrement,
-      visible: props.visible,
-    }
-  }
+  return [currentTick, resetAnimationTick]
+}
 
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.animationTick > prevState.animationTick) {
-      this.handleAnimationStart()
-    }
-  }
+/**
+ * A sidebar hides additional content beside a page.
+ */
+const Sidebar = React.forwardRef((props, ref) => {
+  const { animation, className, children, content, direction, target, visible, width } = props
 
-  componentWillUnmount() {
-    clearTimeout(this.animationTimer)
-  }
+  const [animationTick, resetAnimationTick] = useAnimationTick(visible)
+  const elementRef = useMergedRefs(ref, React.useRef())
 
-  handleAnimationStart = () => {
-    const { visible } = this.props
+  const animationTimer = React.useRef()
+  const skipNextCallback = React.useRef()
+
+  const handleAnimationEnd = useEventCallback(() => {
+    const callback = visible ? 'onShow' : 'onHidden'
+
+    resetAnimationTick()
+    _.invoke(props, callback, null, props)
+  })
+
+  const handleAnimationStart = useEventCallback(() => {
     const callback = visible ? 'onVisible' : 'onHide'
 
-    clearTimeout(this.animationTimer)
-    this.animationTimer = setTimeout(this.handleAnimationEnd, Sidebar.animationDuration)
+    clearTimeout(animationTimer.current)
+    animationTimer.current = setTimeout(handleAnimationEnd, Sidebar.animationDuration)
 
-    if (this.skipNextCallback) {
-      this.skipNextCallback = false
+    if (skipNextCallback.current) {
+      skipNextCallback.current = false
       return
     }
 
-    _.invoke(this.props, callback, null, this.props)
-  }
-
-  handleAnimationEnd = () => {
-    const { visible } = this.props
-    const callback = visible ? 'onShow' : 'onHidden'
-
-    this.setState({ animationTick: 0 })
-    _.invoke(this.props, callback, null, this.props)
-  }
+    _.invoke(props, callback, null, props)
+  })
 
-  handleDocumentClick = (e) => {
-    if (!doesNodeContainClick(this.ref.current, e)) {
-      this.skipNextCallback = true
-      _.invoke(this.props, 'onHide', e, { ...this.props, visible: false })
+  const handleDocumentClick = (e) => {
+    if (!doesNodeContainClick(elementRef.current, e)) {
+      skipNextCallback.current = true
+      _.invoke(props, 'onHide', e, { ...props, visible: false })
     }
   }
 
-  render() {
-    const {
-      animation,
-      className,
-      children,
-      content,
-      direction,
-      target,
-      visible,
-      width,
-    } = this.props
-    const { animationTick } = this.state
-
-    const classes = cx(
-      'ui',
-      animation,
-      direction,
-      width,
-      useKeyOnly(animationTick > 0, 'animating'),
-      useKeyOnly(visible, 'visible'),
-      'sidebar',
-      className,
-    )
-    const rest = getUnhandledProps(Sidebar, this.props)
-    const ElementType = getElementType(Sidebar, this.props)
-    const targetProp = isRefObject(target) ? { targetRef: target } : { target }
-
-    return (
-      <>
-        <Ref innerRef={this.ref}>
-          <ElementType {...rest} className={classes}>
-            {childrenUtils.isNil(children) ? content : children}
-          </ElementType>
-        </Ref>
-        {visible && (
-          <EventListener listener={this.handleDocumentClick} type='click' {...targetProp} />
-        )}
-      </>
-    )
-  }
-}
+  useIsomorphicLayoutEffect(() => {
+    handleAnimationStart()
+  }, [animationTick])
 
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(animationTimer.current)
+    }
+  }, [])
+
+  const classes = cx(
+    'ui',
+    animation,
+    direction,
+    width,
+    useKeyOnly(animationTick > 0, 'animating'),
+    useKeyOnly(visible, 'visible'),
+    'sidebar',
+    className,
+  )
+  const rest = getUnhandledProps(Sidebar, props)
+  const ElementType = getElementType(Sidebar, props)
+  const targetProp = isRefObject(target) ? { targetRef: target } : { target }
+
+  return (
+    <>
+      <ElementType {...rest} className={classes} ref={elementRef}>
+        {childrenUtils.isNil(children) ? content : children}
+      </ElementType>
+
+      {visible && <EventListener listener={handleDocumentClick} type='click' {...targetProp} />}
+    </>
+  )
+})
+
+Sidebar.displayName = 'Sidebar'
 Sidebar.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -198,7 +197,6 @@ Sidebar.defaultProps = {
 }
 
 Sidebar.animationDuration = 500
-Sidebar.autoControlledProps = ['visible']
 
 Sidebar.Pushable = SidebarPushable
 Sidebar.Pusher = SidebarPusher
diff --git a/src/modules/Sidebar/SidebarPushable.js b/src/modules/Sidebar/SidebarPushable.js
index 437b74943f..ab7ce6b604 100644
--- a/src/modules/Sidebar/SidebarPushable.js
+++ b/src/modules/Sidebar/SidebarPushable.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A pushable sub-component for Sidebar.
  */
-function SidebarPushable(props) {
+const SidebarPushable = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('pushable', className)
   const rest = getUnhandledProps(SidebarPushable, props)
   const ElementType = getElementType(SidebarPushable, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SidebarPushable.displayName = 'SidebarPushable'
 SidebarPushable.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Sidebar/SidebarPusher.js b/src/modules/Sidebar/SidebarPusher.js
index 10ef660378..670e92eb92 100644
--- a/src/modules/Sidebar/SidebarPusher.js
+++ b/src/modules/Sidebar/SidebarPusher.js
@@ -13,7 +13,7 @@ import {
 /**
  * A pushable sub-component for Sidebar.
  */
-function SidebarPusher(props) {
+const SidebarPusher = React.forwardRef(function (props, ref) {
   const { className, dimmed, children, content } = props
 
   const classes = cx('pusher', useKeyOnly(dimmed, 'dimmed'), className)
@@ -21,12 +21,13 @@ function SidebarPusher(props) {
   const ElementType = getElementType(SidebarPusher, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SidebarPusher.displayName = 'SidebarPusher'
 SidebarPusher.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index d8b46c0bc5..ab8c821c9a 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -1,267 +1,274 @@
-import { isRefObject } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, createRef } from 'react'
+import React from 'react'
 
 import {
   customPropTypes,
-  eventStack,
   getElementType,
   getUnhandledProps,
+  isRefObject,
   isBrowser,
+  useEventCallback,
+  useIsomorphicLayoutEffect,
 } from '../../lib'
 
 /**
  * Sticky content stays fixed to the browser viewport while another column of content is visible on the page.
  */
-export default class Sticky extends Component {
-  state = {
-    active: true,
-    sticky: false,
-  }
+const Sticky = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    bottomOffset,
+    children,
+    className,
+    context,
+    offset,
+    scrollContext,
+    styleElement,
+  } = props
+
+  const [sticky, setSticky] = React.useState(false)
+  const [bound, setBound] = React.useState()
+  const [bottom, setBottom] = React.useState()
+  const [pushing, setPushing] = React.useState()
+  const [top, setTop] = React.useState()
+
+  const stickyRef = React.useRef()
+  const triggerRef = React.useRef()
+
+  const triggerRect = React.useRef()
+  const contextRect = React.useRef()
+  const stickyRect = React.useRef()
+
+  const frameId = React.useRef()
+  const ticking = React.useRef()
 
-  stickyRef = createRef()
-  triggerRef = createRef()
+  // ----------------------------------------
+  // Helpers
+  // ----------------------------------------
 
-  componentDidMount() {
-    if (!isBrowser()) return
-    const { active } = this.state
+  const assignRects = () => {
+    const contextNode = isRefObject(context) ? context.current : context || document.body
 
-    if (active) {
-      this.handleUpdate()
-      this.addListeners(this.props.scrollContext)
-    }
+    triggerRect.current = triggerRef.current.getBoundingClientRect()
+    contextRect.current = contextNode.getBoundingClientRect()
+    stickyRect.current = stickyRef.current.getBoundingClientRect()
   }
 
-  static getDerivedStateFromProps(props, state) {
-    if (state.active !== props.active && !props.active) {
-      return { active: props.active, sticky: false }
+  const computeStyle = () => {
+    if (!sticky) {
+      return styleElement
     }
 
-    return { active: props.active }
+    return {
+      bottom: bound ? 0 : bottom,
+      top: bound ? undefined : top,
+      width: triggerRect.current.width,
+      ...styleElement,
+    }
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.active === this.state.active) {
-      if (prevProps.scrollContext !== this.props.scrollContext) {
-        this.removeListeners(prevProps.scrollContext)
-        this.addListeners(this.props.scrollContext)
-      }
-
-      return
-    }
+  // Return true when the component reached the bottom of the context
+  const didReachContextBottom = () =>
+    stickyRect.current.height + offset >= contextRect.current.bottom
 
-    if (this.state.active) {
-      this.handleUpdate()
-      this.addListeners(this.props.scrollContext)
-      return
-    }
+  // Return true when the component reached the starting point
+  const didReachStartingPoint = () => stickyRect.current.top <= triggerRect.current.top
 
-    this.removeListeners(prevProps.scrollContext)
-  }
+  // Return true when the top of the screen overpasses the Sticky component
+  const didTouchScreenTop = () => triggerRect.current.top < offset
 
-  componentWillUnmount() {
-    if (!isBrowser()) return
-    const { active } = this.state
+  // Return true when the bottom of the screen overpasses the Sticky component
+  const didTouchScreenBottom = () => contextRect.current.bottom + bottomOffset > window.innerHeight
 
-    if (active) {
-      this.removeListeners(this.props.scrollContext)
-      cancelAnimationFrame(this.frameId)
-    }
-  }
+  // Return true if the height of the component is higher than the window
+  const isOversized = () => stickyRect.current.height > window.innerHeight
 
   // ----------------------------------------
-  // Events
+  // Stick helpers
   // ----------------------------------------
 
-  addListeners = (scrollContext) => {
-    const scrollContextNode = isRefObject(scrollContext) ? scrollContext.current : scrollContext
-
-    if (scrollContextNode) {
-      eventStack.sub('resize', this.handleUpdate, { target: scrollContextNode })
-      eventStack.sub('scroll', this.handleUpdate, { target: scrollContextNode })
+  // If true, the component will stick to the bottom of the screen instead of the top
+  const togglePushing = (value) => {
+    if (props.pushing) {
+      setPushing(value)
     }
   }
 
-  removeListeners = (scrollContext) => {
-    const scrollContextNode = isRefObject(scrollContext) ? scrollContext.current : scrollContext
+  const setSticked = (e, newBound) => {
+    setBound(newBound)
+    setSticky(true)
 
-    if (scrollContextNode) {
-      eventStack.unsub('resize', this.handleUpdate, { target: scrollContextNode })
-      eventStack.unsub('scroll', this.handleUpdate, { target: scrollContextNode })
-    }
+    _.invoke(props, 'onStick', e, props)
   }
 
-  // ----------------------------------------
-  // Handlers
-  // ----------------------------------------
+  const setUnsticked = (e, newBound) => {
+    setBound(newBound)
+    setSticky(false)
 
-  update = (e) => {
-    const { pushing } = this.state
+    _.invoke(props, 'onUnstick', e, props)
+  }
 
-    this.ticking = false
-    this.assignRects()
+  const stickToContextBottom = (e) => {
+    setSticked(e, true)
+    togglePushing(true)
 
-    if (pushing) {
-      if (this.didReachStartingPoint()) return this.stickToContextTop(e)
-      if (this.didTouchScreenBottom()) return this.stickToScreenBottom(e)
-      return this.stickToContextBottom(e)
-    }
+    _.invoke(props, 'onBottom', e, props)
+  }
 
-    if (this.isOversized()) {
-      if (this.contextRect.top > 0) return this.stickToContextTop(e)
-      if (this.contextRect.bottom < window.innerHeight) return this.stickToContextBottom(e)
-    }
+  const stickToContextTop = (e) => {
+    setUnsticked(e, false)
+    togglePushing(false)
 
-    if (this.didTouchScreenTop()) {
-      if (this.didReachContextBottom()) return this.stickToContextBottom(e)
-      return this.stickToScreenTop(e)
-    }
+    _.invoke(props, 'onTop', e, props)
+  }
+
+  const stickToScreenBottom = (e) => {
+    setSticked(e, false)
 
-    return this.stickToContextTop(e)
+    setBottom(bottomOffset)
+    setTop(null)
   }
 
-  handleUpdate = (e) => {
-    if (!this.ticking) {
-      this.ticking = true
-      this.frameId = requestAnimationFrame(() => this.update(e))
-    }
+  const stickToScreenTop = (e) => {
+    setSticked(e, false)
+
+    setBottom(null)
+    setTop(offset)
   }
 
   // ----------------------------------------
-  // Helpers
+  // Handlers
   // ----------------------------------------
 
-  assignRects = () => {
-    const { context } = this.props
-    const contextNode = isRefObject(context) ? context.current : context || document.body
+  const update = (e) => {
+    ticking.current = false
+    assignRects()
 
-    this.triggerRect = this.triggerRef.current.getBoundingClientRect()
-    this.contextRect = contextNode.getBoundingClientRect()
-    this.stickyRect = this.stickyRef.current.getBoundingClientRect()
-  }
+    if (pushing) {
+      if (didReachStartingPoint()) {
+        stickToContextTop(e)
+        return
+      }
 
-  computeStyle() {
-    const { styleElement } = this.props
-    const { bottom, bound, sticky, top } = this.state
+      if (didTouchScreenBottom()) {
+        stickToScreenBottom(e)
+        return
+      }
 
-    if (!sticky) return styleElement
-    return {
-      bottom: bound ? 0 : bottom,
-      top: bound ? undefined : top,
-      width: this.triggerRect.width,
-      ...styleElement,
+      stickToContextBottom(e)
+      return
     }
-  }
-
-  // Return true when the component reached the bottom of the context
-  didReachContextBottom = () => {
-    const { offset } = this.props
 
-    return this.stickyRect.height + offset >= this.contextRect.bottom
-  }
+    if (isOversized()) {
+      if (contextRect.current.top > 0) {
+        stickToContextTop(e)
+        return
+      }
 
-  // Return true when the component reached the starting point
-  didReachStartingPoint = () => this.stickyRect.top <= this.triggerRect.top
+      if (contextRect.current.bottom < window.innerHeight) {
+        stickToContextBottom(e)
+        return
+      }
+    }
 
-  // Return true when the top of the screen overpasses the Sticky component
-  didTouchScreenTop = () => this.triggerRect.top < this.props.offset
+    if (didTouchScreenTop()) {
+      if (didReachContextBottom()) {
+        stickToContextBottom(e)
+        return
+      }
 
-  // Return true when the bottom of the screen overpasses the Sticky component
-  didTouchScreenBottom = () => {
-    const { bottomOffset } = this.props
+      stickToScreenTop(e)
+      return
+    }
 
-    return this.contextRect.bottom + bottomOffset > window.innerHeight
+    stickToContextTop(e)
   }
 
-  // Return true if the height of the component is higher than the window
-  isOversized = () => this.stickyRect.height > window.innerHeight
+  const handleUpdate = useEventCallback((e) => {
+    if (!ticking.current) {
+      ticking.current = true
+      frameId.current = requestAnimationFrame(() => update(e))
+    }
+  })
 
   // ----------------------------------------
-  // Stick helpers
+  // State control
   // ----------------------------------------
 
-  // If true, the component will stick to the bottom of the screen instead of the top
-  pushing = (pushing) => {
-    const { pushing: possible } = this.props
-
-    if (possible) this.setState({ pushing })
-  }
-
-  stick = (e, bound) => {
-    this.setState({ bound, sticky: true })
-    _.invoke(this.props, 'onStick', e, this.props)
-  }
-
-  unstick = (e, bound) => {
-    this.setState({ bound, sticky: false })
-    _.invoke(this.props, 'onUnstick', e, this.props)
-  }
-
-  stickToContextBottom = (e) => {
-    _.invoke(this.props, 'onBottom', e, this.props)
+  useIsomorphicLayoutEffect(() => {
+    if (!active) {
+      setSticky(false)
+    }
+  }, [active])
 
-    this.stick(e, true)
-    this.pushing(true)
-  }
+  // ----------------------------------------
+  // Effects
+  // ----------------------------------------
 
-  stickToContextTop = (e) => {
-    _.invoke(this.props, 'onTop', e, this.props)
+  useIsomorphicLayoutEffect(() => {
+    if (active) {
+      handleUpdate()
+    }
+  }, [active])
 
-    this.unstick(e, false)
-    this.pushing(false)
-  }
+  React.useEffect(() => {
+    return () => {
+      cancelAnimationFrame(frameId.current)
+    }
+  }, [])
 
-  stickToScreenBottom = (e) => {
-    const { bottomOffset: bottom } = this.props
+  // ----------------------------------------
+  // Document events
+  // ----------------------------------------
 
-    this.stick(e, false)
-    this.setState({ bottom, top: null })
-  }
+  React.useEffect(() => {
+    const scrollContextNode = isRefObject(scrollContext) ? scrollContext.current : scrollContext
 
-  stickToScreenTop = (e) => {
-    const { offset: top } = this.props
+    if (active && scrollContextNode) {
+      scrollContextNode?.addEventListener('resize', handleUpdate)
+      scrollContextNode?.addEventListener('scroll', handleUpdate)
+    }
 
-    this.stick(e, false)
-    this.setState({ top, bottom: null })
-  }
+    return () => {
+      scrollContextNode?.removeEventListener('resize', handleUpdate)
+      scrollContextNode?.removeEventListener('scroll', handleUpdate)
+    }
+  }, [active, scrollContext])
 
   // ----------------------------------------
   // Render
   // ----------------------------------------
 
-  render() {
-    const { children, className } = this.props
-    const { bottom, bound, sticky } = this.state
-    const rest = getUnhandledProps(Sticky, this.props)
-    const ElementType = getElementType(Sticky, this.props)
-
-    const containerClasses = cx(
-      sticky && 'ui',
-      sticky && 'stuck-container',
-      sticky && (bound ? 'bound-container' : 'fixed-container'),
-      className,
-    )
-    const elementClasses = cx(
-      'ui',
-      sticky && (bound ? 'bound bottom' : 'fixed'),
-      sticky && !bound && (bottom === null ? 'top' : 'bottom'),
-      'sticky',
-    )
-    const triggerStyles = sticky && this.stickyRect ? { height: this.stickyRect.height } : {}
-
-    return (
-      <ElementType {...rest} className={containerClasses}>
-        <div ref={this.triggerRef} style={triggerStyles} />
-        <div className={elementClasses} ref={this.stickyRef} style={this.computeStyle()}>
-          {children}
-        </div>
-      </ElementType>
-    )
-  }
-}
-
+  const rest = getUnhandledProps(Sticky, props)
+  const ElementType = getElementType(Sticky, props)
+
+  const containerClasses = cx(
+    sticky && 'ui',
+    sticky && 'stuck-container',
+    sticky && (bound ? 'bound-container' : 'fixed-container'),
+    className,
+  )
+  const elementClasses = cx(
+    'ui',
+    sticky && (bound ? 'bound bottom' : 'fixed'),
+    sticky && !bound && (bottom === null ? 'top' : 'bottom'),
+    'sticky',
+  )
+  const triggerStyles = sticky ? { height: stickyRect.current?.height } : {}
+
+  return (
+    <ElementType {...rest} className={containerClasses} ref={ref}>
+      <div ref={triggerRef} style={triggerStyles} />
+      <div className={elementClasses} ref={stickyRef} style={computeStyle()}>
+        {children}
+      </div>
+    </ElementType>
+  )
+})
+
+Sticky.displayName = 'Sticky'
 Sticky.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -332,3 +339,5 @@ Sticky.defaultProps = {
   offset: 0,
   scrollContext: isBrowser() ? window : null,
 }
+
+export default Sticky
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index 9e2a57973f..3004f4ceda 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  ModernAutoControlledComponent as Component,
   customPropTypes,
   getElementType,
   getUnhandledProps,
+  useAutoControlledValue,
 } from '../../lib'
 import Grid from '../../collections/Grid/Grid'
 import GridColumn from '../../collections/Grid/GridColumn'
@@ -18,21 +18,25 @@ import TabPane from './TabPane'
  * @see Menu
  * @see Segment
  */
-class Tab extends Component {
-  getInitialAutoControlledState() {
-    return { activeIndex: 0 }
+const Tab = React.forwardRef(function (props, ref) {
+  const { grid, menu, panes, menuPosition, renderActiveOnly } = props
+
+  const [activeIndex, setActiveIndex] = useAutoControlledValue({
+    state: props.activeIndex,
+    defaultState: props.defaultActiveIndex,
+    initialState: 0,
+  })
+
+  const handleItemClick = (e, { index }) => {
+    _.invoke(props, 'onTabChange', e, { ...props, activeIndex: index })
+    setActiveIndex(index)
   }
 
-  handleItemClick = (e, { index }) => {
-    _.invoke(this.props, 'onTabChange', e, { ...this.props, activeIndex: index })
-    this.setState({ activeIndex: index })
-  }
-
-  renderItems() {
-    const { panes, renderActiveOnly } = this.props
-    const { activeIndex } = this.state
+  const renderItems = () => {
+    if (renderActiveOnly) {
+      return _.invoke(_.get(panes, `[${activeIndex}]`), 'render', props)
+    }
 
-    if (renderActiveOnly) return _.invoke(_.get(panes, `[${activeIndex}]`), 'render', this.props)
     return _.map(panes, ({ pane }, index) =>
       TabPane.create(pane, {
         overrideProps: {
@@ -42,10 +46,7 @@ class Tab extends Component {
     )
   }
 
-  renderMenu() {
-    const { menu, panes, menuPosition } = this.props
-    const { activeIndex } = this.state
-
+  const renderMenu = () => {
     if (menu.tabular === true && menuPosition === 'right') {
       menu.tabular = 'right'
     }
@@ -54,55 +55,57 @@ class Tab extends Component {
       autoGenerateKey: false,
       overrideProps: {
         items: _.map(panes, 'menuItem'),
-        onItemClick: this.handleItemClick,
+        onItemClick: handleItemClick,
         activeIndex,
       },
     })
   }
 
-  renderVertical(menu) {
-    const { grid, menuPosition } = this.props
+  const renderVertical = (menuElement) => {
     const { paneWidth, tabWidth, ...gridProps } = grid
 
-    const position = menuPosition || (menu.props.tabular === 'right' && 'right') || 'left'
+    const position = menuPosition || (menuElement.props.tabular === 'right' && 'right') || 'left'
 
     return (
       <Grid {...gridProps}>
         {position === 'left' &&
-          GridColumn.create({ width: tabWidth, children: menu }, { autoGenerateKey: false })}
+          GridColumn.create({ width: tabWidth, children: menuElement }, { autoGenerateKey: false })}
         {GridColumn.create(
           {
             width: paneWidth,
-            children: this.renderItems(),
+            children: renderItems(),
             stretched: true,
           },
           { autoGenerateKey: false },
         )}
         {position === 'right' &&
-          GridColumn.create({ width: tabWidth, children: menu }, { autoGenerateKey: false })}
+          GridColumn.create({ width: tabWidth, children: menuElement }, { autoGenerateKey: false })}
       </Grid>
     )
   }
 
-  render() {
-    const menu = this.renderMenu()
-    const rest = getUnhandledProps(Tab, this.props)
-    const ElementType = getElementType(Tab, this.props)
-
-    if (menu.props.vertical) {
-      return <ElementType {...rest}>{this.renderVertical(menu)}</ElementType>
-    }
+  const menuElement = renderMenu()
+  const rest = getUnhandledProps(Tab, props)
+  const ElementType = getElementType(Tab, props)
 
+  if (menuElement.props.vertical) {
     return (
-      <ElementType {...rest}>
-        {menu.props.attached !== 'bottom' && menu}
-        {this.renderItems()}
-        {menu.props.attached === 'bottom' && menu}
+      <ElementType {...rest} ref={ref}>
+        {renderVertical(menuElement)}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} ref={ref}>
+      {menuElement.props.attached !== 'bottom' && menuElement}
+      {renderItems()}
+      {menuElement.props.attached === 'bottom' && menuElement}
+    </ElementType>
+  )
+})
+
+Tab.displayName = 'Tab'
 Tab.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 0ecd3d2e73..4551dfb497 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -15,7 +15,7 @@ import Segment from '../../elements/Segment/Segment'
 /**
  * A tab pane holds the content of a tab.
  */
-function TabPane(props) {
+const TabPane = React.forwardRef(function (props, ref) {
   const { active, children, className, content, loading } = props
 
   const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
@@ -23,22 +23,24 @@ function TabPane(props) {
   const ElementType = getElementType(TabPane, props)
 
   const calculatedDefaultProps = {}
+
   if (ElementType === Segment) {
     calculatedDefaultProps.attached = 'bottom'
   }
 
   return (
-    <ElementType {...calculatedDefaultProps} {...rest} className={classes}>
+    <ElementType {...calculatedDefaultProps} {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
 TabPane.defaultProps = {
   as: Segment,
   active: true,
 }
 
+TabPane.displayName = 'TabPane'
 TabPane.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/modules/Transition/Transition.js b/src/modules/Transition/Transition.js
index 0cd0fb8e09..3ad3c88018 100644
--- a/src/modules/Transition/Transition.js
+++ b/src/modules/Transition/Transition.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import { cloneElement, Component } from 'react'
+import * as React from 'react'
 
 import { makeDebugger, normalizeTransitionDuration, SUI, useKeyOnly } from '../../lib'
 import TransitionGroup from './TransitionGroup'
@@ -29,15 +29,7 @@ const TRANSITION_STYLE_TYPE = {
 /**
  * A transition is an animation usually used to move content in or out of view.
  */
-export default class Transition extends Component {
-  /** @deprecated Static properties will be removed in v2. */
-  static INITIAL = TRANSITION_STATUS_INITIAL
-  static ENTERED = TRANSITION_STATUS_ENTERED
-  static ENTERING = TRANSITION_STATUS_ENTERING
-  static EXITED = TRANSITION_STATUS_EXITED
-  static EXITING = TRANSITION_STATUS_EXITING
-  static UNMOUNTED = TRANSITION_STATUS_UNMOUNTED
-
+export default class Transition extends React.Component {
   static Group = TransitionGroup
 
   state = {
@@ -87,7 +79,11 @@ export default class Transition extends Component {
     const durationType = TRANSITION_CALLBACK_TYPE[nextStatus]
     const durationValue = normalizeTransitionDuration(duration, durationType)
 
-    this.timeoutId = setTimeout(() => this.setState({ status: nextStatus }), durationValue)
+    if (durationValue === 0) {
+      this.setState({ status: nextStatus })
+    } else {
+      this.timeoutId = setTimeout(() => this.setState({ status: nextStatus }), durationValue)
+    }
   }
 
   updateStatus = (prevState) => {
@@ -161,15 +157,19 @@ export default class Transition extends Component {
     debug('render(): state', this.state)
 
     const { children } = this.props
-    const { status } = this.state
+    const { nextStatus, status } = this.state
 
     if (status === TRANSITION_STATUS_UNMOUNTED) {
       return null
     }
 
-    return cloneElement(children, {
+    return React.cloneElement(children, {
       className: this.computeClasses(),
       style: this.computeStyle(),
+      ...(process.env.NODE_ENV !== 'production' && {
+        'data-test-status': status,
+        'data-test-next-status': nextStatus,
+      }),
     })
   }
 }
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 4716c903ce..0a8142939e 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -2,64 +2,72 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, makeDebugger, SUI } from '../../lib'
+import {
+  getElementType,
+  getUnhandledProps,
+  makeDebugger,
+  SUI,
+  useEventCallback,
+  useForceUpdate,
+} from '../../lib'
 import { getChildMapping, mergeChildMappings } from './utils/childMapping'
 import wrapChild from './utils/wrapChild'
 
 const debug = makeDebugger('transition_group')
 
 /**
- * A Transition.Group animates children as they mount and unmount.
+ * Wraps all children elements with proper callbacks and props.
+ *
+ * @param {React.ReactNode} children
+ * @param {Stream} animation
+ * @param {Number|String|Object} duration
+ * @param {Boolean} directional
+ *
+ * @return {Object}
  */
-export default class TransitionGroup extends React.Component {
-  state = {
-    // Keeping a callback under the state is a hack to make it accessible under getDerivedStateFromProps()
-    handleOnHide: (nothing, childProps) => {
-      debug('handleOnHide', childProps)
-      const { reactKey } = childProps
-
-      this.setState((state) => {
-        const children = { ...state.children }
-        delete children[reactKey]
-
-        return { children }
-      })
-    },
-  }
+function useWrappedChildren(children, animation, duration, directional) {
+  debug('wrapChildren()')
 
-  static getDerivedStateFromProps(props, state) {
-    debug('getDerivedStateFromProps()')
-
-    const { animation, duration, directional } = props
-    const { children: prevMapping } = state
-
-    // A short circuit for an initial render as there will be no `prevMapping`
-    if (typeof prevMapping === 'undefined') {
-      return {
-        children: _.mapValues(getChildMapping(props.children), (child) =>
-          wrapChild(child, state.handleOnHide, {
-            animation,
-            duration,
-            directional,
-          }),
-        ),
-      }
-    }
+  const forceUpdate = useForceUpdate()
+  const previousChildren = React.useRef()
+
+  let wrappedChildren
+  React.useEffect(() => {
+    previousChildren.current = wrappedChildren
+  })
 
-    const nextMapping = getChildMapping(props.children)
-    const children = mergeChildMappings(prevMapping, nextMapping)
+  const handleChildHide = useEventCallback((nothing, childProps) => {
+    debug('handleOnHide', childProps)
+    const { reactKey } = childProps
+
+    delete previousChildren.current[reactKey]
+    forceUpdate()
+  })
+
+  // A short circuit for an initial render as there will be no `prevMapping`
+  if (typeof previousChildren.current === 'undefined') {
+    wrappedChildren = _.mapValues(getChildMapping(children), (child) =>
+      wrapChild(child, handleChildHide, {
+        animation,
+        duration,
+        directional,
+      }),
+    )
+  } else {
+    const nextMapping = getChildMapping(children)
+    wrappedChildren = mergeChildMappings(previousChildren.current, nextMapping)
 
-    _.forEach(children, (child, key) => {
-      const hasPrev = _.has(prevMapping, key)
-      const hasNext = _.has(nextMapping, key)
+    _.forEach(wrappedChildren, (child, key) => {
+      const hasPrev = previousChildren.current[key]
+      const hasNext = nextMapping[key]
 
-      const { [key]: prevChild } = prevMapping
+      const prevChild = previousChildren.current[key]
       const isLeaving = !_.get(prevChild, 'props.visible')
 
       // Heads up!
       // An item is new (entering), it will be picked from `nextChildren`, so it should be wrapped
       if (hasNext && (!hasPrev || isLeaving)) {
-        children[key] = wrapChild(child, state.handleOnHide, {
+        wrappedChildren[key] = wrapChild(child, handleChildHide, {
           animation,
           duration,
           directional,
@@ -72,7 +80,7 @@ export default class TransitionGroup extends React.Component {
       // An item is old (exiting), it will be picked from `prevChildren`, so it has been already
       // wrapped, so should be only updated
       if (!hasNext && hasPrev && !isLeaving) {
-        children[key] = React.cloneElement(prevChild, { visible: false })
+        wrappedChildren[key] = React.cloneElement(prevChild, { visible: false })
         return
       }
 
@@ -83,7 +91,7 @@ export default class TransitionGroup extends React.Component {
         props: { visible, transitionOnMount },
       } = prevChild
 
-      children[key] = wrapChild(child, state.handleOnHide, {
+      wrappedChildren[key] = wrapChild(child, handleChildHide, {
         animation,
         duration,
         directional,
@@ -91,23 +99,36 @@ export default class TransitionGroup extends React.Component {
         visible,
       })
     })
-
-    return { children }
   }
 
-  render() {
-    debug('render')
-    debug('props', this.props)
-    debug('state', this.state)
-
-    const { children } = this.state
-    const ElementType = getElementType(TransitionGroup, this.props)
-    const rest = getUnhandledProps(TransitionGroup, this.props)
-
-    return <ElementType {...rest}>{_.values(children)}</ElementType>
-  }
+  return wrappedChildren
 }
 
+/**
+ * A Transition.Group animates children as they mount and unmount.
+ */
+const TransitionGroup = React.forwardRef(function (props, ref) {
+  debug('render')
+  debug('props', props)
+
+  const children = useWrappedChildren(
+    props.children,
+    props.animation,
+    props.duration,
+    props.directional,
+  )
+
+  const ElementType = getElementType(TransitionGroup, props)
+  const rest = getUnhandledProps(TransitionGroup, props)
+
+  return (
+    <ElementType {...rest} ref={ref}>
+      {_.values(children)}
+    </ElementType>
+  )
+})
+
+TransitionGroup.displayName = 'TransitionGroup'
 TransitionGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -137,3 +158,5 @@ TransitionGroup.defaultProps = {
   animation: 'fade',
   duration: 500,
 }
+
+export default TransitionGroup
diff --git a/src/views/Advertisement/Advertisement.js b/src/views/Advertisement/Advertisement.js
index 756f1a4fa9..733e20c3b2 100644
--- a/src/views/Advertisement/Advertisement.js
+++ b/src/views/Advertisement/Advertisement.js
@@ -13,7 +13,7 @@ import {
 /**
  * An ad displays third-party promotional content.
  */
-function Advertisement(props) {
+const Advertisement = React.forwardRef(function (props, ref) {
   const { centered, children, className, content, test, unit } = props
 
   const classes = cx(
@@ -28,12 +28,13 @@ function Advertisement(props) {
   const ElementType = getElementType(Advertisement, props)
 
   return (
-    <ElementType {...rest} className={classes} data-text={test}>
+    <ElementType {...rest} className={classes} data-text={test} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Advertisement.displayName = 'Advertisement'
 Advertisement.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index a414d633d3..13cefed144 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -1,6 +1,7 @@
 import cx from 'clsx'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -9,6 +10,7 @@ import {
   getUnhandledProps,
   SUI,
   useKeyOnly,
+  useEventCallback,
 } from '../../lib'
 import Image from '../../elements/Image'
 import CardContent from './CardContent'
@@ -20,80 +22,79 @@ import CardMeta from './CardMeta'
 /**
  * A card displays site content in a manner similar to a playing card.
  */
-export default class Card extends Component {
-  handleClick = (e) => {
-    const { onClick } = this.props
+const Card = React.forwardRef(function (props, ref) {
+  const {
+    centered,
+    children,
+    className,
+    color,
+    content,
+    description,
+    extra,
+    fluid,
+    header,
+    href,
+    image,
+    link,
+    meta,
+    onClick,
+    raised,
+  } = props
+
+  const classes = cx(
+    'ui',
+    color,
+    useKeyOnly(centered, 'centered'),
+    useKeyOnly(fluid, 'fluid'),
+    useKeyOnly(link, 'link'),
+    useKeyOnly(raised, 'raised'),
+    'card',
+    className,
+  )
+  const rest = getUnhandledProps(Card, props)
+  const ElementType = getElementType(Card, props, () => {
+    if (onClick) {
+      return 'a'
+    }
+  })
 
-    if (onClick) onClick(e, this.props)
-  }
+  const handleClick = useEventCallback((e) => {
+    _.invoke(props, 'onClick', e, props)
+  })
 
-  render() {
-    const {
-      centered,
-      children,
-      className,
-      color,
-      content,
-      description,
-      extra,
-      fluid,
-      header,
-      href,
-      image,
-      link,
-      meta,
-      onClick,
-      raised,
-    } = this.props
-
-    const classes = cx(
-      'ui',
-      color,
-      useKeyOnly(centered, 'centered'),
-      useKeyOnly(fluid, 'fluid'),
-      useKeyOnly(link, 'link'),
-      useKeyOnly(raised, 'raised'),
-      'card',
-      className,
+  if (!childrenUtils.isNil(children)) {
+    return (
+      <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
+        {children}
+      </ElementType>
     )
-    const rest = getUnhandledProps(Card, this.props)
-    const ElementType = getElementType(Card, this.props, () => {
-      if (onClick) return 'a'
-    })
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
-    }
-    if (!childrenUtils.isNil(content)) {
-      return (
-        <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
-          {content}
-        </ElementType>
-      )
-    }
-
+  }
+  if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
-        {Image.create(image, {
-          autoGenerateKey: false,
-          defaultProps: {
-            ui: false,
-            wrapped: true,
-          },
-        })}
-        {(description || header || meta) && (
-          <CardContent description={description} header={header} meta={meta} />
-        )}
-        {extra && <CardContent extra>{extra}</CardContent>}
+      <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
+        {content}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
+      {Image.create(image, {
+        autoGenerateKey: false,
+        defaultProps: {
+          ui: false,
+          wrapped: true,
+        },
+      })}
+      {(description || header || meta) && (
+        <CardContent description={description} header={header} meta={meta} />
+      )}
+      {extra && <CardContent extra>{extra}</CardContent>}
+    </ElementType>
+  )
+})
+
+Card.displayName = 'Card'
 Card.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -155,3 +156,5 @@ Card.Description = CardDescription
 Card.Group = CardGroup
 Card.Header = CardHeader
 Card.Meta = CardMeta
+
+export default Card
diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js
index d293948293..475ca2e719 100644
--- a/src/views/Card/CardContent.js
+++ b/src/views/Card/CardContent.js
@@ -20,7 +20,7 @@ import CardMeta from './CardMeta'
 /**
  * A card can contain blocks of content or extra content meant to be formatted separately from the main content.
  */
-function CardContent(props) {
+const CardContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, meta, textAlign } = props
 
   const classes = cx(useKeyOnly(extra, 'extra'), useTextAlignProp(textAlign), 'content', className)
@@ -29,21 +29,21 @@ function CardContent(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {createShorthand(CardHeader, (val) => ({ content: val }), header, { autoGenerateKey: false })}
       {createShorthand(CardMeta, (val) => ({ content: val }), meta, { autoGenerateKey: false })}
       {createShorthand(CardDescription, (val) => ({ content: val }), description, {
@@ -51,8 +51,9 @@ function CardContent(props) {
       })}
     </ElementType>
   )
-}
+})
 
+CardContent.displayName = 'CardContent'
 CardContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Card/CardDescription.js b/src/views/Card/CardDescription.js
index 1edc971632..49352e62f7 100644
--- a/src/views/Card/CardDescription.js
+++ b/src/views/Card/CardDescription.js
@@ -15,19 +15,20 @@ import {
 /**
  * A card can contain a description with one or more paragraphs.
  */
-function CardDescription(props) {
+const CardDescription = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'description', className)
   const rest = getUnhandledProps(CardDescription, props)
   const ElementType = getElementType(CardDescription, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CardDescription.displayName = 'CardDescription'
 CardDescription.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js
index 9402b13da0..276aa27056 100644
--- a/src/views/Card/CardGroup.js
+++ b/src/views/Card/CardGroup.js
@@ -18,7 +18,7 @@ import Card from './Card'
 /**
  * A group of cards.
  */
-function CardGroup(props) {
+const CardGroup = React.forwardRef(function (props, ref) {
   const {
     centered,
     children,
@@ -46,14 +46,14 @@ function CardGroup(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
@@ -65,12 +65,13 @@ function CardGroup(props) {
   })
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {itemsJSX}
     </ElementType>
   )
-}
+})
 
+CardGroup.displayName = 'CardGroup'
 CardGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Card/CardHeader.js b/src/views/Card/CardHeader.js
index abf740da70..9dd0e16d31 100644
--- a/src/views/Card/CardHeader.js
+++ b/src/views/Card/CardHeader.js
@@ -15,19 +15,20 @@ import {
 /**
  * A card can contain a header.
  */
-function CardHeader(props) {
+const CardHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'header', className)
   const rest = getUnhandledProps(CardHeader, props)
   const ElementType = getElementType(CardHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CardHeader.displayName = 'CardHeader'
 CardHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Card/CardMeta.js b/src/views/Card/CardMeta.js
index 20b0ebd9bd..ac1377d220 100644
--- a/src/views/Card/CardMeta.js
+++ b/src/views/Card/CardMeta.js
@@ -15,19 +15,20 @@ import {
 /**
  * A card can contain content metadata.
  */
-function CardMeta(props) {
+const CardMeta = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'meta', className)
   const rest = getUnhandledProps(CardMeta, props)
   const ElementType = getElementType(CardMeta, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CardMeta.displayName = 'CardMeta'
 CardMeta.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js
index d981accf5a..bf136fbed0 100644
--- a/src/views/Comment/Comment.js
+++ b/src/views/Comment/Comment.js
@@ -21,7 +21,7 @@ import CommentText from './CommentText'
 /**
  * A comment displays user feedback to site content.
  */
-function Comment(props) {
+const Comment = React.forwardRef(function (props, ref) {
   const { className, children, collapsed, content } = props
 
   const classes = cx(useKeyOnly(collapsed, 'collapsed'), 'comment', className)
@@ -29,12 +29,13 @@ function Comment(props) {
   const ElementType = getElementType(Comment, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Comment.displayName = 'Comment'
 Comment.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index bb447a4e87..3dde605c83 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -13,7 +13,7 @@ import {
 /**
  * A comment can contain an action.
  */
-function CommentAction(props) {
+const CommentAction = React.forwardRef(function (props, ref) {
   const { active, className, children, content } = props
 
   const classes = cx(useKeyOnly(active, 'active'), className)
@@ -21,16 +21,17 @@ function CommentAction(props) {
   const ElementType = getElementType(CommentAction, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
 CommentAction.defaultProps = {
   as: 'a',
 }
 
+CommentAction.displayName = 'CommentAction'
 CommentAction.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/CommentActions.js b/src/views/Comment/CommentActions.js
index 7f8651fa23..8286ae7005 100644
--- a/src/views/Comment/CommentActions.js
+++ b/src/views/Comment/CommentActions.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain an list of actions a user may perform related to this comment.
  */
-function CommentActions(props) {
+const CommentActions = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('actions', className)
   const rest = getUnhandledProps(CommentActions, props)
   const ElementType = getElementType(CommentActions, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentActions.displayName = 'CommentActions'
 CommentActions.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/CommentAuthor.js b/src/views/Comment/CommentAuthor.js
index b5285101a7..be3e412ac7 100644
--- a/src/views/Comment/CommentAuthor.js
+++ b/src/views/Comment/CommentAuthor.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain an author.
  */
-function CommentAuthor(props) {
+const CommentAuthor = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('author', className)
   const rest = getUnhandledProps(CommentAuthor, props)
   const ElementType = getElementType(CommentAuthor, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentAuthor.displayName = 'CommentAuthor'
 CommentAuthor.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/CommentAvatar.js b/src/views/Comment/CommentAvatar.js
index ba14086893..c709321080 100644
--- a/src/views/Comment/CommentAvatar.js
+++ b/src/views/Comment/CommentAvatar.js
@@ -13,7 +13,7 @@ import {
 /**
  * A comment can contain an image or avatar.
  */
-function CommentAvatar(props) {
+const CommentAvatar = React.forwardRef(function (props, ref) {
   const { className, src } = props
 
   const classes = cx('avatar', className)
@@ -22,12 +22,13 @@ function CommentAvatar(props) {
   const ElementType = getElementType(CommentAvatar, props)
 
   return (
-    <ElementType {...rootProps} className={classes}>
+    <ElementType {...rootProps} className={classes} ref={ref}>
       {createHTMLImage(src, { autoGenerateKey: false, defaultProps: imageProps })}
     </ElementType>
   )
-}
+})
 
+CommentAvatar.displayName = 'CommentAvatar'
 CommentAvatar.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/CommentContent.js b/src/views/Comment/CommentContent.js
index b1e79ac813..9badf0c8ec 100644
--- a/src/views/Comment/CommentContent.js
+++ b/src/views/Comment/CommentContent.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain content.
  */
-function CommentContent(props) {
+const CommentContent = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'content')
   const rest = getUnhandledProps(CommentContent, props)
   const ElementType = getElementType(CommentContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentContent.displayName = 'CommentContent'
 CommentContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
index 9539b8ebd9..5b18238dea 100644
--- a/src/views/Comment/CommentGroup.js
+++ b/src/views/Comment/CommentGroup.js
@@ -15,7 +15,7 @@ import {
 /**
  * Comments can be grouped.
  */
-function CommentGroup(props) {
+const CommentGroup = React.forwardRef(function (props, ref) {
   const { className, children, collapsed, content, minimal, size, threaded } = props
 
   const classes = cx(
@@ -31,12 +31,13 @@ function CommentGroup(props) {
   const ElementType = getElementType(CommentGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentGroup.displayName = 'CommentGroup'
 CommentGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/CommentMetadata.js b/src/views/Comment/CommentMetadata.js
index feabb8b2ef..f06970322e 100644
--- a/src/views/Comment/CommentMetadata.js
+++ b/src/views/Comment/CommentMetadata.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
  */
-function CommentMetadata(props) {
+const CommentMetadata = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('metadata', className)
   const rest = getUnhandledProps(CommentMetadata, props)
   const ElementType = getElementType(CommentMetadata, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentMetadata.displayName = 'CommentMetadata'
 CommentMetadata.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Comment/CommentText.js b/src/views/Comment/CommentText.js
index 9b1e8b5f4c..45392353bf 100644
--- a/src/views/Comment/CommentText.js
+++ b/src/views/Comment/CommentText.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain text.
  */
-function CommentText(props) {
+const CommentText = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'text')
   const rest = getUnhandledProps(CommentText, props)
   const ElementType = getElementType(CommentText, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentText.displayName = 'CommentText'
 CommentText.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/Feed.js b/src/views/Feed/Feed.js
index f14990f08e..725db44d14 100644
--- a/src/views/Feed/Feed.js
+++ b/src/views/Feed/Feed.js
@@ -17,7 +17,7 @@ import FeedUser from './FeedUser'
 /**
  * A feed presents user activity chronologically.
  */
-function Feed(props) {
+const Feed = React.forwardRef(function (props, ref) {
   const { children, className, events, size } = props
 
   const classes = cx('ui', size, 'feed', className)
@@ -26,7 +26,7 @@ function Feed(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
@@ -36,16 +36,18 @@ function Feed(props) {
     const { childKey, date, meta, summary, ...eventData } = eventProps
     const finalKey = childKey ?? [date, meta, summary].join('-')
 
+    // TODO: use .create() factory
     return <FeedEvent date={date} key={finalKey} meta={meta} summary={summary} {...eventData} />
   })
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {eventElements}
     </ElementType>
   )
-}
+})
 
+Feed.displayName = 'Feed'
 Feed.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 7f0c574f78..1ee33e2eb8 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -14,7 +14,7 @@ import FeedExtra from './FeedExtra'
 import FeedMeta from './FeedMeta'
 import FeedSummary from './FeedSummary'
 
-function FeedContent(props) {
+const FeedContent = React.forwardRef(function (props, ref) {
   const { children, className, content, extraImages, extraText, date, meta, summary } = props
 
   const classes = cx('content', className)
@@ -23,14 +23,14 @@ function FeedContent(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {createShorthand(FeedDate, (val) => ({ content: val }), date, { autoGenerateKey: false })}
       {createShorthand(FeedSummary, (val) => ({ content: val }), summary, {
         autoGenerateKey: false,
@@ -45,8 +45,9 @@ function FeedContent(props) {
       {createShorthand(FeedMeta, (val) => ({ content: val }), meta, { autoGenerateKey: false })}
     </ElementType>
   )
-}
+})
 
+FeedContent.displayName = 'FeedContent'
 FeedContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedDate.js b/src/views/Feed/FeedDate.js
index 48c3e781a1..628f73aabb 100644
--- a/src/views/Feed/FeedDate.js
+++ b/src/views/Feed/FeedDate.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * An event or an event summary can contain a date.
  */
-function FeedDate(props) {
+const FeedDate = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('date', className)
   const rest = getUnhandledProps(FeedDate, props)
   const ElementType = getElementType(FeedDate, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+FeedDate.displayName = 'FeedDate'
 FeedDate.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index 64a326b51c..31867b3b73 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -9,7 +9,7 @@ import FeedLabel from './FeedLabel'
 /**
  * A feed contains an event.
  */
-function FeedEvent(props) {
+const FeedEvent = React.forwardRef(function (props, ref) {
   const {
     content,
     children,
@@ -31,15 +31,16 @@ function FeedEvent(props) {
   const contentProps = { content, date, extraImages, extraText, meta, summary }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {createShorthand(FeedLabel, (val) => ({ icon: val }), icon, { autoGenerateKey: false })}
       {createShorthand(FeedLabel, (val) => ({ image: val }), image, { autoGenerateKey: false })}
       {hasContentProp && <FeedContent {...contentProps} />}
       {children}
     </ElementType>
   )
-}
+})
 
+FeedEvent.displayName = 'FeedEvent'
 FeedEvent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js
index 4592fc1661..cb5d446fe6 100644
--- a/src/views/Feed/FeedExtra.js
+++ b/src/views/Feed/FeedExtra.js
@@ -15,7 +15,7 @@ import {
 /**
  * A feed can contain an extra content.
  */
-function FeedExtra(props) {
+const FeedExtra = React.forwardRef(function (props, ref) {
   const { children, className, content, images, text } = props
 
   const classes = cx(
@@ -29,7 +29,7 @@ function FeedExtra(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
@@ -42,13 +42,14 @@ function FeedExtra(props) {
   })
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {content}
       {imageElements}
     </ElementType>
   )
-}
+})
 
+FeedExtra.displayName = 'FeedExtra'
 FeedExtra.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js
index 650f2bb6de..93f28bd6cd 100644
--- a/src/views/Feed/FeedLabel.js
+++ b/src/views/Feed/FeedLabel.js
@@ -14,7 +14,7 @@ import Icon from '../../elements/Icon'
 /**
  * An event can contain an image or icon label.
  */
-function FeedLabel(props) {
+const FeedLabel = React.forwardRef(function (props, ref) {
   const { children, className, content, icon, image } = props
 
   const classes = cx('label', className)
@@ -23,21 +23,22 @@ function FeedLabel(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {content}
       {Icon.create(icon, { autoGenerateKey: false })}
       {createHTMLImage(image)}
     </ElementType>
   )
-}
+})
 
+FeedLabel.displayName = 'FeedLabel'
 FeedLabel.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index 95dd164b61..70eca84786 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -8,7 +8,7 @@ import Icon from '../../elements/Icon'
 /**
  * A feed can contain a like element.
  */
-function FeedLike(props) {
+const FeedLike = React.forwardRef(function (props, ref) {
   const { children, className, content, icon } = props
 
   const classes = cx('like', className)
@@ -17,24 +17,25 @@ function FeedLike(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {Icon.create(icon, { autoGenerateKey: false })}
       {content}
     </ElementType>
   )
-}
+})
 
 FeedLike.defaultProps = {
   as: 'a',
 }
 
+FeedLike.displayName = 'FeedLike'
 FeedLike.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js
index 8282a787cb..816dbc9dba 100644
--- a/src/views/Feed/FeedMeta.js
+++ b/src/views/Feed/FeedMeta.js
@@ -14,7 +14,7 @@ import FeedLike from './FeedLike'
 /**
  * A feed can contain a meta.
  */
-function FeedMeta(props) {
+const FeedMeta = React.forwardRef(function (props, ref) {
   const { children, className, content, like } = props
 
   const classes = cx('meta', className)
@@ -23,20 +23,21 @@ function FeedMeta(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {createShorthand(FeedLike, (val) => ({ content: val }), like, { autoGenerateKey: false })}
       {content}
     </ElementType>
   )
-}
+})
 
+FeedMeta.displayName = 'FeedMeta'
 FeedMeta.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index d79e891a04..2e2055c7f8 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -15,7 +15,7 @@ import FeedUser from './FeedUser'
 /**
  * A feed can contain a summary.
  */
-function FeedSummary(props) {
+const FeedSummary = React.forwardRef(function (props, ref) {
   const { children, className, content, date, user } = props
 
   const classes = cx('summary', className)
@@ -24,14 +24,14 @@ function FeedSummary(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {createShorthand(FeedUser, (val) => ({ content: val }), user, { autoGenerateKey: false })}
       {/*
         Content styles require wrapping whitespace
@@ -43,8 +43,9 @@ function FeedSummary(props) {
       {createShorthand(FeedDate, (val) => ({ content: val }), date, { autoGenerateKey: false })}
     </ElementType>
   )
-}
+})
 
+FeedSummary.displayName = 'FeedSummary'
 FeedSummary.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index a4d90e7a74..9b7d44e55c 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A feed can contain a user element.
  */
-function FeedUser(props) {
+const FeedUser = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('user', className)
   const rest = getUnhandledProps(FeedUser, props)
   const ElementType = getElementType(FeedUser, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+FeedUser.displayName = 'FeedUser'
 FeedUser.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index a66d7ce841..e76e5e4862 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -14,7 +14,7 @@ import ItemMeta from './ItemMeta'
 /**
  * An item view presents large collections of site content for display.
  */
-function Item(props) {
+const Item = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, image, meta } = props
 
   const classes = cx('item', className)
@@ -23,14 +23,14 @@ function Item(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {ItemImage.create(image, { autoGenerateKey: false })}
 
       <ItemContent
@@ -42,7 +42,7 @@ function Item(props) {
       />
     </ElementType>
   )
-}
+})
 
 Item.Content = ItemContent
 Item.Description = ItemDescription
@@ -52,6 +52,7 @@ Item.Header = ItemHeader
 Item.Image = ItemImage
 Item.Meta = ItemMeta
 
+Item.displayName = 'Item'
 Item.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index ab3df2ec32..6699a1cbc1 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -18,7 +18,7 @@ import ItemMeta from './ItemMeta'
 /**
  * An item can contain content.
  */
-function ItemContent(props) {
+const ItemContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, meta, verticalAlign } = props
 
   const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
@@ -27,14 +27,14 @@ function ItemContent(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {ItemHeader.create(header, { autoGenerateKey: false })}
       {ItemMeta.create(meta, { autoGenerateKey: false })}
       {ItemDescription.create(description, { autoGenerateKey: false })}
@@ -42,8 +42,9 @@ function ItemContent(props) {
       {content}
     </ElementType>
   )
-}
+})
 
+ItemContent.displayName = 'ItemContent'
 ItemContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
index 1dc86c537f..be5440a41d 100644
--- a/src/views/Item/ItemDescription.js
+++ b/src/views/Item/ItemDescription.js
@@ -13,19 +13,20 @@ import {
 /**
  * An item can contain a description with a single or multiple paragraphs.
  */
-function ItemDescription(props) {
+const ItemDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(ItemDescription, props)
   const ElementType = getElementType(ItemDescription, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ItemDescription.displayName = 'ItemDescription'
 ItemDescription.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
index 5cab3b3642..ed9a2a0add 100644
--- a/src/views/Item/ItemExtra.js
+++ b/src/views/Item/ItemExtra.js
@@ -13,19 +13,20 @@ import {
 /**
  * An item can contain extra content meant to be formatted separately from the main content.
  */
-function ItemExtra(props) {
+const ItemExtra = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('extra', className)
   const rest = getUnhandledProps(ItemExtra, props)
   const ElementType = getElementType(ItemExtra, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ItemExtra.displayName = 'ItemExtra'
 ItemExtra.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index e41e5ea96c..7ceca3b9ea 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -16,7 +16,7 @@ import Item from './Item'
 /**
  * A group of items.
  */
-function ItemGroup(props) {
+const ItemGroup = React.forwardRef(function (props, ref) {
   const { children, className, content, divided, items, link, relaxed, unstackable } = props
 
   const classes = cx(
@@ -33,14 +33,14 @@ function ItemGroup(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
@@ -56,12 +56,13 @@ function ItemGroup(props) {
   })
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {itemsJSX}
     </ElementType>
   )
-}
+})
 
+ItemGroup.displayName = 'ItemGroup'
 ItemGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
index e01f59cbf3..610e6d649a 100644
--- a/src/views/Item/ItemHeader.js
+++ b/src/views/Item/ItemHeader.js
@@ -13,19 +13,20 @@ import {
 /**
  * An item can contain a header.
  */
-function ItemHeader(props) {
+const ItemHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(ItemHeader, props)
   const ElementType = getElementType(ItemHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ItemHeader.displayName = 'ItemHeader'
 ItemHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Item/ItemImage.d.ts b/src/views/Item/ItemImage.d.ts
index 3a94165d47..d19c8009d5 100644
--- a/src/views/Item/ItemImage.d.ts
+++ b/src/views/Item/ItemImage.d.ts
@@ -1,9 +1,19 @@
 import * as React from 'react'
+
 import { ImageProps, StrictImageProps } from '../../elements/Image'
+import { SemanticSIZES } from '../../generic'
+
+export interface ItemImageProps extends ImageProps {
+  [key: string]: any
 
-export interface ItemImageProps extends ImageProps {}
+  /** An image may appear at different sizes. */
+  size?: SemanticSIZES
+}
 
-export interface StrictItemImageProps extends StrictImageProps {}
+export interface StrictItemImageProps extends StrictImageProps {
+  /** An image may appear at different sizes. */
+  size?: SemanticSIZES
+}
 
 declare const ItemImage: React.FC<ItemImageProps>
 
diff --git a/src/views/Item/ItemImage.js b/src/views/Item/ItemImage.js
index 5e06be9a18..55854ec66e 100644
--- a/src/views/Item/ItemImage.js
+++ b/src/views/Item/ItemImage.js
@@ -6,13 +6,14 @@ import Image from '../../elements/Image'
 /**
  * An item can contain an image.
  */
-function ItemImage(props) {
+const ItemImage = React.forwardRef(function (props, ref) {
   const { size } = props
   const rest = getUnhandledProps(ItemImage, props)
 
-  return <Image {...rest} size={size} ui={!!size} wrapped />
-}
+  return <Image {...rest} size={size} ui={!!size} wrapped ref={ref} />
+})
 
+ItemImage.displayName = 'ItemImage'
 ItemImage.propTypes = {
   /** An image may appear at different sizes. */
   size: Image.propTypes.size,
diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
index 1bacc4b2b8..307bf59a72 100644
--- a/src/views/Item/ItemMeta.js
+++ b/src/views/Item/ItemMeta.js
@@ -13,19 +13,20 @@ import {
 /**
  * An item can contain content metadata.
  */
-function ItemMeta(props) {
+const ItemMeta = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('meta', className)
   const rest = getUnhandledProps(ItemMeta, props)
   const ElementType = getElementType(ItemMeta, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ItemMeta.displayName = 'ItemMeta'
 ItemMeta.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index 4fcfeedf7f..e11df59393 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -20,7 +20,7 @@ import StatisticValue from './StatisticValue'
 /**
  * A statistic emphasizes the current value of an attribute.
  */
-function Statistic(props) {
+const Statistic = React.forwardRef(function (props, ref) {
   const {
     children,
     className,
@@ -50,21 +50,21 @@ function Statistic(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {StatisticValue.create(value, {
         defaultProps: { text },
         autoGenerateKey: false,
@@ -72,8 +72,9 @@ function Statistic(props) {
       {StatisticLabel.create(label, { autoGenerateKey: false })}
     </ElementType>
   )
-}
+})
 
+Statistic.displayName = 'Statistic'
 Statistic.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index d6106d4d9b..eac360d23b 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -17,7 +17,7 @@ import Statistic from './Statistic'
 /**
  * A group of statistics.
  */
-function StatisticGroup(props) {
+const StatisticGroup = React.forwardRef(function (props, ref) {
   const { children, className, color, content, horizontal, inverted, items, size, widths } = props
 
   const classes = cx(
@@ -35,26 +35,27 @@ function StatisticGroup(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {_.map(items, (item) => Statistic.create(item))}
     </ElementType>
   )
-}
+})
 
+StatisticGroup.displayName = 'StatisticGroup'
 StatisticGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index 19f116812c..efc01ab9bc 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -13,19 +13,20 @@ import {
 /**
  * A statistic can contain a label to help provide context for the presented value.
  */
-function StatisticLabel(props) {
+const StatisticLabel = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('label', className)
   const rest = getUnhandledProps(StatisticLabel, props)
   const ElementType = getElementType(StatisticLabel, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+StatisticLabel.displayName = 'StatisticLabel'
 StatisticLabel.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 0e84115220..78ac615220 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -14,7 +14,7 @@ import {
 /**
  * A statistic can contain a numeric, icon, image, or text value.
  */
-function StatisticValue(props) {
+const StatisticValue = React.forwardRef(function (props, ref) {
   const { children, className, content, text } = props
 
   const classes = cx(useKeyOnly(text, 'text'), 'value', className)
@@ -22,12 +22,13 @@ function StatisticValue(props) {
   const ElementType = getElementType(StatisticValue, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+StatisticValue.displayName = 'StatisticValue'
 StatisticValue.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/static.routes.js b/static.routes.js
index ed64b1fe16..5093932991 100644
--- a/static.routes.js
+++ b/static.routes.js
@@ -36,82 +36,27 @@ export default async () => {
     })),
 
     // Routes for components, i.e. /element/button
-    ..._.map(
-      _.filter(getComponentMenu(), (baseInfo) => !baseInfo.external),
-      (baseInfo) => ({
-        path: getComponentPathname(baseInfo),
-        component: 'docs/src/components/ComponentDoc',
-        priority: 0.8,
-        getData: async () => {
-          const componentsInfo = getComponentGroupInfo(baseInfo.displayName)
-          const sidebarSections = getSidebarSections(baseInfo.displayName)
-
-          return {
-            componentsInfo,
-            exampleSources,
-            sidebarSections,
-            displayName: baseInfo.displayName,
-            deprecated: !!_.find(
-              _.get(componentsInfo[baseInfo.displayName], 'docblock.tags'),
-              (tag) => tag.title === 'deprecated',
-            ),
-            seeTags: getInfoForSeeTags(componentsInfo[baseInfo.displayName]),
-          }
-        },
-      }),
-    ),
-
-    {
-      path: `/addons/ref/`,
+    ..._.map(getComponentMenu(), (baseInfo) => ({
+      path: getComponentPathname(baseInfo),
       component: 'docs/src/components/ComponentDoc',
       priority: 0.8,
       getData: async () => {
-        const componentsInfo = {
-          Ref: {
-            displayName: 'Ref',
-            props: [
-              {
-                description: ['Called when a child component will be mounted or updated.'],
-                name: 'innerRef',
-                type: 'func',
-                required: true,
-                tags: [
-                  {
-                    title: 'param',
-                    description: 'Referred node.',
-                    type: {
-                      type: 'NameExpression',
-                      name: 'HTMLElement',
-                    },
-                    name: 'node',
-                  },
-                ],
-              },
-            ],
-            type: 'addon',
-            isParent: true,
-            subcomponents: [],
-            docblock: {
-              tags: [],
-              description: [
-                'This component exposes the `innerRef` prop that supports functional and React.createRef()/React.useRef() API and returns the DOM node of both functional and class component children.',
-              ],
-            },
-            examplesExist: true,
-          },
-        }
-        const sidebarSections = getSidebarSections('Ref')
+        const componentsInfo = getComponentGroupInfo(baseInfo.displayName)
+        const sidebarSections = getSidebarSections(baseInfo.displayName)
 
         return {
           componentsInfo,
           exampleSources,
           sidebarSections,
-          displayName: 'Ref',
-          deprecated: true,
-          seeTags: [],
+          displayName: baseInfo.displayName,
+          deprecated: !!_.find(
+            _.get(componentsInfo[baseInfo.displayName], 'docblock.tags'),
+            (tag) => tag.title === 'deprecated',
+          ),
+          seeTags: getInfoForSeeTags(componentsInfo[baseInfo.displayName]),
         }
       },
-    },
+    })),
 
     // Routes for layouts, i.e. /layouts/theming
     ..._.map(await getLayoutPaths(), ({ routeName, componentFilename }) => ({
diff --git a/test/specs/addons/Confirm/Confirm-test.js b/test/specs/addons/Confirm/Confirm-test.js
index d59a48c8ec..46a96b471e 100644
--- a/test/specs/addons/Confirm/Confirm-test.js
+++ b/test/specs/addons/Confirm/Confirm-test.js
@@ -26,19 +26,23 @@ describe('Confirm', () => {
     if (wrapper && wrapper.unmount) wrapper.unmount()
   })
 
-  common.isConformant(Confirm)
+  common.isConformant(Confirm, { rendersPortal: true })
 
   common.implementsShorthandProp(Confirm, {
     autoGenerateKey: false,
     propKey: 'header',
     ShorthandComponent: Modal.Header,
+    rendersPortal: true,
     mapValueToProps: (content) => ({ content }),
+    requiredProps: { open: true },
   })
   common.implementsShorthandProp(Confirm, {
     autoGenerateKey: false,
     propKey: 'content',
     ShorthandComponent: Modal.Content,
+    rendersPortal: true,
     mapValueToProps: (content) => ({ content }),
+    requiredProps: { open: true },
   })
 
   describe('children', () => {
diff --git a/test/specs/addons/Pagination/Pagination-test.js b/test/specs/addons/Pagination/Pagination-test.js
index 97cc1d19ff..0b50014282 100644
--- a/test/specs/addons/Pagination/Pagination-test.js
+++ b/test/specs/addons/Pagination/Pagination-test.js
@@ -5,12 +5,13 @@ import PaginationItem from 'src/addons/Pagination/PaginationItem'
 import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'
 
+const requiredProps = {
+  totalPages: 0,
+}
+
 describe('Pagination', () => {
-  common.isConformant(Pagination, {
-    requiredProps: {
-      totalPages: 0,
-    },
-  })
+  common.isConformant(Pagination, { requiredProps })
+  common.forwardsRef(Pagination, { requiredProps, tagName: 'div' })
   common.hasSubcomponents(Pagination, [PaginationItem])
 
   describe('disabled', () => {
@@ -24,11 +25,10 @@ describe('Pagination', () => {
 
   describe('onPageChange', () => {
     it('is called with (e, data) when clicked on a pagination item', () => {
-      const event = { target: null }
       const onPageChange = sandbox.spy()
       const onPageItemClick = sandbox.spy()
 
-      mount(
+      const wrapper = mount(
         <Pagination
           activePage={1}
           onPageChange={onPageChange}
@@ -36,14 +36,13 @@ describe('Pagination', () => {
           totalPages={3}
         />,
       )
-        .find('PaginationItem')
-        .at(4)
-        .simulate('click', event)
+
+      wrapper.find('PaginationItem').at(4).simulate('click')
 
       onPageChange.should.have.been.calledOnce()
-      onPageChange.should.have.been.calledWithMatch(event, { activePage: 3 })
+      onPageChange.should.have.been.calledWithMatch({ type: 'click' }, { activePage: 3 })
       onPageItemClick.should.have.been.calledOnce()
-      onPageItemClick.should.have.been.calledWithMatch(event, { value: 3 })
+      onPageItemClick.should.have.been.calledWithMatch({ type: 'click' }, { value: 3 })
     })
 
     it('will be omitted if occurred for the same pagination item as the current', () => {
diff --git a/test/specs/addons/Pagination/PaginationItem-test.js b/test/specs/addons/Pagination/PaginationItem-test.js
index cdf9f0a342..33bb84b3b0 100644
--- a/test/specs/addons/Pagination/PaginationItem-test.js
+++ b/test/specs/addons/Pagination/PaginationItem-test.js
@@ -6,6 +6,7 @@ import { sandbox } from 'test/utils'
 
 describe('PaginationItem', () => {
   common.isConformant(PaginationItem)
+  common.forwardsRef(PaginationItem, { tagName: 'a' })
   common.implementsCreateMethod(PaginationItem)
 
   describe('active', () => {
diff --git a/test/specs/addons/Portal/Portal-test.js b/test/specs/addons/Portal/Portal-test.js
index 383e8bbcfc..05cf68a1ae 100644
--- a/test/specs/addons/Portal/Portal-test.js
+++ b/test/specs/addons/Portal/Portal-test.js
@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { act } from 'react-dom/test-utils'
 
 import * as common from 'test/specs/commonTests'
 import { domEvent, sandbox } from 'test/utils'
@@ -147,7 +148,9 @@ describe('Portal', () => {
       )
 
       wrapper.setProps({ open: false, children: <p /> })
-      wrapper.unmount()
+      act(() => {
+        wrapper.unmount()
+      })
       onUnmount.should.have.been.calledOnce()
     })
 
@@ -159,33 +162,13 @@ describe('Portal', () => {
         </Portal>,
       )
 
-      wrapper.unmount()
+      act(() => {
+        wrapper.unmount()
+      })
       onUnmount.should.have.been.calledOnce()
     })
   })
 
-  describe('portalNode', () => {
-    it('maintains ref to DOM node with host element', () => {
-      wrapperMount(
-        <Portal open>
-          <p />
-        </Portal>,
-      )
-      wrapper.instance().contentRef.current.tagName.should.equal('P')
-    })
-
-    it('maintains ref to DOM node with React component', () => {
-      const EmptyComponent = () => <p />
-
-      wrapperMount(
-        <Portal open>
-          <EmptyComponent />
-        </Portal>,
-      )
-      wrapper.instance().contentRef.current.tagName.should.equal('P')
-    })
-  })
-
   describe('onOpen', () => {
     it('is called on trigger click', () => {
       const onOpen = sandbox.spy()
@@ -263,6 +246,25 @@ describe('Portal', () => {
     })
   })
 
+  describe('triggerRef', () => {
+    it('calls itself and an original ref', () => {
+      const elementRef = React.createRef()
+      const triggerRef = React.createRef()
+
+      wrapperMount(
+        <Portal trigger={<div id='trigger' ref={elementRef} />} triggerRef={triggerRef}>
+          <p />
+        </Portal>,
+      )
+      const element = wrapper.getDOMNode()
+
+      expect(element.tagName).to.equal('DIV')
+
+      expect(elementRef.current).to.equal(element)
+      expect(triggerRef.current).to.equal(element)
+    })
+  })
+
   describe('mountNode', () => {
     it('passed to PortalInner', () => {
       const mountNode = document.createElement('div')
@@ -712,26 +714,4 @@ describe('Portal', () => {
       }, 0)
     })
   })
-
-  describe('triggerRef', () => {
-    it('maintains ref on the trigger', () => {
-      const triggerRef = sandbox.spy()
-      const mountNode = document.createElement('div')
-      document.body.appendChild(mountNode)
-
-      wrapperMount(
-        <Portal trigger={<button id='trigger' />} triggerRef={triggerRef}>
-          <p />
-        </Portal>,
-        { attachTo: mountNode },
-      )
-      const trigger = document.querySelector('#trigger')
-
-      triggerRef.should.have.been.calledOnce()
-      triggerRef.should.have.been.calledWithMatch(trigger)
-
-      wrapper.detach()
-      document.body.removeChild(mountNode)
-    })
-  })
 })
diff --git a/test/specs/addons/Portal/PortalInner-test.js b/test/specs/addons/Portal/PortalInner-test.js
index e53c2724be..47af45d2e4 100644
--- a/test/specs/addons/Portal/PortalInner-test.js
+++ b/test/specs/addons/Portal/PortalInner-test.js
@@ -1,4 +1,5 @@
-import React, { createRef } from 'react'
+import React from 'react'
+import { act } from 'react-dom/test-utils'
 
 import PortalInner from 'src/addons/Portal/PortalInner'
 import { isBrowser } from 'src/lib'
@@ -20,7 +21,7 @@ describe('PortalInner', () => {
       isBrowser.override = null
     })
 
-    it('renders `null` when is SSR', () => {
+    it('renders `null` when during Server-Side Rendering', () => {
       mount(
         <PortalInner>
           <p />
@@ -29,16 +30,59 @@ describe('PortalInner', () => {
     })
   })
 
-  describe('innerRef', () => {
-    it('returns ref', () => {
-      const innerRef = createRef()
+  describe('ref', () => {
+    it('returns ref a DOM element', () => {
+      const portalRef = React.createRef()
+      const elementRef = React.createRef()
+
       const wrapper = mount(
-        <PortalInner innerRef={innerRef}>
-          <p />
+        <PortalInner ref={portalRef}>
+          <p ref={elementRef} />
+        </PortalInner>,
+      )
+      const domNode = wrapper.getDOMNode()
+
+      expect(elementRef.current).to.equal(domNode)
+      expect(portalRef.current).to.equal(domNode)
+      expect(domNode.tagName).to.equal('P')
+    })
+
+    it('returns ref a elements that uses ref forwarding', () => {
+      const CustomComponent = React.forwardRef((props, ref) => {
+        return <p {...props} ref={ref} />
+      })
+
+      const portalRef = React.createRef()
+      const elementRef = React.createRef()
+
+      const wrapper = mount(
+        <PortalInner ref={portalRef}>
+          <CustomComponent ref={elementRef} />
+        </PortalInner>,
+      )
+      const domNode = wrapper.getDOMNode()
+
+      expect(elementRef.current).to.equal(domNode)
+      expect(portalRef.current).to.equal(domNode)
+      expect(domNode.tagName).to.equal('P')
+    })
+
+    it('returns ref to a create element in other cases', () => {
+      function CustomComponent(props) {
+        return <p {...props} />
+      }
+
+      const portalRef = React.createRef()
+      const wrapper = mount(
+        <PortalInner ref={portalRef}>
+          <CustomComponent />
         </PortalInner>,
       )
+      const domNode = wrapper.getDOMNode()
 
-      expect(wrapper.getDOMNode()).to.equal(innerRef.current)
+      expect(portalRef.current).to.equal(domNode)
+      expect(domNode.tagName).to.equal('DIV')
+      expect(domNode.dataset.suirPortal).to.equal('true')
     })
   })
 
@@ -64,7 +108,9 @@ describe('PortalInner', () => {
         </PortalInner>,
       )
 
-      wrapper.unmount()
+      act(() => {
+        wrapper.unmount()
+      })
       onUnmount.should.have.been.calledOnce()
     })
   })
diff --git a/test/specs/addons/Radio/Radio-test.js b/test/specs/addons/Radio/Radio-test.js
index aaf4ad215a..96826928df 100644
--- a/test/specs/addons/Radio/Radio-test.js
+++ b/test/specs/addons/Radio/Radio-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Radio', () => {
   common.isConformant(Radio)
+  common.forwardsRef(Radio, { tagName: 'input' })
 
   it('renders a radio Checkbox', () => {
     const wrapper = shallow(<Radio />)
diff --git a/test/specs/addons/Select/Select-test.js b/test/specs/addons/Select/Select-test.js
index a0c59db4e6..de0a909bf9 100644
--- a/test/specs/addons/Select/Select-test.js
+++ b/test/specs/addons/Select/Select-test.js
@@ -11,6 +11,7 @@ const requiredProps = {
 describe('Select', () => {
   common.isConformant(Select, { requiredProps })
   common.hasSubcomponents(Select, [Dropdown.Divider, Dropdown.Header, Dropdown.Item, Dropdown.Menu])
+  common.forwardsRef(Select, { requiredProps })
 
   it('renders a selection Dropdown', () => {
     shallow(<Select {...requiredProps} />)
diff --git a/test/specs/addons/TextArea/TextArea-test.js b/test/specs/addons/TextArea/TextArea-test.js
index 295bf0cbcb..0ba2816f11 100644
--- a/test/specs/addons/TextArea/TextArea-test.js
+++ b/test/specs/addons/TextArea/TextArea-test.js
@@ -34,18 +34,17 @@ describe('TextArea', () => {
     if (attachTo) document.body.removeChild(attachTo)
   })
 
-  common.isConformant(TextArea, {
-    eventTargets: {
-      onChange: 'textarea',
-    },
-  })
+  common.isConformant(TextArea)
+  common.forwardsRef(TextArea, { tagName: 'textarea' })
 
   describe('focus', () => {
     it('can be set via a ref', () => {
-      wrapperMount(<TextArea />)
+      const ref = React.createRef()
+
+      wrapperMount(<TextArea ref={ref} />)
       const element = document.querySelector('textarea')
 
-      wrapper.instance().focus()
+      ref.current.focus()
       document.activeElement.should.equal(element)
     })
   })
diff --git a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
index 79d9f23a63..b335e9cab7 100644
--- a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
+++ b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
@@ -4,68 +4,29 @@ import TransitionablePortal from 'src/addons/TransitionablePortal/Transitionable
 import * as common from 'test/specs/commonTests'
 import { domEvent, sandbox, assertWithTimeout } from 'test/utils'
 
-// ----------------------------------------
-// Wrapper
-// ----------------------------------------
-let wrapper
-
-// we need to unmount the modal after every test to remove it from the document
-// wrap the render methods to update a global wrapper that is unmounted after each test
-const wrapperMount = (...args) => (wrapper = mount(...args))
-const wrapperShallow = (...args) => (wrapper = shallow(...args))
-
 const quickTransition = { duration: 0 }
 const requiredProps = {
-  children: <div />,
+  children: <div id='children' />,
 }
 
 describe('TransitionablePortal', () => {
-  beforeEach(() => {
-    wrapper = undefined
-    document.body.innerHTML = ''
-  })
-
-  afterEach(() => {
-    if (wrapper && wrapper.unmount) wrapper.unmount()
+  common.isConformant(TransitionablePortal, {
+    rendersPortal: true,
+    requiredProps,
   })
 
-  common.isConformant(TransitionablePortal, { requiredProps })
-
   describe('children', () => {
-    it('renders a Portal', () => {
-      wrapperShallow(<TransitionablePortal {...requiredProps} />).should.have.descendants('Portal')
-    })
-
     it('renders a Transition', () => {
-      wrapperShallow(<TransitionablePortal {...requiredProps} />).should.have.descendants(
-        'Transition',
-      )
-    })
-  })
-
-  describe('getDerivedStateFromProps', () => {
-    it('passes `open` prop to `portalOpen` when defined', () => {
-      wrapperMount(<TransitionablePortal {...requiredProps} />)
+      const wrapper = mount(<TransitionablePortal {...requiredProps} open />)
 
-      wrapper.setProps({ open: true })
-      wrapper.should.have.state('portalOpen', true)
-      wrapper.setProps({ open: false })
-      wrapper.should.have.state('portalOpen', false)
-    })
-
-    it('does not pass `open` prop to `portalOpen` when not defined', () => {
-      wrapperMount(<TransitionablePortal {...requiredProps} />)
-
-      wrapper.setProps({ transition: {} })
-      wrapper.should.have.not.state('portalOpen')
+      wrapper.should.have.descendants('.transition')
     })
   })
 
   describe('onClose', () => {
-    it('is called with (null, data) when Portal closes', (done) => {
+    it('is called with (null, data) on a click outside', (done) => {
       const onClose = sandbox.spy()
-
-      wrapperMount(
+      const wrapper = mount(
         <TransitionablePortal
           {...requiredProps}
           onClose={onClose}
@@ -80,36 +41,33 @@ describe('TransitionablePortal', () => {
       assertWithTimeout(() => {
         onClose.should.have.been.calledOnce()
         onClose.should.have.been.calledWithMatch(null, { portalOpen: false })
+
+        wrapper.unmount()
       }, done)
     })
 
-    it('changes `portalOpen` to false', () => {
-      wrapperMount(
-        <TransitionablePortal
-          {...requiredProps}
-          transition={quickTransition}
-          trigger={<button />}
-        />,
-      )
+    it('hides contents on a click outside', () => {
+      const wrapper = mount(<TransitionablePortal {...requiredProps} trigger={<button />} />)
 
       wrapper.find('button').simulate('click')
-      domEvent.click(document.body)
+      wrapper.should.have.descendants('.in#children')
 
-      wrapper.should.have.state('portalOpen', false)
+      domEvent.click(document.body)
+      wrapper.update()
+      wrapper.should.have.descendants('.out#children')
     })
   })
 
   describe('onHide', () => {
     it('is called with (null, data) when exiting transition finished', (done) => {
       const onHide = sandbox.spy()
-      const trigger = <button />
-      wrapperMount(
+      const wrapper = mount(
         <TransitionablePortal
           {...requiredProps}
           onHide={onHide}
           open
           transition={quickTransition}
-          trigger={trigger}
+          trigger={<button />}
         />,
       )
 
@@ -121,37 +79,57 @@ describe('TransitionablePortal', () => {
           portalOpen: false,
           transitionVisible: false,
         })
+
+        wrapper.unmount()
       }, done)
     })
   })
 
   describe('onOpen', () => {
-    it('is called with (null, data) when Portal opens', () => {
+    it('is called with (null, data) when opens', () => {
       const onOpen = sandbox.spy()
+      const wrapper = mount(
+        <TransitionablePortal {...requiredProps} onOpen={onOpen} trigger={<button />} />,
+      )
 
-      wrapperMount(<TransitionablePortal {...requiredProps} onOpen={onOpen} trigger={<button />} />)
       wrapper.find('button').simulate('click')
-
       onOpen.should.have.been.calledOnce()
       onOpen.should.have.been.calledWithMatch(null, { portalOpen: true })
     })
 
-    it('changes `portalOpen` to true', () => {
-      wrapperMount(<TransitionablePortal {...requiredProps} trigger={<button />} />)
+    it('renders contents', () => {
+      const wrapper = mount(<TransitionablePortal {...requiredProps} trigger={<button />} />)
 
       wrapper.find('button').simulate('click')
-      wrapper.should.have.state('portalOpen', true)
+      wrapper.should.have.descendants('.in#children')
     })
   })
 
   describe('open', () => {
-    it('does not block update of state on Portal close', () => {
-      wrapperMount(<TransitionablePortal {...requiredProps} open />)
-      wrapper.should.have.state('portalOpen', true)
-      wrapper.update()
+    it('blocks update of state on a portal close', () => {
+      const wrapper = mount(<TransitionablePortal {...requiredProps} open />)
+      wrapper.find('#children').should.have.className('in')
 
       domEvent.click(document.body)
-      wrapper.should.have.state('portalOpen', false)
+      wrapper.find('#children').should.have.className('in')
+    })
+
+    it('passes `open` prop to Transition when defined', () => {
+      const wrapper = mount(<TransitionablePortal {...requiredProps} />)
+
+      wrapper.setProps({ open: true })
+      wrapper.find('#children').should.have.className('in')
+
+      wrapper.setProps({ open: false })
+      wrapper.find('#children').should.have.className('out')
+    })
+
+    it('does not pass `open` prop to Transition when not defined', () => {
+      const wrapper = mount(<TransitionablePortal {...requiredProps} />)
+      wrapper.should.have.not.descendants('#children')
+
+      wrapper.setProps({ transition: {} })
+      wrapper.should.have.not.descendants('#children')
     })
   })
 })
diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
deleted file mode 100644
index 4d75f07fc2..0000000000
--- a/test/specs/behaviors/Visibility/Visibility-test.js
+++ /dev/null
@@ -1,630 +0,0 @@
-import _ from 'lodash'
-import React from 'react'
-
-import Visibility from 'src/behaviors/Visibility'
-import * as common from 'test/specs/commonTests'
-import { domEvent, sandbox } from 'test/utils'
-
-let wrapper
-
-const wrapperMount = (node, opts) => {
-  wrapper = mount(node, opts)
-  return wrapper
-}
-
-const mockScroll = (top, bottom) => {
-  if (wrapper) {
-    wrapper.instance().ref.current = {
-      getBoundingClientRect: () => ({
-        bottom,
-        top,
-        height: bottom - top,
-        left: 0,
-        right: window.innerWidth,
-        width: window.innerWidth,
-      }),
-    }
-  }
-
-  domEvent.scroll(window)
-}
-
-const expectations = [
-  {
-    name: 'topPassed',
-    callbackName: 'onTopPassed',
-    reversible: true,
-    truthy: [
-      [-1, 100],
-      [-100, -1],
-    ],
-    falsy: [
-      [0, 100],
-      [window.innerHeight + 100, window.innerHeight + 300],
-    ],
-  },
-  {
-    name: 'bottomPassed',
-    callbackName: 'onBottomPassed',
-    reversible: true,
-    truthy: [
-      [-100, -1],
-      [-100, -10],
-    ],
-    falsy: [
-      [-10, 0],
-      [-100, window.innerHeight],
-    ],
-  },
-  {
-    name: 'topVisible',
-    callbackName: 'onTopVisible',
-    reversible: true,
-    truthy: [
-      [0, 100],
-      [window.innerHeight, window.innerHeight],
-    ],
-    falsy: [
-      [-1, 100],
-      [window.innerHeight + 1, window.innerHeight + 2],
-    ],
-  },
-  {
-    name: 'bottomVisible',
-    callbackName: 'onBottomVisible',
-    reversible: true,
-    truthy: [
-      [-100, 0],
-      [-100, window.innerHeight],
-    ],
-    falsy: [
-      [-100, -1],
-      [0, window.innerHeight + 1],
-    ],
-  },
-  {
-    name: 'passing',
-    callbackName: 'onPassing',
-    reversible: true,
-    truthy: [
-      [-1, window.innerHeight + 1],
-      [-1, window.innerHeight - 1],
-      [-1, 0],
-    ],
-    falsy: [
-      [0, window.innerHeight],
-      [1, window.innerHeight + 1],
-      [1, window.innerHeight - 1],
-      [window.innerHeight, window.innerHeight + 1],
-    ],
-  },
-  {
-    name: 'onScreen',
-    callbackName: 'onOnScreen',
-    truthy: [
-      [0, window.innerHeight],
-      [-1, window.innerHeight + 1],
-      [-1, window.innerHeight],
-      [0, window.innerHeight + 1],
-    ],
-    falsy: [
-      [-2, -1],
-      [window.innerHeight + 1, window.innerHeight + 2],
-    ],
-  },
-  {
-    name: 'offScreen',
-    callbackName: 'onOffScreen',
-    truthy: [
-      [-2, -1],
-      [window.innerHeight + 1, window.innerHeight + 2],
-    ],
-    falsy: [
-      [0, window.innerHeight],
-      [-1, window.innerHeight + 1],
-      [-1, window.innerHeight],
-      [0, window.innerHeight + 1],
-    ],
-  },
-  {
-    name: 'fits',
-    truthy: [[0, window.innerHeight]],
-    falsy: [
-      [-1, window.innerHeight + 1],
-      [0, window.innerHeight + 1],
-      [-1, window.innerHeight],
-    ],
-  },
-]
-
-describe('Visibility', () => {
-  common.isConformant(Visibility)
-
-  beforeEach(() => {
-    sandbox.stub(window, 'requestAnimationFrame').callsArg(0).returns(1)
-    wrapper = undefined
-  })
-
-  afterEach(() => {
-    if (wrapper && wrapper.unmount) {
-      try {
-        wrapper.unmount()
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
-    }
-  })
-
-  describe('calculations', () => {
-    _.forEach(expectations, ({ falsy, name, truthy }) => {
-      it(`calculates ${name}`, () => {
-        const onUpdate = sandbox.spy()
-        wrapperMount(<Visibility onUpdate={onUpdate} />)
-
-        _.forEach(truthy, ([top, bottom]) => {
-          mockScroll(top, bottom)
-          onUpdate.should.have.been.calledWithMatch(null, {
-            calculations: {
-              [name]: true,
-            },
-          })
-        })
-
-        _.forEach(falsy, ([top, bottom]) => {
-          mockScroll(top, bottom)
-          onUpdate.should.have.been.calledWithMatch(null, {
-            calculations: {
-              [name]: false,
-            },
-          })
-        })
-      })
-    })
-  })
-
-  describe('callbacks', () => {
-    _.forEach(_.filter(expectations, 'callbackName'), ({ callbackName, falsy, truthy }) => {
-      it(`fires ${callbackName}`, () => {
-        const callback = sandbox.spy()
-        const opts = { [callbackName]: callback }
-        wrapperMount(<Visibility {...opts} continuous />)
-
-        _.forEach(falsy, ([top, bottom]) => mockScroll(top, bottom))
-        callback.should.not.have.been.called()
-
-        _.forEach(truthy, ([top, bottom]) => mockScroll(top, bottom))
-        callback.should.have.callCount(truthy.length)
-      })
-
-      it(`fires ${callbackName} once`, () => {
-        const callback = sandbox.spy()
-        const falsyCond = _.first(falsy)
-        const truthyCond = _.first(truthy)
-        const opts = { [callbackName]: callback }
-
-        wrapperMount(<Visibility {...opts} />)
-
-        mockScroll(...truthyCond)
-        mockScroll(...falsyCond)
-        mockScroll(...truthyCond)
-        mockScroll(...falsyCond)
-        mockScroll(...truthyCond)
-
-        callback.should.have.been.calledOnce()
-      })
-
-      it(`fires ${callbackName} when condition changes`, () => {
-        const callback = sandbox.spy()
-        const falsyCond = _.first(falsy)
-        const truthyCond = _.first(truthy)
-        const opts = { [callbackName]: callback }
-        wrapperMount(<Visibility {...opts} once={false} />)
-
-        mockScroll(...truthyCond)
-        mockScroll(...falsyCond)
-        mockScroll(...truthyCond)
-        mockScroll(...truthyCond)
-
-        callback.should.have.been.calledTwice()
-      })
-    })
-
-    describe('reverse', () => {
-      _.forEach(_.filter(expectations, 'reversible'), ({ callbackName, falsy, truthy }) => {
-        it(`fires ${callbackName}Reverse once`, () => {
-          const falsyCond = _.first(falsy)
-          const truthyCond = _.first(truthy)
-
-          const forward = sandbox.spy()
-          const reverse = sandbox.spy()
-          const opts = { [callbackName]: forward, [`${callbackName}Reverse`]: reverse }
-
-          wrapperMount(<Visibility {...opts} />)
-
-          mockScroll(...truthyCond)
-          forward.should.have.been.calledOnce()
-          reverse.should.have.not.been.called()
-
-          mockScroll(...falsyCond)
-          forward.should.have.been.calledOnce()
-          reverse.should.have.been.calledOnce()
-        })
-
-        it(`fires ${callbackName}Reverse when condition changes`, () => {
-          const falsyCond = _.first(falsy)
-          const truthyCond = _.first(truthy)
-
-          const forward = sandbox.spy()
-          const reverse = sandbox.spy()
-          const opts = { [callbackName]: forward, [`${callbackName}Reverse`]: reverse }
-
-          wrapperMount(<Visibility {...opts} once={false} />)
-
-          mockScroll(...truthyCond)
-          forward.should.have.been.calledOnce()
-          reverse.should.have.not.been.called()
-
-          mockScroll(...falsyCond)
-          forward.should.have.been.calledOnce()
-          reverse.should.have.been.calledOnce()
-
-          mockScroll(...truthyCond)
-          forward.should.have.been.calledTwice()
-          reverse.should.have.been.calledOnce()
-
-          mockScroll(...falsyCond)
-          forward.should.have.been.calledTwice()
-          reverse.should.have.been.calledTwice()
-        })
-      })
-    })
-
-    describe('direction', () => {
-      let pageYOffset
-
-      beforeEach(() => {
-        pageYOffset = window.pageYOffset
-      })
-
-      afterEach(() => {
-        window.pageYOffset = pageYOffset
-      })
-
-      it('returns up when scrolling down', () => {
-        const onUpdate = sandbox.spy()
-        mount(<Visibility onUpdate={onUpdate} />)
-
-        window.pageYOffset = 5
-        domEvent.scroll(window)
-        onUpdate.should.have.been.calledWithMatch(null, {
-          calculations: { direction: 'down' },
-        })
-      })
-
-      it('returns up when scrolling up', () => {
-        window.pageYOffset = 100
-        const onUpdate = sandbox.spy()
-        mount(<Visibility onUpdate={onUpdate} />)
-
-        window.pageYOffset = 50
-        domEvent.scroll(window)
-        onUpdate.should.have.been.calledWithMatch(null, {
-          calculations: { direction: 'up' },
-        })
-      })
-
-      it('gets direction from `context` element', () => {
-        const context = document.createElement('div')
-        const onUpdate = sandbox.spy()
-
-        sandbox.stub(context, 'scrollTop').value(0)
-        mount(<Visibility context={context} onUpdate={onUpdate} />)
-
-        sandbox.stub(context, 'scrollTop').value(5)
-        domEvent.scroll(context)
-        onUpdate.should.have.been.calledWithMatch(null, {
-          calculations: { direction: 'down' },
-        })
-      })
-    })
-  })
-
-  describe('context', () => {
-    it('should use window as default scroll context', () => {
-      const onUpdate = sandbox.spy()
-      mount(<Visibility onUpdate={onUpdate} />)
-
-      domEvent.scroll(window)
-      onUpdate.should.have.been.called()
-    })
-
-    it('should set a scroll context', () => {
-      const div = document.createElement('div')
-      const onUpdate = sandbox.spy()
-      mount(<Visibility context={div} onUpdate={onUpdate} />)
-
-      domEvent.scroll(window)
-      onUpdate.should.not.have.been.called()
-
-      domEvent.scroll(div)
-      onUpdate.should.have.been.called()
-    })
-
-    it('should not call onUpdate when context is null', () => {
-      const onUpdate = sandbox.spy()
-      mount(<Visibility context={null} onUpdate={onUpdate} />)
-
-      domEvent.scroll(document)
-      onUpdate.should.not.have.been.called()
-    })
-
-    it('should call onUpdate when context changes', () => {
-      const div = document.createElement('div')
-      const onUpdate = sandbox.spy()
-      const renderedComponent = mount(<Visibility context={null} onUpdate={onUpdate} />)
-      renderedComponent.setProps({ context: div })
-
-      domEvent.scroll(div)
-      onUpdate.should.have.been.called()
-    })
-
-    it('should not call onUpdate when context changes and component is unmounted', () => {
-      const div = document.createElement('div')
-      const onUpdate = sandbox.spy()
-      const renderedComponent = mount(<Visibility context={null} onUpdate={onUpdate} />)
-      renderedComponent.setProps({ context: div })
-      renderedComponent.unmount()
-
-      domEvent.scroll(div)
-      onUpdate.should.not.have.been.called()
-
-      domEvent.scroll(document)
-      onUpdate.should.not.have.been.called()
-    })
-  })
-
-  describe('componentWillUnmount', () => {
-    it('will cancel requestAnimationFrame', () => {
-      const cancelAnimationFrame = sandbox.spy(window, 'cancelAnimationFrame')
-      wrapperMount(<Visibility />)
-
-      mockScroll(0, 0)
-      wrapper.unmount()
-
-      cancelAnimationFrame.should.have.been.calledOnce()
-    })
-  })
-
-  describe('fireOnMount', () => {
-    it('fires callbacks after mount', () => {
-      const onUpdate = sandbox.spy()
-
-      mockScroll(0, 0)
-      wrapperMount(<Visibility fireOnMount onUpdate={onUpdate} />)
-
-      onUpdate.should.have.been.calledOnce()
-      onUpdate.should.have.been.calledWithMatch(null, {
-        calculations: { height: 0, width: 0 },
-        fireOnMount: true,
-      })
-    })
-  })
-
-  describe('offset', () => {
-    _.forEach(_.filter(expectations, 'callbackName'), ({ callbackName, falsy, name, truthy }) => {
-      it(`fires ${name} when offset is number`, () => {
-        const callback = sandbox.spy()
-        const opts = { [callbackName]: callback }
-
-        const offset = 10
-        const falsyCond = _.map(_.first(falsy), (value) => value + offset)
-        const truthyCond = _.map(_.first(truthy), (value) => value + offset)
-
-        wrapperMount(<Visibility {...opts} offset={offset} />)
-        mockScroll(...truthyCond)
-        mockScroll(...falsyCond)
-
-        callback.should.have.been.calledOnce()
-      })
-
-      it(`fires ${name} when offset is array`, () => {
-        const callback = sandbox.spy()
-        const opts = { [callbackName]: callback }
-
-        const bottomOffset = 20
-        const topOffset = 10
-        const falsyCond = [falsy[0][0] + topOffset, falsy[0][1] + bottomOffset]
-        const truthyCond = [truthy[0][0] + topOffset, truthy[0][1] + bottomOffset]
-
-        wrapperMount(<Visibility {...opts} offset={[topOffset, bottomOffset]} />)
-        mockScroll(...truthyCond)
-        mockScroll(...falsyCond)
-
-        callback.should.have.been.calledOnce()
-      })
-    })
-  })
-
-  describe('onPassed', () => {
-    it('will flush firedCallbacks when value is changed', () => {
-      wrapperMount(<Visibility />)
-
-      wrapper.setProps({ once: false })
-      wrapper.instance().firedCallbacks.should.be.empty()
-    })
-  })
-
-  describe('onPassed', () => {
-    it('fires callback when pixels passed', () => {
-      const onPassed = {
-        20: sandbox.spy(),
-        '20%': sandbox.spy(),
-        50: sandbox.spy(),
-        '50%': sandbox.spy(),
-        100: sandbox.spy(),
-        '100%': sandbox.spy(),
-      }
-      wrapperMount(<Visibility continuous onPassed={onPassed} />)
-
-      mockScroll(100, 200)
-      onPassed[20].should.not.have.been.called('20px')
-
-      mockScroll(-20, 180)
-      onPassed[20].should.have.been.called('20px')
-      onPassed['20%'].should.not.have.been.called('20%')
-
-      mockScroll(-40, 160)
-      onPassed['20%'].should.have.been.called('20%')
-      onPassed[50].should.not.have.been.called('50px')
-
-      mockScroll(-50, 150)
-      onPassed[50].should.have.been.called('50px')
-      onPassed['50%'].should.not.have.been.called('50%')
-      onPassed[100].should.not.have.been.called('100px')
-
-      mockScroll(-100, 100)
-      onPassed['50%'].should.have.been.called('50%')
-      onPassed[100].should.have.been.called('100px')
-      onPassed['100%'].should.not.have.been.called('100%')
-
-      mockScroll(-200, 0)
-      onPassed['100%'].should.have.been.called('100%')
-    })
-  })
-
-  describe('onUpdate', () => {
-    it('fires when scrolling', () => {
-      const onUpdate = sandbox.spy()
-      wrapperMount(<Visibility onUpdate={onUpdate} />)
-
-      mockScroll(0, 0)
-      mockScroll(0, 0)
-
-      onUpdate.should.have.been.calledTwice()
-    })
-
-    it('fires when window resized', () => {
-      const onUpdate = sandbox.spy()
-      wrapperMount(<Visibility onUpdate={onUpdate} />)
-
-      domEvent.resize(window)
-      onUpdate.should.have.been.calledOnce()
-    })
-
-    it('passes calculations to onUpdate', () => {
-      let calculations
-      const onUpdate = (e, props) => (calculations = props.calculations)
-
-      wrapperMount(<Visibility onUpdate={onUpdate} />)
-      mockScroll(0, 0)
-
-      calculations.should.contain.all.keys([
-        'bottomPassed',
-        'bottomVisible',
-        'fits',
-        'height',
-        'offScreen',
-        'onScreen',
-        'passing',
-        'percentagePassed',
-        'pixelsPassed',
-        'topPassed',
-        'topVisible',
-        'width',
-      ])
-    })
-
-    it('updates width and height after scroll', () => {
-      const onUpdate = sandbox.spy()
-      wrapperMount(<Visibility onUpdate={onUpdate} />)
-
-      mockScroll(0, 100)
-      onUpdate.should.have.been.calledWithMatch(null, {
-        calculations: {
-          height: 100,
-          width: window.innerWidth,
-        },
-      })
-
-      mockScroll(50, 3000)
-      onUpdate.should.have.been.calledWithMatch(null, {
-        calculations: {
-          height: 2950,
-          width: window.innerWidth,
-        },
-      })
-    })
-
-    it('shows passed pixels and percentage', () => {
-      const onUpdate = sandbox.spy()
-      wrapperMount(<Visibility onUpdate={onUpdate} />)
-
-      mockScroll(0, 100)
-      onUpdate.should.have.been.calledWithMatch(null, {
-        calculations: {
-          percentagePassed: 0,
-          pixelsPassed: 0,
-        },
-      })
-
-      mockScroll(-1, 99)
-      onUpdate.should.have.been.calledWithMatch(null, {
-        calculations: {
-          percentagePassed: 0.01,
-          pixelsPassed: 1,
-        },
-      })
-
-      mockScroll(-2, 198)
-      onUpdate.should.have.been.calledWithMatch(null, {
-        calculations: {
-          percentagePassed: 0.01,
-          pixelsPassed: 2,
-        },
-      })
-
-      mockScroll(-10, 0)
-      onUpdate.should.have.been.calledWithMatch(null, {
-        calculations: {
-          percentagePassed: 1,
-          pixelsPassed: 10,
-        },
-      })
-    })
-  })
-
-  describe('updateOn', () => {
-    beforeEach(() => {
-      requestAnimationFrame.restore()
-      sandbox.stub(window, 'requestAnimationFrame').callsFake((fn) => setTimeout(() => fn(), 0))
-    })
-
-    it('defaults to "events"', () => {
-      wrapperMount(<Visibility />).should.have.prop('updateOn', 'events')
-    })
-
-    it('fires onUpdate after mount when updateOn="repaint"', (done) => {
-      const onUpdate = sandbox.spy()
-      wrapperMount(<Visibility onUpdate={onUpdate} updateOn='repaint' />)
-
-      setTimeout(() => {
-        onUpdate.should.have.been.calledOnce()
-        wrapper.unmount()
-
-        done()
-      }, 0)
-    })
-
-    it('fires onUpdate after change to updateOn="repaint"', (done) => {
-      const onUpdate = sandbox.spy()
-      wrapperMount(<Visibility onUpdate={onUpdate} />)
-
-      wrapper.setProps({ updateOn: 'repaint' })
-      setTimeout(() => {
-        onUpdate.should.have.been.calledOnce()
-        wrapper.unmount()
-
-        done()
-      }, 0)
-    })
-  })
-})
diff --git a/test/specs/collections/Breadcrumb/Breadcrumb-test.js b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
index a7b3d7585b..5848b1b752 100644
--- a/test/specs/collections/Breadcrumb/Breadcrumb-test.js
+++ b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
@@ -7,6 +7,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('Breadcrumb', () => {
   common.isConformant(Breadcrumb)
+  common.forwardsRef(Breadcrumb)
+  common.forwardsRef(Breadcrumb, { requiredProps: { children: <span /> } })
   common.hasSubcomponents(Breadcrumb, [BreadcrumbDivider, BreadcrumbSection])
   common.hasUIClassName(Breadcrumb)
   common.rendersChildren(Breadcrumb, {
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js
index 69b2220fb3..0c3c37912c 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js
@@ -1,3 +1,4 @@
+import faker from 'faker'
 import React from 'react'
 
 import BreadcrumbDivider from 'src/collections/Breadcrumb/BreadcrumbDivider'
@@ -5,6 +6,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('BreadcrumbDivider', () => {
   common.isConformant(BreadcrumbDivider)
+  common.forwardsRef(BreadcrumbDivider)
+  common.forwardsRef(BreadcrumbDivider, { requiredProps: { content: faker.lorem.word() } })
   common.rendersChildren(BreadcrumbDivider)
 
   common.implementsIconProp(BreadcrumbDivider, {
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
index a82b09c6a1..1381627c71 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -6,6 +6,7 @@ import { sandbox } from 'test/utils'
 
 describe('BreadcrumbSection', () => {
   common.isConformant(BreadcrumbSection)
+  common.forwardsRef(BreadcrumbSection)
   common.rendersChildren(BreadcrumbSection)
 
   common.propKeyOnlyToClassName(BreadcrumbSection, 'active')
@@ -39,7 +40,7 @@ describe('BreadcrumbSection', () => {
       const event = { target: null }
       const props = { active: true, content: 'home' }
 
-      shallow(<BreadcrumbSection onClick={onClick} {...props} />).simulate('click', event)
+      mount(<BreadcrumbSection onClick={onClick} {...props} />).simulate('click', event)
 
       onClick.should.have.been.calledOnce()
       onClick.should.have.been.calledWithMatch(event, props)
diff --git a/test/specs/collections/Form/Form-test.js b/test/specs/collections/Form/Form-test.js
index e39859cde9..3396aec327 100644
--- a/test/specs/collections/Form/Form-test.js
+++ b/test/specs/collections/Form/Form-test.js
@@ -34,6 +34,10 @@ describe('Form', () => {
     rendersContent: false,
   })
 
+  common.forwardsRef(Form, {
+    tagName: 'form',
+    requiredProps: { children: <input /> },
+  })
   common.implementsWidthProp(Form, [], {
     propKey: 'widths',
   })
diff --git a/test/specs/collections/Form/FormButton-test.js b/test/specs/collections/Form/FormButton-test.js
index 5b62ac7257..539a65d364 100644
--- a/test/specs/collections/Form/FormButton-test.js
+++ b/test/specs/collections/Form/FormButton-test.js
@@ -15,4 +15,6 @@ describe('FormButton', () => {
       .find('FormField')
       .should.have.prop('control', Button)
   })
+
+  common.forwardsRef(FormButton, { tagName: 'button' })
 })
diff --git a/test/specs/collections/Form/FormCheckbox-test.js b/test/specs/collections/Form/FormCheckbox-test.js
index 985e6f9c58..c152284b11 100644
--- a/test/specs/collections/Form/FormCheckbox-test.js
+++ b/test/specs/collections/Form/FormCheckbox-test.js
@@ -14,4 +14,6 @@ describe('FormCheckbox', () => {
       .find('FormField')
       .should.have.prop('control', Checkbox)
   })
+
+  common.forwardsRef(FormCheckbox, { tagName: 'input' })
 })
diff --git a/test/specs/collections/Form/FormDropdown-test.js b/test/specs/collections/Form/FormDropdown-test.js
index e988678d75..1587568b86 100644
--- a/test/specs/collections/Form/FormDropdown-test.js
+++ b/test/specs/collections/Form/FormDropdown-test.js
@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 describe('FormDropdown', () => {
   common.isConformant(FormDropdown, { ignoredTypingsProps: ['error'] })
   common.labelImplementsHtmlForProp(FormDropdown)
+  common.forwardsRef(FormDropdown)
 
   it('renders a FormField with a Dropdown control', () => {
     shallow(<FormDropdown />)
diff --git a/test/specs/collections/Form/FormField-test.js b/test/specs/collections/Form/FormField-test.js
index b41d6324d1..e780b7a286 100644
--- a/test/specs/collections/Form/FormField-test.js
+++ b/test/specs/collections/Form/FormField-test.js
@@ -13,6 +13,41 @@ describe('FormField', () => {
   common.isConformant(FormField)
   common.rendersChildren(FormField)
 
+  // No Control
+  common.forwardsRef(FormField)
+  common.forwardsRef(FormField, {
+    tagName: 'div',
+    requiredProps: {
+      children: <input />,
+    },
+  })
+
+  // HTML Checkbox/Radio Control
+  common.forwardsRef(FormField, {
+    tagName: 'input',
+    requiredProps: { control: 'input', type: 'radio' },
+  })
+  common.forwardsRef(FormField, {
+    tagName: 'input',
+    requiredProps: { control: 'input', type: 'checkbox' },
+  })
+
+  // Checkbox/Radio Control
+  common.forwardsRef(FormField, {
+    tagName: 'input',
+    requiredProps: { control: Checkbox },
+  })
+  common.forwardsRef(FormField, {
+    tagName: 'input',
+    requiredProps: { control: Radio },
+  })
+
+  // Other Control
+  common.forwardsRef(FormField, {
+    tagName: 'input',
+    requiredProps: { control: 'input' },
+  })
+
   common.implementsHTMLLabelProp(FormField, { autoGenerateKey: false })
   common.implementsWidthProp(FormField, SUI.WIDTHS, {
     canEqual: false,
diff --git a/test/specs/collections/Form/FormGroup-test.js b/test/specs/collections/Form/FormGroup-test.js
index c9bd6828b9..c97294b0a7 100644
--- a/test/specs/collections/Form/FormGroup-test.js
+++ b/test/specs/collections/Form/FormGroup-test.js
@@ -16,4 +16,6 @@ describe('FormGroup', () => {
   common.propKeyOnlyToClassName(FormGroup, 'grouped')
   common.propKeyOnlyToClassName(FormGroup, 'inline')
   common.propKeyOnlyToClassName(FormGroup, 'unstackable')
+
+  common.forwardsRef(FormGroup)
 })
diff --git a/test/specs/collections/Form/FormInput-test.js b/test/specs/collections/Form/FormInput-test.js
index 32e036352a..951e0a6e4a 100644
--- a/test/specs/collections/Form/FormInput-test.js
+++ b/test/specs/collections/Form/FormInput-test.js
@@ -6,9 +6,52 @@ import * as common from 'test/specs/commonTests'
 
 describe('FormInput', () => {
   common.isConformant(FormInput, {
+    eventTargets: {
+      // keyboard
+      onKeyDown: 'input',
+      onKeyPress: 'input',
+      onKeyUp: 'input',
+
+      // focus
+      onFocus: 'input',
+      onBlur: 'input',
+
+      // form
+      onChange: 'input',
+      onInput: 'input',
+
+      // mouse
+      onClick: 'input',
+      onContextMenu: 'input',
+      onDrag: 'input',
+      onDragEnd: 'input',
+      onDragEnter: 'input',
+      onDragExit: 'input',
+      onDragLeave: 'input',
+      onDragOver: 'input',
+      onDragStart: 'input',
+      onDrop: 'input',
+      onMouseDown: 'input',
+      onMouseEnter: 'input',
+      onMouseLeave: 'input',
+      onMouseMove: 'input',
+      onMouseOut: 'input',
+      onMouseOver: 'input',
+      onMouseUp: 'input',
+
+      // selection
+      onSelect: 'input',
+
+      // touch
+      onTouchCancel: 'input',
+      onTouchEnd: 'input',
+      onTouchMove: 'input',
+      onTouchStart: 'input',
+    },
     ignoredTypingsProps: ['label', 'error'],
   })
   common.labelImplementsHtmlForProp(FormInput)
+  common.forwardsRef(FormInput, { tagName: 'input' })
 
   it('renders a FormField with a Input control', () => {
     shallow(<FormInput />)
diff --git a/test/specs/collections/Form/FormRadio-test.js b/test/specs/collections/Form/FormRadio-test.js
index ec31b57aa2..72576ead0c 100644
--- a/test/specs/collections/Form/FormRadio-test.js
+++ b/test/specs/collections/Form/FormRadio-test.js
@@ -8,6 +8,7 @@ describe('FormRadio', () => {
   common.isConformant(FormRadio, {
     ignoredTypingsProps: ['type'],
   })
+  common.forwardsRef(FormRadio, { tagName: 'input' })
 
   it('renders a FormField with a Radio control', () => {
     shallow(<FormRadio />)
diff --git a/test/specs/collections/Form/FormSelect-test.js b/test/specs/collections/Form/FormSelect-test.js
index 150fa02576..7ab6cc4d0d 100644
--- a/test/specs/collections/Form/FormSelect-test.js
+++ b/test/specs/collections/Form/FormSelect-test.js
@@ -11,6 +11,7 @@ const requiredProps = {
 describe('FormSelect', () => {
   common.isConformant(FormSelect, { requiredProps, ignoredTypingsProps: ['error'] })
   common.labelImplementsHtmlForProp(FormSelect, { requiredProps })
+  common.forwardsRef(FormSelect, { requiredProps })
 
   it('renders a FormField with a Select control', () => {
     shallow(<FormSelect {...requiredProps} />)
diff --git a/test/specs/collections/Form/FormTextArea-test.js b/test/specs/collections/Form/FormTextArea-test.js
index ee6151feaa..3a2117eb34 100644
--- a/test/specs/collections/Form/FormTextArea-test.js
+++ b/test/specs/collections/Form/FormTextArea-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('FormTextArea', () => {
   common.isConformant(FormTextArea)
+  common.forwardsRef(FormTextArea, { tagName: 'textarea' })
   common.labelImplementsHtmlForProp(FormTextArea)
 
   it('renders a FormField with a TextArea control', () => {
diff --git a/test/specs/collections/Grid/Grid-test.js b/test/specs/collections/Grid/Grid-test.js
index 24ace8487e..4056d3a038 100644
--- a/test/specs/collections/Grid/Grid-test.js
+++ b/test/specs/collections/Grid/Grid-test.js
@@ -7,6 +7,7 @@ import { SUI } from 'src/lib'
 
 describe('Grid', () => {
   common.isConformant(Grid)
+  common.forwardsRef(Grid)
   common.hasSubcomponents(Grid, [GridRow, GridColumn])
   common.hasUIClassName(Grid)
   common.rendersChildren(Grid, {
diff --git a/test/specs/collections/Grid/GridColumn-test.js b/test/specs/collections/Grid/GridColumn-test.js
index 4af1491cb1..36ca5e58c2 100644
--- a/test/specs/collections/Grid/GridColumn-test.js
+++ b/test/specs/collections/Grid/GridColumn-test.js
@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('GridColumn', () => {
   common.isConformant(GridColumn)
+  common.forwardsRef(GridColumn)
   common.rendersChildren(GridColumn, {
     rendersContent: false,
   })
diff --git a/test/specs/collections/Grid/GridRow-test.js b/test/specs/collections/Grid/GridRow-test.js
index 131dd780cd..fd785c6878 100644
--- a/test/specs/collections/Grid/GridRow-test.js
+++ b/test/specs/collections/Grid/GridRow-test.js
@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('GridRow', () => {
   common.isConformant(GridRow)
+  common.forwardsRef(GridRow)
   common.rendersChildren(GridRow, {
     rendersContent: false,
   })
diff --git a/test/specs/collections/Menu/Menu-test.js b/test/specs/collections/Menu/Menu-test.js
index 83982bc55b..50865464e1 100644
--- a/test/specs/collections/Menu/Menu-test.js
+++ b/test/specs/collections/Menu/Menu-test.js
@@ -108,36 +108,24 @@ describe('Menu', () => {
   })
 
   describe('onItemClick', () => {
-    it('can be omitted', () => {
-      const click = () =>
-        mount(<Menu items={[{ key: 'home', name: 'home' }]} />)
-          .find('MenuItem')
-          .first()
-          .simulate('click')
-
-      expect(click).to.not.throw()
-    })
-
     it('is called with (e, { name, index }) when clicked', () => {
-      const event = { target: null }
-      const itemSpy = sandbox.spy()
-      const menuSpy = sandbox.spy()
+      const onClick = sandbox.spy()
+      const onItemClick = sandbox.spy()
 
       const items = [
         { key: 'home', name: 'home' },
-        { key: 'users', name: 'users', onClick: itemSpy },
+        { key: 'users', name: 'users', onClick },
       ]
       const matchProps = { index: 1, name: 'users' }
 
-      mount(<Menu items={items} onItemClick={menuSpy} />)
-        .find('MenuItem')
-        .last()
-        .simulate('click', event)
+      const wrapper = mount(<Menu items={items} onItemClick={onItemClick} />)
+
+      wrapper.find('MenuItem').last().simulate('click')
 
-      itemSpy.should.have.been.calledOnce()
-      itemSpy.should.have.been.calledWithMatch(event, matchProps)
-      menuSpy.should.have.been.calledOnce()
-      menuSpy.should.have.been.calledWithMatch(event, matchProps)
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch({ type: 'click' }, matchProps)
+      onItemClick.should.have.been.calledOnce()
+      onItemClick.should.have.been.calledWithMatch({ type: 'click' }, matchProps)
     })
   })
 })
diff --git a/test/specs/collections/Menu/MenuHeader-test.js b/test/specs/collections/Menu/MenuHeader-test.js
index 868a40b484..e8d9b32dc3 100644
--- a/test/specs/collections/Menu/MenuHeader-test.js
+++ b/test/specs/collections/Menu/MenuHeader-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('MenuHeader', () => {
   common.isConformant(MenuHeader)
+  common.forwardsRef(MenuHeader)
   common.rendersChildren(MenuHeader)
 })
diff --git a/test/specs/collections/Menu/MenuItem-test.js b/test/specs/collections/Menu/MenuItem-test.js
index 0552c9a92d..2c1b63a1f3 100644
--- a/test/specs/collections/Menu/MenuItem-test.js
+++ b/test/specs/collections/Menu/MenuItem-test.js
@@ -7,6 +7,8 @@ import { sandbox } from 'test/utils'
 
 describe('MenuItem', () => {
   common.isConformant(MenuItem)
+  common.forwardsRef(MenuItem)
+  common.forwardsRef(MenuItem, { requiredProps: { children: <span /> } })
   common.rendersChildren(MenuItem)
 
   common.implementsCreateMethod(MenuItem)
@@ -23,8 +25,14 @@ describe('MenuItem', () => {
   common.propValueOnlyToClassName(MenuItem, 'color', SUI.COLORS)
   common.propValueOnlyToClassName(MenuItem, 'position', ['left', 'right'])
 
-  it('renders a `div` by default', () => {
-    shallow(<MenuItem />).should.have.tagName('div')
+  describe('as', () => {
+    it('renders a `div` by default', () => {
+      shallow(<MenuItem />).should.have.tagName('div')
+    })
+
+    it('renders an `a` tag', () => {
+      shallow(<MenuItem onClick={() => null} />).should.have.tagName('a')
+    })
   })
 
   describe('name', () => {
@@ -48,24 +56,19 @@ describe('MenuItem', () => {
   describe('onClick', () => {
     it('is called with (e, data) when clicked', () => {
       const onClick = sandbox.spy()
-      const event = { target: null }
       const props = { name: 'home', index: 0 }
 
-      shallow(<MenuItem onClick={onClick} {...props} />).simulate('click', event)
+      mount(<MenuItem onClick={onClick} {...props} />).simulate('click')
 
       onClick.should.have.been.calledOnce()
-      onClick.should.have.been.calledWithMatch(event, props)
+      onClick.should.have.been.calledWithMatch({ type: 'click' }, props)
     })
 
     it('is not called when is disabled', () => {
       const onClick = sandbox.spy()
 
-      shallow(<MenuItem disabled onClick={onClick} />).simulate('click')
+      mount(<MenuItem disabled onClick={onClick} />).simulate('click')
       onClick.should.have.callCount(0)
     })
-
-    it('renders an `a` tag', () => {
-      shallow(<MenuItem onClick={() => null} />).should.have.tagName('a')
-    })
   })
 })
diff --git a/test/specs/collections/Menu/MenuMenu-test.js b/test/specs/collections/Menu/MenuMenu-test.js
index ba032de937..1e99430a39 100644
--- a/test/specs/collections/Menu/MenuMenu-test.js
+++ b/test/specs/collections/Menu/MenuMenu-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MenuMenu', () => {
   common.isConformant(MenuMenu)
+  common.forwardsRef(MenuMenu)
   common.rendersChildren(MenuMenu)
 
   common.propValueOnlyToClassName(MenuMenu, 'position', ['left', 'right'])
diff --git a/test/specs/collections/Message/Message-test.js b/test/specs/collections/Message/Message-test.js
index 7e0442d56f..4dfe6410fd 100644
--- a/test/specs/collections/Message/Message-test.js
+++ b/test/specs/collections/Message/Message-test.js
@@ -11,6 +11,8 @@ import { sandbox } from 'test/utils'
 
 describe('Message', () => {
   common.isConformant(Message)
+  common.forwardsRef(Message)
+  common.forwardsRef(Message, { requiredProps: { children: <span /> } })
   common.hasSubcomponents(Message, [MessageContent, MessageHeader, MessageList])
   common.hasUIClassName(Message)
   common.rendersChildren(Message, {
diff --git a/test/specs/collections/Message/MessageContent-test.js b/test/specs/collections/Message/MessageContent-test.js
index 65f71f50b3..2058e90d03 100644
--- a/test/specs/collections/Message/MessageContent-test.js
+++ b/test/specs/collections/Message/MessageContent-test.js
@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MessageContent', () => {
   common.isConformant(MessageContent)
+  common.forwardsRef(MessageContent)
   common.rendersChildren(MessageContent)
 
   it('renders an div tag', () => {
diff --git a/test/specs/collections/Message/MessageHeader-test.js b/test/specs/collections/Message/MessageHeader-test.js
index 7811884523..c656c43086 100644
--- a/test/specs/collections/Message/MessageHeader-test.js
+++ b/test/specs/collections/Message/MessageHeader-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MessageHeader', () => {
   common.isConformant(MessageHeader)
+  common.forwardsRef(MessageHeader)
   common.implementsCreateMethod(MessageHeader)
   common.rendersChildren(MessageHeader)
 
diff --git a/test/specs/collections/Message/MessageItem-test.js b/test/specs/collections/Message/MessageItem-test.js
index 9e6ac82a3b..b12106d1cf 100644
--- a/test/specs/collections/Message/MessageItem-test.js
+++ b/test/specs/collections/Message/MessageItem-test.js
@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MessageItem', () => {
   common.isConformant(MessageItem)
+  common.forwardsRef(MessageItem, { tagName: 'li' })
   common.implementsCreateMethod(MessageItem)
   common.rendersChildren(MessageItem)
 
diff --git a/test/specs/collections/Message/MessageList-test.js b/test/specs/collections/Message/MessageList-test.js
index 19a03f6a8d..f6d4f71656 100644
--- a/test/specs/collections/Message/MessageList-test.js
+++ b/test/specs/collections/Message/MessageList-test.js
@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MessageList', () => {
   common.isConformant(MessageList)
+  common.forwardsRef(MessageList, { tagName: 'ul' })
   common.implementsCreateMethod(MessageList)
   common.rendersChildren(MessageList, {
     rendersContent: false,
diff --git a/test/specs/collections/Table/Table-test.js b/test/specs/collections/Table/Table-test.js
index d65894082a..6629d521a4 100644
--- a/test/specs/collections/Table/Table-test.js
+++ b/test/specs/collections/Table/Table-test.js
@@ -13,6 +13,8 @@ import * as _ from 'lodash'
 
 describe('Table', () => {
   common.isConformant(Table)
+  common.forwardsRef(Table, { tagName: 'table' })
+  common.forwardsRef(Table, { requiredProps: { children: <tbody /> }, tagName: 'table' })
   common.hasSubcomponents(Table, [
     TableBody,
     TableCell,
diff --git a/test/specs/collections/Table/TableBody-test.js b/test/specs/collections/Table/TableBody-test.js
index 6244bbd5c8..6e55c0e30f 100644
--- a/test/specs/collections/Table/TableBody-test.js
+++ b/test/specs/collections/Table/TableBody-test.js
@@ -5,6 +5,7 @@ import TableBody from 'src/collections/Table/TableBody'
 
 describe('TableBody', () => {
   common.isConformant(TableBody)
+  common.forwardsRef(TableBody, { tagName: 'tbody' })
   common.rendersChildren(TableBody, {
     rendersContent: false,
   })
diff --git a/test/specs/collections/Table/TableCell-test.js b/test/specs/collections/Table/TableCell-test.js
index e35480635c..f3ab95329e 100644
--- a/test/specs/collections/Table/TableCell-test.js
+++ b/test/specs/collections/Table/TableCell-test.js
@@ -6,6 +6,8 @@ import { SUI } from 'src/lib'
 
 describe('TableCell', () => {
   common.isConformant(TableCell)
+  common.forwardsRef(TableCell, { tagName: 'td' })
+  common.forwardsRef(TableCell, { requiredProps: { children: <span /> }, tagName: 'td' })
   common.rendersChildren(TableCell)
 
   common.implementsCreateMethod(TableCell)
diff --git a/test/specs/collections/Table/TableFooter-test.js b/test/specs/collections/Table/TableFooter-test.js
index 5e43c10106..b231ea3438 100644
--- a/test/specs/collections/Table/TableFooter-test.js
+++ b/test/specs/collections/Table/TableFooter-test.js
@@ -5,6 +5,7 @@ import TableFooter from 'src/collections/Table/TableFooter'
 
 describe('TableFooter', () => {
   common.isConformant(TableFooter)
+  common.forwardsRef(TableFooter, { tagName: 'tfoot' })
 
   it('renders as a tfoot by default', () => {
     shallow(<TableFooter />).should.have.tagName('tfoot')
diff --git a/test/specs/collections/Table/TableHeader-test.js b/test/specs/collections/Table/TableHeader-test.js
index 0f9de54fc8..020bee565e 100644
--- a/test/specs/collections/Table/TableHeader-test.js
+++ b/test/specs/collections/Table/TableHeader-test.js
@@ -5,6 +5,7 @@ import TableHeader from 'src/collections/Table/TableHeader'
 
 describe('TableHeader', () => {
   common.isConformant(TableHeader)
+  common.forwardsRef(TableHeader, { tagName: 'thead' })
   common.rendersChildren(TableHeader)
 
   common.propKeyOnlyToClassName(TableHeader, 'fullWidth', {
diff --git a/test/specs/collections/Table/TableHeaderCell-test.js b/test/specs/collections/Table/TableHeaderCell-test.js
index ef5b54366a..b8012b6daf 100644
--- a/test/specs/collections/Table/TableHeaderCell-test.js
+++ b/test/specs/collections/Table/TableHeaderCell-test.js
@@ -5,6 +5,7 @@ import TableHeaderCell from 'src/collections/Table/TableHeaderCell'
 
 describe('TableHeaderCell', () => {
   common.isConformant(TableHeaderCell)
+  common.forwardsRef(TableHeaderCell, { tagName: 'th' })
   common.propKeyAndValueToClassName(TableHeaderCell, 'sorted', ['ascending', 'descending'])
 
   it('renders as a th by default', () => {
diff --git a/test/specs/collections/Table/TableRow-test.js b/test/specs/collections/Table/TableRow-test.js
index c25efda41a..9ca6551fb0 100644
--- a/test/specs/collections/Table/TableRow-test.js
+++ b/test/specs/collections/Table/TableRow-test.js
@@ -5,6 +5,8 @@ import TableRow from 'src/collections/Table/TableRow'
 
 describe('TableRow', () => {
   common.isConformant(TableRow)
+  common.forwardsRef(TableRow, { tagName: 'tr' })
+  common.forwardsRef(TableRow, { requiredProps: { children: <span /> }, tagName: 'tr' })
   common.rendersChildren(TableRow, {
     rendersContent: false,
   })
diff --git a/test/specs/commonTests/classNameHelpers.js b/test/specs/commonTests/classNameHelpers.js
index 21fce54c12..65671731a1 100644
--- a/test/specs/commonTests/classNameHelpers.js
+++ b/test/specs/commonTests/classNameHelpers.js
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import React, { createElement } from 'react'
+import React from 'react'
 
 import { consoleUtil } from 'test/utils'
 
@@ -8,24 +8,24 @@ export const classNamePropValueBeforePropName = (Component, propKey, propValues,
 
   propValues.forEach((propVal) => {
     it(`adds "${propVal} ${className}" to className`, () => {
-      shallow(createElement(Component, { ...requiredProps, [propKey]: propVal }), {
-        autoNesting: true,
-      }).should.have.className(`${propVal} ${className}`)
+      const wrapper = mount(
+        React.createElement(Component, { ...requiredProps, [propKey]: propVal }),
+      )
+      const elementClassName = wrapper.childAt(0).getDOMNode().className
+
+      expect(elementClassName).include(`${propVal} ${className}`)
     })
   })
 }
 
 export const noClassNameFromBoolProps = (Component, propKey, propValues, options = {}) => {
-  const { className = propKey, nestingLevel = 0, requiredProps = {} } = options
+  const { className = propKey, requiredProps = {} } = options
 
   _.each([true, false], (bool) =>
     it(`does not add any className when ${bool}`, () => {
       consoleUtil.disableOnce()
 
-      const wrapper = shallow(createElement(Component, { ...requiredProps, [propKey]: bool }), {
-        autoNesting: true,
-        nestingLevel,
-      })
+      const wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: bool }))
 
       wrapper.should.not.have.className(className)
       wrapper.should.not.have.className('true')
@@ -38,7 +38,8 @@ export const noClassNameFromBoolProps = (Component, propKey, propValues, options
 
 export const noDefaultClassNameFromProp = (Component, propKey, propValues, options = {}) => {
   const { defaultProps = {} } = Component
-  const { className = propKey, nestingLevel = 0, requiredProps = {} } = options
+  const { className = propKey, requiredProps = {} } = options
+
   // required props may include a prop that creates a className
   // if so, we cannot assert that it doesn't exist by default because it is required to exist
   // skip assertions for required props
@@ -46,7 +47,9 @@ export const noDefaultClassNameFromProp = (Component, propKey, propValues, optio
   if (propKey in requiredProps) return
 
   it('is not included in className when not defined', () => {
-    const wrapper = shallow(<Component {...requiredProps} />, { autoNesting: true, nestingLevel })
+    consoleUtil.disableOnce()
+    const wrapper = mount(<Component {...requiredProps} />)
+
     wrapper.should.not.have.className(className)
 
     // ensure that none of the prop option values are in className
diff --git a/test/specs/commonTests/forwardsRef.js b/test/specs/commonTests/forwardsRef.js
new file mode 100644
index 0000000000..89dd769eef
--- /dev/null
+++ b/test/specs/commonTests/forwardsRef.js
@@ -0,0 +1,36 @@
+import * as React from 'react'
+import * as ReactIs from 'react-is'
+
+import { consoleUtil, sandbox } from 'test/utils'
+
+/**
+ * Assert a Component correctly implements a shorthand create method.
+ * @param {React.ElementType} Component The component to test
+ * @param {{ isMemoized?: Boolean, requiredProps?: Object, tagName?: string }} options
+ */
+export default function forwardsRef(Component, options = {}) {
+  describe('forwardsRef', () => {
+    const { isMemoized = false, requiredProps = {}, tagName = 'div' } = options
+    const RootComponent = isMemoized ? Component.type : Component
+
+    it('is produced by React.forwardRef() call', () => {
+      expect(ReactIs.isForwardRef(<RootComponent {...requiredProps} />)).to.equal(true)
+    })
+
+    it('a render function is anonymous', () => {
+      const innerFunctionName = RootComponent.render.name
+      expect(innerFunctionName).to.equal('')
+    })
+
+    it(`forwards ref to "${tagName}"`, () => {
+      const ref = sandbox.spy()
+
+      // mount() can produce "validateNesting" error from React when elements like "td" are mounted
+      consoleUtil.disableOnce()
+      mount(<Component {...requiredProps} ref={ref} />)
+
+      ref.should.have.been.calledOnce()
+      ref.should.have.been.calledWithMatch({ tagName: tagName.toUpperCase() })
+    })
+  })
+}
diff --git a/test/specs/commonTests/hasUIClassName.js b/test/specs/commonTests/hasUIClassName.js
index 1f9f5deb32..4a3c26a6e5 100644
--- a/test/specs/commonTests/hasUIClassName.js
+++ b/test/specs/commonTests/hasUIClassName.js
@@ -5,19 +5,16 @@ import helpers from './commonHelpers'
  * Assert a component adds the Semantic UI "ui" className.
  * @param {React.Component|Function} Component The Component.
  * @param {Object} [options={}]
- * @param {Number} [options.nestingLevel=0] The nesting level of the component.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  */
 export default (Component, options = {}) => {
-  const { nestingLevel = 0, requiredProps = {} } = options
+  const { requiredProps = {} } = options
   const { assertRequired } = helpers('hasUIClassName', Component)
 
   it('has the "ui" className', () => {
     assertRequired(Component, 'a `Component`')
+    const wrapper = mount(<Component {...requiredProps} />)
 
-    shallow(<Component {...requiredProps} />, {
-      autoNesting: true,
-      nestingLevel,
-    }).should.have.className('ui')
+    wrapper.should.have.className('ui')
   })
 }
diff --git a/test/specs/commonTests/hasValidTypings.js b/test/specs/commonTests/hasValidTypings.js
index de783341e0..279b07e3ff 100644
--- a/test/specs/commonTests/hasValidTypings.js
+++ b/test/specs/commonTests/hasValidTypings.js
@@ -2,6 +2,7 @@ import _ from 'lodash'
 
 import { customPropTypes } from 'src/lib'
 import { componentInfoContext } from 'docs/src/utils'
+import { getComponentName, getComponentProps } from 'test/utils'
 import { getNodes, getInterfaces, hasAnySignature, requireTs } from './tsHelpers'
 
 const isShorthand = (propType) =>
@@ -27,8 +28,8 @@ const shorthandMap = {
  * @param {array} [options.ignoredTypingsProps=[]] Props that will be ignored in tests.
  * @param {Object} [options.requiredProps={}] Props required to render Component without errors or warnings.
  */
-export default (Component, componentInfo, options = {}) => {
-  const { displayName, repoPath } = componentInfoContext.fromComponent(Component)
+export default function hasValidTypings(Component, componentInfo, options = {}) {
+  const { displayName, repoPath } = componentInfoContext.byDisplayName[getComponentName(Component)]
   const { ignoredTypingsProps = [], requiredProps } = options
 
   const tsFile = repoPath.replace('src/', '').replace('.js', '.d.ts')
@@ -79,7 +80,7 @@ export default (Component, componentInfo, options = {}) => {
       })
 
       it('match the typings interface', () => {
-        const componentPropTypes = _.get(Component, 'propTypes')
+        const componentPropTypes = getComponentProps(Component).propTypes
         const componentProps = _.keys(componentPropTypes)
         const interfaceProps = _.without(_.map(props, 'name'), ...ignoredTypingsProps)
 
diff --git a/test/specs/commonTests/implementsClassNameProps.js b/test/specs/commonTests/implementsClassNameProps.js
index 76612867e8..154ccd93c7 100644
--- a/test/specs/commonTests/implementsClassNameProps.js
+++ b/test/specs/commonTests/implementsClassNameProps.js
@@ -1,4 +1,4 @@
-import { createElement } from 'react'
+import React from 'react'
 import _ from 'lodash'
 
 import { consoleUtil } from 'test/utils'
@@ -37,12 +37,11 @@ export const propKeyAndValueToClassName = (Component, propKey, propValues, optio
  * @param {String} propKey A props key.
  * @param {Object} [options={}]
  * @param {Object} [options.className=propKey] The className to assert exists.
- * @param {Number} [options.nestingLevel=0] The nesting level of the component.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {Object} [options.className=propKey] The className to assert exists.
  */
 export const propKeyOnlyToClassName = (Component, propKey, options = {}) => {
-  const { className = propKey, nestingLevel = 0, requiredProps = {} } = options
+  const { className = propKey, requiredProps = {} } = options
   const { assertRequired } = helpers('propKeyOnlyToClassName', Component)
 
   describe(`${propKey} (common)`, () => {
@@ -53,20 +52,24 @@ export const propKeyOnlyToClassName = (Component, propKey, options = {}) => {
 
     it('adds prop name to className', () => {
       consoleUtil.disableOnce()
-      shallow(createElement(Component, { ...requiredProps, [propKey]: true }), {
-        autoNesting: true,
-        nestingLevel,
-      }).should.have.className(className)
+
+      const element = React.createElement(Component, { ...requiredProps, [propKey]: true })
+      const wrapper = mount(element)
+      const elementClassName = wrapper.childAt(0).getDOMNode().className
+
+      // ".should.have.className" with "mount" renderer does not handle properly cases when "className" contains
+      // multiple classes.
+      expect(elementClassName).include(className)
     })
 
     it('does not add prop value to className', () => {
       consoleUtil.disableOnce()
 
       const value = 'foo-bar-baz'
-      shallow(createElement(Component, { ...requiredProps, [propKey]: value }), {
-        autoNesting: true,
-        nestingLevel,
-      }).should.not.have.className(value)
+      const element = React.createElement(Component, { ...requiredProps, [propKey]: value })
+      const wrapper = mount(element)
+
+      wrapper.childAt(0).should.not.have.className(value)
     })
   })
 }
@@ -96,13 +99,13 @@ export const propKeyOrValueAndKeyToClassName = (Component, propKey, propValues,
     })
 
     it('adds only the name to className when true', () => {
-      shallow(createElement(Component, { ...requiredProps, [propKey]: true }), {
-        autoNesting: true,
-      }).should.have.className(className)
+      const wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: true }))
+
+      wrapper.should.have.className(className)
     })
 
     it('adds no className when false', () => {
-      const wrapper = shallow(createElement(Component, { ...requiredProps, [propKey]: false }))
+      const wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: false }))
 
       wrapper.should.not.have.className(className)
       wrapper.should.not.have.className('true')
@@ -138,7 +141,7 @@ export const propValueOnlyToClassName = (Component, propKey, propValues, options
 
     it('adds prop value to className', () => {
       propValues.forEach((propValue) => {
-        shallow(createElement(Component, { ...requiredProps, [propKey]: propValue }), {
+        shallow(React.createElement(Component, { ...requiredProps, [propKey]: propValue }), {
           autoNesting: true,
           nestingLevel,
         }).should.have.className(propValue)
@@ -149,7 +152,7 @@ export const propValueOnlyToClassName = (Component, propKey, propValues, options
       consoleUtil.disableOnce()
 
       propValues.forEach((propValue) => {
-        shallow(createElement(Component, { ...requiredProps, [propKey]: propValue }), {
+        shallow(React.createElement(Component, { ...requiredProps, [propKey]: propValue }), {
           autoNesting: true,
           nestingLevel,
         }).should.not.have.className(propKey)
diff --git a/test/specs/commonTests/implementsCommonProps.js b/test/specs/commonTests/implementsCommonProps.js
index e3b2679b90..dc7a4b2dea 100644
--- a/test/specs/commonTests/implementsCommonProps.js
+++ b/test/specs/commonTests/implementsCommonProps.js
@@ -110,6 +110,7 @@ export const implementsHTMLLabelProp = (Component, options = {}) => {
  */
 export const implementsIconProp = (Component, options = {}) => {
   implementsShorthandProp(Component, {
+    assertExactMatch: false,
     propKey: 'icon',
     ShorthandComponent: Icon,
     mapValueToProps: (val) => ({ name: val }),
diff --git a/test/specs/commonTests/implementsCreateMethod.js b/test/specs/commonTests/implementsCreateMethod.js
index 8aea73ec09..012c156990 100644
--- a/test/specs/commonTests/implementsCreateMethod.js
+++ b/test/specs/commonTests/implementsCreateMethod.js
@@ -1,15 +1,14 @@
-import _ from 'lodash'
 import React, { isValidElement } from 'react'
-import { consoleUtil } from 'test/utils'
+import { consoleUtil, getComponentName } from 'test/utils'
 
 /**
  * Assert a Component correctly implements a shorthand create method.
  * @param {React.Component|Function} Component The component to test.
  */
-export default (Component) => {
-  const { name } = _.get(Component, 'prototype.constructor.name')
-
+export default function implementsCreateMethod(Component) {
   describe('create shorthand method (common)', () => {
+    const name = getComponentName(Component)
+
     beforeEach(() => {
       // we generate prop values which may throw warnings
       // prevent failures due to console activity
diff --git a/test/specs/commonTests/implementsShorthandProp.js b/test/specs/commonTests/implementsShorthandProp.js
index 8dda77f11b..64c8f7fc57 100644
--- a/test/specs/commonTests/implementsShorthandProp.js
+++ b/test/specs/commonTests/implementsShorthandProp.js
@@ -1,19 +1,18 @@
 import _ from 'lodash'
-import React, { createElement } from 'react'
+import React from 'react'
+import ReactIs from 'react-is'
 
 import { createShorthand } from 'src/lib'
-import { consoleUtil } from 'test/utils'
+import { consoleUtil, getComponentName } from 'test/utils'
 import { noDefaultClassNameFromProp } from './classNameHelpers'
 import helpers from './commonHelpers'
 
 const shorthandComponentName = (ShorthandComponent) => {
-  if (typeof ShorthandComponent === 'string') return ShorthandComponent
+  if (typeof ShorthandComponent === 'string') {
+    return ShorthandComponent
+  }
 
-  return (
-    _.get(ShorthandComponent, 'prototype.constructor.name') ||
-    ShorthandComponent.displayName ||
-    ShorthandComponent.name
-  )
+  return getComponentName(ShorthandComponent)
 }
 
 /**
@@ -30,6 +29,7 @@ const shorthandComponentName = (ShorthandComponent) => {
  * @param {function} options.mapValueToProps A function that maps a primitive value to the Component props.
  * @param {Boolean} [options.parentIsFragment=false] A flag that shows the type of the Component to test.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
+ * @param {boolean} [options.rendersPortal=false] Does this component render a Portal powered component?
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
@@ -40,16 +40,30 @@ export default (Component, options = {}) => {
     autoGenerateKey = true,
     mapValueToProps,
     parentIsFragment = false,
+    rendersPortal = false,
     propKey,
-    ShorthandComponent,
     shorthandDefaultProps = {},
     shorthandOverrideProps = {},
     requiredProps = {},
   } = options
   const { assertRequired } = helpers('implementsShorthandProp', Component)
-  const assertMethod = assertExactMatch ? 'contain' : 'containMatchingElement'
+
+  const assertMethod = assertExactMatch ? 'equals' : 'matchesElement'
+  // Heads up!
+  // Enzyme does handle properly React.memo() in find and always returns inner component
+  // That's why we should unwrap it, otherwise "wrapper.find(Component)" is not equal to "Component" 💥
+  const ShorthandComponent =
+    options.ShorthandComponent.$$typeof === ReactIs.Memo
+      ? options.ShorthandComponent.type
+      : options.ShorthandComponent
 
   describe(`${propKey} shorthand prop (common)`, () => {
+    let wrapper
+
+    afterEach(() => {
+      if (wrapper && wrapper.unmount) wrapper.unmount()
+    })
+
     assertRequired(Component, 'a `Component`')
     assertRequired(_.isPlainObject(options), 'an `options` object')
     assertRequired(propKey, 'a `propKey`')
@@ -62,39 +76,44 @@ export default (Component, options = {}) => {
         overrideProps: shorthandOverrideProps,
         autoGenerateKey,
       })
-      const element = createElement(Component, { ...requiredProps, [propKey]: value })
-      const wrapper = shallow(element)
+      wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: value }))
 
-      wrapper.should[assertMethod](expectedShorthandElement)
+      const result = wrapper.find(ShorthandComponent)
+
+      expect(result[assertMethod](expectedShorthandElement)).to.equal(true)
 
       // Enzyme's .key() method is not consistent with React for elements with
       // no key (`undefined` vs `null`), so use the underlying element instead
       // Will fail if more than one element of this type is found
       if (autoGenerateKey) {
-        const shorthandElement = wrapper.find(ShorthandComponent).getElement()
-        expect(shorthandElement.key).to.equal(expectedShorthandElement.key, "key doesn't match")
+        expect(result.getElement().key).to.equal(expectedShorthandElement.key, "key doesn't match")
       }
     }
 
     if (alwaysPresent || (Component.defaultProps && Component.defaultProps[propKey])) {
       it(`has default ${name} when not defined`, () => {
-        shallow(<Component {...requiredProps} />).should.have.descendants(name)
+        wrapper = mount(React.createElement(Component, requiredProps))
+
+        wrapper.should.have.descendants(ShorthandComponent)
       })
     } else {
-      if (!parentIsFragment) {
+      if (!parentIsFragment && !rendersPortal) {
         noDefaultClassNameFromProp(Component, propKey, [], options)
       }
 
       it(`has no ${name} when not defined`, () => {
-        shallow(<Component {...requiredProps} />).should.not.have.descendants(name)
+        wrapper = mount(React.createElement(Component, requiredProps))
+
+        wrapper.should.not.have.descendants(ShorthandComponent)
       })
     }
 
     if (!alwaysPresent) {
       it(`has no ${name} when null`, () => {
-        shallow(
-          createElement(Component, { ...requiredProps, [propKey]: null }),
-        ).should.not.have.descendants(ShorthandComponent)
+        const element = React.createElement(Component, { ...requiredProps, [propKey]: null })
+        wrapper = mount(element)
+
+        wrapper.should.not.have.descendants(ShorthandComponent)
       })
     }
 
diff --git a/test/specs/commonTests/index.js b/test/specs/commonTests/index.js
index 4cf2d010f9..3a6823e846 100644
--- a/test/specs/commonTests/index.js
+++ b/test/specs/commonTests/index.js
@@ -1,3 +1,5 @@
+export forwardsRef from './forwardsRef'
+
 export hasSubcomponents from './hasSubcomponents'
 export hasValidTypings from './hasValidTypings'
 export hasUIClassName from './hasUIClassName'
diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
index 11767af473..754500296b 100644
--- a/test/specs/commonTests/isConformant.js
+++ b/test/specs/commonTests/isConformant.js
@@ -1,12 +1,19 @@
 import faker from 'faker'
 import _ from 'lodash'
 import React from 'react'
+import ReactIs from 'react-is'
 import ReactDOMServer from 'react-dom/server'
 import * as semanticUIReact from 'semantic-ui-react'
 
 import { componentInfoContext } from 'docs/src/utils'
-import { assertBodyContains, consoleUtil, sandbox, syntheticEvent } from 'test/utils'
-import helpers from './commonHelpers'
+import {
+  assertBodyContains,
+  consoleUtil,
+  getComponentName,
+  getComponentProps,
+  sandbox,
+  syntheticEvent,
+} from 'test/utils'
 import hasValidTypings from './hasValidTypings'
 
 /**
@@ -20,7 +27,7 @@ import hasValidTypings from './hasValidTypings'
  * @param {boolean} [options.rendersPortal=false] Does this component render a Portal powered component?
  * @param {Object} [options.requiredProps={}] Props required to render Component without errors or warnings.
  */
-export default (Component, options = {}) => {
+export default function isConformant(Component, options = {}) {
   const {
     eventTargets = {},
     nestingLevel = 0,
@@ -29,25 +36,26 @@ export default (Component, options = {}) => {
     rendersFragmentByDefault = false,
     rendersPortal = false,
   } = options
-  const { throwError } = helpers('isConformant', Component)
+  const constructorName = getComponentName(Component)
 
-  const componentType = typeof Component
-
-  // make sure components are properly exported
-  if (componentType !== 'function') {
-    throwError(`Components should export a class or function, got: ${componentType}.`)
-  }
-
-  // tests depend on Component constructor names, enforce them
-  const constructorName = Component.prototype.constructor.name
-  if (!constructorName) {
-    throwError(
-      [
-        'Component is not a named function. This should help identify it:\n\n',
-        `${ReactDOMServer.renderToStaticMarkup(<Component />)}`,
-      ].join(''),
+  it('a valid component should be exported', () => {
+    expect(ReactIs.isValidElementType(Component)).to.equal(
+      true,
+      `Components should export a class or function, got: ${typeof Component}.`,
     )
-  }
+  })
+
+  it('a component should be a function/class or "displayName" should be defined', () => {
+    if (!constructorName) {
+      throw new Error(
+        [
+          'Component is not a named function and does not have a "displayName".',
+          'This should help identify it:\n\n',
+          `${ReactDOMServer.renderToStaticMarkup(<Component {...requiredProps} />)}`,
+        ].join(''),
+      )
+    }
+  })
 
   const info = componentInfoContext.byDisplayName[constructorName]
 
@@ -65,7 +73,7 @@ export default (Component, options = {}) => {
   const isTopLevelAPIProp = _.has(semanticUIReact, constructorName)
 
   // find the apiPath in the semanticUIReact object
-  const foundAsSubcomponent = _.isFunction(_.get(semanticUIReact, info.apiPath))
+  const foundAsSubcomponent = ReactIs.isValidElementType(_.get(semanticUIReact, info.apiPath))
 
   // require all components to be exported at the top level
   it('is exported at the top level', () => {
@@ -192,20 +200,22 @@ export default (Component, options = {}) => {
   }
 
   describe('handles props', () => {
+    const componentProps = getComponentProps(Component)
+
     it('defines handled props in Component.handledProps', () => {
-      Component.should.have.any.keys('handledProps')
-      Component.handledProps.should.be.an('array')
+      componentProps.should.have.any.keys('handledProps')
+      componentProps.handledProps.should.be.an('array')
     })
 
     it('Component.handledProps includes all handled props', () => {
       const computedProps = _.union(
-        Component.autoControlledProps,
-        _.keys(Component.defaultProps),
-        _.keys(Component.propTypes),
+        componentProps.autoControlledProps,
+        _.keys(componentProps.defaultProps),
+        _.keys(componentProps.propTypes),
       )
       const expectedProps = _.uniq(computedProps).sort()
 
-      Component.handledProps.should.to.deep.equal(
+      componentProps.handledProps.should.to.deep.equal(
         expectedProps,
         'It seems that not all props were defined in Component.handledProps, you need to check that they are equal ' +
           'to the union of Component.autoControlledProps and keys of Component.defaultProps and Component.propTypes',
@@ -216,7 +226,7 @@ export default (Component, options = {}) => {
   // ----------------------------------------
   // Events
   // ----------------------------------------
-  if (rendersChildren) {
+  if (rendersChildren && !rendersPortal) {
     it('handles events transparently', () => {
       // Events should be handled transparently, working just as they would in vanilla React.
       // Example, both of these handler()s should be called with the same event:
@@ -241,13 +251,14 @@ export default (Component, options = {}) => {
             'data-simulate-event-here': true,
           }
 
-          const wrapper = shallow(
+          consoleUtil.disableOnce()
+          const wrapper = mount(
             <Component as={rendersFragmentByDefault ? 'div' : undefined} {...props} />,
           )
 
           const eventTarget = eventTargets[listenerName]
             ? wrapper.find(eventTargets[listenerName])
-            : wrapper.find('[data-simulate-event-here]')
+            : wrapper.find('[data-simulate-event-here]').hostNodes()
 
           eventTarget.simulate(eventName, eventShape)
 
@@ -275,18 +286,19 @@ export default (Component, options = {}) => {
             errorMessage = 'was not called with (event, data)'
           }
 
+          // A handled should be called once
+          handlerSpy.should.have.been.calledOnce()
+
           // Components should return the event first, then any data
-          handlerSpy
-            .calledWithMatch(...expectedArgs)
-            .should.equal(
-              true,
-              [
-                `<${info.displayName} ${listenerName}={${handlerName}} />\n`,
-                `${leftPad} ^ ${errorMessage}`,
-                'It was called with args:',
-                JSON.stringify(handlerSpy.args, null, 2),
-              ].join('\n'),
-            )
+          handlerSpy.calledWithMatch(...expectedArgs).should.equal(
+            true,
+            [
+              `<${info.displayName} ${listenerName}={${handlerName}} />\n`,
+              `${leftPad} ^ ${errorMessage}`,
+              'It was called with args:',
+              //       JSON.stringify(handlerSpy.args, null, 2),
+            ].join('\n'),
+          )
         })
       })
     })
@@ -304,78 +316,81 @@ export default (Component, options = {}) => {
   // ----------------------------------------
   // Handles className
   // ----------------------------------------
-  if (rendersChildren) {
-    describe('className (common)', () => {
-      it(`has the Semantic UI className "${info.componentClassName}"`, () => {
-        const wrapper = render(<Component {...requiredProps} />)
-        // don't test components with no className at all (i.e. MessageItem)
-        if (wrapper.prop('className')) {
-          wrapper.should.have.className(info.componentClassName)
-        }
-      })
+  if (_.has(Component.propTypes, 'className')) {
+    if (rendersChildren) {
+      describe('className (common)', () => {
+        it(`has the Semantic UI className "${info.componentClassName}"`, () => {
+          const wrapper = render(<Component {...requiredProps} />)
+          // don't test components with no className at all (i.e. MessageItem)
+          if (wrapper.prop('className')) {
+            wrapper.should.have.className(info.componentClassName)
+          }
+        })
 
-      it("applies user's className to root component", () => {
-        const className = 'is-conformant-class-string'
+        it("applies user's className to root component", () => {
+          const className = 'is-conformant-class-string'
 
-        // Portal powered components can render to two elements, a trigger and the actual component
-        // The actual component is shown when the portal is open
-        // If a trigger is rendered, open the portal and make assertions on the portal element
-        if (rendersPortal) {
-          const mountNode = document.createElement('div')
-          document.body.appendChild(mountNode)
+          // Portal powered components can render to two elements, a trigger and the actual component
+          // The actual component is shown when the portal is open
+          // If a trigger is rendered, open the portal and make assertions on the portal element
+          if (rendersPortal) {
+            const mountNode = document.createElement('div')
+            document.body.appendChild(mountNode)
 
-          const wrapper = mount(<Component {...requiredProps} className={className} />, {
-            attachTo: mountNode,
-          })
-          wrapper.setProps({ open: true })
-
-          // portals/popups/etc may render the component to somewhere besides descendants
-          // we look for the component anywhere in the DOM
-          assertBodyContains(`.${className}`)
-
-          wrapper.detach()
-          document.body.removeChild(mountNode)
-        } else {
-          shallow(
-            <Component
-              as={rendersFragmentByDefault ? 'div' : undefined}
-              {...requiredProps}
-              className={className}
-            />,
-            {
-              autoNesting: true,
-              nestingLevel,
-            },
-          ).should.have.className(className)
-        }
-      })
+            const wrapper = mount(<Component {...requiredProps} className={className} />, {
+              attachTo: mountNode,
+            })
+            wrapper.setProps({ open: true })
+
+            // portals/popups/etc may render the component to somewhere besides descendants
+            // we look for the component anywhere in the DOM
+            assertBodyContains(`.${className}`)
+
+            wrapper.detach()
+            document.body.removeChild(mountNode)
+          } else {
+            shallow(
+              <Component
+                as={rendersFragmentByDefault ? 'div' : undefined}
+                {...requiredProps}
+                className={className}
+              />,
+              {
+                autoNesting: true,
+                nestingLevel,
+              },
+            ).should.have.className(className)
+          }
+        })
 
-      it("user's className does not override the default classes", () => {
-        const defaultClasses = shallow(<Component {...requiredProps} />, {
-          autoNesting: true,
-          nestingLevel,
-        }).prop('className')
+        it("user's className does not override the default classes", () => {
+          const defaultClasses = shallow(<Component {...requiredProps} />, {
+            autoNesting: true,
+            nestingLevel,
+          }).prop('className')
 
-        if (!defaultClasses) return
+          if (!defaultClasses) return
 
-        const userClasses = faker.hacker.verb()
-        const mixedClasses = shallow(<Component {...requiredProps} className={userClasses} />, {
-          autoNesting: true,
-          nestingLevel,
-        }).prop('className')
+          const userClasses = faker.hacker.verb()
+          const mixedClasses = shallow(<Component {...requiredProps} className={userClasses} />, {
+            autoNesting: true,
+            nestingLevel,
+          }).prop('className')
 
-        defaultClasses.split(' ').forEach((defaultClass) => {
-          mixedClasses.should.include(
-            defaultClass,
-            [
-              'Make sure you are using the `getUnhandledProps` util to spread the `rest` props.',
-              'This may also be of help: https://facebook.github.io/react/docs/transferring-props.html.',
-            ].join(' '),
-          )
+          defaultClasses.split(' ').forEach((defaultClass) => {
+            mixedClasses.should.include(
+              defaultClass,
+              [
+                'Make sure you are using the `getUnhandledProps` util to spread the `rest` props.',
+                'This may also be of help: https://facebook.github.io/react/docs/transferring-props.html.',
+              ].join(' '),
+            )
+          })
         })
       })
-    })
+    }
   }
+
   // ----------------------------------------
   // Test typings
   // ----------------------------------------
diff --git a/test/specs/docs/examples-test.js b/test/specs/docs/examples-test.js
index 19900b82e6..ed0886f96c 100644
--- a/test/specs/docs/examples-test.js
+++ b/test/specs/docs/examples-test.js
@@ -1,16 +1,21 @@
-import { createElement } from 'react'
+import * as React from 'react'
 
 const exampleContext = require.context('docs/src/examples', true, /\w+Example\w*\.js$/)
+let wrapper
 
 describe('examples', () => {
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
   exampleContext.keys().forEach((path) => {
     const filename = path.replace(/^.*\/(\w+\.js)$/, '$1')
 
     it(`${filename} renders without console activity`, () => {
-      // TODO also render the example's path in a <ComponentExample /> just as the docs do
-      const wrapper = mount(createElement(exampleContext(path).default))
+      const Component = exampleContext(path).default
 
-      wrapper.unmount()
+      wrapper = mount(React.createElement(Component))
+      wrapper.should.not.be.blank()
     })
   })
 })
diff --git a/test/specs/elements/Button/Button-test.js b/test/specs/elements/Button/Button-test.js
index b6386c195f..c516c793c4 100644
--- a/test/specs/elements/Button/Button-test.js
+++ b/test/specs/elements/Button/Button-test.js
@@ -1,3 +1,4 @@
+import faker from 'faker'
 import React from 'react'
 
 import Button from 'src/elements/Button/Button'
@@ -12,6 +13,8 @@ const syntheticEvent = { preventDefault: () => undefined }
 
 describe('Button', () => {
   common.isConformant(Button)
+  common.forwardsRef(Button, { tagName: 'button' })
+  common.forwardsRef(Button, { requiredProps: { label: faker.lorem.word() }, tagName: 'button' })
   common.hasSubcomponents(Button, [ButtonContent, ButtonGroup, ButtonOr])
   common.hasUIClassName(Button)
   common.rendersChildren(Button)
@@ -97,22 +100,6 @@ describe('Button', () => {
     })
   })
 
-  describe('focus', () => {
-    it('can be set via a ref', () => {
-      const mountNode = document.createElement('div')
-      document.body.appendChild(mountNode)
-
-      const wrapper = mount(<Button />, { attachTo: mountNode })
-      wrapper.instance().focus()
-
-      const button = document.querySelector('button')
-      document.activeElement.should.equal(button)
-
-      wrapper.detach()
-      document.body.removeChild(mountNode)
-    })
-  })
-
   describe('toggle', () => {
     it('is not set by default', () => {
       shallow(<Button />, { autoNesting: true }).should.not.have.prop('toggle')
@@ -166,6 +153,7 @@ describe('Button', () => {
     it('renders as a div', () => {
       shallow(<Button label='http' />).should.have.tagName('div')
     })
+
     it('renders a div with a button and Label child', () => {
       const wrapper = shallow(<Button label='hi' />)
 
@@ -173,9 +161,11 @@ describe('Button', () => {
       wrapper.should.have.exactly(1).descendants('button')
       wrapper.should.have.exactly(1).descendants('Label')
     })
+
     it('adds the labeled className to the root element', () => {
       shallow(<Button label='hi' />).should.have.className('labeled')
     })
+
     it('contains children without disabled class when disabled attribute is set', () => {
       const wrapper = shallow(<Button label='hi' disabled />)
 
@@ -183,6 +173,7 @@ describe('Button', () => {
       wrapper.find('Label').should.not.have.className('disabled')
       wrapper.find('button').should.not.have.className('disabled')
     })
+
     it('contains children without floated class when floated attribute is set', () => {
       const wrapper = shallow(<Button label='hi' floated='left' />)
 
@@ -190,31 +181,38 @@ describe('Button', () => {
       wrapper.find('Label').should.not.have.className('floated')
       wrapper.find('button').should.not.have.className('floated')
     })
+
     it('creates a basic pointing label', () => {
       shallow(<Button label='foo' />)
         .should.have.exactly(1)
         .descendants('Label[basic][pointing]')
     })
+
     it('is before the button and pointing="right" when labelPosition="left"', () => {
-      const wrapper = shallow(<Button labelPosition='left' label='foo' />)
+      const wrapper = mount(<Button labelPosition='left' label='foo' />)
+
       wrapper.should.have.exactly(1).descendants('Label[pointing="right"]')
 
-      wrapper.childAt(0).shallow().should.match('.ui.label')
-      wrapper.childAt(1).childAt(0).should.match('button')
+      wrapper.childAt(0).childAt(0).should.have.className('label')
+      wrapper.childAt(0).childAt(1).should.have.tagName('button')
     })
+
     it('is after the button and pointing="left" when labelPosition="right"', () => {
-      const wrapper = shallow(<Button labelPosition='right' label='foo' />)
+      const wrapper = mount(<Button labelPosition='right' label='foo' />)
+
       wrapper.should.have.exactly(1).descendants('Label[pointing="left"]')
 
-      wrapper.childAt(0).childAt(0).should.match('button')
-      wrapper.childAt(1).shallow().should.match('.ui.label')
+      wrapper.childAt(0).childAt(0).should.have.tagName('button')
+      wrapper.childAt(0).childAt(1).should.have.className('label')
     })
+
     it('is after the button and pointing="left" by default', () => {
-      const wrapper = shallow(<Button label='foo' />)
+      const wrapper = mount(<Button label='foo' />)
+
       wrapper.should.have.exactly(1).descendants('Label[pointing="left"]')
 
-      wrapper.childAt(0).childAt(0).should.match('button')
-      wrapper.childAt(1).shallow().should.match('.ui.label')
+      wrapper.childAt(0).childAt(0).should.have.tagName('button')
+      wrapper.childAt(0).childAt(1).should.have.className('label')
     })
   })
 
diff --git a/test/specs/elements/Button/ButtonContent-test.js b/test/specs/elements/Button/ButtonContent-test.js
index 4787f43250..436f831a67 100644
--- a/test/specs/elements/Button/ButtonContent-test.js
+++ b/test/specs/elements/Button/ButtonContent-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ButtonContent', () => {
   common.isConformant(ButtonContent)
+  common.forwardsRef(ButtonContent)
   common.rendersChildren(ButtonContent)
 
   common.propKeyOnlyToClassName(ButtonContent, 'hidden')
diff --git a/test/specs/elements/Button/ButtonGroup-test.js b/test/specs/elements/Button/ButtonGroup-test.js
index 3af67e77de..6e92a00253 100644
--- a/test/specs/elements/Button/ButtonGroup-test.js
+++ b/test/specs/elements/Button/ButtonGroup-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ButtonGroup', () => {
   common.isConformant(ButtonGroup)
+  common.forwardsRef(ButtonGroup)
   common.hasUIClassName(ButtonGroup)
   common.rendersChildren(ButtonGroup)
 
diff --git a/test/specs/elements/Button/ButtonOr-test.js b/test/specs/elements/Button/ButtonOr-test.js
index 42523f2444..56b437c53f 100644
--- a/test/specs/elements/Button/ButtonOr-test.js
+++ b/test/specs/elements/Button/ButtonOr-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ButtonOr', () => {
   common.isConformant(ButtonOr)
+  common.forwardsRef(ButtonOr)
 
   describe('text', () => {
     it('should not define attr when not defined', () => {
diff --git a/test/specs/elements/Container/Container-test.js b/test/specs/elements/Container/Container-test.js
index a104b8ab3b..e205003588 100644
--- a/test/specs/elements/Container/Container-test.js
+++ b/test/specs/elements/Container/Container-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Container', () => {
   common.isConformant(Container)
+  common.forwardsRef(Container)
   common.rendersChildren(Container)
   common.hasUIClassName(Container)
 
diff --git a/test/specs/elements/Divider/Divider-test.js b/test/specs/elements/Divider/Divider-test.js
index d76743e8e2..da288885f2 100644
--- a/test/specs/elements/Divider/Divider-test.js
+++ b/test/specs/elements/Divider/Divider-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Divider', () => {
   common.isConformant(Divider)
+  common.forwardsRef(Divider)
   common.rendersChildren(Divider)
   common.hasUIClassName(Divider)
 
diff --git a/test/specs/elements/Flag/Flag-test.js b/test/specs/elements/Flag/Flag-test.js
index 2d97b300ce..01d04ad9d1 100644
--- a/test/specs/elements/Flag/Flag-test.js
+++ b/test/specs/elements/Flag/Flag-test.js
@@ -7,6 +7,7 @@ const requiredProps = { name: 'us' }
 
 describe('Flag', () => {
   common.isConformant(Flag, { requiredProps })
+  common.forwardsRef(Flag, { isMemoized: true, requiredProps, tagName: 'i' })
 
   common.implementsCreateMethod(Flag)
 
diff --git a/test/specs/elements/Header/Header-test.js b/test/specs/elements/Header/Header-test.js
index 3a1460add6..241afb386e 100644
--- a/test/specs/elements/Header/Header-test.js
+++ b/test/specs/elements/Header/Header-test.js
@@ -10,6 +10,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('Header', () => {
   common.hasUIClassName(Header)
+  common.forwardsRef(Header, { requiredProps: { children: <span /> } })
+  common.forwardsRef(Header, { requiredProps: { icon: 'book' } })
   common.hasSubcomponents(Header, [HeaderContent, HeaderSubheader])
   common.rendersChildren(Header)
 
diff --git a/test/specs/elements/Header/HeaderContent-test.js b/test/specs/elements/Header/HeaderContent-test.js
index 0e33056f50..31d45beb09 100644
--- a/test/specs/elements/Header/HeaderContent-test.js
+++ b/test/specs/elements/Header/HeaderContent-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('HeaderContent', () => {
   common.isConformant(HeaderContent)
+  common.forwardsRef(HeaderContent)
   common.rendersChildren(HeaderContent)
 })
diff --git a/test/specs/elements/Header/HeaderSubheader-test.js b/test/specs/elements/Header/HeaderSubheader-test.js
index 21313d7553..768e4737e1 100644
--- a/test/specs/elements/Header/HeaderSubheader-test.js
+++ b/test/specs/elements/Header/HeaderSubheader-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('HeaderSubheader', () => {
   common.isConformant(HeaderSubheader)
+  common.forwardsRef(HeaderSubheader)
   common.rendersChildren(HeaderSubheader)
 })
diff --git a/test/specs/elements/Icon/Icon-test.js b/test/specs/elements/Icon/Icon-test.js
index b7fd3ca126..3f49e3e46b 100644
--- a/test/specs/elements/Icon/Icon-test.js
+++ b/test/specs/elements/Icon/Icon-test.js
@@ -9,6 +9,7 @@ import { sandbox } from 'test/utils'
 
 describe('Icon', () => {
   common.isConformant(Icon)
+  common.forwardsRef(Icon, { isMemoized: true, tagName: 'i' })
   common.hasSubcomponents(Icon, [IconGroup])
 
   common.implementsCreateMethod(Icon)
diff --git a/test/specs/elements/Image/Image-test.js b/test/specs/elements/Image/Image-test.js
index 5c5618f4b5..79cd097f5d 100644
--- a/test/specs/elements/Image/Image-test.js
+++ b/test/specs/elements/Image/Image-test.js
@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import faker from 'faker'
 import React from 'react'
 
 import Image from 'src/elements/Image/Image'
@@ -9,6 +10,21 @@ import * as common from 'test/specs/commonTests'
 
 describe('Image', () => {
   common.isConformant(Image)
+
+  common.forwardsRef(Image, { tagName: 'img' })
+  common.forwardsRef(Image, {
+    requiredProps: { as: 'div', children: <span /> },
+    tagName: 'div',
+  })
+  common.forwardsRef(Image, {
+    requiredProps: { as: 'div', content: <span /> },
+    tagName: 'div',
+  })
+  common.forwardsRef(Image, {
+    requiredProps: { label: faker.lorem.word() },
+    tagName: 'img',
+  })
+
   common.hasSubcomponents(Image, [ImageGroup])
   common.hasUIClassName(Image)
   common.rendersChildren(Image)
@@ -40,10 +56,8 @@ describe('Image', () => {
   common.propValueOnlyToClassName(Image, 'size', SUI.SIZES)
 
   describe('as', () => {
-    it('renders an img tag', () => {
-      shallow(<Image />)
-        .type()
-        .should.equal('img')
+    it('renders "i" by default', () => {
+      mount(<Image />).should.have.tagName('img')
     })
   })
 
diff --git a/test/specs/elements/Image/ImageGroup-test.js b/test/specs/elements/Image/ImageGroup-test.js
index 869ea9051a..aac75bc77c 100644
--- a/test/specs/elements/Image/ImageGroup-test.js
+++ b/test/specs/elements/Image/ImageGroup-test.js
@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ImageGroup', () => {
   common.isConformant(ImageGroup)
+  common.forwardsRef(ImageGroup)
   common.hasUIClassName(ImageGroup)
   common.rendersChildren(ImageGroup)
 
diff --git a/test/specs/elements/Input/Input-test.js b/test/specs/elements/Input/Input-test.js
index 429c68192d..12265b9db3 100644
--- a/test/specs/elements/Input/Input-test.js
+++ b/test/specs/elements/Input/Input-test.js
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import Icon from 'src/elements/Icon/Icon'
 import Input from 'src/elements/Input/Input'
 import { htmlInputProps } from 'src/lib'
 import * as common from 'test/specs/commonTests'
@@ -50,6 +51,7 @@ describe('Input', () => {
       onTouchStart: 'input',
     },
   })
+  common.forwardsRef(Input, { tagName: 'input' })
   common.hasUIClassName(Input)
   common.rendersChildren(Input, {
     rendersContent: false,
@@ -128,9 +130,11 @@ describe('Input', () => {
         const wrapper = shallow(<Input {...{ [propName]: propValue }} />)
 
         // account for overloading the onChange prop
-        const expectedValue = propName === 'onChange' ? wrapper.instance().handleChange : propValue
-
-        wrapper.find('input').should.have.prop(propName, expectedValue)
+        if (propName === 'onChange') {
+          wrapper.find('input').should.have.prop(propName).to.be.a('function')
+        } else {
+          wrapper.find('input').should.have.prop(propName, propValue)
+        }
       })
 
       it(`passes \`${propName}\` to the <input> when using children`, () => {
@@ -142,77 +146,47 @@ describe('Input', () => {
         )
 
         // account for overloading the onChange prop
-        const expectedValue = propName === 'onChange' ? wrapper.instance().handleChange : propValue
-
-        wrapper.find('input').should.have.prop(propName, expectedValue)
+        if (propName === 'onChange') {
+          wrapper.find('input').should.have.prop(propName).to.be.a('function')
+        } else {
+          wrapper.find('input').should.have.prop(propName, propValue)
+        }
       })
     })
   })
 
-  describe('focus', () => {
-    it('can be set via a ref', () => {
-      const mountNode = document.createElement('div')
-      document.body.appendChild(mountNode)
-
-      const wrapper = mount(<Input />, { attachTo: mountNode })
-      wrapper.instance().focus()
-
-      const input = document.querySelector('.ui.input input')
-      document.activeElement.should.equal(input)
-
-      wrapper.detach()
-      document.body.removeChild(mountNode)
-    })
-  })
-
-  describe('select', () => {
-    it('can be set via a ref', () => {
-      const mountNode = document.createElement('div')
-      document.body.appendChild(mountNode)
-
-      const value = 'expect this text to be selected'
-      const wrapper = mount(<Input value={value} />, { attachTo: mountNode })
-      wrapper.instance().select()
-
-      window.getSelection().toString().should.equal(value)
-
-      wrapper.detach()
-      document.body.removeChild(mountNode)
-    })
-  })
-
   describe('loading', () => {
     it("don't add icon if it's defined", () => {
       shallow(<Input icon='user' loading />)
-        .find('Icon')
+        .find(Icon)
         .should.have.prop('name', 'user')
     })
 
     it("adds icon if it's not defined", () => {
       shallow(<Input loading />)
-        .find('Icon')
+        .find(Icon)
         .should.have.prop('name', 'spinner')
     })
   })
 
   describe('onChange', () => {
     it('is called with (e, data) on change', () => {
-      const spy = sandbox.spy()
+      const onChange = sandbox.spy()
       const e = { target: { value: 'name' } }
-      const props = { 'data-foo': 'bar', onChange: spy }
+      const props = { 'data-foo': 'bar', onChange }
 
       const wrapper = shallow(<Input {...props} />)
 
       wrapper.find('input').simulate('change', e)
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
+      onChange.should.have.been.calledOnce()
+      onChange.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
     })
 
     it('is called with (e, data) on change when using children', () => {
-      const spy = sandbox.spy()
+      const onChange = sandbox.spy()
       const e = { target: { value: 'name' } }
-      const props = { 'data-foo': 'bar', onChange: spy }
+      const props = { 'data-foo': 'bar', onChange }
 
       const wrapper = shallow(
         <Input {...props}>
@@ -222,28 +196,60 @@ describe('Input', () => {
 
       wrapper.find('input').simulate('change', e)
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
+      onChange.should.have.been.calledOnce()
+      onChange.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
     })
   })
 
   describe('ref', () => {
+    it('"focus" can be set via a ref', () => {
+      const inputRef = React.createRef()
+      const mountNode = document.createElement('div')
+      document.body.appendChild(mountNode)
+
+      const wrapper = mount(<Input ref={inputRef} />, { attachTo: mountNode })
+      inputRef.current.focus()
+
+      const input = document.querySelector('.ui.input input')
+      document.activeElement.should.equal(input)
+
+      wrapper.detach()
+      document.body.removeChild(mountNode)
+    })
+
+    it('"select" can be set via a ref', () => {
+      const inputRef = React.createRef()
+      const mountNode = document.createElement('div')
+      document.body.appendChild(mountNode)
+
+      const value = 'expect this text to be selected'
+      const wrapper = mount(<Input ref={inputRef} value={value} />, { attachTo: mountNode })
+      inputRef.current.select()
+
+      window.getSelection().toString().should.equal(value)
+
+      wrapper.detach()
+      document.body.removeChild(mountNode)
+    })
+
     it('maintains ref on child node', () => {
-      const ref = sandbox.spy()
+      const elementRef = sandbox.spy()
+      const inputRef = sandbox.spy()
+
       const mountNode = document.createElement('div')
       document.body.appendChild(mountNode)
 
       const wrapper = mount(
-        <Input>
-          <input ref={ref} />
+        <Input ref={inputRef}>
+          <input ref={elementRef} />
         </Input>,
         { attachTo: mountNode },
       )
       const input = document.querySelector('.ui.input input')
 
-      ref.should.have.been.calledOnce()
-      ref.should.have.been.calledWithMatch(input)
-      wrapper.instance().inputRef.current.should.equal(input)
+      elementRef.should.have.been.calledOnce()
+      elementRef.should.have.been.calledWithMatch(input)
+      inputRef.should.have.been.calledWithMatch(input)
 
       wrapper.detach()
       document.body.removeChild(mountNode)
@@ -291,41 +297,36 @@ describe('Input', () => {
   describe('icon', () => {
     it('is second child', () => {
       shallow(<Input icon='search' />)
-        .children()
-        .at(1)
-        .is('Icon')
+        .childAt(1)
+        .is(Icon)
         .should.be.true()
     })
 
     it('is third child with action positioned left', () => {
       shallow(<Input icon='search' action='foo' actionPosition='left' />)
-        .children()
-        .at(2)
-        .is('Icon')
+        .childAt(2)
+        .is(Icon)
         .should.be.true()
     })
 
     it('is third child with label', () => {
       shallow(<Input icon='search' label='foo' />)
-        .children()
-        .at(2)
-        .is('Icon')
+        .childAt(2)
+        .is(Icon)
         .should.be.true()
     })
 
     it('is second child with action', () => {
       shallow(<Input icon='search' iconPosition='left' action='foo' />)
-        .children()
-        .at(1)
-        .is('Icon')
+        .childAt(1)
+        .is(Icon)
         .should.be.true()
     })
 
     it('is second child with label positioned right', () => {
       shallow(<Input icon='search' iconPosition='left' label='foo' labelPosition='right' />)
-        .children()
-        .at(1)
-        .is('Icon')
+        .childAt(1)
+        .is(Icon)
         .should.be.true()
     })
   })
diff --git a/test/specs/elements/Label/Label-test.js b/test/specs/elements/Label/Label-test.js
index 0c21df6b9d..b7b53bc1c5 100644
--- a/test/specs/elements/Label/Label-test.js
+++ b/test/specs/elements/Label/Label-test.js
@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import React from 'react'
 
+import Icon from 'src/elements/Icon/Icon'
 import Label from 'src/elements/Label/Label'
 import LabelDetail from 'src/elements/Label/LabelDetail'
 import LabelGroup from 'src/elements/Label/LabelGroup'
@@ -10,6 +11,8 @@ import { sandbox } from 'test/utils'
 
 describe('Label', () => {
   common.isConformant(Label)
+  common.forwardsRef(Label)
+  common.forwardsRef(Label, { requiredProps: { children: <span /> } })
   common.hasSubcomponents(Label, [LabelDetail, LabelGroup])
   common.hasUIClassName(Label)
   common.rendersChildren(Label)
@@ -59,19 +62,19 @@ describe('Label', () => {
 
     it('has delete icon by default', () => {
       shallow(<Label onRemove={_.noop} />)
-        .find('Icon')
+        .find(Icon)
         .should.have.prop('name', 'delete')
     })
 
     it('uses passed removeIcon string', () => {
       shallow(<Label onRemove={_.noop} removeIcon='foo' />)
-        .find('Icon')
+        .find(Icon)
         .should.have.prop('name', 'foo')
     })
 
     it('uses passed removeIcon props', () => {
       shallow(<Label onRemove={_.noop} removeIcon={{ 'data-foo': true }} />)
-        .find('Icon')
+        .find(Icon)
         .should.have.prop('data-foo', true)
     })
 
@@ -84,7 +87,7 @@ describe('Label', () => {
       const labelProps = { onRemove: labelSpy, removeIcon: iconProps }
 
       mount(<Label {...labelProps} />)
-        .find('Icon')
+        .find(Icon)
         .simulate('click', event)
 
       iconSpy.should.have.been.calledOnce()
@@ -103,19 +106,14 @@ describe('Label', () => {
   })
 
   describe('onClick', () => {
-    it('omitted when not defined', () => {
-      const click = () => shallow(<Label />).simulate('click')
-      expect(click).to.not.throw()
-    })
-
     it('is called with (e) when clicked', () => {
-      const spy = sandbox.spy()
+      const onClick = sandbox.spy()
       const event = { target: null }
 
-      shallow(<Label onClick={spy} />).simulate('click', event)
+      mount(<Label onClick={onClick} />).simulate('click', event)
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch(event)
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch(event)
     })
   })
 
diff --git a/test/specs/elements/Label/LabelDetail-test.js b/test/specs/elements/Label/LabelDetail-test.js
index 369cd6ad1d..09c3979b6b 100644
--- a/test/specs/elements/Label/LabelDetail-test.js
+++ b/test/specs/elements/Label/LabelDetail-test.js
@@ -3,6 +3,7 @@ import LabelDetail from 'src/elements/Label/LabelDetail'
 
 describe('LabelDetail', () => {
   common.isConformant(LabelDetail)
+  common.forwardsRef(LabelDetail)
   common.implementsCreateMethod(LabelDetail)
   common.rendersChildren(LabelDetail)
 })
diff --git a/test/specs/elements/Label/LabelGroup-test.js b/test/specs/elements/Label/LabelGroup-test.js
index 5044893267..baddba09e5 100644
--- a/test/specs/elements/Label/LabelGroup-test.js
+++ b/test/specs/elements/Label/LabelGroup-test.js
@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('LabelGroup', () => {
   common.isConformant(LabelGroup)
+  common.forwardsRef(LabelGroup)
   common.hasUIClassName(LabelGroup)
   common.rendersChildren(LabelGroup)
 
diff --git a/test/specs/elements/List/List-test.js b/test/specs/elements/List/List-test.js
index e417fa08b4..3f86562a1d 100644
--- a/test/specs/elements/List/List-test.js
+++ b/test/specs/elements/List/List-test.js
@@ -1,3 +1,4 @@
+import faker from 'faker'
 import React from 'react'
 
 import List from 'src/elements/List/List'
@@ -13,6 +14,9 @@ import { sandbox } from 'test/utils'
 
 describe('List', () => {
   common.isConformant(List)
+  common.forwardsRef(List)
+  common.forwardsRef(List, { requiredProps: { children: <span /> } })
+  common.forwardsRef(List, { requiredProps: { content: faker.lorem.word() } })
   common.hasSubcomponents(List, [
     ListContent,
     ListDescription,
@@ -45,11 +49,6 @@ describe('List', () => {
   const items = ['Name', 'Status', 'Notes']
 
   describe('onItemClick', () => {
-    it('can be omitted', () => {
-      const click = () => shallow(<List items={items} />).simulate('click')
-      expect(click).to.not.throw()
-    })
-
     it('is called with (e, itemProps) when clicked', () => {
       const onClick = sandbox.spy()
       const onItemClick = sandbox.spy()
@@ -58,10 +57,9 @@ describe('List', () => {
       const callbackData = { content: 'Notes', 'data-foo': 'bar' }
       const itemProps = { key: 'notes', content: 'Notes', 'data-foo': 'bar', onClick }
 
-      shallow(<List items={[itemProps]} onItemClick={onItemClick} />)
+      mount(<List items={[itemProps]} onItemClick={onItemClick} />)
         .find('ListItem')
         .first()
-        .shallow()
         .simulate('click', event)
 
       onClick.should.have.been.calledOnce()
diff --git a/test/specs/elements/List/ListContent-test.js b/test/specs/elements/List/ListContent-test.js
index d4ea3b03be..a1685071b8 100644
--- a/test/specs/elements/List/ListContent-test.js
+++ b/test/specs/elements/List/ListContent-test.js
@@ -7,12 +7,13 @@ import * as common from 'test/specs/commonTests'
 
 describe('ListContent', () => {
   common.isConformant(ListContent)
+  common.forwardsRef(ListContent)
+  common.forwardsRef(ListContent, { requiredProps: { children: <span /> } })
   common.rendersChildren(ListContent)
 
   common.implementsCreateMethod(ListContent)
 
   common.implementsVerticalAlignProp(ListContent)
-
   common.propKeyAndValueToClassName(ListContent, 'floated', SUI.FLOATS)
 
   describe('shorthand', () => {
diff --git a/test/specs/elements/List/ListDescription-test.js b/test/specs/elements/List/ListDescription-test.js
index b16f79392d..f69b858a3d 100644
--- a/test/specs/elements/List/ListDescription-test.js
+++ b/test/specs/elements/List/ListDescription-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ListDescription', () => {
   common.isConformant(ListDescription)
+  common.forwardsRef(ListDescription)
   common.rendersChildren(ListDescription)
 
   common.implementsCreateMethod(ListDescription)
diff --git a/test/specs/elements/List/ListHeader-test.js b/test/specs/elements/List/ListHeader-test.js
index 49dd3ccd53..12acb3e799 100644
--- a/test/specs/elements/List/ListHeader-test.js
+++ b/test/specs/elements/List/ListHeader-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ListHeader', () => {
   common.isConformant(ListHeader)
+  common.forwardsRef(ListHeader)
   common.rendersChildren(ListHeader)
 
   common.implementsCreateMethod(ListHeader)
diff --git a/test/specs/elements/List/ListItem-test.js b/test/specs/elements/List/ListItem-test.js
index 0b4d38f391..f0c47b52b0 100644
--- a/test/specs/elements/List/ListItem-test.js
+++ b/test/specs/elements/List/ListItem-test.js
@@ -9,6 +9,9 @@ import { sandbox } from 'test/utils'
 
 describe('ListItem', () => {
   common.isConformant(ListItem)
+  common.forwardsRef(ListItem)
+  common.forwardsRef(ListItem, { requiredProps: { children: <span /> } })
+  common.forwardsRef(ListItem, { requiredProps: { image: '/images/wireframe/image.png' } })
   common.rendersChildren(ListItem)
 
   common.propKeyOnlyToClassName(ListItem, 'active')
@@ -23,19 +26,18 @@ describe('ListItem', () => {
   describe('onClick', () => {
     it('is called with (e, data) when clicked', () => {
       const onClick = sandbox.spy()
-      const event = { target: null }
       const props = { onClick, 'data-foo': 'bar' }
 
-      shallow(<ListItem {...props} />).simulate('click', event)
+      mount(<ListItem {...props} />).simulate('click')
 
       onClick.should.have.been.calledOnce()
-      onClick.should.have.been.calledWithExactly(event, props)
+      onClick.should.have.been.calledWithMatch({ type: 'click' }, props)
     })
 
     it('is not called when is disabled', () => {
       const onClick = sandbox.spy()
 
-      shallow(<ListItem disabled onClick={onClick} />).simulate('click')
+      mount(<ListItem disabled onClick={onClick} />).simulate('click')
       onClick.should.have.callCount(0)
     })
   })
diff --git a/test/specs/elements/List/ListList-test.js b/test/specs/elements/List/ListList-test.js
index 0c52c3ceaf..2356ad8e04 100644
--- a/test/specs/elements/List/ListList-test.js
+++ b/test/specs/elements/List/ListList-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ListList', () => {
   common.isConformant(ListList)
+  common.forwardsRef(ListList)
   common.rendersChildren(ListList)
 
   describe('list', () => {
diff --git a/test/specs/elements/Loader/Loader-test.js b/test/specs/elements/Loader/Loader-test.js
index b13e0e7f4b..d8a53df34d 100644
--- a/test/specs/elements/Loader/Loader-test.js
+++ b/test/specs/elements/Loader/Loader-test.js
@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Loader', () => {
   common.isConformant(Loader)
+  common.forwardsRef(Loader)
   common.hasUIClassName(Loader)
   common.rendersChildren(Loader)
 
diff --git a/test/specs/elements/Placeholder/Placeholder-test.js b/test/specs/elements/Placeholder/Placeholder-test.js
index 4641f73337..96c10e8a2b 100644
--- a/test/specs/elements/Placeholder/Placeholder-test.js
+++ b/test/specs/elements/Placeholder/Placeholder-test.js
@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Placeholder', () => {
   common.isConformant(Placeholder)
+  common.forwardsRef(Placeholder)
   common.hasSubcomponents(Placeholder, [
     PlaceholderHeader,
     PlaceholderImage,
diff --git a/test/specs/elements/Placeholder/PlaceholderHeader-test.js b/test/specs/elements/Placeholder/PlaceholderHeader-test.js
index a13c09ae55..963ebcf6c0 100644
--- a/test/specs/elements/Placeholder/PlaceholderHeader-test.js
+++ b/test/specs/elements/Placeholder/PlaceholderHeader-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('PlaceholderHeader', () => {
   common.isConformant(PlaceholderHeader)
+  common.forwardsRef(PlaceholderHeader)
   common.rendersChildren(PlaceholderHeader)
 
   common.propKeyOnlyToClassName(PlaceholderHeader, 'image')
diff --git a/test/specs/elements/Placeholder/PlaceholderImage-test.js b/test/specs/elements/Placeholder/PlaceholderImage-test.js
index f57d8b54f6..cb064c2b29 100644
--- a/test/specs/elements/Placeholder/PlaceholderImage-test.js
+++ b/test/specs/elements/Placeholder/PlaceholderImage-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('PlaceholderImage', () => {
   common.isConformant(PlaceholderImage)
+  common.forwardsRef(PlaceholderImage)
 
   common.propKeyOnlyToClassName(PlaceholderImage, 'square')
   common.propKeyOnlyToClassName(PlaceholderImage, 'rectangular')
diff --git a/test/specs/elements/Placeholder/PlaceholderLine-test.js b/test/specs/elements/Placeholder/PlaceholderLine-test.js
index 33d1cae7d6..2751d8a536 100644
--- a/test/specs/elements/Placeholder/PlaceholderLine-test.js
+++ b/test/specs/elements/Placeholder/PlaceholderLine-test.js
@@ -3,6 +3,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('PlaceholderLine', () => {
   common.isConformant(PlaceholderLine)
+  common.forwardsRef(PlaceholderLine)
+
   common.propValueOnlyToClassName(PlaceholderLine, 'length', [
     'full',
     'very long',
diff --git a/test/specs/elements/Placeholder/PlaceholderParagraph-test.js b/test/specs/elements/Placeholder/PlaceholderParagraph-test.js
index 110f8be7f8..25dd47b6f6 100644
--- a/test/specs/elements/Placeholder/PlaceholderParagraph-test.js
+++ b/test/specs/elements/Placeholder/PlaceholderParagraph-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('PlaceholderParagraph', () => {
   common.isConformant(PlaceholderParagraph)
+  common.forwardsRef(PlaceholderParagraph)
   common.rendersChildren(PlaceholderParagraph)
 })
diff --git a/test/specs/elements/Rail/Rail-test.js b/test/specs/elements/Rail/Rail-test.js
index 56a1b9ac05..bff68d7ccf 100644
--- a/test/specs/elements/Rail/Rail-test.js
+++ b/test/specs/elements/Rail/Rail-test.js
@@ -9,6 +9,7 @@ const requiredProps = { position: 'left' }
 
 describe('Rail', () => {
   common.isConformant(Rail, { requiredProps })
+  common.forwardsRef(Rail, { requiredProps })
   common.hasUIClassName(Rail, { requiredProps })
   common.rendersChildren(Rail, { requiredProps })
 
diff --git a/test/specs/elements/Reveal/Reveal-test.js b/test/specs/elements/Reveal/Reveal-test.js
index 436c4c7c5a..edac103772 100644
--- a/test/specs/elements/Reveal/Reveal-test.js
+++ b/test/specs/elements/Reveal/Reveal-test.js
@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Reveal', () => {
   common.isConformant(Reveal)
+  common.forwardsRef(Reveal)
   common.hasSubcomponents(Reveal, [RevealContent])
   common.hasUIClassName(Reveal)
   common.rendersChildren(Reveal)
diff --git a/test/specs/elements/Reveal/RevealContent-test.js b/test/specs/elements/Reveal/RevealContent-test.js
index b54955540c..2982d826bd 100644
--- a/test/specs/elements/Reveal/RevealContent-test.js
+++ b/test/specs/elements/Reveal/RevealContent-test.js
@@ -3,6 +3,7 @@ import RevealContent from 'src/elements/Reveal/RevealContent'
 
 describe('RevealContent', () => {
   common.isConformant(RevealContent)
+  common.forwardsRef(RevealContent)
   common.rendersChildren(RevealContent)
 
   common.propKeyOnlyToClassName(RevealContent, 'hidden')
diff --git a/test/specs/elements/Segment/Segment-test.js b/test/specs/elements/Segment/Segment-test.js
index 37a1bc0414..a4ef46f739 100644
--- a/test/specs/elements/Segment/Segment-test.js
+++ b/test/specs/elements/Segment/Segment-test.js
@@ -8,6 +8,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Segment', () => {
   common.isConformant(Segment)
+  common.forwardsRef(Segment)
   common.hasSubcomponents(Segment, [SegmentGroup, SegmentInline])
   common.hasUIClassName(Segment)
   common.rendersChildren(Segment)
diff --git a/test/specs/elements/Segment/SegmentGroup-test.js b/test/specs/elements/Segment/SegmentGroup-test.js
index d8f919bbe0..b2317e8c9e 100644
--- a/test/specs/elements/Segment/SegmentGroup-test.js
+++ b/test/specs/elements/Segment/SegmentGroup-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('SegmentGroup', () => {
   common.isConformant(SegmentGroup)
+  common.forwardsRef(SegmentGroup)
   common.hasUIClassName(SegmentGroup)
   common.rendersChildren(SegmentGroup)
 
diff --git a/test/specs/elements/Segment/SegmentInline-test.js b/test/specs/elements/Segment/SegmentInline-test.js
index 92b9ab718b..ce85da7d72 100644
--- a/test/specs/elements/Segment/SegmentInline-test.js
+++ b/test/specs/elements/Segment/SegmentInline-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('SegmentInline', () => {
   common.isConformant(SegmentInline)
+  common.forwardsRef(SegmentInline)
   common.rendersChildren(SegmentInline)
 })
diff --git a/test/specs/elements/Step/Step-test.js b/test/specs/elements/Step/Step-test.js
index 429ff0b698..90745bc550 100644
--- a/test/specs/elements/Step/Step-test.js
+++ b/test/specs/elements/Step/Step-test.js
@@ -10,6 +10,9 @@ import { sandbox } from 'test/utils'
 
 describe('Step', () => {
   common.isConformant(Step)
+  common.forwardsRef(Step)
+  common.forwardsRef(Step, { requiredProps: { content: faker.lorem.word() } })
+  common.forwardsRef(Step, { requiredProps: { content: <span /> } })
   common.hasSubcomponents(Step, [StepContent, StepDescription, StepTitle])
   common.rendersChildren(Step)
 
@@ -53,7 +56,7 @@ describe('Step', () => {
       const event = { target: null }
       const onClick = sandbox.spy()
 
-      shallow(<Step onClick={onClick} />).simulate('click', event)
+      mount(<Step onClick={onClick} />).simulate('click', event)
 
       onClick.should.have.been.calledOnce()
       onClick.should.have.been.calledWithMatch(event, { onClick })
@@ -62,7 +65,7 @@ describe('Step', () => {
     it('is not called when is disabled', () => {
       const onClick = sandbox.spy()
 
-      shallow(<Step disabled onClick={onClick} />).simulate('click')
+      mount(<Step disabled onClick={onClick} />).simulate('click')
       onClick.should.have.not.been.called()
     })
 
diff --git a/test/specs/elements/Step/StepContent-test.js b/test/specs/elements/Step/StepContent-test.js
index d13cc8b6a5..7007e310d6 100644
--- a/test/specs/elements/Step/StepContent-test.js
+++ b/test/specs/elements/Step/StepContent-test.js
@@ -2,9 +2,14 @@ import StepContent from 'src/elements/Step/StepContent'
 import StepDescription from 'src/elements/Step/StepDescription'
 import StepTitle from 'src/elements/Step/StepTitle'
 import * as common from 'test/specs/commonTests'
+import faker from 'faker'
+import React from 'react'
 
 describe('StepContent', () => {
   common.isConformant(StepContent)
+  common.forwardsRef(StepContent)
+  common.forwardsRef(StepContent, { requiredProps: { content: faker.lorem.word() } })
+  common.forwardsRef(StepContent, { requiredProps: { children: <span /> } })
   common.rendersChildren(StepContent)
 
   common.implementsCreateMethod(StepContent)
diff --git a/test/specs/elements/Step/StepDescription-test.js b/test/specs/elements/Step/StepDescription-test.js
index e9735a3226..1b4f56eb60 100644
--- a/test/specs/elements/Step/StepDescription-test.js
+++ b/test/specs/elements/Step/StepDescription-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('StepDescription', () => {
   common.isConformant(StepDescription)
+  common.forwardsRef(StepDescription)
   common.implementsCreateMethod(StepDescription)
   common.rendersChildren(StepDescription)
 })
diff --git a/test/specs/elements/Step/StepGroup-test.js b/test/specs/elements/Step/StepGroup-test.js
index a6f3478851..7c58476202 100644
--- a/test/specs/elements/Step/StepGroup-test.js
+++ b/test/specs/elements/Step/StepGroup-test.js
@@ -1,3 +1,4 @@
+import faker from 'faker'
 import _ from 'lodash'
 import React from 'react'
 
@@ -9,6 +10,9 @@ const numberMap = _.pickBy(numberToWordMap, (val, key) => key <= 8)
 
 describe('StepGroup', () => {
   common.isConformant(StepGroup)
+  common.forwardsRef(StepGroup)
+  common.forwardsRef(StepGroup, { requiredProps: { content: faker.lorem.word() } })
+  common.forwardsRef(StepGroup, { requiredProps: { children: <span /> } })
   common.hasUIClassName(StepGroup)
   common.rendersChildren(StepGroup)
 
diff --git a/test/specs/elements/Step/StepTitle-test.js b/test/specs/elements/Step/StepTitle-test.js
index 24e28b3bb4..820adfc8bd 100644
--- a/test/specs/elements/Step/StepTitle-test.js
+++ b/test/specs/elements/Step/StepTitle-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('StepTitle', () => {
   common.isConformant(StepTitle)
+  common.forwardsRef(StepTitle)
   common.implementsCreateMethod(StepTitle)
   common.rendersChildren(StepTitle)
 })
diff --git a/test/specs/modules/Accordion/Accordion-test.js b/test/specs/modules/Accordion/Accordion-test.js
index 19062fba5a..dc506c359e 100644
--- a/test/specs/modules/Accordion/Accordion-test.js
+++ b/test/specs/modules/Accordion/Accordion-test.js
@@ -9,6 +9,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Accordion', () => {
   common.isConformant(Accordion)
+  common.forwardsRef(Accordion)
   common.hasSubcomponents(Accordion, [
     AccordionAccordion,
     AccordionContent,
diff --git a/test/specs/modules/Accordion/AccordionAccordion-test.js b/test/specs/modules/Accordion/AccordionAccordion-test.js
index af6db9a6ce..a986062c52 100644
--- a/test/specs/modules/Accordion/AccordionAccordion-test.js
+++ b/test/specs/modules/Accordion/AccordionAccordion-test.js
@@ -8,6 +8,7 @@ import { consoleUtil, sandbox } from 'test/utils'
 
 describe('AccordionAccordion', () => {
   common.isConformant(AccordionAccordion)
+  common.forwardsRef(AccordionAccordion)
   common.rendersChildren(AccordionAccordion, {
     rendersContent: false,
   })
@@ -21,89 +22,74 @@ describe('AccordionAccordion', () => {
       { key: 'C', title: 'C', content: 'Something C' },
     ]
 
-    it('defaults to -1', () => {
-      shallow(<AccordionAccordion />).should.have.state('activeIndex', -1)
+    it('there is no active items by default', () => {
+      mount(<AccordionAccordion />).should.not.have.descendants('.active')
     })
 
-    it('defaults to -1 when "exclusive" is false', () => {
-      shallow(<AccordionAccordion exclusive={false} />)
-        .should.have.state('activeIndex')
-        .that.is.empty()
+    it('there is no active items by default when "exclusive" is false', () => {
+      mount(<AccordionAccordion exclusive={false} />).should.not.have.descendants('.active')
     })
 
-    it('makes Accordion.Content at activeIndex - 0 "active"', () => {
-      const wrapper = shallow(<AccordionAccordion activeIndex={0} panels={panels} />)
+    it('activates an item', () => {
+      const wrapper = mount(<AccordionAccordion activeIndex={0} panels={panels} />)
 
-      wrapper.childAt(0).should.have.prop('active', true)
-      wrapper.childAt(1).should.have.prop('active', false)
-      wrapper.childAt(2).should.have.prop('active', false)
+      wrapper.find('.title').at(0).should.have.className('active')
+      wrapper.find('.title').at(1).should.not.have.className('active')
+      wrapper.find('.title').at(2).should.not.have.className('active')
     })
 
-    it('is toggled to -1 when clicking Title a second time', () => {
+    it('items can be toggled by a click', () => {
       const wrapper = mount(<AccordionAccordion panels={panels} />)
 
-      wrapper.find(AccordionTitle).at(0).simulate('click')
-      wrapper.should.have.state('activeIndex', 0)
+      wrapper.find('.title').at(0).simulate('click')
+      wrapper.find('.title').at(0).should.have.className('active')
 
-      wrapper.find(AccordionTitle).at(0).simulate('click')
-      wrapper.should.have.state('activeIndex', -1)
+      wrapper.find('.title').at(0).simulate('click')
+      wrapper.find('.title').at(0).should.not.have.className('active')
     })
 
-    it('sets the correct panel active', () => {
-      const wrapper = shallow(<AccordionAccordion activeIndex={0} panels={panels} />)
-
-      wrapper.childAt(0).should.have.prop('active', true)
-      wrapper.childAt(1).should.have.prop('active', false)
-      wrapper.childAt(2).should.have.prop('active', false)
+    it('activates a proper item', () => {
+      const wrapper = mount(<AccordionAccordion activeIndex={0} panels={panels} />)
 
       wrapper.setProps({ activeIndex: 1 })
-      wrapper.childAt(0).should.have.prop('active', false)
-      wrapper.childAt(1).should.have.prop('active', true)
-      wrapper.childAt(2).should.have.prop('active', false)
-    })
-
-    it('can be an array', () => {
-      const wrapper = shallow(
-        <AccordionAccordion activeIndex={[0, 1]} exclusive={false} panels={panels} />,
-      )
-      wrapper.childAt(0).should.have.prop('active', true)
-      wrapper.childAt(1).should.have.prop('active', true)
-      wrapper.childAt(2).should.have.prop('active', false)
-
-      wrapper.setProps({ activeIndex: [1, 2] })
-      wrapper.childAt(0).should.have.prop('active', false)
-      wrapper.childAt(1).should.have.prop('active', true)
-      wrapper.childAt(2).should.have.prop('active', true)
+      wrapper.find('.title').at(0).should.not.have.className('active')
+      wrapper.find('.title').at(1).should.have.className('active')
+      wrapper.find('.title').at(2).should.not.have.className('active')
     })
 
-    it('can be inclusive and makes Accordion.Content at activeIndex - 1 "active"', () => {
-      const wrapper = shallow(
+    it('can activate a single item when "exclusive" is false', () => {
+      const wrapper = mount(
         <AccordionAccordion activeIndex={[0]} exclusive={false} panels={panels} />,
       )
 
-      wrapper.childAt(0).should.have.prop('active', true)
-      wrapper.childAt(1).should.have.prop('active', false)
-      wrapper.childAt(2).should.have.prop('active', false)
+      wrapper.find('.title').at(0).should.have.className('active')
+      wrapper.find('.title').at(1).should.not.have.className('active')
+      wrapper.find('.title').at(2).should.not.have.className('active')
     })
 
-    it('can be inclusive and allows multiple open', () => {
-      const wrapper = shallow(
+    it('can activate multiple items when "exclusive" is false', () => {
+      const wrapper = mount(
         <AccordionAccordion activeIndex={[0, 1]} exclusive={false} panels={panels} />,
       )
+      wrapper.find('.title').at(0).should.have.className('active')
+      wrapper.find('.title').at(1).should.have.className('active')
+      wrapper.find('.title').at(2).should.not.have.className('active')
 
-      wrapper.childAt(0).should.have.prop('active', true)
-      wrapper.childAt(1).should.have.prop('active', true)
-      wrapper.childAt(2).should.have.prop('active', false)
+      wrapper.setProps({ activeIndex: [1, 2] })
+      wrapper.find('.title').at(0).should.not.have.className('active')
+      wrapper.find('.title').at(1).should.have.className('active')
+      wrapper.find('.title').at(2).should.have.className('active')
     })
 
     it('can be inclusive and can open multiple panels by clicking', () => {
       const wrapper = mount(<AccordionAccordion exclusive={false} panels={panels} />)
 
-      wrapper.find(AccordionTitle).at(0).simulate('click')
-      wrapper.should.have.state('activeIndex').that.includes(0)
+      wrapper.find('.title').at(0).simulate('click')
+      wrapper.find('.title').at(0).should.have.className('active')
 
-      wrapper.find(AccordionTitle).at(1).simulate('click')
-      wrapper.should.have.state('activeIndex').that.includes(0, 1)
+      wrapper.find('.title').at(1).simulate('click')
+      wrapper.find('.title').at(0).should.have.className('active')
+      wrapper.find('.title').at(1).should.have.className('active')
     })
 
     it('can be inclusive and close multiple panels by clicking', () => {
@@ -111,11 +97,13 @@ describe('AccordionAccordion', () => {
         <AccordionAccordion defaultActiveIndex={[0, 1]} exclusive={false} panels={panels} />,
       )
 
-      wrapper.find(AccordionTitle).at(0).simulate('click')
-      wrapper.should.have.state('activeIndex').that.includes(1)
+      wrapper.find('.title').at(0).simulate('click')
+      wrapper.find('.title').at(0).should.not.have.className('active')
+      wrapper.find('.title').at(1).should.have.className('active')
 
-      wrapper.find(AccordionTitle).at(1).simulate('click')
-      wrapper.should.have.state('activeIndex').that.is.empty()
+      wrapper.find('.title').at(1).simulate('click')
+      wrapper.find('.title').at(0).should.not.have.className('active')
+      wrapper.find('.title').at(1).should.not.have.className('active')
     })
 
     it('warns if is `exclusive` and is given an array', () => {
@@ -139,7 +127,18 @@ describe('AccordionAccordion', () => {
 
   describe('defaultActiveIndex', () => {
     it('sets the initial activeIndex state', () => {
-      shallow(<AccordionAccordion defaultActiveIndex={123} />).should.have.state('activeIndex', 123)
+      const wrapper = mount(
+        <AccordionAccordion
+          defaultActiveIndex={1}
+          panels={[
+            { key: 'A', title: 'A', content: 'Something A' },
+            { key: 'B', title: 'B', content: 'Something B' },
+          ]}
+        />,
+      )
+
+      wrapper.find('.title').at(0).should.not.have.className('active')
+      wrapper.find('.title').at(1).should.have.className('active')
     })
   })
 
@@ -153,14 +152,11 @@ describe('AccordionAccordion', () => {
     ]
 
     it('is called with (e, titleProps) when clicked', () => {
-      mount(<AccordionAccordion panels={panels} onTitleClick={onTitleClick} />)
-        .find(AccordionTitle)
-        .at(0)
-        .simulate('click', event)
+      const wrapper = mount(<AccordionAccordion panels={panels} onTitleClick={onTitleClick} />)
 
+      wrapper.find('.title').at(0).simulate('click', event)
       onClick.should.have.been.calledOnce()
       onClick.should.have.been.calledWithMatch(event, { index: 0, content: 'A' })
-
       onTitleClick.should.have.been.calledOnce()
       onTitleClick.should.have.been.calledWithMatch(event, { index: 0, content: 'A' })
     })
diff --git a/test/specs/modules/Accordion/AccordionContent-test.js b/test/specs/modules/Accordion/AccordionContent-test.js
index 8b11c47412..aa5df5a655 100644
--- a/test/specs/modules/Accordion/AccordionContent-test.js
+++ b/test/specs/modules/Accordion/AccordionContent-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('AccordionContent', () => {
   common.isConformant(AccordionContent)
+  common.forwardsRef(AccordionContent)
   common.rendersChildren(AccordionContent)
 
   common.implementsCreateMethod(AccordionContent)
diff --git a/test/specs/modules/Accordion/AccordionTitle-test.js b/test/specs/modules/Accordion/AccordionTitle-test.js
index 5f80d41fa1..0ed8e59bbd 100644
--- a/test/specs/modules/Accordion/AccordionTitle-test.js
+++ b/test/specs/modules/Accordion/AccordionTitle-test.js
@@ -6,6 +6,7 @@ import { sandbox } from 'test/utils'
 
 describe('AccordionTitle', () => {
   common.isConformant(AccordionTitle)
+  common.forwardsRef(AccordionTitle)
   common.rendersChildren(AccordionTitle)
 
   common.implementsCreateMethod(AccordionTitle)
@@ -18,14 +19,14 @@ describe('AccordionTitle', () => {
 
   describe('onClick', () => {
     it('is called with (e, { name, index }) when clicked', () => {
-      const spy = sandbox.spy()
+      const onClick = sandbox.spy()
       const event = { target: null }
       const props = { content: 'title', index: 0 }
 
-      shallow(<AccordionTitle onClick={spy} {...props} />).simulate('click', event)
+      mount(<AccordionTitle onClick={onClick} {...props} />).simulate('click', event)
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch(event, props)
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch(event, props)
     })
   })
 })
diff --git a/test/specs/modules/Checkbox/Checkbox-test.js b/test/specs/modules/Checkbox/Checkbox-test.js
index b24faa7f43..6103acd18f 100644
--- a/test/specs/modules/Checkbox/Checkbox-test.js
+++ b/test/specs/modules/Checkbox/Checkbox-test.js
@@ -24,6 +24,7 @@ const wrapperShallow = (...args) => (wrapper = shallow(...args))
 
 describe('Checkbox', () => {
   common.isConformant(Checkbox)
+  common.forwardsRef(Checkbox, { tagName: 'input' })
   common.hasUIClassName(Checkbox)
 
   common.propKeyOnlyToClassName(Checkbox, 'checked')
@@ -110,6 +111,7 @@ describe('Checkbox', () => {
       domEvent.click(input)
       input.indeterminate.should.be.true()
     })
+
     it('can not be indeterminate', () => {
       wrapperMount(<Checkbox indeterminate={false} />)
       const input = document.querySelector('.ui.checkbox input')
@@ -482,22 +484,32 @@ describe('Checkbox', () => {
 
         render() {
           const handler = isOnClick ? { onClick: this.toggle } : { onChange: this.toggle }
-          return <Checkbox label='Check this box' checked={this.state.checked} {...handler} />
+
+          return (
+            <Checkbox
+              data-checked={this.state.checked}
+              label='Check this box'
+              checked={this.state.checked}
+              {...handler}
+            />
+          )
         }
       }
 
     it('toggles state on "change" with "setState" as function', () => {
-      const ControlledCheckbox = getControlledCheckbox(false)
-      wrapperMount(<ControlledCheckbox />)
-      domEvent.fire(document.querySelector('input'), 'click')
-      wrapper.state().should.eql({ checked: true })
+      const TestComponent = getControlledCheckbox(false)
+      wrapperMount(<TestComponent />)
+
+      domEvent.click('input')
+      wrapper.should.not.have.descendants('[data-checked=true]')
     })
 
     it('toggles state on "click" with "setState" as function', () => {
-      const ControlledCheckbox = getControlledCheckbox(true)
-      wrapperMount(<ControlledCheckbox />)
-      domEvent.fire(document.querySelector('input'), 'click')
-      wrapper.state().should.eql({ checked: true })
+      const TestComponent = getControlledCheckbox(true)
+      wrapperMount(<TestComponent />)
+
+      domEvent.click('input')
+      wrapper.should.not.have.descendants('[data-checked=true]')
     })
   })
 })
diff --git a/test/specs/modules/Dimmer/Dimmer-test.js b/test/specs/modules/Dimmer/Dimmer-test.js
index 1a4204daf1..3a084b921c 100644
--- a/test/specs/modules/Dimmer/Dimmer-test.js
+++ b/test/specs/modules/Dimmer/Dimmer-test.js
@@ -8,6 +8,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Dimmer', () => {
   common.isConformant(Dimmer)
+  common.forwardsRef(Dimmer)
   common.hasSubcomponents(Dimmer, [DimmerDimmable, DimmerInner])
 
   common.implementsCreateMethod(Dimmer)
diff --git a/test/specs/modules/Dimmer/DimmerDimmable-test.js b/test/specs/modules/Dimmer/DimmerDimmable-test.js
index 35aa391b15..2ed952e94b 100644
--- a/test/specs/modules/Dimmer/DimmerDimmable-test.js
+++ b/test/specs/modules/Dimmer/DimmerDimmable-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('DimmerDimmable', () => {
   common.isConformant(DimmerDimmable)
+  common.forwardsRef(DimmerDimmable)
   common.rendersChildren(DimmerDimmable)
 
   common.propKeyOnlyToClassName(DimmerDimmable, 'blurring')
diff --git a/test/specs/modules/Dimmer/DimmerInner-test.js b/test/specs/modules/Dimmer/DimmerInner-test.js
index 26965d4c53..a2aac04319 100644
--- a/test/specs/modules/Dimmer/DimmerInner-test.js
+++ b/test/specs/modules/Dimmer/DimmerInner-test.js
@@ -7,6 +7,7 @@ import { sandbox } from 'test/utils'
 
 describe('DimmerInner', () => {
   common.isConformant(DimmerInner)
+  common.forwardsRef(DimmerInner)
   common.hasUIClassName(DimmerInner)
   common.rendersChildren(DimmerInner)
 
@@ -32,7 +33,7 @@ describe('DimmerInner', () => {
   describe('onClickOutside', () => {
     it('called when Dimmer has not children', () => {
       const onClickOutside = sandbox.spy()
-      const wrapper = shallow(<DimmerInner onClickOutside={onClickOutside} />)
+      const wrapper = mount(<DimmerInner onClickOutside={onClickOutside} />)
 
       wrapper.childAt(0).simulate('click')
       onClickOutside.should.have.been.calledOnce()
@@ -60,10 +61,11 @@ describe('DimmerInner', () => {
 
     it('called when click on Dimmer', () => {
       const onClickOutside = sandbox.spy()
-
-      mount(
+      const wrapper = mount(
         <DimmerInner onClickOutside={onClickOutside}>{faker.hacker.phrase()}</DimmerInner>,
-      ).simulate('click')
+      )
+
+      wrapper.simulate('click')
       onClickOutside.should.have.been.calledOnce()
     })
 
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 6aef057478..8f43d884aa 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -4,6 +4,7 @@ import React from 'react'
 
 import * as common from 'test/specs/commonTests'
 import { consoleUtil, domEvent, sandbox } from 'test/utils'
+import Icon from 'src/elements/Icon/Icon'
 import Label from 'src/elements/Label/Label'
 import Dropdown from 'src/modules/Dropdown/Dropdown'
 import DropdownDivider from 'src/modules/Dropdown/DropdownDivider'
@@ -29,8 +30,6 @@ const wrapperMount = (node, opts) => {
   wrapper = mount(node, { ...opts, attachTo })
   return wrapper
 }
-const wrapperShallow = (...args) => (wrapper = shallow(...args))
-const wrapperRender = (...args) => (wrapper = render(...args))
 
 // ----------------------------------------
 // Options
@@ -49,27 +48,41 @@ const dropdownMenuIsClosed = () => {
   wrapper.should.not.have.className('visible')
 
   const menu = wrapper.find('DropdownMenu')
-  try {
-    // when shallow rendered
-    menu.should.not.have.prop('open', true)
-  } catch (err) {
-    // when mounted
-    menu.should.not.have.className('visible')
-  }
+
+  menu.should.not.have.className('visible')
+}
+
+function bodyIsFocused() {
+  const isFocused = document.activeElement === document.body
+
+  isFocused.should.be.true(
+    `Expected Dropdown to be the active element but found ${document.activeElement} instead.`,
+  )
+}
+
+function dropdownIsFocused() {
+  const isFocused = document.activeElement === document.querySelector('div.dropdown')
+
+  isFocused.should.be.true(
+    `Expected Dropdown to be the active element but found ${document.activeElement} instead.`,
+  )
+}
+
+function dropdownInputIsFocused() {
+  const isFocused = document.activeElement === document.querySelector('input.search')
+
+  isFocused.should.be.true(
+    `Expected DropdownSearchInput to be the active element but found ${document.activeElement} instead.`,
+  )
 }
 
 const dropdownMenuIsOpen = () => {
-  wrapper.childAt(0).should.have.className('active')
-  wrapper.childAt(0).should.have.className('visible')
+  wrapper.should.have.className('active')
+  wrapper.should.have.className('visible')
 
   const menu = wrapper.find('DropdownMenu')
-  try {
-    // when shallow rendered
-    menu.should.have.prop('open', true)
-  } catch (err) {
-    // when mounted
-    menu.should.have.className('visible')
-  }
+
+  menu.should.have.className('visible')
 }
 
 const nativeEvent = { nativeEvent: { stopImmediatePropagation: _.noop } }
@@ -87,6 +100,7 @@ describe('Dropdown', () => {
   })
 
   common.isConformant(Dropdown)
+  common.forwardsRef(Dropdown)
   common.hasUIClassName(Dropdown)
   common.hasSubcomponents(Dropdown, [
     DropdownDivider,
@@ -141,7 +155,8 @@ describe('Dropdown', () => {
 
   describe('defaultSearchQuery', () => {
     it('changes default value of searchQuery', () => {
-      shallow(<Dropdown defaultSearchQuery='foo' />).should.have.state('searchQuery', 'foo')
+      wrapperMount(<Dropdown defaultSearchQuery='foo' search />)
+      wrapper.find('input.search').should.have.value('foo')
     })
   })
 
@@ -161,42 +176,43 @@ describe('Dropdown', () => {
     dropdownMenuIsOpen()
   })
 
-  it('blurs the Dropdown node on close', () => {
-    wrapperMount(<Dropdown options={options} selection defaultOpen />)
-
-    const instance = wrapper.instance()
-    sandbox.spy(instance.ref.current, 'blur')
-
-    dropdownMenuIsOpen()
-    wrapper.simulate('click')
-    dropdownMenuIsClosed()
-
-    instance.ref.current.blur.should.have.been.calledOnce()
-  })
-
-  it('blurs the Dropdown node on close by clicking outside component', () => {
-    wrapperMount(<Dropdown options={options} selection defaultOpen />)
-
-    const instance = wrapper.instance()
-    sandbox.spy(instance.ref.current, 'blur')
-
-    dropdownMenuIsOpen()
-    document.body.click()
-    dropdownMenuIsClosed()
-
-    instance.ref.current.blur.should.have.been.calledOnce()
-  })
-
-  it('does not close on click when search is true and options are empty', () => {
-    wrapperMount(<Dropdown options={[]} search selection defaultOpen />)
-
-    const instance = wrapper.instance()
-    sandbox.spy(instance.ref.current, 'blur')
-
-    dropdownMenuIsOpen()
-    wrapper.simulate('click')
-    dropdownMenuIsOpen()
-  })
+  // TODO: find a way to test this in a different way
+  // it('blurs the Dropdown node on close', () => {
+  //   wrapperMount(<Dropdown options={options} selection defaultOpen />)
+  //
+  //   const instance = wrapper.instance()
+  //   sandbox.spy(instance.ref.current, 'blur')
+  //
+  //   dropdownMenuIsOpen()
+  //   wrapper.simulate('click')
+  //   dropdownMenuIsClosed()
+  //
+  //   instance.ref.current.blur.should.have.been.calledOnce()
+  // })
+  //
+  // it('blurs the Dropdown node on close by clicking outside component', () => {
+  //   wrapperMount(<Dropdown options={options} selection defaultOpen />)
+  //
+  //   const instance = wrapper.instance()
+  //   sandbox.spy(instance.ref.current, 'blur')
+  //
+  //   dropdownMenuIsOpen()
+  //   document.body.click()
+  //   dropdownMenuIsClosed()
+  //
+  //   instance.ref.current.blur.should.have.been.calledOnce()
+  // })
+  //
+  // it('does not close on click when search is true and options are empty', () => {
+  //   wrapperMount(<Dropdown options={[]} search selection defaultOpen />)
+  //
+  //   const instance = wrapper.instance()
+  //   sandbox.spy(instance.ref.current, 'blur')
+  //
+  //   dropdownMenuIsOpen()
+  //   wrapper.simulate('click')
+  //   dropdownMenuIsOpen()
+  // })
 
   it('opens on focus', () => {
     wrapperMount(<Dropdown options={options} />)
@@ -234,56 +250,58 @@ describe('Dropdown', () => {
 
   describe('tabIndex', () => {
     it('defaults to 0', () => {
-      wrapperShallow(<Dropdown options={options} />)
+      wrapperMount(<Dropdown options={options} />)
 
-      wrapper.childAt(0).should.have.prop('tabIndex', 0)
+      wrapper.should.have.attr('tabIndex', '0')
     })
 
     it('defaults to -1 when disabled', () => {
-      wrapperShallow(<Dropdown disabled options={options} />)
+      wrapperMount(<Dropdown disabled options={options} />)
 
-      wrapper.childAt(0).should.have.prop('tabIndex', -1)
+      wrapper.should.have.attr('tabIndex', '-1')
     })
 
     it('applies when defined', () => {
-      wrapperShallow(<Dropdown options={options} tabIndex={1} />)
+      wrapperMount(<Dropdown options={options} tabIndex={1} />)
 
-      wrapper.childAt(0).should.have.prop('tabIndex', 1)
+      wrapper.should.have.attr('tabIndex', '1')
     })
 
-    describe('tabIndex', () => {
+    describe('search', () => {
       it('defaults the search input to 0', () => {
-        shallow(<Dropdown options={options} selection search />)
-          .find(DropdownSearchInput)
-          .should.have.prop('tabIndex', 0)
+        wrapperMount(<Dropdown options={options} selection search />)
+
+        wrapper.find(DropdownSearchInput).should.have.prop('tabIndex', 0)
       })
 
       it('defaults the disabled search input to -1', () => {
-        shallow(<Dropdown disabled options={options} selection search />)
-          .find(DropdownSearchInput)
-          .should.have.prop('tabIndex', -1)
+        wrapperMount(<Dropdown disabled options={options} selection search />)
+
+        wrapper.find(DropdownSearchInput).should.have.prop('tabIndex', -1)
       })
 
       it('allows explicitly setting the search input value', () => {
-        shallow(<Dropdown options={options} selection search tabIndex={123} />)
-          .find(DropdownSearchInput)
-          .should.have.prop('tabIndex', 123)
+        wrapperMount(<Dropdown options={options} selection search tabIndex={123} />)
+
+        wrapper.find(DropdownSearchInput).should.have.prop('tabIndex', 123)
       })
 
       it('allows explicitly setting the search input value when disabled', () => {
-        shallow(<Dropdown disabled options={options} selection search tabIndex={123} />)
-          .find(DropdownSearchInput)
-          .should.have.prop('tabIndex', 123)
+        wrapperMount(<Dropdown disabled options={options} selection search tabIndex={123} />)
+
+        wrapper.find(DropdownSearchInput).should.have.prop('tabIndex', 123)
       })
 
       it('is not present on the root when is search', () => {
-        shallow(<Dropdown options={options} selection search />).should.not.have.prop('tabIndex')
+        wrapperMount(<Dropdown options={options} selection search />)
+
+        wrapper.should.not.have.attr('tabIndex')
       })
 
       it('is not present on the root when is search and defined', () => {
-        shallow(<Dropdown options={options} selection search tabIndex={1} />).should.not.have.prop(
-          'tabIndex',
-        )
+        wrapperMount(<Dropdown options={options} selection search tabIndex={1} />)
+
+        wrapper.should.not.have.attr('tabIndex')
       })
     })
   })
@@ -350,17 +368,17 @@ describe('Dropdown', () => {
   describe('clearable', () => {
     it('does not clear when value is empty', () => {
       const onChange = sandbox.spy()
-      wrapperShallow(<Dropdown clearable onChange={onChange} />)
+      wrapperMount(<Dropdown clearable onChange={onChange} />)
 
-      wrapper.find('Icon').simulate('click', { stopPropagation: _.noop })
+      wrapper.find(Icon).simulate('click', { stopPropagation: _.noop })
       onChange.should.have.not.been.called()
     })
 
     it('does not clear when is multiple and value is empty', () => {
       const onChange = sandbox.spy()
-      wrapperShallow(<Dropdown clearable multiple onChange={onChange} />)
+      wrapperMount(<Dropdown clearable multiple onChange={onChange} />)
 
-      wrapper.find('Icon').simulate('click', { stopPropagation: _.noop })
+      wrapper.find(Icon).simulate('click', { stopPropagation: _.noop })
       onChange.should.have.not.been.called()
     })
 
@@ -369,14 +387,15 @@ describe('Dropdown', () => {
       const event = { stopPropagation: _.noop }
       const onChange = sandbox.spy()
 
-      wrapperShallow(
+      wrapperMount(
         <Dropdown defaultValue={defaultValue} clearable onChange={onChange} options={options} />,
       )
-      wrapper.find('Icon').simulate('click', event)
+      wrapper.find('i.clear').simulate('click', event)
 
       onChange.should.have.been.calledOnce()
       onChange.should.have.been.calledWithMatch(event, { value: '' })
-      wrapper.should.have.state('selectedIndex', 0)
+      wrapper.should.have.exactly(1).descendants('.selected.item')
+      wrapper.find('.item').at(0).should.have.className('selected')
     })
 
     it('clears when value is multiple and is not empty', () => {
@@ -384,7 +403,7 @@ describe('Dropdown', () => {
       const event = { stopPropagation: _.noop }
       const onChange = sandbox.spy()
 
-      wrapperShallow(
+      wrapperMount(
         <Dropdown
           defaultValue={defaultValue}
           clearable
@@ -393,11 +412,12 @@ describe('Dropdown', () => {
           options={options}
         />,
       )
-      wrapper.find('Icon').simulate('click', event)
+      wrapper.find('i.clear').simulate('click', event)
 
       onChange.should.have.been.calledOnce()
       onChange.should.have.been.calledWithMatch(event, { value: [] })
-      wrapper.should.have.state('selectedIndex', 0)
+      wrapper.should.have.exactly(1).descendants('.selected.item')
+      wrapper.find('.item').at(0).should.have.className('selected')
     })
   })
 
@@ -406,26 +426,27 @@ describe('Dropdown', () => {
       const onBlur = sandbox.spy()
       const event = { foo: 'bar' }
 
-      wrapperShallow(<Dropdown onBlur={onBlur} />)
-      wrapper.childAt(0).simulate('blur', event)
+      wrapperMount(<Dropdown onBlur={onBlur} />)
+      wrapper.simulate('blur', event)
 
       onBlur.should.have.been.calledOnce()
       onBlur.should.have.been.calledWithMatch(event)
     })
 
-    it('calls handleChange with the selected option on blur', () => {
-      wrapperShallow(<Dropdown selectOnBlur options={options} />)
-
-      const instance = wrapper.instance()
-      wrapper.childAt(0).simulate('click', { stopPropagation: _.noop })
-      dropdownMenuIsOpen()
-      sandbox.spy(instance, 'handleChange')
-
-      const event = { stopPropagation: _.noop }
-      wrapper.childAt(0).simulate('blur', event)
-
-      instance.handleChange.should.have.been.calledWithMatch(event, options[0].value)
-    })
+    // TODO: find a way to test this in a different way
+    // it('calls handleChange with the selected option on blur', () => {
+    //   wrapperMount(<Dropdown selectOnBlur options={options} />)
+    //
+    //   const instance = wrapper.instance()
+    //   wrapper.simulate('click', { stopPropagation: _.noop })
+    //   dropdownMenuIsOpen()
+    //   sandbox.spy(instance, 'handleChange')
+    //
+    //   const event = { stopPropagation: _.noop }
+    //   wrapper.simulate('blur', event)
+    //
+    //   instance.handleChange.should.have.been.calledWithMatch(event, options[0].value)
+    // })
 
     it('does not call handleChange if the value has not changed', () => {
       const onChange = sandbox.spy()
@@ -447,25 +468,17 @@ describe('Dropdown', () => {
       onChange.should.have.been.calledOnce()
     })
 
-    it('sets focus state to false', () => {
-      wrapperShallow(<Dropdown selectOnBlur />)
-
-      wrapper.childAt(0).simulate('blur')
-      wrapper.should.have.state('focus', false)
-    })
-
     it('sets searchQuery state to empty', () => {
-      wrapperShallow(<Dropdown />)
+      wrapperMount(<Dropdown defaultSearchQuery='foo' search />)
 
-      wrapper.setState({ searchQuery: 'foo' })
-      wrapper.childAt(0).simulate('blur')
-      wrapper.should.have.state('searchQuery', '')
+      wrapper.simulate('blur')
+      wrapper.find('input.search').should.have.value('')
     })
 
     it('does not call onBlur when the mouse is down', () => {
       const onBlur = sandbox.spy()
 
-      wrapperShallow(<Dropdown onBlur={onBlur} selectOnBlur />)
+      wrapperMount(<Dropdown onBlur={onBlur} selectOnBlur />)
 
       wrapper.simulate('mousedown')
       wrapper.simulate('blur')
@@ -473,44 +486,37 @@ describe('Dropdown', () => {
       onBlur.should.not.have.been.called()
     })
 
-    it('does not call makeSelectedItemActive when the mouse is down', () => {
-      const spy = sandbox.spy()
-
-      wrapperShallow(<Dropdown onBlur={spy} selectOnBlur />)
-
-      const instance = wrapper.instance()
-      sandbox.spy(instance, 'makeSelectedItemActive')
-
-      wrapper.simulate('mousedown')
-      wrapper.simulate('blur')
-
-      instance.makeSelectedItemActive.should.not.have.been.called()
-    })
-
-    it('does not set focus state when the mouse is down', () => {
-      wrapperShallow(<Dropdown />)
-
-      wrapper.setState({ focus: 'foo' })
-      wrapper.simulate('mousedown')
-      wrapper.simulate('blur')
-      wrapper.should.have.state('focus', 'foo')
-    })
+    // TODO: find a way to test this in a different way
+    // it('does not call makeSelectedItemActive when the mouse is down', () => {
+    //   const spy = sandbox.spy()
+    //
+    //   wrapperMount(<Dropdown onBlur={spy} selectOnBlur />)
+    //
+    //   const instance = wrapper.instance()
+    //   sandbox.spy(instance, 'makeSelectedItemActive')
+    //
+    //   wrapper.simulate('mousedown')
+    //   wrapper.simulate('blur')
+    //
+    //   instance.makeSelectedItemActive.should.not.have.been.called()
+    // })
   })
 
   describe('handleClose', () => {
-    it('is called when open changes to false', () => {
-      wrapperMount(<Dropdown options={options} selection />)
-      wrapper.simulate('click')
-      dropdownMenuIsOpen()
-
-      const instance = wrapper.instance()
-      sandbox.spy(instance, 'handleClose')
-
-      wrapper.simulate('click')
-      dropdownMenuIsClosed()
-
-      instance.handleClose.should.have.been.calledOnce()
-    })
+    // TODO: find a way to test this in a different way
+    // it('is called when open changes to false', () => {
+    //   wrapperMount(<Dropdown options={options} selection />)
+    //   wrapper.simulate('click')
+    //   dropdownMenuIsOpen()
+    //
+    //   const instance = wrapper.instance()
+    //   sandbox.spy(instance, 'handleClose')
+    //
+    //   wrapper.simulate('click')
+    //   dropdownMenuIsClosed()
+    //
+    //   instance.handleClose.should.have.been.calledOnce()
+    // })
 
     it('prevents Space from opening a search Dropdown after selecting an item', () => {
       // Prevent a bug where pressing space in another control opens the Dropdown
@@ -522,7 +528,7 @@ describe('Dropdown', () => {
       dropdownMenuIsOpen()
 
       wrapper.find('DropdownItem').first().simulate('click')
-      wrapper.should.have.state('value', options[0].value)
+      wrapper.find('.item').at(0).should.have.className('active')
       dropdownMenuIsClosed()
 
       // The dropdown will be still focused after an item will be selected, we should remove
@@ -595,10 +601,11 @@ describe('Dropdown', () => {
 
       wrapper.simulate('click')
       wrapper.simulate('keydown', { key: 'ArrowDown' })
-      wrapper.should.have.state('selectedIndex', 1)
+      wrapper.should.have.exactly(1).descendants('.selected.item')
+      wrapper.find('.item').at(1).should.have.className('selected')
 
       wrapper.setProps({ options: [] })
-      wrapper.should.have.not.state('selectedIndex')
+      wrapper.should.not.have.descendants('.selected.item')
     })
 
     it('will not call setSelectedIndex if options have not changed', () => {
@@ -606,10 +613,10 @@ describe('Dropdown', () => {
 
       wrapper.simulate('click')
       wrapper.simulate('keydown', { key: 'ArrowDown' })
-      wrapper.should.have.state('selectedIndex', 1)
+      wrapper.find('.item').at(1).should.have.className('selected')
 
       wrapper.setProps({ options })
-      wrapper.should.have.state('selectedIndex', 1)
+      wrapper.find('.item').at(1).should.have.className('selected')
     })
   })
 
@@ -623,16 +630,15 @@ describe('Dropdown', () => {
       // open, simulate search and select option
       wrapper.simulate('click')
       wrapper.simulate('keydown', { key: 'ArrowDown' })
-      wrapper.should.have.state('selectedIndex', 1)
+      wrapper.find('.item').at(1).should.have.className('selected')
 
       input.simulate('change', { target: { value: option.text } })
       wrapper.simulate('keydown', { key: 'Enter' })
-
-      wrapper.should.have.state('selectedIndex', 4)
+      wrapper.find('.item').at(4).should.have.className('selected')
 
       // open again
       wrapper.simulate('click')
-      wrapper.should.have.state('selectedIndex', 4)
+      wrapper.find('.item').at(4).should.have.className('selected')
     })
 
     it('keeps "selectedIndex" when the same item was selected', () => {
@@ -644,31 +650,40 @@ describe('Dropdown', () => {
       // simulate search and select option
       input.simulate('change', { target: { value: option.text } })
       wrapper.simulate('keydown', { key: 'Enter' })
-
-      wrapper.should.have.state('selectedIndex', 4)
+      wrapper.find('.item').at(4).should.have.className('selected')
 
       // select the same option again
       input.simulate('change', { target: { value: option.text } })
       wrapper.simulate('keydown', { key: 'Enter' })
-      wrapper.should.have.state('selectedIndex', 4)
+      wrapper.find('.item').at(4).should.have.className('selected')
     })
   })
 
   describe('isMouseDown', () => {
     it('tracks when the mouse is down', () => {
-      wrapperMount(<Dropdown />).simulate('mousedown')
+      // To understand this test please check componentDidUpdate() on Dropdown component
+      wrapperMount(<Dropdown />)
+      dropdownMenuIsClosed()
 
-      wrapper.instance().isMouseDown.should.equal(true)
+      // When ".isMouseDown === false" a focus event will not open Dropdown
+      wrapper.simulate('mousedown')
+      wrapper.simulate('focus')
+      dropdownMenuIsClosed()
+
+      // Reset to default component state
+      domEvent.mouseUp(document.body)
+      wrapper.simulate('blur')
 
-      domEvent.mouseUp(document)
-      wrapper.instance().isMouseDown.should.equal(false)
+      // When ".isMouseDown === true" a focus event will open Dropdown
+      wrapper.simulate('focus')
+      dropdownMenuIsOpen()
     })
   })
 
   describe('icon', () => {
     it('defaults to a dropdown icon', () => {
       Dropdown.defaultProps.icon.should.equal('dropdown')
-      wrapperRender(<Dropdown />).should.contain.descendants('.dropdown.icon')
+      wrapperMount(<Dropdown />).should.contain.descendants('.dropdown.icon')
     })
 
     it('always opens a dropdown on click', () => {
@@ -703,24 +718,26 @@ describe('Dropdown', () => {
 
   describe('searchQuery', () => {
     it('defaults to empty string', () => {
-      shallow(<Dropdown />).should.have.state('searchQuery', '')
+      wrapperMount(<Dropdown search />)
+      wrapper.find('input.search').should.have.value('')
     })
 
     it('passes value to state', () => {
-      shallow(<Dropdown searchQuery='foo' />).should.have.state('searchQuery', 'foo')
+      wrapperMount(<Dropdown search searchQuery='foo' />)
+      wrapper.find('input.search').should.have.value('foo')
     })
   })
 
   describe('selected item', () => {
     it('defaults to the first item', () => {
-      wrapperShallow(<Dropdown options={options} selection />)
+      wrapperMount(<Dropdown options={options} selection />)
         .find('DropdownItem')
         .first()
         .should.have.prop('selected', true)
     })
     it('defaults to the first non-disabled item', () => {
       options[0].disabled = true
-      wrapperShallow(<Dropdown options={options} selection />)
+      wrapperMount(<Dropdown options={options} selection />)
 
       // selection moved to second item
       wrapper.find('DropdownItem').first().should.have.prop('selected', false)
@@ -740,7 +757,7 @@ describe('Dropdown', () => {
     it('is null when all options disabled', () => {
       const disabledOptions = options.map((o) => ({ ...o, disabled: true }))
 
-      wrapperRender(<Dropdown options={disabledOptions} selection />).should.not.have.descendants(
+      wrapperMount(<Dropdown options={disabledOptions} selection />).should.not.have.descendants(
         '.selected',
       )
     })
@@ -1050,11 +1067,11 @@ describe('Dropdown', () => {
     it('keeps value of the searchQuery when selection is changed', () => {
       wrapperMount(<Dropdown options={options} selection search />)
 
-      wrapper.setState({ searchQuery: 'foo' })
+      wrapper.find('input.search').simulate('change', { target: { value: 'foo' } })
       wrapper.simulate('click')
       wrapper.simulate('keydown', { key: 'ArrowDown' })
 
-      wrapper.should.have.state('searchQuery', 'foo')
+      wrapper.find('input.search').should.have.value('foo')
     })
   })
 
@@ -1062,7 +1079,7 @@ describe('Dropdown', () => {
     it('sets the corresponding item to active', () => {
       const value = _.sample(options).value
 
-      wrapperShallow(<Dropdown options={options} selection value={value} />)
+      wrapperMount(<Dropdown options={options} selection value={value} />)
         .find('DropdownItem')
         .find({ value, active: true })
         .should.be.present()
@@ -1071,7 +1088,7 @@ describe('Dropdown', () => {
     it('sets the corresponding item text', () => {
       const { text, value } = _.sample(options)
 
-      wrapperShallow(<Dropdown value={value} options={options} selection />)
+      wrapperMount(<Dropdown value={value} options={options} selection />)
         .find('DropdownItem')
         .find({ value, text })
         .should.be.present()
@@ -1110,8 +1127,7 @@ describe('Dropdown', () => {
 
       wrapper.simulate('click')
       wrapper.simulate('keydown', { key: 'ArrowDown' })
-
-      wrapper.should.have.state('value', options[1].value)
+      wrapper.find('.item').at(1).should.have.className('active')
     })
 
     it('updates value on up arrow', () => {
@@ -1119,8 +1135,7 @@ describe('Dropdown', () => {
 
       wrapper.simulate('click')
       wrapper.simulate('keydown', { key: 'ArrowUp' })
-
-      wrapper.should.have.state('value', options[4].value)
+      wrapper.find('.item').at(4).should.have.className('active')
     })
   })
 
@@ -1135,7 +1150,7 @@ describe('Dropdown', () => {
     it('sets the display text', () => {
       const text = faker.hacker.phrase()
 
-      wrapperRender(<Dropdown options={options} selection text={text} />)
+      wrapperMount(<Dropdown options={options} selection text={text} />)
         .find('div.text')
         .should.contain.text(text)
     })
@@ -1174,7 +1189,7 @@ describe('Dropdown', () => {
 
       // open and simulate search
       wrapper.simulate('click')
-      wrapper.setState({ searchQuery: 'fo' })
+      wrapper.find('input.search').simulate('change', { target: { value: 'fo' } })
 
       // arrow down
       wrapper.simulate('keydown', { key: 'ArrowDown' })
@@ -1234,7 +1249,7 @@ describe('Dropdown', () => {
       const text = 'Hey there'
       const trigger = <div className='trigger'>{text}</div>
 
-      wrapperRender(<Dropdown options={options} trigger={trigger} />)
+      wrapperMount(<Dropdown options={options} trigger={trigger} />)
         .find('.trigger')
         .should.contain.text(text)
     })
@@ -1359,15 +1374,15 @@ describe('Dropdown', () => {
 
     it('handles focus correctly', () => {
       wrapperMount(<Dropdown options={options} selection />)
-      wrapper.should.have.state('focus', false)
+      bodyIsFocused()
 
       // focus
       wrapper.getDOMNode().focus()
-      wrapper.should.have.state('focus', true)
+      dropdownIsFocused()
 
       // click outside
       domEvent.click(document.body)
-      wrapper.should.have.state('focus', false)
+      bodyIsFocused()
     })
 
     it('closes on esc key', () => {
@@ -1403,10 +1418,9 @@ describe('Dropdown', () => {
     it('is called once when the icon is clicked with a search prop', () => {
       // https://github.com/Semantic-Org/Semantic-UI-React/issues/2600
       const onOpen = sandbox.spy()
-      wrapperShallow(<Dropdown options={options} selection search onOpen={onOpen} />)
-        .find('Icon')
-        .simulate('click', { stopPropagation: _.noop })
+      wrapperMount(<Dropdown options={options} selection search onOpen={onOpen} />)
 
+      wrapper.find(Icon).simulate('click')
       onOpen.should.have.been.calledOnce()
     })
   })
@@ -1434,23 +1448,23 @@ describe('Dropdown', () => {
 
   describe('open', () => {
     it('defaultOpen opens the menu when true', () => {
-      wrapperShallow(<Dropdown options={options} selection defaultOpen />)
+      wrapperMount(<Dropdown options={options} selection defaultOpen />)
       dropdownMenuIsOpen()
     })
     it('defaultOpen opens the menu on search dropdowns', () => {
-      wrapperShallow(<Dropdown search options={options} selection defaultOpen />)
+      wrapperMount(<Dropdown search options={options} selection defaultOpen />)
       dropdownMenuIsOpen()
     })
     it('defaultOpen closes the menu when false', () => {
-      wrapperShallow(<Dropdown options={options} selection defaultOpen={false} />)
+      wrapperMount(<Dropdown options={options} selection defaultOpen={false} />)
       dropdownMenuIsClosed()
     })
     it('opens the menu when true', () => {
-      wrapperShallow(<Dropdown options={options} selection open />)
+      wrapperMount(<Dropdown options={options} selection open />)
       dropdownMenuIsOpen()
     })
     it('closes the menu when false', () => {
-      wrapperShallow(<Dropdown options={options} selection open={false} />)
+      wrapperMount(<Dropdown options={options} selection open={false} />)
       dropdownMenuIsClosed()
     })
     it('closes the menu when toggled from true to false', () => {
@@ -1461,18 +1475,20 @@ describe('Dropdown', () => {
       wrapperMount(<Dropdown options={options} selection open={false} />).setProps({ open: true })
       dropdownMenuIsOpen()
     })
-    it('calls scrollSelectedItemIntoView when changed from false to true', () => {
-      wrapperMount(<Dropdown options={options} selection open={false} />)
 
-      const instance = wrapper.instance()
-      sandbox.spy(instance, 'scrollSelectedItemIntoView')
-
-      instance.scrollSelectedItemIntoView.should.not.have.been.called()
-
-      wrapper.setProps({ open: true })
-
-      instance.scrollSelectedItemIntoView.should.have.been.calledOnce()
-    })
+    // TODO: find a way to test this in a different way
+    // it('calls scrollSelectedItemIntoView when changed from false to true', () => {
+    //   wrapperMount(<Dropdown options={options} selection open={false} />)
+    //
+    //   const instance = wrapper.instance()
+    //   sandbox.spy(instance, 'scrollSelectedItemIntoView')
+    //
+    //   instance.scrollSelectedItemIntoView.should.not.have.been.called()
+    //
+    //   wrapper.setProps({ open: true })
+    //
+    //   instance.scrollSelectedItemIntoView.should.have.been.calledOnce()
+    // })
   })
 
   describe('multiple', () => {
@@ -1498,7 +1514,7 @@ describe('Dropdown', () => {
       // make all the items active, expect to see none in the list
       const value = _.map(options, 'value')
 
-      wrapperShallow(<Dropdown options={options} selection value={value} multiple />)
+      wrapperMount(<Dropdown options={options} selection value={value} multiple />)
       wrapper.should.not.have.descendants('DropdownItem')
     })
     it('displays a label for active items', () => {
@@ -1590,7 +1606,7 @@ describe('Dropdown', () => {
     it('has labels with delete icons', () => {
       // add a value so we have a label
       const value = [_.head(options).value]
-      wrapperRender(
+      wrapperMount(
         <Dropdown options={options} selection value={value} multiple />,
       ).should.have.descendants('.label')
 
@@ -1600,7 +1616,7 @@ describe('Dropdown', () => {
       const value = [_.head(options).value]
       const renderLabel = () => ({ content: 'My custom text!', as: 'div' })
 
-      wrapperRender(
+      wrapperMount(
         <Dropdown options={options} selection value={value} multiple renderLabel={renderLabel} />,
       ).should.have.descendants('.label')
 
@@ -1662,12 +1678,13 @@ describe('Dropdown', () => {
         const randomIndex = _.random(options.length - 1)
 
         wrapperMount(<Dropdown options={options} search selection multiple />)
+        wrapper
           .simulate('click', nativeEvent)
           .find('DropdownItem')
           .at(randomIndex)
           .simulate('click', nativeEvent)
 
-        wrapper.instance().searchRef.current.should.eq(document.activeElement)
+        expect(document.querySelector('input.search')).equal(document.activeElement)
       })
     })
     describe('removing items', () => {
@@ -1718,6 +1735,7 @@ describe('Dropdown', () => {
       spy.should.have.been.calledOnce()
       spy.should.have.been.calledWithMatch({}, { value: expected })
     })
+
     it('removes the last item when there is no search query when uncontrolled', () => {
       const value = _.map(options, 'value')
       const expected = _.dropRight(value)
@@ -1734,14 +1752,12 @@ describe('Dropdown', () => {
 
       // open
       wrapper.simulate('click')
-
       domEvent.keyDown(document, { key: 'Backspace' })
 
       spy.should.have.been.calledOnce()
       spy.should.have.been.calledWithMatch({}, { value: expected })
-
-      wrapper.state('value').should.deep.equal(expected)
     })
+
     it('does not remove the last item when there is a search query', () => {
       // search for random item
       const searchQuery = _.sample(options).text
@@ -1751,7 +1767,8 @@ describe('Dropdown', () => {
       )
 
       // open and simulate search
-      wrapper.simulate('click').setState({ searchQuery })
+      wrapper.simulate('click')
+      wrapper.find('input.search').simulate('change', { target: { value: searchQuery } })
 
       domEvent.keyDown(document, { key: 'Backspace' })
 
@@ -1969,30 +1986,32 @@ describe('Dropdown', () => {
 
   describe('options', () => {
     it('adds the onClick handler to all items', () => {
-      wrapperShallow(<Dropdown options={options} selection />)
+      wrapperMount(<Dropdown options={options} selection />)
         .find('DropdownItem')
         .everyWhere((item) => item.should.have.prop('onClick'))
     })
-    it('calls handleItemClick when an item is clicked', () => {
-      wrapperMount(<Dropdown options={options} selection />)
-
-      const instance = wrapper.instance()
-      sandbox.spy(instance, 'handleItemClick')
-
-      // open
-      wrapper.simulate('click')
-      dropdownMenuIsOpen()
 
-      instance.handleItemClick.should.not.have.been.called()
-
-      // click random item
-      wrapper
-        .find('DropdownItem')
-        .at(_.random(0, options.length - 1))
-        .simulate('click')
-
-      instance.handleItemClick.should.have.been.calledOnce()
-    })
+    // TODO: find a way to test this in a different way
+    // it('calls handleItemClick when an item is clicked', () => {
+    //   wrapperMount(<Dropdown options={options} selection />)
+    //
+    //   const instance = wrapper.instance()
+    //   sandbox.spy(instance, 'handleItemClick')
+    //
+    //   // open
+    //   wrapper.simulate('click')
+    //   dropdownMenuIsOpen()
+    //
+    //   instance.handleItemClick.should.not.have.been.called()
+    //
+    //   // click random item
+    //   wrapper
+    //     .find('DropdownItem')
+    //     .at(_.random(0, options.length - 1))
+    //     .simulate('click')
+    //
+    //   instance.handleItemClick.should.have.been.calledOnce()
+    // })
     it('renders new options when options change', () => {
       const customOptions = [
         { text: 'abra', value: 'abra' },
@@ -2019,7 +2038,7 @@ describe('Dropdown', () => {
         { text: 'cadabra', value: 'cadabra', 'data-foo': 'someValue' },
         { text: 'bang', value: 'bang', 'data-foo': 'someValue' },
       ]
-      wrapperShallow(<Dropdown options={customOptions} selection />)
+      wrapperMount(<Dropdown options={customOptions} selection />)
         .find('DropdownItem')
         .everyWhere((item) => item.should.have.prop('data-foo', 'someValue'))
     })
@@ -2030,7 +2049,7 @@ describe('Dropdown', () => {
         { key: null, text: 'bar', value: 'bar' },
         { key: undefined, text: 'baz', value: 'baz' },
       ]
-      wrapperShallow(<Dropdown options={customOptions} selection />)
+      wrapperMount(<Dropdown options={customOptions} selection />)
       const items = wrapper.find('DropdownItem')
 
       items.at(0).key().should.equal('0')
@@ -2063,13 +2082,13 @@ describe('Dropdown', () => {
 
   describe('search', () => {
     it('does not add a search input when not defined', () => {
-      wrapperShallow(<Dropdown options={options} selection />)
+      wrapperMount(<Dropdown options={options} selection />)
 
       wrapper.should.not.have.descendants('input.search')
     })
 
     it('adds a search input when present', () => {
-      wrapperShallow(<Dropdown options={options} selection search />)
+      wrapperMount(<Dropdown options={options} selection search />)
       wrapper.should.have.exactly(1).descendants(DropdownSearchInput)
     })
 
@@ -2115,13 +2134,14 @@ describe('Dropdown', () => {
       wrapperMount(<Dropdown options={options} selection search />)
 
       // open and simulate search
-      wrapper.simulate('click').setState({ searchQuery })
+      wrapper.simulate('click')
+      wrapper.find('input.search').simulate('change', { target: { value: searchQuery } })
 
       // click first item (we searched for exact text)
       wrapper.find('DropdownItem').first().simulate('click')
 
       // bye bye search query
-      wrapper.should.have.state('searchQuery', '')
+      wrapper.find('input.search').should.have.value('')
     })
 
     it('opens the menu on change if there is a query and not already open', () => {
@@ -2195,10 +2215,10 @@ describe('Dropdown', () => {
       // avoid it to prevent false positives
       wrapper.simulate('click')
       wrapper.simulate('keydown', { key: 'ArrowUp' })
-      wrapper.should.have.state('selectedIndex', 3)
+      wrapper.find('.item').at(3).should.have.className('selected')
 
       wrapper.find('input.search').simulate('change', { target: { value: 'baz' } })
-      wrapper.should.have.state('selectedIndex', 0)
+      wrapper.find('.item').at(0).should.have.className('selected')
     })
 
     it('still allows moving selection after blur/focus', () => {
@@ -2248,13 +2268,7 @@ describe('Dropdown', () => {
         .simulate('click', nativeEvent)
 
       dropdownMenuIsClosed()
-
-      const activeElement = document.activeElement
-      const searchIsFocused = activeElement === document.querySelector('input.search')
-      searchIsFocused.should.be.true(
-        `Expected "input.search" to be the active element but found ${activeElement} instead.`,
-      )
-      wrapper.should.have.state('focus', true)
+      dropdownInputIsFocused()
     })
 
     it('sets focus to the dropdown after selection', () => {
@@ -2269,14 +2283,7 @@ describe('Dropdown', () => {
       // TODO: try reenable after Enzyme update
       // https://github.com/Semantic-Org/Semantic-UI-React/pull/3747#issuecomment-522018329
       // dropdownMenuIsClosed()
-
-      const activeElement = document.activeElement
-      const dropdownIsFocused = activeElement === document.querySelector('div.dropdown')
-      dropdownIsFocused.should.be.true(
-        `Expected Dropdown to be the active element but found ${activeElement} instead.`,
-      )
-
-      wrapper.should.have.state('focus', true)
+      dropdownIsFocused()
     })
 
     it('does not selected "disabled" item after blur', () => {
@@ -2304,7 +2311,7 @@ describe('Dropdown', () => {
       const onInputChange = sandbox.spy()
       const onSearchChange = sandbox.spy()
 
-      wrapperShallow(
+      wrapperMount(
         <Dropdown
           onSearchChange={onSearchChange}
           options={options}
@@ -2313,13 +2320,10 @@ describe('Dropdown', () => {
         />,
       )
 
-      wrapper
-        .find(DropdownSearchInput)
-        .shallow()
-        .simulate('change', {
-          stopPropagation: _.noop,
-          target: { value: faker.hacker.noun() },
-        })
+      wrapper.find(DropdownSearchInput).simulate('change', {
+        stopPropagation: _.noop,
+        target: { value: faker.hacker.noun() },
+      })
 
       onInputChange.should.have.been.calledOnce()
       onSearchChange.should.have.been.calledOnce()
@@ -2418,56 +2422,58 @@ describe('Dropdown', () => {
 
   describe('placeholder', () => {
     it('is present when defined', () => {
-      wrapperShallow(
+      wrapperMount(
         <Dropdown options={options} selection placeholder='hi' />,
       ).should.have.descendants('.default.text')
     })
     it('is not present when not defined', () => {
-      wrapperShallow(<Dropdown options={options} selection />).should.not.have.descendants(
+      wrapperMount(<Dropdown options={options} selection />).should.not.have.descendants(
         '.default.text',
       )
     })
     it('is not present when there is a value', () => {
-      wrapperShallow(
+      wrapperMount(
         <Dropdown options={options} selection value='hi' placeholder='hi' />,
       ).should.not.have.descendants('.default.text')
     })
     it('is present on a multiple dropdown with an empty value array', () => {
-      wrapperShallow(
+      wrapperMount(
         <Dropdown options={options} selection multiple placeholder='hi' />,
       ).should.have.descendants('.default.text')
     })
     it('has a filtered className when there is a search query', () => {
-      wrapperShallow(<Dropdown options={options} selection search placeholder='hi' />)
-        .setState({ searchQuery: 'a' })
-        .should.have.descendants('.default.text.filtered')
+      wrapperMount(<Dropdown options={options} selection search placeholder='hi' />)
+
+      wrapper.find('input.search').simulate('change', { target: { value: 'a' } })
+      wrapper.should.have.descendants('.default.text.filtered')
     })
   })
 
   describe('render', () => {
-    it('calls renderText', () => {
-      wrapperShallow(<Dropdown options={options} selection />)
-
-      const instance = wrapper.instance()
-      sandbox.spy(instance, 'renderText')
-
-      instance.renderText.should.not.have.been.called()
-
-      instance.render()
-
-      instance.renderText.should.have.been.called()
-    })
+    // TODO: find a way to test this in a different way
+    // it('calls renderText', () => {
+    //   wrapperMount(<Dropdown options={options} selection />)
+    //
+    //   const instance = wrapper.instance()
+    //   sandbox.spy(instance, 'renderText')
+    //
+    //   instance.renderText.should.not.have.been.called()
+    //
+    //   instance.render()
+    //
+    //   instance.renderText.should.have.been.called()
+    // })
   })
 
   describe('lazyLoad', () => {
     it('does not render options when closed', () => {
-      wrapperShallow(<Dropdown options={options} lazyLoad />).should.not.have.descendants(
+      wrapperMount(<Dropdown options={options} lazyLoad />).should.not.have.descendants(
         'DropdownItem',
       )
     })
 
     it('renders options when open', () => {
-      wrapperShallow(<Dropdown options={options} lazyLoad open />).should.have.descendants(
+      wrapperMount(<Dropdown options={options} lazyLoad open />).should.have.descendants(
         'DropdownItem',
       )
     })
@@ -2475,7 +2481,7 @@ describe('Dropdown', () => {
 
   describe('Dropdown.Menu child', () => {
     it('renders child passed', () => {
-      wrapperShallow(
+      wrapperMount(
         <Dropdown text='required prop'>
           <Dropdown.Menu data-find-me />
         </Dropdown>,
@@ -2497,7 +2503,7 @@ describe('Dropdown', () => {
     })
 
     it('spreads extra menu props', () => {
-      wrapperShallow(
+      wrapperMount(
         <Dropdown text='required prop'>
           <Dropdown.Menu data-foo-bar />
         </Dropdown>,
@@ -2507,13 +2513,15 @@ describe('Dropdown', () => {
     })
 
     it("merges the user's menu className", () => {
-      wrapperShallow(
+      wrapperMount(
         <Dropdown text='required prop'>
           <Dropdown.Menu className='foo-bar' />
         </Dropdown>,
-      ).should.contain.descendants('DropdownMenu')
+      )
+
+      wrapper.should.contain.descendants('DropdownMenu')
 
-      const menu = wrapper.find('DropdownMenu').shallow()
+      const menu = wrapper.find('DropdownMenu')
 
       menu.should.have.className('menu')
       menu.should.have.className('foo-bar')
@@ -2528,69 +2536,73 @@ describe('Dropdown', () => {
     ]
 
     it('adds an option for arbitrary search value', () => {
-      const search = wrapperMount(
-        <Dropdown options={customOptions} selection search allowAdditions />,
-      ).find('input.search')
+      wrapperMount(<Dropdown options={customOptions} selection search allowAdditions />)
+
+      const search = wrapper.find('input.search')
 
       wrapper.find('DropdownItem').should.have.lengthOf(3)
 
       search.simulate('change', { target: { value: 'boo' } })
 
       wrapper.find('DropdownItem').should.have.lengthOf(1)
-
       wrapper.find('DropdownItem').should.have.prop('value', 'boo')
     })
 
     it('adds an option for prefix search value', () => {
-      const search = wrapperMount(
-        <Dropdown options={customOptions} selection search allowAdditions />,
-      ).find('input.search')
+      wrapperMount(<Dropdown options={customOptions} selection search allowAdditions />)
+
+      const search = wrapper.find('input.search')
 
       wrapper.find('DropdownItem').should.have.lengthOf(3)
 
       search.simulate('change', { target: { value: 'a' } })
 
       wrapper.find('DropdownItem').should.have.lengthOf(4)
-
       wrapper.find('DropdownItem').first().should.have.prop('value', 'a')
     })
 
     it('uses default additionLabel', () => {
-      const search = wrapperMount(
-        <Dropdown options={customOptions} selection search allowAdditions />,
-      ).find('input.search')
+      wrapperMount(<Dropdown options={customOptions} selection search allowAdditions />)
+      const search = wrapper.find('input.search')
 
       search.simulate('change', { target: { value: 'boo' } })
 
       wrapper.find('DropdownItem').should.have.lengthOf(1)
-
       wrapper.find('DropdownItem').last().should.have.prop('className', 'addition')
 
       const text = wrapper.find('DropdownItem').prop('text')
 
       expect(text[0]).to.equal('Add ')
-      shallow(text[1]).equals(<b key='addition-query'>boo</b>)
+      // Comparing directly with a React element freezes tests
+      expect(text[1].type).equals('b')
+      expect(text[1].key).equals('addition-query')
+      expect(text[1].props.children).equals('boo')
     })
 
     it('uses custom additionLabel string', () => {
-      const search = wrapperMount(
+      wrapperMount(
         <Dropdown options={customOptions} selection search allowAdditions additionLabel='New: ' />,
-      ).find('input.search')
+      )
+
+      const search = wrapper.find('input.search')
 
       search.simulate('change', { target: { value: 'boo' } })
 
       wrapper.find('DropdownItem').should.have.lengthOf(1)
-
       wrapper.find('DropdownItem').last().should.have.prop('className', 'addition')
 
       const text = wrapper.find('DropdownItem').prop('text')
 
-      expect(text[0]).to.equal('New: ')
-      shallow(text[1]).equals(<b key='addition-query'>boo</b>)
+      expect(text[0]).equals('New: ')
+
+      // Comparing directly with a React element freezes tests
+      expect(text[1].type).equals('b')
+      expect(text[1].key).equals('addition-query')
+      expect(text[1].props.children).equals('boo')
     })
 
     it('uses custom additionLabel element', () => {
-      const search = wrapperMount(
+      wrapperMount(
         <Dropdown
           options={customOptions}
           selection
@@ -2598,39 +2610,48 @@ describe('Dropdown', () => {
           allowAdditions
           additionLabel={<i>New: </i>}
         />,
-      ).find('input.search')
+      )
 
+      const search = wrapper.find('input.search')
       search.simulate('change', { target: { value: 'boo' } })
 
       wrapper.find('DropdownItem').should.have.lengthOf(1)
-
       wrapper.find('DropdownItem').last().should.have.prop('className', 'addition')
 
       const text = wrapper.find('DropdownItem').prop('text')
 
-      shallow(text[0]).equals(<i key='label'>New: </i>)
-      shallow(text[1]).equals(<b key='addition-query'>boo</b>)
+      // Comparing directly with a React element freezes tests
+      expect(text[0].type).equals('i')
+      expect(text[0].key).equals('addition-label')
+      expect(text[0].props.children).equals('New: ')
+
+      expect(text[1].type).equals('b')
+      expect(text[1].key).equals('addition-query')
+      expect(text[1].props.children).equals('boo')
     })
 
     it('uses no additionLabel', () => {
-      const search = wrapperMount(
+      wrapperMount(
         <Dropdown options={customOptions} selection search allowAdditions additionLabel='' />,
-      ).find('input.search')
+      )
+      const search = wrapper.find('input.search')
 
       search.simulate('change', { target: { value: 'boo' } })
 
       wrapper.find('DropdownItem').should.have.lengthOf(1)
-
       wrapper.find('DropdownItem').last().should.have.prop('className', 'addition')
 
       const text = wrapper.find('DropdownItem').prop('text')
 
       expect(text[0]).to.equal('')
-      shallow(text[1]).equals(<b key='addition-query'>boo</b>)
+      // Comparing directly with a React element freezes tests
+      expect(text[1].type).equals('b')
+      expect(text[1].key).equals('addition-query')
+      expect(text[1].props.children).equals('boo')
     })
 
     it('keeps custom value option (bottom) when options change', () => {
-      const search = wrapperMount(
+      wrapperMount(
         <Dropdown
           options={customOptions}
           selection
@@ -2638,36 +2659,33 @@ describe('Dropdown', () => {
           allowAdditions
           additionPosition='bottom'
         />,
-      ).find('input.search')
+      )
+      const search = wrapper.find('input.search')
 
       search.simulate('change', { target: { value: 'a' } })
 
       wrapper.find('DropdownItem').should.have.lengthOf(4)
-
       wrapper.find('DropdownItem').last().should.have.prop('value', 'a')
 
       wrapper.setProps({ options: [...customOptions, { text: 'bar', value: 'bar' }] })
 
       wrapper.find('DropdownItem').should.have.lengthOf(5)
-
       wrapper.find('DropdownItem').last().should.have.prop('value', 'a')
     })
 
     it('keeps custom value option (top) when options change', () => {
-      const search = wrapperMount(
-        <Dropdown options={customOptions} selection search allowAdditions />,
-      ).find('input.search')
+      wrapperMount(<Dropdown options={customOptions} selection search allowAdditions />)
+
+      const search = wrapper.find('input.search')
 
       search.simulate('change', { target: { value: 'a' } })
 
       wrapper.find('DropdownItem').should.have.lengthOf(4)
-
       wrapper.find('DropdownItem').first().should.have.prop('value', 'a')
 
       wrapper.setProps({ options: [...customOptions, { text: 'bar', value: 'bar' }] })
 
       wrapper.find('DropdownItem').should.have.lengthOf(5)
-
       wrapper.find('DropdownItem').first().should.have.prop('value', 'a')
     })
 
@@ -2728,7 +2746,7 @@ describe('Dropdown', () => {
       search.simulate('change', { target: { value: 'boo' } })
       search.simulate('keydown', { key: 'Enter' })
 
-      wrapper.should.have.state('searchQuery', '')
+      wrapper.find('input.search').should.have.value('')
     })
   })
 
@@ -2736,12 +2754,12 @@ describe('Dropdown', () => {
     it('renders a header when present', () => {
       const text = faker.hacker.phrase()
 
-      wrapperRender(<Dropdown options={options} header={text} />)
+      wrapperMount(<Dropdown options={options} header={text} />)
         .find('.menu .header')
         .should.contain.text(text)
     })
     it('does not render a header when not present', () => {
-      wrapperRender(<Dropdown options={options} />).should.not.have.descendants('.menu .header')
+      wrapperMount(<Dropdown options={options} />).should.not.have.descendants('.menu .header')
     })
   })
 
@@ -2796,7 +2814,7 @@ describe('Dropdown', () => {
       wrapper.simulate('keydown', { key: 'ArrowDown' })
 
       onChange.should.have.been.called()
-      wrapper.should.have.state('value', options[1].value)
+      wrapper.find('.item').at(1).should.have.className('active')
     })
 
     it('does not change value when set to false', () => {
@@ -2817,7 +2835,7 @@ describe('Dropdown', () => {
       wrapper.simulate('keydown', { key: 'ArrowDown' })
 
       onChange.should.not.have.been.called()
-      wrapper.should.have.state('value', value)
+      wrapper.find('.item').at(0).should.have.className('active')
     })
   })
 
diff --git a/test/specs/modules/Dropdown/DropdownDivider-test.js b/test/specs/modules/Dropdown/DropdownDivider-test.js
index 1a26b43107..cb6edf3dbc 100644
--- a/test/specs/modules/Dropdown/DropdownDivider-test.js
+++ b/test/specs/modules/Dropdown/DropdownDivider-test.js
@@ -3,4 +3,5 @@ import * as common from 'test/specs/commonTests'
 
 describe('DropdownDivider', () => {
   common.isConformant(DropdownDivider)
+  common.forwardsRef(DropdownDivider)
 })
diff --git a/test/specs/modules/Dropdown/DropdownHeader-test.js b/test/specs/modules/Dropdown/DropdownHeader-test.js
index faa0d29373..74da305e98 100644
--- a/test/specs/modules/Dropdown/DropdownHeader-test.js
+++ b/test/specs/modules/Dropdown/DropdownHeader-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('DropdownHeader', () => {
   common.isConformant(DropdownHeader)
+  common.forwardsRef(DropdownHeader)
   common.rendersChildren(DropdownHeader)
 
   common.implementsIconProp(DropdownHeader, { autoGenerateKey: false })
diff --git a/test/specs/modules/Dropdown/DropdownItem-test.js b/test/specs/modules/Dropdown/DropdownItem-test.js
index aeef0ae73e..f18278bfd2 100644
--- a/test/specs/modules/Dropdown/DropdownItem-test.js
+++ b/test/specs/modules/Dropdown/DropdownItem-test.js
@@ -8,6 +8,7 @@ import Flag from 'src/elements/Flag'
 
 describe('DropdownItem', () => {
   common.isConformant(DropdownItem)
+  common.forwardsRef(DropdownItem)
   common.rendersChildren(DropdownItem, {
     rendersContent: false,
   })
@@ -21,6 +22,7 @@ describe('DropdownItem', () => {
   common.implementsImageProp(DropdownItem, { autoGenerateKey: false })
 
   common.implementsShorthandProp(DropdownItem, {
+    assertExactMatch: false,
     autoGenerateKey: false,
     propKey: 'flag',
     ShorthandComponent: Flag,
diff --git a/test/specs/modules/Dropdown/DropdownMenu-test.js b/test/specs/modules/Dropdown/DropdownMenu-test.js
index 412b1ac267..4c2ddd20d5 100644
--- a/test/specs/modules/Dropdown/DropdownMenu-test.js
+++ b/test/specs/modules/Dropdown/DropdownMenu-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('DropdownMenu', () => {
   common.isConformant(DropdownMenu)
+  common.forwardsRef(DropdownMenu)
   common.rendersChildren(DropdownMenu)
 
   common.propValueOnlyToClassName(DropdownMenu, 'direction', ['left', 'right'])
diff --git a/test/specs/modules/Dropdown/DropdownSearchInput-test.js b/test/specs/modules/Dropdown/DropdownSearchInput-test.js
index c9420fe86a..c457453183 100644
--- a/test/specs/modules/Dropdown/DropdownSearchInput-test.js
+++ b/test/specs/modules/Dropdown/DropdownSearchInput-test.js
@@ -6,7 +6,8 @@ import { sandbox } from 'test/utils'
 import DropdownSearchInput from 'src/modules/Dropdown/DropdownSearchInput'
 
 describe('DropdownSearchInput', () => {
-  common.hasValidTypings(DropdownSearchInput)
+  common.isConformant(DropdownSearchInput)
+  common.forwardsRef(DropdownSearchInput, { tagName: 'input' })
 
   describe('aria', () => {
     it('should have aria-autocomplete', () => {
diff --git a/test/specs/modules/Dropdown/DropdownText-test.js b/test/specs/modules/Dropdown/DropdownText-test.js
index cdf1297a74..ef7f31537d 100644
--- a/test/specs/modules/Dropdown/DropdownText-test.js
+++ b/test/specs/modules/Dropdown/DropdownText-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('DropdownText', () => {
   common.isConformant(DropdownText)
+  common.forwardsRef(DropdownText)
   common.rendersChildren(DropdownText)
 
   it('aria attributes', () => {
diff --git a/test/specs/modules/Embed/Embed-test.js b/test/specs/modules/Embed/Embed-test.js
index 3cd3b13bd2..cc810c06bc 100644
--- a/test/specs/modules/Embed/Embed-test.js
+++ b/test/specs/modules/Embed/Embed-test.js
@@ -14,10 +14,9 @@ const assertIframeSrc = (props, srcPart) => {
 
 describe('Embed', () => {
   common.isConformant(Embed)
+  common.forwardsRef(Embed)
   common.hasUIClassName(Embed)
-  common.rendersChildren(Embed, {
-    requiredProps: { active: true },
-  })
+  common.rendersChildren(Embed, { requiredProps: { active: true } })
 
   common.implementsHTMLIFrameProp(Embed, {
     alwaysPresent: true,
@@ -48,17 +47,21 @@ describe('Embed', () => {
 
   describe('active', () => {
     it('defaults to false', () => {
-      shallow(<Embed />).should.have.not.state('active')
+      mount(<Embed />).should.have.not.className('active')
     })
 
-    it('passes to state', () => {
-      shallow(<Embed active />).should.have.state('active', true)
+    it('applies className', () => {
+      mount(<Embed active />).should.have.className('active')
     })
 
     it('renders nothing when false', () => {
-      const children = 'child text'
+      const wrapper = mount(
+        <Embed>
+          <p id='foo' />
+        </Embed>,
+      )
 
-      shallow(<Embed>{children}</Embed>).should.not.contain(<div className='embed'>{children}</div>)
+      wrapper.should.not.have.descendants('#foo')
     })
   })
 
@@ -90,9 +93,8 @@ describe('Embed', () => {
 
   describe('defaultActive', () => {
     it('sets the initial active state', () => {
-      shallow(<Embed defaultActive />).should.have.state('active', true)
-
-      shallow(<Embed defaultActive={false} />).should.have.state('active', false)
+      mount(<Embed defaultActive />).should.have.className('active')
+      mount(<Embed defaultActive={false} />).should.have.not.className('active')
     })
   })
 
@@ -118,23 +120,18 @@ describe('Embed', () => {
   })
 
   describe('onClick', () => {
-    it('omitted when not defined', () => {
-      const click = () => shallow(<Embed />).simulate('click')
-      expect(click).to.not.throw()
-    })
-
-    it('updates state', () => {
+    it('sets to active state', () => {
       const wrapper = mount(<Embed />)
 
       wrapper.simulate('click')
-      wrapper.should.have.state('active', true)
+      wrapper.should.have.className('active')
     })
 
-    it('omits state update if active', () => {
+    it('skips state update if active', () => {
       const wrapper = mount(<Embed active />)
 
       wrapper.simulate('click')
-      wrapper.should.have.state('active', true)
+      wrapper.should.have.className('active')
     })
   })
 
diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js
index c1da3c2dda..fb42392a6d 100644
--- a/test/specs/modules/Modal/Modal-test.js
+++ b/test/specs/modules/Modal/Modal-test.js
@@ -11,7 +11,6 @@ import Portal from 'src/addons/Portal/Portal'
 
 import {
   assertNodeContains,
-  assertBodyClasses,
   assertBodyContains,
   assertWithTimeout,
   domEvent,
@@ -30,16 +29,6 @@ let wrapper
 const wrapperMount = (...args) => (wrapper = mount(...args))
 const wrapperShallow = (...args) => (wrapper = shallow(...args))
 
-// cleanup in `useEffect()` is executed async, so we need to perform a proper cleanup first to avoid
-// collisions with other tests
-function waitForClassesCleanup(done, customAssertions = () => {}) {
-  wrapper.unmount()
-  assertWithTimeout(() => {
-    assertBodyClasses('dimmed', false)
-    customAssertions()
-  }, done)
-}
-
 describe('Modal', () => {
   beforeEach(() => {
     if (wrapper && wrapper.unmount) {
@@ -72,12 +61,16 @@ describe('Modal', () => {
     propKey: 'header',
     ShorthandComponent: ModalHeader,
     mapValueToProps: (content) => ({ content }),
+    rendersPortal: true,
+    requiredProps: { open: true },
   })
   common.implementsShorthandProp(Modal, {
     autoGenerateKey: false,
     propKey: 'content',
     ShorthandComponent: ModalContent,
     mapValueToProps: (content) => ({ content }),
+    rendersPortal: true,
+    requiredProps: { open: true },
   })
 
   // Heads up!
@@ -246,67 +239,24 @@ describe('Modal', () => {
   })
 
   describe('dimmer', () => {
-    it('adds a "dimmer" className to the body', (done) => {
+    it('renders ModalDimmer by default', () => {
       wrapperMount(<Modal open />)
-
-      assertBodyContains('.ui.page.modals.dimmer.transition.visible.active')
-      waitForClassesCleanup(done)
+      wrapper.should.have.descendants('ModalDimmer')
     })
 
-    describe('can be "true"', () => {
-      it('adds/removes body classes "dimmable dimmed" on mount/unmount', (done) => {
-        assertBodyClasses('dimmable dimmed', false)
-
-        wrapperMount(<Modal open dimmer />)
-        assertBodyClasses('dimmable dimmed')
-
-        wrapper.setProps({ open: false })
-        assertBodyClasses('dimmable dimmed', false)
-
-        waitForClassesCleanup(done)
-      })
+    it('renders ModalDimmer when is "true"', () => {
+      wrapperMount(<Modal open dimmer />)
+      wrapper.should.have.descendants('ModalDimmer')
     })
 
-    describe('blurring', () => {
-      it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', (done) => {
-        assertBodyClasses('dimmable dimmed blurring', false)
-
-        wrapperMount(<Modal open dimmer='blurring' />)
-        assertBodyClasses('dimmable dimmed blurring')
-
-        wrapper.setProps({ open: false })
-        assertBodyClasses('dimmable dimmed blurring', false)
-
-        waitForClassesCleanup(done)
-      })
-
-      it('adds a dimmer to the body', (done) => {
-        wrapperMount(<Modal open dimmer='blurring' />)
-
-        assertBodyContains('.ui.page.modals.dimmer.transition.visible.active')
-        waitForClassesCleanup(done)
-      })
+    it('passes "blurring" to ModalDimmer', () => {
+      wrapperMount(<Modal open dimmer='blurring' />)
+      wrapper.find('ModalDimmer').should.have.prop('blurring', true)
     })
 
-    describe('inverted', () => {
-      it('adds/removes body classes "dimmable dimmed" on mount/unmount', (done) => {
-        assertBodyClasses('dimmable dimmed', false)
-
-        wrapperMount(<Modal open dimmer />)
-        assertBodyClasses('dimmable dimmed')
-
-        wrapper.setProps({ open: false })
-        assertBodyClasses('dimmable dimmed', false)
-
-        waitForClassesCleanup(done)
-      })
-
-      it('adds an inverted dimmer to the body', (done) => {
-        wrapperMount(<Modal open dimmer='inverted' />)
-
-        assertBodyContains('.ui.inverted.page.modals.dimmer.transition.visible.active')
-        waitForClassesCleanup(done)
-      })
+    it('passes "inverted" to ModalDimmer', () => {
+      wrapperMount(<Modal open dimmer='inverted' />)
+      wrapper.find('ModalDimmer').should.have.prop('inverted', true)
     })
 
     describe('object', () => {
@@ -327,7 +277,7 @@ describe('Modal', () => {
 
       wrapper.find('#trigger').simulate('click')
       onOpen.should.have.been.calledOnce()
-      onOpen.should.have.been.calledWithMatch({}, { open: true })
+      onOpen.should.have.been.calledWithMatch({ type: 'click' }, { open: true })
     })
 
     it('is not called on body click', () => {
@@ -550,16 +500,15 @@ describe('Modal', () => {
       window.innerHeight = innerHeight
     })
 
-    it('does not add the scrolling class to the body by default', (done) => {
+    it('does not pass "scrolling" by default', () => {
       wrapperMount(<Modal open />)
-
-      assertBodyClasses('scrolling', false)
-      waitForClassesCleanup(done)
+      wrapper.find('ModalDimmer').should.have.prop('scrolling', false)
     })
 
-    it('does not add the scrolling class to the body when equal to the window height', (done) => {
+    it('does not pass "scrolling" when equal to the window height', (done) => {
       /* 101 is `padding * 2 + 1, see Modal/utils */
       const height = window.innerHeight - 101
+
       wrapperMount(
         <Modal open style={{ height }}>
           foo
@@ -567,74 +516,47 @@ describe('Modal', () => {
       )
 
       requestAnimationFrame(() => {
-        assertBodyClasses('scrolling', false)
+        wrapper.update()
+        wrapper.find('ModalDimmer').should.have.prop('scrolling', false)
+
         done()
       })
     })
 
-    it('adds the scrolling class to the body when taller than the window', (done) => {
+    it('passes "scrolling" when taller than the window', (done) => {
       window.innerHeight = 10
       wrapperMount(<Modal open>foo</Modal>)
 
       requestAnimationFrame(() => {
-        assertBodyClasses('scrolling')
+        wrapper.update()
+        wrapper.find('ModalDimmer').should.have.prop('scrolling', true)
+
         done()
       })
     })
 
-    it('adds/removes the scrolling class to the body when the window grows/shrinks', (done) => {
-      assertBodyClasses('scrolling', false)
-
-      wrapperMount(<Modal open>foo</Modal>)
+    it('passes "scrolling" when the window grows/shrinks', (done) => {
+      wrapperMount(
+        <Modal open>
+          <span />
+        </Modal>,
+      )
       window.innerHeight = 10
 
       assertWithTimeout(
         () => {
-          assertBodyClasses('scrolling')
+          wrapper.update()
+          wrapper.find('ModalDimmer').should.have.prop('scrolling', true)
+
           window.innerHeight = 10000
         },
         () =>
           assertWithTimeout(() => {
-            assertBodyClasses('scrolling', false)
+            wrapper.update()
+            wrapper.find('ModalDimmer').should.have.prop('scrolling', false)
           }, done),
       )
     })
-
-    it('adds the scrolling class to the body after re-open', (done) => {
-      assertBodyClasses('scrolling', false)
-
-      window.innerHeight = 10
-      wrapperMount(<Modal defaultOpen>foo</Modal>)
-
-      assertWithTimeout(
-        () => {
-          assertBodyClasses('scrolling')
-          domEvent.click('.ui.dimmer')
-        },
-        () =>
-          assertWithTimeout(
-            () => {
-              assertBodyClasses('scrolling', false)
-              wrapper.setProps({ open: true })
-            },
-            () =>
-              assertWithTimeout(() => {
-                assertBodyClasses('scrolling')
-              }, done),
-          ),
-      )
-    })
-
-    it('removes the scrolling class from the body on unmount', (done) => {
-      assertBodyClasses('scrolling', false)
-
-      window.innerHeight = 10
-      wrapperMount(<Modal open>foo</Modal>)
-
-      waitForClassesCleanup(done, () => {
-        assertBodyClasses('scrolling', false)
-      })
-    })
   })
 
   describe('server-side', () => {
diff --git a/test/specs/modules/Modal/ModalActions-test.js b/test/specs/modules/Modal/ModalActions-test.js
index aecac938dd..94d1e8badb 100644
--- a/test/specs/modules/Modal/ModalActions-test.js
+++ b/test/specs/modules/Modal/ModalActions-test.js
@@ -6,6 +6,8 @@ import { sandbox } from 'test/utils'
 
 describe('ModalActions', () => {
   common.isConformant(ModalActions)
+  common.forwardsRef(ModalActions)
+  common.forwardsRef(ModalActions, { requiredProps: { children: <span /> } })
   common.rendersChildren(ModalActions)
 
   common.implementsCreateMethod(ModalActions)
diff --git a/test/specs/modules/Modal/ModalContent-test.js b/test/specs/modules/Modal/ModalContent-test.js
index 4550073361..4911e13ae8 100644
--- a/test/specs/modules/Modal/ModalContent-test.js
+++ b/test/specs/modules/Modal/ModalContent-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ModalContent', () => {
   common.isConformant(ModalContent)
+  common.forwardsRef(ModalContent)
   common.rendersChildren(ModalContent)
 
   common.implementsCreateMethod(ModalContent)
diff --git a/test/specs/modules/Modal/ModalDescription-test.js b/test/specs/modules/Modal/ModalDescription-test.js
index e7066e53ec..680f78a23b 100644
--- a/test/specs/modules/Modal/ModalDescription-test.js
+++ b/test/specs/modules/Modal/ModalDescription-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('ModalDescription', () => {
   common.isConformant(ModalDescription)
+  common.forwardsRef(ModalDescription)
   common.rendersChildren(ModalDescription)
 })
diff --git a/test/specs/modules/Modal/ModalDimmer-test.js b/test/specs/modules/Modal/ModalDimmer-test.js
index a304970947..bb8d68af72 100644
--- a/test/specs/modules/Modal/ModalDimmer-test.js
+++ b/test/specs/modules/Modal/ModalDimmer-test.js
@@ -5,13 +5,25 @@ import * as common from 'test/specs/commonTests'
 
 describe('ModalDimmer', () => {
   common.isConformant(ModalDimmer)
+  common.forwardsRef(ModalDimmer)
   common.hasUIClassName(ModalDimmer)
   common.rendersChildren(ModalDimmer)
 
   common.propKeyOnlyToClassName(ModalDimmer, 'inverted')
 
+  it('has required classes', () => {
+    const wrapper = mount(<ModalDimmer mountNode={null} />)
+
+    expect(wrapper).to.have.className('page')
+    expect(wrapper).to.have.className('modals')
+    expect(wrapper).to.have.className('dimmer')
+    expect(wrapper).to.have.className('transition')
+    expect(wrapper).to.have.className('visible')
+    expect(wrapper).to.have.className('active')
+  })
+
   describe('children', () => {
-    it('adds classes to "MountNode"', () => {
+    it('adds classes to "mountNode"', () => {
       const element = document.createElement('div')
       mount(<ModalDimmer mountNode={element} />)
 
@@ -21,7 +33,7 @@ describe('ModalDimmer', () => {
   })
 
   describe('blurring', () => {
-    it('adds nothing "MountNode" by default', () => {
+    it('adds nothing "mountNode" by default', () => {
       const element = document.createElement('div')
       mount(<ModalDimmer mountNode={element} />)
 
diff --git a/test/specs/modules/Modal/ModalHeader-test.js b/test/specs/modules/Modal/ModalHeader-test.js
index a8b0d1c962..656b4ae272 100644
--- a/test/specs/modules/Modal/ModalHeader-test.js
+++ b/test/specs/modules/Modal/ModalHeader-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ModalHeader', () => {
   common.isConformant(ModalHeader)
+  common.forwardsRef(ModalHeader)
   common.rendersChildren(ModalHeader)
 
   common.implementsCreateMethod(ModalHeader)
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
index 833c3df520..a5a9d96077 100644
--- a/test/specs/modules/Popup/Popup-test.js
+++ b/test/specs/modules/Popup/Popup-test.js
@@ -420,21 +420,22 @@ describe('Popup', () => {
   })
 
   describe('popperDependencies', () => {
-    it('will call "scheduleUpdate" if dependencies changed', () => {
-      wrapperMount(<Popup popperDependencies={[1, 2, 3]} />)
-      const scheduleUpdate = sandbox.spy(wrapper.instance(), 'handleUpdate')
-
-      wrapper.setProps({ popperDependencies: [2, 3, 4] })
-      scheduleUpdate.should.have.been.calledOnce()
-    })
-
-    it('will skip "scheduleUpdate" if dependencies are same', () => {
-      wrapperMount(<Popup popperDependencies={[1, 2, 3]} />)
-      const scheduleUpdate = sandbox.spy(wrapper.instance(), 'handleUpdate')
-
-      wrapper.setProps({ popperDependencies: [1, 2, 3] })
-      scheduleUpdate.should.have.not.been.called()
-    })
+    // TODO: find a way to implement these tests
+    // it('will call "scheduleUpdate" if dependencies changed', () => {
+    //   wrapperMount(<Popup popperDependencies={[1, 2, 3]} />)
+    //   const scheduleUpdate = sandbox.spy(wrapper.instance(), 'handleUpdate')
+    //
+    //   wrapper.setProps({ popperDependencies: [2, 3, 4] })
+    //   scheduleUpdate.should.have.been.calledOnce()
+    // })
+    //
+    // it('will skip "scheduleUpdate" if dependencies are same', () => {
+    //   wrapperMount(<Popup popperDependencies={[1, 2, 3]} />)
+    //   const scheduleUpdate = sandbox.spy(wrapper.instance(), 'handleUpdate')
+    //
+    //   wrapper.setProps({ popperDependencies: [1, 2, 3] })
+    //   scheduleUpdate.should.have.not.been.called()
+    // })
   })
 
   describe('size', () => {
diff --git a/test/specs/modules/Popup/PopupContent-test.js b/test/specs/modules/Popup/PopupContent-test.js
index 01d8393650..93869c856c 100644
--- a/test/specs/modules/Popup/PopupContent-test.js
+++ b/test/specs/modules/Popup/PopupContent-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('PopupContent', () => {
   common.isConformant(PopupContent)
+  common.forwardsRef(PopupContent)
   common.rendersChildren(PopupContent)
 
   common.implementsCreateMethod(PopupContent)
diff --git a/test/specs/modules/Popup/PopupHeader-test.js b/test/specs/modules/Popup/PopupHeader-test.js
index 910c1e13ed..1f2f430958 100644
--- a/test/specs/modules/Popup/PopupHeader-test.js
+++ b/test/specs/modules/Popup/PopupHeader-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('PopupHeader', () => {
   common.isConformant(PopupHeader)
+  common.forwardsRef(PopupHeader)
   common.rendersChildren(PopupHeader)
 
   common.implementsCreateMethod(PopupHeader)
diff --git a/test/specs/modules/Progress/Progress-test.js b/test/specs/modules/Progress/Progress-test.js
index 75d7a3f043..5c71fa6a01 100644
--- a/test/specs/modules/Progress/Progress-test.js
+++ b/test/specs/modules/Progress/Progress-test.js
@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Progress', () => {
   common.isConformant(Progress)
+  common.forwardsRef(Progress)
   common.hasUIClassName(Progress)
   common.rendersChildren(Progress)
 
@@ -41,26 +42,26 @@ describe('Progress', () => {
     it('applies the success class when percent >= 100%', () => {
       const wrapper = shallow(<Progress autoSuccess />)
 
-      wrapper.setProps({ percent: 100, autoSuccess: true }).should.have.have.className('success')
+      wrapper.setProps({ percent: 100, autoSuccess: true })
+      wrapper.should.have.have.className('success')
 
-      wrapper.setProps({ percent: 99, autoSuccess: true }).should.not.have.have.className('success')
+      wrapper.setProps({ percent: 99, autoSuccess: true })
+      wrapper.should.not.have.have.className('success')
 
-      wrapper.setProps({ percent: 101, autoSuccess: true }).should.have.have.className('success')
+      wrapper.setProps({ percent: 101, autoSuccess: true })
+      wrapper.should.have.have.className('success')
     })
     it('applies the success class when value >= total', () => {
       const wrapper = shallow(<Progress autoSuccess />)
 
-      wrapper
-        .setProps({ total: 1, value: 1, autoSuccess: true })
-        .should.have.have.className('success')
+      wrapper.setProps({ total: 1, value: 1, autoSuccess: true })
+      wrapper.should.have.have.className('success')
 
-      wrapper
-        .setProps({ total: 1, value: 0, autoSuccess: true })
-        .should.not.have.have.className('success')
+      wrapper.setProps({ total: 1, value: 0, autoSuccess: true })
+      wrapper.should.not.have.have.className('success')
 
-      wrapper
-        .setProps({ total: 1, value: 2, autoSuccess: true })
-        .should.have.have.className('success')
+      wrapper.setProps({ total: 1, value: 2, autoSuccess: true })
+      wrapper.should.have.have.className('success')
     })
   })
 
diff --git a/test/specs/modules/Rating/Rating-test.js b/test/specs/modules/Rating/Rating-test.js
index 38d7c5aec3..c1235f71c9 100644
--- a/test/specs/modules/Rating/Rating-test.js
+++ b/test/specs/modules/Rating/Rating-test.js
@@ -8,6 +8,7 @@ import { sandbox } from 'test/utils'
 
 describe('Rating', () => {
   common.isConformant(Rating)
+  common.forwardsRef(Rating)
   common.hasUIClassName(Rating)
 
   common.propKeyOnlyToClassName(Rating, 'disabled')
diff --git a/test/specs/modules/Rating/RatingIcon-test.js b/test/specs/modules/Rating/RatingIcon-test.js
index 549407ead5..ecda77ce74 100644
--- a/test/specs/modules/Rating/RatingIcon-test.js
+++ b/test/specs/modules/Rating/RatingIcon-test.js
@@ -7,6 +7,7 @@ import { sandbox } from 'test/utils'
 
 describe('RatingIcon', () => {
   common.isConformant(RatingIcon)
+  common.forwardsRef(RatingIcon, { tagName: 'i' })
 
   common.propKeyOnlyToClassName(RatingIcon, 'active')
   common.propKeyOnlyToClassName(RatingIcon, 'selected')
diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js
index fd9f9d4f64..897f91229a 100644
--- a/test/specs/modules/Search/Search-test.js
+++ b/test/specs/modules/Search/Search-test.js
@@ -26,8 +26,6 @@ const wrapperMount = (node, opts) => {
   wrapper = mount(node, { ...opts, attachTo })
   return wrapper
 }
-const wrapperShallow = (...args) => (wrapper = shallow(...args))
-const wrapperRender = (...args) => (wrapper = render(...args))
 
 // ----------------------------------------
 // Options
@@ -78,6 +76,7 @@ describe('Search', () => {
   })
 
   common.isConformant(Search)
+  common.forwardsRef(Search)
   common.hasSubcomponents(Search, [SearchCategory, SearchResult, SearchResults])
   common.hasUIClassName(Search)
 
@@ -105,26 +104,35 @@ describe('Search', () => {
 
   describe('isMouseDown', () => {
     it('tracks when the mouse is down', () => {
-      wrapperShallow(<Search />).simulate('mousedown')
+      // To understand this test please check componentDidUpdate() on Search component
+      wrapperMount(<Search minCharacters={0} />)
+      searchResultsIsClosed()
 
-      wrapper.instance().isMouseDown.should.equal(true)
+      // When ".isMouseDown === false" a focus event will not open Search results
+      wrapper.simulate('mousedown')
+      wrapper.simulate('focus')
+      searchResultsIsClosed()
 
-      domEvent.mouseUp(document)
+      // Reset to default component state
+      wrapper.simulate('blur')
+      domEvent.mouseUp(document.body)
 
-      wrapper.instance().isMouseDown.should.equal(false)
+      // When ".isMouseDown === true" a focus event will open Search results
+      wrapper.simulate('focus')
+      searchResultsIsOpen()
     })
   })
 
   describe('icon', () => {
     it('defaults to a search icon', () => {
       Search.defaultProps.icon.should.equal('search')
-      wrapperRender(<Search />).should.contain.descendants('.search.icon')
+      wrapperMount(<Search />).should.contain.descendants('.search.icon')
     })
   })
 
   describe('active item', () => {
     it('defaults to no result active', () => {
-      wrapperRender(<Search results={options} minCharacters={0} />).should.not.contain.descendants(
+      wrapperMount(<Search results={options} minCharacters={0} />).should.not.contain.descendants(
         '.result.active',
       )
     })
@@ -232,7 +240,7 @@ describe('Search', () => {
     })
     it('uses custom renderer', () => {
       const resultSpy = sandbox.spy(() => <div className='custom-result' />)
-      wrapperRender(<Search results={options} minCharacters={0} resultRenderer={resultSpy} />)
+      wrapperMount(<Search results={options} minCharacters={0} resultRenderer={resultSpy} />)
 
       resultSpy.should.have.been.called.exactly(options.length)
 
@@ -256,7 +264,7 @@ describe('Search', () => {
     }, {})
 
     it('defaults to the first item with selectFirstResult', () => {
-      wrapperShallow(
+      wrapperMount(
         <Search results={categoryOptions} category minCharacters={0} selectFirstResult />,
       )
 
@@ -315,7 +323,7 @@ describe('Search', () => {
     it('uses custom renderer', () => {
       const categorySpy = sandbox.spy(() => <div className='custom-category' />)
       const resultSpy = sandbox.spy(() => <div className='custom-result' />)
-      wrapperRender(
+      wrapperMount(
         <Search
           results={categoryOptions}
           category
@@ -445,24 +453,24 @@ describe('Search', () => {
 
   describe('open', () => {
     it('defaultOpen opens the menu when true', () => {
-      wrapperShallow(<Search results={options} minCharacters={0} defaultOpen />)
+      wrapperMount(<Search results={options} minCharacters={0} defaultOpen />)
       searchResultsIsOpen()
     })
     it('defaultOpen stays open on focus', () => {
-      wrapperShallow(<Search results={options} minCharacters={0} defaultOpen />)
+      wrapperMount(<Search results={options} minCharacters={0} defaultOpen />)
       wrapper.simulate('focus')
       searchResultsIsOpen()
     })
     it('defaultOpen closes the menu when false', () => {
-      wrapperShallow(<Search results={options} minCharacters={0} defaultOpen={false} />)
+      wrapperMount(<Search results={options} minCharacters={0} defaultOpen={false} />)
       searchResultsIsClosed()
     })
     it('opens the menu when true', () => {
-      wrapperShallow(<Search results={options} minCharacters={0} open />)
+      wrapperMount(<Search results={options} minCharacters={0} open />)
       searchResultsIsOpen()
     })
     it('closes the menu when false', () => {
-      wrapperShallow(<Search results={options} minCharacters={0} open={false} />)
+      wrapperMount(<Search results={options} minCharacters={0} open={false} />)
       searchResultsIsClosed()
     })
     it('closes the menu when toggled from true to false', () => {
@@ -619,30 +627,33 @@ describe('Search', () => {
 
   describe('results prop', () => {
     it('adds the onClick handler to all items', () => {
-      wrapperShallow(<Search results={options} minCharacters={0} />)
+      wrapperMount(<Search results={options} minCharacters={0} />)
         .find('SearchResult')
         .everyWhere((item) => item.should.have.prop('onClick'))
     })
-    it('calls handleItemClick when an item is clicked', () => {
-      wrapperMount(<Search results={options} minCharacters={0} />)
 
-      const instance = wrapper.instance()
-      sandbox.spy(instance, 'handleItemClick')
+    // TODO: find out how to enable this test
+    // it('calls handleItemClick when an item is clicked', () => {
+    //   wrapperMount(<Search results={options} minCharacters={0} />)
+    //
+    //   const instance = wrapper.instance()
+    //   sandbox.spy(instance, 'handleItemClick')
+    //
+    //   // open
+    //   openSearchResults()
+    //   searchResultsIsOpen()
+    //
+    //   instance.handleItemClick.should.not.have.been.called()
+    //
+    //   // click random item
+    //   wrapper
+    //     .find('SearchResult')
+    //     .at(_.random(0, options.length - 1))
+    //     .simulate('click', nativeEvent)
+    //
+    //   instance.handleItemClick.should.have.been.calledOnce()
+    // })
 
-      // open
-      openSearchResults()
-      searchResultsIsOpen()
-
-      instance.handleItemClick.should.not.have.been.called()
-
-      // click random item
-      wrapper
-        .find('SearchResult')
-        .at(_.random(0, options.length - 1))
-        .simulate('click', nativeEvent)
-
-      instance.handleItemClick.should.have.been.calledOnce()
-    })
     it('renders new options when options change', () => {
       const customOptions = [
         { title: 'abra', description: 'abra' },
@@ -669,7 +680,7 @@ describe('Search', () => {
         { title: 'cadabra', description: 'cadabra', 'data-foo': 'someValue' },
         { title: 'bang', description: 'bang', 'data-foo': 'someValue' },
       ]
-      wrapperShallow(<Search results={customOptions} />)
+      wrapperMount(<Search results={customOptions} />)
         .find('SearchResult')
         .everyWhere((item) => item.should.have.prop('data-foo', 'someValue'))
     })
@@ -754,7 +765,7 @@ describe('Search', () => {
     })
 
     it(`"placeholder" in passed to an "input"`, () => {
-      wrapperMount(<Search placeholder="foo" />)
+      wrapperMount(<Search placeholder='foo' />)
       const input = wrapper.find('input')
 
       input.should.have.prop('placeholder', 'foo')
diff --git a/test/specs/modules/Search/SearchCategory-test.js b/test/specs/modules/Search/SearchCategory-test.js
index 129f1c634a..063e2b89c9 100644
--- a/test/specs/modules/Search/SearchCategory-test.js
+++ b/test/specs/modules/Search/SearchCategory-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('SearchCategory', () => {
   common.isConformant(SearchCategory)
+  common.forwardsRef(SearchCategory)
   common.rendersChildren(SearchCategory)
 
   describe('children', () => {
diff --git a/test/specs/modules/Search/SearchCategoryLayout-test.js b/test/specs/modules/Search/SearchCategoryLayout-test.js
new file mode 100644
index 0000000000..e904ea00dd
--- /dev/null
+++ b/test/specs/modules/Search/SearchCategoryLayout-test.js
@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import SearchCategoryLayout from 'src/modules/Search/SearchCategoryLayout'
+import * as common from 'test/specs/commonTests'
+
+const requiredProps = {
+  categoryContent: <div />,
+  resultsContent: <div />,
+}
+
+describe('SearchCategoryLayout', () => {
+  common.isConformant(SearchCategoryLayout, { requiredProps, rendersChildren: false })
+})
diff --git a/test/specs/modules/Search/SearchResult-test.js b/test/specs/modules/Search/SearchResult-test.js
index 2daf7f5f17..5a70631f75 100644
--- a/test/specs/modules/Search/SearchResult-test.js
+++ b/test/specs/modules/Search/SearchResult-test.js
@@ -1,9 +1,23 @@
+import React from 'react'
+
 import SearchResult from 'src/modules/Search/SearchResult'
 import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
 
 const requiredProps = { title: '' }
 
 describe('SearchResult', () => {
   common.isConformant(SearchResult, { requiredProps })
+  common.forwardsRef(SearchResult, { requiredProps })
   common.propKeyOnlyToClassName(SearchResult, 'active', { requiredProps })
+
+  describe('onClick', () => {
+    it('is called with (e, data) when clicked', () => {
+      const onClick = sandbox.spy()
+      mount(<SearchResult onClick={onClick} {...requiredProps} />).simulate('click')
+
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch({ type: 'click' }, requiredProps)
+    })
+  })
 })
diff --git a/test/specs/modules/Search/SearchResults-test.js b/test/specs/modules/Search/SearchResults-test.js
index 5b53f10f83..c86c31b68f 100644
--- a/test/specs/modules/Search/SearchResults-test.js
+++ b/test/specs/modules/Search/SearchResults-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('SearchResults', () => {
   common.isConformant(SearchResults)
+  common.forwardsRef(SearchResults)
   common.rendersChildren(SearchResults)
 })
diff --git a/test/specs/modules/Sidebar/Sidebar-test.js b/test/specs/modules/Sidebar/Sidebar-test.js
index 8e38e944ad..21afd96f93 100644
--- a/test/specs/modules/Sidebar/Sidebar-test.js
+++ b/test/specs/modules/Sidebar/Sidebar-test.js
@@ -2,10 +2,11 @@ import React from 'react'
 
 import Sidebar from 'src/modules/Sidebar/Sidebar'
 import * as common from 'test/specs/commonTests'
-import { domEvent, sandbox } from 'test/utils'
+import { assertWithTimeout, domEvent, sandbox } from 'test/utils'
 
 describe('Sidebar', () => {
   common.isConformant(Sidebar)
+  common.forwardsRef(Sidebar)
   common.hasUIClassName(Sidebar)
   common.rendersChildren(Sidebar)
 
@@ -23,12 +24,17 @@ describe('Sidebar', () => {
   common.propValueOnlyToClassName(Sidebar, 'width', ['very thin', 'thin', 'wide', 'very wide'])
 
   describe('componentWillUnmount', () => {
-    it('will call "clearTimeout"', () => {
+    it('will call "clearTimeout"', (done) => {
       const clear = sandbox.spy(window, 'clearTimeout')
       const wrapper = mount(<Sidebar />)
 
+      // start animation
       wrapper.setProps({ visible: true })
-      clear.should.have.been.calledOnce()
+      wrapper.unmount()
+
+      assertWithTimeout(() => {
+        clear.should.have.been.called()
+      }, done)
     })
   })
 
diff --git a/test/specs/modules/Sidebar/SidebarPushable-test.js b/test/specs/modules/Sidebar/SidebarPushable-test.js
index a1ed8ee0aa..5ab1a9c00f 100644
--- a/test/specs/modules/Sidebar/SidebarPushable-test.js
+++ b/test/specs/modules/Sidebar/SidebarPushable-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('SidebarPushable', () => {
   common.isConformant(SidebarPushable)
+  common.forwardsRef(SidebarPushable)
   common.rendersChildren(SidebarPushable)
 })
diff --git a/test/specs/modules/Sidebar/SidebarPusher-test.js b/test/specs/modules/Sidebar/SidebarPusher-test.js
index f1394a0a23..1787971775 100644
--- a/test/specs/modules/Sidebar/SidebarPusher-test.js
+++ b/test/specs/modules/Sidebar/SidebarPusher-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('SidebarPusher', () => {
   common.isConformant(SidebarPusher)
+  common.forwardsRef(SidebarPusher)
   common.rendersChildren(SidebarPusher)
 
   common.propKeyOnlyToClassName(SidebarPusher, 'dimmed')
diff --git a/test/specs/modules/Sticky/Sticky-test.js b/test/specs/modules/Sticky/Sticky-test.js
index 4c17134209..6e3b44c429 100644
--- a/test/specs/modules/Sticky/Sticky-test.js
+++ b/test/specs/modules/Sticky/Sticky-test.js
@@ -9,9 +9,31 @@ let contextEl
 let wrapper
 let positions
 
-const mockRect = (values = {}) => ({ getBoundingClientRect: () => values })
+const mockContextEl = (values = {}) => (contextEl = { getBoundingClientRect: () => values })
+
+const mockTriggerEl = (values = {}) => {
+  const wrapperEl = wrapper.getDOMNode()
+  const triggerEl = wrapperEl.childNodes[0]
+
+  // try to remove any existing spy in case it exists
+  try {
+    triggerEl.getBoundingClientRect.restore()
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+  sandbox.stub(triggerEl, 'getBoundingClientRect').callsFake(() => values)
+}
+
+const mockStickyEl = (values = {}) => {
+  const wrapperEl = wrapper.getDOMNode()
+  const stickyEl = wrapperEl.childNodes[1]
 
-const mockContextEl = (values = {}) => (contextEl = mockRect(values))
+  // try to remove any existing spy in case it exists
+  try {
+    stickyEl.getBoundingClientRect.restore()
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+  sandbox.stub(stickyEl, 'getBoundingClientRect').callsFake(() => values)
+}
 
 const mockPositions = ({ bottomOffset = 5, offset = 5, height = 5 } = {}) =>
   (positions = {
@@ -25,11 +47,13 @@ const wrapperMount = (...args) => (wrapper = mount(...args))
 // Scroll to the top of the screen
 const scrollToTop = () => {
   const { bottomOffset, height, offset } = positions
-  const instance = wrapper.instance()
 
-  wrapper.setProps({ context: mockRect({ bottom: height + offset + bottomOffset }) })
-  instance.triggerRef = { current: mockRect({ top: offset }) }
-  instance.stickyRef = { current: mockRect({ height, top: offset }) }
+  wrapper.setProps({
+    context: { getBoundingClientRect: () => ({ bottom: height + offset + bottomOffset }) },
+  })
+
+  mockTriggerEl({ top: offset })
+  mockStickyEl({ height, top: offset })
 
   domEvent.scroll(window)
 }
@@ -37,11 +61,13 @@ const scrollToTop = () => {
 // Scroll until the trigger is not visible
 const scrollAfterTrigger = () => {
   const { bottomOffset, height, offset } = positions
-  const instance = wrapper.instance()
 
-  wrapper.setProps({ context: mockRect({ bottom: window.innerHeight - bottomOffset + 1 }) })
-  instance.triggerRef = { current: mockRect({ top: offset - 1 }) }
-  instance.stickyRef = { current: mockRect({ height }) }
+  wrapper.setProps({
+    context: { getBoundingClientRect: () => ({ bottom: window.innerHeight - bottomOffset + 1 }) },
+  })
+
+  mockTriggerEl({ top: offset - 1 })
+  mockStickyEl({ height })
 
   domEvent.scroll(window)
 }
@@ -49,11 +75,11 @@ const scrollAfterTrigger = () => {
 // Scroll until the context bottom is not visible
 const scrollAfterContext = () => {
   const { height, offset } = positions
-  const instance = wrapper.instance()
 
-  wrapper.setProps({ context: mockRect({ bottom: -1 }) })
-  instance.triggerRef = { current: mockRect({ top: offset - 1 }) }
-  instance.stickyRef = { current: mockRect({ height }) }
+  wrapper.setProps({ context: { getBoundingClientRect: () => ({ bottom: -1 }) } })
+
+  mockTriggerEl({ top: offset - 1 })
+  mockStickyEl({ height })
 
   domEvent.scroll(window)
 }
@@ -61,17 +87,18 @@ const scrollAfterContext = () => {
 // Scroll to the last part of the context
 const scrollToContextBottom = () => {
   const { height, offset } = positions
-  const instance = wrapper.instance()
 
-  instance.triggerRef = { current: mockRect({ top: offset - 1 }) }
-  instance.stickyRef = { current: mockRect({ height }) }
-  wrapper.setProps({ context: mockRect({ bottom: height + 1 }) })
+  wrapper.setProps({ context: { getBoundingClientRect: () => ({ bottom: height + 1 }) } })
+
+  mockTriggerEl({ top: offset - 1 })
+  mockStickyEl({ height })
 
   domEvent.scroll(window)
 }
 
 describe('Sticky', () => {
   common.isConformant(Sticky)
+  common.forwardsRef(Sticky, { requiredProps: { active: false } })
   common.rendersChildren(Sticky, {
     rendersContent: false,
   })
@@ -109,13 +136,14 @@ describe('Sticky', () => {
 
     it('should not handle update on mount when not active', () => {
       const onTop = sandbox.spy()
-      mount(<Sticky active={false} context={mockContextEl()} onTop={onTop} />)
+      wrapperMount(<Sticky active={false} context={mockContextEl()} onTop={onTop} />)
 
       onTop.should.have.not.been.called()
     })
 
     it('fires event when changes to true', () => {
       const onTop = sandbox.spy()
+
       wrapperMount(<Sticky active={false} context={mockContextEl()} onTop={onTop} />)
       onTop.should.have.not.been.called()
 
@@ -126,8 +154,10 @@ describe('Sticky', () => {
     it('omits event and removes styles when changes to false', () => {
       const onStick = sandbox.spy()
       const onUnStick = sandbox.spy()
+
       mockContextEl()
       mockPositions({ bottomOffset: 10, height: 50 })
+
       wrapperMount(
         <Sticky {...positions} context={contextEl} onStick={onStick} onUnstick={onUnStick} />,
       )
@@ -135,6 +165,7 @@ describe('Sticky', () => {
       _.forEach(['ui', 'sticky', 'fixed', 'top'], (className) =>
         wrapper.childAt(0).childAt(1).should.have.className(className),
       )
+
       onStick.should.have.been.calledOnce()
       onStick.should.have.been.calledWithMatch(undefined, positions)
 
@@ -159,6 +190,7 @@ describe('Sticky', () => {
     it('should stick to top of screen', () => {
       mockContextEl()
       mockPositions({ bottomOffset: 12, height: 200, offset: 12 })
+
       wrapperMount(<Sticky {...positions} context={contextEl} />)
 
       // Scroll after trigger
@@ -167,6 +199,7 @@ describe('Sticky', () => {
       _.forEach(['ui', 'sticky', 'fixed', 'top'], (className) =>
         wrapper.childAt(0).childAt(1).should.have.className(className),
       )
+
       wrapper.childAt(0).childAt(1).should.have.style('top', '12px')
     })
 
@@ -281,15 +314,18 @@ describe('Sticky', () => {
       scrollAfterTrigger()
 
       wrapper.childAt(0).childAt(1).should.have.style('bottom', '30px')
+
       _.forEach(['ui', 'sticky', 'fixed', 'bottom'], (className) =>
         wrapper.childAt(0).childAt(1).should.have.className(className),
       )
+
       wrapper.childAt(0).childAt(1).should.not.have.style('top')
     })
 
     it('should stop pushing when reaching top', () => {
       mockContextEl()
       mockPositions({ bottomOffset: 10, height: 100, offset: 10 })
+
       wrapperMount(<Sticky {...positions} context={contextEl} pushing />)
 
       scrollAfterTrigger()
@@ -301,36 +337,28 @@ describe('Sticky', () => {
       _.forEach(['ui', 'sticky', 'fixed', 'top'], (className) =>
         wrapper.childAt(0).childAt(1).should.have.className(className),
       )
-      wrapper.childAt(0).childAt(1).should.have.style('top', '10px')
-    })
 
-    it('should return true if oversized', () => {
-      mockContextEl()
-      mockPositions({ bottomOffset: 15, height: 100000, offset: 20 })
-      wrapperMount(<Sticky {...positions} context={contextEl} pushing />)
-
-      scrollAfterTrigger()
-      wrapper.instance().isOversized().should.be.equal(true)
+      wrapper.childAt(0).childAt(1).should.have.style('top', '10px')
     })
   })
 
   describe('scrollContext', () => {
     it('should use window as default', () => {
       const onStick = sandbox.spy()
-      const instance = mount(<Sticky onStick={onStick} />).instance()
 
-      instance.triggerRef = { current: mockRect({ top: -1 }) }
-      domEvent.scroll(window)
+      wrapperMount(<Sticky onStick={onStick} />)
+      mockTriggerEl({ top: -1 })
 
+      domEvent.scroll(window)
       onStick.should.have.been.called()
     })
 
     it('should set a scroll context', () => {
       const div = document.createElement('div')
       const onStick = sandbox.spy()
-      const instance = mount(<Sticky scrollContext={div} onStick={onStick} />).instance()
 
-      instance.triggerRef = { current: mockRect({ top: -1 }) }
+      wrapperMount(<Sticky scrollContext={div} onStick={onStick} />)
+      mockTriggerEl({ top: -1 })
 
       domEvent.scroll(window)
       onStick.should.not.have.been.called()
@@ -342,11 +370,9 @@ describe('Sticky', () => {
     it('should set a scroll context via React refs', () => {
       const scrollContextRef = { current: document.createElement('div') }
       const onStick = sandbox.spy()
-      const instance = mount(
-        <Sticky scrollContext={scrollContextRef} onStick={onStick} />,
-      ).instance()
 
-      instance.triggerRef = { current: mockRect({ top: -1 }) }
+      wrapperMount(<Sticky scrollContext={scrollContextRef} onStick={onStick} />)
+      mockTriggerEl({ top: -1 })
 
       domEvent.scroll(window)
       onStick.should.not.have.been.called()
@@ -357,9 +383,9 @@ describe('Sticky', () => {
 
     it('should not call onStick when context is null', () => {
       const onStick = sandbox.spy()
-      wrapperMount(<Sticky scrollContext={null} onStick={onStick} />)
 
-      wrapper.instance().triggerRef = { current: mockRect({ top: -1 }) }
+      wrapperMount(<Sticky scrollContext={null} onStick={onStick} />)
+      mockTriggerEl({ top: -1 })
 
       domEvent.scroll(document)
       onStick.should.not.have.been.called()
@@ -371,28 +397,11 @@ describe('Sticky', () => {
       wrapperMount(<Sticky scrollContext={null} onStick={onStick} />)
 
       wrapper.setProps({ scrollContext: div })
-      wrapper.instance().triggerRef = { current: mockRect({ top: -1 }) }
+      mockTriggerEl({ top: -1 })
 
       domEvent.scroll(div)
       onStick.should.have.been.called()
     })
-
-    it('should not call onStick when scrollContext changes and component is unmounted', () => {
-      const div = document.createElement('div')
-      const onStick = sandbox.spy()
-      const renderedComponent = mount(<Sticky scrollContext={null} onStick={onStick} />)
-      const instance = renderedComponent.instance()
-
-      instance.triggerRef = { current: mockRect({ top: -1 }) }
-      renderedComponent.setProps({ scrollContext: div })
-      renderedComponent.unmount()
-
-      domEvent.scroll(div)
-      onStick.should.not.have.been.called()
-
-      domEvent.scroll(document)
-      onStick.should.not.have.been.called()
-    })
   })
 
   describe('styleElement', () => {
@@ -403,38 +412,4 @@ describe('Sticky', () => {
       element.should.have.style('z-index', '10')
     })
   })
-
-  describe('update', () => {
-    it('is called on scroll', () => {
-      const instance = mount(<Sticky />).instance()
-      const update = sandbox.spy(instance, 'update')
-
-      domEvent.scroll(window)
-      update.should.have.been.calledOnce()
-    })
-
-    it('is called on resize', () => {
-      const instance = mount(<Sticky />).instance()
-      const update = sandbox.spy(instance, 'update')
-
-      domEvent.resize(window)
-      update.should.have.been.calledOnce()
-    })
-
-    it('is not called after unmount', (done) => {
-      window.requestAnimationFrame.restore()
-      sandbox.stub(window, 'requestAnimationFrame').callsFake((fn) => setTimeout(fn, 0))
-      sandbox.stub(window, 'cancelAnimationFrame').callsFake((id) => clearTimeout(id))
-
-      const instance = wrapperMount(<Sticky />).instance()
-      const update = sandbox.spy(instance, 'update')
-
-      domEvent.resize(window)
-      wrapper.unmount()
-      window.requestAnimationFrame(() => {
-        update.should.not.have.been.called()
-        done()
-      })
-    })
-  })
 })
diff --git a/test/specs/modules/Tab/Tab-test.js b/test/specs/modules/Tab/Tab-test.js
index 5350952638..14bfcf1003 100644
--- a/test/specs/modules/Tab/Tab-test.js
+++ b/test/specs/modules/Tab/Tab-test.js
@@ -7,6 +7,8 @@ import { sandbox } from 'test/utils'
 
 describe('Tab', () => {
   common.isConformant(Tab)
+  common.forwardsRef(Tab)
+  common.forwardsRef(Tab, { requiredProps: { menu: { vertical: true } } })
   common.hasSubcomponents(Tab, [TabPane])
 
   const panes = [
diff --git a/test/specs/modules/Tab/TabPane-test.js b/test/specs/modules/Tab/TabPane-test.js
index 8bdb642cc6..5e69a69f68 100644
--- a/test/specs/modules/Tab/TabPane-test.js
+++ b/test/specs/modules/Tab/TabPane-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('TabPane', () => {
   common.isConformant(TabPane)
+  common.forwardsRef(TabPane)
 
   common.implementsCreateMethod(TabPane)
 
diff --git a/test/specs/modules/Transition/Transition-test.js b/test/specs/modules/Transition/Transition-test.js
index 258cc6bc15..b951aae78b 100644
--- a/test/specs/modules/Transition/Transition-test.js
+++ b/test/specs/modules/Transition/Transition-test.js
@@ -8,7 +8,6 @@ import {
   TRANSITION_STATUS_ENTERING,
   TRANSITION_STATUS_EXITED,
   TRANSITION_STATUS_EXITING,
-  TRANSITION_STATUS_UNMOUNTED,
 } from 'src/modules/Transition/utils/computeStatuses'
 import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'
@@ -39,12 +38,12 @@ describe('Transition', () => {
           </Transition>,
         )
 
-        wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+        wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
         animation.split(' ').forEach((className) => wrapper.should.have.className(className))
         wrapper.should.have.className('in')
 
         wrapper.setProps({ visible: false })
-        wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+        wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
         animation.split(' ').forEach((className) => wrapper.should.have.className(className))
         wrapper.should.have.className('out')
       })
@@ -58,12 +57,12 @@ describe('Transition', () => {
           </Transition>,
         )
 
-        wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+        wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
         wrapper.should.have.className(animation)
         wrapper.should.not.have.className('in')
 
         wrapper.setProps({ visible: false })
-        wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+        wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
         wrapper.should.have.className(animation)
         wrapper.should.not.have.className('out')
       })
@@ -76,11 +75,11 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
       wrapper.should.have.className('jump')
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
       wrapper.should.have.className('jump')
     })
   })
@@ -153,11 +152,11 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
       wrapper.should.have.className('in')
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
       wrapper.should.have.className('out')
     })
 
@@ -168,11 +167,11 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
       wrapper.should.have.not.className('in')
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
       wrapper.should.have.not.className('out')
     })
   })
@@ -205,8 +204,8 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERED)
-      wrapper.should.have.not.state('nextStatus')
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERED)
+      wrapper.find('p').should.not.have.data('test-next-status')
     })
 
     it('sets statuses when `visible` is false', () => {
@@ -216,8 +215,7 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_UNMOUNTED)
-      wrapper.should.have.not.state('nextStatus')
+      wrapper.should.have.not.descendants('p')
     })
 
     it('sets statuses when mount is disabled', () => {
@@ -227,8 +225,8 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITED)
-      wrapper.should.have.not.state('nextStatus')
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITED)
+      wrapper.find('p').should.not.have.data('test-next-status')
     })
   })
 
@@ -250,7 +248,7 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
       wrapper.should.have.style('animation-duration', '500ms')
     })
 
@@ -261,7 +259,7 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
       wrapper.should.have.style('animation-duration', '1000ms')
     })
 
@@ -272,7 +270,7 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
       wrapper.should.have.style('animation-duration', '2000ms')
     })
 
@@ -283,7 +281,7 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITED)
       wrapper.should.not.have.style('animation-duration')
     })
 
@@ -295,7 +293,7 @@ describe('Transition', () => {
       )
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
       wrapper.should.have.style('animation-duration')
     })
 
@@ -306,7 +304,7 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
       wrapper.should.have.style('animation-duration', '1000ms')
     })
 
@@ -318,7 +316,7 @@ describe('Transition', () => {
       )
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
       wrapper.should.have.style('animation-duration', '1000ms')
     })
   })
@@ -331,11 +329,11 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_EXITED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_EXITED)
     })
 
     it('updates status when set to false while ENTERED', () => {
@@ -344,11 +342,11 @@ describe('Transition', () => {
           <p />
         </Transition>,
       )
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERED)
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_EXITED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_EXITED)
     })
 
     it('updates status when set to true while UNMOUNTED', () => {
@@ -357,12 +355,11 @@ describe('Transition', () => {
           <p />
         </Transition>,
       )
-
-      wrapper.should.have.state('status', TRANSITION_STATUS_UNMOUNTED)
+      wrapper.should.have.not.descendants('p')
 
       wrapper.setProps({ visible: true })
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_ENTERED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_ENTERED)
     })
 
     it('updates next status when set to true while performs an ENTERING transition', (done) => {
@@ -372,11 +369,11 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_EXITED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_EXITED)
     })
 
     it('updates next status when set to true while performs an EXITING transition', (done) => {
@@ -386,15 +383,15 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERED)
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_EXITED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_EXITED)
 
       wrapper.setProps({ visible: true })
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_ENTERED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_ENTERED)
     })
   })
 
@@ -474,14 +471,14 @@ describe('Transition', () => {
       )
 
       wrapper.setProps({ visible: false })
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
 
       setTimeout(() => {
-        wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
+        wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
       }, 100)
       setTimeout(() => {
         onHide.should.have.been.calledOnce()
-        wrapper.should.have.state('status', TRANSITION_STATUS_EXITED)
+        wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITED)
 
         done()
       }, 200)
@@ -498,13 +495,13 @@ describe('Transition', () => {
 
       wrapper.setProps({ visible: false })
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_EXITED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_EXITED)
 
       wrapper.setProps({})
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_EXITING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_EXITED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_EXITED)
 
       onStart.should.have.been.calledOnce()
       done()
@@ -541,14 +538,14 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
 
       setTimeout(() => {
-        wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
+        wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
       }, 100)
       setTimeout(() => {
         onShow.should.have.been.calledOnce()
-        wrapper.should.have.state('status', TRANSITION_STATUS_ENTERED)
+        wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERED)
         done()
       }, 200)
     })
@@ -585,13 +582,13 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_ENTERED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_ENTERED)
 
       wrapper.setProps({})
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_ENTERED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_ENTERED)
 
       onStart.should.have.been.calledOnce()
       done()
@@ -619,38 +616,34 @@ describe('Transition', () => {
         </Transition>,
       )
 
-      wrapper.should.have.state('status', TRANSITION_STATUS_ENTERING)
-      wrapper.should.have.state('nextStatus', TRANSITION_STATUS_ENTERED)
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_ENTERING)
+      wrapper.find('p').should.have.data('test-next-status', TRANSITION_STATUS_ENTERED)
     })
   })
 
   describe('unmountOnHide', () => {
-    it('unmounts child when true', (done) => {
-      const onHide = () => {
-        wrapper.should.have.state('status', TRANSITION_STATUS_UNMOUNTED)
-        done()
-      }
-
+    it('unmounts child when true', () => {
       wrapperMount(
-        <Transition duration={0} onHide={onHide} transitionOnMount={false} unmountOnHide>
+        <Transition duration={0} transitionOnMount={false} unmountOnHide>
           <p />
         </Transition>,
       )
+
       wrapper.setProps({ visible: false })
+      wrapper.update()
+      wrapper.should.have.not.descendants('p')
     })
 
-    it('lefts mounted when false', (done) => {
-      const onHide = () => {
-        wrapper.should.have.state('status', TRANSITION_STATUS_EXITED)
-        done()
-      }
-
+    it('lefts mounted when false', () => {
       wrapperMount(
-        <Transition duration={5} onHide={onHide} transitionOnMount={false} unmountOnHide={false}>
+        <Transition duration={0} transitionOnMount={false} unmountOnHide={false}>
           <p />
         </Transition>,
       )
+
       wrapper.setProps({ visible: false })
+      wrapper.update()
+      wrapper.find('p').should.have.data('test-status', TRANSITION_STATUS_EXITED)
     })
   })
 })
diff --git a/test/specs/modules/Transition/TransitionGroup-test.js b/test/specs/modules/Transition/TransitionGroup-test.js
index 448a1bbcb8..471ca76978 100644
--- a/test/specs/modules/Transition/TransitionGroup-test.js
+++ b/test/specs/modules/Transition/TransitionGroup-test.js
@@ -7,13 +7,13 @@ import * as common from 'test/specs/commonTests'
 let wrapper
 
 const wrapperMount = (...args) => (wrapper = mount(...args))
-const wrapperShallow = (...args) => (wrapper = shallow(...args))
 
 describe('TransitionGroup', () => {
   common.isConformant(TransitionGroup, {
     rendersFragmentByDefault: true,
     rendersChildren: false,
   })
+  common.forwardsRef(TransitionGroup, { requiredProps: { as: 'div' } })
 
   beforeEach(() => {
     wrapper = undefined
@@ -25,50 +25,50 @@ describe('TransitionGroup', () => {
 
   describe('children', () => {
     it('wraps all children to Transition', () => {
-      shallow(
+      wrapperMount(
         <TransitionGroup>
           <div />
           <div />
           <div />
         </TransitionGroup>,
       )
-        .children()
-        .everyWhere((item) => item.type().should.equal(Transition))
+
+      wrapper.children().everyWhere((item) => item.type().should.equal(Transition))
     })
 
     it('passes props to children', () => {
-      shallow(
+      wrapperMount(
         <TransitionGroup animation='scale' directional duration={1500}>
           <div />
           <div />
           <div />
         </TransitionGroup>,
       )
-        .children()
-        .everyWhere((item) => {
-          item.should.have.prop('animation', 'scale')
-          item.should.have.prop('directional', true)
-          item.should.have.prop('duration', 1500)
-          item.type().should.equal(Transition)
-        })
+
+      wrapper.children().everyWhere((item) => {
+        item.should.have.prop('animation', 'scale')
+        item.should.have.prop('directional', true)
+        item.should.have.prop('duration', 1500)
+        item.type().should.equal(Transition)
+      })
     })
 
     it('wraps new child to Transition and sets transitionOnMount to true', () => {
-      wrapperShallow(
+      wrapperMount(
         <TransitionGroup>
           <div key='first' />
         </TransitionGroup>,
       )
       wrapper.setProps({ children: [<div key='first' />, <div key='second' />] })
 
-      const child = wrapper.childAt(1)
-      child.key().should.equal('.$second')
-      child.type().should.equal(Transition)
-      child.should.have.prop('transitionOnMount', true)
+      const secondChild = wrapper.childAt(1)
+      secondChild.key().should.equal('.$second')
+      secondChild.type().should.equal(Transition)
+      secondChild.should.have.prop('transitionOnMount', true)
     })
 
     it('skips invalid children', () => {
-      wrapperShallow(
+      wrapperMount(
         <TransitionGroup>
           <div key='first' />
         </TransitionGroup>,
@@ -81,7 +81,7 @@ describe('TransitionGroup', () => {
     })
 
     it('sets visible to false when child was removed', () => {
-      wrapperShallow(
+      wrapperMount(
         <TransitionGroup>
           <div key='first' />
           <div key='second' />
diff --git a/test/specs/views/Card/Card-test.js b/test/specs/views/Card/Card-test.js
index 2b4f14de10..06f6a54aa0 100644
--- a/test/specs/views/Card/Card-test.js
+++ b/test/specs/views/Card/Card-test.js
@@ -13,6 +13,11 @@ import { sandbox } from 'test/utils'
 
 describe('Card', () => {
   common.isConformant(Card)
+
+  common.forwardsRef(Card)
+  common.forwardsRef(Card, { requiredProps: { children: <span /> } })
+  common.forwardsRef(Card, { requiredProps: { content: faker.lorem.word() } })
+
   common.hasSubcomponents(Card, [CardContent, CardDescription, CardGroup, CardHeader, CardMeta])
   common.hasUIClassName(Card)
   common.rendersChildren(Card)
@@ -45,6 +50,14 @@ describe('Card', () => {
 
       wrapper.should.have.tagName('a')
     })
+
+    it('is called with (e, data) when clicked', () => {
+      const onClick = sandbox.spy()
+      mount(<Card onClick={onClick} />).simulate('click')
+
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch({ type: 'click' }, { onClick })
+    })
   })
 
   describe('extra', () => {
diff --git a/test/specs/views/Card/CardContent-test.js b/test/specs/views/Card/CardContent-test.js
index 94ccbdc66b..c58e562ca6 100644
--- a/test/specs/views/Card/CardContent-test.js
+++ b/test/specs/views/Card/CardContent-test.js
@@ -1,4 +1,6 @@
+import faker from 'faker'
 import _ from 'lodash'
+import React from 'react'
 
 import { SUI } from 'src/lib'
 import CardContent from 'src/views/Card/CardContent'
@@ -9,6 +11,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('CardContent', () => {
   common.isConformant(CardContent)
+  common.forwardsRef(CardContent)
+  common.forwardsRef(CardContent, { requiredProps: { children: <span /> } })
+  common.forwardsRef(CardContent, { requiredProps: { content: faker.lorem.word() } })
   common.rendersChildren(CardContent)
 
   common.implementsShorthandProp(CardContent, {
diff --git a/test/specs/views/Card/CardDescription-test.js b/test/specs/views/Card/CardDescription-test.js
index 4a2b1ca386..9929a6c7a8 100644
--- a/test/specs/views/Card/CardDescription-test.js
+++ b/test/specs/views/Card/CardDescription-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CardDescription', () => {
   common.isConformant(CardDescription)
+  common.forwardsRef(CardDescription)
   common.rendersChildren(CardDescription)
   common.implementsTextAlignProp(CardDescription, _.without(SUI.TEXT_ALIGNMENTS, 'justified'))
 })
diff --git a/test/specs/views/Card/CardGroup-test.js b/test/specs/views/Card/CardGroup-test.js
index fd114d491b..01cff4137b 100644
--- a/test/specs/views/Card/CardGroup-test.js
+++ b/test/specs/views/Card/CardGroup-test.js
@@ -8,6 +8,11 @@ import * as common from 'test/specs/commonTests'
 
 describe('CardGroup', () => {
   common.isConformant(CardGroup)
+
+  common.forwardsRef(CardGroup)
+  common.forwardsRef(CardGroup, { requiredProps: { children: <span /> } })
+  common.forwardsRef(CardGroup, { requiredProps: { content: faker.lorem.word() } })
+
   common.hasUIClassName(CardGroup)
   common.rendersChildren(CardGroup)
 
diff --git a/test/specs/views/Card/CardHeader-test.js b/test/specs/views/Card/CardHeader-test.js
index f39aa80566..45655f99a6 100644
--- a/test/specs/views/Card/CardHeader-test.js
+++ b/test/specs/views/Card/CardHeader-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CardHeader', () => {
   common.isConformant(CardHeader)
+  common.forwardsRef(CardHeader)
   common.rendersChildren(CardHeader)
 
   common.implementsTextAlignProp(CardHeader, _.without(SUI.TEXT_ALIGNMENTS, 'justified'))
diff --git a/test/specs/views/Card/CardMeta-test.js b/test/specs/views/Card/CardMeta-test.js
index 221a82fa3d..834e6df494 100644
--- a/test/specs/views/Card/CardMeta-test.js
+++ b/test/specs/views/Card/CardMeta-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CardMeta', () => {
   common.isConformant(CardMeta)
+  common.forwardsRef(CardMeta)
   common.rendersChildren(CardMeta)
 
   common.implementsTextAlignProp(CardMeta, _.without(SUI.TEXT_ALIGNMENTS, 'justified'))
diff --git a/test/specs/views/Comment/Comment-test.js b/test/specs/views/Comment/Comment-test.js
index ffcc7bbc4b..1fddfd477b 100644
--- a/test/specs/views/Comment/Comment-test.js
+++ b/test/specs/views/Comment/Comment-test.js
@@ -11,6 +11,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Comment', () => {
   common.isConformant(Comment)
+  common.forwardsRef(Comment)
   common.hasSubcomponents(Comment, [
     CommentAction,
     CommentActions,
diff --git a/test/specs/views/Comment/CommentAction-test.js b/test/specs/views/Comment/CommentAction-test.js
index 78a4227f9d..e61a3c1b20 100644
--- a/test/specs/views/Comment/CommentAction-test.js
+++ b/test/specs/views/Comment/CommentAction-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentAction', () => {
   common.isConformant(CommentAction)
+  common.forwardsRef(CommentAction, { tagName: 'a' })
   common.rendersChildren(CommentAction)
 
   it('renders an a element by default', () => {
diff --git a/test/specs/views/Comment/CommentActions-test.js b/test/specs/views/Comment/CommentActions-test.js
index 4404ebcc77..746445045b 100644
--- a/test/specs/views/Comment/CommentActions-test.js
+++ b/test/specs/views/Comment/CommentActions-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentActions', () => {
   common.isConformant(CommentActions)
+  common.forwardsRef(CommentActions)
   common.rendersChildren(CommentActions)
 })
diff --git a/test/specs/views/Comment/CommentAuthor-test.js b/test/specs/views/Comment/CommentAuthor-test.js
index d5055a0bbe..06a8274a49 100644
--- a/test/specs/views/Comment/CommentAuthor-test.js
+++ b/test/specs/views/Comment/CommentAuthor-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentAuthor', () => {
   common.isConformant(CommentAuthor)
+  common.forwardsRef(CommentAuthor)
   common.rendersChildren(CommentAuthor)
 })
diff --git a/test/specs/views/Comment/CommentAvatar-test.js b/test/specs/views/Comment/CommentAvatar-test.js
index 675217c966..ac2b090193 100644
--- a/test/specs/views/Comment/CommentAvatar-test.js
+++ b/test/specs/views/Comment/CommentAvatar-test.js
@@ -8,6 +8,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentAvatar', () => {
   common.isConformant(CommentAvatar)
+  common.forwardsRef(CommentAvatar)
 
   describe('src', () => {
     it('passes to the "img" element', () => {
diff --git a/test/specs/views/Comment/CommentContent-test.js b/test/specs/views/Comment/CommentContent-test.js
index 6ebd14d65c..7048a0da90 100644
--- a/test/specs/views/Comment/CommentContent-test.js
+++ b/test/specs/views/Comment/CommentContent-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentContent', () => {
   common.isConformant(CommentContent)
+  common.forwardsRef(CommentContent)
   common.rendersChildren(CommentContent)
 })
diff --git a/test/specs/views/Comment/CommentGroup-test.js b/test/specs/views/Comment/CommentGroup-test.js
index 601519f7f4..302adf99d2 100644
--- a/test/specs/views/Comment/CommentGroup-test.js
+++ b/test/specs/views/Comment/CommentGroup-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentGroup', () => {
   common.isConformant(CommentGroup)
+  common.forwardsRef(CommentGroup)
   common.rendersChildren(CommentGroup)
 
   common.propKeyOnlyToClassName(CommentGroup, 'collapsed')
diff --git a/test/specs/views/Comment/CommentMetadata-test.js b/test/specs/views/Comment/CommentMetadata-test.js
index e663186724..83ba15e419 100644
--- a/test/specs/views/Comment/CommentMetadata-test.js
+++ b/test/specs/views/Comment/CommentMetadata-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentMetadata', () => {
   common.isConformant(CommentMetadata)
+  common.forwardsRef(CommentMetadata)
   common.rendersChildren(CommentMetadata)
 })
diff --git a/test/specs/views/Comment/CommentText-test.js b/test/specs/views/Comment/CommentText-test.js
index 3b98b34311..43fe224b65 100644
--- a/test/specs/views/Comment/CommentText-test.js
+++ b/test/specs/views/Comment/CommentText-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentText', () => {
   common.isConformant(CommentText)
+  common.forwardsRef(CommentText)
   common.rendersChildren(CommentText)
 })
diff --git a/test/specs/views/Feed/Feed-test.js b/test/specs/views/Feed/Feed-test.js
index 4634c98b75..3558b75b8a 100644
--- a/test/specs/views/Feed/Feed-test.js
+++ b/test/specs/views/Feed/Feed-test.js
@@ -8,6 +8,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('Feed', () => {
   common.isConformant(Feed)
+  common.forwardsRef(Feed)
+  common.forwardsRef(Feed, { requiredProps: { children: <span /> } })
   common.hasUIClassName(Feed)
   common.rendersChildren(Feed, {
     rendersContent: false,
diff --git a/test/specs/views/Feed/FeedContent-test.js b/test/specs/views/Feed/FeedContent-test.js
index e2320d4737..690d376140 100644
--- a/test/specs/views/Feed/FeedContent-test.js
+++ b/test/specs/views/Feed/FeedContent-test.js
@@ -1,3 +1,5 @@
+import * as React from 'react'
+
 import FeedContent from 'src/views/Feed/FeedContent'
 import FeedDate from 'src/views/Feed/FeedDate'
 import FeedSummary from 'src/views/Feed/FeedSummary'
@@ -7,6 +9,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('FeedContent', () => {
   common.isConformant(FeedContent)
+  common.forwardsRef(FeedContent)
+  common.forwardsRef(FeedContent, { requiredProps: { children: <span /> } })
   common.rendersChildren(FeedContent)
 
   common.implementsShorthandProp(FeedContent, {
diff --git a/test/specs/views/Feed/FeedDate-test.js b/test/specs/views/Feed/FeedDate-test.js
index 0433b834a6..74b4fed3cb 100644
--- a/test/specs/views/Feed/FeedDate-test.js
+++ b/test/specs/views/Feed/FeedDate-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('FeedDate', () => {
   common.isConformant(FeedDate)
+  common.forwardsRef(FeedDate)
   common.rendersChildren(FeedDate)
 })
diff --git a/test/specs/views/Feed/FeedEvent-test.js b/test/specs/views/Feed/FeedEvent-test.js
index 844252ca56..7f3e9b2496 100644
--- a/test/specs/views/Feed/FeedEvent-test.js
+++ b/test/specs/views/Feed/FeedEvent-test.js
@@ -8,6 +8,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('FeedEvent', () => {
   common.isConformant(FeedEvent)
+  common.forwardsRef(FeedEvent)
   common.rendersChildren(FeedEvent, {
     rendersContent: false,
   })
diff --git a/test/specs/views/Feed/FeedExtra-test.js b/test/specs/views/Feed/FeedExtra-test.js
index d5c0f2555d..a7ebef0bbb 100644
--- a/test/specs/views/Feed/FeedExtra-test.js
+++ b/test/specs/views/Feed/FeedExtra-test.js
@@ -5,6 +5,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('FeedExtra', () => {
   common.isConformant(FeedExtra)
+  common.forwardsRef(FeedExtra)
+  common.forwardsRef(FeedExtra, { requiredProps: { children: <span /> } })
   common.rendersChildren(FeedExtra)
 
   common.propKeyOnlyToClassName(FeedExtra, 'images')
diff --git a/test/specs/views/Feed/FeedLabel-test.js b/test/specs/views/Feed/FeedLabel-test.js
index 13b6ff277d..843d4e80a1 100644
--- a/test/specs/views/Feed/FeedLabel-test.js
+++ b/test/specs/views/Feed/FeedLabel-test.js
@@ -6,6 +6,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('FeedLabel', () => {
   common.isConformant(FeedLabel)
+  common.forwardsRef(FeedLabel)
+  common.forwardsRef(FeedLabel, { requiredProps: { children: <span /> } })
   common.rendersChildren(FeedLabel)
 
   common.implementsIconProp(FeedLabel, { autoGenerateKey: false })
diff --git a/test/specs/views/Feed/FeedLike-test.js b/test/specs/views/Feed/FeedLike-test.js
index 7c7dfaac72..5096fe297e 100644
--- a/test/specs/views/Feed/FeedLike-test.js
+++ b/test/specs/views/Feed/FeedLike-test.js
@@ -1,8 +1,12 @@
+import * as React from 'react'
+
 import FeedLike from 'src/views/Feed/FeedLike'
 import * as common from 'test/specs/commonTests'
 
 describe('FeedLike', () => {
   common.isConformant(FeedLike)
+  common.forwardsRef(FeedLike, { tagName: 'a' })
+  common.forwardsRef(FeedLike, { requiredProps: { children: <span /> }, tagName: 'a' })
   common.rendersChildren(FeedLike)
 
   common.implementsIconProp(FeedLike, { autoGenerateKey: false })
diff --git a/test/specs/views/Feed/FeedMeta-test.js b/test/specs/views/Feed/FeedMeta-test.js
index 867b1127fc..8286b919b7 100644
--- a/test/specs/views/Feed/FeedMeta-test.js
+++ b/test/specs/views/Feed/FeedMeta-test.js
@@ -1,9 +1,13 @@
+import * as React from 'react'
+
 import FeedMeta from 'src/views/Feed/FeedMeta'
 import FeedLike from 'src/views/Feed/FeedLike'
 import * as common from 'test/specs/commonTests'
 
 describe('FeedMeta', () => {
   common.isConformant(FeedMeta)
+  common.forwardsRef(FeedMeta)
+  common.forwardsRef(FeedMeta, { requiredProps: { children: <span /> } })
   common.rendersChildren(FeedMeta)
 
   common.implementsShorthandProp(FeedMeta, {
diff --git a/test/specs/views/Feed/FeedSummary-test.js b/test/specs/views/Feed/FeedSummary-test.js
index 6dcaa72864..71b9871c28 100644
--- a/test/specs/views/Feed/FeedSummary-test.js
+++ b/test/specs/views/Feed/FeedSummary-test.js
@@ -6,6 +6,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('FeedSummary', () => {
   common.isConformant(FeedSummary)
+  common.forwardsRef(FeedSummary)
+  common.forwardsRef(FeedSummary, { requiredProps: { children: <span /> } })
   common.rendersChildren(FeedSummary)
 
   common.implementsShorthandProp(FeedSummary, {
diff --git a/test/specs/views/Feed/FeedUser-test.js b/test/specs/views/Feed/FeedUser-test.js
index fe8ca70330..2ca9b8dd03 100644
--- a/test/specs/views/Feed/FeedUser-test.js
+++ b/test/specs/views/Feed/FeedUser-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('FeedUser', () => {
   common.isConformant(FeedUser)
+  common.forwardsRef(FeedUser, { tagName: 'a' })
   common.rendersChildren(FeedUser)
 })
diff --git a/test/specs/views/Item/Item-test.js b/test/specs/views/Item/Item-test.js
index 00085818f3..275ae97eb0 100644
--- a/test/specs/views/Item/Item-test.js
+++ b/test/specs/views/Item/Item-test.js
@@ -13,6 +13,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('Item', () => {
   common.isConformant(Item)
+  common.forwardsRef(Item)
+  common.forwardsRef(Item, { requiredProps: { children: <span /> } })
+  common.forwardsRef(Item, { requiredProps: { content: faker.lorem.word() } })
   common.hasSubcomponents(Item, [
     ItemContent,
     ItemDescription,
diff --git a/test/specs/views/Item/ItemContent-test.js b/test/specs/views/Item/ItemContent-test.js
index 927d9f1231..12eb210f5f 100644
--- a/test/specs/views/Item/ItemContent-test.js
+++ b/test/specs/views/Item/ItemContent-test.js
@@ -1,3 +1,6 @@
+import faker from 'faker'
+import React from 'react'
+
 import ItemContent from 'src/views/Item/ItemContent'
 import ItemDescription from 'src/views/Item/ItemDescription'
 import ItemExtra from 'src/views/Item/ItemExtra'
@@ -7,6 +10,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemContent', () => {
   common.isConformant(ItemContent)
+  common.forwardsRef(ItemContent)
+  common.forwardsRef(ItemContent, { requiredProps: { children: <span /> } })
+  common.forwardsRef(ItemContent, { requiredProps: { content: faker.lorem.word() } })
   common.rendersChildren(ItemContent)
 
   common.implementsShorthandProp(ItemContent, {
diff --git a/test/specs/views/Item/ItemDescription-test.js b/test/specs/views/Item/ItemDescription-test.js
index 18caa13656..f2b7637f07 100644
--- a/test/specs/views/Item/ItemDescription-test.js
+++ b/test/specs/views/Item/ItemDescription-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemDescription', () => {
   common.isConformant(ItemDescription)
+  common.forwardsRef(ItemDescription)
   common.rendersChildren(ItemDescription)
 
   common.implementsCreateMethod(ItemDescription)
diff --git a/test/specs/views/Item/ItemExtra-test.js b/test/specs/views/Item/ItemExtra-test.js
index 74547f2295..959770e15b 100644
--- a/test/specs/views/Item/ItemExtra-test.js
+++ b/test/specs/views/Item/ItemExtra-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemExtra', () => {
   common.isConformant(ItemExtra)
+  common.forwardsRef(ItemExtra)
   common.rendersChildren(ItemExtra)
 
   common.implementsCreateMethod(ItemExtra)
diff --git a/test/specs/views/Item/ItemGroup-test.js b/test/specs/views/Item/ItemGroup-test.js
index 97f993a8e3..a9bc5fba86 100644
--- a/test/specs/views/Item/ItemGroup-test.js
+++ b/test/specs/views/Item/ItemGroup-test.js
@@ -5,8 +5,11 @@ import ItemGroup from 'src/views/Item/ItemGroup'
 import * as common from 'test/specs/commonTests'
 
 describe('ItemGroup', () => {
-  common.hasUIClassName(ItemGroup)
   common.isConformant(ItemGroup)
+  common.forwardsRef(ItemGroup)
+  common.forwardsRef(ItemGroup, { requiredProps: { children: <span /> } })
+  common.forwardsRef(ItemGroup, { requiredProps: { content: faker.lorem.word() } })
+  common.hasUIClassName(ItemGroup)
   common.rendersChildren(ItemGroup)
 
   common.propKeyOnlyToClassName(ItemGroup, 'divided')
diff --git a/test/specs/views/Item/ItemHeader-test.js b/test/specs/views/Item/ItemHeader-test.js
index 15b8bbffdd..4e7081f00b 100644
--- a/test/specs/views/Item/ItemHeader-test.js
+++ b/test/specs/views/Item/ItemHeader-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemHeader', () => {
   common.isConformant(ItemHeader)
+  common.forwardsRef(ItemHeader)
   common.rendersChildren(ItemHeader)
 
   common.implementsCreateMethod(ItemHeader)
diff --git a/test/specs/views/Item/ItemImage-test.js b/test/specs/views/Item/ItemImage-test.js
index ac8b4cac66..84ac354361 100644
--- a/test/specs/views/Item/ItemImage-test.js
+++ b/test/specs/views/Item/ItemImage-test.js
@@ -4,6 +4,8 @@ import ItemImage from 'src/views/Item/ItemImage'
 import * as common from 'test/specs/commonTests'
 
 describe('ItemImage', () => {
+  common.isConformant(ItemImage, { rendersChildren: false })
+  common.forwardsRef(ItemImage, { tagName: 'img' })
   common.implementsCreateMethod(ItemImage)
 
   it('renders Image component', () => {
diff --git a/test/specs/views/Item/ItemMeta-test.js b/test/specs/views/Item/ItemMeta-test.js
index 58f2236ac2..8ecbae3766 100644
--- a/test/specs/views/Item/ItemMeta-test.js
+++ b/test/specs/views/Item/ItemMeta-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemMeta', () => {
   common.isConformant(ItemMeta)
+  common.forwardsRef(ItemMeta)
   common.rendersChildren(ItemMeta)
 
   common.implementsCreateMethod(ItemMeta)
diff --git a/test/specs/views/Stastistic/Statistic-test.js b/test/specs/views/Stastistic/Statistic-test.js
index 68db729433..cbaa0f5d49 100644
--- a/test/specs/views/Stastistic/Statistic-test.js
+++ b/test/specs/views/Stastistic/Statistic-test.js
@@ -1,3 +1,4 @@
+import faker from 'faker'
 import _ from 'lodash'
 import React from 'react'
 
@@ -10,6 +11,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('Statistic', () => {
   common.isConformant(Statistic)
+  common.forwardsRef(Statistic)
+  common.forwardsRef(Statistic, { requiredProps: { children: <span /> } })
+  common.forwardsRef(Statistic, { requiredProps: { content: faker.lorem.word() } })
   common.implementsCreateMethod(Statistic)
   common.hasSubcomponents(Statistic, [StatisticGroup, StatisticLabel, StatisticValue])
   common.hasUIClassName(Statistic)
diff --git a/test/specs/views/Stastistic/StatisticGroup-test.js b/test/specs/views/Stastistic/StatisticGroup-test.js
index f6ac62ecd8..681b5865b2 100644
--- a/test/specs/views/Stastistic/StatisticGroup-test.js
+++ b/test/specs/views/Stastistic/StatisticGroup-test.js
@@ -1,3 +1,4 @@
+import faker from 'faker'
 import _ from 'lodash'
 import React from 'react'
 
@@ -7,6 +8,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('StatisticGroup', () => {
   common.isConformant(StatisticGroup)
+  common.forwardsRef(StatisticGroup)
+  common.forwardsRef(StatisticGroup, { requiredProps: { children: <span /> } })
+  common.forwardsRef(StatisticGroup, { requiredProps: { content: faker.lorem.word() } })
   common.hasUIClassName(StatisticGroup)
   common.rendersChildren(StatisticGroup)
 
diff --git a/test/specs/views/Stastistic/StatisticLabel-test.js b/test/specs/views/Stastistic/StatisticLabel-test.js
index 0991a92ed4..052f7629ac 100644
--- a/test/specs/views/Stastistic/StatisticLabel-test.js
+++ b/test/specs/views/Stastistic/StatisticLabel-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('StatisticLabel', () => {
   common.isConformant(StatisticLabel)
+  common.forwardsRef(StatisticLabel)
   common.implementsCreateMethod(StatisticLabel)
   common.rendersChildren(StatisticLabel)
 })
diff --git a/test/specs/views/Stastistic/StatisticValue-test.js b/test/specs/views/Stastistic/StatisticValue-test.js
index 490ee27006..ec239da302 100644
--- a/test/specs/views/Stastistic/StatisticValue-test.js
+++ b/test/specs/views/Stastistic/StatisticValue-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('StatisticValue', () => {
   common.isConformant(StatisticValue)
+  common.forwardsRef(StatisticValue)
   common.implementsCreateMethod(StatisticValue)
   common.rendersChildren(StatisticValue)
 
diff --git a/test/utils/assertBodyClasses.js b/test/utils/assertBodyClasses.js
deleted file mode 100644
index 082c23a09a..0000000000
--- a/test/utils/assertBodyClasses.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Assert whether or not the document.body has the specified HTML classes.
- *
- * @param {string|string[]} classes An array of strings string of HTML classes
- * @param {boolean} [hasClasses=true] Indicating whether to assert "has" or "does not have" classes
- */
-const assertBodyClasses = (classes, hasClasses = true) => {
-  const classesArr = [].concat(classes).join(' ').split(' ')
-
-  classesArr.forEach((className) => {
-    const didFind = document.body.classList.contains(className)
-
-    const message = [
-      `document.body should ${hasClasses ? 'have' : 'not have'} class "${className}",`,
-      `but it ${didFind ? 'has' : 'does not have'} class="${document.body.classList}"`,
-    ].join(' ')
-
-    didFind.should.equal(hasClasses, message)
-  })
-}
-
-export default assertBodyClasses
diff --git a/test/utils/getComponentName.js b/test/utils/getComponentName.js
new file mode 100644
index 0000000000..44d65f084a
--- /dev/null
+++ b/test/utils/getComponentName.js
@@ -0,0 +1,19 @@
+import * as ReactIs from 'react-is'
+
+/**
+ * Gets a proper `displayName` for a component.
+ *
+ * @param {React.ElementType} Component
+ * @return {String}
+ */
+export default function getComponentName(Component) {
+  if (Component.$$typeof === ReactIs.Memo) {
+    return getComponentName(Component.type)
+  }
+
+  if (Component.$$typeof === ReactIs.ForwardRef) {
+    return Component.displayName
+  }
+
+  return Component.prototype?.constructor?.name
+}
diff --git a/test/utils/getComponentProps.js b/test/utils/getComponentProps.js
new file mode 100644
index 0000000000..61b81536ef
--- /dev/null
+++ b/test/utils/getComponentProps.js
@@ -0,0 +1,20 @@
+import * as ReactIs from 'react-is'
+
+/**
+ * Gets proper props for a component.
+ *
+ * @param {React.ElementType} Component
+ * @return {Object}
+ */
+export default function getComponentProps(Component) {
+  if (Component.$$typeof === ReactIs.Memo) {
+    return getComponentProps(Component.type)
+  }
+
+  return {
+    autoControlledProps: Component.autoControlledProps,
+    defaultProps: Component.defaultProps,
+    handledProps: Component.handledProps,
+    propTypes: Component.propTypes,
+  }
+}
diff --git a/test/utils/index.js b/test/utils/index.js
index f751f68108..178a8ef92a 100644
--- a/test/utils/index.js
+++ b/test/utils/index.js
@@ -1,8 +1,9 @@
-export assertBodyClasses from './assertBodyClasses'
 export * from './assertNodeContains'
 export assertWithTimeout from './assertWithTimeout'
 export consoleUtil from './consoleUtil'
 export domEvent from './domEvent'
+export getComponentName from './getComponentName'
+export getComponentProps from './getComponentProps'
 export nestedShallow from './nestedShallow'
 export sandbox from './sandbox'
 export syntheticEvent from './syntheticEvent'
diff --git a/test/utils/nestedShallow.js b/test/utils/nestedShallow.js
index 2ffc5a01ff..1b1c41f3d9 100644
--- a/test/utils/nestedShallow.js
+++ b/test/utils/nestedShallow.js
@@ -1,4 +1,3 @@
-import { Ref } from '@fluentui/react-component-ref'
 import enzyme from 'enzyme'
 import _ from 'lodash'
 import React from 'react'
@@ -10,10 +9,6 @@ const diveToLevel = (wrapper, autoNesting, nestingLevel) => {
     nestedWrapper = nestedWrapper.childAt(0)
   }
 
-  if (autoNesting && nestedWrapper.is(Ref)) {
-    nestedWrapper = nestedWrapper.childAt(0)
-  }
-
   _.times(nestingLevel, () => {
     nestedWrapper = nestedWrapper.childAt(0)
   })
diff --git a/yarn.lock b/yarn.lock
index 145a05eb9e..5c4faf3c50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1100,14 +1100,6 @@
   dependencies:
     "@babel/runtime" "^7.10.4"
 
-"@fluentui/react-component-ref@~0.63.0":
-  version "0.63.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.63.0.tgz#8973552cdeb63363c396ca8bdefdf4ae061687c4"
-  integrity sha512-s4Wawk3Jp/cLRu3QlCtRMm1jYMi8fq7PLd6I2VYb397NgpLdMbO4/edqDHbDhKiVWRIulrOqWlRLR5YXjkXQ7A==
-  dependencies:
-    "@babel/runtime" "^7.10.4"
-    react-is "^16.6.3"
-
 "@hapi/address@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-4.1.0.tgz#d60c5c0d930e77456fdcde2598e77302e2955e1d"

From 038b3062a1a5cd0e7cdd304d952105e2f094aaf0 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Tue, 28 Feb 2023 09:34:33 -0800
Subject: [PATCH 03/30] Release 3.0.0-beta.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b1814c0773..1f5f6aabce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-react",
-  "version": "2.1.4",
+  "version": "3.0.0-beta.0",
   "description": "The official Semantic-UI-React integration.",
   "jsnext:main": "dist/es/index.js",
   "main": "dist/commonjs/index.js",

From 7d3e162fa055f3851683c8cae0b1d282e62ee10d Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sun, 9 Jul 2023 12:34:49 +0200
Subject: [PATCH 04/30] docs: add migration guide to v3 (#4431)

---
 docs/src/components/Sidebar/Sidebar.js |   2 +-
 docs/src/pages/MigrationGuide.mdx      | 174 ++++++++++++++++---------
 docs/src/pages/MigrationGuideV2.mdx    |  87 +++++++++++++
 3 files changed, 202 insertions(+), 61 deletions(-)
 create mode 100644 docs/src/pages/MigrationGuideV2.mdx

diff --git a/docs/src/components/Sidebar/Sidebar.js b/docs/src/components/Sidebar/Sidebar.js
index d8797ff909..ed63899a7a 100644
--- a/docs/src/components/Sidebar/Sidebar.js
+++ b/docs/src/components/Sidebar/Sidebar.js
@@ -224,7 +224,7 @@ class Sidebar extends Component {
                   Prototypes
                 </Menu.Item>
                 <Menu.Item as={Link} exact to='/migration-guide' activeClassName='active'>
-                  Migration guide to v2
+                  Migration guide to v3
                 </Menu.Item>
               </Menu.Menu>
             </Menu.Item>
diff --git a/docs/src/pages/MigrationGuide.mdx b/docs/src/pages/MigrationGuide.mdx
index 42be594283..37810ea657 100644
--- a/docs/src/pages/MigrationGuide.mdx
+++ b/docs/src/pages/MigrationGuide.mdx
@@ -1,87 +1,141 @@
+import { Message } from 'semantic-ui-react'
+
 export const meta = {
-  title: 'Migration Guide',
+  title: 'Migration Guide to v3',
   prevPage: { title: 'Prototypes', href: '/prototypes' },
 }
 
-This is a reference for upgrading your application to v2 of Semantic UI React. While there's a lot covered here, you probably won't need to do everything for your app.
+This is a reference for upgrading your application to v3 of Semantic UI React.
 
-## Upgrade of `react-popper` for `Popup`
+<Message
+  info
+  size='tiny'
+  header='Looking to upgrade your app to v2?'
+  content={
+    <>
+      Migration guide to Semantic UI React is available <a href='/migration-guide-v-2'>here</a>.
+    </>
+  }
+/>
 
-_Popper.js v1 is out of date, v2 was released in Dec 2019, time to upgrade 🚀_
+## Native ref support
 
-### `offset` can't be specified as string anymore
+<Message
+  compact
+  content='This change can be considered as improvement. You should not be affected if you did not used `ref` on Semantic UI React components.'
+  header='Risk: low'
+  size='mini'
+  color='teal'
+/>
 
-Previously it was possible to pass different units to the offset prop as units. This behavior was changed and `offset` accepts a tuple or a function. Examples in our docs were also updated.
+The main change in v3 is the support of [native refs to components](https://react.dev/reference/react/forwardRef) to avoid usage of [deprecated `ReactDOM.findDOMNode()`](https://react.dev/reference/react-dom/findDOMNode). It means that `ref` prop can be used to get a reference to the underlying DOM element instead of a React component instance.
 
-```diff
- <>
--  <Popup offset="50px" />
-+  <Popup offset={[50, 0]} />
-   <br />
--  <Popup offset="-100%p" />
-+  <Popup offset={({ popper }) => [-popper.width, 0]} />
- </>
+For example, you can use `ref` to get a reference to the underlying DOM element of `Button` component:
+
+```jsx
+import { Button } from 'semantic-ui-react'
+
+const App = () => {
+  const buttonRef = React.useRef()
+
+  React.useEffect(() => {
+    console.log(buttonRef.current)
+  }, [])
+
+  return <Button ref={buttonRef} />
+}
 ```
 
-### `popperModifiers` should be defined as array now
+All components from Semantic UI React v3 support native ref forwarding.
+
+### Note on `Button`, `Input`, `TextArea`
+
+`Button`, `Input` and `TextArea` implemented some methods like `focus()` and `blur()` on their class instances. However, now you will get a reference to the underlying DOM element instead of a React component instance. You should be able to call these methods directly on the DOM element without any issues.
+
+## Removal of `Ref` component
+
+<Message
+  compact
+  content='You will be affected if you use `Ref` component.'
+  header='Risk: high'
+  size='mini'
+  color='orange'
+/>
 
-The `popperModifiers` prop should be defined as an array with changed format (see [Popper docs](https://popper.js.org/docs/v2/migration-guide/#10-update-modifiers)).
+Because of the native ref support, `Ref` component is no longer needed and was removed as it used deprecated APIs.
 
 ```diff
--<Popup popperModifiers={{ preventOverflow: { padding: 0 } }} />
-+<Popup popperModifiers={[{ name: 'preventOverflow', options: { padding: 0 } }]} />
+function App() {
+-  return (
+-    <Ref innerRef={buttonRef}>
+-      <Button />
+-    </Ref>
+-  )
++  return <Button ref={buttonRef} />
+}
+```
+
+As we exported `Ref` component and recommended its usage everywhere we moved out `Ref` component to a separate package (`@semantic-ui-react/component-ref`). This means that you can use it already with both v2 & v3 to make the upgrade smoother.
+
+```diff
+-import { Ref } from "semantic-ui-react";
++import Ref from "@semantic-ui-react/component-ref";
 ```
 
-### a wrapping element around `Popup`
+<Message compact size='tiny' warning>
+  `@semantic-ui-react/component-ref` is considered as a deprecated package, we don't plan maintain
+  it, so please consider migration anyway. It also will not receive fixes related to usage of
+  deprecated APIs from React.
+</Message>
 
-We started to use an additional wrapping element around `Popup` for positioning, see [Semantic-Org/Semantic-UI-React#3947](https://github.com/Semantic-Org/Semantic-UI-React/pull/3947) for more details. To pass props to this element `popper` shorthand can be used, see [an example](/modules/popup/#usage-position-fixed).
+More details on this change in [Semantic-Org/Semantic-UI-React#4286](https://github.com/Semantic-Org/Semantic-UI-React/pull/4286).
 
-⚠️We also made a fix in [Semantic-Org/Semantic-UI-React#4094](https://github.com/Semantic-Org/Semantic-UI-React/pull/4094) to transfer `zIndex` value to avoid any breaks.
+## Removal of `Visibity` component
 
-## `Responsive` component was removed
+<Message
+  compact
+  content='You will be affected if you use `Visibility` component.'
+  header='Risk: high'
+  size='mini'
+  color='orange'
+/>
 
-`Responsive` component was deprecated in 1.1.0. There are two main reasons for the removal: there is no connection between breakpoints and pure SSR (server side rendering) support.
+The main reason is performance that is far away from native APIs. We suggest to use [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) directly or via React wrappers, for example: [react-intersection-observer](https://www.npmjs.com/package/react-intersection-observer).
 
-[@artsy/fresnel](https://github.com/artsy/fresnel) was proposed as a replacement as it properly handles SSR scenarios.
+As it's not a straightforward replacement that may cause issues with adoption we moved out `Visibility` component to a separate package (`@semantic-ui-react/component-visibility`). This means that you can use it already with v2 or upcoming v3:
 
 ```diff
-+import { createMedia } from "@artsy/fresnel";
-import React from "react";
--import { Responsive, Segment } from "semantic-ui-react";
-+import { Segment } from "semantic-ui-react";
-
-+const AppMedia = createMedia({
-+  breakpoints: {
-+    mobile: 320,
-+    tablet: 768,
-+    computer: 992,
-+    largeScreen: 1200,
-+    widescreen: 1920
-+  }
-+});
-+const mediaStyles = AppMedia.createMediaStyle();
-+const { Media, MediaContextProvider } = AppMedia;
-
--const App = () => (
--  <Responsive as={Segment} {...Responsive.onlyMobile}>
--    Mobile
--  </Responsive>
--)
-+const App = () => (
-+  <>
-+    <style>{mediaStyles}</style>
-+    <MediaContextProvider>
-+      <Segment as={Media} at="mobile">
-+        Mobile
-+      </Segment>
-+    </MediaContextProvider>
-+  </>
-+);
+-import { Visibility } from "semantic-ui-react";
++import Visibility from "@semantic-ui-react/component-visibility";
 ```
 
-The full migration guide is available in [Semantic-Org/Semantic-UI-React#4008](https://github.com/Semantic-Org/Semantic-UI-React/pull/4008), it contains more detailed explanation and examples for Next.js & Gatsby.
+<Message compact size='tiny' warning>
+  `@semantic-ui-react/component-visibility` is considered as a deprecated package, we don't plan
+  maintain it, so please consider migration anyway. It also will not receive fixes related to usage
+  of deprecated APIs from React.
+</Message>
+
+More details on this change in [Semantic-Org/Semantic-UI-React#4257](https://github.com/Semantic-Org/Semantic-UI-React/pull/4257).
 
-## `MountNode` component was removed
+### Removal of static properties on `Transition` component
+
+<Message
+  compact
+  content='These properties were never referenced in documentation or suggested to be used.'
+  header='Risk: negligible'
+  size='mini'
+  color='green'
+/>
+
+Some static properties on `Transition` component were removed:
+
+```diff
+-  static INITIAL = TRANSITION_STATUS_INITIAL
+-  static ENTERED = TRANSITION_STATUS_ENTERED
+-  static ENTERING = TRANSITION_STATUS_ENTERING
+-  static EXITED = TRANSITION_STATUS_EXITED
+-  static EXITING = TRANSITION_STATUS_EXITING
+-  static UNMOUNTED = TRANSITION_STATUS_UNMOUNTED
+```
 
-`MountNode` component was deprecated in 1.1.0. The main reason for the removal is that the component should not be a part of the public API as it solves our specific issue with the `Modal` component.
-Additional details are available in [Semantic-Org/Semantic-UI-React#4027](https://github.com/Semantic-Org/Semantic-UI-React/pull/4027).
+This properties should not be used in public APIs, but it's still a breaking change.
diff --git a/docs/src/pages/MigrationGuideV2.mdx b/docs/src/pages/MigrationGuideV2.mdx
new file mode 100644
index 0000000000..faf89595d1
--- /dev/null
+++ b/docs/src/pages/MigrationGuideV2.mdx
@@ -0,0 +1,87 @@
+export const meta = {
+  title: 'Migration Guide to v2',
+  prevPage: { title: 'Migration Guide to v3', href: '/migration-guide' },
+}
+
+This is a reference for upgrading your application to v2 of Semantic UI React. While there's a lot covered here, you probably won't need to do everything for your app.
+
+## Upgrade of `react-popper` for `Popup`
+
+_Popper.js v1 is out of date, v2 was released in Dec 2019, time to upgrade 🚀_
+
+### `offset` can't be specified as string anymore
+
+Previously it was possible to pass different units to the offset prop as units. This behavior was changed and `offset` accepts a tuple or a function. Examples in our docs were also updated.
+
+```diff
+ <>
+-  <Popup offset="50px" />
++  <Popup offset={[50, 0]} />
+   <br />
+-  <Popup offset="-100%p" />
++  <Popup offset={({ popper }) => [-popper.width, 0]} />
+ </>
+```
+
+### `popperModifiers` should be defined as array now
+
+The `popperModifiers` prop should be defined as an array with changed format (see [Popper docs](https://popper.js.org/docs/v2/migration-guide/#10-update-modifiers)).
+
+```diff
+-<Popup popperModifiers={{ preventOverflow: { padding: 0 } }} />
++<Popup popperModifiers={[{ name: 'preventOverflow', options: { padding: 0 } }]} />
+```
+
+### a wrapping element around `Popup`
+
+We started to use an additional wrapping element around `Popup` for positioning, see [Semantic-Org/Semantic-UI-React#3947](https://github.com/Semantic-Org/Semantic-UI-React/pull/3947) for more details. To pass props to this element `popper` shorthand can be used, see [an example](/modules/popup/#usage-position-fixed).
+
+⚠️We also made a fix in [Semantic-Org/Semantic-UI-React#4094](https://github.com/Semantic-Org/Semantic-UI-React/pull/4094) to transfer `zIndex` value to avoid any breaks.
+
+## `Responsive` component was removed
+
+`Responsive` component was deprecated in 1.1.0. There are two main reasons for the removal: there is no connection between breakpoints and pure SSR (server side rendering) support.
+
+[@artsy/fresnel](https://github.com/artsy/fresnel) was proposed as a replacement as it properly handles SSR scenarios.
+
+```diff
++import { createMedia } from "@artsy/fresnel";
+import React from "react";
+-import { Responsive, Segment } from "semantic-ui-react";
++import { Segment } from "semantic-ui-react";
+
++const AppMedia = createMedia({
++  breakpoints: {
++    mobile: 320,
++    tablet: 768,
++    computer: 992,
++    largeScreen: 1200,
++    widescreen: 1920
++  }
++});
++const mediaStyles = AppMedia.createMediaStyle();
++const { Media, MediaContextProvider } = AppMedia;
+
+-const App = () => (
+-  <Responsive as={Segment} {...Responsive.onlyMobile}>
+-    Mobile
+-  </Responsive>
+-)
++const App = () => (
++  <>
++    <style>{mediaStyles}</style>
++    <MediaContextProvider>
++      <Segment as={Media} at="mobile">
++        Mobile
++      </Segment>
++    </MediaContextProvider>
++  </>
++);
+```
+
+The full migration guide is available in [Semantic-Org/Semantic-UI-React#4008](https://github.com/Semantic-Org/Semantic-UI-React/pull/4008), it contains more detailed explanation and examples for Next.js & Gatsby.
+
+## `MountNode` component was removed
+
+`MountNode` component was deprecated in 1.1.0. The main reason for the removal is that the component should not be a part of the public API as it solves our specific issue with the `Modal` component.
+Additional details are available in [Semantic-Org/Semantic-UI-React#4027](https://github.com/Semantic-Org/Semantic-UI-React/pull/4027).

From d4fe69ac89cdfc43b4681e701c1974e5ea947b54 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Sun, 9 Jul 2023 12:44:07 +0200
Subject: [PATCH 05/30] docs: update changelog [ci skip]

---
 CHANGELOG.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index caf5e8060d..6379b50920 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Change Log
 
+## v3.0.0-beta.0 (2023-02-28)
+
+> Migration guide is available here ➡️ https://react.semantic-ui.com/migration-guide/
+
+#### :rocket: New Feature
+
+- [#4233](https://github.com/Semantic-Org/Semantic-UI-React/pull/4233) All components support native [ref forwarding](https://reactjs.org/docs/forwarding-refs.html) 🎉
+
+#### :boom: Breaking Change
+
+- [#4286](https://github.com/Semantic-Org/Semantic-UI-React/pull/4286) chore: remove `Ref` component
+- [#4257](https://github.com/Semantic-Org/Semantic-UI-React/pull/4257) chore: remove `Visibility` component
+- [#4266](https://github.com/Semantic-Org/Semantic-UI-React/pull/4266) chore: remove some static props on `Transition` component
+
 ## v2.1.4 (2022-11-23)
 
 #### :bug: Bug Fix

From 79ffb36f672e8b4982997374625b1ce6d22208b4 Mon Sep 17 00:00:00 2001
From: Naman Dhingra <74304916+naman1608@users.noreply.github.com>
Date: Mon, 4 Sep 2023 18:03:58 +0530
Subject: [PATCH 06/30] fix(Form.Group): add disabled flag (#4436)

* fix(Form.Group): add disabled flag

* add a test

---------

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
---
 src/collections/Form/FormGroup.d.ts           | 3 +++
 src/collections/Form/FormGroup.js             | 6 +++++-
 test/specs/collections/Form/FormGroup-test.js | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/collections/Form/FormGroup.d.ts b/src/collections/Form/FormGroup.d.ts
index a864f74168..8c1c8bc54f 100644
--- a/src/collections/Form/FormGroup.d.ts
+++ b/src/collections/Form/FormGroup.d.ts
@@ -15,6 +15,9 @@ export interface StrictFormGroupProps {
   /** Additional classes. */
   className?: string
 
+  /** A Form Group can be disabled. */
+  disabled?: boolean
+
   /** Fields can show related choices. */
   grouped?: boolean
 
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index cf2e16df18..0226d1ed83 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -16,9 +16,10 @@ import {
  * @see Form
  */
 const FormGroup = React.forwardRef((props, ref) => {
-  const { children, className, grouped, inline, unstackable, widths } = props
+  const { children, className, disabled, grouped, inline, unstackable, widths } = props
 
   const classes = cx(
+    useKeyOnly(disabled, 'disabled'),
     useKeyOnly(grouped, 'grouped'),
     useKeyOnly(inline, 'inline'),
     useKeyOnly(unstackable, 'unstackable'),
@@ -48,6 +49,9 @@ FormGroup.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
+  /** A Form Group can be disabled. */
+  disabled: PropTypes.bool,
+
   /** Fields can show related choices. */
   grouped: customPropTypes.every([customPropTypes.disallow(['inline']), PropTypes.bool]),
 
diff --git a/test/specs/collections/Form/FormGroup-test.js b/test/specs/collections/Form/FormGroup-test.js
index c97294b0a7..bb51036dfd 100644
--- a/test/specs/collections/Form/FormGroup-test.js
+++ b/test/specs/collections/Form/FormGroup-test.js
@@ -14,6 +14,7 @@ describe('FormGroup', () => {
   })
 
   common.propKeyOnlyToClassName(FormGroup, 'grouped')
+  common.propKeyOnlyToClassName(FormGroup, 'disabled')
   common.propKeyOnlyToClassName(FormGroup, 'inline')
   common.propKeyOnlyToClassName(FormGroup, 'unstackable')
 

From ba4b72031d202388768779e4f908b9cc7b0271d0 Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Mon, 4 Sep 2023 18:15:33 +0300
Subject: [PATCH 07/30] fix: add error prop to FormGroup (#4437)

---
 src/collections/Form/FormGroup.d.ts           | 3 +++
 src/collections/Form/FormGroup.js             | 6 +++++-
 test/specs/collections/Form/FormGroup-test.js | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/collections/Form/FormGroup.d.ts b/src/collections/Form/FormGroup.d.ts
index 8c1c8bc54f..697a863197 100644
--- a/src/collections/Form/FormGroup.d.ts
+++ b/src/collections/Form/FormGroup.d.ts
@@ -18,6 +18,9 @@ export interface StrictFormGroupProps {
   /** A Form Group can be disabled. */
   disabled?: boolean
 
+  /** A Form Group can have error. */
+  error?: boolean
+
   /** Fields can show related choices. */
   grouped?: boolean
 
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index 0226d1ed83..cbfb2bcc89 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -16,9 +16,10 @@ import {
  * @see Form
  */
 const FormGroup = React.forwardRef((props, ref) => {
-  const { children, className, disabled, grouped, inline, unstackable, widths } = props
+  const { children, className, disabled, error, grouped, inline, unstackable, widths } = props
 
   const classes = cx(
+    useKeyOnly(error, 'error'),
     useKeyOnly(disabled, 'disabled'),
     useKeyOnly(grouped, 'grouped'),
     useKeyOnly(inline, 'inline'),
@@ -52,6 +53,9 @@ FormGroup.propTypes = {
   /** A Form Group can be disabled. */
   disabled: PropTypes.bool,
 
+  /** A Form Group can have error. */
+  error: PropTypes.bool,
+
   /** Fields can show related choices. */
   grouped: customPropTypes.every([customPropTypes.disallow(['inline']), PropTypes.bool]),
 
diff --git a/test/specs/collections/Form/FormGroup-test.js b/test/specs/collections/Form/FormGroup-test.js
index bb51036dfd..ad3e8b390f 100644
--- a/test/specs/collections/Form/FormGroup-test.js
+++ b/test/specs/collections/Form/FormGroup-test.js
@@ -16,6 +16,7 @@ describe('FormGroup', () => {
   common.propKeyOnlyToClassName(FormGroup, 'grouped')
   common.propKeyOnlyToClassName(FormGroup, 'disabled')
   common.propKeyOnlyToClassName(FormGroup, 'inline')
+  common.propKeyOnlyToClassName(FormGroup, 'error')
   common.propKeyOnlyToClassName(FormGroup, 'unstackable')
 
   common.forwardsRef(FormGroup)

From 888b2f720a66af3b1da784ae46687d68aec04b65 Mon Sep 17 00:00:00 2001
From: tourman <8002615@gmail.com>
Date: Sun, 10 Dec 2023 11:53:04 +0000
Subject: [PATCH 08/30] fix(Portal): fix event handling for
 mouseEnter/mouseLeave (#4445)

* fix: typo for mouseEnterTimer (#4442)

* fix: typo for mouseLeaveTimer
---
 src/addons/Portal/Portal.js             |  4 +-
 test/specs/addons/Portal/Portal-test.js | 77 +++++++++++++++++++++++++
 test/utils/wait.js                      |  3 +
 3 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 test/utils/wait.js

diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
index 4f49874189..eeac3f9710 100644
--- a/src/addons/Portal/Portal.js
+++ b/src/addons/Portal/Portal.js
@@ -215,7 +215,7 @@ function Portal(props) {
   }
 
   const handleTriggerMouseLeave = (e, ...rest) => {
-    clearTimeout(mouseEnterTimer)
+    clearTimeout(mouseEnterTimer.current)
 
     // Call original event handler
     _.invoke(trigger, 'props.onMouseLeave', e, ...rest)
@@ -229,7 +229,7 @@ function Portal(props) {
   }
 
   const handleTriggerMouseEnter = (e, ...rest) => {
-    clearTimeout(mouseLeaveTimer)
+    clearTimeout(mouseLeaveTimer.current)
 
     // Call original event handler
     _.invoke(trigger, 'props.onMouseEnter', e, ...rest)
diff --git a/test/specs/addons/Portal/Portal-test.js b/test/specs/addons/Portal/Portal-test.js
index 05cf68a1ae..9d6900b1b2 100644
--- a/test/specs/addons/Portal/Portal-test.js
+++ b/test/specs/addons/Portal/Portal-test.js
@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 import { domEvent, sandbox } from 'test/utils'
 import Portal from 'src/addons/Portal/Portal'
 import PortalInner from 'src/addons/Portal/PortalInner'
+import wait from 'test/utils/wait'
 
 let wrapper
 
@@ -371,6 +372,38 @@ describe('Portal', () => {
         done()
       }, 1)
     })
+
+    /**
+     * e--l--d--v
+     * ^: mouseenter
+     *    ^: BEFORE_DELAY: mouseleave
+     *       ^: expected DELAY
+     *          ^: final validation
+     */
+    it('does not open the portal when leave before delay', async () => {
+      const DELAY = 20
+      const BEFORE_DELAY = 10
+
+      wrapperMount(
+        <Portal trigger={<button />} openOnTriggerMouseEnter mouseEnterDelay={DELAY}>
+          <p />
+        </Portal>,
+      )
+
+      wrapper.should.not.have.descendants(PortalInner)
+      wrapper.find('button').simulate('mouseenter')
+
+      await wait(BEFORE_DELAY)
+
+      wrapper.update()
+      wrapper.should.not.have.descendants(PortalInner)
+      wrapper.find('button').simulate('mouseleave')
+
+      await wait(DELAY)
+
+      wrapper.update()
+      wrapper.should.not.have.descendants(PortalInner)
+    })
   })
 
   describe('closeOnTriggerMouseLeave', () => {
@@ -407,6 +440,50 @@ describe('Portal', () => {
         done()
       }, 1)
     })
+
+    /**
+     * e--l--e--d--v
+     * ^: mouseenter
+     *    ^: mouseleave
+     *       ^: BEFORE_DELAY: reenter
+     *          ^: expected DELAY
+     *             ^: final validation
+     */
+    it('does not close the portal when reenter before delay', async () => {
+      const DELAY = 20
+      const BEFORE_DELAY = 10
+
+      wrapperMount(
+        <Portal
+          trigger={<button />}
+          openOnTriggerMouseEnter
+          closeOnTriggerMouseLeave
+          mouseLeaveDelay={DELAY}
+        >
+          <p />
+        </Portal>,
+      )
+
+      wrapper.should.not.have.descendants(PortalInner)
+      wrapper.find('button').simulate('mouseenter')
+
+      await wait(BEFORE_DELAY)
+
+      wrapper.update()
+      wrapper.should.have.descendants(PortalInner)
+      wrapper.find('button').simulate('mouseleave')
+
+      await wait(BEFORE_DELAY)
+
+      wrapper.update()
+      wrapper.should.have.descendants(PortalInner)
+      wrapper.find('button').simulate('mouseenter')
+
+      await wait(DELAY)
+
+      wrapper.update()
+      wrapper.should.have.descendants(PortalInner)
+    })
   })
 
   describe('closeOnPortalMouseLeave', () => {
diff --git a/test/utils/wait.js b/test/utils/wait.js
new file mode 100644
index 0000000000..e1f1bb2fff
--- /dev/null
+++ b/test/utils/wait.js
@@ -0,0 +1,3 @@
+export default function wait(timeout) {
+  return new Promise((resolve) => setTimeout(resolve, timeout))
+}

From 076f818839b7be82e31bfc14d599bd1efb17615a Mon Sep 17 00:00:00 2001
From: Cory Duncan <cory.duncan@solarwinds.com>
Date: Sun, 10 Dec 2023 04:05:14 -0800
Subject: [PATCH 09/30] fix: add contextElement to ReferenceProxy (#4446)

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
---
 src/modules/Popup/lib/createReferenceProxy.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/modules/Popup/lib/createReferenceProxy.js b/src/modules/Popup/lib/createReferenceProxy.js
index 1d7da1c147..0aa0e5c7d3 100644
--- a/src/modules/Popup/lib/createReferenceProxy.js
+++ b/src/modules/Popup/lib/createReferenceProxy.js
@@ -21,6 +21,10 @@ class ReferenceProxy {
   get parentNode() {
     return this.ref.current ? this.ref.current.parentNode : undefined
   }
+
+  get contextElement() {
+    return this.ref.current;
+  }
 }
 
 /**

From 49ef16ab198ebf6a5eac89afce5391f5ef13f21e Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Sun, 10 Dec 2023 13:14:47 +0100
Subject: [PATCH 10/30] docs(CHANGELOG): release 2.1.5

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6379b50920..4ed92ba2b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change Log
 
+## v2.1.5 (2023-12-10)
+
+#### :bug: Bug Fix
+* [#4446](https://github.com/Semantic-Org/Semantic-UI-React/pull/4446) fix(Popup): fix positioning in scrollable container ([@CoryDuncan](https://github.com/CoryDuncan))
+
 ## v3.0.0-beta.0 (2023-02-28)
 
 > Migration guide is available here ➡️ https://react.semantic-ui.com/migration-guide/

From e243fa47ac28b4f67141c73a3a0141afe9317b8a Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sun, 10 Dec 2023 15:05:29 +0100
Subject: [PATCH 11/30] fix(typings): update types to support `ref` (#4447)

---
 index.d.ts                                    |  7 +----
 src/addons/Confirm/Confirm.d.ts               |  6 ++--
 src/addons/Pagination/Pagination.d.ts         |  6 ++--
 src/addons/Pagination/PaginationItem.d.ts     |  3 +-
 src/addons/Portal/Portal.d.ts                 |  4 +--
 src/addons/Portal/PortalInner.d.ts            |  2 +-
 src/addons/Radio/Radio.d.ts                   |  4 +--
 src/addons/Select/Select.d.ts                 |  7 ++---
 src/addons/TextArea/TextArea.d.ts             |  5 ++--
 src/collections/Breadcrumb/Breadcrumb.d.ts    |  5 ++--
 .../Breadcrumb/BreadcrumbDivider.d.ts         |  4 +--
 .../Breadcrumb/BreadcrumbSection.d.ts         |  4 +--
 src/collections/Form/Form.d.ts                |  5 ++--
 src/collections/Form/FormButton.d.ts          |  6 ++--
 src/collections/Form/FormCheckbox.d.ts        |  5 ++--
 src/collections/Form/FormDropdown.d.ts        |  5 ++--
 src/collections/Form/FormField.d.ts           |  3 +-
 src/collections/Form/FormGroup.d.ts           |  4 +--
 src/collections/Form/FormInput.d.ts           |  6 ++--
 src/collections/Form/FormRadio.d.ts           |  5 ++--
 src/collections/Form/FormSelect.d.ts          |  7 ++---
 src/collections/Form/FormTextArea.d.ts        |  5 ++--
 src/collections/Form/index.d.ts               |  2 +-
 src/collections/Grid/Grid.d.ts                | 11 +++++---
 src/collections/Grid/GridColumn.d.ts          |  3 +-
 src/collections/Grid/GridRow.d.ts             |  3 +-
 src/collections/Menu/Menu.d.ts                | 11 +++++---
 src/collections/Menu/MenuHeader.d.ts          |  4 +--
 src/collections/Menu/MenuItem.d.ts            |  9 ++++--
 src/collections/Menu/MenuMenu.d.ts            |  4 +--
 src/collections/Message/Message.d.ts          |  5 ++--
 src/collections/Message/MessageContent.d.ts   |  4 +--
 src/collections/Message/MessageHeader.d.ts    |  4 +--
 src/collections/Message/MessageItem.d.ts      |  4 +--
 src/collections/Message/MessageList.d.ts      |  4 +--
 src/collections/Table/Table.d.ts              |  5 ++--
 src/collections/Table/TableBody.d.ts          |  3 +-
 src/collections/Table/TableCell.d.ts          |  3 +-
 src/collections/Table/TableFooter.d.ts        |  4 +--
 src/collections/Table/TableHeader.d.ts        |  4 +--
 src/collections/Table/TableHeaderCell.d.ts    |  4 +--
 src/collections/Table/TableRow.d.ts           |  8 ++++--
 src/elements/Button/Button.d.ts               | 11 ++++----
 src/elements/Button/ButtonContent.d.ts        |  4 +--
 src/elements/Button/ButtonGroup.d.ts          |  3 +-
 src/elements/Button/ButtonOr.d.ts             |  4 +--
 src/elements/Container/Container.d.ts         |  8 ++++--
 src/elements/Divider/Divider.d.ts             |  4 +--
 src/elements/Flag/Flag.d.ts                   |  3 +-
 src/elements/Header/Header.d.ts               | 15 ++++++----
 src/elements/Header/HeaderContent.d.ts        |  4 +--
 src/elements/Header/HeaderSubheader.d.ts      |  6 ++--
 src/elements/Icon/Icon.d.ts                   |  6 ++--
 src/elements/Icon/IconGroup.d.ts              |  4 +--
 src/elements/Image/Image.d.ts                 |  5 ++--
 src/elements/Image/ImageGroup.d.ts            |  4 +--
 src/elements/Input/Input.d.ts                 |  7 ++---
 src/elements/Label/Label.d.ts                 |  5 ++--
 src/elements/Label/LabelDetail.d.ts           |  4 +--
 src/elements/Label/LabelGroup.d.ts            |  9 ++++--
 src/elements/List/List.d.ts                   |  5 ++--
 src/elements/List/ListContent.d.ts            |  3 +-
 src/elements/List/ListDescription.d.ts        |  4 +--
 src/elements/List/ListHeader.d.ts             |  4 +--
 src/elements/List/ListIcon.d.ts               |  6 ++--
 src/elements/List/ListItem.d.ts               |  4 +--
 src/elements/List/ListList.d.ts               |  4 +--
 src/elements/Loader/Loader.d.ts               |  4 +--
 src/elements/Placeholder/Placeholder.d.ts     |  6 ++--
 .../Placeholder/PlaceholderHeader.d.ts        |  6 ++--
 .../Placeholder/PlaceholderImage.d.ts         |  5 ++--
 src/elements/Placeholder/PlaceholderLine.d.ts |  5 ++--
 .../Placeholder/PlaceholderParagraph.d.ts     |  6 ++--
 src/elements/Rail/Rail.d.ts                   |  4 +--
 src/elements/Reveal/Reveal.d.ts               |  8 ++----
 src/elements/Reveal/RevealContent.d.ts        |  4 +--
 src/elements/Segment/Segment.d.ts             |  5 ++--
 src/elements/Segment/SegmentGroup.d.ts        |  4 +--
 src/elements/Segment/SegmentInline.d.ts       |  6 ++--
 src/elements/Step/Step.d.ts                   |  6 ++--
 src/elements/Step/StepContent.d.ts            |  4 +--
 src/elements/Step/StepDescription.d.ts        |  4 +--
 src/elements/Step/StepGroup.d.ts              |  8 ++++--
 src/elements/Step/StepTitle.d.ts              |  4 +--
 src/generic.d.ts                              | 10 ++++++-
 src/modules/Accordion/Accordion.d.ts          |  5 ++--
 src/modules/Accordion/AccordionAccordion.d.ts |  4 +--
 src/modules/Accordion/AccordionContent.d.ts   |  4 +--
 src/modules/Accordion/AccordionPanel.d.ts     |  2 +-
 src/modules/Accordion/AccordionTitle.d.ts     |  4 +--
 src/modules/Checkbox/Checkbox.d.ts            |  4 +--
 src/modules/Dimmer/Dimmer.d.ts                |  7 ++---
 src/modules/Dimmer/DimmerDimmable.d.ts        |  4 +--
 src/modules/Dimmer/DimmerInner.d.ts           |  4 +--
 src/modules/Dropdown/Dropdown.d.ts            |  5 ++--
 src/modules/Dropdown/DropdownDivider.d.ts     |  4 +--
 src/modules/Dropdown/DropdownHeader.d.ts      |  4 +--
 src/modules/Dropdown/DropdownItem.d.ts        |  9 ++++--
 src/modules/Dropdown/DropdownMenu.d.ts        |  4 +--
 src/modules/Dropdown/DropdownSearchInput.d.ts |  4 +--
 src/modules/Dropdown/DropdownText.d.ts        |  4 +--
 src/modules/Embed/Embed.d.ts                  |  9 ++++--
 src/modules/Modal/Modal.d.ts                  |  6 ++--
 src/modules/Modal/ModalActions.d.ts           |  8 ++++--
 src/modules/Modal/ModalContent.d.ts           |  4 +--
 src/modules/Modal/ModalDescription.d.ts       |  4 +--
 src/modules/Modal/ModalDimmer.d.ts            |  4 +--
 src/modules/Modal/ModalHeader.d.ts            |  4 +--
 src/modules/Popup/Popup.d.ts                  |  4 +--
 src/modules/Popup/PopupContent.d.ts           |  4 +--
 src/modules/Popup/PopupHeader.d.ts            |  4 +--
 src/modules/Progress/Progress.d.ts            |  3 +-
 src/modules/Rating/Rating.d.ts                |  5 ++--
 src/modules/Rating/RatingIcon.d.ts            |  3 +-
 src/modules/Search/Search.d.ts                | 10 +++----
 src/modules/Search/SearchCategory.d.ts        |  4 +--
 src/modules/Search/SearchResult.d.ts          |  4 +--
 src/modules/Search/SearchResults.d.ts         |  4 +--
 src/modules/Sidebar/Sidebar.d.ts              |  6 ++--
 src/modules/Sidebar/SidebarPushable.d.ts      |  4 +--
 src/modules/Sidebar/SidebarPusher.d.ts        |  4 +--
 src/modules/Sticky/Sticky.d.ts                |  3 +-
 src/modules/Tab/Tab.d.ts                      |  8 ++----
 src/modules/Tab/TabPane.d.ts                  |  4 +--
 src/modules/Transition/Transition.d.ts        |  6 ----
 src/modules/Transition/TransitionGroup.d.ts   |  6 ++--
 src/views/Advertisement/Advertisement.d.ts    |  4 +--
 src/views/Card/Card.d.ts                      | 11 +++++---
 src/views/Card/CardContent.d.ts               |  4 +--
 src/views/Card/CardDescription.d.ts           |  4 +--
 src/views/Card/CardGroup.d.ts                 |  3 +-
 src/views/Card/CardHeader.d.ts                |  4 +--
 src/views/Card/CardMeta.d.ts                  |  4 +--
 src/views/Comment/Comment.d.ts                |  6 ++--
 src/views/Comment/CommentAction.d.ts          |  4 +--
 src/views/Comment/CommentActions.d.ts         |  4 +--
 src/views/Comment/CommentAuthor.d.ts          |  4 +--
 src/views/Comment/CommentAvatar.d.ts          |  4 +--
 src/views/Comment/CommentContent.d.ts         |  4 +--
 src/views/Comment/CommentGroup.d.ts           |  4 +--
 src/views/Comment/CommentMetadata.d.ts        |  4 +--
 src/views/Comment/CommentText.d.ts            |  4 +--
 src/views/Feed/Feed.d.ts                      |  6 ++--
 src/views/Feed/FeedContent.d.ts               |  4 +--
 src/views/Feed/FeedDate.d.ts                  |  4 +--
 src/views/Feed/FeedEvent.d.ts                 |  4 +--
 src/views/Feed/FeedExtra.d.ts                 |  3 +-
 src/views/Feed/FeedLabel.d.ts                 |  9 ++++--
 src/views/Feed/FeedLike.d.ts                  |  4 +--
 src/views/Feed/FeedMeta.d.ts                  |  4 +--
 src/views/Feed/FeedSummary.d.ts               |  4 +--
 src/views/Feed/FeedUser.d.ts                  |  4 +--
 src/views/Item/Item.d.ts                      |  6 ++--
 src/views/Item/ItemContent.d.ts               |  3 +-
 src/views/Item/ItemDescription.d.ts           |  4 +--
 src/views/Item/ItemExtra.d.ts                 |  4 +--
 src/views/Item/ItemGroup.d.ts                 |  8 ++++--
 src/views/Item/ItemHeader.d.ts                |  4 +--
 src/views/Item/ItemImage.d.ts                 |  6 ++--
 src/views/Item/ItemMeta.d.ts                  |  4 +--
 src/views/Statistic/Statistic.d.ts            | 11 +++++---
 src/views/Statistic/StatisticGroup.d.ts       |  3 +-
 src/views/Statistic/StatisticLabel.d.ts       |  4 +--
 src/views/Statistic/StatisticValue.d.ts       |  4 +--
 test/specs/addons/Portal/Portal-test.js       |  2 +-
 test/specs/addons/Portal/PortalInner-test.js  |  1 +
 .../TransitionablePortal-test.js              |  1 +
 test/specs/commonTests/hasValidTypings.js     | 28 ++++++++++++++++---
 test/specs/commonTests/isConformant.js        |  3 +-
 test/specs/commonTests/tsHelpers.js           | 24 ++++++++++++++++
 .../modules/Accordion/AccordionPanel-test.js  |  2 +-
 test/specs/modules/Popup/Popup-test.js        |  2 +-
 .../Search/SearchCategoryLayout-test.js       |  6 +++-
 .../modules/Transition/Transition-test.js     |  2 +-
 test/typings.tsx                              | 14 +++++++++-
 175 files changed, 484 insertions(+), 419 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index fe160ab975..e7535b23ea 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -52,12 +52,7 @@ export {
   StrictBreadcrumbSectionProps,
 } from './dist/commonjs/collections/Breadcrumb/BreadcrumbSection'
 
-export {
-  default as Form,
-  FormComponent,
-  FormProps,
-  StrictFormProps,
-} from './dist/commonjs/collections/Form'
+export { default as Form, FormProps, StrictFormProps } from './dist/commonjs/collections/Form'
 export {
   default as FormButton,
   FormButtonProps,
diff --git a/src/addons/Confirm/Confirm.d.ts b/src/addons/Confirm/Confirm.d.ts
index fa8ea2e243..93140722a8 100644
--- a/src/addons/Confirm/Confirm.d.ts
+++ b/src/addons/Confirm/Confirm.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { ButtonProps } from '../../elements/Button'
 import { StrictModalProps } from '../../modules/Modal'
 import { ModalContentProps } from '../../modules/Modal/ModalContent'
@@ -42,10 +42,10 @@ export interface StrictConfirmProps extends StrictModalProps {
   /** Whether or not the modal is visible. */
   open?: boolean
 
-  /** A confirm can vary in size. */
+  /** A Confirm can vary in size. */
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'fullscreen'
 }
 
-declare const Confirm: React.ComponentClass<ConfirmProps>
+declare const Confirm: ForwardRefComponent<ConfirmProps, HTMLDivElement>
 
 export default Confirm
diff --git a/src/addons/Pagination/Pagination.d.ts b/src/addons/Pagination/Pagination.d.ts
index 4233abcee0..1e956d6640 100644
--- a/src/addons/Pagination/Pagination.d.ts
+++ b/src/addons/Pagination/Pagination.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import PaginationItem, { PaginationItemProps } from './PaginationItem'
 
 export interface PaginationProps extends StrictPaginationProps {
@@ -56,8 +56,8 @@ export interface StrictPaginationProps {
   totalPages: number | string
 }
 
-declare class Pagination extends React.Component<PaginationProps> {
-  static Item: typeof PaginationItem
+declare const Pagination: ForwardRefComponent<PaginationProps, HTMLDivElement> & {
+  Item: typeof PaginationItem
 }
 
 export default Pagination
diff --git a/src/addons/Pagination/PaginationItem.d.ts b/src/addons/Pagination/PaginationItem.d.ts
index 6131f5be2a..3970620cae 100644
--- a/src/addons/Pagination/PaginationItem.d.ts
+++ b/src/addons/Pagination/PaginationItem.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface PaginationItemProps extends StrictPaginationItemProps {
   [key: string]: any
@@ -31,6 +32,6 @@ export interface StrictPaginationItemProps {
   type?: 'ellipsisItem' | 'firstItem' | 'prevItem' | 'pageItem' | 'nextItem' | 'lastItem'
 }
 
-declare class PaginationItem extends React.Component<PaginationItemProps> {}
+declare const PaginationItem: ForwardRefComponent<PaginationItemProps, HTMLDivElement>
 
 export default PaginationItem
diff --git a/src/addons/Portal/Portal.d.ts b/src/addons/Portal/Portal.d.ts
index 7c3e00cbd1..09d5b75bc4 100644
--- a/src/addons/Portal/Portal.d.ts
+++ b/src/addons/Portal/Portal.d.ts
@@ -97,8 +97,8 @@ export interface StrictPortalProps {
   triggerRef?: React.Ref<any>
 }
 
-declare class Portal extends React.Component<PortalProps> {
-  static Inner: typeof PortalInner
+declare const Portal: React.FC<PortalProps> & {
+  Inner: typeof PortalInner
 }
 
 export default Portal
diff --git a/src/addons/Portal/PortalInner.d.ts b/src/addons/Portal/PortalInner.d.ts
index 6ccdf0a45e..518b2ffe6a 100644
--- a/src/addons/Portal/PortalInner.d.ts
+++ b/src/addons/Portal/PortalInner.d.ts
@@ -28,6 +28,6 @@ export interface StrictPortalInnerProps {
   onUnmount?: (nothing: null, data: PortalInnerProps) => void
 }
 
-declare class PortalInner extends React.Component<PortalInnerProps> {}
+declare const PortalInner: React.FC<PortalInnerProps>
 
 export default PortalInner
diff --git a/src/addons/Radio/Radio.d.ts b/src/addons/Radio/Radio.d.ts
index 3170005729..9905750da2 100644
--- a/src/addons/Radio/Radio.d.ts
+++ b/src/addons/Radio/Radio.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 import { StrictCheckboxProps } from '../../modules/Checkbox'
 
 export interface RadioProps extends StrictRadioProps {
@@ -16,6 +16,6 @@ export interface StrictRadioProps extends StrictCheckboxProps {
   type?: 'checkbox' | 'radio'
 }
 
-declare const Radio: React.FC<RadioProps>
+declare const Radio: ForwardRefComponent<RadioProps, HTMLInputElement>
 
 export default Radio
diff --git a/src/addons/Select/Select.d.ts b/src/addons/Select/Select.d.ts
index f5619c59fe..5955fc01ee 100644
--- a/src/addons/Select/Select.d.ts
+++ b/src/addons/Select/Select.d.ts
@@ -1,10 +1,9 @@
-import * as React from 'react'
-
 import { StrictDropdownProps } from '../../modules/Dropdown'
 import DropdownDivider from '../../modules/Dropdown/DropdownDivider'
 import DropdownHeader from '../../modules/Dropdown/DropdownHeader'
 import DropdownItem, { DropdownItemProps } from '../../modules/Dropdown/DropdownItem'
 import DropdownMenu from '../../modules/Dropdown/DropdownMenu'
+import { ForwardRefComponent } from '../../generic'
 
 export interface SelectProps extends StrictSelectProps {
   [key: string]: any
@@ -15,13 +14,11 @@ export interface StrictSelectProps extends StrictDropdownProps {
   options: DropdownItemProps[]
 }
 
-interface SelectComponent extends React.FC<SelectProps> {
+declare const Select: ForwardRefComponent<SelectProps, HTMLDivElement> & {
   Divider: typeof DropdownDivider
   Header: typeof DropdownHeader
   Item: typeof DropdownItem
   Menu: typeof DropdownMenu
 }
 
-declare const Select: SelectComponent
-
 export default Select
diff --git a/src/addons/TextArea/TextArea.d.ts b/src/addons/TextArea/TextArea.d.ts
index 1cfbe374c6..09e05d352a 100644
--- a/src/addons/TextArea/TextArea.d.ts
+++ b/src/addons/TextArea/TextArea.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface TextAreaProps extends StrictTextAreaProps {
   [key: string]: any
@@ -31,8 +32,6 @@ export interface StrictTextAreaProps {
   value?: number | string
 }
 
-declare class TextArea extends React.Component<TextAreaProps> {
-  focus: () => void
-}
+declare const TextArea: ForwardRefComponent<TextAreaProps, HTMLTextAreaElement>
 
 export default TextArea
diff --git a/src/collections/Breadcrumb/Breadcrumb.d.ts b/src/collections/Breadcrumb/Breadcrumb.d.ts
index 0e8f8d14d3..bf42d6e584 100644
--- a/src/collections/Breadcrumb/Breadcrumb.d.ts
+++ b/src/collections/Breadcrumb/Breadcrumb.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticShorthandCollection,
   SemanticShorthandContent,
   SemanticShorthandItem,
@@ -38,11 +39,9 @@ export interface StrictBreadcrumbProps {
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'
 }
 
-interface BreadcrumbComponent extends React.ComponentClass<BreadcrumbProps> {
+declare const Breadcrumb: ForwardRefComponent<BreadcrumbProps, HTMLDivElement> & {
   Divider: typeof BreadcrumbDivider
   Section: typeof BreadcrumbSection
 }
 
-declare const Breadcrumb: BreadcrumbComponent
-
 export default Breadcrumb
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.d.ts b/src/collections/Breadcrumb/BreadcrumbDivider.d.ts
index 0e4e267e45..bdf2544f18 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.d.ts
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface BreadcrumbDividerProps extends StrictBreadcrumbDividerProps {
@@ -24,6 +24,6 @@ export interface StrictBreadcrumbDividerProps {
   icon?: SemanticShorthandItem<IconProps>
 }
 
-declare const BreadcrumbDivider: React.FC<BreadcrumbDividerProps>
+declare const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps, HTMLDivElement>
 
 export default BreadcrumbDivider
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.d.ts b/src/collections/Breadcrumb/BreadcrumbSection.d.ts
index 5e5fe3e57f..04b639e3dc 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.d.ts
+++ b/src/collections/Breadcrumb/BreadcrumbSection.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface BreadcrumbSectionProps extends StrictBreadcrumbSectionProps {
   [key: string]: any
@@ -37,6 +37,6 @@ export interface StrictBreadcrumbSectionProps {
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: BreadcrumbSectionProps) => void
 }
 
-declare const BreadcrumbSection: React.ComponentClass<BreadcrumbSectionProps>
+declare const BreadcrumbSection: ForwardRefComponent<BreadcrumbSectionProps, HTMLDivElement>
 
 export default BreadcrumbSection
diff --git a/src/collections/Form/Form.d.ts b/src/collections/Form/Form.d.ts
index 8493574ecb..f4b3532f7a 100644
--- a/src/collections/Form/Form.d.ts
+++ b/src/collections/Form/Form.d.ts
@@ -9,6 +9,7 @@ import FormInput from './FormInput'
 import FormRadio from './FormRadio'
 import FormSelect from './FormSelect'
 import FormTextArea from './FormTextArea'
+import { ForwardRefComponent } from '../../generic'
 
 export interface FormProps extends StrictFormProps {
   [key: string]: any
@@ -58,7 +59,7 @@ export interface StrictFormProps {
   widths?: 'equal'
 }
 
-export interface FormComponent extends React.FC<FormProps> {
+declare const Form: ForwardRefComponent<FormProps, HTMLFormElement> & {
   Field: typeof FormField
   Button: typeof FormButton
   Checkbox: typeof FormCheckbox
@@ -70,6 +71,4 @@ export interface FormComponent extends React.FC<FormProps> {
   TextArea: typeof FormTextArea
 }
 
-declare const Form: FormComponent
-
 export default Form
diff --git a/src/collections/Form/FormButton.d.ts b/src/collections/Form/FormButton.d.ts
index 47a37a4b1d..5c9461e661 100644
--- a/src/collections/Form/FormButton.d.ts
+++ b/src/collections/Form/FormButton.d.ts
@@ -1,6 +1,4 @@
-import * as React from 'react'
-
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { StrictButtonProps } from '../../elements/Button'
 import { LabelProps } from '../../elements/Label'
 import { StrictFormFieldProps } from './FormField'
@@ -22,6 +20,6 @@ export interface StrictFormButtonProps
   label?: SemanticShorthandItem<LabelProps>
 }
 
-declare const FormButton: React.FC<FormButtonProps>
+declare const FormButton: ForwardRefComponent<FormButtonProps, HTMLButtonElement>
 
 export default FormButton
diff --git a/src/collections/Form/FormCheckbox.d.ts b/src/collections/Form/FormCheckbox.d.ts
index b23530a44a..6d44ca3a20 100644
--- a/src/collections/Form/FormCheckbox.d.ts
+++ b/src/collections/Form/FormCheckbox.d.ts
@@ -1,6 +1,5 @@
-import * as React from 'react'
-
 import { StrictCheckboxProps } from '../../modules/Checkbox'
+import { ForwardRefComponent } from '../../generic'
 import { StrictFormFieldProps } from './FormField'
 
 export interface FormCheckboxProps extends StrictFormCheckboxProps {
@@ -18,6 +17,6 @@ export interface StrictFormCheckboxProps extends StrictFormFieldProps, StrictChe
   type?: 'checkbox' | 'radio'
 }
 
-declare const FormCheckbox: React.FC<FormCheckboxProps>
+declare const FormCheckbox: ForwardRefComponent<FormCheckboxProps, HTMLInputElement>
 
 export default FormCheckbox
diff --git a/src/collections/Form/FormDropdown.d.ts b/src/collections/Form/FormDropdown.d.ts
index 79e538c426..78582b1892 100644
--- a/src/collections/Form/FormDropdown.d.ts
+++ b/src/collections/Form/FormDropdown.d.ts
@@ -1,6 +1,5 @@
-import * as React from 'react'
-
 import { StrictDropdownProps } from '../../modules/Dropdown'
+import { ForwardRefComponent } from '../../generic'
 import { StrictFormFieldProps } from './FormField'
 
 export interface FormDropdownProps extends StrictFormDropdownProps {
@@ -18,6 +17,6 @@ export interface StrictFormDropdownProps extends StrictFormFieldProps, StrictDro
   error?: any
 }
 
-declare const FormDropdown: React.FC<FormDropdownProps>
+declare const FormDropdown: ForwardRefComponent<FormDropdownProps, HTMLDivElement>
 
 export default FormDropdown
diff --git a/src/collections/Form/FormField.d.ts b/src/collections/Form/FormField.d.ts
index fc4c9d42fe..8ccbfe1e45 100644
--- a/src/collections/Form/FormField.d.ts
+++ b/src/collections/Form/FormField.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   HtmlLabelProps,
   SemanticShorthandContent,
   SemanticShorthandItem,
@@ -57,6 +58,6 @@ export interface StrictFormFieldProps {
   width?: SemanticWIDTHS
 }
 
-declare const FormField: React.FC<FormFieldProps>
+declare const FormField: ForwardRefComponent<FormFieldProps, HTMLElement>
 
 export default FormField
diff --git a/src/collections/Form/FormGroup.d.ts b/src/collections/Form/FormGroup.d.ts
index 697a863197..2596e43836 100644
--- a/src/collections/Form/FormGroup.d.ts
+++ b/src/collections/Form/FormGroup.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticWIDTHS } from '../../generic'
+import { ForwardRefComponent, SemanticWIDTHS } from '../../generic'
 
 export interface FormGroupProps extends StrictFormGroupProps {
   [key: string]: any
@@ -34,6 +34,6 @@ export interface StrictFormGroupProps {
   widths?: SemanticWIDTHS | 'equal'
 }
 
-declare const FormGroup: React.FC<FormGroupProps>
+declare const FormGroup: ForwardRefComponent<FormGroupProps, HTMLInputElement>
 
 export default FormGroup
diff --git a/src/collections/Form/FormInput.d.ts b/src/collections/Form/FormInput.d.ts
index 449caad2bd..1d66a87dd4 100644
--- a/src/collections/Form/FormInput.d.ts
+++ b/src/collections/Form/FormInput.d.ts
@@ -1,6 +1,4 @@
-import * as React from 'react'
-
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { LabelProps } from '../../elements/Label'
 import { StrictInputProps } from '../../elements/Input'
 import { StrictFormFieldProps } from './FormField'
@@ -25,6 +23,6 @@ export interface StrictFormInputProps
   label?: SemanticShorthandItem<LabelProps>
 }
 
-declare const FormInput: React.FC<FormInputProps>
+declare const FormInput: ForwardRefComponent<FormInputProps, HTMLInputElement>
 
 export default FormInput
diff --git a/src/collections/Form/FormRadio.d.ts b/src/collections/Form/FormRadio.d.ts
index bd9503dfef..1818a961db 100644
--- a/src/collections/Form/FormRadio.d.ts
+++ b/src/collections/Form/FormRadio.d.ts
@@ -1,6 +1,5 @@
-import * as React from 'react'
-
 import { StrictRadioProps } from '../../addons/Radio'
+import { ForwardRefComponent } from '../../generic'
 import { StrictFormFieldProps } from './FormField'
 
 export interface FormRadioProps extends StrictFormRadioProps {
@@ -18,6 +17,6 @@ export interface StrictFormRadioProps extends StrictFormFieldProps, StrictRadioP
   type?: 'checkbox' | 'radio'
 }
 
-declare const FormRadio: React.FC<FormRadioProps>
+declare const FormRadio: ForwardRefComponent<FormRadioProps, HTMLInputElement>
 
 export default FormRadio
diff --git a/src/collections/Form/FormSelect.d.ts b/src/collections/Form/FormSelect.d.ts
index a85df43f3f..eb921e7015 100644
--- a/src/collections/Form/FormSelect.d.ts
+++ b/src/collections/Form/FormSelect.d.ts
@@ -1,10 +1,7 @@
-import * as React from 'react'
-
 import { StrictSelectProps } from '../../addons/Select'
 import { DropdownItemProps } from '../../modules/Dropdown/DropdownItem'
 import { StrictFormFieldProps } from './FormField'
-import { SemanticShorthandItem } from '../../generic'
-import { LabelProps } from '../../elements/Label'
+import { ForwardRefComponent } from '../../generic'
 
 export interface FormSelectProps extends StrictFormSelectProps {
   [key: string]: any
@@ -24,6 +21,6 @@ export interface StrictFormSelectProps extends StrictFormFieldProps, StrictSelec
   options: DropdownItemProps[]
 }
 
-declare const FormSelect: React.FC<FormSelectProps>
+declare const FormSelect: ForwardRefComponent<FormSelectProps, HTMLDivElement>
 
 export default FormSelect
diff --git a/src/collections/Form/FormTextArea.d.ts b/src/collections/Form/FormTextArea.d.ts
index 309c1a3029..7443cfbf8a 100644
--- a/src/collections/Form/FormTextArea.d.ts
+++ b/src/collections/Form/FormTextArea.d.ts
@@ -1,6 +1,5 @@
-import * as React from 'react'
-
 import { StrictTextAreaProps } from '../../addons/TextArea'
+import { ForwardRefComponent } from '../../generic'
 import { StrictFormFieldProps } from './FormField'
 
 export interface FormTextAreaProps extends StrictFormTextAreaProps {
@@ -15,6 +14,6 @@ export interface StrictFormTextAreaProps extends StrictFormFieldProps, StrictTex
   control?: any
 }
 
-declare const FormTextArea: React.FC<FormTextAreaProps>
+declare const FormTextArea: ForwardRefComponent<FormTextAreaProps, HTMLTextAreaElement>
 
 export default FormTextArea
diff --git a/src/collections/Form/index.d.ts b/src/collections/Form/index.d.ts
index ff65c8e022..c62a39e99a 100644
--- a/src/collections/Form/index.d.ts
+++ b/src/collections/Form/index.d.ts
@@ -1 +1 @@
-export { default, FormComponent, FormProps, StrictFormProps } from './Form'
+export { default, FormProps, StrictFormProps } from './Form'
diff --git a/src/collections/Grid/Grid.d.ts b/src/collections/Grid/Grid.d.ts
index 4a76c40baf..e75cd8058d 100644
--- a/src/collections/Grid/Grid.d.ts
+++ b/src/collections/Grid/Grid.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { SemanticTEXTALIGNMENTS, SemanticVERTICALALIGNMENTS, SemanticWIDTHS } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticTEXTALIGNMENTS,
+  SemanticVERTICALALIGNMENTS,
+  SemanticWIDTHS,
+} from '../../generic'
 import GridColumn from './GridColumn'
 import GridRow from './GridRow'
 
@@ -70,11 +75,9 @@ export interface StrictGridProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-interface GridComponent extends React.FC<GridProps> {
+declare const Grid: ForwardRefComponent<GridProps, HTMLDivElement> & {
   Column: typeof GridColumn
   Row: typeof GridRow
 }
 
-declare const Grid: GridComponent
-
 export default Grid
diff --git a/src/collections/Grid/GridColumn.d.ts b/src/collections/Grid/GridColumn.d.ts
index e8033471ff..17be8856bc 100644
--- a/src/collections/Grid/GridColumn.d.ts
+++ b/src/collections/Grid/GridColumn.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {
+  ForwardRefComponent,
   SemanticCOLORS,
   SemanticFLOATS,
   SemanticTEXTALIGNMENTS,
@@ -67,6 +68,6 @@ export interface StrictGridColumnProps {
   width?: SemanticWIDTHS
 }
 
-declare const GridColumn: React.FC<GridColumnProps>
+declare const GridColumn: ForwardRefComponent<GridColumnProps, HTMLDivElement>
 
 export default GridColumn
diff --git a/src/collections/Grid/GridRow.d.ts b/src/collections/Grid/GridRow.d.ts
index 3be9ab2ad2..1397a3a133 100644
--- a/src/collections/Grid/GridRow.d.ts
+++ b/src/collections/Grid/GridRow.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticCOLORS,
   SemanticTEXTALIGNMENTS,
   SemanticVERTICALALIGNMENTS,
@@ -51,6 +52,6 @@ export interface StrictGridRowProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-declare const GridRow: React.FC<GridRowProps>
+declare const GridRow: ForwardRefComponent<GridRowProps, HTMLDivElement>
 
 export default GridRow
diff --git a/src/collections/Menu/Menu.d.ts b/src/collections/Menu/Menu.d.ts
index bb2b009c1a..85bc8b554b 100644
--- a/src/collections/Menu/Menu.d.ts
+++ b/src/collections/Menu/Menu.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { SemanticCOLORS, SemanticShorthandCollection, SemanticWIDTHS } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticCOLORS,
+  SemanticShorthandCollection,
+  SemanticWIDTHS,
+} from '../../generic'
 import MenuHeader from './MenuHeader'
 import MenuItem, { MenuItemProps } from './MenuItem'
 import MenuMenu from './MenuMenu'
@@ -91,12 +96,10 @@ export interface StrictMenuProps {
   widths?: SemanticWIDTHS
 }
 
-interface MenuComponent extends React.ComponentClass<MenuProps> {
+declare const Menu: ForwardRefComponent<MenuProps, HTMLDivElement> & {
   Header: typeof MenuHeader
   Item: typeof MenuItem
   Menu: typeof MenuMenu
 }
 
-declare const Menu: MenuComponent
-
 export default Menu
diff --git a/src/collections/Menu/MenuHeader.d.ts b/src/collections/Menu/MenuHeader.d.ts
index 183e7b84ea..e7b878b747 100644
--- a/src/collections/Menu/MenuHeader.d.ts
+++ b/src/collections/Menu/MenuHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface MenuHeaderProps extends StrictMenuHeaderProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictMenuHeaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const MenuHeader: React.ComponentClass<MenuHeaderProps>
+declare const MenuHeader: ForwardRefComponent<MenuHeaderProps, HTMLDivElement>
 
 export default MenuHeader
diff --git a/src/collections/Menu/MenuItem.d.ts b/src/collections/Menu/MenuItem.d.ts
index 3dcd252987..fc31854002 100644
--- a/src/collections/Menu/MenuItem.d.ts
+++ b/src/collections/Menu/MenuItem.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { SemanticCOLORS, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticCOLORS,
+  SemanticShorthandContent,
+  SemanticShorthandItem,
+} from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface MenuItemProps extends StrictMenuItemProps {
@@ -60,6 +65,6 @@ export interface StrictMenuItemProps {
   position?: 'left' | 'right'
 }
 
-declare const MenuItem: React.ComponentClass<MenuItemProps>
+declare const MenuItem: ForwardRefComponent<MenuItemProps, HTMLDivElement>
 
 export default MenuItem
diff --git a/src/collections/Menu/MenuMenu.d.ts b/src/collections/Menu/MenuMenu.d.ts
index ea449d9fb0..2e5ffa56b6 100644
--- a/src/collections/Menu/MenuMenu.d.ts
+++ b/src/collections/Menu/MenuMenu.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface MenuMenuProps extends StrictMenuMenuProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictMenuMenuProps {
   position?: 'left' | 'right'
 }
 
-declare const MenuMenu: React.FC<MenuMenuProps>
+declare const MenuMenu: ForwardRefComponent<MenuMenuProps, HTMLDivElement>
 
 export default MenuMenu
diff --git a/src/collections/Message/Message.d.ts b/src/collections/Message/Message.d.ts
index 723b0733bd..e6b5c7a9d4 100644
--- a/src/collections/Message/Message.d.ts
+++ b/src/collections/Message/Message.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticCOLORS,
   SemanticShorthandCollection,
   SemanticShorthandContent,
@@ -88,13 +89,11 @@ export interface StrictMessageProps {
   warning?: boolean
 }
 
-interface MessageComponent extends React.ComponentClass<MessageProps> {
+declare const Message: ForwardRefComponent<MessageProps, HTMLDivElement> & {
   Content: typeof MessageContent
   Header: typeof MessageHeader
   List: typeof MessageList
   Item: typeof MessageItem
 }
 
-declare const Message: MessageComponent
-
 export default Message
diff --git a/src/collections/Message/MessageContent.d.ts b/src/collections/Message/MessageContent.d.ts
index 1b70a9f891..d6ef6e12c4 100644
--- a/src/collections/Message/MessageContent.d.ts
+++ b/src/collections/Message/MessageContent.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface MessageContentProps extends StrictMessageContentProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictMessageContentProps {
   content?: SemanticShorthandContent
 }
 
-declare const MessageContent: React.FC<MessageContentProps>
+declare const MessageContent: ForwardRefComponent<MessageContentProps, HTMLDivElement>
 
 export default MessageContent
diff --git a/src/collections/Message/MessageHeader.d.ts b/src/collections/Message/MessageHeader.d.ts
index cfbf64c02a..126b66adc4 100644
--- a/src/collections/Message/MessageHeader.d.ts
+++ b/src/collections/Message/MessageHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface MessageHeaderProps extends StrictMessageHeaderProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictMessageHeaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const MessageHeader: React.FC<MessageHeaderProps>
+declare const MessageHeader: ForwardRefComponent<MessageHeaderProps, HTMLDivElement>
 
 export default MessageHeader
diff --git a/src/collections/Message/MessageItem.d.ts b/src/collections/Message/MessageItem.d.ts
index b1293df9a7..63feca65dd 100644
--- a/src/collections/Message/MessageItem.d.ts
+++ b/src/collections/Message/MessageItem.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface MessageItemProps extends StrictMessageItemProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictMessageItemProps {
   content?: SemanticShorthandContent
 }
 
-declare const MessageItem: React.FC<MessageItemProps>
+declare const MessageItem: ForwardRefComponent<MessageItemProps, HTMLLIElement>
 
 export default MessageItem
diff --git a/src/collections/Message/MessageList.d.ts b/src/collections/Message/MessageList.d.ts
index 9acf86b4f1..95e0ad07b0 100644
--- a/src/collections/Message/MessageList.d.ts
+++ b/src/collections/Message/MessageList.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandCollection } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandCollection } from '../../generic'
 import { MessageItemProps } from './MessageItem'
 
 export interface MessageListProps extends StrictMessageListProps {
@@ -21,6 +21,6 @@ export interface StrictMessageListProps {
   items?: SemanticShorthandCollection<MessageItemProps>
 }
 
-declare const MessageList: React.FC<MessageListProps>
+declare const MessageList: ForwardRefComponent<MessageListProps, HTMLUListElement>
 
 export default MessageList
diff --git a/src/collections/Table/Table.d.ts b/src/collections/Table/Table.d.ts
index 8334dd06ff..e0fad075fe 100644
--- a/src/collections/Table/Table.d.ts
+++ b/src/collections/Table/Table.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticCOLORS,
   SemanticShorthandCollection,
   SemanticShorthandItem,
@@ -115,7 +116,7 @@ export interface StrictTableProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-interface TableComponent extends React.FC<TableProps> {
+declare const Table: ForwardRefComponent<TableProps, HTMLTableElement> & {
   Body: typeof TableBody
   Cell: typeof TableCell
   Footer: typeof TableFooter
@@ -124,6 +125,4 @@ interface TableComponent extends React.FC<TableProps> {
   Row: typeof TableRow
 }
 
-declare const Table: TableComponent
-
 export default Table
diff --git a/src/collections/Table/TableBody.d.ts b/src/collections/Table/TableBody.d.ts
index 2b6b86407c..ee4f1d445d 100644
--- a/src/collections/Table/TableBody.d.ts
+++ b/src/collections/Table/TableBody.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface TableBodyProps extends StrictTableBodyProps {
   [key: string]: any
@@ -15,6 +16,6 @@ export interface StrictTableBodyProps {
   className?: string
 }
 
-declare const TableBody: React.FC<TableBodyProps>
+declare const TableBody: ForwardRefComponent<TableBodyProps, HTMLTableSectionElement>
 
 export default TableBody
diff --git a/src/collections/Table/TableCell.d.ts b/src/collections/Table/TableCell.d.ts
index 38bf96e12a..031dd3951c 100644
--- a/src/collections/Table/TableCell.d.ts
+++ b/src/collections/Table/TableCell.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticShorthandContent,
   SemanticShorthandItem,
   SemanticVERTICALALIGNMENTS,
@@ -65,6 +66,6 @@ export interface StrictTableCellProps {
   width?: SemanticWIDTHS
 }
 
-declare const TableCell: React.FC<TableCellProps>
+declare const TableCell: ForwardRefComponent<TableCellProps, HTMLTableCellElement>
 
 export default TableCell
diff --git a/src/collections/Table/TableFooter.d.ts b/src/collections/Table/TableFooter.d.ts
index d1b58565d2..0af3ffa512 100644
--- a/src/collections/Table/TableFooter.d.ts
+++ b/src/collections/Table/TableFooter.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 import { StrictTableHeaderProps } from './TableHeader'
 
 export interface TableFooterProps extends StrictTableFooterProps {
@@ -10,6 +10,6 @@ export interface StrictTableFooterProps extends StrictTableHeaderProps {
   as?: any
 }
 
-declare const TableFooter: React.FC<TableFooterProps>
+declare const TableFooter: ForwardRefComponent<TableFooterProps, HTMLTableSectionElement>
 
 export default TableFooter
diff --git a/src/collections/Table/TableHeader.d.ts b/src/collections/Table/TableHeader.d.ts
index 3d1fbf9bf9..01880f8dbe 100644
--- a/src/collections/Table/TableHeader.d.ts
+++ b/src/collections/Table/TableHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface TableHeaderProps extends StrictTableHeaderProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictTableHeaderProps {
   fullWidth?: boolean
 }
 
-declare const TableHeader: React.FC<TableHeaderProps>
+declare const TableHeader: ForwardRefComponent<TableHeaderProps, HTMLTableSectionElement>
 
 export default TableHeader
diff --git a/src/collections/Table/TableHeaderCell.d.ts b/src/collections/Table/TableHeaderCell.d.ts
index c6ee887f4a..429654ded2 100644
--- a/src/collections/Table/TableHeaderCell.d.ts
+++ b/src/collections/Table/TableHeaderCell.d.ts
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { StrictTableCellProps } from './TableCell'
+import { ForwardRefComponent } from '../../generic'
 
 export interface TableHeaderCellProps extends StrictTableHeaderCellProps {
   [key: string]: any
@@ -16,6 +16,6 @@ export interface StrictTableHeaderCellProps extends StrictTableCellProps {
   sorted?: 'ascending' | 'descending'
 }
 
-declare const TableHeaderCell: React.FC<TableHeaderCellProps>
+declare const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps, HTMLTableCellElement>
 
 export default TableHeaderCell
diff --git a/src/collections/Table/TableRow.d.ts b/src/collections/Table/TableRow.d.ts
index 220204ff38..50c840da93 100644
--- a/src/collections/Table/TableRow.d.ts
+++ b/src/collections/Table/TableRow.d.ts
@@ -1,6 +1,10 @@
 import * as React from 'react'
 
-import { SemanticShorthandCollection, SemanticVERTICALALIGNMENTS } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticShorthandCollection,
+  SemanticVERTICALALIGNMENTS,
+} from '../../generic'
 import { TableCellProps } from './TableCell'
 
 export interface TableRowProps extends StrictTableRowProps {
@@ -48,6 +52,6 @@ export interface StrictTableRowProps {
   warning?: boolean
 }
 
-declare const TableRow: React.FC<TableRowProps>
+declare const TableRow: ForwardRefComponent<TableRowProps, HTMLTableCellElement>
 
 export default TableRow
diff --git a/src/elements/Button/Button.d.ts b/src/elements/Button/Button.d.ts
index 9ccfd51701..166bb9151d 100644
--- a/src/elements/Button/Button.d.ts
+++ b/src/elements/Button/Button.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticCOLORS,
   SemanticFLOATS,
   SemanticShorthandContent,
@@ -118,12 +119,10 @@ export interface StrictButtonProps {
   type?: 'submit' | 'reset' | 'button'
 }
 
-declare class Button extends React.Component<ButtonProps> {
-  static Content: typeof ButtonContent
-  static Group: typeof ButtonGroup
-  static Or: typeof ButtonOr
-
-  focus: (options?: FocusOptions) => void
+declare const Button: ForwardRefComponent<ButtonProps, HTMLButtonElement> & {
+  Content: typeof ButtonContent
+  Group: typeof ButtonGroup
+  Or: typeof ButtonOr
 }
 
 export default Button
diff --git a/src/elements/Button/ButtonContent.d.ts b/src/elements/Button/ButtonContent.d.ts
index a4e3b5ec13..7c7f804aec 100644
--- a/src/elements/Button/ButtonContent.d.ts
+++ b/src/elements/Button/ButtonContent.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ButtonContentProps extends StrictButtonContentProps {
   [key: string]: any
@@ -25,6 +25,6 @@ export interface StrictButtonContentProps {
   visible?: boolean
 }
 
-declare const ButtonContent: React.FC<ButtonContentProps>
+declare const ButtonContent: ForwardRefComponent<ButtonContentProps, HTMLDivElement>
 
 export default ButtonContent
diff --git a/src/elements/Button/ButtonGroup.d.ts b/src/elements/Button/ButtonGroup.d.ts
index 1fcfa1eced..0defc3d866 100644
--- a/src/elements/Button/ButtonGroup.d.ts
+++ b/src/elements/Button/ButtonGroup.d.ts
@@ -7,6 +7,7 @@ import {
   SemanticShorthandCollection,
   SemanticSIZES,
   SemanticWIDTHS,
+  ForwardRefComponent,
 } from '../../generic'
 import { ButtonProps } from './Button'
 
@@ -82,6 +83,6 @@ export interface StrictButtonGroupProps {
   widths?: SemanticWIDTHS
 }
 
-declare const ButtonGroup: React.FC<ButtonGroupProps>
+declare const ButtonGroup: ForwardRefComponent<ButtonGroupProps, HTMLDivElement>
 
 export default ButtonGroup
diff --git a/src/elements/Button/ButtonOr.d.ts b/src/elements/Button/ButtonOr.d.ts
index 4d5d8e2b3b..ff8f307fb9 100644
--- a/src/elements/Button/ButtonOr.d.ts
+++ b/src/elements/Button/ButtonOr.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface ButtonOrProps extends StrictButtonOrProps {
   [key: string]: any
@@ -15,6 +15,6 @@ export interface StrictButtonOrProps {
   text?: number | string
 }
 
-declare const ButtonOr: React.FC<ButtonOrProps>
+declare const ButtonOr: ForwardRefComponent<ButtonOrProps, HTMLDivElement>
 
 export default ButtonOr
diff --git a/src/elements/Container/Container.d.ts b/src/elements/Container/Container.d.ts
index 3c4bff37a5..b13022685f 100644
--- a/src/elements/Container/Container.d.ts
+++ b/src/elements/Container/Container.d.ts
@@ -1,5 +1,9 @@
 import * as React from 'react'
-import { SemanticShorthandContent, SemanticTEXTALIGNMENTS } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticShorthandContent,
+  SemanticTEXTALIGNMENTS,
+} from '../../generic'
 
 export interface ContainerProps extends StrictContainerProps {
   [key: string]: any
@@ -28,6 +32,6 @@ export interface StrictContainerProps {
   textAlign?: SemanticTEXTALIGNMENTS
 }
 
-declare const Container: React.FC<ContainerProps>
+declare const Container: ForwardRefComponent<ContainerProps, HTMLDivElement>
 
 export default Container
diff --git a/src/elements/Divider/Divider.d.ts b/src/elements/Divider/Divider.d.ts
index 0d233e8f97..a078c86002 100644
--- a/src/elements/Divider/Divider.d.ts
+++ b/src/elements/Divider/Divider.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface DividerProps extends StrictDividerProps {
   [key: string]: any
@@ -40,6 +40,6 @@ export interface StrictDividerProps {
   vertical?: boolean
 }
 
-declare const Divider: React.FC<DividerProps>
+declare const Divider: ForwardRefComponent<DividerProps, HTMLDivElement>
 
 export default Divider
diff --git a/src/elements/Flag/Flag.d.ts b/src/elements/Flag/Flag.d.ts
index 9be91cf474..a29495aab8 100644
--- a/src/elements/Flag/Flag.d.ts
+++ b/src/elements/Flag/Flag.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export type FlagNameValues =
   | 'ad'
@@ -511,6 +512,6 @@ export interface StrictFlagProps {
   name: FlagNameValues
 }
 
-declare class Flag extends React.PureComponent<FlagProps> {}
+declare const Flag: ForwardRefComponent<FlagProps, HTMLElement>
 
 export default Flag
diff --git a/src/elements/Header/Header.d.ts b/src/elements/Header/Header.d.ts
index d705716342..196865480e 100644
--- a/src/elements/Header/Header.d.ts
+++ b/src/elements/Header/Header.d.ts
@@ -1,8 +1,13 @@
 import * as React from 'react'
 
-import { SemanticCOLORS, SemanticFLOATS, SemanticTEXTALIGNMENTS } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticCOLORS,
+  SemanticFLOATS,
+  SemanticTEXTALIGNMENTS,
+} from '../../generic'
 import HeaderContent from './HeaderContent'
-import HeaderSubHeader from './HeaderSubheader'
+import HeaderSubheader from './HeaderSubheader'
 
 export interface HeaderProps extends StrictHeaderProps {
   [key: string]: any
@@ -61,11 +66,9 @@ export interface StrictHeaderProps {
   textAlign?: SemanticTEXTALIGNMENTS
 }
 
-interface HeaderComponent extends React.FC<HeaderProps> {
+declare const Header: ForwardRefComponent<HeaderProps, HTMLDivElement> & {
   Content: typeof HeaderContent
-  Subheader: typeof HeaderSubHeader
+  Subheader: typeof HeaderSubheader
 }
 
-declare const Header: HeaderComponent
-
 export default Header
diff --git a/src/elements/Header/HeaderContent.d.ts b/src/elements/Header/HeaderContent.d.ts
index 213b30f946..f41ccbe81a 100644
--- a/src/elements/Header/HeaderContent.d.ts
+++ b/src/elements/Header/HeaderContent.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface HeaderContentProps extends StrictHeaderContentProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictHeaderContentProps {
   content?: SemanticShorthandContent
 }
 
-declare const HeaderContent: React.FC<HeaderContentProps>
+declare const HeaderContent: ForwardRefComponent<HeaderContentProps, HTMLDivElement>
 
 export default HeaderContent
diff --git a/src/elements/Header/HeaderSubheader.d.ts b/src/elements/Header/HeaderSubheader.d.ts
index a7bb570ea4..a8715cdebe 100644
--- a/src/elements/Header/HeaderSubheader.d.ts
+++ b/src/elements/Header/HeaderSubheader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface HeaderSubheaderProps extends StrictHeaderSubheaderProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictHeaderSubheaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const HeaderSubHeader: React.FC<HeaderSubheaderProps>
+declare const HeaderSubheader: ForwardRefComponent<HeaderSubheaderProps, HTMLDivElement>
 
-export default HeaderSubHeader
+export default HeaderSubheader
diff --git a/src/elements/Icon/Icon.d.ts b/src/elements/Icon/Icon.d.ts
index 20b4fe9c80..212516fdb4 100644
--- a/src/elements/Icon/Icon.d.ts
+++ b/src/elements/Icon/Icon.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticCOLORS, SemanticICONS } from '../../generic'
+import { ForwardRefComponent, SemanticCOLORS, SemanticICONS } from '../../generic'
 import IconGroup from './IconGroup'
 
 export type IconSizeProp = 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'
@@ -63,8 +63,8 @@ export interface StrictIconProps {
   'aria-label'?: string
 }
 
-declare class Icon extends React.PureComponent<IconProps> {
-  static Group: typeof IconGroup
+declare const Icon: ForwardRefComponent<IconProps, HTMLElement> & {
+  Group: typeof IconGroup
 }
 
 export default Icon
diff --git a/src/elements/Icon/IconGroup.d.ts b/src/elements/Icon/IconGroup.d.ts
index 50c585143e..290eab1c24 100644
--- a/src/elements/Icon/IconGroup.d.ts
+++ b/src/elements/Icon/IconGroup.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 import { IconSizeProp } from './Icon'
 
 export interface IconGroupProps extends StrictIconGroupProps {
@@ -24,6 +24,6 @@ export interface StrictIconGroupProps {
   size?: IconSizeProp
 }
 
-declare const IconGroup: React.FC<IconGroupProps>
+declare const IconGroup: ForwardRefComponent<IconGroupProps, HTMLElement>
 
 export default IconGroup
diff --git a/src/elements/Image/Image.d.ts b/src/elements/Image/Image.d.ts
index b6f51399a5..66974122e4 100644
--- a/src/elements/Image/Image.d.ts
+++ b/src/elements/Image/Image.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticFLOATS,
   SemanticShorthandContent,
   SemanticShorthandItem,
@@ -84,10 +85,8 @@ export interface StrictImageProps {
   wrapped?: boolean
 }
 
-interface ImageComponent extends React.FC<ImageProps> {
+declare const Image: ForwardRefComponent<ImageProps, HTMLImageElement> & {
   Group: typeof ImageGroup
 }
 
-declare const Image: ImageComponent
-
 export default Image
diff --git a/src/elements/Image/ImageGroup.d.ts b/src/elements/Image/ImageGroup.d.ts
index b04ed52461..930601fc23 100644
--- a/src/elements/Image/ImageGroup.d.ts
+++ b/src/elements/Image/ImageGroup.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticSIZES, SemanticShorthandContent } from '../../generic'
+import { SemanticSIZES, SemanticShorthandContent, ForwardRefComponent } from '../../generic'
 
 export interface ImageGroupProps extends StrictImageGroupProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictImageGroupProps {
   size?: SemanticSIZES
 }
 
-declare const ImageGroup: React.FC<ImageGroupProps>
+declare const ImageGroup: ForwardRefComponent<ImageGroupProps, HTMLDivElement>
 
 export default ImageGroup
diff --git a/src/elements/Input/Input.d.ts b/src/elements/Input/Input.d.ts
index 80d7c53377..840930dcc7 100644
--- a/src/elements/Input/Input.d.ts
+++ b/src/elements/Input/Input.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { HtmlInputrops, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, HtmlInputrops, SemanticShorthandItem } from '../../generic'
 import { LabelProps } from '../Label'
 
 export interface InputProps extends StrictInputProps {
@@ -81,9 +81,6 @@ export interface InputOnChangeData extends InputProps {
   value: string
 }
 
-declare class Input extends React.Component<InputProps> {
-  focus: (options?: FocusOptions) => void
-  select: () => void
-}
+declare const Input: ForwardRefComponent<InputProps, HTMLInputElement>
 
 export default Input
diff --git a/src/elements/Label/Label.d.ts b/src/elements/Label/Label.d.ts
index 48f58f58b3..2689d5ce75 100644
--- a/src/elements/Label/Label.d.ts
+++ b/src/elements/Label/Label.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticCOLORS,
   SemanticShorthandContent,
   SemanticShorthandItem,
@@ -98,11 +99,9 @@ export interface StrictLabelProps {
   tag?: boolean
 }
 
-interface LabelComponent extends React.ComponentClass<LabelProps> {
+declare const Label: ForwardRefComponent<LabelProps, HTMLDivElement> & {
   Detail: typeof LabelDetail
   Group: typeof LabelGroup
 }
 
-declare const Label: LabelComponent
-
 export default Label
diff --git a/src/elements/Label/LabelDetail.d.ts b/src/elements/Label/LabelDetail.d.ts
index 7bcf8d2fe6..c178e231d4 100644
--- a/src/elements/Label/LabelDetail.d.ts
+++ b/src/elements/Label/LabelDetail.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface LabelDetailProps extends StrictLabelDetailProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictLabelDetailProps {
   content?: SemanticShorthandContent
 }
 
-declare const LabelDetail: React.FC<LabelDetailProps>
+declare const LabelDetail: ForwardRefComponent<LabelDetailProps, HTMLDivElement>
 
 export default LabelDetail
diff --git a/src/elements/Label/LabelGroup.d.ts b/src/elements/Label/LabelGroup.d.ts
index b5cbc2e2a9..a37bdb522f 100644
--- a/src/elements/Label/LabelGroup.d.ts
+++ b/src/elements/Label/LabelGroup.d.ts
@@ -1,5 +1,10 @@
 import * as React from 'react'
-import { SemanticCOLORS, SemanticShorthandContent, SemanticSIZES } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticCOLORS,
+  SemanticShorthandContent,
+  SemanticSIZES,
+} from '../../generic'
 
 export interface LabelGroupProps extends StrictLabelGroupProps {
   [key: string]: any
@@ -31,6 +36,6 @@ export interface StrictLabelGroupProps {
   tag?: boolean
 }
 
-declare const LabelGroup: React.FC<LabelGroupProps>
+declare const LabelGroup: ForwardRefComponent<LabelGroupProps, HTMLDivElement>
 
 export default LabelGroup
diff --git a/src/elements/List/List.d.ts b/src/elements/List/List.d.ts
index 56c0ff6cc9..dd31bac80f 100644
--- a/src/elements/List/List.d.ts
+++ b/src/elements/List/List.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticFLOATS,
   SemanticShorthandCollection,
   SemanticShorthandContent,
@@ -82,7 +83,7 @@ export interface StrictListProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-interface ListComponent extends React.FC<ListProps> {
+declare const List: ForwardRefComponent<ListProps, HTMLDivElement> & {
   Content: typeof ListContent
   Description: typeof ListDescription
   Header: typeof ListHeader
@@ -91,6 +92,4 @@ interface ListComponent extends React.FC<ListProps> {
   List: typeof ListList
 }
 
-declare const List: ListComponent
-
 export default List
diff --git a/src/elements/List/ListContent.d.ts b/src/elements/List/ListContent.d.ts
index a6c7cb72c6..c0d75905c2 100644
--- a/src/elements/List/ListContent.d.ts
+++ b/src/elements/List/ListContent.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticFLOATS,
   SemanticShorthandContent,
   SemanticShorthandItem,
@@ -39,6 +40,6 @@ export interface StrictListContentProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-declare const ListContent: React.FC<ListContentProps>
+declare const ListContent: ForwardRefComponent<ListContentProps, HTMLDivElement>
 
 export default ListContent
diff --git a/src/elements/List/ListDescription.d.ts b/src/elements/List/ListDescription.d.ts
index 30d1609c33..5bfab4d19d 100644
--- a/src/elements/List/ListDescription.d.ts
+++ b/src/elements/List/ListDescription.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ListDescriptionProps extends StrictListDescriptionProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictListDescriptionProps {
   content?: SemanticShorthandContent
 }
 
-declare const ListDescription: React.FC<ListDescriptionProps>
+declare const ListDescription: ForwardRefComponent<ListDescriptionProps, HTMLDivElement>
 
 export default ListDescription
diff --git a/src/elements/List/ListHeader.d.ts b/src/elements/List/ListHeader.d.ts
index 44de79cecc..4d346b058e 100644
--- a/src/elements/List/ListHeader.d.ts
+++ b/src/elements/List/ListHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ListHeaderProps extends StrictListHeaderProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictListHeaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const ListHeader: React.FC<ListHeaderProps>
+declare const ListHeader: ForwardRefComponent<ListHeaderProps, HTMLDivElement>
 
 export default ListHeader
diff --git a/src/elements/List/ListIcon.d.ts b/src/elements/List/ListIcon.d.ts
index 32a9569dd0..113643a8b5 100644
--- a/src/elements/List/ListIcon.d.ts
+++ b/src/elements/List/ListIcon.d.ts
@@ -1,6 +1,4 @@
-import * as React from 'react'
-
-import { SemanticVERTICALALIGNMENTS } from '../../generic'
+import { ForwardRefComponent, SemanticVERTICALALIGNMENTS } from '../../generic'
 import { StrictIconProps } from '../Icon'
 
 export interface ListIconProps extends StrictListIconProps {
@@ -15,6 +13,6 @@ export interface StrictListIconProps extends StrictIconProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-declare const ListIcon: React.FC<ListIconProps>
+declare const ListIcon: ForwardRefComponent<ListIconProps, HTMLElement>
 
 export default ListIcon
diff --git a/src/elements/List/ListItem.d.ts b/src/elements/List/ListItem.d.ts
index 1c92f95e85..d7a19dfe8a 100644
--- a/src/elements/List/ListItem.d.ts
+++ b/src/elements/List/ListItem.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { ImageProps } from '../Image'
 import { ListContentProps } from './ListContent'
 import { ListDescriptionProps } from './ListDescription'
@@ -54,6 +54,6 @@ export interface StrictListItemProps {
   value?: string
 }
 
-declare const ListItem: React.FC<ListItemProps>
+declare const ListItem: ForwardRefComponent<ListItemProps, HTMLDivElement>
 
 export default ListItem
diff --git a/src/elements/List/ListList.d.ts b/src/elements/List/ListList.d.ts
index ea652c54b2..efbe6257c0 100644
--- a/src/elements/List/ListList.d.ts
+++ b/src/elements/List/ListList.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ListListProps extends StrictListListProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictListListProps {
   content?: SemanticShorthandContent
 }
 
-declare const ListList: React.FC<ListListProps>
+declare const ListList: ForwardRefComponent<ListListProps, HTMLDivElement>
 
 export default ListList
diff --git a/src/elements/Loader/Loader.d.ts b/src/elements/Loader/Loader.d.ts
index 154b76cb38..dd7ede11e7 100644
--- a/src/elements/Loader/Loader.d.ts
+++ b/src/elements/Loader/Loader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent, SemanticSIZES } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticSIZES } from '../../generic'
 
 export interface LoaderProps extends StrictLoaderProps {
   [key: string]: any
@@ -37,6 +37,6 @@ export interface StrictLoaderProps {
   size?: SemanticSIZES
 }
 
-declare const Loader: React.FC<LoaderProps>
+declare const Loader: ForwardRefComponent<LoaderProps, HTMLDivElement>
 
 export default Loader
diff --git a/src/elements/Placeholder/Placeholder.d.ts b/src/elements/Placeholder/Placeholder.d.ts
index 687852e96b..bc7543ce51 100644
--- a/src/elements/Placeholder/Placeholder.d.ts
+++ b/src/elements/Placeholder/Placeholder.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 import PlaceholderHeader from './PlaceholderHeader'
 import PlaceholderImage from './PlaceholderImage'
@@ -30,13 +30,11 @@ export interface StrictPlaceholderProps {
   inverted?: boolean
 }
 
-interface PlaceholderComponent extends React.FC<PlaceholderProps> {
+declare const Placeholder: ForwardRefComponent<PlaceholderProps, HTMLDivElement> & {
   Header: typeof PlaceholderHeader
   Line: typeof PlaceholderLine
   Image: typeof PlaceholderImage
   Paragraph: typeof PlaceholderParagraph
 }
 
-declare const Placeholder: PlaceholderComponent
-
 export default Placeholder
diff --git a/src/elements/Placeholder/PlaceholderHeader.d.ts b/src/elements/Placeholder/PlaceholderHeader.d.ts
index 5a85958835..31020f9571 100644
--- a/src/elements/Placeholder/PlaceholderHeader.d.ts
+++ b/src/elements/Placeholder/PlaceholderHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface PlaceholderHeaderProps extends StrictPlaceholderHeaderProps {
   [key: string]: any
@@ -22,8 +22,6 @@ export interface StrictPlaceholderHeaderProps {
   image?: boolean
 }
 
-interface PlaceholderHeaderComponent extends React.FC<PlaceholderHeaderProps> {}
-
-declare const PlaceholderHeader: PlaceholderHeaderComponent
+declare const PlaceholderHeader: ForwardRefComponent<PlaceholderHeaderProps, HTMLDivElement>
 
 export default PlaceholderHeader
diff --git a/src/elements/Placeholder/PlaceholderImage.d.ts b/src/elements/Placeholder/PlaceholderImage.d.ts
index 2002b635de..97c39c10ca 100644
--- a/src/elements/Placeholder/PlaceholderImage.d.ts
+++ b/src/elements/Placeholder/PlaceholderImage.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface PlaceholderImageProps extends StrictPlaceholderImageProps {
   [key: string]: any
@@ -18,8 +19,6 @@ export interface StrictPlaceholderImageProps {
   rectangular?: boolean
 }
 
-interface PlaceholderImageComponent extends React.FC<PlaceholderImageProps> {}
-
-declare const PlaceholderImage: PlaceholderImageComponent
+declare const PlaceholderImage: ForwardRefComponent<PlaceholderImageProps, HTMLDivElement>
 
 export default PlaceholderImage
diff --git a/src/elements/Placeholder/PlaceholderLine.d.ts b/src/elements/Placeholder/PlaceholderLine.d.ts
index f5b1e08ad2..5d0737e465 100644
--- a/src/elements/Placeholder/PlaceholderLine.d.ts
+++ b/src/elements/Placeholder/PlaceholderLine.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface PlaceholderLineProps extends StrictPlaceholderLineProps {
   [key: string]: any
@@ -15,8 +16,6 @@ export interface StrictPlaceholderLineProps {
   length?: 'full' | 'very long' | 'long' | 'medium' | 'short' | 'very short'
 }
 
-interface PlaceholderLineComponent extends React.FC<PlaceholderLineProps> {}
-
-declare const PlaceholderLine: PlaceholderLineComponent
+declare const PlaceholderLine: ForwardRefComponent<PlaceholderLineProps, HTMLDivElement>
 
 export default PlaceholderLine
diff --git a/src/elements/Placeholder/PlaceholderParagraph.d.ts b/src/elements/Placeholder/PlaceholderParagraph.d.ts
index ca4b37779c..9ac46fe02b 100644
--- a/src/elements/Placeholder/PlaceholderParagraph.d.ts
+++ b/src/elements/Placeholder/PlaceholderParagraph.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface PlaceholderParagraphProps extends StrictPlaceholderParagraphProps {
   [key: string]: any
@@ -19,8 +19,6 @@ export interface StrictPlaceholderParagraphProps {
   content?: SemanticShorthandContent
 }
 
-interface PlaceholderParagraphComponent extends React.FC<PlaceholderParagraphProps> {}
-
-declare const PlaceholderParagraph: PlaceholderParagraphComponent
+declare const PlaceholderParagraph: ForwardRefComponent<PlaceholderParagraphProps, HTMLDivElement>
 
 export default PlaceholderParagraph
diff --git a/src/elements/Rail/Rail.d.ts b/src/elements/Rail/Rail.d.ts
index 4164b08da3..e282466d56 100644
--- a/src/elements/Rail/Rail.d.ts
+++ b/src/elements/Rail/Rail.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticFLOATS, SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticFLOATS, SemanticShorthandContent } from '../../generic'
 
 export interface RailProps extends StrictRailProps {
   [key: string]: any
@@ -37,6 +37,6 @@ export interface StrictRailProps {
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'
 }
 
-declare const Rail: React.FC<RailProps>
+declare const Rail: ForwardRefComponent<RailProps, HTMLDivElement>
 
 export default Rail
diff --git a/src/elements/Reveal/Reveal.d.ts b/src/elements/Reveal/Reveal.d.ts
index d3cb9980b2..bc1e5af456 100644
--- a/src/elements/Reveal/Reveal.d.ts
+++ b/src/elements/Reveal/Reveal.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 import RevealContent from './RevealContent'
 
 export interface RevealProps extends StrictRevealProps {
@@ -41,10 +41,6 @@ export interface StrictRevealProps {
   instant?: boolean
 }
 
-interface RevealComponent extends React.FC<RevealProps> {
-  Content: typeof RevealContent
-}
-
-declare const Reveal: RevealComponent
+declare const Reveal: ForwardRefComponent<RevealProps, HTMLDivElement>
 
 export default Reveal
diff --git a/src/elements/Reveal/RevealContent.d.ts b/src/elements/Reveal/RevealContent.d.ts
index 285e8c6e78..5a623aa20a 100644
--- a/src/elements/Reveal/RevealContent.d.ts
+++ b/src/elements/Reveal/RevealContent.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface RevealContentProps extends StrictRevealContentProps {
   [key: string]: any
@@ -25,6 +25,6 @@ export interface StrictRevealContentProps {
   visible?: boolean
 }
 
-declare const RevealContent: React.FC<RevealContentProps>
+declare const RevealContent: ForwardRefComponent<RevealContentProps, HTMLDivElement>
 
 export default RevealContent
diff --git a/src/elements/Segment/Segment.d.ts b/src/elements/Segment/Segment.d.ts
index 0e6ae6cf9e..7f4f7b15c2 100644
--- a/src/elements/Segment/Segment.d.ts
+++ b/src/elements/Segment/Segment.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticCOLORS,
   SemanticFLOATS,
   SemanticShorthandContent,
@@ -89,11 +90,9 @@ export interface StrictSegmentProps {
   vertical?: boolean
 }
 
-interface SegmentComponent extends React.FC<SegmentProps> {
+declare const Segment: ForwardRefComponent<SegmentProps, HTMLDivElement> & {
   Group: typeof SegmentGroup
   Inline: typeof SegmentInline
 }
 
-declare const Segment: SegmentComponent
-
 export default Segment
diff --git a/src/elements/Segment/SegmentGroup.d.ts b/src/elements/Segment/SegmentGroup.d.ts
index e11315c095..5a3fe823f2 100644
--- a/src/elements/Segment/SegmentGroup.d.ts
+++ b/src/elements/Segment/SegmentGroup.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 import { SegmentSizeProp } from './Segment'
 
 export interface SegmentGroupProps extends StrictSegmentGroupProps {
@@ -39,6 +39,6 @@ export interface StrictSegmentGroupProps {
   stacked?: boolean
 }
 
-declare const SegmentGroup: React.FC<SegmentGroupProps>
+declare const SegmentGroup: ForwardRefComponent<SegmentGroupProps, HTMLDivElement>
 
 export default SegmentGroup
diff --git a/src/elements/Segment/SegmentInline.d.ts b/src/elements/Segment/SegmentInline.d.ts
index 199f549102..aed970f186 100644
--- a/src/elements/Segment/SegmentInline.d.ts
+++ b/src/elements/Segment/SegmentInline.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface SegmentInlineProps extends StrictSegmentInlineProps {
   [key: string]: any
@@ -19,8 +19,6 @@ export interface StrictSegmentInlineProps {
   content?: SemanticShorthandContent
 }
 
-interface SegmentInlineComponent extends React.FC<SegmentInlineProps> {}
-
-declare const SegmentInline: SegmentInlineComponent
+declare const SegmentInline: ForwardRefComponent<SegmentInlineProps, HTMLDivElement>
 
 export default SegmentInline
diff --git a/src/elements/Step/Step.d.ts b/src/elements/Step/Step.d.ts
index b09d752bda..a25147258a 100644
--- a/src/elements/Step/Step.d.ts
+++ b/src/elements/Step/Step.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { IconProps } from '../Icon'
 import StepContent from './StepContent'
 import StepDescription, { StepDescriptionProps } from './StepDescription'
@@ -61,13 +61,11 @@ export interface StrictStepProps {
   title?: SemanticShorthandItem<StepTitleProps>
 }
 
-interface StepComponent extends React.ComponentClass<StepProps> {
+declare const Step: ForwardRefComponent<StepProps, HTMLDivElement> & {
   Content: typeof StepContent
   Description: typeof StepDescription
   Group: typeof StepGroup
   Title: typeof StepTitle
 }
 
-declare const Step: StepComponent
-
 export default Step
diff --git a/src/elements/Step/StepContent.d.ts b/src/elements/Step/StepContent.d.ts
index f59cec8198..223b2d3c43 100644
--- a/src/elements/Step/StepContent.d.ts
+++ b/src/elements/Step/StepContent.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem, SemanticShorthandContent } from '../../generic'
+import { SemanticShorthandItem, SemanticShorthandContent, ForwardRefComponent } from '../../generic'
 import { StepDescriptionProps } from './StepDescription'
 import { StepTitleProps } from './StepTitle'
 
@@ -28,6 +28,6 @@ export interface StrictStepContentProps {
   title?: SemanticShorthandItem<StepTitleProps>
 }
 
-declare const StepContent: React.FC<StepContentProps>
+declare const StepContent: ForwardRefComponent<StepContentProps, HTMLDivElement>
 
 export default StepContent
diff --git a/src/elements/Step/StepDescription.d.ts b/src/elements/Step/StepDescription.d.ts
index d3dfe35179..0b4d9fdc0e 100644
--- a/src/elements/Step/StepDescription.d.ts
+++ b/src/elements/Step/StepDescription.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface StepDescriptionProps extends StrictStepDescriptionProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictStepDescriptionProps {
   content?: SemanticShorthandContent
 }
 
-declare const StepDescription: React.FC<StepDescriptionProps>
+declare const StepDescription: ForwardRefComponent<StepDescriptionProps, HTMLDivElement>
 
 export default StepDescription
diff --git a/src/elements/Step/StepGroup.d.ts b/src/elements/Step/StepGroup.d.ts
index 54958f38f4..bc0d98d54a 100644
--- a/src/elements/Step/StepGroup.d.ts
+++ b/src/elements/Step/StepGroup.d.ts
@@ -1,6 +1,10 @@
 import * as React from 'react'
 
-import { SemanticShorthandCollection, SemanticShorthandContent } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticShorthandCollection,
+  SemanticShorthandContent,
+} from '../../generic'
 import { StepProps } from './Step'
 
 export interface StepGroupProps extends StrictStepGroupProps {
@@ -72,6 +76,6 @@ export interface StrictStepGroupProps {
     | 'eight'
 }
 
-declare const StepGroup: React.FC<StepGroupProps>
+declare const StepGroup: ForwardRefComponent<StepGroupProps, HTMLDivElement>
 
 export default StepGroup
diff --git a/src/elements/Step/StepTitle.d.ts b/src/elements/Step/StepTitle.d.ts
index e169816357..f7d742819f 100644
--- a/src/elements/Step/StepTitle.d.ts
+++ b/src/elements/Step/StepTitle.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface StepTitleProps extends StrictStepTitleProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictStepTitleProps {
   content?: SemanticShorthandContent
 }
 
-declare const StepTitle: React.FC<StepTitleProps>
+declare const StepTitle: ForwardRefComponent<StepTitleProps, HTMLDivElement>
 
 export default StepTitle
diff --git a/src/generic.d.ts b/src/generic.d.ts
index ec217bf1e6..10a972e2fb 100644
--- a/src/generic.d.ts
+++ b/src/generic.d.ts
@@ -1,5 +1,11 @@
 import * as React from 'react'
 
+// ======================================================
+// Utility types
+// ======================================================
+
+export type ForwardRefComponent<P, T> = React.ForwardRefExoticComponent<P & React.RefAttributes<T>>
+
 // ======================================================
 // Alignments
 // ======================================================
@@ -70,7 +76,9 @@ export type ShorthandRenderFunction<C extends React.ElementType, P> = (
   props: P,
 ) => React.ReactNode
 
-export type SemanticShorthandCollection<TProps extends Record<string, any>> = SemanticShorthandItem<TProps>[]
+export type SemanticShorthandCollection<TProps extends Record<string, any>> = SemanticShorthandItem<
+  TProps
+>[]
 export type SemanticShorthandContent = React.ReactNode
 export type SemanticShorthandItem<TProps extends Record<string, any>> =
   | React.ReactNode
diff --git a/src/modules/Accordion/Accordion.d.ts b/src/modules/Accordion/Accordion.d.ts
index 69dcb3c36e..458c7870ab 100644
--- a/src/modules/Accordion/Accordion.d.ts
+++ b/src/modules/Accordion/Accordion.d.ts
@@ -4,6 +4,7 @@ import AccordionAccordion, { StrictAccordionAccordionProps } from './AccordionAc
 import AccordionContent from './AccordionContent'
 import AccordionPanel from './AccordionPanel'
 import AccordionTitle from './AccordionTitle'
+import { ForwardRefComponent } from '../../generic'
 
 export interface AccordionProps extends StrictAccordionProps {
   [key: string]: any
@@ -23,13 +24,11 @@ export interface StrictAccordionProps extends StrictAccordionAccordionProps {
   styled?: boolean
 }
 
-interface AccordionComponent extends React.ComponentClass<AccordionProps> {
+declare const Accordion: ForwardRefComponent<AccordionProps, HTMLDivElement> & {
   Accordion: typeof AccordionAccordion
   Content: typeof AccordionContent
   Panel: typeof AccordionPanel
   Title: typeof AccordionTitle
 }
 
-declare const Accordion: AccordionComponent
-
 export default Accordion
diff --git a/src/modules/Accordion/AccordionAccordion.d.ts b/src/modules/Accordion/AccordionAccordion.d.ts
index 766dbfdda4..cd36ffa03c 100644
--- a/src/modules/Accordion/AccordionAccordion.d.ts
+++ b/src/modules/Accordion/AccordionAccordion.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandCollection } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandCollection } from '../../generic'
 import { AccordionPanelProps } from './AccordionPanel'
 import { AccordionTitleProps } from './AccordionTitle'
 
@@ -39,6 +39,6 @@ export interface StrictAccordionAccordionProps {
   panels?: SemanticShorthandCollection<AccordionPanelProps>
 }
 
-declare const AccordionAccordion: React.ComponentClass<AccordionAccordionProps>
+declare const AccordionAccordion: ForwardRefComponent<AccordionAccordionProps, HTMLDivElement>
 
 export default AccordionAccordion
diff --git a/src/modules/Accordion/AccordionContent.d.ts b/src/modules/Accordion/AccordionContent.d.ts
index 385c0821b8..3578bed592 100644
--- a/src/modules/Accordion/AccordionContent.d.ts
+++ b/src/modules/Accordion/AccordionContent.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface AccordionContentProps extends StrictAccordionContentProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictAccordionContentProps {
   content?: SemanticShorthandContent
 }
 
-declare const AccordionContent: React.FC<AccordionContentProps>
+declare const AccordionContent: ForwardRefComponent<AccordionContentProps, HTMLDivElement>
 
 export default AccordionContent
diff --git a/src/modules/Accordion/AccordionPanel.d.ts b/src/modules/Accordion/AccordionPanel.d.ts
index b537d4daac..ed9b7a1e50 100644
--- a/src/modules/Accordion/AccordionPanel.d.ts
+++ b/src/modules/Accordion/AccordionPanel.d.ts
@@ -30,6 +30,6 @@ export interface StrictAccordionPanelProps {
   title?: SemanticShorthandItem<AccordionTitleProps>
 }
 
-declare class AccordionPanel extends React.Component<AccordionPanelProps> {}
+declare const AccordionPanel: React.ComponentClass<AccordionPanelProps>
 
 export default AccordionPanel
diff --git a/src/modules/Accordion/AccordionTitle.d.ts b/src/modules/Accordion/AccordionTitle.d.ts
index 70e24ff775..1e80a71410 100644
--- a/src/modules/Accordion/AccordionTitle.d.ts
+++ b/src/modules/Accordion/AccordionTitle.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { IconProps } from '../../elements/Icon'
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 
 export interface AccordionTitleProps extends StrictAccordionTitleProps {
   [key: string]: any
@@ -38,6 +38,6 @@ export interface StrictAccordionTitleProps {
   onClick?: (event: React.MouseEvent<HTMLDivElement>, data: AccordionTitleProps) => void
 }
 
-declare const AccordionTitle: React.ComponentClass<AccordionTitleProps>
+declare const AccordionTitle: ForwardRefComponent<AccordionTitleProps, HTMLDivElement>
 
 export default AccordionTitle
diff --git a/src/modules/Checkbox/Checkbox.d.ts b/src/modules/Checkbox/Checkbox.d.ts
index e9f41d1824..8abc03b7f8 100644
--- a/src/modules/Checkbox/Checkbox.d.ts
+++ b/src/modules/Checkbox/Checkbox.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { HtmlLabelProps, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, HtmlLabelProps, SemanticShorthandItem } from '../../generic'
 
 export interface CheckboxProps extends StrictCheckboxProps {
   [key: string]: any
@@ -93,6 +93,6 @@ export interface StrictCheckboxProps {
   value?: number | string
 }
 
-declare const Checkbox: React.ComponentClass<CheckboxProps>
+declare const Checkbox: ForwardRefComponent<CheckboxProps, HTMLDivElement>
 
 export default Checkbox
diff --git a/src/modules/Dimmer/Dimmer.d.ts b/src/modules/Dimmer/Dimmer.d.ts
index b3fad1d0dc..4a48bdde26 100644
--- a/src/modules/Dimmer/Dimmer.d.ts
+++ b/src/modules/Dimmer/Dimmer.d.ts
@@ -1,5 +1,4 @@
-import * as React from 'react'
-
+import { ForwardRefComponent } from '../../generic'
 import DimmerDimmable from './DimmerDimmable'
 import DimmerInner from './DimmerInner'
 
@@ -15,11 +14,9 @@ export interface StrictDimmerProps {
   page?: boolean
 }
 
-interface DimmerComponent extends React.ComponentClass<DimmerProps> {
+declare const Dimmer: ForwardRefComponent<DimmerProps, HTMLDivElement> & {
   Dimmable: typeof DimmerDimmable
   Inner: typeof DimmerInner
 }
 
-declare const Dimmer: DimmerComponent
-
 export default Dimmer
diff --git a/src/modules/Dimmer/DimmerDimmable.d.ts b/src/modules/Dimmer/DimmerDimmable.d.ts
index 3f12e19471..c98c828666 100644
--- a/src/modules/Dimmer/DimmerDimmable.d.ts
+++ b/src/modules/Dimmer/DimmerDimmable.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface DimmerDimmableProps extends StrictDimmerDimmableProps {
   [key: string]: any
@@ -25,6 +25,6 @@ export interface StrictDimmerDimmableProps {
   dimmed?: boolean
 }
 
-declare const DimmerDimmable: React.ComponentClass<DimmerDimmableProps>
+declare const DimmerDimmable: ForwardRefComponent<DimmerDimmableProps, HTMLDivElement>
 
 export default DimmerDimmable
diff --git a/src/modules/Dimmer/DimmerInner.d.ts b/src/modules/Dimmer/DimmerInner.d.ts
index 3a667cf5e1..30f92ced0c 100644
--- a/src/modules/Dimmer/DimmerInner.d.ts
+++ b/src/modules/Dimmer/DimmerInner.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface DimmerInnerProps extends StrictDimmerInnerProps {
   [key: string]: any
@@ -53,6 +53,6 @@ export interface StrictDimmerInnerProps {
   verticalAlign?: 'bottom' | 'top'
 }
 
-declare class DimmerInner extends React.Component<DimmerInnerProps> {}
+declare const DimmerInner: ForwardRefComponent<DimmerInnerProps, HTMLDivElement>
 
 export default DimmerInner
diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts
index d479fa6711..b5ae9c65e5 100644
--- a/src/modules/Dropdown/Dropdown.d.ts
+++ b/src/modules/Dropdown/Dropdown.d.ts
@@ -6,6 +6,7 @@ import DropdownHeader from './DropdownHeader'
 import DropdownItem, { DropdownItemProps } from './DropdownItem'
 import DropdownMenu from './DropdownMenu'
 import DropdownSearchInput from './DropdownSearchInput'
+import { ForwardRefComponent } from '../../generic'
 
 export interface DropdownProps extends StrictDropdownProps {
   [key: string]: any
@@ -298,7 +299,7 @@ export interface DropdownOnSearchChangeData extends DropdownProps {
   searchQuery: string
 }
 
-interface DropdownComponent extends React.ComponentClass<DropdownProps> {
+declare const Dropdown: ForwardRefComponent<DropdownProps, HTMLDivElement> & {
   Divider: typeof DropdownDivider
   Header: typeof DropdownHeader
   Item: typeof DropdownItem
@@ -306,6 +307,4 @@ interface DropdownComponent extends React.ComponentClass<DropdownProps> {
   SearchInput: typeof DropdownSearchInput
 }
 
-declare const Dropdown: DropdownComponent
-
 export default Dropdown
diff --git a/src/modules/Dropdown/DropdownDivider.d.ts b/src/modules/Dropdown/DropdownDivider.d.ts
index b829866309..b57afb268b 100644
--- a/src/modules/Dropdown/DropdownDivider.d.ts
+++ b/src/modules/Dropdown/DropdownDivider.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface DropdownDividerProps extends StrictDropdownDividerProps {
   [key: string]: any
@@ -12,6 +12,6 @@ export interface StrictDropdownDividerProps {
   className?: string
 }
 
-declare const DropdownDivider: React.ComponentClass<DropdownDividerProps>
+declare const DropdownDivider: ForwardRefComponent<DropdownDividerProps, HTMLDivElement>
 
 export default DropdownDivider
diff --git a/src/modules/Dropdown/DropdownHeader.d.ts b/src/modules/Dropdown/DropdownHeader.d.ts
index 10a4a8e6aa..d5451c3463 100644
--- a/src/modules/Dropdown/DropdownHeader.d.ts
+++ b/src/modules/Dropdown/DropdownHeader.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface DropdownHeaderProps extends StrictDropdownHeaderProps {
@@ -24,6 +24,6 @@ export interface StrictDropdownHeaderProps {
   icon?: SemanticShorthandItem<IconProps>
 }
 
-declare const DropdownHeader: React.ComponentClass<DropdownHeaderProps>
+declare const DropdownHeader: ForwardRefComponent<DropdownHeaderProps, HTMLDivElement>
 
 export default DropdownHeader
diff --git a/src/modules/Dropdown/DropdownItem.d.ts b/src/modules/Dropdown/DropdownItem.d.ts
index 11609fbf44..ecf21968b4 100644
--- a/src/modules/Dropdown/DropdownItem.d.ts
+++ b/src/modules/Dropdown/DropdownItem.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { HtmlSpanProps, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import {
+  ForwardRefComponent,
+  HtmlSpanProps,
+  SemanticShorthandContent,
+  SemanticShorthandItem,
+} from '../../generic'
 import { FlagProps } from '../../elements/Flag'
 import { IconProps } from '../../elements/Icon'
 import { ImageProps } from '../../elements/Image'
@@ -65,6 +70,6 @@ export interface StrictDropdownItemProps {
   value?: boolean | number | string
 }
 
-declare const DropdownItem: React.ComponentClass<DropdownItemProps>
+declare const DropdownItem: ForwardRefComponent<DropdownItemProps, HTMLDivElement>
 
 export default DropdownItem
diff --git a/src/modules/Dropdown/DropdownMenu.d.ts b/src/modules/Dropdown/DropdownMenu.d.ts
index 11166dd55a..68505bafef 100644
--- a/src/modules/Dropdown/DropdownMenu.d.ts
+++ b/src/modules/Dropdown/DropdownMenu.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface DropdownMenuProps extends StrictDropdownMenuProps {
   [key: string]: any
@@ -28,6 +28,6 @@ export interface StrictDropdownMenuProps {
   scrolling?: boolean
 }
 
-declare const DropdownMenu: React.FC<DropdownMenuProps>
+declare const DropdownMenu: ForwardRefComponent<DropdownMenuProps, HTMLDivElement>
 
 export default DropdownMenu
diff --git a/src/modules/Dropdown/DropdownSearchInput.d.ts b/src/modules/Dropdown/DropdownSearchInput.d.ts
index 16011d72ee..db021d28f2 100644
--- a/src/modules/Dropdown/DropdownSearchInput.d.ts
+++ b/src/modules/Dropdown/DropdownSearchInput.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface DropdownSearchInputProps extends StrictDropdownSearchInputProps {
   [key: string]: any
@@ -24,6 +24,6 @@ export interface StrictDropdownSearchInputProps {
   value?: number | string
 }
 
-declare const DropdownSearchInput: React.ComponentClass<DropdownSearchInputProps>
+declare const DropdownSearchInput: ForwardRefComponent<DropdownSearchInputProps, HTMLInputElement>
 
 export default DropdownSearchInput
diff --git a/src/modules/Dropdown/DropdownText.d.ts b/src/modules/Dropdown/DropdownText.d.ts
index c2cb85509c..52bf40943f 100644
--- a/src/modules/Dropdown/DropdownText.d.ts
+++ b/src/modules/Dropdown/DropdownText.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface DropdownTextProps extends StrictDropdownTextProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictDropdownTextProps {
   content?: SemanticShorthandContent
 }
 
-declare const DropdownText: React.FunctionComponent<DropdownTextProps>
+declare const DropdownText: ForwardRefComponent<DropdownTextProps, HTMLDivElement>
 
 export default DropdownText
diff --git a/src/modules/Embed/Embed.d.ts b/src/modules/Embed/Embed.d.ts
index 8f95e1420e..7420ff9d4b 100644
--- a/src/modules/Embed/Embed.d.ts
+++ b/src/modules/Embed/Embed.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { HtmlIframeProps, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import {
+  ForwardRefComponent,
+  HtmlIframeProps,
+  SemanticShorthandContent,
+  SemanticShorthandItem,
+} from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface EmbedProps extends StrictEmbedProps {
@@ -68,6 +73,6 @@ export interface StrictEmbedProps {
   url?: string
 }
 
-declare const Embed: React.ComponentClass<EmbedProps>
+declare const Embed: ForwardRefComponent<EmbedProps, HTMLDivElement>
 
 export default Embed
diff --git a/src/modules/Modal/Modal.d.ts b/src/modules/Modal/Modal.d.ts
index 136b9fe18c..103a4dd94f 100644
--- a/src/modules/Modal/Modal.d.ts
+++ b/src/modules/Modal/Modal.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { StrictPortalProps } from '../../addons/Portal'
 import ModalActions, { ModalActionsProps } from './ModalActions'
 import ModalContent, { ModalContentProps } from './ModalContent'
@@ -111,7 +111,7 @@ export interface StrictModalProps extends StrictPortalProps {
   trigger?: React.ReactNode
 }
 
-interface ModalComponent extends React.ComponentClass<ModalProps> {
+declare const Modal: ForwardRefComponent<ModalProps, HTMLDivElement> & {
   Actions: typeof ModalActions
   Content: typeof ModalContent
   Description: typeof ModalDescription
@@ -119,6 +119,4 @@ interface ModalComponent extends React.ComponentClass<ModalProps> {
   Header: typeof ModalHeader
 }
 
-declare const Modal: ModalComponent
-
 export default Modal
diff --git a/src/modules/Modal/ModalActions.d.ts b/src/modules/Modal/ModalActions.d.ts
index ed051e53c0..d890d43d4c 100644
--- a/src/modules/Modal/ModalActions.d.ts
+++ b/src/modules/Modal/ModalActions.d.ts
@@ -1,7 +1,11 @@
 import * as React from 'react'
 
 import { ButtonProps } from '../../elements/Button'
-import { SemanticShorthandCollection, SemanticShorthandContent } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticShorthandCollection,
+  SemanticShorthandContent,
+} from '../../generic'
 
 export interface ModalActionsProps extends StrictModalActionsProps {
   [key: string]: any
@@ -32,6 +36,6 @@ export interface StrictModalActionsProps {
   onActionClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: ButtonProps) => void
 }
 
-declare const ModalActions: React.ComponentClass<ModalActionsProps>
+declare const ModalActions: ForwardRefComponent<ModalActionsProps, HTMLDivElement>
 
 export default ModalActions
diff --git a/src/modules/Modal/ModalContent.d.ts b/src/modules/Modal/ModalContent.d.ts
index bef4465377..f0d8414f45 100644
--- a/src/modules/Modal/ModalContent.d.ts
+++ b/src/modules/Modal/ModalContent.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ModalContentProps extends StrictModalContentProps {
   [key: string]: any
@@ -25,6 +25,6 @@ export interface StrictModalContentProps {
   scrolling?: boolean
 }
 
-declare const ModalContent: React.FC<ModalContentProps>
+declare const ModalContent: ForwardRefComponent<ModalContentProps, HTMLDivElement>
 
 export default ModalContent
diff --git a/src/modules/Modal/ModalDescription.d.ts b/src/modules/Modal/ModalDescription.d.ts
index 3d22745838..b5433cf4ad 100644
--- a/src/modules/Modal/ModalDescription.d.ts
+++ b/src/modules/Modal/ModalDescription.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ModalDescriptionProps extends StrictModalDescriptionProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictModalDescriptionProps {
   content?: SemanticShorthandContent
 }
 
-declare const ModalDescription: React.FC<ModalDescriptionProps>
+declare const ModalDescription: ForwardRefComponent<ModalDescriptionProps, HTMLDivElement>
 
 export default ModalDescription
diff --git a/src/modules/Modal/ModalDimmer.d.ts b/src/modules/Modal/ModalDimmer.d.ts
index cf75f730b9..58b0db072f 100644
--- a/src/modules/Modal/ModalDimmer.d.ts
+++ b/src/modules/Modal/ModalDimmer.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ModalDimmerProps extends StrictModalDimmerProps {
   [key: string]: any
@@ -34,6 +34,6 @@ export interface StrictModalDimmerProps {
   scrolling?: boolean
 }
 
-declare const ModalDimmer: React.FC<ModalDimmerProps>
+declare const ModalDimmer: ForwardRefComponent<ModalDimmerProps, HTMLDivElement>
 
 export default ModalDimmer
diff --git a/src/modules/Modal/ModalHeader.d.ts b/src/modules/Modal/ModalHeader.d.ts
index e2489dfd50..a442aec047 100644
--- a/src/modules/Modal/ModalHeader.d.ts
+++ b/src/modules/Modal/ModalHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ModalHeaderProps extends StrictModalHeaderProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictModalHeaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const ModalHeader: React.FC<ModalHeaderProps>
+declare const ModalHeader: ForwardRefComponent<ModalHeaderProps, HTMLDivElement>
 
 export default ModalHeader
diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts
index 5e6e11d131..3322c1d0e9 100644
--- a/src/modules/Popup/Popup.d.ts
+++ b/src/modules/Popup/Popup.d.ts
@@ -141,11 +141,9 @@ export interface StrictPopupProps extends StrictPortalProps {
   wide?: boolean | 'very'
 }
 
-interface PopupComponent extends React.ComponentClass<PopupProps> {
+declare const Popup: React.FC<PopupProps> & {
   Content: typeof PopupContent
   Header: typeof PopupHeader
 }
 
-declare const Popup: PopupComponent
-
 export default Popup
diff --git a/src/modules/Popup/PopupContent.d.ts b/src/modules/Popup/PopupContent.d.ts
index 07b22ab1a7..aa5011f335 100644
--- a/src/modules/Popup/PopupContent.d.ts
+++ b/src/modules/Popup/PopupContent.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface PopupContentProps extends StrictPopupContentProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictPopupContentProps {
   content?: SemanticShorthandContent
 }
 
-declare const PopupContent: React.FC<PopupContentProps>
+declare const PopupContent: ForwardRefComponent<PopupContentProps, HTMLDivElement>
 
 export default PopupContent
diff --git a/src/modules/Popup/PopupHeader.d.ts b/src/modules/Popup/PopupHeader.d.ts
index 4a2b7543a3..47770a8e0f 100644
--- a/src/modules/Popup/PopupHeader.d.ts
+++ b/src/modules/Popup/PopupHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface PopupHeaderProps extends StrictPopupHeaderProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictPopupHeaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const PopupHeader: React.FC<PopupHeaderProps>
+declare const PopupHeader: ForwardRefComponent<PopupHeaderProps, HTMLDivElement>
 
 export default PopupHeader
diff --git a/src/modules/Progress/Progress.d.ts b/src/modules/Progress/Progress.d.ts
index dcb10459b6..2138a4ad0e 100644
--- a/src/modules/Progress/Progress.d.ts
+++ b/src/modules/Progress/Progress.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {
+  ForwardRefComponent,
   HtmlLabelProps,
   SemanticCOLORS,
   SemanticShorthandContent,
@@ -75,6 +76,6 @@ export interface StrictProgressProps {
   warning?: boolean
 }
 
-declare const Progress: React.ComponentClass<ProgressProps>
+declare const Progress: ForwardRefComponent<ProgressProps, HTMLDivElement>
 
 export default Progress
diff --git a/src/modules/Rating/Rating.d.ts b/src/modules/Rating/Rating.d.ts
index 0941e0cf36..5fccb4c1c3 100644
--- a/src/modules/Rating/Rating.d.ts
+++ b/src/modules/Rating/Rating.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import RatingIcon from './RatingIcon'
+import { ForwardRefComponent } from '../../generic'
 
 export interface RatingProps extends StrictRatingProps {
   [key: string]: any
@@ -46,10 +47,8 @@ export interface StrictRatingProps {
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'huge' | 'massive'
 }
 
-interface RatingComponent extends React.ComponentClass<RatingProps> {
+declare const Rating: ForwardRefComponent<RatingProps, HTMLDivElement> & {
   Icon: typeof RatingIcon
 }
 
-declare const Rating: RatingComponent
-
 export default Rating
diff --git a/src/modules/Rating/RatingIcon.d.ts b/src/modules/Rating/RatingIcon.d.ts
index b0d3ff6445..d36fc99236 100644
--- a/src/modules/Rating/RatingIcon.d.ts
+++ b/src/modules/Rating/RatingIcon.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface RatingIconProps extends StrictRatingIconProps {
   [key: string]: any
@@ -45,6 +46,6 @@ export interface StrictRatingIconProps {
   selected?: boolean
 }
 
-declare const RatingIcon: React.ComponentClass<RatingIconProps>
+declare const RatingIcon: ForwardRefComponent<RatingIconProps, HTMLElement>
 
 export default RatingIcon
diff --git a/src/modules/Search/Search.d.ts b/src/modules/Search/Search.d.ts
index ab83b7d57f..f35ca846b5 100644
--- a/src/modules/Search/Search.d.ts
+++ b/src/modules/Search/Search.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { InputProps } from '../../elements/Input'
 import SearchCategory, { SearchCategoryProps } from './SearchCategory'
 import SearchResult, { SearchResultProps } from './SearchResult'
@@ -65,7 +65,9 @@ export interface StrictSearchProps {
    * @param {object} props - The SearchCategoryLayout props object.
    * @returns {*} - Renderable SearchCategory layout.
    */
-  categoryLayoutRenderer?: (props: Pick<SearchCategoryLayoutProps, 'categoryContent' | 'resultsContent'>) => React.ReactElement<any>
+  categoryLayoutRenderer?: (
+    props: Pick<SearchCategoryLayoutProps, 'categoryContent' | 'resultsContent'>,
+  ) => React.ReactElement<any>
 
   /**
    * Renders the SearchCategory contents.
@@ -168,12 +170,10 @@ export interface SearchResultData extends SearchProps {
   result: any
 }
 
-interface SearchComponent extends React.ComponentClass<SearchProps> {
+declare const Search: ForwardRefComponent<SearchProps, HTMLDivElement> & {
   Category: typeof SearchCategory
   Result: typeof SearchResult
   Results: typeof SearchResults
 }
 
-declare const Search: SearchComponent
-
 export default Search
diff --git a/src/modules/Search/SearchCategory.d.ts b/src/modules/Search/SearchCategory.d.ts
index 3baf235451..3bc19c1081 100644
--- a/src/modules/Search/SearchCategory.d.ts
+++ b/src/modules/Search/SearchCategory.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 import { SearchCategoryLayoutProps } from './SearchCategoryLayout'
 import SearchResult from './SearchResult'
 
@@ -49,6 +49,6 @@ export interface StrictSearchCategoryProps {
   results?: typeof SearchResult[]
 }
 
-declare const SearchCategory: React.FC<SearchCategoryProps>
+declare const SearchCategory: ForwardRefComponent<SearchCategoryProps, HTMLDivElement>
 
 export default SearchCategory
diff --git a/src/modules/Search/SearchResult.d.ts b/src/modules/Search/SearchResult.d.ts
index 99efdf3785..824b493a47 100644
--- a/src/modules/Search/SearchResult.d.ts
+++ b/src/modules/Search/SearchResult.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface SearchResultProps extends StrictSearchResultProps {
   [key: string]: any
@@ -50,6 +50,6 @@ export interface StrictSearchResultProps {
   title: string
 }
 
-declare const SearchResult: React.ComponentClass<SearchResultProps>
+declare const SearchResult: ForwardRefComponent<SearchResultProps, HTMLDivElement>
 
 export default SearchResult
diff --git a/src/modules/Search/SearchResults.d.ts b/src/modules/Search/SearchResults.d.ts
index 139da005c5..effeb1af92 100644
--- a/src/modules/Search/SearchResults.d.ts
+++ b/src/modules/Search/SearchResults.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface SearchResultsProps extends StrictSearchResultsProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictSearchResultsProps {
   content?: SemanticShorthandContent
 }
 
-declare const SearchResults: React.FC<SearchResultsProps>
+declare const SearchResults: ForwardRefComponent<SearchResultsProps, HTMLDivElement>
 
 export default SearchResults
diff --git a/src/modules/Sidebar/Sidebar.d.ts b/src/modules/Sidebar/Sidebar.d.ts
index 5f17e16be7..353c807b18 100644
--- a/src/modules/Sidebar/Sidebar.d.ts
+++ b/src/modules/Sidebar/Sidebar.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 import SidebarPushable from './SidebarPushable'
 import SidebarPusher from './SidebarPusher'
@@ -69,11 +69,9 @@ export interface StrictSidebarProps {
   width?: 'very thin' | 'thin' | 'wide' | 'very wide'
 }
 
-interface SidebarComponent extends React.ComponentClass<SidebarProps> {
+declare const Sidebar: ForwardRefComponent<SidebarProps, HTMLDivElement> & {
   Pushable: typeof SidebarPushable
   Pusher: typeof SidebarPusher
 }
 
-declare const Sidebar: SidebarComponent
-
 export default Sidebar
diff --git a/src/modules/Sidebar/SidebarPushable.d.ts b/src/modules/Sidebar/SidebarPushable.d.ts
index 707af13109..524b12fdcf 100644
--- a/src/modules/Sidebar/SidebarPushable.d.ts
+++ b/src/modules/Sidebar/SidebarPushable.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface SidebarPushableProps extends StrictSidebarPushableProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictSidebarPushableProps {
   content?: SemanticShorthandContent
 }
 
-declare const SidebarPushable: React.FC<SidebarPushableProps>
+declare const SidebarPushable: ForwardRefComponent<SidebarPushableProps, HTMLDivElement>
 
 export default SidebarPushable
diff --git a/src/modules/Sidebar/SidebarPusher.d.ts b/src/modules/Sidebar/SidebarPusher.d.ts
index 67f453345f..60f78cb468 100644
--- a/src/modules/Sidebar/SidebarPusher.d.ts
+++ b/src/modules/Sidebar/SidebarPusher.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface SidebarPusherProps extends StrictSidebarPusherProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictSidebarPusherProps {
   dimmed?: boolean
 }
 
-declare const SidebarPusher: React.FC<SidebarPusherProps>
+declare const SidebarPusher: ForwardRefComponent<SidebarPusherProps, HTMLDivElement>
 
 export default SidebarPusher
diff --git a/src/modules/Sticky/Sticky.d.ts b/src/modules/Sticky/Sticky.d.ts
index 24a7b80daa..c43b4900a6 100644
--- a/src/modules/Sticky/Sticky.d.ts
+++ b/src/modules/Sticky/Sticky.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface StickyProps extends StrictStickyProps {
   [key: string]: any
@@ -68,6 +69,6 @@ export interface StrictStickyProps {
   styleElement?: React.CSSProperties
 }
 
-declare const Sticky: React.ComponentClass<StickyProps>
+declare const Sticky: ForwardRefComponent<StickyProps, HTMLDivElement>
 
 export default Sticky
diff --git a/src/modules/Tab/Tab.d.ts b/src/modules/Tab/Tab.d.ts
index 223a5a4e3a..844a2dbef1 100644
--- a/src/modules/Tab/Tab.d.ts
+++ b/src/modules/Tab/Tab.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import TabPane, { TabPaneProps } from './TabPane'
 
 export interface TabProps extends StrictTabProps {
@@ -58,10 +58,6 @@ export interface StrictTabProps {
   renderActiveOnly?: boolean
 }
 
-interface TabComponent extends React.ComponentClass<TabProps> {
-  Pane: typeof TabPane
-}
-
-declare const Tab: TabComponent
+declare const Tab: ForwardRefComponent<TabProps, HTMLDivElement>
 
 export default Tab
diff --git a/src/modules/Tab/TabPane.d.ts b/src/modules/Tab/TabPane.d.ts
index ba8930e752..77149a932f 100644
--- a/src/modules/Tab/TabPane.d.ts
+++ b/src/modules/Tab/TabPane.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface TabPaneProps extends StrictTabPaneProps {
   [key: string]: any
@@ -25,6 +25,6 @@ export interface StrictTabPaneProps {
   loading?: boolean
 }
 
-declare const TabPane: React.FC<TabPaneProps>
+declare const TabPane: ForwardRefComponent<TabPaneProps, HTMLDivElement>
 
 export default TabPane
diff --git a/src/modules/Transition/Transition.d.ts b/src/modules/Transition/Transition.d.ts
index b7d7483fc2..b7463df915 100644
--- a/src/modules/Transition/Transition.d.ts
+++ b/src/modules/Transition/Transition.d.ts
@@ -81,12 +81,6 @@ export interface TransitionPropDuration {
 
 interface TransitionComponent extends React.ComponentClass<TransitionProps> {
   Group: typeof TransitionGroup
-
-  ENTERED: 'ENTERED'
-  ENTERING: 'ENTERING'
-  EXITED: 'EXITED'
-  EXITING: 'EXITING'
-  UNMOUNTED: 'UNMOUNTED'
 }
 
 declare const Transition: TransitionComponent
diff --git a/src/modules/Transition/TransitionGroup.d.ts b/src/modules/Transition/TransitionGroup.d.ts
index a1e72d92c1..52131782b8 100644
--- a/src/modules/Transition/TransitionGroup.d.ts
+++ b/src/modules/Transition/TransitionGroup.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticTRANSITIONS } from '../../generic'
+import { ForwardRefComponent, SemanticTRANSITIONS } from '../../generic'
 import { TransitionPropDuration } from './Transition'
 
 export interface TransitionGroupProps extends StrictTransitionGroupProps {
@@ -24,8 +24,6 @@ export interface StrictTransitionGroupProps {
   duration?: number | string | TransitionPropDuration
 }
 
-interface TransitionGroupComponent extends React.ComponentClass<TransitionGroupProps> {}
-
-declare const TransitionGroup: TransitionGroupComponent
+declare const TransitionGroup: ForwardRefComponent<TransitionGroupProps, HTMLDivElement>
 
 export default TransitionGroup
diff --git a/src/views/Advertisement/Advertisement.d.ts b/src/views/Advertisement/Advertisement.d.ts
index ef37445b18..5c0c7a231b 100644
--- a/src/views/Advertisement/Advertisement.d.ts
+++ b/src/views/Advertisement/Advertisement.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface AdvertisementProps extends StrictAdvertisementProps {
   [key: string]: any
@@ -51,6 +51,6 @@ export interface StrictAdvertisementProps {
     | 'small square'
 }
 
-declare const Advertisement: React.FC<AdvertisementProps>
+declare const Advertisement: ForwardRefComponent<AdvertisementProps, HTMLDivElement>
 
 export default Advertisement
diff --git a/src/views/Card/Card.d.ts b/src/views/Card/Card.d.ts
index a23b366532..d3c78541ad 100644
--- a/src/views/Card/Card.d.ts
+++ b/src/views/Card/Card.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { SemanticCOLORS, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticCOLORS,
+  SemanticShorthandContent,
+  SemanticShorthandItem,
+} from '../../generic'
 import { ImageProps } from '../../elements/Image'
 import CardContent from './CardContent'
 import CardDescription, { CardDescriptionProps } from './CardDescription'
@@ -68,7 +73,7 @@ export interface StrictCardProps {
   raised?: boolean
 }
 
-interface CardComponent extends React.ComponentClass<CardProps> {
+declare const Card: ForwardRefComponent<CardProps, HTMLDivElement> & {
   Content: typeof CardContent
   Description: typeof CardDescription
   Group: typeof CardGroup
@@ -76,6 +81,4 @@ interface CardComponent extends React.ComponentClass<CardProps> {
   Meta: typeof CardMeta
 }
 
-declare const Card: CardComponent
-
 export default Card
diff --git a/src/views/Card/CardContent.d.ts b/src/views/Card/CardContent.d.ts
index fcdd79e064..2326ca2e02 100644
--- a/src/views/Card/CardContent.d.ts
+++ b/src/views/Card/CardContent.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { CardDescriptionProps } from './CardDescription'
 import { CardHeaderProps } from './CardHeader'
 import { CardMetaProps } from './CardMeta'
@@ -38,6 +38,6 @@ export interface StrictCardContentProps {
   textAlign?: 'center' | 'left' | 'right'
 }
 
-declare const CardContent: React.FC<CardContentProps>
+declare const CardContent: ForwardRefComponent<CardContentProps, HTMLDivElement>
 
 export default CardContent
diff --git a/src/views/Card/CardDescription.d.ts b/src/views/Card/CardDescription.d.ts
index b1d7d46f78..0903baa29e 100644
--- a/src/views/Card/CardDescription.d.ts
+++ b/src/views/Card/CardDescription.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CardDescriptionProps extends StrictCardDescriptionProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictCardDescriptionProps {
   textAlign?: 'center' | 'left' | 'right'
 }
 
-declare const CardDescription: React.FC<CardDescriptionProps>
+declare const CardDescription: ForwardRefComponent<CardDescriptionProps, HTMLDivElement>
 
 export default CardDescription
diff --git a/src/views/Card/CardGroup.d.ts b/src/views/Card/CardGroup.d.ts
index a2bbce91fc..b7a7d36dc1 100644
--- a/src/views/Card/CardGroup.d.ts
+++ b/src/views/Card/CardGroup.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticShorthandCollection,
   SemanticShorthandContent,
   SemanticWIDTHS,
@@ -43,6 +44,6 @@ export interface StrictCardGroupProps {
   textAlign?: 'center' | 'left' | 'right'
 }
 
-declare const CardGroup: React.FC<CardGroupProps>
+declare const CardGroup: ForwardRefComponent<CardGroupProps, HTMLDivElement>
 
 export default CardGroup
diff --git a/src/views/Card/CardHeader.d.ts b/src/views/Card/CardHeader.d.ts
index ae84eb5953..4bd8aa751e 100644
--- a/src/views/Card/CardHeader.d.ts
+++ b/src/views/Card/CardHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CardHeaderProps extends StrictCardHeaderProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictCardHeaderProps {
   textAlign?: 'center' | 'left' | 'right'
 }
 
-declare const CardHeader: React.FC<CardHeaderProps>
+declare const CardHeader: ForwardRefComponent<CardHeaderProps, HTMLDivElement>
 
 export default CardHeader
diff --git a/src/views/Card/CardMeta.d.ts b/src/views/Card/CardMeta.d.ts
index c8bb94e252..97e6185f40 100644
--- a/src/views/Card/CardMeta.d.ts
+++ b/src/views/Card/CardMeta.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CardMetaProps extends StrictCardMetaProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictCardMetaProps {
   textAlign?: 'center' | 'left' | 'right'
 }
 
-declare const CardMeta: React.FC<CardMetaProps>
+declare const CardMeta: ForwardRefComponent<CardMetaProps, HTMLDivElement>
 
 export default CardMeta
diff --git a/src/views/Comment/Comment.d.ts b/src/views/Comment/Comment.d.ts
index 54cd13b734..beebd4ddb8 100644
--- a/src/views/Comment/Comment.d.ts
+++ b/src/views/Comment/Comment.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 import CommentAction from './CommentAction'
 import CommentActions from './CommentActions'
 import CommentAuthor from './CommentAuthor'
@@ -31,7 +31,7 @@ export interface StrictCommentProps {
   content?: SemanticShorthandContent
 }
 
-interface CommentComponent extends React.FC<CommentProps> {
+declare const Comment: ForwardRefComponent<CommentProps, HTMLDivElement> & {
   Action: typeof CommentAction
   Actions: typeof CommentActions
   Author: typeof CommentAuthor
@@ -42,6 +42,4 @@ interface CommentComponent extends React.FC<CommentProps> {
   Text: typeof CommentText
 }
 
-declare const Comment: CommentComponent
-
 export default Comment
diff --git a/src/views/Comment/CommentAction.d.ts b/src/views/Comment/CommentAction.d.ts
index 2027be1fb8..6b0b48dd7e 100644
--- a/src/views/Comment/CommentAction.d.ts
+++ b/src/views/Comment/CommentAction.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CommentActionProps extends StrictCommentActionProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictCommentActionProps {
   content?: SemanticShorthandContent
 }
 
-declare const CommentAction: React.ComponentClass<CommentActionProps>
+declare const CommentAction: ForwardRefComponent<CommentActionProps, HTMLDivElement>
 
 export default CommentAction
diff --git a/src/views/Comment/CommentActions.d.ts b/src/views/Comment/CommentActions.d.ts
index b293bb3112..3540a66758 100644
--- a/src/views/Comment/CommentActions.d.ts
+++ b/src/views/Comment/CommentActions.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CommentActionsProps extends StrictCommentActionsProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictCommentActionsProps {
   content?: SemanticShorthandContent
 }
 
-declare const CommentActions: React.FC<CommentActionsProps>
+declare const CommentActions: ForwardRefComponent<CommentActionsProps, HTMLDivElement>
 
 export default CommentActions
diff --git a/src/views/Comment/CommentAuthor.d.ts b/src/views/Comment/CommentAuthor.d.ts
index 5fe80167ec..3963653e99 100644
--- a/src/views/Comment/CommentAuthor.d.ts
+++ b/src/views/Comment/CommentAuthor.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CommentAuthorProps extends StrictCommentAuthorProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictCommentAuthorProps {
   content?: SemanticShorthandContent
 }
 
-declare const CommentAuthor: React.FC<CommentAuthorProps>
+declare const CommentAuthor: ForwardRefComponent<CommentAuthorProps, HTMLDivElement>
 
 export default CommentAuthor
diff --git a/src/views/Comment/CommentAvatar.d.ts b/src/views/Comment/CommentAvatar.d.ts
index cf5fdb09c1..96f6ea8fc9 100644
--- a/src/views/Comment/CommentAvatar.d.ts
+++ b/src/views/Comment/CommentAvatar.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '../../generic'
 
 export interface CommentAvatarProps extends StrictCommentAvatarProps {
   [key: string]: any
@@ -15,6 +15,6 @@ export interface StrictCommentAvatarProps {
   src?: string
 }
 
-declare const CommentAvatar: React.FC<CommentAvatarProps>
+declare const CommentAvatar: ForwardRefComponent<CommentAvatarProps, HTMLDivElement>
 
 export default CommentAvatar
diff --git a/src/views/Comment/CommentContent.d.ts b/src/views/Comment/CommentContent.d.ts
index 91dc324b82..f0fd2d55f3 100644
--- a/src/views/Comment/CommentContent.d.ts
+++ b/src/views/Comment/CommentContent.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CommentContentProps extends StrictCommentContentProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictCommentContentProps {
   content?: SemanticShorthandContent
 }
 
-declare const CommentContent: React.FC<CommentContentProps>
+declare const CommentContent: ForwardRefComponent<CommentContentProps, HTMLDivElement>
 
 export default CommentContent
diff --git a/src/views/Comment/CommentGroup.d.ts b/src/views/Comment/CommentGroup.d.ts
index 244d83ebc0..6fc2d9ed42 100644
--- a/src/views/Comment/CommentGroup.d.ts
+++ b/src/views/Comment/CommentGroup.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CommentGroupProps extends StrictCommentGroupProps {
   [key: string]: any
@@ -31,6 +31,6 @@ export interface StrictCommentGroupProps {
   threaded?: boolean
 }
 
-declare const CommentGroup: React.FC<CommentGroupProps>
+declare const CommentGroup: ForwardRefComponent<CommentGroupProps, HTMLDivElement>
 
 export default CommentGroup
diff --git a/src/views/Comment/CommentMetadata.d.ts b/src/views/Comment/CommentMetadata.d.ts
index afd2e8eaaa..3b3fd802c2 100644
--- a/src/views/Comment/CommentMetadata.d.ts
+++ b/src/views/Comment/CommentMetadata.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CommentMetadataProps extends StrictCommentMetadataProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictCommentMetadataProps {
   content?: SemanticShorthandContent
 }
 
-declare const CommentMetadata: React.FC<CommentMetadataProps>
+declare const CommentMetadata: ForwardRefComponent<CommentMetadataProps, HTMLDivElement>
 
 export default CommentMetadata
diff --git a/src/views/Comment/CommentText.d.ts b/src/views/Comment/CommentText.d.ts
index c24f972eb4..b3aea9f1e3 100644
--- a/src/views/Comment/CommentText.d.ts
+++ b/src/views/Comment/CommentText.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface CommentTextProps extends StrictCommentTextProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictCommentTextProps {
   content?: SemanticShorthandContent
 }
 
-declare const CommentText: React.FC<CommentTextProps>
+declare const CommentText: ForwardRefComponent<CommentTextProps, HTMLDivElement>
 
 export default CommentText
diff --git a/src/views/Feed/Feed.d.ts b/src/views/Feed/Feed.d.ts
index 57ec9827d8..d3abddf8c9 100644
--- a/src/views/Feed/Feed.d.ts
+++ b/src/views/Feed/Feed.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandCollection } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandCollection } from '../../generic'
 import FeedContent from './FeedContent'
 import FeedDate from './FeedDate'
 import FeedEvent, { FeedEventProps } from './FeedEvent'
@@ -32,7 +32,7 @@ export interface StrictFeedProps {
   size?: 'small' | 'large'
 }
 
-interface FeedComponent extends React.FC<FeedProps> {
+declare const Feed: ForwardRefComponent<FeedProps, HTMLDivElement> & {
   Content: typeof FeedContent
   Date: typeof FeedDate
   Event: typeof FeedEvent
@@ -44,6 +44,4 @@ interface FeedComponent extends React.FC<FeedProps> {
   User: typeof FeedUser
 }
 
-declare const Feed: FeedComponent
-
 export default Feed
diff --git a/src/views/Feed/FeedContent.d.ts b/src/views/Feed/FeedContent.d.ts
index 165c4d15db..4fe4fbd306 100644
--- a/src/views/Feed/FeedContent.d.ts
+++ b/src/views/Feed/FeedContent.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { FeedDateProps } from './FeedDate'
 import { FeedExtraProps } from './FeedExtra'
 import { FeedMetaProps } from './FeedMeta'
@@ -39,6 +39,6 @@ export interface StrictFeedContentProps {
   summary?: SemanticShorthandItem<FeedSummaryProps>
 }
 
-declare const FeedContent: React.FC<FeedContentProps>
+declare const FeedContent: ForwardRefComponent<FeedContentProps, HTMLDivElement>
 
 export default FeedContent
diff --git a/src/views/Feed/FeedDate.d.ts b/src/views/Feed/FeedDate.d.ts
index 7b8f85db4f..2c70faacf7 100644
--- a/src/views/Feed/FeedDate.d.ts
+++ b/src/views/Feed/FeedDate.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface FeedDateProps extends StrictFeedDateProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictFeedDateProps {
   content?: SemanticShorthandContent
 }
 
-declare const FeedDate: React.FC<FeedDateProps>
+declare const FeedDate: ForwardRefComponent<FeedDateProps, HTMLDivElement>
 
 export default FeedDate
diff --git a/src/views/Feed/FeedEvent.d.ts b/src/views/Feed/FeedEvent.d.ts
index b4ad2e8891..4aee9432ca 100644
--- a/src/views/Feed/FeedEvent.d.ts
+++ b/src/views/Feed/FeedEvent.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import { FeedContentProps } from './FeedContent'
 import { FeedDateProps } from './FeedDate'
 import { FeedLabelProps } from './FeedLabel'
@@ -47,6 +47,6 @@ export interface StrictFeedEventProps {
   summary?: SemanticShorthandItem<FeedSummaryProps>
 }
 
-declare const FeedEvent: React.FC<FeedEventProps>
+declare const FeedEvent: ForwardRefComponent<FeedEventProps, HTMLDivElement>
 
 export default FeedEvent
diff --git a/src/views/Feed/FeedExtra.d.ts b/src/views/Feed/FeedExtra.d.ts
index 917cd57f12..31ca13d848 100644
--- a/src/views/Feed/FeedExtra.d.ts
+++ b/src/views/Feed/FeedExtra.d.ts
@@ -3,6 +3,7 @@ import {
   HtmlImageProps,
   SemanticShorthandContent,
   SemanticShorthandCollection,
+  ForwardRefComponent,
 } from '../../generic'
 
 export interface FeedExtraProps extends StrictFeedExtraProps {
@@ -29,6 +30,6 @@ export interface StrictFeedExtraProps {
   text?: boolean
 }
 
-declare const FeedExtra: React.FC<FeedExtraProps>
+declare const FeedExtra: ForwardRefComponent<FeedExtraProps, HTMLDivElement>
 
 export default FeedExtra
diff --git a/src/views/Feed/FeedLabel.d.ts b/src/views/Feed/FeedLabel.d.ts
index e1e233c89c..7399893917 100644
--- a/src/views/Feed/FeedLabel.d.ts
+++ b/src/views/Feed/FeedLabel.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { HtmlImageProps, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import {
+  ForwardRefComponent,
+  HtmlImageProps,
+  SemanticShorthandContent,
+  SemanticShorthandItem,
+} from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface FeedLabelProps extends StrictFeedLabelProps {
@@ -27,6 +32,6 @@ export interface StrictFeedLabelProps {
   image?: SemanticShorthandItem<HtmlImageProps>
 }
 
-declare const FeedLabel: React.FC<FeedLabelProps>
+declare const FeedLabel: ForwardRefComponent<FeedLabelProps, HTMLDivElement>
 
 export default FeedLabel
diff --git a/src/views/Feed/FeedLike.d.ts b/src/views/Feed/FeedLike.d.ts
index e8abf37e3f..62f84793f4 100644
--- a/src/views/Feed/FeedLike.d.ts
+++ b/src/views/Feed/FeedLike.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface FeedLikeProps extends StrictFeedLikeProps {
@@ -24,6 +24,6 @@ export interface StrictFeedLikeProps {
   icon?: SemanticShorthandItem<IconProps>
 }
 
-declare const FeedLike: React.FC<FeedLikeProps>
+declare const FeedLike: ForwardRefComponent<FeedLikeProps, HTMLDivElement>
 
 export default FeedLike
diff --git a/src/views/Feed/FeedMeta.d.ts b/src/views/Feed/FeedMeta.d.ts
index 6f6eac8fc0..193dc3df51 100644
--- a/src/views/Feed/FeedMeta.d.ts
+++ b/src/views/Feed/FeedMeta.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { FeedLikeProps } from './FeedLike'
 
 export interface FeedMetaProps extends StrictFeedMetaProps {
@@ -24,6 +24,6 @@ export interface StrictFeedMetaProps {
   like?: SemanticShorthandItem<FeedLikeProps>
 }
 
-declare const FeedMeta: React.FC<FeedMetaProps>
+declare const FeedMeta: ForwardRefComponent<FeedMetaProps, HTMLDivElement>
 
 export default FeedMeta
diff --git a/src/views/Feed/FeedSummary.d.ts b/src/views/Feed/FeedSummary.d.ts
index 0a32c931f5..149871845c 100644
--- a/src/views/Feed/FeedSummary.d.ts
+++ b/src/views/Feed/FeedSummary.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { FeedDateProps } from './FeedDate'
 import { FeedUserProps } from './FeedUser'
 
@@ -28,6 +28,6 @@ export interface StrictFeedSummaryProps {
   user?: SemanticShorthandItem<FeedUserProps>
 }
 
-declare const FeedSummary: React.FC<FeedSummaryProps>
+declare const FeedSummary: ForwardRefComponent<FeedSummaryProps, HTMLDivElement>
 
 export default FeedSummary
diff --git a/src/views/Feed/FeedUser.d.ts b/src/views/Feed/FeedUser.d.ts
index 8ed31b8d4c..58e088aadd 100644
--- a/src/views/Feed/FeedUser.d.ts
+++ b/src/views/Feed/FeedUser.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface FeedUserProps extends StrictFeedUserProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictFeedUserProps {
   content?: SemanticShorthandContent
 }
 
-declare const FeedUser: React.FC<FeedUserProps>
+declare const FeedUser: ForwardRefComponent<FeedUserProps, HTMLAnchorElement>
 
 export default FeedUser
diff --git a/src/views/Item/Item.d.ts b/src/views/Item/Item.d.ts
index 033e3a08d9..e20d71ba4e 100644
--- a/src/views/Item/Item.d.ts
+++ b/src/views/Item/Item.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import ItemContent from './ItemContent'
 import ItemDescription, { ItemDescriptionProps } from './ItemDescription'
 import ItemExtra, { ItemExtraProps } from './ItemExtra'
@@ -42,7 +42,7 @@ export interface StrictItemProps {
   meta?: SemanticShorthandItem<ItemMetaProps>
 }
 
-interface ItemComponent extends React.FC<ItemProps> {
+declare const Item: ForwardRefComponent<ItemProps, HTMLDivElement> & {
   Content: typeof ItemContent
   Description: typeof ItemDescription
   Extra: typeof ItemExtra
@@ -52,6 +52,4 @@ interface ItemComponent extends React.FC<ItemProps> {
   Meta: typeof ItemMeta
 }
 
-declare const Item: ItemComponent
-
 export default Item
diff --git a/src/views/Item/ItemContent.d.ts b/src/views/Item/ItemContent.d.ts
index 91701e823e..9f575b6db7 100644
--- a/src/views/Item/ItemContent.d.ts
+++ b/src/views/Item/ItemContent.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticShorthandContent,
   SemanticShorthandItem,
   SemanticVERTICALALIGNMENTS,
@@ -43,6 +44,6 @@ export interface StrictItemContentProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-declare const ItemContent: React.ComponentClass<ItemContentProps>
+declare const ItemContent: ForwardRefComponent<ItemContentProps, HTMLDivElement>
 
 export default ItemContent
diff --git a/src/views/Item/ItemDescription.d.ts b/src/views/Item/ItemDescription.d.ts
index f3e5a51012..469104ab77 100644
--- a/src/views/Item/ItemDescription.d.ts
+++ b/src/views/Item/ItemDescription.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ItemDescriptionProps extends StrictItemDescriptionProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictItemDescriptionProps {
   content?: SemanticShorthandContent
 }
 
-declare const ItemDescription: React.FC<ItemDescriptionProps>
+declare const ItemDescription: ForwardRefComponent<ItemDescriptionProps, HTMLDivElement>
 
 export default ItemDescription
diff --git a/src/views/Item/ItemExtra.d.ts b/src/views/Item/ItemExtra.d.ts
index daa980c05c..c5eb3fb448 100644
--- a/src/views/Item/ItemExtra.d.ts
+++ b/src/views/Item/ItemExtra.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ItemExtraProps extends StrictItemExtraProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictItemExtraProps {
   content?: SemanticShorthandContent
 }
 
-declare const ItemExtra: React.FC<ItemExtraProps>
+declare const ItemExtra: ForwardRefComponent<ItemExtraProps, HTMLDivElement>
 
 export default ItemExtra
diff --git a/src/views/Item/ItemGroup.d.ts b/src/views/Item/ItemGroup.d.ts
index 7e180c1f99..94b828fcc4 100644
--- a/src/views/Item/ItemGroup.d.ts
+++ b/src/views/Item/ItemGroup.d.ts
@@ -1,6 +1,10 @@
 import * as React from 'react'
 
-import { SemanticShorthandCollection, SemanticShorthandContent } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticShorthandCollection,
+  SemanticShorthandContent,
+} from '../../generic'
 import { ItemProps } from './Item'
 
 export interface ItemGroupProps extends StrictItemGroupProps {
@@ -36,6 +40,6 @@ export interface StrictItemGroupProps {
   unstackable?: boolean
 }
 
-declare const ItemGroup: React.FC<ItemGroupProps>
+declare const ItemGroup: ForwardRefComponent<ItemGroupProps, HTMLDivElement>
 
 export default ItemGroup
diff --git a/src/views/Item/ItemHeader.d.ts b/src/views/Item/ItemHeader.d.ts
index aa80207703..8d4aca55f9 100644
--- a/src/views/Item/ItemHeader.d.ts
+++ b/src/views/Item/ItemHeader.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ItemHeaderProps extends StrictItemHeaderProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictItemHeaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const ItemHeader: React.FC<ItemHeaderProps>
+declare const ItemHeader: ForwardRefComponent<ItemHeaderProps, HTMLDivElement>
 
 export default ItemHeader
diff --git a/src/views/Item/ItemImage.d.ts b/src/views/Item/ItemImage.d.ts
index d19c8009d5..fc0bf3cf51 100644
--- a/src/views/Item/ItemImage.d.ts
+++ b/src/views/Item/ItemImage.d.ts
@@ -1,7 +1,5 @@
-import * as React from 'react'
-
 import { ImageProps, StrictImageProps } from '../../elements/Image'
-import { SemanticSIZES } from '../../generic'
+import { ForwardRefComponent, SemanticSIZES } from '../../generic'
 
 export interface ItemImageProps extends ImageProps {
   [key: string]: any
@@ -15,6 +13,6 @@ export interface StrictItemImageProps extends StrictImageProps {
   size?: SemanticSIZES
 }
 
-declare const ItemImage: React.FC<ItemImageProps>
+declare const ItemImage: ForwardRefComponent<ItemImageProps, HTMLImageElement>
 
 export default ItemImage
diff --git a/src/views/Item/ItemMeta.d.ts b/src/views/Item/ItemMeta.d.ts
index 3eba3df2bf..9311147f33 100644
--- a/src/views/Item/ItemMeta.d.ts
+++ b/src/views/Item/ItemMeta.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface ItemMetaProps extends StrictItemMetaProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictItemMetaProps {
   content?: SemanticShorthandContent
 }
 
-declare const ItemMeta: React.FC<ItemMetaProps>
+declare const ItemMeta: ForwardRefComponent<ItemMetaProps, HTMLDivElement>
 
 export default ItemMeta
diff --git a/src/views/Statistic/Statistic.d.ts b/src/views/Statistic/Statistic.d.ts
index 833509e5c9..de0196bb89 100644
--- a/src/views/Statistic/Statistic.d.ts
+++ b/src/views/Statistic/Statistic.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
-import { SemanticCOLORS, SemanticFLOATS, SemanticShorthandContent } from '../../generic'
+import {
+  ForwardRefComponent,
+  SemanticCOLORS,
+  SemanticFLOATS,
+  SemanticShorthandContent,
+} from '../../generic'
 import StatisticGroup from './StatisticGroup'
 import StatisticLabel from './StatisticLabel'
 import StatisticValue from './StatisticValue'
@@ -49,12 +54,10 @@ export interface StrictStatisticProps {
   value?: SemanticShorthandContent
 }
 
-interface StatisticComponent extends React.FC<StatisticProps> {
+declare const Statistic: ForwardRefComponent<StatisticProps, HTMLDivElement> & {
   Group: typeof StatisticGroup
   Label: typeof StatisticLabel
   Value: typeof StatisticValue
 }
 
-declare const Statistic: StatisticComponent
-
 export default Statistic
diff --git a/src/views/Statistic/StatisticGroup.d.ts b/src/views/Statistic/StatisticGroup.d.ts
index 3177db357c..ff81b6aa98 100644
--- a/src/views/Statistic/StatisticGroup.d.ts
+++ b/src/views/Statistic/StatisticGroup.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  ForwardRefComponent,
   SemanticCOLORS,
   SemanticShorthandCollection,
   SemanticShorthandContent,
@@ -44,6 +45,6 @@ export interface StrictStatisticGroupProps {
   widths?: SemanticWIDTHS
 }
 
-declare const StatisticGroup: React.FC<StatisticGroupProps>
+declare const StatisticGroup: ForwardRefComponent<StatisticGroupProps, HTMLDivElement>
 
 export default StatisticGroup
diff --git a/src/views/Statistic/StatisticLabel.d.ts b/src/views/Statistic/StatisticLabel.d.ts
index 024e64c3cf..754b0fd3ec 100644
--- a/src/views/Statistic/StatisticLabel.d.ts
+++ b/src/views/Statistic/StatisticLabel.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface StatisticLabelProps extends StrictStatisticLabelProps {
   [key: string]: any
@@ -19,6 +19,6 @@ export interface StrictStatisticLabelProps {
   content?: SemanticShorthandContent
 }
 
-declare const StatisticLabel: React.FC<StatisticLabelProps>
+declare const StatisticLabel: ForwardRefComponent<StatisticLabelProps, HTMLDivElement>
 
 export default StatisticLabel
diff --git a/src/views/Statistic/StatisticValue.d.ts b/src/views/Statistic/StatisticValue.d.ts
index 5ab99becea..ec86289ed3 100644
--- a/src/views/Statistic/StatisticValue.d.ts
+++ b/src/views/Statistic/StatisticValue.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+import { ForwardRefComponent, SemanticShorthandContent } from '../../generic'
 
 export interface StatisticValueProps extends StrictStatisticValueProps {
   [key: string]: any
@@ -22,6 +22,6 @@ export interface StrictStatisticValueProps {
   text?: boolean
 }
 
-declare const StatisticValue: React.FC<StatisticValueProps>
+declare const StatisticValue: ForwardRefComponent<StatisticValueProps, HTMLDivElement>
 
 export default StatisticValue
diff --git a/test/specs/addons/Portal/Portal-test.js b/test/specs/addons/Portal/Portal-test.js
index 9d6900b1b2..099ce9d897 100644
--- a/test/specs/addons/Portal/Portal-test.js
+++ b/test/specs/addons/Portal/Portal-test.js
@@ -38,7 +38,7 @@ describe('Portal', () => {
   })
 
   common.hasSubcomponents(Portal, [PortalInner])
-  common.hasValidTypings(Portal)
+  common.hasValidTypings(Portal, { forwardsRef: false })
 
   it('propTypes.children should be required', () => {
     Portal.propTypes.children.should.equal(PropTypes.node.isRequired)
diff --git a/test/specs/addons/Portal/PortalInner-test.js b/test/specs/addons/Portal/PortalInner-test.js
index 47af45d2e4..2eadf22b2f 100644
--- a/test/specs/addons/Portal/PortalInner-test.js
+++ b/test/specs/addons/Portal/PortalInner-test.js
@@ -10,6 +10,7 @@ describe('PortalInner', () => {
   common.isConformant(PortalInner, {
     rendersChildren: false,
     requiredProps: { children: <p /> },
+    forwardsRef: false,
   })
 
   describe('children', () => {
diff --git a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
index b335e9cab7..b69a195d34 100644
--- a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
+++ b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
@@ -13,6 +13,7 @@ describe('TransitionablePortal', () => {
   common.isConformant(TransitionablePortal, {
     rendersPortal: true,
     requiredProps,
+    forwardsRef: false,
   })
 
   describe('children', () => {
diff --git a/test/specs/commonTests/hasValidTypings.js b/test/specs/commonTests/hasValidTypings.js
index 279b07e3ff..cb6ef0066f 100644
--- a/test/specs/commonTests/hasValidTypings.js
+++ b/test/specs/commonTests/hasValidTypings.js
@@ -3,7 +3,14 @@ import _ from 'lodash'
 import { customPropTypes } from 'src/lib'
 import { componentInfoContext } from 'docs/src/utils'
 import { getComponentName, getComponentProps } from 'test/utils'
-import { getNodes, getInterfaces, hasAnySignature, requireTs } from './tsHelpers'
+import {
+  getNodes,
+  getInterfaces,
+  hasAnySignature,
+  requireTs,
+  getComponentType,
+  isForwardRefComponent,
+} from './tsHelpers'
 
 const isShorthand = (propType) =>
   _.includes(
@@ -23,14 +30,14 @@ const shorthandMap = {
 /**
  * Assert Component has the valid typings.
  * @param {React.Component|Function} Component A component that should conform.
- * @param {Object} [componentInfo] The *.info.json for the Component
  * @param {Object} [options={}]
  * @param {array} [options.ignoredTypingsProps=[]] Props that will be ignored in tests.
  * @param {Object} [options.requiredProps={}] Props required to render Component without errors or warnings.
+ * @param {Object} [options.forwardsRef=true] Indicates if component forwards refs.
  */
-export default function hasValidTypings(Component, componentInfo, options = {}) {
+export default function hasValidTypings(Component, options = {}) {
   const { displayName, repoPath } = componentInfoContext.byDisplayName[getComponentName(Component)]
-  const { ignoredTypingsProps = [], requiredProps } = options
+  const { ignoredTypingsProps = [], forwardsRef = true, requiredProps } = options
 
   const tsFile = repoPath.replace('src/', '').replace('.js', '.d.ts')
   const tsContent = requireTs(tsFile)
@@ -43,6 +50,7 @@ export default function hasValidTypings(Component, componentInfo, options = {})
     })
 
     const tsNodes = getNodes(tsFile, tsContent)
+    const componentType = getComponentType(tsNodes, displayName)
 
     const propsInterfaceName = `${displayName}Props`
     const strictInterfaceName = `Strict${displayName}Props`
@@ -50,6 +58,18 @@ export default function hasValidTypings(Component, componentInfo, options = {})
     const propsInterfaceObject = _.find(getInterfaces(tsNodes), { name: propsInterfaceName })
     const strictInterfaceObject = _.find(getInterfaces(tsNodes), { name: strictInterfaceName })
 
+    describe(`component ${displayName}`, () => {
+      it('has component type', () => {
+        componentType.should.to.be.an('object')
+      })
+
+      if (forwardsRef) {
+        it('is ForwardRefComponent', () => {
+          isForwardRefComponent(componentType).should.to.equal(true)
+        })
+      }
+    })
+
     describe(`interface ${propsInterfaceName}`, () => {
       it('has interface', () => {
         propsInterfaceObject.should.to.be.an('object')
diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
index 754500296b..616e7de4e6 100644
--- a/test/specs/commonTests/isConformant.js
+++ b/test/specs/commonTests/isConformant.js
@@ -26,6 +26,7 @@ import hasValidTypings from './hasValidTypings'
  * @param {boolean} [options.rendersFragmentByDefault=false] Does this component renders React.Fragment by default?
  * @param {boolean} [options.rendersPortal=false] Does this component render a Portal powered component?
  * @param {Object} [options.requiredProps={}] Props required to render Component without errors or warnings.
+ * @param {Object} [options.forwardsRef=true] Indicates if component forwards refs.
  */
 export default function isConformant(Component, options = {}) {
   const {
@@ -394,5 +395,5 @@ export default function isConformant(Component, options = {}) {
   // ----------------------------------------
   // Test typings
   // ----------------------------------------
-  hasValidTypings(Component, info, options)
+  hasValidTypings(Component, options)
 }
diff --git a/test/specs/commonTests/tsHelpers.js b/test/specs/commonTests/tsHelpers.js
index eae8103b80..e9ec99d1b5 100644
--- a/test/specs/commonTests/tsHelpers.js
+++ b/test/specs/commonTests/tsHelpers.js
@@ -7,6 +7,7 @@ const isInterface = ({ kind }) => kind === SyntaxKind.InterfaceDeclaration
 const isExportModifier = ({ kind }) => kind === SyntaxKind.ExportKeyword
 const isPropertySignature = ({ kind }) => kind === SyntaxKind.PropertySignature
 const isTypeReference = ({ kind }) => kind === SyntaxKind.TypeReference
+const isIntersectionType = ({ kind }) => kind === SyntaxKind.IntersectionType
 const isShorthandProperty = (node) => {
   if (!isPropertySignature(node) || !isTypeReference(node.type)) return false
   return _.includes(
@@ -15,6 +16,7 @@ const isShorthandProperty = (node) => {
   )
 }
 const isStringKeyword = ({ kind }) => kind === SyntaxKind.StringKeyword
+const isVariableDeclaration = ({ kind }) => kind === SyntaxKind.VariableDeclaration
 
 const getProps = (members) => {
   const props = _.filter(members, isPropertySignature)
@@ -62,6 +64,28 @@ export const getInterfaces = (nodes) => {
   }))
 }
 
+export const getComponentType = (nodes, componentName) => {
+  return nodes.find((node) => isVariableDeclaration(node) && node.name.text === componentName)
+}
+
+export const isForwardRefComponent = (componentType) => {
+  if (isIntersectionType(componentType.type)) {
+    if (Array.isArray(componentType.type.types)) {
+      if (componentType.type.types.length === 2) {
+        const [type] = componentType.type.types
+
+        return type.typeName.text === 'ForwardRefComponent'
+      }
+    }
+  }
+
+  if (isTypeReference(componentType.type)) {
+    return componentType.type.typeName.text === 'ForwardRefComponent'
+  }
+
+  return false
+}
+
 export const hasAnySignature = (nodes) => {
   const signatures = _.filter(nodes, isIndexSignature)
 
diff --git a/test/specs/modules/Accordion/AccordionPanel-test.js b/test/specs/modules/Accordion/AccordionPanel-test.js
index 147b66426a..e0fb4adeab 100644
--- a/test/specs/modules/Accordion/AccordionPanel-test.js
+++ b/test/specs/modules/Accordion/AccordionPanel-test.js
@@ -7,7 +7,7 @@ import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'
 
 describe('AccordionPanel', () => {
-  common.isConformant(AccordionPanel, { rendersChildren: false })
+  common.isConformant(AccordionPanel, { rendersChildren: false, forwardsRef: false })
 
   common.implementsShorthandProp(AccordionPanel, {
     assertExactMatch: false,
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
index a5a9d96077..20844c9235 100644
--- a/test/specs/modules/Popup/Popup-test.js
+++ b/test/specs/modules/Popup/Popup-test.js
@@ -38,7 +38,7 @@ describe('Popup', () => {
     if (wrapper && wrapper.unmount) wrapper.unmount()
   })
 
-  common.isConformant(Popup, { rendersChildren: false, rendersPortal: true })
+  common.isConformant(Popup, { rendersChildren: false, rendersPortal: true, forwardsRef: false })
   common.hasSubcomponents(Popup, [PopupHeader, PopupContent])
 
   // Heads up!
diff --git a/test/specs/modules/Search/SearchCategoryLayout-test.js b/test/specs/modules/Search/SearchCategoryLayout-test.js
index e904ea00dd..e6e612aa47 100644
--- a/test/specs/modules/Search/SearchCategoryLayout-test.js
+++ b/test/specs/modules/Search/SearchCategoryLayout-test.js
@@ -9,5 +9,9 @@ const requiredProps = {
 }
 
 describe('SearchCategoryLayout', () => {
-  common.isConformant(SearchCategoryLayout, { requiredProps, rendersChildren: false })
+  common.isConformant(SearchCategoryLayout, {
+    requiredProps,
+    forwardsRef: false,
+    rendersChildren: false,
+  })
 })
diff --git a/test/specs/modules/Transition/Transition-test.js b/test/specs/modules/Transition/Transition-test.js
index b951aae78b..1f1546f680 100644
--- a/test/specs/modules/Transition/Transition-test.js
+++ b/test/specs/modules/Transition/Transition-test.js
@@ -19,7 +19,7 @@ const wrapperShallow = (...args) => (wrapper = shallow(...args))
 
 describe('Transition', () => {
   common.hasSubcomponents(Transition, [TransitionGroup])
-  common.hasValidTypings(Transition)
+  common.hasValidTypings(Transition, { forwardsRef: false })
 
   beforeEach(() => {
     wrapper = undefined
diff --git a/test/typings.tsx b/test/typings.tsx
index 26072c95f9..246bffd022 100644
--- a/test/typings.tsx
+++ b/test/typings.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button, Dropdown } from '../index'
+import { Button, Dropdown, Icon } from '../index'
 
 export const BasicAssert = () => (
   <>
@@ -9,6 +9,18 @@ export const BasicAssert = () => (
   </>
 )
 
+export const RefAssert = () => {
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const iconRef = React.useRef<HTMLElement>(null)
+
+  return (
+    <>
+      <Button ref={buttonRef} />
+      <Icon name='history' ref={iconRef} />
+    </>
+  )
+}
+
 export const ShorthandItemElementAssert = () => (
   <Dropdown additionLabel={<i style={{ color: 'red' }}>Custom Language: </i>} />
 )

From 56469051928f626c5052c900a42e0363f71100a5 Mon Sep 17 00:00:00 2001
From: tourman <8002615@gmail.com>
Date: Sat, 30 Dec 2023 09:50:41 +0000
Subject: [PATCH 12/30] chore: remove usage of deprecated `.defaultProps`
 (#4449)

* 4426: parse.js + eslint rules update

transform.js (WIP)

transform.js (WIP)

transform.js: get all files (WIP)

transform.js: const defaultProps (WIP)

transform.js: function + eslint rules (WIP)

* 4426: component changes

* Revert "4426: component changes"

This reverts commit bf72914f9c1dd76fecd9a1b5b3842d9e459d4253.

* 4426: using _. style for lodash functions

* 4426: component changes

* apply suggested changes

* remove transform

* replace getElementType with getComponentType

* apply suggestions

* fix tests

* remove rule changes

* remove transform

* apply changes

* apply changes

* apply changes

* apply changes

* fix tests & use getComponentType()

---------

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
---
 src/addons/Confirm/Confirm.js                 | 16 ++---
 src/addons/Pagination/Pagination.js           | 60 ++++++++++---------
 src/addons/Radio/Radio.js                     |  7 +--
 src/addons/TextArea/TextArea.js               | 11 +---
 .../TransitionablePortal.js                   | 15 +++--
 src/collections/Breadcrumb/Breadcrumb.js      |  4 +-
 .../Breadcrumb/BreadcrumbDivider.js           |  4 +-
 .../Breadcrumb/BreadcrumbSection.js           |  8 ++-
 src/collections/Form/Form.js                  |  8 +--
 src/collections/Form/FormButton.js            | 13 ++--
 src/collections/Form/FormCheckbox.js          | 13 ++--
 src/collections/Form/FormDropdown.js          | 12 ++--
 src/collections/Form/FormField.js             |  5 +-
 src/collections/Form/FormGroup.js             |  5 +-
 src/collections/Form/FormInput.js             | 12 ++--
 src/collections/Form/FormRadio.js             | 12 ++--
 src/collections/Form/FormSelect.js            | 12 ++--
 src/collections/Form/FormTextArea.js          | 12 ++--
 src/collections/Grid/Grid.js                  |  4 +-
 src/collections/Grid/GridColumn.js            |  4 +-
 src/collections/Grid/GridRow.js               |  4 +-
 src/collections/Menu/Menu.js                  |  4 +-
 src/collections/Menu/MenuHeader.js            |  4 +-
 src/collections/Menu/MenuItem.js              |  8 ++-
 src/collections/Menu/MenuMenu.js              |  4 +-
 src/collections/Message/Message.js            |  4 +-
 src/collections/Message/MessageContent.js     |  4 +-
 src/collections/Message/MessageHeader.js      |  4 +-
 src/collections/Message/MessageItem.js        |  8 +--
 src/collections/Message/MessageList.js        |  8 +--
 src/collections/Table/Table.js                |  8 +--
 src/collections/Table/TableBody.js            |  9 +--
 src/collections/Table/TableCell.js            |  8 +--
 src/collections/Table/TableFooter.js          |  6 +-
 src/collections/Table/TableHeader.js          |  9 +--
 src/collections/Table/TableHeaderCell.js      |  7 +--
 src/collections/Table/TableRow.js             | 11 +---
 src/elements/Button/Button.js                 | 19 +++---
 src/elements/Button/ButtonContent.js          |  4 +-
 src/elements/Button/ButtonGroup.js            |  4 +-
 src/elements/Button/ButtonOr.js               |  5 +-
 src/elements/Container/Container.js           |  4 +-
 src/elements/Divider/Divider.js               |  4 +-
 src/elements/Flag/Flag.js                     |  9 +--
 src/elements/Header/Header.js                 |  4 +-
 src/elements/Header/HeaderContent.js          |  5 +-
 src/elements/Header/HeaderSubheader.js        |  5 +-
 src/elements/Icon/Icon.js                     |  8 +--
 src/elements/Icon/IconGroup.js                |  8 +--
 src/elements/Image/Image.js                   | 30 +++++-----
 src/elements/Image/ImageGroup.js              |  4 +-
 src/elements/Input/Input.js                   | 10 +---
 src/elements/Label/Label.js                   |  4 +-
 src/elements/Label/LabelDetail.js             |  4 +-
 src/elements/Label/LabelGroup.js              |  4 +-
 src/elements/List/List.js                     |  4 +-
 src/elements/List/ListContent.js              |  4 +-
 src/elements/List/ListDescription.js          |  5 +-
 src/elements/List/ListHeader.js               |  4 +-
 src/elements/List/ListItem.js                 |  4 +-
 src/elements/List/ListList.js                 |  4 +-
 src/elements/Loader/Loader.js                 |  4 +-
 src/elements/Placeholder/Placeholder.js       |  4 +-
 src/elements/Placeholder/PlaceholderHeader.js |  4 +-
 src/elements/Placeholder/PlaceholderImage.js  |  4 +-
 src/elements/Placeholder/PlaceholderLine.js   |  5 +-
 .../Placeholder/PlaceholderParagraph.js       |  5 +-
 src/elements/Rail/Rail.js                     |  4 +-
 src/elements/Reveal/Reveal.js                 |  4 +-
 src/elements/Reveal/RevealContent.js          |  4 +-
 src/elements/Segment/Segment.js               |  4 +-
 src/elements/Segment/SegmentGroup.js          |  4 +-
 src/elements/Segment/SegmentInline.js         |  4 +-
 src/elements/Step/Step.js                     | 12 ++--
 src/elements/Step/StepContent.js              |  4 +-
 src/elements/Step/StepDescription.js          |  4 +-
 src/elements/Step/StepGroup.js                |  4 +-
 src/elements/Step/StepTitle.js                |  4 +-
 ...{getElementType.js => getComponentType.js} | 17 +++---
 src/lib/index.js                              |  2 +-
 src/modules/Accordion/AccordionAccordion.js   | 10 +---
 src/modules/Accordion/AccordionContent.js     |  4 +-
 src/modules/Accordion/AccordionTitle.js       |  4 +-
 src/modules/Checkbox/Checkbox.js              | 10 +---
 src/modules/Dimmer/DimmerDimmable.js          |  4 +-
 src/modules/Dimmer/DimmerInner.js             |  4 +-
 src/modules/Dropdown/Dropdown.js              | 60 ++++++++++++-------
 src/modules/Dropdown/DropdownDivider.js       |  4 +-
 src/modules/Dropdown/DropdownHeader.js        |  4 +-
 src/modules/Dropdown/DropdownItem.js          |  4 +-
 src/modules/Dropdown/DropdownMenu.js          |  4 +-
 src/modules/Dropdown/DropdownSearchInput.js   | 12 +---
 src/modules/Dropdown/DropdownText.js          |  4 +-
 src/modules/Embed/Embed.js                    |  4 +-
 src/modules/Modal/Modal.js                    | 22 +++----
 src/modules/Modal/ModalActions.js             |  4 +-
 src/modules/Modal/ModalContent.js             |  4 +-
 src/modules/Modal/ModalDescription.js         |  4 +-
 src/modules/Modal/ModalDimmer.js              |  4 +-
 src/modules/Modal/ModalHeader.js              |  4 +-
 src/modules/Popup/Popup.js                    | 27 ++++-----
 src/modules/Popup/PopupContent.js             |  4 +-
 src/modules/Popup/PopupHeader.js              |  4 +-
 src/modules/Progress/Progress.js              |  4 +-
 src/modules/Rating/Rating.js                  | 11 +---
 src/modules/Rating/RatingIcon.js              |  8 +--
 src/modules/Search/Search.js                  | 34 +++++++----
 src/modules/Search/SearchCategory.js          | 18 +++---
 src/modules/Search/SearchResult.js            | 10 +---
 src/modules/Search/SearchResults.js           |  4 +-
 src/modules/Sidebar/Sidebar.js                | 21 ++++---
 src/modules/Sidebar/SidebarPushable.js        |  4 +-
 src/modules/Sidebar/SidebarPusher.js          |  4 +-
 src/modules/Sticky/Sticky.js                  | 19 ++----
 src/modules/Tab/Tab.js                        | 20 +++----
 src/modules/Tab/TabPane.js                    | 11 +---
 src/modules/Transition/TransitionGroup.js     | 16 ++---
 src/views/Advertisement/Advertisement.js      |  4 +-
 src/views/Card/Card.js                        | 12 ++--
 src/views/Card/CardContent.js                 |  4 +-
 src/views/Card/CardDescription.js             |  4 +-
 src/views/Card/CardGroup.js                   |  4 +-
 src/views/Card/CardHeader.js                  |  4 +-
 src/views/Card/CardMeta.js                    |  4 +-
 src/views/Comment/Comment.js                  |  4 +-
 src/views/Comment/CommentAction.js            |  8 +--
 src/views/Comment/CommentActions.js           |  4 +-
 src/views/Comment/CommentAuthor.js            |  4 +-
 src/views/Comment/CommentAvatar.js            |  4 +-
 src/views/Comment/CommentContent.js           |  4 +-
 src/views/Comment/CommentGroup.js             |  4 +-
 src/views/Comment/CommentMetadata.js          |  4 +-
 src/views/Comment/CommentText.js              |  4 +-
 src/views/Feed/Feed.js                        |  4 +-
 src/views/Feed/FeedContent.js                 |  4 +-
 src/views/Feed/FeedDate.js                    |  4 +-
 src/views/Feed/FeedEvent.js                   |  4 +-
 src/views/Feed/FeedExtra.js                   |  4 +-
 src/views/Feed/FeedLabel.js                   |  4 +-
 src/views/Feed/FeedLike.js                    |  8 +--
 src/views/Feed/FeedMeta.js                    |  4 +-
 src/views/Feed/FeedSummary.js                 |  4 +-
 src/views/Feed/FeedUser.js                    |  9 +--
 src/views/Item/Item.js                        |  4 +-
 src/views/Item/ItemContent.js                 |  4 +-
 src/views/Item/ItemDescription.js             |  5 +-
 src/views/Item/ItemExtra.js                   |  5 +-
 src/views/Item/ItemGroup.js                   |  4 +-
 src/views/Item/ItemHeader.js                  |  5 +-
 src/views/Item/ItemMeta.js                    |  5 +-
 src/views/Statistic/Statistic.js              |  4 +-
 src/views/Statistic/StatisticGroup.js         |  4 +-
 src/views/Statistic/StatisticLabel.js         |  4 +-
 src/views/Statistic/StatisticValue.js         |  4 +-
 test/specs/addons/Confirm/Confirm-test.js     | 14 ++++-
 test/specs/commonTests/classNameHelpers.js    |  5 +-
 .../commonTests/implementsClassNameProps.js   |  3 +
 .../commonTests/implementsCommonProps.js      |  1 +
 .../commonTests/implementsShorthandProp.js    | 17 +++---
 test/specs/commonTests/isConformant.js        | 12 +++-
 test/specs/elements/Image/Image-test.js       |  3 +-
 test/specs/modules/Dropdown/Dropdown-test.js  |  2 +-
 test/specs/modules/Modal/Modal-test.js        |  6 +-
 test/specs/modules/Popup/Popup-test.js        |  1 -
 test/specs/modules/Search/Search-test.js      |  1 -
 test/specs/modules/Sidebar/Sidebar-test.js    |  4 +-
 test/specs/modules/Tab/Tab-test.js            | 12 ++--
 test/specs/modules/Tab/TabPane-test.js        |  2 +-
 test/utils/getComponentProps.js               |  1 -
 169 files changed, 580 insertions(+), 674 deletions(-)
 rename src/lib/{getElementType.js => getComponentType.js} (59%)

diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 2b3e7c004e..57a360e6f4 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -11,7 +11,14 @@ import Modal from '../../modules/Modal'
  * @see Modal
  */
 const Confirm = React.forwardRef(function (props, ref) {
-  const { cancelButton, confirmButton, content, header, open, size } = props
+  const {
+    cancelButton = 'Cancel',
+    confirmButton = 'OK',
+    content = 'Are you sure?',
+    header,
+    open,
+    size = 'small',
+  } = props
   const rest = getUnhandledProps(Confirm, props)
 
   const handleCancel = (e) => {
@@ -96,11 +103,4 @@ Confirm.propTypes = {
   size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
 }
 
-Confirm.defaultProps = {
-  cancelButton: 'Cancel',
-  confirmButton: 'OK',
-  content: 'Are you sure?',
-  size: 'small',
-}
-
 export default Confirm
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index 078389ab26..fb99c755ae 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -16,11 +16,28 @@ import PaginationItem from './PaginationItem'
  */
 const Pagination = React.forwardRef(function (props, ref) {
   const {
-    'aria-label': ariaLabel,
-    boundaryRange,
+    'aria-label': ariaLabel = 'Pagination Navigation',
+    boundaryRange = 1,
     disabled,
-    ellipsisItem,
-    siblingRange,
+    ellipsisItem = '...',
+    firstItem = {
+      'aria-label': 'First item',
+      content: '«',
+    },
+    lastItem = {
+      'aria-label': 'Last item',
+      content: '»',
+    },
+    nextItem = {
+      'aria-label': 'Next item',
+      content: '⟩',
+    },
+    pageItem = {},
+    prevItem = {
+      'aria-label': 'Previous item',
+      content: '⟨',
+    },
+    siblingRange = 1,
     totalPages,
   } = props
   const [activePage, setActivePage] = useAutoControlledValue({
@@ -63,10 +80,19 @@ const Pagination = React.forwardRef(function (props, ref) {
   })
   const rest = getUnhandledProps(Pagination, props)
 
+  const paginationItemTypes = {
+    firstItem,
+    lastItem,
+    ellipsisItem,
+    nextItem,
+    pageItem,
+    prevItem,
+  }
+
   return (
     <Menu {...rest} aria-label={ariaLabel} pagination role='navigation' ref={ref}>
       {_.map(items, ({ active, type, value }) =>
-        PaginationItem.create(props[type], {
+        PaginationItem.create(paginationItemTypes[type], {
           defaultProps: {
             content: value,
             disabled,
@@ -129,30 +155,6 @@ Pagination.propTypes = {
   totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
-Pagination.defaultProps = {
-  'aria-label': 'Pagination Navigation',
-  boundaryRange: 1,
-  ellipsisItem: '...',
-  firstItem: {
-    'aria-label': 'First item',
-    content: '«',
-  },
-  lastItem: {
-    'aria-label': 'Last item',
-    content: '»',
-  },
-  nextItem: {
-    'aria-label': 'Next item',
-    content: '⟩',
-  },
-  pageItem: {},
-  prevItem: {
-    'aria-label': 'Previous item',
-    content: '⟨',
-  },
-  siblingRange: 1,
-}
-
 Pagination.Item = PaginationItem
 
 export default Pagination
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index 0159880db2..cfc216d338 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -10,10 +10,9 @@ import Checkbox from '../../modules/Checkbox'
  * @see Form
  */
 const Radio = React.forwardRef(function (props, ref) {
-  const { slider, toggle, type } = props
+  const { slider, toggle, type = 'radio' } = props
 
   const rest = getUnhandledProps(Radio, props)
-  // const ElementType = getElementType(Radio, props)
   // radio, slider, toggle are exclusive
   // use an undefined radio if slider or toggle are present
   const radio = !(slider || toggle) || undefined
@@ -33,8 +32,4 @@ Radio.propTypes = {
   type: Checkbox.propTypes.type,
 }
 
-Radio.defaultProps = {
-  type: 'radio',
-}
-
 export default Radio
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index d6b0537f02..4c2c1d7aac 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -2,14 +2,14 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
+import { getComponentType, getUnhandledProps, useMergedRefs } from '../../lib'
 
 /**
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
 const TextArea = React.forwardRef(function (props, ref) {
-  const { rows, value } = props
+  const { rows = 3, value } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
   const handleChange = (e) => {
@@ -25,7 +25,7 @@ const TextArea = React.forwardRef(function (props, ref) {
   }
 
   const rest = getUnhandledProps(TextArea, props)
-  const ElementType = getElementType(TextArea, props)
+  const ElementType = getComponentType(props, { defaultAs: 'textarea' })
 
   return (
     <ElementType
@@ -65,9 +65,4 @@ TextArea.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-TextArea.defaultProps = {
-  as: 'textarea',
-  rows: 3,
-}
-
 export default TextArea
diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js
index 37bce0ee52..2adb7c22cf 100644
--- a/src/addons/TransitionablePortal/TransitionablePortal.js
+++ b/src/addons/TransitionablePortal/TransitionablePortal.js
@@ -47,7 +47,13 @@ function usePortalState(props) {
  * @see Transition
  */
 function TransitionablePortal(props) {
-  const { children, transition } = props
+  const {
+    children,
+    transition = {
+      animation: 'scale',
+      duration: 400,
+    },
+  } = props
 
   const [portalOpen, setPortalOpen] = usePortalState(props)
   const [transitionVisible, setTransitionVisible] = React.useState(false)
@@ -165,11 +171,4 @@ TransitionablePortal.propTypes = {
   transition: PropTypes.object,
 }
 
-TransitionablePortal.defaultProps = {
-  transition: {
-    animation: 'scale',
-    duration: 400,
-  },
-}
-
 export default TransitionablePortal
diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index e638b16101..c50b438bc4 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getUnhandledProps, getElementType, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getUnhandledProps, getComponentType, SUI } from '../../lib'
 import BreadcrumbDivider from './BreadcrumbDivider'
 import BreadcrumbSection from './BreadcrumbSection'
 
@@ -15,7 +15,7 @@ const Breadcrumb = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, 'breadcrumb', className)
   const rest = getUnhandledProps(Breadcrumb, props)
-  const ElementType = getElementType(Breadcrumb, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index e91b5c0f81..88190f0333 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -8,7 +8,7 @@ import {
   createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
@@ -20,7 +20,7 @@ const BreadcrumbDivider = React.forwardRef(function (props, ref) {
 
   const classes = cx('divider', className)
   const rest = getUnhandledProps(BreadcrumbDivider, props)
-  const ElementType = getElementType(BreadcrumbDivider, props)
+  const ElementType = getComponentType(props)
 
   if (!_.isNil(icon)) {
     return Icon.create(icon, {
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index d8349a2ac8..f3d9b19eb3 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -8,7 +8,7 @@ import {
   createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
   useKeyOnly,
   useEventCallback,
 } from '../../lib'
@@ -21,8 +21,10 @@ const BreadcrumbSection = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'section', className)
   const rest = getUnhandledProps(BreadcrumbSection, props)
-  const ElementType = getElementType(BreadcrumbSection, props, () => {
-    if (link || onClick) return 'a'
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (link || onClick) return 'a'
+    },
   })
 
   const handleClick = useEventCallback((e) => _.invoke(props, 'onClick', e, props))
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 6c1facc274..8f869d01f8 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
+import { getComponentType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
 import FormButton from './FormButton'
 import FormCheckbox from './FormCheckbox'
 import FormDropdown from './FormDropdown'
@@ -62,7 +62,7 @@ const Form = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Form, props)
-  const ElementType = getElementType(Form, props)
+  const ElementType = getComponentType(props, { defaultAs: 'form' })
 
   return (
     <ElementType {...rest} action={action} className={classes} onSubmit={handleSubmit} ref={ref}>
@@ -117,10 +117,6 @@ Form.propTypes = {
   widths: PropTypes.oneOf(['equal']),
 }
 
-Form.defaultProps = {
-  as: 'form',
-}
-
 Form.Field = FormField
 Form.Button = FormButton
 Form.Checkbox = FormCheckbox
diff --git a/src/collections/Form/FormButton.js b/src/collections/Form/FormButton.js
index cf4a5f816f..57400fe08b 100644
--- a/src/collections/Form/FormButton.js
+++ b/src/collections/Form/FormButton.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Button from '../../elements/Button'
 import FormField from './FormField'
 
@@ -11,15 +11,15 @@ import FormField from './FormField'
  * @see Form
  */
 const FormButton = React.forwardRef((props, ref) => {
-  const { control } = props
+  const { control = Button } = props
+
   const rest = getUnhandledProps(FormButton, props)
-  const ElementType = getElementType(FormButton, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
 
 FormButton.displayName = 'FormButton'
-
 FormButton.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -28,9 +28,4 @@ FormButton.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormButton.defaultProps = {
-  as: FormField,
-  control: Button,
-}
-
 export default FormButton
diff --git a/src/collections/Form/FormCheckbox.js b/src/collections/Form/FormCheckbox.js
index f98dad56cc..6f0d5fa01d 100644
--- a/src/collections/Form/FormCheckbox.js
+++ b/src/collections/Form/FormCheckbox.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Checkbox from '../../modules/Checkbox'
 import FormField from './FormField'
 
@@ -11,15 +11,15 @@ import FormField from './FormField'
  * @see Form
  */
 const FormCheckbox = React.forwardRef((props, ref) => {
-  const { control } = props
+  const { control = Checkbox } = props
+
   const rest = getUnhandledProps(FormCheckbox, props)
-  const ElementType = getElementType(FormCheckbox, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
 
 FormCheckbox.displayName = 'FormCheckbox'
-
 FormCheckbox.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -28,9 +28,4 @@ FormCheckbox.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormCheckbox.defaultProps = {
-  as: FormField,
-  control: Checkbox,
-}
-
 export default FormCheckbox
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index aeeb745314..62f845a31e 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Dropdown from '../../modules/Dropdown'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see Form
  */
 const FormDropdown = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = Dropdown } = props
+
   const rest = getUnhandledProps(FormDropdown, props)
-  const ElementType = getElementType(FormDropdown, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormDropdown.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormDropdown.defaultProps = {
-  as: FormField,
-  control: Dropdown,
-}
-
 export default FormDropdown
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index 29d0448df2..ae5c613b0d 100644
--- a/src/collections/Form/FormField.js
+++ b/src/collections/Form/FormField.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLLabel,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -53,7 +53,7 @@ const FormField = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(FormField, props)
-  const ElementType = getElementType(FormField, props)
+  const ElementType = getComponentType(props)
 
   const errorPointing = _.get(error, 'pointing', 'above')
   const errorLabel = Label.create(error, {
@@ -145,7 +145,6 @@ const FormField = React.forwardRef(function (props, ref) {
 })
 
 FormField.displayName = 'FormField'
-
 FormField.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index cbfb2bcc89..b1a2cc3f95 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -29,7 +29,7 @@ const FormGroup = React.forwardRef((props, ref) => {
     className,
   )
   const rest = getUnhandledProps(FormGroup, props)
-  const ElementType = getElementType(FormGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -39,7 +39,6 @@ const FormGroup = React.forwardRef((props, ref) => {
 })
 
 FormGroup.displayName = 'FormGroup'
-
 FormGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index bd5468a81e..71b3865d14 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Input from '../../elements/Input'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see Input
  */
 const FormInput = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = Input } = props
+
   const rest = getUnhandledProps(FormInput, props)
-  const ElementType = getElementType(FormInput, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormInput.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormInput.defaultProps = {
-  as: FormField,
-  control: Input,
-}
-
 export default FormInput
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 82dd3bfc64..7ce0a38f32 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Radio from '../../addons/Radio'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see Radio
  */
 const FormRadio = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = Radio } = props
+
   const rest = getUnhandledProps(FormRadio, props)
-  const ElementType = getElementType(FormRadio, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormRadio.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormRadio.defaultProps = {
-  as: FormField,
-  control: Radio,
-}
-
 export default FormRadio
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index 30c6d3f185..8658048bfd 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Select from '../../addons/Select'
 import Dropdown from '../../modules/Dropdown'
 import FormField from './FormField'
@@ -12,9 +12,10 @@ import FormField from './FormField'
  * @see Select
  */
 const FormSelect = React.forwardRef(function (props, ref) {
-  const { control, options } = props
+  const { control = Select, options } = props
+
   const rest = getUnhandledProps(FormSelect, props)
-  const ElementType = getElementType(FormSelect, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} options={options} ref={ref} />
 })
@@ -31,9 +32,4 @@ FormSelect.propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,
 }
 
-FormSelect.defaultProps = {
-  as: FormField,
-  control: Select,
-}
-
 export default FormSelect
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index 2395749970..4fb4a8e1d6 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import TextArea from '../../addons/TextArea'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see TextArea
  */
 const FormTextArea = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = TextArea } = props
+
   const rest = getUnhandledProps(FormTextArea, props)
-  const ElementType = getElementType(FormTextArea, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormTextArea.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormTextArea.defaultProps = {
-  as: FormField,
-  control: TextArea,
-}
-
 export default FormTextArea
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index 7f856c5bdf..b884dbd1b5 100644
--- a/src/collections/Grid/Grid.js
+++ b/src/collections/Grid/Grid.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -60,7 +60,7 @@ const Grid = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Grid, props)
-  const ElementType = getElementType(Grid, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index 44d2e9be8a..46e9d7f589 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/src/collections/Grid/GridColumn.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -54,7 +54,7 @@ const GridColumn = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(GridColumn, props)
-  const ElementType = getElementType(GridColumn, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index b84de480bc..7dae17ab50 100644
--- a/src/collections/Grid/GridRow.js
+++ b/src/collections/Grid/GridRow.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -46,7 +46,7 @@ const GridRow = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(GridRow, props)
-  const ElementType = getElementType(GridRow, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 5e2db94868..6c984eb871 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -78,7 +78,7 @@ const Menu = React.forwardRef(function (props, ref) {
     'menu',
   )
   const rest = getUnhandledProps(Menu, props)
-  const ElementType = getElementType(Menu, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/collections/Menu/MenuHeader.js b/src/collections/Menu/MenuHeader.js
index 9c0652d1dc..7a4d62fc5d 100644
--- a/src/collections/Menu/MenuHeader.js
+++ b/src/collections/Menu/MenuHeader.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A menu item may include a header or may itself be a header.
@@ -11,7 +11,7 @@ const MenuHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(MenuHeader, props)
-  const ElementType = getElementType(MenuHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 728a8ec13f..c4f6bafe5c 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -48,8 +48,10 @@ const MenuItem = React.forwardRef(function (props, ref) {
     'item',
     className,
   )
-  const ElementType = getElementType(MenuItem, props, () => {
-    if (onClick) return 'a'
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) return 'a'
+    },
   })
   const rest = getUnhandledProps(MenuItem, props)
 
diff --git a/src/collections/Menu/MenuMenu.js b/src/collections/Menu/MenuMenu.js
index f87a8619cc..6b3489041d 100644
--- a/src/collections/Menu/MenuMenu.js
+++ b/src/collections/Menu/MenuMenu.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A menu can contain a sub menu.
@@ -12,7 +12,7 @@ const MenuMenu = React.forwardRef(function (props, ref) {
 
   const classes = cx(position, 'menu', className)
   const rest = getUnhandledProps(MenuMenu, props)
-  const ElementType = getElementType(MenuMenu, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index 68cfe3e3aa..f6e8e3fb1e 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLParagraph,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -68,7 +68,7 @@ const Message = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Message, props)
-  const ElementType = getElementType(Message, props)
+  const ElementType = getComponentType(props)
 
   const handleDismiss = useEventCallback((e) => {
     _.invoke(props, 'onDismiss', e, props)
diff --git a/src/collections/Message/MessageContent.js b/src/collections/Message/MessageContent.js
index b6412b3d8b..c0266127e2 100644
--- a/src/collections/Message/MessageContent.js
+++ b/src/collections/Message/MessageContent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A message can contain a content.
@@ -11,7 +11,7 @@ const MessageContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageContent, props)
-  const ElementType = getElementType(MessageContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Message/MessageHeader.js b/src/collections/Message/MessageHeader.js
index 88536f4846..ee1f8a1578 100644
--- a/src/collections/Message/MessageHeader.js
+++ b/src/collections/Message/MessageHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const MessageHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(MessageHeader, props)
-  const ElementType = getElementType(MessageHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index 73cfe5af42..fc15f147fb 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const MessageItem = React.forwardRef(function (props, ref) {
 
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageItem, props)
-  const ElementType = getElementType(MessageItem, props)
+  const ElementType = getComponentType(props, { defaultAs: 'li' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -42,10 +42,6 @@ MessageItem.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-MessageItem.defaultProps = {
-  as: 'li',
-}
-
 MessageItem.create = createShorthandFactory(MessageItem, (content) => ({ content }))
 
 export default MessageItem
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index 7262f0ad58..8c48ee5f74 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import MessageItem from './MessageItem'
@@ -20,7 +20,7 @@ const MessageList = React.forwardRef(function (props, ref) {
 
   const classes = cx('list', className)
   const rest = getUnhandledProps(MessageList, props)
-  const ElementType = getElementType(MessageList, props)
+  const ElementType = getComponentType(props, { defaultAs: 'ul' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -44,10 +44,6 @@ MessageList.propTypes = {
   items: customPropTypes.collectionShorthand,
 }
 
-MessageList.defaultProps = {
-  as: 'ul',
-}
-
 MessageList.create = createShorthandFactory(MessageList, (val) => ({ items: val }))
 
 export default MessageList
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index d9bf410c1a..7ebbbdec43 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -84,7 +84,7 @@ const Table = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Table, props)
-  const ElementType = getElementType(Table, props)
+  const ElementType = getComponentType(props, { defaultAs: 'table' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -116,10 +116,6 @@ const Table = React.forwardRef(function (props, ref) {
 })
 
 Table.displayName = 'Table'
-Table.defaultProps = {
-  as: 'table',
-}
-
 Table.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index 605512e7d4..a8a1994872 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -2,13 +2,14 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 const TableBody = React.forwardRef(function (props, ref) {
   const { children, className } = props
+
   const classes = cx(className)
   const rest = getUnhandledProps(TableBody, props)
-  const ElementType = getElementType(TableBody, props)
+  const ElementType = getComponentType(props, { defaultAs: 'tbody' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -18,10 +19,6 @@ const TableBody = React.forwardRef(function (props, ref) {
 })
 
 TableBody.displayName = 'TableBody'
-TableBody.defaultProps = {
-  as: 'tbody',
-}
-
 TableBody.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index dcb008c3d8..8471f454b7 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -56,7 +56,7 @@ const TableCell = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(TableCell, props)
-  const ElementType = getElementType(TableCell, props)
+  const ElementType = getComponentType(props, { defaultAs: 'td' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -74,10 +74,6 @@ const TableCell = React.forwardRef(function (props, ref) {
   )
 })
 
-TableCell.defaultProps = {
-  as: 'td',
-}
-
 TableCell.displayName = 'TableCell'
 TableCell.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index c5ff0b8e6b..0d2e584de1 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -8,7 +8,7 @@ import TableHeader from './TableHeader'
  * A table can have a footer.
  */
 const TableFooter = React.forwardRef(function (props, ref) {
-  const { as } = props
+  const { as = 'tfoot' } = props
   const rest = getUnhandledProps(TableFooter, props)
 
   return <TableHeader {...rest} as={as} ref={ref} />
@@ -20,8 +20,4 @@ TableFooter.propTypes = {
   as: PropTypes.elementType,
 }
 
-TableFooter.defaultProps = {
-  as: 'tfoot',
-}
-
 export default TableFooter
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index 4c7f9fe284..bddf5ec557 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -15,9 +15,10 @@ import {
  */
 const TableHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, fullWidth } = props
+
   const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)
-  const ElementType = getElementType(TableHeader, props)
+  const ElementType = getComponentType(props, { defaultAs: 'thead' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -26,10 +27,6 @@ const TableHeader = React.forwardRef(function (props, ref) {
   )
 })
 
-TableHeader.defaultProps = {
-  as: 'thead',
-}
-
 TableHeader.displayName = 'TableHeader'
 TableHeader.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index a4a23b2488..aaf4a96656 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -9,7 +9,8 @@ import TableCell from './TableCell'
  * A table can have a header cell.
  */
 const TableHeaderCell = React.forwardRef(function (props, ref) {
-  const { as, className, sorted } = props
+  const { as = 'th', className, sorted } = props
+
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
   const rest = getUnhandledProps(TableHeaderCell, props)
 
@@ -28,8 +29,4 @@ TableHeaderCell.propTypes = {
   sorted: PropTypes.oneOf(['ascending', 'descending']),
 }
 
-TableHeaderCell.defaultProps = {
-  as: 'th',
-}
-
 export default TableHeaderCell
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 5e7e83d1d5..7efdc2283f 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -22,7 +22,7 @@ import TableCell from './TableCell'
 const TableRow = React.forwardRef(function (props, ref) {
   const {
     active,
-    cellAs,
+    cellAs = 'td',
     cells,
     children,
     className,
@@ -47,7 +47,7 @@ const TableRow = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(TableRow, props)
-  const ElementType = getElementType(TableRow, props)
+  const ElementType = getComponentType(props, { defaultAs: 'tr' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -64,11 +64,6 @@ const TableRow = React.forwardRef(function (props, ref) {
   )
 })
 
-TableRow.defaultProps = {
-  as: 'tr',
-  cellAs: 'td',
-}
-
 TableRow.displayName = 'TableRow'
 TableRow.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index f2fd188de6..e3a704577f 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -96,7 +96,7 @@ const Button = React.forwardRef(function (props, ref) {
     secondary,
     size,
     toggle,
-    type
+    type,
   } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
@@ -123,10 +123,13 @@ const Button = React.forwardRef(function (props, ref) {
   const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'), useValueAndKey(floated, 'floated'))
 
   const rest = getUnhandledProps(Button, props)
-  const ElementType = getElementType(Button, props, () => {
-    if (!_.isNil(attached) || !_.isNil(label)) {
-      return 'div'
-    }
+  const ElementType = getComponentType(props, {
+    defaultAs: 'button',
+    getDefault: () => {
+      if (!_.isNil(attached) || !_.isNil(label)) {
+        return 'div'
+      }
+    },
   })
   const tabIndex = computeTabIndex(ElementType, disabled, props.tabIndex)
 
@@ -315,10 +318,6 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
 }
 
-Button.defaultProps = {
-  as: 'button',
-}
-
 Button.Content = ButtonContent
 Button.Group = ButtonGroup
 Button.Or = ButtonOr
diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js
index af248b1022..ebe7d58a46 100644
--- a/src/elements/Button/ButtonContent.js
+++ b/src/elements/Button/ButtonContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -23,7 +23,7 @@ const ButtonContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ButtonContent, props)
-  const ElementType = getElementType(ButtonContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
index 79a1db17c5..07ad032136 100644
--- a/src/elements/Button/ButtonGroup.js
+++ b/src/elements/Button/ButtonGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -67,7 +67,7 @@ const ButtonGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ButtonGroup, props)
-  const ElementType = getElementType(ButtonGroup, props)
+  const ElementType = getComponentType(props)
 
   if (_.isNil(buttons)) {
     return (
diff --git a/src/elements/Button/ButtonOr.js b/src/elements/Button/ButtonOr.js
index 89b05a80fa..f4db380360 100644
--- a/src/elements/Button/ButtonOr.js
+++ b/src/elements/Button/ButtonOr.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * Button groups can contain conditionals.
  */
 const ButtonOr = React.forwardRef(function (props, ref) {
   const { className, text } = props
+
   const classes = cx('or', className)
   const rest = getUnhandledProps(ButtonOr, props)
-  const ElementType = getElementType(ButtonOr, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} data-text={text} ref={ref} />
 })
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index ea9cafe64d..741ca019fd 100644
--- a/src/elements/Container/Container.js
+++ b/src/elements/Container/Container.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -26,7 +26,7 @@ const Container = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Container, props)
-  const ElementType = getElementType(Container, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index 2f2147c188..a8c4b2e3ac 100644
--- a/src/elements/Divider/Divider.js
+++ b/src/elements/Divider/Divider.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -40,7 +40,7 @@ const Divider = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Divider, props)
-  const ElementType = getElementType(Divider, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Flag/Flag.js b/src/elements/Flag/Flag.js
index 1ad15a8aaa..4d0c7d481a 100644
--- a/src/elements/Flag/Flag.js
+++ b/src/elements/Flag/Flag.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -507,13 +507,13 @@ export const names = [
 ]
 
 /**
- * A flag is is used to represent a political state.
+ * A flag is used to represent a political state.
  */
 const Flag = React.forwardRef(function (props, ref) {
   const { className, name } = props
   const classes = cx(name, 'flag', className)
   const rest = getUnhandledProps(Flag, props)
-  const ElementType = getElementType(Flag, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
@@ -535,8 +535,5 @@ Flag.propTypes = {
 const MemoFlag = React.memo(Flag)
 
 MemoFlag.create = createShorthandFactory(MemoFlag, (value) => ({ name: value }))
-MemoFlag.defaultProps = {
-  as: 'i',
-}
 
 export default MemoFlag
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index b25a7421df..ad1d099f3b 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useValueAndKey,
@@ -61,7 +61,7 @@ const Header = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Header, props)
-  const ElementType = getElementType(Header, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Header/HeaderContent.js b/src/elements/Header/HeaderContent.js
index b6dc8a1bf4..a8d0aef2d1 100644
--- a/src/elements/Header/HeaderContent.js
+++ b/src/elements/Header/HeaderContent.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * Header content wraps the main content when there is an adjacent Icon or Image.
  */
 const HeaderContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('content', className)
   const rest = getUnhandledProps(HeaderContent, props)
-  const ElementType = getElementType(HeaderContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 3925146440..9cd4523bfa 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/src/elements/Header/HeaderSubheader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const HeaderSubheader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('sub header', className)
   const rest = getUnhandledProps(HeaderSubheader, props)
-  const ElementType = getElementType(HeaderSubheader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 1e180fcecd..45fd57915b 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useEventCallback,
@@ -74,7 +74,7 @@ const Icon = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(Icon, props)
-  const ElementType = getElementType(Icon, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
   const ariaProps = getAriaProps(props)
 
   const handleClick = useEventCallback((e) => {
@@ -155,8 +155,4 @@ const MemoIcon = React.memo(Icon)
 MemoIcon.Group = IconGroup
 MemoIcon.create = createShorthandFactory(MemoIcon, (value) => ({ name: value }))
 
-MemoIcon.defaultProps = {
-  as: 'i',
-}
-
 export default MemoIcon
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 2c17cfbf36..55cb7adbf7 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 
 /**
  * Several icons can be used together as a group.
@@ -13,7 +13,7 @@ const IconGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx(size, 'icons', className)
   const rest = getUnhandledProps(IconGroup, props)
-  const ElementType = getElementType(IconGroup, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -40,8 +40,4 @@ IconGroup.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
-IconGroup.defaultProps = {
-  as: 'i',
-}
-
 export default IconGroup
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index c72c22ff79..7f3df45277 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlImageProps,
   partitionHTMLProps,
@@ -47,7 +47,7 @@ const Image = React.forwardRef(function (props, ref) {
     spaced,
     verticalAlign,
     wrapped,
-    ui,
+    ui = true,
   } = props
 
   const classes = cx(
@@ -72,15 +72,18 @@ const Image = React.forwardRef(function (props, ref) {
   const rest = getUnhandledProps(Image, props)
   const [imgTagProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
 
-  const ElementType = getElementType(Image, props, () => {
-    if (
-      !_.isNil(dimmer) ||
-      !_.isNil(label) ||
-      !_.isNil(wrapped) ||
-      !childrenUtils.isNil(children)
-    ) {
-      return 'div'
-    }
+  const ElementType = getComponentType(props, {
+    defaultAs: 'img',
+    getDefault: () => {
+      if (
+        !_.isNil(dimmer) ||
+        !_.isNil(label) ||
+        !_.isNil(wrapped) ||
+        !childrenUtils.isNil(children)
+      ) {
+        return 'div'
+      }
+    },
   })
 
   if (!childrenUtils.isNil(children)) {
@@ -183,11 +186,6 @@ Image.propTypes = {
   wrapped: PropTypes.bool,
 }
 
-Image.defaultProps = {
-  as: 'img',
-  ui: true,
-}
-
 Image.create = createShorthandFactory(Image, (value) => ({ src: value }))
 
 export default Image
diff --git a/src/elements/Image/ImageGroup.js b/src/elements/Image/ImageGroup.js
index 8ac80b9221..9b02ba722b 100644
--- a/src/elements/Image/ImageGroup.js
+++ b/src/elements/Image/ImageGroup.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 
 /**
  * A group of images.
@@ -12,7 +12,7 @@ const ImageGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, className, 'images')
   const rest = getUnhandledProps(ImageGroup, props)
-  const ElementType = getElementType(ImageGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 7f830a4a65..9cbccb499d 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -8,7 +8,7 @@ import {
   createHTMLInput,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   partitionHTMLProps,
   useKeyOnly,
@@ -46,7 +46,7 @@ const Input = React.forwardRef(function (props, ref) {
     size,
     tabIndex,
     transparent,
-    type,
+    type = 'text',
   } = props
 
   const computeIcon = () => {
@@ -108,7 +108,7 @@ const Input = React.forwardRef(function (props, ref) {
     'input',
     className,
   )
-  const ElementType = getElementType(Input, props)
+  const ElementType = getComponentType(props)
   const [htmlInputProps, rest] = partitionProps()
 
   // Render with children
@@ -234,10 +234,6 @@ Input.propTypes = {
   type: PropTypes.string,
 }
 
-Input.defaultProps = {
-  type: 'text',
-}
-
 Input.create = createShorthandFactory(Input, (type) => ({ type }))
 
 export default Input
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index 30abb13cde..d52c33bf78 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -75,7 +75,7 @@ const Label = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Label, props)
-  const ElementType = getElementType(Label, props)
+  const ElementType = getComponentType(props)
 
   const handleClick = useEventCallback((e) => {
     _.invoke(props, 'onClick', e, props)
diff --git a/src/elements/Label/LabelDetail.js b/src/elements/Label/LabelDetail.js
index 6da4de001a..64a045607f 100644
--- a/src/elements/Label/LabelDetail.js
+++ b/src/elements/Label/LabelDetail.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,7 +15,7 @@ const LabelDetail = React.forwardRef(function (props, ref) {
 
   const classes = cx('detail', className)
   const rest = getUnhandledProps(LabelDetail, props)
-  const ElementType = getElementType(LabelDetail, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Label/LabelGroup.js b/src/elements/Label/LabelGroup.js
index 01cf51dc5d..d790595d92 100644
--- a/src/elements/Label/LabelGroup.js
+++ b/src/elements/Label/LabelGroup.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -27,7 +27,7 @@ const LabelGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(LabelGroup, props)
-  const ElementType = getElementType(LabelGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index f805838b3c..29c90ba26c 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -64,7 +64,7 @@ const List = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(List, props)
-  const ElementType = getElementType(List, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js
index 667e6bf0f6..61ed2ba01a 100644
--- a/src/elements/List/ListContent.js
+++ b/src/elements/List/ListContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useValueAndKey,
@@ -28,7 +28,7 @@ const ListContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ListContent, props)
-  const ElementType = getElementType(ListContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/List/ListDescription.js b/src/elements/List/ListDescription.js
index b2672442e3..c4c0557e56 100644
--- a/src/elements/List/ListDescription.js
+++ b/src/elements/List/ListDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ListDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx(className, 'description')
   const rest = getUnhandledProps(ListDescription, props)
-  const ElementType = getElementType(ListDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/ListHeader.js b/src/elements/List/ListHeader.js
index c26850c199..d67ae15b58 100644
--- a/src/elements/List/ListHeader.js
+++ b/src/elements/List/ListHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const ListHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(ListHeader, props)
-  const ElementType = getElementType(ListHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index c0fba5fb72..2491728065 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -35,7 +35,7 @@ const ListItem = React.forwardRef(function (props, ref) {
     value,
   } = props
 
-  const ElementType = getElementType(ListItem, props)
+  const ElementType = getComponentType(props)
   const classes = cx(
     useKeyOnly(active, 'active'),
     useKeyOnly(disabled, 'disabled'),
diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js
index 403d243b79..9e7e3244b2 100644
--- a/src/elements/List/ListList.js
+++ b/src/elements/List/ListList.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -17,7 +17,7 @@ const ListList = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
 
   const rest = getUnhandledProps(ListList, props)
-  const ElementType = getElementType(ListList, props)
+  const ElementType = getComponentType(props)
   const classes = cx(useKeyOnly(ElementType !== 'ul' && ElementType !== 'ol', 'list'), className)
 
   return (
diff --git a/src/elements/Loader/Loader.js b/src/elements/Loader/Loader.js
index ed270fa6cd..87e1a08491 100644
--- a/src/elements/Loader/Loader.js
+++ b/src/elements/Loader/Loader.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -42,7 +42,7 @@ const Loader = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Loader, props)
-  const ElementType = getElementType(Loader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/Placeholder.js b/src/elements/Placeholder/Placeholder.js
index d7bd272da5..d3df48b785 100644
--- a/src/elements/Placeholder/Placeholder.js
+++ b/src/elements/Placeholder/Placeholder.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -27,7 +27,7 @@ const Placeholder = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Placeholder, props)
-  const ElementType = getElementType(Placeholder, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/PlaceholderHeader.js b/src/elements/Placeholder/PlaceholderHeader.js
index 6f8293b3ad..80fc8f6990 100644
--- a/src/elements/Placeholder/PlaceholderHeader.js
+++ b/src/elements/Placeholder/PlaceholderHeader.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -17,7 +17,7 @@ const PlaceholderHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, image } = props
   const classes = cx(useKeyOnly(image, 'image'), 'header', className)
   const rest = getUnhandledProps(PlaceholderHeader, props)
-  const ElementType = getElementType(PlaceholderHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js
index 86f3a6e824..7413d4ee55 100644
--- a/src/elements/Placeholder/PlaceholderImage.js
+++ b/src/elements/Placeholder/PlaceholderImage.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { customPropTypes, getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { customPropTypes, getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * A placeholder can contain an image.
@@ -16,7 +16,7 @@ const PlaceholderImage = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(PlaceholderImage, props)
-  const ElementType = getElementType(PlaceholderImage, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/elements/Placeholder/PlaceholderLine.js b/src/elements/Placeholder/PlaceholderLine.js
index 7ff192252e..7f8c153614 100644
--- a/src/elements/Placeholder/PlaceholderLine.js
+++ b/src/elements/Placeholder/PlaceholderLine.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder can contain have lines of text.
  */
 const PlaceholderLine = React.forwardRef(function (props, ref) {
   const { className, length } = props
+
   const classes = cx('line', length, className)
   const rest = getUnhandledProps(PlaceholderLine, props)
-  const ElementType = getElementType(PlaceholderLine, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/elements/Placeholder/PlaceholderParagraph.js b/src/elements/Placeholder/PlaceholderParagraph.js
index 91a949d7a5..208a6baa68 100644
--- a/src/elements/Placeholder/PlaceholderParagraph.js
+++ b/src/elements/Placeholder/PlaceholderParagraph.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder can contain a paragraph.
  */
 const PlaceholderParagraph = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('paragraph', className)
   const rest = getUnhandledProps(PlaceholderParagraph, props)
-  const ElementType = getElementType(PlaceholderParagraph, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index 74ffc79607..6904fa8407 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -41,7 +41,7 @@ const Rail = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Rail, props)
-  const ElementType = getElementType(Rail, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Reveal/Reveal.js b/src/elements/Reveal/Reveal.js
index f18fcf120f..14fe502083 100644
--- a/src/elements/Reveal/Reveal.js
+++ b/src/elements/Reveal/Reveal.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -27,7 +27,7 @@ const Reveal = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Reveal, props)
-  const ElementType = getElementType(Reveal, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Reveal/RevealContent.js b/src/elements/Reveal/RevealContent.js
index 1a2fb4cf30..0caac64f9b 100644
--- a/src/elements/Reveal/RevealContent.js
+++ b/src/elements/Reveal/RevealContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const RevealContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(RevealContent, props)
-  const ElementType = getElementType(RevealContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index cb73a0e7d6..d0a76652dd 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -73,7 +73,7 @@ const Segment = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Segment, props)
-  const ElementType = getElementType(Segment, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js
index a5b00d6c30..8efff38bbc 100644
--- a/src/elements/Segment/SegmentGroup.js
+++ b/src/elements/Segment/SegmentGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -30,7 +30,7 @@ const SegmentGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(SegmentGroup, props)
-  const ElementType = getElementType(SegmentGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/SegmentInline.js b/src/elements/Segment/SegmentInline.js
index 2ce0aeb0e9..4b524e3280 100644
--- a/src/elements/Segment/SegmentInline.js
+++ b/src/elements/Segment/SegmentInline.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder segment can be inline.
@@ -11,7 +11,7 @@ const SegmentInline = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('inline', className)
   const rest = getUnhandledProps(SegmentInline, props)
-  const ElementType = getElementType(SegmentInline, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index bebf135191..85e72bfd38 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -53,10 +53,12 @@ const Step = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(Step, props)
-  const ElementType = getElementType(Step, props, () => {
-    if (onClick) {
-      return 'a'
-    }
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) {
+        return 'a'
+      }
+    },
   })
 
   if (!childrenUtils.isNil(children)) {
diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js
index d71a931e21..55968739c4 100644
--- a/src/elements/Step/StepContent.js
+++ b/src/elements/Step/StepContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import StepDescription from './StepDescription'
@@ -19,7 +19,7 @@ const StepContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, title } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(StepContent, props)
-  const ElementType = getElementType(StepContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Step/StepDescription.js b/src/elements/Step/StepDescription.js
index 6bde53b17e..2d0e6224e2 100644
--- a/src/elements/Step/StepDescription.js
+++ b/src/elements/Step/StepDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -14,7 +14,7 @@ const StepDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(StepDescription, props)
-  const ElementType = getElementType(StepDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js
index 1b7967809f..3cce7faf0a 100644
--- a/src/elements/Step/StepGroup.js
+++ b/src/elements/Step/StepGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   numberToWordMap,
   SUI,
@@ -51,7 +51,7 @@ const StepGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(StepGroup, props)
-  const ElementType = getElementType(StepGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Step/StepTitle.js b/src/elements/Step/StepTitle.js
index ad03ec96df..7a27872b8d 100644
--- a/src/elements/Step/StepTitle.js
+++ b/src/elements/Step/StepTitle.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const StepTitle = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('title', className)
   const rest = getUnhandledProps(StepTitle, props)
-  const ElementType = getElementType(StepTitle, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/lib/getElementType.js b/src/lib/getComponentType.js
similarity index 59%
rename from src/lib/getElementType.js
rename to src/lib/getComponentType.js
index 27c2bc6769..9c1c5f183a 100644
--- a/src/lib/getElementType.js
+++ b/src/lib/getComponentType.js
@@ -2,18 +2,19 @@
  * Returns a createElement() type based on the props of the Component.
  * Useful for calculating what type a component should render as.
  *
- * @param {function} Component A function or ReactClass.
  * @param {object} props A ReactElement props object
- * @param {function} [getDefault] A function that returns a default element type.
- * @returns {string|function} A ReactElement type
+ * @param {object} [options={}]
+ * @param {string|Function} [options.defaultAs] A default element type.
+ * @param {Function} [options.getDefault] A function that returns a default element type.
+ * @returns {string|Function} A ReactElement type
  */
-function getElementType(Component, props, getDefault) {
-  const { defaultProps = {} } = Component
+function getComponentType(props, options = {}) {
+  const { defaultAs, getDefault } = options
 
   // ----------------------------------------
   // user defined "as" element type
 
-  if (props.as && props.as !== defaultProps.as) return props.as
+  if (props.as && props.as !== defaultAs) return props.as
 
   // ----------------------------------------
   // computed default element type
@@ -31,7 +32,7 @@ function getElementType(Component, props, getDefault) {
   // ----------------------------------------
   // use defaultProp or 'div'
 
-  return defaultProps.as || 'div'
+  return defaultAs || 'div'
 }
 
-export default getElementType
+export default getComponentType
diff --git a/src/lib/index.js b/src/lib/index.js
index 9325384369..a405193eb8 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -17,8 +17,8 @@ export * as customPropTypes from './customPropTypes'
 export eventStack from './eventStack'
 
 export * from './factories'
+export getComponentType from './getComponentType'
 export getUnhandledProps from './getUnhandledProps'
-export getElementType from './getElementType'
 
 export {
   htmlInputAttrs,
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index 8b6227d7f5..f2ba942e7f 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useAutoControlledValue,
   useEventCallback,
@@ -45,7 +45,7 @@ function computeNewIndex(exclusive, activeIndex, itemIndex) {
  * An Accordion can contain sub-accordions.
  */
 const AccordionAccordion = React.forwardRef(function (props, ref) {
-  const { className, children, exclusive, panels } = props
+  const { className, children, exclusive = true, panels } = props
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
     defaultState: props.defaultActiveIndex,
@@ -54,7 +54,7 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
 
   const classes = cx('accordion', className)
   const rest = getUnhandledProps(AccordionAccordion, props)
-  const ElementType = getElementType(AccordionAccordion, props)
+  const ElementType = getComponentType(props)
 
   const handleTitleClick = useEventCallback((e, titleProps) => {
     const { index } = titleProps
@@ -92,10 +92,6 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
   )
 })
 
-AccordionAccordion.defaultProps = {
-  exclusive: true,
-}
-
 AccordionAccordion.displayName = 'AccordionAccordion'
 AccordionAccordion.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Accordion/AccordionContent.js b/src/modules/Accordion/AccordionContent.js
index 9fae433ee0..3fae3cc6f3 100644
--- a/src/modules/Accordion/AccordionContent.js
+++ b/src/modules/Accordion/AccordionContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -19,7 +19,7 @@ const AccordionContent = React.forwardRef(function (props, ref) {
 
   const classes = cx('content', useKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(AccordionContent, props)
-  const ElementType = getElementType(AccordionContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index f9c7ef7fde..1432a15d61 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -22,7 +22,7 @@ const AccordionTitle = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'title', className)
   const rest = getUnhandledProps(AccordionTitle, props)
-  const ElementType = getElementType(AccordionTitle, props)
+  const ElementType = getComponentType(props)
   const iconValue = _.isNil(icon) ? 'dropdown' : icon
 
   const handleClick = useEventCallback((e) => {
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index 00eeeb80a6..b2a80d0360 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createHTMLLabel,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlInputAttrs,
   makeDebugger,
@@ -36,7 +36,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
     slider,
     tabIndex,
     toggle,
-    type,
+    type = 'checkbox',
     value,
   } = props
 
@@ -193,7 +193,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
     className,
   )
   const unhandled = getUnhandledProps(Checkbox, props)
-  const ElementType = getElementType(Checkbox, props)
+  const ElementType = getComponentType(props)
   const [htmlInputProps, rest] = partitionHTMLProps(unhandled, { htmlProps: htmlInputAttrs })
 
   // Heads Up!
@@ -319,8 +319,4 @@ Checkbox.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
-Checkbox.defaultProps = {
-  type: 'checkbox',
-}
-
 export default Checkbox
diff --git a/src/modules/Dimmer/DimmerDimmable.js b/src/modules/Dimmer/DimmerDimmable.js
index 5219cf8d1f..2b3cfbb11b 100644
--- a/src/modules/Dimmer/DimmerDimmable.js
+++ b/src/modules/Dimmer/DimmerDimmable.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -23,7 +23,7 @@ const DimmerDimmable = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DimmerDimmable, props)
-  const ElementType = getElementType(DimmerDimmable, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index 78680f065b..aeb9d09aad 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   doesNodeContainClick,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useVerticalAlignProp,
@@ -68,7 +68,7 @@ const DimmerInner = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DimmerInner, props)
-  const ElementType = getElementType(DimmerInner, props)
+  const ElementType = getComponentType(props)
 
   const childrenContent = childrenUtils.isNil(children) ? content : children
 
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 7c7a8a5bcd..d77720b102 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -11,7 +11,7 @@ import {
   childrenUtils,
   customPropTypes,
   doesNodeContainClick,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   objectDiff,
@@ -66,7 +66,44 @@ function renderItemContent(item) {
  * @see Menu
  */
 const Dropdown = React.forwardRef((props, ref) => {
-  return <DropdownInner {...props} innerRef={ref} />
+  const {
+    additionLabel = 'Add ',
+    additionPosition = 'top',
+    closeOnBlur = true,
+    closeOnEscape = true,
+    deburr = false,
+    icon = 'dropdown',
+    minCharacters = 1,
+    noResultsMessage = 'No results found.',
+    openOnFocus = true,
+    renderLabel = renderItemContent,
+    searchInput = 'text',
+    selectOnBlur = true,
+    selectOnNavigation = true,
+    wrapSelection = true,
+    ...rest
+  } = props
+
+  return (
+    <DropdownInner
+      additionLabel={additionLabel}
+      additionPosition={additionPosition}
+      closeOnBlur={closeOnBlur}
+      closeOnEscape={closeOnEscape}
+      deburr={deburr}
+      icon={icon}
+      minCharacters={minCharacters}
+      noResultsMessage={noResultsMessage}
+      openOnFocus={openOnFocus}
+      renderLabel={renderLabel}
+      searchInput={searchInput}
+      selectOnBlur={selectOnBlur}
+      selectOnNavigation={selectOnNavigation}
+      wrapSelection={wrapSelection}
+      {...rest}
+      innerRef={ref}
+    />
+  )
 })
 
 class DropdownInner extends Component {
@@ -1088,7 +1125,7 @@ class DropdownInner extends Component {
       className,
     )
     const rest = getUnhandledProps(Dropdown, this.props)
-    const ElementType = getElementType(Dropdown, this.props)
+    const ElementType = getComponentType(this.props)
     const ariaOptions = this.getDropdownAriaOptions(ElementType, this.props)
 
     return (
@@ -1442,27 +1479,10 @@ Dropdown.propTypes = {
 }
 
 Dropdown.displayName = 'Dropdown'
-Dropdown.defaultProps = {
-  additionLabel: 'Add ',
-  additionPosition: 'top',
-  closeOnBlur: true,
-  closeOnEscape: true,
-  deburr: false,
-  icon: 'dropdown',
-  minCharacters: 1,
-  noResultsMessage: 'No results found.',
-  openOnFocus: true,
-  renderLabel: renderItemContent,
-  searchInput: 'text',
-  selectOnBlur: true,
-  selectOnNavigation: true,
-  wrapSelection: true,
-}
 
 DropdownInner.autoControlledProps = ['open', 'searchQuery', 'selectedLabel', 'value', 'upward']
 
 if (process.env.NODE_ENV !== 'production') {
-  DropdownInner.defaultProps = Dropdown.defaultProps
   DropdownInner.propTypes = Dropdown.propTypes
 }
 
diff --git a/src/modules/Dropdown/DropdownDivider.js b/src/modules/Dropdown/DropdownDivider.js
index e4f283bbe5..4ffa5a3d82 100644
--- a/src/modules/Dropdown/DropdownDivider.js
+++ b/src/modules/Dropdown/DropdownDivider.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A dropdown menu can contain dividers to separate related content.
@@ -12,7 +12,7 @@ const DropdownDivider = React.forwardRef(function (props, ref) {
 
   const classes = cx('divider', className)
   const rest = getUnhandledProps(DropdownDivider, props)
-  const ElementType = getElementType(DropdownDivider, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/modules/Dropdown/DropdownHeader.js b/src/modules/Dropdown/DropdownHeader.js
index 9cb15436a0..c91bf12c2e 100644
--- a/src/modules/Dropdown/DropdownHeader.js
+++ b/src/modules/Dropdown/DropdownHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -19,7 +19,7 @@ const DropdownHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(DropdownHeader, props)
-  const ElementType = getElementType(DropdownHeader, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 5f4fb65419..5722d0b767 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -8,7 +8,7 @@ import {
   createShorthand,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -52,7 +52,7 @@ const DropdownItem = React.forwardRef(function (props, ref) {
     ? childrenUtils.someByType(children, 'DropdownMenu') && 'dropdown'
     : icon
   const rest = getUnhandledProps(DropdownItem, props)
-  const ElementType = getElementType(DropdownItem, props)
+  const ElementType = getComponentType(props)
   const ariaOptions = {
     role: 'option',
     'aria-disabled': disabled,
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index cdc53ef6b1..e77535e2c8 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const DropdownMenu = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DropdownMenu, props)
-  const ElementType = getElementType(DropdownMenu, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 8f46f28f1c..78bb7c93c7 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -3,13 +3,13 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { createShorthandFactory, getElementType, getUnhandledProps } from '../../lib'
+import { createShorthandFactory, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A search item sub-component for Dropdown component.
  */
 const DropdownSearchInput = React.forwardRef(function (props, ref) {
-  const { autoComplete, className, tabIndex, type, value } = props
+  const { autoComplete = 'off', className, tabIndex, type = 'text', value } = props
 
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
@@ -18,7 +18,7 @@ const DropdownSearchInput = React.forwardRef(function (props, ref) {
   }
 
   const classes = cx('search', className)
-  const ElementType = getElementType(DropdownSearchInput, props)
+  const ElementType = getComponentType(props, { defaultAs: 'input' })
   const rest = getUnhandledProps(DropdownSearchInput, props)
 
   return (
@@ -57,12 +57,6 @@ DropdownSearchInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-DropdownSearchInput.defaultProps = {
-  as: 'input',
-  autoComplete: 'off',
-  type: 'text',
-}
-
 DropdownSearchInput.create = createShorthandFactory(DropdownSearchInput, (type) => ({ type }))
 
 export default DropdownSearchInput
diff --git a/src/modules/Dropdown/DropdownText.js b/src/modules/Dropdown/DropdownText.js
index fd7a106947..17e29bc4de 100644
--- a/src/modules/Dropdown/DropdownText.js
+++ b/src/modules/Dropdown/DropdownText.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const DropdownText = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('divider', className)
   const rest = getUnhandledProps(DropdownText, props)
-  const ElementType = getElementType(DropdownText, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index 06dddd6bff..ebcaaa7c10 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLIframe,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useAutoControlledValue,
@@ -109,7 +109,7 @@ const Embed = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', aspectRatio, useKeyOnly(active, 'active'), 'embed', className)
   const rest = getUnhandledProps(Embed, props)
-  const ElementType = getElementType(Embed, props)
+  const ElementType = getComponentType(props)
 
   const iconShorthand = icon !== undefined ? icon : 'video play'
 
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index cf35c358bb..dbd1b4679e 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   doesNodeContainClick,
   eventStack,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   isBrowser,
   makeDebugger,
@@ -37,15 +37,15 @@ const Modal = React.forwardRef(function (props, ref) {
   const {
     actions,
     basic,
-    centered,
+    centered = true,
     children,
     className,
     closeIcon,
-    closeOnDimmerClick,
-    closeOnDocumentClick,
+    closeOnDimmerClick = true,
+    closeOnDocumentClick = false,
     content,
-    dimmer,
-    eventPool,
+    dimmer = true,
+    eventPool = 'Modal',
     header,
     size,
     style,
@@ -185,7 +185,7 @@ const Modal = React.forwardRef(function (props, ref) {
       'modal transition visible active',
       className,
     )
-    const ElementType = getElementType(Modal, props)
+    const ElementType = getComponentType(props)
 
     const closeIconName = closeIcon === true ? 'close' : closeIcon
     const closeIconJSX = Icon.create(closeIconName, {
@@ -398,14 +398,6 @@ Modal.propTypes = {
    */
 }
 
-Modal.defaultProps = {
-  centered: true,
-  dimmer: true,
-  closeOnDimmerClick: true,
-  closeOnDocumentClick: false,
-  eventPool: 'Modal',
-}
-
 Modal.Actions = ModalActions
 Modal.Content = ModalContent
 Modal.Description = ModalDescription
diff --git a/src/modules/Modal/ModalActions.js b/src/modules/Modal/ModalActions.js
index 37bf007bea..b401e6aa73 100644
--- a/src/modules/Modal/ModalActions.js
+++ b/src/modules/Modal/ModalActions.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Button from '../../elements/Button'
@@ -20,7 +20,7 @@ const ModalActions = React.forwardRef(function (props, ref) {
 
   const classes = cx('actions', className)
   const rest = getUnhandledProps(ModalActions, props)
-  const ElementType = getElementType(ModalActions, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index 5c41101b59..4f04805dae 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const ModalContent = React.forwardRef(function (props, ref) {
     'content',
   )
   const rest = getUnhandledProps(ModalContent, props)
-  const ElementType = getElementType(ModalContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Modal/ModalDescription.js b/src/modules/Modal/ModalDescription.js
index 99c1a11502..691f1d56e8 100644
--- a/src/modules/Modal/ModalDescription.js
+++ b/src/modules/Modal/ModalDescription.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A modal can contain a description with one or more paragraphs.
@@ -11,7 +11,7 @@ const ModalDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(ModalDescription, props)
-  const ElementType = getElementType(ModalDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Modal/ModalDimmer.js b/src/modules/Modal/ModalDimmer.js
index 7599a54583..bad1132c16 100644
--- a/src/modules/Modal/ModalDimmer.js
+++ b/src/modules/Modal/ModalDimmer.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useClassNamesOnNode,
   useKeyOnly,
@@ -34,7 +34,7 @@ const ModalDimmer = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(ModalDimmer, props)
-  const ElementType = getElementType(ModalDimmer, props)
+  const ElementType = getComponentType(props)
 
   useClassNamesOnNode(mountNode, bodyClasses)
 
diff --git a/src/modules/Modal/ModalHeader.js b/src/modules/Modal/ModalHeader.js
index 14fa4404aa..6e0822f247 100644
--- a/src/modules/Modal/ModalHeader.js
+++ b/src/modules/Modal/ModalHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const ModalHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(ModalHeader, props)
-  const ElementType = getElementType(ModalHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index f6d1111ed1..1237cb0d07 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -10,7 +10,7 @@ import {
   childrenUtils,
   createHTMLDivision,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   SUI,
@@ -35,7 +35,9 @@ const debug = makeDebugger('popup')
  */
 function getPortalProps(props) {
   const portalProps = {}
-  const normalizedOn = _.isArray(props.on) ? props.on : [props.on]
+
+  const on = props.on ?? ['click', 'hover']
+  const normalizedOn = _.isArray(on) ? on : [on]
 
   if (props.hoverable) {
     portalProps.closeOnPortalMouseLeave = true
@@ -118,17 +120,17 @@ const Popup = React.forwardRef(function (props, ref) {
     content,
     context,
     children,
-    disabled,
-    eventsEnabled,
+    disabled = false,
+    eventsEnabled = true,
     flowing,
     header,
     inverted,
     offset,
-    pinned,
+    pinned = false,
     popper,
     popperDependencies,
-    popperModifiers,
-    position,
+    popperModifiers = [],
+    position = 'top left',
     positionFixed,
     size,
     style,
@@ -230,7 +232,7 @@ const Popup = React.forwardRef(function (props, ref) {
       'popup transition visible',
       className,
     )
-    const ElementType = getElementType(Popup, props)
+    const ElementType = getComponentType(props)
 
     const styles = {
       // Heads up! We need default styles to get working correctly `flowing`
@@ -469,15 +471,6 @@ Popup.propTypes = {
   wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
 }
 
-Popup.defaultProps = {
-  disabled: false,
-  eventsEnabled: true,
-  on: ['click', 'hover'],
-  pinned: false,
-  popperModifiers: [],
-  position: 'top left',
-}
-
 Popup.Content = PopupContent
 Popup.Header = PopupHeader
 
diff --git a/src/modules/Popup/PopupContent.js b/src/modules/Popup/PopupContent.js
index fa30a42244..167cef2c44 100644
--- a/src/modules/Popup/PopupContent.js
+++ b/src/modules/Popup/PopupContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const PopupContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(PopupContent, props)
-  const ElementType = getElementType(PopupContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Popup/PopupHeader.js b/src/modules/Popup/PopupHeader.js
index 94e6384ee9..8eff4c7fda 100644
--- a/src/modules/Popup/PopupHeader.js
+++ b/src/modules/Popup/PopupHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const PopupHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(PopupHeader, props)
-  const ElementType = getElementType(PopupHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 6e26f4afd1..7c20634714 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLDivision,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -141,7 +141,7 @@ const Progress = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Progress, props)
-  const ElementType = getElementType(Progress, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index f4bf35a6d9..c41a299797 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -16,7 +16,7 @@ import RatingIcon from './RatingIcon'
  * A rating indicates user interest in content.
  */
 const Rating = React.forwardRef(function (props, ref) {
-  const { className, clearable, disabled, icon, maxRating, size } = props
+  const { className, clearable = 'auto', disabled, icon, maxRating = 1, size } = props
 
   const [rating, setRating] = useAutoControlledValue({
     state: props.rating,
@@ -36,7 +36,7 @@ const Rating = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Rating, props)
-  const ElementType = getElementType(Rating, props)
+  const ElementType = getComponentType(props)
 
   const handleIconClick = (e, { index }) => {
     if (disabled) {
@@ -151,11 +151,6 @@ Rating.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
 }
 
-Rating.defaultProps = {
-  clearable: 'auto',
-  maxRating: 1,
-}
-
 Rating.Icon = RatingIcon
 
 export default Rating
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 22cc558e09..1d87534b71 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -4,7 +4,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * An internal icon sub-component for Rating component
@@ -19,7 +19,7 @@ const RatingIcon = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(RatingIcon, props)
-  const ElementType = getElementType(RatingIcon, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
@@ -97,8 +97,4 @@ RatingIcon.propTypes = {
   selected: PropTypes.bool,
 }
 
-RatingIcon.defaultProps = {
-  as: 'i',
-}
-
 export default RatingIcon
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 8cfd84fda9..145cc8f22a 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -9,7 +9,7 @@ import {
   ModernAutoControlledComponent as Component,
   customPropTypes,
   eventStack,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlInputAttrs,
   isBrowser,
@@ -45,7 +45,26 @@ const overrideSearchInputProps = (predefinedProps) => {
  * A search module allows a user to query for results from a selection of data
  */
 const Search = React.forwardRef((props, ref) => {
-  return <SearchInner {...props} innerRef={ref} />
+  const {
+    icon = 'search',
+    input = 'text',
+    minCharacters = 1,
+    noResultsMessage = 'No results found.',
+    showNoResults = true,
+    ...rest
+  } = props
+
+  return (
+    <SearchInner
+      icon={icon}
+      input={input}
+      minCharacters={minCharacters}
+      noResultsMessage={noResultsMessage}
+      showNoResults={showNoResults}
+      {...rest}
+      innerRef={ref}
+    />
+  )
 })
 
 class SearchInner extends Component {
@@ -499,7 +518,7 @@ class SearchInner extends Component {
       className,
     )
     const unhandled = getUnhandledProps(Search, this.props)
-    const ElementType = getElementType(Search, this.props)
+    const ElementType = getComponentType(this.props)
     const [htmlInputProps, rest] = partitionHTMLProps(unhandled, {
       htmlProps: htmlInputAttrs,
     })
@@ -679,18 +698,9 @@ Search.propTypes = {
   placeholder: PropTypes.string,
 }
 
-Search.defaultProps = {
-  icon: 'search',
-  input: 'text',
-  minCharacters: 1,
-  noResultsMessage: 'No results found.',
-  showNoResults: true,
-}
-
 SearchInner.autoControlledProps = ['open', 'value']
 
 if (process.env.NODE_ENV !== 'production') {
-  SearchInner.defaultProps = Search.defaultProps
   SearchInner.propTypes = Search.propTypes
 }
 
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 71d9c01224..218da2083f 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -5,18 +5,25 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
 const SearchCategory = React.forwardRef(function (props, ref) {
-  const { active, children, className, content, layoutRenderer, renderer } = props
+  const {
+    active,
+    children,
+    className,
+    content,
+    layoutRenderer = SearchCategoryLayout,
+    renderer = ({ name }) => name,
+  } = props
 
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
   const rest = getUnhandledProps(SearchCategory, props)
-  const ElementType = getElementType(SearchCategory, props)
+  const ElementType = getComponentType(props)
 
   const categoryContent = renderer(props)
   const resultsContent = childrenUtils.isNil(children) ? content : children
@@ -28,11 +35,6 @@ const SearchCategory = React.forwardRef(function (props, ref) {
   )
 })
 
-SearchCategory.defaultProps = {
-  layoutRenderer: SearchCategoryLayout,
-  renderer: ({ name }) => name,
-}
-
 SearchCategory.displayName = 'SearchCategory'
 SearchCategory.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index 69f3ac5239..7bba25b50a 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -32,7 +32,7 @@ const defaultRenderer = ({ image, price, title, description }) => [
 ]
 
 const SearchResult = React.forwardRef(function (props, ref) {
-  const { active, className, renderer } = props
+  const { active, className, renderer = defaultRenderer } = props
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
@@ -40,7 +40,7 @@ const SearchResult = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'result', className)
   const rest = getUnhandledProps(SearchResult, props)
-  const ElementType = getElementType(SearchResult, props)
+  const ElementType = getComponentType(props)
 
   // Note: You technically only need the 'content' wrapper when there's an
   // image. However, optionally wrapping it makes this function a lot more
@@ -99,8 +99,4 @@ SearchResult.propTypes = {
   title: PropTypes.string.isRequired,
 }
 
-SearchResult.defaultProps = {
-  renderer: defaultRenderer,
-}
-
 export default SearchResult
diff --git a/src/modules/Search/SearchResults.js b/src/modules/Search/SearchResults.js
index dc39226950..5c44b66e31 100644
--- a/src/modules/Search/SearchResults.js
+++ b/src/modules/Search/SearchResults.js
@@ -2,13 +2,13 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 const SearchResults = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('results transition', className)
   const rest = getUnhandledProps(SearchResults, props)
-  const ElementType = getElementType(SearchResults, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 764c16178e..0e6c470bdc 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   doesNodeContainClick,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
   isRefObject,
   useKeyOnly,
   useIsomorphicLayoutEffect,
@@ -50,7 +50,16 @@ function useAnimationTick(visible) {
  * A sidebar hides additional content beside a page.
  */
 const Sidebar = React.forwardRef((props, ref) => {
-  const { animation, className, children, content, direction, target, visible, width } = props
+  const {
+    animation,
+    className,
+    children,
+    content,
+    direction = 'left',
+    target = documentRef,
+    visible = false,
+    width,
+  } = props
 
   const [animationTick, resetAnimationTick] = useAnimationTick(visible)
   const elementRef = useMergedRefs(ref, React.useRef())
@@ -107,7 +116,7 @@ const Sidebar = React.forwardRef((props, ref) => {
     className,
   )
   const rest = getUnhandledProps(Sidebar, props)
-  const ElementType = getElementType(Sidebar, props)
+  const ElementType = getComponentType(props)
   const targetProp = isRefObject(target) ? { targetRef: target } : { target }
 
   return (
@@ -190,12 +199,6 @@ Sidebar.propTypes = {
   width: PropTypes.oneOf(['very thin', 'thin', 'wide', 'very wide']),
 }
 
-Sidebar.defaultProps = {
-  direction: 'left',
-  target: documentRef,
-  visible: false,
-}
-
 Sidebar.animationDuration = 500
 
 Sidebar.Pushable = SidebarPushable
diff --git a/src/modules/Sidebar/SidebarPushable.js b/src/modules/Sidebar/SidebarPushable.js
index ab7ce6b604..b8f5dd8b0c 100644
--- a/src/modules/Sidebar/SidebarPushable.js
+++ b/src/modules/Sidebar/SidebarPushable.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A pushable sub-component for Sidebar.
@@ -11,7 +11,7 @@ const SidebarPushable = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('pushable', className)
   const rest = getUnhandledProps(SidebarPushable, props)
-  const ElementType = getElementType(SidebarPushable, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Sidebar/SidebarPusher.js b/src/modules/Sidebar/SidebarPusher.js
index 670e92eb92..ffc791dee5 100644
--- a/src/modules/Sidebar/SidebarPusher.js
+++ b/src/modules/Sidebar/SidebarPusher.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -18,7 +18,7 @@ const SidebarPusher = React.forwardRef(function (props, ref) {
 
   const classes = cx('pusher', useKeyOnly(dimmed, 'dimmed'), className)
   const rest = getUnhandledProps(SidebarPusher, props)
-  const ElementType = getElementType(SidebarPusher, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index ab8c821c9a..3a30afa4c4 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -5,7 +5,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   isRefObject,
   isBrowser,
@@ -18,13 +18,13 @@ import {
  */
 const Sticky = React.forwardRef(function (props, ref) {
   const {
-    active,
-    bottomOffset,
+    active = true,
+    bottomOffset = 0,
     children,
     className,
     context,
-    offset,
-    scrollContext,
+    offset = 0,
+    scrollContext = isBrowser() ? window : null,
     styleElement,
   } = props
 
@@ -242,7 +242,7 @@ const Sticky = React.forwardRef(function (props, ref) {
   // ----------------------------------------
 
   const rest = getUnhandledProps(Sticky, props)
-  const ElementType = getElementType(Sticky, props)
+  const ElementType = getComponentType(props)
 
   const containerClasses = cx(
     sticky && 'ui',
@@ -333,11 +333,4 @@ Sticky.propTypes = {
   styleElement: PropTypes.object,
 }
 
-Sticky.defaultProps = {
-  active: true,
-  bottomOffset: 0,
-  offset: 0,
-  scrollContext: isBrowser() ? window : null,
-}
-
 export default Sticky
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index 3004f4ceda..03ef505cea 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useAutoControlledValue,
 } from '../../lib'
@@ -19,7 +19,13 @@ import TabPane from './TabPane'
  * @see Segment
  */
 const Tab = React.forwardRef(function (props, ref) {
-  const { grid, menu, panes, menuPosition, renderActiveOnly } = props
+  const {
+    grid = { paneWidth: 12, tabWidth: 4 },
+    menu = { attached: true, tabular: true },
+    menuPosition,
+    panes,
+    renderActiveOnly = true,
+  } = props
 
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
@@ -86,7 +92,7 @@ const Tab = React.forwardRef(function (props, ref) {
 
   const menuElement = renderMenu()
   const rest = getUnhandledProps(Tab, props)
-  const ElementType = getElementType(Tab, props)
+  const ElementType = getComponentType(props)
 
   if (menuElement.props.vertical) {
     return (
@@ -155,14 +161,6 @@ Tab.propTypes = {
   renderActiveOnly: PropTypes.bool,
 }
 
-Tab.autoControlledProps = ['activeIndex']
-
-Tab.defaultProps = {
-  grid: { paneWidth: 12, tabWidth: 4 },
-  menu: { attached: true, tabular: true },
-  renderActiveOnly: true,
-}
-
 Tab.Pane = TabPane
 
 export default Tab
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 4551dfb497..0e1bdbad45 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -16,11 +16,11 @@ import Segment from '../../elements/Segment/Segment'
  * A tab pane holds the content of a tab.
  */
 const TabPane = React.forwardRef(function (props, ref) {
-  const { active, children, className, content, loading } = props
+  const { active = true, children, className, content, loading } = props
 
   const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
   const rest = getUnhandledProps(TabPane, props)
-  const ElementType = getElementType(TabPane, props)
+  const ElementType = getComponentType(props, { defaultAs: Segment })
 
   const calculatedDefaultProps = {}
 
@@ -35,11 +35,6 @@ const TabPane = React.forwardRef(function (props, ref) {
   )
 })
 
-TabPane.defaultProps = {
-  as: Segment,
-  active: true,
-}
-
 TabPane.displayName = 'TabPane'
 TabPane.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 0a8142939e..4708820aba 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   SUI,
@@ -19,7 +19,7 @@ const debug = makeDebugger('transition_group')
  * Wraps all children elements with proper callbacks and props.
  *
  * @param {React.ReactNode} children
- * @param {Stream} animation
+ * @param {String} animation
  * @param {Number|String|Object} duration
  * @param {Boolean} directional
  *
@@ -113,12 +113,12 @@ const TransitionGroup = React.forwardRef(function (props, ref) {
 
   const children = useWrappedChildren(
     props.children,
-    props.animation,
-    props.duration,
+    props.animation ?? 'fade',
+    props.duration ?? 500,
     props.directional,
   )
 
-  const ElementType = getElementType(TransitionGroup, props)
+  const ElementType = getComponentType(props, { defaultAs: React.Fragment })
   const rest = getUnhandledProps(TransitionGroup, props)
 
   return (
@@ -153,10 +153,4 @@ TransitionGroup.propTypes = {
   ]),
 }
 
-TransitionGroup.defaultProps = {
-  as: React.Fragment,
-  animation: 'fade',
-  duration: 500,
-}
-
 export default TransitionGroup
diff --git a/src/views/Advertisement/Advertisement.js b/src/views/Advertisement/Advertisement.js
index 733e20c3b2..30c35845d5 100644
--- a/src/views/Advertisement/Advertisement.js
+++ b/src/views/Advertisement/Advertisement.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -25,7 +25,7 @@ const Advertisement = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Advertisement, props)
-  const ElementType = getElementType(Advertisement, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} data-text={test} ref={ref}>
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index 13cefed144..f2763c3285 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -52,10 +52,12 @@ const Card = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Card, props)
-  const ElementType = getElementType(Card, props, () => {
-    if (onClick) {
-      return 'a'
-    }
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) {
+        return 'a'
+      }
+    },
   })
 
   const handleClick = useEventCallback((e) => {
diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js
index 475ca2e719..ecb0a3afe6 100644
--- a/src/views/Card/CardContent.js
+++ b/src/views/Card/CardContent.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -25,7 +25,7 @@ const CardContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(extra, 'extra'), useTextAlignProp(textAlign), 'content', className)
   const rest = getUnhandledProps(CardContent, props)
-  const ElementType = getElementType(CardContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Card/CardDescription.js b/src/views/Card/CardDescription.js
index 49352e62f7..0de11e2a4b 100644
--- a/src/views/Card/CardDescription.js
+++ b/src/views/Card/CardDescription.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardDescription = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'description', className)
   const rest = getUnhandledProps(CardDescription, props)
-  const ElementType = getElementType(CardDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js
index 276aa27056..7263a66e8c 100644
--- a/src/views/Card/CardGroup.js
+++ b/src/views/Card/CardGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -42,7 +42,7 @@ const CardGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(CardGroup, props)
-  const ElementType = getElementType(CardGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Card/CardHeader.js b/src/views/Card/CardHeader.js
index 9dd0e16d31..bf41e51cfe 100644
--- a/src/views/Card/CardHeader.js
+++ b/src/views/Card/CardHeader.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'header', className)
   const rest = getUnhandledProps(CardHeader, props)
-  const ElementType = getElementType(CardHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Card/CardMeta.js b/src/views/Card/CardMeta.js
index ac1377d220..d45b075fac 100644
--- a/src/views/Card/CardMeta.js
+++ b/src/views/Card/CardMeta.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardMeta = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'meta', className)
   const rest = getUnhandledProps(CardMeta, props)
-  const ElementType = getElementType(CardMeta, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js
index bf136fbed0..59db4e52df 100644
--- a/src/views/Comment/Comment.js
+++ b/src/views/Comment/Comment.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -26,7 +26,7 @@ const Comment = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(collapsed, 'collapsed'), 'comment', className)
   const rest = getUnhandledProps(Comment, props)
-  const ElementType = getElementType(Comment, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index 3dde605c83..82eae2cc95 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -18,7 +18,7 @@ const CommentAction = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(CommentAction, props)
-  const ElementType = getElementType(CommentAction, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -27,10 +27,6 @@ const CommentAction = React.forwardRef(function (props, ref) {
   )
 })
 
-CommentAction.defaultProps = {
-  as: 'a',
-}
-
 CommentAction.displayName = 'CommentAction'
 CommentAction.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/views/Comment/CommentActions.js b/src/views/Comment/CommentActions.js
index 8286ae7005..c1cca85fc9 100644
--- a/src/views/Comment/CommentActions.js
+++ b/src/views/Comment/CommentActions.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain an list of actions a user may perform related to this comment.
@@ -11,7 +11,7 @@ const CommentActions = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('actions', className)
   const rest = getUnhandledProps(CommentActions, props)
-  const ElementType = getElementType(CommentActions, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentAuthor.js b/src/views/Comment/CommentAuthor.js
index be3e412ac7..01b3747c19 100644
--- a/src/views/Comment/CommentAuthor.js
+++ b/src/views/Comment/CommentAuthor.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain an author.
@@ -11,7 +11,7 @@ const CommentAuthor = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('author', className)
   const rest = getUnhandledProps(CommentAuthor, props)
-  const ElementType = getElementType(CommentAuthor, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentAvatar.js b/src/views/Comment/CommentAvatar.js
index c709321080..dc5aee78d1 100644
--- a/src/views/Comment/CommentAvatar.js
+++ b/src/views/Comment/CommentAvatar.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   createHTMLImage,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlImageProps,
   partitionHTMLProps,
@@ -19,7 +19,7 @@ const CommentAvatar = React.forwardRef(function (props, ref) {
   const classes = cx('avatar', className)
   const rest = getUnhandledProps(CommentAvatar, props)
   const [imageProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
-  const ElementType = getElementType(CommentAvatar, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rootProps} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentContent.js b/src/views/Comment/CommentContent.js
index 9badf0c8ec..df72aeb471 100644
--- a/src/views/Comment/CommentContent.js
+++ b/src/views/Comment/CommentContent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain content.
@@ -11,7 +11,7 @@ const CommentContent = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'content')
   const rest = getUnhandledProps(CommentContent, props)
-  const ElementType = getElementType(CommentContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
index 5b18238dea..2eea6998e6 100644
--- a/src/views/Comment/CommentGroup.js
+++ b/src/views/Comment/CommentGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -28,7 +28,7 @@ const CommentGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(CommentGroup, props)
-  const ElementType = getElementType(CommentGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentMetadata.js b/src/views/Comment/CommentMetadata.js
index f06970322e..92fee6d069 100644
--- a/src/views/Comment/CommentMetadata.js
+++ b/src/views/Comment/CommentMetadata.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
@@ -11,7 +11,7 @@ const CommentMetadata = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('metadata', className)
   const rest = getUnhandledProps(CommentMetadata, props)
-  const ElementType = getElementType(CommentMetadata, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentText.js b/src/views/Comment/CommentText.js
index 45392353bf..17f2bbd895 100644
--- a/src/views/Comment/CommentText.js
+++ b/src/views/Comment/CommentText.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain text.
@@ -11,7 +11,7 @@ const CommentText = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'text')
   const rest = getUnhandledProps(CommentText, props)
-  const ElementType = getElementType(CommentText, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Feed/Feed.js b/src/views/Feed/Feed.js
index 725db44d14..c3a35703b1 100644
--- a/src/views/Feed/Feed.js
+++ b/src/views/Feed/Feed.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 import FeedContent from './FeedContent'
 import FeedDate from './FeedDate'
 import FeedEvent from './FeedEvent'
@@ -22,7 +22,7 @@ const Feed = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, 'feed', className)
   const rest = getUnhandledProps(Feed, props)
-  const ElementType = getElementType(Feed, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 1ee33e2eb8..8874ae80a8 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedDate from './FeedDate'
@@ -19,7 +19,7 @@ const FeedContent = React.forwardRef(function (props, ref) {
 
   const classes = cx('content', className)
   const rest = getUnhandledProps(FeedContent, props)
-  const ElementType = getElementType(FeedContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedDate.js b/src/views/Feed/FeedDate.js
index 628f73aabb..e4a836d355 100644
--- a/src/views/Feed/FeedDate.js
+++ b/src/views/Feed/FeedDate.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * An event or an event summary can contain a date.
@@ -11,7 +11,7 @@ const FeedDate = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('date', className)
   const rest = getUnhandledProps(FeedDate, props)
-  const ElementType = getElementType(FeedDate, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index 31867b3b73..e4f971bddc 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { createShorthand, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { createShorthand, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import FeedContent from './FeedContent'
 import FeedLabel from './FeedLabel'
 
@@ -25,7 +25,7 @@ const FeedEvent = React.forwardRef(function (props, ref) {
 
   const classes = cx('event', className)
   const rest = getUnhandledProps(FeedEvent, props)
-  const ElementType = getElementType(FeedEvent, props)
+  const ElementType = getComponentType(props)
 
   const hasContentProp = content || date || extraImages || extraText || meta || summary
   const contentProps = { content, date, extraImages, extraText, meta, summary }
diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js
index cb5d446fe6..50f51a8ce8 100644
--- a/src/views/Feed/FeedExtra.js
+++ b/src/views/Feed/FeedExtra.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -25,7 +25,7 @@ const FeedExtra = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(FeedExtra, props)
-  const ElementType = getElementType(FeedExtra, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js
index 93f28bd6cd..56fd9acd6b 100644
--- a/src/views/Feed/FeedLabel.js
+++ b/src/views/Feed/FeedLabel.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -19,7 +19,7 @@ const FeedLabel = React.forwardRef(function (props, ref) {
 
   const classes = cx('label', className)
   const rest = getUnhandledProps(FeedLabel, props)
-  const ElementType = getElementType(FeedLabel, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index 70eca84786..b5e4c8bf2d 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import Icon from '../../elements/Icon'
 
 /**
@@ -13,7 +13,7 @@ const FeedLike = React.forwardRef(function (props, ref) {
 
   const classes = cx('like', className)
   const rest = getUnhandledProps(FeedLike, props)
-  const ElementType = getElementType(FeedLike, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -31,10 +31,6 @@ const FeedLike = React.forwardRef(function (props, ref) {
   )
 })
 
-FeedLike.defaultProps = {
-  as: 'a',
-}
-
 FeedLike.displayName = 'FeedLike'
 FeedLike.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js
index 816dbc9dba..b0c5d0f222 100644
--- a/src/views/Feed/FeedMeta.js
+++ b/src/views/Feed/FeedMeta.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedLike from './FeedLike'
@@ -19,7 +19,7 @@ const FeedMeta = React.forwardRef(function (props, ref) {
 
   const classes = cx('meta', className)
   const rest = getUnhandledProps(FeedMeta, props)
-  const ElementType = getElementType(FeedMeta, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index 2e2055c7f8..2be1f0c4b3 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedDate from './FeedDate'
@@ -20,7 +20,7 @@ const FeedSummary = React.forwardRef(function (props, ref) {
 
   const classes = cx('summary', className)
   const rest = getUnhandledProps(FeedSummary, props)
-  const ElementType = getElementType(FeedSummary, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index 9b7d44e55c..10866e8720 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A feed can contain a user element.
  */
 const FeedUser = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('user', className)
   const rest = getUnhandledProps(FeedUser, props)
-  const ElementType = getElementType(FeedUser, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -35,8 +36,4 @@ FeedUser.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-FeedUser.defaultProps = {
-  as: 'a',
-}
-
 export default FeedUser
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index e76e5e4862..41f37257a6 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import ItemContent from './ItemContent'
 import ItemDescription from './ItemDescription'
 import ItemExtra from './ItemExtra'
@@ -19,7 +19,7 @@ const Item = React.forwardRef(function (props, ref) {
 
   const classes = cx('item', className)
   const rest = getUnhandledProps(Item, props)
-  const ElementType = getElementType(Item, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index 6699a1cbc1..add8a28dd4 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useVerticalAlignProp,
@@ -23,7 +23,7 @@ const ItemContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
   const rest = getUnhandledProps(ItemContent, props)
-  const ElementType = getElementType(ItemContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
index be5440a41d..8e5082c97b 100644
--- a/src/views/Item/ItemDescription.js
+++ b/src/views/Item/ItemDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('description', className)
   const rest = getUnhandledProps(ItemDescription, props)
-  const ElementType = getElementType(ItemDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
index ed9a2a0add..3402f02f3a 100644
--- a/src/views/Item/ItemExtra.js
+++ b/src/views/Item/ItemExtra.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemExtra = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('extra', className)
   const rest = getUnhandledProps(ItemExtra, props)
-  const ElementType = getElementType(ItemExtra, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index 7ceca3b9ea..33269ecce3 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useKeyOrValueAndKey,
@@ -29,7 +29,7 @@ const ItemGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ItemGroup, props)
-  const ElementType = getElementType(ItemGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
index 610e6d649a..4a841b8a50 100644
--- a/src/views/Item/ItemHeader.js
+++ b/src/views/Item/ItemHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(ItemHeader, props)
-  const ElementType = getElementType(ItemHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
index 307bf59a72..73d347d9d8 100644
--- a/src/views/Item/ItemMeta.js
+++ b/src/views/Item/ItemMeta.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemMeta = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('meta', className)
   const rest = getUnhandledProps(ItemMeta, props)
-  const ElementType = getElementType(ItemMeta, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index e11df59393..05b910d017 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -46,7 +46,7 @@ const Statistic = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Statistic, props)
-  const ElementType = getElementType(Statistic, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index eac360d23b..c85df42892 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -31,7 +31,7 @@ const StatisticGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(StatisticGroup, props)
-  const ElementType = getElementType(StatisticGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index efc01ab9bc..b1134cd185 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const StatisticLabel = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('label', className)
   const rest = getUnhandledProps(StatisticLabel, props)
-  const ElementType = getElementType(StatisticLabel, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 78ac615220..2ce9eda25a 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -19,7 +19,7 @@ const StatisticValue = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(text, 'text'), 'value', className)
   const rest = getUnhandledProps(StatisticValue, props)
-  const ElementType = getElementType(StatisticValue, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/test/specs/addons/Confirm/Confirm-test.js b/test/specs/addons/Confirm/Confirm-test.js
index 46a96b471e..499aa41366 100644
--- a/test/specs/addons/Confirm/Confirm-test.js
+++ b/test/specs/addons/Confirm/Confirm-test.js
@@ -37,6 +37,7 @@ describe('Confirm', () => {
     requiredProps: { open: true },
   })
   common.implementsShorthandProp(Confirm, {
+    defaultValue: 'OK',
     autoGenerateKey: false,
     propKey: 'content',
     ShorthandComponent: Modal.Content,
@@ -67,7 +68,12 @@ describe('Confirm', () => {
 
   describe('cancelButton', () => {
     it('is "Cancel" by default', () => {
-      Confirm.defaultProps.cancelButton.should.equal('Cancel')
+      shallow(<Confirm />)
+        .find('Button')
+        .first()
+        .shallow()
+        .childAt(0)
+        .should.have.text('Cancel')
     })
     it('sets the cancel button text', () => {
       shallow(<Confirm cancelButton='foo' />)
@@ -81,7 +87,11 @@ describe('Confirm', () => {
 
   describe('confirmButton', () => {
     it('is "OK" by default', () => {
-      Confirm.defaultProps.confirmButton.should.equal('OK')
+      shallow(<Confirm />)
+        .find('Button[primary]')
+        .shallow()
+        .childAt(0)
+        .should.have.text('OK')
     })
     it('sets the confirm button text', () => {
       shallow(<Confirm confirmButton='foo' />)
diff --git a/test/specs/commonTests/classNameHelpers.js b/test/specs/commonTests/classNameHelpers.js
index 65671731a1..6fc47dc6de 100644
--- a/test/specs/commonTests/classNameHelpers.js
+++ b/test/specs/commonTests/classNameHelpers.js
@@ -37,13 +37,12 @@ export const noClassNameFromBoolProps = (Component, propKey, propValues, options
 }
 
 export const noDefaultClassNameFromProp = (Component, propKey, propValues, options = {}) => {
-  const { defaultProps = {} } = Component
-  const { className = propKey, requiredProps = {} } = options
+  const { className = propKey, requiredProps = {}, defaultValue } = options
 
   // required props may include a prop that creates a className
   // if so, we cannot assert that it doesn't exist by default because it is required to exist
   // skip assertions for required props
-  if (propKey in defaultProps) return
+  if (defaultValue) return
   if (propKey in requiredProps) return
 
   it('is not included in className when not defined', () => {
diff --git a/test/specs/commonTests/implementsClassNameProps.js b/test/specs/commonTests/implementsClassNameProps.js
index 154ccd93c7..8b73ea2b8b 100644
--- a/test/specs/commonTests/implementsClassNameProps.js
+++ b/test/specs/commonTests/implementsClassNameProps.js
@@ -37,6 +37,7 @@ export const propKeyAndValueToClassName = (Component, propKey, propValues, optio
  * @param {String} propKey A props key.
  * @param {Object} [options={}]
  * @param {Object} [options.className=propKey] The className to assert exists.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {Object} [options.className=propKey] The className to assert exists.
  */
@@ -80,6 +81,7 @@ export const propKeyOnlyToClassName = (Component, propKey, options = {}) => {
  * @param {String} propKey A props key.
  * @param {array} propValues Array of possible values of prop.
  * @param {Object} [options={}]
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {Object} [options.className=propKey] The className to assert exists.
  */
@@ -125,6 +127,7 @@ export const propKeyOrValueAndKeyToClassName = (Component, propKey, propValues,
  * @param {array} propValues Array of possible props values.
  * @param {Object} [options={}]
  * @param {Object} [options.className=propKey] The className to assert exists.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Number} [options.nestingLevel=0] The nesting level of the component.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  */
diff --git a/test/specs/commonTests/implementsCommonProps.js b/test/specs/commonTests/implementsCommonProps.js
index dc7a4b2dea..ec0eb026d6 100644
--- a/test/specs/commonTests/implementsCommonProps.js
+++ b/test/specs/commonTests/implementsCommonProps.js
@@ -105,6 +105,7 @@ export const implementsHTMLLabelProp = (Component, options = {}) => {
  * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
  * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
  * @param {Object} [options.requiredProps={}] Props required to render the component.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
diff --git a/test/specs/commonTests/implementsShorthandProp.js b/test/specs/commonTests/implementsShorthandProp.js
index 64c8f7fc57..e89dcdb565 100644
--- a/test/specs/commonTests/implementsShorthandProp.js
+++ b/test/specs/commonTests/implementsShorthandProp.js
@@ -30,12 +30,14 @@ const shorthandComponentName = (ShorthandComponent) => {
  * @param {Boolean} [options.parentIsFragment=false] A flag that shows the type of the Component to test.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {boolean} [options.rendersPortal=false] Does this component render a Portal powered component?
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
 export default (Component, options = {}) => {
   const {
     alwaysPresent,
+    defaultValue,
     assertExactMatch = true,
     autoGenerateKey = true,
     mapValueToProps,
@@ -90,10 +92,9 @@ export default (Component, options = {}) => {
       }
     }
 
-    if (alwaysPresent || (Component.defaultProps && Component.defaultProps[propKey])) {
+    if (alwaysPresent) {
       it(`has default ${name} when not defined`, () => {
         wrapper = mount(React.createElement(Component, requiredProps))
-
         wrapper.should.have.descendants(ShorthandComponent)
       })
     } else {
@@ -101,14 +102,16 @@ export default (Component, options = {}) => {
         noDefaultClassNameFromProp(Component, propKey, [], options)
       }
 
-      it(`has no ${name} when not defined`, () => {
-        wrapper = mount(React.createElement(Component, requiredProps))
+      if (!defaultValue) {
+        it(`has no ${name} when not defined`, () => {
+          wrapper = mount(React.createElement(Component, requiredProps))
 
-        wrapper.should.not.have.descendants(ShorthandComponent)
-      })
+          wrapper.should.not.have.descendants(ShorthandComponent)
+        })
+      }
     }
 
-    if (!alwaysPresent) {
+    if (!alwaysPresent && !defaultValue) {
       it(`has no ${name} when null`, () => {
         const element = React.createElement(Component, { ...requiredProps, [propKey]: null })
         wrapper = mount(element)
diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
index 616e7de4e6..d183696e2e 100644
--- a/test/specs/commonTests/isConformant.js
+++ b/test/specs/commonTests/isConformant.js
@@ -211,7 +211,6 @@ export default function isConformant(Component, options = {}) {
     it('Component.handledProps includes all handled props', () => {
       const computedProps = _.union(
         componentProps.autoControlledProps,
-        _.keys(componentProps.defaultProps),
         _.keys(componentProps.propTypes),
       )
       const expectedProps = _.uniq(computedProps).sort()
@@ -219,7 +218,7 @@ export default function isConformant(Component, options = {}) {
       componentProps.handledProps.should.to.deep.equal(
         expectedProps,
         'It seems that not all props were defined in Component.handledProps, you need to check that they are equal ' +
-          'to the union of Component.autoControlledProps and keys of Component.defaultProps and Component.propTypes',
+          'to the union of Component.autoControlledProps and keys of Component.propTypes',
       )
     })
   })
@@ -314,6 +313,15 @@ export default function isConformant(Component, options = {}) {
     })
   })
 
+  // ----------------------------------------
+  // Has no deprecated .defaultProps
+  // ----------------------------------------
+  describe('defaultProps', () => {
+    it('does not exist', () => {
+      expect(Component.defaultProps).to.be.undefined()
+    })
+  })
+
   // ----------------------------------------
   // Handles className
   // ----------------------------------------
diff --git a/test/specs/elements/Image/Image-test.js b/test/specs/elements/Image/Image-test.js
index 79cd097f5d..013515efd6 100644
--- a/test/specs/elements/Image/Image-test.js
+++ b/test/specs/elements/Image/Image-test.js
@@ -88,8 +88,7 @@ describe('Image', () => {
 
   describe('ui', () => {
     it('is true by default', () => {
-      Image.defaultProps.should.have.any.keys('ui')
-      Image.defaultProps.ui.should.equal(true)
+      shallow(<Image />).should.have.className('ui')
     })
     it('adds the "ui" className when true', () => {
       shallow(<Image ui />).should.have.className('ui')
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 8f43d884aa..4b3d9e8d06 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -112,6 +112,7 @@ describe('Dropdown', () => {
   ])
 
   common.implementsIconProp(Dropdown, {
+    defaultValue: 'search',
     assertExactMatch: false,
     autoGenerateKey: false,
   })
@@ -682,7 +683,6 @@ describe('Dropdown', () => {
 
   describe('icon', () => {
     it('defaults to a dropdown icon', () => {
-      Dropdown.defaultProps.icon.should.equal('dropdown')
       wrapperMount(<Dropdown />).should.contain.descendants('.dropdown.icon')
     })
 
diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js
index fb42392a6d..71d10213c0 100644
--- a/test/specs/modules/Modal/Modal-test.js
+++ b/test/specs/modules/Modal/Modal-test.js
@@ -420,7 +420,11 @@ describe('Modal', () => {
 
   describe('closeOnDocumentClick', () => {
     it('is false by default', () => {
-      Modal.defaultProps.closeOnDocumentClick.should.equal(false)
+      wrapperMount(<Modal defaultOpen />)
+
+      assertBodyContains('.ui.dimmer')
+      domEvent.click(document.body)
+      assertBodyContains('.ui.dimmer', true)
     })
     it('closes the modal on document click when true', () => {
       wrapperMount(<Modal defaultOpen closeOnDocumentClick />)
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
index 20844c9235..78450d3c3e 100644
--- a/test/specs/modules/Popup/Popup-test.js
+++ b/test/specs/modules/Popup/Popup-test.js
@@ -113,7 +113,6 @@ describe('Popup', () => {
   describe('eventsEnabled ', () => {
     it(`is "true" by default`, () => {
       wrapperMount(<Popup open />)
-      wrapper.should.have.prop('eventsEnabled', true)
 
       const modifiers = wrapper.find('Popper').prop('modifiers')
       const eventListeners = _.find(modifiers, (m) => m.name === 'eventListeners')
diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js
index 897f91229a..0720f3e4d9 100644
--- a/test/specs/modules/Search/Search-test.js
+++ b/test/specs/modules/Search/Search-test.js
@@ -125,7 +125,6 @@ describe('Search', () => {
 
   describe('icon', () => {
     it('defaults to a search icon', () => {
-      Search.defaultProps.icon.should.equal('search')
       wrapperMount(<Search />).should.contain.descendants('.search.icon')
     })
   })
diff --git a/test/specs/modules/Sidebar/Sidebar-test.js b/test/specs/modules/Sidebar/Sidebar-test.js
index 21afd96f93..57bd6e4e0e 100644
--- a/test/specs/modules/Sidebar/Sidebar-test.js
+++ b/test/specs/modules/Sidebar/Sidebar-test.js
@@ -20,7 +20,9 @@ describe('Sidebar', () => {
     'slide out',
     'slide along',
   ])
-  common.propValueOnlyToClassName(Sidebar, 'direction', ['top', 'right', 'bottom', 'left'])
+  common.propValueOnlyToClassName(Sidebar, 'direction', ['top', 'right', 'bottom', 'left'], {
+    defaultValue: 'left',
+  })
   common.propValueOnlyToClassName(Sidebar, 'width', ['very thin', 'thin', 'wide', 'very wide'])
 
   describe('componentWillUnmount', () => {
diff --git a/test/specs/modules/Tab/Tab-test.js b/test/specs/modules/Tab/Tab-test.js
index 14bfcf1003..b662824ff5 100644
--- a/test/specs/modules/Tab/Tab-test.js
+++ b/test/specs/modules/Tab/Tab-test.js
@@ -127,22 +127,18 @@ describe('Tab', () => {
     it('is set when clicking an item', () => {
       const wrapper = mount(<Tab panes={panes} />)
 
-      wrapper.find('TabPane[active]').should.contain.text('Tab 1 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 1')
 
       wrapper.find('MenuItem').at(1).simulate('click')
-
-      wrapper.find('TabPane[active]').should.contain.text('Tab 2 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 2 Content')
     })
 
     it('can be set via props', () => {
       const wrapper = mount(<Tab panes={panes} activeIndex={1} />)
 
-      wrapper.find('TabPane[active]').should.contain.text('Tab 2 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 2 Content')
 
-      wrapper
-        .setProps({ activeIndex: 2 })
-        .find('TabPane[active]')
-        .should.contain.text('Tab 3 Content')
+      wrapper.setProps({ activeIndex: 2 }).find('TabPane').should.contain.text('Tab 3 Content')
     })
 
     it('determines which pane render method is called', () => {
diff --git a/test/specs/modules/Tab/TabPane-test.js b/test/specs/modules/Tab/TabPane-test.js
index 5e69a69f68..d20688af22 100644
--- a/test/specs/modules/Tab/TabPane-test.js
+++ b/test/specs/modules/Tab/TabPane-test.js
@@ -9,7 +9,7 @@ describe('TabPane', () => {
 
   common.implementsCreateMethod(TabPane)
 
-  common.propKeyOnlyToClassName(TabPane, 'active')
+  common.propKeyOnlyToClassName(TabPane, 'active', { defaultValue: 'left' })
   common.propKeyOnlyToClassName(TabPane, 'loading')
 
   it('renders a Segment by default', () => {
diff --git a/test/utils/getComponentProps.js b/test/utils/getComponentProps.js
index 61b81536ef..6e8c28397d 100644
--- a/test/utils/getComponentProps.js
+++ b/test/utils/getComponentProps.js
@@ -13,7 +13,6 @@ export default function getComponentProps(Component) {
 
   return {
     autoControlledProps: Component.autoControlledProps,
-    defaultProps: Component.defaultProps,
     handledProps: Component.handledProps,
     propTypes: Component.propTypes,
   }

From 8700e57e29ce0b3b852187725b009e259fb42279 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sat, 30 Dec 2023 14:10:35 +0100
Subject: [PATCH 13/30] chore: bump Babel & react-docgen (#4454)

---
 .babel-preset.js                              |    3 -
 .circleci/config.yml                          |    6 +-
 ...ponent-menu.js => gulp-component-menu.mjs} |    2 +-
 ...-example-menu.js => gulp-example-menu.mjs} |    2 +-
 ...mple-source.js => gulp-example-source.mjs} |    0
 ...-react-docgen.js => gulp-react-docgen.mjs} |    2 +-
 ...tComponentInfo.js => getComponentInfo.mjs} |   22 +-
 gulp/plugins/util/index.js                    |    6 -
 .../util/{parseBuffer.js => parseBuffer.mjs}  |    0
 ...eDefaultValue.js => parseDefaultValue.mjs} |    0
 ...parseDocSection.js => parseDocSection.mjs} |    4 +-
 .../{parseDocblock.js => parseDocblock.mjs}   |    0
 gulp/plugins/util/parseType.js                |   59 -
 gulp/plugins/util/parseType.mjs               |   79 +
 gulp/plugins/util/parserCustomHandler.js      |   82 -
 gulp/plugins/util/parserCustomHandler.mjs     |  118 +
 gulp/{sh.js => sh.mjs}                        |    0
 gulp/tasks/{dist.js => dist.mjs}              |   10 +-
 gulp/tasks/{docs.js => docs.mjs}              |   24 +-
 gulpfile.js => gulpfile.mjs                   |   14 +-
 package.json                                  |   29 +-
 yarn.lock                                     | 2221 ++++++++++-------
 22 files changed, 1517 insertions(+), 1166 deletions(-)
 rename gulp/plugins/{gulp-component-menu.js => gulp-component-menu.mjs} (94%)
 rename gulp/plugins/{gulp-example-menu.js => gulp-example-menu.mjs} (97%)
 rename gulp/plugins/{gulp-example-source.js => gulp-example-source.mjs} (100%)
 rename gulp/plugins/{gulp-react-docgen.js => gulp-react-docgen.mjs} (93%)
 rename gulp/plugins/util/{getComponentInfo.js => getComponentInfo.mjs} (87%)
 delete mode 100644 gulp/plugins/util/index.js
 rename gulp/plugins/util/{parseBuffer.js => parseBuffer.mjs} (100%)
 rename gulp/plugins/util/{parseDefaultValue.js => parseDefaultValue.mjs} (100%)
 rename gulp/plugins/util/{parseDocSection.js => parseDocSection.mjs} (93%)
 rename gulp/plugins/util/{parseDocblock.js => parseDocblock.mjs} (100%)
 delete mode 100644 gulp/plugins/util/parseType.js
 create mode 100644 gulp/plugins/util/parseType.mjs
 delete mode 100644 gulp/plugins/util/parserCustomHandler.js
 create mode 100644 gulp/plugins/util/parserCustomHandler.mjs
 rename gulp/{sh.js => sh.mjs} (100%)
 rename gulp/tasks/{dist.js => dist.mjs} (84%)
 rename gulp/tasks/{docs.js => docs.mjs} (87%)
 rename gulpfile.js => gulpfile.mjs (56%)

diff --git a/.babel-preset.js b/.babel-preset.js
index 92d2c4321a..aac77692ab 100644
--- a/.babel-preset.js
+++ b/.babel-preset.js
@@ -16,10 +16,7 @@ const browsers = [
 ]
 
 const plugins = [
-  ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ['@babel/plugin-proposal-optional-chaining', { loose: true }],
   '@babel/plugin-proposal-export-default-from',
-  '@babel/plugin-proposal-export-namespace-from',
   '@babel/plugin-syntax-dynamic-import',
   [
     '@babel/plugin-transform-runtime',
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2c972a3ff1..295a31bdfc 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -5,9 +5,12 @@ general:
     ignore:
       - gh-pages
 
+orbs:
+  browser-tools: circleci/browser-tools@1.4.6
+
 docker_defaults: &docker_defaults
   docker:
-    - image: circleci/node:16-browsers
+    - image: cimg/node:16.16-browsers
   working_directory: ~/project/semantic-ui-react
 
 environment:
@@ -32,6 +35,7 @@ jobs:
           key: v6-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - ~/.cache/yarn
+      - browser-tools/install-chrome
       - persist_to_workspace:
           root: ~/
           paths:
diff --git a/gulp/plugins/gulp-component-menu.js b/gulp/plugins/gulp-component-menu.mjs
similarity index 94%
rename from gulp/plugins/gulp-component-menu.js
rename to gulp/plugins/gulp-component-menu.mjs
index 021de436e7..408e8c0121 100644
--- a/gulp/plugins/gulp-component-menu.js
+++ b/gulp/plugins/gulp-component-menu.mjs
@@ -2,7 +2,7 @@ import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import through from 'through2'
 
-import getComponentInfo from './util/getComponentInfo'
+import getComponentInfo from './util/getComponentInfo.mjs'
 
 const pluginName = 'gulp-component-menu'
 
diff --git a/gulp/plugins/gulp-example-menu.js b/gulp/plugins/gulp-example-menu.mjs
similarity index 97%
rename from gulp/plugins/gulp-example-menu.js
rename to gulp/plugins/gulp-example-menu.mjs
index 650a4d670c..57b57ca8a6 100644
--- a/gulp/plugins/gulp-example-menu.js
+++ b/gulp/plugins/gulp-example-menu.mjs
@@ -4,7 +4,7 @@ import _ from 'lodash'
 import path from 'path'
 import through from 'through2'
 
-import { parseDocSection } from './util'
+import parseDocSection from './util/parseDocSection.mjs'
 
 const SECTION_ORDER = {
   Types: 1,
diff --git a/gulp/plugins/gulp-example-source.js b/gulp/plugins/gulp-example-source.mjs
similarity index 100%
rename from gulp/plugins/gulp-example-source.js
rename to gulp/plugins/gulp-example-source.mjs
diff --git a/gulp/plugins/gulp-react-docgen.js b/gulp/plugins/gulp-react-docgen.mjs
similarity index 93%
rename from gulp/plugins/gulp-react-docgen.js
rename to gulp/plugins/gulp-react-docgen.mjs
index 4ae4151b16..e149a3c5d0 100644
--- a/gulp/plugins/gulp-react-docgen.js
+++ b/gulp/plugins/gulp-react-docgen.mjs
@@ -2,7 +2,7 @@ import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import through from 'through2'
 
-import { getComponentInfo } from './util'
+import getComponentInfo from './util/getComponentInfo.mjs'
 
 const pluginName = 'gulp-react-docgen'
 
diff --git a/gulp/plugins/util/getComponentInfo.js b/gulp/plugins/util/getComponentInfo.mjs
similarity index 87%
rename from gulp/plugins/util/getComponentInfo.js
rename to gulp/plugins/util/getComponentInfo.mjs
index 39df9d5357..e07d8795e9 100644
--- a/gulp/plugins/util/getComponentInfo.js
+++ b/gulp/plugins/util/getComponentInfo.mjs
@@ -1,13 +1,14 @@
 import _ from 'lodash'
 import path from 'path'
-import { defaultHandlers, parse, resolver } from 'react-docgen'
+import { builtinResolvers, defaultHandlers, parse } from 'react-docgen'
 import fs from 'fs'
 
-import config from '../../../config'
-import parseDefaultValue from './parseDefaultValue'
-import parseDocblock from './parseDocblock'
-import parserCustomHandler from './parserCustomHandler'
-import parseType from './parseType'
+import parseDefaultValue from './parseDefaultValue.mjs'
+import parseDocblock from './parseDocblock.mjs'
+import parserCustomHandler from './parserCustomHandler.mjs'
+import parseType from './parseType.mjs'
+
+const config = (await import('../../../config.js')).default
 
 const getComponentInfo = (filepath) => {
   const absPath = path.resolve(process.cwd(), filepath)
@@ -24,10 +25,11 @@ const getComponentInfo = (filepath) => {
   const componentType = path.basename(path.dirname(dir)).replace(/s$/, '')
 
   // start with react-docgen info
-  const components = parse(contents, resolver.findAllComponentDefinitions, [
-    ...defaultHandlers,
-    parserCustomHandler,
-  ])
+  const resolver = new builtinResolvers.FindAllDefinitionsResolver()
+  const components = parse(contents, {
+    resolver,
+    handlers: [...defaultHandlers, parserCustomHandler],
+  })
 
   if (!components.length) {
     throw new Error(`Could not find a component definition in "${filepath}".`)
diff --git a/gulp/plugins/util/index.js b/gulp/plugins/util/index.js
deleted file mode 100644
index a06084d8b6..0000000000
--- a/gulp/plugins/util/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export getComponentInfo from './getComponentInfo'
-export parseDefaultValue from './parseDefaultValue'
-export parseDocblock from './parseDocblock'
-export parseDocSection from './parseDocSection'
-export parserCustomHandler from './parserCustomHandler'
-export parseType from './parseType'
diff --git a/gulp/plugins/util/parseBuffer.js b/gulp/plugins/util/parseBuffer.mjs
similarity index 100%
rename from gulp/plugins/util/parseBuffer.js
rename to gulp/plugins/util/parseBuffer.mjs
diff --git a/gulp/plugins/util/parseDefaultValue.js b/gulp/plugins/util/parseDefaultValue.mjs
similarity index 100%
rename from gulp/plugins/util/parseDefaultValue.js
rename to gulp/plugins/util/parseDefaultValue.mjs
diff --git a/gulp/plugins/util/parseDocSection.js b/gulp/plugins/util/parseDocSection.mjs
similarity index 93%
rename from gulp/plugins/util/parseDocSection.js
rename to gulp/plugins/util/parseDocSection.mjs
index cb3ecef422..794c0ed132 100644
--- a/gulp/plugins/util/parseDocSection.js
+++ b/gulp/plugins/util/parseDocSection.mjs
@@ -1,7 +1,7 @@
 import _ from 'lodash'
-import traverse from '@babel/traverse'
+import { traverse } from '@babel/core'
 
-import parseBuffer from './parseBuffer'
+import parseBuffer from './parseBuffer.mjs'
 
 const getJSXAttributes = (jsxPath) =>
   _.map(_.get(jsxPath, 'node.attributes'), (attr) => ({
diff --git a/gulp/plugins/util/parseDocblock.js b/gulp/plugins/util/parseDocblock.mjs
similarity index 100%
rename from gulp/plugins/util/parseDocblock.js
rename to gulp/plugins/util/parseDocblock.mjs
diff --git a/gulp/plugins/util/parseType.js b/gulp/plugins/util/parseType.js
deleted file mode 100644
index a787a40a0c..0000000000
--- a/gulp/plugins/util/parseType.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const _ = require('lodash')
-const { names } = require('../../../src/elements/Flag/Flag') // eslint-disable-line no-unused-vars
-const { positions } = require('../../../src/modules/Popup/lib/positions') // eslint-disable-line no-unused-vars
-const SUI = require('../../../src/lib/SUI') // eslint-disable-line no-unused-vars
-
-const evalValue = (value) => eval(value) // eslint-disable-line no-eval
-
-const isTransformable = (value) =>
-  typeof value === 'string' &&
-  (value.includes('SUI') || value.includes('names') || value.includes('positions'))
-
-const uniqValues = (values) => _.uniqWith(values, (val, other) => `${val}` === `${other}`)
-
-const transformEnumValues = (values) =>
-  _.flatMap(values, ({ value }) => {
-    if (value === 'names') return evalValue(value)
-    if (_.startsWith(value, '...SUI')) return evalValue(value.substring(3))
-    return value.replace(/'/g, '')
-  })
-
-const parseEnum = (type) => {
-  const { value } = type
-
-  if (isTransformable(value)) return { ...type, value: uniqValues(evalValue(value)) }
-  return { ...type, value: uniqValues(transformEnumValues(value)) }
-}
-
-const parseUnion = (union) => {
-  const { value } = union
-  const values = _.flatten(
-    _.map(_.filter(value, { name: 'enum' }), (type) => parseEnum(type).value),
-  )
-
-  return {
-    ...union,
-    name: _.map(value, 'name').join('|'),
-    value: values,
-  }
-}
-
-const parsers = {
-  enum: parseEnum,
-  union: parseUnion,
-}
-
-export default (propName, { type }) => {
-  if (type === undefined) {
-    throw new Error(
-      [
-        `The prop "${propName}" does not contain propType definition. This happens if the property is in the `,
-        'defaultProps, but it is not in the propTypes',
-      ].join(' '),
-    )
-  }
-
-  const parser = parsers[type.name]
-
-  return parser ? parser(type) : type
-}
diff --git a/gulp/plugins/util/parseType.mjs b/gulp/plugins/util/parseType.mjs
new file mode 100644
index 0000000000..55995f8444
--- /dev/null
+++ b/gulp/plugins/util/parseType.mjs
@@ -0,0 +1,79 @@
+await import('@babel/register')
+
+import _ from 'lodash'
+
+const { names } = (await import('../../../src/elements/Flag/Flag.js')).default
+const { positions } = (await import('../../../src/modules/Popup/lib/positions.js')).default
+const SUI = (await import('../../../src/lib/SUI.js')).default
+
+const evalValue = (value) => eval(value) // eslint-disable-line no-eval
+
+const isTransformable = (value) =>
+  typeof value === 'string' &&
+  (value.includes('SUI') || value.includes('names') || value.includes('positions'))
+
+const uniqValues = (values) => {
+  return values.filter((val, i, arr) => arr.indexOf(`${val}`) === arr.lastIndexOf(`${val}`))
+}
+
+const transformEnumValues = (values) => {
+  return values.flatMap(({ value }) => {
+    if (value === 'names') {
+      return evalValue(value)
+    }
+
+    if (value.startsWith('...SUI')) {
+      return evalValue(value.substring(3))
+    }
+
+    return value.replace(/'/g, '')
+  })
+}
+
+const parseEnum = (propDef) => {
+  const { value } = propDef.type
+
+  if (value) {
+    if (isTransformable(value)) {
+      return { ...propDef.type, value: uniqValues(evalValue(value)) }
+    }
+
+    return { ...propDef.type, value: uniqValues(transformEnumValues(value)) }
+  }
+
+  return {
+    ...propDef.type,
+    value: undefined,
+  }
+}
+
+const parseUnion = (propDef) => {
+  const { value } = propDef.type
+  const values = value.filter((v) => v.name === 'enum').flatMap((type) => parseEnum({ type }).value)
+
+  return {
+    ...propDef.type,
+    name: value.map((v) => v.name).join('|'),
+    value: values,
+  }
+}
+
+const parsers = {
+  enum: parseEnum,
+  union: parseUnion,
+}
+
+export default function parseType(propName, propDef) {
+  if (propDef.type === undefined) {
+    throw new Error(
+      [
+        `The prop "${propName}" does not contain propType definition. This happens if the property is in the `,
+        'defaultProps, but it is not in the propTypes',
+      ].join(' '),
+    )
+  }
+
+  const parser = parsers[propDef.type.name]
+
+  return parser ? parser(propDef) : propDef.type
+}
diff --git a/gulp/plugins/util/parserCustomHandler.js b/gulp/plugins/util/parserCustomHandler.js
deleted file mode 100644
index 9e1218cfb0..0000000000
--- a/gulp/plugins/util/parserCustomHandler.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import _ from 'lodash'
-import { types } from 'recast'
-import { utils } from 'react-docgen'
-
-const { namedTypes } = types
-const { getMemberValuePath, getPropertyName, getPropType, resolveToValue } = utils
-
-const getObjectName = (path) => `${_.get(path, 'object.name')}.${_.get(path, 'property.name')}`
-
-const getArgumentValue = (path) => {
-  if (namedTypes.Identifier.check(path)) return path.name
-  if (namedTypes.MemberExpression.check(path)) return getObjectName(path)
-
-  throw new Error('Unsupported value')
-}
-
-const isMeanableMember = (path) => {
-  if (namedTypes.CallExpression.check(path.node)) {
-    const callee = path.get('callee')
-    const typeName = getObjectName(callee.value)
-
-    return typeName.startsWith('PropTypes')
-  }
-
-  return !!namedTypes.MemberExpression.check(path.node)
-}
-
-const amendPropTypes = (documentation, path) => {
-  if (!namedTypes.ObjectExpression.check(path.node)) return
-
-  path.get('properties').each((propertyPath) => {
-    const propertyName = getPropertyName(propertyPath)
-    const propDescriptor = documentation.getPropDescriptor(propertyName)
-    const valuePath = propertyPath.get('value')
-
-    if (!namedTypes.CallExpression.check(valuePath.node)) return
-
-    const argumentPath = valuePath.get('arguments').value[0]
-
-    const calleePath = valuePath.get('callee').node
-    const objectName = getObjectName(calleePath)
-
-    if (objectName === 'customPropTypes.onlyProp' || objectName === 'customPropTypes.suggest') {
-      propDescriptor.type = {
-        name: 'enum',
-        value: getArgumentValue(argumentPath),
-      }
-
-      return
-    }
-
-    if (objectName === 'customPropTypes.every') {
-      const elements = valuePath.get('arguments', 0, 'elements')
-      const parsedTypes = []
-
-      for (let i = 0; i < elements.value.length; i += 1) {
-        const element = elements.get(i)
-
-        if (isMeanableMember(element)) {
-          parsedTypes.push(getPropType(element))
-        }
-      }
-
-      propDescriptor.type = {
-        name: 'union',
-        value: parsedTypes,
-      }
-    }
-  })
-}
-
-const parserCustomHandler = (documentation, path) => {
-  let propTypesPath = getMemberValuePath(path, 'propTypes')
-  if (!propTypesPath) return
-
-  propTypesPath = resolveToValue(propTypesPath)
-  if (!propTypesPath) return
-
-  amendPropTypes(documentation, propTypesPath)
-}
-
-export default parserCustomHandler
diff --git a/gulp/plugins/util/parserCustomHandler.mjs b/gulp/plugins/util/parserCustomHandler.mjs
new file mode 100644
index 0000000000..5d4fc53717
--- /dev/null
+++ b/gulp/plugins/util/parserCustomHandler.mjs
@@ -0,0 +1,118 @@
+import _ from 'lodash'
+import { utils as docgenUtils } from 'react-docgen'
+
+/**
+ * @param {import('@babel/core').NodePath<import('@babel/core').types.MemberExpression>} path
+ * @returns {string}
+ */
+function getObjectName(path) {
+  return [path.node.object.name, path.node.property.name].join('.')
+}
+
+/**
+ * @param {import('@babel/core').NodePath} path
+ * @returns {string}
+ */
+const getArgumentValue = (path) => {
+  if (path.isIdentifier()) {
+    return path.node.name
+  }
+
+  if (path.isMemberExpression()) {
+    return getObjectName(path)
+  }
+
+  throw new Error('Unsupported value')
+}
+
+/**
+ * @param {import('@babel/core').NodePath} path
+ * @returns {boolean}
+ */
+const isMeanableMember = (path) => {
+  if (path.isCallExpression()) {
+    const callee = path.get('callee')
+    const typeName = getObjectName(callee)
+
+    return typeName.startsWith('PropTypes')
+  }
+
+  return path.isMemberExpression()
+}
+
+/**
+ * @param {import('react-docgen').Documentation} documentation
+ * @param {import('@babel/core').NodePath} path
+ */
+const amendPropTypes = (documentation, path) => {
+  if (!path.isObjectExpression()) {
+    return
+  }
+
+  path.get('properties').forEach((propertyPath) => {
+    const propertyName = docgenUtils.getPropertyName(propertyPath)
+    const propDescriptor = documentation.getPropDescriptor(propertyName)
+    const valuePath = propertyPath.get('value')
+
+    if (!valuePath.isCallExpression()) {
+      return
+    }
+
+    const argumentPath = valuePath.get('arguments.0')
+    const calleePath = valuePath.get('callee')
+
+    if (!calleePath.isMemberExpression()) {
+      return
+    }
+
+    const objectName = getObjectName(calleePath)
+
+    if (objectName === 'customPropTypes.onlyProp' || objectName === 'customPropTypes.suggest') {
+      propDescriptor.type = {
+        name: 'enum',
+        value: getArgumentValue(argumentPath),
+      }
+
+      return
+    }
+
+    if (objectName === 'customPropTypes.every') {
+      const elements = valuePath.get('arguments')
+      const parsedTypes = []
+
+      for (let i = 0; i < elements.length; i += 1) {
+        const element = elements[i]
+
+        if (isMeanableMember(element)) {
+          parsedTypes.push(docgenUtils.getPropType(element))
+        }
+      }
+
+      propDescriptor.type = {
+        name: 'union',
+        value: parsedTypes,
+      }
+    }
+  })
+}
+
+const parserCustomHandler = /** @type {import('react-docgen').Handler} */ (
+  documentation,
+  componentDefinitionPath,
+) => {
+  let propTypesPath = docgenUtils.getMemberValuePath(componentDefinitionPath, 'propTypes')
+
+  if (!propTypesPath) {
+    return
+  }
+
+  propTypesPath = docgenUtils.resolveToValue(propTypesPath)
+
+  if (!propTypesPath) {
+    return
+  }
+
+  amendPropTypes(documentation, propTypesPath)
+}
+
+export default parserCustomHandler
diff --git a/gulp/sh.js b/gulp/sh.mjs
similarity index 100%
rename from gulp/sh.js
rename to gulp/sh.mjs
diff --git a/gulp/tasks/dist.js b/gulp/tasks/dist.mjs
similarity index 84%
rename from gulp/tasks/dist.js
rename to gulp/tasks/dist.mjs
index 7d63140a05..b66f1d85b7 100644
--- a/gulp/tasks/dist.js
+++ b/gulp/tasks/dist.mjs
@@ -1,17 +1,17 @@
-import { dest, task, series, src, parallel } from 'gulp'
+import gulp from 'gulp'
 import rimraf from 'rimraf'
 
-import sh from '../sh'
-import config from '../../config'
+import sh from '../sh.mjs'
 
-const { paths } = config
+const { dest, task, series, src, parallel } = gulp
+const { paths } = (await import('../../config.js')).default
 
 // ----------------------------------------
 // Clean
 // ----------------------------------------
 
 task('clean:dist', (cb) => {
-  rimraf(`${config.paths.dist()}/*`, cb)
+  rimraf(`${paths.dist()}/*`, cb)
 })
 
 // ----------------------------------------
diff --git a/gulp/tasks/docs.js b/gulp/tasks/docs.mjs
similarity index 87%
rename from gulp/tasks/docs.js
rename to gulp/tasks/docs.mjs
index becde6c912..99ef4b722b 100644
--- a/gulp/tasks/docs.js
+++ b/gulp/tasks/docs.mjs
@@ -1,22 +1,20 @@
-import { task, src, dest, lastRun, parallel, series, watch } from 'gulp'
-import loadPlugins from 'gulp-load-plugins'
+import gulp from 'gulp'
 import path from 'path'
-import { build, reloadRoutes, start } from 'react-static/node'
 import rimraf from 'rimraf'
 
-import sh from '../sh'
-import config from '../../config'
-import gulpComponentMenu from '../plugins/gulp-component-menu'
-import gulpExampleMenu from '../plugins/gulp-example-menu'
-import gulpExampleSources from '../plugins/gulp-example-source'
-import gulpReactDocgen from '../plugins/gulp-react-docgen'
+import sh from '../sh.mjs'
+import gulpComponentMenu from '../plugins/gulp-component-menu.mjs'
+import gulpExampleMenu from '../plugins/gulp-example-menu.mjs'
+import gulpExampleSources from '../plugins/gulp-example-source.mjs'
+import gulpReactDocgen from '../plugins/gulp-react-docgen.mjs'
 
-const { paths } = config
-const g = loadPlugins()
-const { log } = g.util
+const { paths } = (await import('../../config.js')).default
+const { build, reloadRoutes, start } = await import('react-static/node/index.js')
+
+const { task, src, dest, lastRun, parallel, series, watch } = gulp
 
 const handleWatchChange = (filename) =>
-  log(`File ${path.basename(filename)} was changed, running tasks...`)
+  console.log(`File ${path.basename(filename)} was changed, running tasks...`)
 
 /**
  * Converts paths with globs to supported by chokidar, is more specific for Windows where
diff --git a/gulpfile.js b/gulpfile.mjs
similarity index 56%
rename from gulpfile.js
rename to gulpfile.mjs
index 8d0e9e5516..544a8e935d 100644
--- a/gulpfile.js
+++ b/gulpfile.mjs
@@ -1,16 +1,14 @@
-require('@babel/register')({
-  ignore: [/node_modules/, /docs[\\/]dist/],
-})
-
-const { task, parallel } = require('gulp')
-const path = require('path')
+import gulp from 'gulp'
+import path from 'path'
 
 // add node_modules/.bin to the path so we can invoke .bin CLIs in tasks
 process.env.PATH = `${process.env.PATH}:${path.resolve('./node_modules/.bin')}`
 
 // load tasks in order of dependency usage
-require('./gulp/tasks/dist')
-require('./gulp/tasks/docs')
+import './gulp/tasks/dist.mjs'
+import './gulp/tasks/docs.mjs'
+
+const { task, parallel } = gulp
 
 // global tasks
 task('build', parallel('build:dist', 'build:docs'))
diff --git a/package.json b/package.json
index 1f5f6aabce..04a93087c1 100644
--- a/package.json
+++ b/package.json
@@ -65,9 +65,9 @@
   },
   "homepage": "https://github.com/Semantic-Org/Semantic-UI-React#readme",
   "dependencies": {
-    "@babel/runtime": "^7.10.5",
+    "@babel/runtime": "^7.23.7",
     "@fluentui/react-component-event-listener": "~0.63.0",
-    "@popperjs/core": "^2.6.0",
+    "@popperjs/core": "^2.11.8",
     "@semantic-ui-react/event-stack": "^3.1.3",
     "clsx": "^1.1.1",
     "keyboard-key": "^1.1.0",
@@ -80,17 +80,14 @@
   },
   "devDependencies": {
     "@artsy/fresnel": "^1.2.0",
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.10.5",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-export-default-from": "^7.10.4",
-    "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/register": "^7.10.5",
-    "@babel/standalone": "^7.10.5",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.7",
+    "@babel/plugin-proposal-export-default-from": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/register": "^7.23.7",
+    "@babel/standalone": "^7.23.7",
     "@mdx-js/loader": "^0.20.3",
     "@percy/cli": "^1.0.0-beta.73",
     "@percy/cypress": "^3.1.1",
@@ -103,7 +100,7 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-filter-imports": "^4.0.0",
-    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-react-handled-props": "^2.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -152,7 +149,7 @@
     "react": "^17.0.0",
     "react-ace": "^6.4.0",
     "react-codesandboxer": "^3.1.3",
-    "react-docgen": "^4.1.0",
+    "react-docgen": "^7.0.1",
     "react-dom": "^17.0.0",
     "react-hot-loader": "^4.13.0",
     "react-intersection-observer": "^8.26.2",
@@ -175,7 +172,7 @@
     "terser-webpack-plugin": "^3.0.8",
     "terser-webpack-plugin-legacy": "^1.2.3",
     "through2": "^3.0.1",
-    "typescript": "^3.9.5",
+    "typescript": "^4.5.5",
     "vinyl": "^2.2.0",
     "webpack": "^4.28.4",
     "webpack-bundle-analyzer": "^3.8.0",
diff --git a/yarn.lock b/yarn.lock
index 5c4faf3c50..948677089c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,26 +2,34 @@
 # yarn lockfile v1
 
 
+"@ampproject/remapping@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
+  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@artsy/fresnel@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@artsy/fresnel/-/fresnel-1.2.0.tgz#809e5968ed4c58d3fd0b64c58c022bb5a27c5717"
   integrity sha512-3wrvp1jwk54bvgdFbmoLl10jXSlsYO9HrNJkZvKkhEV1h5AUhTMp6Qp0LrYoQWRHuugCYXQdc3Rj0TOisL+CnQ==
 
-"@babel/cli@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.10.5.tgz#57df2987c8cf89d0fc7d4b157ec59d7619f1b77a"
-  integrity sha512-j9H9qSf3kLdM0Ao3aGPbGZ73mEA9XazuupcS6cDGWuiyAcANoguhP0r2Lx32H5JGw4sSSoHG3x/mxVnHgvOoyA==
+"@babel/cli@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.23.4.tgz#f5cc90487278065fa0c3b1267cf0c1d44ddf85a7"
+  integrity sha512-j3luA9xGKCXVyCa5R7lJvOMM+Kc2JEnAEIgz2ggtjQ/j5YUVgfsg/WsG95bbsgq7YLHuiCOzMnoSasuY16qiCw==
   dependencies:
+    "@jridgewell/trace-mapping" "^0.3.17"
     commander "^4.0.1"
-    convert-source-map "^1.1.0"
+    convert-source-map "^2.0.0"
     fs-readdir-recursive "^1.1.0"
-    glob "^7.0.0"
-    lodash "^4.17.19"
+    glob "^7.2.0"
     make-dir "^2.1.0"
     slash "^2.0.0"
-    source-map "^0.5.0"
   optionalDependencies:
-    chokidar "^2.1.8"
+    "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
+    chokidar "^3.4.0"
 
 "@babel/code-frame@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -30,43 +38,39 @@
   dependencies:
     "@babel/highlight" "7.0.0-beta.51"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
-  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
+  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
   dependencies:
-    "@babel/highlight" "^7.10.4"
-
-"@babel/compat-data@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.10.5.tgz#d38425e67ea96b1480a3f50404d1bf85676301a6"
-  integrity sha512-mPVoWNzIpYJHbWje0if7Ck36bpbtTvIxOi9+6WSK9wjGEXearAqlwBoTQvVjsAY2VIwgcs8V940geY3okzRCEw==
-  dependencies:
-    browserslist "^4.12.0"
-    invariant "^2.2.4"
-    semver "^5.5.0"
+    "@babel/highlight" "^7.23.4"
+    chalk "^2.4.2"
 
-"@babel/core@^7.0.0", "@babel/core@^7.10.5", "@babel/core@^7.7.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.5.tgz#1f15e2cca8ad9a1d78a38ddba612f5e7cdbbd330"
-  integrity sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.10.5"
-    "@babel/helper-module-transforms" "^7.10.5"
-    "@babel/helpers" "^7.10.4"
-    "@babel/parser" "^7.10.5"
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.10.5"
-    "@babel/types" "^7.10.5"
-    convert-source-map "^1.7.0"
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.3", "@babel/compat-data@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
+  integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
+
+"@babel/core@^7.12.3", "@babel/core@^7.18.9", "@babel/core@^7.23.7", "@babel/core@^7.7.5":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.7.tgz#4d8016e06a14b5f92530a13ed0561730b5c6483f"
+  integrity sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.23.5"
+    "@babel/generator" "^7.23.6"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helpers" "^7.23.7"
+    "@babel/parser" "^7.23.6"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.7"
+    "@babel/types" "^7.23.6"
+    convert-source-map "^2.0.0"
     debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
-    lodash "^4.17.19"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
 
 "@babel/generator@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -79,95 +83,80 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/generator@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.5.tgz#1b903554bc8c583ee8d25f1e8969732e6b829a69"
-  integrity sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==
+"@babel/generator@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
+  integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
   dependencies:
-    "@babel/types" "^7.10.5"
+    "@babel/types" "^7.23.6"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
-    source-map "^0.5.0"
-
-"@babel/helper-annotate-as-pure@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
-  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
-  dependencies:
-    "@babel/types" "^7.10.4"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
-  integrity sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==
+"@babel/helper-annotate-as-pure@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
+  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.22.5"
 
-"@babel/helper-builder-react-jsx-experimental@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.5.tgz#f35e956a19955ff08c1258e44a515a6d6248646b"
-  integrity sha512-Buewnx6M4ttG+NLkKyt7baQn7ScC/Td+e99G914fRU8fGIUivDDgVIQeDHFa5e4CRSJQt58WpNHhsAZgtzVhsg==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956"
+  integrity sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/types" "^7.10.5"
+    "@babel/types" "^7.22.15"
 
-"@babel/helper-builder-react-jsx@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
-  integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
+"@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
+  integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/types" "^7.10.4"
-
-"@babel/helper-compilation-targets@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz#804ae8e3f04376607cc791b9d47d540276332bd2"
-  integrity sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==
-  dependencies:
-    "@babel/compat-data" "^7.10.4"
-    browserslist "^4.12.0"
-    invariant "^2.2.4"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
-"@babel/helper-create-class-features-plugin@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
-  integrity sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-member-expression-to-functions" "^7.10.5"
-    "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
-    "@babel/helper-split-export-declaration" "^7.10.4"
-
-"@babel/helper-create-regexp-features-plugin@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz#fdd60d88524659a0b6959c0579925e425714f3b8"
-  integrity sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-regex" "^7.10.4"
-    regexpu-core "^4.7.0"
-
-"@babel/helper-define-map@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz#b53c10db78a640800152692b13393147acb9bb30"
-  integrity sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-validator-option" "^7.23.5"
+    browserslist "^4.22.2"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.22.15":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.7.tgz#b2e6826e0e20d337143655198b79d58fdc9bd43d"
+  integrity sha512-xCoqR/8+BoNnXOY7RVSgv6X+o7pmT5q1d+gGcRlXYkI+9B31glE4jeejhKVpA04O1AtzOt7OSQ6VYKP5FcRl9g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-member-expression-to-functions" "^7.23.0"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.20"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    semver "^6.3.1"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.15", "@babel/helper-create-regexp-features-plugin@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
+  integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    regexpu-core "^5.3.1"
+    semver "^6.3.1"
+
+"@babel/helper-define-polyfill-provider@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz#64df615451cb30e94b59a9696022cffac9a10088"
+  integrity sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==
   dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/types" "^7.10.5"
-    lodash "^4.17.19"
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
 
-"@babel/helper-explode-assignable-expression@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.4.tgz#40a1cd917bff1288f699a94a75b37a1a2dbd8c7c"
-  integrity sha512-4K71RyRQNPRrR85sr5QY4X3VwG4wtVoXZB9+L3r1Gp38DhELyHCtovqydRi7c1Ovb17eRGiQ/FD5s8JdU0Uy5A==
-  dependencies:
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 
 "@babel/helper-function-name@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -178,14 +167,13 @@
     "@babel/template" "7.0.0-beta.51"
     "@babel/types" "7.0.0-beta.51"
 
-"@babel/helper-function-name@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
-  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
 
 "@babel/helper-get-function-arity@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -194,94 +182,81 @@
   dependencies:
     "@babel/types" "7.0.0-beta.51"
 
-"@babel/helper-get-function-arity@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
-  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
   dependencies:
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.22.5"
 
-"@babel/helper-hoist-variables@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
-  integrity sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==
+"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
+  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
   dependencies:
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.23.0"
 
-"@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.5.tgz#172f56e7a63e78112f3a04055f24365af702e7ee"
-  integrity sha512-HiqJpYD5+WopCXIAbQDG0zye5XYVvcO9w/DHp5GsaGkRUaamLj2bEtu6i8rnGGprAhHM3qidCMgp71HF4endhA==
+"@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
   dependencies:
-    "@babel/types" "^7.10.5"
+    "@babel/types" "^7.22.15"
 
-"@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
-  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+"@babel/helper-module-transforms@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
+  integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
   dependencies:
-    "@babel/types" "^7.10.4"
-
-"@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.5.tgz#120c271c0b3353673fcdfd8c053db3c544a260d6"
-  integrity sha512-4P+CWMJ6/j1W915ITJaUkadLObmCRRSC234uctJfn/vHrsLNxsR8dwlcXv9ZhJWzl77awf+mWXSZEKt5t0OnlA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
-    "@babel/helper-simple-access" "^7.10.4"
-    "@babel/helper-split-export-declaration" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/types" "^7.10.5"
-    lodash "^4.17.19"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
-"@babel/helper-optimise-call-expression@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
-  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+"@babel/helper-optimise-call-expression@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
+  integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
   dependencies:
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.22.5"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
-  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
 
-"@babel/helper-regex@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
-  integrity sha512-68kdUAzDrljqBrio7DYAEgCoJHxppJOERHOgOrDN7WjOzP0ZQ1LsSDRXcemzVZaLvjaJsJEESb6qt+znNuENDg==
+"@babel/helper-remap-async-to-generator@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
+  integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==
   dependencies:
-    lodash "^4.17.19"
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-wrap-function" "^7.22.20"
 
-"@babel/helper-remap-async-to-generator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.4.tgz#fce8bea4e9690bbe923056ded21e54b4e8b68ed5"
-  integrity sha512-86Lsr6NNw3qTNl+TBcF1oRZMaVzJtbWTyTko+CQL/tvNvcGYEFKbLXDPxtW0HKk3McNOk4KzY55itGWCAGK5tg==
+"@babel/helper-replace-supers@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
+  integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-wrap-function" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
 
-"@babel/helper-replace-supers@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
-  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
   dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.10.4"
-    "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.22.5"
 
-"@babel/helper-simple-access@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461"
-  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
+"@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
+  integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
   dependencies:
-    "@babel/template" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.22.5"
 
 "@babel/helper-split-export-declaration@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -290,36 +265,45 @@
   dependencies:
     "@babel/types" "7.0.0-beta.51"
 
-"@babel/helper-split-export-declaration@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz#2c70576eaa3b5609b24cb99db2888cc3fc4251d1"
-  integrity sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
   dependencies:
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.22.5"
 
-"@babel/helper-validator-identifier@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
-  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+"@babel/helper-string-parser@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
+  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
 
-"@babel/helper-wrap-function@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
-  integrity sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
+"@babel/helper-validator-option@^7.22.15", "@babel/helper-validator-option@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
+  integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
+
+"@babel/helper-wrap-function@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
+  integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==
   dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.4.tgz#2abeb0d721aff7c0a97376b9e1f6f65d7a475044"
-  integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==
+"@babel/helpers@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.7.tgz#eb543c36f81da2873e47b76ee032343ac83bba60"
+  integrity sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==
   dependencies:
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.7"
+    "@babel/types" "^7.23.6"
 
 "@babel/highlight@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -330,13 +314,13 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-"@babel/highlight@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
-  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+"@babel/highlight@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
+  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
-    chalk "^2.0.0"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
     js-tokens "^4.0.0"
 
 "@babel/parser@7.0.0-beta.51":
@@ -344,77 +328,44 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-beta.51.tgz#27cec2df409df60af58270ed8f6aa55409ea86f6"
   integrity sha1-J87C30Cd9gr1gnDtj2qlVAnqhvY=
 
-"@babel/parser@^7.10.4", "@babel/parser@^7.10.5", "@babel/parser@^7.7.0":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b"
-  integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==
-
-"@babel/plugin-proposal-async-generator-functions@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558"
-  integrity sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.10.4"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-
-"@babel/plugin-proposal-class-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
-  integrity sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-proposal-dynamic-import@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz#ba57a26cb98b37741e9d5bca1b8b0ddf8291f17e"
-  integrity sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-
-"@babel/plugin-proposal-export-default-from@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.10.4.tgz#08f66eef0067cbf6a7bc036977dcdccecaf0c6c5"
-  integrity sha512-G1l00VvDZ7Yk2yRlC5D8Ybvu3gmeHS3rCHoUYdjrqGYUtdeOBoRypnvDZ5KQqxyaiiGHWnVDeSEzA5F9ozItig==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-export-default-from" "^7.10.4"
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.6", "@babel/parser@^7.7.0":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
+  integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
 
-"@babel/plugin-proposal-export-namespace-from@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz#570d883b91031637b3e2958eea3c438e62c05f54"
-  integrity sha512-aNdf0LY6/3WXkhh0Fdb6Zk9j1NMD8ovj3F6r0+3j837Pn1S1PdNtcwJ5EG9WkVPNHPxyJDaxMaAOVq4eki0qbg==
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz#5cd1c87ba9380d0afb78469292c954fee5d2411a"
+  integrity sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-proposal-json-strings@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
-  integrity sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.23.3.tgz#f6652bb16b94f8f9c20c50941e16e9756898dc5d"
+  integrity sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-transform-optional-chaining" "^7.23.3"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
-  integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz#516462a95d10a9618f197d39ad291a9b47ae1d7b"
+  integrity sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-proposal-numeric-separator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06"
-  integrity sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==
+"@babel/plugin-proposal-export-default-from@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.23.3.tgz#6f511a676c540ccc8d17a8553dbba9230b0ddac0"
+  integrity sha512-Q23MpLZfSGZL1kU7fWqV262q65svLSCIP5kZ/JCW/rKTCm/FrLjpvEd2kfUYMVeHh4QhV/xzyoRAHWrAZJrE3Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-export-default-from" "^7.23.3"
 
-"@babel/plugin-proposal-object-rest-spread@^7.10.4", "@babel/plugin-proposal-object-rest-spread@^7.3.2":
+"@babel/plugin-proposal-object-rest-spread@^7.3.2":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.4.tgz#50129ac216b9a6a55b3853fdd923e74bf553a4c0"
   integrity sha512-6vh4SqRuLLarjgeOf4EaROJAHjvu9Gl+/346PbDH9yWbJyfnJ/ah3jmYKYtswEyCoWZiidvVHjHshd4WgjB9BA==
@@ -423,65 +374,45 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
     "@babel/plugin-transform-parameters" "^7.10.4"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz#31c938309d24a78a49d68fdabffaa863758554dd"
-  integrity sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-
-"@babel/plugin-proposal-optional-chaining@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.4.tgz#750f1255e930a1f82d8cdde45031f81a0d0adff7"
-  integrity sha512-ZIhQIEeavTgouyMSdZRap4VPPHqJJ3NEs2cuHs5p0erH+iz6khB0qfgU8g7UuJkG88+fBMy23ZiU+nuHvekJeQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-
-"@babel/plugin-proposal-private-methods@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz#b160d972b8fdba5c7d111a145fc8c421fc2a6909"
-  integrity sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-proposal-unicode-property-regex@^7.10.4", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
-  integrity sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
 
-"@babel/plugin-syntax-async-generators@^7.8.0":
+"@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
   integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-class-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz#6644e6a0baa55a61f9e3231f6c9eeb6ee46c124c"
-  integrity sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==
+"@babel/plugin-syntax-class-properties@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+"@babel/plugin-syntax-class-static-block@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
+  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
   integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-export-default-from@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.10.4.tgz#e5494f95006355c10292a0ff1ce42a5746002ec8"
-  integrity sha512-79V6r6Pgudz0RnuMGp5xidu6Z+bPFugh8/Q9eDHonmLp4wKFAZDwygJwYgCzuDu8lFA/sYyT+mc5y2wkd7bTXA==
+"@babel/plugin-syntax-export-default-from@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.23.3.tgz#7e6d4bf595d5724230200fb2b7401d4734b15335"
+  integrity sha512-KeENO5ck1IeZ/l2lFZNy+mpobV3D2Zy5C1YFnWm+YuY5mQiAWc4yAp13dqgguwsBsFVLh4LPCEqCa5qW13N+hw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-syntax-export-namespace-from@^7.8.3":
   version "7.8.3"
@@ -490,21 +421,49 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-json-strings@^7.8.0":
+"@babel/plugin-syntax-import-assertions@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.23.3.tgz#9c05a7f592982aff1a2768260ad84bcd3f0c77fc"
+  integrity sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-import-attributes@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.23.3.tgz#992aee922cf04512461d7dae3ff6951b90a2dc06"
+  integrity sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-import-meta@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
   integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.10.4", "@babel/plugin-syntax-jsx@^7.2.0":
+"@babel/plugin-syntax-jsx@^7.2.0", "@babel/plugin-syntax-jsx@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz#8f2e4f8a9b5f9aa16067e142c1ac9cd9f810f473"
+  integrity sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
-  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
   integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
@@ -518,449 +477,606 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-object-rest-spread@^7.8.0":
+"@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
   integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.8.0":
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
   integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-chaining@^7.8.0":
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
   integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-top-level-await@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz#4bbeb8917b54fcf768364e0a81f560e33a3ef57d"
-  integrity sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-arrow-functions@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz#e22960d77e697c74f41c501d44d73dbf8a6a64cd"
-  integrity sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-async-to-generator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz#41a5017e49eb6f3cda9392a51eef29405b245a37"
-  integrity sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.10.4"
-
-"@babel/plugin-transform-block-scoped-functions@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz#1afa595744f75e43a91af73b0d998ecfe4ebc2e8"
-  integrity sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-block-scoping@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.5.tgz#b81b8aafefbfe68f0f65f7ef397b9ece68a6037d"
-  integrity sha512-6Ycw3hjpQti0qssQcA6AMSFDHeNJ++R6dIMnpRqUjFeBBTmTDPa8zgF90OVfTvAo11mXZTlVUViY1g8ffrURLg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-classes@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz#405136af2b3e218bc4a1926228bc917ab1a0adc7"
-  integrity sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-define-map" "^7.10.4"
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
-    "@babel/helper-split-export-declaration" "^7.10.4"
+"@babel/plugin-syntax-private-property-in-object@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
+  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-top-level-await@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-arrow-functions@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.23.3.tgz#94c6dcfd731af90f27a79509f9ab7fb2120fc38b"
+  integrity sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-async-generator-functions@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz#3aa0b4f2fa3788b5226ef9346cf6d16ec61f99cd"
+  integrity sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-remap-async-to-generator" "^7.22.20"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-transform-async-to-generator@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz#d1f513c7a8a506d43f47df2bf25f9254b0b051fa"
+  integrity sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-remap-async-to-generator" "^7.22.20"
+
+"@babel/plugin-transform-block-scoped-functions@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.23.3.tgz#fe1177d715fb569663095e04f3598525d98e8c77"
+  integrity sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-block-scoping@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz#b2d38589531c6c80fbe25e6b58e763622d2d3cf5"
+  integrity sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-class-properties@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.23.3.tgz#35c377db11ca92a785a718b6aa4e3ed1eb65dc48"
+  integrity sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-class-static-block@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz#2a202c8787a8964dd11dfcedf994d36bfc844ab5"
+  integrity sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-transform-classes@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.5.tgz#e7a75f815e0c534cc4c9a39c56636c84fc0d64f2"
+  integrity sha512-jvOTR4nicqYC9yzOHIhXG5emiFEOpappSJAl73SDSEDcybD+Puuze8Tnpb9p9qEyYup24tq891gkaygIFvWDqg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.20"
+    "@babel/helper-split-export-declaration" "^7.22.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz#9ded83a816e82ded28d52d4b4ecbdd810cdfc0eb"
-  integrity sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==
+"@babel/plugin-transform-computed-properties@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.23.3.tgz#652e69561fcc9d2b50ba4f7ac7f60dcf65e86474"
+  integrity sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/template" "^7.22.15"
 
-"@babel/plugin-transform-destructuring@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz#70ddd2b3d1bea83d01509e9bb25ddb3a74fc85e5"
-  integrity sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==
+"@babel/plugin-transform-destructuring@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.3.tgz#8c9ee68228b12ae3dff986e56ed1ba4f3c446311"
+  integrity sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-dotall-regex@^7.10.4", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz#469c2062105c1eb6a040eaf4fac4b488078395ee"
-  integrity sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==
+"@babel/plugin-transform-dotall-regex@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.23.3.tgz#3f7af6054882ede89c378d0cf889b854a993da50"
+  integrity sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-duplicate-keys@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz#697e50c9fee14380fe843d1f306b295617431e47"
-  integrity sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==
+"@babel/plugin-transform-duplicate-keys@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.23.3.tgz#664706ca0a5dfe8d066537f99032fc1dc8b720ce"
+  integrity sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-exponentiation-operator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz#5ae338c57f8cf4001bdb35607ae66b92d665af2e"
-  integrity sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==
+"@babel/plugin-transform-dynamic-import@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz#c7629e7254011ac3630d47d7f34ddd40ca535143"
+  integrity sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-transform-for-of@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz#c08892e8819d3a5db29031b115af511dbbfebae9"
-  integrity sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==
+"@babel/plugin-transform-exponentiation-operator@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.23.3.tgz#ea0d978f6b9232ba4722f3dbecdd18f450babd18"
+  integrity sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-function-name@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz#6a467880e0fc9638514ba369111811ddbe2644b7"
-  integrity sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==
+"@babel/plugin-transform-export-namespace-from@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz#084c7b25e9a5c8271e987a08cf85807b80283191"
+  integrity sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==
   dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz#9f42ba0841100a135f22712d0e391c462f571f3c"
-  integrity sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-member-expression-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz#b1ec44fcf195afcb8db2c62cd8e551c881baf8b7"
-  integrity sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-modules-amd@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz#1b9cddaf05d9e88b3aad339cb3e445c4f020a9b1"
-  integrity sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.5"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-commonjs@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz#66667c3eeda1ebf7896d41f1f16b17105a2fbca0"
-  integrity sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-simple-access" "^7.10.4"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-systemjs@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz#6270099c854066681bae9e05f87e1b9cadbe8c85"
-  integrity sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.10.4"
-    "@babel/helper-module-transforms" "^7.10.5"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-umd@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz#9a8481fe81b824654b3a0b65da3df89f3d21839e"
-  integrity sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-named-capturing-groups-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz#78b4d978810b6f3bcf03f9e318f2fc0ed41aecb6"
-  integrity sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-transform-new-target@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz#9097d753cb7b024cb7381a3b2e52e9513a9c6888"
-  integrity sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==
+"@babel/plugin-transform-for-of@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.6.tgz#81c37e24171b37b370ba6aaffa7ac86bcb46f94e"
+  integrity sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
 
-"@babel/plugin-transform-object-super@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz#d7146c4d139433e7a6526f888c667e314a093894"
-  integrity sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==
+"@babel/plugin-transform-function-name@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.23.3.tgz#8f424fcd862bf84cb9a1a6b42bc2f47ed630f8dc"
+  integrity sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-parameters@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz#59d339d58d0b1950435f4043e74e2510005e2c4a"
-  integrity sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==
+"@babel/plugin-transform-json-strings@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz#a871d9b6bd171976efad2e43e694c961ffa3714d"
+  integrity sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-transform-property-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz#f6fe54b6590352298785b83edd815d214c42e3c0"
-  integrity sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==
+"@babel/plugin-transform-literals@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.23.3.tgz#8214665f00506ead73de157eba233e7381f3beb4"
+  integrity sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-react-display-name@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
-  integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
+"@babel/plugin-transform-logical-assignment-operators@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz#e599f82c51d55fac725f62ce55d3a0886279ecb5"
+  integrity sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx-development@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.10.4.tgz#6ec90f244394604623880e15ebc3c34c356258ba"
-  integrity sha512-RM3ZAd1sU1iQ7rI2dhrZRZGv0aqzNQMbkIUCS1txYpi9wHQ2ZHNjo5TwX+UD6pvFW4AbWqLVYvKy5qJSAyRGjQ==
+"@babel/plugin-transform-member-expression-literals@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.23.3.tgz#e37b3f0502289f477ac0e776b05a833d853cabcc"
+  integrity sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==
   dependencies:
-    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-react-jsx-self@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
-  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
+"@babel/plugin-transform-modules-amd@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.3.tgz#e19b55436a1416829df0a1afc495deedfae17f7d"
+  integrity sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-react-jsx-source@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
-  integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
+"@babel/plugin-transform-modules-commonjs@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz#661ae831b9577e52be57dd8356b734f9700b53b4"
+  integrity sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-simple-access" "^7.22.5"
 
-"@babel/plugin-transform-react-jsx@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
-  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
+"@babel/plugin-transform-modules-systemjs@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.3.tgz#fa7e62248931cb15b9404f8052581c302dd9de81"
+  integrity sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==
   dependencies:
-    "@babel/helper-builder-react-jsx" "^7.10.4"
-    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
-"@babel/plugin-transform-react-pure-annotations@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
-  integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
+"@babel/plugin-transform-modules-umd@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.23.3.tgz#5d4395fccd071dfefe6585a4411aa7d6b7d769e9"
+  integrity sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-regenerator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz#2015e59d839074e76838de2159db421966fd8b63"
-  integrity sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==
-  dependencies:
-    regenerator-transform "^0.14.2"
-
-"@babel/plugin-transform-reserved-words@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz#8f2682bcdcef9ed327e1b0861585d7013f8a54dd"
-  integrity sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f"
+  integrity sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-runtime@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.10.5.tgz#3b39b7b24830e0c2d8ff7a4489fe5cf99fbace86"
-  integrity sha512-tV4V/FjElJ9lQtyjr5xD2IFFbgY46r7EeVu5a8CpEKT5laheHKSlFeHjpkPppW3PqzGLAuv5k2qZX5LgVZIX5w==
+"@babel/plugin-transform-new-target@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.23.3.tgz#5491bb78ed6ac87e990957cea367eab781c4d980"
+  integrity sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    resolve "^1.8.1"
-    semver "^5.5.1"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-shorthand-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz#9fd25ec5cdd555bb7f473e5e6ee1c971eede4dd6"
-  integrity sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz#45556aad123fc6e52189ea749e33ce090637346e"
+  integrity sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-transform-spread@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.4.tgz#4e2c85ea0d6abaee1b24dcfbbae426fe8d674cff"
-  integrity sha512-1e/51G/Ni+7uH5gktbWv+eCED9pP8ZpRhZB3jOaI3mmzfvJTWHkuyYTv0Z5PYtyM+Tr2Ccr9kUdQxn60fI5WuQ==
+"@babel/plugin-transform-numeric-separator@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz#03d08e3691e405804ecdd19dd278a40cca531f29"
+  integrity sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-sticky-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz#8f3889ee8657581130a29d9cc91d7c73b7c4a28d"
-  integrity sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==
+"@babel/plugin-transform-object-rest-spread@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz#2b9c2d26bf62710460bdc0d1730d4f1048361b83"
+  integrity sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==
+  dependencies:
+    "@babel/compat-data" "^7.23.3"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.23.3"
+
+"@babel/plugin-transform-object-super@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.23.3.tgz#81fdb636dcb306dd2e4e8fd80db5b2362ed2ebcd"
+  integrity sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-regex" "^7.10.4"
-
-"@babel/plugin-transform-template-literals@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz#78bc5d626a6642db3312d9d0f001f5e7639fde8c"
-  integrity sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.20"
+
+"@babel/plugin-transform-optional-catch-binding@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz#318066de6dacce7d92fa244ae475aa8d91778017"
+  integrity sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-transform-optional-chaining@^7.23.3", "@babel/plugin-transform-optional-chaining@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz#6acf61203bdfc4de9d4e52e64490aeb3e52bd017"
+  integrity sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-transform-parameters@^7.10.4", "@babel/plugin-transform-parameters@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.23.3.tgz#83ef5d1baf4b1072fa6e54b2b0999a7b2527e2af"
+  integrity sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-private-methods@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.23.3.tgz#b2d7a3c97e278bfe59137a978d53b2c2e038c0e4"
+  integrity sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-private-property-in-object@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz#3ec711d05d6608fd173d9b8de39872d8dbf68bf5"
+  integrity sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-transform-property-literals@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.23.3.tgz#54518f14ac4755d22b92162e4a852d308a560875"
+  integrity sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-typeof-symbol@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz#9509f1a7eec31c4edbffe137c16cc33ff0bc5bfc"
-  integrity sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-react-display-name@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.23.3.tgz#70529f034dd1e561045ad3c8152a267f0d7b6200"
+  integrity sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-unicode-escapes@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz#feae523391c7651ddac115dae0a9d06857892007"
-  integrity sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-react-jsx-development@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz#e716b6edbef972a92165cd69d92f1255f7e73e87"
+  integrity sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-jsx" "^7.22.5"
 
-"@babel/plugin-transform-unicode-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz#e56d71f9282fac6db09c82742055576d5e6d80a8"
-  integrity sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==
+"@babel/plugin-transform-react-jsx@^7.22.15", "@babel/plugin-transform-react-jsx@^7.22.5":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz#393f99185110cea87184ea47bcb4a7b0c2e39312"
+  integrity sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.23.3"
+    "@babel/types" "^7.23.4"
 
-"@babel/preset-env@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.10.4.tgz#fbf57f9a803afd97f4f32e4f798bb62e4b2bef5f"
-  integrity sha512-tcmuQ6vupfMZPrLrc38d0sF2OjLT3/bZ0dry5HchNCQbrokoQi4reXqclvkkAT5b+gWc23meVWpve5P/7+w/zw==
+"@babel/plugin-transform-react-pure-annotations@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.23.3.tgz#fabedbdb8ee40edf5da96f3ecfc6958e3783b93c"
+  integrity sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==
   dependencies:
-    "@babel/compat-data" "^7.10.4"
-    "@babel/helper-compilation-targets" "^7.10.4"
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-proposal-async-generator-functions" "^7.10.4"
-    "@babel/plugin-proposal-class-properties" "^7.10.4"
-    "@babel/plugin-proposal-dynamic-import" "^7.10.4"
-    "@babel/plugin-proposal-json-strings" "^7.10.4"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.4"
-    "@babel/plugin-proposal-numeric-separator" "^7.10.4"
-    "@babel/plugin-proposal-object-rest-spread" "^7.10.4"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.10.4"
-    "@babel/plugin-proposal-optional-chaining" "^7.10.4"
-    "@babel/plugin-proposal-private-methods" "^7.10.4"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.10.4"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-    "@babel/plugin-syntax-class-properties" "^7.10.4"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-regenerator@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.23.3.tgz#141afd4a2057298602069fce7f2dc5173e6c561c"
+  integrity sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    regenerator-transform "^0.15.2"
+
+"@babel/plugin-transform-reserved-words@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.23.3.tgz#4130dcee12bd3dd5705c587947eb715da12efac8"
+  integrity sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-runtime@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.7.tgz#52bbd20054855beb9deae3bee9ceb05289c343e6"
+  integrity sha512-fa0hnfmiXc9fq/weK34MUV0drz2pOL/vfKWvN7Qw127hiUPabFCUMgAbYWcchRzMJit4o5ARsK/s+5h0249pLw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    babel-plugin-polyfill-corejs2 "^0.4.7"
+    babel-plugin-polyfill-corejs3 "^0.8.7"
+    babel-plugin-polyfill-regenerator "^0.5.4"
+    semver "^6.3.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.23.3.tgz#97d82a39b0e0c24f8a981568a8ed851745f59210"
+  integrity sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-spread@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.23.3.tgz#41d17aacb12bde55168403c6f2d6bdca563d362c"
+  integrity sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+
+"@babel/plugin-transform-sticky-regex@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.23.3.tgz#dec45588ab4a723cb579c609b294a3d1bd22ff04"
+  integrity sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-template-literals@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.23.3.tgz#5f0f028eb14e50b5d0f76be57f90045757539d07"
+  integrity sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-typeof-symbol@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.23.3.tgz#9dfab97acc87495c0c449014eb9c547d8966bca4"
+  integrity sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-escapes@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.23.3.tgz#1f66d16cab01fab98d784867d24f70c1ca65b925"
+  integrity sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-property-regex@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.23.3.tgz#19e234129e5ffa7205010feec0d94c251083d7ad"
+  integrity sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-regex@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.23.3.tgz#26897708d8f42654ca4ce1b73e96140fbad879dc"
+  integrity sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.23.3.tgz#4fb6f0a719c2c5859d11f6b55a050cc987f3799e"
+  integrity sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/preset-env@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.7.tgz#e5d69b9f14db8a13bae4d8e5ce7f360973626241"
+  integrity sha512-SY27X/GtTz/L4UryMNJ6p4fH4nsgWbz84y9FE0bQeWJP6O5BhgVCt53CotQKHCOeXJel8VyhlhujhlltKms/CA==
+  dependencies:
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.23.5"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.23.3"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.23.3"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.23.7"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.23.3"
+    "@babel/plugin-syntax-import-attributes" "^7.23.3"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-    "@babel/plugin-syntax-top-level-await" "^7.10.4"
-    "@babel/plugin-transform-arrow-functions" "^7.10.4"
-    "@babel/plugin-transform-async-to-generator" "^7.10.4"
-    "@babel/plugin-transform-block-scoped-functions" "^7.10.4"
-    "@babel/plugin-transform-block-scoping" "^7.10.4"
-    "@babel/plugin-transform-classes" "^7.10.4"
-    "@babel/plugin-transform-computed-properties" "^7.10.4"
-    "@babel/plugin-transform-destructuring" "^7.10.4"
-    "@babel/plugin-transform-dotall-regex" "^7.10.4"
-    "@babel/plugin-transform-duplicate-keys" "^7.10.4"
-    "@babel/plugin-transform-exponentiation-operator" "^7.10.4"
-    "@babel/plugin-transform-for-of" "^7.10.4"
-    "@babel/plugin-transform-function-name" "^7.10.4"
-    "@babel/plugin-transform-literals" "^7.10.4"
-    "@babel/plugin-transform-member-expression-literals" "^7.10.4"
-    "@babel/plugin-transform-modules-amd" "^7.10.4"
-    "@babel/plugin-transform-modules-commonjs" "^7.10.4"
-    "@babel/plugin-transform-modules-systemjs" "^7.10.4"
-    "@babel/plugin-transform-modules-umd" "^7.10.4"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.10.4"
-    "@babel/plugin-transform-new-target" "^7.10.4"
-    "@babel/plugin-transform-object-super" "^7.10.4"
-    "@babel/plugin-transform-parameters" "^7.10.4"
-    "@babel/plugin-transform-property-literals" "^7.10.4"
-    "@babel/plugin-transform-regenerator" "^7.10.4"
-    "@babel/plugin-transform-reserved-words" "^7.10.4"
-    "@babel/plugin-transform-shorthand-properties" "^7.10.4"
-    "@babel/plugin-transform-spread" "^7.10.4"
-    "@babel/plugin-transform-sticky-regex" "^7.10.4"
-    "@babel/plugin-transform-template-literals" "^7.10.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.10.4"
-    "@babel/plugin-transform-unicode-escapes" "^7.10.4"
-    "@babel/plugin-transform-unicode-regex" "^7.10.4"
-    "@babel/preset-modules" "^0.1.3"
-    "@babel/types" "^7.10.4"
-    browserslist "^4.12.0"
-    core-js-compat "^3.6.2"
-    invariant "^2.2.2"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
-"@babel/preset-modules@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
-  integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.23.3"
+    "@babel/plugin-transform-async-generator-functions" "^7.23.7"
+    "@babel/plugin-transform-async-to-generator" "^7.23.3"
+    "@babel/plugin-transform-block-scoped-functions" "^7.23.3"
+    "@babel/plugin-transform-block-scoping" "^7.23.4"
+    "@babel/plugin-transform-class-properties" "^7.23.3"
+    "@babel/plugin-transform-class-static-block" "^7.23.4"
+    "@babel/plugin-transform-classes" "^7.23.5"
+    "@babel/plugin-transform-computed-properties" "^7.23.3"
+    "@babel/plugin-transform-destructuring" "^7.23.3"
+    "@babel/plugin-transform-dotall-regex" "^7.23.3"
+    "@babel/plugin-transform-duplicate-keys" "^7.23.3"
+    "@babel/plugin-transform-dynamic-import" "^7.23.4"
+    "@babel/plugin-transform-exponentiation-operator" "^7.23.3"
+    "@babel/plugin-transform-export-namespace-from" "^7.23.4"
+    "@babel/plugin-transform-for-of" "^7.23.6"
+    "@babel/plugin-transform-function-name" "^7.23.3"
+    "@babel/plugin-transform-json-strings" "^7.23.4"
+    "@babel/plugin-transform-literals" "^7.23.3"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.23.4"
+    "@babel/plugin-transform-member-expression-literals" "^7.23.3"
+    "@babel/plugin-transform-modules-amd" "^7.23.3"
+    "@babel/plugin-transform-modules-commonjs" "^7.23.3"
+    "@babel/plugin-transform-modules-systemjs" "^7.23.3"
+    "@babel/plugin-transform-modules-umd" "^7.23.3"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
+    "@babel/plugin-transform-new-target" "^7.23.3"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.23.4"
+    "@babel/plugin-transform-numeric-separator" "^7.23.4"
+    "@babel/plugin-transform-object-rest-spread" "^7.23.4"
+    "@babel/plugin-transform-object-super" "^7.23.3"
+    "@babel/plugin-transform-optional-catch-binding" "^7.23.4"
+    "@babel/plugin-transform-optional-chaining" "^7.23.4"
+    "@babel/plugin-transform-parameters" "^7.23.3"
+    "@babel/plugin-transform-private-methods" "^7.23.3"
+    "@babel/plugin-transform-private-property-in-object" "^7.23.4"
+    "@babel/plugin-transform-property-literals" "^7.23.3"
+    "@babel/plugin-transform-regenerator" "^7.23.3"
+    "@babel/plugin-transform-reserved-words" "^7.23.3"
+    "@babel/plugin-transform-shorthand-properties" "^7.23.3"
+    "@babel/plugin-transform-spread" "^7.23.3"
+    "@babel/plugin-transform-sticky-regex" "^7.23.3"
+    "@babel/plugin-transform-template-literals" "^7.23.3"
+    "@babel/plugin-transform-typeof-symbol" "^7.23.3"
+    "@babel/plugin-transform-unicode-escapes" "^7.23.3"
+    "@babel/plugin-transform-unicode-property-regex" "^7.23.3"
+    "@babel/plugin-transform-unicode-regex" "^7.23.3"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.23.3"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.7"
+    babel-plugin-polyfill-corejs3 "^0.8.7"
+    babel-plugin-polyfill-regenerator "^0.5.4"
+    core-js-compat "^3.31.0"
+    semver "^6.3.1"
+
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
-  integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
+"@babel/preset-react@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.23.3.tgz#f73ca07e7590f977db07eb54dbe46538cc015709"
+  integrity sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-transform-react-display-name" "^7.10.4"
-    "@babel/plugin-transform-react-jsx" "^7.10.4"
-    "@babel/plugin-transform-react-jsx-development" "^7.10.4"
-    "@babel/plugin-transform-react-jsx-self" "^7.10.4"
-    "@babel/plugin-transform-react-jsx-source" "^7.10.4"
-    "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
-
-"@babel/register@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.10.5.tgz#354f3574895f1307f79efe37a51525e52fd38d89"
-  integrity sha512-eYHdLv43nyvmPn9bfNfrcC4+iYNwdQ8Pxk1MFJuU/U5LpSYl/PH4dFMazCYZDFVi8ueG3shvO+AQfLrxpYulQw==
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.15"
+    "@babel/plugin-transform-react-display-name" "^7.23.3"
+    "@babel/plugin-transform-react-jsx" "^7.22.15"
+    "@babel/plugin-transform-react-jsx-development" "^7.22.5"
+    "@babel/plugin-transform-react-pure-annotations" "^7.23.3"
+
+"@babel/register@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.23.7.tgz#485a5e7951939d21304cae4af1719fdb887bc038"
+  integrity sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==
   dependencies:
+    clone-deep "^4.0.1"
     find-cache-dir "^2.0.0"
-    lodash "^4.17.19"
     make-dir "^2.1.0"
-    pirates "^4.0.0"
+    pirates "^4.0.6"
     source-map-support "^0.5.16"
 
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.10.5.tgz#a57fe6c13045ca33768a2aa527ead795146febe1"
@@ -969,17 +1085,17 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.10.5", "@babel/runtime@^7.4.5", "@babel/runtime@^7.8.4":
-  version "7.11.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
-  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.23.7", "@babel/runtime@^7.4.5", "@babel/runtime@^7.8.4":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.7.tgz#dd7c88deeb218a0f8bd34d5db1aa242e0f203193"
+  integrity sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==
   dependencies:
-    regenerator-runtime "^0.13.4"
+    regenerator-runtime "^0.14.0"
 
-"@babel/standalone@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.10.5.tgz#4ee38dc79fda10a2a0da0897f09e270310151314"
-  integrity sha512-PERGHqhQ7H3TrdglvSW4pEHULywMJEdytnzaR0VPF1HN45aS+3FcE62efb90XPKS9TlgrEUkYDvYMt+0m6G0YA==
+"@babel/standalone@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.23.7.tgz#07d9b28001d83542b49bdb0db776b3328086b28a"
+  integrity sha512-AsO3aIh9I4qIqK61d6nPxPAdrSuWF4FmOLej3xNIkBIZj+8XJGArQQJw6DnuUkkqbsLp1fARkXOdKiuqWgac0Q==
 
 "@babel/template@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -991,14 +1107,14 @@
     "@babel/types" "7.0.0-beta.51"
     lodash "^4.17.5"
 
-"@babel/template@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
-  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+"@babel/template@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
   dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/parser" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
 
 "@babel/traverse@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -1016,20 +1132,21 @@
     invariant "^2.2.0"
     lodash "^4.17.5"
 
-"@babel/traverse@^7.10.4", "@babel/traverse@^7.10.5", "@babel/traverse@^7.7.0":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.5.tgz#77ce464f5b258be265af618d8fddf0536f20b564"
-  integrity sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.10.5"
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-split-export-declaration" "^7.10.4"
-    "@babel/parser" "^7.10.5"
-    "@babel/types" "^7.10.5"
-    debug "^4.1.0"
+"@babel/traverse@^7.18.9", "@babel/traverse@^7.23.7", "@babel/traverse@^7.7.0":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.7.tgz#9a7bf285c928cb99b5ead19c3b1ce5b310c9c305"
+  integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/generator" "^7.23.6"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.6"
+    "@babel/types" "^7.23.6"
+    debug "^4.3.1"
     globals "^11.1.0"
-    lodash "^4.17.19"
 
 "@babel/types@7.0.0-beta.51":
   version "7.0.0-beta.51"
@@ -1040,13 +1157,13 @@
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.0.0-beta.49", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.7.2":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.5.tgz#d88ae7e2fde86bfbfe851d4d81afa70a997b5d15"
-  integrity sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==
+"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.4", "@babel/types@^7.23.6", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.7.2":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.6.tgz#be33fdb151e1f5a56877d704492c240fc71c7ccd"
+  integrity sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
-    lodash "^4.17.19"
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
 "@cypress/listr-verbose-renderer@^0.4.1":
@@ -1150,6 +1267,38 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
   integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
+  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
+
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
+  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@mdx-js/loader@^0.20.3":
   version "0.20.3"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-0.20.3.tgz#73c056ec3eef9f993cac28e9102898c8862f9def"
@@ -1182,6 +1331,11 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/tag/-/tag-0.20.3.tgz#9e2306040b6469248c45a5f5baf44d0014db0493"
   integrity sha512-Co3gUFmNDv9z2LjuvLTpTj2NaOSHFxuoZjohcG0YK/KfECO+Ns9idzThMYjfEDe1vAf4c824rqlBYseedJdFNw==
 
+"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
+  version "2.1.8-no-fsevents.3"
+  resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
+  integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==
+
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
@@ -1461,10 +1615,10 @@
     "@pnpm/network.ca-file" "^1.0.1"
     config-chain "^1.1.11"
 
-"@popperjs/core@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
-  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
@@ -1559,11 +1713,49 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/babel__core@^7.18.0":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
+  integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
+  dependencies:
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.8"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
+  integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"
+  integrity sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.18.0":
+  version "7.20.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.4.tgz#ec2c06fed6549df8bc0eb4615b683749a4a92e1b"
+  integrity sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==
+  dependencies:
+    "@babel/types" "^7.20.7"
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/doctrine@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.9.tgz#d86a5f452a15e3e3113b99e39616a9baa0f9863f"
+  integrity sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -1646,6 +1838,11 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/resolve@^1.20.2":
+  version "1.20.6"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.6.tgz#e6e60dad29c2c8c206c026e6dd8d6d1bdda850b8"
+  integrity sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -2233,10 +2430,10 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+anymatch@~3.1.1, anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
@@ -2510,11 +2707,6 @@ ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
 
-ast-types@0.12.2:
-  version "0.12.2"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.12.2.tgz#341656049ee328ac03fc805c156b49ebab1e4462"
-  integrity sha512-8c83xDLJM/dLDyXNLiR6afRRm4dPKN6KAnKqytRK3DBJul9lA+atxdQkNDkSVPdTqea5HiRq3lnnOIZ0MBpvdg==
-
 ast-types@^0.13.2:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.4.tgz#ee0d77b343263965ecc3fb62da16e7222b2b6782"
@@ -2573,7 +2765,7 @@ async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.5.0, async@^2.6.1:
+async@^2.1.2, async@^2.4.1, async@^2.5.0, async@^2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
   integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
@@ -2901,13 +3093,6 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-dynamic-import-node@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
-  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
-  dependencies:
-    object.assign "^4.1.0"
-
 babel-plugin-filter-imports@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-filter-imports/-/babel-plugin-filter-imports-4.0.0.tgz#068f8da15236a96a9602c36dc6f4a6eeca70a4f4"
@@ -2916,15 +3101,15 @@ babel-plugin-filter-imports@^4.0.0:
     "@babel/types" "^7.7.2"
     lodash "^4.17.15"
 
-babel-plugin-istanbul@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
-  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@istanbuljs/load-nyc-config" "^1.0.0"
     "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-instrument "^5.0.4"
     test-exclude "^6.0.0"
 
 babel-plugin-lodash@^3.3.4:
@@ -2937,6 +3122,30 @@ babel-plugin-lodash@^3.3.4:
     lodash "^4.17.10"
     require-package-name "^2.0.1"
 
+babel-plugin-polyfill-corejs2@^0.4.7:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.7.tgz#679d1b94bf3360f7682e11f2cb2708828a24fe8c"
+  integrity sha512-LidDk/tEGDfuHW2DWh/Hgo4rmnw3cduK6ZkOI1NPFceSK3n/yAGeOsNT7FLnSGHkXj3RHGSEVkN3FsCTY6w2CQ==
+  dependencies:
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.4.4"
+    semver "^6.3.1"
+
+babel-plugin-polyfill-corejs3@^0.8.7:
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.7.tgz#941855aa7fdaac06ed24c730a93450d2b2b76d04"
+  integrity sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.4.4"
+    core-js-compat "^3.33.1"
+
+babel-plugin-polyfill-regenerator@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.4.tgz#c6fc8eab610d3a11eb475391e52584bacfc020f4"
+  integrity sha512-S/x2iOCvDaCASLYsOOgWOq4bCfKYVqvO/uxjkaYyZ3rVsVE3CeAI/c84NpyuBBymEgNvHgjEot3a9/Z/kXvqsg==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.4.4"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -3826,15 +4035,15 @@ browserslist@^3.2.6:
     caniuse-lite "^1.0.30000844"
     electron-to-chromium "^1.3.47"
 
-browserslist@^4.12.0, browserslist@^4.8.5:
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.13.0.tgz#42556cba011e1b0a2775b611cba6a8eca18e940d"
-  integrity sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ==
+browserslist@^4.22.2:
+  version "4.22.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b"
+  integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==
   dependencies:
-    caniuse-lite "^1.0.30001093"
-    electron-to-chromium "^1.3.488"
-    escalade "^3.0.1"
-    node-releases "^1.1.58"
+    caniuse-lite "^1.0.30001565"
+    electron-to-chromium "^1.4.601"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
 
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
@@ -4015,12 +4224,13 @@ cachedir@^2.3.0:
   integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
 call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513"
+  integrity sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==
   dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.1"
+    set-function-length "^1.1.1"
 
 caller-path@^0.1.0:
   version "0.1.0"
@@ -4099,10 +4309,10 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001299.tgz#3eebd0f4718193ffca3feff2cd6606fd65f038eb"
   integrity sha512-Zb46wD9OWbQ82uZPOEGCr/FG0zFWMBBvgl/bcHOxSkhxEG4BwzXGqLbY7QHzSXg5d13lTh3Gpl3jPi8gvL3EIg==
 
-caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001093:
-  version "1.0.30001299"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
-  integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
+caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001565:
+  version "1.0.30001572"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz#1ccf7dc92d2ee2f92ed3a54e11b7b4a3041acfa0"
+  integrity sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -4349,20 +4559,20 @@ chokidar@^2.0.0, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.0.0, chokidar@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1"
-  integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g==
+chokidar@^3.0.0, chokidar@^3.4.0, chokidar@^3.4.1:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
   dependencies:
-    anymatch "~3.1.1"
+    anymatch "~3.1.2"
     braces "~3.0.2"
-    glob-parent "~5.1.0"
+    glob-parent "~5.1.2"
     is-binary-path "~2.1.0"
     is-glob "~4.0.1"
     normalize-path "~3.0.0"
-    readdirp "~3.4.0"
+    readdirp "~3.6.0"
   optionalDependencies:
-    fsevents "~2.1.2"
+    fsevents "~2.3.2"
 
 chownr@^1.0.1, chownr@^1.1.1:
   version "1.1.1"
@@ -4911,13 +5121,18 @@ content-type@1.0.4, content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
-convert-source-map@^1.1.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.7.0:
+convert-source-map@^1.5.0, convert-source-map@^1.5.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -4961,13 +5176,12 @@ copy-to-clipboard@^3.3.1:
   dependencies:
     toggle-selection "^1.0.6"
 
-core-js-compat@^3.6.2:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
-  integrity sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==
+core-js-compat@^3.31.0, core-js-compat@^3.33.1:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.35.0.tgz#c149a3d1ab51e743bc1da61e39cb51f461a41873"
+  integrity sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==
   dependencies:
-    browserslist "^4.8.5"
-    semver "7.0.0"
+    browserslist "^4.22.2"
 
 core-js-pure@^3.0.0:
   version "3.6.5"
@@ -5372,10 +5586,10 @@ debug@3.2.6, debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
-debug@4, debug@4.3.2, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
-  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
@@ -5386,6 +5600,13 @@ debug@4.2.0:
   dependencies:
     ms "2.1.2"
 
+debug@4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    ms "2.1.2"
+
 debug@=3.1.0, debug@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
@@ -5521,6 +5742,15 @@ defer-to-connect@^2.0.1:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587"
   integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==
 
+define-data-property@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
+  integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
+  dependencies:
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -5930,10 +6160,10 @@ ejs@^2.5.7, ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.488:
-  version "1.3.509"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.509.tgz#830fcb89cd66dc2984d18d794973b99e3f00584c"
-  integrity sha512-cN4lkjNRuTG8rtAqTOVgwpecEC2kbKA04PG6YijcKGHK/kD0xLjiqExcAOmLUwtXZRF8cBeam2I0VZcih919Ug==
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.47, electron-to-chromium@^1.4.601:
+  version "1.4.616"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz#4bddbc2c76e1e9dbf449ecd5da3d8119826ea4fb"
+  integrity sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -6246,10 +6476,10 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-escalade@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
-  integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
 escape-goat@^4.0.0:
   version "4.0.0"
@@ -6576,7 +6806,7 @@ esprima@^2.6.0:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
-esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
+esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -7531,6 +7761,11 @@ fsevents@~2.1.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 ftp@^0.3.10:
   version "0.3.10"
   resolved "https://registry.yarnpkg.com/ftp/-/ftp-0.3.10.tgz#9197d861ad8142f3e63d5a83bfe4c59f7330885d"
@@ -7539,9 +7774,10 @@ ftp@^0.3.10:
     readable-stream "1.1.x"
     xregexp "2.0.0"
 
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+function-bind@^1.1.1, function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
 function.prototype.name@^1.1.2, function.prototype.name@^1.1.5:
   version "1.1.5"
@@ -7575,10 +7811,10 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-gensync@^1.0.0-beta.1:
-  version "1.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
-  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
 get-caller-file@^1.0.1:
   version "1.0.2"
@@ -7593,14 +7829,15 @@ get-func-name@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
-  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b"
+  integrity sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==
   dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
     has-symbols "^1.0.3"
+    hasown "^2.0.0"
 
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
@@ -7747,7 +7984,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.0:
+glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.0, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -7782,7 +8019,7 @@ glob-watcher@^5.0.3:
     normalize-path "^3.0.0"
     object.defaults "^1.1.0"
 
-glob@7.1.6, glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -7794,6 +8031,18 @@ glob@7.1.6, glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glo
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -8164,6 +8413,11 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
+has-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+
 has-symbol-support-x@^1.4.1:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455"
@@ -8248,6 +8502,13 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.0"
 
+hasown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
+  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
+  dependencies:
+    function-bind "^1.1.2"
+
 hast-to-hyperscript@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-6.0.0.tgz#051ee17d41b30da8c5ceb001189adf70226f12f4"
@@ -8882,7 +9143,7 @@ interpret@^1.0.0, interpret@^1.4.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
-invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.0, invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -9018,6 +9279,13 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-core-module@^2.13.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -9531,12 +9799,12 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-istanbul-lib-coverage@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
-  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756"
+  integrity sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==
 
-istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.1:
+istanbul-lib-instrument@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
   integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
@@ -9546,6 +9814,17 @@ istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.1:
     istanbul-lib-coverage "^3.0.0"
     semver "^6.3.0"
 
+istanbul-lib-instrument@^5.0.4:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
 istanbul-lib-report@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
@@ -9735,12 +10014,10 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
-  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
-  dependencies:
-    minimist "^1.2.5"
+json5@^2.1.2, json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonfile@^4.0.0:
   version "4.0.0"
@@ -9975,13 +10252,6 @@ leven@^3.1.0:
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
-levenary@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
-  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
-  dependencies:
-    leven "^3.1.0"
-
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -10212,6 +10482,11 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.escape@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
@@ -10734,6 +11009,11 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
+min-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -10748,13 +11028,20 @@ minimatch@3.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4:
+minimatch@3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@~1.2.0:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@@ -11041,12 +11328,6 @@ no-case@^2.2.0, no-case@^2.3.2:
   dependencies:
     lower-case "^1.1.1"
 
-node-dir@^0.1.10:
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
-  dependencies:
-    minimatch "^3.0.2"
-
 node-domexception@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
@@ -11115,10 +11396,6 @@ node-libs-browser@^2.0.0, node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
-node-modules-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
-
 node-pre-gyp@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
@@ -11135,10 +11412,10 @@ node-pre-gyp@^0.12.0:
     semver "^5.3.0"
     tar "^4"
 
-node-releases@^1.1.58:
-  version "1.1.60"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
-  integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
+node-releases@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
 node-version@1.1.3:
   version "1.1.3"
@@ -11296,12 +11573,12 @@ object-inspect@^1.12.2, object-inspect@^1.7.0, object-inspect@^1.9.0:
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
 object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
-  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.17.5"
 
 object-keys@^1.0.11, object-keys@^1.1.1:
   version "1.1.1"
@@ -11918,10 +12195,10 @@ path-key@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
   integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
 
-path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-root-regex@^0.1.0:
   version "0.1.2"
@@ -12008,6 +12285,11 @@ performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.0.7, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -12036,11 +12318,10 @@ pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
-pirates@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.0.tgz#850b18781b4ac6ec58a43c9ed9ec5fe6796addbd"
-  dependencies:
-    node-modules-regexp "^1.0.0"
+pirates@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
 pkg-dir@4.2.0, pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
@@ -12863,18 +13144,21 @@ react-dev-utils@^4.0.1:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-docgen@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-4.1.0.tgz#218887feba5b2c36af337879a27e74bda90ed7cb"
-  integrity sha512-yoGY45tD4yPGmnOlJr4mjU6LTYRO1OEny9ZtK8LjnFMqr2M/uRuH88vPba7743oVDFuVNH5bnN2bh6eQX3qXjA==
-  dependencies:
-    "@babel/core" "^7.0.0"
-    "@babel/runtime" "^7.0.0"
-    async "^2.1.4"
-    commander "^2.19.0"
+react-docgen@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-7.0.1.tgz#b6528fe45385908645ffbee1ec0d65709e1e047c"
+  integrity sha512-rCz0HBIT0LWbIM+///LfRrJoTKftIzzwsYDf0ns5KwaEjejMHQRtphcns+IXFHDNY9pnz6G8l/JbbI6pD4EAIA==
+  dependencies:
+    "@babel/core" "^7.18.9"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+    "@types/babel__core" "^7.18.0"
+    "@types/babel__traverse" "^7.18.0"
+    "@types/doctrine" "^0.0.9"
+    "@types/resolve" "^1.20.2"
     doctrine "^3.0.0"
-    node-dir "^0.1.10"
-    recast "^0.17.3"
+    resolve "^1.22.1"
+    strip-indent "^4.0.0"
 
 react-dom@^16, react-dom@^17.0.0:
   version "17.0.1"
@@ -13222,23 +13506,13 @@ readdirp@~3.3.0:
   dependencies:
     picomatch "^2.0.7"
 
-readdirp@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
-  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
   dependencies:
     picomatch "^2.2.1"
 
-recast@^0.17.3:
-  version "0.17.3"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.17.3.tgz#f49a9c9a64c59b55f6c93b5a53e3cffd7a13354d"
-  integrity sha512-NwQguXPwHqaVb6M7tsY11+8RDoAKHGRdymPGDxHJrsxOlNADQh0b08uz/MgYp1R1wmHuSBK4A4I5Oq+cE1J40g==
-  dependencies:
-    ast-types "0.12.2"
-    esprima "~4.0.0"
-    private "^0.1.8"
-    source-map "~0.6.1"
-
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -13277,16 +13551,17 @@ reflect.ownkeys@^0.2.0:
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
   integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
 
-regenerate-unicode-properties@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
-  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
+regenerate-unicode-properties@^10.1.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
+  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
   dependencies:
-    regenerate "^1.4.0"
+    regenerate "^1.4.2"
 
-regenerate@^1.2.1, regenerate@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
+regenerate@^1.2.1, regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
 regenerator-runtime@^0.10.5:
   version "0.10.5"
@@ -13301,6 +13576,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -13309,10 +13589,10 @@ regenerator-transform@^0.10.0:
     babel-types "^6.19.0"
     private "^0.1.6"
 
-regenerator-transform@^0.14.2:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
-  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
+regenerator-transform@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
@@ -13363,17 +13643,17 @@ regexpu-core@^2.0.0:
     regjsgen "^0.2.0"
     regjsparser "^0.1.4"
 
-regexpu-core@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
-  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
+regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
   dependencies:
-    regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.2.0"
-    regjsgen "^0.5.1"
-    regjsparser "^0.6.4"
-    unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.2.0"
+    "@babel/regjsgen" "^0.8.0"
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.1.0"
+    regjsparser "^0.9.1"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
 
 registry-auth-token@3.3.2, registry-auth-token@^3.0.1:
   version "3.3.2"
@@ -13406,21 +13686,16 @@ regjsgen@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
 
-regjsgen@^0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
-  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
-
 regjsparser@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
   dependencies:
     jsesc "~0.5.0"
 
-regjsparser@^0.6.4:
-  version "0.6.4"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
-  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
+regjsparser@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
+  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
   dependencies:
     jsesc "~0.5.0"
 
@@ -13669,12 +13944,14 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.4.0, resolve@^1.8.1:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
-  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.22.1, resolve@^1.3.3, resolve@^1.4.0:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
   dependencies:
-    path-parse "^1.0.6"
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
 
 responselike@^3.0.0:
   version "3.0.0"
@@ -13945,16 +14222,11 @@ semver-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
   integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.5.0, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
 semver@7.3.2:
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
@@ -13967,10 +14239,10 @@ semver@7.3.8, semver@^7.2.1, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^6.0.0, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 send@0.16.2:
   version "0.16.2"
@@ -14107,6 +14379,16 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
 
+set-function-length@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
+  integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
+  dependencies:
+    define-data-property "^1.1.1"
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
 set-value@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
@@ -14882,6 +15164,13 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
+strip-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853"
+  integrity sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==
+  dependencies:
+    min-indent "^1.0.1"
+
 strip-json-comments@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
@@ -14970,6 +15259,11 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 sver-compat@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/sver-compat/-/sver-compat-1.5.0.tgz#3cf87dfeb4d07b4a3f14827bc186b3fd0c645cd8"
@@ -15510,10 +15804,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@^3.9.5:
-  version "3.9.7"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
-  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
+typescript@^4.5.5:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
 ua-parser-js@0.7.21, ua-parser-js@^0.7.18:
   version "0.7.21"
@@ -15609,25 +15903,28 @@ unherit@^1.0.4:
     inherits "^2.0.1"
     xtend "^4.0.1"
 
-unicode-canonical-property-names-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
 
-unicode-match-property-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
   dependencies:
-    unicode-canonical-property-names-ecmascript "^1.0.4"
-    unicode-property-aliases-ecmascript "^1.0.4"
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
 
-unicode-match-property-value-ecmascript@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
-  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
 
-unicode-property-aliases-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
 unified@^6.1.6:
   version "6.2.0"
@@ -15790,6 +16087,14 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.2.tgz#3db658600edaeeccbe6db5e684d67ee8c2acd068"
   integrity sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==
 
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-check@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/update-check/-/update-check-1.5.1.tgz#24fc52266273cb8684d2f1bf9687c0e52dcf709f"

From 3b54506ebe9a377ec1bf1c00c924e5a9d914735a Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sat, 30 Dec 2023 14:27:06 +0100
Subject: [PATCH 14/30] chore: add "use client" directive in components where
 it's needed (#4452)

---
 .babel-preset.js                                |  6 ++++++
 package.json                                    |  1 +
 src/addons/Confirm/Confirm.js                   |  2 +-
 src/addons/Pagination/Pagination.js             |  2 +-
 src/addons/Portal/Portal.js                     | 17 +++++------------
 src/addons/Portal/PortalInner.js                |  2 +-
 src/addons/Portal/usePortalElement.js           |  2 +-
 src/addons/Portal/utils/useTrigger.js           |  2 +-
 src/addons/Portal/utils/validateTrigger.js      |  2 +-
 src/addons/Radio/Radio.js                       |  2 +-
 src/addons/Select/Select.js                     |  2 +-
 src/addons/TextArea/TextArea.js                 |  2 +-
 .../TransitionablePortal.js                     |  2 +-
 src/collections/Breadcrumb/Breadcrumb.js        |  2 +-
 src/collections/Breadcrumb/BreadcrumbDivider.js |  2 +-
 src/collections/Breadcrumb/BreadcrumbSection.js |  2 +-
 src/collections/Form/Form.js                    |  2 +-
 src/collections/Form/FormButton.js              |  2 +-
 src/collections/Form/FormCheckbox.js            |  2 +-
 src/collections/Form/FormDropdown.js            |  2 +-
 src/collections/Form/FormGroup.js               |  2 +-
 src/collections/Form/FormInput.js               |  2 +-
 src/collections/Form/FormRadio.js               |  2 +-
 src/collections/Form/FormSelect.js              |  2 +-
 src/collections/Form/FormTextArea.js            |  2 +-
 src/collections/Grid/Grid.js                    |  2 +-
 src/collections/Grid/GridColumn.js              |  2 +-
 src/collections/Grid/GridRow.js                 |  2 +-
 src/collections/Menu/Menu.js                    |  2 +-
 src/collections/Menu/MenuHeader.js              |  2 +-
 src/collections/Menu/MenuItem.js                |  2 +-
 src/collections/Menu/MenuMenu.js                |  2 +-
 src/collections/Message/Message.js              |  2 +-
 src/collections/Message/MessageContent.js       |  2 +-
 src/collections/Message/MessageHeader.js        |  2 +-
 src/collections/Message/MessageItem.js          |  2 +-
 src/collections/Message/MessageList.js          |  2 +-
 src/collections/Table/Table.js                  |  2 +-
 src/collections/Table/TableBody.js              |  2 +-
 src/collections/Table/TableCell.js              |  2 +-
 src/collections/Table/TableFooter.js            |  2 +-
 src/collections/Table/TableHeader.js            |  2 +-
 src/collections/Table/TableHeaderCell.js        |  2 +-
 src/collections/Table/TableRow.js               |  2 +-
 src/elements/Button/Button.js                   |  2 +-
 src/elements/Button/ButtonContent.js            |  2 +-
 src/elements/Button/ButtonGroup.js              |  2 +-
 src/elements/Button/ButtonOr.js                 |  2 +-
 src/elements/Container/Container.js             |  2 +-
 src/elements/Divider/Divider.js                 |  2 +-
 src/elements/Flag/Flag.js                       |  2 +-
 src/elements/Header/Header.js                   |  2 +-
 src/elements/Header/HeaderContent.js            |  2 +-
 src/elements/Header/HeaderSubheader.js          |  2 +-
 src/elements/Icon/Icon.js                       |  2 +-
 src/elements/Icon/IconGroup.js                  |  2 +-
 src/elements/Image/Image.js                     |  2 +-
 src/elements/Image/ImageGroup.js                |  2 +-
 src/elements/Input/Input.js                     |  2 +-
 src/elements/Label/Label.js                     |  2 +-
 src/elements/Label/LabelDetail.js               |  2 +-
 src/elements/Label/LabelGroup.js                |  2 +-
 src/elements/List/List.js                       |  2 +-
 src/elements/List/ListContent.js                |  2 +-
 src/elements/List/ListDescription.js            |  2 +-
 src/elements/List/ListHeader.js                 |  2 +-
 src/elements/List/ListIcon.js                   |  2 +-
 src/elements/List/ListList.js                   |  2 +-
 src/elements/Loader/Loader.js                   |  2 +-
 src/elements/Placeholder/Placeholder.js         |  2 +-
 src/elements/Placeholder/PlaceholderHeader.js   |  2 +-
 src/elements/Placeholder/PlaceholderImage.js    |  2 +-
 src/elements/Placeholder/PlaceholderLine.js     |  2 +-
 .../Placeholder/PlaceholderParagraph.js         |  2 +-
 src/elements/Rail/Rail.js                       |  2 +-
 src/elements/Reveal/Reveal.js                   |  2 +-
 src/elements/Reveal/RevealContent.js            |  2 +-
 src/elements/Segment/Segment.js                 |  2 +-
 src/elements/Segment/SegmentGroup.js            |  2 +-
 src/elements/Segment/SegmentInline.js           |  2 +-
 src/elements/Step/Step.js                       |  2 +-
 src/elements/Step/StepContent.js                |  2 +-
 src/elements/Step/StepDescription.js            |  2 +-
 src/elements/Step/StepGroup.js                  |  2 +-
 src/elements/Step/StepTitle.js                  |  2 +-
 src/lib/ModernAutoControlledComponent.js        |  2 +-
 src/lib/hooks/useClassNamesOnNode.js            |  2 +-
 src/lib/hooks/useIsomorphicLayoutEffect.js      |  2 +-
 src/modules/Accordion/Accordion.js              |  2 +-
 src/modules/Accordion/AccordionAccordion.js     |  2 +-
 src/modules/Accordion/AccordionContent.js       |  2 +-
 src/modules/Accordion/AccordionTitle.js         |  2 +-
 src/modules/Checkbox/Checkbox.js                |  2 +-
 src/modules/Dimmer/Dimmer.js                    |  2 +-
 src/modules/Dimmer/DimmerDimmable.js            |  2 +-
 src/modules/Dimmer/DimmerInner.js               |  2 +-
 src/modules/Dropdown/DropdownDivider.js         |  2 +-
 src/modules/Dropdown/DropdownHeader.js          |  2 +-
 src/modules/Dropdown/DropdownItem.js            |  2 +-
 src/modules/Dropdown/DropdownMenu.js            |  2 +-
 src/modules/Dropdown/DropdownSearchInput.js     |  2 +-
 src/modules/Dropdown/DropdownText.js            |  2 +-
 src/modules/Dropdown/utils/getMenuOptions.js    |  2 +-
 src/modules/Embed/Embed.js                      |  2 +-
 src/modules/Modal/Modal.js                      |  2 +-
 src/modules/Modal/ModalActions.js               |  2 +-
 src/modules/Modal/ModalContent.js               |  2 +-
 src/modules/Modal/ModalDescription.js           |  2 +-
 src/modules/Modal/ModalDimmer.js                |  2 +-
 src/modules/Modal/ModalHeader.js                |  2 +-
 src/modules/Popup/Popup.js                      |  2 +-
 src/modules/Popup/PopupContent.js               |  2 +-
 src/modules/Popup/PopupHeader.js                |  2 +-
 src/modules/Progress/Progress.js                |  2 +-
 src/modules/Rating/Rating.js                    |  2 +-
 src/modules/Rating/RatingIcon.js                |  2 +-
 src/modules/Search/Search.js                    |  2 +-
 src/modules/Search/SearchCategory.js            |  2 +-
 src/modules/Search/SearchCategoryLayout.js      |  2 +-
 src/modules/Search/SearchResult.js              |  2 +-
 src/modules/Search/SearchResults.js             |  2 +-
 src/modules/Sidebar/Sidebar.js                  |  2 +-
 src/modules/Sidebar/SidebarPushable.js          |  2 +-
 src/modules/Sidebar/SidebarPusher.js            |  2 +-
 src/modules/Sticky/Sticky.js                    |  2 +-
 src/modules/Tab/Tab.js                          |  2 +-
 src/modules/Tab/TabPane.js                      |  2 +-
 src/modules/Transition/TransitionGroup.js       |  2 +-
 src/modules/Transition/utils/wrapChild.js       |  2 +-
 src/views/Advertisement/Advertisement.js        |  2 +-
 src/views/Card/Card.js                          |  2 +-
 src/views/Card/CardContent.js                   |  2 +-
 src/views/Card/CardDescription.js               |  2 +-
 src/views/Card/CardGroup.js                     |  2 +-
 src/views/Card/CardHeader.js                    |  2 +-
 src/views/Card/CardMeta.js                      |  2 +-
 src/views/Comment/Comment.js                    |  2 +-
 src/views/Comment/CommentAction.js              |  2 +-
 src/views/Comment/CommentActions.js             |  2 +-
 src/views/Comment/CommentAuthor.js              |  2 +-
 src/views/Comment/CommentAvatar.js              |  2 +-
 src/views/Comment/CommentContent.js             |  2 +-
 src/views/Comment/CommentGroup.js               |  2 +-
 src/views/Comment/CommentMetadata.js            |  2 +-
 src/views/Comment/CommentText.js                |  2 +-
 src/views/Feed/Feed.js                          |  2 +-
 src/views/Feed/FeedContent.js                   |  2 +-
 src/views/Feed/FeedDate.js                      |  2 +-
 src/views/Feed/FeedEvent.js                     |  2 +-
 src/views/Feed/FeedExtra.js                     |  2 +-
 src/views/Feed/FeedLabel.js                     |  2 +-
 src/views/Feed/FeedLike.js                      |  2 +-
 src/views/Feed/FeedMeta.js                      |  2 +-
 src/views/Feed/FeedSummary.js                   |  2 +-
 src/views/Feed/FeedUser.js                      |  2 +-
 src/views/Item/Item.js                          |  2 +-
 src/views/Item/ItemContent.js                   |  2 +-
 src/views/Item/ItemDescription.js               |  2 +-
 src/views/Item/ItemExtra.js                     |  2 +-
 src/views/Item/ItemGroup.js                     |  2 +-
 src/views/Item/ItemHeader.js                    |  2 +-
 src/views/Item/ItemImage.js                     |  2 +-
 src/views/Item/ItemMeta.js                      |  2 +-
 src/views/Statistic/Statistic.js                |  2 +-
 src/views/Statistic/StatisticGroup.js           |  2 +-
 src/views/Statistic/StatisticLabel.js           |  2 +-
 src/views/Statistic/StatisticValue.js           |  2 +-
 test/specs/addons/Portal/Portal-test.js         | 14 +++++++++++++-
 yarn.lock                                       |  5 +++++
 169 files changed, 194 insertions(+), 177 deletions(-)

diff --git a/.babel-preset.js b/.babel-preset.js
index aac77692ab..4c08fb3284 100644
--- a/.babel-preset.js
+++ b/.babel-preset.js
@@ -33,6 +33,12 @@ const plugins = [
   // modules and avoid modules that prevent tree-shaking:
   // https://github.com/lodash/lodash/issues/4119
   'lodash',
+  [
+    'transform-next-use-client',
+    {
+      customClientImports: ['useAutoControlledValue', 'useEventCallback', 'useMergedRefs'],
+    },
+  ],
   // CJS modules are not tree-shakable in any bundler by default
   // https://github.com/formium/tsdx#using-lodash
   (isESBuild || isUMDBuild) && [
diff --git a/package.json b/package.json
index 04a93087c1..b98818f1a5 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "babel-plugin-filter-imports": "^4.0.0",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-transform-next-use-client": "^1.1.1",
     "babel-plugin-transform-react-handled-props": "^2.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-transform-rename-import": "^2.3.0",
diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 57a360e6f4..c32f9653a0 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { customPropTypes, getUnhandledProps } from '../../lib'
 import Button from '../../elements/Button'
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index fb99c755ae..dc5d2a1269 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   createPaginationItems,
diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
index eeac3f9710..4ad57da0cd 100644
--- a/src/addons/Portal/Portal.js
+++ b/src/addons/Portal/Portal.js
@@ -2,7 +2,7 @@ import EventStack from '@semantic-ui-react/event-stack'
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   customPropTypes,
@@ -25,17 +25,17 @@ const debug = makeDebugger('portal')
 function Portal(props) {
   const {
     children,
-    closeOnDocumentClick,
-    closeOnEscape,
+    closeOnDocumentClick = true,
+    closeOnEscape = true,
     closeOnPortalMouseLeave,
     closeOnTriggerBlur,
     closeOnTriggerClick,
     closeOnTriggerMouseLeave,
-    eventPool,
+    eventPool = 'default',
     mountNode,
     mouseEnterDelay,
     mouseLeaveDelay,
-    openOnTriggerClick,
+    openOnTriggerClick = true,
     openOnTriggerFocus,
     openOnTriggerMouseEnter,
   } = props
@@ -378,13 +378,6 @@ Portal.propTypes = {
   triggerRef: customPropTypes.ref,
 }
 
-Portal.defaultProps = {
-  closeOnDocumentClick: true,
-  closeOnEscape: true,
-  eventPool: 'default',
-  openOnTriggerClick: true,
-}
-
 Portal.Inner = PortalInner
 
 export default Portal
diff --git a/src/addons/Portal/PortalInner.js b/src/addons/Portal/PortalInner.js
index 2c8c5bb929..854818f379 100644
--- a/src/addons/Portal/PortalInner.js
+++ b/src/addons/Portal/PortalInner.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import { createPortal } from 'react-dom'
 
 import { isBrowser, makeDebugger, useEventCallback } from '../../lib'
diff --git a/src/addons/Portal/usePortalElement.js b/src/addons/Portal/usePortalElement.js
index 7c5b8fd491..02c95027b3 100644
--- a/src/addons/Portal/usePortalElement.js
+++ b/src/addons/Portal/usePortalElement.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ReactIs from 'react-is'
 
 import { useMergedRefs } from '../../lib'
diff --git a/src/addons/Portal/utils/useTrigger.js b/src/addons/Portal/utils/useTrigger.js
index 503e231e33..020e4ecddb 100644
--- a/src/addons/Portal/utils/useTrigger.js
+++ b/src/addons/Portal/utils/useTrigger.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { useMergedRefs } from '../../../lib'
 import validateTrigger from './validateTrigger'
diff --git a/src/addons/Portal/utils/validateTrigger.js b/src/addons/Portal/utils/validateTrigger.js
index 5dcd4282c1..0b1cc33b5a 100644
--- a/src/addons/Portal/utils/validateTrigger.js
+++ b/src/addons/Portal/utils/validateTrigger.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import * as ReactIs from 'react-is'
 
 /**
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index cfc216d338..458930366e 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { getUnhandledProps } from '../../lib'
 import Checkbox from '../../modules/Checkbox'
diff --git a/src/addons/Select/Select.js b/src/addons/Select/Select.js
index 184993b72f..abc4ffcac8 100644
--- a/src/addons/Select/Select.js
+++ b/src/addons/Select/Select.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import Dropdown from '../../modules/Dropdown'
 
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index 4c2c1d7aac..eacaab263a 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps, useMergedRefs } from '../../lib'
 
diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js
index 2adb7c22cf..c7637d07f9 100644
--- a/src/addons/TransitionablePortal/TransitionablePortal.js
+++ b/src/addons/TransitionablePortal/TransitionablePortal.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import Portal from '../Portal'
 import Transition from '../../modules/Transition'
diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index c50b438bc4..8ca1fde20f 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getUnhandledProps, getComponentType, SUI } from '../../lib'
 import BreadcrumbDivider from './BreadcrumbDivider'
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index 88190f0333..1d92ffdedc 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index f3d9b19eb3..b48f3eaf49 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 8f869d01f8..8da9b9cd65 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
 import FormButton from './FormButton'
diff --git a/src/collections/Form/FormButton.js b/src/collections/Form/FormButton.js
index 57400fe08b..a171284f30 100644
--- a/src/collections/Form/FormButton.js
+++ b/src/collections/Form/FormButton.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 import Button from '../../elements/Button'
diff --git a/src/collections/Form/FormCheckbox.js b/src/collections/Form/FormCheckbox.js
index 6f0d5fa01d..1ad8672544 100644
--- a/src/collections/Form/FormCheckbox.js
+++ b/src/collections/Form/FormCheckbox.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 import Checkbox from '../../modules/Checkbox'
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index 62f845a31e..1f15044764 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 import Dropdown from '../../modules/Dropdown'
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index b1a2cc3f95..11220ef3c4 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   customPropTypes,
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index 71b3865d14..47ac4f9c1a 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 import Input from '../../elements/Input'
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 7ce0a38f32..8e8dfa01b2 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 import Radio from '../../addons/Radio'
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index 8658048bfd..9bf8c180a5 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 import Select from '../../addons/Select'
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index 4fb4a8e1d6..41e45e726c 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 import TextArea from '../../addons/TextArea'
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index b884dbd1b5..bd912ca028 100644
--- a/src/collections/Grid/Grid.js
+++ b/src/collections/Grid/Grid.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   customPropTypes,
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index 46e9d7f589..248e9c2321 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/src/collections/Grid/GridColumn.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   customPropTypes,
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index 7dae17ab50..bd26b13afd 100644
--- a/src/collections/Grid/GridRow.js
+++ b/src/collections/Grid/GridRow.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   customPropTypes,
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 6c984eb871..149383557d 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Menu/MenuHeader.js b/src/collections/Menu/MenuHeader.js
index 7a4d62fc5d..2016e2460b 100644
--- a/src/collections/Menu/MenuHeader.js
+++ b/src/collections/Menu/MenuHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index c4f6bafe5c..6420541536 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Menu/MenuMenu.js b/src/collections/Menu/MenuMenu.js
index 6b3489041d..7401371fb0 100644
--- a/src/collections/Menu/MenuMenu.js
+++ b/src/collections/Menu/MenuMenu.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index f6e8e3fb1e..c3b940151d 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Message/MessageContent.js b/src/collections/Message/MessageContent.js
index c0266127e2..f0d494420a 100644
--- a/src/collections/Message/MessageContent.js
+++ b/src/collections/Message/MessageContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/collections/Message/MessageHeader.js b/src/collections/Message/MessageHeader.js
index ee1f8a1578..bef78bd340 100644
--- a/src/collections/Message/MessageHeader.js
+++ b/src/collections/Message/MessageHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index fc15f147fb..68bbe97229 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index 8c48ee5f74..0bb70c0307 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index 7ebbbdec43..80d6367920 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index a8a1994872..a9a80c3806 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index 8471f454b7..48cd38d27d 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index 0d2e584de1..b8120e6ac1 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getUnhandledProps } from '../../lib'
 import TableHeader from './TableHeader'
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index bddf5ec557..99a5471ad0 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index aaf4a96656..efc1417829 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getUnhandledProps, useValueAndKey } from '../../lib'
 import TableCell from './TableCell'
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 7efdc2283f..0f0f9baa42 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index e3a704577f..5e54992429 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js
index ebe7d58a46..fd16b6bd9d 100644
--- a/src/elements/Button/ButtonContent.js
+++ b/src/elements/Button/ButtonContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
index 07ad032136..f8b9503232 100644
--- a/src/elements/Button/ButtonGroup.js
+++ b/src/elements/Button/ButtonGroup.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Button/ButtonOr.js b/src/elements/Button/ButtonOr.js
index f4db380360..ae1d68a07d 100644
--- a/src/elements/Button/ButtonOr.js
+++ b/src/elements/Button/ButtonOr.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index 741ca019fd..945f5fcc49 100644
--- a/src/elements/Container/Container.js
+++ b/src/elements/Container/Container.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index a8c4b2e3ac..da8fde6c8a 100644
--- a/src/elements/Divider/Divider.js
+++ b/src/elements/Divider/Divider.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Flag/Flag.js b/src/elements/Flag/Flag.js
index 4d0c7d481a..5fc635a0a0 100644
--- a/src/elements/Flag/Flag.js
+++ b/src/elements/Flag/Flag.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   createShorthandFactory,
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index ad1d099f3b..285d07031a 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Header/HeaderContent.js b/src/elements/Header/HeaderContent.js
index a8d0aef2d1..5c550ac73b 100644
--- a/src/elements/Header/HeaderContent.js
+++ b/src/elements/Header/HeaderContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 9cd4523bfa..16b25b7124 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/src/elements/Header/HeaderSubheader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 45fd57915b..a702cdcb4c 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   createShorthandFactory,
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 55cb7adbf7..f4965cbbd9 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index 7f3df45277..8975f15c05 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Image/ImageGroup.js b/src/elements/Image/ImageGroup.js
index 9b02ba722b..8a2722bc7f 100644
--- a/src/elements/Image/ImageGroup.js
+++ b/src/elements/Image/ImageGroup.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 9cbccb499d..11fa3cc6fe 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index d52c33bf78..736234687a 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Label/LabelDetail.js b/src/elements/Label/LabelDetail.js
index 64a045607f..e68f41b42e 100644
--- a/src/elements/Label/LabelDetail.js
+++ b/src/elements/Label/LabelDetail.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Label/LabelGroup.js b/src/elements/Label/LabelGroup.js
index d790595d92..ff50f7858d 100644
--- a/src/elements/Label/LabelGroup.js
+++ b/src/elements/Label/LabelGroup.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index 29c90ba26c..cb134c41ee 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js
index 61ed2ba01a..dd2192e43d 100644
--- a/src/elements/List/ListContent.js
+++ b/src/elements/List/ListContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/List/ListDescription.js b/src/elements/List/ListDescription.js
index c4c0557e56..44e268af40 100644
--- a/src/elements/List/ListDescription.js
+++ b/src/elements/List/ListDescription.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/List/ListHeader.js b/src/elements/List/ListHeader.js
index d67ae15b58..505dd8ddd1 100644
--- a/src/elements/List/ListHeader.js
+++ b/src/elements/List/ListHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/List/ListIcon.js b/src/elements/List/ListIcon.js
index 64d91edaac..bfa3697cab 100644
--- a/src/elements/List/ListIcon.js
+++ b/src/elements/List/ListIcon.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { createShorthandFactory, getUnhandledProps, SUI, useVerticalAlignProp } from '../../lib'
 import Icon from '../Icon/Icon'
diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js
index 9e7e3244b2..9723d304a5 100644
--- a/src/elements/List/ListList.js
+++ b/src/elements/List/ListList.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Loader/Loader.js b/src/elements/Loader/Loader.js
index 87e1a08491..4246854cc1 100644
--- a/src/elements/Loader/Loader.js
+++ b/src/elements/Loader/Loader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Placeholder/Placeholder.js b/src/elements/Placeholder/Placeholder.js
index d3df48b785..5b75e1e585 100644
--- a/src/elements/Placeholder/Placeholder.js
+++ b/src/elements/Placeholder/Placeholder.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Placeholder/PlaceholderHeader.js b/src/elements/Placeholder/PlaceholderHeader.js
index 80fc8f6990..49039714fc 100644
--- a/src/elements/Placeholder/PlaceholderHeader.js
+++ b/src/elements/Placeholder/PlaceholderHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js
index 7413d4ee55..e61f7c6437 100644
--- a/src/elements/Placeholder/PlaceholderImage.js
+++ b/src/elements/Placeholder/PlaceholderImage.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { customPropTypes, getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
diff --git a/src/elements/Placeholder/PlaceholderLine.js b/src/elements/Placeholder/PlaceholderLine.js
index 7f8c153614..883de8db8d 100644
--- a/src/elements/Placeholder/PlaceholderLine.js
+++ b/src/elements/Placeholder/PlaceholderLine.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/elements/Placeholder/PlaceholderParagraph.js b/src/elements/Placeholder/PlaceholderParagraph.js
index 208a6baa68..bcf5c6773a 100644
--- a/src/elements/Placeholder/PlaceholderParagraph.js
+++ b/src/elements/Placeholder/PlaceholderParagraph.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index 6904fa8407..641d56932a 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Reveal/Reveal.js b/src/elements/Reveal/Reveal.js
index 14fe502083..6010e1ada7 100644
--- a/src/elements/Reveal/Reveal.js
+++ b/src/elements/Reveal/Reveal.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Reveal/RevealContent.js b/src/elements/Reveal/RevealContent.js
index 0caac64f9b..96c07abd94 100644
--- a/src/elements/Reveal/RevealContent.js
+++ b/src/elements/Reveal/RevealContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index d0a76652dd..854b7f00dc 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js
index 8efff38bbc..bc7f871370 100644
--- a/src/elements/Segment/SegmentGroup.js
+++ b/src/elements/Segment/SegmentGroup.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Segment/SegmentInline.js b/src/elements/Segment/SegmentInline.js
index 4b524e3280..78f7b394d9 100644
--- a/src/elements/Segment/SegmentInline.js
+++ b/src/elements/Segment/SegmentInline.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index 85e72bfd38..4cc17ed1c2 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js
index 55968739c4..5c0a3b547b 100644
--- a/src/elements/Step/StepContent.js
+++ b/src/elements/Step/StepContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Step/StepDescription.js b/src/elements/Step/StepDescription.js
index 2d0e6224e2..eaf4866c55 100644
--- a/src/elements/Step/StepDescription.js
+++ b/src/elements/Step/StepDescription.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js
index 3cce7faf0a..4247bb00c5 100644
--- a/src/elements/Step/StepGroup.js
+++ b/src/elements/Step/StepGroup.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/elements/Step/StepTitle.js b/src/elements/Step/StepTitle.js
index 7a27872b8d..69321878a4 100644
--- a/src/elements/Step/StepTitle.js
+++ b/src/elements/Step/StepTitle.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/lib/ModernAutoControlledComponent.js b/src/lib/ModernAutoControlledComponent.js
index 90fd7c4f6a..9aeec29e2b 100644
--- a/src/lib/ModernAutoControlledComponent.js
+++ b/src/lib/ModernAutoControlledComponent.js
@@ -24,7 +24,7 @@
  *    hoisted and exposed by the HOC.
  */
 import _ from 'lodash'
-import React from 'react'
+import * as React from 'react'
 
 const getDefaultPropName = (prop) => `default${prop[0].toUpperCase() + prop.slice(1)}`
 
diff --git a/src/lib/hooks/useClassNamesOnNode.js b/src/lib/hooks/useClassNamesOnNode.js
index 479142ee91..224a501ced 100644
--- a/src/lib/hooks/useClassNamesOnNode.js
+++ b/src/lib/hooks/useClassNamesOnNode.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import isRefObject from '../isRefObject'
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
diff --git a/src/lib/hooks/useIsomorphicLayoutEffect.js b/src/lib/hooks/useIsomorphicLayoutEffect.js
index 4b80dac212..9f21adc7d6 100644
--- a/src/lib/hooks/useIsomorphicLayoutEffect.js
+++ b/src/lib/hooks/useIsomorphicLayoutEffect.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import isBrowser from '../isBrowser'
 
 // useLayoutEffect() produces a warning with SSR rendering
diff --git a/src/modules/Accordion/Accordion.js b/src/modules/Accordion/Accordion.js
index 4d76ecc440..ab6bdd220c 100644
--- a/src/modules/Accordion/Accordion.js
+++ b/src/modules/Accordion/Accordion.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getUnhandledProps, useKeyOnly } from '../../lib'
 import AccordionAccordion from './AccordionAccordion'
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index f2ba942e7f..f99285ee5d 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Accordion/AccordionContent.js b/src/modules/Accordion/AccordionContent.js
index 3fae3cc6f3..9ab53498f6 100644
--- a/src/modules/Accordion/AccordionContent.js
+++ b/src/modules/Accordion/AccordionContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index 1432a15d61..34405b861e 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index b2a80d0360..d183f01feb 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   createHTMLLabel,
diff --git a/src/modules/Dimmer/Dimmer.js b/src/modules/Dimmer/Dimmer.js
index 0d2b55d079..307ef87da2 100644
--- a/src/modules/Dimmer/Dimmer.js
+++ b/src/modules/Dimmer/Dimmer.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { createShorthandFactory, getUnhandledProps, isBrowser } from '../../lib'
 import Portal from '../../addons/Portal'
diff --git a/src/modules/Dimmer/DimmerDimmable.js b/src/modules/Dimmer/DimmerDimmable.js
index 2b3cfbb11b..c5640daa94 100644
--- a/src/modules/Dimmer/DimmerDimmable.js
+++ b/src/modules/Dimmer/DimmerDimmable.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index aeb9d09aad..636a0370d6 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Dropdown/DropdownDivider.js b/src/modules/Dropdown/DropdownDivider.js
index 4ffa5a3d82..4c88ffc608 100644
--- a/src/modules/Dropdown/DropdownDivider.js
+++ b/src/modules/Dropdown/DropdownDivider.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/modules/Dropdown/DropdownHeader.js b/src/modules/Dropdown/DropdownHeader.js
index c91bf12c2e..36e8e974d0 100644
--- a/src/modules/Dropdown/DropdownHeader.js
+++ b/src/modules/Dropdown/DropdownHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 5722d0b767..a2e85e900f 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index e77535e2c8..d894a24d75 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 78bb7c93c7..9917e81a53 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { createShorthandFactory, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/modules/Dropdown/DropdownText.js b/src/modules/Dropdown/DropdownText.js
index 17e29bc4de..ff0ebe8e00 100644
--- a/src/modules/Dropdown/DropdownText.js
+++ b/src/modules/Dropdown/DropdownText.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Dropdown/utils/getMenuOptions.js b/src/modules/Dropdown/utils/getMenuOptions.js
index 1b3751df3b..6b69107c73 100644
--- a/src/modules/Dropdown/utils/getMenuOptions.js
+++ b/src/modules/Dropdown/utils/getMenuOptions.js
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import React from 'react'
+import * as React from 'react'
 
 // There are times when we need to calculate the options based on a value
 // that hasn't yet been persisted to state.
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index ebcaaa7c10..2854feebc9 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index dbd1b4679e..eb89025712 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import shallowEqual from 'shallowequal'
 
 import {
diff --git a/src/modules/Modal/ModalActions.js b/src/modules/Modal/ModalActions.js
index b401e6aa73..583bcb7091 100644
--- a/src/modules/Modal/ModalActions.js
+++ b/src/modules/Modal/ModalActions.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index 4f04805dae..b8f50b8140 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Modal/ModalDescription.js b/src/modules/Modal/ModalDescription.js
index 691f1d56e8..0f0bc2d7a6 100644
--- a/src/modules/Modal/ModalDescription.js
+++ b/src/modules/Modal/ModalDescription.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/modules/Modal/ModalDimmer.js b/src/modules/Modal/ModalDimmer.js
index bad1132c16..aa8473316c 100644
--- a/src/modules/Modal/ModalDimmer.js
+++ b/src/modules/Modal/ModalDimmer.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Modal/ModalHeader.js b/src/modules/Modal/ModalHeader.js
index 6e0822f247..e9daf026be 100644
--- a/src/modules/Modal/ModalHeader.js
+++ b/src/modules/Modal/ModalHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 1237cb0d07..2c3c9ba4f2 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -2,7 +2,7 @@ import EventStack from '@semantic-ui-react/event-stack'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import { Popper } from 'react-popper'
 import shallowEqual from 'shallowequal'
 
diff --git a/src/modules/Popup/PopupContent.js b/src/modules/Popup/PopupContent.js
index 167cef2c44..f507e14c13 100644
--- a/src/modules/Popup/PopupContent.js
+++ b/src/modules/Popup/PopupContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Popup/PopupHeader.js b/src/modules/Popup/PopupHeader.js
index 8eff4c7fda..8847d01aec 100644
--- a/src/modules/Popup/PopupHeader.js
+++ b/src/modules/Popup/PopupHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 7c20634714..9eae360699 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index c41a299797..0f1274dbea 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   getComponentType,
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 1d87534b71..e21cb050fa 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 145cc8f22a..5e5e0ed5b8 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import shallowEqual from 'shallowequal'
 
 import {
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 218da2083f..6f31c3c6b6 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Search/SearchCategoryLayout.js b/src/modules/Search/SearchCategoryLayout.js
index b83dee804c..83c8d3c6e0 100644
--- a/src/modules/Search/SearchCategoryLayout.js
+++ b/src/modules/Search/SearchCategoryLayout.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 function SearchCategoryLayout(props) {
   const { categoryContent, resultsContent } = props
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index 7bba25b50a..fe486c6535 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   createHTMLImage,
diff --git a/src/modules/Search/SearchResults.js b/src/modules/Search/SearchResults.js
index 5c44b66e31..67d31f7c83 100644
--- a/src/modules/Search/SearchResults.js
+++ b/src/modules/Search/SearchResults.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 0e6c470bdc..0489850b56 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -2,7 +2,7 @@ import { EventListener, documentRef } from '@fluentui/react-component-event-list
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Sidebar/SidebarPushable.js b/src/modules/Sidebar/SidebarPushable.js
index b8f5dd8b0c..48068f797b 100644
--- a/src/modules/Sidebar/SidebarPushable.js
+++ b/src/modules/Sidebar/SidebarPushable.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/modules/Sidebar/SidebarPusher.js b/src/modules/Sidebar/SidebarPusher.js
index ffc791dee5..7519c0b8ec 100644
--- a/src/modules/Sidebar/SidebarPusher.js
+++ b/src/modules/Sidebar/SidebarPusher.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index 3a30afa4c4..5fc0709678 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   customPropTypes,
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index 03ef505cea..cbbac2bf46 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   customPropTypes,
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 0e1bdbad45..c74c55be7d 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 4708820aba..f6e128cb19 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   getComponentType,
diff --git a/src/modules/Transition/utils/wrapChild.js b/src/modules/Transition/utils/wrapChild.js
index c07eacb975..0ec23022dd 100644
--- a/src/modules/Transition/utils/wrapChild.js
+++ b/src/modules/Transition/utils/wrapChild.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Transition from '../Transition'
 
 /**
diff --git a/src/views/Advertisement/Advertisement.js b/src/views/Advertisement/Advertisement.js
index 30c35845d5..c018e09a41 100644
--- a/src/views/Advertisement/Advertisement.js
+++ b/src/views/Advertisement/Advertisement.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index f2763c3285..aa6c54a202 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js
index ecb0a3afe6..4c52f453c2 100644
--- a/src/views/Card/CardContent.js
+++ b/src/views/Card/CardContent.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Card/CardDescription.js b/src/views/Card/CardDescription.js
index 0de11e2a4b..3a93a180b4 100644
--- a/src/views/Card/CardDescription.js
+++ b/src/views/Card/CardDescription.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js
index 7263a66e8c..54e8983513 100644
--- a/src/views/Card/CardGroup.js
+++ b/src/views/Card/CardGroup.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Card/CardHeader.js b/src/views/Card/CardHeader.js
index bf41e51cfe..2cb948b7c7 100644
--- a/src/views/Card/CardHeader.js
+++ b/src/views/Card/CardHeader.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Card/CardMeta.js b/src/views/Card/CardMeta.js
index d45b075fac..8e3f2b4d7b 100644
--- a/src/views/Card/CardMeta.js
+++ b/src/views/Card/CardMeta.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js
index 59db4e52df..fc44689df4 100644
--- a/src/views/Comment/Comment.js
+++ b/src/views/Comment/Comment.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index 82eae2cc95..ee67edb41b 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Comment/CommentActions.js b/src/views/Comment/CommentActions.js
index c1cca85fc9..0899b8be49 100644
--- a/src/views/Comment/CommentActions.js
+++ b/src/views/Comment/CommentActions.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/views/Comment/CommentAuthor.js b/src/views/Comment/CommentAuthor.js
index 01b3747c19..c351abe16c 100644
--- a/src/views/Comment/CommentAuthor.js
+++ b/src/views/Comment/CommentAuthor.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/views/Comment/CommentAvatar.js b/src/views/Comment/CommentAvatar.js
index dc5aee78d1..7e6e1b854f 100644
--- a/src/views/Comment/CommentAvatar.js
+++ b/src/views/Comment/CommentAvatar.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   createHTMLImage,
diff --git a/src/views/Comment/CommentContent.js b/src/views/Comment/CommentContent.js
index df72aeb471..533061ce6f 100644
--- a/src/views/Comment/CommentContent.js
+++ b/src/views/Comment/CommentContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
index 2eea6998e6..0e8c4e2a7b 100644
--- a/src/views/Comment/CommentGroup.js
+++ b/src/views/Comment/CommentGroup.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Comment/CommentMetadata.js b/src/views/Comment/CommentMetadata.js
index 92fee6d069..651d80c648 100644
--- a/src/views/Comment/CommentMetadata.js
+++ b/src/views/Comment/CommentMetadata.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/views/Comment/CommentText.js b/src/views/Comment/CommentText.js
index 17f2bbd895..dc579269ed 100644
--- a/src/views/Comment/CommentText.js
+++ b/src/views/Comment/CommentText.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/views/Feed/Feed.js b/src/views/Feed/Feed.js
index c3a35703b1..15efd4cb03 100644
--- a/src/views/Feed/Feed.js
+++ b/src/views/Feed/Feed.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 import FeedContent from './FeedContent'
diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 8874ae80a8..d675e4c26d 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Feed/FeedDate.js b/src/views/Feed/FeedDate.js
index e4a836d355..ae5ec5064d 100644
--- a/src/views/Feed/FeedDate.js
+++ b/src/views/Feed/FeedDate.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index e4f971bddc..948db490aa 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { createShorthand, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import FeedContent from './FeedContent'
diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js
index 50f51a8ce8..6ea83d660c 100644
--- a/src/views/Feed/FeedExtra.js
+++ b/src/views/Feed/FeedExtra.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js
index 56fd9acd6b..0ff279da89 100644
--- a/src/views/Feed/FeedLabel.js
+++ b/src/views/Feed/FeedLabel.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index b5e4c8bf2d..72ca8e31d0 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import Icon from '../../elements/Icon'
diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js
index b0c5d0f222..b658be709e 100644
--- a/src/views/Feed/FeedMeta.js
+++ b/src/views/Feed/FeedMeta.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index 2be1f0c4b3..739e607366 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index 10866e8720..efe58fb010 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index 41f37257a6..5683de5aa8 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import ItemContent from './ItemContent'
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index add8a28dd4..75d4963727 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
index 8e5082c97b..372288ef89 100644
--- a/src/views/Item/ItemDescription.js
+++ b/src/views/Item/ItemDescription.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
index 3402f02f3a..abf99828ae 100644
--- a/src/views/Item/ItemExtra.js
+++ b/src/views/Item/ItemExtra.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index 33269ecce3..dc0a28c164 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
index 4a841b8a50..8cb777a8ba 100644
--- a/src/views/Item/ItemHeader.js
+++ b/src/views/Item/ItemHeader.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Item/ItemImage.js b/src/views/Item/ItemImage.js
index 55854ec66e..f3fba7b5a2 100644
--- a/src/views/Item/ItemImage.js
+++ b/src/views/Item/ItemImage.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { createShorthandFactory, getUnhandledProps } from '../../lib'
 import Image from '../../elements/Image'
diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
index 73d347d9d8..349605e9e9 100644
--- a/src/views/Item/ItemMeta.js
+++ b/src/views/Item/ItemMeta.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index 05b910d017..698904ec2e 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index c85df42892..eea559981e 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index b1134cd185..297ea7a104 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 2ce9eda25a..7654c5a503 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -1,6 +1,6 @@
 import cx from 'clsx'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import {
   childrenUtils,
diff --git a/test/specs/addons/Portal/Portal-test.js b/test/specs/addons/Portal/Portal-test.js
index 099ce9d897..c79c139fd2 100644
--- a/test/specs/addons/Portal/Portal-test.js
+++ b/test/specs/addons/Portal/Portal-test.js
@@ -281,7 +281,19 @@ describe('Portal', () => {
 
   describe('openOnTriggerClick', () => {
     it('defaults to true', () => {
-      Portal.defaultProps.openOnTriggerClick.should.equal(true)
+      const onTriggerClick = sandbox.spy()
+      const trigger = <button onClick={onTriggerClick}>button</button>
+
+      wrapperMount(
+        <Portal trigger={trigger}>
+          <p />
+        </Portal>,
+      )
+      wrapper.should.not.have.descendants(PortalInner)
+
+      wrapper.find('button').simulate('click')
+      wrapper.should.have.descendants(PortalInner)
+      onTriggerClick.should.have.been.calledOnce()
     })
 
     it('does not open the portal on trigger click when false', () => {
diff --git a/yarn.lock b/yarn.lock
index 948677089c..d0fdd03b41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3449,6 +3449,11 @@ babel-plugin-transform-function-bind@^6.22.0:
     babel-plugin-syntax-function-bind "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-next-use-client@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-next-use-client/-/babel-plugin-transform-next-use-client-1.1.1.tgz#648f3b3de16a09b490f5d0bc34143516ef91a4df"
+  integrity sha512-qqyurXN5ZWP7kqmgzzXaEgF0fCi8d72tE+wCQwSCrjfN+LC0fI1+ejhNE+DtVECY1EvYkUoO0tcr9izwC9xexg==
+
 babel-plugin-transform-object-rest-spread@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"

From cdc44ef3c0dd2963ae59f00027257056acbb5021 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sat, 30 Dec 2023 15:44:52 +0100
Subject: [PATCH 15/30] chore: fix lint warnings (#4455)

---
 .eslintrc                                      | 2 +-
 src/elements/Flag/Flag.d.ts                    | 1 -
 src/elements/Icon/Icon.d.ts                    | 2 --
 src/elements/Image/Image.d.ts                  | 1 -
 src/elements/Placeholder/PlaceholderImage.d.ts | 1 -
 src/elements/Placeholder/PlaceholderLine.d.ts  | 1 -
 src/elements/Reveal/Reveal.d.ts                | 4 +++-
 src/modules/Accordion/Accordion.d.ts           | 2 --
 src/modules/Popup/lib/createReferenceProxy.js  | 2 +-
 src/modules/Tab/Tab.d.ts                       | 2 +-
 10 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 151942c8b8..cae9985dda 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,7 +9,7 @@
     "newline-per-chained-call": "off",
     "class-methods-use-this": "off",
     "consistent-return": "off",
-    "complexity": ["warn", 10],
+    "complexity": "off",
     "global-require": "off",
     "func-names": "off",
     "lines-between-class-members": "off",
diff --git a/src/elements/Flag/Flag.d.ts b/src/elements/Flag/Flag.d.ts
index a29495aab8..6d5136fadd 100644
--- a/src/elements/Flag/Flag.d.ts
+++ b/src/elements/Flag/Flag.d.ts
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { ForwardRefComponent } from '../../generic'
 
 export type FlagNameValues =
diff --git a/src/elements/Icon/Icon.d.ts b/src/elements/Icon/Icon.d.ts
index 212516fdb4..18881a1937 100644
--- a/src/elements/Icon/Icon.d.ts
+++ b/src/elements/Icon/Icon.d.ts
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { ForwardRefComponent, SemanticCOLORS, SemanticICONS } from '../../generic'
 import IconGroup from './IconGroup'
 
diff --git a/src/elements/Image/Image.d.ts b/src/elements/Image/Image.d.ts
index 66974122e4..350c381cd4 100644
--- a/src/elements/Image/Image.d.ts
+++ b/src/elements/Image/Image.d.ts
@@ -7,7 +7,6 @@ import {
   SemanticShorthandItem,
   SemanticSIZES,
   SemanticVERTICALALIGNMENTS,
-  SemanticWIDTHS,
 } from '../../generic'
 import { DimmerProps } from '../../modules/Dimmer'
 import { LabelProps } from '../Label'
diff --git a/src/elements/Placeholder/PlaceholderImage.d.ts b/src/elements/Placeholder/PlaceholderImage.d.ts
index 97c39c10ca..5ddc98a7ac 100644
--- a/src/elements/Placeholder/PlaceholderImage.d.ts
+++ b/src/elements/Placeholder/PlaceholderImage.d.ts
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { ForwardRefComponent } from '../../generic'
 
 export interface PlaceholderImageProps extends StrictPlaceholderImageProps {
diff --git a/src/elements/Placeholder/PlaceholderLine.d.ts b/src/elements/Placeholder/PlaceholderLine.d.ts
index 5d0737e465..6317e0e3b9 100644
--- a/src/elements/Placeholder/PlaceholderLine.d.ts
+++ b/src/elements/Placeholder/PlaceholderLine.d.ts
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { ForwardRefComponent } from '../../generic'
 
 export interface PlaceholderLineProps extends StrictPlaceholderLineProps {
diff --git a/src/elements/Reveal/Reveal.d.ts b/src/elements/Reveal/Reveal.d.ts
index bc1e5af456..5ae30815cb 100644
--- a/src/elements/Reveal/Reveal.d.ts
+++ b/src/elements/Reveal/Reveal.d.ts
@@ -41,6 +41,8 @@ export interface StrictRevealProps {
   instant?: boolean
 }
 
-declare const Reveal: ForwardRefComponent<RevealProps, HTMLDivElement>
+declare const Reveal: ForwardRefComponent<RevealProps, HTMLDivElement> & {
+  Content: typeof RevealContent
+}
 
 export default Reveal
diff --git a/src/modules/Accordion/Accordion.d.ts b/src/modules/Accordion/Accordion.d.ts
index 458c7870ab..e9b7a6bec1 100644
--- a/src/modules/Accordion/Accordion.d.ts
+++ b/src/modules/Accordion/Accordion.d.ts
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import AccordionAccordion, { StrictAccordionAccordionProps } from './AccordionAccordion'
 import AccordionContent from './AccordionContent'
 import AccordionPanel from './AccordionPanel'
diff --git a/src/modules/Popup/lib/createReferenceProxy.js b/src/modules/Popup/lib/createReferenceProxy.js
index 0aa0e5c7d3..8da1b109c0 100644
--- a/src/modules/Popup/lib/createReferenceProxy.js
+++ b/src/modules/Popup/lib/createReferenceProxy.js
@@ -23,7 +23,7 @@ class ReferenceProxy {
   }
 
   get contextElement() {
-    return this.ref.current;
+    return this.ref.current
   }
 }
 
diff --git a/src/modules/Tab/Tab.d.ts b/src/modules/Tab/Tab.d.ts
index 844a2dbef1..7d71cb55fa 100644
--- a/src/modules/Tab/Tab.d.ts
+++ b/src/modules/Tab/Tab.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
-import TabPane, { TabPaneProps } from './TabPane'
+import { TabPaneProps } from './TabPane'
 
 export interface TabProps extends StrictTabProps {
   [key: string]: any

From 6c506b25c27674213887fd493d18a693bca9f866 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sat, 30 Dec 2023 15:52:02 +0100
Subject: [PATCH 16/30] chore: remove "dot-syntax" from examples (#4456)

---
 .../Usage/PaginationExampleControlled.js      |  10 +-
 .../Usage/PaginationExampleOptions.js         |  45 +++--
 .../Portal/Types/PortalExampleControlled.js   |  13 +-
 .../Portal/Types/PortalExamplePortal.js       |  23 ++-
 .../Radio/States/RadioExampleDisabled.js      |  10 +-
 .../Radio/Types/RadioExampleRadioGroup.js     |  14 +-
 .../examples/addons/TextArea/Usage/index.js   |   7 +-
 .../TransitionablePortalExampleTransition.js  |  14 +-
 .../Content/BreadcrumbExampleDivider.js       |  16 +-
 .../Content/BreadcrumbExampleIconDivider.js   |  16 +-
 .../Content/BreadcrumbExampleLink.js          |  18 +-
 .../Content/BreadcrumbExampleSection.js       |  12 +-
 .../Breadcrumb/Types/BreadcrumbExample.js     |  16 +-
 .../Variations/BreadcrumbExampleSize.js       |  17 +-
 .../Form/Content/FormExampleField.js          |   6 +-
 .../FieldVariations/FormExampleInlineField.js |   6 +-
 .../FormExampleRequiredField.js               |   6 +-
 .../FormExampleRequiredFieldShorthand.js      |   8 +-
 .../FieldVariations/FormExampleWidthField.js  |  32 ++--
 .../collections/Form/FieldVariations/index.js |   2 +-
 .../FormExampleEvenlyDividedGroup.js          |  18 +-
 .../FormExampleInlineGroupedFields.js         |  18 +-
 .../FormExampleUnstackableGroup.js            |  26 ++-
 .../collections/Form/GroupVariations/index.js |   4 +-
 .../Form/Shorthand/FormExampleFieldControl.js |  28 +--
 .../Shorthand/FormExampleFieldControlHTML.js  |  34 ++--
 .../Shorthand/FormExampleFieldControlId.js    |  26 ++-
 .../Shorthand/FormExampleFieldLabelElement.js |   4 +-
 .../Shorthand/FormExampleFieldLabelObject.js  |   4 +-
 .../FormExampleSubcomponentControl.js         |  37 ++--
 .../Shorthand/FormExampleSubcomponentId.js    |  10 +-
 .../collections/Form/Shorthand/index.js       |  20 +-
 .../Form/States/FormExampleError.js           |   4 +-
 .../Form/States/FormExampleFieldDisabled.js   |  10 +-
 .../Form/States/FormExampleFieldError.js      |  20 +-
 .../Form/States/FormExampleFieldErrorLabel.js |   8 +-
 .../Form/States/FormExampleFieldReadOnly.js   |  10 +-
 .../Form/States/FormExampleLoading.js         |   4 +-
 .../Form/States/FormExampleSuccess.js         |   4 +-
 .../Form/States/FormExampleWarning.js         |   4 +-
 .../collections/Form/Types/FormExampleForm.js |  14 +-
 .../examples/collections/Form/Types/index.js  |   6 +-
 .../Form/Usage/FormExampleCaptureValues.js    |  12 +-
 .../Form/Usage/FormExampleClearOnSubmit.js    |  12 +-
 .../examples/collections/Form/Usage/index.js  |   8 +-
 .../Form/Variations/FormExampleInverted.js    |  19 +-
 .../Form/Variations/FormExampleSize.js        |  10 +-
 .../Form/Variations/FormExampleUnstackable.js |  18 +-
 .../Grid/Content/GridExampleColumns.js        |  26 +--
 .../Grid/Content/GridExampleRows.js           |  30 +--
 .../GridExampleContainer.js                   |  14 +-
 .../GridExampleDoubling.js                    |  22 +--
 .../ResponsiveVariations/GridExampleOnly.js   |  94 +++++-----
 .../GridExampleOnlyMultiple.js                |  38 ++--
 .../GridExampleResponsiveWidth.js             |  38 ++--
 .../GridExampleReversedComputer.js            |  26 +--
 .../GridExampleReversedComputerVertically.js  |  26 +--
 .../GridExampleReversedMobile.js              |  10 +-
 .../GridExampleReversedMobileVertically.js    |  26 +--
 .../GridExampleReversedMultiple.js            |  12 +-
 .../GridExampleReversedTablet.js              |  10 +-
 .../GridExampleReversedTabletVertically.js    |  26 +--
 .../GridExampleStackable.js                   |  10 +-
 .../Grid/Types/GridExampleCelled.js           |  30 +--
 .../Grid/Types/GridExampleCelledInternally.js |  34 ++--
 .../Grid/Types/GridExampleDividedNumber.js    |  34 ++--
 .../Grid/Types/GridExampleDividedPhrase.js    |  34 ++--
 .../Types/GridExampleDividedVertically.js     |  30 +--
 .../collections/Grid/Types/GridExampleGrid.js |   6 +-
 .../Grid/Variations/GridExampleCentered.js    |  42 ++---
 .../Variations/GridExampleColoredColumn.js    |   6 +-
 .../Grid/Variations/GridExampleColoredRow.js  |   8 +-
 .../Grid/Variations/GridExampleColumnCount.js |  62 +++----
 .../Grid/Variations/GridExampleColumnWidth.js |  14 +-
 .../Variations/GridExampleEqualWidthColumn.js |  14 +-
 .../Variations/GridExampleEqualWidthRow.js    |  50 ++---
 .../Grid/Variations/GridExampleFloated.js     |  10 +-
 .../Grid/Variations/GridExampleInverted.js    |  18 +-
 .../Grid/Variations/GridExamplePadded.js      |  10 +-
 .../GridExamplePaddedHorizontally.js          |  10 +-
 .../Variations/GridExamplePaddedVertically.js |  10 +-
 .../Grid/Variations/GridExampleRelaxed.js     |  18 +-
 .../Grid/Variations/GridExampleRelaxedVery.js |  18 +-
 .../Grid/Variations/GridExampleStretched.js   |  18 +-
 .../Variations/GridExampleStretchedEqual.js   |  34 ++--
 .../GridExampleTextAlignmentCenter.js         |  28 +--
 .../GridExampleTextAlignmentMixed.js          |  36 ++--
 .../GridExampleTextAlignmentRight.js          |  28 +--
 .../GridExampleVerticalAlignment.js           |  18 +-
 .../GridExampleVerticalAlignmentRow.js        |  50 ++---
 .../Menu/Content/MenuExampleButtons.js        |  10 +-
 .../Menu/Content/MenuExampleDropdownItem.js   |  12 +-
 .../Menu/Content/MenuExampleHeader.js         |  10 +-
 .../Menu/Content/MenuExampleHeaderVertical.js |  64 +++----
 .../Menu/Content/MenuExampleInputs.js         |  10 +-
 .../Menu/Content/MenuExampleLinkItem.js       |  10 +-
 .../Menu/Content/MenuExampleMenus.js          |  22 +--
 .../Menu/Content/MenuExampleSubMenu.js        |  53 +++---
 .../Menu/Content/MenuExampleText.js           |  14 +-
 .../Menu/States/MenuExampleActive.js          |   4 +-
 .../Menu/States/MenuExampleDisabled.js        |   4 +-
 .../Menu/States/MenuExampleHover.js           |   6 +-
 .../Menu/Types/MenuExampleAttached.js         |  44 +++--
 .../Menu/Types/MenuExampleBasic.js            |  14 +-
 .../Menu/Types/MenuExampleContentProp.js      |   8 +-
 .../Menu/Types/MenuExampleNameProp.js         |   8 +-
 .../Menu/Types/MenuExamplePagination.js       |  12 +-
 .../Menu/Types/MenuExamplePointing.js         |  16 +-
 .../Menu/Types/MenuExampleSecondary.js        |  18 +-
 .../Types/MenuExampleSecondaryPointing.js     |  14 +-
 .../Menu/Types/MenuExampleTabular.js          |   6 +-
 .../Menu/Types/MenuExampleTabularOnBottom.js  |  22 +--
 .../Menu/Types/MenuExampleTabularOnLeft.js    |  18 +-
 .../Menu/Types/MenuExampleTabularOnRight.js   |  18 +-
 .../Menu/Types/MenuExampleTabularOnTop.js     |  14 +-
 .../collections/Menu/Types/MenuExampleText.js |  10 +-
 .../Menu/Types/MenuExampleVertical.js         |  18 +-
 .../Menu/Types/MenuExampleVerticalDropdown.js |  25 ++-
 .../Menu/Types/MenuExampleVerticalPointing.js |   8 +-
 .../Types/MenuExampleVerticalSecondary.js     |   8 +-
 .../Menu/Types/MenuExampleVerticalText.js     |  10 +-
 .../Variations/MenuExampleAttachedTabular.js  |   6 +-
 .../MenuExampleAttachedToSegment.js           |  18 +-
 .../Menu/Variations/MenuExampleBorderless.js  |  14 +-
 .../Menu/Variations/MenuExampleColored.js     |   6 +-
 .../Variations/MenuExampleColoredInverted.js  |   6 +-
 .../MenuExampleColoredInvertedMenus.js        |   8 +-
 .../Variations/MenuExampleColoredMenus.js     |   8 +-
 .../Menu/Variations/MenuExampleCompact.js     |  14 +-
 .../Variations/MenuExampleCompactVertical.js  |  14 +-
 .../Variations/MenuExampleEvenlyDivided.js    |   8 +-
 .../Menu/Variations/MenuExampleFitted.js      |  14 +-
 .../Menu/Variations/MenuExampleFluid.js       |   8 +-
 .../Menu/Variations/MenuExampleIcons.js       |  14 +-
 .../Variations/MenuExampleIconsVertical.js    |  14 +-
 .../Menu/Variations/MenuExampleInverted.js    |   8 +-
 .../Variations/MenuExampleInvertedPointing.js |   8 +-
 .../MenuExampleInvertedSecondary.js           |   8 +-
 .../Variations/MenuExampleInvertedSegment.js  |   8 +-
 .../Variations/MenuExampleInvertedVertical.js |   8 +-
 .../Variations/MenuExampleLabeledIcons.js     |  14 +-
 .../MenuExampleLabeledIconsVertical.js        |  14 +-
 .../Menu/Variations/MenuExampleSizeHuge.js    |  32 ++--
 .../Menu/Variations/MenuExampleSizeLarge.js   |  32 ++--
 .../Menu/Variations/MenuExampleSizeMassive.js |  32 ++--
 .../Menu/Variations/MenuExampleSizeMini.js    |  32 ++--
 .../Menu/Variations/MenuExampleSizeSmall.js   |  32 ++--
 .../Menu/Variations/MenuExampleSizeTiny.js    |  32 ++--
 .../MenuExampleSizeVerticalLarge.js           |  18 +-
 .../MenuExampleSizeVerticalMassive.js         |  18 +-
 .../Variations/MenuExampleSizeVerticalMini.js |  18 +-
 .../MenuExampleSizeVerticalSmall.js           |  18 +-
 .../Menu/Variations/MenuExampleStackable.js   |  20 +-
 .../Variations/MenuExampleVerticalFitted.js   |  14 +-
 .../Message/Types/MessageExampleIcon.js       |   8 +-
 .../Message/Types/MessageExampleList.js       |  17 +-
 .../Types/MessageExampleListItemsProp.js      |   6 +-
 .../Message/Types/MessageExampleMessage.js    |   4 +-
 .../Variations/MessageExampleAttached.js      |  24 ++-
 .../Message/Variations/MessageExampleInfo.js  |   4 +-
 .../Variations/MessageExampleNegative.js      |   4 +-
 .../Variations/MessageExamplePositive.js      |   4 +-
 .../Variations/MessageExampleWarning.js       |   4 +-
 .../Table/States/TableExampleActive.js        |  67 ++++---
 .../Table/States/TableExampleDisabled.js      |  67 ++++---
 .../Table/States/TableExampleError.js         |  70 +++----
 .../States/TableExamplePositiveNegative.js    |  72 ++++----
 .../Table/States/TableExampleWarning.js       |  72 ++++----
 .../Table/Types/TableExampleApprove.js        |  97 +++++-----
 .../Table/Types/TableExampleCelledStriped.js  |  86 +++++----
 .../Table/Types/TableExampleCollapsing.js     |  93 +++++-----
 .../Table/Types/TableExampleDefinition.js     |  47 +++--
 .../Table/Types/TableExamplePadded.js         |  77 ++++----
 .../Table/Types/TableExamplePagination.js     |  92 ++++++----
 .../Table/Types/TableExampleStructured.js     | 108 ++++++-----
 .../Table/Variations/TableExampleAttached.js  |  37 ++--
 .../Table/Variations/TableExampleBasic.js     |  57 +++---
 .../Table/Variations/TableExampleCelled.js    |  72 ++++----
 .../Variations/TableExampleCollapsing.js      |  72 ++++----
 .../Variations/TableExampleCollapsingCell.js  |  42 ++---
 .../Table/Variations/TableExampleColors.js    |  47 +++--
 .../Variations/TableExampleColumnCount.js     |  92 +++++-----
 .../Variations/TableExampleColumnWidth.js     |  62 ++++---
 .../Table/Variations/TableExampleCompact.js   | 107 ++++++-----
 .../Table/Variations/TableExampleFixed.js     |  63 ++++---
 .../Table/Variations/TableExampleFixedLine.js |  59 +++---
 .../Table/Variations/TableExampleFullWidth.js |  97 +++++-----
 .../Table/Variations/TableExampleInverted.js  |  72 ++++----
 .../Variations/TableExampleInvertedColors.js  |  47 +++--
 .../Table/Variations/TableExampleLarge.js     |  72 ++++----
 .../Table/Variations/TableExamplePadded.js    |  51 +++---
 .../Variations/TableExampleSelectableCell.js  |  99 +++++-----
 .../TableExampleSelectableInvertedRow.js      |  57 +++---
 .../Variations/TableExampleSelectableRow.js   |  87 +++++----
 .../Variations/TableExampleSingleLine.js      |  65 ++++---
 .../Table/Variations/TableExampleSmall.js     |  72 ++++----
 .../Table/Variations/TableExampleSortable.js  |  43 +++--
 .../Table/Variations/TableExampleStackable.js |  57 +++---
 .../Table/Variations/TableExampleStriped.js   | 125 +++++++------
 .../Table/Variations/TableExampleTextAlign.js |  57 +++---
 .../Variations/TableExampleUnstackable.js     |  57 +++---
 .../Variations/TableExampleVerticalAlign.js   |  51 +++---
 .../Table/Variations/TableExampleVeryBasic.js |  57 +++---
 .../Variations/TableExampleVeryCompact.js     | 107 ++++++-----
 .../Variations/TableExampleVeryPadded.js      |  51 +++---
 .../Content/ButtonExampleConditionals.js      |   8 +-
 .../ButtonExampleConditionalsCustom.js        |   8 +-
 .../ButtonExampleMultipleConditionals.js      |  10 +-
 .../ButtonExampleGroupBasic.js                |  10 +-
 .../ButtonExampleGroupBasicColored.js         |   6 +-
 .../ButtonExampleGroupColored.js              |   6 +-
 .../ButtonExampleGroupEqualWidth.js           |  10 +-
 .../ButtonExampleGroupFloated.js              |  10 +-
 .../GroupVariations/ButtonExampleGroupIcon.js |   6 +-
 .../ButtonExampleGroupIconShorthand.js        |   6 +-
 .../ButtonExampleGroupIconSize.js             |   6 +-
 .../ButtonExampleGroupLabeledIcon.js          |   6 +-
 .../ButtonExampleGroupMixed.js                |   6 +-
 .../ButtonExampleGroupOrSize.js               |   8 +-
 .../GroupVariations/ButtonExampleGroupSize.js |   6 +-
 .../ButtonExampleGroupVertical.js             |   6 +-
 .../Button/Groups/ButtonExampleGroup.js       |   6 +-
 .../Button/Groups/ButtonExampleGroupIcon.js   |  10 +-
 .../Groups/ButtonExampleGroupIconShorthand.js |   6 +-
 .../Groups/ButtonExampleGroupShorthand.js     |   4 +-
 .../Button/Types/ButtonExampleAnimated.js     |  18 +-
 .../Usage/ButtonExampleAttachedEvents.js      |  10 +-
 .../Button/Usage/ButtonExampleFocus.js        |  10 +-
 .../ButtonExampleVerticallyAttachedGroup.js   |  10 +-
 .../Types/DividerExampleHorizontalTable.js    |  46 +++--
 .../Divider/Types/DividerExampleVertical.js   |  10 +-
 .../Types/DividerExampleVerticalForm.js       |  22 ++-
 .../elements/Flag/Types/FlagExampleTable.js   |  42 +++--
 .../Header/Content/HeaderExamplePlugIcon.js   |   4 +-
 .../Content/HeaderExampleSettingsIcon.js      |   8 +-
 .../Header/Content/HeaderExampleSubheader.js  |   6 +-
 .../Header/Types/HeaderExampleSettingsIcon.js |   6 +-
 .../Header/Types/HeaderExampleUsersIcon.js    |   4 +-
 .../Icon/Groups/IconExampleCornerGroup.js     |   6 +-
 .../Groups/IconExampleCornerGroupPositions.js |  18 +-
 .../Icon/Groups/IconExampleIconGroup.js       |   6 +-
 .../Icon/Groups/IconExampleLoadingGroup.js    |  10 +-
 .../Icon/Groups/IconExampleTwitterGroup.js    |   6 +-
 .../Image/Groups/ImageExampleGroupSize.js     |  10 +-
 .../Label/Content/LabelExampleDetail.js       |   4 +-
 .../Label/Content/LabelExampleLinkDetail.js   |   4 +-
 .../Label/Groups/LabelExampleGroupCircular.js |   6 +-
 .../Label/Groups/LabelExampleGroupColored.js  |   8 +-
 .../Label/Groups/LabelExampleGroupSize.js     |   6 +-
 .../Label/Groups/LabelExampleGroupTag.js      |   6 +-
 .../Label/Types/LabelExampleAttached.js       |  41 +++--
 .../Label/Types/LabelExampleCorner.js         |  10 +-
 .../Label/Types/LabelExampleFloating.js       |  10 +-
 .../Label/Types/LabelExampleHorizontal.js     |  18 +-
 .../Label/Types/LabelExampleImageColored.js   |   8 +-
 .../Label/Types/LabelExamplePointing.js       |  18 +-
 .../Types/LabelExamplePointingColored.js      |  18 +-
 .../Label/Types/LabelExamplePrompt.js         |   6 +-
 .../Label/Types/LabelExampleRibbon.js         |  10 +-
 .../Label/Types/LabelExampleRibbonImage.js    |  10 +-
 .../List/Content/ListExampleDescription.js    |  73 ++++----
 .../List/Content/ListExampleHeader.js         |  26 +--
 .../elements/List/Content/ListExampleIcon.js  |  41 +++--
 .../elements/List/Content/ListExampleImage.js |  77 ++++----
 .../elements/List/Content/ListExampleItem.js  |   8 +-
 .../elements/List/Content/ListExampleLink.js  |   8 +-
 .../List/Content/ListExampleLinkComplex.js    |  22 +--
 .../ContentVariations/ListExampleFloated.js   |  42 ++---
 .../ListExampleFloatedHorizontal.js           |  16 +-
 .../ListExampleVerticallyAligned.js           |  20 +-
 .../elements/List/Types/ListExampleBasic.js   |   8 +-
 .../List/Types/ListExampleBulleted.js         |  22 +--
 .../Types/ListExampleBulletedHorizontal.js    |   8 +-
 .../List/Types/ListExampleBulletedSimple.js   |  24 +--
 .../elements/List/Types/ListExampleDivided.js |  51 +++---
 .../elements/List/Types/ListExampleIcon.js    |  38 ++--
 .../List/Types/ListExampleIconShorthand.js    |  10 +-
 .../elements/List/Types/ListExampleLink.js    |  10 +-
 .../elements/List/Types/ListExampleOrdered.js |  22 +--
 .../List/Types/ListExampleOrderedSimple.js    |  22 +--
 .../List/Types/ListExampleOrderedValue.js     |  34 ++--
 .../elements/List/Types/ListExampleTree.js    | 154 ++++++++--------
 .../List/Variations/ListExampleAnimated.js    |  38 ++--
 .../List/Variations/ListExampleCelled.js      |  38 ++--
 .../Variations/ListExampleCelledHorizontal.js |   8 +-
 .../Variations/ListExampleCelledOrdered.js    |  20 +-
 .../List/Variations/ListExampleDivided.js     |  38 ++--
 .../List/Variations/ListExampleHorizontal.js  |  38 ++--
 .../ListExampleHorizontalBulleted.js          |   8 +-
 .../ListExampleHorizontalOrdered.js           |  38 ++--
 .../List/Variations/ListExampleInverted.js    |  38 ++--
 .../List/Variations/ListExampleRelaxed.js     |  51 +++---
 .../ListExampleRelaxedHorizontal.js           |  38 ++--
 .../List/Variations/ListExampleSelection.js   |  38 ++--
 .../List/Variations/ListExampleSizes.js       |  38 ++--
 .../List/Variations/ListExampleVeryRelaxed.js |  51 +++---
 .../ListExampleVeryRelaxedHorizontal.js       |  38 ++--
 .../Content/PlaceholderExampleHeader.js       |  14 +-
 .../Content/PlaceholderExampleHeaderImage.js  |  14 +-
 .../Content/PlaceholderExampleImage.js        |   4 +-
 .../PlaceholderExampleImageRectangular.js     |  30 +--
 .../Content/PlaceholderExampleImageSquare.js  |  30 +--
 .../Content/PlaceholderExampleLine.js         |  12 +-
 .../Content/PlaceholderExampleParagraph.js    |  30 +--
 .../Types/PlaceholderExampleCard.js           |  51 ++++--
 .../Types/PlaceholderExampleGrid.js           |  70 +++----
 .../Types/PlaceholderExamplePlaceholder.js    |  27 +--
 .../Variations/PlaceholderExampleFluid.js     |  25 ++-
 .../Variations/PlaceholderExampleInverted.js  |  26 ++-
 .../PlaceholderExampleLineLength.js           |  14 +-
 .../PlaceholderExampleLineLengthWithHeader.js |  23 ++-
 .../Rail/Types/RailExampleDividing.js         |   6 +-
 .../elements/Rail/Types/RailExampleRail.js    |   6 +-
 .../Rail/Variations/RailExampleAttached.js    |   6 +-
 .../Rail/Variations/RailExampleClose.js       |   6 +-
 .../Rail/Variations/RailExampleCloseVery.js   |   6 +-
 .../Rail/Variations/RailExampleSize.js        |   6 +-
 .../Reveal/Content/RevealExampleHidden.js     |  10 +-
 .../Reveal/Content/RevealExampleVisible.js    |  10 +-
 .../Reveal/States/RevealExampleActive.js      |  10 +-
 .../Reveal/States/RevealExampleDisabled.js    |  10 +-
 .../Reveal/Types/RevealExampleFade.js         |  10 +-
 .../Reveal/Types/RevealExampleFadeSmall.js    |  10 +-
 .../Reveal/Types/RevealExampleMove.js         |  10 +-
 .../Reveal/Types/RevealExampleMoveDown.js     |  10 +-
 .../Reveal/Types/RevealExampleMoveRight.js    |  10 +-
 .../Reveal/Types/RevealExampleMoveUp.js       |  10 +-
 .../Reveal/Types/RevealExampleRotate.js       |  10 +-
 .../Reveal/Types/RevealExampleRotateLeft.js   |  10 +-
 .../Reveal/Variations/RevealExampleInstant.js |  10 +-
 .../SegmentExampleHorizontalSegments.js       |   6 +-
 .../Groups/SegmentExampleNestedSegments.js    |  14 +-
 .../Groups/SegmentExamplePiledSegments.js     |   6 +-
 .../Groups/SegmentExampleRaisedSegments.js    |   6 +-
 .../Segment/Groups/SegmentExampleSegments.js  |   6 +-
 .../Groups/SegmentExampleStackedSegments.js   |   6 +-
 .../Types/SegmentExamplePlaceholderGrid.js    |  14 +-
 .../Types/SegmentExamplePlaceholderInline.js  |   6 +-
 .../Variations/SegmentExampleCircular.js      |   6 +-
 .../Variations/SegmentExampleCompactGroup.js  |   6 +-
 .../Variations/SegmentExampleGroupSizes.js    |   6 +-
 .../Step/Content/StepExampleDescription.js    |  10 +-
 .../StepExampleDescriptionShorthand.js        |   6 +-
 .../elements/Step/Content/StepExampleIcon.js  |  21 ++-
 .../Step/Content/StepExampleIconShorthand.js  |   6 +-
 .../elements/Step/Content/StepExampleLink.js  |  29 +--
 .../Step/Content/StepExampleLinkClickable.js  |   6 +-
 .../Step/Content/StepExampleLinkHref.js       |  29 +--
 .../elements/Step/Groups/StepExampleGroup.js  |  35 ++--
 .../Step/Groups/StepExampleGroupShorthand.js  |   4 +-
 .../Step/Groups/StepExampleOrdered.js         |  34 ++--
 .../Step/Groups/StepExampleVertical.js        |  35 ++--
 .../examples/elements/Step/Groups/index.js    |   8 +-
 .../elements/Step/States/StepExampleActive.js |  21 ++-
 .../Step/States/StepExampleCompleted.js       |  21 ++-
 .../States/StepExampleCompletedOrdered.js     |  20 +-
 .../Step/States/StepExampleDisabled.js        |   6 +-
 .../elements/Step/Types/StepExampleStep.js    |   6 +-
 .../Step/Types/StepExampleStepShorthand.js    |   6 +-
 .../Step/Variations/StepExampleAttached.js    |  63 ++++---
 .../Variations/StepExampleEvenlyDivided.js    |  30 +--
 .../StepExampleEvenlyDividedAnother.js        |  24 ++-
 .../Step/Variations/StepExampleFluid.js       |  39 ++--
 .../Step/Variations/StepExampleSizeBig.js     |  24 ++-
 .../Step/Variations/StepExampleSizeHuge.js    |  24 ++-
 .../Step/Variations/StepExampleSizeLarge.js   |  24 ++-
 .../Step/Variations/StepExampleSizeMassive.js |  24 ++-
 .../Step/Variations/StepExampleSizeMini.js    |  37 ++--
 .../Step/Variations/StepExampleSizeSmall.js   |  37 ++--
 .../Step/Variations/StepExampleSizeTiny.js    |  37 ++--
 .../Step/Variations/StepExampleStackable.js   |  37 ++--
 .../Step/Variations/StepExampleUnstackable.js |  37 ++--
 .../Advanced/AccordionExampleForm.js          |  22 ++-
 .../Advanced/AccordionExampleMenu.js          |  52 +++---
 .../Advanced/AccordionExampleNested.js        |   6 +-
 .../Types/AccordionExampleStandard.js         |  31 ++--
 .../Accordion/Types/AccordionExampleStyled.js |  31 ++--
 .../Variations/AccordionExampleFluid.js       |  31 ++--
 .../Variations/AccordionExampleInverted.js    |  32 ++--
 .../States/CheckboxExampleDisabled.js         |  10 +-
 .../Types/CheckboxExampleRadioGroup.js        |  14 +-
 .../Usage/CheckboxExampleDOMComparison.js     |  61 ++++---
 .../Dimmer/Types/DimmerExampleContent.js      |  24 ++-
 .../Dimmer/Types/DimmerExampleDimmer.js       |  23 ++-
 .../modules/Dimmer/Types/DimmerExamplePage.js |  10 +-
 .../Dimmer/Usage/DimmerExampleEvents.js       |   4 +-
 .../Dimmer/Usage/DimmerExampleLoader.js       |  18 +-
 .../Variations/DimmerExampleBlurring.js       |  17 +-
 .../DimmerExampleBlurringInverted.js          |  17 +-
 .../Variations/DimmerExampleInverted.js       |  17 +-
 .../Dimmer/Variations/DimmerExampleSimple.js  |   6 +-
 .../DimmerExampleVerticalAlignBottom.js       |  18 +-
 .../DimmerExampleVerticalAlignTop.js          |  18 +-
 .../Content/DropdownExampleDescription.js     |  22 ++-
 .../Content/DropdownExampleDivider.js         |  22 ++-
 .../Content/DropdownExampleFloatedContent.js  |  29 +--
 .../Dropdown/Content/DropdownExampleHeader.js |  19 +-
 .../Dropdown/Content/DropdownExampleIcon.js   |  22 ++-
 .../Dropdown/Content/DropdownExampleImage.js  |  15 +-
 .../Dropdown/Content/DropdownExampleInput.js  |  25 ++-
 .../Dropdown/Content/DropdownExampleLabel.js  |  22 ++-
 .../Content/DropdownExampleMessage.js         |   6 +-
 .../Dropdown/Types/DropdownExampleDropdown.js |  33 ++--
 .../Dropdown/Types/DropdownExampleFloating.js |   6 +-
 .../Types/DropdownExampleInlineTwo.js         |   6 +-
 .../DropdownExampleMultipleSearchInMenu.js    |  23 ++-
 .../Dropdown/Types/DropdownExamplePointing.js |  62 ++++---
 .../Types/DropdownExamplePointingTwo.js       |  33 ++--
 .../Types/DropdownExampleSearchInMenu.js      |  23 ++-
 .../Usage/DropdownExampleControlled.js        |  10 +-
 .../Dropdown/Usage/DropdownExampleRemote.js   |  10 +-
 .../DropdownExampleSelectOnNavigation.js      |  18 +-
 .../Variations/DropdownExampleFluid.js        |  12 +-
 .../DropdownExampleMenuDirection.js           |   6 +-
 .../DropdownExampleMenuDirectionLeft.js       |  46 ++---
 .../DropdownExampleSearchInMenuScrolling.js   |  23 ++-
 .../Modal/Content/ModalExampleCloseIcon.js    |  17 +-
 .../Modal/Content/ModalExampleContentImage.js |  24 ++-
 .../Modal/Content/ModalExampleDimmer.js       |  18 +-
 .../modules/Modal/Types/ModalExampleBasic.js  |  17 +-
 .../modules/Modal/Types/ModalExampleModal.js  |  25 ++-
 .../Modal/Usage/ModalExampleCallbacks.js      |  30 ++-
 .../Modal/Usage/ModalExampleCloseConfig.js    |  29 ++-
 .../Modal/Usage/ModalExampleMultiple.js       |  34 ++--
 .../Modal/Variations/ModalExampleScrolling.js |  25 ++-
 .../ModalExampleScrollingContent.js           |  25 ++-
 .../Modal/Variations/ModalExampleSize.js      |  19 +-
 .../Variations/ModalExampleTopAligned.js      |  23 ++-
 .../modules/Modal/Variations/index.js         |   4 +-
 .../Popup/Types/PopupExampleTrigger.js        |  28 ++-
 .../Popup/Usage/PopupExampleActions.js        |  10 +-
 .../Popup/Usage/PopupExampleControlled.js     |  17 +-
 .../Popup/Usage/PopupExampleEventsEnabled.js  |  17 +-
 .../modules/Popup/Usage/PopupExampleNested.js |  10 +-
 .../Usage/PopupExamplePopperDependencies.js   |  26 ++-
 .../src/examples/modules/Popup/Usage/index.js |  14 +-
 .../Popup/Variations/PopupExampleFlowing.js   |  14 +-
 .../Popup/Variations/PopupExamplePosition.js  |  46 ++---
 .../Search/Types/SearchExampleCategory.js     |  10 +-
 .../Types/SearchExampleCategoryCustom.js      |  17 +-
 .../Search/Types/SearchExampleStandard.js     |  10 +-
 .../Types/SearchExampleStandardCustom.js      |  17 +-
 .../Search/Variations/SearchExampleAligned.js |  10 +-
 .../Search/Variations/SearchExampleFluid.js   |  10 +-
 .../Search/Variations/SearchExampleInput.js   |  10 +-
 .../Examples/SidebarExampleMultiple.js        |  44 +++--
 .../Examples/SidebarExampleTransitions.js     |  54 +++---
 .../modules/Sidebar/Examples/index.js         | 138 +++++++-------
 .../modules/Sidebar/Spec/SidebarAndModal.js   |  30 +--
 .../Sidebar/States/SidebarExampleDimmed.js    |  32 ++--
 .../Sidebar/States/SidebarExampleVisible.js   |  32 ++--
 .../Sidebar/Types/SidebarExampleSidebar.js    |  32 ++--
 .../Sidebar/Usage/SidebarExampleCallback.js   |  35 ++--
 .../Sidebar/Usage/SidebarExampleTarget.js     |  22 ++-
 .../Types/StickyExampleAdjacentContext.js     |  14 +-
 .../Sticky/Types/StickyExamplePushing.js      |  14 +-
 .../Sticky/Usage/StickyExampleAboveContent.js |  22 ++-
 .../Sticky/Usage/StickyExampleOffset.js       |  14 +-
 .../Sticky/Variations/StickyExampleActive.js  |   5 +-
 .../Variations/StickyExampleOversized.js      |  24 ++-
 docs/src/examples/modules/Sticky/index.js     |   4 +-
 .../TabExampleAttachedBottom.js               |   8 +-
 .../MenuVariations/TabExampleAttachedFalse.js |   8 +-
 .../MenuVariations/TabExampleBorderless.js    |   8 +-
 .../Tab/MenuVariations/TabExampleColored.js   |   8 +-
 .../TabExampleColoredInverted.js              |   8 +-
 .../TabExampleMenuPositionRight.js            |   8 +-
 .../MenuVariations/TabExampleTabularFalse.js  |   8 +-
 .../TabExampleVerticalTabular.js              |   8 +-
 .../TabExampleVerticalTabularRight.js         |   8 +-
 .../modules/Tab/States/TabExampleLoading.js   |   8 +-
 .../modules/Tab/Types/TabExampleBasic.js      |   8 +-
 .../modules/Tab/Types/TabExamplePointing.js   |   8 +-
 .../modules/Tab/Types/TabExampleSecondary.js  |   8 +-
 .../Tab/Types/TabExampleSecondaryPointing.js  |   8 +-
 .../modules/Tab/Types/TabExampleText.js       |   8 +-
 docs/src/examples/modules/Tab/Types/index.js  |  23 ++-
 .../Tab/Usage/TabExampleActiveIndex.js        |   8 +-
 .../Tab/Usage/TabExampleCustomMenuItem.js     |  10 +-
 .../Tab/Usage/TabExampleDefaultActiveIndex.js |   8 +-
 .../Tab/Usage/TabExampleOnTabChange.js        |   8 +-
 .../Tab/Usage/TabExamplePaneShorthand.js      |  12 +-
 .../TransitionExampleGroupExplorer.js         |  29 ++-
 .../TransitionExampleTransitionExplorer.js    |  25 ++-
 .../Types/TransitionExampleGroup.js           |  24 ++-
 .../modules/Transition/Types/index.js         |  18 +-
 .../Usage/TransitionExampleDuration.js        |  24 ++-
 .../Card/Content/CardExampleContentBlock.js   |  70 ++++---
 .../Card/Content/CardExampleExtraContent.js   |  10 +-
 .../Card/Content/CardExampleHeaderCard.js     |  37 ++--
 .../Card/Content/CardExampleImageCard.js      |  26 ++-
 .../views/Card/Types/CardExampleCard.js       |  28 ++-
 .../views/Card/Types/CardExampleGroupProps.js |   4 +-
 .../views/Card/Types/CardExampleGroups.js     |  63 ++++---
 .../Card/Variations/CardExampleColored.js     |   6 +-
 .../Card/Variations/CardExampleColumnCount.js |   6 +-
 .../views/Card/Variations/CardExampleFluid.js |   6 +-
 .../Variations/CardExampleGroupCentered.js    |   4 +-
 .../Comment/Content/CommentExampleActions.js  |  42 +++--
 .../Comment/Content/CommentExampleAvatar.js   |  20 +-
 .../Comment/Content/CommentExampleMetadata.js |  31 ++--
 .../Content/CommentExampleReplyForm.js        |  41 +++--
 .../Content/CommentExampleReplyFormOuter.js   |  63 ++++---
 .../Comment/States/CommentExampleCollapsed.js |  80 ++++----
 .../Comment/Types/CommentExampleComment.js    | 108 ++++++-----
 .../Variations/CommentExampleGroupSize.js     | 172 +++++++++---------
 .../Variations/CommentExampleMinimal.js       |  99 +++++-----
 .../Variations/CommentExampleThreaded.js      |  99 +++++-----
 .../Feed/Content/FeedExampleContentDate.js    |  25 ++-
 .../FeedExampleContentDateShorthand.js        |  12 +-
 .../Feed/Content/FeedExampleExtraImages.js    |  30 +--
 .../FeedExampleExtraImagesShorthand.js        |  36 ++--
 .../Feed/Content/FeedExampleExtraText.js      |  30 +--
 .../Content/FeedExampleExtraTextShorthand.js  |  36 ++--
 .../Feed/Content/FeedExampleIconLabel.js      |  28 ++-
 .../Content/FeedExampleIconLabelShorthand.js  |  12 +-
 .../Feed/Content/FeedExampleImageLabel.js     |  14 +-
 .../Content/FeedExampleImageLabelShorthand.js |  12 +-
 .../Feed/Content/FeedExampleSummaryDate.js    |  27 ++-
 .../FeedExampleSummaryDateShorthand.js        |  20 +-
 .../views/Feed/Types/FeedExampleBasic.js      | 146 ++++++++-------
 .../Feed/Variations/FeedExampleSizeLarge.js   |  88 +++++----
 .../Feed/Variations/FeedExampleSizeSmall.js   |  56 +++---
 .../views/Item/Content/ItemExampleContents.js |  18 +-
 .../Item/Content/ItemExampleDescriptions.js   |  39 ++--
 .../Item/Content/ItemExampleExtraContent.js   |  46 +++--
 .../views/Item/Content/ItemExampleHeaders.js  |  32 ++--
 .../views/Item/Content/ItemExampleImages.js   |  10 +-
 .../views/Item/Content/ItemExampleLink.js     |  45 +++--
 .../views/Item/Content/ItemExampleMetadata.js |  45 +++--
 .../views/Item/Content/ItemExampleRatings.js  |  33 ++--
 .../views/Item/Types/ItemExampleItems.js      |  48 +++--
 .../views/Item/Types/ItemExampleProps.js      |   4 +-
 .../Item/Variations/ItemExampleAlignment.js   |  36 ++--
 .../Item/Variations/ItemExampleDivided.js     |  73 +++++---
 .../Item/Variations/ItemExampleFloated.js     |  58 +++---
 .../views/Item/Variations/ItemExampleLink.js  |  44 +++--
 .../Item/Variations/ItemExampleRelaxed.js     |  36 ++--
 .../Item/Variations/ItemExampleUnstackable.js |  10 +-
 .../Item/Variations/ItemExampleVeryRelaxed.js |  36 ++--
 .../Content/StatisticExampleLabel.js          |   6 +-
 .../Content/StatisticExampleValue.js          |  35 ++--
 .../Content/StatisticExampleValueShorthand.js |   6 +-
 .../Statistic/Types/StatisticExampleGroup.js  |  23 ++-
 .../Types/StatisticExampleGroupShorthand.js   |   4 +-
 .../Types/StatisticExampleStatistic.js        |   6 +-
 .../Types/StatisticExampleTopLabel.js         |   6 +-
 .../Variations/StatisticExampleColored.js     |  59 +++---
 .../StatisticExampleColoredGroup.js           |  24 ++-
 .../StatisticExampleEvenlyDivided.js          |  35 ++--
 .../Variations/StatisticExampleFloated.js     |  15 +-
 .../Variations/StatisticExampleHorizontal.js  |   6 +-
 .../StatisticExampleHorizontalGroup.js        |  23 ++-
 .../Variations/StatisticExampleInverted.js    |  59 +++---
 .../StatisticExampleInvertedGroup.js          |  24 ++-
 .../Variations/StatisticExampleSize.js        |  26 +--
 .../Variations/StatisticExampleSizeDivided.js |  31 ++--
 .../Variations/StatisticExampleSizeGroup.js   |  24 ++-
 558 files changed, 7867 insertions(+), 6118 deletions(-)

diff --git a/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js b/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js
index 633d454185..b6c1eea0ef 100644
--- a/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js
+++ b/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Grid, Input, Pagination, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Input, Pagination, Segment } from 'semantic-ui-react'
 
 export default class PaginationExampleControlled extends Component {
   state = { activePage: 1 }
@@ -13,7 +13,7 @@ export default class PaginationExampleControlled extends Component {
 
     return (
       <Grid columns={2} verticalAlign='middle'>
-        <Grid.Column>
+        <GridColumn>
           <Segment secondary>
             <div>activePage: {activePage}</div>
             <Input
@@ -24,14 +24,14 @@ export default class PaginationExampleControlled extends Component {
               value={activePage}
             />
           </Segment>
-        </Grid.Column>
-        <Grid.Column>
+        </GridColumn>
+        <GridColumn>
           <Pagination
             activePage={activePage}
             onPageChange={this.handlePaginationChange}
             totalPages={5}
           />
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js b/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js
index 5d2e0a169e..fbc90acfaf 100644
--- a/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js
+++ b/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js
@@ -1,5 +1,14 @@
 import React, { Component } from 'react'
-import { Grid, Form, Pagination, Segment } from 'semantic-ui-react'
+import {
+  GridColumn,
+  FormInput,
+  FormGroup,
+  FormCheckbox,
+  Grid,
+  Form,
+  Pagination,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class PaginationExampleCustomization extends Component {
   state = {
@@ -32,7 +41,7 @@ export default class PaginationExampleCustomization extends Component {
 
     return (
       <Grid columns={1}>
-        <Grid.Column>
+        <GridColumn>
           <Pagination
             activePage={activePage}
             boundaryRange={boundaryRange}
@@ -47,12 +56,12 @@ export default class PaginationExampleCustomization extends Component {
             prevItem={showPreviousAndNextNav ? undefined : null}
             nextItem={showPreviousAndNextNav ? undefined : null}
           />
-        </Grid.Column>
+        </GridColumn>
 
-        <Grid.Column>
+        <GridColumn>
           <Form as={Segment}>
-            <Form.Group widths={2}>
-              <Form.Input
+            <FormGroup widths={2}>
+              <FormInput
                 label='Active page'
                 name='activePage'
                 min={1}
@@ -60,7 +69,7 @@ export default class PaginationExampleCustomization extends Component {
                 type='number'
                 value={activePage}
               />
-              <Form.Input
+              <FormInput
                 label='Total pages'
                 name='totalPages'
                 min={1}
@@ -68,9 +77,9 @@ export default class PaginationExampleCustomization extends Component {
                 type='number'
                 value={totalPages}
               />
-            </Form.Group>
-            <Form.Group widths={2}>
-              <Form.Input
+            </FormGroup>
+            <FormGroup widths={2}>
+              <FormInput
                 label='Boundary pages range'
                 name='boundaryRange'
                 min={0}
@@ -78,7 +87,7 @@ export default class PaginationExampleCustomization extends Component {
                 type='number'
                 value={boundaryRange}
               />
-              <Form.Input
+              <FormInput
                 label='Sibling pages range'
                 name='siblingRange'
                 min={0}
@@ -86,29 +95,29 @@ export default class PaginationExampleCustomization extends Component {
                 type='number'
                 value={siblingRange}
               />
-            </Form.Group>
-            <Form.Group inline>
-              <Form.Checkbox
+            </FormGroup>
+            <FormGroup inline>
+              <FormCheckbox
                 checked={showEllipsis}
                 label='Show ellipsis'
                 name='showEllipsis'
                 onChange={this.handleCheckboxChange}
               />
-              <Form.Checkbox
+              <FormCheckbox
                 checked={showFirstAndLastNav}
                 label='Show first and last nav pages'
                 name='showFirstAndLastNav'
                 onChange={this.handleCheckboxChange}
               />
-              <Form.Checkbox
+              <FormCheckbox
                 checked={showPreviousAndNextNav}
                 label='Show previous and next nav pages'
                 name='showPreviousAndNextNav'
                 onChange={this.handleCheckboxChange}
               />
-            </Form.Group>
+            </FormGroup>
           </Form>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js b/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js
index 6693d92c9e..16c2398872 100644
--- a/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js
+++ b/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js
@@ -1,5 +1,12 @@
 import React, { Component } from 'react'
-import { Button, Grid, Header, Segment, Portal } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Button,
+  Grid,
+  Header,
+  Segment,
+  Portal,
+} from 'semantic-ui-react'
 
 export default class PortalExampleControlled extends Component {
   state = { open: false }
@@ -12,7 +19,7 @@ export default class PortalExampleControlled extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column>
+        <GridColumn>
           <Button
             content='Open Portal'
             disabled={open}
@@ -40,7 +47,7 @@ export default class PortalExampleControlled extends Component {
               />
             </Segment>
           </Portal>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/addons/Portal/Types/PortalExamplePortal.js b/docs/src/examples/addons/Portal/Types/PortalExamplePortal.js
index fbc8b2e3b7..f2c7d69a49 100644
--- a/docs/src/examples/addons/Portal/Types/PortalExamplePortal.js
+++ b/docs/src/examples/addons/Portal/Types/PortalExamplePortal.js
@@ -1,5 +1,14 @@
 import React, { Component } from 'react'
-import { Button, Grid, Header, Label, Segment, Portal } from 'semantic-ui-react'
+import {
+  SegmentGroup,
+  GridColumn,
+  Button,
+  Grid,
+  Header,
+  Label,
+  Segment,
+  Portal,
+} from 'semantic-ui-react'
 
 export default class PortalExamplePortal extends Component {
   state = {
@@ -34,7 +43,7 @@ export default class PortalExamplePortal extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column>
+        <GridColumn>
           <Portal
             closeOnTriggerClick
             openOnTriggerClick
@@ -61,9 +70,9 @@ export default class PortalExamplePortal extends Component {
               <p>To close, simply click the close button or click away</p>
             </Segment>
           </Portal>
-        </Grid.Column>
-        <Grid.Column>
-          <Segment.Group>
+        </GridColumn>
+        <GridColumn>
+          <SegmentGroup>
             <Segment>
               <Button
                 compact
@@ -82,8 +91,8 @@ export default class PortalExamplePortal extends Component {
                 ))}
               </pre>
             </Segment>
-          </Segment.Group>
-        </Grid.Column>
+          </SegmentGroup>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/addons/Radio/States/RadioExampleDisabled.js b/docs/src/examples/addons/Radio/States/RadioExampleDisabled.js
index f094012558..1189997b61 100644
--- a/docs/src/examples/addons/Radio/States/RadioExampleDisabled.js
+++ b/docs/src/examples/addons/Radio/States/RadioExampleDisabled.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Form, Radio } from 'semantic-ui-react'
+import { FormField, Form, Radio } from 'semantic-ui-react'
 
 const RadioExampleDisabled = () => (
   <Form>
-    <Form.Field>
+    <FormField>
       <Radio label='Disabled' disabled />
-    </Form.Field>
-    <Form.Field>
+    </FormField>
+    <FormField>
       <Radio toggle label='Disabled' disabled />
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js b/docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js
index e2cf7409d9..f1e0b70638 100644
--- a/docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js
+++ b/docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Form, Radio } from 'semantic-ui-react'
+import { FormField, Form, Radio } from 'semantic-ui-react'
 
 export default class RadioExampleRadioGroup extends Component {
   state = {}
@@ -8,10 +8,10 @@ export default class RadioExampleRadioGroup extends Component {
   render() {
     return (
       <Form>
-        <Form.Field>
+        <FormField>
           Selected value: <b>{this.state.value}</b>
-        </Form.Field>
-        <Form.Field>
+        </FormField>
+        <FormField>
           <Radio
             label='Choose this'
             name='radioGroup'
@@ -19,8 +19,8 @@ export default class RadioExampleRadioGroup extends Component {
             checked={this.state.value === 'this'}
             onChange={this.handleChange}
           />
-        </Form.Field>
-        <Form.Field>
+        </FormField>
+        <FormField>
           <Radio
             label='Or that'
             name='radioGroup'
@@ -28,7 +28,7 @@ export default class RadioExampleRadioGroup extends Component {
             checked={this.state.value === 'that'}
             onChange={this.handleChange}
           />
-        </Form.Field>
+        </FormField>
       </Form>
     )
   }
diff --git a/docs/src/examples/addons/TextArea/Usage/index.js b/docs/src/examples/addons/TextArea/Usage/index.js
index aff82ec572..1d43680543 100644
--- a/docs/src/examples/addons/TextArea/Usage/index.js
+++ b/docs/src/examples/addons/TextArea/Usage/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Message, Segment } from 'semantic-ui-react'
+import { MessageHeader, Button, Message, Segment } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -8,8 +8,9 @@ const TextAreaUsageExamples = () => (
   <ExampleSection title='Usage'>
     <Segment>
       <Message warning>
-        <Message.Header>Auto height</Message.Header>
-        We don't support `autoHeight` anymore. If you need this feature you can use{' '}
+        <MessageHeader>Auto height</MessageHeader>
+        We don't support `autoHeight` anymore. If you need this feature you can
+        use{' '}
         <a
           href='https://www.npmjs.com/package/react-textarea-autosize'
           rel='noopener noreferrer'
diff --git a/docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js b/docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js
index a8ae4bcb3d..8b0a44d18d 100644
--- a/docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js
+++ b/docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js
@@ -1,5 +1,9 @@
 import React, { Component } from 'react'
 import {
+  GridColumn,
+  FormSelect,
+  FormInput,
+  FormButton,
   Form,
   Grid,
   Header,
@@ -50,16 +54,16 @@ export default class TransitionablePortalExampleTransition extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column>
+        <GridColumn>
           <Form>
-            <Form.Select
+            <FormSelect
               label='Choose transition'
               name='animation'
               onChange={this.handleChange}
               options={options}
               value={animation}
             />
-            <Form.Input
+            <FormInput
               label={`Duration: ${duration}ms `}
               min={100}
               max={2000}
@@ -69,7 +73,7 @@ export default class TransitionablePortalExampleTransition extends Component {
               type='range'
               value={duration}
             />
-            <Form.Button
+            <FormButton
               content={open ? 'Close Portal' : 'Open Portal'}
               negative={open}
               positive={!open}
@@ -94,7 +98,7 @@ export default class TransitionablePortalExampleTransition extends Component {
               <p>To close, simply click the close button or click away</p>
             </Segment>
           </TransitionablePortal>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
index 1fba7d4aac..f32d66bab0 100644
--- a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
+++ b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
@@ -1,13 +1,17 @@
 import React from 'react'
-import { Breadcrumb } from 'semantic-ui-react'
+import {
+  BreadcrumbSection,
+  BreadcrumbDivider,
+  Breadcrumb,
+} from 'semantic-ui-react'
 
 const BreadcrumbExampleDivider = () => (
   <Breadcrumb>
-    <Breadcrumb.Section link>Home</Breadcrumb.Section>
-    <Breadcrumb.Divider>/</Breadcrumb.Divider>
-    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-    <Breadcrumb.Divider>/</Breadcrumb.Divider>
-    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+    <BreadcrumbSection link>Home</BreadcrumbSection>
+    <BreadcrumbDivider>/</BreadcrumbDivider>
+    <BreadcrumbSection link>Registration</BreadcrumbSection>
+    <BreadcrumbDivider>/</BreadcrumbDivider>
+    <BreadcrumbSection active>Personal Information</BreadcrumbSection>
   </Breadcrumb>
 )
 
diff --git a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDivider.js b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDivider.js
index 1486c59924..e8b9a9a94b 100644
--- a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDivider.js
+++ b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDivider.js
@@ -1,13 +1,17 @@
 import React from 'react'
-import { Breadcrumb } from 'semantic-ui-react'
+import {
+  BreadcrumbSection,
+  BreadcrumbDivider,
+  Breadcrumb,
+} from 'semantic-ui-react'
 
 const BreadcrumbExampleIconDivider = () => (
   <Breadcrumb>
-    <Breadcrumb.Section link>Home</Breadcrumb.Section>
-    <Breadcrumb.Divider icon='right chevron' />
-    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-    <Breadcrumb.Divider icon='right arrow' />
-    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+    <BreadcrumbSection link>Home</BreadcrumbSection>
+    <BreadcrumbDivider icon='right chevron' />
+    <BreadcrumbSection link>Registration</BreadcrumbSection>
+    <BreadcrumbDivider icon='right arrow' />
+    <BreadcrumbSection active>Personal Information</BreadcrumbSection>
   </Breadcrumb>
 )
 
diff --git a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleLink.js b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleLink.js
index 69c4266e1d..6b943ce525 100644
--- a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleLink.js
+++ b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleLink.js
@@ -1,15 +1,19 @@
 import React from 'react'
-import { Breadcrumb } from 'semantic-ui-react'
+import {
+  BreadcrumbSection,
+  BreadcrumbDivider,
+  Breadcrumb,
+} from 'semantic-ui-react'
 
 const BreadcrumbExampleLink = () => (
   <Breadcrumb>
-    <Breadcrumb.Section link>Home</Breadcrumb.Section>
-    <Breadcrumb.Divider />
-    <Breadcrumb.Section link>Store</Breadcrumb.Section>
-    <Breadcrumb.Divider icon='right angle' />
-    <Breadcrumb.Section active>
+    <BreadcrumbSection link>Home</BreadcrumbSection>
+    <BreadcrumbDivider />
+    <BreadcrumbSection link>Store</BreadcrumbSection>
+    <BreadcrumbDivider icon='right angle' />
+    <BreadcrumbSection active>
       Search for: <a href='#'>paper towels</a>
-    </Breadcrumb.Section>
+    </BreadcrumbSection>
   </Breadcrumb>
 )
 
diff --git a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js
index f4dd2833aa..4ea33407a4 100644
--- a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js
+++ b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js
@@ -1,11 +1,15 @@
 import React from 'react'
-import { Breadcrumb } from 'semantic-ui-react'
+import {
+  BreadcrumbSection,
+  BreadcrumbDivider,
+  Breadcrumb,
+} from 'semantic-ui-react'
 
 const BreadcrumbExampleSection = () => (
   <Breadcrumb>
-    <Breadcrumb.Section link>Home</Breadcrumb.Section>
-    <Breadcrumb.Divider />
-    <Breadcrumb.Section active>Search</Breadcrumb.Section>
+    <BreadcrumbSection link>Home</BreadcrumbSection>
+    <BreadcrumbDivider />
+    <BreadcrumbSection active>Search</BreadcrumbSection>
   </Breadcrumb>
 )
 
diff --git a/docs/src/examples/collections/Breadcrumb/Types/BreadcrumbExample.js b/docs/src/examples/collections/Breadcrumb/Types/BreadcrumbExample.js
index 2962d0e77c..7e3d591f5b 100644
--- a/docs/src/examples/collections/Breadcrumb/Types/BreadcrumbExample.js
+++ b/docs/src/examples/collections/Breadcrumb/Types/BreadcrumbExample.js
@@ -1,13 +1,17 @@
 import React from 'react'
-import { Breadcrumb } from 'semantic-ui-react'
+import {
+  BreadcrumbSection,
+  BreadcrumbDivider,
+  Breadcrumb,
+} from 'semantic-ui-react'
 
 const BreadcrumbExample = () => (
   <Breadcrumb>
-    <Breadcrumb.Section link>Home</Breadcrumb.Section>
-    <Breadcrumb.Divider />
-    <Breadcrumb.Section link>Store</Breadcrumb.Section>
-    <Breadcrumb.Divider />
-    <Breadcrumb.Section active>T-Shirt</Breadcrumb.Section>
+    <BreadcrumbSection link>Home</BreadcrumbSection>
+    <BreadcrumbDivider />
+    <BreadcrumbSection link>Store</BreadcrumbSection>
+    <BreadcrumbDivider />
+    <BreadcrumbSection active>T-Shirt</BreadcrumbSection>
   </Breadcrumb>
 )
 
diff --git a/docs/src/examples/collections/Breadcrumb/Variations/BreadcrumbExampleSize.js b/docs/src/examples/collections/Breadcrumb/Variations/BreadcrumbExampleSize.js
index 67f0761109..0794fcb1b5 100644
--- a/docs/src/examples/collections/Breadcrumb/Variations/BreadcrumbExampleSize.js
+++ b/docs/src/examples/collections/Breadcrumb/Variations/BreadcrumbExampleSize.js
@@ -1,5 +1,10 @@
 import React from 'react'
-import { Breadcrumb, Divider } from 'semantic-ui-react'
+import {
+  BreadcrumbSection,
+  BreadcrumbDivider,
+  Breadcrumb,
+  Divider,
+} from 'semantic-ui-react'
 
 const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
 
@@ -8,11 +13,11 @@ const BreadcrumbExampleSize = () => (
     {sizes.map((size) => (
       <React.Fragment key={size}>
         <Breadcrumb size={size}>
-          <Breadcrumb.Section link>Home</Breadcrumb.Section>
-          <Breadcrumb.Divider icon='right chevron' />
-          <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-          <Breadcrumb.Divider icon='right chevron' />
-          <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+          <BreadcrumbSection link>Home</BreadcrumbSection>
+          <BreadcrumbDivider icon='right chevron' />
+          <BreadcrumbSection link>Registration</BreadcrumbSection>
+          <BreadcrumbDivider icon='right chevron' />
+          <BreadcrumbSection active>Personal Information</BreadcrumbSection>
         </Breadcrumb>
         <Divider hidden />
       </React.Fragment>
diff --git a/docs/src/examples/collections/Form/Content/FormExampleField.js b/docs/src/examples/collections/Form/Content/FormExampleField.js
index 77b1697b71..30a82127e0 100644
--- a/docs/src/examples/collections/Form/Content/FormExampleField.js
+++ b/docs/src/examples/collections/Form/Content/FormExampleField.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormField, Form } from 'semantic-ui-react'
 
 const FormExampleField = () => (
   <Form>
-    <Form.Field>
+    <FormField>
       <label>User Input</label>
       <input />
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/FieldVariations/FormExampleInlineField.js b/docs/src/examples/collections/Form/FieldVariations/FormExampleInlineField.js
index 06ca6fc476..586e0968fb 100644
--- a/docs/src/examples/collections/Form/FieldVariations/FormExampleInlineField.js
+++ b/docs/src/examples/collections/Form/FieldVariations/FormExampleInlineField.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Form, Input } from 'semantic-ui-react'
+import { FormField, Form, Input } from 'semantic-ui-react'
 
 const FormExampleInlineField = () => (
   <Form>
-    <Form.Field inline>
+    <FormField inline>
       <label>First name</label>
       <Input placeholder='First name' />
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/FieldVariations/FormExampleRequiredField.js b/docs/src/examples/collections/Form/FieldVariations/FormExampleRequiredField.js
index 34448e66ea..73cccd06ea 100644
--- a/docs/src/examples/collections/Form/FieldVariations/FormExampleRequiredField.js
+++ b/docs/src/examples/collections/Form/FieldVariations/FormExampleRequiredField.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Form, Input } from 'semantic-ui-react'
+import { FormField, Form, Input } from 'semantic-ui-react'
 
 const FormExampleRequiredField = () => (
   <Form>
-    <Form.Field required>
+    <FormField required>
       <label>Last name</label>
       <Input placeholder='Full name' />
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/FieldVariations/FormExampleRequiredFieldShorthand.js b/docs/src/examples/collections/Form/FieldVariations/FormExampleRequiredFieldShorthand.js
index a5ac4d86dd..ed1e9845dd 100644
--- a/docs/src/examples/collections/Form/FieldVariations/FormExampleRequiredFieldShorthand.js
+++ b/docs/src/examples/collections/Form/FieldVariations/FormExampleRequiredFieldShorthand.js
@@ -1,13 +1,9 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormCheckbox, Form } from 'semantic-ui-react'
 
 const FormExampleRequiredFieldShorthand = () => (
   <Form>
-    <Form.Checkbox
-      inline
-      label='I agree to the terms and conditions'
-      required
-    />
+    <FormCheckbox inline label='I agree to the terms and conditions' required />
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/FieldVariations/FormExampleWidthField.js b/docs/src/examples/collections/Form/FieldVariations/FormExampleWidthField.js
index 1290d0f460..7f9d04f273 100644
--- a/docs/src/examples/collections/Form/FieldVariations/FormExampleWidthField.js
+++ b/docs/src/examples/collections/Form/FieldVariations/FormExampleWidthField.js
@@ -1,23 +1,23 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormInput, FormGroup, Form } from 'semantic-ui-react'
 
 const FormExampleWidthField = () => (
   <Form>
-    <Form.Group>
-      <Form.Input label='First name' placeholder='First Name' width={6} />
-      <Form.Input label='Middle Name' placeholder='Middle Name' width={4} />
-      <Form.Input label='Last Name' placeholder='Last Name' width={6} />
-    </Form.Group>
-    <Form.Group>
-      <Form.Input placeholder='2 Wide' width={2} />
-      <Form.Input placeholder='12 Wide' width={12} />
-      <Form.Input placeholder='2 Wide' width={2} />
-    </Form.Group>
-    <Form.Group>
-      <Form.Input placeholder='8 Wide' width={8} />
-      <Form.Input placeholder='6 Wide' width={6} />
-      <Form.Input placeholder='2 Wide' width={2} />
-    </Form.Group>
+    <FormGroup>
+      <FormInput label='First name' placeholder='First Name' width={6} />
+      <FormInput label='Middle Name' placeholder='Middle Name' width={4} />
+      <FormInput label='Last Name' placeholder='Last Name' width={6} />
+    </FormGroup>
+    <FormGroup>
+      <FormInput placeholder='2 Wide' width={2} />
+      <FormInput placeholder='12 Wide' width={12} />
+      <FormInput placeholder='2 Wide' width={2} />
+    </FormGroup>
+    <FormGroup>
+      <FormInput placeholder='8 Wide' width={8} />
+      <FormInput placeholder='6 Wide' width={6} />
+      <FormInput placeholder='2 Wide' width={2} />
+    </FormGroup>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/FieldVariations/index.js b/docs/src/examples/collections/Form/FieldVariations/index.js
index 0e3a53d7ab..cdd33e1f9c 100644
--- a/docs/src/examples/collections/Form/FieldVariations/index.js
+++ b/docs/src/examples/collections/Form/FieldVariations/index.js
@@ -21,7 +21,7 @@ const FormFieldVariationsExamples = () => (
       examplePath='collections/Form/FieldVariations/FormExampleRequiredField'
     />
     <ComponentExample
-      description='Form.Field shorthand can also be required.'
+      description='FormField shorthand can also be required.'
       examplePath='collections/Form/FieldVariations/FormExampleRequiredFieldShorthand'
     />
   </ExampleSection>
diff --git a/docs/src/examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js b/docs/src/examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js
index 9ce5f80e09..a44a99e8c1 100644
--- a/docs/src/examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js
+++ b/docs/src/examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js
@@ -1,22 +1,22 @@
 import React from 'react'
-import { Form, Input } from 'semantic-ui-react'
+import { FormGroup, FormField, Form, Input } from 'semantic-ui-react'
 
 const FormExampleEvenlyDividedGroup = () => (
   <Form>
-    <Form.Group widths='equal'>
-      <Form.Field>
+    <FormGroup widths='equal'>
+      <FormField>
         <label>First name</label>
         <Input fluid placeholder='First name' />
-      </Form.Field>
-      <Form.Field>
+      </FormField>
+      <FormField>
         <label>Middle name</label>
         <Input fluid placeholder='Middle name' />
-      </Form.Field>
-      <Form.Field>
+      </FormField>
+      <FormField>
         <label>Last name</label>
         <Input fluid placeholder='Last name' />
-      </Form.Field>
-    </Form.Group>
+      </FormField>
+    </FormGroup>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js b/docs/src/examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js
index 133d01bb7b..b05fa8d3dc 100644
--- a/docs/src/examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js
+++ b/docs/src/examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Form, Input } from 'semantic-ui-react'
+import { FormGroup, FormField, Form, Input } from 'semantic-ui-react'
 
 const FormExampleInlineGroupedFields = () => (
   <Form>
-    <Form.Group inline>
-      <Form.Field>
+    <FormGroup inline>
+      <FormField>
         <label>Phone Number</label>
         <Input placeholder='(xxx)' />
-      </Form.Field>
-      <Form.Field>
+      </FormField>
+      <FormField>
         <Input placeholder='xxx' />
-      </Form.Field>
-      <Form.Field>
+      </FormField>
+      <FormField>
         <Input placeholder='xxxx' />
-      </Form.Field>
-    </Form.Group>
+      </FormField>
+    </FormGroup>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/GroupVariations/FormExampleUnstackableGroup.js b/docs/src/examples/collections/Form/GroupVariations/FormExampleUnstackableGroup.js
index bbfe013037..8cc0c3eabe 100644
--- a/docs/src/examples/collections/Form/GroupVariations/FormExampleUnstackableGroup.js
+++ b/docs/src/examples/collections/Form/GroupVariations/FormExampleUnstackableGroup.js
@@ -1,17 +1,23 @@
 import React from 'react'
-import { Button, Form } from 'semantic-ui-react'
+import {
+  FormInput,
+  FormGroup,
+  FormCheckbox,
+  Button,
+  Form,
+} from 'semantic-ui-react'
 
 const FormExampleUnstackableGroup = () => (
   <Form>
-    <Form.Group unstackable widths={2}>
-      <Form.Input label='First name' placeholder='First name' />
-      <Form.Input label='Last name' placeholder='Last name' />
-    </Form.Group>
-    <Form.Group widths={2}>
-      <Form.Input label='Address' placeholder='Address' />
-      <Form.Input label='Phone' placeholder='Phone' />
-    </Form.Group>
-    <Form.Checkbox label='I agree to the Terms and Conditions' />
+    <FormGroup unstackable widths={2}>
+      <FormInput label='First name' placeholder='First name' />
+      <FormInput label='Last name' placeholder='Last name' />
+    </FormGroup>
+    <FormGroup widths={2}>
+      <FormInput label='Address' placeholder='Address' />
+      <FormInput label='Phone' placeholder='Phone' />
+    </FormGroup>
+    <FormCheckbox label='I agree to the Terms and Conditions' />
     <Button type='submit'>Submit</Button>
   </Form>
 )
diff --git a/docs/src/examples/collections/Form/GroupVariations/index.js b/docs/src/examples/collections/Form/GroupVariations/index.js
index 3f6289e47a..6b40ad1d4f 100644
--- a/docs/src/examples/collections/Form/GroupVariations/index.js
+++ b/docs/src/examples/collections/Form/GroupVariations/index.js
@@ -13,8 +13,8 @@ const FormGroupVariationsExamples = () => (
     >
       <Message info>
         When using the <code>widths='equal'</code> prop declaration on a{' '}
-        <code>Form.Group</code>, all child <code>Form.Dropdown</code>,{' '}
-        <code>Form.Input</code>, <code>Form.Select</code>
+        <code>FormGroup</code>, all child <code>FormDropdown</code>,{' '}
+        <code>FormInput</code>, <code>FormSelect</code>
         components must be rendered with a <code>fluid</code> prop to work
         correctly.
       </Message>
diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js
index dcbda47967..de29dcb42a 100644
--- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js
+++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 import {
+  FormGroup,
+  FormField,
   Button,
   Checkbox,
   Form,
@@ -24,58 +26,58 @@ class FormExampleFieldControl extends Component {
     const { value } = this.state
     return (
       <Form>
-        <Form.Group widths='equal'>
-          <Form.Field
+        <FormGroup widths='equal'>
+          <FormField
             control={Input}
             label='First name'
             placeholder='First name'
           />
-          <Form.Field
+          <FormField
             control={Input}
             label='Last name'
             placeholder='Last name'
           />
-          <Form.Field
+          <FormField
             control={Select}
             label='Gender'
             options={options}
             placeholder='Gender'
           />
-        </Form.Group>
-        <Form.Group inline>
+        </FormGroup>
+        <FormGroup inline>
           <label>Quantity</label>
-          <Form.Field
+          <FormField
             control={Radio}
             label='One'
             value='1'
             checked={value === '1'}
             onChange={this.handleChange}
           />
-          <Form.Field
+          <FormField
             control={Radio}
             label='Two'
             value='2'
             checked={value === '2'}
             onChange={this.handleChange}
           />
-          <Form.Field
+          <FormField
             control={Radio}
             label='Three'
             value='3'
             checked={value === '3'}
             onChange={this.handleChange}
           />
-        </Form.Group>
-        <Form.Field
+        </FormGroup>
+        <FormField
           control={TextArea}
           label='About'
           placeholder='Tell us more about you...'
         />
-        <Form.Field
+        <FormField
           control={Checkbox}
           label='I agree to the Terms and Conditions'
         />
-        <Form.Field control={Button}>Submit</Form.Field>
+        <FormField control={Button}>Submit</FormField>
       </Form>
     )
   }
diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js
index b4edab874c..3552dc0f3a 100644
--- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js
+++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js
@@ -1,39 +1,39 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormGroup, FormField, Form } from 'semantic-ui-react'
 
 const FormExampleFieldControlHTML = () => (
   <Form>
-    <Form.Group widths='equal'>
-      <Form.Field label='An HTML <input>' control='input' />
-      <Form.Field label='An HTML <select>' control='select'>
+    <FormGroup widths='equal'>
+      <FormField label='An HTML <input>' control='input' />
+      <FormField label='An HTML <select>' control='select'>
         <option value='male'>Male</option>
         <option value='female'>Female</option>
-      </Form.Field>
-    </Form.Group>
-    <Form.Group grouped>
+      </FormField>
+    </FormGroup>
+    <FormGroup grouped>
       <label>HTML radios</label>
-      <Form.Field
+      <FormField
         label='This one'
         control='input'
         type='radio'
         name='htmlRadios'
       />
-      <Form.Field
+      <FormField
         label='That one'
         control='input'
         type='radio'
         name='htmlRadios'
       />
-    </Form.Group>
-    <Form.Group grouped>
+    </FormGroup>
+    <FormGroup grouped>
       <label>HTML checkboxes</label>
-      <Form.Field label='This one' control='input' type='checkbox' />
-      <Form.Field label='That one' control='input' type='checkbox' />
-    </Form.Group>
-    <Form.Field label='An HTML <textarea>' control='textarea' rows='3' />
-    <Form.Field label='An HTML <button>' control='button'>
+      <FormField label='This one' control='input' type='checkbox' />
+      <FormField label='That one' control='input' type='checkbox' />
+    </FormGroup>
+    <FormField label='An HTML <textarea>' control='textarea' rows='3' />
+    <FormField label='An HTML <button>' control='button'>
       HTML Button
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js
index 1c3fff0378..1bc45194a9 100644
--- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js
+++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Form, Input, TextArea, Button, Select } from 'semantic-ui-react'
+import {
+  FormGroup,
+  FormField,
+  Form,
+  Input,
+  TextArea,
+  Button,
+  Select,
+} from 'semantic-ui-react'
 
 const genderOptions = [
   { key: 'm', text: 'Male', value: 'male' },
@@ -9,20 +17,20 @@ const genderOptions = [
 
 const FormExampleFieldControlId = () => (
   <Form>
-    <Form.Group widths='equal'>
-      <Form.Field
+    <FormGroup widths='equal'>
+      <FormField
         id='form-input-control-first-name'
         control={Input}
         label='First name'
         placeholder='First name'
       />
-      <Form.Field
+      <FormField
         id='form-input-control-last-name'
         control={Input}
         label='Last name'
         placeholder='Last name'
       />
-      <Form.Field
+      <FormField
         control={Select}
         options={genderOptions}
         label={{ children: 'Gender', htmlFor: 'form-select-control-gender' }}
@@ -30,14 +38,14 @@ const FormExampleFieldControlId = () => (
         search
         searchInput={{ id: 'form-select-control-gender' }}
       />
-    </Form.Group>
-    <Form.Field
+    </FormGroup>
+    <FormField
       id='form-textarea-control-opinion'
       control={TextArea}
       label='Opinion'
       placeholder='Opinion'
     />
-    <Form.Field
+    <FormField
       id='form-input-control-error-email'
       control={Input}
       label='Email'
@@ -47,7 +55,7 @@ const FormExampleFieldControlId = () => (
         pointing: 'below',
       }}
     />
-    <Form.Field
+    <FormField
       id='form-button-control-public'
       control={Button}
       content='Confirm'
diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelElement.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelElement.js
index 52a3793181..6f57cc32b4 100644
--- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelElement.js
+++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelElement.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Checkbox, Form } from 'semantic-ui-react'
+import { FormField, Checkbox, Form } from 'semantic-ui-react'
 
 const FormExampleFieldLabelElement = () => (
   <Form>
-    <Form.Field
+    <FormField
       control={Checkbox}
       label={<label>I agree to the Terms and Conditions</label>}
     />
diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js
index 7a33dce951..54a544a41c 100644
--- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js
+++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Checkbox, Form } from 'semantic-ui-react'
+import { FormField, Checkbox, Form } from 'semantic-ui-react'
 
 const FormExampleFieldLabelObject = () => (
   <Form>
-    <Form.Field
+    <FormField
       control={Checkbox}
       label={{ children: 'I agree to the Terms and Conditions' }}
     />
diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js
index 40d0ba1e5c..664ae31080 100644
--- a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js
+++ b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js
@@ -1,5 +1,14 @@
 import React, { Component } from 'react'
-import { Form } from 'semantic-ui-react'
+import {
+  FormTextArea,
+  FormSelect,
+  FormRadio,
+  FormInput,
+  FormGroup,
+  FormCheckbox,
+  FormButton,
+  Form,
+} from 'semantic-ui-react'
 
 const options = [
   { key: 'm', text: 'Male', value: 'male' },
@@ -16,40 +25,40 @@ class FormExampleSubcomponentControl extends Component {
     const { value } = this.state
     return (
       <Form>
-        <Form.Group widths='equal'>
-          <Form.Input fluid label='First name' placeholder='First name' />
-          <Form.Input fluid label='Last name' placeholder='Last name' />
-          <Form.Select
+        <FormGroup widths='equal'>
+          <FormInput fluid label='First name' placeholder='First name' />
+          <FormInput fluid label='Last name' placeholder='Last name' />
+          <FormSelect
             fluid
             label='Gender'
             options={options}
             placeholder='Gender'
           />
-        </Form.Group>
-        <Form.Group inline>
+        </FormGroup>
+        <FormGroup inline>
           <label>Size</label>
-          <Form.Radio
+          <FormRadio
             label='Small'
             value='sm'
             checked={value === 'sm'}
             onChange={this.handleChange}
           />
-          <Form.Radio
+          <FormRadio
             label='Medium'
             value='md'
             checked={value === 'md'}
             onChange={this.handleChange}
           />
-          <Form.Radio
+          <FormRadio
             label='Large'
             value='lg'
             checked={value === 'lg'}
             onChange={this.handleChange}
           />
-        </Form.Group>
-        <Form.TextArea label='About' placeholder='Tell us more about you...' />
-        <Form.Checkbox label='I agree to the Terms and Conditions' />
-        <Form.Button>Submit</Form.Button>
+        </FormGroup>
+        <FormTextArea label='About' placeholder='Tell us more about you...' />
+        <FormCheckbox label='I agree to the Terms and Conditions' />
+        <FormButton>Submit</FormButton>
       </Form>
     )
   }
diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js
index 10bc6ca32b..efddc1a610 100644
--- a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js
+++ b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js
@@ -1,22 +1,22 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormInput, FormGroup, Form } from 'semantic-ui-react'
 
 const FormExampleSubcomponentId = () => (
   <Form>
-    <Form.Group widths='equal'>
-      <Form.Input
+    <FormGroup widths='equal'>
+      <FormInput
         fluid
         id='form-subcomponent-shorthand-input-first-name'
         label='First name'
         placeholder='First name'
       />
-      <Form.Input
+      <FormInput
         fluid
         id='form-subcomponent-shorthand-input-last-name'
         label='Last name'
         placeholder='Last name'
       />
-    </Form.Group>
+    </FormGroup>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/Shorthand/index.js b/docs/src/examples/collections/Form/Shorthand/index.js
index 7f388eac43..17bf8926c7 100644
--- a/docs/src/examples/collections/Form/Shorthand/index.js
+++ b/docs/src/examples/collections/Form/Shorthand/index.js
@@ -6,29 +6,29 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import { Message } from 'semantic-ui-react'
 
 const subcomponentComparison = {
-  shorthand: "<Form.Input label='Enter Password' type='password' />",
-  longhand: `<Form.Field>
+  shorthand: "<FormInput label='Enter Password' type='password' />",
+  longhand: `<FormField>
   <label>Enter Password</label>
   <Input type='password' />
-</Form.Field>`,
+</FormField>`,
 }
 
 const componentPropComparison = {
   shorthand:
-    "<Form.Field label='Date' control={CustomCalendar} start='1' end='7' />",
-  longhand: `<Form.Field>
+    "<FormField label='Date' control={CustomCalendar} start='1' end='7' />",
+  longhand: `<FormField>
   <label>Date</label>
   <CustomCalendar start='1' end='7' />
-</Form.Field>`,
+</FormField>`,
 }
 
 const htmlComparison = {
   shorthand:
-    "<Form.Field label='Quantity' control='input' type='number' max={5} />",
-  longhand: `<Form.Field>
+    "<FormField label='Quantity' control='input' type='number' max={5} />",
+  longhand: `<FormField>
   <label>Quantity</label>
   <input type='number' max={5} />
-</Form.Field>`,
+</FormField>`,
 }
 
 const Compare = ({ longhand, shorthand }) => (
@@ -93,7 +93,7 @@ const FormTypesExamples = () => (
 
     <ComponentExample
       title='Accessible Labels'
-      description='Adding an id to a shorthand Form.Field adds a matching htmlFor prop to the label. In case of an error, the aria-describedby prop is used to connect the error label to the form field.'
+      description='Adding an id to a shorthand FormField adds a matching htmlFor prop to the label. In case of an error, the aria-describedby prop is used to connect the error label to the form field.'
       examplePath='collections/Form/Shorthand/FormExampleFieldControlId'
     />
 
diff --git a/docs/src/examples/collections/Form/States/FormExampleError.js b/docs/src/examples/collections/Form/States/FormExampleError.js
index 38a2180fb8..ec51d3af0b 100644
--- a/docs/src/examples/collections/Form/States/FormExampleError.js
+++ b/docs/src/examples/collections/Form/States/FormExampleError.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button, Form, Message } from 'semantic-ui-react'
+import { FormInput, Button, Form, Message } from 'semantic-ui-react'
 
 const FormExampleError = () => (
   <Form error>
-    <Form.Input label='Email' placeholder='joe@schmoe.com' />
+    <FormInput label='Email' placeholder='joe@schmoe.com' />
     <Message
       error
       header='Action Forbidden'
diff --git a/docs/src/examples/collections/Form/States/FormExampleFieldDisabled.js b/docs/src/examples/collections/Form/States/FormExampleFieldDisabled.js
index 2da1e7f262..f3aad408a3 100644
--- a/docs/src/examples/collections/Form/States/FormExampleFieldDisabled.js
+++ b/docs/src/examples/collections/Form/States/FormExampleFieldDisabled.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormInput, FormGroup, Form } from 'semantic-ui-react'
 
 const FormExampleFieldDisabled = () => (
   <Form>
-    <Form.Group widths='equal'>
-      <Form.Input fluid label='First name' placeholder='Disabled' disabled />
-      <Form.Input fluid label='Last name' placeholder='Disabled' disabled />
-    </Form.Group>
+    <FormGroup widths='equal'>
+      <FormInput fluid label='First name' placeholder='Disabled' disabled />
+      <FormInput fluid label='Last name' placeholder='Disabled' disabled />
+    </FormGroup>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/States/FormExampleFieldError.js b/docs/src/examples/collections/Form/States/FormExampleFieldError.js
index 7e78687ff3..7ff37febed 100644
--- a/docs/src/examples/collections/Form/States/FormExampleFieldError.js
+++ b/docs/src/examples/collections/Form/States/FormExampleFieldError.js
@@ -1,5 +1,11 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import {
+  FormSelect,
+  FormInput,
+  FormGroup,
+  FormCheckbox,
+  Form,
+} from 'semantic-ui-react'
 
 const options = [
   { key: 'm', text: 'Male', value: 'male' },
@@ -9,12 +15,12 @@ const options = [
 
 const FormExampleFieldError = () => (
   <Form>
-    <Form.Group widths='equal'>
-      <Form.Input fluid label='First name' placeholder='First name' error />
-      <Form.Input fluid label='Last name' placeholder='Last name' />
-    </Form.Group>
-    <Form.Select options={options} placeholder='Gender' error />
-    <Form.Checkbox label='I agree to the Terms and Conditions' error />
+    <FormGroup widths='equal'>
+      <FormInput fluid label='First name' placeholder='First name' error />
+      <FormInput fluid label='Last name' placeholder='Last name' />
+    </FormGroup>
+    <FormSelect options={options} placeholder='Gender' error />
+    <FormCheckbox label='I agree to the Terms and Conditions' error />
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js b/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js
index ac4bc6f384..7fe397f25d 100644
--- a/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js
+++ b/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js
@@ -1,22 +1,22 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormInput, FormCheckbox, Form } from 'semantic-ui-react'
 
 const FormExampleFieldErrorLabel = () => (
   <Form>
-    <Form.Input
+    <FormInput
       error={{ content: 'Please enter your first name', pointing: 'below' }}
       fluid
       label='First name'
       placeholder='First name'
       id='form-input-first-name'
     />
-    <Form.Input
+    <FormInput
       error='Please enter your last name'
       fluid
       label='Last name'
       placeholder='Last name'
     />
-    <Form.Checkbox
+    <FormCheckbox
       label='I agree to the Terms and Conditions'
       error={{
         content: 'You must agree to the terms and conditions',
diff --git a/docs/src/examples/collections/Form/States/FormExampleFieldReadOnly.js b/docs/src/examples/collections/Form/States/FormExampleFieldReadOnly.js
index 43c3f75454..9946f8a374 100644
--- a/docs/src/examples/collections/Form/States/FormExampleFieldReadOnly.js
+++ b/docs/src/examples/collections/Form/States/FormExampleFieldReadOnly.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormInput, FormGroup, Form } from 'semantic-ui-react'
 
 const FormExampleFieldReadOnly = () => (
   <Form>
-    <Form.Group widths='equal'>
-      <Form.Input fluid label='First name' placeholder='Read only' readOnly />
-      <Form.Input fluid label='Last name' placeholder='Read only' readOnly />
-    </Form.Group>
+    <FormGroup widths='equal'>
+      <FormInput fluid label='First name' placeholder='Read only' readOnly />
+      <FormInput fluid label='Last name' placeholder='Read only' readOnly />
+    </FormGroup>
   </Form>
 )
 
diff --git a/docs/src/examples/collections/Form/States/FormExampleLoading.js b/docs/src/examples/collections/Form/States/FormExampleLoading.js
index 218840b4af..07d0df6063 100644
--- a/docs/src/examples/collections/Form/States/FormExampleLoading.js
+++ b/docs/src/examples/collections/Form/States/FormExampleLoading.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button, Form } from 'semantic-ui-react'
+import { FormInput, Button, Form } from 'semantic-ui-react'
 
 const FormExampleLoading = () => (
   <Form loading>
-    <Form.Input label='Email' placeholder='joe@schmoe.com' />
+    <FormInput label='Email' placeholder='joe@schmoe.com' />
     <Button>Submit</Button>
   </Form>
 )
diff --git a/docs/src/examples/collections/Form/States/FormExampleSuccess.js b/docs/src/examples/collections/Form/States/FormExampleSuccess.js
index f2d5033dda..90100a3398 100644
--- a/docs/src/examples/collections/Form/States/FormExampleSuccess.js
+++ b/docs/src/examples/collections/Form/States/FormExampleSuccess.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button, Form, Message } from 'semantic-ui-react'
+import { FormInput, Button, Form, Message } from 'semantic-ui-react'
 
 const FormExampleSuccess = () => (
   <Form success>
-    <Form.Input label='Email' placeholder='joe@schmoe.com' />
+    <FormInput label='Email' placeholder='joe@schmoe.com' />
     <Message
       success
       header='Form Completed'
diff --git a/docs/src/examples/collections/Form/States/FormExampleWarning.js b/docs/src/examples/collections/Form/States/FormExampleWarning.js
index c783e901cc..ddd9a34eb6 100644
--- a/docs/src/examples/collections/Form/States/FormExampleWarning.js
+++ b/docs/src/examples/collections/Form/States/FormExampleWarning.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button, Form, Message } from 'semantic-ui-react'
+import { FormInput, Button, Form, Message } from 'semantic-ui-react'
 
 const FormExampleWarning = () => (
   <Form warning>
-    <Form.Input label='Email' placeholder='joe@schmoe.com' />
+    <FormInput label='Email' placeholder='joe@schmoe.com' />
     <Message
       warning
       header='Could you check something!'
diff --git a/docs/src/examples/collections/Form/Types/FormExampleForm.js b/docs/src/examples/collections/Form/Types/FormExampleForm.js
index 3951c95e50..84adaf5141 100644
--- a/docs/src/examples/collections/Form/Types/FormExampleForm.js
+++ b/docs/src/examples/collections/Form/Types/FormExampleForm.js
@@ -1,19 +1,19 @@
 import React from 'react'
-import { Button, Checkbox, Form } from 'semantic-ui-react'
+import { FormField, Button, Checkbox, Form } from 'semantic-ui-react'
 
 const FormExampleForm = () => (
   <Form>
-    <Form.Field>
+    <FormField>
       <label>First Name</label>
       <input placeholder='First Name' />
-    </Form.Field>
-    <Form.Field>
+    </FormField>
+    <FormField>
       <label>Last Name</label>
       <input placeholder='Last Name' />
-    </Form.Field>
-    <Form.Field>
+    </FormField>
+    <FormField>
       <Checkbox label='I agree to the Terms and Conditions' />
-    </Form.Field>
+    </FormField>
     <Button type='submit'>Submit</Button>
   </Form>
 )
diff --git a/docs/src/examples/collections/Form/Types/index.js b/docs/src/examples/collections/Form/Types/index.js
index bdf48760e5..6e2c452e7f 100644
--- a/docs/src/examples/collections/Form/Types/index.js
+++ b/docs/src/examples/collections/Form/Types/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Message, Icon } from 'semantic-ui-react'
+import { MessageContent, Message, Icon } from 'semantic-ui-react'
 
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
@@ -13,10 +13,10 @@ const FormTypesExamples = () => (
     >
       <Message info icon>
         <Icon name='pointing right' />
-        <Message.Content>
+        <MessageContent>
           Forms also have a robust shorthand props API for generating controls
           wrapped in FormFields. See shorthand examples below.
-        </Message.Content>
+        </MessageContent>
       </Message>
     </ComponentExample>
   </ExampleSection>
diff --git a/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js b/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js
index 243764deae..cf59d670d9 100644
--- a/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js
+++ b/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormInput, FormGroup, FormButton, Form } from 'semantic-ui-react'
 
 class FormExampleCaptureValues extends Component {
   state = { name: '', email: '', submittedName: '', submittedEmail: '' }
@@ -18,21 +18,21 @@ class FormExampleCaptureValues extends Component {
     return (
       <div>
         <Form onSubmit={this.handleSubmit}>
-          <Form.Group>
-            <Form.Input
+          <FormGroup>
+            <FormInput
               placeholder='Name'
               name='name'
               value={name}
               onChange={this.handleChange}
             />
-            <Form.Input
+            <FormInput
               placeholder='Email'
               name='email'
               value={email}
               onChange={this.handleChange}
             />
-            <Form.Button content='Submit' />
-          </Form.Group>
+            <FormButton content='Submit' />
+          </FormGroup>
         </Form>
         <strong>onChange:</strong>
         <pre>{JSON.stringify({ name, email }, null, 2)}</pre>
diff --git a/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js b/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js
index 989d6f57ed..f9ae0d9c16 100644
--- a/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js
+++ b/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Form } from 'semantic-ui-react'
+import { FormInput, FormGroup, FormButton, Form } from 'semantic-ui-react'
 
 class FormExampleClearOnSubmit extends Component {
   state = {}
@@ -13,21 +13,21 @@ class FormExampleClearOnSubmit extends Component {
 
     return (
       <Form onSubmit={this.handleSubmit}>
-        <Form.Group>
-          <Form.Input
+        <FormGroup>
+          <FormInput
             placeholder='Name'
             name='name'
             value={name}
             onChange={this.handleChange}
           />
-          <Form.Input
+          <FormInput
             placeholder='Email'
             name='email'
             value={email}
             onChange={this.handleChange}
           />
-          <Form.Button content='Submit' />
-        </Form.Group>
+          <FormButton content='Submit' />
+        </FormGroup>
       </Form>
     )
   }
diff --git a/docs/src/examples/collections/Form/Usage/index.js b/docs/src/examples/collections/Form/Usage/index.js
index 9543ccf78c..f251061b41 100644
--- a/docs/src/examples/collections/Form/Usage/index.js
+++ b/docs/src/examples/collections/Form/Usage/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Message, Icon } from 'semantic-ui-react'
+import { MessageHeader, MessageContent, Message, Icon } from 'semantic-ui-react'
 
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
@@ -8,8 +8,8 @@ const FormFormUsageExamples = () => (
   <ExampleSection title='Usage'>
     <Message info icon>
       <Icon name='pointing right' />
-      <Message.Content>
-        <Message.Header>Tip</Message.Header>
+      <MessageContent>
+        <MessageHeader>Tip</MessageHeader>
         <p>
           Our <code>{'<Form />'}</code> handles data just like a vanilla React{' '}
           <code>{'<form />'}</code>. See React's
@@ -23,7 +23,7 @@ const FormFormUsageExamples = () => (
           </a>
           docs for more.
         </p>
-      </Message.Content>
+      </MessageContent>
     </Message>
     <ComponentExample
       title='Capture Values'
diff --git a/docs/src/examples/collections/Form/Variations/FormExampleInverted.js b/docs/src/examples/collections/Form/Variations/FormExampleInverted.js
index b38bafa2ba..4b11a5bbfa 100644
--- a/docs/src/examples/collections/Form/Variations/FormExampleInverted.js
+++ b/docs/src/examples/collections/Form/Variations/FormExampleInverted.js
@@ -1,14 +1,21 @@
 import React from 'react'
-import { Button, Form, Segment } from 'semantic-ui-react'
+import {
+  FormInput,
+  FormGroup,
+  FormCheckbox,
+  Button,
+  Form,
+  Segment,
+} from 'semantic-ui-react'
 
 const FormExampleInverted = () => (
   <Segment inverted>
     <Form inverted>
-      <Form.Group widths='equal'>
-        <Form.Input fluid label='First name' placeholder='First name' />
-        <Form.Input fluid label='Last name' placeholder='Last name' />
-      </Form.Group>
-      <Form.Checkbox label='I agree to the Terms and Conditions' />
+      <FormGroup widths='equal'>
+        <FormInput fluid label='First name' placeholder='First name' />
+        <FormInput fluid label='Last name' placeholder='Last name' />
+      </FormGroup>
+      <FormCheckbox label='I agree to the Terms and Conditions' />
       <Button type='submit'>Submit</Button>
     </Form>
   </Segment>
diff --git a/docs/src/examples/collections/Form/Variations/FormExampleSize.js b/docs/src/examples/collections/Form/Variations/FormExampleSize.js
index 64ca98c0a9..0c84ddd432 100644
--- a/docs/src/examples/collections/Form/Variations/FormExampleSize.js
+++ b/docs/src/examples/collections/Form/Variations/FormExampleSize.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Divider, Form } from 'semantic-ui-react'
+import { FormGroup, FormField, Button, Divider, Form } from 'semantic-ui-react'
 
 const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
 
@@ -7,18 +7,18 @@ const FormExampleSize = () => (
   <div>
     {sizes.map((size) => (
       <Form size={size} key={size}>
-        <Form.Group widths='equal'>
-          <Form.Field
+        <FormGroup widths='equal'>
+          <FormField
             label='First name'
             control='input'
             placeholder='First name'
           />
-          <Form.Field
+          <FormField
             label='Last name'
             control='input'
             placeholder='Last name'
           />
-        </Form.Group>
+        </FormGroup>
         <Button type='submit'>Submit</Button>
         <Divider hidden />
       </Form>
diff --git a/docs/src/examples/collections/Form/Variations/FormExampleUnstackable.js b/docs/src/examples/collections/Form/Variations/FormExampleUnstackable.js
index 1574774310..a1411c149d 100644
--- a/docs/src/examples/collections/Form/Variations/FormExampleUnstackable.js
+++ b/docs/src/examples/collections/Form/Variations/FormExampleUnstackable.js
@@ -1,13 +1,19 @@
 import React from 'react'
-import { Button, Form } from 'semantic-ui-react'
+import {
+  FormInput,
+  FormGroup,
+  FormCheckbox,
+  Button,
+  Form,
+} from 'semantic-ui-react'
 
 const FormExampleUnstackable = () => (
   <Form unstackable>
-    <Form.Group widths={2}>
-      <Form.Input label='First name' placeholder='First name' />
-      <Form.Input label='Last name' placeholder='Last name' />
-    </Form.Group>
-    <Form.Checkbox label='I agree to the Terms and Conditions' />
+    <FormGroup widths={2}>
+      <FormInput label='First name' placeholder='First name' />
+      <FormInput label='Last name' placeholder='Last name' />
+    </FormGroup>
+    <FormCheckbox label='I agree to the Terms and Conditions' />
     <Button type='submit'>Submit</Button>
   </Form>
 )
diff --git a/docs/src/examples/collections/Grid/Content/GridExampleColumns.js b/docs/src/examples/collections/Grid/Content/GridExampleColumns.js
index e16238ee66..142905472c 100644
--- a/docs/src/examples/collections/Grid/Content/GridExampleColumns.js
+++ b/docs/src/examples/collections/Grid/Content/GridExampleColumns.js
@@ -1,25 +1,25 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleColumns = () => (
   <Grid>
-    <Grid.Row>
-      <Grid.Column width={8}>
+    <GridRow>
+      <GridColumn width={8}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column width={8}>
+      </GridColumn>
+      <GridColumn width={8}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row>
-      <Grid.Column width={8}>
+    <GridRow>
+      <GridColumn width={8}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column width={8}>
+      </GridColumn>
+      <GridColumn width={8}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Content/GridExampleRows.js b/docs/src/examples/collections/Grid/Content/GridExampleRows.js
index 512a43b9b2..8911294e88 100644
--- a/docs/src/examples/collections/Grid/Content/GridExampleRows.js
+++ b/docs/src/examples/collections/Grid/Content/GridExampleRows.js
@@ -1,28 +1,28 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleRows = () => (
   <Grid columns={3}>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleContainer.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleContainer.js
index b9d64c46dd..caf433016f 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleContainer.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleContainer.js
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleContainer = () => (
   <Grid container columns={3}>
-    <Grid.Column>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleDoubling.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleDoubling.js
index a4c767d5f1..dc5e2da4eb 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleDoubling.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleDoubling.js
@@ -1,23 +1,23 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleDoubling = () => (
   <Grid doubling columns={5}>
-    <Grid.Column>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleOnly.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleOnly.js
index 26ca88fa27..e95aefd062 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleOnly.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleOnly.js
@@ -1,71 +1,71 @@
 import React from 'react'
-import { Grid, Segment } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Segment } from 'semantic-ui-react'
 
 const GridExampleOnly = () => (
   <Grid>
-    <Grid.Row columns={2} only='large screen'>
-      <Grid.Column>
+    <GridRow columns={2} only='large screen'>
+      <GridColumn>
         <Segment>Large Screen</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Large Screen</Segment>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row columns={2} only='widescreen'>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow columns={2} only='widescreen'>
+      <GridColumn>
         <Segment>Widescreen</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Widescreen</Segment>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row columns={2} only='mobile'>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow columns={2} only='mobile'>
+      <GridColumn>
         <Segment>Mobile</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Mobile</Segment>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row columns={3}>
-      <Grid.Column only='computer'>
+      </GridColumn>
+    </GridRow>
+    <GridRow columns={3}>
+      <GridColumn only='computer'>
         <Segment>Computer</Segment>
-      </Grid.Column>
-      <Grid.Column only='tablet mobile'>
+      </GridColumn>
+      <GridColumn only='tablet mobile'>
         <Segment>Tablet and Mobile</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>All Sizes</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>All Sizes</Segment>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row columns={4} only='computer'>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow columns={4} only='computer'>
+      <GridColumn>
         <Segment>Computer</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Computer</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Computer</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Computer</Segment>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row columns={3} only='tablet'>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow columns={3} only='tablet'>
+      <GridColumn>
         <Segment>Tablet</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Tablet</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Tablet</Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleOnlyMultiple.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleOnlyMultiple.js
index 5189b893fb..1db77a0433 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleOnlyMultiple.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleOnlyMultiple.js
@@ -1,34 +1,34 @@
 import React from 'react'
-import { Grid, Segment } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Segment } from 'semantic-ui-react'
 
 const GridExampleOnlyMultiple = () => (
   <Grid>
-    <Grid.Row columns={2} only='mobile tablet'>
-      <Grid.Column>
+    <GridRow columns={2} only='mobile tablet'>
+      <GridColumn>
         <Segment>Mobile</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Tablet</Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row columns={2} only='tablet computer'>
-      <Grid.Column>
+    <GridRow columns={2} only='tablet computer'>
+      <GridColumn>
         <Segment>Tablet</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Computer</Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row columns={2} only='large screen widescreen'>
-      <Grid.Column>
+    <GridRow columns={2} only='large screen widescreen'>
+      <GridColumn>
         <Segment>Large Screen</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>Widescreen</Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleResponsiveWidth.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleResponsiveWidth.js
index 8899a0b64c..70d0f3ca63 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleResponsiveWidth.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleResponsiveWidth.js
@@ -1,39 +1,39 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleResponsiveWidth = () => (
   <div>
     <Grid>
-      <Grid.Column mobile={16} tablet={8} computer={4}>
+      <GridColumn mobile={16} tablet={8} computer={4}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column mobile={16} tablet={8} computer={4}>
+      </GridColumn>
+      <GridColumn mobile={16} tablet={8} computer={4}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column mobile={16} tablet={8} computer={4}>
+      </GridColumn>
+      <GridColumn mobile={16} tablet={8} computer={4}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column mobile={16} tablet={8} computer={4}>
+      </GridColumn>
+      <GridColumn mobile={16} tablet={8} computer={4}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column mobile={16} tablet={8} computer={4}>
+      </GridColumn>
+      <GridColumn mobile={16} tablet={8} computer={4}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
+      </GridColumn>
     </Grid>
 
     <Grid>
-      <Grid.Column largeScreen={2} widescreen={1}>
+      <GridColumn largeScreen={2} widescreen={1}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column largeScreen={2} widescreen={1}>
+      </GridColumn>
+      <GridColumn largeScreen={2} widescreen={1}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column largeScreen={2} widescreen={1}>
+      </GridColumn>
+      <GridColumn largeScreen={2} widescreen={1}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column largeScreen={2} widescreen={1}>
+      </GridColumn>
+      <GridColumn largeScreen={2} widescreen={1}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   </div>
 )
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedComputer.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedComputer.js
index ad277c023f..c90927ee64 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedComputer.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedComputer.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid } from 'semantic-ui-react'
 
 const GridExampleReversedComputer = () => (
   <Grid reversed='computer' columns='equal'>
-    <Grid.Row>
-      <Grid.Column>Computer A Fourth</Grid.Column>
-      <Grid.Column>Computer A Third</Grid.Column>
-      <Grid.Column>Computer A Second</Grid.Column>
-      <Grid.Column>Computer A First</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Computer B Fourth</Grid.Column>
-      <Grid.Column>Computer B Third</Grid.Column>
-      <Grid.Column>Computer B Second</Grid.Column>
-      <Grid.Column>Computer B First</Grid.Column>
-    </Grid.Row>
+    <GridRow>
+      <GridColumn>Computer A Fourth</GridColumn>
+      <GridColumn>Computer A Third</GridColumn>
+      <GridColumn>Computer A Second</GridColumn>
+      <GridColumn>Computer A First</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Computer B Fourth</GridColumn>
+      <GridColumn>Computer B Third</GridColumn>
+      <GridColumn>Computer B Second</GridColumn>
+      <GridColumn>Computer B First</GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedComputerVertically.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedComputerVertically.js
index 31e761a4eb..518180e45b 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedComputerVertically.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedComputerVertically.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid } from 'semantic-ui-react'
 
 const GridExampleReversedComputerVertically = () => (
   <Grid reversed='computer vertically'>
-    <Grid.Row>
-      <Grid.Column>Computer Row 4</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Computer Row 3</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Computer Row 2</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Computer Row 1</Grid.Column>
-    </Grid.Row>
+    <GridRow>
+      <GridColumn>Computer Row 4</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Computer Row 3</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Computer Row 2</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Computer Row 1</GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobile.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobile.js
index 13f22f0869..17c1b10684 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobile.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobile.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridColumn, Grid } from 'semantic-ui-react'
 
 const GridExampleReversedMobile = () => (
   <Grid reversed='mobile' columns='equal'>
-    <Grid.Column>Mobile Fourth</Grid.Column>
-    <Grid.Column>Mobile Third</Grid.Column>
-    <Grid.Column>Mobile Second</Grid.Column>
-    <Grid.Column>Mobile First</Grid.Column>
+    <GridColumn>Mobile Fourth</GridColumn>
+    <GridColumn>Mobile Third</GridColumn>
+    <GridColumn>Mobile Second</GridColumn>
+    <GridColumn>Mobile First</GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobileVertically.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobileVertically.js
index 0e5486146b..f9c27abc48 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobileVertically.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMobileVertically.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid } from 'semantic-ui-react'
 
 const GridExampleReversedMobileVertically = () => (
   <Grid reversed='mobile vertically'>
-    <Grid.Row>
-      <Grid.Column>Mobile Row 4</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Mobile Row 3</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Mobile Row 2</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Mobile Row 1</Grid.Column>
-    </Grid.Row>
+    <GridRow>
+      <GridColumn>Mobile Row 4</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Mobile Row 3</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Mobile Row 2</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Mobile Row 1</GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMultiple.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMultiple.js
index e2ad3d19cd..4bb946b841 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMultiple.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedMultiple.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid } from 'semantic-ui-react'
 
 const GridExampleReversedMultiple = () => (
   <Grid reversed='computer tablet' columns='equal'>
-    <Grid.Row>
-      <Grid.Column>Computer and Tablet Fourth</Grid.Column>
-      <Grid.Column>Computer and Tablet Third</Grid.Column>
-      <Grid.Column>Computer and Tablet Second</Grid.Column>
-    </Grid.Row>
+    <GridRow>
+      <GridColumn>Computer and Tablet Fourth</GridColumn>
+      <GridColumn>Computer and Tablet Third</GridColumn>
+      <GridColumn>Computer and Tablet Second</GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedTablet.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedTablet.js
index 0f8c7ae1c5..a64c68747f 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedTablet.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedTablet.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridColumn, Grid } from 'semantic-ui-react'
 
 const GridExampleReversedTablet = () => (
   <Grid reversed='tablet' columns='equal'>
-    <Grid.Column>Tablet Fourth</Grid.Column>
-    <Grid.Column>Tablet Third</Grid.Column>
-    <Grid.Column>Tablet Second</Grid.Column>
-    <Grid.Column>Tablet First</Grid.Column>
+    <GridColumn>Tablet Fourth</GridColumn>
+    <GridColumn>Tablet Third</GridColumn>
+    <GridColumn>Tablet Second</GridColumn>
+    <GridColumn>Tablet First</GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedTabletVertically.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedTabletVertically.js
index ef7142c065..6c6b64f361 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedTabletVertically.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleReversedTabletVertically.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid } from 'semantic-ui-react'
 
 const GridExampleReversedTabletVertically = () => (
   <Grid reversed='tablet vertically'>
-    <Grid.Row>
-      <Grid.Column>Tablet Row 4</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Tablet Row 3</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Tablet Row 2</Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>Tablet Row 1</Grid.Column>
-    </Grid.Row>
+    <GridRow>
+      <GridColumn>Tablet Row 4</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Tablet Row 3</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Tablet Row 2</GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>Tablet Row 1</GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleStackable.js b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleStackable.js
index 0f29b9a077..30fc355d91 100644
--- a/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleStackable.js
+++ b/docs/src/examples/collections/Grid/ResponsiveVariations/GridExampleStackable.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Grid, Image, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Segment } from 'semantic-ui-react'
 
 const GridExampleStackable = () => (
   <Grid stackable columns={2}>
-    <Grid.Column>
+    <GridColumn>
       <Segment>
         <Image src='/images/wireframe/paragraph.png' />
       </Segment>
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Segment>
         <Image src='/images/wireframe/paragraph.png' />
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Types/GridExampleCelled.js b/docs/src/examples/collections/Grid/Types/GridExampleCelled.js
index 0527325846..036de739ee 100644
--- a/docs/src/examples/collections/Grid/Types/GridExampleCelled.js
+++ b/docs/src/examples/collections/Grid/Types/GridExampleCelled.js
@@ -1,28 +1,28 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleCelled = () => (
   <Grid celled>
-    <Grid.Row>
-      <Grid.Column width={3}>
+    <GridRow>
+      <GridColumn width={3}>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column width={13}>
+      </GridColumn>
+      <GridColumn width={13}>
         <Image src='/images/wireframe/centered-paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row>
-      <Grid.Column width={3}>
+    <GridRow>
+      <GridColumn width={3}>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column width={10}>
+      </GridColumn>
+      <GridColumn width={10}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column width={3}>
+      </GridColumn>
+      <GridColumn width={3}>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Types/GridExampleCelledInternally.js b/docs/src/examples/collections/Grid/Types/GridExampleCelledInternally.js
index 2266606eea..97f7a91814 100644
--- a/docs/src/examples/collections/Grid/Types/GridExampleCelledInternally.js
+++ b/docs/src/examples/collections/Grid/Types/GridExampleCelledInternally.js
@@ -1,31 +1,31 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleCelledInternally = () => (
   <Grid celled='internally'>
-    <Grid.Row>
-      <Grid.Column width={3}>
+    <GridRow>
+      <GridColumn width={3}>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column width={10}>
+      </GridColumn>
+      <GridColumn width={10}>
         <Image src='/images/wireframe/centered-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column width={3}>
+      </GridColumn>
+      <GridColumn width={3}>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row>
-      <Grid.Column width={3}>
+    <GridRow>
+      <GridColumn width={3}>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column width={10}>
+      </GridColumn>
+      <GridColumn width={10}>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column width={3}>
+      </GridColumn>
+      <GridColumn width={3}>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Types/GridExampleDividedNumber.js b/docs/src/examples/collections/Grid/Types/GridExampleDividedNumber.js
index cf7be4244f..8a427d6ce8 100644
--- a/docs/src/examples/collections/Grid/Types/GridExampleDividedNumber.js
+++ b/docs/src/examples/collections/Grid/Types/GridExampleDividedNumber.js
@@ -1,31 +1,31 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleDividedNumber = () => (
   <Grid columns={3} divided>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Types/GridExampleDividedPhrase.js b/docs/src/examples/collections/Grid/Types/GridExampleDividedPhrase.js
index e91bf70b70..def7ac624b 100644
--- a/docs/src/examples/collections/Grid/Types/GridExampleDividedPhrase.js
+++ b/docs/src/examples/collections/Grid/Types/GridExampleDividedPhrase.js
@@ -1,31 +1,31 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleDividedPhrase = () => (
   <Grid columns='three' divided>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/media-paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Types/GridExampleDividedVertically.js b/docs/src/examples/collections/Grid/Types/GridExampleDividedVertically.js
index 8e0e6b32da..4f7f7e1ec1 100644
--- a/docs/src/examples/collections/Grid/Types/GridExampleDividedVertically.js
+++ b/docs/src/examples/collections/Grid/Types/GridExampleDividedVertically.js
@@ -1,28 +1,28 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleVerticallyDivided = () => (
   <Grid divided='vertically'>
-    <Grid.Row columns={2}>
-      <Grid.Column>
+    <GridRow columns={2}>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row columns={3}>
-      <Grid.Column>
+    <GridRow columns={3}>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Types/GridExampleGrid.js b/docs/src/examples/collections/Grid/Types/GridExampleGrid.js
index 81cad75880..12f078f65e 100644
--- a/docs/src/examples/collections/Grid/Types/GridExampleGrid.js
+++ b/docs/src/examples/collections/Grid/Types/GridExampleGrid.js
@@ -1,11 +1,11 @@
 import _ from 'lodash'
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const columns = _.times(16, (i) => (
-  <Grid.Column key={i}>
+  <GridColumn key={i}>
     <Image src='/images/wireframe/image.png' />
-  </Grid.Column>
+  </GridColumn>
 ))
 
 const GridExampleGrid = () => <Grid>{columns}</Grid>
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleCentered.js b/docs/src/examples/collections/Grid/Variations/GridExampleCentered.js
index 51c77f749c..9e6f43227c 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleCentered.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleCentered.js
@@ -1,38 +1,38 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleCentered = () => (
   <Grid centered columns={2}>
-    <Grid.Column>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
+    </GridColumn>
 
-    <Grid.Row centered columns={4}>
-      <Grid.Column>
+    <GridRow centered columns={4}>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row centered columns={4}>
-      <Grid.Column>
+    <GridRow centered columns={4}>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleColoredColumn.js b/docs/src/examples/collections/Grid/Variations/GridExampleColoredColumn.js
index fa3ce25089..c1c45250b2 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleColoredColumn.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleColoredColumn.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridColumn, Grid } from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -21,9 +21,9 @@ const colors = [
 const GridExampleColoredColumn = () => (
   <Grid columns={5} padded>
     {colors.map((color) => (
-      <Grid.Column color={color} key={color}>
+      <GridColumn color={color} key={color}>
         {_.capitalize(color)}
-      </Grid.Column>
+      </GridColumn>
     ))}
   </Grid>
 )
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleColoredRow.js b/docs/src/examples/collections/Grid/Variations/GridExampleColoredRow.js
index 46f237e0ba..e35df2cb94 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleColoredRow.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleColoredRow.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React from 'react'
-import { Grid } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid } from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -21,9 +21,9 @@ const colors = [
 const GridColoredRowExample = () => (
   <Grid padded>
     {colors.map((color) => (
-      <Grid.Row color={color} key={color}>
-        <Grid.Column>{_.capitalize(color)}</Grid.Column>
-      </Grid.Row>
+      <GridRow color={color} key={color}>
+        <GridColumn>{_.capitalize(color)}</GridColumn>
+      </GridRow>
     ))}
   </Grid>
 )
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleColumnCount.js b/docs/src/examples/collections/Grid/Variations/GridExampleColumnCount.js
index 4e8f54fe10..779536fb4d 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleColumnCount.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleColumnCount.js
@@ -1,52 +1,52 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleColumnCount = () => (
   <Grid>
-    <Grid.Row columns={3}>
-      <Grid.Column>
+    <GridRow columns={3}>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row columns={4}>
-      <Grid.Column>
+    <GridRow columns={4}>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row columns={5}>
-      <Grid.Column>
+    <GridRow columns={5}>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleColumnWidth.js b/docs/src/examples/collections/Grid/Variations/GridExampleColumnWidth.js
index 93d4eb4052..234e153aca 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleColumnWidth.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleColumnWidth.js
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleColumnWidth = () => (
   <Grid>
-    <Grid.Column width={4}>
+    <GridColumn width={4}>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column width={9}>
+    </GridColumn>
+    <GridColumn width={9}>
       <Image src='/images/wireframe/paragraph.png' />
-    </Grid.Column>
-    <Grid.Column width={3}>
+    </GridColumn>
+    <GridColumn width={3}>
       <Image src='/images/wireframe/media-paragraph.png' />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleEqualWidthColumn.js b/docs/src/examples/collections/Grid/Variations/GridExampleEqualWidthColumn.js
index 8cace4edbd..56fab7afc2 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleEqualWidthColumn.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleEqualWidthColumn.js
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Grid, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Segment } from 'semantic-ui-react'
 
 const GridExampleEqualWidthColumn = () => (
   <Grid columns='equal'>
-    <Grid.Column>
+    <GridColumn>
       <Segment>1</Segment>
-    </Grid.Column>
-    <Grid.Column width={8}>
+    </GridColumn>
+    <GridColumn width={8}>
       <Segment>2</Segment>
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Segment>3</Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleEqualWidthRow.js b/docs/src/examples/collections/Grid/Variations/GridExampleEqualWidthRow.js
index 470f749c44..5f0868a10c 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleEqualWidthRow.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleEqualWidthRow.js
@@ -1,41 +1,41 @@
 import React from 'react'
-import { Grid, Segment } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Segment } from 'semantic-ui-react'
 
 const GridExampleEqualWidthRow = () => (
   <Grid columns='equal'>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Segment>1</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>2</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>3</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>4</Segment>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>
         <Segment>1</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>2</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>3</Segment>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>
         <Segment>1</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>2</Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleFloated.js b/docs/src/examples/collections/Grid/Variations/GridExampleFloated.js
index c47abc3f6e..0374e39ad0 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleFloated.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleFloated.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleFloated = () => (
   <Grid>
-    <Grid.Column floated='left' width={5}>
+    <GridColumn floated='left' width={5}>
       <Image src='/images/wireframe/paragraph.png' />
-    </Grid.Column>
-    <Grid.Column floated='right' width={5}>
+    </GridColumn>
+    <GridColumn floated='right' width={5}>
       <Image src='/images/wireframe/paragraph.png' />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleInverted.js b/docs/src/examples/collections/Grid/Variations/GridExampleInverted.js
index 7b479f1a4f..2afb2e34bc 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleInverted.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleInverted.js
@@ -1,25 +1,25 @@
 import React from 'react'
-import { Grid, Segment } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Segment } from 'semantic-ui-react'
 
 const GridExampleInverted = () => (
   <Grid columns='equal' divided inverted padded>
-    <Grid.Row color='black' textAlign='center'>
-      <Grid.Column>
+    <GridRow color='black' textAlign='center'>
+      <GridColumn>
         <Segment color='black' inverted>
           1
         </Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment color='black' inverted>
           2
         </Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment color='black' inverted>
           3
         </Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExamplePadded.js b/docs/src/examples/collections/Grid/Variations/GridExamplePadded.js
index 1a8b6bcb8e..795e4c186c 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExamplePadded.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExamplePadded.js
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExamplePadded = () => (
   <div>
     <p>The following grid has vertical and horizontal gutters.</p>
 
     <Grid columns={2} padded>
-      <Grid.Column>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   </div>
 )
diff --git a/docs/src/examples/collections/Grid/Variations/GridExamplePaddedHorizontally.js b/docs/src/examples/collections/Grid/Variations/GridExamplePaddedHorizontally.js
index a5a2fdec45..480ffc934e 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExamplePaddedHorizontally.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExamplePaddedHorizontally.js
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExamplePaddedHorizontally = () => (
   <div>
     <p>The following grid has horizontal gutters.</p>
 
     <Grid columns={2} padded='horizontally'>
-      <Grid.Column>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   </div>
 )
diff --git a/docs/src/examples/collections/Grid/Variations/GridExamplePaddedVertically.js b/docs/src/examples/collections/Grid/Variations/GridExamplePaddedVertically.js
index d77b579891..a1f1d6918a 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExamplePaddedVertically.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExamplePaddedVertically.js
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExamplePaddedVertically = () => (
   <div>
     <p>The following grid has vertical gutters.</p>
 
     <Grid columns={2} padded='vertically'>
-      <Grid.Column>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/paragraph.png' />
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   </div>
 )
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleRelaxed.js b/docs/src/examples/collections/Grid/Variations/GridExampleRelaxed.js
index ecf5bbf57f..86dd95bd1a 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleRelaxed.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleRelaxed.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleRelaxed = () => (
   <Grid relaxed columns={4}>
-    <Grid.Column>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleRelaxedVery.js b/docs/src/examples/collections/Grid/Variations/GridExampleRelaxedVery.js
index 81b8d0981e..1cef383891 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleRelaxedVery.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleRelaxedVery.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleRelaxedVery = () => (
   <Grid relaxed='very' columns={4}>
-    <Grid.Column>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Image src='/images/wireframe/image.png' />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleStretched.js b/docs/src/examples/collections/Grid/Variations/GridExampleStretched.js
index 32fd2ebf4a..804b4bb671 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleStretched.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleStretched.js
@@ -1,22 +1,22 @@
 import React from 'react'
-import { Grid, Segment } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Segment } from 'semantic-ui-react'
 
 const GridExampleStretched = () => (
   <Grid columns={3} divided>
-    <Grid.Row stretched>
-      <Grid.Column>
+    <GridRow stretched>
+      <GridColumn>
         <Segment>1</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>1</Segment>
         <Segment>2</Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>1</Segment>
         <Segment>2</Segment>
         <Segment>3</Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleStretchedEqual.js b/docs/src/examples/collections/Grid/Variations/GridExampleStretchedEqual.js
index c1a0e91d9c..4ba1217da6 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleStretchedEqual.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleStretchedEqual.js
@@ -1,38 +1,38 @@
 import React from 'react'
-import { Grid, Image, Segment } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image, Segment } from 'semantic-ui-react'
 
 const GridExampleStretchedEqual = () => (
   <Grid columns='equal'>
-    <Grid.Row stretched>
-      <Grid.Column>
+    <GridRow stretched>
+      <GridColumn>
         <Segment>1</Segment>
         <Segment>2</Segment>
-      </Grid.Column>
-      <Grid.Column width={6}>
+      </GridColumn>
+      <GridColumn width={6}>
         <Segment>
           <Image src='/images/wireframe/paragraph.png' />
         </Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>1</Segment>
         <Segment>2</Segment>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>
         <Segment>1</Segment>
         <Segment>2</Segment>
-      </Grid.Column>
-      <Grid.Column width={6}>
+      </GridColumn>
+      <GridColumn width={6}>
         <Segment>
           <Image src='/images/wireframe/paragraph.png' />
         </Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment>1</Segment>
         <Segment>2</Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentCenter.js b/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentCenter.js
index b24074a779..2b2dffddcb 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentCenter.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentCenter.js
@@ -1,27 +1,27 @@
 import React from 'react'
-import { Grid, Menu } from 'semantic-ui-react'
+import { MenuItem, GridRow, GridColumn, Grid, Menu } from 'semantic-ui-react'
 
 const GridExampleTextAlignmentCenter = () => (
   <Grid textAlign='center' columns={3}>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Cats</Menu.Item>
+          <MenuItem className='header'>Cats</MenuItem>
         </Menu>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Dogs</Menu.Item>
-          <Menu.Item>Poodle</Menu.Item>
-          <Menu.Item>Cockerspaniel</Menu.Item>
+          <MenuItem className='header'>Dogs</MenuItem>
+          <MenuItem>Poodle</MenuItem>
+          <MenuItem>Cockerspaniel</MenuItem>
         </Menu>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Monkeys</Menu.Item>
+          <MenuItem className='header'>Monkeys</MenuItem>
         </Menu>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentMixed.js b/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentMixed.js
index f5aefc4086..f579fa5b6c 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentMixed.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentMixed.js
@@ -1,29 +1,29 @@
 import React from 'react'
-import { Grid, Menu } from 'semantic-ui-react'
+import { MenuItem, GridRow, GridColumn, Grid, Menu } from 'semantic-ui-react'
 
 const GridExampleTextAlignmentJustified = () => (
   <Grid>
-    <Grid.Row columns={3}>
-      <Grid.Column>
+    <GridRow columns={3}>
+      <GridColumn>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Cats</Menu.Item>
+          <MenuItem className='header'>Cats</MenuItem>
         </Menu>
-      </Grid.Column>
-      <Grid.Column textAlign='center'>
+      </GridColumn>
+      <GridColumn textAlign='center'>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Dogs</Menu.Item>
-          <Menu.Item>Poodle</Menu.Item>
-          <Menu.Item>Cockerspaniel</Menu.Item>
+          <MenuItem className='header'>Dogs</MenuItem>
+          <MenuItem>Poodle</MenuItem>
+          <MenuItem>Cockerspaniel</MenuItem>
         </Menu>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Monkeys</Menu.Item>
+          <MenuItem className='header'>Monkeys</MenuItem>
         </Menu>
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row textAlign='justified'>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow textAlign='justified'>
+      <GridColumn>
         <p>
           Justified content fits exactly inside the grid column, taking up the
           entire width from one side to the other. Justified content fits
@@ -35,8 +35,8 @@ const GridExampleTextAlignmentJustified = () => (
           exactly inside the grid column, taking up the entire width from one
           side to the other.
         </p>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentRight.js b/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentRight.js
index 741acc3615..0c8de52148 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentRight.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleTextAlignmentRight.js
@@ -1,27 +1,27 @@
 import React from 'react'
-import { Grid, Menu } from 'semantic-ui-react'
+import { MenuItem, GridRow, GridColumn, Grid, Menu } from 'semantic-ui-react'
 
 const GridExampleTextAlignmentRight = () => (
   <Grid textAlign='right' columns={3}>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Cats</Menu.Item>
+          <MenuItem className='header'>Cats</MenuItem>
         </Menu>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Dogs</Menu.Item>
-          <Menu.Item>Poodle</Menu.Item>
-          <Menu.Item>Cockerspaniel</Menu.Item>
+          <MenuItem className='header'>Dogs</MenuItem>
+          <MenuItem>Poodle</MenuItem>
+          <MenuItem>Cockerspaniel</MenuItem>
         </Menu>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Menu fluid vertical>
-          <Menu.Item className='header'>Monkeys</Menu.Item>
+          <MenuItem className='header'>Monkeys</MenuItem>
         </Menu>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleVerticalAlignment.js b/docs/src/examples/collections/Grid/Variations/GridExampleVerticalAlignment.js
index f5d8f0a475..eaa9c52dd5 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleVerticalAlignment.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleVerticalAlignment.js
@@ -1,21 +1,21 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleVerticalAlignment = () => (
   <Grid verticalAlign='middle' columns={4} centered>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
         <br />
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Grid/Variations/GridExampleVerticalAlignmentRow.js b/docs/src/examples/collections/Grid/Variations/GridExampleVerticalAlignmentRow.js
index e3758c88fa..9a380b7008 100644
--- a/docs/src/examples/collections/Grid/Variations/GridExampleVerticalAlignmentRow.js
+++ b/docs/src/examples/collections/Grid/Variations/GridExampleVerticalAlignmentRow.js
@@ -1,47 +1,47 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridRow, GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const GridExampleVerticalAlignmentRow = () => (
   <Grid columns={4} centered>
-    <Grid.Row verticalAlign='top'>
-      <Grid.Column>
+    <GridRow verticalAlign='top'>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
         <br />
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row verticalAlign='middle'>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow verticalAlign='middle'>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
         <br />
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row verticalAlign='bottom'>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow verticalAlign='bottom'>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
         <br />
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Image src='/images/wireframe/image.png' />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleButtons.js b/docs/src/examples/collections/Menu/Content/MenuExampleButtons.js
index 34f07eb5b9..276146ad50 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleButtons.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleButtons.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import { Button, Menu } from 'semantic-ui-react'
+import { MenuItem, Button, Menu } from 'semantic-ui-react'
 
 const MenuExampleButtons = () => (
   <Menu>
-    <Menu.Item>
+    <MenuItem>
       <Button primary>Sign up</Button>
-    </Menu.Item>
+    </MenuItem>
 
-    <Menu.Item>
+    <MenuItem>
       <Button>Log-in</Button>
-    </Menu.Item>
+    </MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleDropdownItem.js b/docs/src/examples/collections/Menu/Content/MenuExampleDropdownItem.js
index f29ddd13ff..fbb8a50942 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleDropdownItem.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleDropdownItem.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import { DropdownMenu, DropdownItem, Dropdown, Menu } from 'semantic-ui-react'
 
 const MenuExampleDropdownItem = () => (
   <Menu vertical>
     <Dropdown item text='Categories'>
-      <Dropdown.Menu>
-        <Dropdown.Item>Electronics</Dropdown.Item>
-        <Dropdown.Item>Automotive</Dropdown.Item>
-        <Dropdown.Item>Home</Dropdown.Item>
-      </Dropdown.Menu>
+      <DropdownMenu>
+        <DropdownItem>Electronics</DropdownItem>
+        <DropdownItem>Automotive</DropdownItem>
+        <DropdownItem>Home</DropdownItem>
+      </DropdownMenu>
     </Dropdown>
   </Menu>
 )
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleHeader.js b/docs/src/examples/collections/Menu/Content/MenuExampleHeader.js
index 3f898368de..0ed843d487 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleHeader.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleHeader.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleHeader extends Component {
   state = {}
@@ -11,18 +11,18 @@ export default class MenuExampleHeader extends Component {
 
     return (
       <Menu>
-        <Menu.Item header>Our Company</Menu.Item>
-        <Menu.Item
+        <MenuItem header>Our Company</MenuItem>
+        <MenuItem
           name='aboutUs'
           active={activeItem === 'aboutUs'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='jobs'
           active={activeItem === 'jobs'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='locations'
           active={activeItem === 'locations'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleHeaderVertical.js b/docs/src/examples/collections/Menu/Content/MenuExampleHeaderVertical.js
index 2c523d27f8..7957064c38 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleHeaderVertical.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleHeaderVertical.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, MenuHeader, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleHeaderVertical extends Component {
   state = {}
@@ -10,83 +10,83 @@ export default class MenuExampleHeaderVertical extends Component {
 
     return (
       <Menu vertical>
-        <Menu.Item>
-          <Menu.Header>Products</Menu.Header>
+        <MenuItem>
+          <MenuHeader>Products</MenuHeader>
 
-          <Menu.Menu>
-            <Menu.Item
+          <MenuMenu>
+            <MenuItem
               name='enterprise'
               active={activeItem === 'enterprise'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='consumer'
               active={activeItem === 'consumer'}
               onClick={this.handleItemClick}
             />
-          </Menu.Menu>
-        </Menu.Item>
+          </MenuMenu>
+        </MenuItem>
 
-        <Menu.Item>
-          <Menu.Header>CMS Solutions</Menu.Header>
+        <MenuItem>
+          <MenuHeader>CMS Solutions</MenuHeader>
 
-          <Menu.Menu>
-            <Menu.Item
+          <MenuMenu>
+            <MenuItem
               name='rails'
               active={activeItem === 'rails'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='python'
               active={activeItem === 'python'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='php'
               active={activeItem === 'php'}
               onClick={this.handleItemClick}
             />
-          </Menu.Menu>
-        </Menu.Item>
+          </MenuMenu>
+        </MenuItem>
 
-        <Menu.Item>
-          <Menu.Header>Hosting</Menu.Header>
+        <MenuItem>
+          <MenuHeader>Hosting</MenuHeader>
 
-          <Menu.Menu>
-            <Menu.Item
+          <MenuMenu>
+            <MenuItem
               name='shared'
               active={activeItem === 'shared'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='dedicated'
               active={activeItem === 'dedicated'}
               onClick={this.handleItemClick}
             />
-          </Menu.Menu>
-        </Menu.Item>
+          </MenuMenu>
+        </MenuItem>
 
-        <Menu.Item>
-          <Menu.Header>Support</Menu.Header>
+        <MenuItem>
+          <MenuHeader>Support</MenuHeader>
 
-          <Menu.Menu>
-            <Menu.Item
+          <MenuMenu>
+            <MenuItem
               name='email'
               active={activeItem === 'email'}
               onClick={this.handleItemClick}
             >
               E-mail Support
-            </Menu.Item>
+            </MenuItem>
 
-            <Menu.Item
+            <MenuItem
               name='faq'
               active={activeItem === 'faq'}
               onClick={this.handleItemClick}
             >
               FAQs
-            </Menu.Item>
-          </Menu.Menu>
-        </Menu.Item>
+            </MenuItem>
+          </MenuMenu>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleInputs.js b/docs/src/examples/collections/Menu/Content/MenuExampleInputs.js
index 15ad5e6a34..dbceb4c29e 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleInputs.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleInputs.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Input, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Menu } from 'semantic-ui-react'
 
 const MenuExampleInputs = () => (
   <Menu>
-    <Menu.Item>
+    <MenuItem>
       <Input className='icon' icon='search' placeholder='Search...' />
-    </Menu.Item>
+    </MenuItem>
 
-    <Menu.Item position='right'>
+    <MenuItem position='right'>
       <Input
         action={{ type: 'submit', content: 'Go' }}
         placeholder='Navigate to...'
       />
-    </Menu.Item>
+    </MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleLinkItem.js b/docs/src/examples/collections/Menu/Content/MenuExampleLinkItem.js
index d0272398e5..91bd84519f 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleLinkItem.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleLinkItem.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu, Message } from 'semantic-ui-react'
+import { MenuItem, Menu, Message } from 'semantic-ui-react'
 
 export default class MenuExampleLinkItem extends Component {
   state = {}
@@ -11,11 +11,11 @@ export default class MenuExampleLinkItem extends Component {
     return (
       <div>
         <Menu vertical>
-          <Menu.Item href='//example.com' target='_blank'>
+          <MenuItem href='//example.com' target='_blank'>
             Visit another website
-          </Menu.Item>
-          <Menu.Item link>Link via prop</Menu.Item>
-          <Menu.Item onClick={this.handleClick}>Javascript Link</Menu.Item>
+          </MenuItem>
+          <MenuItem link>Link via prop</MenuItem>
+          <MenuItem onClick={this.handleClick}>Javascript Link</MenuItem>
         </Menu>
 
         {message && <Message content={message} />}
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleMenus.js b/docs/src/examples/collections/Menu/Content/MenuExampleMenus.js
index 5654a78364..8866fcd464 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleMenus.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleMenus.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleMenus extends Component {
   state = {}
@@ -11,39 +11,39 @@ export default class MenuExampleMenus extends Component {
 
     return (
       <Menu>
-        <Menu.Item
+        <MenuItem
           name='browse'
           active={activeItem === 'browse'}
           onClick={this.handleItemClick}
         >
           Browse
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='submit'
           active={activeItem === 'submit'}
           onClick={this.handleItemClick}
         >
           Submit
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Menu position='right'>
-          <Menu.Item
+        <MenuMenu position='right'>
+          <MenuItem
             name='signup'
             active={activeItem === 'signup'}
             onClick={this.handleItemClick}
           >
             Sign Up
-          </Menu.Item>
+          </MenuItem>
 
-          <Menu.Item
+          <MenuItem
             name='help'
             active={activeItem === 'help'}
             onClick={this.handleItemClick}
           >
             Help
-          </Menu.Item>
-        </Menu.Menu>
+          </MenuItem>
+        </MenuMenu>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleSubMenu.js b/docs/src/examples/collections/Menu/Content/MenuExampleSubMenu.js
index efc8eee685..9855a52f08 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleSubMenu.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleSubMenu.js
@@ -1,5 +1,14 @@
 import React, { Component } from 'react'
-import { Dropdown, Icon, Input, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  MenuMenu,
+  MenuItem,
+  Dropdown,
+  Icon,
+  Input,
+  Menu,
+} from 'semantic-ui-react'
 
 export default class MenuExampleSubMenu extends Component {
   state = {}
@@ -11,59 +20,59 @@ export default class MenuExampleSubMenu extends Component {
 
     return (
       <Menu vertical>
-        <Menu.Item>
+        <MenuItem>
           <Input placeholder='Search...' />
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item>
+        <MenuItem>
           Home
-          <Menu.Menu>
-            <Menu.Item
+          <MenuMenu>
+            <MenuItem
               name='search'
               active={activeItem === 'search'}
               onClick={this.handleItemClick}
             >
               Search
-            </Menu.Item>
-            <Menu.Item
+            </MenuItem>
+            <MenuItem
               name='add'
               active={activeItem === 'add'}
               onClick={this.handleItemClick}
             >
               Add
-            </Menu.Item>
-            <Menu.Item
+            </MenuItem>
+            <MenuItem
               name='about'
               active={activeItem === 'about'}
               onClick={this.handleItemClick}
             >
               Remove
-            </Menu.Item>
-          </Menu.Menu>
-        </Menu.Item>
+            </MenuItem>
+          </MenuMenu>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='browse'
           active={activeItem === 'browse'}
           onClick={this.handleItemClick}
         >
           <Icon name='grid layout' />
           Browse
-        </Menu.Item>
-        <Menu.Item
+        </MenuItem>
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         >
           Messages
-        </Menu.Item>
+        </MenuItem>
 
         <Dropdown item text='More'>
-          <Dropdown.Menu>
-            <Dropdown.Item icon='edit' text='Edit Profile' />
-            <Dropdown.Item icon='globe' text='Choose Language' />
-            <Dropdown.Item icon='settings' text='Account Settings' />
-          </Dropdown.Menu>
+          <DropdownMenu>
+            <DropdownItem icon='edit' text='Edit Profile' />
+            <DropdownItem icon='globe' text='Choose Language' />
+            <DropdownItem icon='settings' text='Account Settings' />
+          </DropdownMenu>
         </Dropdown>
       </Menu>
     )
diff --git a/docs/src/examples/collections/Menu/Content/MenuExampleText.js b/docs/src/examples/collections/Menu/Content/MenuExampleText.js
index 8b1254726d..739e76d595 100644
--- a/docs/src/examples/collections/Menu/Content/MenuExampleText.js
+++ b/docs/src/examples/collections/Menu/Content/MenuExampleText.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Header, Menu } from 'semantic-ui-react'
+import { MenuItem, Header, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleText extends Component {
   state = {}
@@ -11,32 +11,32 @@ export default class MenuExampleText extends Component {
 
     return (
       <Menu vertical>
-        <Menu.Item
+        <MenuItem
           name='promotions'
           active={activeItem === 'promotions'}
           onClick={this.handleItemClick}
         >
           <Header as='h4'>Promotions</Header>
           <p>Check out our new promotions</p>
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='coupons'
           active={activeItem === 'coupons'}
           onClick={this.handleItemClick}
         >
           <Header as='h4'>Coupons</Header>
           <p>Check out our collection of coupons</p>
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='rebates'
           active={activeItem === 'rebates'}
           onClick={this.handleItemClick}
         >
           <Header as='h4'>Rebates</Header>
           <p>Visit our rebate forum for information on claiming rebates</p>
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/States/MenuExampleActive.js b/docs/src/examples/collections/Menu/States/MenuExampleActive.js
index 807f9419a5..3dabf95124 100644
--- a/docs/src/examples/collections/Menu/States/MenuExampleActive.js
+++ b/docs/src/examples/collections/Menu/States/MenuExampleActive.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 const MenuExampleActive = () => (
   <Menu compact>
-    <Menu.Item active>Link</Menu.Item>
+    <MenuItem active>Link</MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/collections/Menu/States/MenuExampleDisabled.js b/docs/src/examples/collections/Menu/States/MenuExampleDisabled.js
index 2c579cf8b3..365b85a73c 100644
--- a/docs/src/examples/collections/Menu/States/MenuExampleDisabled.js
+++ b/docs/src/examples/collections/Menu/States/MenuExampleDisabled.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 const MenuExampleDisabled = () => (
   <Menu compact>
-    <Menu.Item disabled>Link</Menu.Item>
+    <MenuItem disabled>Link</MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/collections/Menu/States/MenuExampleHover.js b/docs/src/examples/collections/Menu/States/MenuExampleHover.js
index 7b4184dabf..d61bff0cd8 100644
--- a/docs/src/examples/collections/Menu/States/MenuExampleHover.js
+++ b/docs/src/examples/collections/Menu/States/MenuExampleHover.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 const MenuExampleHover = () => (
   <Menu compact>
-    <Menu.Item as='a'>A link</Menu.Item>
-    <Menu.Item link>div Link</Menu.Item>
+    <MenuItem as='a'>A link</MenuItem>
+    <MenuItem link>div Link</MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleAttached.js b/docs/src/examples/collections/Menu/Types/MenuExampleAttached.js
index 1a877e2d4f..a7233d6bb2 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleAttached.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleAttached.js
@@ -1,5 +1,15 @@
 import React from 'react'
-import { Dropdown, Icon, Menu, Segment } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  MenuMenu,
+  Dropdown,
+  Icon,
+  Menu,
+  Segment,
+} from 'semantic-ui-react'
 
 // TODO: Update <Search> usage after its will be implemented
 
@@ -7,26 +17,26 @@ const MenuExampleAttached = () => (
   <div>
     <Menu attached='top'>
       <Dropdown item icon='wrench' simple>
-        <Dropdown.Menu>
-          <Dropdown.Item>
+        <DropdownMenu>
+          <DropdownItem>
             <Icon name='dropdown' />
             <span className='text'>New</span>
 
-            <Dropdown.Menu>
-              <Dropdown.Item>Document</Dropdown.Item>
-              <Dropdown.Item>Image</Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown.Item>
-          <Dropdown.Item>Open</Dropdown.Item>
-          <Dropdown.Item>Save...</Dropdown.Item>
-          <Dropdown.Item>Edit Permissions</Dropdown.Item>
-          <Dropdown.Divider />
-          <Dropdown.Header>Export</Dropdown.Header>
-          <Dropdown.Item>Share</Dropdown.Item>
-        </Dropdown.Menu>
+            <DropdownMenu>
+              <DropdownItem>Document</DropdownItem>
+              <DropdownItem>Image</DropdownItem>
+            </DropdownMenu>
+          </DropdownItem>
+          <DropdownItem>Open</DropdownItem>
+          <DropdownItem>Save...</DropdownItem>
+          <DropdownItem>Edit Permissions</DropdownItem>
+          <DropdownDivider />
+          <DropdownHeader>Export</DropdownHeader>
+          <DropdownItem>Share</DropdownItem>
+        </DropdownMenu>
       </Dropdown>
 
-      <Menu.Menu position='right'>
+      <MenuMenu position='right'>
         <div className='ui right aligned category search item'>
           <div className='ui transparent icon input'>
             <input
@@ -38,7 +48,7 @@ const MenuExampleAttached = () => (
           </div>
           <div className='results' />
         </div>
-      </Menu.Menu>
+      </MenuMenu>
     </Menu>
 
     <Segment attached='bottom'>
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleBasic.js b/docs/src/examples/collections/Menu/Types/MenuExampleBasic.js
index f7c4052d0e..a1f5a00850 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleBasic.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleBasic.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleBasic extends Component {
   state = {}
@@ -11,29 +11,29 @@ export default class MenuExampleBasic extends Component {
 
     return (
       <Menu>
-        <Menu.Item
+        <MenuItem
           name='editorials'
           active={activeItem === 'editorials'}
           onClick={this.handleItemClick}
         >
           Editorials
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='reviews'
           active={activeItem === 'reviews'}
           onClick={this.handleItemClick}
         >
           Reviews
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='upcomingEvents'
           active={activeItem === 'upcomingEvents'}
           onClick={this.handleItemClick}
         >
           Upcoming Events
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleContentProp.js b/docs/src/examples/collections/Menu/Types/MenuExampleContentProp.js
index 8ac19c34d6..70ff1a60a7 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleContentProp.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleContentProp.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleContentProp extends Component {
   state = {}
@@ -11,21 +11,21 @@ export default class MenuExampleContentProp extends Component {
 
     return (
       <Menu>
-        <Menu.Item
+        <MenuItem
           name='editorials'
           active={activeItem === 'editorials'}
           content='Editorials'
           onClick={this.handleItemClick}
         />
 
-        <Menu.Item
+        <MenuItem
           name='reviews'
           active={activeItem === 'reviews'}
           content='Reviews'
           onClick={this.handleItemClick}
         />
 
-        <Menu.Item
+        <MenuItem
           name='upcomingEvents'
           active={activeItem === 'upcomingEvents'}
           content='Upcoming Events'
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleNameProp.js b/docs/src/examples/collections/Menu/Types/MenuExampleNameProp.js
index 7454d3af31..4ceac58c05 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleNameProp.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleNameProp.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleNameProp extends Component {
   state = {}
@@ -11,17 +11,17 @@ export default class MenuExampleNameProp extends Component {
 
     return (
       <Menu>
-        <Menu.Item
+        <MenuItem
           name='editorials'
           active={activeItem === 'editorials'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='reviews'
           active={activeItem === 'reviews'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='upcomingEvents'
           active={activeItem === 'upcomingEvents'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExamplePagination.js b/docs/src/examples/collections/Menu/Types/MenuExamplePagination.js
index e2735c4d9f..fd3a64629f 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExamplePagination.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExamplePagination.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExamplePagination extends Component {
   state = { activeItem: '10' }
@@ -11,23 +11,23 @@ export default class MenuExamplePagination extends Component {
 
     return (
       <Menu pagination>
-        <Menu.Item
+        <MenuItem
           name='1'
           active={activeItem === '1'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item disabled>...</Menu.Item>
-        <Menu.Item
+        <MenuItem disabled>...</MenuItem>
+        <MenuItem
           name='10'
           active={activeItem === '10'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='11'
           active={activeItem === '11'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='12'
           active={activeItem === '12'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExamplePointing.js b/docs/src/examples/collections/Menu/Types/MenuExamplePointing.js
index 24215e68b0..c5fdff9825 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExamplePointing.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExamplePointing.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Menu, Segment } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Input, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExamplePointing extends Component {
   state = { activeItem: 'home' }
@@ -12,26 +12,26 @@ export default class MenuExamplePointing extends Component {
     return (
       <div>
         <Menu pointing>
-          <Menu.Item
+          <MenuItem
             name='home'
             active={activeItem === 'home'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='messages'
             active={activeItem === 'messages'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='friends'
             active={activeItem === 'friends'}
             onClick={this.handleItemClick}
           />
-          <Menu.Menu position='right'>
-            <Menu.Item>
+          <MenuMenu position='right'>
+            <MenuItem>
               <Input icon='search' placeholder='Search...' />
-            </Menu.Item>
-          </Menu.Menu>
+            </MenuItem>
+          </MenuMenu>
         </Menu>
 
         <Segment>
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleSecondary.js b/docs/src/examples/collections/Menu/Types/MenuExampleSecondary.js
index 798eaf3ac6..89354d65f1 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleSecondary.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleSecondary.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Menu } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Input, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleSecondary extends Component {
   state = { activeItem: 'home' }
@@ -11,31 +11,31 @@ export default class MenuExampleSecondary extends Component {
 
     return (
       <Menu secondary>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='friends'
           active={activeItem === 'friends'}
           onClick={this.handleItemClick}
         />
-        <Menu.Menu position='right'>
-          <Menu.Item>
+        <MenuMenu position='right'>
+          <MenuItem>
             <Input icon='search' placeholder='Search...' />
-          </Menu.Item>
-          <Menu.Item
+          </MenuItem>
+          <MenuItem
             name='logout'
             active={activeItem === 'logout'}
             onClick={this.handleItemClick}
           />
-        </Menu.Menu>
+        </MenuMenu>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js b/docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js
index 35037decc4..294073618b 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu, Segment } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleSecondaryPointing extends Component {
   state = { activeItem: 'home' }
@@ -12,28 +12,28 @@ export default class MenuExampleSecondaryPointing extends Component {
     return (
       <div>
         <Menu pointing secondary>
-          <Menu.Item
+          <MenuItem
             name='home'
             active={activeItem === 'home'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='messages'
             active={activeItem === 'messages'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='friends'
             active={activeItem === 'friends'}
             onClick={this.handleItemClick}
           />
-          <Menu.Menu position='right'>
-            <Menu.Item
+          <MenuMenu position='right'>
+            <MenuItem
               name='logout'
               active={activeItem === 'logout'}
               onClick={this.handleItemClick}
             />
-          </Menu.Menu>
+          </MenuMenu>
         </Menu>
 
         <Segment>
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabular.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabular.js
index e531e822d7..faf1a480fd 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabular.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabular.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleTabular extends Component {
   state = { activeItem: 'bio' }
@@ -11,12 +11,12 @@ export default class MenuExampleTabular extends Component {
 
     return (
       <Menu tabular>
-        <Menu.Item
+        <MenuItem
           name='bio'
           active={activeItem === 'bio'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='photos'
           active={activeItem === 'photos'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnBottom.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnBottom.js
index a7b921955b..6faf405b8b 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnBottom.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnBottom.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Icon, Menu, Segment } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Icon, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleTabularOnBottom extends Component {
   state = { activeItem: 'active' }
@@ -16,40 +16,40 @@ export default class MenuExampleTabularOnBottom extends Component {
         </Segment>
 
         <Menu attached='bottom' tabular>
-          <Menu.Item
+          <MenuItem
             name='active'
             active={activeItem === 'active'}
             onClick={this.handleItemClick}
           >
             Active Project
-          </Menu.Item>
+          </MenuItem>
 
-          <Menu.Item
+          <MenuItem
             name='2'
             active={activeItem === '2'}
             onClick={this.handleItemClick}
           >
             Project #2
-          </Menu.Item>
+          </MenuItem>
 
-          <Menu.Item
+          <MenuItem
             name='3'
             active={activeItem === '3'}
             onClick={this.handleItemClick}
           >
             Project #3
-          </Menu.Item>
+          </MenuItem>
 
-          <Menu.Menu position='right'>
-            <Menu.Item
+          <MenuMenu position='right'>
+            <MenuItem
               name='new-tab'
               active={activeItem === 'new-tab'}
               onClick={this.handleItemClick}
             >
               <Icon name='add' />
               New Tab
-            </Menu.Item>
-          </Menu.Menu>
+            </MenuItem>
+          </MenuMenu>
         </Menu>
       </div>
     )
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnLeft.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnLeft.js
index 1145f90d3b..0927063512 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnLeft.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnLeft.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Grid, Menu, Segment } from 'semantic-ui-react'
+import { MenuItem, GridColumn, Grid, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleTabularOnLeft extends Component {
   state = { activeItem: 'bio' }
@@ -11,37 +11,37 @@ export default class MenuExampleTabularOnLeft extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={4}>
+        <GridColumn width={4}>
           <Menu fluid vertical tabular>
-            <Menu.Item
+            <MenuItem
               name='bio'
               active={activeItem === 'bio'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='pics'
               active={activeItem === 'pics'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='companies'
               active={activeItem === 'companies'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='links'
               active={activeItem === 'links'}
               onClick={this.handleItemClick}
             />
           </Menu>
-        </Grid.Column>
+        </GridColumn>
 
-        <Grid.Column stretched width={12}>
+        <GridColumn stretched width={12}>
           <Segment>
             This is an stretched grid column. This segment will always match the
             tab height
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnRight.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnRight.js
index 1b0260d5c5..7683fc6581 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnRight.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnRight.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Grid, Menu, Segment } from 'semantic-ui-react'
+import { MenuItem, GridColumn, Grid, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleTabularOnRight extends Component {
   state = { activeItem: 'bio' }
@@ -11,37 +11,37 @@ export default class MenuExampleTabularOnRight extends Component {
 
     return (
       <Grid>
-        <Grid.Column stretched width={12}>
+        <GridColumn stretched width={12}>
           <Segment>
             This is an stretched grid column. This segment will always match the
             tab height
           </Segment>
-        </Grid.Column>
+        </GridColumn>
 
-        <Grid.Column width={4}>
+        <GridColumn width={4}>
           <Menu fluid vertical tabular='right'>
-            <Menu.Item
+            <MenuItem
               name='bio'
               active={activeItem === 'bio'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='pics'
               active={activeItem === 'pics'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='companies'
               active={activeItem === 'companies'}
               onClick={this.handleItemClick}
             />
-            <Menu.Item
+            <MenuItem
               name='links'
               active={activeItem === 'links'}
               onClick={this.handleItemClick}
             />
           </Menu>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js
index f477c98b9e..b52a617de5 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Menu, Segment } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Input, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleTabularOnTop extends Component {
   state = { activeItem: 'bio' }
@@ -12,25 +12,25 @@ export default class MenuExampleTabularOnTop extends Component {
     return (
       <div>
         <Menu attached='top' tabular>
-          <Menu.Item
+          <MenuItem
             name='bio'
             active={activeItem === 'bio'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='photos'
             active={activeItem === 'photos'}
             onClick={this.handleItemClick}
           />
-          <Menu.Menu position='right'>
-            <Menu.Item>
+          <MenuMenu position='right'>
+            <MenuItem>
               <Input
                 transparent
                 icon={{ name: 'search', link: true }}
                 placeholder='Search users...'
               />
-            </Menu.Item>
-          </Menu.Menu>
+            </MenuItem>
+          </MenuMenu>
         </Menu>
 
         <Segment attached='bottom'>
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleText.js b/docs/src/examples/collections/Menu/Types/MenuExampleText.js
index a0bcfa39ba..c592f92d12 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleText.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleText.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleText extends Component {
   state = { activeItem: 'closest' }
@@ -11,18 +11,18 @@ export default class MenuExampleText extends Component {
 
     return (
       <Menu text>
-        <Menu.Item header>Sort By</Menu.Item>
-        <Menu.Item
+        <MenuItem header>Sort By</MenuItem>
+        <MenuItem
           name='closest'
           active={activeItem === 'closest'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='mostComments'
           active={activeItem === 'mostComments'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='mostPopular'
           active={activeItem === 'mostPopular'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleVertical.js b/docs/src/examples/collections/Menu/Types/MenuExampleVertical.js
index c91451abaf..fb6aa833a2 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleVertical.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleVertical.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleVertical extends Component {
   state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleVertical extends Component {
 
     return (
       <Menu vertical>
-        <Menu.Item
+        <MenuItem
           name='inbox'
           active={activeItem === 'inbox'}
           onClick={this.handleItemClick}
         >
           <Label color='teal'>1</Label>
           Inbox
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='spam'
           active={activeItem === 'spam'}
           onClick={this.handleItemClick}
         >
           <Label>51</Label>
           Spam
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='updates'
           active={activeItem === 'updates'}
           onClick={this.handleItemClick}
         >
           <Label>1</Label>
           Updates
-        </Menu.Item>
-        <Menu.Item>
+        </MenuItem>
+        <MenuItem>
           <Input icon='search' placeholder='Search mail...' />
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalDropdown.js b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalDropdown.js
index 384db91461..1e1d5b4fcc 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalDropdown.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalDropdown.js
@@ -1,5 +1,12 @@
 import React, { Component } from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  MenuItem,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 export default class MenuExampleVerticalDropdown extends Component {
   state = { activeItem: 'account' }
@@ -11,23 +18,23 @@ export default class MenuExampleVerticalDropdown extends Component {
 
     return (
       <Menu secondary vertical>
-        <Menu.Item
+        <MenuItem
           name='account'
           active={activeItem === 'account'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='settings'
           active={activeItem === 'settings'}
           onClick={this.handleItemClick}
         />
         <Dropdown item text='Display Options'>
-          <Dropdown.Menu>
-            <Dropdown.Header>Text Size</Dropdown.Header>
-            <Dropdown.Item>Small</Dropdown.Item>
-            <Dropdown.Item>Medium</Dropdown.Item>
-            <Dropdown.Item>Large</Dropdown.Item>
-          </Dropdown.Menu>
+          <DropdownMenu>
+            <DropdownHeader>Text Size</DropdownHeader>
+            <DropdownItem>Small</DropdownItem>
+            <DropdownItem>Medium</DropdownItem>
+            <DropdownItem>Large</DropdownItem>
+          </DropdownMenu>
         </Dropdown>
       </Menu>
     )
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalPointing.js b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalPointing.js
index 06e062d921..155ca64897 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalPointing.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalPointing.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleVerticalPointing extends Component {
   state = { activeItem: 'home' }
@@ -11,17 +11,17 @@ export default class MenuExampleVerticalPointing extends Component {
 
     return (
       <Menu pointing vertical>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='friends'
           active={activeItem === 'friends'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalSecondary.js b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalSecondary.js
index 189535826d..dba3b78b5d 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalSecondary.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalSecondary.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleVerticalSecondary extends Component {
   state = { activeItem: 'home' }
@@ -11,17 +11,17 @@ export default class MenuExampleVerticalSecondary extends Component {
 
     return (
       <Menu pointing secondary vertical>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='friends'
           active={activeItem === 'friends'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalText.js b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalText.js
index 7692a912de..6b5aac1610 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalText.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalText.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleVerticalText extends Component {
   state = { activeItem: 'closest' }
@@ -11,18 +11,18 @@ export default class MenuExampleVerticalText extends Component {
 
     return (
       <Menu text vertical>
-        <Menu.Item header>Sort By</Menu.Item>
-        <Menu.Item
+        <MenuItem header>Sort By</MenuItem>
+        <MenuItem
           name='closest'
           active={activeItem === 'closest'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='mostComments'
           active={activeItem === 'mostComments'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='mostPopular'
           active={activeItem === 'mostPopular'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleAttachedTabular.js b/docs/src/examples/collections/Menu/Variations/MenuExampleAttachedTabular.js
index 8556f93344..3b9554f2cb 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleAttachedTabular.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleAttachedTabular.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu, Segment } from 'semantic-ui-react'
+import { MenuItem, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleAttachedTabular extends Component {
   state = { activeItem: 'tab1' }
@@ -12,12 +12,12 @@ export default class MenuExampleAttachedTabular extends Component {
     return (
       <div>
         <Menu attached='top' tabular>
-          <Menu.Item
+          <MenuItem
             name='tab1'
             active={activeItem === 'tab1'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='tab2'
             active={activeItem === 'tab2'}
             onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleAttachedToSegment.js b/docs/src/examples/collections/Menu/Variations/MenuExampleAttachedToSegment.js
index 43d9ef071c..a00204b5b1 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleAttachedToSegment.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleAttachedToSegment.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu, Segment } from 'semantic-ui-react'
+import { MenuItem, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleAttachedToSegment extends Component {
   state = { activeItem: 'section1' }
@@ -12,21 +12,21 @@ export default class MenuExampleAttachedToSegment extends Component {
     return (
       <div>
         <Menu attached='top'>
-          <Menu.Item
+          <MenuItem
             name='section1'
             active={activeItem === 'section1'}
             onClick={this.handleItemClick}
           >
             Section 1
-          </Menu.Item>
+          </MenuItem>
 
-          <Menu.Item
+          <MenuItem
             name='section2'
             active={activeItem === 'section2'}
             onClick={this.handleItemClick}
           >
             Section 2
-          </Menu.Item>
+          </MenuItem>
         </Menu>
 
         <Segment attached>
@@ -44,21 +44,21 @@ export default class MenuExampleAttachedToSegment extends Component {
         </Segment>
 
         <Menu attached='bottom'>
-          <Menu.Item
+          <MenuItem
             name='section1'
             active={activeItem === 'section1'}
             onClick={this.handleItemClick}
           >
             Section 1
-          </Menu.Item>
+          </MenuItem>
 
-          <Menu.Item
+          <MenuItem
             name='section2'
             active={activeItem === 'section2'}
             onClick={this.handleItemClick}
           >
             Section 2
-          </Menu.Item>
+          </MenuItem>
         </Menu>
       </div>
     )
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleBorderless.js b/docs/src/examples/collections/Menu/Variations/MenuExampleBorderless.js
index 08ea15b52f..f6ff94e28d 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleBorderless.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleBorderless.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleBorderless extends Component {
   state = { activeItem: '1' }
@@ -11,32 +11,32 @@ export default class MenuExampleBorderless extends Component {
 
     return (
       <Menu borderless>
-        <Menu.Item
+        <MenuItem
           name='1'
           active={activeItem === '1'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='2'
           active={activeItem === '2'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='3'
           active={activeItem === '3'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='4'
           active={activeItem === '4'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='5'
           active={activeItem === '5'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='6'
           active={activeItem === '6'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleColored.js b/docs/src/examples/collections/Menu/Variations/MenuExampleColored.js
index 6f270a796a..77385c56f6 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleColored.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleColored.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 const colorsA = ['red', 'orange', 'yellow', 'olive', 'green', 'teal']
 const colorsB = ['blue', 'violet', 'purple', 'pink', 'brown', 'grey']
@@ -17,7 +17,7 @@ export default class MenuExampleColored extends Component {
       <div>
         <Menu>
           {colorsA.map((c) => (
-            <Menu.Item
+            <MenuItem
               key={c}
               name={c}
               active={activeA === c}
@@ -29,7 +29,7 @@ export default class MenuExampleColored extends Component {
 
         <Menu>
           {colorsB.map((c) => (
-            <Menu.Item
+            <MenuItem
               key={c}
               name={c}
               active={activeB === c}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleColoredInverted.js b/docs/src/examples/collections/Menu/Variations/MenuExampleColoredInverted.js
index 7017fa1fd5..3673eda5a3 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleColoredInverted.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleColoredInverted.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 const colorsA = ['red', 'orange', 'yellow', 'olive', 'green', 'teal']
 const colorsB = ['blue', 'violet', 'purple', 'pink', 'brown', 'grey']
@@ -17,7 +17,7 @@ export default class MenuExampleColoredInverted extends Component {
       <div>
         <Menu inverted>
           {colorsA.map((c) => (
-            <Menu.Item
+            <MenuItem
               key={c}
               name={c}
               active={activeA === c}
@@ -29,7 +29,7 @@ export default class MenuExampleColoredInverted extends Component {
 
         <Menu inverted>
           {colorsB.map((c) => (
-            <Menu.Item
+            <MenuItem
               key={c}
               name={c}
               active={activeB === c}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleColoredInvertedMenus.js b/docs/src/examples/collections/Menu/Variations/MenuExampleColoredInvertedMenus.js
index 66b42fe141..a14f74c2b5 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleColoredInvertedMenus.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleColoredInvertedMenus.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -28,17 +28,17 @@ class ExampleMenu extends Component {
 
     return (
       <Menu color={color} inverted widths={3}>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='friends'
           active={activeItem === 'friends'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleColoredMenus.js b/docs/src/examples/collections/Menu/Variations/MenuExampleColoredMenus.js
index 2c50d27667..97fe8ee4b2 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleColoredMenus.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleColoredMenus.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -28,17 +28,17 @@ class ExampleMenu extends Component {
 
     return (
       <Menu color={color} widths={3}>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='friends'
           active={activeItem === 'friends'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleCompact.js b/docs/src/examples/collections/Menu/Variations/MenuExampleCompact.js
index dc831acf2d..b264b2f281 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleCompact.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleCompact.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleCompact extends Component {
   state = {}
@@ -11,32 +11,32 @@ export default class MenuExampleCompact extends Component {
 
     return (
       <Menu compact icon='labeled'>
-        <Menu.Item
+        <MenuItem
           name='gamepad'
           active={activeItem === 'gamepad'}
           onClick={this.handleItemClick}
         >
           <Icon name='gamepad' />
           Games
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video camera'
           active={activeItem === 'video camera'}
           onClick={this.handleItemClick}
         >
           <Icon name='video camera' />
           Channels
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video play'
           active={activeItem === 'video play'}
           onClick={this.handleItemClick}
         >
           <Icon name='video play' />
           Videos
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleCompactVertical.js b/docs/src/examples/collections/Menu/Variations/MenuExampleCompactVertical.js
index 6fb17382d0..ff3e5e1425 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleCompactVertical.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleCompactVertical.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleCompactVertical extends Component {
   state = {}
@@ -11,32 +11,32 @@ export default class MenuExampleCompactVertical extends Component {
 
     return (
       <Menu compact icon='labeled' vertical>
-        <Menu.Item
+        <MenuItem
           name='gamepad'
           active={activeItem === 'gamepad'}
           onClick={this.handleItemClick}
         >
           <Icon name='gamepad' />
           Games
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video camera'
           active={activeItem === 'video camera'}
           onClick={this.handleItemClick}
         >
           <Icon name='video camera' />
           Channels
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video play'
           active={activeItem === 'video play'}
           onClick={this.handleItemClick}
         >
           <Icon name='video play' />
           Videos
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleEvenlyDivided.js b/docs/src/examples/collections/Menu/Variations/MenuExampleEvenlyDivided.js
index 44e77befb6..38c2b581b5 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleEvenlyDivided.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleEvenlyDivided.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleEvenlyDivided extends Component {
   state = {}
@@ -11,17 +11,17 @@ export default class MenuExampleEvenlyDivided extends Component {
 
     return (
       <Menu fluid widths={3}>
-        <Menu.Item
+        <MenuItem
           name='buy'
           active={activeItem === 'buy'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='sell'
           active={activeItem === 'sell'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='rent'
           active={activeItem === 'rent'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleFitted.js b/docs/src/examples/collections/Menu/Variations/MenuExampleFitted.js
index db813d8022..e128293a70 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleFitted.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleFitted.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleFitted extends Component {
   state = {}
@@ -11,32 +11,32 @@ export default class MenuExampleFitted extends Component {
 
     return (
       <Menu>
-        <Menu.Item
+        <MenuItem
           name='default'
           active={activeItem === 'default'}
           fitted
           onClick={this.handleItemClick}
         >
           No padding whatsoever
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='horizontally'
           active={activeItem === 'horizontally'}
           fitted='horizontally'
           onClick={this.handleItemClick}
         >
           No horizontal padding
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='vertically'
           active={activeItem === 'vertically'}
           fitted='vertically'
           onClick={this.handleItemClick}
         >
           No vertical padding
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleFluid.js b/docs/src/examples/collections/Menu/Variations/MenuExampleFluid.js
index 93f7c1e5dd..1ed19cf66b 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleFluid.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleFluid.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleFluid extends Component {
   state = {}
@@ -11,17 +11,17 @@ export default class MenuExampleFluid extends Component {
 
     return (
       <Menu fluid vertical>
-        <Menu.Item
+        <MenuItem
           name='run'
           active={activeItem === 'run'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='walk'
           active={activeItem === 'walk'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='bike'
           active={activeItem === 'bike'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleIcons.js b/docs/src/examples/collections/Menu/Variations/MenuExampleIcons.js
index b68c49de91..cb79aa5469 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleIcons.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleIcons.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleIcons extends Component {
   state = { activeItem: 'gamepad' }
@@ -11,29 +11,29 @@ export default class MenuExampleIcons extends Component {
 
     return (
       <Menu icon>
-        <Menu.Item
+        <MenuItem
           name='gamepad'
           active={activeItem === 'gamepad'}
           onClick={this.handleItemClick}
         >
           <Icon name='gamepad' />
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video camera'
           active={activeItem === 'video camera'}
           onClick={this.handleItemClick}
         >
           <Icon name='video camera' />
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video play'
           active={activeItem === 'video play'}
           onClick={this.handleItemClick}
         >
           <Icon name='video play' />
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleIconsVertical.js b/docs/src/examples/collections/Menu/Variations/MenuExampleIconsVertical.js
index ff9056b33c..6eca576eeb 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleIconsVertical.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleIconsVertical.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleIconsVertical extends Component {
   state = { activeItem: 'gamepad' }
@@ -11,29 +11,29 @@ export default class MenuExampleIconsVertical extends Component {
 
     return (
       <Menu icon vertical>
-        <Menu.Item
+        <MenuItem
           name='gamepad'
           active={activeItem === 'gamepad'}
           onClick={this.handleItemClick}
         >
           <Icon name='gamepad' />
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video camera'
           active={activeItem === 'video camera'}
           onClick={this.handleItemClick}
         >
           <Icon name='video camera' />
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video play'
           active={activeItem === 'video play'}
           onClick={this.handleItemClick}
         >
           <Icon name='video play' />
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleInverted.js b/docs/src/examples/collections/Menu/Variations/MenuExampleInverted.js
index 58e0aa52e5..01690d16cd 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleInverted.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleInverted.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleInverted extends Component {
   state = { activeItem: 'home' }
@@ -11,17 +11,17 @@ export default class MenuExampleInverted extends Component {
 
     return (
       <Menu inverted>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='friends'
           active={activeItem === 'friends'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedPointing.js b/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedPointing.js
index edd749ab12..ddb3af5de7 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedPointing.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedPointing.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleInvertedPointing extends Component {
   state = { activeItem: 'home' }
@@ -11,17 +11,17 @@ export default class MenuExampleInvertedPointing extends Component {
 
     return (
       <Menu inverted pointing vertical>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='friends'
           active={activeItem === 'friends'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedSecondary.js b/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedSecondary.js
index c8546bafb4..f731cb2e6d 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedSecondary.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedSecondary.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu, Segment } from 'semantic-ui-react'
+import { MenuItem, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleInvertedSecondary extends Component {
   state = { activeItem: 'home' }
@@ -12,17 +12,17 @@ export default class MenuExampleInvertedSecondary extends Component {
     return (
       <Segment inverted>
         <Menu inverted pointing secondary>
-          <Menu.Item
+          <MenuItem
             name='home'
             active={activeItem === 'home'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='messages'
             active={activeItem === 'messages'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='friends'
             active={activeItem === 'friends'}
             onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedSegment.js b/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedSegment.js
index 4bb86504e4..28158d7ee4 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedSegment.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedSegment.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu, Segment } from 'semantic-ui-react'
+import { MenuItem, Menu, Segment } from 'semantic-ui-react'
 
 export default class MenuExampleInvertedSegment extends Component {
   state = { activeItem: 'home' }
@@ -12,17 +12,17 @@ export default class MenuExampleInvertedSegment extends Component {
     return (
       <Segment inverted>
         <Menu inverted secondary>
-          <Menu.Item
+          <MenuItem
             name='home'
             active={activeItem === 'home'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='messages'
             active={activeItem === 'messages'}
             onClick={this.handleItemClick}
           />
-          <Menu.Item
+          <MenuItem
             name='friends'
             active={activeItem === 'friends'}
             onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedVertical.js b/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedVertical.js
index 655dcb8a71..f76de116f7 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedVertical.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleInvertedVertical.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleInvertedVertical extends Component {
   state = { activeItem: 'home' }
@@ -11,17 +11,17 @@ export default class MenuExampleInvertedVertical extends Component {
 
     return (
       <Menu inverted vertical>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='friends'
           active={activeItem === 'friends'}
           onClick={this.handleItemClick}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIcons.js b/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIcons.js
index f08196f49b..ce5a5203c9 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIcons.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIcons.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleLabeledIcons extends Component {
   state = { activeItem: 'gamepad' }
@@ -11,32 +11,32 @@ export default class MenuExampleLabeledIcons extends Component {
 
     return (
       <Menu icon='labeled'>
-        <Menu.Item
+        <MenuItem
           name='gamepad'
           active={activeItem === 'gamepad'}
           onClick={this.handleItemClick}
         >
           <Icon name='gamepad' />
           Games
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video camera'
           active={activeItem === 'video camera'}
           onClick={this.handleItemClick}
         >
           <Icon name='video camera' />
           Channels
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video play'
           active={activeItem === 'video play'}
           onClick={this.handleItemClick}
         >
           <Icon name='video play' />
           Videos
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIconsVertical.js b/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIconsVertical.js
index 4021429173..9c71b5309e 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIconsVertical.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIconsVertical.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleLabeledIconsVertical extends Component {
   state = { activeItem: 'gamepad' }
@@ -11,32 +11,32 @@ export default class MenuExampleLabeledIconsVertical extends Component {
 
     return (
       <Menu icon='labeled' vertical>
-        <Menu.Item
+        <MenuItem
           name='gamepad'
           active={activeItem === 'gamepad'}
           onClick={this.handleItemClick}
         >
           <Icon name='gamepad' />
           Games
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video camera'
           active={activeItem === 'video camera'}
           onClick={this.handleItemClick}
         >
           <Icon name='video camera' />
           Channels
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='video play'
           active={activeItem === 'video play'}
           onClick={this.handleItemClick}
         >
           <Icon name='video play' />
           Videos
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeHuge.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeHuge.js
index d3246942ac..d5e3acfcc8 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeHuge.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeHuge.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  MenuMenu,
+  MenuItem,
+  Button,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 export default class MenuExampleSizeHuge extends Component {
   state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeHuge extends Component {
 
     return (
       <Menu size='huge'>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
 
-        <Menu.Menu position='right'>
+        <MenuMenu position='right'>
           <Dropdown item text='Language'>
-            <Dropdown.Menu>
-              <Dropdown.Item>English</Dropdown.Item>
-              <Dropdown.Item>Russian</Dropdown.Item>
-              <Dropdown.Item>Spanish</Dropdown.Item>
-            </Dropdown.Menu>
+            <DropdownMenu>
+              <DropdownItem>English</DropdownItem>
+              <DropdownItem>Russian</DropdownItem>
+              <DropdownItem>Spanish</DropdownItem>
+            </DropdownMenu>
           </Dropdown>
 
-          <Menu.Item>
+          <MenuItem>
             <Button primary>Sign Up</Button>
-          </Menu.Item>
-        </Menu.Menu>
+          </MenuItem>
+        </MenuMenu>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeLarge.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeLarge.js
index 195e033183..8cda10ece9 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeLarge.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeLarge.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  MenuMenu,
+  MenuItem,
+  Button,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 export default class MenuExampleSizeLarge extends Component {
   state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeLarge extends Component {
 
     return (
       <Menu size='large'>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
 
-        <Menu.Menu position='right'>
+        <MenuMenu position='right'>
           <Dropdown item text='Language'>
-            <Dropdown.Menu>
-              <Dropdown.Item>English</Dropdown.Item>
-              <Dropdown.Item>Russian</Dropdown.Item>
-              <Dropdown.Item>Spanish</Dropdown.Item>
-            </Dropdown.Menu>
+            <DropdownMenu>
+              <DropdownItem>English</DropdownItem>
+              <DropdownItem>Russian</DropdownItem>
+              <DropdownItem>Spanish</DropdownItem>
+            </DropdownMenu>
           </Dropdown>
 
-          <Menu.Item>
+          <MenuItem>
             <Button primary>Sign Up</Button>
-          </Menu.Item>
-        </Menu.Menu>
+          </MenuItem>
+        </MenuMenu>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMassive.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMassive.js
index 8dc38814ec..618441e3bc 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMassive.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMassive.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  MenuMenu,
+  MenuItem,
+  Button,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 export default class MenuExampleSizeMassive extends Component {
   state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeMassive extends Component {
 
     return (
       <Menu size='massive'>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
 
-        <Menu.Menu position='right'>
+        <MenuMenu position='right'>
           <Dropdown item text='Language'>
-            <Dropdown.Menu>
-              <Dropdown.Item>English</Dropdown.Item>
-              <Dropdown.Item>Russian</Dropdown.Item>
-              <Dropdown.Item>Spanish</Dropdown.Item>
-            </Dropdown.Menu>
+            <DropdownMenu>
+              <DropdownItem>English</DropdownItem>
+              <DropdownItem>Russian</DropdownItem>
+              <DropdownItem>Spanish</DropdownItem>
+            </DropdownMenu>
           </Dropdown>
 
-          <Menu.Item>
+          <MenuItem>
             <Button primary>Sign Up</Button>
-          </Menu.Item>
-        </Menu.Menu>
+          </MenuItem>
+        </MenuMenu>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMini.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMini.js
index 5babb583ca..309303bc76 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMini.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMini.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  MenuMenu,
+  MenuItem,
+  Button,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 export default class MenuExampleSizeMini extends Component {
   state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeMini extends Component {
 
     return (
       <Menu size='mini'>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
 
-        <Menu.Menu position='right'>
+        <MenuMenu position='right'>
           <Dropdown item text='Language'>
-            <Dropdown.Menu>
-              <Dropdown.Item>English</Dropdown.Item>
-              <Dropdown.Item>Russian</Dropdown.Item>
-              <Dropdown.Item>Spanish</Dropdown.Item>
-            </Dropdown.Menu>
+            <DropdownMenu>
+              <DropdownItem>English</DropdownItem>
+              <DropdownItem>Russian</DropdownItem>
+              <DropdownItem>Spanish</DropdownItem>
+            </DropdownMenu>
           </Dropdown>
 
-          <Menu.Item>
+          <MenuItem>
             <Button primary>Sign Up</Button>
-          </Menu.Item>
-        </Menu.Menu>
+          </MenuItem>
+        </MenuMenu>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeSmall.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeSmall.js
index 96f76abfe1..92ab383f25 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeSmall.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeSmall.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  MenuMenu,
+  MenuItem,
+  Button,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 export default class MenuExampleSizeSmall extends Component {
   state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeSmall extends Component {
 
     return (
       <Menu size='small'>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
 
-        <Menu.Menu position='right'>
+        <MenuMenu position='right'>
           <Dropdown item text='Language'>
-            <Dropdown.Menu>
-              <Dropdown.Item>English</Dropdown.Item>
-              <Dropdown.Item>Russian</Dropdown.Item>
-              <Dropdown.Item>Spanish</Dropdown.Item>
-            </Dropdown.Menu>
+            <DropdownMenu>
+              <DropdownItem>English</DropdownItem>
+              <DropdownItem>Russian</DropdownItem>
+              <DropdownItem>Spanish</DropdownItem>
+            </DropdownMenu>
           </Dropdown>
 
-          <Menu.Item>
+          <MenuItem>
             <Button primary>Sign Up</Button>
-          </Menu.Item>
-        </Menu.Menu>
+          </MenuItem>
+        </MenuMenu>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeTiny.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeTiny.js
index a1c455faf4..a2eda1fcc6 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeTiny.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeTiny.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  MenuMenu,
+  MenuItem,
+  Button,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 export default class MenuExampleSizeTiny extends Component {
   state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeTiny extends Component {
 
     return (
       <Menu size='tiny'>
-        <Menu.Item
+        <MenuItem
           name='home'
           active={activeItem === 'home'}
           onClick={this.handleItemClick}
         />
-        <Menu.Item
+        <MenuItem
           name='messages'
           active={activeItem === 'messages'}
           onClick={this.handleItemClick}
         />
 
-        <Menu.Menu position='right'>
+        <MenuMenu position='right'>
           <Dropdown item text='Language'>
-            <Dropdown.Menu>
-              <Dropdown.Item>English</Dropdown.Item>
-              <Dropdown.Item>Russian</Dropdown.Item>
-              <Dropdown.Item>Spanish</Dropdown.Item>
-            </Dropdown.Menu>
+            <DropdownMenu>
+              <DropdownItem>English</DropdownItem>
+              <DropdownItem>Russian</DropdownItem>
+              <DropdownItem>Spanish</DropdownItem>
+            </DropdownMenu>
           </Dropdown>
 
-          <Menu.Item>
+          <MenuItem>
             <Button primary>Sign Up</Button>
-          </Menu.Item>
-        </Menu.Menu>
+          </MenuItem>
+        </MenuMenu>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalLarge.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalLarge.js
index 6336ffc06c..492313d203 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalLarge.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalLarge.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleSizeVerticalLarge extends Component {
   state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleSizeVerticalLarge extends Component {
 
     return (
       <Menu size='large' vertical>
-        <Menu.Item
+        <MenuItem
           name='inbox'
           active={activeItem === 'inbox'}
           onClick={this.handleItemClick}
         >
           <Label color='teal'>1</Label>
           Inbox
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='spam'
           active={activeItem === 'spam'}
           onClick={this.handleItemClick}
         >
           <Label>51</Label>
           Spam
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='updates'
           active={activeItem === 'updates'}
           onClick={this.handleItemClick}
         >
           <Label>1</Label>
           Updates
-        </Menu.Item>
-        <Menu.Item>
+        </MenuItem>
+        <MenuItem>
           <Input icon='search' placeholder='Search mail...' />
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMassive.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMassive.js
index 67d0de5979..23a37964ce 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMassive.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMassive.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleSizeLargeMassive extends Component {
   state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleSizeLargeMassive extends Component {
 
     return (
       <Menu size='massive' vertical>
-        <Menu.Item
+        <MenuItem
           name='inbox'
           active={activeItem === 'inbox'}
           onClick={this.handleItemClick}
         >
           <Label color='teal'>1</Label>
           Inbox
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='spam'
           active={activeItem === 'spam'}
           onClick={this.handleItemClick}
         >
           <Label>51</Label>
           Spam
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='updates'
           active={activeItem === 'updates'}
           onClick={this.handleItemClick}
         >
           <Label>1</Label>
           Updates
-        </Menu.Item>
-        <Menu.Item>
+        </MenuItem>
+        <MenuItem>
           <Input icon='search' placeholder='Search mail...' />
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMini.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMini.js
index 6a98ba4ce6..e9f0b41688 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMini.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMini.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleSizeVerticalMini extends Component {
   state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleSizeVerticalMini extends Component {
 
     return (
       <Menu size='mini' vertical>
-        <Menu.Item
+        <MenuItem
           name='inbox'
           active={activeItem === 'inbox'}
           onClick={this.handleItemClick}
         >
           <Label color='teal'>1</Label>
           Inbox
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='spam'
           active={activeItem === 'spam'}
           onClick={this.handleItemClick}
         >
           <Label>51</Label>
           Spam
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='updates'
           active={activeItem === 'updates'}
           onClick={this.handleItemClick}
         >
           <Label>1</Label>
           Updates
-        </Menu.Item>
-        <Menu.Item>
+        </MenuItem>
+        <MenuItem>
           <Input icon='search' placeholder='Search mail...' />
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalSmall.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalSmall.js
index 87563cea1f..0c49209b4f 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalSmall.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalSmall.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleSizeVerticalSmall extends Component {
   state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleSizeVerticalSmall extends Component {
 
     return (
       <Menu size='small' vertical>
-        <Menu.Item
+        <MenuItem
           name='inbox'
           active={activeItem === 'inbox'}
           onClick={this.handleItemClick}
         >
           <Label color='teal'>1</Label>
           Inbox
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='spam'
           active={activeItem === 'spam'}
           onClick={this.handleItemClick}
         >
           <Label>51</Label>
           Spam
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='updates'
           active={activeItem === 'updates'}
           onClick={this.handleItemClick}
         >
           <Label>1</Label>
           Updates
-        </Menu.Item>
-        <Menu.Item>
+        </MenuItem>
+        <MenuItem>
           <Input icon='search' placeholder='Search mail...' />
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleStackable.js b/docs/src/examples/collections/Menu/Variations/MenuExampleStackable.js
index 8d4667ca3c..4f05459949 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleStackable.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleStackable.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleStackable extends Component {
   state = {}
@@ -11,33 +11,33 @@ export default class MenuExampleStackable extends Component {
 
     return (
       <Menu stackable>
-        <Menu.Item>
-          <img alt="logo" src='/logo.png' />
-        </Menu.Item>
+        <MenuItem>
+          <img alt='logo' src='/logo.png' />
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='features'
           active={activeItem === 'features'}
           onClick={this.handleItemClick}
         >
           Features
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='testimonials'
           active={activeItem === 'testimonials'}
           onClick={this.handleItemClick}
         >
           Testimonials
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='sign-in'
           active={activeItem === 'sign-in'}
           onClick={this.handleItemClick}
         >
           Sign-in
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleVerticalFitted.js b/docs/src/examples/collections/Menu/Variations/MenuExampleVerticalFitted.js
index e1d214bf47..a404e536e9 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleVerticalFitted.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleVerticalFitted.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
 
 export default class MenuExampleVerticalFitted extends Component {
   state = {}
@@ -11,32 +11,32 @@ export default class MenuExampleVerticalFitted extends Component {
 
     return (
       <Menu vertical>
-        <Menu.Item
+        <MenuItem
           name='default'
           active={activeItem === 'default'}
           fitted
           onClick={this.handleItemClick}
         >
           No padding whatsoever
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='horizontally'
           active={activeItem === 'horizontally'}
           fitted='horizontally'
           onClick={this.handleItemClick}
         >
           No horizontal padding
-        </Menu.Item>
+        </MenuItem>
 
-        <Menu.Item
+        <MenuItem
           name='vertically'
           active={activeItem === 'vertically'}
           fitted='vertically'
           onClick={this.handleItemClick}
         >
           No vertical padding
-        </Menu.Item>
+        </MenuItem>
       </Menu>
     )
   }
diff --git a/docs/src/examples/collections/Message/Types/MessageExampleIcon.js b/docs/src/examples/collections/Message/Types/MessageExampleIcon.js
index 6e68a85faa..6d6dd528ca 100644
--- a/docs/src/examples/collections/Message/Types/MessageExampleIcon.js
+++ b/docs/src/examples/collections/Message/Types/MessageExampleIcon.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Message, Icon } from 'semantic-ui-react'
+import { MessageHeader, MessageContent, Message, Icon } from 'semantic-ui-react'
 
 const MessageExampleIcon = () => (
   <Message icon>
     <Icon name='circle notched' loading />
-    <Message.Content>
-      <Message.Header>Just one second</Message.Header>
+    <MessageContent>
+      <MessageHeader>Just one second</MessageHeader>
       We are fetching that content for you.
-    </Message.Content>
+    </MessageContent>
   </Message>
 )
 
diff --git a/docs/src/examples/collections/Message/Types/MessageExampleList.js b/docs/src/examples/collections/Message/Types/MessageExampleList.js
index 329a14ae69..1b8e07fe87 100644
--- a/docs/src/examples/collections/Message/Types/MessageExampleList.js
+++ b/docs/src/examples/collections/Message/Types/MessageExampleList.js
@@ -1,13 +1,18 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import {
+  MessageItem,
+  MessageList,
+  MessageHeader,
+  Message,
+} from 'semantic-ui-react'
 
 const MessageExampleList = () => (
   <Message>
-    <Message.Header>New Site Features</Message.Header>
-    <Message.List>
-      <Message.Item>You can now have cover images on blog pages</Message.Item>
-      <Message.Item>Drafts will now auto-save while writing</Message.Item>
-    </Message.List>
+    <MessageHeader>New Site Features</MessageHeader>
+    <MessageList>
+      <MessageItem>You can now have cover images on blog pages</MessageItem>
+      <MessageItem>Drafts will now auto-save while writing</MessageItem>
+    </MessageList>
   </Message>
 )
 
diff --git a/docs/src/examples/collections/Message/Types/MessageExampleListItemsProp.js b/docs/src/examples/collections/Message/Types/MessageExampleListItemsProp.js
index e405121c81..bfa40e2e61 100644
--- a/docs/src/examples/collections/Message/Types/MessageExampleListItemsProp.js
+++ b/docs/src/examples/collections/Message/Types/MessageExampleListItemsProp.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageList, MessageHeader, Message } from 'semantic-ui-react'
 
 const items = [
   'You can now have cover images on blog pages',
@@ -8,8 +8,8 @@ const items = [
 
 const MessageExampleListItemsProp = () => (
   <Message>
-    <Message.Header>New Site Features</Message.Header>
-    <Message.List items={items} />
+    <MessageHeader>New Site Features</MessageHeader>
+    <MessageList items={items} />
   </Message>
 )
 
diff --git a/docs/src/examples/collections/Message/Types/MessageExampleMessage.js b/docs/src/examples/collections/Message/Types/MessageExampleMessage.js
index d22104a4f2..f070c3f686 100644
--- a/docs/src/examples/collections/Message/Types/MessageExampleMessage.js
+++ b/docs/src/examples/collections/Message/Types/MessageExampleMessage.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
 
 const MessageExampleMessage = () => (
   <Message>
-    <Message.Header>Changes in Service</Message.Header>
+    <MessageHeader>Changes in Service</MessageHeader>
     <p>
       We updated our privacy policy here to better service our customers. We
       recommend reviewing the changes.
diff --git a/docs/src/examples/collections/Message/Variations/MessageExampleAttached.js b/docs/src/examples/collections/Message/Variations/MessageExampleAttached.js
index 58146e0221..a0f7df7026 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExampleAttached.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExampleAttached.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Button, Form, Icon, Message } from 'semantic-ui-react'
+import {
+  FormInput,
+  FormGroup,
+  FormCheckbox,
+  Button,
+  Form,
+  Icon,
+  Message,
+} from 'semantic-ui-react'
 
 const MessageExampleAttached = () => (
   <div>
@@ -9,23 +17,23 @@ const MessageExampleAttached = () => (
       content='Fill out the form below to sign-up for a new account'
     />
     <Form className='attached fluid segment'>
-      <Form.Group widths='equal'>
-        <Form.Input
+      <FormGroup widths='equal'>
+        <FormInput
           fluid
           label='First Name'
           placeholder='First Name'
           type='text'
         />
-        <Form.Input
+        <FormInput
           fluid
           label='Last Name'
           placeholder='Last Name'
           type='text'
         />
-      </Form.Group>
-      <Form.Input label='Username' placeholder='Username' type='text' />
-      <Form.Input label='Password' type='password' />
-      <Form.Checkbox inline label='I agree to the terms and conditions' />
+      </FormGroup>
+      <FormInput label='Username' placeholder='Username' type='text' />
+      <FormInput label='Password' type='password' />
+      <FormCheckbox inline label='I agree to the terms and conditions' />
       <Button color='blue'>Submit</Button>
     </Form>
     <Message attached='bottom' warning>
diff --git a/docs/src/examples/collections/Message/Variations/MessageExampleInfo.js b/docs/src/examples/collections/Message/Variations/MessageExampleInfo.js
index 41d3f34c7c..1c43a28db8 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExampleInfo.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExampleInfo.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
 
 const MessageExampleInfo = () => (
   <Message info>
-    <Message.Header>Was this what you wanted?</Message.Header>
+    <MessageHeader>Was this what you wanted?</MessageHeader>
     <p>Did you know it's been a while?</p>
   </Message>
 )
diff --git a/docs/src/examples/collections/Message/Variations/MessageExampleNegative.js b/docs/src/examples/collections/Message/Variations/MessageExampleNegative.js
index c7a15087d0..36bd43f890 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExampleNegative.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExampleNegative.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
 
 const MessageExampleNegative = () => (
   <Message negative>
-    <Message.Header>We're sorry we can't apply that discount</Message.Header>
+    <MessageHeader>We're sorry we can't apply that discount</MessageHeader>
     <p>That offer has expired</p>
   </Message>
 )
diff --git a/docs/src/examples/collections/Message/Variations/MessageExamplePositive.js b/docs/src/examples/collections/Message/Variations/MessageExamplePositive.js
index af3593245d..a1e4956c9c 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExamplePositive.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExamplePositive.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
 
 const MessageExamplePositive = () => (
   <Message positive>
-    <Message.Header>You are eligible for a reward</Message.Header>
+    <MessageHeader>You are eligible for a reward</MessageHeader>
     <p>
       Go to your <b>special offers</b> page to see now.
     </p>
diff --git a/docs/src/examples/collections/Message/Variations/MessageExampleWarning.js b/docs/src/examples/collections/Message/Variations/MessageExampleWarning.js
index 485fa36e65..ce14eb5054 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExampleWarning.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExampleWarning.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
 
 const MessageExampleWarning = () => (
   <Message warning>
-    <Message.Header>You must register before you can do that!</Message.Header>
+    <MessageHeader>You must register before you can do that!</MessageHeader>
     <p>Visit our registration page, then try again.</p>
   </Message>
 )
diff --git a/docs/src/examples/collections/Table/States/TableExampleActive.js b/docs/src/examples/collections/Table/States/TableExampleActive.js
index 2c65be8619..670c48b5d2 100644
--- a/docs/src/examples/collections/Table/States/TableExampleActive.js
+++ b/docs/src/examples/collections/Table/States/TableExampleActive.js
@@ -1,38 +1,45 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleActive = () => (
   <Table celled>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row active>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Selected</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell active>Jill</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow active>
+        <TableCell>John</TableCell>
+        <TableCell>Selected</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell active>Jill</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/States/TableExampleDisabled.js b/docs/src/examples/collections/Table/States/TableExampleDisabled.js
index 812b541948..30d1a72ff3 100644
--- a/docs/src/examples/collections/Table/States/TableExampleDisabled.js
+++ b/docs/src/examples/collections/Table/States/TableExampleDisabled.js
@@ -1,38 +1,45 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleDisabled = () => (
   <Table celled>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row disabled>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Selected</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell disabled>Jill</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow disabled>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Selected</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell disabled>Jill</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/States/TableExampleError.js b/docs/src/examples/collections/Table/States/TableExampleError.js
index e19e54555b..4bb3c27711 100644
--- a/docs/src/examples/collections/Table/States/TableExampleError.js
+++ b/docs/src/examples/collections/Table/States/TableExampleError.js
@@ -1,41 +1,49 @@
 import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleError = () => (
   <Table celled>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>No Name Specified</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row error>
-        <Table.Cell>Jimmy</Table.Cell>
-        <Table.Cell>Cannot pull data</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell error>
+    <TableBody>
+      <TableRow>
+        <TableCell>No Name Specified</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow error>
+        <TableCell>Jimmy</TableCell>
+        <TableCell>Cannot pull data</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell error>
           <Icon name='attention' />
           Classified
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/States/TableExamplePositiveNegative.js b/docs/src/examples/collections/Table/States/TableExamplePositiveNegative.js
index 0de038b83c..d10cfe9af6 100644
--- a/docs/src/examples/collections/Table/States/TableExamplePositiveNegative.js
+++ b/docs/src/examples/collections/Table/States/TableExamplePositiveNegative.js
@@ -1,44 +1,52 @@
 import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExamplePositiveNegative = () => (
   <Table celled>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>No Name Specified</Table.Cell>
-        <Table.Cell>Unknown</Table.Cell>
-        <Table.Cell negative>None</Table.Cell>
-      </Table.Row>
-      <Table.Row positive>
-        <Table.Cell>Jimmy</Table.Cell>
-        <Table.Cell>
+    <TableBody>
+      <TableRow>
+        <TableCell>No Name Specified</TableCell>
+        <TableCell>Unknown</TableCell>
+        <TableCell negative>None</TableCell>
+      </TableRow>
+      <TableRow positive>
+        <TableCell>Jimmy</TableCell>
+        <TableCell>
           <Icon name='checkmark' />
           Approved
-        </Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Unknown</Table.Cell>
-        <Table.Cell positive>
+        </TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Unknown</TableCell>
+        <TableCell positive>
           <Icon name='close' />
           Requires call
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row negative>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Unknown</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+      <TableRow negative>
+        <TableCell>Jill</TableCell>
+        <TableCell>Unknown</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/States/TableExampleWarning.js b/docs/src/examples/collections/Table/States/TableExampleWarning.js
index dbb06d4129..41061fff0d 100644
--- a/docs/src/examples/collections/Table/States/TableExampleWarning.js
+++ b/docs/src/examples/collections/Table/States/TableExampleWarning.js
@@ -1,44 +1,52 @@
 import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleWarning = () => (
   <Table celled>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>No Name Specified</Table.Cell>
-        <Table.Cell>Unknown</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row warning>
-        <Table.Cell>Jimmy</Table.Cell>
-        <Table.Cell>
+    <TableBody>
+      <TableRow>
+        <TableCell>No Name Specified</TableCell>
+        <TableCell>Unknown</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow warning>
+        <TableCell>Jimmy</TableCell>
+        <TableCell>
           <Icon name='attention' />
           Requires Action
-        </Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Unknown</Table.Cell>
-        <Table.Cell warning>
+        </TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Unknown</TableCell>
+        <TableCell warning>
           <Icon name='attention' />
           Hostile
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Unknown</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Unknown</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Types/TableExampleApprove.js b/docs/src/examples/collections/Table/Types/TableExampleApprove.js
index 396c26c6c3..2af784a351 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleApprove.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleApprove.js
@@ -1,52 +1,63 @@
 import React from 'react'
-import { Button, Checkbox, Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Button,
+  Checkbox,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleApprove = () => (
   <Table compact celled definition>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell />
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Registration Date</Table.HeaderCell>
-        <Table.HeaderCell>E-mail address</Table.HeaderCell>
-        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell />
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Registration Date</TableHeaderCell>
+        <TableHeaderCell>E-mail address</TableHeaderCell>
+        <TableHeaderCell>Premium Plan</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell collapsing>
+    <TableBody>
+      <TableRow>
+        <TableCell collapsing>
           <Checkbox slider />
-        </Table.Cell>
-        <Table.Cell>John Lilki</Table.Cell>
-        <Table.Cell>September 14, 2013</Table.Cell>
-        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-        <Table.Cell>No</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell collapsing>
+        </TableCell>
+        <TableCell>John Lilki</TableCell>
+        <TableCell>September 14, 2013</TableCell>
+        <TableCell>jhlilk22@yahoo.com</TableCell>
+        <TableCell>No</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell collapsing>
           <Checkbox slider />
-        </Table.Cell>
-        <Table.Cell>Jamie Harington</Table.Cell>
-        <Table.Cell>January 11, 2014</Table.Cell>
-        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell collapsing>
+        </TableCell>
+        <TableCell>Jamie Harington</TableCell>
+        <TableCell>January 11, 2014</TableCell>
+        <TableCell>jamieharingonton@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell collapsing>
           <Checkbox slider />
-        </Table.Cell>
-        <Table.Cell>Jill Lewis</Table.Cell>
-        <Table.Cell>May 11, 2014</Table.Cell>
-        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+        <TableCell>Jill Lewis</TableCell>
+        <TableCell>May 11, 2014</TableCell>
+        <TableCell>jilsewris22@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer fullWidth>
-      <Table.Row>
-        <Table.HeaderCell />
-        <Table.HeaderCell colSpan='4'>
+    <TableFooter fullWidth>
+      <TableRow>
+        <TableHeaderCell />
+        <TableHeaderCell colSpan='4'>
           <Button
             floated='right'
             icon
@@ -60,9 +71,9 @@ const TableExampleApprove = () => (
           <Button disabled size='small'>
             Approve All
           </Button>
-        </Table.HeaderCell>
-      </Table.Row>
-    </Table.Footer>
+        </TableHeaderCell>
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Types/TableExampleCelledStriped.js b/docs/src/examples/collections/Table/Types/TableExampleCelledStriped.js
index ec705f11e3..9efcbf7fd2 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleCelledStriped.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleCelledStriped.js
@@ -1,53 +1,61 @@
 import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleCelledStriped = () => (
   <Table celled striped>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell colSpan='3'>Git Repository</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell colSpan='3'>Git Repository</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell collapsing>
+    <TableBody>
+      <TableRow>
+        <TableCell collapsing>
           <Icon name='folder' /> node_modules
-        </Table.Cell>
-        <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell collapsing textAlign='right'>
+        </TableCell>
+        <TableCell>Initial commit</TableCell>
+        <TableCell collapsing textAlign='right'>
           10 hours ago
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Icon name='folder' /> test
-        </Table.Cell>
-        <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>Initial commit</TableCell>
+        <TableCell textAlign='right'>10 hours ago</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Icon name='folder' /> build
-        </Table.Cell>
-        <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>Initial commit</TableCell>
+        <TableCell textAlign='right'>10 hours ago</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Icon name='file outline' /> package.json
-        </Table.Cell>
-        <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>Initial commit</TableCell>
+        <TableCell textAlign='right'>10 hours ago</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Icon name='file outline' /> Gruntfile.js
-        </Table.Cell>
-        <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+        <TableCell>Initial commit</TableCell>
+        <TableCell textAlign='right'>10 hours ago</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Types/TableExampleCollapsing.js b/docs/src/examples/collections/Table/Types/TableExampleCollapsing.js
index e562e23015..52a33a9417 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleCollapsing.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleCollapsing.js
@@ -1,65 +1,76 @@
 import React from 'react'
-import { Header, Image, Table } from 'semantic-ui-react'
+import {
+  HeaderSubheader,
+  HeaderContent,
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Header,
+  Image,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleCollapsing = () => (
   <Table basic='very' celled collapsing>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Employee</Table.HeaderCell>
-        <Table.HeaderCell>Correct Guesses</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Employee</TableHeaderCell>
+        <TableHeaderCell>Correct Guesses</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>
+    <TableBody>
+      <TableRow>
+        <TableCell>
           <Header as='h4' image>
             <Image src='/images/avatar/small/lena.png' rounded size='mini' />
-            <Header.Content>
+            <HeaderContent>
               Lena
-              <Header.Subheader>Human Resources</Header.Subheader>
-            </Header.Content>
+              <HeaderSubheader>Human Resources</HeaderSubheader>
+            </HeaderContent>
           </Header>
-        </Table.Cell>
-        <Table.Cell>22</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>22</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Header as='h4' image>
             <Image src='/images/avatar/small/matthew.png' rounded size='mini' />
-            <Header.Content>
+            <HeaderContent>
               Matthew
-              <Header.Subheader>Fabric Design</Header.Subheader>
-            </Header.Content>
+              <HeaderSubheader>Fabric Design</HeaderSubheader>
+            </HeaderContent>
           </Header>
-        </Table.Cell>
-        <Table.Cell>15</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>15</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Header as='h4' image>
             <Image src='/images/avatar/small/lindsay.png' rounded size='mini' />
-            <Header.Content>
+            <HeaderContent>
               Lindsay
-              <Header.Subheader>Entertainment</Header.Subheader>
-            </Header.Content>
+              <HeaderSubheader>Entertainment</HeaderSubheader>
+            </HeaderContent>
           </Header>
-        </Table.Cell>
-        <Table.Cell>12</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>12</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Header as='h4' image>
             <Image src='/images/avatar/small/mark.png' rounded size='mini' />
-            <Header.Content>
+            <HeaderContent>
               Mark
-              <Header.Subheader>Executive</Header.Subheader>
-            </Header.Content>
+              <HeaderSubheader>Executive</HeaderSubheader>
+            </HeaderContent>
           </Header>
-        </Table.Cell>
-        <Table.Cell>11</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+        <TableCell>11</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Types/TableExampleDefinition.js b/docs/src/examples/collections/Table/Types/TableExampleDefinition.js
index dce5c31bca..179c4b86c7 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleDefinition.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleDefinition.js
@@ -1,28 +1,35 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleDefinition = () => (
   <Table definition>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell />
-        <Table.HeaderCell>Arguments</Table.HeaderCell>
-        <Table.HeaderCell>Description</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell />
+        <TableHeaderCell>Arguments</TableHeaderCell>
+        <TableHeaderCell>Description</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>reset rating</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-        <Table.Cell>Resets rating to default value</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>set rating</Table.Cell>
-        <Table.Cell>rating (integer)</Table.Cell>
-        <Table.Cell>Sets the current star rating to specified value</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>reset rating</TableCell>
+        <TableCell>None</TableCell>
+        <TableCell>Resets rating to default value</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>set rating</TableCell>
+        <TableCell>rating (integer)</TableCell>
+        <TableCell>Sets the current star rating to specified value</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Types/TableExamplePadded.js b/docs/src/examples/collections/Table/Types/TableExamplePadded.js
index 654e0a7fda..8e4a944122 100644
--- a/docs/src/examples/collections/Table/Types/TableExamplePadded.js
+++ b/docs/src/examples/collections/Table/Types/TableExamplePadded.js
@@ -1,59 +1,68 @@
 import React from 'react'
-import { Header, Table, Rating } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Header,
+  Table,
+  Rating,
+} from 'semantic-ui-react'
 
 const TableExamplePadded = () => (
   <Table celled padded>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell singleLine>Evidence Rating</Table.HeaderCell>
-        <Table.HeaderCell>Effect</Table.HeaderCell>
-        <Table.HeaderCell>Efficacy</Table.HeaderCell>
-        <Table.HeaderCell>Consensus</Table.HeaderCell>
-        <Table.HeaderCell>Comments</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell singleLine>Evidence Rating</TableHeaderCell>
+        <TableHeaderCell>Effect</TableHeaderCell>
+        <TableHeaderCell>Efficacy</TableHeaderCell>
+        <TableHeaderCell>Consensus</TableHeaderCell>
+        <TableHeaderCell>Comments</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>
+    <TableBody>
+      <TableRow>
+        <TableCell>
           <Header as='h2' textAlign='center'>
             A
           </Header>
-        </Table.Cell>
-        <Table.Cell singleLine>Power Output</Table.Cell>
-        <Table.Cell>
+        </TableCell>
+        <TableCell singleLine>Power Output</TableCell>
+        <TableCell>
           <Rating icon='star' defaultRating={3} maxRating={3} />
-        </Table.Cell>
-        <Table.Cell textAlign='right'>
+        </TableCell>
+        <TableCell textAlign='right'>
           80% <br />
           <a href='#'>18 studies</a>
-        </Table.Cell>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>
           Creatine supplementation is the reference compound for increasing
           muscular creatine levels; there is variability in this increase,
           however, with some nonresponders.
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Header as='h2' textAlign='center'>
             A
           </Header>
-        </Table.Cell>
-        <Table.Cell singleLine>Weight</Table.Cell>
-        <Table.Cell>
+        </TableCell>
+        <TableCell singleLine>Weight</TableCell>
+        <TableCell>
           <Rating icon='star' defaultRating={3} maxRating={3} />
-        </Table.Cell>
-        <Table.Cell textAlign='right'>
+        </TableCell>
+        <TableCell textAlign='right'>
           100% <br />
           <a href='#'>65 studies</a>
-        </Table.Cell>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>
           Creatine is the reference compound for power improvement, with numbers
           from one meta-analysis to assess potency
-        </Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Types/TableExamplePagination.js b/docs/src/examples/collections/Table/Types/TableExamplePagination.js
index fd5c2d22df..7fc05c4d7a 100644
--- a/docs/src/examples/collections/Table/Types/TableExamplePagination.js
+++ b/docs/src/examples/collections/Table/Types/TableExamplePagination.js
@@ -1,54 +1,66 @@
 import React from 'react'
-import { Icon, Label, Menu, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  MenuItem,
+  Icon,
+  Label,
+  Menu,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExamplePagination = () => (
   <Table celled>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Header</Table.HeaderCell>
-        <Table.HeaderCell>Header</Table.HeaderCell>
-        <Table.HeaderCell>Header</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Header</TableHeaderCell>
+        <TableHeaderCell>Header</TableHeaderCell>
+        <TableHeaderCell>Header</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>
+    <TableBody>
+      <TableRow>
+        <TableCell>
           <Label ribbon>First</Label>
-        </Table.Cell>
-        <Table.Cell>Cell</Table.Cell>
-        <Table.Cell>Cell</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell</Table.Cell>
-        <Table.Cell>Cell</Table.Cell>
-        <Table.Cell>Cell</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell</Table.Cell>
-        <Table.Cell>Cell</Table.Cell>
-        <Table.Cell>Cell</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+        <TableCell>Cell</TableCell>
+        <TableCell>Cell</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Cell</TableCell>
+        <TableCell>Cell</TableCell>
+        <TableCell>Cell</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Cell</TableCell>
+        <TableCell>Cell</TableCell>
+        <TableCell>Cell</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer>
-      <Table.Row>
-        <Table.HeaderCell colSpan='3'>
+    <TableFooter>
+      <TableRow>
+        <TableHeaderCell colSpan='3'>
           <Menu floated='right' pagination>
-            <Menu.Item as='a' icon>
+            <MenuItem as='a' icon>
               <Icon name='chevron left' />
-            </Menu.Item>
-            <Menu.Item as='a'>1</Menu.Item>
-            <Menu.Item as='a'>2</Menu.Item>
-            <Menu.Item as='a'>3</Menu.Item>
-            <Menu.Item as='a'>4</Menu.Item>
-            <Menu.Item as='a' icon>
+            </MenuItem>
+            <MenuItem as='a'>1</MenuItem>
+            <MenuItem as='a'>2</MenuItem>
+            <MenuItem as='a'>3</MenuItem>
+            <MenuItem as='a'>4</MenuItem>
+            <MenuItem as='a' icon>
               <Icon name='chevron right' />
-            </Menu.Item>
+            </MenuItem>
           </Menu>
-        </Table.HeaderCell>
-      </Table.Row>
-    </Table.Footer>
+        </TableHeaderCell>
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Types/TableExampleStructured.js b/docs/src/examples/collections/Table/Types/TableExampleStructured.js
index 6aaf5053dc..60e960a0d2 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleStructured.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleStructured.js
@@ -1,62 +1,70 @@
 import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleStructured = () => (
   <Table celled structured>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell rowSpan='2'>Name</Table.HeaderCell>
-        <Table.HeaderCell rowSpan='2'>Type</Table.HeaderCell>
-        <Table.HeaderCell rowSpan='2'>Files</Table.HeaderCell>
-        <Table.HeaderCell colSpan='3'>Languages</Table.HeaderCell>
-      </Table.Row>
-      <Table.Row>
-        <Table.HeaderCell>Ruby</Table.HeaderCell>
-        <Table.HeaderCell>JavaScript</Table.HeaderCell>
-        <Table.HeaderCell>Python</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell rowSpan='2'>Name</TableHeaderCell>
+        <TableHeaderCell rowSpan='2'>Type</TableHeaderCell>
+        <TableHeaderCell rowSpan='2'>Files</TableHeaderCell>
+        <TableHeaderCell colSpan='3'>Languages</TableHeaderCell>
+      </TableRow>
+      <TableRow>
+        <TableHeaderCell>Ruby</TableHeaderCell>
+        <TableHeaderCell>JavaScript</TableHeaderCell>
+        <TableHeaderCell>Python</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>Alpha Team</Table.Cell>
-        <Table.Cell>Project 1</Table.Cell>
-        <Table.Cell textAlign='right'>2</Table.Cell>
-        <Table.Cell textAlign='center'>
+    <TableBody>
+      <TableRow>
+        <TableCell>Alpha Team</TableCell>
+        <TableCell>Project 1</TableCell>
+        <TableCell textAlign='right'>2</TableCell>
+        <TableCell textAlign='center'>
           <Icon color='green' name='checkmark' size='large' />
-        </Table.Cell>
-        <Table.Cell />
-        <Table.Cell />
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell rowSpan='3'>Beta Team</Table.Cell>
-        <Table.Cell>Project 1</Table.Cell>
-        <Table.Cell textAlign='right'>52</Table.Cell>
-        <Table.Cell textAlign='center'>
+        </TableCell>
+        <TableCell />
+        <TableCell />
+      </TableRow>
+      <TableRow>
+        <TableCell rowSpan='3'>Beta Team</TableCell>
+        <TableCell>Project 1</TableCell>
+        <TableCell textAlign='right'>52</TableCell>
+        <TableCell textAlign='center'>
           <Icon color='green' name='checkmark' size='large' />
-        </Table.Cell>
-        <Table.Cell />
-        <Table.Cell />
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Project 2</Table.Cell>
-        <Table.Cell textAlign='right'>12</Table.Cell>
-        <Table.Cell />
-        <Table.Cell textAlign='center'>
+        </TableCell>
+        <TableCell />
+        <TableCell />
+      </TableRow>
+      <TableRow>
+        <TableCell>Project 2</TableCell>
+        <TableCell textAlign='right'>12</TableCell>
+        <TableCell />
+        <TableCell textAlign='center'>
           <Icon color='green' name='checkmark' size='large' />
-        </Table.Cell>
-        <Table.Cell />
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Project 3</Table.Cell>
-        <Table.Cell textAlign='right'>21</Table.Cell>
-        <Table.Cell textAlign='center'>
+        </TableCell>
+        <TableCell />
+      </TableRow>
+      <TableRow>
+        <TableCell>Project 3</TableCell>
+        <TableCell textAlign='right'>21</TableCell>
+        <TableCell textAlign='center'>
           <Icon color='green' name='checkmark' size='large' />
-        </Table.Cell>
-        <Table.Cell />
-        <Table.Cell />
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+        <TableCell />
+        <TableCell />
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleAttached.js b/docs/src/examples/collections/Table/Variations/TableExampleAttached.js
index c281d80087..de42b91cd6 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleAttached.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleAttached.js
@@ -1,23 +1,30 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const header = (
-  <Table.Header>
-    <Table.Row>
-      <Table.HeaderCell>Header</Table.HeaderCell>
-      <Table.HeaderCell>Header</Table.HeaderCell>
-      <Table.HeaderCell>Header</Table.HeaderCell>
-    </Table.Row>
-  </Table.Header>
+  <TableHeader>
+    <TableRow>
+      <TableHeaderCell>Header</TableHeaderCell>
+      <TableHeaderCell>Header</TableHeaderCell>
+      <TableHeaderCell>Header</TableHeaderCell>
+    </TableRow>
+  </TableHeader>
 )
 const body = (
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>Cell</Table.Cell>
-      <Table.Cell>Cell</Table.Cell>
-      <Table.Cell>Cell</Table.Cell>
-    </Table.Row>
-  </Table.Body>
+  <TableBody>
+    <TableRow>
+      <TableCell>Cell</TableCell>
+      <TableCell>Cell</TableCell>
+      <TableCell>Cell</TableCell>
+    </TableRow>
+  </TableBody>
 )
 
 const TableExampleAttached = () => (
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleBasic.js b/docs/src/examples/collections/Table/Variations/TableExampleBasic.js
index 8aad0ed268..c51ba80081 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleBasic.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleBasic.js
@@ -1,33 +1,40 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleBasic = () => (
   <Table basic>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleCelled.js b/docs/src/examples/collections/Table/Variations/TableExampleCelled.js
index 3b8e679001..f42c15cfa1 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleCelled.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleCelled.js
@@ -1,41 +1,49 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleCelled = () => (
   <Table celled>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer>
-      <Table.Row>
-        <Table.HeaderCell>3 People</Table.HeaderCell>
-        <Table.HeaderCell>2 Approved</Table.HeaderCell>
-        <Table.HeaderCell />
-      </Table.Row>
-    </Table.Footer>
+    <TableFooter>
+      <TableRow>
+        <TableHeaderCell>3 People</TableHeaderCell>
+        <TableHeaderCell>2 Approved</TableHeaderCell>
+        <TableHeaderCell />
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleCollapsing.js b/docs/src/examples/collections/Table/Variations/TableExampleCollapsing.js
index 7537557a7e..6b5067d621 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleCollapsing.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleCollapsing.js
@@ -1,41 +1,49 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleCollapsing = () => (
   <Table collapsing>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer>
-      <Table.Row>
-        <Table.HeaderCell>3 People</Table.HeaderCell>
-        <Table.HeaderCell>2 Approved</Table.HeaderCell>
-        <Table.HeaderCell />
-      </Table.Row>
-    </Table.Footer>
+    <TableFooter>
+      <TableRow>
+        <TableHeaderCell>3 People</TableHeaderCell>
+        <TableHeaderCell>2 Approved</TableHeaderCell>
+        <TableHeaderCell />
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleCollapsingCell.js b/docs/src/examples/collections/Table/Variations/TableExampleCollapsingCell.js
index 6a36917e0b..0ead9a0447 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleCollapsingCell.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleCollapsingCell.js
@@ -1,34 +1,34 @@
 import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import { TableRow, TableCell, TableBody, Icon, Table } from 'semantic-ui-react'
 
 const TableExampleCollapsingCell = () => (
   <Table>
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell collapsing>
+    <TableBody>
+      <TableRow>
+        <TableCell collapsing>
           <Icon name='folder' />
           node_modules
-        </Table.Cell>
-        <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell>10 hours ago</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>Initial commit</TableCell>
+        <TableCell>10 hours ago</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Icon name='folder' />
           test
-        </Table.Cell>
-        <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell>10 hours ago</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>
+        </TableCell>
+        <TableCell>Initial commit</TableCell>
+        <TableCell>10 hours ago</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>
           <Icon name='folder' />
           build
-        </Table.Cell>
-        <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell>10 hours ago</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+        <TableCell>Initial commit</TableCell>
+        <TableCell>10 hours ago</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleColors.js b/docs/src/examples/collections/Table/Variations/TableExampleColors.js
index 7277897ae2..dd2f66f8e4 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleColors.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleColors.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -21,26 +28,26 @@ const TableExampleColors = () => (
   <div>
     {colors.map((color) => (
       <Table color={color} key={color}>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>Food</Table.HeaderCell>
-            <Table.HeaderCell>Calories</Table.HeaderCell>
-            <Table.HeaderCell>Protein</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>Food</TableHeaderCell>
+            <TableHeaderCell>Calories</TableHeaderCell>
+            <TableHeaderCell>Protein</TableHeaderCell>
+          </TableRow>
+        </TableHeader>
 
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Apples</Table.Cell>
-            <Table.Cell>200</Table.Cell>
-            <Table.Cell>0g</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Orange</Table.Cell>
-            <Table.Cell>310</Table.Cell>
-            <Table.Cell>0g</Table.Cell>
-          </Table.Row>
-        </Table.Body>
+        <TableBody>
+          <TableRow>
+            <TableCell>Apples</TableCell>
+            <TableCell>200</TableCell>
+            <TableCell>0g</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Orange</TableCell>
+            <TableCell>310</TableCell>
+            <TableCell>0g</TableCell>
+          </TableRow>
+        </TableBody>
       </Table>
     ))}
   </div>
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleColumnCount.js b/docs/src/examples/collections/Table/Variations/TableExampleColumnCount.js
index 0aa41e7129..2d44159bc8 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleColumnCount.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleColumnCount.js
@@ -1,51 +1,59 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleColumnCount = () => (
   <Table columns={5}>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Age</Table.HeaderCell>
-        <Table.HeaderCell>Gender</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Age</TableHeaderCell>
+        <TableHeaderCell>Gender</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>22</Table.Cell>
-        <Table.Cell>Male</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>32</Table.Cell>
-        <Table.Cell>Male</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>22</Table.Cell>
-        <Table.Cell>Other</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>22</TableCell>
+        <TableCell>Male</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>32</TableCell>
+        <TableCell>Male</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>22</TableCell>
+        <TableCell>Other</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer>
-      <Table.Row>
-        <Table.HeaderCell>3 People</Table.HeaderCell>
-        <Table.HeaderCell>2 Approved</Table.HeaderCell>
-        <Table.HeaderCell />
-        <Table.HeaderCell />
-        <Table.HeaderCell />
-      </Table.Row>
-    </Table.Footer>
+    <TableFooter>
+      <TableRow>
+        <TableHeaderCell>3 People</TableHeaderCell>
+        <TableHeaderCell>2 Approved</TableHeaderCell>
+        <TableHeaderCell />
+        <TableHeaderCell />
+        <TableHeaderCell />
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleColumnWidth.js b/docs/src/examples/collections/Table/Variations/TableExampleColumnWidth.js
index 0072d3fa94..689e8a294a 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleColumnWidth.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleColumnWidth.js
@@ -1,36 +1,44 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleColumnWidth = () => (
   <Table>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell width={10}>Name</Table.HeaderCell>
-        <Table.HeaderCell width='six'>Status</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell width={10}>Name</TableHeaderCell>
+        <TableHeaderCell width='six'>Status</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer>
-      <Table.Row>
-        <Table.HeaderCell>3 People</Table.HeaderCell>
-        <Table.HeaderCell>2 Approved</Table.HeaderCell>
-      </Table.Row>
-    </Table.Footer>
+    <TableFooter>
+      <TableRow>
+        <TableHeaderCell>3 People</TableHeaderCell>
+        <TableHeaderCell>2 Approved</TableHeaderCell>
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleCompact.js b/docs/src/examples/collections/Table/Variations/TableExampleCompact.js
index 218d251873..8cf9e081b1 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleCompact.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleCompact.js
@@ -1,58 +1,65 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleCompact = () => (
   <Table compact>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleFixed.js b/docs/src/examples/collections/Table/Variations/TableExampleFixed.js
index 68b7fbe663..6d1e8b52a2 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleFixed.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleFixed.js
@@ -1,42 +1,49 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleFixed = () => (
   <Table fixed>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Description</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Description</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>
           John is an interesting boy but sometimes you don't really have enough
           room to describe everything you'd like
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>
           Jamie is a kind girl but sometimes you don't really have enough room
           to describe everything you'd like
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>
           Jill is an alright girl but sometimes you don't really have enough
           room to describe everything you'd like
-        </Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleFixedLine.js b/docs/src/examples/collections/Table/Variations/TableExampleFixedLine.js
index cd2846a8a2..55ea372b0e 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleFixedLine.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleFixedLine.js
@@ -1,21 +1,28 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleFixedLine = () => (
   <Table celled fixed singleLine>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Description</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Description</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell
           title={[
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
             'et dolore magna aliqua.',
@@ -23,19 +30,19 @@ const TableExampleFixedLine = () => (
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Shorter description</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>Shorter description</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Shorter description</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>Shorter description</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleFullWidth.js b/docs/src/examples/collections/Table/Variations/TableExampleFullWidth.js
index 690089fef9..efc641b74c 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleFullWidth.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleFullWidth.js
@@ -1,52 +1,63 @@
 import React from 'react'
-import { Button, Checkbox, Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Button,
+  Checkbox,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleFullWidth = () => (
   <Table celled compact definition>
-    <Table.Header fullWidth>
-      <Table.Row>
-        <Table.HeaderCell />
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Registration Date</Table.HeaderCell>
-        <Table.HeaderCell>E-mail address</Table.HeaderCell>
-        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader fullWidth>
+      <TableRow>
+        <TableHeaderCell />
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Registration Date</TableHeaderCell>
+        <TableHeaderCell>E-mail address</TableHeaderCell>
+        <TableHeaderCell>Premium Plan</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell collapsing>
+    <TableBody>
+      <TableRow>
+        <TableCell collapsing>
           <Checkbox slider />
-        </Table.Cell>
-        <Table.Cell>John Lilki</Table.Cell>
-        <Table.Cell>September 14, 2013</Table.Cell>
-        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-        <Table.Cell>No</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell collapsing>
+        </TableCell>
+        <TableCell>John Lilki</TableCell>
+        <TableCell>September 14, 2013</TableCell>
+        <TableCell>jhlilk22@yahoo.com</TableCell>
+        <TableCell>No</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell collapsing>
           <Checkbox slider />
-        </Table.Cell>
-        <Table.Cell>Jamie Harington</Table.Cell>
-        <Table.Cell>January 11, 2014</Table.Cell>
-        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell collapsing>
+        </TableCell>
+        <TableCell>Jamie Harington</TableCell>
+        <TableCell>January 11, 2014</TableCell>
+        <TableCell>jamieharingonton@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell collapsing>
           <Checkbox slider />
-        </Table.Cell>
-        <Table.Cell>Jill Lewis</Table.Cell>
-        <Table.Cell>May 11, 2014</Table.Cell>
-        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+        <TableCell>Jill Lewis</TableCell>
+        <TableCell>May 11, 2014</TableCell>
+        <TableCell>jilsewris22@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer fullWidth>
-      <Table.Row>
-        <Table.HeaderCell />
-        <Table.HeaderCell colSpan='4'>
+    <TableFooter fullWidth>
+      <TableRow>
+        <TableHeaderCell />
+        <TableHeaderCell colSpan='4'>
           <Button
             floated='right'
             icon
@@ -60,9 +71,9 @@ const TableExampleFullWidth = () => (
           <Button disabled size='small'>
             Approve All
           </Button>
-        </Table.HeaderCell>
-      </Table.Row>
-    </Table.Footer>
+        </TableHeaderCell>
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleInverted.js b/docs/src/examples/collections/Table/Variations/TableExampleInverted.js
index 53f603f59c..cd6c096d2e 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleInverted.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleInverted.js
@@ -1,41 +1,49 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleInverted = () => (
   <Table inverted>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer>
-      <Table.Row>
-        <Table.HeaderCell>3 People</Table.HeaderCell>
-        <Table.HeaderCell>2 Approved</Table.HeaderCell>
-        <Table.HeaderCell />
-      </Table.Row>
-    </Table.Footer>
+    <TableFooter>
+      <TableRow>
+        <TableHeaderCell>3 People</TableHeaderCell>
+        <TableHeaderCell>2 Approved</TableHeaderCell>
+        <TableHeaderCell />
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleInvertedColors.js b/docs/src/examples/collections/Table/Variations/TableExampleInvertedColors.js
index e823fb25c4..08cc4558e8 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleInvertedColors.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleInvertedColors.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -21,26 +28,26 @@ const TableExampleInvertedColors = () => (
   <div>
     {colors.map((color) => (
       <Table color={color} key={color} inverted>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>Food</Table.HeaderCell>
-            <Table.HeaderCell>Calories</Table.HeaderCell>
-            <Table.HeaderCell>Protein</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>Food</TableHeaderCell>
+            <TableHeaderCell>Calories</TableHeaderCell>
+            <TableHeaderCell>Protein</TableHeaderCell>
+          </TableRow>
+        </TableHeader>
 
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Apples</Table.Cell>
-            <Table.Cell>200</Table.Cell>
-            <Table.Cell>0g</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Orange</Table.Cell>
-            <Table.Cell>310</Table.Cell>
-            <Table.Cell>0g</Table.Cell>
-          </Table.Row>
-        </Table.Body>
+        <TableBody>
+          <TableRow>
+            <TableCell>Apples</TableCell>
+            <TableCell>200</TableCell>
+            <TableCell>0g</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Orange</TableCell>
+            <TableCell>310</TableCell>
+            <TableCell>0g</TableCell>
+          </TableRow>
+        </TableBody>
       </Table>
     ))}
   </div>
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleLarge.js b/docs/src/examples/collections/Table/Variations/TableExampleLarge.js
index 486464afd3..e9e4b92d17 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleLarge.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleLarge.js
@@ -1,41 +1,49 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleLarge = () => (
   <Table size='large'>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer>
-      <Table.Row>
-        <Table.HeaderCell>3 People</Table.HeaderCell>
-        <Table.HeaderCell>2 Approved</Table.HeaderCell>
-        <Table.HeaderCell />
-      </Table.Row>
-    </Table.Footer>
+    <TableFooter>
+      <TableRow>
+        <TableHeaderCell>3 People</TableHeaderCell>
+        <TableHeaderCell>2 Approved</TableHeaderCell>
+        <TableHeaderCell />
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExamplePadded.js b/docs/src/examples/collections/Table/Variations/TableExamplePadded.js
index a55cd3ce14..20eca3a19e 100644
--- a/docs/src/examples/collections/Table/Variations/TableExamplePadded.js
+++ b/docs/src/examples/collections/Table/Variations/TableExamplePadded.js
@@ -1,33 +1,40 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExamplePadded = () => (
   <Table padded>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>
           He is a very nice guy and I enjoyed talking to him on the telephone. I
           hope we get to talk again.
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>
           Jamie was not interested in purchasing our product.
-        </Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSelectableCell.js b/docs/src/examples/collections/Table/Variations/TableExampleSelectableCell.js
index 553983efef..f8e3fdb651 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSelectableCell.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSelectableCell.js
@@ -1,60 +1,67 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleSelectableCell = () => (
   <Table celled>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>No Action</Table.Cell>
-        <Table.Cell selectable>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>No Action</TableCell>
+        <TableCell selectable>
           <a href='#'>Edit</a>
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell selectable>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell selectable>
           <a href='#'>Edit</a>
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell selectable>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell selectable>
           <a href='#'>Edit</a>
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row warning>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>No Action</Table.Cell>
-        <Table.Cell selectable warning>
+        </TableCell>
+      </TableRow>
+      <TableRow warning>
+        <TableCell>John</TableCell>
+        <TableCell>No Action</TableCell>
+        <TableCell selectable warning>
           <a href='#'>Requires change</a>
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell positive>Approved</Table.Cell>
-        <Table.Cell selectable positive>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell positive>Approved</TableCell>
+        <TableCell selectable positive>
           <a href='#'>Approve</a>
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell negative>Denied</Table.Cell>
-        <Table.Cell selectable negative>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell negative>Denied</TableCell>
+        <TableCell selectable negative>
           <a href='#'>Remove</a>
-        </Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js b/docs/src/examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
index 560d4eef37..be63b253a9 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
@@ -1,33 +1,40 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleSelectableInvertedRow = () => (
   <Table celled inverted selectable>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell textAlign='right'>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell textAlign='right'>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell textAlign='right'>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell textAlign='right'>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell textAlign='right'>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell textAlign='right'>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSelectableRow.js b/docs/src/examples/collections/Table/Variations/TableExampleSelectableRow.js
index 829b8238c7..48512c46ea 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSelectableRow.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSelectableRow.js
@@ -1,48 +1,55 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleSelectableRow = () => (
   <Table celled selectable>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>No Action</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row warning>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>No Action</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell positive>Approved</Table.Cell>
-        <Table.Cell warning>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell negative>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>No Action</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow warning>
+        <TableCell>John</TableCell>
+        <TableCell>No Action</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell positive>Approved</TableCell>
+        <TableCell warning>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell negative>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSingleLine.js b/docs/src/examples/collections/Table/Variations/TableExampleSingleLine.js
index 674ac8b835..12ba5161c9 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSingleLine.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSingleLine.js
@@ -1,37 +1,44 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleSingleLine = () => (
   <Table singleLine>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Registration Date</Table.HeaderCell>
-        <Table.HeaderCell>E-mail address</Table.HeaderCell>
-        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Registration Date</TableHeaderCell>
+        <TableHeaderCell>E-mail address</TableHeaderCell>
+        <TableHeaderCell>Premium Plan</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John Lilki</Table.Cell>
-        <Table.Cell>September 14, 2013</Table.Cell>
-        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-        <Table.Cell>No</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie Harington</Table.Cell>
-        <Table.Cell>January 11, 2014</Table.Cell>
-        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill Lewis</Table.Cell>
-        <Table.Cell>May 11, 2014</Table.Cell>
-        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John Lilki</TableCell>
+        <TableCell>September 14, 2013</TableCell>
+        <TableCell>jhlilk22@yahoo.com</TableCell>
+        <TableCell>No</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie Harington</TableCell>
+        <TableCell>January 11, 2014</TableCell>
+        <TableCell>jamieharingonton@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill Lewis</TableCell>
+        <TableCell>May 11, 2014</TableCell>
+        <TableCell>jilsewris22@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSmall.js b/docs/src/examples/collections/Table/Variations/TableExampleSmall.js
index 3041a54b31..185b9573e4 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSmall.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSmall.js
@@ -1,41 +1,49 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleSmall = () => (
   <Table size='small'>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
 
-    <Table.Footer>
-      <Table.Row>
-        <Table.HeaderCell>3 People</Table.HeaderCell>
-        <Table.HeaderCell>2 Approved</Table.HeaderCell>
-        <Table.HeaderCell />
-      </Table.Row>
-    </Table.Footer>
+    <TableFooter>
+      <TableRow>
+        <TableHeaderCell>3 People</TableHeaderCell>
+        <TableHeaderCell>2 Approved</TableHeaderCell>
+        <TableHeaderCell />
+      </TableRow>
+    </TableFooter>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSortable.js b/docs/src/examples/collections/Table/Variations/TableExampleSortable.js
index 8b164a062a..804017b001 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSortable.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSortable.js
@@ -1,6 +1,13 @@
 import _ from 'lodash'
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const tableData = [
   { name: 'John', age: 15, gender: 'Male' },
@@ -41,37 +48,37 @@ function TableExampleSortable() {
 
   return (
     <Table sortable celled fixed>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell
             sorted={column === 'name' ? direction : null}
             onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'name' })}
           >
             Name
-          </Table.HeaderCell>
-          <Table.HeaderCell
+          </TableHeaderCell>
+          <TableHeaderCell
             sorted={column === 'age' ? direction : null}
             onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'age' })}
           >
             Age
-          </Table.HeaderCell>
-          <Table.HeaderCell
+          </TableHeaderCell>
+          <TableHeaderCell
             sorted={column === 'gender' ? direction : null}
             onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'gender' })}
           >
             Gender
-          </Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
         {data.map(({ age, gender, name }) => (
-          <Table.Row key={name}>
-            <Table.Cell>{name}</Table.Cell>
-            <Table.Cell>{age}</Table.Cell>
-            <Table.Cell>{gender}</Table.Cell>
-          </Table.Row>
+          <TableRow key={name}>
+            <TableCell>{name}</TableCell>
+            <TableCell>{age}</TableCell>
+            <TableCell>{gender}</TableCell>
+          </TableRow>
         ))}
-      </Table.Body>
+      </TableBody>
     </Table>
   )
 }
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleStackable.js b/docs/src/examples/collections/Table/Variations/TableExampleStackable.js
index 87fe678301..0f7fc9a37d 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleStackable.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleStackable.js
@@ -1,33 +1,40 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleStackable = () => (
   <Table stackable>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell textAlign='right'>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell textAlign='right'>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell textAlign='right'>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell textAlign='right'>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell textAlign='right'>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell textAlign='right'>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell textAlign='right'>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleStriped.js b/docs/src/examples/collections/Table/Variations/TableExampleStriped.js
index bc7d97a3a7..755eec18f8 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleStriped.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleStriped.js
@@ -1,67 +1,74 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleStriped = () => (
   <Table striped>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Date Joined</Table.HeaderCell>
-        <Table.HeaderCell>E-mail</Table.HeaderCell>
-        <Table.HeaderCell>Called</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Date Joined</TableHeaderCell>
+        <TableHeaderCell>E-mail</TableHeaderCell>
+        <TableHeaderCell>Called</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John Lilki</Table.Cell>
-        <Table.Cell>September 14, 2013</Table.Cell>
-        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-        <Table.Cell>No</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie Harington</Table.Cell>
-        <Table.Cell>January 11, 2014</Table.Cell>
-        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill Lewis</Table.Cell>
-        <Table.Cell>May 11, 2014</Table.Cell>
-        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John Lilki</Table.Cell>
-        <Table.Cell>September 14, 2013</Table.Cell>
-        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-        <Table.Cell>No</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John Lilki</Table.Cell>
-        <Table.Cell>September 14, 2013</Table.Cell>
-        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-        <Table.Cell>No</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie Harington</Table.Cell>
-        <Table.Cell>January 11, 2014</Table.Cell>
-        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill Lewis</Table.Cell>
-        <Table.Cell>May 11, 2014</Table.Cell>
-        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-        <Table.Cell>Yes</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John Lilki</Table.Cell>
-        <Table.Cell>September 14, 2013</Table.Cell>
-        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-        <Table.Cell>No</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John Lilki</TableCell>
+        <TableCell>September 14, 2013</TableCell>
+        <TableCell>jhlilk22@yahoo.com</TableCell>
+        <TableCell>No</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie Harington</TableCell>
+        <TableCell>January 11, 2014</TableCell>
+        <TableCell>jamieharingonton@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill Lewis</TableCell>
+        <TableCell>May 11, 2014</TableCell>
+        <TableCell>jilsewris22@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John Lilki</TableCell>
+        <TableCell>September 14, 2013</TableCell>
+        <TableCell>jhlilk22@yahoo.com</TableCell>
+        <TableCell>No</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John Lilki</TableCell>
+        <TableCell>September 14, 2013</TableCell>
+        <TableCell>jhlilk22@yahoo.com</TableCell>
+        <TableCell>No</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie Harington</TableCell>
+        <TableCell>January 11, 2014</TableCell>
+        <TableCell>jamieharingonton@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill Lewis</TableCell>
+        <TableCell>May 11, 2014</TableCell>
+        <TableCell>jilsewris22@yahoo.com</TableCell>
+        <TableCell>Yes</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John Lilki</TableCell>
+        <TableCell>September 14, 2013</TableCell>
+        <TableCell>jhlilk22@yahoo.com</TableCell>
+        <TableCell>No</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleTextAlign.js b/docs/src/examples/collections/Table/Variations/TableExampleTextAlign.js
index 69546bd646..4f3dca79cb 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleTextAlign.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleTextAlign.js
@@ -1,33 +1,40 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleTextAlign = () => (
   <Table striped>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell textAlign='right'>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row textAlign='center'>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell textAlign='right'>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell textAlign='right'>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell textAlign='right'>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow textAlign='center'>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell textAlign='right'>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell textAlign='right'>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell textAlign='right'>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleUnstackable.js b/docs/src/examples/collections/Table/Variations/TableExampleUnstackable.js
index cd0640ef16..1ab738026a 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleUnstackable.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleUnstackable.js
@@ -1,33 +1,40 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleUnstackable = () => (
   <Table unstackable>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell textAlign='right'>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell textAlign='right'>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell textAlign='right'>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell textAlign='right'>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell textAlign='right'>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell textAlign='right'>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell textAlign='right'>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleVerticalAlign.js b/docs/src/examples/collections/Table/Variations/TableExampleVerticalAlign.js
index 69bf3b0713..7b6d416bb4 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleVerticalAlign.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleVerticalAlign.js
@@ -1,38 +1,45 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleVerticalAlign = () => (
   <Table striped>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row verticalAlign='top'>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell verticalAlign='top'>
+    <TableBody>
+      <TableRow verticalAlign='top'>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell verticalAlign='top'>
           Notes
           <br />
           1<br />
           2<br />
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell verticalAlign='bottom'>Approved</Table.Cell>
-        <Table.Cell>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell verticalAlign='bottom'>Approved</TableCell>
+        <TableCell>
           Notes
           <br />
           1<br />
           2<br />
-        </Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleVeryBasic.js b/docs/src/examples/collections/Table/Variations/TableExampleVeryBasic.js
index 83ac553e6b..1fa1ee364d 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleVeryBasic.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleVeryBasic.js
@@ -1,33 +1,40 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleVeryBasic = () => (
   <Table basic='very'>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jill</Table.Cell>
-        <Table.Cell>Denied</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jill</TableCell>
+        <TableCell>Denied</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleVeryCompact.js b/docs/src/examples/collections/Table/Variations/TableExampleVeryCompact.js
index 82faaf4a54..24997ea8b4 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleVeryCompact.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleVeryCompact.js
@@ -1,58 +1,65 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleVeryCompact = () => (
   <Table compact='very'>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>None</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>Requires call</Table.Cell>
-      </Table.Row>
-    </Table.Body>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>None</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>Requires call</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleVeryPadded.js b/docs/src/examples/collections/Table/Variations/TableExampleVeryPadded.js
index ce69056a5b..44ab3c1128 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleVeryPadded.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleVeryPadded.js
@@ -1,33 +1,40 @@
 import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+} from 'semantic-ui-react'
 
 const TableExampleVeryPadded = () => (
   <Table padded='very'>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Status</Table.HeaderCell>
-        <Table.HeaderCell>Notes</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Notes</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
 
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>John</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>
+    <TableBody>
+      <TableRow>
+        <TableCell>John</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>
           He is a very nice guy and I enjoyed talking to him on the telephone. I
           hope we get to talk again.
-        </Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Jamie</Table.Cell>
-        <Table.Cell>Approved</Table.Cell>
-        <Table.Cell>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jamie</TableCell>
+        <TableCell>Approved</TableCell>
+        <TableCell>
           Jamie was not interested in purchasing our product.
-        </Table.Cell>
-      </Table.Row>
-    </Table.Body>
+        </TableCell>
+      </TableRow>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/elements/Button/Content/ButtonExampleConditionals.js b/docs/src/examples/elements/Button/Content/ButtonExampleConditionals.js
index 510d706473..c66c12ed0b 100644
--- a/docs/src/examples/elements/Button/Content/ButtonExampleConditionals.js
+++ b/docs/src/examples/elements/Button/Content/ButtonExampleConditionals.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonOr, ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleConditionals = () => (
-  <Button.Group>
+  <ButtonGroup>
     <Button>Cancel</Button>
-    <Button.Or />
+    <ButtonOr />
     <Button positive>Save</Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleConditionals
diff --git a/docs/src/examples/elements/Button/Content/ButtonExampleConditionalsCustom.js b/docs/src/examples/elements/Button/Content/ButtonExampleConditionalsCustom.js
index 3820ea0d50..16bda9dc3c 100644
--- a/docs/src/examples/elements/Button/Content/ButtonExampleConditionalsCustom.js
+++ b/docs/src/examples/elements/Button/Content/ButtonExampleConditionalsCustom.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonOr, ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleConditionalsCustom = () => (
-  <Button.Group>
+  <ButtonGroup>
     <Button>un</Button>
-    <Button.Or text='ou' />
+    <ButtonOr text='ou' />
     <Button positive>deux</Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleConditionalsCustom
diff --git a/docs/src/examples/elements/Button/Content/ButtonExampleMultipleConditionals.js b/docs/src/examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
index 54277125ba..5148645275 100644
--- a/docs/src/examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
+++ b/docs/src/examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonOr, ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleMultipleConditionals = () => (
-  <Button.Group>
+  <ButtonGroup>
     <Button>One</Button>
-    <Button.Or />
+    <ButtonOr />
     <Button>Two</Button>
-    <Button.Or />
+    <ButtonOr />
     <Button>Three</Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleMultipleConditionals
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
index 5ed114ec7d..18137c0f54 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
@@ -1,19 +1,19 @@
 import React from 'react'
-import { Button, Divider } from 'semantic-ui-react'
+import { ButtonGroup, Button, Divider } from 'semantic-ui-react'
 
 const ButtonExampleGroupBasic = () => (
   <div>
-    <Button.Group basic>
+    <ButtonGroup basic>
       <Button>One</Button>
       <Button>Two</Button>
       <Button>Three</Button>
-    </Button.Group>
+    </ButtonGroup>
     <Divider />
-    <Button.Group basic vertical>
+    <ButtonGroup basic vertical>
       <Button>One</Button>
       <Button>Two</Button>
       <Button>Three</Button>
-    </Button.Group>
+    </ButtonGroup>
   </div>
 )
 
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js
index eb52bfba3a..ac5aa3ad1d 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupBasicColored = () => (
-  <Button.Group>
+  <ButtonGroup>
     <Button basic color='red'>
       One
     </Button>
@@ -12,7 +12,7 @@ const ButtonExampleGroupBasicColored = () => (
     <Button basic color='blue'>
       Three
     </Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupBasicColored
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
index 9b7632e61e..1ebb3272a7 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupColored = () => (
-  <Button.Group color='blue'>
+  <ButtonGroup color='blue'>
     <Button>One</Button>
     <Button>Two</Button>
     <Button>Three</Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupColored
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
index 9e9b3b0359..dabf3159ce 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
@@ -1,21 +1,21 @@
 import React from 'react'
-import { Button, Divider } from 'semantic-ui-react'
+import { ButtonGroup, Button, Divider } from 'semantic-ui-react'
 
 const ButtonExampleGroupEqualWidth = () => (
   <div>
-    <Button.Group widths='5'>
+    <ButtonGroup widths='5'>
       <Button>Overview</Button>
       <Button>Specs</Button>
       <Button>Warranty</Button>
       <Button>Reviews</Button>
       <Button>Support</Button>
-    </Button.Group>
+    </ButtonGroup>
     <Divider />
-    <Button.Group widths='3'>
+    <ButtonGroup widths='3'>
       <Button>Overview</Button>
       <Button>Specs</Button>
       <Button>Support</Button>
-    </Button.Group>
+    </ButtonGroup>
   </div>
 )
 
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupFloated.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupFloated.js
index a014a14ca7..51246fc9e4 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupFloated.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupFloated.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupFloated = () => (
   <div>
-    <Button.Group floated='left'>
+    <ButtonGroup floated='left'>
       <Button>One</Button>
       <Button>Two</Button>
       <Button>Three</Button>
-    </Button.Group>
-    <Button.Group floated='right'>
+    </ButtonGroup>
+    <ButtonGroup floated='right'>
       <Button>One</Button>
       <Button>Two</Button>
       <Button>Three</Button>
-    </Button.Group>
+    </ButtonGroup>
   </div>
 )
 
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
index 8b171e62c6..9f90bf2609 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Button, Icon } from 'semantic-ui-react'
+import { ButtonGroup, Button, Icon } from 'semantic-ui-react'
 
 const ButtonExampleGroupIcon = () => (
-  <Button.Group icon>
+  <ButtonGroup icon>
     <Button>
       <Icon name='play' />
     </Button>
@@ -12,7 +12,7 @@ const ButtonExampleGroupIcon = () => (
     <Button>
       <Icon name='shuffle' />
     </Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupIcon
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
index 5417e9ca04..6286db87d9 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupIconShorthand = () => (
-  <Button.Group>
+  <ButtonGroup>
     <Button icon='play' />
     <Button icon='pause' />
     <Button icon='shuffle' />
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupIconShorthand
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
index 3f883948ac..68c84a1a3d 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupIconSize = () => (
-  <Button.Group basic size='small'>
+  <ButtonGroup basic size='small'>
     <Button icon='file' />
     <Button icon='save' />
     <Button icon='upload' />
     <Button icon='download' />
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupIconSize
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
index 17317f77f0..0d3fa0f4fc 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupLabeledIcon = () => (
-  <Button.Group vertical labeled icon>
+  <ButtonGroup vertical labeled icon>
     <Button icon='play' content='Play' />
     <Button icon='pause' content='Pause' />
     <Button icon='shuffle' content='Shuffle' />
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupLabeledIcon
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
index 203257ac05..23b39568f3 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupMixed = () => (
-  <Button.Group>
+  <ButtonGroup>
     <Button labelPosition='left' icon='left chevron' content='Back' />
     <Button icon='stop' content='Stop' />
     <Button labelPosition='right' icon='right chevron' content='Forward' />
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupMixed
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
index a396480396..e09e3bc63f 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonOr, ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupOrSize = () => (
-  <Button.Group size='large'>
+  <ButtonGroup size='large'>
     <Button>One</Button>
-    <Button.Or />
+    <ButtonOr />
     <Button>Three</Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupOrSize
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
index 4b048afcef..6da4618c78 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupSize = () => (
-  <Button.Group size='large'>
+  <ButtonGroup size='large'>
     <Button>One</Button>
     <Button>Two</Button>
     <Button>Three</Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupSize
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
index b4986e22c6..27078ff3aa 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupVertical = () => (
-  <Button.Group vertical>
+  <ButtonGroup vertical>
     <Button>Feed</Button>
     <Button>Messages</Button>
     <Button>Events</Button>
     <Button>Photos</Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroupVertical
diff --git a/docs/src/examples/elements/Button/Groups/ButtonExampleGroup.js b/docs/src/examples/elements/Button/Groups/ButtonExampleGroup.js
index f37220641b..a397bf0c9b 100644
--- a/docs/src/examples/elements/Button/Groups/ButtonExampleGroup.js
+++ b/docs/src/examples/elements/Button/Groups/ButtonExampleGroup.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
 
 const ButtonExampleGroup = () => (
-  <Button.Group>
+  <ButtonGroup>
     <Button>One</Button>
     <Button>Two</Button>
     <Button>Three</Button>
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default ButtonExampleGroup
diff --git a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIcon.js b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIcon.js
index 8311481927..7ebba97b26 100644
--- a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIcon.js
+++ b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIcon.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button, Icon } from 'semantic-ui-react'
+import { ButtonGroup, Button, Icon } from 'semantic-ui-react'
 
 const ButtonExampleGroupIcon = () => (
   <div>
-    <Button.Group>
+    <ButtonGroup>
       <Button icon>
         <Icon name='align left' />
       </Button>
@@ -16,8 +16,8 @@ const ButtonExampleGroupIcon = () => (
       <Button icon>
         <Icon name='align justify' />
       </Button>
-    </Button.Group>{' '}
-    <Button.Group>
+    </ButtonGroup>{' '}
+    <ButtonGroup>
       <Button icon>
         <Icon name='bold' />
       </Button>
@@ -27,7 +27,7 @@ const ButtonExampleGroupIcon = () => (
       <Button icon>
         <Icon name='text width' />
       </Button>
-    </Button.Group>
+    </ButtonGroup>
   </div>
 )
 
diff --git a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js
index fdfea6acc6..3488353e7b 100644
--- a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js
+++ b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup } from 'semantic-ui-react'
 
 const ButtonExampleGroupIconShorthand = () => (
   <div>
-    <Button.Group
+    <ButtonGroup
       buttons={[
         { key: 'align left', icon: 'align left' },
         { key: 'align center', icon: 'align center' },
@@ -11,7 +11,7 @@ const ButtonExampleGroupIconShorthand = () => (
         { key: 'align justify', icon: 'align justify' },
       ]}
     />{' '}
-    <Button.Group
+    <ButtonGroup
       buttons={[
         { key: 'bold', icon: 'bold' },
         { key: 'underline', icon: 'underline' },
diff --git a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupShorthand.js b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupShorthand.js
index 84610e04dc..0960e6d9dd 100644
--- a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupShorthand.js
+++ b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupShorthand.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup } from 'semantic-ui-react'
 
 const ButtonExampleGroupShorthand = () => (
-  <Button.Group buttons={['One', 'Two', 'Three']} />
+  <ButtonGroup buttons={['One', 'Two', 'Three']} />
 )
 
 export default ButtonExampleGroupShorthand
diff --git a/docs/src/examples/elements/Button/Types/ButtonExampleAnimated.js b/docs/src/examples/elements/Button/Types/ButtonExampleAnimated.js
index 9cd8097b81..2a49b21cdc 100644
--- a/docs/src/examples/elements/Button/Types/ButtonExampleAnimated.js
+++ b/docs/src/examples/elements/Button/Types/ButtonExampleAnimated.js
@@ -1,23 +1,23 @@
 import React from 'react'
-import { Button, Icon } from 'semantic-ui-react'
+import { ButtonContent, Button, Icon } from 'semantic-ui-react'
 
 const ButtonExampleAnimated = () => (
   <div>
     <Button animated>
-      <Button.Content visible>Next</Button.Content>
-      <Button.Content hidden>
+      <ButtonContent visible>Next</ButtonContent>
+      <ButtonContent hidden>
         <Icon name='arrow right' />
-      </Button.Content>
+      </ButtonContent>
     </Button>
     <Button animated='vertical'>
-      <Button.Content hidden>Shop</Button.Content>
-      <Button.Content visible>
+      <ButtonContent hidden>Shop</ButtonContent>
+      <ButtonContent visible>
         <Icon name='shop' />
-      </Button.Content>
+      </ButtonContent>
     </Button>
     <Button animated='fade'>
-      <Button.Content visible>Sign-up for a Pro account</Button.Content>
-      <Button.Content hidden>$12.99 a month</Button.Content>
+      <ButtonContent visible>Sign-up for a Pro account</ButtonContent>
+      <ButtonContent hidden>$12.99 a month</ButtonContent>
     </Button>
   </div>
 )
diff --git a/docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js b/docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js
index 0079bb0335..0b0593e4a0 100644
--- a/docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js
+++ b/docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Grid, Segment } from 'semantic-ui-react'
+import { GridColumn, Button, Grid, Segment } from 'semantic-ui-react'
 
 export default class ButtonExampleAttachedEvents extends Component {
   state = { log: [] }
@@ -22,7 +22,7 @@ export default class ButtonExampleAttachedEvents extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={8}>
+        <GridColumn width={8}>
           <Segment attached='top'>
             The button below accepts clicks with mouse and key presses with
             Space Bar or Enter.
@@ -33,8 +33,8 @@ export default class ButtonExampleAttachedEvents extends Component {
             onClick={this.handleClick}
             onKeyPress={this.handleKeyPress}
           />
-        </Grid.Column>
-        <Grid.Column width={8}>
+        </GridColumn>
+        <GridColumn width={8}>
           <Segment>
             <pre style={{ height: 100, overflowY: 'scroll' }}>
               {log.map((e, i) => (
@@ -42,7 +42,7 @@ export default class ButtonExampleAttachedEvents extends Component {
               ))}
             </pre>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js b/docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js
index ba8bfcc64a..36940fb119 100644
--- a/docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js
+++ b/docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js
@@ -1,5 +1,5 @@
 import React, { Component, createRef } from 'react'
-import { Button, Grid } from 'semantic-ui-react'
+import { GridColumn, Button, Grid } from 'semantic-ui-react'
 
 export default class ButtonExampleFocus extends Component {
   buttonRef = createRef()
@@ -8,16 +8,16 @@ export default class ButtonExampleFocus extends Component {
   render() {
     return (
       <Grid>
-        <Grid.Column width={8}>
+        <GridColumn width={8}>
           <Button
             content='A button that can be focused'
             primary
             ref={this.buttonRef}
           />
-        </Grid.Column>
-        <Grid.Column width={8}>
+        </GridColumn>
+        <GridColumn width={8}>
           <Button content='Set focused' onClick={this.handleClick} />
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js b/docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
index 8943d145b7..07b9f9442e 100644
--- a/docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
+++ b/docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
@@ -1,19 +1,19 @@
 import React from 'react'
-import { Button, Segment } from 'semantic-ui-react'
+import { ButtonGroup, Button, Segment } from 'semantic-ui-react'
 
 const ButtonExampleVerticallyAttachedGroup = () => (
   <div>
-    <Button.Group attached='top'>
+    <ButtonGroup attached='top'>
       <Button>One</Button>
       <Button>Two</Button>
-    </Button.Group>
+    </ButtonGroup>
     <Segment attached>
       <img src='/images/wireframe/paragraph.png' />
     </Segment>
-    <Button.Group attached='bottom'>
+    <ButtonGroup attached='bottom'>
       <Button>One</Button>
       <Button>Two</Button>
-    </Button.Group>
+    </ButtonGroup>
   </div>
 )
 
diff --git a/docs/src/examples/elements/Divider/Types/DividerExampleHorizontalTable.js b/docs/src/examples/elements/Divider/Types/DividerExampleHorizontalTable.js
index 64b1a7f3d9..903cc372a4 100644
--- a/docs/src/examples/elements/Divider/Types/DividerExampleHorizontalTable.js
+++ b/docs/src/examples/elements/Divider/Types/DividerExampleHorizontalTable.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Divider, Header, Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableCell,
+  TableBody,
+  Divider,
+  Header,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 const DividerExampleHorizontalTable = () => (
   <>
@@ -23,24 +31,24 @@ const DividerExampleHorizontalTable = () => (
     </Divider>
 
     <Table definition>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell width={2}>Size</Table.Cell>
-          <Table.Cell>1" x 2"</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Weight</Table.Cell>
-          <Table.Cell>6 ounces</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Color</Table.Cell>
-          <Table.Cell>Yellowish</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Odor</Table.Cell>
-          <Table.Cell>Not Much Usually</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+      <TableBody>
+        <TableRow>
+          <TableCell width={2}>Size</TableCell>
+          <TableCell>1" x 2"</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Weight</TableCell>
+          <TableCell>6 ounces</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Color</TableCell>
+          <TableCell>Yellowish</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Odor</TableCell>
+          <TableCell>Not Much Usually</TableCell>
+        </TableRow>
+      </TableBody>
     </Table>
   </>
 )
diff --git a/docs/src/examples/elements/Divider/Types/DividerExampleVertical.js b/docs/src/examples/elements/Divider/Types/DividerExampleVertical.js
index 89aa118b20..b56bb6e7c0 100644
--- a/docs/src/examples/elements/Divider/Types/DividerExampleVertical.js
+++ b/docs/src/examples/elements/Divider/Types/DividerExampleVertical.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Divider, Grid, Image, Segment } from 'semantic-ui-react'
+import { GridColumn, Divider, Grid, Image, Segment } from 'semantic-ui-react'
 
 const DividerExampleVertical = () => (
   <Segment>
     <Grid columns={2} relaxed='very'>
-      <Grid.Column>
+      <GridColumn>
         <p>
           <Image src='/images/wireframe/short-paragraph.png' />
         </p>
@@ -17,8 +17,8 @@ const DividerExampleVertical = () => (
         <p>
           <Image src='/images/wireframe/short-paragraph.png' />
         </p>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <p>
           <Image src='/images/wireframe/short-paragraph.png' />
         </p>
@@ -31,7 +31,7 @@ const DividerExampleVertical = () => (
         <p>
           <Image src='/images/wireframe/short-paragraph.png' />
         </p>
-      </Grid.Column>
+      </GridColumn>
     </Grid>
 
     <Divider vertical>And</Divider>
diff --git a/docs/src/examples/elements/Divider/Types/DividerExampleVerticalForm.js b/docs/src/examples/elements/Divider/Types/DividerExampleVerticalForm.js
index 929695cbd8..562abff9dd 100644
--- a/docs/src/examples/elements/Divider/Types/DividerExampleVerticalForm.js
+++ b/docs/src/examples/elements/Divider/Types/DividerExampleVerticalForm.js
@@ -1,18 +1,26 @@
 import React from 'react'
-import { Button, Divider, Form, Grid, Segment } from 'semantic-ui-react'
+import {
+  GridColumn,
+  FormInput,
+  Button,
+  Divider,
+  Form,
+  Grid,
+  Segment,
+} from 'semantic-ui-react'
 
 const DividerExampleVerticalForm = () => (
   <Segment placeholder>
     <Grid columns={2} relaxed='very' stackable>
-      <Grid.Column>
+      <GridColumn>
         <Form>
-          <Form.Input
+          <FormInput
             icon='user'
             iconPosition='left'
             label='Username'
             placeholder='Username'
           />
-          <Form.Input
+          <FormInput
             icon='lock'
             iconPosition='left'
             label='Password'
@@ -21,11 +29,11 @@ const DividerExampleVerticalForm = () => (
 
           <Button content='Login' primary />
         </Form>
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column verticalAlign='middle'>
+      <GridColumn verticalAlign='middle'>
         <Button content='Sign up' icon='signup' size='big' />
-      </Grid.Column>
+      </GridColumn>
     </Grid>
 
     <Divider vertical>Or</Divider>
diff --git a/docs/src/examples/elements/Flag/Types/FlagExampleTable.js b/docs/src/examples/elements/Flag/Types/FlagExampleTable.js
index 466c0e0193..10ff345786 100644
--- a/docs/src/examples/elements/Flag/Types/FlagExampleTable.js
+++ b/docs/src/examples/elements/Flag/Types/FlagExampleTable.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Table, Flag } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Table,
+  Flag,
+} from 'semantic-ui-react'
 
 const countries = [
   { name: 'Afghanistan', countryCode: 'af' },
@@ -253,24 +261,24 @@ const flagRenderer = (item) => <Flag name={item.countryCode} />
 
 const FlagExampleTable = () => (
   <Table>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>Country</Table.HeaderCell>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Country Code</Table.HeaderCell>
-        <Table.HeaderCell>Alias</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Country</TableHeaderCell>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Country Code</TableHeaderCell>
+        <TableHeaderCell>Alias</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
       {countries.map((country) => (
-        <Table.Row key={country.countryCode}>
-          <Table.Cell>{flagRenderer(country)}</Table.Cell>
-          <Table.Cell>{country.name}</Table.Cell>
-          <Table.Cell>{country.countryCode}</Table.Cell>
-          <Table.Cell>{country.alias}</Table.Cell>
-        </Table.Row>
+        <TableRow key={country.countryCode}>
+          <TableCell>{flagRenderer(country)}</TableCell>
+          <TableCell>{country.name}</TableCell>
+          <TableCell>{country.countryCode}</TableCell>
+          <TableCell>{country.alias}</TableCell>
+        </TableRow>
       ))}
-    </Table.Body>
+    </TableBody>
   </Table>
 )
 
diff --git a/docs/src/examples/elements/Header/Content/HeaderExamplePlugIcon.js b/docs/src/examples/elements/Header/Content/HeaderExamplePlugIcon.js
index 791e44768a..e133db5678 100644
--- a/docs/src/examples/elements/Header/Content/HeaderExamplePlugIcon.js
+++ b/docs/src/examples/elements/Header/Content/HeaderExamplePlugIcon.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Header, Icon } from 'semantic-ui-react'
+import { HeaderContent, Header, Icon } from 'semantic-ui-react'
 
 const HeaderExamplePlugIcon = () => (
   <Header as='h2'>
     <Icon name='plug' />
-    <Header.Content>Uptime Guarantee</Header.Content>
+    <HeaderContent>Uptime Guarantee</HeaderContent>
   </Header>
 )
 
diff --git a/docs/src/examples/elements/Header/Content/HeaderExampleSettingsIcon.js b/docs/src/examples/elements/Header/Content/HeaderExampleSettingsIcon.js
index 04eab16536..842146ce9d 100644
--- a/docs/src/examples/elements/Header/Content/HeaderExampleSettingsIcon.js
+++ b/docs/src/examples/elements/Header/Content/HeaderExampleSettingsIcon.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Header, Icon } from 'semantic-ui-react'
+import { HeaderSubheader, HeaderContent, Header, Icon } from 'semantic-ui-react'
 
 const HeaderExampleSettingsIcon = () => (
   <Header as='h2'>
     <Icon name='settings' />
-    <Header.Content>
+    <HeaderContent>
       Account Settings
-      <Header.Subheader>Manage your preferences</Header.Subheader>
-    </Header.Content>
+      <HeaderSubheader>Manage your preferences</HeaderSubheader>
+    </HeaderContent>
   </Header>
 )
 
diff --git a/docs/src/examples/elements/Header/Content/HeaderExampleSubheader.js b/docs/src/examples/elements/Header/Content/HeaderExampleSubheader.js
index fba78ac94c..0866272623 100644
--- a/docs/src/examples/elements/Header/Content/HeaderExampleSubheader.js
+++ b/docs/src/examples/elements/Header/Content/HeaderExampleSubheader.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Header } from 'semantic-ui-react'
+import { HeaderSubheader, Header } from 'semantic-ui-react'
 
 const HeaderExampleSubheader = () => (
   <Header as='h2'>
     Account Settings
-    <Header.Subheader>
+    <HeaderSubheader>
       Manage your account settings and set email preferences
-    </Header.Subheader>
+    </HeaderSubheader>
   </Header>
 )
 
diff --git a/docs/src/examples/elements/Header/Types/HeaderExampleSettingsIcon.js b/docs/src/examples/elements/Header/Types/HeaderExampleSettingsIcon.js
index 78bee12fcd..eb87e39b44 100644
--- a/docs/src/examples/elements/Header/Types/HeaderExampleSettingsIcon.js
+++ b/docs/src/examples/elements/Header/Types/HeaderExampleSettingsIcon.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Header, Icon } from 'semantic-ui-react'
+import { HeaderSubheader, Header, Icon } from 'semantic-ui-react'
 
 const HeaderExampleSettingsIcon = () => (
   <Header as='h2' icon>
     <Icon name='settings' />
     Account Settings
-    <Header.Subheader>
+    <HeaderSubheader>
       Manage your account settings and set e-mail preferences.
-    </Header.Subheader>
+    </HeaderSubheader>
   </Header>
 )
 
diff --git a/docs/src/examples/elements/Header/Types/HeaderExampleUsersIcon.js b/docs/src/examples/elements/Header/Types/HeaderExampleUsersIcon.js
index 2e2a4f6519..2dd6e48fb5 100644
--- a/docs/src/examples/elements/Header/Types/HeaderExampleUsersIcon.js
+++ b/docs/src/examples/elements/Header/Types/HeaderExampleUsersIcon.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Header, Icon, Image } from 'semantic-ui-react'
+import { HeaderContent, Header, Icon, Image } from 'semantic-ui-react'
 
 const HeaderExampleUsersIcon = () => (
   <div>
     <Header as='h2' icon textAlign='center'>
       <Icon name='users' circular />
-      <Header.Content>Friends</Header.Content>
+      <HeaderContent>Friends</HeaderContent>
     </Header>
     <Image
       centered
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroup.js b/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroup.js
index 48ca986a91..f91985bb5a 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroup.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroup.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Icon } from 'semantic-ui-react'
+import { IconGroup, Icon } from 'semantic-ui-react'
 
 const IconExampleCornerGroup = () => (
-  <Icon.Group size='huge'>
+  <IconGroup size='huge'>
     <Icon name='puzzle' />
     <Icon corner name='add' />
-  </Icon.Group>
+  </IconGroup>
 )
 
 export default IconExampleCornerGroup
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroupPositions.js b/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroupPositions.js
index 5ee721ebd0..b6a9b28e7f 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroupPositions.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroupPositions.js
@@ -1,27 +1,27 @@
 import React from 'react'
-import { Icon } from 'semantic-ui-react'
+import { IconGroup, Icon } from 'semantic-ui-react'
 
 const IconExampleCornerGroupPositions = () => (
   <>
-    <Icon.Group size='huge'>
+    <IconGroup size='huge'>
       <Icon name='puzzle' />
       <Icon corner='top left' name='add' />
-    </Icon.Group>
+    </IconGroup>
 
-    <Icon.Group size='huge'>
+    <IconGroup size='huge'>
       <Icon name='puzzle' />
       <Icon corner='top right' name='add' />
-    </Icon.Group>
+    </IconGroup>
 
-    <Icon.Group size='huge'>
+    <IconGroup size='huge'>
       <Icon name='puzzle' />
       <Icon corner='bottom left' name='add' />
-    </Icon.Group>
+    </IconGroup>
 
-    <Icon.Group size='huge'>
+    <IconGroup size='huge'>
       <Icon name='puzzle' />
       <Icon corner='bottom right' name='add' />
-    </Icon.Group>
+    </IconGroup>
   </>
 )
 
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleIconGroup.js b/docs/src/examples/elements/Icon/Groups/IconExampleIconGroup.js
index 921016aeed..3d688fb51b 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleIconGroup.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleIconGroup.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Icon } from 'semantic-ui-react'
+import { IconGroup, Icon } from 'semantic-ui-react'
 
 const IconExampleIconGroup = () => (
-  <Icon.Group size='huge'>
+  <IconGroup size='huge'>
     <Icon size='big' name='circle outline' />
     <Icon name='user' />
-  </Icon.Group>
+  </IconGroup>
 )
 
 export default IconExampleIconGroup
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleLoadingGroup.js b/docs/src/examples/elements/Icon/Groups/IconExampleLoadingGroup.js
index 2ac6555214..55c22ece98 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleLoadingGroup.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleLoadingGroup.js
@@ -1,16 +1,16 @@
 import React from 'react'
-import { Icon } from 'semantic-ui-react'
+import { IconGroup, Icon } from 'semantic-ui-react'
 
 const IconExampleLoadingGroup = () => (
   <div>
-    <Icon.Group size='huge'>
+    <IconGroup size='huge'>
       <Icon size='big' color='red' name='dont' />
       <Icon color='black' name='user' />
-    </Icon.Group>
-    <Icon.Group size='huge'>
+    </IconGroup>
+    <IconGroup size='huge'>
       <Icon loading size='big' name='circle notch' />
       <Icon name='user' />
-    </Icon.Group>
+    </IconGroup>
   </div>
 )
 
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleTwitterGroup.js b/docs/src/examples/elements/Icon/Groups/IconExampleTwitterGroup.js
index e5da3d9764..9a68c5ef36 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleTwitterGroup.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleTwitterGroup.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Header, Icon } from 'semantic-ui-react'
+import { IconGroup, Header, Icon } from 'semantic-ui-react'
 
 const IconExampleTwitterGroup = () => (
   <Header as='h2'>
-    <Icon.Group size='large'>
+    <IconGroup size='large'>
       <Icon name='twitter' />
       <Icon corner name='add' />
-    </Icon.Group>
+    </IconGroup>
     Add on Twitter
   </Header>
 )
diff --git a/docs/src/examples/elements/Image/Groups/ImageExampleGroupSize.js b/docs/src/examples/elements/Image/Groups/ImageExampleGroupSize.js
index 7027a89db5..2db64861e6 100644
--- a/docs/src/examples/elements/Image/Groups/ImageExampleGroupSize.js
+++ b/docs/src/examples/elements/Image/Groups/ImageExampleGroupSize.js
@@ -1,23 +1,23 @@
 import React from 'react'
-import { Divider, Image } from 'semantic-ui-react'
+import { ImageGroup, Divider, Image } from 'semantic-ui-react'
 
 const src = '/images/wireframe/image.png'
 
 const ImageExampleGroupSize = () => (
   <div>
-    <Image.Group size='tiny'>
+    <ImageGroup size='tiny'>
       <Image src={src} />
       <Image src={src} />
       <Image src={src} />
       <Image src={src} />
-    </Image.Group>
+    </ImageGroup>
     <Divider hidden />
-    <Image.Group size='small'>
+    <ImageGroup size='small'>
       <Image src={src} />
       <Image src={src} />
       <Image src={src} />
       <Image src={src} />
-    </Image.Group>
+    </ImageGroup>
   </div>
 )
 
diff --git a/docs/src/examples/elements/Label/Content/LabelExampleDetail.js b/docs/src/examples/elements/Label/Content/LabelExampleDetail.js
index cd2e209081..5ffd3c5d21 100644
--- a/docs/src/examples/elements/Label/Content/LabelExampleDetail.js
+++ b/docs/src/examples/elements/Label/Content/LabelExampleDetail.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelDetail, Label } from 'semantic-ui-react'
 
 const LabelExampleDetail = () => (
   <Label>
     Dogs
-    <Label.Detail>214</Label.Detail>
+    <LabelDetail>214</LabelDetail>
   </Label>
 )
 
diff --git a/docs/src/examples/elements/Label/Content/LabelExampleLinkDetail.js b/docs/src/examples/elements/Label/Content/LabelExampleLinkDetail.js
index fc98508ea5..eb7c1ec38d 100644
--- a/docs/src/examples/elements/Label/Content/LabelExampleLinkDetail.js
+++ b/docs/src/examples/elements/Label/Content/LabelExampleLinkDetail.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Icon, Label } from 'semantic-ui-react'
+import { LabelDetail, Icon, Label } from 'semantic-ui-react'
 
 const LabelExampleLinkDetail = () => (
   <Label>
     <Icon name='mail' />
     23
-    <Label.Detail>View Mail</Label.Detail>
+    <LabelDetail>View Mail</LabelDetail>
   </Label>
 )
 
diff --git a/docs/src/examples/elements/Label/Groups/LabelExampleGroupCircular.js b/docs/src/examples/elements/Label/Groups/LabelExampleGroupCircular.js
index 13a570ad9c..a5f8f1f4db 100644
--- a/docs/src/examples/elements/Label/Groups/LabelExampleGroupCircular.js
+++ b/docs/src/examples/elements/Label/Groups/LabelExampleGroupCircular.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelGroup, Label } from 'semantic-ui-react'
 
 const LabelExampleGroupCircular = () => (
-  <Label.Group circular>
+  <LabelGroup circular>
     <Label as='a'>11</Label>
     <Label as='a'>22</Label>
     <Label as='a'>33</Label>
     <Label as='a'>44</Label>
     <Label as='a'>141</Label>
-  </Label.Group>
+  </LabelGroup>
 )
 
 export default LabelExampleGroupCircular
diff --git a/docs/src/examples/elements/Label/Groups/LabelExampleGroupColored.js b/docs/src/examples/elements/Label/Groups/LabelExampleGroupColored.js
index c74aaab272..ee52cc1f9f 100644
--- a/docs/src/examples/elements/Label/Groups/LabelExampleGroupColored.js
+++ b/docs/src/examples/elements/Label/Groups/LabelExampleGroupColored.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Icon, Label } from 'semantic-ui-react'
+import { LabelGroup, LabelDetail, Icon, Label } from 'semantic-ui-react'
 
 const LabelExampleGroupSize = () => (
-  <Label.Group color='blue'>
+  <LabelGroup color='blue'>
     <Label as='a'>
       Fun
       <Icon name='close' />
     </Label>
     <Label as='a'>
       Happy
-      <Label.Detail>22</Label.Detail>
+      <LabelDetail>22</LabelDetail>
     </Label>
     <Label as='a'>Smart</Label>
     <Label as='a'>Insane</Label>
     <Label as='a'>Exciting</Label>
-  </Label.Group>
+  </LabelGroup>
 )
 
 export default LabelExampleGroupSize
diff --git a/docs/src/examples/elements/Label/Groups/LabelExampleGroupSize.js b/docs/src/examples/elements/Label/Groups/LabelExampleGroupSize.js
index 0f8f910cc4..8ae315c889 100644
--- a/docs/src/examples/elements/Label/Groups/LabelExampleGroupSize.js
+++ b/docs/src/examples/elements/Label/Groups/LabelExampleGroupSize.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelGroup, Label } from 'semantic-ui-react'
 
 const LabelExampleGroupSize = () => (
-  <Label.Group size='huge'>
+  <LabelGroup size='huge'>
     <Label>Fun</Label>
     <Label>Happy</Label>
     <Label>Smart</Label>
     <Label>Witty</Label>
-  </Label.Group>
+  </LabelGroup>
 )
 
 export default LabelExampleGroupSize
diff --git a/docs/src/examples/elements/Label/Groups/LabelExampleGroupTag.js b/docs/src/examples/elements/Label/Groups/LabelExampleGroupTag.js
index 182ff936c5..e3150bbb7d 100644
--- a/docs/src/examples/elements/Label/Groups/LabelExampleGroupTag.js
+++ b/docs/src/examples/elements/Label/Groups/LabelExampleGroupTag.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelGroup, Label } from 'semantic-ui-react'
 
 const LabelExampleGroupTag = () => (
-  <Label.Group tag>
+  <LabelGroup tag>
     <Label as='a'>$10.00</Label>
     <Label as='a'>$19.99</Label>
     <Label as='a'>$24.99</Label>
     <Label as='a'>$30.99</Label>
     <Label as='a'>$10.25</Label>
-  </Label.Group>
+  </LabelGroup>
 )
 
 export default LabelExampleGroupTag
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleAttached.js b/docs/src/examples/elements/Label/Types/LabelExampleAttached.js
index b92f92dee7..e620f16dd9 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleAttached.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleAttached.js
@@ -1,49 +1,56 @@
 import React from 'react'
-import { Grid, Image, Label, Segment } from 'semantic-ui-react'
+import {
+  GridRow,
+  GridColumn,
+  Grid,
+  Image,
+  Label,
+  Segment,
+} from 'semantic-ui-react'
 
 const LabelExampleAttached = () => (
   <Grid columns={3}>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Segment padded>
           <Label attached='top'>HTML</Label>
           <Image src='/images/wireframe/paragraph.png' />
         </Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment padded>
           <Label attached='bottom'>CSS</Label>
           <Image src='/images/wireframe/paragraph.png' />
         </Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment padded>
           <Label attached='top right'>Code</Label>
           <Image src='/images/wireframe/paragraph.png' />
         </Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
 
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Segment padded>
           <Label attached='top left'>View</Label>
           <Image src='/images/wireframe/paragraph.png' />
         </Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment padded>
           <Label attached='bottom left'>User View</Label>
           <Image src='/images/wireframe/paragraph.png' />
         </Segment>
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Segment padded>
           <Label attached='bottom right'>Admin View</Label>
           <Image src='/images/wireframe/paragraph.png' />
         </Segment>
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleCorner.js b/docs/src/examples/elements/Label/Types/LabelExampleCorner.js
index 9d84f070e1..384ab0f12f 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleCorner.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleCorner.js
@@ -1,23 +1,23 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const LabelExampleCorner = () => (
   <Grid columns={2}>
-    <Grid.Column>
+    <GridColumn>
       <Image
         fluid
         label={{ as: 'a', corner: 'left', icon: 'heart' }}
         src='/images/wireframe/image.png'
       />
-    </Grid.Column>
+    </GridColumn>
 
-    <Grid.Column>
+    <GridColumn>
       <Image
         fluid
         label={{ as: 'a', color: 'red', corner: 'right', icon: 'save' }}
         src='/images/wireframe/image.png'
       />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleFloating.js b/docs/src/examples/elements/Label/Types/LabelExampleFloating.js
index 1a480a874f..968e80af04 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleFloating.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleFloating.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Icon, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Label, Menu } from 'semantic-ui-react'
 
 const LabelExampleFloating = () => (
   <Menu compact>
-    <Menu.Item as='a'>
+    <MenuItem as='a'>
       <Icon name='mail' /> Messages
       <Label color='red' floating>
         22
       </Label>
-    </Menu.Item>
-    <Menu.Item as='a'>
+    </MenuItem>
+    <MenuItem as='a'>
       <Icon name='users' /> Friends
       <Label color='teal' floating>
         22
       </Label>
-    </Menu.Item>
+    </MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleHorizontal.js b/docs/src/examples/elements/Label/Types/LabelExampleHorizontal.js
index 02e14f502f..c0d74a4688 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleHorizontal.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleHorizontal.js
@@ -1,30 +1,30 @@
 import React from 'react'
-import { Label, List } from 'semantic-ui-react'
+import { ListItem, Label, List } from 'semantic-ui-react'
 
 const LabelExampleHorizontal = () => (
   <List divided selection>
-    <List.Item>
+    <ListItem>
       <Label color='red' horizontal>
         Fruit
       </Label>
       Kumquats
-    </List.Item>
-    <List.Item>
+    </ListItem>
+    <ListItem>
       <Label color='purple' horizontal>
         Candy
       </Label>
       Ice Cream
-    </List.Item>
-    <List.Item>
+    </ListItem>
+    <ListItem>
       <Label color='red' horizontal>
         Fruit
       </Label>
       Orange
-    </List.Item>
-    <List.Item>
+    </ListItem>
+    <ListItem>
       <Label horizontal>Dog</Label>
       Poodle
-    </List.Item>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleImageColored.js b/docs/src/examples/elements/Label/Types/LabelExampleImageColored.js
index f79def881b..55aef8d88f 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleImageColored.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleImageColored.js
@@ -1,22 +1,22 @@
 import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelDetail, Label } from 'semantic-ui-react'
 
 const LabelExampleImage = () => (
   <div>
     <Label as='a' color='blue' image>
       <img src='/images/avatar/small/veronika.jpg' />
       Veronika
-      <Label.Detail>Friend</Label.Detail>
+      <LabelDetail>Friend</LabelDetail>
     </Label>
     <Label as='a' color='teal' image>
       <img src='/images/avatar/small/jenny.jpg' />
       Jenny
-      <Label.Detail>Friend</Label.Detail>
+      <LabelDetail>Friend</LabelDetail>
     </Label>
     <Label as='a' color='yellow' image>
       <img src='/images/avatar/small/christian.jpg' />
       Christian
-      <Label.Detail>Co-worker</Label.Detail>
+      <LabelDetail>Co-worker</LabelDetail>
     </Label>
   </div>
 )
diff --git a/docs/src/examples/elements/Label/Types/LabelExamplePointing.js b/docs/src/examples/elements/Label/Types/LabelExamplePointing.js
index b542b91d81..8e1d5ba246 100644
--- a/docs/src/examples/elements/Label/Types/LabelExamplePointing.js
+++ b/docs/src/examples/elements/Label/Types/LabelExamplePointing.js
@@ -1,30 +1,30 @@
 import React from 'react'
-import { Divider, Form, Label } from 'semantic-ui-react'
+import { FormField, Divider, Form, Label } from 'semantic-ui-react'
 
 const LabelExamplePointing = () => (
   <Form>
-    <Form.Field>
+    <FormField>
       <input type='text' placeholder='First name' />
       <Label pointing>Please enter a value</Label>
-    </Form.Field>
+    </FormField>
     <Divider />
 
-    <Form.Field>
+    <FormField>
       <Label pointing='below'>Please enter a value</Label>
       <input type='text' placeholder='Last Name' />
-    </Form.Field>
+    </FormField>
     <Divider />
 
-    <Form.Field inline>
+    <FormField inline>
       <input type='text' placeholder='Username' />
       <Label pointing='left'>That name is taken!</Label>
-    </Form.Field>
+    </FormField>
     <Divider />
 
-    <Form.Field inline>
+    <FormField inline>
       <Label pointing='right'>Your password must be 6 characters or more</Label>
       <input type='password' placeholder='Password' />
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/elements/Label/Types/LabelExamplePointingColored.js b/docs/src/examples/elements/Label/Types/LabelExamplePointingColored.js
index 8ff89a85cf..370de8ab25 100644
--- a/docs/src/examples/elements/Label/Types/LabelExamplePointingColored.js
+++ b/docs/src/examples/elements/Label/Types/LabelExamplePointingColored.js
@@ -1,38 +1,38 @@
 import React from 'react'
-import { Divider, Form, Label } from 'semantic-ui-react'
+import { FormField, Divider, Form, Label } from 'semantic-ui-react'
 
 const LabelExamplePointing = () => (
   <Form>
-    <Form.Field>
+    <FormField>
       <input type='text' placeholder='First name' />
       <Label basic color='red' pointing>
         Please enter a value
       </Label>
-    </Form.Field>
+    </FormField>
     <Divider />
 
-    <Form.Field>
+    <FormField>
       <Label basic color='red' pointing='below'>
         Please enter a value
       </Label>
       <input type='text' placeholder='Last Name' />
-    </Form.Field>
+    </FormField>
     <Divider />
 
-    <Form.Field inline>
+    <FormField inline>
       <input type='text' placeholder='Username' />
       <Label basic color='red' pointing='left'>
         That name is taken!
       </Label>
-    </Form.Field>
+    </FormField>
     <Divider />
 
-    <Form.Field inline>
+    <FormField inline>
       <Label basic color='red' pointing='right'>
         Your password must be 6 characters or more
       </Label>
       <input type='password' placeholder='Password' />
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/elements/Label/Types/LabelExamplePrompt.js b/docs/src/examples/elements/Label/Types/LabelExamplePrompt.js
index 9c82ecac34..ed295bcffe 100644
--- a/docs/src/examples/elements/Label/Types/LabelExamplePrompt.js
+++ b/docs/src/examples/elements/Label/Types/LabelExamplePrompt.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Form, Input, Label } from 'semantic-ui-react'
+import { FormField, Form, Input, Label } from 'semantic-ui-react'
 
 const LabelExamplePrompt = () => (
   <Form>
-    <Form.Field>
+    <FormField>
       <Input placeholder='First name' />
       <Label pointing prompt>
         Please enter a value
       </Label>
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleRibbon.js b/docs/src/examples/elements/Label/Types/LabelExampleRibbon.js
index 2079c49748..a048e32273 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleRibbon.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleRibbon.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Grid, Image, Label, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Label, Segment } from 'semantic-ui-react'
 
 const LabelExampleRibbon = () => (
   <Grid columns={2}>
-    <Grid.Column>
+    <GridColumn>
       <Segment raised>
         <Label as='a' color='red' ribbon>
           Overview
@@ -19,9 +19,9 @@ const LabelExampleRibbon = () => (
 
         <Image src='/images/wireframe/paragraph.png' />
       </Segment>
-    </Grid.Column>
+    </GridColumn>
 
-    <Grid.Column>
+    <GridColumn>
       <Segment>
         <Label as='a' color='orange' ribbon='right'>
           Specs
@@ -33,7 +33,7 @@ const LabelExampleRibbon = () => (
         </Label>
         <Image src='/images/wireframe/paragraph.png' />
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleRibbonImage.js b/docs/src/examples/elements/Label/Types/LabelExampleRibbonImage.js
index 835b3b6630..0d644ec940 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleRibbonImage.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleRibbonImage.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
 
 const LabelExampleRibbonImage = () => (
   <Grid columns={2}>
-    <Grid.Column>
+    <GridColumn>
       <Image
         fluid
         label={{
@@ -15,9 +15,9 @@ const LabelExampleRibbonImage = () => (
         }}
         src='/images/wireframe/image.png'
       />
-    </Grid.Column>
+    </GridColumn>
 
-    <Grid.Column>
+    <GridColumn>
       <Image
         fluid
         label={{
@@ -29,7 +29,7 @@ const LabelExampleRibbonImage = () => (
         }}
         src='/images/wireframe/image.png'
       />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/List/Content/ListExampleDescription.js b/docs/src/examples/elements/List/Content/ListExampleDescription.js
index e1ae575e8d..0a09b15716 100644
--- a/docs/src/examples/elements/List/Content/ListExampleDescription.js
+++ b/docs/src/examples/elements/List/Content/ListExampleDescription.js
@@ -1,46 +1,53 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListIcon,
+  ListHeader,
+  ListDescription,
+  ListContent,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleDescription = () => (
   <List>
-    <List.Item>
-      <List.Icon name='marker' />
-      <List.Content>
-        <List.Header as='a'>Krowlewskie Jadlo</List.Header>
-        <List.Description>
+    <ListItem>
+      <ListIcon name='marker' />
+      <ListContent>
+        <ListHeader as='a'>Krowlewskie Jadlo</ListHeader>
+        <ListDescription>
           An excellent polish restaurant, quick delivery and hearty, filling
           meals.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='marker' />
-      <List.Content>
-        <List.Header as='a'>Xian Famous Foods</List.Header>
-        <List.Description>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='marker' />
+      <ListContent>
+        <ListHeader as='a'>Xian Famous Foods</ListHeader>
+        <ListDescription>
           A taste of Shaanxi's delicious culinary traditions, with delights like
           spicy cold noodles and lamb burgers.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='marker' />
-      <List.Content>
-        <List.Header as='a'>Sapporo Haru</List.Header>
-        <List.Description>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='marker' />
+      <ListContent>
+        <ListHeader as='a'>Sapporo Haru</ListHeader>
+        <ListDescription>
           Greenpoint's best choice for quick and delicious sushi.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='marker' />
-      <List.Content>
-        <List.Header as='a'>Enid's</List.Header>
-        <List.Description>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='marker' />
+      <ListContent>
+        <ListHeader as='a'>Enid's</ListHeader>
+        <ListDescription>
           At night a bar, during the day a delicious brunch spot.
-        </List.Description>
-      </List.Content>
-    </List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Content/ListExampleHeader.js b/docs/src/examples/elements/List/Content/ListExampleHeader.js
index 95a397408f..d3a7f981d0 100644
--- a/docs/src/examples/elements/List/Content/ListExampleHeader.js
+++ b/docs/src/examples/elements/List/Content/ListExampleHeader.js
@@ -1,23 +1,23 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, ListHeader, List } from 'semantic-ui-react'
 
 const ListExampleHeader = () => (
   <List>
-    <List.Item>
-      <List.Header>New York City</List.Header>A lovely city
-    </List.Item>
-    <List.Item>
-      <List.Header>Chicago</List.Header>
+    <ListItem>
+      <ListHeader>New York City</ListHeader>A lovely city
+    </ListItem>
+    <ListItem>
+      <ListHeader>Chicago</ListHeader>
       Also quite a lovely city
-    </List.Item>
-    <List.Item>
-      <List.Header>Los Angeles</List.Header>
+    </ListItem>
+    <ListItem>
+      <ListHeader>Los Angeles</ListHeader>
       Sometimes can be a lovely city
-    </List.Item>
-    <List.Item>
-      <List.Header>San Francisco</List.Header>
+    </ListItem>
+    <ListItem>
+      <ListHeader>San Francisco</ListHeader>
       What a lovely city
-    </List.Item>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Content/ListExampleIcon.js b/docs/src/examples/elements/List/Content/ListExampleIcon.js
index d9efd81c3d..1e6925da9e 100644
--- a/docs/src/examples/elements/List/Content/ListExampleIcon.js
+++ b/docs/src/examples/elements/List/Content/ListExampleIcon.js
@@ -1,32 +1,39 @@
 import React from 'react'
-import { Icon, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListDescription,
+  ListContent,
+  Icon,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleIcon = () => (
   <List>
-    <List.Item as='a'>
+    <ListItem as='a'>
       <Icon name='help' />
-      <List.Content>
-        <List.Header>Floated Icon</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader>Floated Icon</ListHeader>
+        <ListDescription>
           This text will always have a left margin to make sure it sits
           alongside your icon
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item as='a'>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem as='a'>
       <Icon name='right triangle' />
-      <List.Content>
-        <List.Header>Icon Alignment</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader>Icon Alignment</ListHeader>
+        <ListDescription>
           Floated icons are by default top aligned. To have an icon top aligned
           try this example.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Icon name='help' />
       Inline Text
-    </List.Item>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Content/ListExampleImage.js b/docs/src/examples/elements/List/Content/ListExampleImage.js
index db30fabf6e..10498b4b28 100644
--- a/docs/src/examples/elements/List/Content/ListExampleImage.js
+++ b/docs/src/examples/elements/List/Content/ListExampleImage.js
@@ -1,67 +1,74 @@
 import React from 'react'
-import { List, Image } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListDescription,
+  ListContent,
+  List,
+  Image,
+} from 'semantic-ui-react'
 
 const ListExampleImage = () => (
   <List>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/rachel.png' />
-      <List.Content>
-        <List.Header as='a'>Rachel</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Rachel</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>Arrested Development</b>
           </a>{' '}
           just now.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/lindsay.png' />
-      <List.Content>
-        <List.Header as='a'>Lindsay</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Lindsay</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>Bob's Burgers</b>
           </a>{' '}
           10 hours ago.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/matthew.png' />
-      <List.Content>
-        <List.Header as='a'>Matthew</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Matthew</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>The Godfather Part 2</b>
           </a>{' '}
           yesterday.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/jenny.jpg' />
-      <List.Content>
-        <List.Header as='a'>Jenny Hess</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Jenny Hess</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>Twin Peaks</b>
           </a>{' '}
           3 days ago.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/veronika.jpg' />
-      <List.Content>
-        <List.Header as='a'>Veronika Ossi</List.Header>
-        <List.Description>Has not watched anything recently</List.Description>
-      </List.Content>
-    </List.Item>
+      <ListContent>
+        <ListHeader as='a'>Veronika Ossi</ListHeader>
+        <ListDescription>Has not watched anything recently</ListDescription>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Content/ListExampleItem.js b/docs/src/examples/elements/List/Content/ListExampleItem.js
index 4ab3bb05db..637fba3394 100644
--- a/docs/src/examples/elements/List/Content/ListExampleItem.js
+++ b/docs/src/examples/elements/List/Content/ListExampleItem.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleItem = () => (
   <List>
-    <List.Item>1</List.Item>
-    <List.Item>2</List.Item>
-    <List.Item>3</List.Item>
+    <ListItem>1</ListItem>
+    <ListItem>2</ListItem>
+    <ListItem>3</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Content/ListExampleLink.js b/docs/src/examples/elements/List/Content/ListExampleLink.js
index 59786b54e9..1ca7f60a11 100644
--- a/docs/src/examples/elements/List/Content/ListExampleLink.js
+++ b/docs/src/examples/elements/List/Content/ListExampleLink.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleLink = () => (
   <List>
-    <List.Item as='a'>What is a FAQ?</List.Item>
-    <List.Item as='a'>Who is our user?</List.Item>
-    <List.Item as='a'>Where is our office located?</List.Item>
+    <ListItem as='a'>What is a FAQ?</ListItem>
+    <ListItem as='a'>Who is our user?</ListItem>
+    <ListItem as='a'>Where is our office located?</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Content/ListExampleLinkComplex.js b/docs/src/examples/elements/List/Content/ListExampleLinkComplex.js
index 5faf4e9267..c7787ca09a 100644
--- a/docs/src/examples/elements/List/Content/ListExampleLinkComplex.js
+++ b/docs/src/examples/elements/List/Content/ListExampleLinkComplex.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, ListHeader, ListDescription, List } from 'semantic-ui-react'
 
 const ListExampleLinkComplex = () => (
   <List>
-    <List.Item>
-      <List.Header as='a'>Header</List.Header>
-      <List.Description>
+    <ListItem>
+      <ListHeader as='a'>Header</ListHeader>
+      <ListDescription>
         Click a link in our <a>description</a>.
-      </List.Description>
-    </List.Item>
-    <List.Item>
-      <List.Header as='a'>Learn More</List.Header>
-      <List.Description>
+      </ListDescription>
+    </ListItem>
+    <ListItem>
+      <ListHeader as='a'>Learn More</ListHeader>
+      <ListDescription>
         Learn more about this site on <a>our FAQ page</a>.
-      </List.Description>
-    </List.Item>
+      </ListDescription>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/ContentVariations/ListExampleFloated.js b/docs/src/examples/elements/List/ContentVariations/ListExampleFloated.js
index 715a358b9c..5c0758662f 100644
--- a/docs/src/examples/elements/List/ContentVariations/ListExampleFloated.js
+++ b/docs/src/examples/elements/List/ContentVariations/ListExampleFloated.js
@@ -1,36 +1,36 @@
 import React from 'react'
-import { Button, Image, List } from 'semantic-ui-react'
+import { ListItem, ListContent, Button, Image, List } from 'semantic-ui-react'
 
 const ListExampleFloated = () => (
   <List divided verticalAlign='middle'>
-    <List.Item>
-      <List.Content floated='right'>
+    <ListItem>
+      <ListContent floated='right'>
         <Button>Add</Button>
-      </List.Content>
+      </ListContent>
       <Image avatar src='/images/avatar/small/lena.png' />
-      <List.Content>Lena</List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Content floated='right'>
+      <ListContent>Lena</ListContent>
+    </ListItem>
+    <ListItem>
+      <ListContent floated='right'>
         <Button>Add</Button>
-      </List.Content>
+      </ListContent>
       <Image avatar src='/images/avatar/small/lindsay.png' />
-      <List.Content>Lindsay</List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Content floated='right'>
+      <ListContent>Lindsay</ListContent>
+    </ListItem>
+    <ListItem>
+      <ListContent floated='right'>
         <Button>Add</Button>
-      </List.Content>
+      </ListContent>
       <Image avatar src='/images/avatar/small/mark.png' />
-      <List.Content>Mark</List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Content floated='right'>
+      <ListContent>Mark</ListContent>
+    </ListItem>
+    <ListItem>
+      <ListContent floated='right'>
         <Button>Add</Button>
-      </List.Content>
+      </ListContent>
       <Image avatar src='/images/avatar/small/molly.png' />
-      <List.Content>Molly</List.Content>
-    </List.Item>
+      <ListContent>Molly</ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js b/docs/src/examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js
index 404c59d97f..7a74475b4c 100644
--- a/docs/src/examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js
+++ b/docs/src/examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleFloatedHorizontal = () => (
   <div>
     <List floated='right' horizontal>
-      <List.Item disabled href='#'>
+      <ListItem disabled href='#'>
         © GitHub, Inc.
-      </List.Item>
-      <List.Item href='#'>Terms</List.Item>
-      <List.Item href='#'>Privacy</List.Item>
-      <List.Item href='#'>Contact</List.Item>
+      </ListItem>
+      <ListItem href='#'>Terms</ListItem>
+      <ListItem href='#'>Privacy</ListItem>
+      <ListItem href='#'>Contact</ListItem>
     </List>
 
     <List horizontal>
-      <List.Item href='#'>About Us</List.Item>
-      <List.Item href='#'>Jobs</List.Item>
+      <ListItem href='#'>About Us</ListItem>
+      <ListItem href='#'>Jobs</ListItem>
     </List>
   </div>
 )
diff --git a/docs/src/examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js b/docs/src/examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js
index 63d2222b5c..5fbda806b3 100644
--- a/docs/src/examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js
+++ b/docs/src/examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js
@@ -1,20 +1,20 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import { ListItem, ListContent, Image, List } from 'semantic-ui-react'
 
 const ListExampleVerticallyAligned = () => (
   <List horizontal>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/wireframe/square-image.png' />
-      <List.Content verticalAlign='top'>Top Aligned</List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent verticalAlign='top'>Top Aligned</ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/wireframe/square-image.png' />
-      <List.Content verticalAlign='middle'>Middle</List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent verticalAlign='middle'>Middle</ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/wireframe/square-image.png' />
-      <List.Content verticalAlign='bottom'>Bottom</List.Content>
-    </List.Item>
+      <ListContent verticalAlign='bottom'>Bottom</ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleBasic.js b/docs/src/examples/elements/List/Types/ListExampleBasic.js
index 55e23f2324..68898dd20b 100644
--- a/docs/src/examples/elements/List/Types/ListExampleBasic.js
+++ b/docs/src/examples/elements/List/Types/ListExampleBasic.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleBasic = () => (
   <List>
-    <List.Item>Apples</List.Item>
-    <List.Item>Pears</List.Item>
-    <List.Item>Oranges</List.Item>
+    <ListItem>Apples</ListItem>
+    <ListItem>Pears</ListItem>
+    <ListItem>Oranges</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleBulleted.js b/docs/src/examples/elements/List/Types/ListExampleBulleted.js
index 02aef88323..e617ea87c0 100644
--- a/docs/src/examples/elements/List/Types/ListExampleBulleted.js
+++ b/docs/src/examples/elements/List/Types/ListExampleBulleted.js
@@ -1,19 +1,19 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
 
 const ListExampleBulleted = () => (
   <List bulleted>
-    <List.Item>Gaining Access</List.Item>
-    <List.Item>Inviting Friends</List.Item>
-    <List.Item>
+    <ListItem>Gaining Access</ListItem>
+    <ListItem>Inviting Friends</ListItem>
+    <ListItem>
       Benefits
-      <List.List>
-        <List.Item href='#'>Link to somewhere</List.Item>
-        <List.Item>Rebates</List.Item>
-        <List.Item>Discounts</List.Item>
-      </List.List>
-    </List.Item>
-    <List.Item>Warranty</List.Item>
+      <ListList>
+        <ListItem href='#'>Link to somewhere</ListItem>
+        <ListItem>Rebates</ListItem>
+        <ListItem>Discounts</ListItem>
+      </ListList>
+    </ListItem>
+    <ListItem>Warranty</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleBulletedHorizontal.js b/docs/src/examples/elements/List/Types/ListExampleBulletedHorizontal.js
index 9942d10f39..c36c7183ff 100644
--- a/docs/src/examples/elements/List/Types/ListExampleBulletedHorizontal.js
+++ b/docs/src/examples/elements/List/Types/ListExampleBulletedHorizontal.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleBulletedHorizontal = () => (
   <List bulleted horizontal>
-    <List.Item as='a'>About Us</List.Item>
-    <List.Item as='a'>Sitemap</List.Item>
-    <List.Item as='a'>Contact</List.Item>
+    <ListItem as='a'>About Us</ListItem>
+    <ListItem as='a'>Sitemap</ListItem>
+    <ListItem as='a'>Contact</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleBulletedSimple.js b/docs/src/examples/elements/List/Types/ListExampleBulletedSimple.js
index cbf02ee7f8..04b6db2222 100644
--- a/docs/src/examples/elements/List/Types/ListExampleBulletedSimple.js
+++ b/docs/src/examples/elements/List/Types/ListExampleBulletedSimple.js
@@ -1,21 +1,21 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
 
 const ListExampleBulletedSimple = () => (
   <List as='ul'>
-    <List.Item as='li'>Gaining Access</List.Item>
-    <List.Item as='li'>Inviting Friends</List.Item>
-    <List.Item as='li'>
+    <ListItem as='li'>Gaining Access</ListItem>
+    <ListItem as='li'>Inviting Friends</ListItem>
+    <ListItem as='li'>
       Benefits
-      <List.List as='ul'>
-        <List.Item as='li'>
+      <ListList as='ul'>
+        <ListItem as='li'>
           <a href='#'>Link to somewhere</a>
-        </List.Item>
-        <List.Item as='li'>Rebates</List.Item>
-        <List.Item as='li'>Discounts</List.Item>
-      </List.List>
-    </List.Item>
-    <List.Item as='li'>Warranty</List.Item>
+        </ListItem>
+        <ListItem as='li'>Rebates</ListItem>
+        <ListItem as='li'>Discounts</ListItem>
+      </ListList>
+    </ListItem>
+    <ListItem as='li'>Warranty</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleDivided.js b/docs/src/examples/elements/List/Types/ListExampleDivided.js
index 978335bd6b..714edfa5b1 100644
--- a/docs/src/examples/elements/List/Types/ListExampleDivided.js
+++ b/docs/src/examples/elements/List/Types/ListExampleDivided.js
@@ -1,29 +1,36 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListIcon,
+  ListHeader,
+  ListDescription,
+  ListContent,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleDivided = () => (
   <List divided relaxed>
-    <List.Item>
-      <List.Icon name='github' size='large' verticalAlign='middle' />
-      <List.Content>
-        <List.Header as='a'>Semantic-Org/Semantic-UI</List.Header>
-        <List.Description as='a'>Updated 10 mins ago</List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='github' size='large' verticalAlign='middle' />
-      <List.Content>
-        <List.Header as='a'>Semantic-Org/Semantic-UI-Docs</List.Header>
-        <List.Description as='a'>Updated 22 mins ago</List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='github' size='large' verticalAlign='middle' />
-      <List.Content>
-        <List.Header as='a'>Semantic-Org/Semantic-UI-Meteor</List.Header>
-        <List.Description as='a'>Updated 34 mins ago</List.Description>
-      </List.Content>
-    </List.Item>
+    <ListItem>
+      <ListIcon name='github' size='large' verticalAlign='middle' />
+      <ListContent>
+        <ListHeader as='a'>Semantic-Org/Semantic-UI</ListHeader>
+        <ListDescription as='a'>Updated 10 mins ago</ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='github' size='large' verticalAlign='middle' />
+      <ListContent>
+        <ListHeader as='a'>Semantic-Org/Semantic-UI-Docs</ListHeader>
+        <ListDescription as='a'>Updated 22 mins ago</ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='github' size='large' verticalAlign='middle' />
+      <ListContent>
+        <ListHeader as='a'>Semantic-Org/Semantic-UI-Meteor</ListHeader>
+        <ListDescription as='a'>Updated 34 mins ago</ListDescription>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleIcon.js b/docs/src/examples/elements/List/Types/ListExampleIcon.js
index 45d3261acd..02d1af454b 100644
--- a/docs/src/examples/elements/List/Types/ListExampleIcon.js
+++ b/docs/src/examples/elements/List/Types/ListExampleIcon.js
@@ -1,28 +1,28 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, ListIcon, ListContent, List } from 'semantic-ui-react'
 
 const ListExampleIcon = () => (
   <List>
-    <List.Item>
-      <List.Icon name='users' />
-      <List.Content>Semantic UI</List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='marker' />
-      <List.Content>New York, NY</List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='mail' />
-      <List.Content>
+    <ListItem>
+      <ListIcon name='users' />
+      <ListContent>Semantic UI</ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='marker' />
+      <ListContent>New York, NY</ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='mail' />
+      <ListContent>
         <a href='mailto:jack@semantic-ui.com'>jack@semantic-ui.com</a>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='linkify' />
-      <List.Content>
+      </ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='linkify' />
+      <ListContent>
         <a href='http://www.semantic-ui.com'>semantic-ui.com</a>
-      </List.Content>
-    </List.Item>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleIconShorthand.js b/docs/src/examples/elements/List/Types/ListExampleIconShorthand.js
index ada5f39c1e..3233924ef7 100644
--- a/docs/src/examples/elements/List/Types/ListExampleIconShorthand.js
+++ b/docs/src/examples/elements/List/Types/ListExampleIconShorthand.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleIconShorthand = () => (
   <List>
-    <List.Item icon='users' content='Semantic UI' />
-    <List.Item icon='marker' content='New York, NY' />
-    <List.Item
+    <ListItem icon='users' content='Semantic UI' />
+    <ListItem icon='marker' content='New York, NY' />
+    <ListItem
       icon='mail'
       content={<a href='mailto:jack@semantic-ui.com'>jack@semantic-ui.com</a>}
     />
-    <List.Item
+    <ListItem
       icon='linkify'
       content={<a href='http://www.semantic-ui.com'>semantic-ui.com</a>}
     />
diff --git a/docs/src/examples/elements/List/Types/ListExampleLink.js b/docs/src/examples/elements/List/Types/ListExampleLink.js
index d35e0ce521..5bdd5088ab 100644
--- a/docs/src/examples/elements/List/Types/ListExampleLink.js
+++ b/docs/src/examples/elements/List/Types/ListExampleLink.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleLink = () => (
   <List link>
-    <List.Item active>Home</List.Item>
-    <List.Item as='a'>About</List.Item>
-    <List.Item as='a'>Jobs</List.Item>
-    <List.Item as='a'>Team</List.Item>
+    <ListItem active>Home</ListItem>
+    <ListItem as='a'>About</ListItem>
+    <ListItem as='a'>Jobs</ListItem>
+    <ListItem as='a'>Team</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleOrdered.js b/docs/src/examples/elements/List/Types/ListExampleOrdered.js
index 04b695880f..705f1d51e3 100644
--- a/docs/src/examples/elements/List/Types/ListExampleOrdered.js
+++ b/docs/src/examples/elements/List/Types/ListExampleOrdered.js
@@ -1,19 +1,19 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
 
 const ListExampleOrdered = () => (
   <List ordered>
-    <List.Item as='a'>Getting Started</List.Item>
-    <List.Item as='a'>Introduction</List.Item>
-    <List.Item>
+    <ListItem as='a'>Getting Started</ListItem>
+    <ListItem as='a'>Introduction</ListItem>
+    <ListItem>
       <a>Languages</a>
-      <List.List>
-        <List.Item as='a'>HTML</List.Item>
-        <List.Item as='a'>Javascript</List.Item>
-        <List.Item as='a'>CSS</List.Item>
-      </List.List>
-    </List.Item>
-    <List.Item as='a'>Review</List.Item>
+      <ListList>
+        <ListItem as='a'>HTML</ListItem>
+        <ListItem as='a'>Javascript</ListItem>
+        <ListItem as='a'>CSS</ListItem>
+      </ListList>
+    </ListItem>
+    <ListItem as='a'>Review</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleOrderedSimple.js b/docs/src/examples/elements/List/Types/ListExampleOrderedSimple.js
index a90a13b243..a0ab5d585f 100644
--- a/docs/src/examples/elements/List/Types/ListExampleOrderedSimple.js
+++ b/docs/src/examples/elements/List/Types/ListExampleOrderedSimple.js
@@ -1,19 +1,19 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
 
 const ListExampleOrderedSimple = () => (
   <List as='ol'>
-    <List.Item as='li'>Signing Up</List.Item>
-    <List.Item as='li'>User Benefits</List.Item>
-    <List.Item as='li'>
+    <ListItem as='li'>Signing Up</ListItem>
+    <ListItem as='li'>User Benefits</ListItem>
+    <ListItem as='li'>
       User Types
-      <List.List as='ol'>
-        <List.Item as='li'>Admin</List.Item>
-        <List.Item as='li'>Power User</List.Item>
-        <List.Item as='li'>Regular User</List.Item>
-      </List.List>
-    </List.Item>
-    <List.Item as='li'>Deleting Your Account</List.Item>
+      <ListList as='ol'>
+        <ListItem as='li'>Admin</ListItem>
+        <ListItem as='li'>Power User</ListItem>
+        <ListItem as='li'>Regular User</ListItem>
+      </ListList>
+    </ListItem>
+    <ListItem as='li'>Deleting Your Account</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleOrderedValue.js b/docs/src/examples/elements/List/Types/ListExampleOrderedValue.js
index ca67baf461..d1324779d4 100644
--- a/docs/src/examples/elements/List/Types/ListExampleOrderedValue.js
+++ b/docs/src/examples/elements/List/Types/ListExampleOrderedValue.js
@@ -1,31 +1,31 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleOrderedValue = () => (
   <List as='ol'>
-    <List.Item as='li' value='*'>
+    <ListItem as='li' value='*'>
       Signing Up
-    </List.Item>
-    <List.Item as='li' value='*'>
+    </ListItem>
+    <ListItem as='li' value='*'>
       User Benefits
-    </List.Item>
-    <List.Item as='li' value='*'>
+    </ListItem>
+    <ListItem as='li' value='*'>
       User Types
-      <List.Item as='ol'>
-        <List.Item as='li' value='-'>
+      <ListItem as='ol'>
+        <ListItem as='li' value='-'>
           Admin
-        </List.Item>
-        <List.Item as='li' value='-'>
+        </ListItem>
+        <ListItem as='li' value='-'>
           Power User
-        </List.Item>
-        <List.Item as='li' value='-'>
+        </ListItem>
+        <ListItem as='li' value='-'>
           Regular User
-        </List.Item>
-      </List.Item>
-    </List.Item>
-    <List.Item as='li' value='*'>
+        </ListItem>
+      </ListItem>
+    </ListItem>
+    <ListItem as='li' value='*'>
       Deleting Your Account
-    </List.Item>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Types/ListExampleTree.js b/docs/src/examples/elements/List/Types/ListExampleTree.js
index 0a075a50a3..a029686ba3 100644
--- a/docs/src/examples/elements/List/Types/ListExampleTree.js
+++ b/docs/src/examples/elements/List/Types/ListExampleTree.js
@@ -1,83 +1,89 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import {
+  ListList,
+  ListItem,
+  ListIcon,
+  ListHeader,
+  ListDescription,
+  ListContent,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleTree = () => (
   <List>
-    <List.Item>
-      <List.Icon name='folder' />
-      <List.Content>
-        <List.Header>src</List.Header>
-        <List.Description>Source files for project</List.Description>
-        <List.List>
-          <List.Item>
-            <List.Icon name='folder' />
-            <List.Content>
-              <List.Header>site</List.Header>
-              <List.Description>Your site's theme</List.Description>
-            </List.Content>
-          </List.Item>
-          <List.Item>
-            <List.Icon name='folder' />
-            <List.Content>
-              <List.Header>themes</List.Header>
-              <List.Description>Packaged theme files</List.Description>
-              <List.List>
-                <List.Item>
-                  <List.Icon name='folder' />
-                  <List.Content>
-                    <List.Header>default</List.Header>
-                    <List.Description>Default packaged theme</List.Description>
-                  </List.Content>
-                </List.Item>
-                <List.Item>
-                  <List.Icon name='folder' />
-                  <List.Content>
-                    <List.Header>my_theme</List.Header>
-                    <List.Description>
+    <ListItem>
+      <ListIcon name='folder' />
+      <ListContent>
+        <ListHeader>src</ListHeader>
+        <ListDescription>Source files for project</ListDescription>
+        <ListList>
+          <ListItem>
+            <ListIcon name='folder' />
+            <ListContent>
+              <ListHeader>site</ListHeader>
+              <ListDescription>Your site's theme</ListDescription>
+            </ListContent>
+          </ListItem>
+          <ListItem>
+            <ListIcon name='folder' />
+            <ListContent>
+              <ListHeader>themes</ListHeader>
+              <ListDescription>Packaged theme files</ListDescription>
+              <ListList>
+                <ListItem>
+                  <ListIcon name='folder' />
+                  <ListContent>
+                    <ListHeader>default</ListHeader>
+                    <ListDescription>Default packaged theme</ListDescription>
+                  </ListContent>
+                </ListItem>
+                <ListItem>
+                  <ListIcon name='folder' />
+                  <ListContent>
+                    <ListHeader>my_theme</ListHeader>
+                    <ListDescription>
                       Packaged themes are also available in this folder
-                    </List.Description>
-                  </List.Content>
-                </List.Item>
-              </List.List>
-            </List.Content>
-          </List.Item>
-          <List.Item>
-            <List.Icon name='file' />
-            <List.Content>
-              <List.Header>theme.config</List.Header>
-              <List.Description>
+                    </ListDescription>
+                  </ListContent>
+                </ListItem>
+              </ListList>
+            </ListContent>
+          </ListItem>
+          <ListItem>
+            <ListIcon name='file' />
+            <ListContent>
+              <ListHeader>theme.config</ListHeader>
+              <ListDescription>
                 Config file for setting packaged themes
-              </List.Description>
-            </List.Content>
-          </List.Item>
-        </List.List>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='folder' />
-      <List.Content>
-        <List.Header>dist</List.Header>
-        <List.Description>Compiled CSS and JS files</List.Description>
-        <List.List>
-          <List.Item>
-            <List.Icon name='folder' />
-            <List.Content>
-              <List.Header>components</List.Header>
-              <List.Description>
-                Individual component CSS and JS
-              </List.Description>
-            </List.Content>
-          </List.Item>
-        </List.List>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Icon name='file' />
-      <List.Content>
-        <List.Header>semantic.json</List.Header>
-        <List.Description>Contains build settings for gulp</List.Description>
-      </List.Content>
-    </List.Item>
+              </ListDescription>
+            </ListContent>
+          </ListItem>
+        </ListList>
+      </ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='folder' />
+      <ListContent>
+        <ListHeader>dist</ListHeader>
+        <ListDescription>Compiled CSS and JS files</ListDescription>
+        <ListList>
+          <ListItem>
+            <ListIcon name='folder' />
+            <ListContent>
+              <ListHeader>components</ListHeader>
+              <ListDescription>Individual component CSS and JS</ListDescription>
+            </ListContent>
+          </ListItem>
+        </ListList>
+      </ListContent>
+    </ListItem>
+    <ListItem>
+      <ListIcon name='file' />
+      <ListContent>
+        <ListHeader>semantic.json</ListHeader>
+        <ListDescription>Contains build settings for gulp</ListDescription>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleAnimated.js b/docs/src/examples/elements/List/Variations/ListExampleAnimated.js
index f50e6219f8..c82dd85239 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleAnimated.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleAnimated.js
@@ -1,26 +1,32 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleAnimated = () => (
   <List animated verticalAlign='middle'>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/helen.jpg' />
-      <List.Content>
-        <List.Header>Helen</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader>Helen</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/christian.jpg' />
-      <List.Content>
-        <List.Header>Christian</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader>Christian</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header>Daniel</List.Header>
-      </List.Content>
-    </List.Item>
+      <ListContent>
+        <ListHeader>Daniel</ListHeader>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleCelled.js b/docs/src/examples/elements/List/Variations/ListExampleCelled.js
index 9e96866e13..b183037c22 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleCelled.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleCelled.js
@@ -1,28 +1,34 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleCelled = () => (
   <List celled>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/helen.jpg' />
-      <List.Content>
-        <List.Header>Snickerdoodle</List.Header>
+      <ListContent>
+        <ListHeader>Snickerdoodle</ListHeader>
         An excellent companion
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header>Poodle</List.Header>A poodle, it's pretty basic
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader>Poodle</ListHeader>A poodle, it's pretty basic
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header>Paulo</List.Header>
+      <ListContent>
+        <ListHeader>Paulo</ListHeader>
         He's also a dog
-      </List.Content>
-    </List.Item>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleCelledHorizontal.js b/docs/src/examples/elements/List/Variations/ListExampleCelledHorizontal.js
index fd6bc1a927..49838c5d65 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleCelledHorizontal.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleCelledHorizontal.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleCelledHorizontal = () => (
   <List celled horizontal>
-    <List.Item>About Us</List.Item>
-    <List.Item>Contact</List.Item>
-    <List.Item>Support</List.Item>
+    <ListItem>About Us</ListItem>
+    <ListItem>Contact</ListItem>
+    <ListItem>Support</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleCelledOrdered.js b/docs/src/examples/elements/List/Variations/ListExampleCelledOrdered.js
index a4108c6e5c..c8a15bee26 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleCelledOrdered.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleCelledOrdered.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
 
 const ListExampleCelledOrdered = () => (
   <List celled ordered>
-    <List.Item>Cats</List.Item>
-    <List.Item>Horses</List.Item>
-    <List.Item>
+    <ListItem>Cats</ListItem>
+    <ListItem>Horses</ListItem>
+    <ListItem>
       Dogs
-      <List.List>
-        <List.Item>Labradoodles</List.Item>
-        <List.Item>Shiba Inu</List.Item>
-        <List.Item>Mastiff</List.Item>
-      </List.List>
-    </List.Item>
+      <ListList>
+        <ListItem>Labradoodles</ListItem>
+        <ListItem>Shiba Inu</ListItem>
+        <ListItem>Mastiff</ListItem>
+      </ListList>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleDivided.js b/docs/src/examples/elements/List/Variations/ListExampleDivided.js
index 851fdccfa0..c2be1b5447 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleDivided.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleDivided.js
@@ -1,26 +1,32 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleDivided = () => (
   <List divided verticalAlign='middle'>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header as='a'>Daniel Louise</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader as='a'>Daniel Louise</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/stevie.jpg' />
-      <List.Content>
-        <List.Header as='a'>Stevie Feliciano</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader as='a'>Stevie Feliciano</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/elliot.jpg' />
-      <List.Content>
-        <List.Header as='a'>Elliot Fu</List.Header>
-      </List.Content>
-    </List.Item>
+      <ListContent>
+        <ListHeader as='a'>Elliot Fu</ListHeader>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleHorizontal.js b/docs/src/examples/elements/List/Variations/ListExampleHorizontal.js
index 189ddbc9d5..f992e2ed86 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleHorizontal.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleHorizontal.js
@@ -1,29 +1,35 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleHorizontal = () => (
   <List horizontal>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/tom.jpg' />
-      <List.Content>
-        <List.Header>Tom</List.Header>
+      <ListContent>
+        <ListHeader>Tom</ListHeader>
         Top Contributor
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/christian.jpg' />
-      <List.Content>
-        <List.Header>Christian Rocha</List.Header>
+      <ListContent>
+        <ListHeader>Christian Rocha</ListHeader>
         Admin
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/matt.jpg' />
-      <List.Content>
-        <List.Header>Matt</List.Header>
+      <ListContent>
+        <ListHeader>Matt</ListHeader>
         Top Rated User
-      </List.Content>
-    </List.Item>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleHorizontalBulleted.js b/docs/src/examples/elements/List/Variations/ListExampleHorizontalBulleted.js
index 0714142f6f..ba1cb0b69c 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleHorizontalBulleted.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleHorizontalBulleted.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
 
 const ListExampleHorizontalBulleted = () => (
   <List bulleted horizontal link>
-    <List.Item as='a'>Terms and Conditions</List.Item>
-    <List.Item as='a'>Privacy Policy</List.Item>
-    <List.Item as='a'>Contact Us</List.Item>
+    <ListItem as='a'>Terms and Conditions</ListItem>
+    <ListItem as='a'>Privacy Policy</ListItem>
+    <ListItem as='a'>Contact Us</ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleHorizontalOrdered.js b/docs/src/examples/elements/List/Variations/ListExampleHorizontalOrdered.js
index 8e75906d93..9244cdb390 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleHorizontalOrdered.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleHorizontalOrdered.js
@@ -1,29 +1,35 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleHorizontalOrdered = () => (
   <List horizontal ordered>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/tom.jpg' />
-      <List.Content>
-        <List.Header>Tom</List.Header>
+      <ListContent>
+        <ListHeader>Tom</ListHeader>
         Top Contributor
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/christian.jpg' />
-      <List.Content>
-        <List.Header>Christian Rocha</List.Header>
+      <ListContent>
+        <ListHeader>Christian Rocha</ListHeader>
         Admin
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/matt.jpg' />
-      <List.Content>
-        <List.Header>Matt</List.Header>
+      <ListContent>
+        <ListHeader>Matt</ListHeader>
         Top Rated User
-      </List.Content>
-    </List.Item>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleInverted.js b/docs/src/examples/elements/List/Variations/ListExampleInverted.js
index 45719b9286..054cfe5b1b 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleInverted.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleInverted.js
@@ -1,26 +1,32 @@
 import React from 'react'
-import { List, Segment } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  List,
+  Segment,
+} from 'semantic-ui-react'
 
 const ListExampleInverted = () => (
   <Segment inverted>
     <List divided inverted relaxed>
-      <List.Item>
-        <List.Content>
-          <List.Header>Snickerdoodle</List.Header>
+      <ListItem>
+        <ListContent>
+          <ListHeader>Snickerdoodle</ListHeader>
           An excellent companion
-        </List.Content>
-      </List.Item>
-      <List.Item>
-        <List.Content>
-          <List.Header>Poodle</List.Header>A poodle, its pretty basic
-        </List.Content>
-      </List.Item>
-      <List.Item>
-        <List.Content>
-          <List.Header>Paulo</List.Header>
+        </ListContent>
+      </ListItem>
+      <ListItem>
+        <ListContent>
+          <ListHeader>Poodle</ListHeader>A poodle, its pretty basic
+        </ListContent>
+      </ListItem>
+      <ListItem>
+        <ListContent>
+          <ListHeader>Paulo</ListHeader>
           He's also a dog
-        </List.Content>
-      </List.Item>
+        </ListContent>
+      </ListItem>
     </List>
   </Segment>
 )
diff --git a/docs/src/examples/elements/List/Variations/ListExampleRelaxed.js b/docs/src/examples/elements/List/Variations/ListExampleRelaxed.js
index 261f2b33ba..1d87bebee6 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleRelaxed.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleRelaxed.js
@@ -1,47 +1,54 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListDescription,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleRelaxed = () => (
   <List relaxed>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header as='a'>Daniel Louise</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Daniel Louise</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>Arrested Development</b>
           </a>{' '}
           just now.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/stevie.jpg' />
-      <List.Content>
-        <List.Header as='a'>Stevie Feliciano</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Stevie Feliciano</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>Bob's Burgers</b>
           </a>{' '}
           10 hours ago.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/elliot.jpg' />
-      <List.Content>
-        <List.Header as='a'>Elliot Fu</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Elliot Fu</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>The Godfather Part 2</b>
           </a>{' '}
           yesterday.
-        </List.Description>
-      </List.Content>
-    </List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleRelaxedHorizontal.js b/docs/src/examples/elements/List/Variations/ListExampleRelaxedHorizontal.js
index 001ecc7509..450306c25a 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleRelaxedHorizontal.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleRelaxedHorizontal.js
@@ -1,26 +1,32 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleRelaxedHorizontal = () => (
   <List horizontal relaxed>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header as='a'>Daniel Louise</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader as='a'>Daniel Louise</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/stevie.jpg' />
-      <List.Content>
-        <List.Header as='a'>Stevie Feliciano</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader as='a'>Stevie Feliciano</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/elliot.jpg' />
-      <List.Content>
-        <List.Header as='a'>Elliot Fu</List.Header>
-      </List.Content>
-    </List.Item>
+      <ListContent>
+        <ListHeader as='a'>Elliot Fu</ListHeader>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleSelection.js b/docs/src/examples/elements/List/Variations/ListExampleSelection.js
index 106f71943e..5b74ccc2d3 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleSelection.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleSelection.js
@@ -1,26 +1,32 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleSelection = () => (
   <List selection verticalAlign='middle'>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/helen.jpg' />
-      <List.Content>
-        <List.Header>Helen</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader>Helen</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/christian.jpg' />
-      <List.Content>
-        <List.Header>Christian</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader>Christian</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header>Daniel</List.Header>
-      </List.Content>
-    </List.Item>
+      <ListContent>
+        <ListHeader>Daniel</ListHeader>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleSizes.js b/docs/src/examples/elements/List/Variations/ListExampleSizes.js
index a09b60a866..6cb6bb1cf9 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleSizes.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleSizes.js
@@ -1,5 +1,11 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleSizes = () => {
   const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
@@ -9,24 +15,24 @@ const ListExampleSizes = () => {
       {sizes.map((size) => (
         <div key={size}>
           <List divided horizontal size={size}>
-            <List.Item>
+            <ListItem>
               <Image avatar src='/images/avatar/small/helen.jpg' />
-              <List.Content>
-                <List.Header>Helen</List.Header>
-              </List.Content>
-            </List.Item>
-            <List.Item>
+              <ListContent>
+                <ListHeader>Helen</ListHeader>
+              </ListContent>
+            </ListItem>
+            <ListItem>
               <Image avatar src='/images/avatar/small/christian.jpg' />
-              <List.Content>
-                <List.Header>Christian</List.Header>
-              </List.Content>
-            </List.Item>
-            <List.Item>
+              <ListContent>
+                <ListHeader>Christian</ListHeader>
+              </ListContent>
+            </ListItem>
+            <ListItem>
               <Image avatar src='/images/avatar/small/daniel.jpg' />
-              <List.Content>
-                <List.Header>Daniel</List.Header>
-              </List.Content>
-            </List.Item>
+              <ListContent>
+                <ListHeader>Daniel</ListHeader>
+              </ListContent>
+            </ListItem>
           </List>
 
           <br />
diff --git a/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxed.js b/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxed.js
index 55354c0feb..9362b375fe 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxed.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxed.js
@@ -1,47 +1,54 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListDescription,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleVeryRelaxed = () => (
   <List relaxed='very'>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header as='a'>Daniel Louise</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Daniel Louise</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>Arrested Development</b>
           </a>{' '}
           just now.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/stevie.jpg' />
-      <List.Content>
-        <List.Header as='a'>Stevie Feliciano</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Stevie Feliciano</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>Bob's Burgers</b>
           </a>{' '}
           10 hours ago.
-        </List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/elliot.jpg' />
-      <List.Content>
-        <List.Header as='a'>Elliot Fu</List.Header>
-        <List.Description>
+      <ListContent>
+        <ListHeader as='a'>Elliot Fu</ListHeader>
+        <ListDescription>
           Last seen watching{' '}
           <a>
             <b>The Godfather Part 2</b>
           </a>{' '}
           yesterday.
-        </List.Description>
-      </List.Content>
-    </List.Item>
+        </ListDescription>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js b/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js
index c3ed748106..95f56f8f13 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js
@@ -1,26 +1,32 @@
 import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+  ListItem,
+  ListHeader,
+  ListContent,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const ListExampleVeryRelaxedHorizontal = () => (
   <List horizontal relaxed='very'>
-    <List.Item>
+    <ListItem>
       <Image avatar src='/images/avatar/small/daniel.jpg' />
-      <List.Content>
-        <List.Header as='a'>Daniel Louise</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader as='a'>Daniel Louise</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/stevie.jpg' />
-      <List.Content>
-        <List.Header as='a'>Stevie Feliciano</List.Header>
-      </List.Content>
-    </List.Item>
-    <List.Item>
+      <ListContent>
+        <ListHeader as='a'>Stevie Feliciano</ListHeader>
+      </ListContent>
+    </ListItem>
+    <ListItem>
       <Image avatar src='/images/avatar/small/elliot.jpg' />
-      <List.Content>
-        <List.Header as='a'>Elliot Fu</List.Header>
-      </List.Content>
-    </List.Item>
+      <ListContent>
+        <ListHeader as='a'>Elliot Fu</ListHeader>
+      </ListContent>
+    </ListItem>
   </List>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeader.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeader.js
index 63a9990646..3cc01f26b9 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeader.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeader.js
@@ -1,12 +1,16 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+  PlaceholderLine,
+  PlaceholderHeader,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleHeader = () => (
   <Placeholder>
-    <Placeholder.Header>
-      <Placeholder.Line />
-      <Placeholder.Line />
-    </Placeholder.Header>
+    <PlaceholderHeader>
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderHeader>
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeaderImage.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeaderImage.js
index 862f98a535..6399f5dd4c 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeaderImage.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeaderImage.js
@@ -1,12 +1,16 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+  PlaceholderLine,
+  PlaceholderHeader,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleHeaderImage = () => (
   <Placeholder>
-    <Placeholder.Header image>
-      <Placeholder.Line />
-      <Placeholder.Line />
-    </Placeholder.Header>
+    <PlaceholderHeader image>
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderHeader>
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImage.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImage.js
index 3c0f16f6b8..e8f931e91d 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImage.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImage.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import { PlaceholderImage, Placeholder } from 'semantic-ui-react'
 
 const PlaceholderExampleImage = () => (
   <Placeholder style={{ height: 150, width: 150 }}>
-    <Placeholder.Image />
+    <PlaceholderImage />
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageRectangular.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageRectangular.js
index 567744cb87..05a666bd37 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageRectangular.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageRectangular.js
@@ -1,30 +1,36 @@
 import React from 'react'
-import { Card, Placeholder } from 'semantic-ui-react'
+import {
+  CardGroup,
+  CardContent,
+  PlaceholderImage,
+  Card,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleImageRectangular = () => (
-  <Card.Group itemsPerRow={3}>
+  <CardGroup itemsPerRow={3}>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Placeholder>
-          <Placeholder.Image rectangular />
+          <PlaceholderImage rectangular />
         </Placeholder>
-      </Card.Content>
+      </CardContent>
     </Card>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Placeholder>
-          <Placeholder.Image rectangular />
+          <PlaceholderImage rectangular />
         </Placeholder>
-      </Card.Content>
+      </CardContent>
     </Card>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Placeholder>
-          <Placeholder.Image rectangular />
+          <PlaceholderImage rectangular />
         </Placeholder>
-      </Card.Content>
+      </CardContent>
     </Card>
-  </Card.Group>
+  </CardGroup>
 )
 
 export default PlaceholderExampleImageRectangular
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageSquare.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageSquare.js
index a499cd450e..bde277b38c 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageSquare.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageSquare.js
@@ -1,30 +1,36 @@
 import React from 'react'
-import { Card, Placeholder } from 'semantic-ui-react'
+import {
+  CardGroup,
+  CardContent,
+  PlaceholderImage,
+  Card,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleImageSquare = () => (
-  <Card.Group itemsPerRow={3}>
+  <CardGroup itemsPerRow={3}>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Placeholder>
-          <Placeholder.Image square />
+          <PlaceholderImage square />
         </Placeholder>
-      </Card.Content>
+      </CardContent>
     </Card>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Placeholder>
-          <Placeholder.Image square />
+          <PlaceholderImage square />
         </Placeholder>
-      </Card.Content>
+      </CardContent>
     </Card>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Placeholder>
-          <Placeholder.Image square />
+          <PlaceholderImage square />
         </Placeholder>
-      </Card.Content>
+      </CardContent>
     </Card>
-  </Card.Group>
+  </CardGroup>
 )
 
 export default PlaceholderExampleImageSquare
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleLine.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleLine.js
index 5496a0d009..bbae8960ca 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleLine.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleLine.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import { PlaceholderLine, Placeholder } from 'semantic-ui-react'
 
 const PlaceholderExampleLine = () => (
   <Placeholder>
-    <Placeholder.Line />
-    <Placeholder.Line />
-    <Placeholder.Line />
-    <Placeholder.Line />
-    <Placeholder.Line />
+    <PlaceholderLine />
+    <PlaceholderLine />
+    <PlaceholderLine />
+    <PlaceholderLine />
+    <PlaceholderLine />
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleParagraph.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleParagraph.js
index 63a5c5dd0e..2a5890ad7b 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleParagraph.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleParagraph.js
@@ -1,20 +1,24 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleParagraph = () => (
   <Placeholder>
-    <Placeholder.Paragraph>
-      <Placeholder.Line />
-      <Placeholder.Line />
-      <Placeholder.Line />
-      <Placeholder.Line />
-      <Placeholder.Line />
-    </Placeholder.Paragraph>
-    <Placeholder.Paragraph>
-      <Placeholder.Line />
-      <Placeholder.Line />
-      <Placeholder.Line />
-    </Placeholder.Paragraph>
+    <PlaceholderParagraph>
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderParagraph>
+    <PlaceholderParagraph>
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderParagraph>
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js
index b29ae3f639..b4d64d1bc1 100644
--- a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js
+++ b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js
@@ -1,6 +1,21 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Button, Card, Divider, Image, Placeholder } from 'semantic-ui-react'
+import {
+  CardMeta,
+  CardHeader,
+  CardGroup,
+  CardDescription,
+  CardContent,
+  PlaceholderParagraph,
+  PlaceholderLine,
+  PlaceholderImage,
+  PlaceholderHeader,
+  Button,
+  Card,
+  Divider,
+  Image,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const cards = [
   {
@@ -44,46 +59,46 @@ export default class PlaceholderExampleCard extends Component {
         </Button>
         <Divider />
 
-        <Card.Group doubling itemsPerRow={3} stackable>
+        <CardGroup doubling itemsPerRow={3} stackable>
           {_.map(cards, (card) => (
             <Card key={card.header}>
               {loading ? (
                 <Placeholder>
-                  <Placeholder.Image square />
+                  <PlaceholderImage square />
                 </Placeholder>
               ) : (
                 <Image src={card.avatar} />
               )}
 
-              <Card.Content>
+              <CardContent>
                 {loading ? (
                   <Placeholder>
-                    <Placeholder.Header>
-                      <Placeholder.Line length='very short' />
-                      <Placeholder.Line length='medium' />
-                    </Placeholder.Header>
-                    <Placeholder.Paragraph>
-                      <Placeholder.Line length='short' />
-                    </Placeholder.Paragraph>
+                    <PlaceholderHeader>
+                      <PlaceholderLine length='very short' />
+                      <PlaceholderLine length='medium' />
+                    </PlaceholderHeader>
+                    <PlaceholderParagraph>
+                      <PlaceholderLine length='short' />
+                    </PlaceholderParagraph>
                   </Placeholder>
                 ) : (
                   <>
-                    <Card.Header>{card.header}</Card.Header>
-                    <Card.Meta>{card.date}</Card.Meta>
-                    <Card.Description>{card.description}</Card.Description>
+                    <CardHeader>{card.header}</CardHeader>
+                    <CardMeta>{card.date}</CardMeta>
+                    <CardDescription>{card.description}</CardDescription>
                   </>
                 )}
-              </Card.Content>
+              </CardContent>
 
-              <Card.Content extra>
+              <CardContent extra>
                 <Button disabled={loading} primary>
                   Add
                 </Button>
                 <Button disabled={loading}>Delete</Button>
-              </Card.Content>
+              </CardContent>
             </Card>
           ))}
-        </Card.Group>
+        </CardGroup>
       </>
     )
   }
diff --git a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleGrid.js b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleGrid.js
index b2df5fb14b..76b4788692 100644
--- a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleGrid.js
+++ b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleGrid.js
@@ -1,52 +1,60 @@
 import React from 'react'
-import { Grid, Placeholder, Segment } from 'semantic-ui-react'
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  PlaceholderHeader,
+  GridColumn,
+  Grid,
+  Placeholder,
+  Segment,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleGrid = () => (
   <Grid columns={3} stackable>
-    <Grid.Column>
+    <GridColumn>
       <Segment raised>
         <Placeholder>
-          <Placeholder.Header image>
-            <Placeholder.Line />
-            <Placeholder.Line />
-          </Placeholder.Header>
-          <Placeholder.Paragraph>
-            <Placeholder.Line length='medium' />
-            <Placeholder.Line length='short' />
-          </Placeholder.Paragraph>
+          <PlaceholderHeader image>
+            <PlaceholderLine />
+            <PlaceholderLine />
+          </PlaceholderHeader>
+          <PlaceholderParagraph>
+            <PlaceholderLine length='medium' />
+            <PlaceholderLine length='short' />
+          </PlaceholderParagraph>
         </Placeholder>
       </Segment>
-    </Grid.Column>
+    </GridColumn>
 
-    <Grid.Column>
+    <GridColumn>
       <Segment raised>
         <Placeholder>
-          <Placeholder.Header image>
-            <Placeholder.Line />
-            <Placeholder.Line />
-          </Placeholder.Header>
-          <Placeholder.Paragraph>
-            <Placeholder.Line length='medium' />
-            <Placeholder.Line length='short' />
-          </Placeholder.Paragraph>
+          <PlaceholderHeader image>
+            <PlaceholderLine />
+            <PlaceholderLine />
+          </PlaceholderHeader>
+          <PlaceholderParagraph>
+            <PlaceholderLine length='medium' />
+            <PlaceholderLine length='short' />
+          </PlaceholderParagraph>
         </Placeholder>
       </Segment>
-    </Grid.Column>
+    </GridColumn>
 
-    <Grid.Column>
+    <GridColumn>
       <Segment raised>
         <Placeholder>
-          <Placeholder.Header image>
-            <Placeholder.Line />
-            <Placeholder.Line />
-          </Placeholder.Header>
-          <Placeholder.Paragraph>
-            <Placeholder.Line length='medium' />
-            <Placeholder.Line length='short' />
-          </Placeholder.Paragraph>
+          <PlaceholderHeader image>
+            <PlaceholderLine />
+            <PlaceholderLine />
+          </PlaceholderHeader>
+          <PlaceholderParagraph>
+            <PlaceholderLine length='medium' />
+            <PlaceholderLine length='short' />
+          </PlaceholderParagraph>
         </Placeholder>
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Types/PlaceholderExamplePlaceholder.js b/docs/src/examples/elements/Placeholder/Types/PlaceholderExamplePlaceholder.js
index d495a1d3f1..bcf715bfc9 100644
--- a/docs/src/examples/elements/Placeholder/Types/PlaceholderExamplePlaceholder.js
+++ b/docs/src/examples/elements/Placeholder/Types/PlaceholderExamplePlaceholder.js
@@ -1,18 +1,23 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  PlaceholderHeader,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const PlaceholderExamplePlaceholder = () => (
   <Placeholder>
-    <Placeholder.Header image>
-      <Placeholder.Line />
-      <Placeholder.Line />
-    </Placeholder.Header>
-    <Placeholder.Paragraph>
-      <Placeholder.Line />
-      <Placeholder.Line />
-      <Placeholder.Line />
-      <Placeholder.Line />
-    </Placeholder.Paragraph>
+    <PlaceholderHeader image>
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderHeader>
+    <PlaceholderParagraph>
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderParagraph>
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleFluid.js b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleFluid.js
index 4620ba960b..4c8bd3806d 100644
--- a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleFluid.js
+++ b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleFluid.js
@@ -1,17 +1,22 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  PlaceholderHeader,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleFluid = () => (
   <Placeholder fluid>
-    <Placeholder.Header image>
-      <Placeholder.Line />
-      <Placeholder.Line />
-    </Placeholder.Header>
-    <Placeholder.Paragraph>
-      <Placeholder.Line />
-      <Placeholder.Line />
-      <Placeholder.Line />
-    </Placeholder.Paragraph>
+    <PlaceholderHeader image>
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderHeader>
+    <PlaceholderParagraph>
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderParagraph>
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleInverted.js b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleInverted.js
index 5b7618e72c..b29b4b4749 100644
--- a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleInverted.js
+++ b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleInverted.js
@@ -1,18 +1,24 @@
 import React from 'react'
-import { Placeholder, Segment } from 'semantic-ui-react'
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  PlaceholderHeader,
+  Placeholder,
+  Segment,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleInverted = () => (
   <Segment inverted>
     <Placeholder inverted>
-      <Placeholder.Header image>
-        <Placeholder.Line />
-        <Placeholder.Line />
-      </Placeholder.Header>
-      <Placeholder.Paragraph>
-        <Placeholder.Line />
-        <Placeholder.Line />
-        <Placeholder.Line />
-      </Placeholder.Paragraph>
+      <PlaceholderHeader image>
+        <PlaceholderLine />
+        <PlaceholderLine />
+      </PlaceholderHeader>
+      <PlaceholderParagraph>
+        <PlaceholderLine />
+        <PlaceholderLine />
+        <PlaceholderLine />
+      </PlaceholderParagraph>
     </Placeholder>
   </Segment>
 )
diff --git a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLength.js b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLength.js
index 658560884e..8be8dffbdd 100644
--- a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLength.js
+++ b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLength.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import { PlaceholderLine, Placeholder } from 'semantic-ui-react'
 
 const PlaceholderExampleLineLength = () => (
   <Placeholder>
-    <Placeholder.Line length='full' />
-    <Placeholder.Line length='very long' />
-    <Placeholder.Line length='long' />
-    <Placeholder.Line length='medium' />
-    <Placeholder.Line length='short' />
-    <Placeholder.Line length='very short' />
+    <PlaceholderLine length='full' />
+    <PlaceholderLine length='very long' />
+    <PlaceholderLine length='long' />
+    <PlaceholderLine length='medium' />
+    <PlaceholderLine length='short' />
+    <PlaceholderLine length='very short' />
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader.js b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader.js
index 39d798fc1a..2a164a8d80 100644
--- a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader.js
+++ b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader.js
@@ -1,16 +1,21 @@
 import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  PlaceholderHeader,
+  Placeholder,
+} from 'semantic-ui-react'
 
 const PlaceholderExampleLineLengthWithHeader = () => (
   <Placeholder>
-    <Placeholder.Header image>
-      <Placeholder.Line length='medium' />
-      <Placeholder.Line length='full' />
-    </Placeholder.Header>
-    <Placeholder.Paragraph>
-      <Placeholder.Line length='full' />
-      <Placeholder.Line length='medium' />
-    </Placeholder.Paragraph>
+    <PlaceholderHeader image>
+      <PlaceholderLine length='medium' />
+      <PlaceholderLine length='full' />
+    </PlaceholderHeader>
+    <PlaceholderParagraph>
+      <PlaceholderLine length='full' />
+      <PlaceholderLine length='medium' />
+    </PlaceholderParagraph>
   </Placeholder>
 )
 
diff --git a/docs/src/examples/elements/Rail/Types/RailExampleDividing.js b/docs/src/examples/elements/Rail/Types/RailExampleDividing.js
index 5bf8d44f29..eb6e636f25 100644
--- a/docs/src/examples/elements/Rail/Types/RailExampleDividing.js
+++ b/docs/src/examples/elements/Rail/Types/RailExampleDividing.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const RailExampleDividing = () => (
   <Grid centered columns={3}>
-    <Grid.Column>
+    <GridColumn>
       <Segment>
         <Image src='/images/wireframe/paragraph.png' />
 
@@ -15,7 +15,7 @@ const RailExampleDividing = () => (
           <Segment>Right Rail Content</Segment>
         </Rail>
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Rail/Types/RailExampleRail.js b/docs/src/examples/elements/Rail/Types/RailExampleRail.js
index f9754c51d0..a25514709c 100644
--- a/docs/src/examples/elements/Rail/Types/RailExampleRail.js
+++ b/docs/src/examples/elements/Rail/Types/RailExampleRail.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const RailExampleRail = () => (
   <Grid centered columns={3}>
-    <Grid.Column>
+    <GridColumn>
       <Segment>
         <Image src='/images/wireframe/paragraph.png' />
 
@@ -15,7 +15,7 @@ const RailExampleRail = () => (
           <Segment>Right Rail Content</Segment>
         </Rail>
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Rail/Variations/RailExampleAttached.js b/docs/src/examples/elements/Rail/Variations/RailExampleAttached.js
index 2388354303..655d09e96e 100644
--- a/docs/src/examples/elements/Rail/Variations/RailExampleAttached.js
+++ b/docs/src/examples/elements/Rail/Variations/RailExampleAttached.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const RailExampleAttached = () => (
   <Grid centered columns={3}>
-    <Grid.Column>
+    <GridColumn>
       <Segment textAlign='center'>
         <Image src='/images/wireframe/paragraph.png' />
 
@@ -15,7 +15,7 @@ const RailExampleAttached = () => (
           <Segment>Right Rail Content</Segment>
         </Rail>
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Rail/Variations/RailExampleClose.js b/docs/src/examples/elements/Rail/Variations/RailExampleClose.js
index 1a4bd2d700..caa641c1d8 100644
--- a/docs/src/examples/elements/Rail/Variations/RailExampleClose.js
+++ b/docs/src/examples/elements/Rail/Variations/RailExampleClose.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const RailExampleClose = () => (
   <Grid centered columns={3}>
-    <Grid.Column>
+    <GridColumn>
       <Segment>
         <Image src='/images/wireframe/paragraph.png' />
 
@@ -15,7 +15,7 @@ const RailExampleClose = () => (
           <Segment>Right Rail Content</Segment>
         </Rail>
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Rail/Variations/RailExampleCloseVery.js b/docs/src/examples/elements/Rail/Variations/RailExampleCloseVery.js
index 45efd6e2f2..5d2ad9dc1e 100644
--- a/docs/src/examples/elements/Rail/Variations/RailExampleCloseVery.js
+++ b/docs/src/examples/elements/Rail/Variations/RailExampleCloseVery.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const RailExampleCloseVery = () => (
   <Grid centered columns={3}>
-    <Grid.Column>
+    <GridColumn>
       <Segment>
         <Image src='/images/wireframe/paragraph.png' />
 
@@ -15,7 +15,7 @@ const RailExampleCloseVery = () => (
           <Segment>Right Rail Content</Segment>
         </Rail>
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Rail/Variations/RailExampleSize.js b/docs/src/examples/elements/Rail/Variations/RailExampleSize.js
index 0e745d040b..49d64ec49a 100644
--- a/docs/src/examples/elements/Rail/Variations/RailExampleSize.js
+++ b/docs/src/examples/elements/Rail/Variations/RailExampleSize.js
@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const Wrapper = ({ children }) => (
   <Grid columns={3} textAlign='center'>
-    <Grid.Column>
+    <GridColumn>
       <Segment>
         <Image src='/images/wireframe/paragraph.png' />
         {children}
       </Segment>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Content/RevealExampleHidden.js b/docs/src/examples/elements/Reveal/Content/RevealExampleHidden.js
index 27e6caf589..c86113d8b9 100644
--- a/docs/src/examples/elements/Reveal/Content/RevealExampleHidden.js
+++ b/docs/src/examples/elements/Reveal/Content/RevealExampleHidden.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleHidden = () => (
   <Reveal animated='small fade'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/ade.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Content/RevealExampleVisible.js b/docs/src/examples/elements/Reveal/Content/RevealExampleVisible.js
index 61234889e5..43d9eabf51 100644
--- a/docs/src/examples/elements/Reveal/Content/RevealExampleVisible.js
+++ b/docs/src/examples/elements/Reveal/Content/RevealExampleVisible.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleVisible = () => (
   <Reveal animated='small fade'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/avatar/large/ade.jpg' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/States/RevealExampleActive.js b/docs/src/examples/elements/Reveal/States/RevealExampleActive.js
index 90f3f8aae2..237e418878 100644
--- a/docs/src/examples/elements/Reveal/States/RevealExampleActive.js
+++ b/docs/src/examples/elements/Reveal/States/RevealExampleActive.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleActive = () => (
   <Reveal active animated='move'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/nan.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/States/RevealExampleDisabled.js b/docs/src/examples/elements/Reveal/States/RevealExampleDisabled.js
index 23c891101a..381ac1ca1f 100644
--- a/docs/src/examples/elements/Reveal/States/RevealExampleDisabled.js
+++ b/docs/src/examples/elements/Reveal/States/RevealExampleDisabled.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleDisabled = () => (
   <Reveal animated='move' disabled>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/chris.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleFade.js b/docs/src/examples/elements/Reveal/Types/RevealExampleFade.js
index dfce1de893..90f0a56b22 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleFade.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleFade.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleFade = () => (
   <Reveal animated='fade'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/ade.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleFadeSmall.js b/docs/src/examples/elements/Reveal/Types/RevealExampleFadeSmall.js
index 9367779f26..0d062c78aa 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleFadeSmall.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleFadeSmall.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleFadeSmall = () => (
   <Reveal animated='small fade'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/ade.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleMove.js b/docs/src/examples/elements/Reveal/Types/RevealExampleMove.js
index 1342971b9d..ad004eb621 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleMove.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleMove.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleMove = () => (
   <Reveal animated='move'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/chris.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveDown.js b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveDown.js
index eba65873fa..4748bdfd62 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveDown.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveDown.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleMoveDown = () => (
   <Reveal animated='move down'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/nan.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveRight.js b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveRight.js
index 705145a9b6..0ad1c3e716 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveRight.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveRight.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleMoveRight = () => (
   <Reveal animated='move right'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/jenny.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveUp.js b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveUp.js
index 575c938e3e..0c56ebf421 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveUp.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveUp.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleMoveUp = () => (
   <Reveal animated='move up'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/justen.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleRotate.js b/docs/src/examples/elements/Reveal/Types/RevealExampleRotate.js
index cbacacd9d7..dd7c257656 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleRotate.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleRotate.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleRotate = () => (
   <Reveal animated='rotate'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image circular size='small' src='/images/wireframe/square-image.png' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image circular size='small' src='/images/avatar/large/stevie.jpg' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleRotateLeft.js b/docs/src/examples/elements/Reveal/Types/RevealExampleRotateLeft.js
index 4eb78ab15d..c8baccfb99 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleRotateLeft.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleRotateLeft.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleRotateLeft = () => (
   <Reveal animated='rotate left'>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image circular size='small' src='/images/wireframe/square-image.png' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image circular size='small' src='/images/avatar/large/veronika.jpg' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Reveal/Variations/RevealExampleInstant.js b/docs/src/examples/elements/Reveal/Variations/RevealExampleInstant.js
index 42d2e5516f..aacb855e64 100644
--- a/docs/src/examples/elements/Reveal/Variations/RevealExampleInstant.js
+++ b/docs/src/examples/elements/Reveal/Variations/RevealExampleInstant.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
 
 const RevealExampleInstant = () => (
   <Reveal animated='move' instant>
-    <Reveal.Content visible>
+    <RevealContent visible>
       <Image src='/images/wireframe/square-image.png' size='small' />
-    </Reveal.Content>
-    <Reveal.Content hidden>
+    </RevealContent>
+    <RevealContent hidden>
       <Image src='/images/avatar/large/chris.jpg' size='small' />
-    </Reveal.Content>
+    </RevealContent>
   </Reveal>
 )
 
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js
index badbeed0be..3b287f054b 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
 
 const SegmentExampleHorizontalSegments = () => (
-  <Segment.Group horizontal>
+  <SegmentGroup horizontal>
     <Segment>Left</Segment>
     <Segment>Middle</Segment>
     <Segment>Right</Segment>
-  </Segment.Group>
+  </SegmentGroup>
 )
 
 export default SegmentExampleHorizontalSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleNestedSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleNestedSegments.js
index 12fd9ceacb..beb3b5cd2c 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleNestedSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleNestedSegments.js
@@ -1,21 +1,21 @@
 import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
 
 const SegmentExampleNestedSegments = () => (
-  <Segment.Group>
+  <SegmentGroup>
     <Segment>Top</Segment>
-    <Segment.Group>
+    <SegmentGroup>
       <Segment>Nested Top</Segment>
       <Segment>Nested Middle</Segment>
       <Segment>Nested Bottom</Segment>
-    </Segment.Group>
-    <Segment.Group horizontal>
+    </SegmentGroup>
+    <SegmentGroup horizontal>
       <Segment>Top</Segment>
       <Segment>Middle</Segment>
       <Segment>Bottom</Segment>
-    </Segment.Group>
+    </SegmentGroup>
     <Segment>Bottom</Segment>
-  </Segment.Group>
+  </SegmentGroup>
 )
 
 export default SegmentExampleNestedSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExamplePiledSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExamplePiledSegments.js
index 3652d4df6f..f69a89a7f8 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExamplePiledSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExamplePiledSegments.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
 
 const SegmentExamplePiledSegments = () => (
-  <Segment.Group piled>
+  <SegmentGroup piled>
     <Segment>Top</Segment>
     <Segment>Middle</Segment>
     <Segment>Bottom</Segment>
-  </Segment.Group>
+  </SegmentGroup>
 )
 
 export default SegmentExamplePiledSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js
index 7330e2fe72..b344db9788 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
 
 const SegmentExampleRaisedSegments = () => (
-  <Segment.Group raised>
+  <SegmentGroup raised>
     <Segment>Left</Segment>
     <Segment>Middle</Segment>
     <Segment>Right</Segment>
-  </Segment.Group>
+  </SegmentGroup>
 )
 
 export default SegmentExampleRaisedSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleSegments.js
index 9ab529dc5e..f2466c7195 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleSegments.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
 
 const SegmentExampleSegments = () => (
-  <Segment.Group>
+  <SegmentGroup>
     <Segment>Top</Segment>
     <Segment>Middle</Segment>
     <Segment>Middle</Segment>
     <Segment>Middle</Segment>
     <Segment>Bottom</Segment>
-  </Segment.Group>
+  </SegmentGroup>
 )
 
 export default SegmentExampleSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleStackedSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleStackedSegments.js
index 918b1270b8..85847e8f91 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleStackedSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleStackedSegments.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
 
 const SegmentExampleStackedSegments = () => (
-  <Segment.Group stacked>
+  <SegmentGroup stacked>
     <Segment>Top</Segment>
     <Segment>Middle</Segment>
     <Segment>Bottom</Segment>
-  </Segment.Group>
+  </SegmentGroup>
 )
 
 export default SegmentExampleStackedSegments
diff --git a/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderGrid.js b/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderGrid.js
index 03a897d3cb..01d6b80093 100644
--- a/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderGrid.js
+++ b/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderGrid.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import {
+  GridRow,
+  GridColumn,
   Button,
   Divider,
   Grid,
@@ -14,24 +16,24 @@ const SegmentExamplePlaceholderGrid = () => (
     <Grid columns={2} stackable textAlign='center'>
       <Divider vertical>Or</Divider>
 
-      <Grid.Row verticalAlign='middle'>
-        <Grid.Column>
+      <GridRow verticalAlign='middle'>
+        <GridColumn>
           <Header icon>
             <Icon name='search' />
             Find Country
           </Header>
 
           <Search placeholder='Search countries...' />
-        </Grid.Column>
+        </GridColumn>
 
-        <Grid.Column>
+        <GridColumn>
           <Header icon>
             <Icon name='world' />
             Add New Country
           </Header>
           <Button primary>Create</Button>
-        </Grid.Column>
-      </Grid.Row>
+        </GridColumn>
+      </GridRow>
     </Grid>
   </Segment>
 )
diff --git a/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderInline.js b/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderInline.js
index 54c95627a6..d02f344e46 100644
--- a/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderInline.js
+++ b/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderInline.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Header, Icon, Segment } from 'semantic-ui-react'
+import { SegmentInline, Button, Header, Icon, Segment } from 'semantic-ui-react'
 
 const SegmentExamplePlaceholderInline = () => (
   <Segment placeholder>
@@ -7,10 +7,10 @@ const SegmentExamplePlaceholderInline = () => (
       <Icon name='search' />
       We don't have any documents matching your query.
     </Header>
-    <Segment.Inline>
+    <SegmentInline>
       <Button primary>Clear Query</Button>
       <Button>Add Document</Button>
-    </Segment.Inline>
+    </SegmentInline>
   </Segment>
 )
 
diff --git a/docs/src/examples/elements/Segment/Variations/SegmentExampleCircular.js b/docs/src/examples/elements/Segment/Variations/SegmentExampleCircular.js
index a42e85e577..c5f3e2ac74 100644
--- a/docs/src/examples/elements/Segment/Variations/SegmentExampleCircular.js
+++ b/docs/src/examples/elements/Segment/Variations/SegmentExampleCircular.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Header, Segment } from 'semantic-ui-react'
+import { HeaderSubheader, Header, Segment } from 'semantic-ui-react'
 
 const square = { width: 175, height: 175 }
 
@@ -8,13 +8,13 @@ const SegmentExampleCircular = () => (
     <Segment circular style={square}>
       <Header as='h2'>
         Sale!
-        <Header.Subheader>$10.99</Header.Subheader>
+        <HeaderSubheader>$10.99</HeaderSubheader>
       </Header>
     </Segment>
     <Segment circular inverted style={square}>
       <Header as='h2' inverted>
         Buy Now
-        <Header.Subheader>$10.99</Header.Subheader>
+        <HeaderSubheader>$10.99</HeaderSubheader>
       </Header>
     </Segment>
   </div>
diff --git a/docs/src/examples/elements/Segment/Variations/SegmentExampleCompactGroup.js b/docs/src/examples/elements/Segment/Variations/SegmentExampleCompactGroup.js
index 020154e8aa..1ffa8fe6ac 100644
--- a/docs/src/examples/elements/Segment/Variations/SegmentExampleCompactGroup.js
+++ b/docs/src/examples/elements/Segment/Variations/SegmentExampleCompactGroup.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
 
 const SegmentExampleCompactGroup = () => (
-  <Segment.Group compact>
+  <SegmentGroup compact>
     <Segment>Pellentesque habitant morbi</Segment>
     <Segment>Pellentesque habitant morbi</Segment>
-  </Segment.Group>
+  </SegmentGroup>
 )
 
 export default SegmentExampleCompactGroup
diff --git a/docs/src/examples/elements/Segment/Variations/SegmentExampleGroupSizes.js b/docs/src/examples/elements/Segment/Variations/SegmentExampleGroupSizes.js
index 2282bc597e..ea8b0998c4 100644
--- a/docs/src/examples/elements/Segment/Variations/SegmentExampleGroupSizes.js
+++ b/docs/src/examples/elements/Segment/Variations/SegmentExampleGroupSizes.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
 
 const SegmentGroupSizesExample = () => {
   const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
@@ -7,10 +7,10 @@ const SegmentGroupSizesExample = () => {
   return (
     <div>
       {sizes.map((size) => (
-        <Segment.Group key={size} size={size}>
+        <SegmentGroup key={size} size={size}>
           <Segment>It's a {size} segment</Segment>
           <Segment>And it's a {size} segment, too</Segment>
-        </Segment.Group>
+        </SegmentGroup>
       ))}
     </div>
   )
diff --git a/docs/src/examples/elements/Step/Content/StepExampleDescription.js b/docs/src/examples/elements/Step/Content/StepExampleDescription.js
index 2d214385c1..042564092b 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleDescription.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleDescription.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepTitle, StepGroup, StepDescription, Step } from 'semantic-ui-react'
 
 const StepExampleDescription = () => (
-  <Step.Group>
+  <StepGroup>
     <Step>
-      <Step.Title>Shipping</Step.Title>
-      <Step.Description>Choose your shipping options</Step.Description>
+      <StepTitle>Shipping</StepTitle>
+      <StepDescription>Choose your shipping options</StepDescription>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleDescription
diff --git a/docs/src/examples/elements/Step/Content/StepExampleDescriptionShorthand.js b/docs/src/examples/elements/Step/Content/StepExampleDescriptionShorthand.js
index 3e3581d055..3e742314d2 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleDescriptionShorthand.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleDescriptionShorthand.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
 
 const StepExampleDescriptionShorthand = () => (
-  <Step.Group>
+  <StepGroup>
     <Step title='Shipping' description='Choose your shipping options' />
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleDescriptionShorthand
diff --git a/docs/src/examples/elements/Step/Content/StepExampleIcon.js b/docs/src/examples/elements/Step/Content/StepExampleIcon.js
index fed8620f22..f4164e2702 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleIcon.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleIcon.js
@@ -1,16 +1,23 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleIcon = () => (
-  <Step.Group>
+  <StepGroup>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleIcon
diff --git a/docs/src/examples/elements/Step/Content/StepExampleIconShorthand.js b/docs/src/examples/elements/Step/Content/StepExampleIconShorthand.js
index 5dba71efd2..ff0f38825e 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleIconShorthand.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleIconShorthand.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
 
 const StepExampleIconShorthand = () => (
-  <Step.Group>
+  <StepGroup>
     <Step
       icon='truck'
       title='Shipping'
       description='Choose your shipping options'
     />
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleIconShorthand
diff --git a/docs/src/examples/elements/Step/Content/StepExampleLink.js b/docs/src/examples/elements/Step/Content/StepExampleLink.js
index 222d12234d..bb92e10cfb 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleLink.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleLink.js
@@ -1,23 +1,30 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleLink = () => (
-  <Step.Group>
+  <StepGroup>
     <Step link>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
     <Step link>
       <Icon name='credit card' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleLink
diff --git a/docs/src/examples/elements/Step/Content/StepExampleLinkClickable.js b/docs/src/examples/elements/Step/Content/StepExampleLinkClickable.js
index 92fe6a9dd7..2d2f5ebc06 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleLinkClickable.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleLinkClickable.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
 
 export default class StepExampleLinkClickable extends Component {
   state = {}
@@ -10,7 +10,7 @@ export default class StepExampleLinkClickable extends Component {
     const { active } = this.state
 
     return (
-      <Step.Group>
+      <StepGroup>
         <Step
           active={active === 'Shipping'}
           icon='truck'
@@ -27,7 +27,7 @@ export default class StepExampleLinkClickable extends Component {
           title='Billing'
           description='Enter billing information'
         />
-      </Step.Group>
+      </StepGroup>
     )
   }
 }
diff --git a/docs/src/examples/elements/Step/Content/StepExampleLinkHref.js b/docs/src/examples/elements/Step/Content/StepExampleLinkHref.js
index 842d1e5fef..d37b1445f4 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleLinkHref.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleLinkHref.js
@@ -1,23 +1,30 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleLinkHref = () => (
-  <Step.Group>
+  <StepGroup>
     <Step active href='http://example.com'>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
     <Step href='http://example.com'>
       <Icon name='credit card' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleLinkHref
diff --git a/docs/src/examples/elements/Step/Groups/StepExampleGroup.js b/docs/src/examples/elements/Step/Groups/StepExampleGroup.js
index f2ec5fd935..7f67a522b2 100644
--- a/docs/src/examples/elements/Step/Groups/StepExampleGroup.js
+++ b/docs/src/examples/elements/Step/Groups/StepExampleGroup.js
@@ -1,31 +1,38 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleGroup = () => (
-  <Step.Group>
+  <StepGroup>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
 
     <Step disabled>
       <Icon name='info' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleGroup
diff --git a/docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js b/docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js
index 1144922876..fe9f314e73 100644
--- a/docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js
+++ b/docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup } from 'semantic-ui-react'
 
 const steps = [
   {
@@ -18,6 +18,6 @@ const steps = [
   { key: 'confirm', disabled: true, icon: 'info', title: 'Confirm Order' },
 ]
 
-const StepExampleGroupShorthand = () => <Step.Group items={steps} />
+const StepExampleGroupShorthand = () => <StepGroup items={steps} />
 
 export default StepExampleGroupShorthand
diff --git a/docs/src/examples/elements/Step/Groups/StepExampleOrdered.js b/docs/src/examples/elements/Step/Groups/StepExampleOrdered.js
index 42dc9e2fa5..58e1b4d67e 100644
--- a/docs/src/examples/elements/Step/Groups/StepExampleOrdered.js
+++ b/docs/src/examples/elements/Step/Groups/StepExampleOrdered.js
@@ -1,28 +1,34 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleOrdered = () => (
-  <Step.Group ordered>
+  <StepGroup ordered>
     <Step completed>
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
 
     <Step completed>
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
 
     <Step active>
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleOrdered
diff --git a/docs/src/examples/elements/Step/Groups/StepExampleVertical.js b/docs/src/examples/elements/Step/Groups/StepExampleVertical.js
index 7913886d4f..8a1052a0ac 100644
--- a/docs/src/examples/elements/Step/Groups/StepExampleVertical.js
+++ b/docs/src/examples/elements/Step/Groups/StepExampleVertical.js
@@ -1,31 +1,38 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleVertical = () => (
-  <Step.Group vertical>
+  <StepGroup vertical>
     <Step completed>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
 
     <Step completed>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='info' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleVertical
diff --git a/docs/src/examples/elements/Step/Groups/index.js b/docs/src/examples/elements/Step/Groups/index.js
index 90591c844e..9ca5cf72be 100644
--- a/docs/src/examples/elements/Step/Groups/index.js
+++ b/docs/src/examples/elements/Step/Groups/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, Message } from 'semantic-ui-react'
+import { MessageHeader, MessageContent, Icon, Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -14,11 +14,11 @@ const StepGroupsExamples = () => (
     >
       <Message positive icon>
         <Icon name='mobile' />
-        <Message.Content>
-          <Message.Header>Responsive Element</Message.Header>
+        <MessageContent>
+          <MessageHeader>Responsive Element</MessageHeader>
           Steps will automatically stack on mobile. To make steps automatically
           stack for tablet use the <code>stackable='tablet'</code> variation.
-        </Message.Content>
+        </MessageContent>
       </Message>
     </ComponentExample>
     <ShorthandExample examplePath='elements/Step/Groups/StepExampleGroupShorthand' />
diff --git a/docs/src/examples/elements/Step/States/StepExampleActive.js b/docs/src/examples/elements/Step/States/StepExampleActive.js
index bc7166d1bc..7b977a8b11 100644
--- a/docs/src/examples/elements/Step/States/StepExampleActive.js
+++ b/docs/src/examples/elements/Step/States/StepExampleActive.js
@@ -1,16 +1,23 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleActive = () => (
-  <Step.Group>
+  <StepGroup>
     <Step active>
       <Icon name='credit card' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleActive
diff --git a/docs/src/examples/elements/Step/States/StepExampleCompleted.js b/docs/src/examples/elements/Step/States/StepExampleCompleted.js
index 9f3431d63c..6e19f12ae8 100644
--- a/docs/src/examples/elements/Step/States/StepExampleCompleted.js
+++ b/docs/src/examples/elements/Step/States/StepExampleCompleted.js
@@ -1,16 +1,23 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleCompleted = () => (
-  <Step.Group>
+  <StepGroup>
     <Step completed>
       <Icon name='credit card' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleCompleted
diff --git a/docs/src/examples/elements/Step/States/StepExampleCompletedOrdered.js b/docs/src/examples/elements/Step/States/StepExampleCompletedOrdered.js
index 445afb1280..9d5031fd93 100644
--- a/docs/src/examples/elements/Step/States/StepExampleCompletedOrdered.js
+++ b/docs/src/examples/elements/Step/States/StepExampleCompletedOrdered.js
@@ -1,15 +1,21 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleCompletedOrdered = () => (
-  <Step.Group ordered>
+  <StepGroup ordered>
     <Step completed>
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleCompletedOrdered
diff --git a/docs/src/examples/elements/Step/States/StepExampleDisabled.js b/docs/src/examples/elements/Step/States/StepExampleDisabled.js
index a9e7c6cb15..a014e3fd99 100644
--- a/docs/src/examples/elements/Step/States/StepExampleDisabled.js
+++ b/docs/src/examples/elements/Step/States/StepExampleDisabled.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
 
 const StepExampleDisabled = () => (
-  <Step.Group>
+  <StepGroup>
     <Step disabled>Billing</Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleDisabled
diff --git a/docs/src/examples/elements/Step/Types/StepExampleStep.js b/docs/src/examples/elements/Step/Types/StepExampleStep.js
index 4d42659310..ce0930d0e9 100644
--- a/docs/src/examples/elements/Step/Types/StepExampleStep.js
+++ b/docs/src/examples/elements/Step/Types/StepExampleStep.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
 
 const StepExampleStep = () => (
-  <Step.Group>
+  <StepGroup>
     <Step>Shipping</Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleStep
diff --git a/docs/src/examples/elements/Step/Types/StepExampleStepShorthand.js b/docs/src/examples/elements/Step/Types/StepExampleStepShorthand.js
index 34abed1d31..dd5ce912fb 100644
--- a/docs/src/examples/elements/Step/Types/StepExampleStepShorthand.js
+++ b/docs/src/examples/elements/Step/Types/StepExampleStepShorthand.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
 
 const StepExampleStepShorthand = () => (
-  <Step.Group>
+  <StepGroup>
     <Step content='Shipping' />
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleStepShorthand
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleAttached.js b/docs/src/examples/elements/Step/Variations/StepExampleAttached.js
index a83e77757d..4fd157d800 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleAttached.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleAttached.js
@@ -1,61 +1,70 @@
 import React from 'react'
-import { Icon, Image, Segment, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Image,
+  Segment,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleAttached = () => (
   <div>
-    <Step.Group attached='top'>
+    <StepGroup attached='top'>
       <Step>
         <Icon name='truck' />
-        <Step.Content>
-          <Step.Title>Shipping</Step.Title>
-          <Step.Description>Choose your shipping options</Step.Description>
-        </Step.Content>
+        <StepContent>
+          <StepTitle>Shipping</StepTitle>
+          <StepDescription>Choose your shipping options</StepDescription>
+        </StepContent>
       </Step>
 
       <Step active>
         <Icon name='payment' />
-        <Step.Content>
-          <Step.Title>Billing</Step.Title>
-          <Step.Description>Enter billing information</Step.Description>
-        </Step.Content>
+        <StepContent>
+          <StepTitle>Billing</StepTitle>
+          <StepDescription>Enter billing information</StepDescription>
+        </StepContent>
       </Step>
 
       <Step disabled>
         <Icon name='info' />
-        <Step.Content>
-          <Step.Title>Confirm Order</Step.Title>
-        </Step.Content>
+        <StepContent>
+          <StepTitle>Confirm Order</StepTitle>
+        </StepContent>
       </Step>
-    </Step.Group>
+    </StepGroup>
 
     <Segment attached>
       <Image src='/images/wireframe/paragraph.png' />
     </Segment>
 
-    <Step.Group attached='bottom'>
+    <StepGroup attached='bottom'>
       <Step>
         <Icon name='truck' />
-        <Step.Content>
-          <Step.Title>Shipping</Step.Title>
-          <Step.Description>Choose your shipping options</Step.Description>
-        </Step.Content>
+        <StepContent>
+          <StepTitle>Shipping</StepTitle>
+          <StepDescription>Choose your shipping options</StepDescription>
+        </StepContent>
       </Step>
 
       <Step active>
         <Icon name='payment' />
-        <Step.Content>
-          <Step.Title>Billing</Step.Title>
-          <Step.Description>Enter billing information</Step.Description>
-        </Step.Content>
+        <StepContent>
+          <StepTitle>Billing</StepTitle>
+          <StepDescription>Enter billing information</StepDescription>
+        </StepContent>
       </Step>
 
       <Step disabled>
         <Icon name='info' />
-        <Step.Content>
-          <Step.Title>Confirm Order</Step.Title>
-        </Step.Content>
+        <StepContent>
+          <StepTitle>Confirm Order</StepTitle>
+        </StepContent>
       </Step>
-    </Step.Group>
+    </StepGroup>
   </div>
 )
 
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDivided.js b/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDivided.js
index 1f0f4ed1fc..422b2ecd2a 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDivided.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDivided.js
@@ -1,27 +1,33 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleEvenlyDivided = () => (
-  <Step.Group widths={3}>
+  <StepGroup widths={3}>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+      </StepContent>
     </Step>
     <Step active>
       <Icon name='credit card' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+      </StepContent>
     </Step>
     <Step disabled>
       <Icon name='info' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleEvenlyDivided
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDividedAnother.js b/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDividedAnother.js
index 1a9a1bd17b..c1467838c6 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDividedAnother.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDividedAnother.js
@@ -1,21 +1,27 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleEvenlyDividedAnother = () => (
-  <Step.Group widths={2}>
+  <StepGroup widths={2}>
     <Step active>
       <Icon name='credit card' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+      </StepContent>
     </Step>
     <Step disabled>
       <Icon name='info' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleEvenlyDividedAnother
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleFluid.js b/docs/src/examples/elements/Step/Variations/StepExampleFluid.js
index 88a50c7638..0a6a48baf7 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleFluid.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleFluid.js
@@ -1,31 +1,40 @@
 import React from 'react'
-import { Icon, Grid, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  GridColumn,
+  Icon,
+  Grid,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleFluid = () => (
   <Grid columns={2}>
-    <Grid.Column>
-      <Step.Group fluid vertical>
+    <GridColumn>
+      <StepGroup fluid vertical>
         <Step completed>
           <Icon name='truck' />
-          <Step.Content>
-            <Step.Title>Shipping</Step.Title>
-            <Step.Description>Choose your shipping options</Step.Description>
-          </Step.Content>
+          <StepContent>
+            <StepTitle>Shipping</StepTitle>
+            <StepDescription>Choose your shipping options</StepDescription>
+          </StepContent>
         </Step>
 
         <Step active>
           <Icon name='dollar' />
-          <Step.Content>
-            <Step.Title>Billing</Step.Title>
-            <Step.Description>Enter billing information</Step.Description>
-          </Step.Content>
+          <StepContent>
+            <StepTitle>Billing</StepTitle>
+            <StepDescription>Enter billing information</StepDescription>
+          </StepContent>
         </Step>
-      </Step.Group>
-    </Grid.Column>
+      </StepGroup>
+    </GridColumn>
 
-    <Grid.Column>
+    <GridColumn>
       <p>The steps take up the entire column width</p>
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeBig.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeBig.js
index 9eeabf3d17..95c15c31d7 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeBig.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeBig.js
@@ -1,22 +1,28 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleSizeBig = () => (
-  <Step.Group size='big'>
+  <StepGroup size='big'>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleSizeBig
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeHuge.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeHuge.js
index 9d6eb6504b..ae012cf298 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeHuge.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeHuge.js
@@ -1,22 +1,28 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleSizeHuge = () => (
-  <Step.Group size='huge'>
+  <StepGroup size='huge'>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleSizeHuge
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeLarge.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeLarge.js
index ec3bade508..8b76a2f560 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeLarge.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeLarge.js
@@ -1,22 +1,28 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleSizeLarge = () => (
-  <Step.Group size='large'>
+  <StepGroup size='large'>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleSizeLarge
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeMassive.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeMassive.js
index 35967c4c87..3e463eda25 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeMassive.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeMassive.js
@@ -1,22 +1,28 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleSizeMassive = () => (
-  <Step.Group size='massive'>
+  <StepGroup size='massive'>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleSizeMassive
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeMini.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeMini.js
index 27cb0df549..e25c2f9bfa 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeMini.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeMini.js
@@ -1,32 +1,39 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleSizeMini = () => (
-  <Step.Group size='mini'>
+  <StepGroup size='mini'>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
 
     <Step disabled>
       <Icon name='info' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-        <Step.Description>Verify order details</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+        <StepDescription>Verify order details</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleSizeMini
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeSmall.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeSmall.js
index 82f4ce4a25..6e4be4e847 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeSmall.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeSmall.js
@@ -1,32 +1,39 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleSizeSmall = () => (
-  <Step.Group size='small'>
+  <StepGroup size='small'>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
 
     <Step disabled>
       <Icon name='info' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-        <Step.Description>Verify order details</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+        <StepDescription>Verify order details</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleSizeSmall
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeTiny.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeTiny.js
index c51f3ff248..6ef499545f 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeTiny.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeTiny.js
@@ -1,32 +1,39 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleSizeTiny = () => (
-  <Step.Group size='tiny'>
+  <StepGroup size='tiny'>
     <Step>
       <Icon name='truck' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
 
     <Step active>
       <Icon name='payment' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
 
     <Step disabled>
       <Icon name='info' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-        <Step.Description>Verify order details</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+        <StepDescription>Verify order details</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleSizeTiny
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleStackable.js b/docs/src/examples/elements/Step/Variations/StepExampleStackable.js
index 26a6dd70bf..c76bd0288d 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleStackable.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleStackable.js
@@ -1,30 +1,37 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleStackable = () => (
-  <Step.Group stackable='tablet'>
+  <StepGroup stackable='tablet'>
     <Step>
       <Icon name='plane' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
     <Step active>
       <Icon name='dollar' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
     <Step disabled>
       <Icon name='info circle' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-        <Step.Description>Verify order details</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+        <StepDescription>Verify order details</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleStackable
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleUnstackable.js b/docs/src/examples/elements/Step/Variations/StepExampleUnstackable.js
index f17655a11f..1c7747dbc4 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleUnstackable.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleUnstackable.js
@@ -1,30 +1,37 @@
 import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+  StepTitle,
+  StepGroup,
+  StepDescription,
+  StepContent,
+  Icon,
+  Step,
+} from 'semantic-ui-react'
 
 const StepExampleUnstackable = () => (
-  <Step.Group unstackable>
+  <StepGroup unstackable>
     <Step>
       <Icon name='plane' />
-      <Step.Content>
-        <Step.Title>Shipping</Step.Title>
-        <Step.Description>Choose your shipping options</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Shipping</StepTitle>
+        <StepDescription>Choose your shipping options</StepDescription>
+      </StepContent>
     </Step>
     <Step active>
       <Icon name='dollar' />
-      <Step.Content>
-        <Step.Title>Billing</Step.Title>
-        <Step.Description>Enter billing information</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Billing</StepTitle>
+        <StepDescription>Enter billing information</StepDescription>
+      </StepContent>
     </Step>
     <Step disabled>
       <Icon name='info circle' />
-      <Step.Content>
-        <Step.Title>Confirm Order</Step.Title>
-        <Step.Description>Verify order details</Step.Description>
-      </Step.Content>
+      <StepContent>
+        <StepTitle>Confirm Order</StepTitle>
+        <StepDescription>Verify order details</StepDescription>
+      </StepContent>
     </Step>
-  </Step.Group>
+  </StepGroup>
 )
 
 export default StepExampleUnstackable
diff --git a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js
index a35d34e237..d400b23946 100644
--- a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js
+++ b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js
@@ -1,12 +1,20 @@
 import React from 'react'
-import { Accordion, Button, Form, Segment } from 'semantic-ui-react'
+import {
+  FormInput,
+  FormGroup,
+  FormField,
+  Accordion,
+  Button,
+  Form,
+  Segment,
+} from 'semantic-ui-react'
 
 const panels = [
   {
     key: 'details',
     title: 'Optional Details',
     content: {
-      as: Form.Input,
+      as: FormInput,
       label: 'Maiden Name',
       placeholder: 'Maiden Name',
     },
@@ -16,11 +24,11 @@ const panels = [
 const AccordionExampleForm = () => (
   <Segment>
     <Form>
-      <Form.Group widths={2}>
-        <Form.Input label='First Name' placeholder='First Name' />
-        <Form.Input label='Last Name' placeholder='Last Name' />
-      </Form.Group>
-      <Accordion as={Form.Field} panels={panels} />
+      <FormGroup widths={2}>
+        <FormInput label='First Name' placeholder='First Name' />
+        <FormInput label='Last Name' placeholder='Last Name' />
+      </FormGroup>
+      <Accordion as={FormField} panels={panels} />
 
       <Button secondary>Sign Up</Button>
     </Form>
diff --git a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleMenu.js b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleMenu.js
index ec5969d5e7..99dc785f14 100644
--- a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleMenu.js
+++ b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleMenu.js
@@ -1,25 +1,35 @@
 import React, { Component } from 'react'
-import { Accordion, Form, Menu } from 'semantic-ui-react'
+import {
+  AccordionTitle,
+  AccordionContent,
+  MenuItem,
+  FormRadio,
+  FormGroup,
+  FormCheckbox,
+  Accordion,
+  Form,
+  Menu,
+} from 'semantic-ui-react'
 
 const ColorForm = (
   <Form>
-    <Form.Group grouped>
-      <Form.Checkbox label='Red' name='color' value='red' />
-      <Form.Checkbox label='Orange' name='color' value='orange' />
-      <Form.Checkbox label='Green' name='color' value='green' />
-      <Form.Checkbox label='Blue' name='color' value='blue' />
-    </Form.Group>
+    <FormGroup grouped>
+      <FormCheckbox label='Red' name='color' value='red' />
+      <FormCheckbox label='Orange' name='color' value='orange' />
+      <FormCheckbox label='Green' name='color' value='green' />
+      <FormCheckbox label='Blue' name='color' value='blue' />
+    </FormGroup>
   </Form>
 )
 
 const SizeForm = (
   <Form>
-    <Form.Group grouped>
-      <Form.Radio label='Small' name='size' type='radio' value='small' />
-      <Form.Radio label='Medium' name='size' type='radio' value='medium' />
-      <Form.Radio label='Large' name='size' type='radio' value='large' />
-      <Form.Radio label='X-Large' name='size' type='radio' value='x-large' />
-    </Form.Group>
+    <FormGroup grouped>
+      <FormRadio label='Small' name='size' type='radio' value='small' />
+      <FormRadio label='Medium' name='size' type='radio' value='medium' />
+      <FormRadio label='Large' name='size' type='radio' value='large' />
+      <FormRadio label='X-Large' name='size' type='radio' value='x-large' />
+    </FormGroup>
   </Form>
 )
 
@@ -39,25 +49,25 @@ export default class AccordionExampleMenu extends Component {
 
     return (
       <Accordion as={Menu} vertical>
-        <Menu.Item>
-          <Accordion.Title
+        <MenuItem>
+          <AccordionTitle
             active={activeIndex === 0}
             content='Size'
             index={0}
             onClick={this.handleClick}
           />
-          <Accordion.Content active={activeIndex === 0} content={SizeForm} />
-        </Menu.Item>
+          <AccordionContent active={activeIndex === 0} content={SizeForm} />
+        </MenuItem>
 
-        <Menu.Item>
-          <Accordion.Title
+        <MenuItem>
+          <AccordionTitle
             active={activeIndex === 1}
             content='Colors'
             index={1}
             onClick={this.handleClick}
           />
-          <Accordion.Content active={activeIndex === 1} content={ColorForm} />
-        </Menu.Item>
+          <AccordionContent active={activeIndex === 1} content={ColorForm} />
+        </MenuItem>
       </Accordion>
     )
   }
diff --git a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js
index f41c29ff21..b6fa7df097 100644
--- a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js
+++ b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Accordion } from 'semantic-ui-react'
+import { AccordionAccordion, Accordion } from 'semantic-ui-react'
 
 const level1Panels = [
   { key: 'panel-1a', title: 'Level 1A', content: 'Level 1A Contents' },
@@ -9,7 +9,7 @@ const level1Panels = [
 const Level1Content = (
   <div>
     Welcome to level 1
-    <Accordion.Accordion panels={level1Panels} />
+    <AccordionAccordion panels={level1Panels} />
   </div>
 )
 
@@ -21,7 +21,7 @@ const level2Panels = [
 const Level2Content = (
   <div>
     Welcome to level 2
-    <Accordion.Accordion panels={level2Panels} />
+    <AccordionAccordion panels={level2Panels} />
   </div>
 )
 
diff --git a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandard.js b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandard.js
index 5495f97e61..73c433c99c 100644
--- a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandard.js
+++ b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandard.js
@@ -1,5 +1,10 @@
 import React, { Component } from 'react'
-import { Accordion, Icon } from 'semantic-ui-react'
+import {
+  AccordionTitle,
+  AccordionContent,
+  Accordion,
+  Icon,
+} from 'semantic-ui-react'
 
 export default class AccordionExampleStandard extends Component {
   state = { activeIndex: 0 }
@@ -17,47 +22,47 @@ export default class AccordionExampleStandard extends Component {
 
     return (
       <Accordion>
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 0}
           index={0}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           What is a dog?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 0}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 0}>
           <p>
             A dog is a type of domesticated animal. Known for its loyalty and
             faithfulness, it can be found as a welcome guest in many households
             across the world.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
 
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 1}
           index={1}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           What kinds of dogs are there?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 1}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 1}>
           <p>
             There are many breeds of dogs. Each breed varies in size and
             temperament. Owners often select a breed of dog that they find to be
             compatible with their own lifestyle and desires from a companion.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
 
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 2}
           index={2}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           How do you acquire a dog?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 2}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 2}>
           <p>
             Three common ways for a prospective owner to acquire a dog is from
             pet shops, private owners, or shelters.
@@ -69,7 +74,7 @@ export default class AccordionExampleStandard extends Component {
             finding your dog from a shelter, helps give a good home to a dog who
             may not find one so readily.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
       </Accordion>
     )
   }
diff --git a/docs/src/examples/modules/Accordion/Types/AccordionExampleStyled.js b/docs/src/examples/modules/Accordion/Types/AccordionExampleStyled.js
index 7df42c99a6..fb1aefe5b8 100644
--- a/docs/src/examples/modules/Accordion/Types/AccordionExampleStyled.js
+++ b/docs/src/examples/modules/Accordion/Types/AccordionExampleStyled.js
@@ -1,5 +1,10 @@
 import React, { Component } from 'react'
-import { Accordion, Icon } from 'semantic-ui-react'
+import {
+  AccordionTitle,
+  AccordionContent,
+  Accordion,
+  Icon,
+} from 'semantic-ui-react'
 
 export default class AccordionExampleStyled extends Component {
   state = { activeIndex: 0 }
@@ -17,47 +22,47 @@ export default class AccordionExampleStyled extends Component {
 
     return (
       <Accordion styled>
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 0}
           index={0}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           What is a dog?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 0}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 0}>
           <p>
             A dog is a type of domesticated animal. Known for its loyalty and
             faithfulness, it can be found as a welcome guest in many households
             across the world.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
 
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 1}
           index={1}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           What kinds of dogs are there?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 1}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 1}>
           <p>
             There are many breeds of dogs. Each breed varies in size and
             temperament. Owners often select a breed of dog that they find to be
             compatible with their own lifestyle and desires from a companion.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
 
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 2}
           index={2}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           How do you acquire a dog?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 2}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 2}>
           <p>
             Three common ways for a prospective owner to acquire a dog is from
             pet shops, private owners, or shelters.
@@ -69,7 +74,7 @@ export default class AccordionExampleStyled extends Component {
             finding your dog from a shelter, helps give a good home to a dog who
             may not find one so readily.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
       </Accordion>
     )
   }
diff --git a/docs/src/examples/modules/Accordion/Variations/AccordionExampleFluid.js b/docs/src/examples/modules/Accordion/Variations/AccordionExampleFluid.js
index 671d7001be..efdcc917ae 100644
--- a/docs/src/examples/modules/Accordion/Variations/AccordionExampleFluid.js
+++ b/docs/src/examples/modules/Accordion/Variations/AccordionExampleFluid.js
@@ -1,5 +1,10 @@
 import React, { Component } from 'react'
-import { Accordion, Icon } from 'semantic-ui-react'
+import {
+  AccordionTitle,
+  AccordionContent,
+  Accordion,
+  Icon,
+} from 'semantic-ui-react'
 
 export default class AccordionExampleFluid extends Component {
   state = { activeIndex: 0 }
@@ -17,47 +22,47 @@ export default class AccordionExampleFluid extends Component {
 
     return (
       <Accordion fluid styled>
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 0}
           index={0}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           What is a dog?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 0}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 0}>
           <p>
             A dog is a type of domesticated animal. Known for its loyalty and
             faithfulness, it can be found as a welcome guest in many households
             across the world.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
 
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 1}
           index={1}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           What kinds of dogs are there?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 1}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 1}>
           <p>
             There are many breeds of dogs. Each breed varies in size and
             temperament. Owners often select a breed of dog that they find to be
             compatible with their own lifestyle and desires from a companion.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
 
-        <Accordion.Title
+        <AccordionTitle
           active={activeIndex === 2}
           index={2}
           onClick={this.handleClick}
         >
           <Icon name='dropdown' />
           How do you acquire a dog?
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 2}>
+        </AccordionTitle>
+        <AccordionContent active={activeIndex === 2}>
           <p>
             Three common ways for a prospective owner to acquire a dog is from
             pet shops, private owners, or shelters.
@@ -69,7 +74,7 @@ export default class AccordionExampleFluid extends Component {
             finding your dog from a shelter, helps give a good home to a dog who
             may not find one so readily.
           </p>
-        </Accordion.Content>
+        </AccordionContent>
       </Accordion>
     )
   }
diff --git a/docs/src/examples/modules/Accordion/Variations/AccordionExampleInverted.js b/docs/src/examples/modules/Accordion/Variations/AccordionExampleInverted.js
index 4d243fe314..c05bdc0073 100644
--- a/docs/src/examples/modules/Accordion/Variations/AccordionExampleInverted.js
+++ b/docs/src/examples/modules/Accordion/Variations/AccordionExampleInverted.js
@@ -1,5 +1,11 @@
 import React, { Component } from 'react'
-import { Accordion, Icon, Segment } from 'semantic-ui-react'
+import {
+  AccordionTitle,
+  AccordionContent,
+  Accordion,
+  Icon,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class AccordionExampleInverted extends Component {
   state = { activeIndex: 0 }
@@ -18,48 +24,48 @@ export default class AccordionExampleInverted extends Component {
     return (
       <Segment inverted>
         <Accordion inverted>
-          <Accordion.Title
+          <AccordionTitle
             active={activeIndex === 0}
             index={0}
             onClick={this.handleClick}
           >
             <Icon name='dropdown' />
             What is a dog?
-          </Accordion.Title>
-          <Accordion.Content active={activeIndex === 0}>
+          </AccordionTitle>
+          <AccordionContent active={activeIndex === 0}>
             <p>
               A dog is a type of domesticated animal. Known for its loyalty and
               faithfulness, it can be found as a welcome guest in many
               households across the world.
             </p>
-          </Accordion.Content>
+          </AccordionContent>
 
-          <Accordion.Title
+          <AccordionTitle
             active={activeIndex === 1}
             index={1}
             onClick={this.handleClick}
           >
             <Icon name='dropdown' />
             What kinds of dogs are there?
-          </Accordion.Title>
-          <Accordion.Content active={activeIndex === 1}>
+          </AccordionTitle>
+          <AccordionContent active={activeIndex === 1}>
             <p>
               There are many breeds of dogs. Each breed varies in size and
               temperament. Owners often select a breed of dog that they find to
               be compatible with their own lifestyle and desires from a
               companion.
             </p>
-          </Accordion.Content>
+          </AccordionContent>
 
-          <Accordion.Title
+          <AccordionTitle
             active={activeIndex === 2}
             index={2}
             onClick={this.handleClick}
           >
             <Icon name='dropdown' />
             How do you acquire a dog?
-          </Accordion.Title>
-          <Accordion.Content active={activeIndex === 2}>
+          </AccordionTitle>
+          <AccordionContent active={activeIndex === 2}>
             <p>
               Three common ways for a prospective owner to acquire a dog is from
               pet shops, private owners, or shelters.
@@ -71,7 +77,7 @@ export default class AccordionExampleInverted extends Component {
               finding your dog from a shelter, helps give a good home to a dog
               who may not find one so readily.
             </p>
-          </Accordion.Content>
+          </AccordionContent>
         </Accordion>
       </Segment>
     )
diff --git a/docs/src/examples/modules/Checkbox/States/CheckboxExampleDisabled.js b/docs/src/examples/modules/Checkbox/States/CheckboxExampleDisabled.js
index 5358b471e4..0c2411a97e 100644
--- a/docs/src/examples/modules/Checkbox/States/CheckboxExampleDisabled.js
+++ b/docs/src/examples/modules/Checkbox/States/CheckboxExampleDisabled.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Form, Checkbox } from 'semantic-ui-react'
+import { FormField, Form, Checkbox } from 'semantic-ui-react'
 
 const CheckboxExampleDisabled = () => (
   <Form>
-    <Form.Field>
+    <FormField>
       <Checkbox label='Disabled' disabled />
-    </Form.Field>
-    <Form.Field>
+    </FormField>
+    <FormField>
       <Checkbox toggle label='Disabled' disabled />
-    </Form.Field>
+    </FormField>
   </Form>
 )
 
diff --git a/docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js b/docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js
index 9a66945e9f..30cd44de3f 100644
--- a/docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js
+++ b/docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import { Form, Checkbox } from 'semantic-ui-react'
+import { FormField, Form, Checkbox } from 'semantic-ui-react'
 
 function CheckboxExampleRadioGroup() {
   const [value, setValue] = React.useState('this')
 
   return (
     <Form>
-      <Form.Field>
+      <FormField>
         Selected value: <b>{value}</b>
-      </Form.Field>
-      <Form.Field>
+      </FormField>
+      <FormField>
         <Checkbox
           radio
           label='Choose this'
@@ -18,8 +18,8 @@ function CheckboxExampleRadioGroup() {
           checked={value === 'this'}
           onChange={(e, data) => setValue(data.value)}
         />
-      </Form.Field>
-      <Form.Field>
+      </FormField>
+      <FormField>
         <Checkbox
           radio
           label='Or that'
@@ -28,7 +28,7 @@ function CheckboxExampleRadioGroup() {
           checked={value === 'that'}
           onChange={(e, data) => setValue(data.value)}
         />
-      </Form.Field>
+      </FormField>
     </Form>
   )
 }
diff --git a/docs/src/examples/modules/Checkbox/Usage/CheckboxExampleDOMComparison.js b/docs/src/examples/modules/Checkbox/Usage/CheckboxExampleDOMComparison.js
index fd1bdcedbc..c7a5e7dd00 100644
--- a/docs/src/examples/modules/Checkbox/Usage/CheckboxExampleDOMComparison.js
+++ b/docs/src/examples/modules/Checkbox/Usage/CheckboxExampleDOMComparison.js
@@ -1,6 +1,17 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Button, Checkbox, Grid, Segment, Table } from 'semantic-ui-react'
+import {
+  SegmentGroup,
+  TableRow,
+  TableCell,
+  TableBody,
+  GridColumn,
+  Button,
+  Checkbox,
+  Grid,
+  Segment,
+  Table,
+} from 'semantic-ui-react'
 
 export default class CheckboxExampleDOMComparison extends Component {
   state = {
@@ -48,16 +59,16 @@ export default class CheckboxExampleDOMComparison extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={10}>
+        <GridColumn width={10}>
           <Table>
-            <Table.Body>
-              <Table.Row>
-                <Table.Cell collapsing>
+            <TableBody>
+              <TableRow>
+                <TableCell collapsing>
                   <Button compact onClick={this.toggle}>
                     Toggle
                   </Button>
-                </Table.Cell>
-                <Table.Cell>
+                </TableCell>
+                <TableCell>
                   <Checkbox
                     checked={suirChecked}
                     label='SUIR Checkbox'
@@ -77,19 +88,19 @@ export default class CheckboxExampleDOMComparison extends Component {
                     onMouseDown={this.handleMouseDown}
                     onMouseUp={this.handleMouseUp}
                   />
-                </Table.Cell>
-                <Table.Cell collapsing>
+                </TableCell>
+                <TableCell collapsing>
                   <code>{`{ checked: ${suirChecked} }`}</code>
-                </Table.Cell>
-              </Table.Row>
+                </TableCell>
+              </TableRow>
 
-              <Table.Row>
-                <Table.Cell>
+              <TableRow>
+                <TableCell>
                   <Button compact onClick={this.toggleDOM}>
                     Toggle
                   </Button>
-                </Table.Cell>
-                <Table.Cell>
+                </TableCell>
+                <TableCell>
                   <label>
                     <input
                       checked={domChecked}
@@ -113,17 +124,17 @@ export default class CheckboxExampleDOMComparison extends Component {
                     type='checkbox'
                   />
                   <label htmlFor='dom-checkbox'> DOM Checkbox with id</label>
-                </Table.Cell>
-                <Table.Cell>
+                </TableCell>
+                <TableCell>
                   <code>{`{ checked: ${domChecked} }`}</code>
-                </Table.Cell>
-              </Table.Row>
-            </Table.Body>
+                </TableCell>
+              </TableRow>
+            </TableBody>
           </Table>
-        </Grid.Column>
+        </GridColumn>
 
-        <Grid.Column width={6}>
-          <Segment.Group>
+        <GridColumn width={6}>
+          <SegmentGroup>
             <Segment>
               <Button
                 compact
@@ -142,8 +153,8 @@ export default class CheckboxExampleDOMComparison extends Component {
                 ))}
               </pre>
             </Segment>
-          </Segment.Group>
-        </Grid.Column>
+          </SegmentGroup>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Dimmer/Types/DimmerExampleContent.js b/docs/src/examples/modules/Dimmer/Types/DimmerExampleContent.js
index eaba948a1d..d6287ec75f 100644
--- a/docs/src/examples/modules/Dimmer/Types/DimmerExampleContent.js
+++ b/docs/src/examples/modules/Dimmer/Types/DimmerExampleContent.js
@@ -1,5 +1,15 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Header, Icon, Image, Segment } from 'semantic-ui-react'
+import {
+  DimmerDimmable,
+  ImageGroup,
+  ButtonGroup,
+  Button,
+  Dimmer,
+  Header,
+  Icon,
+  Image,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class DimmerExampleDimmer extends Component {
   state = {}
@@ -12,13 +22,13 @@ export default class DimmerExampleDimmer extends Component {
 
     return (
       <div>
-        <Dimmer.Dimmable as={Segment} dimmed={active}>
+        <DimmerDimmable as={Segment} dimmed={active}>
           <Header as='h3'>Overlayable Section</Header>
-          <Image.Group size='small' className='ui small images'>
+          <ImageGroup size='small' className='ui small images'>
             <Image src='/images/wireframe/image.png' />
             <Image src='/images/wireframe/image.png' />
             <Image src='/images/wireframe/image.png' />
-          </Image.Group>
+          </ImageGroup>
           <Image size='medium' src='/images/wireframe/media-paragraph.png' />
 
           <Dimmer active={active} onClickOutside={this.handleHide}>
@@ -27,12 +37,12 @@ export default class DimmerExampleDimmer extends Component {
               Dimmed Message!
             </Header>
           </Dimmer>
-        </Dimmer.Dimmable>
+        </DimmerDimmable>
 
-        <Button.Group>
+        <ButtonGroup>
           <Button icon='plus' onClick={this.handleShow} />
           <Button icon='minus' onClick={this.handleHide} />
-        </Button.Group>
+        </ButtonGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Dimmer/Types/DimmerExampleDimmer.js b/docs/src/examples/modules/Dimmer/Types/DimmerExampleDimmer.js
index 62763fa56e..88cc949b9d 100644
--- a/docs/src/examples/modules/Dimmer/Types/DimmerExampleDimmer.js
+++ b/docs/src/examples/modules/Dimmer/Types/DimmerExampleDimmer.js
@@ -1,5 +1,14 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'
+import {
+  DimmerDimmable,
+  ImageGroup,
+  ButtonGroup,
+  Button,
+  Dimmer,
+  Header,
+  Image,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class DimmerExampleDimmer extends Component {
   state = {}
@@ -12,22 +21,22 @@ export default class DimmerExampleDimmer extends Component {
 
     return (
       <div>
-        <Dimmer.Dimmable as={Segment} dimmed={active}>
+        <DimmerDimmable as={Segment} dimmed={active}>
           <Header as='h3'>Overlayable Section</Header>
-          <Image.Group size='small' className='ui small images'>
+          <ImageGroup size='small' className='ui small images'>
             <Image src='/images/wireframe/image.png' />
             <Image src='/images/wireframe/image.png' />
             <Image src='/images/wireframe/image.png' />
-          </Image.Group>
+          </ImageGroup>
           <Image size='medium' src='/images/wireframe/media-paragraph.png' />
 
           <Dimmer active={active} onClickOutside={this.handleHide} />
-        </Dimmer.Dimmable>
+        </DimmerDimmable>
 
-        <Button.Group>
+        <ButtonGroup>
           <Button icon='plus' onClick={this.handleShow} />
           <Button icon='minus' onClick={this.handleHide} />
-        </Button.Group>
+        </ButtonGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Dimmer/Types/DimmerExamplePage.js b/docs/src/examples/modules/Dimmer/Types/DimmerExamplePage.js
index a1353cf5c8..c85f3f0313 100644
--- a/docs/src/examples/modules/Dimmer/Types/DimmerExamplePage.js
+++ b/docs/src/examples/modules/Dimmer/Types/DimmerExamplePage.js
@@ -1,5 +1,11 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Header, Icon } from 'semantic-ui-react'
+import {
+  HeaderSubheader,
+  Button,
+  Dimmer,
+  Header,
+  Icon,
+} from 'semantic-ui-react'
 
 export default class DimmerExamplePage extends Component {
   state = {}
@@ -23,7 +29,7 @@ export default class DimmerExamplePage extends Component {
           <Header as='h2' icon inverted>
             <Icon name='heart' />
             Dimmed Message!
-            <Header.Subheader>Dimmer sub-header</Header.Subheader>
+            <HeaderSubheader>Dimmer sub-header</HeaderSubheader>
           </Header>
         </Dimmer>
       </div>
diff --git a/docs/src/examples/modules/Dimmer/Usage/DimmerExampleEvents.js b/docs/src/examples/modules/Dimmer/Usage/DimmerExampleEvents.js
index 4c8158dcc2..90894d2990 100644
--- a/docs/src/examples/modules/Dimmer/Usage/DimmerExampleEvents.js
+++ b/docs/src/examples/modules/Dimmer/Usage/DimmerExampleEvents.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Header, Image } from 'semantic-ui-react'
+import { DimmerDimmable, Button, Header, Image } from 'semantic-ui-react'
 
 export default class DimmerExampleEvents extends Component {
   state = {}
@@ -21,7 +21,7 @@ export default class DimmerExampleEvents extends Component {
     )
 
     return (
-      <Dimmer.Dimmable
+      <DimmerDimmable
         as={Image}
         dimmed={active}
         dimmer={{ active, content }}
diff --git a/docs/src/examples/modules/Dimmer/Usage/DimmerExampleLoader.js b/docs/src/examples/modules/Dimmer/Usage/DimmerExampleLoader.js
index 7aedc0f362..98ec22c5d8 100644
--- a/docs/src/examples/modules/Dimmer/Usage/DimmerExampleLoader.js
+++ b/docs/src/examples/modules/Dimmer/Usage/DimmerExampleLoader.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Image, Loader, Segment } from 'semantic-ui-react'
+import {
+  DimmerDimmable,
+  ButtonGroup,
+  Button,
+  Dimmer,
+  Image,
+  Loader,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class DimmerExampleLoader extends Component {
   state = {}
@@ -12,7 +20,7 @@ export default class DimmerExampleLoader extends Component {
 
     return (
       <div>
-        <Dimmer.Dimmable as={Segment} dimmed={active}>
+        <DimmerDimmable as={Segment} dimmed={active}>
           <Dimmer active={active} inverted>
             <Loader>Loading</Loader>
           </Dimmer>
@@ -23,12 +31,12 @@ export default class DimmerExampleLoader extends Component {
           <p>
             <Image src='/images/wireframe/short-paragraph.png' />
           </p>
-        </Dimmer.Dimmable>
+        </DimmerDimmable>
 
-        <Button.Group>
+        <ButtonGroup>
           <Button icon='plus' onClick={this.handleShow} />
           <Button icon='minus' onClick={this.handleHide} />
-        </Button.Group>
+        </ButtonGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleBlurring.js b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleBlurring.js
index ffb0eac251..15812bf7cf 100644
--- a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleBlurring.js
+++ b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleBlurring.js
@@ -1,5 +1,12 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Image, Segment } from 'semantic-ui-react'
+import {
+  DimmerDimmable,
+  ButtonGroup,
+  Button,
+  Dimmer,
+  Image,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class DimmerExampleBlurring extends Component {
   state = {}
@@ -12,7 +19,7 @@ export default class DimmerExampleBlurring extends Component {
 
     return (
       <div>
-        <Dimmer.Dimmable as={Segment} blurring dimmed={active}>
+        <DimmerDimmable as={Segment} blurring dimmed={active}>
           <Dimmer active={active} onClickOutside={this.handleHide} />
 
           <p>
@@ -21,12 +28,12 @@ export default class DimmerExampleBlurring extends Component {
           <p>
             <Image src='/images/wireframe/short-paragraph.png' />
           </p>
-        </Dimmer.Dimmable>
+        </DimmerDimmable>
 
-        <Button.Group>
+        <ButtonGroup>
           <Button icon='plus' onClick={this.handleShow} />
           <Button icon='minus' onClick={this.handleHide} />
-        </Button.Group>
+        </ButtonGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleBlurringInverted.js b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleBlurringInverted.js
index 8d27bdf062..b2e94bf4fe 100644
--- a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleBlurringInverted.js
+++ b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleBlurringInverted.js
@@ -1,5 +1,12 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Image, Segment } from 'semantic-ui-react'
+import {
+  DimmerDimmable,
+  ButtonGroup,
+  Button,
+  Dimmer,
+  Image,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class DimmerExampleBlurringInverted extends Component {
   state = {}
@@ -12,7 +19,7 @@ export default class DimmerExampleBlurringInverted extends Component {
 
     return (
       <div>
-        <Dimmer.Dimmable as={Segment} blurring dimmed={active}>
+        <DimmerDimmable as={Segment} blurring dimmed={active}>
           <Dimmer active={active} inverted onClickOutside={this.handleHide} />
 
           <p>
@@ -21,12 +28,12 @@ export default class DimmerExampleBlurringInverted extends Component {
           <p>
             <Image src='/images/wireframe/short-paragraph.png' />
           </p>
-        </Dimmer.Dimmable>
+        </DimmerDimmable>
 
-        <Button.Group>
+        <ButtonGroup>
           <Button icon='plus' onClick={this.handleShow} />
           <Button icon='minus' onClick={this.handleHide} />
-        </Button.Group>
+        </ButtonGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleInverted.js b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleInverted.js
index 3df2d0a745..6e80573728 100644
--- a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleInverted.js
+++ b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleInverted.js
@@ -1,5 +1,12 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Image, Segment } from 'semantic-ui-react'
+import {
+  DimmerDimmable,
+  ButtonGroup,
+  Button,
+  Dimmer,
+  Image,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class DimmerExampleInverted extends Component {
   state = {}
@@ -12,7 +19,7 @@ export default class DimmerExampleInverted extends Component {
 
     return (
       <div>
-        <Dimmer.Dimmable as={Segment} dimmed={active}>
+        <DimmerDimmable as={Segment} dimmed={active}>
           <Dimmer active={active} inverted onClickOutside={this.handleHide} />
 
           <p>
@@ -21,12 +28,12 @@ export default class DimmerExampleInverted extends Component {
           <p>
             <Image src='/images/wireframe/paragraph.png' />
           </p>
-        </Dimmer.Dimmable>
+        </DimmerDimmable>
 
-        <Button.Group>
+        <ButtonGroup>
           <Button icon='plus' onClick={this.handleShow} />
           <Button icon='minus' onClick={this.handleHide} />
-        </Button.Group>
+        </ButtonGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleSimple.js b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleSimple.js
index 035f977424..23c2da2fd2 100644
--- a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleSimple.js
+++ b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleSimple.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Dimmer, Image, Segment } from 'semantic-ui-react'
+import { DimmerDimmable, Dimmer, Image, Segment } from 'semantic-ui-react'
 
 const DimmerExampleSimple = () => (
-  <Dimmer.Dimmable as={Segment} dimmed>
+  <DimmerDimmable as={Segment} dimmed>
     <Dimmer simple />
 
     <p>
@@ -11,7 +11,7 @@ const DimmerExampleSimple = () => (
     <p>
       <Image src='/images/wireframe/short-paragraph.png' />
     </p>
-  </Dimmer.Dimmable>
+  </DimmerDimmable>
 )
 
 export default DimmerExampleSimple
diff --git a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js
index 29d4224684..eaa4f5a766 100644
--- a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js
+++ b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'
+import {
+  DimmerDimmable,
+  ButtonGroup,
+  Button,
+  Dimmer,
+  Header,
+  Image,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class DimmerExampleVerticalAlignBottom extends Component {
   state = {}
@@ -12,7 +20,7 @@ export default class DimmerExampleVerticalAlignBottom extends Component {
 
     return (
       <div>
-        <Dimmer.Dimmable as={Segment} dimmed={active}>
+        <DimmerDimmable as={Segment} dimmed={active}>
           <p>
             <Image src='/images/wireframe/short-paragraph.png' />
           </p>
@@ -32,12 +40,12 @@ export default class DimmerExampleVerticalAlignBottom extends Component {
             <Button primary>Add</Button>
             <Button>View</Button>
           </Dimmer>
-        </Dimmer.Dimmable>
+        </DimmerDimmable>
 
-        <Button.Group>
+        <ButtonGroup>
           <Button icon='plus' onClick={this.handleShow} />
           <Button icon='minus' onClick={this.handleHide} />
-        </Button.Group>
+        </ButtonGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignTop.js b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignTop.js
index 917983bb9c..724e341c03 100644
--- a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignTop.js
+++ b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignTop.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'
+import {
+  DimmerDimmable,
+  ButtonGroup,
+  Button,
+  Dimmer,
+  Header,
+  Image,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class DimmerExampleVerticalAlignTop extends Component {
   state = {}
@@ -12,7 +20,7 @@ export default class DimmerExampleVerticalAlignTop extends Component {
 
     return (
       <div>
-        <Dimmer.Dimmable as={Segment} dimmed={active}>
+        <DimmerDimmable as={Segment} dimmed={active}>
           <p>
             <Image src='/images/wireframe/short-paragraph.png' />
           </p>
@@ -32,12 +40,12 @@ export default class DimmerExampleVerticalAlignTop extends Component {
             <Button primary>Add</Button>
             <Button>View</Button>
           </Dimmer>
-        </Dimmer.Dimmable>
+        </DimmerDimmable>
 
-        <Button.Group>
+        <ButtonGroup>
           <Button icon='plus' onClick={this.handleShow} />
           <Button icon='minus' onClick={this.handleHide} />
-        </Button.Group>
+        </ButtonGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleDescription.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleDescription.js
index 8fccffde3a..ef34aad6d8 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleDescription.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleDescription.js
@@ -1,5 +1,11 @@
 import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+} from 'semantic-ui-react'
 
 const DropdownExampleDescription = () => (
   <Dropdown
@@ -10,13 +16,13 @@ const DropdownExampleDescription = () => (
     icon='filter'
     className='icon'
   >
-    <Dropdown.Menu>
-      <Dropdown.Header icon='tags' content='Filter by tag' />
-      <Dropdown.Divider />
-      <Dropdown.Item description='2 new' text='Important' />
-      <Dropdown.Item description='10 new' text='Hopper' />
-      <Dropdown.Item description='5 new' text='Discussion' />
-    </Dropdown.Menu>
+    <DropdownMenu>
+      <DropdownHeader icon='tags' content='Filter by tag' />
+      <DropdownDivider />
+      <DropdownItem description='2 new' text='Important' />
+      <DropdownItem description='10 new' text='Hopper' />
+      <DropdownItem description='5 new' text='Discussion' />
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleDivider.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleDivider.js
index f1634983f0..a696760d2b 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleDivider.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleDivider.js
@@ -1,5 +1,11 @@
 import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+} from 'semantic-ui-react'
 
 const DropdownExampleDivider = () => (
   <Dropdown
@@ -10,13 +16,13 @@ const DropdownExampleDivider = () => (
     button
     className='icon'
   >
-    <Dropdown.Menu>
-      <Dropdown.Header icon='tags' content='Filter by tag' />
-      <Dropdown.Divider />
-      <Dropdown.Item>Important</Dropdown.Item>
-      <Dropdown.Item>Announcement</Dropdown.Item>
-      <Dropdown.Item>Discussion</Dropdown.Item>
-    </Dropdown.Menu>
+    <DropdownMenu>
+      <DropdownHeader icon='tags' content='Filter by tag' />
+      <DropdownDivider />
+      <DropdownItem>Important</DropdownItem>
+      <DropdownItem>Announcement</DropdownItem>
+      <DropdownItem>Discussion</DropdownItem>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js
index 8305e7320c..1dc15ac645 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Dropdown, Icon } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+  Icon,
+} from 'semantic-ui-react'
 
 const DropdownExampleFloatedContent = () => (
   <Dropdown
@@ -10,22 +17,22 @@ const DropdownExampleFloatedContent = () => (
     button
     className='icon'
   >
-    <Dropdown.Menu>
-      <Dropdown.Header icon='tags' content='Filter by tag' />
-      <Dropdown.Divider />
-      <Dropdown.Item>
+    <DropdownMenu>
+      <DropdownHeader icon='tags' content='Filter by tag' />
+      <DropdownDivider />
+      <DropdownItem>
         <Icon name='attention' className='right floated' />
         Important
-      </Dropdown.Item>
-      <Dropdown.Item>
+      </DropdownItem>
+      <DropdownItem>
         <Icon name='comment' className='right floated' />
         Announcement
-      </Dropdown.Item>
-      <Dropdown.Item>
+      </DropdownItem>
+      <DropdownItem>
         <Icon name='conversation' className='right floated' />
         Discussion
-      </Dropdown.Item>
-    </Dropdown.Menu>
+      </DropdownItem>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleHeader.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleHeader.js
index 8d0ca7dd21..eb20d54669 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleHeader.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleHeader.js
@@ -1,5 +1,10 @@
 import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  Dropdown,
+} from 'semantic-ui-react'
 
 const DropdownExampleHeader = () => (
   <Dropdown
@@ -10,12 +15,12 @@ const DropdownExampleHeader = () => (
     button
     className='icon'
   >
-    <Dropdown.Menu>
-      <Dropdown.Header icon='tags' content='Filter by tag' />
-      <Dropdown.Item>Important</Dropdown.Item>
-      <Dropdown.Item>Announcement</Dropdown.Item>
-      <Dropdown.Item>Discussion</Dropdown.Item>
-    </Dropdown.Menu>
+    <DropdownMenu>
+      <DropdownHeader icon='tags' content='Filter by tag' />
+      <DropdownItem>Important</DropdownItem>
+      <DropdownItem>Announcement</DropdownItem>
+      <DropdownItem>Discussion</DropdownItem>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleIcon.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleIcon.js
index a19360632c..c4236a2739 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleIcon.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleIcon.js
@@ -1,5 +1,11 @@
 import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+} from 'semantic-ui-react'
 
 const DropdownExampleIcon = () => (
   <Dropdown
@@ -10,13 +16,13 @@ const DropdownExampleIcon = () => (
     button
     className='icon'
   >
-    <Dropdown.Menu>
-      <Dropdown.Header icon='tags' content='Filter by tag' />
-      <Dropdown.Divider />
-      <Dropdown.Item icon='attention' text='Important' />
-      <Dropdown.Item icon='comment' text='Announcement' />
-      <Dropdown.Item icon='conversation' text='Discussion' />
-    </Dropdown.Menu>
+    <DropdownMenu>
+      <DropdownHeader icon='tags' content='Filter by tag' />
+      <DropdownDivider />
+      <DropdownItem icon='attention' text='Important' />
+      <DropdownItem icon='comment' text='Announcement' />
+      <DropdownItem icon='conversation' text='Discussion' />
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleImage.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleImage.js
index 7caaa8754d..86be531acc 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleImage.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleImage.js
@@ -1,5 +1,10 @@
 import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  Dropdown,
+} from 'semantic-ui-react'
 
 const friendOptions = [
   {
@@ -31,12 +36,12 @@ const DropdownExampleImage = () => (
     button
     className='icon'
   >
-    <Dropdown.Menu>
-      <Dropdown.Header content='People You Might Know' />
+    <DropdownMenu>
+      <DropdownHeader content='People You Might Know' />
       {friendOptions.map((option) => (
-        <Dropdown.Item key={option.value} {...option} />
+        <DropdownItem key={option.value} {...option} />
       ))}
-    </Dropdown.Menu>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleInput.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleInput.js
index bcef654539..f29ccc4846 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleInput.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleInput.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Dropdown, Input } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+  Input,
+} from 'semantic-ui-react'
 
 const DropdownExampleInput = () => (
   <Dropdown
@@ -10,24 +17,24 @@ const DropdownExampleInput = () => (
     button
     className='icon'
   >
-    <Dropdown.Menu>
-      <Dropdown.Header content='Search Issues' />
+    <DropdownMenu>
+      <DropdownHeader content='Search Issues' />
       <Input icon='search' iconPosition='left' name='search' />
-      <Dropdown.Header icon='tags' content='Filter by tag' />
-      <Dropdown.Divider />
-      <Dropdown.Item
+      <DropdownHeader icon='tags' content='Filter by tag' />
+      <DropdownDivider />
+      <DropdownItem
         label={{ color: 'red', empty: true, circular: true }}
         text='Important'
       />
-      <Dropdown.Item
+      <DropdownItem
         label={{ color: 'blue', empty: true, circular: true }}
         text='Announcement'
       />
-      <Dropdown.Item
+      <DropdownItem
         label={{ color: 'black', empty: true, circular: true }}
         text='Discussion'
       />
-    </Dropdown.Menu>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleLabel.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleLabel.js
index 868dccc9cd..e27d3076b6 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleLabel.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleLabel.js
@@ -1,5 +1,11 @@
 import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+} from 'semantic-ui-react'
 
 const DropdownExampleLabel = () => (
   <Dropdown
@@ -10,22 +16,22 @@ const DropdownExampleLabel = () => (
     button
     className='icon'
   >
-    <Dropdown.Menu>
-      <Dropdown.Header icon='tags' content='Filter by tag' />
-      <Dropdown.Divider />
-      <Dropdown.Item
+    <DropdownMenu>
+      <DropdownHeader icon='tags' content='Filter by tag' />
+      <DropdownDivider />
+      <DropdownItem
         label={{ color: 'red', empty: true, circular: true }}
         text='Important'
       />
-      <Dropdown.Item
+      <DropdownItem
         label={{ color: 'blue', empty: true, circular: true }}
         text='Announcement'
       />
-      <Dropdown.Item
+      <DropdownItem
         label={{ color: 'black', empty: true, circular: true }}
         text='Discussion'
       />
-    </Dropdown.Menu>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleMessage.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleMessage.js
index 113bd6b38c..2f905cf389 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleMessage.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleMessage.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import { Dropdown, Message } from 'semantic-ui-react'
+import { DropdownMenu, Dropdown, Message } from 'semantic-ui-react'
 
 const DropdownExampleMessage = () => (
   <Dropdown text='Login' icon='filter' floating labeled button className='icon'>
-    <Dropdown.Menu>
+    <DropdownMenu>
       <Message
         error
         header='Error'
         content='You must log-in to see all categories'
       />
-    </Dropdown.Menu>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleDropdown.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleDropdown.js
index 108668690e..fdd32d5b19 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleDropdown.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleDropdown.js
@@ -1,24 +1,29 @@
 import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownDivider,
+  Dropdown,
+} from 'semantic-ui-react'
 
 // TODO: This is missing functionality for sub-menu here from SUI core examples.
 // The "Publish To Web" item should contain a sub-menu.
 
 const DropdownExampleDropdown = () => (
   <Dropdown text='File'>
-    <Dropdown.Menu>
-      <Dropdown.Item text='New' />
-      <Dropdown.Item text='Open...' description='ctrl + o' />
-      <Dropdown.Item text='Save as...' description='ctrl + s' />
-      <Dropdown.Item text='Rename' description='ctrl + r' />
-      <Dropdown.Item text='Make a copy' />
-      <Dropdown.Item icon='folder' text='Move to folder' />
-      <Dropdown.Item icon='trash' text='Move to trash' />
-      <Dropdown.Divider />
-      <Dropdown.Item text='Download As...' />
-      <Dropdown.Item text='Publish To Web' />
-      <Dropdown.Item text='E-mail Collaborators' />
-    </Dropdown.Menu>
+    <DropdownMenu>
+      <DropdownItem text='New' />
+      <DropdownItem text='Open...' description='ctrl + o' />
+      <DropdownItem text='Save as...' description='ctrl + s' />
+      <DropdownItem text='Rename' description='ctrl + r' />
+      <DropdownItem text='Make a copy' />
+      <DropdownItem icon='folder' text='Move to folder' />
+      <DropdownItem icon='trash' text='Move to trash' />
+      <DropdownDivider />
+      <DropdownItem text='Download As...' />
+      <DropdownItem text='Publish To Web' />
+      <DropdownItem text='E-mail Collaborators' />
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleFloating.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleFloating.js
index c920fc9295..47dbbcc84f 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleFloating.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleFloating.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Dropdown } from 'semantic-ui-react'
+import { ButtonGroup, Button, Dropdown } from 'semantic-ui-react'
 
 const options = [
   { key: 'edit', icon: 'edit', text: 'Edit Post', value: 'edit' },
@@ -8,7 +8,7 @@ const options = [
 ]
 
 const DropdownExampleFloating = () => (
-  <Button.Group color='teal'>
+  <ButtonGroup color='teal'>
     <Button>Save</Button>
     <Dropdown
       className='button icon'
@@ -16,7 +16,7 @@ const DropdownExampleFloating = () => (
       options={options}
       trigger={<></>}
     />
-  </Button.Group>
+  </ButtonGroup>
 )
 
 export default DropdownExampleFloating
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js
index 0a74bec16a..addb224ea4 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, Header, Icon } from 'semantic-ui-react'
+import { HeaderContent, Dropdown, Header, Icon } from 'semantic-ui-react'
 
 const options = [
   {
@@ -25,7 +25,7 @@ const options = [
 const DropdownExampleInlineTwo = () => (
   <Header as='h4'>
     <Icon name='trophy' />
-    <Header.Content>
+    <HeaderContent>
       Trending repos{' '}
       <Dropdown
         inline
@@ -33,7 +33,7 @@ const DropdownExampleInlineTwo = () => (
         options={options}
         defaultValue={options[0].value}
       />
-    </Header.Content>
+    </HeaderContent>
   </Header>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js
index 2e89f2f359..471027d058 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Dropdown, Input } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+  Input,
+} from 'semantic-ui-react'
 
 const tagOptions = [
   {
@@ -60,16 +67,16 @@ const tagOptions = [
 
 const DropdownExampleMultipleSearchInMenu = () => (
   <Dropdown text='Filter Posts' multiple icon='filter'>
-    <Dropdown.Menu>
+    <DropdownMenu>
       <Input icon='search' iconPosition='left' className='search' />
-      <Dropdown.Divider />
-      <Dropdown.Header icon='tags' content='Tag Label' />
-      <Dropdown.Menu scrolling>
+      <DropdownDivider />
+      <DropdownHeader icon='tags' content='Tag Label' />
+      <DropdownMenu scrolling>
         {tagOptions.map((option) => (
-          <Dropdown.Item key={option.value} {...option} />
+          <DropdownItem key={option.value} {...option} />
         ))}
-      </Dropdown.Menu>
-    </Dropdown.Menu>
+      </DropdownMenu>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointing.js b/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointing.js
index 6772dcc906..8750fc957b 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointing.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointing.js
@@ -1,38 +1,46 @@
 import React from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  MenuItem,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 const DropdownExamplePointing = () => (
   <Menu>
-    <Menu.Item>Home</Menu.Item>
+    <MenuItem>Home</MenuItem>
     <Dropdown text='Shopping' pointing className='link item'>
-      <Dropdown.Menu>
-        <Dropdown.Header>Categories</Dropdown.Header>
-        <Dropdown.Item>
+      <DropdownMenu>
+        <DropdownHeader>Categories</DropdownHeader>
+        <DropdownItem>
           <Dropdown text='Clothing'>
-            <Dropdown.Menu>
-              <Dropdown.Header>Mens</Dropdown.Header>
-              <Dropdown.Item>Shirts</Dropdown.Item>
-              <Dropdown.Item>Pants</Dropdown.Item>
-              <Dropdown.Item>Jeans</Dropdown.Item>
-              <Dropdown.Item>Shoes</Dropdown.Item>
-              <Dropdown.Divider />
-              <Dropdown.Header>Womens</Dropdown.Header>
-              <Dropdown.Item>Dresses</Dropdown.Item>
-              <Dropdown.Item>Shoes</Dropdown.Item>
-              <Dropdown.Item>Bags</Dropdown.Item>
-            </Dropdown.Menu>
+            <DropdownMenu>
+              <DropdownHeader>Mens</DropdownHeader>
+              <DropdownItem>Shirts</DropdownItem>
+              <DropdownItem>Pants</DropdownItem>
+              <DropdownItem>Jeans</DropdownItem>
+              <DropdownItem>Shoes</DropdownItem>
+              <DropdownDivider />
+              <DropdownHeader>Womens</DropdownHeader>
+              <DropdownItem>Dresses</DropdownItem>
+              <DropdownItem>Shoes</DropdownItem>
+              <DropdownItem>Bags</DropdownItem>
+            </DropdownMenu>
           </Dropdown>
-        </Dropdown.Item>
-        <Dropdown.Item>Home Goods</Dropdown.Item>
-        <Dropdown.Item>Bedroom</Dropdown.Item>
-        <Dropdown.Divider />
-        <Dropdown.Header>Order</Dropdown.Header>
-        <Dropdown.Item>Status</Dropdown.Item>
-        <Dropdown.Item>Cancellations</Dropdown.Item>
-      </Dropdown.Menu>
+        </DropdownItem>
+        <DropdownItem>Home Goods</DropdownItem>
+        <DropdownItem>Bedroom</DropdownItem>
+        <DropdownDivider />
+        <DropdownHeader>Order</DropdownHeader>
+        <DropdownItem>Status</DropdownItem>
+        <DropdownItem>Cancellations</DropdownItem>
+      </DropdownMenu>
     </Dropdown>
-    <Menu.Item>Forums</Menu.Item>
-    <Menu.Item>Contact Us</Menu.Item>
+    <MenuItem>Forums</MenuItem>
+    <MenuItem>Contact Us</MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointingTwo.js b/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointingTwo.js
index 7f686f9275..79d5c144dc 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointingTwo.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointingTwo.js
@@ -1,22 +1,29 @@
 import React from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownDivider,
+  MenuItem,
+  Dropdown,
+  Menu,
+} from 'semantic-ui-react'
 
 const DropdownExamplePointingTwo = () => (
   <Menu vertical>
-    <Menu.Item>Home</Menu.Item>
+    <MenuItem>Home</MenuItem>
     <Dropdown text='Messages' pointing='left' className='link item'>
-      <Dropdown.Menu>
-        <Dropdown.Item>Inbox</Dropdown.Item>
-        <Dropdown.Item>Starred</Dropdown.Item>
-        <Dropdown.Item>Sent Mail</Dropdown.Item>
-        <Dropdown.Item>Drafts (143)</Dropdown.Item>
-        <Dropdown.Divider />
-        <Dropdown.Item>Spam (1009)</Dropdown.Item>
-        <Dropdown.Item>Trash</Dropdown.Item>
-      </Dropdown.Menu>
+      <DropdownMenu>
+        <DropdownItem>Inbox</DropdownItem>
+        <DropdownItem>Starred</DropdownItem>
+        <DropdownItem>Sent Mail</DropdownItem>
+        <DropdownItem>Drafts (143)</DropdownItem>
+        <DropdownDivider />
+        <DropdownItem>Spam (1009)</DropdownItem>
+        <DropdownItem>Trash</DropdownItem>
+      </DropdownMenu>
     </Dropdown>
-    <Menu.Item>Browse</Menu.Item>
-    <Menu.Item>Help</Menu.Item>
+    <MenuItem>Browse</MenuItem>
+    <MenuItem>Help</MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js
index 22392faada..70ef672208 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Dropdown, Input } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+  Input,
+} from 'semantic-ui-react'
 
 const tagOptions = [
   {
@@ -67,16 +74,16 @@ const DropdownExampleSearchInMenu = () => (
     button
     className='icon'
   >
-    <Dropdown.Menu>
+    <DropdownMenu>
       <Input icon='search' iconPosition='left' className='search' />
-      <Dropdown.Divider />
-      <Dropdown.Header icon='tags' content='Tag Label' />
-      <Dropdown.Menu scrolling>
+      <DropdownDivider />
+      <DropdownHeader icon='tags' content='Tag Label' />
+      <DropdownMenu scrolling>
         {tagOptions.map((option) => (
-          <Dropdown.Item key={option.value} {...option} />
+          <DropdownItem key={option.value} {...option} />
         ))}
-      </Dropdown.Menu>
-    </Dropdown.Menu>
+      </DropdownMenu>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleControlled.js b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleControlled.js
index b47bd4462b..4fb0574fd8 100644
--- a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleControlled.js
+++ b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleControlled.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Dropdown, Grid, Segment } from 'semantic-ui-react'
+import { GridColumn, Dropdown, Grid, Segment } from 'semantic-ui-react'
 
 const options = [
   { key: 1, text: 'One', value: 1 },
@@ -17,7 +17,7 @@ export default class DropdownExampleControlled extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column>
+        <GridColumn>
           <Dropdown
             onChange={this.handleChange}
             options={options}
@@ -25,12 +25,12 @@ export default class DropdownExampleControlled extends Component {
             selection
             value={value}
           />
-        </Grid.Column>
-        <Grid.Column>
+        </GridColumn>
+        <GridColumn>
           <Segment secondary>
             <pre>Current value: {value}</pre>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleRemote.js b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleRemote.js
index 0d2eac26f4..76169bceb7 100644
--- a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleRemote.js
+++ b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleRemote.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Button, Dropdown, Grid, Header } from 'semantic-ui-react'
+import { GridColumn, Button, Dropdown, Grid, Header } from 'semantic-ui-react'
 
 const getOptions = () =>
   _.times(3, () => {
@@ -52,7 +52,7 @@ class DropdownExampleRemote extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={8}>
+        <GridColumn width={8}>
           <p>
             <Button onClick={this.fetchOptions}>Fetch</Button>
             <Button onClick={this.selectRandom} disabled={_.isEmpty(options)}>
@@ -88,11 +88,11 @@ class DropdownExampleRemote extends Component {
             disabled={isFetching}
             loading={isFetching}
           />
-        </Grid.Column>
-        <Grid.Column width={8}>
+        </GridColumn>
+        <GridColumn width={8}>
           <Header>State</Header>
           <pre>{JSON.stringify(this.state, null, 2)}</pre>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleSelectOnNavigation.js b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleSelectOnNavigation.js
index a28d5a33ed..433f1d92f4 100644
--- a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleSelectOnNavigation.js
+++ b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleSelectOnNavigation.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Grid, Dropdown, Form } from 'semantic-ui-react'
+import { GridColumn, FormField, Grid, Dropdown, Form } from 'semantic-ui-react'
 
 const getOptions = (number, prefix = 'Choice ') =>
   _.times(number, (index) => ({
@@ -20,9 +20,9 @@ export default class DropdownExampleSelectOnNavigation extends Component {
   render() {
     return (
       <Grid columns='equal'>
-        <Grid.Column>
+        <GridColumn>
           <Form>
-            <Form.Field>
+            <FormField>
               <label>Default selectOnNavigation</label>
               <Dropdown
                 selection
@@ -31,8 +31,8 @@ export default class DropdownExampleSelectOnNavigation extends Component {
                 placeholder='I change value on keyboard navigation'
                 onChange={this.handleChange}
               />
-            </Form.Field>
-            <Form.Field>
+            </FormField>
+            <FormField>
               <label>{'selectOnNavigation={false}'}</label>
               <Dropdown
                 selectOnNavigation={false}
@@ -42,13 +42,13 @@ export default class DropdownExampleSelectOnNavigation extends Component {
                 placeholder='I do not change value on keyboard navigation'
                 onChange={this.handleChange}
               />
-            </Form.Field>
+            </FormField>
           </Form>
-        </Grid.Column>
-        <Grid.Column>
+        </GridColumn>
+        <GridColumn>
           Dropdown values:
           <pre>{JSON.stringify(this.state, null, 2)}</pre>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleFluid.js b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleFluid.js
index 6c8acf49b5..41fa516194 100644
--- a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleFluid.js
+++ b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleFluid.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import { MenuItem, Dropdown, Menu } from 'semantic-ui-react'
 
 const getOptions = (number, prefix = 'Choice ') =>
   _.times(number, (index) => ({
@@ -11,12 +11,12 @@ const getOptions = (number, prefix = 'Choice ') =>
 
 const DropdownExampleFluid = () => (
   <Menu vertical>
-    <Menu.Item as='a'>Link 1</Menu.Item>
-    <Menu.Item as='a'>Link 2</Menu.Item>
-    <Menu.Item header>All Sections</Menu.Item>
-    <Menu.Item>
+    <MenuItem as='a'>Link 1</MenuItem>
+    <MenuItem as='a'>Link 2</MenuItem>
+    <MenuItem header>All Sections</MenuItem>
+    <MenuItem>
       <Dropdown placeholder='More' fluid selection options={getOptions(3)} />
-    </Menu.Item>
+    </MenuItem>
   </Menu>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirection.js b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirection.js
index 328fe694c6..1ac82facd9 100644
--- a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirection.js
+++ b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirection.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Menu, Dropdown } from 'semantic-ui-react'
+import { MenuMenu, Menu, Dropdown } from 'semantic-ui-react'
 
 const options = [
   { key: 1, text: 'This is a super long item', value: 1 },
@@ -16,7 +16,7 @@ const DropdownExampleMenuDirection = () => (
       direction='right'
       options={options}
     />
-    <Menu.Menu position='right'>
+    <MenuMenu position='right'>
       <Dropdown
         item
         simple
@@ -24,7 +24,7 @@ const DropdownExampleMenuDirection = () => (
         direction='right'
         options={options}
       />
-    </Menu.Menu>
+    </MenuMenu>
   </Menu>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft.js b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft.js
index 98c0d056aa..f6cdfa84b5 100644
--- a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft.js
+++ b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft.js
@@ -1,36 +1,36 @@
 import React from 'react'
-import { Dropdown, Icon } from 'semantic-ui-react'
+import { DropdownMenu, DropdownItem, Dropdown, Icon } from 'semantic-ui-react'
 
 const DropdownExampleMenuDirectionLeft = () => (
   <Dropdown text='Menu' floating labeled button className='icon'>
-    <Dropdown.Menu className='left'>
-      <Dropdown.Item>
+    <DropdownMenu className='left'>
+      <DropdownItem>
         <Icon name='dropdown' />
         <span className='text'>Left</span>
-        <Dropdown.Menu>
-          <Dropdown.Item>
+        <DropdownMenu>
+          <DropdownItem>
             <Icon name='dropdown' />
             <span className='text'>Still Left</span>
-            <Dropdown.Menu>
-              <Dropdown.Item>1</Dropdown.Item>
-              <Dropdown.Item>2</Dropdown.Item>
-              <Dropdown.Item>3</Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown.Item>
-          <Dropdown.Item>2</Dropdown.Item>
-          <Dropdown.Item>3</Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown.Item>
-      <Dropdown.Item>
+            <DropdownMenu>
+              <DropdownItem>1</DropdownItem>
+              <DropdownItem>2</DropdownItem>
+              <DropdownItem>3</DropdownItem>
+            </DropdownMenu>
+          </DropdownItem>
+          <DropdownItem>2</DropdownItem>
+          <DropdownItem>3</DropdownItem>
+        </DropdownMenu>
+      </DropdownItem>
+      <DropdownItem>
         <Icon name='left dropdown' />
         <span className='text'>Left</span>
-        <Dropdown.Menu>
-          <Dropdown.Item>1</Dropdown.Item>
-          <Dropdown.Item>2</Dropdown.Item>
-          <Dropdown.Item>3</Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown.Item>
-    </Dropdown.Menu>
+        <DropdownMenu>
+          <DropdownItem>1</DropdownItem>
+          <DropdownItem>2</DropdownItem>
+          <DropdownItem>3</DropdownItem>
+        </DropdownMenu>
+      </DropdownItem>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling.js b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling.js
index 3300a50f6e..582b5d869c 100644
--- a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling.js
+++ b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Dropdown, Input } from 'semantic-ui-react'
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownHeader,
+  DropdownDivider,
+  Dropdown,
+  Input,
+} from 'semantic-ui-react'
 
 const tagOptions = [
   {
@@ -60,16 +67,16 @@ const tagOptions = [
 
 const DropdownExampleSearchInMenuScrolling = () => (
   <Dropdown text='Filter Posts' icon='filter'>
-    <Dropdown.Menu>
+    <DropdownMenu>
       <Input icon='search' iconPosition='left' className='search' />
-      <Dropdown.Divider />
-      <Dropdown.Header icon='tags' content='Tag Label' />
-      <Dropdown.Menu scrolling>
+      <DropdownDivider />
+      <DropdownHeader icon='tags' content='Tag Label' />
+      <DropdownMenu scrolling>
         {tagOptions.map((option) => (
-          <Dropdown.Item key={option.value} {...option} />
+          <DropdownItem key={option.value} {...option} />
         ))}
-      </Dropdown.Menu>
-    </Dropdown.Menu>
+      </DropdownMenu>
+    </DropdownMenu>
   </Dropdown>
 )
 
diff --git a/docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.js b/docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.js
index 27ba75463e..621939cd4f 100644
--- a/docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.js
+++ b/docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Button, Header, Icon, Modal } from 'semantic-ui-react'
+import {
+  ModalContent,
+  ModalActions,
+  Button,
+  Header,
+  Icon,
+  Modal,
+} from 'semantic-ui-react'
 
 function ModalExampleCloseIcon() {
   const [open, setOpen] = React.useState(false)
@@ -13,20 +20,20 @@ function ModalExampleCloseIcon() {
       onOpen={() => setOpen(true)}
     >
       <Header icon='archive' content='Archive Old Messages' />
-      <Modal.Content>
+      <ModalContent>
         <p>
           Your inbox is getting full, would you like us to enable automatic
           archiving of old messages?
         </p>
-      </Modal.Content>
-      <Modal.Actions>
+      </ModalContent>
+      <ModalActions>
         <Button color='red' onClick={() => setOpen(false)}>
           <Icon name='remove' /> No
         </Button>
         <Button color='green' onClick={() => setOpen(false)}>
           <Icon name='checkmark' /> Yes
         </Button>
-      </Modal.Actions>
+      </ModalActions>
     </Modal>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js b/docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js
index 9a73535ac4..85d6e7262f 100644
--- a/docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js
+++ b/docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Button, Image, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalDescription,
+  ModalContent,
+  ModalActions,
+  Button,
+  Image,
+  Modal,
+} from 'semantic-ui-react'
 
 function ModalExampleContentImage() {
   const [open, setOpen] = React.useState(false)
@@ -11,19 +19,19 @@ function ModalExampleContentImage() {
       open={open}
       trigger={<Button>Show Modal</Button>}
     >
-      <Modal.Header>Upload image</Modal.Header>
-      <Modal.Content image>
+      <ModalHeader>Upload image</ModalHeader>
+      <ModalContent image>
         <Image size='medium' src='/images/wireframe/image-square.png' wrapped />
-        <Modal.Description>
+        <ModalDescription>
           <p>Would you like to upload this image?</p>
-        </Modal.Description>
-      </Modal.Content>
-      <Modal.Actions>
+        </ModalDescription>
+      </ModalContent>
+      <ModalActions>
         <Button onClick={() => setOpen(false)}>Cancel</Button>
         <Button onClick={() => setOpen(false)} positive>
           Ok
         </Button>
-      </Modal.Actions>
+      </ModalActions>
     </Modal>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js b/docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js
index e6553ebf66..085d1b2e2d 100644
--- a/docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js
+++ b/docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js
@@ -1,5 +1,11 @@
 import React from 'react'
-import { Button, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalContent,
+  ModalActions,
+  Button,
+  Modal,
+} from 'semantic-ui-react'
 
 function exampleReducer(state, action) {
   switch (action.type) {
@@ -38,19 +44,19 @@ function ModalExampleDimmer() {
         open={open}
         onClose={() => dispatch({ type: 'CLOSE_MODAL' })}
       >
-        <Modal.Header>Use Google's location service?</Modal.Header>
-        <Modal.Content>
+        <ModalHeader>Use Google's location service?</ModalHeader>
+        <ModalContent>
           Let Google help apps determine location. This means sending anonymous
           location data to Google, even when no apps are running.
-        </Modal.Content>
-        <Modal.Actions>
+        </ModalContent>
+        <ModalActions>
           <Button negative onClick={() => dispatch({ type: 'CLOSE_MODAL' })}>
             Disagree
           </Button>
           <Button positive onClick={() => dispatch({ type: 'CLOSE_MODAL' })}>
             Agree
           </Button>
-        </Modal.Actions>
+        </ModalActions>
       </Modal>
     </div>
   )
diff --git a/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js b/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js
index b234217d3c..eafd76b62d 100644
--- a/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js
+++ b/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Button, Header, Icon, Modal } from 'semantic-ui-react'
+import {
+  ModalContent,
+  ModalActions,
+  Button,
+  Header,
+  Icon,
+  Modal,
+} from 'semantic-ui-react'
 
 function ModalExampleBasic() {
   const [open, setOpen] = React.useState(false)
@@ -17,20 +24,20 @@ function ModalExampleBasic() {
         <Icon name='archive' />
         Archive Old Messages
       </Header>
-      <Modal.Content>
+      <ModalContent>
         <p>
           Your inbox is getting full, would you like us to enable automatic
           archiving of old messages?
         </p>
-      </Modal.Content>
-      <Modal.Actions>
+      </ModalContent>
+      <ModalActions>
         <Button basic color='red' inverted onClick={() => setOpen(false)}>
           <Icon name='remove' /> No
         </Button>
         <Button color='green' inverted onClick={() => setOpen(false)}>
           <Icon name='checkmark' /> Yes
         </Button>
-      </Modal.Actions>
+      </ModalActions>
     </Modal>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Types/ModalExampleModal.js b/docs/src/examples/modules/Modal/Types/ModalExampleModal.js
index ce98a34ef1..dc33091db0 100644
--- a/docs/src/examples/modules/Modal/Types/ModalExampleModal.js
+++ b/docs/src/examples/modules/Modal/Types/ModalExampleModal.js
@@ -1,5 +1,14 @@
 import React from 'react'
-import { Button, Header, Image, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalDescription,
+  ModalContent,
+  ModalActions,
+  Button,
+  Header,
+  Image,
+  Modal,
+} from 'semantic-ui-react'
 
 function ModalExampleModal() {
   const [open, setOpen] = React.useState(false)
@@ -11,19 +20,19 @@ function ModalExampleModal() {
       open={open}
       trigger={<Button>Show Modal</Button>}
     >
-      <Modal.Header>Select a Photo</Modal.Header>
-      <Modal.Content image>
+      <ModalHeader>Select a Photo</ModalHeader>
+      <ModalContent image>
         <Image size='medium' src='/images/avatar/large/rachel.png' wrapped />
-        <Modal.Description>
+        <ModalDescription>
           <Header>Default Profile Image</Header>
           <p>
             We've found the following gravatar image associated with your e-mail
             address.
           </p>
           <p>Is it okay to use this photo?</p>
-        </Modal.Description>
-      </Modal.Content>
-      <Modal.Actions>
+        </ModalDescription>
+      </ModalContent>
+      <ModalActions>
         <Button color='black' onClick={() => setOpen(false)}>
           Nope
         </Button>
@@ -34,7 +43,7 @@ function ModalExampleModal() {
           onClick={() => setOpen(false)}
           positive
         />
-      </Modal.Actions>
+      </ModalActions>
     </Modal>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js b/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js
index c06ffd7376..6d02f5ebe5 100644
--- a/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js
+++ b/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js
@@ -1,5 +1,15 @@
 import React from 'react'
-import { Button, Grid, Label, Modal, Segment } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalContent,
+  ModalActions,
+  GridColumn,
+  Button,
+  Grid,
+  Label,
+  Modal,
+  Segment,
+} from 'semantic-ui-react'
 
 function exampleReducer(state, action) {
   switch (action.type) {
@@ -45,7 +55,7 @@ function ModalExampleCloseConfig() {
 
   return (
     <Grid>
-      <Grid.Column width={4}>
+      <GridColumn width={4}>
         <Modal
           onOpen={(e) =>
             dispatch({ event: e.type, name: 'onOpen', type: 'OPEN_MODAL' })
@@ -56,11 +66,11 @@ function ModalExampleCloseConfig() {
           open={open}
           trigger={<Button>Open a modal</Button>}
         >
-          <Modal.Header>Delete Your Account</Modal.Header>
-          <Modal.Content>
+          <ModalHeader>Delete Your Account</ModalHeader>
+          <ModalContent>
             <p>Are you sure you want to delete your account</p>
-          </Modal.Content>
-          <Modal.Actions>
+          </ModalContent>
+          <ModalActions>
             <Button
               onClick={(e) =>
                 dispatch({
@@ -85,10 +95,10 @@ function ModalExampleCloseConfig() {
             >
               Yes
             </Button>
-          </Modal.Actions>
+          </ModalActions>
         </Modal>
-      </Grid.Column>
-      <Grid.Column width={12}>
+      </GridColumn>
+      <GridColumn width={12}>
         {log.length > 0 && (
           <Segment attached='top' secondary>
             {log.map((entry, i) => (
@@ -114,7 +124,7 @@ function ModalExampleCloseConfig() {
             Clear
           </Button>
         </Segment>
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js b/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js
index 91f3606a65..9826482bc5 100644
--- a/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js
+++ b/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js
@@ -1,5 +1,14 @@
 import React from 'react'
-import { Button, Checkbox, Grid, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalContent,
+  ModalActions,
+  GridColumn,
+  Button,
+  Checkbox,
+  Grid,
+  Modal,
+} from 'semantic-ui-react'
 
 function exampleReducer(state, action) {
   switch (action.type) {
@@ -27,7 +36,7 @@ function ModalExampleCloseConfig() {
 
   return (
     <Grid columns={1}>
-      <Grid.Column>
+      <GridColumn>
         <Checkbox
           checked={closeOnEscape}
           label={{ children: <code>closeOnEscape</code> }}
@@ -43,9 +52,9 @@ function ModalExampleCloseConfig() {
             dispatch({ type: 'CONFIG_CLOSE_ON_DIMMER_CLICK', value: checked })
           }
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column>
+      <GridColumn>
         <Modal
           closeOnEscape={closeOnEscape}
           closeOnDimmerClick={closeOnDimmerClick}
@@ -54,20 +63,20 @@ function ModalExampleCloseConfig() {
           onClose={() => dispatch({ type: 'CLOSE_MODAL' })}
           trigger={<Button>Show Modal</Button>}
         >
-          <Modal.Header>Delete Your Account</Modal.Header>
-          <Modal.Content>
+          <ModalHeader>Delete Your Account</ModalHeader>
+          <ModalContent>
             <p>Are you sure you want to delete your account</p>
-          </Modal.Content>
-          <Modal.Actions>
+          </ModalContent>
+          <ModalActions>
             <Button onClick={() => dispatch({ type: 'CLOSE_MODAL' })} negative>
               No
             </Button>
             <Button onClick={() => dispatch({ type: 'CLOSE_MODAL' })} positive>
               Yes
             </Button>
-          </Modal.Actions>
+          </ModalActions>
         </Modal>
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js b/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js
index 39de78cb32..0243360786 100644
--- a/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js
+++ b/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Button, Icon, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalDescription,
+  ModalContent,
+  ModalActions,
+  Button,
+  Icon,
+  Modal,
+} from 'semantic-ui-react'
 
 function ModalExampleMultiple() {
   const [firstOpen, setFirstOpen] = React.useState(false)
@@ -14,37 +22,37 @@ function ModalExampleMultiple() {
         onOpen={() => setFirstOpen(true)}
         open={firstOpen}
       >
-        <Modal.Header>Modal #1</Modal.Header>
-        <Modal.Content image>
+        <ModalHeader>Modal #1</ModalHeader>
+        <ModalContent image>
           <div className='image'>
             <Icon name='right arrow' />
           </div>
-          <Modal.Description>
+          <ModalDescription>
             <p>We have more to share with you. Follow us along to modal 2</p>
-          </Modal.Description>
-        </Modal.Content>
-        <Modal.Actions>
+          </ModalDescription>
+        </ModalContent>
+        <ModalActions>
           <Button onClick={() => setSecondOpen(true)} primary>
             Proceed <Icon name='right chevron' />
           </Button>
-        </Modal.Actions>
+        </ModalActions>
 
         <Modal
           onClose={() => setSecondOpen(false)}
           open={secondOpen}
           size='small'
         >
-          <Modal.Header>Modal #2</Modal.Header>
-          <Modal.Content>
+          <ModalHeader>Modal #2</ModalHeader>
+          <ModalContent>
             <p>That's everything!</p>
-          </Modal.Content>
-          <Modal.Actions>
+          </ModalContent>
+          <ModalActions>
             <Button
               icon='check'
               content='All Done'
               onClick={() => setSecondOpen(false)}
             />
-          </Modal.Actions>
+          </ModalActions>
         </Modal>
       </Modal>
     </>
diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleScrolling.js b/docs/src/examples/modules/Modal/Variations/ModalExampleScrolling.js
index c65f5135ba..91f837a391 100644
--- a/docs/src/examples/modules/Modal/Variations/ModalExampleScrolling.js
+++ b/docs/src/examples/modules/Modal/Variations/ModalExampleScrolling.js
@@ -1,5 +1,14 @@
 import React from 'react'
-import { Button, Icon, Image, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalDescription,
+  ModalContent,
+  ModalActions,
+  Button,
+  Icon,
+  Image,
+  Modal,
+} from 'semantic-ui-react'
 
 function ModalScrollingExample() {
   const [open, setOpen] = React.useState(false)
@@ -11,10 +20,10 @@ function ModalScrollingExample() {
       onOpen={() => setOpen(true)}
       trigger={<Button>Long Modal</Button>}
     >
-      <Modal.Header>Modal Header</Modal.Header>
-      <Modal.Content image>
+      <ModalHeader>Modal Header</ModalHeader>
+      <ModalContent image>
         <Image size='medium' src='/images/wireframe/image.png' wrapped />
-        <Modal.Description>
+        <ModalDescription>
           <p>
             This is an example of expanded content that will cause the modal's
             dimmer to scroll.
@@ -49,13 +58,13 @@ function ModalScrollingExample() {
             style={{ marginBottom: 10 }}
           />
           <Image src='/images/wireframe/paragraph.png' />
-        </Modal.Description>
-      </Modal.Content>
-      <Modal.Actions>
+        </ModalDescription>
+      </ModalContent>
+      <ModalActions>
         <Button primary onClick={() => setOpen(false)}>
           Proceed <Icon name='right chevron' />
         </Button>
-      </Modal.Actions>
+      </ModalActions>
     </Modal>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js
index 0913fc788d..54002a2a12 100644
--- a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js
+++ b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js
@@ -1,5 +1,14 @@
 import React from 'react'
-import { Button, Icon, Image, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalDescription,
+  ModalContent,
+  ModalActions,
+  Button,
+  Icon,
+  Image,
+  Modal,
+} from 'semantic-ui-react'
 
 const ModalExampleScrollingContent = () => {
   const [open, setOpen] = React.useState(false)
@@ -11,11 +20,11 @@ const ModalExampleScrollingContent = () => {
       onOpen={() => setOpen(true)}
       trigger={<Button>Scrolling Content Modal</Button>}
     >
-      <Modal.Header>Profile Picture</Modal.Header>
-      <Modal.Content image scrolling>
+      <ModalHeader>Profile Picture</ModalHeader>
+      <ModalContent image scrolling>
         <Image size='medium' src='/images/wireframe/image.png' wrapped />
 
-        <Modal.Description>
+        <ModalDescription>
           <p>
             This is an example of expanded content that will cause the modal's
             dimmer to scroll.
@@ -50,13 +59,13 @@ const ModalExampleScrollingContent = () => {
             style={{ marginBottom: 10 }}
           />
           <Image src='/images/wireframe/paragraph.png' />
-        </Modal.Description>
-      </Modal.Content>
-      <Modal.Actions>
+        </ModalDescription>
+      </ModalContent>
+      <ModalActions>
         <Button onClick={() => setOpen(false)} primary>
           Proceed <Icon name='chevron right' />
         </Button>
-      </Modal.Actions>
+      </ModalActions>
     </Modal>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js b/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js
index 3073021eaa..6227224e82 100644
--- a/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js
+++ b/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Button, Icon, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalContent,
+  ModalActions,
+  Button,
+  Icon,
+  Modal,
+} from 'semantic-ui-react'
 
 function exampleReducer(state, action) {
   switch (action.type) {
@@ -43,18 +50,18 @@ const ModalExampleSize = () => {
         open={open}
         onClose={() => dispatch({ type: 'close' })}
       >
-        <Modal.Header>Delete Your Account</Modal.Header>
-        <Modal.Content>
+        <ModalHeader>Delete Your Account</ModalHeader>
+        <ModalContent>
           <p>Are you sure you want to delete your account</p>
-        </Modal.Content>
-        <Modal.Actions>
+        </ModalContent>
+        <ModalActions>
           <Button negative onClick={() => dispatch({ type: 'close' })}>
             No
           </Button>
           <Button positive onClick={() => dispatch({ type: 'close' })}>
             Yes
           </Button>
-        </Modal.Actions>
+        </ModalActions>
       </Modal>
     </>
   )
diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js b/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js
index b1f04faa8c..b4beec4d18 100644
--- a/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js
+++ b/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Button, Modal } from 'semantic-ui-react'
+import {
+  ModalHeader,
+  ModalDescription,
+  ModalContent,
+  ModalActions,
+  Button,
+  Modal,
+} from 'semantic-ui-react'
 
 function ModalExampleTopAligned() {
   const [open, setOpen] = React.useState(false)
@@ -12,15 +19,15 @@ function ModalExampleTopAligned() {
       onOpen={() => setOpen(true)}
       trigger={<Button>Show Modal</Button>}
     >
-      <Modal.Header>Thank you!</Modal.Header>
-      <Modal.Content>
-        <Modal.Description>
+      <ModalHeader>Thank you!</ModalHeader>
+      <ModalContent>
+        <ModalDescription>
           Your subscription has been confirmed
-        </Modal.Description>
-      </Modal.Content>
-      <Modal.Actions>
+        </ModalDescription>
+      </ModalContent>
+      <ModalActions>
         <Button onClick={() => setOpen(false)}>OK</Button>
-      </Modal.Actions>
+      </ModalActions>
     </Modal>
   )
 }
diff --git a/docs/src/examples/modules/Modal/Variations/index.js b/docs/src/examples/modules/Modal/Variations/index.js
index 928f4c97a3..64a8f71759 100644
--- a/docs/src/examples/modules/Modal/Variations/index.js
+++ b/docs/src/examples/modules/Modal/Variations/index.js
@@ -31,8 +31,8 @@ const ModalVariationsExamples = () => (
       examplePath='modules/Modal/Variations/ModalExampleScrolling'
     >
       <Message warning>
-        <code>&lt;Modal.Content image /&gt;</code> requires an image with
-        wrapped markup: <code>&lt;Image wrapped /&gt; </code>
+        <code>&lt;ModalContent image /&gt;</code> requires an image with wrapped
+        markup: <code>&lt;Image wrapped /&gt; </code>
       </Message>
     </ComponentExample>
   </ExampleSection>
diff --git a/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js
index 8d59a456f4..058e735bda 100644
--- a/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js
+++ b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js
@@ -1,26 +1,36 @@
 import React from 'react'
-import { Popup, Card, Image, Rating } from 'semantic-ui-react'
+import {
+  CardHeader,
+  CardDescription,
+  CardContent,
+  PopupHeader,
+  PopupContent,
+  Popup,
+  Card,
+  Image,
+  Rating,
+} from 'semantic-ui-react'
 
 const PopupExampleTrigger = () => (
   <Popup
     trigger={
       <Card>
         <Image src='/images/movies/totoro-horizontal.jpg' />
-        <Card.Content>
-          <Card.Header>My Neighbor Totoro</Card.Header>
-          <Card.Description>
+        <CardContent>
+          <CardHeader>My Neighbor Totoro</CardHeader>
+          <CardDescription>
             Two sisters move to the country with their father in order to be
             closer to their hospitalized mother, and discover the surrounding
             trees are inhabited by magical spirits.
-          </Card.Description>
-        </Card.Content>
+          </CardDescription>
+        </CardContent>
       </Card>
     }
   >
-    <Popup.Header>User Rating</Popup.Header>
-    <Popup.Content>
+    <PopupHeader>User Rating</PopupHeader>
+    <PopupContent>
       <Rating icon='star' defaultRating={3} maxRating={4} />
-    </Popup.Content>
+    </PopupContent>
   </Popup>
 )
 
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js
index 28e19b1d95..2d933bff4b 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button, Grid, Input, Popup } from 'semantic-ui-react'
+import { GridColumn, Button, Grid, Input, Popup } from 'semantic-ui-react'
 
 const PopupExampleActions = () => (
   <Grid columns={1}>
-    <Grid.Column>
+    <GridColumn>
       <Popup
         trigger={<Button icon='add' content='Add a friend' />}
         content='Sends an email invite to a friend.'
@@ -23,15 +23,15 @@ const PopupExampleActions = () => (
         content='You may search by genre, header, year and actors'
         on='focus'
       />
-    </Grid.Column>
-    <Grid.Column>
+    </GridColumn>
+    <GridColumn>
       <Popup
         trigger={<Button>Click me or Hover me</Button>}
         header='Movie Search'
         content='Multiple events can trigger a popup'
         on={['hover', 'click']}
       />
-    </Grid.Column>
+    </GridColumn>
   </Grid>
 )
 
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js
index bb60a4a171..de514eefee 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Button, Grid, Header, Popup, Segment } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Button,
+  Grid,
+  Header,
+  Popup,
+  Segment,
+} from 'semantic-ui-react'
 
 const timeoutLength = 2500
 
@@ -22,7 +29,7 @@ class PopupExampleControlled extends React.Component {
   render() {
     return (
       <Grid>
-        <Grid.Column width={8}>
+        <GridColumn width={8}>
           <Popup
             trigger={<Button content='Open controlled popup' />}
             content={`This message will self-destruct in ${
@@ -34,13 +41,13 @@ class PopupExampleControlled extends React.Component {
             onOpen={this.handleOpen}
             position='top right'
           />
-        </Grid.Column>
-        <Grid.Column width={8}>
+        </GridColumn>
+        <GridColumn width={8}>
           <Header>State</Header>
           <Segment secondary>
             <pre>{JSON.stringify(this.state, null, 2)}</pre>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js
index c0bbebc02f..363ab688ec 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Button, Checkbox, Divider, Grid, Popup } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Button,
+  Checkbox,
+  Divider,
+  Grid,
+  Popup,
+} from 'semantic-ui-react'
 
 const PopupExampleEventsEnabled = () => {
   const [eventsEnabled, setEventsEnabled] = React.useState(true)
@@ -7,7 +14,7 @@ const PopupExampleEventsEnabled = () => {
 
   return (
     <Grid columns={2}>
-      <Grid.Column>
+      <GridColumn>
         <Checkbox
           checked={open}
           label={{ children: <code>open</code> }}
@@ -19,9 +26,9 @@ const PopupExampleEventsEnabled = () => {
           label={{ children: <code>eventsEnabled</code> }}
           onChange={(e, data) => setEventsEnabled(data.checked)}
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column>
+      <GridColumn>
         <Popup
           content='Hello'
           eventsEnabled={eventsEnabled}
@@ -31,7 +38,7 @@ const PopupExampleEventsEnabled = () => {
           open={open}
           trigger={<Button content='A trigger' />}
         />
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleNested.js b/docs/src/examples/modules/Popup/Usage/PopupExampleNested.js
index 50ec7b5a94..a584096016 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleNested.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleNested.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Button, Grid, Popup } from 'semantic-ui-react'
+import { GridColumn, Button, Grid, Popup } from 'semantic-ui-react'
 
 const PopupExampleNested = () => (
   <Popup wide trigger={<Button content='Are you the one?' />} on='click'>
     <Grid divided columns='equal'>
-      <Grid.Column>
+      <GridColumn>
         <Popup
           trigger={<Button color='blue' content='Blue Pill' fluid />}
           content='The story ends. You wake up in your bed and believe whatever you want to believe.'
@@ -12,8 +12,8 @@ const PopupExampleNested = () => (
           size='tiny'
           inverted
         />
-      </Grid.Column>
-      <Grid.Column>
+      </GridColumn>
+      <GridColumn>
         <Popup
           trigger={<Button color='red' content='Red Pill' fluid />}
           content='Stay in Wonderland, and I show you how deep the rabbit hole goes.'
@@ -21,7 +21,7 @@ const PopupExampleNested = () => (
           size='tiny'
           inverted
         />
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   </Popup>
 )
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js b/docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js
index 61cfe77d7b..8c84d17c0b 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js
@@ -1,6 +1,14 @@
 import faker from 'faker'
 import React from 'react'
-import { Button, Header, Placeholder, Popup } from 'semantic-ui-react'
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  PlaceholderHeader,
+  Button,
+  Header,
+  Placeholder,
+  Popup,
+} from 'semantic-ui-react'
 
 const PopupExamplePopperDependencies = () => {
   const [data, setData] = React.useState(null)
@@ -30,14 +38,14 @@ const PopupExamplePopperDependencies = () => {
     >
       {data === null ? (
         <Placeholder style={{ minWidth: '200px' }}>
-          <Placeholder.Header>
-            <Placeholder.Line />
-            <Placeholder.Line />
-          </Placeholder.Header>
-          <Placeholder.Paragraph>
-            <Placeholder.Line length='medium' />
-            <Placeholder.Line length='short' />
-          </Placeholder.Paragraph>
+          <PlaceholderHeader>
+            <PlaceholderLine />
+            <PlaceholderLine />
+          </PlaceholderHeader>
+          <PlaceholderParagraph>
+            <PlaceholderLine length='medium' />
+            <PlaceholderLine length='short' />
+          </PlaceholderParagraph>
         </Placeholder>
       ) : (
         <>
diff --git a/docs/src/examples/modules/Popup/Usage/index.js b/docs/src/examples/modules/Popup/Usage/index.js
index 0ddab367c4..b10d8c967d 100644
--- a/docs/src/examples/modules/Popup/Usage/index.js
+++ b/docs/src/examples/modules/Popup/Usage/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Message } from 'semantic-ui-react'
+import { MessageItem, MessageList, Button, Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -25,18 +25,18 @@ const PopupUsageExamples = () => (
           . The basic offset accepts an array with two numbers in the form{' '}
           <code>[skidding, distance].</code>
         </p>
-        <Message.List>
-          <Message.Item>
+        <MessageList>
+          <MessageItem>
             <code>skidding</code> displaces the <code>Popup</code> along the
             reference element
-          </Message.Item>
-          <Message.Item>
+          </MessageItem>
+          <MessageItem>
             <code>distance</code> displaces the <code>Popup</code> away from, or
             toward, the reference element in the direction of its placement. A
             positive number displaces it further away, while a negative number
             lets it overlap the reference
-          </Message.Item>
-        </Message.List>
+          </MessageItem>
+        </MessageList>
       </Message>
       <Button
         content='Popper.JS: offset'
diff --git a/docs/src/examples/modules/Popup/Variations/PopupExampleFlowing.js b/docs/src/examples/modules/Popup/Variations/PopupExampleFlowing.js
index 9985553b17..c93a0bd28b 100644
--- a/docs/src/examples/modules/Popup/Variations/PopupExampleFlowing.js
+++ b/docs/src/examples/modules/Popup/Variations/PopupExampleFlowing.js
@@ -1,30 +1,30 @@
 import React from 'react'
-import { Header, Button, Popup, Grid } from 'semantic-ui-react'
+import { GridColumn, Header, Button, Popup, Grid } from 'semantic-ui-react'
 
 const PopupExampleFlowing = () => (
   <Popup trigger={<Button>Show flowing popup</Button>} flowing hoverable>
     <Grid centered divided columns={3}>
-      <Grid.Column textAlign='center'>
+      <GridColumn textAlign='center'>
         <Header as='h4'>Basic Plan</Header>
         <p>
           <b>2</b> projects, $10 a month
         </p>
         <Button>Choose</Button>
-      </Grid.Column>
-      <Grid.Column textAlign='center'>
+      </GridColumn>
+      <GridColumn textAlign='center'>
         <Header as='h4'>Business Plan</Header>
         <p>
           <b>5</b> projects, $20 a month
         </p>
         <Button>Choose</Button>
-      </Grid.Column>
-      <Grid.Column textAlign='center'>
+      </GridColumn>
+      <GridColumn textAlign='center'>
         <Header as='h4'>Premium Plan</Header>
         <p>
           <b>8</b> projects, $25 a month
         </p>
         <Button>Choose</Button>
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   </Popup>
 )
diff --git a/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js b/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js
index db0173af48..5b9c62f4c6 100644
--- a/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js
+++ b/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js
@@ -1,70 +1,70 @@
 import React from 'react'
-import { Icon, Popup, Grid } from 'semantic-ui-react'
+import { GridRow, GridColumn, Icon, Popup, Grid } from 'semantic-ui-react'
 
 const PopupExamplePosition = () => (
   <Grid columns={3} style={{ width: '600px' }}>
-    <Grid.Row>
-      <Grid.Column>
+    <GridRow>
+      <GridColumn>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the top left'
           position='top left'
         />
-      </Grid.Column>
-      <Grid.Column textAlign='center'>
+      </GridColumn>
+      <GridColumn textAlign='center'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the top center'
           position='top center'
         />
-      </Grid.Column>
-      <Grid.Column textAlign='right'>
+      </GridColumn>
+      <GridColumn textAlign='right'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the top right'
           position='top right'
         />
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column floated='left'>
+      </GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn floated='left'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the left center'
           position='left center'
         />
-      </Grid.Column>
-      <Grid.Column floated='right' textAlign='right'>
+      </GridColumn>
+      <GridColumn floated='right' textAlign='right'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the right center'
           position='right center'
         />
-      </Grid.Column>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Column>
+      </GridColumn>
+    </GridRow>
+    <GridRow>
+      <GridColumn>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the bottom left'
           position='bottom left'
         />
-      </Grid.Column>
-      <Grid.Column textAlign='center'>
+      </GridColumn>
+      <GridColumn textAlign='center'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the bottom center'
           position='bottom center'
         />
-      </Grid.Column>
-      <Grid.Column textAlign='right'>
+      </GridColumn>
+      <GridColumn textAlign='right'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the bottom right'
           position='bottom right'
         />
-      </Grid.Column>
-    </Grid.Row>
+      </GridColumn>
+    </GridRow>
   </Grid>
 )
 
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
index ed6e7cf7e2..8b4eacb284 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header, Segment } from 'semantic-ui-react'
+import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const initialState = { isLoading: false, results: [], value: '' }
 
@@ -62,7 +62,7 @@ export default class SearchExampleCategory extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={8}>
+        <GridColumn width={8}>
           <Search
             category
             loading={isLoading}
@@ -73,8 +73,8 @@ export default class SearchExampleCategory extends Component {
             results={results}
             value={value}
           />
-        </Grid.Column>
-        <Grid.Column width={8}>
+        </GridColumn>
+        <GridColumn width={8}>
           <Segment>
             <Header>State</Header>
             <pre style={{ overflowX: 'auto' }}>
@@ -85,7 +85,7 @@ export default class SearchExampleCategory extends Component {
               {JSON.stringify(source, null, 2)}
             </pre>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js
index 237370ce89..99ddd7bd66 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js
@@ -2,7 +2,14 @@ import PropTypes from 'prop-types'
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Search,
+  Grid,
+  Header,
+  Segment,
+  Label,
+} from 'semantic-ui-react'
 
 const categoryLayoutRenderer = ({ categoryContent, resultsContent }) => (
   <div>
@@ -90,7 +97,7 @@ export default class SearchExampleCategory extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={8}>
+        <GridColumn width={8}>
           <Search
             category
             categoryLayoutRenderer={categoryLayoutRenderer}
@@ -104,8 +111,8 @@ export default class SearchExampleCategory extends Component {
             results={results}
             value={value}
           />
-        </Grid.Column>
-        <Grid.Column width={8}>
+        </GridColumn>
+        <GridColumn width={8}>
           <Segment>
             <Header>State</Header>
             <pre style={{ overflowX: 'auto' }}>
@@ -116,7 +123,7 @@ export default class SearchExampleCategory extends Component {
               {JSON.stringify(source, null, 2)}
             </pre>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
index 2e61fb7edb..13abd8c540 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React from 'react'
-import { Search, Grid, Header, Segment } from 'semantic-ui-react'
+import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
@@ -64,7 +64,7 @@ function SearchExampleStandard() {
 
   return (
     <Grid>
-      <Grid.Column width={6}>
+      <GridColumn width={6}>
         <Search
           loading={loading}
           placeholder='Search...'
@@ -75,9 +75,9 @@ function SearchExampleStandard() {
           results={results}
           value={value}
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column width={10}>
+      <GridColumn width={10}>
         <Segment>
           <Header>State</Header>
           <pre style={{ overflowX: 'auto' }}>
@@ -88,7 +88,7 @@ function SearchExampleStandard() {
             {JSON.stringify(source, null, 2)}
           </pre>
         </Segment>
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js
index 90d86b34f9..f721defdfd 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js
@@ -1,7 +1,14 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React from 'react'
-import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Search,
+  Grid,
+  Header,
+  Segment,
+  Label,
+} from 'semantic-ui-react'
 
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
@@ -66,7 +73,7 @@ function SearchExampleStandardCustom() {
 
   return (
     <Grid>
-      <Grid.Column width={6}>
+      <GridColumn width={6}>
         <Search
           loading={loading}
           onResultSelect={(e, data) =>
@@ -77,9 +84,9 @@ function SearchExampleStandardCustom() {
           results={results}
           value={value}
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column width={10}>
+      <GridColumn width={10}>
         <Segment>
           <Header>State</Header>
           <pre style={{ overflowX: 'auto' }}>
@@ -90,7 +97,7 @@ function SearchExampleStandardCustom() {
             {JSON.stringify(source, null, 2)}
           </pre>
         </Segment>
-      </Grid.Column>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js
index ac17ad7797..e55aedfbe0 100644
--- a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js
+++ b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header, Segment } from 'semantic-ui-react'
+import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
@@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={6}>
+        <GridColumn width={6}>
           <Search
             aligned='right'
             loading={isLoading}
@@ -49,8 +49,8 @@ export default class SearchExampleStandard extends Component {
             results={results}
             value={value}
           />
-        </Grid.Column>
-        <Grid.Column width={10}>
+        </GridColumn>
+        <GridColumn width={10}>
           <Segment>
             <Header>State</Header>
             <pre style={{ overflowX: 'auto' }}>
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
             </pre>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js
index c918276419..1e6fdaf852 100644
--- a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js
+++ b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header, Segment } from 'semantic-ui-react'
+import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
@@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={6}>
+        <GridColumn width={6}>
           <Search
             fluid
             loading={isLoading}
@@ -49,8 +49,8 @@ export default class SearchExampleStandard extends Component {
             results={results}
             value={value}
           />
-        </Grid.Column>
-        <Grid.Column width={10}>
+        </GridColumn>
+        <GridColumn width={10}>
           <Segment>
             <Header>State</Header>
             <pre style={{ overflowX: 'auto' }}>
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
             </pre>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js
index 8b57ba4763..107094f4c7 100644
--- a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js
+++ b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header, Segment } from 'semantic-ui-react'
+import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
@@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={6}>
+        <GridColumn width={6}>
           <Search
             input={{ icon: 'search', iconPosition: 'left' }}
             loading={isLoading}
@@ -49,8 +49,8 @@ export default class SearchExampleStandard extends Component {
             results={results}
             value={value}
           />
-        </Grid.Column>
-        <Grid.Column width={10}>
+        </GridColumn>
+        <GridColumn width={10}>
           <Segment>
             <Header>State</Header>
             <pre style={{ overflowX: 'auto' }}>
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
             </pre>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js
index 0e054cddfc..a538bee07c 100644
--- a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js
+++ b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js
@@ -1,5 +1,9 @@
 import React from 'react'
 import {
+  SidebarPusher,
+  SidebarPushable,
+  MenuItem,
+  GridColumn,
   Checkbox,
   Grid,
   Header,
@@ -15,16 +19,16 @@ const SidebarExampleMultiple = () => {
 
   return (
     <Grid columns={1}>
-      <Grid.Column>
+      <GridColumn>
         <Checkbox
           checked={visible}
           label={{ children: <code>visible</code> }}
           onChange={(e, data) => setVisible(data.checked)}
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column>
-        <Sidebar.Pushable as={Segment}>
+      <GridColumn>
+        <SidebarPushable as={Segment}>
           <Sidebar
             as={Menu}
             animation='overlay'
@@ -36,18 +40,18 @@ const SidebarExampleMultiple = () => {
             visible={visible}
             width='thin'
           >
-            <Menu.Item as='a'>
+            <MenuItem as='a'>
               <Icon name='home' />
               Home
-            </Menu.Item>
-            <Menu.Item as='a'>
+            </MenuItem>
+            <MenuItem as='a'>
               <Icon name='gamepad' />
               Games
-            </Menu.Item>
-            <Menu.Item as='a'>
+            </MenuItem>
+            <MenuItem as='a'>
               <Icon name='camera' />
               Channels
-            </Menu.Item>
+            </MenuItem>
           </Sidebar>
 
           <Sidebar
@@ -58,23 +62,23 @@ const SidebarExampleMultiple = () => {
             vertical
             visible={visible}
           >
-            <Menu.Item as='a' header>
+            <MenuItem as='a' header>
               File Permissions
-            </Menu.Item>
-            <Menu.Item as='a'>Share on Social</Menu.Item>
-            <Menu.Item as='a'>Share by E-mail</Menu.Item>
-            <Menu.Item as='a'>Edit Permissions</Menu.Item>
-            <Menu.Item as='a'>Delete Permanently</Menu.Item>
+            </MenuItem>
+            <MenuItem as='a'>Share on Social</MenuItem>
+            <MenuItem as='a'>Share by E-mail</MenuItem>
+            <MenuItem as='a'>Edit Permissions</MenuItem>
+            <MenuItem as='a'>Delete Permanently</MenuItem>
           </Sidebar>
 
-          <Sidebar.Pusher>
+          <SidebarPusher>
             <Segment basic>
               <Header as='h3'>Application Content</Header>
               <Image src='/images/wireframe/paragraph.png' />
             </Segment>
-          </Sidebar.Pusher>
-        </Sidebar.Pushable>
-      </Grid.Column>
+          </SidebarPusher>
+        </SidebarPushable>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js
index a46afb31d2..510236d4b4 100644
--- a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js
+++ b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js
@@ -1,5 +1,11 @@
 import React from 'react'
 import {
+  SidebarPusher,
+  SidebarPushable,
+  ButtonGroup,
+  MenuItem,
+  GridRow,
+  GridColumn,
   Button,
   Checkbox,
   Grid,
@@ -19,22 +25,22 @@ const HorizontalSidebar = ({ animation, direction, visible }) => (
     visible={visible}
   >
     <Grid textAlign='center'>
-      <Grid.Row columns={1}>
-        <Grid.Column>
+      <GridRow columns={1}>
+        <GridColumn>
           <Header as='h3'>New Content Awaits</Header>
-        </Grid.Column>
-      </Grid.Row>
-      <Grid.Row columns={3}>
-        <Grid.Column>
+        </GridColumn>
+      </GridRow>
+      <GridRow columns={3}>
+        <GridColumn>
           <Image src='/images/wireframe/media-paragraph.png' />
-        </Grid.Column>
-        <Grid.Column>
+        </GridColumn>
+        <GridColumn>
           <Image src='/images/wireframe/media-paragraph.png' />
-        </Grid.Column>
-        <Grid.Column>
+        </GridColumn>
+        <GridColumn>
           <Image src='/images/wireframe/media-paragraph.png' />
-        </Grid.Column>
-      </Grid.Row>
+        </GridColumn>
+      </GridRow>
     </Grid>
   </Sidebar>
 )
@@ -50,18 +56,18 @@ const VerticalSidebar = ({ animation, direction, visible }) => (
     visible={visible}
     width='thin'
   >
-    <Menu.Item as='a'>
+    <MenuItem as='a'>
       <Icon name='home' />
       Home
-    </Menu.Item>
-    <Menu.Item as='a'>
+    </MenuItem>
+    <MenuItem as='a'>
       <Icon name='gamepad' />
       Games
-    </Menu.Item>
-    <Menu.Item as='a'>
+    </MenuItem>
+    <MenuItem as='a'>
       <Icon name='camera' />
       Channels
-    </Menu.Item>
+    </MenuItem>
   </Sidebar>
 )
 
@@ -101,7 +107,7 @@ function SidebarExampleTransitions() {
       />
 
       <Header as='h5'>Direction</Header>
-      <Button.Group>
+      <ButtonGroup>
         <Button
           active={direction === 'left'}
           onClick={() =>
@@ -134,7 +140,7 @@ function SidebarExampleTransitions() {
         >
           Bottom
         </Button>
-      </Button.Group>
+      </ButtonGroup>
 
       <Header as='h5'>All Direction Animations</Header>
       <Button
@@ -185,7 +191,7 @@ function SidebarExampleTransitions() {
         Slide Out
       </Button>
 
-      <Sidebar.Pushable as={Segment} style={{ overflow: 'hidden' }}>
+      <SidebarPushable as={Segment} style={{ overflow: 'hidden' }}>
         {vertical && (
           <HorizontalSidebar
             animation={animation}
@@ -201,13 +207,13 @@ function SidebarExampleTransitions() {
           />
         )}
 
-        <Sidebar.Pusher dimmed={dimmed && visible}>
+        <SidebarPusher dimmed={dimmed && visible}>
           <Segment basic>
             <Header as='h3'>Application Content</Header>
             <Image src='/images/wireframe/paragraph.png' />
           </Segment>
-        </Sidebar.Pusher>
-      </Sidebar.Pushable>
+        </SidebarPusher>
+      </SidebarPushable>
     </div>
   )
 }
diff --git a/docs/src/examples/modules/Sidebar/Examples/index.js b/docs/src/examples/modules/Sidebar/Examples/index.js
index e8ca5c0fae..0ffcced083 100644
--- a/docs/src/examples/modules/Sidebar/Examples/index.js
+++ b/docs/src/examples/modules/Sidebar/Examples/index.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+  TableRow,
+  TableHeaderCell,
+  TableHeader,
+  TableCell,
+  TableBody,
+  Icon,
+  Table,
+} from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -15,88 +23,88 @@ const SidebarExamplesExamples = () => (
       examplePath='modules/Sidebar/Examples/SidebarExampleTransitions'
     >
       <Table celled definition>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell />
-            <Table.HeaderCell>Multiple Visible</Table.HeaderCell>
-            <Table.HeaderCell>Supports Vertical Sidebars</Table.HeaderCell>
-            <Table.HeaderCell>Supports Horizontal Sidebars</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Overlay</Table.Cell>
-            <Table.Cell>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell />
+            <TableHeaderCell>Multiple Visible</TableHeaderCell>
+            <TableHeaderCell>Supports Vertical Sidebars</TableHeaderCell>
+            <TableHeaderCell>Supports Horizontal Sidebars</TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Overlay</TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Push</Table.Cell>
-            <Table.Cell>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Push</TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Scale Down</Table.Cell>
-            <Table.Cell>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Scale Down</TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='red' name='cancel' />
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Uncover</Table.Cell>
-            <Table.Cell>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Uncover</TableCell>
+            <TableCell>
               <Icon color='red' name='cancel' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='red' name='cancel' />
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Slide Along</Table.Cell>
-            <Table.Cell>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Slide Along</TableCell>
+            <TableCell>
               <Icon color='red' name='cancel' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='red' name='cancel' />
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Slide Out</Table.Cell>
-            <Table.Cell>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Slide Out</TableCell>
+            <TableCell>
               <Icon color='red' name='cancel' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='green' name='check' />
-            </Table.Cell>
-            <Table.Cell>
+            </TableCell>
+            <TableCell>
               <Icon color='red' name='cancel' />
-            </Table.Cell>
-          </Table.Row>
-        </Table.Body>
+            </TableCell>
+          </TableRow>
+        </TableBody>
       </Table>
     </ComponentExample>
     <ComponentExample
diff --git a/docs/src/examples/modules/Sidebar/Spec/SidebarAndModal.js b/docs/src/examples/modules/Sidebar/Spec/SidebarAndModal.js
index fa1785ae7f..ce36f228f6 100644
--- a/docs/src/examples/modules/Sidebar/Spec/SidebarAndModal.js
+++ b/docs/src/examples/modules/Sidebar/Spec/SidebarAndModal.js
@@ -1,5 +1,9 @@
 import React from 'react'
 import {
+  SidebarPusher,
+  SidebarPushable,
+  MenuItem,
+  GridColumn,
   Button,
   Grid,
   Header,
@@ -22,10 +26,10 @@ const SidebarAndModal = () => {
         Toggle
       </Button>
       <Grid columns={1}>
-        <Grid.Column>Hello world!</Grid.Column>
+        <GridColumn>Hello world!</GridColumn>
 
-        <Grid.Column>
-          <Sidebar.Pushable as={Segment}>
+        <GridColumn>
+          <SidebarPushable as={Segment}>
             <Sidebar
               as={Menu}
               animation='overlay'
@@ -37,21 +41,21 @@ const SidebarAndModal = () => {
               visible={visible}
               width='thin'
             >
-              <Menu.Item as='a' data-tid='sidebar-home'>
+              <MenuItem as='a' data-tid='sidebar-home'>
                 <Icon name='home' />
                 Home
-              </Menu.Item>
-              <Menu.Item as='a'>
+              </MenuItem>
+              <MenuItem as='a'>
                 <Icon name='gamepad' />
                 Games
-              </Menu.Item>
-              <Menu.Item as='a'>
+              </MenuItem>
+              <MenuItem as='a'>
                 <Icon name='camera' />
                 Channels
-              </Menu.Item>
+              </MenuItem>
             </Sidebar>
 
-            <Sidebar.Pusher>
+            <SidebarPusher>
               <Segment basic style={{ minHeight: '50vh' }}>
                 <Header as='h3'>Application Content</Header>
                 <Modal
@@ -74,9 +78,9 @@ const SidebarAndModal = () => {
                   ]}
                 />
               </Segment>
-            </Sidebar.Pusher>
-          </Sidebar.Pushable>
-        </Grid.Column>
+            </SidebarPusher>
+          </SidebarPushable>
+        </GridColumn>
       </Grid>
     </>
   )
diff --git a/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js b/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js
index 359abc77ee..ec6d1ad8a4 100644
--- a/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js
+++ b/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js
@@ -1,5 +1,9 @@
 import React from 'react'
 import {
+  SidebarPusher,
+  SidebarPushable,
+  MenuItem,
+  GridColumn,
   Checkbox,
   Grid,
   Header,
@@ -15,16 +19,16 @@ const SidebarExampleDimmed = () => {
 
   return (
     <Grid columns={1}>
-      <Grid.Column>
+      <GridColumn>
         <Checkbox
           checked={visible}
           label={{ children: <code>visible</code> }}
           onChange={(e, data) => setVisible(data.checked)}
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column>
-        <Sidebar.Pushable as={Segment}>
+      <GridColumn>
+        <SidebarPushable as={Segment}>
           <Sidebar
             as={Menu}
             animation='overlay'
@@ -35,28 +39,28 @@ const SidebarExampleDimmed = () => {
             visible={visible}
             width='thin'
           >
-            <Menu.Item as='a'>
+            <MenuItem as='a'>
               <Icon name='home' />
               Home
-            </Menu.Item>
-            <Menu.Item as='a'>
+            </MenuItem>
+            <MenuItem as='a'>
               <Icon name='gamepad' />
               Games
-            </Menu.Item>
-            <Menu.Item as='a'>
+            </MenuItem>
+            <MenuItem as='a'>
               <Icon name='camera' />
               Channels
-            </Menu.Item>
+            </MenuItem>
           </Sidebar>
 
-          <Sidebar.Pusher dimmed={visible}>
+          <SidebarPusher dimmed={visible}>
             <Segment basic>
               <Header as='h3'>Application Content</Header>
               <Image src='/images/wireframe/paragraph.png' />
             </Segment>
-          </Sidebar.Pusher>
-        </Sidebar.Pushable>
-      </Grid.Column>
+          </SidebarPusher>
+        </SidebarPushable>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js b/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js
index b297998058..7f19942d6c 100644
--- a/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js
+++ b/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js
@@ -1,8 +1,18 @@
 import React from 'react'
-import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'
+import {
+  SidebarPusher,
+  SidebarPushable,
+  MenuItem,
+  Header,
+  Icon,
+  Image,
+  Menu,
+  Segment,
+  Sidebar,
+} from 'semantic-ui-react'
 
 const SidebarExampleVisible = () => (
-  <Sidebar.Pushable as={Segment}>
+  <SidebarPushable as={Segment}>
     <Sidebar
       as={Menu}
       animation='overlay'
@@ -12,27 +22,27 @@ const SidebarExampleVisible = () => (
       visible
       width='thin'
     >
-      <Menu.Item as='a'>
+      <MenuItem as='a'>
         <Icon name='home' />
         Home
-      </Menu.Item>
-      <Menu.Item as='a'>
+      </MenuItem>
+      <MenuItem as='a'>
         <Icon name='gamepad' />
         Games
-      </Menu.Item>
-      <Menu.Item as='a'>
+      </MenuItem>
+      <MenuItem as='a'>
         <Icon name='camera' />
         Channels
-      </Menu.Item>
+      </MenuItem>
     </Sidebar>
 
-    <Sidebar.Pusher>
+    <SidebarPusher>
       <Segment basic>
         <Header as='h3'>Application Content</Header>
         <Image src='/images/wireframe/paragraph.png' />
       </Segment>
-    </Sidebar.Pusher>
-  </Sidebar.Pushable>
+    </SidebarPusher>
+  </SidebarPushable>
 )
 
 export default SidebarExampleVisible
diff --git a/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js b/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js
index b6ae792b58..660cb75292 100644
--- a/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js
+++ b/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js
@@ -1,5 +1,9 @@
 import React from 'react'
 import {
+  SidebarPusher,
+  SidebarPushable,
+  MenuItem,
+  GridColumn,
   Checkbox,
   Grid,
   Header,
@@ -15,16 +19,16 @@ const SidebarExampleSidebar = () => {
 
   return (
     <Grid columns={1}>
-      <Grid.Column>
+      <GridColumn>
         <Checkbox
           checked={visible}
           label={{ children: <code>visible</code> }}
           onChange={(e, data) => setVisible(data.checked)}
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column>
-        <Sidebar.Pushable as={Segment}>
+      <GridColumn>
+        <SidebarPushable as={Segment}>
           <Sidebar
             as={Menu}
             animation='overlay'
@@ -35,28 +39,28 @@ const SidebarExampleSidebar = () => {
             visible={visible}
             width='thin'
           >
-            <Menu.Item as='a'>
+            <MenuItem as='a'>
               <Icon name='home' />
               Home
-            </Menu.Item>
-            <Menu.Item as='a'>
+            </MenuItem>
+            <MenuItem as='a'>
               <Icon name='gamepad' />
               Games
-            </Menu.Item>
-            <Menu.Item as='a'>
+            </MenuItem>
+            <MenuItem as='a'>
               <Icon name='camera' />
               Channels
-            </Menu.Item>
+            </MenuItem>
           </Sidebar>
 
-          <Sidebar.Pusher>
+          <SidebarPusher>
             <Segment basic>
               <Header as='h3'>Application Content</Header>
               <Image src='/images/wireframe/paragraph.png' />
             </Segment>
-          </Sidebar.Pusher>
-        </Sidebar.Pushable>
-      </Grid.Column>
+          </SidebarPusher>
+        </SidebarPushable>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js
index 61179ec549..21788a0f14 100644
--- a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js
+++ b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js
@@ -1,5 +1,10 @@
 import React from 'react'
 import {
+  SidebarPusher,
+  SidebarPushable,
+  SegmentGroup,
+  MenuItem,
+  GridColumn,
   Button,
   Checkbox,
   Grid,
@@ -36,16 +41,16 @@ const SidebarExampleCallback = () => {
 
   return (
     <Grid>
-      <Grid.Column width={16}>
+      <GridColumn width={16}>
         <Checkbox
           checked={visible}
           label={{ children: <code>visible</code> }}
           onChange={(e, data) => setVisible(data.checked)}
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column width={8}>
-        <Sidebar.Pushable as={Segment}>
+      <GridColumn width={8}>
+        <SidebarPushable as={Segment}>
           <Sidebar
             as={Menu}
             animation='overlay'
@@ -62,22 +67,22 @@ const SidebarExampleCallback = () => {
             visible={visible}
             width='thin'
           >
-            <Menu.Item as='a'>Home</Menu.Item>
-            <Menu.Item as='a'>Games</Menu.Item>
-            <Menu.Item as='a'>Channels</Menu.Item>
+            <MenuItem as='a'>Home</MenuItem>
+            <MenuItem as='a'>Games</MenuItem>
+            <MenuItem as='a'>Channels</MenuItem>
           </Sidebar>
 
-          <Sidebar.Pusher>
+          <SidebarPusher>
             <Segment basic>
               <Header as='h3'>Application Content</Header>
               <Image src='/images/wireframe/paragraph.png' />
             </Segment>
-          </Sidebar.Pusher>
-        </Sidebar.Pushable>
-      </Grid.Column>
+          </SidebarPusher>
+        </SidebarPushable>
+      </GridColumn>
 
-      <Grid.Column width={8}>
-        <Segment.Group>
+      <GridColumn width={8}>
+        <SegmentGroup>
           <Segment>
             <Button
               compact
@@ -96,8 +101,8 @@ const SidebarExampleCallback = () => {
               ))}
             </pre>
           </Segment>
-        </Segment.Group>
-      </Grid.Column>
+        </SegmentGroup>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
index d5448d3d7c..2c63bed43f 100644
--- a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
+++ b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
@@ -1,5 +1,9 @@
 import React from 'react'
 import {
+  SidebarPushable,
+  SegmentGroup,
+  MenuItem,
+  GridColumn,
   Checkbox,
   Grid,
   Header,
@@ -15,16 +19,16 @@ const SidebarExampleTarget = () => {
 
   return (
     <Grid columns={1}>
-      <Grid.Column>
+      <GridColumn>
         <Checkbox
           checked={visible}
           label={{ children: <code>visible</code> }}
           onChange={(e, data) => setVisible(data.checked)}
         />
-      </Grid.Column>
+      </GridColumn>
 
-      <Grid.Column>
-        <Sidebar.Pushable as={Segment.Group} raised>
+      <GridColumn>
+        <SidebarPushable as={SegmentGroup} raised>
           <Sidebar
             as={Menu}
             animation='overlay'
@@ -36,9 +40,9 @@ const SidebarExampleTarget = () => {
             visible={visible}
             width='thin'
           >
-            <Menu.Item as='a'>Home</Menu.Item>
-            <Menu.Item as='a'>Games</Menu.Item>
-            <Menu.Item as='a'>Channels</Menu.Item>
+            <MenuItem as='a'>Home</MenuItem>
+            <MenuItem as='a'>Games</MenuItem>
+            <MenuItem as='a'>Channels</MenuItem>
           </Sidebar>
 
           <Segment secondary ref={segmentRef}>
@@ -50,8 +54,8 @@ const SidebarExampleTarget = () => {
             <Header as='h3'>Application Content</Header>
             <Image src='/images/wireframe/paragraph.png' />
           </Segment>
-        </Sidebar.Pushable>
-      </Grid.Column>
+        </SidebarPushable>
+      </GridColumn>
     </Grid>
   )
 }
diff --git a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
index 20fb405486..9911eeb99b 100644
--- a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
+++ b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
@@ -1,6 +1,14 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
-import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Grid,
+  Header,
+  Image,
+  Rail,
+  Segment,
+  Sticky,
+} from 'semantic-ui-react'
 
 const Placeholder = () => <Image src='/images/wireframe/paragraph.png' />
 
@@ -10,7 +18,7 @@ export default class StickyExampleAdjacentContext extends Component {
   render() {
     return (
       <Grid centered columns={3}>
-        <Grid.Column>
+        <GridColumn>
           <Segment ref={this.contextRef}>
             {_.times(10, (i) => (
               <Placeholder key={i} />
@@ -34,7 +42,7 @@ export default class StickyExampleAdjacentContext extends Component {
               </Sticky>
             </Rail>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
index 113bd01aff..cf2e52d650 100644
--- a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
+++ b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
@@ -1,6 +1,14 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
-import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Grid,
+  Header,
+  Image,
+  Rail,
+  Segment,
+  Sticky,
+} from 'semantic-ui-react'
 
 const Placeholder = () => <Image src='/images/wireframe/paragraph.png' />
 
@@ -10,7 +18,7 @@ export default class StickyExamplePushing extends Component {
   render() {
     return (
       <Grid centered columns={3}>
-        <Grid.Column>
+        <GridColumn>
           <Segment ref={this.contextRef}>
             {_.times(10, (i) => (
               <Placeholder key={i} />
@@ -34,7 +42,7 @@ export default class StickyExamplePushing extends Component {
               </Sticky>
             </Rail>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js b/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js
index ad0b791c68..520991db25 100644
--- a/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js
+++ b/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js
@@ -1,5 +1,13 @@
 import React, { Component, createRef } from 'react'
-import { Image, Input, Menu, Segment, Sticky } from 'semantic-ui-react'
+import {
+  MenuMenu,
+  MenuItem,
+  Image,
+  Input,
+  Menu,
+  Segment,
+  Sticky,
+} from 'semantic-ui-react'
 import _ from 'lodash'
 
 export default class StickyExampleAboveContent extends Component {
@@ -14,17 +22,17 @@ export default class StickyExampleAboveContent extends Component {
             tabular
             style={{ backgroundColor: '#fff', paddingTop: '1em' }}
           >
-            <Menu.Item as='a' active name='bio' />
-            <Menu.Item as='a' active={false} name='photos' />
-            <Menu.Menu position='right'>
-              <Menu.Item>
+            <MenuItem as='a' active name='bio' />
+            <MenuItem as='a' active={false} name='photos' />
+            <MenuMenu position='right'>
+              <MenuItem>
                 <Input
                   transparent
                   icon={{ name: 'search', link: true }}
                   placeholder='Search users...'
                 />
-              </Menu.Item>
-            </Menu.Menu>
+              </MenuItem>
+            </MenuMenu>
           </Menu>
         </Sticky>
         <Segment attached='bottom'>
diff --git a/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js b/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
index bc6d312b98..2fe1c20dcc 100644
--- a/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
+++ b/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
@@ -1,6 +1,14 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
-import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Grid,
+  Header,
+  Image,
+  Rail,
+  Segment,
+  Sticky,
+} from 'semantic-ui-react'
 
 const Placeholder = () => <Image src='/images/wireframe/paragraph.png' />
 
@@ -10,7 +18,7 @@ export default class StickyExampleOffset extends Component {
   render() {
     return (
       <Grid centered columns={3}>
-        <Grid.Column>
+        <GridColumn>
           <Segment ref={this.contextRef}>
             {_.times(10, (i) => (
               <Placeholder key={i} />
@@ -39,7 +47,7 @@ export default class StickyExampleOffset extends Component {
               </Sticky>
             </Rail>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js b/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
index de20e55745..9c20a5f3a4 100644
--- a/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
+++ b/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
 import {
+  GridColumn,
   Checkbox,
   Grid,
   Header,
@@ -24,7 +25,7 @@ export default class StickyExampleActive extends Component {
 
     return (
       <Grid centered columns={3}>
-        <Grid.Column>
+        <GridColumn>
           <Segment ref={this.contextRef}>
             {_.times(10, (i) => (
               <Placeholder key={i} />
@@ -50,7 +51,7 @@ export default class StickyExampleActive extends Component {
               </Sticky>
             </Rail>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js b/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
index 5801139ffe..f5c320dd38 100644
--- a/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
+++ b/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
@@ -1,6 +1,12 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
 import {
+  ItemMeta,
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemContent,
+  GridColumn,
   Grid,
   Header,
   Image,
@@ -19,7 +25,7 @@ export default class StickyExampleOversized extends Component {
   render() {
     return (
       <Grid centered columns={3}>
-        <Grid.Column>
+        <GridColumn>
           <Segment ref={this.contextRef}>
             {_.times(15, (i) => (
               <Placeholder key={i} />
@@ -27,20 +33,20 @@ export default class StickyExampleOversized extends Component {
 
             <Rail position='left'>
               <Sticky context={this.contextRef}>
-                <Item.Group divided>
+                <ItemGroup divided>
                   {_.times(12, (i) => (
                     <Item key={i}>
-                      <Item.Image
+                      <ItemImage
                         size='tiny'
                         src='/images/wireframe/image.png'
                       />
-                      <Item.Content>
-                        <Item.Header as='a'>Followup Article</Item.Header>
-                        <Item.Meta>By Author</Item.Meta>
-                      </Item.Content>
+                      <ItemContent>
+                        <ItemHeader as='a'>Followup Article</ItemHeader>
+                        <ItemMeta>By Author</ItemMeta>
+                      </ItemContent>
                     </Item>
                   ))}
-                </Item.Group>
+                </ItemGroup>
               </Sticky>
             </Rail>
 
@@ -51,7 +57,7 @@ export default class StickyExampleOversized extends Component {
               </Sticky>
             </Rail>
           </Segment>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Sticky/index.js b/docs/src/examples/modules/Sticky/index.js
index 9d376792f9..a745d9c8bb 100644
--- a/docs/src/examples/modules/Sticky/index.js
+++ b/docs/src/examples/modules/Sticky/index.js
@@ -9,8 +9,8 @@ const StickyExamples = () => (
   <div>
     <Message warning>
       <code>Sticky</code> behavior is erratic inside{' '}
-      <code>Sidebar.Pushable</code>. To avoid issues, place <code>Sticky</code>{' '}
-      outside of any <code>Sidebar.Pushable</code> element. See{' '}
+      <code>SidebarPushable</code>. To avoid issues, place <code>Sticky</code>{' '}
+      outside of any <code>SidebarPushable</code> element. See{' '}
       <a href='https://github.com/Semantic-Org/Semantic-UI-React/issues/2897'>
         Semantic-Org/Semantic-UI-React#2897
       </a>{' '}
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js
index cb84fcdb15..4a3d2dd1b1 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached='top'>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached='top'>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached='top'>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached='top'>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached='top'>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached='top'>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js
index 68f163f67d..8e0da269cf 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleBorderless.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleBorderless.js
index c6c8358a1a..61b728d6e7 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleBorderless.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleBorderless.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleColored.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleColored.js
index 6d73b2232c..165ce348c6 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleColored.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleColored.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Divider, Tab } from 'semantic-ui-react'
+import { TabPane, Divider, Tab } from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -20,15 +20,15 @@ const colors = [
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js
index 38943650ec..b2b392de34 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Divider, Tab } from 'semantic-ui-react'
+import { TabPane, Divider, Tab } from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -20,15 +20,15 @@ const colors = [
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js
index 193d95ae2f..2fda7ceb78 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+  { menuItem: 'Tab 1', render: () => <TabPane>Tab 1 Content</TabPane> },
+  { menuItem: 'Tab 2', render: () => <TabPane>Tab 2 Content</TabPane> },
+  { menuItem: 'Tab 3', render: () => <TabPane>Tab 3 Content</TabPane> },
 ]
 
 const TabExampleMenuPositionRight = () => (
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js
index 5fa82af367..8d045923b9 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js
index 1c55497b8c..eee70c3e87 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+  { menuItem: 'Tab 1', render: () => <TabPane>Tab 1 Content</TabPane> },
+  { menuItem: 'Tab 2', render: () => <TabPane>Tab 2 Content</TabPane> },
+  { menuItem: 'Tab 3', render: () => <TabPane>Tab 3 Content</TabPane> },
 ]
 
 const TabExampleVerticalTabular = () => (
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js
index b5aacd59cc..fa495d6934 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+  { menuItem: 'Tab 1', render: () => <TabPane>Tab 1 Content</TabPane> },
+  { menuItem: 'Tab 2', render: () => <TabPane>Tab 2 Content</TabPane> },
+  { menuItem: 'Tab 3', render: () => <TabPane>Tab 3 Content</TabPane> },
 ]
 
 const TabExampleVerticalTabularRight = () => (
diff --git a/docs/src/examples/modules/Tab/States/TabExampleLoading.js b/docs/src/examples/modules/Tab/States/TabExampleLoading.js
index aca8b3fdbf..12955a888c 100644
--- a/docs/src/examples/modules/Tab/States/TabExampleLoading.js
+++ b/docs/src/examples/modules/Tab/States/TabExampleLoading.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane loading>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane loading>Tab 1 Content</TabPane>,
   },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <TabPane>Tab 2 Content</TabPane> },
+  { menuItem: 'Tab 3', render: () => <TabPane>Tab 3 Content</TabPane> },
 ]
 
 const TabExampleLoading = () => <Tab panes={panes} />
diff --git a/docs/src/examples/modules/Tab/Types/TabExampleBasic.js b/docs/src/examples/modules/Tab/Types/TabExampleBasic.js
index eed60d5a25..b33c218ee0 100644
--- a/docs/src/examples/modules/Tab/Types/TabExampleBasic.js
+++ b/docs/src/examples/modules/Tab/Types/TabExampleBasic.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+  { menuItem: 'Tab 1', render: () => <TabPane>Tab 1 Content</TabPane> },
+  { menuItem: 'Tab 2', render: () => <TabPane>Tab 2 Content</TabPane> },
+  { menuItem: 'Tab 3', render: () => <TabPane>Tab 3 Content</TabPane> },
 ]
 
 const TabExampleBasic = () => <Tab panes={panes} />
diff --git a/docs/src/examples/modules/Tab/Types/TabExamplePointing.js b/docs/src/examples/modules/Tab/Types/TabExamplePointing.js
index 329c4ce730..b68e33baf2 100644
--- a/docs/src/examples/modules/Tab/Types/TabExamplePointing.js
+++ b/docs/src/examples/modules/Tab/Types/TabExamplePointing.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/Types/TabExampleSecondary.js b/docs/src/examples/modules/Tab/Types/TabExampleSecondary.js
index 587287117e..b677be0e05 100644
--- a/docs/src/examples/modules/Tab/Types/TabExampleSecondary.js
+++ b/docs/src/examples/modules/Tab/Types/TabExampleSecondary.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/Types/TabExampleSecondaryPointing.js b/docs/src/examples/modules/Tab/Types/TabExampleSecondaryPointing.js
index 5fbde7d42f..45f9c76896 100644
--- a/docs/src/examples/modules/Tab/Types/TabExampleSecondaryPointing.js
+++ b/docs/src/examples/modules/Tab/Types/TabExampleSecondaryPointing.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/Types/TabExampleText.js b/docs/src/examples/modules/Tab/Types/TabExampleText.js
index 7d064eb46b..829e90718f 100644
--- a/docs/src/examples/modules/Tab/Types/TabExampleText.js
+++ b/docs/src/examples/modules/Tab/Types/TabExampleText.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: 'Tab 1',
-    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 1 Content</TabPane>,
   },
   {
     menuItem: 'Tab 2',
-    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 2 Content</TabPane>,
   },
   {
     menuItem: 'Tab 3',
-    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
+    render: () => <TabPane attached={false}>Tab 3 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/Types/index.js b/docs/src/examples/modules/Tab/Types/index.js
index 6ea2dd3508..ad3956539c 100644
--- a/docs/src/examples/modules/Tab/Types/index.js
+++ b/docs/src/examples/modules/Tab/Types/index.js
@@ -1,5 +1,10 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import {
+  MessageItem,
+  MessageList,
+  MessageHeader,
+  Message,
+} from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -7,21 +12,21 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 const TabTypesExamples = () => (
   <ExampleSection title='Types'>
     <Message info>
-      <Message.Header>
+      <MessageHeader>
         Controlling <code>Tab</code> pane re-renders
-      </Message.Header>
-      <Message.List>
-        <Message.Item>
+      </MessageHeader>
+      <MessageList>
+        <MessageItem>
           <code>renderActiveOnly</code> (default) Only the active pane is
           rendered. Switching tabs unmounts the current pane and mounts the new
           pane.
-        </Message.Item>
-        <Message.Item>
+        </MessageItem>
+        <MessageItem>
           <code>renderActiveOnly={'{false}'}</code> All panes are rendered on
           Tab mount. Switching tabs hides the current pane and shows the new
           pane, without unmounting panes.
-        </Message.Item>
-      </Message.List>
+        </MessageItem>
+      </MessageList>
     </Message>
 
     <ComponentExample
diff --git a/docs/src/examples/modules/Tab/Usage/TabExampleActiveIndex.js b/docs/src/examples/modules/Tab/Usage/TabExampleActiveIndex.js
index 9b4a681c37..a91736a77f 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExampleActiveIndex.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExampleActiveIndex.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+  { menuItem: 'Tab 1', render: () => <TabPane>Tab 1 Content</TabPane> },
+  { menuItem: 'Tab 2', render: () => <TabPane>Tab 2 Content</TabPane> },
+  { menuItem: 'Tab 3', render: () => <TabPane>Tab 3 Content</TabPane> },
 ]
 
 class TabExampleActiveIndex extends Component {
diff --git a/docs/src/examples/modules/Tab/Usage/TabExampleCustomMenuItem.js b/docs/src/examples/modules/Tab/Usage/TabExampleCustomMenuItem.js
index f17954319f..cf51c901de 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExampleCustomMenuItem.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExampleCustomMenuItem.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Label, Menu, Tab } from 'semantic-ui-react'
+import { TabPane, MenuItem, Label, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
     menuItem: { key: 'users', icon: 'users', content: 'Users' },
-    render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>,
+    render: () => <TabPane>Tab 1 Content</TabPane>,
   },
   {
     menuItem: (
-      <Menu.Item key='messages'>
+      <MenuItem key='messages'>
         Messages<Label>15</Label>
-      </Menu.Item>
+      </MenuItem>
     ),
-    render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>,
+    render: () => <TabPane>Tab 2 Content</TabPane>,
   },
 ]
 
diff --git a/docs/src/examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js b/docs/src/examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js
index d09b70ecb4..8281af1a70 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
 
 const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+  { menuItem: 'Tab 1', render: () => <TabPane>Tab 1 Content</TabPane> },
+  { menuItem: 'Tab 2', render: () => <TabPane>Tab 2 Content</TabPane> },
+  { menuItem: 'Tab 3', render: () => <TabPane>Tab 3 Content</TabPane> },
 ]
 
 const TabExampleDefaultActiveIndex = () => (
diff --git a/docs/src/examples/modules/Tab/Usage/TabExampleOnTabChange.js b/docs/src/examples/modules/Tab/Usage/TabExampleOnTabChange.js
index c5b0b50330..cbb2384949 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExampleOnTabChange.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExampleOnTabChange.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
-import { Segment, Tab } from 'semantic-ui-react'
+import { TabPane, Segment, Tab } from 'semantic-ui-react'
 
 const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+  { menuItem: 'Tab 1', render: () => <TabPane>Tab 1 Content</TabPane> },
+  { menuItem: 'Tab 2', render: () => <TabPane>Tab 2 Content</TabPane> },
+  { menuItem: 'Tab 3', render: () => <TabPane>Tab 3 Content</TabPane> },
 ]
 
 class TabExampleOnTabChange extends Component {
diff --git a/docs/src/examples/modules/Tab/Usage/TabExamplePaneShorthand.js b/docs/src/examples/modules/Tab/Usage/TabExamplePaneShorthand.js
index 93d8040bd0..c1cb7c81fa 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExamplePaneShorthand.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExamplePaneShorthand.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { List, Label, Tab } from 'semantic-ui-react'
+import { TabPane, ListItem, List, Label, Tab } from 'semantic-ui-react'
 
 const panes = [
   {
@@ -28,15 +28,15 @@ const panes = [
   {
     menuItem: 'Tab 4',
     pane: (
-      <Tab.Pane key='tab4'>
+      <TabPane key='tab4'>
         <p>This tab has complex content</p>
 
         <List>
-          <List.Item>Apples</List.Item>
-          <List.Item>Pears</List.Item>
-          <List.Item>Oranges</List.Item>
+          <ListItem>Apples</ListItem>
+          <ListItem>Pears</ListItem>
+          <ListItem>Oranges</ListItem>
         </List>
-      </Tab.Pane>
+      </TabPane>
     ),
   },
 ]
diff --git a/docs/src/examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js b/docs/src/examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js
index 0f56fb22d7..e255577b7e 100644
--- a/docs/src/examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js
+++ b/docs/src/examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js
@@ -1,5 +1,14 @@
 import React, { Component } from 'react'
-import { Form, Grid, Image, Transition } from 'semantic-ui-react'
+import {
+  TransitionGroup,
+  GridColumn,
+  FormSelect,
+  FormInput,
+  FormButton,
+  Form,
+  Grid,
+  Image,
+} from 'semantic-ui-react'
 
 const transitions = [
   'browse',
@@ -46,15 +55,15 @@ export default class TransitionExampleSingleExplorer extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column as={Form}>
-          <Form.Select
+        <GridColumn as={Form}>
+          <FormSelect
             label='Choose transition'
             name='animation'
             onChange={this.handleChange}
             options={options}
             value={animation}
           />
-          <Form.Input
+          <FormInput
             label={`Duration: ${duration}ms `}
             min={100}
             max={2000}
@@ -64,19 +73,19 @@ export default class TransitionExampleSingleExplorer extends Component {
             type='range'
             value={duration}
           />
-          <Form.Button
+          <FormButton
             content={visible ? 'Unmount' : 'Mount'}
             onClick={this.handleVisibility}
           />
-        </Grid.Column>
+        </GridColumn>
 
-        <Grid.Column>
-          <Transition.Group animation={animation} duration={duration}>
+        <GridColumn>
+          <TransitionGroup animation={animation} duration={duration}>
             {visible && (
               <Image centered size='small' src='/images/leaves/4.png' />
             )}
-          </Transition.Group>
-        </Grid.Column>
+          </TransitionGroup>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js b/docs/src/examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js
index f02830feae..28730a6381 100644
--- a/docs/src/examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js
+++ b/docs/src/examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js
@@ -1,5 +1,14 @@
 import React, { Component } from 'react'
-import { Form, Grid, Image, Transition } from 'semantic-ui-react'
+import {
+  GridColumn,
+  FormSelect,
+  FormInput,
+  FormButton,
+  Form,
+  Grid,
+  Image,
+  Transition,
+} from 'semantic-ui-react'
 
 const transitions = [
   'jiggle',
@@ -29,15 +38,15 @@ export default class TransitionExampleTransitionExplorer extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column as={Form}>
-          <Form.Select
+        <GridColumn as={Form}>
+          <FormSelect
             label='Choose transition'
             name='animation'
             onChange={this.handleChange}
             options={options}
             value={animation}
           />
-          <Form.Input
+          <FormInput
             label={`Duration: ${duration}ms `}
             min={100}
             max={2000}
@@ -47,10 +56,10 @@ export default class TransitionExampleTransitionExplorer extends Component {
             type='range'
             value={duration}
           />
-          <Form.Button content='Run' onClick={this.toggleVisibility} />
-        </Grid.Column>
+          <FormButton content='Run' onClick={this.toggleVisibility} />
+        </GridColumn>
 
-        <Grid.Column>
+        <GridColumn>
           <Transition
             animation={animation}
             duration={duration}
@@ -58,7 +67,7 @@ export default class TransitionExampleTransitionExplorer extends Component {
           >
             <Image centered size='small' src='/images/leaves/5.png' />
           </Transition>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/modules/Transition/Types/TransitionExampleGroup.js b/docs/src/examples/modules/Transition/Types/TransitionExampleGroup.js
index 65420f34b4..6cf1617764 100644
--- a/docs/src/examples/modules/Transition/Types/TransitionExampleGroup.js
+++ b/docs/src/examples/modules/Transition/Types/TransitionExampleGroup.js
@@ -1,6 +1,14 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Button, Image, List, Transition } from 'semantic-ui-react'
+import {
+  TransitionGroup,
+  ListItem,
+  ListContent,
+  ButtonGroup,
+  Button,
+  Image,
+  List,
+} from 'semantic-ui-react'
 
 const users = ['ade', 'chris', 'christian', 'daniel', 'elliot', 'helen']
 
@@ -20,7 +28,7 @@ export default class TransitionExampleGroup extends Component {
 
     return (
       <div>
-        <Button.Group>
+        <ButtonGroup>
           <Button
             disabled={items.length === 0}
             icon='minus'
@@ -31,9 +39,9 @@ export default class TransitionExampleGroup extends Component {
             icon='plus'
             onClick={this.handleAdd}
           />
-        </Button.Group>
+        </ButtonGroup>
 
-        <Transition.Group
+        <TransitionGroup
           as={List}
           duration={200}
           divided
@@ -41,12 +49,12 @@ export default class TransitionExampleGroup extends Component {
           verticalAlign='middle'
         >
           {items.map((item) => (
-            <List.Item key={item}>
+            <ListItem key={item}>
               <Image avatar src={`/images/avatar/small/${item}.jpg`} />
-              <List.Content header={_.startCase(item)} />
-            </List.Item>
+              <ListContent header={_.startCase(item)} />
+            </ListItem>
           ))}
-        </Transition.Group>
+        </TransitionGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/modules/Transition/Types/index.js b/docs/src/examples/modules/Transition/Types/index.js
index b8ef457ca7..68f7450768 100644
--- a/docs/src/examples/modules/Transition/Types/index.js
+++ b/docs/src/examples/modules/Transition/Types/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageItem, MessageList, Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -13,16 +13,16 @@ const TransitionTypesExamples = () => (
     >
       <Message warning>
         <p>Do not unmount a Transition child or else it cannot be animated.</p>
-        <Message.List>
-          <Message.Item>
+        <MessageList>
+          <MessageItem>
             Use the <code>unmountOnHide</code> prop to unmount the child after
             the animation exits.
-          </Message.Item>
-          <Message.Item>
-            Use a <code>Transition.Group</code> to animate children as they
-            mount and unmount.
-          </Message.Item>
-        </Message.List>
+          </MessageItem>
+          <MessageItem>
+            Use a <code>TransitionGroup</code> to animate children as they mount
+            and unmount.
+          </MessageItem>
+        </MessageList>
       </Message>
     </ComponentExample>
     <ComponentExample
diff --git a/docs/src/examples/modules/Transition/Usage/TransitionExampleDuration.js b/docs/src/examples/modules/Transition/Usage/TransitionExampleDuration.js
index ed1f409c32..1a50193241 100644
--- a/docs/src/examples/modules/Transition/Usage/TransitionExampleDuration.js
+++ b/docs/src/examples/modules/Transition/Usage/TransitionExampleDuration.js
@@ -1,5 +1,13 @@
 import React, { Component } from 'react'
-import { Form, Grid, Image, Transition } from 'semantic-ui-react'
+import {
+  GridColumn,
+  FormInput,
+  FormButton,
+  Form,
+  Grid,
+  Image,
+  Transition,
+} from 'semantic-ui-react'
 
 export default class TransitionExampleDuration extends Component {
   state = { hide: 500, show: 500, visible: true }
@@ -13,8 +21,8 @@ export default class TransitionExampleDuration extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column as={Form}>
-          <Form.Input
+        <GridColumn as={Form}>
+          <FormInput
             label={`Hide duration: ${hide}ms `}
             min={100}
             max={5000}
@@ -24,7 +32,7 @@ export default class TransitionExampleDuration extends Component {
             type='range'
             value={hide}
           />
-          <Form.Input
+          <FormInput
             label={`Show duration: ${show}ms `}
             min={100}
             max={5000}
@@ -34,14 +42,14 @@ export default class TransitionExampleDuration extends Component {
             type='range'
             value={show}
           />
-          <Form.Button content='Run' onClick={this.toggleVisibility} />
-        </Grid.Column>
+          <FormButton content='Run' onClick={this.toggleVisibility} />
+        </GridColumn>
 
-        <Grid.Column>
+        <GridColumn>
           <Transition duration={{ hide, show }} visible={visible}>
             <Image centered size='small' src='/images/leaves/3.png' />
           </Transition>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }
diff --git a/docs/src/examples/views/Card/Content/CardExampleContentBlock.js b/docs/src/examples/views/Card/Content/CardExampleContentBlock.js
index f86676ff3b..81e201b8ef 100644
--- a/docs/src/examples/views/Card/Content/CardExampleContentBlock.js
+++ b/docs/src/examples/views/Card/Content/CardExampleContentBlock.js
@@ -1,44 +1,54 @@
 import React from 'react'
-import { Card, Feed } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  CardHeader,
+  CardContent,
+  Card,
+  Feed,
+} from 'semantic-ui-react'
 
 const CardExampleContentBlock = () => (
   <Card>
-    <Card.Content>
-      <Card.Header>Recent Activity</Card.Header>
-    </Card.Content>
-    <Card.Content>
+    <CardContent>
+      <CardHeader>Recent Activity</CardHeader>
+    </CardContent>
+    <CardContent>
       <Feed>
-        <Feed.Event>
-          <Feed.Label image='/images/avatar/small/jenny.jpg' />
-          <Feed.Content>
-            <Feed.Date content='1 day ago' />
-            <Feed.Summary>
+        <FeedEvent>
+          <FeedLabel image='/images/avatar/small/jenny.jpg' />
+          <FeedContent>
+            <FeedDate content='1 day ago' />
+            <FeedSummary>
               You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-            </Feed.Summary>
-          </Feed.Content>
-        </Feed.Event>
+            </FeedSummary>
+          </FeedContent>
+        </FeedEvent>
 
-        <Feed.Event>
-          <Feed.Label image='/images/avatar/small/molly.png' />
-          <Feed.Content>
-            <Feed.Date content='3 days ago' />
-            <Feed.Summary>
+        <FeedEvent>
+          <FeedLabel image='/images/avatar/small/molly.png' />
+          <FeedContent>
+            <FeedDate content='3 days ago' />
+            <FeedSummary>
               You added <a>Molly Malone</a> as a friend.
-            </Feed.Summary>
-          </Feed.Content>
-        </Feed.Event>
+            </FeedSummary>
+          </FeedContent>
+        </FeedEvent>
 
-        <Feed.Event>
-          <Feed.Label image='/images/avatar/small/elliot.jpg' />
-          <Feed.Content>
-            <Feed.Date content='4 days ago' />
-            <Feed.Summary>
+        <FeedEvent>
+          <FeedLabel image='/images/avatar/small/elliot.jpg' />
+          <FeedContent>
+            <FeedDate content='4 days ago' />
+            <FeedSummary>
               You added <a>Elliot Baker</a> to your <a>musicians</a> group.
-            </Feed.Summary>
-          </Feed.Content>
-        </Feed.Event>
+            </FeedSummary>
+          </FeedContent>
+        </FeedEvent>
       </Feed>
-    </Card.Content>
+    </CardContent>
   </Card>
 )
 
diff --git a/docs/src/examples/views/Card/Content/CardExampleExtraContent.js b/docs/src/examples/views/Card/Content/CardExampleExtraContent.js
index d8c11790be..ddbb69984f 100644
--- a/docs/src/examples/views/Card/Content/CardExampleExtraContent.js
+++ b/docs/src/examples/views/Card/Content/CardExampleExtraContent.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, Icon } from 'semantic-ui-react'
+import { CardContent, Card, Icon } from 'semantic-ui-react'
 
 const description = [
   'Amy is a violinist with 2 years experience in the wedding industry.',
@@ -8,11 +8,11 @@ const description = [
 
 const CardExampleExtraContent = () => (
   <Card>
-    <Card.Content header='About Amy' />
-    <Card.Content description={description} />
-    <Card.Content extra>
+    <CardContent header='About Amy' />
+    <CardContent description={description} />
+    <CardContent extra>
       <Icon name='user' />4 Friends
-    </Card.Content>
+    </CardContent>
   </Card>
 )
 
diff --git a/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js b/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js
index 4977843eda..968974f33d 100644
--- a/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js
+++ b/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js
@@ -1,28 +1,35 @@
 import React from 'react'
-import { Card } from 'semantic-ui-react'
+import {
+  CardMeta,
+  CardHeader,
+  CardGroup,
+  CardDescription,
+  CardContent,
+  Card,
+} from 'semantic-ui-react'
 
 const CardExampleHeaderCard = () => (
-  <Card.Group>
+  <CardGroup>
     <Card>
-      <Card.Content>
-        <Card.Header>Matthew Harris</Card.Header>
-        <Card.Meta>Co-Worker</Card.Meta>
-        <Card.Description>
+      <CardContent>
+        <CardHeader>Matthew Harris</CardHeader>
+        <CardMeta>Co-Worker</CardMeta>
+        <CardDescription>
           Matthew is a pianist living in Nashville.
-        </Card.Description>
-      </Card.Content>
+        </CardDescription>
+      </CardContent>
     </Card>
 
     <Card>
-      <Card.Content>
-        <Card.Header content='Jake Smith' />
-        <Card.Meta content='Musicians' />
-        <Card.Description content='Jake is a drummer living in New York.' />
-      </Card.Content>
+      <CardContent>
+        <CardHeader content='Jake Smith' />
+        <CardMeta content='Musicians' />
+        <CardDescription content='Jake is a drummer living in New York.' />
+      </CardContent>
     </Card>
 
     <Card>
-      <Card.Content
+      <CardContent
         header='Elliot Baker'
         meta='Friend'
         description='Elliot is a music producer living in Chicago.'
@@ -34,7 +41,7 @@ const CardExampleHeaderCard = () => (
       meta='Friend'
       description='Jenny is a student studying Media Management at the New School'
     />
-  </Card.Group>
+  </CardGroup>
 )
 
 export default CardExampleHeaderCard
diff --git a/docs/src/examples/views/Card/Content/CardExampleImageCard.js b/docs/src/examples/views/Card/Content/CardExampleImageCard.js
index d28a87c232..b87292599a 100644
--- a/docs/src/examples/views/Card/Content/CardExampleImageCard.js
+++ b/docs/src/examples/views/Card/Content/CardExampleImageCard.js
@@ -1,22 +1,30 @@
 import React from 'react'
-import { Card, Icon, Image } from 'semantic-ui-react'
+import {
+  CardMeta,
+  CardHeader,
+  CardDescription,
+  CardContent,
+  Card,
+  Icon,
+  Image,
+} from 'semantic-ui-react'
 
 const CardExampleImageCard = () => (
   <Card>
     <Image src='/images/avatar/large/daniel.jpg' wrapped ui={false} />
-    <Card.Content>
-      <Card.Header>Daniel</Card.Header>
-      <Card.Meta>Joined in 2016</Card.Meta>
-      <Card.Description>
+    <CardContent>
+      <CardHeader>Daniel</CardHeader>
+      <CardMeta>Joined in 2016</CardMeta>
+      <CardDescription>
         Daniel is a comedian living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
+      </CardDescription>
+    </CardContent>
+    <CardContent extra>
       <a>
         <Icon name='user' />
         10 Friends
       </a>
-    </Card.Content>
+    </CardContent>
   </Card>
 )
 
diff --git a/docs/src/examples/views/Card/Types/CardExampleCard.js b/docs/src/examples/views/Card/Types/CardExampleCard.js
index 9ea23e9aa6..31016a7140 100644
--- a/docs/src/examples/views/Card/Types/CardExampleCard.js
+++ b/docs/src/examples/views/Card/Types/CardExampleCard.js
@@ -1,24 +1,32 @@
 import React from 'react'
-import { Card, Icon, Image } from 'semantic-ui-react'
+import {
+  CardMeta,
+  CardHeader,
+  CardDescription,
+  CardContent,
+  Card,
+  Icon,
+  Image,
+} from 'semantic-ui-react'
 
 const CardExampleCard = () => (
   <Card>
     <Image src='/images/avatar/large/matthew.png' wrapped ui={false} />
-    <Card.Content>
-      <Card.Header>Matthew</Card.Header>
-      <Card.Meta>
+    <CardContent>
+      <CardHeader>Matthew</CardHeader>
+      <CardMeta>
         <span className='date'>Joined in 2015</span>
-      </Card.Meta>
-      <Card.Description>
+      </CardMeta>
+      <CardDescription>
         Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
+      </CardDescription>
+    </CardContent>
+    <CardContent extra>
       <a>
         <Icon name='user' />
         22 Friends
       </a>
-    </Card.Content>
+    </CardContent>
   </Card>
 )
 
diff --git a/docs/src/examples/views/Card/Types/CardExampleGroupProps.js b/docs/src/examples/views/Card/Types/CardExampleGroupProps.js
index e34c796281..9fd941e313 100644
--- a/docs/src/examples/views/Card/Types/CardExampleGroupProps.js
+++ b/docs/src/examples/views/Card/Types/CardExampleGroupProps.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card } from 'semantic-ui-react'
+import { CardGroup } from 'semantic-ui-react'
 
 const items = [
   {
@@ -22,6 +22,6 @@ const items = [
   },
 ]
 
-const CardExampleGroupProps = () => <Card.Group items={items} />
+const CardExampleGroupProps = () => <CardGroup items={items} />
 
 export default CardExampleGroupProps
diff --git a/docs/src/examples/views/Card/Types/CardExampleGroups.js b/docs/src/examples/views/Card/Types/CardExampleGroups.js
index e066c196e1..80681f9310 100644
--- a/docs/src/examples/views/Card/Types/CardExampleGroups.js
+++ b/docs/src/examples/views/Card/Types/CardExampleGroups.js
@@ -1,22 +1,31 @@
 import React from 'react'
-import { Button, Card, Image } from 'semantic-ui-react'
+import {
+  CardMeta,
+  CardHeader,
+  CardGroup,
+  CardDescription,
+  CardContent,
+  Button,
+  Card,
+  Image,
+} from 'semantic-ui-react'
 
 const CardExampleGroups = () => (
-  <Card.Group>
+  <CardGroup>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Image
           floated='right'
           size='mini'
           src='/images/avatar/large/steve.jpg'
         />
-        <Card.Header>Steve Sanders</Card.Header>
-        <Card.Meta>Friends of Elliot</Card.Meta>
-        <Card.Description>
+        <CardHeader>Steve Sanders</CardHeader>
+        <CardMeta>Friends of Elliot</CardMeta>
+        <CardDescription>
           Steve wants to add you to the group <strong>best friends</strong>
-        </Card.Description>
-      </Card.Content>
-      <Card.Content extra>
+        </CardDescription>
+      </CardContent>
+      <CardContent extra>
         <div className='ui two buttons'>
           <Button basic color='green'>
             Approve
@@ -25,22 +34,22 @@ const CardExampleGroups = () => (
             Decline
           </Button>
         </div>
-      </Card.Content>
+      </CardContent>
     </Card>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Image
           floated='right'
           size='mini'
           src='/images/avatar/large/molly.png'
         />
-        <Card.Header>Molly Thomas</Card.Header>
-        <Card.Meta>New User</Card.Meta>
-        <Card.Description>
+        <CardHeader>Molly Thomas</CardHeader>
+        <CardMeta>New User</CardMeta>
+        <CardDescription>
           Molly wants to add you to the group <strong>musicians</strong>
-        </Card.Description>
-      </Card.Content>
-      <Card.Content extra>
+        </CardDescription>
+      </CardContent>
+      <CardContent extra>
         <div className='ui two buttons'>
           <Button basic color='green'>
             Approve
@@ -49,22 +58,22 @@ const CardExampleGroups = () => (
             Decline
           </Button>
         </div>
-      </Card.Content>
+      </CardContent>
     </Card>
     <Card>
-      <Card.Content>
+      <CardContent>
         <Image
           floated='right'
           size='mini'
           src='/images/avatar/large/jenny.jpg'
         />
-        <Card.Header>Jenny Lawrence</Card.Header>
-        <Card.Meta>New User</Card.Meta>
-        <Card.Description>
+        <CardHeader>Jenny Lawrence</CardHeader>
+        <CardMeta>New User</CardMeta>
+        <CardDescription>
           Jenny requested permission to view your contact details
-        </Card.Description>
-      </Card.Content>
-      <Card.Content extra>
+        </CardDescription>
+      </CardContent>
+      <CardContent extra>
         <div className='ui two buttons'>
           <Button basic color='green'>
             Approve
@@ -73,9 +82,9 @@ const CardExampleGroups = () => (
             Decline
           </Button>
         </div>
-      </Card.Content>
+      </CardContent>
     </Card>
-  </Card.Group>
+  </CardGroup>
 )
 
 export default CardExampleGroups
diff --git a/docs/src/examples/views/Card/Variations/CardExampleColored.js b/docs/src/examples/views/Card/Variations/CardExampleColored.js
index 9bf4b7f468..cdb2204a97 100644
--- a/docs/src/examples/views/Card/Variations/CardExampleColored.js
+++ b/docs/src/examples/views/Card/Variations/CardExampleColored.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Card } from 'semantic-ui-react'
+import { CardGroup, Card } from 'semantic-ui-react'
 
 const src = '/images/wireframe/white-image.png'
 
 const CardExampleColored = () => (
-  <Card.Group itemsPerRow={4}>
+  <CardGroup itemsPerRow={4}>
     <Card color='red' image={src} />
     <Card color='orange' image={src} />
     <Card color='yellow' image={src} />
@@ -17,7 +17,7 @@ const CardExampleColored = () => (
     <Card color='pink' image={src} />
     <Card color='brown' image={src} />
     <Card color='grey' image={src} />
-  </Card.Group>
+  </CardGroup>
 )
 
 export default CardExampleColored
diff --git a/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js b/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js
index 98d87ea07d..04f322395d 100644
--- a/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js
+++ b/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Card } from 'semantic-ui-react'
+import { CardGroup, Card } from 'semantic-ui-react'
 
 const src = '/images/wireframe/image.png'
 
 const CardExampleColumnCount = () => (
-  <Card.Group itemsPerRow={6}>
+  <CardGroup itemsPerRow={6}>
     <Card raised image={src} />
     <Card raised image={src} />
     <Card raised image={src} />
@@ -17,7 +17,7 @@ const CardExampleColumnCount = () => (
     <Card raised image={src} />
     <Card raised image={src} />
     <Card raised image={src} />
-  </Card.Group>
+  </CardGroup>
 )
 
 export default CardExampleColumnCount
diff --git a/docs/src/examples/views/Card/Variations/CardExampleFluid.js b/docs/src/examples/views/Card/Variations/CardExampleFluid.js
index ddbcd0174a..46f9ce04bf 100644
--- a/docs/src/examples/views/Card/Variations/CardExampleFluid.js
+++ b/docs/src/examples/views/Card/Variations/CardExampleFluid.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Card } from 'semantic-ui-react'
+import { CardGroup, Card } from 'semantic-ui-react'
 
 const CardExampleFluid = () => (
-  <Card.Group>
+  <CardGroup>
     <Card fluid color='red' header='Option 1' />
     <Card fluid color='orange' header='Option 2' />
     <Card fluid color='yellow' header='Option 3' />
-  </Card.Group>
+  </CardGroup>
 )
 
 export default CardExampleFluid
diff --git a/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js b/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js
index 4a545d6430..723d5adcca 100644
--- a/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js
+++ b/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card } from 'semantic-ui-react'
+import { CardGroup } from 'semantic-ui-react'
 
 const items = [
   {
@@ -16,6 +16,6 @@ const items = [
   },
 ]
 
-const CardExampleGroupCentered = () => <Card.Group centered items={items} />
+const CardExampleGroupCentered = () => <CardGroup centered items={items} />
 
 export default CardExampleGroupCentered
diff --git a/docs/src/examples/views/Comment/Content/CommentExampleActions.js b/docs/src/examples/views/Comment/Content/CommentExampleActions.js
index a7eb4ab60a..10c6bbb0c6 100644
--- a/docs/src/examples/views/Comment/Content/CommentExampleActions.js
+++ b/docs/src/examples/views/Comment/Content/CommentExampleActions.js
@@ -1,28 +1,38 @@
 import React from 'react'
-import { Comment, Icon } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentActions,
+  CommentAction,
+  CommentAuthor,
+  Comment,
+  Icon,
+} from 'semantic-ui-react'
 
 const CommentExampleActions = () => (
-  <Comment.Group>
+  <CommentGroup>
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/joe.jpg' />
-      <Comment.Content>
-        <Comment.Author>Tom Lukic</Comment.Author>
-        <Comment.Text>
+      <CommentAvatar as='a' src='/images/avatar/small/joe.jpg' />
+      <CommentContent>
+        <CommentAuthor>Tom Lukic</CommentAuthor>
+        <CommentText>
           This will be great for business reports. I will definitely download
           this.
-        </Comment.Text>
-        <Comment.Actions>
-          <Comment.Action>Reply</Comment.Action>
-          <Comment.Action>Save</Comment.Action>
-          <Comment.Action>Hide</Comment.Action>
-          <Comment.Action>
+        </CommentText>
+        <CommentActions>
+          <CommentAction>Reply</CommentAction>
+          <CommentAction>Save</CommentAction>
+          <CommentAction>Hide</CommentAction>
+          <CommentAction>
             <Icon name='expand' />
             Full-screen
-          </Comment.Action>
-        </Comment.Actions>
-      </Comment.Content>
+          </CommentAction>
+        </CommentActions>
+      </CommentContent>
     </Comment>
-  </Comment.Group>
+  </CommentGroup>
 )
 
 export default CommentExampleActions
diff --git a/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js b/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js
index 2164beb446..a7f8f232ac 100644
--- a/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js
+++ b/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js
@@ -1,15 +1,21 @@
 import React from 'react'
-import { Comment } from 'semantic-ui-react'
+import {
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentAuthor,
+  Comment,
+} from 'semantic-ui-react'
 
 const CommentExampleAvatar = () => (
-  <Comment.Group>
+  <CommentGroup>
     <Comment>
-      <Comment.Avatar src='/images/avatar/small/elliot.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Elliot Fu</Comment.Author>
-      </Comment.Content>
+      <CommentAvatar src='/images/avatar/small/elliot.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Elliot Fu</CommentAuthor>
+      </CommentContent>
     </Comment>
-  </Comment.Group>
+  </CommentGroup>
 )
 
 export default CommentExampleAvatar
diff --git a/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js b/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js
index b7ececccdc..8114102ed4 100644
--- a/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js
+++ b/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js
@@ -1,25 +1,34 @@
 import React from 'react'
-import { Comment, Icon } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentMetadata,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentAuthor,
+  Comment,
+  Icon,
+} from 'semantic-ui-react'
 
 const CommentExampleMetadata = () => (
-  <Comment.Group>
+  <CommentGroup>
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/stevie.jpg' />
-      <Comment.Content>
-        <Comment.Author>Stevie Feliciano</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/stevie.jpg' />
+      <CommentContent>
+        <CommentAuthor>Stevie Feliciano</CommentAuthor>
+        <CommentMetadata>
           <div>2 days ago</div>
           <div>
             <Icon name='star' />5 Faves
           </div>
-        </Comment.Metadata>
-        <Comment.Text>
+        </CommentMetadata>
+        <CommentText>
           Hey guys, I hope this example comment is helping you read this
           documentation.
-        </Comment.Text>
-      </Comment.Content>
+        </CommentText>
+      </CommentContent>
     </Comment>
-  </Comment.Group>
+  </CommentGroup>
 )
 
 export default CommentExampleMetadata
diff --git a/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js b/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js
index 8201a70908..2a1c17b9a1 100644
--- a/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js
+++ b/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js
@@ -1,21 +1,34 @@
 import React from 'react'
-import { Button, Comment, Form } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentMetadata,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentActions,
+  CommentAction,
+  CommentAuthor,
+  FormTextArea,
+  Button,
+  Comment,
+  Form,
+} from 'semantic-ui-react'
 
 const CommentExampleReplyForm = () => (
-  <Comment.Group>
+  <CommentGroup>
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/steve.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Steve Jobes</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/steve.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Steve Jobes</CommentAuthor>
+        <CommentMetadata>
           <div>2 days ago</div>
-        </Comment.Metadata>
-        <Comment.Text>Revolutionary!</Comment.Text>
-        <Comment.Actions>
-          <Comment.Action active>Reply</Comment.Action>
-        </Comment.Actions>
+        </CommentMetadata>
+        <CommentText>Revolutionary!</CommentText>
+        <CommentActions>
+          <CommentAction active>Reply</CommentAction>
+        </CommentActions>
         <Form reply>
-          <Form.TextArea />
+          <FormTextArea />
           <Button
             content='Add Reply'
             labelPosition='left'
@@ -23,9 +36,9 @@ const CommentExampleReplyForm = () => (
             primary
           />
         </Form>
-      </Comment.Content>
+      </CommentContent>
     </Comment>
-  </Comment.Group>
+  </CommentGroup>
 )
 
 export default CommentExampleReplyForm
diff --git a/docs/src/examples/views/Comment/Content/CommentExampleReplyFormOuter.js b/docs/src/examples/views/Comment/Content/CommentExampleReplyFormOuter.js
index d2baa7f960..d8eeeedfa0 100644
--- a/docs/src/examples/views/Comment/Content/CommentExampleReplyFormOuter.js
+++ b/docs/src/examples/views/Comment/Content/CommentExampleReplyFormOuter.js
@@ -1,16 +1,29 @@
 import React from 'react'
-import { Button, Comment, Form } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentMetadata,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentActions,
+  CommentAction,
+  CommentAuthor,
+  FormTextArea,
+  Button,
+  Comment,
+  Form,
+} from 'semantic-ui-react'
 
 const CommentExampleReplyFormOuter = () => (
-  <Comment.Group>
+  <CommentGroup>
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/joe.jpg' />
-      <Comment.Content>
-        <Comment.Author>Joe Henderson</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/joe.jpg' />
+      <CommentContent>
+        <CommentAuthor>Joe Henderson</CommentAuthor>
+        <CommentMetadata>
           <div>1 day ago</div>
-        </Comment.Metadata>
-        <Comment.Text>
+        </CommentMetadata>
+        <CommentText>
           <p>
             The hours, minutes and seconds stand as visible reminders that your
             effort put them all there.
@@ -19,32 +32,32 @@ const CommentExampleReplyFormOuter = () => (
             Preserve until your next run, when the watch lets you see how
             Impermanent your efforts are.
           </p>
-        </Comment.Text>
-        <Comment.Actions>
-          <Comment.Action>Reply</Comment.Action>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentText>
+        <CommentActions>
+          <CommentAction>Reply</CommentAction>
+        </CommentActions>
+      </CommentContent>
     </Comment>
 
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/christian.jpg' />
-      <Comment.Content>
-        <Comment.Author>Christian Rocha</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/christian.jpg' />
+      <CommentContent>
+        <CommentAuthor>Christian Rocha</CommentAuthor>
+        <CommentMetadata>
           <div>2 days ago</div>
-        </Comment.Metadata>
-        <Comment.Text>I re-tweeted this.</Comment.Text>
-        <Comment.Actions>
-          <Comment.Action>Reply</Comment.Action>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentMetadata>
+        <CommentText>I re-tweeted this.</CommentText>
+        <CommentActions>
+          <CommentAction>Reply</CommentAction>
+        </CommentActions>
+      </CommentContent>
     </Comment>
 
     <Form reply>
-      <Form.TextArea />
+      <FormTextArea />
       <Button content='Add Comment' labelPosition='left' icon='edit' primary />
     </Form>
-  </Comment.Group>
+  </CommentGroup>
 )
 
 export default CommentExampleReplyFormOuter
diff --git a/docs/src/examples/views/Comment/States/CommentExampleCollapsed.js b/docs/src/examples/views/Comment/States/CommentExampleCollapsed.js
index 7adef69be7..844469f7d9 100644
--- a/docs/src/examples/views/Comment/States/CommentExampleCollapsed.js
+++ b/docs/src/examples/views/Comment/States/CommentExampleCollapsed.js
@@ -1,5 +1,15 @@
 import React, { Component } from 'react'
-import { Checkbox, Comment } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentMetadata,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentActions,
+  CommentAuthor,
+  Checkbox,
+  Comment,
+} from 'semantic-ui-react'
 
 export default class CommentExampleCollapsed extends Component {
   state = { collapsed: true }
@@ -17,59 +27,59 @@ export default class CommentExampleCollapsed extends Component {
           onChange={this.handleCheckbox}
         />
 
-        <Comment.Group>
+        <CommentGroup>
           <Comment>
-            <Comment.Avatar as='a' src='/images/avatar/small/christian.jpg' />
-            <Comment.Content>
-              <Comment.Author as='a'>Christian Rocha</Comment.Author>
-              <Comment.Metadata>
+            <CommentAvatar as='a' src='/images/avatar/small/christian.jpg' />
+            <CommentContent>
+              <CommentAuthor as='a'>Christian Rocha</CommentAuthor>
+              <CommentMetadata>
                 <span>2 days ago</span>
-              </Comment.Metadata>
-              <Comment.Text>
+              </CommentMetadata>
+              <CommentText>
                 I'm very interested in this motherboard. Do you know if it'd
                 work in a Intel LGA775 CPU socket?
-              </Comment.Text>
-              <Comment.Actions>
+              </CommentText>
+              <CommentActions>
                 <a>Reply</a>
-              </Comment.Actions>
-            </Comment.Content>
+              </CommentActions>
+            </CommentContent>
 
-            <Comment.Group collapsed={collapsed}>
+            <CommentGroup collapsed={collapsed}>
               <Comment>
-                <Comment.Avatar as='a' src='/images/avatar/small/elliot.jpg' />
-                <Comment.Content>
-                  <Comment.Author as='a'>Elliot Fu</Comment.Author>
-                  <Comment.Metadata>
+                <CommentAvatar as='a' src='/images/avatar/small/elliot.jpg' />
+                <CommentContent>
+                  <CommentAuthor as='a'>Elliot Fu</CommentAuthor>
+                  <CommentMetadata>
                     <span>1 day ago</span>
-                  </Comment.Metadata>
-                  <Comment.Text>No, it wont</Comment.Text>
-                  <Comment.Actions>
+                  </CommentMetadata>
+                  <CommentText>No, it wont</CommentText>
+                  <CommentActions>
                     <a>Reply</a>
-                  </Comment.Actions>
-                </Comment.Content>
+                  </CommentActions>
+                </CommentContent>
 
-                <Comment.Group>
+                <CommentGroup>
                   <Comment>
-                    <Comment.Avatar
+                    <CommentAvatar
                       as='a'
                       src='/images/avatar/small/jenny.jpg'
                     />
-                    <Comment.Content>
-                      <Comment.Author as='a'>Jenny Hess</Comment.Author>
-                      <Comment.Metadata>
+                    <CommentContent>
+                      <CommentAuthor as='a'>Jenny Hess</CommentAuthor>
+                      <CommentMetadata>
                         <span>20 minutes ago</span>
-                      </Comment.Metadata>
-                      <Comment.Text>Maybe it would.</Comment.Text>
-                      <Comment.Actions>
+                      </CommentMetadata>
+                      <CommentText>Maybe it would.</CommentText>
+                      <CommentActions>
                         <a>Reply</a>
-                      </Comment.Actions>
-                    </Comment.Content>
+                      </CommentActions>
+                    </CommentContent>
                   </Comment>
-                </Comment.Group>
+                </CommentGroup>
               </Comment>
-            </Comment.Group>
+            </CommentGroup>
           </Comment>
-        </Comment.Group>
+        </CommentGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/views/Comment/Types/CommentExampleComment.js b/docs/src/examples/views/Comment/Types/CommentExampleComment.js
index 7bab11891b..d7eefa90c9 100644
--- a/docs/src/examples/views/Comment/Types/CommentExampleComment.js
+++ b/docs/src/examples/views/Comment/Types/CommentExampleComment.js
@@ -1,76 +1,90 @@
 import React from 'react'
-import { Button, Comment, Form, Header } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentMetadata,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentActions,
+  CommentAction,
+  CommentAuthor,
+  FormTextArea,
+  Button,
+  Comment,
+  Form,
+  Header,
+} from 'semantic-ui-react'
 
 const CommentExampleComment = () => (
-  <Comment.Group>
+  <CommentGroup>
     <Header as='h3' dividing>
       Comments
     </Header>
 
     <Comment>
-      <Comment.Avatar src='/images/avatar/small/matt.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Matt</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar src='/images/avatar/small/matt.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Matt</CommentAuthor>
+        <CommentMetadata>
           <div>Today at 5:42PM</div>
-        </Comment.Metadata>
-        <Comment.Text>How artistic!</Comment.Text>
-        <Comment.Actions>
-          <Comment.Action>Reply</Comment.Action>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentMetadata>
+        <CommentText>How artistic!</CommentText>
+        <CommentActions>
+          <CommentAction>Reply</CommentAction>
+        </CommentActions>
+      </CommentContent>
     </Comment>
 
     <Comment>
-      <Comment.Avatar src='/images/avatar/small/elliot.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Elliot Fu</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar src='/images/avatar/small/elliot.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Elliot Fu</CommentAuthor>
+        <CommentMetadata>
           <div>Yesterday at 12:30AM</div>
-        </Comment.Metadata>
-        <Comment.Text>
+        </CommentMetadata>
+        <CommentText>
           <p>This has been very useful for my research. Thanks as well!</p>
-        </Comment.Text>
-        <Comment.Actions>
-          <Comment.Action>Reply</Comment.Action>
-        </Comment.Actions>
-      </Comment.Content>
-      <Comment.Group>
+        </CommentText>
+        <CommentActions>
+          <CommentAction>Reply</CommentAction>
+        </CommentActions>
+      </CommentContent>
+      <CommentGroup>
         <Comment>
-          <Comment.Avatar src='/images/avatar/small/jenny.jpg' />
-          <Comment.Content>
-            <Comment.Author as='a'>Jenny Hess</Comment.Author>
-            <Comment.Metadata>
+          <CommentAvatar src='/images/avatar/small/jenny.jpg' />
+          <CommentContent>
+            <CommentAuthor as='a'>Jenny Hess</CommentAuthor>
+            <CommentMetadata>
               <div>Just now</div>
-            </Comment.Metadata>
-            <Comment.Text>Elliot you are always so right :)</Comment.Text>
-            <Comment.Actions>
-              <Comment.Action>Reply</Comment.Action>
-            </Comment.Actions>
-          </Comment.Content>
+            </CommentMetadata>
+            <CommentText>Elliot you are always so right :)</CommentText>
+            <CommentActions>
+              <CommentAction>Reply</CommentAction>
+            </CommentActions>
+          </CommentContent>
         </Comment>
-      </Comment.Group>
+      </CommentGroup>
     </Comment>
 
     <Comment>
-      <Comment.Avatar src='/images/avatar/small/joe.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Joe Henderson</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar src='/images/avatar/small/joe.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Joe Henderson</CommentAuthor>
+        <CommentMetadata>
           <div>5 days ago</div>
-        </Comment.Metadata>
-        <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
-        <Comment.Actions>
-          <Comment.Action>Reply</Comment.Action>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentMetadata>
+        <CommentText>Dude, this is awesome. Thanks so much</CommentText>
+        <CommentActions>
+          <CommentAction>Reply</CommentAction>
+        </CommentActions>
+      </CommentContent>
     </Comment>
 
     <Form reply>
-      <Form.TextArea />
+      <FormTextArea />
       <Button content='Add Reply' labelPosition='left' icon='edit' primary />
     </Form>
-  </Comment.Group>
+  </CommentGroup>
 )
 
 export default CommentExampleComment
diff --git a/docs/src/examples/views/Comment/Variations/CommentExampleGroupSize.js b/docs/src/examples/views/Comment/Variations/CommentExampleGroupSize.js
index a2aabf3228..27bbd6e0ae 100644
--- a/docs/src/examples/views/Comment/Variations/CommentExampleGroupSize.js
+++ b/docs/src/examples/views/Comment/Variations/CommentExampleGroupSize.js
@@ -1,136 +1,146 @@
 import React from 'react'
-import { Comment, Header } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentMetadata,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentActions,
+  CommentAuthor,
+  Comment,
+  Header,
+} from 'semantic-ui-react'
 
 const CommentExampleGroupSize = () => (
   <div>
-    <Comment.Group size='mini'>
+    <CommentGroup size='mini'>
       <Header as='h3' dividing>
         Mini Comments
       </Header>
 
       <Comment>
-        <Comment.Avatar as='a' src='/images/avatar/small/matt.jpg' />
-        <Comment.Content>
-          <Comment.Author as='a'>Matt</Comment.Author>
-          <Comment.Metadata>
+        <CommentAvatar as='a' src='/images/avatar/small/matt.jpg' />
+        <CommentContent>
+          <CommentAuthor as='a'>Matt</CommentAuthor>
+          <CommentMetadata>
             <span>Today at 5:42PM</span>
-          </Comment.Metadata>
-          <Comment.Text>How artistic!</Comment.Text>
-          <Comment.Actions>
+          </CommentMetadata>
+          <CommentText>How artistic!</CommentText>
+          <CommentActions>
             <a>Reply</a>
-          </Comment.Actions>
-        </Comment.Content>
+          </CommentActions>
+        </CommentContent>
       </Comment>
       <Comment>
-        <Comment.Avatar as='a' src='/images/avatar/small/joe.jpg' />
-        <Comment.Content>
-          <Comment.Author as='a'>Joe Henderson</Comment.Author>
-          <Comment.Metadata>
+        <CommentAvatar as='a' src='/images/avatar/small/joe.jpg' />
+        <CommentContent>
+          <CommentAuthor as='a'>Joe Henderson</CommentAuthor>
+          <CommentMetadata>
             <span>5 days ago</span>
-          </Comment.Metadata>
-          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
-          <Comment.Actions>
+          </CommentMetadata>
+          <CommentText>Dude, this is awesome. Thanks so much</CommentText>
+          <CommentActions>
             <a>Reply</a>
-          </Comment.Actions>
-        </Comment.Content>
+          </CommentActions>
+        </CommentContent>
       </Comment>
-    </Comment.Group>
-    <Comment.Group size='small'>
+    </CommentGroup>
+    <CommentGroup size='small'>
       <Header as='h3' dividing>
         Small Comments
       </Header>
 
       <Comment>
-        <Comment.Avatar as='a' src='/images/avatar/small/matt.jpg' />
-        <Comment.Content>
-          <Comment.Author as='a'>Matt</Comment.Author>
-          <Comment.Metadata>
+        <CommentAvatar as='a' src='/images/avatar/small/matt.jpg' />
+        <CommentContent>
+          <CommentAuthor as='a'>Matt</CommentAuthor>
+          <CommentMetadata>
             <span>Today at 5:42PM</span>
-          </Comment.Metadata>
-          <Comment.Text>How artistic!</Comment.Text>
-          <Comment.Actions>
+          </CommentMetadata>
+          <CommentText>How artistic!</CommentText>
+          <CommentActions>
             <a>Reply</a>
-          </Comment.Actions>
-        </Comment.Content>
+          </CommentActions>
+        </CommentContent>
       </Comment>
       <Comment>
-        <Comment.Avatar as='a' src='/images/avatar/small/joe.jpg' />
-        <Comment.Content>
-          <Comment.Author as='a'>Joe Henderson</Comment.Author>
-          <Comment.Metadata>
+        <CommentAvatar as='a' src='/images/avatar/small/joe.jpg' />
+        <CommentContent>
+          <CommentAuthor as='a'>Joe Henderson</CommentAuthor>
+          <CommentMetadata>
             <span>5 days ago</span>
-          </Comment.Metadata>
-          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
-          <Comment.Actions>
+          </CommentMetadata>
+          <CommentText>Dude, this is awesome. Thanks so much</CommentText>
+          <CommentActions>
             <a>Reply</a>
-          </Comment.Actions>
-        </Comment.Content>
+          </CommentActions>
+        </CommentContent>
       </Comment>
-    </Comment.Group>
-    <Comment.Group size='large'>
+    </CommentGroup>
+    <CommentGroup size='large'>
       <Header as='h3' dividing>
         Large Comments
       </Header>
 
       <Comment>
-        <Comment.Avatar as='a' src='/images/avatar/small/matt.jpg' />
-        <Comment.Content>
-          <Comment.Author as='a'>Matt</Comment.Author>
-          <Comment.Metadata>
+        <CommentAvatar as='a' src='/images/avatar/small/matt.jpg' />
+        <CommentContent>
+          <CommentAuthor as='a'>Matt</CommentAuthor>
+          <CommentMetadata>
             <span>Today at 5:42PM</span>
-          </Comment.Metadata>
-          <Comment.Text>How artistic!</Comment.Text>
-          <Comment.Actions>
+          </CommentMetadata>
+          <CommentText>How artistic!</CommentText>
+          <CommentActions>
             <a>Reply</a>
-          </Comment.Actions>
-        </Comment.Content>
+          </CommentActions>
+        </CommentContent>
       </Comment>
       <Comment>
-        <Comment.Avatar as='a' src='/images/avatar/small/joe.jpg' />
-        <Comment.Content>
-          <Comment.Author as='a'>Joe Henderson</Comment.Author>
-          <Comment.Metadata>
+        <CommentAvatar as='a' src='/images/avatar/small/joe.jpg' />
+        <CommentContent>
+          <CommentAuthor as='a'>Joe Henderson</CommentAuthor>
+          <CommentMetadata>
             <span>5 days ago</span>
-          </Comment.Metadata>
-          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
-          <Comment.Actions>
+          </CommentMetadata>
+          <CommentText>Dude, this is awesome. Thanks so much</CommentText>
+          <CommentActions>
             <a>Reply</a>
-          </Comment.Actions>
-        </Comment.Content>
+          </CommentActions>
+        </CommentContent>
       </Comment>
-    </Comment.Group>
-    <Comment.Group size='massive'>
+    </CommentGroup>
+    <CommentGroup size='massive'>
       <Header as='h3' dividing>
         Massive Comments
       </Header>
 
       <Comment>
-        <Comment.Avatar as='a' src='/images/avatar/small/matt.jpg' />
-        <Comment.Content>
-          <Comment.Author as='a'>Matt</Comment.Author>
-          <Comment.Metadata>
+        <CommentAvatar as='a' src='/images/avatar/small/matt.jpg' />
+        <CommentContent>
+          <CommentAuthor as='a'>Matt</CommentAuthor>
+          <CommentMetadata>
             <span>Today at 5:42PM</span>
-          </Comment.Metadata>
-          <Comment.Text>How artistic!</Comment.Text>
-          <Comment.Actions>
+          </CommentMetadata>
+          <CommentText>How artistic!</CommentText>
+          <CommentActions>
             <a>Reply</a>
-          </Comment.Actions>
-        </Comment.Content>
+          </CommentActions>
+        </CommentContent>
       </Comment>
       <Comment>
-        <Comment.Avatar as='a' src='/images/avatar/small/joe.jpg' />
-        <Comment.Content>
-          <Comment.Author as='a'>Joe Henderson</Comment.Author>
-          <Comment.Metadata>
+        <CommentAvatar as='a' src='/images/avatar/small/joe.jpg' />
+        <CommentContent>
+          <CommentAuthor as='a'>Joe Henderson</CommentAuthor>
+          <CommentMetadata>
             <span>5 days ago</span>
-          </Comment.Metadata>
-          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
-          <Comment.Actions>
+          </CommentMetadata>
+          <CommentText>Dude, this is awesome. Thanks so much</CommentText>
+          <CommentActions>
             <a>Reply</a>
-          </Comment.Actions>
-        </Comment.Content>
+          </CommentActions>
+        </CommentContent>
       </Comment>
-    </Comment.Group>
+    </CommentGroup>
   </div>
 )
 
diff --git a/docs/src/examples/views/Comment/Variations/CommentExampleMinimal.js b/docs/src/examples/views/Comment/Variations/CommentExampleMinimal.js
index 740fe3b901..b6f132af8e 100644
--- a/docs/src/examples/views/Comment/Variations/CommentExampleMinimal.js
+++ b/docs/src/examples/views/Comment/Variations/CommentExampleMinimal.js
@@ -1,77 +1,90 @@
 import React from 'react'
-import { Button, Comment, Form, Header } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentMetadata,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentActions,
+  CommentAuthor,
+  FormTextArea,
+  Button,
+  Comment,
+  Form,
+  Header,
+} from 'semantic-ui-react'
 
 const CommentExampleMinimal = () => (
-  <Comment.Group minimal>
+  <CommentGroup minimal>
     <Header as='h3' dividing>
       Comments
     </Header>
 
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/matt.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Matt</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/matt.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Matt</CommentAuthor>
+        <CommentMetadata>
           <span>Today at 5:42PM</span>
-        </Comment.Metadata>
-        <Comment.Text>How artistic!</Comment.Text>
-        <Comment.Actions>
+        </CommentMetadata>
+        <CommentText>How artistic!</CommentText>
+        <CommentActions>
           <a>Reply</a>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentActions>
+      </CommentContent>
     </Comment>
 
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/elliot.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Elliot Fu</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/elliot.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Elliot Fu</CommentAuthor>
+        <CommentMetadata>
           <span>Yesterday at 12:30AM</span>
-        </Comment.Metadata>
-        <Comment.Text>
+        </CommentMetadata>
+        <CommentText>
           <p>This has been very useful for my research. Thanks as well!</p>
-        </Comment.Text>
-        <Comment.Actions>
+        </CommentText>
+        <CommentActions>
           <a>Reply</a>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentActions>
+      </CommentContent>
 
-      <Comment.Group>
+      <CommentGroup>
         <Comment>
-          <Comment.Avatar as='a' src='/images/avatar/small/jenny.jpg' />
-          <Comment.Content>
-            <Comment.Author as='a'>Jenny Hess</Comment.Author>
-            <Comment.Metadata>
+          <CommentAvatar as='a' src='/images/avatar/small/jenny.jpg' />
+          <CommentContent>
+            <CommentAuthor as='a'>Jenny Hess</CommentAuthor>
+            <CommentMetadata>
               <span>Just now</span>
-            </Comment.Metadata>
-            <Comment.Text>Elliot you are always so right :)</Comment.Text>
-            <Comment.Actions>
+            </CommentMetadata>
+            <CommentText>Elliot you are always so right :)</CommentText>
+            <CommentActions>
               <a>Reply</a>
-            </Comment.Actions>
-          </Comment.Content>
+            </CommentActions>
+          </CommentContent>
         </Comment>
-      </Comment.Group>
+      </CommentGroup>
     </Comment>
 
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/joe.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Joe Henderson</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/joe.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Joe Henderson</CommentAuthor>
+        <CommentMetadata>
           <span>5 days ago</span>
-        </Comment.Metadata>
-        <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
-        <Comment.Actions>
+        </CommentMetadata>
+        <CommentText>Dude, this is awesome. Thanks so much</CommentText>
+        <CommentActions>
           <a>Reply</a>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentActions>
+      </CommentContent>
     </Comment>
 
     <Form reply>
-      <Form.TextArea />
+      <FormTextArea />
       <Button content='Add Reply' labelPosition='left' icon='edit' primary />
     </Form>
-  </Comment.Group>
+  </CommentGroup>
 )
 
 export default CommentExampleMinimal
diff --git a/docs/src/examples/views/Comment/Variations/CommentExampleThreaded.js b/docs/src/examples/views/Comment/Variations/CommentExampleThreaded.js
index e6afbd886a..7e23c758ad 100644
--- a/docs/src/examples/views/Comment/Variations/CommentExampleThreaded.js
+++ b/docs/src/examples/views/Comment/Variations/CommentExampleThreaded.js
@@ -1,77 +1,90 @@
 import React from 'react'
-import { Button, Comment, Form, Header } from 'semantic-ui-react'
+import {
+  CommentText,
+  CommentMetadata,
+  CommentGroup,
+  CommentContent,
+  CommentAvatar,
+  CommentActions,
+  CommentAuthor,
+  FormTextArea,
+  Button,
+  Comment,
+  Form,
+  Header,
+} from 'semantic-ui-react'
 
 const CommentExampleThreaded = () => (
-  <Comment.Group threaded>
+  <CommentGroup threaded>
     <Header as='h3' dividing>
       Comments
     </Header>
 
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/matt.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Matt</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/matt.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Matt</CommentAuthor>
+        <CommentMetadata>
           <span>Today at 5:42PM</span>
-        </Comment.Metadata>
-        <Comment.Text>How artistic!</Comment.Text>
-        <Comment.Actions>
+        </CommentMetadata>
+        <CommentText>How artistic!</CommentText>
+        <CommentActions>
           <a>Reply</a>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentActions>
+      </CommentContent>
     </Comment>
 
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/elliot.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Elliot Fu</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/elliot.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Elliot Fu</CommentAuthor>
+        <CommentMetadata>
           <span>Yesterday at 12:30AM</span>
-        </Comment.Metadata>
-        <Comment.Text>
+        </CommentMetadata>
+        <CommentText>
           <p>This has been very useful for my research. Thanks as well!</p>
-        </Comment.Text>
-        <Comment.Actions>
+        </CommentText>
+        <CommentActions>
           <a>Reply</a>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentActions>
+      </CommentContent>
 
-      <Comment.Group>
+      <CommentGroup>
         <Comment>
-          <Comment.Avatar as='a' src='/images/avatar/small/jenny.jpg' />
-          <Comment.Content>
-            <Comment.Author as='a'>Jenny Hess</Comment.Author>
-            <Comment.Metadata>
+          <CommentAvatar as='a' src='/images/avatar/small/jenny.jpg' />
+          <CommentContent>
+            <CommentAuthor as='a'>Jenny Hess</CommentAuthor>
+            <CommentMetadata>
               <span>Just now</span>
-            </Comment.Metadata>
-            <Comment.Text>Elliot you are always so right :)</Comment.Text>
-            <Comment.Actions>
+            </CommentMetadata>
+            <CommentText>Elliot you are always so right :)</CommentText>
+            <CommentActions>
               <a>Reply</a>
-            </Comment.Actions>
-          </Comment.Content>
+            </CommentActions>
+          </CommentContent>
         </Comment>
-      </Comment.Group>
+      </CommentGroup>
     </Comment>
 
     <Comment>
-      <Comment.Avatar as='a' src='/images/avatar/small/joe.jpg' />
-      <Comment.Content>
-        <Comment.Author as='a'>Joe Henderson</Comment.Author>
-        <Comment.Metadata>
+      <CommentAvatar as='a' src='/images/avatar/small/joe.jpg' />
+      <CommentContent>
+        <CommentAuthor as='a'>Joe Henderson</CommentAuthor>
+        <CommentMetadata>
           <span>5 days ago</span>
-        </Comment.Metadata>
-        <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
-        <Comment.Actions>
+        </CommentMetadata>
+        <CommentText>Dude, this is awesome. Thanks so much</CommentText>
+        <CommentActions>
           <a>Reply</a>
-        </Comment.Actions>
-      </Comment.Content>
+        </CommentActions>
+      </CommentContent>
     </Comment>
 
     <Form reply>
-      <Form.TextArea />
+      <FormTextArea />
       <Button content='Add Reply' labelPosition='left' icon='edit' primary />
     </Form>
-  </Comment.Group>
+  </CommentGroup>
 )
 
 export default CommentExampleThreaded
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleContentDate.js b/docs/src/examples/views/Feed/Content/FeedExampleContentDate.js
index 1e5291b36f..e0ba06a218 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleContentDate.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleContentDate.js
@@ -1,19 +1,26 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+} from 'semantic-ui-react'
 
 const imageSrc = '/images/avatar/small/jenny.jpg'
 
 const FeedExampleContentDate = () => (
   <Feed>
-    <Feed.Event>
-      <Feed.Label image={imageSrc} />
-      <Feed.Content>
-        <Feed.Date>3 days ago</Feed.Date>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedLabel image={imageSrc} />
+      <FeedContent>
+        <FeedDate>3 days ago</FeedDate>
+        <FeedSummary>
           You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-        </Feed.Summary>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedSummary>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleContentDateShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleContentDateShorthand.js
index 6503a8836f..5e408f2bf9 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleContentDateShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleContentDateShorthand.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import { FeedLabel, FeedEvent, FeedContent, Feed } from 'semantic-ui-react'
 
 const image = '/images/avatar/small/jenny.jpg'
 const date = '3 days ago'
@@ -7,12 +7,12 @@ const summary = 'You added Jenny Hess to your coworker group.'
 
 const FeedExampleContentDateShorthand = () => (
   <Feed>
-    <Feed.Event image={image} date={date} summary={summary} />
+    <FeedEvent image={image} date={date} summary={summary} />
 
-    <Feed.Event>
-      <Feed.Label image={image} />
-      <Feed.Content date={date} summary={summary} />
-    </Feed.Event>
+    <FeedEvent>
+      <FeedLabel image={image} />
+      <FeedContent date={date} summary={summary} />
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js
index a69d258e7b..45f1cb1d03 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js
@@ -1,25 +1,33 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedExtra,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+} from 'semantic-ui-react'
 
 const FeedExampleAdditionalInformation = () => (
   <Feed>
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/helen.jpg' />
-      <Feed.Content>
-        <Feed.Date>3 days ago</Feed.Date>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/helen.jpg' />
+      <FeedContent>
+        <FeedDate>3 days ago</FeedDate>
+        <FeedSummary>
           <a>Helen Troy</a> added 2 photos
-        </Feed.Summary>
-        <Feed.Extra images>
+        </FeedSummary>
+        <FeedExtra images>
           <a>
             <img src='/images/wireframe/image.png' />
           </a>
           <a>
             <img src='/images/wireframe/image.png' />
           </a>
-        </Feed.Extra>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedExtra>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
index 9640cf1cc8..589823d20d 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedExtra,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+} from 'semantic-ui-react'
 
 const image = '/images/avatar/small/helen.jpg'
 const date = '3 days ago'
@@ -11,26 +19,26 @@ const extraImages = [
 
 const FeedExampleExtraImagesShorthand = () => (
   <Feed>
-    <Feed.Event
+    <FeedEvent
       image={image}
       date={date}
       summary={summary}
       extraImages={extraImages}
     />
 
-    <Feed.Event>
-      <Feed.Label image={image} />
-      <Feed.Content date={date} summary={summary} extraImages={extraImages} />
-    </Feed.Event>
+    <FeedEvent>
+      <FeedLabel image={image} />
+      <FeedContent date={date} summary={summary} extraImages={extraImages} />
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Label image={image} />
-      <Feed.Content>
-        <Feed.Date content={date} />
-        <Feed.Summary content={summary} />
-        <Feed.Extra images={extraImages} />
-      </Feed.Content>
-    </Feed.Event>
+    <FeedEvent>
+      <FeedLabel image={image} />
+      <FeedContent>
+        <FeedDate content={date} />
+        <FeedSummary content={summary} />
+        <FeedExtra images={extraImages} />
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraText.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraText.js
index 508a0fdf01..b90b234808 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraText.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraText.js
@@ -1,20 +1,28 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedExtra,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+} from 'semantic-ui-react'
 
 const FeedExampleExtraText = () => (
   <Feed>
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/laura.jpg' />
-      <Feed.Content>
-        <Feed.Date>3 days ago</Feed.Date>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/laura.jpg' />
+      <FeedContent>
+        <FeedDate>3 days ago</FeedDate>
+        <FeedSummary>
           <a>Laura Faucet</a> created a post
-        </Feed.Summary>
-        <Feed.Extra text>
+        </FeedSummary>
+        <FeedExtra text>
           Have you seen what's going on in Israel? Can you believe it.
-        </Feed.Extra>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedExtra>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraTextShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraTextShorthand.js
index 48979cd4a5..b839093d55 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraTextShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraTextShorthand.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedExtra,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+} from 'semantic-ui-react'
 
 const image = '/images/avatar/small/laura.jpg'
 const date = '3 days ago'
@@ -8,26 +16,26 @@ const extraText = "Have you seen what's going on in Israel? Can you believe it."
 
 const FeedExampleExtraTextShorthand = () => (
   <Feed>
-    <Feed.Event
+    <FeedEvent
       image={image}
       date={date}
       summary={summary}
       extraText={extraText}
     />
 
-    <Feed.Event>
-      <Feed.Label image={image} />
-      <Feed.Content date={date} summary={summary} extraText={extraText} />
-    </Feed.Event>
+    <FeedEvent>
+      <FeedLabel image={image} />
+      <FeedContent date={date} summary={summary} extraText={extraText} />
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Label image={image} />
-      <Feed.Content>
-        <Feed.Date content={date} />
-        <Feed.Summary content={summary} />
-        <Feed.Extra text content={extraText} />
-      </Feed.Content>
-    </Feed.Event>
+    <FeedEvent>
+      <FeedLabel image={image} />
+      <FeedContent>
+        <FeedDate content={date} />
+        <FeedSummary content={summary} />
+        <FeedExtra text content={extraText} />
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleIconLabel.js b/docs/src/examples/views/Feed/Content/FeedExampleIconLabel.js
index be97e1c4d9..e9349db305 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleIconLabel.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleIconLabel.js
@@ -1,19 +1,27 @@
 import React from 'react'
-import { Feed, Icon } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+  Icon,
+} from 'semantic-ui-react'
 
 const FeedExampleIconLabel = () => (
   <Feed>
-    <Feed.Event>
-      <Feed.Label>
+    <FeedEvent>
+      <FeedLabel>
         <Icon name='pencil' />
-      </Feed.Label>
-      <Feed.Content>
-        <Feed.Date>Today</Feed.Date>
-        <Feed.Summary>
+      </FeedLabel>
+      <FeedContent>
+        <FeedDate>Today</FeedDate>
+        <FeedSummary>
           You posted on your friend <a>Stevie Feliciano's</a> wall.
-        </Feed.Summary>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedSummary>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleIconLabelShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleIconLabelShorthand.js
index 2b967cf099..409ebb5338 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleIconLabelShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleIconLabelShorthand.js
@@ -1,21 +1,21 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import { FeedLabel, FeedEvent, FeedContent, Feed } from 'semantic-ui-react'
 
 const FeedExampleIconLabelShorthand = () => (
   <Feed>
-    <Feed.Event
+    <FeedEvent
       icon='pencil'
       date='Today'
       summary="You posted on your friend Stevie Feliciano's wall."
     />
 
-    <Feed.Event>
-      <Feed.Label icon='pencil' />
-      <Feed.Content
+    <FeedEvent>
+      <FeedLabel icon='pencil' />
+      <FeedContent
         date='Today'
         summary="You posted on your friend Stevie Feliciano's wall."
       />
-    </Feed.Event>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js b/docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js
index 7b0a858283..a231ef8136 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js
@@ -1,16 +1,16 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import { FeedLabel, FeedEvent, FeedContent, Feed } from 'semantic-ui-react'
 
 const FeedExampleImageLabel = () => (
   <Feed>
-    <Feed.Event>
-      <Feed.Label>
+    <FeedEvent>
+      <FeedLabel>
         <img src='/images/avatar/small/elliot.jpg' />
-      </Feed.Label>
-      <Feed.Content>
+      </FeedLabel>
+      <FeedContent>
         You added Elliot Fu to the group <a>Coworkers</a>
-      </Feed.Content>
-    </Feed.Event>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleImageLabelShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleImageLabelShorthand.js
index 150ede98b3..93f0a2cc35 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleImageLabelShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleImageLabelShorthand.js
@@ -1,16 +1,16 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import { FeedLabel, FeedEvent, FeedContent, Feed } from 'semantic-ui-react'
 
 const FeedExampleImageLabelShorthand = () => (
   <Feed>
-    <Feed.Event
+    <FeedEvent
       image='/images/avatar/small/elliot.jpg'
       content='You added Elliot Fu to the group Coworkers'
     />
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/elliot.jpg' />
-      <Feed.Content content='You added Elliot Fu to the group Coworkers' />
-    </Feed.Event>
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/elliot.jpg' />
+      <FeedContent content='You added Elliot Fu to the group Coworkers' />
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js b/docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js
index 4c0aa2aab9..90b19a3e22 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js
@@ -1,19 +1,26 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+} from 'semantic-ui-react'
 
 const FeedExampleSummaryDate = () => (
   <Feed>
-    <Feed.Event>
-      <Feed.Label>
+    <FeedEvent>
+      <FeedLabel>
         <img src='/images/avatar/small/jenny.jpg' />
-      </Feed.Label>
-      <Feed.Content>
-        <Feed.Summary>
+      </FeedLabel>
+      <FeedContent>
+        <FeedSummary>
           You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-          <Feed.Date>3 days ago</Feed.Date>
-        </Feed.Summary>
-      </Feed.Content>
-    </Feed.Event>
+          <FeedDate>3 days ago</FeedDate>
+        </FeedSummary>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleSummaryDateShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleSummaryDateShorthand.js
index 2d83b6fc57..57fd903be0 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleSummaryDateShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleSummaryDateShorthand.js
@@ -1,17 +1,23 @@
 import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedLabel,
+  FeedEvent,
+  FeedContent,
+  Feed,
+} from 'semantic-ui-react'
 
 const FeedExampleSummaryDate = () => (
   <Feed>
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/jenny.jpg' />
-      <Feed.Content>
-        <Feed.Summary
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/jenny.jpg' />
+      <FeedContent>
+        <FeedSummary
           content='You added Jenny Hess to your coworker group.'
           date='3 days ago'
         />
-      </Feed.Content>
-    </Feed.Event>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Types/FeedExampleBasic.js b/docs/src/examples/views/Feed/Types/FeedExampleBasic.js
index 36172262d6..f53ee37d96 100644
--- a/docs/src/examples/views/Feed/Types/FeedExampleBasic.js
+++ b/docs/src/examples/views/Feed/Types/FeedExampleBasic.js
@@ -1,108 +1,120 @@
 import React from 'react'
-import { Feed, Icon } from 'semantic-ui-react'
+import {
+  FeedUser,
+  FeedSummary,
+  FeedMeta,
+  FeedLike,
+  FeedLabel,
+  FeedExtra,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+  Icon,
+} from 'semantic-ui-react'
 
 const FeedExampleBasic = () => (
   <Feed>
-    <Feed.Event>
-      <Feed.Label>
+    <FeedEvent>
+      <FeedLabel>
         <img src='/images/avatar/small/elliot.jpg' />
-      </Feed.Label>
-      <Feed.Content>
-        <Feed.Summary>
-          <Feed.User>Elliot Fu</Feed.User> added you as a friend
-          <Feed.Date>1 Hour Ago</Feed.Date>
-        </Feed.Summary>
-        <Feed.Meta>
-          <Feed.Like>
+      </FeedLabel>
+      <FeedContent>
+        <FeedSummary>
+          <FeedUser>Elliot Fu</FeedUser> added you as a friend
+          <FeedDate>1 Hour Ago</FeedDate>
+        </FeedSummary>
+        <FeedMeta>
+          <FeedLike>
             <Icon name='like' />4 Likes
-          </Feed.Like>
-        </Feed.Meta>
-      </Feed.Content>
-    </Feed.Event>
+          </FeedLike>
+        </FeedMeta>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/helen.jpg' />
-      <Feed.Content>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/helen.jpg' />
+      <FeedContent>
+        <FeedSummary>
           <a>Helen Troy</a> added <a>2 new illustrations</a>
-          <Feed.Date>4 days ago</Feed.Date>
-        </Feed.Summary>
-        <Feed.Extra images>
+          <FeedDate>4 days ago</FeedDate>
+        </FeedSummary>
+        <FeedExtra images>
           <a>
             <img src='/images/wireframe/image.png' />
           </a>
           <a>
             <img src='/images/wireframe/image.png' />
           </a>
-        </Feed.Extra>
-        <Feed.Meta>
-          <Feed.Like>
+        </FeedExtra>
+        <FeedMeta>
+          <FeedLike>
             <Icon name='like' />1 Like
-          </Feed.Like>
-        </Feed.Meta>
-      </Feed.Content>
-    </Feed.Event>
+          </FeedLike>
+        </FeedMeta>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/jenny.jpg' />
-      <Feed.Content>
-        <Feed.Summary
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/jenny.jpg' />
+      <FeedContent>
+        <FeedSummary
           date='2 Days Ago'
           user='Jenny Hess'
           content='add you as a friend'
         />
-        <Feed.Meta>
-          <Feed.Like>
+        <FeedMeta>
+          <FeedLike>
             <Icon name='like' />8 Likes
-          </Feed.Like>
-        </Feed.Meta>
-      </Feed.Content>
-    </Feed.Event>
+          </FeedLike>
+        </FeedMeta>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/joe.jpg' />
-      <Feed.Content>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/joe.jpg' />
+      <FeedContent>
+        <FeedSummary>
           <a>Joe Henderson</a> posted on his page
-          <Feed.Date>3 days ago</Feed.Date>
-        </Feed.Summary>
-        <Feed.Extra text>
+          <FeedDate>3 days ago</FeedDate>
+        </FeedSummary>
+        <FeedExtra text>
           Ours is a life of constant reruns. We're always circling back to where
           we'd we started, then starting all over again. Even if we don't run
           extra laps that day, we surely will come back for more of the same
           another day soon.
-        </Feed.Extra>
-        <Feed.Meta>
-          <Feed.Like>
+        </FeedExtra>
+        <FeedMeta>
+          <FeedLike>
             <Icon name='like' />5 Likes
-          </Feed.Like>
-        </Feed.Meta>
-      </Feed.Content>
-    </Feed.Event>
+          </FeedLike>
+        </FeedMeta>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/justen.jpg' />
-      <Feed.Content>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/justen.jpg' />
+      <FeedContent>
+        <FeedSummary>
           <a>Justen Kitsune</a> added <a>2 new photos</a> of you
-          <Feed.Date>4 days ago</Feed.Date>
-        </Feed.Summary>
-        <Feed.Extra images>
+          <FeedDate>4 days ago</FeedDate>
+        </FeedSummary>
+        <FeedExtra images>
           <a>
             <img src='/images/wireframe/image.png' />
           </a>
           <a>
             <img src='/images/wireframe/image.png' />
           </a>
-        </Feed.Extra>
-        <Feed.Meta>
-          <Feed.Like>
+        </FeedExtra>
+        <FeedMeta>
+          <FeedLike>
             <Icon name='like' />
             41 Likes
-          </Feed.Like>
-        </Feed.Meta>
-      </Feed.Content>
-    </Feed.Event>
+          </FeedLike>
+        </FeedMeta>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js b/docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js
index dbddca3da9..feab56f31b 100644
--- a/docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js
+++ b/docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js
@@ -1,59 +1,71 @@
 import React from 'react'
-import { Feed, Icon } from 'semantic-ui-react'
+import {
+  FeedUser,
+  FeedSummary,
+  FeedMeta,
+  FeedLike,
+  FeedLabel,
+  FeedExtra,
+  FeedEvent,
+  FeedDate,
+  FeedContent,
+  Feed,
+  Icon,
+} from 'semantic-ui-react'
 
 const FeedExampleSizeLarge = () => (
   <Feed size='large'>
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/elliot.jpg' />
-      <Feed.Content>
-        <Feed.Summary>
-          <Feed.User>Elliot Fu</Feed.User> added you as a friend
-          <Feed.Date>1 Hour Ago</Feed.Date>
-        </Feed.Summary>
-        <Feed.Meta>
-          <Feed.Like>
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/elliot.jpg' />
+      <FeedContent>
+        <FeedSummary>
+          <FeedUser>Elliot Fu</FeedUser> added you as a friend
+          <FeedDate>1 Hour Ago</FeedDate>
+        </FeedSummary>
+        <FeedMeta>
+          <FeedLike>
             <Icon name='like' />4 Likes
-          </Feed.Like>
-        </Feed.Meta>
-      </Feed.Content>
-    </Feed.Event>
+          </FeedLike>
+        </FeedMeta>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Label icon='pencil' />
-      <Feed.Content>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedLabel icon='pencil' />
+      <FeedContent>
+        <FeedSummary>
           You submitted a new post to the page
-          <Feed.Date>3 days ago</Feed.Date>
-        </Feed.Summary>
-        <Feed.Extra text>
+          <FeedDate>3 days ago</FeedDate>
+        </FeedSummary>
+        <FeedExtra text>
           I'm having a BBQ this weekend. Come by around 4pm if you can.
-        </Feed.Extra>
-        <Feed.Meta>
-          <Feed.Like>11 Likes</Feed.Like>
-        </Feed.Meta>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedExtra>
+        <FeedMeta>
+          <FeedLike>11 Likes</FeedLike>
+        </FeedMeta>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Label image='/images/avatar/small/helen.jpg' />
-      <Feed.Content>
-        <Feed.Date>4 days ago</Feed.Date>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedLabel image='/images/avatar/small/helen.jpg' />
+      <FeedContent>
+        <FeedDate>4 days ago</FeedDate>
+        <FeedSummary>
           <a>Helen Troy</a> added <a>2 new illustrations</a>
-        </Feed.Summary>
+        </FeedSummary>
 
-        <Feed.Extra images>
+        <FeedExtra images>
           <a>
             <img src='/images/wireframe/image.png' />
           </a>
           <a>
             <img src='/images/wireframe/image.png' />
           </a>
-        </Feed.Extra>
+        </FeedExtra>
 
-        <Feed.Meta like='1 Like' />
-      </Feed.Content>
-    </Feed.Event>
+        <FeedMeta like='1 Like' />
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Feed/Variations/FeedExampleSizeSmall.js b/docs/src/examples/views/Feed/Variations/FeedExampleSizeSmall.js
index 4326fa22cd..957aca54d5 100644
--- a/docs/src/examples/views/Feed/Variations/FeedExampleSizeSmall.js
+++ b/docs/src/examples/views/Feed/Variations/FeedExampleSizeSmall.js
@@ -1,41 +1,47 @@
 import React from 'react'
-import { Feed, Header } from 'semantic-ui-react'
+import {
+  FeedSummary,
+  FeedEvent,
+  FeedContent,
+  Feed,
+  Header,
+} from 'semantic-ui-react'
 
 const FeedExampleSizeSmall = () => (
   <Feed size='small'>
     <Header as='h4'>Followers Activity</Header>
 
-    <Feed.Event>
-      <Feed.Content>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedContent>
+        <FeedSummary>
           <a>Elliot Fu</a> added <a>Jenny Hess</a> as a friend
-        </Feed.Summary>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedSummary>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Content>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedContent>
+        <FeedSummary>
           <a>Stevie Feliciano</a> added <a>Elliot Fu</a> as a friend
-        </Feed.Summary>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedSummary>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Content>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedContent>
+        <FeedSummary>
           <a>Helen Troy</a> added <a>Christian Rocha</a> as a friend
-        </Feed.Summary>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedSummary>
+      </FeedContent>
+    </FeedEvent>
 
-    <Feed.Event>
-      <Feed.Content>
-        <Feed.Summary>
+    <FeedEvent>
+      <FeedContent>
+        <FeedSummary>
           <a>Christian Rocha</a> signed up for the site.
-        </Feed.Summary>
-      </Feed.Content>
-    </Feed.Event>
+        </FeedSummary>
+      </FeedContent>
+    </FeedEvent>
   </Feed>
 )
 
diff --git a/docs/src/examples/views/Item/Content/ItemExampleContents.js b/docs/src/examples/views/Item/Content/ItemExampleContents.js
index d4613103b0..0b3178457f 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleContents.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleContents.js
@@ -1,23 +1,23 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import { ItemImage, ItemGroup, ItemContent, Item } from 'semantic-ui-react'
 
 const ItemExampleContents = () => (
-  <Item.Group divided>
+  <ItemGroup divided>
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
-      <Item.Content verticalAlign='middle'>Content A</Item.Content>
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
+      <ItemContent verticalAlign='middle'>Content A</ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
-      <Item.Content verticalAlign='middle'>Content B</Item.Content>
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
+      <ItemContent verticalAlign='middle'>Content B</ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
-      <Item.Content content='Content C' verticalAlign='middle' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
+      <ItemContent content='Content C' verticalAlign='middle' />
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleContents
diff --git a/docs/src/examples/views/Item/Content/ItemExampleDescriptions.js b/docs/src/examples/views/Item/Content/ItemExampleDescriptions.js
index 015202b2da..c0644847bb 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleDescriptions.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleDescriptions.js
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemDescription,
+  ItemContent,
+  Item,
+} from 'semantic-ui-react'
 
 const description = [
   'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',
@@ -7,36 +14,36 @@ const description = [
 ].join(' ')
 
 const ItemExampleDescriptions = () => (
-  <Item.Group>
+  <ItemGroup>
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>Cute Dog</Item.Header>
-        <Item.Description>
+      <ItemContent>
+        <ItemHeader as='a'>Cute Dog</ItemHeader>
+        <ItemDescription>
           <p>{description}</p>
           <p>
             Many people also have their own barometers for what makes a cute
             dog.
           </p>
-        </Item.Description>
-      </Item.Content>
+        </ItemDescription>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>Cute Dog</Item.Header>
-        <Item.Description content={description} />
-      </Item.Content>
+      <ItemContent>
+        <ItemHeader as='a'>Cute Dog</ItemHeader>
+        <ItemDescription content={description} />
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
-      <Item.Content header='Cute Dog' description={description} />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
+      <ItemContent header='Cute Dog' description={description} />
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleDescriptions
diff --git a/docs/src/examples/views/Item/Content/ItemExampleExtraContent.js b/docs/src/examples/views/Item/Content/ItemExampleExtraContent.js
index 7a1727f36e..b783f93937 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleExtraContent.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleExtraContent.js
@@ -1,37 +1,47 @@
 import React from 'react'
-import { Icon, Image, Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemExtra,
+  ItemDescription,
+  ItemContent,
+  Icon,
+  Image,
+  Item,
+} from 'semantic-ui-react'
 
 const paragraph = <Image src='/images/wireframe/short-paragraph.png' />
 
 const ItemExampleExtraContent = () => (
-  <Item.Group>
+  <ItemGroup>
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>Cute Dog</Item.Header>
-        <Item.Description>{paragraph}</Item.Description>
-        <Item.Extra>
+      <ItemContent>
+        <ItemHeader as='a'>Cute Dog</ItemHeader>
+        <ItemDescription>{paragraph}</ItemDescription>
+        <ItemExtra>
           <Icon color='green' name='check' /> 121 Votes
-        </Item.Extra>
-      </Item.Content>
+        </ItemExtra>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>Cute Dog</Item.Header>
-        <Item.Description>{paragraph}</Item.Description>
-        <Item.Extra content='121 Votes' />
-      </Item.Content>
+      <ItemContent>
+        <ItemHeader as='a'>Cute Dog</ItemHeader>
+        <ItemDescription>{paragraph}</ItemDescription>
+        <ItemExtra content='121 Votes' />
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
-      <Item.Content header='Cute Dog' extra='121 Votes' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
+      <ItemContent header='Cute Dog' extra='121 Votes' />
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleExtraContent
diff --git a/docs/src/examples/views/Item/Content/ItemExampleHeaders.js b/docs/src/examples/views/Item/Content/ItemExampleHeaders.js
index 66abc124b5..979f836dcc 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleHeaders.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleHeaders.js
@@ -1,27 +1,33 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemContent,
+  Item,
+} from 'semantic-ui-react'
 
 const ItemExampleHeaders = () => (
-  <Item.Group>
+  <ItemGroup>
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
-      <Item.Content verticalAlign='middle'>
-        <Item.Header as='a'>12 Years a Slave</Item.Header>
-      </Item.Content>
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader as='a'>12 Years a Slave</ItemHeader>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
-      <Item.Content verticalAlign='middle'>
-        <Item.Header as='a' content='My Neighbor Totoro' />
-      </Item.Content>
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader as='a' content='My Neighbor Totoro' />
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
-      <Item.Content header='Watchmen' verticalAlign='middle' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
+      <ItemContent header='Watchmen' verticalAlign='middle' />
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleHeaders
diff --git a/docs/src/examples/views/Item/Content/ItemExampleImages.js b/docs/src/examples/views/Item/Content/ItemExampleImages.js
index b2ff61a2de..583b5f8ceb 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleImages.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleImages.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import { ItemImage, ItemGroup, Item } from 'semantic-ui-react'
 
 const ItemExampleImages = () => (
-  <Item.Group divided>
+  <ItemGroup divided>
     <Item>
-      <Item.Image src='/images/wireframe/image.png' />
+      <ItemImage src='/images/wireframe/image.png' />
     </Item>
 
     <Item>
-      <Item.Image src='/images/wireframe/image.png' />
+      <ItemImage src='/images/wireframe/image.png' />
     </Item>
 
     <Item image='/images/wireframe/image.png' />
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleImages
diff --git a/docs/src/examples/views/Item/Content/ItemExampleLink.js b/docs/src/examples/views/Item/Content/ItemExampleLink.js
index 87e5fcf291..298eb4c92a 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleLink.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleLink.js
@@ -1,38 +1,47 @@
 import React from 'react'
-import { Image, Item } from 'semantic-ui-react'
+import {
+  ItemMeta,
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemDescription,
+  ItemContent,
+  Image,
+  Item,
+} from 'semantic-ui-react'
 
 const paragraph = <Image src='/images/wireframe/short-paragraph.png' />
 
 const ItemExampleLink = () => (
-  <Item.Group>
+  <ItemGroup>
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header>Arrowhead Valley Camp</Item.Header>
-        <Item.Meta>
+      <ItemContent>
+        <ItemHeader>Arrowhead Valley Camp</ItemHeader>
+        <ItemMeta>
           <span className='price'>$1200</span>
           <span className='stay'>1 Month</span>
-        </Item.Meta>
-        <Item.Description>{paragraph}</Item.Description>
-      </Item.Content>
+        </ItemMeta>
+        <ItemDescription>{paragraph}</ItemDescription>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header>Buck's Homebrew Stayaway</Item.Header>
-        <Item.Meta content='$1000 2 Weeks' />
-        <Item.Description>{paragraph}</Item.Description>
-      </Item.Content>
+      <ItemContent>
+        <ItemHeader>Buck's Homebrew Stayaway</ItemHeader>
+        <ItemMeta content='$1000 2 Weeks' />
+        <ItemDescription>{paragraph}</ItemDescription>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
-      <Item.Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
+      <ItemContent header='Arrowhead Valley Camp' meta='$1200 1 Month' />
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleLink
diff --git a/docs/src/examples/views/Item/Content/ItemExampleMetadata.js b/docs/src/examples/views/Item/Content/ItemExampleMetadata.js
index 00a9a5a387..232962b1f8 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleMetadata.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleMetadata.js
@@ -1,38 +1,47 @@
 import React from 'react'
-import { Image, Item } from 'semantic-ui-react'
+import {
+  ItemMeta,
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemDescription,
+  ItemContent,
+  Image,
+  Item,
+} from 'semantic-ui-react'
 
 const paragraph = <Image src='/images/wireframe/short-paragraph.png' />
 
 const ItemExampleMetadata = () => (
-  <Item.Group>
+  <ItemGroup>
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header>Arrowhead Valley Camp</Item.Header>
-        <Item.Meta>
+      <ItemContent>
+        <ItemHeader>Arrowhead Valley Camp</ItemHeader>
+        <ItemMeta>
           <span className='price'>$1200</span>
           <span className='stay'>1 Month</span>
-        </Item.Meta>
-        <Item.Description>{paragraph}</Item.Description>
-      </Item.Content>
+        </ItemMeta>
+        <ItemDescription>{paragraph}</ItemDescription>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header>Buck's Homebrew Stayaway</Item.Header>
-        <Item.Meta content='$1000 2 Weeks' />
-        <Item.Description>{paragraph}</Item.Description>
-      </Item.Content>
+      <ItemContent>
+        <ItemHeader>Buck's Homebrew Stayaway</ItemHeader>
+        <ItemMeta content='$1000 2 Weeks' />
+        <ItemDescription>{paragraph}</ItemDescription>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
-      <Item.Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
+      <ItemContent header='Arrowhead Valley Camp' meta='$1200 1 Month' />
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleMetadata
diff --git a/docs/src/examples/views/Item/Content/ItemExampleRatings.js b/docs/src/examples/views/Item/Content/ItemExampleRatings.js
index 6275ba14b2..dda68b9d65 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleRatings.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleRatings.js
@@ -1,30 +1,37 @@
 import React from 'react'
-import { Icon, Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemContent,
+  Icon,
+  Item,
+} from 'semantic-ui-react'
 
 const ItemExampleRatings = () => (
-  <Item.Group>
+  <ItemGroup>
     <Item>
-      <Item.Image size='tiny' src='/images/avatar/large/jenny.jpg' />
+      <ItemImage size='tiny' src='/images/avatar/large/jenny.jpg' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader>
           <Icon name='like' />
           Veronika Ossi
-        </Item.Header>
-      </Item.Content>
+        </ItemHeader>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/avatar/large/justen.jpg' />
+      <ItemImage size='tiny' src='/images/avatar/large/justen.jpg' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader>
           <Icon name='favorite' />
           Justen Kitsune
-        </Item.Header>
-      </Item.Content>
+        </ItemHeader>
+      </ItemContent>
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleRatings
diff --git a/docs/src/examples/views/Item/Types/ItemExampleItems.js b/docs/src/examples/views/Item/Types/ItemExampleItems.js
index 97165618bd..eaea2fadb5 100644
--- a/docs/src/examples/views/Item/Types/ItemExampleItems.js
+++ b/docs/src/examples/views/Item/Types/ItemExampleItems.js
@@ -1,34 +1,44 @@
 import React from 'react'
-import { Image, Item } from 'semantic-ui-react'
+import {
+  ItemMeta,
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemExtra,
+  ItemDescription,
+  ItemContent,
+  Image,
+  Item,
+} from 'semantic-ui-react'
 
 const ItemExampleItems = () => (
-  <Item.Group>
+  <ItemGroup>
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>Header</Item.Header>
-        <Item.Meta>Description</Item.Meta>
-        <Item.Description>
+      <ItemContent>
+        <ItemHeader as='a'>Header</ItemHeader>
+        <ItemMeta>Description</ItemMeta>
+        <ItemDescription>
           <Image src='/images/wireframe/short-paragraph.png' />
-        </Item.Description>
-        <Item.Extra>Additional Details</Item.Extra>
-      </Item.Content>
+        </ItemDescription>
+        <ItemExtra>Additional Details</ItemExtra>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>Header</Item.Header>
-        <Item.Meta>Description</Item.Meta>
-        <Item.Description>
+      <ItemContent>
+        <ItemHeader as='a'>Header</ItemHeader>
+        <ItemMeta>Description</ItemMeta>
+        <ItemDescription>
           <Image src='/images/wireframe/short-paragraph.png' />
-        </Item.Description>
-        <Item.Extra>Additional Details</Item.Extra>
-      </Item.Content>
+        </ItemDescription>
+        <ItemExtra>Additional Details</ItemExtra>
+      </ItemContent>
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleItems
diff --git a/docs/src/examples/views/Item/Types/ItemExampleProps.js b/docs/src/examples/views/Item/Types/ItemExampleProps.js
index b781cf0d2f..0470ca4060 100644
--- a/docs/src/examples/views/Item/Types/ItemExampleProps.js
+++ b/docs/src/examples/views/Item/Types/ItemExampleProps.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import { ItemGroup } from 'semantic-ui-react'
 
 const items = [
   {
@@ -20,6 +20,6 @@ const items = [
   },
 ]
 
-const ItemExampleProps = () => <Item.Group items={items} />
+const ItemExampleProps = () => <ItemGroup items={items} />
 
 export default ItemExampleProps
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleAlignment.js b/docs/src/examples/views/Item/Variations/ItemExampleAlignment.js
index a92b30fcac..8143c4ee10 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleAlignment.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleAlignment.js
@@ -1,32 +1,38 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemContent,
+  Item,
+} from 'semantic-ui-react'
 
 const ItemExampleAlignment = () => (
-  <Item.Group>
+  <ItemGroup>
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='top'>
-        <Item.Header>Top Aligned</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='top'>
+        <ItemHeader>Top Aligned</ItemHeader>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header>Middle Aligned</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader>Middle Aligned</ItemHeader>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='bottom'>
-        <Item.Header>Bottom Aligned</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='bottom'>
+        <ItemHeader>Bottom Aligned</ItemHeader>
+      </ItemContent>
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleAlignment
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleDivided.js b/docs/src/examples/views/Item/Variations/ItemExampleDivided.js
index 2acd9fc038..2c9b359bce 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleDivided.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleDivided.js
@@ -1,63 +1,76 @@
 import React from 'react'
-import { Button, Icon, Image, Item, Label } from 'semantic-ui-react'
+import {
+  ItemMeta,
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemExtra,
+  ItemDescription,
+  ItemContent,
+  Button,
+  Icon,
+  Image,
+  Item,
+  Label,
+} from 'semantic-ui-react'
 
 const paragraph = <Image src='/images/wireframe/short-paragraph.png' />
 
 const ItemExampleDivided = () => (
-  <Item.Group divided>
+  <ItemGroup divided>
     <Item>
-      <Item.Image src='/images/wireframe/image.png' />
+      <ItemImage src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>12 Years a Slave</Item.Header>
-        <Item.Meta>
+      <ItemContent>
+        <ItemHeader as='a'>12 Years a Slave</ItemHeader>
+        <ItemMeta>
           <span className='cinema'>Union Square 14</span>
-        </Item.Meta>
-        <Item.Description>{paragraph}</Item.Description>
-        <Item.Extra>
+        </ItemMeta>
+        <ItemDescription>{paragraph}</ItemDescription>
+        <ItemExtra>
           <Label>IMAX</Label>
           <Label icon='globe' content='Additional Languages' />
-        </Item.Extra>
-      </Item.Content>
+        </ItemExtra>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image src='/images/wireframe/image.png' />
+      <ItemImage src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>My Neighbor Totoro</Item.Header>
-        <Item.Meta>
+      <ItemContent>
+        <ItemHeader as='a'>My Neighbor Totoro</ItemHeader>
+        <ItemMeta>
           <span className='cinema'>IFC Cinema</span>
-        </Item.Meta>
-        <Item.Description>{paragraph}</Item.Description>
-        <Item.Extra>
+        </ItemMeta>
+        <ItemDescription>{paragraph}</ItemDescription>
+        <ItemExtra>
           <Button primary floated='right'>
             Buy tickets
             <Icon name='right chevron' />
           </Button>
           <Label>Limited</Label>
-        </Item.Extra>
-      </Item.Content>
+        </ItemExtra>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image src='/images/wireframe/image.png' />
+      <ItemImage src='/images/wireframe/image.png' />
 
-      <Item.Content>
-        <Item.Header as='a'>Watchmen</Item.Header>
-        <Item.Meta>
+      <ItemContent>
+        <ItemHeader as='a'>Watchmen</ItemHeader>
+        <ItemMeta>
           <span className='cinema'>IFC</span>
-        </Item.Meta>
-        <Item.Description>{paragraph}</Item.Description>
-        <Item.Extra>
+        </ItemMeta>
+        <ItemDescription>{paragraph}</ItemDescription>
+        <ItemExtra>
           <Button primary floated='right'>
             Buy tickets
             <Icon name='right chevron' />
           </Button>
-        </Item.Extra>
-      </Item.Content>
+        </ItemExtra>
+      </ItemContent>
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleDivided
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleFloated.js b/docs/src/examples/views/Item/Variations/ItemExampleFloated.js
index 1655d619ca..990ca0baac 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleFloated.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleFloated.js
@@ -1,46 +1,56 @@
 import React from 'react'
-import { Button, Image, Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemExtra,
+  ItemDescription,
+  ItemContent,
+  Button,
+  Image,
+  Item,
+} from 'semantic-ui-react'
 
 const paragraph = <Image src='/images/wireframe/short-paragraph.png' />
 
 const ItemExampleFloated = () => (
-  <Item.Group relaxed>
+  <ItemGroup relaxed>
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header>Content A</Item.Header>
-        <Item.Description>{paragraph}</Item.Description>
-        <Item.Extra>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader>Content A</ItemHeader>
+        <ItemDescription>{paragraph}</ItemDescription>
+        <ItemExtra>
           <Button floated='right'>Action</Button>
-        </Item.Extra>
-      </Item.Content>
+        </ItemExtra>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header>Content B</Item.Header>
-        <Item.Description>{paragraph}</Item.Description>
-        <Item.Extra>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader>Content B</ItemHeader>
+        <ItemDescription>{paragraph}</ItemDescription>
+        <ItemExtra>
           <Button floated='right'>Action</Button>
-        </Item.Extra>
-      </Item.Content>
+        </ItemExtra>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='small' src='/images/wireframe/image.png' />
+      <ItemImage size='small' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header>Content C</Item.Header>
-        <Item.Description>{paragraph}</Item.Description>
-        <Item.Extra>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader>Content C</ItemHeader>
+        <ItemDescription>{paragraph}</ItemDescription>
+        <ItemExtra>
           <Button floated='right'>Action</Button>
-        </Item.Extra>
-      </Item.Content>
+        </ItemExtra>
+      </ItemContent>
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleFloated
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleLink.js b/docs/src/examples/views/Item/Variations/ItemExampleLink.js
index 29101f6f45..48231c12a1 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleLink.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleLink.js
@@ -1,37 +1,45 @@
 import React from 'react'
-import { Image as ImageComponent, Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemDescription,
+  ItemContent,
+  Image as ImageComponent,
+  Item,
+} from 'semantic-ui-react'
 
 const paragraph = <ImageComponent src='/images/wireframe/short-paragraph.png' />
 
 const ItemExampleLink = () => (
-  <Item.Group link>
+  <ItemGroup link>
     <Item>
-      <Item.Image size='tiny' src='/images/avatar/large/stevie.jpg' />
+      <ItemImage size='tiny' src='/images/avatar/large/stevie.jpg' />
 
-      <Item.Content>
-        <Item.Header>Stevie Feliciano</Item.Header>
-        <Item.Description>{paragraph}</Item.Description>
-      </Item.Content>
+      <ItemContent>
+        <ItemHeader>Stevie Feliciano</ItemHeader>
+        <ItemDescription>{paragraph}</ItemDescription>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/avatar/large/veronika.jpg' />
+      <ItemImage size='tiny' src='/images/avatar/large/veronika.jpg' />
 
-      <Item.Content>
-        <Item.Header>Veronika Ossi</Item.Header>
-        <Item.Description>{paragraph}</Item.Description>
-      </Item.Content>
+      <ItemContent>
+        <ItemHeader>Veronika Ossi</ItemHeader>
+        <ItemDescription>{paragraph}</ItemDescription>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/avatar/large/jenny.jpg' />
+      <ItemImage size='tiny' src='/images/avatar/large/jenny.jpg' />
 
-      <Item.Content>
-        <Item.Header>Jenny Hess</Item.Header>
-        <Item.Description>{paragraph}</Item.Description>
-      </Item.Content>
+      <ItemContent>
+        <ItemHeader>Jenny Hess</ItemHeader>
+        <ItemDescription>{paragraph}</ItemDescription>
+      </ItemContent>
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleLink
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js b/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js
index 1f858754cf..809c7dee67 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js
@@ -1,32 +1,38 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemContent,
+  Item,
+} from 'semantic-ui-react'
 
 const ItemExampleRelaxed = () => (
-  <Item.Group relaxed>
+  <ItemGroup relaxed>
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header as='a'>12 Years a Slave</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader as='a'>12 Years a Slave</ItemHeader>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header as='a'>My Neighbor Totoro</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader as='a'>My Neighbor Totoro</ItemHeader>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header as='a'>Watchmen</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader as='a'>Watchmen</ItemHeader>
+      </ItemContent>
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleRelaxed
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js b/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js
index 11ec71d0fb..5fe0e3ae24 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js
@@ -1,18 +1,18 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import { ItemImage, ItemGroup, Item } from 'semantic-ui-react'
 
 const ItemExampleImages = () => (
-  <Item.Group divided unstackable>
+  <ItemGroup divided unstackable>
     <Item>
-      <Item.Image src='/images/wireframe/image.png' />
+      <ItemImage src='/images/wireframe/image.png' />
     </Item>
 
     <Item>
-      <Item.Image src='/images/wireframe/image.png' />
+      <ItemImage src='/images/wireframe/image.png' />
     </Item>
 
     <Item image='/images/wireframe/image.png' />
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleImages
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js b/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js
index 809225d99e..c2b2f0ee5d 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js
@@ -1,32 +1,38 @@
 import React from 'react'
-import { Item } from 'semantic-ui-react'
+import {
+  ItemImage,
+  ItemHeader,
+  ItemGroup,
+  ItemContent,
+  Item,
+} from 'semantic-ui-react'
 
 const ItemExampleVeryRelaxed = () => (
-  <Item.Group relaxed='very'>
+  <ItemGroup relaxed='very'>
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header as='a'>12 Years a Slave</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader as='a'>12 Years a Slave</ItemHeader>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header as='a'>My Neighbor Totoro</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader as='a'>My Neighbor Totoro</ItemHeader>
+      </ItemContent>
     </Item>
 
     <Item>
-      <Item.Image size='tiny' src='/images/wireframe/image.png' />
+      <ItemImage size='tiny' src='/images/wireframe/image.png' />
 
-      <Item.Content verticalAlign='middle'>
-        <Item.Header as='a'>Watchmen</Item.Header>
-      </Item.Content>
+      <ItemContent verticalAlign='middle'>
+        <ItemHeader as='a'>Watchmen</ItemHeader>
+      </ItemContent>
     </Item>
-  </Item.Group>
+  </ItemGroup>
 )
 
 export default ItemExampleVeryRelaxed
diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js b/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js
index bfd75ee65e..25032cb62d 100644
--- a/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js
+++ b/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react'
 
 const StatisticExampleLabel = () => (
   <Statistic>
-    <Statistic.Value>2,204</Statistic.Value>
-    <Statistic.Label>Views</Statistic.Label>
+    <StatisticValue>2,204</StatisticValue>
+    <StatisticLabel>Views</StatisticLabel>
   </Statistic>
 )
 
diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js b/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js
index f72f1feb1c..b42c92843d 100644
--- a/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js
+++ b/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js
@@ -1,37 +1,44 @@
 import React from 'react'
-import { Icon, Image, Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  StatisticGroup,
+  Icon,
+  Image,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleValue = () => (
-  <Statistic.Group>
+  <StatisticGroup>
     <Statistic>
-      <Statistic.Value>22</Statistic.Value>
-      <Statistic.Label>Saves</Statistic.Label>
+      <StatisticValue>22</StatisticValue>
+      <StatisticLabel>Saves</StatisticLabel>
     </Statistic>
 
     <Statistic>
-      <Statistic.Value text>
+      <StatisticValue text>
         Three
         <br />
         Thousand
-      </Statistic.Value>
-      <Statistic.Label>Signups</Statistic.Label>
+      </StatisticValue>
+      <StatisticLabel>Signups</StatisticLabel>
     </Statistic>
 
     <Statistic>
-      <Statistic.Value>
+      <StatisticValue>
         <Icon name='plane' />5
-      </Statistic.Value>
-      <Statistic.Label>Flights</Statistic.Label>
+      </StatisticValue>
+      <StatisticLabel>Flights</StatisticLabel>
     </Statistic>
 
     <Statistic>
-      <Statistic.Value>
+      <StatisticValue>
         <Image src='/images/avatar/small/joe.jpg' inline circular />
         42
-      </Statistic.Value>
-      <Statistic.Label>Team Members</Statistic.Label>
+      </StatisticValue>
+      <StatisticLabel>Team Members</StatisticLabel>
     </Statistic>
-  </Statistic.Group>
+  </StatisticGroup>
 )
 
 export default StatisticExampleValue
diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js b/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js
index aaf930907a..9bf4f8f11d 100644
--- a/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js
+++ b/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import { StatisticGroup, Statistic } from 'semantic-ui-react'
 
 const StatisticExampleValueShorthand = () => (
-  <Statistic.Group>
+  <StatisticGroup>
     <Statistic label='Saves' value='22' />
     <Statistic label='Signups' value='Three Thousand' text />
     <Statistic label='Flights' value='5' />
     <Statistic label='Team Members' value='42' />
-  </Statistic.Group>
+  </StatisticGroup>
 )
 
 export default StatisticExampleValueShorthand
diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js b/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js
index b7de50e937..57b9973bcc 100644
--- a/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js
+++ b/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js
@@ -1,22 +1,27 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  StatisticGroup,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleGroup = () => (
   <div>
-    <Statistic.Group>
+    <StatisticGroup>
       <Statistic>
-        <Statistic.Value>22</Statistic.Value>
-        <Statistic.Label>Faves</Statistic.Label>
+        <StatisticValue>22</StatisticValue>
+        <StatisticLabel>Faves</StatisticLabel>
       </Statistic>
       <Statistic>
-        <Statistic.Value>31,200</Statistic.Value>
-        <Statistic.Label>Views</Statistic.Label>
+        <StatisticValue>31,200</StatisticValue>
+        <StatisticLabel>Views</StatisticLabel>
       </Statistic>
       <Statistic>
-        <Statistic.Value>22</Statistic.Value>
-        <Statistic.Label>Members</Statistic.Label>
+        <StatisticValue>22</StatisticValue>
+        <StatisticLabel>Members</StatisticLabel>
       </Statistic>
-    </Statistic.Group>
+    </StatisticGroup>
   </div>
 )
 
diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js b/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js
index 1096deed5e..63451b16a6 100644
--- a/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js
+++ b/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import { StatisticGroup } from 'semantic-ui-react'
 
 const items = [
   { key: 'faves', label: 'Faves', value: '22' },
@@ -7,6 +7,6 @@ const items = [
   { key: 'members', label: 'Members', value: '22' },
 ]
 
-const StatisticExampleGroupShorthand = () => <Statistic.Group items={items} />
+const StatisticExampleGroupShorthand = () => <StatisticGroup items={items} />
 
 export default StatisticExampleGroupShorthand
diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js b/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js
index 42c7051f60..365de89960 100644
--- a/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js
+++ b/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react'
 
 const StatisticExampleStatistic = () => (
   <Statistic>
-    <Statistic.Value>5,550</Statistic.Value>
-    <Statistic.Label>Downloads</Statistic.Label>
+    <StatisticValue>5,550</StatisticValue>
+    <StatisticLabel>Downloads</StatisticLabel>
   </Statistic>
 )
 
diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js b/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js
index 36302cf17f..01858a41f0 100644
--- a/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js
+++ b/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react'
 
 const StatisticExampleTopLabel = () => (
   <Statistic>
-    <Statistic.Label>Views</Statistic.Label>
-    <Statistic.Value>40,509</Statistic.Value>
+    <StatisticLabel>Views</StatisticLabel>
+    <StatisticValue>40,509</StatisticValue>
   </Statistic>
 )
 
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js
index a3d1c7aa6c..fc804527ef 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js
@@ -1,57 +1,62 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  StatisticGroup,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleColored = () => (
-  <Statistic.Group>
+  <StatisticGroup>
     <Statistic color='red'>
-      <Statistic.Value>27</Statistic.Value>
-      <Statistic.Label>red</Statistic.Label>
+      <StatisticValue>27</StatisticValue>
+      <StatisticLabel>red</StatisticLabel>
     </Statistic>
     <Statistic color='orange'>
-      <Statistic.Value>8'</Statistic.Value>
-      <Statistic.Label>orange</Statistic.Label>
+      <StatisticValue>8'</StatisticValue>
+      <StatisticLabel>orange</StatisticLabel>
     </Statistic>
     <Statistic color='yellow'>
-      <Statistic.Value>28</Statistic.Value>
-      <Statistic.Label>yellow</Statistic.Label>
+      <StatisticValue>28</StatisticValue>
+      <StatisticLabel>yellow</StatisticLabel>
     </Statistic>
     <Statistic color='olive'>
-      <Statistic.Value>7'</Statistic.Value>
-      <Statistic.Label>olive</Statistic.Label>
+      <StatisticValue>7'</StatisticValue>
+      <StatisticLabel>olive</StatisticLabel>
     </Statistic>
     <Statistic color='green'>
-      <Statistic.Value>14</Statistic.Value>
-      <Statistic.Label>green</Statistic.Label>
+      <StatisticValue>14</StatisticValue>
+      <StatisticLabel>green</StatisticLabel>
     </Statistic>
     <Statistic color='teal'>
-      <Statistic.Value>82</Statistic.Value>
-      <Statistic.Label>teal</Statistic.Label>
+      <StatisticValue>82</StatisticValue>
+      <StatisticLabel>teal</StatisticLabel>
     </Statistic>
     <Statistic color='blue'>
-      <Statistic.Value>1'</Statistic.Value>
-      <Statistic.Label>blue</Statistic.Label>
+      <StatisticValue>1'</StatisticValue>
+      <StatisticLabel>blue</StatisticLabel>
     </Statistic>
     <Statistic color='violet'>
-      <Statistic.Value>22</Statistic.Value>
-      <Statistic.Label>violet</Statistic.Label>
+      <StatisticValue>22</StatisticValue>
+      <StatisticLabel>violet</StatisticLabel>
     </Statistic>
     <Statistic color='purple'>
-      <Statistic.Value>23</Statistic.Value>
-      <Statistic.Label>purple</Statistic.Label>
+      <StatisticValue>23</StatisticValue>
+      <StatisticLabel>purple</StatisticLabel>
     </Statistic>
     <Statistic color='pink'>
-      <Statistic.Value>15</Statistic.Value>
-      <Statistic.Label>pink</Statistic.Label>
+      <StatisticValue>15</StatisticValue>
+      <StatisticLabel>pink</StatisticLabel>
     </Statistic>
     <Statistic color='brown'>
-      <Statistic.Value>36</Statistic.Value>
-      <Statistic.Label>brown</Statistic.Label>
+      <StatisticValue>36</StatisticValue>
+      <StatisticLabel>brown</StatisticLabel>
     </Statistic>
     <Statistic color='grey'>
-      <Statistic.Value>49</Statistic.Value>
-      <Statistic.Label>grey</Statistic.Label>
+      <StatisticValue>49</StatisticValue>
+      <StatisticLabel>grey</StatisticLabel>
     </Statistic>
-  </Statistic.Group>
+  </StatisticGroup>
 )
 
 export default StatisticExampleColored
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js
index adfc565106..a0ea37173c 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js
@@ -1,6 +1,12 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Divider, Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  StatisticGroup,
+  Divider,
+  Statistic,
+} from 'semantic-ui-react'
 
 const colors = [
   'red',
@@ -37,20 +43,20 @@ export default class StatisticExampleColoredGroup extends Component {
 
         <Divider hidden />
 
-        <Statistic.Group color={color}>
+        <StatisticGroup color={color}>
           <Statistic>
-            <Statistic.Value>22</Statistic.Value>
-            <Statistic.Label>Faves</Statistic.Label>
+            <StatisticValue>22</StatisticValue>
+            <StatisticLabel>Faves</StatisticLabel>
           </Statistic>
           <Statistic>
-            <Statistic.Value>31,200</Statistic.Value>
-            <Statistic.Label>Views</Statistic.Label>
+            <StatisticValue>31,200</StatisticValue>
+            <StatisticLabel>Views</StatisticLabel>
           </Statistic>
           <Statistic>
-            <Statistic.Value>22</Statistic.Value>
-            <Statistic.Label>Members</Statistic.Label>
+            <StatisticValue>22</StatisticValue>
+            <StatisticLabel>Members</StatisticLabel>
           </Statistic>
-        </Statistic.Group>
+        </StatisticGroup>
       </div>
     )
   }
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.js
index 9888368a35..353f391428 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.js
@@ -1,37 +1,44 @@
 import React from 'react'
-import { Icon, Image, Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  StatisticGroup,
+  Icon,
+  Image,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleEvenlyDivided = () => (
-  <Statistic.Group widths='four'>
+  <StatisticGroup widths='four'>
     <Statistic>
-      <Statistic.Value>22</Statistic.Value>
-      <Statistic.Label>Saves</Statistic.Label>
+      <StatisticValue>22</StatisticValue>
+      <StatisticLabel>Saves</StatisticLabel>
     </Statistic>
 
     <Statistic>
-      <Statistic.Value text>
+      <StatisticValue text>
         Three
         <br />
         Thousand
-      </Statistic.Value>
-      <Statistic.Label>Signups</Statistic.Label>
+      </StatisticValue>
+      <StatisticLabel>Signups</StatisticLabel>
     </Statistic>
 
     <Statistic>
-      <Statistic.Value>
+      <StatisticValue>
         <Icon name='plane' />5
-      </Statistic.Value>
-      <Statistic.Label>Flights</Statistic.Label>
+      </StatisticValue>
+      <StatisticLabel>Flights</StatisticLabel>
     </Statistic>
 
     <Statistic>
-      <Statistic.Value>
+      <StatisticValue>
         <Image src='/images/avatar/small/joe.jpg' className='circular inline' />
         42
-      </Statistic.Value>
-      <Statistic.Label>Team Members</Statistic.Label>
+      </StatisticValue>
+      <StatisticLabel>Team Members</StatisticLabel>
     </Statistic>
-  </Statistic.Group>
+  </StatisticGroup>
 )
 
 export default StatisticExampleEvenlyDivided
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleFloated.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleFloated.js
index bc370109a1..cb1262d012 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleFloated.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleFloated.js
@@ -1,11 +1,16 @@
 import React from 'react'
-import { Segment, Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  Segment,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleFloated = () => (
   <Segment>
     <Statistic floated='right'>
-      <Statistic.Value>2,204</Statistic.Value>
-      <Statistic.Label>Views</Statistic.Label>
+      <StatisticValue>2,204</StatisticValue>
+      <StatisticLabel>Views</StatisticLabel>
     </Statistic>
 
     <p>
@@ -24,8 +29,8 @@ const StatisticExampleFloated = () => (
     </p>
 
     <Statistic floated='left'>
-      <Statistic.Value>2,204</Statistic.Value>
-      <Statistic.Label>Views</Statistic.Label>
+      <StatisticValue>2,204</StatisticValue>
+      <StatisticLabel>Views</StatisticLabel>
     </Statistic>
 
     <p>
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleHorizontal.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleHorizontal.js
index 6e02739e23..cc745ac5e9 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleHorizontal.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleHorizontal.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react'
 
 const StatisticExampleHorizontal = () => (
   <Statistic horizontal>
-    <Statistic.Value>2,204</Statistic.Value>
-    <Statistic.Label>Views</Statistic.Label>
+    <StatisticValue>2,204</StatisticValue>
+    <StatisticLabel>Views</StatisticLabel>
   </Statistic>
 )
 
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleHorizontalGroup.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleHorizontalGroup.js
index c90ffdb008..cb04633a54 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleHorizontalGroup.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleHorizontalGroup.js
@@ -1,21 +1,26 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  StatisticGroup,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleHorizontalGroup = () => (
-  <Statistic.Group horizontal>
+  <StatisticGroup horizontal>
     <Statistic>
-      <Statistic.Value>2,204</Statistic.Value>
-      <Statistic.Label>Views</Statistic.Label>
+      <StatisticValue>2,204</StatisticValue>
+      <StatisticLabel>Views</StatisticLabel>
     </Statistic>
     <Statistic>
-      <Statistic.Value>3,322</Statistic.Value>
-      <Statistic.Label>Downloads</Statistic.Label>
+      <StatisticValue>3,322</StatisticValue>
+      <StatisticLabel>Downloads</StatisticLabel>
     </Statistic>
     <Statistic>
-      <Statistic.Value>22</Statistic.Value>
-      <Statistic.Label>Tasks</Statistic.Label>
+      <StatisticValue>22</StatisticValue>
+      <StatisticLabel>Tasks</StatisticLabel>
     </Statistic>
-  </Statistic.Group>
+  </StatisticGroup>
 )
 
 export default StatisticExampleHorizontalGroup
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleInverted.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleInverted.js
index 72a2cf6786..6a43165449 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleInverted.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleInverted.js
@@ -1,59 +1,64 @@
 import React from 'react'
-import { Segment, Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  Segment,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleInverted = () => (
   <Segment inverted>
     <Statistic inverted>
-      <Statistic.Value>54</Statistic.Value>
-      <Statistic.Label>inverted</Statistic.Label>
+      <StatisticValue>54</StatisticValue>
+      <StatisticLabel>inverted</StatisticLabel>
     </Statistic>
     <Statistic color='red' inverted>
-      <Statistic.Value>27</Statistic.Value>
-      <Statistic.Label>red</Statistic.Label>
+      <StatisticValue>27</StatisticValue>
+      <StatisticLabel>red</StatisticLabel>
     </Statistic>
     <Statistic color='orange' inverted>
-      <Statistic.Value>8'</Statistic.Value>
-      <Statistic.Label>orange</Statistic.Label>
+      <StatisticValue>8'</StatisticValue>
+      <StatisticLabel>orange</StatisticLabel>
     </Statistic>
     <Statistic color='yellow' inverted>
-      <Statistic.Value>28</Statistic.Value>
-      <Statistic.Label>yellow</Statistic.Label>
+      <StatisticValue>28</StatisticValue>
+      <StatisticLabel>yellow</StatisticLabel>
     </Statistic>
     <Statistic color='olive' inverted>
-      <Statistic.Value>7'</Statistic.Value>
-      <Statistic.Label>olive</Statistic.Label>
+      <StatisticValue>7'</StatisticValue>
+      <StatisticLabel>olive</StatisticLabel>
     </Statistic>
     <Statistic color='green' inverted>
-      <Statistic.Value>14</Statistic.Value>
-      <Statistic.Label>green</Statistic.Label>
+      <StatisticValue>14</StatisticValue>
+      <StatisticLabel>green</StatisticLabel>
     </Statistic>
     <Statistic color='teal' inverted>
-      <Statistic.Value>82</Statistic.Value>
-      <Statistic.Label>teal</Statistic.Label>
+      <StatisticValue>82</StatisticValue>
+      <StatisticLabel>teal</StatisticLabel>
     </Statistic>
     <Statistic color='blue' inverted>
-      <Statistic.Value>1'</Statistic.Value>
-      <Statistic.Label>blue</Statistic.Label>
+      <StatisticValue>1'</StatisticValue>
+      <StatisticLabel>blue</StatisticLabel>
     </Statistic>
     <Statistic color='violet' inverted>
-      <Statistic.Value>22</Statistic.Value>
-      <Statistic.Label>violet</Statistic.Label>
+      <StatisticValue>22</StatisticValue>
+      <StatisticLabel>violet</StatisticLabel>
     </Statistic>
     <Statistic color='purple' inverted>
-      <Statistic.Value>23</Statistic.Value>
-      <Statistic.Label>purple</Statistic.Label>
+      <StatisticValue>23</StatisticValue>
+      <StatisticLabel>purple</StatisticLabel>
     </Statistic>
     <Statistic color='pink' inverted>
-      <Statistic.Value>15</Statistic.Value>
-      <Statistic.Label>pink</Statistic.Label>
+      <StatisticValue>15</StatisticValue>
+      <StatisticLabel>pink</StatisticLabel>
     </Statistic>
     <Statistic color='brown' inverted>
-      <Statistic.Value>36</Statistic.Value>
-      <Statistic.Label>brown</Statistic.Label>
+      <StatisticValue>36</StatisticValue>
+      <StatisticLabel>brown</StatisticLabel>
     </Statistic>
     <Statistic color='grey' inverted>
-      <Statistic.Value>49</Statistic.Value>
-      <Statistic.Label>grey</Statistic.Label>
+      <StatisticValue>49</StatisticValue>
+      <StatisticLabel>grey</StatisticLabel>
     </Statistic>
   </Segment>
 )
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleInvertedGroup.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleInvertedGroup.js
index 1deec7eaed..c193d328a1 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleInvertedGroup.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleInvertedGroup.js
@@ -1,22 +1,28 @@
 import React from 'react'
-import { Segment, Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  StatisticGroup,
+  Segment,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleInvertedGroup = () => (
   <Segment inverted>
-    <Statistic.Group inverted>
+    <StatisticGroup inverted>
       <Statistic>
-        <Statistic.Value>22</Statistic.Value>
-        <Statistic.Label>Faves</Statistic.Label>
+        <StatisticValue>22</StatisticValue>
+        <StatisticLabel>Faves</StatisticLabel>
       </Statistic>
       <Statistic>
-        <Statistic.Value>31,200</Statistic.Value>
-        <Statistic.Label>Views</Statistic.Label>
+        <StatisticValue>31,200</StatisticValue>
+        <StatisticLabel>Views</StatisticLabel>
       </Statistic>
       <Statistic>
-        <Statistic.Value>22</Statistic.Value>
-        <Statistic.Label>Members</Statistic.Label>
+        <StatisticValue>22</StatisticValue>
+        <StatisticLabel>Members</StatisticLabel>
       </Statistic>
-    </Statistic.Group>
+    </StatisticGroup>
   </Segment>
 )
 
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleSize.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleSize.js
index 4a0d4c74a4..f8d302f7b9 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleSize.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleSize.js
@@ -1,31 +1,31 @@
 import React from 'react'
-import { Statistic } from 'semantic-ui-react'
+import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react'
 
 const StatisticExampleSize = () => (
   <div>
     <Statistic size='mini'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Statistic size='tiny'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Statistic size='small'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Statistic>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Statistic size='large'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Statistic size='huge'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
   </div>
 )
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleSizeDivided.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleSizeDivided.js
index c68d109863..44129c4fdc 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleSizeDivided.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleSizeDivided.js
@@ -1,41 +1,46 @@
 import React from 'react'
-import { Divider, Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  Divider,
+  Statistic,
+} from 'semantic-ui-react'
 
 const StatisticExampleSizeDivided = () => (
   <div>
     <Statistic size='mini'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Divider />
 
     <Statistic size='tiny'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Divider />
 
     <Statistic size='small'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Divider />
 
     <Statistic>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Divider />
 
     <Statistic size='large'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
     <Divider />
 
     <Statistic size='huge'>
-      <Statistic.Label>Views</Statistic.Label>
-      <Statistic.Value>2,204</Statistic.Value>
+      <StatisticLabel>Views</StatisticLabel>
+      <StatisticValue>2,204</StatisticValue>
     </Statistic>
   </div>
 )
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleSizeGroup.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleSizeGroup.js
index 87cb40d3c6..1c9c6ed89f 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleSizeGroup.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleSizeGroup.js
@@ -1,6 +1,12 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Divider, Statistic } from 'semantic-ui-react'
+import {
+  StatisticValue,
+  StatisticLabel,
+  StatisticGroup,
+  Divider,
+  Statistic,
+} from 'semantic-ui-react'
 
 const sizes = ['mini', 'tiny', 'small', 'large', 'huge']
 
@@ -24,20 +30,20 @@ export default class StatisticExampleSizeGroup extends Component {
 
         <Divider hidden />
 
-        <Statistic.Group size={size}>
+        <StatisticGroup size={size}>
           <Statistic>
-            <Statistic.Value>22</Statistic.Value>
-            <Statistic.Label>Faves</Statistic.Label>
+            <StatisticValue>22</StatisticValue>
+            <StatisticLabel>Faves</StatisticLabel>
           </Statistic>
           <Statistic>
-            <Statistic.Value>31,200</Statistic.Value>
-            <Statistic.Label>Views</Statistic.Label>
+            <StatisticValue>31,200</StatisticValue>
+            <StatisticLabel>Views</StatisticLabel>
           </Statistic>
           <Statistic>
-            <Statistic.Value>22</Statistic.Value>
-            <Statistic.Label>Members</Statistic.Label>
+            <StatisticValue>22</StatisticValue>
+            <StatisticLabel>Members</StatisticLabel>
           </Statistic>
-        </Statistic.Group>
+        </StatisticGroup>
       </div>
     )
   }

From 17c45e558ae6496c46c24def07386a65e6a935ff Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Sat, 30 Dec 2023 16:01:56 +0100
Subject: [PATCH 17/30] chore: release 3.0.0-beta.1 [ci skip]

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b98818f1a5..aaab491086 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-react",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "description": "The official Semantic-UI-React integration.",
   "jsnext:main": "dist/es/index.js",
   "main": "dist/commonjs/index.js",

From c579cabe1eb4636da6b0d1029a4edb0ffbec8b35 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Sat, 30 Dec 2023 16:02:22 +0100
Subject: [PATCH 18/30] Release 3.0.0-beta.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aaab491086..41d6a77a47 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-react",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "description": "The official Semantic-UI-React integration.",
   "jsnext:main": "dist/es/index.js",
   "main": "dist/commonjs/index.js",

From ef8684ca969f30a2cb6d87c37fd09ac84ef05267 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Sat, 30 Dec 2023 16:12:22 +0100
Subject: [PATCH 19/30] docs: update changelog [ci skip]

---
 CHANGELOG.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4ed92ba2b2..30b47c7a45 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,26 @@
 # Change Log
 
+## v3.0.0-beta.2 (2023-12-30)
+
+#### :rocket: New Feature
+* [#4437](https://github.com/Semantic-Org/Semantic-UI-React/pull/4437) feat(FormGroup): add error prop to FormGroup ([@felixmosh](https://github.com/felixmosh))
+* [#4436](https://github.com/Semantic-Org/Semantic-UI-React/pull/4436) feat(Form.Group): add disabled prop ([@naman1608](https://github.com/naman1608))
+
+#### :bug: Bug Fix
+* [#4447](https://github.com/Semantic-Org/Semantic-UI-React/pull/4447) fix(typings): update types to support `ref` ([@layershifter](https://github.com/layershifter))
+* [#4446](https://github.com/Semantic-Org/Semantic-UI-React/pull/4446) fix(Popup): fix positioning in scrollable container ([@CoryDuncan](https://github.com/CoryDuncan))
+* [#4445](https://github.com/Semantic-Org/Semantic-UI-React/pull/4445) fix(Portal): fix event handling for mouseEnter/mouseLeave ([@tourman](https://github.com/tourman))
+
+#### :memo: Documentation
+* [#4431](https://github.com/Semantic-Org/Semantic-UI-React/pull/4431) docs: add migration guide to v3 ([@layershifter](https://github.com/layershifter))
+
+#### :house: Internal
+* [#4456](https://github.com/Semantic-Org/Semantic-UI-React/pull/4456) chore: remove "dot-syntax" from examples ([@layershifter](https://github.com/layershifter))
+* [#4455](https://github.com/Semantic-Org/Semantic-UI-React/pull/4455) chore: fix lint warnings ([@layershifter](https://github.com/layershifter))
+* [#4452](https://github.com/Semantic-Org/Semantic-UI-React/pull/4452) chore: add "use client" directive in components where it's needed ([@layershifter](https://github.com/layershifter))
+* [#4454](https://github.com/Semantic-Org/Semantic-UI-React/pull/4454) chore: bump Babel & react-docgen ([@layershifter](https://github.com/layershifter))
+* [#4449](https://github.com/Semantic-Org/Semantic-UI-React/pull/4449) chore: remove usage of deprecated `.defaultProps` ([@tourman](https://github.com/tourman))
+
 ## v2.1.5 (2023-12-10)
 
 #### :bug: Bug Fix

From 67f2c9209c47e80fbf9bac2436b228d81b5577e4 Mon Sep 17 00:00:00 2001
From: Jason Kiesling <jason@jasondkiesling.com>
Date: Fri, 8 Mar 2024 03:33:09 -0700
Subject: [PATCH 20/30] docs(migrations): fix incorrect spelling of Visibility
 deprecation (#4469)

---
 docs/src/pages/MigrationGuide.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/MigrationGuide.mdx b/docs/src/pages/MigrationGuide.mdx
index 37810ea657..7686a319c6 100644
--- a/docs/src/pages/MigrationGuide.mdx
+++ b/docs/src/pages/MigrationGuide.mdx
@@ -90,7 +90,7 @@ As we exported `Ref` component and recommended its usage everywhere we moved out
 
 More details on this change in [Semantic-Org/Semantic-UI-React#4286](https://github.com/Semantic-Org/Semantic-UI-React/pull/4286).
 
-## Removal of `Visibity` component
+## Removal of `Visibility` component
 
 <Message
   compact

From 21cce97ec4b9e7d46615a18b18cc2cd7dce7a0a9 Mon Sep 17 00:00:00 2001
From: Mattias Ekstrand <mattias.ekstrand@gmail.com>
Date: Tue, 19 Mar 2024 09:20:50 +0100
Subject: [PATCH 21/30] fix(typings): Type Tab.Pane is missing (#4457) (#4473)

---
 src/modules/Tab/Tab.d.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/modules/Tab/Tab.d.ts b/src/modules/Tab/Tab.d.ts
index 7d71cb55fa..f576212697 100644
--- a/src/modules/Tab/Tab.d.ts
+++ b/src/modules/Tab/Tab.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
-import { TabPaneProps } from './TabPane'
+import TabPane, { TabPaneProps } from './TabPane'
 
 export interface TabProps extends StrictTabProps {
   [key: string]: any
@@ -58,6 +58,8 @@ export interface StrictTabProps {
   renderActiveOnly?: boolean
 }
 
-declare const Tab: ForwardRefComponent<TabProps, HTMLDivElement>
+declare const Tab: ForwardRefComponent<TabProps, HTMLDivElement> & {
+  Pane: typeof TabPane
+}
 
 export default Tab

From 1623c8da08b4f856201fce268d6dd15fd41098df Mon Sep 17 00:00:00 2001
From: Sukka <isukkaw@gmail.com>
Date: Sat, 29 Jun 2024 01:56:21 +0800
Subject: [PATCH 22/30] docs: replace `polyfill.io` (#4467)

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
---
 docs/src/components/Document.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/Document.js b/docs/src/components/Document.js
index 3541722176..d86e4e0ae1 100644
--- a/docs/src/components/Document.js
+++ b/docs/src/components/Document.js
@@ -20,7 +20,7 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
       />
 
       <script src='https://cdn.jsdelivr.net/npm/core-js-bundle/minified.js' />
-      <script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver' />
+      <script src='https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserver' />
       <script
         src={`https://cdnjs.cloudflare.com/ajax/libs/anchor-js/${versions.anchor}/anchor.min.js`}
       />

From d70adfc956aa903b9eab959adcb94833d753d8ce Mon Sep 17 00:00:00 2001
From: Konrad Kierus <konradkierus@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:21:52 +0100
Subject: [PATCH 23/30] fix(Popup): fix ability to not hide popup on scroll
 (#4490)

---
 src/modules/Popup/Popup.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 2c3c9ba4f2..ccd61053d0 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -124,6 +124,7 @@ const Popup = React.forwardRef(function (props, ref) {
     eventsEnabled = true,
     flowing,
     header,
+    hideOnScroll,
     inverted,
     offset,
     pinned = false,
@@ -179,8 +180,8 @@ const Popup = React.forwardRef(function (props, ref) {
     _.invoke(props, 'onOpen', e, { ...props, open: true })
   }
 
-  const hideOnScroll = (e) => {
-    debug('hideOnScroll()')
+  const handleHideOnScroll = (e) => {
+    debug('handleHideOnScroll()')
 
     // Do not hide the popup when scroll comes from inside the popup
     // https://github.com/Semantic-Org/Semantic-UI-React/issues/4305
@@ -253,7 +254,7 @@ const Popup = React.forwardRef(function (props, ref) {
         ) : (
           children
         )}
-        {hideOnScroll && <EventStack on={hideOnScroll} name='scroll' target='window' />}
+        {hideOnScroll && <EventStack on={handleHideOnScroll} name='scroll' target='window' />}
       </ElementType>
     )
 

From 80a60c9f2b99f40642c3e0f9ec85f57f0bf26306 Mon Sep 17 00:00:00 2001
From: Dominik Dosoudil <eziotegg@gmail.com>
Date: Wed, 13 Nov 2024 16:20:16 +0100
Subject: [PATCH 24/30] chore(Popup): replace event-stack (#4499)

* refactor(event-stack): replace event-stack with window.addEventListener in Popup

* refactor(popup): Move hideOnScroll feature to Portal component to get rid of hacky timout that causes remounting Portal component.

* perf(portal): wrap closePortal in useEventCallback to prevent scroll event resubscribed every render

* fix(portal): Replace AbortController with removeEventListener to support older browsers

---------

Co-authored-by: Dominik Dosoudil <dosoudil@insoft.cz>
---
 src/addons/Portal/Portal.d.ts |  3 +++
 src/addons/Portal/Portal.js   | 33 ++++++++++++++++++++++--
 src/modules/Popup/Popup.js    | 47 ++++++-----------------------------
 3 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/src/addons/Portal/Portal.d.ts b/src/addons/Portal/Portal.d.ts
index 09d5b75bc4..c45f14a724 100644
--- a/src/addons/Portal/Portal.d.ts
+++ b/src/addons/Portal/Portal.d.ts
@@ -37,6 +37,9 @@ export interface StrictPortalProps {
   /** Event pool namespace that is used to handle component events. */
   eventPool?: string
 
+  /** Hide the Popup when scrolling the window. */
+  hideOnScroll?: boolean
+
   /** The node where the portal should mount. */
   mountNode?: any
 
diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
index 4ad57da0cd..01cbb2808d 100644
--- a/src/addons/Portal/Portal.js
+++ b/src/addons/Portal/Portal.js
@@ -9,6 +9,7 @@ import {
   doesNodeContainClick,
   makeDebugger,
   useAutoControlledValue,
+  useEventCallback,
 } from '../../lib'
 import useTrigger from './utils/useTrigger'
 import PortalInner from './PortalInner'
@@ -38,6 +39,7 @@ function Portal(props) {
     openOnTriggerClick = true,
     openOnTriggerFocus,
     openOnTriggerMouseEnter,
+    hideOnScroll = false,
   } = props
 
   const [open, setOpen] = useAutoControlledValue({
@@ -73,12 +75,12 @@ function Portal(props) {
     return setTimeout(() => openPortal(eventClone), delay || 0)
   }
 
-  const closePortal = (e) => {
+  const closePortal = useEventCallback((e) => {
     debug('close()')
 
     setOpen(false)
     _.invoke(props, 'onClose', e, { ...props, open: false })
-  }
+  })
 
   const closePortalWithTimeout = (e, delay) => {
     debug('closeWithTimeout()', delay)
@@ -146,6 +148,30 @@ function Portal(props) {
   // Component Event Handlers
   // ----------------------------------------
 
+  React.useEffect(() => {
+    if (!hideOnScroll) {
+      return
+    }
+
+    const handleScroll = (e) => {
+      debug('handleHideOnScroll()')
+
+      // Do not hide the popup when scroll comes from inside the popup
+      // https://github.com/Semantic-Org/Semantic-UI-React/issues/4305
+      if (_.isElement(e.target) && contentRef.current.contains(e.target)) {
+        return
+      }
+
+      closePortal(e)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [closePortal, hideOnScroll])
+
   const handlePortalMouseLeave = (e) => {
     if (!closeOnPortalMouseLeave) {
       return
@@ -318,6 +344,9 @@ Portal.propTypes = {
   /** Event pool namespace that is used to handle component events */
   eventPool: PropTypes.string,
 
+  /** Hide the Popup when scrolling the window. */
+  hideOnScroll: PropTypes.bool,
+
   /** The node where the portal should mount. */
   mountNode: PropTypes.any,
 
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index ccd61053d0..591748acdd 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -1,4 +1,3 @@
-import EventStack from '@semantic-ui-react/event-stack'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
@@ -14,9 +13,9 @@ import {
   getUnhandledProps,
   makeDebugger,
   SUI,
+  useIsomorphicLayoutEffect,
   useKeyOnly,
   useKeyOrValueAndKey,
-  useIsomorphicLayoutEffect,
   useMergedRefs,
   usePrevious,
 } from '../../lib'
@@ -72,11 +71,10 @@ function getPortalProps(props) {
  * Splits props for Portal & Popup.
  *
  * @param {Object} unhandledProps
- * @param {Boolean} closed
  * @param {Boolean} disabled
  */
-function partitionPortalProps(unhandledProps, closed, disabled) {
-  if (closed || disabled) {
+function partitionPortalProps(unhandledProps, disabled) {
+  if (disabled) {
     return {}
   }
 
@@ -124,7 +122,7 @@ const Popup = React.forwardRef(function (props, ref) {
     eventsEnabled = true,
     flowing,
     header,
-    hideOnScroll,
+    hideOnScroll = false,
     inverted,
     offset,
     pinned = false,
@@ -139,18 +137,11 @@ const Popup = React.forwardRef(function (props, ref) {
     wide,
   } = props
 
-  const [closed, setClosed] = React.useState(false)
-
   const unhandledProps = getUnhandledProps(Popup, props)
-  const { contentRestProps, portalRestProps } = partitionPortalProps(
-    unhandledProps,
-    closed,
-    disabled,
-  )
+  const { contentRestProps, portalRestProps } = partitionPortalProps(unhandledProps, disabled)
 
   const elementRef = useMergedRefs(ref)
   const positionUpdate = React.useRef()
-  const timeoutId = React.useRef()
   const triggerRef = React.useRef()
   const zIndexWasSynced = React.useRef(false)
 
@@ -160,12 +151,6 @@ const Popup = React.forwardRef(function (props, ref) {
 
   usePositioningEffect(popperDependencies, positionUpdate)
 
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(timeoutId.current)
-    }
-  }, [])
-
   // ----------------------------------------
   // Handlers
   // ----------------------------------------
@@ -180,24 +165,6 @@ const Popup = React.forwardRef(function (props, ref) {
     _.invoke(props, 'onOpen', e, { ...props, open: true })
   }
 
-  const handleHideOnScroll = (e) => {
-    debug('handleHideOnScroll()')
-
-    // Do not hide the popup when scroll comes from inside the popup
-    // https://github.com/Semantic-Org/Semantic-UI-React/issues/4305
-    if (_.isElement(e.target) && elementRef.current.contains(e.target)) {
-      return
-    }
-
-    setClosed(true)
-
-    timeoutId.current = setTimeout(() => {
-      setClosed(false)
-    }, 50)
-
-    handleClose(e)
-  }
-
   const handlePortalMount = (e) => {
     debug('handlePortalMount()')
     _.invoke(props, 'onMount', e, props)
@@ -254,7 +221,6 @@ const Popup = React.forwardRef(function (props, ref) {
         ) : (
           children
         )}
-        {hideOnScroll && <EventStack on={handleHideOnScroll} name='scroll' target='window' />}
       </ElementType>
     )
 
@@ -276,7 +242,7 @@ const Popup = React.forwardRef(function (props, ref) {
     })
   }
 
-  if (closed || disabled) {
+  if (disabled) {
     return trigger
   }
 
@@ -335,6 +301,7 @@ const Popup = React.forwardRef(function (props, ref) {
       onUnmount={handlePortalUnmount}
       trigger={trigger}
       triggerRef={triggerRef}
+      hideOnScroll={hideOnScroll}
     >
       <Popper
         modifiers={modifiers}

From 2dbdc79a0ae3558b18a766e5a37c71c8c35f9275 Mon Sep 17 00:00:00 2001
From: Dominik Dosoudil <eziotegg@gmail.com>
Date: Sat, 16 Nov 2024 10:08:48 +0100
Subject: [PATCH 25/30] chore: rename classNameBuilder utils from use* -> get*
 (#4500)

---
 src/lib/classNameBuilders.js | 51 ++++++++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/lib/classNameBuilders.js b/src/lib/classNameBuilders.js
index 17fce336a5..09834376d0 100644
--- a/src/lib/classNameBuilders.js
+++ b/src/lib/classNameBuilders.js
@@ -19,7 +19,12 @@ import { numberToWord } from './numberToWord'
  * <Label tag />
  * <div class="ui tag label"></div>
  */
-export const useKeyOnly = (val, key) => val && key
+export const getKeyOnly = (val, key) => val && key
+
+/**
+ * @deprecated
+ */
+export const useKeyOnly = getKeyOnly
 
 /**
  * Props that require both a key and value to create a className.
@@ -30,7 +35,12 @@ export const useKeyOnly = (val, key) => val && key
  * <Label corner='left' />
  * <div class="ui left corner label"></div>
  */
-export const useValueAndKey = (val, key) => val && val !== true && `${val} ${key}`
+export const getValueAndKey = (val, key) => val && val !== true && `${val} ${key}`
+
+/**
+ * @deprecated
+ */
+export const useValueAndKey = getValueAndKey
 
 /**
  * Props whose key will be used in className, or value and key.
@@ -45,7 +55,12 @@ export const useValueAndKey = (val, key) => val && val !== true && `${val} ${key
  * <Label pointing='left' />
  * <div class="ui left pointing label"></div>
  */
-export const useKeyOrValueAndKey = (val, key) => val && (val === true ? key : `${val} ${key}`)
+export const getKeyOrValueAndKey = (val, key) => val && (val === true ? key : `${val} ${key}`)
+
+/**
+ * @deprecated
+ */
+export const useKeyOrValueAndKey = getKeyOrValueAndKey
 
 //
 // Prop to className exceptions
@@ -63,7 +78,7 @@ export const useKeyOrValueAndKey = (val, key) => val && (val === true ? key : `$
  * <div class="mobile only row"></div>
  * <div class="mobile only tablet only row"></div>
  */
-export const useMultipleProp = (val, key) => {
+export const getMultipleProp = (val, key) => {
   if (!val || val === true) return null
 
   return val
@@ -74,6 +89,11 @@ export const useMultipleProp = (val, key) => {
     .join(' ')
 }
 
+/**
+ * @deprecated
+ */
+export const useMultipleProp = getMultipleProp
+
 /**
  * The "textAlign" prop follows the useValueAndKey except when the value is "justified'.
  * In this case, only the class "justified" is used, ignoring the "aligned" class.
@@ -87,8 +107,13 @@ export const useMultipleProp = (val, key) => {
  * <Container textAlign='left' />
  * <div class="ui left aligned container"></div>
  */
-export const useTextAlignProp = (val) =>
-  val === 'justified' ? 'justified' : useValueAndKey(val, 'aligned')
+export const getTextAlignProp = (val) =>
+  val === 'justified' ? 'justified' : getValueAndKey(val, 'aligned')
+
+/**
+ * @deprecated
+ */
+export const useTextAlignProp = getTextAlignProp
 
 /**
  * The "verticalAlign" prop follows the useValueAndKey.
@@ -99,7 +124,12 @@ export const useTextAlignProp = (val) =>
  * <Grid verticalAlign='middle' />
  * <div class="ui middle aligned grid"></div>
  */
-export const useVerticalAlignProp = (val) => useValueAndKey(val, 'aligned')
+export const getVerticalAlignProp = (val) => getValueAndKey(val, 'aligned')
+
+/**
+ * @deprecated
+ */
+export const useVerticalAlignProp = getVerticalAlignProp
 
 /**
  * Create "X", "X wide" and "equal width" classNames.
@@ -122,7 +152,7 @@ export const useVerticalAlignProp = (val) => useValueAndKey(val, 'aligned')
  * <Grid columns={4} />
  * <div class="ui four column grid"></div>
  */
-export const useWidthProp = (val, widthClass = '', canEqual = false) => {
+export const getWidthProp = (val, widthClass = '', canEqual = false) => {
   if (canEqual && val === 'equal') {
     return 'equal width'
   }
@@ -132,3 +162,8 @@ export const useWidthProp = (val, widthClass = '', canEqual = false) => {
   }
   return numberToWord(val)
 }
+
+/**
+ * @deprecated
+ */
+export const useWidthProp = getWidthProp

From df424570397a66e694eb0682355da953aa045eaf Mon Sep 17 00:00:00 2001
From: Dominik Dosoudil <eziotegg@gmail.com>
Date: Mon, 18 Nov 2024 11:24:23 +0100
Subject: [PATCH 26/30] chore: rename classNameBuilder functions in "modules"
 (#4501)

* chore: reexport renamed classNameBuilder functions

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Modal

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Rating

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Accordion

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Checkbox

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Dimmer

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Dropdown

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Popup

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Progress

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Search

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Sidebar

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Tab

* chore: replace deprecated useKeyOnly with getKeyOnly in modules/Transition
---
 src/lib/index.js                          |  7 ++++
 src/modules/Accordion/Accordion.js        |  8 ++--
 src/modules/Accordion/AccordionContent.js |  4 +-
 src/modules/Accordion/AccordionTitle.js   |  4 +-
 src/modules/Checkbox/Checkbox.js          | 18 ++++----
 src/modules/Dimmer/DimmerDimmable.js      |  6 +--
 src/modules/Dimmer/DimmerInner.js         | 16 ++++----
 src/modules/Dropdown/Dropdown.js          | 50 +++++++++++------------
 src/modules/Dropdown/DropdownItem.js      |  8 ++--
 src/modules/Dropdown/DropdownMenu.js      |  6 +--
 src/modules/Embed/Embed.js                |  4 +-
 src/modules/Modal/Modal.js                |  8 ++--
 src/modules/Modal/ModalContent.js         |  6 +--
 src/modules/Modal/ModalDimmer.js          | 10 ++---
 src/modules/Popup/Popup.js                | 12 +++---
 src/modules/Progress/Progress.js          | 20 ++++-----
 src/modules/Rating/Rating.js              |  6 +--
 src/modules/Rating/RatingIcon.js          |  6 +--
 src/modules/Search/Search.js              | 14 +++----
 src/modules/Search/SearchCategory.js      |  4 +-
 src/modules/Search/SearchResult.js        |  4 +-
 src/modules/Sidebar/Sidebar.js            |  6 +--
 src/modules/Sidebar/SidebarPusher.js      |  4 +-
 src/modules/Tab/TabPane.js                |  4 +-
 src/modules/Transition/Transition.js      | 14 +++----
 25 files changed, 128 insertions(+), 121 deletions(-)

diff --git a/src/lib/index.js b/src/lib/index.js
index a405193eb8..37c752b326 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -5,12 +5,19 @@ export * as childrenUtils from './childrenUtils'
 
 export {
   useKeyOnly,
+  getKeyOnly,
   useKeyOrValueAndKey,
+  getKeyOrValueAndKey,
   useValueAndKey,
+  getValueAndKey,
   useMultipleProp,
+  getMultipleProp,
   useTextAlignProp,
+  getTextAlignProp,
   useVerticalAlignProp,
+  getVerticalAlignProp,
   useWidthProp,
+  getWidthProp,
 } from './classNameBuilders'
 
 export * as customPropTypes from './customPropTypes'
diff --git a/src/modules/Accordion/Accordion.js b/src/modules/Accordion/Accordion.js
index ab6bdd220c..14707993ca 100644
--- a/src/modules/Accordion/Accordion.js
+++ b/src/modules/Accordion/Accordion.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { getUnhandledProps, useKeyOnly } from '../../lib'
+import { getUnhandledProps, getKeyOnly } from '../../lib'
 import AccordionAccordion from './AccordionAccordion'
 import AccordionContent from './AccordionContent'
 import AccordionPanel from './AccordionPanel'
@@ -16,9 +16,9 @@ const Accordion = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(styled, 'styled'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(styled, 'styled'),
     className,
   )
   const rest = getUnhandledProps(Accordion, props)
diff --git a/src/modules/Accordion/AccordionContent.js b/src/modules/Accordion/AccordionContent.js
index 9ab53498f6..cd45c642df 100644
--- a/src/modules/Accordion/AccordionContent.js
+++ b/src/modules/Accordion/AccordionContent.js
@@ -8,7 +8,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -17,7 +17,7 @@ import {
 const AccordionContent = React.forwardRef(function (props, ref) {
   const { active, children, className, content } = props
 
-  const classes = cx('content', useKeyOnly(active, 'active'), className)
+  const classes = cx('content', getKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(AccordionContent, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index 34405b861e..3088f94cee 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
   useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -20,7 +20,7 @@ import Icon from '../../elements/Icon'
 const AccordionTitle = React.forwardRef(function (props, ref) {
   const { active, children, className, content, icon } = props
 
-  const classes = cx(useKeyOnly(active, 'active'), 'title', className)
+  const classes = cx(getKeyOnly(active, 'active'), 'title', className)
   const rest = getUnhandledProps(AccordionTitle, props)
   const ElementType = getComponentType(props)
   const iconValue = _.isNil(icon) ? 'dropdown' : icon
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index d183f01feb..a6e62d09e1 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -11,7 +11,7 @@ import {
   htmlInputAttrs,
   makeDebugger,
   partitionHTMLProps,
-  useKeyOnly,
+  getKeyOnly,
   useAutoControlledValue,
   useMergedRefs,
   useIsomorphicLayoutEffect,
@@ -179,16 +179,16 @@ const Checkbox = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(checked, 'checked'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(indeterminate, 'indeterminate'),
+    getKeyOnly(checked, 'checked'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(indeterminate, 'indeterminate'),
     // auto apply fitted class to compact white space when there is no label
     // https://semantic-ui.com/modules/checkbox.html#fitted
-    useKeyOnly(_.isNil(label), 'fitted'),
-    useKeyOnly(radio, 'radio'),
-    useKeyOnly(readOnly, 'read-only'),
-    useKeyOnly(slider, 'slider'),
-    useKeyOnly(toggle, 'toggle'),
+    getKeyOnly(_.isNil(label), 'fitted'),
+    getKeyOnly(radio, 'radio'),
+    getKeyOnly(readOnly, 'read-only'),
+    getKeyOnly(slider, 'slider'),
+    getKeyOnly(toggle, 'toggle'),
     'checkbox',
     className,
   )
diff --git a/src/modules/Dimmer/DimmerDimmable.js b/src/modules/Dimmer/DimmerDimmable.js
index c5640daa94..154694a68b 100644
--- a/src/modules/Dimmer/DimmerDimmable.js
+++ b/src/modules/Dimmer/DimmerDimmable.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -17,8 +17,8 @@ const DimmerDimmable = React.forwardRef(function (props, ref) {
   const { blurring, className, children, content, dimmed } = props
 
   const classes = cx(
-    useKeyOnly(blurring, 'blurring'),
-    useKeyOnly(dimmed, 'dimmed'),
+    getKeyOnly(blurring, 'blurring'),
+    getKeyOnly(dimmed, 'dimmed'),
     'dimmable',
     className,
   )
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index 636a0370d6..a59bb9711b 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -9,8 +9,8 @@ import {
   doesNodeContainClick,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
-  useVerticalAlignProp,
+  getKeyOnly,
+  getVerticalAlignProp,
   useIsomorphicLayoutEffect,
   useMergedRefs,
 } from '../../lib'
@@ -58,12 +58,12 @@ const DimmerInner = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(active, 'active transition visible'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(page, 'page'),
-    useKeyOnly(simple, 'simple'),
-    useVerticalAlignProp(verticalAlign),
+    getKeyOnly(active, 'active transition visible'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(page, 'page'),
+    getKeyOnly(simple, 'simple'),
+    getVerticalAlignProp(verticalAlign),
     'dimmer',
     className,
   )
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index d77720b102..3e21959d9b 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -16,8 +16,8 @@ import {
   makeDebugger,
   objectDiff,
   setRef,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 import Label from '../../elements/Label'
@@ -1051,7 +1051,7 @@ class DropdownInner extends Component {
     // single menu child
     if (!childrenUtils.isNil(children)) {
       const menuChild = Children.only(children)
-      const className = cx(direction, useKeyOnly(open, 'visible'), menuChild.props.className)
+      const className = cx(direction, getKeyOnly(open, 'visible'), menuChild.props.className)
 
       return cloneElement(menuChild, { className, ...ariaOptions })
     }
@@ -1096,31 +1096,31 @@ class DropdownInner extends Component {
     // Classes
     const classes = cx(
       'ui',
-      useKeyOnly(open, 'active visible'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(error, 'error'),
-      useKeyOnly(loading, 'loading'),
-
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(button, 'button'),
-      useKeyOnly(compact, 'compact'),
-      useKeyOnly(fluid, 'fluid'),
-      useKeyOnly(floating, 'floating'),
-      useKeyOnly(inline, 'inline'),
+      getKeyOnly(open, 'active visible'),
+      getKeyOnly(disabled, 'disabled'),
+      getKeyOnly(error, 'error'),
+      getKeyOnly(loading, 'loading'),
+
+      getKeyOnly(basic, 'basic'),
+      getKeyOnly(button, 'button'),
+      getKeyOnly(compact, 'compact'),
+      getKeyOnly(fluid, 'fluid'),
+      getKeyOnly(floating, 'floating'),
+      getKeyOnly(inline, 'inline'),
       // TODO: consider augmentation to render Dropdowns as Button/Menu, solves icon/link item issues
       // https://github.com/Semantic-Org/Semantic-UI-React/issues/401#issuecomment-240487229
       // TODO: the icon class is only required when a dropdown is a button
-      // useKeyOnly(icon, 'icon'),
-      useKeyOnly(labeled, 'labeled'),
-      useKeyOnly(item, 'item'),
-      useKeyOnly(multiple, 'multiple'),
-      useKeyOnly(search, 'search'),
-      useKeyOnly(selection, 'selection'),
-      useKeyOnly(simple, 'simple'),
-      useKeyOnly(scrolling, 'scrolling'),
-      useKeyOnly(upward, 'upward'),
-
-      useKeyOrValueAndKey(pointing, 'pointing'),
+      // getKeyOnly(icon, 'icon'),
+      getKeyOnly(labeled, 'labeled'),
+      getKeyOnly(item, 'item'),
+      getKeyOnly(multiple, 'multiple'),
+      getKeyOnly(search, 'search'),
+      getKeyOnly(selection, 'selection'),
+      getKeyOnly(simple, 'simple'),
+      getKeyOnly(scrolling, 'scrolling'),
+      getKeyOnly(upward, 'upward'),
+
+      getKeyOrValueAndKey(pointing, 'pointing'),
       'dropdown',
       className,
     )
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index a2e85e900f..7302d41a8f 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -10,7 +10,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 import Flag from '../../elements/Flag'
 import Icon from '../../elements/Icon'
@@ -41,9 +41,9 @@ const DropdownItem = React.forwardRef(function (props, ref) {
   }
 
   const classes = cx(
-    useKeyOnly(active, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(selected, 'selected'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(selected, 'selected'),
     'item',
     className,
   )
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index d894a24d75..94397da778 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -18,8 +18,8 @@ const DropdownMenu = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     direction,
-    useKeyOnly(open, 'visible'),
-    useKeyOnly(scrolling, 'scrolling'),
+    getKeyOnly(open, 'visible'),
+    getKeyOnly(scrolling, 'scrolling'),
     'menu transition',
     className,
   )
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index 2854feebc9..d3f7f3fe30 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
   useAutoControlledValue,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -107,7 +107,7 @@ const Embed = React.forwardRef(function (props, ref) {
     )
   }
 
-  const classes = cx('ui', aspectRatio, useKeyOnly(active, 'active'), 'embed', className)
+  const classes = cx('ui', aspectRatio, getKeyOnly(active, 'active'), 'embed', className)
   const rest = getUnhandledProps(Embed, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index eb89025712..da7c847ee4 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -13,7 +13,7 @@ import {
   getUnhandledProps,
   isBrowser,
   makeDebugger,
-  useKeyOnly,
+  getKeyOnly,
   useAutoControlledValue,
   useMergedRefs,
 } from '../../lib'
@@ -179,9 +179,9 @@ const Modal = React.forwardRef(function (props, ref) {
     const classes = cx(
       'ui',
       size,
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(legacy, 'legacy'),
-      useKeyOnly(scrolling, 'scrolling'),
+      getKeyOnly(basic, 'basic'),
+      getKeyOnly(legacy, 'legacy'),
+      getKeyOnly(scrolling, 'scrolling'),
       'modal transition visible active',
       className,
     )
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index b8f50b8140..841a4dae4a 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -8,7 +8,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -19,8 +19,8 @@ const ModalContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     className,
-    useKeyOnly(image, 'image'),
-    useKeyOnly(scrolling, 'scrolling'),
+    getKeyOnly(image, 'image'),
+    getKeyOnly(scrolling, 'scrolling'),
     'content',
   )
   const rest = getUnhandledProps(ModalContent, props)
diff --git a/src/modules/Modal/ModalDimmer.js b/src/modules/Modal/ModalDimmer.js
index aa8473316c..63ac2c2f2b 100644
--- a/src/modules/Modal/ModalDimmer.js
+++ b/src/modules/Modal/ModalDimmer.js
@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   useClassNamesOnNode,
-  useKeyOnly,
+  getKeyOnly,
   useMergedRefs,
 } from '../../lib'
 
@@ -22,15 +22,15 @@ const ModalDimmer = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(!centered, 'top aligned'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(!centered, 'top aligned'),
     'page modals dimmer transition visible active',
     className,
   )
   const bodyClasses = cx(
     'dimmable dimmed',
-    useKeyOnly(blurring, 'blurring'),
-    useKeyOnly(scrolling, 'scrolling'),
+    getKeyOnly(blurring, 'blurring'),
+    getKeyOnly(scrolling, 'scrolling'),
   )
 
   const rest = getUnhandledProps(ModalDimmer, props)
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 591748acdd..5b24f7a8e7 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -14,8 +14,8 @@ import {
   makeDebugger,
   SUI,
   useIsomorphicLayoutEffect,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
   useMergedRefs,
   usePrevious,
 } from '../../lib'
@@ -193,10 +193,10 @@ const Popup = React.forwardRef(function (props, ref) {
       'ui',
       placementMapping[popperPlacement],
       size,
-      useKeyOrValueAndKey(wide, 'wide'),
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(flowing, 'flowing'),
-      useKeyOnly(inverted, 'inverted'),
+      getKeyOrValueAndKey(wide, 'wide'),
+      getKeyOnly(basic, 'basic'),
+      getKeyOnly(flowing, 'flowing'),
+      getKeyOnly(inverted, 'inverted'),
       'popup transition visible',
       className,
     )
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 9eae360699..a07b31dcfe 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useValueAndKey,
+  getKeyOnly,
+  getValueAndKey,
 } from '../../lib'
 
 /**
@@ -129,14 +129,14 @@ const Progress = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(active || indicating, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(indicating, 'indicating'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(success || isAutoSuccess, 'success'),
-    useKeyOnly(warning, 'warning'),
-    useValueAndKey(attached, 'attached'),
+    getKeyOnly(active || indicating, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(indicating, 'indicating'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(success || isAutoSuccess, 'success'),
+    getKeyOnly(warning, 'warning'),
+    getValueAndKey(attached, 'attached'),
     'progress',
     className,
   )
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index 0f1274dbea..60c3a4fa8a 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -7,7 +7,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
+  getKeyOnly,
   useAutoControlledValue,
 } from '../../lib'
 import RatingIcon from './RatingIcon'
@@ -30,8 +30,8 @@ const Rating = React.forwardRef(function (props, ref) {
     'ui',
     icon,
     size,
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(isSelecting && !disabled && selectedIndex >= 0, 'selected'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(isSelecting && !disabled && selectedIndex >= 0, 'selected'),
     'rating',
     className,
   )
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index e21cb050fa..b0d8ebb0da 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -4,7 +4,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { getComponentType, getUnhandledProps, getKeyOnly } from '../../lib'
 
 /**
  * An internal icon sub-component for Rating component
@@ -13,8 +13,8 @@ const RatingIcon = React.forwardRef(function (props, ref) {
   const { active, className, selected } = props
 
   const classes = cx(
-    useKeyOnly(active, 'active'),
-    useKeyOnly(selected, 'selected'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(selected, 'selected'),
     'icon',
     className,
   )
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 5e5e0ed5b8..fe66cda9ff 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -17,8 +17,8 @@ import {
   objectDiff,
   partitionHTMLProps,
   SUI,
-  useKeyOnly,
-  useValueAndKey,
+  getKeyOnly,
+  getValueAndKey,
 } from '../../lib'
 import Input from '../../elements/Input'
 import SearchCategory from './SearchCategory'
@@ -509,11 +509,11 @@ class SearchInner extends Component {
       open && 'active visible',
       size,
       searchClasses,
-      useKeyOnly(category, 'category'),
-      useKeyOnly(focus, 'focus'),
-      useKeyOnly(fluid, 'fluid'),
-      useKeyOnly(loading, 'loading'),
-      useValueAndKey(aligned, 'aligned'),
+      getKeyOnly(category, 'category'),
+      getKeyOnly(focus, 'focus'),
+      getKeyOnly(fluid, 'fluid'),
+      getKeyOnly(loading, 'loading'),
+      getValueAndKey(aligned, 'aligned'),
       'search',
       className,
     )
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 6f31c3c6b6..8c45963254 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
@@ -21,7 +21,7 @@ const SearchCategory = React.forwardRef(function (props, ref) {
     renderer = ({ name }) => name,
   } = props
 
-  const classes = cx(useKeyOnly(active, 'active'), 'category', className)
+  const classes = cx(getKeyOnly(active, 'active'), 'category', className)
   const rest = getUnhandledProps(SearchCategory, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index fe486c6535..4aa39833f4 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -8,7 +8,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 // Note: You technically only need the 'content' wrapper when there's an
@@ -38,7 +38,7 @@ const SearchResult = React.forwardRef(function (props, ref) {
     _.invoke(props, 'onClick', e, props)
   }
 
-  const classes = cx(useKeyOnly(active, 'active'), 'result', className)
+  const classes = cx(getKeyOnly(active, 'active'), 'result', className)
   const rest = getUnhandledProps(SearchResult, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 0489850b56..27f659fa04 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -11,7 +11,7 @@ import {
   getUnhandledProps,
   getComponentType,
   isRefObject,
-  useKeyOnly,
+  getKeyOnly,
   useIsomorphicLayoutEffect,
   useEventCallback,
   useForceUpdate,
@@ -110,8 +110,8 @@ const Sidebar = React.forwardRef((props, ref) => {
     animation,
     direction,
     width,
-    useKeyOnly(animationTick > 0, 'animating'),
-    useKeyOnly(visible, 'visible'),
+    getKeyOnly(animationTick > 0, 'animating'),
+    getKeyOnly(visible, 'visible'),
     'sidebar',
     className,
   )
diff --git a/src/modules/Sidebar/SidebarPusher.js b/src/modules/Sidebar/SidebarPusher.js
index 7519c0b8ec..1d30869e14 100644
--- a/src/modules/Sidebar/SidebarPusher.js
+++ b/src/modules/Sidebar/SidebarPusher.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -16,7 +16,7 @@ import {
 const SidebarPusher = React.forwardRef(function (props, ref) {
   const { className, dimmed, children, content } = props
 
-  const classes = cx('pusher', useKeyOnly(dimmed, 'dimmed'), className)
+  const classes = cx('pusher', getKeyOnly(dimmed, 'dimmed'), className)
   const rest = getUnhandledProps(SidebarPusher, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index c74c55be7d..cb77f84966 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -8,7 +8,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 import Segment from '../../elements/Segment/Segment'
 
@@ -18,7 +18,7 @@ import Segment from '../../elements/Segment/Segment'
 const TabPane = React.forwardRef(function (props, ref) {
   const { active = true, children, className, content, loading } = props
 
-  const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
+  const classes = cx(getKeyOnly(active, 'active'), getKeyOnly(loading, 'loading'), 'tab', className)
   const rest = getUnhandledProps(TabPane, props)
   const ElementType = getComponentType(props, { defaultAs: Segment })
 
diff --git a/src/modules/Transition/Transition.js b/src/modules/Transition/Transition.js
index 3ad3c88018..fb20ab780c 100644
--- a/src/modules/Transition/Transition.js
+++ b/src/modules/Transition/Transition.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { makeDebugger, normalizeTransitionDuration, SUI, useKeyOnly } from '../../lib'
+import { makeDebugger, normalizeTransitionDuration, SUI, getKeyOnly } from '../../lib'
 import TransitionGroup from './TransitionGroup'
 import {
   computeStatuses,
@@ -125,16 +125,16 @@ export default class Transition extends React.Component {
       return cx(
         animation,
         childClasses,
-        useKeyOnly(animating, 'animating'),
-        useKeyOnly(status === TRANSITION_STATUS_ENTERING, 'in'),
-        useKeyOnly(status === TRANSITION_STATUS_EXITING, 'out'),
-        useKeyOnly(status === TRANSITION_STATUS_EXITED, 'hidden'),
-        useKeyOnly(status !== TRANSITION_STATUS_EXITED, 'visible'),
+        getKeyOnly(animating, 'animating'),
+        getKeyOnly(status === TRANSITION_STATUS_ENTERING, 'in'),
+        getKeyOnly(status === TRANSITION_STATUS_EXITING, 'out'),
+        getKeyOnly(status === TRANSITION_STATUS_EXITED, 'hidden'),
+        getKeyOnly(status !== TRANSITION_STATUS_EXITED, 'visible'),
         'transition',
       )
     }
 
-    return cx(animation, childClasses, useKeyOnly(animating, 'animating transition'))
+    return cx(animation, childClasses, getKeyOnly(animating, 'animating transition'))
   }
 
   computeStyle = () => {

From 791e232be83975b0f1e39b0462a5a0e34aca3cb0 Mon Sep 17 00:00:00 2001
From: Dominik Dosoudil <eziotegg@gmail.com>
Date: Thu, 21 Nov 2024 09:57:04 +0100
Subject: [PATCH 27/30] chore: rename classNameBuilder functions in "elements"
 (#4503)

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Button

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Container

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Divider

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Header

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Icon

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Input

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Image

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Label

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/List

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Loader

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Placeholder

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Rail

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Reveal

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Segment

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in elements/Step
---
 src/elements/Button/Button.js                 | 40 ++++++++---------
 src/elements/Button/ButtonContent.js          |  6 +--
 src/elements/Button/ButtonGroup.js            | 38 ++++++++--------
 src/elements/Container/Container.js           | 10 ++---
 src/elements/Divider/Divider.js               | 16 +++----
 src/elements/Header/Header.js                 | 28 ++++++------
 src/elements/Icon/Icon.js                     | 26 +++++------
 src/elements/Image/Image.js                   | 34 +++++++-------
 src/elements/Input/Input.js                   | 24 +++++-----
 src/elements/Label/Label.js                   | 30 ++++++-------
 src/elements/Label/LabelGroup.js              |  6 +--
 src/elements/List/List.js                     | 32 +++++++-------
 src/elements/List/ListContent.js              |  8 ++--
 src/elements/List/ListIcon.js                 |  4 +-
 src/elements/List/ListItem.js                 |  8 ++--
 src/elements/List/ListList.js                 |  4 +-
 src/elements/Loader/Loader.js                 | 16 +++----
 src/elements/Placeholder/Placeholder.js       |  6 +--
 src/elements/Placeholder/PlaceholderHeader.js |  4 +-
 src/elements/Placeholder/PlaceholderImage.js  |  6 +--
 src/elements/Rail/Rail.js                     | 12 ++---
 src/elements/Reveal/Reveal.js                 |  8 ++--
 src/elements/Reveal/RevealContent.js          |  6 +--
 src/elements/Segment/Segment.js               | 44 +++++++++----------
 src/elements/Segment/SegmentGroup.js          | 12 ++---
 src/elements/Step/Step.js                     | 10 ++---
 src/elements/Step/StepGroup.js                | 22 +++++-----
 27 files changed, 230 insertions(+), 230 deletions(-)

diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index 5e54992429..77806dd00f 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -10,9 +10,9 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
   useMergedRefs,
 } from '../../lib'
 import Icon from '../Icon/Icon'
@@ -103,24 +103,24 @@ const Button = React.forwardRef(function (props, ref) {
   const baseClasses = cx(
     color,
     size,
-    useKeyOnly(active, 'active'),
-    useKeyOnly(basic, 'basic'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(hasIconClass(props), 'icon'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(primary, 'primary'),
-    useKeyOnly(secondary, 'secondary'),
-    useKeyOnly(toggle, 'toggle'),
-    useKeyOrValueAndKey(animated, 'animated'),
-    useKeyOrValueAndKey(attached, 'attached'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(basic, 'basic'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(hasIconClass(props), 'icon'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOnly(negative, 'negative'),
+    getKeyOnly(positive, 'positive'),
+    getKeyOnly(primary, 'primary'),
+    getKeyOnly(secondary, 'secondary'),
+    getKeyOnly(toggle, 'toggle'),
+    getKeyOrValueAndKey(animated, 'animated'),
+    getKeyOrValueAndKey(attached, 'attached'),
   )
-  const labeledClasses = cx(useKeyOrValueAndKey(labelPosition || !!label, 'labeled'))
-  const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'), useValueAndKey(floated, 'floated'))
+  const labeledClasses = cx(getKeyOrValueAndKey(labelPosition || !!label, 'labeled'))
+  const wrapperClasses = cx(getKeyOnly(disabled, 'disabled'), getValueAndKey(floated, 'floated'))
 
   const rest = getUnhandledProps(Button, props)
   const ElementType = getComponentType(props, {
diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js
index fd16b6bd9d..4dc29a8b6e 100644
--- a/src/elements/Button/ButtonContent.js
+++ b/src/elements/Button/ButtonContent.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -17,8 +17,8 @@ const ButtonContent = React.forwardRef(function (props, ref) {
   const { children, className, content, hidden, visible } = props
 
   const classes = cx(
-    useKeyOnly(visible, 'visible'),
-    useKeyOnly(hidden, 'hidden'),
+    getKeyOnly(visible, 'visible'),
+    getKeyOnly(hidden, 'hidden'),
     'content',
     className,
   )
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
index f8b9503232..0f6bf0c32b 100644
--- a/src/elements/Button/ButtonGroup.js
+++ b/src/elements/Button/ButtonGroup.js
@@ -9,10 +9,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
-  useWidthProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
+  getWidthProp,
 } from '../../lib'
 import Button from './Button'
 
@@ -48,21 +48,21 @@ const ButtonGroup = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(basic, 'basic'),
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(icon, 'icon'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(labeled, 'labeled'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(primary, 'primary'),
-    useKeyOnly(secondary, 'secondary'),
-    useKeyOnly(toggle, 'toggle'),
-    useKeyOnly(vertical, 'vertical'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useValueAndKey(floated, 'floated'),
-    useWidthProp(widths),
+    getKeyOnly(basic, 'basic'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(icon, 'icon'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(labeled, 'labeled'),
+    getKeyOnly(negative, 'negative'),
+    getKeyOnly(positive, 'positive'),
+    getKeyOnly(primary, 'primary'),
+    getKeyOnly(secondary, 'secondary'),
+    getKeyOnly(toggle, 'toggle'),
+    getKeyOnly(vertical, 'vertical'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getValueAndKey(floated, 'floated'),
+    getWidthProp(widths),
     'buttons',
     className,
   )
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index 945f5fcc49..678ccbbf1b 100644
--- a/src/elements/Container/Container.js
+++ b/src/elements/Container/Container.js
@@ -8,8 +8,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useTextAlignProp,
+  getKeyOnly,
+  getTextAlignProp,
 } from '../../lib'
 
 /**
@@ -19,9 +19,9 @@ const Container = React.forwardRef(function (props, ref) {
   const { children, className, content, fluid, text, textAlign } = props
   const classes = cx(
     'ui',
-    useKeyOnly(text, 'text'),
-    useKeyOnly(fluid, 'fluid'),
-    useTextAlignProp(textAlign),
+    getKeyOnly(text, 'text'),
+    getKeyOnly(fluid, 'fluid'),
+    getTextAlignProp(textAlign),
     'container',
     className,
   )
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index da8fde6c8a..aaa36a3ecd 100644
--- a/src/elements/Divider/Divider.js
+++ b/src/elements/Divider/Divider.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -29,13 +29,13 @@ const Divider = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(clearing, 'clearing'),
-    useKeyOnly(fitted, 'fitted'),
-    useKeyOnly(hidden, 'hidden'),
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(section, 'section'),
-    useKeyOnly(vertical, 'vertical'),
+    getKeyOnly(clearing, 'clearing'),
+    getKeyOnly(fitted, 'fitted'),
+    getKeyOnly(hidden, 'hidden'),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(section, 'section'),
+    getKeyOnly(vertical, 'vertical'),
     'divider',
     className,
   )
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index 285d07031a..2d0e48ac03 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -9,10 +9,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useValueAndKey,
-  useTextAlignProp,
-  useKeyOrValueAndKey,
-  useKeyOnly,
+  getValueAndKey,
+  getTextAlignProp,
+  getKeyOrValueAndKey,
+  getKeyOnly,
 } from '../../lib'
 import Icon from '../Icon'
 import Image from '../Image'
@@ -47,16 +47,16 @@ const Header = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(block, 'block'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(dividing, 'dividing'),
-    useValueAndKey(floated, 'floated'),
-    useKeyOnly(icon === true, 'icon'),
-    useKeyOnly(image === true, 'image'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(sub, 'sub'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useTextAlignProp(textAlign),
+    getKeyOnly(block, 'block'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(dividing, 'dividing'),
+    getValueAndKey(floated, 'floated'),
+    getKeyOnly(icon === true, 'icon'),
+    getKeyOnly(image === true, 'image'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(sub, 'sub'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getTextAlignProp(textAlign),
     'header',
     className,
   )
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index a702cdcb4c..fcb910d4e9 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -10,9 +10,9 @@ import {
   getUnhandledProps,
   SUI,
   useEventCallback,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
 } from '../../lib'
 import IconGroup from './IconGroup'
 
@@ -59,16 +59,16 @@ const Icon = React.forwardRef(function (props, ref) {
     color,
     name,
     size,
-    useKeyOnly(bordered, 'bordered'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(fitted, 'fitted'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(link, 'link'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOrValueAndKey(corner, 'corner'),
-    useValueAndKey(flipped, 'flipped'),
-    useValueAndKey(rotated, 'rotated'),
+    getKeyOnly(bordered, 'bordered'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(fitted, 'fitted'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(link, 'link'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOrValueAndKey(corner, 'corner'),
+    getValueAndKey(flipped, 'flipped'),
+    getValueAndKey(rotated, 'rotated'),
     'icon',
     className,
   )
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index 8975f15c05..f9f2ed1c37 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -12,10 +12,10 @@ import {
   htmlImageProps,
   partitionHTMLProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
-  useVerticalAlignProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
+  getVerticalAlignProp,
 } from '../../lib'
 import Dimmer from '../../modules/Dimmer'
 import Label from '../Label/Label'
@@ -51,20 +51,20 @@ const Image = React.forwardRef(function (props, ref) {
   } = props
 
   const classes = cx(
-    useKeyOnly(ui, 'ui'),
+    getKeyOnly(ui, 'ui'),
     size,
-    useKeyOnly(avatar, 'avatar'),
-    useKeyOnly(bordered, 'bordered'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(hidden, 'hidden'),
-    useKeyOnly(inline, 'inline'),
-    useKeyOnly(rounded, 'rounded'),
-    useKeyOrValueAndKey(spaced, 'spaced'),
-    useValueAndKey(floated, 'floated'),
-    useVerticalAlignProp(verticalAlign, 'aligned'),
+    getKeyOnly(avatar, 'avatar'),
+    getKeyOnly(bordered, 'bordered'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(hidden, 'hidden'),
+    getKeyOnly(inline, 'inline'),
+    getKeyOnly(rounded, 'rounded'),
+    getKeyOrValueAndKey(spaced, 'spaced'),
+    getValueAndKey(floated, 'floated'),
+    getVerticalAlignProp(verticalAlign, 'aligned'),
     'image',
     className,
   )
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 11fa3cc6fe..af09211a0c 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -11,8 +11,8 @@ import {
   getComponentType,
   getUnhandledProps,
   partitionHTMLProps,
-  useKeyOnly,
-  useValueAndKey,
+  getKeyOnly,
+  getValueAndKey,
   setRef,
 } from '../../lib'
 import Button from '../Button'
@@ -95,16 +95,16 @@ const Input = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(focus, 'focus'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOnly(transparent, 'transparent'),
-    useValueAndKey(actionPosition, 'action') || useKeyOnly(action, 'action'),
-    useValueAndKey(iconPosition, 'icon') || useKeyOnly(icon || loading, 'icon'),
-    useValueAndKey(labelPosition, 'labeled') || useKeyOnly(label, 'labeled'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(focus, 'focus'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOnly(transparent, 'transparent'),
+    getValueAndKey(actionPosition, 'action') || getKeyOnly(action, 'action'),
+    getValueAndKey(iconPosition, 'icon') || getKeyOnly(icon || loading, 'icon'),
+    getValueAndKey(labelPosition, 'labeled') || getKeyOnly(label, 'labeled'),
     'input',
     className,
   )
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index 736234687a..57a0cc437e 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -10,9 +10,9 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
   useEventCallback,
 } from '../../lib'
 import Icon from '../Icon/Icon'
@@ -59,18 +59,18 @@ const Label = React.forwardRef(function (props, ref) {
     color,
     pointingClass,
     size,
-    useKeyOnly(active, 'active'),
-    useKeyOnly(basic, 'basic'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(empty, 'empty'),
-    useKeyOnly(floating, 'floating'),
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(image === true, 'image'),
-    useKeyOnly(prompt, 'prompt'),
-    useKeyOnly(tag, 'tag'),
-    useKeyOrValueAndKey(corner, 'corner'),
-    useKeyOrValueAndKey(ribbon, 'ribbon'),
-    useValueAndKey(attached, 'attached'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(basic, 'basic'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(empty, 'empty'),
+    getKeyOnly(floating, 'floating'),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(image === true, 'image'),
+    getKeyOnly(prompt, 'prompt'),
+    getKeyOnly(tag, 'tag'),
+    getKeyOrValueAndKey(corner, 'corner'),
+    getKeyOrValueAndKey(ribbon, 'ribbon'),
+    getValueAndKey(attached, 'attached'),
     'label',
     className,
   )
diff --git a/src/elements/Label/LabelGroup.js b/src/elements/Label/LabelGroup.js
index ff50f7858d..40f3cee9d7 100644
--- a/src/elements/Label/LabelGroup.js
+++ b/src/elements/Label/LabelGroup.js
@@ -8,7 +8,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -21,8 +21,8 @@ const LabelGroup = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(tag, 'tag'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(tag, 'tag'),
     'labels',
     className,
   )
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index cb134c41ee..a78ce6cab5 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -9,10 +9,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
-  useVerticalAlignProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
+  getVerticalAlignProp,
 } from '../../lib'
 import ListContent from './ListContent'
 import ListDescription from './ListDescription'
@@ -48,18 +48,18 @@ const List = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(animated, 'animated'),
-    useKeyOnly(bulleted, 'bulleted'),
-    useKeyOnly(celled, 'celled'),
-    useKeyOnly(divided, 'divided'),
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(link, 'link'),
-    useKeyOnly(ordered, 'ordered'),
-    useKeyOnly(selection, 'selection'),
-    useKeyOrValueAndKey(relaxed, 'relaxed'),
-    useValueAndKey(floated, 'floated'),
-    useVerticalAlignProp(verticalAlign),
+    getKeyOnly(animated, 'animated'),
+    getKeyOnly(bulleted, 'bulleted'),
+    getKeyOnly(celled, 'celled'),
+    getKeyOnly(divided, 'divided'),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(link, 'link'),
+    getKeyOnly(ordered, 'ordered'),
+    getKeyOnly(selection, 'selection'),
+    getKeyOrValueAndKey(relaxed, 'relaxed'),
+    getValueAndKey(floated, 'floated'),
+    getVerticalAlignProp(verticalAlign),
     'list',
     className,
   )
diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js
index dd2192e43d..2fc4334e88 100644
--- a/src/elements/List/ListContent.js
+++ b/src/elements/List/ListContent.js
@@ -9,8 +9,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useValueAndKey,
-  useVerticalAlignProp,
+  getValueAndKey,
+  getVerticalAlignProp,
 } from '../../lib'
 import ListDescription from './ListDescription'
 import ListHeader from './ListHeader'
@@ -22,8 +22,8 @@ const ListContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, floated, header, verticalAlign } = props
 
   const classes = cx(
-    useValueAndKey(floated, 'floated'),
-    useVerticalAlignProp(verticalAlign),
+    getValueAndKey(floated, 'floated'),
+    getVerticalAlignProp(verticalAlign),
     'content',
     className,
   )
diff --git a/src/elements/List/ListIcon.js b/src/elements/List/ListIcon.js
index bfa3697cab..25d95fbf2d 100644
--- a/src/elements/List/ListIcon.js
+++ b/src/elements/List/ListIcon.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { createShorthandFactory, getUnhandledProps, SUI, useVerticalAlignProp } from '../../lib'
+import { createShorthandFactory, getUnhandledProps, SUI, getVerticalAlignProp } from '../../lib'
 import Icon from '../Icon/Icon'
 
 /**
@@ -10,7 +10,7 @@ import Icon from '../Icon/Icon'
  */
 const ListIcon = React.forwardRef(function (props, ref) {
   const { className, verticalAlign } = props
-  const classes = cx(useVerticalAlignProp(verticalAlign), className)
+  const classes = cx(getVerticalAlignProp(verticalAlign), className)
   const rest = getUnhandledProps(ListIcon, props)
 
   return <Icon {...rest} className={classes} ref={ref} />
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index 2491728065..5efe9985d5 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
   useEventCallback,
 } from '../../lib'
 import Image from '../Image'
@@ -37,9 +37,9 @@ const ListItem = React.forwardRef(function (props, ref) {
 
   const ElementType = getComponentType(props)
   const classes = cx(
-    useKeyOnly(active, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(ElementType !== 'li', 'item'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(ElementType !== 'li', 'item'),
     className,
   )
   const rest = getUnhandledProps(ListItem, props)
diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js
index 9723d304a5..11262d966a 100644
--- a/src/elements/List/ListList.js
+++ b/src/elements/List/ListList.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -18,7 +18,7 @@ const ListList = React.forwardRef(function (props, ref) {
 
   const rest = getUnhandledProps(ListList, props)
   const ElementType = getComponentType(props)
-  const classes = cx(useKeyOnly(ElementType !== 'ul' && ElementType !== 'ol', 'list'), className)
+  const classes = cx(getKeyOnly(ElementType !== 'ul' && ElementType !== 'ol', 'list'), className)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Loader/Loader.js b/src/elements/Loader/Loader.js
index 4246854cc1..9dccd13711 100644
--- a/src/elements/Loader/Loader.js
+++ b/src/elements/Loader/Loader.js
@@ -8,8 +8,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
 } from '../../lib'
 
 /**
@@ -32,12 +32,12 @@ const Loader = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(active, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(indeterminate, 'indeterminate'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(children || content, 'text'),
-    useKeyOrValueAndKey(inline, 'inline'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(indeterminate, 'indeterminate'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(children || content, 'text'),
+    getKeyOrValueAndKey(inline, 'inline'),
     'loader',
     className,
   )
diff --git a/src/elements/Placeholder/Placeholder.js b/src/elements/Placeholder/Placeholder.js
index 5b75e1e585..023fb08d38 100644
--- a/src/elements/Placeholder/Placeholder.js
+++ b/src/elements/Placeholder/Placeholder.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 import PlaceholderHeader from './PlaceholderHeader'
 import PlaceholderImage from './PlaceholderImage'
@@ -21,8 +21,8 @@ const Placeholder = React.forwardRef(function (props, ref) {
   const { children, className, content, fluid, inverted } = props
   const classes = cx(
     'ui',
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(inverted, 'inverted'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(inverted, 'inverted'),
     'placeholder',
     className,
   )
diff --git a/src/elements/Placeholder/PlaceholderHeader.js b/src/elements/Placeholder/PlaceholderHeader.js
index 49039714fc..c489c8b933 100644
--- a/src/elements/Placeholder/PlaceholderHeader.js
+++ b/src/elements/Placeholder/PlaceholderHeader.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -15,7 +15,7 @@ import {
  */
 const PlaceholderHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, image } = props
-  const classes = cx(useKeyOnly(image, 'image'), 'header', className)
+  const classes = cx(getKeyOnly(image, 'image'), 'header', className)
   const rest = getUnhandledProps(PlaceholderHeader, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js
index e61f7c6437..07fbc35360 100644
--- a/src/elements/Placeholder/PlaceholderImage.js
+++ b/src/elements/Placeholder/PlaceholderImage.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { customPropTypes, getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { customPropTypes, getComponentType, getUnhandledProps, getKeyOnly } from '../../lib'
 
 /**
  * A placeholder can contain an image.
@@ -10,8 +10,8 @@ import { customPropTypes, getComponentType, getUnhandledProps, useKeyOnly } from
 const PlaceholderImage = React.forwardRef(function (props, ref) {
   const { className, square, rectangular } = props
   const classes = cx(
-    useKeyOnly(square, 'square'),
-    useKeyOnly(rectangular, 'rectangular'),
+    getKeyOnly(square, 'square'),
+    getKeyOnly(rectangular, 'rectangular'),
     'image',
     className,
   )
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index 641d56932a..3b58761591 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -9,8 +9,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
 } from '../../lib'
 
 /**
@@ -33,10 +33,10 @@ const Rail = React.forwardRef(function (props, ref) {
     'ui',
     position,
     size,
-    useKeyOnly(attached, 'attached'),
-    useKeyOnly(dividing, 'dividing'),
-    useKeyOnly(internal, 'internal'),
-    useKeyOrValueAndKey(close, 'close'),
+    getKeyOnly(attached, 'attached'),
+    getKeyOnly(dividing, 'dividing'),
+    getKeyOnly(internal, 'internal'),
+    getKeyOrValueAndKey(close, 'close'),
     'rail',
     className,
   )
diff --git a/src/elements/Reveal/Reveal.js b/src/elements/Reveal/Reveal.js
index 6010e1ada7..d39971fecf 100644
--- a/src/elements/Reveal/Reveal.js
+++ b/src/elements/Reveal/Reveal.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 import RevealContent from './RevealContent'
 
@@ -20,9 +20,9 @@ const Reveal = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     animated,
-    useKeyOnly(active, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(instant, 'instant'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(instant, 'instant'),
     'reveal',
     className,
   )
diff --git a/src/elements/Reveal/RevealContent.js b/src/elements/Reveal/RevealContent.js
index 96c07abd94..99804391a8 100644
--- a/src/elements/Reveal/RevealContent.js
+++ b/src/elements/Reveal/RevealContent.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -18,8 +18,8 @@ const RevealContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(hidden, 'hidden'),
-    useKeyOnly(visible, 'visible'),
+    getKeyOnly(hidden, 'hidden'),
+    getKeyOnly(visible, 'visible'),
     'content',
     className,
   )
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index 854b7f00dc..41c38f1acf 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -9,10 +9,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useTextAlignProp,
-  useValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getTextAlignProp,
+  getValueAndKey,
 } from '../../lib'
 import SegmentGroup from './SegmentGroup'
 import SegmentInline from './SegmentInline'
@@ -51,24 +51,24 @@ const Segment = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(basic, 'basic'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(clearing, 'clearing'),
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOnly(placeholder, 'placeholder'),
-    useKeyOnly(piled, 'piled'),
-    useKeyOnly(raised, 'raised'),
-    useKeyOnly(secondary, 'secondary'),
-    useKeyOnly(stacked, 'stacked'),
-    useKeyOnly(tertiary, 'tertiary'),
-    useKeyOnly(vertical, 'vertical'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useKeyOrValueAndKey(padded, 'padded'),
-    useTextAlignProp(textAlign),
-    useValueAndKey(floated, 'floated'),
+    getKeyOnly(basic, 'basic'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(clearing, 'clearing'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOnly(placeholder, 'placeholder'),
+    getKeyOnly(piled, 'piled'),
+    getKeyOnly(raised, 'raised'),
+    getKeyOnly(secondary, 'secondary'),
+    getKeyOnly(stacked, 'stacked'),
+    getKeyOnly(tertiary, 'tertiary'),
+    getKeyOnly(vertical, 'vertical'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getKeyOrValueAndKey(padded, 'padded'),
+    getTextAlignProp(textAlign),
+    getValueAndKey(floated, 'floated'),
     'segment',
     className,
   )
diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js
index bc7f871370..851b45f010 100644
--- a/src/elements/Segment/SegmentGroup.js
+++ b/src/elements/Segment/SegmentGroup.js
@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -21,11 +21,11 @@ const SegmentGroup = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(piled, 'piled'),
-    useKeyOnly(raised, 'raised'),
-    useKeyOnly(stacked, 'stacked'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(piled, 'piled'),
+    getKeyOnly(raised, 'raised'),
+    getKeyOnly(stacked, 'stacked'),
     'segments',
     className,
   )
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index 4cc17ed1c2..a078ec71d8 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
   useEventCallback,
 } from '../../lib'
 import Icon from '../Icon'
@@ -44,10 +44,10 @@ const Step = React.forwardRef(function (props, ref) {
   })
 
   const classes = cx(
-    useKeyOnly(active, 'active'),
-    useKeyOnly(completed, 'completed'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(link, 'link'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(completed, 'completed'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(link, 'link'),
     'step',
     className,
   )
diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js
index 4247bb00c5..8dcae5db92 100644
--- a/src/elements/Step/StepGroup.js
+++ b/src/elements/Step/StepGroup.js
@@ -10,10 +10,10 @@ import {
   getUnhandledProps,
   numberToWordMap,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
-  useWidthProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
+  getWidthProp,
 } from '../../lib'
 import Step from './Step'
 
@@ -40,13 +40,13 @@ const StepGroup = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(ordered, 'ordered'),
-    useKeyOnly(unstackable, 'unstackable'),
-    useKeyOnly(vertical, 'vertical'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useValueAndKey(stackable, 'stackable'),
-    useWidthProp(widths),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(ordered, 'ordered'),
+    getKeyOnly(unstackable, 'unstackable'),
+    getKeyOnly(vertical, 'vertical'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getValueAndKey(stackable, 'stackable'),
+    getWidthProp(widths),
     'steps',
     className,
   )

From 74cbda4c7b328650b75ffd8e9531516762cf724c Mon Sep 17 00:00:00 2001
From: Dominik Dosoudil <eziotegg@gmail.com>
Date: Thu, 21 Nov 2024 10:08:09 +0100
Subject: [PATCH 28/30] chore: rename classNameBuilder functions in
 "collections" (#4502)

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in collections/Table

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in collections/Menu

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in collections/Grid

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in collections/Form

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in collections/Breadcrumb

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in collections/Message

---------

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
---
 .../Breadcrumb/BreadcrumbSection.js           |  4 +-
 src/collections/Form/Form.js                  | 18 +++----
 src/collections/Form/FormField.js             | 14 +++---
 src/collections/Form/FormGroup.js             | 16 +++----
 src/collections/Grid/Grid.js                  | 40 ++++++++--------
 src/collections/Grid/GridColumn.js            | 34 ++++++-------
 src/collections/Grid/GridRow.js               | 26 +++++-----
 src/collections/Menu/Menu.js                  | 40 ++++++++--------
 src/collections/Menu/MenuItem.js              | 16 +++----
 src/collections/Message/Message.js            | 28 +++++------
 src/collections/Table/Table.js                | 48 +++++++++----------
 src/collections/Table/TableCell.js            | 32 ++++++-------
 src/collections/Table/TableHeader.js          |  4 +-
 src/collections/Table/TableHeaderCell.js      |  4 +-
 src/collections/Table/TableRow.js             | 22 ++++-----
 15 files changed, 173 insertions(+), 173 deletions(-)

diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index b48f3eaf49..6982902fee 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getUnhandledProps,
   getComponentType,
-  useKeyOnly,
+  getKeyOnly,
   useEventCallback,
 } from '../../lib'
 
@@ -19,7 +19,7 @@ import {
 const BreadcrumbSection = React.forwardRef(function (props, ref) {
   const { active, children, className, content, href, link, onClick } = props
 
-  const classes = cx(useKeyOnly(active, 'active'), 'section', className)
+  const classes = cx(getKeyOnly(active, 'active'), 'section', className)
   const rest = getUnhandledProps(BreadcrumbSection, props)
   const ElementType = getComponentType(props, {
     getDefault: () => {
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 8da9b9cd65..f383e5def7 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { getComponentType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
+import { getComponentType, getUnhandledProps, SUI, getKeyOnly, getWidthProp } from '../../lib'
 import FormButton from './FormButton'
 import FormCheckbox from './FormCheckbox'
 import FormDropdown from './FormDropdown'
@@ -50,14 +50,14 @@ const Form = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(error, 'error'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOnly(reply, 'reply'),
-    useKeyOnly(success, 'success'),
-    useKeyOnly(unstackable, 'unstackable'),
-    useKeyOnly(warning, 'warning'),
-    useWidthProp(widths, null, true),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOnly(reply, 'reply'),
+    getKeyOnly(success, 'success'),
+    getKeyOnly(unstackable, 'unstackable'),
+    getKeyOnly(warning, 'warning'),
+    getWidthProp(widths, null, true),
     'form',
     className,
   )
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index ae5c613b0d..c89c2a311d 100644
--- a/src/collections/Form/FormField.js
+++ b/src/collections/Form/FormField.js
@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useWidthProp,
+  getKeyOnly,
+  getWidthProp,
 } from '../../lib'
 import Label from '../../elements/Label'
 import Checkbox from '../../modules/Checkbox'
@@ -44,11 +44,11 @@ const FormField = React.forwardRef(function (props, ref) {
   } = props
 
   const classes = cx(
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(inline, 'inline'),
-    useKeyOnly(required, 'required'),
-    useWidthProp(width, 'wide'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(inline, 'inline'),
+    getKeyOnly(required, 'required'),
+    getWidthProp(width, 'wide'),
     'field',
     className,
   )
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index 11220ef3c4..90375d6080 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -7,8 +7,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useWidthProp,
+  getKeyOnly,
+  getWidthProp,
 } from '../../lib'
 
 /**
@@ -19,12 +19,12 @@ const FormGroup = React.forwardRef((props, ref) => {
   const { children, className, disabled, error, grouped, inline, unstackable, widths } = props
 
   const classes = cx(
-    useKeyOnly(error, 'error'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(grouped, 'grouped'),
-    useKeyOnly(inline, 'inline'),
-    useKeyOnly(unstackable, 'unstackable'),
-    useWidthProp(widths, null, true),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(grouped, 'grouped'),
+    getKeyOnly(inline, 'inline'),
+    getKeyOnly(unstackable, 'unstackable'),
+    getWidthProp(widths, null, true),
     'fields',
     className,
   )
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index bd912ca028..e3d16d7b1b 100644
--- a/src/collections/Grid/Grid.js
+++ b/src/collections/Grid/Grid.js
@@ -7,12 +7,12 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useMultipleProp,
-  useTextAlignProp,
-  useVerticalAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getMultipleProp,
+  getTextAlignProp,
+  getVerticalAlignProp,
+  getWidthProp,
 } from '../../lib'
 import GridColumn from './GridColumn'
 import GridRow from './GridRow'
@@ -42,20 +42,20 @@ const Grid = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(container, 'container'),
-    useKeyOnly(doubling, 'doubling'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(stackable, 'stackable'),
-    useKeyOnly(stretched, 'stretched'),
-    useKeyOrValueAndKey(celled, 'celled'),
-    useKeyOrValueAndKey(divided, 'divided'),
-    useKeyOrValueAndKey(padded, 'padded'),
-    useKeyOrValueAndKey(relaxed, 'relaxed'),
-    useMultipleProp(reversed, 'reversed'),
-    useTextAlignProp(textAlign),
-    useVerticalAlignProp(verticalAlign),
-    useWidthProp(columns, 'column', true),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(container, 'container'),
+    getKeyOnly(doubling, 'doubling'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(stackable, 'stackable'),
+    getKeyOnly(stretched, 'stretched'),
+    getKeyOrValueAndKey(celled, 'celled'),
+    getKeyOrValueAndKey(divided, 'divided'),
+    getKeyOrValueAndKey(padded, 'padded'),
+    getKeyOrValueAndKey(relaxed, 'relaxed'),
+    getMultipleProp(reversed, 'reversed'),
+    getTextAlignProp(textAlign),
+    getVerticalAlignProp(verticalAlign),
+    getWidthProp(columns, 'column', true),
     'grid',
     className,
   )
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index 248e9c2321..8d2326d02c 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/src/collections/Grid/GridColumn.js
@@ -8,12 +8,12 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useMultipleProp,
-  useTextAlignProp,
-  useValueAndKey,
-  useVerticalAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getMultipleProp,
+  getTextAlignProp,
+  getValueAndKey,
+  getVerticalAlignProp,
+  getWidthProp,
 } from '../../lib'
 
 /**
@@ -39,17 +39,17 @@ const GridColumn = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     color,
-    useKeyOnly(stretched, 'stretched'),
-    useMultipleProp(only, 'only'),
-    useTextAlignProp(textAlign),
-    useValueAndKey(floated, 'floated'),
-    useVerticalAlignProp(verticalAlign),
-    useWidthProp(computer, 'wide computer'),
-    useWidthProp(largeScreen, 'wide large screen'),
-    useWidthProp(mobile, 'wide mobile'),
-    useWidthProp(tablet, 'wide tablet'),
-    useWidthProp(widescreen, 'wide widescreen'),
-    useWidthProp(width, 'wide'),
+    getKeyOnly(stretched, 'stretched'),
+    getMultipleProp(only, 'only'),
+    getTextAlignProp(textAlign),
+    getValueAndKey(floated, 'floated'),
+    getVerticalAlignProp(verticalAlign),
+    getWidthProp(computer, 'wide computer'),
+    getWidthProp(largeScreen, 'wide large screen'),
+    getWidthProp(mobile, 'wide mobile'),
+    getWidthProp(tablet, 'wide tablet'),
+    getWidthProp(widescreen, 'wide widescreen'),
+    getWidthProp(width, 'wide'),
     'column',
     className,
   )
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index bd26b13afd..f6c15d9c78 100644
--- a/src/collections/Grid/GridRow.js
+++ b/src/collections/Grid/GridRow.js
@@ -7,11 +7,11 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useMultipleProp,
-  useTextAlignProp,
-  useVerticalAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getMultipleProp,
+  getTextAlignProp,
+  getVerticalAlignProp,
+  getWidthProp,
 } from '../../lib'
 
 /**
@@ -34,14 +34,14 @@ const GridRow = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     color,
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(divided, 'divided'),
-    useKeyOnly(stretched, 'stretched'),
-    useMultipleProp(only, 'only'),
-    useMultipleProp(reversed, 'reversed'),
-    useTextAlignProp(textAlign),
-    useVerticalAlignProp(verticalAlign),
-    useWidthProp(columns, 'column', true),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(divided, 'divided'),
+    getKeyOnly(stretched, 'stretched'),
+    getMultipleProp(only, 'only'),
+    getMultipleProp(reversed, 'reversed'),
+    getTextAlignProp(textAlign),
+    getVerticalAlignProp(verticalAlign),
+    getWidthProp(columns, 'column', true),
     'row',
     className,
   )
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 149383557d..456f8eceaf 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -10,10 +10,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
-  useWidthProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
+  getWidthProp,
   useAutoControlledValue,
 } from '../../lib'
 import MenuHeader from './MenuHeader'
@@ -58,22 +58,22 @@ const Menu = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(borderless, 'borderless'),
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(pagination, 'pagination'),
-    useKeyOnly(pointing, 'pointing'),
-    useKeyOnly(secondary, 'secondary'),
-    useKeyOnly(stackable, 'stackable'),
-    useKeyOnly(text, 'text'),
-    useKeyOnly(vertical, 'vertical'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useKeyOrValueAndKey(floated, 'floated'),
-    useKeyOrValueAndKey(icon, 'icon'),
-    useKeyOrValueAndKey(tabular, 'tabular'),
-    useValueAndKey(fixed, 'fixed'),
-    useWidthProp(widths, 'item'),
+    getKeyOnly(borderless, 'borderless'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(pagination, 'pagination'),
+    getKeyOnly(pointing, 'pointing'),
+    getKeyOnly(secondary, 'secondary'),
+    getKeyOnly(stackable, 'stackable'),
+    getKeyOnly(text, 'text'),
+    getKeyOnly(vertical, 'vertical'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getKeyOrValueAndKey(floated, 'floated'),
+    getKeyOrValueAndKey(icon, 'icon'),
+    getKeyOrValueAndKey(tabular, 'tabular'),
+    getValueAndKey(fixed, 'fixed'),
+    getWidthProp(widths, 'item'),
     className,
     'menu',
   )
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 6420541536..bbd2e22573 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
   useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -39,12 +39,12 @@ const MenuItem = React.forwardRef(function (props, ref) {
   const classes = cx(
     color,
     position,
-    useKeyOnly(active, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(icon === true || (icon && !(name || content)), 'icon'),
-    useKeyOnly(header, 'header'),
-    useKeyOnly(link, 'link'),
-    useKeyOrValueAndKey(fitted, 'fitted'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(icon === true || (icon && !(name || content)), 'icon'),
+    getKeyOnly(header, 'header'),
+    getKeyOnly(link, 'link'),
+    getKeyOrValueAndKey(fitted, 'fitted'),
     'item',
     className,
   )
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index c3b940151d..d1ef2a52aa 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
   useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -52,18 +52,18 @@ const Message = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(floating, 'floating'),
-    useKeyOnly(hidden, 'hidden'),
-    useKeyOnly(icon, 'icon'),
-    useKeyOnly(info, 'info'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(success, 'success'),
-    useKeyOnly(visible, 'visible'),
-    useKeyOnly(warning, 'warning'),
-    useKeyOrValueAndKey(attached, 'attached'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(floating, 'floating'),
+    getKeyOnly(hidden, 'hidden'),
+    getKeyOnly(icon, 'icon'),
+    getKeyOnly(info, 'info'),
+    getKeyOnly(negative, 'negative'),
+    getKeyOnly(positive, 'positive'),
+    getKeyOnly(success, 'success'),
+    getKeyOnly(visible, 'visible'),
+    getKeyOnly(warning, 'warning'),
+    getKeyOrValueAndKey(attached, 'attached'),
     'message',
     className,
   )
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index 80d6367920..e16d8b70ee 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -9,11 +9,11 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useTextAlignProp,
-  useVerticalAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getTextAlignProp,
+  getVerticalAlignProp,
+  getWidthProp,
 } from '../../lib'
 import TableBody from './TableBody'
 import TableCell from './TableCell'
@@ -61,25 +61,25 @@ const Table = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(celled, 'celled'),
-    useKeyOnly(collapsing, 'collapsing'),
-    useKeyOnly(definition, 'definition'),
-    useKeyOnly(fixed, 'fixed'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(selectable, 'selectable'),
-    useKeyOnly(singleLine, 'single line'),
-    useKeyOnly(sortable, 'sortable'),
-    useKeyOnly(stackable, 'stackable'),
-    useKeyOnly(striped, 'striped'),
-    useKeyOnly(structured, 'structured'),
-    useKeyOnly(unstackable, 'unstackable'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useKeyOrValueAndKey(basic, 'basic'),
-    useKeyOrValueAndKey(compact, 'compact'),
-    useKeyOrValueAndKey(padded, 'padded'),
-    useTextAlignProp(textAlign),
-    useVerticalAlignProp(verticalAlign),
-    useWidthProp(columns, 'column'),
+    getKeyOnly(celled, 'celled'),
+    getKeyOnly(collapsing, 'collapsing'),
+    getKeyOnly(definition, 'definition'),
+    getKeyOnly(fixed, 'fixed'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(selectable, 'selectable'),
+    getKeyOnly(singleLine, 'single line'),
+    getKeyOnly(sortable, 'sortable'),
+    getKeyOnly(stackable, 'stackable'),
+    getKeyOnly(striped, 'striped'),
+    getKeyOnly(structured, 'structured'),
+    getKeyOnly(unstackable, 'unstackable'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getKeyOrValueAndKey(basic, 'basic'),
+    getKeyOrValueAndKey(compact, 'compact'),
+    getKeyOrValueAndKey(padded, 'padded'),
+    getTextAlignProp(textAlign),
+    getVerticalAlignProp(verticalAlign),
+    getWidthProp(columns, 'column'),
     'table',
     className,
   )
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index 48cd38d27d..b7217fd921 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -10,10 +10,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useTextAlignProp,
-  useVerticalAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getTextAlignProp,
+  getVerticalAlignProp,
+  getWidthProp,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
@@ -41,18 +41,18 @@ const TableCell = React.forwardRef(function (props, ref) {
   } = props
 
   const classes = cx(
-    useKeyOnly(active, 'active'),
-    useKeyOnly(collapsing, 'collapsing'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(selectable, 'selectable'),
-    useKeyOnly(singleLine, 'single line'),
-    useKeyOnly(warning, 'warning'),
-    useTextAlignProp(textAlign),
-    useVerticalAlignProp(verticalAlign),
-    useWidthProp(width, 'wide'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(collapsing, 'collapsing'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(negative, 'negative'),
+    getKeyOnly(positive, 'positive'),
+    getKeyOnly(selectable, 'selectable'),
+    getKeyOnly(singleLine, 'single line'),
+    getKeyOnly(warning, 'warning'),
+    getTextAlignProp(textAlign),
+    getVerticalAlignProp(verticalAlign),
+    getWidthProp(width, 'wide'),
     className,
   )
   const rest = getUnhandledProps(TableCell, props)
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index 99a5471ad0..e597d0140e 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -16,7 +16,7 @@ import {
 const TableHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, fullWidth } = props
 
-  const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
+  const classes = cx(getKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)
   const ElementType = getComponentType(props, { defaultAs: 'thead' })
 
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index efc1417829..c39fe06faf 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { getUnhandledProps, useValueAndKey } from '../../lib'
+import { getUnhandledProps, getValueAndKey } from '../../lib'
 import TableCell from './TableCell'
 
 /**
@@ -11,7 +11,7 @@ import TableCell from './TableCell'
 const TableHeaderCell = React.forwardRef(function (props, ref) {
   const { as = 'th', className, sorted } = props
 
-  const classes = cx(useValueAndKey(sorted, 'sorted'), className)
+  const classes = cx(getValueAndKey(sorted, 'sorted'), className)
   const rest = getUnhandledProps(TableHeaderCell, props)
 
   return <TableCell {...rest} as={as} className={classes} ref={ref} />
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 0f0f9baa42..bd94de7eec 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -10,9 +10,9 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useTextAlignProp,
-  useVerticalAlignProp,
+  getKeyOnly,
+  getTextAlignProp,
+  getVerticalAlignProp,
 } from '../../lib'
 import TableCell from './TableCell'
 
@@ -36,14 +36,14 @@ const TableRow = React.forwardRef(function (props, ref) {
   } = props
 
   const classes = cx(
-    useKeyOnly(active, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(warning, 'warning'),
-    useTextAlignProp(textAlign),
-    useVerticalAlignProp(verticalAlign),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(negative, 'negative'),
+    getKeyOnly(positive, 'positive'),
+    getKeyOnly(warning, 'warning'),
+    getTextAlignProp(textAlign),
+    getVerticalAlignProp(verticalAlign),
     className,
   )
   const rest = getUnhandledProps(TableRow, props)

From a7e8c695de1333ea2b84f2d21fdeb7d6c31f27be Mon Sep 17 00:00:00 2001
From: Dominik Dosoudil <eziotegg@gmail.com>
Date: Fri, 22 Nov 2024 09:16:38 +0100
Subject: [PATCH 29/30] chore: rename classNameBuilder functions in "views" and
 remove classNameBuilder aliases with "use" prefix (#4505)

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Advertisement

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Card

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Comment

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Feed

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Item

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Statistic

* chore: remove deprecaetd unused classNameBuilders
---
 src/lib/classNameBuilders.js             | 35 ------------------------
 src/lib/index.js                         |  7 -----
 src/views/Advertisement/Advertisement.js |  6 ++--
 src/views/Card/Card.js                   | 10 +++----
 src/views/Card/CardContent.js            |  6 ++--
 src/views/Card/CardDescription.js        |  4 +--
 src/views/Card/CardGroup.js              | 16 +++++------
 src/views/Card/CardHeader.js             |  4 +--
 src/views/Card/CardMeta.js               |  4 +--
 src/views/Comment/Comment.js             |  4 +--
 src/views/Comment/CommentAction.js       |  4 +--
 src/views/Comment/CommentGroup.js        |  8 +++---
 src/views/Feed/FeedExtra.js              |  6 ++--
 src/views/Item/ItemContent.js            |  4 +--
 src/views/Item/ItemGroup.js              | 12 ++++----
 src/views/Statistic/Statistic.js         | 10 +++----
 src/views/Statistic/StatisticGroup.js    | 10 +++----
 src/views/Statistic/StatisticValue.js    |  4 +--
 18 files changed, 56 insertions(+), 98 deletions(-)

diff --git a/src/lib/classNameBuilders.js b/src/lib/classNameBuilders.js
index 09834376d0..8bde9b3790 100644
--- a/src/lib/classNameBuilders.js
+++ b/src/lib/classNameBuilders.js
@@ -21,11 +21,6 @@ import { numberToWord } from './numberToWord'
  */
 export const getKeyOnly = (val, key) => val && key
 
-/**
- * @deprecated
- */
-export const useKeyOnly = getKeyOnly
-
 /**
  * Props that require both a key and value to create a className.
  * @param {*} val A props value
@@ -37,11 +32,6 @@ export const useKeyOnly = getKeyOnly
  */
 export const getValueAndKey = (val, key) => val && val !== true && `${val} ${key}`
 
-/**
- * @deprecated
- */
-export const useValueAndKey = getValueAndKey
-
 /**
  * Props whose key will be used in className, or value and key.
  * @param {*} val A props value
@@ -57,11 +47,6 @@ export const useValueAndKey = getValueAndKey
  */
 export const getKeyOrValueAndKey = (val, key) => val && (val === true ? key : `${val} ${key}`)
 
-/**
- * @deprecated
- */
-export const useKeyOrValueAndKey = getKeyOrValueAndKey
-
 //
 // Prop to className exceptions
 //
@@ -89,11 +74,6 @@ export const getMultipleProp = (val, key) => {
     .join(' ')
 }
 
-/**
- * @deprecated
- */
-export const useMultipleProp = getMultipleProp
-
 /**
  * The "textAlign" prop follows the useValueAndKey except when the value is "justified'.
  * In this case, only the class "justified" is used, ignoring the "aligned" class.
@@ -110,11 +90,6 @@ export const useMultipleProp = getMultipleProp
 export const getTextAlignProp = (val) =>
   val === 'justified' ? 'justified' : getValueAndKey(val, 'aligned')
 
-/**
- * @deprecated
- */
-export const useTextAlignProp = getTextAlignProp
-
 /**
  * The "verticalAlign" prop follows the useValueAndKey.
  *
@@ -126,11 +101,6 @@ export const useTextAlignProp = getTextAlignProp
  */
 export const getVerticalAlignProp = (val) => getValueAndKey(val, 'aligned')
 
-/**
- * @deprecated
- */
-export const useVerticalAlignProp = getVerticalAlignProp
-
 /**
  * Create "X", "X wide" and "equal width" classNames.
  * "X" is a numberToWord value and "wide" is configurable.
@@ -162,8 +132,3 @@ export const getWidthProp = (val, widthClass = '', canEqual = false) => {
   }
   return numberToWord(val)
 }
-
-/**
- * @deprecated
- */
-export const useWidthProp = getWidthProp
diff --git a/src/lib/index.js b/src/lib/index.js
index 37c752b326..137a5c47c8 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -4,19 +4,12 @@ export ModernAutoControlledComponent from './ModernAutoControlledComponent'
 export * as childrenUtils from './childrenUtils'
 
 export {
-  useKeyOnly,
   getKeyOnly,
-  useKeyOrValueAndKey,
   getKeyOrValueAndKey,
-  useValueAndKey,
   getValueAndKey,
-  useMultipleProp,
   getMultipleProp,
-  useTextAlignProp,
   getTextAlignProp,
-  useVerticalAlignProp,
   getVerticalAlignProp,
-  useWidthProp,
   getWidthProp,
 } from './classNameBuilders'
 
diff --git a/src/views/Advertisement/Advertisement.js b/src/views/Advertisement/Advertisement.js
index c018e09a41..e0f6225005 100644
--- a/src/views/Advertisement/Advertisement.js
+++ b/src/views/Advertisement/Advertisement.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -19,8 +19,8 @@ const Advertisement = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     unit,
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(test, 'test'),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(test, 'test'),
     'ad',
     className,
   )
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index aa6c54a202..fab8800a06 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
+  getKeyOnly,
   useEventCallback,
 } from '../../lib'
 import Image from '../../elements/Image'
@@ -44,10 +44,10 @@ const Card = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     color,
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(link, 'link'),
-    useKeyOnly(raised, 'raised'),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(link, 'link'),
+    getKeyOnly(raised, 'raised'),
     'card',
     className,
   )
diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js
index 4c52f453c2..ab1b7ff691 100644
--- a/src/views/Card/CardContent.js
+++ b/src/views/Card/CardContent.js
@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useTextAlignProp,
+  getKeyOnly,
+  getTextAlignProp,
 } from '../../lib'
 import CardDescription from './CardDescription'
 import CardHeader from './CardHeader'
@@ -23,7 +23,7 @@ import CardMeta from './CardMeta'
 const CardContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, meta, textAlign } = props
 
-  const classes = cx(useKeyOnly(extra, 'extra'), useTextAlignProp(textAlign), 'content', className)
+  const classes = cx(getKeyOnly(extra, 'extra'), getTextAlignProp(textAlign), 'content', className)
   const rest = getUnhandledProps(CardContent, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/views/Card/CardDescription.js b/src/views/Card/CardDescription.js
index 3a93a180b4..5911ac9a44 100644
--- a/src/views/Card/CardDescription.js
+++ b/src/views/Card/CardDescription.js
@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useTextAlignProp,
+  getTextAlignProp,
 } from '../../lib'
 
 /**
@@ -17,7 +17,7 @@ import {
  */
 const CardDescription = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
-  const classes = cx(useTextAlignProp(textAlign), 'description', className)
+  const classes = cx(getTextAlignProp(textAlign), 'description', className)
   const rest = getUnhandledProps(CardDescription, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js
index 54e8983513..b657a73525 100644
--- a/src/views/Card/CardGroup.js
+++ b/src/views/Card/CardGroup.js
@@ -9,9 +9,9 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useTextAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getTextAlignProp,
+  getWidthProp,
 } from '../../lib'
 import Card from './Card'
 
@@ -33,11 +33,11 @@ const CardGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(doubling, 'doubling'),
-    useKeyOnly(stackable, 'stackable'),
-    useTextAlignProp(textAlign),
-    useWidthProp(itemsPerRow),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(doubling, 'doubling'),
+    getKeyOnly(stackable, 'stackable'),
+    getTextAlignProp(textAlign),
+    getWidthProp(itemsPerRow),
     'cards',
     className,
   )
diff --git a/src/views/Card/CardHeader.js b/src/views/Card/CardHeader.js
index 2cb948b7c7..f0e315355e 100644
--- a/src/views/Card/CardHeader.js
+++ b/src/views/Card/CardHeader.js
@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useTextAlignProp,
+  getTextAlignProp,
 } from '../../lib'
 
 /**
@@ -17,7 +17,7 @@ import {
  */
 const CardHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
-  const classes = cx(useTextAlignProp(textAlign), 'header', className)
+  const classes = cx(getTextAlignProp(textAlign), 'header', className)
   const rest = getUnhandledProps(CardHeader, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/views/Card/CardMeta.js b/src/views/Card/CardMeta.js
index 8e3f2b4d7b..23553f3469 100644
--- a/src/views/Card/CardMeta.js
+++ b/src/views/Card/CardMeta.js
@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useTextAlignProp,
+  getTextAlignProp,
 } from '../../lib'
 
 /**
@@ -17,7 +17,7 @@ import {
  */
 const CardMeta = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
-  const classes = cx(useTextAlignProp(textAlign), 'meta', className)
+  const classes = cx(getTextAlignProp(textAlign), 'meta', className)
   const rest = getUnhandledProps(CardMeta, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js
index fc44689df4..5622459463 100644
--- a/src/views/Comment/Comment.js
+++ b/src/views/Comment/Comment.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 import CommentAction from './CommentAction'
 import CommentActions from './CommentActions'
@@ -24,7 +24,7 @@ import CommentText from './CommentText'
 const Comment = React.forwardRef(function (props, ref) {
   const { className, children, collapsed, content } = props
 
-  const classes = cx(useKeyOnly(collapsed, 'collapsed'), 'comment', className)
+  const classes = cx(getKeyOnly(collapsed, 'collapsed'), 'comment', className)
   const rest = getUnhandledProps(Comment, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index ee67edb41b..adfd9430d0 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -16,7 +16,7 @@ import {
 const CommentAction = React.forwardRef(function (props, ref) {
   const { active, className, children, content } = props
 
-  const classes = cx(useKeyOnly(active, 'active'), className)
+  const classes = cx(getKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(CommentAction, props)
   const ElementType = getComponentType(props, { defaultAs: 'a' })
 
diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
index 0e8c4e2a7b..dc7e33f48b 100644
--- a/src/views/Comment/CommentGroup.js
+++ b/src/views/Comment/CommentGroup.js
@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -21,9 +21,9 @@ const CommentGroup = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(collapsed, 'collapsed'),
-    useKeyOnly(minimal, 'minimal'),
-    useKeyOnly(threaded, 'threaded'),
+    getKeyOnly(collapsed, 'collapsed'),
+    getKeyOnly(minimal, 'minimal'),
+    getKeyOnly(threaded, 'threaded'),
     'comments',
     className,
   )
diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js
index 6ea83d660c..aee147be34 100644
--- a/src/views/Feed/FeedExtra.js
+++ b/src/views/Feed/FeedExtra.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -19,8 +19,8 @@ const FeedExtra = React.forwardRef(function (props, ref) {
   const { children, className, content, images, text } = props
 
   const classes = cx(
-    useKeyOnly(images, 'images'),
-    useKeyOnly(content || text, 'text'),
+    getKeyOnly(images, 'images'),
+    getKeyOnly(content || text, 'text'),
     'extra',
     className,
   )
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index 75d4963727..a858c17d52 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -8,7 +8,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useVerticalAlignProp,
+  getVerticalAlignProp,
 } from '../../lib'
 import ItemHeader from './ItemHeader'
 import ItemDescription from './ItemDescription'
@@ -21,7 +21,7 @@ import ItemMeta from './ItemMeta'
 const ItemContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, meta, verticalAlign } = props
 
-  const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
+  const classes = cx(getVerticalAlignProp(verticalAlign), 'content', className)
   const rest = getUnhandledProps(ItemContent, props)
   const ElementType = getComponentType(props)
 
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index dc0a28c164..cf33a2ed91 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -8,8 +8,8 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
 } from '../../lib'
 import Item from './Item'
 
@@ -21,10 +21,10 @@ const ItemGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(divided, 'divided'),
-    useKeyOnly(link, 'link'),
-    useKeyOnly(unstackable, 'unstackable'),
-    useKeyOrValueAndKey(relaxed, 'relaxed'),
+    getKeyOnly(divided, 'divided'),
+    getKeyOnly(link, 'link'),
+    getKeyOnly(unstackable, 'unstackable'),
+    getKeyOrValueAndKey(relaxed, 'relaxed'),
     'items',
     className,
   )
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index 698904ec2e..d962f30874 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useValueAndKey,
+  getKeyOnly,
+  getValueAndKey,
 } from '../../lib'
 import StatisticGroup from './StatisticGroup'
 import StatisticLabel from './StatisticLabel'
@@ -39,9 +39,9 @@ const Statistic = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useValueAndKey(floated, 'floated'),
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(inverted, 'inverted'),
+    getValueAndKey(floated, 'floated'),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(inverted, 'inverted'),
     'statistic',
     className,
   )
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index eea559981e..b4945c19c1 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -9,8 +9,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useWidthProp,
+  getKeyOnly,
+  getWidthProp,
 } from '../../lib'
 import Statistic from './Statistic'
 
@@ -24,9 +24,9 @@ const StatisticGroup = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(inverted, 'inverted'),
-    useWidthProp(widths),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(inverted, 'inverted'),
+    getWidthProp(widths),
     'statistics',
     className,
   )
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 7654c5a503..f18bced601 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -8,7 +8,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -17,7 +17,7 @@ import {
 const StatisticValue = React.forwardRef(function (props, ref) {
   const { children, className, content, text } = props
 
-  const classes = cx(useKeyOnly(text, 'text'), 'value', className)
+  const classes = cx(getKeyOnly(text, 'text'), 'value', className)
   const rest = getUnhandledProps(StatisticValue, props)
   const ElementType = getComponentType(props)
 

From e0a42b5480eda8cb7346f7b4cf32ac1b852791d9 Mon Sep 17 00:00:00 2001
From: Dominik Dosoudil <eziotegg@gmail.com>
Date: Fri, 22 Nov 2024 10:09:59 +0100
Subject: [PATCH 30/30] chore(eslint): enable react-hooks/recommended (#4498)

* chore(eslint): enable react-hooks eslint rules

* chore(eslint): ignore eslint error as it is false positive because process.env.NODE_ENV never changes during runtime
---
 .eslintrc                                   | 2 +-
 src/modules/Accordion/AccordionAccordion.js | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index cae9985dda..da85b88782 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,7 +1,7 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier"],
+  "extends": ["airbnb", "prettier", "plugin:react-hooks/recommended"],
   "env": {
     "browser": true
   },
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index f99285ee5d..6dfc5fd86b 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -64,6 +64,9 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
   })
 
   if (process.env.NODE_ENV !== 'production') {
+    // Following eslint error is ignored because process.env.NODE_ENV does not change during runtime,
+    // so it is not actually a problem because the useEffect will be called either always or never
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       /* eslint-disable no-console */
       if (exclusive && typeof activeIndex !== 'number') {