@knocklabs/react 0.12.1 → 0.13.1

package/dist/esm/modules/guide/components/Toolbar/V2/GuideRowDetails.mjs

@@ -1,69 +1,181 @@
-import e from "react";
-import { useGuideContext as h } from "@knocklabs/react-core";
-import { Button as c } from "@telegraph/button";
-import { Box as p, Stack as l } from "@telegraph/layout";
-import { Tooltip as d } from "@telegraph/tooltip";
-import { Text as s } from "@telegraph/typography";
-import { GuideAnnotatedStatusDot as g } from "./GuideAnnotatedStatusDot.mjs";
-import { sharedTooltipProps as m } from "./helpers.mjs";
-import { isUncommittedGuide as b } from "./useInspectGuideClientStore.mjs";
-const u = ({
-  title: r,
-  children: i
-}) => /* @__PURE__ */ e.createElement(l, { direction: "column", justify: "flex-start", gap: "1", px: "1_5", py: "1", rounded: "2", bg: "surface-1", border: "px", borderColor: "gray-4", style: {
-  flex: 1,
-  alignSelf: "stretch"
-} }, /* @__PURE__ */ e.createElement(s, { as: "span", size: "0", color: "gray", weight: "medium" }, r), /* @__PURE__ */ e.createElement(l, { direction: "column", gap: "1" }, i)), n = ({
-  label: r,
-  value: i,
-  color: t,
-  tooltip: o,
-  children: a
-}) => /* @__PURE__ */ e.createElement(l, { align: "center", gap: "1" }, /* @__PURE__ */ e.createElement(d, { enabled: !!o, label: o, ...m }, /* @__PURE__ */ e.createElement(l, { align: "center", gap: "1", display: "inline-flex" }, /* @__PURE__ */ e.createElement(g, { color: t, tooltip: `${r}: ${i}` }), /* @__PURE__ */ e.createElement(s, { as: "span", size: "1", weight: "medium" }, r, ":"), !a && /* @__PURE__ */ e.createElement(s, { as: "span", size: "1", weight: "medium", color: t }, i))), a), E = (r) => {
-  switch (r) {
-    case "returned":
-      return {
-        label: "Ready to display",
-        color: "blue",
-        description: "The guide is queried and ready to render."
-      };
-    case "throttled":
-      return {
-        label: "Throttled",
-        color: "yellow",
-        description: "The guide is queried but held back by throttle settings."
-      };
-    case "queried":
-      return {
-        label: "Queued",
-        color: "gray",
-        description: "The guide is queried but waiting behind higher-priority guides."
-      };
-    default:
-      return {
-        label: "Not queried",
-        color: "red",
-        description: "No useGuide(s) call on this page matches this guide."
-      };
-  }
-}, C = ({
-  guide: r
-}) => {
-  const {
-    client: i
-  } = h();
-  if (b(r))
-    return /* @__PURE__ */ e.createElement(p, { px: "3", py: "2" }, /* @__PURE__ */ e.createElement(s, { as: "span", size: "1", color: "gray" }, "This guide has never been committed and published."));
-  const {
-    annotation: t,
-    dashboard_url: o
-  } = r, a = E(t.selectable.status);
-  return /* @__PURE__ */ e.createElement(l, { p: "1", gap: "2", direction: "row", align: "flex-start" }, /* @__PURE__ */ e.createElement(u, { title: "Eligibility" }, /* @__PURE__ */ e.createElement(n, { label: "Active", value: t.active.status ? "Yes" : "No", color: t.active.status ? "blue" : "red", tooltip: "Whether the guide is active in this environment." }), /* @__PURE__ */ e.createElement(n, { label: "Archived", value: t.archived.status ? "Yes" : "No", color: t.archived.status ? "red" : "blue", tooltip: "Whether the current user has dismissed this guide." }), /* @__PURE__ */ e.createElement(n, { label: "Targeting", value: t.targetable.status ? "Yes" : "No", color: t.targetable.status ? "blue" : "red", tooltip: "Whether the current user matches the guide's targeting conditions." })), /* @__PURE__ */ e.createElement(u, { title: "Visibility" }, /* @__PURE__ */ e.createElement(n, { label: "Activation", value: t.activatable.status ? "Yes" : "No", color: t.activatable.status ? "blue" : "red", tooltip: "Whether the current page matches the guide's activation rules." }), /* @__PURE__ */ e.createElement(n, { label: "Display", value: a.label, color: a.color, tooltip: "Whether the guide has been queried and is ready to render on the current page." }, /* @__PURE__ */ e.createElement(d, { label: a.description, ...m }, /* @__PURE__ */ e.createElement(s, { as: "span", size: "1", weight: "medium", color: a.color }, a.label)))), /* @__PURE__ */ e.createElement(l, { direction: "column", justify: "flex-end", gap: "1", style: {
-    alignSelf: "stretch"
-  } }, /* @__PURE__ */ e.createElement(c, { size: "0", variant: "outline", onClick: () => i.resetEngagement(r) }, "Reset engagement"), o && /* @__PURE__ */ e.createElement(c, { size: "0", variant: "outline", onClick: () => window.open(o, "_blank", "noopener") }, "Open in dashboard")));
+import { sharedTooltipProps as e } from "./helpers.mjs";
+import { GuideAnnotatedStatusDot as t } from "./GuideAnnotatedStatusDot.mjs";
+import { isUncommittedGuide as n } from "./useInspectGuideClientStore.mjs";
+import { useGuideContext as r } from "@knocklabs/react-core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Button as o } from "@telegraph/button";
+import { Box as s, Stack as c } from "@telegraph/layout";
+import { Tooltip as l } from "@telegraph/tooltip";
+import { Text as u } from "@telegraph/typography";
+//#region src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
+var d = ({ title: e, children: t }) => /* @__PURE__ */ a(c, {
+	direction: "column",
+	justify: "flex-start",
+	gap: "1",
+	px: "1_5",
+	py: "1",
+	rounded: "2",
+	bg: "surface-1",
+	border: "px",
+	borderColor: "gray-4",
+	style: {
+		flex: 1,
+		alignSelf: "stretch"
+	},
+	children: [/* @__PURE__ */ i(u, {
+		as: "span",
+		size: "0",
+		color: "gray",
+		weight: "medium",
+		children: e
+	}), /* @__PURE__ */ i(c, {
+		direction: "column",
+		gap: "1",
+		children: t
+	})]
+}), f = ({ label: n, value: r, color: o, tooltip: s, children: d }) => /* @__PURE__ */ a(c, {
+	align: "center",
+	gap: "1",
+	children: [/* @__PURE__ */ i(l, {
+		enabled: !!s,
+		label: s,
+		...e,
+		children: /* @__PURE__ */ a(c, {
+			align: "center",
+			gap: "1",
+			display: "inline-flex",
+			children: [
+				/* @__PURE__ */ i(t, {
+					color: o,
+					tooltip: `${n}: ${r}`
+				}),
+				/* @__PURE__ */ a(u, {
+					as: "span",
+					size: "1",
+					weight: "medium",
+					children: [n, ":"]
+				}),
+				!d && /* @__PURE__ */ i(u, {
+					as: "span",
+					size: "1",
+					weight: "medium",
+					color: o,
+					children: r
+				})
+			]
+		})
+	}), d]
+}), p = (e) => {
+	switch (e) {
+		case "returned": return {
+			label: "Ready to display",
+			color: "blue",
+			description: "The guide is queried and ready to render."
+		};
+		case "throttled": return {
+			label: "Throttled",
+			color: "yellow",
+			description: "The guide is queried but held back by throttle settings."
+		};
+		case "queried": return {
+			label: "Queued",
+			color: "gray",
+			description: "The guide is queried but waiting behind higher-priority guides."
+		};
+		default: return {
+			label: "Not queried",
+			color: "red",
+			description: "No useGuide(s) call on this page matches this guide."
+		};
+	}
+}, m = ({ guide: t }) => {
+	let { client: m } = r();
+	if (n(t)) return /* @__PURE__ */ i(s, {
+		px: "3",
+		py: "2",
+		children: /* @__PURE__ */ i(u, {
+			as: "span",
+			size: "1",
+			color: "gray",
+			children: "This guide has never been committed and published."
+		})
+	});
+	let { annotation: h, dashboard_url: g } = t, _ = p(h.selectable.status);
+	return /* @__PURE__ */ a(c, {
+		p: "1",
+		gap: "2",
+		direction: "row",
+		align: "flex-start",
+		children: [
+			/* @__PURE__ */ a(d, {
+				title: "Eligibility",
+				children: [
+					/* @__PURE__ */ i(f, {
+						label: "Active",
+						value: h.active.status ? "Yes" : "No",
+						color: h.active.status ? "blue" : "red",
+						tooltip: "Whether the guide is active in this environment."
+					}),
+					/* @__PURE__ */ i(f, {
+						label: "Archived",
+						value: h.archived.status ? "Yes" : "No",
+						color: h.archived.status ? "red" : "blue",
+						tooltip: "Whether the current user has dismissed this guide."
+					}),
+					/* @__PURE__ */ i(f, {
+						label: "Targeting",
+						value: h.targetable.status ? "Yes" : "No",
+						color: h.targetable.status ? "blue" : "red",
+						tooltip: "Whether the current user matches the guide's targeting conditions."
+					})
+				]
+			}),
+			/* @__PURE__ */ a(d, {
+				title: "Visibility",
+				children: [/* @__PURE__ */ i(f, {
+					label: "Activation",
+					value: h.activatable.status ? "Yes" : "No",
+					color: h.activatable.status ? "blue" : "red",
+					tooltip: "Whether the current page matches the guide's activation rules."
+				}), /* @__PURE__ */ i(f, {
+					label: "Display",
+					value: _.label,
+					color: _.color,
+					tooltip: "Whether the guide has been queried and is ready to render on the current page.",
+					children: /* @__PURE__ */ i(l, {
+						label: _.description,
+						...e,
+						children: /* @__PURE__ */ i(u, {
+							as: "span",
+							size: "1",
+							weight: "medium",
+							color: _.color,
+							children: _.label
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ a(c, {
+				direction: "column",
+				justify: "flex-end",
+				gap: "1",
+				style: { alignSelf: "stretch" },
+				children: [/* @__PURE__ */ i(o, {
+					size: "0",
+					variant: "outline",
+					onClick: () => m.resetEngagement(t),
+					children: "Reset engagement"
+				}), g && /* @__PURE__ */ i(o, {
+					size: "0",
+					variant: "outline",
+					onClick: () => window.open(g, "_blank", "noopener"),
+					children: "Open in dashboard"
+				})]
+			})
+		]
+	});
 };
-export {
-  C as GuideRowDetails,
-  E as getSelectableStatusSummary
-};
-//# sourceMappingURL=GuideRowDetails.mjs.map
+//#endregion
+export { m as GuideRowDetails, p as getSelectableStatusSummary };
+
+//# sourceMappingURL=GuideRowDetails.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/GuideRowDetails.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GuideRowDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport {\n  AnnotatedGuide,\n  UncommittedGuide,\n  isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst CardContainer = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: React.ReactNode;\n}) => (\n  <Stack\n    direction=\"column\"\n    justify=\"flex-start\"\n    gap=\"1\"\n    px=\"1_5\"\n    py=\"1\"\n    rounded=\"2\"\n    bg=\"surface-1\"\n    border=\"px\"\n    borderColor=\"gray-4\"\n    style={{ flex: 1, alignSelf: \"stretch\" }}\n  >\n    <Text as=\"span\" size=\"0\" color=\"gray\" weight=\"medium\">\n      {title}\n    </Text>\n    <Stack direction=\"column\" gap=\"1\">\n      {children}\n    </Stack>\n  </Stack>\n);\n\nconst StatusRow = ({\n  label,\n  value,\n  color,\n  tooltip,\n  children,\n}: {\n  label: string;\n  value: string;\n  color: StatusColor;\n  tooltip?: React.ReactNode;\n  children?: React.ReactNode;\n}) => {\n  return (\n    <Stack align=\"center\" gap=\"1\">\n      <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>\n        <Stack align=\"center\" gap=\"1\" display=\"inline-flex\">\n          <StatusDot color={color} tooltip={`${label}: ${value}`} />\n          <Text as=\"span\" size=\"1\" weight=\"medium\">\n            {label}:\n          </Text>\n          {/* User children over value when provided, for cases when we want to\n              have its own tooltip over it */}\n          {!children && (\n            <Text as=\"span\" size=\"1\" weight=\"medium\" color={color}>\n              {value}\n            </Text>\n          )}\n        </Stack>\n      </Tooltip>\n      {children}\n    </Stack>\n  );\n};\n\nexport type StatusSummary = {\n  color: StatusColor;\n  label: string;\n  description: string;\n};\n\nexport const getSelectableStatusSummary = (\n  status: \"returned\" | \"throttled\" | \"queried\" | undefined,\n): StatusSummary => {\n  switch (status) {\n    case \"returned\":\n      return {\n        label: \"Ready to display\",\n        color: \"blue\",\n        description: \"The guide is queried and ready to render.\",\n      };\n    case \"throttled\":\n      return {\n        label: \"Throttled\",\n        color: \"yellow\",\n        description: \"The guide is queried but held back by throttle settings.\",\n      };\n    case \"queried\":\n      return {\n        label: \"Queued\",\n        color: \"gray\",\n        description:\n          \"The guide is queried but waiting behind higher-priority guides.\",\n      };\n    default:\n      return {\n        label: \"Not queried\",\n        color: \"red\",\n        description: \"No useGuide(s) call on this page matches this guide.\",\n      };\n  }\n};\n\nexport const GuideRowDetails = ({\n  guide,\n}: {\n  guide: AnnotatedGuide | UncommittedGuide;\n}) => {\n  const { client } = useGuideContext();\n\n  if (isUncommittedGuide(guide)) {\n    return (\n      <Box px=\"3\" py=\"2\">\n        <Text as=\"span\" size=\"1\" color=\"gray\">\n          This guide has never been committed and published.\n        </Text>\n      </Box>\n    );\n  }\n\n  const { annotation, dashboard_url: dashboardUrl } = guide;\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\n\n  return (\n    <Stack p=\"1\" gap=\"2\" direction=\"row\" align=\"flex-start\">\n      <CardContainer title=\"Eligibility\">\n        <StatusRow\n          label=\"Active\"\n          value={annotation.active.status ? \"Yes\" : \"No\"}\n          color={annotation.active.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the guide is active in this environment.\"\n        />\n        <StatusRow\n          label=\"Archived\"\n          value={annotation.archived.status ? \"Yes\" : \"No\"}\n          color={annotation.archived.status ? \"red\" : \"blue\"}\n          tooltip=\"Whether the current user has dismissed this guide.\"\n        />\n        <StatusRow\n          label=\"Targeting\"\n          value={annotation.targetable.status ? \"Yes\" : \"No\"}\n          color={annotation.targetable.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the current user matches the guide's targeting conditions.\"\n        />\n      </CardContainer>\n      <CardContainer title=\"Visibility\">\n        <StatusRow\n          label=\"Activation\"\n          value={annotation.activatable.status ? \"Yes\" : \"No\"}\n          color={annotation.activatable.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the current page matches the guide's activation rules.\"\n        />\n        <StatusRow\n          label=\"Display\"\n          value={selectableStatusSummary.label}\n          color={selectableStatusSummary.color}\n          tooltip=\"Whether the guide has been queried and is ready to render on the current page.\"\n        >\n          <Tooltip\n            label={selectableStatusSummary.description}\n            {...sharedTooltipProps}\n          >\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color={selectableStatusSummary.color}\n            >\n              {selectableStatusSummary.label}\n            </Text>\n          </Tooltip>\n        </StatusRow>\n      </CardContainer>\n      <Stack\n        direction=\"column\"\n        justify=\"flex-end\"\n        gap=\"1\"\n        style={{ alignSelf: \"stretch\" }}\n      >\n        <Button\n          size=\"0\"\n          variant=\"outline\"\n          onClick={() => client.resetEngagement(guide)}\n        >\n          Reset engagement\n        </Button>\n        {dashboardUrl && (\n          <Button\n            size=\"0\"\n            variant=\"outline\"\n            onClick={() => window.open(dashboardUrl, \"_blank\", \"noopener\")}\n          >\n            Open in dashboard\n          </Button>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["CardContainer","title","children","React","Stack","flex","alignSelf","Text","StatusRow","label","value","color","tooltip","Tooltip","sharedTooltipProps","StatusDot","getSelectableStatusSummary","status","description","GuideRowDetails","guide","client","useGuideContext","isUncommittedGuide","Box","annotation","dashboard_url","dashboardUrl","selectableStatusSummary","selectable","active","archived","targetable","activatable","Button","resetEngagement","window","open"],"mappings":"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"}
+{"version":3,"file":"GuideRowDetails.mjs","names":[],"sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport {\n  AnnotatedGuide,\n  UncommittedGuide,\n  isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst CardContainer = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: React.ReactNode;\n}) => (\n  <Stack\n    direction=\"column\"\n    justify=\"flex-start\"\n    gap=\"1\"\n    px=\"1_5\"\n    py=\"1\"\n    rounded=\"2\"\n    bg=\"surface-1\"\n    border=\"px\"\n    borderColor=\"gray-4\"\n    style={{ flex: 1, alignSelf: \"stretch\" }}\n  >\n    <Text as=\"span\" size=\"0\" color=\"gray\" weight=\"medium\">\n      {title}\n    </Text>\n    <Stack direction=\"column\" gap=\"1\">\n      {children}\n    </Stack>\n  </Stack>\n);\n\nconst StatusRow = ({\n  label,\n  value,\n  color,\n  tooltip,\n  children,\n}: {\n  label: string;\n  value: string;\n  color: StatusColor;\n  tooltip?: React.ReactNode;\n  children?: React.ReactNode;\n}) => {\n  return (\n    <Stack align=\"center\" gap=\"1\">\n      <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>\n        <Stack align=\"center\" gap=\"1\" display=\"inline-flex\">\n          <StatusDot color={color} tooltip={`${label}: ${value}`} />\n          <Text as=\"span\" size=\"1\" weight=\"medium\">\n            {label}:\n          </Text>\n          {/* User children over value when provided, for cases when we want to\n              have its own tooltip over it */}\n          {!children && (\n            <Text as=\"span\" size=\"1\" weight=\"medium\" color={color}>\n              {value}\n            </Text>\n          )}\n        </Stack>\n      </Tooltip>\n      {children}\n    </Stack>\n  );\n};\n\nexport type StatusSummary = {\n  color: StatusColor;\n  label: string;\n  description: string;\n};\n\nexport const getSelectableStatusSummary = (\n  status: \"returned\" | \"throttled\" | \"queried\" | undefined,\n): StatusSummary => {\n  switch (status) {\n    case \"returned\":\n      return {\n        label: \"Ready to display\",\n        color: \"blue\",\n        description: \"The guide is queried and ready to render.\",\n      };\n    case \"throttled\":\n      return {\n        label: \"Throttled\",\n        color: \"yellow\",\n        description: \"The guide is queried but held back by throttle settings.\",\n      };\n    case \"queried\":\n      return {\n        label: \"Queued\",\n        color: \"gray\",\n        description:\n          \"The guide is queried but waiting behind higher-priority guides.\",\n      };\n    default:\n      return {\n        label: \"Not queried\",\n        color: \"red\",\n        description: \"No useGuide(s) call on this page matches this guide.\",\n      };\n  }\n};\n\nexport const GuideRowDetails = ({\n  guide,\n}: {\n  guide: AnnotatedGuide | UncommittedGuide;\n}) => {\n  const { client } = useGuideContext();\n\n  if (isUncommittedGuide(guide)) {\n    return (\n      <Box px=\"3\" py=\"2\">\n        <Text as=\"span\" size=\"1\" color=\"gray\">\n          This guide has never been committed and published.\n        </Text>\n      </Box>\n    );\n  }\n\n  const { annotation, dashboard_url: dashboardUrl } = guide;\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\n\n  return (\n    <Stack p=\"1\" gap=\"2\" direction=\"row\" align=\"flex-start\">\n      <CardContainer title=\"Eligibility\">\n        <StatusRow\n          label=\"Active\"\n          value={annotation.active.status ? \"Yes\" : \"No\"}\n          color={annotation.active.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the guide is active in this environment.\"\n        />\n        <StatusRow\n          label=\"Archived\"\n          value={annotation.archived.status ? \"Yes\" : \"No\"}\n          color={annotation.archived.status ? \"red\" : \"blue\"}\n          tooltip=\"Whether the current user has dismissed this guide.\"\n        />\n        <StatusRow\n          label=\"Targeting\"\n          value={annotation.targetable.status ? \"Yes\" : \"No\"}\n          color={annotation.targetable.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the current user matches the guide's targeting conditions.\"\n        />\n      </CardContainer>\n      <CardContainer title=\"Visibility\">\n        <StatusRow\n          label=\"Activation\"\n          value={annotation.activatable.status ? \"Yes\" : \"No\"}\n          color={annotation.activatable.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the current page matches the guide's activation rules.\"\n        />\n        <StatusRow\n          label=\"Display\"\n          value={selectableStatusSummary.label}\n          color={selectableStatusSummary.color}\n          tooltip=\"Whether the guide has been queried and is ready to render on the current page.\"\n        >\n          <Tooltip\n            label={selectableStatusSummary.description}\n            {...sharedTooltipProps}\n          >\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color={selectableStatusSummary.color}\n            >\n              {selectableStatusSummary.label}\n            </Text>\n          </Tooltip>\n        </StatusRow>\n      </CardContainer>\n      <Stack\n        direction=\"column\"\n        justify=\"flex-end\"\n        gap=\"1\"\n        style={{ alignSelf: \"stretch\" }}\n      >\n        <Button\n          size=\"0\"\n          variant=\"outline\"\n          onClick={() => client.resetEngagement(guide)}\n        >\n          Reset engagement\n        </Button>\n        {dashboardUrl && (\n          <Button\n            size=\"0\"\n            variant=\"outline\"\n            onClick={() => window.open(dashboardUrl, \"_blank\", \"noopener\")}\n          >\n            Open in dashboard\n          </Button>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/modules/guide/components/Toolbar/V2/Kbd.mjs

@@ -1,14 +1,17 @@
-import * as d from "react";
-const e = ({
-  children: r
-}) => /* @__PURE__ */ d.createElement("kbd", { style: {
-  display: "inline-block",
-  padding: "1px 4px",
-  borderRadius: "var(--tgph-rounded-2)",
-  border: "1px solid rgba(255, 255, 255, 0.3)",
-  backgroundColor: "rgba(255, 255, 255, 0.15)"
-} }, r);
-export {
-  e as Kbd
-};
-//# sourceMappingURL=Kbd.mjs.map
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/modules/guide/components/Toolbar/V2/Kbd.tsx
+var t = ({ children: t }) => /* @__PURE__ */ e("kbd", {
+	style: {
+		display: "inline-block",
+		padding: "1px 4px",
+		borderRadius: "var(--tgph-rounded-2)",
+		border: "1px solid rgba(255, 255, 255, 0.3)",
+		backgroundColor: "rgba(255, 255, 255, 0.15)"
+	},
+	children: t
+});
+//#endregion
+export { t as Kbd };
+
+//# sourceMappingURL=Kbd.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/Kbd.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/Kbd.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Kbd = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <kbd\n      style={{\n        display: \"inline-block\",\n        padding: \"1px 4px\",\n        borderRadius: \"var(--tgph-rounded-2)\",\n        border: \"1px solid rgba(255, 255, 255, 0.3)\",\n        backgroundColor: \"rgba(255, 255, 255, 0.15)\",\n      }}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"names":["Kbd","children","React","display","padding","borderRadius","border","backgroundColor"],"mappings":";AAEO,MAAMA,IAAMA,CAAC;AAAA,EAAEC,UAAAA;AAAwC,MAE1D,gBAAAC,EAAA,cAAC,SACC,OAAO;AAAA,EACLC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,cAAc;AAAA,EACdC,QAAQ;AAAA,EACRC,iBAAiB;KAGlBN,CACH;"}
+{"version":3,"file":"Kbd.mjs","names":[],"sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/Kbd.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Kbd = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <kbd\n      style={{\n        display: \"inline-block\",\n        padding: \"1px 4px\",\n        borderRadius: \"var(--tgph-rounded-2)\",\n        border: \"1px solid rgba(255, 255, 255, 0.3)\",\n        backgroundColor: \"rgba(255, 255, 255, 0.15)\",\n      }}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"mappings":";;;AAEA,IAAa,KAAO,EAAE,kBAElB,kBAAC,OAAD;CACE,OAAO;EACL,SAAS;EACT,SAAS;EACT,cAAc;EACd,QAAQ;EACR,iBAAiB;CACnB;CAEC;AACE,CAAA"}