@rango-dev/ui 0.29.1-next.9 → 0.30.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Font.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Font.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,4DAmB/C;AACD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Font.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Font.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,4DAuB/C;AACD,eAAe,OAAO,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Language.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Language.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,4DA+CnD;AACD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Language.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Language.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,4DAmDnD;AACD,eAAe,WAAW,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Widget.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,4DAgBjD;AACD,eAAe,SAAS,CAAC"}

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

@@ -66,6 +66,7 @@ export { default as TuneIcon } from './Tune';
 export { default as UtxoCategoryIcon } from './UtxoCategory';
 export { default as WalletIcon } from './Wallet';
 export { default as WarningIcon } from './Warning';
+export { default as WidgetIcon } from './Widget';
 export { default as WidthIcon } from './Width';
 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.9",
+  "version": "0.30.0",
   "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.1-next.1",
+    "@rango-dev/wallets-shared": "^0.29.0",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.45",
     "rango-types": "^0.1.59",
@@ -70,4 +70,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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

@@ -15,6 +15,7 @@ export const DividerContainer = styled('div', {
       24: {},
       30: {},
       32: {},
+      40: {},
     },
     direction: {
       vertical: {},
@@ -176,5 +177,12 @@ export const DividerContainer = styled('div', {
         height: '$32',
       },
     },
+    {
+      size: 40,
+      direction: 'vertical',
+      css: {
+        height: '$40',
+      },
+    },
   ],
 });

package/src/components/Flags/Bengali.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Bengali(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="#496e2d" d="M0 0h512v512H0z" />
+        <circle cx={200.3} cy={256} r={111.3} fill="#d80027" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Chinese.tsx

@@ -0,0 +1,28 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Chinese(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="#d80027" d="M0 0h512v512H0z" />
+        <path
+          fill="#ffda44"
+          d="m140.1 155.8 22.1 68h71.5l-57.8 42.1 22.1 68-57.9-42-57.9 42 22.2-68-57.9-42.1H118zm163.4 240.7-16.9-20.8-25 9.7 14.5-22.5-16.9-20.9 25.9 6.9 14.6-22.5 1.4 26.8 26 6.9-25.1 9.6zm33.6-61 8-25.6-21.9-15.5 26.8-.4 7.9-25.6 8.7 25.4 26.8-.3-21.5 16 8.6 25.4-21.9-15.5zm45.3-147.6L370.6 212l19.2 18.7-26.5-3.8-11.8 24-4.6-26.4-26.6-3.8 23.8-12.5-4.6-26.5 19.2 18.7zm-78.2-73-2 26.7 24.9 10.1-26.1 6.4-1.9 26.8-14.1-22.8-26.1 6.4 17.3-20.5-14.2-22.7 24.9 10.1z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Finland.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Finland(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 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"
+        />
+        <path
+          fill="#0052b4"
+          d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0h-66.7z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/German.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function German(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 345 256.7-25.5L512 345v167H0z" />
+        <path fill="#d80027" d="m0 167 255-23 257 23v178H0z" />
+        <path fill="#333" d="M0 0h512v167H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Greece.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Greece(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="#0052b4"
+          d="M0 0h99l29 32 28-32h356v57l-32 28 32 29v57l-32 28 32 29v57l-32 28 32 28v57l-32 29 32 28v57H0v-57l32-28-32-29v-56l32-29-32-28V171l32-29-32-28Z"
+        />
+        <path
+          fill="#eee"
+          d="M99 0v114H0v57h99v114H0v57h512v-57H156V171h100v-57H156V0Zm157 57v57h256V57Zm0 114v57h256v-57ZM0 398v57h512v-57z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Hindi.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Hindi(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 160 256-32 256 32v192l-256 32L0 352z" />
+        <path fill="#ff9811" d="M0 0h512v160H0Z" />
+        <path fill="#6da544" d="M0 352h512v160H0Z" />
+        <circle cx={256} cy={256} r={72} fill="#0052b4" />
+        <circle cx={256} cy={256} r={48} fill="#eee" />
+        <circle cx={256} cy={256} r={24} fill="#0052b4" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Indonesian.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Indonesian(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 256 249.6-41.3L512 256v256H0z" />
+        <path fill="#a2001d" d="M0 0h512v256H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Italian.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Italian(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="#6da544" d="M0 0h167v512H0z" />
+        <path fill="#d80027" d="M345 0h167v512H345z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Malay.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Malay(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 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z"
+        />
+        <path fill="#d80027" d="M0 0h512v167H0z" />
+        <path fill="#338af3" d="M0 345h512v167H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Netherlands.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Netherlands(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 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z"
+        />
+        <path fill="#a2001d" d="M0 0h512v167H0z" />
+        <path fill="#0052b4" d="M0 345h512v167H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Poland.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Poland(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="#d80027" d="m0 256 256.4-44.3L512 256v256H0z" />
+        <path fill="#eee" d="M0 0h512v256H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Russian.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Russian(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="#0052b4" d="M512 170v172l-256 32L0 342V170l256-32z" />
+        <path fill="#eee" d="M512 0v170H0V0Z" />
+        <path fill="#d80027" d="M512 342v170H0V342Z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Swedish.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Swedish(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="#0052b4"
+          d="M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"
+        />
+        <path
+          fill="#ffda44"
+          d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Thai.tsx

@@ -0,0 +1,32 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Thai(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="#d80027"
+          d="M0 0h512v89l-79.2 163.7L512 423v89H0v-89l82.7-169.6L0 89z"
+        />
+        <path
+          fill="#eee"
+          d="M0 89h512v78l-42.6 91.2L512 345v78H0v-78l40-92.5L0 167z"
+        />
+        <path fill="#0052b4" d="M0 167h512v178H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Turkish.tsx

@@ -0,0 +1,28 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Turkish(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="#d80027" d="M0 0h512v512H0z" />
+        <g fill="#eee">
+          <path d="m245.5 209.2 21 29 34-11.1-21 29 21 28.9-34-11.1-21 29V267l-34-11.1 34-11z" />
+          <path d="M188.2 328.3a72.3 72.3 0 1 1 34.4-136 89 89 0 1 0 0 127.3 72 72 0 0 1-34.4 8.7z" />
+        </g>
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Ukrainian.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Ukrainian(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 256 258-39.4L512 256v256H0z" />
+        <path fill="#338af3" d="M0 0h512v256H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Vietnamese.tsx

@@ -0,0 +1,28 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Vietnamese(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="#d80027" d="M0 0h512v512H0z" />
+        <path
+          fill="#ffda44"
+          d="m256 133.6 27.6 85H373L300.7 271l27.6 85-72.3-52.5-72.3 52.6 27.6-85-72.3-52.6h89.4z"
+        />
+      </g>
+    </svg>
+  );
+}