draft-components 0.61.2 → 0.63.2

package/components/calendar/calendar-day.d.ts

@@ -5,6 +5,7 @@ export interface CalendarDayProps {
     isCurrent?: boolean;
     isFocusable?: boolean;
     isSelected?: boolean;
+    isDisabled?: boolean;
     isInRange?: boolean;
     isRangeStart?: boolean;
     isRangeEnd?: boolean;
@@ -15,4 +16,4 @@ export interface CalendarDayProps {
     onPick(day: PlainDate): void;
     onHover?(day: PlainDate): void;
 }
-export declare function CalendarDay({ className, isCurrent, isFocusable, isSelected, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, date, onPick, onHover, }: CalendarDayProps): JSX.Element;
+export declare function CalendarDay({ className, isCurrent, isFocusable, isSelected, isDisabled, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, date, onPick, onHover, }: CalendarDayProps): JSX.Element;

package/components/calendar/calendar-day.js

@@ -4,7 +4,7 @@ exports.CalendarDay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const guards_1 = require("../../lib/guards");
 const react_helpers_1 = require("../../lib/react-helpers");
-function CalendarDay({ className, isCurrent, isFocusable, isSelected, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, date, onPick, onHover, }) {
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_helpers_1.classNames)(className, 'dc-calendar-day', isCurrent && 'dc-calendar-day_current', isSelected && 'dc-calendar-day_selected', isInRange && 'dc-calendar-day_in-range', isRangeStart && 'dc-calendar-day_range-start', isRangeEnd && 'dc-calendar-day_range-end', isInRangePreview && 'dc-calendar-day_in-range-preview', isRangePreviewStart && 'dc-calendar-day_range-preview-start', isRangePreviewEnd && 'dc-calendar-day_range-preview-end'), role: "gridcell" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "dc-calendar-day__btn", tabIndex: isFocusable ? 0 : -1, "aria-selected": isSelected, onClick: () => onPick(date), onMouseEnter: () => (0, guards_1.isFunction)(onHover) && onHover(date) }, { children: date.day }), void 0) }), void 0));
+function CalendarDay({ className, isCurrent, isFocusable, isSelected, isDisabled, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, date, onPick, onHover, }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_helpers_1.classNames)(className, 'dc-calendar-day', isCurrent && 'dc-calendar-day_current', isSelected && 'dc-calendar-day_selected', isDisabled && 'dc-calendar-day_disabled', isInRange && 'dc-calendar-day_in-range', isRangeStart && 'dc-calendar-day_range-start', isRangeEnd && 'dc-calendar-day_range-end', isInRangePreview && 'dc-calendar-day_in-range-preview', isRangePreviewStart && 'dc-calendar-day_range-preview-start', isRangePreviewEnd && 'dc-calendar-day_range-preview-end'), role: "gridcell" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "dc-calendar-day__btn", tabIndex: isFocusable ? 0 : -1, "aria-selected": isSelected, disabled: isDisabled, onClick: () => onPick(date), onMouseEnter: () => (0, guards_1.isFunction)(onHover) && onHover(date) }, { children: date.day }), void 0) }), void 0));
 }
 exports.CalendarDay = CalendarDay;

package/components/calendar/calendar.d.ts

@@ -7,8 +7,10 @@ export interface CalendarProps {
     nextMonthButtonLabel?: string;
     prevYearButtonLabel?: string;
     prevMonthButtonLabel?: string;
-    children: ReactNode[];
+    minDate?: PlainDate | null;
+    maxDate?: PlainDate | null;
     focusDate: PlainDate;
+    children: ReactNode[];
     onChangeFocusDate(focusDate: PlainDate): void;
 }
-export declare function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, children, focusDate, onChangeFocusDate, }: CalendarProps): JSX.Element;
+export declare function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, minDate, maxDate, focusDate, children, onChangeFocusDate, }: CalendarProps): JSX.Element;

package/components/calendar/calendar.js

@@ -17,7 +17,7 @@ const daysOfWeek = [
     new Date('2021-01-09'),
     new Date('2021-01-10'), // Sunday
 ];
-function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, children, focusDate, onChangeFocusDate, }) {
+function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, minDate, maxDate, focusDate, children, onChangeFocusDate, }) {
     const isFocused = (0, react_1.useRef)(false);
     const gridRef = (0, react_1.useRef)(null);
     const headerId = (0, react_1.useRef)('');
@@ -71,7 +71,11 @@ function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel
                     }
                     if (newFocusDate) {
                         event.preventDefault();
-                        onChangeFocusDate(newFocusDate);
+                        const isNewFocusDateDisabled = (minDate != null && newFocusDate.isBefore(minDate)) ||
+                            (maxDate != null && newFocusDate.isAfter(maxDate));
+                        if (!isNewFocusDateDisabled) {
+                            onChangeFocusDate(newFocusDate);
+                        }
                     }
                 } }, { children: children }), void 0)] }), void 0));
 }

