@trackunit/ui-design-tokens 0.0.70 → 0.0.73

package/index.js

@@ -1,758 +1,752 @@
-/**
- * A collection of all the tokens related to border radius in the theme.
- */
-const themeBorderRadius = {
-    none: "0",
-    sm: "0.125rem",
-    DEFAULT: "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    xl: "0.75rem",
-    "2xl": "1rem",
-    "3xl": "1.5rem",
-    full: "9999px",
+/**
+ * A collection of all the tokens related to border radius in the theme.
+ */
+const themeBorderRadius = {
+    none: "0",
+    sm: "0.125rem",
+    DEFAULT: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
 };
 
-const DEFAULT_CHART_COLORS = [
-    "#2580C7",
-    "#36A2DA",
-    "#3FBCEA",
-    "#06708D",
-    "#01B7A9",
-    "#A2DEDA",
-    "#F9E9A0",
-    "#FDD008",
-    "#FBB385",
-    "#FF7373",
-    "#E6BCF3",
-    "#9D96F5",
-    "#8378EA",
-    "#96BFFF",
-    "#979A9A",
-    "#0065E5",
-    "#FF5A5A",
-    "#00A658",
-    "#5AC8fA",
-    "#5E5CE6",
-    "#2066FF",
-    "#FF9500",
-    "#E2E8F0",
-];
-/**
- * Re-ordered chart colors to ensure that adjacent colors are visually different.
- *
- * @returns {string[]} The reordered chart colors.
- */
-const getReorderedChartColors = () => [
-    // DO NOT reorder the colors, or add new colors in the middle of the array until you verify that adjacent colors are visually different.
-    // If you want to add a new color, you should almost always add it at the end of the array.
-    DEFAULT_CHART_COLORS[0],
-    DEFAULT_CHART_COLORS[4],
-    DEFAULT_CHART_COLORS[7],
-    DEFAULT_CHART_COLORS[9],
-    DEFAULT_CHART_COLORS[12],
-    DEFAULT_CHART_COLORS[5],
-    DEFAULT_CHART_COLORS[6],
-    DEFAULT_CHART_COLORS[8],
-    DEFAULT_CHART_COLORS[10],
-    DEFAULT_CHART_COLORS[1],
-    DEFAULT_CHART_COLORS[11],
-    DEFAULT_CHART_COLORS[3],
-    DEFAULT_CHART_COLORS[2],
-    DEFAULT_CHART_COLORS[13],
-    DEFAULT_CHART_COLORS[22],
+const DEFAULT_CHART_COLORS = [
+    "#2580C7",
+    "#36A2DA",
+    "#3FBCEA",
+    "#06708D",
+    "#01B7A9",
+    "#A2DEDA",
+    "#F9E9A0",
+    "#FDD008",
+    "#FBB385",
+    "#FF7373",
+    "#E6BCF3",
+    "#9D96F5",
+    "#8378EA",
+    "#96BFFF",
+    "#979A9A",
+    "#0065E5",
+    "#FF5A5A",
+    "#00A658",
+    "#5AC8fA",
+    "#5E5CE6",
+    "#2066FF",
+    "#FF9500",
+    "#E2E8F0",
+];
+/**
+ * Re-ordered chart colors to ensure that adjacent colors are visually different.
+ *
+ * @returns {string[]} The reordered chart colors.
+ */
+const getReorderedChartColors = () => [
+    // DO NOT reorder the colors, or add new colors in the middle of the array until you verify that adjacent colors are visually different.
+    // If you want to add a new color, you should almost always add it at the end of the array.
+    DEFAULT_CHART_COLORS[0],
+    DEFAULT_CHART_COLORS[4],
+    DEFAULT_CHART_COLORS[7],
+    DEFAULT_CHART_COLORS[9],
+    DEFAULT_CHART_COLORS[12],
+    DEFAULT_CHART_COLORS[5],
+    DEFAULT_CHART_COLORS[6],
+    DEFAULT_CHART_COLORS[8],
+    DEFAULT_CHART_COLORS[10],
+    DEFAULT_CHART_COLORS[1],
+    DEFAULT_CHART_COLORS[11],
+    DEFAULT_CHART_COLORS[3],
+    DEFAULT_CHART_COLORS[2],
+    DEFAULT_CHART_COLORS[13],
+    DEFAULT_CHART_COLORS[22],
 ];
 
-/**
- * Convert a css custom property from our design tokens to a useable css string.
- *
- * Our custom properties are saved as "rrr ggg bbb" rather than a full css color.
- *
- * This allows us to modify them with opacity values and more.
- *
- * @param variable CSS custom property for color
- * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
- * @returns {string} Full css for using the color
- */
-function colorVariableToCss(variable) {
-    return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
+/**
+ * Convert a css custom property from our design tokens to a useable css string.
+ *
+ * Our custom properties are saved as "rrr ggg bbb" rather than a full css color.
+ *
+ * This allows us to modify them with opacity values and more.
+ *
+ * @param variable CSS custom property for color
+ * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
+ * @returns {string} Full css for using the color
+ */
+function colorVariableToCss(variable) {
+    return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
 }
 
-function componentToHex(c) {
-    if (c === null || c === undefined) {
-        return "00";
-    }
-    const hex = c.toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-}
-function rgbToHex(r, g, b) {
-    if (isNaN(r) || isNaN(g) || isNaN(b)) {
-        return "#000000";
-    }
-    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-/**
- * Returns the HEX color based on a Color from the theme.
- *  Reads the RGB value from the underlying CSS variable and convert to HEX.
- *
- *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
- *
- * @param variable A color from the `colors` object of the Theme
- * @returns {string} HEX color
- */
-const getHEX = (variable) => {
-    var _a, _b;
-    const regex = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/g;
-    const root = document.documentElement;
-    const match = regex.exec(variable);
-    const colorValue = getComputedStyle(root).getPropertyValue((_b = (_a = match === null || match === void 0 ? void 0 : match[1]) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : variable);
-    const RGB = colorValue
-        .trim()
-        .split(" ")
-        .map(channel => Number(channel));
-    return rgbToHex(RGB[0], RGB[1], RGB[2]);
+function componentToHex(c) {
+    if (c === null || c === undefined) {
+        return "00";
+    }
+    const hex = c.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+}
+function rgbToHex(r, g, b) {
+    if (isNaN(r) || isNaN(g) || isNaN(b)) {
+        return "#000000";
+    }
+    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+/**
+ * Returns the HEX color based on a Color from the theme.
+ *  Reads the RGB value from the underlying CSS variable and convert to HEX.
+ *
+ *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
+ *
+ * @param variable A color from the `colors` object of the Theme
+ * @returns {string} HEX color
+ */
+const getHEX = (variable) => {
+    var _a, _b;
+    const regex = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/g;
+    const root = document.documentElement;
+    const match = regex.exec(variable);
+    const colorValue = getComputedStyle(root).getPropertyValue((_b = (_a = match === null || match === void 0 ? void 0 : match[1]) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : variable);
+    const RGB = colorValue
+        .trim()
+        .split(" ")
+        .map(channel => Number(channel));
+    return rgbToHex(RGB[0], RGB[1], RGB[2]);
 };
 
-/**
- * The Tailwind color palette.
- * Contains the full tailwind default color theme.
- */
-const tailwindPalette = {
-    slate: {
-        50: "248 250 252",
-        100: "241 245 249",
-        200: "226 232 240",
-        300: "203 213 225",
-        400: "148 163 184",
-        500: "100 116 139",
-        600: "71 85 105",
-        700: "51 65 85",
-        800: "30 41 59",
-        900: "15 23 42",
-    },
-    gray: {
-        50: "249 250 251",
-        100: "243 244 246",
-        200: "229 231 235",
-        300: "209 213 219",
-        400: "156 163 175",
-        500: "107 114 128",
-        600: "75 85 99",
-        700: "55 65 81",
-        800: "31 41 55",
-        900: "17 24 39",
-    },
-    zinc: {
-        50: "250 250 250",
-        100: "244 244 245",
-        200: "228 228 231",
-        300: "212 212 216",
-        400: "161 161 170",
-        500: "113 113 122",
-        600: "82 82 91",
-        700: "63 63 70",
-        800: "39 39 42",
-        900: "24 24 27",
-    },
-    neutral: {
-        50: "250 250 250",
-        100: "245 245 245",
-        200: "229 229 229",
-        300: "212 212 212",
-        400: "163 163 163",
-        500: "115 115 115",
-        600: "82 82 82",
-        700: "64 64 64",
-        800: "38 38 38",
-        900: "23 23 23",
-    },
-    stone: {
-        50: "250 250 249",
-        100: "245 245 244",
-        200: "231 229 228",
-        300: "214 211 209",
-        400: "168 162 158",
-        500: "120 113 108",
-        600: "87 83 78",
-        700: "68 64 60",
-        800: "41 37 36",
-        900: "28 25 23",
-    },
-    red: {
-        50: "254 242 242",
-        100: "254 226 226",
-        200: "254 202 202",
-        300: "252 165 165",
-        400: "248 113 113",
-        500: "239 68 68",
-        600: "220 38 38",
-        700: "185 28 28",
-        800: "153 27 27",
-        900: "127 29 29",
-    },
-    orange: {
-        50: "255 247 237",
-        100: "255 237 213",
-        200: "254 215 170",
-        300: "253 186 116",
-        400: "251 146 60",
-        500: "249 115 22",
-        600: "234 88 12",
-        700: "194 65 12",
-        800: "154 52 18",
-        900: "124 45 18",
-    },
-    amber: {
-        50: "255 251 235",
-        100: "254 243 199",
-        200: "253 230 138",
-        300: "252 211 77",
-        400: "251 191 36",
-        500: "245 158 11",
-        600: "217 119 6",
-        700: "180 83 9",
-        800: "146 64 14",
-        900: "120 53 15",
-    },
-    yellow: {
-        50: "254 252 232",
-        100: "254 249 195",
-        200: "254 240 138",
-        300: "253 224 71",
-        400: "250 204 21",
-        500: "234 179 8",
-        600: "202 138 4",
-        700: "161 98 7",
-        800: "133 77 14",
-        900: "113 63 18",
-    },
-    lime: {
-        50: "247 254 231",
-        100: "236 252 203",
-        200: "217 249 157",
-        300: "190 242 100",
-        400: "163 230 53",
-        500: "132 204 22",
-        600: "101 163 13",
-        700: "77 124 15",
-        800: "63 98 18",
-        900: "54 83 20",
-    },
-    green: {
-        50: "240 253 244",
-        100: "220 252 231",
-        200: "187 247 208",
-        300: "134 239 172",
-        400: "74 222 128",
-        500: "34 197 94",
-        600: "22 163 74",
-        700: "21 128 61",
-        800: "22 101 52",
-        900: "20 83 45",
-    },
-    emerald: {
-        50: "236 253 245",
-        100: "209 250 229",
-        200: "167 243 208",
-        300: "110 231 183",
-        400: "52 211 153",
-        500: "16 185 129",
-        600: "5 150 105",
-        700: "4 120 87",
-        800: "6 95 70",
-        900: "6 78 59",
-    },
-    teal: {
-        50: "240 253 250",
-        100: "204 251 241",
-        200: "153 246 228",
-        300: "94 234 212",
-        400: "45 212 191",
-        500: "20 184 166",
-        600: "13 148 136",
-        700: "15 118 110",
-        800: "17 94 89",
-        900: "19 78 74",
-    },
-    cyan: {
-        50: "236 254 255",
-        100: "207 250 254",
-        200: "165 243 252",
-        300: "103 232 249",
-        400: "34 211 238",
-        500: "6 182 212",
-        600: "8 145 178",
-        700: "14 116 144",
-        800: "21 94 117",
-        900: "22 78 99",
-    },
-    sky: {
-        50: "240 249 255",
-        100: "224 242 254",
-        200: "186 230 253",
-        300: "125 211 252",
-        400: "56 189 248",
-        500: "14 165 233",
-        600: "2 132 199",
-        700: "3 105 161",
-        800: "7 89 133",
-        900: "12 74 110",
-    },
-    blue: {
-        50: "239 246 255",
-        100: "219 234 254",
-        200: "191 219 254",
-        300: "147 197 253",
-        400: "96 165 250",
-        500: "59 130 246",
-        600: "37 99 235",
-        700: "29 78 216",
-        800: "30 64 175",
-        900: "30 58 138",
-    },
-    indigo: {
-        50: "238 242 255",
-        100: "224 231 255",
-        200: "199 210 254",
-        300: "165 180 252",
-        400: "129 140 248",
-        500: "99 102 241",
-        600: "79 70 229",
-        700: "67 56 202",
-        800: "55 48 163",
-        900: "49 46 129",
-    },
-    violet: {
-        50: "245 243 255",
-        100: "237 233 254",
-        200: "221 214 254",
-        300: "196 181 253",
-        400: "167 139 250",
-        500: "139 92 246",
-        600: "124 58 237",
-        700: "109 40 217",
-        800: "91 33 182",
-        900: "76 29 149",
-    },
-    purple: {
-        50: "250 245 255",
-        100: "243 232 255",
-        200: "233 213 255",
-        300: "216 180 254",
-        400: "192 132 252",
-        500: "168 85 247",
-        600: "147 51 234",
-        700: "126 34 206",
-        800: "107 33 168",
-        900: "88 28 135",
-    },
-    fuchsia: {
-        50: "253 244 255",
-        100: "250 232 255",
-        200: "245 208 254",
-        300: "240 171 252",
-        400: "232 121 249",
-        500: "217 70 239",
-        600: "192 38 211",
-        700: "162 28 175",
-        800: "134 25 143",
-        900: "112 26 117",
-    },
-    pink: {
-        50: "253 242 248",
-        100: "252 231 243",
-        200: "251 207 232",
-        300: "249 168 212",
-        400: "244 114 182",
-        500: "236 72 153",
-        600: "219 39 119",
-        700: "190 24 93",
-        800: "157 23 77",
-        900: "131 24 67",
-    },
-    rose: {
-        50: "255 241 242",
-        100: "255 228 230",
-        200: "254 205 211",
-        300: "253 164 175",
-        400: "251 113 133",
-        500: "244 63 94",
-        600: "225 29 72",
-        700: "190 18 60",
-        800: "159 18 57",
-        900: "136 19 55",
-    },
+/**
+ * The Tailwind color palette.
+ * Contains the full tailwind default color theme.
+ */
+const tailwindPalette = {
+    slate: {
+        50: "248 250 252",
+        100: "241 245 249",
+        200: "226 232 240",
+        300: "203 213 225",
+        400: "148 163 184",
+        500: "100 116 139",
+        600: "71 85 105",
+        700: "51 65 85",
+        800: "30 41 59",
+        900: "15 23 42",
+    },
+    gray: {
+        50: "249 250 251",
+        100: "243 244 246",
+        200: "229 231 235",
+        300: "209 213 219",
+        400: "156 163 175",
+        500: "107 114 128",
+        600: "75 85 99",
+        700: "55 65 81",
+        800: "31 41 55",
+        900: "17 24 39",
+    },
+    zinc: {
+        50: "250 250 250",
+        100: "244 244 245",
+        200: "228 228 231",
+        300: "212 212 216",
+        400: "161 161 170",
+        500: "113 113 122",
+        600: "82 82 91",
+        700: "63 63 70",
+        800: "39 39 42",
+        900: "24 24 27",
+    },
+    neutral: {
+        50: "250 250 250",
+        100: "245 245 245",
+        200: "229 229 229",
+        300: "212 212 212",
+        400: "163 163 163",
+        500: "115 115 115",
+        600: "82 82 82",
+        700: "64 64 64",
+        800: "38 38 38",
+        900: "23 23 23",
+    },
+    stone: {
+        50: "250 250 249",
+        100: "245 245 244",
+        200: "231 229 228",
+        300: "214 211 209",
+        400: "168 162 158",
+        500: "120 113 108",
+        600: "87 83 78",
+        700: "68 64 60",
+        800: "41 37 36",
+        900: "28 25 23",
+    },
+    red: {
+        50: "254 242 242",
+        100: "254 226 226",
+        200: "254 202 202",
+        300: "252 165 165",
+        400: "248 113 113",
+        500: "239 68 68",
+        600: "220 38 38",
+        700: "185 28 28",
+        800: "153 27 27",
+        900: "127 29 29",
+    },
+    orange: {
+        50: "255 247 237",
+        100: "255 237 213",
+        200: "254 215 170",
+        300: "253 186 116",
+        400: "251 146 60",
+        500: "249 115 22",
+        600: "234 88 12",
+        700: "194 65 12",
+        800: "154 52 18",
+        900: "124 45 18",
+    },
+    amber: {
+        50: "255 251 235",
+        100: "254 243 199",
+        200: "253 230 138",
+        300: "252 211 77",
+        400: "251 191 36",
+        500: "245 158 11",
+        600: "217 119 6",
+        700: "180 83 9",
+        800: "146 64 14",
+        900: "120 53 15",
+    },
+    yellow: {
+        50: "254 252 232",
+        100: "254 249 195",
+        200: "254 240 138",
+        300: "253 224 71",
+        400: "250 204 21",
+        500: "234 179 8",
+        600: "202 138 4",
+        700: "161 98 7",
+        800: "133 77 14",
+        900: "113 63 18",
+    },
+    lime: {
+        50: "247 254 231",
+        100: "236 252 203",
+        200: "217 249 157",
+        300: "190 242 100",
+        400: "163 230 53",
+        500: "132 204 22",
+        600: "101 163 13",
+        700: "77 124 15",
+        800: "63 98 18",
+        900: "54 83 20",
+    },
+    green: {
+        50: "240 253 244",
+        100: "220 252 231",
+        200: "187 247 208",
+        300: "134 239 172",
+        400: "74 222 128",
+        500: "34 197 94",
+        600: "22 163 74",
+        700: "21 128 61",
+        800: "22 101 52",
+        900: "20 83 45",
+    },
+    emerald: {
+        50: "236 253 245",
+        100: "209 250 229",
+        200: "167 243 208",
+        300: "110 231 183",
+        400: "52 211 153",
+        500: "16 185 129",
+        600: "5 150 105",
+        700: "4 120 87",
+        800: "6 95 70",
+        900: "6 78 59",
+    },
+    teal: {
+        50: "240 253 250",
+        100: "204 251 241",
+        200: "153 246 228",
+        300: "94 234 212",
+        400: "45 212 191",
+        500: "20 184 166",
+        600: "13 148 136",
+        700: "15 118 110",
+        800: "17 94 89",
+        900: "19 78 74",
+    },
+    cyan: {
+        50: "236 254 255",
+        100: "207 250 254",
+        200: "165 243 252",
+        300: "103 232 249",
+        400: "34 211 238",
+        500: "6 182 212",
+        600: "8 145 178",
+        700: "14 116 144",
+        800: "21 94 117",
+        900: "22 78 99",
+    },
+    sky: {
+        50: "240 249 255",
+        100: "224 242 254",
+        200: "186 230 253",
+        300: "125 211 252",
+        400: "56 189 248",
+        500: "14 165 233",
+        600: "2 132 199",
+        700: "3 105 161",
+        800: "7 89 133",
+        900: "12 74 110",
+    },
+    blue: {
+        50: "239 246 255",
+        100: "219 234 254",
+        200: "191 219 254",
+        300: "147 197 253",
+        400: "96 165 250",
+        500: "59 130 246",
+        600: "37 99 235",
+        700: "29 78 216",
+        800: "30 64 175",
+        900: "30 58 138",
+    },
+    indigo: {
+        50: "238 242 255",
+        100: "224 231 255",
+        200: "199 210 254",
+        300: "165 180 252",
+        400: "129 140 248",
+        500: "99 102 241",
+        600: "79 70 229",
+        700: "67 56 202",
+        800: "55 48 163",
+        900: "49 46 129",
+    },
+    violet: {
+        50: "245 243 255",
+        100: "237 233 254",
+        200: "221 214 254",
+        300: "196 181 253",
+        400: "167 139 250",
+        500: "139 92 246",
+        600: "124 58 237",
+        700: "109 40 217",
+        800: "91 33 182",
+        900: "76 29 149",
+    },
+    purple: {
+        50: "250 245 255",
+        100: "243 232 255",
+        200: "233 213 255",
+        300: "216 180 254",
+        400: "192 132 252",
+        500: "168 85 247",
+        600: "147 51 234",
+        700: "126 34 206",
+        800: "107 33 168",
+        900: "88 28 135",
+    },
+    fuchsia: {
+        50: "253 244 255",
+        100: "250 232 255",
+        200: "245 208 254",
+        300: "240 171 252",
+        400: "232 121 249",
+        500: "217 70 239",
+        600: "192 38 211",
+        700: "162 28 175",
+        800: "134 25 143",
+        900: "112 26 117",
+    },
+    pink: {
+        50: "253 242 248",
+        100: "252 231 243",
+        200: "251 207 232",
+        300: "249 168 212",
+        400: "244 114 182",
+        500: "236 72 153",
+        600: "219 39 119",
+        700: "190 24 93",
+        800: "157 23 77",
+        900: "131 24 67",
+    },
+    rose: {
+        50: "255 241 242",
+        100: "255 228 230",
+        200: "254 205 211",
+        300: "253 164 175",
+        400: "251 113 133",
+        500: "244 63 94",
+        600: "225 29 72",
+        700: "190 18 60",
+        800: "159 18 57",
+        900: "136 19 55",
+    },
 };
 
-/**
- * The general color palette
- * Should be available in most if not all colored components
- */
-const generalPalette = {
-    PRIMARY: tailwindPalette.blue,
-    SECONDARY: tailwindPalette.slate,
-    ACCENT: tailwindPalette.cyan,
-    NEUTRAL: tailwindPalette.neutral,
-    BLACK: { DEFAULT: "26 27 28" },
-    WHITE: { DEFAULT: "255 255 255" },
-};
-/**
- * The intent color palette
- * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
- */
-const intentPalette = {
-    INFO: tailwindPalette.blue,
-    SUCCESS: tailwindPalette.green,
-    WARNING: tailwindPalette.amber,
-    DANGER: tailwindPalette.red,
-};
-/**
- * The Criticality color palette
- * Should be available in any component that could be used to display the criticality of an asset or event
- */
-const criticalityPalette = {
-    GOOD: tailwindPalette.emerald,
-    LOW: tailwindPalette.amber,
-    CRITICAL: tailwindPalette.red,
-};
-/**
- * The Activity color palette
- * Should be available in any component that could be used to display the Activity state of an asset
- */
-const activityPalette = {
-    WORKING: tailwindPalette.blue,
-    IDLE: tailwindPalette.orange,
-    STOPPED: tailwindPalette.violet,
-    UNKNOWN: tailwindPalette.neutral,
-    MOVING: { DEFAULT: "230 144 177" },
-    ACTIVE: { DEFAULT: "63 219 147" },
-};
-/**
- * The Utilization color palette
- * Should be available in any component that could be used to display the Activity state of an asset
- */
-const utilizationPalette = {
-    UNUSED: { 300: tailwindPalette.red["300"], 400: tailwindPalette.red["400"] },
-    UTILIZED: { 400: tailwindPalette.blue["400"], 600: tailwindPalette.blue["600"] },
-    HEAVILY_UTILIZED: { 300: tailwindPalette.amber["300"], 500: tailwindPalette.amber["500"] },
-};
-/**
- * The Rental status color palette
- * Should be available in any component that could be used to display the rental status of an asset
- */
-const rentalStatusPalette = {
-    ON_RENT: { 100: "223 244 254", 600: "90 200 250" },
-    RETURNED: { 100: "230 202 255", 600: "176 90 255" },
-    AVAILABLE: { 100: "206 255 232", 600: "0 166 88" },
-    PICKUP_READY: { 100: "255 236 209", 600: "255 149 0" },
-    TRANSFER: { 100: "255 248 217", 600: "253 208 8" },
-    IN_REPAIR: { 100: "255 233 233", 600: "255 90 90" },
-    OTHER_RENTAL_STATUS: { 100: "238 239 239", 600: "151 154 154" },
-};
-/**
- * Colors of the different site types.
- *
- * The generator has an issue with underscores in variant names, which is why they are not used below.
- */
-const sitesPalette = {
-    SITE: {
-        AREA: tailwindPalette.blue["600"],
-        CLASSIC_POI: tailwindPalette.neutral["500"],
-        CLASSIC_ZONE: tailwindPalette.neutral["500"],
-        DEPOT: tailwindPalette.emerald["500"],
-        WORK_PLACE: tailwindPalette.violet["600"],
-        CONSTRUCTION_SITE: tailwindPalette.amber["500"],
-        UNKNOWN: tailwindPalette.neutral["500"],
-    },
-};
-/**
- * Grouped Theme Colors
- */
-const groupedPalettes = {
-    // General
-    GENERAL: generalPalette,
-    // UI Intent
-    INTENT: intentPalette,
-    // Asset Criticality
-    CRITICALITY: criticalityPalette,
-    // Activity
-    ACTIVITY: activityPalette,
-    // Utilization
-    UTILIZATION: utilizationPalette,
-    // Rental
-    RENTAL: rentalStatusPalette,
-    // Sites
-    SITES: sitesPalette,
-};
-/**
- * The full theme color palette (flattened)
- */
+/**
+ * The general color palette
+ * Should be available in most if not all colored components
+ */
+const generalPalette = {
+    PRIMARY: tailwindPalette.blue,
+    SECONDARY: tailwindPalette.slate,
+    ACCENT: tailwindPalette.cyan,
+    NEUTRAL: tailwindPalette.neutral,
+    BLACK: { DEFAULT: "26 27 28" },
+    WHITE: { DEFAULT: "255 255 255" },
+};
+/**
+ * The intent color palette
+ * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
+ */
+const intentPalette = {
+    INFO: tailwindPalette.blue,
+    SUCCESS: tailwindPalette.green,
+    WARNING: tailwindPalette.amber,
+    DANGER: tailwindPalette.red,
+};
+/**
+ * The Criticality color palette
+ * Should be available in any component that could be used to display the criticality of an asset or event
+ */
+const criticalityPalette = {
+    GOOD: tailwindPalette.emerald,
+    LOW: tailwindPalette.amber,
+    CRITICAL: tailwindPalette.red,
+};
+/**
+ * The Activity color palette
+ * Should be available in any component that could be used to display the Activity state of an asset
+ */
+const activityPalette = {
+    WORKING: tailwindPalette.blue,
+    IDLE: tailwindPalette.orange,
+    STOPPED: tailwindPalette.violet,
+    UNKNOWN: tailwindPalette.neutral,
+    MOVING: { DEFAULT: "230 144 177" },
+    ACTIVE: { DEFAULT: "63 219 147" },
+};
+/**
+ * The Utilization color palette
+ * Should be available in any component that could be used to display the Activity state of an asset
+ */
+const utilizationPalette = {
+    UNUSED: { 300: tailwindPalette.red["300"], 400: tailwindPalette.red["400"] },
+    UTILIZED: { 400: tailwindPalette.blue["400"], 600: tailwindPalette.blue["600"] },
+    HEAVILY_UTILIZED: { 300: tailwindPalette.amber["300"], 500: tailwindPalette.amber["500"] },
+};
+/**
+ * The Rental status color palette
+ * Should be available in any component that could be used to display the rental status of an asset
+ */
+const rentalStatusPalette = {
+    ON_RENT: { 100: "223 244 254", 600: "90 200 250" },
+    RETURNED: { 100: "230 202 255", 600: "176 90 255" },
+    AVAILABLE: { 100: "206 255 232", 600: "0 166 88" },
+    PICKUP_READY: { 100: "255 236 209", 600: "255 149 0" },
+    TRANSFER: { 100: "255 248 217", 600: "253 208 8" },
+    IN_REPAIR: { 100: "255 233 233", 600: "255 90 90" },
+    OTHER_RENTAL_STATUS: { 100: "238 239 239", 600: "151 154 154" },
+};
+/**
+ * Colors of the different site types.
+ *
+ * The generator has an issue with underscores in variant names, which is why they are not used below.
+ */
+const sitesPalette = {
+    SITE: {
+        AREA: tailwindPalette.blue["600"],
+        CLASSIC_POI: tailwindPalette.neutral["500"],
+        CLASSIC_ZONE: tailwindPalette.neutral["500"],
+        DEPOT: tailwindPalette.emerald["500"],
+        WORK_PLACE: tailwindPalette.violet["600"],
+        CONSTRUCTION_SITE: tailwindPalette.amber["500"],
+        UNKNOWN: tailwindPalette.neutral["500"],
+    },
+};
+/**
+ * Grouped Theme Colors
+ */
+const groupedPalettes = {
+    // General
+    GENERAL: generalPalette,
+    // UI Intent
+    INTENT: intentPalette,
+    // Asset Criticality
+    CRITICALITY: criticalityPalette,
+    // Activity
+    ACTIVITY: activityPalette,
+    // Utilization
+    UTILIZATION: utilizationPalette,
+    // Rental
+    RENTAL: rentalStatusPalette,
+    // Sites
+    SITES: sitesPalette,
+};
+/**
+ * The full theme color palette (flattened)
+ */
 const trackunitPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalPalette), intentPalette), criticalityPalette), activityPalette), utilizationPalette), rentalStatusPalette), sitesPalette);
 
-/**
- * A collection of all the tokens related to the named colors in the default theme.
- */
-/**
- * An object of all the Trackunit Theme colors and their available variants.
- * These colors does not include the default tailwind colors.
- */
-const themeColors = {
-    PRIMARY: { name: "primary", variants: trackunitPalette.PRIMARY },
-    SECONDARY: { name: "secondary", variants: trackunitPalette.SECONDARY },
-    ACCENT: { name: "accent", variants: trackunitPalette.ACCENT },
-    NEUTRAL: { name: "neutral", variants: trackunitPalette.NEUTRAL },
-    BLACK: { name: "black", variants: trackunitPalette.BLACK, defaultVariant: "DEFAULT" },
-    WHITE: { name: "white", variants: trackunitPalette.WHITE, defaultVariant: "DEFAULT" },
-    INFO: { name: "info", variants: trackunitPalette.INFO },
-    SUCCESS: { name: "success", variants: trackunitPalette.SUCCESS },
-    WARNING: { name: "warning", variants: trackunitPalette.WARNING },
-    DANGER: { name: "danger", variants: trackunitPalette.DANGER },
-    GOOD: { name: "good", variants: trackunitPalette.GOOD },
-    LOW: { name: "low", variants: trackunitPalette.LOW },
-    CRITICAL: { name: "critical", variants: trackunitPalette.CRITICAL },
-    WORKING: { name: "working", variants: trackunitPalette.WORKING },
-    IDLE: { name: "idle", variants: trackunitPalette.IDLE },
-    STOPPED: { name: "stopped", variants: trackunitPalette.STOPPED },
-    ACTIVE: { name: "active", variants: trackunitPalette.ACTIVE, defaultVariant: "DEFAULT" },
-    MOVING: { name: "moving", variants: trackunitPalette.MOVING, defaultVariant: "DEFAULT" },
-    UNKNOWN: { name: "unknown", variants: trackunitPalette.UNKNOWN },
-    AVAILABLE: { name: "available", variants: trackunitPalette.AVAILABLE },
-    UNUSED: { name: "unused", variants: trackunitPalette.UNUSED },
-    UTILIZED: { name: "utilized", variants: trackunitPalette.UTILIZED },
-    HEAVILY_UTILIZED: { name: "heavily_utilized", variants: trackunitPalette.HEAVILY_UTILIZED },
-    IN_REPAIR: { name: "in_repair", variants: trackunitPalette.IN_REPAIR },
-    ON_RENT: { name: "on_rent", variants: trackunitPalette.ON_RENT },
-    OTHER_RENTAL_STATUS: { name: "other_rental_status", variants: trackunitPalette.OTHER_RENTAL_STATUS },
-    PICKUP_READY: { name: "pickup_ready", variants: trackunitPalette.PICKUP_READY },
-    RETURNED: { name: "returned", variants: trackunitPalette.RETURNED },
-    TRANSFER: { name: "transfer", variants: trackunitPalette.TRANSFER },
-    SITE: { name: "site", variants: trackunitPalette.SITE },
+/**
+ * A collection of all the tokens related to the named colors in the default theme.
+ */
+/**
+ * An object of all the Trackunit Theme colors and their available variants.
+ * These colors does not include the default tailwind colors.
+ */
+const themeColors = {
+    PRIMARY: { name: "primary", variants: trackunitPalette.PRIMARY },
+    SECONDARY: { name: "secondary", variants: trackunitPalette.SECONDARY },
+    ACCENT: { name: "accent", variants: trackunitPalette.ACCENT },
+    NEUTRAL: { name: "neutral", variants: trackunitPalette.NEUTRAL },
+    BLACK: { name: "black", variants: trackunitPalette.BLACK, defaultVariant: "DEFAULT" },
+    WHITE: { name: "white", variants: trackunitPalette.WHITE, defaultVariant: "DEFAULT" },
+    INFO: { name: "info", variants: trackunitPalette.INFO },
+    SUCCESS: { name: "success", variants: trackunitPalette.SUCCESS },
+    WARNING: { name: "warning", variants: trackunitPalette.WARNING },
+    DANGER: { name: "danger", variants: trackunitPalette.DANGER },
+    GOOD: { name: "good", variants: trackunitPalette.GOOD },
+    LOW: { name: "low", variants: trackunitPalette.LOW },
+    CRITICAL: { name: "critical", variants: trackunitPalette.CRITICAL },
+    WORKING: { name: "working", variants: trackunitPalette.WORKING },
+    IDLE: { name: "idle", variants: trackunitPalette.IDLE },
+    STOPPED: { name: "stopped", variants: trackunitPalette.STOPPED },
+    ACTIVE: { name: "active", variants: trackunitPalette.ACTIVE, defaultVariant: "DEFAULT" },
+    MOVING: { name: "moving", variants: trackunitPalette.MOVING, defaultVariant: "DEFAULT" },
+    UNKNOWN: { name: "unknown", variants: trackunitPalette.UNKNOWN },
+    AVAILABLE: { name: "available", variants: trackunitPalette.AVAILABLE },
+    UNUSED: { name: "unused", variants: trackunitPalette.UNUSED },
+    UTILIZED: { name: "utilized", variants: trackunitPalette.UTILIZED },
+    HEAVILY_UTILIZED: { name: "heavily_utilized", variants: trackunitPalette.HEAVILY_UTILIZED },
+    IN_REPAIR: { name: "in_repair", variants: trackunitPalette.IN_REPAIR },
+    ON_RENT: { name: "on_rent", variants: trackunitPalette.ON_RENT },
+    OTHER_RENTAL_STATUS: { name: "other_rental_status", variants: trackunitPalette.OTHER_RENTAL_STATUS },
+    PICKUP_READY: { name: "pickup_ready", variants: trackunitPalette.PICKUP_READY },
+    RETURNED: { name: "returned", variants: trackunitPalette.RETURNED },
+    TRANSFER: { name: "transfer", variants: trackunitPalette.TRANSFER },
+    SITE: { name: "site", variants: trackunitPalette.SITE },
 };
 
-const outputOptions = ["HEX", "CSS"];
-/**
- *
-Returns the color value in CSS or HEX format for a given theme color and variant.
- *
-@param ColorKey - A valid theme color name from the available ThemeColorKeys.
-@param {unknown} [arg2] - An optional argument that can be either an OutputOptions or a variant value.
-@param {unknown} [arg3] - An optional argument that can be either an OutputOptions or a variant value.
-@returns {string} - Returns a string containing the color value in CSS or HEX format for the provided arguments.
- */
-function color(ColorKey, arg2, arg3) {
-    var _a, _b;
-    const colorName = themeColors[ColorKey].name;
-    const colorVariants = themeColors[ColorKey].variants;
-    // defaultVariant or 600 or the "middel" value available.
-    const defaultVariant = (_b = (_a = themeColors[ColorKey].defaultVariant) !== null && _a !== void 0 ? _a : (colorVariants[600] && 600)) !== null && _b !== void 0 ? _b : Object.keys(colorVariants)[Math.floor(Object.keys(colorVariants).length / 2)];
-    let variant = defaultVariant;
-    let output = "CSS";
-    if (isOutputOption(arg2)) {
-        output = arg2;
-    }
-    else {
-        if (isOutputOption(arg3)) {
-            output = arg3;
-        }
-        if (isValidVariant(colorVariants, arg2)) {
-            variant = arg2;
-        }
-    }
-    const variableName = `--color-${colorName}-${String(variant)}`.replace(/[^a-zA-Z0-9]/g, "-");
-    if (output === "CSS") {
-        return colorVariableToCss(variableName);
-    }
-    else if (output === "HEX") {
-        return getHEX(variableName);
-    }
-    return colorName;
-}
-const isOutputOption = (something) => typeof something === "string" && outputOptions.includes(something);
+const outputOptions = ["HEX", "CSS"];
+/**
+ *
+Returns the color value in CSS or HEX format for a given theme color and variant.
+ *
+@param ColorKey - A valid theme color name from the available ThemeColorKeys.
+@param {unknown} [arg2] - An optional argument that can be either an OutputOptions or a variant value.
+@param {unknown} [arg3] - An optional argument that can be either an OutputOptions or a variant value.
+@returns {string} - Returns a string containing the color value in CSS or HEX format for the provided arguments.
+ */
+function color(ColorKey, arg2, arg3) {
+    var _a, _b;
+    const colorName = themeColors[ColorKey].name;
+    const colorVariants = themeColors[ColorKey].variants;
+    // defaultVariant or 600 or the "middel" value available.
+    const defaultVariant = (_b = (_a = themeColors[ColorKey].defaultVariant) !== null && _a !== void 0 ? _a : 
+    // @ts-ignore - suppressImplicitAnyIndexErrors
+    (colorVariants[600] && 600)) !== null && _b !== void 0 ? _b : Object.keys(colorVariants)[Math.floor(Object.keys(colorVariants).length / 2)];
+    let variant = defaultVariant;
+    let output = "CSS";
+    if (isOutputOption(arg2)) {
+        output = arg2;
+    }
+    else {
+        if (isOutputOption(arg3)) {
+            output = arg3;
+        }
+        if (isValidVariant(colorVariants, arg2)) {
+            variant = arg2;
+        }
+    }
+    const variableName = `--color-${colorName}-${String(variant)}`.replace(/[^a-zA-Z0-9]/g, "-");
+    if (output === "CSS") {
+        return colorVariableToCss(variableName);
+    }
+    else if (output === "HEX") {
+        return getHEX(variableName);
+    }
+    return colorName;
+}
+const isOutputOption = (something) => typeof something === "string" && outputOptions.includes(something);
 const isValidVariant = (availableVariants, something) => Boolean(availableVariants[something]);
 
-/**
- * A collection of all the tokens related to elevation in the theme.
- */
-const themeBoxShadow = {
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
-    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
-    none: "none",
-    active: "0px 0px 1px 1px rgba(26, 27, 28, 0.13), 0px 1px 1px rgba(26, 27, 28, 0.15)",
-};
-/**
- * Elevation is based on N100 with an alpha channel. E(X)A variants
- * are for active versions(e.g. hover).
- */
-const elevation = {
-    E05: themeBoxShadow.sm,
-    E10: themeBoxShadow.DEFAULT,
-    E10A: themeBoxShadow.md,
-    E20: themeBoxShadow.lg,
-    E30: themeBoxShadow.xl,
-    E40: themeBoxShadow["2xl"],
+/**
+ * A collection of all the tokens related to elevation in the theme.
+ */
+const themeBoxShadow = {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    none: "none",
+    active: "0px 0px 1px 1px rgba(26, 27, 28, 0.13), 0px 1px 1px rgba(26, 27, 28, 0.15)",
 };
-
-/**
- * A collection of all the tokens related to screen size in the theme.
- */
-const themeScreenSize = {
-    xs: "0px",
-    sm: "480px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1200px",
-    "2xl": "1600px",
-    "3xl": "1900px",
+/**
+ * Elevation is based on N100 with an alpha channel. E(X)A variants
+ * are for active versions(e.g. hover).
+ */
+const elevation = {
+    E05: themeBoxShadow.sm,
+    E10: themeBoxShadow.DEFAULT,
+    E10A: themeBoxShadow.md,
+    E20: themeBoxShadow.lg,
+    E30: themeBoxShadow.xl,
+    E40: themeBoxShadow["2xl"],
 };
 
-/**
- * A collection of all the tokens related to sizes in the theme.
- */
-const themeSpacing = {
-    px: "1px",
-    "0": "0px",
-    "0.5": "0.125rem",
-    "1": "0.25rem",
-    "1.5": "0.375rem",
-    "2": "0.5rem",
-    "2.5": "0.625rem",
-    "3": "0.75rem",
-    "3.5": "0.875rem",
-    "4": "1rem",
-    "5": "1.25rem",
-    "6": "1.5rem",
-    "7": "1.75rem",
-    "8": "2rem",
-    "9": "2.25rem",
-    "10": "2.5rem",
-    "11": "2.75rem",
-    "12": "3rem",
-    "14": "3.5rem",
-    "16": "4rem",
-    "20": "5rem",
-    "24": "6rem",
-    "28": "7rem",
-    "32": "8rem",
-    "36": "9rem",
-    "40": "10rem",
-    "44": "11rem",
-    "48": "12rem",
-    "52": "13rem",
-    "56": "14rem",
-    "60": "15rem",
-    "64": "16rem",
-    "72": "18rem",
-    "80": "20rem",
-    "96": "24rem",
-};
-const size = {
-    none: themeSpacing[0],
-    tiny: themeSpacing[1],
-    mini: themeSpacing[2],
-    small: themeSpacing[3],
-    medium: themeSpacing[4],
-    large: themeSpacing[6],
-    giant: themeSpacing[8],
-    enormous: themeSpacing[10],
+/**
+ * A collection of all the tokens related to screen size in the theme.
+ */
+const themeScreenSize = {
+    xs: "0px",
+    sm: "480px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1200px",
+    "2xl": "1600px",
+    "3xl": "1900px",
 };
 
-/**
- * A collection of all the tokens related to typography in the theme.
- */
-const themeFontSize = {
-    xs: "0.75rem",
-    sm: "0.875rem",
-    base: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem",
-    "5xl": "3rem",
-    "6xl": "3.75rem",
-    "7xl": "4.5rem",
-    "8xl": "6rem",
-    "9xl": "8rem",
-};
-const themeLineHeight = {
-    xs: "1rem",
-    sm: "1.25rem",
-    base: "1.5rem",
-    lg: "1.75rem",
-    xl: "1.75rem",
-    "2xl": "2rem",
-    "3xl": "2.25rem",
-    "4xl": "2.5rem",
-    "5xl": "2.75rem",
-    "6xl": "3rem",
-    "7xl": "3.25rem",
-    "8xl": "3.5rem",
-    "9xl": "3.75rem",
-};
-const themeFontWeight = {
-    thin: 100,
-    extralight: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    bold: 600,
-    extrabold: 700,
-    black: 800,
-};
-/**
- * Based on a root size of 16px.
- */
-const fontSize = {
-    primary: themeFontSize["3xl"],
-    secondary: themeFontSize.lg,
-    tertiary: themeFontSize.base,
-    subtitle: themeFontSize.base,
-    body: themeFontSize.sm,
-    small: themeFontSize.xs, // 12px
-};
-/**
- * Primary font weights.
- */
-const fontWeight = {
-    thin: themeFontWeight.thin,
-    extralight: themeFontWeight.extralight,
-    light: themeFontWeight.light,
-    normal: themeFontWeight.normal,
-    medium: themeFontWeight.medium,
-    bold: themeFontWeight.bold,
-    extrabold: themeFontWeight.extrabold,
-    black: themeFontWeight.black,
+/**
+ * A collection of all the tokens related to sizes in the theme.
+ */
+const themeSpacing = {
+    px: "1px",
+    "0": "0px",
+    "0.5": "0.125rem",
+    "1": "0.25rem",
+    "1.5": "0.375rem",
+    "2": "0.5rem",
+    "2.5": "0.625rem",
+    "3": "0.75rem",
+    "3.5": "0.875rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "9": "2.25rem",
+    "10": "2.5rem",
+    "11": "2.75rem",
+    "12": "3rem",
+    "14": "3.5rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem",
+    "28": "7rem",
+    "32": "8rem",
+    "36": "9rem",
+    "40": "10rem",
+    "44": "11rem",
+    "48": "12rem",
+    "52": "13rem",
+    "56": "14rem",
+    "60": "15rem",
+    "64": "16rem",
+    "72": "18rem",
+    "80": "20rem",
+    "96": "24rem",
+};
+const size = {
+    none: themeSpacing[0],
+    tiny: themeSpacing[1],
+    mini: themeSpacing[2],
+    small: themeSpacing[3],
+    medium: themeSpacing[4],
+    large: themeSpacing[6],
+    giant: themeSpacing[8],
+    enormous: themeSpacing[10],
 };
 
-const themeZIndex = {
-    hidden: -1,
-    default: 1,
-    top: 5,
-    overlay: 10,
-    popover: 20,
-    toast: 100,
-};
-const zIndex = {
-    hidden: themeZIndex.hidden,
-    default: themeZIndex.default,
-    top: themeZIndex.top,
-    overlay: themeZIndex.overlay,
-    popover: themeZIndex.popover,
-    toast: themeZIndex.toast,
+/**
+ * A collection of all the tokens related to typography in the theme.
+ */
+const themeFontSize = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+};
+const themeLineHeight = {
+    xs: "1rem",
+    sm: "1.25rem",
+    base: "1.5rem",
+    lg: "1.75rem",
+    xl: "1.75rem",
+    "2xl": "2rem",
+    "3xl": "2.25rem",
+    "4xl": "2.5rem",
+    "5xl": "2.75rem",
+    "6xl": "3rem",
+    "7xl": "3.25rem",
+    "8xl": "3.5rem",
+    "9xl": "3.75rem",
 };
+const themeFontWeight = {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    bold: 600,
+    extrabold: 700,
+    black: 800,
+};
+/**
+ * Based on a root size of 16px.
+ */
+const fontSize = {
+    primary: themeFontSize["3xl"],
+    secondary: themeFontSize.lg,
+    tertiary: themeFontSize.base,
+    subtitle: themeFontSize.base,
+    body: themeFontSize.sm,
+    small: themeFontSize.xs, // 12px
+};
+/**
+ * Primary font weights.
+ */
+const fontWeight = {
+    thin: themeFontWeight.thin,
+    extralight: themeFontWeight.extralight,
+    light: themeFontWeight.light,
+    normal: themeFontWeight.normal,
+    medium: themeFontWeight.medium,
+    bold: themeFontWeight.bold,
+    extrabold: themeFontWeight.extrabold,
+    black: themeFontWeight.black,
+};
+const fontFamily = `'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`;
 
-const tokens = {
-    size,
-    fontSize,
-    fontWeight,
-    elevation,
-    zIndex,
-    fontFamily: `'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
+const themeZIndex = {
+    hidden: -1,
+    default: 1,
+    top: 5,
+    overlay: 10,
+    popover: 20,
+    toast: 100,
+};
+const zIndex = {
+    hidden: themeZIndex.hidden,
+    default: themeZIndex.default,
+    top: themeZIndex.top,
+    overlay: themeZIndex.overlay,
+    popover: themeZIndex.popover,
+    toast: themeZIndex.toast,
 };
 
-export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, elevation, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeSpacing, themeZIndex, tokens, trackunitPalette, utilizationPalette, zIndex };
+export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, elevation, fontFamily, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeSpacing, themeZIndex, trackunitPalette, utilizationPalette, zIndex };