@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/metrics-kpi-card-D-ct3JAY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-D-ct3JAY.js","sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardChange({\n  changePct,\n  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n\n  return (\n    <div className={cn('flex flex-wrap items-center gap-1 text-ui-md text-neutral1', className)}>\n      <div className=\"flex items-center gap-1\">\n        <span className={cn('[&>svg]:size-4', isGood ? 'text-green-600' : 'text-red-600')}>\n          {changePct >= 0 ? <TrendingUpIcon /> : <TrendingDownIcon />}\n        </span>\n        <span\n          className={cn(isGood ? 'text-green-600' : 'text-red-600')}\n        >{`${changePct >= 0 ? '+' : '-'}${Math.abs(changePct).toFixed(1)}%`}</span>\n      </div>\n      {prevValue && (\n        <div>\n          vs previous <b className=\"text-neutral2 font-semibold\">{prevValue}</b>\n        </div>\n      )}\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-ui-sm text-accent2', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return <span className={cn('text-ui-md text-neutral3', className)}>{children}</span>;\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <span className={cn('text-ui-md', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-neutral1\" />\n    </span>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-ui-md text-neutral1', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return <span className={cn('text-ui-md text-neutral1', className)}>{message}</span>;\n}\n","import type { ReactNode } from 'react';\nimport { DashboardCard } from '@/ds/components/DashboardCard';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <DashboardCard className={cn('min-w-72 flex-1', className)}>\n      <div className=\"grid gap-1\">{children}</div>\n    </DashboardCard>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return <strong className={cn('text-header-lg font-semibold text-neutral4', className)}>{children}</strong>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Label: MetricsKpiCardLabel,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":[],"mappings":"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"}

package/dist/new/layout/app-shell.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../../cn-DnbTIGXa.cjs');
+const utils_cn = require('../../cn-BuHW7Wrt.cjs');
 
 function AppShell({
   children,
@@ -25,17 +25,7 @@ function AppShell({
       ),
       children: [
         routeHeader,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-slot": "app-shell-main",
-            "aria-label": mainLabel,
-            role: "group",
-            tabIndex: 0,
-            className: "min-h-0 overflow-y-auto",
-            children
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "app-shell-main", "aria-label": mainLabel, role: "group", className: "min-h-0 overflow-y-auto", children })
       ]
     }
   );

package/dist/new/layout/app-shell.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div\n        data-slot=\"app-shell-main\"\n        aria-label={mainLabel}\n        role=\"group\"\n        tabIndex={0}\n        className=\"min-h-0 overflow-y-auto\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;;;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACDC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,gBAAA;AAAA,YACV,YAAA,EAAY,SAAA;AAAA,YACZ,IAAA,EAAK,OAAA;AAAA,YACL,QAAA,EAAU,CAAA;AAAA,YACV,SAAA,EAAU,yBAAA;AAAA,YAET;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACEF,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAWC,WAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,kCAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div data-slot=\"app-shell-main\" aria-label={mainLabel} role=\"group\" className=\"min-h-0 overflow-y-auto\">\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;;;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACDC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,YAAA,EAAY,WAAW,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,yBAAA,EAC3E,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACEF,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAWC,WAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,kCAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}

package/dist/new/layout/app-shell.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { c as cn } from '../../cn-ByEbywDh.js';
+import { c as cn } from '../../cn-C6s2yXwM.js';
 
 function AppShell({
   children,
@@ -21,17 +21,7 @@ function AppShell({
       ),
       children: [
         routeHeader,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "app-shell-main",
-            "aria-label": mainLabel,
-            role: "group",
-            tabIndex: 0,
-            className: "min-h-0 overflow-y-auto",
-            children
-          }
-        )
+        /* @__PURE__ */ jsx("div", { "data-slot": "app-shell-main", "aria-label": mainLabel, role: "group", className: "min-h-0 overflow-y-auto", children })
       ]
     }
   );

