@1771technologies/lytenyte-pro 1.0.19 → 2.0.0-dev.0

package/dist/tree-view/virtualized/use-virtualized-tree.js

@@ -1,100 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import {} from "@1771technologies/lytenyte-shared";
-import { useMemo, useState } from "react";
-import { buildVirtualTreePartial } from "./get-virtual-tree-paths.js";
-import { makeVirtualTree } from "./make-virtual-tree.js";
-import { useFlattenedTree } from "./use-flattened-tree.js";
-import { useRowStartAndEnd } from "./use-row-start-and-end.js";
-import { getTreeNodeId } from "../utils/get-tree-node-id.js";
-import { useEvent, useMeasure } from "@1771technologies/lytenyte-core/yinternal";
-export function useVirtualizedTree({ itemHeight, expansions, expansionDefault = false, nonAdjacentPathTrees, paths, }) {
-    const [ref, bounds, _, panel] = useMeasure({ scroll: true });
-    const { flat, nodeToIndex, indexToId, allIds, idToNode, root } = useFlattenedTree(paths, expansions, expansionDefault, nonAdjacentPathTrees);
-    const size = useMemo(() => flat.length, [flat.length]);
-    const [rowStart, rowEnd] = useRowStartAndEnd(panel, itemHeight, bounds, size);
-    const [focused, setFocused] = useState(null);
-    const virtualTree = useMemo(() => {
-        const items = flat.slice(rowStart, rowEnd);
-        if (!items.length)
-            return [];
-        // Ensure that the parent nodes of the current tree in view are added as well. This ensure that
-        // the nodes are always visible.
-        while (items[0].parent.kind !== "root") {
-            items.unshift(items[0].parent);
-        }
-        // Ensure that the first node is always in the list of tree nodes so the home key works fine.
-        if (rowStart !== 0 && items[0] !== flat[0])
-            items.unshift(flat[0]);
-        // Ensure the last node is always in the list of nodes present.
-        if (rowEnd !== flat.length) {
-            const endItems = [flat.at(-1)];
-            while (endItems[0].parent.kind !== "root" && endItems[0].parent !== items.at(-1)) {
-                endItems.unshift(endItems[0].parent);
-            }
-            items.push(...endItems);
-        }
-        // Finally we need to ensure the focused node is present. We add the node before and after
-        // the current node - so that the next and previous node are selectable.
-        if (focused && idToNode.has(focused)) {
-            const node = idToNode.get(focused);
-            const index = nodeToIndex.get(node);
-            const nextId = indexToId.get(index + 1);
-            const prevId = indexToId.get(index - 1);
-            const next = idToNode.get(nextId);
-            const prev = idToNode.get(prevId);
-            if (!items.includes(node)) {
-                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index);
-                items.splice(firstIndexGreater, 0, node);
-            }
-            if (next && !items.includes(next)) {
-                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index + 1);
-                items.splice(firstIndexGreater, 0, next);
-            }
-            if (prev && !items.includes(prev)) {
-                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index - 1);
-                items.splice(firstIndexGreater, 0, prev);
-            }
-        }
-        const subtreePaths = buildVirtualTreePartial(items);
-        const subtree = makeVirtualTree(subtreePaths, nodeToIndex, itemHeight, nonAdjacentPathTrees ?? false);
-        return subtree;
-    }, [
-        flat,
-        focused,
-        idToNode,
-        indexToId,
-        itemHeight,
-        nodeToIndex,
-        nonAdjacentPathTrees,
-        rowEnd,
-        rowStart,
-    ]);
-    const spacer = _jsx("div", { style: { height: size * itemHeight, width: 0 } });
-    const onFocusChange = useEvent((el) => {
-        setFocused(el ? getTreeNodeId(el) : null);
-    });
-    const getAllIds = useEvent(() => allIds);
-    const getIdsBetweenNodes = useEvent((left, right) => {
-        const leftIndex = Number.parseInt(left.getAttribute("data-ln-row-index"));
-        const rightIndex = Number.parseInt(right.getAttribute("data-ln-row-index"));
-        const [start, end] = leftIndex < rightIndex ? [leftIndex, rightIndex] : [rightIndex, leftIndex];
-        if (start === end)
-            return [indexToId.get(start)];
-        const ids = [];
-        for (let i = start; i <= end; i++) {
-            ids.push(indexToId.get(i));
-        }
-        return ids;
-    });
-    return {
-        ref,
-        virtualTree,
-        spacer,
-        rootProps: {
-            getAllIds,
-            getIdsBetweenNodes,
-            onFocusChange,
-            root,
-        },
-    };
-}

