@stella-source/stellasource-dsl 5.1.0 → 5.2.0

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

@@ -5,6 +5,7 @@ interface HeaderIconButtonProps {
 }
 interface PaginationProps {
     $hasData?: boolean;
+    $isEmpty: boolean;
 }
 declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$isPinnedLeft" | "$isPinnedRight" | "$columnInfo" | "$filterMenuOpen"> & {
     $isPinnedLeft?: boolean;
@@ -33,7 +34,11 @@ declare const SortButton: import("styled-components/dist/types").IStyledComponen
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, keyof HeaderIconButtonProps> & HeaderIconButtonProps, never>>> & string;
-declare const HeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>> & string;
+declare const HeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$isEmpty"> & {
+    $isEmpty: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$isEmpty"> & {
+    $isEmpty: boolean;
+}, never>>> & string;
 declare const CellRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$isClickable"> & {
     $isClickable: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$isClickable"> & {
@@ -69,7 +74,7 @@ declare const LoadingShimmer: import("styled-components/dist/types").IStyledComp
     $width?: string;
     $height?: string;
 }, never>>> & string;
-declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, "$hasData"> & PaginationProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, "$hasData"> & 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 CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, keyof PaginationProps> & PaginationProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, keyof PaginationProps> & 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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare const EmptyTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>>> & string;
 declare const EmptyTableSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "$size"> & {

package/dist/cjs/types/components/TextField/NumberInput/NumberInput.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { NumberInputProps } from "./types";
-declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, allowNegativeNumbers, ariaDescribedBy, enableAutocomplete, isDegrees, }: NumberInputProps) => React.JSX.Element;
+declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, allowNegativeNumbers, ariaDescribedBy, enableAutocomplete, isDegrees, labelPosition, }: NumberInputProps) => React.JSX.Element;
 export default NumberInput;

package/dist/cjs/types/components/TextField/NumberInput/types.d.ts

@@ -33,4 +33,5 @@ export interface NumberInputProps {
     /** for any extra text elements that need to be associated */
     ariaDescribedBy?: string;
     htmlProps?: HTMLAttributes<HTMLInputElement>;
+    labelPosition?: "top" | "left";
 }

package/dist/cjs/types/components/TextField/PasswordInput/PasswordInput.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { PasswordInputProps } from "./types";
-declare const PasswordInput: ({ id, className, htmlProps, label, placeholder, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign, isHidden, helperTextAffectLayout, hideLabel, disabled, hasError, ariaDescribedBy, enableAutocomplete, }: PasswordInputProps) => React.JSX.Element;
+declare const PasswordInput: ({ id, className, htmlProps, label, placeholder, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign, isHidden, helperTextAffectLayout, hideLabel, disabled, hasError, ariaDescribedBy, enableAutocomplete, labelPosition, }: PasswordInputProps) => React.JSX.Element;
 export default PasswordInput;

package/dist/cjs/types/components/TextField/PasswordInput/types.d.ts

@@ -24,4 +24,5 @@ export interface PasswordInputProps {
     /** for any extra text elements that need to be associated */
     ariaDescribedBy?: string;
     htmlProps?: HTMLAttributes<HTMLInputElement>;
+    labelPosition?: "top" | "left";
 }

package/dist/cjs/types/components/TextField/TextFieldContainer.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TextFieldContainerProps } from "./types";
-declare const TextFieldContainer: ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout, disabled, hideLabel, isLoading, hasError, isRequired, }: TextFieldContainerProps) => React.JSX.Element;
+declare const TextFieldContainer: ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout, disabled, hideLabel, isLoading, hasError, isRequired, labelPosition, }: TextFieldContainerProps) => React.JSX.Element;
 export default TextFieldContainer;

