diff --git a/example/lib/src/storybook/common/options.dart b/example/lib/src/storybook/common/options.dart
index dcd9ea01..65bb2b08 100644
--- a/example/lib/src/storybook/common/options.dart
+++ b/example/lib/src/storybook/common/options.dart
@@ -1,45 +1,93 @@
 import 'package:flutter/material.dart';
+
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
-List<Option<Color>> colorOptions(BuildContext context) => [
-      Option(label: "piccolo", value: context.moonColors!.piccolo),
-      Option(label: "hit", value: context.moonColors!.hit),
-      Option(label: "beerus", value: context.moonColors!.beerus),
-      Option(label: "goku", value: context.moonColors!.goku),
-      Option(label: "gohan", value: context.moonColors!.gohan),
-      Option(label: "bulma", value: context.moonColors!.bulma),
-      Option(label: "trunks", value: context.moonColors!.trunks),
-      Option(label: "goten", value: context.moonColors!.goten),
-      Option(label: "popo", value: context.moonColors!.popo),
-      Option(label: "jiren", value: context.moonColors!.jiren),
-      Option(label: "heles", value: context.moonColors!.heles),
-      Option(label: "zeno", value: context.moonColors!.zeno),
-      Option(label: "krillin100", value: context.moonColors!.krillin100),
-      Option(label: "krillin60", value: context.moonColors!.krillin60),
-      Option(label: "krillin10", value: context.moonColors!.krillin10),
-      Option(label: "chichi100", value: context.moonColors!.chiChi100),
-      Option(label: "chichi60", value: context.moonColors!.chiChi60),
-      Option(label: "chichi10", value: context.moonColors!.chiChi10),
-      Option(label: "roshi100", value: context.moonColors!.roshi60),
-      Option(label: "roshi60", value: context.moonColors!.roshi100),
-      Option(label: "roshi10", value: context.moonColors!.roshi10),
-      Option(label: "frieza100", value: context.moonColors!.frieza100),
-      Option(label: "frieza60", value: context.moonColors!.frieza60),
-      Option(label: "frieza10", value: context.moonColors!.frieza10),
-      Option(label: "dodoria100", value: context.moonColors!.dodoria100),
-      Option(label: "dodoria60", value: context.moonColors!.dodoria60),
-      Option(label: "dodoria10", value: context.moonColors!.dodoria10),
-      Option(label: "cell100", value: context.moonColors!.cell100),
-      Option(label: "cell60", value: context.moonColors!.cell60),
-      Option(label: "cell10", value: context.moonColors!.cell10),
-      Option(label: "raditz100", value: context.moonColors!.raditz100),
-      Option(label: "raditz60", value: context.moonColors!.raditz60),
-      Option(label: "raditz10", value: context.moonColors!.raditz10),
-      Option(label: "nappa100", value: context.moonColors!.nappa100),
-      Option(label: "nappa60", value: context.moonColors!.nappa60),
-      Option(label: "nappa10", value: context.moonColors!.nappa10),
-      Option(label: "whis100", value: context.moonColors!.whis100),
-      Option(label: "whis60", value: context.moonColors!.whis60),
-      Option(label: "whis10", value: context.moonColors!.whis10),
+// The below combination of "indexes" and colors in the colorTable() LUT is to bypass the stale closure that the knob
+// would otherwise have.
+
+/// Index of the color options.
+List<Option<int>> colorOptions = const [
+  Option(label: "piccolo", value: 0),
+  Option(label: "hit", value: 1),
+  Option(label: "beerus", value: 2),
+  Option(label: "goku", value: 3),
+  Option(label: "gohan", value: 4),
+  Option(label: "bulma", value: 5),
+  Option(label: "trunks", value: 6),
+  Option(label: "goten", value: 7),
+  Option(label: "popo", value: 8),
+  Option(label: "jiren", value: 9),
+  Option(label: "heles", value: 10),
+  Option(label: "zeno", value: 11),
+  Option(label: "krillin100", value: 12),
+  Option(label: "krillin60", value: 13),
+  Option(label: "krillin10", value: 14),
+  Option(label: "chichi100", value: 15),
+  Option(label: "chichi60", value: 16),
+  Option(label: "chichi10", value: 17),
+  Option(label: "roshi100", value: 18),
+  Option(label: "roshi60", value: 19),
+  Option(label: "roshi10", value: 20),
+  Option(label: "frieza100", value: 21),
+  Option(label: "frieza60", value: 22),
+  Option(label: "frieza10", value: 23),
+  Option(label: "dodoria100", value: 24),
+  Option(label: "dodoria60", value: 25),
+  Option(label: "dodoria10", value: 26),
+  Option(label: "cell100", value: 27),
+  Option(label: "cell60", value: 28),
+  Option(label: "cell10", value: 29),
+  Option(label: "raditz100", value: 30),
+  Option(label: "raditz60", value: 31),
+  Option(label: "raditz10", value: 32),
+  Option(label: "nappa100", value: 33),
+  Option(label: "nappa60", value: 34),
+  Option(label: "nappa10", value: 35),
+  Option(label: "whis100", value: 36),
+  Option(label: "whis60", value: 37),
+  Option(label: "whis10", value: 38),
+];
+
+/// LUT for the color options.
+List<Color> colorTable(BuildContext context) => [
+      context.moonColors!.piccolo,
+      context.moonColors!.hit,
+      context.moonColors!.beerus,
+      context.moonColors!.goku,
+      context.moonColors!.gohan,
+      context.moonColors!.bulma,
+      context.moonColors!.trunks,
+      context.moonColors!.goten,
+      context.moonColors!.popo,
+      context.moonColors!.jiren,
+      context.moonColors!.heles,
+      context.moonColors!.zeno,
+      context.moonColors!.krillin100,
+      context.moonColors!.krillin60,
+      context.moonColors!.krillin10,
+      context.moonColors!.chiChi100,
+      context.moonColors!.chiChi60,
+      context.moonColors!.chiChi10,
+      context.moonColors!.roshi60,
+      context.moonColors!.roshi100,
+      context.moonColors!.roshi10,
+      context.moonColors!.frieza100,
+      context.moonColors!.frieza60,
+      context.moonColors!.frieza10,
+      context.moonColors!.dodoria100,
+      context.moonColors!.dodoria60,
+      context.moonColors!.dodoria10,
+      context.moonColors!.cell100,
+      context.moonColors!.cell60,
+      context.moonColors!.cell10,
+      context.moonColors!.raditz100,
+      context.moonColors!.raditz60,
+      context.moonColors!.raditz10,
+      context.moonColors!.nappa100,
+      context.moonColors!.nappa60,
+      context.moonColors!.nappa10,
+      context.moonColors!.whis100,
+      context.moonColors!.whis60,
+      context.moonColors!.whis10,
     ];
diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart
index 8b7e8165..67aa9cde 100644
--- a/example/lib/src/storybook/stories/button.dart
+++ b/example/lib/src/storybook/stories/button.dart
@@ -17,10 +17,12 @@ class ButtonStory extends Story {
             final colorsKnob = context.knobs.options(
               label: "backgroundColor",
               description: "MoonColors variants for base MoonButton.",
-              initial: context.moonColors!.bulma,
-              options: colorOptions(context),
+              initial: 5, // bulma
+              options: colorOptions,
             );
 
+            final color = colorTable(context)[colorsKnob];
+
             final showBorderKnob = context.knobs.boolean(
               label: "showBorder",
               description: "Show border for base MoonButton.",
@@ -105,7 +107,7 @@ class ButtonStory extends Story {
                         showBorder: showBorderKnob,
                         buttonSize: buttonSizesKnob,
                         isFullWidth: setFullWidthKnob,
-                        backgroundColor: colorsKnob,
+                        backgroundColor: color,
                         showPulseEffect: showPulseEffectKnob,
                         showPulseEffectJiggle: showPulseEffectJiggleKnob,
                         leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
diff --git a/example/pubspec.lock b/example/pubspec.lock
index 0c76607b..a207f224 100644
--- a/example/pubspec.lock
+++ b/example/pubspec.lock
@@ -190,7 +190,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.1"
+    version: "0.1.2"
   nested:
     dependency: transitive
     description: