@rango-dev/ui 0.26.1-next.9 → 0.27.1-next.0

package/dist/widget/ui/src/components/Toast/Toast.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAO3C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAahC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyBzB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmCnB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI7B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAa3B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI9B,CAAC"}

package/dist/widget/ui/src/components/Toast/Toast.types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { Type } from '../Alert/Alert.types';
+import type { CSSProperties } from '@stitches/react';
+export interface ProviderPropTypes {
+    container: HTMLElement;
+    anchorOrigin?: {
+        horizontal: 'left' | 'right';
+        vertical: 'bottom' | 'top';
+    };
+    containerStyle?: CSSProperties;
+}
+export type ToastType = {
+    autoHideDuration?: number;
+    id?: number | string;
+} & ({
+    title: string;
+    type: Type;
+    titleColor?: string;
+    style?: CSSProperties;
+} | {
+    component: React.ReactNode;
+});
+export type ToastProps = ToastType & {
+    id: number | string;
+    horizontal: 'left' | 'right';
+};
+export type ProviderContext = {
+    addToast: (content: ToastType) => void;
+    removeToast: (id: number | string) => void;
+};
+//# sourceMappingURL=Toast.types.d.ts.map

package/dist/widget/ui/src/components/Toast/Toast.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,CAAC,EAAE;QACb,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;QAC7B,QAAQ,EAAE,QAAQ,GAAG,KAAK,CAAC;KAC5B,CAAC;IACF,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,MAAM,MAAM,SAAS,GAAG;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,CAC1E;IACE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GACD;IAAE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CACjC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG;IACnC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC"}

package/dist/widget/ui/src/components/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { Toast } from './Toast';
+export { ToastProvider, useToast } from './Toast.Provider';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/widget/ui/src/components/Typography/Typography.styles.d.ts

@@ -3,10 +3,10 @@ export declare const TypographyContainer: import("@stitches/react/types/styled-c
     size?: "small" | "medium" | "large" | "xmedium" | "xsmall" | undefined;
     align?: "center" | "left" | "right" | undefined;
     noWrap?: boolean | "true" | undefined;
-    ml?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
-    mt?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
-    mr?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
-    mb?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
+    ml?: 2 | 12 | 4 | 8 | "2" | "4" | "8" | "12" | undefined;
+    mt?: 2 | 12 | 4 | 8 | "2" | "4" | "8" | "12" | undefined;
+    mr?: 2 | 12 | 4 | 8 | "2" | "4" | "8" | "12" | undefined;
+    mb?: 2 | 12 | 4 | 8 | "2" | "4" | "8" | "12" | undefined;
 }, {
     xs: string;
     sm: string;

package/dist/widget/ui/src/components/Wallet/ClickableWallet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickableWallet.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/ClickableWallet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,iBAAS,MAAM,CAAC,KAAK,EAAE,eAAe,qBA+CrC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"ClickableWallet.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/ClickableWallet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkBxC,iBAAS,MAAM,CAAC,KAAK,EAAE,eAAe,qBAoDrC;AAED,eAAe,MAAM,CAAC"}

package/dist/widget/ui/src/components/Wallet/SelectableWallet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableWallet.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/SelectableWallet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,KAAK,mBAAmB,EAAe,MAAM,gBAAgB,CAAC;AAEvE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,mBAAmB,qBAiC1D"}
+{"version":3,"file":"SelectableWallet.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/SelectableWallet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,KAAK,mBAAmB,EAAe,MAAM,gBAAgB,CAAC;AAEvE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,mBAAmB,qBA0C1D"}

package/dist/widget/ui/src/components/Wallet/Wallet.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wallet.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Wallet.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI/B,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAEhB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIf,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA4CvB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAUxB,CAAC"}
+{"version":3,"file":"Wallet.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Wallet.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI/B,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAEhB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIf,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgDvB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAUxB,CAAC"}

package/dist/widget/ui/src/components/Wallet/Wallet.types.d.ts

@@ -34,8 +34,10 @@ export interface WalletPropTypes {
     description?: string;
     isLoading?: boolean;
     container?: HTMLElement;
+    disabled?: boolean;
 }
 export type SelectablePropTypes = WalletPropTypes & {
     selected: boolean;
+    disabled?: boolean;
 };
 //# sourceMappingURL=Wallet.types.d.ts.map

