@plasmicpkgs/plasmic-rich-components 1.0.98 → 1.0.101

package/dist/index.js

@@ -4,6 +4,7 @@ var registerComponent = require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');
 require('lodash/get');
 var React = require('react');
+var dataSources = require('@plasmicapp/data-sources');
 var antd = require('antd');
 var tinycolor = require('@ctrl/tinycolor');
 var icons = require('@ant-design/icons');
@@ -22,2243 +23,2572 @@ var fastStringify__default = /*#__PURE__*/_interopDefault(fastStringify);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
 function registerComponentHelper(loader, component, meta) {
-    if (loader) {
-        loader.registerComponent(component, meta);
-    }
-    else {
-        registerComponent__default.default(component, meta);
-    }
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent__default.default(component, meta);
+  }
 }
 function ensure(x) {
-    if (x === null || x === undefined) {
-        throw new Error("Expected non-null or non-undefined value");
-    }
-    return x;
+  if (x === null || x === void 0) {
+    throw new Error("Expected non-null or non-undefined value");
+  }
+  return x;
 }
 function isOneOf(elem, arr) {
-    return arr.includes(elem);
+  return arr.includes(elem);
 }
 function maybe(x, f) {
-    if (x === undefined || x === null)
-        return undefined;
-    return f(x);
+  if (x === void 0 || x === null)
+    return void 0;
+  return f(x);
 }
 function isLikeImage(value) {
-    return typeof value === "string"
-        ? value.match(/\.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)$/i)
-        : false;
-}
-// Some heuristics to avoid selecting a row when
-// the object clicked is interactable -- like button, anchor,
-// input, etc.  This won't be bulletproof, so just some
-// heuristics!
+  return typeof value === "string" ? value.match(/\.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)$/i) : false;
+}
 function isInteractable(target) {
-    if (["A", "BUTTON", "INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)) {
-        return true;
-    }
-    if (target.contentEditable === "true") {
-        return true;
-    }
-    return false;
+  if (["A", "BUTTON", "INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)) {
+    return true;
+  }
+  if (target.contentEditable === "true") {
+    return true;
+  }
+  return false;
 }
 function ensureArray(xs) {
-    return Array.isArray(xs) ? xs : [xs];
-}
-var tuple = function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return args;
-};
-function mkIdMap(xs) {
-    return new Map(xs.map(function (x) { return tuple(x.id, x); }));
-}
-var mkShortId = function () { return "".concat(Math.random()); };
-function withoutNils(xs) {
-    return xs.filter(function (x) { return x != null; });
+  return Array.isArray(xs) ? xs : [xs];
 }
+const mkShortId = () => `${Math.random()}`;
 function withoutFalsey(xs) {
-    return xs.filter(function (x) { return !!x; });
+  return xs.filter((x) => !!x);
 }
 
-var DEFAULT_CURRENCY_SETTINGS = {
-    dataType: "currency",
-    currency: "USD",
-    currencyDisplay: "narrowSymbol",
+var __defProp$9 = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
+    }
+  return a;
 };
-var NUMBER_TYPES = ["number", "percent", "currency"];
-var DEFAULT_DATETIME_SETTINGS = {
-    dataType: "datetime",
-    locale: "en-US",
-    dateStyle: "short",
-    timeStyle: "short",
-    hour12: true,
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
 };
