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

package/dist/logs-data-list-DikL8ZQ0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"logs-data-list-DikL8ZQ0.cjs","sources":["../src/ds/icons/ToolsIcon.tsx","../src/ds/components/LogsDataList/logs-data-list-cells.tsx","../src/ds/components/LogsDataList/logs-data-list.tsx"],"sourcesContent":["import React from 'react';\n\nexport const ToolsIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 11.185 11.185\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M5.0293 1.16491L4.81958 0.801671L4.81955 0.801686L5.0293 1.16491ZM5.75391 1.16491L5.96365 0.801686L5.96363 0.801671L5.75391 1.16491ZM9.04492 3.06531L9.25474 2.70212L9.25467 2.70208L9.04492 3.06531ZM9.40723 7.49304L9.82666 7.49332V7.49304H9.40723ZM9.04492 8.11999L8.8352 7.75675L8.83518 7.75676L9.04492 8.11999ZM5.75391 10.0204L5.96363 10.3836L5.96365 10.3836L5.75391 10.0204ZM5.0293 10.0204L4.81955 10.3836L4.81963 10.3837L5.0293 10.0204ZM1.73828 8.11999L1.94803 7.75676L1.948 7.75675L1.73828 8.11999ZM1.37598 7.49304H0.956538L0.956538 7.49332L1.37598 7.49304ZM1.73828 3.06531L1.94802 3.42854L1.94803 3.42853L1.73828 3.06531ZM5.59277 3.38366L5.59283 2.96423H5.59277V3.38366ZM3.38379 5.59167L2.96435 5.59159V5.59167H3.38379ZM5.59277 7.80066V8.2201H5.59283L5.59277 7.80066ZM7.80078 5.59167H8.22022V5.59159L7.80078 5.59167ZM5.0293 1.16491L5.23902 1.52816C5.33331 1.47372 5.44989 1.47372 5.54419 1.52816L5.75391 1.16491L5.96363 0.801671C5.60978 0.59738 5.17342 0.59738 4.81958 0.801671L5.0293 1.16491ZM5.75391 1.16491L5.54416 1.52814L8.83518 3.42853L9.04492 3.06531L9.25467 2.70208L5.96365 0.801686L5.75391 1.16491ZM9.04492 3.06531L8.83511 3.42849C8.92979 3.48319 8.98779 3.5839 8.98779 3.69226H9.40723H9.82666C9.82666 3.28328 9.60799 2.90619 9.25474 2.70212L9.04492 3.06531ZM9.40723 3.69226H8.98779V7.49304H9.40723H9.82666V3.69226H9.40723ZM9.40723 7.49304L8.98779 7.49276C8.98772 7.6015 8.92949 7.70231 8.8352 7.75675L9.04492 8.11999L9.25464 8.48324C9.60821 8.2791 9.82639 7.90167 9.82666 7.49332L9.40723 7.49304ZM9.04492 8.11999L8.83518 7.75676L5.54416 9.65715L5.75391 10.0204L5.96365 10.3836L9.25467 8.48322L9.04492 8.11999ZM5.75391 10.0204L5.54419 9.65714C5.44996 9.71154 5.33331 9.71156 5.23897 9.65711L5.0293 10.0204L4.81963 10.3837C5.17339 10.5878 5.60977 10.5879 5.96363 10.3836L5.75391 10.0204ZM5.0293 10.0204L5.23904 9.65715L1.94803 7.75676L1.73828 8.11999L1.52854 8.48322L4.81955 10.3836L5.0293 10.0204ZM1.73828 8.11999L1.948 7.75675C1.85371 7.70231 1.79549 7.6015 1.79541 7.49276L1.37598 7.49304L0.956538 7.49332C0.956809 7.90167 1.17499 8.2791 1.52856 8.48324L1.73828 8.11999ZM1.37598 7.49304H1.79542V3.69226H1.37598H0.956538V7.49304H1.37598ZM1.37598 3.69226H1.79542C1.79542 3.58378 1.85339 3.48318 1.94802 3.42854L1.73828 3.06531L1.52854 2.70207C1.17507 2.90617 0.956538 3.2833 0.956538 3.69226H1.37598ZM1.73828 3.06531L1.94803 3.42853L5.23904 1.52814L5.0293 1.16491L4.81955 0.801686L1.52854 2.70208L1.73828 3.06531ZM5.59277 3.38366V2.96423C4.14162 2.96423 2.96463 4.14015 2.96435 5.59159L3.38379 5.59167L3.80323 5.59175C3.80342 4.60382 4.60458 3.8031 5.59277 3.8031V3.38366ZM3.38379 5.59167H2.96435C2.96435 7.04322 4.14132 8.2201 5.59277 8.2201V7.80066V7.38122C4.6046 7.38122 3.80323 6.57991 3.80323 5.59167H3.38379ZM5.59277 7.80066L5.59283 8.2201C7.04429 8.2199 8.22022 7.04294 8.22022 5.59167H7.80078H7.38134C7.38134 6.57999 6.58061 7.38108 5.59272 7.38122L5.59277 7.80066ZM7.80078 5.59167L8.22022 5.59159C8.21994 4.14043 7.04398 2.96443 5.59283 2.96423L5.59277 3.38366L5.59272 3.8031C6.58062 3.80324 7.38115 4.60374 7.38134 5.59175L7.80078 5.59167Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n","import { EntityType } from '@mastra/core/observability';\nimport { DataListCell, DataListMonoCell } from '../DataList/data-list-cells';\ntype LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'fatal';\nimport { AgentIcon } from '@/ds/icons/AgentIcon';\nimport { ToolsIcon } from '@/ds/icons/ToolsIcon';\nimport { WorkflowIcon } from '@/ds/icons/WorkflowIcon';\nimport { cn } from '@/lib/utils';\n\nconst LEVEL_CONFIG: Record<LogLevel, { label: string; color: string }> = {\n  debug: { label: 'DEBUG', color: '#71717a' },\n  info: { label: 'INFO', color: '#60a5fa' },\n  warn: { label: 'WARN', color: '#facc15' },\n  error: { label: 'ERROR', color: '#f87171' },\n  fatal: { label: 'FATAL', color: '#dc2626' },\n};\n\n// ---------------------------------------------------------------------------\n// LevelCell\n// ---------------------------------------------------------------------------\n\nexport interface LogsDataListLevelCellProps {\n  level: LogLevel;\n}\n\nexport function LogsDataListLevelCell({ level }: LogsDataListLevelCellProps) {\n  const config = LEVEL_CONFIG[level];\n\n  return (\n    <DataListCell height=\"compact\">\n      <span className=\"uppercase text-ui-sm font-semibold\" style={{ color: config.color }}>\n        {config.label}\n      </span>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// EntityCell\n// ---------------------------------------------------------------------------\n\nfunction EntityTypeIcon({ entityType, className }: { entityType: string; className?: string }) {\n  const iconClass = cn('size-3.5 shrink-0 text-neutral2', className);\n  const normalizedEntityType = entityType.toLowerCase();\n\n  switch (normalizedEntityType) {\n    case EntityType.AGENT:\n      return <AgentIcon className={iconClass} aria-hidden />;\n    case 'workflow':\n    case EntityType.WORKFLOW_RUN:\n      return <WorkflowIcon className={iconClass} aria-hidden />;\n    case EntityType.TOOL:\n      return <ToolsIcon className={iconClass} aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport interface LogsDataListEntityCellProps {\n  entityType?: string | null;\n  entityName?: string | null;\n}\n\nexport function LogsDataListEntityCell({ entityType, entityName }: LogsDataListEntityCellProps) {\n  const type = entityType ?? '';\n\n  return (\n    <DataListCell height=\"compact\" className=\"flex min-w-0 items-center gap-2\">\n      <EntityTypeIcon entityType={type} />\n      {entityName ? <span className=\"min-w-0 text-ui-smd truncate\">{entityName}</span> : '-'}\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// MessageCell\n// ---------------------------------------------------------------------------\n\nexport interface LogsDataListMessageCellProps {\n  message: string;\n}\n\nexport function LogsDataListMessageCell({ message }: LogsDataListMessageCellProps) {\n  return (\n    <DataListCell height=\"compact\" className=\"text-neutral4 text-ui-smd min-w-0 truncate font-mono\">\n      {message}\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// DataCell\n// ---------------------------------------------------------------------------\n\nexport interface LogsDataListDataCellProps {\n  data?: Record<string, unknown> | null;\n}\n\nexport function LogsDataListDataCell({ data }: LogsDataListDataCellProps) {\n  if (!data || Object.keys(data).length === 0) {\n    return <DataListCell height=\"compact\">{null}</DataListCell>;\n  }\n\n  const summary = Object.entries(data)\n    .map(([k, v]) => {\n      if (typeof v === 'string') return `${k}: ${v}`;\n      try {\n        return `${k}: ${JSON.stringify(v)}`;\n      } catch {\n        return `${k}: <unserializable>`;\n      }\n    })\n    .join(', ');\n\n  return <DataListMonoCell>{summary}</DataListMonoCell>;\n}\n","import { DataListDateCell, DataListTimeCell } from '../DataList/data-list-cells';\nimport { DataListNextPageLoading } from '../DataList/data-list-next-page-loading';\nimport { DataListNoMatch } from '../DataList/data-list-no-match';\nimport { DataListRoot } from '../DataList/data-list-root';\nimport { DataListRowButton } from '../DataList/data-list-row-button';\nimport { DataListRowLink } from '../DataList/data-list-row-link';\nimport { DataListRowWrapper } from '../DataList/data-list-row-wrapper';\nimport { DataListSpacer } from '../DataList/data-list-spacer';\nimport { DataListTop } from '../DataList/data-list-top';\nimport { DataListTopCell, DataListTopCellWithTooltip, DataListTopCellSmart } from '../DataList/data-list-top-cell';\nimport {\n  LogsDataListLevelCell,\n  LogsDataListEntityCell,\n  LogsDataListMessageCell,\n  LogsDataListDataCell,\n} from './logs-data-list-cells';\n\nexport const LogsDataList = Object.assign(DataListRoot, {\n  Top: DataListTop,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  TopCellSmart: DataListTopCellSmart,\n  RowWrapper: DataListRowWrapper,\n  RowButton: DataListRowButton,\n  RowLink: DataListRowLink,\n  Spacer: DataListSpacer,\n  NoMatch: DataListNoMatch,\n  DateCell: DataListDateCell,\n  TimeCell: DataListTimeCell,\n  LevelCell: LogsDataListLevelCell,\n  EntityCell: LogsDataListEntityCell,\n  MessageCell: LogsDataListMessageCell,\n  DataCell: LogsDataListDataCell,\n  NextPageLoading: DataListNextPageLoading,\n});\n"],"names":["jsx","DataListCell","cn","EntityType","AgentIcon","WorkflowIcon","jsxs","DataListMonoCell","DataListRoot","DataListTop","DataListTopCell","DataListTopCellWithTooltip","DataListTopCellSmart","DataListRowWrapper","DataListRowButton","DataListRowLink","DataListSpacer","DataListNoMatch","DataListDateCell","DataListTimeCell","DataListNextPageLoading"],"mappings":"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"}

