@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/search-field-block-Cn_Ffn5P.cjs

@@ -0,0 +1,117 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Button = require('./Button-DpIX8JMz.cjs');
+const input = require('./input-DGvJg7no.cjs');
+const tooltip = require('./tooltip-j8gUR1Qk.cjs');
+const fieldBlock = require('./field-block-D9R9O6XE.cjs');
+const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function SearchFieldBlock({
+  name,
+  helpText,
+  errorMsg,
+  required = false,
+  disabled = false,
+  value,
+  label,
+  labelIsHidden = false,
+  layout = "vertical",
+  placeholder = "Search...",
+  onChange,
+  onReset,
+  className,
+  size,
+  variant,
+  isMinimized,
+  onMinimizedChange
+}) {
+  const inputRef = React.useRef(null);
+  const buttonSize = size === "default" ? "lg" : size;
+  React.useEffect(() => {
+    if (isMinimized === false) {
+      inputRef.current?.focus();
+    }
+  }, [isMinimized]);
+  if (isMinimized) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          size: buttonSize || "sm",
+          "aria-label": label || "Search",
+          disabled,
+          onClick: () => onMinimizedChange?.(false),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: label || "Search" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Layout, { layout, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { children: [
+      layout === "vertical" && label && !labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, children: label }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            ref: inputRef,
+            name,
+            disabled,
+            value,
+            placeholder,
+            onChange,
+            size,
+            variant,
+            className: utils.cn(
+              size === "sm" && "pl-8 pr-8",
+              size === "md" && "pl-9 pr-9",
+              (!size || size === "default") && "pl-10 pr-10",
+              size === "lg" && "pl-11 pr-11"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.SearchIcon,
+          {
+            "aria-hidden": "true",
+            className: utils.cn(
+              "text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2",
+              size === "sm" && "w-3.5 h-3.5",
+              size === "md" && "w-4 h-4",
+              (!size || size === "default") && "w-[1.125rem] h-[1.125rem]",
+              size === "lg" && "w-5 h-5"
+            )
+          }
+        ),
+        onReset && (value || isMinimized === false) && /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            variant: "ghost",
+            size: buttonSize || "lg",
+            "aria-label": "Clear search",
+            onClick: () => {
+              if (value) {
+                onReset();
+              }
+              if (isMinimized === false) {
+                onMinimizedChange?.(true);
+              }
+            },
+            className: "absolute top-1/2 right-0 -translate-y-1/2",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+          }
+        )
+      ] }),
+      helpText && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.HelpText, { children: helpText }),
+      errorMsg && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.ErrorMsg, { children: errorMsg })
+    ] })
+  ] });
+}
+
+exports.SearchFieldBlock = SearchFieldBlock;
+//# sourceMappingURL=search-field-block-Cn_Ffn5P.cjs.map