package/dist/cjs/types/components/TextField/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TextInputProps } from "./types";
-declare const TextInput: ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, helperTextAffectLayout, hideLabel, disabled, hasError, isLoading, ariaDescribedBy, enableAutocomplete, }: TextInputProps) => React.JSX.Element;
+declare const TextInput: ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, helperTextAffectLayout, hideLabel, disabled, hasError, isLoading, ariaDescribedBy, enableAutocomplete, labelPosition, }: TextInputProps) => React.JSX.Element;
 export default TextInput;

package/dist/cjs/types/components/TextField/TextInput/types.d.ts

@@ -26,4 +26,5 @@ export interface TextInputProps {
     /** for any extra text elements that need to be associated */
     ariaDescribedBy?: string;
     htmlProps?: HTMLAttributes<HTMLInputElement>;
+    labelPosition?: "top" | "left";
 }

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

@@ -4,14 +4,20 @@ interface TextFieldInputProps {
     $isDisabled?: boolean;
     $isLoading?: boolean;
 }
+interface WrapperProps {
+    $labelPosition?: "top" | "left";
+}
 interface TextFieldWrapperProps {
     $isDisabled?: boolean;
     $hasError?: boolean;
     $isLoading?: boolean;
+    $labelPosition?: "top" | "left";
 }
-declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$labelPosition"> & WrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$labelPosition"> & WrapperProps, never>>> & string;
+declare const InputColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const LabelAligner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare const TextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof TextFieldWrapperProps> & TextFieldWrapperProps, "className"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof TextFieldWrapperProps> & TextFieldWrapperProps, "className">>> & string;
 declare const TextFieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof TextFieldInputProps> & TextFieldInputProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof TextFieldInputProps> & TextFieldInputProps, never>>> & string;
 declare const Category: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export { Wrapper, TextFieldWrapper, TextFieldInput, Category, IconContainer };
+export { Wrapper, InputColumn, LabelAligner, TextFieldWrapper, TextFieldInput, Category, IconContainer, };

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

@@ -21,4 +21,5 @@ export interface TextFieldContainerProps {
     endIcon?: `${StellaIconDefinition}`;
     hasError?: boolean;
     className?: string;
+    labelPosition?: "top" | "left";
 }

package/dist/esm/index.esm.js

@@ -18157,12 +18157,24 @@ const IconButton = forwardRef(({ iconName, onClick, disabled, variant = "primary
 
 const Wrapper = styled.div `
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ $labelPosition }) => $labelPosition === "left" ? "row" : "column"};
+  align-items: ${({ $labelPosition }) => $labelPosition === "left" ? "flex-start" : "stretch"};
+  gap: ${({ $labelPosition }) => ($labelPosition === "left" ? "10px" : "0")};
   min-width: 60px;
   max-width: 400px;
   position: relative;
   width: 100%;
 `;
+const InputColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+const LabelAligner = styled.div `
+  height: 32px;
+  display: flex;
+  align-items: center;
+`;
 const TextFieldWrapper = styled.div.attrs({
     className: "DSL-stella-textfield",
 }) `
@@ -18174,7 +18186,7 @@ const TextFieldWrapper = styled.div.attrs({
   border: 1px solid ${Styles.color.grey.medium};
   border-radius: 6px;
   overflow: hidden;
-  margin-top: 3px;
+  margin-top: ${({ $labelPosition }) => $labelPosition === "left" ? "0" : "3px"};
   background-color: ${({ $isDisabled }) => $isDisabled ? Styles.color.grey.pale : "white"};
   outline: ${({ $hasError }) => $hasError && `${Styles.color.states.error} auto 1px`};
   cursor: ${({ $isDisabled, $isLoading }) => {
@@ -18233,10 +18245,9 @@ const IconContainer = styled.div `
   margin-right: 5px;
 `;
 
-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 },
-        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" },
+const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, labelPosition = "top", }) => {
+    const inputAndHelper = (a__default.createElement(a__default.Fragment, null,
+        a__default.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "$labelPosition": labelPosition, "data-testid": "text-input-wrapper" },
             leftCategory && a__default.createElement(Category, null, leftCategory),
             children,
             isLoading && (a__default.createElement(IconContainer, null,
@@ -18245,9 +18256,13 @@ const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, classNa
                 a__default.createElement(StellaIcon, { dataTestId: "end-icon", iconName: endIcon }))),
             rightCategory && a__default.createElement(Category, null, rightCategory)),
         helperText && (a__default.createElement(HelperText, { id: `${id}-helper-text`, text: helperText, affectLayout: helperTextAffectLayout, type: hasError ? "error" : "info" }))));
+    return (a__default.createElement(Wrapper, { "data-testid": dataTestId, className: className, "$labelPosition": labelPosition },
+        labelPosition === "left" ? (a__default.createElement(LabelAligner, null,
+            a__default.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }))) : (a__default.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` })),
+        labelPosition === "left" ? (a__default.createElement(InputColumn, null, inputAndHelper)) : (inputAndHelper)));
 };
 