package/dist/main-content-CR0j00N1.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { u as usePageHeading } from './page-heading-context-D3yjYoJE.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function MainContentLayout({
+  children,
+  className,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentLayout");
+  const pageHeading = usePageHeading();
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      className: cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
+      children: [
+        pageHeading && /* @__PURE__ */ jsx("h1", { className: "sr-only", children: pageHeading }),
+        children
+      ]
+    }
+  );
+}
+function MainContentContent({
+  children,
+  className,
+  isCentered = false,
+  isDivided = false,
+  hasLeftServiceColumn = false,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentContent");
+  const contentClassName = getMainContentContentClassName({ isCentered, isDivided, hasLeftServiceColumn, className });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: contentClassName,
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
+      children
+    }
+  );
+}
+const getMainContentContentClassName = ({
+  isCentered,
+  isDivided,
+  hasLeftServiceColumn,
+  className
+}) => {
+  return cn(
+    `grid overflow-y-auto h-full `,
+    `overflow-x-auto min-w-min`,
+    {
+      "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
+      "grid place-items-center": isCentered,
+      "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
+      "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
+      "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
+    },
+    className
+  );
+};
+function devUIStyleRequested(name) {
+  try {
+    const raw = localStorage.getItem("add-dev-style-to-components");
+    if (!raw) return false;
+    const components = raw.split(",").map((c) => c.trim()).filter(Boolean);
+    return components.includes(name);
+  } catch (error) {
+    console.error("Error reading or parsing localStorage:", error);
+    return false;
+  }
+}
+
+export { MainContentContent as M, MainContentLayout as a, getMainContentContentClassName as g };
+//# sourceMappingURL=main-content-CR0j00N1.js.map

