@texturehq/edges 1.17.0 → 1.18.0

package/dist/{colors-wUwMI6WH.d.cts → colors-Kck1-4Zq.d.cts}

@@ -1553,6 +1553,11 @@ interface StaticMapProps {
      * @default true
      */
     showMarker?: boolean;
+    /**
+     * Show Mapbox attribution control
+     * @default false
+     */
+    showAttribution?: boolean;
     /**
      * Callback fired when the map finishes loading
      * Useful for knowing when Mapbox is fully initialized and tiles are loaded
@@ -1571,7 +1576,7 @@ interface StaticMapProps {
  *
  * Automatically adapts to light/dark mode using the global ColorModeProvider.
  */
-declare function StaticMap({ width, height, initialViewState, isLoading, mapType, layers, mapboxAccessToken, showMarker, onLoad, className, }: StaticMapProps): react_jsx_runtime.JSX.Element;
+declare function StaticMap({ width, height, initialViewState, isLoading, mapType, layers, mapboxAccessToken, showMarker, showAttribution, onLoad, className, }: StaticMapProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Represents a geographic point with coordinates
@@ -1737,7 +1742,7 @@ interface EntityConfig {
 }
 declare const ENTITY_CONFIG: {
     readonly site: {
-        readonly icon: "Buildings";
+        readonly icon: "MapPin";
         readonly label: {
             readonly singular: "Site";
             readonly plural: "Sites";

package/dist/{colors-wUwMI6WH.d.ts → colors-Kck1-4Zq.d.ts}

@@ -1553,6 +1553,11 @@ interface StaticMapProps {
      * @default true
      */
     showMarker?: boolean;
+    /**
+     * Show Mapbox attribution control
+     * @default false
+     */
+    showAttribution?: boolean;
     /**
      * Callback fired when the map finishes loading
      * Useful for knowing when Mapbox is fully initialized and tiles are loaded
@@ -1571,7 +1576,7 @@ interface StaticMapProps {
  *
  * Automatically adapts to light/dark mode using the global ColorModeProvider.
  */
-declare function StaticMap({ width, height, initialViewState, isLoading, mapType, layers, mapboxAccessToken, showMarker, onLoad, className, }: StaticMapProps): react_jsx_runtime.JSX.Element;
+declare function StaticMap({ width, height, initialViewState, isLoading, mapType, layers, mapboxAccessToken, showMarker, showAttribution, onLoad, className, }: StaticMapProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Represents a geographic point with coordinates
@@ -1737,7 +1742,7 @@ interface EntityConfig {
 }
 declare const ENTITY_CONFIG: {
     readonly site: {
-        readonly icon: "Buildings";
+        readonly icon: "MapPin";
         readonly label: {
             readonly singular: "Site";
             readonly plural: "Sites";

package/dist/components.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.17.0",
-  "generatedAt": "2025-11-03T16:51:16.747Z",
+  "version": "1.18.0",
+  "generatedAt": "2025-11-10T02:40:34.289Z",
   "components": [
     {
       "name": "ActionCell",
@@ -206,9 +206,7 @@
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/AutoMobileRenderer",
       "props": [],
-      "relatedComponents": [
-        "Skeleton"
-      ],
+      "relatedComponents": [],
       "storybookPath": "Data/AutoMobileRenderer"
     },
     {
@@ -231,6 +229,16 @@
       "relatedComponents": [],
       "storybookPath": "Display/Badge"
     },
+    {
+      "name": "BadgeCell",
+      "category": "Uncategorized",
+      "description": "",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/BadgeCell",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/BadgeCell"
+    },
     {
       "name": "BarSeries",
       "category": "Charts",
@@ -549,9 +557,7 @@
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/CardMobileRenderer",
       "props": [],
-      "relatedComponents": [
-        "Skeleton"
-      ],
+      "relatedComponents": [],
       "storybookPath": "Data/CardMobileRenderer"
     },
     {
@@ -783,6 +789,16 @@
       "relatedComponents": [],
       "storybookPath": "Layout/CollapseItem"
     },
+    {
+      "name": "ColorField",
+      "category": "Form Controls",
+      "description": "ColorField Component  A form control that allows users to input hex color codes manually or select colors using a visual color picker. Integrates seamlessly with the Edges design system.  @example ```tsx <ColorField label=\"Brand Color\" value={color} onChange={setColor} description=\"Choose your primary brand color\" /> ```",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/ColorField",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Form Controls/ColorField"
+    },
     {
       "name": "Confirm",
       "category": "Overlays",
@@ -809,6 +825,46 @@
       "relatedComponents": [],
       "storybookPath": "Display/ConnectionStatusBadge"
     },
+    {
+      "name": "ContactCard",
+      "category": "Display",
+      "description": "ContactCard  A card component for displaying contact information with avatar. Includes name, optional email, and optional phone number.  @example ```tsx <ContactCard firstName=\"John\" lastName=\"Doe\" email=\"john.doe@example.com\" phone=\"+1 (555) 123-4567\" showEmail showPhone href=\"/contacts/123\" /> ```",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/ContactCard",
+      "props": [],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Display/ContactCard"
+    },
+    {
+      "name": "ContactMetaCell",
+      "category": "Uncategorized",
+      "description": "",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/ContactMetaCell",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/ContactMetaCell"
+    },
+    {
+      "name": "ContactMetaDisplay",
+      "category": "Display",
+      "description": "ContactMetaDisplay  Reusable component for displaying contact information with avatar. Supports stacked and inline layouts with size variants and optional linking.  **Stacked layout**: Avatar, name above, optional email below **Inline layout**: Avatar + name only (horizontal)  Use this component directly in cards, lists, or other layouts. For DataTable cells, use ContactMetaCell which wraps this component.  @example ```tsx // Stacked layout (default) <ContactMetaDisplay firstName=\"John\" lastName=\"Doe\" email=\"john@example.com\" layout=\"stacked\" size=\"md\" showEmail href=\"/contacts/123\" />  // Inline layout <ContactMetaDisplay firstName=\"John\" lastName=\"Doe\" layout=\"inline\" size=\"sm\" href=\"/contacts/123\" /> ```",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/ContactMetaDisplay",
+      "props": [],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Display/ContactMetaDisplay"
+    },
     {
       "name": "CopyToClipboard",
       "category": "Display",
@@ -836,9 +892,7 @@
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/DataTable",
       "props": [],
-      "relatedComponents": [
-        "Skeleton"
-      ],
+      "relatedComponents": [],
       "storybookPath": "Data/DataTable"
     },
     {
@@ -899,13 +953,18 @@
     },
     {
       "name": "DeviceMetaDisplay",
-      "category": "Components",
-      "description": "DeviceMetaDisplay  Reusable component for displaying device metadata (manufacturer, model, logo). Displays manufacturer logo (with device type icon fallback) and device information. Manufacturer name can be linked to device detail page.  Use this component directly in cards, lists, or other layouts. For DataTable cells, use DeviceMetaCell which wraps this component.  @example ```tsx <DeviceMetaDisplay manufacturer=\"Tesla\" model=\"Powerwall 2\" deviceType=\"battery\" logoUrl=\"https://...\" href=\"/devices/123\" showDeviceTypeIcon /> ```",
+      "category": "Display",
+      "description": "DeviceMetaDisplay  Reusable component for displaying device metadata (manufacturer, model, logo). Supports stacked and inline layouts with size variants and optional linking.  **Stacked layout**: Large icon/logo, manufacturer name above, device type icon + model below **Inline layout**: Small icon + \"Manufacturer Model\" as single text string  Use this component directly in cards, lists, or other layouts. For DataTable cells, use DeviceMetaCell which wraps this component.  @example ```tsx // Stacked layout (default) <DeviceMetaDisplay manufacturer=\"Tesla\" model=\"Powerwall 2\" deviceType=\"battery\" layout=\"stacked\" size=\"md\" logoUrl=\"https://...\" href=\"/devices/123\" />  // Inline layout <DeviceMetaDisplay manufacturer=\"Tesla\" model=\"Powerwall 2\" deviceType=\"battery\" layout=\"inline\" size=\"sm\" href=\"/devices/123\" /> ```",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/DeviceMetaDisplay",
       "props": [],
-      "relatedComponents": [],
-      "storybookPath": "Components/DeviceMetaDisplay"
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Display/DeviceMetaDisplay"
     },
     {
       "name": "DeviceStateBadge",
@@ -1166,6 +1225,16 @@
       ],
       "storybookPath": "Typography/Heading"
     },
+    {
+      "name": "HorizontalBarCell",
+      "category": "Uncategorized",
+      "description": "",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/HorizontalBarCell",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/HorizontalBarCell"
+    },
     {
       "name": "Icon",
       "category": "Design Tokens",
@@ -1368,6 +1437,16 @@
       "relatedComponents": [],
       "storybookPath": "Feedback/Meter"
     },
+    {
+      "name": "MiniBarCell",
+      "category": "Uncategorized",
+      "description": "",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/MiniBarCell",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/MiniBarCell"
+    },
     {
       "name": "ModalBackdrop",
       "category": "Uncategorized",
@@ -1534,6 +1613,16 @@
       ],
       "storybookPath": "Layout/PageLayout"
     },
+    {
+      "name": "PercentBarCell",
+      "category": "Uncategorized",
+      "description": "",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/PercentBarCell",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/PercentBarCell"
+    },
     {
       "name": "PlaceSearch",
       "category": "Form Controls",
@@ -1787,7 +1876,7 @@
     {
       "name": "Select",
       "category": "Form Controls",
-      "description": "Whether to use transparent background",
+      "description": "Controls the menu width behavior relative to the trigger. - \"match\": Menu width matches trigger width exactly (default) - \"auto\": Menu width grows to fit content, with minimum of trigger width @default \"match\"",
       "importRoot": "@texturehq/edges",
       "importPath": "@texturehq/edges/components/Select",
       "props": [],
@@ -1825,6 +1914,61 @@
       ],
       "storybookPath": "Navigation/SideNav"
     },
+    {
+      "name": "SiteCard",
+      "category": "Display",
+      "description": "SiteCard  A card component for displaying site/location information. Can include an optional static map showing the site's location.  @example ```tsx <SiteCard streetAddress=\"123 Main St\" city=\"San Francisco\" state=\"CA\" postalCode=\"94102\" longitude={-122.4194} latitude={37.7749} showMap href=\"/sites/123\" /> ```",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/SiteCard",
+      "props": [],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Display/SiteCard"
+    },
+    {
+      "name": "SiteContactCard",
+      "category": "Display",
+      "description": "SiteContactCard  A combined card component for displaying both site and contact information. Shows site details with optional map, followed by associated contact information.  @example ```tsx <SiteContactCard site={{ streetAddress: \"123 Main St\", city: \"San Francisco\", state: \"CA\", postalCode: \"94102\", longitude: -122.4194, latitude: 37.7749, href: \"/sites/123\" }} contact={{ firstName: \"John\", lastName: \"Doe\", email: \"john.doe@example.com\", phone: \"+1 (555) 123-4567\", href: \"/contacts/123\" }} showMap /> ```",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/SiteContactCard",
+      "props": [],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Display/SiteContactCard"
+    },
+    {
+      "name": "SiteMetaCell",
+      "category": "Uncategorized",
+      "description": "",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/SiteMetaCell",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/SiteMetaCell"
+    },
+    {
+      "name": "SiteMetaDisplay",
+      "category": "Display",
+      "description": "SiteMetaDisplay  Reusable component for displaying site location information. Supports stacked and inline layouts with size variants and optional linking.  **Stacked layout**: MapPin icon, street address above, city/state/zip below **Inline layout**: MapPin icon + street address only (no city/state)  Use this component directly in cards, lists, or other layouts. For DataTable cells, use SiteMetaCell which wraps this component.  @example ```tsx // Stacked layout (default) <SiteMetaDisplay streetAddress=\"123 Main St\" city=\"San Francisco\" state=\"CA\" postalCode=\"94102\" layout=\"stacked\" size=\"md\" href=\"/sites/123\" />  // Inline layout <SiteMetaDisplay streetAddress=\"123 Main St\" layout=\"inline\" size=\"sm\" href=\"/sites/123\" /> ```",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/SiteMetaDisplay",
+      "props": [],
+      "relatedComponents": [
+        "StoryLayout",
+        "StoryTable",
+        "StoryTableCell",
+        "StoryTableRow"
+      ],
+      "storybookPath": "Display/SiteMetaDisplay"
+    },
     {
       "name": "Skeleton",
       "category": "Feedback",
@@ -1929,6 +2073,16 @@
       "relatedComponents": [],
       "storybookPath": "Data/SortControl"
     },
+    {
+      "name": "SparklineCell",
+      "category": "Uncategorized",
+      "description": "",
+      "importRoot": "@texturehq/edges",
+      "importPath": "@texturehq/edges/components/SparklineCell",
+      "props": [],
+      "relatedComponents": [],
+      "storybookPath": "Uncategorized/SparklineCell"
+    },
     {
       "name": "SplitPane",
       "category": "Layout",
@@ -2513,6 +2667,7 @@
       "Checkbox",
       "CheckboxGroup",
       "CodeEditor",
+      "ColorField",
       "DateField",
       "DateRangePicker",
       "FileUpload",
@@ -2572,14 +2727,20 @@
       "Badge",
       "Chip",
       "ConnectionStatusBadge",
+      "ContactCard",
+      "ContactMetaDisplay",
       "CopyToClipboard",
       "DeviceHealthBadge",
+      "DeviceMetaDisplay",
       "DeviceStateBadge",
       "DeviceStateWithMetric",
       "DeviceTypeIcon",
       "EnrollmentStatusBadge",
       "FirmwareVersionBadge",
       "GridStateBadge",
+      "SiteCard",
+      "SiteContactCard",
+      "SiteMetaDisplay",
       "Timeline",
       "TimelineItem"
     ],
@@ -2606,21 +2767,28 @@
     ],
     "Uncategorized": [
       "ActionCell",
+      "BadgeCell",
       "BooleanCell",
       "ChartAxis",
       "ChartBottomBar",
       "ChartTooltip",
+      "ContactMetaCell",
       "DateCell",
       "DeviceMetaCell",
       "DeviceStateCell",
       "DialogHeader",
       "FormattedCell",
+      "HorizontalBarCell",
       "InteractiveMap",
       "MAP_TYPES",
+      "MiniBarCell",
       "ModalBackdrop",
       "NumberCell",
+      "PercentBarCell",
       "SKELETON_SIZES",
       "SelectCell",
+      "SiteMetaCell",
+      "SparklineCell",
       "StaticMap",
       "TextCell"
     ],
@@ -2638,9 +2806,6 @@
       "SortControl",
       "StatList"
     ],
-    "Components": [
-      "DeviceMetaDisplay"
-    ],
     "Feedback": [
       "EmptyState",
       "ErrorBoundary",

package/dist/generated/tailwind-tokens-dark.css

@@ -187,9 +187,10 @@
   --color-background-surface: #1a2038;
   --color-background-muted: #374151;
   --color-background-hover: #242d47;
-  --color-background-selected: #6b7280;
+  --color-background-selected: #4b5563;
   --color-background-modal: rgba(255, 255, 255, 0.12);
   --color-background-input: rgba(255, 255, 255, 0.05);
+  --theme-background-canvas: linear-gradient(to bottom right, rgb(24 28 48), rgb(30 26 45), rgb(35 26 38));
   --color-text-body: #ededef;
   --color-text-heading: #ffffff;
   --color-text-muted: #9ca3af;
@@ -252,12 +253,12 @@
   --color-state-unknown: #1f2937;
   --color-state-unknown-border: #6b7280;
   --color-state-unknown-text: #ffffff;
-  --color-state-importing: #1f2937;
-  --color-state-importing-border: #6b7280;
-  --color-state-importing-text: #ffffff;
-  --color-state-exporting: #1f2937;
-  --color-state-exporting-border: #6b7280;
-  --color-state-exporting-text: #ffffff;
+  --color-state-importing: #1e3a8a;
+  --color-state-importing-border: #60a5fa;
+  --color-state-importing-text: #dbeafe;
+  --color-state-exporting: #78350f;
+  --color-state-exporting-border: #fbbf24;
+  --color-state-exporting-text: #fef3c7;
   --color-map-streets-border: #ffffff;
   --color-map-satellite-border: #ffffff;
   --color-map-neutral-border: #ffffff;
@@ -318,6 +319,16 @@
   --color-viz-sequential-forest-8: #1a3c0d;
   --color-viz-sequential-forest-9: #0f2808;
   --color-viz-sequential-forest-10: #071403;
+  --color-viz-sequential-red-yellow-green-1: #991b1b;
+  --color-viz-sequential-red-yellow-green-2: #dc2626;
+  --color-viz-sequential-red-yellow-green-3: #f87171;
+  --color-viz-sequential-red-yellow-green-4: #fb923c;
+  --color-viz-sequential-red-yellow-green-5: #fbbf24;
+  --color-viz-sequential-red-yellow-green-6: #fde047;
+  --color-viz-sequential-red-yellow-green-7: #bef264;
+  --color-viz-sequential-red-yellow-green-8: #6ee7b7;
+  --color-viz-sequential-red-yellow-green-9: #34d399;
+  --color-viz-sequential-red-yellow-green-10: #10b981;
   --color-viz-diverging-orange-yellow-seafoam-1: #883a1f;
   --color-viz-diverging-orange-yellow-seafoam-2: #c25f27;
   --color-viz-diverging-orange-yellow-seafoam-3: #e8843d;

package/dist/generated/tailwind-tokens-light.css

@@ -187,9 +187,10 @@
   --color-background-surface: #ffffff;
   --color-background-muted: #f3f4f6;
   --color-background-hover: #f3f4f6;
-  --color-background-selected: #d1d5db;
+  --color-background-selected: #e5e7eb;
   --color-background-modal: rgba(0, 0, 0, 0.15);
   --color-background-input: #ffffff;
+  --theme-background-canvas: linear-gradient(to bottom right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248));
   --color-text-body: #333333;
   --color-text-heading: #111827;
   --color-text-muted: #4b5563;
@@ -252,12 +253,12 @@
   --color-state-unknown: #f8f8f8;
   --color-state-unknown-border: #d1d5db;
   --color-state-unknown-text: #000000;
-  --color-state-importing: #f8f8f8;
-  --color-state-importing-border: #d1d5db;
-  --color-state-importing-text: #000000;
-  --color-state-exporting: #f8f8f8;
-  --color-state-exporting-border: #d1d5db;
-  --color-state-exporting-text: #000000;
+  --color-state-importing: #dbeafe;
+  --color-state-importing-border: #3b82f6;
+  --color-state-importing-text: #1e40af;
+  --color-state-exporting: #fef3c7;
+  --color-state-exporting-border: #f59e0b;
+  --color-state-exporting-text: #92400e;
   --color-viz-default: #0082ff;
   --color-viz-categorical-1: #a3eae4;
   --color-viz-categorical-2: #91a0ff;
@@ -315,6 +316,16 @@
   --color-viz-sequential-forest-8: #1b2e13;
   --color-viz-sequential-forest-9: #13200d;
   --color-viz-sequential-forest-10: #0b1305;
+  --color-viz-sequential-red-yellow-green-1: #7f1d1d;
+  --color-viz-sequential-red-yellow-green-2: #b91c1c;
+  --color-viz-sequential-red-yellow-green-3: #ef4444;
+  --color-viz-sequential-red-yellow-green-4: #fb923c;
+  --color-viz-sequential-red-yellow-green-5: #f59e0b;
+  --color-viz-sequential-red-yellow-green-6: #fbbf24;
+  --color-viz-sequential-red-yellow-green-7: #a3e635;
+  --color-viz-sequential-red-yellow-green-8: #4ade80;
+  --color-viz-sequential-red-yellow-green-9: #10b981;
+  --color-viz-sequential-red-yellow-green-10: #059669;
   --color-viz-diverging-orange-yellow-seafoam-1: #6b2c1a;
   --color-viz-diverging-orange-yellow-seafoam-2: #a24b1e;
   --color-viz-diverging-orange-yellow-seafoam-3: #cb7131;

package/dist/generated/viz-runtime.css

@@ -69,6 +69,16 @@
   --color-viz-sequential-forest-8: #1b2e13;
   --color-viz-sequential-forest-9: #13200d;
   --color-viz-sequential-forest-10: #0b1305;
+  --color-viz-sequential-red-yellow-green-1: #7f1d1d;
+  --color-viz-sequential-red-yellow-green-2: #b91c1c;
+  --color-viz-sequential-red-yellow-green-3: #ef4444;
+  --color-viz-sequential-red-yellow-green-4: #fb923c;
+  --color-viz-sequential-red-yellow-green-5: #f59e0b;
+  --color-viz-sequential-red-yellow-green-6: #fbbf24;
+  --color-viz-sequential-red-yellow-green-7: #a3e635;
+  --color-viz-sequential-red-yellow-green-8: #4ade80;
+  --color-viz-sequential-red-yellow-green-9: #10b981;
+  --color-viz-sequential-red-yellow-green-10: #059669;
   --color-viz-diverging-orange-yellow-seafoam-1: #6b2c1a;
   --color-viz-diverging-orange-yellow-seafoam-2: #a24b1e;
   --color-viz-diverging-orange-yellow-seafoam-3: #cb7131;
@@ -160,6 +170,16 @@
   --color-viz-sequential-forest-8: #1a3c0d;
   --color-viz-sequential-forest-9: #0f2808;
   --color-viz-sequential-forest-10: #071403;
+  --color-viz-sequential-red-yellow-green-1: #991b1b;
+  --color-viz-sequential-red-yellow-green-2: #dc2626;
+  --color-viz-sequential-red-yellow-green-3: #f87171;
+  --color-viz-sequential-red-yellow-green-4: #fb923c;
+  --color-viz-sequential-red-yellow-green-5: #fbbf24;
+  --color-viz-sequential-red-yellow-green-6: #fde047;
+  --color-viz-sequential-red-yellow-green-7: #bef264;
+  --color-viz-sequential-red-yellow-green-8: #6ee7b7;
+  --color-viz-sequential-red-yellow-green-9: #34d399;
+  --color-viz-sequential-red-yellow-green-10: #10b981;
   --color-viz-diverging-orange-yellow-seafoam-1: #883a1f;
   --color-viz-diverging-orange-yellow-seafoam-2: #c25f27;
   --color-viz-diverging-orange-yellow-seafoam-3: #e8843d;