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

package/dist/widget/ui/src/theme.d.ts

@@ -2,8 +2,10 @@
 import type { DefaultThemeMap } from '@stitches/react/types/config';
 export declare const theme: {
     colors: {
+        primary: string;
         primary500: string;
         primary600: string;
+        secondary: string;
         secondary100: string;
         secondary200: string;
         secondary300: string;
@@ -13,6 +15,7 @@ export declare const theme: {
         secondary700: string;
         secondary800: string;
         secondary900: string;
+        neutral: string;
         neutral100: string;
         neutral200: string;
         neutral300: string;
@@ -32,6 +35,7 @@ export declare const theme: {
         warning500: string;
         warning600: string;
         warning700: string;
+        info: string;
         info100: string;
         info300: string;
         info500: string;
@@ -145,6 +149,26 @@ export declare const theme: {
     zIndices: {};
     transitions: {};
 };
+export declare const darkColors: {
+    secondary: string;
+    secondary400: string;
+    secondary500: string;
+    secondary600: string;
+    neutral: string;
+    neutral900: string;
+    neutral800: string;
+    neutral700: string;
+    neutral600: string;
+    neutral500: string;
+    neutral400: string;
+    neutral300: string;
+    neutral200: string;
+    neutral100: string;
+    error500: string;
+    warning500: string;
+    background: string;
+    foreground: string;
+};
 export declare const styled: <Type extends import("react").ComponentType<any> | import("@stitches/react/types/util").Function | keyof JSX.IntrinsicElements, Composers extends (string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function | {
     [name: string]: unknown;
 })[], CSS = import("@stitches/react/types/css-util").CSS<{
@@ -153,8 +177,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     lg: string;
 }, {
     colors: {
+        primary: string;
         primary500: string;
         primary600: string;
+        secondary: string;
         secondary100: string;
         secondary200: string;
         secondary300: string;
@@ -164,6 +190,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         secondary700: string;
         secondary800: string;
         secondary900: string;
+        neutral: string;
         neutral100: string;
         neutral200: string;
         neutral300: string;
@@ -183,6 +210,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         warning500: string;
         warning600: string;
         warning700: string;
+        info: string;
         info100: string;
         info300: string;
         info500: string;
@@ -316,8 +344,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     lg: string;
 }, {
     colors: {
+        primary: string;
         primary500: string;
         primary600: string;
+        secondary: string;
         secondary100: string;
         secondary200: string;
         secondary300: string;
@@ -327,6 +357,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         secondary700: string;
         secondary800: string;
         secondary900: string;
+        neutral: string;
         neutral100: string;
         neutral200: string;
         neutral300: string;
@@ -346,6 +377,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         warning500: string;
         warning600: string;
         warning700: string;
+        info: string;
         info100: string;
         info300: string;
         info500: string;
@@ -466,8 +498,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     lg: string;
 }, {
     colors: {
+        primary: string;
         primary500: string;
         primary600: string;
+        secondary: string;
         secondary100: string;
         secondary200: string;
         secondary300: string;
@@ -477,6 +511,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         secondary700: string;
         secondary800: string;
         secondary900: string;
+        neutral: string;
         neutral100: string;
         neutral200: string;
         neutral300: string;
@@ -496,6 +531,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         warning500: string;
         warning600: string;
         warning700: string;
+        info: string;
         info100: string;
         info300: string;
         info500: string;
@@ -625,8 +661,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     lg: string;
 }, CSS>, createTheme: <Argument0 extends string | ({
     colors?: {
+        primary?: string | number | boolean | undefined;
         primary500?: string | number | boolean | undefined;
         primary600?: string | number | boolean | undefined;
+        secondary?: string | number | boolean | undefined;
         secondary100?: string | number | boolean | undefined;
         secondary200?: string | number | boolean | undefined;
         secondary300?: string | number | boolean | undefined;
@@ -636,6 +674,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         secondary700?: string | number | boolean | undefined;
         secondary800?: string | number | boolean | undefined;
         secondary900?: string | number | boolean | undefined;
+        neutral?: string | number | boolean | undefined;
         neutral100?: string | number | boolean | undefined;
         neutral200?: string | number | boolean | undefined;
         neutral300?: string | number | boolean | undefined;
@@ -655,6 +694,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         warning500?: string | number | boolean | undefined;
         warning600?: string | number | boolean | undefined;
         warning700?: string | number | boolean | undefined;
+        info?: string | number | boolean | undefined;
         info100?: string | number | boolean | undefined;
         info300?: string | number | boolean | undefined;
         info500?: string | number | boolean | undefined;
@@ -774,8 +814,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     };
 }), Argument1 extends string | ({
     colors?: {
+        primary?: string | number | boolean | undefined;
         primary500?: string | number | boolean | undefined;
         primary600?: string | number | boolean | undefined;
+        secondary?: string | number | boolean | undefined;
         secondary100?: string | number | boolean | undefined;
         secondary200?: string | number | boolean | undefined;
         secondary300?: string | number | boolean | undefined;
@@ -785,6 +827,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         secondary700?: string | number | boolean | undefined;
         secondary800?: string | number | boolean | undefined;
         secondary900?: string | number | boolean | undefined;
+        neutral?: string | number | boolean | undefined;
         neutral100?: string | number | boolean | undefined;
         neutral200?: string | number | boolean | undefined;
         neutral300?: string | number | boolean | undefined;
@@ -804,6 +847,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         warning500?: string | number | boolean | undefined;
         warning600?: string | number | boolean | undefined;
         warning700?: string | number | boolean | undefined;
+        info?: string | number | boolean | undefined;
         info100?: string | number | boolean | undefined;
         info300?: string | number | boolean | undefined;
         info500?: string | number | boolean | undefined;
@@ -931,8 +975,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         lg: string;
     }, {
         colors: {
+            primary: string;
             primary500: string;
             primary600: string;
+            secondary: string;
             secondary100: string;
             secondary200: string;
             secondary300: string;
@@ -942,6 +988,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             secondary700: string;
             secondary800: string;
             secondary900: string;
+            neutral: string;
             neutral100: string;
             neutral200: string;
             neutral300: string;
@@ -961,6 +1008,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             warning500: string;
             warning600: string;
             warning700: string;
+            info: string;
             info100: string;
             info300: string;
             info500: string;
@@ -1089,8 +1137,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         lg: string;
     }, {
         colors: {
+            primary: string;
             primary500: string;
             primary600: string;
+            secondary: string;
             secondary100: string;
             secondary200: string;
             secondary300: string;
@@ -1100,6 +1150,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             secondary700: string;
             secondary800: string;
             secondary900: string;
+            neutral: string;
             neutral100: string;
             neutral200: string;
             neutral300: string;
@@ -1119,6 +1170,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             warning500: string;
             warning600: string;
             warning700: string;
+            info: string;
             info100: string;
             info300: string;
             info500: string;
@@ -1238,8 +1290,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     lg: string;
 }, {
     colors: {
+        primary: string;
         primary500: string;
         primary600: string;
+        secondary: string;
         secondary100: string;
         secondary200: string;
         secondary300: string;
@@ -1249,6 +1303,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         secondary700: string;
         secondary800: string;
         secondary900: string;
+        neutral: string;
         neutral100: string;
         neutral200: string;
         neutral300: string;
@@ -1268,6 +1323,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         warning500: string;
         warning600: string;
         warning700: string;
+        info: string;
         info100: string;
         info300: string;
         info500: string;
@@ -1389,8 +1445,10 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     };
     theme: {
         colors: {
+            primary: string;
             primary500: string;
             primary600: string;
+            secondary: string;
             secondary100: string;
             secondary200: string;
             secondary300: string;
@@ -1400,6 +1458,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             secondary700: string;
             secondary800: string;
             secondary900: string;
+            neutral: string;
             neutral100: string;
             neutral200: string;
             neutral300: string;
@@ -1419,6 +1478,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             warning500: string;
             warning600: string;
             warning700: string;
+            info: string;
             info100: string;
             info300: string;
             info500: string;
@@ -1544,9 +1604,11 @@ export declare const darkTheme: string & {
     selector: string;
 } & import("@stitches/react/types/stitches").ThemeTokens<{
     colors: {
+        secondary: string;
         secondary400: string;
         secondary500: string;
         secondary600: string;
+        neutral: string;
         neutral900: string;
         neutral800: string;
         neutral700: string;

package/dist/widget/ui/src/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAMpE,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JjB,CAAC;AAgBF,eAAO,MAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4KAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjE,CAAC;AAEL,eAAO,MAAM,UAAU;;;gEAAkB,CAAC;AAE1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;MA0BpB,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAMpE,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JjB,CAAC;AAYF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;CAuBtB,CAAC;AAMF,eAAO,MAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4KAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjE,CAAC;AAEL,eAAO,MAAM,UAAU;;;gEAAoC,CAAC;AAE5D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;MAKpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.17.1-next.1",
+  "version": "0.17.1-next.11",
   "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,19 +59,15 @@
     "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.0",
+    "@rango-dev/wallets-shared": "^0.17.1-next.0",
     "@stitches/react": "^1.2.8",
-    "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.35",
-    "react-color": "^2.19.3",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
     "react-window-infinite-loader": "^1.0.8",

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.styles.ts

@@ -1,6 +1,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 
 import { darkTheme, styled } from '../../theme';
+import { Image } from '../common';
 import { CollapsibleContent } from '../common/styles';
 
 export const EXPANDABLE_ROUTES_TRANSITION_DURATION = 300;

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 };