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

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

@@ -1,6 +1,6 @@
 import e, { css as s } from "styled-components";
-import { COLORS as t, BASE_COLORS as i } from "../../constants/Theme.js";
-const r = s`
+import { COLORS as t, BASE_COLORS as a } from "../../constants/Theme.js";
+const n = s`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -21,14 +21,14 @@ const r = s`
 		opacity: 0.5;
 		background: transparent;
 	}
-`, d = e.div.attrs({ className: "bik-builder-root" })`
+`, c = e.div.attrs({ className: "bik-builder-root" })`
 	display: flex;
 	flex-direction: column;
 	height: 100%;
 	width: 100%;
 	min-height: 0;
 	background: ${t.surface.standard};
-`, l = e.div.attrs({ className: "bik-top-bar" })`
+`, p = e.div.attrs({ className: "bik-top-bar" })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -36,11 +36,11 @@ const r = s`
 	padding: 12px 16px;
 	border-bottom: 1px solid ${t.stroke.primary};
 	flex-shrink: 0;
-`, c = e.div.attrs({ className: "bik-top-bar-side" })`
+`, x = e.div.attrs({ className: "bik-top-bar-side" })`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`, p = e.button.attrs({ className: "bik-back-button" })`
+`, h = e.button.attrs({ className: "bik-back-button" })`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -55,18 +55,18 @@ const r = s`
 	&:hover {
 		background: ${t.surface.subdued};
 	}
-`, x = e.div.attrs({ className: "bik-main" })`
+`, g = e.div.attrs({ className: "bik-main" })`
 	display: flex;
 	flex: 1;
 	min-height: 0;
-`, h = e.div.attrs({ className: "bik-rail" })`
+`, b = 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};
-`, b = e.div.attrs({ className: "bik-content" })`
+`, m = e.div.attrs({ className: "bik-content" })`
 	flex: 1;
 	min-width: 0;
 	min-height: 0;
@@ -75,7 +75,7 @@ const r = s`
 	flex-direction: column;
 	padding: 16px;
 	background: ${t.surface.standard};
-`, g = e.div.attrs({ className: "bik-content-card" })`
+`, f = e.div.attrs({ className: "bik-content-card" })`
 	flex: 1;
 	min-height: 0;
 	display: flex;
