@crisp-ui-kit/crisp 0.31.2 → 0.31.4

package/dist/cjs/product/recordstable/recordstable.js

@@ -311,7 +311,7 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
 }
 // Always-interactive cell editors for the picker column types (status / date /
 // reference). Each is a ghost crisp control that reads the cell value and
-// commits the new one — matching Attio's inline field editors.
+// commits the new one — matching measured inline field editors.
 function StatusCell({ column, row, onChange, }) {
     return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
 }
@@ -328,8 +328,8 @@ function TagsCell({ column, row, options, onChange, labels, }) {
 /**
  * A date-only cell is a CALENDAR DATE, not an instant. ECMA-262 parses the
  * date-only ISO forms — `1998`, `1998-09`, `1998-09-04` — as UTC midnight, and
- * the field then renders that instant in the reader's own timezone. Attio's
- * own `founded: "1998"` therefore read **Dec 31, 1997** for every reader west
+ * the field then renders that instant in the reader's own timezone. A
+ * `founded: "1998"` field therefore read **Dec 31, 1997** for every reader west
  * of UTC, at every hour of every day, and a date picked east of UTC
  * round-tripped back a day short through `toISOString()` (#220).
  *
@@ -358,7 +358,7 @@ function DateCell({ column, row, onChange, }) {
     return ((0, jsx_runtime_1.jsx)(datepickerfield_1.DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(formatCellDate(d)) }));
 }
 /**
- * The "New <object>" create modal — measured from Attio's create-record dialog:
+ * The "New <object>" create modal — measured from a create-record dialog:
  * a stacked label + "Set …" input per column, a "Create more" toggle, and a
  * primary "Create record" action (⌘↵). Building the row mirrors the inline
  * editor's per-type coercion so a created record reads back like an edited one.
@@ -418,7 +418,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
                             } })] }, col.key))) }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "dialog-more", children: [labels.createMore, (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "dialog-submit", onClick: submit, children: [labels.createRecord, (0, jsx_runtime_1.jsx)("span", { className: "dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
 }
 /**
- * Attio-style record grid — fully featured. Toolbar (search / sort status /
+ * A measured-style record grid — fully featured. Toolbar (search / sort status /
  * count / New), sticky checkbox + entity columns, 36px rows, typed cells,
  * click-to-sort headers, column resize by dragging a header edge, inline cell
  * editing (double-click a text/number/url/date cell), add-row and add-column,
@@ -437,13 +437,13 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
     // because a caller passing a stable array never triggers this.
     React.useEffect(() => setCols(columnsProp), [columnsProp]);
     React.useEffect(() => setData(rowsProp), [rowsProp]);
-    // Attio's multi-criteria sort: an ordered list of {field, direction} rows.
+    // Multi-criteria sort: an ordered list of {field, direction} rows.
     const [sorts, setSorts] = React.useState([]);
     const [dragSort, setDragSort] = React.useState(null);
     const [editing, setEditing] = React.useState(null);
     const [renamingCol, setRenamingCol] = React.useState(null);
     const [creating, setCreating] = React.useState(false);
-    // Attio-style filter: an ordered list of conditions, each shown as a toolbar
+    // A measured-style filter: an ordered list of conditions, each shown as a toolbar
     // chip with an editable value (operator is "contains")
     const [filterConds, setFilterConds] = React.useState([]);
     const [filterQuery, setFilterQuery] = React.useState("");
@@ -734,7 +734,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
      * `nearest` on both axes: a cell already in view is left exactly where it
      * is, which is what makes this safe to run after a click too.
      *
-     * No `behavior` of our own — the page's `scroll-behavior` decides, and Attio
+     * No `behavior` of our own — the page's `scroll-behavior` decides, and it
      * jumps rather than glides — except under reduced motion, where an explicit
      * "auto" is the only thing that beats a host page that set
      * `scroll-behavior: smooth` on the scroller (#208's rule: JS motion reads
@@ -1023,7 +1023,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                         label: ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
                                                         keywords: t.descending,
                                                     },
-                                                ], "aria-label": t.sortDirection }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "recordstable-sort-learn", href: "https://attio.com/help", target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] }) })] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `recordstable-tool recordstable-tool--ghost${activeFilters ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [(0, jsx_runtime_1.jsx)("input", { className: "recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField, 
+                                                ], "aria-label": t.sortDirection }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-foot", children: t.learnSortingHref ? ((0, jsx_runtime_1.jsxs)("a", { className: "recordstable-sort-learn", href: t.learnSortingHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-sort-learn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) })] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `recordstable-tool recordstable-tool--ghost${activeFilters ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [(0, jsx_runtime_1.jsx)("input", { className: "recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                                         autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), cols
                                         .filter((col) => col.label

package/dist/cjs/product/richtext/richtext.js

@@ -40,7 +40,7 @@ const React = __importStar(require("react"));
 const richtext_recipe_1 = require("./richtext.recipe");
 const exec = (cmd, value) => document.execCommand(cmd, false, value);
 /**
- * A block rich-text editor — measured from Attio's Notes editor. A large title,
+ * A block rich-text editor — measured from a notes editor. A large title,
  * a prose body (headings, lists, quote, marks, links), and a floating toolbar
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.

package/dist/cjs/product/settingssection/settingssection.js

@@ -4,7 +4,7 @@ exports.SettingsSection = SettingsSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const settingssection_recipe_1 = require("./settingssection.recipe");
 /**
- * A settings section — measured from Attio's Settings pages. A title + optional
+ * A settings section — measured from settings pages. A title + optional
  * subtitle and trailing action, then a gapped stack of rows (pair with
  * FormField). Compose several inside a settings content pane.
  */

package/dist/cjs/product/settingsshell/settingsshell.js

@@ -39,7 +39,7 @@ const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const settingsshell_recipe_1 = require("./settingsshell.recipe");
 /**
- * The Settings layout — measured from Attio's Settings. A left nav (back header,
+ * The Settings layout — measured live. A left nav (back header,
  * search, grouped items) beside a scrolling content pane. The search filters the
  * nav by label. Fills the height its container gives it.
  */

package/dist/cjs/product/sidebar/sidebar.js

@@ -64,13 +64,13 @@ const GlyphPeople = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.User, { size: 1
 const GlyphDeals = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleDollarSign, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
 const GlyphUsers = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
 const GlyphWorkspaces = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
-/** The measured Attio workspace switcher — the default `workspace` prop. */
+/** The measured workspace switcher — the default `workspace` prop. */
 exports.ATTIO_SIDEBAR_WORKSPACE = {
     name: "techpartners",
     avatarLabel: "T",
     avatarTone: "cyan",
 };
-/** The measured Attio main nav — the default `items` prop. */
+/** The measured main nav — the default `items` prop. */
 exports.ATTIO_SIDEBAR_ITEMS = [
     { label: "Home", icon: IconHome },
     {
@@ -86,7 +86,7 @@ exports.ATTIO_SIDEBAR_ITEMS = [
     { label: "Sequences", icon: IconSequences },
     { label: "Workflows", icon: IconWorkflows },
 ];
-/** The measured Attio Records section — the default `recordsSection` prop. */
+/** The measured Records section — the default `recordsSection` prop. */
 exports.ATTIO_SIDEBAR_RECORDS_SECTION = {
     label: "Records",
     items: [
@@ -97,17 +97,17 @@ exports.ATTIO_SIDEBAR_RECORDS_SECTION = {
         { label: "Workspaces", tone: "purple", glyph: GlyphWorkspaces },
     ],
 };
-/** The measured Attio Lists section — the default `listsSection` prop. */
+/** The measured Lists section — the default `listsSection` prop. */
 exports.ATTIO_SIDEBAR_LISTS_SECTION = {
     label: "Lists",
     newListLabel: "+ New list",
 };
-/** The measured Attio Chats section — the default `chatsSection` prop. */
+/** The measured Chats section — the default `chatsSection` prop. */
 exports.ATTIO_SIDEBAR_CHATS_SECTION = {
     label: "Chats",
     items: [{ label: "In-app notification for deal wins", icon: IconChat }],
 };
-/** The measured Attio footer copy — the default `footer` prop. */
+/** The measured footer copy — the default `footer` prop. */
 exports.ATTIO_SIDEBAR_FOOTER = {
     gettingStartedLabel: "Getting started 1/6",
     inviteLabel: "Invite team members",

package/dist/cjs/product/tasklist/tasklist.js

@@ -7,7 +7,7 @@ function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "tasklist-row", "data-done": task.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), (0, jsx_runtime_1.jsx)("span", { className: "tasklist-title", children: task.title }), (task.due != null || task.meta != null) && ((0, jsx_runtime_1.jsxs)("span", { className: "tasklist-meta", children: [task.due != null && ((0, jsx_runtime_1.jsx)("span", { className: "tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
 }
 /**
- * A task list — measured from Attio's Tasks page. Optional group headers with a
+ * A task list — measured from a tasks page. Optional group headers with a
  * count, then rows of a round complete-checkbox + title + trailing meta.
  * Completed rows strike through; overdue dates go red.
  */

package/dist/cjs/product/trialbanner/trialbanner.js

@@ -4,7 +4,7 @@ exports.TrialBanner = TrialBanner;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const trialbanner_recipe_1 = require("./trialbanner.recipe");
 /**
- * A compact trial / upgrade banner — measured from Attio's sidebar footer.
+ * A compact trial / upgrade banner — measured from a sidebar footer.
  * Icon + message + an optional small action pill (soft-glow outlined button).
  */
 function TrialBanner({ icon, children, action, onAction, tone = "neutral", className, ...rest }) {

package/dist/cjs/product/viewtoggle/viewtoggle.js

@@ -38,7 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const viewtoggle_recipe_1 = require("./viewtoggle.recipe");
 /**
- * A compact icon toggle — measured from Attio's list/grid switch. A padded track
+ * A compact icon toggle — measured from a list/grid switch. A padded track
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */

package/dist/datatable.css

@@ -63,8 +63,8 @@
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
+    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
     & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .datatable-entity { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; color: var(--fg-primary); font-weight: var(--weight-medium); }

package/dist/esm/components/accordion/accordion.js

@@ -3,7 +3,7 @@ import { ChevronDown } from "lucide-react";
 import * as React from "react";
 import { accordionRecipe } from "./accordion.recipe.js";
 /**
- * A collapsible section list — measured from Attio's sidebar groups. Single or
+ * A collapsible section list — measured from sidebar groups. Single or
  * multiple open; panels animate their height (grid-rows 0fr->1fr). Headers are
  * buttons with `aria-expanded` / `aria-controls`.
  */

package/dist/esm/components/avatargroup/avatargroup.js

@@ -4,7 +4,7 @@ import { Avatar } from "../avatar/avatar.js";
 import { avatargroupRecipe } from "./avatargroup.recipe.js";
 /**
  * A stack of overlapping avatars with an optional "+N" overflow chip — measured
- * from Attio's team / member rows. Pass `<Avatar>` children; each is ringed in
+ * from team / member rows. Pass `<Avatar>` children; each is ringed in
  * the surface colour so it reads against its neighbour.
  */
 export function AvatarGroup({ children, max, size = "md", className, "aria-label": ariaLabel, ...rest }) {

package/dist/esm/components/barchart/barchart.js

@@ -11,7 +11,7 @@ function niceNum(raw) {
     return step * mag;
 }
 /**
- * A responsive bar chart — measured from Attio's Reports dashboard. Pure CSS, so
+ * A responsive bar chart for dashboards. Pure CSS, so
  * it scales with its container. Renders `role="img"` with an accessible summary.
  */
 export function BarChart({ data, height = 240, max, ticks = 5, color, format = (n) => n.toLocaleString(), yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }) {

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -3,7 +3,7 @@ import { ChevronRight } from "lucide-react";
 import * as React from "react";
 import { breadcrumbRecipe } from "./breadcrumb.recipe.js";
 /**
- * A breadcrumb trail — measured from Attio's record-page nav. The last item is
+ * A breadcrumb trail — measured from a record-page nav. The last item is
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
 export function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {

package/dist/esm/components/bulkbar/bulkbar.js

@@ -5,7 +5,7 @@ import { bulkbarRecipe } from "./bulkbar.recipe.js";
 /**
  * A floating bulk-action bar. Rises from the bottom-centre of its nearest
  * positioned ancestor when a selection is active; render it conditionally
- * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
+ * (e.g. `count > 0 && <BulkBar …/>`). Measured from a records table.
  */
 export function BulkBar({ count, onClear, countLabel = "selected", countText = (count, label) => (_jsxs(_Fragment, { children: [count, " ", label] })), children, className, clearLabel = "Clear selection", ...rest }) {
     return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "bulkbar-bar", children: [count != null && (_jsxs("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), _jsx(X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));

package/dist/esm/components/callout/callout.js

@@ -9,7 +9,7 @@ const DEFAULT_ICONS = {
     danger: CircleAlert,
 };
 /**
- * An inline callout / banner — measured from Attio's info notices. `tone` tints
+ * An inline callout / banner — measured from info notices. `tone` tints
  * the background and icon; pass a `title` and/or body `children`.
  */
 export function Callout({ tone = "neutral", icon, title, children, action, className, ...rest }) {

package/dist/esm/components/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Primitive } from "../../core/index.js";
 import { checkboxRecipe } from "./checkbox.recipe.js";
 /**
- * A native `<input type="checkbox">` styled to Attio's grid checkbox (16px,
+ * A native `<input type="checkbox">` styled to the measured grid checkbox (16px,
  * r6, brand fill + white check). Native on purpose: keyboard, focus, and form
  * semantics come for free. `indeterminate` is a DOM-only property, so it is
  * applied via ref rather than an attribute.

package/dist/esm/components/columncalc/columncalc.js

@@ -3,14 +3,14 @@ import { ChevronDown, Plus } from "lucide-react";
 import * as React from "react";
 import { Menu, MenuItem } from "../menu/index.js";
 import { columncalcRecipe } from "./columncalc.recipe.js";
-/** The four Attio offers on every column, in its order. */
+/** The four calcs offered on every column, in their order. */
 export const UNIVERSAL_CALCS = [
     "countEmpty",
     "countFilled",
     "percentEmpty",
     "percentFilled",
 ];
-/** The four Attio adds for numeric columns, in its order. */
+/** The four calcs added for numeric columns, in their order. */
 export const NUMERIC_CALCS = ["sum", "average", "min", "max"];
 export const CALC_LABEL = {
     none: "None",

package/dist/esm/components/datatable/datatable.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, Check, ChevronsUpDown, GripVertical, Plus, Search, SlidersHorizontal, } from "lucide-react";
 import * as React from "react";
+import { isRtlElement } from "../../core/index.js";
 import { Checkbox } from "../checkbox/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
@@ -32,7 +33,7 @@ function asText(v) {
         return v.join(", ");
     return String(v);
 }
-// stable pastel tone per string value — colour-coded tags/statuses, like Attio
+// stable pastel tone per string value — colour-coded tags/statuses
 const TAG_TONES = [
     "brand",
     "success",
@@ -240,8 +241,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         });
     }, [filtered, sorts, colByKey]);
     /**
-     * Rows bucketed under a heading, preserving first-seen group order (Attio
-     * groups a view without reordering within a group). One bucket with a null
+     * Rows bucketed under a heading, preserving first-seen group order (a
+     * grouped view without reordering within a group). One bucket with a null
      * group when `groupBy` is absent, so the render path is identical either way.
      */
     const groupedRows = React.useMemo(() => {
@@ -273,7 +274,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     }
     function cycleSort(key) {
         // Clicking a header drives a single sort, as before. Multi-sort is supplied
-        // by the caller through the `sort` prop (Attio builds it in its sort popover).
+        // by the caller through the `sort` prop (built in a sort popover).
         const dir = sortDirByKey.get(key);
         if (!dir)
             setSort({ key, dir: "asc" });
@@ -283,7 +284,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             setSort(null);
     }
     /**
-     * Which editor a column gets. Mirrors RecordsTable — the Attio-measured
+     * Which editor a column gets. Mirrors RecordsTable — the measured
      * sibling — rather than giving every type the same text box:
      *   number/currency   numeric, with a decimal keypad on touch
      *   date              a native date field
@@ -329,10 +330,13 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
             nr = Math.min(rows.length - 1, r + 1);
-        else if (e.key === "ArrowLeft")
-            nc = Math.max(0, c - 1);
-        else if (e.key === "ArrowRight")
-            nc = Math.min(columns.length - 1, c + 1);
+        // The arrows follow what the user SEES: under RTL the first column renders
+        // rightmost, so ArrowLeft steps forward and ArrowRight steps back (#255).
+        else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            const rtl = isRtlElement(e.currentTarget);
+            const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+            nc = forward ? Math.min(columns.length - 1, c + 1) : Math.max(0, c - 1);
+        }
         else if (e.key === "Escape") {
             setSelCell(null);
             return;
@@ -390,6 +394,11 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             key: col.key,
             startX: e.clientX,
             startW: colWidth(col),
+            // The columns reverse under RTL, so the grip — anchored at
+            // `inset-inline-end` — lands on the column's LEFT edge there, and
+            // pulling it further left must GROW the column. `clientX` stays
+            // physical, so the sign is the other half of that conversion (#214).
+            dir: isRtlElement(e.currentTarget) ? -1 : 1,
         };
         setResizingKey(col.key);
     }
@@ -397,7 +406,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         const r = resizeRef.current;
         if (!r)
             return;
-        const w = Math.max(64, r.startW + (e.clientX - r.startX));
+        const w = Math.max(64, r.startW + r.dir * (e.clientX - r.startX));
         setWidths((prev) => ({ ...prev, [r.key]: w }));
     }
     function endResize(e) {

package/dist/esm/components/datatable/datatable.recipe.js

@@ -70,8 +70,8 @@ const config = defineRecipe({
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -17,7 +17,7 @@ const fromDate = (d) => ({
     day: d.getDate(),
 });
 /**
- * Attio's date field: a trigger showing the value, opening a calendar in a
+ * A measured date field: a trigger showing the value, opening a calendar in a
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */

package/dist/esm/components/dialog/dialog.js

@@ -19,7 +19,7 @@ function useDialogInstanceId() {
 }
 /**
  * A modal dialog — composes Zag's dialog machine (focus trap, scroll lock,
- * Escape / outside-click dismissal) with the measured Attio modal surface.
+ * Escape / outside-click dismissal) with the measured modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
 export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {

package/dist/esm/components/donutchart/donutchart.js

@@ -12,7 +12,7 @@ const PALETTE = [
     c.bgDanger,
 ];
 /**
- * A donut / ring chart — measured from Attio's Reports breakdown reports. SVG
+ * A donut / ring chart — measured from a reports breakdown report. SVG
  * ring using the r=15.915 (circumference 100) trick so slices are percentages;
  * a centred total and an optional legend. `role="img"` with a summary.
  */

package/dist/esm/components/fileupload/fileupload.js

@@ -6,7 +6,7 @@ import * as React from "react";
 import { useFocusAfterRemoval } from "../../core/index.js";
 import { fileuploadRecipe } from "./fileupload.recipe.js";
 export const fileUploadLabels = {
-    // Attio's own copy on the record Files pane.
+    // Matches the copy on the record Files pane.
     title: "No files",
     hint: "Drag a file here or choose one from your computer.",
     remove: "Remove file",

package/dist/esm/components/formfield/formfield.js

@@ -52,7 +52,7 @@ function useFieldWiring({ htmlFor, messageId, invalid, required, }) {
     }, [htmlFor, messageId, invalid, required]);
 }
 /**
- * A labelled form field — measured from Attio's Settings forms. A muted label
+ * A labelled form field — measured from settings forms. A muted label
  * above any control, with an optional description or error line below. When
  * `error` is set it replaces the description; the control is given
  * `aria-describedby`, plus `aria-invalid` and `aria-required` as they apply.

package/dist/esm/components/linechart/linechart.js

@@ -10,7 +10,7 @@ function niceNum(raw) {
     return step * mag;
 }
 /**
- * A responsive line chart — measured from Attio's Reports historical charts.
+ * A responsive line chart — measured from a reports historical chart.
  * A stretched SVG line/area (non-scaling stroke keeps it crisp) over dashed
  * gridlines; dots are HTML so they stay round. `role="img"` with a summary.
  */

package/dist/esm/components/menu/menu.js

@@ -6,7 +6,7 @@ import { menuRecipe } from "./menu.recipe.js";
 import { useMenuKeyboard } from "./menu-keyboard.js";
 const MenuContext = React.createContext(null);
 /**
- * A dropdown menu — the ⋯ / sort / filter menu surface, on Attio's measured
+ * A dropdown menu — the ⋯ / sort / filter menu surface, on a measured
  * popover. Give it a `trigger` element and Menu items as children. Opens on
  * click / ↓ / Enter; roving-focus keyboard model (↑/↓ move, Home/End jump,
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);

package/dist/esm/components/multiselect/multiselect.js

@@ -24,7 +24,7 @@ function Chip({ opt }) {
     return (_jsx("span", { className: "recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
 }
 /**
- * A multi-select / tag editor — measured from Attio's cell tag picker. The
+ * A multi-select / tag editor — measured from a cell tag picker. The
  * outlined trigger shows the selected values as coloured chips; it opens a
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.

package/dist/esm/components/radiogroup/radiogroup.js

@@ -5,7 +5,7 @@ import { radiogroupRecipe } from "./radiogroup.recipe.js";
 import { useRadioGroupKeyboard } from "./radiogroup-keyboard.js";
 const RadioContext = React.createContext(null);
 /**
- * A radio group — measured from Attio's settings. `default` renders rows (a ring
+ * A radio group — measured from a settings page. `default` renders rows (a ring
  * that fills brand when selected + a label); `card` renders a row of bordered
  * preview cards whose border turns brand when picked (the Theme picker). Arrow
  * keys move between options (roving focus). Controlled or uncontrolled.

package/dist/esm/components/resizablepanel/resizablepanel.js

@@ -53,7 +53,7 @@ export function writeStoredPercent(key, percent, storage = window.localStorage)
     }
 }
 /**
- * Attio's adjustable-panel primitive: a spacer that reserves layout width
+ * An adjustable-panel primitive: a spacer that reserves layout width
  * plus a panel that overlays it, so the panel can move between docked
  * (in-flow) and floating (`position: fixed`, an overlay) without a reflow
  * glitch. Drag the edge handle to resize; constraints are CSS `min-width`/

package/dist/esm/components/segmented/segmented.js

@@ -4,7 +4,7 @@ import { useLabelAssociation } from "../../core/index.js";
 import { useRadioGroupKeyboard } from "../radiogroup/index.js";
 import { segmentedRecipe } from "./segmented.recipe.js";
 /**
- * A segmented control (single-choice toggle) — measured from Attio's view
+ * A segmented control (single-choice toggle) — measured from a view
  * switcher. `role="radiogroup"` over `role="radio"` buttons with roving
  * tabindex and ←/→ (Home/End) keyboard selection.
  */

package/dist/esm/components/select/select.js

@@ -10,7 +10,7 @@ function optionText(o) {
     return typeof o.label === "string" ? o.label : o.value;
 }
 /**
- * A select / dropdown — the settings control, measured from Attio, with an
+ * A select / dropdown — the settings control, measured live, with an
  * optional Linear-style search. A `role="combobox"` trigger opens a
  * `role="listbox"`; pass `searchable` to add a filter field at the top (with a
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,

package/dist/esm/components/stagebar/stagebar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { stagebarRecipe } from "./stagebar.recipe.js";
 const DEFAULT = "#266df0";
 /**
- * A pipeline stage bar — measured from Attio's Deal-stage Highlight. Each stage
+ * A pipeline stage bar — measured from a deal-stage highlight. Each stage
  * is a segment tinted with its colour; the current stage is at full strength.
  */
 export function StageBar({ stages, current, "aria-label": ariaLabel, className, ...rest }) {

package/dist/esm/components/statcard/statcard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { statcardRecipe } from "./statcard.recipe.js";
 /**
- * A single-metric KPI tile — measured from Attio's Reports number/insight cards.
+ * A single-metric KPI tile — measured from a reports number/insight card.
  * Label, a large value, and an optional up/down delta pill with a caption.
  */
 export function StatCard({ label, icon, value, delta, deltaSuffix = "%", caption, card, className, ...rest }) {

package/dist/esm/components/switch/switch.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { formValueStyle, useFormReset } from "../../core/index.js";
 import { switchRecipe } from "./switch.recipe.js";
 /**
- * An on/off toggle — the settings switch, measured from Attio. Renders a
+ * An on/off toggle — the settings switch, measured live. Renders a
  * `role="switch"` button (a native checkbox's semantics without its box), so
  * label association and keyboard (Space/Enter) come for free. Controlled via
  * `checked`/`onCheckedChange`, or uncontrolled from `defaultChecked`.

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -28,7 +28,7 @@ const asText = (v) => {
     // Before the generic object branch, which would look for `.name`, find none
     // and return "" — turning every Date into the empty string (#185). The ISO
     // date is stable and locale-independent, so `contains "2026-06"` works; it
-    // will not match "16/06/2026", and a date-aware operator set is Attio's
+    // will not match "16/06/2026", and a date-aware operator set needs a
     // date-picker UI, which has to be measured before it can be built.
     if (v instanceof Date)
         return Number.isNaN(v.getTime()) ? "" : v.toISOString().slice(0, 10);
@@ -90,7 +90,7 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
     });
 }
 /**
- * Attio's table toolbar as a standalone primitive: the Sort and Filter
+ * The table toolbar as a standalone primitive: the Sort and Filter
  * controls, their menus, the sort-condition rows and the filter chips.
  *
  * `RecordsTable` renders this same measured chrome internally; this is the

package/dist/esm/components/tabs/tabs.js

@@ -4,8 +4,8 @@ import { tabsRecipe } from "./tabs.recipe.js";
 import { useTablistKeyboard } from "./tabs-keyboard.js";
 /**
  * A row of text tabs over a sliding ink underline — the record-view tab bar,
- * measured from Attio. Roving-tabindex keyboard model (←/→ move + activate,
- * Home/End jump); activation follows focus, matching Attio. Controlled via
+ * measured live. Roving-tabindex keyboard model (←/→ move + activate,
+ * Home/End jump); activation follows focus. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
 export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {

package/dist/esm/components/textarea/textarea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { textareaRecipe } from "./textarea.recipe.js";
 /**
- * A multiline text field — measured from Attio's settings. Forwards every native
+ * A multiline text field — measured from settings. Forwards every native
  * `<textarea>` prop; pass `showCount` with `maxLength` to render a live
  * character counter (which turns red if the value exceeds the limit).
  */

package/dist/esm/components/tooltip/tooltip.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { tooltipRecipe } from "./tooltip.recipe.js";
 /**
- * A hover/focus tooltip — a dark hint chip measured from Attio. Wraps its
+ * A hover/focus tooltip — a dark hint chip measured live. Wraps its
  * trigger in an inline element, shows after `delay` on pointer-enter / focus,
  * and hides on leave / blur / Escape. The bubble is portaled and positioned
  * above the trigger (flipping below near the top edge).