@bikdotai/bik-component-library 0.0.821-2 → 0.0.821-beta.0

package/dist/esm/components/agent-builder/AgentBuilder.styled.d.ts

@@ -0,0 +1,121 @@
+export declare const BuilderRoot: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-builder-root";
+}, "className">;
+export declare const TopBar: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-top-bar";
+}, "className">;
+export declare const TopBarSide: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-top-bar-side";
+}, "className">;
+export declare const BackButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-back-button";
+}, "className">;
+export declare const Main: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-main";
+}, "className">;
+export declare const Rail: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-rail";
+}, "className">;
+export declare const Content: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-content";
+}, "className">;
+export declare const ContentCard: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-content-card";
+}, "className">;
+export declare const Footer: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-footer";
+}, "className">;
+export declare const FooterHint: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-footer-hint";
+}, "className">;
+export declare const FooterActions: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-footer-actions";
+}, "className">;
+export declare const RailList: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-rail-list";
+}, "className">;
+export declare const RailItem: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-rail-item";
+}, "className">;
+export declare const StepBadge: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-step-badge";
+} & {
+    state: 'active' | 'complete' | 'inactive';
+}, "className">;
+export declare const SectionHeaderWrap: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-section-header-wrap";
+}, "className">;
+export declare const FieldBlock: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-field-block";
+}, "className">;
+export declare const FieldLabelRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-field-label-row";
+}, "className">;
+export declare const AiTextAreaShell: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-ai-text-area-shell";
+} & {
+    focused?: boolean | undefined;
+    minHeight?: string | undefined;
+}, "className">;
+export declare const AiTextAreaInput: import('styled-components').StyledComponent<"textarea", any, {
+    className: "bik-ai-text-area-input";
+}, "className">;
+export declare const CardRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-card-row";
+}, "className">;
+export declare const RadioCard: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-radio-card";
+} & {
+    selected?: boolean | undefined;
+}, "className">;
+export declare const RadioCardText: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-radio-card-text";
+}, "className">;
+export declare const ChipWrap: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-chip-wrap";
+}, "className">;
+export declare const IntentChip: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-intent-chip";
+}, "className">;
+export declare const ChipCloseButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-chip-close-button";
+}, "className">;
+export declare const AddChipButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-add-chip-button";
+}, "className">;
+export declare const Step3Grid: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-step3-grid";
+}, "className">;
+export declare const Step3Main: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-step3-main";
+}, "className">;
+export declare const Step3Side: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-step3-side";
+}, "className">;
+export declare const SideSection: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-side-section";
+}, "className">;
+export declare const SideSectionHeader: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-side-section-header";
+}, "className">;
+export declare const AddIconButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-add-icon-button";
+}, "className">;
+export declare const SelectableRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-selectable-row";
+}, "className">;
+export declare const RowText: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-row-text";
+}, "className">;
+export declare const RowRemoveButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-row-remove-button";
+}, "className">;
+export declare const ModalBody: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-modal-body";
+}, "className">;
+export declare const ModalIcon: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-modal-icon";
+}, "className">;
+export declare const ModalActions: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-modal-actions";
+}, "className">;

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

