@spear-ai/spectral 1.3.43 → 1.3.44

package/dist/features/LabelingTools.js

@@ -3,7 +3,10 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { Badge as a } from "../Badge.js";
 import "../Icons/AnnotationsIcon.js";
 import "../Icons/CalendarIcon.js";
-import "../Icons/CheckIcon.js";
+import "../Icons/CheckCircleIcon.js";
+import "../Icons/CheckSquareIcon.js";
+import "../Icons/ChevronDownIcon.js";
+import "../Icons/ChevronUpIcon.js";
 import "../Icons/ClockIcon.js";
 import "../Icons/CloseCircleIcon.js";
 import "../Icons/CloseIcon.js";
@@ -11,6 +14,7 @@ import "../Icons/DashboardIcon.js";
 import { DeleteIcon as m } from "../Icons/DeleteIcon.js";
 import "../Icons/DurationIcon.js";
 import { EraserIcon as n } from "../Icons/EraserIcon.js";
+import "../Icons/ErrorIcon.js";
 import "../Icons/EyeClosedIcon.js";
 import "../Icons/EyeClosedIcon2.js";
 import "../Icons/EyeOpenIcon.js";
@@ -22,6 +26,7 @@ import { LabelIcon as c } from "../Icons/LabelIcon.js";
 import { LassoIcon as g } from "../Icons/LassoIcon.js";
 import { LineToolIcon as p } from "../Icons/LineToolIcon.js";
 import "../Icons/LiveViewIcon.js";
+import "../Icons/LoaderIcon.js";
 import "../Icons/LocationIcon.js";
 import "../Icons/LogoutIcon.js";
 import { MetadataIcon as b } from "../Icons/MetadataIcon.js";
@@ -42,7 +47,7 @@ import "../Icons/ZoomYIcon.js";
 import { Toggle as d } from "../Toggle.js";
 import { ToggleGroup as s, ToggleGroupItem as l } from "../ToggleGroup.js";
 import { Tooltip as i, TooltipTrigger as o, TooltipContent as t } from "../Tooltip.js";
