@freightos/icons 1.0.2 → 1.0.4

package/dist/esm/colors.js

@@ -5,54 +5,55 @@
  * to get autocomplete support for design system colors.
  *
  * @example
- * <IconSearch color="primary-blue" />
- * <IconUser color="semantic-red-40" />
- * <IconDashboard color="purple-10" />
+ * <IconSearch color="blue" />
+ * <IconError color="red" />
+ * <IconWarning color="yellow" />
+ * <IconSuccess color="green" />
  */
 /**
  * Maps Freightos design system color names to their hex values.
  * This can be used if you need the actual color values in your application.
  */
 export const FREIGHTOS_COLORS = {
-    // Primary Blues
-    "primary-blue-10": "#e1f5f9",
-    "primary-blue-20": "#ace8f0",
-    "primary-blue": "#2075bd",
-    "primary-blue-40": "#125c9b",
-    "primary-blue-50": "#05387d",
-    // Semantic Reds
-    "semantic-red-10": "#ffede1",
-    "semantic-red-20": "#fbbea4",
-    "semantic-red": "#d8271e",
-    "semantic-red-40": "#9b0f1f",
-    "semantic-red-50": "#670521",
-    // Semantic Yellows
-    "semantic-yellow-10": "#fef6cc",
-    "semantic-yellow-20": "#fdea9a",
-    "semantic-yellow": "#edaf07",
-    "semantic-yellow-30": "#dc9500",
-    "semantic-yellow-40": "#9c6b02",
-    "semantic-yellow-50": "#714601",
-    // Semantic Greens
-    "semantic-green-10": "#eafdea",
-    "semantic-green-20": "#bdf6c2",
-    "semantic-green": "#47a96e",
-    "semantic-green-40": "#237957",
-    "semantic-green-50": "#0d5143",
-    // Primary Grays
-    "primary-white": "#ffffff",
-    "primary-gray-05": "#fbfbfb",
-    "primary-gray-10": "#f6f6f6",
-    "primary-gray-20": "#e5e6e6",
-    "primary-gray-30": "#c6c7c7",
-    "primary-gray-40": "#afb2b2",
-    "primary-gray-50": "#999c9d",
-    "primary-gray-60": "#8a8d8f",
-    "primary-gray-70": "#6a6f73",
-    "primary-gray-80": "#53575f",
-    "primary-gray-90": "#3b3f4b",
-    "primary-gray": "#232537",
-    // Accent Colors
+    // Blues
+    "blue-10": "#e1f5f9",
+    "blue-20": "#ace8f0",
+    blue: "#2075bd",
+    "blue-40": "#125c9b",
+    "blue-50": "#05387d",
+    // Reds
+    "red-10": "#ffede1",
+    "red-20": "#fbbea4",
+    red: "#d8271e",
+    "red-40": "#9b0f1f",
+    "red-50": "#670521",
+    // Yellows
+    "yellow-10": "#fef6cc",
+    "yellow-20": "#fdea9a",
+    yellow: "#edaf07",
+    "yellow-30": "#dc9500",
+    "yellow-40": "#9c6b02",
+    "yellow-50": "#714601",
+    // Greens
+    "green-10": "#eafdea",
+    "green-20": "#bdf6c2",
+    green: "#47a96e",
+    "green-40": "#237957",
+    "green-50": "#0d5143",
+    // Grays
+    white: "#ffffff",
+    "gray-05": "#fbfbfb",
+    "gray-10": "#f6f6f6",
+    "gray-20": "#e5e6e6",
+    "gray-30": "#c6c7c7",
+    "gray-40": "#afb2b2",
+    "gray-50": "#999c9d",
+    "gray-60": "#8a8d8f",
+    "gray-70": "#6a6f73",
+    "gray-80": "#53575f",
+    "gray-90": "#3b3f4b",
+    gray: "#232537",
+    // Purples
     "purple-10": "#e7d8fc",
     purple: "#715397",
     // Special

package/dist/esm/icons/IconAddPerson.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAddPerson = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { d: "M19.273 9.546V6.818h-1.819v2.728h-2.727v1.818h2.727v2.727h1.819v-2.727H22V9.545h-2.727zm-10 2.727a3.635 3.635 0 003.636-3.637A3.635 3.635 0 009.273 5a3.635 3.635 0 00-3.637 3.636 3.635 3.635 0 003.637 3.637zm0-5.455c1 0 1.818.818 1.818 1.818s-.818 1.819-1.818 1.819-1.818-.819-1.818-1.819.818-1.818 1.818-1.818zm5.809 7.782a12.758 12.758 0 00-5.81-1.418c-2.3 0-4.281.636-5.808 1.418A2.7 2.7 0 002 17.018v2.528h14.546v-2.528a2.7 2.7 0 00-1.464-2.418zm-.355 3.127H3.818v-.709c0-.345.182-.654.473-.8A11.007 11.007 0 019.273 15c2.154 0 3.9.664 4.982 1.218a.883.883 0 01.472.8v.71z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAddPerson = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { d: "M19.273 9.546V6.818h-1.819v2.728h-2.727v1.818h2.727v2.727h1.819v-2.727H22V9.545h-2.727zm-10 2.727a3.635 3.635 0 003.636-3.637A3.635 3.635 0 009.273 5a3.635 3.635 0 00-3.637 3.636 3.635 3.635 0 003.637 3.637zm0-5.455c1 0 1.818.818 1.818 1.818s-.818 1.819-1.818 1.819-1.818-.819-1.818-1.819.818-1.818 1.818-1.818zm5.809 7.782a12.758 12.758 0 00-5.81-1.418c-2.3 0-4.281.636-5.808 1.418A2.7 2.7 0 002 17.018v2.528h14.546v-2.528a2.7 2.7 0 00-1.464-2.418zm-.355 3.127H3.818v-.709c0-.345.182-.654.473-.8A11.007 11.007 0 019.273 15c2.154 0 3.9.664 4.982 1.218a.883.883 0 01.472.8v.71z", fill: "currentColor" })));
+});
 IconAddPerson.displayName = 'IconAddPerson';

