@narmi/design_system 6.18.0-beta.0 → 6.18.0

package/dist/tokens/js/manifest.js

@@ -1,5 +1,17 @@
+/**
+* DO NOT EDIT
+* Generated by style-dictionary on Wed Jul 29 2026 20:10:16 GMT+0000 (Coordinated Universal Time)
+* github.com/narmi/design_system/
+*/
+
+
 const tokens = {
   "border": {
+    "color": {
+      "primary": "#1a4338",
+      "light": "#d9d9d9",
+      "default": "#d9d9d9"
+    },
     "radius": {
       "s": "4px",
       "m": "8px",
@@ -11,18 +23,28 @@ const tokens = {
       "s": "1px",
       "m": "2px",
       "default": "1px"
-    },
-    "color": {
-      "primary": "#1A4338",
-      "light": "#d9d9d9",
-      "default": "#d9d9d9"
     }
   },
   "color": {
+    "alpha": {
+      "5": "0.05",
+      "10": "0.1",
+      "20": "0.2"
+    },
+    "background": {
+      "blueGrey": "#f4f6fa",
+      "cloudGrey": "#e9e9e9",
+      "neutralGrey": "#f9f9f9",
+      "smokeGrey": "#f3f3f3",
+      "snowGrey": "#fbfbfb",
+      "white": "#ffffff",
+      "scrimLight": "rgba(255, 255, 255, 0.85)",
+      "scrimDark": "rgba(80, 80, 80, 0.7)"
+    },
     "grey": {
       "snowGrey": "#fbfbfb",
       "neutralGrey": "#f9f9f9",
-      "blueGrey": "#F4F6FA",
+      "blueGrey": "#f4f6fa",
       "smokeGrey": "#f3f3f3",
       "cloudGrey": "#e9e9e9",
       "lightGrey": "#d9d9d9",
@@ -33,69 +55,69 @@ const tokens = {
     },
     "narmi": {
       "moss100": "#002921",
-      "moss200": "#0F3C32",
+      "moss200": "#0f3c32",
       "moss300": "#005242",
       "moss400": "#006553",
-      "moss500": "#3E8373",
-      "moss600": "#6EA193",
-      "moss700": "#9DC0B6",
-      "moss800": "#CDDED9",
+      "moss500": "#3e8373",
+      "moss600": "#6ea193",
+      "moss700": "#9dc0b6",
+      "moss800": "#cdded9",
       "moss": "#006553",
-      "pine100": "#041A14",
+      "pine100": "#041a14",
       "pine200": "#062821",
-      "pine300": "#16362C",
-      "pine400": "#1A4338",
-      "pine500": "#44655B",
+      "pine300": "#16362c",
+      "pine400": "#1a4338",
+      "pine500": "#44655b",
       "pine600": "#708981",
       "pine700": "#708981",
-      "pine800": "#CDD6D3",
-      "pine": "#1A4338",
+      "pine800": "#cdd6d3",
+      "pine": "#1a4338",
       "cove100": "#002547",
-      "cove200": "#00376A",
+      "cove200": "#00376a",
       "cove300": "#094895",
-      "cove400": "#005CB2",
-      "cove500": "#237CC3",
-      "cove600": "#66A2D6",
-      "cove700": "#A6CFF0",
-      "cove800": "#D4EDFF",
-      "cove": "#005CB2",
+      "cove400": "#005cb2",
+      "cove500": "#237cc3",
+      "cove600": "#66a2d6",
+      "cove700": "#a6cff0",
+      "cove800": "#d4edff",
+      "cove": "#005cb2",
       "azul100": "#001340",
-      "azul200": "#00205E",
-      "azul300": "#002C82",
-      "azul400": "#003EA0",
-      "azul500": "#3664B5",
-      "azul600": "#6B89C7",
-      "azul700": "#9CB1DE",
-      "azul800": "#C9D8F2",
-      "azul": "#003EA0",
-      "pistachio100": "#485E3D",
-      "pistachio200": "#6B8C5A",
-      "pistachio300": "#90BB78",
-      "pistachio400": "#B5E995",
-      "pistachio500": "#CCF0B4",
-      "pistachio600": "#DAF4C8",
-      "pistachio700": "#E9F8DE",
-      "pistachio800": "#F7FCF3",
-      "pistachio": "#B5E995",
-      "cactus100": "#324C23",
-      "cactus200": "#4B7137",
-      "cactus300": "#63964B",
-      "cactus400": "#7FBC5B",
-      "cactus500": "#99CA7A",
-      "cactus600": "#B3D79A",
-      "cactus700": "#CCE4BA",
-      "cactus800": "#E5F1DC",
-      "cactus": "#7FBC5B",
+      "azul200": "#00205e",
+      "azul300": "#002c82",
+      "azul400": "#003ea0",
+      "azul500": "#3664b5",
+      "azul600": "#6b89c7",
+      "azul700": "#9cb1de",
+      "azul800": "#c9d8f2",
+      "azul": "#003ea0",
+      "pistachio100": "#485e3d",
+      "pistachio200": "#6b8c5a",
+      "pistachio300": "#90bb78",
+      "pistachio400": "#b5e995",
+      "pistachio500": "#ccf0b4",
+      "pistachio600": "#daf4c8",
+      "pistachio700": "#e9f8de",
+      "pistachio800": "#f7fcf3",
+      "pistachio": "#b5e995",
+      "cactus100": "#324c23",
+      "cactus200": "#4b7137",
+      "cactus300": "#63964b",
+      "cactus400": "#7fbc5b",
+      "cactus500": "#99ca7a",
+      "cactus600": "#b3d79a",
+      "cactus700": "#cce4ba",
+      "cactus800": "#e5f1dc",
+      "cactus": "#7fbc5b",
       "sand100": "#423329",
-      "sand200": "#684D41",
+      "sand200": "#684d41",
       "sand300": "#947564",
-      "sand400": "#C4A08A",
-      "sand500": "#DCC1A3",
-      "sand600": "#EED6C3",
-      "sand700": "#F4E3D6",
-      "sand800": "#FCF0E9",
-      "sand": "#DCC1A3",
-      "amethyst": "#5514B8",
+      "sand400": "#c4a08a",
+      "sand500": "#dcc1a3",
+      "sand600": "#eed6c3",
+      "sand700": "#f4e3d6",
+      "sand800": "#fcf0e9",
+      "sand": "#dcc1a3",
+      "amethyst": "#5514b8",
       "black": "#333333",
       "grey": "#6c6c6c",
       "mediumGrey": "#6c6c6c",
@@ -103,38 +125,33 @@ const tokens = {
       "white": "#ffffff"
     },
     "system": {
-      "successDark": "#027A48",
-      "successLight": "#ECFDF3",
-      "warnDark": "#B54708",
-      "warnLight": "#FEF8E3",
+      "successDark": "#027a48",
+      "successLight": "#ecfdf3",
+      "warnDark": "#b54708",
+      "warnLight": "#fef8e3",
       "infoDark": "#195274",
-      "infoLight": "#E8EEF1",
+      "infoLight": "#e8eef1",
       "errorDark": "#b42318",
-      "errorLight": "#FEF3F2"
-    },
-    "alpha": {
-      "5": "0.05",
-      "10": "0.1",
-      "20": "0.2"
+      "errorLight": "#fef3f2"
     },
     "theme": {
-      "primary": "#1A4338",
+      "primary": "#1a4338",
       "secondary": "#006553",
-      "tertiary": "#7FBC5B",
+      "tertiary": "#7fbc5b",
       "link": "#006553"
-    },
-    "background": {
-      "blueGrey": "#F4F6FA",
-      "cloudGrey": "#E9E9E9",
-      "neutralGrey": "#F9F9F9",
-      "smokeGrey": "#F3F3F3",
-      "snowGrey": "#FBFBFB",
-      "white": "#ffffff",
-      "scrimLight": "rgba(255, 255, 255, 0.85)",
-      "scrimDark": "rgba(80, 80, 80, 0.7)"
     }
   },
   "font": {
+    "color": {
+      "heading": "#333333",
+      "heading0": "#333333",
+      "heading1": "#333333",
+      "heading2": "#333333",
+      "heading3": "#333333",
+      "primary": "#4c4c4c",
+      "secondary": "#6c6c6c",
+      "hint": "#d9d9d9"
+    },
     "family": {
       "heading": "'Narmi Matiere', serif",
       "heading0": "'Narmi Matiere', serif",
@@ -144,6 +161,29 @@ const tokens = {
       "body": "Mulish, Helvetica, sans-serif",
       "default": "Mulish, Helvetica, sans-serif"
     },
+    "letterSpacing": {
+      "trackingTighter": "-0.08",
+      "trackingTight": "-0.04",
+      "trackingNormal": "0",
+      "trackingWide": "0.4",
+      "trackingWider": "0.8",
+      "trackingWidest": "1.6",
+      "heading0": "0",
+      "heading1": "0",
+      "heading2": "0",
+      "heading3": "0",
+      "default": "0"
+    },
+    "lineHeight": {
+      "smallText": "1.6",
+      "bodyText": "1.25",
+      "bigText": "1.1",
+      "default": "1.25",
+      "heading0": "1.1",
+      "heading1": "1.1",
+      "heading2": "1.1",
+      "heading3": "1.25"
+    },
     "size": {
       "xxs": "10px",
       "xs": "12px",
@@ -167,47 +207,6 @@ const tokens = {
       "heading2": "700",
       "heading3": "600",
       "default": "400"
-    },
-    "lineHeight": {
-      "smallText": "1.6",
-      "bodyText": "1.25",
-      "bigText": "1.1",
-      "default": "1.25",
-      "heading0": "1.1",
-      "heading1": "1.1",
-      "heading2": "1.1",
-      "heading3": "1.25"
-    },
-    "letterSpacing": {
-      "trackingTighter": "-0.08",
-      "trackingTight": "-0.04",
-      "trackingNormal": "0",
-      "trackingWide": "0.4",
-      "trackingWider": "0.8",
-      "trackingWidest": "1.6",
-      "heading0": "0",
-      "heading1": "0",
-      "heading2": "0",
-      "heading3": "0",
-      "default": "0"
-    },
-    "color": {
-      "heading": "#333333",
-      "heading0": "#333333",
-      "heading1": "#333333",
-      "heading2": "#333333",
-      "heading3": "#333333",
-      "primary": "#4c4c4c",
-      "secondary": "#6c6c6c",
-      "hint": "#d9d9d9"
-    }
-  },
-  "shadow": {
-    "elevation": {
-      "low": "0 2px 12px 0 rgba(80, 80, 80, 0.05)",
-      "middle": "0 2px 12px 0 rgba(0, 0, 0, 0.1)",
-      "high": "0 2px 12px 0 rgba(80, 80, 80, 0.2)",
-      "default": "0 2px 12px 0 rgba(0, 0, 0, 0.1)"
     }
   },
   "layout": {
@@ -221,7 +220,15 @@ const tokens = {
       "xxl": "60px",
       "default": "20px"
     }
+  },
+  "shadow": {
+    "elevation": {
+      "low": "0 2px 12px 0 rgba(80, 80, 80, 0.05)",
+      "middle": "0 2px 12px 0 rgba(0, 0, 0, 0.1)",
+      "high": "0 2px 12px 0 rgba(80, 80, 80, 0.2)",
+      "default": "0 2px 12px 0 rgba(0, 0, 0, 0.1)"
+    }
   }
 };
 
-module.exports = tokens;
+module.exports = tokens;

package/dist/tokens/js/reactNativeWeb.js

@@ -1,5 +1,17 @@
+/**
+* DO NOT EDIT
+* Generated by style-dictionary on Wed Jul 29 2026 20:10:16 GMT+0000 (Coordinated Universal Time)
+* github.com/narmi/design_system/
+*/
+
+
 const tokens = {
   "border": {
+    "color": {
+      "primary": "#1A4338",
+      "light": "#d9d9d9",
+      "default": "#d9d9d9"
+    },
     "radius": {
       "s": 4,
       "m": 8,
@@ -11,14 +23,24 @@ const tokens = {
       "s": 1,
       "m": 2,
       "default": 1
-    },
-    "color": {
-      "primary": "#1A4338",
-      "light": "#d9d9d9",
-      "default": "#d9d9d9"
     }
   },
   "color": {
+    "alpha": {
+      "5": 0.05,
+      "10": 0.1,
+      "20": 0.2
+    },
+    "background": {
+      "blueGrey": "#F4F6FA",
+      "cloudGrey": "#E9E9E9",
+      "neutralGrey": "#F9F9F9",
+      "smokeGrey": "#F3F3F3",
+      "snowGrey": "#FBFBFB",
+      "white": "#ffffff",
+      "scrimLight": "rgba(255, 255, 255, 0.85)",
+      "scrimDark": "rgba(80, 80, 80, 0.7)"
+    },
     "grey": {
       "snowGrey": "#fbfbfb",
       "neutralGrey": "#f9f9f9",
@@ -112,29 +134,24 @@ const tokens = {
       "errorDark": "#b42318",
       "errorLight": "#FEF3F2"
     },
-    "alpha": {
-      "5": 0.05,
-      "10": 0.1,
-      "20": 0.2
-    },
     "theme": {
       "primary": "#1A4338",
       "secondary": "#006553",
       "tertiary": "#7FBC5B",
       "link": "#006553"
-    },
-    "background": {
-      "blueGrey": "#F4F6FA",
-      "cloudGrey": "#E9E9E9",
-      "neutralGrey": "#F9F9F9",
-      "smokeGrey": "#F3F3F3",
-      "snowGrey": "#FBFBFB",
-      "white": "#ffffff",
-      "scrimLight": "rgba(255, 255, 255, 0.85)",
-      "scrimDark": "rgba(80, 80, 80, 0.7)"
     }
   },
   "font": {
+    "color": {
+      "heading": "#333333",
+      "heading0": "#333333",
+      "heading1": "#333333",
+      "heading2": "#333333",
+      "heading3": "#333333",
+      "primary": "#4c4c4c",
+      "secondary": "#6c6c6c",
+      "hint": "#d9d9d9"
+    },
     "family": {
       "heading": "'Narmi Matiere', serif",
       "heading0": "'Narmi Matiere', serif",
@@ -144,6 +161,29 @@ const tokens = {
       "body": "Mulish, Helvetica, sans-serif",
       "default": "Mulish, Helvetica, sans-serif"
     },
+    "letterSpacing": {
+      "trackingTighter": "-0.08",
+      "trackingTight": "-0.04",
+      "trackingNormal": "0",
+      "trackingWide": "0.4",
+      "trackingWider": "0.8",
+      "trackingWidest": "1.6",
+      "heading0": "0",
+      "heading1": "0",
+      "heading2": "0",
+      "heading3": "0",
+      "default": "0"
+    },
+    "lineHeight": {
+      "smallText": 1.6,
+      "bodyText": 1.25,
+      "bigText": 1.1,
+      "default": 1.25,
+      "heading0": 1.1,
+      "heading1": 1.1,
+      "heading2": 1.1,
+      "heading3": 1.25
+    },
     "size": {
       "xxs": 10,
       "xs": 12,
@@ -167,47 +207,6 @@ const tokens = {
       "heading2": "700",
       "heading3": "600",
       "default": "400"
-    },
-    "lineHeight": {
-      "smallText": 1.6,
-      "bodyText": 1.25,
-      "bigText": 1.1,
-      "default": 1.25,
-      "heading0": 1.1,
-      "heading1": 1.1,
-      "heading2": 1.1,
-      "heading3": 1.25
-    },
-    "letterSpacing": {
-      "trackingTighter": "-0.08",
-      "trackingTight": "-0.04",
-      "trackingNormal": "0",
-      "trackingWide": "0.4",
-      "trackingWider": "0.8",
-      "trackingWidest": "1.6",
-      "heading0": "0",
-      "heading1": "0",
-      "heading2": "0",
-      "heading3": "0",
-      "default": "0"
-    },
-    "color": {
-      "heading": "#333333",
-      "heading0": "#333333",
-      "heading1": "#333333",
-      "heading2": "#333333",
-      "heading3": "#333333",
-      "primary": "#4c4c4c",
-      "secondary": "#6c6c6c",
-      "hint": "#d9d9d9"
-    }
-  },
-  "shadow": {
-    "elevation": {
-      "low": "0 2 12px 0 rgba(80, 80, 80, 0.05)",
-      "middle": "0 2 12px 0 rgba(0, 0, 0, 0.1)",
-      "high": "0 2 12px 0 rgba(80, 80, 80, 0.2)",
-      "default": "0 2 12px 0 rgba(0, 0, 0, 0.1)"
     }
   },
   "layout": {
@@ -221,7 +220,15 @@ const tokens = {
       "xxl": 60,
       "default": 20
     }
+  },
+  "shadow": {
+    "elevation": {
+      "low": "0 2 12px 0 rgba(80, 80, 80, 0.05)",
+      "middle": "0 2 12px 0 rgba(0, 0, 0, 0.1)",
+      "high": "0 2 12px 0 rgba(80, 80, 80, 0.2)",
+      "default": "0 2 12px 0 rgba(0, 0, 0, 0.1)"
+    }
   }
 };
 
-module.exports = tokens;
+module.exports = tokens;

package/dist/tokens/json/tokens.json

@@ -1,5 +1,10 @@
 {
   "border": {
+    "color": {
+      "primary": "#1A4338",
+      "light": "#d9d9d9",
+      "default": "#d9d9d9"
+    },
     "radius": {
       "s": "4px",
       "m": "8px",
@@ -11,14 +16,24 @@
       "s": "1px",
       "m": "2px",
       "default": "1px"
-    },
-    "color": {
-      "primary": "#1A4338",
-      "light": "#d9d9d9",
-      "default": "#d9d9d9"
     }
   },
   "color": {
+    "alpha": {
+      "5": "0.05",
+      "10": "0.1",
+      "20": "0.2"
+    },
+    "background": {
+      "blueGrey": "#F4F6FA",
+      "cloudGrey": "#E9E9E9",
+      "neutralGrey": "#F9F9F9",
+      "smokeGrey": "#F3F3F3",
+      "snowGrey": "#FBFBFB",
+      "white": "#ffffff",
+      "scrimLight": "rgba(255, 255, 255, 0.85)",
+      "scrimDark": "rgba(80, 80, 80, 0.7)"
+    },
     "grey": {
       "snowGrey": "#fbfbfb",
       "neutralGrey": "#f9f9f9",
@@ -112,29 +127,24 @@
       "errorDark": "#b42318",
       "errorLight": "#FEF3F2"
     },
-    "alpha": {
-      "5": "0.05",
-      "10": "0.1",
-      "20": "0.2"
-    },
     "theme": {
       "primary": "#1A4338",
       "secondary": "#006553",
       "tertiary": "#7FBC5B",
       "link": "#006553"
-    },
-    "background": {
-      "blueGrey": "#F4F6FA",
-      "cloudGrey": "#E9E9E9",
-      "neutralGrey": "#F9F9F9",
-      "smokeGrey": "#F3F3F3",
-      "snowGrey": "#FBFBFB",
-      "white": "#ffffff",
-      "scrimLight": "rgba(255, 255, 255, 0.85)",
-      "scrimDark": "rgba(80, 80, 80, 0.7)"
     }
   },
   "font": {
+    "color": {
+      "heading": "#333333",
+      "heading0": "#333333",
+      "heading1": "#333333",
+      "heading2": "#333333",
+      "heading3": "#333333",
+      "primary": "#4c4c4c",
+      "secondary": "#6c6c6c",
+      "hint": "#d9d9d9"
+    },
     "family": {
       "heading": "'Narmi Matiere', serif",
       "heading0": "'Narmi Matiere', serif",
@@ -144,6 +154,29 @@
       "body": "Mulish, Helvetica, sans-serif",
       "default": "Mulish, Helvetica, sans-serif"
     },
+    "letterSpacing": {
+      "trackingTighter": "-0.08",
+      "trackingTight": "-0.04",
+      "trackingNormal": "0",
+      "trackingWide": "0.4",
+      "trackingWider": "0.8",
+      "trackingWidest": "1.6",
+      "heading0": "0",
+      "heading1": "0",
+      "heading2": "0",
+      "heading3": "0",
+      "default": "0"
+    },
+    "lineHeight": {
+      "smallText": "1.6",
+      "bodyText": "1.25",
+      "bigText": "1.1",
+      "default": "1.25",
+      "heading0": "1.1",
+      "heading1": "1.1",
+      "heading2": "1.1",
+      "heading3": "1.25"
+    },
     "size": {
       "xxs": "10px",
       "xs": "12px",
@@ -167,47 +200,6 @@
       "heading2": "700",
       "heading3": "600",
       "default": "400"
-    },
-    "lineHeight": {
-      "smallText": "1.6",
-      "bodyText": "1.25",
-      "bigText": "1.1",
-      "default": "1.25",
-      "heading0": "1.1",
-      "heading1": "1.1",
-      "heading2": "1.1",
-      "heading3": "1.25"
-    },
-    "letterSpacing": {
-      "trackingTighter": "-0.08",
-      "trackingTight": "-0.04",
-      "trackingNormal": "0",
-      "trackingWide": "0.4",
-      "trackingWider": "0.8",
-      "trackingWidest": "1.6",
-      "heading0": "0",
-      "heading1": "0",
-      "heading2": "0",
-      "heading3": "0",
-      "default": "0"
-    },
-    "color": {
-      "heading": "#333333",
-      "heading0": "#333333",
-      "heading1": "#333333",
-      "heading2": "#333333",
-      "heading3": "#333333",
-      "primary": "#4c4c4c",
-      "secondary": "#6c6c6c",
-      "hint": "#d9d9d9"
-    }
-  },
-  "shadow": {
-    "elevation": {
-      "low": "0 2px 12px 0 rgba(80, 80, 80, 0.05)",
-      "middle": "0 2px 12px 0 rgba(0, 0, 0, 0.1)",
-      "high": "0 2px 12px 0 rgba(80, 80, 80, 0.2)",
-      "default": "0 2px 12px 0 rgba(0, 0, 0, 0.1)"
     }
   },
   "layout": {
@@ -221,5 +213,13 @@
       "xxl": "60px",
       "default": "20px"
     }
+  },
+  "shadow": {
+    "elevation": {
+      "low": "0 2px 12px 0 rgba(80, 80, 80, 0.05)",
+      "middle": "0 2px 12px 0 rgba(0, 0, 0, 0.1)",
+      "high": "0 2px 12px 0 rgba(80, 80, 80, 0.2)",
+      "default": "0 2px 12px 0 rgba(0, 0, 0, 0.1)"
+    }
   }
 }

package/dist/types/Alert/index.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { IconName } from '../types/Icon.types';
-interface AlertProps {
+export interface AlertProps {
     /** The alert is only visible when this prop is set to `true` */
     isActive?: boolean;
     /** Renders a dismiss button when `true` */