-const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18263,6 +18278,7 @@ const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus,
         endIcon,
         disabled,
         isLoading,
+        labelPosition,
     };
     const [inputValue, setInputValue] = useState("");
     const valueToUse = value ?? inputValue;
@@ -18279,7 +18295,7 @@ const CustomIconButton$2 = styled(IconButton) `
   margin-right: 2px;
 `;
 
-const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18293,6 +18309,7 @@ const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter P
         leftCategory: undefined,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = useState("");
     const [show, setShow] = useState(!isHidden);
@@ -18331,7 +18348,7 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces, isDegrees) => {
         : "";
 };
 
-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, enableAutocomplete = false, isDegrees = false, }) => {
+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, enableAutocomplete = false, isDegrees = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18347,6 +18364,7 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         leftCategory,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = useState("");
     const [placeholderText, setPlaceholderText] = useState(placeholder);
@@ -22095,6 +22113,7 @@ const HeaderRow = styled.tr `
   background-color: ${Styles.color.grey.pale};
   min-height: 50px;
   height: 50px;
+  display: ${({ $isEmpty }) => ($isEmpty ? "none" : "table-row")};
 `;
 const CellRow = styled.tr `
   min-height: 50px;
@@ -22308,6 +22327,7 @@ const LoadingShimmer = styled.div `
 `;
 const CustomPagination = styled(Pagination) `
   border-top: ${({ $hasData }) => $hasData ? "0px" : `1px solid ${Styles.color.grey.light}`};
+  display: ${({ $isEmpty }) => ($isEmpty ? "none" : "flex")};
 `;
 const KebabAlign = styled.div `
   display: flex;
@@ -22324,12 +22344,8 @@ const EmptyTableSection = styled.section `
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  position: absolute;
   gap: 20px;
-  top: 50px;
-  left: 0;
-  right: 0;
-  margin: 80px auto 0;
+  margin: 0 auto;
 `;
 const EmptyTableHeader = styled.p `
   display: flex;
@@ -22981,7 +22997,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                     }, key: index + "loading-row" }, Array.from({
                     length: 10,
                 }).map((_, i) => (a__default.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a__default.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
-                a__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a__default.createElement(HeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header, i) => {
+                a__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a__default.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getRowModel().rows.length === 0 }, headerGroup.headers.map((header, i) => {
                     return (a__default.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
                             setFilterMenuOpen((prev) => ({
                                 ...prev,
@@ -23047,7 +23063,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                             renderExpandedRow &&
                             !!renderExpandedRow(row) && (a__default.createElement(ExpandedContentRow, null,
                             a__default.createElement(ExpandedContentCell, { colSpan: table.getVisibleLeafColumns().length }, renderExpandedRow(row))))))))))),
-            showPagination && paginationDetails?.totalRows > 0 && (a__default.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
+            showPagination && paginationDetails?.totalRows > 0 && (a__default.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, "$isEmpty": table.getRowModel().rows.length === 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                     table.toggleAllRowsSelected(false);
                     setPageIndex(page);
                     setPagination((prev) => ({