@ghs-hazard-pictograms/css 1.0.1 → 1.0.4

package/README.md

@@ -121,6 +121,8 @@ The element itself must have an explicit `width` and `height` — the stylesheet
 | [`@ghs-hazard-pictograms/assets`](https://www.npmjs.com/package/@ghs-hazard-pictograms/assets) | Static SVG/PNG/JPG/WebP image files (required peer) |
 | [`@ghs-hazard-pictograms/sprite`](https://www.npmjs.com/package/@ghs-hazard-pictograms/sprite) | SVG `<symbol>` sprite for `<use href>` embedding |
 
-## Source
+## Links
 
-[github.com/karlnorling/ghs-hazard-pictograms](https://github.com/karlnorling/ghs-hazard-pictograms)
+- **Docs:** [karlnorling.github.io/ghs-hazard-pictograms](https://karlnorling.github.io/ghs-hazard-pictograms/)
+- **Source:** [github.com/karlnorling/ghs-hazard-pictograms](https://github.com/karlnorling/ghs-hazard-pictograms)
+- **Issues:** [github.com/karlnorling/ghs-hazard-pictograms/issues](https://github.com/karlnorling/ghs-hazard-pictograms/issues)

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA8BH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA6CH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}

package/dist/cjs/index.js

@@ -15,19 +15,33 @@ const core_1 = require("@ghs-hazard-pictograms/core");
 // Helpers
 // ---------------------------------------------------------------------------
 /**
- * Derives the CSS class name for a given asset path by applying the same
- * sanitisation logic used in the sprite generator.
+ * Derives the short CSS class name for a given asset path.
  *
- * @param assetPath - Relative asset path, e.g. `"physical_hazards/ghs01/foo.svg"`.
+ * - GHS core pictograms: `ghs-ghsNN` (e.g. `ghs-ghs01`) — derived from the parent
+ *   directory name which starts with the GHS code.
+ * - Transport pictograms: `ghs-{slug}` (e.g. `ghs-adr-1-4`, `ghs-un-8`) — derived
+ *   from the SVG filename with common prefixes stripped.
+ *
+ * @param assetPath - Relative asset path, e.g. `"physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg"`.
  * @returns CSS class name string (prefixed with `ghs-`).
  */
 function cssClassForPath(assetPath) {
-    return ('ghs-' +
-        assetPath
-            .replace(/[/\\?%*:|"<>]/g, '_')
-            .replace(/\s/g, '')
-            .toLowerCase()
-            .replace(/\.svg$/, ''));
+    const parts = assetPath.replace(/\\/g, '/').split('/');
+    const parentDir = parts[parts.length - 2] ?? '';
+    const filename = (parts[parts.length - 1] ?? '').replace(/\.svg$/i, '');
+    // GHS core: parent directory starts with "ghsNN" (e.g. "ghs01_explosive")
+    const ghsMatch = parentDir.match(/^(ghs\d+)/i);
+    if (ghsMatch) {
+        return 'ghs-' + ghsMatch[1].toLowerCase();
+    }
+    // Transport: derive from filename, strip verbose UN prefix and sanitise
+    const slug = filename
+        .replace(/^UN_transport_pictogram_-_/i, 'un-')
+        .replace(/\(([^)]+)\)/g, '-$1')
+        .replace(/[^a-z0-9]+/gi, '-')
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+    return 'ghs-' + slug;
 }
 // ---------------------------------------------------------------------------
 // Exports

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;AAEH,8CAAiD;AAEjD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;GAMG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,OAAO,CACL,MAAM;QACN,SAAS;aACN,OAAO,CAAC,gBAAgB,EAAE,GAAG,CAAC;aAC9B,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;aAClB,WAAW,EAAE;aACb,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACU,QAAA,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,iBAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACI,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,2BAAmB,CAAC,EAAE,CAAC,CAAC;AAA9E,QAAA,eAAe,mBAA+D"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;AAEH,sDAAyD;AAEzD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;GAUG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAExE,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,wEAAwE;IACxE,MAAM,IAAI,GAAG,QAAQ;SAClB,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC;SAC7C,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC;SAC9B,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC;SAC5B,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;SACvB,WAAW,EAAE,CAAC;IAEjB,OAAO,MAAM,GAAG,IAAI,CAAC;AACvB,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACU,QAAA,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,iBAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACI,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,2BAAmB,CAAC,EAAE,CAAC,CAAC;AAA9E,QAAA,eAAe,mBAA+D"}

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA8BH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA6CH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}

package/dist/esm/index.js

@@ -12,19 +12,33 @@ import { pictograms } from '@ghs-hazard-pictograms/core';
 // Helpers
 // ---------------------------------------------------------------------------
 /**
- * Derives the CSS class name for a given asset path by applying the same
- * sanitisation logic used in the sprite generator.
+ * Derives the short CSS class name for a given asset path.
  *
- * @param assetPath - Relative asset path, e.g. `"physical_hazards/ghs01/foo.svg"`.
+ * - GHS core pictograms: `ghs-ghsNN` (e.g. `ghs-ghs01`) — derived from the parent
+ *   directory name which starts with the GHS code.
+ * - Transport pictograms: `ghs-{slug}` (e.g. `ghs-adr-1-4`, `ghs-un-8`) — derived
+ *   from the SVG filename with common prefixes stripped.
+ *
+ * @param assetPath - Relative asset path, e.g. `"physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg"`.
  * @returns CSS class name string (prefixed with `ghs-`).
  */
 function cssClassForPath(assetPath) {
-    return ('ghs-' +
-        assetPath
-            .replace(/[/\\?%*:|"<>]/g, '_')
-            .replace(/\s/g, '')
-            .toLowerCase()
-            .replace(/\.svg$/, ''));
+    const parts = assetPath.replace(/\\/g, '/').split('/');
+    const parentDir = parts[parts.length - 2] ?? '';
+    const filename = (parts[parts.length - 1] ?? '').replace(/\.svg$/i, '');
+    // GHS core: parent directory starts with "ghsNN" (e.g. "ghs01_explosive")
+    const ghsMatch = parentDir.match(/^(ghs\d+)/i);
+    if (ghsMatch) {
+        return 'ghs-' + ghsMatch[1].toLowerCase();
+    }
+    // Transport: derive from filename, strip verbose UN prefix and sanitise
+    const slug = filename
+        .replace(/^UN_transport_pictogram_-_/i, 'un-')
+        .replace(/\(([^)]+)\)/g, '-$1')
+        .replace(/[^a-z0-9]+/gi, '-')
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+    return 'ghs-' + slug;
 }
 // ---------------------------------------------------------------------------
 // Exports

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;GAMG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,OAAO,CACL,MAAM;QACN,SAAS;aACN,OAAO,CAAC,gBAAgB,EAAE,GAAG,CAAC;aAC9B,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;aAClB,WAAW,EAAE;aACb,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;GAUG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAExE,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,wEAAwE;IACxE,MAAM,IAAI,GAAG,QAAQ;SAClB,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC;SAC7C,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC;SAC9B,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC;SAC5B,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;SACvB,WAAW,EAAE,CAAC;IAEjB,OAAO,MAAM,GAAG,IAAI,CAAC;AACvB,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@ghs-hazard-pictograms/css",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "GHS hazard pictogram CSS sprite utilities",
+  "homepage": "https://karlnorling.github.io/ghs-hazard-pictograms/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/karlnorling/ghs-hazard-pictograms",
+    "directory": "packages/@ghs-hazard-pictograms/css"
+  },
+  "bugs": {
+    "url": "https://github.com/karlnorling/ghs-hazard-pictograms/issues"
+  },
+  "license": "MIT",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
@@ -15,7 +25,28 @@
   },
   "files": [
     "dist/",
-    "sprite.css"
+    "sprite.css",
+    "package.json",
+    "README.md"
+  ],
+  "keywords": [
+    "ghs",
+    "hazard",
+    "pictogram",
+    "pictograms",
+    "chemical",
+    "safety",
+    "warning",
+    "symbol",
+    "icons",
+    "css",
+    "sprite",
+    "background-image",
+    "utility",
+    "transport",
+    "un",
+    "adr",
+    "globally-harmonized-system"
   ],
   "scripts": {
     "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && node -e \"require('fs').writeFileSync('dist/cjs/package.json', JSON.stringify({type:'commonjs'})); require('fs').writeFileSync('dist/esm/package.json', JSON.stringify({type:'module'}))\"",

package/sprite.css

@@ -2,107 +2,97 @@
    Generated by 'yarn update'. Do not edit manually.
    Import this file and apply the class to a sized block element to display the pictogram. */
 
-/* Physical hazards */
-
-.ghs-ghs01 {
-  background-image: url('../assets/assets/physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg');
+.ghs-un-8 {
+  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_8.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-ghs02 {
-  background-image: url('../assets/assets/physical_hazards_pictograms/ghs02_flammable/GHS-pictogram-flamme.svg');
+.ghs-un-6 {
+  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_6.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-ghs03 {
-  background-image: url('../assets/assets/physical_hazards_pictograms/ghs03_oxidizing/GHS-pictogram-rondflam.svg');
+.ghs-un-5-2-black {
+  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_5.2_(black).svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-ghs04 {
-  background-image: url('../assets/assets/physical_hazards_pictograms/ghs04_compressedgas/GHS-pictogram-bottle.svg');
+.ghs-adr-5-1 {
+  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/ADR_5.1.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-ghs05 {
-  background-image: url('../assets/assets/physical_hazards_pictograms/ghs05_corrosive/GHS-pictogram-acid.svg');
+.ghs-adr-9 {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_9.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-/* Health hazards */
-
-.ghs-ghs06 {
-  background-image: url('../assets/assets/health_hazards_pictograms/ghs06_toxic/GHS-pictogram-skull.svg');
+.ghs-adr-7e {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7E.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-ghs07 {
-  background-image: url('../assets/assets/health_hazards_pictograms/ghs07_healthhazard_hazardoustoozonelayer/GHS-pictogram-exclam.svg');
+.ghs-adr-7c {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7C.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-ghs08 {
-  background-image: url('../assets/assets/health_hazards_pictograms/ghs08_serioushealthhazard/GHS-pictogram-silhouette.svg');
+.ghs-adr-7b {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7B.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-/* Environmental hazards */
-
-.ghs-ghs09 {
-  background-image: url('../assets/assets/environmental_hazards_pictograms/ghs09_hazardoustotheenvironment/GHS-pictogram-pollu.svg');
+.ghs-adr-7a {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7A.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-/* Transport: Class 1 — Explosives */
-
-.ghs-adr-1 {
-  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.svg');
+.ghs-adr-6-2 {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_6.2.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-1-4 {
-  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.4.svg');
+.ghs-adr-3 {
+  background-image: url('../assets/assets/transport_pictograms/classes_3_and_4__flammable_liquids_and_solids/ADR_3.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-1-5 {
-  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.5.svg');
+.ghs-adr-2-3 {
+  background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.3.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-1-6 {
-  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.6.svg');
+.ghs-adr-2-2 {
+  background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.2.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-/* Transport: Class 2 — Gases */
-
 .ghs-adr-2-1 {
   background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.1.svg');
   background-position: center;
@@ -110,98 +100,92 @@
   background-size: contain;
 }
 
-.ghs-adr-2-2 {
-  background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.2.svg');
+.ghs-adr-1 {
+  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-2-3 {
-  background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.3.svg');
+.ghs-adr-1-6 {
+  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.6.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-/* Transport: Classes 3 & 4 — Flammable */
-
-.ghs-adr-3 {
-  background-image: url('../assets/assets/transport_pictograms/classes_3_and_4__flammable_liquids_and_solids/ADR_3.svg');
+.ghs-adr-1-5 {
+  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.5.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-/* Transport: Other GHS classes */
-
-.ghs-adr-5-1 {
-  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/ADR_5.1.svg');
+.ghs-adr-1-4 {
+  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.4.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-un-5-2-black {
-  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_5.2_(black).svg');
+.ghs-ghs05 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs05_corrosive/GHS-pictogram-acid.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-un-6 {
-  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_6.svg');
+.ghs-ghs04 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs04_compressedgas/GHS-pictogram-bottle.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-un-8 {
-  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_8.svg');
+.ghs-ghs03 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs03_oxidizing/GHS-pictogram-rondflam.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-/* Transport: Non-GHS pictograms */
-
-.ghs-adr-6-2 {
-  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_6.2.svg');
+.ghs-ghs02 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs02_flammable/GHS-pictogram-flamme.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-7a {
-  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7A.svg');
+.ghs-ghs01 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-7b {
-  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7B.svg');
+.ghs-ghs08 {
+  background-image: url('../assets/assets/health_hazards_pictograms/ghs08_serioushealthhazard/GHS-pictogram-silhouette.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-7c {
-  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7C.svg');
+.ghs-ghs07 {
+  background-image: url('../assets/assets/health_hazards_pictograms/ghs07_healthhazard_hazardoustoozonelayer/GHS-pictogram-exclam.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-7e {
-  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7E.svg');
+.ghs-ghs06 {
+  background-image: url('../assets/assets/health_hazards_pictograms/ghs06_toxic/GHS-pictogram-skull.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
-.ghs-adr-9 {
-  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_9.svg');
+.ghs-ghs09 {
+  background-image: url('../assets/assets/environmental_hazards_pictograms/ghs09_hazardoustotheenvironment/GHS-pictogram-pollu.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;