@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.1

package/lib/components/system-debug-trace/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/icons/index.js","sources":["../../../../src/components/system-debug-trace/icons/index.ts"],"sourcesContent":["export * from './ai-router'\nexport * from './ai-specialist'\nexport * from './brain'\nexport * from './caret-down'\nexport * from './caret-up'\nexport * from './circle-check'\nexport * from './file-pdf'\nexport * from './file-word'\nexport * from './hand'\nexport * from './head-set'\nexport * from './life-ring'\nexport * from './link'\nexport * from './quote-right'\nexport * from './screwdriver-wrench'\nexport * from './split'\nexport * from './wand'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAA2B;AACI;AACR;AACK;AACF;AACI;AACJ;AACC;AACL;AACI;AACC;AACL;AACO;AACO;AACb;AACD"}

package/lib/components/system-debug-trace/icons/life-ring.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../types.js';
+export declare const LifeRingSvg: ({ color }: IconProps) => import("react").JSX.Element;

package/lib/components/system-debug-trace/icons/life-ring.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../constants.js";
+
+
+
+
+
+const LifeRingSvg = ({ color = COLORS.N500 })=>{
+    return(// biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
+    /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 640 640",
+        color: color,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M431.2 476.5C399.9 498.9 361.5 512 320 512C278.5 512 240.1 498.9 208.8 476.5L266.8 418.5C282.6 427.1 300.8 432 320.1 432C339.4 432 357.5 427.1 373.4 418.5L431.4 476.5zM521.9 477.3C555.7 433.9 575.9 379.3 575.9 320C575.9 260.7 555.8 206.1 522 162.7C531 150.2 529.9 132.6 518.6 121.4C507.3 110.2 489.8 109 477.3 118C433.9 84.2 379.3 64 320 64C260.7 64 206.1 84.2 162.7 118C150.2 109 132.6 110.1 121.4 121.4C110.2 132.7 109 150.2 118 162.7C84.2 206.1 64 260.7 64 320C64 379.3 84.2 433.9 118 477.3C109 489.8 110.1 507.4 121.4 518.6C132.7 529.8 150.2 531 162.7 522C206.1 555.8 260.7 576 320 576C379.3 576 433.9 555.8 477.3 522C489.8 531 507.4 529.9 518.6 518.6C529.8 507.3 531 489.8 522 477.3zM476.4 431.2L418.4 373.2C427 357.4 431.9 339.2 431.9 319.9C431.9 300.6 427 282.5 418.4 266.6L476.4 208.6C498.9 240.1 512 278.5 512 320C512 361.5 498.9 399.9 476.5 431.2zM431.2 163.5L373.2 221.5C357.4 212.9 339.2 208 319.9 208C300.6 208 282.5 212.9 266.6 221.5L208.6 163.5C240.1 141.1 278.5 128 320 128C361.5 128 399.9 141.1 431.2 163.5zM221.5 373.3L163.5 431.3C141.1 399.9 128 361.5 128 320C128 278.5 141.1 240.1 163.5 208.8L221.5 266.8C212.9 282.6 208 300.8 208 320.1C208 339.4 212.9 357.5 221.5 373.4zM272 320C272 293.5 293.5 272 320 272C346.5 272 368 293.5 368 320C368 346.5 346.5 368 320 368C293.5 368 272 346.5 272 320z",
+            fill: "currentColor"
+        })
+    }));
+};
+
+export { LifeRingSvg };
+
+//# sourceMappingURL=life-ring.js.map

package/lib/components/system-debug-trace/icons/life-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/icons/life-ring.js","sources":["../../../../src/components/system-debug-trace/icons/life-ring.tsx"],"sourcesContent":["import { COLORS } from '../../../constants'\nimport type { IconProps } from '../types'\n\nexport const LifeRingSvg = ({ color = COLORS.N500 }: IconProps) => {\n  return (\n    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' color={color}>\n      <path\n        d='M431.2 476.5C399.9 498.9 361.5 512 320 512C278.5 512 240.1 498.9 208.8 476.5L266.8 418.5C282.6 427.1 300.8 432 320.1 432C339.4 432 357.5 427.1 373.4 418.5L431.4 476.5zM521.9 477.3C555.7 433.9 575.9 379.3 575.9 320C575.9 260.7 555.8 206.1 522 162.7C531 150.2 529.9 132.6 518.6 121.4C507.3 110.2 489.8 109 477.3 118C433.9 84.2 379.3 64 320 64C260.7 64 206.1 84.2 162.7 118C150.2 109 132.6 110.1 121.4 121.4C110.2 132.7 109 150.2 118 162.7C84.2 206.1 64 260.7 64 320C64 379.3 84.2 433.9 118 477.3C109 489.8 110.1 507.4 121.4 518.6C132.7 529.8 150.2 531 162.7 522C206.1 555.8 260.7 576 320 576C379.3 576 433.9 555.8 477.3 522C489.8 531 507.4 529.9 518.6 518.6C529.8 507.3 531 489.8 522 477.3zM476.4 431.2L418.4 373.2C427 357.4 431.9 339.2 431.9 319.9C431.9 300.6 427 282.5 418.4 266.6L476.4 208.6C498.9 240.1 512 278.5 512 320C512 361.5 498.9 399.9 476.5 431.2zM431.2 163.5L373.2 221.5C357.4 212.9 339.2 208 319.9 208C300.6 208 282.5 212.9 266.6 221.5L208.6 163.5C240.1 141.1 278.5 128 320 128C361.5 128 399.9 141.1 431.2 163.5zM221.5 373.3L163.5 431.3C141.1 399.9 128 361.5 128 320C128 278.5 141.1 240.1 163.5 208.8L221.5 266.8C212.9 282.6 208 300.8 208 320.1C208 339.4 212.9 357.5 221.5 373.4zM272 320C272 293.5 293.5 272 320 272C346.5 272 368 293.5 368 320C368 346.5 346.5 368 320 368C293.5 368 272 346.5 272 320z'\n        fill='currentColor'\n      />\n    </svg>\n  )\n}\n"],"names":["COLORS","LifeRingSvg","color"],"mappings":";;;;;;AAA2C;AAGpC,MAAMC,WAAWA,GAAG,CAAC,EAAEC,QAAQF,WAAW,EAAa;IAC5D,OACE,+DAA+D;kBAC/D,IAAC;QAAI,OAAM;QAA6B,SAAQ;QAAc,OAAOE;kBACnE,kBAAC;YACC,GAAE;YACF,MAAK;;;AAIb,EAAC"}

package/lib/components/system-debug-trace/icons/link.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../types.js';
+export declare const LinkSvg: ({ color }: IconProps) => import("react").JSX.Element;

package/lib/components/system-debug-trace/icons/link.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../constants.js";
+
+
+
+
+
+const LinkSvg = ({ color = COLORS.N500 })=>{
+    return(// biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
+    /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 640 640",
+        fill: color,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z",
+            fill: "currentColor"
+        })
+    }));
+};
+
+export { LinkSvg };
+
+//# sourceMappingURL=link.js.map