package/dist/widget/ui/src/components/Wallet/Wallet.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wallet.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Wallet.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5E,oBAAY,WAAW;IACrB,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG;IAClD,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC"}
+{"version":3,"file":"Wallet.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Wallet.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5E,oBAAY,WAAW;IACrB,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

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

@@ -29,6 +29,7 @@ export * from './SwapListItem';
 export * from './SwapDetailsPlaceholder';
 export * from './Switch';
 export * from './TextField';
+export * from './Toast';
 export * from './TokenList';
 export * from './TokenPreview';
 export * from './Tooltip';

package/dist/widget/ui/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/widget/ui/src/icons/Add.d.ts

@@ -0,0 +1,5 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+import React from 'react';
+declare function SvgAdd(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
+export default SvgAdd;
+//# sourceMappingURL=Add.d.ts.map

package/dist/widget/ui/src/icons/Add.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Add.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Add.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,MAAM,CAAC,KAAK,EAAE,wBAAwB,4DAiB9C;AACD,eAAe,MAAM,CAAC"}

package/dist/widget/ui/src/icons/index.d.ts

@@ -1,3 +1,4 @@
+export { default as AddIcon } from './Add';
 export { default as AutoThemeIcon } from './AutoTheme';
 export { default as BorderRadiusIcon } from './BorderRadius';
 export { default as ChevronDownIcon } from './ChevronDown';

package/dist/widget/ui/src/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.26.1-next.9",
+  "version": "0.27.1-next.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -65,7 +65,7 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.25.1-next.1",
+    "@rango-dev/wallets-shared": "^0.26.0",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.44",
     "rango-types": "^0.1.57",

package/src/components/Alert/Alert.styles.ts

@@ -153,6 +153,11 @@ export const IconHighlight = styled('div', {
         backgroundColor: '$$color',
       },
     },
+    align: {
+      center: {
+        alignSelf: 'center',
+      },
+    },
   },
 });
 

package/src/components/Divider/Divider.styles.ts

