@primer/octovisuals-react 0.0.0-rc.5b79be3

package/README.md

@@ -0,0 +1,85 @@
+# @primer/octovisuals-react
+
+React components for GitHub's Primer Octovisuals illustrative icon library.
+
+## Installation
+
+```bash
+npm install @primer/octovisuals-react
+```
+
+## Usage
+
+```tsx
+import {SettingsIcon, GlobeIcon} from "@primer/octovisuals-react"
+
+function App() {
+  return (
+    <div>
+      {/* Decorative icon — hidden from assistive technology */}
+      <SettingsIcon />
+
+      {/* Labeled icon — announced by screen readers */}
+      <GlobeIcon aria-label="Global settings" />
+
+      {/* Custom size */}
+      <SettingsIcon size={48} />
+    </div>
+  )
+}
+```
+
+## Colors
+
+Icons are **two-tone**: primary shapes use `currentColor` (inherits from CSS
+`color` property), accent shapes use a fixed color (`#96A199`). This means the
+primary color automatically adapts to your text color, while the accent stays
+true to the design.
+
+## Props
+
+All icons accept the following props, plus any valid SVG element props:
+
+| Prop         | Type               | Default | Description                                        |
+| ------------ | ------------------ | ------- | -------------------------------------------------- |
+| `size`       | `number \| string` | `96`    | Width and height of the icon                       |
+| `aria-label` | `string`           | —       | Accessible label. When set, icon gets `role="img"` |
+
+When no `aria-label` is provided, icons render with `aria-hidden="true"`.
+
+## RSC / SSR
+
+All components are fully compatible with React Server Components and SSR.
+No `"use client"` directive, no React Context, no hooks — just pure render functions.
+
+## Metadata
+
+Access the full icon catalog for building search, documentation, or tooling:
+
+```ts
+import {icons} from "@primer/octovisuals-react/metadata"
+
+icons.forEach((icon) => {
+  console.log(icon.name, icon.keywords, icon.categories)
+})
+```
+
+## Custom Icons
+
+Use `createIcon` to create custom icons that match the same API:
+
+```tsx
+import {createIcon} from "@primer/octovisuals-react"
+
+export const MyCustomIcon = createIcon({
+  displayName: "MyCustomIcon",
+  viewBox: "0 0 96 96",
+  defaultWidth: 96,
+  defaultHeight: 96,
+  path: '<path d="..." />',
+})
+```
+
+## License
+
+UNLICENSED — All rights reserved. Copyright (c) 2026 GitHub, Inc.

package/dist/icons/ActionsIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const ActionsIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { ActionsIcon };
+//# sourceMappingURL=ActionsIcon.d.ts.map

package/dist/icons/ActionsIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ActionsIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,WAAW,wHAMf,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/icons/ActionsIcon.js

@@ -0,0 +1,78 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/ActionsIcon.tsx
+var ActionsIcon = forwardRef(function ActionsIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 96 96",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				stroke: "#96A199",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M2 43V64C2 72.8366 9.16345 80 18 80H32"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 13,
+				cy: 13,
+				r: 13,
+				fill: "#96A199",
+				transform: "matrix(-1 0 0 1 69 68)"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 9,
+				cy: 9,
+				r: 9,
+				fill: "#96A199",
+				transform: "matrix(-1 0 0 1 78 23)"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 9,
+				cy: 9,
+				r: 9,
+				fill: "#96A199",
+				transform: "matrix(-1 0 0 1 96 23)"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 9,
+				cy: 9,
+				r: 9,
+				fill: "#96A199",
+				transform: "matrix(-1 0 0 1 60 23)"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M2 2V16C2 24.8366 9.16345 32 18 32H32"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M21.4124 45.8358L33.6045 33.6437C34.5576 32.6906 34.5576 31.1452 33.6045 30.1921L21.4124 18"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				stroke: "#96A199",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M21.4124 93.8358L33.6045 81.6437C34.5576 80.6906 34.5576 79.1452 33.6045 78.1921L21.4124 66"
+			})
+		]
+	});
+});
+ActionsIcon.displayName = "ActionsIcon";
+//#endregion
+export { ActionsIcon };

package/dist/icons/AiModelIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const AiModelIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { AiModelIcon };
+//# sourceMappingURL=AiModelIcon.d.ts.map

