@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

package/lib/cjs/components/Chart/index.js

@@ -0,0 +1,131 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => Chart_default
+});
+var import_react = __toModule(require("react"));
+var import_react_chartjs_2 = __toModule(require("react-chartjs-2"));
+var import_color = __toModule(require("color"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_chartjs_adapter_moment = __toModule(require("chartjs-adapter-moment"));
+var import_utils = __toModule(require("./utils"));
+const getConfig = (variant, options) => {
+  const config = {
+    small: {
+      gradient: { alpha: 0.3 },
+      scales: { y: { display: false }, x: { display: false, type: "time" } }
+    },
+    default: {
+      gradient: { alpha: 0.1 },
+      scales: {
+        y: {
+          display: true,
+          grid: {
+            color: options.gridColor,
+            borderDash: [4, 4],
+            tickWidth: 0,
+            tickLength: 18,
+            borderWidth: 0
+          },
+          ticks: { callback: import_utils.valueFormatter, labelOffset: -3 }
+        },
+        x: {
+          display: true,
+          grid: {
+            color: options.gridColor,
+            borderDash: [4, 4],
+            tickWidth: 0,
+            tickLength: 15,
+            borderWidth: 0
+          },
+          bounds: "ticks",
+          type: "time",
+          time: options.timeOptions
+        }
+      }
+    }
+  };
+  return config[variant];
+};
+const defaultValue = {
+  variant: "default",
+  valueKey: "value",
+  timeOptions: { unit: "month", displayFormats: { month: "MMM." } }
+};
+var Chart_default = ({
+  data,
+  color,
+  variant = defaultValue.variant,
+  valueKey = defaultValue.valueKey,
+  timeOptions = defaultValue.timeOptions,
+  ...chartProps
+}) => {
+  const theme = (0, import_styled_components.useTheme)();
+  const config = (0, import_react.useMemo)(() => getConfig(variant, { gridColor: theme.colors.neutral.c40, timeOptions }), [variant, theme.colors.neutral.c40, timeOptions]);
+  (0, import_react.useEffect)(() => {
+    import_react_chartjs_2.defaults.font = import_utils.fontConfig;
+  }, []);
+  const chartData = (0, import_react.useMemo)(() => ({
+    datasets: [
+      {
+        borderColor: color,
+        borderWidth: 2,
+        fill: "start",
+        backgroundColor: (context) => {
+          const chart = context.chart;
+          const { ctx, chartArea } = chart;
+          if (!chartArea)
+            return null;
+          const gradient = ctx.createLinearGradient(0, 0, 0, chartArea.height / 1.2);
+          gradient.addColorStop(0, (0, import_color.default)(color).alpha(config.gradient.alpha).string());
+          gradient.addColorStop(1, (0, import_color.default)(color).alpha(0).string());
+          return gradient;
+        },
+        pointRadius: 0,
+        pointHitRadius: 0,
+        data: data.map(({ date: x, [`${valueKey}`]: y }) => ({ x, y }))
+      }
+    ]
+  }), [color, data, valueKey, variant]);
+  const options = (0, import_react.useMemo)(() => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { tooltips: { enabled: false }, legend: { display: false } },
+    animation: false,
+    elements: {
+      points: { radius: 0 },
+      line: {
+        tension: 0.2
+      }
+    },
+    scales: config.scales
+  }), [config.scales]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react_chartjs_2.Line, {
+    data: chartData,
+    options,
+    ...chartProps,
+    redraw: true
+  });
+};
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/Chart/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Chart/index.tsx"],
+  "sourcesContent": ["import React, { useEffect, useMemo } from \"react\";\nimport { Line, defaults, ChartProps } from \"react-chartjs-2\";\nimport type { ScriptableContext } from \"chart.js\";\nimport Color from \"color\";\nimport { useTheme } from \"styled-components\";\nimport \"chartjs-adapter-moment\";\n\nimport type { Item, timeOptions } from \"./types\";\nimport { fontConfig, valueFormatter } from \"./utils\";\n\ntype LineProps = React.ComponentProps<typeof Line>;\n\nexport type Props = Omit<ChartProps, \"type\" | \"data\" | \"options\"> & {\n  data: Array<Item>;\n  color: string;\n  variant?: \"default\" | \"small\";\n  valueKey?: string;\n  /*\n   ** This prop is used to format the x-axis using time options from chart.js.\n   ** See https://www.chartjs.org/docs/latest/axes/cartesian/time.html#time-units\n   */\n  timeOptions?: timeOptions;\n};\n\n/*\n ** @DEV: I'm sorry, I spent too much time to try to type scales. Types from chart.js\n ** are horrible. I hope someone in the future will have more luck than me.\n */\ntype GetConfigOutput = { gradient: { alpha: number }; scales: unknown };\n\n/*\n ** Returns the correct config based on the variant\n */\nconst getConfig = (\n  variant: NonNullable<Props[\"variant\"]>,\n  options: NonNullable<Pick<Props, \"timeOptions\">> & { gridColor: string },\n): GetConfigOutput => {\n  const config: { small: GetConfigOutput; default: GetConfigOutput } = {\n    small: {\n      gradient: { alpha: 0.3 },\n      scales: { y: { display: false }, x: { display: false, type: \"time\" } },\n    },\n    default: {\n      gradient: { alpha: 0.1 },\n      scales: {\n        y: {\n          display: true,\n          grid: {\n            color: options.gridColor,\n            borderDash: [4, 4],\n            tickWidth: 0,\n            tickLength: 18,\n\n            // This is an hack to don't render a duplicate axis\n            borderWidth: 0,\n          },\n          ticks: { callback: valueFormatter, labelOffset: -3 },\n        },\n        x: {\n          display: true,\n          grid: {\n            color: options.gridColor,\n            borderDash: [4, 4],\n            tickWidth: 0,\n            tickLength: 15,\n\n            // Don't render a duplicate axis\n            borderWidth: 0,\n          },\n          // always display first/last ticks\n          bounds: \"ticks\",\n          type: \"time\",\n          // control how the tickers on the x-axis are formatted\n          time: options.timeOptions,\n        },\n      },\n    },\n  };\n\n  return config[variant];\n};\n\nconst defaultValue: {\n  variant: NonNullable<Props[\"variant\"]>;\n  valueKey: NonNullable<Props[\"valueKey\"]>;\n  timeOptions: NonNullable<Props[\"timeOptions\"]>;\n} = {\n  variant: \"default\",\n  valueKey: \"value\",\n  timeOptions: { unit: \"month\", displayFormats: { month: \"MMM.\" } },\n};\n\n/**\n * @remarks This component must have a parent that has only it as a child and it must be in relative position!\n * @privateRemarks Don't name this component \"Chart\", that will conflict with the Chart.js library cuz of the adapter\n */\nexport default ({\n  data,\n  color,\n  variant = defaultValue.variant,\n  valueKey = defaultValue.valueKey,\n  timeOptions = defaultValue.timeOptions,\n  ...chartProps\n}: Props): JSX.Element => {\n  const theme = useTheme();\n  const config = useMemo(\n    () => getConfig(variant, { gridColor: theme.colors.neutral.c40, timeOptions }),\n    [variant, theme.colors.neutral.c40, timeOptions],\n  );\n\n  // inject default font configuration at mount\n  useEffect(() => {\n    defaults.font = fontConfig;\n  }, []);\n\n  const chartData = useMemo(\n    () => ({\n      datasets: [\n        {\n          borderColor: color,\n          borderWidth: 2,\n          fill: \"start\",\n          backgroundColor: (context: ScriptableContext<\"bar\">) => {\n            const chart = context.chart;\n            const { ctx, chartArea } = chart;\n\n            // This case happens on initial chart load\n            if (!chartArea) return null;\n\n            // Create gradient based on the props color\n            const gradient = ctx.createLinearGradient(0, 0, 0, chartArea.height / 1.2);\n            gradient.addColorStop(0, Color(color).alpha(config.gradient.alpha).string());\n            gradient.addColorStop(1, Color(color).alpha(0.0).string());\n            return gradient;\n          },\n\n          // prevent points rendering\n          pointRadius: 0,\n          pointHitRadius: 0,\n\n          data: data.map(({ date: x, [`${valueKey}`]: y }) => ({ x, y })),\n        },\n      ],\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [color, data, valueKey, variant],\n  ) as unknown as LineProps[\"data\"];\n\n  const options: ChartProps[\"options\"] = useMemo(\n    () => ({\n      // Responsive options use the parent element to create the canvas\n      responsive: true,\n      maintainAspectRatio: false,\n\n      plugins: { tooltips: { enabled: false }, legend: { display: false } },\n      animation: false,\n      elements: {\n        points: { radius: 0 },\n        line: {\n          // Bezier curve tension of the line. Set to 0 to draw straightlines.\n          tension: 0.2,\n        },\n      },\n      scales: config.scales,\n    }),\n    [config.scales],\n  ) as unknown as LineProps[\"options\"];\n\n  // The redraw is needed to allow the chart to be updated with new value\n  return <Line data={chartData} options={options} {...chartProps} redraw />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAC1C,6BAA2C;AAE3C,mBAAkB;AAClB,+BAAyB;AACzB,oCAAO;AAGP,mBAA2C;AAyB3C,MAAM,YAAY,CAChB,SACA,YACoB;AACpB,QAAM,SAA+D;AAAA,IACnE,OAAO;AAAA,MACL,UAAU,EAAE,OAAO;AAAA,MACnB,QAAQ,EAAE,GAAG,EAAE,SAAS,SAAS,GAAG,EAAE,SAAS,OAAO,MAAM;AAAA;AAAA,IAE9D,SAAS;AAAA,MACP,UAAU,EAAE,OAAO;AAAA,MACnB,QAAQ;AAAA,QACN,GAAG;AAAA,UACD,SAAS;AAAA,UACT,MAAM;AAAA,YACJ,OAAO,QAAQ;AAAA,YACf,YAAY,CAAC,GAAG;AAAA,YAChB,WAAW;AAAA,YACX,YAAY;AAAA,YAGZ,aAAa;AAAA;AAAA,UAEf,OAAO,EAAE,UAAU,6BAAgB,aAAa;AAAA;AAAA,QAElD,GAAG;AAAA,UACD,SAAS;AAAA,UACT,MAAM;AAAA,YACJ,OAAO,QAAQ;AAAA,YACf,YAAY,CAAC,GAAG;AAAA,YAChB,WAAW;AAAA,YACX,YAAY;AAAA,YAGZ,aAAa;AAAA;AAAA,UAGf,QAAQ;AAAA,UACR,MAAM;AAAA,UAEN,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMtB,SAAO,OAAO;AAAA;AAGhB,MAAM,eAIF;AAAA,EACF,SAAS;AAAA,EACT,UAAU;AAAA,EACV,aAAa,EAAE,MAAM,SAAS,gBAAgB,EAAE,OAAO;AAAA;AAOzD,IAAO,gBAAQ,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,UAAU,aAAa;AAAA,EACvB,WAAW,aAAa;AAAA,EACxB,cAAc,aAAa;AAAA,KACxB;AAAA,MACqB;AACxB,QAAM,QAAQ;AACd,QAAM,SAAS,0BACb,MAAM,UAAU,SAAS,EAAE,WAAW,MAAM,OAAO,QAAQ,KAAK,gBAChE,CAAC,SAAS,MAAM,OAAO,QAAQ,KAAK;AAItC,8BAAU,MAAM;AACd,oCAAS,OAAO;AAAA,KACf;AAEH,QAAM,YAAY,0BAChB,MAAO;AAAA,IACL,UAAU;AAAA,MACR;AAAA,QACE,aAAa;AAAA,QACb,aAAa;AAAA,QACb,MAAM;AAAA,QACN,iBAAiB,CAAC,YAAsC;AACtD,gBAAM,QAAQ,QAAQ;AACtB,gBAAM,EAAE,KAAK,cAAc;AAG3B,cAAI,CAAC;AAAW,mBAAO;AAGvB,gBAAM,WAAW,IAAI,qBAAqB,GAAG,GAAG,GAAG,UAAU,SAAS;AACtE,mBAAS,aAAa,GAAG,0BAAM,OAAO,MAAM,OAAO,SAAS,OAAO;AACnE,mBAAS,aAAa,GAAG,0BAAM,OAAO,MAAM,GAAK;AACjD,iBAAO;AAAA;AAAA,QAIT,aAAa;AAAA,QACb,gBAAgB;AAAA,QAEhB,MAAM,KAAK,IAAI,CAAC,EAAE,MAAM,IAAI,GAAG,aAAa,QAAS,GAAE,GAAG;AAAA;AAAA;AAAA,MAKhE,CAAC,OAAO,MAAM,UAAU;AAG1B,QAAM,UAAiC,0BACrC,MAAO;AAAA,IAEL,YAAY;AAAA,IACZ,qBAAqB;AAAA,IAErB,SAAS,EAAE,UAAU,EAAE,SAAS,SAAS,QAAQ,EAAE,SAAS;AAAA,IAC5D,WAAW;AAAA,IACX,UAAU;AAAA,MACR,QAAQ,EAAE,QAAQ;AAAA,MAClB,MAAM;AAAA,QAEJ,SAAS;AAAA;AAAA;AAAA,IAGb,QAAQ,OAAO;AAAA,MAEjB,CAAC,OAAO;AAIV,SAAO,mDAAC,6BAAD;AAAA,IAAM,MAAM;AAAA,IAAW;AAAA,OAAsB;AAAA,IAAY,QAAM;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/Chart/types.js

@@ -0,0 +1,4 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+__markAsModule(exports);
+//# sourceMappingURL=types.js.map

package/lib/cjs/components/Chart/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Chart/types.ts"],
+  "sourcesContent": ["export type Item = {\n  date: Date;\n  value?: number | string;\n} & { [key: string]: number | string };\n\ntype Unit =\n  | \"millisecond\"\n  | \"second\"\n  | \"minute\"\n  | \"hour\"\n  | \"day\"\n  | \"week\"\n  | \"month\"\n  | \"quarter\"\n  | \"year\";\n\nexport type timeOptions = {\n  unit?: Unit;\n  displayFormats?: { [unit in Unit]?: string };\n};\n"],
+  "mappings": ";;AAAA;",
+  "names": []
+}

