@rango-dev/ui 0.17.1-next.8 → 0.18.0

package/dist/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAykV,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAwgW,CAAC"}

package/dist/translations/es.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAkvV,CAAC"}
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAuyX,CAAC"}

package/dist/translations/fr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAkvV,CAAC"}
+{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAm9X,CAAC"}

package/dist/translations/{jp.d.ts → ja.d.ts}

@@ -1,2 +1,2 @@
 export declare const messages: any;
-//# sourceMappingURL=jp.d.ts.map
+//# sourceMappingURL=ja.d.ts.map

package/dist/translations/ja.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ja.d.ts","sourceRoot":"","sources":["../../../../translations/ja.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAyxS,CAAC"}

package/dist/widget/ui/src/components/Flags/English.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function English(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=English.d.ts.map

package/dist/widget/ui/src/components/Flags/English.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"English.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/English.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,aAAa,qBA4BnD"}

package/dist/widget/ui/src/components/Flags/Flags.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_SIZE = "1em";
+//# sourceMappingURL=Flags.constants.d.ts.map

package/dist/widget/ui/src/components/Flags/Flags.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flags.constants.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Flags.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,QAAQ,CAAC"}

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

@@ -0,0 +1,4 @@
+export type FlagPropTypes = {
+    size?: number;
+};
+//# sourceMappingURL=Flags.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flags.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Flags.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/widget/ui/src/components/Flags/French.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function French(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=French.d.ts.map

package/dist/widget/ui/src/components/Flags/French.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"French.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/French.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,aAAa,qBAmBlD"}

