@primer/octovisuals-react 0.3.0 → 0.3.1-rc.274166a

package/README.md

@@ -40,10 +40,11 @@ true to the design.
 
 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"` |
+| Prop         | Type      | Default | Description                                        |
+| ------------ | --------- | ------- | -------------------------------------------------- |
+| `size`       | `number`  | `96`    | Width and height of the icon in pixels             |
+| `aria-label` | `string`  | —       | Accessible label. When set, icon gets `role="img"` |
+| `animate`    | `boolean` | `false` | Plays a stroke-draw reveal animation on mount      |
 
 When no `aria-label` is provided, icons render with `aria-hidden="true"`.
 

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

@@ -1 +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"}
+{"version":3,"file":"ActionsIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ActionsIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,QAAA,MAAM,WAAW,wHAOf,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/icons/ActionsIcon.js

@@ -1,8 +1,9 @@
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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", {
+var ANIMATION_STYLE = "@keyframes octovisual-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes octovisual-fade{from{opacity:0}to{opacity:1}}[data-octovisual-animation] path[stroke]{stroke-dasharray:1;stroke-dashoffset:1;animation:octovisual-draw 1s cubic-bezier(0.22,1,0.36,1) forwards}[data-octovisual-animation] path:not([stroke]){opacity:0;animation:octovisual-fade 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards}@media(prefers-reduced-motion:reduce){[data-octovisual-animation] path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}";
+var ActionsIcon = forwardRef(function ActionsIcon({ size, "aria-label": ariaLabel, animate, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [animate && /* @__PURE__ */ jsx("style", { children: ANIMATION_STYLE }), /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: size ?? 96,
 		height: size ?? 96,
@@ -11,67 +12,82 @@ var ActionsIcon = forwardRef(function ActionsIcon({ size, "aria-label": ariaLabe
 		"aria-hidden": ariaLabel ? void 0 : true,
 		"aria-label": ariaLabel,
 		role: ariaLabel ? "img" : void 0,
+		"data-octovisual-animation": animate ? "" : 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"
+		children: [/* @__PURE__ */ jsxs("g", {
+			clipPath: "url(#actions_a)",
+			children: [
+				/* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					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", {
+					pathLength: 1,
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeMiterlimit: 10,
+					strokeWidth: 4,
+					d: "M2 2V16C2 24.8366 9.16345 32 18 32H32"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					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", {
+					pathLength: 1,
+					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"
+				})
+			]
+		}), /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+			id: "actions_a",
+			children: /* @__PURE__ */ jsx("rect", {
+				width: 96,
+				height: 96,
+				fill: "white"
 			})
-		]
-	});
+		}) })]
+	})] });
 });
 ActionsIcon.displayName = "ActionsIcon";
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"AiModelIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AiModelIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,QAAA,MAAM,WAAW,wHAOf,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/icons/AiModelIcon.js