package/lib/cjs/components/Chart/utils.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  fontConfig: () => fontConfig,
+  valueFormatter: () => valueFormatter
+});
+const valueFormatter = (value) => {
+  const breakpoints = [
+    { value: 1e6, unit: "M" },
+    { value: 1e3, unit: "K" },
+    { value: 1, unit: "" }
+  ];
+  const item = breakpoints.find((item2) => value >= item2.value);
+  const formatedValue = typeof value === "number" ? value : parseFloat(value);
+  return item ? `${(formatedValue / item.value).toFixed(1).replace(".0", "")} ${item.unit}` : "0";
+};
+const fontConfig = {
+  family: "Inter, Arial",
+  size: 11,
+  weight: "600",
+  lineHeight: 1.21,
+  style: "normal"
+};
+//# sourceMappingURL=utils.js.map

package/lib/cjs/components/Chart/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Chart/utils.ts"],
+  "sourcesContent": ["/**\n * Returns the value fixed to 1 decimals when needed with his associated unit (e.g. \"1.5K\" or \"1.5M\")\n * @param value - Value displayed on the y-axis as a tick\n * @example\n * ```\n * valueFormatter(1500) // \"1.5K\"\n * valueFormatter(1567) // \"1.5K\"\n * valueFormatter(1567657) // \"1.5M\"\n * valueFormatter(156) // \"156\"\n * ```\n */\nexport const valueFormatter = (value: string | number): string => {\n  const breakpoints = [\n    { value: 1e6, unit: \"M\" },\n    { value: 1e3, unit: \"K\" },\n    { value: 1, unit: \"\" },\n  ];\n\n  const item = breakpoints.find((item) => value >= item.value);\n  const formatedValue = typeof value === \"number\" ? value : parseFloat(value);\n  return item ? `${(formatedValue / item.value).toFixed(1).replace(\".0\", \"\")} ${item.unit}` : \"0\";\n};\n\n// set default font configuration for the chart - I used ll-text_subTitle class from our theme\nexport const fontConfig: {\n  family: string;\n  size: number;\n  weight: string;\n  lineHeight: number;\n  style: \"normal\" | \"italic\";\n} = {\n  family: \"Inter, Arial\",\n  size: 11,\n  weight: \"600\",\n  lineHeight: 1.21,\n  style: \"normal\",\n};\n"],
+  "mappings": ";;;;;;;AAAA;AAAA;AAAA;AAAA;AAWO,MAAM,iBAAiB,CAAC,UAAmC;AAChE,QAAM,cAAc;AAAA,IAClB,EAAE,OAAO,KAAK,MAAM;AAAA,IACpB,EAAE,OAAO,KAAK,MAAM;AAAA,IACpB,EAAE,OAAO,GAAG,MAAM;AAAA;AAGpB,QAAM,OAAO,YAAY,KAAK,CAAC,UAAS,SAAS,MAAK;AACtD,QAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,WAAW;AACrE,SAAO,OAAO,GAAI,iBAAgB,KAAK,OAAO,QAAQ,GAAG,QAAQ,MAAM,OAAO,KAAK,SAAS;AAAA;AAIvF,MAAM,aAMT;AAAA,EACF,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AAAA;",
+  "names": []
+}