package/dist/icons/AiModelIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiModelIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AiModelIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,WAAW,wHAMf,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/icons/AiModelIcon.js

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/AiModelIcon.tsx
+var AiModelIcon = forwardRef(function AiModelIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 96 96",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M48.0006 23.6608C49.1049 23.661 50.0005 24.5565 50.0006 25.6608V51.9088L73.8287 70.6129C74.6973 71.2949 74.8484 72.5527 74.1666 73.4215C73.4845 74.2901 72.2268 74.4413 71.358 73.7594L47.9791 55.4078L23.8034 73.7789C22.9239 74.447 21.6689 74.2755 21.0006 73.3961C20.3327 72.5166 20.5041 71.2615 21.3834 70.5934L46.0006 51.8873V25.6608C46.0007 24.5563 46.8961 23.6608 48.0006 23.6608Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M87 91C91.9706 91 96 86.9706 96 82C96 77.0294 91.9706 73 87 73C82.0294 73 78 77.0294 78 82C78 86.9706 82.0294 91 87 91Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M48 18C52.9706 18 57 13.9706 57 9C57 4.02944 52.9706 0 48 0C43.0294 0 39 4.02944 39 9C39 13.9706 43.0294 18 48 18Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M9 91C13.9706 91 18 86.9706 18 82C18 77.0294 13.9706 73 9 73C4.02944 73 0 77.0294 0 82C0 86.9706 4.02944 91 9 91Z"
+			})
+		]
+	});
+});
+AiModelIcon.displayName = "AiModelIcon";
+//#endregion
+export { AiModelIcon };

package/dist/icons/AlertCopilotIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const AlertCopilotIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { AlertCopilotIcon };
+//# sourceMappingURL=AlertCopilotIcon.d.ts.map

package/dist/icons/AlertCopilotIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertCopilotIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AlertCopilotIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,gBAAgB,wHAMpB,CAAC;AAEH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/icons/AlertCopilotIcon.js

