@stella-source/stellasource-dsl 0.2.3 → 0.2.7

package/dist/cjs/index.js

@@ -3434,7 +3434,7 @@ var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
  * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
  * exposing only those methods and properties that are defined in the spec.
  */
-var ResizeObserver$1 = /** @class */ (function () {
+var ResizeObserver$2 = /** @class */ (function () {
     /**
      * Creates a new instance of ResizeObserver.
      *
@@ -3460,7 +3460,7 @@ var ResizeObserver$1 = /** @class */ (function () {
     'unobserve',
     'disconnect'
 ].forEach(function (method) {
-    ResizeObserver$1.prototype[method] = function () {
+    ResizeObserver$2.prototype[method] = function () {
         var _a;
         return (_a = observers.get(this))[method].apply(_a, arguments);
     };
@@ -3471,7 +3471,7 @@ var index = (function () {
     if (typeof global$1.ResizeObserver !== 'undefined') {
         return global$1.ResizeObserver;
     }
-    return ResizeObserver$1;
+    return ResizeObserver$2;
 })();
 
 // =============================== Const ===============================
@@ -3711,7 +3711,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 var INTERNAL_PREFIX_KEY = 'rc-observer-key';
-function ResizeObserver(props, ref) {
+function ResizeObserver$1(props, ref) {
   var children = props.children;
   var childNodes = typeof children === 'function' ? [children] : toArray$2(children);
   if (process.env.NODE_ENV !== 'production') {
@@ -3729,7 +3729,7 @@ function ResizeObserver(props, ref) {
     }), child);
   });
 }
-var RefResizeObserver = /*#__PURE__*/a__namespace.forwardRef(ResizeObserver);
+var RefResizeObserver = /*#__PURE__*/a__namespace.forwardRef(ResizeObserver$1);
 if (process.env.NODE_ENV !== 'production') {
   RefResizeObserver.displayName = 'ResizeObserver';
 }
@@ -16799,7 +16799,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 {
@@ -16833,7 +16832,6 @@ const variantSelector = (variant) => {
         }
 
         &:disabled {
-          background-color: var(--DSL-button-st-background-disabled);
           color: var(--DSL-button-disabled);
           & svg {
             fill: var(--DSL-button-disabled);
@@ -16873,6 +16871,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};
@@ -17037,7 +17036,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$j.createElement(Wrapper, { "data-testId": dataTestId, className: className },
+    return (a$j.createElement(Wrapper, { "data-testid": dataTestId, className: className },
         a$j.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }),
         a$j.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "data-testid": "text-input-wrapper" },
             leftCategory && a$j.createElement(Category, null, leftCategory),
@@ -17127,19 +17126,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 = {
@@ -20643,8 +20629,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 `
@@ -20762,11 +20748,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 {
@@ -20793,6 +20779,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;
@@ -20801,7 +20788,8 @@ const TableWrapper = styled.div `
 `;
 const TableWrapperScroll = styled.div `
   width: 100%;
-  overflow-x: ${({ $filterMenuOpen }) => ($filterMenuOpen ? "hidden" : "auto")};
+  overflow-x: ${({ $stopScroll }) => ($stopScroll ? "hidden" : "auto")};
+  overflow-y: hidden;
 `;
 const StyledTable = styled.table `
   width: 100%;
@@ -20840,6 +20828,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;
@@ -20880,10 +20873,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 `
@@ -21031,12 +21024,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 = a$j.useRef(null);
@@ -21058,7 +21096,11 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     const [coords, setCoords] = a$j.useState({ top: 0, left: 0 });
     const [tempFilters, setTempFilters] = a$j.useState([]);
     const [currentAppliedFilters, setCurrentAppliedFilters] = a$j.useState([]);
+    const [filterOptions, setFilterOptions] = a$j.useState([]);
     const [textAlign, setTextAlign] = a$j.useState("left");
+    a$j.useEffect(() => {
+        setFilterOptions(meta?.filterOptions || []);
+    }, [meta]);
     const toggleMenu = (e) => {
         e.stopPropagation();
         if (buttonRef.current) {
@@ -21083,7 +21125,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
             const insideButton = !!buttonRef.current?.contains(target);
             const insideMenu = !!menuRef.current?.contains(target);
             if (!insideButton && !insideMenu) {
-                setTempFilters(currentAppliedFilters);
+                setTempFilters(filters?.[header.id] || currentAppliedFilters);
                 showFilterMenu(false);
             }
         };
@@ -21115,7 +21157,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
         a$j.createElement(HeaderCellPosition, { style: {
                 justifyContent: textAlign === "left" ? "start" : "end",
             } },
-            textAlign === "left" && (a$j.createElement("span", null, flexRender(columnDef.header, header.getContext()))),
+            textAlign === "left" && (a$j.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))),
             header.column.getCanFilter() && (a$j.createElement("div", { style: {
                     display: "flex",
                     alignItems: "center",
@@ -21142,7 +21184,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                     } }),
                                 a$j.createElement(FilterBoxLabel, { htmlFor: "all-checkbox" }, "Select All"))),
                             (serverSide
-                                ? meta?.filterOptions
+                                ? filterOptions
                                 : Array.from(header.column.getFacetedUniqueValues().keys()))?.map((item) => {
                                 if (meta?.singleSelect) {
                                     return (a$j.createElement(MenuItemOption, { key: item, id: `${item}-button`, onClick: () => {
@@ -21177,7 +21219,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                 setCurrentAppliedFilters([]);
                             } }, "Clear Filter"))), document.body))),
             header.column.getCanSort() && (a$j.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$j.createElement("span", null, flexRender(columnDef.header, header.getContext()))))));
+            textAlign === "right" && (a$j.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))))));
 };
 
 const RowOptions = ({ row, selectionMenuItems }) => {
@@ -21222,12 +21264,21 @@ const RowOptions = ({ row, selectionMenuItems }) => {
             })), document.body)));
 };
 
+const EmptyTableState = ({ id, className, header, subHeader, showClearFilterButton, colSpan, size = "large", onClearFilters, }) => {
+    return (a$j.createElement("tr", null,
+        a$j.createElement(EmptyTableCell, { colSpan: colSpan },
+            a$j.createElement(EmptyTableSection, { "$size": size, id: id, className: className },
+                a$j.createElement(EmptyTableHeader, null, header),
+                a$j.createElement(EmptyTableSubHeader, null, subHeader),
+                a$j.createElement(ClearFilterButtonRow, null, showClearFilterButton && (a$j.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] = a$j.useState({});
     const [selectedRows] = a$j.useState({});
     const [pageIndex, setPageIndex] = a$j.useState(paginationDetails?.startingPage);
@@ -21235,6 +21286,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         pageIndex: paginationDetails?.startingPage - 1,
         pageSize: paginationDetails?.rowsPerPage || 10,
     });
+    const [localData, setLocalData] = a$j.useState(data);
+    const [localColumns, setLocalColumns] = a$j.useState(columns);
     const [totalData, setTotalData] = a$j.useState(paginationDetails?.totalRows);
     const [sorting, setSorting] = a$j.useState([]);
     const [filters, setFilters] = a$j.useState({});
@@ -21253,20 +21306,51 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     }, [rowStatuses]);
     a$j.useEffect(() => {
         setTotalData(paginationDetails?.totalRows);
-    }, [paginationDetails.totalRows, data]);
-    a$j.useEffect(() => {
-        const el = scrollRef?.current;
+        setPagination({
+            pageIndex: paginationDetails?.startingPage - 1,
+            pageSize: paginationDetails?.rowsPerPage || 10,
+        });
+        setLocalColumns(columns);
+        setLocalData(data);
+    }, [paginationDetails, data, columns]);
+    a$j.useLayoutEffect(() => {
+        const el = scrollRef.current;
         if (!el)
             return;
-        const handleScroll = () => {
-            const atLeft = el.scrollLeft <= 0;
-            const atRight = el.scrollWidth - el.scrollLeft <= el.clientWidth + 1;
+        let raf = 0;
+        const update = () => {
+            const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
+            const hasOverflow = maxScrollLeft > 1; // tolerance for rounding
+            let atLeft = el.scrollLeft <= 0;
+            let atRight = el.scrollLeft >= maxScrollLeft - 1;
+            if (!hasOverflow) {
+                atLeft = true;
+                atRight = true;
+            }
             setScrollState({ atLeft, atRight });
         };
-        el.addEventListener("scroll", handleScroll);
-        handleScroll(); // initial check
-        return () => el.removeEventListener("scroll", handleScroll);
-    }, [scrollRef]);
+        const schedule = () => {
+            cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(update);
+        };
+        // Listen to scroll
+        el.addEventListener("scroll", schedule);
+        // Recalculate when sizes change
+        const ro = new ResizeObserver(schedule);
+        ro.observe(el);
+        const tableEl = el.querySelector("table");
+        if (tableEl)
+            ro.observe(tableEl);
+        window.addEventListener("resize", schedule);
+        // Initial measurement after layout
+        schedule();
+        return () => {
+            el.removeEventListener("scroll", schedule);
+            window.removeEventListener("resize", schedule);
+            ro.disconnect();
+            cancelAnimationFrame(raf);
+        };
+    }, []);
     const handleInputChange = (rowId, field, value) => {
         setRowState((prev) => ({
             ...prev,
@@ -21287,7 +21371,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                 size: 20,
             });
         }
-        cols.push(...columns);
+        cols.push(...localColumns);
         if (showRowOptions) {
             cols.push({
                 id: "options",
@@ -21299,9 +21383,16 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             });
         }
         return cols;
-    }, [columns, selectedRows, data, onRowSelect, showSelection, showRowOptions]);
+    }, [
+        localColumns,
+        selectedRows,
+        localData,
+        onRowSelect,
+        showSelection,
+        showRowOptions,
+    ]);
     const table = useReactTable({
-        data,
+        data: localData,
         columns: enhancedColumns,
         state: {
             pagination,
@@ -21374,7 +21465,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
     };
     return (a$j.createElement(TableWrapper, { className: className, id: id, "data-testid": dataTestId, "data-auto": dataAuto },
-        a$j.createElement(TableWrapperScroll, { "$filterMenuOpen": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a$j.createElement("div", null,
+        a$j.createElement(TableWrapperScroll, { "$stopScroll": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a$j.createElement("div", null,
             a$j.createElement("div", { style: {
                     width: "100%",
                     maxWidth: "100%",
@@ -21409,39 +21500,45 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         }));
                     } }));
             }))))),
-            a$j.createElement("tbody", null, table.getRowModel().rows.map((row) => (a$j.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$j.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$j.createElement("tbody", null,
+                table.getRowModel().rows.length === 0 && (a$j.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$j.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$j.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$j.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$j.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                 setPageIndex(page);
                 setPagination((prev) => ({
                     ...prev,
@@ -21566,13 +21663,9 @@ const SubHeaderText = styled.span `
 const TableUnitsAndTotals = ({ id, className, value, subValue, variant, leftCategory = exports.TableUnitsAndTotalsLeftCategory.US_CURRENCY, rightCategory, }) => {
     const isWeight = variant === exports.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$j.createElement(Container, { id: id, className: className },
         a$j.createElement(Column, { "$align": "right" },