@conveyorhq/arrow-ds 2.0.0-beta.6 → 2.0.0-beta.7

package/public/components/Snackbar/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SNACKBAR_POSITION = exports.DEFAULT_SNACKBAR_ID = void 0;
+exports.DEFAULT_SNACKBAR_ID = 0;
+exports.DEFAULT_SNACKBAR_POSITION = "bottom-left";

package/public/components/Snackbar/context.d.ts

@@ -0,0 +1,4 @@
+import { Context } from "react";
+import { SnackbarContextProps } from "./types";
+export declare const SnackbarContext: Context<SnackbarContextProps>;
+export declare function useSnackbarContext(): SnackbarContextProps;

package/public/components/Snackbar/context.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbarContext = exports.SnackbarContext = void 0;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const defaultContext = {
+    id: constants_1.DEFAULT_SNACKBAR_ID,
+    onClose: () => { },
+};
+exports.SnackbarContext = react_1.createContext(defaultContext);
+function useSnackbarContext() {
+    const context = react_1.useContext(exports.SnackbarContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useSnackbarContext = useSnackbarContext;

package/public/components/Snackbar/helpers.d.ts

@@ -0,0 +1,3 @@
+import { HideSnackbarProps, ShowSnackbarProps } from "./types";
+export declare const hideSnackbar: ({ id, position, }: HideSnackbarProps) => void;
+export declare const showSnackbar: ({ component, message, duration, position, ...rest }: ShowSnackbarProps) => any;

package/public/components/Snackbar/helpers.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showSnackbar = exports.hideSnackbar = void 0;
+const react_1 = __importDefault(require("react"));
+const toasted_notes_1 = __importDefault(require("toasted-notes"));
+const constants_1 = require("./constants");
+const Snackbar_1 = require("./Snackbar");
+const SnackbarProvider_1 = require("./SnackbarProvider");
+const hideSnackbar = ({ id, position = constants_1.DEFAULT_SNACKBAR_POSITION, }) => toasted_notes_1.default.close(id, position);
+exports.hideSnackbar = hideSnackbar;
+const showSnackbar = ({ component, message, duration = null, position = constants_1.DEFAULT_SNACKBAR_POSITION, ...rest }) => {
+    return toasted_notes_1.default.notify(({ onClose, id }) => {
+        return (react_1.default.createElement(SnackbarProvider_1.SnackbarProvider, Object.assign({}, {
+            id,
+            onClose,
+            duration,
+            position,
+            component: message ? (react_1.default.createElement(Snackbar_1.Snackbar, Object.assign({}, {
+                message,
+                ...rest,
+            }))) : (component),
+        })));
+    }, {
+        position,
+        duration,
+    });
+};
+exports.showSnackbar = showSnackbar;

package/public/components/Snackbar/hooks.d.ts

@@ -0,0 +1,2 @@
+import { SnackbarHookProps } from "./types";
+export declare const useSnackbar: ({ component, message, position, duration, isVisible, ...rest }: SnackbarHookProps) => void;

package/public/components/Snackbar/hooks.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = void 0;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const helpers_1 = require("./helpers");
+const useSnackbar = ({ component, message, position, duration, isVisible, ...rest }) => {
+    const [snackbar, setSnackbar] = react_1.useState({
+        id: constants_1.DEFAULT_SNACKBAR_ID,
+        position: constants_1.DEFAULT_SNACKBAR_POSITION,
+    });
+    const [wasViewed, setWasViewed] = react_1.useState(false);
+    react_1.useEffect(() => {
+        if (isVisible && !wasViewed) {
+            if (message) {
+                setSnackbar(helpers_1.showSnackbar({
+                    message,
+                    position,
+                    duration,
+                    ...rest,
+                }));
+            }
+            else {
+                setSnackbar(helpers_1.showSnackbar({
+                    component,
+                    position,
+                    duration,
+                }));
+            }
+            setWasViewed(true);
+        }
+        if (!isVisible && wasViewed) {
+            helpers_1.hideSnackbar({ id: snackbar.id, position });
+            setWasViewed(false);
+        }
+    }, [
+        component,
+        message,
+        position,
+        duration,
+        isVisible,
+        snackbar.id,
+        wasViewed,
+        rest,
+    ]);
+};
+exports.useSnackbar = useSnackbar;

package/public/components/Snackbar/index.d.ts

@@ -1 +1,7 @@
+export * from "./constants";
+export * from "./context";
+export * from "./helpers";
+export * from "./hooks";
 export * from "./Snackbar";
+export * from "./SnackbarProvider";
+export * from "./types";

package/public/components/Snackbar/index.js

@@ -10,4 +10,10 @@ 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("./constants"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./hooks"), exports);
 __exportStar(require("./Snackbar"), exports);
+__exportStar(require("./SnackbarProvider"), exports);
+__exportStar(require("./types"), exports);

package/public/components/Snackbar/types.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Action, RequiredToasterProps, ToasterPositionOptions } from "../../types";
+import { BoxProps } from "../Box";
+import { IconType } from "../Icon";
+export declare type SnackbarToasterProps = RequiredToasterProps;
+declare type SnackbarPosition = Extract<ToasterPositionOptions, "bottom-left" | "bottom-right">;
+declare type SnackbarSharedProps = {
+    position?: SnackbarPosition;
+    duration?: number | null;
+};
+declare type SnackbarWithComponentProps = {
+    component: React.ReactNode;
+    message?: never;
+};
+declare type SnackbarWithMessageProps = {
+    message: React.ReactNode;
+    component?: never;
+};
+declare type SnackbarIsVisibleProp = {
+    isVisible: boolean;
+};
+declare type SnackbarOtherProps = {
+    action?: Action;
+    icon?: IconType;
+    disableClose?: boolean;
+};
+export declare type SnackbarProps = Omit<SnackbarWithMessageProps, "component"> & SnackbarOtherProps & SnackbarSharedProps & BoxProps;
+export declare type SnackbarRootProps = BoxProps;
+export declare type SnackbarIconProps = Pick<SnackbarOtherProps, "icon">;
+export declare type SnackbarTextProps = {
+    children: React.ReactNode;
+};
+export declare type SnackbarStateProps = Pick<SnackbarToasterProps, "id"> & Pick<SnackbarSharedProps, "position">;
+export declare type SnackbarContextProps = SnackbarToasterProps & SnackbarSharedProps;
+export declare type SnackbarProviderProps = SnackbarToasterProps & SnackbarSharedProps & Omit<SnackbarWithComponentProps, "message">;
+declare type ShowSnackbarWithMessageProps = SnackbarWithMessageProps & SnackbarOtherProps & SnackbarSharedProps & BoxProps;
+declare type ShowSnackbarWithComponentProps = SnackbarWithComponentProps & SnackbarSharedProps;
+export declare type ShowSnackbarProps = ShowSnackbarWithMessageProps | ShowSnackbarWithComponentProps;
+export declare type HideSnackbarProps = SnackbarStateProps;
+declare type SnackbarWithMessageHookProps = SnackbarWithMessageProps & SnackbarOtherProps & SnackbarSharedProps & SnackbarIsVisibleProp & BoxProps;
+declare type SnackbarWithComponentHookProps = SnackbarWithComponentProps & SnackbarSharedProps & SnackbarIsVisibleProp;
+export declare type SnackbarHookProps = SnackbarWithMessageHookProps | SnackbarWithComponentHookProps;
+export {};

package/public/components/Snackbar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/public/components/SpeechBubble/SpeechBubble.d.ts

@@ -2,5 +2,6 @@ import { BoxProps } from "../Box";
 export declare type SpeechBubblePlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end";
 export interface SpeechBubbleProps extends BoxProps {
     "data-placement"?: SpeechBubblePlacement;
+    placement?: SpeechBubblePlacement;
 }
 export declare const SpeechBubble: (props: SpeechBubbleProps) => JSX.Element;

package/public/components/SpeechBubble/SpeechBubble.js

@@ -10,7 +10,14 @@ const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
 const cn = "SpeechBubble";
 const SpeechBubble = (props) => {
-    const { "data-placement": dataPlacement = "top-start", className, ...rest } = props;
-    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className), "data-placement": dataPlacement }, rest)));
+    const { "data-placement": dataPlacement = "top-start", placement, className, ...rest } = props;
+    const ref = react_1.default.useRef(null);
+    react_1.default.useLayoutEffect(() => {
+        if (ref.current) {
+            const style = window.getComputedStyle(ref.current);
+            ref.current.style.setProperty("--ads-speech-bubble-bg", style.backgroundColor);
+        }
+    }, [ref]);
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ ref: ref, className: classnames_1.default(bem_1.bem(cn), className), "data-placement": placement || dataPlacement }, rest)));
 };
 exports.SpeechBubble = SpeechBubble;

