@vuu-ui/vuu-table-extras 0.8.44 → 0.8.46

package/esm/table-settings/TableSettingsPanel.js

@@ -1,8 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { ColumnList } from '../column-list/ColumnList.js';
 import { useTableSettings } from './useTableSettings.js';
 import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
+import tableSettingsPanelCss from './TableSettingsPanel.css.js';
 
 const classBase = "vuuTableSettingsPanel";
 const TableSettingsPanel = ({
@@ -16,6 +19,12 @@ const TableSettingsPanel = ({
   onNavigateToColumn,
   tableConfig: tableConfigProp
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-table-settings-panel",
+    css: tableSettingsPanelCss,
+    window: targetWindow
+  });
   const {
     columnItems,
     columnLabelsValue,

package/esm/table-settings/TableSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsPanel.js","sources":["../../src/table-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { TableSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\n\nimport \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\n/**\n  The TableSettingsPanel assumes 'ownership' of the tableSettings.\n  It updates the settings in state locally and notifies caller of\n  every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n  allowColumnLabelCase = true,\n  allowColumnDefaultWidth = true,\n  allowGridRowStyling = true,\n  availableColumns,\n  onAddCalculatedColumn,\n  onConfigChange,\n  onDataSourceConfigChange,\n  onNavigateToColumn,\n  tableConfig: tableConfigProp,\n}: TableSettingsProps) => {\n  const {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onColumnChange,\n    onCommitColumnWidth,\n    onMoveListItem,\n    tableConfig,\n  } = useTableSettings({\n    availableColumns,\n    onConfigChange,\n    onDataSourceConfigChange,\n    tableConfig: tableConfigProp,\n  });\n\n  return (\n    <div className={classBase}>\n      {allowColumnLabelCase ||\n      allowColumnDefaultWidth ||\n      allowGridRowStyling ? (\n        <div className={`${classBase}-header`}>\n          <span>Column Settings</span>\n        </div>\n      ) : null}\n\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            className=\"vuuInput\"\n            data-embedded\n            onCommit={onCommitColumnWidth}\n          />\n        </FormField>\n      ) : null}\n\n      {allowColumnLabelCase ? (\n        <FormField>\n          <FormFieldLabel>Column Labels</FormFieldLabel>\n          <ToggleButtonGroup\n            className=\"vuuToggleButtonGroup\"\n            onChange={onChangeColumnLabels}\n            value={columnLabelsValue}\n          >\n            <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n              <Icon name=\"text-strikethrough\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n              <Icon name=\"text-Tt\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n              <Icon name=\"text-T\" size={48} />\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </FormField>\n      ) : null}\n\n      {allowGridRowStyling ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableConfig.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.columnSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"columnSeparators\"\n            >\n              <Icon name=\"col-lines\" size={16} />\n            </ToggleButton>\n          </div>\n        </FormField>\n      ) : null}\n\n      <ColumnList\n        columnItems={columnItems}\n        onChange={onColumnChange}\n        onMoveListItem={onMoveListItem}\n        onNavigateToColumn={onNavigateToColumn}\n      />\n\n      <div className={`${classBase}-calculatedButtonbar`}>\n        <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n        <span className={`${classBase}-calculatedLabel`}>\n          Add calculated column\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableSettingsPanel.js","sources":["../../src/table-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\n/**\n  The TableSettingsPanel assumes 'ownership' of the tableSettings.\n  It updates the settings in state locally and notifies caller of\n  every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n  allowColumnLabelCase = true,\n  allowColumnDefaultWidth = true,\n  allowGridRowStyling = true,\n  availableColumns,\n  onAddCalculatedColumn,\n  onConfigChange,\n  onDataSourceConfigChange,\n  onNavigateToColumn,\n  tableConfig: tableConfigProp,\n}: TableSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-settings-panel\",\n    css: tableSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onColumnChange,\n    onCommitColumnWidth,\n    onMoveListItem,\n    tableConfig,\n  } = useTableSettings({\n    availableColumns,\n    onConfigChange,\n    onDataSourceConfigChange,\n    tableConfig: tableConfigProp,\n  });\n\n  return (\n    <div className={classBase}>\n      {allowColumnLabelCase ||\n      allowColumnDefaultWidth ||\n      allowGridRowStyling ? (\n        <div className={`${classBase}-header`}>\n          <span>Column Settings</span>\n        </div>\n      ) : null}\n\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            className=\"vuuInput\"\n            data-embedded\n            onCommit={onCommitColumnWidth}\n          />\n        </FormField>\n      ) : null}\n\n      {allowColumnLabelCase ? (\n        <FormField>\n          <FormFieldLabel>Column Labels</FormFieldLabel>\n          <ToggleButtonGroup\n            className=\"vuuToggleButtonGroup\"\n            onChange={onChangeColumnLabels}\n            value={columnLabelsValue}\n          >\n            <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n              <Icon name=\"text-strikethrough\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n              <Icon name=\"text-Tt\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n              <Icon name=\"text-T\" size={48} />\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </FormField>\n      ) : null}\n\n      {allowGridRowStyling ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableConfig.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.columnSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"columnSeparators\"\n            >\n              <Icon name=\"col-lines\" size={16} />\n            </ToggleButton>\n          </div>\n        </FormField>\n      ) : null}\n\n      <ColumnList\n        columnItems={columnItems}\n        onChange={onColumnChange}\n        onMoveListItem={onMoveListItem}\n        onNavigateToColumn={onNavigateToColumn}\n      />\n\n      <div className={`${classBase}-calculatedButtonbar`}>\n        <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n        <span className={`${classBase}-calculatedLabel`}>\n          Add calculated column\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,23 +1,25 @@
 {
-  "version": "0.8.44",
+  "version": "0.8.46",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.8.44",
-    "@vuu-ui/vuu-protocol-types": "0.8.44"
+    "@vuu-ui/vuu-filter-types": "0.8.46",
+    "@vuu-ui/vuu-protocol-types": "0.8.46"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.8.44",
-    "@vuu-ui/vuu-data-react": "0.8.44",
-    "@vuu-ui/vuu-data-types": "0.8.44",
-    "@vuu-ui/vuu-table-types": "0.8.44",
-    "@vuu-ui/vuu-layout": "0.8.44",
-    "@vuu-ui/vuu-popups": "0.8.44",
-    "@vuu-ui/vuu-table": "0.8.44",
-    "@vuu-ui/vuu-utils": "0.8.44",
-    "@vuu-ui/vuu-ui-controls": "0.8.44",
+    "@vuu-ui/vuu-codemirror": "0.8.46",
+    "@vuu-ui/vuu-data-react": "0.8.46",
+    "@vuu-ui/vuu-data-types": "0.8.46",
+    "@vuu-ui/vuu-table-types": "0.8.46",
+    "@vuu-ui/vuu-layout": "0.8.46",
+    "@vuu-ui/vuu-popups": "0.8.46",
+    "@vuu-ui/vuu-table": "0.8.46",
+    "@vuu-ui/vuu-utils": "0.8.46",
+    "@vuu-ui/vuu-ui-controls": "0.8.46",
     "@lezer/lr": "1.3.4",
-    "@salt-ds/core": "1.17.0"
+    "@salt-ds/core": "1.17.0",
+    "@salt-ds/styles": "0.2.1",
+    "@salt-ds/window": "0.1.1"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/types/cell-renderers/background-cell/BackgroundCell.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
 import { TableCellProps } from "@vuu-ui/vuu-table-types";
-import "./BackgroundCell.css";
-import "./BackgroundKeyframes.css";
 export declare const BackgroundCell: import("react").NamedExoticComponent<TableCellProps>;

package/types/cell-renderers/background-cell/BackgroundCellConfigurationEditor.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { ConfigurationEditorProps } from "@vuu-ui/vuu-utils";
-import "./BackgroundCellConfigurationEditor.css";
 export declare const BackgroundCellConfigurationEditor: ({ column, onChangeRendering, }: ConfigurationEditorProps) => JSX.Element;

package/types/cell-renderers/dropdown-cell/DropdownCell.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-import "./DropdownCell.css";
 export declare const DropdownCell: import("react").NamedExoticComponent<TableCellRendererProps>;

package/types/cell-renderers/pct-progress-cell/PctProgressCell.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { TableCellProps } from "@vuu-ui/vuu-table-types";
-import "./PctProgressCell.css";
 export declare const PctProgressCell: ({ column, columnMap, row }: TableCellProps) => JSX.Element;

package/types/cell-renderers/progress-cell/ProgressCell.d.ts

@@ -1 +1 @@
-import "./ProgressCell.css";
+export {};

package/types/column-expression-input/ColumnExpressionInput.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from "react";
 import { ColumnDefinitionExpression } from "./column-language-parser";
 import { ExpressionSuggestionConsumer } from "./useColumnExpressionEditor";
-import "./ColumnExpressionInput.css";
 export type ColumnExpressionSubmitHandler = (source: string, expression: ColumnDefinitionExpression | undefined) => void;
 export interface ColumnExpressionInputProps extends ExpressionSuggestionConsumer, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     onChange?: (source: string) => void;

package/types/column-formatting-settings/LongTypeFormattingSettings.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { FormattingSettingsProps } from "@vuu-ui/vuu-table-types";
-import "./LongTypeFormattingSettings.css";
 export declare const LongTypeFormattingSettings: (props: FormattingSettingsProps) => JSX.Element;

package/types/column-list/ColumnList.d.ts

@@ -2,7 +2,6 @@ import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { ListProps } from "@vuu-ui/vuu-ui-controls";
 import { HTMLAttributes } from "react";
 import { ColumnItem } from "../table-settings";
-import "./ColumnList.css";
 export type ColumnChangeHandler = (columnName: string, propertyName: keyof ColumnDescriptor | "subscribed", value: string | number | boolean) => void;
 export interface ColumnListProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     columnItems: ColumnItem[];

package/types/column-settings/ColumnNameLabel.d.ts

@@ -1,5 +1,4 @@
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-import "./ColumnNameLabel.css";
 import { MouseEventHandler } from "react";
 export interface ColumnNameLabelProps {
     column: ColumnDescriptor;

package/types/column-settings/ColumnSettingsPanel.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { ColumnSettingsProps } from "@vuu-ui/vuu-table-types";
-import "./ColumnSettingsPanel.css";
 export declare const ColumnSettingsPanel: ({ column: columnProp, onCancelCreateColumn, onConfigChange, onCreateCalculatedColumn, tableConfig, vuuTable, }: ColumnSettingsProps) => JSX.Element;

package/types/datasource-stats/DatasourceStats.d.ts

@@ -1,6 +1,5 @@
 import { DataSource } from "@vuu-ui/vuu-data-types";
 import { HTMLAttributes } from "react";
-import "./DatasourceStats.css";
 interface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {
     dataSource: DataSource;
 }

package/types/table-settings/TableSettingsPanel.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { TableSettingsProps } from "@vuu-ui/vuu-table-types";
-import "./TableSettingsPanel.css";
 /**
   The TableSettingsPanel assumes 'ownership' of the tableSettings.
   It updates the settings in state locally and notifies caller of

package/cjs/cell-renderers/background-cell/BackgroundCell.css

@@ -1,105 +0,0 @@
-
-.vuuBackgroundCell {
-  --background-animation-duration: 10s;
-  color: var(--vuuBackgroundCell-color, var(--vuu-color-gray-80));
-  padding-right: var(--salt-size-unit);
-  position: relative;
-  z-index: -1;
-}
-
-.vuuBackgroundCell-arrowBackground,
-.vuuBackgroundCell-arrowOnly {
-  padding-left: 14px;
-}
-
-.vuuBackgroundCell-arrow {
-  background-color: var(--background-cell-background);
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: -1;
-}
-
-.vuuBackgroundCell-arrow {
-  text-align: left;
-}
-.vuuBackgroundCell-arrow + .num {
-  padding-left: 8px;
-}
-
-.right .vuuBackgroundCell-arrow {
-  text-align: right;
-}
-.right .vuuBackgroundCell-arrow + .num {
-  padding-right: 8px;
-}
-
-.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
-  background-color: transparent;
-}
-
-.vuuBackgroundCell-backgroundOnly.up1,
-.vuuBackgroundCell-arrowBackground.up1 {
-  animation-duration: var(--background-animation-duration);
-  animation-name: vuubgup1;
-}
-
-.vuuBackgroundCell-backgroundOnly.up2,
-.vuuBackgroundCell-arrowBackground.up2 {
-  animation-duration: var(--background-animation-duration);
-  animation-name: vuubgup2;
-}
-
-.vuuBackgroundCell-backgroundOnly.down1,
-.vuuBackgroundCell-arrowBackground.down1 {
-  animation-duration: var(--background-animation-duration);
-  animation-name: vuubgdown1;
-}
-
-.vuuBackgroundCell-backgroundOnly.down2,
-.vuuBackgroundCell-arrowBackground.down2 {
-  animation-duration: var(--background-animation-duration);
-  animation-name: vuubgdown2;
-}
-
-.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
-  animation-duration: 30s;
-  animation-name: vuuarrowup1;
-}
-
-.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
-  animation-duration: 30s;
-  animation-name: vuuarrowup2;
-}
-
-.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
-  animation-duration: 30s;
-  animation-name: vuuarrowdown1;
-}
-
-.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
-  animation-duration: 30s;
-  animation-name: vuuarrowdown2;
-}
-
-.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
-  animation-duration: 30s;
-  animation-name: vuubgarrowup1;
-}
-
-.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
-  animation-duration: 30s;
-  animation-name: vuubgarrowup2;
-}
-
-.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
-  animation-duration: 30s;
-  animation-name: vuubgarrowdown1;
-}
-
-.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
-  animation-duration: 30s;
-  animation-name: vuubgarrowdown2;
-}

package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css

@@ -1,4 +0,0 @@
-.vuuBackgroundCellConfiguration {
-    height: 50px;
-    background-color: red;
-}

package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css

@@ -1,169 +0,0 @@
-
-@keyframes vuubgup1 {
-    0% {
-      background-color: var(--vuu-color-green-50);
-      color: white;
-    }
-
-    30% {
-      color: white;
-    }  
-    33% {
-      color: var(--vuu-color-gray-80);
-    }  
-
-    100% {
-      background-color: transparent;
-      color: var(--vuu-color-gray-80);
-    }
-  }
-  
-  @keyframes vuubgup2 {
-    0% {
-      background-color: var(--vuu-color-green-50);
-      color: white;
-    }
-
-    30% {
-      color: white;
-    }  
-    33% {
-      color: var(--vuu-color-gray-80);
-    }  
-
-    100% {
-      background-color: transparent;
-      color: var(--vuu-color-gray-80);
-    }
-  }
-  
-  @keyframes vuubgdown1 {
-    0% {
-      background-color: var(--vuu-color-red-50);
-      color: white;
-    }
-    30% {
-      color: white;
-    }  
-    33% {
-      color: var(--vuu-color-gray-80);
-    }  
-    100% {
-      background-color: transparent;
-      color: var(--vuu-color-gray-80);
-    }
-  }
-  
-  @keyframes vuubgdown2 {
-    0% {
-      background-color: var(--vuu-color-red-50);
-      color: white;
-    }
-    30% {
-      color: white;
-    }  
-    33% {
-      color: var(--vuu-color-gray-80);
-    }  
-    100% {
-      background-color: transparent;
-      color: var(--vuu-color-gray-80);
-    }
-  }
-  
-  @keyframes vuuarrowup1 {
-    from {
-      color: var(--salt-differential-positive-foreground);
-    }
-    to {
-      color: transparent;
-    }
-  }
-  
-  @keyframes vuuarrowup2 {
-    from {
-      color: var(--salt-differential-positive-foreground);
-    }
-    to {
-      color: transparent;
-    }
-  }
-  
-  @keyframes vuuarrowdown1 {
-    from {
-      color: var(--salt-differential-negative-foreground);
-    }
-    to {
-      color: transparent;
-    }
-  }
-  
-  @keyframes vuuarrowdown2 {
-    from {
-      color: var(--salt-differential-negative-foreground);
-    }
-    to {
-      color: transparent;
-    }
-  }
-  
-  @keyframes vuubgarrowup1 {
-    0% {
-      color: var(--salt-differential-positive-foreground);
-      background-color: var(--vuu-color-green-50);
-    }
-    20% {
-      color: var(--salt-differential-positive-foreground);
-      background-color: transparent;
-    }
-    100% {
-      color: transparent;
-      background-color: transparent;
-    }
-  }
-  
-  @keyframes vuubgarrowup2 {
-    0% {
-      color: var(--salt-differential-positive-foreground);
-      background-color: var(--vuu-color-green-50);
-    }
-    20% {
-      color: var(--salt-differential-positive-foreground);
-      background-color: transparent;
-    }
-    100% {
-      color: transparent;
-      background-color: transparent;
-    }
-  }
-  
-  @keyframes vuubgarrowdown1 {
-    0% {
-      color: var(--salt-differential-negative-foreground);
-      background-color: var(--vuu-color-red-50);
-    }
-    20% {
-      color: var(--salt-differential-negative-foreground);
-      background-color: transparent;
-    }
-    100% {
-      color: transparent;
-      background-color: transparent;
-    }
-  }
-  
-  @keyframes vuubgarrowdown2 {
-    0% {
-      color: var(--salt-differential-negative-foreground);
-      background-color: var(--vuu-color-red-50);
-    }
-    20% {
-      color: var(--salt-differential-negative-foreground);
-      background-color: transparent;
-    }
-    100% {
-      color: transparent;
-      background-color: transparent;
-    }
-  }
-  

package/cjs/cell-renderers/dropdown-cell/DropdownCell.css

@@ -1,18 +0,0 @@
-
-.vuuTableDropdownCell {
-    --vuu-icon-height: 15px;
-    --salt-focused-outlineStyle: none;
-
-    --saltButton-borderRadius: 4px;
-    font-weight: 500;
-
-    .vuuDropdownButton {
-        --saltButton-height: var(--vuu-table-embedded-control-height);
-    }
-}
-
-.vuuTableDropdownCell button:focus-visible {
-    --saltButton-borderColor: var(--salt-focused-outlineColor);
-    --saltButton-borderWidth: 2px;
-    padding-left: 7px;
-}

package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css

@@ -1,30 +0,0 @@
-.vuuPctProgressCell {
-    --progress-bar-width: 2px;
-    position: relative;
-}
-
-.vuuPctProgressCell-zero {
-    --progress-bar-width: 0px;
-}
-.vuuPctProgressCell-complete {
-    --progress-bar-width: 0px;
-}
-
-.vuuPctProgressCell-progressBar {
-    background-color: var(--vuu-color-green-60-fade-30);
-    border-right: solid var(--progress-bar-width) var(--vuu-color-green-60);
-    display: inline-block;
-    height: 20px;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    width: var(--progress-bar-pct, 0);
-}
-
-
-.vuuPctProgressCell-text {
-    display: inline-block;
-    text-align: left;
-    width: 80%;
-    z-index: 1;
-}

package/cjs/cell-renderers/progress-cell/ProgressCell.css

@@ -1,39 +0,0 @@
-.vuuProgressCell {
-   align-items: center;
-   display: flex;
-}
-
-.vuuProgressCell-track {
-    display: inline-block;
-    flex: auto 1 1;
-    height: 4px;
-    overflow: hidden;
-    position: relative;
-}
-
-.vuuProgressCell-bg {
-    background-color: var(--salt-measured-background);
-    display: inline-block;
-    height: 2px;
-    left: 0;
-    position: absolute;
-    top: 1px;
-    width: 100%;
-}
-
-
-.vuuProgressCell-bar {
-    background-color: var(--salt-measured-fill);
-    display: inline-block;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top:0;
-    transform: translateX(var(--progress-bar-pct, -100%));
-    width: 100%;
-}
-
-.vuuProgressCell-text {
-    flex: 35px 0 0;
-    text-align: right;
-}

package/cjs/column-expression-input/ColumnExpressionInput.css

@@ -1,92 +0,0 @@
-
-.vuuColumnExpressionInput {
-    --vuuFilterEditor-background: var(--salt-container-primary-background);
-    --vuuFilterEditor-color: var(--salt-content-primary-foreground);
-    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
-    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
-    --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
-    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
-    --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
-    --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10); 
-    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
-    --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);
-    --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground);
-    --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);
-    --vuuFilterEditor-suggestion-height: 24px;
-    --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);
-
-    align-items: center;
-    box-sizing: border-box;
-    height: 30px;
-}
-
-.vuuColumnExpressionInput-FilterButton,
-.vuuColumnExpressionInput-ClearButton {
-    --vuu-icon-size: 12px;
-    --saltButton-width: 28px;
-}
-
-.expression-type-container {
-    margin: 0 3px 0 auto;
-    color: var(--salt-text-secondary-foreground)
-}
-
-.expression-kind {
-    display: inline-block;
-    width: 50px;
-}
-
-.expression-type {
-    display: inline-block;
-    text-align: right;
-    width: 50px;
-}
-
-.vuuSuggestion {
-    display: flex;
-    align-items: center;
-}
-
-.vuuFunctionDoc {
-    padding: 13px 7px;
-}
-
-.vuuFunctionDoc .function-heading {
-    display: flex;
-    gap: 3px;
-}
-
-.vuuFunctionDoc .function-name {
-    font-weight: 700;
-    text-transform: capitalize;
-}
-
-.vuuFunctionDoc .param-list {
-    color: var(--vuu-color-gray-50);
-    white-space: pre;
-}
-
-.vuuFunctionDoc .function-type {
-    color: var(--vuu-color-gray-50);
-    font-weight: 700;
-    margin-left: auto;
-    text-transform: capitalize;
-}
-
-.vuuFunctionDoc .example-container {
-    background-color: var(--vuu-color-gray-03);
-    margin: 6px 0;
-    padding: 3px;
-}
-
-.vuuFunctionDoc .example-expression {
-    color: var(--vuu-color-gray-80);
-    font-family: var(--salt-typography-fontFamily-code);
-    font-weight: 500;
-    padding: 8px;
-}
-
-.vuuFunctionDoc .example-result {
-    margin-left: 8px;
-    margin-top: 6px;
-}

package/cjs/column-formatting-settings/LongTypeFormattingSettings.css

@@ -1,6 +0,0 @@
-.vuuLongColumnFormattingSettings {
-  display: flex;
-  flex-direction: column;
-  gap: var(--salt-spacing-200);
-  padding-top: 6px;
-}