@mastra/playground-ui 51.1.0 → 51.2.0-alpha.0

package/dist/components/FormFieldBlocks.es.js

@@ -1,7 +1,7 @@
 export { F as FieldBlock } from '../field-block-B63CpA4d.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as cn } from '../cn-BakJzhuv.js';
-export { T as TextFieldBlock } from '../text-field-block-DOiM0dpY.js';
+export { T as TextFieldBlock } from '../text-field-block-Ddl2tJ6D.js';
 export { S as SearchFieldBlock } from '../search-field-block-CgrC6f9t.js';
 export { S as SelectFieldBlock } from '../select-field-block-CDklwBFe.js';
 

package/dist/components/JSONSchemaForm.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
-const textFieldBlock = require('../text-field-block-BGlwSFYC.cjs');
+const textFieldBlock = require('../text-field-block-B4CvIwKh.cjs');
 const lucideReact = require('lucide-react');
 const selectFieldBlock = require('../select-field-block-BXjwaMqJ.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');

package/dist/components/JSONSchemaForm.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { c as cn } from '../cn-BakJzhuv.js';
-import { T as TextFieldBlock } from '../text-field-block-DOiM0dpY.js';
+import { T as TextFieldBlock } from '../text-field-block-Ddl2tJ6D.js';
 import { Type, Hash, ToggleLeft, AlignLeft, Braces, List, Trash2Icon } from 'lucide-react';
 import { S as SelectFieldBlock } from '../select-field-block-CDklwBFe.js';
 import { Icon } from '../icons/Icon.es.js';

package/dist/components/LogsDataList.cjs.js

@@ -2,9 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const logsDataList = require('../logs-data-list-CEPdgKxp.cjs');
-const dataListSkeleton = require('../data-list-skeleton-dVbplSiW.cjs');
-require('react');
+const logsDataList = require('../logs-data-list-Xayqbjw4.cjs');
+const dataListSkeleton = require('../data-list-skeleton-BHBSIQHN.cjs');
 
 
 

package/dist/components/LogsDataList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/LogsDataList.es.js

@@ -1,4 +1,3 @@
-export { L as LogsDataList } from '../logs-data-list-COfm0LbS.js';
-export { D as LogsDataListSkeleton } from '../data-list-skeleton-DQp3KwVO.js';
-import 'react';
+export { L as LogsDataList } from '../logs-data-list-DRXJ89IZ.js';
+export { D as LogsDataListSkeleton } from '../data-list-skeleton-DDO_OE14.js';
 //# sourceMappingURL=LogsDataList.es.js.map

package/dist/components/LogsDataList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/SettingsRow.cjs.js

@@ -3,24 +3,45 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const index = require('../index-C-Lt4Bx_.cjs');
 const label = require('../label-B-UbxfJf.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
-function SettingsRow({ label: label$1, description, htmlFor, className, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: utils_cn.cn("flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", className),
-      "data-slot": "settings-row",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          htmlFor ? /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor, className: "text-sm font-medium", children: label$1 }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: label$1 }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 text-sm", children: description })
-        ] }),
-        children
-      ]
+const settingsRowVariants = index.cva("flex min-w-0 flex-col", {
+  variants: {
+    variant: {
+      default: "gap-3 sm:flex-row sm:items-center sm:justify-between",
+      factory: "gap-2 px-4 py-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4"
     }
-  );
+  },
+  defaultVariants: { variant: "default" }
+});
+const settingsRowLabelBlockVariants = index.cva("flex min-w-0 flex-col", {
+  variants: {
+    variant: { default: "", factory: "gap-0.5" }
+  },
+  defaultVariants: { variant: "default" }
+});
+const settingsRowLabelVariants = index.cva("", {
+  variants: {
+    variant: { default: "text-sm font-medium", factory: "text-ui-md leading-ui-md text-neutral5" }
+  },
+  defaultVariants: { variant: "default" }
+});
+const settingsRowDescriptionVariants = index.cva("flex flex-col gap-0.5", {
+  variants: {
+    variant: { default: "text-sm text-neutral3", factory: "text-ui-sm text-neutral3" }
+  },
+  defaultVariants: { variant: "default" }
+});
+function SettingsRow({ label: label$1, description, htmlFor, variant, className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn(settingsRowVariants({ variant }), className), "data-slot": "settings-row", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: settingsRowLabelBlockVariants({ variant }), children: [
+      htmlFor ? /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor, className: settingsRowLabelVariants({ variant }), children: label$1 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: settingsRowLabelVariants({ variant }), children: label$1 }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: settingsRowDescriptionVariants({ variant }), children: description })
+    ] }),
+    children
+  ] });
 }
 
 exports.SettingsRow = SettingsRow;