@@ -1,8 +1,9 @@
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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", {
+var ANIMATION_STYLE = "@keyframes octovisual-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes octovisual-fade{from{opacity:0}to{opacity:1}}[data-octovisual-animation] path[stroke]{stroke-dasharray:1;stroke-dashoffset:1;animation:octovisual-draw 1s cubic-bezier(0.22,1,0.36,1) forwards}[data-octovisual-animation] path:not([stroke]){opacity:0;animation:octovisual-fade 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards}@media(prefers-reduced-motion:reduce){[data-octovisual-animation] path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}";
+var AiModelIcon = forwardRef(function AiModelIcon({ size, "aria-label": ariaLabel, animate, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [animate && /* @__PURE__ */ jsx("style", { children: ANIMATION_STYLE }), /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: size ?? 96,
 		height: size ?? 96,
@@ -11,27 +12,51 @@ var AiModelIcon = forwardRef(function AiModelIcon({ size, "aria-label": ariaLabe
 		"aria-hidden": ariaLabel ? void 0 : true,
 		"aria-label": ariaLabel,
 		role: ariaLabel ? "img" : void 0,
+		"data-octovisual-animation": animate ? "" : 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"
+				pathLength: 1,
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M48 53L23 72"
 			}),
 			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M48 53L73 72"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeMiterlimit: 10,
+				strokeWidth: 4,
+				d: "M48.0098 53L48.0098 26"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
 				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", {
+				pathLength: 1,
 				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", {
+				pathLength: 1,
 				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

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

@@ -1 +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"}
+{"version":3,"file":"AlertCopilotIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AlertCopilotIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,QAAA,MAAM,gBAAgB,wHAOpB,CAAC;AAEH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/icons/AlertCopilotIcon.js

@@ -1,68 +1,85 @@
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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", {
+var ANIMATION_STYLE = "@keyframes octovisual-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes octovisual-fade{from{opacity:0}to{opacity:1}}[data-octovisual-animation] path[stroke]{stroke-dasharray:1;stroke-dashoffset:1;animation:octovisual-draw 1s cubic-bezier(0.22,1,0.36,1) forwards}[data-octovisual-animation] path:not([stroke]){opacity:0;animation:octovisual-fade 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards}@media(prefers-reduced-motion:reduce){[data-octovisual-animation] path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}";
+var AlertCopilotIcon = forwardRef(function AlertCopilotIcon({ size, "aria-label": ariaLabel, animate, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [animate && /* @__PURE__ */ jsx("style", { children: ANIMATION_STYLE }), /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: size ?? 96,
 		height: size ?? 96,
-		viewBox: "0 0 97 97",
+		viewBox: "0 0 96 96",
 		fill: "none",
 		"aria-hidden": ariaLabel ? void 0 : true,
 		"aria-label": ariaLabel,
 		role: ariaLabel ? "img" : void 0,
+		"data-octovisual-animation": animate ? "" : 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(#alert-copilot_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: "alert-copilot_a",
-				children: /* @__PURE__ */ jsx("rect", {
-					width: 36,
-					height: 36,
-					fill: "white",
-					transform: "translate(0.0531006)"
+		children: [/* @__PURE__ */ jsxs("g", {
+			clipPath: "url(#alert-copilot_a)",
+			children: [
+				/* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeMiterlimit: 10,
+					strokeWidth: 4,
+					d: "M24.0193 38L3.05061 73.9711C-0.0583209 79.3044 3.78878 86 9.96205 86H86.1052C92.2636 86 96.1126 79.3333 93.0334 74L55.0928 8.28486C51.9776 2.88916 44.1626 2.96809 41.157 8.42561L39.2573 11.875"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					fill: "#96A199",
+					d: "M54 69C54 65.6863 51.3137 63 48 63C44.6863 63 42 65.6863 42 69C42 72.3137 44.6863 75 48 75C51.3137 75 54 72.3137 54 69Z"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					fill: "#96A199",
+					d: "M41.7203 34.9628L43.5884 53.0212C43.8223 55.2819 45.7272 57 48 57C50.2728 57 52.1777 55.2819 52.4116 53.0212L54.2797 34.9628C54.6649 31.2391 51.7436 28 48 28C44.2564 28 41.3351 31.2391 41.7203 34.9628Z"
+				}),
+				/* @__PURE__ */ jsxs("g", {
+					clipPath: "url(#alert-copilot_b)",
+					children: [
+						/* @__PURE__ */ jsx("path", {
+							pathLength: 1,
+							fill: "currentColor",
+							fillRule: "evenodd",
+							d: "M35.8829 24.4879C34.5917 26.7308 27.0945 32.0231 18 32.0231C8.90541 32.0231 1.40823 26.7308 0.117087 24.4879C0.0226652 24.3238 -0.0078125 24.1366 -0.0078125 23.9473V19.9545C-0.0078125 19.7889 0.0177384 19.6245 0.0789817 19.4707C0.637317 18.0687 2.09958 16.0322 3.98672 15.4858C4.23691 14.8435 4.60747 13.9046 4.95322 13.2115C4.89534 12.6812 4.87497 12.1343 4.87497 11.5817C4.87497 9.58523 5.29814 7.83407 6.57326 6.53002C7.16883 5.92094 7.90781 5.45374 8.78421 5.10253C10.8831 3.39737 13.872 1.96289 17.9676 1.96289C22.0632 1.96289 25.1168 3.39737 27.2157 5.10253C28.0921 5.45374 28.8311 5.92094 29.4267 6.53002C30.7018 7.83407 31.125 9.58523 31.125 11.5817C31.125 12.1343 31.1046 12.6812 31.0467 13.2115C31.3925 13.9046 31.763 14.8435 32.0132 15.4858C33.9004 16.0322 35.3626 18.0687 35.921 19.4707C35.9822 19.6245 36.0078 19.7889 36.0078 19.9545V23.9473C36.0078 24.1366 35.9773 24.3238 35.8829 24.4879ZM19.2198 11.0977C19.156 10.6004 19.1257 10.1551 19.1248 9.75722L19.1248 9.72577C19.1268 8.57155 19.3791 7.82052 19.7821 7.35926C20.2939 6.77353 21.3517 6.32479 23.581 6.56605C25.8397 6.81049 27.1022 7.37107 27.8179 8.10307C28.5109 8.81175 28.8749 9.87204 28.8749 11.5817C28.8749 13.3981 28.6132 14.4713 28.0376 15.1241C27.4903 15.7449 26.4125 16.25 24.052 16.25C22.2372 16.25 21.1997 15.6598 20.5364 14.8435C19.8241 13.967 19.4233 12.6829 19.2198 11.0977ZM16.7801 11.0977C16.8439 10.6004 16.8743 10.1551 16.8752 9.75721L16.8752 9.72576C16.8732 8.57154 16.6209 7.82051 16.2178 7.35925C15.706 6.77353 14.6483 6.32478 12.4189 6.56605C10.1603 6.81048 8.89778 7.37106 8.18202 8.10306C7.48906 8.81175 7.125 9.87204 7.125 11.5817C7.125 13.3981 7.38678 14.4713 7.96235 15.1241C8.50966 15.7449 9.58741 16.25 11.948 16.25C13.7627 16.25 14.8003 15.6597 15.4636 14.8435C16.1758 13.9669 16.5767 12.6829 16.7801 11.0977ZM18.2583 15.4993C18.1722 15.4998 18.3444 15.4993 18.2583 15.4993C18.1722 15.4993 17.8278 15.4998 17.7416 15.4993C17.5829 15.7653 17.4063 16.0205 17.2097 16.2624C16.0552 17.6832 14.3318 18.5 11.948 18.5C9.36054 18.5 7.4643 17.9615 6.27461 16.6121C6.20698 16.5354 6.14646 16.4551 6.14646 16.4551L5.99997 16.6121V26.4883C8.15219 27.658 12.7716 29.7569 18 29.7569C23.2284 29.7569 27.8478 27.658 30 26.4883V16.6121L29.8535 16.4551C29.8535 16.4551 29.8039 16.523 29.7253 16.6121C28.5356 17.9615 26.6394 18.5 24.052 18.5C21.6681 18.5 19.9447 17.6832 18.7902 16.2624C18.5937 16.0205 18.4171 15.7653 18.2583 15.4993Z",
+							clipRule: "evenodd"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							pathLength: 1,
+							fill: "currentColor",
+							fillRule: "evenodd",
+							d: "M21.75 20.375C22.5784 20.375 23.25 21.0465 23.25 21.875V24.875C23.25 25.7034 22.5784 26.375 21.75 26.375C20.9215 26.375 20.25 25.7034 20.25 24.875V21.875C20.25 21.0465 20.9215 20.375 21.75 20.375Z",
+							clipRule: "evenodd"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							pathLength: 1,
+							fill: "currentColor",
+							fillRule: "evenodd",
+							d: "M14.25 20.375C15.0784 20.375 15.75 21.0465 15.75 21.875V24.875C15.75 25.7034 15.0784 26.375 14.25 26.375C13.4215 26.375 12.75 25.7034 12.75 24.875V21.875C12.75 21.0465 13.4215 20.375 14.25 20.375Z",
+							clipRule: "evenodd"
+						})
+					]
 				})
-			}) })
-		]
-	});
+			]
+		}), /* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("clipPath", {
+			id: "alert-copilot_a",
+			children: /* @__PURE__ */ jsx("rect", {
+				width: 96,
+				height: 96,
+				fill: "white"
+			})
+		}), /* @__PURE__ */ jsx("clipPath", {
+			id: "alert-copilot_b",
+			children: /* @__PURE__ */ jsx("rect", {
+				width: 36,
+				height: 36,
+				fill: "white",
+				transform: "translate(0 -1)"
+			})
+		})] })]
+	})] });
 });
 AlertCopilotIcon.displayName = "AlertCopilotIcon";
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"AlertIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AlertIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,QAAA,MAAM,SAAS,wHAOb,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/icons/AlertIcon.js

