@stella-source/stellasource-dsl 0.2.2 → 0.2.4

package/dist/cjs/types/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./types";
-declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, }: TableProps<T>): React.JSX.Element;
+declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }: TableProps<T>): React.JSX.Element;
 export default Table;

package/dist/cjs/types/components/Table/TableComponents/EmptyTableState.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface EmptyTableStateProps {
+    id?: string;
+    className?: string;
+    header: string;
+    subHeader?: string;
+    showClearFilterButton?: boolean;
+    onClearFilters?: () => void;
+    colSpan: number;
+    size?: "small" | "large";
+}
+declare const EmptyTableState: ({ id, className, header, subHeader, showClearFilterButton, colSpan, size, onClearFilters, }: EmptyTableStateProps) => React.JSX.Element;
+export default EmptyTableState;

package/dist/cjs/types/components/Table/styles.d.ts

@@ -12,7 +12,7 @@ declare const HeaderCell: import("styled-components/dist/types").IStyledComponen
 declare const HeaderCellPosition: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const TableWrapperScroll: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $filterMenuOpen: boolean;
+    $stopScroll: boolean;
 }>> & string;
 declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
 declare const CustomIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, HeaderIconButtonProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
@@ -41,4 +41,11 @@ declare const LoadingShimmer: import("styled-components/dist/types").IStyledComp
 }>> & string;
 declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, never>> & string & Omit<({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: import("../Pagination/types").PaginationProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 declare const KebabAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export { HeaderCell, TableWrapper, TableWrapperScroll, StyledTable, CustomIconButton, SortButton, HeaderRow, FilterMenu, Checkbox, BodyCell, HeaderCellPosition, MenuButton, MenuItem, FilterBoxLabel, LoadingShimmer, FilterLabelTransparent, CustomPagination, CellRow, MenuItemGroup, KebabAlign, MenuItemOption, };
+declare const EmptyTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+declare const EmptyTableSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+    $size?: "small" | "large";
+}>> & string;
+declare const EmptyTableHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+declare const EmptyTableSubHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+declare const ClearFilterButtonRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { HeaderCell, TableWrapper, TableWrapperScroll, StyledTable, CustomIconButton, SortButton, HeaderRow, FilterMenu, Checkbox, BodyCell, HeaderCellPosition, MenuButton, MenuItem, FilterBoxLabel, LoadingShimmer, FilterLabelTransparent, CustomPagination, CellRow, MenuItemGroup, KebabAlign, MenuItemOption, EmptyTableCell, EmptyTableSection, EmptyTableHeader, EmptyTableSubHeader, ClearFilterButtonRow, };

package/dist/cjs/types/components/Table/types.d.ts

@@ -38,6 +38,11 @@ export interface TableProps<T> {
     paginationDetails?: PaginationDetails;
     rowStatuses?: Record<number | string, RowStatus>;
     resetTrigger?: number;
+    emptyTableState: {
+        header: string;
+        subHeader?: string;
+        showClearFilterButton?: boolean;
+    };
 }
 export interface CustomColumnMeta {
     headerAlign?: "left" | "right";

package/dist/cjs/types/components/TableUnitsAndTotals/types.d.ts

@@ -13,16 +13,16 @@ export declare enum QuoteCategory {
 interface TableUnitsAndTotalsProps {
     id?: string;
     className?: string;
-    value: number;
-    subValue?: number;
+    value: number | string;
+    subValue?: number | string;
     rightCategory?: `${QuoteCategory}`;
 }
 interface TotalPriceProps {
-    variant: QuoteVariants.TOTAL_PRICE;
+    variant: `${QuoteVariants.TOTAL_PRICE}`;
     leftCategory?: `${TableUnitsAndTotalsLeftCategory}`;
 }
 interface TotalWeightProps {
-    variant: QuoteVariants.TOTAL_WEIGHT;
+    variant: `${QuoteVariants.TOTAL_WEIGHT}`;
     leftCategory?: never;
 }
 export type TableUnitsAndTotals = TableUnitsAndTotalsProps & (TotalPriceProps | TotalWeightProps);

package/dist/cjs/types/index.d.ts

@@ -1,3 +1,4 @@
+/** Imports */
 /** Components */
 import Label from "./components/Label/Label";
 import StellaButton from "./components/StellaButton/StellaButton";
@@ -18,5 +19,7 @@ import { StellaButtonVariant } from "./components/StellaButton/types";
 /** Tokens */
 import { Styles } from "./shared/tokens";
 import "./shared/tokens/tokens.css";
+/**Exports */
+export * from "./components/TableUnitsAndTotals/types";
 export type { StellaIconDefinition } from "./components/StellaIcon/types";
 export { Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, Styles, };

package/dist/cjs/types/shared/tokens/whiteLabel/TransformValuesForOverridesUtil.d.ts

@@ -0,0 +1,4 @@
+import { WhiteLabelCSSOverridesProps } from "./WhiteLabelCSSOverrides";
+export declare const getValueFromColorVar: (color?: string) => string | undefined;
+export declare const getButtonHover: (all: WhiteLabelCSSOverridesProps) => string;
+export declare const getButtonHoverST: (all: WhiteLabelCSSOverridesProps) => string;

package/dist/cjs/types/shared/tokens/whiteLabel/WhiteLabelCSSOverrides.d.ts

@@ -0,0 +1,9 @@
+export interface WhiteLabelCSSOverridesProps {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+    quaternary?: string;
+    accent?: string;
+}
+declare const WhiteLabelCSSOverrides: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & WhiteLabelCSSOverridesProps>;
+export default WhiteLabelCSSOverrides;

package/dist/cjs/types/shared/utils/numberHelpers.d.ts

@@ -1,2 +1 @@
 export declare const formatDynamicNumbersWithCommas: (num: number | string, decimalPlaces: number) => string;
-export declare const formatNumberWithDecimals: (num: number | string, decimalPlaces?: number, isCurrency?: boolean) => string;

package/dist/esm/index.esm.js

@@ -16779,7 +16779,6 @@ const variantSelector = (variant) => {
         }
 
         &:disabled {
-          background-color: var(--DSL-button-st-background-disabled);
           border: 1px solid var(--DSL-button-disabled);
           color: var(--DSL-button-disabled);
           & svg {
@@ -16813,7 +16812,6 @@ const variantSelector = (variant) => {
         }
 
         &:disabled {
-          background-color: var(--DSL-button-st-background-disabled);
           color: var(--DSL-button-disabled);
           & svg {
             fill: var(--DSL-button-disabled);
@@ -16853,6 +16851,7 @@ const ButtonComponent = styled.button.attrs({
   }
 
   /* Button CSS Variables */
+  /* p = primary, st = secondary, tertiary */
   --DSL-button-branding: ${Styles.color.core.primary};
   --DSL-button-hover: ${Styles.color.blue.darkNavy};
   --DSL-button-active: ${Styles.color.blue.darkNavy};
@@ -17017,7 +17016,7 @@ const IconContainer = styled.div `
 `;
 
 const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, }) => {
-    return (a__default.createElement(Wrapper, { "data-testId": dataTestId, className: className },
+    return (a__default.createElement(Wrapper, { "data-testid": dataTestId, className: className },
         a__default.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }),
         a__default.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "data-testid": "text-input-wrapper" },
             leftCategory && a__default.createElement(Category, null, leftCategory),
@@ -17107,19 +17106,6 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces) => {
         })}${decimalEnding ? "." : ""}${decimalZero ? "0" : ""}`
         : "";
 };
-const formatNumberWithDecimals = (num, decimalPlaces = 2, isCurrency = false) => {
-    if (num === null || num === undefined || num === "")
-        return "";
-    const parsed = Number(num);
-    if (isNaN(parsed))
-        return "";
-    return parsed.toLocaleString("en-US", {
-        style: isCurrency ? "currency" : "decimal",
-        currency: isCurrency ? "USD" : undefined,
-        minimumFractionDigits: decimalPlaces,
-        maximumFractionDigits: decimalPlaces,
-    });
-};
 
 const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, }) => {
     const containerProps = {
@@ -20623,8 +20609,8 @@ const SelectCaret = styled(StellaIcon) `
   position: absolute;
   right: 0;
   pointer-events: none;
-  color: ${Styles.color.blue.primary};
-  fill: ${Styles.color.blue.primary};
+  color: ${Styles.color.core.primary};
+  fill: ${Styles.color.core.primary};
   transform: rotate(180deg);
 `;
 const RowInfo = styled.div `
@@ -20742,11 +20728,11 @@ const HeaderCell = styled.th `
     : "unset"};
   z-index: ${({ $isPinnedLeft, $isPinnedRight }) => $isPinnedLeft || $isPinnedRight ? 2 : 1};
   text-align: inherit;
-  padding: 8px 12px;
+  padding: 0px 12px;
   font-weight: 400;
   font-size: 14px;
   color: ${Styles.color.grey.charcoal};
-  border-bottom: 1px solid ${Styles.color.grey.medium};
+  border-bottom: 1px solid ${Styles.color.grey.light};
   background-color: ${Styles.color.grey.pale};
   transition: box-shadow 0.3s ease-out;
   & button {
@@ -20773,6 +20759,7 @@ const HeaderCellPosition = styled.div `
 `;
 const TableWrapper = styled.div `
   width: 100%;
+  position: relative;
   overflow-x: hidden;
   border: 1px solid ${Styles.color.grey.light};
   border-radius: 5px;
@@ -20781,7 +20768,7 @@ const TableWrapper = styled.div `
 `;
 const TableWrapperScroll = styled.div `
   width: 100%;
-  overflow-x: ${({ $filterMenuOpen }) => ($filterMenuOpen ? "hidden" : "auto")};
+  overflow-x: ${({ $stopScroll }) => ($stopScroll ? "hidden" : "auto")};
 `;
 const StyledTable = styled.table `
   width: 100%;
@@ -20820,6 +20807,11 @@ const HeaderRow = styled.tr `
 const CellRow = styled.tr `
   min-height: 50px;
   height: 50px;
+  &:hover {
+    & > td {
+      background-color: ${Styles.color.blue.pale};
+    }
+  }
 `;
 const FilterMenu = styled.div `
   position: absolute;
@@ -20860,10 +20852,10 @@ const BodyCell = styled.td `
     : "unset"};
   z-index: ${({ $isPinnedLeft, $isPinnedRight }) => $isPinnedLeft || $isPinnedRight ? 1 : 0};
   background: white;
-  padding: 8px 12px;
+  padding: 0px 12px;
   font-size: 12px;
   color: ${Styles.color.grey.charcoal};
-  border-bottom: ${({ $isLastRow }) => $isLastRow ? "none" : `1px solid ${Styles.color.grey.medium}`};
+  border-bottom: ${({ $isLastRow }) => $isLastRow ? "none" : `1px solid ${Styles.color.grey.light}`};
   transition: box-shadow 0.3s ease-out;
 `;
 const MenuButton = styled.button `
@@ -21011,12 +21003,57 @@ const LoadingShimmer = styled.div `
   }
 `;
 const CustomPagination = styled(Pagination) `
-  border-top: 1px solid ${Styles.color.grey.medium};
+  border-top: 1px solid ${Styles.color.grey.light};
 `;
 const KebabAlign = styled.div `
   display: flex;
   justify-content: end;
 `;
+// EmptyTableState
+const EmptyTableCell = styled.td `
+  padding: 10rem;
+  background-color: white;
+`;
+const EmptyTableSection = styled.section `
+  width: ${({ $size }) => ($size === "small" ? "360px" : "450px")};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  gap: 20px;
+  top: 50px;
+  left: 0;
+  right: 0;
+  margin: 80px auto 0;
+`;
+const EmptyTableHeader = styled.p `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Styles.color.grey.smoke};
+  font-size: 22px;
+  font-weight: 400;
+  text-align: center;
+  line-height: 22px;
+  margin-bottom: 0px;
+`;
+const EmptyTableSubHeader = styled.p `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Styles.color.grey.shadow};
+  font-size: 18px;
+  text-align: center;
+  font-weight: 400;
+  margin-top: 0px;
+`;
+const ClearFilterButtonRow = styled.div `
+  display: "flex";
+  justify-content: "center";
+  align-items: "center";
+  text-align: "center";
+`;
 
 const IndeterminateCheckbox = ({ isIndeterminate, isChecked, onChange, }) => {
     const ref = useRef(null);
@@ -21095,7 +21132,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
         a__default.createElement(HeaderCellPosition, { style: {
                 justifyContent: textAlign === "left" ? "start" : "end",
             } },
-            textAlign === "left" && (a__default.createElement("span", null, flexRender(columnDef.header, header.getContext()))),
+            textAlign === "left" && (a__default.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))),
             header.column.getCanFilter() && (a__default.createElement("div", { style: {
                     display: "flex",
                     alignItems: "center",
@@ -21157,7 +21194,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                 setCurrentAppliedFilters([]);
                             } }, "Clear Filter"))), document.body))),
             header.column.getCanSort() && (a__default.createElement(SortButton, { className: "icon", iconName: "sort", ariaLabel: "Sort Button", variant: "tertiary", "$active": sorting.some((s) => s.id === header.column.id), "$sort": column.getIsSorted(), onClick: (e) => header.column.getToggleSortingHandler()?.(e) })),