package/dist/components/SettingsRow.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsRow.cjs.js","sources":["../../src/ds/components/SettingsRow/settings-row.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Label } from '@/ds/components/Label/label';\nimport { cn } from '@/lib/utils';\n\nexport type SettingsRowProps = {\n  label: ReactNode;\n  description?: ReactNode;\n  htmlFor?: string;\n  className?: string;\n  children: ReactNode;\n};\n\nexport function SettingsRow({ label, description, htmlFor, className, children }: SettingsRowProps) {\n  return (\n    <div\n      className={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', className)}\n      data-slot=\"settings-row\"\n    >\n      <div>\n        {htmlFor ? (\n          <Label htmlFor={htmlFor} className=\"text-sm font-medium\">\n            {label}\n          </Label>\n        ) : (\n          <p className=\"text-sm font-medium\">{label}</p>\n        )}\n        {description && <p className=\"text-neutral3 text-sm\">{description}</p>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"names":["label","jsxs","cn","jsx","Label"],"mappings":";;;;;;;;AAYO,SAAS,YAAY,SAAEA,OAAA,EAAO,aAAa,OAAA,EAAS,SAAA,EAAW,UAAS,EAAqB;AAClG,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA,CAAG,oEAAA,EAAsE,SAAS,CAAA;AAAA,MAC7F,WAAA,EAAU,cAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,OAAA,mBACCE,cAAA,CAACC,WAAA,EAAA,EAAM,OAAA,EAAkB,SAAA,EAAU,qBAAA,EAChC,QAAA,EAAAJ,OAAA,EACH,CAAA,mBAEAG,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAAH,OAAA,EAAM,CAAA;AAAA,UAE3C,WAAA,oBAAeG,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,yBAAyB,QAAA,EAAA,WAAA,EAAY;AAAA,SAAA,EACpE,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"SettingsRow.cjs.js","sources":["../../src/ds/components/SettingsRow/settings-row.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { Label } from '@/ds/components/Label/label';\nimport { cn } from '@/lib/utils';\n\nconst settingsRowVariants = cva('flex min-w-0 flex-col', {\n  variants: {\n    variant: {\n      default: 'gap-3 sm:flex-row sm:items-center sm:justify-between',\n      factory: 'gap-2 px-4 py-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4',\n    },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst settingsRowLabelBlockVariants = cva('flex min-w-0 flex-col', {\n  variants: {\n    variant: { default: '', factory: 'gap-0.5' },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst settingsRowLabelVariants = cva('', {\n  variants: {\n    variant: { default: 'text-sm font-medium', factory: 'text-ui-md leading-ui-md text-neutral5' },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst settingsRowDescriptionVariants = cva('flex flex-col gap-0.5', {\n  variants: {\n    variant: { default: 'text-sm text-neutral3', factory: 'text-ui-sm text-neutral3' },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nexport type SettingsRowProps = {\n  label: ReactNode;\n  description?: ReactNode;\n  htmlFor?: string;\n  className?: string;\n  children?: ReactNode;\n} & VariantProps<typeof settingsRowVariants>;\n\nexport function SettingsRow({ label, description, htmlFor, variant, className, children }: SettingsRowProps) {\n  return (\n    <div className={cn(settingsRowVariants({ variant }), className)} data-slot=\"settings-row\">\n      <div className={settingsRowLabelBlockVariants({ variant })}>\n        {htmlFor ? (\n          <Label htmlFor={htmlFor} className={settingsRowLabelVariants({ variant })}>\n            {label}\n          </Label>\n        ) : (\n          <span className={settingsRowLabelVariants({ variant })}>{label}</span>\n        )}\n        {description && <div className={settingsRowDescriptionVariants({ variant })}>{description}</div>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"names":["cva","label","jsxs","cn","Label","jsx"],"mappings":";;;;;;;;;AAMA,MAAM,mBAAA,GAAsBA,UAAI,uBAAA,EAAyB;AAAA,EACvD,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,sDAAA;AAAA,MACT,OAAA,EAAS;AAAA;AACX,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAC9B,CAAC,CAAA;AAED,MAAM,6BAAA,GAAgCA,UAAI,uBAAA,EAAyB;AAAA,EACjE,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,EAAE,OAAA,EAAS,EAAA,EAAI,SAAS,SAAA;AAAU,GAC7C;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAC9B,CAAC,CAAA;AAED,MAAM,wBAAA,GAA2BA,UAAI,EAAA,EAAI;AAAA,EACvC,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,EAAE,OAAA,EAAS,qBAAA,EAAuB,SAAS,wCAAA;AAAyC,GAC/F;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAC9B,CAAC,CAAA;AAED,MAAM,8BAAA,GAAiCA,UAAI,uBAAA,EAAyB;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,EAAE,OAAA,EAAS,uBAAA,EAAyB,SAAS,0BAAA;AAA2B,GACnF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAC9B,CAAC,CAAA;AAUM,SAAS,WAAA,CAAY,SAAEC,OAAA,EAAO,WAAA,EAAa,SAAS,OAAA,EAAS,SAAA,EAAW,UAAS,EAAqB;AAC3G,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,WAAA,CAAG,mBAAA,CAAoB,EAAE,OAAA,EAAS,CAAA,EAAG,SAAS,CAAA,EAAG,WAAA,EAAU,cAAA,EACzE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,SAAI,SAAA,EAAW,6BAAA,CAA8B,EAAE,OAAA,EAAS,CAAA,EACtD,QAAA,EAAA;AAAA,MAAA,OAAA,kCACEE,WAAA,EAAA,EAAM,OAAA,EAAkB,WAAW,wBAAA,CAAyB,EAAE,SAAS,CAAA,EACrE,mBACH,CAAA,mBAEAC,cAAA,CAAC,UAAK,SAAA,EAAW,wBAAA,CAAyB,EAAE,OAAA,EAAS,GAAI,QAAA,EAAAJ,OAAA,EAAM,CAAA;AAAA,MAEhE,WAAA,mCAAgB,KAAA,EAAA,EAAI,SAAA,EAAW,+BAA+B,EAAE,OAAA,EAAS,CAAA,EAAI,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAC5F,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/SettingsRow.es.js

@@ -1,22 +1,43 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as cva } from '../index-CSm06eOE.js';
 import { L as Label } from '../label-WtU3xT6v.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
-function SettingsRow({ label, description, htmlFor, className, children }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn("flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", className),
-      "data-slot": "settings-row",
-      children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          htmlFor ? /* @__PURE__ */ jsx(Label, { htmlFor, className: "text-sm font-medium", children: label }) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: label }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-neutral3 text-sm", children: description })
-        ] }),
-        children
-      ]
+const settingsRowVariants = cva("flex min-w-0 flex-col", {
+  variants: {
+    variant: {
+      default: "gap-3 sm:flex-row sm:items-center sm:justify-between",
+      factory: "gap-2 px-4 py-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4"
     }
-  );
+  },
+  defaultVariants: { variant: "default" }
+});
+const settingsRowLabelBlockVariants = cva("flex min-w-0 flex-col", {
+  variants: {
+    variant: { default: "", factory: "gap-0.5" }
+  },
+  defaultVariants: { variant: "default" }
+});
+const settingsRowLabelVariants = cva("", {
+  variants: {
+    variant: { default: "text-sm font-medium", factory: "text-ui-md leading-ui-md text-neutral5" }
+  },
+  defaultVariants: { variant: "default" }
+});
+const settingsRowDescriptionVariants = cva("flex flex-col gap-0.5", {
+  variants: {
+    variant: { default: "text-sm text-neutral3", factory: "text-ui-sm text-neutral3" }
+  },
+  defaultVariants: { variant: "default" }
+});
+function SettingsRow({ label, description, htmlFor, variant, className, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(settingsRowVariants({ variant }), className), "data-slot": "settings-row", children: [
+    /* @__PURE__ */ jsxs("div", { className: settingsRowLabelBlockVariants({ variant }), children: [
+      htmlFor ? /* @__PURE__ */ jsx(Label, { htmlFor, className: settingsRowLabelVariants({ variant }), children: label }) : /* @__PURE__ */ jsx("span", { className: settingsRowLabelVariants({ variant }), children: label }),
+      description && /* @__PURE__ */ jsx("div", { className: settingsRowDescriptionVariants({ variant }), children: description })
+    ] }),
+    children
+  ] });
 }
 
 export { SettingsRow };