package/public/components/Table/Table.d.ts

@@ -12,13 +12,16 @@ interface TableProps extends React.HTMLProps<HTMLTableElement> {
     enableHorizontalScroll?: boolean;
     stickyColumn?: boolean;
     hasBatchActions?: boolean;
+    spaceRows?: boolean;
+    enableGridSizing?: boolean;
+    gridSizing?: string | string[];
 }
 declare const Table: {
-    ({ children, className, onSort, outerBorder, sortColumnId, sortDirection, affixHeader, removeSpacerColumn, noResults, renderInModal, enableHorizontalScroll, stickyColumn, hasBatchActions, ...rest }: TableProps): JSX.Element;
+    ({ children, className, onSort, outerBorder, sortColumnId, sortDirection, affixHeader, removeSpacerColumn, noResults, renderInModal, enableHorizontalScroll, stickyColumn, hasBatchActions, spaceRows, style, enableGridSizing, gridSizing, ...rest }: TableProps): JSX.Element;
     Body: ({ className, children, ...rest }: React.HTMLProps<HTMLTableSectionElement>) => JSX.Element;
     Row: ({ className, children, selected, ...rest }: import("./TableRow").TableRowProps) => JSX.Element;
     Cell: React.FunctionComponent<import("./TableCell").TableCellProps>;
     Head: ({ className, ...rest }: React.HTMLProps<HTMLTableSectionElement>) => JSX.Element;
-    HeaderCell: ({ children, className, id, shrinkToContent, sortable, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch, filterApplied, searchInputValue, onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding, filterControl, style, ...rest }: import("./TableHeaderCell").TableHeaderCellProps) => JSX.Element;
+    HeaderCell: ({ children, className, id, shrinkToContent, sortable, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch, filterApplied, searchInputValue, onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding, filterControl, align, style, ...rest }: import("./TableHeaderCell").TableHeaderCellProps) => JSX.Element;
 };
 export { Table, SORT_DIRECTION };

