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

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 a } from "../../constants/Theme.js";
-const n = s`
+import { COLORS as t, BASE_COLORS as i } from "../../constants/Theme.js";
+const r = s`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -21,14 +21,14 @@ const n = s`
 		opacity: 0.5;
 		background: transparent;
 	}
-`, c = e.div.attrs({ className: "bik-builder-root" })`
+`, d = e.div.attrs({ className: "bik-builder-root" })`
 	display: flex;
 	flex-direction: column;
 	height: 100%;
 	width: 100%;
 	min-height: 0;
 	background: ${t.surface.standard};
-`, p = e.div.attrs({ className: "bik-top-bar" })`
+`, l = e.div.attrs({ className: "bik-top-bar" })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -36,11 +36,11 @@ const n = s`
 	padding: 12px 16px;
 	border-bottom: 1px solid ${t.stroke.primary};
 	flex-shrink: 0;
-`, x = e.div.attrs({ className: "bik-top-bar-side" })`
+`, c = e.div.attrs({ className: "bik-top-bar-side" })`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`, h = e.button.attrs({ className: "bik-back-button" })`
+`, p = e.button.attrs({ className: "bik-back-button" })`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -55,18 +55,18 @@ const n = s`
 	&:hover {
 		background: ${t.surface.subdued};
 	}
-`, g = e.div.attrs({ className: "bik-main" })`
+`, x = e.div.attrs({ className: "bik-main" })`
 	display: flex;
 	flex: 1;
 	min-height: 0;
-`, b = e.div.attrs({ className: "bik-rail" })`
+`, h = 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};
-`, m = e.div.attrs({ className: "bik-content" })`
+`, b = e.div.attrs({ className: "bik-content" })`
 	flex: 1;
 	min-width: 0;
 	min-height: 0;
@@ -75,7 +75,7 @@ const n = s`
 	flex-direction: column;
 	padding: 16px;
 	background: ${t.surface.standard};
-`, f = e.div.attrs({ className: "bik-content-card" })`
+`, g = e.div.attrs({ className: "bik-content-card" })`
 	flex: 1;
 	min-height: 0;
 	display: flex;
