From 71c901616d692e4bbdd977d3424cf1e4df3a7b39 Mon Sep 17 00:00:00 2001
From: Sasha Khamkov <sanusart@gmail.com>
Date: Mon, 17 Aug 2026 12:34:06 +0300
Subject: [PATCH] fix(styles): add nonce for injected styles CSP and handle css
 vars outside of components

---
 .gitignore                                    |   6 +-
 README.md                                     |  28 +
 commitlint.config.cjs                         |  24 +
 commitlint.config.js                          |  16 -
 packages/docs-site/README.md                  |   7 +
 packages/docs-site/csp-test.html              |  12 +
 packages/docs-site/package.json               |   3 +
 packages/docs-site/src/csp-test-main.tsx      |  93 +++
 .../docs-site/src/lib/parseSelectProps.ts     | 238 +++++++
 packages/docs-site/src/pages/Api.tsx          | 616 +++---------------
 packages/docs-site/vite.config.js             |  35 +-
 .../__snapshots__/index.spec.js.snap          | 109 +---
 .../__snapshots__/Content.spec.js.snap        |   6 -
 .../__snapshots__/Dropdown.spec.js.snap       |   5 -
 .../__snapshots__/DropdownHandle.spec.js.snap |   5 -
 .../__snapshots__/Item.spec.js.snap           |  16 -
 .../__snapshots__/Loading.spec.js.snap        |   5 -
 .../__snapshots__/NoData.spec.js.snap         |   5 -
 .../__snapshots__/Option.spec.js.snap         |   6 -
 .../__tests__/styles.spec.js                  |  83 +++
 .../__tests__/use-cases/helpers.js            |   1 +
 .../__tests__/use-cases/props-config.test.js  |  27 +-
 .../src/components/DropdownHandle.tsx         |   3 +-
 .../src/components/Item.tsx                   |  11 +-
 .../src/components/Loading.tsx                |   5 +-
 .../src/components/NoData.tsx                 |   6 +-
 .../src/components/Option.tsx                 |  11 +-
 .../src/hooks/useSelect.tsx                   |  56 +-
 packages/react-dropdown-select/src/index.tsx  |  17 +-
 .../react-dropdown-select/src/select-types.ts | 423 ++++++++++++
 packages/react-dropdown-select/src/styles.ts  |  53 +-
 packages/react-dropdown-select/types.d.ts     | 181 -----
 .../types/components/Clear.d.ts               |   3 -
 .../types/components/ClickOutside.d.ts        |  10 -
 .../types/components/Content.d.ts             |   4 -
 .../types/components/Dropdown.d.ts            |   9 -
 .../types/components/DropdownHandle.d.ts      |   7 -
 .../types/components/Input.d.ts               |  15 -
 .../types/components/Item.d.ts                |  16 -
 .../types/components/Loading.d.ts             |   6 -
 .../types/components/NoData.d.ts              |   6 -
 .../types/components/Option.d.ts              |   3 -
 .../types/components/Separator.d.ts           |   3 -
 .../types/constants.d.ts                      |   1 -
 .../types/hooks/useSelect.d.ts                |  15 -
 .../react-dropdown-select/types/index.d.ts    |  13 -
 .../types/select-types.d.ts                   | 139 ----
 .../react-dropdown-select/types/styles.d.ts   |   1 -
 .../react-dropdown-select/types/util.d.ts     |   8 -
 49 files changed, 1178 insertions(+), 1193 deletions(-)
 create mode 100644 commitlint.config.cjs
 delete mode 100644 commitlint.config.js
 create mode 100644 packages/docs-site/csp-test.html
 create mode 100644 packages/docs-site/src/csp-test-main.tsx
 create mode 100644 packages/docs-site/src/lib/parseSelectProps.ts
 create mode 100644 packages/react-dropdown-select/__tests__/styles.spec.js
 delete mode 100644 packages/react-dropdown-select/types.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/Clear.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/ClickOutside.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/Content.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/Dropdown.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/DropdownHandle.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/Input.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/Item.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/Loading.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/NoData.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/Option.d.ts
 delete mode 100644 packages/react-dropdown-select/types/components/Separator.d.ts
 delete mode 100644 packages/react-dropdown-select/types/constants.d.ts
 delete mode 100644 packages/react-dropdown-select/types/hooks/useSelect.d.ts
 delete mode 100644 packages/react-dropdown-select/types/index.d.ts
 delete mode 100644 packages/react-dropdown-select/types/select-types.d.ts
 delete mode 100644 packages/react-dropdown-select/types/styles.d.ts
 delete mode 100644 packages/react-dropdown-select/types/util.d.ts

diff --git a/.gitignore b/.gitignore
index a7d6d276..a5429660 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,8 @@ package-lock.json
 /packages/react-dropdown-select/src/helpers.js
 .DS_Store
 coverage
-dist/
-lib/
+/packages/react-dropdown-select/dist/
+/packages/react-dropdown-select/lib/
+/packages/docs-site/dist/
+/packages/react-dropdown-select/types/
 storybook-static/
diff --git a/README.md b/README.md
index 1c08640a..5fa4c27e 100644
--- a/README.md
+++ b/README.md
@@ -129,6 +129,7 @@ pnpm test
 | addPlaceholder                                                                              | string      | ""             | Secondary placeholder on search field if any value selected                                                                            |
 | disabled                                                                                    | bool        | false          | Disable select and all interactions                                                                                                    |
 | style                                                                                       | object      | {}             | Style object to pass to select                                                                                                         |
+| styleNonce                                                                                  | string      |                | Nonce value for the `<style>` tag injected by the component, useful to satisfy a strict Content Security Policy                         |
 | className                                                                                   | string      |                | CSS class attribute to pass to select                                                                                                  |
 | loading                                                                                     | bool        | false          | Loading indicator                                                                                                                      |
 | clearable                                                                                   | bool        | false          | Clear all indicator                                                                                                                    |
@@ -185,6 +186,33 @@ pnpm test
 | searchFn                                                                                                 | func | undefined | Overrides internal search function                                                             |
 | handleKeyDownFn                                                                                          | func | undefined | Overrides internal keyDown function                                                            |
 
+### Content Security Policy
+
+The component serves its base styles and per-component CSS variables through a `<style>` tag added to
+`document.head`. Under a strict CSP (e.g. `style-src 'self' 'nonce-…'`) that tag is blocked unless it
+carries a nonce. Pass the nonce via the `styleNonce` prop:
+
+```jsx
+<Select styleNonce={window.NONCE_ID} ... />
+```
+
+The remaining runtime values (such as dropdown positioning) are applied through the DOM style API
+(`element.style.setProperty`), which Content Security Policy does not block.
+
+#### Testing against a strict CSP in the docs site
+
+The docs dev server ships a self-contained CSP test page. It is served with a strict
+`style-src 'self' 'nonce-…'` header and renders a `<Select styleNonce={…}>`, then verifies that the
+injected stylesheet carried the matching nonce and that its rules actually applied:
+
+```sh
+pnpm --filter docs-site dev
+# open http://localhost:5173/react-dropdown-select/csp-test.html
+```
+
+The page reports PASS/FAIL per check; a clean run shows no CSP violations in the DevTools console.
+This is a dev-only entry and is not part of the static docs build.
+
 ### License
 
 [MIT](https://github.com/sanusart/react-dropdown-select/blob/master/LICENSE)
diff --git a/commitlint.config.cjs b/commitlint.config.cjs
new file mode 100644
index 00000000..16d8391a
--- /dev/null
+++ b/commitlint.config.cjs
@@ -0,0 +1,24 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'build',
+        'chore',
+        'ci',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test',
+        'typo',
+        'i18n',
+      ],
+    ],
+  },
+};
diff --git a/commitlint.config.js b/commitlint.config.js
deleted file mode 100644
index 4c9d4d4f..00000000
--- a/commitlint.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import config from '@commitlint/config-conventional';
-
-export default {
-  extends: ['@commitlint/config-conventional'],
-  rules: {
-    'type-enum': [
-      2,
-      'always',
-      [
-        ...(config.rules['type-enum']?.[2] || []),
-        'typo',
-        'i18n',
-      ],
-    ],
-  },
-};
diff --git a/packages/docs-site/README.md b/packages/docs-site/README.md
index ea9aa4fe..2317d68b 100644
--- a/packages/docs-site/README.md
+++ b/packages/docs-site/README.md
@@ -1 +1,8 @@
 # React dropdown select site