package/dist/main-content-CR0j00N1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-content-CR0j00N1.js","sources":["../src/ds/components/MainContent/main-content.tsx"],"sourcesContent":["import { usePageHeading } from '../PageLayout/page-heading-context';\nimport { cn } from '@/lib/utils';\n\nexport function MainContentLayout({\n  children,\n  className,\n  style,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}) {\n  const devStyleRequested = devUIStyleRequested('MainContentLayout');\n  const pageHeading = usePageHeading();\n\n  return (\n    <main\n      className={cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className)}\n      style={{ ...style, ...(devStyleRequested ? { border: '3px dotted red' } : {}) }}\n    >\n      {pageHeading && <h1 className=\"sr-only\">{pageHeading}</h1>}\n      {children}\n    </main>\n  );\n}\n\nexport type MainContentContentProps = {\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  // content is centered in the middle of the page e.g. for empty state\n  isCentered?: boolean;\n  // content is split into two columns equal width columns\n  isDivided?: boolean;\n  // used when the left column is a service column (e.g. agent history nav)\n  hasLeftServiceColumn?: boolean;\n};\n\nexport function MainContentContent({\n  children,\n  className,\n  isCentered = false,\n  isDivided = false,\n  hasLeftServiceColumn = false,\n  style,\n}: MainContentContentProps) {\n  const devStyleRequested = devUIStyleRequested('MainContentContent');\n  const contentClassName = getMainContentContentClassName({ isCentered, isDivided, hasLeftServiceColumn, className });\n\n  return (\n    <div\n      className={contentClassName}\n      style={{ ...style, ...(devStyleRequested ? { border: '3px dotted orange' } : {}) }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type GetMainContentContentClassNameArgs = {\n  isCentered: boolean;\n  isDivided: boolean;\n  hasLeftServiceColumn: boolean;\n  className?: string;\n};\n\nexport const getMainContentContentClassName = ({\n  isCentered,\n  isDivided,\n  hasLeftServiceColumn,\n  className,\n}: GetMainContentContentClassNameArgs) => {\n  return cn(\n    `grid overflow-y-auto h-full `,\n    `overflow-x-auto min-w-min`,\n    {\n      'items-start content-start': !isCentered && !isDivided && !hasLeftServiceColumn,\n      'grid place-items-center': isCentered,\n      'grid-cols-[1fr_1fr]': isDivided && !hasLeftServiceColumn,\n      'grid-cols-[12rem_1fr_1fr]': isDivided && hasLeftServiceColumn,\n      'grid-cols-[auto_1fr]': !isDivided && hasLeftServiceColumn,\n    },\n    className,\n  );\n};\n\nfunction devUIStyleRequested(name: string) {\n  try {\n    const raw = localStorage.getItem('add-dev-style-to-components');\n    if (!raw) return false;\n\n    const components = raw\n      .split(',')\n      .map(c => c.trim())\n      .filter(Boolean); // remove empty strings\n\n    return components.includes(name);\n  } catch (error) {\n    console.error('Error reading or parsing localStorage:', error);\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;;AAGO,SAAS,iBAAA,CAAkB;AAAA,EAChC,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,iBAAA,GAAoB,oBAAoB,mBAAmB,CAAA;AACjE,EAAA,MAAM,cAAc,cAAA,EAAe;AAEnC,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,CAAA,0DAAA,CAAA,EAA8D,SAAS,CAAA;AAAA,MACrF,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,GAAI,iBAAA,GAAoB,EAAE,MAAA,EAAQ,gBAAA,EAAiB,GAAI,EAAC,EAAG;AAAA,MAE7E,QAAA,EAAA;AAAA,QAAA,WAAA,oBAAe,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QACpD;AAAA;AAAA;AAAA,GACH;AAEJ;AAcO,SAAS,kBAAA,CAAmB;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA,GAAY,KAAA;AAAA,EACZ,oBAAA,GAAuB,KAAA;AAAA,EACvB;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,iBAAA,GAAoB,oBAAoB,oBAAoB,CAAA;AAClE,EAAA,MAAM,mBAAmB,8BAAA,CAA+B,EAAE,YAAY,SAAA,EAAW,oBAAA,EAAsB,WAAW,CAAA;AAElH,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,gBAAA;AAAA,MACX,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,GAAI,iBAAA,GAAoB,EAAE,MAAA,EAAQ,mBAAA,EAAoB,GAAI,EAAC,EAAG;AAAA,MAEhF;AAAA;AAAA,GACH;AAEJ;AASO,MAAM,iCAAiC,CAAC;AAAA,EAC7C,UAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAA,KAA0C;AACxC,EAAA,OAAO,EAAA;AAAA,IACL,CAAA,4BAAA,CAAA;AAAA,IACA,CAAA,yBAAA,CAAA;AAAA,IACA;AAAA,MACE,2BAAA,EAA6B,CAAC,UAAA,IAAc,CAAC,aAAa,CAAC,oBAAA;AAAA,MAC3D,yBAAA,EAA2B,UAAA;AAAA,MAC3B,qBAAA,EAAuB,aAAa,CAAC,oBAAA;AAAA,MACrC,6BAA6B,SAAA,IAAa,oBAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAC,SAAA,IAAa;AAAA,KACxC;AAAA,IACA;AAAA,GACF;AACF;AAEA,SAAS,oBAAoB,IAAA,EAAc;AACzC,EAAA,IAAI;AACF,IAAA,MAAM,GAAA,GAAM,YAAA,CAAa,OAAA,CAAQ,6BAA6B,CAAA;AAC9D,IAAA,IAAI,CAAC,KAAK,OAAO,KAAA;AAEjB,IAAA,MAAM,UAAA,GAAa,GAAA,CAChB,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,IAAA,EAAM,CAAA,CACjB,MAAA,CAAO,OAAO,CAAA;AAEjB,IAAA,OAAO,UAAA,CAAW,SAAS,IAAI,CAAA;AAAA,EACjC,SAAS,KAAA,EAAO;AACd,IAAA,OAAA,CAAQ,KAAA,CAAM,0CAA0C,KAAK,CAAA;AAC7D,IAAA,OAAO,KAAA;AAAA,EACT;AACF;;;;"}

package/dist/main-content-CnmMWNin.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const pageHeadingContext = require('./page-heading-context-Du-CpxAx.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function MainContentLayout({
+  children,
+  className,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentLayout");
+  const pageHeading = pageHeadingContext.usePageHeading();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "main",
+    {
+      className: utils.cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
+      children: [
+        pageHeading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "sr-only", children: pageHeading }),
+        children
+      ]
+    }
+  );
+}
+function MainContentContent({
+  children,
+  className,
+  isCentered = false,
+  isDivided = false,
+  hasLeftServiceColumn = false,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentContent");
+  const contentClassName = getMainContentContentClassName({ isCentered, isDivided, hasLeftServiceColumn, className });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: contentClassName,
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
+      children
+    }
+  );
+}
+const getMainContentContentClassName = ({
+  isCentered,
+  isDivided,
+  hasLeftServiceColumn,
+  className
+}) => {
+  return utils.cn(
+    `grid overflow-y-auto h-full `,
+    `overflow-x-auto min-w-min`,
+    {
+      "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
+      "grid place-items-center": isCentered,
+      "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
+      "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
+      "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
+    },
+    className
+  );
+};
+function devUIStyleRequested(name) {
+  try {
+    const raw = localStorage.getItem("add-dev-style-to-components");
+    if (!raw) return false;
+    const components = raw.split(",").map((c) => c.trim()).filter(Boolean);
+    return components.includes(name);
+  } catch (error) {
+    console.error("Error reading or parsing localStorage:", error);
+    return false;
+  }
+}
+
+exports.MainContentContent = MainContentContent;
+exports.MainContentLayout = MainContentLayout;
+exports.getMainContentContentClassName = getMainContentContentClassName;
+//# sourceMappingURL=main-content-CnmMWNin.cjs.map

