@rango-dev/ui 0.0.0-experimental-936229e8-20251208

package/src/components/Flags/Italian.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+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/Japanese.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+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/Korea.tsx

@@ -0,0 +1,32 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Korea(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" />
+        <path
+          fill="#333"
+          d="m350 335 24-24 16 16-24 23zm-39 39 24-24 15 16-23 24zm87 8 23-24 16 16-24 24zm-40 39 24-23 16 15-24 24Zm16-63 24-23 15 15-23 24zm-39 40 23-24 16 16-24 23zm63-221-63-63 15-15 64 63zm-63-15-24-24 16-16 23 24zm39 39-24-24 16-15 24 23zm8-87-24-23 16-16 24 24Zm39 40-23-24 15-16 24 24ZM91 358l63 63-16 16-63-63zm63 16 23 24-15 15-24-23zm-40-39 24 23-16 16-23-24zm24-24 63 63-16 16-63-63zm16-220-63 63-16-16 63-63zm23 23-63 63-15-16 63-63zm24 24-63 63-16-16 63-63z"
+        />
+        <path fill="#d80027" d="M319 319 193 193a89 89 0 1 1 126 126z" />
+        <path fill="#0052b4" d="M319 319a89 89 0 1 1-126-126z" />
+        <circle cx="224.5" cy="224.5" r="44.5" fill="#d80027" />
+        <circle cx="287.5" cy="287.5" r="44.5" fill="#0052b4" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Lithuania.tsx

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

package/src/components/Flags/Malay.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+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.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+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/Pakistan.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Pakistan(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.6l50.2 252.5L133.6 512H0z" />
+        <path fill="#496e2d" d="M133.6 0H512v512H133.6z" />
+        <path
+          fill="#eee"
+          d="M365.5 298.3A72.3 72.3 0 1 1 313.7 168a89 89 0 1 0 74.6 103.2 72 72 0 0 1-22.8 27.2zM364 167l18.2 19.6 24.3-11.3-13 23.5 18.2 19.6-26.3-5.1-13 23.4-3.3-26.7-26.1-5 24.4-11.3z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Philippines.tsx

@@ -0,0 +1,30 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Philippines(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 0h512v256l-265 45.2z" />
+        <path fill="#d80027" d="M210 256h302v256H0z" />
+        <path fill="#eee" d="M0 0v512l256-256z" />
+        <path
+          fill="#ffda44"
+          d="M175.3 256 144 241.3l16.7-30.3-34 6.5-4.3-34.3-23.6 25.2L75 183.2l-4.3 34.3-34-6.5 16.7 30.3L22.3 256l31.2 14.7L37 301l34-6.5 4.2 34.3 23.7-25.2 23.6 25.2 4.3-34.3 34 6.5-16.7-30.3zm-107-155.8 10.4 14.5 17-5.4-10.6 14.4 10.4 14.5-17-5.6L68 147l.2-17.9-17-5.6 17-5.4zm0 264.8 10.4 14.6 17-5.4-10.6 14.3 10.4 14.6-17-5.7L68 411.8l.2-17.9-17-5.6 17-5.4zm148.4-132.4L206.3 247l-17-5.4 10.5 14.4-10.4 14.6 17-5.7 10.6 14.4-.1-17.9 17-5.6-17.1-5.4z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Poland.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+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/Portuguese.tsx

@@ -0,0 +1,34 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Portuguese(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="#6da544" d="M0 512h167l37.9-260.3L167 0H0z" />
+        <path fill="#d80027" d="M512 0H167v512h345z" />
+        <circle cx="167" cy="256" r="89" fill="#ffda44" />
+        <path
+          fill="#d80027"
+          d="M116.9 211.5V267a50 50 0 1 0 100.1 0v-55.6H117z"
+        />
+        <path
+          fill="#eee"
+          d="M167 283.8c-9.2 0-16.7-7.5-16.7-16.7V245h33.4v22c0 9.2-7.5 16.7-16.7 16.7z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Russian.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+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/SaudiArabia.tsx

@@ -0,0 +1,29 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function SaudiArabia(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" />
+        <g fill="#eee">
+          <path d="M144.7 306c0 18.5 15 33.5 33.4 33.5h100.2a27.8 27.8 0 0 0 27.8 27.8h33.4a27.8 27.8 0 0 0 27.8-27.8V306zm225.4-161.3v78c0 12.2-10 22.2-22.3 22.2v33.4c30.7 0 55.7-25 55.7-55.7v-77.9H370zm-239.3 78c0 12.2-10 22.2-22.3 22.2v33.4c30.7 0 55.7-25 55.7-55.7v-77.9h-33.4z" />
+          <path d="M320 144.7h33.4v78H320zm-50 44.5a5.6 5.6 0 0 1-11.2 0v-44.5h-33.4v44.5a5.6 5.6 0 0 1-11.1 0v-44.5h-33.4v44.5a39 39 0 0 0 39 39 38.7 38.7 0 0 0 22.2-7 38.7 38.7 0 0 0 22.2 7c1.7 0 3.4-.1 5-.3a22.3 22.3 0 0 1-21.6 17v33.4c30.6 0 55.6-25 55.6-55.7v-77.9H270z" />
+          <path d="M180.9 244.9h50v33.4h-50z" />
+        </g>
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Serbia.tsx

@@ -0,0 +1,41 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Serbia(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 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z"
+        />
+        <path fill="#d80027" d="M0 0h512v167H0z" />
+        <path fill="#eee" d="M0 345h512v167H0z" />
+        <path
+          fill="#d80027"
+          d="M66.2 144.7v127.7c0 72.6 94.9 95 94.9 95s94.9-22.4 94.9-95V144.7z"
+        />
+        <path
+          fill="#ffda44"
+          d="M105.4 167h111.4v-44.6l-22.3 11.2-33.4-33.4-33.4 33.4-22.3-11.2zm128.3 123.2-72.3-72.4L89 290.2l23.7 23.6 48.7-48.7 48.7 48.7z"
+        />
+        <path
+          fill="#eee"
+          d="M233.7 222.6H200a22.1 22.1 0 0 0 3-11.1 22.3 22.3 0 0 0-42-10.5 22.3 22.3 0 0 0-41.9 10.5 22.1 22.1 0 0 0 3 11.1H89a23 23 0 0 0 23 22.3h-.7c0 12.3 10 22.2 22.3 22.2 0 11 7.8 20 18.1 21.9l-17.5 39.6a72.1 72.1 0 0 0 27.2 5.3 72.1 72.1 0 0 0 27.2-5.3L171.1 289c10.3-2 18.1-11 18.1-21.9 12.3 0 22.3-10 22.3-22.2h-.8a23 23 0 0 0 23-22.3z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Slovakia.tsx

@@ -0,0 +1,42 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Slovakia(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 160 256-32 256 32v192l-256 32L0 352z" />
+        <path fill="#eee" d="M0 0h512v160H0z" />
+        <path fill="#d80027" d="M0 352h512v160H0z" />
+        <path
+          fill="#eee"
+          d="M64 63v217c0 104 144 137 144 137s144-33 144-137V63z"
+        />
+        <path
+          fill="#d80027"
+          d="M96 95v185a83 78 0 0 0 9 34h206a83 77 0 0 0 9-34V95z"
+        />
+        <path
+          fill="#eee"
+          d="M288 224h-64v-32h32v-32h-32v-32h-32v32h-32v32h32v32h-64v32h64v32h32v-32h64z"
+        />
+        <path
+          fill="#0052b4"
+          d="M152 359a247 231 0 0 0 56 24c12-3 34-11 56-24a123 115 0 0 0 47-45 60 56 0 0 0-34-10l-14 2a60 56 0 0 0-110 0 60 56 0 0 0-14-2c-12 0-24 4-34 10a123 115 0 0 0 47 45z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/SouthAfrica.tsx

@@ -0,0 +1,35 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function SouthAfrica(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 192 256L0 512h47l465-189v-34l-32-33 32-33v-34L47 0Z"
+        />
+        <path fill="#333" d="M0 142v228l140-114z" />
+        <path fill="#ffda44" d="M192 256 0 95v47l114 114L0 370v47z" />
+        <path
+          fill="#6da544"
+          d="M512 223H223L0 0v94l161 162L0 418v94l223-223h289z"
+        />
+        <path fill="#d80027" d="M512 0H47l189 189h276z" />
+        <path fill="#0052b4" d="M512 512H47l189-189h276z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Spanish.tsx

@@ -0,0 +1,85 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+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/Swahili.tsx

@@ -0,0 +1,46 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Swahili(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 144.7 253.4-28.2L512 144.7V178l-36 76.4 36 79.6v33.3L254.7 400 0 367.3V334l39-78-39-78z"
+        />
+        <path fill="#333" d="M0 0h512v144.7H0z" />
+        <path fill="#a2001d" d="M0 178h512v156H0z" />
+        <path fill="#496e2d" d="M0 367.3h512V512H0z" />
+        <path
+          fill="#eee"
+          d="m335.9 118.3-30.3-14-49.4 111.9-49.4-111.9-30.3 14L237.8 256l-61.3 137.7 30.3 14 49.4-111.9 49.4 111.9 30.3-14L274.6 256z"
+        />
+        <path
+          fill="#eee"
+          d="M256.2 111.3s-7 5.8-16.7 16l-16 127.6 16 129.8c9.7 10.2 16.7 16 16.7 16s7-5.8 16.7-16l15-130.7-15-126.7c-9.7-10.2-16.7-16-16.7-16z"
+        />
+        <path
+          fill="#333"
+          d="m311.9 179.2-10 75.5 10 78.1A158.6 158.6 0 0 0 334 256c0-28.2-9.7-54.5-22.2-76.8zm-111.4 0 8.9 74.3-9 79.3a158.6 158.6 0 0 1-22.1-76.8c0-28.2 9.7-54.5 22.2-76.8z"
+        />
+        <path
+          fill="#a2001d"
+          d="M200.5 179.2v153.6a269 269 0 0 0 39 51.9V127.3c-11.4 12-26.6 30-39 52zm111.4 0a269 269 0 0 0-39-51.9v257.4c11.4-12 26.5-30 39-52V179.3z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Swedish.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+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>
+  );
+}