package/lib/cjs/components/Table/Columns.js

@@ -0,0 +1,83 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  icon: () => iconColumn,
+  text: () => textColumn
+});
+var import_react = __toModule(require("react"));
+var import_Icon = __toModule(require("../asorted/Icon"));
+var import_Flex = __toModule(require("../layout/Flex"));
+var import_Text = __toModule(require("../asorted/Text"));
+function iconColumn({
+  props,
+  header,
+  layout
+}) {
+  return {
+    layout: layout || "min-content",
+    render: ({ elt }) => {
+      const { name, weight, ...textProps } = props(elt);
+      return /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+        ...textProps,
+        style: { display: "flex", alignItems: "center" }
+      }, /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
+        name,
+        weight
+      }));
+    },
+    header
+  };
+}
+function textColumn({
+  title,
+  subtitle,
+  header,
+  layout,
+  titleProps,
+  subtitleProps
+}) {
+  return {
+    layout: layout || "auto",
+    render: ({ elt }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+      flexDirection: "column",
+      justifyContent: "center"
+    }, title && /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+      fontWeight: "medium",
+      variant: "body",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      color: "neutral.c100",
+      ...titleProps && titleProps(elt) || {}
+    }, title(elt)), subtitle && /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+      fontWeight: "medium",
+      variant: "paragraph",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      color: "neutral.c80",
+      ...subtitleProps && subtitleProps(elt) || {}
+    }, subtitle(elt))),
+    header
+  };
+}
+//# sourceMappingURL=Columns.js.map

