@alepha/devtools 0.14.1 → 0.14.3

package/src/ui/components/DevLayout.tsx

@@ -1,11 +1,4 @@
-import { NestedView } from "@alepha/react";
-import {
-  ActionButton,
-  AdminShell,
-  DarkModeButton,
-  OmnibarButton,
-  ui,
-} from "@alepha/ui";
+import { AdminShell, DarkModeButton, OmnibarButton, ui } from "@alepha/ui";
 import { Flex } from "@mantine/core";
 import {
   IconApi,
@@ -16,7 +9,6 @@ import {
   IconLogs,
   IconMessageCircle,
   IconStack2,
-  IconTools,
   IconTopologyRing,
   IconVariable,
 } from "@tabler/icons-react";
@@ -24,23 +16,16 @@ import {
 export const DevLayout = () => {
   return (
     <AdminShell
-      appShellProps={{
-        withBorder: false,
+      appShellHeaderProps={{
         bg: ui.colors.background,
       }}
       appShellNavbarProps={{
-        bg: ui.colors.transparent,
-      }}
-      appShellHeaderProps={{
-        bg: ui.colors.transparent,
-        style: {
-          backdropFilter: "blur(10px)",
-        },
+        bg: "transparent",
       }}
       sidebarProps={{
-        gap: "xs",
+        gap: 4,
         collapsed: true,
-        menu: [
+        items: [
           {
             label: "Dashboard",
             icon: <IconDashboard />,
@@ -102,19 +87,26 @@ export const DevLayout = () => {
           {
             position: "left",
             element: (
-              <ActionButton
-                intent={"none"}
-                icon={IconTools}
-                href={"/"}
-                active={false}
-              >
-                Devtools
-              </ActionButton>
+              <Flex
+                h={"60px"}
+                w={"78px"}
+                style={{
+                  marginLeft: "-32px",
+                  borderRight: "1px solid var(--mantine-color-default-border)",
+                }}
+              />
             ),
           },
           {
-            position: "center",
-            element: <OmnibarButton />,
+            position: "left",
+            element: (
+              <OmnibarButton
+                actionProps={{
+                  variant: "outline",
+                  bd: "1px solid var(--mantine-color-default-border)",
+                }}
+              />
+            ),
           },
           {
             position: "right",
@@ -122,24 +114,7 @@ export const DevLayout = () => {
           },
         ],
       }}
-    >
-      <Flex
-        className={"overflow-auto"}
-        w={"100%"}
-        flex={1}
-        direction={"column"}
-        bd={`1px solid ${ui.colors.border}`}
-        bg={ui.colors.elevated}
-        ml={-16}
-        mr={-16}
-        mt={-16}
-        style={{
-          borderTopLeftRadius: 16,
-        }}
-      >
-        <NestedView />
-      </Flex>
-    </AdminShell>
+    />
   );
 };
 

package/src/ui/components/DevTopicsViewer.tsx

@@ -1,5 +1,6 @@
 import { useInject } from "@alepha/react";
-import { JsonViewer, ui } from "@alepha/ui";
+import { ui } from "@alepha/ui";
+import { JsonViewer } from "@alepha/ui/json";
 import {
   ActionIcon,
   Badge,
@@ -434,12 +435,7 @@ const MessagesTab = ({ topic }: { topic: DevTopicMetadata }) => {
                     borderRadius: 4,
                   }}
                 >
-                  <JsonViewer
-                    data={msg.payload}
-                    maxDepth={3}
-                    size="xs"
-                    copyable={false}
-                  />
+                  <JsonViewer data={msg.payload} maxDepth={3} size="xs" />
                 </Box>
               </Box>
             ))}

package/src/ui/components/graph/DevDependencyGraph.tsx

@@ -1,10 +1,9 @@
-import { useInject } from "@alepha/react";
-import { ui } from "@alepha/ui";
+import { useAction, useInject } from "@alepha/react";
+import { ui, useDialog } from "@alepha/ui";
 import {
   ActionIcon,
   Alert,
   Badge,
-  Box,
   Flex,
   Group,
   Loader,
@@ -35,7 +34,6 @@ import "@xyflow/react/dist/style.css";
 import { HttpClient } from "alepha/server";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { devMetadataSchema } from "../../../api/schemas/DevMetadata.ts";
-import type { DevProviderMetadata } from "../../../api/schemas/DevProviderMetadata.ts";
 import { getModuleColor } from "./constants.ts";
 import { GraphControls } from "./GraphControls.tsx";
 import {
@@ -58,60 +56,8 @@ const nodeTypes = {
   provider: ProviderNode,
 };
 
-const FlowControls = () => {
-  const { zoomIn, zoomOut, fitView } = useReactFlow();
-  const [isLocked, setIsLocked] = useState(false);
-
-  return (
-    <Stack
-      gap={4}
-      style={{
-        position: "absolute",
-        bottom: 16,
-        left: 16,
-        zIndex: 10,
-        backgroundColor: ui.colors.elevated,
-        border: `1px solid ${ui.colors.border}`,
-        borderRadius: 8,
-        padding: 4,
-      }}
-    >
-      <Tooltip label="Zoom in" position="right">
-        <ActionIcon size="sm" variant="subtle" onClick={() => zoomIn()}>
-          <IconPlus size={14} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label="Zoom out" position="right">
-        <ActionIcon size="sm" variant="subtle" onClick={() => zoomOut()}>
-          <IconMinus size={14} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label="Fit view" position="right">
-        <ActionIcon
-          size="sm"
-          variant="subtle"
-          onClick={() => fitView({ padding: 0.2 })}
-        >
-          <IconFocusCentered size={14} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={isLocked ? "Unlock" : "Lock"} position="right">
-        <ActionIcon
-          size="sm"
-          variant="subtle"
-          onClick={() => setIsLocked(!isLocked)}
-        >
-          {isLocked ? <IconLock size={14} /> : <IconLockOpen size={14} />}
-        </ActionIcon>
-      </Tooltip>
-    </Stack>
-  );
-};
-
 export const DevDependencyGraph = () => {
   const http = useInject(HttpClient);
-  const [providers, setProviders] = useState<DevProviderMetadata[]>([]);
-  const [loading, setLoading] = useState(true);
   const [nodes, setNodes, onNodesChange] = useNodesState<ProviderNodeType>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<ProviderEdge>([]);
   const [selectedNode, setSelectedNode] = useState<{
@@ -126,17 +72,18 @@ export const DevDependencyGraph = () => {
     viewMode: "modules",
   });
 
-  // Fetch data
-  useEffect(() => {
-    http
-      .fetch("/devtools/api/metadata", {
-        schema: { response: devMetadataSchema },
-      })
-      .then((res) => {
-        setProviders(res.data.providers);
-        setLoading(false);
-      });
-  }, []);
+  const { loading, result } = useAction(
+    {
+      runOnInit: true,
+      handler: () =>
+        http.fetch("/devtools/api/metadata", {
+          schema: { response: devMetadataSchema },
+        }),
+    },
+    [],
+  );
+
+  const providers = result?.data.providers || [];
 
   // Get unique modules
   const modules = useMemo(() => {
@@ -246,6 +193,8 @@ export const DevDependencyGraph = () => {
     [nodes, handleNodeClick],
   );
 
+  const dialog = useDialog();
+
   // Export as PNG
   const handleExport = useCallback(() => {
     // Get the react-flow viewport element
@@ -253,7 +202,10 @@ export const DevDependencyGraph = () => {
     if (!viewport) return;
 
     // Use html2canvas or similar - for now just alert
-    alert("Export feature requires html2canvas library. Coming soon!");
+    return dialog.alert({
+      title: "Export",
+      message: "Export feature requires html2canvas library. Coming soon!",
+    });
   }, []);
 
   if (loading) {
@@ -265,9 +217,15 @@ export const DevDependencyGraph = () => {
   }
 
   return (
-    <Flex direction="column" gap="md" w="100%" h="100%">
+    <Flex p="xl" direction="column" gap="md" w="100%" h="100%" flex={1} mih={0}>
       <Group justify="space-between" wrap="nowrap">
         <Group gap="sm">
+          <Flex
+            bdrs={"sm"}
+            h={"20px"}
+            w={"4px"}
+            bg={"var(--mantine-primary-color-filled)"}
+          />
           <IconTopologyRing size={24} opacity={0.7} />
           <Text size="lg" fw={500}>
             Dependency Graph
@@ -309,50 +267,111 @@ export const DevDependencyGraph = () => {
         </Alert>
       )}
 
-      <Box
+      <Flex
+        flex={1}
+        h={"100%"}
         style={{
-          flex: 1,
           borderRadius: 8,
           border: `1px solid ${ui.colors.border}`,
-          overflow: "hidden",
           position: "relative",
         }}
       >
-        <ReactFlowProvider>
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onNodeClick={handleNodeClick as any}
-            onPaneClick={handlePaneClick}
-            nodeTypes={nodeTypes as any}
-            fitView
-            fitViewOptions={{ padding: 0.2 }}
-            minZoom={0.1}
-            maxZoom={2}
-            proOptions={{ hideAttribution: true }}
-          >
-            <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
-            <MiniMap
-              nodeColor={(node) =>
-                getModuleColor((node.data as ProviderNodeData)?.module)
-              }
-              maskColor="rgba(0, 0, 0, 0.5)"
-              style={{ backgroundColor: ui.colors.surface }}
-            />
-            <FlowControls />
-          </ReactFlow>
-        </ReactFlowProvider>
+        <Flex
+          h={"100%"}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        >
+          <ReactFlowProvider>
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onNodeClick={handleNodeClick as any}
+              onPaneClick={handlePaneClick}
+              nodeTypes={nodeTypes as any}
+              fitView
+              fitViewOptions={{ padding: 0.2 }}
+              minZoom={0.1}
+              maxZoom={2}
+              proOptions={{ hideAttribution: true }}
+            >
+              <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
+              <MiniMap
+                nodeColor={(node) =>
+                  getModuleColor((node.data as ProviderNodeData)?.module)
+                }
+                maskColor="rgba(0, 0, 0, 0.5)"
+                style={{ backgroundColor: ui.colors.surface }}
+              />
+              <FlowControls />
+            </ReactFlow>
+          </ReactFlowProvider>
 
-        <NodeDetails
-          node={selectedNode}
-          onClose={() => handlePaneClick()}
-          onNodeClick={handleDetailsNodeClick}
-        />
-      </Box>
+          <NodeDetails
+            node={selectedNode}
+            onClose={() => handlePaneClick()}
+            onNodeClick={handleDetailsNodeClick}
+          />
+        </Flex>
+      </Flex>
     </Flex>
   );
 };
 
 export default DevDependencyGraph;
+
+const FlowControls = () => {
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const [isLocked, setIsLocked] = useState(false);
+
+  return (
+    <Stack
+      gap={4}
+      style={{
+        position: "absolute",
+        bottom: 16,
+        left: 16,
+        zIndex: 10,
+        backgroundColor: ui.colors.elevated,
+        border: `1px solid ${ui.colors.border}`,
+        borderRadius: 8,
+        padding: 4,
+      }}
+    >
+      <Tooltip label="Zoom in" position="right">
+        <ActionIcon size="sm" variant="subtle" onClick={() => zoomIn()}>
+          <IconPlus size={14} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label="Zoom out" position="right">
+        <ActionIcon size="sm" variant="subtle" onClick={() => zoomOut()}>
+          <IconMinus size={14} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label="Fit view" position="right">
+        <ActionIcon
+          size="sm"
+          variant="subtle"
+          onClick={() => fitView({ padding: 0.2 })}
+        >
+          <IconFocusCentered size={14} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={isLocked ? "Unlock" : "Lock"} position="right">
+        <ActionIcon
+          size="sm"
+          variant="subtle"
+          onClick={() => setIsLocked(!isLocked)}
+        >
+          {isLocked ? <IconLock size={14} /> : <IconLockOpen size={14} />}
+        </ActionIcon>
+      </Tooltip>
+    </Stack>
+  );
+};

package/src/ui/components/graph/GraphControls.tsx

@@ -1,3 +1,4 @@
+import { ui } from "@alepha/ui";
 import {
   ActionIcon,
   Badge,
@@ -45,31 +46,36 @@ export const GraphControls = ({
 
   return (
     <Flex gap="sm" wrap="wrap" align="center">
-      <SegmentedControl
-        size="xs"
-        value={filters.viewMode}
-        onChange={(value) =>
-          onFiltersChange({ ...filters, viewMode: value as ViewMode })
-        }
-        data={[
-          {
-            label: (
-              <Tooltip label="Modules">
-                <IconBoxMultiple size={14} />
-              </Tooltip>
-            ),
-            value: "modules",
-          },
-          {
-            label: (
-              <Tooltip label="Services">
-                <IconBox size={14} />
-              </Tooltip>
-            ),
-            value: "providers",
-          },
-        ]}
-      />
+      <Flex>
+        <SegmentedControl
+          size="xs"
+          value={filters.viewMode}
+          onChange={(value) =>
+            onFiltersChange({ ...filters, viewMode: value as ViewMode })
+          }
+          data={[
+            {
+              label: (
+                <Tooltip label="Modules">
+                  <IconBoxMultiple
+                    size={ui.sizes.icon.sm}
+                    style={{ marginTop: 2 }}
+                  />
+                </Tooltip>
+              ),
+              value: "modules",
+            },
+            {
+              label: (
+                <Tooltip label="Services">
+                  <IconBox size={ui.sizes.icon.sm} style={{ marginTop: 2 }} />
+                </Tooltip>
+              ),
+              value: "providers",
+            },
+          ]}
+        />
+      </Flex>
 
       <TextInput
         placeholder={isModuleView ? "Search modules..." : "Search services..."}

package/src/ui/main.ts

@@ -1,4 +1,10 @@
-import { run } from "alepha";
+import { alephaThemeListAtom, midnightTheme } from "@alepha/ui";
+import { Alepha, run } from "alepha";
 import { AppRouter } from "./AppRouter.tsx";
 
-run(AppRouter);
+const alepha = Alepha.create();
+
+alepha.with(AppRouter);
+alepha.set(alephaThemeListAtom, [midnightTheme]);
+
+run(alepha);

package/assets/devtools/chunk.0pKzkQ-k.js

@@ -1 +0,0 @@
-import{w as o}from"./entry.Cjxjbqvs.js";const l=[["path",{d:"M3 21h4l13 -13a1.5 1.5 0 0 0 -4 -4l-13 13v4",key:"svg-0"}],["path",{d:"M14.5 5.5l4 4",key:"svg-1"}],["path",{d:"M12 8l-5 -5l-4 4l5 5",key:"svg-2"}],["path",{d:"M7 8l-1.5 1.5",key:"svg-3"}],["path",{d:"M16 12l5 5l-4 4l-5 -5",key:"svg-4"}],["path",{d:"M16 17l-1.5 1.5",key:"svg-5"}]],e=o("outline","tools","Tools",l);export{e as I};

package/assets/devtools/chunk.B5eTVHku.js

@@ -1 +0,0 @@
-import{f as b,b as x,q as f,s as g,j,B as N,v as R}from"./entry.Cjxjbqvs.js";var a={root:"m_b183c0a2"};const h=g((e,{color:s})=>({root:{"--code-bg":s?R(s,e):void 0}})),r=b((e,s)=>{const o=x("Code",null,e),{classNames:c,className:l,style:n,styles:m,unstyled:d,vars:p,color:B,block:t,variant:i,mod:v,attributes:u,...y}=o,C=f({name:"Code",props:o,classes:a,className:l,style:n,classNames:c,styles:m,unstyled:d,attributes:u,vars:p,varsResolver:h});return j.jsx(N,{component:t?"pre":"code",variant:i,ref:s,mod:[{block:t},v],...C("root"),...y,dir:"ltr"})});r.classes=a;r.displayName="@mantine/core/Code";export{r as C};

package/assets/devtools/chunk.B9h7IAR1.js

@@ -1 +0,0 @@
-import{aD as h,g as d,j as i,I as q,i as w,k as p,b9 as v,f as C,b as P,q as V,aE as E,B}from"./entry.Cjxjbqvs.js";import{a as F}from"./chunk.BiYuhEvJ.js";function f(s){return typeof s=="object"&&s!==null?"base"in s?s.base:void 0:s}function I({spacing:s,verticalSpacing:o,cols:t,selector:m}){const a=w(),l=o===void 0?s:o,c=h({"--sg-spacing-x":d(f(s)),"--sg-spacing-y":d(f(l)),"--sg-cols":f(t)?.toString()}),u=p(a.breakpoints).reduce((e,n)=>(e[n]||(e[n]={}),typeof s=="object"&&s[n]!==void 0&&(e[n]["--sg-spacing-x"]=d(s[n])),typeof l=="object"&&l[n]!==void 0&&(e[n]["--sg-spacing-y"]=d(l[n])),typeof t=="object"&&t[n]!==void 0&&(e[n]["--sg-cols"]=t[n]),e),{}),r=F(p(u),a.breakpoints).filter(e=>p(u[e.value]).length>0).map(e=>({query:`(min-width: ${a.breakpoints[e.value]})`,styles:u[e.value]}));return i.jsx(q,{styles:c,media:r,selector:m})}function x(s){return typeof s=="object"&&s!==null?p(s):[]}function M(s){return s.sort((o,t)=>v(o)-v(t))}function R({spacing:s,verticalSpacing:o,cols:t}){const m=Array.from(new Set([...x(s),...x(o),...x(t)]));return M(m)}function A({spacing:s,verticalSpacing:o,cols:t,selector:m}){const a=o===void 0?s:o,l=h({"--sg-spacing-x":d(f(s)),"--sg-spacing-y":d(f(a)),"--sg-cols":f(t)?.toString()}),c=R({spacing:s,verticalSpacing:o,cols:t}),u=c.reduce((r,e)=>(r[e]||(r[e]={}),typeof s=="object"&&s[e]!==void 0&&(r[e]["--sg-spacing-x"]=d(s[e])),typeof a=="object"&&a[e]!==void 0&&(r[e]["--sg-spacing-y"]=d(a[e])),typeof t=="object"&&t[e]!==void 0&&(r[e]["--sg-cols"]=t[e]),r),{}),y=c.map(r=>({query:`simple-grid (min-width: ${r})`,styles:u[r]}));return i.jsx(q,{styles:l,container:y,selector:m})}var N={container:"m_925c2d2c",root:"m_2415a157"};const D={cols:1,spacing:"md",type:"media"},G=C((s,o)=>{const t=P("SimpleGrid",D,s),{classNames:m,className:a,style:l,styles:c,unstyled:u,vars:y,cols:r,verticalSpacing:e,spacing:n,type:_,attributes:$,...S}=t,j=V({name:"SimpleGrid",classes:N,props:t,className:a,style:l,classNames:m,styles:c,unstyled:u,attributes:$,vars:y}),g=E();return _==="container"?i.jsxs(i.Fragment,{children:[i.jsx(A,{...t,selector:`.${g}`}),i.jsx("div",{...j("container"),children:i.jsx(B,{ref:o,...j("root",{className:g}),...S})})]}):i.jsxs(i.Fragment,{children:[i.jsx(I,{...t,selector:`.${g}`}),i.jsx(B,{ref:o,...j("root",{className:g}),...S})]})});G.classes=N;G.displayName="@mantine/core/SimpleGrid";export{G as S,f as g};

package/assets/devtools/chunk.BChtaeaz.js

@@ -1 +0,0 @@
-import{r as m,f as E,b as A,q as se,s as re,j as i,B as L,v as ee,t as oe,c as Eo,aB as me,b7 as jo,b8 as Ue,ay as ge,bc as Po,$ as fe,a0 as te,aI as He,e as Ce,aw as Ro,U as To,a1 as we,b6 as qe,ai as We,aj as Ze,aG as $o,ac as Vo,d as Mo,av as Bo,a3 as Je,w as ye}from"./entry.Cjxjbqvs.js";import{I as zo,a as Fo,b as Lo}from"./chunk.C8MW3asi.js";import{P as he}from"./chunk.DtstekP0.js";function Go(e){const o=m.useRef(void 0);return m.useEffect(()=>{o.current=e},[e]),o.current}function be(e,o=document){const t=o.querySelector(e);if(t)return t;const s=o.querySelectorAll("*");for(let r=0;r<s.length;r+=1){const a=s[r];if(a.shadowRoot){const n=be(e,a.shadowRoot);if(n)return n}}return null}function U(e,o=document){const t=[],s=o.querySelectorAll(e);t.push(...Array.from(s));const r=o.querySelectorAll("*");for(let a=0;a<r.length;a+=1){const n=r[a];if(n.shadowRoot){const l=U(e,n.shadowRoot);t.push(...l)}}return t}function H(e){if(!e)return document;const o=e.getRootNode();return o instanceof ShadowRoot||o instanceof Document?o:document}function Qe(e){return typeof e=="string"?{value:e,label:e}:"value"in e&&!("label"in e)?{value:e.value,label:e.value,disabled:e.disabled}:typeof e=="number"?{value:e.toString(),label:e.toString()}:"group"in e?{group:e.group,items:e.items.map(o=>Qe(o))}:e}function Ko(e){return e?e.map(o=>Qe(o)):[]}function Xe(e){return e.reduce((o,t)=>"group"in t?{...o,...Xe(t.items)}:(o[t.value]=t,o),{})}var P={dropdown:"m_88b62a41",search:"m_985517d8",options:"m_b2821a6e",option:"m_92253aa5",empty:"m_2530cd1d",header:"m_858f94bd",footer:"m_82b967cb",group:"m_254f3e4f",groupLabel:"m_2bb2e9e5",chevron:"m_2943220b",optionsDropdownOption:"m_390b5f4",optionsDropdownCheckIcon:"m_8ee53fc2",optionsDropdownCheckPlaceholder:"m_a530ee0a"};const Ho={error:null},Uo=re((e,{size:o,color:t})=>({chevron:{"--combobox-chevron-size":oe(o,"combobox-chevron-size"),"--combobox-chevron-color":t?ee(t,e):void 0}})),ke=E((e,o)=>{const t=A("ComboboxChevron",Ho,e),{size:s,error:r,style:a,className:n,classNames:l,styles:c,unstyled:d,vars:p,mod:u,...b}=t,x=se({name:"ComboboxChevron",classes:P,props:t,style:a,className:n,classNames:l,styles:c,unstyled:d,vars:p,varsResolver:Uo,rootSelector:"chevron"});return i.jsx(L,{component:"svg",...b,...x("chevron"),size:s,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",mod:["combobox-chevron",{error:r},u],ref:o,children:i.jsx("path",{d:"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})});ke.classes=P;ke.displayName="@mantine/core/ComboboxChevron";const[qo,M]=Eo("Combobox component was not found in tree"),Ye=m.forwardRef(({size:e,onMouseDown:o,onClick:t,onClear:s,...r},a)=>i.jsx(me.ClearButton,{ref:a,tabIndex:-1,"aria-hidden":!0,...r,onMouseDown:n=>{n.preventDefault(),o?.(n)},onClick:n=>{s(),t?.(n)}}));Ye.displayName="@mantine/core/ComboboxClearButton";const Se=E((e,o)=>{const{classNames:t,styles:s,className:r,style:a,hidden:n,...l}=A("ComboboxDropdown",null,e),c=M();return i.jsx(he.Dropdown,{...l,ref:o,role:"presentation","data-hidden":n||void 0,...c.getStyles("dropdown",{className:r,style:a,classNames:t,styles:s})})});Se.classes=P;Se.displayName="@mantine/core/ComboboxDropdown";const Wo={refProp:"ref"},eo=E((e,o)=>{const{children:t,refProp:s}=A("ComboboxDropdownTarget",Wo,e);if(M(),!jo(t))throw new Error("Combobox.DropdownTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");return i.jsx(he.Target,{ref:o,refProp:s,children:t})});eo.displayName="@mantine/core/ComboboxDropdownTarget";const Oe=E((e,o)=>{const{classNames:t,className:s,style:r,styles:a,vars:n,...l}=A("ComboboxEmpty",null,e),c=M();return i.jsx(L,{ref:o,...c.getStyles("empty",{className:s,classNames:t,styles:a,style:r}),...l})});Oe.classes=P;Oe.displayName="@mantine/core/ComboboxEmpty";function De({onKeyDown:e,withKeyboardNavigation:o,withAriaAttributes:t,withExpandedAttribute:s,targetType:r,autoComplete:a}){const n=M(),[l,c]=m.useState(null),d=u=>{if(e?.(u),!n.readOnly&&o){if(u.nativeEvent.isComposing)return;if(u.nativeEvent.code==="ArrowDown"&&(u.preventDefault(),n.store.dropdownOpened?c(n.store.selectNextOption()):(n.store.openDropdown("keyboard"),c(n.store.selectActiveOption()),n.store.updateSelectedOptionIndex("selected",{scrollIntoView:!0}))),u.nativeEvent.code==="ArrowUp"&&(u.preventDefault(),n.store.dropdownOpened?c(n.store.selectPreviousOption()):(n.store.openDropdown("keyboard"),c(n.store.selectActiveOption()),n.store.updateSelectedOptionIndex("selected",{scrollIntoView:!0}))),u.nativeEvent.code==="Enter"||u.nativeEvent.code==="NumpadEnter"){if(u.nativeEvent.keyCode===229)return;const b=n.store.getSelectedOptionIndex();n.store.dropdownOpened&&b!==-1?(u.preventDefault(),n.store.clickSelectedOption()):r==="button"&&(u.preventDefault(),n.store.openDropdown("keyboard"))}u.key==="Escape"&&n.store.closeDropdown("keyboard"),u.nativeEvent.code==="Space"&&r==="button"&&(u.preventDefault(),n.store.toggleDropdown("keyboard"))}};return{...t?{"aria-haspopup":"listbox","aria-expanded":s?!!(n.store.listId&&n.store.dropdownOpened):void 0,"aria-controls":n.store.dropdownOpened&&n.store.listId?n.store.listId:void 0,"aria-activedescendant":n.store.dropdownOpened&&l||void 0,autoComplete:a,"data-expanded":n.store.dropdownOpened||void 0,"data-mantine-stop-propagation":n.store.dropdownOpened||void 0}:{},onKeyDown:d}}const Zo={refProp:"ref",targetType:"input",withKeyboardNavigation:!0,withAriaAttributes:!0,withExpandedAttribute:!1,autoComplete:"off"},oo=E((e,o)=>{const{children:t,refProp:s,withKeyboardNavigation:r,withAriaAttributes:a,withExpandedAttribute:n,targetType:l,autoComplete:c,...d}=A("ComboboxEventsTarget",Zo,e),p=Ue(t);if(!p)throw new Error("Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");const u=M(),b=De({targetType:l,withAriaAttributes:a,withKeyboardNavigation:r,withExpandedAttribute:n,onKeyDown:p.props.onKeyDown,autoComplete:c});return m.cloneElement(p,{...b,...d,[s]:ge(o,u.store.targetRef,Po(p))})});oo.displayName="@mantine/core/ComboboxEventsTarget";const _e=E((e,o)=>{const{classNames:t,className:s,style:r,styles:a,vars:n,...l}=A("ComboboxFooter",null,e),c=M();return i.jsx(L,{ref:o,...c.getStyles("footer",{className:s,classNames:t,style:r,styles:a}),...l,onMouseDown:d=>{d.preventDefault()}})});_e.classes=P;_e.displayName="@mantine/core/ComboboxFooter";const Ne=E((e,o)=>{const{classNames:t,className:s,style:r,styles:a,vars:n,children:l,label:c,id:d,...p}=A("ComboboxGroup",null,e),u=M(),b=fe(d);return i.jsxs(L,{ref:o,role:"group","aria-labelledby":c?b:void 0,...u.getStyles("group",{className:s,classNames:t,style:r,styles:a}),...p,children:[c&&i.jsx("div",{id:b,...u.getStyles("groupLabel",{classNames:t,styles:a}),children:c}),l]})});Ne.classes=P;Ne.displayName="@mantine/core/ComboboxGroup";const Ie=E((e,o)=>{const{classNames:t,className:s,style:r,styles:a,vars:n,...l}=A("ComboboxHeader",null,e),c=M();return i.jsx(L,{ref:o,...c.getStyles("header",{className:s,classNames:t,style:r,styles:a}),...l,onMouseDown:d=>{d.preventDefault()}})});Ie.classes=P;Ie.displayName="@mantine/core/ComboboxHeader";function to({value:e,valuesDivider:o=",",...t}){return i.jsx("input",{type:"hidden",value:Array.isArray(e)?e.join(o):e||"",...t})}to.displayName="@mantine/core/ComboboxHiddenInput";const Ae=E((e,o)=>{const t=A("ComboboxOption",null,e),{classNames:s,className:r,style:a,styles:n,vars:l,onClick:c,id:d,active:p,onMouseDown:u,onMouseOver:b,disabled:x,selected:k,mod:g,...w}=t,S=M(),D=m.useId(),_=d||D;return i.jsx(L,{...S.getStyles("option",{className:r,classNames:s,styles:n,style:a}),...w,ref:o,id:_,mod:["combobox-option",{"combobox-active":p,"combobox-disabled":x,"combobox-selected":k},g],role:"option",onClick:h=>{x?h.preventDefault():(S.onOptionSubmit?.(t.value,t),c?.(h))},onMouseDown:h=>{h.preventDefault(),u?.(h)},onMouseOver:h=>{S.resetSelectionOnOptionHover&&S.store.resetSelectedOption(),b?.(h)}})});Ae.classes=P;Ae.displayName="@mantine/core/ComboboxOption";const Ee=E((e,o)=>{const t=A("ComboboxOptions",null,e),{classNames:s,className:r,style:a,styles:n,id:l,onMouseDown:c,labelledBy:d,...p}=t,u=M(),b=fe(l);return m.useEffect(()=>{u.store.setListId(b)},[b]),i.jsx(L,{ref:o,...u.getStyles("options",{className:r,style:a,classNames:s,styles:n}),...p,id:b,role:"listbox","aria-labelledby":d,onMouseDown:x=>{x.preventDefault(),c?.(x)}})});Ee.classes=P;Ee.displayName="@mantine/core/ComboboxOptions";const Jo={withAriaAttributes:!0,withKeyboardNavigation:!0},je=E((e,o)=>{const t=A("ComboboxSearch",Jo,e),{classNames:s,styles:r,unstyled:a,vars:n,withAriaAttributes:l,onKeyDown:c,withKeyboardNavigation:d,size:p,...u}=t,b=M(),x=b.getStyles("search"),k=De({targetType:"input",withAriaAttributes:l,withKeyboardNavigation:d,withExpandedAttribute:!1,onKeyDown:c,autoComplete:"off"});return i.jsx(me,{ref:ge(o,b.store.searchRef),classNames:[{input:x.className},s],styles:[{input:x.style},r],size:p||b.size,...k,...u,__staticSelector:"Combobox"})});je.classes=P;je.displayName="@mantine/core/ComboboxSearch";const Qo={refProp:"ref",targetType:"input",withKeyboardNavigation:!0,withAriaAttributes:!0,withExpandedAttribute:!1,autoComplete:"off"},no=E((e,o)=>{const{children:t,refProp:s,withKeyboardNavigation:r,withAriaAttributes:a,withExpandedAttribute:n,targetType:l,autoComplete:c,...d}=A("ComboboxTarget",Qo,e),p=Ue(t);if(!p)throw new Error("Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");const u=M(),b=De({targetType:l,withAriaAttributes:a,withKeyboardNavigation:r,withExpandedAttribute:n,onKeyDown:p.props.onKeyDown,autoComplete:c}),x=m.cloneElement(p,{...b,...d});return i.jsx(he.Target,{ref:ge(o,u.store.targetRef),children:x})});no.displayName="@mantine/core/ComboboxTarget";function Xo(e,o,t){for(let s=e-1;s>=0;s-=1)if(!o[s].hasAttribute("data-combobox-disabled"))return s;if(t){for(let s=o.length-1;s>-1;s-=1)if(!o[s].hasAttribute("data-combobox-disabled"))return s}return e}function Yo(e,o,t){for(let s=e+1;s<o.length;s+=1)if(!o[s].hasAttribute("data-combobox-disabled"))return s;if(t){for(let s=0;s<o.length;s+=1)if(!o[s].hasAttribute("data-combobox-disabled"))return s}return e}function et(e){for(let o=0;o<e.length;o+=1)if(!e[o].hasAttribute("data-combobox-disabled"))return o;return-1}function so({defaultOpened:e,opened:o,onOpenedChange:t,onDropdownClose:s,onDropdownOpen:r,loop:a=!0,scrollBehavior:n="instant"}={}){const[l,c]=te({value:o,defaultValue:e,finalValue:!1,onChange:t}),d=m.useRef(null),p=m.useRef(-1),u=m.useRef(null),b=m.useRef(null),x=m.useRef(-1),k=m.useRef(-1),g=m.useRef(-1),w=m.useCallback((f="unknown")=>{l||(c(!0),r?.(f))},[c,r,l]),S=m.useCallback((f="unknown")=>{l&&(c(!1),s?.(f))},[c,s,l]),D=m.useCallback((f="unknown")=>{l?S(f):w(f)},[S,w,l]),_=m.useCallback(()=>{const f=H(b.current),O=be(`#${d.current} [data-combobox-selected]`,f);O?.removeAttribute("data-combobox-selected"),O?.removeAttribute("aria-selected")},[]),h=m.useCallback(f=>{const O=H(b.current),z=be(`#${d.current}`,O),N=z?U("[data-combobox-option]",z):null;if(!N)return null;const I=f>=N.length?0:f<0?N.length-1:f;return p.current=I,N?.[I]&&!N[I].hasAttribute("data-combobox-disabled")?(_(),N[I].setAttribute("data-combobox-selected","true"),N[I].setAttribute("aria-selected","true"),N[I].scrollIntoView({block:"nearest",behavior:n}),N[I].id):null},[n,_]),C=m.useCallback(()=>{const f=H(b.current),O=be(`#${d.current} [data-combobox-active]`,f);if(O){const N=U(`#${d.current} [data-combobox-option]`,f).findIndex(I=>I===O);return h(N)}return h(0)},[h]),j=m.useCallback(()=>{const f=H(b.current),O=U(`#${d.current} [data-combobox-option]`,f);return h(Yo(p.current,O,a))},[h,a]),R=m.useCallback(()=>{const f=H(b.current),O=U(`#${d.current} [data-combobox-option]`,f);return h(Xo(p.current,O,a))},[h,a]),ce=m.useCallback(()=>{const f=H(b.current),O=U(`#${d.current} [data-combobox-option]`,f);return h(et(O))},[h]),J=m.useCallback((f="selected",O)=>{g.current=window.setTimeout(()=>{const z=H(b.current),N=U(`#${d.current} [data-combobox-option]`,z),I=N.findIndex(Y=>Y.hasAttribute(`data-combobox-${f}`));p.current=I,O?.scrollIntoView&&N[I]?.scrollIntoView({block:"nearest",behavior:n})},0)},[]),le=m.useCallback(()=>{p.current=-1,_()},[_]),q=m.useCallback(()=>{const f=H(b.current);U(`#${d.current} [data-combobox-option]`,f)?.[p.current]?.click()},[]),B=m.useCallback(f=>{d.current=f},[]),Q=m.useCallback(()=>{x.current=window.setTimeout(()=>u.current?.focus(),0)},[]),K=m.useCallback(()=>{k.current=window.setTimeout(()=>b.current?.focus(),0)},[]),X=m.useCallback(()=>p.current,[]);return m.useEffect(()=>()=>{window.clearTimeout(x.current),window.clearTimeout(k.current),window.clearTimeout(g.current)},[]),{dropdownOpened:l,openDropdown:w,closeDropdown:S,toggleDropdown:D,selectedOptionIndex:p.current,getSelectedOptionIndex:X,selectOption:h,selectFirstOption:ce,selectActiveOption:C,selectNextOption:j,selectPreviousOption:R,resetSelectedOption:le,updateSelectedOptionIndex:J,listId:d.current,setListId:B,clickSelectedOption:q,searchRef:u,focusSearchInput:Q,targetRef:b,focusTarget:K}}const ot={keepMounted:!0,withinPortal:!0,resetSelectionOnOptionHover:!1,width:"target",transitionProps:{transition:"fade",duration:0},size:"sm"},tt=re((e,{size:o,dropdownPadding:t})=>({options:{"--combobox-option-fz":He(o),"--combobox-option-padding":oe(o,"combobox-option-padding")},dropdown:{"--combobox-padding":t===void 0?void 0:Ce(t),"--combobox-option-fz":He(o),"--combobox-option-padding":oe(o,"combobox-option-padding")}}));function v(e){const o=A("Combobox",ot,e),{classNames:t,styles:s,unstyled:r,children:a,store:n,vars:l,onOptionSubmit:c,onClose:d,size:p,dropdownPadding:u,resetSelectionOnOptionHover:b,__staticSelector:x,readOnly:k,attributes:g,...w}=o,S=so(),D=n||S,_=se({name:x||"Combobox",classes:P,props:o,classNames:t,styles:s,unstyled:r,attributes:g,vars:l,varsResolver:tt}),h=()=>{d?.(),D.closeDropdown()};return i.jsx(qo,{value:{getStyles:_,store:D,onOptionSubmit:c,size:p,resetSelectionOnOptionHover:b,readOnly:k},children:i.jsx(he,{opened:D.dropdownOpened,preventPositionChangeWhenVisible:!0,...w,onChange:C=>!C&&h(),withRoles:!1,unstyled:r,children:a})})}const nt=e=>e;v.extend=nt;v.classes=P;v.displayName="@mantine/core/Combobox";v.Target=no;v.Dropdown=Se;v.Options=Ee;v.Option=Ae;v.Search=je;v.Empty=Oe;v.Chevron=ke;v.Footer=_e;v.Header=Ie;v.EventsTarget=oo;v.DropdownTarget=eo;v.Group=Ne;v.ClearButton=Ye;v.HiddenInput=to;const ro=m.createContext(null),st=ro.Provider,ao=()=>m.useContext(ro),[rt,at]=Ro();var co={card:"m_26775b0a"};const ct={withBorder:!0},lt=re((e,{radius:o})=>({card:{"--card-radius":we(o)}})),Pe=E((e,o)=>{const t=A("CheckboxCard",ct,e),{classNames:s,className:r,style:a,styles:n,unstyled:l,vars:c,checked:d,mod:p,withBorder:u,value:b,onClick:x,defaultChecked:k,onChange:g,attributes:w,...S}=t,D=se({name:"CheckboxCard",classes:co,props:t,className:r,style:a,classNames:s,styles:n,unstyled:l,attributes:w,vars:c,varsResolver:lt,rootSelector:"card"}),_=ao(),h=typeof d=="boolean"?d:_?_.value.includes(b||""):void 0,[C,j]=te({value:h,defaultValue:k,finalValue:!1,onChange:g});return i.jsx(rt,{value:{checked:C},children:i.jsx(To,{ref:o,mod:[{"with-border":u,checked:C},p],...D("card"),...S,role:"checkbox","aria-checked":C,onClick:R=>{x?.(R),_?.onChange(b||""),j(!C)}})})});Pe.displayName="@mantine/core/CheckboxCard";Pe.classes=co;const Re=E((e,o)=>{const{value:t,defaultValue:s,onChange:r,size:a,wrapperProps:n,children:l,readOnly:c,disabled:d,...p}=A("CheckboxGroup",null,e),[u,b]=te({value:t,defaultValue:s,finalValue:[],onChange:r}),x=k=>{const g=typeof k=="string"?k:k.currentTarget.value;!c&&b(u.includes(g)?u.filter(w=>w!==g):[...u,g])};return i.jsx(st,{value:{value:u,onChange:x,size:a,disabled:d},children:i.jsx(me.Wrapper,{size:a,ref:o,...n,...p,labelElement:"div",__staticSelector:"CheckboxGroup",children:i.jsx(zo,{role:"group",children:l})})})});Re.classes=me.Wrapper.classes;Re.displayName="@mantine/core/CheckboxGroup";function lo({size:e,style:o,...t}){const s=e!==void 0?{width:Ce(e),height:Ce(e),...o}:o;return i.jsx("svg",{viewBox:"0 0 10 7",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:s,"aria-hidden":!0,...t,children:i.jsx("path",{d:"M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})}function io({indeterminate:e,...o}){return e?i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 32 6","aria-hidden":!0,...o,children:i.jsx("rect",{width:"32",height:"6",fill:"currentColor",rx:"3"})}):i.jsx(lo,{...o})}var uo={indicator:"m_5e5256ee",icon:"m_1b1c543a","indicator--outline":"m_76e20374"};const it={icon:io,variant:"filled"},dt=re((e,{radius:o,color:t,size:s,iconColor:r,variant:a,autoContrast:n})=>{const l=qe({color:t||e.primaryColor,theme:e}),c=l.isThemeColor&&l.shade===void 0?`var(--mantine-color-${l.color}-outline)`:l.color;return{indicator:{"--checkbox-size":oe(s,"checkbox-size"),"--checkbox-radius":o===void 0?void 0:we(o),"--checkbox-color":a==="outline"?c:ee(t,e),"--checkbox-icon-color":r?ee(r,e):Ze(n,e)?We({color:t,theme:e,autoContrast:n}):void 0}}}),Te=E((e,o)=>{const t=A("CheckboxIndicator",it,e),{classNames:s,className:r,style:a,styles:n,unstyled:l,vars:c,icon:d,indeterminate:p,radius:u,color:b,iconColor:x,autoContrast:k,checked:g,mod:w,variant:S,disabled:D,attributes:_,...h}=t,C=se({name:"CheckboxIndicator",classes:uo,props:t,className:r,style:a,classNames:s,styles:n,unstyled:l,attributes:_,vars:c,varsResolver:dt,rootSelector:"indicator"}),j=at(),R=typeof g=="boolean"||typeof p=="boolean"?g||p:j?.checked||!1;return i.jsx(L,{ref:o,...C("indicator",{variant:S}),variant:S,mod:[{checked:R,disabled:D},w],...h,children:i.jsx(d,{indeterminate:p,...C("icon")})})});Te.displayName="@mantine/core/CheckboxIndicator";Te.classes=uo;var po={root:"m_bf2d988c",inner:"m_26062bec",input:"m_26063560",icon:"m_bf295423","input--outline":"m_215c4542"};const ut={labelPosition:"right",icon:io,variant:"filled"},pt=re((e,{radius:o,color:t,size:s,iconColor:r,variant:a,autoContrast:n})=>{const l=qe({color:t||e.primaryColor,theme:e}),c=l.isThemeColor&&l.shade===void 0?`var(--mantine-color-${l.color}-outline)`:l.color;return{root:{"--checkbox-size":oe(s,"checkbox-size"),"--checkbox-radius":o===void 0?void 0:we(o),"--checkbox-color":a==="outline"?c:ee(t,e),"--checkbox-icon-color":r?ee(r,e):Ze(n,e)?We({color:t,theme:e,autoContrast:n}):void 0}}}),ae=E((e,o)=>{const t=A("Checkbox",ut,e),{classNames:s,className:r,style:a,styles:n,unstyled:l,vars:c,color:d,label:p,id:u,size:b,radius:x,wrapperProps:k,checked:g,labelPosition:w,description:S,error:D,disabled:_,variant:h,indeterminate:C,icon:j,rootRef:R,iconColor:ce,onChange:J,autoContrast:le,mod:q,attributes:B,...Q}=t,K=ao(),X=b||K?.size,f=se({name:"Checkbox",props:t,classes:po,className:r,style:a,classNames:s,styles:n,unstyled:l,attributes:B,vars:c,varsResolver:pt}),{styleProps:O,rest:z}=$o(Q),N=fe(u),I={checked:K?.value.includes(z.value)??g,onChange:ie=>{K?.onChange(ie),J?.(ie)},disabled:K?.disabled??_},Y=m.useRef(null),F=o||Y;return m.useEffect(()=>{F&&"current"in F&&F.current&&(F.current.indeterminate=C||!1,C?F.current.setAttribute("data-indeterminate","true"):F.current.removeAttribute("data-indeterminate"))},[C,F]),i.jsx(Fo,{...f("root"),__staticSelector:"Checkbox",__stylesApiProps:t,id:N,size:X,labelPosition:w,label:p,description:S,error:D,disabled:I.disabled,classNames:s,styles:n,unstyled:l,"data-checked":I.checked||g||void 0,variant:h,ref:R,mod:q,...O,...k,children:i.jsxs(L,{...f("inner"),mod:{"data-label-position":w},children:[i.jsx(L,{component:"input",id:N,ref:F,mod:{error:!!D},...f("input",{focusable:!0,variant:h}),...z,...I,type:"checkbox"}),i.jsx(j,{indeterminate:C,...f("icon")})]})})});ae.classes={...po,...Lo};ae.displayName="@mantine/core/Checkbox";ae.Group=Re;ae.Indicator=Te;ae.Card=Pe;function ne(e){return"group"in e}function bo({options:e,search:o,limit:t}){const s=o.trim().toLowerCase(),r=[];for(let a=0;a<e.length;a+=1){const n=e[a];if(r.length===t)return r;ne(n)&&r.push({group:n.group,items:bo({options:n.items,search:o,limit:t-r.length})}),ne(n)||n.label.toLowerCase().includes(s)&&r.push(n)}return r}function bt(e){if(e.length===0)return!0;for(const o of e)if(!("group"in o)||o.items.length>0)return!1;return!0}function mo(e,o=new Set){if(Array.isArray(e))for(const t of e)if(ne(t))mo(t.items,o);else{if(typeof t.value>"u")throw new Error("[@mantine/core] Each option must have value property");if(typeof t.value!="string")throw new Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof t.value}`);if(o.has(t.value))throw new Error(`[@mantine/core] Duplicate options are not supported. Option with value "${t.value}" was provided more than once`);o.add(t.value)}}function mt(e,o){return Array.isArray(e)?e.includes(o):e===o}function fo({data:e,withCheckIcon:o,withAlignedLabels:t,value:s,checkIconPosition:r,unstyled:a,renderOption:n}){if(!ne(e)){const c=mt(s,e.value),d=o&&(c?i.jsx(lo,{className:P.optionsDropdownCheckIcon}):t?i.jsx("div",{className:P.optionsDropdownCheckPlaceholder}):null),p=i.jsxs(i.Fragment,{children:[r==="left"&&d,i.jsx("span",{children:e.label}),r==="right"&&d]});return i.jsx(v.Option,{value:e.value,disabled:e.disabled,className:Mo({[P.optionsDropdownOption]:!a}),"data-reverse":r==="right"||void 0,"data-checked":c||void 0,"aria-selected":c,active:c,children:typeof n=="function"?n({option:e,checked:c}):p})}const l=e.items.map(c=>i.jsx(fo,{data:c,value:s,unstyled:a,withCheckIcon:o,withAlignedLabels:t,checkIconPosition:r,renderOption:n},c.value));return i.jsx(v.Group,{label:e.group,children:l})}function ft({data:e,hidden:o,hiddenWhenEmpty:t,filter:s,search:r,limit:a,maxDropdownHeight:n,withScrollArea:l=!0,filterOptions:c=!0,withCheckIcon:d=!1,withAlignedLabels:p=!1,value:u,checkIconPosition:b,nothingFoundMessage:x,unstyled:k,labelId:g,renderOption:w,scrollAreaProps:S,"aria-label":D}){mo(e);const h=typeof r=="string"?(s||bo)({options:e,search:c?r:"",limit:a??1/0}):e,C=bt(h),j=h.map(R=>i.jsx(fo,{data:R,withCheckIcon:d,withAlignedLabels:p,value:u,checkIconPosition:b,unstyled:k,renderOption:w},ne(R)?R.group:R.value));return i.jsx(v.Dropdown,{hidden:o||t&&C,"data-composed":!0,children:i.jsxs(v.Options,{labelledBy:g,"aria-label":D,children:[l?i.jsx(Vo.Autosize,{mah:n??220,type:"scroll",scrollbarSize:"var(--combobox-padding)",offsetScrollbars:"y",...S,children:j}):j,C&&x&&i.jsx(v.Empty,{children:x})]})})}const ht={withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},ho=E((e,o)=>{const t=A("Select",ht,e),{classNames:s,styles:r,unstyled:a,vars:n,dropdownOpened:l,defaultDropdownOpened:c,onDropdownClose:d,onDropdownOpen:p,onFocus:u,onBlur:b,onClick:x,onChange:k,data:g,value:w,defaultValue:S,selectFirstOptionOnChange:D,onOptionSubmit:_,comboboxProps:h,readOnly:C,disabled:j,filter:R,limit:ce,withScrollArea:J,maxDropdownHeight:le,size:q,searchable:B,rightSection:Q,checkIconPosition:K,withCheckIcon:X,withAlignedLabels:f,nothingFoundMessage:O,name:z,form:N,searchValue:I,defaultSearchValue:Y,onSearchChange:F,allowDeselect:ie,error:$e,rightSectionPointerEvents:xo,id:vo,clearable:Co,clearButtonProps:go,hiddenInputProps:wo,renderOption:yo,onClear:ko,autoComplete:So,scrollAreaProps:Oo,__defaultRightSection:gt,__clearSection:wt,__clearable:yt,chevronColor:Do,autoSelectOnBlur:Ve,attributes:Me,...de}=t,xe=m.useMemo(()=>Ko(g),[g]),ue=m.useRef({}),$=m.useMemo(()=>Xe(xe),[xe]),Be=fe(vo),[y,ze,Fe]=te({value:w,defaultValue:S,finalValue:null,onChange:k}),G=typeof y=="string"?y in $?$[y]:ue.current[y]:void 0,Le=Go(G),[pe,_o,No]=te({value:I,defaultValue:Y,finalValue:G?G.label:"",onChange:F}),V=so({opened:l,defaultOpened:c,onDropdownOpen:()=>{p?.(),V.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{d?.(),setTimeout(V.resetSelectedOption,0)}}),W=T=>{_o(T),V.resetSelectedOption()},{resolvedClassNames:Ge,resolvedStyles:Ke}=Bo({props:t,styles:r,classNames:s});m.useEffect(()=>{D&&V.selectFirstOption()},[D,pe]),m.useEffect(()=>{w===null&&W(""),typeof w=="string"&&G&&(Le?.value!==G.value||Le?.label!==G.label)&&W(G.label)},[w,G]),m.useEffect(()=>{!Fe&&!No&&W(typeof y=="string"?y in $?$[y]?.label:ue.current[y]?.label||"":"")},[$,y]),m.useEffect(()=>{y&&y in $&&(ue.current[y]=$[y])},[$,y]);const Io=i.jsx(v.ClearButton,{...go,onClear:()=>{ze(null,null),W(""),ko?.()}}),Ao=Co&&!!y&&!j&&!C;return i.jsxs(i.Fragment,{children:[i.jsxs(v,{store:V,__staticSelector:"Select",classNames:Ge,styles:Ke,unstyled:a,readOnly:C,size:q,attributes:Me,keepMounted:Ve,onOptionSubmit:T=>{_?.(T);const Z=ie&&$[T].value===y?null:$[T],ve=Z?Z.value:null;ve!==y&&ze(ve,Z),!Fe&&W(typeof ve=="string"&&Z?.label||""),V.closeDropdown()},...h,children:[i.jsx(v.Target,{targetType:B?"input":"button",autoComplete:So,children:i.jsx(Je,{id:Be,ref:o,__defaultRightSection:i.jsx(v.Chevron,{size:q,error:$e,unstyled:a,color:Do}),__clearSection:Io,__clearable:Ao,rightSection:Q,rightSectionPointerEvents:xo||"none",...de,size:q,__staticSelector:"Select",disabled:j,readOnly:C||!B,value:pe,onChange:T=>{W(T.currentTarget.value),V.openDropdown(),D&&V.selectFirstOption()},onFocus:T=>{B&&V.openDropdown(),u?.(T)},onBlur:T=>{Ve&&V.clickSelectedOption(),B&&V.closeDropdown();const Z=typeof y=="string"&&(y in $?$[y]:ue.current[y]);W(Z&&Z.label||""),b?.(T)},onClick:T=>{B?V.openDropdown():V.toggleDropdown(),x?.(T)},classNames:Ge,styles:Ke,unstyled:a,pointer:!B,error:$e,attributes:Me})}),i.jsx(ft,{data:xe,hidden:C||j,filter:R,search:pe,limit:ce,hiddenWhenEmpty:!O,withScrollArea:J,maxDropdownHeight:le,filterOptions:!!B&&G?.label!==pe,value:y,checkIconPosition:K,withCheckIcon:X,withAlignedLabels:f,nothingFoundMessage:O,unstyled:a,labelId:de.label?`${Be}-label`:void 0,"aria-label":de.label?void 0:de["aria-label"],renderOption:yo,scrollAreaProps:Oo})]}),i.jsx(v.HiddenInput,{value:y,name:z,form:N,disabled:j,...wo})]})});ho.classes={...Je.classes,...v.classes};ho.displayName="@mantine/core/Select";const xt=[["path",{d:"M12 5l0 14",key:"svg-0"}],["path",{d:"M18 13l-6 6",key:"svg-1"}],["path",{d:"M6 13l6 6",key:"svg-2"}]],Dt=ye("outline","arrow-down","ArrowDown",xt);const vt=[["path",{d:"M12 5l0 14",key:"svg-0"}],["path",{d:"M18 11l-6 -6",key:"svg-1"}],["path",{d:"M6 11l6 -6",key:"svg-2"}]],_t=ye("outline","arrow-up","ArrowUp",vt);const Ct=[["path",{d:"M12 5l0 14",key:"svg-0"}],["path",{d:"M5 12l14 0",key:"svg-1"}]],Nt=ye("outline","plus","Plus",Ct);export{ae as C,Dt as I,ft as O,ho as S,_t as a,Nt as b,Xe as c,v as d,lo as e,Ko as g,ne as i,so as u};