package/dist/main-content-CnmMWNin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-content-CnmMWNin.cjs","sources":["../src/ds/components/MainContent/main-content.tsx"],"sourcesContent":["import { usePageHeading } from '../PageLayout/page-heading-context';\nimport { cn } from '@/lib/utils';\n\nexport function MainContentLayout({\n  children,\n  className,\n  style,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}) {\n  const devStyleRequested = devUIStyleRequested('MainContentLayout');\n  const pageHeading = usePageHeading();\n\n  return (\n    <main\n      className={cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className)}\n      style={{ ...style, ...(devStyleRequested ? { border: '3px dotted red' } : {}) }}\n    >\n      {pageHeading && <h1 className=\"sr-only\">{pageHeading}</h1>}\n      {children}\n    </main>\n  );\n}\n\nexport type MainContentContentProps = {\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  // content is centered in the middle of the page e.g. for empty state\n  isCentered?: boolean;\n  // content is split into two columns equal width columns\n  isDivided?: boolean;\n  // used when the left column is a service column (e.g. agent history nav)\n  hasLeftServiceColumn?: boolean;\n};\n\nexport function MainContentContent({\n  children,\n  className,\n  isCentered = false,\n  isDivided = false,\n  hasLeftServiceColumn = false,\n  style,\n}: MainContentContentProps) {\n  const devStyleRequested = devUIStyleRequested('MainContentContent');\n  const contentClassName = getMainContentContentClassName({ isCentered, isDivided, hasLeftServiceColumn, className });\n\n  return (\n    <div\n      className={contentClassName}\n      style={{ ...style, ...(devStyleRequested ? { border: '3px dotted orange' } : {}) }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type GetMainContentContentClassNameArgs = {\n  isCentered: boolean;\n  isDivided: boolean;\n  hasLeftServiceColumn: boolean;\n  className?: string;\n};\n\nexport const getMainContentContentClassName = ({\n  isCentered,\n  isDivided,\n  hasLeftServiceColumn,\n  className,\n}: GetMainContentContentClassNameArgs) => {\n  return cn(\n    `grid overflow-y-auto h-full `,\n    `overflow-x-auto min-w-min`,\n    {\n      'items-start content-start': !isCentered && !isDivided && !hasLeftServiceColumn,\n      'grid place-items-center': isCentered,\n      'grid-cols-[1fr_1fr]': isDivided && !hasLeftServiceColumn,\n      'grid-cols-[12rem_1fr_1fr]': isDivided && hasLeftServiceColumn,\n      'grid-cols-[auto_1fr]': !isDivided && hasLeftServiceColumn,\n    },\n    className,\n  );\n};\n\nfunction devUIStyleRequested(name: string) {\n  try {\n    const raw = localStorage.getItem('add-dev-style-to-components');\n    if (!raw) return false;\n\n    const components = raw\n      .split(',')\n      .map(c => c.trim())\n      .filter(Boolean); // remove empty strings\n\n    return components.includes(name);\n  } catch (error) {\n    console.error('Error reading or parsing localStorage:', error);\n    return false;\n  }\n}\n"],"names":["usePageHeading","jsxs","cn","jsx"],"mappings":";;;;;;AAGO,SAAS,iBAAA,CAAkB;AAAA,EAChC,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,iBAAA,GAAoB,oBAAoB,mBAAmB,CAAA;AACjE,EAAA,MAAM,cAAcA,iCAAA,EAAe;AAEnC,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,QAAA,CAAG,CAAA,0DAAA,CAAA,EAA8D,SAAS,CAAA;AAAA,MACrF,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,GAAI,iBAAA,GAAoB,EAAE,MAAA,EAAQ,gBAAA,EAAiB,GAAI,EAAC,EAAG;AAAA,MAE7E,QAAA,EAAA;AAAA,QAAA,WAAA,oBAAeC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QACpD;AAAA;AAAA;AAAA,GACH;AAEJ;AAcO,SAAS,kBAAA,CAAmB;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA,GAAY,KAAA;AAAA,EACZ,oBAAA,GAAuB,KAAA;AAAA,EACvB;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,iBAAA,GAAoB,oBAAoB,oBAAoB,CAAA;AAClE,EAAA,MAAM,mBAAmB,8BAAA,CAA+B,EAAE,YAAY,SAAA,EAAW,oBAAA,EAAsB,WAAW,CAAA;AAElH,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,gBAAA;AAAA,MACX,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,GAAI,iBAAA,GAAoB,EAAE,MAAA,EAAQ,mBAAA,EAAoB,GAAI,EAAC,EAAG;AAAA,MAEhF;AAAA;AAAA,GACH;AAEJ;AASO,MAAM,iCAAiC,CAAC;AAAA,EAC7C,UAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAA,KAA0C;AACxC,EAAA,OAAOD,QAAA;AAAA,IACL,CAAA,4BAAA,CAAA;AAAA,IACA,CAAA,yBAAA,CAAA;AAAA,IACA;AAAA,MACE,2BAAA,EAA6B,CAAC,UAAA,IAAc,CAAC,aAAa,CAAC,oBAAA;AAAA,MAC3D,yBAAA,EAA2B,UAAA;AAAA,MAC3B,qBAAA,EAAuB,aAAa,CAAC,oBAAA;AAAA,MACrC,6BAA6B,SAAA,IAAa,oBAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAC,SAAA,IAAa;AAAA,KACxC;AAAA,IACA;AAAA,GACF;AACF;AAEA,SAAS,oBAAoB,IAAA,EAAc;AACzC,EAAA,IAAI;AACF,IAAA,MAAM,GAAA,GAAM,YAAA,CAAa,OAAA,CAAQ,6BAA6B,CAAA;AAC9D,IAAA,IAAI,CAAC,KAAK,OAAO,KAAA;AAEjB,IAAA,MAAM,UAAA,GAAa,GAAA,CAChB,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,IAAA,EAAM,CAAA,CACjB,MAAA,CAAO,OAAO,CAAA;AAEjB,IAAA,OAAO,UAAA,CAAW,SAAS,IAAI,CAAA;AAAA,EACjC,SAAS,KAAA,EAAO;AACd,IAAA,OAAA,CAAQ,KAAA,CAAM,0CAA0C,KAAK,CAAA;AAC7D,IAAA,OAAO,KAAA;AAAA,EACT;AACF;;;;;;"}