package/lib/components/system-debug-trace/icons/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/icons/link.js","sources":["../../../../src/components/system-debug-trace/icons/link.tsx"],"sourcesContent":["import { COLORS } from '../../../constants'\nimport type { IconProps } from '../types'\n\nexport const LinkSvg = ({ color = COLORS.N500 }: IconProps) => {\n  return (\n    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>\n      <path\n        d='M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z'\n        fill='currentColor'\n      />\n    </svg>\n  )\n}\n"],"names":["COLORS","LinkSvg","color"],"mappings":";;;;;;AAA2C;AAGpC,MAAMC,OAAOA,GAAG,CAAC,EAAEC,QAAQF,WAAW,EAAa;IACxD,OACE,+DAA+D;kBAC/D,IAAC;QAAI,OAAM;QAA6B,SAAQ;QAAc,MAAME;kBAClE,kBAAC;YACC,GAAE;YACF,MAAK;;;AAIb,EAAC"}

package/lib/components/system-debug-trace/icons/quote-right.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../types.js';
+export declare const QuoteRightSvg: ({ color }: IconProps) => import("react").JSX.Element;

package/lib/components/system-debug-trace/icons/quote-right.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../constants.js";
+
+
+
+
+
+const QuoteRightSvg = ({ color = COLORS.N500 })=>{
+    return(// biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
+    /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 640 640",
+        color: color,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M544 360C544 426.3 490.3 480 424 480L416 480C398.3 480 384 465.7 384 448C384 430.3 398.3 416 416 416L424 416C454.9 416 480 390.9 480 360L480 352L416 352C380.7 352 352 323.3 352 288L352 224C352 188.7 380.7 160 416 160L480 160C515.3 160 544 188.7 544 224L544 360zM288 360C288 426.3 234.3 480 168 480L160 480C142.3 480 128 465.7 128 448C128 430.3 142.3 416 160 416L168 416C198.9 416 224 390.9 224 360L224 352L160 352C124.7 352 96 323.3 96 288L96 224C96 188.7 124.7 160 160 160L224 160C259.3 160 288 188.7 288 224L288 360z",
+            fill: "currentColor"
+        })
+    }));
+};
+
+export { QuoteRightSvg };
+
+//# sourceMappingURL=quote-right.js.map

