@bikdotai/bik-component-library 0.0.841 → 0.0.842

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

@@ -0,0 +1,74 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { TitleMedium as d, BodyPrimary as c } from "../../TypographyStyle.js";
+import { COLORS as t } from "../../../constants/Theme.js";
+import { ModalBody as s, ModalActions as m } from "../AgentBuilder.styled.js";
+import { StyledModal as u } from "../../modals/styledModal.js";
+import h from "../../../icons/Informational/eCommerce/ShieldCheck.js";
+import { Button as n } from "../../button/Button.js";
+const C = ({ open: o, toolLabel: a, onCancel: r, onConfirm: l }) => o ? /* @__PURE__ */ e(
+  u,
+  {
+    "data-test": "agent-require-verification-modal",
+    open: !0,
+    onClose: r,
+    width: "480px",
+    children: /* @__PURE__ */ i(s, { style: { alignItems: "center", textAlign: "center" }, children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 48,
+            height: 48,
+            borderRadius: "50%",
+            background: t.background.brandVeryLight
+          },
+          children: /* @__PURE__ */ e(h, { size: 24, color: t.content.brand })
+        }
+      ),
+      /* @__PURE__ */ e(d, { color: t.content.primary, children: "This will change who can use this agent" }),
+      /* @__PURE__ */ i(
+        c,
+        {
+          color: t.content.secondary,
+          style: { lineHeight: "24px" },
+          children: [
+            "‘",
+            a,
+            "’ always requires customer authentication. Customers will be asked to verify their identity before this agent responds, once you go live."
+          ]
+        }
+      ),
+      /* @__PURE__ */ i(m, { children: [
+        /* @__PURE__ */ e("div", { style: { display: "flex" }, children: /* @__PURE__ */ e(
+          n,
+          {
+            "data-test": "agent-require-verification-cancel",
+            buttonType: "secondary",
+            size: "medium",
+            matchParentWidth: !0,
+            buttonText: "Cancel",
+            onClick: r
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { style: { display: "flex" }, children: /* @__PURE__ */ e(
+          n,
+          {
+            "data-test": "agent-require-verification-confirm",
+            buttonType: "primary",
+            size: "medium",
+            matchParentWidth: !0,
+            buttonText: "Add tool",
+            onClick: l
+          }
+        ) })
+      ] })
+    ] })
+  }
+) : null;
+export {
+  C as RequireVerificationModal
+};
+//# sourceMappingURL=RequireVerificationModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequireVerificationModal.js","sources":["../../../../../src/components/agent-builder/components/RequireVerificationModal.tsx"],"sourcesContent":["import { ShieldCheck } from '@src/icons';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyPrimary, TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ModalActions, ModalBody } from '../AgentBuilder.styled';\n\ninterface RequireVerificationModalProps {\n\topen: boolean;\n\t/** Name of the tool being added (shown in the copy). */\n\ttoolLabel: string;\n\t/** Dismiss without adding the tool (X / outside click / Cancel). */\n\tonCancel: () => void;\n\t/** Turn on customer verification and add the tool. */\n\tonConfirm: () => void;\n}\n\n/**\n * Shown when the merchant attaches a tool that touches customer-private data\n * (`auth_required`) while customer verification is off. Verification is mandatory\n * for such tools — confirming (\"Add tool\") turns it on and adds the tool;\n * cancelling skips the add. Centred layout per Figma (node 1165-21717).\n */\nexport const RequireVerificationModal: React.FC<\n\tRequireVerificationModalProps\n> = ({ open, toolLabel, onCancel, onConfirm }) => {\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-require-verification-modal\"\n\t\t\topen\n\t\t\tonClose={onCancel}\n\t\t\twidth=\"480px\"\n\t\t>\n\t\t\t<ModalBody style={{ alignItems: 'center', textAlign: 'center' }}>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\twidth: 48,\n\t\t\t\t\t\theight: 48,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tbackground: COLORS.background.brandVeryLight,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ShieldCheck size={24} color={COLORS.content.brand} />\n\t\t\t\t</span>\n\t\t\t\t<TitleMedium color={COLORS.content.primary}>\n\t\t\t\t\tThis will change who can use this agent\n\t\t\t\t</TitleMedium>\n\t\t\t\t<BodyPrimary\n\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\tstyle={{ lineHeight: '24px' }}\n\t\t\t\t>\n\t\t\t\t\t‘{toolLabel}’ always requires customer authentication. Customers will\n\t\t\t\t\tbe asked to verify their identity before this agent responds, once you\n\t\t\t\t\tgo live.\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-require-verification-cancel\"\n\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-require-verification-confirm\"\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\tbuttonText=\"Add tool\"\n\t\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["RequireVerificationModal","open","toolLabel","onCancel","onConfirm","jsx","StyledModal","jsxs","ModalBody","COLORS","ShieldCheck","TitleMedium","BodyPrimary","ModalActions","Button"],"mappings":";;;;;;;AAwBO,MAAMA,IAET,CAAC,EAAE,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,QAC5BH,IAKJ,gBAAAI;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,aAAU;AAAA,IACV,MAAI;AAAA,IACJ,SAASH;AAAA,IACT,OAAM;AAAA,IAEN,UAAA,gBAAAI,EAACC,KAAU,OAAO,EAAE,YAAY,UAAU,WAAW,YACpD,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,cAAc;AAAA,YACd,YAAYI,EAAO,WAAW;AAAA,UAAA;AAAA,UAG/B,4BAACC,GAAA,EAAY,MAAM,IAAI,OAAOD,EAAO,QAAQ,MAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEpDE,GAAA,EAAY,OAAOF,EAAO,QAAQ,SAAS,UAAA,2CAE5C;AAAA,MACA,gBAAAF;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,OAAOH,EAAO,QAAQ;AAAA,UACtB,OAAO,EAAE,YAAY,OAAA;AAAA,UACrB,UAAA;AAAA,YAAA;AAAA,YACEP;AAAA,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,wBAKZW,GAAA,EACA,UAAA;AAAA,QAAA,gBAAAR,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,UACtB,UAAA,gBAAAA;AAAA,UAACS;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,SAASX;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,0BACC,OAAA,EAAI,OAAO,EAAE,SAAS,UACtB,UAAA,gBAAAE;AAAA,UAACS;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,SAASV;AAAA,UAAA;AAAA,QAAA,EACV,CACD;AAAA,MAAA,EAAA,CACD;AAAA,IAAA,EAAA,CACD;AAAA,EAAA;AAAA,IA1DM;"}

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