package/dist/main-header-Bp0d1TMi.js

@@ -0,0 +1,96 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function MainHeaderColumn({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid content-start", className), children });
+}
+
+function MainHeaderDescription({ children, isLoading }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("text-neutral3 text-sm max-w-[35rem] flex flex-wrap gap-x-4 gap-y-1 mt-1 first-of-type:mt-3 ml-1", {
+        "bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse": isLoading
+      }),
+      children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : /* @__PURE__ */ jsx(Fragment, { children })
+    }
+  );
+}
+
+function MainHeaderRoot({
+  children,
+  title,
+  description,
+  icon,
+  className,
+  withMargins = true
+}) {
+  const titleIsLoading = title === "loading";
+  const descriptionIsLoading = description === "loading";
+  return children ? /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(
+        "grid grid-cols-[1fr_auto] gap-16 w-full ",
+        {
+          "mt-[6vh] mb-[4vh]": withMargins
+        },
+        className
+      ),
+      children
+    }
+  ) : /* @__PURE__ */ jsxs("header", { className: cn("grid gap-2 pt-8 pb-8 ", className), children: [
+    /* @__PURE__ */ jsx(
+      "h1",
+      {
+        className: cn(
+          "text-neutral6 text-xl font-normal flex items-center gap-2",
+          "[&>svg]:w-6 [&>svg]:h-6 [&>svg]:text-neutral3",
+          {
+            "bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse": titleIsLoading
+          }
+        ),
+        children: titleIsLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon && icon,
+          " ",
+          title
+        ] })
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn("text-neutral4 text-sm m-0", {
+          "bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse": descriptionIsLoading
+        }),
+        children: descriptionIsLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : description
+      }
+    )
+  ] });
+}
+
+function MainHeaderTitle({ children, isLoading, size = "default" }) {
+  return /* @__PURE__ */ jsx(
+    "h1",
+    {
+      className: cn(
+        "text-neutral5 text-xl font-normal gap-2 flex items-center",
+        "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:opacity-50",
+        {
+          "bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse": isLoading,
+          "text-md": size === "smaller"
+        }
+      ),
+      children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : /* @__PURE__ */ jsx(Fragment, { children })
+    }
+  );
+}
+
+const MainHeader = Object.assign(MainHeaderRoot, {
+  Title: MainHeaderTitle,
+  Description: MainHeaderDescription,
+  Column: MainHeaderColumn
+});
+
+export { MainHeader as M };
+//# sourceMappingURL=main-header-Bp0d1TMi.js.map