package/dist/esm/icons/IconAddressBook.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAddressBook = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17.626 6.376v12.936a.474.474 0 01-.138.341.499.499 0 01-.345.147H5.714a.498.498 0 01-.345-.146.474.474 0 01-.138-.341V4.687a.474.474 0 01.138-.34.498.498 0 01.345-.147h11.43c.13.003.253.055.344.146.09.092.14.214.138.341v1.689zM20 8.202a.415.415 0 01-.125.297.436.436 0 01-.303.124h-.714v2.25h.714a.44.44 0 01.304.125.419.419 0 01.124.298v1.406a.41.41 0 01-.124.298.432.432 0 01-.304.124h-.714v2.25h.714a.44.44 0 01.304.124.419.419 0 01.124.298v1.406a.415.415 0 01-.125.297.436.436 0 01-.303.124h-.714v1.689a1.642 1.642 0 01-.5 1.19 1.745 1.745 0 01-1.216.498H5.714a1.745 1.745 0 01-1.215-.498A1.658 1.658 0 014 19.312V4.688a1.659 1.659 0 01.499-1.19A1.745 1.745 0 015.714 3h11.43c.456.003.893.182 1.214.498.321.316.5.744.499 1.19v1.688h.713a.44.44 0 01.305.123.42.42 0 01.125.298v1.406-.001zm-7.462 2.148c0-.62-.518-1.126-1.153-1.126-.636 0-1.155.507-1.155 1.126 0 .62.52 1.126 1.155 1.126s1.154-.507 1.154-1.126h-.001zm2.307 5.063c-.113-.401-1.902-1.126-3.46-1.126-1.559 0-3.347.726-3.463 1.13v.557h6.925v-.561h-.002zM9.078 10.35a2.211 2.211 0 01.675-1.59c.214-.21.469-.375.749-.489a2.358 2.358 0 012.514.487c.214.21.384.457.5.73a2.201 2.201 0 01-.5 2.452 2.338 2.338 0 01-1.63.659 2.337 2.337 0 01-1.632-.659 2.221 2.221 0 01-.676-1.59zM6.77 15.413c0-1.497 3.075-2.25 4.616-2.25 1.54 0 4.615.753 4.615 2.25V17.1H6.77v-1.687z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAddressBook = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17.626 6.376v12.936a.474.474 0 01-.138.341.499.499 0 01-.345.147H5.714a.498.498 0 01-.345-.146.474.474 0 01-.138-.341V4.687a.474.474 0 01.138-.34.498.498 0 01.345-.147h11.43c.13.003.253.055.344.146.09.092.14.214.138.341v1.689zM20 8.202a.415.415 0 01-.125.297.436.436 0 01-.303.124h-.714v2.25h.714a.44.44 0 01.304.125.419.419 0 01.124.298v1.406a.41.41 0 01-.124.298.432.432 0 01-.304.124h-.714v2.25h.714a.44.44 0 01.304.124.419.419 0 01.124.298v1.406a.415.415 0 01-.125.297.436.436 0 01-.303.124h-.714v1.689a1.642 1.642 0 01-.5 1.19 1.745 1.745 0 01-1.216.498H5.714a1.745 1.745 0 01-1.215-.498A1.658 1.658 0 014 19.312V4.688a1.659 1.659 0 01.499-1.19A1.745 1.745 0 015.714 3h11.43c.456.003.893.182 1.214.498.321.316.5.744.499 1.19v1.688h.713a.44.44 0 01.305.123.42.42 0 01.125.298v1.406-.001zm-7.462 2.148c0-.62-.518-1.126-1.153-1.126-.636 0-1.155.507-1.155 1.126 0 .62.52 1.126 1.155 1.126s1.154-.507 1.154-1.126h-.001zm2.307 5.063c-.113-.401-1.902-1.126-3.46-1.126-1.559 0-3.347.726-3.463 1.13v.557h6.925v-.561h-.002zM9.078 10.35a2.211 2.211 0 01.675-1.59c.214-.21.469-.375.749-.489a2.358 2.358 0 012.514.487c.214.21.384.457.5.73a2.201 2.201 0 01-.5 2.452 2.338 2.338 0 01-1.63.659 2.337 2.337 0 01-1.632-.659 2.221 2.221 0 01-.676-1.59zM6.77 15.413c0-1.497 3.075-2.25 4.616-2.25 1.54 0 4.615.753 4.615 2.25V17.1H6.77v-1.687z", fill: "currentColor" })));
+});
 IconAddressBook.displayName = 'IconAddressBook';