package/public/components/Table/Table.js

@@ -35,9 +35,9 @@ Object.defineProperty(exports, "SORT_DIRECTION", { enumerable: true, get: functi
 const bem_1 = require("../../utilities/bem");
 const cn = "Table";
 const wrapperCn = "TableWrapper";
-const Table = ({ children, className, onSort = () => { }, outerBorder = false, sortColumnId, sortDirection, affixHeader = false, removeSpacerColumn = false, noResults = false, renderInModal = false, enableHorizontalScroll = false, stickyColumn = false, hasBatchActions = false, ...rest }) => {
-    const wrapperClasses = classnames_1.default(bem_1.bem(wrapperCn), enableHorizontalScroll && bem_1.bem(wrapperCn, { m: "enable-hscroll" }));
-    const classes = classnames_1.default(bem_1.bem(cn), removeSpacerColumn && bem_1.bem(cn, { m: "remove-spacer" }), outerBorder && bem_1.bem(cn, { m: "outer-border" }), affixHeader && bem_1.bem(cn, { m: "affix-header" }), noResults && bem_1.bem(cn, { m: "no-results" }), stickyColumn && bem_1.bem(cn, { m: "sticky-column" }), hasBatchActions && bem_1.bem(cn, { m: "batch-actions" }), className);
+const Table = ({ children, className, onSort = () => { }, outerBorder = false, sortColumnId, sortDirection, affixHeader = false, removeSpacerColumn = false, noResults = false, renderInModal = false, enableHorizontalScroll = false, stickyColumn = false, hasBatchActions = false, spaceRows = false, style, enableGridSizing = false, gridSizing, ...rest }) => {
+    const wrapperClasses = classnames_1.default(bem_1.bem(wrapperCn), enableHorizontalScroll && bem_1.bem(wrapperCn, { m: "enable-hscroll" }), spaceRows && bem_1.bem(wrapperCn, { m: "space-rows" }));
+    const classes = classnames_1.default(bem_1.bem(cn), removeSpacerColumn && bem_1.bem(cn, { m: "remove-spacer" }), outerBorder && bem_1.bem(cn, { m: "outer-border" }), affixHeader && bem_1.bem(cn, { m: "affix-header" }), noResults && bem_1.bem(cn, { m: "no-results" }), stickyColumn && bem_1.bem(cn, { m: "sticky-column" }), hasBatchActions && bem_1.bem(cn, { m: "batch-actions" }), spaceRows && bem_1.bem(cn, { m: "space-rows" }), enableGridSizing && gridSizing && bem_1.bem(cn, { m: "grid-sizing" }), className);
     return (react_1.default.createElement(TableContext_1.default.Provider, { value: {
             handleSort: onSort,
             sortDirection,
@@ -49,7 +49,14 @@ const Table = ({ children, className, onSort = () => { }, outerBorder = false, s
             hasBatchActions,
         } },
         react_1.default.createElement("div", { className: wrapperClasses },
-            react_1.default.createElement("table", Object.assign({ className: classes }, rest), children))));
+            react_1.default.createElement("table", Object.assign({ className: classes, style: enableGridSizing && gridSizing
+                    ? {
+                        gridTemplateColumns: Array.isArray(gridSizing)
+                            ? gridSizing.join(" ")
+                            : gridSizing,
+                        ...style,
+                    }
+                    : style }, rest), children))));
 };
 exports.Table = Table;
 Table.Body = TableBody_1.default;

package/public/components/Table/TableCell.d.ts

@@ -3,6 +3,7 @@ export interface TableCellProps extends HTMLProps<HTMLTableCellElement> {
     removePadding?: boolean;
     isLoading?: boolean;
     columnWidth?: string;
+    align?: "left" | "center" | "right";
     ref?: any;
 }
 declare const TableCell: FunctionComponent<TableCellProps>;

package/public/components/Table/TableCell.js

@@ -25,13 +25,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
+const Flex_1 = require("../Flex");
 const Skeleton_1 = require("../Skeleton");
 const cn = "TableCell";
-const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoading = false, children, columnWidth, style, ...rest }, ref) => {
+const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoading = false, children, columnWidth, align = "left", style, ...rest }, ref) => {
     const computedStyle = { ...style };
     if (columnWidth) {
         computedStyle.width = columnWidth;
     }
-    return (react_1.default.createElement("td", Object.assign({ style: computedStyle, className: classnames_1.default(bem_1.bem(cn), removePadding && bem_1.bem(cn, { m: "removePadding" }), className), ref: ref }, rest), isLoading ? react_1.default.createElement(Skeleton_1.Skeleton, null) : children));
+    return (react_1.default.createElement("td", Object.assign({ style: computedStyle, className: classnames_1.default(bem_1.bem(cn), removePadding && bem_1.bem(cn, { m: "removePadding" }), align && `text-${align}`, className), ref: ref }, rest), isLoading ? (react_1.default.createElement(Flex_1.Flex, { className: "h-full items-center", "data-testid": "loading-cell-skeleton" },
+        react_1.default.createElement(Skeleton_1.Skeleton, { className: "w-full" }))) : (children)));
 });
 exports.default = TableCell;