-            textAlign === "right" && (a__default.createElement("span", null, flexRender(columnDef.header, header.getContext()))))));
+            textAlign === "right" && (a__default.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))))));
 };
 
 const RowOptions = ({ row, selectionMenuItems }) => {
@@ -21202,12 +21239,21 @@ const RowOptions = ({ row, selectionMenuItems }) => {
             })), document.body)));
 };
 
+const EmptyTableState = ({ id, className, header, subHeader, showClearFilterButton, colSpan, size = "large", onClearFilters, }) => {
+    return (a__default.createElement("tr", null,
+        a__default.createElement(EmptyTableCell, { colSpan: colSpan },
+            a__default.createElement(EmptyTableSection, { "$size": size, id: id, className: className },
+                a__default.createElement(EmptyTableHeader, null, header),
+                a__default.createElement(EmptyTableSubHeader, null, subHeader),
+                a__default.createElement(ClearFilterButtonRow, null, showClearFilterButton && (a__default.createElement(StellaButton, { label: "Clear Filters", onClick: () => onClearFilters?.(), variant: "secondary" })))))));
+};
+
 // DataTable.tsx
 function Table({ columns, data, isLoading, serverSide = false, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection = false, showRowOptions = false, showPagination = true, variant, paginationDetails = {
     startingPage: 1,
     rowsPerPage: 10,
     totalRows: data.length,
-}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, }) {
+}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }) {
     const [rowSelection, setRowSelection] = useState({});
     const [selectedRows] = useState({});
     const [pageIndex, setPageIndex] = useState(paginationDetails?.startingPage);
@@ -21233,7 +21279,11 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     }, [rowStatuses]);
     useEffect(() => {
         setTotalData(paginationDetails?.totalRows);
-    }, [paginationDetails.totalRows, data]);
+        setPagination({
+            pageIndex: paginationDetails?.startingPage - 1,
+            pageSize: paginationDetails?.rowsPerPage || 10,
+        });
+    }, [paginationDetails, data]);
     useEffect(() => {
         const el = scrollRef?.current;
         if (!el)
@@ -21354,7 +21404,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
     };
     return (a__default.createElement(TableWrapper, { className: className, id: id, "data-testid": dataTestId, "data-auto": dataAuto },
-        a__default.createElement(TableWrapperScroll, { "$filterMenuOpen": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a__default.createElement("div", null,
+        a__default.createElement(TableWrapperScroll, { "$stopScroll": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a__default.createElement("div", null,
             a__default.createElement("div", { style: {
                     width: "100%",
                     maxWidth: "100%",
@@ -21389,39 +21439,45 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         }));
                     } }));
             }))))),
