@mastra/playground-ui 36.1.0-alpha.2 → 37.0.0-alpha.4

package/dist/searchbar-SYpN7NP_.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 './cn-BakJzhuv.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-SYpN7NP_.js.map

package/dist/searchbar-SYpN7NP_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchbar-SYpN7NP_.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-B4BoDRzs.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-BakJzhuv.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-B4BoDRzs.js.map

package/dist/section-B4BoDRzs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-B4BoDRzs.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-BTptkVDr.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+function SectionHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: utils_cn.cn("grid items-center grid-cols-[1fr_auto]", className), children });
+}
+
+function SectionHeading({ headingLevel = "h2", children, className }) {
+  const HeadingTag = headingLevel;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HeadingTag,
+    {
+      className: utils_cn.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__ */ jsxRuntime.jsx("section", { className: utils_cn.cn(`grid gap-4`, className), children });
+}
+function SubSectionRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: utils_cn.cn(`grid gap-2`, className), children });
+}
+
+const Section = Object.assign(SectionRoot, {
+  Header: SectionHeader,
+  Heading: SectionHeading
+});
+
+exports.Section = Section;
+exports.SectionRoot = SectionRoot;
+exports.SubSectionRoot = SubSectionRoot;
+//# sourceMappingURL=section-BTptkVDr.cjs.map

package/dist/section-BTptkVDr.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-BTptkVDr.cjs","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":["cn","jsx"],"mappings":";;;;;AAQO,SAAS,aAAA,CAAc,EAAE,QAAA,EAAU,SAAA,EAAU,EAAuB;AACzE,EAAA,sCAAQ,QAAA,EAAA,EAAO,SAAA,EAAWA,YAAG,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,uBACEC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,WAAA;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,sCAAQ,SAAA,EAAA,EAAQ,SAAA,EAAWA,YAAG,CAAA,UAAA,CAAA,EAAc,SAAS,GAAI,QAAA,EAAS,CAAA;AACpE;AAEO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,SAAA,EAAU,EAAqB;AACxE,EAAA,sCAAQ,SAAA,EAAA,EAAQ,SAAA,EAAWA,YAAG,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-D3Oe5Ph4.js

@@ -0,0 +1,93 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-BakJzhuv.js';
+
+function CardHeading({
+  title,
+  description,
+  tone = "default",
+  id,
+  className,
+  descriptionClassName
+}) {
+  const danger = tone === "danger";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "h3",
+      {
+        id,
+        className: cn(
+          "font-display text-header-md font-normal leading-tight tracking-normal",
+          danger ? "text-accent2" : "text-neutral4",
+          className
+        ),
+        children: title
+      }
+    ),
+    description != null && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: 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__ */ jsxs(
+    "section",
+    {
+      "data-variant": variant,
+      className: cn(
+        "overflow-hidden rounded-2xl border",
+        fillHeight && "flex h-full flex-col",
+        danger ? "border-accent2/25" : "border-border1",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: 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__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(CardHeading, { title, description, tone: danger ? "danger" : "default" }) }),
+              action != null ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-0 px-7 pt-6 pb-7",
+              fillHeight && "flex-1",
+              danger ? "bg-accent2/4" : null,
+              contentClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CardHeading as C, SectionCard as S };
+//# sourceMappingURL=section-card-D3Oe5Ph4.js.map

