{"_id":"@bolttech/ob-atoms-select","_rev":"6-4ad5eeb88ab6f3946374c7e331804958","name":"@bolttech/ob-atoms-select","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-select","version":"1.0.0","_id":"@bolttech/ob-atoms-select@1.0.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"9028784ade3518f35efe2105fb98d9c0cd6d2f32","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-select/-/ob-atoms-select-1.0.0.tgz","fileCount":13,"integrity":"sha512-P+Bhp2xvzeUACCz0/H8WHCHno9kqmjdbeDvYuENIz53X1NMEEPRpLvvtWqr0jb0j0FZuZf5B/yK1z4T13jp3VQ==","signatures":[{"sig":"MEQCIBAfjbDH5fybLsYZ4snbFo0xKKPkucY8a48s7A/nGE4pAiBO1bG8Gq4KP170DdagHsQiiAFSOypEE46GvZ/Wj9qNHQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69105},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"fd7277cfadfde31fcb2ee603971791046d182792","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"@bolttech/ui-utils":"0.6.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-select_1.0.0_1778515952794_0.061739789356557884","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-select","version":"1.0.1","_id":"@bolttech/ob-atoms-select@1.0.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"3b1969951312cce922031bb5ed70da228b4e1c72","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-select/-/ob-atoms-select-1.0.1.tgz","fileCount":5,"integrity":"sha512-RlJphB34F6FM1iopA6H3y2eE1F5TE9I2ZMDyB2GMkOGPtlSPp+TawgPl0iOydAMUHrlv5qNad0oRUEPTXhLdLA==","signatures":[{"sig":"MEUCIQC8A2qY5LgdAbwA1qLAjjMrjBdfudSANum7bgH2gSJjwgIgEJD/+aBtdoTGO86YcSfmcR3LfsvTs6QqsUaF4Sc+WQs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63974},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"77ee32d472e1df3ebb972931023156d5f671be46","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-checkbox":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-select_1.0.1_1780925669373_0.2532756803456726","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-select","version":"1.0.2","_id":"@bolttech/ob-atoms-select@1.0.2","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"f6437ba91c074a485b4f19bfc9b728aabf0db6c3","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-select/-/ob-atoms-select-1.0.2.tgz","fileCount":5,"integrity":"sha512-K4CSmmUEivKp9PEQ6Fzcbd1oMBh0/vQ8/Sj2fbtMzrkv7PrZFAO4GbcOsVGNDD/1xp7yXcRR/iuUHSeEgwaNjw==","signatures":[{"sig":"MEUCIQDAJIGvU4RpHgP+8SMATiVqet5D4oehaRb/C8LjS86NrAIgGtIPp1GvVrwUwNCfzBiHelObuEBhuKy3mAsonz0FDnU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64146},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"7deabd64ed988b08a370a25d0a1292dec36c8cbd","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-checkbox":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-select_1.0.2_1781609242729_0.3645311629374324","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-atoms-select","version":"1.0.3","_id":"@bolttech/ob-atoms-select@1.0.3","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"eb8f47bf15a8e84e38abc464325699e820834c3c","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-select/-/ob-atoms-select-1.0.3.tgz","fileCount":5,"integrity":"sha512-Z5+lQ7QdsDJtmHYx5G01N53kUbR+vpFvhOrvmJD8Wb9CcF+gc1s3HLS6Sx7XAju7IbMIambOHvJAfNeSVu+2Rw==","signatures":[{"sig":"MEYCIQCdxzyKpfetjVmfoP6pzh29kBPUBDwngM8CSkp9BNk5SAIhAMqn5qMkFw8WItRxHMeEPSq9i/BE5dNw8hZ66KX0oct1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64130},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"9f9536158827418a4c80d1c7d64f64bea22dd8ce","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-checkbox":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-select_1.0.3_1782832403388_0.7651615238876315","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@bolttech/ob-atoms-select","version":"1.1.0","_id":"@bolttech/ob-atoms-select@1.1.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"5be770661d9a06ab23e77a5b3f33098a94b9ca4f","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-select/-/ob-atoms-select-1.1.0.tgz","fileCount":13,"integrity":"sha512-OKj2MI9T9U0ymqNAqnFWNZhC14b9wBQXRN7LSF/ivUx661De+TUKqutpJCtLphjFMfm4gpWNRXfZAVcw67lCNw==","signatures":[{"sig":"MEYCIQD0XeBhm1DwHTkM/ChdU9gkJrvuwgO5saURxN4a7KUO1gIhANJqbhqJaH9NJkskUvazjRACAiGeBgzMXYn4fUHP8Zlh","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69736},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"76899d07bbbeb672730dbcaee9beb95f160c1cd9","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-checkbox":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-select_1.1.0_1788779244281_0.5046099808012312","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@bolttech/ob-atoms-select","version":"1.1.1","dependencies":{"@bolttech/ob-atoms-checkbox":"1.0.1","react":"19.1.2","@bolttech/ui-utils":"0.6.7","classnames":"^2.5.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-atoms-select@1.1.1","gitHead":"d7b24c4490bde2084335771c8aef9ec2af132bfe","description":"The **Select**, **SelectWithHeaders**, **SelectCheckbox**, and **SelectCheckboxWithHeaders** components are React components designed to provide customizable dropdown select inputs. These components allow users to choose from a set of options using dropdo","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-rk8UwgJ1DskW89CaUBhXu2A0CPufKbno+FVHBNFN1HIpIkOzgvweipJ3mEJ6RRXIeD0T4uXpRjyyDoC6frOEvQ==","shasum":"c2914dab969fac079e6d937ff4f644032b3e3038","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-select/-/ob-atoms-select-1.1.1.tgz","fileCount":12,"unpackedSize":77619,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHb6f+9U0pQf6TgO46RY1v/IJFii4lph3YW6K0oHhlBCAiBfnJNp/yG8mLo01IObu/2pHiXWIKVRqsSRZ9pztrz/Kw=="}]},"_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"directories":{},"maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ob-atoms-select_1.1.1_1788796543503_0.10973479872284586"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:12:32.681Z","modified":"2026-09-07T15:55:43.780Z","1.0.0":"2026-05-11T16:12:32.977Z","1.0.1":"2026-06-08T13:34:29.545Z","1.0.2":"2026-06-16T11:27:22.874Z","1.0.3":"2026-06-30T15:13:23.527Z","1.1.0":"2026-09-07T11:07:24.444Z","1.1.1":"2026-09-07T15:55:43.650Z"},"description":"The **Select**, **SelectWithHeaders**, **SelectCheckbox**, and **SelectCheckboxWithHeaders** components are React components designed to provide customizable dropdown select inputs. These components allow users to choose from a set of options using dropdo","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"readme":"# Select Component\n\nThe **Select**, **SelectWithHeaders**, **SelectCheckbox**, and **SelectCheckboxWithHeaders** components are React components designed to provide customizable dropdown select inputs. These components allow users to choose from a set of options using dropdown menus, with optional headers for grouping.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Example](#example)\n- [Contributing](#contributing)\n\n## Installation\n\nTo use the **Select**, **SelectWithHeaders**, **SelectCheckbox**, and **SelectCheckboxWithHeaders** components in your React application, follow these steps:\n\n### Installation\n\n```bash\nnpm install @bolttech/atoms-select\n```\n\nor\n\n```bash\nyarn add @bolttech/atoms-select\n```\n\nOnce you have the required dependencies installed, you can start using the `Select`, `SelectWithHeaders`, `SelectCheckbox`, and `SelectCheckboxWithHeaders` components in your React application.\n\n## Usage\n\nThe **Select** component provides a dropdown menu for selecting options, while the **SelectWithHeaders** component groups options under customizable headers. Both components support extensive customization through various props.\n\nIn addition, **SelectCheckbox** and **SelectCheckboxWithHeaders** are available, offering checkboxes within the dropdown for multi-selection capabilities. SelectCheckboxWithHeaders also allows for grouping options with headers, combining structured selection with the flexibility of multiple choices.\n\nTo use these components, import them and include them in your JSX:\n\n```jsx\nimport React from 'react';\nimport { Select, SelectWithHeaders } from '@bolttech/atoms-select';\nimport { bolttechTheme, BolttechThemeProvider, SelectCheckbox, SelectCheckboxWithHeaders } from '@bolttech/frontend-foundations';\n\nfunction App() {\n  const options = [\n    { id: 'option1', label: 'LabelOption 1', value: 'value1' },\n    { id: 'option2', label: 'LabelOption 2', value: 'value2' },\n  ];\n\n  const optionsWithHeaders = [\n    {\n      header: 'Header 1',\n      options: [\n        { id: 'option1', label: 'LabelOption 1', value: 'value1' },\n        { id: 'option2', label: 'LabelOption 2', value: 'value2' },\n      ],\n    },\n    {\n      header: 'Header 2',\n      options: [\n        { id: 'option3', label: 'LabelOption 3', value: 'value3' },\n        { id: 'option4', label: 'LabelOption 4', value: 'value4' },\n      ],\n    },\n  ];\n\n  return (\n    <Select options={options} onChange={(selectedOption) => console.log('Selected:', selectedOption)} />\n\n    <SelectWithHeaders options={optionsWithHeaders} onChange={(selectedOption) => console.log('Selected:', selectedOption)} />\n\n    <SelectCheckbox\n      options={options}\n      onChange={(selectedOption) => console.log('Selected:', selectedOption)}\n    />\n\n    <SelectCheckboxWithHeaders\n      options={options}\n      onChange={(selectedOption) => console.log('Selected:', selectedOption)}\n    />\n  );\n}\n\nexport default App;\n```\n\n## Props\n\nThe **Select**, **SelectWithHeaders**, **SelectCheckbox**, and **SelectCheckboxWithHeaders** components accept similar props:\n\n### Select Props\n\n| Prop         | Type         | Description                                                |\n| ------------ | ------------ | ---------------------------------------------------------- |\n| `id`         | string       | The HTML `id` attribute for the select component.          |\n| `dataTestId` | string       | The data-testid attribute for testing purposes.            |\n| `options`    | OptionType[] | An array of option objects to be displayed in the menu.    |\n| `onChange`   | function     | A callback function triggered on option change.            |\n| `active`     | OptionType   | The currently active option.                               |\n| `position`   | string       | The position of the dropdown menu (e.g., 'top', 'bottom'). |\n\n### SelectWithHeaders Props\n\n| Prop         | Type                   | Description                                                |\n| ------------ | ---------------------- | ---------------------------------------------------------- |\n| `id`         | string                 | The HTML `id` attribute for the select component.          |\n| `dataTestId` | string                 | The data-testid attribute for testing purposes.            |\n| `options`    | OptionWithHeaderType[] | An array of option objects grouped by headers.             |\n| `onChange`   | function               | A callback function triggered on option change.            |\n| `active`     | OptionType             | The currently active option.                               |\n| `position`   | string                 | The position of the dropdown menu (e.g., 'top', 'bottom'). |\n\n### SelectChecbox Props\n\n| Prop         | Type         | Description                                                |\n|--------------|--------------|------------------------------------------------------------|\n| `id`         | string       | The HTML `id` attribute for the select component.          |\n| `dataTestId` | string       | The data-testid attribute for testing purposes.            |\n| `options`    | OptionType[] | An array of option objects to be displayed in the menu.    |\n| `onChange`   | function     | A callback function triggered on option change.            |\n| `active`     | OptionType[] | List of the current active option.                         |\n| `position`   | string       | The position of the dropdown menu (e.g., 'top', 'bottom'). |\n\n### SelectCheckboxWithHeaders Props\n\n| Prop         | Type                   | Description                                                |\n|--------------|------------------------|------------------------------------------------------------|\n| `id`         | string                 | The HTML `id` attribute for the select component.          |\n| `dataTestId` | string                 | The data-testid attribute for testing purposes.            |\n| `options`    | OptionWithHeaderType[] | An array of option objects grouped by headers.             |\n| `onChange`   | function               | A callback function triggered on option change.            |\n| `active`     | OptionType[]           | List of the current active option.                         |\n| `position`   | string                 | The position of the dropdown menu (e.g., 'top', 'bottom'). |\n\n## Example\n\nHere's an example of using the **Select**, **SelectWithHeaders**, **SelectCheckbox**, and **SelectCheckboxWithHeaders** components:\n\n```jsx\nimport { Select, SelectWithHeaders, SelectCheckbox, SelectCheckboxWithHeaders } from './atoms-select';\n\n<Select\n  options={options}\n  onChange={(selectedOption) => console.log('Selected:', selectedOption)}\n/>\n\n<SelectWithHeaders\n  options={optionsWithHeaders}\n  onChange={(selectedOption) => console.log('Selected:', selectedOption)}\n/>\n\n<SelectCheckbox\n  options={options}\n  onChange={(selectedOption) => console.log('Selected:', selectedOption)}\n/>\n\n<SelectCheckboxWithHeaders\n  options={options}\n  onChange={(selectedOption) => console.log('Selected:', selectedOption)}\n/>\n```\n\nThis will render a **Select** component with a dropdown menu, a **SelectWithHeaders** component with grouped options and headers, a **SelectCheckbox** component for multi-selection with checkboxes, and a **SelectCheckboxWithHeaders** component for grouped options with checkboxes and headers.\n\n## Contributing\n\nContributions to the **Select**, **SelectWithHeaders**, **SelectCheckbox**, and **SelectCheckboxWithHeaders** components are welcome. If you encounter any issues or have suggestions for enhancements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.\n","readmeFilename":"README.md"}