@embeddable.com/remarkable-ui 2.0.17 → 2.0.19

package/dist/{DateRangePicker-E7WV7TPK.css → DateRangePicker-PLOUUN7Q.css}

@@ -203,6 +203,14 @@
   align-items: center;
   gap: var(--rdp-dropdown-gap);
 }
+
+.rdp-dropdowns span {
+  color: var(--em-daterangepicker-label-color, #212129);
+  font-family: var(--em-daterangepicker-label-font-family, sans-serif);
+  font-size: var(--em-daterangepicker-label-font-size, 0.875rem);
+  font-weight: var(--em-daterangepicker-label-font-weight, 500);
+}
+
 .rdp-dropdown {
   z-index: 2;
 

package/dist/{DateRangePickerChevron.module-DWIFI5J2.module.css → DateRangePickerChevron.module-XDPDMPIS.module.css}

@@ -24,3 +24,15 @@
 .chevron:active {
   background: var(--em-daterangepicker-chevron--active, #ededf1);
 }
+
+.chevron.small {
+  background: unset;
+  width: calc(var(--em-daterangepicker-chevron-size, 2rem) / 2);
+  height: calc(var(--em-daterangepicker-chevron-size, 2rem) / 2);
+  padding: calc(var(--em-daterangepicker-chevron-padding, 0.5rem) / 2);
+}
+
+.chevron.small svg {
+  width: calc(var(--em-daterangepicker-chevron-icon-size, 1rem) / 2);
+  height: calc(var(--em-daterangepicker-chevron-icon-size, 1rem) / 2);
+}

package/dist/{TableBody.module-ARNVVKDL.module.css → TableBody.module-MLQLXJ62.module.css}

@@ -11,6 +11,6 @@
   right: auto;
 }
 
-.tableBodyCell:hover .copyButton {
+.tableBody td:hover .copyButton {
   opacity: 1;
 }

package/dist/index.d.ts

@@ -454,9 +454,9 @@ type HeatMapProps<T extends Record<string, unknown>> = {
     /** Color thresholds — number = raw value, "NN%" = percentage of [min..max]. */
     minThreshold?: HeatMapPropsThreshold;
     maxThreshold?: HeatMapPropsThreshold;
-    minColor: string;
-    midColor: string;
-    maxColor: string;
+    minColor?: string;
+    midColor?: string;
+    maxColor?: string;
     columnWidth?: number;
     firstColumnWidth?: number;
     missingCellColor?: string;

package/dist/index.js

@@ -860,20 +860,24 @@ NumberField.displayName = "NumberField";
 // src/components/editors/dates/DateRangePicker/DateRangePicker.tsx
 import { useState as useState3 } from "react";
 import { DayPicker } from "react-day-picker";
-import "./DateRangePicker-E7WV7TPK.css";
+import "./DateRangePicker-PLOUUN7Q.css";
 
 // src/components/editors/dates/DateRangePicker/DateRangePickerChevron.tsx
 import { IconCaretDownFilled as IconCaretDownFilled2 } from "@tabler/icons-react";
-import styles21 from "./DateRangePickerChevron.module-DWIFI5J2.module.css";
+import styles21 from "./DateRangePickerChevron.module-XDPDMPIS.module.css";
+import clsx16 from "clsx";
 import { jsx as jsx23 } from "react/jsx-runtime";
+var SMALL_SIZE = 18;
 var DateRangePickerChevron = ({
-  orientation
+  orientation,
+  size
 }) => {
   const rotation = orientation === "left" ? "rotate(90deg)" : orientation === "right" ? "rotate(-90deg)" : void 0;
+  const isSmallChevron = size === SMALL_SIZE;
   return /* @__PURE__ */ jsx23(
     "button",
     {
-      className: styles21.chevron,
+      className: clsx16(styles21.chevron, isSmallChevron && styles21.small),
       style: {
         transform: rotation
       },
@@ -907,6 +911,8 @@ var DateRangePicker = ({
     }
     onChange(range);
   };
+  const now = /* @__PURE__ */ new Date();
+  const endMonth = new Date(now.getFullYear() + 2, now.getMonth());
   return /* @__PURE__ */ jsx24(
     DayPicker,
     {
@@ -920,7 +926,10 @@ var DateRangePicker = ({
       onSelect: handleChange,
       selected: value,
       timeZone: "UTC",
-      showOutsideDays: true
+      showOutsideDays: true,
+      captionLayout: "dropdown-years",
+      endMonth,
+      animate: true
     }
   );
 };
@@ -1635,7 +1644,7 @@ import styles26 from "./KpiChart.module-2LUIN66C.module.css";
 
 // src/components/charts/kpis/components/KpiChartChange.tsx
 import styles25 from "./KpiChartChange.module-BAW7YCOW.module.css";
-import clsx16 from "clsx";
+import clsx17 from "clsx";
 import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
 import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var getChangeClass = (isPositive, invertChangeColors) => {
@@ -1667,11 +1676,11 @@ var KpiChartChange = ({
   const Icon = isPositive ? IconTrendingUp : IconTrendingDown;
   const showNoPreviousData = showChangeAsPercentage && Number(comparisonValue) === 0;
   return /* @__PURE__ */ jsxs15("div", { className: styles25.kpiChangeContainerSizeGuide, children: [
-    /* @__PURE__ */ jsxs15("div", { className: clsx16(styles25.kpiChartChangeContainer, styles25.hidden), children: [
+    /* @__PURE__ */ jsxs15("div", { className: clsx17(styles25.kpiChartChangeContainer, styles25.hidden), children: [
       /* @__PURE__ */ jsxs15(
         "span",
         {
-          className: clsx16(styles25.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
+          className: clsx17(styles25.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
           children: [
             /* @__PURE__ */ jsx28(Icon, {}),
             /* @__PURE__ */ jsx28("span", { children: displayValue })
@@ -1684,7 +1693,7 @@ var KpiChartChange = ({
       !equalComparison && /* @__PURE__ */ jsxs15(
         "span",
         {
-          className: clsx16(
+          className: clsx17(
             styles25.kpiChangeBadge,
             getChangeClass(isPositive, invertChangeColors)
           ),
@@ -1957,8 +1966,8 @@ var PieChart = ({
 
 // src/components/charts/tables/Table/TablePaginated.tsx
 import * as React3 from "react";
-import styles32 from "./tables.module-GNDYDW3Z.module.css";
-import clsx19 from "clsx";
+import styles32 from "./tables.module-TLDWBBPV.module.css";
+import clsx20 from "clsx";
 
 // src/components/charts/tables/Table/components/TablePagination/TablePagination.tsx
 import {
@@ -2055,8 +2064,8 @@ var TableHeaderAlign = {
 };
 
 // src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
-import tableStyles from "./tables.module-GNDYDW3Z.module.css";
-import clsx17 from "clsx";
+import tableStyles from "./tables.module-TLDWBBPV.module.css";
+import clsx18 from "clsx";
 import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var getHeaderAriaSort = (sort, header) => {
   return sort?.id === header.id ? sort.direction === "asc" ? "ascending" : "descending" : "none";
@@ -2098,7 +2107,7 @@ var TableHeader = ({
     }
   };
   return /* @__PURE__ */ jsx34("thead", { className: styles30.tableHeader, children: /* @__PURE__ */ jsxs18("tr", { children: [
-    showIndex && /* @__PURE__ */ jsx34("th", { className: clsx17(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
+    showIndex && /* @__PURE__ */ jsx34("th", { className: clsx18(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
     headers.map((header) => /* @__PURE__ */ jsx34(
       "th",
       {
@@ -2124,11 +2133,11 @@ var TableHeader = ({
 };
 
 // src/components/charts/tables/Table/components/TableBody/TableBody.tsx
-import styles31 from "./TableBody.module-ARNVVKDL.module.css";
-import clsx18 from "clsx";
+import styles31 from "./TableBody.module-MLQLXJ62.module.css";
+import clsx19 from "clsx";
 import { IconCopy, IconCopyCheckFilled } from "@tabler/icons-react";
 import { useState as useState6 } from "react";
-import tableStyles2 from "./tables.module-GNDYDW3Z.module.css";
+import tableStyles2 from "./tables.module-TLDWBBPV.module.css";
 import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var TableBody = ({
   headers,
@@ -2142,9 +2151,9 @@ var TableBody = ({
     "tr",
     {
       onClick: () => onRowIndexClick?.(rowIndex),
-      className: clsx18(rowIndex === rows.length - 1 && tableStyles2.tableLastRow),
+      className: clsx19(rowIndex === rows.length - 1 && tableStyles2.tableLastRow),
       children: [
-        showIndex && /* @__PURE__ */ jsx35("td", { className: clsx18(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
+        showIndex && /* @__PURE__ */ jsx35("td", { className: clsx19(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
         headers.map((header, cellIndex) => /* @__PURE__ */ jsx35(
           TableBodyCell,
           {
@@ -2188,7 +2197,7 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
             title: `Copy: ${String(value)}`,
             onMouseDown: handleCopy,
             icon: isPressedCopy ? IconCopyCheckFilled : IconCopy,
-            className: clsx18(
+            className: clsx19(
               styles31.copyButton,
               header.align === TableHeaderAlign.RIGHT && styles31.leftAlign
             ),
@@ -2221,7 +2230,7 @@ var TablePaginated = React3.forwardRef(
       onPageChange,
       onSortChange
     } = props;
-    return /* @__PURE__ */ jsxs20("div", { ref, className: clsx19(styles32.tableContainer, className), children: [
+    return /* @__PURE__ */ jsxs20("div", { ref, className: clsx20(styles32.tableContainer, className), children: [
       /* @__PURE__ */ jsx36("div", { className: styles32.tableContainerScroll, children: /* @__PURE__ */ jsxs20("table", { className: styles32.table, children: [
         /* @__PURE__ */ jsx36(
           TableHeader,
@@ -2261,8 +2270,8 @@ TablePaginated.displayName = "TablePaginated";
 
 // src/components/charts/tables/PivotTable/PivotTable.tsx
 import { useEffect as useEffect6, useMemo as useMemo3, useState as useState7 } from "react";
-import tableStyles3 from "./tables.module-GNDYDW3Z.module.css";
-import clsx20 from "clsx";
+import tableStyles3 from "./tables.module-TLDWBBPV.module.css";
+import clsx21 from "clsx";
 
 // src/components/charts/tables/tables.utils.ts
 var getTableCellWidthStyle = (width) => {
@@ -2393,10 +2402,10 @@ var PivotTable = ({
     };
   }, [progressive, batchSize, batchDelayMs, rowValues.length, data]);
   const visibleRows = progressive ? rowValues.slice(0, visibleCount) : rowValues;
-  return /* @__PURE__ */ jsx37("div", { className: clsx20(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx37("div", { className: clsx21(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx37(
     "div",
     {
-      className: clsx20(
+      className: clsx21(
         tableStyles3.tableAdjustedContainer,
         (!columnWidth || !firstColumnWidth) && tableStyles3.fullWidth
       ),
@@ -2538,7 +2547,7 @@ var PivotTable = ({
                   "th",
                   {
                     scope: "row",
-                    className: clsx20(tableStyles3.stickyFirstColumn, tableStyles3.boltCell),
+                    className: clsx21(tableStyles3.stickyFirstColumn, tableStyles3.boltCell),
                     title: totalLabel,
                     children: totalLabel
                   }
@@ -2589,8 +2598,8 @@ var PivotTable = ({
 
 // src/components/charts/tables/HeatMap/HeatMap.tsx
 import { useMemo as useMemo4, useCallback } from "react";
-import tableStyles4 from "./tables.module-GNDYDW3Z.module.css";
-import clsx21 from "clsx";
+import tableStyles4 from "./tables.module-TLDWBBPV.module.css";
+import clsx22 from "clsx";
 
 // src/components/charts/tables/HeatMap/HeatMap.utils.ts
 var clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
@@ -2710,6 +2719,8 @@ var createColorForValue = ({
   midColor,
   maxColor
 }) => {
+  minColor = minColor ?? lerpColor(midColor, LERP_LIGHTEST_COLOR, 0.5);
+  maxColor = maxColor ?? lerpColor(midColor, LERP_DARKEST_COLOR, 0.5);
   const midPoint = getMidPoint(domainMin, domainMax);
   const scale = makeDiverging(minColor, midColor, maxColor, midPoint);
   const leftTailLen = Math.max(1e-6, domainMin - rawMin);
@@ -2812,10 +2823,10 @@ var HeatMap = ({
     },
     [domainMin, domainMax, rawMin, rawMax, minColor, midColor, maxColor]
   );
-  return /* @__PURE__ */ jsx38("div", { className: clsx21(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx38("div", { className: clsx22(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx38(
     "div",
     {
-      className: clsx21(
+      className: clsx22(
         tableStyles4.tableAdjustedContainer,
         (!columnWidth || !firstColumnWidth) && tableStyles4.fullWidth
       ),