package/public/components/Table/TableHeaderCell.d.ts

@@ -18,6 +18,7 @@ export interface TableHeaderCellProps extends React.HTMLProps<HTMLTableHeaderCel
     sortable?: boolean;
     filterOptions?: ReactElement<FilterProps>[];
     filterControl?: ReactElement;
+    align?: "left" | "center" | "right";
 }
-declare const TableHeaderCell: ({ children, className, id, shrinkToContent, sortable, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch, filterApplied, searchInputValue, onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding, filterControl, style, ...rest }: TableHeaderCellProps) => JSX.Element;
+declare const TableHeaderCell: ({ children, className, id, shrinkToContent, sortable, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch, filterApplied, searchInputValue, onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding, filterControl, align, style, ...rest }: TableHeaderCellProps) => JSX.Element;
 export default TableHeaderCell;

package/public/components/Table/TableHeaderCell.js

@@ -31,9 +31,21 @@ const bem_1 = require("../../utilities/bem");
 const Icon_1 = require("../Icon");
 const isUndefined_1 = __importDefault(require("../../utilities/isUndefined"));
 const cn = "TableHeaderCell";
-const TableHeaderCell = ({ children, className, id, shrinkToContent = false, sortable = true, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch = false, filterApplied = false, searchInputValue = "", onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding = false, filterControl, style, ...rest }) => {
+const SortIcon = ({ icon, isActive = false, }) => (react_1.default.createElement(Box_1.Box, { as: "span", className: "flex relative" },
+    react_1.default.createElement(Icon_1.Icon, { icon: icon, className: classnames_1.default(bem_1.bem(cn, { e: "sortIcon" }), {
+            isActive,
+        }) }),
+    isActive && (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default("absolute top-0 left-0", bem_1.bem(cn, { e: "sortIcon" }), {
+            isActive: false,
+        }), icon: Icon_1.ICON_TYPE.SORT }))));
+const TableHeaderCell = ({ children, className, id, shrinkToContent = false, sortable = true, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch = false, filterApplied = false, searchInputValue = "", onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding = false, filterControl, align = "left", style, ...rest }) => {
     const [filterDropDownOpen, setFilterDropdownOpen] = react_1.useState(false);
     const filterOptions = filterOptionsProp;
+    const justification = {
+        left: "start",
+        center: "center",
+        right: "end",
+    };
     return (react_1.default.createElement(TableContext_1.default.Consumer, null, ({ handleSort, sortColumnId, sortDirection, renderInModal }) => {
         const classes = classnames_1.default(bem_1.bem(cn), shrinkToContent && bem_1.bem(cn, { m: "shrinkToContent" }), removeVerticalPadding && bem_1.bem(cn, { m: "removeVerticalPadding" }), className);
         const handleSortClick = () => {
@@ -73,15 +85,20 @@ const TableHeaderCell = ({ children, className, id, shrinkToContent = false, sor
         if (minColumnWidth) {
             computedStyle.minWidth = minColumnWidth;
         }
-        return (react_1.default.createElement("th", Object.assign({ className: classes, style: computedStyle }, rest),
-            react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "InnerWrapper" }) },
+        return (react_1.default.createElement("th", Object.assign({ className: classnames_1.default(classes, sortActive && "bg-gray-400", sortable && "cursor-pointer"), style: computedStyle, onClick: () => {
+                if (sortable && !filterOptions) {
+                    handleSortClick();
+                }
+            } }, rest),
+            react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
+                    bem_1.bem(cn, { e: "InnerWrapper" }),
+                    align && `justify-${justification[align]}`,
+                ]) },
                 react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "ChildrenWrapper" }) }, children),
                 (filterOptions || filterControl || sortable) && (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(bem_1.bem(cn, { e: "iconButtonWrapper" })) },
                     (filterOptions || filterControl) && (react_1.default.createElement(FilterDropdown_1.FilterDropdown, { isVisible: filterDropDownOpen, onSetVisible: setFilterDropdownOpen, hideFilterSearch: hideFilterSearch, filterApplied: filterApplied, searchInputValue: searchInputValue, onFilterInputChange: handleFilterInputChange, onFilterSelectAll: handleFilterSelectAll, onFilterClear: handleFilterClear, filterOptions: filterOptions, filterControl: filterControl, className: classnames_1.default(filterControl && "hasControls", renderInModal ? "z-toast" : null) })),
-                    sortable && (react_1.default.createElement(Box_1.Box, { as: "button", className: classnames_1.default(bem_1.bem(cn, { e: "iconButton" })), onClick: handleSortClick },
-                        react_1.default.createElement(Icon_1.Icon, { icon: sortIcon, className: classnames_1.default(bem_1.bem(cn, { e: "sortIcon" }), {
-                                isActive: sortActive,
-                            }) }))))))));
+                    sortable && (react_1.default.createElement(Box_1.Box, { as: filterOptions ? "button" : "div", className: classnames_1.default(bem_1.bem(cn, { e: "iconButton" })), onClick: filterOptions ? handleSortClick : undefined },
+                        react_1.default.createElement(SortIcon, { icon: sortIcon, isActive: sortActive }))))))));
     }));
 };
 exports.default = TableHeaderCell;