@@ -1,36 +1,51 @@
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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", {
+var ANIMATION_STYLE = "@keyframes octovisual-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes octovisual-fade{from{opacity:0}to{opacity:1}}[data-octovisual-animation] path[stroke]{stroke-dasharray:1;stroke-dashoffset:1;animation:octovisual-draw 1s cubic-bezier(0.22,1,0.36,1) forwards}[data-octovisual-animation] path:not([stroke]){opacity:0;animation:octovisual-fade 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards}@media(prefers-reduced-motion:reduce){[data-octovisual-animation] path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}";
+var AlertIcon = forwardRef(function AlertIcon({ size, "aria-label": ariaLabel, animate, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [animate && /* @__PURE__ */ jsx("style", { children: ANIMATION_STYLE }), /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: size ?? 96,
 		height: size ?? 96,
-		viewBox: "0 0 97 96",
+		viewBox: "0 0 96 96",
 		fill: "none",
 		"aria-hidden": ariaLabel ? void 0 : true,
 		"aria-label": ariaLabel,
 		role: ariaLabel ? "img" : void 0,
+		"data-octovisual-animation": animate ? "" : 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"
+		children: [/* @__PURE__ */ jsxs("g", {
+			clipPath: "url(#alert_a)",
+			children: [
+				/* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeMiterlimit: 10,
+					strokeWidth: 4,
+					d: "M41.0718 7.99999C44.151 2.66666 51.849 2.66667 54.9282 8L93.0333 74C96.1125 79.3333 92.2635 86 86.1051 86H9.89487C3.73647 86 -0.112523 79.3333 2.96668 74L41.0718 7.99999Z"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					fill: "#96A199",
+					d: "M54 69C54 65.6863 51.3137 63 48 63C44.6863 63 42 65.6863 42 69C42 72.3137 44.6863 75 48 75C51.3137 75 54 72.3137 54 69Z"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					fill: "#96A199",
+					d: "M41.7203 34.9628L43.5884 53.0212C43.8223 55.2819 45.7272 57 48 57C50.2728 57 52.1777 55.2819 52.4116 53.0212L54.2797 34.9628C54.6649 31.2391 51.7436 28 48 28C44.2564 28 41.3351 31.2391 41.7203 34.9628Z"
+				})
+			]
+		}), /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+			id: "alert_a",
+			children: /* @__PURE__ */ jsx("rect", {
+				width: 96,
+				height: 96,
+				fill: "white"
 			})
-		]
-	});
+		}) })]
+	})] });
 });
 AlertIcon.displayName = "AlertIcon";
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"ArrowDownIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ArrowDownIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,QAAA,MAAM,aAAa,wHAOjB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/icons/ArrowDownIcon.js