@@ -0,0 +1,69 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/AlertCopilotIcon.tsx
+var AlertCopilotIcon = forwardRef(function AlertCopilotIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 97 97",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M24.0723 39L3.10359 74.9711C-0.00534241 80.3044 3.84176 87 10.015 87H86.1582C92.3166 87 96.1656 80.3333 93.0864 75L55.1457 9.28486C52.0305 3.88916 44.2156 3.96809 41.21 9.42561L39.3103 12.875"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M54.053 70C54.053 66.6863 51.3667 64 48.053 64C44.7393 64 42.053 66.6863 42.053 70C42.053 73.3137 44.7393 76 48.053 76C51.3667 76 54.053 73.3137 54.053 70Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M41.7733 35.9628L43.6414 54.0212C43.8752 56.2819 45.7802 58 48.053 58C50.3257 58 52.2307 56.2819 52.4646 54.0212L54.3327 35.9628C54.7179 32.2391 51.7966 29 48.053 29C44.3093 29 41.3881 32.2391 41.7733 35.9628Z"
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				clipPath: "url(#a)",
+				children: [
+					/* @__PURE__ */ jsx("path", {
+						fill: "currentColor",
+						fillRule: "evenodd",
+						d: "M35.936 25.4879C34.6448 27.7308 27.1476 33.0231 18.0531 33.0231C8.95851 33.0231 1.46133 27.7308 0.170187 25.4879C0.0757658 25.3238 0.0452881 25.1366 0.0452881 24.9473V20.9545C0.0452881 20.7889 0.070839 20.6245 0.132082 20.4707C0.690418 19.0687 2.15268 17.0322 4.03982 16.4858C4.29001 15.8435 4.66057 14.9046 5.00632 14.2115C4.94844 13.6812 4.92807 13.1343 4.92807 12.5817C4.92807 10.5852 5.35124 8.83407 6.62636 7.53002C7.22193 6.92094 7.96091 6.45374 8.83731 6.10253C10.9362 4.39737 13.9251 2.96289 18.0207 2.96289C22.1163 2.96289 25.1699 4.39737 27.2688 6.10253C28.1452 6.45374 28.8842 6.92094 29.4798 7.53002C30.7549 8.83407 31.1781 10.5852 31.1781 12.5817C31.1781 13.1343 31.1577 13.6812 31.0998 14.2115C31.4456 14.9046 31.8161 15.8435 32.0663 16.4858C33.9535 17.0322 35.4157 19.0687 35.9741 20.4707C36.0353 20.6245 36.0609 20.7889 36.0609 20.9545V24.9473C36.0609 25.1366 36.0304 25.3238 35.936 25.4879ZM19.2729 12.0977C19.2091 11.6004 19.1788 11.1551 19.1779 10.7572L19.1779 10.7258C19.1799 9.57155 19.4322 8.82052 19.8352 8.35926C20.347 7.77353 21.4048 7.32479 23.6341 7.56605C25.8928 7.81049 27.1553 8.37107 27.871 9.10307C28.564 9.81175 28.928 10.872 28.928 12.5817C28.928 14.3981 28.6663 15.4713 28.0907 16.1241C27.5434 16.7449 26.4656 17.25 24.1051 17.25C22.2903 17.25 21.2528 16.6598 20.5895 15.8435C19.8772 14.967 19.4764 13.6829 19.2729 12.0977ZM16.8332 12.0977C16.897 11.6004 16.9274 11.1551 16.9283 10.7572L16.9283 10.7258C16.9263 9.57154 16.674 8.82051 16.2709 8.35925C15.7591 7.77353 14.7014 7.32478 12.472 7.56605C10.2134 7.81048 8.95088 8.37106 8.23512 9.10306C7.54216 9.81175 7.1781 10.872 7.1781 12.5817C7.1781 14.3981 7.43988 15.4713 8.01545 16.1241C8.56276 16.7449 9.64051 17.25 12.0011 17.25C13.8158 17.25 14.8534 16.6597 15.5167 15.8435C16.2289 14.9669 16.6298 13.6829 16.8332 12.0977ZM18.3114 16.4993C18.2253 16.4998 18.3975 16.4993 18.3114 16.4993C18.2253 16.4993 17.8809 16.4998 17.7947 16.4993C17.636 16.7653 17.4594 17.0205 17.2628 17.2624C16.1083 18.6832 14.3849 19.5 12.0011 19.5C9.41364 19.5 7.5174 18.9615 6.32771 17.6121C6.26008 17.5354 6.19956 17.4551 6.19956 17.4551L6.05307 17.6121V27.4883C8.20529 28.658 12.8247 30.7569 18.0531 30.7569C23.2815 30.7569 27.9009 28.658 30.0531 27.4883V17.6121L29.9066 17.4551C29.9066 17.4551 29.857 17.523 29.7784 17.6121C28.5887 18.9615 26.6925 19.5 24.1051 19.5C21.7212 19.5 19.9979 18.6832 18.8433 17.2624C18.6468 17.0205 18.4702 16.7653 18.3114 16.4993Z",
+						clipRule: "evenodd"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						fill: "currentColor",
+						fillRule: "evenodd",
+						d: "M21.8031 21.375C22.6315 21.375 23.3031 22.0465 23.3031 22.875V25.875C23.3031 26.7034 22.6315 27.375 21.8031 27.375C20.9746 27.375 20.3031 26.7034 20.3031 25.875V22.875C20.3031 22.0465 20.9746 21.375 21.8031 21.375Z",
+						clipRule: "evenodd"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						fill: "currentColor",
+						fillRule: "evenodd",
+						d: "M14.3031 21.375C15.1315 21.375 15.8031 22.0465 15.8031 22.875V25.875C15.8031 26.7034 15.1315 27.375 14.3031 27.375C13.4746 27.375 12.8031 26.7034 12.8031 25.875V22.875C12.8031 22.0465 13.4746 21.375 14.3031 21.375Z",
+						clipRule: "evenodd"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: "a",
+				children: /* @__PURE__ */ jsx("rect", {
+					width: 36,
+					height: 36,
+					fill: "white",
+					transform: "translate(0.0531006)"
+				})
+			}) })
+		]
+	});
+});
+AlertCopilotIcon.displayName = "AlertCopilotIcon";
+//#endregion
+export { AlertCopilotIcon };

package/dist/icons/AlertIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const AlertIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { AlertIcon };
+//# sourceMappingURL=AlertIcon.d.ts.map

package/dist/icons/AlertIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AlertIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,SAAS,wHAMb,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/icons/AlertIcon.js