package/dist/section-card-D3Oe5Ph4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-card-D3Oe5Ph4.js","sources":["../src/ds/components/SectionCard/card-heading.tsx","../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  const danger = tone === 'danger';\n  return (\n    <>\n      <h3\n        id={id}\n        className={cn(\n          'font-display text-header-md font-normal leading-tight tracking-normal',\n          danger ? 'text-accent2' : 'text-neutral4',\n          className,\n        )}\n      >\n        {title}\n      </h3>\n      {description != null && (\n        <p\n          className={cn(\n            'mt-2 max-w-[62ch] font-sans text-[13.5px] leading-ui-xs',\n            danger ? 'text-accent2/70' : 'text-neutral3',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-accent2/25' : 'border-border1',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-7 pt-7 pb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-6',\n          danger ? 'bg-accent2/8' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div\n        className={cn(\n          'min-w-0 px-7 pt-6 pb-7',\n          fillHeight && 'flex-1',\n          danger ? 'bg-accent2/4' : null,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;AAYO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,IAAA,KAAS,QAAA;AACxB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,uEAAA;AAAA,UACA,SAAS,cAAA,GAAiB,eAAA;AAAA,UAC1B;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,eAAe,IAAA,oBACd,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,yDAAA;AAAA,UACA,SAAS,iBAAA,GAAoB,eAAA;AAAA,UAC7B;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;AC7BO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,mBAAA,GAAsB,gBAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,cAAA,GAAiB;AAAA,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAO,GAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,wBAAA;AAAA,cACA,UAAA,IAAc,QAAA;AAAA,cACd,SAAS,cAAA,GAAiB,IAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/section-card-zuraIMIJ.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-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.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.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.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.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.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-zuraIMIJ.cjs.map

package/dist/section-card-zuraIMIJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-card-zuraIMIJ.cjs","sources":["../src/ds/components/SectionCard/card-heading.tsx","../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  const danger = tone === 'danger';\n  return (\n    <>\n      <h3\n        id={id}\n        className={cn(\n          'font-display text-header-md font-normal leading-tight tracking-normal',\n          danger ? 'text-accent2' : 'text-neutral4',\n          className,\n        )}\n      >\n        {title}\n      </h3>\n      {description != null && (\n        <p\n          className={cn(\n            'mt-2 max-w-[62ch] font-sans text-[13.5px] leading-ui-xs',\n            danger ? 'text-accent2/70' : 'text-neutral3',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-accent2/25' : 'border-border1',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-7 pt-7 pb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-6',\n          danger ? 'bg-accent2/8' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div\n        className={cn(\n          'min-w-0 px-7 pt-6 pb-7',\n          fillHeight && 'flex-1',\n          danger ? 'bg-accent2/4' : null,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAYO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,IAAA,KAAS,QAAA;AACxB,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAWC,WAAA;AAAA,UACT,uEAAA;AAAA,UACA,SAAS,cAAA,GAAiB,eAAA;AAAA,UAC1B;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,eAAe,IAAA,oBACdD,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,yDAAA;AAAA,UACA,SAAS,iBAAA,GAAoB,eAAA;AAAA,UAC7B;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;AC7BO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACEH,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAWG,WAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,mBAAA,GAAsB,gBAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAH,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWG,WAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,cAAA,GAAiB;AAAA,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAAA,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAOA,cAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,WAAA;AAAA,cACT,wBAAA;AAAA,cACA,UAAA,IAAc,QAAA;AAAA,cACd,SAAS,cAAA,GAAiB,IAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;;"}

package/dist/sections-BN1lrVnM.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+function Sections({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid gap-12", className), children });
+}
+
+exports.Sections = Sections;
+//# sourceMappingURL=sections-BN1lrVnM.cjs.map

package/dist/sections-BN1lrVnM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections-BN1lrVnM.cjs","sources":["../src/ds/components/Sections/sections.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type SectionsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Sections({ children, className }: SectionsProps) {\n  return <div className={cn('grid gap-12', className)}>{children}</div>;\n}\n"],"names":["cn"],"mappings":";;;;;AAOO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAkB;AAC/D,EAAA,sCAAQ,KAAA,EAAA,EAAI,SAAA,EAAWA,YAAG,aAAA,EAAe,SAAS,GAAI,QAAA,EAAS,CAAA;AACjE;;;;"}

package/dist/sections-Dd3f7qhe.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-BakJzhuv.js';
+
+function Sections({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-12", className), children });
+}
+
+export { Sections as S };
+//# sourceMappingURL=sections-Dd3f7qhe.js.map

package/dist/sections-Dd3f7qhe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections-Dd3f7qhe.js","sources":["../src/ds/components/Sections/sections.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type SectionsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Sections({ children, className }: SectionsProps) {\n  return <div className={cn('grid gap-12', className)}>{children}</div>;\n}\n"],"names":[],"mappings":";;;AAOO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAkB;AAC/D,EAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,aAAA,EAAe,SAAS,GAAI,QAAA,EAAS,CAAA;AACjE;;;;"}

package/dist/select-BSf4VfTX.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { Check, ChevronDown } from 'lucide-react';
+import * as React from 'react';
+import { b as buttonVariants } from './Button-DUxP65eY.js';
+import { b as controlTriggerOpenState } from './control-size-BdDLgGX4.js';
+import { u as usePortalContainer } from './portal-container-BlQ6JKob.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+function isSelectItem(node) {
+  return React.isValidElement(node) && node.type?.displayName === "SelectItem";
+}
+function collectItems(children, acc) {
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (isSelectItem(child)) {
+      acc.push({ value: child.props.value, label: child.props.children });
+      return;
+    }
+    const nested = child.props?.children;
+    if (nested != null) collectItems(nested, acc);
+  });
+}
+function Select({ children, items, onValueChange, ...props }) {
+  const derivedItems = React.useMemo(() => {
+    if (items != null) return items;
+    const acc = [];
+    collectItems(children, acc);
+    return acc.length > 0 ? acc : void 0;
+  }, [items, children]);
+  return /* @__PURE__ */ jsx(
+    Select$1.Root,
+    {
+      items: derivedItems,
+      onValueChange: onValueChange ? (value, eventDetails) => onValueChange(value, eventDetails) : void 0,
+      ...props,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+const SelectGroup = Select$1.Group;
+const SelectValue = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.Value, { ref, className: cn("truncate", className), ...props }));
+SelectValue.displayName = "SelectValue";
+function normalizeSelectTriggerVariant(variant) {
+  return variant === "primary" ? "default" : variant;
+}
+const SelectTrigger = React.forwardRef(
+  ({ className, children, size = "md", variant = "default", ...props }, ref) => {
+    const visualVariant = normalizeSelectTriggerVariant(variant);
+    return /* @__PURE__ */ jsxs(
+      Select$1.Trigger,
+      {
+        ref,
+        "data-slot": "select-trigger",
+        className: cn(
+          buttonVariants({ variant: visualVariant, size }),
+          // Fill the field and push the value left / chevron right (Button's
+          // base centers its content with `justify-center`).
+          "w-full justify-between",
+          // Read as "active" while the menu is open, per variant (see map above).
+          controlTriggerOpenState[visualVariant],
+          "data-[placeholder]:text-neutral3",
+          "[&>span]:truncate",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Select$1.Icon,
+            {
+              render: /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 opacity-60", transitions.colors) }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+const SelectContent = React.forwardRef(
+  ({
+    className,
+    children,
+    position: _position,
+    container,
+    side = "bottom",
+    align = "start",
+    sideOffset = 4,
+    alignItemWithTrigger = false,
+    anchor,
+    positionMethod,
+    alignOffset,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    arrowPadding,
+    disableAnchorTracking,
+    collisionAvoidance,
+    ...props
+  }, ref) => {
+    const resolvedContainer = usePortalContainer(container);
+    const positionerProps = {
+      side,
+      align,
+      sideOffset,
+      alignItemWithTrigger,
+      anchor,
+      positionMethod,
+      alignOffset,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      arrowPadding,
+      disableAnchorTracking,
+      collisionAvoidance
+    };
+    return /* @__PURE__ */ jsx(Select$1.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsx(Select$1.Positioner, { className: "z-50 outline-none", ...positionerProps, children: /* @__PURE__ */ jsx(
+      Select$1.Popup,
+      {
+        ref,
+        className: cn(
+          "relative z-50 min-w-32 min-w-[var(--anchor-width)] max-h-dropdown-max-height max-h-[var(--available-height)] overflow-y-auto overflow-x-hidden rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog origin-[var(--transform-origin)]",
+          "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(Select$1.List, { children })
+      }
+    ) }) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Select$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer select-none items-center gap-2.5 rounded-lg py-1.5 pl-2 pr-8 text-neutral4 text-ui-smd leading-ui-sm",
+      "outline-none focus:outline-none focus-visible:outline-none",
+      transitions.colors,
+      "hover:bg-surface4 hover:text-neutral6",
+      "focus:bg-surface4 focus:text-neutral6",
+      "data-[highlighted]:bg-surface4 data-[highlighted]:text-neutral6",
+      "data-[selected]:text-neutral6",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-neutral6" }) }) }),
+      /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
+
+export { Select as S, SelectContent as a, SelectGroup as b, SelectItem as c, SelectTrigger as d, SelectValue as e };
+//# sourceMappingURL=select-BSf4VfTX.js.map