package/dist/search-field-block-Cn_Ffn5P.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field-block-Cn_Ffn5P.cjs","sources":["../src/ds/components/FormFieldBlocks/fields/search-field-block.tsx"],"sourcesContent":["import { SearchIcon, XIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { Button } from '../../Button';\nimport { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../Tooltip';\nimport { FieldBlock } from '../block/field-block';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\nimport { cn } from '@/lib/utils';\n\nexport type SearchFieldBlockProps = {\n  name: string;\n  testId?: string;\n  label?: string;\n  labelIsHidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  value?: string;\n  placeholder?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onReset?: () => void;\n  helpText?: string;\n  error?: boolean;\n  errorMsg?: string;\n  layout?: 'horizontal' | 'vertical';\n  className?: string;\n  size?: InputProps['size'];\n  variant?: InputProps['variant'];\n  isMinimized?: boolean;\n  onMinimizedChange?: (minimized: boolean) => void;\n};\n\nexport function SearchFieldBlock({\n  name,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  value,\n  label,\n  labelIsHidden = false,\n  layout = 'vertical',\n  placeholder = 'Search...',\n  onChange,\n  onReset,\n  className,\n  size,\n  variant,\n  isMinimized,\n  onMinimizedChange,\n}: SearchFieldBlockProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const buttonSize = size === 'default' ? 'lg' : size;\n\n  useEffect(() => {\n    if (isMinimized === false) {\n      inputRef.current?.focus();\n    }\n  }, [isMinimized]);\n\n  if (isMinimized) {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            size={buttonSize || 'sm'}\n            aria-label={label || 'Search'}\n            disabled={disabled}\n            onClick={() => onMinimizedChange?.(false)}\n          >\n            <SearchIcon />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>{label || 'Search'}</TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <FieldBlock.Layout layout={layout} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {layout === 'vertical' && label && !labelIsHidden ? (\n          <FieldBlock.Label name={name} required={required}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <div className=\"relative group\">\n          <Input\n            ref={inputRef}\n            name={name}\n            disabled={disabled}\n            value={value}\n            placeholder={placeholder}\n            onChange={onChange}\n            size={size}\n            variant={variant}\n            className={cn(\n              size === 'sm' && 'pl-8 pr-8',\n              size === 'md' && 'pl-9 pr-9',\n              (!size || size === 'default') && 'pl-10 pr-10',\n              size === 'lg' && 'pl-11 pr-11',\n            )}\n          />\n          <SearchIcon\n            aria-hidden=\"true\"\n            className={cn(\n              'text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2',\n              size === 'sm' && 'w-3.5 h-3.5',\n              size === 'md' && 'w-4 h-4',\n              (!size || size === 'default') && 'w-[1.125rem] h-[1.125rem]',\n              size === 'lg' && 'w-5 h-5',\n            )}\n          />\n          {onReset && (value || isMinimized === false) && (\n            <Button\n              variant=\"ghost\"\n              size={buttonSize || 'lg'}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                if (value) {\n                  onReset();\n                }\n                if (isMinimized === false) {\n                  onMinimizedChange?.(true);\n                }\n              }}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <XIcon />\n            </Button>\n          )}\n        </div>\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":["useRef","useEffect","Tooltip","jsx","TooltipTrigger","Button","SearchIcon","TooltipContent","jsxs","FieldBlock","VisuallyHidden","Input","cn","XIcon"],"mappings":";;;;;;;;;;;;AAgCO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,MAAA,GAAS,UAAA;AAAA,EACT,WAAA,GAAc,WAAA;AAAA,EACd,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,QAAA,GAAWA,aAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,IAAA,KAAS,SAAA,GAAY,IAAA,GAAO,IAAA;AAE/C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAgB,KAAA,EAAO;AACzB,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,IAC1B;AAAA,EACF,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,uCACGC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,sBAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAAD,cAAA;AAAA,QAACE,aAAA;AAAA,QAAA;AAAA,UACC,MAAM,UAAA,IAAc,IAAA;AAAA,UACpB,cAAY,KAAA,IAAS,QAAA;AAAA,UACrB,QAAA;AAAA,UACA,OAAA,EAAS,MAAM,iBAAA,GAAoB,KAAK,CAAA;AAAA,UAExC,yCAACC,sBAAA,EAAA,EAAW;AAAA;AAAA,OACd,EACF,CAAA;AAAA,sBACAH,cAAA,CAACI,sBAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,IAAS,QAAA,EAAS;AAAA,KAAA,EACrC,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEC,eAAA,CAACC,qBAAA,CAAW,MAAA,EAAX,EAAkB,QAAgB,SAAA,EAChC,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,+BACVN,cAAA,CAACM,qBAAA,CAAW,QAAX,EACC,QAAA,kBAAAN,cAAA,CAACM,sBAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAC3B,0CAAgBN,cAAA,CAACO,kCAAA,EAAA,EAAgB,iBAAM,CAAA,GAAoB,KAAA,EAC9D,GACF,CAAA,GACE,IAAA;AAAA,oBACJF,eAAA,CAACC,qBAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,MAAA,KAAW,UAAA,IAAc,KAAA,IAAS,CAAC,aAAA,mBAClCN,cAAA,CAACM,qBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAC3B,QAAA,EAAA,KAAA,EACH,CAAA,GACE,IAAA;AAAA,sBACJD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAAL,cAAA;AAAA,UAACQ,WAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,QAAA;AAAA,YACL,IAAA;AAAA,YACA,QAAA;AAAA,YACA,KAAA;AAAA,YACA,WAAA;AAAA,YACA,QAAA;AAAA,YACA,IAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA,EAAWC,QAAA;AAAA,cACT,SAAS,IAAA,IAAQ,WAAA;AAAA,cACjB,SAAS,IAAA,IAAQ,WAAA;AAAA,cAAA,CAChB,CAAC,IAAA,IAAQ,IAAA,KAAS,SAAA,KAAc,aAAA;AAAA,cACjC,SAAS,IAAA,IAAQ;AAAA;AACnB;AAAA,SACF;AAAA,wBACAT,cAAA;AAAA,UAACG,sBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAWM,QAAA;AAAA,cACT,+FAAA;AAAA,cACA,SAAS,IAAA,IAAQ,aAAA;AAAA,cACjB,SAAS,IAAA,IAAQ,SAAA;AAAA,cAAA,CAChB,CAAC,IAAA,IAAQ,IAAA,KAAS,SAAA,KAAc,2BAAA;AAAA,cACjC,SAAS,IAAA,IAAQ;AAAA;AACnB;AAAA,SACF;AAAA,QACC,OAAA,KAAY,KAAA,IAAS,WAAA,KAAgB,KAAA,CAAA,oBACpCT,cAAA;AAAA,UAACE,aAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,MAAM,UAAA,IAAc,IAAA;AAAA,YACpB,YAAA,EAAW,cAAA;AAAA,YACX,SAAS,MAAM;AACb,cAAA,IAAI,KAAA,EAAO;AACT,gBAAA,OAAA,EAAQ;AAAA,cACV;AACA,cAAA,IAAI,gBAAgB,KAAA,EAAO;AACzB,gBAAA,iBAAA,GAAoB,IAAI,CAAA;AAAA,cAC1B;AAAA,YACF,CAAA;AAAA,YACA,SAAA,EAAU,2CAAA;AAAA,YAEV,yCAACQ,iBAAA,EAAA,EAAM;AAAA;AAAA;AACT,OAAA,EAEJ,CAAA;AAAA,MACC,QAAA,oBAAYV,cAAA,CAACM,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MAC3C,QAAA,oBAAYN,cAAA,CAACM,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EAC9C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/search-field-block-CuyiDT1k.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SearchIcon, XIcon } from 'lucide-react';
+import { useRef, useEffect } from 'react';
+import { B as Button } from './Button-DoOEJwa_.js';
+import { I as Input } from './input-DsX-P_dO.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DehuxlSR.js';
+import { F as FieldBlock } from './field-block-CdCFQi7X.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function SearchFieldBlock({
+  name,
+  helpText,
+  errorMsg,
+  required = false,
+  disabled = false,
+  value,
+  label,
+  labelIsHidden = false,
+  layout = "vertical",
+  placeholder = "Search...",
+  onChange,
+  onReset,
+  className,
+  size,
+  variant,
+  isMinimized,
+  onMinimizedChange
+}) {
+  const inputRef = useRef(null);
+  const buttonSize = size === "default" ? "lg" : size;
+  useEffect(() => {
+    if (isMinimized === false) {
+      inputRef.current?.focus();
+    }
+  }, [isMinimized]);
+  if (isMinimized) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: buttonSize || "sm",
+          "aria-label": label || "Search",
+          disabled,
+          onClick: () => onMinimizedChange?.(false),
+          children: /* @__PURE__ */ jsx(SearchIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: label || "Search" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(FieldBlock.Layout, { layout, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxs(FieldBlock.Column, { children: [
+      layout === "vertical" && label && !labelIsHidden ? /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, children: label }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: inputRef,
+            name,
+            disabled,
+            value,
+            placeholder,
+            onChange,
+            size,
+            variant,
+            className: cn(
+              size === "sm" && "pl-8 pr-8",
+              size === "md" && "pl-9 pr-9",
+              (!size || size === "default") && "pl-10 pr-10",
+              size === "lg" && "pl-11 pr-11"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SearchIcon,
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2",
+              size === "sm" && "w-3.5 h-3.5",
+              size === "md" && "w-4 h-4",
+              (!size || size === "default") && "w-[1.125rem] h-[1.125rem]",
+              size === "lg" && "w-5 h-5"
+            )
+          }
+        ),
+        onReset && (value || isMinimized === false) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: buttonSize || "lg",
+            "aria-label": "Clear search",
+            onClick: () => {
+              if (value) {
+                onReset();
+              }
+              if (isMinimized === false) {
+                onMinimizedChange?.(true);
+              }
+            },
+            className: "absolute top-1/2 right-0 -translate-y-1/2",
+            children: /* @__PURE__ */ jsx(XIcon, {})
+          }
+        )
+      ] }),
+      helpText && /* @__PURE__ */ jsx(FieldBlock.HelpText, { children: helpText }),
+      errorMsg && /* @__PURE__ */ jsx(FieldBlock.ErrorMsg, { children: errorMsg })
+    ] })
+  ] });
+}
+
+export { SearchFieldBlock as S };
+//# sourceMappingURL=search-field-block-CuyiDT1k.js.map