@@ -4,6 +4,7 @@ export const DividerContainer = styled('div', {
   flexShrink: 0,
   variants: {
     size: {
+      2: {},
       4: {},
       8: {},
       10: {},
@@ -21,6 +22,20 @@ export const DividerContainer = styled('div', {
     },
   },
   compoundVariants: [
+    {
+      size: 2,
+      direction: 'horizontal',
+      css: {
+        width: 2,
+      },
+    },
+    {
+      size: 2,
+      direction: 'vertical',
+      css: {
+        height: 2,
+      },
+    },
     {
       size: 4,
       direction: 'horizontal',

package/src/components/Divider/Divider.tsx

@@ -4,10 +4,10 @@ import React from 'react';
 
 import { DividerContainer } from './Divider.styles';
 
-const Default_Size = 12;
+const DEFAULT_SIZE = 12;
 
 export function Divider({
-  size = Default_Size,
+  size = DEFAULT_SIZE,
   direction = 'vertical',
 }: PropTypes) {
   return <DividerContainer size={size} direction={direction} />;

package/src/components/Header/Header.constants.ts

@@ -0,0 +1 @@
+export const HEADER_CORNDER_RADIUS = 20;

package/src/components/Header/Header.styles.ts

@@ -1,5 +1,17 @@
+import { globalCss } from '@stitches/react';
+
 import { darkTheme, styled } from '../../theme';
 
+import { HEADER_CORNDER_RADIUS } from './Header.constants';
+
+export const globalHeaderStyles = globalCss({
+  '.rng-scrolled': {
+    '.rng-curve-left::before, rng-curve-right::before': {
+      borderRadius: '0 !important',
+    },
+  },
+});
+
 export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
@@ -11,8 +23,40 @@ export const Container = styled('div', {
   },
   backgroundColor: '$$color',
   position: 'relative',
-  borderTopRightRadius: '$primary',
-  borderTopLeftRadius: '$primary',
+
+  '.rng-curve-left,.rng-curve-right': {
+    width: HEADER_CORNDER_RADIUS * 2,
+    height: HEADER_CORNDER_RADIUS * 2,
+    position: 'absolute',
+    bottom: 0,
+    overflow: 'hidden',
+    transform: 'translateY(100%)',
+
+    '&:before': {
+      width: HEADER_CORNDER_RADIUS * 2,
+      height: HEADER_CORNDER_RADIUS * 2,
+      display: 'block',
+      content: '',
+      position: 'absolute',
+      bottom: 0,
+      borderRadius: '50%',
+      transition: 'border-radius 0.5s',
+    },
+  },
+  '.rng-curve-left': {
+    left: 0,
+    '&:before': {
+      left: 0,
+      boxShadow: `-${HEADER_CORNDER_RADIUS}px -${HEADER_CORNDER_RADIUS}px 0 0 $$color`,
+    },
+  },
+  '.rng-curve-right': {
+    right: 0,
+    '&:before': {
+      right: 0,
+      boxShadow: `${HEADER_CORNDER_RADIUS}px -${HEADER_CORNDER_RADIUS}px 0 0 $$color`,
+    },
+  },
 });
 
 export const Suffix = styled('div', {

package/src/components/Header/Header.tsx

@@ -5,13 +5,15 @@ import React from 'react';
 
 import { Typography } from '../Typography';
 
-import { Container, Suffix } from './Header.styles';
+import { Container, globalHeaderStyles, Suffix } from './Header.styles';
 
 export function Header({
   prefix,
   suffix,
   title,
 }: PropsWithChildren<PropTypes>) {
+  globalHeaderStyles();
+
   return (
     <Container>
       {prefix}
@@ -19,6 +21,8 @@ export function Header({
         {title}
       </Typography>
       <Suffix>{suffix}</Suffix>
+      <div className="rng-curve-left"></div>
+      <div className="rng-curve-right"></div>
     </Container>
   );
 }

package/src/components/Header/index.ts

@@ -1 +1,2 @@
 export { Header } from './Header';
+export { HEADER_CORNDER_RADIUS } from './Header.constants';

package/src/components/Modal/Modal.tsx

@@ -62,7 +62,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
         setActive(false);
         timeoutRef.current = setTimeout(() => {
           setIsMount(false);
-          container.style.overflow = 'unset';
+          container.style.removeProperty('overflow');
         }, CLOSED_DELAY);
       }
     }

package/src/components/QuoteCost/QuoteCost.styles.ts

@@ -1,4 +1,4 @@
-import { css, styled } from '../../theme';
+import { css, keyframes, styled } from '../../theme';
 
 export const Container = styled('div', {
   borderRadius: '$xs',
@@ -23,7 +23,34 @@ export const iconStyles = css({
   alignItems: 'center',
 });
 
+const blinker = keyframes({
+  '50%': {
+    opacity: 0.2,
+  },
+});
+
 export const itemStyles = css({
   display: 'flex',
   alignItems: 'center',
+  '&.feeSection': {
+    cursor: 'pointer',
+    '&:hover': {
+      svg: {
+        color: '$secondary',
+      },
+      '._typography': {
+        color: '$secondary',
+      },
+    },
+  },
+  '&.warning': {
+    animation: `${blinker} 2s linear infinite`,
+
+    svg: {
+      color: '$warning500',
+    },
+    '._typography': {
+      color: '$warning500',
+    },
+  },
 });

package/src/components/QuoteCost/QuoteCost.tsx

@@ -3,6 +3,7 @@ import type { PropTypes } from './QuoteCost.types';
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -13,17 +14,36 @@ import {
 } from './QuoteCost.styles';
 
 export function QuoteCost(props: PropTypes) {
-  const { fee, time, steps } = props;
+  const {
+    fee,
+    time,
+    steps,
+    onClickFee,
+    tooltipGas,
+    feeWarning,
+    tooltipContainer,
+  } = props;
   return (
     <Container>
-      <div className={itemStyles()}>
-        <div className={iconStyles()}>
-          <GasIcon size={12} color={'gray'} />
+      <Tooltip
+        container={tooltipContainer}
+        content={tooltipGas}
+        open={!onClickFee && !tooltipGas ? false : undefined}
+        side="bottom">
+        <div
+          className={`${itemStyles()} ${onClickFee ? 'feeSection' : ''} ${
+            feeWarning ? 'warning' : ''
+          }`}
+          onClick={onClickFee}>
+          <div className={iconStyles()}>
+            <GasIcon size={12} color={'gray'} />
+          </div>
+          <Typography ml={2} align="center" variant="body" size="small">
+            ${fee}
+          </Typography>
         </div>
-        <Typography ml={2} align="center" variant="body" size="small">
-          ${fee}
-        </Typography>
-      </div>
+      </Tooltip>
+
       <Separator />
       <div className={itemStyles()}>
         <div className={iconStyles()}>

package/src/components/QuoteCost/QuoteCost.types.ts

@@ -2,4 +2,8 @@ export type PropTypes = {
   fee: string;
   time: string | number;
   steps: number;
+  onClickFee?: () => void;
+  tooltipGas?: string;
+  feeWarning?: boolean;
+  tooltipContainer?: HTMLElement;
 };

package/src/components/SwapContainer/SwapContainer.tsx

@@ -22,28 +22,16 @@ const MainContainer = styled('div', {
     boxSizing: 'border-box',
     listStyleType: 'none',
   },
-  variants: {
-    fixedHeight: {
-      true: {
-        height: '633px',
-        maxHeight: '633px',
-      },
-      false: {
-        height: 'auto',
-      },
-    },
-  },
 });
 
 export interface PropTypes {
   style?: CSSProperties;
-  fixedHeight?: boolean;
 }
 
 export function SwapContainer(props: PropsWithChildren<PropTypes>) {
-  const { children, style, fixedHeight = true } = props;
+  const { children, style } = props;
   return (
-    <MainContainer style={style} id="swap-box" fixedHeight={fixedHeight}>
+    <MainContainer style={style} id="swap-box">
       {children}
     </MainContainer>
   );

package/src/components/Toast/Toast.Provider.tsx

@@ -0,0 +1,87 @@
+import type {
+  ProviderContext,
+  ProviderPropTypes,
+  ToastProps,
+  ToastType,
+} from './Toast.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { Toast } from './Toast';
+import { idGenerator } from './Toast.helpers';
+import { ToastContainer } from './Toast.styles';
+
+const ToastContext = createContext<ProviderContext | undefined>(undefined);
+
+export const ToastProvider = (props: PropsWithChildren<ProviderPropTypes>) => {
+  const generateId = useMemo(() => idGenerator(), []);
+
+  const {
+    children,
+    anchorOrigin = {
+      horizontal: 'right',
+      vertical: 'bottom',
+    },
+    container,
+    containerStyle = {},
+  } = props;
+  const [toasts, setToasts] = useState<ToastProps[]>([]);
+
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const api: ProviderContext = {
+    addToast(content: ToastType) {
+      setToasts((toasts) => {
+        const isToastExistById = toasts.find(
+          (toast) => toast.id === content.id
+        );
+        if (isToastExistById) {
+          console.warn(
+            'Trying to send a toast with an existing ID. Please update the toast ID or use it after the toast is hidden'
+          );
+          return toasts;
+        }
+        return [
+          ...toasts,
+          {
+            ...content,
+            id: content.id || generateId(),
+            horizontal: anchorOrigin.horizontal,
+          },
+        ];
+      });
+    },
+    removeToast(id: number | string) {
+      setToasts((toasts) => toasts.filter((t) => t.id !== id));
+    },
+  };
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      {container &&
+        createPortal(
+          <ToastContainer
+            style={containerStyle}
+            horizontal={anchorOrigin.horizontal}
+            vertical={anchorOrigin.vertical}>
+            {toasts.map((toast) => (
+              <Toast {...toast} key={toast.id} />
+            ))}
+          </ToastContainer>,
+          container
+        )}
+    </ToastContext.Provider>
+  );
+};
+
+export function useToast(): ProviderContext {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error(
+      'useToast can only be used within the ToastProvider component'
+    );
+  }
+  return context;
+}

package/src/components/Toast/Toast.helpers.ts

@@ -0,0 +1,7 @@
+export function idGenerator() {
+  let id = 1;
+  return () => {
+    id++;
+    return id;
+  };
+}

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,71 @@
+import type { ToastProps } from './Toast.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { Button } from '../Button';
+
+import { ToastStoryContainer } from './Toast.styles';
+
+import { Toast, ToastProvider, useToast } from '.';
+
+export default {
+  title: 'Components/Toast',
+  component: Toast,
+  args: {
+    type: 'success',
+    title: 'Please change your wallet network to Polygon',
+    autoHideDuration: 5_000,
+    horizontal: 'right',
+  },
+  argTypes: {
+    type: {
+      name: 'type',
+      control: {
+        type: 'select',
+        options: ['success', 'warning', 'error', 'info', 'loading'],
+      },
+    },
+  },
+} as Meta<typeof Toast>;
+
+export const TopToasts = (props: ToastProps) => {
+  return (
+    <ToastProvider
+      container={document.body}
+      anchorOrigin={{
+        horizontal: props.horizontal,
+        vertical: 'top',
+      }}>
+      <ToastComponent {...props} />
+    </ToastProvider>
+  );
+};
+
+export const BottomToasts = (props: ToastProps) => {
+  return (
+    <ToastProvider
+      container={document.body}
+      anchorOrigin={{
+        horizontal: props.horizontal,
+        vertical: 'bottom',
+      }}>
+      <ToastComponent {...props} />
+    </ToastProvider>
+  );
+};
+
+const ToastComponent = (props: ToastProps) => {
+  const { addToast } = useToast();
+
+  return (
+    <ToastStoryContainer>
+      <Button
+        variant="contained"
+        type="success"
+        onClick={() => addToast(props)}>
+        Show Toast
+      </Button>
+    </ToastStoryContainer>
+  );
+};