package/dist/esm/icons/IconAi.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAi = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { d: "M11.2426 0.333496L10.479 2.00016L8.81835 2.75774L10.479 3.52138L11.2426 5.18198L12.0002 3.52138L13.6668 2.75774L12.0002 2.00016M5.18198 2.15168L3.66683 5.48501L0.333496 7.00016L3.66683 8.51531L5.18198 11.8486L6.69713 8.51531L10.0305 7.00016L6.69713 5.48501M11.2426 8.81835L10.479 10.479L8.81835 11.2426L10.479 12.0002L11.2426 13.6668L12.0002 12.0002L13.6668 11.2426L12.0002 10.479", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAi = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { d: "M11.2426 0.333496L10.479 2.00016L8.81835 2.75774L10.479 3.52138L11.2426 5.18198L12.0002 3.52138L13.6668 2.75774L12.0002 2.00016M5.18198 2.15168L3.66683 5.48501L0.333496 7.00016L3.66683 8.51531L5.18198 11.8486L6.69713 8.51531L10.0305 7.00016L6.69713 5.48501M11.2426 8.81835L10.479 10.479L8.81835 11.2426L10.479 12.0002L11.2426 13.6668L12.0002 12.0002L13.6668 11.2426L12.0002 10.479", fill: "currentColor" })));
+});
 IconAi.displayName = 'IconAi';