@@ -0,0 +1,353 @@
+import t from "styled-components";
+import { COLORS as e } from "../../constants/Theme.js";
+const r = t.div.attrs({ className: "bik-builder-root" })`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	min-height: 0;
+	background: ${e.surface.standard};
+`, s = t.div.attrs({ className: "bik-top-bar" })`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 56px;
+	padding: 12px 16px;
+	border-bottom: 1px solid ${e.stroke.primary};
+	flex-shrink: 0;
+`, o = t.div.attrs({ className: "bik-top-bar-side" })`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+`, d = t.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: ${e.surface.subdued};
+	}
+`, l = t.div.attrs({ className: "bik-main" })`
+	display: flex;
+	flex: 1;
+	min-height: 0;
+`, c = t.div.attrs({ className: "bik-rail" })`
+	width: 234px;
+	flex-shrink: 0;
+	border-right: 1px solid ${e.stroke.primary};
+	padding: 16px;
+	overflow-y: auto;
+	background: ${e.surface.standard};
+`, p = t.div.attrs({ className: "bik-content" })`
+	flex: 1;
+	min-width: 0;
+	overflow-y: auto;
+	padding: 16px;
+	background: ${e.surface.standard};
+`, x = t.div.attrs({ className: "bik-content-card" })`
+	border: 1px solid ${e.stroke.primary};
+	border-radius: 8px;
+	padding: 24px;
+	min-height: 100%;
+	box-sizing: border-box;
+`, b = t.div.attrs({ className: "bik-footer" })`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	min-height: 56px;
+	padding: 12px 16px;
+	border-top: 1px solid ${e.stroke.primary};
+	flex-shrink: 0;
+`, m = t.div.attrs({ className: "bik-footer-hint" })`
+	display: flex;
+	align-items: center;
+	gap: 6px;
+`, g = t.div.attrs({
+  className: "bik-footer-actions"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+`, f = t.div.attrs({ className: "bik-rail-list" })`
+	display: flex;
+	flex-direction: column;
+`, u = t.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;
+	}
+`, k = t.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" ? e.content.brand : a.state === "active" ? e.background.brandTint : "#F0F0F0"};
+	color: ${(a) => a.state === "complete" ? e.content.primaryInverse : a.state === "active" ? e.content.brand : e.content.placeholder};
+`, h = t.div.attrs({
+  className: "bik-section-header-wrap"
+})`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 20px;
+`, y = t.div.attrs({ className: "bik-field-block" })`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin-bottom: 20px;
+`, v = t.div.attrs({
+  className: "bik-field-label-row"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`, N = t.div.attrs({
+  className: "bik-ai-text-area-shell"
+})`
+	display: flex;
+	flex-direction: column;
+	border: 1px solid
+		${(a) => a.focused ? e.stroke.brand : e.stroke.primary};
+	border-radius: 4px;
+	padding: 8px 12px;
+	gap: 8px;
+	min-height: ${(a) => a.minHeight ?? "120px"};
+	background: ${e.surface.standard};
+`, w = t.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: ${e.content.primary};
+	background: transparent;
+	min-height: 60px;
+
+	&::placeholder {
+		color: ${e.content.placeholder};
+	}
+`, $ = t.div.attrs({ className: "bik-card-row" })`
+	display: flex;
+	gap: 12px;
+	margin-bottom: 16px;
+`, S = t.button.attrs({ className: "bik-radio-card" })`
+	flex: 1;
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 16px;
+	border: 1px solid
+		${(a) => a.selected ? e.stroke.brand : e.stroke.primary};
+	background: ${(a) => a.selected ? e.background.brandLight : e.surface.standard};
+	border-radius: 8px;
+	cursor: pointer;
+	text-align: left;
+	width: 100%;
+`, B = t.div.attrs({
+  className: "bik-radio-card-text"
+})`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+`, R = t.div.attrs({ className: "bik-chip-wrap" })`
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+`, C = t.div.attrs({ className: "bik-intent-chip" })`
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	border: 1px solid ${e.stroke.primary};
+	border-radius: 4px;
+	background: ${e.surface.standard};
+`, j = t.button.attrs({
+  className: "bik-chip-close-button"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+`, A = t.button.attrs({
+  className: "bik-add-chip-button"
+})`
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	border: 1px dashed ${e.stroke.primary};
+	border-radius: 4px;
+	background: transparent;
+	cursor: pointer;
+`, F = t.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 = t.div.attrs({ className: "bik-step3-main" })`
+	display: flex;
+	flex-direction: column;
+`, T = t.div.attrs({ className: "bik-step3-side" })`
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+`, M = t.div.attrs({ className: "bik-side-section" })`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`, z = t.div.attrs({
+  className: "bik-side-section-header"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`, H = t.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: ${e.surface.subdued};
+	}
+`, L = t.div.attrs({
+  className: "bik-selectable-row"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	border: 1px solid ${e.stroke.primary};
+	border-radius: 4px;
+`, O = t.div.attrs({ className: "bik-row-text" })`
+	flex: 1;
+	min-width: 0;
+`, W = t.button.attrs({
+  className: "bik-row-remove-button"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+`, D = t.div.attrs({ className: "bik-modal-body" })`
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	text-align: center;
+`, G = t.div.attrs({ className: "bik-modal-icon" })`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 4px;
+`, q = t.div.attrs({
+  className: "bik-modal-actions"
+})`
+	display: flex;
+	gap: 12px;
+	width: 100%;
+`;
+export {
+  A as AddChipButton,
+  H as AddIconButton,
+  w as AiTextAreaInput,
+  N as AiTextAreaShell,
+  d as BackButton,
+  r as BuilderRoot,
+  $ as CardRow,
+  j as ChipCloseButton,
+  R as ChipWrap,
+  p as Content,
+  x as ContentCard,
+  y as FieldBlock,
+  v as FieldLabelRow,
+  b as Footer,
+  g as FooterActions,
+  m as FooterHint,
+  C as IntentChip,
+  l as Main,
+  q as ModalActions,
+  D as ModalBody,
+  G as ModalIcon,
+  S as RadioCard,
+  B as RadioCardText,
+  c as Rail,
+  u as RailItem,
+  f as RailList,
+  W as RowRemoveButton,
+  O as RowText,
+  h as SectionHeaderWrap,
+  L as SelectableRow,
+  M as SideSection,
+  z as SideSectionHeader,
+  F as Step3Grid,
+  I as Step3Main,
+  T as Step3Side,
+  k as StepBadge,
+  s 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// ── 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"],"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","RowRemoveButton","ModalBody","ModalIcon","ModalActions"],"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