@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-filter-item/sui-filter-item.js

@@ -0,0 +1,201 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-filter-item>` — Fila del panel vertical de filtros (una categoría: «Estado», «Local»).
+ *
+ * Fila individual del panel vertical: padding-8, gap-8, radius-8, overflow-clip,
+ * items-center. States via `[data-sui-state]` default/active (+ hover/focus via
+ * CSS). Active → chevron (arrow-right-s-line) a la derecha + leftIcon primary-base
+ * (naranja brand del DS, #fa7319, NO el azul de Figma).
+ *
+ * Portado 1:1 desde la familia Angular homologada
+ * (`sui-filter/` del SUI Angular). Reusa el primitivo
+ * `<sui-icon>` ya portado.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node VerticalFilterItems 4379:1183.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio. Misma estrategia que el resto del DS.
+ *
+ * GOTCHA Stencil: el iOS WKWebView :active fix vive en el host (touchstart/
+ * touchend via @Listen). Sin esto el :active queda stuck 300-500ms en pages
+ * standalone — la presencia del binding engage el touch pipeline.
+ */
+export class SuiFilterItem {
+    constructor() {
+        /** Fila seleccionada/activa. Default `false`. */
+        this.active = false;
+        /** Deshabilita la fila (sale del tab order, no emite). Default `false`. */
+        this.disabled = false;
+        /** Icono opcional a la izquierda del label (20x20). `null` = sin icono. */
+        this.leftIcon = null;
+        /** Icono que aparece a la derecha cuando está active. Override del default. */
+        this.activeIcon = 'arrow-right-s-line';
+        this.onActivate = (event) => {
+            if (this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.selected.emit(event);
+        };
+        this.onKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                this.onActivate(event);
+            }
+            else if (event.key === ' ' || event.key === 'Spacebar') {
+                this.onActivate(event);
+                event.preventDefault();
+            }
+        };
+    }
+    /** Estado derivado: `active` cuando active=true, sino `default`. */
+    get state() {
+        return this.active ? 'active' : 'default';
+    }
+    /* iOS WKWebView :active fix — sin esto el :active queda stuck 300-500ms en
+       pages standalone. La presencia del binding engage el touch pipeline. */
+    onTouchStart() {
+        /* no-op a propósito. */
+    }
+    onTouchEnd() {
+        this.el.blur();
+    }
+    render() {
+        return (h(Host, { key: '538d53e868a13e4712b441931bef52f025c5024a', "data-sui-state": this.state, "data-sui-disabled": this.disabled ? '' : undefined, role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.active ? 'true' : 'false', onClick: this.onActivate, onKeyDown: this.onKeyDown }, this.leftIcon && (h("sui-icon", { key: 'b78c0331f938c2ca9ab386aaf4ebc6775d61cd0c', name: this.leftIcon, size: 20, class: "sui-filter-item__icon sui-filter-item__icon--left" })), h("span", { key: 'a0995a955e82a0e607f9adec0cbb05d92d4c0924', class: "sui-filter-item__label" }, h("slot", { key: '75aff36c8801e2755ec1e93805b3f926f757cb84' })), this.active && (h("sui-icon", { key: '30a9179149455e37338d93fa6ef73227c3b2b1f1', name: this.activeIcon, size: 20, class: "sui-filter-item__icon sui-filter-item__icon--active" }))));
+    }
+    static get is() { return "sui-filter-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-filter-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-filter-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fila seleccionada/activa. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita la fila (sale del tab order, no emite). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "leftIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icono opcional a la izquierda del label (20x20). `null` = sin icono."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-icon",
+                "defaultValue": "null"
+            },
+            "activeIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icono que aparece a la derecha cuando est\u00E1 active. Override del default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-icon",
+                "defaultValue": "'arrow-right-s-line'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selected",
+                "name": "selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite al seleccionar (click / Enter / Space) cuando NO est\u00E1 disabled."
+                },
+                "complexType": {
+                    "original": "globalThis.Event",
+                    "resolved": "Event",
+                    "references": {
+                        "globalThis": {
+                            "location": "global",
+                            "id": "global::globalThis"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/sui-filter-panel-footer/sui-filter-panel-footer.css

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+/* ═══════════════════════════════════════════════════════════════════════
+ *  SUI Filter Panel Footer — SUI 2.0 "Filters" / VerticalFilterFooter
+ *  Figma 8p1k72aKKvzJV4XcvPS4VO — node 4415:858 (VerticalFilterFooter)
+ *  + Actions wrapper 4415:857 (verificado vía Figma MCP get_design_context).
+ *
+ *  Anatomy (EXACT, del nodo Figma):
+ *    padding        16px 20px            (px-20 py-16)
+ *    border-top     1px solid stroke/soft-200
+ *    overflow       hidden               (overflow-clip del contenedor)
+ *    Actions wrap   gap 12px             (Figma 4415:857 dice 16; canon de la app = 12)
+ *    botones        2 full-width lado a lado (Clear stroke + Apply filled primary)
+ * ═════════════════════════════════════════════════════════════════════ */
+:host {
+  display: flex;
+  align-items: center;
+  /* gap 12: canon de la app para todo grupo de botones (lo legisla
+     sui-modal-footer; master-pedidos CLAUDE.md «Botones», 2026-07-27). El
+     Figma del nodo 4415:857 dice 16; hallazgo de organismos 03-10-2026. */
+  gap: 12px;
+  width: 100%; /* Figma w-472px → fluido */
+  padding: 16px 20px;
+  border-top: 1px solid var(--sui-stroke-soft-200);
+  background: var(--sui-bg-white-0);
+  /* overflow-clip del contenedor en Figma (node 4415:858). */
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* Cada botón ocupa 50% — sui-button es inline-flex, lo forzamos a flex:1
+   con display:flex y justify-content center para que el label quede centrado. */
+.sui-filter-panel-footer__btn {
+  flex: 1 1 0;
+  display: flex !important;
+  justify-content: center;
+}

package/dist/collection/components/sui-filter-panel-footer/sui-filter-panel-footer.js

@@ -0,0 +1,171 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-filter-panel-footer>` — Pie del panel de filtros con «Limpiar» y «Aplicar».
+ *
+ * Footer del panel vertical: padding 16 20, border-top soft-200, gap 12 entre
+ * 2 botones mitad y mitad: «Limpiar» (stroke neutral) a la izquierda y «Aplicar»
+ * (filled primary) a la derecha — orden canon de sui-modal-footer.
+ *
+ * Portado 1:1 desde el SUI Angular (`sui-design-system/.../sui-filter`). API
+ * alineada el 05-11-2026: `clearButton` / `applyButton` (string o
+ * `SuiFooterButtonConfig`) reemplazan `clearLabel`/`applyLabel`/`clearDisabled`/
+ * `applyDisabled`; `size` default `medium` (40, web) y `large` (48) para el teléfono.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node VerticalFilterFooter 4415:858
+ * (Figma dice gap 16; el canon de la app para grupos de botones es 12).
+ *
+ * `scoped: true` (light DOM, NO shadow): misma estrategia que el resto del DS.
+ */
+export class SuiFilterPanelFooter {
+    constructor() {
+        /** Botón «Limpiar» (stroke neutral): string (label) o `SuiFooterButtonConfig`. Default «Limpiar». */
+        this.clearButton = null;
+        /** Botón «Aplicar» (filled primary): string (label) o `SuiFooterButtonConfig`. Default «Aplicar». */
+        this.applyButton = null;
+        /**
+         * Tamaño de los botones. Default `medium` (40, la computadora). `large` (48)
+         * para el teléfono y la tablet táctil. `small` (36, el que dibuja Figma) queda
+         * por compatibilidad.
+         */
+        this.size = 'medium';
+    }
+    cfg(b, fallback) {
+        const v = b !== null && b !== void 0 ? b : fallback;
+        return typeof v === 'string' ? { label: v } : v;
+    }
+    render() {
+        var _a, _b;
+        const clear = this.cfg(this.clearButton, 'Limpiar');
+        const apply = this.cfg(this.applyButton, 'Aplicar');
+        return (h(Host, { key: '38902296514bcf3b876c66df0b4917823d585bc8' }, h("sui-button", { key: '74ac5239ed951af0f4a5f52cc00c0fd3ec1de8c9', class: "sui-filter-panel-footer__btn", variant: "stroke", color: "neutral", size: this.size, disabled: (_a = clear.disabled) !== null && _a !== void 0 ? _a : false, onClick: () => !clear.disabled && this.clear.emit() }, clear.label), h("sui-button", { key: 'acb27b9f85ba5040fbb565078272136faac3e6a3', class: "sui-filter-panel-footer__btn", variant: "filled", color: "primary", size: this.size, disabled: (_b = apply.disabled) !== null && _b !== void 0 ? _b : false, onClick: () => !apply.disabled && this.apply.emit() }, apply.label)));
+    }
+    static get is() { return "sui-filter-panel-footer"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-filter-panel-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-filter-panel-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clearButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFooterButtonConfig | string | null",
+                    "resolved": "SuiFooterButtonConfig | null | string",
+                    "references": {
+                        "SuiFooterButtonConfig": {
+                            "location": "import",
+                            "path": "../sui-button/sui-button",
+                            "id": "src/components/sui-button/sui-button.tsx::SuiFooterButtonConfig",
+                            "referenceLocation": "SuiFooterButtonConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bot\u00F3n \u00ABLimpiar\u00BB (stroke neutral): string (label) o `SuiFooterButtonConfig`. Default \u00ABLimpiar\u00BB."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-button",
+                "defaultValue": "null"
+            },
+            "applyButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFooterButtonConfig | string | null",
+                    "resolved": "SuiFooterButtonConfig | null | string",
+                    "references": {
+                        "SuiFooterButtonConfig": {
+                            "location": "import",
+                            "path": "../sui-button/sui-button",
+                            "id": "src/components/sui-button/sui-button.tsx::SuiFooterButtonConfig",
+                            "referenceLocation": "SuiFooterButtonConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bot\u00F3n \u00ABAplicar\u00BB (filled primary): string (label) o `SuiFooterButtonConfig`. Default \u00ABAplicar\u00BB."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "apply-button",
+                "defaultValue": "null"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFilterPanelFooterSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "SuiFilterPanelFooterSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-filter-panel-footer/sui-filter-panel-footer.tsx",
+                            "id": "src/components/sui-filter-panel-footer/sui-filter-panel-footer.tsx::SuiFilterPanelFooterSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o de los botones. Default `medium` (40, la computadora). `large` (48)\npara el tel\u00E9fono y la tablet t\u00E1ctil. `small` (36, el que dibuja Figma) queda\npor compatibilidad."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clear",
+                "name": "clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en \u00ABLimpiar\u00BB (si no est\u00E1 disabled)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "apply",
+                "name": "apply",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en \u00ABAplicar\u00BB (si no est\u00E1 disabled)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/sui-filter-panel-header/sui-filter-panel-header.css

@@ -0,0 +1,46 @@
+@charset "UTF-8";
+/* ════════════════════════════════════════════════════════════════════════
+ *  sui-filter-panel-header — SUI Design System 2.0 "Filters" / VerticalFilterHeader
+ *  Figma 8p1k72aKKvzJV4XcvPS4VO — node 4379:2209.
+ *
+ *  Anatomy (EXACT): padding 16 20, border-bottom soft-200, overflow clip,
+ *  label text/strong-950 Inter Medium 14/20, clear link a la derecha (ml auto).
+ *  `scoped: true` → :host = el host <sui-filter-panel-header>.
+ * ════════════════════════════════════════════════════════════════════════ */
+:host {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%; /* Figma w-400px → fluido */
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--sui-stroke-soft-200);
+  background: var(--sui-bg-white-0);
+  /* overflow-clip del contenedor en Figma (node 4379:2208). */
+  overflow: hidden;
+  box-sizing: border-box;
+  font-family: var(--sui-font-sans, "Inter", system-ui, sans-serif);
+}
+
+.sui-filter-panel-header__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--sui-icon-sub-600);
+}
+
+.sui-filter-panel-header__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.084px; /* Figma -0.6% @ 14px */
+  color: var(--sui-text-strong-950);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sui-filter-panel-header__clear {
+  flex-shrink: 0;
+  margin-left: auto;
+}

package/dist/collection/components/sui-filter-panel-header/sui-filter-panel-header.js

@@ -0,0 +1,143 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-filter-panel-header>` — Encabezado del panel de filtros con título y link «Limpiar» opcional.
+ *
+ * Header del panel vertical: padding 16 20, border-bottom soft-200, label Inter
+ * Medium 14/20 strong-950, leftIcon opcional (icon/sub-600), link «Limpiar»
+ * opcional (link-button gray). API alineada al SUI Angular (05-11-2026): `clear`
+ * (boolean | string) + evento `clearClick` reemplazan `clearable`/`clearLabel`/`clear`.
+ *
+ * Portado 1:1 desde la familia Angular homologada
+ * (`sui-filter/` del SUI Angular). Reusa los
+ * primitivos `<sui-icon>` / `<sui-link-button>` ya portados. El accent del DS es
+ * NARANJA brand (#fa7319 / --sui-primary-base), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node VerticalFilterHeader 4379:2209.
+ *
+ * `scoped: true` (light DOM, NO shadow): misma estrategia que el resto del DS.
+ */
+export class SuiFilterPanelHeader {
+    constructor() {
+        /** Texto del header. */
+        this.label = '';
+        /** Icono opcional a la izquierda del label (20x20). `null` = sin icono. */
+        this.leftIcon = null;
+        /**
+         * Link de limpieza a la derecha: `true` = label default «Limpiar», string =
+         * label custom, `false` (default) o '' = oculto. Como atributo: `clear="true"`
+         * muestra «Limpiar» y `clear="Borrar"` cambia el label. Ojo: `clear` sin valor
+         * llega como '' y queda oculto (misma regla que el SUI Angular).
+         */
+        this.clear = false;
+    }
+    /** Label resuelto del link (null = oculto). */
+    get clearLabel() {
+        const c = this.clear;
+        if (c === true || c === 'true')
+            return 'Limpiar';
+        return typeof c === 'string' && c && c !== 'false' ? c : null;
+    }
+    /** Strip del `title` nativo (evita el tooltip gris del browser). `title={undefined}` en el Host no lo saca. */
+    componentDidRender() {
+        this.el.removeAttribute('title');
+    }
+    render() {
+        const clearLabel = this.clearLabel;
+        return (h(Host, { key: 'd3fac12fffa352e5e2e1bc1c80ad33e5c075660f' }, this.leftIcon && (h("sui-icon", { key: '94650516c59705eb6fbcef0ca9f433357b6da122', name: this.leftIcon, size: 20, class: "sui-filter-panel-header__icon" })), h("span", { key: 'b7aa033e93b380e0fba447e49a475d83123cf1b7', class: "sui-filter-panel-header__label" }, this.label), clearLabel && (h("sui-link-button", { key: '2c1d1d842de5749294098ee4602a1f040c597eff', class: "sui-filter-panel-header__clear", variant: "gray", size: "small", underline: true, onClicked: () => this.clearClick.emit() }, clearLabel))));
+    }
+    static get is() { return "sui-filter-panel-header"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-filter-panel-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-filter-panel-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "leftIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icono opcional a la izquierda del label (20x20). `null` = sin icono."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-icon",
+                "defaultValue": "null"
+            },
+            "clear": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link de limpieza a la derecha: `true` = label default \u00ABLimpiar\u00BB, string =\nlabel custom, `false` (default) o '' = oculto. Como atributo: `clear=\"true\"`\nmuestra \u00ABLimpiar\u00BB y `clear=\"Borrar\"` cambia el label. Ojo: `clear` sin valor\nllega como '' y queda oculto (misma regla que el SUI Angular)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clearClick",
+                "name": "clearClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en el link de limpieza. (Renombrado de `clear` como en el SUI Angular:\nel nombre lo tom\u00F3 la prop consolidada; prop y evento no pueden compartirlo.)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/sui-flag/assets/flags/abkhazia.svg

@@ -0,0 +1,23 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_253_6167)">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F0F0"/>
+<path d="M20.3971 3.42862C18.2327 1.308 15.2694 0 12 0C10.9565 0 7.9034 1.308 5.73914 3.42862H20.3971Z" fill="#6DA544"/>
+<path d="M12 10.2858H23.8776C23.7044 9.07521 23.3508 7.92302 22.8445 6.85718H11.4783L12 10.2858Z" fill="#6DA544"/>
+<path d="M1.15551 17.143H22.8445C23.3508 16.0772 23.7044 14.9249 23.8776 13.7144H0.122437C0.29564 14.9249 0.649124 16.0772 1.15551 17.143Z" fill="#6DA544"/>
+<path d="M3.60291 20.5713C5.76726 22.6919 8.73061 23.9999 12 23.9999C15.2694 23.9999 18.2327 22.6919 20.3971 20.5713H3.60291Z" fill="#6DA544"/>
+<path d="M12 0C5.95472 0 0.954374 4.47052 0.122437 10.2857H12V0Z" fill="#D80027"/>
+<path d="M5.99999 9.20001L5.47827 8.15658V6.06961L6.78262 5.02612L8.08696 6.06961V7.63481L8.60868 7.11309V8.15658L7.56519 9.20001H5.99999Z" fill="#F0F0F0"/>
+<path d="M3.19378 6L3.33192 6.42516H3.77892L3.41728 6.68798L3.55547 7.11309L3.19378 6.85031L2.8321 7.11309L2.97028 6.68798L2.60864 6.42516H3.05564L3.19378 6Z" fill="#F0F0F0"/>
+<path d="M4.23724 4.95654L4.37538 5.3817H4.82243L4.46074 5.64453L4.59888 6.06964L4.23724 5.8069L3.8756 6.06964L4.01379 5.64453L3.6521 5.3817H4.09905L4.23724 4.95654Z" fill="#F0F0F0"/>
+<path d="M5.2807 3.91309L5.41884 4.33824H5.86579L5.5042 4.60107L5.64229 5.02618L5.2807 4.76345L4.91901 5.02618L5.05715 4.60107L4.69556 4.33824H5.14251L5.2807 3.91309Z" fill="#F0F0F0"/>
+<path d="M10.3713 6L10.2332 6.42516H9.78625L10.1478 6.68798L10.0097 7.11309L10.3713 6.85031L10.733 7.11309L10.5949 6.68798L10.9565 6.42516H10.5095L10.3713 6Z" fill="#F0F0F0"/>
+<path d="M9.32789 4.95654L9.18975 5.3817H8.7428L9.10439 5.64453L8.96625 6.06964L9.32789 5.8069L9.68958 6.06964L9.55139 5.64453L9.91303 5.3817H9.46608L9.32789 4.95654Z" fill="#F0F0F0"/>
+<path d="M8.28436 3.91309L8.14617 4.33824H7.69922L8.06081 4.60107L7.92267 5.02618L8.28436 4.76345L8.646 5.02618L8.50786 4.60107L8.86945 4.33824H8.4225L8.28436 3.91309Z" fill="#F0F0F0"/>
+<path d="M6.78253 3.39136L6.64434 3.81651H6.19739L6.55898 4.0793L6.42084 4.5044L6.78253 4.24167L7.14417 4.5044L7.00603 4.0793L7.36762 3.81651H6.92067L6.78253 3.39136Z" fill="#F0F0F0"/>
+</g>
+<defs>
+<clipPath id="clip0_253_6167">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/components/sui-flag/assets/flags/afghanistan.svg

@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_253_5971)">
+<path d="M17.2174 1.19072C15.6397 0.427875 13.8698 0 12 0C10.1302 0 8.36025 0.427875 6.78262 1.19072L5.73914 12L6.78262 22.8093C8.36025 23.5721 10.1302 24 12 24C13.8698 24 15.6397 23.5721 17.2174 22.8093L18.2609 12L17.2174 1.19072Z" fill="#D80027"/>
+<path d="M6.78263 1.19116C2.76872 3.13212 0 7.24254 0 12C0 16.7575 2.76872 20.8679 6.78263 22.8089V1.19116Z" fill="black"/>
+<path d="M17.2174 1.19116V22.8089C21.2313 20.8679 24 16.7575 24 12C24 7.24254 21.2313 3.13212 17.2174 1.19116Z" fill="#496E2D"/>
+<path d="M11.9999 7.82617C9.69472 7.82617 7.82605 9.69489 7.82605 12.0001C7.82605 14.3052 9.69477 16.174 11.9999 16.174C14.3051 16.174 16.1738 14.3052 16.1738 12.0001C16.1738 9.69489 14.3052 7.82617 11.9999 7.82617ZM11.9999 14.6088C10.5592 14.6088 9.39125 13.4408 9.39125 12.0001C9.39125 10.5594 10.5592 9.39138 11.9999 9.39138C13.4406 9.39138 14.6086 10.5594 14.6086 12.0001C14.6086 13.4408 13.4407 14.6088 11.9999 14.6088Z" fill="#FFDA44"/>
+<path d="M11.9999 10.4348C11.4236 10.4348 10.9564 10.902 10.9564 11.4783V13.0435H13.0434V11.4783C13.0434 10.902 12.5762 10.4348 11.9999 10.4348Z" fill="#FFDA44"/>
+</g>
+<defs>
+<clipPath id="clip0_253_5971">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/components/sui-flag/assets/flags/aland-islands.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_253_6121)">
+<path d="M23.5866 15.1305C23.8556 14.1323 24 13.0831 24 12C24 10.9169 23.8556 9.8677 23.5866 8.86954L10.9565 0.0456543C8.61178 0.247686 6.46008 1.12378 4.69566 2.47945L0.413391 8.86954C0.144375 9.8677 0 10.9169 0 12C0 13.0768 0.142641 14.1202 0.408656 15.1131L4.69561 21.5205C6.46003 22.8762 8.61173 23.7524 10.9565 23.9543L23.5866 15.1305Z" fill="#FFDA44"/>
+<path d="M0.413391 15.1304C1.1077 17.7066 2.63794 19.9394 4.69566 21.5205V15.1304H0.413391Z" fill="#0052B4"/>
+<path d="M10.9565 23.9543C11.3005 23.9839 11.6484 23.9999 12 23.9999C17.5444 23.9999 22.2096 20.2396 23.5866 15.1304H10.9565V23.9543Z" fill="#0052B4"/>
+<path d="M23.5866 8.86955C22.2096 3.76036 17.5444 0 12 0C11.6484 0 11.3005 0.0160312 10.9565 0.0456562V8.86955H23.5866Z" fill="#0052B4"/>
+<path d="M4.69566 2.47949C2.63794 4.06059 1.1077 6.29338 0.413391 8.86959H4.69566V2.47949Z" fill="#0052B4"/>
+<path d="M23.8984 10.4347H9.39136H9.39131V0.285156C8.28234 0.531062 7.23098 0.929641 6.26086 1.459V10.4347H0.101578C0.0347813 10.9471 0 11.4694 0 11.9999C0 12.5304 0.0347813 13.0528 0.101578 13.5651H6.26081H6.26086V22.5408C7.23098 23.0701 8.28234 23.4688 9.39131 23.7146V13.5653V13.5652H23.8984C23.9651 13.0528 24 12.5304 24 11.9999C24 11.4694 23.9651 10.9471 23.8984 10.4347Z" fill="#D80027"/>
+</g>
+<defs>
+<clipPath id="clip0_253_6121">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>