-var DEFAULT_RELATIVE_DATETIME_SETTINGS = {
-    dataType: "relative-datetime",
-    locale: "en-US",
-    numeric: "always",
-    style: "long",
-    unit: "day",
+const DEFAULT_CURRENCY_SETTINGS = {
+  dataType: "currency",
+  currency: "USD",
+  currencyDisplay: "narrowSymbol"
 };
-var DATETIME_TYPES = ["datetime", "relative-datetime"];
-var DEFAULT_BOOLEAN_SETTINGS = {
-    dataType: "boolean",
-    showAs: "checkbox",
+const NUMBER_TYPES = ["number", "percent", "currency"];
+const DEFAULT_DATETIME_SETTINGS = {
+  dataType: "datetime",
+  locale: "en-US",
+  dateStyle: "short",
+  timeStyle: "short",
+  hour12: true
+};
+const DEFAULT_RELATIVE_DATETIME_SETTINGS = {
+  dataType: "relative-datetime",
+  locale: "en-US",
+  numeric: "always",
+  style: "long",
+  unit: "day"
+};
+const DATETIME_TYPES = ["datetime", "relative-datetime"];
+const DEFAULT_BOOLEAN_SETTINGS = {
+  dataType: "boolean",
+  showAs: "checkbox"
 };
-function deriveFieldConfigs(specifiedFieldsPartial, schema, makeDefaultConfig) {
-    var _a;
-    var schemaFields = (_a = schema === null || schema === void 0 ? void 0 : schema.fields) !== null && _a !== void 0 ? _a : [];
-    var fieldById = mkIdMap(schemaFields);
-    var specifiedFieldIds = new Set(withoutNils(specifiedFieldsPartial.map(function (f) { return f.fieldId; })));
-    var keptSpecifiedFields = specifiedFieldsPartial.flatMap(function (f, index) {
-        var fieldId = f.fieldId;
-        if (!fieldId) {
-            return [
-                __assign(__assign(__assign({}, makeDefaultConfig(undefined)), { key: index }), f),
-            ];
-        }
-        var field = fieldById.get(fieldId);
-        // Drop configs with fieldIds no longer in the data.
-        if (!field) {
-            return [];
-        }
-        return [
-            __assign(__assign({}, makeDefaultConfig(field)), f),
-        ];
-    });
-    var newVirtualFields = schemaFields
-        .filter(function (f) { return !specifiedFieldIds.has(f.id); })
-        .map(function (f) { return (__assign({}, makeDefaultConfig(f))); });
-    var mergedFields = __spreadArray(__spreadArray([], keptSpecifiedFields, true), newVirtualFields, true);
-    var minimalFullLengthFields = __spreadArray(__spreadArray([], specifiedFieldsPartial, true), newVirtualFields.map(function (f) { return ({ key: f.key, fieldId: f.fieldId }); }), true);
-    return { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields };
-}
 function deriveValueType(cconfig) {
-    return cconfig.dataType === "auto"
-        ? undefined
-        : cconfig.dataType === "string"
-            ? "text"
-            : cconfig.dataType === "number"
-                ? "digit"
-                : cconfig.dataType === "boolean"
-                    ? "switch"
-                    : undefined;
-}
-// Hacky "unique" string values
-var NoneField = "||NoneField||";
-var CustomField = "";
+  return cconfig.dataType === "auto" ? void 0 : cconfig.dataType === "string" ? "text" : cconfig.dataType === "number" ? "digit" : cconfig.dataType === "boolean" ? "switch" : void 0;
+}
+const NoneField = "||NoneField||";
+const CustomField = "";
 function getFieldSubprops(opts) {
-    return __assign(__assign({ key: {
-            type: "string",
-            hidden: function () { return true; },
-        }, fieldId: {
-            type: "choice",
-            displayName: "Field name",
-            readOnly: !opts.canChangeField,
-            options: function (_props, ctx) {
-                var _a, _b;
-                return withoutFalsey(__spreadArray(__spreadArray([
-                    opts.canPickNoneField && { value: NoneField, label: "None" }
-                ], ((_b = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.schema) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []).map(function (f) {
-                    var _a;
-                    return ({
-                        value: f.id,
-                        label: (_a = f.label) !== null && _a !== void 0 ? _a : f.id,
-                    });
-                }), true), [
-                    { value: CustomField, label: "Custom value" },
-                ], false));
-            },
-            hidden: function (ps, ctx, _a) {
-                _a.path;
-                // If this is change-able.
-                if (opts.canChangeField) {
-                    return false;
-                }
-                return true;
-            },
-        }, title: {
-            type: "string",
-            displayName: "Title",
-            defaultValueHint: getDefaultValueHint("title"),
-            hidden: function () { return !!opts.noTitle; },
-        }, expr: __assign(__assign({}, rowDataType("Custom value")), { hidden: function (ps, ctx, _a) {
-                _a.item; _a.path;
-                return false;
-            } }), isHidden: {
-            type: "boolean",
-            displayName: "Is hidden",
-            defaultValueHint: getDefaultValueHint("isHidden"),
-        } }, (!opts.noDataType
-        ? {
-            dataType: {
-                type: "choice",
-                displayName: "Data type",
-                options: [
-                    {
-                        value: "auto",
-                        label: "Auto",
-                    },
-                    {
-                        value: "number",
-                        label: "Number",
-                    },
-                    {
-                        value: "percent",
-                        label: "Percentage",
-                    },
-                    {
-                        value: "currency",
-                        label: "Currency",
-                    },
-                    {
-                        value: "string",
-                        label: "String",
-                    },
-                    {
-                        value: "boolean",
-                        label: "Boolean",
-                    },
-                    {
-                        value: "datetime",
-                        label: "Date / Time",
-                    },
-                    {
-                        value: "relative-datetime",
-                        label: "Date / Time relative to now",
-                    },
-                ],
-                defaultValueHint: getDefaultValueHint("dataType"),
-            },
-            currency: {
-                displayName: "Currency",
-                description: "Must be a valid currency code",
-                type: "string",
-                defaultValueHint: "USD",
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return item.dataType !== "currency";
-                },
-            },
-            locale: {
-                displayName: "Locale",
-                description: "Must be a valid locale code",
-                type: "string",
-                defaultValueHint: "en-US",
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return !isOneOf(item.dataType, NUMBER_TYPES) &&
-                        !isOneOf(item.dataType, DATETIME_TYPES);
-                },
-            },
-            notation: {
-                displayName: "Notation",
-                type: "choice",
-                options: [
-                    {
-                        value: "standard",
-                        label: "Standard",
-                    },
-                    {
-                        value: "scientific",
-                        label: "Scientific notation (like 1E3)",
-                    },
-                    {
-                        value: "compact",
-                        label: "Compact (like 10K)",
-                    },
-                ],
-                defaultValueHint: "standard",
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return !isOneOf(item.dataType, NUMBER_TYPES);
-                },
-            },
-            signDisplay: {
-                type: "choice",
-                displayName: "Number sign",
-                options: [
-                    {
-                        value: "auto",
-                        label: "Only for negative numbers (10, -10)",
-                    },
-                    {
-                        value: "exceptZero",
-                        label: "Positive or negative (+10, -10)",
-                    },
-                ],
-                defaultValueHint: "auto",
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return !isOneOf(item.dataType, NUMBER_TYPES);
-                },
-            },
-            maximumFractionDigits: {
-                type: "number",
-                displayName: "Max decimal places",
-                defaultValueHint: 3,
-                min: 0,
-                max: 20,
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return !isOneOf(item.dataType, NUMBER_TYPES);
-                },
-            },
-            minimumFractionDigits: {
-                type: "number",
-                displayName: "Min decimal places",
-                defaultValueHint: 0,
-                min: 0,
-                max: 20,
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return !isOneOf(item.dataType, NUMBER_TYPES);
-                },
-            },
-            showAs: {
-                type: "choice",
-                options: [
-                    {
-                        value: "checkbox",
-                        label: "Checkboxes",
-                    },
-                    {
-                        value: "switch",
-                        label: "Toggle switches",
-                    },
-                    {
-                        value: "text",
-                        label: "Text",
-                    },
-                ],
-                displayName: "Show as",
-                defaultValueHint: "checkbox",
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return item.dataType !== "boolean";
-                },
-            },
-            dateStyle: {
-                displayName: "Date style",
-                type: "choice",
-                options: [
-                    {
-                        value: "none",
-                        label: "None (don't display date)",
-                    },
-                    {
-                        value: "short",
-                        label: "Short (like 12/25/2023)",
-                    },
-                    {
-                        value: "medium",
-                        label: "Medium (like Dec 25, 2023)",
-                    },
-                    {
-                        value: "long",
-                        label: "Long (like December 25, 2023)",
-                    },
-                    {
-                        value: "full",
-                        label: "Full (like Monday, December 25, 2023)",
-                    },
-                ],
-                defaultValueHint: DEFAULT_DATETIME_SETTINGS.dateStyle,
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return item.dataType !== "datetime";
-                },
-            },
-            timeStyle: {
-                displayName: "Time style",
-                type: "choice",
-                options: [
-                    {
-                        value: "none",
-                        label: "None (don't display time)",
-                    },
-                    {
-                        value: "short",
-                        label: "Short (like 4:00 PM)",
-                    },
-                    {
-                        value: "medium",
-                        label: "Medium (like 4:00:00 PM)",
-                    },
-                    {
-                        value: "long",
-                        label: "Long (like 4:00:00 PM PST)",
-                    },
-                    {
-                        value: "full",
-                        label: "Full (like 4:00:00 PM Pacific Standard Time)",
-                    },
-                ],
-                defaultValueHint: DEFAULT_DATETIME_SETTINGS.timeStyle,
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return item.dataType !== "datetime";
-                },
-            },
-            hour12: {
-                displayName: "Use AM/PM?",
-                description: "Whether to use AM/PM or 24-hour clock",
-                type: "boolean",
-                defaultValueHint: DEFAULT_DATETIME_SETTINGS.hour12,
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return item.dataType !== "datetime";
-                },
-            },
-            numeric: {
-                type: "choice",
-                displayName: "Use numbers?",
-                options: [
-                    { value: "always", label: "Always use numbers" },
-                    {
-                        value: "auto",
-                        label: "Use words like 'Yesterday' or 'Tomorrow'",
-                    },
-                ],
-                defaultValueHint: DEFAULT_RELATIVE_DATETIME_SETTINGS.numeric,
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return item.dataType !== "relative-datetime";
-                },
-            },
-            unit: {
-                type: "choice",
-                displayName: "Time unit",
-                options: [
-                    {
-                        value: "second",
-                        label: "Seconds",
-                    },
-                    {
-                        value: "minute",
-                        label: "Minutes",
-                    },
-                    {
-                        value: "hour",
-                        label: "Hours",
-                    },
-                    {
-                        value: "day",
-                        label: "Days",
-                    },
-                    {
-                        value: "week",
-                        label: "Weeks",
-                    },
-                    {
-                        value: "month",
-                        label: "Months",
-                    },
-                    {
-                        value: "year",
-                        label: "Years",
-                    },
-                ],
-                defaultValueHint: DEFAULT_RELATIVE_DATETIME_SETTINGS.unit,
-                hidden: function (ps, ctx, _a) {
-                    var item = _a.item;
-                    return item.dataType !== "relative-datetime";
-                },
-            },
+  return __spreadValues$9(__spreadValues$9({
+    key: {
+      type: "string",
+      hidden: () => true
+    },
+    fieldId: {
+      type: "choice",
+      displayName: "Field name",
+      readOnly: !opts.canChangeField,
+      options: (_props, ctx) => {
+        var _a, _b;
+        return withoutFalsey([
+          opts.canPickNoneField && { value: NoneField, label: "None" },
+          ...((_b = (_a = ctx == null ? void 0 : ctx.schema) == null ? void 0 : _a.fields) != null ? _b : []).map((f) => {
+            var _a2;
+            return {
+              value: f.id,
+              label: (_a2 = f.label) != null ? _a2 : f.id
+            };
+          }),
+          { value: CustomField, label: "Custom value" }
+        ]);
+      },
+      hidden: (ps, ctx, { path: _controlPath }) => {
+        if (opts.canChangeField) {
+          return false;
         }
-        : {})), opts.fieldTypes);
-}
-function getDefaultValueHint(field) {
-    return function (_props, contextData, _a) {
-        var item = _a.item;
-        if (item === null || item === void 0 ? void 0 : item.fieldId) {
-            var fieldSetting = contextData === null || contextData === void 0 ? void 0 : contextData.mergedFields.find(function (f) { return f.fieldId === item.fieldId; });
-            return fieldSetting === null || fieldSetting === void 0 ? void 0 : fieldSetting[field];
+        return true;
+      }
+    },
+    title: {
+      type: "string",
+      displayName: "Title",
+      defaultValueHint: getDefaultValueHint("title"),
+      hidden: () => !!opts.noTitle
+    },
+    expr: __spreadProps$7(__spreadValues$9({}, rowDataType("Custom value")), {
+      hidden: (ps, ctx, { item, path: _controlPath }) => {
+        return false;
+      }
+    }),
+    isHidden: {
+      type: "boolean",
+      displayName: "Is hidden",
+      defaultValueHint: getDefaultValueHint("isHidden")
+    }
+  }, !opts.noDataType ? {
+    dataType: {
+      type: "choice",
+      displayName: "Data type",
+      options: [
+        {
+          value: "auto",
+          label: "Auto"
+        },
+        {
+          value: "number",
+          label: "Number"
+        },
+        {
+          value: "percent",
+          label: "Percentage"
+        },
+        {
+          value: "currency",
+          label: "Currency"
+        },
+        {
+          value: "string",
+          label: "String"
+        },
+        {
+          value: "boolean",
+          label: "Boolean"
+        },
+        {
+          value: "datetime",
+          label: "Date / Time"
+        },
+        {
+          value: "relative-datetime",
+          label: "Date / Time relative to now"
         }
-        return undefined;
-    };
-}
-var rowDataType = function (displayName, control) {
-    return ({
-        type: "function",
-        displayName: displayName,
-        control: control,
-        argNames: ["currentItem", "currentValue"],
-        argValues: function (_props, ctx, _a) {
-            var _b;
-            var item = _a.item;
-            var row = (_b = ctx === null || ctx === void 0 ? void 0 : ctx.data) === null || _b === void 0 ? void 0 : _b[0];
-            var cell = item.fieldId ? row === null || row === void 0 ? void 0 : row[item.fieldId] : undefined;
-            return [row, cell];
+      ],
+      defaultValueHint: getDefaultValueHint("dataType")
+    },
+    currency: {
+      displayName: "Currency",
+      description: "Must be a valid currency code",
+      type: "string",
+      defaultValueHint: "USD",
+      hidden: (ps, ctx, { item }) => item.dataType !== "currency"
+    },
+    locale: {
+      displayName: "Locale",
+      description: "Must be a valid locale code",
+      type: "string",
+      defaultValueHint: "en-US",
+      hidden: (ps, ctx, { item }) => !isOneOf(item.dataType, NUMBER_TYPES) && !isOneOf(item.dataType, DATETIME_TYPES)
+    },
+    notation: {
+      displayName: "Notation",
+      type: "choice",
+      options: [
+        {
+          value: "standard",
+          label: "Standard"
         },
-    });
-};
-function buildFieldsPropType(_a) {
-    var advanced = _a.advanced, displayName = _a.displayName, _b = _a.minimalValue, minimalValue = _b === void 0 ? function (_props, contextData) { return contextData === null || contextData === void 0 ? void 0 : contextData.minimalFullLengthFields; } : _b, opts = __rest(_a, ["advanced", "displayName", "minimalValue"]);
-    return {
-        type: "array",
-        advanced: advanced,
-        displayName: displayName,
-        hidden: function (ps) { return !ps.data; },
-        unstable__keyFunc: function (x) { return x.key; },
-        unstable__minimalValue: minimalValue,
-        unstable__canDelete: function (ps, _props, ctx, _a) {
-            var item = _a.item;
-            if (opts.canChangeField) {
-                return true;
-            }
-            if (!(ctx === null || ctx === void 0 ? void 0 : ctx.schema)) {
-                // still loading...
-                return false;
-            }
-            if (item.fieldId &&
-                ctx.schema.fields.some(function (f) { return f.id === item.fieldId; })) {
-                return false;
-            }
-            return true;
+        {
+          value: "scientific",
+          label: "Scientific notation (like 1E3)"
         },
-        itemType: {
-            type: "object",
-            nameFunc: function (_item) {
-                // Prefer to show the field ID when available, since there's no other indication what field you're edtiing if you relabeled it.
-                return _item.fieldId || _item.title || "Custom value";
-            },
-            fields: getFieldSubprops(opts),
+        {
+          value: "compact",
+          label: "Compact (like 10K)"
+        }
+      ],
+      defaultValueHint: "standard",
+      hidden: (ps, ctx, { item }) => !isOneOf(item.dataType, NUMBER_TYPES)
+    },
+    signDisplay: {
+      type: "choice",
+      displayName: "Number sign",
+      options: [
+        {
+          value: "auto",
+          label: "Only for negative numbers (10, -10)"
         },
-    };
-}
-
-function normalizeData(rawData) {
-    var _a;
-    if (!rawData) {
-        return undefined;
-    }
-    var dataArray = tryGetDataArray(rawData);
-    if (!dataArray) {
-        return undefined;
-    }
-    var schema = (_a = rawData.schema) !== null && _a !== void 0 ? _a : tryGetSchema(dataArray);
-    if (!schema) {
-        return undefined;
-    }
-    return { data: dataArray, schema: schema };
-}
-function tryGetDataArray(rawData) {
-    if (!rawData || typeof rawData !== "object") {
-        return undefined;
-    }
-    if (Array.isArray(rawData)) {
-        if (isArrayOfObjects(rawData)) {
-            return rawData;
+        {
+          value: "exceptZero",
+          label: "Positive or negative (+10, -10)"
         }
-        else {
-            // TODO: array of primitives? Maybe we can wrap this?
-            return undefined;
+      ],
+      defaultValueHint: "auto",
+      hidden: (ps, ctx, { item }) => !isOneOf(item.dataType, NUMBER_TYPES)
+    },
+    maximumFractionDigits: {
+      type: "number",
+      displayName: "Max decimal places",
+      defaultValueHint: 3,
+      min: 0,
+      max: 20,
+      hidden: (ps, ctx, { item }) => !isOneOf(item.dataType, NUMBER_TYPES)
+    },
+    minimumFractionDigits: {
+      type: "number",
+      displayName: "Min decimal places",
+      defaultValueHint: 0,
+      min: 0,
+      max: 20,
+      hidden: (ps, ctx, { item }) => !isOneOf(item.dataType, NUMBER_TYPES)
+    },
+    showAs: {
+      type: "choice",
+      options: [
+        {
+          value: "checkbox",
+          label: "Checkboxes"
+        },
+        {
+          value: "switch",
+          label: "Toggle switches"
+        },
+        {
+          value: "text",
+          label: "Text"
         }
-    }
-    if ("data" in rawData && Array.isArray(rawData.data)) {
-        if (isArrayOfObjects(rawData.data)) {
-            return rawData.data;
+      ],
+      displayName: "Show as",
+      defaultValueHint: "checkbox",
+      hidden: (ps, ctx, { item }) => item.dataType !== "boolean"
+    },
+    dateStyle: {
+      displayName: "Date style",
+      type: "choice",
+      options: [
+        {
+          value: "none",
+          label: "None (don't display date)"
+        },
+        {
+          value: "short",
+          label: "Short (like 12/25/2023)"
+        },
+        {
+          value: "medium",
+          label: "Medium (like Dec 25, 2023)"
+        },
+        {
+          value: "long",
+          label: "Long (like December 25, 2023)"
+        },
+        {
+          value: "full",
+          label: "Full (like Monday, December 25, 2023)"
+        }
+      ],
+      defaultValueHint: DEFAULT_DATETIME_SETTINGS.dateStyle,
+      hidden: (ps, ctx, { item }) => item.dataType !== "datetime"
+    },
+    timeStyle: {
+      displayName: "Time style",
+      type: "choice",
+      options: [
+        {
+          value: "none",
+          label: "None (don't display time)"
+        },
+        {
+          value: "short",
+          label: "Short (like 4:00 PM)"
+        },
+        {
+          value: "medium",
+          label: "Medium (like 4:00:00 PM)"
+        },
+        {
+          value: "long",
+          label: "Long (like 4:00:00 PM PST)"
+        },
+        {
+          value: "full",
+          label: "Full (like 4:00:00 PM Pacific Standard Time)"
         }
-        else {
-            return undefined;
+      ],
+      defaultValueHint: DEFAULT_DATETIME_SETTINGS.timeStyle,
+      hidden: (ps, ctx, { item }) => item.dataType !== "datetime"
+    },
+    hour12: {
+      displayName: "Use AM/PM?",
+      description: "Whether to use AM/PM or 24-hour clock",
+      type: "boolean",
+      defaultValueHint: DEFAULT_DATETIME_SETTINGS.hour12,
+      hidden: (ps, ctx, { item }) => item.dataType !== "datetime"
+    },
+    numeric: {
+      type: "choice",
+      displayName: "Use numbers?",
+      options: [
+        { value: "always", label: "Always use numbers" },
+        {
+          value: "auto",
+          label: "Use words like 'Yesterday' or 'Tomorrow'"
+        }
+      ],
+      defaultValueHint: DEFAULT_RELATIVE_DATETIME_SETTINGS.numeric,
+      hidden: (ps, ctx, { item }) => item.dataType !== "relative-datetime"
+    },
+    unit: {
+      type: "choice",
+      displayName: "Time unit",
+      options: [
+        {
+          value: "second",
+          label: "Seconds"
+        },
+        {
+          value: "minute",
+          label: "Minutes"
+        },
+        {
+          value: "hour",
+          label: "Hours"
+        },
+        {
+          value: "day",
+          label: "Days"
+        },
+        {
+          value: "week",
+          label: "Weeks"
+        },
+        {
+          value: "month",
+          label: "Months"
+        },
+        {
+          value: "year",
+          label: "Years"
         }
+      ],
+      defaultValueHint: DEFAULT_RELATIVE_DATETIME_SETTINGS.unit,
+      hidden: (ps, ctx, { item }) => item.dataType !== "relative-datetime"
     }
-    if ("isLoading" in rawData || "error" in rawData) {
-        return undefined;
+  } : {}), opts.fieldTypes);
+}
+function getDefaultValueHint(field) {
+  return (_props, contextData, { item }) => {
+    if (item == null ? void 0 : item.fieldId) {
+      const fieldSetting = contextData == null ? void 0 : contextData.mergedFields.find(
+        (f) => f.fieldId === item.fieldId
+      );
+      return fieldSetting == null ? void 0 : fieldSetting[field];
     }
-    // Maybe a singleton record?
-    return [rawData];
-}
-function isArrayOfObjects(arr) {
-    return arr.every(function (x) { return typeof x === "object" && !Array.isArray(x); });
-}
-function tryGetSchema(data) {
-    var fieldMap = {};
-    data.forEach(function (entry) {
-        if (entry && typeof entry === "object") {
-            Array.from(Object.entries(entry)).forEach(function (_a) {
-                var k = _a[0], v = _a[1];
-                var inferredType = typeof v === "string"
-                    ? "string"
-                    : typeof v === "boolean"
-                        ? "boolean"
-                        : typeof v === "number"
-                            ? "number"
-                            : "unknown";
-                if (fieldMap[k] && fieldMap[k] !== inferredType) {
-                    fieldMap[k] = "unknown";
-                }
-                else {
-                    fieldMap[k] = inferredType;
-                }
-            });
-        }
-    });
-    return {
-        id: "inferred",
-        fields: Object.entries(fieldMap).map(function (_a) {
-            var f = _a[0], t = _a[1];
-            return ({
-                id: f,
-                type: t,
-                readOnly: false,
-            });
-        }),
-    };
+    return void 0;
+  };
+}
+const rowDataType = (displayName, control) => ({
+  type: "function",
+  displayName,
+  control,
+  argNames: ["currentItem", "currentValue"],
+  argValues: (_props, ctx, { item }) => {
+    var _a;
+    const row = (_a = ctx == null ? void 0 : ctx.data) == null ? void 0 : _a[0];
+    const cell = item.fieldId ? row == null ? void 0 : row[item.fieldId] : void 0;
+    return [row, cell];
+  }
+});
+function buildFieldsPropType(_a) {
+  var _b = _a, {
+    advanced,
+    displayName,
+    minimalValue = (_props, contextData) => contextData == null ? void 0 : contextData.minimalFullLengthFields
+  } = _b, opts = __objRest$2(_b, [
+    "advanced",
+    "displayName",
+    "minimalValue"
+  ]);
+  return {
+    type: "array",
+    advanced,
+    displayName,
+    hidden: (ps) => !ps.data,
+    unstable__keyFunc: (x) => x.key,
+    unstable__minimalValue: minimalValue,
+    unstable__canDelete: (ps, _props, ctx, { item }) => {
+      if (opts.canChangeField) {
+        return true;
+      }
+      if (!(ctx == null ? void 0 : ctx.schema)) {
+        return false;
+      }
+      if (item.fieldId && ctx.schema.fields.some((f) => f.id === item.fieldId)) {
+        return false;
+      }
+      return true;
+    },
+    itemType: {
+      type: "object",
+      nameFunc: (_item) => {
+        return _item.fieldId || _item.title || "Custom value";
+      },
+      fields: getFieldSubprops(opts)
+    }
+  };
 }
 
+var __defProp$8 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 function multiRenderValue(record, cconfigs) {
-    return cconfigs === null || cconfigs === void 0 ? void 0 : cconfigs.flatMap(function (cc) {
-        return cc.isHidden ? [] : [" \u2022 ", React__default.default.createElement(React__default.default.Fragment, null, renderValue(record, cc))];
-    }).slice(1);
+  return cconfigs == null ? void 0 : cconfigs.flatMap(
+    (cc) => cc.isHidden ? [] : [` \u2022 `, /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, renderValue(record, cc))]
+  ).slice(1);
 }
 function maybeRenderString(record, cconfig) {
-    return cconfig && !cconfig.isHidden
-        ? maybe(getFieldValue(record, cconfig), asString)
-        : undefined;
+  return cconfig && !cconfig.isHidden ? maybe(getFieldValue(record, cconfig), asString) : void 0;
 }
 function getFieldValue(record, cconfig) {
-    var value = cconfig.fieldId ? record[cconfig.fieldId] : undefined;
-    if (cconfig.expr) {
-        value = cconfig.expr(record, value);
-    }
-    return value;
+  let value = cconfig.fieldId ? record[cconfig.fieldId] : void 0;
+  if (cconfig.expr) {
+    value = cconfig.expr(record, value);
+  }
+  return value;
 }
 function renderValue(record, cconfig) {
-    var value = getFieldValue(record, cconfig);
-    if (value == null) {
-        return "";
-    }
-    if (cconfig.dataType === "auto") {
-        return renderAuto(value);
-    }
-    else {
-        var coerced = coerceValue(value, cconfig.dataType);
-        if (isOneOf(cconfig.dataType, NUMBER_TYPES) &&
-            typeof coerced === "number") {
-            return renderNumber(coerced, cconfig);
-        }
-        else if (cconfig.dataType === "boolean" && typeof coerced === "boolean") {
-            return renderBoolean(coerced, cconfig);
-        }
-        else if (cconfig.dataType === "datetime" && coerced instanceof Date) {
-            return renderDate(coerced, cconfig);
-        }
-        else if (cconfig.dataType === "relative-datetime" &&
-            coerced instanceof Date) {
-            return renderRelativeDate(coerced, cconfig);
-        }
-        return asString(value);
+  const value = getFieldValue(record, cconfig);
+  if (value == null) {
+    return "";
+  }
+  if (cconfig.dataType === "auto") {
+    return renderAuto(value);
+  } else {
+    const coerced = coerceValue(value, cconfig.dataType);
+    if (isOneOf(cconfig.dataType, NUMBER_TYPES) && typeof coerced === "number") {
+      return renderNumber(coerced, cconfig);
+    } else if (cconfig.dataType === "boolean" && typeof coerced === "boolean") {
+      return renderBoolean(coerced, cconfig);
+    } else if (cconfig.dataType === "datetime" && coerced instanceof Date) {
+      return renderDate(coerced, cconfig);
+    } else if (cconfig.dataType === "relative-datetime" && coerced instanceof Date) {
+      return renderRelativeDate(coerced, cconfig);
     }
+    return asString(value);
+  }
 }
 function renderAuto(value) {
-    if (typeof value === "number") {
-        return renderNumber(value, { dataType: "number" });
-    }
-    else if (typeof value === "boolean") {
-        return renderBoolean(value, DEFAULT_BOOLEAN_SETTINGS);
-    }
-    else if (value instanceof Date) {
-        return renderDate(value, DEFAULT_DATETIME_SETTINGS);
-    }
-    else {
-        var coerced = tryCoerceAuto(value);
-        if (coerced === CANNOT_COERCE) {
-            return asString(value);
-        }
-        else {
-            return renderAuto(coerced);
-        }
+  if (typeof value === "number") {
+    return renderNumber(value, { dataType: "number" });
+  } else if (typeof value === "boolean") {
+    return renderBoolean(value, DEFAULT_BOOLEAN_SETTINGS);
+  } else if (value instanceof Date) {
+    return renderDate(value, DEFAULT_DATETIME_SETTINGS);
+  } else {
+    const coerced = tryCoerceAuto(value);
+    if (coerced === CANNOT_COERCE) {
+      return asString(value);
+    } else {
+      return renderAuto(coerced);
     }
+  }
 }
 function tryCoerceAuto(value) {
-    for (var _i = 0, _a = [
-        "number",
-        "datetime",
-    ]; _i < _a.length; _i++) {
-        var dataType = _a[_i];
-        var coerced = coerceValue(value, dataType);
-        if (coerced !== CANNOT_COERCE) {
-            return coerced;
-        }
+  for (const dataType of [
+    "number",
+    "datetime"
+  ]) {
+    const coerced = coerceValue(value, dataType);
+    if (coerced !== CANNOT_COERCE) {
+      return coerced;
     }
-    return CANNOT_COERCE;
+  }
+  return CANNOT_COERCE;
 }
 function renderNumber(value, cconfig) {
-    if (cconfig.dataType === "number") {
-        return new Intl.NumberFormat(cconfig.locale, cconfig).format(value);
-    }
-    else if (cconfig.dataType === "percent") {
-        return new Intl.NumberFormat(cconfig.locale, __assign(__assign({}, cconfig), { style: "percent" })).format(value);
-    }
-    else if (cconfig.dataType === "currency") {
-        return new Intl.NumberFormat(cconfig.locale, __assign(__assign(__assign({}, DEFAULT_CURRENCY_SETTINGS), cconfig), { style: "currency" })).format(value);
-    }
-    else {
-        throw new Error("Unexpected dataType ".concat(cconfig.dataType));
-    }
+  if (cconfig.dataType === "number") {
+    return new Intl.NumberFormat(cconfig.locale, cconfig).format(value);
+  } else if (cconfig.dataType === "percent") {
+    return new Intl.NumberFormat(cconfig.locale, __spreadProps$6(__spreadValues$8({}, cconfig), {
+      style: "percent"
+    })).format(value);
+  } else if (cconfig.dataType === "currency") {
+    return new Intl.NumberFormat(cconfig.locale, __spreadProps$6(__spreadValues$8(__spreadValues$8({}, DEFAULT_CURRENCY_SETTINGS), cconfig), {
+      style: "currency"
+    })).format(value);
+  } else {
+    throw new Error(`Unexpected dataType ${cconfig.dataType}`);
+  }
 }
 function renderDate(value, cconfig) {
-    var opts = __assign(__assign({}, DEFAULT_DATETIME_SETTINGS), cconfig);
-    if (opts.dateStyle === "none") {
-        delete opts["dateStyle"];
-    }
-    if (opts.timeStyle === "none") {
-        delete opts["timeStyle"];
-    }
-    return new Intl.DateTimeFormat(cconfig.locale, opts).format(value);
-}
-var SECOND_MS = 1000;
-var MINUTE_MS = 60 * SECOND_MS;
-var HOUR_MS = 60 * MINUTE_MS;
-var DAY_MS = 24 * HOUR_MS;
-var WEEK_MS = 7 * DAY_MS;
-var UNIT_TO_MS = {
-    second: SECOND_MS,
-    minute: MINUTE_MS,
-    hour: HOUR_MS,
-    day: DAY_MS,
-    week: WEEK_MS,
+  const opts = __spreadValues$8(__spreadValues$8({}, DEFAULT_DATETIME_SETTINGS), cconfig);
+  if (opts.dateStyle === "none") {
+    delete opts["dateStyle"];
+  }
+  if (opts.timeStyle === "none") {
+    delete opts["timeStyle"];
+  }
+  return new Intl.DateTimeFormat(cconfig.locale, opts).format(value);
+}
+const SECOND_MS = 1e3;
+const MINUTE_MS = 60 * SECOND_MS;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+const WEEK_MS = 7 * DAY_MS;
+const UNIT_TO_MS = {
+  second: SECOND_MS,
+  minute: MINUTE_MS,
+  hour: HOUR_MS,
+  day: DAY_MS,
+  week: WEEK_MS
 };
-var UNITS_BY_MS = Object.keys(UNIT_TO_MS);
+const UNITS_BY_MS = Object.keys(UNIT_TO_MS);
 function renderRelativeDate(value, cconfig) {
-    var _a;
-    var opts = __assign(__assign({}, DEFAULT_RELATIVE_DATETIME_SETTINGS), cconfig);
-    var unit = (_a = cconfig.unit) !== null && _a !== void 0 ? _a : "day";
-    var formatter = new Intl.RelativeTimeFormat(cconfig.locale, opts);
-    if (isOneOf(unit, UNITS_BY_MS)) {
-        // for "exact" units, we can do it by just calcluating the difference
-        // by ms
-        var diff = value.getTime() - new Date().getTime();
-        return formatter.format(Math.round(diff / UNIT_TO_MS[unit]), unit);
-    }
-    else {
-        // otherwise we need to calculate by the specific unit
-        if (unit === "year") {
-            var diff = value.getFullYear() - new Date().getFullYear();
-            return formatter.format(diff, unit);
-        }
-        else if (unit === "month") {
-            var months = function (d) { return d.getFullYear() * 12 + d.getMonth() + 1; };
-            var diff = months(value) - months(new Date());
-            return formatter.format(diff, unit);
-        }
-        else {
-            throw new Error("Unexpected relative time unit ".concat(unit));
-        }
+  var _a;
+  const opts = __spreadValues$8(__spreadValues$8({}, DEFAULT_RELATIVE_DATETIME_SETTINGS), cconfig);
+  const unit = (_a = cconfig.unit) != null ? _a : "day";
+  const formatter = new Intl.RelativeTimeFormat(cconfig.locale, opts);
+  if (isOneOf(unit, UNITS_BY_MS)) {
+    const diff = value.getTime() - (/* @__PURE__ */ new Date()).getTime();
+    return formatter.format(Math.round(diff / UNIT_TO_MS[unit]), unit);
+  } else {
+    if (unit === "year") {
+      const diff = value.getFullYear() - (/* @__PURE__ */ new Date()).getFullYear();
+      return formatter.format(diff, unit);
+    } else if (unit === "month") {
+      const months = (d) => d.getFullYear() * 12 + d.getMonth() + 1;
+      const diff = months(value) - months(/* @__PURE__ */ new Date());
+      return formatter.format(diff, unit);
+    } else {
+      throw new Error(`Unexpected relative time unit ${unit}`);
     }
+  }
 }
 function renderBoolean(value, cconfig) {
-    var _a;
-    var showAs = (_a = cconfig.showAs) !== null && _a !== void 0 ? _a : DEFAULT_BOOLEAN_SETTINGS.showAs;
-    if (showAs === "checkbox") {
-        return React__default.default.createElement(antd.Checkbox, { checked: value });
-    }
-    else if (showAs === "switch") {
-        return React__default.default.createElement(antd.Switch, { checked: value });
-    }
-    else {
-        return value ? "true" : "false";
-    }
+  var _a;
+  const showAs = (_a = cconfig.showAs) != null ? _a : DEFAULT_BOOLEAN_SETTINGS.showAs;
+  if (showAs === "checkbox") {
+    return /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, { checked: value });
+  } else if (showAs === "switch") {
+    return /* @__PURE__ */ React__default.default.createElement(antd.Switch, { checked: value });
+  } else {
+    return value ? "true" : "false";
+  }
 }
-var CANNOT_COERCE = Symbol("plasmic-cannot-coerce");
+const CANNOT_COERCE = Symbol("plasmic-cannot-coerce");
 function coerceValue(value, dataType) {
-    if (value == null) {
-        return null;
-    }
-    try {
-        if (isOneOf(dataType, NUMBER_TYPES)) {
-            if (typeof value === "number") {
-                return value;
-            }
-            else if (typeof value === "string") {
-                var maybeNumber = +value;
-                if (!isNaN(maybeNumber)) {
-                    return maybeNumber;
-                }
-            }
-        }
-        else if (isOneOf(dataType, DATETIME_TYPES)) {
-            if (value instanceof Date) {
-                return value;
-            }
-            else if (typeof value === "number") {
-                return new Date(value);
-            }
-            else if (typeof value === "string") {
-                var maybeDate = new Date(value);
-                if (!isNaN(maybeDate.getTime())) {
-                    return maybeDate;
-                }
-            }
-        }
-        else if (dataType === "boolean") {
-            if (value === true || value === false) {
-                return value;
-            }
-            else if (typeof value === "number") {
-                return value !== 0;
-            }
-            else if (typeof value === "string") {
-                return value.toLowerCase() === "true";
-            }
-        }
-        else if (dataType === "string") {
-            return asString(value);
+  if (value == null) {
+    return null;
+  }
+  try {
+    if (isOneOf(dataType, NUMBER_TYPES)) {
+      if (typeof value === "number") {
+        return value;
+      } else if (typeof value === "string") {
+        const maybeNumber = +value;
+        if (!isNaN(maybeNumber)) {
+          return maybeNumber;
         }
-        else if (dataType === "auto") {
-            return value;
+      }
+    } else if (isOneOf(dataType, DATETIME_TYPES)) {
+      if (value instanceof Date) {
+        return value;
+      } else if (typeof value === "number") {
+        return new Date(value);
+      } else if (typeof value === "string") {
+        const maybeDate = new Date(value);
+        if (!isNaN(maybeDate.getTime())) {
+          return maybeDate;
         }
+      }
+    } else if (dataType === "boolean") {
+      if (value === true || value === false) {
+        return value;
+      } else if (typeof value === "number") {
+        return value !== 0;
+      } else if (typeof value === "string") {
+        return value.toLowerCase() === "true";
+      }
+    } else if (dataType === "string") {
+      return asString(value);
+    } else if (dataType === "auto") {
+      return value;
     }
-    catch (err) {
-        // Ignore error; just fail to coerce
-    }
-    return CANNOT_COERCE;
+  } catch (err) {
+  }
+  return CANNOT_COERCE;
 }
 function asString(value) {
-    if (value == null) {
-        return "";
-    }
-    else if (typeof value === "string") {
-        return value;
-    }
-    else if (typeof value === "object") {
-        if ("toString" in value && typeof value.toString === "function") {
-            return value.toString();
-        }
-        else {
-            return JSON.stringify(value);
-        }
-    }
-    else {
-        return "".concat(value);
+  if (value == null) {
+    return "";
+  } else if (typeof value === "string") {
+    return value;
+  } else if (typeof value === "object") {
+    if ("toString" in value && typeof value.toString === "function") {
+      return value.toString();
+    } else {
+      return JSON.stringify(value);
     }
+  } else {
+    return `${value}`;
+  }
 }
 
-function RichDetails(props) {
-    var _a;
-    var className = props.className, rawData = props.data, size = props.size, bordered = props.bordered, layout = props.layout, _b = props.column, column = _b === void 0 ? 2 : _b;
-    var data = normalizeData(rawData);
-    var columnDefinitions = useColumnDefinitions$1(data, props).columnDefinitions;
-    if (!data || !((_a = data.data) === null || _a === void 0 ? void 0 : _a[0])) {
-        return React__default.default.createElement(antd.Empty, { className: className, image: antd.Empty.PRESENTED_IMAGE_SIMPLE });
+var __defProp$7 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
-    var row = data.data[0];
-    return (React__default.default.createElement(antd.Descriptions, { className: className, size: size, bordered: bordered, layout: layout, column: {
-            xs: 1,
-            sm: 1,
-            md: column,
-        } }, columnDefinitions.map(function (col) { return (React__default.default.createElement(antd.Descriptions.Item, { label: col.title, key: col.key, span: col.span }, col.render(row))); })));
+  return a;
+};
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+function RichDetails(props) {
+  var _a;
+  const {
+    className,
+    data: rawData,
+    size,
+    bordered,
+    layout,
+    column = 2
+  } = props;
+  const data = dataSources.normalizeData(rawData);
+  const { columnDefinitions } = useColumnDefinitions$1(data, props);
+  if (!data || !((_a = data.data) == null ? void 0 : _a[0])) {
+    return /* @__PURE__ */ React__default.default.createElement(antd.Empty, { className, image: antd.Empty.PRESENTED_IMAGE_SIMPLE });
+  }
+  const row = data.data[0];
+  return /* @__PURE__ */ React__default.default.createElement(
+    antd.Descriptions,
+    {
+      className,
+      size,
+      bordered,
+      layout,
+      column: {
+        xs: 1,
+        sm: 1,
+        md: column
+      }
+    },
+    columnDefinitions.map((col) => /* @__PURE__ */ React__default.default.createElement(antd.Descriptions.Item, { label: col.title, key: col.key, span: col.span }, col.render(row)))
+  );
 }
 function useColumnDefinitions$1(data, props) {
-    var fields = props.fields, setControlContextData = props.setControlContextData;
-    return React__default.default.useMemo(function () {
-        var schema = data === null || data === void 0 ? void 0 : data.schema;
-        if (!data || !schema) {
-            return { normalized: [], columnDefinitions: [] };
+  const { fields, setControlContextData } = props;
+  return React__default.default.useMemo(() => {
+    const schema = data == null ? void 0 : data.schema;
+    if (!data || !schema) {
+      return { normalized: [], columnDefinitions: [] };
+    }
+    const { mergedFields, minimalFullLengthFields } = dataSources.deriveFieldConfigs(
+      fields != null ? fields : [],
+      schema,
+      (field) => __spreadValues$7({
+        key: mkShortId(),
+        isHidden: false,
+        dataType: "auto"
+      }, field && {
+        key: field.id,
+        fieldId: field.id,
+        title: field.label || field.id,
+        expr: (currentItem) => currentItem[field.id]
+      })
+    );
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$5(__spreadValues$7({}, data), { mergedFields, minimalFullLengthFields }));
+    const normalized = mergedFields;
+    const columnDefinitions = normalized.filter((cconfig) => !cconfig.isHidden).map((cconfig, _columnIndex, _columnsArray) => {
+      const columnDefinition = {
+        dataIndex: cconfig.fieldId,
+        title: cconfig.title,
+        key: cconfig.key,
+        span: cconfig.span,
+        render: (record) => {
+          return renderValue(record, cconfig);
         }
-        var _a = deriveFieldConfigs(fields !== null && fields !== void 0 ? fields : [], schema, function (field) { return (__assign({ key: mkShortId(), isHidden: false, dataType: "auto" }, (field && {
-            key: field.id,
-            fieldId: field.id,
-            title: field.label || field.id,
-            expr: function (currentItem) { return currentItem[field.id]; },
-        }))); }), mergedFields = _a.mergedFields, minimalFullLengthFields = _a.minimalFullLengthFields;
-        setControlContextData === null || setControlContextData === void 0 ? void 0 : setControlContextData(__assign(__assign({}, data), { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields }));
-        var normalized = mergedFields;
-        var columnDefinitions = normalized
-            .filter(function (cconfig) { return !cconfig.isHidden; })
-            .map(function (cconfig, _columnIndex, _columnsArray) {
-            var columnDefinition = {
-                dataIndex: cconfig.fieldId,
-                title: cconfig.title,
-                key: cconfig.key,
-                span: cconfig.span,
-                render: function (record) {
-                    return renderValue(record, cconfig);
-                },
-            };
-            return columnDefinition;
-        });
-        return { normalized: normalized, columnDefinitions: columnDefinitions };
-    }, [fields, data, setControlContextData]);
+      };
+      return columnDefinition;
+    });
+    return { normalized, columnDefinitions };
+  }, [fields, data, setControlContextData]);
 }
 
 function registerRichDetails(loader) {
-    registerComponentHelper(loader, RichDetails, {
-        name: "hostless-rich-details",
-        displayName: "Data details",
-        defaultStyles: {
-            width: "stretch",
-            maxHeight: "100%",
-        },
-        props: {
-            data: {
-                type: "dataSourceOpData",
-                description: "The data to display",
-            },
-            fields: buildFieldsPropType({
-                fieldTypes: {
-                    span: {
-                        type: "number",
-                        displayName: "Number of columns to span",
-                        defaultValueHint: 1,
-                    },
-                },
-            }),
-            layout: {
-                displayName: "Layout",
-                type: "choice",
-                options: [
-                    { value: "horizontal", label: "Horizontal" },
-                    { value: "vertical", label: "Vertical" },
-                ],
-                defaultValueHint: "horizontal",
-            },
-            column: {
-                displayName: "Items per row",
-                type: "number",
-                description: "Number of items to display per row",
-                defaultValueHint: 2,
-            },
-            size: {
-                displayName: "Spacing",
-                type: "choice",
-                options: [
-                    { value: "small", label: "Small" },
-                    { value: "middle", label: "Medium" },
-                    { value: "default", label: "Large" },
-                ],
-                defaultValueHint: "default",
-            },
-            bordered: {
-                displayName: "Show borders?",
-                type: "boolean",
-                defaultValueHint: false,
-            },
-        },
-        importPath: "@plasmicpkgs/plasmic-rich-components",
-        importName: "RichDetails",
-    });
+  registerComponentHelper(loader, RichDetails, {
+    name: "hostless-rich-details",
+    displayName: "Data details",
+    defaultStyles: {
+      width: "stretch",
+      maxHeight: "100%"
+    },
+    props: {
+      data: {
+        type: "dataSourceOpData",
+        description: "The data to display"
+      },
+      fields: buildFieldsPropType({
+        fieldTypes: {
+          span: {
+            type: "number",
+            displayName: "Number of columns to span",
+            defaultValueHint: 1
+          }
+        }
+      }),
+      layout: {
+        displayName: "Layout",
+        type: "choice",
+        options: [
+          { value: "horizontal", label: "Horizontal" },
+          { value: "vertical", label: "Vertical" }
+        ],
+        defaultValueHint: "horizontal"
+      },
+      column: {
+        displayName: "Items per row",
+        type: "number",
+        description: "Number of items to display per row",
+        defaultValueHint: 2
+      },
+      size: {
+        displayName: "Spacing",
+        type: "choice",
+        options: [
+          { value: "small", label: "Small" },
+          { value: "middle", label: "Medium" },
+          { value: "default", label: "Large" }
+        ],
+        defaultValueHint: "default"
+      },
+      bordered: {
+        displayName: "Show borders?",
+        type: "boolean",
+        defaultValueHint: false
+      }
+    },
+    importPath: "@plasmicpkgs/plasmic-rich-components",
+    importName: "RichDetails"
+  });
 }
 
 function useIsClient() {
-    var _a = React__default.default.useState(false), loaded = _a[0], setLoaded = _a[1];
-    useIsomorphicLayoutEffect(function () {
-        setLoaded(true);
-    });
-    return loaded;
+  const [loaded, setLoaded] = React__default.default.useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setLoaded(true);
+  });
+  return loaded;
 }
-var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser
-    ? React__default.default.useLayoutEffect
-    : React__default.default.useEffect;
+const isBrowser = typeof window !== "undefined";
+const useIsomorphicLayoutEffect = isBrowser ? React__default.default.useLayoutEffect : React__default.default.useEffect;
 function capitalize(text) {
-    return text.slice(0, 1).toUpperCase() + text.slice(1);
+  return text.slice(0, 1).toUpperCase() + text.slice(1);
 }
 function isLight(color) {
-    var _a = tinycolor.tinycolor(color).toRgb(), r = _a.r, g = _a.g, b = _a.b;
-    return r * 0.299 + g * 0.587 + b * 0.114 > 186;
+  const { r, g, b } = tinycolor.tinycolor(color).toRgb();
+  return r * 0.299 + g * 0.587 + b * 0.114 > 186;
 }
 
-var AnchorLink = React__default.default.forwardRef(function AnchorLink(props, ref) {
-    return React__default.default.createElement("a", __assign({}, props, { ref: ref }));
+var __defProp$6 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const AnchorLink = React__default.default.forwardRef(function AnchorLink2(props, ref) {
+  return /* @__PURE__ */ React__default.default.createElement("a", __spreadProps$4(__spreadValues$6({}, props), { ref }));
 });
 
+var __defProp$5 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 function omitUndefined(x) {
-    return Object.fromEntries(Object.entries(x).filter(function (_a) {
-        _a[0]; var v = _a[1];
-        return v !== undefined;
-    }));
+  return Object.fromEntries(
+    Object.entries(x).filter(([k, v]) => v !== void 0)
+  );
 }
 function filterNavMenuItemsByConditions(navMenuItems) {
-    return navMenuItems
-        .filter(function (item) { return item.condition === undefined || item.condition; })
-        .map(function (item) { return (__assign(__assign({}, item), { routes: item.routes
-            ? filterNavMenuItemsByConditions(item.routes)
-            : undefined })); });
-}
-// width: 100% needed because parent is display: flex, which is needed for the min-height behavior.
-var baseStyles = "\n.ant-pro-layout-bg-list {\n  display: none;\n}\n.ant-pro-layout {\n  display: flex;\n  width: 100%;\n}\n.ant-pro-layout .ant-pro-layout-content {\n  padding: 0;\n}\n";
+  return navMenuItems.filter((item) => item.condition === void 0 || item.condition).map((item) => __spreadProps$3(__spreadValues$5({}, item), {
+    routes: item.routes ? filterNavMenuItemsByConditions(item.routes) : void 0
+  }));
+}
+const baseStyles = `
+.ant-pro-layout-bg-list {
+  display: none;
+}
+.ant-pro-layout {
+  display: flex;
+  width: 100%;
+}
+.ant-pro-layout .ant-pro-layout-content {
+  padding: 0;
+}
+`;
 function RichLayout(_a) {
-    var _b, _c, _d, _e;
-    var children = _a.children, navMenuItems = _a.navMenuItems, _f = _a.rootUrl, rootUrl = _f === void 0 ? "/" : _f, actionsChildren = _a.actionsChildren, footerChildren = _a.footerChildren, avatarLabel = _a.avatarLabel, avatarImage = _a.avatarImage, showAvatarMenu = _a.showAvatarMenu, className = _a.className, simpleNavTheme = _a.simpleNavTheme, logo = _a.logo, logoElement = _a.logoElement, layoutProps = __rest(_a, ["children", "navMenuItems", "rootUrl", "actionsChildren", "footerChildren", "avatarLabel", "avatarImage", "showAvatarMenu", "className", "simpleNavTheme", "logo", "logoElement"]);
-    var isClient = useIsClient();
-    var _g = React.useState(undefined), pathname = _g[0], setPathname = _g[1];
-    React.useEffect(function () {
-        if (typeof location !== "undefined") {
-            setPathname(location.pathname);
-        }
-    }, []);
-    // The usePlasmicLink function may be undefined, if host is not up to date
-    var Link = (_b = host.usePlasmicLink === null || host.usePlasmicLink === void 0 ? void 0 : host.usePlasmicLink()) !== null && _b !== void 0 ? _b : AnchorLink;
-    var token = antd.theme.useToken().token;
-    var origTextColor = token.colorTextBase;
-    function getNavBgColor() {
-        var _a, _b;
-        var scheme = (_a = simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.scheme) !== null && _a !== void 0 ? _a : "default";
-        switch (scheme) {
-            case "primary":
-                return token.colorPrimary;
-            case "dark":
-                // Ant default dark blue Menu color.
-                return "#011528";
-            case "custom":
-                return (_b = simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.customBgColor) !== null && _b !== void 0 ? _b : token.colorBgBase;
-            case "light":
-                // Just use this sorta ugly gray if using 'light' scheme in 'dark' mode.
-                // Otherwise using light scheme in light mode.
-                return "#fff";
-            case "default":
-                return token.colorBgBase || "#fff";
-        }
+  var _b = _a, {
+    children,
+    navMenuItems,
+    rootUrl = "/",
+    actionsChildren,
+    footerChildren,
+    avatarLabel,
+    avatarImage,
+    showAvatarMenu,
+    className,
+    simpleNavTheme,
+    logo,
+    logoElement
+  } = _b, layoutProps = __objRest$1(_b, [
+    "children",
+    "navMenuItems",
+    "rootUrl",
+    "actionsChildren",
+    "footerChildren",
+    "avatarLabel",
+    "avatarImage",
+    "showAvatarMenu",
+    "className",
+    "simpleNavTheme",
+    "logo",
+    "logoElement"
+  ]);
+  var _a2, _b2, _c, _d, _e;
+  const isClient = useIsClient();
+  const [pathname, setPathname] = React.useState(void 0);
+  React.useEffect(() => {
+    if (typeof location !== "undefined") {
+      setPathname(location.pathname);
     }
-    var navBgColor = getNavBgColor();
-    // Dynamically determine whether we need to change the text to black/white or not, based on background color.
-    // We don't want light-on-light or dark-on-dark, so if both isNavBgLight and isOrigTextLight are the same, then need to change.
-    // If no need to change, we leave text color as is.
-    var isNavBgLight = isLight(navBgColor);
-    var isOrigTextLight = isLight(origTextColor);
-    // Ant will interpret "" as defaulting to "#fff" for dark mode and "#000" in light mode.
-    var navTextColor = isNavBgLight !== isOrigTextLight ? undefined : "";
-    if (!isClient) {
-        return null;
+  }, []);
+  const Link = (_b2 = (_a2 = host.usePlasmicLink) == null ? void 0 : _a2()) != null ? _b2 : AnchorLink;
+  const { token } = antd.theme.useToken();
+  const origTextColor = token.colorTextBase;
+  function getNavBgColor() {
+    var _a3, _b3;
+    const scheme = (_a3 = simpleNavTheme == null ? void 0 : simpleNavTheme.scheme) != null ? _a3 : "default";
+    switch (scheme) {
+      case "primary":
+        return token.colorPrimary;
+      case "dark":
+        return "#011528";
+      case "custom":
+        return (_b3 = simpleNavTheme == null ? void 0 : simpleNavTheme.customBgColor) != null ? _b3 : token.colorBgBase;
+      case "light":
+        return "#fff";
+      case "default":
+        return token.colorBgBase || "#fff";
     }
-    var layoutColorOverrides = isNavBgLight
-        ? undefined
-        : {
-            colorBgCollapsedButton: navBgColor,
-            colorTextCollapsedButtonHover: "rgba(255,255,255,0.85)",
-            colorTextCollapsedButton: "rgba(255,255,255,0.65)",
-            colorMenuBackground: navBgColor,
-            colorBgMenuItemCollapsedHover: "rgba(0,0,0,0.06)",
-            colorBgMenuItemCollapsedSelected: "rgba(0,0,0,0.15)",
-            colorBgMenuItemCollapsedElevated: "rgba(0,0,0,0.85)",
-            colorMenuItemDivider: "rgba(255,255,255,0.15)",
-            colorBgMenuItemHover: "rgba(0,0,0,0.06)",
-            colorBgMenuItemSelected: "rgba(0,0,0,0.15)",
-            colorTextMenuSelected: "#fff",
-            colorTextMenuItemHover: "rgba(255,255,255,0.75)",
-            colorTextMenu: "rgba(255,255,255,0.75)",
-            colorTextMenuSecondary: "rgba(255,255,255,0.65)",
-            colorTextMenuTitle: "rgba(255,255,255,0.95)",
-            colorTextMenuActive: "rgba(255,255,255,0.95)",
-            colorTextSubMenuSelected: "#fff",
-        };
-    return (React__default.default.createElement("div", { className: className, style: { display: "flex" } },
-        React__default.default.createElement("style", null, baseStyles),
-        React__default.default.createElement(proComponents.ProLayout, __assign({}, layoutProps, { logo: logo !== null && logo !== void 0 ? logo : logoElement, 
-            // Theme just the header. If you simply pass in navTheme=realDark, it affects all main content as well.
-            //
-            // What we're doing is telling Ant to use the dark mode algorithm. However, dark mode algorithm doesn't change
-            // the seed tokens for colorTextBase and colorBgBase - it only fills in #fff and #000 for these if they are
-            // unset (""). So that's why further up we may be setting the text color to "".
-            //
-            // I think it doesn't matter too much what is the colorBgBase, since we are setting (Pro-specific) `tokens`
-            // further down for actually setting the fill of the nav sections. What matters is the text color - if we're
-            // showing a dark background, then we want the text to be white.
-            //
-            // We could specify darkAlgorithm to ConfigProvider, but IIRC Pro might be setting some of its own tokens
-            // based on whether dark is being specified to the ProConfigProvider. So that's why we need that.
-            //
-            // ProConfigProvider does first read/inherit the theme/tokens from the surrounding ConfigProvider.
-            headerRender: function (_props, defaultDom) { return (React__default.default.createElement(antd.ConfigProvider, { theme: { token: omitUndefined({ colorTextBase: navTextColor }) } },
-                React__default.default.createElement(proComponents.ProConfigProvider, { dark: !isNavBgLight }, defaultDom))); }, token: {
-                header: omitUndefined(__assign({ colorBgHeader: navBgColor }, layoutColorOverrides)),
-                // Ideally, we'd do something similar to headerRender above, and just specify general dark mode to specify
-                // whether all components/text should be light.
-                // But for some reason it doesn't work, causing the bg color to be ignored (just the default dark Menu color),
-                // *and* the text is just dark as well.
-                // Haven't yet been able to unravel the pro components code to figure out the proper way to do this, so just
-                // bluntly specifying tokens here, as recommended in some GitHub issue.
-                sider: layoutColorOverrides,
-            }, 
-            // Tweak defaults. ProLayout is janky and has terrible docs!
-            layout: (_c = layoutProps.layout) !== null && _c !== void 0 ? _c : "top", fixedHeader: (_d = layoutProps.fixedHeader) !== null && _d !== void 0 ? _d : false, fixSiderbar: 
-            // Doesn't stretch full height if you set this to false and you're in mix mode.
-            layoutProps.layout === "mix"
-                ? undefined
-                : (_e = layoutProps.fixSiderbar) !== null && _e !== void 0 ? _e : false, 
-            // This is always needed if you want layout mix to have effect and look any different from layout side - not clear why this should ever be false.
-            splitMenus: layoutProps.layout === "mix", route: {
-                path: rootUrl,
-                routes: navMenuItems
-                    ? filterNavMenuItemsByConditions(navMenuItems)
-                    : undefined,
-            }, location: {
-                pathname: pathname,
-            }, menu: {
-                // collapsedShowGroupTitle: true,
-                defaultOpenAll: true,
-                // hideMenuWhenCollapsed: true,
-            }, avatarProps: showAvatarMenu
-                ? {
-                    src: avatarImage,
-                    size: "small",
-                    title: avatarLabel,
-                    render: function (_props, dom) {
-                        return (React__default.default.createElement(antd.Dropdown, { menu: {
-                                items: [
-                                    {
-                                        key: "logout",
-                                        icon: React__default.default.createElement(icons.LogoutOutlined, null),
-                                        label: "Sign out",
-                                    },
-                                ],
-                            } }, dom));
-                    },
-                }
-                : undefined, actionsRender: function (_props) {
-                return [actionsChildren];
-            }, menuFooterRender: function (props) {
-                if (props === null || props === void 0 ? void 0 : props.collapsed)
-                    return undefined;
-                return footerChildren;
-            }, onMenuHeaderClick: function (e) { return console.log(e); }, menuItemRender: function (item, dom) { return React__default.default.createElement(Link, { href: item.path }, dom); }, headerTitleRender: function (logo, title, _) {
-                return (React__default.default.createElement(Link, { href: rootUrl },
-                    logo,
-                    title));
-            } }), children)));
+  }
+  const navBgColor = getNavBgColor();
+  const isNavBgLight = isLight(navBgColor);
+  const isOrigTextLight = isLight(origTextColor);
+  const navTextColor = isNavBgLight !== isOrigTextLight ? void 0 : "";
+  if (!isClient) {
+    return null;
+  }
+  const layoutColorOverrides = isNavBgLight ? void 0 : {
+    colorBgCollapsedButton: navBgColor,
+    colorTextCollapsedButtonHover: "rgba(255,255,255,0.85)",
+    colorTextCollapsedButton: "rgba(255,255,255,0.65)",
+    colorMenuBackground: navBgColor,
+    colorBgMenuItemCollapsedHover: "rgba(0,0,0,0.06)",
+    colorBgMenuItemCollapsedSelected: "rgba(0,0,0,0.15)",
+    colorBgMenuItemCollapsedElevated: "rgba(0,0,0,0.85)",
+    colorMenuItemDivider: "rgba(255,255,255,0.15)",
+    colorBgMenuItemHover: "rgba(0,0,0,0.06)",
+    colorBgMenuItemSelected: "rgba(0,0,0,0.15)",
+    colorTextMenuSelected: "#fff",
+    colorTextMenuItemHover: "rgba(255,255,255,0.75)",
+    colorTextMenu: "rgba(255,255,255,0.75)",
+    colorTextMenuSecondary: "rgba(255,255,255,0.65)",
+    colorTextMenuTitle: "rgba(255,255,255,0.95)",
+    colorTextMenuActive: "rgba(255,255,255,0.95)",
+    colorTextSubMenuSelected: "#fff"
+  };
+  return /* @__PURE__ */ React__default.default.createElement("div", { className, style: { display: "flex" } }, /* @__PURE__ */ React__default.default.createElement("style", null, baseStyles), /* @__PURE__ */ React__default.default.createElement(
+    proComponents.ProLayout,
+    __spreadProps$3(__spreadValues$5({}, layoutProps), {
+      logo: logo != null ? logo : logoElement,
+      headerRender: (_props, defaultDom) => /* @__PURE__ */ React__default.default.createElement(
+        antd.ConfigProvider,
+        {
+          theme: { token: omitUndefined({ colorTextBase: navTextColor }) }
+        },
+        /* @__PURE__ */ React__default.default.createElement(proComponents.ProConfigProvider, { dark: !isNavBgLight }, defaultDom)
+      ),
+      token: {
+        header: omitUndefined(__spreadValues$5({
+          colorBgHeader: navBgColor
+        }, layoutColorOverrides)),
+        // Ideally, we'd do something similar to headerRender above, and just specify general dark mode to specify
+        // whether all components/text should be light.
+        // But for some reason it doesn't work, causing the bg color to be ignored (just the default dark Menu color),
+        // *and* the text is just dark as well.
+        // Haven't yet been able to unravel the pro components code to figure out the proper way to do this, so just
+        // bluntly specifying tokens here, as recommended in some GitHub issue.
+        sider: layoutColorOverrides
+      },
+      layout: (_c = layoutProps.layout) != null ? _c : "top",
+      fixedHeader: (_d = layoutProps.fixedHeader) != null ? _d : false,
+      fixSiderbar: (
+        // Doesn't stretch full height if you set this to false and you're in mix mode.
+        layoutProps.layout === "mix" ? void 0 : (_e = layoutProps.fixSiderbar) != null ? _e : false
+      ),
+      splitMenus: layoutProps.layout === "mix",
+      route: {
+        path: rootUrl,
+        routes: navMenuItems ? filterNavMenuItemsByConditions(navMenuItems) : void 0
+      },
+      location: {
+        pathname
+      },
+      menu: {
+        // collapsedShowGroupTitle: true,
+        defaultOpenAll: true
+        // hideMenuWhenCollapsed: true,
+      },
+      avatarProps: showAvatarMenu ? {
+        src: avatarImage,
+        size: "small",
+        title: avatarLabel,
+        render: (_props, dom) => {
+          return /* @__PURE__ */ React__default.default.createElement(
+            antd.Dropdown,
+            {
+              menu: {
+                items: [
+                  {
+                    key: "logout",
+                    icon: /* @__PURE__ */ React__default.default.createElement(icons.LogoutOutlined, null),
+                    label: "Sign out"
+                  }
+                ]
+              }
+            },
+            dom
+          );
+        }
+      } : void 0,
+      actionsRender: (_props) => {
+        return [actionsChildren];
+      },
+      menuFooterRender: (props) => {
+        if (props == null ? void 0 : props.collapsed)
+          return void 0;
+        return footerChildren;
+      },
+      onMenuHeaderClick: (e) => console.log(e),
+      menuItemRender: (item, dom) => /* @__PURE__ */ React__default.default.createElement(Link, { href: item.path }, dom),
+      headerTitleRender: (logo2, title, _) => {
+        return /* @__PURE__ */ React__default.default.createElement(Link, { href: rootUrl }, logo2, title);
+      }
+    }),
+    children
+  ));
 }
 
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
 function generateNavMenuType(isNested, remainingDepth, displayName, defaultValue) {
-    return {
-        displayName: displayName ? displayName : "Nested items",
-        type: "array",
-        defaultValue: defaultValue,
-        advanced: isNested,
-        itemType: {
-            type: "object",
-            nameFunc: function (item) {
-                return item.name || (!displayName ? "Unnamed nested item" : "Unnamed item");
-            },
-            fields: __assign({ path: "href", name: "string", condition: {
-                    advanced: true,
-                    displayName: "Show only if",
-                    type: "exprEditor",
-                } }, (remainingDepth === 0
-                ? {}
-                : {
-                    routes: generateNavMenuType(true, remainingDepth - 1),
-                })),
-        },
-    };
+  return {
+    displayName: displayName ? displayName : "Nested items",
+    type: "array",
+    defaultValue,
+    advanced: isNested,
+    itemType: {
+      type: "object",
+      nameFunc: (item) => item.name || (!displayName ? "Unnamed nested item" : "Unnamed item"),
+      fields: __spreadValues$4({
+        path: "href",
+        name: "string",
+        condition: {
+          advanced: true,
+          displayName: "Show only if",
+          type: "exprEditor"
+        }
+      }, remainingDepth === 0 ? {} : {
+        routes: generateNavMenuType(true, remainingDepth - 1)
+      })
+    }
+  };
 }
-var richLayoutMeta = {
-    name: "hostless-rich-layout",
-    displayName: "Rich App Layout",
-    props: {
-        children: {
-            type: "slot",
-            unstable__isMainContentSlot: true,
-        },
-        actionsChildren: {
-            type: "slot",
-            hidePlaceholder: true,
-        },
-        title: {
-            displayName: "Title",
-            type: "string",
-            defaultValue: "App title",
-        },
-        logo: {
-            displayName: "Logo",
-            type: "imageUrl",
-            hidden: function (ps) { return !ps.logo; },
-        },
-        logoElement: {
-            type: "slot",
-            displayName: "Logo",
-            defaultValue: {
-                type: "img",
-                src: "https://static1.plasmic.app/fake-logo.svg",
-            },
-            hidden: function (ps) { return !!ps.logo; },
-        },
-        navMenuItems: generateNavMenuType(false, 2, "Nav menu items", [
-            {
-                path: "/",
-                name: "Link 1",
-            },
-            {
-                path: "/",
-                name: "Link 2",
-            },
-        ]),
-        layout: {
-            displayName: "Layout",
-            type: "choice",
-            options: ["side", "top", "mix"].map(function (value) { return ({
-                value: value,
-                label: capitalize(value),
-            }); }),
-            defaultValueHint: "top",
-        },
-        simpleNavTheme: {
-            displayName: "Theme",
-            type: "object",
-            fields: {
-                scheme: {
-                    type: "choice",
-                    options: ["default", "primary", "light", "dark", "custom"].map(function (v) { return ({
-                        label: capitalize(v),
-                        value: v,
-                    }); }),
-                    defaultValueHint: "default",
-                },
-                customBgColor: {
-                    type: "color",
-                    displayName: "Custom color",
-                    hidden: function (props) { var _a; return !(((_a = props.simpleNavTheme) === null || _a === void 0 ? void 0 : _a.scheme) === "custom"); },
-                    defaultValue: "#D73B58",
-                },
-            },
-        },
-        // Advanced, show later
-        /*
-        siderMenuType: {
-          displayName: "Sidebar mode",
-          type: "choice",
-          options: ["sub", "group"].map((value) => ({
-            value,
-            label: capitalize(value),
-          })),
-          defaultValue: "sub",
-        },
-        contentWidth: {
-          displayName: "Content width",
+const richLayoutMeta = {
+  name: "hostless-rich-layout",
+  displayName: "Rich App Layout",
+  props: {
+    children: {
+      type: "slot",
+      unstable__isMainContentSlot: true
+    },
+    actionsChildren: {
+      type: "slot",
+      hidePlaceholder: true
+    },
+    title: {
+      displayName: "Title",
+      type: "string",
+      defaultValue: "App title"
+    },
+    logo: {
+      displayName: "Logo",
+      type: "imageUrl",
+      hidden: (ps) => !ps.logo
+    },
+    logoElement: {
+      type: "slot",
+      displayName: "Logo",
+      defaultValue: {
+        type: "img",
+        src: "https://static1.plasmic.app/fake-logo.svg"
+      },
+      hidden: (ps) => !!ps.logo
+    },
+    navMenuItems: generateNavMenuType(false, 2, "Nav menu items", [
+      {
+        path: "/",
+        name: "Link 1"
+      },
+      {
+        path: "/",
+        name: "Link 2"
+      }
+    ]),
+    layout: {
+      displayName: "Layout",
+      type: "choice",
+      options: ["side", "top", "mix"].map((value) => ({
+        value,
+        label: capitalize(value)
+      })),
+      defaultValueHint: "top"
+    },
+    simpleNavTheme: {
+      displayName: "Theme",
+      type: "object",
+      fields: {
+        scheme: {
           type: "choice",
-          options: ["Fluid", "Fixed"],
-          defaultValueHint: "Fluid",
-        },
-        */
-        fixedHeader: {
-            displayName: "Sticky header",
-            type: "boolean",
-            hidden: function (ps) { var _a; return ((_a = ps.layout) !== null && _a !== void 0 ? _a : "top") !== "top"; },
-            defaultValueHint: false,
-        },
-        fixSiderbar: {
-            displayName: "Sticky sidebar",
-            type: "boolean",
-            hidden: function (ps) { var _a; return ((_a = ps.layout) !== null && _a !== void 0 ? _a : "top") !== "side"; },
-            defaultValueHint: false,
-        },
-        /*
-        showAvatarMenu: {
-          displayName: "Show avatar",
-          type: "boolean",
-          defaultValue: true,
-        },
-        avatarLabel: {
-          displayName: "Avatar label",
-          type: "string",
-          defaultValue: "User Name",
-        },
-        avatarImage: {
-          displayName: "Avatar image",
-          type: "imageUrl",
-          defaultValue:
-            "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
-        },
-         */
-        menu: {
-            displayName: "Menu",
-            type: "object",
-            fields: {
-                defaultOpenAll: {
-                    displayName: "Default open all",
-                    type: "boolean",
-                },
-                hideMenuWhenCollapsed: {
-                    // displayName: "",
-                    type: "boolean",
-                },
-            },
+          options: ["default", "primary", "light", "dark", "custom"].map(
+            (v) => ({
+              label: capitalize(v),
+              value: v
+            })
+          ),
+          defaultValueHint: "default"
         },
+        customBgColor: {
+          type: "color",
+          displayName: "Custom color",
+          hidden: (props) => {
+            var _a;
+            return !(((_a = props.simpleNavTheme) == null ? void 0 : _a.scheme) === "custom");
+          },
+          defaultValue: "#D73B58"
+        }
+      }
     },
-    defaultStyles: {
-        width: "full-bleed",
-        height: "stretch",
-        minHeight: "100vh",
+    // Advanced, show later
+    /*
+    siderMenuType: {
+      displayName: "Sidebar mode",
+      type: "choice",
+      options: ["sub", "group"].map((value) => ({
+        value,
+        label: capitalize(value),
+      })),
+      defaultValue: "sub",
     },
-    importName: "RichLayout",
-    importPath: "@plasmicpkgs/plasmic-rich-components",
+    contentWidth: {
+      displayName: "Content width",
+      type: "choice",
+      options: ["Fluid", "Fixed"],
+      defaultValueHint: "Fluid",
+    },
+    */
+    fixedHeader: {
+      displayName: "Sticky header",
+      type: "boolean",
+      hidden: (ps) => {
+        var _a;
+        return ((_a = ps.layout) != null ? _a : "top") !== "top";
+      },
+      defaultValueHint: false
+    },
+    fixSiderbar: {
+      displayName: "Sticky sidebar",
+      type: "boolean",
+      hidden: (ps) => {
+        var _a;
+        return ((_a = ps.layout) != null ? _a : "top") !== "side";
+      },
+      defaultValueHint: false
+    },
+    /*
+    showAvatarMenu: {
+      displayName: "Show avatar",
+      type: "boolean",
+      defaultValue: true,
+    },
+    avatarLabel: {
+      displayName: "Avatar label",
+      type: "string",
+      defaultValue: "User Name",
+    },
+    avatarImage: {
+      displayName: "Avatar image",
+      type: "imageUrl",
+      defaultValue:
+        "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
+    },
+     */
+    menu: {
+      displayName: "Menu",
+      type: "object",
+      fields: {
+        defaultOpenAll: {
+          displayName: "Default open all",
+          type: "boolean"
+        },
+        hideMenuWhenCollapsed: {
+          // displayName: "",
+          type: "boolean"
+        }
+      }
+    }
+  },
+  defaultStyles: {
+    width: "full-bleed",
+    height: "stretch",
+    minHeight: "100vh"
+  },
+  importName: "RichLayout",
+  importPath: "@plasmicpkgs/plasmic-rich-components"
 };
 function registerRichLayout(loader) {
-    registerComponentHelper(loader, RichLayout, richLayoutMeta);
+  registerComponentHelper(loader, RichLayout, richLayoutMeta);
 }
 
 function useSortedFilteredData(data, columns) {
-    var _a = React.useState(""), search = _a[0], setSearch = _a[1];
-    var _b = React.useState(undefined), sortState = _b[0], setSortState = _b[1];
-    var finalData = React__default.default.useMemo(function () {
-        var _a;
-        var filtered = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.filter(function (row) {
-            return fastStringify__default.default(Object.values(row)).toLowerCase().includes(search);
+  const [search, setSearch] = React.useState("");
+  const [sortState, setSortState] = React.useState(void 0);
+  const finalData = React__default.default.useMemo(() => {
+    var _a;
+    const filtered = (_a = data == null ? void 0 : data.data) == null ? void 0 : _a.filter(
+      (row) => fastStringify__default.default(Object.values(row)).toLowerCase().includes(search)
+    );
+    const sorted = (sortState == null ? void 0 : sortState.sorter.column) ? (
+      // We use .sort() rather than sortBy to use localeCompare
+      (() => {
+        var _a2;
+        const cconfig = columns.find(
+          (cc) => {
+            var _a3;
+            return cc.key === ((_a3 = sortState == null ? void 0 : sortState.sorter.column) == null ? void 0 : _a3.key);
+          }
+        );
+        const expr = (_a2 = cconfig.expr) != null ? _a2 : (x) => x;
+        return (filtered != null ? filtered : []).sort((aa, bb) => {
+          var _a3, _b;
+          const a = (_a3 = expr(aa, cconfig.fieldId ? aa == null ? void 0 : aa[cconfig.fieldId] : null)) != null ? _a3 : null, b = (_b = expr(bb, cconfig.fieldId ? bb == null ? void 0 : bb[cconfig.fieldId] : null)) != null ? _b : null;
+          return typeof a === "string" ? a.localeCompare(b != null ? b : "") : typeof b === "string" ? -b.localeCompare(a != null ? a : "") : a - b;
         });
-        var sorted = (sortState === null || sortState === void 0 ? void 0 : sortState.sorter.column)
-            ? // We use .sort() rather than sortBy to use localeCompare
-                (function () {
-                    var _a;
-                    var cconfig = columns.find(function (cc) { var _a; return cc.key === ((_a = sortState === null || sortState === void 0 ? void 0 : sortState.sorter.column) === null || _a === void 0 ? void 0 : _a.key); });
-                    var expr = (_a = cconfig.expr) !== null && _a !== void 0 ? _a : (function (x) { return x; });
-                    return (filtered !== null && filtered !== void 0 ? filtered : []).sort(function (aa, bb) {
-                        var _a, _b;
-                        var a = (_a = expr(aa, cconfig.fieldId ? aa === null || aa === void 0 ? void 0 : aa[cconfig.fieldId] : null)) !== null && _a !== void 0 ? _a : null, b = (_b = expr(bb, cconfig.fieldId ? bb === null || bb === void 0 ? void 0 : bb[cconfig.fieldId] : null)) !== null && _b !== void 0 ? _b : null;
-                        // Default nil to '' here because A < null < z which is weird.
-                        return typeof a === "string"
-                            ? a.localeCompare(b !== null && b !== void 0 ? b : "")
-                            : typeof b === "string"
-                                ? -b.localeCompare(a !== null && a !== void 0 ? a : "")
-                                : a - b;
-                    });
-                })()
-            : filtered;
-        var reversed = (sortState === null || sortState === void 0 ? void 0 : sortState.sorter.order) === "descend" ? sorted === null || sorted === void 0 ? void 0 : sorted.reverse() : sorted;
-        return reversed;
-    }, [data, columns, sortState, search]);
-    return {
-        finalData: finalData,
-        search: search,
-        setSearch: setSearch,
-        setSortState: setSortState,
-    };
+      })()
+    ) : filtered;
+    const reversed = (sortState == null ? void 0 : sortState.sorter.order) === "descend" ? sorted == null ? void 0 : sorted.reverse() : sorted;
+    return reversed;
+  }, [data, columns, sortState, search]);
+  return {
+    finalData,
+    search,
+    setSearch,
+    setSortState
+  };
 }
 function deriveRowKey(data, rowKey) {
-    var _a;
-    if (rowKey) {
-        return rowKey;
-    }
-    var schema = data === null || data === void 0 ? void 0 : data.schema;
-    if (schema) {
-        return (_a = schema.fields[0]) === null || _a === void 0 ? void 0 : _a.id;
-    }
-    return undefined;
+  var _a;
+  if (rowKey) {
+    return rowKey;
+  }
+  const schema = data == null ? void 0 : data.schema;
+  if (schema) {
+    return (_a = schema.fields[0]) == null ? void 0 : _a.id;
+  }
+  return void 0;
 }
 function deriveKeyOfRow(row, rowKey) {
-    if (typeof rowKey === "function") {
-        return rowKey(row);
-    }
-    else if (typeof rowKey === "string") {
-        return row[rowKey];
-    }
-    else {
-        return undefined;
-    }
+  if (typeof rowKey === "function") {
+    return rowKey(row);
+  } else if (typeof rowKey === "string") {
+    return row[rowKey];
+  } else {
+    return void 0;
+  }
 }
 function renderActions(rowActions, row, data, rowKey) {
-    return rowActions.map(function (_action) {
-        var _a;
-        if (_action.type === "item") {
-            return (React__default.default.createElement("a", { key: _action.label, style: {
-                    whiteSpace: "nowrap",
-                }, onClick: function () {
-                    var _a;
-                    return (_a = _action.onClick) === null || _a === void 0 ? void 0 : _a.call(_action, deriveKeyOfRow(row, deriveRowKey(data, rowKey)), row);
-                } }, _action.label));
-        }
-        else {
-            return (React__default.default.createElement(antd.Dropdown, { key: _action.label, menu: {
-                    items: ((_a = _action.children) !== null && _a !== void 0 ? _a : []).map(function (child) { return ({
-                        key: child.label,
-                        label: child.label,
-                        onClick: function () {
-                            var _a;
-                            return (_a = child.onClick) === null || _a === void 0 ? void 0 : _a.call(child, deriveKeyOfRow(row, deriveRowKey(data, rowKey)), row);
-                        },
-                    }); }),
-                } },
-                React__default.default.createElement("a", { href: "javascript: void 0", style: {
-                        whiteSpace: "nowrap",
-                    } }, _action.label)));
-        }
-    });
+  return rowActions.map((_action) => {
+    var _a;
+    if (_action.type === "item") {
+      return /* @__PURE__ */ React__default.default.createElement(
+        "a",
+        {
+          key: _action.label,
+          style: {
+            whiteSpace: "nowrap"
+          },
+          onClick: () => {
+            var _a2;
+            return (_a2 = _action.onClick) == null ? void 0 : _a2.call(
+              _action,
+              deriveKeyOfRow(row, deriveRowKey(data, rowKey)),
+              row
+            );
+          }
+        },
+        _action.label
+      );
+    } else {
+      return /* @__PURE__ */ React__default.default.createElement(
+        antd.Dropdown,
+        {
+          key: _action.label,
+          menu: {
+            items: ((_a = _action.children) != null ? _a : []).map((child) => ({
+              key: child.label,
+              label: child.label,
+              onClick: () => {
+                var _a2;
+                return (_a2 = child.onClick) == null ? void 0 : _a2.call(
+                  child,
+                  deriveKeyOfRow(row, deriveRowKey(data, rowKey)),
+                  row
+                );
+              }
+            }))
+          }
+        },
+        /* @__PURE__ */ React__default.default.createElement(
+          "a",
+          {
+            href: "javascript: void 0",
+            style: {
+              whiteSpace: "nowrap"
+            }
+          },
+          _action.label
+        )
+      );
+    }
+  });
 }
 
-// In this code, ColumnConfigs are Plasmic, while ColumnDefinitions are Ant.
+var __defProp$3 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 function RichTable(props) {
-    var className = props.className, _a = props.data, rawData = _a === void 0 ? {
-        data: [],
-        schema: {
-            id: "inferred",
-            fields: [
-                {
-                    id: "id",
-                    type: "string",
-                    readOnly: false,
-                },
-            ],
-        },
-    } : _a, 
-    // children,
-    _b = props.pagination, 
+  const {
+    className,
+    data: rawData = {
+      data: [],
+      schema: {
+        id: "inferred",
+        fields: [
+          {
+            id: "id",
+            type: "string",
+            readOnly: false
+          }
+        ]
+      }
+    },
     // children,
-    pagination = _b === void 0 ? true : _b, defaultSize = props.defaultSize, title = props.title, addHref = props.addHref, _c = props.pageSize, pageSize = _c === void 0 ? 10 : _c, hideSearch = props.hideSearch, _d = props.hideDensity, hideDensity = _d === void 0 ? true : _d, hideColumnPicker = props.hideColumnPicker, hideExports = props.hideExports, _e = props.hideSelectionBar, hideSelectionBar = _e === void 0 ? true : _e, rowKey = props.rowKey, scopeClassName = props.scopeClassName;
-    var data = normalizeData(rawData);
-    var _f = useColumnDefinitions(data, props), columnDefinitions = _f.columnDefinitions, normalized = _f.normalized;
-    var actionRef = React.useRef();
-    var _g = useSortedFilteredData(data, normalized), finalData = _g.finalData, search = _g.search, setSearch = _g.setSearch, setSortState = _g.setSortState;
-    var rowSelectionProps = useRowSelectionProps(data, props);
-    var isClient = useIsClient();
-    if (!isClient) {
-        return null;
-    }
-    return (React__default.default.createElement("div", { className: "".concat(className, " ").concat(scopeClassName !== null && scopeClassName !== void 0 ? scopeClassName : "") },
-        React__default.default.createElement(proComponents.ProTable, __assign({ rowClassName: props.onRowClick || props.canSelectRows === "click"
-                ? "plasmic-table-row-clickable"
-                : undefined, actionRef: actionRef, columns: columnDefinitions, onChange: function (_pagination, _filters, sorter, _extra) {
-                setSortState({ sorter: sorter });
-            }, style: {
-                width: "100%",
-            }, cardProps: {
-                ghost: true,
-            } }, rowSelectionProps, { dataSource: finalData, rowKey: deriveRowKey(data, rowKey), defaultSize: defaultSize, editable: { type: "multiple" }, search: false, options: {
-                setting: hideColumnPicker
-                    ? false
-                    : {
-                        listsHeight: 400,
-                    },
-                reload: false,
-                density: !hideDensity,
-            }, pagination: pagination
-                ? {
-                    pageSize: pageSize,
-                    onChange: function (page) { return console.log(page); },
-                    showSizeChanger: false,
-                }
-                : false, dateFormatter: "string", headerTitle: title, toolbar: {
-                search: !hideSearch
-                    ? {
-                        value: search,
-                        onChange: function (e) { return setSearch(e.target.value); },
-                        onSearch: function () {
-                            return;
-                        },
-                        placeholder: "Search",
-                    }
-                    : undefined,
-            }, toolBarRender: function () {
-                return [
-                    addHref && (React__default.default.createElement(antd.Button, { key: "button", icon: React__default.default.createElement(icons.PlusOutlined, null), type: "primary", href: addHref }, "Add")),
-                    !hideExports && React__default.default.createElement(ExportMenu, { data: data }),
-                ].filter(function (x) { return !!x; });
-            } })),
-        React__default.default.createElement("style", { dangerouslySetInnerHTML: {
-                __html: "\n          :where(.css-dev-only-do-not-override-1p704s4).ant-pro-table-column-setting-overlay .ant-tree-treenode:hover .ant-pro-table-column-setting-list-item-option {\n            display: none;\n          }\n          .plasmic-table-row-clickable {\n            cursor: pointer;\n          }\n          .ant-pro-table-list-toolbar-right {\n            flex-wrap: initial;\n            flex-shrink: 0;\n          }\n          .ant-pro-table, .ant-pro-table > .ant-pro-card, .ant-pro-table .ant-table-wrapper, .ant-pro-table .ant-spin-nested-loading, .ant-pro-table .ant-table-container {\n            height: 100%;\n          }\n          .ant-pro-table .ant-spin-container {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n          }\n          .ant-pro-table .ant-table {\n            flex-grow: 1;\n            min-height: 0;\n          }\n          .ant-pro-table .ant-pagination {\n            flex-shrink: 0;\n          }\n          .ant-pro-table .ant-table-content {\n            overflow: auto !important;\n            height: 100%;\n          }\n          .ant-pro-table > .ant-pro-card > .ant-pro-card-body {\n            display: flex;\n            flex-direction: column;\n          }\n          .ant-pro-table .ant-table-wrapper {\n            flex-grow: 1;\n            min-height: 0;\n          }\n          .ant-pro-table .ant-table-thead > tr > th, .ant-pro-table .ant-table-thead > tr > td.ant-table-selection-column {\n            position: sticky;\n            top: 0;\n            z-index: 2;\n          }\n          .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-left, .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-right {\n            z-index: 3;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td {\n            z-index: 0;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,.ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-right {\n            z-index: 1;\n          }\n          ".concat(scopeClassName && hideSelectionBar
-                    ? "\n          .".concat(scopeClassName, " .ant-pro-table-alert {\n            display: none;\n          }\n          ")
-                    : "", "\n      "),
-            } })));
-}
-var defaultColumnConfig$1 = function () {
-    return ({
-        key: mkShortId(),
-        isEditableExpr: function () { return false; },
-        disableSorting: false,
-        sortByExpr: undefined,
-        isHidden: false,
-        formatting: {
-            styles: {},
-            align: "left",
-            freeze: "off",
+    pagination = true,
+    defaultSize,
+    title,
+    addHref,
+    pageSize = 10,
+    hideSearch,
+    hideDensity = true,
+    hideColumnPicker,
+    hideExports,
+    hideSelectionBar = true,
+    rowKey,
+    scopeClassName
+  } = props;
+  const data = dataSources.normalizeData(rawData);
+  const { columnDefinitions, normalized } = useColumnDefinitions(data, props);
+  const actionRef = React.useRef();
+  const { finalData, search, setSearch, setSortState } = useSortedFilteredData(
+    data,
+    normalized
+  );
+  const rowSelectionProps = useRowSelectionProps(data, props);
+  const isClient = useIsClient();
+  if (!isClient) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: `${className} ${scopeClassName != null ? scopeClassName : ""}` }, /* @__PURE__ */ React__default.default.createElement(
+    proComponents.ProTable,
+    __spreadProps$2(__spreadValues$3({
+      rowClassName: props.onRowClick || props.canSelectRows === "click" ? "plasmic-table-row-clickable" : void 0,
+      actionRef,
+      columns: columnDefinitions,
+      onChange: (_pagination, _filters, sorter, _extra) => {
+        setSortState({ sorter });
+      },
+      style: {
+        width: "100%"
+      },
+      cardProps: {
+        ghost: true
+      }
+    }, rowSelectionProps), {
+      dataSource: finalData,
+      rowKey: deriveRowKey(data, rowKey),
+      defaultSize,
+      editable: { type: "multiple" },
+      search: false,
+      options: {
+        setting: hideColumnPicker ? false : {
+          listsHeight: 400
         },
-        dataType: "auto",
-    });
-};
+        reload: false,
+        density: !hideDensity
+      },
+      pagination: pagination ? {
+        pageSize,
+        onChange: (page) => console.log(page),
+        showSizeChanger: false
+      } : false,
+      dateFormatter: "string",
+      headerTitle: title,
+      toolbar: {
+        search: !hideSearch ? {
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          onSearch: () => {
+            return;
+          },
+          placeholder: "Search"
+        } : void 0
+      },
+      toolBarRender: () => [
+        addHref && /* @__PURE__ */ React__default.default.createElement(
+          antd.Button,
+          {
+            key: "button",
+            icon: /* @__PURE__ */ React__default.default.createElement(icons.PlusOutlined, null),
+            type: "primary",
+            href: addHref
+          },
+          "Add"
+        ),
+        !hideExports && /* @__PURE__ */ React__default.default.createElement(ExportMenu, { data })
+      ].filter((x) => !!x)
+    })
+  ), /* @__PURE__ */ React__default.default.createElement(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `
+          :where(.css-dev-only-do-not-override-1p704s4).ant-pro-table-column-setting-overlay .ant-tree-treenode:hover .ant-pro-table-column-setting-list-item-option {
+            display: none;
+          }
+          .plasmic-table-row-clickable {
+            cursor: pointer;
+          }
+          .ant-pro-table-list-toolbar-right {
+            flex-wrap: initial;
+            flex-shrink: 0;
+          }
+          .ant-pro-table, .ant-pro-table > .ant-pro-card, .ant-pro-table .ant-table-wrapper, .ant-pro-table .ant-spin-nested-loading, .ant-pro-table .ant-table-container {
+            height: 100%;
+          }
+          .ant-pro-table .ant-spin-container {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+          }
+          .ant-pro-table .ant-table {
+            flex-grow: 1;
+            min-height: 0;
+          }
+          .ant-pro-table .ant-pagination {
+            flex-shrink: 0;
+          }
+          .ant-pro-table .ant-table-content {
+            overflow: auto !important;
+            height: 100%;
+          }
+          .ant-pro-table > .ant-pro-card > .ant-pro-card-body {
+            display: flex;
+            flex-direction: column;
+          }
+          .ant-pro-table .ant-table-wrapper {
+            flex-grow: 1;
+            min-height: 0;
+          }
+          .ant-pro-table .ant-table-thead > tr > th, .ant-pro-table .ant-table-thead > tr > td.ant-table-selection-column {
+            position: sticky;
+            top: 0;
+            z-index: 2;
+          }
+          .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-left, .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-right {
+            z-index: 3;
+          }
+          .ant-pro-table .ant-table-tbody > tr > td {
+            z-index: 0;
+          }
+          .ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,.ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-right {
+            z-index: 1;
+          }
+          ${scopeClassName && hideSelectionBar ? `
+          .${scopeClassName} .ant-pro-table-alert {
+            display: none;
+          }
+          ` : ""}
+      `
+      }
+    }
+  ));
+}
+const defaultColumnConfig$1 = () => ({
+  key: mkShortId(),
+  isEditableExpr: () => false,
+  disableSorting: false,
+  sortByExpr: void 0,
+  isHidden: false,
+  formatting: {
+    styles: {},
+    align: "left",
+    freeze: "off"
+  },
+  dataType: "auto"
+});
 function useColumnDefinitions(data, props) {
-    var fields = props.fields, setControlContextData = props.setControlContextData, rowActions = props.rowActions;
-    return React__default.default.useMemo(function () {
-        var schema = data === null || data === void 0 ? void 0 : data.schema;
-        if (!data || !schema) {
-            return { normalized: [], columnDefinitions: [] };
-        }
-        var _a = deriveFieldConfigs(fields !== null && fields !== void 0 ? fields : [], schema, function (field) { return (__assign(__assign({}, defaultColumnConfig$1()), (field && {
-            key: field.id,
-            fieldId: field.id,
-            title: field.label || field.id,
-            expr: function (currentItem) { return currentItem[field.id]; },
-        }))); }), mergedFields = _a.mergedFields, minimalFullLengthFields = _a.minimalFullLengthFields;
-        setControlContextData === null || setControlContextData === void 0 ? void 0 : setControlContextData(__assign(__assign({}, data), { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields }));
-        var normalized = mergedFields;
-        var columnDefinitions = normalized
-            .filter(function (cconfig) { return !cconfig.isHidden; })
-            .map(function (cconfig, _columnIndex, _columnsArray) {
-            var columnDefinition = {
-                dataIndex: cconfig.fieldId,
-                title: cconfig.title,
-                // dataIndex: cconfig,
-                key: cconfig.key,
-                valueType: deriveValueType(cconfig),
-                // To come later
-                readonly: false,
-                sorter: true,
-                copyable: false,
-                ellipsis: false,
-                tip: undefined,
-                formItemProps: {
-                    rules: [],
-                },
-                disable: false,
-                valueEnum: undefined,
-                search: undefined,
-                hideInSearch: false,
-                renderFormItem: function (_, _a) {
-                    var defaultRender = _a.defaultRender;
-                    return defaultRender(_);
-                },
-                render: function (value, record, rowIndex) {
-                    return renderValue(record, cconfig);
-                },
-            };
-            return columnDefinition;
-        });
-        var rowKey = props.rowKey;
-        if (rowActions && rowActions.length > 0) {
-            columnDefinitions.push({
-                title: "Actions",
-                valueType: "option",
-                key: "__plasmicActions",
-                fixed: "right",
-                className: props.themeResetClassName,
-                render: function (_text, row) { return __spreadArray([], renderActions(rowActions, row, data, rowKey), true); },
-            });
+  const { fields, setControlContextData, rowActions } = props;
+  return React__default.default.useMemo(() => {
+    const schema = data == null ? void 0 : data.schema;
+    if (!data || !schema) {
+      return { normalized: [], columnDefinitions: [] };
+    }
+    const { mergedFields, minimalFullLengthFields } = dataSources.deriveFieldConfigs(fields != null ? fields : [], schema, (field) => __spreadValues$3(__spreadValues$3({}, defaultColumnConfig$1()), field && {
+      key: field.id,
+      fieldId: field.id,
+      title: field.label || field.id,
+      expr: (currentItem) => currentItem[field.id]
+    }));
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$2(__spreadValues$3({}, data), { mergedFields, minimalFullLengthFields }));
+    const normalized = mergedFields;
+    const columnDefinitions = normalized.filter((cconfig) => !cconfig.isHidden).map((cconfig, _columnIndex, _columnsArray) => {
+      const columnDefinition = {
+        dataIndex: cconfig.fieldId,
+        title: cconfig.title,
+        // dataIndex: cconfig,
+        key: cconfig.key,
+        valueType: deriveValueType(cconfig),
+        // To come later
+        readonly: false,
+        sorter: true,
+        copyable: false,
+        ellipsis: false,
+        tip: void 0,
+        formItemProps: {
+          rules: []
+        },
+        disable: false,
+        valueEnum: void 0,
+        search: void 0,
+        hideInSearch: false,
+        renderFormItem: (_, { defaultRender }) => {
+          return defaultRender(_);
+        },
+        render: (value, record, rowIndex) => {
+          return renderValue(record, cconfig);
         }
-        return { normalized: normalized, columnDefinitions: columnDefinitions };
-    }, [fields, data, setControlContextData, rowActions]);
+      };
+      return columnDefinition;
+    });
+    const rowKey = props.rowKey;
+    if (rowActions && rowActions.length > 0) {
+      columnDefinitions.push({
+        title: "Actions",
+        valueType: "option",
+        key: "__plasmicActions",
+        fixed: "right",
+        className: props.themeResetClassName,
+        render: (_text, row) => [
+          ...renderActions(rowActions, row, data, rowKey)
+        ]
+      });
+    }
+    return { normalized, columnDefinitions };
+  }, [fields, data, setControlContextData, rowActions]);
 }
 function useRowSelectionProps(data, props) {
-    var canSelectRows = props.canSelectRows, selectedRowKey = props.selectedRowKey, onRowSelectionChanged = props.onRowSelectionChanged, rowKey = props.rowKey, onRowClick = props.onRowClick;
-    var deriveSelectedRowKeys = function () {
-        if (!canSelectRows ||
-            canSelectRows === "none" ||
-            !deriveRowKey(data, rowKey)) {
-            return [];
-        }
-        if (typeof selectedRowKey === "string") {
-            return [selectedRowKey];
-        }
-        else if (Array.isArray(selectedRowKey)) {
-            if (canSelectRows === "single" || canSelectRows === "click") {
-                return selectedRowKey.slice(0, 1);
-            }
-            else {
-                return selectedRowKey;
-            }
-        }
-        else {
-            return [];
+  const {
+    canSelectRows,
+    selectedRowKey,
+    onRowSelectionChanged,
+    rowKey,
+    onRowClick
+  } = props;
+  const deriveSelectedRowKeys = () => {
+    if (!canSelectRows || canSelectRows === "none" || !deriveRowKey(data, rowKey)) {
+      return [];
+    }
+    if (typeof selectedRowKey === "string") {
+      return [selectedRowKey];
+    } else if (Array.isArray(selectedRowKey)) {
+      if (canSelectRows === "single" || canSelectRows === "click") {
+        return selectedRowKey.slice(0, 1);
+      } else {
+        return selectedRowKey;
+      }
+    } else {
+      return [];
+    }
+  };
+  const rowSelection = canSelectRows && canSelectRows !== "none" ? __spreadValues$3({
+    type: canSelectRows === "single" || canSelectRows === "click" ? "radio" : "checkbox",
+    selectedRowKeys: deriveSelectedRowKeys(),
+    onChange: (rowKeys, rows) => {
+      onRowSelectionChanged == null ? void 0 : onRowSelectionChanged(rowKeys, rows);
+    },
+    alwaysShowAlert: true
+  }, canSelectRows === "click" && {
+    renderCell: () => null,
+    columnWidth: 0,
+    columnTitle: null,
+    hideSelectAll: true
+  }) : void 0;
+  return {
+    rowSelection,
+    onRow: (row) => ({
+      onClick: (event) => {
+        const key = deriveKeyOfRow(row, deriveRowKey(data, rowKey));
+        if (key != null && !isInteractable(event.target)) {
+          if (canSelectRows === "click") {
+            onRowSelectionChanged == null ? void 0 : onRowSelectionChanged([key], [row]);
+          }
+          onRowClick == null ? void 0 : onRowClick(key, row, event);
         }
-    };
-    var rowSelection = canSelectRows && canSelectRows !== "none"
-        ? __assign({ type: canSelectRows === "single" || canSelectRows === "click"
-                ? "radio"
-                : "checkbox", selectedRowKeys: deriveSelectedRowKeys(), onChange: function (rowKeys, rows) {
-                onRowSelectionChanged === null || onRowSelectionChanged === void 0 ? void 0 : onRowSelectionChanged(rowKeys, rows);
-            }, alwaysShowAlert: true }, (canSelectRows === "click" && {
-            renderCell: function () { return null; },
-            columnWidth: 0,
-            columnTitle: null,
-            hideSelectAll: true,
-        })) : undefined;
-    return {
-        rowSelection: rowSelection,
-        onRow: function (row) { return ({
-            onClick: function (event) {
-                var key = deriveKeyOfRow(row, deriveRowKey(data, rowKey));
-                if (key != null && !isInteractable(event.target)) {
-                    if (canSelectRows === "click") {
-                        onRowSelectionChanged === null || onRowSelectionChanged === void 0 ? void 0 : onRowSelectionChanged([key], [row]);
-                    }
-                    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(key, row, event);
-                }
-            },
-        }); },
-    };
+      }
+    })
+  };
 }
 function ExportMenu(props) {
-    var _this = this;
-    var data = props.data;
-    return (React__default.default.createElement(antd.Dropdown, { key: "menu", menu: {
-            items: [
-                {
-                    label: "Download as CSV",
-                    key: "csv",
-                    onClick: function () { return __awaiter(_this, void 0, void 0, function () {
-                        var writer, dataStr, filename, blob, link, url;
-                        var _a, _b;
-                        return __generator(this, function (_c) {
-                            writer = csvWriterBrowser.createObjectCsvStringifier({
-                                header: (_b = (_a = data === null || data === void 0 ? void 0 : data.schema) === null || _a === void 0 ? void 0 : _a.fields.map(function (f) { return ({
-                                    id: f.id,
-                                    title: f.id,
-                                }); })) !== null && _b !== void 0 ? _b : [],
-                            });
-                            dataStr = writer.getHeaderString() +
-                                writer.stringifyRecords(data === null || data === void 0 ? void 0 : data.data);
-                            filename = "data.csv";
-                            blob = new Blob([dataStr], {
-                                type: "text/csv;charset=utf-8;",
-                            });
-                            if (navigator.msSaveBlob) {
-                                // In case of IE 10+
-                                navigator.msSaveBlob(blob, filename);
-                            }
-                            else {
-                                link = document.createElement("a");
-                                if (link.download !== undefined) {
-                                    url = URL.createObjectURL(blob);
-                                    link.setAttribute("href", url);
-                                    link.setAttribute("download", filename);
-                                    link.style.visibility = "hidden";
-                                    document.body.appendChild(link);
-                                    link.click();
-                                    document.body.removeChild(link);
-                                }
-                            }
-                            return [2 /*return*/];
-                        });
-                    }); },
-                },
-                {
-                    label: "Download as JSON",
-                    key: "json",
-                    onClick: function () {
-                        var dataStr = fastStringify__default.default(data === null || data === void 0 ? void 0 : data.data);
-                        var dataUri = "data:application/json;charset=utf-8, ".concat(encodeURIComponent(dataStr));
-                        var exportFileDefaultName = "data.json";
-                        var linkElement = document.createElement("a");
-                        linkElement.setAttribute("href", dataUri);
-                        linkElement.setAttribute("download", exportFileDefaultName);
-                        linkElement.click();
-                    },
-                },
-            ],
-        } },
-        React__default.default.createElement(antd.Button, null,
-            React__default.default.createElement(icons.EllipsisOutlined, null))));
+  const { data } = props;
+  return /* @__PURE__ */ React__default.default.createElement(
+    antd.Dropdown,
+    {
+      key: "menu",
+      menu: {
+        items: [
+          {
+            label: "Download as CSV",
+            key: "csv",
+            onClick: async () => {
+              var _a, _b;
+              const writer = csvWriterBrowser.createObjectCsvStringifier({
+                header: (_b = (_a = data == null ? void 0 : data.schema) == null ? void 0 : _a.fields.map((f) => ({
+                  id: f.id,
+                  title: f.id
+                }))) != null ? _b : []
+              });
+              const dataStr = writer.getHeaderString() + writer.stringifyRecords(data == null ? void 0 : data.data);
+              const filename = "data.csv";
+              const blob = new Blob([dataStr], {
+                type: "text/csv;charset=utf-8;"
+              });
+              if (navigator.msSaveBlob) {
+                navigator.msSaveBlob(blob, filename);
+              } else {
+                const link = document.createElement("a");
+                if (link.download !== void 0) {
+                  const url = URL.createObjectURL(blob);
+                  link.setAttribute("href", url);
+                  link.setAttribute("download", filename);
+                  link.style.visibility = "hidden";
+                  document.body.appendChild(link);
+                  link.click();
+                  document.body.removeChild(link);
+                }
+              }
+            }
+          },
+          {
+            label: "Download as JSON",
+            key: "json",
+            onClick: () => {
+              const dataStr = fastStringify__default.default(data == null ? void 0 : data.data);
+              const dataUri = `data:application/json;charset=utf-8, ${encodeURIComponent(
+                dataStr
+              )}`;
+              const exportFileDefaultName = "data.json";
+              const linkElement = document.createElement("a");
+              linkElement.setAttribute("href", dataUri);
+              linkElement.setAttribute("download", exportFileDefaultName);
+              linkElement.click();
+            }
+          }
+        ]
+      }
+    },
+    /* @__PURE__ */ React__default.default.createElement(antd.Button, null, /* @__PURE__ */ React__default.default.createElement(icons.EllipsisOutlined, null))
+  );
 }
 
 function dataProp() {
-    return {
-        type: "dataSourceOpData",
-        description: "The data to display",
-    };
+  return {
+    type: "dataSourceOpData",
+    description: "The data to display"
+  };
 }
 function commonProps() {
-    return {
-        pagination: {
-            type: "boolean",
-            advanced: true,
-            defaultValueHint: true,
-        },
-        pageSize: {
-            type: "number",
-            defaultValueHint: 10,
-            advanced: true,
-        },
-        hideSearch: {
-            type: "boolean",
-            description: "Hides the search toolbar",
-            advanced: true,
-        },
-    };
+  return {
+    pagination: {
+      type: "boolean",
+      advanced: true,
+      defaultValueHint: true
+    },
+    pageSize: {
+      type: "number",
+      defaultValueHint: 10,
+      advanced: true
+    },
+    hideSearch: {
+      type: "boolean",
+      description: "Hides the search toolbar",
+      advanced: true
+    }
+  };
 }
 function rowActionsProp() {
-    return {
-        type: "array",
-        displayName: "Row actions",
-        advanced: true,
-        itemType: {
+  return {
+    type: "array",
+    displayName: "Row actions",
+    advanced: true,
+    itemType: {
+      type: "object",
+      nameFunc: (item) => item.label,
+      fields: {
+        type: {
+          type: "choice",
+          options: ["item", "menu"],
+          defaultValue: "item"
+        },
+        label: {
+          type: "string",
+          displayName: "Action label"
+        },
+        children: {
+          type: "array",
+          displayName: "Menu items",
+          itemType: {
             type: "object",
-            nameFunc: function (item) { return item.label; },
             fields: {
-                type: {
-                    type: "choice",
-                    options: ["item", "menu"],
-                    defaultValue: "item",
-                },
-                label: {
-                    type: "string",
-                    displayName: "Action label",
-                },
-                children: {
-                    type: "array",
-                    displayName: "Menu items",
-                    itemType: {
-                        type: "object",
-                        fields: {
-                            label: {
-                                type: "string",
-                                displayName: "Action label",
-                            },
-                            onClick: {
-                                type: "eventHandler",
-                                argTypes: [
-                                    { name: "rowKey", type: "string" },
-                                    { name: "row", type: "object" },
-                                ],
-                            },
-                        },
-                    },
-                    hidden: function (_ps, _ctx, _a) {
-                        var item = _a.item;
-                        return item.type !== "menu";
-                    },
-                },
-                onClick: {
-                    type: "eventHandler",
-                    displayName: "Action",
-                    argTypes: [
-                        { name: "rowKey", type: "string" },
-                        { name: "row", type: "object" },
-                    ],
-                    hidden: function (_ps, _ctx, _a) {
-                        var item = _a.item;
-                        return item.type !== "item";
-                    },
-                },
-            },
+              label: {
+                type: "string",
+                displayName: "Action label"
+              },
+              onClick: {
+                type: "eventHandler",
+                argTypes: [
+                  { name: "rowKey", type: "string" },
+                  { name: "row", type: "object" }
+                ]
+              }
+            }
+          },
+          hidden: (_ps, _ctx, { item }) => item.type !== "menu"
         },
-    };
+        onClick: {
+          type: "eventHandler",
+          displayName: "Action",
+          argTypes: [
+            { name: "rowKey", type: "string" },
+            { name: "row", type: "object" }
+          ],
+          hidden: (_ps, _ctx, { item }) => item.type !== "item"
+        }
+      }
+    }
+  };
 }
 function onRowClickProp() {
-    return {
-        type: "eventHandler",
-        displayName: "On row clicked",
-        argTypes: [
-            { name: "rowKey", type: "string" },
-            { name: "row", type: "object" },
-            { name: "event", type: "object" },
-        ],
-    };
+  return {
+    type: "eventHandler",
+    displayName: "On row clicked",
+    argTypes: [
+      { name: "rowKey", type: "string" },
+      { name: "row", type: "object" },
+      { name: "event", type: "object" }
+    ]
+  };
 }
 
-var tableHelpers = {
-    states: {
-        selectedRow: {
-            onChangeArgsToValue: function (rowKeys, rows) {
-                return rows[0];
-            },
-        },
-        selectedRows: {
-            onChangeArgsToValue: function (rowKeys, rows) {
-                return rows;
-            },
+var __defProp$2 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const tableHelpers = {
+  states: {
+    selectedRow: {
+      onChangeArgsToValue: (rowKeys, rows) => {
+        return rows[0];
+      }
+    },
+    selectedRows: {
+      onChangeArgsToValue: (rowKeys, rows) => {
+        return rows;
+      }
+    },
+    selectedRowKey: {
+      onChangeArgsToValue: (rowKeys, rows) => {
+        return rowKeys;
+      }
+    }
+  }
+};
+const dataTableMeta = {
+  name: "hostless-rich-table",
+  displayName: "Table",
+  defaultStyles: {
+    width: "stretch",
+    padding: "16px",
+    maxHeight: "100%"
+  },
+  props: __spreadProps$1(__spreadValues$2({
+    data: dataProp(),
+    fields: buildFieldsPropType({}),
+    canSelectRows: {
+      type: "choice",
+      displayName: "Select rows?",
+      options: [
+        { label: "No", value: "none" },
+        { label: "By clicking a row", value: "click" },
+        { label: "Using radio buttons", value: "single" },
+        { label: "Using checkboxes", value: "multiple" }
+      ],
+      defaultValueHint: "none",
+      description: "Lets user select table rows by clicking on a row, or using radio buttons, or checkboxes if multiple rows can be selected together. If you have interactive elements in your row and you don't want clicking on them to select the row, you may use radio buttons instead."
+    },
+    rowKey: {
+      type: "string",
+      displayName: "Row key",
+      helpText: "Column key to use as row key; can also be a function that takes in a row and returns a key value",
+      hidden: (ps) => !ps.canSelectRows || ps.canSelectRows === "none",
+      defaultValueHint: (ps) => {
+        const derivedRowKey = deriveRowKey(ps.data, ps.rowKey);
+        return derivedRowKey !== void 0 ? `${derivedRowKey}` : void 0;
+      }
+    },
+    selectedRowKey: {
+      type: "string",
+      displayName: "Selected Row Key",
+      hidden: (ps) => ps.canSelectRows !== "single",
+      advanced: true
+    },
+    selectedRowKeys: {
+      type: "array",
+      displayName: "Selected Row Keys",
+      hidden: (ps) => ps.canSelectRows !== "multiple",
+      advanced: true
+    },
+    onRowSelectionChanged: {
+      type: "eventHandler",
+      displayName: "On row selection changed",
+      argTypes: [
+        { name: "rowKeys", type: "object" },
+        { name: "rows", type: "object" }
+      ]
+    },
+    onRowClick: onRowClickProp(),
+    rowActions: rowActionsProp(),
+    defaultSize: {
+      displayName: "Density",
+      type: "choice",
+      options: [
+        {
+          value: "large",
+          label: "Larger"
         },
-        selectedRowKey: {
-            onChangeArgsToValue: function (rowKeys, rows) {
-                return rowKeys;
-            },
+        {
+          value: "middle",
+          label: "Medium"
         },
+        {
+          value: "small",
+          label: "Compact"
+        }
+      ],
+      defaultValueHint: "large",
+      advanced: true
+    }
+  }, commonProps()), {
+    hideExports: {
+      type: "boolean",
+      description: "Hides the button for exporting table data to CSV",
+      advanced: true
     },
-};
-var dataTableMeta = {
-    name: "hostless-rich-table",
-    displayName: "Table",
-    defaultStyles: {
-        width: "stretch",
-        padding: "16px",
-        maxHeight: "100%",
+    hideDensity: {
+      type: "boolean",
+      description: "Hides the control for changing the density of the table",
+      advanced: true,
+      defaultValueHint: true
     },
-    props: __assign(__assign({ data: dataProp(), fields: buildFieldsPropType({}), canSelectRows: {
-            type: "choice",
-            displayName: "Select rows?",
-            options: [
-                { label: "No", value: "none" },
-                { label: "By clicking a row", value: "click" },
-                { label: "Using radio buttons", value: "single" },
-                { label: "Using checkboxes", value: "multiple" },
-            ],
-            defaultValueHint: "none",
-            description: "Lets user select table rows by clicking on a row, or using radio buttons, or checkboxes if multiple rows can be selected together. If you have interactive elements in your row and you don't want clicking on them to select the row, you may use radio buttons instead.",
-        }, rowKey: {
-            type: "string",
-            displayName: "Row key",
-            helpText: "Column key to use as row key; can also be a function that takes in a row and returns a key value",
-            hidden: function (ps) { return !ps.canSelectRows || ps.canSelectRows === "none"; },
-            defaultValueHint: function (ps) {
-                var derivedRowKey = deriveRowKey(ps.data, ps.rowKey);
-                return derivedRowKey !== undefined ? "".concat(derivedRowKey) : undefined;
-            },
-        }, selectedRowKey: {
-            type: "string",
-            displayName: "Selected Row Key",
-            hidden: function (ps) { return ps.canSelectRows !== "single"; },
-            advanced: true,
-        }, selectedRowKeys: {
-            type: "array",
-            displayName: "Selected Row Keys",
-            hidden: function (ps) { return ps.canSelectRows !== "multiple"; },
-            advanced: true,
-        }, onRowSelectionChanged: {
-            type: "eventHandler",
-            displayName: "On row selection changed",
-            argTypes: [
-                { name: "rowKeys", type: "object" },
-                { name: "rows", type: "object" },
-            ],
-        }, onRowClick: onRowClickProp(), rowActions: rowActionsProp(), defaultSize: {
-            displayName: "Density",
-            type: "choice",
-            options: [
-                {
-                    value: "large",
-                    label: "Larger",
-                },
-                {
-                    value: "middle",
-                    label: "Medium",
-                },
-                {
-                    value: "small",
-                    label: "Compact",
-                },
-            ],
-            defaultValueHint: "large",
-            advanced: true,
-        } }, commonProps()), { hideExports: {
-            type: "boolean",
-            description: "Hides the button for exporting table data to CSV",
-            advanced: true,
-        }, hideDensity: {
-            type: "boolean",
-            description: "Hides the control for changing the density of the table",
-            advanced: true,
-            defaultValueHint: true,
-        }, hideColumnPicker: {
-            type: "boolean",
-            description: "Hides the control for reordering and pinning columns",
-            advanced: true,
-        }, hideSelectionBar: {
-            type: "boolean",
-            description: "Hides the toolbar that allows the user to clear selection",
-            advanced: true,
-            hidden: function (ps) { return !ps.canSelectRows || ps.canSelectRows === "none"; },
-            defaultValueHint: true,
-        }, scopeClassName: {
-            type: "styleScopeClass",
-            scopeName: "instance",
-        }, themeResetClassName: {
-            type: "themeResetClass",
-            targetAllTags: true,
-        } }),
-    states: {
-        selectedRowKey: __assign({ type: "writable", valueProp: "selectedRowKey", onChangeProp: "onRowSelectionChanged", variableType: "text" }, tableHelpers.states.selectedRowKey),
-        selectedRow: __assign({ type: "readonly", onChangeProp: "onRowSelectionChanged", variableType: "object" }, tableHelpers.states.selectedRow),
-        selectedRows: __assign({ type: "readonly", onChangeProp: "onRowSelectionChanged", variableType: "array" }, tableHelpers.states.selectedRows),
+    hideColumnPicker: {
+      type: "boolean",
+      description: "Hides the control for reordering and pinning columns",
+      advanced: true
     },
-    componentHelpers: {
-        helpers: tableHelpers,
-        importName: "tableHelpers",
-        importPath: "@plasmicpkgs/plasmic-rich-components",
+    hideSelectionBar: {
+      type: "boolean",
+      description: "Hides the toolbar that allows the user to clear selection",
+      advanced: true,
+      hidden: (ps) => !ps.canSelectRows || ps.canSelectRows === "none",
+      defaultValueHint: true
     },
-    importName: "RichTable",
-    importPath: "@plasmicpkgs/plasmic-rich-components",
+    scopeClassName: {
+      type: "styleScopeClass",
+      scopeName: "instance"
+    },
+    themeResetClassName: {
+      type: "themeResetClass",
+      targetAllTags: true
+    }
+  }),
+  states: {
+    selectedRowKey: __spreadValues$2({
+      type: "writable",
+      valueProp: "selectedRowKey",
+      onChangeProp: "onRowSelectionChanged",
+      variableType: "text"
+    }, tableHelpers.states.selectedRowKey),
+    selectedRow: __spreadValues$2({
+      type: "readonly",
+      onChangeProp: "onRowSelectionChanged",
+      variableType: "object"
+    }, tableHelpers.states.selectedRow),
+    selectedRows: __spreadValues$2({
+      type: "readonly",
+      onChangeProp: "onRowSelectionChanged",
+      variableType: "array"
+    }, tableHelpers.states.selectedRows)
+  },
+  componentHelpers: {
+    helpers: tableHelpers,
+    importName: "tableHelpers",
+    importPath: "@plasmicpkgs/plasmic-rich-components"
+  },
+  importName: "RichTable",
+  importPath: "@plasmicpkgs/plasmic-rich-components"
 };
 function registerRichTable(loader) {
-    registerComponentHelper(loader, RichTable, dataTableMeta);
+  registerComponentHelper(loader, RichTable, dataTableMeta);
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const listCss = `
+.plasmic-list--grid .ant-list-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.plasmic-list-search {
+  /* Matches RichTable search. */
+  max-width: 200px;
+  margin-bottom: 8px;
+}
+
+.plasmic-list-item-content--unbordered {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.plasmic-list-item--clickable:hover {
+  background-color: #8881;
+}
+
+.plasmic-list-item-image {
+  max-width: 80px;
+  max-height: 80px;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  border-radius: 8px;
 }
 
-// Should really be using token colorFillTertiary instead of #8881.
-var listCss = "\n.plasmic-list--grid .ant-list-items {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 16px;\n}\n\n.plasmic-list-search {\n  /* Matches RichTable search. */\n  max-width: 200px;\n  margin-bottom: 8px;\n}\n\n.plasmic-list-item-content--unbordered {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.plasmic-list-item--clickable:hover {\n  background-color: #8881;\n}\n\n.plasmic-list-item-image {\n  max-width: 80px;\n  max-height: 80px;\n  aspect-ratio: 1/1;\n  object-fit: cover;\n  border-radius: 8px;\n}\n\n/* Unsure why needed, but cards otherwise can be much narrower. */\n.plasmic-list-item-card {\n  width: 100%;\n}\n\n.plasmic-list-item-card-cover {\n  max-height: 300px;\n  aspect-ratio: 1/1;\n  object-fit: cover;\n}\n";
+/* Unsure why needed, but cards otherwise can be much narrower. */
+.plasmic-list-item-card {
+  width: 100%;
+}
+
+.plasmic-list-item-card-cover {
+  max-height: 300px;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+}
+`;
 function RichList(props) {
-    var _a = props.data, rawData = _a === void 0 ? {
-        data: [],
-        schema: {
-            id: "inferred",
-            fields: [
-                {
-                    id: "id",
-                    type: "string",
-                    readOnly: false,
-                },
-            ],
-        },
-    } : _a, _b = props.type, type = _b === void 0 ? "list" : _b, _c = props.bordered, bordered = _c === void 0 ? true : _c, className = props.className, size = props.size, header = props.header, footer = props.footer, _d = props.rowActions, rowActions = _d === void 0 ? [] : _d; props.title; var _e = props.pageSize, pageSize = _e === void 0 ? 10 : _e, hideSearch = props.hideSearch, rowKey = props.rowKey, pagination = props.pagination, onRowClick = props.onRowClick; __rest(props, ["data", "type", "bordered", "className", "size", "header", "footer", "rowActions", "title", "pageSize", "hideSearch", "rowKey", "pagination", "onRowClick"]);
-    var data = normalizeData(rawData);
-    var _f = useRoleDefinitions(data, props), normalized = _f.normalized, roleConfigs = _f.finalRoles;
-    React.useRef();
-    // Simply ignore the linkTo if it's not a function.
-    var linkTo = typeof props.linkTo === "function" ? props.linkTo : undefined;
-    var _g = useSortedFilteredData(data, normalized), finalData = _g.finalData, search = _g.search, setSearch = _g.setSearch; _g.setSortState;
-    var actuallyBordered = type === "list" ? bordered : false;
-    return (React__default.default.createElement("div", { className: className },
-        React__default.default.createElement("style", null, listCss),
-        !hideSearch && (React__default.default.createElement(antd.Input.Search, { className: "plasmic-list-search", onChange: function (e) { return setSearch(e.target.value); }, value: search, placeholder: "Search" })),
-        React__default.default.createElement(antd.List, { className: classNames__default.default({
-                // We use CSS grid instead of the built-in Ant grid which can only define fixed # columns, and only at screen (and not container) breakpoints.
-                "plasmic-list--grid": type === "grid",
-            }), size: size, header: header, footer: footer, dataSource: finalData, itemLayout: "horizontal", bordered: actuallyBordered, pagination: pagination
-                ? {
-                    pageSize: pageSize,
-                    showSizeChanger: false,
-                }
-                : false, renderItem: function (record, index) {
-                var _a;
-                // Currently, actions are nested inside the list item / card, so can't have both linkTo and actions or else hydration error.
-                // Eventually can fork the Ant components to make the main linkTo area and actions not nest.
-                var actions = renderActions(rowActions, record, data, rowKey);
-                // actions={[
-                //   <SettingOutlined key="setting" />,
-                //   <EditOutlined key="edit" />,
-                //   <EllipsisOutlined key="ellipsis" />,
-                // ]}
-                var image = maybe(maybeRenderString(record, (_a = roleConfigs.image) === null || _a === void 0 ? void 0 : _a[0]), function (src) { return (React__default.default.createElement("img", { src: src, className: type === "list"
-                        ? "plasmic-list-item-image"
-                        : "plasmic-list-item-card-cover" })); });
-                var content = (React__default.default.createElement(ListItemContent, { bordered: actuallyBordered, image: type === "list" ? image : undefined, title: multiRenderValue(record, roleConfigs.title), subtitle: multiRenderValue(record, roleConfigs.subtitle), beforeTitle: multiRenderValue(record, roleConfigs.beforeTitle), afterTitle: multiRenderValue(record, roleConfigs.afterTitle), content: multiRenderValue(record, roleConfigs.content) }));
-                function makeLinkWrapper() {
-                    if ((actions !== null && actions !== void 0 ? actions : []).length > 0)
-                        return undefined;
-                    var href = linkTo === null || linkTo === void 0 ? void 0 : linkTo(record);
-                    if (!href && !onRowClick)
-                        return undefined;
-                    var _linkWrapper = function (x) { return (React__default.default.createElement("a", { href: href, onClick: function (event) {
-                            var key = deriveKeyOfRow(record, deriveRowKey(data, rowKey));
-                            if (key != null &&
-                                !isInteractable(event.target)) {
-                                onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(key, record, event);
-                            }
-                        } }, x)); };
-                    return _linkWrapper;
-                }
-                var linkWrapper = makeLinkWrapper();
-                var hasLink = !!linkWrapper;
-                function maybeLink(x) {
-                    var _a;
-                    return (_a = linkWrapper === null || linkWrapper === void 0 ? void 0 : linkWrapper(x)) !== null && _a !== void 0 ? _a : x;
+  const _a = props, {
+    data: rawData = {
+      data: [],
+      schema: {
+        id: "inferred",
+        fields: [
+          {
+            id: "id",
+            type: "string",
+            readOnly: false
+          }
+        ]
+      }
+    },
+    type = "list",
+    bordered = true,
+    className,
+    size,
+    header,
+    footer,
+    rowActions = [],
+    title,
+    pageSize = 10,
+    hideSearch,
+    rowKey,
+    pagination,
+    onRowClick
+  } = _a; __objRest(_a, [
+    "data",
+    "type",
+    "bordered",
+    "className",
+    "size",
+    "header",
+    "footer",
+    "rowActions",
+    "title",
+    "pageSize",
+    "hideSearch",
+    "rowKey",
+    "pagination",
+    "onRowClick"
+  ]);
+  const data = dataSources.normalizeData(rawData);
+  const { normalized, finalRoles: roleConfigs } = useRoleDefinitions(
+    data,
+    props
+  );
+  React.useRef();
+  const linkTo = typeof props.linkTo === "function" ? props.linkTo : void 0;
+  const { finalData, search, setSearch, setSortState } = useSortedFilteredData(
+    data,
+    normalized
+  );
+  const actuallyBordered = type === "list" ? bordered : false;
+  return /* @__PURE__ */ React__default.default.createElement("div", { className }, /* @__PURE__ */ React__default.default.createElement("style", null, listCss), !hideSearch && /* @__PURE__ */ React__default.default.createElement(
+    antd.Input.Search,
+    {
+      className: "plasmic-list-search",
+      onChange: (e) => setSearch(e.target.value),
+      value: search,
+      placeholder: "Search"
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(
+    antd.List,
+    {
+      className: classNames__default.default({
+        // We use CSS grid instead of the built-in Ant grid which can only define fixed # columns, and only at screen (and not container) breakpoints.
+        "plasmic-list--grid": type === "grid"
+      }),
+      size,
+      header,
+      footer,
+      dataSource: finalData,
+      itemLayout: "horizontal",
+      bordered: actuallyBordered,
+      pagination: pagination ? {
+        pageSize,
+        showSizeChanger: false
+      } : false,
+      renderItem: (record, index) => {
+        var _a2;
+        const actions = renderActions(rowActions, record, data, rowKey);
+        const image = maybe(
+          maybeRenderString(record, (_a2 = roleConfigs.image) == null ? void 0 : _a2[0]),
+          (src) => /* @__PURE__ */ React__default.default.createElement(
+            "img",
+            {
+              src,
+              className: type === "list" ? "plasmic-list-item-image" : "plasmic-list-item-card-cover"
+            }
+          )
+        );
+        const content = /* @__PURE__ */ React__default.default.createElement(
+          ListItemContent,
+          {
+            bordered: actuallyBordered,
+            image: type === "list" ? image : void 0,
+            title: multiRenderValue(record, roleConfigs.title),
+            subtitle: multiRenderValue(record, roleConfigs.subtitle),
+            beforeTitle: multiRenderValue(record, roleConfigs.beforeTitle),
+            afterTitle: multiRenderValue(record, roleConfigs.afterTitle),
+            content: multiRenderValue(record, roleConfigs.content)
+          }
+        );
+        function makeLinkWrapper() {
+          if ((actions != null ? actions : []).length > 0)
+            return void 0;
+          const href = linkTo == null ? void 0 : linkTo(record);
+          if (!href && !onRowClick)
+            return void 0;
+          const _linkWrapper = (x) => /* @__PURE__ */ React__default.default.createElement(
+            "a",
+            {
+              href,
+              onClick: (event) => {
+                const key = deriveKeyOfRow(
+                  record,
+                  deriveRowKey(data, rowKey)
+                );
+                if (key != null && !isInteractable(event.target)) {
+                  onRowClick == null ? void 0 : onRowClick(key, record, event);
                 }
-                return type === "grid" ? (React__default.default.createElement(antd.List.Item, null, maybeLink(React__default.default.createElement(antd.Card, { className: "plasmic-list-item-card", size: "small", cover: image, hoverable: hasLink, actions: actions }, content)))) : (maybeLink(React__default.default.createElement(antd.List.Item, { actions: actions, className: classNames__default.default({
-                        "plasmic-list-item--clickable": hasLink,
-                    }) }, content)));
-            } })));
+              }
+            },
+            x
+          );
+          return _linkWrapper;
+        }
+        const linkWrapper = makeLinkWrapper();
+        const hasLink = !!linkWrapper;
+        function maybeLink(x) {
+          var _a3;
+          return (_a3 = linkWrapper == null ? void 0 : linkWrapper(x)) != null ? _a3 : x;
+        }
+        return type === "grid" ? /* @__PURE__ */ React__default.default.createElement(antd.List.Item, null, maybeLink(
+          /* @__PURE__ */ React__default.default.createElement(
+            antd.Card,
+            {
+              className: "plasmic-list-item-card",
+              size: "small",
+              cover: image,
+              hoverable: hasLink,
+              actions
+            },
+            content
+          )
+        )) : maybeLink(
+          /* @__PURE__ */ React__default.default.createElement(
+            antd.List.Item,
+            {
+              actions,
+              className: classNames__default.default({
+                "plasmic-list-item--clickable": hasLink
+              })
+            },
+            content
+          )
+        );
+      }
+    }
+  ));
 }
 function ListItemContent(_a) {
-    var className = _a.className, title = _a.title, subtitle = _a.subtitle, image = _a.image, beforeTitle = _a.beforeTitle, afterTitle = _a.afterTitle, content = _a.content, bordered = _a.bordered, others = __rest(_a, ["className", "title", "subtitle", "image", "beforeTitle", "afterTitle", "content", "bordered"]);
-    var prefixCls = "ant-list";
-    var classString = classNames__default.default("".concat(prefixCls, "-item-meta"), className);
-    return (React__default.default.createElement("div", __assign({}, others, { className: classNames__default.default({
-            "plasmic-list-item-content--unbordered": !bordered,
-        }, classString) }),
-        image && React__default.default.createElement("div", { className: "".concat(prefixCls, "-item-meta-avatar") }, image),
-        React__default.default.createElement("div", { className: "".concat(prefixCls, "-item-meta-content"), style: { display: "flex", flexDirection: "column", gap: 4 } },
-            beforeTitle && (React__default.default.createElement("div", null,
-                React__default.default.createElement(antd.Tag, null, beforeTitle))),
-            React__default.default.createElement("div", { style: { display: "flex", gap: 8 } },
-                title && (React__default.default.createElement("h4", { className: "".concat(prefixCls, "-item-meta-title"), style: { margin: 0 } }, title)),
-                afterTitle && (React__default.default.createElement("div", { className: "".concat(prefixCls, "-item-meta-description") }, afterTitle))),
-            subtitle && (React__default.default.createElement("div", { className: "".concat(prefixCls, "-item-meta-description") }, subtitle)),
-            content && React__default.default.createElement("div", null, content))));
-}
-var defaultColumnConfig = function () {
-    return ({
-        key: mkShortId(),
-        isEditableExpr: function () { return false; },
-        disableSorting: false,
-        sortByExpr: undefined,
-        isHidden: false,
-        formatting: {
-            styles: {},
-            align: "left",
-            freeze: "off",
-        },
-        dataType: "auto",
-        role: undefined,
-    });
-};
-var roles = [
-    "content",
+  var _b = _a, {
+    className,
+    title,
+    subtitle,
+    image,
+    beforeTitle,
+    afterTitle,
+    content,
+    bordered
+  } = _b, others = __objRest(_b, [
+    "className",
     "title",
     "subtitle",
+    "image",
     "beforeTitle",
     "afterTitle",
-    "image",
-    "unset",
+    "content",
+    "bordered"
+  ]);
+  const prefixCls = "ant-list";
+  const classString = classNames__default.default(`${prefixCls}-item-meta`, className);
+  return /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    __spreadProps(__spreadValues$1({}, others), {
+      className: classNames__default.default(
+        {
+          "plasmic-list-item-content--unbordered": !bordered
+        },
+        classString
+      )
+    }),
+    image && /* @__PURE__ */ React__default.default.createElement("div", { className: `${prefixCls}-item-meta-avatar` }, image),
+    /* @__PURE__ */ React__default.default.createElement(
+      "div",
+      {
+        className: `${prefixCls}-item-meta-content`,
+        style: { display: "flex", flexDirection: "column", gap: 4 }
+      },
+      beforeTitle && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(antd.Tag, null, beforeTitle)),
+      /* @__PURE__ */ React__default.default.createElement("div", { style: { display: "flex", gap: 8 } }, title && /* @__PURE__ */ React__default.default.createElement(
+        "h4",
+        {
+          className: `${prefixCls}-item-meta-title`,
+          style: { margin: 0 }
+        },
+        title
+      ), afterTitle && /* @__PURE__ */ React__default.default.createElement("div", { className: `${prefixCls}-item-meta-description` }, afterTitle)),
+      subtitle && /* @__PURE__ */ React__default.default.createElement("div", { className: `${prefixCls}-item-meta-description` }, subtitle),
+      content && /* @__PURE__ */ React__default.default.createElement("div", null, content)
+    )
+  );
+}
+const defaultColumnConfig = () => ({
+  key: mkShortId(),
+  isEditableExpr: () => false,
+  disableSorting: false,
+  sortByExpr: void 0,
+  isHidden: false,
+  formatting: {
+    styles: {},
+    align: "left",
+    freeze: "off"
+  },
+  dataType: "auto",
+  role: void 0
+});
+const roles = [
+  "content",
+  "title",
+  "subtitle",
+  "beforeTitle",
+  "afterTitle",
+  "image",
+  "unset"
 ];
-// This component is different from Table/Details since it has various different roles, so the UX is one of setting the choices for each role rather than a single list of fields.
-//
-// We first infer the defaults for each role.
-// This we always need to do because we want the choices to be 'stable'.
-// If the user sets one of the roles, without setting the others, we don't want to shift things around on the other roles as a result.
-// So the defaults need to always be there (they would only be irrelevant if all roles that would have had defaults were set/overridden by the user).
-//
-// Then, we layer on the user role choices.
-//
-// One UX wart is that unsetting a role will restore the default selection instead of clearing it.
-// User must know to actually set fieldId to none or (for arrays) remove the item.
-// Just another reason to fill in few roles by default.
 function useRoleDefinitions(data, props) {
-    var fields = props.fields, setControlContextData = props.setControlContextData, rowActions = props.rowActions;
-    return React__default.default.useMemo(function () {
-        var _a, _b, _c, _d;
-        var schema = data === null || data === void 0 ? void 0 : data.schema;
-        var schemaMap = new Map((_a = data === null || data === void 0 ? void 0 : data.schema) === null || _a === void 0 ? void 0 : _a.fields.map(function (f) { return [f.id, f]; }));
-        if (!data || !schema) {
-            return { normalized: [], roleConfigs: {}, finalRoles: {} };
-        }
-        function tagFieldConfigs(role) {
-            var _a;
-            if (role !== "unset") {
-                return ensureArray((_a = props[role]) !== null && _a !== void 0 ? _a : []).map(function (field) {
-                    return __assign(__assign({}, field), { role: role });
-                });
-            }
-            else {
-                return [];
-            }
-        }
-        // This is only being computed to get the default role choices.
-        var _e = deriveFieldConfigs(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], tagFieldConfigs("image"), true), tagFieldConfigs("content"), true), tagFieldConfigs("title"), true), tagFieldConfigs("beforeTitle"), true), tagFieldConfigs("afterTitle"), true), tagFieldConfigs("subtitle"), true), schema, function (field) { return (__assign(__assign({}, defaultColumnConfig()), (field && {
-            key: field.id,
-            fieldId: field.id,
-            title: field.label || field.id,
-            // undefined means not yet determined in this routine, not 'unset'
-            role: undefined,
-            expr: function (currentItem) { return currentItem[field.id]; },
-        }))); }), mergedFields = _e.mergedFields, minimalFullLengthFields = _e.minimalFullLengthFields;
-        var normalized = mergedFields;
-        // Find a good default image field.
-        // Filter mergedFields where there are mostly values (in the sampleRows) that are a string that looks like a URL or path to an image file.
-        // Of these, prefer the one with a name like image, picture, pic, img, avatar, profile, photo, icon.
-        // Otherwise, prefer the one with a title with that substring.
-        // Otherwise, pick any remaining one.
-        if (data.data.length > 0 &&
-            !mergedFields.some(function (field) { return field.role === "image"; })) {
-            var sampleRows_1 = Array.from(new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (i) {
-                return Math.round((i / 9) * (data.data.length - 1));
-            }))).map(function (i) { return data.data[i]; });
-            var imageFieldCandidates = mergedFields.filter(function (field) {
-                return !field.role &&
-                    sampleRows_1.filter(function (row) { return field.fieldId && isLikeImage(row[field.fieldId]); }).length >=
-                        sampleRows_1.length / 2;
-            });
-            var imageField = (_c = (_b = imageFieldCandidates.find(function (f) {
-                var _a;
-                return (_a = f.fieldId) === null || _a === void 0 ? void 0 : _a.match(/^(image|picture|pic|img|avatar|profile|photo|icon)$/i);
-            })) !== null && _b !== void 0 ? _b : imageFieldCandidates.find(function (f) {
-                var _a;
-                return (_a = f.fieldId) === null || _a === void 0 ? void 0 : _a.match(/.*(image|picture|pic|img|avatar|profile|photo|icon).*/i);
-            })) !== null && _c !== void 0 ? _c : imageFieldCandidates[0];
-            if (imageField) {
-                imageField.role = "image";
-            }
-        }
-        // Find a good default title field, just based on the field name.
-        if (!mergedFields.some(function (field) { return field.role === "title"; })) {
-            var titleField = mergedFields.find(function (field) {
-                var _a;
-                return !field.role &&
-                    ((_a = field.fieldId) === null || _a === void 0 ? void 0 : _a.toLowerCase().match(/^(title|name|first[ _-]?name|full[ _-]?name)$/));
-            });
-            if (titleField) {
-                titleField.role = "title";
-            }
+  const { fields, setControlContextData, rowActions } = props;
+  return React__default.default.useMemo(() => {
+    var _a, _b, _c, _d;
+    const schema = data == null ? void 0 : data.schema;
+    const schemaMap = new Map((_a = data == null ? void 0 : data.schema) == null ? void 0 : _a.fields.map((f) => [f.id, f]));
+    if (!data || !schema) {
+      return { normalized: [], roleConfigs: {}, finalRoles: {} };
+    }
+    function tagFieldConfigs(role) {
+      var _a2;
+      if (role !== "unset") {
+        return ensureArray((_a2 = props[role]) != null ? _a2 : []).map((field) => {
+          return __spreadProps(__spreadValues$1({}, field), {
+            role
+          });
+        });
+      } else {
+        return [];
+      }
+    }
+    const { mergedFields, minimalFullLengthFields } = dataSources.deriveFieldConfigs(
+      [
+        ...tagFieldConfigs("image"),
+        ...tagFieldConfigs("content"),
+        ...tagFieldConfigs("title"),
+        ...tagFieldConfigs("beforeTitle"),
+        ...tagFieldConfigs("afterTitle"),
+        ...tagFieldConfigs("subtitle")
+      ],
+      schema,
+      (field) => __spreadValues$1(__spreadValues$1({}, defaultColumnConfig()), field && {
+        key: field.id,
+        fieldId: field.id,
+        title: field.label || field.id,
+        // undefined means not yet determined in this routine, not 'unset'
+        role: void 0,
+        expr: (currentItem) => currentItem[field.id]
+      })
+    );
+    const normalized = mergedFields;
+    if (data.data.length > 0 && !mergedFields.some((field) => field.role === "image")) {
+      const sampleRows = Array.from(
+        new Set(
+          [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(
+            (i) => Math.round(i / 9 * (data.data.length - 1))
+          )
+        )
+      ).map((i) => data.data[i]);
+      const imageFieldCandidates = mergedFields.filter(
+        (field) => !field.role && sampleRows.filter(
+          (row) => field.fieldId && isLikeImage(row[field.fieldId])
+        ).length >= sampleRows.length / 2
+      );
+      const imageField = (_c = (_b = imageFieldCandidates.find(
+        (f) => {
+          var _a2;
+          return (_a2 = f.fieldId) == null ? void 0 : _a2.match(
+            /^(image|picture|pic|img|avatar|profile|photo|icon)$/i
+          );
         }
-        // Find a good default content field - just any remaining text field.
-        if (!mergedFields.some(function (field) { return field.role === "content"; })) {
-            var contentField = mergedFields.find(function (field) {
-                var _a;
-                return !field.role &&
-                    field.fieldId &&
-                    ((_a = schemaMap.get(field.fieldId)) === null || _a === void 0 ? void 0 : _a.type) === "string";
-            });
-            if (contentField) {
-                contentField.role = "content";
-            }
+      )) != null ? _b : imageFieldCandidates.find(
+        (f) => {
+          var _a2;
+          return (_a2 = f.fieldId) == null ? void 0 : _a2.match(
+            /.*(image|picture|pic|img|avatar|profile|photo|icon).*/i
+          );
         }
-        var roleConfigs = ensure(groupBy__default.default(mergedFields, function (f) { return f.role; }));
-        var finalRoles = {};
-        for (var _i = 0, roles_1 = roles; _i < roles_1.length; _i++) {
-            var role = roles_1[_i];
-            if (role !== "unset") {
-                finalRoles[role] = (_d = maybe(props[role], ensureArray)) !== null && _d !== void 0 ? _d : roleConfigs[role];
-            }
+      )) != null ? _c : imageFieldCandidates[0];
+      if (imageField) {
+        imageField.role = "image";
+      }
+    }
+    if (!mergedFields.some((field) => field.role === "title")) {
+      const titleField = mergedFields.find(
+        (field) => {
+          var _a2;
+          return !field.role && ((_a2 = field.fieldId) == null ? void 0 : _a2.toLowerCase().match(/^(title|name|first[ _-]?name|full[ _-]?name)$/));
         }
-        var fieldIdToRole = new Map(mergedFields.map(function (f) { return [f.fieldId, f.role]; }));
-        for (var _f = 0, minimalFullLengthFields_1 = minimalFullLengthFields; _f < minimalFullLengthFields_1.length; _f++) {
-            var f = minimalFullLengthFields_1[_f];
-            f.role = fieldIdToRole.get(f.fieldId);
+      );
+      if (titleField) {
+        titleField.role = "title";
+      }
+    }
+    if (!mergedFields.some((field) => field.role === "content")) {
+      const contentField = mergedFields.find(
+        (field) => {
+          var _a2;
+          return !field.role && field.fieldId && ((_a2 = schemaMap.get(field.fieldId)) == null ? void 0 : _a2.type) === "string";
         }
-        setControlContextData === null || setControlContextData === void 0 ? void 0 : setControlContextData(__assign(__assign({}, data), { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields }));
-        return { normalized: normalized, roleConfigs: roleConfigs, finalRoles: finalRoles };
-    }, [fields, data, setControlContextData, rowActions]);
+      );
+      if (contentField) {
+        contentField.role = "content";
+      }
+    }
+    const roleConfigs = ensure(groupBy__default.default(mergedFields, (f) => f.role));
+    const finalRoles = {};
+    for (const role of roles) {
+      if (role !== "unset") {
+        finalRoles[role] = (_d = maybe(props[role], ensureArray)) != null ? _d : roleConfigs[role];
+      }
+    }
+    const fieldIdToRole = new Map(mergedFields.map((f) => [f.fieldId, f.role]));
+    for (const f of minimalFullLengthFields) {
+      f.role = fieldIdToRole.get(f.fieldId);
+    }
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps(__spreadValues$1({}, data), { mergedFields, minimalFullLengthFields }));
+    return { normalized, roleConfigs, finalRoles };
+  }, [fields, data, setControlContextData, rowActions]);
 }
 
-function roleProp(_a) {
-    var role = _a.role, _b = _a.singular, singular = _b === void 0 ? false : _b, _c = _a.advanced, advanced = _c === void 0 ? false : _c, displayName = _a.displayName;
-    return singular
-        ? {
-            type: "object",
-            displayName: displayName,
-            advanced: advanced,
-            hidden: function (ps) { return !ps.data; },
-            nameFunc: function (item) {
-                return maybe(item, function (i) {
-                    return i.isHidden ? "Hidden" : i.fieldId || "Custom value";
-                });
-            },
-            fields: getFieldSubprops({
-                canChangeField: true,
-                noTitle: true,
-            }),
-            defaultValueHint: function (_props, contextData) {
-                var _a;
-                return ((_a = contextData === null || contextData === void 0 ? void 0 : contextData.minimalFullLengthFields) !== null && _a !== void 0 ? _a : []).find(function (f) { return f.role === role; });
-            },
-        }
-        : buildFieldsPropType({
-            displayName: displayName,
-            advanced: advanced,
-            noTitle: true,
-            canChangeField: true,
-            minimalValue: function (_props, contextData) {
-                var _a;
-                return ((_a = contextData === null || contextData === void 0 ? void 0 : contextData.minimalFullLengthFields) !== null && _a !== void 0 ? _a : []).filter(function (f) { return f.role === role; });
-            },
-        });
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function roleProp({
+  role,
+  singular = false,
+  advanced = false,
+  displayName
+}) {
+  return singular ? {
+    type: "object",
+    displayName,
+    advanced,
+    hidden: (ps) => !ps.data,
+    nameFunc: (item) => maybe(
+      item,
+      (i) => i.isHidden ? "Hidden" : i.fieldId || "Custom value"
+    ),
+    fields: getFieldSubprops({
+      canChangeField: true,
+      noTitle: true
+    }),
+    defaultValueHint: (_props, contextData) => {
+      var _a;
+      return ((_a = contextData == null ? void 0 : contextData.minimalFullLengthFields) != null ? _a : []).find(
+        (f) => f.role === role
+      );
+    }
+  } : buildFieldsPropType({
+    displayName,
+    advanced,
+    noTitle: true,
+    canChangeField: true,
+    minimalValue: (_props, contextData) => {
+      var _a;
+      return ((_a = contextData == null ? void 0 : contextData.minimalFullLengthFields) != null ? _a : []).filter(
+        (f) => f.role === role
+      );
+    }
+  });
 }
-var richListMeta = {
-    name: "hostless-rich-list",
-    displayName: "Data List",
-    defaultStyles: {
-        width: "stretch",
-        padding: "16px",
-        maxHeight: "100%",
+const richListMeta = {
+  name: "hostless-rich-list",
+  displayName: "Data List",
+  defaultStyles: {
+    width: "stretch",
+    padding: "16px",
+    maxHeight: "100%"
+  },
+  templates: {
+    grid: {
+      props: {}
+    }
+  },
+  props: __spreadValues({
+    data: dataProp(),
+    type: {
+      type: "choice",
+      options: [
+        { value: "list", label: "List" },
+        { value: "grid", label: "Grid" }
+      ],
+      defaultValueHint: "list"
     },
-    props: __assign({ data: dataProp(), type: {
-            type: "choice",
-            options: [
-                { value: "list", label: "List" },
-                { value: "grid", label: "Grid" },
-            ],
-            defaultValueHint: "list",
-        }, header: {
-            type: "slot",
-            hidePlaceholder: true,
-        }, footer: {
-            type: "slot",
-            hidePlaceholder: true,
-        }, title: roleProp({ role: "title" }), content: roleProp({ role: "content" }), image: roleProp({ role: "image", singular: true }), subtitle: roleProp({
-            role: "subtitle",
-            displayName: "Subtitle",
-            advanced: true,
-        }), 
-        // Haven't styled these yet!
-        // beforeTitle: roleProp({ role: "beforeTitle", advanced: true }),
-        // afterTitle: roleProp({ role: "afterTitle", advanced: true }),
-        linkTo: {
-            type: "function",
-            control: {
-                type: "href",
-            },
-            argNames: ["currentItem"],
-            argValues: function (_props, ctx) { var _a; return [(_a = ctx === null || ctx === void 0 ? void 0 : ctx.data) === null || _a === void 0 ? void 0 : _a[0]]; },
-        }, onRowClick: onRowClickProp(), rowActions: rowActionsProp(), bordered: {
-            type: "boolean",
-            defaultValue: true,
-            hidden: function (ps) { var _a; return ((_a = ps.type) !== null && _a !== void 0 ? _a : "list") !== "list"; },
-        } }, commonProps()),
-    importName: "RichList",
-    importPath: "@plasmicpkgs/plasmic-rich-components",
+    header: {
+      type: "slot",
+      hidePlaceholder: true
+    },
+    footer: {
+      type: "slot",
+      hidePlaceholder: true
+    },
+    title: roleProp({ role: "title" }),
+    content: roleProp({ role: "content" }),
+    image: roleProp({ role: "image", singular: true }),
+    subtitle: roleProp({
+      role: "subtitle",
+      displayName: "Subtitle",
+      advanced: true
+    }),
+    // Haven't styled these yet!
+    // beforeTitle: roleProp({ role: "beforeTitle", advanced: true }),
+    // afterTitle: roleProp({ role: "afterTitle", advanced: true }),
+    linkTo: {
+      type: "function",
+      control: {
+        type: "href"
+      },
+      argNames: ["currentItem"],
+      argValues: (_props, ctx) => {
+        var _a;
+        return [(_a = ctx == null ? void 0 : ctx.data) == null ? void 0 : _a[0]];
+      }
+    },
+    onRowClick: onRowClickProp(),
+    rowActions: rowActionsProp(),
+    bordered: {
+      type: "boolean",
+      defaultValue: true,
+      hidden: (ps) => {
+        var _a;
+        return ((_a = ps.type) != null ? _a : "list") !== "list";
+      }
+    }
+  }, commonProps()),
+  importName: "RichList",
+  importPath: "@plasmicpkgs/plasmic-rich-components"
 };
 function registerRichList(loader) {
-    registerComponentHelper(loader, RichList, richListMeta);
+  registerComponentHelper(loader, RichList, richListMeta);
 }
 
 function registerAll(loader) {
-    registerRichLayout(loader);
-    registerRichList(loader);
-    registerRichTable(loader);
-    registerRichDetails(loader);
+  registerRichLayout(loader);
+  registerRichList(loader);
+  registerRichTable(loader);
+  registerRichDetails(loader);
 }
 
 exports.RichDetails = RichDetails;