package/lib/components/system-debug-trace/icons/quote-right.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/icons/quote-right.js","sources":["../../../../src/components/system-debug-trace/icons/quote-right.tsx"],"sourcesContent":["import { COLORS } from '../../../constants'\nimport type { IconProps } from '../types'\n\nexport const QuoteRightSvg = ({ color = COLORS.N500 }: IconProps) => {\n  return (\n    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' color={color}>\n      <path\n        d='M544 360C544 426.3 490.3 480 424 480L416 480C398.3 480 384 465.7 384 448C384 430.3 398.3 416 416 416L424 416C454.9 416 480 390.9 480 360L480 352L416 352C380.7 352 352 323.3 352 288L352 224C352 188.7 380.7 160 416 160L480 160C515.3 160 544 188.7 544 224L544 360zM288 360C288 426.3 234.3 480 168 480L160 480C142.3 480 128 465.7 128 448C128 430.3 142.3 416 160 416L168 416C198.9 416 224 390.9 224 360L224 352L160 352C124.7 352 96 323.3 96 288L96 224C96 188.7 124.7 160 160 160L224 160C259.3 160 288 188.7 288 224L288 360z'\n        fill='currentColor'\n      />\n    </svg>\n  )\n}\n"],"names":["COLORS","QuoteRightSvg","color"],"mappings":";;;;;;AAA2C;AAGpC,MAAMC,aAAaA,GAAG,CAAC,EAAEC,QAAQF,WAAW,EAAa;IAC9D,OACE,+DAA+D;kBAC/D,IAAC;QAAI,OAAM;QAA6B,SAAQ;QAAc,OAAOE;kBACnE,kBAAC;YACC,GAAE;YACF,MAAK;;;AAIb,EAAC"}

package/lib/components/system-debug-trace/icons/screwdriver-wrench.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../types.js';
+export declare const ScrewdriverWrenchSvg: ({ color }: IconProps) => import("react").JSX.Element;

package/lib/components/system-debug-trace/icons/screwdriver-wrench.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../constants.js";
+
+
+
+
+
+const ScrewdriverWrenchSvg = ({ color = COLORS.N500 })=>{
+    return(// biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
+    /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 640 640",
+        fill: color,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M102.8 57.3C108.2 51.9 116.6 51.1 123 55.3L241.9 134.5C250.8 140.4 256.1 150.4 256.1 161.1L256.1 210.7L346.9 301.5C380.2 286.5 420.8 292.6 448.1 320L574.2 446.1C592.9 464.8 592.9 495.2 574.2 514L514.1 574.1C495.4 592.8 465 592.8 446.2 574.1L320.1 448C292.7 420.6 286.6 380.1 301.6 346.8L210.8 256L161.2 256C150.5 256 140.5 250.7 134.6 241.8L55.4 122.9C51.2 116.6 52 108.1 57.4 102.7L102.8 57.3zM247.8 360.8C241.5 397.7 250.1 436.7 274 468L179.1 563C151 591.1 105.4 591.1 77.3 563C49.2 534.9 49.2 489.3 77.3 461.2L212.7 325.7L247.9 360.8zM416.1 64C436.2 64 455.5 67.7 473.2 74.5C483.2 78.3 485 91 477.5 98.6L420.8 155.3C417.8 158.3 416.1 162.4 416.1 166.6L416.1 208C416.1 216.8 423.3 224 432.1 224L473.5 224C477.7 224 481.8 222.3 484.8 219.3L541.5 162.6C549.1 155.1 561.8 156.9 565.6 166.9C572.4 184.6 576.1 203.9 576.1 224C576.1 267.2 558.9 306.3 531.1 335.1L482 286C448.9 253 403.5 240.3 360.9 247.6L304.1 190.8L304.1 161.1L303.9 156.1C303.1 143.7 299.5 131.8 293.4 121.2C322.8 86.2 366.8 64 416.1 63.9z",
+            fill: "currentColor"
+        })
+    }));
+};
+
+export { ScrewdriverWrenchSvg };
+
+//# sourceMappingURL=screwdriver-wrench.js.map

package/lib/components/system-debug-trace/icons/screwdriver-wrench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/icons/screwdriver-wrench.js","sources":["../../../../src/components/system-debug-trace/icons/screwdriver-wrench.tsx"],"sourcesContent":["import { COLORS } from '../../../constants'\nimport type { IconProps } from '../types'\n\nexport const ScrewdriverWrenchSvg = ({ color = COLORS.N500 }: IconProps) => {\n  return (\n    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>\n      <path\n        d='M102.8 57.3C108.2 51.9 116.6 51.1 123 55.3L241.9 134.5C250.8 140.4 256.1 150.4 256.1 161.1L256.1 210.7L346.9 301.5C380.2 286.5 420.8 292.6 448.1 320L574.2 446.1C592.9 464.8 592.9 495.2 574.2 514L514.1 574.1C495.4 592.8 465 592.8 446.2 574.1L320.1 448C292.7 420.6 286.6 380.1 301.6 346.8L210.8 256L161.2 256C150.5 256 140.5 250.7 134.6 241.8L55.4 122.9C51.2 116.6 52 108.1 57.4 102.7L102.8 57.3zM247.8 360.8C241.5 397.7 250.1 436.7 274 468L179.1 563C151 591.1 105.4 591.1 77.3 563C49.2 534.9 49.2 489.3 77.3 461.2L212.7 325.7L247.9 360.8zM416.1 64C436.2 64 455.5 67.7 473.2 74.5C483.2 78.3 485 91 477.5 98.6L420.8 155.3C417.8 158.3 416.1 162.4 416.1 166.6L416.1 208C416.1 216.8 423.3 224 432.1 224L473.5 224C477.7 224 481.8 222.3 484.8 219.3L541.5 162.6C549.1 155.1 561.8 156.9 565.6 166.9C572.4 184.6 576.1 203.9 576.1 224C576.1 267.2 558.9 306.3 531.1 335.1L482 286C448.9 253 403.5 240.3 360.9 247.6L304.1 190.8L304.1 161.1L303.9 156.1C303.1 143.7 299.5 131.8 293.4 121.2C322.8 86.2 366.8 64 416.1 63.9z'\n        fill='currentColor'\n      />\n    </svg>\n  )\n}\n"],"names":["COLORS","ScrewdriverWrenchSvg","color"],"mappings":";;;;;;AAA2C;AAGpC,MAAMC,oBAAoBA,GAAG,CAAC,EAAEC,QAAQF,WAAW,EAAa;IACrE,OACE,+DAA+D;kBAC/D,IAAC;QAAI,OAAM;QAA6B,SAAQ;QAAc,MAAME;kBAClE,kBAAC;YACC,GAAE;YACF,MAAK;;;AAIb,EAAC"}

package/lib/components/system-debug-trace/icons/split.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../types.js';
+export declare const SplitSvg: ({ color }: IconProps) => import("react").JSX.Element;