package/dist/esm/icons/IconAirplaneLanding.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAirplaneLanding = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { d: "M2 19.895h20V22H2v-2.105zm7.558-6.032l4.579 1.221 5.59 1.495a1.588 1.588 0 001.936-1.116 1.593 1.593 0 00-1.116-1.937l-5.59-1.494-2.904-9.506L10.02 2v8.716l-5.232-1.4-.978-2.442-1.527-.41v5.441l1.684.453 5.59 1.505z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAirplaneLanding = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { d: "M2 19.895h20V22H2v-2.105zm7.558-6.032l4.579 1.221 5.59 1.495a1.588 1.588 0 001.936-1.116 1.593 1.593 0 00-1.116-1.937l-5.59-1.494-2.904-9.506L10.02 2v8.716l-5.232-1.4-.978-2.442-1.527-.41v5.441l1.684.453 5.59 1.505z", fill: "currentColor" })));
+});
 IconAirplaneLanding.displayName = 'IconAirplaneLanding';

package/dist/esm/icons/IconAirplaneTakeoff.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAirplaneTakeoff = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { d: "M2.65 19.705h18.74V22H2.65v-2.295zm19.3-10.74c-.206-.918-1.025-1.469-1.814-1.216L14.9 9.379 8.095 2l-1.904.585 4.083 8.227-4.901 1.527L3.43 10.57 2 11.02l2.554 5.152s7.022-2.18 16.341-5.083c.8-.264 1.263-1.205 1.056-2.123z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAirplaneTakeoff = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { d: "M2.65 19.705h18.74V22H2.65v-2.295zm19.3-10.74c-.206-.918-1.025-1.469-1.814-1.216L14.9 9.379 8.095 2l-1.904.585 4.083 8.227-4.901 1.527L3.43 10.57 2 11.02l2.554 5.152s7.022-2.18 16.341-5.083c.8-.264 1.263-1.205 1.056-2.123z", fill: "currentColor" })));
+});
 IconAirplaneTakeoff.displayName = 'IconAirplaneTakeoff';

package/dist/esm/icons/IconAirport.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAirport = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.372 5.699c.452-.163.92.191 1.038.782.119.59-.146 1.196-.603 1.366-5.33 1.867-9.346 3.27-9.346 3.27L2 7.802l.818-.287 1.11 1.136 2.804-.981-2.335-5.294L5.486 2l3.891 4.747 2.995-1.048zM20 11.217l1-2.157-1-1.079h-2V5.825h-1V7.98h-2l-1 1.08 1 2.156h5zM22 22v-2.157h-2v-7.548h-5v7.548H2V22h20z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAirport = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.372 5.699c.452-.163.92.191 1.038.782.119.59-.146 1.196-.603 1.366-5.33 1.867-9.346 3.27-9.346 3.27L2 7.802l.818-.287 1.11 1.136 2.804-.981-2.335-5.294L5.486 2l3.891 4.747 2.995-1.048zM20 11.217l1-2.157-1-1.079h-2V5.825h-1V7.98h-2l-1 1.08 1 2.156h5zM22 22v-2.157h-2v-7.548h-5v7.548H2V22h20z", fill: "currentColor" })));
+});
 IconAirport.displayName = 'IconAirport';

package/dist/esm/icons/IconAirportArrival.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAirportArrival = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.323 9.28c.475.132.703.687.507 1.228-.196.542-.734.872-1.218.743-5.59-1.596-9.799-2.802-9.799-2.802l.408-3.498.858.244.392 1.553 2.94.84L16.06 2l1.139.33.984 6.053 3.14.898zM4 11.715L3 9.657 4 8.63h2V6.57h1v2.06h2l1 1.028-1 2.057H4zM2 22v-2.057h2v-7.2h5v7.2h13V22H2z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAirportArrival = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.323 9.28c.475.132.703.687.507 1.228-.196.542-.734.872-1.218.743-5.59-1.596-9.799-2.802-9.799-2.802l.408-3.498.858.244.392 1.553 2.94.84L16.06 2l1.139.33.984 6.053 3.14.898zM4 11.715L3 9.657 4 8.63h2V6.57h1v2.06h2l1 1.028-1 2.057H4zM2 22v-2.057h2v-7.2h5v7.2h13V22H2z", fill: "currentColor" })));
+});
 IconAirportArrival.displayName = 'IconAirportArrival';

