@rango-dev/ui 0.29.1-next.1 → 0.29.1-next.11

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.styles.tsx"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmCf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqFd,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA6BtB,CAAC"}

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { Tabs } from './Tabs.styles';
+import type * as Stitches from '@stitches/react';
+type BaseItem = {
+    id: string | number;
+    tooltip?: React.ReactNode;
+};
+type ItemWithTitle = BaseItem & {
+    title: string;
+    icon?: React.ReactNode;
+};
+type ItemWithIcon = BaseItem & {
+    icon: React.ReactNode;
+    title?: string;
+};
+type Item = ItemWithTitle | ItemWithIcon;
+type BaseProps = Stitches.VariantProps<typeof Tabs>;
+type BaseType = Exclude<BaseProps['type'], object>;
+type BaseBorderRadius = Exclude<BaseProps['borderRadius'], object>;
+export interface PropTypes {
+    items: Item[];
+    container?: HTMLElement;
+    onChange: (item: Item) => void;
+    value: string;
+    type: BaseType;
+    borderRadius?: BaseBorderRadius;
+    className?: string;
+}
+export {};
+//# sourceMappingURL=Tabs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.types.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAEjD,KAAK,QAAQ,GAAG;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,aAAa,GAAG,QAAQ,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,GAAG;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,IAAI,GAAG,aAAa,GAAG,YAAY,CAAC;AACzC,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACpD,KAAK,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEnE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,2 @@
+export { TabsComponent as Tabs } from './Tabs';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -11,7 +11,7 @@ export * from './Chip';
 export * from './common';
 export * from './Divider';
 export * from './Drawer';
-export * from './ExpandedRoute';
+export * from './FullExpandedQuote';
 export * from './Header';
 export * from './Modal';
 export * from './MessageBox';
@@ -53,4 +53,6 @@ export * from './Popover';
 export * from './Flags';
 export * from './Select';
 export * from './QuoteTag';
+export * from './Tabs';
+export type { SvgIconProps } from './SvgIcon';
 //# sourceMappingURL=index.d.ts.map

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,iBAAiB,CAAC;AAChC,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,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;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,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,qBAAqB,CAAC;AACpC,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,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;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,11 +2,14 @@ export { default as AddIcon } from './Add';
 export { default as AutoThemeIcon } from './AutoTheme';
 export { default as AutorenewIcon } from './Autorenew';
 export { default as BorderRadiusIcon } from './BorderRadius';
+export { default as BridgeIcon } from './Bridges';
+export { default as ChainsIcon } from './Chains';
 export { default as ChevronDownIcon } from './ChevronDown';
 export { default as ChevronLeftIcon } from './ChevronLeft';
 export { default as ChevronRightIcon } from './ChevronRight';
 export { default as ChevronUpIcon } from './ChevronUp';
 export { default as CloseIcon } from './Close';
+export { default as ColorsIcon } from './Colors';
 export { default as CompleteIcon } from './Complete';
 export { default as CopyIcon } from './Copy';
 export { default as CosmosCategoryIcon } from './CosmosCategory';
@@ -14,25 +17,32 @@ export { default as CustomColorsIcon } from './CustomColors';
 export { default as DarkModeIcon } from './DarkMode';
 export { default as DeleteIcon } from './Delete';
 export { default as DesktopIcon } from './Desktop';
+export { default as DocumentIcon } from './Document';
+export { default as DiscordIcon } from './Discord';
 export { default as DoneIcon } from './Done';
-export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ErrorIcon } from './Error';
+export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ExitIcon } from './Exit';
+export { default as ExchangeIcon } from './Exchange';
+export { default as ExplorerIcon } from './Explorer';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
 export { default as GasIcon } from './Gas';
 export { default as HeightIcon } from './Height';
-export { default as InProgressIcon } from './InProgress';
 export { default as InfoErrorIcon } from './InfoError';
 export { default as InfoIcon } from './Info';
+export { default as InProgressIcon } from './InProgress';
+export { default as KeyIcon } from './Key';
 export { default as LanguageIcon } from './Language';
 export { default as LightModeIcon } from './LightMode';
 export { default as LinkIcon } from './Link';
 export { default as LoadingIcon } from './Loading';
 export { default as LogoWithTextIcon } from './LogoWithText';
+export { default as MediumIcon } from './Medium';
 export { default as MenuIcon } from './Menu';
-export { default as NoRouteIcon } from './NoRoute';
+export { default as MoreIcon } from './More';
 export { default as NextIcon } from './Next';