@@ -1,37 +1,97 @@
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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", {
+var ANIMATION_STYLE = "@keyframes octovisual-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes octovisual-fade{from{opacity:0}to{opacity:1}}[data-octovisual-animation] path[stroke]{stroke-dasharray:1;stroke-dashoffset:1;animation:octovisual-draw 1s cubic-bezier(0.22,1,0.36,1) forwards}[data-octovisual-animation] path:not([stroke]){opacity:0;animation:octovisual-fade 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards}@media(prefers-reduced-motion:reduce){[data-octovisual-animation] path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}";
+var ArrowDownIcon = forwardRef(function ArrowDownIcon({ size, "aria-label": ariaLabel, animate, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [animate && /* @__PURE__ */ jsx("style", { children: ANIMATION_STYLE }), /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: size ?? 96,
 		height: size ?? 96,
-		viewBox: "0 0 97 96",
+		viewBox: "0 0 96 96",
 		fill: "none",
 		"aria-hidden": ariaLabel ? void 0 : true,
 		"aria-label": ariaLabel,
 		role: ariaLabel ? "img" : void 0,
+		"data-octovisual-animation": animate ? "" : 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"
+		children: [/* @__PURE__ */ jsx("g", {
+			clipPath: "url(#arrow-down_a)",
+			children: /* @__PURE__ */ jsxs("g", {
+				clipPath: "url(#arrow-down_b)",
+				children: [
+					/* @__PURE__ */ jsx("path", {
+						pathLength: 1,
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeMiterlimit: 10,
+						strokeWidth: 4,
+						d: "M33.7158 80.5036L46.1321 92.9199C47.0852 93.8731 48.6306 93.8731 49.5837 92.9199L62 80.5036"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						pathLength: 1,
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeMiterlimit: 10,
+						strokeWidth: 4,
+						d: "M47.7156 28.3616L47.7156 92.3616"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						pathLength: 1,
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeMiterlimit: 10,
+						strokeWidth: 4,
+						d: "M2.08492 54.1882L14.5012 66.6045C15.4544 67.5576 16.9997 67.5576 17.9529 66.6045L30.3692 54.1882"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						pathLength: 1,
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeMiterlimit: 10,
+						strokeWidth: 4,
+						d: "M16 1.99976L16 65.9998"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						pathLength: 1,
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeMiterlimit: 10,
+						strokeWidth: 4,
+						d: "M65.8579 54.1879L78.2742 66.6043C79.2273 67.5574 80.7727 67.5574 81.7258 66.6043L94.1421 54.1879"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						pathLength: 1,
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeMiterlimit: 10,
+						strokeWidth: 4,
+						d: "M80 1.99976L80 65.9998"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						pathLength: 1,
+						fill: "#96A199",
+						d: "M48 -7.86807e-07C43.0294 -1.22135e-06 39 4.02942 39 8.99999C39 13.9706 43.0294 18 48 18C52.9705 18 57 13.9706 57 8.99999C57 4.02943 52.9705 -3.52267e-07 48 -7.86807e-07Z"
+					})
+				]
 			})
-		]
-	});
+		}), /* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("clipPath", {
+			id: "arrow-down_a",
+			children: /* @__PURE__ */ jsx("rect", {
+				width: 96,
+				height: 96,
+				fill: "white"
+			})
+		}), /* @__PURE__ */ jsx("clipPath", {
+			id: "arrow-down_b",
+			children: /* @__PURE__ */ jsx("rect", {
+				width: 96,
+				height: 96,
+				fill: "white",
+				transform: "translate(96) rotate(90)"
+			})
+		})] })]
+	})] });
 });
 ArrowDownIcon.displayName = "ArrowDownIcon";
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"ArrowLeftIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ArrowLeftIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,QAAA,MAAM,aAAa,wHAOjB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,CAAC"}