package/dist/types/types.d.ts

@@ -1,8 +0,0 @@
-export type * from "../+types";
-export type { CellProps } from "../grid/cell";
-export type { HeaderCellProps } from "../grid/header-cell";
-export type { HeaderRowProps } from "../grid/header-row";
-export type { HeaderGroupCellProps } from "../grid/header-group-cell";
-export type { RootProps } from "../grid/root";
-export type { RowFullWidthProps } from "../grid/row-full-width";
-export {};

package/dist/types/types.js

@@ -1 +0,0 @@
-export {};

package/main.css

@@ -1,453 +0,0 @@
-:root,
-.light {
-  --lng1771-primary-05: rgba(18, 108, 255, 0.05);
-  --lng1771-primary-10: rgba(18, 108, 255, 0.1);
-  --lng1771-primary-30: rgba(18, 108, 255, 0.3);
-  --lng1771-primary-50: #126cff;
-  --lng1771-primary-70: #053f9e;
-  --lng1771-primary-90: #012259;
-
-  --lng1771-row-selected: #d6e4fe;
-  --lng1771-focus-outline: var(--lng1771-primary-50);
-  --lng1771-gradient-shadow: linear-gradient(90deg, var(--lng1771-gray-50), var(--lng1771-gray-50));
-
-  --lng1771-gray-00: #ffffff;
-  --lng1771-gray-02: #fafbfc;
-  --lng1771-gray-05: #f6f8fa;
-  --lng1771-gray-10: #f2f4f7;
-  --lng1771-gray-20: #e9edf1;
-  --lng1771-gray-30: #dadfe7;
-  --lng1771-gray-40: #c3c9d5;
-  --lng1771-gray-50: #949ba8;
-  --lng1771-gray-60: #787e8c;
-  --lng1771-gray-70: #5c6170;
-  --lng1771-gray-80: #2d2f39;
-  --lng1771-gray-90: #1e1e29;
-  --lng1771-gray-100: #15151e;
-
-  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
-  --lng1771-pill-column-fill: #ffffff;
-  --lng1771-pill-column-stroke: rgba(1, 34, 89, 0.14);
-  --lng1771-pill-pivot-fill: #ece6f8;
-  --lng1771-pill-pivot-stroke: #c6b5eb;
-  --lng1771-pill-group-fill: #e6f8f2;
-  --lng1771-pill-group-stroke: #a8d4c4;
-  --lng1771-pill-icon-color: var(--lng1771-gray-50);
-}
-
-:root {
-  --lng1771-typeface:
-    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.dark {
-  color-scheme: dark;
-
-  --lng1771-primary-05: rgba(18, 108, 255, 0.05);
-  --lng1771-primary-10: rgba(49, 127, 255, 0.1);
-  --lng1771-primary-30: rgba(18, 108, 255, 0.3);
-  --lng1771-primary-50: #126cff;
-  --lng1771-primary-70: #004dcc;
-  --lng1771-primary-90: #00307d;
-
-  --lng1771-row-selected: #1c2b44;
-  --lng1771-focus-outline: var(--lng1771-primary-50);
-
-  --lng1771-gray-00: #151519;
-  --lng1771-gray-02: #121316;
-  --lng1771-gray-05: #1c1e21;
-  --lng1771-gray-10: #282a2e;
-  --lng1771-gray-20: #2f3137;
-  --lng1771-gray-30: #3f424a;
-  --lng1771-gray-40: #525660;
-  --lng1771-gray-50: #676c79;
-  --lng1771-gray-60: #62636a;
-  --lng1771-gray-70: #7a7b85;
-  --lng1771-gray-80: #9898a0;
-  --lng1771-gray-90: #e4e4e7;
-  --lng1771-gray-100: #e4e4e7;
-
-  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
-  --lng1771-pill-column-fill: #182644;
-  --lng1771-pill-column-stroke: rgba(68, 109, 177, 0.58);
-  --lng1771-pill-pivot-fill: rgba(120, 57, 255, 0.18);
-  --lng1771-pill-pivot-stroke: rgba(136, 81, 255, 0.6);
-  --lng1771-pill-group-fill: rgba(0, 221, 147, 0.14);
-  --lng1771-pill-group-stroke: rgba(26, 255, 172, 0.35);
-  --lng1771-pill-icon-color: var(--lng1771-gray-50);
-}
-
-.lng1771-teal {
-  color-scheme: dark;
-  --lng1771-primary-05: rgba(3, 182, 161, 0.05);
-  --lng1771-primary-10: rgba(3, 182, 161, 0.05);
-  --lng1771-primary-30: rgba(3, 182, 161, 0.25);
-  --lng1771-primary-50: #03b6a1;
-  --lng1771-primary-70: #278177;
-  --lng1771-primary-90: #278177;
-
-  --lng1771-focus-outline: var(--lng1771-primary-50);
-  --lng1771-row-selected: #192b2d;
-
-  --lng1771-gray-00: #0e1317;
-  --lng1771-gray-02: #11161b;
-  --lng1771-gray-05: #161b21;
-  --lng1771-gray-10: #1b2128;
-  --lng1771-gray-20: #20262d;
-  --lng1771-gray-30: #2a323c;
-  --lng1771-gray-40: #303a41;
-  --lng1771-gray-50: #465056;
-  --lng1771-gray-60: #65727b;
-  --lng1771-gray-70: #818f98;
-  --lng1771-gray-80: #a8b2b8;
-  --lng1771-gray-90: #d7dbdd;
-  --lng1771-gray-100: #edeeef;
-
-  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
-  --lng1771-pill-column-fill: #1b3237;
-  --lng1771-pill-column-stroke: rgba(0, 181, 181, 0.36);
-  --lng1771-pill-pivot-fill: rgba(120, 57, 255, 0.18);
-  --lng1771-pill-pivot-stroke: rgba(136, 81, 255, 0.6);
-  --lng1771-pill-group-fill: rgba(0, 221, 147, 0.14);
-  --lng1771-pill-group-stroke: rgba(26, 255, 172, 0.35);
-  --lng1771-pill-icon-color: var(--lng1771-gray-70);
-}
-
-.lng1771-term256 {
-  color-scheme: dark;
-  /* Grid theme */
-
-  --lng1771-typeface:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-  --lng1771-header-font-typeface: var(--lng1771-typeface);
-  --lng1771-cell-font-typeface: var(--lng1771-typeface);
-  --lng1771-menu-item-font-typeface: var(--lng1771-typeface);
-
-  --lng1771-primary-05: rgba(87, 255, 255, 0.07);
-  --lng1771-primary-10: rgba(87, 255, 255, 0.07);
-  --lng1771-primary-30: rgba(87, 255, 255, 0.3);
-  --lng1771-primary-50: #57ffff;
-  --lng1771-primary-70: #278081;
-  --lng1771-primary-90: #278081;
-
-  --lng1771-row-selected: #192b2d;
-  --lng1771-focus-outline: var(--lng1771-primary-50);
-
-  --lng1771-gray-00: #000000;
-  --lng1771-gray-02: #0f0f0f;
-  --lng1771-gray-05: #121212;
-  --lng1771-gray-10: #1c1c1c;
-  --lng1771-gray-20: #262626;
-  --lng1771-gray-30: #303030;
-  --lng1771-gray-40: #3a3a3a;
-  --lng1771-gray-50: #4e4e4e;
-  --lng1771-gray-60: #626262;
-  --lng1771-gray-70: #8a8a8a;
-  --lng1771-gray-80: #a8a8a8;
-  --lng1771-gray-90: #dadada;
-  --lng1771-gray-100: #eeeeee;
-
-  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
-  --lng1771-pill-column-fill: #182a2a;
-  --lng1771-pill-column-stroke: rgba(0, 181, 181, 0.266);
-  --lng1771-pill-pivot-fill: rgba(120, 57, 255, 0.18);
-  --lng1771-pill-pivot-stroke: rgba(136, 81, 255, 0.6);
-  --lng1771-pill-group-fill: rgba(0, 221, 147, 0.14);
-  --lng1771-pill-group-stroke: rgba(26, 255, 172, 0.35);
-  --lng1771-pill-icon-color: var(--lng1771-gray-60);
-}
-
-.light .lng1771-cotton-candy,
-.lng1771-cotton-candy {
-  --lng1771-primary-05: rgba(240, 48, 230, 0.03);
-  --lng1771-primary-10: rgba(240, 48, 230, 0.07);
-  --lng1771-primary-30: rgba(240, 48, 230, 0.25);
-  --lng1771-primary-50: rgba(240, 48, 230, 1);
-  --lng1771-primary-70: rgba(240, 48, 230, 1);
-  --lng1771-primary-90: rgba(194, 0, 184, 1);
-
-  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 30%, transparent);
-  --lng1771-focus-outline: var(--color-primary);
-
-  --lng1771-gray-00: #cff8ff;
-  --lng1771-gray-02: #b0eaf2;
-  --lng1771-gray-05: #fde9ff;
-  --lng1771-gray-10: #e4d5f5;
-  --lng1771-gray-20: #c8cef3;
-  --lng1771-gray-30: #c1c7f4;
-  --lng1771-gray-40: color-mix(in srgb, #677af3 70%, black);
-  --lng1771-gray-50: color-mix(in srgb, #677af3 65%, black);
-  --lng1771-gray-60: #4237a9;
-  --lng1771-gray-70: color-mix(in srgb, #677af3 90%, white);
-  --lng1771-gray-80: #1c1484;
-  --lng1771-gray-90: #151234;
-  --lng1771-gray-100: rgb(0, 0, 0);
-
-  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
-  --lng1771-pill-column-fill: #c4c2ff;
-  --lng1771-pill-column-stroke: #754bff;
-  --lng1771-pill-pivot-fill: #ffc5e1;
-  --lng1771-pill-pivot-stroke: #f0959e;
-  --lng1771-pill-group-fill: #97ffaa;
-  --lng1771-pill-group-stroke: #4ce96e;
-  --lng1771-pill-icon-color: var(--lng1771-gray-50);
-}
-
-.light .lng1771-shadcn,
-.lng1771-shadcn-light {
-  --lng1771-primary-05: color-mix(in srgb, var(--color-accent) 5%, transparent);
-  --lng1771-primary-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
-  --lng1771-primary-30: color-mix(in srgb, var(--color-accent-foreground) 10%, transparent);
-  --lng1771-primary-50: var(--color-accent-foreground);
-  --lng1771-primary-70: color-mix(in srgb, var(--color-accent) 70%, black);
-  --lng1771-primary-90: color-mix(in srgb, var(--color-accent) 90%, black);
-
-  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 30%, transparent);
-  --lng1771-focus-outline: var(--color-primary);
-
-  --lng1771-gray-00: var(--color-background);
-  --lng1771-gray-02: color-mix(in srgb, var(--color-background) 99%, black);
-  --lng1771-gray-05: color-mix(in srgb, var(--color-background) 98%, black);
-  --lng1771-gray-10: color-mix(in srgb, var(--color-background) 95%, black);
-  --lng1771-gray-20: color-mix(in srgb, var(--color-background) 90%, black);
-  --lng1771-gray-30: color-mix(in srgb, var(--color-background) 86%, black);
-  --lng1771-gray-40: color-mix(in srgb, var(--color-background) 70%, black);
-  --lng1771-gray-50: color-mix(in srgb, var(--color-background) 65%, black);
-  --lng1771-gray-60: color-mix(in srgb, var(--color-background) 40%, black);
-  --lng1771-gray-70: color-mix(in srgb, var(--color-background) 20%, black);
-  --lng1771-gray-80: var(--color-secondary-foreground);
-  --lng1771-gray-90: var(--color-primary);
-  --lng1771-gray-100: black;
-
-  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
-  --lng1771-pill-column-fill: var(--color-primary-foreground);
-  --lng1771-pill-column-stroke: var(--color-primary);
-  --lng1771-pill-pivot-fill: #f5f3ff;
-  --lng1771-pill-pivot-stroke: #ddd6ff;
-  --lng1771-pill-group-fill: #d9f2eb;
-  --lng1771-pill-group-stroke: #538a7f;
-  --lng1771-pill-icon-color: var(--lng1771-gray-50);
-}
-
-.dark .lng1771-shadcn,
-.lng1771-shadcn-dark {
-  --lng1771-primary-05: color-mix(in srgb, var(--color-accent) 5%, transparent);
-  --lng1771-primary-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
-  --lng1771-primary-30: color-mix(in srgb, var(--color-accent-foreground) 10%, transparent);
-  --lng1771-primary-50: var(--color-accent-foreground);
-  --lng1771-primary-70: color-mix(in srgb, var(--color-accent) 70%, white);
-  --lng1771-primary-90: color-mix(in srgb, var(--color-accent) 90%, white);
-
-  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 30%, transparent);
-  --lng1771-focus-outline: var(--color-primary);
-
-  --lng1771-gray-00: var(--color-background);
-  --lng1771-gray-02: color-mix(in srgb, var(--color-background) 99%, white);
-  --lng1771-gray-05: color-mix(in srgb, var(--color-background) 98%, white);
-  --lng1771-gray-10: color-mix(in srgb, var(--color-background) 95%, white);
-  --lng1771-gray-20: color-mix(in srgb, var(--color-background) 90%, white);
-  --lng1771-gray-30: color-mix(in srgb, var(--color-background) 86%, white);
-  --lng1771-gray-40: color-mix(in srgb, var(--color-background) 70%, white);
-  --lng1771-gray-50: color-mix(in srgb, var(--color-background) 65%, white);
-  --lng1771-gray-60: color-mix(in srgb, var(--color-background) 40%, white);
-  --lng1771-gray-70: color-mix(in srgb, var(--color-background) 20%, white);
-  --lng1771-gray-80: var(--color-secondary-foreground);
-  --lng1771-gray-90: var(--color-primary);
-  --lng1771-gray-100: white;
-
-  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
-  --lng1771-pill-column-fill: var(--color-primary-foreground);
-  --lng1771-pill-column-stroke: var(--color-primary);
-  --lng1771-pill-pivot-fill: #2f0d68;
-  --lng1771-pill-pivot-stroke: #4d179a;
-  --lng1771-pill-group-fill: #162456;
-  --lng1771-pill-group-stroke: #1c398e;
-  --lng1771-pill-icon-color: var(--lng1771-gray-50);
-}
-
-.lng-grid {
-  [data-ln-has-cell-selection="true"] [data-ln-cell="true"]:focus-visible {
-    outline: none;
-  }
-
-  [data-ln-cell="true"] {
-    border-bottom: 1px solid var(--lng1771-gray-20);
-    border-right: 1px solid transparent;
-
-    color: var(--lng1771-gray-80);
-    font-size: 14px;
-    font-weight: 400;
-    font-family: var(--lng1771-typeface);
-
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    background-color: var(--lng1771-gray-00);
-
-    &[data-ln-last-start-pin="true"] {
-      position: relative;
-      &::before {
-        position: absolute;
-        content: "";
-        top: 0px;
-        inset-inline-end: 0px;
-        width: 1px;
-        height: 100%;
-        background-color: var(--lng1771-gray-20);
-      }
-    }
-    &[data-ln-first-end-pin="true"] {
-      position: relative;
-      &::before {
-        position: absolute;
-        content: "";
-        top: 0px;
-        inset-inline-start: 0px;
-        width: 1px;
-        height: 100%;
-        background-color: var(--lng1771-gray-20);
-      }
-    }
-  }
-
-  [data-ln-alternate="true"] [data-ln-cell="true"] {
-    background-color: var(--lng1771-gray-02);
-  }
-  [data-ln-row-selected="true"] [data-ln-cell="true"] {
-    background-color: var(--lng1771-row-selected);
-  }
-
-  [data-ln-row="true"]:hover [data-ln-cell="true"] {
-    background-color: var(--lng1771-gray-10);
-  }
-  [data-ln-row-selected="true"][data-ln-row="true"]:hover [data-ln-cell="true"] {
-    background-color: var(--lng1771-primary-30);
-  }
-  [data-ln-rowtype="full-width"][data-ln-row="true"] > div:hover {
-    background-color: var(--lng1771-gray-10);
-  }
-  [data-ln-row-selected="true"][data-ln-rowtype="full-width"][data-ln-row="true"] > div:hover {
-    background-color: var(--lng1771-primary-30);
-  }
-
-  [data-ln-rows-top="true"] {
-    position: relative;
-    &::after {
-      position: absolute;
-      content: "";
-      bottom: 0px;
-      inset-inline-start: 0px;
-      width: 100%;
-      height: 1px;
-      background-color: var(--lng1771-gray-40);
-      z-index: 5;
-    }
-  }
-
-  [data-ln-rows-bottom="true"] {
-    position: relative;
-    &::after {
-      position: absolute;
-      content: "";
-      top: 0px;
-      inset-inline-start: 0px;
-      width: 100%;
-      height: 1px;
-      background-color: var(--lng1771-gray-40);
-      z-index: 5;
-    }
-  }
-
-  [data-ln-row="true"][data-ln-rowtype="full-width"] {
-    background-color: var(--lng1771-gray-00);
-    border-bottom: 1px solid var(--lng1771-gray-20);
-
-    &[data-ln-row-selected="true"] {
-      background-color: var(--lng1771-row-selected);
-    }
-  }
-
-  [data-ln-header-cell="true"],
-  [data-ln-header-group="true"] {
-    user-select: none;
-    color: var(--lng1771-gray-80);
-    background-color: var(--lng1771-gray-00);
-    border-bottom: 1px solid var(--lng1771-gray-20);
-    font-family: var(--lng1771-typeface);
-
-    position: relative;
-    &::after {
-      position: absolute;
-      content: "";
-      top: 4px;
-      inset-inline-end: 0px;
-      width: 1px;
-      height: calc(100% - 8px);
-      background-color: var(--lng1771-gray-20);
-    }
-    &[data-ln-colpin="end"]::after {
-      inset-inline-end: unset;
-      inset-inline-start: 0px;
-    }
-
-    &[data-ln-last-start-pin]::after {
-      inset-inline-end: 1px;
-      background-color: var(--lng1771-gray-20);
-    }
-    &[data-ln-first-end-pin]::after {
-      background-color: var(--lng1771-gray-20);
-    }
-  }
-
-  [data-ln-header-group="true"] {
-    color: var(--lng1771-gray-60);
-    font-size: 14px;
-    font-weight: 600;
-  }
-
-  [data-ln-header-resizer="true"] {
-    background-color: transparent;
-    transition: background-color 200ms ease-in-out;
-    cursor: col-resize;
-    &:hover {
-      background-color: var(--lng1771-primary-50);
-    }
-  }
-  [data-ln-row-detail="true"] {
-    background-color: var(--lng1771-gray-05);
-  }
-
-  [data-ln-row="true"][data-ln-can-drop="true"] {
-    &[data-ln-over-top-half="true"] {
-      border-top: 1px solid var(--lng1771-primary-50);
-    }
-    &[data-ln-over-top-half="false"] [data-ln-cell="true"] {
-      border-bottom: 1px solid var(--lng1771-primary-50);
-    }
-  }
-
-  [data-ln-cell-selection-rect]:not([data-ln-cell-selection-is-unit="true"]) {
-    background-color: var(--lng1771-primary-30);
-    box-sizing: border-box;
-
-    &[data-ln-cell-selection-border-top="true"] {
-      border-top: 1px solid var(--lng1771-primary-50);
-    }
-    &[data-ln-cell-selection-border-bottom="true"] {
-      border-bottom: 1px solid var(--lng1771-primary-50);
-    }
-    &[data-ln-cell-selection-border-start="true"] {
-      border-inline-start: 1px solid var(--lng1771-primary-50);
-    }
-    &[data-ln-cell-selection-border-end="true"] {
-      border-inline-end: 1px solid var(--lng1771-primary-50);
-    }
-  }
-  [data-ln-cell-selection-rect][data-ln-cell-selection-is-unit="true"] {
-    outline: 1px solid var(--lng1771-primary-50);
-    outline-offset: -1px;
-  }
-}