@@ -8,6 +8,11 @@ export interface SelectableItem {
     label: string;
     /** Leading brand glyph (e.g. a tool's source icon). */
     icon?: SourceIcon;
+    /**
+     * True when the tool touches customer-private data and the agent must verify
+     * the customer first (backend `auth_required`). Shows a shield glyph on the row.
+     */
+    authRequired?: boolean;
     /**
      * When set, this row shows an edit (Configure) icon that calls this instead of
      * the section-level `onConfigure`. Use for rows that open their own drawer

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

@@ -2,63 +2,64 @@ import { jsx as n, jsxs as d, Fragment as U } from "react/jsx-runtime";
 import ie from "../../../assets/icons/delete.svg.js";
 import de from "../../../assets/icons/edit.svg.js";
 import J from "../../../assets/icons/plus.svg.js";
-import { useState as m, useRef as P, useEffect as se } from "react";
-import _ from "styled-components";
-import { TitleSmall as ae, BodyCaption as y, BodySecondary as E } from "../../TypographyStyle.js";
+import { useState as m, useRef as Q, useEffect as se } from "react";
+import I from "styled-components";
+import { TitleSmall as ae, BodyCaption as $, BodySecondary as A } from "../../TypographyStyle.js";
 import { COLORS as i } from "../../../constants/Theme.js";
-import { SideSection as ue, SideSectionHeader as he, AddIconButton as fe, SourceButtonRow as pe, SourceButton as Q, SelectableRow as me, RowText as Se, RowActions as be, RowMenuButton as X, RowActionDivider as ve } from "../AgentBuilder.styled.js";
-import { renderSourceIcon as A, SOURCE_ICONS as we } from "../utils/sourceIcons.js";
-import { MentionPicker as ye } from "./MentionPicker.js";
-import { Dropdown as Y } from "../../dropdown/Dropdown.js";
-import { unwrapDropdownValue as Z } from "../../dropdown/utils.js";
+import { SideSection as ue, SideSectionHeader as he, AddIconButton as fe, SourceButtonRow as pe, SourceButton as X, SelectableRow as me, RowText as Se, RowActions as ye, RowMenuButton as Y, RowActionDivider as be } from "../AgentBuilder.styled.js";
+import { renderSourceIcon as R, SOURCE_ICONS as ve } from "../utils/sourceIcons.js";
+import { MentionPicker as $e } from "./MentionPicker.js";
+import { Dropdown as Z } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as P } from "../../dropdown/utils.js";
 import { Button as ge } from "../../button/Button.js";
-import { DeleteConfirmationModal as $e } from "../../states-modal/DeleteConfirmationModal.js";
-import { Tooltip as I } from "../../tooltips/Tooltip.js";
-const G = "__bik_create_new__", Ke = ({
+import { DeleteConfirmationModal as we } from "../../states-modal/DeleteConfirmationModal.js";
+import { Tooltip as g } from "../../tooltips/Tooltip.js";
+import Ce from "../../../icons/Informational/Common UI/Shield.js";
+const G = "__bik_create_new__", Ve = ({
   title: s,
-  helper: D,
+  helper: _,
   items: u,
   addableOptions: S,
-  onAdd: g,
-  onRemove: R,
-  dataTestPrefix: r,
+  onAdd: w,
+  onRemove: D,
+  dataTestPrefix: t,
   emptyText: O,
-  createOption: t,
+  createOption: l,
   onConfigure: B,
   sourceGroups: h,
   mentionItems: L,
-  actionSources: b,
+  actionSources: y,
   confirmDelete: p,
   pickerOpensUp: z
 }) => {
-  const [f, l] = m(!1), [x, $] = m(null), [H, M] = m(null), [ee, C] = m(null), v = !!h && h.length > 0, k = h?.find((e) => e.source === ee), c = L !== void 0, j = P(null), N = P(null), [w, W] = m(null);
+  const [f, r] = m(!1), [x, C] = m(null), [H, M] = m(null), [ee, k] = m(null), b = !!h && h.length > 0, E = h?.find((e) => e.source === ee), c = L !== void 0, j = Q(null), q = Q(null), [v, N] = m(null);
   se(() => {
     if (!c || !f)
       return;
     const e = (a) => {
-      const q = a.target;
-      !j.current?.contains(q) && !N.current?.contains(q) && l(!1);
+      const V = a.target;
+      !j.current?.contains(V) && !q.current?.contains(V) && r(!1);
     }, o = (a) => {
-      a.key === "Escape" && l(!1);
+      a.key === "Escape" && r(!1);
     };
     return document.addEventListener("mousedown", e), document.addEventListener("keydown", o), () => {
       document.removeEventListener("mousedown", e), document.removeEventListener("keydown", o);
     };
   }, [c, f]);
-  const ne = v ? c || u.length > 0 : c || S.length > 0 || !!t && u.length > 0, oe = u.length === 0 && !!t && !v && !c, F = !!b && b.length > 0, te = (v || F) && u.length === 0, le = () => {
+  const ne = b ? c || u.length > 0 : c || S.length > 0 || !!l && u.length > 0, oe = u.length === 0 && !!l && !b && !c, W = !!y && y.length > 0, te = (b || W) && u.length === 0, le = () => {
     if (c) {
-      W(null), l((e) => !e);
+      N(null), r((e) => !e);
       return;
     }
-    if (v) {
-      C(null), l((e) => !e);
+    if (b) {
+      k(null), r((e) => !e);
       return;
     }
-    if (S.length === 0 && t) {
-      t.onSelect();
+    if (S.length === 0 && l) {
+      l.onSelect();
       return;
     }
-    l((e) => !e);
+    r((e) => !e);
   }, re = (e, o) => {
     if (H)
       return;
@@ -69,17 +70,27 @@ const G = "__bik_create_new__", Ke = ({
     return /* @__PURE__ */ d(
       me,
       {
-        "data-test": `${r}-row-${e.id}`,
+        "data-test": `${t}-row-${e.id}`,
         children: [
-          A(e.icon),
-          /* @__PURE__ */ n(I, { body: e.label, placement: "top", children: /* @__PURE__ */ n(Se, { children: /* @__PURE__ */ n(E, { numberOfLines: 1, color: i.content.primary, children: e.label }) }) }),
-          /* @__PURE__ */ d(be, { children: [
+          R(e.icon),
+          e.authRequired && // Order tools touch customer-private data — the shield flags that
+          // this agent must verify the customer before the tool can run.
+          /* @__PURE__ */ n(g, { body: "Requires customer verification", placement: "top", children: /* @__PURE__ */ n(
+            "span",
+            {
+              "data-test": `${t}-auth-${e.id}`,
+              style: { display: "inline-flex", flexShrink: 0 },
+              children: /* @__PURE__ */ n(Ce, { size: 16 })
+            }
+          ) }),
+          /* @__PURE__ */ n(g, { body: e.label, placement: "top", children: /* @__PURE__ */ n(Se, { children: /* @__PURE__ */ n(A, { numberOfLines: 1, color: i.content.primary, children: e.label }) }) }),
+          /* @__PURE__ */ d(ye, { children: [
             o && // Configurable rows (sub-agents, Rest API / email tools) get an
             // always-visible edit icon.
-            /* @__PURE__ */ n(I, { body: "Edit", placement: "top", children: /* @__PURE__ */ n(
-              X,
+            /* @__PURE__ */ n(g, { body: "Edit", placement: "top", children: /* @__PURE__ */ n(
+              Y,
               {
-                "data-test": `${r}-edit-${e.id}`,
+                "data-test": `${t}-edit-${e.id}`,
                 "aria-label": `Edit ${e.label}`,
                 disabled: H !== null,
                 onClick: () => re(e.id, o),
@@ -93,13 +104,13 @@ const G = "__bik_create_new__", Ke = ({
                 )
               }
             ) }),
-            o && /* @__PURE__ */ n(ve, { "aria-hidden": !0 }),
-            /* @__PURE__ */ n(I, { body: "Delete", placement: "top", children: /* @__PURE__ */ n(
-              X,
+            o && /* @__PURE__ */ n(be, { "aria-hidden": !0 }),
+            /* @__PURE__ */ n(g, { body: "Delete", placement: "top", children: /* @__PURE__ */ n(
+              Y,
               {
-                "data-test": `${r}-delete-${e.id}`,
+                "data-test": `${t}-delete-${e.id}`,
                 "aria-label": `Delete ${e.label}`,
-                onClick: () => p ? $(e.id) : R(e.id),
+                onClick: () => p ? C(e.id) : D(e.id),
                 children: /* @__PURE__ */ n(
                   ie,
                   {
@@ -115,12 +126,12 @@ const G = "__bik_create_new__", Ke = ({
       },
       e.id
     );
-  }), K = t ? [
+  }), F = l ? [
     ...S,
     {
-      label: t.label,
+      label: l.label,
       value: G,
-      searchKey: t.label,
+      searchKey: l.label,
       customComponent: /* @__PURE__ */ n(
         "div",
         {
@@ -132,196 +143,196 @@ const G = "__bik_create_new__", Ke = ({
             fontSize: 14,
             fontWeight: 600
           },
-          children: t.label
+          children: l.label
         }
       )
     }
-  ] : S, V = c ? /* @__PURE__ */ n(
-    ye,
+  ] : S, K = c ? /* @__PURE__ */ n(
+    $e,
     {
       items: L ?? [],
       query: "",
       activeIndex: 0,
-      initialSource: w ?? void 0,
+      initialSource: v ?? void 0,
       onSelect: (e) => {
-        l(!1), g(String(e.id));
+        r(!1), w(String(e.id));
       },
-      onClose: () => l(!1),
-      onCreateSubAgent: t ? () => {
-        l(!1), t.onSelect();
+      onClose: () => r(!1),
+      onCreateSubAgent: l ? () => {
+        r(!1), l.onSelect();
       } : void 0,
-      toolActions: F ? b?.map((e) => ({
+      toolActions: W ? y?.map((e) => ({
         ...e,
         onSelect: () => {
-          l(!1), e.onSelect();
+          r(!1), e.onSelect();
         }
       })) : void 0,
       integrationStatus: Object.fromEntries(
         (h ?? []).filter((e) => e.connected !== void 0).map((e) => [e.source, e.connected])
       ),
       onConnectIntegration: (e) => {
-        l(!1), h?.find((o) => o.source === e)?.onConnect?.();
+        r(!1), h?.find((o) => o.source === e)?.onConnect?.();
       }
     },
-    w ?? "__root__"
+    v ?? "__root__"
   ) : null;
   return /* @__PURE__ */ d(ue, { children: [
     /* @__PURE__ */ d(he, { children: [
       /* @__PURE__ */ n(ae, { color: i.content.primary, children: s }),
-      ne && /* @__PURE__ */ d(Ce, { ref: j, children: [
+      ne && /* @__PURE__ */ d(ke, { ref: j, children: [
         /* @__PURE__ */ n(
           fe,
           {
-            "data-test": `${r}-add`,
+            "data-test": `${t}-add`,
             onClick: le,
             "aria-label": `Add ${s}`,
             children: /* @__PURE__ */ n(J, { width: 16, height: 16, color: i.content.primary })
           }
         ),
-        c && f && w === null && /* @__PURE__ */ n(
+        c && f && v === null && /* @__PURE__ */ n(
           T,
           {
             $up: z,
-            "data-test": `${r}-picker`,
-            children: V
+            "data-test": `${t}-picker`,
+            children: K
           }
         )
       ] })
     ] }),
-    D && /* @__PURE__ */ n(y, { color: i.content.secondary, children: D }),
-    te ? /* @__PURE__ */ d(ke, { ref: c ? N : void 0, children: [
-      /* @__PURE__ */ d(pe, { "data-test": `${r}-sources`, children: [
+    _ && /* @__PURE__ */ n($, { color: i.content.secondary, children: _ }),
+    te ? /* @__PURE__ */ d(Ee, { ref: c ? q : void 0, children: [
+      /* @__PURE__ */ d(pe, { "data-test": `${t}-sources`, children: [
         h?.map((e) => /* @__PURE__ */ d(
-          Q,
+          X,
           {
             type: "button",
-            "data-test": `${r}-source-${e.source}`,
+            "data-test": `${t}-source-${e.source}`,
             onClick: () => {
               if (e.connected === !1) {
                 e.onConnect?.();
                 return;
               }
               if (c) {
-                W(e.source), l(!0);
+                N(e.source), r(!0);
                 return;
               }
-              C(e.source);
+              k(e.source);
             },
             children: [
-              A(we[e.source], -4),
-              /* @__PURE__ */ n(y, { color: i.content.primary, children: e.label }),
+              R(ve[e.source], -4),
+              /* @__PURE__ */ n($, { color: i.content.primary, children: e.label }),
               e.connected === !1 && // Not connected → show "Connect" upfront (consistent with
               // the `@` picker); clicking runs the connect flow.
-              /* @__PURE__ */ n(E, { color: i.content.brand, children: "Connect" })
+              /* @__PURE__ */ n(A, { color: i.content.brand, children: "Connect" })
             ]
           },
           e.source
         )),
-        b?.map((e) => /* @__PURE__ */ d(
-          Q,
+        y?.map((e) => /* @__PURE__ */ d(
+          X,
           {
             type: "button",
-            "data-test": `${r}-action-${e.source}`,
+            "data-test": `${t}-action-${e.source}`,
             onClick: e.connected === !1 ? () => e.onConnect?.() : () => {
-              l(!1), e.onSelect();
+              r(!1), e.onSelect();
             },
             children: [
-              A(e.icon, -4),
-              /* @__PURE__ */ n(y, { color: i.content.primary, children: e.label }),
+              R(e.icon, -4),
+              /* @__PURE__ */ n($, { color: i.content.primary, children: e.label }),
               e.connected === !1 && // Not connected → "Connect" upfront (consistent with the
               // source buttons and the `@` picker).
-              /* @__PURE__ */ n(E, { color: i.content.brand, children: "Connect" })
+              /* @__PURE__ */ n(A, { color: i.content.brand, children: "Connect" })
             ]
           },
           e.source
         ))
       ] }),
-      c && f && w !== null && /* @__PURE__ */ n(
+      c && f && v !== null && /* @__PURE__ */ n(
         T,
         {
           $align: "left",
           $up: z,
-          "data-test": `${r}-picker`,
-          children: V
+          "data-test": `${t}-picker`,
+          children: K
         }
       ),
-      !c && k && /* @__PURE__ */ n(
-        Y,
+      !c && E && /* @__PURE__ */ n(
+        Z,
         {
-          "data-test": `${r}-dropdown`,
+          "data-test": `${t}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
-          placeHolder: `Search ${k.label} tools`,
-          options: k.options,
+          placeHolder: `Search ${E.label} tools`,
+          options: E.options,
           onSelect: (e) => {
-            const o = Z(e);
-            C(null), l(!1), o && g(o);
+            const o = P(e);
+            k(null), r(!1), o && w(o);
           }
         }
       )
     ] }) : /* @__PURE__ */ d(U, { children: [
-      !c && f && K.length > 0 && /* @__PURE__ */ n(
-        Y,
+      !c && f && F.length > 0 && /* @__PURE__ */ n(
+        Z,
         {
-          "data-test": `${r}-dropdown`,
+          "data-test": `${t}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
           placeHolder: `Select ${s.toLowerCase()}`,
-          options: K,
+          options: F,
           onSelect: (e) => {
-            const o = Z(e);
-            l(!1), o && (o === G ? t?.onSelect() : g(o));
+            const o = P(e);
+            r(!1), o && (o === G ? l?.onSelect() : w(o));
           }
         }
       ),
       u.length === 0 && !f ? /* @__PURE__ */ d(U, { children: [
-        /* @__PURE__ */ n(y, { color: i.content.placeholder, children: O }),
-        oe && t && /* @__PURE__ */ n(
+        /* @__PURE__ */ n($, { color: i.content.placeholder, children: O }),
+        oe && l && /* @__PURE__ */ n(
           ge,
           {
-            "data-test": `${r}-create`,
+            "data-test": `${t}-create`,
             buttonType: "secondary",
             size: "small",
             matchParentWidth: !0,
             LeadingIcon: J,
-            buttonText: t.label,
-            onClick: t.onSelect
+            buttonText: l.label,
+            onClick: l.onSelect
           }
         )
       ] }) : ce()
     ] }),
     p && x && /* @__PURE__ */ n(
-      $e,
+      we,
       {
-        "data-test": `${r}-delete-confirm`,
+        "data-test": `${t}-delete-confirm`,
         header: `Delete this ${p.noun}?`,
         subHeader: `Deleting this ${p.noun} will also remove it from your instructions, wherever it's referenced.`,
         confirmationText: "Delete",
         zIndex: p.zIndex,
         onDeleteConfirmed: () => {
-          R(x), $(null);
+          D(x), C(null);
         },
-        onCancelClicked: () => $(null)
+        onCancelClicked: () => C(null)
       }
     )
   ] });
-}, Ce = _.div`
+}, ke = I.div`
 	position: relative;
 	display: flex;
-`, ke = _.div`
+`, Ee = I.div`
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, T = _.div`
+`, T = I.div`
 	position: absolute;
 	${(s) => s.$up ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
 	${(s) => s.$align === "left" ? "left: 0;" : "right: 0;"}
 	z-index: 30;
 `;
 export {
-  Ke as SelectableListSection
+  Ve as SelectableListSection
 };
 //# sourceMappingURL=SelectableListSection.js.map