From 710b562f25b450ab3778b26b27e01f77ab5956a0 Mon Sep 17 00:00:00 2001
From: John Sloat <jsloat1@gmail.com>
Date: Thu, 7 Mar 2024 12:35:55 -0800
Subject: [PATCH] Add vspace & update color util

---
 src/UITable/elements/VSpace.ts | 14 ++++++++++++++
 src/UITable/elements/index.ts  |  1 +
 src/UITable/index.ts           |  1 +
 src/colors.ts                  | 11 ++++++++---
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/UITable/elements/VSpace.ts

diff --git a/src/UITable/elements/VSpace.ts b/src/UITable/elements/VSpace.ts
new file mode 100644
index 0000000..84213b0
--- /dev/null
+++ b/src/UITable/elements/VSpace.ts
@@ -0,0 +1,14 @@
+import { Omit_ } from '../../types/utilTypes';
+import Div, { DivStyle } from './Div';
+import P from './P';
+import { Percent } from './types';
+
+/** Add vertical space to a table */
+export default (
+  height: number | Percent,
+  style?: Omit_<DivStyle, 'height'>
+) => {
+  const el = Div([P('')], { height, ...style });
+  el.setDescription('VSPACE');
+  return el;
+};
diff --git a/src/UITable/elements/index.ts b/src/UITable/elements/index.ts
index 0749862..f9963f6 100644
--- a/src/UITable/elements/index.ts
+++ b/src/UITable/elements/index.ts
@@ -6,6 +6,7 @@ export { default as H1 } from './H1';
 export { default as H2, H2Opts } from './H2';
 export { default as HR } from './HR';
 export { default as HSpace } from './HSpace';
+export { default as VSpace } from './VSpace';
 export { default as Icon, IconOrSFKey } from './Icon';
 export { default as Img } from './Img';
 export { default as P } from './P';
diff --git a/src/UITable/index.ts b/src/UITable/index.ts
index 7a65102..018def0 100644
--- a/src/UITable/index.ts
+++ b/src/UITable/index.ts
@@ -38,6 +38,7 @@ export {
   H2,
   HR,
   HSpace,
+  VSpace,
   Icon,
   Img,
   NonCascadingDiv,
diff --git a/src/colors.ts b/src/colors.ts
index f0de77c..5fbe245 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -202,11 +202,16 @@ export const getDynamicColor = (
 export const getColors = () =>
   objectFromEntries(colorKeys.map(key => [key, getColor(key)]));
 
-export const getEnhancedColor = (key: ColorKey): EnhancedColor => {
-  const val = getKeyVal(key);
+export const getEnhancedColor = (
+  keyOrColor: ColorKey | Color
+): EnhancedColor => {
+  const val = isString(keyOrColor) ? getKeyVal(keyOrColor) : keyOrColor;
   return isEnhancedColor(val)
     ? val
-    : new EnhancedColor({ label: key, staticColor: val });
+    : new EnhancedColor({
+        label: isString(keyOrColor) ? keyOrColor : UUID.string(),
+        staticColor: val,
+      });
 };
 
 export const getDomainColor = (domain: Domain) =>