From 3129890c9c5f9045f9c0ef7e3360fcacd2538c93 Mon Sep 17 00:00:00 2001
From: Devin Fee <devin@devinfee.com>
Date: Thu, 13 Jun 2019 13:48:13 -0700
Subject: [PATCH] added (literal) indicator to documented props that are
 literals

---
 src/base/__docs__/generic.docs.mdx            | 14 ++---
 .../breadcrumb/__docs__/breadcrumb.docs.mdx   | 22 ++++----
 src/components/card/__docs__/card.docs.mdx    |  8 +--
 .../dropdown/__docs__/dropdown.docs.mdx       | 28 +++++-----
 src/components/level/__docs__/level.docs.mdx  | 16 +++---
 src/components/media/__docs__/media.docs.mdx  | 10 ++--
 .../message/__docs__/message.docs.mdx         | 12 ++---
 .../navbar/__docs__/navbar.docs.mdx           |  8 +--
 .../pagination/__docs__/pagination.docs.mdx   |  6 +--
 src/components/tab/__docs__/tab.docs.mdx      | 24 ++++-----
 src/elements/button/__docs__/button.docs.mdx  | 10 ++--
 .../container/__docs__/container.docs.mdx     | 10 ++--
 .../content/__docs__/content.docs.mdx         | 14 ++---
 src/elements/form/__docs__/file.docs.mdx      | 24 ++++-----
 src/elements/form/__docs__/form.docs.mdx      | 12 ++---
 src/elements/form/__docs__/input.docs.mdx     | 26 ++++-----
 src/elements/form/__docs__/select.docs.mdx    | 20 +++----
 src/elements/form/__docs__/textarea.docs.mdx  | 18 +++----
 src/elements/icon/__docs__/icon.docs.mdx      |  6 +--
 src/elements/image/__docs__/image.docs.mdx    |  2 +-
 .../__docs__/notification.docs.mdx            |  8 +--
 src/elements/other/__docs__/other.docs.mdx    |  8 +--
 .../progress/__docs__/progress.docs.mdx       |  4 +-
 src/elements/tag/__docs__/tag.docs.mdx        |  6 +--
 src/elements/title/__docs__/title.docs.mdx    | 12 ++---
 src/extensions/__docs__/badge.docs.mdx        |  4 +-
 .../divider/__docs__/divider.docs.mdx         |  2 +-
 .../page-loader/__docs__/page-loader.docs.mdx |  4 +-
 src/grid/columns/__docs__/columns.docs.mdx    | 54 +++++++++----------
 src/grid/tiles/__docs__/tile.docs.mdx         | 16 +++---
 src/layout/hero/__docs__/hero.docs.mdx        | 14 ++---
 src/layout/section/__docs__/section.docs.mdx  |  8 +--
 32 files changed, 215 insertions(+), 215 deletions(-)

diff --git a/src/base/__docs__/generic.docs.mdx b/src/base/__docs__/generic.docs.mdx
index 8007a1b1..c985e698 100644
--- a/src/base/__docs__/generic.docs.mdx
+++ b/src/base/__docs__/generic.docs.mdx
@@ -85,7 +85,7 @@ Here is an example of rendering as a `<Notification>` component, and passing thr
     },
     pull: {
       description: "moves an element to the left or right",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.floatPulledAlignments),
     },
   }}
@@ -119,7 +119,7 @@ Here is an example of rendering as a `<Notification>` component, and passing thr
   props={{
     backgroundColor: {
       description: "sets the background color",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable([...DEFAULTS.colors, ...DEFAULTS.shades]),
     },
     italic: {
@@ -128,27 +128,27 @@ Here is an example of rendering as a `<Notification>` component, and passing thr
     },
     textAlign: {
       description: "sets the alignment of the text",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.textAlignments),
     },
     textColor: {
       description: "sets the text color",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable([...DEFAULTS.colors, ...DEFAULTS.shades]),
     },
     textSize: {
       description: "sets the text size",
-      typeName: "string",
+      typeName: "number (literal)",
       typeTip: mapEnumerable(DEFAULTS.textSizes),
     },
     textTransform: {
       description: "alters the text capitalization",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.textSizes),
     },
     textWeight: {
       description: "sets the text weight",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.textWeights),
     },
   }}
diff --git a/src/components/breadcrumb/__docs__/breadcrumb.docs.mdx b/src/components/breadcrumb/__docs__/breadcrumb.docs.mdx
index 852f360e..7292226f 100644
--- a/src/components/breadcrumb/__docs__/breadcrumb.docs.mdx
+++ b/src/components/breadcrumb/__docs__/breadcrumb.docs.mdx
@@ -8,7 +8,7 @@ import {
   faBook,
   faHome,
   faPuzzlePiece,
-  faThumbsUp
+  faThumbsUp,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Playground } from "docz";
@@ -16,7 +16,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   OptionBlock,
-  mapEnumerable
+  mapEnumerable,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Block, Title, Icon } from "src/elements";
@@ -154,19 +154,19 @@ Use the `size` prop on `<Breadcrumb>` to specify the size of the breadcrumbs.
   props={{
     align: {
       description: "set the breadcrumb group's alignment",
-      typeName: "string",
-      typeTip: mapEnumerable(BREADCRUMB_DEFAULTS.alignments)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(BREADCRUMB_DEFAULTS.alignments),
     },
     separator: {
       description: "set the breadcrumb group's separator",
-      typeName: "string",
-      typeTip: mapEnumerable(BREADCRUMB_DEFAULTS.separators)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(BREADCRUMB_DEFAULTS.separators),
     },
     size: {
       description: "set the breadcrumb group's size",
-      typeName: "string",
-      typeTip: mapEnumerable(BREADCRUMB_DEFAULTS.sizes)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(BREADCRUMB_DEFAULTS.sizes),
+    },
   }}
 />
 