package/dist/esm/icons/IconAlarm.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAlarm = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.505 8.137h-1.508v5.943l4.774 2.823.754-1.218-4.02-2.348v-5.2zM17.37 2L22 5.811l-1.29 1.523-4.63-3.811L17.37 2zM6.63 2l1.29 1.523-4.63 3.811L2 5.848 6.63 2zM12 4.17c-1.79 0-3.54.522-5.028 1.502A8.946 8.946 0 003.64 9.673a8.792 8.792 0 00-.515 5.151 8.875 8.875 0 002.477 4.565 9.093 9.093 0 004.634 2.44 9.177 9.177 0 005.228-.508 9.022 9.022 0 004.062-3.283 8.821 8.821 0 001.525-4.953A8.849 8.849 0 0018.4 6.78 9.12 9.12 0 0012 4.169zm0 15.854a7.12 7.12 0 01-3.915-1.166 6.962 6.962 0 01-2.598-3.113 6.843 6.843 0 01-.404-4.01A6.908 6.908 0 017.01 8.181a7.077 7.077 0 013.607-1.901 7.142 7.142 0 014.07.393A7.022 7.022 0 0117.85 9.23a6.866 6.866 0 011.187 3.856c0 1.839-.74 3.603-2.06 4.904A7.098 7.098 0 0112 20.024z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAlarm = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.505 8.137h-1.508v5.943l4.774 2.823.754-1.218-4.02-2.348v-5.2zM17.37 2L22 5.811l-1.29 1.523-4.63-3.811L17.37 2zM6.63 2l1.29 1.523-4.63 3.811L2 5.848 6.63 2zM12 4.17c-1.79 0-3.54.522-5.028 1.502A8.946 8.946 0 003.64 9.673a8.792 8.792 0 00-.515 5.151 8.875 8.875 0 002.477 4.565 9.093 9.093 0 004.634 2.44 9.177 9.177 0 005.228-.508 9.022 9.022 0 004.062-3.283 8.821 8.821 0 001.525-4.953A8.849 8.849 0 0018.4 6.78 9.12 9.12 0 0012 4.169zm0 15.854a7.12 7.12 0 01-3.915-1.166 6.962 6.962 0 01-2.598-3.113 6.843 6.843 0 01-.404-4.01A6.908 6.908 0 017.01 8.181a7.077 7.077 0 013.607-1.901 7.142 7.142 0 014.07.393A7.022 7.022 0 0117.85 9.23a6.866 6.866 0 011.187 3.856c0 1.839-.74 3.603-2.06 4.904A7.098 7.098 0 0112 20.024z", fill: "currentColor" })));
+});
 IconAlarm.displayName = 'IconAlarm';

package/dist/esm/icons/IconAlertCircled.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAlertCircled = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.003 14.991h2.002v1.994h-2.002v-1.994zm0-7.998h2.002v5.996h-2.002V6.993zM12 2a10 10 0 1010 9.992A9.987 9.987 0 0012 2zm0 17.991a7.998 7.998 0 117.998-7.998A7.991 7.991 0 0112 19.99z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAlertCircled = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.003 14.991h2.002v1.994h-2.002v-1.994zm0-7.998h2.002v5.996h-2.002V6.993zM12 2a10 10 0 1010 9.992A9.987 9.987 0 0012 2zm0 17.991a7.998 7.998 0 117.998-7.998A7.991 7.991 0 0112 19.99z", fill: "currentColor" })));
+});
 IconAlertCircled.displayName = 'IconAlertCircled';

