@eml-payments/ui-kit 1.6.0 → 1.7.1

package/dist/src/components/DatePicker/DatePicker.js

@@ -8,31 +8,83 @@ import { Input } from '../Input';
 const formatDate = (date, format) => {
     return date ? dayjs(date).format(format) : '';
 };
-export const DatePicker = ({ placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYYY', currentDate, minDate, maxDate, error, onChangeDate, ...inputProps }) => {
-    const [date, setDate] = useState(currentDate);
-    const [value, setValue] = useState(formatDate(currentDate, dateFormat));
+const formatRangeDisplay = (dateRange, format) => {
+    if (!(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from)) {
+        return '';
+    }
+    const fromStr = dayjs(dateRange.from).format(format);
+    if (!dateRange.to) {
+        return fromStr;
+    }
+    const today = dayjs();
+    const toDate = dayjs(dateRange.to);
+    const toStr = toDate.isSame(today, 'day') ? 'Today' : toDate.format(format);
+    return `${fromStr} - ${toStr}`;
+};
+const normalizeRangeSelection = (currentRange, nextRange) => {
+    if (!(nextRange === null || nextRange === void 0 ? void 0 : nextRange.from)) {
+        return undefined;
+    }
+    const isSameDayRange = nextRange.from && nextRange.to && dayjs(nextRange.from).isSame(dayjs(nextRange.to), 'day');
+    const hasOpenRange = Boolean((currentRange === null || currentRange === void 0 ? void 0 : currentRange.from) && !(currentRange === null || currentRange === void 0 ? void 0 : currentRange.to));
+    // Ensure first click always starts a new range and does not auto-fill the end date.
+    if (isSameDayRange && !hasOpenRange) {
+        return { from: nextRange.from, to: undefined };
+    }
+    return nextRange;
+};
+export const DatePicker = ({ mode = 'single', placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYYY', rangeDateFormat, currentDate, minDate, maxDate, error, onChangeDate, ...inputProps }) => {
+    const isRangeMode = mode === 'range';
+    const effectiveRangeDateFormat = rangeDateFormat || dateFormat;
+    const computeDisplayValue = (date) => {
+        if (isRangeMode) {
+            return formatRangeDisplay(date, effectiveRangeDateFormat);
+        }
+        return formatDate(date, dateFormat);
+    };
+    const [date, setDate] = useState(() => currentDate);
+    const [value, setValue] = useState(() => computeDisplayValue(currentDate));
     const [defaultError, setDefaultError] = useState('');
     const [open, setOpen] = useState(false);
     const [prevCurrentDate, setPrevCurrentDate] = useState(currentDate);
     const [prevDateFormat, setPrevDateFormat] = useState(dateFormat);
-    if (currentDate !== prevCurrentDate || dateFormat !== prevDateFormat) {
+    const [prevRangeDateFormat, setPrevRangeDateFormat] = useState(effectiveRangeDateFormat);
+    const [prevMode, setPrevMode] = useState(mode);
+    if (currentDate !== prevCurrentDate ||
+        dateFormat !== prevDateFormat ||
+        effectiveRangeDateFormat !== prevRangeDateFormat ||
+        mode !== prevMode) {
         setPrevCurrentDate(currentDate);
         setPrevDateFormat(dateFormat);
+        setPrevRangeDateFormat(effectiveRangeDateFormat);
+        setPrevMode(mode);
         setDate(currentDate);
-        setValue(formatDate(currentDate, dateFormat));
+        setValue(computeDisplayValue(currentDate));
         setDefaultError('');
     }
-    const onUpdateDate = (selectedDate) => {
-        setDate(selectedDate);
-        onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(selectedDate);
+    const onUpdateDate = (selected) => {
+        setDate(selected);
+        onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(selected);
         setDefaultError('');
     };
-    const handleChangeDate = (selectedDate) => {
-        onUpdateDate(selectedDate);
-        setValue(formatDate(selectedDate, dateFormat));
+    const handleChangeRangeDate = (selected) => {
+        const normalizedRange = normalizeRangeSelection(date, selected);
+        onUpdateDate(normalizedRange);
+        setValue(formatRangeDisplay(normalizedRange, effectiveRangeDateFormat));
+        if ((normalizedRange === null || normalizedRange === void 0 ? void 0 : normalizedRange.from) && (normalizedRange === null || normalizedRange === void 0 ? void 0 : normalizedRange.to)) {
+            setOpen(false);
+        }
+    };
+    const handleChangeSingleDate = (selected) => {
+        onUpdateDate(selected);
+        setValue(formatDate(selected, dateFormat));
         setOpen(false);
     };
     const handleChangeInputValue = (e) => {
+        // In range mode, input is read-only and changes should be made via calendar
+        if (isRangeMode) {
+            return;
+        }
         setValue(e.target.value);
         if (e.target.value === '') {
             onUpdateDate(undefined);
@@ -53,5 +105,5 @@ export const DatePicker = ({ placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYY
             setDefaultError('Date is out of range');
         }
     };
-    return (_jsx("div", { className: "relative", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { children: _jsx(Input, { type: "text", value: value, placeholder: placeholder, error: error !== null && error !== void 0 ? error : defaultError, onChange: handleChangeInputValue, endAdornment: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors cursor-pointer flex items-center justify-center", "aria-label": "Open calendar", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) }) }), ...inputProps }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "center", sideOffset: 0, children: _jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeDate }) })] }) }));
+    return (_jsx("div", { className: "relative", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { children: _jsx(Input, { type: "text", value: value, placeholder: placeholder, error: error !== null && error !== void 0 ? error : defaultError, readOnly: isRangeMode, onChange: handleChangeInputValue, endAdornment: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors cursor-pointer flex items-center justify-center", "aria-label": "Open calendar", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) }) }), ...inputProps }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "center", sideOffset: 0, children: isRangeMode ? (_jsx(Calendar, { mode: "range", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeRangeDate, numberOfMonths: 2 })) : (_jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeSingleDate, numberOfMonths: 1 })) })] }) }));
 };

package/dist/src/components/DatePicker/DatePicker.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const WithLabel: Story;
 export declare const WithError: Story;
 export declare const WithDateRange: Story;
+export declare const RangeMode: Story;

package/dist/src/components/DatePicker/DatePicker.stories.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { DatePicker } from './DatePicker';
+const RangeModeExample = () => {
+    const [dateRange, setDateRange] = useState({
+        from: new Date(new Date().getFullYear(), 0, 20),
+        to: new Date(new Date().getFullYear(), 0, 27),
+    });
+    return (_jsx("div", { className: "space-y-4", children: _jsx(DatePicker, { mode: "range", label: "Select Date Range", rangeDateFormat: "D MMM YY", currentDate: dateRange, onChangeDate: (date) => setDateRange(date) }) }));
+};
 const meta = {
     title: 'UIKit/DatePicker',
     component: DatePicker,
@@ -12,9 +20,17 @@ const meta = {
         },
     },
     render: (args) => {
+        const convertCurrentDate = () => {
+            if (!args.currentDate)
+                return undefined;
+            if (typeof args.currentDate === 'string' || typeof args.currentDate === 'number') {
+                return new Date(args.currentDate);
+            }
+            return args.currentDate;
+        };
         const convertedArgs = {
             ...args,
-            currentDate: args.currentDate ? new Date(args.currentDate) : undefined,
+            currentDate: convertCurrentDate(),
             minDate: args.minDate ? new Date(args.minDate) : undefined,
             maxDate: args.maxDate ? new Date(args.maxDate) : undefined,
         };
@@ -34,6 +50,11 @@ const meta = {
             options: ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD', 'DD-MM-YYYY'],
             description: 'Format for displaying and parsing dates',
         },
+        rangeDateFormat: {
+            control: 'select',
+            options: ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD', 'DD-MM-YYYY', 'D MMM YY', 'MMMM D, YYYY'],
+            description: 'Format for displaying date ranges (defaults to dateFormat if not specified)',
+        },
         currentDate: {
             control: 'date',
             description: 'Initial date value',
@@ -104,3 +125,13 @@ export const WithDateRange = {
         },
     },
 };
+export const RangeMode = {
+    render: () => _jsx(RangeModeExample, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Date picker in range mode allowing selection of start and end dates. Shows two months for easier navigation.',
+            },
+        },
+    },
+};

package/dist/src/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import 'intl-tel-input/styles';
+import type { PhoneInputProps } from './PhoneInput.types';
+export declare const PhoneInput: React.FC<PhoneInputProps>;

package/dist/src/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import IntlTelInput from 'intl-tel-input/reactWithUtils';
+import 'intl-tel-input/styles';
+import { cn } from '../../lib/utils';
+export const PhoneInput = ({ label, error, helperText, disabled, initialValue, initOptions, inputProps, onChangeNumber, onChangeCountry, onChangeValidity, onChangeErrorCode, usePreciseValidation, }) => {
+    return (_jsxs("div", { className: cn('uikit-phone-input', { 'uikit-phone-input--error': error }), children: [label && _jsx("label", { className: "text-xs font-normal text-muted-foreground", children: label }), _jsx(IntlTelInput, { disabled: disabled, initialValue: initialValue, usePreciseValidation: usePreciseValidation, onChangeNumber: onChangeNumber, onChangeCountry: onChangeCountry, onChangeValidity: onChangeValidity, onChangeErrorCode: onChangeErrorCode, initOptions: {
+                    initialCountry: 'gb',
+                    countrySearch: true,
+                    fixDropdownWidth: false,
+                    ...initOptions,
+                }, inputProps: {
+                    ...inputProps,
+                    className: cn('!flex !h-10 !w-full !text-(--uikit-textSecondary) !rounded-(--uikit-radius) !border !border-(--uikit-inputEnabledBorder) !bg-background hover:!border-(--uikit-inputHoverBorder) !pr-3 !py-2 !text-base !ring-offset-background !placeholder:text-muted-foreground disabled:!cursor-not-allowed disabled:!opacity-50 md:!text-sm !transition focus-visible:!outline-none focus:!border-(--uikit-primary) focus:!ring-2 focus:!ring-(--uikit-primary)', { '!border-(--uikit-error)': error }, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
+                } }), error && _jsx("label", { className: "text-sm font-medium text-error", children: error }), !error && helperText && (_jsx("label", { className: "mt-1 block text-xs font-normal text-muted-foreground", children: helperText }))] }));
+};

package/dist/src/components/PhoneInput/PhoneInput.stories.d.ts

@@ -0,0 +1,15 @@
+import type { PhoneInputProps } from './PhoneInput.types';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<PhoneInputProps>;
+export default meta;
+type Story = StoryObj<PhoneInputProps>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithInitialValue: Story;
+export declare const ControlledInput: Story;
+export declare const WithError: Story;
+export declare const WithHelperText: Story;
+export declare const Disabled: Story;
+export declare const PreferredCountries: Story;
+export declare const SeparateDialCode: Story;
+export declare const DisabledDropdown: Story;

package/dist/src/components/PhoneInput/PhoneInput.stories.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PhoneInput } from './PhoneInput';
+const meta = {
+    title: 'UIKit/PhoneInput',
+    component: PhoneInput,
+    tags: ['autodocs'],
+    args: {
+        initOptions: {
+            initialCountry: 'gb',
+        },
+    },
+};
+export default meta;
+const Controlled = (args) => {
+    const [number, setNumber] = useState('');
+    const [isValid, setIsValid] = useState(false);
+    return (_jsxs("div", { children: [_jsx(PhoneInput, { ...args, onChangeNumber: setNumber, onChangeValidity: setIsValid }), _jsxs("p", { className: "mt-2 text-xs text-muted-foreground", children: ["Number: ", number || '(empty)', " | Valid: ", isValid ? 'Yes' : 'No'] })] }));
+};
+export const Default = {};
+export const WithLabel = {
+    args: { label: 'Phone input' },
+};
+export const WithInitialValue = {
+    args: { label: 'Phone input', initialValue: '+447911123456' },
+};
+export const ControlledInput = {
+    args: { label: 'Phone input' },
+    render: (args) => _jsx(Controlled, { ...args }),
+};
+export const WithError = {
+    args: { label: 'Phone input', error: 'Invalid phone number' },
+};
+export const WithHelperText = {
+    args: { label: 'Phone input', helperText: 'Include country code' },
+};
+export const Disabled = {
+    args: { label: 'Phone input', disabled: true, initialValue: '+447911123456' },
+};
+export const PreferredCountries = {
+    args: {
+        label: 'Phone input',
+        initOptions: {
+            initialCountry: 'gb',
+            countryOrder: ['gb', 'us', 'au', 'nz'],
+        },
+    },
+};
+export const SeparateDialCode = {
+    args: {
+        label: 'Phone input',
+        initOptions: {
+            initialCountry: 'gb',
+            separateDialCode: true,
+        },
+    },
+};
+export const DisabledDropdown = {
+    args: {
+        label: 'Phone input',
+        initOptions: {
+            initialCountry: 'gb',
+            allowDropdown: false,
+        },
+    },
+};

package/dist/src/components/PhoneInput/PhoneInput.types.d.ts

@@ -0,0 +1,14 @@
+export interface PhoneInputProps {
+    initialValue?: string;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    disabled?: boolean;
+    initOptions?: Record<string, unknown>;
+    inputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'onInput'>;
+    onChangeNumber?: (number: string) => void;
+    onChangeCountry?: (country: string) => void;
+    onChangeValidity?: (valid: boolean) => void;
+    onChangeErrorCode?: (errorCode: number | null) => void;
+    usePreciseValidation?: boolean;
+}

package/dist/src/components/PhoneInput/PhoneInput.types.js

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

package/dist/src/components/PhoneInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PhoneInput';
+export * from './PhoneInput.types';

package/dist/src/components/PhoneInput/index.js

@@ -0,0 +1,2 @@
+export * from './PhoneInput';
+export * from './PhoneInput.types';

package/dist/src/components/Table/StandardTable/StandardTable.js

@@ -45,5 +45,6 @@ export function StandardTable(props) {
                 tableActionsDropdown: props.tableActionsDropdown,
                 customNoRows: props.customNoRows,
                 accordion: enableAccordion,
+                showGroupedTotal: props.showGroupedTotal,
             }), footer: props.paginationMode === 'client' || props.paginationMode === 'server' ? (_jsx(PaginationFooter, { tableId: props.id, pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, totalRows: totalRows, canNextPage: pagination.canNextPage, canPrevPage: pagination.canPrevPage, onNextPage: pagination.onNextPage, onPrevPage: pagination.onPrevPage, onPageSizeChange: pagination.setPageSize })) : null }) }));
 }

package/dist/src/components/Table/StandardTable/StandardTable.stories.js

@@ -294,5 +294,5 @@ export const TwoTablesWithQueryParams = {
     render: () => _jsx(TwoTablesWithQueryParamsExample, {}),
 };
 export const GroupedAccordion = {
-    render: () => (_jsx(StandardTable, { id: "grouped-accordion", data: groupingData, columns: groupingColumns, showHeader: false, grouping: ['date'], enableAccordion: true, paginationMode: "client" })),
+    render: () => (_jsx(StandardTable, { id: "grouped-accordion", data: groupingData, columns: groupingColumns, showHeader: false, grouping: ['date'], enableAccordion: true, paginationMode: "client", showGroupedTotal: true })),
 };

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

@@ -62,11 +62,13 @@ type WithGrouping<T> = {
     /** When true, grouped rows can be collapsed/expanded */
     enableAccordion?: boolean;
     onGroupRowClick?: GroupRowClickHandler<T>;
+    showGroupedTotal?: boolean;
 };
 type WithoutGrouping = {
     grouping?: never;
     enableAccordion?: never;
     onGroupRowClick?: never;
+    showGroupedTotal?: never;
 };
 export type GroupingProps<T> = WithGrouping<T> | WithoutGrouping;
 export interface TableInputPropsBase<T> {

package/dist/src/components/Table/body/renderGroupRow.d.ts

@@ -12,6 +12,7 @@ interface RenderGroupRowProps<T> {
     isExpanded?: boolean;
     onToggle?: () => void;
     isFirstGroup?: boolean;
+    showGroupedTotal?: boolean;
 }
-export declare function renderGroupRow<T>({ row, onGroupRowClick, accordion, isExpanded, onToggle, isFirstGroup, }: RenderGroupRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function renderGroupRow<T>({ row, onGroupRowClick, accordion, isExpanded, onToggle, isFirstGroup, showGroupedTotal, }: RenderGroupRowProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/Table/body/renderGroupRow.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from '../../../utils';
 import { FaChevronDown, FaChevronRight } from 'react-icons/fa';
-export function renderGroupRow({ row, onGroupRowClick, accordion, isExpanded, onToggle, isFirstGroup, }) {
+export function renderGroupRow({ row, onGroupRowClick, accordion, isExpanded, onToggle, isFirstGroup, showGroupedTotal, }) {
     var _a, _b;
     const columnId = row.groupingColumnId;
     const groupValue = row.getGroupingValue(columnId);
@@ -50,5 +50,5 @@ export function renderGroupRow({ row, onGroupRowClick, accordion, isExpanded, on
                 rows: row.subRows.map((r) => r.original),
             });
         }, children: _jsx("td", { colSpan: row.getVisibleCells().length, className: classNames('p-0', !isFirstGroup && 'pt-3'), children: _jsxs("div", { "data-uikit-group-header": "true", className: classNames('uikit-group-header flex items-center justify-between gap-4 border-x border-t border-border bg-(--uikit-tertiary) px-4 py-3 text-sm text-foreground', isCollapsed ? 'rounded-(--uikit-radius) border-b' : 'rounded-t-(--uikit-radius)'), children: [_jsxs("span", { "data-uikit-group-value": "true", className: "uikit-group-value flex items-center gap-2", children: [accordion &&
-                                (isExpanded ? (_jsx(FaChevronDown, { className: "h-3 w-3 shrink-0 transition-transform duration-200" })) : (_jsx(FaChevronRight, { className: "h-3 w-3 shrink-0 transition-transform duration-200" }))), _jsx("span", { className: "font-semibold text-inherit", children: String(groupValue) })] }), formattedGroupedTotal !== null && (_jsx("span", { "data-uikit-group-total": "true", className: "uikit-group-total font-semibold text-inherit opacity-90", children: formattedGroupedTotal }))] }) }) }, row.id));
+                                (isExpanded ? (_jsx(FaChevronDown, { className: "h-3 w-3 shrink-0 transition-transform duration-200" })) : (_jsx(FaChevronRight, { className: "h-3 w-3 shrink-0 transition-transform duration-200" }))), _jsx("span", { className: "font-semibold text-inherit", children: String(groupValue) })] }), showGroupedTotal && formattedGroupedTotal !== null && (_jsx("span", { "data-uikit-group-total": "true", className: "uikit-group-total font-semibold text-inherit opacity-90", children: formattedGroupedTotal }))] }) }) }, row.id));
 }