+export { default as NoRouteIcon } from './NoRoute';
 export { default as NoNotificationIcon } from './NoNotification';
 export { default as NotificationNumberIcon } from './NotificationNumber';
 export { default as NotificationsIcon } from './Notifications';
@@ -40,10 +50,16 @@ export { default as NumberIcon } from './Number';
 export { default as OtherCategoryIcon } from './OtherCategory';
 export { default as PinIcon } from './Pin';
 export { default as RefreshIcon } from './Refresh';
+export { default as ReportIcon } from './Report';
+export { default as RequestIcon } from './Request';
 export { default as ReverseIcon } from './Reverse';
 export { default as RouteIcon } from './Route';
 export { default as SearchIcon } from './Search';
+export { default as SupportIcon } from './Support';
+export { default as SettingsIcon } from './Settings';
+export { default as StyleIcon } from './Style';
 export { default as SwapIcon } from './Swap';
+export { default as TelegramIcon } from './Telegram';
 export { default as TimeIcon } from './Time';
 export { default as TransactionIcon } from './Transaction';
 export { default as TuneIcon } from './Tune';
@@ -51,13 +67,5 @@ export { default as UtxoCategoryIcon } from './UtxoCategory';
 export { default as WalletIcon } from './Wallet';
 export { default as WarningIcon } from './Warning';
 export { default as WidthIcon } from './Width';
-export { default as ChainsIcon } from './Chains';
-export { default as ColorsIcon } from './Colors';
-export { default as DiscordIcon } from './Discord';
-export { default as KeyIcon } from './Key';
-export { default as MediumIcon } from './Medium';
-export { default as SettingsIcon } from './Settings';
-export { default as StyleIcon } from './Style';
-export { default as TelegramIcon } from './Telegram';
 export { default as XIcon } from './X';
 //# sourceMappingURL=index.d.ts.map

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.29.1-next.1",
+  "version": "0.29.1-next.11",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -60,7 +60,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.28.0",
+    "@rango-dev/wallets-shared": "^0.28.1-next.1",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.45",
     "rango-types": "^0.1.59",

package/readme.md

@@ -5,3 +5,4 @@ Rango UI design system components
 ### Icons
 
 Add your svg icon to `svgs/resources/` then run `yarn build:icons`.
+

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

@@ -4,7 +4,9 @@ export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '$xs',
-
+  '.title_typography': {
+    width: '100%',
+  },
   '.title_typography:first-letter': {
     textTransform: 'uppercase',
   },

package/src/components/Alert/Alert.tsx

@@ -45,7 +45,12 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
             </Typography>
           )}
         </TitleContainer>
-        {action ? <div>{action}</div> : null}
+        {action ? (
+          <>
+            <Divider direction="horizontal" size={'20'} />
+            <div>{action}</div>
+          </>
+        ) : null}
       </Main>
       {footer ? (
         <div className={`footer ${isFooterString ? 'description' : ''}`}>

package/src/components/ChainToken/ChainToken.constants.ts

@@ -4,6 +4,7 @@ export const tokenChainSizeMap: {
   [key in PropTypes['size']]: { token: number; chain: number };
 } = {
   small: { token: 17, chain: 10 },
+  xmedium: { token: 22, chain: 10 },
   medium: { token: 27, chain: 10 },
   large: { token: 30, chain: 15 },
 };

package/src/components/ChainToken/ChainToken.styles.ts

@@ -18,6 +18,10 @@ export const ChainImageContainer = styled('div', {
         right: '-3px',
         bottom: '-3px',
       },
+      xmedium: {
+        right: '-3px',
+        bottom: '-3px',
+      },
       medium: {
         right: '0',
         bottom: '0',

package/src/components/FullExpandedQuote/FullExpandedQuote.Skeletons.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { ChainToken } from '../ChainToken';
+import { Skeleton } from '../Skeleton';
+
+import {
+  FlexCenter,
+  OutputLoading,
+  Separator,
+  VerticalLine,
+} from './FullExpandedQuote.styles';
+
+export function SkeletonHeader() {
+  return (
+    <>
+      <FlexCenter>
+        <Skeleton width={57.5} variant="text" size="large" />
+        <Separator />
+        <Skeleton width={57.5} variant="text" size="large" />
+        <Separator />
+        <Skeleton width={25.5} variant="text" size="large" />
+      </FlexCenter>
+      <FlexCenter
+        css={{
+          gap: '$5',
+        }}>
+        <Skeleton width={74} variant="text" size="large" />
+        <Skeleton width={80} variant="text" size="large" />
+        <Skeleton width={75} variant="text" size="large" />
+        <Skeleton width={52} variant="text" size="large" />
+        <Skeleton width={95} variant="text" size="large" />
+      </FlexCenter>
+    </>
+  );
+}
+
+export function SkeletonOutput() {
+  return (
+    <OutputLoading>
+      <ChainToken
+        useAsPlaceholder={true}
+        size="medium"
+        chainImage=""
+        tokenImage=""
+        loading={true}
+      />
+      <Skeleton variant="rounded" width={122} height={29} />
+    </OutputLoading>
+  );
+}
+export function SkeletonItemLeft() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'end',
+      }}>
+      <Skeleton variant="rounded" width={42} height={49} />
+    </div>
+  );
+}
+
+export function SkeletonItemRight() {
+  return (
+    <FlexCenter
+      css={{
+        flexDirection: 'column',
+        gap: '$2',
+      }}>
+      <Skeleton variant="circular" width={30} height={30} />
+      <VerticalLine
+        css={{
+          width: 'unset',
+        }}
+      />
+    </FlexCenter>
+  );
+}

