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,
   )