emoji-picker-react 4.22.3 → 5.0.0

package/src/components/navigation/CategoryNavIcon.tsx

@@ -18,277 +18,153 @@ const COLUMNS: Record<string, number> = {
   custom: 9,
 };
 
-const SHAPES: Record<number, React.ReactNode> = {
+// Shared paint for filled shapes.
+const THIN_FILL = {
+  fill: 'currentColor',
+  strokeWidth: '0.1',
+  strokeMiterlimit: '10',
+} as const;
+const SOLID = { fill: 'currentColor', stroke: 'none' } as const;
+const ROUND = { strokeLinecap: 'round' } as const;
+
+// Pure: compositions without CategoryNav must be able to drop the icons,
+// and spreading shared paint into JSX would otherwise count as a side
+// effect.
+const SHAPES: Record<number, React.ReactNode> = /* @__PURE__ */ (() => ({
   0: (
     <>
       <path
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="0.1"
-        strokeMiterlimit="10"
-        d="M12.8,9.5c0.6,0,1.1-0.5,1.1-1.2
-		c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.2,0.5-1.2,1.1S12.2,9.5,12.8,9.5z M12.8,7.9c0.2,0,0.4,0.2,0.4,0.4c0,0.2-0.2,0.4-0.4,0.4
-		c-0.2,0-0.4-0.2-0.4-0.4C12.4,8.1,12.6,7.9,12.8,7.9z"
+        {...THIN_FILL}
+        d="M12.8,9.5c.6,0,1.1-.5,1.1-1.2c0-.6-.5-1.1-1.1-1.1c-.6,0-1.2,.5-1.2,1.1S12.2,9.5,12.8,9.5zM12.8,7.9c.2,0,.4,.2,.4,.4c0,.2-.2,.4-.4,.4c-.2,0-.4-.2-.4-.4C12.4,8.1,12.6,7.9,12.8,7.9z"
       />
       <path
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="0.1"
-        strokeMiterlimit="10"
-        d="M7.2,9.5c0.6,0,1.2-0.5,1.2-1.2
-		c0-0.6-0.5-1.1-1.2-1.1c-0.6,0-1.1,0.5-1.1,1.1S6.6,9.5,7.2,9.5z M7.2,7.9c0.2,0,0.4,0.2,0.4,0.4c0,0.2-0.2,0.4-0.4,0.4
-		C7,8.7,6.8,8.5,6.8,8.3C6.8,8.1,7,7.9,7.2,7.9z"
+        {...THIN_FILL}
+        d="M7.2,9.5c.6,0,1.2-.5,1.2-1.2c0-.6-.5-1.1-1.2-1.1c-.6,0-1.1,.5-1.1,1.1S6.6,9.5,7.2,9.5zM7.2,7.9c.2,0,.4,.2,.4,.4c0,.2-.2,.4-.4,.4C7,8.7,6.8,8.5,6.8,8.3C6.8,8.1,7,7.9,7.2,7.9z"
       />
       <path
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="0.1"
-        strokeMiterlimit="10"
-        d="M14.6,11.2c-0.1-0.1-0.2-0.2-0.3-0.2H5.7
-		c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.1-0.1,0.2,0,0.4c0.7,2,2.5,3.3,4.6,3.3s3.9-1.3,4.6-3.3C14.7,11.4,14.7,11.3,14.6,11.2z M10,14.1
-		c-1.6,0-3-0.9-3.7-2.2h7.3C13,13.2,11.6,14.1,10,14.1z"
+        {...THIN_FILL}
+        d="M14.6,11.2c-.1-.1-.2-.2-.3-.2H5.7c-.1,0-.2,.1-.3,.2c-.1,.1-.1,.2,0,.4c.7,2,2.5,3.3,4.6,3.3s3.9-1.3,4.6-3.3C14.7,11.4,14.7,11.3,14.6,11.2zM10,14.1c-1.6,0-3-.9-3.7-2.2h7.3C13,13.2,11.6,14.1,10,14.1z"
       />
       <path
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="0.1"
-        strokeMiterlimit="10"
-        d="M10,3c-3.8,0-7,3.1-7,7s3.1,7,7,7s7-3.1,7-7
-		S13.8,3,10,3z M10,16.2c-3.4,0-6.2-2.8-6.2-6.2S6.6,3.8,10,3.8s6.2,2.8,6.2,6.2S13.4,16.2,10,16.2z"
+        {...THIN_FILL}
+        d="M10,3c-3.8,0-7,3.1-7,7s3.1,7,7,7s7-3.1,7-7S13.8,3,10,3zM10,16.2c-3.4,0-6.2-2.8-6.2-6.2S6.6,3.8,10,3.8s6.2,2.8,6.2,6.2S13.4,16.2,10,16.2z"
       />
     </>
   ),
   1: (
     <>
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M24.2,11V3.5c0.1,0.1,0.8,0.9,2.8,3.1c2.5-1.7,5.6-0.7,6.9,0l2.4-3.1v7.1
-			c0,1.2-0.1,2.5-0.9,3.4c-1,1.2-2.7,2.5-5.3,2.5c-2.9,0-4.5-1.5-5.3-2.9C24.2,12.9,24.2,11.9,24.2,11z"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M21.2,10l5.4,1.2"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M21.2,14.1l5.4-1.2"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M38.8,10l-5.4,1.2"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M38.8,14.1l-5.4-1.2"
-      />
+      <path d="M24.2,11V3.5c.1,.1,.8,.9,2.8,3.1c2.5-1.7,5.6-.7,6.9,0l2.4-3.1v7.1c0,1.2-.1,2.5-.9,3.4c-1,1.2-2.7,2.5-5.3,2.5c-2.9,0-4.5-1.5-5.3-2.9C24.2,12.9,24.2,11.9,24.2,11z" />
+      <path {...ROUND} d="M21.2,10l5.4,1.2" />
+      <path {...ROUND} d="M21.2,14.1l5.4-1.2" />
+      <path {...ROUND} d="M38.8,10l-5.4,1.2" />
+      <path {...ROUND} d="M38.8,14.1l-5.4-1.2" />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         fill="currentColor"
-        d="M29.5,12.4L29,11.7c-0.2-0.3,0-0.6,0.3-0.6h1.4
-			c0.3,0,0.5,0.4,0.3,0.6l-0.7,1l0,0c-0.7,1.2-2.6,1.1-3.1-0.3l-0.1-0.2c-0.1-0.2,0-0.4,0.2-0.5s0.4,0,0.5,0.2l0.1,0.2
-			C28.3,12.7,29.1,12.9,29.5,12.4z"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M32.4,12.1l-0.1,0.2c-0.4,1-1.8,1.1-2.3,0.2"
+        stroke="none"
+        d="M29.5,12.4L29,11.7c-.2-.3,0-.6,.3-.6h1.4c.3,0,.5,.4,.3,.6l-.7,1l0,0c-.7,1.2-2.6,1.1-3.1-.3l-.1-.2c-.1-.2,0-.4,.2-.5s.4,0,.5,.2l.1,.2C28.3,12.7,29.1,12.9,29.5,12.4z"
       />
-      <ellipse fill="currentColor" cx="27.6" cy="9.7" rx="0.7" ry="0.7" />
-      <ellipse fill="currentColor" cx="32.4" cy="9.7" rx="0.7" ry="0.7" />
+      <path {...ROUND} d="M32.4,12.1l-.1,.2c-.4,1-1.8,1.1-2.3,.2" />
+      <circle {...SOLID} cx="27.6" cy="9.7" r="0.7" />
+      <circle {...SOLID} cx="32.4" cy="9.7" r="0.7" />
     </>
   ),
   2: (
     <>
+      <path d="M48.1,3.5h3.7c2.5,0,4.5,2,4.5,4.5c0,.5-.4,.9-.9,.9H44.5c-.5,0-.9-.4-.9-.9C43.6,5.5,45.6,3.5,48.1,3.5z" />
       <path
-        fill="none"
-        stroke="currentColor"
-        d="M48.1,3.5h3.7c2.5,0,4.5,2,4.5,4.5c0,0.5-0.4,0.9-0.9,0.9H44.5c-0.5,0-0.9-0.4-0.9-0.9
-				C43.6,5.5,45.6,3.5,48.1,3.5z"
+        {...ROUND}
+        d="M43.5,8.7c-.2,.1-.5,1.2,0,1.5c1.4,.9,8.5,.8,11.3,.6c.8-.1,1.6-.4,1.7-1.2c0-.3-.1-.6-.6-.9"
       />
       <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M43.5,8.7c-0.2,0.1-0.5,1.2,0,1.5c1.4,0.9,8.5,0.8,11.3,0.6
-				c0.8-0.1,1.6-0.4,1.7-1.2c0-0.3-0.1-0.6-0.6-0.9"
+        {...ROUND}
+        d="M43.5,10.6L43.3,11c-.2,.5,.2,1,.7,.9c.3-.1,.5,.1,.7,.3l.1,.2c.3,.5,1,.6,1.5,.2l0,0c.3-.2,.7-.3,1-.2l.8,.3c.4,.1,.8,.1,1.2,0l.5-.2c.4-.2,.9-.2,1.3,0l.5,.2c.4,.2,.8,.1,1.2-.1l.2-.1c.3-.2,.8-.1,1.1,.1l.2,.2c.3,.3,.8,.2,1-.2l.1-.2c.1-.2,0-.3,.2-.4c.5,0,1.2-.3,1.1-.7l-.4-1.1"
       />
       <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M43.5,10.6L43.3,11c-0.2,0.5,0.2,1,0.7,0.9
-				c0.3-0.1,0.5,0.1,0.7,0.3l0.1,0.2c0.3,0.5,1,0.6,1.5,0.2l0,0c0.3-0.2,0.7-0.3,1-0.2l0.8,0.3c0.4,0.1,0.8,0.1,1.2,0l0.5-0.2
-				c0.4-0.2,0.9-0.2,1.3,0l0.5,0.2c0.4,0.2,0.8,0.1,1.2-0.1l0.2-0.1c0.3-0.2,0.8-0.1,1.1,0.1l0.2,0.2c0.3,0.3,0.8,0.2,1-0.2l0.1-0.2
-				c0.1-0.2,0-0.3,0.2-0.4c0.5,0,1.2-0.3,1.1-0.7l-0.4-1.1"
+        {...ROUND}
+        d="M43.5,12.1c-.1,.2-.3,.8,0,1.1c.3,.4,3,1.1,6.4,1.1c2.2,0,4.6-.3,6-.6c.5-.1,.9-.4,.8-.9c0-.2-.2-.5-.4-.7"
       />
       <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M43.5,12.1c-0.1,0.2-0.3,0.8,0,1.1c0.3,0.4,3,1.1,6.4,1.1
-				c2.2,0,4.6-0.3,6-0.6c0.5-0.1,0.9-0.4,0.8-0.9c0-0.2-0.2-0.5-0.4-0.7"
+        {...ROUND}
+        d="M43.5,13.3c0,.5,.6,2.4,1.3,2.6c1.8,.8,5.7,.7,8.1,.5c1.3-.1,2.5-.7,3.2-1.8c.3-.5,.5-1,.5-1.4"
       />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M43.5,13.3c0,0.5,0.6,2.4,1.3,2.6c1.8,0.8,5.7,0.7,8.1,0.5
-				c1.3-0.1,2.5-0.7,3.2-1.8c0.3-0.5,0.5-1,0.5-1.4"
-      />
-      <ellipse fill="currentColor" cx="51.6" cy="6.5" rx="0.3" ry="0.4" />
-      <ellipse fill="currentColor" cx="53" cy="4.9" rx="0.3" ry="0.4" />
-      <ellipse fill="currentColor" cx="53" cy="7.2" rx="0.3" ry="0.4" />
-      <ellipse fill="currentColor" cx="54.3" cy="6.5" rx="0.3" ry="0.4" />
-      <ellipse fill="currentColor" cx="50.9" cy="4.9" rx="0.3" ry="0.4" />
+      <ellipse {...SOLID} cx="51.6" cy="6.5" rx="0.3" ry="0.4" />
+      <ellipse {...SOLID} cx="53" cy="4.9" rx="0.3" ry="0.4" />
+      <ellipse {...SOLID} cx="53" cy="7.2" rx="0.3" ry="0.4" />
+      <ellipse {...SOLID} cx="54.3" cy="6.5" rx="0.3" ry="0.4" />
+      <ellipse {...SOLID} cx="50.9" cy="4.9" rx="0.3" ry="0.4" />
     </>
   ),
   3: (
     <>
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M64.1,13.4l2.3,0c0.2,0,0.4,0.2,0.4,0.4v2.1c0,0.2-0.2,0.4-0.4,0.4h-2.3
-				c-0.2,0-0.4-0.2-0.4-0.4v-2.1C63.7,13.6,63.8,13.4,64.1,13.4z"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M73.5,13.4h2.4c0.2,0,0.4,0.2,0.4,0.4v2.1c0,0.2-0.2,0.4-0.4,0.4h-2.4
-				c-0.2,0-0.4-0.2-0.4-0.4l0-2.1C73.1,13.6,73.3,13.4,73.5,13.4z"
-      />
+      <path d="M64.1,13.4l2.3,0c.2,0,.4,.2,.4,.4v2.1c0,.2-.2,.4-.4,.4h-2.3c-.2,0-.4-.2-.4-.4v-2.1C63.7,13.6,63.8,13.4,64.1,13.4z" />
+      <path d="M73.5,13.4h2.4c.2,0,.4,.2,.4,.4v2.1c0,.2-.2,.4-.4,.4h-2.4c-.2,0-.4-.2-.4-.4l0-2.1C73.1,13.6,73.3,13.4,73.5,13.4z" />
       <path fill="none" stroke="currentColor" d="M63.7,8.4h12.6v5H63.7V8.4z" />
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M65.5,3.6h8.9c1,0,1.9,0.8,1.9,1.9v3.1H63.7V5.5C63.7,4.4,64.5,3.6,65.5,3.6z"
-      />
-      <ellipse fill="currentColor" cx="66.2" cy="10.9" rx="0.9" ry="0.9" />
-      <ellipse fill="currentColor" cx="73.8" cy="10.9" rx="0.9" ry="0.9" />
+      <path d="M65.5,3.6h8.9c1,0,1.9,.8,1.9,1.9v3.1H63.7V5.5C63.7,4.4,64.5,3.6,65.5,3.6z" />
+      <circle {...SOLID} cx="66.2" cy="10.9" r="0.9" />
+      <circle {...SOLID} cx="73.8" cy="10.9" r="0.9" />
     </>
   ),
   4: (
     <>
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M96.4,10c0,3.6-2.9,6.5-6.4,6.5s-6.4-2.9-6.4-6.5s2.9-6.5,6.4-6.5S96.4,6.4,96.4,10z"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M96.3,8.6c0,0,0,0.1,0,0.1c-0.9,0.1-2.9,0.1-4.6-1.2c-1.1-0.8-2-1.7-2.6-2.5
-				c-0.3-0.4-0.6-0.8-0.7-1.1c-0.1-0.1-0.1-0.2-0.1-0.2c0.5-0.1,1.2-0.2,2-0.2c1.2,0,2.5,0.3,3.5,1.1c1,0.8,1.7,1.8,2.1,2.8
-				C96.1,7.9,96.2,8.3,96.3,8.6z"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M84,12.1c0,0,0-0.1,0-0.1c0.9-0.2,2.9-0.4,4.7,0.6c1.1,0.6,1.9,1.5,2.4,2.3
-				c0.4,0.5,0.6,1,0.7,1.3c-0.4,0.1-1,0.2-1.7,0.3c-1,0-2.1-0.1-3.2-0.8c-1.1-0.6-1.9-1.6-2.4-2.5C84.2,12.8,84.1,12.4,84,12.1z"
-      />
+      <path d="M96.4,10c0,3.6-2.9,6.5-6.4,6.5s-6.4-2.9-6.4-6.5s2.9-6.5,6.4-6.5S96.4,6.4,96.4,10z" />
+      <path d="M96.3,8.6c0,0,0,.1,0,.1c-.9,.1-2.9,.1-4.6-1.2c-1.1-.8-2-1.7-2.6-2.5c-.3-.4-.6-.8-.7-1.1c-.1-.1-.1-.2-.1-.2c.5-.1,1.2-.2,2-.2c1.2,0,2.5,.3,3.5,1.1c1,.8,1.7,1.8,2.1,2.8C96.1,7.9,96.2,8.3,96.3,8.6z" />
+      <path d="M84,12.1c0,0,0-.1,0-.1c.9-.2,2.9-.4,4.7,.6c1.1,.6,1.9,1.5,2.4,2.3c.4,.5,.6,1,.7,1.3c-.4,.1-1,.2-1.7,.3c-1,0-2.1-.1-3.2-.8c-1.1-.6-1.9-1.6-2.4-2.5C84.2,12.8,84.1,12.4,84,12.1z" />
     </>
   ),
   5: (
     <>
       <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M116.3,6.8l-1.4,2L114.1,8l-0.6-0.7l0,0.9l-0.1,8.2h-6.8l-0.1-8.2
-				l0-0.9L105.9,8l-0.8,0.8l-1.4-2l2.6-2.9c0.1-0.1,0.2-0.1,0.3-0.1h1.3l0.4,0.7c0.7,1.3,2.6,1.3,3.3-0.1l0.3-0.6h1.2
-				c0.1,0,0.2,0,0.3,0.1l0.3-0.3l-0.3,0.3L116.3,6.8z"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M110.1,7.7h2v0.9c0,0.4-0.4,0.7-1,0.7c-0.6,0-1-0.3-1-0.7L110.1,7.7L110.1,7.7z"
+        {...ROUND}
+        d="M116.3,6.8l-1.4,2L114.1,8l-.6-.7l0,.9l-.1,8.2h-6.8l-.1-8.2l0-.9L105.9,8l-.8,.8l-1.4-2l2.6-2.9c.1-.1,.2-.1,.3-.1h1.3l.4,.7c.7,1.3,2.6,1.3,3.3-.1l.3-.6h1.2c.1,0,.2,0,.3,.1l.3-.3l-.3,.3L116.3,6.8z"
       />
+      <path d="M110.1,7.7h2v.9c0,.4-.4,.7-1,.7c-.6,0-1-.3-1-.7L110.1,7.7L110.1,7.7z" />
     </>
   ),
   6: (
     <>
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M126.8,14.3c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2s1-2.2,2.2-2.2S126.8,13.1,126.8,14.3z"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M137.6,14.3c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2
-				C136.6,12.1,137.6,13.1,137.6,14.3z"
-      />
+      <path d="M126.8,14.3c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2s1-2.2,2.2-2.2S126.8,13.1,126.8,14.3z" />
+      <path d="M137.6,14.3c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2C136.6,12.1,137.6,13.1,137.6,14.3z" />
       <path fill="none" stroke="currentColor" d="M126.8,4.4v9.9" />
       <path fill="none" stroke="currentColor" d="M137.7,4.4v9.9" />
-      <path
-        fill="none"
-        stroke="currentColor"
-        d="M126.8,3.5h10.8v2.7h-10.8C126.8,6.2,126.8,3.5,126.8,3.5z"
-      />
+      <path d="M126.8,3.5h10.8v2.7h-10.8C126.8,6.2,126.8,3.5,126.8,3.5z" />
     </>
   ),
   7: (
     <>
       <path
         fill="currentColor"
-        stroke="currentColor"
         strokeWidth="0.25"
         strokeMiterlimit="10"
-        d="M156,4.3c-0.2-0.1-0.4-0.1-0.5,0
-	c0,0-0.2,0.1-0.9,0.1c-0.7,0-2.4-0.1-3.8-0.6c-0.8-0.3-1.7-0.5-2.5-0.5c-0.2,0-0.4,0-0.5,0c-1.3,0-2.5,0.3-3.6,1
-	c-0.2,0.1-0.2,0.2-0.2,0.4v11.6c0,0.3,0.1,0.5,0.3,0.5c0.6,0,0.5-0.4,0.5-0.6v-5.7c0.7-0.3,3.2-1.1,5.8-0.1c1.6,0.6,3.5,0.7,4.3,0.7
-	c0.8,0,1.3-0.3,1.3-0.3c0.2-0.1,0.3-0.2,0.3-0.4V4.7C156.2,4.5,156.1,4.4,156,4.3z M155.6,10.2c-0.1,0-0.7,0.1-1,0.1
-	c-0.7,0-2.4-0.1-3.8-0.6c-2.5-1-5-0.5-6.2-0.1V4.7c0.9-0.5,2.2-0.7,3.2-0.7c0.1,0,0.3,0,0.4,0c0.7,0,1.5,0.2,2.2,0.4
-	c1.6,0.6,3.5,0.7,4.3,0.7c0.2,0,0.8,0,1-0.1V10.2z"
+        d="M156,4.3c-.2-.1-.4-.1-.5,0c0,0-.2,.1-.9,.1c-.7,0-2.4-.1-3.8-.6c-.8-.3-1.7-.5-2.5-.5c-.2,0-.4,0-.5,0c-1.3,0-2.5,.3-3.6,1c-.2,.1-.2,.2-.2,.4v11.6c0,.3,.1,.5,.3,.5c.6,0,.5-.4,.5-.6v-5.7c.7-.3,3.2-1.1,5.8-.1c1.6,.6,3.5,.7,4.3,.7c.8,0,1.3-.3,1.3-.3c.2-.1,.3-.2,.3-.4V4.7C156.2,4.5,156.1,4.4,156,4.3zM155.6,10.2c-.1,0-.7,.1-1,.1c-.7,0-2.4-.1-3.8-.6c-2.5-1-5-.5-6.2-.1V4.7c.9-.5,2.2-.7,3.2-.7c.1,0,.3,0,.4,0c.7,0,1.5,.2,2.2,.4c1.6,.6,3.5,.7,4.3,.7c.2,0,.8,0,1-.1V10.2z"
       />
     </>
   ),
   8: (
     <>
       <path
-        fill="currentColor"
-        d="M170.8,3.1L170.8,3.1c-0.3,0-0.5,0-0.8,0c-2.1,0-4,1-5.3,2.5l-0.1,0l-0.1-0.1l-1-1.2l-0.3,3.4l3.4,0.3
-				l-1.1-1.3l-0.1-0.1l0.1-0.1c1.1-1.4,3-2.3,5-2.1l0,0c3.2,0.3,5.5,3.1,5.2,6.3c-0.3,3-3.1,5.3-6.1,5.1c-3.1-0.2-5.4-2.9-5.3-6
-				L163,9.5c-0.2,3.8,2.6,7.1,6.3,7.4c3.9,0.4,7.3-2.6,7.6-6.5C177.2,6.8,174.4,3.5,170.8,3.1z"
+        {...SOLID}
+        d="M170.8,3.1L170.8,3.1c-.3,0-.5,0-.8,0c-2.1,0-4,1-5.3,2.5l-.1,0l-.1-.1l-1-1.2l-.3,3.4l3.4,.3l-1.1-1.3l-.1-.1l.1-.1c1.1-1.4,3-2.3,5-2.1l0,0c3.2,.3,5.5,3.1,5.2,6.3c-.3,3-3.1,5.3-6.1,5.1c-3.1-.2-5.4-2.9-5.3-6L163,9.5c-.2,3.8,2.6,7.1,6.3,7.4c3.9,.4,7.3-2.6,7.6-6.5C177.2,6.8,174.4,3.5,170.8,3.1z"
       />
       <path
-        fill="currentColor"
-        d="M170.3,7.4c0-0.3-0.3-0.6-0.6-0.6S169,7.1,169,7.4v3.2c0,0.2,0.1,0.3,0.2,0.4c0.1,0.1,0.3,0.2,0.4,0.2
-				h2.4c0.4,0,0.6-0.3,0.6-0.6s-0.3-0.6-0.6-0.6h-1.6h-0.2V9.8L170.3,7.4L170.3,7.4z"
+        {...SOLID}
+        d="M170.3,7.4c0-.3-.3-.6-.6-.6S169,7.1,169,7.4v3.2c0,.2,.1,.3,.2,.4c.1,.1,.3,.2,.4,.2h2.4c.4,0,.6-.3,.6-.6s-.3-.6-.6-.6h-1.6h-.2V9.8L170.3,7.4L170.3,7.4z"
       />
     </>
   ),
   9: (
     <>
+      <path d="M186.2,3.4h7.7c1.5,0,2.7,1.2,2.7,2.7v7.7c0,1.5-1.2,2.7-2.7,2.7h-7.7c-1.5,0-2.7-1.2-2.7-2.7V6.1C183.4,4.6,184.7,3.4,186.2,3.4z" />
+      <circle {...SOLID} cx="186" cy="8.9" r="0.7" />
+      <circle {...SOLID} cx="194" cy="6.7" r="0.7" />
       <path
-        fill="none"
-        stroke="currentColor"
-        d="M186.2,3.4h7.7c1.5,0,2.7,1.2,2.7,2.7v7.7c0,1.5-1.2,2.7-2.7,2.7h-7.7
-				c-1.5,0-2.7-1.2-2.7-2.7V6.1C183.4,4.6,184.7,3.4,186.2,3.4z"
-      />
-      <ellipse fill="currentColor" cx="186" cy="8.9" rx="0.7" ry="0.7" />
-      <ellipse fill="currentColor" cx="194" cy="6.7" rx="0.7" ry="0.7" />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        d="M186,13.3l0.4-0.3c0.4-0.3,1-0.3,1.5-0.1l1,0.4
-				c0.5,0.2,1,0.2,1.5-0.1l0.8-0.5c0.4-0.3,1-0.3,1.5-0.1l1.8,0.8"
+        {...ROUND}
+        d="M186,13.3l.4-.3c.4-.3,1-.3,1.5-.1l1,.4c.5,.2,1,.2,1.5-.1l.8-.5c.4-.3,1-.3,1.5-.1l1.8,.8"
       />
     </>
   ),
-};
+}))();
 
 export function CategoryNavIcon({ category }: { category: string }) {
   const column = COLUMNS[category] ?? 0;
@@ -297,6 +173,9 @@ export function CategoryNavIcon({ category }: { category: string }) {
       viewBox={`${column * 20} 0 20 20`}
       width="100%"
       height="100%"
+      // Shared paint, inherited by every shape; filled shapes override.
+      fill="none"
+      stroke="currentColor"
       // Absolutely positioned over the button's padding box, matching the
       // geometry of the former background-image sprite. Percentage sizes
       // alone would resolve against the smaller content box (the button

package/src/components/navigation/CategoryNavigation.tsx

@@ -9,42 +9,77 @@ import {
   customGroupFromCategoryConfig,
 } from '../../config/categoryConfig';
 import {
+  useLabels,
   useCategoriesConfig,
   useCategoryIconsConfig,
 } from '../../config/useConfig';
-import { useActiveCategoryScrollDetection } from '../../hooks/useActiveCategoryScrollDetection';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
+import { useRegisterRegion } from '../../hooks/useRegisterRegion';
 import { useScrollCategoryIntoView } from '../../hooks/useScrollCategoryIntoView';
 import { useShouldHideCustomEmojis } from '../../hooks/useShouldHideCustomEmojis';
+import { useDefaultAppearance } from '../../primitives/appearance';
 import { isCustomCategory } from '../../typeRefinements/typeRefinements';
 import { Categories } from '../../types/exposedTypes';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
-import { useVisibleCategoriesState } from '../context/PickerContext';
 import { usePickerDataContext } from '../context/PickerDataContext';
 
 import { CategoryButton } from './CategoryButton';
 
-export function CategoryNavigation() {
+// Active category state lives with the scroll container (Viewport), which
+// owns section observation. The tablist only highlights and scrolls.
+// Keeping observation in the tablist would stop section tracking whenever
+// the bar unmounts (single tab) or is omitted from a composition.
+const ActiveCategoryContext = /* @__PURE__ */ React.createContext<{
+  activeCategory: string | null;
+  setActiveCategory: (category: string | null) => void;
+}>({
+  activeCategory: null,
+  setActiveCategory: () => {},
+});
+
+export function ActiveCategoryProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
-  const [, setVisibleCategories] = useVisibleCategoriesState();
+  const value = React.useMemo(
+    () => ({ activeCategory, setActiveCategory }),
+    [activeCategory],
+  );
+  return (
+    <ActiveCategoryContext.Provider value={value}>
+      {children}
+    </ActiveCategoryContext.Provider>
+  );
+}
+
+export function useActiveCategory() {
+  return React.useContext(ActiveCategoryContext);
+}
+
+/**
+ * Scroll a section to the top and highlight its tab. The highlight is set
+ * explicitly: trailing sections too short to reach the viewport top would
+ * otherwise leave an earlier section active.
+ */
+export function useJumpToCategory(): (categoryId: string) => void {
+  const { setActiveCategory } = useActiveCategory();
   const scrollCategoryIntoView = useScrollCategoryIntoView();
-  const isSearchMode = useIsSearchMode();
+  return (categoryId) => {
+    scrollCategoryIntoView(categoryId);
+    setTimeout(() => {
+      setActiveCategory(categoryId);
+    }, 10);
+  };
+}
 
+export function useVisibleCategoryConfigs() {
   const categoriesConfig = useCategoriesConfig();
-  const categoryIcons = useCategoryIconsConfig();
-  const CategoryNavigationRef = useCategoryNavigationRef();
   const hideCustomCategory = useShouldHideCustomEmojis();
   const { customGroups, emojiData } = usePickerDataContext();
 
-  // The observer re-subscribes when the merged categories reference
-  // changes (sections added/removed); the reference is stable otherwise.
-  useActiveCategoryScrollDetection({
-    setActiveCategory,
-    setVisibleCategories,
-    categories: categoriesConfig,
-  });
-
-  const visibleCategories = categoriesConfig.filter(categoryConfig => {
+  return categoriesConfig.filter((categoryConfig) => {
     if (isCustomCategory(categoryConfig) && hideCustomCategory) {
       return false;
     }
@@ -58,6 +93,31 @@ export function CategoryNavigation() {
     }
     return true;
   });
+}
+
+export type NavOrientation = 'horizontal' | 'vertical';
+
+export function CategoryNavigation({
+  orientation = 'horizontal',
+}: {
+  orientation?: NavOrientation;
+} = {}) {
+  const appearance = useDefaultAppearance();
+  const { activeCategory } = useActiveCategory();
+  const jumpToCategory = useJumpToCategory();
+  const isSearchMode = useIsSearchMode();
+
+  const categoryIcons = useCategoryIconsConfig();
+  const CategoryNavigationRef = useCategoryNavigationRef();
+  const labels = useLabels();
+
+  const visibleCategories = useVisibleCategoryConfigs();
+
+  // Registered before the single-tab early return so the tab bar leaves
+  // the navigation graph when it unmounts.
+  useRegisterRegion('categories', CategoryNavigationRef, [
+    visibleCategories.length,
+  ]);
 
   // A single tab navigates nowhere — hide the bar to reclaim its space.
   // https://github.com/ealush/emoji-picker-react/issues/396
@@ -67,13 +127,18 @@ export function CategoryNavigation() {
 
   return (
     <div
-      className={cx(styles.nav)}
+      className={cx(
+        styles.nav,
+        appearance && styles.appearance,
+        orientation === 'vertical' && styles.vertical,
+      )}
       role="tablist"
-      aria-label="Category navigation"
-      id="epr-category-nav-id"
+      aria-label={labels.categoryNavigation}
+      // Read by the keyboard handler: arrow keys follow the tab axis.
+      aria-orientation={orientation}
       ref={CategoryNavigationRef}
     >
-      {visibleCategories.map(categoryConfig => {
+      {visibleCategories.map((categoryConfig) => {
         const category = categoryFromCategoryConfig(categoryConfig);
         const categoryId = categoryIdFromCategoryConfig(categoryConfig);
         const isActiveCategory = categoryId === activeCategory;
@@ -88,12 +153,7 @@ export function CategoryNavigation() {
             allowNavigation={allowNavigation}
             categoryConfig={categoryConfig}
             customIcon={categoryIcons[category as Categories]}
-            onClick={() => {
-              scrollCategoryIntoView(categoryId);
-              setTimeout(() => {
-                setActiveCategory(categoryId);
-              }, 10);
-            }}
+            onClick={() => jumpToCategory(categoryId)}
           />
         );
       })}
@@ -101,26 +161,38 @@ export function CategoryNavigation() {
   );
 }
 
-const styles = stylesheet.create({
-  nav: {
-    '.': 'epr-category-nav',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    padding: 'var(--epr-header-padding)',
-  },
-  '.epr-search-active': {
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
     nav: {
-      opacity: '0.3',
-      cursor: 'default',
-      pointerEvents: 'none',
+      '.': 'epr-category-nav',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      padding: 'var(--epr-header-padding)',
     },
-  },
-  '.epr-main:has(input:not(:placeholder-shown))': {
-    nav: {
-      opacity: '0.3',
-      cursor: 'default',
-      pointerEvents: 'none',
+    vertical: {
+      '.': 'epr-category-nav-vertical',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gap: 'var(--epr-horizontal-padding)',
+      padding: 'var(--epr-horizontal-padding) 0',
     },
-  },
-});
+    appearance: { '.': 'epr-category-nav-appearance' },
+    '.epr-search-active': {
+      nav: { pointerEvents: 'none' },
+      appearance: {
+        opacity: '0.3',
+        cursor: 'default',
+        pointerEvents: 'none',
+      },
+    },
+    '.epr-structural-root:has(input:not(:placeholder-shown))': {
+      nav: { pointerEvents: 'none' },
+      appearance: {
+        opacity: '0.3',
+        cursor: 'default',
+        pointerEvents: 'none',
+      },
+    },
+  }))();

package/src/config/categoryConfig.ts

@@ -3,6 +3,7 @@ import {
   CategoryConfig,
   EmojiData,
   SuggestionMode,
+  SuggestionModeValue,
 } from '../types/exposedTypes';
 
 import { CustomEmoji } from './customEmojiConfig';
@@ -232,13 +233,16 @@ export function mergeCategoriesConfig(
   }
 }
 
+// A fresh object every time: the module-level defaults are shared by every
+// picker in the page, so merging into them would make one picker's
+// localized or "Recently Used" names leak into the next.
 function getBaseConfigByCategory(
   category: Categories,
   modifier: CategoryConfig = {} as CategoryConfig,
-) {
-  return Object.assign(configByCategory[category], modifier);
+): CategoryConfig {
+  return { ...configByCategory[category], ...modifier };
 }
 
 type CategoryConfigModifiers = {
-  suggestionMode?: SuggestionMode;
+  suggestionMode?: SuggestionModeValue;
 };

package/src/config/cdnUrls.ts

@@ -1,24 +1,14 @@
-import { EmojiStyle } from '../types/exposedTypes';
+import { EmojiStyle, EmojiStyleValue } from '../types/exposedTypes';
 
-const CDN_URL_APPLE =
-  'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/';
-const CDN_URL_FACEBOOK =
-  'https://cdn.jsdelivr.net/npm/emoji-datasource-facebook/img/facebook/64/';
-const CDN_URL_TWITTER =
-  'https://cdn.jsdelivr.net/npm/emoji-datasource-twitter/img/twitter/64/';
-const CDN_URL_GOOGLE =
-  'https://cdn.jsdelivr.net/npm/emoji-datasource-google/img/google/64/';
+const CDN_SETS: ReadonlyArray<string> = [
+  EmojiStyle.TWITTER,
+  EmojiStyle.GOOGLE,
+  EmojiStyle.FACEBOOK,
+];
 
-export function cdnUrl(emojiStyle: EmojiStyle): string {
-  switch (emojiStyle) {
-    case EmojiStyle.TWITTER:
-      return CDN_URL_TWITTER;
-    case EmojiStyle.GOOGLE:
-      return CDN_URL_GOOGLE;
-    case EmojiStyle.FACEBOOK:
-      return CDN_URL_FACEBOOK;
-    case EmojiStyle.APPLE:
-    default:
-      return CDN_URL_APPLE;
-  }
+// emoji-datasource publishes one package per image set; native and
+// unknown styles use Apple's.
+export function cdnUrl(emojiStyle: EmojiStyleValue): string {
+  const set = CDN_SETS.includes(emojiStyle) ? emojiStyle : EmojiStyle.APPLE;
+  return `https://cdn.jsdelivr.net/npm/emoji-datasource-${set}/img/${set}/64/`;
 }