package/components/date-picker/date-picker.d.ts

@@ -7,7 +7,9 @@ export interface DatePickerProps {
     prevYearButtonLabel?: string;
     prevMonthButtonLabel?: string;
     footer?: ReactNode;
+    min?: ISODate;
+    max?: ISODate;
     value: ISODate | null;
     onChangeValue(isoDate: ISODate): void;
 }
-export declare function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, value, onChangeValue, }: DatePickerProps): JSX.Element;
+export declare function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, min, max, value, onChangeValue, }: DatePickerProps): JSX.Element;

package/components/date-picker/date-picker.js

@@ -7,9 +7,11 @@ const plain_date_1 = require("../../lib/plain-date");
 const calendar_1 = require("../calendar/calendar");
 const calendar_row_1 = require("../calendar/calendar-row");
 const calendar_day_1 = require("../calendar/calendar-day");
-function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, value, onChangeValue, }) {
+function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, min, max, value, onChangeValue, }) {
     const selectedDate = value ? plain_date_1.PlainDate.fromISODate(value) : null;
     const currentDate = plain_date_1.PlainDate.now();
+    const minDate = min ? plain_date_1.PlainDate.fromISODate(min) : null;
+    const maxDate = max ? plain_date_1.PlainDate.fromISODate(max) : null;
     const [focusDate, setFocusDate] = (0, react_1.useState)(selectedDate ? selectedDate : currentDate.startOfMonth);
     const firstDate = focusDate.startOfMonth;
     const lastDate = focusDate.endOfMonth;
@@ -35,7 +37,8 @@ function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYea
             d = 0;
         }
         for (; d < plain_date_1.PlainDate.DAYS_IN_WEEK; d += 1) {
-            renderedDays.push((0, jsx_runtime_1.jsx)(calendar_day_1.CalendarDay, { date: date, isCurrent: date.equals(currentDate), isFocusable: date.equals(focusDate), isSelected: selectedDate ? date.equals(selectedDate) : false, onPick: handleDayPick }, `day-${date.toISOString()}`));
+            renderedDays.push((0, jsx_runtime_1.jsx)(calendar_day_1.CalendarDay, { date: date, isCurrent: date.equals(currentDate), isFocusable: date.equals(focusDate), isSelected: selectedDate ? date.equals(selectedDate) : false, isDisabled: (minDate != null && date.isBefore(minDate)) ||
+                    (maxDate != null && date.isAfter(maxDate)), onPick: handleDayPick }, `day-${date.toISOString()}`));
             date = date.addDays(1);
         }
         renderedWeeks.push((0, jsx_runtime_1.jsx)(calendar_row_1.CalendarRow, { children: renderedDays }, `week-${w}`));
@@ -47,6 +50,6 @@ function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYea
                 : focusDate);
         }
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-date-picker" }, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, focusDate: focusDate, onChangeFocusDate: setFocusDate }, { children: renderedWeeks }), void 0), footer && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-date-range-picker__footer" }, { children: footer }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-date-picker" }, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, minDate: minDate, maxDate: maxDate, focusDate: focusDate, onChangeFocusDate: setFocusDate }, { children: renderedWeeks }), void 0), footer && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-date-range-picker__footer" }, { children: footer }), void 0)] }), void 0));
 }
 exports.DatePicker = DatePicker;

package/components/date-picker-popover/date-picker-popover.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ISODate } from '../../lib/plain-date';
+export declare type DatePickerPopoverProps = {
+    defaultIsOpen?: boolean;
+    locale?: string;
+    footer?: ReactNode;
+    min?: ISODate;
+    max?: ISODate;
+    value: ISODate | null;
+    onChangeValue(value: ISODate): void;
+    children(props: {
+        isOpen: boolean;
+        openPopover(): void;
+        closePopover(): void;
+        togglePopover(): void;
+    }): JSX.Element;
+};
+export declare function DatePickerPopover({ defaultIsOpen, locale, footer, min, max, value, onChangeValue, children, }: DatePickerPopoverProps): JSX.Element;

package/components/date-picker-popover/date-picker-popover.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerPopover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const popover_1 = require("../popover");
+const date_picker_1 = require("../date-picker");
+function DatePickerPopover({ defaultIsOpen = false, locale, footer, min, max, value, onChangeValue, children, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultIsOpen);
+    function openPopover() {
+        setIsOpen(true);
+    }
+    function closePopover() {
+        setIsOpen(false);
+    }
+    function togglePopover() {
+        if (isOpen) {
+            closePopover();
+        }
+        else {
+            openPopover();
+        }
+    }
+    function handleChangeValue(value) {
+        onChangeValue(value);
+        closePopover();
+    }
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, Object.assign({ isShown: isOpen, onClose: closePopover, content: (0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { locale: locale, footer: footer, min: min, max: max, value: value, onChangeValue: handleChangeValue }, void 0) }, { children: children({
+            isOpen,
+            openPopover,
+            closePopover,
+            togglePopover,
+        }) }), void 0));
+}
+exports.DatePickerPopover = DatePickerPopover;