@@ -84,11 +84,11 @@ const r = s`
 	border: 1px solid ${t.stroke.primary};
 	border-radius: 8px;
 	box-sizing: border-box;
-`, f = e.div.attrs({ className: "bik-step-scroll" })`
+`, u = e.div.attrs({ className: "bik-step-scroll" })`
 	flex: 1;
 	min-height: 0;
 	overflow-y: auto;
-`, m = e.div.attrs({ className: "bik-footer" })`
+`, k = e.div.attrs({ className: "bik-footer" })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -97,20 +97,20 @@ const r = s`
 	border-top: 1px solid ${t.stroke.primary};
 	flex-shrink: 0;
 	box-shadow: 0px -2px 12px 0px #0000000a;
-`, u = e.div.attrs({ className: "bik-footer-hint" })`
+`, w = e.div.attrs({ className: "bik-footer-hint" })`
 	display: flex;
 	align-items: center;
 	gap: 6px;
-`, k = e.div.attrs({
+`, y = e.div.attrs({
   className: "bik-footer-actions"
 })`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`, w = e.div.attrs({ className: "bik-rail-list" })`
+`, v = e.div.attrs({ className: "bik-rail-list" })`
 	display: flex;
 	flex-direction: column;
-`, y = e.button.attrs({ className: "bik-rail-item" })`
+`, N = e.button.attrs({ className: "bik-rail-item" })`
 	position: relative;
 	display: flex;
 	align-items: flex-start;
@@ -142,7 +142,7 @@ const r = s`
 		border-left: 1px dashed #e0e0e0;
 		pointer-events: none;
 	}
-`, v = e.div.attrs({ className: "bik-step-badge" })`
+`, $ = e.div.attrs({ className: "bik-step-badge" })`
 	width: 20px;
 	height: 20px;
 	flex-shrink: 0;
@@ -154,9 +154,9 @@ const r = s`
 	font-size: 10px;
 	font-weight: 400;
 	line-height: 12px;
-	background: ${(a) => a.state === "complete" ? t.background.inverseLight : a.state === "active" ? t.background.brandLight : t.background.base};
-	color: ${(a) => a.state === "complete" ? t.surface.standard : a.state === "active" ? t.background.inverseLight : t.content.secondary};
-`, N = e.div.attrs({
+	background: ${(i) => i.state === "complete" ? t.background.inverseLight : i.state === "active" ? t.background.brandLight : t.background.base};
+	color: ${(i) => i.state === "complete" ? t.surface.standard : i.state === "active" ? t.background.inverseLight : t.content.secondary};
+`, S = e.div.attrs({
   className: "bik-section-header-wrap"
 })`
 	display: flex;
@@ -164,34 +164,34 @@ const r = s`
 	gap: 4px;
 	padding: 16px;
 	border-bottom: 1px solid ${t.stroke.primary};
-`, $ = e.div.attrs({
+`, C = e.div.attrs({
   className: "bik-section-header-wrap"
 })`
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 	padding: 16px;
-`, S = e.div.attrs({ className: "bik-field-block" })`
+`, B = e.div.attrs({ className: "bik-field-block" })`
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, B = e.div.attrs({
+`, R = e.div.attrs({
   className: "bik-field-label-row"
 })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-`, R = e.div.attrs({
+`, T = 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};
+		${(i) => i.focused ? t.stroke.brand : t.stroke.primary};
 	border-radius: 4px;
 	padding: 8px 12px;
 	gap: 8px;
-	min-height: ${(a) => a.minHeight ?? "120px"};
+	min-height: ${(i) => i.minHeight ?? "120px"};
 	background: ${t.surface.standard};
 `, A = e.textarea.attrs({
   className: "bik-ai-text-area-input"
@@ -210,29 +210,35 @@ const r = s`
 	&::placeholder {
 		color: ${t.content.placeholder};
 	}
-`, j = e.div.attrs({ className: "bik-card-row" })`
+`, L = e.div.attrs({ className: "bik-card-row" })`
 	display: flex;
 	gap: 12px;
-`, L = e.button.attrs({ className: "bik-radio-card" })`
+`, j = 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 ? i.brand[800] : t.stroke.primary};
-	background: ${(a) => a.selected ? t.background.brandLight : t.surface.standard};
+		${(i) => i.selected ? a.brand[800] : t.stroke.primary};
+	background: ${(i) => i.selected ? t.background.brandLight : t.surface.standard};
 	border-radius: 8px;
 	cursor: pointer;
 	text-align: left;
 	width: 100%;
+
+	&:disabled {
+		cursor: not-allowed;
+		background: ${t.surface.subdued};
+		border-color: ${t.stroke.primary};
+	}
 `, z = e.div.attrs({
   className: "bik-radio-card-text"
 })`
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
-`, C = e.div.attrs({ className: "bik-chip-wrap" })`
+`, M = e.div.attrs({ className: "bik-chip-wrap" })`
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -250,13 +256,13 @@ e.button.attrs({
 	background: transparent;
 	cursor: pointer;
 `;
-const T = e.div.attrs({
+const F = e.div.attrs({
   className: "bik-agent-step bik-agent-step--response"
 })`
 	display: flex;
 	flex-direction: column;
 	min-height: 100%;
-`, F = e.div.attrs({ className: "bik-step3-grid" })`
+`, I = e.div.attrs({ className: "bik-step3-grid" })`
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) 1px 360px;
 	/* Single row that fills the grid's height, so the divider spans the full
@@ -272,11 +278,11 @@ const T = e.div.attrs({
 
 	/* Fill the remaining card height so a full-height child (e.g. the Step 3
 	   column divider) can stretch all the way down to the footer. */
-	${(a) => a.$grow && s`
+	${(i) => i.$grow && s`
 			flex: 1;
 			min-height: 0;
 		`}
-`, I = e.div.attrs({
+`, H = e.div.attrs({
   className: "bik-step3-divider"
 })`
 	width: 1px;
@@ -286,29 +292,29 @@ const T = e.div.attrs({
 	@media (max-width: 1100px) {
 		display: none;
 	}
-`, M = e.div.attrs({ className: "bik-side-section" })`
+`, E = e.div.attrs({ className: "bik-side-section" })`
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, D = e.div.attrs({
+`, O = e.div.attrs({
   className: "bik-side-section-header"
 })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-`, H = e.button.attrs({
+`, D = e.button.attrs({
   className: "bik-add-icon-button"
 })`
-	${r}
+	${n}
 	background: ${t.surface.standard};
 	border: 1px solid ${t.stroke.primary};
-`, O = e.div.attrs({
+`, _ = e.div.attrs({
   className: "bik-source-button-row"
 })`
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
-`, W = e.button.attrs({
+`, P = e.button.attrs({
   className: "bik-source-button"
 })`
 	display: flex;
@@ -324,7 +330,7 @@ const T = e.div.attrs({
 	&:hover {
 		background: ${t.surface.subdued};
 	}
-`, E = e.div.attrs({
+`, G = e.div.attrs({
   className: "bik-selectable-row"
 })`
 	display: flex;
@@ -347,7 +353,7 @@ const T = e.div.attrs({
 	& > svg {
 		flex-shrink: 0;
 	}
-`, q = e.div.attrs({ className: "bik-row-text" })`
+`, W = e.div.attrs({ className: "bik-row-text" })`
 	flex: 1;
 	min-width: 0;
 	overflow: hidden;
@@ -359,7 +365,7 @@ const T = e.div.attrs({
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
-`, G = e.div.attrs({ className: "bik-row-label" })`
+`, q = e.div.attrs({ className: "bik-row-label" })`
 	display: flex;
 	align-items: center;
 	gap: 6px;
@@ -383,35 +389,35 @@ e.button.attrs({
 	padding: 0;
 	cursor: pointer;
 `;
-const U = e.div.attrs({ className: "bik-row-actions" })`
+const K = e.div.attrs({ className: "bik-row-actions" })`
 	display: flex;
 	align-items: center;
 	gap: 4px;
 	flex-shrink: 0;
-`, _ = e.span.attrs({
+`, U = e.span.attrs({
   className: "bik-row-action-divider"
 })`
 	width: 1px;
 	align-self: stretch;
 	margin: 4px 0;
 	background: ${t.stroke.primary};
-`, J = e.button.attrs({
+`, X = e.button.attrs({
   className: "bik-row-menu-button"
 })`
-	${r}
-`, K = e.div.attrs({
+	${n}
+`, J = e.div.attrs({
   className: "bik-draft-button-scope"
 })`
 	display: flex;
 	flex: 1;
 
 	button {
-		border-color: ${i.brand[800]};
+		border-color: ${a.brand[800]};
 	}
 	button .text {
-		color: ${i.brand[800]};
+		color: ${a.brand[800]};
 	}
-`, P = e.div.attrs({ className: "bik-modal-body" })`
+`, r = e.div.attrs({ className: "bik-modal-body" })`
 	padding: 24px;
 	display: flex;
 	flex-direction: column;
@@ -422,7 +428,17 @@ const U = e.div.attrs({ className: "bik-row-actions" })`
 	display: flex;
 	align-items: center;
 	justify-content: center;
-`, V = e.div.attrs({
+`, o = 268, V = e(r)`
+	min-height: ${o}px;
+`, Y = e.div`
+	flex: 1;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+`, Z = e.div.attrs({
   className: "bik-modal-actions"
 })`
 	display: flex;
@@ -446,49 +462,211 @@ e.div.attrs({
 	align-items: center;
 	gap: 8px;
 `;
+const ee = e.div.attrs({
+  className: "bik-channels-section"
+})`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`, te = e.button.attrs({
+  className: "bik-channels-link"
+})`
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	border: none;
+	background: transparent;
+	padding: 0;
+	cursor: pointer;
+	color: ${t.background.inverseLight};
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 400;
+	white-space: nowrap;
+
+	&:hover {
+		text-decoration: underline;
+	}
+`, ie = e.div.attrs({
+  className: "bik-channel-card"
+})`
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 100%;
+	background: ${t.surface.standard};
+	border: 1px solid ${t.stroke.primary};
+	border-radius: 4px;
+	overflow: hidden;
+`, ae = e.div.attrs({ className: "bik-channel-row" })`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px;
+	width: 100%;
+	/* 12 + 24 + 12 — every child is pinned to the 24px band so the row can't
+	   drift taller than the design's 48px. */
+	min-height: 48px;
+	box-sizing: border-box;
+`, se = e.div.attrs({
+  className: "bik-channel-row-main"
+})`
+	display: flex;
+	flex: 1 0 0;
+	min-width: 0;
+	align-items: center;
+	gap: 8px;
+	height: 24px;
+`, ne = e.div.attrs({
+  className: "bik-channel-identity"
+})`
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex: 1 0 0;
+	min-width: 0;
+`, re = e.div.attrs({
+  className: "bik-channel-glyph"
+})`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 24px;
+	height: 24px;
+	border-radius: 4.8px;
+	background: ${(i) => i.tint};
+	overflow: hidden;
+`, oe = e.div.attrs({
+  className: "bik-channel-chips"
+})`
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-shrink: 0;
+
+	/* Figma's tag-regular is 24px tall, but Tag's "regular" variant floors at
+	   26px — which pushes the 48px row to 50px. Pin the wrapper back to 24
+	   (Tag's own \`height\` prop only reaches its inner container). The second
+	   selector catches a Tag sitting inside a ChipTooltipTarget. */
+	> *,
+	> span > * {
+		min-height: 24px;
+	}
+`, le = e.span.attrs({
+  className: "bik-chip-tooltip-target"
+})`
+	display: inline-flex;
+	align-items: center;
+`, de = e.div.attrs({
+  className: "bik-channel-picker-list"
+})`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	width: 100%;
+	max-height: 280px;
+	overflow-y: auto;
+`, ce = e.div.attrs({
+  className: "bik-channel-picker-row"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 4px;
+	border-radius: 4px;
+	box-sizing: border-box;
+
+	&:hover {
+		background: ${t.surface.subdued};
+	}
+`, pe = e.div.attrs({
+  className: "bik-channel-picker-account"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	height: 32px;
+	padding: 0 4px;
+`, xe = e.div.attrs({
+  className: "bik-channel-picker-body"
+})`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 100%;
+	/* Figma indents the body 8px inside the modal's own 24px gutter, so the list
+	   sits at 32px while the title stays at 24px. StyledModal's body has no
+	   gutter of its own, so both live here. */
+	padding: 0 32px;
+	box-sizing: border-box;
+`, he = {
+  width: 24,
+  height: 24,
+  justifyContent: "center"
+};
 export {
-  H as AddIconButton,
+  o as AGENT_STATE_MODAL_MIN_HEIGHT,
+  D as AddIconButton,
+  V as AgentStateModalBody,
+  Y as AgentStateModalHero,
   A as AiTextAreaInput,
-  R as AiTextAreaShell,
-  p as BackButton,
-  d as BuilderRoot,
-  j as CardRow,
-  C as ChipWrap,
-  b as Content,
-  g as ContentCard,
-  K as DraftButtonScope,
-  S as FieldBlock,
-  B as FieldLabelRow,
-  m as Footer,
-  k as FooterActions,
-  u as FooterHint,
-  x as Main,
-  V as ModalActions,
-  P as ModalBody,
+  T as AiTextAreaShell,
+  h as BackButton,
+  c as BuilderRoot,
+  he as CHECKBOX_SLOT,
+  L as CardRow,
+  ie as ChannelCard,
+  oe as ChannelChips,
+  re as ChannelGlyph,
+  ne as ChannelIdentity,
+  pe as ChannelPickerAccount,
+  xe as ChannelPickerBody,
+  de as ChannelPickerList,
+  ce as ChannelPickerRow,
+  ae as ChannelRow,
+  se as ChannelRowMain,
+  te as ChannelsLink,
+  ee as ChannelsSectionRoot,
+  le as ChipTooltipTarget,
+  M as ChipWrap,
+  m as Content,
+  f as ContentCard,
+  J as DraftButtonScope,
+  B as FieldBlock,
+  R as FieldLabelRow,
+  k as Footer,
+  y as FooterActions,
+  w as FooterHint,
+  g as Main,
+  Z as ModalActions,
+  r as ModalBody,
   Q as ModalIcon,
-  L as RadioCard,
+  j as RadioCard,
   z as RadioCardText,
-  h as Rail,
-  y as RailItem,
-  w as RailList,
-  _ as RowActionDivider,
-  U as RowActions,
-  G as RowLabel,
-  J as RowMenuButton,
-  q as RowText,
-  $ as SectionBodyWrap,
-  N as SectionHeaderWrap,
-  E as SelectableRow,
-  M as SideSection,
-  D as SideSectionHeader,
-  W as SourceButton,
-  O as SourceButtonRow,
-  I as Step3Divider,
-  F as Step3Grid,
-  T as Step3Root,
-  v as StepBadge,
-  f as StepScroll,
-  l as TopBar,
-  c as TopBarSide
+  b as Rail,
+  N as RailItem,
+  v as RailList,
+  U as RowActionDivider,
+  K as RowActions,
+  q as RowLabel,
+  X as RowMenuButton,
+  W as RowText,
+  C as SectionBodyWrap,
+  S as SectionHeaderWrap,
+  G as SelectableRow,
+  E as SideSection,
+  O as SideSectionHeader,
+  P as SourceButton,
+  _ as SourceButtonRow,
+  H as Step3Divider,
+  I as Step3Grid,
+  F as Step3Root,
+  $ as StepBadge,
+  u as StepScroll,
+  p as TopBar,
+  x as TopBarSide
 };
 //# sourceMappingURL=AgentBuilder.styled.js.map