-            a__default.createElement("tbody", null, table.getRowModel().rows.map((row) => (a__default.createElement(CellRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-                const value = flexRender(cell.column.columnDef.cell, {
-                    ...cell.getContext(),
-                    localValue: rowState[row.id]?.[cell.column.id],
-                    onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
-                });
-                const meta = cell.column.columnDef.meta;
-                return (a__default.createElement(BodyCell, { key: cell.id, style: {
-                        width: cell.column.getSize(),
-                        textAlign: meta?.cellAlign ||
-                            (typeof cell.getValue() === "number" ||
-                                meta?.dataType === "number"
-                                ? "right"
-                                : "left"),
-                        boxShadow: scrollState.atLeft &&
-                            cell.column.getIsPinned() === "left"
-                            ? "none"
-                            : scrollState.atRight &&
-                                cell.column.getIsPinned() === "right"
+            a__default.createElement("tbody", null,
+                table.getRowModel().rows.length === 0 && (a__default.createElement(EmptyTableState, { header: emptyTableState.header, subHeader: emptyTableState.subHeader, showClearFilterButton: emptyTableState.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
+                table.getRowModel().rows.map((row) => (a__default.createElement(CellRow, { key: row.id }, row.getVisibleCells().map((cell) => {
+                    const value = flexRender(cell.column.columnDef.cell, {
+                        ...cell.getContext(),
+                        localValue: rowState[row.id]?.[cell.column.id],
+                        onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
+                    });
+                    const meta = cell.column.columnDef.meta;
+                    return (a__default.createElement(BodyCell, { key: cell.id, style: {
+                            width: cell.column.getSize(),
+                            textAlign: meta?.cellAlign ||
+                                (typeof cell.getValue() === "number" ||
+                                    meta?.dataType === "number"
+                                    ? "right"
+                                    : "left"),
+                            boxShadow: scrollState.atLeft &&
+                                cell.column.getIsPinned() === "left"
                                 ? "none"
-                                : undefined,
-                        backgroundColor: table
-                            .getSelectedRowModel()
-                            .rows.find((r) => r.id === row.id)
-                            ? "#EBF0FA"
-                            : rowStatusesState?.[row.id] === "action-pending"
-                                ? "#FFFDEB"
-                                : rowStatusesState?.[row.id] === "completed"
-                                    ? "#F5F5F5"
-                                    : "white",
-                    }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": row.index === table.getRowModel().rows.length - 1 }, value));
-            })))))))),
-        showPagination && paginationDetails?.totalRows && (a__default.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
+                                : scrollState.atRight &&
+                                    cell.column.getIsPinned() === "right"
+                                    ? "none"
+                                    : undefined,
+                            backgroundColor: table
+                                .getSelectedRowModel()
+                                .rows.find((r) => r.id === row.id)
+                                ? "#EBF0FA"
+                                : rowStatusesState?.[row.id] === "action-pending"
+                                    ? "#FFFDEB"
+                                    : rowStatusesState?.[row.id] === "completed"
+                                        ? "#F5F5F5"
+                                        : "",
+                        }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
+                            ? row.index === table.getRowModel().rows.length - 1
+                            : row.index -
+                                pagination.pageSize * pagination.pageIndex ===
+                                table.getRowModel().rows.length - 1 }, value));
+                })))))))),
+        showPagination && paginationDetails?.totalRows > 0 && (a__default.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                 setPageIndex(page);
                 setPagination((prev) => ({
                     ...prev,
@@ -21546,13 +21602,9 @@ const SubHeaderText = styled.span `
 const TableUnitsAndTotals = ({ id, className, value, subValue, variant, leftCategory = TableUnitsAndTotalsLeftCategory.US_CURRENCY, rightCategory, }) => {
     const isWeight = variant === QuoteVariants.TOTAL_WEIGHT;
     const leftCategoryValue = isWeight ? "" : leftCategory;
-    const header = (leftCategoryValue ?? "") +
-        formatNumberWithDecimals(value, 2, false) +
-        (rightCategory && isWeight ? ` ${rightCategory}` : "");
-    const subHeader = subValue !== undefined
-        ? (leftCategoryValue ?? "") +
-            formatNumberWithDecimals(subValue, 3, false) +
-            (rightCategory ? ` ${rightCategory}` : "")
+    const header = `${leftCategoryValue ?? ""}${value} ${rightCategory && isWeight ? ` ${rightCategory}` : ""}`;
+    const subHeader = subValue
+        ? `${leftCategoryValue ?? ""}${subValue} ${rightCategory ? ` ${rightCategory}` : ""}`
         : undefined;
     return (a__default.createElement(Container, { id: id, className: className },
         a__default.createElement(Column, { "$align": "right" },
@@ -21560,5 +21612,5 @@ const TableUnitsAndTotals = ({ id, className, value, subValue, variant, leftCate
             subHeader && a__default.createElement(SubHeaderText, null, subHeader))));
 };
 
-export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, TextInput, Tooltip };
+export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, QuoteCategory, QuoteVariants, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, TableUnitsAndTotalsLeftCategory, TextInput, Tooltip };
 //# sourceMappingURL=index.esm.js.map