package/dist/search-field-block-CuyiDT1k.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field-block-CuyiDT1k.js","sources":["../src/ds/components/FormFieldBlocks/fields/search-field-block.tsx"],"sourcesContent":["import { SearchIcon, XIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { Button } from '../../Button';\nimport { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../Tooltip';\nimport { FieldBlock } from '../block/field-block';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\nimport { cn } from '@/lib/utils';\n\nexport type SearchFieldBlockProps = {\n  name: string;\n  testId?: string;\n  label?: string;\n  labelIsHidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  value?: string;\n  placeholder?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onReset?: () => void;\n  helpText?: string;\n  error?: boolean;\n  errorMsg?: string;\n  layout?: 'horizontal' | 'vertical';\n  className?: string;\n  size?: InputProps['size'];\n  variant?: InputProps['variant'];\n  isMinimized?: boolean;\n  onMinimizedChange?: (minimized: boolean) => void;\n};\n\nexport function SearchFieldBlock({\n  name,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  value,\n  label,\n  labelIsHidden = false,\n  layout = 'vertical',\n  placeholder = 'Search...',\n  onChange,\n  onReset,\n  className,\n  size,\n  variant,\n  isMinimized,\n  onMinimizedChange,\n}: SearchFieldBlockProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const buttonSize = size === 'default' ? 'lg' : size;\n\n  useEffect(() => {\n    if (isMinimized === false) {\n      inputRef.current?.focus();\n    }\n  }, [isMinimized]);\n\n  if (isMinimized) {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            size={buttonSize || 'sm'}\n            aria-label={label || 'Search'}\n            disabled={disabled}\n            onClick={() => onMinimizedChange?.(false)}\n          >\n            <SearchIcon />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>{label || 'Search'}</TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <FieldBlock.Layout layout={layout} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {layout === 'vertical' && label && !labelIsHidden ? (\n          <FieldBlock.Label name={name} required={required}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <div className=\"relative group\">\n          <Input\n            ref={inputRef}\n            name={name}\n            disabled={disabled}\n            value={value}\n            placeholder={placeholder}\n            onChange={onChange}\n            size={size}\n            variant={variant}\n            className={cn(\n              size === 'sm' && 'pl-8 pr-8',\n              size === 'md' && 'pl-9 pr-9',\n              (!size || size === 'default') && 'pl-10 pr-10',\n              size === 'lg' && 'pl-11 pr-11',\n            )}\n          />\n          <SearchIcon\n            aria-hidden=\"true\"\n            className={cn(\n              'text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2',\n              size === 'sm' && 'w-3.5 h-3.5',\n              size === 'md' && 'w-4 h-4',\n              (!size || size === 'default') && 'w-[1.125rem] h-[1.125rem]',\n              size === 'lg' && 'w-5 h-5',\n            )}\n          />\n          {onReset && (value || isMinimized === false) && (\n            <Button\n              variant=\"ghost\"\n              size={buttonSize || 'lg'}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                if (value) {\n                  onReset();\n                }\n                if (isMinimized === false) {\n                  onMinimizedChange?.(true);\n                }\n              }}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <XIcon />\n            </Button>\n          )}\n        </div>\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/searchbar-8KtQRL0s.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const useDebounce = require('use-debounce');
+const controlSize = require('./control-size-D67C0kPZ.cjs');
+const formElement = require('./form-element-Cy7aV1Ds.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const searchbarFilledSurface = utils.cn(
+  "bg-surface-overlay-soft rounded-full",
+  "hover:bg-surface-overlay-strong",
+  formElement.inputHoverBorderWithin,
+  "outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong",
+  formElement.inputFocusBorderWithin
+);
+const searchbarVariantClasses = {
+  default: searchbarFilledSurface,
+  filled: searchbarFilledSurface,
+  outline: utils.cn(
+    "bg-transparent rounded-full",
+    formElement.inputHoverBorderWithin,
+    "outline-hidden focus-within:outline-hidden",
+    formElement.inputFocusBorderWithin
+  )
+};
+const Searchbar = ({
+  onSearch,
+  label,
+  placeholder,
+  debounceMs = 300,
+  size = "md",
+  variant = "outline",
+  className
+}) => {
+  const id = React.useId();
+  const inputRef = React.useRef(null);
+  const debouncedSearch = useDebounce.useDebouncedCallback((value) => {
+    onSearch(value);
+  }, debounceMs);
+  React.useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const handleKeyDown = (event) => {
+      if (event.key.toLowerCase() === "f" && event.shiftKey && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        input.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  const handleChange = (e) => {
+    debouncedSearch(e.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1",
+        transitions.transitions.all,
+        searchbarVariantClasses[variant],
+        controlSize.controlHeight[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: utils.cn("text-neutral3 h-4 w-4", transitions.transitions.colors) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              type: "text",
+              placeholder,
+              className: utils.cn(
+                "bg-transparent placeholder:text-neutral2 block w-full px-2 outline-hidden",
+                controlSize.controlSizeClasses[size]
+              ),
+              name: id,
+              ref: inputRef,
+              onChange: handleChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const SearchbarWrapper = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2.5 border-b border-border1", children });
+};
+
+exports.Searchbar = Searchbar;
+exports.SearchbarWrapper = SearchbarWrapper;
+//# sourceMappingURL=searchbar-8KtQRL0s.cjs.map

package/dist/searchbar-8KtQRL0s.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchbar-8KtQRL0s.cjs","sources":["../src/ds/components/Searchbar/searchbar.tsx"],"sourcesContent":["import { SearchIcon } from 'lucide-react';\nimport { useEffect, useId, useRef } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { controlHeight, controlSizeClasses } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { inputFocusBorderWithin, inputHoverBorderWithin } from '@/ds/primitives/form-element';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype SearchbarVariant = 'default' | 'filled' | 'outline';\n\nexport type SearchbarProps = {\n  onSearch: (search: string) => void;\n  label: string;\n  placeholder: string;\n  debounceMs?: number;\n  size?: ControlSize;\n  variant?: SearchbarVariant;\n  className?: string;\n};\n\n// `default` and `filled` are the same filled surface on purpose: the default Searchbar\n// look IS the filled treatment, and `filled` is an explicit alias for consumers. Share\n// the class string so the two can't drift.\nconst searchbarFilledSurface = cn(\n  'bg-surface-overlay-soft rounded-full',\n  'hover:bg-surface-overlay-strong',\n  inputHoverBorderWithin,\n  'outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong',\n  inputFocusBorderWithin,\n);\n\nconst searchbarVariantClasses: Record<SearchbarVariant, string> = {\n  default: searchbarFilledSurface,\n  filled: searchbarFilledSurface,\n  outline: cn(\n    'bg-transparent rounded-full',\n    inputHoverBorderWithin,\n    'outline-hidden focus-within:outline-hidden',\n    inputFocusBorderWithin,\n  ),\n};\n\nexport const Searchbar = ({\n  onSearch,\n  label,\n  placeholder,\n  debounceMs = 300,\n  size = 'md',\n  variant = 'outline',\n  className,\n}: SearchbarProps) => {\n  const id = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const debouncedSearch = useDebouncedCallback((value: string) => {\n    onSearch(value);\n  }, debounceMs);\n\n  useEffect(() => {\n    return () => {\n      debouncedSearch.cancel();\n    };\n  }, [debouncedSearch]);\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (!input) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === 'f' && event.shiftKey && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        input.focus();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    debouncedSearch(e.target.value);\n  };\n\n  return (\n    <div\n      className={cn(\n        'border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1',\n        transitions.all,\n        searchbarVariantClasses[variant],\n        controlHeight[size],\n        className,\n      )}\n    >\n      <SearchIcon className={cn('text-neutral3 h-4 w-4', transitions.colors)} />\n\n      <div className=\"flex-1\">\n        <label htmlFor={id} className=\"sr-only\">\n          {label}\n        </label>\n\n        <input\n          id={id}\n          type=\"text\"\n          placeholder={placeholder}\n          className={cn(\n            'bg-transparent placeholder:text-neutral2 block w-full px-2 outline-hidden',\n            controlSizeClasses[size],\n          )}\n          name={id}\n          ref={inputRef}\n          onChange={handleChange}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport const SearchbarWrapper = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"px-3 py-2.5 border-b border-border1\">{children}</div>;\n};\n"],"names":["cn","inputHoverBorderWithin","inputFocusBorderWithin","useId","useRef","useDebouncedCallback","useEffect","jsxs","transitions","controlHeight","jsx","SearchIcon","controlSizeClasses"],"mappings":"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"}

package/dist/searchbar-HmTfVgXd.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SearchIcon } from 'lucide-react';
+import { useId, useRef, useEffect } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { a as controlSizeClasses, c as controlHeight } from './control-size-BdDLgGX4.js';
+import { b as inputFocusBorderWithin, d as inputHoverBorderWithin } from './form-element-DUtZESwq.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const searchbarFilledSurface = cn(
+  "bg-surface-overlay-soft rounded-full",
+  "hover:bg-surface-overlay-strong",
+  inputHoverBorderWithin,
+  "outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong",
+  inputFocusBorderWithin
+);
+const searchbarVariantClasses = {
+  default: searchbarFilledSurface,
+  filled: searchbarFilledSurface,
+  outline: cn(
+    "bg-transparent rounded-full",
+    inputHoverBorderWithin,
+    "outline-hidden focus-within:outline-hidden",
+    inputFocusBorderWithin
+  )
+};
+const Searchbar = ({
+  onSearch,
+  label,
+  placeholder,
+  debounceMs = 300,
+  size = "md",
+  variant = "outline",
+  className
+}) => {
+  const id = useId();
+  const inputRef = useRef(null);
+  const debouncedSearch = useDebouncedCallback((value) => {
+    onSearch(value);
+  }, debounceMs);
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const handleKeyDown = (event) => {
+      if (event.key.toLowerCase() === "f" && event.shiftKey && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        input.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  const handleChange = (e) => {
+    debouncedSearch(e.target.value);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1",
+        transitions.all,
+        searchbarVariantClasses[variant],
+        controlHeight[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: cn("text-neutral3 h-4 w-4", transitions.colors) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              type: "text",
+              placeholder,
+              className: cn(
+                "bg-transparent placeholder:text-neutral2 block w-full px-2 outline-hidden",
+                controlSizeClasses[size]
+              ),
+              name: id,
+              ref: inputRef,
+              onChange: handleChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const SearchbarWrapper = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "px-3 py-2.5 border-b border-border1", children });
+};
+
+export { Searchbar as S, SearchbarWrapper as a };
+//# sourceMappingURL=searchbar-HmTfVgXd.js.map

package/dist/searchbar-HmTfVgXd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchbar-HmTfVgXd.js","sources":["../src/ds/components/Searchbar/searchbar.tsx"],"sourcesContent":["import { SearchIcon } from 'lucide-react';\nimport { useEffect, useId, useRef } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { controlHeight, controlSizeClasses } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { inputFocusBorderWithin, inputHoverBorderWithin } from '@/ds/primitives/form-element';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype SearchbarVariant = 'default' | 'filled' | 'outline';\n\nexport type SearchbarProps = {\n  onSearch: (search: string) => void;\n  label: string;\n  placeholder: string;\n  debounceMs?: number;\n  size?: ControlSize;\n  variant?: SearchbarVariant;\n  className?: string;\n};\n\n// `default` and `filled` are the same filled surface on purpose: the default Searchbar\n// look IS the filled treatment, and `filled` is an explicit alias for consumers. Share\n// the class string so the two can't drift.\nconst searchbarFilledSurface = cn(\n  'bg-surface-overlay-soft rounded-full',\n  'hover:bg-surface-overlay-strong',\n  inputHoverBorderWithin,\n  'outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong',\n  inputFocusBorderWithin,\n);\n\nconst searchbarVariantClasses: Record<SearchbarVariant, string> = {\n  default: searchbarFilledSurface,\n  filled: searchbarFilledSurface,\n  outline: cn(\n    'bg-transparent rounded-full',\n    inputHoverBorderWithin,\n    'outline-hidden focus-within:outline-hidden',\n    inputFocusBorderWithin,\n  ),\n};\n\nexport const Searchbar = ({\n  onSearch,\n  label,\n  placeholder,\n  debounceMs = 300,\n  size = 'md',\n  variant = 'outline',\n  className,\n}: SearchbarProps) => {\n  const id = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const debouncedSearch = useDebouncedCallback((value: string) => {\n    onSearch(value);\n  }, debounceMs);\n\n  useEffect(() => {\n    return () => {\n      debouncedSearch.cancel();\n    };\n  }, [debouncedSearch]);\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (!input) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === 'f' && event.shiftKey && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        input.focus();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    debouncedSearch(e.target.value);\n  };\n\n  return (\n    <div\n      className={cn(\n        'border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1',\n        transitions.all,\n        searchbarVariantClasses[variant],\n        controlHeight[size],\n        className,\n      )}\n    >\n      <SearchIcon className={cn('text-neutral3 h-4 w-4', transitions.colors)} />\n\n      <div className=\"flex-1\">\n        <label htmlFor={id} className=\"sr-only\">\n          {label}\n        </label>\n\n        <input\n          id={id}\n          type=\"text\"\n          placeholder={placeholder}\n          className={cn(\n            'bg-transparent placeholder:text-neutral2 block w-full px-2 outline-hidden',\n            controlSizeClasses[size],\n          )}\n          name={id}\n          ref={inputRef}\n          onChange={handleChange}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport const SearchbarWrapper = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"px-3 py-2.5 border-b border-border1\">{children}</div>;\n};\n"],"names":[],"mappings":"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"}

package/dist/section-BUngbrvn.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function SectionHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("header", { className: cn("grid items-center grid-cols-[1fr_auto]", className), children });
+}
+
+function SectionHeading({ headingLevel = "h2", children, className }) {
+  const HeadingTag = headingLevel;
+  return /* @__PURE__ */ jsx(
+    HeadingTag,
+    {
+      className: cn(
+        "flex items-center gap-2 text-ui-lg font-bold text-neutral4",
+        "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function SectionRoot({ children, className }) {
+  return /* @__PURE__ */ jsx("section", { className: cn(`grid gap-4`, className), children });
+}
+function SubSectionRoot({ children, className }) {
+  return /* @__PURE__ */ jsx("section", { className: cn(`grid gap-2`, className), children });
+}
+
+const Section = Object.assign(SectionRoot, {
+  Header: SectionHeader,
+  Heading: SectionHeading
+});
+
+export { Section as S, SectionRoot as a, SubSectionRoot as b };
+//# sourceMappingURL=section-BUngbrvn.js.map

package/dist/section-BUngbrvn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-BUngbrvn.js","sources":["../src/ds/components/Section/section-header.tsx","../src/ds/components/Section/section-heading.tsx","../src/ds/components/Section/section-root.tsx","../src/ds/components/Section/section.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type SectionHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function SectionHeader({ children, className }: SectionHeaderProps) {\n  return <header className={cn('grid items-center grid-cols-[1fr_auto]', className)}>{children}</header>;\n}\n","import React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type SectionHeadingProps = {\n  headingLevel?: 'h2' | 'h3' | 'h4';\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function SectionHeading({ headingLevel = 'h2', children, className }: SectionHeadingProps) {\n  const HeadingTag = headingLevel;\n\n  return (\n    <HeadingTag\n      className={cn(\n        'flex items-center gap-2 text-ui-lg font-bold text-neutral4',\n        '[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50',\n        className,\n      )}\n    >\n      {children}\n    </HeadingTag>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type SectionRootProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function SectionRoot({ children, className }: SectionRootProps) {\n  return <section className={cn(`grid gap-4`, className)}>{children}</section>;\n}\n\nexport function SubSectionRoot({ children, className }: SectionRootProps) {\n  return <section className={cn(`grid gap-2`, className)}>{children}</section>;\n}\n","import { SectionHeader } from './section-header';\nimport { SectionHeading } from './section-heading';\nimport { SectionRoot } from './section-root';\n\nexport { type SectionRootProps as SectionProps } from './section-root';\n\nexport const Section = Object.assign(SectionRoot, {\n  Header: SectionHeader,\n  Heading: SectionHeading,\n});\n"],"names":[],"mappings":";;;AAQO,SAAS,aAAA,CAAc,EAAE,QAAA,EAAU,SAAA,EAAU,EAAuB;AACzE,EAAA,2BAAQ,QAAA,EAAA,EAAO,SAAA,EAAW,GAAG,wCAAA,EAA0C,SAAS,GAAI,QAAA,EAAS,CAAA;AAC/F;;ACDO,SAAS,eAAe,EAAE,YAAA,GAAe,IAAA,EAAM,QAAA,EAAU,WAAU,EAAwB;AAChG,EAAA,MAAM,UAAA,GAAa,YAAA;AAEnB,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4DAAA;AAAA,QACA,wDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;AChBO,SAAS,WAAA,CAAY,EAAE,QAAA,EAAU,SAAA,EAAU,EAAqB;AACrE,EAAA,2BAAQ,SAAA,EAAA,EAAQ,SAAA,EAAW,GAAG,CAAA,UAAA,CAAA,EAAc,SAAS,GAAI,QAAA,EAAS,CAAA;AACpE;AAEO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,SAAA,EAAU,EAAqB;AACxE,EAAA,2BAAQ,SAAA,EAAA,EAAQ,SAAA,EAAW,GAAG,CAAA,UAAA,CAAA,EAAc,SAAS,GAAI,QAAA,EAAS,CAAA;AACpE;;ACPO,MAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,WAAA,EAAa;AAAA,EAChD,MAAA,EAAQ,aAAA;AAAA,EACR,OAAA,EAAS;AACX,CAAC;;;;"}

package/dist/section-card-23Os1QRs.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function CardHeading({
+  title,
+  description,
+  tone = "default",
+  id,
+  className,
+  descriptionClassName
+}) {
+  const danger = tone === "danger";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h3",
+      {
+        id,
+        className: utils.cn(
+          "font-display text-header-md font-normal leading-tight tracking-normal",
+          danger ? "text-accent2" : "text-neutral4",
+          className
+        ),
+        children: title
+      }
+    ),
+    description != null && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: utils.cn(
+          "mt-2 max-w-[62ch] font-sans text-[13.5px] leading-ui-xs",
+          danger ? "text-accent2/70" : "text-neutral3",
+          descriptionClassName
+        ),
+        children: description
+      }
+    )
+  ] });
+}
+
+function SectionCard({
+  title,
+  description,
+  action,
+  variant = "default",
+  fillHeight = false,
+  className,
+  contentClassName,
+  children
+}) {
+  const danger = variant === "danger";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "data-variant": variant,
+      className: utils.cn(
+        "overflow-hidden rounded-2xl border",
+        fillHeight && "flex h-full flex-col",
+        danger ? "border-accent2/25" : "border-border1",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "flex flex-col gap-3 px-7 pt-7 pb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-6",
+              danger ? "bg-accent2/8" : "bg-surface-overlay-soft"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(CardHeading, { title, description, tone: danger ? "danger" : "default" }) }),
+              action != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "min-w-0 px-7 pt-6 pb-7",
+              fillHeight && "flex-1",
+              danger ? "bg-accent2/4" : null,
+              contentClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.CardHeading = CardHeading;
+exports.SectionCard = SectionCard;
+//# sourceMappingURL=section-card-23Os1QRs.cjs.map