package/public/components/Table/index.d.ts

@@ -1 +1,4 @@
 export * from "./Table";
+export type { TableCellProps } from "./TableCell";
+export type { TableHeaderCellProps } from "./TableHeaderCell";
+export type { TableRowProps } from "./TableRow";

package/public/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from "../Box";
-import { ICON_TYPE } from "../Icon";
+import { IconType } from "../Icon";
 export declare enum TAG_VARIANT {
     PRIMARY = "primary",
     SECONDARY = "secondary"
@@ -9,7 +9,7 @@ export interface TagProps extends BoxProps {
     filled?: boolean;
     clickable?: boolean;
     toggleable?: boolean;
-    icon?: ICON_TYPE;
+    icon?: IconType;
 }
 export declare const Tag: {
     ({ variant, clickable, filled, toggleable, icon, as: Component, className, children, ...rest }: TagProps): JSX.Element;

package/public/components/Toast/Toast.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 import { STATUS_VARIANT } from "../../types";
-import { ArrowLinkProps } from "../ArrowLink";
+import { LinkProps } from "../Link";
 declare type ToastPosition = "top-right";
 export interface ToastProps extends BoxProps {
     title: string;
@@ -22,11 +22,11 @@ export interface ShowToastProps {
     className?: string;
     variant?: STATUS_VARIANT;
 }
-export declare const ToastLink: ({ children, className, ...rest }: ArrowLinkProps) => JSX.Element;
+export declare const ToastLink: ({ className, children, ...rest }: LinkProps) => JSX.Element;
 export declare const ToastMessage: ({ children, withIcon, className, }: ToastMessageProps) => JSX.Element;
 export declare const Toast: {
     (props: ToastProps): JSX.Element;
-    Link: ({ children, className, ...rest }: ArrowLinkProps) => JSX.Element;
+    Link: ({ className, children, ...rest }: LinkProps) => JSX.Element;
     Message: ({ children, withIcon, className, }: ToastMessageProps) => JSX.Element;
 };
 export declare const showToast: ({ position, duration, variant, title, content, className, ...rest }: ShowToastProps) => any;

package/public/components/Toast/Toast.js

@@ -33,9 +33,13 @@ const Icon_1 = require("../Icon");
 const bem_1 = require("../../utilities/bem");
 const types_1 = require("../../types");
 const status_1 = require("../../contexts/status");
-const ArrowLink_1 = require("../ArrowLink");
+const Link_1 = require("../Link");
 const cn = "Toast";
-const ToastLink = ({ children, className, ...rest }) => (react_1.default.createElement(ArrowLink_1.ArrowLink, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "link" }), className) }, rest), children));
+const ToastLink = ({ className, children, ...rest }) => {
+    return (react_1.default.createElement(Link_1.Link, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "link" }), className), noStyles: true }, rest),
+        react_1.default.createElement("span", { className: "mr-1" }, children),
+        react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.LONG_ARROW_ALT_RIGHT })));
+};
 exports.ToastLink = ToastLink;
 const ToastMessage = ({ children, withIcon, className, }) => {
     const variant = react_1.useContext(status_1.StatusContext);