package/components/date-picker-popover/index.d.ts

@@ -0,0 +1 @@
+export * from './date-picker-popover';

package/components/date-picker-popover/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./date-picker-popover"), exports);

package/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './button';
 export * from './buttons-group';
 export * from './checkbox';
 export * from './date-picker';
+export * from './date-picker-popover';
 export * from './date-preset-picker-popover';
 export * from './date-range-picker';
 export * from './datetime-input';

package/components/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./button"), exports);
 __exportStar(require("./buttons-group"), exports);
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./date-picker"), exports);
+__exportStar(require("./date-picker-popover"), exports);
 __exportStar(require("./date-preset-picker-popover"), exports);
 __exportStar(require("./date-range-picker"), exports);
 __exportStar(require("./datetime-input"), exports);

package/components/slider/slider.d.ts

@@ -1,11 +1,12 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export interface SliderProps extends ComponentPropsWithoutRef<'input'> {
+    thumb?: 'round' | 'rect';
+    numberOfTickMarks?: number;
+    step?: number;
     min?: number;
     max?: number;
-    step?: number;
-    thumbStyle?: 'round' | 'rect';
-    tickMarksCount?: number;
     value: number;
+    renderTickMarkLabel?(at: number): ReactNode;
     onChangeValue(value: number): void;
 }
-export declare function Slider({ style, className, disabled, readOnly, min, max, step, thumbStyle, tickMarksCount, value, onChangeValue, ...props }: SliderProps): JSX.Element;
+export declare function Slider({ style, className, disabled, readOnly, thumb, numberOfTickMarks, step, min, max, value, renderTickMarkLabel, onChangeValue, ...props }: SliderProps): JSX.Element;

package/components/slider/slider.js

@@ -3,14 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const guards_1 = require("../../lib/guards");
 const react_helpers_1 = require("../../lib/react-helpers");
-function Slider({ style, className, disabled, readOnly, min = 0, max = 100, step = 1, thumbStyle = 'round', tickMarksCount, value, onChangeValue, ...props }) {
-    const handleChange = (0, react_1.useCallback)((event) => {
-        onChangeValue(Number(event.target.value));
-    }, [onChangeValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: (0, react_helpers_1.classNames)(className, 'dc-slider', {
-            'dc-slider_readOnly': readOnly,
-            'dc-slider_disabled': disabled,
-        }) }, { children: [tickMarksCount && tickMarksCount > 2 ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-slider__tick_marks" }, { children: Array.from({ length: tickMarksCount }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", {}, index))) }), void 0)) : ((0, jsx_runtime_1.jsx)("div", { style: { width: `${((value - min) / (max - min)) * 100}%` }, className: "dc-slider__fill-track" }, void 0)), (0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { className: (0, react_helpers_1.classNames)('dc-slider__input', thumbStyle && `dc-slider__input_thumb_style_${thumbStyle}`), type: "range", min: min, max: max, step: step, disabled: disabled || readOnly, value: value, onChange: handleChange }), void 0)] }), void 0));
+const util_1 = require("../../lib/util");
+function Slider({ style, className, disabled, readOnly, thumb = 'round', numberOfTickMarks = 0, step = 1, min = 0, max = 100, value = 0, renderTickMarkLabel, onChangeValue, ...props }) {
+    var _a;
+    const id = (0, react_1.useRef)(props.id);
+    if (!id.current) {
+        id.current = (0, util_1.uniqueId)('slider_');
+    }
+    const handleChange = (0, react_1.useCallback)((event) => onChangeValue(Number(event.target.value)), [onChangeValue]);
+    const valuePercent = `${((value - min) / (max - min)) * 100}%`;
+    const background = `linear-gradient(
+    to right,
+    var(--dc-slider-fill-track-bg) 0%,
+    var(--dc-slider-fill-track-bg) ${valuePercent},
+    var(--dc-slider-track-bg) ${valuePercent},
+    var(--dc-slider-track-bg) ${valuePercent}
+  )`;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: (0, react_helpers_1.classNames)('dc-slider', thumb && `dc-slider_thumb_${thumb}`, disabled && 'dc-slider_disabled', className) }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { id: (_a = id.current) !== null && _a !== void 0 ? _a : (0, util_1.uniqueId)('slider_'), style: { background }, className: "dc-slider__input", type: "range", min: min, max: max, step: step, value: value, disabled: disabled, readOnly: readOnly, onChange: handleChange }), void 0), (0, jsx_runtime_1.jsx)(SliderTickMarks, { numberOfTickMarks: numberOfTickMarks, renderTickMarkLabel: renderTickMarkLabel }, void 0)] }), void 0));
 }
 exports.Slider = Slider;