package/dist/components/SettingsRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsRow.es.js","sources":["../../src/ds/components/SettingsRow/settings-row.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Label } from '@/ds/components/Label/label';\nimport { cn } from '@/lib/utils';\n\nexport type SettingsRowProps = {\n  label: ReactNode;\n  description?: ReactNode;\n  htmlFor?: string;\n  className?: string;\n  children: ReactNode;\n};\n\nexport function SettingsRow({ label, description, htmlFor, className, children }: SettingsRowProps) {\n  return (\n    <div\n      className={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', className)}\n      data-slot=\"settings-row\"\n    >\n      <div>\n        {htmlFor ? (\n          <Label htmlFor={htmlFor} className=\"text-sm font-medium\">\n            {label}\n          </Label>\n        ) : (\n          <p className=\"text-sm font-medium\">{label}</p>\n        )}\n        {description && <p className=\"text-neutral3 text-sm\">{description}</p>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,YAAY,EAAE,KAAA,EAAO,aAAa,OAAA,EAAS,SAAA,EAAW,UAAS,EAAqB;AAClG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,oEAAA,EAAsE,SAAS,CAAA;AAAA,MAC7F,WAAA,EAAU,cAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,OAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAM,OAAA,EAAkB,SAAA,EAAU,qBAAA,EAChC,QAAA,EAAA,KAAA,EACH,CAAA,mBAEA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAE3C,WAAA,oBAAe,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,yBAAyB,QAAA,EAAA,WAAA,EAAY;AAAA,SAAA,EACpE,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"SettingsRow.es.js","sources":["../../src/ds/components/SettingsRow/settings-row.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { Label } from '@/ds/components/Label/label';\nimport { cn } from '@/lib/utils';\n\nconst settingsRowVariants = cva('flex min-w-0 flex-col', {\n  variants: {\n    variant: {\n      default: 'gap-3 sm:flex-row sm:items-center sm:justify-between',\n      factory: 'gap-2 px-4 py-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4',\n    },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst settingsRowLabelBlockVariants = cva('flex min-w-0 flex-col', {\n  variants: {\n    variant: { default: '', factory: 'gap-0.5' },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst settingsRowLabelVariants = cva('', {\n  variants: {\n    variant: { default: 'text-sm font-medium', factory: 'text-ui-md leading-ui-md text-neutral5' },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst settingsRowDescriptionVariants = cva('flex flex-col gap-0.5', {\n  variants: {\n    variant: { default: 'text-sm text-neutral3', factory: 'text-ui-sm text-neutral3' },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nexport type SettingsRowProps = {\n  label: ReactNode;\n  description?: ReactNode;\n  htmlFor?: string;\n  className?: string;\n  children?: ReactNode;\n} & VariantProps<typeof settingsRowVariants>;\n\nexport function SettingsRow({ label, description, htmlFor, variant, className, children }: SettingsRowProps) {\n  return (\n    <div className={cn(settingsRowVariants({ variant }), className)} data-slot=\"settings-row\">\n      <div className={settingsRowLabelBlockVariants({ variant })}>\n        {htmlFor ? (\n          <Label htmlFor={htmlFor} className={settingsRowLabelVariants({ variant })}>\n            {label}\n          </Label>\n        ) : (\n          <span className={settingsRowLabelVariants({ variant })}>{label}</span>\n        )}\n        {description && <div className={settingsRowDescriptionVariants({ variant })}>{description}</div>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMA,MAAM,mBAAA,GAAsB,IAAI,uBAAA,EAAyB;AAAA,EACvD,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,sDAAA;AAAA,MACT,OAAA,EAAS;AAAA;AACX,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAC9B,CAAC,CAAA;AAED,MAAM,6BAAA,GAAgC,IAAI,uBAAA,EAAyB;AAAA,EACjE,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,EAAE,OAAA,EAAS,EAAA,EAAI,SAAS,SAAA;AAAU,GAC7C;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAC9B,CAAC,CAAA;AAED,MAAM,wBAAA,GAA2B,IAAI,EAAA,EAAI;AAAA,EACvC,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,EAAE,OAAA,EAAS,qBAAA,EAAuB,SAAS,wCAAA;AAAyC,GAC/F;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAC9B,CAAC,CAAA;AAED,MAAM,8BAAA,GAAiC,IAAI,uBAAA,EAAyB;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,EAAE,OAAA,EAAS,uBAAA,EAAyB,SAAS,0BAAA;AAA2B,GACnF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAC9B,CAAC,CAAA;AAUM,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,WAAA,EAAa,SAAS,OAAA,EAAS,SAAA,EAAW,UAAS,EAAqB;AAC3G,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,OAAA,EAAS,CAAA,EAAG,SAAS,CAAA,EAAG,WAAA,EAAU,cAAA,EACzE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,SAAI,SAAA,EAAW,6BAAA,CAA8B,EAAE,OAAA,EAAS,CAAA,EACtD,QAAA,EAAA;AAAA,MAAA,OAAA,uBACE,KAAA,EAAA,EAAM,OAAA,EAAkB,WAAW,wBAAA,CAAyB,EAAE,SAAS,CAAA,EACrE,iBACH,CAAA,mBAEA,GAAA,CAAC,UAAK,SAAA,EAAW,wBAAA,CAAyB,EAAE,OAAA,EAAS,GAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAEhE,WAAA,wBAAgB,KAAA,EAAA,EAAI,SAAA,EAAW,+BAA+B,EAAE,OAAA,EAAS,CAAA,EAAI,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAC5F,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/{data-list-CfsEAR2E.js → data-list-BOI8fRuk.js}

@@ -1,4 +1,4 @@
-import { u as useDataListRowWrapperContext, p as dataListRowVariants, q as dataListRowStaticStyles, D as DataListRoot, c as DataListNextPageLoading, g as DataListSpacer, f as DataListNoMatch, r as DataListTopSelectCell, s as DataListSelectCell, d as DataListTimeCell, e as DataListDateCell, b as DataListMonoCell, t as DataListNumberCell, v as DataListRowHeaderCell, o as DataListIdCell, w as DataListDescriptionCell, x as DataListNameCell, y as DataListTextCell, a as DataListCell, h as DataListRowLink, i as DataListRowButton, j as DataListRowWrapper, k as DataListTopCellSmart, l as DataListTopCellWithTooltip, m as DataListTopCell, n as DataListTop } from './data-list-top-cell-DZiX9cTb.js';
+import { u as useDataListRowWrapperContext, q as dataListRowVariants, r as dataListRowStaticStyles, D as DataListRoot, c as DataListNextPageLoading, h as DataListSpacer, g as DataListNoMatch, s as DataListTopSelectCell, t as DataListSelectCell, e as DataListTimeCell, f as DataListDateCell, v as DataListNumberCell, w as DataListRowHeaderCell, p as DataListIdCell, x as DataListDescriptionCell, y as DataListNameCell, b as DataListTextCell, z as DataListActionsCell, a as DataListCell, i as DataListRowLink, j as DataListRowButton, k as DataListRowWrapper, l as DataListTopCellSmart, m as DataListTopCellWithTooltip, n as DataListTopCell, o as DataListTop } from './data-list-top-cell-CC5jjv5s.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
 import { B as Button } from './Button-vr_I4iME.js';
@@ -26,7 +26,7 @@ function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
 }
 
 const DataListRowStatic = forwardRef(
-  ({ children, className, flushLeft, flushRight, colStart, colEnd, featured, variant, style, ...rest }, ref) => {
+  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {
     const isWrapped = useDataListRowWrapperContext();
     const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
     const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
@@ -36,11 +36,9 @@ const DataListRowStatic = forwardRef(
         ref,
         className: cn(
           isWrapped ? "grid grid-cols-subgrid gap-8 rounded-lg px-5 transition-colors duration-200" : dataListRowStaticStyles,
-          !isWrapped && flushLeft && "ml-0!",
-          !isWrapped && flushRight && "mr-0!",
           // `!` so the selection fill wins over borderless table root styling
           // (higher-specificity descendant rules); same color in `default`.
-          featured && "bg-surface4!",
+          featured && "bg-surface-row-featured!",
           dataListRowVariants({ variant }),
           className
         ),
@@ -60,8 +58,8 @@ const DataListSubheader = forwardRef(
       {
         ref,
         className: cn(
-          "data-list-subheader relative isolate col-span-full mx-1 border-none px-4 py-3 text-ui-md font-medium text-neutral4",
-          "before:absolute before:inset-x-0 before:inset-y-1 before:-z-1 before:rounded-md before:bg-surface4",
+          "relative isolate col-span-full mt-2 border-none px-5 py-3 text-ui-md font-medium text-neutral4",
+          "before:absolute before:inset-0 before:-z-1 before:rounded-lg before:bg-[var(--data-list-sticky-header-background)]",
           className
         ),
         ...rest,
@@ -108,13 +106,13 @@ const DataList = Object.assign(DataListRoot, {
   RowLink: DataListRowLink,
   RowStatic: DataListRowStatic,
   Cell: DataListCell,
+  ActionsCell: DataListActionsCell,
   TextCell: DataListTextCell,
   NameCell: DataListNameCell,
   DescriptionCell: DataListDescriptionCell,
   IdCell: DataListIdCell,
   RowHeaderCell: DataListRowHeaderCell,
   NumberCell: DataListNumberCell,
-  MonoCell: DataListMonoCell,
   DateCell: DataListDateCell,
   TimeCell: DataListTimeCell,
   SelectCell: DataListSelectCell,
@@ -128,4 +126,4 @@ const DataList = Object.assign(DataListRoot, {
 });
 
 export { DataList as D, DataListSubHeading as a, DataListSubheader as b };
-//# sourceMappingURL=data-list-CfsEAR2E.js.map
+//# sourceMappingURL=data-list-BOI8fRuk.js.map

package/dist/data-list-BOI8fRuk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-BOI8fRuk.js","sources":["../src/ds/components/DataList/data-list-pagination.tsx","../src/ds/components/DataList/data-list-row-static.tsx","../src/ds/components/DataList/data-list-subheader.tsx","../src/ds/components/DataList/data-list-subheading.tsx","../src/ds/components/DataList/data-list-top-cells.tsx","../src/ds/components/DataList/data-list.tsx"],"sourcesContent":["import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport type DataListPaginationProps = {\n  currentPage?: number;\n  hasMore?: boolean;\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n};\n\nexport function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }: DataListPaginationProps) {\n  const showNavigation = (typeof currentPage === 'number' && currentPage > 0) || hasMore;\n\n  return (\n    <div className=\"text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-8 py-4\">\n      <span>\n        Page <b>{currentPage ? currentPage + 1 : '1'}</b>\n      </span>\n      {showNavigation && (\n        <div className=\"flex gap-4\">\n          {typeof currentPage === 'number' && currentPage > 0 && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onPrevPage}>\n              <ArrowLeftIcon />\n              Previous\n            </Button>\n          )}\n          {hasMore && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onNextPage}>\n              Next\n              <ArrowRightIcon />\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useDataListRowWrapperContext } from './data-list-row-wrapper-context';\nimport { dataListRowStaticStyles, dataListRowVariants } from './shared';\nimport type { DataListRowSharedProps } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type DataListRowStaticProps = ComponentPropsWithoutRef<'div'> & DataListRowSharedProps;\n\n/**\n * Non-interactive row. Use when a row should *display* like a regular row but\n * has no link target or click handler\n */\nexport const DataListRowStatic = forwardRef<HTMLDivElement, DataListRowStaticProps>(\n  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {\n    const isWrapped = useDataListRowWrapperContext();\n    const hasColumnOverride = colStart !== undefined || colEnd !== undefined;\n    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          isWrapped\n            ? 'grid grid-cols-subgrid gap-8 rounded-lg px-5 transition-colors duration-200'\n            : dataListRowStaticStyles,\n          // `!` so the selection fill wins over borderless table root styling\n          // (higher-specificity descendant rules); same color in `default`.\n          featured && 'bg-surface-row-featured!',\n          dataListRowVariants({ variant }),\n          className,\n        )}\n        style={resolvedStyle}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListRowStatic.displayName = 'DataListRowStatic';\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubheaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const DataListSubheader = forwardRef<HTMLDivElement, DataListSubheaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative isolate col-span-full mt-2 border-none px-5 py-3 text-ui-md font-medium text-neutral4',\n          'before:absolute before:inset-0 before:-z-1 before:rounded-lg before:bg-[var(--data-list-sticky-header-background)]',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListSubheader.displayName = 'DataListSubheader';\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubHeadingProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function DataListSubHeading({ children, className }: DataListSubHeadingProps) {\n  return <span className={cn('text-ui-sm font-normal text-neutral2', className)}>{children}</span>;\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListTopCellsProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * Drop the group's default left margin. Use when this sits as the second\n   * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that\n   * owns the leading column.\n   */\n  flushLeft?: boolean;\n  /**\n   * Place the group starting at this column line, spanning through to the\n   * last column. Defaults to the full grid (`col-span-full`). Use when this\n   * sits beside a leading cell that owns column 1.\n   */\n  colStart?: number;\n};\n\n/**\n * Non-interactive header equivalent of `DataList.RowButton`. Groups a set of\n * `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as\n * `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the\n * columns inside a wrapped `Row`.\n */\nexport const DataListTopCells = forwardRef<HTMLDivElement, DataListTopCellsProps>(\n  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'pointer-events-none grid grid-cols-subgrid gap-8 px-5 [&>*]:pointer-events-auto',\n          !colStart && 'col-span-full',\n          flushLeft && 'pl-0!',\n          className,\n        )}\n        style={colStart ? { ...style, gridColumn: `${colStart} / -1` } : style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListTopCells.displayName = 'DataListTopCells';\n","import {\n  DataListActionsCell,\n  DataListCell,\n  DataListTextCell,\n  DataListNameCell,\n  DataListDescriptionCell,\n  DataListIdCell,\n  DataListRowHeaderCell,\n  DataListNumberCell,\n  DataListSelectCell,\n  DataListDateCell,\n  DataListTimeCell,\n} from './data-list-cells';\nimport { DataListNextPageLoading } from './data-list-next-page-loading';\nimport { DataListNoMatch } from './data-list-no-match';\nimport { DataListPagination } from './data-list-pagination';\nimport { DataListRoot } from './data-list-root';\nimport { DataListRowButton } from './data-list-row-button';\nimport { DataListRowLink } from './data-list-row-link';\nimport { DataListRowStatic } from './data-list-row-static';\nimport { DataListRowWrapper } from './data-list-row-wrapper';\nimport { DataListSpacer } from './data-list-spacer';\nimport { DataListSubheader } from './data-list-subheader';\nimport { DataListSubHeading } from './data-list-subheading';\nimport { DataListTop } from './data-list-top';\nimport {\n  DataListTopCell,\n  DataListTopCellWithTooltip,\n  DataListTopCellSmart,\n  DataListTopSelectCell,\n} from './data-list-top-cell';\nimport { DataListTopCells } from './data-list-top-cells';\n\nexport type { DataListRootProps, DataListStickyHeaderBackground, DataListVariant } from './data-list-root';\n\nexport const DataList = Object.assign(DataListRoot, {\n  Top: DataListTop,\n  TopCells: DataListTopCells,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  TopCellSmart: DataListTopCellSmart,\n  RowWrapper: DataListRowWrapper,\n  RowButton: DataListRowButton,\n  RowLink: DataListRowLink,\n  RowStatic: DataListRowStatic,\n  Cell: DataListCell,\n  ActionsCell: DataListActionsCell,\n  TextCell: DataListTextCell,\n  NameCell: DataListNameCell,\n  DescriptionCell: DataListDescriptionCell,\n  IdCell: DataListIdCell,\n  RowHeaderCell: DataListRowHeaderCell,\n  NumberCell: DataListNumberCell,\n  DateCell: DataListDateCell,\n  TimeCell: DataListTimeCell,\n  SelectCell: DataListSelectCell,\n  TopSelectCell: DataListTopSelectCell,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  NextPageLoading: DataListNextPageLoading,\n  Pagination: DataListPagination,\n});\n"],"names":[],"mappings":"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"}

package/dist/{data-list-BK_lJxMN.cjs → data-list-CCacNODd.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const dataListTopCell = require('./data-list-top-cell-DyBSefIr.cjs');
+const dataListTopCell = require('./data-list-top-cell-BOXO5s7I.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const Button = require('./Button-DA5XLUon.cjs');
@@ -28,7 +28,7 @@ function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
 }
 
 const DataListRowStatic = React.forwardRef(
-  ({ children, className, flushLeft, flushRight, colStart, colEnd, featured, variant, style, ...rest }, ref) => {
+  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {
     const isWrapped = dataListTopCell.useDataListRowWrapperContext();
     const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
     const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
@@ -38,11 +38,9 @@ const DataListRowStatic = React.forwardRef(
         ref,
         className: utils_cn.cn(
           isWrapped ? "grid grid-cols-subgrid gap-8 rounded-lg px-5 transition-colors duration-200" : dataListTopCell.dataListRowStaticStyles,
-          !isWrapped && flushLeft && "ml-0!",
-          !isWrapped && flushRight && "mr-0!",
           // `!` so the selection fill wins over borderless table root styling
           // (higher-specificity descendant rules); same color in `default`.
-          featured && "bg-surface4!",
+          featured && "bg-surface-row-featured!",
           dataListTopCell.dataListRowVariants({ variant }),
           className
         ),
@@ -62,8 +60,8 @@ const DataListSubheader = React.forwardRef(
       {
         ref,
         className: utils_cn.cn(
-          "data-list-subheader relative isolate col-span-full mx-1 border-none px-4 py-3 text-ui-md font-medium text-neutral4",
-          "before:absolute before:inset-x-0 before:inset-y-1 before:-z-1 before:rounded-md before:bg-surface4",
+          "relative isolate col-span-full mt-2 border-none px-5 py-3 text-ui-md font-medium text-neutral4",
+          "before:absolute before:inset-0 before:-z-1 before:rounded-lg before:bg-[var(--data-list-sticky-header-background)]",
           className
         ),
         ...rest,
@@ -110,13 +108,13 @@ const DataList = Object.assign(dataListTopCell.DataListRoot, {
   RowLink: dataListTopCell.DataListRowLink,
   RowStatic: DataListRowStatic,
   Cell: dataListTopCell.DataListCell,
+  ActionsCell: dataListTopCell.DataListActionsCell,
   TextCell: dataListTopCell.DataListTextCell,
   NameCell: dataListTopCell.DataListNameCell,
   DescriptionCell: dataListTopCell.DataListDescriptionCell,
   IdCell: dataListTopCell.DataListIdCell,
   RowHeaderCell: dataListTopCell.DataListRowHeaderCell,
   NumberCell: dataListTopCell.DataListNumberCell,
-  MonoCell: dataListTopCell.DataListMonoCell,
   DateCell: dataListTopCell.DataListDateCell,
   TimeCell: dataListTopCell.DataListTimeCell,
   SelectCell: dataListTopCell.DataListSelectCell,
@@ -132,4 +130,4 @@ const DataList = Object.assign(dataListTopCell.DataListRoot, {
 exports.DataList = DataList;
 exports.DataListSubHeading = DataListSubHeading;
 exports.DataListSubheader = DataListSubheader;
-//# sourceMappingURL=data-list-BK_lJxMN.cjs.map
+//# sourceMappingURL=data-list-CCacNODd.cjs.map

package/dist/data-list-CCacNODd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-CCacNODd.cjs","sources":["../src/ds/components/DataList/data-list-pagination.tsx","../src/ds/components/DataList/data-list-row-static.tsx","../src/ds/components/DataList/data-list-subheader.tsx","../src/ds/components/DataList/data-list-subheading.tsx","../src/ds/components/DataList/data-list-top-cells.tsx","../src/ds/components/DataList/data-list.tsx"],"sourcesContent":["import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport type DataListPaginationProps = {\n  currentPage?: number;\n  hasMore?: boolean;\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n};\n\nexport function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }: DataListPaginationProps) {\n  const showNavigation = (typeof currentPage === 'number' && currentPage > 0) || hasMore;\n\n  return (\n    <div className=\"text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-8 py-4\">\n      <span>\n        Page <b>{currentPage ? currentPage + 1 : '1'}</b>\n      </span>\n      {showNavigation && (\n        <div className=\"flex gap-4\">\n          {typeof currentPage === 'number' && currentPage > 0 && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onPrevPage}>\n              <ArrowLeftIcon />\n              Previous\n            </Button>\n          )}\n          {hasMore && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onNextPage}>\n              Next\n              <ArrowRightIcon />\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useDataListRowWrapperContext } from './data-list-row-wrapper-context';\nimport { dataListRowStaticStyles, dataListRowVariants } from './shared';\nimport type { DataListRowSharedProps } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type DataListRowStaticProps = ComponentPropsWithoutRef<'div'> & DataListRowSharedProps;\n\n/**\n * Non-interactive row. Use when a row should *display* like a regular row but\n * has no link target or click handler\n */\nexport const DataListRowStatic = forwardRef<HTMLDivElement, DataListRowStaticProps>(\n  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {\n    const isWrapped = useDataListRowWrapperContext();\n    const hasColumnOverride = colStart !== undefined || colEnd !== undefined;\n    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          isWrapped\n            ? 'grid grid-cols-subgrid gap-8 rounded-lg px-5 transition-colors duration-200'\n            : dataListRowStaticStyles,\n          // `!` so the selection fill wins over borderless table root styling\n          // (higher-specificity descendant rules); same color in `default`.\n          featured && 'bg-surface-row-featured!',\n          dataListRowVariants({ variant }),\n          className,\n        )}\n        style={resolvedStyle}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListRowStatic.displayName = 'DataListRowStatic';\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubheaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const DataListSubheader = forwardRef<HTMLDivElement, DataListSubheaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative isolate col-span-full mt-2 border-none px-5 py-3 text-ui-md font-medium text-neutral4',\n          'before:absolute before:inset-0 before:-z-1 before:rounded-lg before:bg-[var(--data-list-sticky-header-background)]',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListSubheader.displayName = 'DataListSubheader';\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubHeadingProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function DataListSubHeading({ children, className }: DataListSubHeadingProps) {\n  return <span className={cn('text-ui-sm font-normal text-neutral2', className)}>{children}</span>;\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListTopCellsProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * Drop the group's default left margin. Use when this sits as the second\n   * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that\n   * owns the leading column.\n   */\n  flushLeft?: boolean;\n  /**\n   * Place the group starting at this column line, spanning through to the\n   * last column. Defaults to the full grid (`col-span-full`). Use when this\n   * sits beside a leading cell that owns column 1.\n   */\n  colStart?: number;\n};\n\n/**\n * Non-interactive header equivalent of `DataList.RowButton`. Groups a set of\n * `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as\n * `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the\n * columns inside a wrapped `Row`.\n */\nexport const DataListTopCells = forwardRef<HTMLDivElement, DataListTopCellsProps>(\n  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'pointer-events-none grid grid-cols-subgrid gap-8 px-5 [&>*]:pointer-events-auto',\n          !colStart && 'col-span-full',\n          flushLeft && 'pl-0!',\n          className,\n        )}\n        style={colStart ? { ...style, gridColumn: `${colStart} / -1` } : style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListTopCells.displayName = 'DataListTopCells';\n","import {\n  DataListActionsCell,\n  DataListCell,\n  DataListTextCell,\n  DataListNameCell,\n  DataListDescriptionCell,\n  DataListIdCell,\n  DataListRowHeaderCell,\n  DataListNumberCell,\n  DataListSelectCell,\n  DataListDateCell,\n  DataListTimeCell,\n} from './data-list-cells';\nimport { DataListNextPageLoading } from './data-list-next-page-loading';\nimport { DataListNoMatch } from './data-list-no-match';\nimport { DataListPagination } from './data-list-pagination';\nimport { DataListRoot } from './data-list-root';\nimport { DataListRowButton } from './data-list-row-button';\nimport { DataListRowLink } from './data-list-row-link';\nimport { DataListRowStatic } from './data-list-row-static';\nimport { DataListRowWrapper } from './data-list-row-wrapper';\nimport { DataListSpacer } from './data-list-spacer';\nimport { DataListSubheader } from './data-list-subheader';\nimport { DataListSubHeading } from './data-list-subheading';\nimport { DataListTop } from './data-list-top';\nimport {\n  DataListTopCell,\n  DataListTopCellWithTooltip,\n  DataListTopCellSmart,\n  DataListTopSelectCell,\n} from './data-list-top-cell';\nimport { DataListTopCells } from './data-list-top-cells';\n\nexport type { DataListRootProps, DataListStickyHeaderBackground, DataListVariant } from './data-list-root';\n\nexport const DataList = Object.assign(DataListRoot, {\n  Top: DataListTop,\n  TopCells: DataListTopCells,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  TopCellSmart: DataListTopCellSmart,\n  RowWrapper: DataListRowWrapper,\n  RowButton: DataListRowButton,\n  RowLink: DataListRowLink,\n  RowStatic: DataListRowStatic,\n  Cell: DataListCell,\n  ActionsCell: DataListActionsCell,\n  TextCell: DataListTextCell,\n  NameCell: DataListNameCell,\n  DescriptionCell: DataListDescriptionCell,\n  IdCell: DataListIdCell,\n  RowHeaderCell: DataListRowHeaderCell,\n  NumberCell: DataListNumberCell,\n  DateCell: DataListDateCell,\n  TimeCell: DataListTimeCell,\n  SelectCell: DataListSelectCell,\n  TopSelectCell: DataListTopSelectCell,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  NextPageLoading: DataListNextPageLoading,\n  Pagination: DataListPagination,\n});\n"],"names":["jsxs","jsx","Button","ArrowLeftIcon","ArrowRightIcon","forwardRef","useDataListRowWrapperContext","cn","dataListRowStaticStyles","dataListRowVariants","DataListRoot","DataListTop","DataListTopCell","DataListTopCellWithTooltip","DataListTopCellSmart","DataListRowWrapper","DataListRowButton","DataListRowLink","DataListCell","DataListActionsCell","DataListTextCell","DataListNameCell","DataListDescriptionCell","DataListIdCell","DataListRowHeaderCell","DataListNumberCell","DataListDateCell","DataListTimeCell","DataListSelectCell","DataListTopSelectCell","DataListNoMatch","DataListSpacer","DataListNextPageLoading"],"mappings":"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"}

package/dist/{data-list-skeleton-dVbplSiW.cjs → data-list-skeleton-BHBSIQHN.cjs}

@@ -1,7 +1,8 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
-const dataListTopCell = require('./data-list-top-cell-DyBSefIr.cjs');
+const dataListTopCell = require('./data-list-top-cell-BOXO5s7I.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
 
 const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
 function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3, fit }) {
@@ -15,11 +16,14 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3, fi
   return /* @__PURE__ */ jsxRuntime.jsx(dataListTopCell.DataListRoot, { columns: skeletonColumns, fit, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "data-list-row border-b-border1 3xl:gap-14 col-span-full grid grid-cols-subgrid gap-6 rounded-lg border-y border-t-transparent px-5 transition-colors duration-200 lg:gap-8 xl:gap-10 2xl:gap-12",
+      className: utils_cn.cn(
+        "grid grid-cols-subgrid gap-6 px-5 2xl:gap-12 3xl:gap-14 lg:gap-8 xl:gap-10",
+        ...dataListTopCell.dataListRowOuterStyles
+      ),
       children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(dataListTopCell.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "bg-surface4 h-4 animate-pulse rounded-md text-transparent select-none",
+          className: "bg-surface6 h-4 animate-pulse rounded-lg text-transparent select-none",
           style: { width: getPseudoRandomWidth(rowIdx, colIdx) }
         }
       ) }, colIdx))
@@ -29,4 +33,4 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3, fi
 }
 
 exports.DataListSkeleton = DataListSkeleton;
-//# sourceMappingURL=data-list-skeleton-dVbplSiW.cjs.map
+//# sourceMappingURL=data-list-skeleton-BHBSIQHN.cjs.map

package/dist/data-list-skeleton-BHBSIQHN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-skeleton-BHBSIQHN.cjs","sources":["../src/ds/components/DataList/data-list-skeleton.tsx"],"sourcesContent":["import { DataListCell } from './data-list-cells';\nimport { DataListRoot } from './data-list-root';\nimport type { DataListFit } from './data-list-root';\nimport { dataListRowOuterStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nconst widths = ['75%', '50%', '65%', '90%', '60%', '80%'];\n\nexport type DataListSkeletonProps = {\n  columns?: string;\n  numberOfRows?: number;\n  fit?: DataListFit;\n};\n\nexport function DataListSkeleton({ columns = 'auto 1fr auto auto', numberOfRows = 3, fit }: DataListSkeletonProps) {\n  const columnParts = columns.trim().split(/\\s+/);\n  const columnCount = columnParts.length;\n  const skeletonColumns = columnParts.map(col => (col === 'auto' ? 'minmax(6rem, auto)' : col)).join(' ');\n\n  const getPseudoRandomWidth = (rowIdx: number, colIdx: number) => {\n    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;\n    return widths[index];\n  };\n\n  return (\n    <DataListRoot columns={skeletonColumns} fit={fit}>\n      {Array.from({ length: numberOfRows }).map((_, rowIdx) => (\n        <div\n          key={rowIdx}\n          className={cn(\n            'grid grid-cols-subgrid gap-6 px-5 2xl:gap-12 3xl:gap-14 lg:gap-8 xl:gap-10',\n            ...dataListRowOuterStyles,\n          )}\n        >\n          {Array.from({ length: columnCount }).map((_, colIdx) => (\n            <DataListCell key={colIdx}>\n              <div\n                className=\"bg-surface6 h-4 animate-pulse rounded-lg text-transparent select-none\"\n                style={{ width: getPseudoRandomWidth(rowIdx, colIdx) }}\n              />\n            </DataListCell>\n          ))}\n        </div>\n      ))}\n    </DataListRoot>\n  );\n}\n"],"names":["jsx","DataListRoot","cn","dataListRowOuterStyles","_","DataListCell"],"mappings":";;;;;;AAMA,MAAM,SAAS,CAAC,KAAA,EAAO,OAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AAQjD,SAAS,iBAAiB,EAAE,OAAA,GAAU,sBAAsB,YAAA,GAAe,CAAA,EAAG,KAAI,EAA0B;AACjH,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA;AAC9C,EAAA,MAAM,cAAc,WAAA,CAAY,MAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,GAAA,CAAI,CAAA,GAAA,KAAQ,GAAA,KAAQ,SAAS,oBAAA,GAAuB,GAAI,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEtG,EAAA,MAAM,oBAAA,GAAuB,CAAC,MAAA,EAAgB,MAAA,KAAmB;AAC/D,IAAA,MAAM,KAAA,GAAA,CAAS,MAAA,GAAS,MAAA,GAAS,WAAA,GAAc,gBAAgB,MAAA,CAAO,MAAA;AACtE,IAAA,OAAO,OAAO,KAAK,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,uBACEA,cAAA,CAACC,4BAAA,EAAA,EAAa,OAAA,EAAS,eAAA,EAAiB,KACrC,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,cAAc,CAAA,CAAE,GAAA,CAAI,CAAC,GAAG,MAAA,qBAC5CD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,SAAA,EAAWE,WAAA;AAAA,QACT,4EAAA;AAAA,QACA,GAAGC;AAAA,OACL;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAACC,EAAAA,EAAG,MAAA,qBAC3CJ,cAAA,CAACK,4BAAA,EAAA,EACC,QAAA,kBAAAL,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,uEAAA;AAAA,UACV,OAAO,EAAE,KAAA,EAAO,oBAAA,CAAqB,MAAA,EAAQ,MAAM,CAAA;AAAE;AAAA,OACvD,EAAA,EAJiB,MAKnB,CACD;AAAA,KAAA;AAAA,IAbI;AAAA,GAeR,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/{data-list-skeleton-DQp3KwVO.js → data-list-skeleton-DDO_OE14.js}

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { D as DataListRoot, a as DataListCell } from './data-list-top-cell-DZiX9cTb.js';
+import { D as DataListRoot, a as DataListCell, d as dataListRowOuterStyles } from './data-list-top-cell-CC5jjv5s.js';
+import { c as cn } from './cn-BakJzhuv.js';
 
 const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
 function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3, fit }) {
@@ -13,11 +14,14 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3, fi
   return /* @__PURE__ */ jsx(DataListRoot, { columns: skeletonColumns, fit, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: "data-list-row border-b-border1 3xl:gap-14 col-span-full grid grid-cols-subgrid gap-6 rounded-lg border-y border-t-transparent px-5 transition-colors duration-200 lg:gap-8 xl:gap-10 2xl:gap-12",
+      className: cn(
+        "grid grid-cols-subgrid gap-6 px-5 2xl:gap-12 3xl:gap-14 lg:gap-8 xl:gap-10",
+        ...dataListRowOuterStyles
+      ),
       children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsx(DataListCell, { children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "bg-surface4 h-4 animate-pulse rounded-md text-transparent select-none",
+          className: "bg-surface6 h-4 animate-pulse rounded-lg text-transparent select-none",
           style: { width: getPseudoRandomWidth(rowIdx, colIdx) }
         }
       ) }, colIdx))
@@ -27,4 +31,4 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3, fi
 }
 
 export { DataListSkeleton as D };
-//# sourceMappingURL=data-list-skeleton-DQp3KwVO.js.map
+//# sourceMappingURL=data-list-skeleton-DDO_OE14.js.map

package/dist/data-list-skeleton-DDO_OE14.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-skeleton-DDO_OE14.js","sources":["../src/ds/components/DataList/data-list-skeleton.tsx"],"sourcesContent":["import { DataListCell } from './data-list-cells';\nimport { DataListRoot } from './data-list-root';\nimport type { DataListFit } from './data-list-root';\nimport { dataListRowOuterStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nconst widths = ['75%', '50%', '65%', '90%', '60%', '80%'];\n\nexport type DataListSkeletonProps = {\n  columns?: string;\n  numberOfRows?: number;\n  fit?: DataListFit;\n};\n\nexport function DataListSkeleton({ columns = 'auto 1fr auto auto', numberOfRows = 3, fit }: DataListSkeletonProps) {\n  const columnParts = columns.trim().split(/\\s+/);\n  const columnCount = columnParts.length;\n  const skeletonColumns = columnParts.map(col => (col === 'auto' ? 'minmax(6rem, auto)' : col)).join(' ');\n\n  const getPseudoRandomWidth = (rowIdx: number, colIdx: number) => {\n    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;\n    return widths[index];\n  };\n\n  return (\n    <DataListRoot columns={skeletonColumns} fit={fit}>\n      {Array.from({ length: numberOfRows }).map((_, rowIdx) => (\n        <div\n          key={rowIdx}\n          className={cn(\n            'grid grid-cols-subgrid gap-6 px-5 2xl:gap-12 3xl:gap-14 lg:gap-8 xl:gap-10',\n            ...dataListRowOuterStyles,\n          )}\n        >\n          {Array.from({ length: columnCount }).map((_, colIdx) => (\n            <DataListCell key={colIdx}>\n              <div\n                className=\"bg-surface6 h-4 animate-pulse rounded-lg text-transparent select-none\"\n                style={{ width: getPseudoRandomWidth(rowIdx, colIdx) }}\n              />\n            </DataListCell>\n          ))}\n        </div>\n      ))}\n    </DataListRoot>\n  );\n}\n"],"names":["_"],"mappings":";;;;AAMA,MAAM,SAAS,CAAC,KAAA,EAAO,OAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AAQjD,SAAS,iBAAiB,EAAE,OAAA,GAAU,sBAAsB,YAAA,GAAe,CAAA,EAAG,KAAI,EAA0B;AACjH,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA;AAC9C,EAAA,MAAM,cAAc,WAAA,CAAY,MAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,GAAA,CAAI,CAAA,GAAA,KAAQ,GAAA,KAAQ,SAAS,oBAAA,GAAuB,GAAI,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEtG,EAAA,MAAM,oBAAA,GAAuB,CAAC,MAAA,EAAgB,MAAA,KAAmB;AAC/D,IAAA,MAAM,KAAA,GAAA,CAAS,MAAA,GAAS,MAAA,GAAS,WAAA,GAAc,gBAAgB,MAAA,CAAO,MAAA;AACtE,IAAA,OAAO,OAAO,KAAK,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAS,eAAA,EAAiB,KACrC,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,cAAc,CAAA,CAAE,GAAA,CAAI,CAAC,GAAG,MAAA,qBAC5C,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,SAAA,EAAW,EAAA;AAAA,QACT,4EAAA;AAAA,QACA,GAAG;AAAA,OACL;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAACA,EAAAA,EAAG,MAAA,qBAC3C,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,uEAAA;AAAA,UACV,OAAO,EAAE,KAAA,EAAO,oBAAA,CAAqB,MAAA,EAAQ,MAAM,CAAA;AAAE;AAAA,OACvD,EAAA,EAJiB,MAKnB,CACD;AAAA,KAAA;AAAA,IAbI;AAAA,GAeR,CAAA,EACH,CAAA;AAEJ;;;;"}