package/dist/main-header-Bp0d1TMi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-header-Bp0d1TMi.js","sources":["../src/ds/components/MainHeader/main-header-column.tsx","../src/ds/components/MainHeader/main-header-description.tsx","../src/ds/components/MainHeader/main-header-root.tsx","../src/ds/components/MainHeader/main-header-title.tsx","../src/ds/components/MainHeader/main-header.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type MainHeaderColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function MainHeaderColumn({ children, className }: MainHeaderColumnProps) {\n  return <div className={cn('grid content-start', className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type MainHeaderDescriptionProps = {\n  children?: React.ReactNode;\n  isLoading?: boolean;\n};\n\nexport function MainHeaderDescription({ children, isLoading }: MainHeaderDescriptionProps) {\n  return (\n    <p\n      className={cn('text-neutral3 text-sm max-w-[35rem] flex flex-wrap gap-x-4 gap-y-1 mt-1 first-of-type:mt-3 ml-1', {\n        'bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse': isLoading,\n      })}\n    >\n      {isLoading ? <>&nbsp;</> : <>{children}</>}\n    </p>\n  );\n}\n","import React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface MainHeaderRootProps {\n  children?: React.ReactNode;\n  title?: string | 'loading';\n  description?: string | 'loading';\n  icon?: React.ReactNode;\n  withMargins?: boolean;\n  className?: string;\n}\n\nexport function MainHeaderRoot({\n  children,\n  title,\n  description,\n  icon,\n  className,\n  withMargins = true,\n}: MainHeaderRootProps) {\n  const titleIsLoading = title === 'loading';\n  const descriptionIsLoading = description === 'loading';\n\n  return children ? (\n    <header\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-16 w-full ',\n        {\n          'mt-[6vh] mb-[4vh]': withMargins,\n        },\n        className,\n      )}\n    >\n      {children}\n    </header>\n  ) : (\n    <header className={cn('grid gap-2 pt-8 pb-8 ', className)}>\n      <h1\n        className={cn(\n          'text-neutral6 text-xl font-normal flex items-center gap-2',\n          '[&>svg]:w-6 [&>svg]:h-6 [&>svg]:text-neutral3',\n          {\n            'bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse': titleIsLoading,\n          },\n        )}\n      >\n        {titleIsLoading ? (\n          <>&nbsp;</>\n        ) : (\n          <>\n            {icon && icon} {title}\n          </>\n        )}\n      </h1>\n      {description && (\n        <p\n          className={cn('text-neutral4 text-sm m-0', {\n            'bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse': descriptionIsLoading,\n          })}\n        >\n          {descriptionIsLoading ? <>&nbsp;</> : description}\n        </p>\n      )}\n    </header>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type MainHeaderTitleProps = {\n  children?: React.ReactNode;\n  isLoading?: boolean;\n  size?: 'default' | 'smaller';\n};\n\nexport function MainHeaderTitle({ children, isLoading, size = 'default' }: MainHeaderTitleProps) {\n  return (\n    <h1\n      className={cn(\n        'text-neutral5 text-xl font-normal gap-2 flex items-center',\n        '[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:opacity-50',\n        {\n          'bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse': isLoading,\n          'text-md': size === 'smaller',\n        },\n      )}\n    >\n      {isLoading ? <>&nbsp;</> : <>{children}</>}\n    </h1>\n  );\n}\n","import { MainHeaderColumn } from './main-header-column';\nimport { MainHeaderDescription } from './main-header-description';\nimport { MainHeaderRoot } from './main-header-root';\nimport { MainHeaderTitle } from './main-header-title';\n\nexport { type MainHeaderRootProps } from './main-header-root';\nexport { type MainHeaderTitleProps } from './main-header-title';\nexport { type MainHeaderDescriptionProps } from './main-header-description';\nexport { type MainHeaderColumnProps } from './main-header-column';\n\nexport const MainHeader = Object.assign(MainHeaderRoot, {\n  Title: MainHeaderTitle,\n  Description: MainHeaderDescription,\n  Column: MainHeaderColumn,\n});\n"],"names":[],"mappings":"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"}

package/dist/main-header-DJLRceP9.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function MainHeaderColumn({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("grid content-start", className), children });
+}
+
+function MainHeaderDescription({ children, isLoading }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      className: utils.cn("text-neutral3 text-sm max-w-[35rem] flex flex-wrap gap-x-4 gap-y-1 mt-1 first-of-type:mt-3 ml-1", {
+        "bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse": isLoading
+      }),
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+    }
+  );
+}
+
+function MainHeaderRoot({
+  children,
+  title,
+  description,
+  icon,
+  className,
+  withMargins = true
+}) {
+  const titleIsLoading = title === "loading";
+  const descriptionIsLoading = description === "loading";
+  return children ? /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      className: utils.cn(
+        "grid grid-cols-[1fr_auto] gap-16 w-full ",
+        {
+          "mt-[6vh] mb-[4vh]": withMargins
+        },
+        className
+      ),
+      children
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs("header", { className: utils.cn("grid gap-2 pt-8 pb-8 ", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h1",
+      {
+        className: utils.cn(
+          "text-neutral6 text-xl font-normal flex items-center gap-2",
+          "[&>svg]:w-6 [&>svg]:h-6 [&>svg]:text-neutral3",
+          {
+            "bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse": titleIsLoading
+          }
+        ),
+        children: titleIsLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon && icon,
+          " ",
+          title
+        ] })
+      }
+    ),
+    description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: utils.cn("text-neutral4 text-sm m-0", {
+          "bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse": descriptionIsLoading
+        }),
+        children: descriptionIsLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : description
+      }
+    )
+  ] });
+}
+
+function MainHeaderTitle({ children, isLoading, size = "default" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h1",
+    {
+      className: utils.cn(
+        "text-neutral5 text-xl font-normal gap-2 flex items-center",
+        "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:opacity-50",
+        {
+          "bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse": isLoading,
+          "text-md": size === "smaller"
+        }
+      ),
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+    }
+  );
+}
+
+const MainHeader = Object.assign(MainHeaderRoot, {
+  Title: MainHeaderTitle,
+  Description: MainHeaderDescription,
+  Column: MainHeaderColumn
+});
+
+exports.MainHeader = MainHeader;
+//# sourceMappingURL=main-header-DJLRceP9.cjs.map