package/dist/esm/icons/IconAmazon.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconAmazon = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { d: "M15.827 18.09a.548.548 0 01-.633.06c-.894-.74-1.055-1.08-1.547-1.79-1.476 1.5-2.521 1.95-4.44 1.95-2.26 0-4.028-1.39-4.028-4.17 0-2.18 1.176-3.64 2.873-4.38 1.467-.64 3.506-.76 5.063-.93V8.5c0-.66.05-1.41-.332-1.96-.321-.49-.954-.7-1.506-.7-1.025 0-1.939.53-2.16 1.61-.05.24-.251.48-.472.49l-2.612-.28c-.22-.05-.462-.22-.402-.56C6.234 3.95 9.097 3 11.658 3c1.306 0 3.014.35 4.048 1.33 1.306 1.22 1.196 2.85 1.196 4.62v4.17c0 1.25.502 1.81 1.004 2.48.17.25.211.54 0 .71l-2.07 1.78h-.01zm-2.712-6.53V11c-1.949 0-4.008.39-4.008 2.67 0 1.16.613 1.95 1.637 1.95.764 0 1.437-.47 1.869-1.22.522-.93.502-1.8.502-2.84zm6.96 8.98C17.907 22.14 14.713 23 11.98 23c-3.827 0-7.283-1.41-9.894-3.76-.201-.18-.02-.43.25-.29 2.793 1.63 6.279 2.61 9.875 2.61 2.42 0 5.092-.5 7.543-1.53.372-.16.663.24.322.51zm.915-1.04c-.281-.36-1.858-.17-2.582-.08-.19.02-.22-.16-.03-.3 1.246-.88 3.305-.62 3.546-.33.241.3-.07 2.35-1.245 3.32-.181.16-.352.07-.262-.11.261-.67.854-2.14.573-2.5z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconAmazon = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { d: "M15.827 18.09a.548.548 0 01-.633.06c-.894-.74-1.055-1.08-1.547-1.79-1.476 1.5-2.521 1.95-4.44 1.95-2.26 0-4.028-1.39-4.028-4.17 0-2.18 1.176-3.64 2.873-4.38 1.467-.64 3.506-.76 5.063-.93V8.5c0-.66.05-1.41-.332-1.96-.321-.49-.954-.7-1.506-.7-1.025 0-1.939.53-2.16 1.61-.05.24-.251.48-.472.49l-2.612-.28c-.22-.05-.462-.22-.402-.56C6.234 3.95 9.097 3 11.658 3c1.306 0 3.014.35 4.048 1.33 1.306 1.22 1.196 2.85 1.196 4.62v4.17c0 1.25.502 1.81 1.004 2.48.17.25.211.54 0 .71l-2.07 1.78h-.01zm-2.712-6.53V11c-1.949 0-4.008.39-4.008 2.67 0 1.16.613 1.95 1.637 1.95.764 0 1.437-.47 1.869-1.22.522-.93.502-1.8.502-2.84zm6.96 8.98C17.907 22.14 14.713 23 11.98 23c-3.827 0-7.283-1.41-9.894-3.76-.201-.18-.02-.43.25-.29 2.793 1.63 6.279 2.61 9.875 2.61 2.42 0 5.092-.5 7.543-1.53.372-.16.663.24.322.51zm.915-1.04c-.281-.36-1.858-.17-2.582-.08-.19.02-.22-.16-.03-.3 1.246-.88 3.305-.62 3.546-.33.241.3-.07 2.35-1.245 3.32-.181.16-.352.07-.262-.11.261-.67.854-2.14.573-2.5z", fill: "currentColor" })));
+});
 IconAmazon.displayName = 'IconAmazon';