package/src/components/{ExpandedRoute/ExpandedRoute.stories.tsx → FullExpandedQuote/FullExpandedQuote.stories.tsx}

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ExpandedRoute } from './ExpandedRoute';
+import { FullExpandedQuote } from './FullExpandedQuote';
 import { steps, tags } from './mock';
 
-const meta: Meta<typeof ExpandedRoute> = {
-  component: ExpandedRoute,
+const meta: Meta<typeof FullExpandedQuote> = {
+  component: FullExpandedQuote,
 };
 
 export default meta;
-type Story = StoryObj<typeof ExpandedRoute>;
+type Story = StoryObj<typeof FullExpandedQuote>;
 
 export const Main: Story = {
   args: {

package/src/components/{ExpandedRoute/ExpandedRoute.styles.ts → FullExpandedQuote/FullExpandedQuote.styles.ts}

@@ -3,7 +3,7 @@ import { PriceImpact } from '../PriceImpact';
 
 export const tokenLabelStyles = css({});
 
-const FlexCenter = styled('div', {
+export const FlexCenter = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -39,6 +39,13 @@ export const RouteContainer = styled('div', {
 export const RouteHeader = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
+  variants: {
+    loading: {
+      true: {
+        padding: '$2',
+      },
+    },
+  },
 });
 
 export const TagsContainer = styled('div', {
@@ -48,11 +55,10 @@ export const TagsContainer = styled('div', {
 
 export const Steps = styled('div', {
   display: 'flex',
-  height: '85px',
-  padding: '$2',
+  height: '102px',
 });
 
-export const Step = styled('div', {
+export const StepItem = styled('div', {
   padding: '$2',
   display: 'flex',
   width: '100%',
@@ -103,8 +109,8 @@ export const SwapperContainer = styled(FlexCenter, {
 export const SwapperImage = styled(FlexCenter, {
   borderRadius: '$lg',
   position: 'relative',
-  width: '$18',
-  height: '$18',
+  width: '$24',
+  height: '$24',
   border: '1px solid transparent',
   variants: {
     state: {
@@ -121,10 +127,10 @@ export const SwapperImage = styled(FlexCenter, {
 export const IconHighlight = styled(FlexCenter, {
   borderRadius: '$lg',
   position: 'absolute',
-  width: '$8',
-  height: '$8',
-  bottom: -2,
-  right: -2,
+  width: '$10',
+  height: '$10',
+  bottom: -3,
+  right: -3,
   variants: {
     type: {
       warning: {
@@ -147,12 +153,12 @@ export const IconHighlight = styled(FlexCenter, {
 
 export const OutputSection = styled(FlexCenter, {
   flexDirection: 'column',
-  paddingLeft: '$4',
+  paddingLeft: '$8',
 });
 
 export const VerticalLine = styled('div', {
   display: 'flex',
-  width: '50%',
+  width: 'calc(50% + 1px)',
   borderRight: '1px dashed',
   height: '$10',
   borderColor: '$info300',
@@ -172,7 +178,7 @@ export const lastStepStyle = css({
     content: '',
     position: 'absolute',
     top: '50%',
-    right: '0',
+    right: '-3px',
     transform: 'translate(-50%, -50%) rotate(45deg)',
     width: '$6',
     height: '$6',
@@ -184,3 +190,19 @@ export const lastStepStyle = css({
     },
   },
 });
+
+// Styles for the skeleton
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $neutral700',
+});
+
+export const OutputLoading = styled(FlexCenter, {
+  padding: '0 $2',
+  height: '85px',
+  gap: '$10',
+  flexDirection: 'column',
+});