@@ -176,7 +176,7 @@ Use the `size` prop on `<Breadcrumb>` to specify the size of the breadcrumbs.
   props={{
     active: {
       description: "marks the breadcrumb as active",
-      typeName: "boolean"
-    }
+      typeName: "boolean",
+    },
   }}
 />
diff --git a/src/components/card/__docs__/card.docs.mdx b/src/components/card/__docs__/card.docs.mdx
index f5c09ef4..0f00a697 100644
--- a/src/components/card/__docs__/card.docs.mdx
+++ b/src/components/card/__docs__/card.docs.mdx
@@ -10,7 +10,7 @@ import { Playground } from "docz";
 
 import {
   ForwardRefAsExoticComponentDoc,
-  mapEnumerable
+  mapEnumerable,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Media } from "src/components";
@@ -198,9 +198,9 @@ An all-around flexible and composable component.
   props={{
     align: {
       description: "set the alignment of the title",
-      typeName: "string",
-      typeTip: mapEnumerable(CARD_HEADER_TITLE_DEFAULTS.alignments)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(CARD_HEADER_TITLE_DEFAULTS.alignments),
+    },
   }}
 />
 
diff --git a/src/components/dropdown/__docs__/dropdown.docs.mdx b/src/components/dropdown/__docs__/dropdown.docs.mdx
index 036b3828..c0e1ae54 100644
--- a/src/components/dropdown/__docs__/dropdown.docs.mdx
+++ b/src/components/dropdown/__docs__/dropdown.docs.mdx
@@ -10,7 +10,7 @@ import { Playground } from "docz";
 
 import {
   ForwardRefAsExoticComponentDoc,
-  mapEnumerable
+  mapEnumerable,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Level } from "src/components";
@@ -276,26 +276,26 @@ Use the `up` prop on `<Dropdown>` for the menu to appear **above** the `<Dropdow
     active: {
       description:
         "set the dropdown as active (useful with the `managed` prop)",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     align: {
       description: "set the dropdown menu's alignment",
-      typeName: "string",
-      typeTip: mapEnumerable(DROPDOWN_DEFAULTS.alignments)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DROPDOWN_DEFAULTS.alignments),
     },
     hoverable: {
       description: "open the dropdown on mouse-over",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     managed: {
       description:
         "enable the usage of the `active` prop to open and close the dropdown menu",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     up: {
       description: "open the menu above the dropdown",
-      typeName: "boolean"
-    }
+      typeName: "boolean",
+    },
   }}
 />
 
@@ -315,12 +315,12 @@ Use the `up` prop on `<Dropdown>` for the menu to appear **above** the `<Dropdow
   props={{
     active: {
       description: "set the item as active",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     onClick: {
       description: "callback when the component is clicked",
-      typeName: "(event: React.MouseEvent) => void"
-    }
+      typeName: "(event: React.MouseEvent) => void",
+    },
   }}
 />
 