+function SliderTickMarks(props) {
+    const { numberOfTickMarks, renderTickMarkLabel } = props;
+    const withLabel = (0, guards_1.isFunction)(renderTickMarkLabel);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-slider__tick-marks" }, { children: Array.from({ length: numberOfTickMarks }).map((_, index) => {
+            const label = withLabel && renderTickMarkLabel(index);
+            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-slider-tick-mark" }, { children: label && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "dc-slider-tick-mark__label" }, { children: label }), void 0)) }), index));
+        }) }), void 0));
+}

package/components/table/table-cell.d.ts

@@ -1,3 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-export declare type TableCellProps = ComponentPropsWithoutRef<'td'>;
-export declare function TableCell({ className, align, children, ...props }: TableCellProps): JSX.Element;
+export declare type TableCellProps = ComponentPropsWithoutRef<'td'> & {
+    isLoading?: boolean;
+};
+export declare function TableCell({ className, isLoading, align, children, ...props }: TableCellProps): JSX.Element;

package/components/table/table-cell.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_helpers_1 = require("../../lib/react-helpers");
-function TableCell({ className, align = 'left', children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("td", Object.assign({}, props, { align: align, className: (0, react_helpers_1.classNames)(className, 'dc-table-cell') }, { children: children }), void 0));
+function TableCell({ className, isLoading = false, align = 'left', children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("td", Object.assign({}, props, { align: align, className: (0, react_helpers_1.classNames)('dc-table-cell', isLoading && 'dc-table-cell_loading', className) }, { children: children }), void 0));
 }
 exports.TableCell = TableCell;

package/components/table/table-header-cell.js

@@ -10,6 +10,6 @@ const ariaSortValues = {
     desc: 'descending',
 };
 function TableHeaderCell({ isSortable, order = 'none', renderSortButtonLabel, onChangeOrder, className, role = 'columnheader', align = 'left', children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("th", Object.assign({ "aria-sort": isSortable ? ariaSortValues[order] : undefined }, props, { className: (0, react_helpers_1.classNames)(className, 'dc-table-cell', 'dc-table-cell_header'), role: role, align: align }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-table-cell__body" }, { children: [isSortable && ((0, jsx_runtime_1.jsx)(table_sort_button_1.TableSortButton, { className: "dc-table-cell__sort-btn", column: children, order: order, onSort: onChangeOrder, renderLabel: renderSortButtonLabel }, void 0)), children] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("th", Object.assign({ "aria-sort": isSortable ? ariaSortValues[order] : undefined }, props, { className: (0, react_helpers_1.classNames)(className, 'dc-table-cell', 'dc-table-cell_header'), role: role, align: align }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-table-cell__body" }, { children: [children, isSortable && ((0, jsx_runtime_1.jsx)(table_sort_button_1.TableSortButton, { className: "dc-table-cell__sort-btn", column: children, order: order, onSort: onChangeOrder, renderLabel: renderSortButtonLabel }, void 0))] }), void 0) }), void 0));
 }
 exports.TableHeaderCell = TableHeaderCell;

package/components/table/table-sort-button.js

@@ -19,15 +19,15 @@ const orderIcons = {
         viewBox: '0 0 16 16',
         children: ((0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M4.7065 8.96458H11.6935C12.3217 8.96458 12.6359 9.74529 12.1926 10.2005L8.69907 13.7875C8.42311 14.0708 7.97689 14.0708 7.70386 13.7875L4.20743 10.2005C3.76414 9.74529 4.07826 8.96458 4.7065 8.96458ZM12.1926 5.79955L8.69907 2.21251C8.42311 1.92916 7.97689 1.92916 7.70386 2.21251L4.20743 5.79955C3.76414 6.25471 4.07826 7.03542 4.7065 7.03542H11.6935C12.3217 7.03542 12.6359 6.25471 12.1926 5.79955Z" }, void 0)),
     },
-    desc: {
-        name: 'sort-down',
+    asc: {
+        name: 'sort-asc',
         width: 16,
         height: 16,
         viewBox: '0 0 16 16',
         children: ((0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12.1599 5H3.84116C3.09317 5 2.71918 5.93026 3.24697 6.47261L7.40634 10.7468C7.7349 11.0844 8.26618 11.0844 8.59124 10.7468L12.7506 6.47261C13.2819 5.93026 12.9079 5 12.1599 5Z" }, void 0)),
     },
-    asc: {
-        name: 'sort-up',
+    desc: {
+        name: 'sort-desc',
         width: 16,
         height: 16,
         viewBox: '0 0 16 16',