@@ -0,0 +1,37 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/AlertIcon.tsx
+var AlertIcon = forwardRef(function AlertIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 97 96",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M41.1918 7.99999C44.271 2.66666 51.969 2.66667 55.0482 8L93.1534 74C96.2326 79.3333 92.3835 86 86.2251 86H10.0149C3.8565 86 0.00750294 79.3333 3.0867 74L41.1918 7.99999Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M54.1199 69C54.1199 65.6863 51.4336 63 48.1199 63C44.8062 63 42.1199 65.6863 42.1199 69C42.1199 72.3137 44.8062 75 48.1199 75C51.4336 75 54.1199 72.3137 54.1199 69Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M41.8402 34.9628L43.7083 53.0212C43.9422 55.2819 45.8471 57 48.1199 57C50.3927 57 52.2976 55.2819 52.5315 53.0212L54.3996 34.9628C54.7848 31.2391 51.8635 28 48.1199 28C44.3763 28 41.455 31.2391 41.8402 34.9628Z"
+			})
+		]
+	});
+});
+AlertIcon.displayName = "AlertIcon";
+//#endregion
+export { AlertIcon };

package/dist/icons/ArrowDownIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowDownIcon };
+//# sourceMappingURL=ArrowDownIcon.d.ts.map

package/dist/icons/ArrowDownIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowDownIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ArrowDownIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,aAAa,wHAMjB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/icons/ArrowDownIcon.js

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/ArrowDownIcon.tsx
+var ArrowDownIcon = forwardRef(function ArrowDownIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 97 96",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M50.9977 94.3342C49.2636 96.0681 46.4516 96.0681 44.7174 94.3342L32.3014 81.9182C31.5205 81.1372 31.5206 79.8711 32.3014 79.09C33.0825 78.309 34.3485 78.309 35.1296 79.09L45.7155 89.676L45.7155 28.3615C45.7156 27.2571 46.611 26.3615 47.7155 26.3615C48.82 26.3615 49.7154 27.2571 49.7155 28.3615L49.7155 89.9602L60.5856 79.09C61.3667 78.309 62.6327 78.309 63.4137 79.09C64.1948 79.8711 64.1948 81.1371 63.4137 81.9182L50.9977 94.3342Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M19.3671 68.0196C17.633 69.7534 14.821 69.7534 13.0868 68.0196L0.670832 55.6026C-0.110204 54.8216 -0.110176 53.5555 0.670832 52.7745C1.45188 51.9934 2.71791 51.9934 3.49896 52.7745L13.9999 63.2754L13.9999 2.00005C13.9999 0.89548 14.8954 4.89203e-05 15.9999 4.90169e-05C17.1045 5.52985e-05 17.9999 0.895485 17.9999 2.00005L17.9999 63.7295L28.955 52.7745C29.7361 51.9934 31.0021 51.9934 31.7831 52.7745C32.5641 53.5555 32.5642 54.8216 31.7831 55.6026L19.3671 68.0196Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M83.1399 68.0186C81.4058 69.7525 78.5938 69.7525 76.8597 68.0186L64.4436 55.6025C63.6627 54.8216 63.6628 53.5555 64.4436 52.7744C65.2247 51.9934 66.4907 51.9934 67.2718 52.7744L78.0003 63.5029L78.0003 2.00001C78.0003 0.895445 78.8957 5.70447e-06 80.0003 5.80103e-06C81.1047 0.000166684 82.0003 0.895545 82.0003 2.00001L82.0003 63.502L92.7278 52.7744C93.5089 51.9934 94.7749 51.9934 95.5559 52.7744C96.337 53.5555 96.337 54.8215 95.5559 55.6025L83.1399 68.0186Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M48 0.000182319C43.0294 0.000181884 39 4.02961 39 9.00017C39 13.9707 43.0294 18.0002 48 18.0002C52.9705 18.0002 57 13.9707 57 9.00017C57 4.02961 52.9705 0.000182753 48 0.000182319Z"
+			})
+		]
+	});
+});
+ArrowDownIcon.displayName = "ArrowDownIcon";
+//#endregion
+export { ArrowDownIcon };

package/dist/icons/ArrowLeftIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const ArrowLeftIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowLeftIcon };
+//# sourceMappingURL=ArrowLeftIcon.d.ts.map

