@sula-tech/webcomponents 0.8.0 → 0.9.1

package/dist/collection/components/sula-dropdown/sula-dropdown.stories.js

@@ -34,6 +34,14 @@ export default {
                 required: false,
             },
         },
+        searchable: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Define se o dropdown permite busca',
+            type: {
+                required: false,
+            },
+        },
         dropdownClicked: {
             action: 'dropdownClicked',
             description: 'Evento emitido quando o dropdown é clicado',
@@ -67,6 +75,8 @@ const Template = args => {
     if (args.label)
         el.setAttribute('label', args.label);
     el.setAttribute('disabled', args.disabled.toString());
+    if (args.searchable)
+        el.setAttribute('searchable', args.searchable.toString());
     if (args.items && args.items.length > 0) {
         el.items = args.items;
     }
@@ -152,4 +162,47 @@ LongItemsList.args = {
     ],
     value: null,
 };
+export const Searchable = Template.bind({});
+Searchable.args = {
+    label: 'Selecione um país',
+    disabled: false,
+    searchable: true,
+    items: [
+        { id: '1', title: 'Brasil' },
+        { id: '2', title: 'Argentina' },
+        { id: '3', title: 'Chile' },
+        { id: '4', title: 'Uruguai' },
+        { id: '5', title: 'Paraguai' },
+        { id: '6', title: 'Bolívia' },
+        { id: '7', title: 'Peru' },
+        { id: '8', title: 'Colômbia' },
+        { id: '9', title: 'Venezuela' },
+        { id: '10', title: 'Equador' },
+        { id: '11', title: 'México' },
+        { id: '12', title: 'Estados Unidos' },
+        { id: '13', title: 'Canadá' },
+        { id: '14', title: 'Portugal' },
+        { id: '15', title: 'Espanha' },
+    ],
+    value: null,
+};
+export const SearchableWithSelectedValue = Template.bind({});
+SearchableWithSelectedValue.args = {
+    label: 'País de nascimento',
+    disabled: false,
+    searchable: true,
+    items: [
+        { id: '1', title: 'Brasil' },
+        { id: '2', title: 'Argentina' },
+        { id: '3', title: 'Chile' },
+        { id: '4', title: 'Uruguai' },
+        { id: '5', title: 'Paraguai' },
+        { id: '6', title: 'Bolívia' },
+        { id: '7', title: 'Peru' },
+        { id: '8', title: 'Colômbia' },
+        { id: '9', title: 'Venezuela' },
+        { id: '10', title: 'Equador' },
+    ],
+    value: { id: '1', title: 'Brasil' },
+};
 //# sourceMappingURL=sula-dropdown.stories.js.map

package/dist/collection/components/sula-dropdown/sula-dropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sula-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/sula-dropdown/sula-dropdown.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,qBAAqB;YACnC,WAAW,EAAE,mBAAmB;YAChC,IAAI,EAAE;gBACJ,QAAQ,EAAE,KAAK;aAChB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,wCAAwC;YACrD,IAAI,EAAE;gBACJ,QAAQ,EAAE,KAAK;aAChB;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,EAAE;YAChB,WAAW,EAAE,gCAAgC;YAC7C,IAAI,EAAE;gBACJ,QAAQ,EAAE,KAAK;aAChB;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,+BAA+B;YAC5C,IAAI,EAAE;gBACJ,QAAQ,EAAE,KAAK;aAChB;SACF;QACD,eAAe,EAAE;YACf,MAAM,EAAE,iBAAiB;YACzB,WAAW,EAAE,4CAA4C;SAC1D;QACD,eAAe,EAAE;YACf,MAAM,EAAE,iBAAiB;YACzB,WAAW,EAAE,8CAA8C;SAC5D;QACD,kBAAkB,EAAE;YAClB,MAAM,EAAE,oBAAoB;YAC5B,WAAW,EAAE,+CAA+C;SAC7D;QACD,gBAAgB,EAAE;YAChB,MAAM,EAAE,kBAAkB;YAC1B,WAAW,EAAE,6CAA6C;SAC3D;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,kMAAkM;aACrM;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IAChC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,8CAA8C;IAE/E,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAEnD,IAAI,IAAI,CAAC,KAAK;QAAE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACrD,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEtD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACxC,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACxB,CAAC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACxB,CAAC;IAED,8BAA8B;IAC9B,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC7D,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC7D,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACnE,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE/D,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAE1B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,qBAAqB;IAC5B,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;QAC7B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;QAC7B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;QAC7B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;KAC9B;IACD,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnD,iBAAiB,CAAC,IAAI,GAAG;IACvB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE;QAC/B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE;QAC3B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;KAC9B;IACD,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;QAC7B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;QAC7B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;KAC9B;IACD,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnD,iBAAiB,CAAC,IAAI,GAAG;IACvB,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE;QAC/B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE;QACpC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE;KACnC;IACD,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,KAAK,EAAE,wBAAwB;IAC/B,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5B,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;KAC/B;IACD,KAAK,EAAE,IAAI;CACZ,CAAC","sourcesContent":["export default {\n  title: 'Components/sula-dropdown',\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n      defaultValue: 'Selecione uma opção',\n      description: 'Label do dropdown',\n      type: {\n        required: false,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Define se o dropdown está desabilitado',\n      type: {\n        required: false,\n      },\n    },\n    items: {\n      control: 'object',\n      defaultValue: [],\n      description: 'Lista de itens para o dropdown',\n      type: {\n        required: false,\n      },\n    },\n    value: {\n      control: 'object',\n      defaultValue: null,\n      description: 'Valor selecionado do dropdown',\n      type: {\n        required: false,\n      },\n    },\n    dropdownClicked: {\n      action: 'dropdownClicked',\n      description: 'Evento emitido quando o dropdown é clicado',\n    },\n    dropdownFocused: {\n      action: 'dropdownFocused',\n      description: 'Evento emitido quando o dropdown recebe foco',\n    },\n    dropdownFocusedOut: {\n      action: 'dropdownFocusedOut',\n      description: 'Evento emitido quando o dropdown perde o foco',\n    },\n    menuItemSelected: {\n      action: 'menuItemSelected',\n      description: 'Evento emitido quando um item é selecionado',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'O componente Dropdown Sula Design System é utilizado para exibição de opções de escolha. Seu intuito é ser usado junto com o botton sheet para selecionar opções variadas de itens em uma lista.',\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.width = '300px'; // Define uma largura para melhor visualização\n\n  const el = document.createElement('sula-dropdown');\n\n  if (args.label) el.setAttribute('label', args.label);\n  el.setAttribute('disabled', args.disabled.toString());\n\n  if (args.items && args.items.length > 0) {\n    el.items = args.items;\n  }\n\n  if (args.value) {\n    el.value = args.value;\n  }\n\n  // Adiciona os event listeners\n  el.addEventListener('dropdownClicked', args.dropdownClicked);\n  el.addEventListener('dropdownFocused', args.dropdownFocused);\n  el.addEventListener('dropdownFocusedOut', args.dropdownFocusedOut);\n  el.addEventListener('menuItemSelected', args.menuItemSelected);\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Selecione uma opção',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n    { id: '4', title: 'Opção 4' },\n  ],\n  value: null,\n};\n\nexport const WithSelectedValue = Template.bind({});\nWithSelectedValue.args = {\n  label: 'País',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n  ],\n  value: { id: '1', title: 'Brasil' },\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Dropdown desabilitado',\n  disabled: true,\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n  ],\n  value: null,\n};\n\nexport const DisabledWithValue = Template.bind({});\nDisabledWithValue.args = {\n  label: 'Estado',\n  disabled: true,\n  items: [\n    { id: '1', title: 'São Paulo' },\n    { id: '2', title: 'Rio de Janeiro' },\n    { id: '3', title: 'Minas Gerais' },\n  ],\n  value: { id: '1', title: 'São Paulo' },\n};\n\nexport const EmptyItems = Template.bind({});\nEmptyItems.args = {\n  label: 'Sem itens disponíveis',\n  disabled: false,\n  items: [],\n  value: null,\n};\n\nexport const LongItemsList = Template.bind({});\nLongItemsList.args = {\n  label: 'Lista com muitos itens',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Item 1' },\n    { id: '2', title: 'Item 2' },\n    { id: '3', title: 'Item 3' },\n    { id: '4', title: 'Item 4' },\n    { id: '5', title: 'Item 5' },\n    { id: '6', title: 'Item 6' },\n    { id: '7', title: 'Item 7' },\n    { id: '8', title: 'Item 8' },\n    { id: '9', title: 'Item 9' },\n    { id: '10', title: 'Item 10' },\n  ],\n  value: null,\n};\n"]}
+{"version":3,"file":"sula-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/sula-dropdown/sula-dropdown.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/sula-dropdown',\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n      defaultValue: 'Selecione uma opção',\n      description: 'Label do dropdown',\n      type: {\n        required: false,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Define se o dropdown está desabilitado',\n      type: {\n        required: false,\n      },\n    },\n    items: {\n      control: 'object',\n      defaultValue: [],\n      description: 'Lista de itens para o dropdown',\n      type: {\n        required: false,\n      },\n    },\n    value: {\n      control: 'object',\n      defaultValue: null,\n      description: 'Valor selecionado do dropdown',\n      type: {\n        required: false,\n      },\n    },\n    searchable: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Define se o dropdown permite busca',\n      type: {\n        required: false,\n      },\n    },\n    dropdownClicked: {\n      action: 'dropdownClicked',\n      description: 'Evento emitido quando o dropdown é clicado',\n    },\n    dropdownFocused: {\n      action: 'dropdownFocused',\n      description: 'Evento emitido quando o dropdown recebe foco',\n    },\n    dropdownFocusedOut: {\n      action: 'dropdownFocusedOut',\n      description: 'Evento emitido quando o dropdown perde o foco',\n    },\n    menuItemSelected: {\n      action: 'menuItemSelected',\n      description: 'Evento emitido quando um item é selecionado',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'O componente Dropdown Sula Design System é utilizado para exibição de opções de escolha. Seu intuito é ser usado junto com o botton sheet para selecionar opções variadas de itens em uma lista.',\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.width = '300px'; // Define uma largura para melhor visualização\n\n  const el = document.createElement('sula-dropdown');\n\n  if (args.label) el.setAttribute('label', args.label);\n  el.setAttribute('disabled', args.disabled.toString());\n  if (args.searchable) el.setAttribute('searchable', args.searchable.toString());\n\n  if (args.items && args.items.length > 0) {\n    el.items = args.items;\n  }\n\n  if (args.value) {\n    el.value = args.value;\n  }\n\n  // Adiciona os event listeners\n  el.addEventListener('dropdownClicked', args.dropdownClicked);\n  el.addEventListener('dropdownFocused', args.dropdownFocused);\n  el.addEventListener('dropdownFocusedOut', args.dropdownFocusedOut);\n  el.addEventListener('menuItemSelected', args.menuItemSelected);\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Selecione uma opção',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n    { id: '4', title: 'Opção 4' },\n  ],\n  value: null,\n};\n\nexport const WithSelectedValue = Template.bind({});\nWithSelectedValue.args = {\n  label: 'País',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n  ],\n  value: { id: '1', title: 'Brasil' },\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Dropdown desabilitado',\n  disabled: true,\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n  ],\n  value: null,\n};\n\nexport const DisabledWithValue = Template.bind({});\nDisabledWithValue.args = {\n  label: 'Estado',\n  disabled: true,\n  items: [\n    { id: '1', title: 'São Paulo' },\n    { id: '2', title: 'Rio de Janeiro' },\n    { id: '3', title: 'Minas Gerais' },\n  ],\n  value: { id: '1', title: 'São Paulo' },\n};\n\nexport const EmptyItems = Template.bind({});\nEmptyItems.args = {\n  label: 'Sem itens disponíveis',\n  disabled: false,\n  items: [],\n  value: null,\n};\n\nexport const LongItemsList = Template.bind({});\nLongItemsList.args = {\n  label: 'Lista com muitos itens',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Item 1' },\n    { id: '2', title: 'Item 2' },\n    { id: '3', title: 'Item 3' },\n    { id: '4', title: 'Item 4' },\n    { id: '5', title: 'Item 5' },\n    { id: '6', title: 'Item 6' },\n    { id: '7', title: 'Item 7' },\n    { id: '8', title: 'Item 8' },\n    { id: '9', title: 'Item 9' },\n    { id: '10', title: 'Item 10' },\n  ],\n  value: null,\n};\n\nexport const Searchable = Template.bind({});\nSearchable.args = {\n  label: 'Selecione um país',\n  disabled: false,\n  searchable: true,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n    { id: '5', title: 'Paraguai' },\n    { id: '6', title: 'Bolívia' },\n    { id: '7', title: 'Peru' },\n    { id: '8', title: 'Colômbia' },\n    { id: '9', title: 'Venezuela' },\n    { id: '10', title: 'Equador' },\n    { id: '11', title: 'México' },\n    { id: '12', title: 'Estados Unidos' },\n    { id: '13', title: 'Canadá' },\n    { id: '14', title: 'Portugal' },\n    { id: '15', title: 'Espanha' },\n  ],\n  value: null,\n};\n\nexport const SearchableWithSelectedValue = Template.bind({});\nSearchableWithSelectedValue.args = {\n  label: 'País de nascimento',\n  disabled: false,\n  searchable: true,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n    { id: '5', title: 'Paraguai' },\n    { id: '6', title: 'Bolívia' },\n    { id: '7', title: 'Peru' },\n    { id: '8', title: 'Colômbia' },\n    { id: '9', title: 'Venezuela' },\n    { id: '10', title: 'Equador' },\n  ],\n  value: { id: '1', title: 'Brasil' },\n};\n"]}