@@ -335,11 +335,11 @@ Use the `up` prop on `<Dropdown>` for the menu to appear **above** the `<Dropdow
   props={{
     active: {
       description: "set the item as active",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     onClick: {
       description: "callback when the component is clicked",
-      typeName: "(event: React.MouseEvent) => void"
-    }
+      typeName: "(event: React.MouseEvent) => void",
+    },
   }}
 />
diff --git a/src/components/level/__docs__/level.docs.mdx b/src/components/level/__docs__/level.docs.mdx
index 9e32a029..6f389f9a 100644
--- a/src/components/level/__docs__/level.docs.mdx
+++ b/src/components/level/__docs__/level.docs.mdx
@@ -8,7 +8,7 @@ import { Playground } from "docz";
 
 import {
   ForwardRefAsExoticComponentDoc,
-  mapEnumerable
+  mapEnumerable,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Generic } from "src/base";
@@ -19,7 +19,7 @@ import {
   Field,
   Heading,
   Input,
-  Title
+  Title,
 } from "src/elements";
 import { Level } from "../level";
 import { LEVEL_ITEM_DEFAULTS } from "../level-item";
@@ -223,9 +223,9 @@ For example, for a responsive size greater than **mobile** (up to 768px), these
     breakpoint: {
       description:
         'the responsive size at which the level is vertical (without overriding Bulma SASS, only "mobile" is supported)',
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.breakpoints)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.breakpoints),
+    },
   }}
 />
 
@@ -236,8 +236,8 @@ For example, for a responsive size greater than **mobile** (up to 768px), these
   props={{
     align: {
       description: "the side of the level is placed",
-      typeName: "string",
-      typeTip: mapEnumerable(LEVEL_ITEM_DEFAULTS.alignments)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(LEVEL_ITEM_DEFAULTS.alignments),
+    },
   }}
 />
diff --git a/src/components/media/__docs__/media.docs.mdx b/src/components/media/__docs__/media.docs.mdx
index 4479fe7a..2fd36bbf 100644
--- a/src/components/media/__docs__/media.docs.mdx
+++ b/src/components/media/__docs__/media.docs.mdx
@@ -10,7 +10,7 @@ import { Playground } from "docz";
 
 import {
   ForwardRefAsExoticComponentDoc,
-  mapEnumerable
+  mapEnumerable,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Level } from "src/components";
@@ -24,7 +24,7 @@ import {
   Icon,
   Image,
   Label,
-  Textarea
+  Textarea,
 } from "src/elements";
 import { Media } from "../media";
 import { MEDIA_ITEM_DEFAULTS } from "../media-item";
@@ -256,8 +256,8 @@ You can nest `<Media>` objects up to 3 levels deep (without extending Bulma's SA
   props={{
     align: {
       description: "change the position of the item inside the media container",
-      typeName: "string",
-      typeTip: mapEnumerable(MEDIA_ITEM_DEFAULTS.alignments)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(MEDIA_ITEM_DEFAULTS.alignments),
+    },
   }}
 />
diff --git a/src/components/message/__docs__/message.docs.mdx b/src/components/message/__docs__/message.docs.mdx
index 05593abb..2ad693ff 100644
--- a/src/components/message/__docs__/message.docs.mdx
+++ b/src/components/message/__docs__/message.docs.mdx
@@ -9,7 +9,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Delete } from "src/elements";
@@ -134,14 +134,14 @@ Use the `size` prop on `<Message>` to set the size.
   props={{
     color: {
       description: "set the message's color",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.colors)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.colors),
     },
     size: {
       description: "set the message's size",
-      typeName: "string",
-      typeTip: mapEnumerable(MESSAGE_DEFAULTS.sizes)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(MESSAGE_DEFAULTS.sizes),
+    },
   }}
 />
 
diff --git a/src/components/navbar/__docs__/navbar.docs.mdx b/src/components/navbar/__docs__/navbar.docs.mdx
index 14d6ede7..f8d23e42 100644
--- a/src/components/navbar/__docs__/navbar.docs.mdx
+++ b/src/components/navbar/__docs__/navbar.docs.mdx
@@ -848,7 +848,7 @@ Use the `color` prop of the `<Navbar>` to change the color.
     },
     color: {
       description: "set the navbar's color",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
     document: {
@@ -858,7 +858,7 @@ Use the `color` prop of the `<Navbar>` to change the color.
     },
     fixed: {
       description: "fix the position to the top or bottom",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(NAVBAR_DEFAULTS.fixedAlignments),
     },
     managed: {
@@ -902,7 +902,7 @@ Use the `color` prop of the `<Navbar>` to change the color.
   props={{
     align: {
       description: "align the menu to the left or right",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(NAVBAR_DROPDOWN_DEFAULTS.alignments),
     },
     boxed: {
@@ -990,7 +990,7 @@ Use the `color` prop of the `<Navbar>` to change the color.
       description:
         "set the content in the left or right side of the dropdown menu",
       required: true,
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(NAVBAR_SEGMENT_DEFAULTS.alignments),
     },
   }}
diff --git a/src/components/pagination/__docs__/pagination.docs.mdx b/src/components/pagination/__docs__/pagination.docs.mdx
index e074aa01..35086292 100644
--- a/src/components/pagination/__docs__/pagination.docs.mdx
+++ b/src/components/pagination/__docs__/pagination.docs.mdx
@@ -174,7 +174,7 @@ Use the `size` prop on `<Pagination>` to change the size.
   props={{
     align: {
       description: "change the pagination's alignment of pagination items",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(PAGINATION_DEFAULTS.alignments),
     },
     rounded: {
@@ -183,7 +183,7 @@ Use the `size` prop on `<Pagination>` to change the size.
     },
     size: {
       description: "change the pagination's size",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(PAGINATION_DEFAULTS.sizes),
     },
   }}
@@ -226,7 +226,7 @@ Use the `size` prop on `<Pagination>` to change the size.
       description:
         "set the step as next or previous (positioning changes with pagination's align prop",
       required: true,
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(PAGINATION_STEP_DEFAULTS.alignments),
     },
   }}
diff --git a/src/components/tab/__docs__/tab.docs.mdx b/src/components/tab/__docs__/tab.docs.mdx
index 8f0638ec..a551fc15 100644
--- a/src/components/tab/__docs__/tab.docs.mdx
+++ b/src/components/tab/__docs__/tab.docs.mdx
@@ -11,7 +11,7 @@ import {
   faFileAlt,
   faFilm,
   faImage,
-  faMusic
+  faMusic,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Playground } from "docz";
@@ -19,7 +19,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Block, Icon, Title } from "src/elements";
@@ -323,8 +323,8 @@ And here are **fullwidth toggle** tabs:
   props={{
     active: {
       description: "set the tab as currently active",
-      typeName: "boolean"
-    }
+      typeName: "boolean",
+    },
   }}
 />
 
@@ -335,23 +335,23 @@ And here are **fullwidth toggle** tabs:
   props={{
     align: {
       description: "set the tab group's alignment",
-      typeName: "string",
-      typeTip: mapEnumerable(TAB_GROUP_DEFAULTS.alignments)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(TAB_GROUP_DEFAULTS.alignments),
     },
     fullsize: {
       description:
         "expand the tab group to consume all available horizontal space",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     kind: {
       description: "set the tab group's styling",
-      typeName: "string",
-      typeTip: mapEnumerable(TAB_GROUP_DEFAULTS.kinds)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(TAB_GROUP_DEFAULTS.kinds),
     },
     size: {
       description: "set the tab group's size",
-      typeName: "string",
-      typeTip: mapEnumerable(TAB_GROUP_DEFAULTS.sizes)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(TAB_GROUP_DEFAULTS.sizes),
+    },
   }}
 />
diff --git a/src/elements/button/__docs__/button.docs.mdx b/src/elements/button/__docs__/button.docs.mdx
index fc203168..58f324ac 100644
--- a/src/elements/button/__docs__/button.docs.mdx
+++ b/src/elements/button/__docs__/button.docs.mdx
@@ -520,7 +520,7 @@ You should use the `selected` prop of the button to ensure it's _above_ it's sib
   props={{
     color: {
       description: "the color of the button",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
     fullwidth: {
@@ -545,12 +545,12 @@ You should use the `selected` prop of the button to ensure it's _above_ it's sib
     },
     size: {
       description: "the size of the button",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(BUTTON_DEFAULTS.sizes),
     },
     state: {
       description: "the state of the button",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(BUTTON_DEFAULTS.states),
     },
     static: {
@@ -571,7 +571,7 @@ You should use the `selected` prop of the button to ensure it's _above_ it's sib
   props={{
     align: {
       description: "the alignment of the button group",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(BUTTON_GROUP_DEFAULTS.alignments),
     },
     hasAddons: {
@@ -580,7 +580,7 @@ You should use the `selected` prop of the button to ensure it's _above_ it's sib
     },
     size: {
       description: "set the size of children buttons",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(BUTTON_GROUP_DEFAULTS.sizes),
     },
   }}
diff --git a/src/elements/container/__docs__/container.docs.mdx b/src/elements/container/__docs__/container.docs.mdx
index ee18de1e..572a0cee 100644
--- a/src/elements/container/__docs__/container.docs.mdx
+++ b/src/elements/container/__docs__/container.docs.mdx
@@ -10,7 +10,7 @@ import {
   Frame,
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Notification } from "src/elements";
@@ -70,13 +70,13 @@ Use the `fluid` prop for the container to fit horizontally with padding.
     breakpoint: {
       description:
         "the responsive size at which this container is no longer fullwidth",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.breakpoints)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.breakpoints),
     },
     fluid: {
       description:
         "whether the container expands to fit horizontally with padding",
-      typeName: "boolean"
-    }
+      typeName: "boolean",
+    },
   }}
 />
diff --git a/src/elements/content/__docs__/content.docs.mdx b/src/elements/content/__docs__/content.docs.mdx
index 6e3865c4..647bc5c8 100644
--- a/src/elements/content/__docs__/content.docs.mdx
+++ b/src/elements/content/__docs__/content.docs.mdx
@@ -10,7 +10,7 @@ import {
   Frame,
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { Title } from "src/elements";
 import { Content, CONTENT_DEFAULTS } from "../content";
@@ -109,9 +109,9 @@ Use the `type` prop on `<Content.OrderedList>` to control the bullet styling of
   props={{
     size: {
       description: "changes the font-size",
-      typeName: "string",
-      typeTip: mapEnumerable(CONTENT_DEFAULTS.sizes)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(CONTENT_DEFAULTS.sizes),
+    },
   }}
 />
 
@@ -122,9 +122,9 @@ Use the `type` prop on `<Content.OrderedList>` to control the bullet styling of
   props={{
     type: {
       description: "changes the item marker of the list",
-      typeName: "string",
-      typeTip: mapEnumerable(CONTENT_ORDERED_LIST_DEFAULTS.types)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(CONTENT_ORDERED_LIST_DEFAULTS.types),
+    },
   }}
 />
 
diff --git a/src/elements/form/__docs__/file.docs.mdx b/src/elements/form/__docs__/file.docs.mdx
index d399487b..2be930ab 100644
--- a/src/elements/form/__docs__/file.docs.mdx
+++ b/src/elements/form/__docs__/file.docs.mdx
@@ -11,7 +11,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Content, Notification } from "src/elements";
@@ -181,7 +181,7 @@ Use the `color` prop of `<File>` to change the color.
       { boxed: false, hasName: false, color: "primary" },
       { boxed: false, hasName: true, color: "info" },
       { boxed: true, hasName: false, color: "warning" },
-      { boxed: true, hasName: true, color: "danger" }
+      { boxed: true, hasName: true, color: "danger" },
     ];
     return permutations.map(({ boxed, color, hasName }, i) => (
       <OptionBlock props={{ boxed, color, hasName }} index={i} key={i}>
@@ -396,31 +396,31 @@ This implementation takes the same props as `<File>`, but allows for actual sele
   props={{
     align: {
       description: "set the file input's alignment",
-      typeName: "string",
-      typeTip: mapEnumerable(FILE_DEFAULTS.alignments)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(FILE_DEFAULTS.alignments),
     },
     boxed: {
       description: "use a boxed layout for the file input",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     color: {
       description: "set the file input's color",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.colors)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.colors),
     },
     fullwidth: {
       description: "expand the input to occupy all available horizontal space",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     hasName: {
       description: "whether to show the file's name",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     size: {
       description: "set the file input's size",
-      typeName: "string",
-      typeTip: mapEnumerable(FILE_DEFAULTS.sizes)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(FILE_DEFAULTS.sizes),
+    },
   }}
 />
 
diff --git a/src/elements/form/__docs__/form.docs.mdx b/src/elements/form/__docs__/form.docs.mdx
index 189213b2..24cfaeed 100644
--- a/src/elements/form/__docs__/form.docs.mdx
+++ b/src/elements/form/__docs__/form.docs.mdx
@@ -845,7 +845,7 @@ Use the `disabled` prop on `<Fieldset>` to set all child fields as disabled.
     },
     size: {
       description: "change the control's size",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(CONTROL_DEFAULTS.sizes),
     },
   }}
@@ -858,7 +858,7 @@ Use the `disabled` prop on `<Fieldset>` to set all child fields as disabled.
   props={{
     align: {
       description: "the alignment of the field",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(FIELD_DEFAULTS.alignments),
     },
     expanded: {
@@ -871,7 +871,7 @@ Use the `disabled` prop on `<Fieldset>` to set all child fields as disabled.
     },
     kind: {
       description: "support addons or groups",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(FIELD_DEFAULTS.kinds),
     },
     multiline: {
@@ -898,7 +898,7 @@ Use the `disabled` prop on `<Fieldset>` to set all child fields as disabled.
   props={{
     size: {
       description: "preserve vertical alignment with the <Field.Body>",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(FIELD_LABEL_DEFAULTS.sizes),
     },
   }}
@@ -923,7 +923,7 @@ Use the `disabled` prop on `<Fieldset>` to set all child fields as disabled.
   props={{
     color: {
       description: "the help's color",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
   }}
@@ -940,7 +940,7 @@ Use the `disabled` prop on `<Fieldset>` to set all child fields as disabled.
     },
     size: {
       description: "the label's size",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(LABEL_DEFAULTS.sizes),
     },
   }}
diff --git a/src/elements/form/__docs__/input.docs.mdx b/src/elements/form/__docs__/input.docs.mdx
index 51bc9149..ddff8220 100644
--- a/src/elements/form/__docs__/input.docs.mdx
+++ b/src/elements/form/__docs__/input.docs.mdx
@@ -11,7 +11,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Icon } from "src/elements";
@@ -268,36 +268,36 @@ If the control contains an icon, it will remain **centered** regardless of the s
   props={{
     color: {
       description: "change the input's color",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.colors)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.colors),
     },
     readOnly: {
       description: "make the input read-only",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     rounded: {
       description: "round the edges of the input",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     size: {
       description: "change the input's size",
-      typeName: "string",
-      typeTip: mapEnumerable(INPUT_DEFAULTS.sizes)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(INPUT_DEFAULTS.sizes),
     },
     state: {
       description: "change the input's state",
-      typeName: "string",
-      typeTip: mapEnumerable(INPUT_DEFAULTS.states)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(INPUT_DEFAULTS.states),
     },
     static: {
       description:
         "remove the background, border, shadow and horizontal padding",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     type: {
       description: "set the input's type",
-      typeName: "string",
-      typeTip: mapEnumerable(INPUT_DEFAULTS.types)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(INPUT_DEFAULTS.types),
+    },
   }}
 />
diff --git a/src/elements/form/__docs__/select.docs.mdx b/src/elements/form/__docs__/select.docs.mdx
index 333748b4..e465149d 100644
--- a/src/elements/form/__docs__/select.docs.mdx
+++ b/src/elements/form/__docs__/select.docs.mdx
@@ -11,7 +11,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Icon } from "src/elements";
@@ -232,27 +232,27 @@ The size of the `<Select>` will define the size of the `<Icon>`.
   props={{
     color: {
       description: "change the container's color",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.colors)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.colors),
     },
     fullwidth: {
       description: "expand to occupy all horizontal space",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     rounded: {
       description: "round the edges",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     size: {
       description: "change the container's size",
-      typeName: "string",
-      typeTip: mapEnumerable(SELECT_CONTAINER_DEFAULTS.sizes)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(SELECT_CONTAINER_DEFAULTS.sizes),
     },
     state: {
       description: "change the container's state",
-      typeName: "string",
-      typeTip: mapEnumerable(SELECT_CONTAINER_DEFAULTS.states)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(SELECT_CONTAINER_DEFAULTS.states),
+    },
   }}
 />
 
diff --git a/src/elements/form/__docs__/textarea.docs.mdx b/src/elements/form/__docs__/textarea.docs.mdx
index 3b48ff53..4e236f27 100644
--- a/src/elements/form/__docs__/textarea.docs.mdx
+++ b/src/elements/form/__docs__/textarea.docs.mdx
@@ -9,7 +9,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Control } from "../control";
@@ -164,22 +164,22 @@ Use the `fixedSize` prop of a `<Textarea>` to remove the user's ability to resiz
   props={{
     color: {
       description: "change the textarea's color",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.colors)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.colors),
     },
     fixedSize: {
       description: "remove the drag handle from the textarea",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     size: {
       description: "change the textarea's size",
-      typeName: "string",
-      typeTip: mapEnumerable(TEXTAREA_DEFAULTS.sizes)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(TEXTAREA_DEFAULTS.sizes),
     },
     state: {
       description: "change the textarea's state",
-      typeName: "string",
-      typeTip: mapEnumerable(TEXTAREA_DEFAULTS.states)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(TEXTAREA_DEFAULTS.states),
+    },
   }}
 />
diff --git a/src/elements/icon/__docs__/icon.docs.mdx b/src/elements/icon/__docs__/icon.docs.mdx
index 816f8056..c201a66b 100644
--- a/src/elements/icon/__docs__/icon.docs.mdx
+++ b/src/elements/icon/__docs__/icon.docs.mdx
@@ -202,17 +202,17 @@ As before, the `backgroundColor` is set to provide additional indication of the
   props={{
     align: {
       description: "set the alignment of the icon (for use in a form control)",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(ICON_DEFAULTS.alignments),
     },
     color: {
       description: "set the icon's color",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
     size: {
       description: "set the icon's size",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(ICON_DEFAULTS.sizes),
     },
   }}
diff --git a/src/elements/image/__docs__/image.docs.mdx b/src/elements/image/__docs__/image.docs.mdx
index c92427eb..1ca6822a 100644
--- a/src/elements/image/__docs__/image.docs.mdx
+++ b/src/elements/image/__docs__/image.docs.mdx
@@ -171,7 +171,7 @@ Therefore, `<Image.Container>` and `<Image>` can be used to size any type of und
   props={{
     size: {
       description: "sets the dimmension of the contained image",
-      typeName: "string | number",
+      typeName: "string | number (literal)",
       typeTip: mapEnumerable([
         ...IMAGE_CONTAINER_DEFAULTS.dimmensions,
         ...IMAGE_CONTAINER_DEFAULTS.ratios,
diff --git a/src/elements/notification/__docs__/notification.docs.mdx b/src/elements/notification/__docs__/notification.docs.mdx
index 434c5751..c656bbe5 100644
--- a/src/elements/notification/__docs__/notification.docs.mdx
+++ b/src/elements/notification/__docs__/notification.docs.mdx
@@ -9,7 +9,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Delete } from "src/elements";
@@ -60,8 +60,8 @@ Use the `color` prop to specfiy the color of the `<Notification>`.
   props={{
     color: {
       description: "the color of the notification",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.colors)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.colors),
+    },
   }}
 />
diff --git a/src/elements/other/__docs__/other.docs.mdx b/src/elements/other/__docs__/other.docs.mdx
index 064f563c..d3ca7700 100644
--- a/src/elements/other/__docs__/other.docs.mdx
+++ b/src/elements/other/__docs__/other.docs.mdx
@@ -9,7 +9,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { Table } from "src/elements";
 import { Block } from "../block";
@@ -100,9 +100,9 @@ Useful when a user is waiting for content to load.
   props={{
     size: {
       description: "set the delete's size",
-      typeName: "string",
-      typeTip: mapEnumerable(DELETE_DEFAULTS.sizes)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DELETE_DEFAULTS.sizes),
+    },
   }}
 />
 
diff --git a/src/elements/progress/__docs__/progress.docs.mdx b/src/elements/progress/__docs__/progress.docs.mdx
index 35b10faa..9496098c 100644
--- a/src/elements/progress/__docs__/progress.docs.mdx
+++ b/src/elements/progress/__docs__/progress.docs.mdx
@@ -89,7 +89,7 @@ This is useful for showing that some progress is going on, but the actual durati
   props={{
     color: {
       description: "set the progress bar's color",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
     max: {
@@ -99,7 +99,7 @@ This is useful for showing that some progress is going on, but the actual durati
     },
     size: {
       description: "set the progress bar's size",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(PROGRESS_DEFAULTS.sizes),
     },
     value: {
diff --git a/src/elements/tag/__docs__/tag.docs.mdx b/src/elements/tag/__docs__/tag.docs.mdx
index 2e3d8f32..d53025b6 100644
--- a/src/elements/tag/__docs__/tag.docs.mdx
+++ b/src/elements/tag/__docs__/tag.docs.mdx
@@ -249,7 +249,7 @@ This can be useful for a long list of **blog tags**.
   props={{
     color: {
       description: "set the tag's color",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
     delete: {
@@ -262,7 +262,7 @@ This can be useful for a long list of **blog tags**.
     },
     size: {
       description: "set the tag's size",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(TAG_DEFAULTS.sizes),
     },
   }}
@@ -279,7 +279,7 @@ This can be useful for a long list of **blog tags**.
     },
     size: {
       description: "set the size of children tags",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(TAG_GROUP_DEFAULTS.sizes),
     },
   }}
diff --git a/src/elements/title/__docs__/title.docs.mdx b/src/elements/title/__docs__/title.docs.mdx
index 81c4c26a..84646d19 100644
--- a/src/elements/title/__docs__/title.docs.mdx
+++ b/src/elements/title/__docs__/title.docs.mdx
@@ -9,7 +9,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Block } from "src/elements";
@@ -107,16 +107,16 @@ Use the `spaced` prop on `<Title>` to maintain spacing between titles and subtit
   props={{
     size: {
       description: "set the title's size",
-      typeName: "number",
-      typeTip: mapEnumerable(TITLE_DEFAULTS.sizes)
+      typeName: "number (literal)",
+      typeTip: mapEnumerable(TITLE_DEFAULTS.sizes),
     },
     spaced: {
       description: "add space below the title",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     subtitle: {
       description: "make it a subtitle",
-      typeName: "boolean"
-    }
+      typeName: "boolean",
+    },
   }}
 />
diff --git a/src/extensions/__docs__/badge.docs.mdx b/src/extensions/__docs__/badge.docs.mdx
index 575fdcdb..6e225b32 100644
--- a/src/extensions/__docs__/badge.docs.mdx
+++ b/src/extensions/__docs__/badge.docs.mdx
@@ -146,7 +146,7 @@ Use the `badgeRounded` prop of `<Badge>` to round a badge.
     },
     badgeColor: {
       description: "the color of the badge",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
     badgeOutlined: {
@@ -155,7 +155,7 @@ Use the `badgeRounded` prop of `<Badge>` to round a badge.
     },
     badgeSize: {
       description: "the size of the badge",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(BADGE_DEFAULTS.sizes),
     },
   }}
diff --git a/src/extensions/divider/__docs__/divider.docs.mdx b/src/extensions/divider/__docs__/divider.docs.mdx
index f7838958..b7ed20f9 100644
--- a/src/extensions/divider/__docs__/divider.docs.mdx
+++ b/src/extensions/divider/__docs__/divider.docs.mdx
@@ -55,7 +55,7 @@ Use the `vertical` prop of `<Divider>` to make it vertical.
     },
     color: {
       description: "the color of the divider",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
     vertical: {
diff --git a/src/extensions/page-loader/__docs__/page-loader.docs.mdx b/src/extensions/page-loader/__docs__/page-loader.docs.mdx
index 39cf0d2d..f4d87841 100644
--- a/src/extensions/page-loader/__docs__/page-loader.docs.mdx
+++ b/src/extensions/page-loader/__docs__/page-loader.docs.mdx
@@ -107,12 +107,12 @@ Use the `direction` prop on `<PageLoader>` to specify the loading direction.
     },
     color: {
       description: "the color of the page-loader",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(DEFAULTS.colors),
     },
     direction: {
       description: "the directinon from which the page-loader appears",
-      typeName: "string",
+      typeName: "string (literal)",
       typeTip: mapEnumerable(PAGE_LOADER_DEFAULTS.directions),
     },
   }}
diff --git a/src/grid/columns/__docs__/columns.docs.mdx b/src/grid/columns/__docs__/columns.docs.mdx
index ba741cec..dda52458 100644
--- a/src/grid/columns/__docs__/columns.docs.mdx
+++ b/src/grid/columns/__docs__/columns.docs.mdx
@@ -9,7 +9,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   mapEnumerable,
-  OptionBlock
+  OptionBlock,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Generic } from "src/base";
@@ -540,38 +540,38 @@ Resize the playground below to see it in action.
   props={{
     desktop: {
       description: "options when the screen size is between 1024px and 1215px",
-      typeName: "ColumnBreakpointOptions"
+      typeName: "ColumnBreakpointOptions",
     },
     fullhd: {
       description: "options when the screen size is above 1408px",
-      typeName: "ColumnBreakpointOptions"
+      typeName: "ColumnBreakpointOptions",
     },
     mobile: {
       description: "options when the screen size is up to 768px wide",
-      typeName: "ColumnBreakpointOptions"
+      typeName: "ColumnBreakpointOptions",
     },
     narrow: {
       description: "only take up the needed space",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     offset: {
       description: "creates horizontal space before column",
-      typeName: "string",
-      typeTip: mapEnumerable(COLUMN_DEFAULTS.sizes)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(COLUMN_DEFAULTS.sizes),
     },
     size: {
       description: "determines the relative size of the column",
-      typeName: "string | number",
-      typeTip: mapEnumerable(COLUMN_DEFAULTS.sizes)
+      typeName: "string | number (literal)",
+      typeTip: mapEnumerable(COLUMN_DEFAULTS.sizes),
     },
     tablet: {
       description: "options when the screen size is between 769px and 1023px",
-      typeName: "ColumnBreakpointOptions"
+      typeName: "ColumnBreakpointOptions",
     },
     widescreen: {
       description: "options when the screen size is between 1216px and 1407px",
-      typeName: "ColumnBreakpointOptions"
-    }
+      typeName: "ColumnBreakpointOptions",
+    },
   }}
 />
 
@@ -621,54 +621,54 @@ Resize the playground below to see it in action.
   props={{
     breakpoint: {
       description: "the screen size at which the columns become stacked",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.breakpoints)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.breakpoints),
     },
     centered: {
       description: "the columns will be horizontally centered",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     desktop: {
       description: "options when the screen size is between 1024px and 1215px",
-      typeName: "ColumnGroupBreakpointOptions"
+      typeName: "ColumnGroupBreakpointOptions",
     },
     fullhd: {
       description: "options when the screen size is above 1408px",
-      typeName: "ColumnGroupBreakpointOptions"
+      typeName: "ColumnGroupBreakpointOptions",
     },
     gapless: {
       description: "remove spacing between columns",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     gapSize: {
       description: "the gap-size between columns",
-      typeName: "number",
-      typeTip: mapEnumerable(COLUMN_GROUP_DEFAULTS.gapSizes)
+      typeName: "number (literal)",
+      typeTip: mapEnumerable(COLUMN_GROUP_DEFAULTS.gapSizes),
     },
     mobile: {
       description: "options when the screen size is up to 768px wide",
-      typeName: "ColumnGroupBreakpointOptions"
+      typeName: "ColumnGroupBreakpointOptions",
     },
     multiline: {
       description: "columns may flow onto more than one line",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     tablet: {
       description: "options when the screen size is between 769px and 1023px",
-      typeName: "ColumnGroupBreakpointOptions"
+      typeName: "ColumnGroupBreakpointOptions",
     },
     widescreen: {
       description: "sizing when the screen size is between 1216px and 1407px",
-      typeName: "ColumnGroupBreakpointOptions"
+      typeName: "ColumnGroupBreakpointOptions",
     },
     touch: {
       description: "sizing when the screen is mobile or tablet",
-      typeName: "ColumnGroupBreakpointOptions"
+      typeName: "ColumnGroupBreakpointOptions",
     },
     vcentered: {
       description: "the columns will be vertically centered",
-      typeName: "boolean"
-    }
+      typeName: "boolean",
+    },
   }}
 />
 
diff --git a/src/grid/tiles/__docs__/tile.docs.mdx b/src/grid/tiles/__docs__/tile.docs.mdx
index f2919b7b..d3c9dac8 100644
--- a/src/grid/tiles/__docs__/tile.docs.mdx
+++ b/src/grid/tiles/__docs__/tile.docs.mdx
@@ -8,7 +8,7 @@ import { Playground } from "docz";
 
 import {
   ForwardRefAsExoticComponentDoc,
-  mapEnumerable
+  mapEnumerable,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import {
@@ -17,7 +17,7 @@ import {
   Highlight,
   Image,
   Notification,
-  Title
+  Title,
 } from "src/elements";
 import { Message } from "src/components";
 import { Tile, TILE_DEFAULTS } from "../tile";
@@ -615,17 +615,17 @@ For example, you can render a `<Tile>` as a `<Notification>` with: `<Tile as={No
   props={{
     kind: {
       description: "the depth of the tile in the tree",
-      typeName: "string",
-      typeTip: mapEnumerable(TILE_DEFAULTS.kinds)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(TILE_DEFAULTS.kinds),
     },
     size: {
       description: "the size of the tile",
-      typeName: "number",
-      typeTip: mapEnumerable(TILE_DEFAULTS.sizes)
+      typeName: "number (literal)",
+      typeTip: mapEnumerable(TILE_DEFAULTS.sizes),
     },
     vertical: {
       description: "child tiles should be positioned vertically",
-      typeName: "boolean"
-    }
+      typeName: "boolean",
+    },
   }}
 />
