@freightos/icons 1.0.12 → 1.0.16

package/README.md

@@ -1,10 +1,12 @@
-# Freightos Icons
+# @freightos/icons
 
-A comprehensive icon library with 213 SVG icons designed for Freightos applications. Built with React, TypeScript, and developer experience in mind.
+A comprehensive icon library with 217 SVG icons designed for Freightos applications. Built with React, TypeScript, and developer experience in mind.
+
+This package lives inside the [FreightWind](https://freightwind.freightos.com) monorepo at `packages/icons/`.
 
 ## Features
 
-- 🎨 **213 Icons** - Complete set of professionally designed icons
+- 🎨 **217 Icons** - Complete set of professionally designed icons
 - 📦 **Tree-shakeable** - Import only what you need
 - 🔷 **TypeScript First** - Full type definitions included
 - ⚡ **Dual Format** - Both ESM and CJS builds included
@@ -24,6 +26,8 @@ yarn add @freightos/icons
 pnpm add @freightos/icons
 ```
 
+> **Monorepo users:** Within the FreightWind repo, icons are linked via `workspace:*` — no install needed.
+
 ## Usage Guide
 
 ### Basic Usage
@@ -127,8 +131,8 @@ The following Freightos design system colors are available with autocomplete sup
 
 ```tsx
 // With click handler
-<IconSearch 
-  onClick={() => console.log('Search clicked')} 
+<IconSearch
+  onClick={() => console.log('Search clicked')}
   className="cursor-pointer"
 />
 
@@ -196,53 +200,6 @@ function Navigation() {
 }
 ```
 
-### Type-Safe Component Props
-
-```typescript
-import { Icon } from '@freightos/icons';
-
-interface ButtonProps {
-  label: string;
-  icon: Icon;
-  onClick: () => void;
-}
-
-function IconButton({ label, icon: IconComponent, onClick }: ButtonProps) {
-  return (
-    <button onClick={onClick}>
-      <IconComponent size={20} />
-      {label}
-    </button>
-  );
-}
-
-// Usage
-<IconButton 
-  icon={IconSearch} 
-  label="Search" 
-  onClick={() => console.log('clicked')} 
-/>
-```
-
-### Configuration Objects
-
-```typescript
-import { Icon, IconDashboard, IconSettings, IconUser } from '@freightos/icons';
-
-interface MenuItem {
-  id: string;
-  label: string;
-  icon: Icon;
-  badge?: number;
-}
-
-const menuConfig: MenuItem[] = [
-  { id: '1', label: 'Dashboard', icon: IconDashboard },
-  { id: '2', label: 'Settings', icon: IconSettings },
-  { id: '3', label: 'Profile', icon: IconUser, badge: 5 },
-];
-```
-
 ### Dynamic Icon Selection
 
 ```typescript
@@ -256,82 +213,19 @@ const iconMap: Record<string, Icon> = {
 
 function DynamicIcon({ name }: { name: string }) {
   const IconComponent = iconMap[name];
-  
+
   if (!IconComponent) {
     console.warn(`Icon "${name}" not found`);
     return null;
   }
-  
-  return <IconComponent size={24} />;
-}
-
-// Usage
-<DynamicIcon name="search" />
-<DynamicIcon name="user" />
-```
-
-## Styling with CSS Frameworks
-
-### Tailwind CSS
 
-```tsx
-// Size with Tailwind
-<IconSearch className="w-6 h-6" />
-<IconSearch className="w-8 h-8" />
-
-// Color with Tailwind
-<IconSearch className="text-blue-500" />
-<IconSearch className="text-red-600" />
-
-// Responsive
-<IconSearch className="w-4 h-4 md:w-6 md:h-6 lg:w-8 lg:h-8" />
-
-// Dark mode
-<IconSearch className="text-gray-900 dark:text-gray-100" />
-
-// Interactive states
-<IconSearch className="text-gray-600 hover:text-blue-500 active:text-blue-700 transition-colors" />
-
-// In a button
-<button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
-  <IconSearch className="w-5 h-5" />
-  <span>Search</span>
-</button>
-```
-
-### Custom CSS
-
-```css
-.icon-primary {
-  width: 24px;
-  height: 24px;
-  color: var(--color-primary);
-}
-
-.icon-large {
-  width: 48px;
-  height: 48px;
-}
-
-.icon-interactive {
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.icon-interactive:hover {
-  color: var(--color-primary);
+  return <IconComponent size={24} />;
 }
 ```
 
-```tsx
-<IconSearch className="icon-primary" />
-<IconUser className="icon-large" />
-<IconDashboard className="icon-interactive" />
-```
-
 ## Available Icons
 
-All 213 icons are available, organized by category:
+All 217 icons are available, organized by category:
 
 - **Navigation**: Search, MenuOpen, MenuClose, ArrowBack, ArrowForward, CaretUp, CaretDown, etc.
 - **Actions**: Edit, Trash, Save, Copy, Check, Close, Plus, Minus, Refresh, etc.
@@ -344,7 +238,7 @@ All 213 icons are available, organized by category:
 - **Interface**: Dashboard, Settings, Filter, List, Grid, Table, Tile, etc.
 - **Logistics**: Container, Box, Pallet, Crate, Customs, Insurance, Port, etc.
 
-See your IDE's autocomplete for the complete list of all 213 icons.
+See your IDE's autocomplete for the complete list of all 217 icons.
 
 ## Icon Naming Convention
 
@@ -358,11 +252,11 @@ Icons follow a consistent naming pattern:
 
 ### Adding New Icons
 
-1. Add your SVG file to the `svg/` directory (use kebab-case naming: `my-icon.svg`)
+1. Add your SVG file to `packages/icons/svg/` (use kebab-case naming: `my-icon.svg`)
 2. Generate React components:
 
 ```bash
-npm run generate
+pnpm --filter @freightos/icons run generate
 ```
 
 This will:
@@ -373,32 +267,33 @@ This will:
 3. Build the package:
 
 ```bash
-npm run build
+pnpm --filter @freightos/icons run build
 ```
 
 ### Available Scripts
 
 ```bash
 # Generate icons from SVG files
-npm run generate
+pnpm --filter @freightos/icons run generate
 
 # Build all formats (ESM + CJS + Types)
-npm run build
+pnpm --filter @freightos/icons run build
 
-# Build ESM only
-npm run build:esm
+# Generate and build in one command
+pnpm --filter @freightos/icons run dev
 
-# Build CJS only
-npm run build:cjs
+# Clean build output
+pnpm --filter @freightos/icons run clean
+```
 
-# Build type definitions only
-npm run build:types
+### Publishing
 
-# Clean build output
-npm run clean
+The package is published to npm as `@freightos/icons`:
 
-# Generate and build in one command
-npm run dev
+```bash
+pnpm --filter @freightos/icons run release:patch   # 1.0.12 → 1.0.13
+pnpm --filter @freightos/icons run release:minor   # 1.0.12 → 1.1.0
+pnpm --filter @freightos/icons run release:major   # 1.0.12 → 2.0.0
 ```
 
 ## Maintainer

package/dist/cjs/colors.js

@@ -5,11 +5,13 @@
  * These color tokens can be used with the `color` prop on any icon component
  * to get autocomplete support for design system colors.
  *
+ * Names match the FDS token convention (e.g. `blue-30` = primary blue).
+ *
  * @example
- * <IconSearch color="blue" />
- * <IconError color="red" />
- * <IconWarning color="yellow" />
- * <IconSuccess color="green" />
+ * <IconSearch color="blue-30" />
+ * <IconError color="red-30" />
+ * <IconWarning color="yellow-30" />
+ * <IconSuccess color="green-30" />
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FREIGHTOS_COLORS = void 0;
@@ -19,28 +21,29 @@ exports.FREIGHTOS_COLORS = void 0;
  */
 exports.FREIGHTOS_COLORS = {
     // Blues
+    "blue-05": "#b0cee8",
     "blue-10": "#e1f5f9",
     "blue-20": "#ace8f0",
-    blue: "#2075bd",
+    "blue-30": "#2075bd",
     "blue-40": "#125c9b",
     "blue-50": "#05387d",
     // Reds
     "red-10": "#ffede1",
     "red-20": "#fbbea4",
-    red: "#d8271e",
+    "red-30": "#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",
+    "yellow-30": "#edaf07",
+    "yellow-40": "#dc9500",
+    "yellow-50": "#9c6b02",
+    "yellow-60": "#714601",
     // Greens
     "green-10": "#eafdea",
     "green-20": "#bdf6c2",
-    green: "#47a96e",
+    "green-30": "#47a96e",
     "green-40": "#237957",
     "green-50": "#0d5143",
     // Grays
@@ -55,10 +58,10 @@ exports.FREIGHTOS_COLORS = {
     "gray-70": "#6a6f73",
     "gray-80": "#53575f",
     "gray-90": "#3b3f4b",
-    gray: "#232537",
+    "gray-100": "#232537",
     // Purples
-    "purple-10": "#e7d8fc",
-    purple: "#715397",
+    "purple-1": "#715397",
+    "purple-2": "#e7d8fc",
     // Special
     transparent: "transparent",
 };

package/dist/cjs/icons/IconArrowForward.js

@@ -48,7 +48,7 @@ exports.IconArrowForward = (0, react_1.forwardRef)(({ size = '1em', color = 'cur
             verticalAlign: 'middle',
             ...style,
         }, ...props },
-        react_1.default.createElement("g", { "clip-path": "url(#clip0_805_28001)" },
+        react_1.default.createElement("g", { clipPath: "url(#clip0_805_28001)" },
             react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "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_1.default.createElement("defs", null,
             react_1.default.createElement("clipPath", { id: "clip0_805_28001" },

package/dist/cjs/icons/IconArrowLeft.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconArrowLeft = void 0;
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../colors");
+exports.IconArrowLeft = (0, react_1.forwardRef)(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in colors_1.FREIGHTOS_COLORS ? colors_1.FREIGHTOS_COLORS[color] : color;
+    return (react_1.default.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_1.default.createElement("line", { x1: "19", y1: "12", x2: "5", y2: "12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+        react_1.default.createElement("polyline", { points: "12 19 5 12 12 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+});
+exports.IconArrowLeft.displayName = 'IconArrowLeft';

package/dist/cjs/icons/IconArrowRight.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconArrowRight = void 0;
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../colors");
+exports.IconArrowRight = (0, react_1.forwardRef)(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in colors_1.FREIGHTOS_COLORS ? colors_1.FREIGHTOS_COLORS[color] : color;
+    return (react_1.default.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_1.default.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+        react_1.default.createElement("polyline", { points: "12 5 19 12 12 19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+});
+exports.IconArrowRight.displayName = 'IconArrowRight';

package/dist/cjs/icons/IconBlock.js

@@ -48,7 +48,7 @@ exports.IconBlock = (0, react_1.forwardRef)(({ size = '1em', color = 'currentCol
             verticalAlign: 'middle',
             ...style,
         }, ...props },
-        react_1.default.createElement("g", { "clip-path": "url(#clip0_805_27957)" },
+        react_1.default.createElement("g", { clipPath: "url(#clip0_805_27957)" },
             react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2a10 10 0 100 20 10 10 0 000-20zM3.995 12A8.004 8.004 0 0112 3.995a7.87 7.87 0 014.899 1.696L5.69 16.899A7.87 7.87 0 013.995 12zM12 20.005a7.87 7.87 0 01-4.899-1.696L18.31 7.101A7.87 7.87 0 0120.004 12 8.004 8.004 0 0112 20.005z", fill: "currentColor" })),
         react_1.default.createElement("defs", null,
             react_1.default.createElement("clipPath", { id: "clip0_805_27957" },

package/dist/cjs/icons/IconCall.js

@@ -48,7 +48,7 @@ exports.IconCall = (0, react_1.forwardRef)(({ size = '1em', color = 'currentColo
             verticalAlign: 'middle',
             ...style,
         }, ...props },
-        react_1.default.createElement("g", { "clip-path": "url(#clip0_805_27887)" },
+        react_1.default.createElement("g", { clipPath: "url(#clip0_805_27887)" },
             react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.933 4.225c.065.973.232 1.937.5 2.875L5.1 8.433a16.333 16.333 0 01-.833-4.208h1.666zm10.959 13.333c.94.266 1.907.434 2.883.5v1.667c-1.435-.1-2.851-.38-4.217-.833l1.334-1.325v-.009zM7 2H3.108A1.117 1.117 0 002 3.108 18.892 18.892 0 0020.892 22 1.117 1.117 0 0022 20.892V17a1.117 1.117 0 00-1.108-1.108c-1.348 0-2.687-.214-3.967-.634a.99.99 0 00-.35-.058 1.14 1.14 0 00-.783.325l-2.45 2.442a16.825 16.825 0 01-7.317-7.317L8.467 8.2a1.108 1.108 0 00.275-1.133A12.67 12.67 0 018.108 3.1 1.117 1.117 0 007 2z", fill: "currentColor" })),
         react_1.default.createElement("defs", null,
             react_1.default.createElement("clipPath", { id: "clip0_805_27887" },

package/dist/cjs/icons/IconChooseList.js

@@ -50,8 +50,8 @@ exports.IconChooseList = (0, react_1.forwardRef)(({ size = '1em', color = 'curre
         }, ...props },
         react_1.default.createElement("defs", null,
             react_1.default.createElement("clipPath", { id: "a" },
-                react_1.default.createElement("path", { fill: "currentColor", d: "M8.4 0c.968 0 1.794.338 2.476 1.012a3.318 3.318 0 011.024 2.45 3.274 3.274 0 01-.7 2.042l2.8 2.77-.735.726-2.8-2.77c-.303.232-.63.405-.98.52-.35.115-.712.173-1.085.173-.968 0-1.794-.337-2.476-1.012A3.318 3.318 0 014.9 3.46c0-.957.341-1.773 1.024-2.448C6.606.338 7.432 0 8.4 0zM7 7.962V9H0V7.962h7zm1.4-6.924c-.677 0-1.254.237-1.732.71a2.322 2.322 0 00-.718 1.714c0 .669.24 1.24.718 1.713.478.473 1.055.71 1.732.71s1.254-.237 1.732-.71a2.322 2.322 0 00.718-1.713c0-.67-.24-1.24-.717-1.714a2.374 2.374 0 00-1.733-.71zM3.5 4.327v1.038H0V4.327h3.5zm0-3.635v1.039H0V.692h3.5z" }))),
-        react_1.default.createElement("g", { "clip-path": "url(#a)", transform: "translate(1 3)" },
-            react_1.default.createElement("path", { fill: "currentColor", d: "M0 0h14v9H0V0z" }))));
+                react_1.default.createElement("path", { fill: "none", d: "M8.4 0c.968 0 1.794.338 2.476 1.012a3.318 3.318 0 011.024 2.45 3.274 3.274 0 01-.7 2.042l2.8 2.77-.735.726-2.8-2.77c-.303.232-.63.405-.98.52-.35.115-.712.173-1.085.173-.968 0-1.794-.337-2.476-1.012A3.318 3.318 0 014.9 3.46c0-.957.341-1.773 1.024-2.448C6.606.338 7.432 0 8.4 0zM7 7.962V9H0V7.962h7zm1.4-6.924c-.677 0-1.254.237-1.732.71a2.322 2.322 0 00-.718 1.714c0 .669.24 1.24.718 1.713.478.473 1.055.71 1.732.71s1.254-.237 1.732-.71a2.322 2.322 0 00.718-1.713c0-.67-.24-1.24-.717-1.714a2.374 2.374 0 00-1.733-.71zM3.5 4.327v1.038H0V4.327h3.5zm0-3.635v1.039H0V.692h3.5z" }))),
+        react_1.default.createElement("g", { clipPath: "url(#a)", transform: "translate(1 3)" },
+            react_1.default.createElement("path", { fill: "none", d: "M0 0h14v9H0V0z" }))));
 });
 exports.IconChooseList.displayName = 'IconChooseList';

package/dist/cjs/icons/IconCircleCheck.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconCircleCheck = void 0;
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../colors");
+exports.IconCircleCheck = (0, react_1.forwardRef)(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in colors_1.FREIGHTOS_COLORS ? colors_1.FREIGHTOS_COLORS[color] : color;
+    return (react_1.default.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_1.default.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
+        react_1.default.createElement("path", { fill: "none", d: "M9 12l2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+});
+exports.IconCircleCheck.displayName = 'IconCircleCheck';

package/dist/cjs/icons/IconCloseCircle.js

@@ -48,6 +48,6 @@ exports.IconCloseCircle = (0, react_1.forwardRef)(({ size = '1em', color = 'curr
             verticalAlign: 'middle',
             ...style,
         }, ...props },
-        react_1.default.createElement("path", { fill: "currentColor", d: "M21.66 12.23l-1.89-1.89L16 14.11l-3.77-3.77-1.89 1.89L14.11 16l-3.77 3.77 1.89 1.89L16 17.89l3.77 3.77 1.89-1.89L17.89 16zM16 2.67A13.33 13.33 0 1029.33 16 13.33 13.33 0 0016 2.67z", fillRule: "evenodd" })));
+        react_1.default.createElement("path", { fill: "none", d: "M21.66 12.23l-1.89-1.89L16 14.11l-3.77-3.77-1.89 1.89L14.11 16l-3.77 3.77 1.89 1.89L16 17.89l3.77 3.77 1.89-1.89L17.89 16zM16 2.67A13.33 13.33 0 1029.33 16 13.33 13.33 0 0016 2.67z", fillRule: "evenodd" })));
 });
 exports.IconCloseCircle.displayName = 'IconCloseCircle';

package/dist/cjs/icons/IconCrate.js

@@ -48,7 +48,7 @@ exports.IconCrate = (0, react_1.forwardRef)(({ size = '1em', color = 'currentCol
             verticalAlign: 'middle',
             ...style,
         }, ...props },
-        react_1.default.createElement("path", { fill: "currentColor", d: "M12 20.735V8.88m0 0l9.697-3.12M12 8.88L2.303 5.76m19.475.025l-9.697-2.774a.295.295 0 00-.162 0L2.222 5.784a.303.303 0 00-.16.112.318.318 0 00-.062.189v11.83c0 .14.09.262.222.3l9.697 2.774c.053.015.11.015.162 0l9.697-2.773a.303.303 0 00.16-.112.318.318 0 00.062-.189V6.085a.317.317 0 00-.062-.188.303.303 0 00-.16-.112v0z", stroke: "currentColor", strokeWidth: "1.5" }),
-        react_1.default.createElement("path", { fill: "currentColor", d: "M12.382 9.098l4.26 4.386-4.303 7.09.267.161.267.163 4.22-6.95 4.38 4.51.224-.218.224-.218-4.493-4.626 4.536-7.473-.267-.162-.267-.163-4.452 7.334-4.148-4.27-.224.218-.224.218zm-9.855 9.36l4.27-4.396 4.333 6.84.264-.167.264-.167-4.413-6.967 4.373-4.503-.224-.218-.224-.217-4.27 4.395-4.333-6.84-.264.167-.264.167 4.414 6.967-4.374 4.503.224.218.224.217z", stroke: "currentColor", strokeWidth: ".625" })));
+        react_1.default.createElement("path", { fill: "none", d: "M12 20.735V8.88m0 0l9.697-3.12M12 8.88L2.303 5.76m19.475.025l-9.697-2.774a.295.295 0 00-.162 0L2.222 5.784a.303.303 0 00-.16.112.318.318 0 00-.062.189v11.83c0 .14.09.262.222.3l9.697 2.774c.053.015.11.015.162 0l9.697-2.773a.303.303 0 00.16-.112.318.318 0 00.062-.189V6.085a.317.317 0 00-.062-.188.303.303 0 00-.16-.112v0z", stroke: "currentColor", strokeWidth: "1.5" }),
+        react_1.default.createElement("path", { fill: "none", d: "M12.382 9.098l4.26 4.386-4.303 7.09.267.161.267.163 4.22-6.95 4.38 4.51.224-.218.224-.218-4.493-4.626 4.536-7.473-.267-.162-.267-.163-4.452 7.334-4.148-4.27-.224.218-.224.218zm-9.855 9.36l4.27-4.396 4.333 6.84.264-.167.264-.167-4.413-6.967 4.373-4.503-.224-.218-.224-.217-4.27 4.395-4.333-6.84-.264.167-.264.167 4.414 6.967-4.374 4.503.224.218.224.217z", stroke: "currentColor", strokeWidth: ".625" })));
 });
 exports.IconCrate.displayName = 'IconCrate';

package/dist/cjs/icons/IconDot.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconDot = void 0;
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../colors");
+exports.IconDot = (0, react_1.forwardRef)(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in colors_1.FREIGHTOS_COLORS ? colors_1.FREIGHTOS_COLORS[color] : color;
+    return (react_1.default.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_1.default.createElement("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" })));
+});
+exports.IconDot.displayName = 'IconDot';

package/dist/cjs/icons/IconExchange.js

@@ -48,6 +48,6 @@ exports.IconExchange = (0, react_1.forwardRef)(({ size = '1em', color = 'current
             verticalAlign: 'middle',
             ...style,
         }, ...props },
-        react_1.default.createElement("path", { fill: "currentColor", d: "M21 9l-4-4v3h-7v2h7v3M7 11l-4 4 4 4v-3h7v-2H7v-3z" })));
+        react_1.default.createElement("path", { fill: "none", d: "M21 9l-4-4v3h-7v2h7v3M7 11l-4 4 4 4v-3h7v-2H7v-3z" })));
 });
 exports.IconExchange.displayName = 'IconExchange';

package/dist/cjs/icons/IconExternalLink.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconExternalLink = void 0;
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../colors");
+exports.IconExternalLink = (0, react_1.forwardRef)(({ size = '1em', color = 'currentColor', style, ...props }, ref) => {
+    const resolvedColor = color && color in colors_1.FREIGHTOS_COLORS ? colors_1.FREIGHTOS_COLORS[color] : color;
+    return (react_1.default.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_1.default.createElement("path", { d: "M19 19H5V5H12V3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V12H19V19ZM14 3V5H17.59L7.76 14.83L9.17 16.24L19 6.41V10H21V3H14Z", fill: "currentColor" })));
+});
+exports.IconExternalLink.displayName = 'IconExternalLink';