package/dist/icons/ArrowLeftIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowLeftIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ArrowLeftIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,aAAa,wHAMjB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/icons/ArrowLeftIcon.js

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/ArrowLeftIcon.tsx
+var ArrowLeftIcon = forwardRef(function ArrowLeftIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 96 97",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M1.66589 50.9981C-0.0680728 49.2639 -0.0680729 46.452 1.66589 44.7178L14.0819 32.3018C14.8629 31.5207 16.13 31.5207 16.911 32.3018C17.6916 33.0828 17.6917 34.349 16.911 35.1299L6.32409 45.7158L67.6385 45.7158C68.743 45.7159 69.6385 46.6113 69.6385 47.7158C69.6383 48.8202 68.7429 49.7158 67.6385 49.7158L6.04089 49.7158L16.911 60.586C17.6916 61.367 17.6917 62.6331 16.911 63.4141C16.13 64.1951 14.863 64.1951 14.0819 63.4141L1.66589 50.9981Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M27.9813 19.3668C26.2474 17.6327 26.2474 14.8216 27.9813 13.0875L40.3974 0.670492C41.1784 -0.110557 42.4454 -0.110557 43.2265 0.670492C44.0072 1.45141 44.007 2.71758 43.2265 3.49862L32.7255 13.9996L93.9999 13.9996C95.1044 13.9996 95.9997 14.8952 95.9999 15.9996C95.9999 17.1042 95.1045 17.9996 93.9999 17.9996L32.2704 17.9996L43.2265 28.9547C44.0074 29.7357 44.0075 31.0028 43.2265 31.7838C42.4455 32.5648 41.1784 32.5647 40.3974 31.7838L27.9813 19.3668Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M27.9815 83.1403C26.2475 81.4061 26.2475 78.5942 27.9815 76.86L40.3975 64.444C41.1786 63.6629 42.4456 63.6629 43.2266 64.444C44.0072 65.225 44.0073 66.4912 43.2266 67.2721L32.4981 77.9997L94.0001 77.9997C95.1045 77.9997 95.9999 78.8952 96.0001 79.9997C96.0001 81.1042 95.1046 81.9997 94.0001 81.9997L32.4981 81.9997L43.2266 92.7282C44.0072 93.5092 44.0073 94.7754 43.2266 95.5563C42.4456 96.3374 41.1786 96.3374 40.3975 95.5563L27.9815 83.1403Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M96 48C96 43.0294 91.9706 39 87 39C82.0294 39 78 43.0294 78 48C78 52.9705 82.0294 57 87 57C91.9706 57 96 52.9705 96 48Z"
+			})
+		]
+	});
+});
+ArrowLeftIcon.displayName = "ArrowLeftIcon";
+//#endregion
+export { ArrowLeftIcon };

package/dist/icons/ArrowRightIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const ArrowRightIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowRightIcon };
+//# sourceMappingURL=ArrowRightIcon.d.ts.map