package/dist/new/layout/app-shell.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div\n        data-slot=\"app-shell-main\"\n        aria-label={mainLabel}\n        role=\"group\"\n        tabIndex={0}\n        className=\"min-h-0 overflow-y-auto\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,gBAAA;AAAA,YACV,YAAA,EAAY,SAAA;AAAA,YACZ,IAAA,EAAK,OAAA;AAAA,YACL,QAAA,EAAU,CAAA;AAAA,YACV,SAAA,EAAU,yBAAA;AAAA,YAET;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,uBAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div data-slot=\"app-shell-main\" aria-label={mainLabel} role=\"group\" className=\"min-h-0 overflow-y-auto\">\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACD,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,YAAA,EAAY,WAAW,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,yBAAA,EAC3E,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,uBAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}

package/dist/new/layout/page-header.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pageHeader = require('../../page-header-CTdBcOWK.cjs');
+const pageHeader = require('../../page-header-DyAd0Uof.cjs');
 
 
 

package/dist/new/layout/page-header.es.js

@@ -1,2 +1,2 @@
-export { P as PageHeader } from '../../page-header-CGRV1f_f.js';
+export { P as PageHeader } from '../../page-header-DymTqQgq.js';
 //# sourceMappingURL=page-header.es.js.map

package/dist/new/layout/page-shell.cjs.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const pageHeader = require('../../page-header-DyAd0Uof.cjs');
+const pageLayout = require('../../page-layout-DXFMbJi3.cjs');
+
+function PageShell({
+  title,
+  children,
+  icon,
+  description,
+  meta,
+  action,
+  isLoading,
+  width = "wide",
+  height = "full",
+  className = "px-6"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(pageLayout.PageLayout, { width, height, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(pageLayout.PageLayout.TopArea, { children: /* @__PURE__ */ jsxRuntime.jsxs(pageHeader.PageHeader, { children: [
+      icon != null && !isLoading ? /* @__PURE__ */ jsxRuntime.jsx(pageHeader.PageHeader.Icon, { children: icon }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(pageHeader.PageHeader.Title, { isLoading, children: title }),
+      description != null ? /* @__PURE__ */ jsxRuntime.jsx(pageHeader.PageHeader.Description, { isLoading, children: description }) : null,
+      meta != null ? /* @__PURE__ */ jsxRuntime.jsx(pageHeader.PageHeader.Meta, { beside: true, children: meta }) : null,
+      action != null ? /* @__PURE__ */ jsxRuntime.jsx(pageHeader.PageHeader.Action, { children: action }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(pageLayout.PageLayout.MainArea, { children })
+  ] });
+}
+
+exports.PageShell = PageShell;
+//# sourceMappingURL=page-shell.cjs.js.map

package/dist/new/layout/page-shell.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell.cjs.js","sources":["../../../src/ds/new/layout/page-shell/page-shell.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { PageHeader } from '../page-header';\nimport { PageLayout } from '@/ds/components/PageLayout';\n\nexport interface PageShellProps {\n  title: ReactNode;\n  children: ReactNode;\n  icon?: ReactNode;\n  description?: ReactNode;\n  meta?: ReactNode;\n  action?: ReactNode;\n  isLoading?: boolean;\n  width?: 'default' | 'narrow' | 'wide';\n  height?: 'default' | 'full';\n  className?: string;\n}\n\n/**\n * Standard page wrapper: composes {@link PageLayout} and {@link PageHeader} so\n * every page places its title, icon, description, meta, and action identically.\n *\n * Use for full-bleed application pages that own the whole content area. For\n * narrow settings pages, use `ds/components/SettingsLayout`.\n *\n * `isLoading` affects the header only, blanking the title and description and\n * hiding the icon. Callers render their own loading body.\n */\nexport function PageShell({\n  title,\n  children,\n  icon,\n  description,\n  meta,\n  action,\n  isLoading,\n  width = 'wide',\n  height = 'full',\n  className = 'px-6',\n}: PageShellProps) {\n  return (\n    <PageLayout width={width} height={height} className={className}>\n      <PageLayout.TopArea>\n        <PageHeader>\n          {icon != null && !isLoading ? <PageHeader.Icon>{icon}</PageHeader.Icon> : null}\n          <PageHeader.Title isLoading={isLoading}>{title}</PageHeader.Title>\n          {description != null ? (\n            <PageHeader.Description isLoading={isLoading}>{description}</PageHeader.Description>\n          ) : null}\n          {meta != null ? <PageHeader.Meta beside>{meta}</PageHeader.Meta> : null}\n          {action != null ? <PageHeader.Action>{action}</PageHeader.Action> : null}\n        </PageHeader>\n      </PageLayout.TopArea>\n      <PageLayout.MainArea>{children}</PageLayout.MainArea>\n    </PageLayout>\n  );\n}\n"],"names":["jsxs","PageLayout","jsx","PageHeader"],"mappings":";;;;;;;;AA4BO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,MAAA,GAAS,MAAA;AAAA,EACT,SAAA,GAAY;AACd,CAAA,EAAmB;AACjB,EAAA,uBACEA,eAAA,CAACC,qBAAA,EAAA,EAAW,KAAA,EAAc,MAAA,EAAgB,SAAA,EACxC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACD,qBAAA,CAAW,OAAA,EAAX,EACC,QAAA,kBAAAD,eAAA,CAACG,qBAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,IAAA,IAAQ,IAAA,IAAQ,CAAC,SAAA,mBAAYD,cAAA,CAACC,sBAAW,IAAA,EAAX,EAAiB,gBAAK,CAAA,GAAqB,IAAA;AAAA,sBAC1ED,cAAA,CAACC,qBAAA,CAAW,KAAA,EAAX,EAAiB,WAAuB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC9C,WAAA,IAAe,uBACdD,cAAA,CAACC,qBAAA,CAAW,aAAX,EAAuB,SAAA,EAAuB,uBAAY,CAAA,GACzD,IAAA;AAAA,MACH,IAAA,IAAQ,uBAAOD,cAAA,CAACC,qBAAA,CAAW,MAAX,EAAgB,MAAA,EAAM,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,GAAqB,IAAA;AAAA,MAClE,UAAU,IAAA,mBAAOD,cAAA,CAACC,sBAAW,MAAA,EAAX,EAAmB,kBAAO,CAAA,GAAuB;AAAA,KAAA,EACtE,CAAA,EACF,CAAA;AAAA,oBACAD,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAS;AAAA,GAAA,EACjC,CAAA;AAEJ;;;;"}

package/dist/new/layout/page-shell.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/ds/new/layout/page-shell/index'
+export {}

package/dist/new/layout/page-shell.es.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { P as PageHeader } from '../../page-header-DymTqQgq.js';
+import { P as PageLayout } from '../../page-layout-B_JUSRkD.js';
+
+function PageShell({
+  title,
+  children,
+  icon,
+  description,
+  meta,
+  action,
+  isLoading,
+  width = "wide",
+  height = "full",
+  className = "px-6"
+}) {
+  return /* @__PURE__ */ jsxs(PageLayout, { width, height, className, children: [
+    /* @__PURE__ */ jsx(PageLayout.TopArea, { children: /* @__PURE__ */ jsxs(PageHeader, { children: [
+      icon != null && !isLoading ? /* @__PURE__ */ jsx(PageHeader.Icon, { children: icon }) : null,
+      /* @__PURE__ */ jsx(PageHeader.Title, { isLoading, children: title }),
+      description != null ? /* @__PURE__ */ jsx(PageHeader.Description, { isLoading, children: description }) : null,
+      meta != null ? /* @__PURE__ */ jsx(PageHeader.Meta, { beside: true, children: meta }) : null,
+      action != null ? /* @__PURE__ */ jsx(PageHeader.Action, { children: action }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(PageLayout.MainArea, { children })
+  ] });
+}
+
+export { PageShell };
+//# sourceMappingURL=page-shell.es.js.map

package/dist/new/layout/page-shell.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell.es.js","sources":["../../../src/ds/new/layout/page-shell/page-shell.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { PageHeader } from '../page-header';\nimport { PageLayout } from '@/ds/components/PageLayout';\n\nexport interface PageShellProps {\n  title: ReactNode;\n  children: ReactNode;\n  icon?: ReactNode;\n  description?: ReactNode;\n  meta?: ReactNode;\n  action?: ReactNode;\n  isLoading?: boolean;\n  width?: 'default' | 'narrow' | 'wide';\n  height?: 'default' | 'full';\n  className?: string;\n}\n\n/**\n * Standard page wrapper: composes {@link PageLayout} and {@link PageHeader} so\n * every page places its title, icon, description, meta, and action identically.\n *\n * Use for full-bleed application pages that own the whole content area. For\n * narrow settings pages, use `ds/components/SettingsLayout`.\n *\n * `isLoading` affects the header only, blanking the title and description and\n * hiding the icon. Callers render their own loading body.\n */\nexport function PageShell({\n  title,\n  children,\n  icon,\n  description,\n  meta,\n  action,\n  isLoading,\n  width = 'wide',\n  height = 'full',\n  className = 'px-6',\n}: PageShellProps) {\n  return (\n    <PageLayout width={width} height={height} className={className}>\n      <PageLayout.TopArea>\n        <PageHeader>\n          {icon != null && !isLoading ? <PageHeader.Icon>{icon}</PageHeader.Icon> : null}\n          <PageHeader.Title isLoading={isLoading}>{title}</PageHeader.Title>\n          {description != null ? (\n            <PageHeader.Description isLoading={isLoading}>{description}</PageHeader.Description>\n          ) : null}\n          {meta != null ? <PageHeader.Meta beside>{meta}</PageHeader.Meta> : null}\n          {action != null ? <PageHeader.Action>{action}</PageHeader.Action> : null}\n        </PageHeader>\n      </PageLayout.TopArea>\n      <PageLayout.MainArea>{children}</PageLayout.MainArea>\n    </PageLayout>\n  );\n}\n"],"names":[],"mappings":";;;;AA4BO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,MAAA,GAAS,MAAA;AAAA,EACT,SAAA,GAAY;AACd,CAAA,EAAmB;AACjB,EAAA,uBACE,IAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAc,MAAA,EAAgB,SAAA,EACxC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,CAAW,OAAA,EAAX,EACC,QAAA,kBAAA,IAAA,CAAC,UAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,IAAA,IAAQ,IAAA,IAAQ,CAAC,SAAA,mBAAY,GAAA,CAAC,WAAW,IAAA,EAAX,EAAiB,gBAAK,CAAA,GAAqB,IAAA;AAAA,sBAC1E,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,WAAuB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC9C,WAAA,IAAe,uBACd,GAAA,CAAC,UAAA,CAAW,aAAX,EAAuB,SAAA,EAAuB,uBAAY,CAAA,GACzD,IAAA;AAAA,MACH,IAAA,IAAQ,uBAAO,GAAA,CAAC,UAAA,CAAW,MAAX,EAAgB,MAAA,EAAM,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,GAAqB,IAAA;AAAA,MAClE,UAAU,IAAA,mBAAO,GAAA,CAAC,WAAW,MAAA,EAAX,EAAmB,kBAAO,CAAA,GAAuB;AAAA,KAAA,EACtE,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAS;AAAA,GAAA,EACjC,CAAA;AAEJ;;;;"}

package/dist/new/settings.cjs.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const settingsContainer = require('../settings-container-aSJeNRdZ.cjs');
+require('../new-theme.css');const settingsContainer = require('../settings-container-Dxb59YvM.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+;/* empty css                      */
 const React = require('react');
-const Txt = require('../Txt-i-sXSs2m.cjs');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
-const settingsRow = require('../settings-row-BKz6r927.cjs');
-const settingsLayout = require('../settings-layout-BjjVaZgN.cjs');
+const Txt = require('../Txt-C7rZCmrg.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const settingsRow = require('../settings-row-Dsu9uRdl.cjs');
+const settingsLayout = require('../settings-layout-DRrl-EBq.cjs');
 
 const SettingsTitleIdContext = React.createContext(void 0);
 function SettingsGroup({ className, ...props }) {
@@ -17,7 +18,7 @@ function SettingsGroup({ className, ...props }) {
     "section",
     {
       "aria-labelledby": titleId,
-      className: utils_cn.cn("flex min-w-0 scroll-mt-4 flex-col gap-2", className),
+      className: utils_cn.cn("new-theme flex min-w-0 scroll-mt-4 flex-col gap-2", className),
       ...props
     }
   ) });
@@ -31,7 +32,7 @@ function SettingsHeader({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
     {
-      className: utils_cn.cn("flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-4", className),
+      className: utils_cn.cn("flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-col gap-1", children }),
@@ -46,13 +47,22 @@ function SettingsTitle({
   ...props
 }) {
   const titleId = React.useContext(SettingsTitleIdContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "h2", id: titleId, variant: "title", className, ...props }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "new-theme flex min-w-0 flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Txt.Txt,
+      {
+        as: "h2",
+        id: titleId,
+        variant: "header-sm",
+        className: utils_cn.cn("font-medium text-foreground", className),
+        ...props
+      }
+    ),
     accessory
   ] });
 }
 function SettingsDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "caption", className, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "ui-sm", className: utils_cn.cn("new-theme text-muted-foreground", className), ...props });
 }
 
 exports.SettingsContainer = settingsContainer.SettingsContainer;

package/dist/new/settings.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.cjs.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt as=\"h2\" id={titleId} variant=\"title\" className={className} {...props} />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"caption\" className={className} {...props} />;\n}\n"],"names":["createContext","useId","jsx","cn","jsxs","useContext","Txt"],"mappings":";;;;;;;;;;;;AAKA,MAAM,sBAAA,GAAyBA,oBAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAUC,WAAA,EAAM;AAEtB,EAAA,uBACEC,cAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAWC,WAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,WAAA,CAAG,0EAAA,EAA4E,SAAS,CAAA;AAAA,MAClG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAUG,iBAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAACI,OAAA,EAAA,EAAI,IAAG,IAAA,EAAK,EAAA,EAAI,SAAS,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AAAA,IAC1E;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAOJ,cAAA,CAACI,WAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,SAAA,EAAU,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AACxE;;;;;;;;;;"}
+{"version":3,"file":"settings.cjs.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import '../../../../new-theme.css';\n\nimport { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('new-theme flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"new-theme flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt\n        as=\"h2\"\n        id={titleId}\n        variant=\"header-sm\"\n        className={cn('font-medium text-foreground', className)}\n        {...props}\n      />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"ui-sm\" className={cn('new-theme text-muted-foreground', className)} {...props} />;\n}\n"],"names":["createContext","useId","jsx","cn","jsxs","useContext","Txt"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,sBAAA,GAAyBA,oBAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAUC,WAAA,EAAM;AAEtB,EAAA,uBACEC,cAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAWC,WAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAC3E,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,WAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAUG,iBAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qDAAA,EACb,QAAA,EAAA;AAAA,oBAAAF,cAAA;AAAA,MAACI,OAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,IAAA;AAAA,QACH,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA,EAAQ,WAAA;AAAA,QACR,SAAA,EAAWH,WAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,QACrD,GAAG;AAAA;AAAA,KACN;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAOD,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAWH,WAAA,CAAG,iCAAA,EAAmC,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC7G;;;;;;;;;;"}

package/dist/new/settings.es.js

@@ -1,10 +1,11 @@
-export { S as SettingsContainer } from '../settings-container-C3d4Y528.js';
+import '../new-theme.css';export { S as SettingsContainer } from '../settings-container-B5YhEzjS.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+/* empty css                    */
 import { useId, useContext, createContext } from 'react';
-import { T as Txt } from '../Txt-CfPhlZOu.js';
-import { c as cn } from '../cn-ByEbywDh.js';
-export { a as SettingsRow } from '../settings-row-T98nqxPD.js';
-export { S as SettingsLayout } from '../settings-layout-DlXTuCQ7.js';
+import { T as Txt } from '../Txt-hyo2FKuO.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
+export { a as SettingsRow } from '../settings-row-PB5zne3m.js';
+export { S as SettingsLayout } from '../settings-layout-CTnDZ_fr.js';
 
 const SettingsTitleIdContext = createContext(void 0);
 function SettingsGroup({ className, ...props }) {
@@ -13,7 +14,7 @@ function SettingsGroup({ className, ...props }) {
     "section",
     {
       "aria-labelledby": titleId,
-      className: cn("flex min-w-0 scroll-mt-4 flex-col gap-2", className),
+      className: cn("new-theme flex min-w-0 scroll-mt-4 flex-col gap-2", className),
       ...props
     }
   ) });
@@ -27,7 +28,7 @@ function SettingsHeader({
   return /* @__PURE__ */ jsxs(
     "header",
     {
-      className: cn("flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-4", className),
+      className: cn("flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-1", children }),
@@ -42,13 +43,22 @@ function SettingsTitle({
   ...props
 }) {
   const titleId = useContext(SettingsTitleIdContext);
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "h2", id: titleId, variant: "title", className, ...props }),
+  return /* @__PURE__ */ jsxs("div", { className: "new-theme flex min-w-0 flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Txt,
+      {
+        as: "h2",
+        id: titleId,
+        variant: "header-sm",
+        className: cn("font-medium text-foreground", className),
+        ...props
+      }
+    ),
     accessory
   ] });
 }
 function SettingsDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "caption", className, ...props });
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: cn("new-theme text-muted-foreground", className), ...props });
 }
 
 export { SettingsDescription, SettingsGroup, SettingsHeader, SettingsTitle };

package/dist/new/settings.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.es.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt as=\"h2\" id={titleId} variant=\"title\" className={className} {...props} />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"caption\" className={className} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;AAKA,MAAM,sBAAA,GAAyB,cAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAU,KAAA,EAAM;AAEtB,EAAA,uBACE,GAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,0EAAA,EAA4E,SAAS,CAAA;AAAA,MAClG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAU,WAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,IAAG,IAAA,EAAK,EAAA,EAAI,SAAS,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AAAA,IAC1E;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAO,GAAA,CAAC,OAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,SAAA,EAAU,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AACxE;;;;"}
+{"version":3,"file":"settings.es.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import '../../../../new-theme.css';\n\nimport { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('new-theme flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"new-theme flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt\n        as=\"h2\"\n        id={titleId}\n        variant=\"header-sm\"\n        className={cn('font-medium text-foreground', className)}\n        {...props}\n      />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"ui-sm\" className={cn('new-theme text-muted-foreground', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;;AAOA,MAAM,sBAAA,GAAyB,cAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAU,KAAA,EAAM;AAEtB,EAAA,uBACE,GAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAC3E,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAU,WAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,IAAA;AAAA,QACH,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA,EAAQ,WAAA;AAAA,QACR,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,QACrD,GAAG;AAAA;AAAA,KACN;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAO,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAW,EAAA,CAAG,iCAAA,EAAmC,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC7G;;;;"}