package/dist/main-header-DJLRceP9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-header-DJLRceP9.cjs","sources":["../src/ds/components/MainHeader/main-header-column.tsx","../src/ds/components/MainHeader/main-header-description.tsx","../src/ds/components/MainHeader/main-header-root.tsx","../src/ds/components/MainHeader/main-header-title.tsx","../src/ds/components/MainHeader/main-header.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type MainHeaderColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function MainHeaderColumn({ children, className }: MainHeaderColumnProps) {\n  return <div className={cn('grid content-start', className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type MainHeaderDescriptionProps = {\n  children?: React.ReactNode;\n  isLoading?: boolean;\n};\n\nexport function MainHeaderDescription({ children, isLoading }: MainHeaderDescriptionProps) {\n  return (\n    <p\n      className={cn('text-neutral3 text-sm max-w-[35rem] flex flex-wrap gap-x-4 gap-y-1 mt-1 first-of-type:mt-3 ml-1', {\n        'bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse': isLoading,\n      })}\n    >\n      {isLoading ? <>&nbsp;</> : <>{children}</>}\n    </p>\n  );\n}\n","import React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface MainHeaderRootProps {\n  children?: React.ReactNode;\n  title?: string | 'loading';\n  description?: string | 'loading';\n  icon?: React.ReactNode;\n  withMargins?: boolean;\n  className?: string;\n}\n\nexport function MainHeaderRoot({\n  children,\n  title,\n  description,\n  icon,\n  className,\n  withMargins = true,\n}: MainHeaderRootProps) {\n  const titleIsLoading = title === 'loading';\n  const descriptionIsLoading = description === 'loading';\n\n  return children ? (\n    <header\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-16 w-full ',\n        {\n          'mt-[6vh] mb-[4vh]': withMargins,\n        },\n        className,\n      )}\n    >\n      {children}\n    </header>\n  ) : (\n    <header className={cn('grid gap-2 pt-8 pb-8 ', className)}>\n      <h1\n        className={cn(\n          'text-neutral6 text-xl font-normal flex items-center gap-2',\n          '[&>svg]:w-6 [&>svg]:h-6 [&>svg]:text-neutral3',\n          {\n            'bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse': titleIsLoading,\n          },\n        )}\n      >\n        {titleIsLoading ? (\n          <>&nbsp;</>\n        ) : (\n          <>\n            {icon && icon} {title}\n          </>\n        )}\n      </h1>\n      {description && (\n        <p\n          className={cn('text-neutral4 text-sm m-0', {\n            'bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse': descriptionIsLoading,\n          })}\n        >\n          {descriptionIsLoading ? <>&nbsp;</> : description}\n        </p>\n      )}\n    </header>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type MainHeaderTitleProps = {\n  children?: React.ReactNode;\n  isLoading?: boolean;\n  size?: 'default' | 'smaller';\n};\n\nexport function MainHeaderTitle({ children, isLoading, size = 'default' }: MainHeaderTitleProps) {\n  return (\n    <h1\n      className={cn(\n        'text-neutral5 text-xl font-normal gap-2 flex items-center',\n        '[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:opacity-50',\n        {\n          'bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse': isLoading,\n          'text-md': size === 'smaller',\n        },\n      )}\n    >\n      {isLoading ? <>&nbsp;</> : <>{children}</>}\n    </h1>\n  );\n}\n","import { MainHeaderColumn } from './main-header-column';\nimport { MainHeaderDescription } from './main-header-description';\nimport { MainHeaderRoot } from './main-header-root';\nimport { MainHeaderTitle } from './main-header-title';\n\nexport { type MainHeaderRootProps } from './main-header-root';\nexport { type MainHeaderTitleProps } from './main-header-title';\nexport { type MainHeaderDescriptionProps } from './main-header-description';\nexport { type MainHeaderColumnProps } from './main-header-column';\n\nexport const MainHeader = Object.assign(MainHeaderRoot, {\n  Title: MainHeaderTitle,\n  Description: MainHeaderDescription,\n  Column: MainHeaderColumn,\n});\n"],"names":["cn","jsx","Fragment","jsxs"],"mappings":"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"}