package/dist/esm/icons/IconArchive.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconArchive = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20.543 5.25l-1.395-1.702A1.448 1.448 0 0018 3H6a1.5 1.5 0 00-1.162.548L3.458 5.25A2.01 2.01 0 003 6.503v12.494A2.01 2.01 0 005.003 21h13.994A2.01 2.01 0 0021 18.997V6.503a2.01 2.01 0 00-.457-1.253zM6.24 5.003h11.52l.81.997H5.437l.803-.997zM5.003 18.997V8.003h13.994v10.994H5.003zm8.445-9h-2.896v3h-2.55L12 17.004l3.998-4.005h-2.55v-3z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconArchive = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20.543 5.25l-1.395-1.702A1.448 1.448 0 0018 3H6a1.5 1.5 0 00-1.162.548L3.458 5.25A2.01 2.01 0 003 6.503v12.494A2.01 2.01 0 005.003 21h13.994A2.01 2.01 0 0021 18.997V6.503a2.01 2.01 0 00-.457-1.253zM6.24 5.003h11.52l.81.997H5.437l.803-.997zM5.003 18.997V8.003h13.994v10.994H5.003zm8.445-9h-2.896v3h-2.55L12 17.004l3.998-4.005h-2.55v-3z", fill: "currentColor" })));
+});
 IconArchive.displayName = 'IconArchive';

package/dist/esm/icons/IconArrowBack.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconArrowBack = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 11.003H7.831l5.586-5.593L12 4l-8 8 8 8 1.41-1.41-5.579-5.593H20v-1.994z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconArrowBack = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 11.003H7.831l5.586-5.593L12 4l-8 8 8 8 1.41-1.41-5.579-5.593H20v-1.994z", fill: "currentColor" })));
+});
 IconArrowBack.displayName = 'IconArrowBack';

package/dist/esm/icons/IconArrowForward.js

@@ -1,17 +1,21 @@
 import React, { forwardRef } from 'react';
-export const IconArrowForward = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("g", { "clip-path": "url(#clip0_805_28001)" },
-        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.998 3.998l-1.41 1.41L16.166 11H3.998v1.995h12.168l-5.578 5.593 1.41 1.41 8-8-8-8z", fill: "currentColor" })),
-    React.createElement("defs", null,
-        React.createElement("clipPath", { id: "clip0_805_28001" },
-            React.createElement("path", { fill: "currentColor", d: "M0 0h24v24H0z" }))))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconArrowForward = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("g", { "clip-path": "url(#clip0_805_28001)" },
+            React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.998 3.998l-1.41 1.41L16.166 11H3.998v1.995h12.168l-5.578 5.593 1.41 1.41 8-8-8-8z", fill: "currentColor" })),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: "clip0_805_28001" },
+                React.createElement("path", { fill: "currentColor", d: "M0 0h24v24H0z" })))));
+});
 IconArrowForward.displayName = 'IconArrowForward';

package/dist/esm/icons/IconArrowSmallDown.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconArrowSmallDown = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6 9l6 6 6-6H6z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconArrowSmallDown = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6 9l6 6 6-6H6z", fill: "currentColor" })));
+});
 IconArrowSmallDown.displayName = 'IconArrowSmallDown';

package/dist/esm/icons/IconArrowSmallLeft.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-export const IconArrowSmallLeft = forwardRef(({ size = '1em', color = 'currentColor', strokeWidth, style, ...props }, ref) => (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: color, style: {
-        width: size,
-        height: size,
-        minWidth: size,
-        minHeight: size,
-        flexShrink: 0,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...style,
-    }, ...props },
-    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.498 6l-6 6 6 6V6z", fill: "currentColor" }))));
+import { FREIGHTOS_COLORS } from '../colors';
+export const IconArrowSmallLeft = forwardRef(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in FREIGHTOS_COLORS ? FREIGHTOS_COLORS[color] : color;
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: resolvedColor, style: {
+            width: size,
+            height: size,
+            minWidth: size,
+            minHeight: size,
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            ...style,
+        }, ...props },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.498 6l-6 6 6 6V6z", fill: "currentColor" })));
+});
 IconArrowSmallLeft.displayName = 'IconArrowSmallLeft';