@@ -84,11 +84,11 @@ const n = s`
 	border: 1px solid ${t.stroke.primary};
 	border-radius: 8px;
 	box-sizing: border-box;
-`, u = e.div.attrs({ className: "bik-step-scroll" })`
+`, f = e.div.attrs({ className: "bik-step-scroll" })`
 	flex: 1;
 	min-height: 0;
 	overflow-y: auto;
-`, k = e.div.attrs({ className: "bik-footer" })`
+`, m = e.div.attrs({ className: "bik-footer" })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -97,20 +97,20 @@ const n = s`
 	border-top: 1px solid ${t.stroke.primary};
 	flex-shrink: 0;
 	box-shadow: 0px -2px 12px 0px #0000000a;
-`, w = e.div.attrs({ className: "bik-footer-hint" })`
+`, u = e.div.attrs({ className: "bik-footer-hint" })`
 	display: flex;
 	align-items: center;
 	gap: 6px;
-`, y = e.div.attrs({
+`, k = e.div.attrs({
   className: "bik-footer-actions"
 })`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`, v = e.div.attrs({ className: "bik-rail-list" })`
+`, w = e.div.attrs({ className: "bik-rail-list" })`
 	display: flex;
 	flex-direction: column;
-`, N = e.button.attrs({ className: "bik-rail-item" })`
+`, y = e.button.attrs({ className: "bik-rail-item" })`
 	position: relative;
 	display: flex;
 	align-items: flex-start;
@@ -142,7 +142,7 @@ const n = s`
 		border-left: 1px dashed #e0e0e0;
 		pointer-events: none;
 	}
-`, $ = e.div.attrs({ className: "bik-step-badge" })`
+`, v = e.div.attrs({ className: "bik-step-badge" })`
 	width: 20px;
 	height: 20px;
 	flex-shrink: 0;
@@ -154,9 +154,9 @@ const n = s`
 	font-size: 10px;
 	font-weight: 400;
 	line-height: 12px;
-	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({
+	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({
   className: "bik-section-header-wrap"
 })`
 	display: flex;
@@ -164,34 +164,34 @@ const n = s`
 	gap: 4px;
 	padding: 16px;
 	border-bottom: 1px solid ${t.stroke.primary};
-`, C = e.div.attrs({
+`, $ = e.div.attrs({
   className: "bik-section-header-wrap"
 })`
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 	padding: 16px;
-`, B = e.div.attrs({ className: "bik-field-block" })`
+`, S = e.div.attrs({ className: "bik-field-block" })`
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, R = e.div.attrs({
+`, B = e.div.attrs({
   className: "bik-field-label-row"
 })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-`, T = e.div.attrs({
+`, R = e.div.attrs({
   className: "bik-ai-text-area-shell"
 })`
 	display: flex;
 	flex-direction: column;
 	border: 1px solid
-		${(i) => i.focused ? t.stroke.brand : t.stroke.primary};
+		${(a) => a.focused ? t.stroke.brand : t.stroke.primary};
 	border-radius: 4px;
 	padding: 8px 12px;
 	gap: 8px;
-	min-height: ${(i) => i.minHeight ?? "120px"};
+	min-height: ${(a) => a.minHeight ?? "120px"};
 	background: ${t.surface.standard};
 `, A = e.textarea.attrs({
   className: "bik-ai-text-area-input"
@@ -210,35 +210,29 @@ const n = s`
 	&::placeholder {
 		color: ${t.content.placeholder};
 	}
-`, L = e.div.attrs({ className: "bik-card-row" })`
+`, j = e.div.attrs({ className: "bik-card-row" })`
 	display: flex;
 	gap: 12px;
-`, j = e.button.attrs({ className: "bik-radio-card" })`
+`, L = e.button.attrs({ className: "bik-radio-card" })`
 	flex: 1;
 	display: flex;
 	align-items: flex-start;
 	gap: 12px;
 	padding: 16px;
 	border: 1px solid
-		${(i) => i.selected ? a.brand[800] : t.stroke.primary};
-	background: ${(i) => i.selected ? t.background.brandLight : t.surface.standard};
+		${(a) => a.selected ? i.brand[800] : t.stroke.primary};
+	background: ${(a) => a.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;
-`, M = e.div.attrs({ className: "bik-chip-wrap" })`
+`, C = e.div.attrs({ className: "bik-chip-wrap" })`
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -256,13 +250,13 @@ e.button.attrs({
 	background: transparent;
 	cursor: pointer;
 `;
-const F = e.div.attrs({
+const T = e.div.attrs({
   className: "bik-agent-step bik-agent-step--response"
 })`
 	display: flex;
 	flex-direction: column;
 	min-height: 100%;
-`, I = e.div.attrs({ className: "bik-step3-grid" })`
+`, F = 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
@@ -278,11 +272,11 @@ const F = 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. */
-	${(i) => i.$grow && s`
+	${(a) => a.$grow && s`
 			flex: 1;
 			min-height: 0;
 		`}
-`, H = e.div.attrs({
+`, I = e.div.attrs({
   className: "bik-step3-divider"
 })`
 	width: 1px;
@@ -292,29 +286,29 @@ const F = e.div.attrs({
 	@media (max-width: 1100px) {
 		display: none;
 	}
-`, E = e.div.attrs({ className: "bik-side-section" })`
+`, M = e.div.attrs({ className: "bik-side-section" })`
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, O = e.div.attrs({
+`, D = e.div.attrs({
   className: "bik-side-section-header"
 })`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-`, D = e.button.attrs({
+`, H = e.button.attrs({
   className: "bik-add-icon-button"
 })`
-	${n}
+	${r}
 	background: ${t.surface.standard};
 	border: 1px solid ${t.stroke.primary};
-`, _ = e.div.attrs({
+`, O = e.div.attrs({
   className: "bik-source-button-row"
 })`
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
-`, P = e.button.attrs({
+`, W = e.button.attrs({
   className: "bik-source-button"
 })`
 	display: flex;
@@ -330,7 +324,7 @@ const F = e.div.attrs({
 	&:hover {
 		background: ${t.surface.subdued};
 	}
-`, G = e.div.attrs({
+`, E = e.div.attrs({
   className: "bik-selectable-row"
 })`
 	display: flex;
@@ -353,7 +347,7 @@ const F = e.div.attrs({
 	& > svg {
 		flex-shrink: 0;
 	}
-`, W = e.div.attrs({ className: "bik-row-text" })`
+`, q = e.div.attrs({ className: "bik-row-text" })`
 	flex: 1;
 	min-width: 0;
 	overflow: hidden;
@@ -365,7 +359,7 @@ const F = e.div.attrs({
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
-`, q = e.div.attrs({ className: "bik-row-label" })`
+`, G = e.div.attrs({ className: "bik-row-label" })`
 	display: flex;
 	align-items: center;
 	gap: 6px;
@@ -389,35 +383,35 @@ e.button.attrs({
 	padding: 0;
 	cursor: pointer;
 `;
-const K = e.div.attrs({ className: "bik-row-actions" })`
+const U = e.div.attrs({ className: "bik-row-actions" })`
 	display: flex;
 	align-items: center;
 	gap: 4px;
 	flex-shrink: 0;
-`, U = e.span.attrs({
+`, _ = e.span.attrs({
   className: "bik-row-action-divider"
 })`
 	width: 1px;
 	align-self: stretch;
 	margin: 4px 0;
 	background: ${t.stroke.primary};
-`, X = e.button.attrs({
+`, J = e.button.attrs({
   className: "bik-row-menu-button"
 })`
-	${n}
-`, J = e.div.attrs({
+	${r}
+`, K = e.div.attrs({
   className: "bik-draft-button-scope"
 })`
 	display: flex;
 	flex: 1;
 
 	button {
-		border-color: ${a.brand[800]};
+		border-color: ${i.brand[800]};
 	}
 	button .text {
-		color: ${a.brand[800]};
+		color: ${i.brand[800]};
 	}
-`, r = e.div.attrs({ className: "bik-modal-body" })`
+`, P = e.div.attrs({ className: "bik-modal-body" })`
 	padding: 24px;
 	display: flex;
 	flex-direction: column;
@@ -428,17 +422,7 @@ const K = e.div.attrs({ className: "bik-row-actions" })`
 	display: flex;
 	align-items: center;
 	justify-content: center;
-`, 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({
+`, V = e.div.attrs({
   className: "bik-modal-actions"
 })`
 	display: flex;
@@ -462,211 +446,49 @@ 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 {
-  o as AGENT_STATE_MODAL_MIN_HEIGHT,
-  D as AddIconButton,
-  V as AgentStateModalBody,
-  Y as AgentStateModalHero,
+  H as AddIconButton,
   A as AiTextAreaInput,
-  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,
+  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,
   Q as ModalIcon,
-  j as RadioCard,
+  L as RadioCard,
   z as RadioCardText,
-  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
+  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
 };
 //# sourceMappingURL=AgentBuilder.styled.js.map