@bikdotai/bik-component-library 0.0.821-beta.4 → 0.0.821-beta.6

package/dist/esm/components/agent-builder/AgentBuilder.styled.js

@@ -0,0 +1,463 @@
+import e from "styled-components";
+import { COLORS as t } from "../../constants/Theme.js";
+const s = e.div.attrs({ className: "bik-builder-root" })`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	min-height: 0;
+	background: ${t.surface.standard};
+`, r = e.div.attrs({ className: "bik-top-bar" })`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 56px;
+	padding: 12px 16px;
+	border-bottom: 1px solid ${t.stroke.primary};
+	flex-shrink: 0;
+`, o = e.div.attrs({ className: "bik-top-bar-side" })`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+`, d = e.button.attrs({ className: "bik-back-button" })`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+	border-radius: 4px;
+
+	&:hover {
+		background: ${t.surface.subdued};
+	}
+`, l = e.div.attrs({ className: "bik-main" })`
+	display: flex;
+	flex: 1;
+	min-height: 0;
+`, c = e.div.attrs({ className: "bik-rail" })`
+	width: 234px;
+	flex-shrink: 0;
+	border-right: 1px solid ${t.stroke.primary};
+	padding: 16px;
+	overflow-y: auto;
+	background: ${t.surface.standard};
+`, p = e.div.attrs({ className: "bik-content" })`
+	flex: 1;
+	min-width: 0;
+	overflow-y: auto;
+	padding: 16px;
+	background: ${t.surface.standard};
+`, x = e.div.attrs({ className: "bik-content-card" })`
+	border: 1px solid ${t.stroke.primary};
+	border-radius: 8px;
+	padding: 24px;
+	min-height: 100%;
+	box-sizing: border-box;
+`, b = e.div.attrs({ className: "bik-footer" })`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	min-height: 56px;
+	padding: 12px 16px;
+	border-top: 1px solid ${t.stroke.primary};
+	flex-shrink: 0;
+`, g = e.div.attrs({ className: "bik-footer-hint" })`
+	display: flex;
+	align-items: center;
+	gap: 6px;
+`, m = e.div.attrs({
+  className: "bik-footer-actions"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+`, u = e.div.attrs({ className: "bik-rail-list" })`
+	display: flex;
+	flex-direction: column;
+`, f = e.button.attrs({ className: "bik-rail-item" })`
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+	/* Bottom padding leaves room for the connector down to the next badge. */
+	padding: 0 0 24px;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	text-align: left;
+	width: 100%;
+
+	&:last-child {
+		padding-bottom: 0;
+	}
+
+	&:disabled {
+		cursor: default;
+	}
+
+	/* Dashed connector line between consecutive step badges (centered on the badge). */
+	&:not(:last-child)::after {
+		content: '';
+		position: absolute;
+		left: 9px;
+		top: 20px;
+		width: 0;
+		height: 24px;
+		border-left: 1px dashed #e0e0e0;
+		pointer-events: none;
+	}
+`, h = e.div.attrs({ className: "bik-step-badge" })`
+	width: 20px;
+	height: 20px;
+	flex-shrink: 0;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 600;
+	background: ${(a) => a.state === "complete" ? t.content.brand : a.state === "active" ? t.background.brandTint : "#F0F0F0"};
+	color: ${(a) => a.state === "complete" ? t.content.primaryInverse : a.state === "active" ? t.content.brand : t.content.placeholder};
+`, k = e.div.attrs({
+  className: "bik-section-header-wrap"
+})`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 20px;
+`, y = e.div.attrs({ className: "bik-field-block" })`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin-bottom: 20px;
+`, v = e.div.attrs({
+  className: "bik-field-label-row"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`, N = e.div.attrs({
+  className: "bik-ai-text-area-shell"
+})`
+	display: flex;
+	flex-direction: column;
+	border: 1px solid
+		${(a) => a.focused ? t.stroke.brand : t.stroke.primary};
+	border-radius: 4px;
+	padding: 8px 12px;
+	gap: 8px;
+	min-height: ${(a) => a.minHeight ?? "120px"};
+	background: ${t.surface.standard};
+`, w = e.textarea.attrs({
+  className: "bik-ai-text-area-input"
+})`
+	flex: 1;
+	border: none;
+	outline: none;
+	resize: none;
+	font-family: Inter;
+	font-size: 14px;
+	line-height: 20px;
+	color: ${t.content.primary};
+	background: transparent;
+	min-height: 60px;
+
+	&::placeholder {
+		color: ${t.content.placeholder};
+	}
+`, $ = e.div.attrs({ className: "bik-card-row" })`
+	display: flex;
+	gap: 12px;
+	margin-bottom: 16px;
+`, S = e.button.attrs({ className: "bik-radio-card" })`
+	flex: 1;
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 16px;
+	border: 1px solid
+		${(a) => a.selected ? t.stroke.brand : t.stroke.primary};
+	background: ${(a) => a.selected ? t.background.brandLight : t.surface.standard};
+	border-radius: 8px;
+	cursor: pointer;
+	text-align: left;
+	width: 100%;
+`, A = e.div.attrs({
+  className: "bik-radio-card-text"
+})`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+`, B = e.div.attrs({ className: "bik-chip-wrap" })`
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+`, j = e.div.attrs({ className: "bik-intent-chip" })`
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	border: 1px solid ${t.stroke.primary};
+	border-radius: 4px;
+	background: ${t.surface.standard};
+`, C = e.button.attrs({
+  className: "bik-chip-close-button"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+`, R = e.button.attrs({
+  className: "bik-add-chip-button"
+})`
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	border: 1px dashed ${t.stroke.primary};
+	border-radius: 4px;
+	background: transparent;
+	cursor: pointer;
+`, F = e.div.attrs({ className: "bik-step3-grid" })`
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 300px;
+	gap: 24px;
+
+	@media (max-width: 1100px) {
+		grid-template-columns: 1fr;
+	}
+`, I = e.div.attrs({ className: "bik-step3-main" })`
+	display: flex;
+	flex-direction: column;
+`, T = e.div.attrs({ className: "bik-step3-side" })`
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+`, z = e.div.attrs({ className: "bik-side-section" })`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`, H = e.div.attrs({
+  className: "bik-side-section-header"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`, M = e.button.attrs({
+  className: "bik-add-icon-button"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+	border-radius: 4px;
+
+	&:hover {
+		background: ${t.surface.subdued};
+	}
+`, P = e.div.attrs({
+  className: "bik-selectable-row"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	border: 1px solid ${t.stroke.primary};
+	border-radius: 4px;
+`, L = e.div.attrs({ className: "bik-row-text" })`
+	flex: 1;
+	min-width: 0;
+`;
+e.button.attrs({
+  className: "bik-row-remove-button"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+`;
+const O = e.button.attrs({
+  className: "bik-row-menu-button"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+	border-radius: 4px;
+
+	&:hover {
+		background: ${t.surface.subdued};
+	}
+`, W = e.div.attrs({ className: "bik-modal-body" })`
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	text-align: center;
+`, D = e.div.attrs({ className: "bik-modal-icon" })`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 4px;
+`, G = e.div.attrs({
+  className: "bik-modal-actions"
+})`
+	display: flex;
+	gap: 12px;
+	width: 100%;
+`, q = e.div.attrs({
+  className: "bik-subagent-scrim"
+})`
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.32);
+	z-index: 1000;
+`, E = e.div.attrs({
+  className: "bik-subagent-panel"
+})`
+	position: fixed;
+	top: 0;
+	right: 0;
+	height: 100%;
+	width: 421px;
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	background: ${t.surface.standard};
+	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
+	z-index: 1001;
+	box-sizing: border-box;
+`, J = e.div.attrs({
+  className: "bik-subagent-panel-header"
+})`
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 16px;
+	border-bottom: 1px solid ${t.stroke.primary};
+	flex-shrink: 0;
+`, K = e.div.attrs({
+  className: "bik-subagent-panel-header-text"
+})`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+`, Q = e.div.attrs({
+  className: "bik-subagent-panel-body"
+})`
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+`, U = e.div.attrs({
+  className: "bik-subagent-panel-footer"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	min-height: 48px;
+	border-top: 1px solid ${t.stroke.primary};
+	flex-shrink: 0;
+`, V = e.button.attrs({
+  className: "bik-subagent-close"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+	border-radius: 4px;
+	flex-shrink: 0;
+
+	&:hover {
+		background: ${t.surface.subdued};
+	}
+`;
+e.div.attrs({
+  className: "bik-field-action-row"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+`;
+export {
+  R as AddChipButton,
+  M as AddIconButton,
+  w as AiTextAreaInput,
+  N as AiTextAreaShell,
+  d as BackButton,
+  s as BuilderRoot,
+  $ as CardRow,
+  C as ChipCloseButton,
+  B as ChipWrap,
+  p as Content,
+  x as ContentCard,
+  y as FieldBlock,
+  v as FieldLabelRow,
+  b as Footer,
+  m as FooterActions,
+  g as FooterHint,
+  j as IntentChip,
+  l as Main,
+  G as ModalActions,
+  W as ModalBody,
+  D as ModalIcon,
+  S as RadioCard,
+  A as RadioCardText,
+  c as Rail,
+  f as RailItem,
+  u as RailList,
+  O as RowMenuButton,
+  L as RowText,
+  k as SectionHeaderWrap,
+  P as SelectableRow,
+  z as SideSection,
+  H as SideSectionHeader,
+  F as Step3Grid,
+  I as Step3Main,
+  T as Step3Side,
+  h as StepBadge,
+  V as SubAgentCloseButton,
+  E as SubAgentPanel,
+  Q as SubAgentPanelBody,
+  U as SubAgentPanelFooter,
+  J as SubAgentPanelHeader,
+  K as SubAgentPanelHeaderText,
+  q as SubAgentScrim,
+  r as TopBar,
+  o as TopBarSide
+};
+//# sourceMappingURL=AgentBuilder.styled.js.map

package/dist/esm/components/agent-builder/AgentBuilder.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tpadding: 24px;\n\tmin-height: 100%;\n\tbox-sizing: border-box;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. */\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/* Dashed connector line between consecutive step badges (centered on the badge). */\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' | 'complete' | 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.content.brand\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandTint\n\t\t\t: '#F0F0F0'};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.content.primaryInverse\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.content.brand\n\t\t\t: COLORS.content.placeholder};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmargin-bottom: 20px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmargin-bottom: 20px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n\tmargin-bottom: 16px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const IntentChip = styled.div.attrs({ className: 'bik-intent-chip' })`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ChipCloseButton = styled.button.attrs({\n\tclassName: 'bik-chip-close-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 300px;\n\tgap: 24px;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t}\n`;\n\nexport const Step3Main = styled.div.attrs({ className: 'bik-step3-main' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const Step3Side = styled.div.attrs({ className: 'bik-step3-side' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 24px;\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Row kebab (⋮) trigger — popover/menu come from the shared DropdownPopover ──\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-bottom: 4px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n`;\n\n// ── Create sub-agent drawer ─────────────────────────────────────────────────\n\nexport const SubAgentScrim = styled.div.attrs({\n\tclassName: 'bik-subagent-scrim',\n})`\n\tposition: fixed;\n\tinset: 0;\n\tbackground: rgba(0, 0, 0, 0.32);\n\tz-index: 1000;\n`;\n\nexport const SubAgentPanel = styled.div.attrs({\n\tclassName: 'bik-subagent-panel',\n})`\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\theight: 100%;\n\twidth: 421px;\n\tmax-width: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: ${COLORS.surface.standard};\n\tbox-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);\n\tz-index: 1001;\n\tbox-sizing: border-box;\n`;\n\nexport const SubAgentPanelHeader = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header',\n})`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentPanelHeaderText = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n`;\n\nexport const SubAgentPanelBody = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-body',\n})`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n`;\n\nexport const SubAgentPanelFooter = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-footer',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tmin-height: 48px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentCloseButton = styled.button.attrs({\n\tclassName: 'bik-subagent-close',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\tflex-shrink: 0;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n"],"names":["BuilderRoot","styled","COLORS","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","RadioCardText","ChipWrap","IntentChip","ChipCloseButton","AddChipButton","Step3Grid","Step3Main","Step3Side","SideSection","SideSectionHeader","AddIconButton","SelectableRow","RowText","RowMenuButton","ModalBody","ModalIcon","ModalActions","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","SubAgentPanelBody","SubAgentPanelFooter","SubAgentCloseButton"],"mappings":"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"}

package/dist/esm/components/agent-builder/components/AgentBuilderFooter.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface AgentBuilderFooterProps {
+    footerHint: string;
+    onTestAgent?: () => void;
+    /** Opens the go-live confirmation. */
+    onGoLive: () => void;
+    isPublishing?: boolean;
+}
+export declare const AgentBuilderFooter: React.FC<AgentBuilderFooterProps>;
+export {};

package/dist/esm/components/agent-builder/components/AgentBuilderFooter.js

@@ -0,0 +1,70 @@
+import { jsxs as e, jsx as t, Fragment as u } from "react/jsx-runtime";
+import b from "../../../assets/icons/info.svg.js";
+import { BodySecondary as g } from "../../TypographyStyle.js";
+import { COLORS as i } from "../../../constants/Theme.js";
+import { Footer as x, FooterHint as h, FooterActions as y } from "../AgentBuilder.styled.js";
+import { useAgentBuilderContext as f } from "../context/AgentBuilderContext.js";
+import { Button as o } from "../../button/Button.js";
+const z = ({
+  footerHint: n,
+  onTestAgent: r,
+  onGoLive: l,
+  isPublishing: a
+}) => {
+  const { isFirstStep: s, isLastStep: d, goPrev: c, goNext: m, isActiveStepValid: p } = f();
+  return /* @__PURE__ */ e(x, { children: [
+    /* @__PURE__ */ e(h, { children: [
+      /* @__PURE__ */ t(b, { width: 16, height: 16, color: i.content.placeholder }),
+      /* @__PURE__ */ t(g, { color: i.content.placeholder, children: n })
+    ] }),
+    /* @__PURE__ */ e(y, { children: [
+      !s && /* @__PURE__ */ t(
+        o,
+        {
+          "data-test": "agent-builder-back-step",
+          buttonType: "text",
+          size: "small",
+          buttonText: "Back",
+          onClick: c
+        }
+      ),
+      d ? /* @__PURE__ */ e(u, { children: [
+        r && /* @__PURE__ */ t(
+          o,
+          {
+            "data-test": "agent-builder-test",
+            buttonType: "secondary",
+            size: "small",
+            buttonText: "Test agent",
+            onClick: r
+          }
+        ),
+        /* @__PURE__ */ t(
+          o,
+          {
+            "data-test": "agent-builder-go-live",
+            buttonType: "primary",
+            size: "small",
+            buttonText: "Go live",
+            isLoading: a,
+            onClick: l
+          }
+        )
+      ] }) : /* @__PURE__ */ t(
+        o,
+        {
+          "data-test": "agent-builder-next",
+          buttonType: "primary",
+          size: "small",
+          buttonText: "Next",
+          disabled: !p,
+          onClick: m
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  z as AgentBuilderFooter
+};
+//# sourceMappingURL=AgentBuilderFooter.js.map

package/dist/esm/components/agent-builder/components/AgentBuilderFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentBuilderFooter.js","sources":["../../../../../src/components/agent-builder/components/AgentBuilderFooter.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { Footer, FooterActions, FooterHint } from '../AgentBuilder.styled';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\n\ninterface AgentBuilderFooterProps {\n\tfooterHint: string;\n\tonTestAgent?: () => void;\n\t/** Opens the go-live confirmation. */\n\tonGoLive: () => void;\n\tisPublishing?: boolean;\n}\n\nexport const AgentBuilderFooter: React.FC<AgentBuilderFooterProps> = ({\n\tfooterHint,\n\tonTestAgent,\n\tonGoLive,\n\tisPublishing,\n}) => {\n\tconst { isFirstStep, isLastStep, goPrev, goNext, isActiveStepValid } =\n\t\tuseAgentBuilderContext();\n\n\treturn (\n\t\t<Footer>\n\t\t\t<FooterHint>\n\t\t\t\t<InfoIcon width={16} height={16} color={COLORS.content.placeholder} />\n\t\t\t\t<BodySecondary color={COLORS.content.placeholder}>\n\t\t\t\t\t{footerHint}\n\t\t\t\t</BodySecondary>\n\t\t\t</FooterHint>\n\n\t\t\t<FooterActions>\n\t\t\t\t{!isFirstStep && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"agent-builder-back-step\"\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Back\"\n\t\t\t\t\t\tonClick={goPrev}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{isLastStep ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{onTestAgent && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-builder-test\"\n\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tbuttonText=\"Test agent\"\n\t\t\t\t\t\t\t\tonClick={onTestAgent}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-builder-go-live\"\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tbuttonText=\"Go live\"\n\t\t\t\t\t\t\tisLoading={isPublishing}\n\t\t\t\t\t\t\tonClick={onGoLive}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"agent-builder-next\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Next\"\n\t\t\t\t\t\tdisabled={!isActiveStepValid}\n\t\t\t\t\t\tonClick={goNext}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</FooterActions>\n\t\t</Footer>\n\t);\n};\n"],"names":["AgentBuilderFooter","footerHint","onTestAgent","onGoLive","isPublishing","isFirstStep","isLastStep","goPrev","goNext","isActiveStepValid","useAgentBuilderContext","Footer","jsxs","FooterHint","jsx","InfoIcon","COLORS","BodySecondary","FooterActions","Button","Fragment"],"mappings":";;;;;;;AAgBO,MAAMA,IAAwD,CAAC;AAAA,EACrE,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACD,MAAM;AACL,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,QAAAC,GAAQ,QAAAC,GAAQ,mBAAAC,EAAA,IAChDC,EAAA;AAED,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAS,OAAO,IAAI,QAAQ,IAAI,OAAOC,EAAO,QAAQ,YAAA,CAAa;AAAA,wBACnEC,GAAA,EAAc,OAAOD,EAAO,QAAQ,aACnC,UAAAf,EAAA,CACF;AAAA,IAAA,GACD;AAAA,sBAECiB,GAAA,EACC,UAAA;AAAA,MAAA,CAACb,KACD,gBAAAS;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,YAAW;AAAA,UACX,MAAK;AAAA,UACL,YAAW;AAAA,UACX,SAASZ;AAAA,QAAA;AAAA,MAAA;AAAA,MAIVD,IACA,gBAAAM,EAAAQ,GAAA,EACE,UAAA;AAAA,QAAAlB,KACA,gBAAAY;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,YAAW;AAAA,YACX,SAASjB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGX,gBAAAY;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,YAAW;AAAA,YACX,WAAWf;AAAA,YACX,SAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACV,EAAA,CACD,IAEA,gBAAAW;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,YAAW;AAAA,UACX,MAAK;AAAA,UACL,YAAW;AAAA,UACX,UAAU,CAACV;AAAA,UACX,SAASD;AAAA,QAAA;AAAA,MAAA;AAAA,IACV,EAAA,CAEF;AAAA,EAAA,GACD;AAEF;"}

package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { AgentStatus } from '../AgentBuilder.model';
+interface AgentBuilderTopBarProps {
+    name: string;
+    status: AgentStatus;
+    onBack?: () => void;
+    onDiscard: () => void;
+    onSaveDraft: () => void;
+    isSaving?: boolean;
+}
+export declare const AgentBuilderTopBar: React.FC<AgentBuilderTopBarProps>;
+export {};

package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.js

@@ -0,0 +1,73 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import p from "../../../assets/icons/arrow_left.svg.js";
+import { TitleRegular as u } from "../../TypographyStyle.js";
+import { COLORS as a } from "../../../constants/Theme.js";
+import { TopBar as g, TopBarSide as o, BackButton as f } from "../AgentBuilder.styled.js";
+import { Tag as T } from "../../tag/Tag.js";
+import { Button as n } from "../../button/Button.js";
+const L = ({
+  name: l,
+  status: d,
+  onBack: e,
+  onDiscard: s,
+  onSaveDraft: c,
+  isSaving: m
+}) => {
+  const i = d === "live";
+  return /* @__PURE__ */ r(g, { children: [
+    /* @__PURE__ */ r(o, { children: [
+      e && /* @__PURE__ */ t(
+        f,
+        {
+          "data-test": "agent-builder-back",
+          onClick: e,
+          "aria-label": "Back",
+          children: /* @__PURE__ */ t(
+            p,
+            {
+              width: 20,
+              height: 20,
+              color: a.content.primary
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(u, { color: a.content.primary, children: l || "Untitled agent" }),
+      /* @__PURE__ */ t(
+        T,
+        {
+          tagText: i ? "Live" : "Draft",
+          type: i ? "positive" : "neutral",
+          variant: "regular"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(o, { children: [
+      /* @__PURE__ */ t(
+        n,
+        {
+          "data-test": "agent-builder-discard",
+          buttonType: "text",
+          size: "small",
+          buttonText: "Discard",
+          onClick: s
+        }
+      ),
+      /* @__PURE__ */ t(
+        n,
+        {
+          "data-test": "agent-builder-save-draft",
+          buttonType: "secondary",
+          size: "small",
+          buttonText: "Save as draft",
+          isLoading: m,
+          onClick: c
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  L as AgentBuilderTopBar
+};
+//# sourceMappingURL=AgentBuilderTopBar.js.map

package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentBuilderTopBar.js","sources":["../../../../../src/components/agent-builder/components/AgentBuilderTopBar.tsx"],"sourcesContent":["import ArrowLeftIcon from '@src/assets/icons/arrow_left.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { Tag } from '@src/components/tag';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentStatus } from '../AgentBuilder.model';\nimport { BackButton, TopBar, TopBarSide } from '../AgentBuilder.styled';\n\ninterface AgentBuilderTopBarProps {\n\tname: string;\n\tstatus: AgentStatus;\n\tonBack?: () => void;\n\tonDiscard: () => void;\n\tonSaveDraft: () => void;\n\tisSaving?: boolean;\n}\n\nexport const AgentBuilderTopBar: React.FC<AgentBuilderTopBarProps> = ({\n\tname,\n\tstatus,\n\tonBack,\n\tonDiscard,\n\tonSaveDraft,\n\tisSaving,\n}) => {\n\tconst isLive = status === 'live';\n\treturn (\n\t\t<TopBar>\n\t\t\t<TopBarSide>\n\t\t\t\t{onBack && (\n\t\t\t\t\t<BackButton\n\t\t\t\t\t\tdata-test=\"agent-builder-back\"\n\t\t\t\t\t\tonClick={onBack}\n\t\t\t\t\t\taria-label=\"Back\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowLeftIcon\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BackButton>\n\t\t\t\t)}\n\t\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\t\t{name || 'Untitled agent'}\n\t\t\t\t</TitleRegular>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</TopBarSide>\n\n\t\t\t<TopBarSide>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-builder-discard\"\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tbuttonText=\"Discard\"\n\t\t\t\t\tonClick={onDiscard}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-builder-save-draft\"\n\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\tisLoading={isSaving}\n\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t/>\n\t\t\t</TopBarSide>\n\t\t</TopBar>\n\t);\n};\n"],"names":["AgentBuilderTopBar","name","status","onBack","onDiscard","onSaveDraft","isSaving","isLive","TopBar","jsxs","TopBarSide","jsx","BackButton","ArrowLeftIcon","COLORS","TitleRegular","Tag","Button"],"mappings":";;;;;;;AAkBO,MAAMA,IAAwD,CAAC;AAAA,EACrE,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACD,MAAM;AACL,QAAMC,IAASL,MAAW;AAC1B,2BACEM,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAAP,KACA,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,SAAST;AAAA,UACT,cAAW;AAAA,UAEX,UAAA,gBAAAQ;AAAA,YAACE;AAAAA,YAAA;AAAA,cACA,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAOC,EAAO,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,wBAGDC,GAAA,EAAa,OAAOD,EAAO,QAAQ,SAClC,eAAQ,kBACV;AAAA,MACA,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,SAAST,IAAS,SAAS;AAAA,UAC3B,MAAMA,IAAS,aAAa;AAAA,UAC5B,SAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACT,GACD;AAAA,sBAECG,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,YAAW;AAAA,UACX,MAAK;AAAA,UACL,YAAW;AAAA,UACX,SAASb;AAAA,QAAA;AAAA,MAAA;AAAA,MAEV,gBAAAO;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,YAAW;AAAA,UACX,MAAK;AAAA,UACL,YAAW;AAAA,UACX,WAAWX;AAAA,UACX,SAASD;AAAA,QAAA;AAAA,MAAA;AAAA,IACV,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}