+
+## CSP test page
+
+`pnpm --filter docs-site dev` also serves a self-contained test for the `styleNonce` prop at
+`http://localhost:5173/react-dropdown-select/csp-test.html`. It applies a strict
+`style-src 'self' 'nonce-…'` header and verifies the component still renders. Dev-only; not part of
+the static build.
diff --git a/packages/docs-site/csp-test.html b/packages/docs-site/csp-test.html
new file mode 100644
index 00000000..5039f861
--- /dev/null
+++ b/packages/docs-site/csp-test.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-dropdown-select - Content Security Policy test</title>
+  </head>
+  <body>
+    <div id="csp-root"></div>
+    <script type="module" src="/src/csp-test-main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/docs-site/package.json b/packages/docs-site/package.json
index a2e8bac5..1eda1139 100644
--- a/packages/docs-site/package.json
+++ b/packages/docs-site/package.json
@@ -5,9 +5,12 @@
   "type": "module",
   "homepage": "http://sanusart.github.io/react-dropdown-select/",
   "scripts": {
+    "predev": "pnpm --filter react-dropdown-select types",
     "dev": "vite",
+    "prebuild": "pnpm --filter react-dropdown-select types",
     "build": "vite build",
     "preview": "vite preview",
+    "pretypecheck": "pnpm --filter react-dropdown-select types",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
diff --git a/packages/docs-site/src/csp-test-main.tsx b/packages/docs-site/src/csp-test-main.tsx
new file mode 100644
index 00000000..ce3f2b03
--- /dev/null
+++ b/packages/docs-site/src/csp-test-main.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import type { CSSProperties } from 'react';
+import { createRoot } from 'react-dom/client';
+import Select from 'react-dropdown-select';
+
+declare global {
+  interface Window {
+    __CSP_NONCE__?: string;
+  }
+}
+
+const nonce = window.__CSP_NONCE__;
+
+const options = [
+  { value: 1, label: 'One' },
+  { value: 2, label: 'Two' },
+  { value: 3, label: 'Three' },
+];
+
+const ROOT_MIN_HEIGHT = '36px';
+
+const pageStyles: CSSProperties = {
+  maxWidth: 720,
+  margin: '40px auto',
+  fontFamily: 'Inter, system-ui, sans-serif',
+};
+
+const codeStyles: CSSProperties = {
+  background: '#f6f8fa',
+  padding: '2px 6px',
+  borderRadius: 4,
+  fontSize: 13,
+};
+
+function CspTest() {
+  const [withNonce, setWithNonce] = useState(true);
+  const [stylesApplied, setStylesApplied] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const rootEl = document.querySelector<HTMLElement>('.react-dropdown-select');
+    const minHeight = rootEl ? getComputedStyle(rootEl).minHeight : '';
+    setStylesApplied(minHeight === ROOT_MIN_HEIGHT);
+  }, [withNonce]);
+
+  const blocked = stylesApplied === false;
+
+  return (
+    <div style={pageStyles}>
+      <h1 style={{ fontSize: 24, margin: '0 0 4px' }}>react-dropdown-select — CSP test</h1>
+      <p style={{ margin: '0 0 16px', color: '#57606a', fontSize: 14, lineHeight: 1.6 }}>
+        This page is served with{' '}
+        <code style={codeStyles}>Content-Security-Policy: style-src 'self' 'nonce-…'</code>. Without
+        a nonce the injected <code style={codeStyles}>&lt;style&gt;</code> tag is blocked by the
+        policy, so the dropdown renders unstyled. Toggle <code style={codeStyles}>styleNonce</code>{' '}
+        and watch.
+      </p>
+
+      <div style={{ marginBottom: 16 }}>
+        <button
+          onClick={() => setWithNonce((v) => !v)}
+          style={{ padding: '6px 12px', cursor: 'pointer', borderRadius: 4 }}>
+          styleNonce: {withNonce ? 'provided' : 'not provided'}
+        </button>
+      </div>
+
+      <Select
+        key={withNonce ? 'with-nonce' : 'without-nonce'}
+        styleNonce={withNonce ? nonce : undefined}
+        options={options}
+        values={[options[0]]}
+        multi
+        clearable
+        placeholder="Pick some options…"
+      />
+
+      <p
+        style={{
+          marginTop: 24,
+          fontSize: 14,
+          color: blocked ? '#cf222e' : '#1a7f37',
+          fontWeight: 600,
+        }}>
+        {stylesApplied === null
+          ? 'Checking…'
+          : blocked
+            ? 'Styles blocked — the <style> tag has no matching nonce, so the dropdown is unstyled.'
+            : 'Styles applied — the <style> tag carries the nonce and is allowed by the CSP.'}
+      </p>
+    </div>
+  );
+}
+
+createRoot(document.getElementById('csp-root')!).render(<CspTest />);
diff --git a/packages/docs-site/src/lib/parseSelectProps.ts b/packages/docs-site/src/lib/parseSelectProps.ts
new file mode 100644
index 00000000..be47ebac
--- /dev/null
+++ b/packages/docs-site/src/lib/parseSelectProps.ts
@@ -0,0 +1,238 @@
+export interface SelectPropDoc {
+  name: string;
+  type: string;
+  required: boolean;
+  description: string;
+  default?: string;
+  category?: string;
+  receives?: string;
+  replaces?: string;
+}
+
+interface JsDoc {
+  description: string;
+  default?: string;
+  category?: string;
+  receives?: string;
+  replaces?: string;
+}
+
+function parseJsDoc(block: string): JsDoc {
+  const lines = block
+    .replace(/^\/\*\*?/, '')
+    .replace(/\*\/\s*$/, '')
+    .split('\n')
+    .map((line) => line.replace(/^\s*\*\s?/, '').trim());
+
+  const description: string[] = [];
+  let def: string | undefined;
+  let category: string | undefined;
+  let receives: string | undefined;
+  let replaces: string | undefined;
+
+  for (const line of lines) {
+    if (line.startsWith('@default')) {
+      def = line.replace(/^@default\s*/, '').trim();
+    } else if (line.startsWith('@category')) {
+      category = line.replace(/^@category\s*/, '').trim();
+    } else if (line.startsWith('@receives')) {
+      receives = line.replace(/^@receives\s*/, '').trim();
+    } else if (line.startsWith('@replaces')) {
+      replaces = line.replace(/^@replaces\s*/, '').trim();
+    } else if (line) {
+      description.push(line);
+    }
+  }
+
+  return {
+    description: description.join(' ').trim(),
+    default: def || undefined,
+    category,
+    receives,
+    replaces,
+  };
+}
+
+function buildProp(memberText: string, comment: string): SelectPropDoc | null {
+  const colonIdx = memberText.indexOf(':');
+  if (colonIdx === -1) return null;
+
+  const namePart = memberText.slice(0, colonIdx).trim();
+  const required = !namePart.endsWith('?');
+  const name = required ? namePart : namePart.slice(0, -1);
+
+  const jsdoc = parseJsDoc(comment);
+
+  return {
+    name,
+    type: memberText
+      .slice(colonIdx + 1)
+      .replace(/;\s*$/, '')
+      .trim(),
+    required,
+    description: jsdoc.description,
+    default: jsdoc.default,
+    category: jsdoc.category,
+    receives: jsdoc.receives,
+    replaces: jsdoc.replaces,
+  };
+}
+
+/**
+ * Parses an interface declaration and its JSDoc (description, `@default`,
+ * `@category`, `@receives`, `@replaces`) out of the raw source text.
+ */
+export function parseInterface(source: string, interfaceName: string): SelectPropDoc[] {
+  const interfaceIdx = source.indexOf(`interface ${interfaceName}`);
+  if (interfaceIdx === -1) return [];
+
+  const openBrace = source.indexOf('{', interfaceIdx);
+  if (openBrace === -1) return [];
+
+  const props: SelectPropDoc[] = [];
+  let i = openBrace + 1;
+  let interfaceDepth = 1;
+  let pendingComment = '';
+
+  const isWhitespace = (ch: string) => /\s/.test(ch);
+
+  while (i < source.length && interfaceDepth > 0) {
+    while (i < source.length && isWhitespace(source[i])) i++;
+    if (i >= source.length) break;
+
+    if (source[i] === '/' && source[i + 1] === '*') {
+      const end = source.indexOf('*/', i + 2);
+      const block = source.slice(i, end + 2);
+      pendingComment = block.startsWith('/**') ? block : '';
+      i = end + 2;
+      continue;
+    }
+
+    if (source[i] === '}') {
+      interfaceDepth--;
+      i++;
+      continue;
+    }
+
+    const memberStart = i;
+    let paren = 0;
+    let bracket = 0;
+    let brace = 0;
+    let inString: string | null = null;
+    let inLineComment = false;
+    let inBlockComment = false;
+
+    while (i < source.length) {
+      const ch = source[i];
+      const next = source[i + 1];
+
+      if (inLineComment) {
+        if (ch === '\n') inLineComment = false;
+        i++;
+        continue;
+      }
+      if (inBlockComment) {
+        if (ch === '*' && next === '/') {
+          inBlockComment = false;
+          i += 2;
+        } else {
+          i++;
+        }
+        continue;
+      }
+      if (inString) {
+        if (ch === '\\') {
+          i += 2;
+        } else if (ch === inString) {
+          inString = null;
+          i++;
+        } else {
+          i++;
+        }
+        continue;
+      }
+      if (ch === '/' && next === '/') {
+        inLineComment = true;
+        i += 2;
+        continue;
+      }
+      if (ch === '/' && next === '*') {
+        inBlockComment = true;
+        i += 2;
+        continue;
+      }
+      if (ch === "'" || ch === '"' || ch === '`') {
+        inString = ch;
+        i++;
+        continue;
+      }
+      if (ch === '(') {
+        paren++;
+        i++;
+        continue;
+      }
+      if (ch === ')') {
+        paren--;
+        i++;
+        continue;
+      }
+      if (ch === '[') {
+        bracket++;
+        i++;
+        continue;
+      }
+      if (ch === ']') {
+        bracket--;
+        i++;
+        continue;
+      }
+      if (ch === '{') {
+        brace++;
+        i++;
+        continue;
+      }
+      if (ch === '}') {
+        brace--;
+        i++;
+        continue;
+      }
+      if (ch === ';' && paren === 0 && bracket === 0 && brace === 0) {
+        i++;
+        break;
+      }
+      i++;
+    }
+
+    const memberText = source.slice(memberStart, i).replace(/\s+/g, ' ').trim();
+    if (memberText) {
+      const prop = buildProp(memberText, pendingComment);
+      if (prop) props.push(prop);
+    }
+    pendingComment = '';
+  }
+
+  return props;
+}
+
+const LIB_NAME = 'react-dropdown-select';
+
+/**
+ * Extracts every `${LIB_NAME}-suffix` selector from the raw `styles.ts` source,
+ * so the CSS-class table always mirrors the actual stylesheet.
+ */
+export function parseCssClasses(source: string): string[] {
+  const selector = /\.\$\{LIB_NAME\}-([a-zA-Z0-9-]+)/g;
+  const classes = new Set<string>();
+  let match: RegExpExecArray | null;
+  while ((match = selector.exec(source)) !== null) {
+    classes.add(`${LIB_NAME}-${match[1]}`);
+  }
+  return Array.from(classes).sort();
+}
+
+/**
+ * Parses `SelectProps<T>` and its JSDoc out of the raw source text.
+ */
+export function parseSelectProps(source: string): SelectPropDoc[] {
+  return parseInterface(source, 'SelectProps');
+}
diff --git a/packages/docs-site/src/pages/Api.tsx b/packages/docs-site/src/pages/Api.tsx
index 47095622..db2cb596 100644
--- a/packages/docs-site/src/pages/Api.tsx
+++ b/packages/docs-site/src/pages/Api.tsx
@@ -1,6 +1,96 @@
 import { useState } from 'react';
 import type { ReactNode } from 'react';
 import CodeBlock from '../components/CodeBlock';