diff --git a/src/layout/hero/__docs__/hero.docs.mdx b/src/layout/hero/__docs__/hero.docs.mdx
index a8593f10..20cac931 100644
--- a/src/layout/hero/__docs__/hero.docs.mdx
+++ b/src/layout/hero/__docs__/hero.docs.mdx
@@ -12,7 +12,7 @@ import {
   Frame,
   ForwardRefAsExoticComponentDoc,
   OptionBlock,
-  mapEnumerable
+  mapEnumerable,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Navbar, Tab } from "src/components";
@@ -263,18 +263,18 @@ You can make a `<Hero>` that covers the whole height of the viewport by splittin
   props={{
     color: {
       description: "set the hero's color",
-      typeName: "string",
-      typeTip: mapEnumerable(DEFAULTS.colors)
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.colors),
     },
     gradient: {
       description: "apply a standard gradient for the color scheme",
-      typeName: "boolean"
+      typeName: "boolean",
     },
     size: {
       description: "set the hero's size",
-      typeName: "string",
-      typeTip: mapEnumerable(HERO_DEFAULTS.sizes)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(HERO_DEFAULTS.sizes),
+    },
   }}
 />
 
diff --git a/src/layout/section/__docs__/section.docs.mdx b/src/layout/section/__docs__/section.docs.mdx
index bdc01463..21e22bbf 100644
--- a/src/layout/section/__docs__/section.docs.mdx
+++ b/src/layout/section/__docs__/section.docs.mdx
@@ -9,7 +9,7 @@ import { Playground } from "docz";
 import {
   ForwardRefAsExoticComponentDoc,
   OptionBlock,
-  mapEnumerable
+  mapEnumerable,
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Block, Container, Content, Title } from "src/elements";
@@ -63,8 +63,8 @@ Use the `size` prop to resize the `<Section>`.
   props={{
     size: {
       description: "change the vertical spacing",
-      typeName: "string",
-      typeTip: mapEnumerable(SECTION_DEFAULTS.sizes)
-    }
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(SECTION_DEFAULTS.sizes),
+    },
   }}
 />