package/dist/icons/ArrowRightIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowRightIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ArrowRightIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,cAAc,wHAMlB,CAAC;AAEH,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/icons/ArrowRightIcon.js

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/ArrowRightIcon.tsx
+var ArrowRightIcon = forwardRef(function ArrowRightIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 96 97",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M94.3343 45.144C96.0683 46.8782 96.0683 49.6901 94.3343 51.4243L81.9183 63.8403C81.1372 64.6214 79.8702 64.6214 79.0892 63.8403C78.3084 63.0593 78.3084 61.7932 79.0892 61.0122L89.6751 50.4262L28.3616 50.4262C27.2571 50.4262 26.3616 49.5308 26.3616 48.4262C26.3618 47.3218 27.2571 46.4262 28.3616 46.4262L89.9593 46.4262L79.0892 35.5561C78.3084 34.7751 78.3084 33.509 79.0892 32.728C79.8702 31.9469 81.1372 31.9469 81.9183 32.728L94.3343 45.144Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M68.0187 76.7746C69.7527 78.5088 69.7527 81.3208 68.0187 83.0549L55.6027 95.4709C54.8217 96.252 53.5547 96.252 52.7736 95.4709C51.993 94.6899 51.9929 93.4237 52.7736 92.6428L63.2756 82.1418L2.00019 82.1418C0.895621 82.1418 0.000189554 81.2464 0.000189602 80.1418C0.000277281 79.0373 0.895675 78.1418 2.00019 78.1418L63.7287 78.1418L52.7736 67.1867C51.993 66.4057 51.9929 65.1396 52.7736 64.3586C53.5547 63.5776 54.8217 63.5776 55.6027 64.3586L68.0187 76.7746Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M68.0187 13.0018C69.7527 14.736 69.7527 17.5479 68.0187 19.2821L55.6027 31.6981C54.8217 32.4791 53.5547 32.4791 52.7736 31.6981C51.9928 30.9171 51.9928 29.651 52.7736 28.87L63.5021 18.1415L2.00019 18.1414C0.895621 18.1414 0.000189564 17.246 0.000189612 16.1414C0.000431896 15.0371 0.895771 14.1414 2.00019 14.1414L63.5012 14.1415L52.7736 3.41391C51.9928 2.63293 51.9929 1.3668 52.7736 0.585786C53.5547 -0.195263 54.8217 -0.195263 55.6027 0.585786L68.0187 13.0018Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M-3.93403e-07 48.1419C-6.10673e-07 53.1124 4.02942 57.1418 8.99999 57.1418C13.9706 57.1418 18 53.1124 18 48.1419C18 43.1713 13.9706 39.1418 8.99999 39.1418C4.02943 39.1418 -1.76133e-07 43.1713 -3.93403e-07 48.1419Z"
+			})
+		]
+	});
+});
+ArrowRightIcon.displayName = "ArrowRightIcon";
+//#endregion
+export { ArrowRightIcon };

package/dist/icons/ArrowUpIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowUpIcon };
+//# sourceMappingURL=ArrowUpIcon.d.ts.map

package/dist/icons/ArrowUpIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowUpIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ArrowUpIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,WAAW,wHAMf,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/icons/ArrowUpIcon.js

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/ArrowUpIcon.tsx
+var ArrowUpIcon = forwardRef(function ArrowUpIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 97 96",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M45.144 1.66589C46.8781 -0.0680721 49.6901 -0.0680721 51.4243 1.66589L63.8403 14.0819C64.6213 14.863 64.6213 16.13 63.8403 16.911C63.0593 17.6916 61.7931 17.6917 61.0121 16.911L50.4262 6.32409V67.6385C50.4261 68.743 49.5307 69.6385 48.4262 69.6385C47.3219 69.6383 46.4263 68.7429 46.4262 67.6385V6.04089L35.5561 16.911C34.7751 17.6916 33.5089 17.6917 32.728 16.911C31.9469 16.13 31.9469 14.863 32.728 14.0819L45.144 1.66589Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M76.7753 27.9813C78.5095 26.2474 81.3205 26.2474 83.0546 27.9813L95.4716 40.3974C96.2527 41.1784 96.2527 42.4454 95.4716 43.2265C94.6907 44.0072 93.4245 44.007 92.6435 43.2265L82.1425 32.7255V93.9999C82.1425 95.1044 81.2469 95.9997 80.1425 95.9999C79.038 95.9999 78.1425 95.1045 78.1425 93.9999V32.2704L67.1874 43.2265C66.4064 44.0074 65.1394 44.0075 64.3583 43.2265C63.5773 42.4455 63.5774 41.1784 64.3583 40.3974L76.7753 27.9813Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M13.0018 27.9815C14.736 26.2475 17.5479 26.2475 19.2821 27.9815L31.6981 40.3975C32.4791 41.1786 32.4791 42.4456 31.6981 43.2266C30.9171 44.0072 29.6509 44.0073 28.87 43.2266L18.1424 32.4981V94.0001C18.1424 95.1045 17.2469 95.9999 16.1424 96.0001C15.0379 96.0001 14.1424 95.1046 14.1424 94.0001V32.4981L3.41391 43.2266C2.63291 44.0072 1.36673 44.0073 0.585787 43.2266C-0.195262 42.4456 -0.195263 41.1786 0.585787 40.3975L13.0018 27.9815Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M48.1421 96C53.1127 96 57.1421 91.9706 57.1421 87C57.1421 82.0294 53.1127 78 48.1421 78C43.1716 78 39.1421 82.0294 39.1421 87C39.1421 91.9706 43.1716 96 48.1421 96Z"
+			})
+		]
+	});
+});
+ArrowUpIcon.displayName = "ArrowUpIcon";
+//#endregion
+export { ArrowUpIcon };

