Build esm and cjs versions of nimbus-icons to insure compatibility in non-esm environments (eg jest)

package.json

@@ -11,8 +11,10 @@
     ]
   },
   "scripts": {
-    "build": "pnpm build:tokens && pnpm run build:packages && pnpm run build:docs",
+    "build": "pnpm build:tokens && pnpm build:icons && pnpm run build:nimbus && pnpm run build:docs",
     "build:packages": "pnpm -r --filter './packages/*' build",
+    "build:nimbus": "pnpm --filter @commercetools/nimbus run build",
+    "build:icons": "pnpm --filter @commercetools/nimbus-icons run build",
     "build:docs": "pnpm --filter './apps/docs' build",
     "build:tokens": "pnpm --filter @commercetools/nimbus-tokens run build && preconstruct build",
     "component:new": "pnpm hygen component new",

packages/nimbus-icons/.gitignore

@@ -176,4 +176,4 @@ dist
 
 
 # Ignore automatically generater material icons
-src/material-icons
+# src/material-icons/*

packages/nimbus-icons/package.json

@@ -1,9 +1,23 @@
 {
   "name": "@commercetools/nimbus-icons",
-  "version": "0.0.2",
-  "main": "dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "version": "0.0.4",
+  "main": "dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +34,7 @@
   },
   "scripts": {
     "build-icons": "pnpm svgr --filename-case kebab --typescript --jsx-runtime automatic --out-dir src/material-icons node_modules/@material-design-icons/svg/outlined",
-    "build": "pnpm run build-icons && tsc",
-    "dev": "tsc"
+    "build": "pnpm run build-icons && tsc --project tsconfig.esm.json && tsc --project tsconfig.cjs.json",
+    "dev": "tsc --project tsconfig.esm.json && tsc --project tsconfig.cjs.json"
   }
 }

packages/nimbus-icons/src/material-icons/10k.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg10K = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 6v10H5v-8.5h1V15h1.5V9H5V5h14z" />
+    <path d="M15.5 11.25V9H14v6h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75zM9.5 15H12c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H9.5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1m.5-4.5h1.5v3H10z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg10K);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/10mp.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg10Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M13 11.5h2.5c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H13c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1m.5-4.5H15v3h-1.5zm-6 7h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm1-2.5H10v-6H7V7h1.5zm5 7H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg10Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/11mp.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg11Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7.5 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M9.5 11.5H11v-6H8V7h1.5zm5 0H16v-6h-3V7h1.5z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg11Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/123.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg123 = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7 15H5.5v-4.5H4V9h3zm6.5-1.5h-3v-1h2c.55 0 1-.45 1-1V10c0-.55-.45-1-1-1H9v1.5h3v1h-2c-.55 0-1 .45-1 1V15h4.5zm6 .5v-4c0-.55-.45-1-1-1H15v1.5h3v1h-2v1h2v1h-3V15h3.5c.55 0 1-.45 1-1" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg123);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/12mp.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg12Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7.5 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M8.5 11.5H10v-6H7V7h1.5zm8-1.5h-3V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H12V7h3v1h-2c-.55 0-1 .45-1 1v2.5h4.5z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg12Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/13mp.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg13Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M8.5 11.5H10v-6H7V7h1.5zm8-1v-4c0-.55-.45-1-1-1H12V7h3v1h-2v1h2v1h-3v1.5h3.5c.55 0 1-.45 1-1m-9 3.5h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg13Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/14mp.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg14Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7.5 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6-1.5v6H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1zm3 3H15V14h1.5z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M8.5 11.5H10v-6H7V7h1.5zm6.5 0h1.5V10h1V8.5h-1v-3H15v3h-1.5v-3H12V10h3z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg14Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/15mp.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg15Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7.5 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M8.5 11.5H10v-6H7V7h1.5zm8-1V9c0-.55-.45-1-1-1h-2V7h3V5.5H12V9h3v1h-3v1.5h3.5c.55 0 1-.45 1-1" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg15Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/16mp.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg16Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7.5 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M13 11.5h2.5c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1h-2V7h3V5.5H13c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1m.5-2.5H15v1.5h-1.5zm-5 2.5H10v-6H7V7h1.5z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg16Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/17mp.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg17Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7.5 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M8.5 11.5H10v-6H7V7h1.5zm4.75 0H15l1.46-4.71c.19-.64-.29-1.29-.96-1.29H12V7h2.62z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg17Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/18-up-rating.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg18UpRating = (
+  props: SVGProps<SVGSVGElement>,
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M8.5 15H10V9H7v1.5h1.5z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M12.5 15H15c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1h-2.5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1m.5-5h1.5v1.5H13zm0 2.5h1.5V14H13z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg18UpRating);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/18mp.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg18Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7.5 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M8.5 11.5H10v-6H7V7h1.5zm4.5 0h2.5c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H13c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1m.5-5H15V8h-1.5zm0 2.5H15v1.5h-1.5z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg18Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/19mp.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg19Mp = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M7.5 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zM15 14h1.5v1.5H15z" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M8.5 11.5H10v-6H7V7h1.5zm8-1v-4c0-.55-.45-1-1-1H13c-.55 0-1 .45-1 1V8c0 .55.45 1 1 1h2v1h-3v1.5h3.5c.55 0 1-.45 1-1M15 8h-1.5V6.5H15z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg19Mp);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/1k-plus.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg1KPlus = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14z" />
+    <path d="M7.5 15H9V9H6v1.5h1.5zm4.5-2.25L13.75 15h1.75l-2.25-3 2.25-3h-1.75L12 11.25V9h-1.5v6H12z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg1KPlus);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/1k.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg1K = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14z" />
+    <path d="M8.5 15H10V9H7v1.5h1.5zm5-2.25L15.25 15H17l-2.25-3L17 9h-1.75l-1.75 2.25V9H12v6h1.5z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg1K);
+export default ForwardRef;

packages/nimbus-icons/src/material-icons/1x-mobiledata.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const Svg1XMobiledata = (
+  props: SVGProps<SVGSVGElement>,
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    ref={ref}
+    {...props}
+  >
+    <path d="M4 7h4v10H6V9H4zm11.83 4.72L18.66 7h-2.33l-1.66 2.77L13 7h-2.33l2.83 4.72L10.33 17h2.33l2-3.34 2 3.34H19z" />
+  </svg>
+);
+const ForwardRef = forwardRef(Svg1XMobiledata);
+export default ForwardRef;