diff --git a/rollup.config.mjs b/rollup.config.mjs
index 48cca0f9..97addb6b 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -1,11 +1,24 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import serve from 'rollup-plugin-serve';
+import glob from 'glob';
+import path from 'path';
 
-const production = !process.env.ROLLUP_WATCH,
+const production = !process.env.ROLLUP_WATCH;
 
- modernConfig = {
+// Function to get additional entry points
+const getAdditionalEntryPoints = () => {
+  const files = glob.sync('src/*/index.js');
+  return files.reduce((acc, file) => {
+    const name = path.basename(path.dirname(file));
+    acc[`${name}__bundled`] = file;
+    return acc;
+  }, {});
+};
+
+const modernConfig = {
   input: {
     ['auro-form__bundled']: './index.js',
+    ...getAdditionalEntryPoints()
   },
   output: {
     format: 'esm',
@@ -21,4 +34,4 @@ const production = !process.env.ROLLUP_WATCH,
   ]
 };
 
-export default [modernConfig];
+export default [modernConfig];
\ No newline at end of file
diff --git a/src/auro-input/color.scss b/src/auro-input/color.scss
new file mode 100644
index 00000000..5f257525
--- /dev/null
+++ b/src/auro-input/color.scss
@@ -0,0 +1,96 @@
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Support for fallback values
+@import './../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+/* stylelint-disable */
+
+/* stylelint-disable no-descending-specificity */
+
+// Handle highlighting the border during focus and invalid state
+@mixin border-highlight {
+  &:before {
+    border-bottom-color: transparent;
+  }
+}
+
+.wrapper {
+  border-color: transparent;
+}
+
+.inputElement-helpText {
+  color: var(--ds-auro-input-help-text-color);
+}
+
+input {
+  background-color: transparent;
+  caret-color: var(--ds-auro-input-caret-color);
+  color: var(--ds-auro-input-text-color);
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:focus {
+    &::placeholder {
+      color: var(--ds-auro-input-placeholder-text-color);
+    }
+  }
+
+  &:disabled {
+    --ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
+  }
+}
+
+label {
+  color: var(--ds-auro-input-label-text-color);
+}
+
+:host(:not([bordered], [borderless])) {
+  .wrapper {
+    border-bottom-color: var(--ds-auro-input-border-color);
+  }
+}
+
+:host([bordered]) {
+  .wrapper {
+    border-color: var(--ds-auro-input-border-color);
+    background-color: var(--ds-auro-input-container-color);
+
+    &:focus-within {
+      --ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+
+      box-shadow: inset 0 0 0 1px var(--ds-auro-input-border-color);
+    }
+  }
+}
+
+:host(:not([borderless])) {
+  .wrapper {
+    &:focus-within {
+      --ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+
+      @include border-highlight;
+    }
+  }
+}
+
+:host([validity]:not([validity='valid'])) {
+  --ds-auro-input-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
+  --ds-auro-input-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
+}
+
+:host([validity]:not([validity='valid'])[bordered]) {
+  .wrapper {
+    --ds-auro-input-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
+
+    box-shadow: inset 0 0 0 1px var(--ds-auro-input-border-color);
+  }
+}
+
+:host([disabled]) {
+  --ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
+  --ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
+}
diff --git a/src/auro-input/index.js b/src/auro-input/index.js
new file mode 100644
index 00000000..ca048c82
--- /dev/null
+++ b/src/auro-input/index.js
@@ -0,0 +1,4 @@
+import { AuroInput } from './auro-input.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-input', AuroInput);
diff --git a/src/auro-input/tokens.scss b/src/auro-input/tokens.scss
new file mode 100644
index 00000000..2bb55237
--- /dev/null
+++ b/src/auro-input/tokens.scss
@@ -0,0 +1,11 @@
+@import './../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-input-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
+  --ds-auro-input-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #{$ds-color-text-ui-focus-default});
+  --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
+  --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
+  --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-input-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+}
diff --git a/src/dropdown/index.js b/src/dropdown/index.js
new file mode 100644
index 00000000..48ea3dc7
--- /dev/null
+++ b/src/dropdown/index.js
@@ -0,0 +1,4 @@
+import { AuroDropdown } from './auro-dropdown.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-dropdown', AuroDropdown);