package/dist/icons/BracketsIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const BracketsIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { BracketsIcon };
+//# sourceMappingURL=BracketsIcon.d.ts.map

package/dist/icons/BracketsIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BracketsIcon.d.ts","sourceRoot":"","sources":["../../src/icons/BracketsIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,YAAY,wHAMhB,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/icons/BracketsIcon.js

@@ -0,0 +1,46 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/BracketsIcon.tsx
+var BracketsIcon = forwardRef(function BracketsIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size ?? 96,
+		height: size ?? 96,
+		viewBox: "0 0 96 96",
+		fill: "none",
+		"aria-hidden": ariaLabel ? void 0 : true,
+		"aria-label": ariaLabel,
+		role: ariaLabel ? "img" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M22.9332 22.2415C23.6797 21.4276 24.9453 21.3729 25.7593 22.1194C26.5728 22.8659 26.6274 24.1307 25.8814 24.9446L5.53961 47.1272C4.84699 47.8825 4.83723 49.0392 5.51715 49.8059L25.8248 72.7063C26.5575 73.5327 26.481 74.7977 25.6548 75.5306C24.8284 76.2632 23.5644 76.1869 22.8316 75.3606L2.52398 52.4602C0.484291 50.16 0.513655 46.69 2.59137 44.4241L22.9332 22.2415ZM70.2418 22.1194C71.0558 21.373 72.3204 21.4276 73.067 22.2415L93.4087 44.4241C95.4866 46.69 95.5158 50.16 93.4761 52.4602L73.1685 75.3606C72.4356 76.1869 71.1716 76.2633 70.3453 75.5306C69.5189 74.7977 69.4435 73.5328 70.1763 72.7063L90.483 49.8059C91.1627 49.0393 91.1539 47.8825 90.4615 47.1272L70.1197 24.9446C69.3732 24.1306 69.4278 22.866 70.2418 22.1194Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M48 56.9491C52.9425 56.9491 56.9492 52.9425 56.9492 48C56.9492 43.0575 52.9425 39.0508 48 39.0508C43.0576 39.0508 39.0509 43.0575 39.0509 48C39.0509 52.9425 43.0576 56.9491 48 56.9491Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M48 39.0508C52.9425 39.0508 56.9492 35.0442 56.9492 30.1017C56.9492 25.1592 52.9425 21.1525 48 21.1525C43.0576 21.1525 39.0509 25.1592 39.0509 30.1017C39.0509 35.0442 43.0576 39.0508 48 39.0508Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M48 92.7457C52.9425 92.7457 56.9492 88.7391 56.9492 83.7966C56.9492 78.8541 52.9425 74.8474 48 74.8474C43.0576 74.8474 39.0509 78.8541 39.0509 83.7966C39.0509 88.7391 43.0576 92.7457 48 92.7457Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M48 21.1525C52.9424 21.1525 56.9491 17.1459 56.9491 12.2034C56.9491 7.26089 52.9424 3.25421 48 3.25421C43.0575 3.25421 39.0508 7.26089 39.0508 12.2034C39.0508 17.1459 43.0575 21.1525 48 21.1525Z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#96A199",
+				d: "M48 74.8474C52.9425 74.8474 56.9492 70.8407 56.9492 65.8983C56.9492 60.9558 52.9425 56.9491 48 56.9491C43.0576 56.9491 39.0509 60.9558 39.0509 65.8983C39.0509 70.8407 43.0576 74.8474 48 74.8474Z"
+			})
+		]
+	});
+});
+BracketsIcon.displayName = "BracketsIcon";
+//#endregion
+export { BracketsIcon };

package/dist/icons/BranchIcon.d.ts

@@ -0,0 +1,4 @@
+import type { OctovisualProps } from '../types.js';
+declare const BranchIcon: import("react").ForwardRefExoticComponent<Omit<OctovisualProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { BranchIcon };
+//# sourceMappingURL=BranchIcon.d.ts.map

package/dist/icons/BranchIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BranchIcon.d.ts","sourceRoot":"","sources":["../../src/icons/BranchIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,UAAU,wHAMd,CAAC;AAEH,OAAO,EAAE,UAAU,EAAE,CAAC"}