package/lib/cjs/components/Table/Columns.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Table/Columns.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Icon, { Props as IconProps } from \"../asorted/Icon\";\nimport FlexBox from \"../layout/Flex\";\nimport Text, { TextProps } from \"../asorted/Text\";\nexport interface Column<T> {\n  /**\n   * A function called to render each cell of the column.\n   */\n  render: (props: CellProps<T>) => React.ReactNode;\n  /**\n   * A valid grid template [value](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values).\n   * This layout is applied to every cell of the column.\n   * Default to \"min-content\" - the largest minimal content contribution of the grid item.\n   */\n  layout?: string;\n  /**\n   * A function called to render the header cell.\n   * If omitted the rendered header element will be an empty div.\n   */\n  header?: () => React.ReactNode;\n}\n\nexport interface CellProps<T> {\n  /**\n   * The cell element.\n   */\n  elt: T;\n  /**\n   * The row index.\n   */\n  rowIndex: number;\n  /**\n   * The column index.\n   */\n  columnIndex: number;\n}\n\n/**\n * A column which contains a single icon and that has a fixed width.\n */\nfunction iconColumn<T>({\n  props,\n  header,\n  layout,\n}: {\n  /**\n   * An object containing the unerlying <Text /> wrapper props as well as\n   * the \"name\" and \"weight\" props of the unerlying <Icon />.\n   */\n  props: (elt: T) => Pick<IconProps, \"name\" | \"weight\"> & TextProps;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"min-content\".\n   */\n  layout?: string;\n}): Column<T> {\n  return {\n    layout: layout || \"min-content\",\n    render: ({ elt }) => {\n      const { name, weight, ...textProps } = props(elt);\n      return (\n        <Text {...textProps} style={{ display: \"flex\", alignItems: \"center\" }}>\n          <Icon name={name} weight={weight} />\n        </Text>\n      );\n    },\n    header,\n  };\n}\nexport { iconColumn as icon };\n\n/**\n * A column that contains a title and a subtitle.\n */\nfunction textColumn<T>({\n  title,\n  subtitle,\n  header,\n  layout,\n  titleProps,\n  subtitleProps,\n}: {\n  /**\n   * An optional title.\n   */\n  title?: (elt: T) => React.ReactNode;\n  /**\n   * An optional subtitle.\n   */\n  subtitle?: (elt: T) => React.ReactNode;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"auto\".\n   */\n  layout?: string;\n  /**\n   * Optional extra props passed to the title <Text /> wrapper.\n   */\n  titleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n  /**\n   * Optional extra props passed to the subtitle <Text /> wrapper.\n   */\n  subtitleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n}): Column<T> {\n  return {\n    layout: layout || \"auto\",\n    render: ({ elt }) => (\n      <FlexBox flexDirection=\"column\" justifyContent=\"center\">\n        {title && (\n          <Text\n            fontWeight=\"medium\"\n            variant={\"body\"}\n            textOverflow=\"ellipsis\"\n            overflow=\"hidden\"\n            color=\"neutral.c100\"\n            {...((titleProps && titleProps(elt)) || {})}\n          >\n            {title(elt)}\n          </Text>\n        )}\n        {subtitle && (\n          <Text\n            fontWeight=\"medium\"\n            variant={\"paragraph\"}\n            textOverflow=\"ellipsis\"\n            overflow=\"hidden\"\n            color=\"neutral.c80\"\n            {...((subtitleProps && subtitleProps(elt)) || {})}\n          >\n            {subtitle(elt)}\n          </Text>\n        )}\n      </FlexBox>\n    ),\n    header,\n  };\n}\nexport { textColumn as text };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAyC;AACzC,kBAAoB;AACpB,kBAAgC;AAqChC,oBAAuB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,GAeY;AACZ,SAAO;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB,QAAQ,CAAC,EAAE,UAAU;AACnB,YAAM,EAAE,MAAM,WAAW,cAAc,MAAM;AAC7C,aACE,mDAAC,qBAAD;AAAA,WAAU;AAAA,QAAW,OAAO,EAAE,SAAS,QAAQ,YAAY;AAAA,SACzD,mDAAC,qBAAD;AAAA,QAAM;AAAA,QAAY;AAAA;AAAA;AAAA,IAIxB;AAAA;AAAA;AAQJ,oBAAuB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GA0BY;AACZ,SAAO;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB,QAAQ,CAAC,EAAE,UACT,mDAAC,qBAAD;AAAA,MAAS,eAAc;AAAA,MAAS,gBAAe;AAAA,OAC5C,SACC,mDAAC,qBAAD;AAAA,MACE,YAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAa;AAAA,MACb,UAAS;AAAA,MACT,OAAM;AAAA,SACA,cAAc,WAAW,QAAS;AAAA,OAEvC,MAAM,OAGV,YACC,mDAAC,qBAAD;AAAA,MACE,YAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAa;AAAA,MACb,UAAS;AAAA,MACT,OAAM;AAAA,SACA,iBAAiB,cAAc,QAAS;AAAA,OAE7C,SAAS;AAAA,IAKlB;AAAA;AAAA;",
+  "names": []
+}