package/lib/components/system-debug-trace/icons/split.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../constants.js";
+
+
+
+
+
+const SplitSvg = ({ color = COLORS.N500 })=>{
+    return(// biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
+    /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 640 640",
+        fill: color,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M467.8 66.4C479.8 61.4 493.5 64.2 502.7 73.3L566.7 137.3C572.7 143.3 576.1 151.4 576.1 159.9C576.1 168.4 572.7 176.5 566.7 182.5L502.7 246.5C493.5 255.7 479.8 258.4 467.8 253.4C455.8 248.4 448 236.9 448 224L448 192L410.5 192C402 192 393.9 195.4 387.9 201.4L269.3 320L387.9 438.6C393.9 444.6 402 448 410.5 448L448 448L448 416C448 403.1 455.8 391.4 467.8 386.4C479.8 381.4 493.5 384.2 502.7 393.3L566.7 457.3C572.7 463.3 576.1 471.4 576.1 479.9C576.1 488.4 572.7 496.5 566.7 502.5L502.7 566.5C493.5 575.7 479.8 578.4 467.8 573.4C455.8 568.4 448 556.9 448 544L448 512L410.5 512C385 512 360.6 501.9 342.6 483.9L210.7 352L96 352C78.3 352 64 337.7 64 320C64 302.3 78.3 288 96 288L210.7 288L342.6 156.1C360.6 138.1 385 128 410.5 128L448 128L448 96C448 83.1 455.8 71.4 467.8 66.4z",
+            fill: "currentColor"
+        })
+    }));
+};
+
+export { SplitSvg };
+
+//# sourceMappingURL=split.js.map

package/lib/components/system-debug-trace/icons/split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/icons/split.js","sources":["../../../../src/components/system-debug-trace/icons/split.tsx"],"sourcesContent":["import { COLORS } from '../../../constants'\nimport type { IconProps } from '../types'\n\nexport const SplitSvg = ({ color = COLORS.N500 }: IconProps) => {\n  return (\n    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>\n      <path\n        d='M467.8 66.4C479.8 61.4 493.5 64.2 502.7 73.3L566.7 137.3C572.7 143.3 576.1 151.4 576.1 159.9C576.1 168.4 572.7 176.5 566.7 182.5L502.7 246.5C493.5 255.7 479.8 258.4 467.8 253.4C455.8 248.4 448 236.9 448 224L448 192L410.5 192C402 192 393.9 195.4 387.9 201.4L269.3 320L387.9 438.6C393.9 444.6 402 448 410.5 448L448 448L448 416C448 403.1 455.8 391.4 467.8 386.4C479.8 381.4 493.5 384.2 502.7 393.3L566.7 457.3C572.7 463.3 576.1 471.4 576.1 479.9C576.1 488.4 572.7 496.5 566.7 502.5L502.7 566.5C493.5 575.7 479.8 578.4 467.8 573.4C455.8 568.4 448 556.9 448 544L448 512L410.5 512C385 512 360.6 501.9 342.6 483.9L210.7 352L96 352C78.3 352 64 337.7 64 320C64 302.3 78.3 288 96 288L210.7 288L342.6 156.1C360.6 138.1 385 128 410.5 128L448 128L448 96C448 83.1 455.8 71.4 467.8 66.4z'\n        fill='currentColor'\n      />\n    </svg>\n  )\n}\n"],"names":["COLORS","SplitSvg","color"],"mappings":";;;;;;AAA2C;AAGpC,MAAMC,QAAQA,GAAG,CAAC,EAAEC,QAAQF,WAAW,EAAa;IACzD,OACE,+DAA+D;kBAC/D,IAAC;QAAI,OAAM;QAA6B,SAAQ;QAAc,MAAME;kBAClE,kBAAC;YACC,GAAE;YACF,MAAK;;;AAIb,EAAC"}

package/lib/components/system-debug-trace/icons/wand.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../types.js';
+export declare const WandSvg: ({ color }: IconProps) => import("react").JSX.Element;

package/lib/components/system-debug-trace/icons/wand.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../constants.js";
+
+
+
+
+
+const WandSvg = ({ color = COLORS.N500 })=>{
+    return(// biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
+    /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 576 512",
+        fill: color,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z",
+            fill: "currentColor"
+        })
+    }));
+};
+
+export { WandSvg };
+
+//# sourceMappingURL=wand.js.map

package/lib/components/system-debug-trace/icons/wand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/icons/wand.js","sources":["../../../../src/components/system-debug-trace/icons/wand.tsx"],"sourcesContent":["import { COLORS } from '../../../constants'\nimport type { IconProps } from '../types'\n\nexport const WandSvg = ({ color = COLORS.N500 }: IconProps) => {\n  return (\n    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill={color}>\n      <path\n        d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'\n        fill='currentColor'\n      />\n    </svg>\n  )\n}\n"],"names":["COLORS","WandSvg","color"],"mappings":";;;;;;AAA2C;AAGpC,MAAMC,OAAOA,GAAG,CAAC,EAAEC,QAAQF,WAAW,EAAa;IACxD,OACE,+DAA+D;kBAC/D,IAAC;QAAI,OAAM;QAA6B,SAAQ;QAAc,MAAME;kBAClE,kBAAC;YACC,GAAE;YACF,MAAK;;;AAIb,EAAC"}

package/lib/components/system-debug-trace/icons/window-restore.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../types.js';
+export declare const WindowRestoreSvg: ({ color }: IconProps) => import("react").JSX.Element;

package/lib/components/system-debug-trace/icons/window-restore.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../constants.js";
+
+
+
+
+
+const WindowRestoreSvg = ({ color = COLORS.N500 })=>{
+    return(// biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
+    /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 640 640",
+        fill: color,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M544 160L192 160C192 124.7 220.7 96 256 96L544 96C579.3 96 608 124.7 608 160L608 352C608 387.3 579.3 416 544 416L496 416L496 352L544 352L544 160zM32 288C32 252.7 60.7 224 96 224L384 224C419.3 224 448 252.7 448 288L448 480C448 515.3 419.3 544 384 544L96 544C60.7 544 32 515.3 32 480L32 288zM96 328C96 341.3 106.7 352 120 352L360 352C373.3 352 384 341.3 384 328C384 314.7 373.3 304 360 304L120 304C106.7 304 96 314.7 96 328z",
+            fill: "currentColor"
+        })
+    }));
+};
+
+export { WindowRestoreSvg };
+
+//# sourceMappingURL=window-restore.js.map