package/dist/src/components/Table/body/renderTableBody.d.ts

@@ -20,8 +20,9 @@ interface RenderTableBodyProps<T extends {
         messageClassName?: string;
     };
     accordion?: boolean;
+    showGroupedTotal?: boolean;
 }
 export declare function renderTableBody<T extends {
     id: string;
-}>({ table, state, colSpan, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, customNoRows, accordion, }: RenderTableBodyProps<T>): React.ReactNode;
+}>({ table, state, colSpan, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, customNoRows, accordion, showGroupedTotal, }: RenderTableBodyProps<T>): React.ReactNode;
 export {};

package/dist/src/components/Table/body/renderTableBody.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { renderTableRows } from '../render-rows/renderTableRows';
-export function renderTableBody({ table, state, colSpan, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, customNoRows, accordion, }) {
+export function renderTableBody({ table, state, colSpan, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, customNoRows, accordion, showGroupedTotal, }) {
     var _a;
     switch (state.type) {
         case 'loading':
@@ -12,6 +12,7 @@ export function renderTableBody({ table, state, colSpan, onRowClick, isRowClicka
                 rows: state.rows,
                 hasActions: Boolean((_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.hasActions),
                 accordion,
+                showGroupedTotal,
                 onRowClick,
                 isRowClickable,
                 onGroupRowClick,

package/dist/src/components/Table/render-rows/renderTableRows.d.ts

@@ -14,8 +14,9 @@ interface RenderTableRowsProps<T extends {
     }) => void;
     tableActionsDropdown?: ITableActionsDropdownProps<T>;
     accordion?: boolean;
+    showGroupedTotal?: boolean;
 }
 export declare function renderTableRows<T extends {
     id: string;
-}>({ rows, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, hasActions, accordion, }: RenderTableRowsProps<T>): React.ReactNode[];
+}>({ rows, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, hasActions, accordion, showGroupedTotal, }: RenderTableRowsProps<T>): React.ReactNode[];
 export {};

package/dist/src/components/Table/render-rows/renderTableRows.js

@@ -1,6 +1,6 @@
 import { renderGroupRow } from '../body/renderGroupRow';
 import { renderLeafRow } from '../body/renderLeafRow';
-export function renderTableRows({ rows, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, hasActions, accordion, }) {
+export function renderTableRows({ rows, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, hasActions, accordion, showGroupedTotal, }) {
     var _a;
     const result = [];
     const firstGroupId = (_a = rows.find((r) => r.getIsGrouped())) === null || _a === void 0 ? void 0 : _a.id;
@@ -14,6 +14,7 @@ export function renderTableRows({ rows, onRowClick, isRowClickable, onGroupRowCl
                 onToggle: accordion ? row.getToggleExpandedHandler() : undefined,
                 onGroupRowClick,
                 isFirstGroup: row.id === firstGroupId,
+                showGroupedTotal,
             }));
             continue;
         }

package/dist/src/components/Tooltip/Tooltip.stories.js

@@ -12,7 +12,7 @@ export const Default = {
     render: () => (_jsx(TooltipStoryWrapper, { content: "Simple tooltip", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const LongTextResponsive = {
-    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
+    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\r\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\r\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const OnDifferentSides = {
     render: () => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TooltipStoryWrapper, { content: "Top tooltip", side: "top", children: _jsx(Button, { children: "Top" }) }), _jsx(TooltipStoryWrapper, { content: "Bottom tooltip", side: "bottom", children: _jsx(Button, { children: "Bottom" }) }), _jsx(TooltipStoryWrapper, { content: "Left tooltip", side: "left", children: _jsx(Button, { children: "Left" }) }), _jsx(TooltipStoryWrapper, { content: "Right tooltip", side: "right", children: _jsx(Button, { children: "Right" }) })] })),

package/dist/src/components/index.d.ts

@@ -34,3 +34,5 @@ export * from './Calendar';
 export * from './Textarea';
 export * from './Combobox';
 export * from './InputGroup';
+export * from './PhoneInput';
+export * from './ButtonGroup';

package/dist/src/components/index.js

@@ -34,3 +34,5 @@ export * from './Calendar';
 export * from './Textarea';
 export * from './Combobox';
 export * from './InputGroup';
+export * from './PhoneInput';
+export * from './ButtonGroup';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.6.0",
+	"version": "1.7.1",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -69,6 +69,7 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.19",
+		"intl-tel-input": "^26.9.1",
 		"lucide-react": "^0.577.0",
 		"prettier": "^3.6.2",
 		"react": ">=18.0.0",