package/dist/widget/ui/src/components/Flags/Japanese.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function Japanese(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=Japanese.d.ts.map

package/dist/widget/ui/src/components/Flags/Japanese.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Japanese.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Japanese.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAkBpD"}

package/dist/widget/ui/src/components/Flags/Spanish.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function Spanish(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=Spanish.d.ts.map

package/dist/widget/ui/src/components/Flags/Spanish.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spanish.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Spanish.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,aAAa,qBA8EnD"}

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

@@ -0,0 +1,7 @@
+import English from './English';
+import French from './French';
+import Japanese from './Japanese';
+import Spanish from './Spanish';
+export type { FlagPropTypes } from './Flags.types';
+export { English, Spanish, Japanese, French };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC"}

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

@@ -3,12 +3,12 @@ import React from 'react';
 declare const messages: {
     en: any;
     es: any;
-    jp: any;
+    ja: any;
     fr: any;
 };
 export type Language = keyof typeof messages;
 interface PropTypes {
-    language?: Language;
+    language: Language;
 }
 declare function I18nManager(props: PropsWithChildren<PropTypes>): React.JSX.Element;
 export { I18nManager };

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

@@ -1 +1 @@
-{"version":3,"file":"I18nManager.d.ts","sourceRoot":"","sources":["../../../../../../src/components/I18nManager/I18nManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAoB,MAAM,OAAO,CAAC;AAezC,QAAA,MAAM,QAAQ;;;;;CAKb,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAMvD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"I18nManager.d.ts","sourceRoot":"","sources":["../../../../../../src/components/I18nManager/I18nManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAgC,MAAM,OAAO,CAAC;AAcrD,QAAA,MAAM,QAAQ;;;;;CAKb,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAgBvD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export interface PropTypes {
     logo: string;
     chainLogo: string;

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

@@ -1 +1 @@
-{"version":3,"file":"StepDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetail/StepDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgFjD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAkD7D"}
+{"version":3,"file":"StepDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetail/StepDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAiF1B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAkD7D"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepDetails.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,KAA8C,MAAM,OAAO,CAAC;AAsGnE,eAAO,MAAM,WAAW,oHAA6B,CAAC"}
+{"version":3,"file":"StepDetails.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,KAA8C,MAAM,OAAO,CAAC;AAqGnE,eAAO,MAAM,WAAW,oHAA6B,CAAC"}

package/dist/widget/ui/src/components/SvgIcon/SvgIcon.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgIcon.style.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SvgIcon/SvgIcon.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAoCvB,CAAC"}
+{"version":3,"file":"SvgIcon.style.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SvgIcon/SvgIcon.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgCvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SwapDetailsPlaceholder.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapDetailsPlaceholder/SwapDetailsPlaceholder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAM1B,CAAC;AAEH,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,qBA0BtD"}
+{"version":3,"file":"SwapDetailsPlaceholder.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapDetailsPlaceholder/SwapDetailsPlaceholder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAM1B,CAAC;AAEH,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,qBAyBtD"}

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?: 12 | 4 | 8 | 2 | "4" | "8" | "12" | "2" | undefined;
-    mt?: 12 | 4 | 8 | 2 | "4" | "8" | "12" | "2" | undefined;
-    mr?: 12 | 4 | 8 | 2 | "4" | "8" | "12" | "2" | undefined;
-    mb?: 12 | 4 | 8 | 2 | "4" | "8" | "12" | "2" | 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;
 }, {
     sm: string;
     md: string;

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

@@ -1,5 +1,5 @@
+import type { ContentProps } from './Wallet.types';
 import React from 'react';
-import { ContentProps } from './Wallet.types';
 declare function Content(props: ContentProps): React.JSX.Element;
 export default Content;
 //# sourceMappingURL=Content.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,qBAuBnC;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,qBAuBnC;AAED,eAAe,OAAO,CAAC"}

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

@@ -49,4 +49,5 @@ export * from './RouteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
+export * from './Flags';
 //# 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,aAAa,CAAC;AAC5B,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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,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,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"}

package/dist/widget/ui/src/containers/Warnings/HighSlippageWarning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighSlippageWarning.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/HighSlippageWarning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,SAAS;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAqBnD"}
+{"version":3,"file":"HighSlippageWarning.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/HighSlippageWarning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAiBnD"}

package/dist/widget/ui/src/containers/Warnings/MinRequiredSlippage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinRequiredSlippage.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/MinRequiredSlippage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACjB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,mBAAmB,EACnB,cAAc,GACf,EAAE,SAAS,qBAeX"}
+{"version":3,"file":"MinRequiredSlippage.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/MinRequiredSlippage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACjB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,mBAAmB,EACnB,cAAc,GACf,EAAE,SAAS,qBAWX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.17.1-next.8",
+  "version": "0.18.0",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -23,6 +23,8 @@
     "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore"
   },
   "peerDependencies": {
+    "@lingui/core": "4.2.1",
+    "@lingui/react": "4.2.1",
     "@rango-dev/queue-manager-rango-preset": "*",
     "react": ">=16"
   },
@@ -31,6 +33,8 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
+    "@lingui/core": "4.2.1",
+    "@lingui/react": "4.2.1",
     "@storybook/addon-essentials": "^7.1.1",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^7.1.1",
@@ -55,15 +59,13 @@
     "typescript": "^4.8.4"
   },
   "dependencies": {
-    "@lingui/core": "4.2.1",
-    "@lingui/react": "4.2.1",
     "@radix-ui/react-checkbox": "^1.0.1",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-popover": "^1.0.6",
     "@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.17.1-next.0",
+    "@rango-dev/wallets-shared": "^0.18.0",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.35",
     "react-virtualized-auto-sizer": "^1.0.7",

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

@@ -20,9 +20,9 @@ export const Container = styled('div', {
     paddingLeft: '$24',
   },
   '.description': {
-    $$color: '$colors$neutral900',
+    $$color: '$colors$neutral700',
     [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral800',
+      $$color: '$colors$neutral600',
     },
     color: '$$color',
     fontSize: '$10',

package/src/components/BestRoute/BestRoute.tsx

@@ -71,7 +71,7 @@ export function BestRoute(props: BestRouteProps) {
                 } ${steps[steps.length - 1].to.token.displayName}`}
               </Typography>
               <Typography
-                color="$neutral800"
+                color="$neutral600"
                 ml={2}
                 size="xsmall"
                 variant="body">

package/src/components/BestRoute/BestRouteSkeleton.styles.ts

@@ -47,7 +47,7 @@ export const Container = styled('div', {
   '& .route-summary__separator': {
     height: '$28',
     marginLeft: '13px',
-    borderLeft: '1px solid $neutral900',
+    borderLeft: '1px solid $neutral700',
   },
   '& .token-amount': {
     display: 'flex',

package/src/components/BottomLogo/BottomLogo.tsx

@@ -10,7 +10,7 @@ import { Container, StyledAnchor } from './BottomLogo.styles';
 export function BottomLogo() {
   return (
     <Container>
-      <Typography variant="body" size="xsmall" color="$neutral900">
+      <Typography variant="body" size="xsmall" color="$neutral700">
         {i18n.t('Powered By')}
       </Typography>
       <Divider direction="horizontal" size={8} />
@@ -18,7 +18,7 @@ export function BottomLogo() {
         <Logo size={16} color="gray" />
         <Divider direction="horizontal" size={4} />
 
-        <Typography variant="body" size="xsmall" color="neutral900">
+        <Typography variant="body" size="xsmall" color="neutral700">
           RANGO
         </Typography>
       </StyledAnchor>

package/src/components/Button/Button.styles.tsx

@@ -61,7 +61,7 @@ export const ButtonBase = styled('button', {
           [`.${darkTheme} &`]: {
             $$color: '$colors$foreground',
           },
-          backgroundColor: '$neutral800',
+          backgroundColor: '$neutral600',
           color: '$$color',
           pointerEvents: 'none',
         },
@@ -80,16 +80,16 @@ export const ButtonBase = styled('button', {
           outline: 0,
         },
         '&:disabled': {
-          borderColor: '$neutral800',
-          color: '$neutral800',
+          borderColor: '$neutral600',
+          color: '$neutral600',
           pointerEvents: 'none',
         },
       },
       ghost: {
         backgroundColor: 'transparent',
-        color: '$neutral900',
+        color: '$neutral700',
         '&:disabled': {
-          color: '$neutral800',
+          color: '$neutral600',
           pointerEvents: 'none',
         },
         '&:focus-visible': {
@@ -140,7 +140,7 @@ export const ButtonBase = styled('button', {
           [`.${darkTheme} &`]: {
             $$color: '$colors$foreground',
           },
-          background: '$neutral800',
+          background: '$neutral600',
           color: '$$color',
           pointerEvents: 'none',
         },

package/src/components/Checkbox/Checkbox.styles.ts

@@ -13,7 +13,7 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, {
   width: '1rem',
   height: '1rem',
   padding: 0,
-  border: '1px solid $neutral800',
+  border: '1px solid $neutral600',
   backgroundColor: 'transparent',
   cursor: 'pointer',
   '&[data-state="checked"]': {

package/src/components/Chip/Chip.tsx

@@ -12,7 +12,7 @@ export function Chip(props: PropTypes) {
     <ChipContainer selected={selected} {...otherProps}>
       {prefix || null}
       <Typography
-        color={!selected ? 'neutral900' : undefined}
+        color={!selected ? 'neutral700' : undefined}
         variant="body"
         size="medium">
         {label}

package/src/components/Flags/English.tsx

@@ -0,0 +1,35 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function English(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#eee"
+          d="m0 0 8 22-8 23v23l32 54-32 54v32l32 48-32 48v32l32 54-32 54v68l22-8 23 8h23l54-32 54 32h32l48-32 48 32h32l54-32 54 32h68l-8-22 8-23v-23l-32-54 32-54v-32l-32-48 32-48v-32l-32-54 32-54V0l-22 8-23-8h-23l-54 32-54-32h-32l-48 32-48-32h-32l-54 32L68 0H0z"
+        />
+        <path
+          fill="#0052b4"
+          d="M336 0v108L444 0Zm176 68L404 176h108zM0 176h108L0 68ZM68 0l108 108V0Zm108 512V404L68 512ZM0 444l108-108H0Zm512-108H404l108 108Zm-68 176L336 404v108z"
+        />
+        <path
+          fill="#d80027"
+          d="M0 0v45l131 131h45L0 0zm208 0v208H0v96h208v208h96V304h208v-96H304V0h-96zm259 0L336 131v45L512 0h-45zM176 336 0 512h45l131-131v-45zm160 0 176 176v-45L381 336h-45z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Flags.constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_SIZE = '1em';

package/src/components/Flags/Flags.types.ts

@@ -0,0 +1,3 @@
+export type FlagPropTypes = {
+  size?: number;
+};

package/src/components/Flags/French.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function French(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
+        <path fill="#0052b4" d="M0 0h167v512H0z" />
+        <path fill="#d80027" d="M345 0h167v512H345z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Japanese.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Japanese(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="M0 0h512v512H0z" />
+        <circle cx="256" cy="256" r="111.3" fill="#d80027" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Spanish.tsx

@@ -0,0 +1,85 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Spanish(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#ffda44" d="m0 128 256-32 256 32v256l-256 32L0 384Z" />
+        <path fill="#d80027" d="M0 0h512v128H0zm0 384h512v128H0z" />
+        <g fill="#eee">
+          <path d="M144 304h-16v-80h16zm128 0h16v-80h-16z" />
+          <ellipse cx="208" cy="296" rx="48" ry="32" />
+        </g>
+        <g fill="#d80027">
+          <rect width="16" height="24" x="128" y="192" rx="8" />
+          <rect width="16" height="24" x="272" y="192" rx="8" />
+          <path d="M208 272v24a24 24 0 0 0 24 24 24 24 0 0 0 24-24v-24h-24z" />
+        </g>
+        <rect width="32" height="16" x="120" y="208" fill="#ff9811" ry="8" />
+        <rect width="32" height="16" x="264" y="208" fill="#ff9811" ry="8" />
+        <rect width="32" height="16" x="120" y="304" fill="#ff9811" rx="8" />
+        <rect width="32" height="16" x="264" y="304" fill="#ff9811" rx="8" />
+        <path
+          fill="#ff9811"
+          d="M160 272v24c0 8 4 14 9 19l5-6 5 10a21 21 0 0 0 10 0l5-10 5 6c6-5 9-11 9-19v-24h-9l-5 8-5-8h-10l-5 8-5-8z"
+        />
+        <path d="M122 252h172m-172 24h28m116 0h28" />
+        <path
+          fill="#d80027"
+          d="M122 248a4 4 0 0 0-4 4 4 4 0 0 0 4 4h172a4 4 0 0 0 4-4 4 4 0 0 0-4-4zm0 24a4 4 0 0 0-4 4 4 4 0 0 0 4 4h28a4 4 0 0 0 4-4 4 4 0 0 0-4-4zm144 0a4 4 0 0 0-4 4 4 4 0 0 0 4 4h28a4 4 0 0 0 4-4 4 4 0 0 0-4-4z"
+        />
+        <path
+          fill="#eee"
+          d="M196 168c-7 0-13 5-15 11l-5-1c-9 0-16 7-16 16s7 16 16 16c7 0 13-4 15-11a16 16 0 0 0 17-4 16 16 0 0 0 17 4 16 16 0 1 0 10-20 16 16 0 0 0-27-5c-3-4-7-6-12-6zm0 8c5 0 8 4 8 8 0 5-3 8-8 8-4 0-8-3-8-8 0-4 4-8 8-8zm24 0c5 0 8 4 8 8 0 5-3 8-8 8-4 0-8-3-8-8 0-4 4-8 8-8zm-44 10 4 1 4 8c0 4-4 7-8 7s-8-3-8-8c0-4 4-8 8-8zm64 0c5 0 8 4 8 8 0 5-3 8-8 8-4 0-8-3-8-7l4-8z"
+        />
+        <path fill="none" d="M220 284v12c0 7 5 12 12 12s12-5 12-12v-12z" />
+        <path fill="#ff9811" d="M200 160h16v32h-16z" />
+        <path fill="#eee" d="M208 224h48v48h-48z" />
+        <path
+          fill="#d80027"
+          d="m248 208-8 8h-64l-8-8c0-13 18-24 40-24s40 11 40 24zm-88 16h48v48h-48z"
+        />
+        <rect
+          width="20"
+          height="32"
+          x="222"
+          y="232"
+          fill="#d80027"
+          rx="10"
+          ry="10"
+        />
+        <path
+          fill="#ff9811"
+          d="M168 232v8h8v16h-8v8h32v-8h-8v-16h8v-8zm8-16h64v8h-64z"
+        />
+        <g fill="#ffda44">
+          <circle cx="186" cy="202" r="6" />
+          <circle cx="208" cy="202" r="6" />
+          <circle cx="230" cy="202" r="6" />
+        </g>
+        <path
+          fill="#d80027"
+          d="M169 272v43a24 24 0 0 0 10 4v-47h-10zm20 0v47a24 24 0 0 0 10-4v-43h-10z"
+        />
+        <g fill="#338af3">
+          <circle cx="208" cy="272" r="16" />
+          <rect width="32" height="16" x="264" y="320" ry="8" />
+          <rect width="32" height="16" x="120" y="320" ry="8" />
+        </g>
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/index.ts

@@ -0,0 +1,8 @@
+import English from './English';
+import French from './French';
+import Japanese from './Japanese';
+import Spanish from './Spanish';
+
+export type { FlagPropTypes } from './Flags.types';
+
+export { English, Spanish, Japanese, French };

package/src/components/I18nManager/I18nManager.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useReducer } from 'react';
 
 /*
  *Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter.
@@ -14,13 +14,12 @@ import React, { useEffect } from 'react';
 import { messages as enMessages } from '../../../../../translations/en';
 import { messages as esMessages } from '../../../../../translations/es';
 import { messages as frMessages } from '../../../../../translations/fr';
-import { messages as jpMessages } from '../../../../../translations/jp';
+import { messages as jaMessages } from '../../../../../translations/ja';
 
-const DEFAULT_LANGUAGE = 'en';
 const messages = {
   en: enMessages,
   es: esMessages,
-  jp: jpMessages,
+  ja: jaMessages,
   fr: frMessages,
 };
 
@@ -28,15 +27,25 @@ i18n.load(messages);
 
 export type Language = keyof typeof messages;
 interface PropTypes {
-  language?: Language;
+  language: Language;
 }
 
 function I18nManager(props: PropsWithChildren<PropTypes>) {
+  const [count, forceUpdate] = useReducer((x) => x + 1, 0);
   useEffect(() => {
-    i18n.activate(props?.language || DEFAULT_LANGUAGE);
-  }, [props?.language]);
-
-  return <I18nProvider i18n={i18n}>{props.children}</I18nProvider>;
+    i18n.on('change', () => {
+      forceUpdate();
+    });
+  }, [i18n]);
+  useEffect(() => {
+    i18n.activate(props.language);
+  }, [props.language]);
+
+  return (
+    <I18nProvider i18n={i18n} key={count}>
+      {props.children}
+    </I18nProvider>
+  );
 }
 
 export { I18nManager };