-const de = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4", children: [
+const pe = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4", children: [
   /* @__PURE__ */ e("div", { className: "flex", children: /* @__PURE__ */ r(s, { type: "single", variant: "outline", children: [
     /* @__PURE__ */ r(i, { children: [
       /* @__PURE__ */ e(o, { children: /* @__PURE__ */ r(l, { value: "crosshairs", children: [
@@ -152,5 +157,5 @@ const de = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4"
   ] })
 ] });
 export {
-  de as LabelingTools
+  pe as LabelingTools
 };

package/dist/features/SensorMetadata.js

@@ -3,25 +3,30 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { Drawer as r } from "../Drawer.js";
 import "../Icons/AnnotationsIcon.js";
 import "../Icons/CalendarIcon.js";
-import "../Icons/CheckIcon.js";
+import "../Icons/CheckCircleIcon.js";
+import "../Icons/CheckSquareIcon.js";
+import "../Icons/ChevronDownIcon.js";
+import "../Icons/ChevronUpIcon.js";
 import { ClockIcon as i } from "../Icons/ClockIcon.js";
 import "../Icons/CloseCircleIcon.js";
 import "../Icons/CloseIcon.js";
 import "../Icons/DashboardIcon.js";
 import "../Icons/DeleteIcon.js";
-import { DurationIcon as a } from "../Icons/DurationIcon.js";
+import { DurationIcon as m } from "../Icons/DurationIcon.js";
 import "../Icons/EraserIcon.js";
+import "../Icons/ErrorIcon.js";
 import "../Icons/EyeClosedIcon.js";
 import "../Icons/EyeClosedIcon2.js";
 import "../Icons/EyeOpenIcon.js";
 import "../Icons/GoToFirstIcon.js";
 import "../Icons/GoToLastIcon.js";
 import "../Icons/HarmonicCursorsIcon.js";
-import { InfoIcon as m } from "../Icons/InfoIcon.js";
+import { InfoIcon as a } from "../Icons/InfoIcon.js";
 import "../Icons/LabelIcon.js";
 import "../Icons/LassoIcon.js";
 import "../Icons/LineToolIcon.js";
 import "../Icons/LiveViewIcon.js";
+import "../Icons/LoaderIcon.js";
 import { LocationIcon as s } from "../Icons/LocationIcon.js";
 import "../Icons/LogoutIcon.js";
 import { MetadataIcon as c } from "../Icons/MetadataIcon.js";
@@ -39,10 +44,10 @@ import "../Icons/WarningIcon.js";
 import "../Icons/ZoomAllIcon.js";
 import "../Icons/ZoomXIcon.js";
 import "../Icons/ZoomYIcon.js";
-const V = () => /* @__PURE__ */ e(r, { description: "Recording Details", title: "Sensor Metadata", trigger: /* @__PURE__ */ e(c, {}), children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
+const $ = () => /* @__PURE__ */ e(r, { description: "Recording Details", title: "Sensor Metadata", trigger: /* @__PURE__ */ e(c, {}), children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
   /* @__PURE__ */ t("div", { className: "bg-card-bg-secondary rounded-md px-4 py-5", children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-2 !text-sm font-semibold uppercase", children: [
-      /* @__PURE__ */ e(m, { size: 16 }),
+      /* @__PURE__ */ e(a, { size: 16 }),
       "sensor type"
     ] }),
     /* @__PURE__ */ e("div", { className: "!text-text-accent-primary mt-4 flex text-center !text-xl", children: "Omnidirectional Hydrophone Array" })
@@ -84,7 +89,7 @@ const V = () => /* @__PURE__ */ e(r, { description: "Recording Details", title:
   ] }),
   /* @__PURE__ */ t("div", { className: "bg-card-bg-secondary rounded-md px-4 py-5", children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-2 !text-sm font-semibold uppercase", children: [
-      /* @__PURE__ */ e(a, { size: 16 }),
+      /* @__PURE__ */ e(m, { size: 16 }),
       "active duration"
     ] }),
     /* @__PURE__ */ t("div", { className: "sb-unstyled mt-4 flex flex-col justify-between", children: [
@@ -94,5 +99,5 @@ const V = () => /* @__PURE__ */ e(r, { description: "Recording Details", title:
   ] })
 ] }) });
 export {
-  V as SensorMetadata
+  $ as SensorMetadata
 };

package/dist/features/SettingsPopover.js

@@ -3,7 +3,10 @@ import "../styles/main.css";
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import "../Icons/AnnotationsIcon.js";
 import "../Icons/CalendarIcon.js";
-import "../Icons/CheckIcon.js";
+import "../Icons/CheckCircleIcon.js";
+import "../Icons/CheckSquareIcon.js";
+import "../Icons/ChevronDownIcon.js";
+import "../Icons/ChevronUpIcon.js";
 import "../Icons/ClockIcon.js";
 import "../Icons/CloseCircleIcon.js";
 import "../Icons/CloseIcon.js";
@@ -11,6 +14,7 @@ import "../Icons/DashboardIcon.js";
 import "../Icons/DeleteIcon.js";
 import "../Icons/DurationIcon.js";
 import "../Icons/EraserIcon.js";
+import "../Icons/ErrorIcon.js";
 import "../Icons/EyeClosedIcon.js";
 import "../Icons/EyeClosedIcon2.js";
 import "../Icons/EyeOpenIcon.js";
@@ -22,6 +26,7 @@ import "../Icons/LabelIcon.js";
 import "../Icons/LassoIcon.js";
 import "../Icons/LineToolIcon.js";
 import { LiveViewIcon as O } from "../Icons/LiveViewIcon.js";
+import "../Icons/LoaderIcon.js";
 import "../Icons/LocationIcon.js";
 import "../Icons/LogoutIcon.js";
 import "../Icons/MetadataIcon.js";
@@ -43,13 +48,13 @@ import { Popover as R, PopoverTrigger as S, PopoverContent as A } from "../Popov
 import { RadioButtonGroup as h, RadioButtonGroupItem as i } from "../RadioButtonGroup.js";
 import { RadioGroup as Z, RadioGroupItem as l } from "../RadioGroup.js";
 import { Switch as P } from "../Switch.js";
-import { Toggle as s } from "../Toggle.js";
-import { Tooltip as m, TooltipTrigger as a, TooltipContent as n } from "../Tooltip.js";
+import { Toggle as m } from "../Toggle.js";
+import { Tooltip as s, TooltipTrigger as a, TooltipContent as n } from "../Tooltip.js";
 import { useState as o } from "react";
-const Ce = () => {
+const Ae = () => {
   const [f, b] = o("green-black"), [u, p] = o(""), [v, c] = o(!1), [g, w] = o(!1), [y, N] = o("");
   return /* @__PURE__ */ r(R, { open: v, onOpenChange: c, children: [
-    /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(s, { pressed: !1, children: /* @__PURE__ */ e(V, {}) }) }),
+    /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(m, { pressed: !1, children: /* @__PURE__ */ e(V, {}) }) }),
     /* @__PURE__ */ r(A, { side: "bottom", align: "end", width: 420, children: [
       /* @__PURE__ */ r("div", { className: "mb-6 w-full", children: [
         /* @__PURE__ */ e("p", { className: "text-md text-md mb-3 font-semibold", children: "Zoom Options" }),
@@ -79,7 +84,7 @@ const Ce = () => {
           }
         ),
         /* @__PURE__ */ r(
-          s,
+          m,
           {
             pressed: !1,
             "aria-label": "Reset zoom",
@@ -111,7 +116,7 @@ const Ce = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "mt-4 flex w-full items-center justify-center gap-2", children: /* @__PURE__ */ r(s, { className: "w-full", children: [
+        /* @__PURE__ */ e("div", { className: "mt-4 flex w-full items-center justify-center gap-2", children: /* @__PURE__ */ r(m, { className: "w-full", children: [
           /* @__PURE__ */ e(z, { size: 16 }),
           "Harmonic Cursors"
         ] }) })
@@ -129,19 +134,19 @@ const Ce = () => {
             },
             variant: "unstyled",
             children: [
-              /* @__PURE__ */ e(l, { value: "green-black", "aria-label": "green & black theme", children: /* @__PURE__ */ r(m, { children: [
+              /* @__PURE__ */ e(l, { value: "green-black", "aria-label": "green & black theme", children: /* @__PURE__ */ r(s, { children: [
                 /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e("img", { src: "/themes/green-black-theme.webp", alt: "green & black theme", className: "h-8 w-8" }) }),
                 /* @__PURE__ */ e(n, { side: "bottom", sideOffset: 8, children: /* @__PURE__ */ e("p", { children: "Green & Black Theme" }) })
               ] }) }),
-              /* @__PURE__ */ e(l, { value: "grayscale", "aria-label": "grayscale theme", children: /* @__PURE__ */ r(m, { children: [
+              /* @__PURE__ */ e(l, { value: "grayscale", "aria-label": "grayscale theme", children: /* @__PURE__ */ r(s, { children: [
                 /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e("img", { src: "/themes/grayscale-theme.webp", alt: "grayscale theme", className: "h-8 w-8" }) }),
                 /* @__PURE__ */ e(n, { side: "bottom", sideOffset: 8, children: /* @__PURE__ */ e("p", { children: "Grayscale Theme" }) })
               ] }) }),
-              /* @__PURE__ */ e(l, { value: "reverse-grayscale", "aria-label": "reverse grayscale theme", children: /* @__PURE__ */ r(m, { children: [
+              /* @__PURE__ */ e(l, { value: "reverse-grayscale", "aria-label": "reverse grayscale theme", children: /* @__PURE__ */ r(s, { children: [
                 /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e("img", { src: "/themes/reverse-grayscale-theme.webp", alt: "reverse grayscale theme", className: "h-8 w-8" }) }),
                 /* @__PURE__ */ e(n, { side: "bottom", sideOffset: 8, children: /* @__PURE__ */ e("p", { children: "Reverse Grayscale Theme" }) })
               ] }) }),
-              /* @__PURE__ */ e(l, { value: "viridis", "aria-label": "viridis theme", children: /* @__PURE__ */ r(m, { children: [
+              /* @__PURE__ */ e(l, { value: "viridis", "aria-label": "viridis theme", children: /* @__PURE__ */ r(s, { children: [
                 /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e("img", { src: "/themes/viridis-theme.webp", alt: "viridis theme", className: "h-8 w-8" }) }),
                 /* @__PURE__ */ e(n, { side: "bottom", sideOffset: 8, children: /* @__PURE__ */ e("p", { children: "Viridis Theme" }) })
               ] }) })
@@ -151,7 +156,7 @@ const Ce = () => {
       ] }),
       /* @__PURE__ */ r("div", { className: "border-border-secondary mb-2 w-full border-t pt-4", children: [
         /* @__PURE__ */ e("p", { className: "text-md text-md mb-3 font-semibold", children: "View Options" }),
-        /* @__PURE__ */ r(s, { className: "mb-4 w-full", children: [
+        /* @__PURE__ */ r(m, { className: "mb-4 w-full", children: [
           /* @__PURE__ */ e(O, { size: 18 }),
           "Realtime Stream"
         ] }),
@@ -181,5 +186,5 @@ const Ce = () => {
   ] });
 };
 export {
-  Ce as SettingsPopover
+  Ae as SettingsPopover
 };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { Alert, type AlertProps } from './components/Alert/Alert';
 export { Badge } from './components/Badge/Badge';
 export { Button, type ButtonProps } from './components/Button/Button';
 export { Drawer, type DrawerProps } from './components/Drawer/Drawer';
+export { Input, type InputProps } from './components/Input/Input';
 export { Popover, PopoverContent, PopoverTrigger } from './components/Popover/Popover';
 export { RadioButtonGroup, RadioButtonGroupItem } from './components/RadioButtonGroup/RadioButtonGroup';
 export { RadioGroup, RadioGroupItem } from './components/RadioGroup/RadioGroup';
@@ -14,7 +15,7 @@ export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './component
 export { Tooltip, TooltipContent, TooltipTrigger } from './components/Tooltip/Tooltip';
 export * from './components/Icons';
 export { default as IconBase, SvgIdContext } from './components/Icons/IconBase';
-export { useOutsideClick } from './hooks/useOutsideClick';
 export { useTheme } from './hooks/useTheme';
+export * from './utils/formFieldUtils';
 export { cn } from './utils/twUtils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AACtF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAA;AACvG,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAC5F,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AAC1G,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGtF,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAG3C,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AACtF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAA;AACvG,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAC5F,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AAC1G,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGtF,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/E,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAG3C,cAAc,wBAAwB,CAAA;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/loader-circle-CvdzOiQ_.js

@@ -0,0 +1,11 @@
+import { c } from "./createLucideIcon-CI1yJrZf.js";
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const e = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], a = c("loader-circle", e);
+export {
+  a as L
+};

package/dist/styles/base-colors.css

@@ -1,39 +1,39 @@
 :root {
-  --horizon-color-black: oklch(0 0 0);                      /* #000000 */
-  --horizon-color-white: oklch(1 0 0);                      /* #ffffff */
-  --horizon-color-transparent: oklch(0 0 0 / 0%);           /* #00000000 */
-  --horizon-color-accent: oklch(92.53% 0.1976 123.38);      /* #cdfb50 */
+  --horizon-color-black: oklch(0 0 0);
+  --horizon-color-white: oklch(1 0 0);
+  --horizon-color-transparent: oklch(0 0 0 / 0%);
+  --horizon-color-accent: oklch(92.53% 0.1976 123.38);
 
-  --horizon-color-neutral-50: oklch(97.64% 0.001 286.38);   /* #f7f7f8 */
-  --horizon-color-neutral-100: oklch(92.19% 0 0);           /* #e5e5e5 */
-  --horizon-color-neutral-200: oklch(86.99% 0 0);           /* #d4d4d4 */
-  --horizon-color-neutral-300: oklch(79.03% 0 0);           /* #bababa */
-  --horizon-color-neutral-400: oklch(71.55% 0 0);           /* #a3a3a3 */
-  --horizon-color-neutral-500: oklch(55.55% 0 0);           /* #737373 */
-  --horizon-color-neutral-600: oklch(43.86% 0 0);           /* #525252 */
-  --horizon-color-neutral-700: oklch(37.15% 0 0);           /* #404040 */
-  --horizon-color-neutral-800: oklch(32.11% 0 0);           /* #333333 */
-  --horizon-color-neutral-900: oklch(26.86% 0 0);           /* #262626 */
-  --horizon-color-neutral-950: oklch(21.78% 0 0);           /* #1a1a1a */
+  --horizon-color-neutral-50: oklch(97.64% 0.001 286.38);
+  --horizon-color-neutral-100: oklch(92.19% 0 0);
+  --horizon-color-neutral-200: oklch(86.99% 0 0);
+  --horizon-color-neutral-300: oklch(79.03% 0 0);
+  --horizon-color-neutral-400: oklch(71.55% 0 0);
+  --horizon-color-neutral-500: oklch(55.55% 0 0);
+  --horizon-color-neutral-600: oklch(43.86% 0 0);
+  --horizon-color-neutral-700: oklch(37.15% 0 0);
+  --horizon-color-neutral-800: oklch(32.11% 0 0);
+  --horizon-color-neutral-900: oklch(26.86% 0 0);
+  --horizon-color-neutral-950: oklch(21.78% 0 0);
 
-  --horizon-color-primary-50: oklch(97.05% 0.0142 254.6);   /* #eff6ff */
-  --horizon-color-primary-100: oklch(93.19% 0.0316 255.59); /* #dbeafe */
-  --horizon-color-primary-200: oklch(88.41% 0.0581 252.44); /* #bedcff */
-  --horizon-color-primary-300: oklch(80.75% 0.0958 253.19); /* #94c4fd */
-  --horizon-color-primary-400: oklch(71.27% 0.1469 255.61); /* #60a4fc */
-  --horizon-color-primary-500: oklch(62.31% 0.1862 260.06); /* #3d82f5 */
-  --horizon-color-primary-600: oklch(54.34% 0.2151 263.01); /* #2562ea */
-  --horizon-color-primary-700: oklch(49.14% 0.2189 264.03); /* #1b4fda */
-  --horizon-color-primary-800: oklch(42.75% 0.1828 265.08); /* #1c41b1 */
-  --horizon-color-primary-900: oklch(37.78% 0.1366 265.11); /* #1d3a89 */
-  --horizon-color-primary-950: oklch(28.37% 0.0887 268.75); /* #182555 */
+  --horizon-color-primary-50: oklch(97.05% 0.0142 254.6);
+  --horizon-color-primary-100: oklch(93.19% 0.0316 255.59);
+  --horizon-color-primary-200: oklch(88.41% 0.0581 252.44);
+  --horizon-color-primary-300: oklch(80.75% 0.0958 253.19);
+  --horizon-color-primary-400: oklch(71.27% 0.1469 255.61);
+  --horizon-color-primary-500: oklch(62.31% 0.1862 260.06);
+  --horizon-color-primary-600: oklch(54.34% 0.2151 263.01);
+  --horizon-color-primary-700: oklch(49.14% 0.2189 264.03);
+  --horizon-color-primary-800: oklch(42.75% 0.1828 265.08);
+  --horizon-color-primary-900: oklch(37.78% 0.1366 265.11);
+  --horizon-color-primary-950: oklch(28.37% 0.0887 268.75);
 
-  --horizon-color-level-zero: oklch(24.79% 0.0058 271.18);  /* #202124 */
-  --horizon-color-level-one: oklch(27.28% 0.0097 268.32);   /* #25272c */
-  --horizon-color-level-two: oklch(30.73% 0.0106 253.99);   /* #2c3035 */
-  --horizon-color-level-three: oklch(32.71% 0.0104 253.98); /* #31353a */
-  --horizon-color-level-four: oklch(35.77% 0.0088 248.07);  /* #393d41 */
-  --horizon-color-level-five: oklch(38.75% 0.0073 242.06);  /* #40454a */
+  --horizon-color-level-zero: oklch(24.79% 0.0058 271.18);
+  --horizon-color-level-one: oklch(27.28% 0.0097 268.32);
+  --horizon-color-level-two: oklch(30.73% 0.0106 253.99);
+  --horizon-color-level-three: oklch(32.71% 0.0104 253.98);
+  --horizon-color-level-four: oklch(35.77% 0.0088 248.07);
+  --horizon-color-level-five: oklch(38.75% 0.0073 242.06);
 
   --horizon-color-success-50: oklch(96.27% 0.04 158.08);
   --horizon-color-success-100: oklch(92.53% 0.08 156.69);
@@ -59,5 +59,5 @@
 }
 
 :root[data-theme='light'] {
-  --horizon-color-level-one: oklch(98.51% 0 0);             /* #fafafa */
+  --horizon-color-level-one: oklch(98.51% 0 0);
 }