package/lib/components/system-debug-trace/icons/window-restore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/icons/window-restore.js","sources":["../../../../src/components/system-debug-trace/icons/window-restore.tsx"],"sourcesContent":["import { COLORS } from '../../../constants'\nimport type { IconProps } from '../types'\n\nexport const WindowRestoreSvg = ({ color = COLORS.N500 }: IconProps) => {\n  return (\n    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>\n      <path\n        d='M544 160L192 160C192 124.7 220.7 96 256 96L544 96C579.3 96 608 124.7 608 160L608 352C608 387.3 579.3 416 544 416L496 416L496 352L544 352L544 160zM32 288C32 252.7 60.7 224 96 224L384 224C419.3 224 448 252.7 448 288L448 480C448 515.3 419.3 544 384 544L96 544C60.7 544 32 515.3 32 480L32 288zM96 328C96 341.3 106.7 352 120 352L360 352C373.3 352 384 341.3 384 328C384 314.7 373.3 304 360 304L120 304C106.7 304 96 314.7 96 328z'\n        fill='currentColor'\n      />\n    </svg>\n  )\n}\n"],"names":["COLORS","WindowRestoreSvg","color"],"mappings":";;;;;;AAA2C;AAGpC,MAAMC,gBAAgBA,GAAG,CAAC,EAAEC,QAAQF,WAAW,EAAa;IACjE,OACE,+DAA+D;kBAC/D,IAAC;QAAI,OAAM;QAA6B,SAAQ;QAAc,MAAME;kBAClE,kBAAC;YACC,GAAE;YACF,MAAK;;;AAIb,EAAC"}

package/lib/components/system-debug-trace/index.d.ts

@@ -0,0 +1,10 @@
+interface SystemDebugTraceProps {
+    type: string;
+    data: Record<string, any> | string;
+    id?: string;
+}
+export declare const SystemDebugTrace: {
+    (props: SystemDebugTraceProps): import("react").JSX.Element | null;
+    serialize: (props: SystemDebugTraceProps) => any;
+};
+export {};

package/lib/components/system-debug-trace/index.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { INPUT, isBrowser } from "@botonic/core";
+import { ROLES } from "../../constants.js";
+import { Message } from "../message/index.js";
+import { DebugMessage } from "./debug-message.js";
+
+
+
+
+
+
+
+
+
+
+
+const serialize = (props)=>{
+    const { data } = props;
+    // Return the event data as an object, ensuring it's not stringified
+    return typeof data === 'string' ? JSON.parse(data) : data;
+};
+const SystemDebugTrace = (props)=>{
+    const { data, id, ...otherProps } = props;
+    // Parse data if it's a string
+    const parsedData = typeof data === 'string' ? JSON.parse(data) : data;
+    if (isBrowser()) {
+        const eventData = {
+            ...parsedData
+        };
+        return /*#__PURE__*/ jsx(Message, {
+            role: ROLES.SYSTEM_DEBUG_TRACE_MESSAGE,
+            json: serialize(props),
+            ...otherProps,
+            type: INPUT.SYSTEM_DEBUG_TRACE,
+            id: id,
+            children: /*#__PURE__*/ jsx(DebugMessage, {
+                debugEvent: eventData,
+                messageId: id
+            })
+        });
+    }
+    return null;
+};
+SystemDebugTrace.serialize = serialize;
+
+export { SystemDebugTrace };
+
+//# sourceMappingURL=index.js.map