+import { parseCssClasses, parseInterface, parseSelectProps } from '../lib/parseSelectProps';
+import rawSelectProps from '../../../react-dropdown-select/src/select-types.ts?raw';
+import rawStyles from '../../../react-dropdown-select/src/styles.ts?raw';
+
+const selectProps = parseSelectProps(rawSelectProps);
+
+const groupProps = (category: string): PropRow[] =>
+  selectProps
+    .filter((prop) => prop.category === category)
+    .map((prop) => ({
+      name: prop.name,
+      type: prop.type,
+      default: prop.default ?? null,
+      description: prop.description,
+      required: prop.required,
+    }));
+
+const rendererProps: RendererRow[] = selectProps
+  .filter((prop) => prop.category === 'renderer')
+  .map((prop) => ({
+    name: prop.name,
+    receives: prop.receives ?? '',
+    replaces: prop.replaces ?? '',
+  }));
+
+const methods: MethodRow[] = parseInterface(rawSelectProps, 'SelectMethods').map((m) => ({
+  name: m.name,
+  signature: m.type
+    .replace(/,\s*\)/g, ')')
+    .replace(/\(\s+/g, '(')
+    .replace(/\s+/g, ' ')
+    .trim(),
+  description: m.description,
+}));
+
+const internalState: PropRow[] = parseInterface(rawSelectProps, 'SelectState').map((s) => ({
+  name: s.name,
+  type: s.type,
+  description: s.description,
+}));
+
+const cssClassDescriptions: Record<string, string> = {
+  'react-dropdown-select-disabled': 'Applied when the select is disabled',
+  'react-dropdown-select-content': 'Content wrapper (selected values + input)',
+  'react-dropdown-select-clear': 'Clear button',
+  'react-dropdown-select-separator': 'Separator line',
+  'react-dropdown-select-loading': 'Loading spinner',
+  'react-dropdown-select-input': 'Search input element',
+  'react-dropdown-select-input-readonly': 'Search input in read-only mode',
+  'react-dropdown-select-dropdown': 'Dropdown container',
+  'react-dropdown-select-dropdown-top': 'Dropdown positioned above (offset helper)',
+  'react-dropdown-select-dropdown-bottom': 'Dropdown positioned below (offset helper)',
+  'react-dropdown-select-dropdown-portal': 'Dropdown rendered through a portal',
+  'react-dropdown-select-dropdown-add-new': '"Add new" button',
+  'react-dropdown-select-dropdown-select-all': 'Select/clear all button',
+  'react-dropdown-select-dropdown-handle': 'Dropdown chevron handle',
+  'react-dropdown-select-dropdown-handle-open': 'Handle state when the dropdown is open',
+  'react-dropdown-select-dropdown-handle-closed': 'Handle state when the dropdown is closed',
+  'react-dropdown-select-dropdown-handle-rotate': 'Handle rotation state',
+  'react-dropdown-select-dropdown-handle-no-rotate-open':
+    'Handle rotation when animations are disabled',
+  'react-dropdown-select-no-data': 'No results container',
+  'react-dropdown-select-option': 'Selected value pill/tag',
+  'react-dropdown-select-option-remove': 'Selected value remove (x) button',
+  'react-dropdown-select-item': 'Dropdown list item',
+  'react-dropdown-select-item-active': 'Keyboard-cursor active item',
+  'react-dropdown-select-item-selected': 'Currently selected item',
+  'react-dropdown-select-item-selected-disabled': 'Selected item that is also disabled',
+  'react-dropdown-select-item-disabled': 'Disabled item',
+  'react-dropdown-select-hidden-input': 'Hidden input used for form integration',
+};
+
+const cssClasses = [
+  { name: 'react-dropdown-select', description: 'Root element' },
+  ...parseCssClasses(rawStyles).map((name) => ({
+    name,
+    description: cssClassDescriptions[name] ?? 'Styled element',
+  })),
+  { name: 'react-dropdown-select-type-multi', description: 'Multi-select mode modifier' },
+  { name: 'react-dropdown-select-type-single', description: 'Single-select mode modifier' },
+  { name: 'react-dropdown-select-option-label', description: 'Option label text' },
+  {
+    name: 'react-dropdown-select-dropdown-position-top',
+    description: 'Dropdown positioned at top',
+  },
+  {
+    name: 'react-dropdown-select-dropdown-position-bottom',
+    description: 'Dropdown positioned at bottom',
+  },
+].map((c) => ({ name: `.${c.name}`, description: c.description }));
 
 interface PropRow {
   name: string;
@@ -46,7 +136,7 @@ function PropTable({ title, props }: { title?: string; props: PropRow[] }) {
                 <td className="px-5 py-3 font-mono text-sm font-medium text-indigo-700 whitespace-nowrap">
                   {prop.name}
                 </td>
-                <td className="px-5 py-3 font-mono text-xs text-gray-500 whitespace-nowrap">
+                <td className="px-5 py-3 font-mono text-xs text-gray-500 break-words max-w-[18rem]">
                   {prop.type}
                 </td>
                 <td className="px-5 py-3 font-mono text-xs text-gray-400 whitespace-nowrap">
@@ -139,515 +229,11 @@ function Section({ id, title, children }: { id: string; title: string; children:
 export default function Api() {
   const [filter, setFilter] = useState('');
 
-  const configurationProps = [
-    {
-      name: 'options',
-      type: 'array',
-      default: '[]',
-      description: 'Available options. Items with disabled: true are disabled.',
-      required: true,
-    },
-    { name: 'values', type: 'array', default: '[]', description: 'Controlled selected values.' },
-    { name: 'multi', type: 'boolean', default: 'false', description: 'Enable multi-select mode.' },
-    {
-      name: 'disabled',
-      type: 'boolean',
-      default: 'false',
-      description: 'Disable all interactions.',
-    },
-    { name: 'searchable', type: 'boolean', default: 'true', description: 'Show search input.' },
-    { name: 'clearable', type: 'boolean', default: 'false', description: 'Show clear-all button.' },
-    {
-      name: 'separator',
-      type: 'boolean',
-      default: 'false',
-      description: 'Show vertical separator line.',
-    },
-    {
-      name: 'dropdownHandle',
-      type: 'boolean',
-      default: 'true',
-      description: 'Show dropdown open/close chevron handle.',
-    },
-    { name: 'loading', type: 'boolean', default: 'false', description: 'Show loading indicator.' },
-    {
-      name: 'keepOpen',
-      type: 'boolean',
-      default: 'false',
-      description: 'Force dropdown to stay open (useful for debugging).',
-    },
-    {
-      name: 'defaultMenuIsOpen',
-      type: 'boolean',
-      default: 'false',
-      description: 'Open dropdown by default on mount.',
-    },
-    {
-      name: 'create',
-      type: 'boolean',
-      default: 'false',
-      description: 'Allow creating new entries from search text.',
-    },
-    {
-      name: 'selectAll',
-      type: 'boolean',
-      default: 'false',
-      description: 'Show select-all / clear-all buttons in dropdown (multi mode only).',
-    },
-    {
-      name: 'portal',
-      type: 'DOMElement',
-      default: 'null',
-      description: 'Render dropdown inside specified DOM element (e.g., document.body).',
-    },
-    {
-      name: 'required',
-      type: 'boolean',
-      default: 'false',
-      description: 'Add hidden input with required attribute for form validation.',
-    },
-    {
-      name: 'autoFocus',
-      type: 'boolean',
-      default: 'false',
-      description: 'Auto-focus the search input on mount.',
-    },
-    {
-      name: 'backspaceDelete',
-      type: 'boolean',
-      default: 'true',
-      description: 'Backspace removes last selected value when search is empty.',
-    },
-    {
-      name: 'keepSelectedInList',
-      type: 'boolean',
-      default: 'true',
-      description: 'Show selected items in the dropdown list.',
-    },
-  ];
-
-  const displayProps = [
-    {
-      name: 'color',
-      type: 'string',
-      default: '"#0074D9"',
-      description: 'Base accent color. Accepts any CSS color value.',
-    },
-    {
-      name: 'style',
-      type: 'object',
-      default: '{}',
-      description: 'Style object applied to root element.',
-    },
-    {
-      name: 'className',
-      type: 'string',
-      default: '""',
-      description: 'CSS class applied to root element.',
-    },
-    {
-      name: 'direction',
-      type: '"ltr" | "rtl" | "auto"',
-      default: '"ltr"',
-      description: 'Text direction for RTL language support.',
-    },
-    {
-      name: 'placeholder',
-      type: 'string',
-      default: '"Select..."',
-      description: 'Placeholder text when nothing is selected.',
-    },
-    {
-      name: 'addPlaceholder',
-      type: 'string',
-      default: '""',
-      description: 'Secondary placeholder on search input when values exist.',
-    },
-    {
-      name: 'disabledLabel',
-      type: 'string',
-      default: '"disabled"',
-      description: 'Label suffix for disabled items.',
-    },
-    {
-      name: 'noDataLabel',
-      type: 'string',
-      default: '"No data"',
-      description: 'Text displayed when no search results.',
-    },
-    {
-      name: 'createNewLabel',
-      type: 'string',
-      default: '"add {search}"',
-      description: 'Label for the "add new" button. {search} is replaced with input value.',
-    },
-    {
-      name: 'selectAllLabel',
-      type: 'string',
-      default: '"Select all"',
-      description: 'Label for select-all button.',
-    },
-    {
-      name: 'clearAllLabel',
-      type: 'string',
-      default: '"Clear all"',
-      description: 'Label for clear-all button.',
-    },
-    {
-      name: 'dropdownHeight',
-      type: 'string',
-      default: '"300px"',
-      description: 'Minimum dropdown height.',
-    },
-    {
-      name: 'dropdownGap',
-      type: 'number',
-      default: '5',
-      description: 'Gap in pixels between select and dropdown.',
-    },
-  ];
-
-  const behaviorProps = [
-    {
-      name: 'dropdownPosition',
-      type: '"top" | "bottom" | "auto"',
-      default: '"bottom"',
-      description: 'Dropdown position. Auto adjusts based on viewport.',
-    },
-    {
-      name: 'closeOnScroll',
-      type: 'boolean',
-      default: 'false',
-      description: 'Close dropdown when page scrolls.',
-    },
-    {
-      name: 'closeOnSelect',
-      type: 'boolean',
-      default: 'false',
-      description: 'Close dropdown after selecting an item.',
-    },
-    {
-      name: 'closeOnClickInput',
-      type: 'boolean',
-      default: 'false',
-      description: 'Close dropdown when clicking input area (if not searching).',
-    },
-    {
-      name: 'clearOnBlur',
-      type: 'boolean',
-      default: 'true',
-      description: 'Clear search text when input loses focus.',
-    },
-    {
-      name: 'clearOnSelect',
-      type: 'boolean',
-      default: 'true',
-      description: 'Clear search text on item select/deselect.',
-    },
-    {
-      name: 'debounceDelay',
-      type: 'number',
-      default: '0',
-      description: 'Debounce delay in ms for resize/scroll handlers.',
-    },
-    {
-      name: 'labelField',
-      type: 'string',
-      default: '"label"',
-      description: 'Field name for display label. Supports dot notation.',
-    },
-    {
-      name: 'valueField',
-      type: 'string',
-      default: '"value"',
-      description: 'Field name for value. Supports dot notation.',
-    },
-    {
-      name: 'searchBy',
-      type: 'string',
-      default: '"label"',
-      description: 'Field to search by. Supports dot notation.',
-    },
-    {
-      name: 'sortBy',
-      type: 'string',
-      default: 'null',
-      description: 'Field to sort options by. Supports dot notation.',
-    },
-    {
-      name: 'name',
-      type: 'string',
-      default: 'null',
-      description: 'Hidden input name for form integration.',
-    },
-    {
-      name: 'pattern',
-      type: 'string',
-      default: 'undefined',
-      description: 'Hidden input pattern (regex) for form validation.',
-    },
-    {
-      name: 'additionalProps',
-      type: 'object',
-      default: 'null',
-      description: 'Additional HTML attributes passed to root div.',
-    },
-    {
-      name: 'compareValuesFunc',
-      type: 'function',
-      default: 'JSON.stringify',
-      description: 'Custom comparison function for controlled mode value syncing.',
-    },
-  ];
-
-  const callbackProps = [
-    {
-      name: 'onChange',
-      type: 'function(values)',
-      default: '-',
-      description: 'Fires on any values change. Returns array of value objects.',
-      required: true,
-    },
-    {
-      name: 'onSelect',
-      type: 'function(values)',
-      default: null,
-      description: 'Fires on user-triggered value add.',
-    },
-    {
-      name: 'onDeselect',
-      type: 'function(values)',
-      default: null,
-      description: 'Fires on user-triggered value remove.',
-    },
-    {
-      name: 'onDropdownOpen',
-      type: 'function()',
-      default: null,
-      description: 'Fires when dropdown opens.',
-    },
-    {
-      name: 'onDropdownClose',
-      type: 'function()',
-      default: null,
-      description: 'Fires when dropdown closes.',
-    },
-    {
-      name: 'onCreateNew',
-      type: 'function(newItem)',
-      default: null,
-      description: 'Fires when creating a new entry. Requires create: true.',
-    },
-    { name: 'onClearAll', type: 'function()', default: null, description: 'Fires on clear all.' },
-    { name: 'onSelectAll', type: 'function()', default: null, description: 'Fires on select all.' },
-    {
-      name: 'onDropdownCloseRequest',
-      type: 'function({ props, state, methods, close })',
-      default: null,
-      description:
-        'Intercepts dropdown close. Call close() to actually close. Used for animations.',
-    },
-  ];
-
-  const functionOverrideProps = [
-    {
-      name: 'searchFn',
-      type: 'function({ state, props, methods })',
-      default: null,
-      description: 'Override default search logic. Must return filtered array.',
-    },
-    {
-      name: 'handleKeyDownFn',
-      type: 'function({ event, state, props, methods, setState })',
-      default: null,
-      description: 'Override keyboard event handling.',
-    },
-  ];
-
-  const rendererProps = [
-    {
-      name: 'contentRenderer',
-      receives: '{ props, state, methods }',
-      replaces: 'Entire content area (selected values + input)',
-    },
-    {
-      name: 'dropdownRenderer',
-      receives: '{ props, state, methods }',
-      replaces: 'Entire dropdown container',
-    },
-    {
-      name: 'itemRenderer',
-      receives: '{ item, itemIndex, props, state, methods }',
-      replaces: 'Individual dropdown list item',
-    },
-    {
-      name: 'optionRenderer',
-      receives: '{ item, props, state, methods }',
-      replaces: 'Selected value pill/tag',
-    },
-    {
-      name: 'inputRenderer',
-      receives: '{ props, state, methods, inputRef }',
-      replaces: 'Search input element',
-    },
-    {
-      name: 'noDataRenderer',
-      receives: '{ props, state, methods }',
-      replaces: '"No data" message',
-    },
-    { name: 'loadingRenderer', receives: '{ props }', replaces: 'Loading indicator' },
-    { name: 'clearRenderer', receives: '{ props, state, methods }', replaces: 'Clear button' },
-    {
-      name: 'separatorRenderer',
-      receives: '{ props, state, methods }',
-      replaces: 'Separator line',
-    },
-    {
-      name: 'dropdownHandleRenderer',
-      receives: '{ props, state, methods }',
-      replaces: 'Dropdown arrow handle',
-    },
-  ];
-
-  const methods = [
-    {
-      name: 'addItem',
-      signature: '(item) => true',
-      description: 'Add item to selection (or toggle in multi mode).',
-    },
-    {
-      name: 'removeItem',
-      signature: '(event, item, close) => void',
-      description: 'Remove item from selection.',
-    },
-    { name: 'clearAll', signature: '() => void', description: 'Clear all selected values.' },
-    {
-      name: 'selectAll',
-      signature: '(valuesList?) => void',
-      description: 'Select all items, or a specific list of values.',
-    },
-    {
-      name: 'toggleSelectAll',
-      signature: '() => void',
-      description: 'Toggle between select all / clear all.',
-    },
-    {
-      name: 'areAllSelected',
-      signature: '() => boolean',
-      description: 'Check if all non-disabled items are selected.',
-    },
-    {
-      name: 'isSelected',
-      signature: '(item) => boolean',
-      description: 'Check if a specific item is selected.',
-    },
-    {
-      name: 'dropDown',
-      signature: '(action, event?, force?) => void',
-      description: 'Open ("open"), close ("close"), or toggle ("toggle") the dropdown.',
-    },
-    { name: 'setSearch', signature: '(event) => void', description: 'Update the search text.' },
-    {
-      name: 'searchResults',
-      signature: '() => array',
-      description: 'Get filtered items based on current search.',
-    },
-    {
-      name: 'getInputSize',
-      signature: '() => number',
-      description: 'Get current input character count.',
-    },
-    {
-      name: 'getSelectBounds',
-      signature: '() => object',
-      description: 'Get the bounding rectangle of the select.',
-    },
-    {
-      name: 'getSelectRef',
-      signature: '() => DOMElement',
-      description: 'Get the select DOM reference.',
-    },
-    {
-      name: 'handleKeyDown',
-      signature: '(event) => void',
-      description: 'Process a keyboard event.',
-    },
-    {
-      name: 'sortBy',
-      signature: '() => array',
-      description: 'Get options sorted by sortBy field.',
-    },
-    {
-      name: 'safeString',
-      signature: '(string) => string',
-      description: 'Escape regex special characters in a string.',
-    },
-    {
-      name: 'createNew',
-      signature: '(item) => void',
-      description: 'Create a new entry from search text.',
-    },
-    {
-      name: 'activeCursorItem',
-      signature: '(item) => void',
-      description: 'Set the active cursor item.',
-    },
-  ];
-
-  const internalState = [
-    { name: 'dropdown', type: 'boolean', description: 'Whether the dropdown is open.' },
-    { name: 'values', type: 'array', description: 'Currently selected values.' },
-    { name: 'search', type: 'string', description: 'Current search text.' },
-    {
-      name: 'selectBounds',
-      type: 'object',
-      description: 'getBoundingClientRect() result for the select.',
-    },
-    {
-      name: 'cursor',
-      type: 'number',
-      description: 'Keyboard cursor position in the dropdown list.',
-    },
-    {
-      name: 'searchResults',
-      type: 'array',
-      description: 'Filtered items from the current search.',
-    },
-  ];
-
-  const cssClasses = [
-    { name: '.react-dropdown-select', description: 'Root element' },
-    {
-      name: '.react-dropdown-select-content',
-      description: 'Content wrapper (selected values + input)',
-    },
-    { name: '.react-dropdown-select-type-multi', description: 'Multi-select mode modifier' },
-    { name: '.react-dropdown-select-type-single', description: 'Single-select mode modifier' },
-    { name: '.react-dropdown-select-input', description: 'Search input element' },
-    { name: '.react-dropdown-select-option', description: 'Selected value pill/tag' },
-    { name: '.react-dropdown-select-option-label', description: 'Option label text' },
-    { name: '.react-dropdown-select-option-remove', description: 'Option remove (x) button' },
-    { name: '.react-dropdown-select-dropdown', description: 'Dropdown container' },
-    {
-      name: '.react-dropdown-select-dropdown-position-top',
-      description: 'Dropdown positioned at top',
-    },
-    {
-      name: '.react-dropdown-select-dropdown-position-bottom',
-      description: 'Dropdown positioned at bottom',
-    },
-    { name: '.react-dropdown-select-item', description: 'Dropdown list item' },
-    { name: '.react-dropdown-select-item-selected', description: 'Currently selected item' },
-    { name: '.react-dropdown-select-item-active', description: 'Keyboard-cursor active item' },
-    { name: '.react-dropdown-select-item-disabled', description: 'Disabled item' },
-    { name: '.react-dropdown-select-no-data', description: 'No results container' },
-    { name: '.react-dropdown-select-clear', description: 'Clear button' },
-    { name: '.react-dropdown-select-loading', description: 'Loading spinner' },
-    { name: '.react-dropdown-select-separator', description: 'Separator line' },
-    { name: '.react-dropdown-select-dropdown-handle', description: 'Dropdown chevron handle' },
-    { name: '.react-dropdown-select-dropdown-add-new', description: '"Add new" button' },
-    { name: '.react-dropdown-select-dropdown-select-all', description: 'Select/clear all button' },
-  ];
+  const configurationProps = groupProps('configuration');
+  const displayProps = groupProps('display');
+  const behaviorProps = groupProps('behavior');
+  const callbackProps = groupProps('callback');
+  const functionOverrideProps = groupProps('override');
 
   const navItems = [
     { id: 'installation', label: 'Installation' },
@@ -959,7 +545,7 @@ const options = [
         </p>
         <CodeBlock
           code={`import Select from 'react-dropdown-select';
-import type { TProps as SelectProps } from 'react-dropdown-select/types';
+import type { SelectProps } from 'react-dropdown-select/types';
 
 // All props are fully typed
 const MySelect: React.FC<SelectProps> = (props) => (
@@ -970,9 +556,11 @@ const MySelect: React.FC<SelectProps> = (props) => (
         />
         <div className="p-4 rounded-xl bg-green-50 border border-green-200">
           <p className="text-sm text-green-800">
-            <strong>Tip:</strong> The component ships with{' '}
-            <code className="font-mono text-xs bg-green-100 px-1.5 py-0.5 rounded">types.d.ts</code>{' '}
-            in the package root. No additional @types package is needed.
+            <strong>Tip:</strong> The component ships with generated{' '}
+            <code className="font-mono text-xs bg-green-100 px-1.5 py-0.5 rounded">
+              types/select-types.d.ts
+            </code>{' '}
+            declaration files. No additional @types package is needed.
           </p>
         </div>
       </Section>
diff --git a/packages/docs-site/vite.config.js b/packages/docs-site/vite.config.js
index 7a4cb041..edca7dfc 100644
--- a/packages/docs-site/vite.config.js
+++ b/packages/docs-site/vite.config.js
@@ -1,3 +1,4 @@
+import crypto from 'node:crypto';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
@@ -6,9 +7,41 @@ import path from 'path';
 const libSrc = path.resolve(__dirname, '../react-dropdown-select/src/index.tsx');
 const rootPkg = path.resolve(__dirname, '../react-dropdown-select/package.json');
 
+// Dev-only helper for testing the `styleNonce` prop against a strict CSP.
+// Serves csp-test.html with `style-src 'self' 'nonce-…'` and exposes the same
+// nonce to the page so a <Select styleNonce> can opt into it.
+function cspTestPlugin() {
+  const nonce = crypto.randomBytes(16).toString('base64');
+  return {
+    name: 'csp-test',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (req.url && req.url.includes('csp-test.html')) {
+          res.setHeader('Content-Security-Policy', `style-src 'self' 'nonce-${nonce}'`);
+        }
+        next();
+      });
+    },
+    transformIndexHtml(html) {
+      if (!html.includes('csp-test')) return null;
+      return {
+        html,
+        tags: [
+          {
+            tag: 'script',
+            children: `window.__CSP_NONCE__=${JSON.stringify(nonce)};`,
+            injectTo: 'head',
+          },
+        ],
+      };
+    },
+  };
+}
+
 export default defineConfig({
   base: '/react-dropdown-select/',
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), cspTestPlugin()],
   resolve: {
     alias: {
       'react-dropdown-select': libSrc,
diff --git a/packages/react-dropdown-select/__tests__/__snapshots__/index.spec.js.snap b/packages/react-dropdown-select/__tests__/__snapshots__/index.spec.js.snap
index 29c9d32b..f5d8081e 100644
--- a/packages/react-dropdown-select/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/react-dropdown-select/__tests__/__snapshots__/index.spec.js.snap
@@ -8,13 +8,6 @@ exports[`<Select/> component <Select/> is disabled 1`] = `
     className="react-dropdown-select-disabled react-dropdown-select "
     onClick={[Function]}
     onKeyDown={[Function]}
-    style={
-      {
-        "--select-color": "#0074D9",
-        "--select-color-shadow": "rgba(0, 116, 217, 0.2)",
-        "--select-direction": "ltr",
-      }
-    }
     tabIndex={-1}
   >
     <div
@@ -44,11 +37,6 @@ exports[`<Select/> component <Select/> is disabled 1`] = `
       className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
       onClick={[Function]}
       onKeyDown={[Function]}
-      style={
-        {
-          "--select-handle-color": "#0074D9",
-        }
-      }
       tabIndex={-1}
     >
       <svg
@@ -72,13 +60,6 @@ exports[`<Select/> component <Select/> renders correctly 1`] = `
     className=" react-dropdown-select "
     onClick={[Function]}
     onKeyDown={[Function]}
-    style={
-      {
-        "--select-color": "#0074D9",
-        "--select-color-shadow": "rgba(0, 116, 217, 0.2)",
-        "--select-direction": "ltr",
-      }
-    }
     tabIndex={0}
   >
     <div
@@ -108,11 +89,6 @@ exports[`<Select/> component <Select/> renders correctly 1`] = `
       className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
       onClick={[Function]}
       onKeyDown={[Function]}
-      style={
-        {
-          "--select-handle-color": "#0074D9",
-        }
-      }
       tabIndex={-1}
     >
       <svg
@@ -136,13 +112,6 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
     className=" react-dropdown-select "
     onClick={[Function]}
     onKeyDown={[Function]}
-    style={
-      {
-        "--select-color": "#0074D9",
-        "--select-color-shadow": "rgba(0, 116, 217, 0.2)",
-        "--select-direction": "ltr",
-      }
-    }
     tabIndex={0}
   >
     <div
@@ -180,11 +149,6 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
       className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
       onClick={[Function]}
       onKeyDown={[Function]}
-      style={
-        {
-          "--select-handle-color": "#0074D9",
-        }
-      }
       tabIndex={-1}
     >
       <svg
@@ -208,13 +172,6 @@ exports[`<Select/> component <Select/> renders with custom search function 1`] =
     className=" react-dropdown-select "
     onClick={[Function]}
     onKeyDown={[Function]}
-    style={
-      {
-        "--select-color": "#0074D9",
-        "--select-color-shadow": "rgba(0, 116, 217, 0.2)",
-        "--select-direction": "ltr",
-      }
-    }
     tabIndex={0}
   >
     <div
@@ -244,11 +201,6 @@ exports[`<Select/> component <Select/> renders with custom search function 1`] =
       className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
       onClick={[Function]}
       onKeyDown={[Function]}
-      style={
-        {
-          "--select-handle-color": "#0074D9",
-        }
-      }
       tabIndex={-1}
     >
       <svg
@@ -272,13 +224,6 @@ exports[`<Select/> component <Select/> renders with loading 1`] = `
     className=" react-dropdown-select "
     onClick={[Function]}
     onKeyDown={[Function]}
-    style={
-      {
-        "--select-color": "#0074D9",
-        "--select-color-shadow": "rgba(0, 116, 217, 0.2)",
-        "--select-direction": "ltr",
-      }
-    }
     tabIndex={0}
   >
     <div
@@ -306,21 +251,11 @@ exports[`<Select/> component <Select/> renders with loading 1`] = `
     </div>
     <div
       className="react-dropdown-select-loading"
-      style={
-        {
-          "--select-loading-color": "#0074D9",
-        }
-      }
     />
     <div
       className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
       onClick={[Function]}
       onKeyDown={[Function]}
-      style={
-        {
-          "--select-handle-color": "#0074D9",
-        }
-      }
       tabIndex={-1}
     >
       <svg
@@ -344,13 +279,6 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
     className=" react-dropdown-select "
     onClick={[Function]}
     onKeyDown={[Function]}
-    style={
-      {
-        "--select-color": "#0074D9",
-        "--select-color-shadow": "rgba(0, 116, 217, 0.2)",
-        "--select-direction": "ltr",
-      }
-    }
     tabIndex={0}
   >
     <div
@@ -377,28 +305,17 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
       />
     </div>
     <input
+      className="react-dropdown-select-hidden-input"
       defaultValue=""
       disabled={false}
       name="form-select"
       required={false}
-      style={
-        {
-          "opacity": 0,
-          "position": "absolute",
-          "width": 0,
-        }
-      }
       tabIndex={-1}
     />
     <div
       className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
       onClick={[Function]}
       onKeyDown={[Function]}
-      style={
-        {
-          "--select-handle-color": "#0074D9",
-        }
-      }
       tabIndex={-1}
     >
       <svg
@@ -422,13 +339,6 @@ exports[`<Select/> component <Select/> renders with separator 1`] = `
     className=" react-dropdown-select "
     onClick={[Function]}
     onKeyDown={[Function]}
-    style={
-      {
-        "--select-color": "#0074D9",
-        "--select-color-shadow": "rgba(0, 116, 217, 0.2)",
-        "--select-direction": "ltr",
-      }
-    }
     tabIndex={0}
   >
     <div
@@ -461,11 +371,6 @@ exports[`<Select/> component <Select/> renders with separator 1`] = `
       className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
       onClick={[Function]}
       onKeyDown={[Function]}
-      style={
-        {
-          "--select-handle-color": "#0074D9",
-        }
-      }
       tabIndex={-1}
     >
       <svg
@@ -489,13 +394,6 @@ exports[`<Select/> component <Select/> renders with short color 1`] = `
     className=" react-dropdown-select "
     onClick={[Function]}
     onKeyDown={[Function]}
-    style={
-      {
-        "--select-color": "#000",
-        "--select-color-shadow": "rgba(0, 0, 0, 0.2)",
-        "--select-direction": "ltr",
-      }
-    }
     tabIndex={0}
   >
     <div
@@ -525,11 +423,6 @@ exports[`<Select/> component <Select/> renders with short color 1`] = `
       className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
       onClick={[Function]}
       onKeyDown={[Function]}
-      style={
-        {
-          "--select-handle-color": "#000",
-        }
-      }
       tabIndex={-1}
     >
       <svg
diff --git a/packages/react-dropdown-select/__tests__/components/__snapshots__/Content.spec.js.snap b/packages/react-dropdown-select/__tests__/components/__snapshots__/Content.spec.js.snap
index 5ab9d64f..ed53e8b8 100644
--- a/packages/react-dropdown-select/__tests__/components/__snapshots__/Content.spec.js.snap
+++ b/packages/react-dropdown-select/__tests__/components/__snapshots__/Content.spec.js.snap
@@ -8,12 +8,6 @@ exports[`<Content/> component <Content/> renders correctly 1`] = `
   <span
     className="react-dropdown-select-option"
     role="listitem"
-    style={
-      {
-        "--select-option-color": undefined,
-        "--select-option-direction": "row",
-      }
-    }
   >
     <span
       className="react-dropdown-select-option-label"
diff --git a/packages/react-dropdown-select/__tests__/components/__snapshots__/Dropdown.spec.js.snap b/packages/react-dropdown-select/__tests__/components/__snapshots__/Dropdown.spec.js.snap
index e2fc6232..ca29ea00 100644
--- a/packages/react-dropdown-select/__tests__/components/__snapshots__/Dropdown.spec.js.snap
+++ b/packages/react-dropdown-select/__tests__/components/__snapshots__/Dropdown.spec.js.snap
@@ -19,11 +19,6 @@ exports[`<Dropdown/> renders correctly 1`] = `
 >
   <div
     className="react-dropdown-select-no-data"
-    style={
-      {
-        "--select-color": undefined,
-      }
-    }
   />
 </div>
 `;
diff --git a/packages/react-dropdown-select/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap b/packages/react-dropdown-select/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap
index 80a2a9cf..4b7844b8 100644
--- a/packages/react-dropdown-select/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap
+++ b/packages/react-dropdown-select/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap
@@ -5,11 +5,6 @@ exports[`<Clear/> component <DropdownHandle/> renders correctly 1`] = `
   className="react-dropdown-select-dropdown-handle react-dropdown-select-dropdown-handle-closed react-dropdown-select-dropdown-handle-no-rotate-open"
   onClick={[Function]}
   onKeyDown={[Function]}
-  style={
-    {
-      "--select-handle-color": undefined,
-    }
-  }
   tabIndex={-1}
 >
   <svg
diff --git a/packages/react-dropdown-select/__tests__/components/__snapshots__/Item.spec.js.snap b/packages/react-dropdown-select/__tests__/components/__snapshots__/Item.spec.js.snap
index e5308956..7a311e2b 100644
--- a/packages/react-dropdown-select/__tests__/components/__snapshots__/Item.spec.js.snap
+++ b/packages/react-dropdown-select/__tests__/components/__snapshots__/Item.spec.js.snap
@@ -6,14 +6,6 @@ exports[`<Item/> component pass item renderer 1`] = `
   onClick={[Function]}
   onKeyDown={[Function]}
   role="option"
-  style={
-    {
-      "--select-item-active-bg": undefined,
-      "--select-item-hover-bg": undefined,
-      "--select-item-selected-bg": undefined,
-      "--select-item-selected-color": "#fff",
-    }
-  }
   tabIndex={-1}
 >
    
@@ -26,14 +18,6 @@ exports[`<Item/> component renders correctly 1`] = `
   onClick={[Function]}
   onKeyDown={[Function]}
   role="option"
-  style={
-    {
-      "--select-item-active-bg": undefined,
-      "--select-item-hover-bg": undefined,
-      "--select-item-selected-bg": undefined,
-      "--select-item-selected-color": "#fff",
-    }
-  }
   tabIndex={-1}
 >
    
diff --git a/packages/react-dropdown-select/__tests__/components/__snapshots__/Loading.spec.js.snap b/packages/react-dropdown-select/__tests__/components/__snapshots__/Loading.spec.js.snap
index c8b0524b..4c5dd3cd 100644
--- a/packages/react-dropdown-select/__tests__/components/__snapshots__/Loading.spec.js.snap
+++ b/packages/react-dropdown-select/__tests__/components/__snapshots__/Loading.spec.js.snap
@@ -3,10 +3,5 @@
 exports[`<Loading/> renders correctly 1`] = `
 <div
   className="react-dropdown-select-loading"
-  style={
-    {
-      "--select-loading-color": undefined,
-    }
-  }
 />
 `;
diff --git a/packages/react-dropdown-select/__tests__/components/__snapshots__/NoData.spec.js.snap b/packages/react-dropdown-select/__tests__/components/__snapshots__/NoData.spec.js.snap
index 47761fbc..2b6b3849 100644
--- a/packages/react-dropdown-select/__tests__/components/__snapshots__/NoData.spec.js.snap
+++ b/packages/react-dropdown-select/__tests__/components/__snapshots__/NoData.spec.js.snap
@@ -3,10 +3,5 @@
 exports[`<NoData/> renders correctly 1`] = `
 <div
   className="react-dropdown-select-no-data"
-  style={
-    {
-      "--select-color": undefined,
-    }
-  }
 />
 `;
diff --git a/packages/react-dropdown-select/__tests__/components/__snapshots__/Option.spec.js.snap b/packages/react-dropdown-select/__tests__/components/__snapshots__/Option.spec.js.snap
index 1be84bb6..2b7ea4fd 100644
--- a/packages/react-dropdown-select/__tests__/components/__snapshots__/Option.spec.js.snap
+++ b/packages/react-dropdown-select/__tests__/components/__snapshots__/Option.spec.js.snap
@@ -4,12 +4,6 @@ exports[`<Option/> component renders correctly 1`] = `
 <span
   className="react-dropdown-select-option"
   role="listitem"
-  style={
-    {
-      "--select-option-color": undefined,
-      "--select-option-direction": "row",
-    }
-  }
 >
   <span
     className="react-dropdown-select-option-label"
diff --git a/packages/react-dropdown-select/__tests__/styles.spec.js b/packages/react-dropdown-select/__tests__/styles.spec.js
new file mode 100644
index 00000000..ce4067aa
--- /dev/null
+++ b/packages/react-dropdown-select/__tests__/styles.spec.js
@@ -0,0 +1,83 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { TestRenderer, selectWithProps, Select } from './use-cases/helpers';
+
+const props = (props = {}) => ({ onChange: () => undefined, ...props });
+
+const getStyleTag = () => document.head.querySelector('style[data-react-dropdown-select]');
+
+describe('style injection', () => {
+  it('injects a style tag without nonce by default', () => {
+    let renderer;
+    TestRenderer.act(() => {
+      renderer = selectWithProps(<Select {...props()} />);
+    });
+
+    const style = getStyleTag();
+    expect(style).not.toBeNull();
+    expect(style.getAttribute('nonce')).toBeNull();
+
+    TestRenderer.act(() => renderer.unmount());
+  });
+
+  it('sets the nonce attribute when styleNonce prop is provided', () => {
+    let renderer;
+    TestRenderer.act(() => {
+      renderer = selectWithProps(<Select {...props({ styleNonce: 'testNonce' })} />);
+    });
+
+    const style = getStyleTag();
+    expect(style).not.toBeNull();
+    expect(style.getAttribute('nonce')).toBe('testNonce');
+
+    TestRenderer.act(() => renderer.unmount());
+  });
+
+  it('re-injects with a new nonce when styleNonce changes', () => {
+    let renderer;
+    TestRenderer.act(() => {
+      renderer = selectWithProps(<Select {...props({ styleNonce: 'firstNonce' })} />);
+    });
+
+    const first = getStyleTag();
+    expect(first.getAttribute('nonce')).toBe('firstNonce');
+
+    TestRenderer.act(() => {
+      renderer.update(<Select {...props({ styleNonce: 'secondNonce' })} />);
+    });
+
+    const second = getStyleTag();
+    expect(second).not.toBeNull();
+    expect(second).not.toBe(first);
+    expect(second.getAttribute('nonce')).toBe('secondNonce');
+
+    TestRenderer.act(() => renderer.unmount());
+  });
+
+  it('registers a per-instance rule in the style tag', () => {
+    let renderer;
+    TestRenderer.act(() => {
+      renderer = selectWithProps(<Select {...props({ color: '#ff0000' })} />);
+    });
+
+    const styleTag = getStyleTag();
+    expect(styleTag.textContent).toContain('[data-rdrs="');
+    expect(styleTag.textContent).toContain('--select-color: #ff0000');
+
+    TestRenderer.act(() => renderer.unmount());
+  });
+
+  it('removes the per-instance rule on unmount', () => {
+    let renderer;
+    TestRenderer.act(() => {
+      renderer = selectWithProps(<Select {...props()} />);
+    });
+
+    expect(getStyleTag().textContent.match(/\[data-rdrs="/g)).toHaveLength(1);
+
+    TestRenderer.act(() => renderer.unmount());
+    expect(getStyleTag().textContent.match(/\[data-rdrs="/g)).toBeNull();
+  });
+});
diff --git a/packages/react-dropdown-select/__tests__/use-cases/helpers.js b/packages/react-dropdown-select/__tests__/use-cases/helpers.js
index 8bdca33c..9e96d376 100644
--- a/packages/react-dropdown-select/__tests__/use-cases/helpers.js
+++ b/packages/react-dropdown-select/__tests__/use-cases/helpers.js
@@ -28,6 +28,7 @@ export const selectWithProps = (component) => {
           blur: () => {},
           scrollIntoView: () => {},
           contains: () => true,
+          setAttribute: () => {},
           getBoundingClientRect: () => ({
             top: 0,
             bottom: 100,
diff --git a/packages/react-dropdown-select/__tests__/use-cases/props-config.test.js b/packages/react-dropdown-select/__tests__/use-cases/props-config.test.js
index fd626146..6922ea03 100644
--- a/packages/react-dropdown-select/__tests__/use-cases/props-config.test.js
+++ b/packages/react-dropdown-select/__tests__/use-cases/props-config.test.js
@@ -112,22 +112,29 @@ describe('Select all / Clear all', () => {
 });
 
 describe('Directions and positioning', () => {
+  const styleTagCss = () => {
+    const styleTag = document.head.querySelector('style[data-react-dropdown-select]');
+    return styleTag ? styleTag.textContent : '';
+  };
+
   it('renders with ltr direction', () => {
-    const component = selectWithProps(
-      <Select options={fixture} labelField="name" valueField="id" direction="ltr" />,
-    );
+    TestRenderer.act(() => {
+      selectWithProps(
+        <Select options={fixture} labelField="name" valueField="id" direction="ltr" />,
+      );
+    });
 
-    const selectEl = findByClassName(component, 'react-dropdown-select');
-    expect(selectEl.props.style['--select-direction']).toBe('ltr');
+    expect(styleTagCss()).toContain('--select-direction: ltr');
   });
 
   it('renders with rtl direction', () => {
-    const component = selectWithProps(
-      <Select options={fixture} labelField="name" valueField="id" direction="rtl" />,
-    );
+    TestRenderer.act(() => {
+      selectWithProps(
+        <Select options={fixture} labelField="name" valueField="id" direction="rtl" />,
+      );
+    });
 
-    const selectEl = findByClassName(component, 'react-dropdown-select');
-    expect(selectEl.props.style['--select-direction']).toBe('rtl');
+    expect(styleTagCss()).toContain('--select-direction: rtl');
   });
 
   it('renders dropdown with auto position', () => {
diff --git a/packages/react-dropdown-select/src/components/DropdownHandle.tsx b/packages/react-dropdown-select/src/components/DropdownHandle.tsx
index 5b25d8e8..1c24abe2 100644
--- a/packages/react-dropdown-select/src/components/DropdownHandle.tsx
+++ b/packages/react-dropdown-select/src/components/DropdownHandle.tsx
@@ -27,8 +27,7 @@ const DropdownHandle = <T extends Record<string, any>>({
         : state.dropdown
           ? `${LIB_NAME}-dropdown-handle-rotate`
           : `${LIB_NAME}-dropdown-handle-no-rotate-open`
-    }`}
-    style={{ '--select-handle-color': props.color } as React.CSSProperties}>
+    }`}>
     {props.dropdownHandleRenderer ? (
       props.dropdownHandleRenderer({ props, state, methods })
     ) : (
diff --git a/packages/react-dropdown-select/src/components/Item.tsx b/packages/react-dropdown-select/src/components/Item.tsx
index 2e07bc4c..cb481c70 100644
--- a/packages/react-dropdown-select/src/components/Item.tsx
+++ b/packages/react-dropdown-select/src/components/Item.tsx
@@ -1,5 +1,5 @@
 import React, { Component, RefObject } from 'react';
-import { hexToRGBA, getByPath } from '../util';
+import { getByPath } from '../util';
 import { LIB_NAME } from '../constants';
 import { SelectProps, SelectState, SelectMethods } from '../select-types';
 
@@ -76,15 +76,6 @@ class Item<T extends Record<string, any>> extends Component<ItemProps<T>> {
             : (e) => {
                 if (e.key === 'Enter' || e.key === ' ') methods.addItem(item);
               }
-        }
-        style={
-          {
-            '--select-item-active-bg':
-              !isDisabled && props.color ? hexToRGBA(props.color, 0.1) : undefined,
-            '--select-item-hover-bg': props.color ? hexToRGBA(props.color, 0.1) : undefined,
-            '--select-item-selected-bg': isDisabled ? undefined : props.color,
-            '--select-item-selected-color': isDisabled ? undefined : '#fff',
-          } as React.CSSProperties
         }>
         {getByPath(item, props.labelField)} {isDisabled && <ins>{props.disabledLabel}</ins>}
       </span>
diff --git a/packages/react-dropdown-select/src/components/Loading.tsx b/packages/react-dropdown-select/src/components/Loading.tsx
index a0d87bf0..076127f1 100644
--- a/packages/react-dropdown-select/src/components/Loading.tsx
+++ b/packages/react-dropdown-select/src/components/Loading.tsx
@@ -10,10 +10,7 @@ const Loading = <T extends Record<string, any>>({ props }: LoadingProps<T>) =>
   props.loadingRenderer ? (
     props.loadingRenderer({ props })
   ) : (
-    <div
-      className={`${LIB_NAME}-loading`}
-      style={{ '--select-loading-color': props.color } as React.CSSProperties}
-    />
+    <div className={`${LIB_NAME}-loading`} />
   );
 
 export default Loading;
diff --git a/packages/react-dropdown-select/src/components/NoData.tsx b/packages/react-dropdown-select/src/components/NoData.tsx
index 2fb42e34..cceaaa42 100644
--- a/packages/react-dropdown-select/src/components/NoData.tsx
+++ b/packages/react-dropdown-select/src/components/NoData.tsx
@@ -15,11 +15,7 @@ const NoData = <T extends Record<string, any>>({
   props.noDataRenderer ? (
     props.noDataRenderer({ props, state, methods })
   ) : (
-    <div
-      className={`${className || `${LIB_NAME}-no-data`}`}
-      style={{ '--select-color': props.color } as React.CSSProperties}>
-      {props.noDataLabel}
-    </div>
+    <div className={`${className || `${LIB_NAME}-no-data`}`}>{props.noDataLabel}</div>
   );
 
 export default NoData;
diff --git a/packages/react-dropdown-select/src/components/Option.tsx b/packages/react-dropdown-select/src/components/Option.tsx
index ba7012f5..1e74cddc 100644
--- a/packages/react-dropdown-select/src/components/Option.tsx
+++ b/packages/react-dropdown-select/src/components/Option.tsx
@@ -12,16 +12,7 @@ const Option = <T extends Record<string, any>>({
   item && props.optionRenderer ? (
     props.optionRenderer({ item, props, state, methods })
   ) : (
-    <span
-      role="listitem"
-      aria-disabled={props.disabled}
-      className={`${LIB_NAME}-option`}
-      style={
-        {
-          '--select-option-color': props.color,
-          '--select-option-direction': props.direction === 'rtl' ? 'row-reverse' : 'row',
-        } as React.CSSProperties
-      }>
+    <span role="listitem" aria-disabled={props.disabled} className={`${LIB_NAME}-option`}>
       <span className={`${LIB_NAME}-option-label`}>{getByPath(item, props.labelField)}</span>
       <span
         className={`${LIB_NAME}-option-remove`}
diff --git a/packages/react-dropdown-select/src/hooks/useSelect.tsx b/packages/react-dropdown-select/src/hooks/useSelect.tsx
index 145711ad..dd093f0b 100644
--- a/packages/react-dropdown-select/src/hooks/useSelect.tsx
+++ b/packages/react-dropdown-select/src/hooks/useSelect.tsx
@@ -1,9 +1,42 @@
 import React, { useRef, useCallback, useMemo, useEffect, useLayoutEffect, useReducer } from 'react';
 import ReactDOM from 'react-dom';
 import Dropdown from '../components/Dropdown';
-import { debounce, getByPath, getProp, valueExistInSelected, isomorphicWindow } from '../util';
+import { registerStyle, unregisterStyle } from '../styles';
+import {
+  debounce,
+  getByPath,
+  getProp,
+  hexToRGBA,
+  valueExistInSelected,
+  isomorphicWindow,
+} from '../util';
 import { SelectProps, SelectState, SelectMethods, HandleKeyDownArgs } from '../select-types';
 
+let styleIdCounter = 0;
+
+const getInstanceStyle = <T extends Record<string, any>>(
+  id: string,
+  props: SelectProps<T>,
+): string => {
+  const color = props.color || '#0074D9';
+  const shadow = hexToRGBA(color, 0.2);
+  const hover = hexToRGBA(color, 0.1);
+
+  return `[data-rdrs="${id}"] {
+  --select-direction: ${props.direction || 'ltr'};
+  --select-color: ${color};
+  --select-color-shadow: ${shadow};
+  --select-handle-color: ${color};
+  --select-loading-color: ${color};
+  --select-option-color: ${color};
+  --select-option-direction: ${props.direction === 'rtl' ? 'row-reverse' : 'row'};
+  --select-item-active-bg: ${hover};
+  --select-item-hover-bg: ${hover};
+  --select-item-selected-bg: ${color};
+  --select-item-selected-color: #fff;
+}`;
+};
+
 interface SelectComponentState<T> extends SelectState<T> {
   searchResults: T[];
 }
@@ -36,6 +69,16 @@ export function useSelect<T extends Record<string, any>>(props: SelectProps<T>)
     typeof document !== 'undefined' && document.createElement('div'),
   );
 
+  const styleIdRef = useRef<string | null>(null);
+  if (styleIdRef.current === null) {
+    styleIdRef.current = `rdrs-${++styleIdCounter}`;
+  }
+  const instanceStyle = useMemo(
+    () => getInstanceStyle(styleIdRef.current!, props),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.color, props.direction],
+  );
+
   const stateRef = useRef(state);
   stateRef.current = state;
 
@@ -473,6 +516,17 @@ export function useSelect<T extends Record<string, any>>(props: SelectProps<T>)
   const methodsRef = useRef(methods);
   methodsRef.current = methods;
 
+  useLayoutEffect(() => {
+    const styleId = styleIdRef.current!;
+    selectRef.current?.setAttribute('data-rdrs', styleId);
+    dropdownRootRef.current && dropdownRootRef.current.setAttribute('data-rdrs', styleId);
+    registerStyle(styleId, instanceStyle, props.styleNonce);
+
+    return () => {
+      unregisterStyle(styleId);
+    };
+  }, [instanceStyle, props.styleNonce]);
+
   useLayoutEffect(() => {
     const p = propsRef.current;
     const dropdownRoot = dropdownRootRef.current;
diff --git a/packages/react-dropdown-select/src/index.tsx b/packages/react-dropdown-select/src/index.tsx
index 9b3b5204..4d78fede 100644
--- a/packages/react-dropdown-select/src/index.tsx
+++ b/packages/react-dropdown-select/src/index.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
 import ClickOutside from './components/ClickOutside';
-import { injectStyles } from './styles';
 
 import Content from './components/Content';
 import Loading from './components/Loading';
@@ -8,13 +7,11 @@ import Clear from './components/Clear';
 import Separator from './components/Separator';
 import DropdownHandle from './components/DropdownHandle';
 
-import { hexToRGBA, isEqual } from './util';
+import { isEqual } from './util';
 import { LIB_NAME } from './constants';
 import { SelectProps } from './select-types';
 import { useSelect } from './hooks/useSelect';
 
-injectStyles();
-
 function SelectInner<T extends Record<string, any>>(
   props: SelectProps<T>,
   ref: React.ForwardedRef<{ state: any; methods: any }>,
@@ -39,22 +36,13 @@ function SelectInner<T extends Record<string, any>>(
         className={`${props.disabled ? `${LIB_NAME}-disabled` : ''} ${LIB_NAME} ${
           props.className || ''
         }`}
-        style={
-          {
-            '--select-direction': props.direction,
-            '--select-color': props.color,
-            '--select-color-shadow': props.color
-              ? hexToRGBA(props.color, 0.2)
-              : hexToRGBA('#000', 0.2),
-          } as React.CSSProperties
-        }
         {...props.additionalProps}>
         <Content props={props} state={state} methods={methods} />
 
         {(props.name || props.required) && (
           <input
             tabIndex={-1}
-            style={{ opacity: 0, width: 0, position: 'absolute' } as React.CSSProperties}
+            className={`${LIB_NAME}-hidden-input`}
             name={props.name || ''}
             required={props.required}
             pattern={props.pattern}
@@ -148,6 +136,7 @@ Select.defaultProps = {
   selectAllLabel: 'Select all',
   separator: false,
   sortBy: null,
+  styleNonce: undefined,
   valueField: 'value',
   values: [],
   defaultMenuIsOpen: false,
diff --git a/packages/react-dropdown-select/src/select-types.ts b/packages/react-dropdown-select/src/select-types.ts
index 73825a77..94d6c14e 100644
--- a/packages/react-dropdown-select/src/select-types.ts
+++ b/packages/react-dropdown-select/src/select-types.ts
@@ -8,113 +8,536 @@ import {
 } from 'react';
 
 export interface SelectState<T> {
+  /**
+   * Whether the dropdown is currently open.
+   */
   dropdown: boolean;
+  /**
+   * Currently selected value objects.
+   */
   values: T[];
+  /**
+   * Current search text.
+   */
   search: string;
+  /**
+   * `getBoundingClientRect()` result for the select element.
+   */
   selectBounds: DOMRect | Record<string, never>;
+  /**
+   * Keyboard cursor position within the dropdown list.
+   */
   cursor: number | null;
+  /**
+   * Options filtered by the current search.
+   */
   searchResults: T[];
+  /**
+   * The option currently highlighted by the keyboard cursor.
+   */
   activeCursorItem?: any;
 }
 
 export interface SelectMethods<T> {
+  /**
+   * Sets the option highlighted by the keyboard cursor.
+   */
   activeCursorItem: (item: any) => void;
+  /**
+   * Adds an item to the selection (toggles it in multi mode).
+   */
   addItem: (item: T) => void;
+  /**
+   * Returns true when every non-disabled option is selected.
+   */
   areAllSelected: () => boolean;
+  /**
+   * Clears all selected values.
+   */
   clearAll: () => void;
+  /**
+   * Creates a new option from the search text. Requires `create: true`.
+   */
   createNew: (item: string) => void;
+  /**
+   * Opens ("open"), closes ("close") or toggles ("toggle") the dropdown.
+   */
   dropDown: (
     action: string,
     event?: React.MouseEvent | React.KeyboardEvent | null,
     force?: boolean,
   ) => void | false;
+  /**
+   * Current length of the search input text.
+   */
   getInputSize: () => number;
+  /**
+   * Bounding rectangle of the select element.
+   */
   getSelectBounds: () => DOMRect | Record<string, never>;
+  /**
+   * The select's root DOM element.
+   */
   getSelectRef: () => HTMLDivElement | null;
+  /**
+   * Processes a keyboard event.
+   */
   handleKeyDown: (event: KeyboardEvent) => void;
+  /**
+   * Returns true when the given item is selected.
+   */
   isSelected: (item: T) => boolean;
+  /**
+   * Removes an item from the selection.
+   */
   removeItem: (event: MouseEvent<HTMLElement> | null, item: T, close?: boolean) => void;
+  /**
+   * Escapes regex special characters in a string.
+   */
   safeString: (input: string) => string;
+  /**
+   * Options filtered by the current search.
+   */
   searchResults: () => T[];
+  /**
+   * Selects all options, or a specific list of values.
+   */
   selectAll: (valuesList?: T[]) => void;
+  /**
+   * Updates the search text from an input event.
+   */
   setSearch: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Options sorted by the `sortBy` field.
+   */
   sortBy: () => T[];
+  /**
+   * Selects all options or clears the selection, depending on the current state.
+   */
   toggleSelectAll: () => void;
 }
 
 export interface SelectProps<T> {
+  /**
+   * Backspace removes the last selected value when the search input is empty.
+   * @default true
+   * @category configuration
+   */
   backspaceDelete?: boolean;
+  /**
+   * CSS class applied to the root element.
+   * @default ''
+   * @category display
+   */
   className?: string;
+  /**
+   * Secondary placeholder shown on the search input when values are already selected.
+   * @default ''
+   * @category display
+   */
   addPlaceholder?: string;
+  /**
+   * Placeholder text shown when nothing is selected.
+   * @default 'Select...'
+   * @category display
+   */
   placeholder?: string;
+  /**
+   * Shows a loading indicator instead of the handle.
+   * @default false
+   * @category configuration
+   */
   loading?: boolean;
+  /**
+   * Style object applied to the root element.
+   * @category display
+   */
   style?: CSSProperties;
+  /**
+   * Nonce for the injected `<style>` tag, to satisfy a strict Content Security Policy.
+   * @category display
+   */
+  styleNonce?: string;
+  /**
+   * Controlled selected values.
+   * @default []
+   * @category configuration
+   */
   values?: T[];
+  /**
+   * Available options. Items with `disabled: true` are disabled.
+   * @default []
+   * @category configuration
+   */
   options?: T[];
+  /**
+   * Enables multi-select mode.
+   * @default false
+   * @category configuration
+   */
   multi?: boolean;
+  /**
+   * Disables all interactions.
+   * @default false
+   * @category configuration
+   */
   disabled?: boolean;
+  /**
+   * Field to search by. Supports dot notation.
+   * @default 'label'
+   * @category behavior
+   */
   searchBy?: string;
+  /**
+   * Field to sort options by. Supports dot notation.
+   * @default null
+   * @category behavior
+   */
   sortBy?: string | null;
+  /**
+   * Shows a clear-all button.
+   * @default false
+   * @category configuration
+   */
   clearable?: boolean;
+  /**
+   * Shows the search input.
+   * @default true
+   * @category configuration
+   */
   searchable?: boolean;
+  /**
+   * Shows the dropdown open/close chevron handle.
+   * @default true
+   * @category configuration
+   */
   dropdownHandle?: boolean;
+  /**
+   * Shows a vertical separator line before the handle.
+   * @default false
+   * @category configuration
+   */
   separator?: boolean;
+  /**
+   * Forces the dropdown to stay open (useful for debugging).
+   * @default false
+   * @category configuration
+   */
   keepOpen?: boolean;
+  /**
+   * Text displayed when there are no search results.
+   * @default 'No data'
+   * @category display
+   */
   noDataLabel?: string;
+  /**
+   * Label for the "add new" button. `{search}` is replaced with the input value.
+   * @default 'add {search}'
+   * @category display
+   */
   createNewLabel?: string;
+  /**
+   * Label suffix for disabled items.
+   * @default 'disabled'
+   * @category display
+   */
   disabledLabel?: string;
+  /**
+   * Gap in pixels between the select and the dropdown.
+   * @default 5
+   * @category display
+   */
   dropdownGap?: number;
+  /**
+   * Closes the dropdown when the page scrolls.
+   * @default false
+   * @category behavior
+   */
   closeOnScroll?: boolean;
+  /**
+   * Debounce delay in ms for resize/scroll handlers.
+   * @default 0
+   * @category behavior
+   */
   debounceDelay?: number;
+  /**
+   * Field name used for the display label. Supports dot notation.
+   * @default 'label'
+   * @category behavior
+   */
   labelField?: string;
+  /**
+   * Field name used for the value. Supports dot notation.
+   * @default 'value'
+   * @category behavior
+   */
   valueField?: string;
+  /**
+   * Base accent color. Accepts any CSS color value.
+   * @default '#0074D9'
+   * @category display
+   */
   color?: string;
+  /**
+   * Shows selected items in the dropdown list.
+   * @default true
+   * @category configuration
+   */
   keepSelectedInList?: boolean;
+  /**
+   * Closes the dropdown after selecting an item.
+   * @default false
+   * @category behavior
+   */
   closeOnSelect?: boolean;
+  /**
+   * Closes the dropdown when clicking the input area while not searching.
+   * @default false
+   * @category behavior
+   */
   closeOnClickInput?: boolean;
+  /**
+   * Clears the search text when the input loses focus.
+   * @default true
+   * @category behavior
+   */
   clearOnBlur?: boolean;
+  /**
+   * Clears the search text on item select/deselect.
+   * @default true
+   * @category behavior
+   */
   clearOnSelect?: boolean;
+  /**
+   * Dropdown position. `auto` adjusts based on available viewport space.
+   * @default 'bottom'
+   * @category behavior
+   */
   dropdownPosition?: 'top' | 'bottom' | 'auto';
+  /**
+   * Maximum height of the dropdown list.
+   * @default '300px'
+   * @category display
+   */
   dropdownHeight?: string;
+  /**
+   * Auto-focuses the search input on mount.
+   * @default false
+   * @category configuration
+   */
   autoFocus?: boolean;
+  /**
+   * Renders the dropdown inside the given DOM element (e.g. `document.body`).
+   * @category configuration
+   */
   portal?: HTMLElement;
+  /**
+   * Allows creating new entries from the search text.
+   * @default false
+   * @category configuration
+   */
   create?: boolean;
+  /**
+   * Text direction for RTL language support.
+   * @default 'ltr'
+   * @category display
+   */
   direction?: 'ltr' | 'rtl';
+  /**
+   * Hidden input name for form integration.
+   * @default null
+   * @category behavior
+   */
   name?: string | null;
+  /**
+   * Adds a hidden input with the required attribute for form validation.
+   * @default false
+   * @category configuration
+   */
   required?: boolean;
+  /**
+   * Hidden input pattern (regex) for form validation.
+   * @category behavior
+   */
   pattern?: string;
+  /**
+   * Opens the dropdown by default on mount.
+   * @default false
+   * @category configuration
+   */
   defaultMenuIsOpen?: boolean;
+  /**
+   * Fires on any values change and receives the new array of value objects.
+   * @default () => undefined
+   * @category callback
+   */
   onChange?: (value: T[]) => void;
+  /**
+   * Fires on user-triggered value add.
+   * @default () => undefined
+   * @category callback
+   */
   onSelect?: (value: T[]) => void;
+  /**
+   * Fires on user-triggered value remove.
+   * @default () => undefined
+   * @category callback
+   */
   onDeselect?: (value: T[]) => void;
+  /**
+   * Fires when the dropdown opens.
+   * @default () => undefined
+   * @category callback
+   */
   onDropdownOpen?: () => void;
+  /**
+   * Fires when the dropdown closes.
+   * @default () => undefined
+   * @category callback
+   */
   onDropdownClose?: () => void;
+  /**
+   * Fires when all values are cleared.
+   * @default () => undefined
+   * @category callback
+   */
   onClearAll?: () => void;
+  /**
+   * Label for the clear-all button.
+   * @default 'Clear all'
+   * @category display
+   */
   clearAllLabel?: string;
+  /**
+   * Fires when all values are selected.
+   * @default () => undefined
+   * @category callback
+   */
   onSelectAll?: () => void;
+  /**
+   * Fires when a new entry is created. Requires `create: true`.
+   * @default () => undefined
+   * @category callback
+   */
   onCreateNew?: (item: T) => void;
+  /**
+   * Intercepts the dropdown close. Call `close()` to actually close. Useful for animations.
+   * @category callback
+   */
   onDropdownCloseRequest?: (args: {
     props: SelectProps<T>;
     state: SelectState<T>;
     methods: SelectMethods<T>;
     close: () => void;
   }) => void;
+  /**
+   * Overrides the default search logic. Must return the filtered array.
+   * @default () => undefined
+   * @category override
+   */
   searchFn?: (args: RendererArgs<T>) => T[];
+  /**
+   * Overrides keyboard event handling.
+   * @default () => undefined
+   * @category override
+   */
   handleKeyDownFn?: (args: HandleKeyDownArgs<T>) => void;
+  /**
+   * Replaces the clear button.
+   * @category renderer
+   * @receives { props, state, methods }
+   * @replaces Clear button
+   */
   clearRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
+  /**
+   * Replaces the entire content area (selected values + input).
+   * @category renderer
+   * @receives { props, state, methods }
+   * @replaces Entire content area (selected values + input)
+   */
   contentRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
+  /**
+   * Replaces the entire dropdown container.
+   * @category renderer
+   * @receives { props, state, methods }
+   * @replaces Entire dropdown container
+   */
   dropdownRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
+  /**
+   * Replaces the dropdown arrow handle.
+   * @category renderer
+   * @receives { props, state, methods }
+   * @replaces Dropdown arrow handle
+   */
   dropdownHandleRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
+  /**
+   * Replaces the search input element.
+   * @category renderer
+   * @receives { props, state, methods, inputRef }
+   * @replaces Search input element
+   */
   inputRenderer?: (args: InputRendererArgs<T>) => JSX.Element | null;
+  /**
+   * Replaces individual dropdown list items.
+   * @category renderer
+   * @receives { item, itemIndex, props, state, methods }
+   * @replaces Individual dropdown list item
+   */
   itemRenderer?: (args: ItemRendererArgs<T>) => JSX.Element | null;
+  /**
+   * Replaces the loading indicator.
+   * @category renderer
+   * @receives { props }
+   * @replaces Loading indicator
+   */
   loadingRenderer?: (args: { props: SelectProps<T> }) => JSX.Element | null;
+  /**
+   * Replaces the "No data" message.
+   * @category renderer
+   * @receives { props, state, methods }
+   * @replaces "No data" message
+   */
   noDataRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
+  /**
+   * Replaces selected value pills/tags.
+   * @category renderer
+   * @receives { item, props, state, methods }
+   * @replaces Selected value pill/tag
+   */
   optionRenderer?: (args: ItemRendererArgs<T>) => JSX.Element | null;
+  /**
+   * Replaces the separator line.
+   * @category renderer
+   * @receives { props, state, methods }
+   * @replaces Separator line
+   */
   separatorRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
+  /**
+   * Additional HTML attributes passed to the root element.
+   * @category behavior
+   */
   additionalProps?: HTMLAttributes<HTMLDivElement>;
+  /**
+   * CSS class applied to the wrapper element.
+   * @category display
+   */
   wrapperClassName?: string;
+  /**
+   * Shows select-all / clear-all buttons in the dropdown (multi mode only).
+   * @default false
+   * @category configuration
+   */
   selectAll?: boolean;
+  /**
+   * Label for the select-all button.
+   * @default 'Select all'
+   * @category display
+   */
   selectAllLabel?: string;
+  /**
+   * Custom comparison function for controlled mode value syncing.
+   * @category behavior
+   */
   compareValuesFunc?: (a: T[], b: T[]) => boolean;
 }
 
diff --git a/packages/react-dropdown-select/src/styles.ts b/packages/react-dropdown-select/src/styles.ts
index a8fda482..93eeb00d 100644
--- a/packages/react-dropdown-select/src/styles.ts
+++ b/packages/react-dropdown-select/src/styles.ts
@@ -247,15 +247,52 @@ const CSS = `
   font-size: x-small;
   text-transform: uppercase;
 }
+.${LIB_NAME}-hidden-input {
+  opacity: 0;
+  width: 0;
+  position: absolute;
+}
 `.trim();
 
-let injected = false;
+let styleTag: HTMLStyleElement | null = null;
+let styleTagNonce: string | undefined;
+const registry = new Map<string, string>();
+
+const buildCss = (): string => [CSS, ...Array.from(registry.values())].join('\n');
+
+const ensureStyleTag = (nonce?: string): void => {
+  if (typeof document === 'undefined') return;
+  if (styleTag && styleTagNonce === nonce) return;
+
+  styleTag?.remove();
+  styleTag = document.createElement('style');
+  styleTag.setAttribute('data-react-dropdown-select', '');
+  if (nonce) {
+    styleTag.setAttribute('nonce', nonce);
+  }
+  document.head.appendChild(styleTag);
+  styleTagNonce = nonce;
+};
+
+const render = (): void => {
+  if (styleTag) {
+    styleTag.textContent = buildCss();
+  }
+};
+
+export function injectStyles(nonce?: string): void {
+  ensureStyleTag(nonce);
+  render();
+}
+
+export function registerStyle(id: string, css: string, nonce?: string): void {
+  registry.set(id, css);
+  ensureStyleTag(nonce);
+  render();
+}
 
-export function injectStyles(): void {
-  if (injected || typeof document === 'undefined') return;
-  const style = document.createElement('style');
-  style.setAttribute('data-react-dropdown-select', '');
-  style.textContent = CSS;
-  document.head.appendChild(style);
-  injected = true;
+export function unregisterStyle(id: string): void {
+  if (registry.delete(id)) {
+    render();
+  }
 }
diff --git a/packages/react-dropdown-select/types.d.ts b/packages/react-dropdown-select/types.d.ts
deleted file mode 100644
index c7a8cf73..00000000
--- a/packages/react-dropdown-select/types.d.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-declare module 'react-dropdown-select' {
-  import {
-    ChangeEvent,
-    CSSProperties,
-    HTMLAttributes,
-    KeyboardEvent,
-    MouseEvent,
-    PropsWithRef,
-    RefObject
-  } from 'react';
-
-  export interface SetStateFnArgs<T> {
-    dropdown?: boolean;
-    values?: T[];
-    search?: string;
-    selectBounds?: DOMRect | {};
-    cursor?: number | null;
-    activeCursorItem?: any;
-  }
-
-  export interface SelectState<T> {
-    dropdown: boolean;
-    values: T[];
-    search: string;
-    selectBounds: object;
-    cursor: number;
-  }
-
-  export interface SelectMethods<T> {
-    removeItem: (event: MouseEvent<HTMLElement> | null, item: T, close: boolean) => void;
-    dropDown: (action: string, event?: MouseEvent<HTMLElement> | null) => void;
-    addItem: (item: T) => void;
-    setSearch: (event: ChangeEvent<HTMLInputElement>) => void;
-    getInputSize: () => number;
-    toggleSelectAll: () => void;
-    clearAll: () => void;
-    selectAll: (items?: T[]) => void;
-    searchResults: () => T[];
-    getSelectRef: () => HTMLDivElement;
-    isSelected: (item: T) => boolean;
-    getSelectBounds: () => {} | DOMRect;
-    areAllSelected: () => boolean;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    activeCursorItem: (activeCursorItem: any) => void;
-    createNew: (searchText: string) => void;
-    sortBy: () => T[];
-    safeString: (input: string) => string;
-  }
-
-  export interface SelectRenderer<T> {
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-  }
-
-  export interface SelectOnDropdownCloseRequest<T> {
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-    close: () => void;
-  }
-
-  export interface SelectKeyDown<T> {
-    event: KeyboardEvent;
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-    setState: (
-      setter: ((args: SetStateFnArgs<T>) => SetStateFnArgs<T>) | SetStateFnArgs<T>
-    ) => void;
-  }
-
-  export interface SelectItemRenderer<T> {
-    item: T;
-    itemIndex?: number;
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-  }
-
-  export interface SelectProps<T> {
-    backspaceDelete?: boolean;
-    className?: string;
-    addPlaceholder?: string;
-    placeholder?: string;
-    loading?: boolean;
-    style?: CSSProperties;
-    values: T[];
-    options: T[];
-    multi?: boolean;
-    disabled?: boolean;
-    searchBy?: string;
-    sortBy?: string;
-    clearable?: boolean;
-    searchable?: boolean;
-    dropdownHandle?: boolean;
-    separator?: boolean;
-    keepOpen?: boolean;
-    noDataLabel?: string;
-    createNewLabel?: string;
-    disabledLabel?: string;
-    dropdownGap?: number;
-    closeOnScroll?: boolean;
-    debounceDelay?: number;
-    labelField?: string;
-    valueField?: string;
-    color?: string;
-    keepSelectedInList?: boolean;
-    closeOnSelect?: boolean;
-    closeOnClickInput?: boolean;
-    clearOnBlur?: boolean;
-    clearOnSelect?: boolean;
-    dropdownPosition?: 'top' | 'bottom' | 'auto';
-    dropdownHeight?: string;
-    autoFocus?: boolean;
-    portal?: HTMLElement;
-    create?: boolean;
-    direction?: 'ltr' | 'rtl';
-    name?: string;
-    required?: boolean;
-    pattern?: string;
-    defaultMenuIsOpen?: boolean;
-    onChange: (value: T[]) => void;
-    onSelect?: (value: T[]) => void;
-    onDeselect?: (value: T[]) => void;
-    onDropdownOpen?: () => void;
-    onDropdownClose?: () => void;
-    onClearAll?: () => void;
-    clearAllLabel?: string;
-    onSelectAll?: () => void;
-    onCreateNew?: (item: T) => void;
-    onDropdownCloseRequest?: ({
-      props,
-      state,
-      methods,
-      close
-    }: SelectOnDropdownCloseRequest<T>) => T[];
-    searchFn?: ({ props, state, methods }: SelectRenderer<T>) => T[];
-    handleKeyDownFn?: ({ event, props, state, methods, setState }: SelectKeyDown<T>) => void;
-    clearRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
-    contentRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
-    dropdownRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
-    dropdownHandleRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
-    inputRenderer?: ({
-      props,
-      state,
-      methods,
-      inputRef
-    }: SelectRenderer<T> & {
-      inputRef: RefObject<HTMLInputElement>;
-    }) => JSX.Element;
-    itemRenderer?: ({
-      item,
-      itemIndex,
-      props,
-      state,
-      methods
-    }: SelectItemRenderer<T>) => JSX.Element;
-    loadingRenderer?: ({ props }: SelectItemRenderer<T>) => JSX.Element;
-    noDataRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
-    optionRenderer?: ({ item, props, state, methods }: SelectItemRenderer<T>) => JSX.Element;
-    separatorRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
-    additionalProps?: HTMLAttributes<HTMLDivElement>;
-    wrapperClassName?: string;
-    selectAll?: boolean;
-    selectAllLabel?: string;
-  }
-
-  export interface DropDownProps {
-    selectBounds: DOMRect;
-    dropdownGap: number;
-    portal: HTMLElement;
-    dropdownHeight: string;
-    dropdownPosition: 'auto' | 'top' | 'bottom';
-  }
-
-  const Select: <T extends object | string = {}>(
-    props: PropsWithRef<SelectProps<T>>
-  ) => JSX.Element;
-  export default Select;
-}
diff --git a/packages/react-dropdown-select/types/components/Clear.d.ts b/packages/react-dropdown-select/types/components/Clear.d.ts
deleted file mode 100644
index b55a5559..00000000
--- a/packages/react-dropdown-select/types/components/Clear.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentRendererArgs } from '../select-types';
-declare const Clear: <T extends Record<string, any>>({ props, state, methods, }: ComponentRendererArgs<T>) => JSX.Element | null;
-export default Clear;
diff --git a/packages/react-dropdown-select/types/components/ClickOutside.d.ts b/packages/react-dropdown-select/types/components/ClickOutside.d.ts
deleted file mode 100644
index 5042ca68..00000000
--- a/packages/react-dropdown-select/types/components/ClickOutside.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { ClickOutsideProps } from '../select-types';
-declare class ClickOutside extends React.Component<ClickOutsideProps> {
-    container: React.RefObject<HTMLDivElement>;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleClick: (event: MouseEvent) => void;
-    render(): React.JSX.Element;
-}
-export default ClickOutside;
diff --git a/packages/react-dropdown-select/types/components/Content.d.ts b/packages/react-dropdown-select/types/components/Content.d.ts
deleted file mode 100644
index c9f3c109..00000000
--- a/packages/react-dropdown-select/types/components/Content.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-import { ComponentRendererArgs } from '../select-types';
-declare const Content: <T extends Record<string, any>>({ props, state, methods, }: ComponentRendererArgs<T>) => React.JSX.Element;
-export default Content;
diff --git a/packages/react-dropdown-select/types/components/Dropdown.d.ts b/packages/react-dropdown-select/types/components/Dropdown.d.ts
deleted file mode 100644
index 0040e7dc..00000000
--- a/packages/react-dropdown-select/types/components/Dropdown.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { SelectProps, SelectState, SelectMethods } from '../select-types';
-interface DropdownProps<T> {
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-}
-declare const Dropdown: <T extends Record<string, any>>({ props, state, methods }: DropdownProps<T>) => React.JSX.Element;
-export default Dropdown;
diff --git a/packages/react-dropdown-select/types/components/DropdownHandle.d.ts b/packages/react-dropdown-select/types/components/DropdownHandle.d.ts
deleted file mode 100644
index f8a9cd00..00000000
--- a/packages/react-dropdown-select/types/components/DropdownHandle.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import { ComponentRendererArgs } from '../select-types';
-interface DropdownHandleProps<T> extends ComponentRendererArgs<T> {
-    onClick?: () => void;
-}
-declare const DropdownHandle: <T extends Record<string, any>>({ props, state, methods, onClick, }: DropdownHandleProps<T>) => React.JSX.Element;
-export default DropdownHandle;
diff --git a/packages/react-dropdown-select/types/components/Input.d.ts b/packages/react-dropdown-select/types/components/Input.d.ts
deleted file mode 100644
index bf60c7d9..00000000
--- a/packages/react-dropdown-select/types/components/Input.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component, RefObject } from 'react';
-import { SelectProps, SelectState, SelectMethods } from '../select-types';
-interface InputProps<T> {
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-}
-declare class Input<T extends Record<string, any>> extends Component<InputProps<T>> {
-    input: RefObject<HTMLInputElement>;
-    componentDidUpdate(prevProps: InputProps<T>): void;
-    onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
-    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => any;
-    render(): JSX.Element | null;
-}
-export default Input;
diff --git a/packages/react-dropdown-select/types/components/Item.d.ts b/packages/react-dropdown-select/types/components/Item.d.ts
deleted file mode 100644
index 6e0ffcb6..00000000
--- a/packages/react-dropdown-select/types/components/Item.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, RefObject } from 'react';
-import { SelectProps, SelectState, SelectMethods } from '../select-types';
-interface ItemProps<T> {
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-    item: T;
-    itemIndex: number;
-}
-declare class Item<T extends Record<string, any>> extends Component<ItemProps<T>> {
-    item: RefObject<HTMLSpanElement>;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    render(): JSX.Element | null;
-}
-export default Item;
diff --git a/packages/react-dropdown-select/types/components/Loading.d.ts b/packages/react-dropdown-select/types/components/Loading.d.ts
deleted file mode 100644
index 81ba80c3..00000000
--- a/packages/react-dropdown-select/types/components/Loading.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { SelectProps } from '../select-types';
-interface LoadingProps<T> {
-    props: SelectProps<T>;
-}
-declare const Loading: <T extends Record<string, any>>({ props }: LoadingProps<T>) => JSX.Element | null;
-export default Loading;
diff --git a/packages/react-dropdown-select/types/components/NoData.d.ts b/packages/react-dropdown-select/types/components/NoData.d.ts
deleted file mode 100644
index c6fd82f0..00000000
--- a/packages/react-dropdown-select/types/components/NoData.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ComponentRendererArgs } from '../select-types';
-interface NoDataProps<T> extends ComponentRendererArgs<T> {
-    className?: string;
-}
-declare const NoData: <T extends Record<string, any>>({ props, state, methods, className, }: NoDataProps<T>) => JSX.Element | null;
-export default NoData;
diff --git a/packages/react-dropdown-select/types/components/Option.d.ts b/packages/react-dropdown-select/types/components/Option.d.ts
deleted file mode 100644
index 60eb2612..00000000
--- a/packages/react-dropdown-select/types/components/Option.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ItemRendererArgs } from '../select-types';
-declare const Option: <T extends Record<string, any>>({ item, props, state, methods, }: ItemRendererArgs<T>) => JSX.Element | null;
-export default Option;
diff --git a/packages/react-dropdown-select/types/components/Separator.d.ts b/packages/react-dropdown-select/types/components/Separator.d.ts
deleted file mode 100644
index 944801f5..00000000
--- a/packages/react-dropdown-select/types/components/Separator.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentRendererArgs } from '../select-types';
-declare const Separator: <T extends Record<string, any>>({ props, state, methods, }: ComponentRendererArgs<T>) => JSX.Element | null;
-export default Separator;
diff --git a/packages/react-dropdown-select/types/constants.d.ts b/packages/react-dropdown-select/types/constants.d.ts
deleted file mode 100644
index 060ec467..00000000
--- a/packages/react-dropdown-select/types/constants.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export declare const LIB_NAME = "react-dropdown-select";
diff --git a/packages/react-dropdown-select/types/hooks/useSelect.d.ts b/packages/react-dropdown-select/types/hooks/useSelect.d.ts
deleted file mode 100644
index 4466be97..00000000
--- a/packages/react-dropdown-select/types/hooks/useSelect.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { SelectProps, SelectState, SelectMethods, HandleKeyDownArgs } from '../select-types';
-interface SelectComponentState<T> extends SelectState<T> {
-    searchResults: T[];
-}
-export declare function useSelect<T extends Record<string, any>>(props: SelectProps<T>): {
-    state: SelectComponentState<T>;
-    methods: SelectMethods<T>;
-    selectRef: React.RefObject<HTMLDivElement>;
-    dropdownRoot: false | HTMLDivElement;
-    renderDropdown: () => React.JSX.Element;
-    setState: (updater: Partial<SelectComponentState<T>> | ((prev: SelectComponentState<T>) => Partial<SelectComponentState<T>>)) => void;
-    handleKeyDownFn: ({ event, state: s, props: p, methods: m, setState: sSet }: HandleKeyDownArgs<T>) => void | null;
-};
-export {};
diff --git a/packages/react-dropdown-select/types/index.d.ts b/packages/react-dropdown-select/types/index.d.ts
deleted file mode 100644
index f1a75e8b..00000000
--- a/packages/react-dropdown-select/types/index.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { SelectProps } from './select-types';
-type SelectRef = {
-    state: any;
-    methods: any;
-};
-declare const Select: (<T extends Record<string, any>>(props: SelectProps<T> & {
-    ref?: React.ForwardedRef<SelectRef>;
-}) => JSX.Element) & {
-    defaultProps: Partial<SelectProps<any>>;
-};
-export { Select };
-export default Select;
diff --git a/packages/react-dropdown-select/types/select-types.d.ts b/packages/react-dropdown-select/types/select-types.d.ts
deleted file mode 100644
index 3a2b2665..00000000
--- a/packages/react-dropdown-select/types/select-types.d.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { CSSProperties, HTMLAttributes, KeyboardEvent, MouseEvent, RefObject, ChangeEvent } from 'react';
-export interface SelectState<T> {
-    dropdown: boolean;
-    values: T[];
-    search: string;
-    selectBounds: DOMRect | Record<string, never>;
-    cursor: number | null;
-    searchResults: T[];
-    activeCursorItem?: any;
-}
-export interface SelectMethods<T> {
-    activeCursorItem: (item: any) => void;
-    addItem: (item: T) => void;
-    areAllSelected: () => boolean;
-    clearAll: () => void;
-    createNew: (item: string) => void;
-    dropDown: (action: string, event?: React.MouseEvent | React.KeyboardEvent | null, force?: boolean) => void | false;
-    getInputSize: () => number;
-    getSelectBounds: () => DOMRect | Record<string, never>;
-    getSelectRef: () => HTMLDivElement | null;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    isSelected: (item: T) => boolean;
-    removeItem: (event: MouseEvent<HTMLElement> | null, item: T, close?: boolean) => void;
-    safeString: (input: string) => string;
-    searchResults: () => T[];
-    selectAll: (valuesList?: T[]) => void;
-    setSearch: (event: ChangeEvent<HTMLInputElement>) => void;
-    sortBy: () => T[];
-    toggleSelectAll: () => void;
-}
-export interface SelectProps<T> {
-    backspaceDelete?: boolean;
-    className?: string;
-    addPlaceholder?: string;
-    placeholder?: string;
-    loading?: boolean;
-    style?: CSSProperties;
-    values?: T[];
-    options?: T[];
-    multi?: boolean;
-    disabled?: boolean;
-    searchBy?: string;
-    sortBy?: string | null;
-    clearable?: boolean;
-    searchable?: boolean;
-    dropdownHandle?: boolean;
-    separator?: boolean;
-    keepOpen?: boolean;
-    noDataLabel?: string;
-    createNewLabel?: string;
-    disabledLabel?: string;
-    dropdownGap?: number;
-    closeOnScroll?: boolean;
-    debounceDelay?: number;
-    labelField?: string;
-    valueField?: string;
-    color?: string;
-    keepSelectedInList?: boolean;
-    closeOnSelect?: boolean;
-    closeOnClickInput?: boolean;
-    clearOnBlur?: boolean;
-    clearOnSelect?: boolean;
-    dropdownPosition?: 'top' | 'bottom' | 'auto';
-    dropdownHeight?: string;
-    autoFocus?: boolean;
-    portal?: HTMLElement;
-    create?: boolean;
-    direction?: 'ltr' | 'rtl';
-    name?: string | null;
-    required?: boolean;
-    pattern?: string;
-    defaultMenuIsOpen?: boolean;
-    onChange?: (value: T[]) => void;
-    onSelect?: (value: T[]) => void;
-    onDeselect?: (value: T[]) => void;
-    onDropdownOpen?: () => void;
-    onDropdownClose?: () => void;
-    onClearAll?: () => void;
-    clearAllLabel?: string;
-    onSelectAll?: () => void;
-    onCreateNew?: (item: T) => void;
-    onDropdownCloseRequest?: (args: {
-        props: SelectProps<T>;
-        state: SelectState<T>;
-        methods: SelectMethods<T>;
-        close: () => void;
-    }) => void;
-    searchFn?: (args: RendererArgs<T>) => T[];
-    handleKeyDownFn?: (args: HandleKeyDownArgs<T>) => void;
-    clearRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
-    contentRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
-    dropdownRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
-    dropdownHandleRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
-    inputRenderer?: (args: InputRendererArgs<T>) => JSX.Element | null;
-    itemRenderer?: (args: ItemRendererArgs<T>) => JSX.Element | null;
-    loadingRenderer?: (args: {
-        props: SelectProps<T>;
-    }) => JSX.Element | null;
-    noDataRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
-    optionRenderer?: (args: ItemRendererArgs<T>) => JSX.Element | null;
-    separatorRenderer?: (args: RendererArgs<T>) => JSX.Element | null;
-    additionalProps?: HTMLAttributes<HTMLDivElement>;
-    wrapperClassName?: string;
-    selectAll?: boolean;
-    selectAllLabel?: string;
-    compareValuesFunc?: (a: T[], b: T[]) => boolean;
-}
-export interface RendererArgs<T> {
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-}
-export interface InputRendererArgs<T> extends RendererArgs<T> {
-    inputRef: RefObject<HTMLInputElement>;
-}
-export interface ItemRendererArgs<T> {
-    item: T;
-    itemIndex?: number;
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-}
-export interface HandleKeyDownArgs<T> {
-    event: KeyboardEvent;
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-    setState: React.Dispatch<React.SetStateAction<any>>;
-}
-export interface ClickOutsideProps {
-    onClickOutside: (event: React.MouseEvent | MouseEvent) => void;
-    children: React.ReactNode;
-    className?: string;
-}
-export interface ComponentRendererArgs<T> {
-    props: SelectProps<T>;
-    state: SelectState<T>;
-    methods: SelectMethods<T>;
-}
diff --git a/packages/react-dropdown-select/types/styles.d.ts b/packages/react-dropdown-select/types/styles.d.ts
deleted file mode 100644
index 4cb7fc77..00000000
--- a/packages/react-dropdown-select/types/styles.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export declare function injectStyles(): void;
diff --git a/packages/react-dropdown-select/types/util.d.ts b/packages/react-dropdown-select/types/util.d.ts
deleted file mode 100644
index 02ead996..00000000
--- a/packages/react-dropdown-select/types/util.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { SelectProps } from './select-types';
-export declare const valueExistInSelected: <T extends Record<string, any>>(value: any, values: T[], props: SelectProps<T>) => boolean;
-export declare const hexToRGBA: (hex: string, alpha?: number) => string;
-export declare const debounce: <T extends (...args: any[]) => void>(fn: T, delay?: number) => (...args: Parameters<T>) => void;
-export declare const isEqual: (a: any, b: any) => boolean;
-export declare const getByPath: (object: any, path?: string) => any;
-export declare const getProp: (object: any, path?: string | string[], defaultValue?: any) => any;
-export declare const isomorphicWindow: () => Window & typeof globalThis;