package/lib/components/system-debug-trace/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/index.js","sources":["../../../src/components/system-debug-trace/index.tsx"],"sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\n\nimport { ROLES } from '../../constants'\nimport { Message } from '../message'\nimport { DebugMessage } from './debug-message'\n\ninterface SystemDebugTraceProps {\n  type: string\n  data: Record<string, any> | string\n  id?: string\n}\n\nconst serialize = (props: SystemDebugTraceProps) => {\n  const { data } = props\n  // Return the event data as an object, ensuring it's not stringified\n  return typeof data === 'string' ? JSON.parse(data) : data\n}\n\nexport const SystemDebugTrace = (props: SystemDebugTraceProps) => {\n  const { data, id, ...otherProps } = props\n\n  // Parse data if it's a string\n  const parsedData = typeof data === 'string' ? JSON.parse(data) : data\n\n  if (isBrowser()) {\n    const eventData = {\n      ...parsedData,\n    }\n\n    return (\n      <Message\n        role={ROLES.SYSTEM_DEBUG_TRACE_MESSAGE}\n        json={serialize(props)}\n        {...otherProps}\n        type={INPUT.SYSTEM_DEBUG_TRACE}\n        id={id}\n      >\n        <DebugMessage debugEvent={eventData} messageId={id} />\n      </Message>\n    )\n  }\n  return null\n}\n\nSystemDebugTrace.serialize = serialize\n"],"names":["INPUT","isBrowser","ROLES","Message","DebugMessage","serialize","props","data","JSON","SystemDebugTrace","id","otherProps","parsedData","eventData"],"mappings":";;;;;;;;;;;;AAAgD;AAET;AACH;AACU;AAQ9C,MAAMK,SAASA,GAAG,CAACC;IACjB,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,oEAAoE;IACpE,OAAO,OAAOC,SAAS,WAAWC,KAAK,KAAK,CAACD,QAAQA;AACvD;AAEO,MAAME,gBAAgBA,GAAG,CAACH;IAC/B,MAAM,EAAEC,IAAI,EAAEG,EAAE,EAAE,GAAGC,YAAY,GAAGL;IAEpC,8BAA8B;IAC9B,MAAMM,aAAa,OAAOL,SAAS,WAAWC,KAAK,KAAK,CAACD,QAAQA;IAEjE,IAAIN,SAASA,IAAI;QACf,MAAMY,YAAY;YAChB,GAAGD,UAAU;QACf;QAEA,qBACE,IAACT,OAAOA;YACN,MAAMD,gCAAgC;YACtC,MAAMG,SAASA,CAACC;YACf,GAAGK,UAAU;YACd,MAAMX,wBAAwB;YAC9B,IAAIU;sBAEJ,kBAACN,YAAYA;gBAAC,YAAYS;gBAAW,WAAWH;;;IAGtD;IACA,OAAO;AACT,EAAC;AAEDD,gBAAgBA,CAAC,SAAS,GAAGJ,SAASA"}

package/lib/components/system-debug-trace/styles.js

@@ -0,0 +1,290 @@
+import styled_components from "styled-components";
+import { COLORS } from "../../constants.js";
+
+
+
+
+
+const StyledDebugContainer = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
+
+  background-color: ${COLORS.SOLID_WHITE};
+  border-radius: 6px;
+  font-family: 'Inter', sans-serif;
+  box-sizing: border-box;
+  margin: 0px 8px;
+  max-width: calc(100% - 16px);
+  width: 100%;
+
+  /* When collapsible (expanded or collapsed), entire container is hoverable and clickable */
+  &.collapsible {
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${COLORS.N50};
+    }
+  }
+`;
+const StyledDebugHeader = styled_components.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  user-select: none;
+  border-radius: 6px;
+  padding: 8px 12px;
+  width: 100%;
+`;
+const StyledDebugArrow = styled_components.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const StyledDebugIcon = styled_components.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-right: 8px;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const StyledDebugTitle = styled_components.span`
+  flex: 1;
+  display: flex;
+  align-items: center;
+
+  font-weight: 600;
+  font-size: 12px;
+  color: ${COLORS.N700};
+  line-height: 1.5;
+  white-space: nowrap;
+  gap: 4px;
+
+  span {
+    font-weight: 400;
+  }
+`;
+const StyledDebugContent = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+`;
+const StyledDebugDetail = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 28px;
+  line-height: 1.5;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+`;
+const StyledDebugLabel = styled_components.strong`
+  color: ${COLORS.N700};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.5;
+`;
+const StyledDebugValue = styled_components.div`
+  font-weight: 600;
+  font-size: 12px;
+  color: ${COLORS.N700};
+  line-height: 1.5;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  > svg {
+    width: 14px;
+    height: 14px;
+    min-width: 14px;
+    min-height: 14px;
+    flex-shrink: 0;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+`;
+const StyledDebugItemWithIcon = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  font-weight: 600;
+  font-size: 12px;
+  color: ${COLORS.N700};
+  line-height: 1.5;
+  min-width: 0;
+  width: 100%;
+
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+
+  > svg {
+    width: 14px;
+    height: 14px;
+    min-width: 14px;
+    min-height: 14px;
+    flex-shrink: 0;
+    display: block;
+  }
+`;
+const StyledDebugMetadata = styled_components.div`
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: 1px solid ${COLORS.N100};
+  color: ${COLORS.N700};
+  font-size: 12px;
+  padding-left: 28px;
+
+  > div {
+    margin-top: 6px;
+    font-weight: 400;
+  }
+`;
+const StyledSeeInfo = styled_components.button`
+  border: 1px solid #c4c6d0;
+  border-radius: 6px;
+  padding: 8px;
+  height: 28px;
+  background-color: transparent;
+  color: #413f48;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+
+  &:hover {
+    background-color: ${COLORS.N100};
+  }
+`;
+const StyledGuardrailItem = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 28px;
+  margin-bottom: ${({ $isLastItem })=>$isLastItem ? '0' : '8px'};
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+
+  svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+`;
+const StyledDebugContentWrapper = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  margin-bottom: 8px;
+
+  /* Create line from first label to last label */
+  &::before {
+    content: '';
+    position: absolute;
+    left: 13px;
+    width: 1px;
+    background-color: ${COLORS.N100};
+    top: 0;
+    /* Height ends at last label's bottom position */
+    height: var(--last-label-bottom, 100%);
+  }
+
+  /* Change line color to N200 when collapsible event is hovered */
+  .collapsible:hover & {
+    &::before {
+      background-color: ${COLORS.N200};
+    }
+  }
+`;
+const StyledGuardrailLabel = styled_components.span`
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+`;
+const StyledGuardrailValue = styled_components.span`
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+`;
+const StyledSourceValue = styled_components.span`
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+`;
+const StyledFileSourceValue = styled_components(StyledSourceValue)`
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+`;
+const StyledUrlSourceValue = styled_components.a`
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  width: 0;
+  flex: 1 1 0%;
+
+  &:hover {
+    text-decoration: underline;
+    color: ${COLORS.BOTONIC_BLUE};
+  }
+
+  &:visited {
+    color: ${COLORS.N700};
+  }
+`;
+
+export { StyledDebugArrow, StyledDebugContainer, StyledDebugContent, StyledDebugContentWrapper, StyledDebugDetail, StyledDebugHeader, StyledDebugIcon, StyledDebugItemWithIcon, StyledDebugLabel, StyledDebugMetadata, StyledDebugTitle, StyledDebugValue, StyledFileSourceValue, StyledGuardrailItem, StyledGuardrailLabel, StyledGuardrailValue, StyledSeeInfo, StyledSourceValue, StyledUrlSourceValue };
+
+//# sourceMappingURL=styles.js.map

package/lib/components/system-debug-trace/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/styles.js","sources":["../../../src/components/system-debug-trace/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nimport { COLORS } from '../../constants'\n\nexport const StyledDebugContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  justify-content: space-between;\n  gap: 12px;\n\n  background-color: ${COLORS.SOLID_WHITE};\n  border-radius: 6px;\n  font-family: 'Inter', sans-serif;\n  box-sizing: border-box;\n  margin: 0px 8px;\n  max-width: calc(100% - 16px);\n  width: 100%;\n\n  /* When collapsible (expanded or collapsed), entire container is hoverable and clickable */\n  &.collapsible {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.N50};\n    }\n  }\n`\n\nexport const StyledDebugHeader = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  user-select: none;\n  border-radius: 6px;\n  padding: 8px 12px;\n  width: 100%;\n`\n\nexport const StyledDebugArrow = styled.span`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n`\n\nexport const StyledDebugIcon = styled.span`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  flex-shrink: 0;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n`\n\nexport const StyledDebugTitle = styled.span`\n  flex: 1;\n  display: flex;\n  align-items: center;\n\n  font-weight: 600;\n  font-size: 12px;\n  color: ${COLORS.N700};\n  line-height: 1.5;\n  white-space: nowrap;\n  gap: 4px;\n\n  span {\n    font-weight: 400;\n  }\n`\n\nexport const StyledDebugContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n\n  font-size: 12px;\n  line-height: 1.5;\n  color: ${COLORS.N700};\n`\n\nexport const StyledDebugDetail = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 0 28px;\n  line-height: 1.5;\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n`\n\nexport const StyledDebugLabel = styled.strong`\n  color: ${COLORS.N700};\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 1.5;\n`\n\nexport const StyledDebugValue = styled.div`\n  font-weight: 600;\n  font-size: 12px;\n  color: ${COLORS.N700};\n  line-height: 1.5;\n  width: 100%;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  white-space: pre-wrap;\n\n  > svg {\n    width: 14px;\n    height: 14px;\n    min-width: 14px;\n    min-height: 14px;\n    flex-shrink: 0;\n    display: inline-block;\n    vertical-align: middle;\n    margin-right: 8px;\n  }\n`\n\nexport const StyledDebugItemWithIcon = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0;\n  font-weight: 600;\n  font-size: 12px;\n  color: ${COLORS.N700};\n  line-height: 1.5;\n  min-width: 0;\n  width: 100%;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  > svg {\n    width: 14px;\n    height: 14px;\n    min-width: 14px;\n    min-height: 14px;\n    flex-shrink: 0;\n    display: block;\n  }\n`\n\nexport const StyledDebugMetadata = styled.div`\n  margin-top: 8px;\n  padding-top: 12px;\n  border-top: 1px solid ${COLORS.N100};\n  color: ${COLORS.N700};\n  font-size: 12px;\n  padding-left: 28px;\n\n  > div {\n    margin-top: 6px;\n    font-weight: 400;\n  }\n`\n\nexport const StyledSeeInfo = styled.button`\n  border: 1px solid #c4c6d0;\n  border-radius: 6px;\n  padding: 8px;\n  height: 28px;\n  background-color: transparent;\n  color: #413f48;\n  font-family: 'Inter', sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.5;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n\n  &:hover {\n    background-color: ${COLORS.N100};\n  }\n`\n\ninterface StyledGuardrailItemProps {\n  $isLastItem?: boolean\n}\nexport const StyledGuardrailItem = styled.div<StyledGuardrailItemProps>`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-left: 28px;\n  margin-bottom: ${({ $isLastItem }) => ($isLastItem ? '0' : '8px')};\n  font-size: 12px;\n  line-height: 1.5;\n  color: ${COLORS.N700};\n\n  svg {\n    width: 14px;\n    height: 14px;\n    flex-shrink: 0;\n  }\n`\n\nexport const StyledDebugContentWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  position: relative;\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  margin-bottom: 8px;\n\n  /* Create line from first label to last label */\n  &::before {\n    content: '';\n    position: absolute;\n    left: 13px;\n    width: 1px;\n    background-color: ${COLORS.N100};\n    top: 0;\n    /* Height ends at last label's bottom position */\n    height: var(--last-label-bottom, 100%);\n  }\n\n  /* Change line color to N200 when collapsible event is hovered */\n  .collapsible:hover & {\n    &::before {\n      background-color: ${COLORS.N200};\n    }\n  }\n`\n\nexport const StyledGuardrailLabel = styled.span`\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 1.5;\n  color: ${COLORS.N700};\n`\n\nexport const StyledGuardrailValue = styled.span`\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 1.5;\n  color: ${COLORS.N700};\n`\n\nexport const StyledSourceValue = styled.span`\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 1.5;\n  color: ${COLORS.N700};\n`\n\nexport const StyledFileSourceValue = styled(StyledSourceValue)`\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  flex: 1;\n`\n\nexport const StyledUrlSourceValue = styled.a`\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 1.5;\n  color: ${COLORS.N700};\n  text-decoration: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  width: 0;\n  flex: 1 1 0%;\n\n  &:hover {\n    text-decoration: underline;\n    color: ${COLORS.BOTONIC_BLUE};\n  }\n\n  &:visited {\n    color: ${COLORS.N700};\n  }\n`\n"],"names":["styled","COLORS","StyledDebugContainer","StyledDebugHeader","StyledDebugArrow","StyledDebugIcon","StyledDebugTitle","StyledDebugContent","StyledDebugDetail","StyledDebugLabel","StyledDebugValue","StyledDebugItemWithIcon","StyledDebugMetadata","StyledSeeInfo","StyledGuardrailItem","$isLastItem","StyledDebugContentWrapper","StyledGuardrailLabel","StyledGuardrailValue","StyledSourceValue","StyledFileSourceValue","StyledUrlSourceValue"],"mappings":";;;;;AAAsC;AAEE;AAEjC,MAAME,oBAAoBA,GAAGF,qBAAU,CAAC;;;;;;;oBAO3B,EAAEC,kBAAkB,CAAC;;;;;;;;;;;;;wBAajB,EAAEA,UAAU,CAAC;;;AAGrC,CAAC;AAEM,MAAME,iBAAiBA,GAAGH,qBAAU,CAAC;;;;;;;;;AAS5C,CAAC;AAEM,MAAMI,gBAAgBA,GAAGJ,sBAAW,CAAC;;;;;;;;;;;;AAY5C,CAAC;AAEM,MAAMK,eAAeA,GAAGL,sBAAW,CAAC;;;;;;;;;;;;;AAa3C,CAAC;AAEM,MAAMM,gBAAgBA,GAAGN,sBAAW,CAAC;;;;;;;SAOnC,EAAEC,WAAW,CAAC;;;;;;;;AAQvB,CAAC;AAEM,MAAMM,kBAAkBA,GAAGP,qBAAU,CAAC;;;;;;;;;;SAUpC,EAAEC,WAAW,CAAC;AACvB,CAAC;AAEM,MAAMO,iBAAiBA,GAAGR,qBAAU,CAAC;;;;;;;;;;AAU5C,CAAC;AAEM,MAAMS,gBAAgBA,GAAGT,wBAAa,CAAC;SACrC,EAAEC,WAAW,CAAC;;;;AAIvB,CAAC;AAEM,MAAMS,gBAAgBA,GAAGV,qBAAU,CAAC;;;SAGlC,EAAEC,WAAW,CAAC;;;;;;;;;;;;;;;;;AAiBvB,CAAC;AAEM,MAAMU,uBAAuBA,GAAGX,qBAAU,CAAC;;;;;;;SAOzC,EAAEC,WAAW,CAAC;;;;;;;;;;;;;;;;;AAiBvB,CAAC;AAEM,MAAMW,mBAAmBA,GAAGZ,qBAAU,CAAC;;;wBAGtB,EAAEC,WAAW,CAAC;SAC7B,EAAEA,WAAW,CAAC;;;;;;;;AAQvB,CAAC;AAEM,MAAMY,aAAaA,GAAGb,wBAAa,CAAC;;;;;;;;;;;;;;;;;;sBAkBrB,EAAEC,WAAW,CAAC;;AAEpC,CAAC;AAKM,MAAMa,mBAAmBA,GAAGd,qBAAoC,CAAC;;;;;iBAKvD,EAAE,CAAC,EAAEe,WAAW,EAAE,GAAMA,cAAc,MAAM,MAAO;;;SAG3D,EAAEd,WAAW,CAAC;;;;;;;AAOvB,CAAC;AAEM,MAAMe,yBAAyBA,GAAGhB,qBAAU,CAAC;;;;;;;;;;;;;;;;sBAgB9B,EAAEC,WAAW,CAAC;;;;;;;;;wBASZ,EAAEA,WAAW,CAAC;;;AAGtC,CAAC;AAEM,MAAMgB,oBAAoBA,GAAGjB,sBAAW,CAAC;;;;SAIvC,EAAEC,WAAW,CAAC;AACvB,CAAC;AAEM,MAAMiB,oBAAoBA,GAAGlB,sBAAW,CAAC;;;;SAIvC,EAAEC,WAAW,CAAC;AACvB,CAAC;AAEM,MAAMkB,iBAAiBA,GAAGnB,sBAAW,CAAC;;;;SAIpC,EAAEC,WAAW,CAAC;AACvB,CAAC;AAEM,MAAMmB,qBAAqBA,GAAGpB,iBAAMA,CAACmB,iBAAiBA,CAAC,CAAC;;;;;;;AAO/D,CAAC;AAEM,MAAME,oBAAoBA,GAAGrB,mBAAQ,CAAC;;;;SAIpC,EAAEC,WAAW,CAAC;;;;;;;;;;;WAWZ,EAAEA,mBAAmB,CAAC;;;;WAItB,EAAEA,WAAW,CAAC;;AAEzB,CAAC"}

package/lib/components/system-debug-trace/types.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { AiAgentDebugEvent, AiAgentRouterDebugEvent, BotActionDebugEvent, ConditionalChannelDebugEvent, ConditionalCountryDebugEvent, ConditionalCustomDebugEvent, ConditionalQueueStatusDebugEvent, FallbackDebugEvent, HandoffSuccessDebugEvent, KeywordDebugEvent, RedirectFlowDebugEvent, SmartIntentDebugEvent, WebviewActionTriggeredDebugEvent } from './events/index.js';
+export interface IconProps {
+    color?: string;
+}
+export type DebugEvent = KeywordDebugEvent | AiAgentDebugEvent | AiAgentRouterDebugEvent | FallbackDebugEvent | SmartIntentDebugEvent | HandoffSuccessDebugEvent | BotActionDebugEvent | ConditionalChannelDebugEvent | ConditionalCountryDebugEvent | ConditionalCustomDebugEvent | ConditionalQueueStatusDebugEvent | RedirectFlowDebugEvent | WebviewActionTriggeredDebugEvent;
+export interface DebugEventConfig {
+    action: string;
+    title: React.ReactNode;
+    component: React.ComponentType<any> | null;
+    icon?: React.ReactNode;
+    collapsible?: boolean;
+}

package/lib/components/system-debug-trace/types.js

@@ -0,0 +1,4 @@
+
+
+
+//# sourceMappingURL=types.js.map